@frontify/fondue-components 16.0.0 → 16.0.3

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(() => {

package/dist/fondue-components59.js

@@ -16,13 +16,13 @@ const N = ({
   status: s = "neutral",
   disabled: g,
   "data-test-id": i = "fondue-select-combobox",
-  alignMenu: M = "start",
-  side: y = "bottom",
-  id: F,
-  viewportCollisionPadding: L = "compact",
+  alignMenu: v = "start",
+  side: M = "bottom",
+  id: y,
+  viewportCollisionPadding: F = "compact",
   ...a
-}, P) => {
-  const { inputSlots: k, menuSlots: v, items: c, filterText: D, clearButton: f, getItemByValue: p, setFilterText: H } = _(S), [T, h] = W(!1), {
+}, L) => {
+  const { inputSlots: P, menuSlots: k, items: c, filterText: D, clearButton: f, getItemByValue: p, setFilterText: H } = _(S), [T, h] = W(!1), {
     getInputProps: u,
     getToggleButtonProps: V,
     getMenuProps: z,
@@ -37,7 +37,7 @@ const N = ({
     selectedItem: p(B),
     defaultSelectedItem: p(O),
     defaultHighlightedIndex: 0,
-    toggleButtonId: F,
+    toggleButtonId: y,
     labelId: "aria-labelledby" in a ? a["aria-labelledby"] : void 0,
     onSelectedItemChange: ({ selectedItem: e }) => {
       l == null || l((e == null ? void 0 : e.value) ?? null);
@@ -60,7 +60,7 @@ const N = ({
     e.target.dataset.showFocusRing = "false", n.current = !1, (r == null ? void 0 : r.label.toLocaleLowerCase()) !== d.toLocaleLowerCase() && b(), u().onBlur && ((I = (x = u()).onBlur) == null || I.call(x, e));
   };
   return /* @__PURE__ */ m(w.Root, { open: $, children: [
-    /* @__PURE__ */ t(w.Anchor, { asChild: !0, children: /* @__PURE__ */ m("div", { ref: P, className: o.root, "data-status": C ? "error" : s, children: [
+    /* @__PURE__ */ t(w.Anchor, { asChild: !0, children: /* @__PURE__ */ m("div", { ref: L, className: o.root, "data-status": C ? "error" : s, children: [
       /* @__PURE__ */ t(
         "input",
         {
@@ -80,7 +80,7 @@ const N = ({
           onBlur: E
         }
       ),
-      k,
+      P,
       f && /* @__PURE__ */ t(
         K,
         {
@@ -127,16 +127,16 @@ const N = ({
     /* @__PURE__ */ t(
       Z,
       {
-        align: M,
-        side: y,
+        align: v,
+        side: M,
         highlightedIndex: A,
         filterText: D,
         getMenuProps: z,
         getItemProps: j,
         selectedItem: r,
         hasInteractedSinceOpening: T,
-        viewportCollisionPadding: L,
-        children: v
+        viewportCollisionPadding: F,
+        children: k
       }
     )
   ] });

package/dist/fondue-components6.js

@@ -3,7 +3,7 @@ import { IconMinus as m, IconCheckMark as h } from "@frontify/fondue-icons";
 import * as o from "@radix-ui/react-checkbox";
 import { forwardRef as k } from "react";
 import { cn as p } from "./fondue-components33.js";
-import { checkboxStyles as l, checkboxIndicatorStyles as w } from "./fondue-components37.js";
+import { checkboxIndicatorStyles as l, checkboxStyles as w } from "./fondue-components37.js";
 const f = ({
   className: a,
   value: c,
@@ -17,11 +17,11 @@ const f = ({
     ref: n,
     checked: c,
     defaultChecked: d,
-    className: p(l(e), a),
+    className: p(w(e), a),
     onClick: i,
     "data-test-id": r,
     ...e,
-    children: /* @__PURE__ */ s(o.Indicator, { className: w, children: [
+    children: /* @__PURE__ */ s(o.Indicator, { className: l, children: [
       /* @__PURE__ */ t(
         m,
         {

package/dist/fondue-components61.js

@@ -8,16 +8,16 @@ import { recursiveMap as D, getSelectOptionValue as M } from "./fondue-component
 const T = ({
   highlightedIndex: p,
   getMenuProps: l,
-  getItemProps: u,
-  children: m,
+  getItemProps: m,
+  children: u,
   filterText: c,
   align: f,
   side: d,
   selectedItem: t,
   hasInteractedSinceOpening: h,
-  viewportCollisionPadding: P = "compact"
+  viewportCollisionPadding: v = "compact"
 }) => {
-  const v = (e) => {
+  const P = (e) => {
     e.preventDefault();
   }, O = {
     compact: 8,
@@ -28,8 +28,8 @@ const T = ({
     {
       align: f,
       side: d,
-      collisionPadding: O[P] + 8,
-      onOpenAutoFocus: v,
+      collisionPadding: O[v] + 8,
+      onOpenAutoFocus: P,
       className: n.portal,
       children: /* @__PURE__ */ r(
         "ul",
@@ -39,13 +39,13 @@ const T = ({
           "data-has-interacted": h ? "true" : "false",
           "data-test-id": "fondue-select-menu",
           children: D(
-            m,
+            u,
             (e, s) => {
               if (((o) => (
                 // @ts-expect-error - We are explicitly checking for ref
                 V(o) && o.ref !== void 0
               ))(e)) {
-                const o = M(e.props), a = u({
+                const o = M(e.props), a = m({
                   item: o,
                   index: s,
                   ...e.ref ? { ref: e.ref } : {}

package/dist/fondue-components64.js

@@ -1,28 +1,28 @@
 import { jsx as w } from "react/jsx-runtime";
 import { IconCross as x } from "@frontify/fondue-icons";
-import { useState as B, useMemo as i, Children as f, isValidElement as u, cloneElement as E, useCallback as F } from "react";
-import { ForwardedRefSelectItem as I } from "./fondue-components60.js";
+import { useState as B, useMemo as i, Children as f, isValidElement as a, cloneElement as E, useCallback as v } from "react";
+import { ForwardedRefSelectItem as F } from "./fondue-components60.js";
 import { ForwardedRefSelectSlot as c } from "./fondue-components62.js";
-import { getSelectOptionValue as R } from "./fondue-components78.js";
+import { getSelectOptionValue as I } from "./fondue-components78.js";
 const S = (r) => {
   const t = [];
   return f.forEach(r, (o) => {
-    if (u(o) && o.type === I)
-      t.push(R(o.props));
-    else if (u(o) && o.props.children) {
-      const a = S(o.props.children);
-      for (const l of a)
+    if (a(o) && o.type === F)
+      t.push(I(o.props));
+    else if (a(o) && o.props.children) {
+      const u = S(o.props.children);
+      for (const l of u)
         t.push(l);
     }
   }), t;
 }, z = (r) => {
-  const [t, o] = B(""), { inputSlots: a, menuSlots: l, itemValues: p, clearButton: V } = i(() => {
+  const [t, o] = B(""), { inputSlots: u, menuSlots: l, itemValues: p, clearButton: V } = i(() => {
     const s = [], n = [];
     let m;
     f.toArray(r).some(
-      (e) => u(e) && e.type === c
+      (e) => a(e) && e.type === c
     ) ? f.forEach(r, (e) => {
-      u(e) && e.type === c && (e.props.name === "menu" ? n.push(e.props.children) : e.props.name === "left" || e.props.name === "right" ? s.push(e) : e.props.name === "clear" && (e.props.children ? m = e : m = E(e, { children: /* @__PURE__ */ w(x, { size: 16 }) })));
+      a(e) && e.type === c && (e.props.name === "menu" ? n.push(e.props.children) : e.props.name === "left" || e.props.name === "right" ? s.push(e) : e.props.name === "clear" && (e.props.children ? m = e : m = E(e, { children: /* @__PURE__ */ w(x, { size: 16 }) })));
     }) : n.push(r);
     const g = S(n);
     return { inputSlots: s, menuSlots: n, itemValues: g, clearButton: m };
@@ -31,7 +31,7 @@ const S = (r) => {
       (s) => t === "" || s.label.toLowerCase().includes(t.toLowerCase())
     ),
     [p, t]
-  ), C = F(
+  ), C = v(
     (s) => s ? p.find((n) => n.value === s) : void 0,
     [p]
   );
@@ -39,7 +39,7 @@ const S = (r) => {
     items: y,
     menuSlots: l,
     filterText: t,
-    inputSlots: a,
+    inputSlots: u,
     clearButton: V,
     setFilterText: o,
     getItemByValue: C

package/dist/fondue-components66.js

@@ -1,16 +1,16 @@
-const m = "_root_hrjmg_5", t = "_small_hrjmg_33", _ = "_medium_hrjmg_37", o = "_large_hrjmg_41", r = "_thumb_hrjmg_55", s = {
-  root: m,
-  small: t,
-  medium: _,
+const t = "_root_1a79q_5", _ = "_small_1a79q_13", a = "_medium_1a79q_17", o = "_large_1a79q_21", m = "_thumb_1a79q_58", s = {
+  root: t,
+  small: _,
+  medium: a,
   large: o,
-  thumb: r
+  thumb: m
 };
 export {
   s as default,
   o as large,
-  _ as medium,
-  m as root,
-  t as small,
-  r as thumb
+  a as medium,
+  t as root,
+  _ as small,
+  m as thumb
 };
 //# sourceMappingURL=fondue-components66.js.map