@frontify/fondue-components 15.0.1 → 16.0.3

package/dist/fondue-components3.js

@@ -1,94 +1,92 @@
-import { jsx as r, jsxs as p } from "react/jsx-runtime";
+import { jsx as a, jsxs as p } from "react/jsx-runtime";
 import { IconCaretDown as A } from "@frontify/fondue-icons";
-import * as c from "@radix-ui/react-accordion";
-import a from "./fondue-components30.js";
-const s = ({
+import * as n from "@radix-ui/react-accordion";
+import d from "./fondue-components30.js";
+const c = ({
   "data-test-id": t = "fondue-accordion",
   border: o = !0,
   children: e,
-  defaultValue: d,
-  disabled: i,
-  value: n
-}) => /* @__PURE__ */ r(
-  c.Root,
+  defaultValue: i,
+  disabled: r,
+  value: u
+}) => /* @__PURE__ */ a(
+  n.Root,
   {
-    className: a.root,
+    className: d.root,
     "data-test-id": t,
-    defaultValue: d,
-    disabled: i,
+    defaultValue: i,
+    disabled: r,
     type: "multiple",
-    value: n,
+    value: u,
     "data-border": o,
     children: e
   }
 );
-s.displayName = "Accordion.Root";
-const m = ({
+c.displayName = "Accordion.Root";
+const s = ({
   "data-test-id": t = "fondue-accordion-item",
   children: o,
   disabled: e,
-  onClick: d,
   value: i
-}) => /* @__PURE__ */ r(
-  c.Item,
+}) => /* @__PURE__ */ a(
+  n.Item,
   {
-    className: a.accordionItem,
+    className: d.accordionItem,
     value: i,
-    onPointerDown: (n) => {
-      n.currentTarget.dataset.showFocusRing = "false";
+    onPointerDown: (r) => {
+      r.currentTarget.dataset.showFocusRing = "false";
     },
-    onBlur: (n) => {
-      n.currentTarget.dataset.showFocusRing = "true";
+    onBlur: (r) => {
+      r.currentTarget.dataset.showFocusRing = "true";
     },
-    onClick: d,
     disabled: e,
     "data-test-id": t,
     children: o
   }
 );
-m.displayName = "Accordion.Item";
-const l = ({ children: t }) => /* @__PURE__ */ r(c.Header, { children: t });
-l.displayName = "Accordion.Header";
-const g = ({
+s.displayName = "Accordion.Item";
+const m = ({ onClick: t, children: o }) => /* @__PURE__ */ a(n.Header, { onClick: t, children: o });
+m.displayName = "Accordion.Header";
+const l = ({
   "data-test-id": t = "fondue-accordion-trigger",
   asChild: o,
   children: e
-}) => /* @__PURE__ */ p(c.Trigger, { asChild: o, className: a.accordionTrigger, "data-test-id": t, children: [
+}) => /* @__PURE__ */ p(n.Trigger, { asChild: o, className: d.accordionTrigger, "data-test-id": t, children: [
   e,
-  /* @__PURE__ */ r(A, { className: a.accordionCaret, size: "16" })
+  /* @__PURE__ */ a(A, { className: d.accordionCaret, size: "16" })
 ] });
-g.displayName = "Accordion.Trigger";
-const u = ({
+l.displayName = "Accordion.Trigger";
+const g = ({
   "data-test-id": t = "collapsible-wrap",
   children: o,
   divider: e = !1,
-  onClick: d,
-  padding: i = "large"
-}) => /* @__PURE__ */ r(
-  c.Content,
+  onClick: i,
+  padding: r = "large"
+}) => /* @__PURE__ */ a(
+  n.Content,
   {
-    className: a.accordionContent,
-    onClick: d,
+    className: d.accordionContent,
+    onClick: i,
     "data-test-id": t,
-    "data-item-padding": i,
+    "data-item-padding": r,
     "data-item-divider": e,
-    children: /* @__PURE__ */ r("div", { className: a.accordionContentText, "data-test-id": `inner-${t}`, children: o })
+    children: /* @__PURE__ */ a("div", { className: d.accordionContentText, "data-test-id": `inner-${t}`, children: o })
   }
 );
-u.displayName = "Accordion.Content";
+g.displayName = "Accordion.Content";
 const y = {
-  Root: s,
-  Item: m,
-  Header: l,
-  Trigger: g,
-  Content: u
+  Root: c,
+  Item: s,
+  Header: m,
+  Trigger: l,
+  Content: g
 };
 export {
   y as Accordion,
-  u as AccordionContent,
-  l as AccordionHeader,
-  m as AccordionItem,
-  s as AccordionRoot,
-  g as AccordionTrigger
+  g as AccordionContent,
+  m as AccordionHeader,
+  s as AccordionItem,
+  c as AccordionRoot,
+  l as AccordionTrigger
 };
 //# sourceMappingURL=fondue-components3.js.map

package/dist/fondue-components3.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components3.js","sources":["../src/components/Accordion/Accordion.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown } from '@frontify/fondue-icons';\nimport * as RadixAccordion from '@radix-ui/react-accordion';\nimport { type MouseEventHandler, type ReactNode } from 'react';\n\nimport styles from './styles/accordion.module.scss';\n\ntype AccordionPadding = 'none' | 'small' | 'medium' | 'large';\n\nexport type AccordionRootProps = {\n    'data-test-id'?: string;\n    /**\n     * Show or hide the top and bottom border\n     * @default true\n     */\n    border?: boolean;\n    /**\n     * Children of the Accordion component. This should contain the `Accordion.Item` components\n     */\n    children?: ReactNode;\n    /**\n     * The value of the items whose contents are expanded when the accordion is initially rendered.\n     * Use `defaultValue` if you do not need to control the state of an accordion.\n     */\n    defaultValue?: string[];\n    /**\n     * Whether or not an accordion is disabled from user interaction.\n     */\n    disabled?: boolean;\n    /**\n     * The controlled stateful value of the accordion items whose contents are expanded.\n     */\n    value?: string[];\n};\n\nexport const AccordionRoot = ({\n    'data-test-id': dataTestId = 'fondue-accordion',\n    border = true,\n    children,\n    defaultValue,\n    disabled,\n    value,\n}: AccordionRootProps) => {\n    return (\n        <RadixAccordion.Root\n            className={styles.root}\n            data-test-id={dataTestId}\n            defaultValue={defaultValue}\n            disabled={disabled}\n            type=\"multiple\"\n            value={value}\n            data-border={border}\n        >\n            {children}\n        </RadixAccordion.Root>\n    );\n};\nAccordionRoot.displayName = 'Accordion.Root';\n\nexport type AccordionItemProps = {\n    'data-test-id'?: string;\n    /**\n     * Children of the Accordion item. This should contain the `Accordion.Header` and `Accordion.Content` components\n     */\n    children?: ReactNode;\n    /**\n     * Whether or not an accordion item is disabled from user interaction.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Click callback for this item.\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * A string value for the accordion item. All items within an accordion should use a unique value.\n     */\n    value: string;\n};\n\nexport const AccordionItem = ({\n    'data-test-id': dataTestId = 'fondue-accordion-item',\n    children,\n    disabled,\n    onClick,\n    value,\n}: AccordionItemProps) => {\n    return (\n        <RadixAccordion.Item\n            className={styles.accordionItem}\n            value={value}\n            onPointerDown={(event) => {\n                event.currentTarget.dataset.showFocusRing = 'false';\n            }}\n            onBlur={(event) => {\n                event.currentTarget.dataset.showFocusRing = 'true';\n            }}\n            onClick={onClick}\n            disabled={disabled}\n            data-test-id={dataTestId}\n        >\n            {children}\n        </RadixAccordion.Item>\n    );\n};\nAccordionItem.displayName = 'Accordion.Item';\n\nexport type AccordionHeaderProps = {\n    /**\n     * Children of the Accordion header. This should contain `Accordion.Trigger`\n     */\n    children?: ReactNode;\n};\n\nexport const AccordionHeader = ({ children }: AccordionHeaderProps) => {\n    return <RadixAccordion.Header>{children}</RadixAccordion.Header>;\n};\nAccordionHeader.displayName = 'Accordion.Header';\n\nexport type AccordionTriggerProps = {\n    'data-test-id'?: string;\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default false\n     */\n    asChild?: boolean;\n    /**\n     * Children of the Accordion trigger. This contains the actually clickable and visible header content\n     */\n    children?: ReactNode;\n};\n\nexport const AccordionTrigger = ({\n    'data-test-id': dataTestId = 'fondue-accordion-trigger',\n    asChild,\n    children,\n}: AccordionTriggerProps) => {\n    return (\n        <RadixAccordion.Trigger asChild={asChild} className={styles.accordionTrigger} data-test-id={dataTestId}>\n            {children}\n            <IconCaretDown className={styles.accordionCaret} size=\"16\" />\n        </RadixAccordion.Trigger>\n    );\n};\nAccordionTrigger.displayName = 'Accordion.Trigger';\n\ntype AccordionContentProps = {\n    'data-test-id'?: string;\n    /**\n     * Children of the Accordion content. This contains the main content.\n     */\n    children?: ReactNode;\n    /**\n     * Adds a divider line between the header and the content.\n     */\n    divider?: boolean;\n    /**\n     * Click callback for the content.\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Controls if we show paddings around the content.\n     * @default 'large'\n     */\n    padding?: AccordionPadding;\n};\n\nexport const AccordionContent = ({\n    'data-test-id': dataTestId = 'collapsible-wrap',\n    children,\n    divider = false,\n    onClick,\n    padding = 'large',\n}: AccordionContentProps) => {\n    return (\n        <RadixAccordion.Content\n            className={styles.accordionContent}\n            onClick={onClick}\n            data-test-id={dataTestId}\n            data-item-padding={padding}\n            data-item-divider={divider}\n        >\n            <div className={styles.accordionContentText} data-test-id={`inner-${dataTestId}`}>\n                {children}\n            </div>\n        </RadixAccordion.Content>\n    );\n};\nAccordionContent.displayName = 'Accordion.Content';\n\nexport const Accordion = {\n    Root: AccordionRoot,\n    Item: AccordionItem,\n    Header: AccordionHeader,\n    Trigger: AccordionTrigger,\n    Content: AccordionContent,\n};\n"],"names":["AccordionRoot","dataTestId","border","children","defaultValue","disabled","value","jsx","RadixAccordion","styles","AccordionItem","onClick","event","AccordionHeader","AccordionTrigger","asChild","jsxs","IconCaretDown","AccordionContent","divider","padding","Accordion"],"mappings":";;;;AAoCO,MAAMA,IAAgB,CAAC;AAAA,EAC1B,gBAAgBC,IAAa;AAAA,EAC7B,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AACJ,MAEQ,gBAAAC;AAAA,EAACC,EAAe;AAAA,EAAf;AAAA,IACG,WAAWC,EAAO;AAAA,IAClB,gBAAcR;AAAA,IACd,cAAAG;AAAA,IACA,UAAAC;AAAA,IACA,MAAK;AAAA,IACL,OAAAC;AAAA,IACA,eAAaJ;AAAA,IAEZ,UAAAC;AAAA,EAAA;AACL;AAGRH,EAAc,cAAc;AAwBrB,MAAMU,IAAgB,CAAC;AAAA,EAC1B,gBAAgBT,IAAa;AAAA,EAC7B,UAAAE;AAAA,EACA,UAAAE;AAAA,EACA,SAAAM;AAAA,EACA,OAAAL;AACJ,MAEQ,gBAAAC;AAAA,EAACC,EAAe;AAAA,EAAf;AAAA,IACG,WAAWC,EAAO;AAAA,IAClB,OAAAH;AAAA,IACA,eAAe,CAACM,MAAU;AAChB,MAAAA,EAAA,cAAc,QAAQ,gBAAgB;AAAA,IAChD;AAAA,IACA,QAAQ,CAACA,MAAU;AACT,MAAAA,EAAA,cAAc,QAAQ,gBAAgB;AAAA,IAChD;AAAA,IACA,SAAAD;AAAA,IACA,UAAAN;AAAA,IACA,gBAAcJ;AAAA,IAEb,UAAAE;AAAA,EAAA;AACL;AAGRO,EAAc,cAAc;AASrB,MAAMG,IAAkB,CAAC,EAAE,UAAAV,QACtB,gBAAAI,EAAAC,EAAe,QAAf,EAAuB,UAAAL,EAAS,CAAA;AAE5CU,EAAgB,cAAc;AAevB,MAAMC,IAAmB,CAAC;AAAA,EAC7B,gBAAgBb,IAAa;AAAA,EAC7B,SAAAc;AAAA,EACA,UAAAZ;AACJ,MAEQ,gBAAAa,EAACR,EAAe,SAAf,EAAuB,SAAAO,GAAkB,WAAWN,EAAO,kBAAkB,gBAAcR,GACvF,UAAA;AAAA,EAAAE;AAAA,oBACAc,GAAc,EAAA,WAAWR,EAAO,gBAAgB,MAAK,KAAK,CAAA;AAAA,GAC/D;AAGRK,EAAiB,cAAc;AAuBxB,MAAMI,IAAmB,CAAC;AAAA,EAC7B,gBAAgBjB,IAAa;AAAA,EAC7B,UAAAE;AAAA,EACA,SAAAgB,IAAU;AAAA,EACV,SAAAR;AAAA,EACA,SAAAS,IAAU;AACd,MAEQ,gBAAAb;AAAA,EAACC,EAAe;AAAA,EAAf;AAAA,IACG,WAAWC,EAAO;AAAA,IAClB,SAAAE;AAAA,IACA,gBAAcV;AAAA,IACd,qBAAmBmB;AAAA,IACnB,qBAAmBD;AAAA,IAEnB,UAAA,gBAAAZ,EAAC,SAAI,WAAWE,EAAO,sBAAsB,gBAAc,SAASR,CAAU,IACzE,UAAAE,EACL,CAAA;AAAA,EAAA;AACJ;AAGRe,EAAiB,cAAc;AAExB,MAAMG,IAAY;AAAA,EACrB,MAAMrB;AAAA,EACN,MAAMU;AAAA,EACN,QAAQG;AAAA,EACR,SAASC;AAAA,EACT,SAASI;AACb;"}
+{"version":3,"file":"fondue-components3.js","sources":["../src/components/Accordion/Accordion.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown } from '@frontify/fondue-icons';\nimport * as RadixAccordion from '@radix-ui/react-accordion';\nimport { type MouseEventHandler, type ReactNode } from 'react';\n\nimport styles from './styles/accordion.module.scss';\n\ntype AccordionPadding = 'none' | 'small' | 'medium' | 'large';\n\nexport type AccordionRootProps = {\n    'data-test-id'?: string;\n    /**\n     * Show or hide the top and bottom border\n     * @default true\n     */\n    border?: boolean;\n    /**\n     * Children of the Accordion component. This should contain the `Accordion.Item` components\n     */\n    children?: ReactNode;\n    /**\n     * The value of the items whose contents are expanded when the accordion is initially rendered.\n     * Use `defaultValue` if you do not need to control the state of an accordion.\n     */\n    defaultValue?: string[];\n    /**\n     * Whether or not an accordion is disabled from user interaction.\n     */\n    disabled?: boolean;\n    /**\n     * The controlled stateful value of the accordion items whose contents are expanded.\n     */\n    value?: string[];\n};\n\nexport const AccordionRoot = ({\n    'data-test-id': dataTestId = 'fondue-accordion',\n    border = true,\n    children,\n    defaultValue,\n    disabled,\n    value,\n}: AccordionRootProps) => {\n    return (\n        <RadixAccordion.Root\n            className={styles.root}\n            data-test-id={dataTestId}\n            defaultValue={defaultValue}\n            disabled={disabled}\n            type=\"multiple\"\n            value={value}\n            data-border={border}\n        >\n            {children}\n        </RadixAccordion.Root>\n    );\n};\nAccordionRoot.displayName = 'Accordion.Root';\n\nexport type AccordionItemProps = {\n    'data-test-id'?: string;\n    /**\n     * Children of the Accordion item. This should contain the `Accordion.Header` and `Accordion.Content` components\n     */\n    children?: ReactNode;\n    /**\n     * Whether or not an accordion item is disabled from user interaction.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * A string value for the accordion item. All items within an accordion should use a unique value.\n     */\n    value: string;\n};\n\nexport const AccordionItem = ({\n    'data-test-id': dataTestId = 'fondue-accordion-item',\n    children,\n    disabled,\n    value,\n}: AccordionItemProps) => {\n    return (\n        <RadixAccordion.Item\n            className={styles.accordionItem}\n            value={value}\n            onPointerDown={(event) => {\n                event.currentTarget.dataset.showFocusRing = 'false';\n            }}\n            onBlur={(event) => {\n                event.currentTarget.dataset.showFocusRing = 'true';\n            }}\n            disabled={disabled}\n            data-test-id={dataTestId}\n        >\n            {children}\n        </RadixAccordion.Item>\n    );\n};\nAccordionItem.displayName = 'Accordion.Item';\n\nexport type AccordionHeaderProps = {\n    /**\n     * Click callback for this item.\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Children of the Accordion header. This should contain `Accordion.Trigger`\n     */\n    children?: ReactNode;\n};\n\nexport const AccordionHeader = ({ onClick, children }: AccordionHeaderProps) => {\n    return <RadixAccordion.Header onClick={onClick}>{children}</RadixAccordion.Header>;\n};\nAccordionHeader.displayName = 'Accordion.Header';\n\nexport type AccordionTriggerProps = {\n    'data-test-id'?: string;\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default false\n     */\n    asChild?: boolean;\n    /**\n     * Children of the Accordion trigger. This contains the actually clickable and visible header content\n     */\n    children?: ReactNode;\n};\n\nexport const AccordionTrigger = ({\n    'data-test-id': dataTestId = 'fondue-accordion-trigger',\n    asChild,\n    children,\n}: AccordionTriggerProps) => {\n    return (\n        <RadixAccordion.Trigger asChild={asChild} className={styles.accordionTrigger} data-test-id={dataTestId}>\n            {children}\n            <IconCaretDown className={styles.accordionCaret} size=\"16\" />\n        </RadixAccordion.Trigger>\n    );\n};\nAccordionTrigger.displayName = 'Accordion.Trigger';\n\ntype AccordionContentProps = {\n    'data-test-id'?: string;\n    /**\n     * Children of the Accordion content. This contains the main content.\n     */\n    children?: ReactNode;\n    /**\n     * Adds a divider line between the header and the content.\n     */\n    divider?: boolean;\n    /**\n     * Click callback for the content.\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Controls if we show paddings around the content.\n     * @default 'large'\n     */\n    padding?: AccordionPadding;\n};\n\nexport const AccordionContent = ({\n    'data-test-id': dataTestId = 'collapsible-wrap',\n    children,\n    divider = false,\n    onClick,\n    padding = 'large',\n}: AccordionContentProps) => {\n    return (\n        <RadixAccordion.Content\n            className={styles.accordionContent}\n            onClick={onClick}\n            data-test-id={dataTestId}\n            data-item-padding={padding}\n            data-item-divider={divider}\n        >\n            <div className={styles.accordionContentText} data-test-id={`inner-${dataTestId}`}>\n                {children}\n            </div>\n        </RadixAccordion.Content>\n    );\n};\nAccordionContent.displayName = 'Accordion.Content';\n\nexport const Accordion = {\n    Root: AccordionRoot,\n    Item: AccordionItem,\n    Header: AccordionHeader,\n    Trigger: AccordionTrigger,\n    Content: AccordionContent,\n};\n"],"names":["AccordionRoot","dataTestId","border","children","defaultValue","disabled","value","jsx","RadixAccordion","styles","AccordionItem","event","AccordionHeader","onClick","AccordionTrigger","asChild","jsxs","IconCaretDown","AccordionContent","divider","padding","Accordion"],"mappings":";;;;AAoCO,MAAMA,IAAgB,CAAC;AAAA,EAC1B,gBAAgBC,IAAa;AAAA,EAC7B,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AACJ,MAEQ,gBAAAC;AAAA,EAACC,EAAe;AAAA,EAAf;AAAA,IACG,WAAWC,EAAO;AAAA,IAClB,gBAAcR;AAAA,IACd,cAAAG;AAAA,IACA,UAAAC;AAAA,IACA,MAAK;AAAA,IACL,OAAAC;AAAA,IACA,eAAaJ;AAAA,IAEZ,UAAAC;AAAA,EAAA;AACL;AAGRH,EAAc,cAAc;AAoBrB,MAAMU,IAAgB,CAAC;AAAA,EAC1B,gBAAgBT,IAAa;AAAA,EAC7B,UAAAE;AAAA,EACA,UAAAE;AAAA,EACA,OAAAC;AACJ,MAEQ,gBAAAC;AAAA,EAACC,EAAe;AAAA,EAAf;AAAA,IACG,WAAWC,EAAO;AAAA,IAClB,OAAAH;AAAA,IACA,eAAe,CAACK,MAAU;AAChB,MAAAA,EAAA,cAAc,QAAQ,gBAAgB;AAAA,IAChD;AAAA,IACA,QAAQ,CAACA,MAAU;AACT,MAAAA,EAAA,cAAc,QAAQ,gBAAgB;AAAA,IAChD;AAAA,IACA,UAAAN;AAAA,IACA,gBAAcJ;AAAA,IAEb,UAAAE;AAAA,EAAA;AACL;AAGRO,EAAc,cAAc;AAarB,MAAME,IAAkB,CAAC,EAAE,SAAAC,GAAS,UAAAV,QAC/B,gBAAAI,EAAAC,EAAe,QAAf,EAAsB,SAAAK,GAAmB,UAAAV,EAAS,CAAA;AAE9DS,EAAgB,cAAc;AAevB,MAAME,IAAmB,CAAC;AAAA,EAC7B,gBAAgBb,IAAa;AAAA,EAC7B,SAAAc;AAAA,EACA,UAAAZ;AACJ,MAEQ,gBAAAa,EAACR,EAAe,SAAf,EAAuB,SAAAO,GAAkB,WAAWN,EAAO,kBAAkB,gBAAcR,GACvF,UAAA;AAAA,EAAAE;AAAA,oBACAc,GAAc,EAAA,WAAWR,EAAO,gBAAgB,MAAK,KAAK,CAAA;AAAA,GAC/D;AAGRK,EAAiB,cAAc;AAuBxB,MAAMI,IAAmB,CAAC;AAAA,EAC7B,gBAAgBjB,IAAa;AAAA,EAC7B,UAAAE;AAAA,EACA,SAAAgB,IAAU;AAAA,EACV,SAAAN;AAAA,EACA,SAAAO,IAAU;AACd,MAEQ,gBAAAb;AAAA,EAACC,EAAe;AAAA,EAAf;AAAA,IACG,WAAWC,EAAO;AAAA,IAClB,SAAAI;AAAA,IACA,gBAAcZ;AAAA,IACd,qBAAmBmB;AAAA,IACnB,qBAAmBD;AAAA,IAEnB,UAAA,gBAAAZ,EAAC,SAAI,WAAWE,EAAO,sBAAsB,gBAAc,SAASR,CAAU,IACzE,UAAAE,EACL,CAAA;AAAA,EAAA;AACJ;AAGRe,EAAiB,cAAc;AAExB,MAAMG,IAAY;AAAA,EACrB,MAAMrB;AAAA,EACN,MAAMU;AAAA,EACN,QAAQE;AAAA,EACR,SAASE;AAAA,EACT,SAASI;AACb;"}

package/dist/fondue-components30.js

@@ -1,12 +1,10 @@
-const o = "_root_1f8r4_2", c = "_accordionItem_1f8r4_7", n = "_accordionTrigger_1f8r4_13", r = "_accordionCaret_1f8r4_31", t = "_accordionContent_1f8r4_35", e = "_accordionContentText_1f8r4_62", i = "_slideDown_1f8r4_1", _ = "_slideUp_1f8r4_1", d = {
+const o = "_root_1f8r4_2", c = "_accordionItem_1f8r4_7", n = "_accordionTrigger_1f8r4_13", r = "_accordionCaret_1f8r4_31", t = "_accordionContent_1f8r4_35", e = "_accordionContentText_1f8r4_62", a = {
   root: o,
   accordionItem: c,
   accordionTrigger: n,
   accordionCaret: r,
   accordionContent: t,
-  accordionContentText: e,
-  slideDown: i,
-  slideUp: _
+  accordionContentText: e
 };
 export {
   r as accordionCaret,
@@ -14,9 +12,7 @@ export {
   e as accordionContentText,
   c as accordionItem,
   n as accordionTrigger,
-  d as default,
-  o as root,
-  i as slideDown,
-  _ as slideUp
+  a as default,
+  o as root
 };
 //# sourceMappingURL=fondue-components30.js.map

package/dist/fondue-components30.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components30.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"fondue-components30.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/fondue-components31.js

@@ -18,15 +18,15 @@ const g = (n) => n.startsWith("aria-") || n === "role", s = {
   wrap: "flex-wrap",
   columns: "grid-template-columns",
   rows: "grid-template-rows"
-}, m = (n, r) => n === "columns" || n === "rows" ? typeof r == "number" ? `repeat(${r}, 1fr)` : r : typeof r == "number" ? `${r * 0.25}rem` : r, f = (n, r = {}) => Object.entries(n).reduce((i, [t, e]) => {
+}, m = (n, r) => n === "columns" || n === "rows" ? typeof r == "number" ? `repeat(${r}, 1fr)` : r : typeof r == "number" ? `${r * 0.25}rem` : r, f = (n, r = {}) => Object.entries(n).reduce((i, [t, o]) => {
   if (g(t))
     return i;
-  const o = t in r ? r[t] : t in s ? s[t] : t, p = o == null ? void 0 : o.replaceAll(/([\da-z]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
-  if (typeof e == "object")
-    for (const [d, a] of Object.entries(e))
+  const e = t in r ? r[t] : t in s ? s[t] : t, p = e == null ? void 0 : e.replaceAll(/([\da-z]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+  if (typeof o == "object")
+    for (const [d, a] of Object.entries(o))
       a !== void 0 && (i[`--${d}-${p}`] = m(t, a));
   else
-    i[`--${p}`] = m(t, e);
+    i[`--${p}`] = m(t, o);
   return i;
 }, {});
 export {

package/dist/fondue-components38.js

@@ -1,35 +1,35 @@
 import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-import { RgbaColorPicker as m } from "react-colorful";
+import { forwardRef as m } from "react";
+import { RgbaColorPicker as n } from "react-colorful";
 import t from "./fondue-components41.js";
 import { DEFAULT_COLOR as s } from "./fondue-components42.js";
 const i = ({
-  currentColor: e = s,
+  currentColor: a = s,
   onColorChange: d = () => {
   },
   "data-test-id": o = "color-picker-input"
 }, p) => /* @__PURE__ */ r("div", { className: t.gradientInput, "data-test-id": o, ref: p, children: /* @__PURE__ */ r(
-  m,
+  n,
   {
     className: t.reactColorful,
     color: {
-      r: e.red,
-      g: e.green,
-      b: e.blue,
-      a: e.alpha === void 0 ? 1 : e.alpha
+      r: a.red,
+      g: a.green,
+      b: a.blue,
+      a: a.alpha === void 0 ? 1 : a.alpha
     },
-    onChange: (a) => d({
-      red: a.r,
-      green: a.g,
-      blue: a.b,
-      alpha: a.a
+    onChange: (e) => d({
+      red: e.r,
+      green: e.g,
+      blue: e.b,
+      alpha: e.a
     })
   }
 ) });
 i.displayName = "ColorPicker.Gradient";
-const u = n(i);
+const c = m(i);
 export {
   i as ColorGradientInput,
-  u as ForwardedRefColorGradientInput
+  c as ForwardedRefColorGradientInput
 };
 //# sourceMappingURL=fondue-components38.js.map

package/dist/fondue-components39.js

@@ -1,40 +1,43 @@
-import { jsxs as t, jsx as e, Fragment as p } from "react/jsx-runtime";
-import { IconDroplet as f, IconCross as N, IconCaretDown as h } from "@frontify/fondue-icons";
+import { jsxs as s, jsx as e, Fragment as N } from "react/jsx-runtime";
+import { IconDroplet as h, IconCross as f, IconCaretDown as I } from "@frontify/fondue-icons";
 import { forwardRef as b } from "react";
-import a from "./fondue-components77.js";
-import { colorToCss as I } from "./fondue-components42.js";
+import t from "./fondue-components77.js";
+import { getColorWithName as v, colorToCss as k } from "./fondue-components42.js";
 const o = ({
   id: c,
-  currentColor: s,
+  currentColor: a,
   isOpen: d,
   onClear: i,
   onClick: l,
-  "data-test-id": n = "color-picker-input",
-  ...r
-}, m) => /* @__PURE__ */ t("div", { id: c, className: a.root, ...r, ref: m, "data-test-id": n, children: [
-  /* @__PURE__ */ t("button", { className: a.button, onClick: l, type: "button", "data-color-input-select": !0, children: [
-    (s == null ? void 0 : s.red) !== void 0 ? /* @__PURE__ */ e(
-      "div",
-      {
-        "aria-hidden": !0,
-        className: a.colorIndicator,
-        style: { backgroundColor: I(s) }
-      }
-    ) : /* @__PURE__ */ t(p, { children: [
-      /* @__PURE__ */ e(f, { size: 16 }),
-      /* @__PURE__ */ e("span", { children: "Select Color" })
+  "data-test-id": m = "color-picker-input",
+  ...n
+}, r) => {
+  const p = (a == null ? void 0 : a.name) ?? (a ? v(a, "RGBA").name : "");
+  return /* @__PURE__ */ s("div", { id: c, className: t.root, ref: r, "data-test-id": m, children: [
+    /* @__PURE__ */ s("button", { className: t.button, ...n, onClick: l, type: "button", "data-color-input-select": !0, children: [
+      (a == null ? void 0 : a.red) !== void 0 ? /* @__PURE__ */ e(
+        "div",
+        {
+          "aria-hidden": !0,
+          className: t.colorIndicator,
+          style: { "--active-color": k(a) }
+        }
+      ) : /* @__PURE__ */ s(N, { children: [
+        /* @__PURE__ */ e(h, { size: 16 }),
+        /* @__PURE__ */ e("span", { children: "Select Color" })
+      ] }),
+      /* @__PURE__ */ e("span", { className: t.colorName, children: p })
     ] }),
-    /* @__PURE__ */ e("span", { className: a.colorName, children: s == null ? void 0 : s.name })
-  ] }),
-  /* @__PURE__ */ t("div", { className: a.actions, children: [
-    i && /* @__PURE__ */ e("button", { type: "button", "aria-label": "Clear color", onClick: i, className: a.clear, children: /* @__PURE__ */ e(N, { size: 16 }) }),
-    /* @__PURE__ */ e("div", { className: a.caret, "data-state": d ? "open" : "closed", children: /* @__PURE__ */ e(h, { size: 16, className: a.caret }) })
-  ] })
-] });
+    /* @__PURE__ */ s("div", { className: t.actions, children: [
+      i && /* @__PURE__ */ e("button", { type: "button", "aria-label": "Clear color", onClick: i, className: t.clear, children: /* @__PURE__ */ e(f, { size: 16 }) }),
+      /* @__PURE__ */ e("div", { className: t.caret, "data-state": d ? "open" : "closed", children: /* @__PURE__ */ e(I, { size: 16, className: t.caret }) })
+    ] })
+  ] });
+};
 o.displayName = "ColorPicker.Input";
-const x = b(o);
+const R = b(o);
 export {
   o as ColorPickerInput,
-  x as ForwardedRefColorPickerInput
+  R as ForwardedRefColorPickerInput
 };
 //# sourceMappingURL=fondue-components39.js.map

package/dist/fondue-components39.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components39.js","sources":["../src/components/ColorPicker/ColorPickerInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCross, IconDroplet } from '@frontify/fondue-icons';\nimport { type ForwardedRef, forwardRef } from 'react';\n\nimport { type CommonAriaAttrs } from '#/utilities/types';\n\nimport styles from './styles/colorInput.module.scss';\nimport { type RgbaColor } from './types';\nimport { colorToCss } from './utils';\n\ntype ColorPickerInputProps = {\n    id?: string;\n    /**\n     * The active color in the color picker\n     */\n    currentColor?: RgbaColor;\n    /**\n     * The open state of the color picker used to dermine arrow state\n     */\n    isOpen?: boolean;\n    /**\n     * callback for clearing the color\n     */\n    onClear?: () => void;\n    /**\n     * Event handler called when the color picker input is clicked\n     */\n    onClick?: () => void;\n    /**\n     * The test id of the color picker input\n     */\n    'data-test-id'?: string;\n} & CommonAriaAttrs;\n\nexport const ColorPickerInput = (\n    {\n        id,\n        currentColor,\n        isOpen,\n        onClear,\n        onClick,\n        'data-test-id': dataTestId = 'color-picker-input',\n        ...props\n    }: ColorPickerInputProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div id={id} className={styles.root} {...props} ref={forwardedRef} data-test-id={dataTestId}>\n            <button className={styles.button} onClick={onClick} type=\"button\" data-color-input-select>\n                {currentColor?.red !== undefined ? (\n                    <div\n                        aria-hidden\n                        className={styles.colorIndicator}\n                        style={{ backgroundColor: colorToCss(currentColor) }}\n                    />\n                ) : (\n                    <>\n                        <IconDroplet size={16} />\n                        <span>Select Color</span>\n                    </>\n                )}\n\n                <span className={styles.colorName}>{currentColor?.name}</span>\n            </button>\n            <div className={styles.actions}>\n                {onClear && (\n                    <button type=\"button\" aria-label=\"Clear color\" onClick={onClear} className={styles.clear}>\n                        <IconCross size={16} />\n                    </button>\n                )}\n                <div className={styles.caret} data-state={isOpen ? 'open' : 'closed'}>\n                    <IconCaretDown size={16} className={styles.caret} />\n                </div>\n            </div>\n        </div>\n    );\n};\nColorPickerInput.displayName = 'ColorPicker.Input';\n\nexport const ForwardedRefColorPickerInput = forwardRef<HTMLDivElement, ColorPickerInputProps>(ColorPickerInput);\n"],"names":["ColorPickerInput","id","currentColor","isOpen","onClear","onClick","dataTestId","props","forwardedRef","jsxs","styles","jsx","colorToCss","Fragment","IconDroplet","IconCross","IconCaretDown","ForwardedRefColorPickerInput","forwardRef"],"mappings":";;;;;AAmCO,MAAMA,IAAmB,CAC5B;AAAA,EACI,IAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,gBAAgBC,IAAa;AAAA,EAC7B,GAAGC;AACP,GACAC,MAGI,gBAAAC,EAAC,OAAI,EAAA,IAAAR,GAAQ,WAAWS,EAAO,MAAO,GAAGH,GAAO,KAAKC,GAAc,gBAAcF,GAC7E,UAAA;AAAA,EAAC,gBAAAG,EAAA,UAAA,EAAO,WAAWC,EAAO,QAAQ,SAAAL,GAAkB,MAAK,UAAS,2BAAuB,IACpF,UAAA;AAAA,KAAAH,KAAA,gBAAAA,EAAc,SAAQ,SACnB,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,eAAW;AAAA,QACX,WAAWD,EAAO;AAAA,QAClB,OAAO,EAAE,iBAAiBE,EAAWV,CAAY,EAAE;AAAA,MAAA;AAAA,IAAA,IAInD,gBAAAO,EAAAI,GAAA,EAAA,UAAA;AAAA,MAAC,gBAAAF,EAAAG,GAAA,EAAY,MAAM,GAAI,CAAA;AAAA,MACvB,gBAAAH,EAAC,UAAK,UAAY,eAAA,CAAA;AAAA,IAAA,GACtB;AAAA,sBAGH,QAAK,EAAA,WAAWD,EAAO,WAAY,iCAAc,KAAK,CAAA;AAAA,EAAA,GAC3D;AAAA,EACC,gBAAAD,EAAA,OAAA,EAAI,WAAWC,EAAO,SAClB,UAAA;AAAA,IAAAN,KACI,gBAAAO,EAAA,UAAA,EAAO,MAAK,UAAS,cAAW,eAAc,SAASP,GAAS,WAAWM,EAAO,OAC/E,UAAA,gBAAAC,EAACI,GAAU,EAAA,MAAM,GAAI,CAAA,GACzB;AAAA,sBAEH,OAAI,EAAA,WAAWL,EAAO,OAAO,cAAYP,IAAS,SAAS,UACxD,UAAA,gBAAAQ,EAACK,KAAc,MAAM,IAAI,WAAWN,EAAO,OAAO,EACtD,CAAA;AAAA,EAAA,EACJ,CAAA;AAAA,GACJ;AAGRV,EAAiB,cAAc;AAElB,MAAAiB,IAA+BC,EAAkDlB,CAAgB;"}
+{"version":3,"file":"fondue-components39.js","sources":["../src/components/ColorPicker/ColorPickerInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCross, IconDroplet } from '@frontify/fondue-icons';\nimport { type CSSProperties, type ForwardedRef, forwardRef } from 'react';\n\nimport { type CommonAriaAttrs } from '#/utilities/types';\n\nimport styles from './styles/colorInput.module.scss';\nimport { type RgbaColor } from './types';\nimport { colorToCss, getColorWithName } from './utils';\n\ntype ColorPickerInputProps = {\n    id?: string;\n    /**\n     * The active color in the color picker\n     */\n    currentColor?: RgbaColor;\n    /**\n     * The open state of the color picker used to dermine arrow state\n     */\n    isOpen?: boolean;\n    /**\n     * callback for clearing the color\n     */\n    onClear?: () => void;\n    /**\n     * Event handler called when the color picker input is clicked\n     */\n    onClick?: () => void;\n    /**\n     * The test id of the color picker input\n     */\n    'data-test-id'?: string;\n} & CommonAriaAttrs;\n\nexport const ColorPickerInput = (\n    {\n        id,\n        currentColor,\n        isOpen,\n        onClear,\n        onClick,\n        'data-test-id': dataTestId = 'color-picker-input',\n        ...props\n    }: ColorPickerInputProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const colorName = currentColor?.name ?? (currentColor ? getColorWithName(currentColor, 'RGBA').name : '');\n    return (\n        <div id={id} className={styles.root} ref={forwardedRef} data-test-id={dataTestId}>\n            <button className={styles.button} {...props} onClick={onClick} type=\"button\" data-color-input-select>\n                {currentColor?.red !== undefined ? (\n                    <div\n                        aria-hidden\n                        className={styles.colorIndicator}\n                        style={{ '--active-color': colorToCss(currentColor) } as CSSProperties}\n                    />\n                ) : (\n                    <>\n                        <IconDroplet size={16} />\n                        <span>Select Color</span>\n                    </>\n                )}\n\n                <span className={styles.colorName}>{colorName}</span>\n            </button>\n            <div className={styles.actions}>\n                {onClear && (\n                    <button type=\"button\" aria-label=\"Clear color\" onClick={onClear} className={styles.clear}>\n                        <IconCross size={16} />\n                    </button>\n                )}\n                <div className={styles.caret} data-state={isOpen ? 'open' : 'closed'}>\n                    <IconCaretDown size={16} className={styles.caret} />\n                </div>\n            </div>\n        </div>\n    );\n};\nColorPickerInput.displayName = 'ColorPicker.Input';\n\nexport const ForwardedRefColorPickerInput = forwardRef<HTMLDivElement, ColorPickerInputProps>(ColorPickerInput);\n"],"names":["ColorPickerInput","id","currentColor","isOpen","onClear","onClick","dataTestId","props","forwardedRef","colorName","getColorWithName","jsxs","styles","jsx","colorToCss","Fragment","IconDroplet","IconCross","IconCaretDown","ForwardedRefColorPickerInput","forwardRef"],"mappings":";;;;;AAmCO,MAAMA,IAAmB,CAC5B;AAAA,EACI,IAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,gBAAgBC,IAAa;AAAA,EAC7B,GAAGC;AACP,GACAC,MACC;AACK,QAAAC,KAAYP,KAAA,gBAAAA,EAAc,UAASA,IAAeQ,EAAiBR,GAAc,MAAM,EAAE,OAAO;AAElG,SAAA,gBAAAS,EAAC,SAAI,IAAAV,GAAQ,WAAWW,EAAO,MAAM,KAAKJ,GAAc,gBAAcF,GAClE,UAAA;AAAA,IAAC,gBAAAK,EAAA,UAAA,EAAO,WAAWC,EAAO,QAAS,GAAGL,GAAO,SAAAF,GAAkB,MAAK,UAAS,2BAAuB,IAC/F,UAAA;AAAA,OAAAH,KAAA,gBAAAA,EAAc,SAAQ,SACnB,gBAAAW;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,eAAW;AAAA,UACX,WAAWD,EAAO;AAAA,UAClB,OAAO,EAAE,kBAAkBE,EAAWZ,CAAY,EAAE;AAAA,QAAA;AAAA,MAAA,IAIpD,gBAAAS,EAAAI,GAAA,EAAA,UAAA;AAAA,QAAC,gBAAAF,EAAAG,GAAA,EAAY,MAAM,GAAI,CAAA;AAAA,QACvB,gBAAAH,EAAC,UAAK,UAAY,eAAA,CAAA;AAAA,MAAA,GACtB;AAAA,MAGH,gBAAAA,EAAA,QAAA,EAAK,WAAWD,EAAO,WAAY,UAAUH,EAAA,CAAA;AAAA,IAAA,GAClD;AAAA,IACC,gBAAAE,EAAA,OAAA,EAAI,WAAWC,EAAO,SAClB,UAAA;AAAA,MAAAR,KACI,gBAAAS,EAAA,UAAA,EAAO,MAAK,UAAS,cAAW,eAAc,SAAST,GAAS,WAAWQ,EAAO,OAC/E,UAAA,gBAAAC,EAACI,GAAU,EAAA,MAAM,GAAI,CAAA,GACzB;AAAA,wBAEH,OAAI,EAAA,WAAWL,EAAO,OAAO,cAAYT,IAAS,SAAS,UACxD,UAAA,gBAAAU,EAACK,KAAc,MAAM,IAAI,WAAWN,EAAO,OAAO,EACtD,CAAA;AAAA,IAAA,EACJ,CAAA;AAAA,EAAA,GACJ;AAER;AACAZ,EAAiB,cAAc;AAElB,MAAAmB,IAA+BC,EAAkDpB,CAAgB;"}

package/dist/fondue-components40.js

@@ -1,14 +1,14 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
 import { forwardRef as N, useState as b, useEffect as R } from "react";
 import { Select as c } from "./fondue-components21.js";
 import { TextInput as r } from "./fondue-components27.js";
 import a from "./fondue-components41.js";
-import { rgbColorToHex as d, isValidHexColor as m, hexColorToRgba as I, getLimitedColorChannelValue as o, DEFAULT_COLOR as x, DEFAULT_FORMAT as S } from "./fondue-components42.js";
+import { rgbColorToHex as d, DEFAULT_COLOR as I, DEFAULT_FORMAT as x, isValidHexColor as m, hexColorToRgba as S, getLimitedColorChannelValue as n } from "./fondue-components42.js";
 const h = ({
-  currentColor: t = x,
+  currentColor: t = I,
   onColorChange: i = () => {
   },
-  currentFormat: s = S,
+  currentFormat: s = x,
   setCurrentFormat: v = () => {
   },
   "data-test-id": f = "color-picker-value-input"
@@ -16,8 +16,8 @@ const h = ({
   const [u, p] = b(d(t));
   return R(() => {
     p(d(t));
-  }, [t]), /* @__PURE__ */ n("div", { className: a.inputs, "data-test-id": f, ref: g, children: [
-    /* @__PURE__ */ e("div", { className: a.colorFormatInput, children: /* @__PURE__ */ n(
+  }, [t]), /* @__PURE__ */ o("div", { className: a.inputs, "data-test-id": f, ref: g, children: [
+    /* @__PURE__ */ e("div", { className: a.colorFormatInput, children: /* @__PURE__ */ o(
       c,
       {
         "data-test-id": "color-picker-select-format",
@@ -41,7 +41,7 @@ const h = ({
         value: u,
         status: m(u) ? "neutral" : "error",
         onBlur: (l) => {
-          m(l.target.value) && i(I(l.target.value));
+          m(l.target.value) && i(S(l.target.value));
         },
         onChange: (l) => {
           p(l.target.value);
@@ -49,7 +49,7 @@ const h = ({
         "aria-label": "Hex color value",
         children: /* @__PURE__ */ e(r.Slot, { name: "left", children: /* @__PURE__ */ e("span", { className: a.inputDecorator, children: "#" }) })
       }
-    ) : /* @__PURE__ */ n("div", { className: a.colorChannelInputGroup, children: [
+    ) : /* @__PURE__ */ o("div", { className: a.colorChannelInputGroup, children: [
       /* @__PURE__ */ e(
         r.Root,
         {
@@ -60,7 +60,7 @@ const h = ({
           onChange: (l) => {
             i({
               ...t,
-              red: o(l.target.value)
+              red: n(l.target.value)
             });
           },
           "aria-label": "Red Color Channel",
@@ -77,7 +77,7 @@ const h = ({
           onChange: (l) => {
             i({
               ...t,
-              green: o(l.target.value)
+              green: n(l.target.value)
             });
           },
           "aria-label": "Green Color Channel",
@@ -94,7 +94,7 @@ const h = ({
           onChange: (l) => {
             i({
               ...t,
-              blue: o(l.target.value)
+              blue: n(l.target.value)
             });
           },
           "aria-label": "Blue Color Channel",
@@ -102,7 +102,7 @@ const h = ({
         }
       )
     ] }),
-    /* @__PURE__ */ e("div", { className: a.colorAlphaInput, children: /* @__PURE__ */ n(
+    /* @__PURE__ */ e("div", { className: a.colorAlphaInput, children: /* @__PURE__ */ o(
       r.Root,
       {
         "data-test-id": "color-picker-value-input-alpha",
@@ -112,7 +112,7 @@ const h = ({
         onChange: (l) => {
           i({
             ...t,
-            alpha: o(l.target.value, 0, 100) / 100
+            alpha: n(l.target.value, 0, 100) / 100
           });
         },
         "aria-label": "Color Opacity",

package/dist/fondue-components42.js

@@ -1,19 +1,19 @@
 const s = { red: 255, green: 255, blue: 255, alpha: 1, name: "" }, g = "HEX", $ = (e) => {
   if (e)
-    return `rgba(${e.red}, ${e.green}, ${e.blue}, ${e.alpha || 1})`;
+    return `rgba(${e.red}, ${e.green}, ${e.blue}, ${e.alpha ?? 1})`;
 }, p = (e) => {
-  const n = /^([\dA-Fa-f]{3}){1,2}$/;
-  return e.length > 2 && n.test(e);
-}, u = (e) => {
-  const n = /^([\dA-Fa-f]{3}){1,2}$/, r = e.match(n);
-  if (!r)
+  const r = /^([\dA-Fa-f]{3}){1,2}$/;
+  return e.length > 2 && r.test(e);
+}, h = (e) => {
+  const r = /^([\dA-Fa-f]{3}){1,2}$/, n = e.match(r);
+  if (!n)
     return {
       red: 0,
       green: 0,
       blue: 0,
       alpha: 0
     };
-  const t = r[0];
+  const t = n[0];
   return t.length === 3 ? {
     red: parseInt(`${t[0]}${t[0]}`, 16),
     green: parseInt(`${t[1]}${t[1]}`, 16),
@@ -26,22 +26,22 @@ const s = { red: 255, green: 255, blue: 255, alpha: 1, name: "" }, g = "HEX", $
     alpha: 1
   };
 }, a = (e) => {
-  const { red: n, green: r, blue: t } = e;
-  return `${n.toString(16).padStart(2, "0")}${r.toString(16).padStart(2, "0")}${t.toString(16).padStart(2, "0")}`;
-}, h = (e, n) => n === "HEX" ? {
+  const { red: r, green: n, blue: t } = e;
+  return `${r.toString(16).padStart(2, "0")}${n.toString(16).padStart(2, "0")}${t.toString(16).padStart(2, "0")}`;
+}, i = (e, r) => r === "HEX" ? {
   ...e,
   name: `#${a(e)}`
 } : {
   ...e,
-  name: `rgba(${e.red}, ${e.green}, ${e.blue}, ${e.alpha || 1})`
-}, i = (e, n = 0, r = 255) => e.length === 0 || parseInt(e) < n ? n : parseInt(e) > r ? r : parseInt(e);
+  name: `rgba(${e.red}, ${e.green}, ${e.blue}, ${e.alpha ?? 1})`
+}, u = (e, r = 0, n = 255) => e.length === 0 || parseInt(e) < r ? r : parseInt(e) > n ? n : parseInt(e);
 export {
   s as DEFAULT_COLOR,
   g as DEFAULT_FORMAT,
   $ as colorToCss,
-  h as getColorWithName,
-  i as getLimitedColorChannelValue,
-  u as hexColorToRgba,
+  i as getColorWithName,
+  u as getLimitedColorChannelValue,
+  h as hexColorToRgba,
   p as isValidHexColor,
   a as rgbColorToHex
 };

package/dist/fondue-components42.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components42.js","sources":["../src/components/ColorPicker/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ColorFormat, type RgbaColor } from './types';\n\nexport const DEFAULT_COLOR = { red: 255, green: 255, blue: 255, alpha: 1, name: '' };\nexport const DEFAULT_FORMAT = 'HEX';\n\n/**\n * Converts a color object to a CSS color string.\n * @param {RgbaColor} color - The color object to be converted.\n * @returns {string}\n * @example\n * colorToCss({ red: 255, green: 255, blue: 255, alpha: 1 }); // 'rgba(255, 255, 255, 1)'\n * @example\n * colorToCss({ red: 255, green: 87, blue: 51, alpha: 1 }); // 'rgba(255, 87, 51, 1)'\n * @example\n * colorToCss({ red: 0, green: 0, blue: 0, alpha: 0 }); // 'rgba(0, 0, 0, 0)'\n */\nexport const colorToCss = (color?: RgbaColor) => {\n    if (!color) {\n        return undefined;\n    }\n    return `rgba(${color.red}, ${color.green}, ${color.blue}, ${color.alpha || 1})`;\n};\n\n/**\n * Checks if a string is a valid hexadecimal color code. This function accepts\n * both three-digit and six-digit hex codes without the '#' symbol.\n * @param {string} color - The color code to be checked.\n * @returns {boolean}\n * @example\n * isValidHexColor('FFF'); // true\n * @example\n * isValidHexColor('FF5733'); // true\n * @example\n * isValidHexColor('XYZ'); // false\n */\nexport const isValidHexColor = (color: string): boolean => {\n    const hexRegex = /^([\\dA-Fa-f]{3}){1,2}$/;\n    return color.length > 2 && hexRegex.test(color);\n};\n\n/**\n * Converts a hexadecimal color code to an RGBA color object. This function accepts\n * both three-digit and six-digit hex codes without the '#' symbol.\n * @param {string} hex - The hex code, either 3 or 6 characters long. Characters should be from the set [0-9A-Fa-f].\n * @returns {RgbaColor}\n * @example\n * hexColorToRgba('FFF'); // { red: 255, green: 255, blue: 255, alpha: 1 }\n * @example\n * hexColorToRgba('FF5733'); // { red: 255, green: 87, blue: 51, alpha: 1 }\n * @example\n * hexColorToRgba('XYZ'); // { red: 0, green: 0, blue: 0, alpha: 0 }\n */\nexport const hexColorToRgba = (hex: string): RgbaColor => {\n    const hexRegex = /^([\\dA-Fa-f]{3}){1,2}$/;\n    const matches = hex.match(hexRegex);\n    if (!matches) {\n        return {\n            red: 0,\n            green: 0,\n            blue: 0,\n            alpha: 0,\n        };\n    }\n    const hexColor = matches[0];\n    if (hexColor.length === 3) {\n        return {\n            red: parseInt(`${hexColor[0]}${hexColor[0]}`, 16),\n            green: parseInt(`${hexColor[1]}${hexColor[1]}`, 16),\n            blue: parseInt(`${hexColor[2]}${hexColor[2]}`, 16),\n            alpha: 1,\n        };\n    }\n    return {\n        red: parseInt(hexColor.slice(0, 2), 16),\n        green: parseInt(hexColor.slice(2, 4), 16),\n        blue: parseInt(hexColor.slice(4, 6), 16),\n        alpha: 1,\n    };\n};\n\n/**\n * Converts an RGBA color object to a hexadecimal color code. This function returns a\n * six-digit hex code without the '#' symbol.\n * @param {RgbaColor} rgb - The RGBA color object.\n * @returns {string}\n * @example\n * rgbColorToHex({ red: 255, green: 255, blue: 255, alpha: 1 }); // '#FFFFFF'\n * @example\n * rgbColorToHex({ red: 255, green: 87, blue: 51, alpha: 1 }); // '#FF5733'\n * @example\n * rgbColorToHex({ red: 0, green: 0, blue: 0, alpha: 0 }); // '#000000'\n */\nexport const rgbColorToHex = (rgb: Omit<RgbaColor, 'alpha'>): string => {\n    const { red, green, blue } = rgb;\n    return `${red.toString(16).padStart(2, '0')}${green.toString(16).padStart(2, '0')}${blue.toString(16).padStart(2, '0')}`;\n};\n\n/**\n * Returns a color object with a name property based on the provided color and format.\n * @param {RgbaColor} color - The RGBA color object.\n * @param {ColorFormat} currentFormat - The current format of the color.\n * @returns {RgbaColor}\n * @example\n * getColorWithName({ red: 255, green: 255, blue: 255, alpha: 1 }, 'HEX'); // { red: 255, green: 255, blue: 255, alpha: 1, name: '#FFFFFF' }\n * @example\n * getColorWithName({ red: 255, green: 255, blue: 255, alpha: 1 }, 'RGBA'); // { red: 255, green: 255, blue: 255, alpha: 1, name: 'rgba(255, 255, 255, 1)' }\n * @example\n * getColorWithName({ red: 255, green: 87, blue: 51, alpha: 1 }, 'RGBA'); // { red: 255, green: 87, blue: 51, alpha: 1, name: 'rgba(255, 87, 51, 1)' }\n */\nexport const getColorWithName = (color: RgbaColor, currentFormat: ColorFormat) => {\n    if (currentFormat === 'HEX') {\n        return {\n            ...color,\n            name: `#${rgbColorToHex(color)}`,\n        };\n    }\n    return {\n        ...color,\n        name: `rgba(${color.red}, ${color.green}, ${color.blue}, ${color.alpha || 1})`,\n    };\n};\n\n/**\n * Returns a number between a minimum and maximum value, inclusive.\n * @param {string} value - The value to be limited.\n * @param {number} [min=0] - The minimum value (inclusive).\n * @param {number} [max=255] - The maximum value (inclusive).\n * @returns {number}\n * @example\n * getLimitedColorChannelValue('255'); // 255\n * @example\n * getLimitedColorChannelValue('100'); // 100\n * @example\n * getLimitedColorChannelValue('0'); // 0\n * @example\n * getLimitedColorChannelValue('500'); // 255\n * @example\n * getLimitedColorChannelValue('500', 0, 100); // 100\n */\nexport const getLimitedColorChannelValue = (value: string, min: number = 0, max: number = 255): number => {\n    if (value.length === 0 || parseInt(value) < min) {\n        return min;\n    } else if (parseInt(value) > max) {\n        return max;\n    }\n    return parseInt(value);\n};\n"],"names":["DEFAULT_COLOR","DEFAULT_FORMAT","colorToCss","color","isValidHexColor","hexRegex","hexColorToRgba","hex","matches","hexColor","rgbColorToHex","rgb","red","green","blue","getColorWithName","currentFormat","getLimitedColorChannelValue","value","min","max"],"mappings":"AAIa,MAAAA,IAAgB,EAAE,KAAK,KAAK,OAAO,KAAK,MAAM,KAAK,OAAO,GAAG,MAAM,GAAG,GACtEC,IAAiB,OAajBC,IAAa,CAACC,MAAsB;AAC7C,MAAKA;AAGL,WAAO,QAAQA,EAAM,GAAG,KAAKA,EAAM,KAAK,KAAKA,EAAM,IAAI,KAAKA,EAAM,SAAS,CAAC;AAChF,GAcaC,IAAkB,CAACD,MAA2B;AACvD,QAAME,IAAW;AACjB,SAAOF,EAAM,SAAS,KAAKE,EAAS,KAAKF,CAAK;AAClD,GAcaG,IAAiB,CAACC,MAA2B;AACtD,QAAMF,IAAW,0BACXG,IAAUD,EAAI,MAAMF,CAAQ;AAClC,MAAI,CAACG;AACM,WAAA;AAAA,MACH,KAAK;AAAA,MACL,OAAO;AAAA,MACP,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAEE,QAAAC,IAAWD,EAAQ,CAAC;AACtB,SAAAC,EAAS,WAAW,IACb;AAAA,IACH,KAAK,SAAS,GAAGA,EAAS,CAAC,CAAC,GAAGA,EAAS,CAAC,CAAC,IAAI,EAAE;AAAA,IAChD,OAAO,SAAS,GAAGA,EAAS,CAAC,CAAC,GAAGA,EAAS,CAAC,CAAC,IAAI,EAAE;AAAA,IAClD,MAAM,SAAS,GAAGA,EAAS,CAAC,CAAC,GAAGA,EAAS,CAAC,CAAC,IAAI,EAAE;AAAA,IACjD,OAAO;AAAA,EACX,IAEG;AAAA,IACH,KAAK,SAASA,EAAS,MAAM,GAAG,CAAC,GAAG,EAAE;AAAA,IACtC,OAAO,SAASA,EAAS,MAAM,GAAG,CAAC,GAAG,EAAE;AAAA,IACxC,MAAM,SAASA,EAAS,MAAM,GAAG,CAAC,GAAG,EAAE;AAAA,IACvC,OAAO;AAAA,EACX;AACJ,GAcaC,IAAgB,CAACC,MAA0C;AACpE,QAAM,EAAE,KAAAC,GAAK,OAAAC,GAAO,MAAAC,EAAS,IAAAH;AACtB,SAAA,GAAGC,EAAI,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG,CAAC,GAAGC,EAAM,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG,CAAC,GAAGC,EAAK,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG,CAAC;AAC1H,GAcaC,IAAmB,CAACZ,GAAkBa,MAC3CA,MAAkB,QACX;AAAA,EACH,GAAGb;AAAA,EACH,MAAM,IAAIO,EAAcP,CAAK,CAAC;AAClC,IAEG;AAAA,EACH,GAAGA;AAAA,EACH,MAAM,QAAQA,EAAM,GAAG,KAAKA,EAAM,KAAK,KAAKA,EAAM,IAAI,KAAKA,EAAM,SAAS,CAAC;AAC/E,GAoBSc,IAA8B,CAACC,GAAeC,IAAc,GAAGC,IAAc,QAClFF,EAAM,WAAW,KAAK,SAASA,CAAK,IAAIC,IACjCA,IACA,SAASD,CAAK,IAAIE,IAClBA,IAEJ,SAASF,CAAK;"}
+{"version":3,"file":"fondue-components42.js","sources":["../src/components/ColorPicker/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ColorFormat, type RgbaColor } from './types';\n\nexport const DEFAULT_COLOR = { red: 255, green: 255, blue: 255, alpha: 1, name: '' };\nexport const DEFAULT_FORMAT = 'HEX';\n\n/**\n * Converts a color object to a CSS color string.\n * @param {RgbaColor} color - The color object to be converted.\n * @returns {string}\n * @example\n * colorToCss({ red: 255, green: 255, blue: 255, alpha: 1 }); // 'rgba(255, 255, 255, 1)'\n * @example\n * colorToCss({ red: 255, green: 87, blue: 51, alpha: 1 }); // 'rgba(255, 87, 51, 1)'\n * @example\n * colorToCss({ red: 0, green: 0, blue: 0, alpha: 0 }); // 'rgba(0, 0, 0, 0)'\n */\nexport const colorToCss = (color?: RgbaColor) => {\n    if (!color) {\n        return undefined;\n    }\n    return `rgba(${color.red}, ${color.green}, ${color.blue}, ${color.alpha ?? 1})`;\n};\n\n/**\n * Checks if a string is a valid hexadecimal color code. This function accepts\n * both three-digit and six-digit hex codes without the '#' symbol.\n * @param {string} color - The color code to be checked.\n * @returns {boolean}\n * @example\n * isValidHexColor('FFF'); // true\n * @example\n * isValidHexColor('FF5733'); // true\n * @example\n * isValidHexColor('XYZ'); // false\n */\nexport const isValidHexColor = (color: string): boolean => {\n    const hexRegex = /^([\\dA-Fa-f]{3}){1,2}$/;\n    return color.length > 2 && hexRegex.test(color);\n};\n\n/**\n * Converts a hexadecimal color code to an RGBA color object. This function accepts\n * both three-digit and six-digit hex codes without the '#' symbol.\n * @param {string} hex - The hex code, either 3 or 6 characters long. Characters should be from the set [0-9A-Fa-f].\n * @returns {RgbaColor}\n * @example\n * hexColorToRgba('FFF'); // { red: 255, green: 255, blue: 255, alpha: 1 }\n * @example\n * hexColorToRgba('FF5733'); // { red: 255, green: 87, blue: 51, alpha: 1 }\n * @example\n * hexColorToRgba('XYZ'); // { red: 0, green: 0, blue: 0, alpha: 0 }\n */\nexport const hexColorToRgba = (hex: string): RgbaColor => {\n    const hexRegex = /^([\\dA-Fa-f]{3}){1,2}$/;\n    const matches = hex.match(hexRegex);\n    if (!matches) {\n        return {\n            red: 0,\n            green: 0,\n            blue: 0,\n            alpha: 0,\n        };\n    }\n    const hexColor = matches[0];\n    if (hexColor.length === 3) {\n        return {\n            red: parseInt(`${hexColor[0]}${hexColor[0]}`, 16),\n            green: parseInt(`${hexColor[1]}${hexColor[1]}`, 16),\n            blue: parseInt(`${hexColor[2]}${hexColor[2]}`, 16),\n            alpha: 1,\n        };\n    }\n    return {\n        red: parseInt(hexColor.slice(0, 2), 16),\n        green: parseInt(hexColor.slice(2, 4), 16),\n        blue: parseInt(hexColor.slice(4, 6), 16),\n        alpha: 1,\n    };\n};\n\n/**\n * Converts an RGBA color object to a hexadecimal color code. This function returns a\n * six-digit hex code without the '#' symbol.\n * @param {RgbaColor} rgb - The RGBA color object.\n * @returns {string}\n * @example\n * rgbColorToHex({ red: 255, green: 255, blue: 255, alpha: 1 }); // '#FFFFFF'\n * @example\n * rgbColorToHex({ red: 255, green: 87, blue: 51, alpha: 1 }); // '#FF5733'\n * @example\n * rgbColorToHex({ red: 0, green: 0, blue: 0, alpha: 0 }); // '#000000'\n */\nexport const rgbColorToHex = (rgb: Omit<RgbaColor, 'alpha'>): string => {\n    const { red, green, blue } = rgb;\n    return `${red.toString(16).padStart(2, '0')}${green.toString(16).padStart(2, '0')}${blue.toString(16).padStart(2, '0')}`;\n};\n\n/**\n * Returns a color object with a name property based on the provided color and format.\n * @param {RgbaColor} color - The RGBA color object.\n * @param {ColorFormat} currentFormat - The current format of the color.\n * @returns {RgbaColor}\n * @example\n * getColorWithName({ red: 255, green: 255, blue: 255, alpha: 1 }, 'HEX'); // { red: 255, green: 255, blue: 255, alpha: 1, name: '#FFFFFF' }\n * @example\n * getColorWithName({ red: 255, green: 255, blue: 255, alpha: 1 }, 'RGBA'); // { red: 255, green: 255, blue: 255, alpha: 1, name: 'rgba(255, 255, 255, 1)' }\n * @example\n * getColorWithName({ red: 255, green: 87, blue: 51, alpha: 1 }, 'RGBA'); // { red: 255, green: 87, blue: 51, alpha: 1, name: 'rgba(255, 87, 51, 1)' }\n */\nexport const getColorWithName = (color: RgbaColor, currentFormat: ColorFormat) => {\n    if (currentFormat === 'HEX') {\n        return {\n            ...color,\n            name: `#${rgbColorToHex(color)}`,\n        };\n    }\n    return {\n        ...color,\n        name: `rgba(${color.red}, ${color.green}, ${color.blue}, ${color.alpha ?? 1})`,\n    };\n};\n\n/**\n * Returns a number between a minimum and maximum value, inclusive.\n * @param {string} value - The value to be limited.\n * @param {number} [min=0] - The minimum value (inclusive).\n * @param {number} [max=255] - The maximum value (inclusive).\n * @returns {number}\n * @example\n * getLimitedColorChannelValue('255'); // 255\n * @example\n * getLimitedColorChannelValue('100'); // 100\n * @example\n * getLimitedColorChannelValue('0'); // 0\n * @example\n * getLimitedColorChannelValue('500'); // 255\n * @example\n * getLimitedColorChannelValue('500', 0, 100); // 100\n */\nexport const getLimitedColorChannelValue = (value: string, min: number = 0, max: number = 255): number => {\n    if (value.length === 0 || parseInt(value) < min) {\n        return min;\n    } else if (parseInt(value) > max) {\n        return max;\n    }\n    return parseInt(value);\n};\n"],"names":["DEFAULT_COLOR","DEFAULT_FORMAT","colorToCss","color","isValidHexColor","hexRegex","hexColorToRgba","hex","matches","hexColor","rgbColorToHex","rgb","red","green","blue","getColorWithName","currentFormat","getLimitedColorChannelValue","value","min","max"],"mappings":"AAIa,MAAAA,IAAgB,EAAE,KAAK,KAAK,OAAO,KAAK,MAAM,KAAK,OAAO,GAAG,MAAM,GAAG,GACtEC,IAAiB,OAajBC,IAAa,CAACC,MAAsB;AAC7C,MAAKA;AAGL,WAAO,QAAQA,EAAM,GAAG,KAAKA,EAAM,KAAK,KAAKA,EAAM,IAAI,KAAKA,EAAM,SAAS,CAAC;AAChF,GAcaC,IAAkB,CAACD,MAA2B;AACvD,QAAME,IAAW;AACjB,SAAOF,EAAM,SAAS,KAAKE,EAAS,KAAKF,CAAK;AAClD,GAcaG,IAAiB,CAACC,MAA2B;AACtD,QAAMF,IAAW,0BACXG,IAAUD,EAAI,MAAMF,CAAQ;AAClC,MAAI,CAACG;AACM,WAAA;AAAA,MACH,KAAK;AAAA,MACL,OAAO;AAAA,MACP,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAEE,QAAAC,IAAWD,EAAQ,CAAC;AACtB,SAAAC,EAAS,WAAW,IACb;AAAA,IACH,KAAK,SAAS,GAAGA,EAAS,CAAC,CAAC,GAAGA,EAAS,CAAC,CAAC,IAAI,EAAE;AAAA,IAChD,OAAO,SAAS,GAAGA,EAAS,CAAC,CAAC,GAAGA,EAAS,CAAC,CAAC,IAAI,EAAE;AAAA,IAClD,MAAM,SAAS,GAAGA,EAAS,CAAC,CAAC,GAAGA,EAAS,CAAC,CAAC,IAAI,EAAE;AAAA,IACjD,OAAO;AAAA,EACX,IAEG;AAAA,IACH,KAAK,SAASA,EAAS,MAAM,GAAG,CAAC,GAAG,EAAE;AAAA,IACtC,OAAO,SAASA,EAAS,MAAM,GAAG,CAAC,GAAG,EAAE;AAAA,IACxC,MAAM,SAASA,EAAS,MAAM,GAAG,CAAC,GAAG,EAAE;AAAA,IACvC,OAAO;AAAA,EACX;AACJ,GAcaC,IAAgB,CAACC,MAA0C;AACpE,QAAM,EAAE,KAAAC,GAAK,OAAAC,GAAO,MAAAC,EAAS,IAAAH;AACtB,SAAA,GAAGC,EAAI,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG,CAAC,GAAGC,EAAM,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG,CAAC,GAAGC,EAAK,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG,CAAC;AAC1H,GAcaC,IAAmB,CAACZ,GAAkBa,MAC3CA,MAAkB,QACX;AAAA,EACH,GAAGb;AAAA,EACH,MAAM,IAAIO,EAAcP,CAAK,CAAC;AAClC,IAEG;AAAA,EACH,GAAGA;AAAA,EACH,MAAM,QAAQA,EAAM,GAAG,KAAKA,EAAM,KAAK,KAAKA,EAAM,IAAI,KAAKA,EAAM,SAAS,CAAC;AAC/E,GAoBSc,IAA8B,CAACC,GAAeC,IAAc,GAAGC,IAAc,QAClFF,EAAM,WAAW,KAAK,SAASA,CAAK,IAAIC,IACjCA,IACA,SAASD,CAAK,IAAIE,IAClBA,IAEJ,SAASF,CAAK;"}

package/dist/fondue-components54.js

@@ -1,10 +1,8 @@
-const t = "_root_t4a4t_8", o = "_spin_t4a4t_1", s = {
-  root: t,
-  spin: o
+const t = "_root_t4a4t_8", o = {
+  root: t
 };
 export {
-  s as default,
-  t as root,
-  o as spin
+  o as default,
+  t as root
 };
 //# sourceMappingURL=fondue-components54.js.map

package/dist/fondue-components54.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components54.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"fondue-components54.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/fondue-components57.js

@@ -1,11 +1,11 @@
-import { useMemo as f, useCallback as a, useState as v, useRef as S, useEffect as m } from "react";
+import { useMemo as f, useCallback as d, useState as v, useRef as S, useEffect as m } from "react";
 const U = ({
   prop: e,
   defaultProp: n,
   onChange: s = () => {
   }
 }) => {
-  const [o, c] = b({ defaultProp: n, onChange: s }), t = e !== void 0, d = t ? e : o, r = f(() => s, [s]), i = a(
+  const [o, c] = b({ defaultProp: n, onChange: s }), t = e !== void 0, i = t ? e : o, r = f(() => s, [s]), a = d(
     (l) => {
       if (t) {
         const u = typeof l == "function" ? l(e) : l;
@@ -15,7 +15,7 @@ const U = ({
     },
     [t, e, c, r]
   );
-  return [d, i];
+  return [i, a];
 }, b = ({ defaultProp: e, onChange: n }) => {
   const s = v(e), [o] = s, c = S(o), t = f(() => n, [n]);
   return m(() => {