@frontify/fondue 13.0.0-rc.14 → 13.0.0-rc.16

package/dist/components/Checkbox/Checkbox.es.js

@@ -1,98 +1,96 @@
 import { jsx as r, jsxs as p } from "react/jsx-runtime";
-import { useCheckbox as Q } from "@react-aria/checkbox";
-import { useFocusRing as V } from "@react-aria/focus";
-import { mergeProps as Z } from "@react-aria/utils";
-import { useToggleState as q } from "@react-stately/toggle";
-import { forwardRef as R, useState as k, useRef as F, useEffect as O, useCallback as T } from "react";
-import { InputLabel as ee } from "../InputLabel/InputLabel.es.js";
-import te from "../../foundation/Icon/Generated/IconCheckMark.es.js";
-import re from "../../foundation/Icon/Generated/IconMinus.es.js";
-import { IconSize as y } from "../../foundation/Icon/IconSize.es.js";
-import { useMemoizedId as oe } from "../../hooks/useMemoizedId.es.js";
+import { IconMinus as K, IconCheckMark as Q } from "@frontify/fondue-icons";
+import { useCheckbox as V } from "@react-aria/checkbox";
+import { useFocusRing as Z } from "@react-aria/focus";
+import { mergeProps as q } from "@react-aria/utils";
+import { useToggleState as R } from "@react-stately/toggle";
+import { forwardRef as T, useState as k, useRef as O, useEffect as y, useCallback as ee } from "react";
+import { InputLabel as te } from "../InputLabel/InputLabel.es.js";
+import { useMemoizedId as re } from "../../hooks/useMemoizedId.es.js";
 import { FOCUS_STYLE as ne } from "../../utilities/focusStyle.es.js";
 import { merge as s } from "../../utilities/merge.es.js";
