@frontify/fondue-components 3.2.1 → 3.3.0

package/dist/fondue-components29.js

@@ -1,35 +1,24 @@
-import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as m } from "react";
-import { RgbaColorPicker as n } from "react-colorful";
-import t from "./fondue-components32.js";
-import { DEFAULT_COLOR as s } from "./fondue-components33.js";
-const i = ({
-  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(
-  n,
-  {
-    className: t.reactColorful,
-    color: {
-      r: a.red,
-      g: a.green,
-      b: a.blue,
-      a: a.alpha === void 0 ? 1 : a.alpha
+import { FOCUS_OUTLINE as t } from "./fondue-components58.js";
+import { sv as e } from "./fondue-components25.js";
+const s = e({
+  base: `tw-peer tw-relative tw-inline-flex tw-bg-base tw-text-white tw-shrink-0 tw-rounded tw-border tw-border-line-x-strong group-hover:tw-border-line-xx-strong hover:tw-border-line-xx-strong tw-transition-colors data-[state="checked"]:tw-border-transparent data-[state="indeterminate"]:tw-border-transparent disabled:tw-border-line-strong disabled:tw-bg-base disabled:tw-cursor-not-allowed data-[state="checked"]:disabled:tw-bg-box-disabled-strong ${t}`,
+  variants: {
+    size: {
+      default: "tw-size-4",
+      large: "tw-size-5"
     },
-    onChange: (e) => d({
-      red: e.r,
-      green: e.g,
-      blue: e.b,
-      alpha: e.a
-    })
+    emphasis: {
+      default: 'data-[state="checked"]:tw-bg-box-selected-strong data-[state="checked"]:hover:tw-bg-box-selected-strong-hover data-[state="checked"]:active:tw-bg-box-selected-strong-pressed data-[state="indeterminate"]:tw-bg-box-selected-strong data-[state="indeterminate"]:hover:tw-bg-box-selected-strong-hover data-[state="indeterminate"]:active:tw-bg-box-selected-strong-pressed ',
+      weak: 'data-[state="checked"]:tw-bg-box-neutral-strong data-[state="checked"]:hover:tw-bg-box-neutral-strong-hover data-[state="checked"]:active:tw-bg-box-neutral-strong-pressed data-[state="indeterminate"]:tw-bg-box-neutral-strong data-[state="indeterminate"]:hover:tw-bg-box-neutral-strong-hover data-[state="indeterminate"]:active:tw-bg-box-neutral-strong-pressed '
+    }
+  },
+  defaultVariants: {
+    size: "default",
+    emphasis: "default"
   }
-) });
-i.displayName = "ColorPicker.Gradient";
-const c = m(i);
+}), o = 'tw-group tw-absolute tw-inset-0 tw-inline-flex tw-items-center tw-justify-center tw-text-current tw-opacity-0 data-[state="checked"]:tw-opacity-100 data-[state="indeterminate"]:tw-opacity-100 tw-transition-opacity ';
 export {
-  i as ColorGradientInput,
-  c as ForwardedRefColorGradientInput
+  o as checkboxIndicatorStyles,
+  s as checkboxStyles
 };
 //# sourceMappingURL=fondue-components29.js.map

package/dist/fondue-components29.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components29.js","sources":["../src/components/ColorPicker/ColorGradientInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ForwardedRef, forwardRef } from 'react';\nimport { RgbaColorPicker } from 'react-colorful';\n\nimport styles from './styles/customColorPicker.module.scss';\nimport { type RgbaColor } from './types';\nimport { DEFAULT_COLOR } from './utils';\n\ntype ColorGradientInputProps = {\n    /**\n     * @ignore\n     * The active color in the color picker, passed down from the root component\n     */\n    currentColor?: RgbaColor;\n    /**\n     * @ignore\n     * Event handler called when the color changes, passed down from the root component\n     */\n    onColorChange?: (color: RgbaColor) => void;\n    /**\n     * The test id of the color picker gradient input\n     */\n    'data-test-id'?: string;\n};\n\nexport const ColorGradientInput = (\n    {\n        currentColor = DEFAULT_COLOR,\n        onColorChange = () => {},\n        'data-test-id': dataTestId = 'color-picker-input',\n    }: ColorGradientInputProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div className={styles.gradientInput} data-test-id={dataTestId} ref={forwardedRef}>\n            <RgbaColorPicker\n                className={styles.reactColorful}\n                color={{\n                    r: currentColor.red,\n                    g: currentColor.green,\n                    b: currentColor.blue,\n                    a: currentColor.alpha === undefined ? 1 : currentColor.alpha,\n                }}\n                onChange={(color) =>\n                    onColorChange({\n                        red: color.r,\n                        green: color.g,\n                        blue: color.b,\n                        alpha: color.a,\n                    })\n                }\n            />\n        </div>\n    );\n};\nColorGradientInput.displayName = 'ColorPicker.Gradient';\n\nexport const ForwardedRefColorGradientInput = forwardRef<HTMLDivElement, ColorGradientInputProps>(ColorGradientInput);\n"],"names":["ColorGradientInput","currentColor","DEFAULT_COLOR","onColorChange","dataTestId","forwardedRef","jsx","styles","RgbaColorPicker","color","ForwardedRefColorGradientInput","forwardRef"],"mappings":";;;;;AA0BO,MAAMA,IAAqB,CAC9B;AAAA,EACI,cAAAC,IAAeC;AAAA,EACf,eAAAC,IAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,gBAAgBC,IAAa;AACjC,GACAC,MAGI,gBAAAC,EAAC,SAAI,WAAWC,EAAO,eAAe,gBAAcH,GAAY,KAAKC,GACjE,UAAA,gBAAAC;AAAA,EAACE;AAAA,EAAA;AAAA,IACG,WAAWD,EAAO;AAAA,IAClB,OAAO;AAAA,MACH,GAAGN,EAAa;AAAA,MAChB,GAAGA,EAAa;AAAA,MAChB,GAAGA,EAAa;AAAA,MAChB,GAAGA,EAAa,UAAU,SAAY,IAAIA,EAAa;AAAA,IAC3D;AAAA,IACA,UAAU,CAACQ,MACPN,EAAc;AAAA,MACV,KAAKM,EAAM;AAAA,MACX,OAAOA,EAAM;AAAA,MACb,MAAMA,EAAM;AAAA,MACZ,OAAOA,EAAM;AAAA,IAAA,CAChB;AAAA,EAAA;AAGb,EAAA,CAAA;AAGRT,EAAmB,cAAc;AAEpB,MAAAU,IAAiCC,EAAoDX,CAAkB;"}
+{"version":3,"file":"fondue-components29.js","sources":["../src/components/Checkbox/styles/checkboxStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { FOCUS_OUTLINE } from '#/utilities/focusStyle';\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const checkboxStyles = sv({\n    base:\n        'tw-peer tw-relative tw-inline-flex tw-bg-base tw-text-white tw-shrink-0 tw-rounded tw-border tw-border-line-x-strong group-hover:tw-border-line-xx-strong hover:tw-border-line-xx-strong tw-transition-colors ' +\n        'data-[state=\"checked\"]:tw-border-transparent data-[state=\"indeterminate\"]:tw-border-transparent ' +\n        'disabled:tw-border-line-strong disabled:tw-bg-base disabled:tw-cursor-not-allowed data-[state=\"checked\"]:disabled:tw-bg-box-disabled-strong ' +\n        `${FOCUS_OUTLINE}`,\n    variants: {\n        size: {\n            default: 'tw-size-4',\n            large: 'tw-size-5',\n        },\n        emphasis: {\n            default:\n                'data-[state=\"checked\"]:tw-bg-box-selected-strong data-[state=\"checked\"]:hover:tw-bg-box-selected-strong-hover data-[state=\"checked\"]:active:tw-bg-box-selected-strong-pressed ' +\n                'data-[state=\"indeterminate\"]:tw-bg-box-selected-strong data-[state=\"indeterminate\"]:hover:tw-bg-box-selected-strong-hover data-[state=\"indeterminate\"]:active:tw-bg-box-selected-strong-pressed ',\n            weak:\n                'data-[state=\"checked\"]:tw-bg-box-neutral-strong data-[state=\"checked\"]:hover:tw-bg-box-neutral-strong-hover data-[state=\"checked\"]:active:tw-bg-box-neutral-strong-pressed ' +\n                'data-[state=\"indeterminate\"]:tw-bg-box-neutral-strong data-[state=\"indeterminate\"]:hover:tw-bg-box-neutral-strong-hover data-[state=\"indeterminate\"]:active:tw-bg-box-neutral-strong-pressed ',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n        emphasis: 'default',\n    },\n});\n\nexport const checkboxIndicatorStyles =\n    'tw-group tw-absolute tw-inset-0 tw-inline-flex tw-items-center tw-justify-center tw-text-current ' +\n    'tw-opacity-0 data-[state=\"checked\"]:tw-opacity-100 data-[state=\"indeterminate\"]:tw-opacity-100 tw-transition-opacity ';\n"],"names":["checkboxStyles","sv","FOCUS_OUTLINE","checkboxIndicatorStyles"],"mappings":";;AAKO,MAAMA,IAAiBC,EAAG;AAAA,EAC7B,MACI,6bAGGC,CAAa;AAAA,EACpB,UAAU;AAAA,IACN,MAAM;AAAA,MACF,SAAS;AAAA,MACT,OAAO;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACN,SACI;AAAA,MAEJ,MACI;AAAA,IAER;AAAA,EACJ;AAAA,EACA,iBAAiB;AAAA,IACb,MAAM;AAAA,IACN,UAAU;AAAA,EACd;AACJ,CAAC,GAEYC,IACT;"}

