import { jsxs, jsx } from 'react/jsx-runtime';
import { forwardRef, useId } from 'react';
import { S as SvgCheck } from './check-Cf67OWrZ.js';
import { I as Icon } from './Icon-BMMbp40n.js';
import { F as Flex } from './Flex-DOUtHiPi.js';
import { A as AiMark } from './AiMark-B1-M3ZgP.js';
import { c as cx } from './index-De1g9FRV.js';
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-CB_zHDbW.js';
import { c as childrenToString } from './childrenToString-Bz9MqbHb.js';
import { useTrackingId } from './useTrackingId.js';
import { H as Helper } from './Helper-DtDeaYTn.js';

import './Switch.css';const input = "_input_bpqzm_33";
const toggle = "_toggle_bpqzm_42";
const thumb = "_thumb_bpqzm_57";
const check = "_check_bpqzm_77";
const styles = {
	"switch": "_switch_bpqzm_1",
	input: input,
	toggle: toggle,
	thumb: thumb,
	check: check,
	"ai-mark-icon": "_ai-mark-icon_bpqzm_136"
};

const Switch = forwardRef(
  (props, ref) => {
    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
    const {
      label,
      labelAiMark,
      description,
      className,
      onChange,
      checked,
      defaultChecked,
      value,
      style,
      "aria-label": ariaLabel,
      ...rest
    } = componentProps;
    const helperUid = useId();
    const onChangeHandler = (e) => {
      onChange?.(e, { value, checked: e.target.checked });
    };
    const data = {
      label: childrenToString(label),
      ariaLabel: ariaLabel || "Toggle option",
      ariaLabelledBy: rest["aria-labelledby"],
      value
    };
    const trackingId = useTrackingId({
      name: "Switch",
      data,
      hasOverride: !!rest["data-tracking-id"]
    });
    const switchClassNames = cx(styles["switch"], className);
    const styleCombined = {
      ...style,
      ...layoutStyles,
      alignItems: description ? "flex-start" : "center"
    };
    return /* @__PURE__ */ jsxs("label", { className: switchClassNames, style: styleCombined, children: [
      /* @__PURE__ */ jsx(
        "input",
        {
          className: styles["input"],
          "data-tracking-id": trackingId,
          "data-anv": "switch",
          ref,
          type: "checkbox",
          role: "switch",
          value,
          "aria-checked": checked ?? defaultChecked,
          "aria-label": label ? void 0 : ariaLabel || "Toggle option",
          checked,
          defaultChecked,
          onChange: onChangeHandler,
          ...rest
        }
      ),
      /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: styles["toggle"], children: /* @__PURE__ */ jsx("span", { className: styles["thumb"], children: /* @__PURE__ */ jsx(Icon, { svg: SvgCheck, className: styles["check"] }) }) }),
      label || description ? /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, children: [
        /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, children: [
          label && label,
          labelAiMark && /* @__PURE__ */ jsx(
            AiMark,
            {
              className: styles["ai-mark-icon"],
              type: "gradient",
              popoverOrTooltipConfig: typeof labelAiMark === "object" ? labelAiMark : void 0
            }
          )
        ] }),
        description && /* @__PURE__ */ jsx(Helper, { id: helperUid, description })
      ] }) : null
    ] });
  }
);
Switch.displayName = "Switch";

export { Switch as S };
//# sourceMappingURL=Switch-DeBu4Ucg.js.map
