@frontify/fondue-components 19.3.0 → 19.4.0

package/dist/fondue-components41.js

@@ -1,7 +1,7 @@
 import { FOCUS_OUTLINE as t } from "./fondue-components84.js";
 import { sv as e } from "./fondue-components37.js";
 const s = e({
-  base: `tw-peer tw-relative tw-inline-flex tw-bg-base tw-text-white tw-shrink-0 tw-rounded tw-border tw-border-line-x-strong group-hover:tw-border-line-xx-strong hover:tw-border-line-xx-strong tw-transition-colors data-[state="checked"]:tw-border-transparent data-[state="indeterminate"]:tw-border-transparent disabled:tw-border-line-strong disabled:tw-bg-base disabled:tw-cursor-not-allowed data-[state="checked"]:disabled:tw-bg-box-disabled-strong ${t}`,
+  base: `tw-peer tw-relative tw-inline-flex tw-bg-base tw-text-white tw-shrink-0 tw-rounded tw-border tw-border-line-x-strong group-hover:tw-border-line-xx-strong hover:tw-border-line-xx-strong tw-transition-colors data-[state="checked"]:tw-border-transparent data-[state="indeterminate"]:tw-border-transparent disabled:tw-border-line-strong disabled:tw-bg-base disabled:tw-cursor-not-allowed data-[state="checked"]:disabled:tw-bg-box-disabled-strong data-[readonly="true"]:tw-pointer-events-none ${t}`,
   variants: {
     size: {
       default: "tw-size-4",

package/dist/fondue-components41.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components41.js","sources":["../src/components/Checkbox/styles/checkboxStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { FOCUS_OUTLINE } from '#/utilities/focusStyle';\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const checkboxStyles = sv({\n    base:\n        'tw-peer tw-relative tw-inline-flex tw-bg-base tw-text-white tw-shrink-0 tw-rounded tw-border tw-border-line-x-strong group-hover:tw-border-line-xx-strong hover:tw-border-line-xx-strong tw-transition-colors ' +\n        'data-[state=\"checked\"]:tw-border-transparent data-[state=\"indeterminate\"]:tw-border-transparent ' +\n        'disabled:tw-border-line-strong disabled:tw-bg-base disabled:tw-cursor-not-allowed data-[state=\"checked\"]:disabled:tw-bg-box-disabled-strong ' +\n        `${FOCUS_OUTLINE}`,\n    variants: {\n        size: {\n            default: 'tw-size-4',\n            large: 'tw-size-5',\n        },\n        emphasis: {\n            default:\n                'data-[state=\"checked\"]:tw-bg-box-selected-strong data-[state=\"checked\"]:hover:tw-bg-box-selected-strong-hover data-[state=\"checked\"]:active:tw-bg-box-selected-strong-pressed ' +\n                'data-[state=\"indeterminate\"]:tw-bg-box-selected-strong data-[state=\"indeterminate\"]:hover:tw-bg-box-selected-strong-hover data-[state=\"indeterminate\"]:active:tw-bg-box-selected-strong-pressed ',\n            weak:\n                'data-[state=\"checked\"]:tw-bg-box-neutral-strong data-[state=\"checked\"]:hover:tw-bg-box-neutral-strong-hover data-[state=\"checked\"]:active:tw-bg-box-neutral-strong-pressed ' +\n                'data-[state=\"indeterminate\"]:tw-bg-box-neutral-strong data-[state=\"indeterminate\"]:hover:tw-bg-box-neutral-strong-hover data-[state=\"indeterminate\"]:active:tw-bg-box-neutral-strong-pressed ',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n        emphasis: 'default',\n    },\n});\n\nexport const checkboxIndicatorStyles =\n    'tw-group tw-absolute tw-inset-0 tw-inline-flex tw-items-center tw-justify-center tw-text-current ' +\n    'tw-opacity-0 data-[state=\"checked\"]:tw-opacity-100 data-[state=\"indeterminate\"]:tw-opacity-100 tw-transition-opacity ';\n"],"names":["checkboxStyles","sv","FOCUS_OUTLINE","checkboxIndicatorStyles"],"mappings":";;AAKO,MAAMA,IAAiBC,EAAG;AAAA,EAC7B,MACI,6bAGGC,CAAa;AAAA,EACpB,UAAU;AAAA,IACN,MAAM;AAAA,MACF,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,IAEX,UAAU;AAAA,MACN,SACI;AAAA,MAEJ,MACI;AAAA,IAAA;AAAA,EAER;AAAA,EAEJ,iBAAiB;AAAA,IACb,MAAM;AAAA,IACN,UAAU;AAAA,EAAA;AAElB,CAAC,GAEYC,IACT;"}
+{"version":3,"file":"fondue-components41.js","sources":["../src/components/Checkbox/styles/checkboxStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { FOCUS_OUTLINE } from '#/utilities/focusStyle';\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const checkboxStyles = sv({\n    base:\n        'tw-peer tw-relative tw-inline-flex tw-bg-base tw-text-white tw-shrink-0 tw-rounded tw-border tw-border-line-x-strong group-hover:tw-border-line-xx-strong hover:tw-border-line-xx-strong tw-transition-colors ' +\n        'data-[state=\"checked\"]:tw-border-transparent data-[state=\"indeterminate\"]:tw-border-transparent ' +\n        'disabled:tw-border-line-strong disabled:tw-bg-base disabled:tw-cursor-not-allowed data-[state=\"checked\"]:disabled:tw-bg-box-disabled-strong ' +\n        'data-[readonly=\"true\"]:tw-pointer-events-none ' +\n        `${FOCUS_OUTLINE}`,\n    variants: {\n        size: {\n            default: 'tw-size-4',\n            large: 'tw-size-5',\n        },\n        emphasis: {\n            default:\n                'data-[state=\"checked\"]:tw-bg-box-selected-strong data-[state=\"checked\"]:hover:tw-bg-box-selected-strong-hover data-[state=\"checked\"]:active:tw-bg-box-selected-strong-pressed ' +\n                'data-[state=\"indeterminate\"]:tw-bg-box-selected-strong data-[state=\"indeterminate\"]:hover:tw-bg-box-selected-strong-hover data-[state=\"indeterminate\"]:active:tw-bg-box-selected-strong-pressed ',\n            weak:\n                'data-[state=\"checked\"]:tw-bg-box-neutral-strong data-[state=\"checked\"]:hover:tw-bg-box-neutral-strong-hover data-[state=\"checked\"]:active:tw-bg-box-neutral-strong-pressed ' +\n                'data-[state=\"indeterminate\"]:tw-bg-box-neutral-strong data-[state=\"indeterminate\"]:hover:tw-bg-box-neutral-strong-hover data-[state=\"indeterminate\"]:active:tw-bg-box-neutral-strong-pressed ',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n        emphasis: 'default',\n    },\n});\n\nexport const checkboxIndicatorStyles =\n    'tw-group tw-absolute tw-inset-0 tw-inline-flex tw-items-center tw-justify-center tw-text-current ' +\n    'tw-opacity-0 data-[state=\"checked\"]:tw-opacity-100 data-[state=\"indeterminate\"]:tw-opacity-100 tw-transition-opacity ';\n"],"names":["checkboxStyles","sv","FOCUS_OUTLINE","checkboxIndicatorStyles"],"mappings":";;AAKO,MAAMA,IAAiBC,EAAG;AAAA,EAC7B,MACI,2eAIGC,CAAa;AAAA,EACpB,UAAU;AAAA,IACN,MAAM;AAAA,MACF,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,IAEX,UAAU;AAAA,MACN,SACI;AAAA,MAEJ,MACI;AAAA,IAAA;AAAA,EAER;AAAA,EAEJ,iBAAiB;AAAA,IACb,MAAM;AAAA,IACN,UAAU;AAAA,EAAA;AAElB,CAAC,GAEYC,IACT;"}

package/dist/fondue-components43.js

@@ -1,7 +1,7 @@
 import { jsxs as s, jsx as e, Fragment as f } from "react/jsx-runtime";
 import { IconDroplet as h, IconCross as I, IconCaretDown as v } from "@frontify/fondue-icons";
 import { forwardRef as b } from "react";
-import t from "./fondue-components86.js";
+import t from "./fondue-components85.js";
 import { getColorWithName as k, colorToCss as y } from "./fondue-components46.js";
 const c = ({
   id: l,

package/dist/fondue-components66.js

@@ -4,7 +4,7 @@ import { Slot as C } from "@radix-ui/react-slot";
 import { isValidElement as V } from "react";
 import { useFondueTheme as g, ThemeProvider as A } from "./fondue-components30.js";
 import n from "./fondue-components68.js";
-import { recursiveMap as D, getSelectOptionValue as M } from "./fondue-components85.js";
+import { recursiveMap as D, getSelectOptionValue as M } from "./fondue-components86.js";
 const T = ({
   highlightedIndex: p,
   getMenuProps: l,

package/dist/fondue-components69.js

@@ -3,7 +3,7 @@ import { IconCross as w } from "@frontify/fondue-icons";
 import { useState as S, useMemo as b, Children as v, isValidElement as C, cloneElement as B, useCallback as I, useEffect as x } from "react";
 import { ForwardedRefSelectItem as L } from "./fondue-components65.js";
 import { ForwardedRefSelectSlot as y } from "./fondue-components67.js";
-import { getSelectOptionValue as F } from "./fondue-components85.js";
+import { getSelectOptionValue as F } from "./fondue-components86.js";
 const O = (n, s) => {
   const [e, r] = S(!1), [m, i] = S(null), [l, f] = S({
     menuComponents: [],

package/dist/fondue-components7.js

@@ -1,43 +1,50 @@
-import { jsx as e, jsxs as p } from "react/jsx-runtime";
-import { IconMinus as k, IconCheckMark as l } from "@frontify/fondue-icons";
-import * as i from "@radix-ui/react-checkbox";
-import { forwardRef as f } from "react";
-import { cn as h } from "./fondue-components37.js";
-import { checkboxIndicatorStyles as w, checkboxStyles as u } from "./fondue-components41.js";
-const x = ({
-  className: r,
-  value: d,
-  onChange: t,
-  defaultValue: s,
+import { jsx as i, jsxs as l } from "react/jsx-runtime";
+import { IconMinus as f, IconCheckMark as u } from "@frontify/fondue-icons";
+import * as r from "@radix-ui/react-checkbox";
+import { forwardRef as h } from "react";
+import { cn as w } from "./fondue-components37.js";
+import { checkboxIndicatorStyles as b, checkboxStyles as x } from "./fondue-components41.js";
+const p = ({
+  className: d,
+  value: s,
+  onChange: c,
+  defaultValue: n,
   "data-test-id": m = "fondue-checkbox",
   readOnly: a,
-  ...o
-}, n) => /* @__PURE__ */ e(
-  i.Root,
+  ...e
+}, k) => /* @__PURE__ */ i(
+  r.Root,
   {
-    ref: n,
-    checked: d,
-    defaultChecked: s,
-    className: h(u(o), r),
-    onClick: (c) => {
+    ref: k,
+    checked: s,
+    defaultChecked: n,
+    className: w(x(e), d),
+    onClick: (t) => {
       if (a)
-        return c.preventDefault(), !1;
-      t == null || t(c);
+        return t.preventDefault(), !1;
+      c == null || c(t);
+    },
+    onFocus: (t) => {
+      var o;
+      if (a)
+        return t.preventDefault(), t.target.blur(), !1;
+      (o = e.onFocus) == null || o.call(e, t);
     },
     "data-test-id": m,
+    "data-readonly": a,
     "aria-readonly": a,
-    ...o,
-    children: /* @__PURE__ */ p(i.Indicator, { className: w, children: [
-      /* @__PURE__ */ e(
-        k,
+    ...e,
+    children: /* @__PURE__ */ l(r.Indicator, { className: b, children: [
+      /* @__PURE__ */ i(
+        f,
         {
           size: 16,
           className: 'tw-hidden tw-opacity-0 group-data-[state="indeterminate"]:tw-block group-data-[state="indeterminate"]:tw-opacity-100 tw-transition-opacity',
           "data-test-id": "icon-indeterminate"
         }
       ),
-      /* @__PURE__ */ e(
-        l,
+      /* @__PURE__ */ i(
+        u,
         {
           size: 16,
           className: 'tw-hidden tw-opacity-0 group-data-[state="checked"]:tw-block group-data-[state="checked"]:tw-opacity-100 tw-transition-opacity',
@@ -46,10 +53,10 @@ const x = ({
       )
     ] })
   }
-), b = f(x);
-b.displayName = "Checkbox";
+), y = h(p);
+y.displayName = "Checkbox";
 export {
-  b as Checkbox,
-  x as CheckboxComponent
+  y as Checkbox,
+  p as CheckboxComponent
 };
 //# sourceMappingURL=fondue-components7.js.map

package/dist/fondue-components7.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components7.js","sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconMinus } from '@frontify/fondue-icons';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { forwardRef, type FormEvent, type ForwardedRef } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { checkboxIndicatorStyles, checkboxStyles } from './styles/checkboxStyles';\n\nexport type CheckboxProps = {\n    id?: string;\n    name?: string;\n    /**\n     * The default value of the checkbox\n     * Used for uncontrolled components\n     * @default false\n     */\n    defaultValue?: boolean | 'indeterminate';\n    /**\n     * The controlled value of the checkbox\n     * @default false\n     */\n    value?: boolean | 'indeterminate';\n    /**\n     * The size of the checkbox\n     * @default \"default\"\n     */\n    size?: 'default' | 'large';\n    /**\n     * The emphasis of the checkbox\n     * @default \"default\"\n     */\n    emphasis?: 'default' | 'weak';\n    /**\n     * Disable the checkbox\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Make the checkbox required in form\n     * @default false\n     */\n    required?: boolean;\n    /**\n     * Make the checkbox read-only\n     * @default false\n     */\n    readOnly?: boolean;\n    className?: string;\n    /**\n     * Event handler called when the checkbox value changes\n     */\n    onChange?: (event: FormEvent<HTMLButtonElement>) => void;\n    /**\n     * Event handler called when the checkbox is blurred\n     */\n    onBlur?: (event: FormEvent<HTMLButtonElement>) => void;\n    /**\n     * Event handler called when the checkbox is focused\n     */\n    onFocus?: (event: FormEvent<HTMLButtonElement>) => void;\n    'data-test-id'?: string;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    'aria-describedby'?: string;\n};\n\nexport const CheckboxComponent = (\n    {\n        className,\n        value,\n        onChange,\n        defaultValue,\n        'data-test-id': dataTestId = 'fondue-checkbox',\n        readOnly,\n        ...props\n    }: CheckboxProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <CheckboxPrimitive.Root\n            ref={ref}\n            checked={value}\n            defaultChecked={defaultValue}\n            className={cn(checkboxStyles(props), className)}\n            onClick={(event) => {\n                if (readOnly) {\n                    event.preventDefault();\n                    return false;\n                }\n                onChange?.(event);\n            }}\n            data-test-id={dataTestId}\n            aria-readonly={readOnly}\n            {...props}\n        >\n            <CheckboxPrimitive.Indicator className={checkboxIndicatorStyles}>\n                <IconMinus\n                    size={16}\n                    className='tw-hidden tw-opacity-0 group-data-[state=\"indeterminate\"]:tw-block group-data-[state=\"indeterminate\"]:tw-opacity-100 tw-transition-opacity'\n                    data-test-id=\"icon-indeterminate\"\n                />\n\n                <IconCheckMark\n                    size={16}\n                    className='tw-hidden tw-opacity-0 group-data-[state=\"checked\"]:tw-block group-data-[state=\"checked\"]:tw-opacity-100 tw-transition-opacity'\n                    data-test-id=\"icon-checked\"\n                />\n            </CheckboxPrimitive.Indicator>\n        </CheckboxPrimitive.Root>\n    );\n};\n\nexport const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(CheckboxComponent);\nCheckbox.displayName = 'Checkbox';\n"],"names":["CheckboxComponent","className","value","onChange","defaultValue","dataTestId","readOnly","props","ref","jsx","CheckboxPrimitive","cn","checkboxStyles","event","jsxs","checkboxIndicatorStyles","IconMinus","IconCheckMark","Checkbox","forwardRef"],"mappings":";;;;;;AAoEO,MAAMA,IAAoB,CAC7B;AAAA,EACI,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAgBC,IAAa;AAAA,EAC7B,UAAAC;AAAA,EACA,GAAGC;AACP,GACAC,MAGI,gBAAAC;AAAA,EAACC,EAAkB;AAAA,EAAlB;AAAA,IACG,KAAAF;AAAA,IACA,SAASN;AAAA,IACT,gBAAgBE;AAAA,IAChB,WAAWO,EAAGC,EAAeL,CAAK,GAAGN,CAAS;AAAA,IAC9C,SAAS,CAACY,MAAU;AAChB,UAAIP;AACA,eAAAO,EAAM,eAAA,GACC;AAEX,MAAAV,KAAA,QAAAA,EAAWU;AAAA,IACf;AAAA,IACA,gBAAcR;AAAA,IACd,iBAAeC;AAAA,IACd,GAAGC;AAAA,IAEJ,UAAA,gBAAAO,EAACJ,EAAkB,WAAlB,EAA4B,WAAWK,GACpC,UAAA;AAAA,MAAA,gBAAAN;AAAA,QAACO;AAAA,QAAA;AAAA,UACG,MAAM;AAAA,UACN,WAAU;AAAA,UACV,gBAAa;AAAA,QAAA;AAAA,MAAA;AAAA,MAGjB,gBAAAP;AAAA,QAACQ;AAAA,QAAA;AAAA,UACG,MAAM;AAAA,UACN,WAAU;AAAA,UACV,gBAAa;AAAA,QAAA;AAAA,MAAA;AAAA,IACjB,EAAA,CACJ;AAAA,EAAA;AAAA,GAKCC,IAAWC,EAA6CnB,CAAiB;AACtFkB,EAAS,cAAc;"}
+{"version":3,"file":"fondue-components7.js","sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconMinus } from '@frontify/fondue-icons';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { forwardRef, type FormEvent, type ForwardedRef } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { checkboxIndicatorStyles, checkboxStyles } from './styles/checkboxStyles';\n\nexport type CheckboxProps = {\n    id?: string;\n    name?: string;\n    /**\n     * The default value of the checkbox\n     * Used for uncontrolled components\n     * @default false\n     */\n    defaultValue?: boolean | 'indeterminate';\n    /**\n     * The controlled value of the checkbox\n     * @default false\n     */\n    value?: boolean | 'indeterminate';\n    /**\n     * The size of the checkbox\n     * @default \"default\"\n     */\n    size?: 'default' | 'large';\n    /**\n     * The emphasis of the checkbox\n     * @default \"default\"\n     */\n    emphasis?: 'default' | 'weak';\n    /**\n     * Disable the checkbox\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Make the checkbox required in form\n     * @default false\n     */\n    required?: boolean;\n    /**\n     * Make the checkbox read-only\n     * @default false\n     */\n    readOnly?: boolean;\n    className?: string;\n    /**\n     * Event handler called when the checkbox value changes\n     */\n    onChange?: (event: FormEvent<HTMLButtonElement>) => void;\n    /**\n     * Event handler called when the checkbox is blurred\n     */\n    onBlur?: (event: FormEvent<HTMLButtonElement>) => void;\n    /**\n     * Event handler called when the checkbox is focused\n     */\n    onFocus?: (event: FormEvent<HTMLButtonElement>) => void;\n    'data-test-id'?: string;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    'aria-describedby'?: string;\n};\n\nexport const CheckboxComponent = (\n    {\n        className,\n        value,\n        onChange,\n        defaultValue,\n        'data-test-id': dataTestId = 'fondue-checkbox',\n        readOnly,\n        ...props\n    }: CheckboxProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <CheckboxPrimitive.Root\n            ref={ref}\n            checked={value}\n            defaultChecked={defaultValue}\n            className={cn(checkboxStyles(props), className)}\n            onClick={(event) => {\n                if (readOnly) {\n                    event.preventDefault();\n                    return false;\n                }\n                onChange?.(event);\n            }}\n            onFocus={(event) => {\n                if (readOnly) {\n                    event.preventDefault();\n                    event.target.blur();\n                    return false;\n                }\n                props.onFocus?.(event);\n            }}\n            data-test-id={dataTestId}\n            data-readonly={readOnly}\n            aria-readonly={readOnly}\n            {...props}\n        >\n            <CheckboxPrimitive.Indicator className={checkboxIndicatorStyles}>\n                <IconMinus\n                    size={16}\n                    className='tw-hidden tw-opacity-0 group-data-[state=\"indeterminate\"]:tw-block group-data-[state=\"indeterminate\"]:tw-opacity-100 tw-transition-opacity'\n                    data-test-id=\"icon-indeterminate\"\n                />\n\n                <IconCheckMark\n                    size={16}\n                    className='tw-hidden tw-opacity-0 group-data-[state=\"checked\"]:tw-block group-data-[state=\"checked\"]:tw-opacity-100 tw-transition-opacity'\n                    data-test-id=\"icon-checked\"\n                />\n            </CheckboxPrimitive.Indicator>\n        </CheckboxPrimitive.Root>\n    );\n};\n\nexport const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(CheckboxComponent);\nCheckbox.displayName = 'Checkbox';\n"],"names":["CheckboxComponent","className","value","onChange","defaultValue","dataTestId","readOnly","props","ref","jsx","CheckboxPrimitive","cn","checkboxStyles","event","_a","jsxs","checkboxIndicatorStyles","IconMinus","IconCheckMark","Checkbox","forwardRef"],"mappings":";;;;;;AAoEO,MAAMA,IAAoB,CAC7B;AAAA,EACI,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAgBC,IAAa;AAAA,EAC7B,UAAAC;AAAA,EACA,GAAGC;AACP,GACAC,MAGI,gBAAAC;AAAA,EAACC,EAAkB;AAAA,EAAlB;AAAA,IACG,KAAAF;AAAA,IACA,SAASN;AAAA,IACT,gBAAgBE;AAAA,IAChB,WAAWO,EAAGC,EAAeL,CAAK,GAAGN,CAAS;AAAA,IAC9C,SAAS,CAACY,MAAU;AAChB,UAAIP;AACA,eAAAO,EAAM,eAAA,GACC;AAEX,MAAAV,KAAA,QAAAA,EAAWU;AAAA,IACf;AAAA,IACA,SAAS,CAACA,MAAU;;AAChB,UAAIP;AACA,eAAAO,EAAM,eAAA,GACNA,EAAM,OAAO,KAAA,GACN;AAEX,OAAAC,IAAAP,EAAM,YAAN,QAAAO,EAAA,KAAAP,GAAgBM;AAAA,IACpB;AAAA,IACA,gBAAcR;AAAA,IACd,iBAAeC;AAAA,IACf,iBAAeA;AAAA,IACd,GAAGC;AAAA,IAEJ,UAAA,gBAAAQ,EAACL,EAAkB,WAAlB,EAA4B,WAAWM,GACpC,UAAA;AAAA,MAAA,gBAAAP;AAAA,QAACQ;AAAA,QAAA;AAAA,UACG,MAAM;AAAA,UACN,WAAU;AAAA,UACV,gBAAa;AAAA,QAAA;AAAA,MAAA;AAAA,MAGjB,gBAAAR;AAAA,QAACS;AAAA,QAAA;AAAA,UACG,MAAM;AAAA,UACN,WAAU;AAAA,UACV,gBAAa;AAAA,QAAA;AAAA,MAAA;AAAA,IACjB,EAAA,CACJ;AAAA,EAAA;AAAA,GAKCC,IAAWC,EAA6CpB,CAAiB;AACtFmB,EAAS,cAAc;"}

package/dist/fondue-components85.js

@@ -1,43 +1,20 @@
-import { Children as a, isValidElement as u, cloneElement as f } from "react";
-import { ForwardedRefSelectItem as E } from "./fondue-components65.js";
-const g = ({
-  children: o,
-  value: r,
-  label: s
-}) => o && typeof o == "string" ? {
-  value: r || o,
-  label: s || o
-} : {
-  value: r || "",
-  label: s || r || "",
-  ...o ? { children: o } : null
-}, w = (o, r) => u(o) && o.type === r, y = (o, r, s, p = 0) => {
-  const n = [];
-  let t = 0;
-  return a.forEach(o, (e) => {
-    if (w(e, E) && u(e))
-      g(e.props).label.toLowerCase().includes((s == null ? void 0 : s.toLowerCase()) || "") && (n.push(r(e, p + t)), t++);
-    else if (u(e) && (e != null && e.props.children)) {
-      const { parsedChildren: m, subElementCount: C } = y(
-        e.props.children,
-        r,
-        "",
-        p + t
-      );
-      e = f(e, {
-        children: m,
-        key: `group-${p + t}`
-      }), n.push(e), t += C;
-    } else
-      n.push(e);
-  }), {
-    parsedChildren: n,
-    subElementCount: t
-  };
+const o = "_root_1761r_5", t = "_colorName_1761r_55", c = "_button_1761r_63", r = "_colorIndicator_1761r_76", _ = "_actions_1761r_95", a = "_clear_1761r_105", n = "_caret_1761r_118", s = {
+  root: o,
+  colorName: t,
+  button: c,
+  colorIndicator: r,
+  actions: _,
+  clear: a,
+  caret: n
 };
 export {
-  g as getSelectOptionValue,
-  w as isReactLeaf,
-  y as recursiveMap
+  _ as actions,
+  c as button,
+  n as caret,
+  a as clear,
+  r as colorIndicator,
+  t as colorName,
+  s as default,
+  o as root
 };
 //# sourceMappingURL=fondue-components85.js.map

package/dist/fondue-components85.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components85.js","sources":["../src/components/Select/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    Children,\n    cloneElement,\n    isValidElement,\n    type JSXElementConstructor,\n    type ReactElement,\n    type ReactNode,\n} from 'react';\n\nimport { ForwardedRefSelectItem, type SelectItemProps } from './SelectItem';\n\n/**\n * Extracts and returns an object containing `value` and `label` from a given SelectItemProps object.\n * It prioritizes explicit `value` and `label` properties but will fall back to using `children` as the value or label if necessary.\n *\n * @param {SelectItemProps} props - The properties of a select item, which include potential children, value, and label.\n * @returns {{ value: string; label: string, children?: ReactNode }} An object containing `value` and `label` as strings.\n *\n * @example\n * // Returns { value: 'option1', label: 'Option 1' }\n * getSelectOptionValue({ value: 'option1', label: 'Option 1' });\n *\n * @example\n * // Uses children as the value and label when they are not explicitly provided\n * // Returns { value: 'Default', label: 'Default' }\n * getSelectOptionValue({ children: 'Default' });\n */\nexport const getSelectOptionValue = ({\n    children,\n    value,\n    label,\n}: SelectItemProps): {\n    value: string;\n    label: string;\n    children?: ReactNode;\n} => {\n    if (children && typeof children === 'string') {\n        return {\n            value: value ? value : children,\n            label: label ? label : children,\n        };\n    }\n\n    return {\n        value: value || '',\n        label: label ? label : value || '',\n        ...(children ? { children } : null),\n    };\n};\n/**\n * Determines if the child is a leaf node of React, meaning it has one final child of a native type;\n *\n * @param {ReactNode} child - The React child node to check.\n * @param {JSXElementConstructor<never>} Component - The React component constructor used for comparison.\n * @returns {boolean} Returns true if the `child` is a valid React element of the specified `Component` type.\n *\n * @example\n * // Assuming ForwardedRefSelectItem is a component that renders an <input> element\n * // Returns true\n * isReactLeaf(<ForwardedRefSelectItem />, ForwardedRefSelectItem);\n *\n * @example\n * // Returns false for non-matching types or non-leaf components\n * isReactLeaf(<div><ForwardedRefSelectItem /></div>, ForwardedRefSelectItem);\n */\nexport const isReactLeaf = (child: ReactNode, Component: JSXElementConstructor<never>): child is ReactElement =>\n    isValidElement(child) && child.type === Component;\n\n/**\n * Recursively maps through React children, applying a callback to each child that meets the specified conditions.\n * This function is useful for deeply nested structures where modifications or checks are needed at multiple levels.\n *\n * @param {ReactNode} children - The children to be recursively processed.\n * @param {function(ReactNode, number): ReactNode} callback - A function that is called for each child that meets the condition. It receives the child and its index, and returns a React node.\n * @param {string} [filterText=''] - Optional text used to filter children based on their properties.\n * @param {number} [nextIndex=0] - The starting index for numbering children, defaults to 0.\n * @returns {{ parsedChildren: ReactNode[], subElementCount: number }} An object containing the transformed children array and the count of all processed sub-elements.\n *\n * @example\n * // Example usage in a select component where only items containing a certain text are modified\n * recursiveMap(children, (child, index) => React.cloneElement(child, { extraProp: 'value' }), 'specific text');\n *\n * @example\n * // Nested structure transformation, adding class names based on index\n * recursiveMap(children, (child, index) => React.cloneElement(child, { className: `item-${index}` }));\n */\nexport const recursiveMap = (\n    children: ReactNode,\n    callback: (child: ReactNode, nextIndex: number) => ReactNode,\n    filterText?: string,\n    nextIndex: number = 0,\n): {\n    parsedChildren: ReactNode[];\n    subElementCount: number;\n} => {\n    const resultingChildren: ReactNode[] = [];\n    let itemCounter = 0;\n    Children.forEach(children, (child) => {\n        if (isReactLeaf(child, ForwardedRefSelectItem) && isValidElement<SelectItemProps>(child)) {\n            if (\n                getSelectOptionValue(child.props)\n                    .label.toLowerCase()\n                    .includes(filterText?.toLowerCase() || '')\n            ) {\n                resultingChildren.push(callback(child, nextIndex + itemCounter));\n                itemCounter++;\n            }\n        } else if (isValidElement<{ children: ReactNode }>(child) && child?.props.children) {\n            const { parsedChildren, subElementCount } = recursiveMap(\n                child.props.children,\n                callback,\n                '',\n                nextIndex + itemCounter,\n            );\n            child = cloneElement(child, {\n                children: parsedChildren,\n                key: `group-${nextIndex + itemCounter}`,\n            });\n            resultingChildren.push(child);\n            itemCounter += subElementCount;\n        } else {\n            resultingChildren.push(child);\n        }\n    });\n    return {\n        parsedChildren: resultingChildren,\n        subElementCount: itemCounter,\n    };\n};\n"],"names":["getSelectOptionValue","children","value","label","isReactLeaf","child","Component","isValidElement","recursiveMap","callback","filterText","nextIndex","resultingChildren","itemCounter","Children","ForwardedRefSelectItem","parsedChildren","subElementCount","cloneElement"],"mappings":";;AA6BO,MAAMA,IAAuB,CAAC;AAAA,EACjC,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AACJ,MAKQF,KAAY,OAAOA,KAAa,WACzB;AAAA,EACH,OAAOC,KAAgBD;AAAA,EACvB,OAAOE,KAAgBF;AAAA,IAIxB;AAAA,EACH,OAAOC,KAAS;AAAA,EAChB,OAAOC,KAAgBD,KAAS;AAAA,EAChC,GAAID,IAAW,EAAE,UAAAA,MAAa;AAAA,GAmBzBG,IAAc,CAACC,GAAkBC,MAC1CC,EAAeF,CAAK,KAAKA,EAAM,SAASC,GAoB/BE,IAAe,CACxBP,GACAQ,GACAC,GACAC,IAAoB,MAInB;AACD,QAAMC,IAAiC,CAAA;AACvC,MAAIC,IAAc;AAClB,SAAAC,EAAS,QAAQb,GAAU,CAACI,MAAU;AAClC,QAAID,EAAYC,GAAOU,CAAsB,KAAKR,EAAgCF,CAAK;AACnF,MACIL,EAAqBK,EAAM,KAAK,EAC3B,MAAM,cACN,UAASK,KAAA,gBAAAA,EAAY,kBAAiB,EAAE,MAE7CE,EAAkB,KAAKH,EAASJ,GAAOM,IAAYE,CAAW,CAAC,GAC/DA;AAAA,aAEGN,EAAwCF,CAAK,MAAKA,KAAA,QAAAA,EAAO,MAAM,WAAU;AAChF,YAAM,EAAE,gBAAAW,GAAgB,iBAAAC,EAAA,IAAoBT;AAAA,QACxCH,EAAM,MAAM;AAAA,QACZI;AAAA,QACA;AAAA,QACAE,IAAYE;AAAA,MAAA;AAEhB,MAAAR,IAAQa,EAAab,GAAO;AAAA,QACxB,UAAUW;AAAA,QACV,KAAK,SAASL,IAAYE,CAAW;AAAA,MAAA,CACxC,GACDD,EAAkB,KAAKP,CAAK,GAC5BQ,KAAeI;AAAA,IACnB;AACI,MAAAL,EAAkB,KAAKP,CAAK;AAAA,EAEpC,CAAC,GACM;AAAA,IACH,gBAAgBO;AAAA,IAChB,iBAAiBC;AAAA,EAAA;AAEzB;"}
+{"version":3,"file":"fondue-components85.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/fondue-components86.js

@@ -1,20 +1,43 @@
-const o = "_root_1761r_5", t = "_colorName_1761r_55", c = "_button_1761r_63", r = "_colorIndicator_1761r_76", _ = "_actions_1761r_95", a = "_clear_1761r_105", n = "_caret_1761r_118", s = {
-  root: o,
-  colorName: t,
-  button: c,
-  colorIndicator: r,
-  actions: _,
-  clear: a,
-  caret: n
+import { Children as a, isValidElement as u, cloneElement as f } from "react";
+import { ForwardedRefSelectItem as E } from "./fondue-components65.js";
+const g = ({
+  children: o,
+  value: r,
+  label: s
+}) => o && typeof o == "string" ? {
+  value: r || o,
+  label: s || o
+} : {
+  value: r || "",
+  label: s || r || "",
+  ...o ? { children: o } : null
+}, w = (o, r) => u(o) && o.type === r, y = (o, r, s, p = 0) => {
+  const n = [];
+  let t = 0;
+  return a.forEach(o, (e) => {
+    if (w(e, E) && u(e))
+      g(e.props).label.toLowerCase().includes((s == null ? void 0 : s.toLowerCase()) || "") && (n.push(r(e, p + t)), t++);
+    else if (u(e) && (e != null && e.props.children)) {
+      const { parsedChildren: m, subElementCount: C } = y(
+        e.props.children,
+        r,
+        "",
+        p + t
+      );
+      e = f(e, {
+        children: m,
+        key: `group-${p + t}`
+      }), n.push(e), t += C;
+    } else
+      n.push(e);
+  }), {
+    parsedChildren: n,
+    subElementCount: t
+  };
 };
 export {
-  _ as actions,
-  c as button,
-  n as caret,
-  a as clear,
-  r as colorIndicator,
-  t as colorName,
-  s as default,
-  o as root
+  g as getSelectOptionValue,
+  w as isReactLeaf,
+  y as recursiveMap
 };
 //# sourceMappingURL=fondue-components86.js.map

package/dist/fondue-components86.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components86.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
+{"version":3,"file":"fondue-components86.js","sources":["../src/components/Select/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    Children,\n    cloneElement,\n    isValidElement,\n    type JSXElementConstructor,\n    type ReactElement,\n    type ReactNode,\n} from 'react';\n\nimport { ForwardedRefSelectItem, type SelectItemProps } from './SelectItem';\n\n/**\n * Extracts and returns an object containing `value` and `label` from a given SelectItemProps object.\n * It prioritizes explicit `value` and `label` properties but will fall back to using `children` as the value or label if necessary.\n *\n * @param {SelectItemProps} props - The properties of a select item, which include potential children, value, and label.\n * @returns {{ value: string; label: string, children?: ReactNode }} An object containing `value` and `label` as strings.\n *\n * @example\n * // Returns { value: 'option1', label: 'Option 1' }\n * getSelectOptionValue({ value: 'option1', label: 'Option 1' });\n *\n * @example\n * // Uses children as the value and label when they are not explicitly provided\n * // Returns { value: 'Default', label: 'Default' }\n * getSelectOptionValue({ children: 'Default' });\n */\nexport const getSelectOptionValue = ({\n    children,\n    value,\n    label,\n}: SelectItemProps): {\n    value: string;\n    label: string;\n    children?: ReactNode;\n} => {\n    if (children && typeof children === 'string') {\n        return {\n            value: value ? value : children,\n            label: label ? label : children,\n        };\n    }\n\n    return {\n        value: value || '',\n        label: label ? label : value || '',\n        ...(children ? { children } : null),\n    };\n};\n/**\n * Determines if the child is a leaf node of React, meaning it has one final child of a native type;\n *\n * @param {ReactNode} child - The React child node to check.\n * @param {JSXElementConstructor<never>} Component - The React component constructor used for comparison.\n * @returns {boolean} Returns true if the `child` is a valid React element of the specified `Component` type.\n *\n * @example\n * // Assuming ForwardedRefSelectItem is a component that renders an <input> element\n * // Returns true\n * isReactLeaf(<ForwardedRefSelectItem />, ForwardedRefSelectItem);\n *\n * @example\n * // Returns false for non-matching types or non-leaf components\n * isReactLeaf(<div><ForwardedRefSelectItem /></div>, ForwardedRefSelectItem);\n */\nexport const isReactLeaf = (child: ReactNode, Component: JSXElementConstructor<never>): child is ReactElement =>\n    isValidElement(child) && child.type === Component;\n\n/**\n * Recursively maps through React children, applying a callback to each child that meets the specified conditions.\n * This function is useful for deeply nested structures where modifications or checks are needed at multiple levels.\n *\n * @param {ReactNode} children - The children to be recursively processed.\n * @param {function(ReactNode, number): ReactNode} callback - A function that is called for each child that meets the condition. It receives the child and its index, and returns a React node.\n * @param {string} [filterText=''] - Optional text used to filter children based on their properties.\n * @param {number} [nextIndex=0] - The starting index for numbering children, defaults to 0.\n * @returns {{ parsedChildren: ReactNode[], subElementCount: number }} An object containing the transformed children array and the count of all processed sub-elements.\n *\n * @example\n * // Example usage in a select component where only items containing a certain text are modified\n * recursiveMap(children, (child, index) => React.cloneElement(child, { extraProp: 'value' }), 'specific text');\n *\n * @example\n * // Nested structure transformation, adding class names based on index\n * recursiveMap(children, (child, index) => React.cloneElement(child, { className: `item-${index}` }));\n */\nexport const recursiveMap = (\n    children: ReactNode,\n    callback: (child: ReactNode, nextIndex: number) => ReactNode,\n    filterText?: string,\n    nextIndex: number = 0,\n): {\n    parsedChildren: ReactNode[];\n    subElementCount: number;\n} => {\n    const resultingChildren: ReactNode[] = [];\n    let itemCounter = 0;\n    Children.forEach(children, (child) => {\n        if (isReactLeaf(child, ForwardedRefSelectItem) && isValidElement<SelectItemProps>(child)) {\n            if (\n                getSelectOptionValue(child.props)\n                    .label.toLowerCase()\n                    .includes(filterText?.toLowerCase() || '')\n            ) {\n                resultingChildren.push(callback(child, nextIndex + itemCounter));\n                itemCounter++;\n            }\n        } else if (isValidElement<{ children: ReactNode }>(child) && child?.props.children) {\n            const { parsedChildren, subElementCount } = recursiveMap(\n                child.props.children,\n                callback,\n                '',\n                nextIndex + itemCounter,\n            );\n            child = cloneElement(child, {\n                children: parsedChildren,\n                key: `group-${nextIndex + itemCounter}`,\n            });\n            resultingChildren.push(child);\n            itemCounter += subElementCount;\n        } else {\n            resultingChildren.push(child);\n        }\n    });\n    return {\n        parsedChildren: resultingChildren,\n        subElementCount: itemCounter,\n    };\n};\n"],"names":["getSelectOptionValue","children","value","label","isReactLeaf","child","Component","isValidElement","recursiveMap","callback","filterText","nextIndex","resultingChildren","itemCounter","Children","ForwardedRefSelectItem","parsedChildren","subElementCount","cloneElement"],"mappings":";;AA6BO,MAAMA,IAAuB,CAAC;AAAA,EACjC,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AACJ,MAKQF,KAAY,OAAOA,KAAa,WACzB;AAAA,EACH,OAAOC,KAAgBD;AAAA,EACvB,OAAOE,KAAgBF;AAAA,IAIxB;AAAA,EACH,OAAOC,KAAS;AAAA,EAChB,OAAOC,KAAgBD,KAAS;AAAA,EAChC,GAAID,IAAW,EAAE,UAAAA,MAAa;AAAA,GAmBzBG,IAAc,CAACC,GAAkBC,MAC1CC,EAAeF,CAAK,KAAKA,EAAM,SAASC,GAoB/BE,IAAe,CACxBP,GACAQ,GACAC,GACAC,IAAoB,MAInB;AACD,QAAMC,IAAiC,CAAA;AACvC,MAAIC,IAAc;AAClB,SAAAC,EAAS,QAAQb,GAAU,CAACI,MAAU;AAClC,QAAID,EAAYC,GAAOU,CAAsB,KAAKR,EAAgCF,CAAK;AACnF,MACIL,EAAqBK,EAAM,KAAK,EAC3B,MAAM,cACN,UAASK,KAAA,gBAAAA,EAAY,kBAAiB,EAAE,MAE7CE,EAAkB,KAAKH,EAASJ,GAAOM,IAAYE,CAAW,CAAC,GAC/DA;AAAA,aAEGN,EAAwCF,CAAK,MAAKA,KAAA,QAAAA,EAAO,MAAM,WAAU;AAChF,YAAM,EAAE,gBAAAW,GAAgB,iBAAAC,EAAA,IAAoBT;AAAA,QACxCH,EAAM,MAAM;AAAA,QACZI;AAAA,QACA;AAAA,QACAE,IAAYE;AAAA,MAAA;AAEhB,MAAAR,IAAQa,EAAab,GAAO;AAAA,QACxB,UAAUW;AAAA,QACV,KAAK,SAASL,IAAYE,CAAW;AAAA,MAAA,CACxC,GACDD,EAAkB,KAAKP,CAAK,GAC5BQ,KAAeI;AAAA,IACnB;AACI,MAAAL,EAAkB,KAAKP,CAAK;AAAA,EAEpC,CAAC,GACM;AAAA,IACH,gBAAgBO;AAAA,IAChB,iBAAiBC;AAAA,EAAA;AAEzB;"}