package/dist/fondue-components3.js

@@ -1,6 +1,6 @@
 import { jsx as r } from "react/jsx-runtime";
-import { propsToCssVariables as e } from "./fondue-components22.js";
-import i from "./fondue-components23.js";
+import { propsToCssVariables as e } from "./fondue-components23.js";
+import i from "./fondue-components24.js";
 const m = ({
   as: t = "div",
   "data-test-id": s = "fondue-box",

package/dist/fondue-components30.js

@@ -1,31 +1,35 @@
-import { jsxs as d, jsx as a, Fragment as m } from "react/jsx-runtime";
-import { IconDroplet as n, IconTrashBin as p, IconCaretDown as f } from "@frontify/fondue-icons";
-import { forwardRef as I, useId as N } from "react";
-import i from "./fondue-components57.js";
-import { colorToCss as h } from "./fondue-components33.js";
-const c = ({ currentColor: e, onClear: s, "data-test-id": t = "color-picker-input", ...r }, l) => {
-  const o = N();
-  return /* @__PURE__ */ d("div", { className: i.root, ...r, ref: l, "data-test-id": t, children: [
-    (e == null ? void 0 : e.red) !== void 0 ? /* @__PURE__ */ a(
-      "div",
-      {
-        "aria-describedby": o,
-        className: i.colorIndicator,
-        style: { backgroundColor: h(e) }
-      }
-    ) : /* @__PURE__ */ d(m, { children: [
-      /* @__PURE__ */ a(n, { size: 16 }),
-      /* @__PURE__ */ a("span", { children: "Select Color" })
-    ] }),
-    /* @__PURE__ */ a("span", { id: o, className: i.colorName, children: e == null ? void 0 : e.name }),
-    s && /* @__PURE__ */ a("button", { type: "button", "aria-label": "Clear color", onClick: s, className: i.clear, children: /* @__PURE__ */ a(p, { size: 16 }) }),
-    /* @__PURE__ */ a("div", { children: /* @__PURE__ */ a(f, { size: 16, className: i.caret }) })
-  ] });
-};
-c.displayName = "ColorPicker.Input";
-const x = I(c);
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { RgbaColorPicker as n } from "react-colorful";
+import t from "./fondue-components33.js";
+import { DEFAULT_COLOR as s } from "./fondue-components34.js";
+const i = ({
+  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(
+  n,
+  {
+    className: t.reactColorful,
+    color: {
+      r: a.red,
+      g: a.green,
+      b: a.blue,
+      a: a.alpha === void 0 ? 1 : a.alpha
+    },
+    onChange: (e) => d({
+      red: e.r,
+      green: e.g,
+      blue: e.b,
+      alpha: e.a
+    })
+  }
+) });
+i.displayName = "ColorPicker.Gradient";
+const c = m(i);
 export {
-  c as ColorPickerInput,
-  x as ForwardedRefColorPickerInput
+  i as ColorGradientInput,
+  c as ForwardedRefColorGradientInput
 };
 //# sourceMappingURL=fondue-components30.js.map

package/dist/fondue-components30.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components30.js","sources":["../src/components/ColorPicker/ColorPickerInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconDroplet, IconTrashBin } from '@frontify/fondue-icons';\nimport { type ForwardedRef, forwardRef, useId } 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    /**\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     * The test id of the color picker input\n     */\n    'data-test-id'?: string;\n} & CommonAriaAttrs;\n\nexport const ColorPickerInput = (\n    { currentColor, onClear, 'data-test-id': dataTestId = 'color-picker-input', ...props }: ColorPickerInputProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const colorNameId = useId();\n\n    return (\n        <div className={styles.root} {...props} ref={forwardedRef} data-test-id={dataTestId}>\n            {currentColor?.red !== undefined ? (\n                <div\n                    aria-describedby={colorNameId}\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 id={colorNameId} className={styles.colorName}>\n                {currentColor?.name}\n            </span>\n            {onClear && (\n                <button type=\"button\" aria-label=\"Clear color\" onClick={onClear} className={styles.clear}>\n                    <IconTrashBin size={16} />\n                </button>\n            )}\n            <div>\n                <IconCaretDown size={16} className={styles.caret} />\n            </div>\n        </div>\n    );\n};\nColorPickerInput.displayName = 'ColorPicker.Input';\n\nexport const ForwardedRefColorPickerInput = forwardRef<HTMLDivElement, ColorPickerInputProps>(ColorPickerInput);\n"],"names":["ColorPickerInput","currentColor","onClear","dataTestId","props","forwardedRef","colorNameId","useId","jsxs","styles","jsx","colorToCss","Fragment","IconDroplet","IconTrashBin","IconCaretDown","ForwardedRefColorPickerInput","forwardRef"],"mappings":";;;;;AA8Ba,MAAAA,IAAmB,CAC5B,EAAE,cAAAC,GAAc,SAAAC,GAAS,gBAAgBC,IAAa,sBAAsB,GAAGC,EAAM,GACrFC,MACC;AACD,QAAMC,IAAcC;AAGhB,SAAA,gBAAAC,EAAC,OAAI,EAAA,WAAWC,EAAO,MAAO,GAAGL,GAAO,KAAKC,GAAc,gBAAcF,GACpE,UAAA;AAAA,KAAAF,KAAA,gBAAAA,EAAc,SAAQ,SACnB,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,oBAAkBJ;AAAA,QAClB,WAAWG,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,IAGJ,gBAAAA,EAAC,UAAK,IAAIJ,GAAa,WAAWG,EAAO,WACpC,iCAAc,KACnB,CAAA;AAAA,IACCP,KACI,gBAAAQ,EAAA,UAAA,EAAO,MAAK,UAAS,cAAW,eAAc,SAASR,GAAS,WAAWO,EAAO,OAC/E,UAAA,gBAAAC,EAACI,GAAa,EAAA,MAAM,GAAI,CAAA,GAC5B;AAAA,IAEJ,gBAAAJ,EAAC,SACG,UAAC,gBAAAA,EAAAK,GAAA,EAAc,MAAM,IAAI,WAAWN,EAAO,MAAA,CAAO,EACtD,CAAA;AAAA,EACJ,EAAA,CAAA;AAER;AACAT,EAAiB,cAAc;AAElB,MAAAgB,IAA+BC,EAAkDjB,CAAgB;"}
+{"version":3,"file":"fondue-components30.js","sources":["../src/components/ColorPicker/ColorGradientInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ForwardedRef, forwardRef } from 'react';\nimport { RgbaColorPicker } from 'react-colorful';\n\nimport styles from './styles/customColorPicker.module.scss';\nimport { type RgbaColor } from './types';\nimport { DEFAULT_COLOR } from './utils';\n\ntype ColorGradientInputProps = {\n    /**\n     * @ignore\n     * The active color in the color picker, passed down from the root component\n     */\n    currentColor?: RgbaColor;\n    /**\n     * @ignore\n     * Event handler called when the color changes, passed down from the root component\n     */\n    onColorChange?: (color: RgbaColor) => void;\n    /**\n     * The test id of the color picker gradient input\n     */\n    'data-test-id'?: string;\n};\n\nexport const ColorGradientInput = (\n    {\n        currentColor = DEFAULT_COLOR,\n        onColorChange = () => {},\n        'data-test-id': dataTestId = 'color-picker-input',\n    }: ColorGradientInputProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div className={styles.gradientInput} data-test-id={dataTestId} ref={forwardedRef}>\n            <RgbaColorPicker\n                className={styles.reactColorful}\n                color={{\n                    r: currentColor.red,\n                    g: currentColor.green,\n                    b: currentColor.blue,\n                    a: currentColor.alpha === undefined ? 1 : currentColor.alpha,\n                }}\n                onChange={(color) =>\n                    onColorChange({\n                        red: color.r,\n                        green: color.g,\n                        blue: color.b,\n                        alpha: color.a,\n                    })\n                }\n            />\n        </div>\n    );\n};\nColorGradientInput.displayName = 'ColorPicker.Gradient';\n\nexport const ForwardedRefColorGradientInput = forwardRef<HTMLDivElement, ColorGradientInputProps>(ColorGradientInput);\n"],"names":["ColorGradientInput","currentColor","DEFAULT_COLOR","onColorChange","dataTestId","forwardedRef","jsx","styles","RgbaColorPicker","color","ForwardedRefColorGradientInput","forwardRef"],"mappings":";;;;;AA0BO,MAAMA,IAAqB,CAC9B;AAAA,EACI,cAAAC,IAAeC;AAAA,EACf,eAAAC,IAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,gBAAgBC,IAAa;AACjC,GACAC,MAGI,gBAAAC,EAAC,SAAI,WAAWC,EAAO,eAAe,gBAAcH,GAAY,KAAKC,GACjE,UAAA,gBAAAC;AAAA,EAACE;AAAA,EAAA;AAAA,IACG,WAAWD,EAAO;AAAA,IAClB,OAAO;AAAA,MACH,GAAGN,EAAa;AAAA,MAChB,GAAGA,EAAa;AAAA,MAChB,GAAGA,EAAa;AAAA,MAChB,GAAGA,EAAa,UAAU,SAAY,IAAIA,EAAa;AAAA,IAC3D;AAAA,IACA,UAAU,CAACQ,MACPN,EAAc;AAAA,MACV,KAAKM,EAAM;AAAA,MACX,OAAOA,EAAM;AAAA,MACb,MAAMA,EAAM;AAAA,MACZ,OAAOA,EAAM;AAAA,IAAA,CAChB;AAAA,EAAA;AAGb,EAAA,CAAA;AAGRT,EAAmB,cAAc;AAEpB,MAAAU,IAAiCC,EAAoDX,CAAkB;"}

package/dist/fondue-components31.js

@@ -1,133 +1,31 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import { forwardRef as b, useState as g, useEffect as R } from "react";
-import { Select as c } from "./fondue-components19.js";
-import { TextInput as r } from "./fondue-components20.js";
-import a from "./fondue-components32.js";
-import { rgbColorToHex as d, isValidHexColor as m, hexColorToRgba as I, getLimitedColorChannelValue as n, DEFAULT_COLOR as x, DEFAULT_FORMAT as S } from "./fondue-components33.js";
-const h = ({
-  currentColor: t = x,
-  onColorChange: i = () => {
-  },
-  currentFormat: s = S,
-  setCurrentFormat: v = () => {
-  },
-  "data-test-id": f = "color-picker-value-input"
-}, N) => {
-  const [u, p] = g(d(t));
-  return R(() => {
-    p(d(t));
-  }, [t]), /* @__PURE__ */ o("div", { className: a.inputs, "data-test-id": f, ref: N, children: [
-    /* @__PURE__ */ e("div", { className: a.colorFormatInput, children: /* @__PURE__ */ o(
-      c,
+import { jsxs as d, jsx as a, Fragment as m } from "react/jsx-runtime";
+import { IconDroplet as n, IconTrashBin as p, IconCaretDown as f } from "@frontify/fondue-icons";
+import { forwardRef as I, useId as N } from "react";
+import i from "./fondue-components59.js";
+import { colorToCss as h } from "./fondue-components34.js";
+const c = ({ currentColor: e, onClear: s, "data-test-id": t = "color-picker-input", ...r }, l) => {
+  const o = N();
+  return /* @__PURE__ */ d("div", { className: i.root, ...r, ref: l, "data-test-id": t, children: [
+    (e == null ? void 0 : e.red) !== void 0 ? /* @__PURE__ */ a(
+      "div",
       {
-        "data-test-id": "color-picker-select-format",
-        "aria-label": "Select a color format",
-        onSelect: (l) => {
-          v(l);
-        },
-        value: s,
-        children: [
-          /* @__PURE__ */ e(c.Item, { value: "HEX", children: "HEX" }),
-          /* @__PURE__ */ e(c.Item, { value: "RGBA", children: "RGBA" })
-        ]
+        "aria-describedby": o,
+        className: i.colorIndicator,
+        style: { backgroundColor: h(e) }
       }
-    ) }),
-    s === "HEX" ? /* @__PURE__ */ e(
-      r.Root,
-      {
-        "data-test-id": "color-picker-value-input-hex",
-        className: a.valueInput,
-        type: "text",
-        value: u,
-        status: m(u) ? "neutral" : "error",
-        onBlur: (l) => {
-          m(l.target.value) && i(I(l.target.value));
-        },
-        onChange: (l) => {
-          p(l.target.value);
-        },
-        "aria-label": "Hex color value",
-        children: /* @__PURE__ */ e(r.Slot, { name: "left", children: /* @__PURE__ */ e("span", { className: a.inputDecorator, children: "#" }) })
-      }
-    ) : /* @__PURE__ */ o("div", { className: a.colorChannelInputGroup, children: [
-      /* @__PURE__ */ e(
-        r.Root,
-        {
-          "data-test-id": "color-picker-value-input-red",
-          className: a.valueInput,
-          value: t.red,
-          type: "number",
-          onChange: (l) => {
-            i({
-              ...t,
-              red: n(l.target.value)
-            });
-          },
-          "aria-label": "Red Color Channel",
-          children: /* @__PURE__ */ e(r.Slot, { name: "left", children: /* @__PURE__ */ e("span", { className: a.inputDecorator, children: "R" }) })
-        }
-      ),
-      /* @__PURE__ */ e(
-        r.Root,
-        {
-          "data-test-id": "color-picker-value-input-green",
-          className: a.valueInput,
-          value: t.green,
-          type: "number",
-          onChange: (l) => {
-            i({
-              ...t,
-              green: n(l.target.value)
-            });
-          },
-          "aria-label": "Green Color Channel",
-          children: /* @__PURE__ */ e(r.Slot, { name: "left", children: /* @__PURE__ */ e("span", { className: a.inputDecorator, children: "G" }) })
-        }
-      ),
-      /* @__PURE__ */ e(
-        r.Root,
-        {
-          "data-test-id": "color-picker-value-input-blue",
-          className: a.valueInput,
-          value: t.blue,
-          type: "number",
-          onChange: (l) => {
-            i({
-              ...t,
-              blue: n(l.target.value)
-            });
-          },
-          "aria-label": "Blue Color Channel",
-          children: /* @__PURE__ */ e(r.Slot, { name: "left", children: /* @__PURE__ */ e("span", { className: a.inputDecorator, children: "B" }) })
-        }
-      )
+    ) : /* @__PURE__ */ d(m, { children: [
+      /* @__PURE__ */ a(n, { size: 16 }),
+      /* @__PURE__ */ a("span", { children: "Select Color" })
     ] }),
-    /* @__PURE__ */ e("div", { className: a.colorAlphaInput, children: /* @__PURE__ */ o(
-      r.Root,
-      {
-        "data-test-id": "color-picker-value-input-alpha",
-        className: a.valueInput,
-        value: t.alpha === void 0 ? 100 : Math.trunc(t.alpha * 100),
-        type: "number",
-        onChange: (l) => {
-          i({
-            ...t,
-            alpha: n(l.target.value, 0, 100) / 100
-          });
-        },
-        "aria-label": "Color Opacity",
-        children: [
-          /* @__PURE__ */ e(r.Slot, { name: "left", children: /* @__PURE__ */ e("span", { className: a.inputDecorator, children: "A" }) }),
-          /* @__PURE__ */ e(r.Slot, { name: "right", children: /* @__PURE__ */ e("span", { className: a.inputDecorator, children: "%" }) })
-        ]
-      }
-    ) })
+    /* @__PURE__ */ a("span", { id: o, className: i.colorName, children: e == null ? void 0 : e.name }),
+    s && /* @__PURE__ */ a("button", { type: "button", "aria-label": "Clear color", onClick: s, className: i.clear, children: /* @__PURE__ */ a(p, { size: 16 }) }),
+    /* @__PURE__ */ a("div", { children: /* @__PURE__ */ a(f, { size: 16, className: i.caret }) })
   ] });
 };
-h.displayName = "ColorPicker.Values";
-const E = b(h);
+c.displayName = "ColorPicker.Input";
+const x = I(c);
 export {
-  h as ColorValueInput,
-  E as ForwardedRefColorValueInput
+  c as ColorPickerInput,
+  x as ForwardedRefColorPickerInput
 };
 //# sourceMappingURL=fondue-components31.js.map

package/dist/fondue-components31.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components31.js","sources":["../src/components/ColorPicker/ColorValueInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ForwardedRef, forwardRef, useEffect, useState } from 'react';\n\nimport { Select } from '../Select/Select';\nimport { TextInput } from '../TextInput/TextInput';\n\nimport styles from './styles/customColorPicker.module.scss';\nimport { type RgbaColor } from './types';\nimport {\n    DEFAULT_COLOR,\n    DEFAULT_FORMAT,\n    getLimitedColorChannelValue,\n    hexColorToRgba,\n    isValidHexColor,\n    rgbColorToHex,\n} from './utils';\n\ntype ColorFormat = 'HEX' | 'RGBA';\n\ntype ColorValueInputProps = {\n    /**\n     * @ignore\n     * The active color in the color picker, passed down from the root component\n     */\n    currentColor?: RgbaColor;\n    /**\n     * @ignore\n     * Event handler called when the color changes, passed down from the root component\n     */\n    onColorChange?: (color: RgbaColor) => void;\n    /**\n     * @ignore\n     * The format to use for the color input, passed down from the root component\n     */\n    currentFormat?: ColorFormat;\n    /**\n     * @ignore\n     * The format to use for the color input, passed down from the root component\n     */\n    setCurrentFormat?: (format: ColorFormat) => void;\n    /**\n     * The test id of the color picker value input\n     */\n    'data-test-id'?: string;\n};\n\nexport const ColorValueInput = (\n    {\n        currentColor = DEFAULT_COLOR,\n        onColorChange = () => {},\n        currentFormat = DEFAULT_FORMAT,\n        setCurrentFormat = () => {},\n        'data-test-id': dataTestId = 'color-picker-value-input',\n    }: ColorValueInputProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const [hexColorValue, setHexColorValue] = useState<string>(rgbColorToHex(currentColor));\n\n    useEffect(() => {\n        setHexColorValue(rgbColorToHex(currentColor));\n    }, [currentColor]);\n\n    return (\n        <div className={styles.inputs} data-test-id={dataTestId} ref={forwardedRef}>\n            <div className={styles.colorFormatInput}>\n                <Select\n                    data-test-id=\"color-picker-select-format\"\n                    aria-label=\"Select a color format\"\n                    onSelect={(selectedValue) => {\n                        setCurrentFormat(selectedValue as ColorFormat);\n                    }}\n                    value={currentFormat}\n                >\n                    <Select.Item value=\"HEX\">HEX</Select.Item>\n                    <Select.Item value=\"RGBA\">RGBA</Select.Item>\n                </Select>\n            </div>\n            {currentFormat === 'HEX' ? (\n                <TextInput.Root\n                    data-test-id=\"color-picker-value-input-hex\"\n                    className={styles.valueInput}\n                    type=\"text\"\n                    value={hexColorValue}\n                    status={isValidHexColor(hexColorValue) ? 'neutral' : 'error'}\n                    onBlur={(event) => {\n                        if (isValidHexColor(event.target.value)) {\n                            onColorChange(hexColorToRgba(event.target.value));\n                        }\n                    }}\n                    onChange={(event) => {\n                        setHexColorValue(event.target.value);\n                    }}\n                    aria-label=\"Hex color value\"\n                >\n                    <TextInput.Slot name=\"left\">\n                        <span className={styles.inputDecorator}>#</span>\n                    </TextInput.Slot>\n                </TextInput.Root>\n            ) : (\n                <div className={styles.colorChannelInputGroup}>\n                    <TextInput.Root\n                        data-test-id=\"color-picker-value-input-red\"\n                        className={styles.valueInput}\n                        value={currentColor.red}\n                        type=\"number\"\n                        onChange={(event) => {\n                            onColorChange({\n                                ...currentColor,\n                                red: getLimitedColorChannelValue(event.target.value),\n                            });\n                        }}\n                        aria-label=\"Red Color Channel\"\n                    >\n                        <TextInput.Slot name=\"left\">\n                            <span className={styles.inputDecorator}>R</span>\n                        </TextInput.Slot>\n                    </TextInput.Root>\n                    <TextInput.Root\n                        data-test-id=\"color-picker-value-input-green\"\n                        className={styles.valueInput}\n                        value={currentColor.green}\n                        type=\"number\"\n                        onChange={(event) => {\n                            onColorChange({\n                                ...currentColor,\n                                green: getLimitedColorChannelValue(event.target.value),\n                            });\n                        }}\n                        aria-label=\"Green Color Channel\"\n                    >\n                        <TextInput.Slot name=\"left\">\n                            <span className={styles.inputDecorator}>G</span>\n                        </TextInput.Slot>\n                    </TextInput.Root>\n                    <TextInput.Root\n                        data-test-id=\"color-picker-value-input-blue\"\n                        className={styles.valueInput}\n                        value={currentColor.blue}\n                        type=\"number\"\n                        onChange={(event) => {\n                            onColorChange({\n                                ...currentColor,\n                                blue: getLimitedColorChannelValue(event.target.value),\n                            });\n                        }}\n                        aria-label=\"Blue Color Channel\"\n                    >\n                        <TextInput.Slot name=\"left\">\n                            <span className={styles.inputDecorator}>B</span>\n                        </TextInput.Slot>\n                    </TextInput.Root>\n                </div>\n            )}\n            <div className={styles.colorAlphaInput}>\n                <TextInput.Root\n                    data-test-id=\"color-picker-value-input-alpha\"\n                    className={styles.valueInput}\n                    value={currentColor.alpha === undefined ? 100 : Math.trunc(currentColor.alpha * 100)}\n                    type=\"number\"\n                    onChange={(event) => {\n                        onColorChange({\n                            ...currentColor,\n                            alpha: getLimitedColorChannelValue(event.target.value, 0, 100) / 100,\n                        });\n                    }}\n                    aria-label=\"Color Opacity\"\n                >\n                    <TextInput.Slot name=\"left\">\n                        <span className={styles.inputDecorator}>A</span>\n                    </TextInput.Slot>\n                    <TextInput.Slot name=\"right\">\n                        <span className={styles.inputDecorator}>%</span>\n                    </TextInput.Slot>\n                </TextInput.Root>\n            </div>\n        </div>\n    );\n};\nColorValueInput.displayName = 'ColorPicker.Values';\n\nexport const ForwardedRefColorValueInput = forwardRef<HTMLDivElement, ColorValueInputProps>(ColorValueInput);\n"],"names":["ColorValueInput","currentColor","DEFAULT_COLOR","onColorChange","currentFormat","DEFAULT_FORMAT","setCurrentFormat","dataTestId","forwardedRef","hexColorValue","setHexColorValue","useState","rgbColorToHex","useEffect","jsxs","styles","jsx","Select","selectedValue","TextInput","isValidHexColor","event","hexColorToRgba","getLimitedColorChannelValue","ForwardedRefColorValueInput","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fondue-components31.js","sources":["../src/components/ColorPicker/ColorPickerInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconDroplet, IconTrashBin } from '@frontify/fondue-icons';\nimport { type ForwardedRef, forwardRef, useId } 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    /**\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     * The test id of the color picker input\n     */\n    'data-test-id'?: string;\n} & CommonAriaAttrs;\n\nexport const ColorPickerInput = (\n    { currentColor, onClear, 'data-test-id': dataTestId = 'color-picker-input', ...props }: ColorPickerInputProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const colorNameId = useId();\n\n    return (\n        <div className={styles.root} {...props} ref={forwardedRef} data-test-id={dataTestId}>\n            {currentColor?.red !== undefined ? (\n                <div\n                    aria-describedby={colorNameId}\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 id={colorNameId} className={styles.colorName}>\n                {currentColor?.name}\n            </span>\n            {onClear && (\n                <button type=\"button\" aria-label=\"Clear color\" onClick={onClear} className={styles.clear}>\n                    <IconTrashBin size={16} />\n                </button>\n            )}\n            <div>\n                <IconCaretDown size={16} className={styles.caret} />\n            </div>\n        </div>\n    );\n};\nColorPickerInput.displayName = 'ColorPicker.Input';\n\nexport const ForwardedRefColorPickerInput = forwardRef<HTMLDivElement, ColorPickerInputProps>(ColorPickerInput);\n"],"names":["ColorPickerInput","currentColor","onClear","dataTestId","props","forwardedRef","colorNameId","useId","jsxs","styles","jsx","colorToCss","Fragment","IconDroplet","IconTrashBin","IconCaretDown","ForwardedRefColorPickerInput","forwardRef"],"mappings":";;;;;AA8Ba,MAAAA,IAAmB,CAC5B,EAAE,cAAAC,GAAc,SAAAC,GAAS,gBAAgBC,IAAa,sBAAsB,GAAGC,EAAM,GACrFC,MACC;AACD,QAAMC,IAAcC;AAGhB,SAAA,gBAAAC,EAAC,OAAI,EAAA,WAAWC,EAAO,MAAO,GAAGL,GAAO,KAAKC,GAAc,gBAAcF,GACpE,UAAA;AAAA,KAAAF,KAAA,gBAAAA,EAAc,SAAQ,SACnB,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,oBAAkBJ;AAAA,QAClB,WAAWG,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,IAGJ,gBAAAA,EAAC,UAAK,IAAIJ,GAAa,WAAWG,EAAO,WACpC,iCAAc,KACnB,CAAA;AAAA,IACCP,KACI,gBAAAQ,EAAA,UAAA,EAAO,MAAK,UAAS,cAAW,eAAc,SAASR,GAAS,WAAWO,EAAO,OAC/E,UAAA,gBAAAC,EAACI,GAAa,EAAA,MAAM,GAAI,CAAA,GAC5B;AAAA,IAEJ,gBAAAJ,EAAC,SACG,UAAC,gBAAAA,EAAAK,GAAA,EAAc,MAAM,IAAI,WAAWN,EAAO,MAAA,CAAO,EACtD,CAAA;AAAA,EACJ,EAAA,CAAA;AAER;AACAT,EAAiB,cAAc;AAElB,MAAAgB,IAA+BC,EAAkDjB,CAAgB;"}

package/dist/fondue-components32.js

@@ -1,24 +1,133 @@
-const o = "_root_v784d_5", t = "_inputs_v784d_12", n = "_colorFormatInput_v784d_23", r = "_colorAlphaInput_v784d_24", u = "_colorChannelInputGroup_v784d_28", p = "_inputDecorator_v784d_39", _ = "_gradientInput_v784d_43", l = "_reactColorful_v784d_46", c = "_valueInput_v784d_50", a = {
-  root: o,
-  inputs: t,
-  colorFormatInput: n,
-  colorAlphaInput: r,
-  colorChannelInputGroup: u,
-  inputDecorator: p,
-  gradientInput: _,
-  reactColorful: l,
-  valueInput: c
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { forwardRef as b, useState as g, useEffect as R } from "react";
+import { Select as c } from "./fondue-components18.js";
+import { TextInput as r } from "./fondue-components21.js";
+import a from "./fondue-components33.js";
+import { rgbColorToHex as d, isValidHexColor as m, hexColorToRgba as I, getLimitedColorChannelValue as n, DEFAULT_COLOR as x, DEFAULT_FORMAT as S } from "./fondue-components34.js";
+const h = ({
+  currentColor: t = x,
+  onColorChange: i = () => {
+  },
+  currentFormat: s = S,
+  setCurrentFormat: v = () => {
+  },
+  "data-test-id": f = "color-picker-value-input"
+}, N) => {
+  const [u, p] = g(d(t));
+  return R(() => {
+    p(d(t));
+  }, [t]), /* @__PURE__ */ o("div", { className: a.inputs, "data-test-id": f, ref: N, children: [
+    /* @__PURE__ */ e("div", { className: a.colorFormatInput, children: /* @__PURE__ */ o(
+      c,
+      {
+        "data-test-id": "color-picker-select-format",
+        "aria-label": "Select a color format",
+        onSelect: (l) => {
+          v(l);
+        },
+        value: s,
+        children: [
+          /* @__PURE__ */ e(c.Item, { value: "HEX", children: "HEX" }),
+          /* @__PURE__ */ e(c.Item, { value: "RGBA", children: "RGBA" })
+        ]
+      }
+    ) }),
+    s === "HEX" ? /* @__PURE__ */ e(
+      r.Root,
+      {
+        "data-test-id": "color-picker-value-input-hex",
+        className: a.valueInput,
+        type: "text",
+        value: u,
+        status: m(u) ? "neutral" : "error",
+        onBlur: (l) => {
+          m(l.target.value) && i(I(l.target.value));
+        },
+        onChange: (l) => {
+          p(l.target.value);
+        },
+        "aria-label": "Hex color value",
+        children: /* @__PURE__ */ e(r.Slot, { name: "left", children: /* @__PURE__ */ e("span", { className: a.inputDecorator, children: "#" }) })
+      }
+    ) : /* @__PURE__ */ o("div", { className: a.colorChannelInputGroup, children: [
+      /* @__PURE__ */ e(
+        r.Root,
+        {
+          "data-test-id": "color-picker-value-input-red",
+          className: a.valueInput,
+          value: t.red,
+          type: "number",
+          onChange: (l) => {
+            i({
+              ...t,
+              red: n(l.target.value)
+            });
+          },
+          "aria-label": "Red Color Channel",
+          children: /* @__PURE__ */ e(r.Slot, { name: "left", children: /* @__PURE__ */ e("span", { className: a.inputDecorator, children: "R" }) })
+        }
+      ),
+      /* @__PURE__ */ e(
+        r.Root,
+        {
+          "data-test-id": "color-picker-value-input-green",
+          className: a.valueInput,
+          value: t.green,
+          type: "number",
+          onChange: (l) => {
+            i({
+              ...t,
+              green: n(l.target.value)
+            });
+          },
+          "aria-label": "Green Color Channel",
+          children: /* @__PURE__ */ e(r.Slot, { name: "left", children: /* @__PURE__ */ e("span", { className: a.inputDecorator, children: "G" }) })
+        }
+      ),
+      /* @__PURE__ */ e(
+        r.Root,
+        {
+          "data-test-id": "color-picker-value-input-blue",
+          className: a.valueInput,
+          value: t.blue,
+          type: "number",
+          onChange: (l) => {
+            i({
+              ...t,
+              blue: n(l.target.value)
+            });
+          },
+          "aria-label": "Blue Color Channel",
+          children: /* @__PURE__ */ e(r.Slot, { name: "left", children: /* @__PURE__ */ e("span", { className: a.inputDecorator, children: "B" }) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e("div", { className: a.colorAlphaInput, children: /* @__PURE__ */ o(
+      r.Root,
+      {
+        "data-test-id": "color-picker-value-input-alpha",
+        className: a.valueInput,
+        value: t.alpha === void 0 ? 100 : Math.trunc(t.alpha * 100),
+        type: "number",
+        onChange: (l) => {
+          i({
+            ...t,
+            alpha: n(l.target.value, 0, 100) / 100
+          });
+        },
+        "aria-label": "Color Opacity",
+        children: [
+          /* @__PURE__ */ e(r.Slot, { name: "left", children: /* @__PURE__ */ e("span", { className: a.inputDecorator, children: "A" }) }),
+          /* @__PURE__ */ e(r.Slot, { name: "right", children: /* @__PURE__ */ e("span", { className: a.inputDecorator, children: "%" }) })
+        ]
+      }
+    ) })
+  ] });
 };
+h.displayName = "ColorPicker.Values";
+const E = b(h);
 export {
-  r as colorAlphaInput,
-  u as colorChannelInputGroup,
-  n as colorFormatInput,
-  a as default,
-  _ as gradientInput,
-  p as inputDecorator,
-  t as inputs,
-  l as reactColorful,
-  o as root,
-  c as valueInput
+  h as ColorValueInput,
+  E as ForwardedRefColorValueInput
 };
 //# sourceMappingURL=fondue-components32.js.map

package/dist/fondue-components32.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components32.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
+{"version":3,"file":"fondue-components32.js","sources":["../src/components/ColorPicker/ColorValueInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ForwardedRef, forwardRef, useEffect, useState } from 'react';\n\nimport { Select } from '../Select/Select';\nimport { TextInput } from '../TextInput/TextInput';\n\nimport styles from './styles/customColorPicker.module.scss';\nimport { type RgbaColor } from './types';\nimport {\n    DEFAULT_COLOR,\n    DEFAULT_FORMAT,\n    getLimitedColorChannelValue,\n    hexColorToRgba,\n    isValidHexColor,\n    rgbColorToHex,\n} from './utils';\n\ntype ColorFormat = 'HEX' | 'RGBA';\n\ntype ColorValueInputProps = {\n    /**\n     * @ignore\n     * The active color in the color picker, passed down from the root component\n     */\n    currentColor?: RgbaColor;\n    /**\n     * @ignore\n     * Event handler called when the color changes, passed down from the root component\n     */\n    onColorChange?: (color: RgbaColor) => void;\n    /**\n     * @ignore\n     * The format to use for the color input, passed down from the root component\n     */\n    currentFormat?: ColorFormat;\n    /**\n     * @ignore\n     * The format to use for the color input, passed down from the root component\n     */\n    setCurrentFormat?: (format: ColorFormat) => void;\n    /**\n     * The test id of the color picker value input\n     */\n    'data-test-id'?: string;\n};\n\nexport const ColorValueInput = (\n    {\n        currentColor = DEFAULT_COLOR,\n        onColorChange = () => {},\n        currentFormat = DEFAULT_FORMAT,\n        setCurrentFormat = () => {},\n        'data-test-id': dataTestId = 'color-picker-value-input',\n    }: ColorValueInputProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const [hexColorValue, setHexColorValue] = useState<string>(rgbColorToHex(currentColor));\n\n    useEffect(() => {\n        setHexColorValue(rgbColorToHex(currentColor));\n    }, [currentColor]);\n\n    return (\n        <div className={styles.inputs} data-test-id={dataTestId} ref={forwardedRef}>\n            <div className={styles.colorFormatInput}>\n                <Select\n                    data-test-id=\"color-picker-select-format\"\n                    aria-label=\"Select a color format\"\n                    onSelect={(selectedValue) => {\n                        setCurrentFormat(selectedValue as ColorFormat);\n                    }}\n                    value={currentFormat}\n                >\n                    <Select.Item value=\"HEX\">HEX</Select.Item>\n                    <Select.Item value=\"RGBA\">RGBA</Select.Item>\n                </Select>\n            </div>\n            {currentFormat === 'HEX' ? (\n                <TextInput.Root\n                    data-test-id=\"color-picker-value-input-hex\"\n                    className={styles.valueInput}\n                    type=\"text\"\n                    value={hexColorValue}\n                    status={isValidHexColor(hexColorValue) ? 'neutral' : 'error'}\n                    onBlur={(event) => {\n                        if (isValidHexColor(event.target.value)) {\n                            onColorChange(hexColorToRgba(event.target.value));\n                        }\n                    }}\n                    onChange={(event) => {\n                        setHexColorValue(event.target.value);\n                    }}\n                    aria-label=\"Hex color value\"\n                >\n                    <TextInput.Slot name=\"left\">\n                        <span className={styles.inputDecorator}>#</span>\n                    </TextInput.Slot>\n                </TextInput.Root>\n            ) : (\n                <div className={styles.colorChannelInputGroup}>\n                    <TextInput.Root\n                        data-test-id=\"color-picker-value-input-red\"\n                        className={styles.valueInput}\n                        value={currentColor.red}\n                        type=\"number\"\n                        onChange={(event) => {\n                            onColorChange({\n                                ...currentColor,\n                                red: getLimitedColorChannelValue(event.target.value),\n                            });\n                        }}\n                        aria-label=\"Red Color Channel\"\n                    >\n                        <TextInput.Slot name=\"left\">\n                            <span className={styles.inputDecorator}>R</span>\n                        </TextInput.Slot>\n                    </TextInput.Root>\n                    <TextInput.Root\n                        data-test-id=\"color-picker-value-input-green\"\n                        className={styles.valueInput}\n                        value={currentColor.green}\n                        type=\"number\"\n                        onChange={(event) => {\n                            onColorChange({\n                                ...currentColor,\n                                green: getLimitedColorChannelValue(event.target.value),\n                            });\n                        }}\n                        aria-label=\"Green Color Channel\"\n                    >\n                        <TextInput.Slot name=\"left\">\n                            <span className={styles.inputDecorator}>G</span>\n                        </TextInput.Slot>\n                    </TextInput.Root>\n                    <TextInput.Root\n                        data-test-id=\"color-picker-value-input-blue\"\n                        className={styles.valueInput}\n                        value={currentColor.blue}\n                        type=\"number\"\n                        onChange={(event) => {\n                            onColorChange({\n                                ...currentColor,\n                                blue: getLimitedColorChannelValue(event.target.value),\n                            });\n                        }}\n                        aria-label=\"Blue Color Channel\"\n                    >\n                        <TextInput.Slot name=\"left\">\n                            <span className={styles.inputDecorator}>B</span>\n                        </TextInput.Slot>\n                    </TextInput.Root>\n                </div>\n            )}\n            <div className={styles.colorAlphaInput}>\n                <TextInput.Root\n                    data-test-id=\"color-picker-value-input-alpha\"\n                    className={styles.valueInput}\n                    value={currentColor.alpha === undefined ? 100 : Math.trunc(currentColor.alpha * 100)}\n                    type=\"number\"\n                    onChange={(event) => {\n                        onColorChange({\n                            ...currentColor,\n                            alpha: getLimitedColorChannelValue(event.target.value, 0, 100) / 100,\n                        });\n                    }}\n                    aria-label=\"Color Opacity\"\n                >\n                    <TextInput.Slot name=\"left\">\n                        <span className={styles.inputDecorator}>A</span>\n                    </TextInput.Slot>\n                    <TextInput.Slot name=\"right\">\n                        <span className={styles.inputDecorator}>%</span>\n                    </TextInput.Slot>\n                </TextInput.Root>\n            </div>\n        </div>\n    );\n};\nColorValueInput.displayName = 'ColorPicker.Values';\n\nexport const ForwardedRefColorValueInput = forwardRef<HTMLDivElement, ColorValueInputProps>(ColorValueInput);\n"],"names":["ColorValueInput","currentColor","DEFAULT_COLOR","onColorChange","currentFormat","DEFAULT_FORMAT","setCurrentFormat","dataTestId","forwardedRef","hexColorValue","setHexColorValue","useState","rgbColorToHex","useEffect","jsxs","styles","jsx","Select","selectedValue","TextInput","isValidHexColor","event","hexColorToRgba","getLimitedColorChannelValue","ForwardedRefColorValueInput","forwardRef"],"mappings":"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"}

package/dist/fondue-components33.js

@@ -1,48 +1,24 @@
-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})`;
-}, p = (e) => {
-  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 = n[0];
-  return t.length === 3 ? {
-    red: parseInt(`${t[0]}${t[0]}`, 16),
-    green: parseInt(`${t[1]}${t[1]}`, 16),
-    blue: parseInt(`${t[2]}${t[2]}`, 16),
-    alpha: 1
-  } : {
-    red: parseInt(t.slice(0, 2), 16),
-    green: parseInt(t.slice(2, 4), 16),
-    blue: parseInt(t.slice(4, 6), 16),
-    alpha: 1
-  };
-}, a = (e) => {
-  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})`
-}, u = (e, r = 0, n = 255) => e.length === 0 || parseInt(e) < r ? r : parseInt(e) > n ? n : parseInt(e);
+const o = "_root_v784d_5", t = "_inputs_v784d_12", n = "_colorFormatInput_v784d_23", r = "_colorAlphaInput_v784d_24", u = "_colorChannelInputGroup_v784d_28", p = "_inputDecorator_v784d_39", _ = "_gradientInput_v784d_43", l = "_reactColorful_v784d_46", c = "_valueInput_v784d_50", a = {
+  root: o,
+  inputs: t,
+  colorFormatInput: n,
+  colorAlphaInput: r,
+  colorChannelInputGroup: u,
+  inputDecorator: p,
+  gradientInput: _,
+  reactColorful: l,
+  valueInput: c
+};
 export {
-  s as DEFAULT_COLOR,
-  g as DEFAULT_FORMAT,
-  $ as colorToCss,
-  i as getColorWithName,
-  u as getLimitedColorChannelValue,
-  h as hexColorToRgba,
-  p as isValidHexColor,
-  a as rgbColorToHex
+  r as colorAlphaInput,
+  u as colorChannelInputGroup,
+  n as colorFormatInput,
+  a as default,
+  _ as gradientInput,
+  p as inputDecorator,
+  t as inputs,
+  l as reactColorful,
+  o as root,
+  c as valueInput
 };
 //# sourceMappingURL=fondue-components33.js.map