-import { useForwardedRef as se } from "../../utilities/useForwardedRef.es.js";
-var ie = /* @__PURE__ */ ((e) => (e.Checked = "Checked", e.Unchecked = "Unchecked", e.Mixed = "Mixed", e))(ie || {}), le = /* @__PURE__ */ ((e) => (e.Default = "Default", e.Weak = "Weak", e.Strong = "Strong", e))(le || {}), ae = /* @__PURE__ */ ((e) => (e.Default = "Default", e.Large = "Large", e.XLarge = "XLarge", e))(ae || {});
-const ce = (e) => e === "Checked" || e === "Mixed", E = "tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover", we = {
+import { useForwardedRef as oe } from "../../utilities/useForwardedRef.es.js";
+var se = /* @__PURE__ */ ((e) => (e.Checked = "Checked", e.Unchecked = "Unchecked", e.Mixed = "Mixed", e))(se || {}), ie = /* @__PURE__ */ ((e) => (e.Default = "Default", e.Weak = "Weak", e.Strong = "Strong", e))(ie || {}), le = /* @__PURE__ */ ((e) => (e.Default = "Default", e.Large = "Large", e.XLarge = "XLarge", e))(le || {});
+const ae = (e) => e === "Checked" || e === "Mixed", E = "tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover", ce = {
   Weak: "tw-bg-box-neutral-strong tw-text-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-hover",
   Default: E,
   Strong: E
-}, de = {
+}, we = {
   Default: "tw-h-4 tw-w-4",
   Large: "tw-h-5 tw-w-5",
   XLarge: "tw-h-8 tw-w-8"
-}, ue = ({
+}, de = ({
   id: e,
   emphasis: C = "Default",
   size: L = "Default",
   disabled: i,
   required: b,
-  label: n,
+  label: o,
   hideLabel: v,
-  tooltip: W,
+  tooltip: S,
   helperText: l,
   "aria-label": M,
-  value: z,
+  value: W,
   groupInputProps: $,
   onChange: U,
   state: a = "Unchecked",
   "data-test-id": c = "checkbox"
-}, I) => {
-  const h = oe(e), t = se(I), { focusProps: X } = V(), j = q({
+}, X) => {
+  const h = re(e), t = oe(X), { focusProps: j } = Z(), z = R({
     onChange: i ? void 0 : U,
     isSelected: a === "Checked"
     /* Checked */
-  }), [P, D] = k(), w = F(null), d = F(null), [H, Y] = k(!1), [_, A] = k(!1), N = (o) => {
-    o.key === "Tab" && D(!0);
-  }, S = () => {
+  }), [I, D] = k(), w = O(null), d = O(null), [P, H] = k(!1), [Y, _] = k(!1), N = (n) => {
+    n.key === "Tab" && D(!0);
+  }, F = () => {
     D(!1);
   };
-  O(() => {
-    var o, f;
-    return (o = t == null ? void 0 : t.current) == null || o.addEventListener("keyup", N), (f = t == null ? void 0 : t.current) == null || f.addEventListener("blur", S), () => {
+  y(() => {
+    var n, f;
+    return (n = t == null ? void 0 : t.current) == null || n.addEventListener("keyup", N), (f = t == null ? void 0 : t.current) == null || f.addEventListener("blur", F), () => {
       var m, x;
-      (m = t == null ? void 0 : t.current) == null || m.removeEventListener("keyup", N), (x = t == null ? void 0 : t.current) == null || x.removeEventListener("blur", S);
+      (m = t == null ? void 0 : t.current) == null || m.removeEventListener("keyup", N), (x = t == null ? void 0 : t.current) == null || x.removeEventListener("blur", F);
     };
   }, []);
-  const { inputProps: B } = Q(
+  const { inputProps: A } = V(
     {
       isDisabled: i,
       isRequired: b,
       isIndeterminate: a === "Mixed",
       "aria-label": M,
-      value: z
+      value: W
     },
-    j,
+    z,
     t
-  ), G = {
-    Checked: /* @__PURE__ */ r(te, { size: L === "XLarge" ? y.Size24 : y.Size16 }),
-    Mixed: /* @__PURE__ */ r(re, {}),
+  ), B = {
+    Checked: /* @__PURE__ */ r(Q, { size: L === "XLarge" ? 24 : 16 }),
+    Mixed: /* @__PURE__ */ r(K, {}),
     Unchecked: null
-  }, g = ce(a), J = s([
+  }, g = ae(a), G = s([
     "tw-bg-box-disabled tw-pointer-events-none tw-text-box-disabled-inverse tw-border-line-strong",
     g && "tw-text-box-disabled-inverse tw-border-line-strong"
-  ]), K = g ? we[C] : s([
+  ]), J = g ? ce[C] : s([
     "tw-bg-base hover:tw-bg-box-neutral",
     C === "Strong" ? "tw-border-2 tw-border-box-selected-strong" : "tw-border tw-border-line-xx-strong"
-  ]), u = T(() => {
-    var o, f, m, x;
-    w.current && Y(((o = w.current) == null ? void 0 : o.scrollWidth) > ((f = w.current) == null ? void 0 : f.clientWidth)), d.current && A(
+  ]), u = ee(() => {
+    var n, f, m, x;
+    w.current && H(((n = w.current) == null ? void 0 : n.scrollWidth) > ((f = w.current) == null ? void 0 : f.clientWidth)), d.current && _(
       ((m = d.current) == null ? void 0 : m.scrollWidth) > ((x = d.current) == null ? void 0 : x.clientWidth)
     );
   }, [w, d]);
-  return O(() => {
-    if (!(!n && !l || v))
+  return y(() => {
+    if (!(!o && !l || v))
       return u(), window.removeEventListener("resize", u), window.addEventListener("resize", u), () => {
         window.removeEventListener("resize", u);
       };
-  }, [n, l, v, u]), /* @__PURE__ */ r("div", { className: "tw-gap-1 tw-transition-colors tw-w-full", "data-test-id": c, children: /* @__PURE__ */ r("div", { className: s(["tw-inline-flex tw-flex-row tw-rounded tw-w-full", P ? ne : ""]), children: /* @__PURE__ */ r(
-    ee,
+  }, [o, l, v, u]), /* @__PURE__ */ r("div", { className: "tw-gap-1 tw-transition-colors tw-w-full", "data-test-id": c, children: /* @__PURE__ */ r("div", { className: s(["tw-inline-flex tw-flex-row tw-rounded tw-w-full", I ? ne : ""]), children: /* @__PURE__ */ r(
+    te,
     {
       id: `${h}-label`,
       disabled: i,
       clickable: !0,
       htmlFor: h,
-      tooltip: W,
+      tooltip: S,
       required: b,
       bold: g,
       children: /* @__PURE__ */ p("span", { className: "tw-flex tw-items-center tw-whitespace-nowrap", children: [
@@ -100,7 +98,7 @@ const ce = (e) => e === "Checked" || e === "Mixed", E = "tw-bg-box-selected-stro
           /* @__PURE__ */ r(
             "input",
             {
-              ...Z($ || B, X),
+              ...q($ || A, j),
               id: h,
               ref: t,
               className: "tw-sr-only",
@@ -109,7 +107,7 @@ const ce = (e) => e === "Checked" || e === "Mixed", E = "tw-bg-box-selected-stro
               "aria-checked": a === "Checked",
               required: b,
               "aria-label": M,
-              "aria-labelledby": n ? `${h}-label` : void 0
+              "aria-labelledby": o ? `${h}-label` : void 0
             }
           ),
           /* @__PURE__ */ r(
@@ -119,15 +117,15 @@ const ce = (e) => e === "Checked" || e === "Mixed", E = "tw-bg-box-selected-stro
               "aria-hidden": "true",
               className: s([
                 "tw-leading-3 tw-relative tw-flex tw-items-center tw-justify-center tw-rounded tw-shrink-0 tw-flex-none",
-                de[L],
-                i ? J : K
+                we[L],
+                i ? G : J
               ]),
-              children: G[a]
+              children: B[a]
             }
           )
         ] }),
         !v && /* @__PURE__ */ p("span", { className: "tw-inline-flex tw-flex-col tw-min-w-0 tw-ml-1.5", children: [
-          n && /* @__PURE__ */ r(
+          o && /* @__PURE__ */ r(
             "span",
             {
               ref: w,
@@ -137,8 +135,8 @@ const ce = (e) => e === "Checked" || e === "Mixed", E = "tw-bg-box-selected-stro
                 "tw-text-xs tw-select-none hover:tw-cursor-pointer hover:tw-text-black dark:hover:tw-text-white group-hover:tw-text-black dark:group-hover:tw-text-white",
                 g && "tw-font-medium"
               ]),
-              title: H ? n : void 0,
-              children: n
+              title: P ? o : void 0,
+              children: o
             }
           ),
           l && /* @__PURE__ */ r(
@@ -151,7 +149,7 @@ const ce = (e) => e === "Checked" || e === "Mixed", E = "tw-bg-box-selected-stro
                 "tw-font-sans tw-text-xs tw-font-normal",
                 i ? "text-disabled" : "tw-text-text-weak"
               ]),
-              title: _ ? l : void 0,
+              title: Y ? l : void 0,
               children: l
             }
           )
@@ -159,12 +157,12 @@ const ce = (e) => e === "Checked" || e === "Mixed", E = "tw-bg-box-selected-stro
       ] })
     }
   ) }) });
-}, fe = R(ue);
-fe.displayName = "FondueCheckbox";
+}, ue = T(de);
+ue.displayName = "FondueCheckbox";
 export {
-  fe as Checkbox,
-  le as CheckboxEmphasis,
-  ae as CheckboxSize,
-  ie as CheckboxState
+  ue as Checkbox,
+  ie as CheckboxEmphasis,
+  le as CheckboxSize,
+  se as CheckboxState
 };
 //# sourceMappingURL=Checkbox.es.js.map

package/dist/components/Checkbox/Checkbox.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.es.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useCheckbox } from '@react-aria/checkbox';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { useToggleState } from '@react-stately/toggle';\nimport {\n    forwardRef,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n    type ForwardRefRenderFunction,\n    type HTMLAttributes,\n    type ReactNode,\n} from 'react';\n\nimport { InputLabel, type InputLabelTooltipProps } from '@components/InputLabel/InputLabel';\nimport IconCheckMark from '@foundation/Icon/Generated/IconCheckMark';\nimport IconMinus from '@foundation/Icon/Generated/IconMinus';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { useForwardedRef } from '@utilities/useForwardedRef';\n\n/**\n * @deprecated Use `Checkbox` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#checkbox the migration guide}.\n */\nexport enum CheckboxState {\n    Checked = 'Checked',\n    Unchecked = 'Unchecked',\n    Mixed = 'Mixed',\n}\n\n/**\n * @deprecated Use `Checkbox` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#checkbox the migration guide}.\n */\nexport enum CheckboxEmphasis {\n    Default = 'Default',\n    Weak = 'Weak',\n    Strong = 'Strong',\n}\n\n/**\n * @deprecated Use `Checkbox` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#checkbox the migration guide}.\n */\nexport enum CheckboxSize {\n    Default = 'Default',\n    Large = 'Large',\n    XLarge = 'XLarge',\n}\n\n/**\n * @deprecated Use `Checkbox` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#checkbox the migration guide}.\n */\nexport type CheckboxProps = {\n    id?: string;\n    state?: CheckboxState;\n    emphasis?: CheckboxEmphasis;\n    size?: CheckboxSize;\n    disabled?: boolean;\n    required?: boolean;\n    value?: string;\n    onChange?: (isChecked: boolean) => void;\n    label?: string;\n    hideLabel?: boolean;\n    tooltip?: InputLabelTooltipProps;\n    helperText?: string;\n    'aria-label'?: string;\n    groupInputProps?: HTMLAttributes<HTMLElement>;\n    'data-test-id'?: string;\n};\n\nconst isCheckedOrMixed = (checked: CheckboxState): boolean => {\n    return checked === CheckboxState.Checked || checked === CheckboxState.Mixed;\n};\n\nconst emphasisDefaultClasses =\n    'tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover';\n\nconst emphasisCheckedClassesMap: Record<CheckboxEmphasis, string> = {\n    [CheckboxEmphasis.Weak]:\n        'tw-bg-box-neutral-strong tw-text-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-hover',\n    [CheckboxEmphasis.Default]: emphasisDefaultClasses,\n    [CheckboxEmphasis.Strong]: emphasisDefaultClasses,\n};\n\nconst sizeClassesMap: Record<CheckboxSize, string> = {\n    [CheckboxSize.Default]: 'tw-h-4 tw-w-4',\n    [CheckboxSize.Large]: 'tw-h-5 tw-w-5',\n    [CheckboxSize.XLarge]: 'tw-h-8 tw-w-8',\n};\n\nconst CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, CheckboxProps> = (\n    {\n        id: propId,\n        emphasis = CheckboxEmphasis.Default,\n        size = CheckboxSize.Default,\n        disabled,\n        required,\n        label,\n        hideLabel,\n        tooltip,\n        helperText,\n        'aria-label': ariaLabel,\n        value,\n        groupInputProps,\n        onChange,\n        state = CheckboxState.Unchecked,\n        'data-test-id': dataTestId = 'checkbox',\n    },\n    ref,\n) => {\n    const id = useMemoizedId(propId);\n    const inputRef = useForwardedRef<HTMLInputElement | null>(ref);\n    const { focusProps } = useFocusRing();\n    const toggleState = useToggleState({\n        onChange: disabled ? undefined : onChange,\n        isSelected: state === CheckboxState.Checked,\n    });\n    const [showFocus, setShowFocus] = useState<Nullable<boolean>>();\n    const labelContainer = useRef<HTMLSpanElement>(null);\n    const helperTextContainer = useRef<HTMLSpanElement>(null);\n    const [isLabelOverflowing, setIsLabelOverflowing] = useState(false);\n    const [isHelperTextOverflowing, setIsHelperTextOverflowing] = useState(false);\n\n    const tabFocusListener = (event: KeyboardEvent) => {\n        if (event.key === 'Tab') {\n            setShowFocus(true);\n        }\n    };\n\n    const blurListener = () => {\n        setShowFocus(false);\n    };\n\n    useEffect(() => {\n        inputRef?.current?.addEventListener('keyup', tabFocusListener);\n        inputRef?.current?.addEventListener('blur', blurListener);\n\n        return () => {\n            inputRef?.current?.removeEventListener('keyup', tabFocusListener);\n            inputRef?.current?.removeEventListener('blur', blurListener);\n        };\n    }, []);\n\n    const { inputProps } = useCheckbox(\n        {\n            isDisabled: disabled,\n            isRequired: required,\n            isIndeterminate: state === CheckboxState.Mixed,\n            'aria-label': ariaLabel,\n            value,\n        },\n        toggleState,\n        inputRef,\n    );\n\n    const stateMap: Record<CheckboxState, ReactNode> = {\n        [CheckboxState.Checked]: (\n            <IconCheckMark size={size === CheckboxSize.XLarge ? IconSize.Size24 : IconSize.Size16} />\n        ),\n        [CheckboxState.Mixed]: <IconMinus />,\n        [CheckboxState.Unchecked]: null,\n    };\n\n    const checkedOrMixed = isCheckedOrMixed(state);\n\n    const disabledClasses = merge([\n        'tw-bg-box-disabled tw-pointer-events-none tw-text-box-disabled-inverse tw-border-line-strong',\n        checkedOrMixed && 'tw-text-box-disabled-inverse tw-border-line-strong',\n    ]);\n\n    const enabledClasses = checkedOrMixed\n        ? emphasisCheckedClassesMap[emphasis]\n        : merge([\n              'tw-bg-base hover:tw-bg-box-neutral',\n              emphasis === CheckboxEmphasis.Strong\n                  ? 'tw-border-2 tw-border-box-selected-strong'\n                  : 'tw-border tw-border-line-xx-strong',\n          ]);\n\n    // eslint-disable-next-line @eslint-react/no-unnecessary-use-callback\n    const checkOverflowing = useCallback(() => {\n        if (labelContainer.current) {\n            setIsLabelOverflowing(labelContainer.current?.scrollWidth > labelContainer.current?.clientWidth);\n        }\n\n        if (helperTextContainer.current) {\n            setIsHelperTextOverflowing(\n                helperTextContainer.current?.scrollWidth > helperTextContainer.current?.clientWidth,\n            );\n        }\n    }, [labelContainer, helperTextContainer]);\n\n    useEffect(() => {\n        if ((!label && !helperText) || hideLabel) {\n            return;\n        }\n        // eslint-disable-next-line react-hooks/set-state-in-effect\n        checkOverflowing();\n\n        window.removeEventListener('resize', checkOverflowing);\n        window.addEventListener('resize', checkOverflowing);\n\n        return () => {\n            window.removeEventListener('resize', checkOverflowing);\n        };\n    }, [label, helperText, hideLabel, checkOverflowing]);\n\n    return (\n        <div className=\"tw-gap-1 tw-transition-colors tw-w-full\" data-test-id={dataTestId}>\n            <div className={merge(['tw-inline-flex tw-flex-row tw-rounded tw-w-full', showFocus ? FOCUS_STYLE : ''])}>\n                <InputLabel\n                    id={`${id}-label`}\n                    disabled={disabled}\n                    clickable\n                    htmlFor={id}\n                    tooltip={tooltip}\n                    required={required}\n                    bold={checkedOrMixed}\n                >\n                    <span className=\"tw-flex tw-items-center tw-whitespace-nowrap\">\n                        <span className=\"tw-inline-flex\">\n                            <input\n                                {...mergeProps(groupInputProps || inputProps, focusProps)}\n                                id={id}\n                                ref={inputRef}\n                                className=\"tw-sr-only\"\n                                data-test-id={`${dataTestId}-input`}\n                                role=\"checkbox\"\n                                aria-checked={state === CheckboxState.Checked}\n                                required={required}\n                                aria-label={ariaLabel}\n                                aria-labelledby={label ? `${id}-label` : undefined}\n                            />\n                            <span\n                                data-test-id={`${dataTestId}-icon-box`}\n                                aria-hidden=\"true\"\n                                className={merge([\n                                    'tw-leading-3 tw-relative tw-flex tw-items-center tw-justify-center tw-rounded tw-shrink-0 tw-flex-none',\n                                    sizeClassesMap[size],\n                                    disabled ? disabledClasses : enabledClasses,\n                                ])}\n                            >\n                                {stateMap[state]}\n                            </span>\n                        </span>\n                        {!hideLabel && (\n                            <span className=\"tw-inline-flex tw-flex-col tw-min-w-0 tw-ml-1.5\">\n                                {label && (\n                                    <span\n                                        ref={labelContainer}\n                                        data-test-id={`${dataTestId}-label`}\n                                        className={merge([\n                                            'tw-text-ellipsis tw-overflow-hidden',\n                                            'tw-text-xs tw-select-none hover:tw-cursor-pointer hover:tw-text-black dark:hover:tw-text-white group-hover:tw-text-black dark:group-hover:tw-text-white',\n                                            checkedOrMixed && 'tw-font-medium',\n                                        ])}\n                                        title={isLabelOverflowing ? label : undefined}\n                                    >\n                                        {label}\n                                    </span>\n                                )}\n                                {helperText && (\n                                    <span\n                                        ref={helperTextContainer}\n                                        data-test-id={`${dataTestId}-helper-text`}\n                                        className={merge([\n                                            'tw-text-ellipsis tw-overflow-hidden',\n                                            'tw-font-sans tw-text-xs tw-font-normal',\n                                            disabled ? 'text-disabled' : 'tw-text-text-weak',\n                                        ])}\n                                        title={isHelperTextOverflowing ? helperText : undefined}\n                                    >\n                                        {helperText}\n                                    </span>\n                                )}\n                            </span>\n                        )}\n                    </span>\n                </InputLabel>\n            </div>\n        </div>\n    );\n};\n\n/**\n * @deprecated Use `Checkbox` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#checkbox the migration guide}.\n */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(CheckboxComponent);\nCheckbox.displayName = 'FondueCheckbox';\n"],"names":["CheckboxState","CheckboxEmphasis","CheckboxSize","isCheckedOrMixed","checked","emphasisDefaultClasses","emphasisCheckedClassesMap","sizeClassesMap","CheckboxComponent","propId","emphasis","size","disabled","required","label","hideLabel","tooltip","helperText","ariaLabel","value","groupInputProps","onChange","state","dataTestId","ref","id","useMemoizedId","inputRef","useForwardedRef","focusProps","useFocusRing","toggleState","useToggleState","showFocus","setShowFocus","useState","labelContainer","useRef","helperTextContainer","isLabelOverflowing","setIsLabelOverflowing","isHelperTextOverflowing","setIsHelperTextOverflowing","tabFocusListener","event","blurListener","useEffect","_a","_b","inputProps","useCheckbox","stateMap","jsx","IconCheckMark","IconSize","IconMinus","checkedOrMixed","disabledClasses","merge","enabledClasses","checkOverflowing","useCallback","_c","_d","FOCUS_STYLE","InputLabel","jsxs","mergeProps","Checkbox","forwardRef"],"mappings":";;;;;;;;;;;;;;AA6BO,IAAKA,uBAAAA,OACRA,EAAA,UAAU,WACVA,EAAA,YAAY,aACZA,EAAA,QAAQ,SAHAA,IAAAA,MAAA,CAAA,CAAA,GASAC,uBAAAA,OACRA,EAAA,UAAU,WACVA,EAAA,OAAO,QACPA,EAAA,SAAS,UAHDA,IAAAA,MAAA,CAAA,CAAA,GASAC,uBAAAA,OACRA,EAAA,UAAU,WACVA,EAAA,QAAQ,SACRA,EAAA,SAAS,UAHDA,IAAAA,MAAA,CAAA,CAAA;AA2BZ,MAAMC,KAAmB,CAACC,MACfA,MAAY,aAAyBA,MAAY,SAGtDC,IACF,uGAEEC,KAA8D;AAAA,EAC/D,MACG;AAAA,EACH,SAA2BD;AAAA,EAC3B,QAA0BA;AAC/B,GAEME,KAA+C;AAAA,EAChD,SAAuB;AAAA,EACvB,OAAqB;AAAA,EACrB,QAAsB;AAC3B,GAEMC,KAA+E,CACjF;AAAA,EACI,IAAIC;AAAA,EACJ,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,YAAAC;AAAA,EACA,cAAcC;AAAA,EACd,OAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,gBAAgBC,IAAa;AACjC,GACAC,MACC;AACD,QAAMC,IAAKC,GAAcjB,CAAM,GACzBkB,IAAWC,GAAyCJ,CAAG,GACvD,EAAE,YAAAK,EAAA,IAAeC,EAAA,GACjBC,IAAcC,EAAe;AAAA,IAC/B,UAAUpB,IAAW,SAAYS;AAAA,IACjC,YAAYC,MAAU;AAAA;AAAA,EAAA,CACzB,GACK,CAACW,GAAWC,CAAY,IAAIC,EAAA,GAC5BC,IAAiBC,EAAwB,IAAI,GAC7CC,IAAsBD,EAAwB,IAAI,GAClD,CAACE,GAAoBC,CAAqB,IAAIL,EAAS,EAAK,GAC5D,CAACM,GAAyBC,CAA0B,IAAIP,EAAS,EAAK,GAEtEQ,IAAmB,CAACC,MAAyB;AAC/C,IAAIA,EAAM,QAAQ,SACdV,EAAa,EAAI;AAAA,EAEzB,GAEMW,IAAe,MAAM;AACvB,IAAAX,EAAa,EAAK;AAAA,EACtB;AAEA,EAAAY,EAAU,MAAM;;AACZ,YAAAC,IAAApB,KAAA,gBAAAA,EAAU,YAAV,QAAAoB,EAAmB,iBAAiB,SAASJ,KAC7CK,IAAArB,KAAA,gBAAAA,EAAU,YAAV,QAAAqB,EAAmB,iBAAiB,QAAQH,IAErC,MAAM;;AACT,OAAAE,IAAApB,KAAA,gBAAAA,EAAU,YAAV,QAAAoB,EAAmB,oBAAoB,SAASJ,KAChDK,IAAArB,KAAA,gBAAAA,EAAU,YAAV,QAAAqB,EAAmB,oBAAoB,QAAQH;AAAA,IACnD;AAAA,EACJ,GAAG,CAAA,CAAE;AAEL,QAAM,EAAE,YAAAI,MAAeC;AAAA,IACnB;AAAA,MACI,YAAYtC;AAAA,MACZ,YAAYC;AAAA,MACZ,iBAAiBS,MAAU;AAAA,MAC3B,cAAcJ;AAAA,MACd,OAAAC;AAAA,IAAA;AAAA,IAEJY;AAAA,IACAJ;AAAA,EAAA,GAGEwB,IAA6C;AAAA,IAC9C,SACG,gBAAAC,EAACC,IAAA,EAAc,MAAM1C,MAAS,WAAsB2C,EAAS,SAASA,EAAS,OAAA,CAAQ;AAAA,IAE1F,OAAsB,gBAAAF,EAACG,IAAA,EAAU;AAAA,IACjC,WAA0B;AAAA,EAAA,GAGzBC,IAAiBrD,GAAiBmB,CAAK,GAEvCmC,IAAkBC,EAAM;AAAA,IAC1B;AAAA,IACAF,KAAkB;AAAA,EAAA,CACrB,GAEKG,IAAiBH,IACjBlD,GAA0BI,CAAQ,IAClCgD,EAAM;AAAA,IACF;AAAA,IACAhD,MAAa,WACP,8CACA;AAAA,EAAA,CACT,GAGDkD,IAAmBC,EAAY,MAAM;;AACvC,IAAIzB,EAAe,WACfI,IAAsBO,IAAAX,EAAe,YAAf,gBAAAW,EAAwB,iBAAcC,IAAAZ,EAAe,YAAf,gBAAAY,EAAwB,YAAW,GAG/FV,EAAoB,WACpBI;AAAA,QACIoB,IAAAxB,EAAoB,YAApB,gBAAAwB,EAA6B,iBAAcC,IAAAzB,EAAoB,YAApB,gBAAAyB,EAA6B;AAAA,IAAA;AAAA,EAGpF,GAAG,CAAC3B,GAAgBE,CAAmB,CAAC;AAExC,SAAAQ,EAAU,MAAM;AACZ,QAAK,GAAChC,KAAS,CAACG,KAAeF;AAI/B,aAAA6C,EAAA,GAEA,OAAO,oBAAoB,UAAUA,CAAgB,GACrD,OAAO,iBAAiB,UAAUA,CAAgB,GAE3C,MAAM;AACT,eAAO,oBAAoB,UAAUA,CAAgB;AAAA,MACzD;AAAA,EACJ,GAAG,CAAC9C,GAAOG,GAAYF,GAAW6C,CAAgB,CAAC,qBAG9C,OAAA,EAAI,WAAU,2CAA0C,gBAAcrC,GACnE,UAAA,gBAAA6B,EAAC,OAAA,EAAI,WAAWM,EAAM,CAAC,mDAAmDzB,IAAY+B,KAAc,EAAE,CAAC,GACnG,UAAA,gBAAAZ;AAAA,IAACa;AAAA,IAAA;AAAA,MACG,IAAI,GAAGxC,CAAE;AAAA,MACT,UAAAb;AAAA,MACA,WAAS;AAAA,MACT,SAASa;AAAA,MACT,SAAAT;AAAA,MACA,UAAAH;AAAA,MACA,MAAM2C;AAAA,MAEN,UAAA,gBAAAU,EAAC,QAAA,EAAK,WAAU,gDACZ,UAAA;AAAA,QAAA,gBAAAA,EAAC,QAAA,EAAK,WAAU,kBACZ,UAAA;AAAA,UAAA,gBAAAd;AAAA,YAAC;AAAA,YAAA;AAAA,cACI,GAAGe,EAAW/C,KAAmB6B,GAAYpB,CAAU;AAAA,cACxD,IAAAJ;AAAA,cACA,KAAKE;AAAA,cACL,WAAU;AAAA,cACV,gBAAc,GAAGJ,CAAU;AAAA,cAC3B,MAAK;AAAA,cACL,gBAAcD,MAAU;AAAA,cACxB,UAAAT;AAAA,cACA,cAAYK;AAAA,cACZ,mBAAiBJ,IAAQ,GAAGW,CAAE,WAAW;AAAA,YAAA;AAAA,UAAA;AAAA,UAE7C,gBAAA2B;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,gBAAc,GAAG7B,CAAU;AAAA,cAC3B,eAAY;AAAA,cACZ,WAAWmC,EAAM;AAAA,gBACb;AAAA,gBACAnD,GAAeI,CAAI;AAAA,gBACnBC,IAAW6C,IAAkBE;AAAA,cAAA,CAChC;AAAA,cAEA,YAASrC,CAAK;AAAA,YAAA;AAAA,UAAA;AAAA,QACnB,GACJ;AAAA,QACC,CAACP,KACE,gBAAAmD,EAAC,QAAA,EAAK,WAAU,mDACX,UAAA;AAAA,UAAApD,KACG,gBAAAsC;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,KAAKhB;AAAA,cACL,gBAAc,GAAGb,CAAU;AAAA,cAC3B,WAAWmC,EAAM;AAAA,gBACb;AAAA,gBACA;AAAA,gBACAF,KAAkB;AAAA,cAAA,CACrB;AAAA,cACD,OAAOjB,IAAqBzB,IAAQ;AAAA,cAEnC,UAAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAGRG,KACG,gBAAAmC;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,KAAKd;AAAA,cACL,gBAAc,GAAGf,CAAU;AAAA,cAC3B,WAAWmC,EAAM;AAAA,gBACb;AAAA,gBACA;AAAA,gBACA9C,IAAW,kBAAkB;AAAA,cAAA,CAChC;AAAA,cACD,OAAO6B,IAA0BxB,IAAa;AAAA,cAE7C,UAAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACL,EAAA,CAER;AAAA,MAAA,EAAA,CAER;AAAA,IAAA;AAAA,EAAA,GAER,EAAA,CACJ;AAER,GAKamD,KAAWC,EAA4C7D,EAAiB;AACrF4D,GAAS,cAAc;"}
+{"version":3,"file":"Checkbox.es.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconMinus } from '@frontify/fondue-icons';\nimport { useCheckbox } from '@react-aria/checkbox';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { useToggleState } from '@react-stately/toggle';\nimport {\n    forwardRef,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n    type ForwardRefRenderFunction,\n    type HTMLAttributes,\n    type ReactNode,\n} from 'react';\n\nimport { InputLabel, type InputLabelTooltipProps } from '@components/InputLabel/InputLabel';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { useForwardedRef } from '@utilities/useForwardedRef';\n\n/**\n * @deprecated Use `Checkbox` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#checkbox the migration guide}.\n */\nexport enum CheckboxState {\n    Checked = 'Checked',\n    Unchecked = 'Unchecked',\n    Mixed = 'Mixed',\n}\n\n/**\n * @deprecated Use `Checkbox` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#checkbox the migration guide}.\n */\nexport enum CheckboxEmphasis {\n    Default = 'Default',\n    Weak = 'Weak',\n    Strong = 'Strong',\n}\n\n/**\n * @deprecated Use `Checkbox` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#checkbox the migration guide}.\n */\nexport enum CheckboxSize {\n    Default = 'Default',\n    Large = 'Large',\n    XLarge = 'XLarge',\n}\n\n/**\n * @deprecated Use `Checkbox` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#checkbox the migration guide}.\n */\nexport type CheckboxProps = {\n    id?: string;\n    state?: CheckboxState;\n    emphasis?: CheckboxEmphasis;\n    size?: CheckboxSize;\n    disabled?: boolean;\n    required?: boolean;\n    value?: string;\n    onChange?: (isChecked: boolean) => void;\n    label?: string;\n    hideLabel?: boolean;\n    tooltip?: InputLabelTooltipProps;\n    helperText?: string;\n    'aria-label'?: string;\n    groupInputProps?: HTMLAttributes<HTMLElement>;\n    'data-test-id'?: string;\n};\n\nconst isCheckedOrMixed = (checked: CheckboxState): boolean => {\n    return checked === CheckboxState.Checked || checked === CheckboxState.Mixed;\n};\n\nconst emphasisDefaultClasses =\n    'tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover';\n\nconst emphasisCheckedClassesMap: Record<CheckboxEmphasis, string> = {\n    [CheckboxEmphasis.Weak]:\n        'tw-bg-box-neutral-strong tw-text-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-hover',\n    [CheckboxEmphasis.Default]: emphasisDefaultClasses,\n    [CheckboxEmphasis.Strong]: emphasisDefaultClasses,\n};\n\nconst sizeClassesMap: Record<CheckboxSize, string> = {\n    [CheckboxSize.Default]: 'tw-h-4 tw-w-4',\n    [CheckboxSize.Large]: 'tw-h-5 tw-w-5',\n    [CheckboxSize.XLarge]: 'tw-h-8 tw-w-8',\n};\n\nconst CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, CheckboxProps> = (\n    {\n        id: propId,\n        emphasis = CheckboxEmphasis.Default,\n        size = CheckboxSize.Default,\n        disabled,\n        required,\n        label,\n        hideLabel,\n        tooltip,\n        helperText,\n        'aria-label': ariaLabel,\n        value,\n        groupInputProps,\n        onChange,\n        state = CheckboxState.Unchecked,\n        'data-test-id': dataTestId = 'checkbox',\n    },\n    ref,\n) => {\n    const id = useMemoizedId(propId);\n    const inputRef = useForwardedRef<HTMLInputElement | null>(ref);\n    const { focusProps } = useFocusRing();\n    const toggleState = useToggleState({\n        onChange: disabled ? undefined : onChange,\n        isSelected: state === CheckboxState.Checked,\n    });\n    const [showFocus, setShowFocus] = useState<Nullable<boolean>>();\n    const labelContainer = useRef<HTMLSpanElement>(null);\n    const helperTextContainer = useRef<HTMLSpanElement>(null);\n    const [isLabelOverflowing, setIsLabelOverflowing] = useState(false);\n    const [isHelperTextOverflowing, setIsHelperTextOverflowing] = useState(false);\n\n    const tabFocusListener = (event: KeyboardEvent) => {\n        if (event.key === 'Tab') {\n            setShowFocus(true);\n        }\n    };\n\n    const blurListener = () => {\n        setShowFocus(false);\n    };\n\n    useEffect(() => {\n        inputRef?.current?.addEventListener('keyup', tabFocusListener);\n        inputRef?.current?.addEventListener('blur', blurListener);\n\n        return () => {\n            inputRef?.current?.removeEventListener('keyup', tabFocusListener);\n            inputRef?.current?.removeEventListener('blur', blurListener);\n        };\n    }, []);\n\n    const { inputProps } = useCheckbox(\n        {\n            isDisabled: disabled,\n            isRequired: required,\n            isIndeterminate: state === CheckboxState.Mixed,\n            'aria-label': ariaLabel,\n            value,\n        },\n        toggleState,\n        inputRef,\n    );\n\n    const stateMap: Record<CheckboxState, ReactNode> = {\n        [CheckboxState.Checked]: <IconCheckMark size={size === CheckboxSize.XLarge ? 24 : 16} />,\n        [CheckboxState.Mixed]: <IconMinus />,\n        [CheckboxState.Unchecked]: null,\n    };\n\n    const checkedOrMixed = isCheckedOrMixed(state);\n\n    const disabledClasses = merge([\n        'tw-bg-box-disabled tw-pointer-events-none tw-text-box-disabled-inverse tw-border-line-strong',\n        checkedOrMixed && 'tw-text-box-disabled-inverse tw-border-line-strong',\n    ]);\n\n    const enabledClasses = checkedOrMixed\n        ? emphasisCheckedClassesMap[emphasis]\n        : merge([\n              'tw-bg-base hover:tw-bg-box-neutral',\n              emphasis === CheckboxEmphasis.Strong\n                  ? 'tw-border-2 tw-border-box-selected-strong'\n                  : 'tw-border tw-border-line-xx-strong',\n          ]);\n\n    // eslint-disable-next-line @eslint-react/no-unnecessary-use-callback\n    const checkOverflowing = useCallback(() => {\n        if (labelContainer.current) {\n            setIsLabelOverflowing(labelContainer.current?.scrollWidth > labelContainer.current?.clientWidth);\n        }\n\n        if (helperTextContainer.current) {\n            setIsHelperTextOverflowing(\n                helperTextContainer.current?.scrollWidth > helperTextContainer.current?.clientWidth,\n            );\n        }\n    }, [labelContainer, helperTextContainer]);\n\n    useEffect(() => {\n        if ((!label && !helperText) || hideLabel) {\n            return;\n        }\n        // eslint-disable-next-line react-hooks/set-state-in-effect\n        checkOverflowing();\n\n        window.removeEventListener('resize', checkOverflowing);\n        window.addEventListener('resize', checkOverflowing);\n\n        return () => {\n            window.removeEventListener('resize', checkOverflowing);\n        };\n    }, [label, helperText, hideLabel, checkOverflowing]);\n\n    return (\n        <div className=\"tw-gap-1 tw-transition-colors tw-w-full\" data-test-id={dataTestId}>\n            <div className={merge(['tw-inline-flex tw-flex-row tw-rounded tw-w-full', showFocus ? FOCUS_STYLE : ''])}>\n                <InputLabel\n                    id={`${id}-label`}\n                    disabled={disabled}\n                    clickable\n                    htmlFor={id}\n                    tooltip={tooltip}\n                    required={required}\n                    bold={checkedOrMixed}\n                >\n                    <span className=\"tw-flex tw-items-center tw-whitespace-nowrap\">\n                        <span className=\"tw-inline-flex\">\n                            <input\n                                {...mergeProps(groupInputProps || inputProps, focusProps)}\n                                id={id}\n                                ref={inputRef}\n                                className=\"tw-sr-only\"\n                                data-test-id={`${dataTestId}-input`}\n                                role=\"checkbox\"\n                                aria-checked={state === CheckboxState.Checked}\n                                required={required}\n                                aria-label={ariaLabel}\n                                aria-labelledby={label ? `${id}-label` : undefined}\n                            />\n                            <span\n                                data-test-id={`${dataTestId}-icon-box`}\n                                aria-hidden=\"true\"\n                                className={merge([\n                                    'tw-leading-3 tw-relative tw-flex tw-items-center tw-justify-center tw-rounded tw-shrink-0 tw-flex-none',\n                                    sizeClassesMap[size],\n                                    disabled ? disabledClasses : enabledClasses,\n                                ])}\n                            >\n                                {stateMap[state]}\n                            </span>\n                        </span>\n                        {!hideLabel && (\n                            <span className=\"tw-inline-flex tw-flex-col tw-min-w-0 tw-ml-1.5\">\n                                {label && (\n                                    <span\n                                        ref={labelContainer}\n                                        data-test-id={`${dataTestId}-label`}\n                                        className={merge([\n                                            'tw-text-ellipsis tw-overflow-hidden',\n                                            'tw-text-xs tw-select-none hover:tw-cursor-pointer hover:tw-text-black dark:hover:tw-text-white group-hover:tw-text-black dark:group-hover:tw-text-white',\n                                            checkedOrMixed && 'tw-font-medium',\n                                        ])}\n                                        title={isLabelOverflowing ? label : undefined}\n                                    >\n                                        {label}\n                                    </span>\n                                )}\n                                {helperText && (\n                                    <span\n                                        ref={helperTextContainer}\n                                        data-test-id={`${dataTestId}-helper-text`}\n                                        className={merge([\n                                            'tw-text-ellipsis tw-overflow-hidden',\n                                            'tw-font-sans tw-text-xs tw-font-normal',\n                                            disabled ? 'text-disabled' : 'tw-text-text-weak',\n                                        ])}\n                                        title={isHelperTextOverflowing ? helperText : undefined}\n                                    >\n                                        {helperText}\n                                    </span>\n                                )}\n                            </span>\n                        )}\n                    </span>\n                </InputLabel>\n            </div>\n        </div>\n    );\n};\n\n/**\n * @deprecated Use `Checkbox` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#checkbox the migration guide}.\n */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(CheckboxComponent);\nCheckbox.displayName = 'FondueCheckbox';\n"],"names":["CheckboxState","CheckboxEmphasis","CheckboxSize","isCheckedOrMixed","checked","emphasisDefaultClasses","emphasisCheckedClassesMap","sizeClassesMap","CheckboxComponent","propId","emphasis","size","disabled","required","label","hideLabel","tooltip","helperText","ariaLabel","value","groupInputProps","onChange","state","dataTestId","ref","id","useMemoizedId","inputRef","useForwardedRef","focusProps","useFocusRing","toggleState","useToggleState","showFocus","setShowFocus","useState","labelContainer","useRef","helperTextContainer","isLabelOverflowing","setIsLabelOverflowing","isHelperTextOverflowing","setIsHelperTextOverflowing","tabFocusListener","event","blurListener","useEffect","_a","_b","inputProps","useCheckbox","stateMap","jsx","IconCheckMark","IconMinus","checkedOrMixed","disabledClasses","merge","enabledClasses","checkOverflowing","useCallback","_c","_d","FOCUS_STYLE","InputLabel","jsxs","mergeProps","Checkbox","forwardRef"],"mappings":"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"}

package/dist/components/CollapsibleWrap/CollapsibleWrap.es.js

@@ -1,6 +1,6 @@
 import { jsx as i } from "react/jsx-runtime";
-import { AnimatePresence as n } from "../../node_modules/.pnpm/framer-motion@12.23.27_@emotion_is-prop-valid@0.8.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/components/AnimatePresence/index.es.js";
-import { motion as p } from "../../node_modules/.pnpm/framer-motion@12.23.27_@emotion_is-prop-valid@0.8.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/render/components/motion/proxy.es.js";
+import { AnimatePresence as n } from "../../node_modules/.pnpm/framer-motion@12.28.1_@emotion_is-prop-valid@0.8.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/components/AnimatePresence/index.es.js";
+import { motion as p } from "../../node_modules/.pnpm/framer-motion@12.28.1_@emotion_is-prop-valid@0.8.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/render/components/motion/proxy.es.js";
 const s = ({
   children: e,
   isOpen: o = !1,

package/dist/components/DatePicker/DatePicker.es.js

@@ -1,173 +1,169 @@
-import { jsx as t, jsxs as u } from "react/jsx-runtime";
+import { jsx as t, jsxs as f } from "react/jsx-runtime";
 /* empty css              */
-import { shift as J, offset as Q } from "@floating-ui/dom";
-import { format as U, getYear as X } from "date-fns";
-import { forwardRef as Z, useRef as _, useState as $ } from "react";
-import h from "react-datepicker";
-import { createPortal as ee } from "react-dom";
+import { shift as G, offset as J } from "@floating-ui/dom";
+import { IconCaretLeftDouble as Q, IconCaretLeft as U, IconCaretRight as X, IconCaretRightDouble as Z } from "@frontify/fondue-icons";
+import { format as _, getYear as $ } from "date-fns";
+import { forwardRef as ee, useRef as te, useState as ae } from "react";
+import C from "react-datepicker";
+import { createPortal as re } from "react-dom";
 import { Button as o } from "../Button/Button.es.js";
-import { ButtonEmphasis as i, ButtonSize as s, ButtonStyle as l } from "../Button/ButtonTypes.es.js";
-import te from "../../foundation/Icon/Generated/IconCaretLeft.es.js";
-import ae from "../../foundation/Icon/Generated/IconCaretLeftDouble.es.js";
-import re from "../../foundation/Icon/Generated/IconCaretRight.es.js";
-import oe from "../../foundation/Icon/Generated/IconCaretRightDouble.es.js";
-import { IconSize as n } from "../../foundation/Icon/IconSize.es.js";
-import { merge as ie } from "../../utilities/merge.es.js";
+import { ButtonEmphasis as s, ButtonSize as i, ButtonStyle as l } from "../Button/ButtonTypes.es.js";
+import { merge as oe } from "../../utilities/merge.es.js";
 import { Validation as se } from "../../utilities/validation.es.js";
-import { DatePickerTrigger as le } from "./DatePickerTrigger.es.js";
-const ne = h.default ?? h, ce = (c, a) => c === "single" ? a < /* @__PURE__ */ new Date() ? "past-date" : "future-date" : "range-day", de = Z(
+import { DatePickerTrigger as ie } from "./DatePickerTrigger.es.js";
+const le = C.default ?? C, ne = (n, a) => n === "single" ? a < /* @__PURE__ */ new Date() ? "past-date" : "future-date" : "range-day", ce = ee(
   ({
-    placeHolder: c = "Select a date",
+    placeHolder: n = "Select a date",
     isClearable: a,
-    shouldCloseOnSelect: g,
-    onChange: w,
-    onOpen: d,
-    onClose: m,
-    onBlur: z,
+    shouldCloseOnSelect: h,
+    onChange: u,
+    onOpen: c,
+    onClose: d,
+    onBlur: g,
     onKeyDown: M,
-    dateFormat: S = "MMM dd, yyyy",
-    value: x,
+    dateFormat: x = "MMM dd, yyyy",
+    value: z,
     startDate: N,
     endDate: P,
     minDate: R,
     maxDate: b,
     validation: I = se.Default,
-    customTrigger: v,
-    customHeader: B,
-    children: j,
-    fixedHeight: W = !0,
-    hasPopperArrow: q = !0,
-    preventOpenOnFocus: F = !1,
-    inline: k = !1,
-    filterDate: H = () => !0,
-    variant: y = "single",
+    customTrigger: S,
+    customHeader: v,
+    children: B,
+    fixedHeight: j = !0,
+    hasPopperArrow: W = !0,
+    preventOpenOnFocus: q = !1,
+    inline: w = !1,
+    filterDate: F = () => !0,
+    variant: k = "single",
     hugWidth: p = !0,
-    "data-test-id": L = "date-picker",
-    triggerAriaLabel: A = "Open or close the date picker"
-  }, E) => {
-    const D = _(null), [f, C] = $(!1), K = () => {
-      C(!0), d == null || d(), queueMicrotask(O);
-    }, O = () => {
+    "data-test-id": H = "date-picker",
+    triggerAriaLabel: L = "Open or close the date picker"
+  }, A) => {
+    const y = te(null), [m, D] = ae(!1), E = () => {
+      D(!0), c == null || c(), queueMicrotask(K);
+    }, K = () => {
       var e, r;
-      (r = (e = D.current) == null ? void 0 : e.querySelector("button")) == null || r.focus();
-    }, T = () => {
-      C(!1), m == null || m();
+      (r = (e = y.current) == null ? void 0 : e.querySelector("button")) == null || r.focus();
+    }, O = () => {
+      D(!1), d == null || d();
     };
-    return /* @__PURE__ */ t("div", { "data-test-id": L, className: p ? "tw-w-auto" : "tw-w-full", children: /* @__PURE__ */ t(
-      ne,
+    return /* @__PURE__ */ t("div", { "data-test-id": H, className: p ? "tw-w-auto" : "tw-w-full", children: /* @__PURE__ */ t(
+      le,
       {
         wrapperClassName: p ? "tw-w-auto" : "tw-w-full",
-        calendarClassName: ie([
+        calendarClassName: oe([
           "react-datepicker-wrap tw-pointer-events-auto",
-          k && "react-datepicker-inline"
+          w && "react-datepicker-inline"
         ]),
-        inline: k,
-        selected: x,
+        inline: w,
+        selected: z,
         startDate: N,
         endDate: P,
         minDate: R,
         maxDate: b,
         calendarStartDay: 1,
-        onChange: w,
-        onKeyDown: f ? void 0 : M,
-        onBlur: z,
-        selectsRange: y === "range",
-        showPopperArrow: q,
-        preventOpenOnFocus: F,
-        filterDate: H,
-        fixedHeight: W,
-        customInput: v ?? /* @__PURE__ */ t(
-          le,
+        onChange: u,
+        onKeyDown: m ? void 0 : M,
+        onBlur: g,
+        selectsRange: k === "range",
+        showPopperArrow: W,
+        preventOpenOnFocus: q,
+        filterDate: F,
+        fixedHeight: j,
+        customInput: S ?? /* @__PURE__ */ t(
+          ie,
           {
-            isCalendarOpen: f,
+            isCalendarOpen: m,
             isClearable: a,
-            placeHolder: c,
+            placeHolder: n,
             validation: I,
-            onDateChanged: w,
+            onDateChanged: u,
             hugWidth: p,
             "aria-haspopup": "dialog",
-            "aria-expanded": f,
-            "aria-label": A
+            "aria-expanded": m,
+            "aria-label": L
           }
         ),
-        ref: E,
+        ref: A,
         formatWeekDay: (e) => e.slice(0, 1),
         isClearable: a,
-        dateFormat: S,
-        onCalendarClose: T,
-        onCalendarOpen: K,
-        shouldCloseOnSelect: g,
-        dayClassName: (e) => ce(y, e),
+        dateFormat: x,
+        onCalendarClose: O,
+        onCalendarOpen: E,
+        shouldCloseOnSelect: h,
+        dayClassName: (e) => ne(k, e),
         popperProps: {
           strategy: "fixed"
         },
-        popperContainer: ({ children: e }) => ee(e, document.body),
-        popperModifiers: [J({ padding: 8 }), Q(8)],
-        renderCustomHeader: ({ date: e, decreaseMonth: r, increaseMonth: V, increaseYear: Y, decreaseYear: G }) => /* @__PURE__ */ u(
+        popperContainer: ({ children: e }) => re(e, document.body),
+        popperModifiers: [G({ padding: 8 }), J(8)],
+        renderCustomHeader: ({ date: e, decreaseMonth: r, increaseMonth: T, increaseYear: V, decreaseYear: Y }) => /* @__PURE__ */ f(
           "div",
           {
             className: "tw-flex tw-flex-col tw-gap-3",
-            ref: D,
+            ref: y,
             "data-test-id": "date-picker-header",
             children: [
-              B,
-              /* @__PURE__ */ u("div", { className: "tw-flex tw-justify-between tw-pb-4 tw-px-0", children: [
+              v,
+              /* @__PURE__ */ f("div", { className: "tw-flex tw-justify-between tw-pb-4 tw-px-0", children: [
                 /* @__PURE__ */ t(
                   o,
                   {
                     style: l.Default,
-                    size: s.Medium,
-                    onClick: G,
-                    emphasis: i.Weak,
-                    icon: /* @__PURE__ */ t(ae, { size: n.Size20 })
+                    size: i.Medium,
+                    onClick: Y,
+                    emphasis: s.Weak,
+                    icon: /* @__PURE__ */ t(Q, { size: 20 })
                   }
                 ),
                 /* @__PURE__ */ t(
                   o,
                   {
                     style: l.Default,
-                    size: s.Medium,
+                    size: i.Medium,
                     onClick: r,
-                    emphasis: i.Weak,
-                    icon: /* @__PURE__ */ t(te, { size: n.Size20 })
+                    emphasis: s.Weak,
+                    icon: /* @__PURE__ */ t(U, { size: 20 })
                   }
                 ),
-                /* @__PURE__ */ u("p", { className: "tw-font-sans tw-font-semibold tw-grow tw-self-center", children: [
-                  U(e, "MMMM"),
+                /* @__PURE__ */ f("p", { className: "tw-font-sans tw-font-semibold tw-grow tw-self-center", children: [
+                  _(e, "MMMM"),
                   " ",
-                  X(e)
+                  $(e)
                 ] }),
                 /* @__PURE__ */ t(
                   o,
                   {
                     style: l.Default,
-                    size: s.Medium,
-                    onClick: V,
-                    emphasis: i.Weak,
-                    icon: /* @__PURE__ */ t(re, { size: n.Size20 })
+                    size: i.Medium,
+                    onClick: T,
+                    emphasis: s.Weak,
+                    icon: /* @__PURE__ */ t(X, { size: 20 })
                   }
                 ),
                 /* @__PURE__ */ t(
                   o,
                   {
                     style: l.Default,
-                    size: s.Medium,
-                    onClick: Y,
-                    emphasis: i.Weak,
-                    icon: /* @__PURE__ */ t(oe, { size: n.Size20 })
+                    size: i.Medium,
+                    onClick: V,
+                    emphasis: s.Weak,
+                    icon: /* @__PURE__ */ t(Z, { size: 20 })
                   }
                 )
               ] })
             ]
           }
         ),
-        children: j
+        children: B
       }
     ) });
   }
 );
-de.displayName = "FondueDatePicker";
+ce.displayName = "FondueDatePicker";
 export {
-  de as DatePicker
+  ce as DatePicker
 };
 //# sourceMappingURL=DatePicker.es.js.map