import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { useState, forwardRef } from 'react';
import { c as cx } from './index-SvGbrGuT.js';
import { S as SrOnly } from './SrOnly-CrdBTl6E.js';
import { T as Tooltip } from './Tooltip-Bt62hC5J.js';
import { I as Icon } from './Icon-Bcil6aBo.js';
import { S as SvgInfo } from './info-CYpG6tcI.js';

import './FieldLabel.css';const label = "_label_wc4yy_2";
const required = "_required_wc4yy_61";
const styles = {
	label: label,
	"top-container": "_top-container_wc4yy_52",
	"label-text": "_label-text_wc4yy_57",
	required: required,
	"info-trigger": "_info-trigger_wc4yy_66",
	"info-content": "_info-content_wc4yy_71"
};

const FieldLabelMoreInfoIcon = ({
  moreInfo,
  moreInfoOpen,
  listenForHover = false
}) => {
  const [hovered, setHovered] = useState(false);
  const open = listenForHover && hovered ? true : moreInfoOpen;
  return /* @__PURE__ */ jsxs(
    Tooltip,
    {
      open,
      placement: "top",
      offset: 5,
      fallbackPlacements: ["right", "bottom", "left"],
      children: [
        /* @__PURE__ */ jsx(
          Tooltip.Trigger,
          {
            className: styles["info-trigger"],
            onMouseEnter: () => setHovered(true),
            onMouseLeave: () => setHovered(false),
            children: /* @__PURE__ */ jsx(Icon, { svg: SvgInfo })
          }
        ),
        /* @__PURE__ */ jsx(Tooltip.Content, { className: styles["info-content"], children: moreInfo })
      ]
    }
  );
};

const FieldLabelElement = forwardRef(
  ({
    el: Element = "label",
    children,
    className,
    moreInfo,
    required,
    moreInfoOpen,
    ...props
  }, ref) => {
    const FieldLabelClassNames = cx([styles["label"]], className);
    return /* @__PURE__ */ jsxs(
      Element,
      {
        className: FieldLabelClassNames,
        "data-anv": "label",
        ref,
        ...props,
        children: [
          /* @__PURE__ */ jsxs("div", { className: styles["top-container"], "aria-atomic": "true", children: [
            /* @__PURE__ */ jsxs("span", { className: styles["label-text"], children: [
              children,
              required ? /* @__PURE__ */ jsxs(Fragment, { children: [
                /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: styles["required"], children: "*" }),
                /* @__PURE__ */ jsx(SrOnly, { children: "Required" })
              ] }) : null
            ] }),
            moreInfo ? /* @__PURE__ */ jsx(
              FieldLabelMoreInfoIcon,
              {
                moreInfo,
                moreInfoOpen
              }
            ) : null
          ] }),
          moreInfo ? /* @__PURE__ */ jsx(SrOnly, { children: moreInfo }) : null
        ]
      }
    );
  }
);
FieldLabelElement.displayName = "FieldLabel";
const FieldLabel = FieldLabelElement;

export { FieldLabel as F };
//# sourceMappingURL=FieldLabel-DL0D6fvc.js.map
