@frontify/fondue-components 28.0.0 → 29.0.0

package/dist/fondue-components44.js

@@ -1,8 +1,12 @@
-const o = "_root_f9dx4_6", t = {
-  root: o
+const s = "_root_xdptq_3", t = "_inner_xdptq_30", o = "_dismiss_xdptq_175", n = {
+  root: s,
+  inner: t,
+  dismiss: o
 };
 export {
-  t as default,
-  o as root
+  n as default,
+  o as dismiss,
+  t as inner,
+  s as root
 };
 //# sourceMappingURL=fondue-components44.js.map

package/dist/fondue-components44.js.map

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

package/dist/fondue-components45.js

@@ -1,8 +1,44 @@
-const o = "_root_ebauq_5", t = {
-  root: o
-};
+const g = (o) => o.startsWith("aria-") || o === "role", m = {
+  m: "margin",
+  mx: "margin-x",
+  my: "margin-y",
+  mt: "margin-top",
+  mr: "margin-right",
+  mb: "margin-bottom",
+  ml: "margin-left",
+  p: "padding",
+  px: "padding-x",
+  py: "padding-y",
+  pt: "padding-top",
+  pr: "padding-right",
+  pb: "padding-bottom",
+  pl: "padding-left",
+  direction: "flex-direction",
+  align: "align-items",
+  wrap: "flex-wrap",
+  columns: "grid-template-columns",
+  rows: "grid-template-rows"
+}, d = {
+  overflow: ["overflow-x", "overflow-y"]
+}, a = (o, t) => o === "columns" || o === "rows" ? typeof t == "number" ? `repeat(${t}, 1fr)` : t : typeof t == "number" ? `${t * 0.25}rem` : t, l = (o, t = {}) => Object.entries(o).reduce((n, [r, i]) => {
+  if (!(r in d))
+    return [...n, [r, i]];
+  n.push([r, i]);
+  for (const e of d[r] ?? [])
+    n.push([e, i]);
+  return n;
+}, []).reduce((n, [r, i]) => {
+  if (g(r))
+    return n;
+  const e = r in t ? t[r] : r in m ? m[r] : r, p = e == null ? void 0 : e.replaceAll(/([\da-z]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+  if (typeof i == "object")
+    for (const [f, s] of Object.entries(i))
+      s !== void 0 && (n[`--${f}-${p}`] = a(r, s));
+  else
+    n[`--${p}`] = a(r, i);
+  return n;
+}, {});
 export {
-  t as default,
-  o as root
+  l as propsToCssVariables
 };
 //# sourceMappingURL=fondue-components45.js.map

package/dist/fondue-components45.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components45.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
+{"version":3,"file":"fondue-components45.js","sources":["../src/helpers/propsToCssVariables.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type CSSProperties } from 'react';\n\nimport { type Breakpoint } from './layout';\n\nconst isAriaProp = (key: string): boolean => {\n    return key.startsWith('aria-') || key === 'role';\n};\n\nconst abbreviationToCssProperty: Record<string, string> = {\n    m: 'margin',\n    mx: 'margin-x',\n    my: 'margin-y',\n    mt: 'margin-top',\n    mr: 'margin-right',\n    mb: 'margin-bottom',\n    ml: 'margin-left',\n    p: 'padding',\n    px: 'padding-x',\n    py: 'padding-y',\n    pt: 'padding-top',\n    pr: 'padding-right',\n    pb: 'padding-bottom',\n    pl: 'padding-left',\n    direction: 'flex-direction',\n    align: 'align-items',\n    wrap: 'flex-wrap',\n    columns: 'grid-template-columns',\n    rows: 'grid-template-rows',\n};\n\nconst explodeProps: Record<string, string[]> = {\n    overflow: ['overflow-x', 'overflow-y'],\n};\n\nconst transformValueBasedOnKey = (key: string, value: string | number): string | number => {\n    if (key === 'columns' || key === 'rows') {\n        if (typeof value === 'number') {\n            return `repeat(${value}, 1fr)`;\n        }\n        return value;\n    }\n\n    // Spacing tokens\n    if (typeof value === 'number') {\n        return `${value * 0.25}rem`;\n    }\n\n    return value;\n};\n\nexport const propsToCssVariables = (\n    props: Record<string, string | number | boolean | { [key in Breakpoint]?: string | number | boolean }>,\n    extraAbbreviationToCssProperty: Record<string, string> = {},\n): CSSProperties => {\n    return Object.entries(props)\n        .reduce<[keyof typeof props, (typeof props)[keyof typeof props]][]>((acc, [key, value]) => {\n            if (!(key in explodeProps)) {\n                return [...acc, [key, value]];\n            }\n\n            acc.push([key, value]);\n            for (const newKey of explodeProps[key] ?? []) {\n                acc.push([newKey, value]);\n            }\n\n            return acc;\n        }, [])\n        .reduce<CSSProperties>((acc, [key, value]) => {\n            if (isAriaProp(key)) {\n                return acc;\n            }\n\n            const cssProperty =\n                key in extraAbbreviationToCssProperty\n                    ? extraAbbreviationToCssProperty[key]\n                    : key in abbreviationToCssProperty\n                      ? abbreviationToCssProperty[key]\n                      : key;\n            // The lookahead is necessary to split camelCase boundaries; disabling false-positive lint warning\n            const cssPropertyKebabCase = cssProperty?.replaceAll(/([\\da-z]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();\n\n            if (typeof value === 'object') {\n                for (const [breakpoint, breakpointValue] of Object.entries(value)) {\n                    if (breakpointValue !== undefined) {\n                        // @ts-expect-error CSS variables are not typed into `CSSProperties`\n                        acc[`--${breakpoint}-${cssPropertyKebabCase}`] = transformValueBasedOnKey(key, breakpointValue);\n                    }\n                }\n            } else {\n                // @ts-expect-error CSS variables are not typed into `CSSProperties`\n                acc[`--${cssPropertyKebabCase}`] = transformValueBasedOnKey(key, value);\n            }\n            return acc;\n        }, {});\n};\n"],"names":["isAriaProp","key","abbreviationToCssProperty","explodeProps","transformValueBasedOnKey","value","propsToCssVariables","props","extraAbbreviationToCssProperty","acc","newKey","cssProperty","cssPropertyKebabCase","breakpoint","breakpointValue"],"mappings":"AAMA,MAAMA,IAAa,CAACC,MACTA,EAAI,WAAW,OAAO,KAAKA,MAAQ,QAGxCC,IAAoD;AAAA,EACtD,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM;AAAA,EACN,SAAS;AAAA,EACT,MAAM;AACV,GAEMC,IAAyC;AAAA,EAC3C,UAAU,CAAC,cAAc,YAAY;AACzC,GAEMC,IAA2B,CAACH,GAAaI,MACvCJ,MAAQ,aAAaA,MAAQ,SACzB,OAAOI,KAAU,WACV,UAAUA,CAAK,WAEnBA,IAIP,OAAOA,KAAU,WACV,GAAGA,IAAQ,IAAI,QAGnBA,GAGEC,IAAsB,CAC/BC,GACAC,IAAyD,OAElD,OAAO,QAAQD,CAAK,EACtB,OAAmE,CAACE,GAAK,CAACR,GAAKI,CAAK,MAAM;AACvF,MAAI,EAAEJ,KAAOE;AACT,WAAO,CAAC,GAAGM,GAAK,CAACR,GAAKI,CAAK,CAAC;AAGhC,EAAAI,EAAI,KAAK,CAACR,GAAKI,CAAK,CAAC;AACrB,aAAWK,KAAUP,EAAaF,CAAG,KAAK,CAAA;AACtC,IAAAQ,EAAI,KAAK,CAACC,GAAQL,CAAK,CAAC;AAG5B,SAAOI;AACX,GAAG,CAAA,CAAE,EACJ,OAAsB,CAACA,GAAK,CAACR,GAAKI,CAAK,MAAM;AAC1C,MAAIL,EAAWC,CAAG;AACd,WAAOQ;AAGX,QAAME,IACFV,KAAOO,IACDA,EAA+BP,CAAG,IAClCA,KAAOC,IACLA,EAA0BD,CAAG,IAC7BA,GAENW,IAAuBD,KAAA,gBAAAA,EAAa,WAAW,+BAA+B,SAAS;AAE7F,MAAI,OAAON,KAAU;AACjB,eAAW,CAACQ,GAAYC,CAAe,KAAK,OAAO,QAAQT,CAAK;AAC5D,MAAIS,MAAoB,WAEpBL,EAAI,KAAKI,CAAU,IAAID,CAAoB,EAAE,IAAIR,EAAyBH,GAAKa,CAAe;AAAA;AAKtG,IAAAL,EAAI,KAAKG,CAAoB,EAAE,IAAIR,EAAyBH,GAAKI,CAAK;AAE1E,SAAOI;AACX,GAAG,CAAA,CAAE;"}

package/dist/fondue-components46.js

@@ -1,16 +1,8 @@
-const o = "_root_1fezf_5", n = "_indicator_1fezf_88", e = "_icon_1fezf_113", c = "_iconIndeterminate_1fezf_129", t = "_iconChecked_1fezf_133", i = {
-  root: o,
-  indicator: n,
-  icon: e,
-  iconIndeterminate: c,
-  iconChecked: t
+const o = "_root_f9dx4_6", t = {
+  root: o
 };
 export {
-  i as default,
-  e as icon,
-  t as iconChecked,
-  c as iconIndeterminate,
-  n as indicator,
+  t as default,
   o as root
 };
 //# sourceMappingURL=fondue-components46.js.map

package/dist/fondue-components46.js.map

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

package/dist/fondue-components47.js

@@ -1,35 +1,8 @@
-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-components50.js";
-import { DEFAULT_COLOR as s } from "./fondue-components51.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);
+const o = "_root_ebauq_5", t = {
+  root: o
+};
 export {
-  i as ColorGradientInput,
-  c as ForwardedRefColorGradientInput
+  t as default,
+  o as root
 };
 //# sourceMappingURL=fondue-components47.js.map

package/dist/fondue-components47.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components47.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,IAAA;AAAA,IAE3D,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;AAAA,GAGb;AAGRT,EAAmB,cAAc;AAE1B,MAAMU,IAAiCC,EAAoDX,CAAkB;"}
+{"version":3,"file":"fondue-components47.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/fondue-components48.js

@@ -1,57 +1,16 @@
-import { jsxs as t, jsx as s, Fragment as N } from "react/jsx-runtime";
-import { IconDroplet as I, IconCross as k, IconCaretDown as v } from "@frontify/fondue-icons";
-import { forwardRef as P } from "react";
-import { useTranslation as w } from "./fondue-components40.js";
-import { Button as y } from "./fondue-components6.js";
-import a from "./fondue-components109.js";
-import { getColorWithName as z, colorToCss as x } from "./fondue-components51.js";
-const c = ({
-  id: m,
-  currentColor: e,
-  isOpen: d,
-  disabled: o = !1,
-  onClear: i,
-  onClick: l,
-  "data-test-id": n = "color-picker-input",
-  ...r
-}, p) => {
-  const { t: f } = w(), h = (e == null ? void 0 : e.name) ?? (e ? z(e, "RGBA").name : "");
-  return /* @__PURE__ */ t("div", { id: m, className: a.root, ref: p, "data-test-id": n, children: [
-    /* @__PURE__ */ t(
-      "button",
-      {
-        className: a.button,
-        ...r,
-        disabled: o,
-        onClick: l,
-        type: "button",
-        "data-color-input-select": !0,
-        children: [
-          (e == null ? void 0 : e.red) !== void 0 ? /* @__PURE__ */ s(
-            "div",
-            {
-              "aria-hidden": !0,
-              className: a.colorIndicator,
-              style: { "--active-color": x(e) }
-            }
-          ) : /* @__PURE__ */ t(N, { children: [
-            /* @__PURE__ */ s(I, { size: 16 }),
-            /* @__PURE__ */ s("span", { children: f("ColorPicker_selectColor") })
-          ] }),
-          /* @__PURE__ */ s("span", { className: a.colorName, children: h })
-        ]
-      }
-    ),
-    /* @__PURE__ */ t("div", { className: a.actions, children: [
-      i && /* @__PURE__ */ s(y, { onPress: i, disabled: o, size: "small", emphasis: "weak", aspect: "square", children: /* @__PURE__ */ s(k, { className: a.clearIcon, size: 16 }) }),
-      /* @__PURE__ */ s("div", { className: a.caret, "data-state": d ? "open" : "closed", children: /* @__PURE__ */ s(v, { size: 16 }) })
-    ] })
-  ] });
+const o = "_root_1fezf_5", n = "_indicator_1fezf_88", e = "_icon_1fezf_113", c = "_iconIndeterminate_1fezf_129", t = "_iconChecked_1fezf_133", i = {
+  root: o,
+  indicator: n,
+  icon: e,
+  iconIndeterminate: c,
+  iconChecked: t
 };
-c.displayName = "ColorPicker.Input";
-const F = P(c);
 export {
-  c as ColorPickerInput,
-  F as ForwardedRefColorPickerInput
+  i as default,
+  e as icon,
+  t as iconChecked,
+  c as iconIndeterminate,
+  n as indicator,
+  o as root
 };
 //# sourceMappingURL=fondue-components48.js.map

package/dist/fondue-components48.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components48.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 { useTranslation } from '#/hooks/useTranslation';\nimport { type CommonAriaAttrs } from '#/utilities/types';\n\nimport { Button } from '../Button/Button';\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 determine arrow state\n     */\n    isOpen?: boolean;\n    /**\n     * Whether the color picker input is disabled\n     */\n    disabled?: 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        disabled = false,\n        onClear,\n        onClick,\n        'data-test-id': dataTestId = 'color-picker-input',\n        ...props\n    }: ColorPickerInputProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const { t } = useTranslation();\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\n                className={styles.button}\n                {...props}\n                disabled={disabled}\n                onClick={onClick}\n                type=\"button\"\n                data-color-input-select\n            >\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>{t('ColorPicker_selectColor')}</span>\n                    </>\n                )}\n\n                <span className={styles.colorName}>{colorName}</span>\n            </button>\n            <div className={styles.actions}>\n                {onClear && (\n                    <Button onPress={onClear} disabled={disabled} size=\"small\" emphasis=\"weak\" aspect=\"square\">\n                        <IconCross className={styles.clearIcon} size={16} />\n                    </Button>\n                )}\n                <div className={styles.caret} data-state={isOpen ? 'open' : 'closed'}>\n                    <IconCaretDown size={16} />\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","disabled","onClear","onClick","dataTestId","props","forwardedRef","t","useTranslation","colorName","getColorWithName","jsxs","styles","jsx","colorToCss","Fragment","IconDroplet","Button","IconCross","IconCaretDown","ForwardedRefColorPickerInput","forwardRef"],"mappings":";;;;;;;AA0CO,MAAMA,IAAmB,CAC5B;AAAA,EACI,IAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,gBAAgBC,IAAa;AAAA,EAC7B,GAAGC;AACP,GACAC,MACC;AACD,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACRC,KAAYV,KAAA,gBAAAA,EAAc,UAASA,IAAeW,EAAiBX,GAAc,MAAM,EAAE,OAAO;AACtG,SACI,gBAAAY,EAAC,SAAI,IAAAb,GAAQ,WAAWc,EAAO,MAAM,KAAKN,GAAc,gBAAcF,GAClE,UAAA;AAAA,IAAA,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWC,EAAO;AAAA,QACjB,GAAGP;AAAA,QACJ,UAAAJ;AAAA,QACA,SAAAE;AAAA,QACA,MAAK;AAAA,QACL,2BAAuB;AAAA,QAEtB,UAAA;AAAA,WAAAJ,KAAA,gBAAAA,EAAc,SAAQ,SACnB,gBAAAc;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,eAAW;AAAA,cACX,WAAWD,EAAO;AAAA,cAClB,OAAO,EAAE,kBAAkBE,EAAWf,CAAY,EAAA;AAAA,YAAE;AAAA,UAAA,IAGxD,gBAAAY,EAAAI,GAAA,EACI,UAAA;AAAA,YAAA,gBAAAF,EAACG,GAAA,EAAY,MAAM,GAAA,CAAI;AAAA,YACvB,gBAAAH,EAAC,QAAA,EAAM,UAAAN,EAAE,yBAAyB,EAAA,CAAE;AAAA,UAAA,GACxC;AAAA,UAGJ,gBAAAM,EAAC,QAAA,EAAK,WAAWD,EAAO,WAAY,UAAAH,EAAA,CAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAElD,gBAAAE,EAAC,OAAA,EAAI,WAAWC,EAAO,SAClB,UAAA;AAAA,MAAAV,uBACIe,GAAA,EAAO,SAASf,GAAS,UAAAD,GAAoB,MAAK,SAAQ,UAAS,QAAO,QAAO,UAC9E,4BAACiB,GAAA,EAAU,WAAWN,EAAO,WAAW,MAAM,IAAI,GACtD;AAAA,MAEJ,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,OAAO,cAAYZ,IAAS,SAAS,UACxD,UAAA,gBAAAa,EAACM,GAAA,EAAc,MAAM,IAAI,EAAA,CAC7B;AAAA,IAAA,EAAA,CACJ;AAAA,EAAA,GACJ;AAER;AACAtB,EAAiB,cAAc;AAExB,MAAMuB,IAA+BC,EAAkDxB,CAAgB;"}
+{"version":3,"file":"fondue-components48.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/fondue-components49.js

@@ -1,134 +1,35 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { forwardRef as I, useState as R, useEffect as x } from "react";
-import { useTranslation as S } from "./fondue-components40.js";
-import { Select as c } from "./fondue-components27.js";
-import { TextInput as r } from "./fondue-components35.js";
-import l from "./fondue-components50.js";
-import { rgbColorToHex as m, DEFAULT_COLOR as V, DEFAULT_FORMAT as y, isValidHexColor as h, hexColorToRgba as D, getLimitedColorChannelValue as s } from "./fondue-components51.js";
-const v = () => {
-}, f = ({
-  currentColor: t = V,
-  onColorChange: o = v,
-  currentFormat: u = y,
-  setCurrentFormat: g = v,
-  "data-test-id": b = "color-picker-value-input"
-}, N) => {
-  const { t: i } = S(), [p, d] = R(() => m(t));
-  return x(() => {
-    d(m(t));
-  }, [t]), /* @__PURE__ */ n("div", { className: l.inputs, "data-test-id": b, ref: N, children: [
-    /* @__PURE__ */ e("div", { className: l.colorFormatInput, children: /* @__PURE__ */ n(
-      c,
-      {
-        "data-test-id": "color-picker-select-format",
-        "aria-label": i("ColorPicker_selectFormat"),
-        onSelect: (a) => {
-          g(a);
-        },
-        value: u,
-        children: [
-          /* @__PURE__ */ e(c.Item, { value: "HEX", children: "HEX" }),
-          /* @__PURE__ */ e(c.Item, { value: "RGBA", children: "RGBA" })
-        ]
-      }
-    ) }),
-    u === "HEX" ? /* @__PURE__ */ e(
-      r.Root,
-      {
-        "data-test-id": "color-picker-value-input-hex",
-        className: l.valueInput,
-        type: "text",
-        value: p,
-        status: h(p) ? "neutral" : "error",
-        onBlur: (a) => {
-          h(a.target.value) && o({ ...D(a.target.value), alpha: t.alpha });
-        },
-        onChange: (a) => {
-          const k = a.target.value.startsWith("#") ? a.target.value.slice(1) : a.target.value;
-          d(k);
-        },
-        "aria-label": i("ColorPicker_hexValue"),
-        children: /* @__PURE__ */ e(r.Slot, { name: "left", children: /* @__PURE__ */ e("span", { className: l.inputDecorator, children: "#" }) })
-      }
-    ) : /* @__PURE__ */ n("div", { className: l.colorChannelInputGroup, children: [
-      /* @__PURE__ */ e(
-        r.Root,
-        {
-          "data-test-id": "color-picker-value-input-red",
-          className: l.valueInput,
-          value: t.red,
-          type: "number",
-          onChange: (a) => {
-            o({
-              ...t,
-              red: s(a.target.value)
-            });
-          },
-          "aria-label": i("ColorPicker_redChannel"),
-          children: /* @__PURE__ */ e(r.Slot, { name: "left", children: /* @__PURE__ */ e("span", { className: l.inputDecorator, children: "R" }) })
-        }
-      ),
-      /* @__PURE__ */ e(
-        r.Root,
-        {
-          "data-test-id": "color-picker-value-input-green",
-          className: l.valueInput,
-          value: t.green,
-          type: "number",
-          onChange: (a) => {
-            o({
-              ...t,
-              green: s(a.target.value)
-            });
-          },
-          "aria-label": i("ColorPicker_greenChannel"),
-          children: /* @__PURE__ */ e(r.Slot, { name: "left", children: /* @__PURE__ */ e("span", { className: l.inputDecorator, children: "G" }) })
-        }
-      ),
-      /* @__PURE__ */ e(
-        r.Root,
-        {
-          "data-test-id": "color-picker-value-input-blue",
-          className: l.valueInput,
-          value: t.blue,
-          type: "number",
-          onChange: (a) => {
-            o({
-              ...t,
-              blue: s(a.target.value)
-            });
-          },
-          "aria-label": i("ColorPicker_blueChannel"),
-          children: /* @__PURE__ */ e(r.Slot, { name: "left", children: /* @__PURE__ */ e("span", { className: l.inputDecorator, children: "B" }) })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e("div", { className: l.colorAlphaInput, children: /* @__PURE__ */ n(
-      r.Root,
-      {
-        "data-test-id": "color-picker-value-input-alpha",
-        className: l.valueInput,
-        value: t.alpha === void 0 ? 100 : Math.trunc(t.alpha * 100).toString(),
-        type: "number",
-        onChange: (a) => {
-          o({
-            ...t,
-            alpha: s(a.target.value, 0, 100) / 100
-          });
-        },
-        "aria-label": i("ColorPicker_opacity"),
-        children: [
-          /* @__PURE__ */ e(r.Slot, { name: "left", children: /* @__PURE__ */ e("span", { className: l.inputDecorator, children: "A" }) }),
-          /* @__PURE__ */ e(r.Slot, { name: "right", children: /* @__PURE__ */ e("span", { className: l.inputDecorator, children: "%" }) })
-        ]
-      }
-    ) })
-  ] });
-};
-f.displayName = "ColorPicker.Values";
-const F = I(f);
+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-components52.js";
+import { DEFAULT_COLOR as s } from "./fondue-components53.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 {
-  f as ColorValueInput,
-  F as ForwardedRefColorValueInput
+  i as ColorGradientInput,
+  c as ForwardedRefColorGradientInput
 };
 //# sourceMappingURL=fondue-components49.js.map

package/dist/fondue-components49.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components49.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 { useTranslation } from '#/hooks/useTranslation';\n\nimport { Select } from '../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\nconst nooperation = () => {};\n\nexport const ColorValueInput = (\n    {\n        currentColor = DEFAULT_COLOR,\n        onColorChange = nooperation,\n        currentFormat = DEFAULT_FORMAT,\n        setCurrentFormat = nooperation,\n        'data-test-id': dataTestId = 'color-picker-value-input',\n    }: ColorValueInputProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const { t } = useTranslation();\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={t('ColorPicker_selectFormat')}\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), alpha: currentColor.alpha });\n                        }\n                    }}\n                    onChange={(event) => {\n                        const inputValue = event.target.value.startsWith('#')\n                            ? event.target.value.slice(1)\n                            : event.target.value;\n\n                        setHexColorValue(inputValue);\n                    }}\n                    aria-label={t('ColorPicker_hexValue')}\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={t('ColorPicker_redChannel')}\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={t('ColorPicker_greenChannel')}\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={t('ColorPicker_blueChannel')}\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                    /* .toString() is a workaround for https://github.com/facebook/react/issues/9402 */\n                    value={currentColor.alpha === undefined ? 100 : Math.trunc(currentColor.alpha * 100).toString()}\n                    type=\"number\"\n                    onChange={(event) => {\n                        onColorChange({\n                            ...currentColor,\n                            alpha: getLimitedColorChannelValue(event.target.value, 0, 100) / 100,\n                        });\n                    }}\n                    aria-label={t('ColorPicker_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":["nooperation","ColorValueInput","currentColor","DEFAULT_COLOR","onColorChange","currentFormat","DEFAULT_FORMAT","setCurrentFormat","dataTestId","forwardedRef","t","useTranslation","hexColorValue","setHexColorValue","useState","rgbColorToHex","useEffect","jsxs","styles","jsx","Select","selectedValue","TextInput","isValidHexColor","event","hexColorToRgba","inputValue","getLimitedColorChannelValue","ForwardedRefColorValueInput","forwardRef"],"mappings":";;;;;;;AAiDA,MAAMA,IAAc,MAAM;AAAC,GAEdC,IAAkB,CAC3B;AAAA,EACI,cAAAC,IAAeC;AAAA,EACf,eAAAC,IAAgBJ;AAAA,EAChB,eAAAK,IAAgBC;AAAA,EAChB,kBAAAC,IAAmBP;AAAA,EACnB,gBAAgBQ,IAAa;AACjC,GACAC,MACC;AACD,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACR,CAACC,GAAeC,CAAgB,IAAIC,EAAiB,MAAMC,EAAcb,CAAY,CAAC;AAE5F,SAAAc,EAAU,MAAM;AACZ,IAAAH,EAAiBE,EAAcb,CAAY,CAAC;AAAA,EAChD,GAAG,CAACA,CAAY,CAAC,GAGb,gBAAAe,EAAC,SAAI,WAAWC,EAAO,QAAQ,gBAAcV,GAAY,KAAKC,GAC1D,UAAA;AAAA,IAAA,gBAAAU,EAAC,OAAA,EAAI,WAAWD,EAAO,kBACnB,UAAA,gBAAAD;AAAA,MAACG;AAAA,MAAA;AAAA,QACG,gBAAa;AAAA,QACb,cAAYV,EAAE,0BAA0B;AAAA,QACxC,UAAU,CAACW,MAAkB;AACzB,UAAAd,EAAiBc,CAA4B;AAAA,QACjD;AAAA,QACA,OAAOhB;AAAA,QAEP,UAAA;AAAA,UAAA,gBAAAc,EAACC,EAAO,MAAP,EAAY,OAAM,OAAM,UAAA,OAAG;AAAA,4BAC3BA,EAAO,MAAP,EAAY,OAAM,QAAO,UAAA,OAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAEtC;AAAA,IACCf,MAAkB,QACf,gBAAAc;AAAA,MAACG,EAAU;AAAA,MAAV;AAAA,QACG,gBAAa;AAAA,QACb,WAAWJ,EAAO;AAAA,QAClB,MAAK;AAAA,QACL,OAAON;AAAA,QACP,QAAQW,EAAgBX,CAAa,IAAI,YAAY;AAAA,QACrD,QAAQ,CAACY,MAAU;AACf,UAAID,EAAgBC,EAAM,OAAO,KAAK,KAClCpB,EAAc,EAAE,GAAGqB,EAAeD,EAAM,OAAO,KAAK,GAAG,OAAOtB,EAAa,OAAO;AAAA,QAE1F;AAAA,QACA,UAAU,CAACsB,MAAU;AACjB,gBAAME,IAAaF,EAAM,OAAO,MAAM,WAAW,GAAG,IAC9CA,EAAM,OAAO,MAAM,MAAM,CAAC,IAC1BA,EAAM,OAAO;AAEnB,UAAAX,EAAiBa,CAAU;AAAA,QAC/B;AAAA,QACA,cAAYhB,EAAE,sBAAsB;AAAA,QAEpC,UAAA,gBAAAS,EAACG,EAAU,MAAV,EAAe,MAAK,QACjB,UAAA,gBAAAH,EAAC,QAAA,EAAK,WAAWD,EAAO,gBAAgB,UAAA,IAAA,CAAC,EAAA,CAC7C;AAAA,MAAA;AAAA,IAAA,IAGJ,gBAAAD,EAAC,OAAA,EAAI,WAAWC,EAAO,wBACnB,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACG,EAAU;AAAA,QAAV;AAAA,UACG,gBAAa;AAAA,UACb,WAAWJ,EAAO;AAAA,UAClB,OAAOhB,EAAa;AAAA,UACpB,MAAK;AAAA,UACL,UAAU,CAACsB,MAAU;AACjB,YAAApB,EAAc;AAAA,cACV,GAAGF;AAAA,cACH,KAAKyB,EAA4BH,EAAM,OAAO,KAAK;AAAA,YAAA,CACtD;AAAA,UACL;AAAA,UACA,cAAYd,EAAE,wBAAwB;AAAA,UAEtC,UAAA,gBAAAS,EAACG,EAAU,MAAV,EAAe,MAAK,QACjB,UAAA,gBAAAH,EAAC,QAAA,EAAK,WAAWD,EAAO,gBAAgB,UAAA,IAAA,CAAC,EAAA,CAC7C;AAAA,QAAA;AAAA,MAAA;AAAA,MAEJ,gBAAAC;AAAA,QAACG,EAAU;AAAA,QAAV;AAAA,UACG,gBAAa;AAAA,UACb,WAAWJ,EAAO;AAAA,UAClB,OAAOhB,EAAa;AAAA,UACpB,MAAK;AAAA,UACL,UAAU,CAACsB,MAAU;AACjB,YAAApB,EAAc;AAAA,cACV,GAAGF;AAAA,cACH,OAAOyB,EAA4BH,EAAM,OAAO,KAAK;AAAA,YAAA,CACxD;AAAA,UACL;AAAA,UACA,cAAYd,EAAE,0BAA0B;AAAA,UAExC,UAAA,gBAAAS,EAACG,EAAU,MAAV,EAAe,MAAK,QACjB,UAAA,gBAAAH,EAAC,QAAA,EAAK,WAAWD,EAAO,gBAAgB,UAAA,IAAA,CAAC,EAAA,CAC7C;AAAA,QAAA;AAAA,MAAA;AAAA,MAEJ,gBAAAC;AAAA,QAACG,EAAU;AAAA,QAAV;AAAA,UACG,gBAAa;AAAA,UACb,WAAWJ,EAAO;AAAA,UAClB,OAAOhB,EAAa;AAAA,UACpB,MAAK;AAAA,UACL,UAAU,CAACsB,MAAU;AACjB,YAAApB,EAAc;AAAA,cACV,GAAGF;AAAA,cACH,MAAMyB,EAA4BH,EAAM,OAAO,KAAK;AAAA,YAAA,CACvD;AAAA,UACL;AAAA,UACA,cAAYd,EAAE,yBAAyB;AAAA,UAEvC,UAAA,gBAAAS,EAACG,EAAU,MAAV,EAAe,MAAK,QACjB,UAAA,gBAAAH,EAAC,QAAA,EAAK,WAAWD,EAAO,gBAAgB,UAAA,IAAA,CAAC,EAAA,CAC7C;AAAA,QAAA;AAAA,MAAA;AAAA,IACJ,GACJ;AAAA,IAEJ,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,iBACnB,UAAA,gBAAAD;AAAA,MAACK,EAAU;AAAA,MAAV;AAAA,QACG,gBAAa;AAAA,QACb,WAAWJ,EAAO;AAAA,QAElB,OAAOhB,EAAa,UAAU,SAAY,MAAM,KAAK,MAAMA,EAAa,QAAQ,GAAG,EAAE,SAAA;AAAA,QACrF,MAAK;AAAA,QACL,UAAU,CAACsB,MAAU;AACjB,UAAApB,EAAc;AAAA,YACV,GAAGF;AAAA,YACH,OAAOyB,EAA4BH,EAAM,OAAO,OAAO,GAAG,GAAG,IAAI;AAAA,UAAA,CACpE;AAAA,QACL;AAAA,QACA,cAAYd,EAAE,qBAAqB;AAAA,QAEnC,UAAA;AAAA,UAAA,gBAAAS,EAACG,EAAU,MAAV,EAAe,MAAK,QACjB,UAAA,gBAAAH,EAAC,QAAA,EAAK,WAAWD,EAAO,gBAAgB,UAAA,IAAA,CAAC,GAC7C;AAAA,UACA,gBAAAC,EAACG,EAAU,MAAV,EAAe,MAAK,SACjB,UAAA,gBAAAH,EAAC,QAAA,EAAK,WAAWD,EAAO,gBAAgB,UAAA,IAAA,CAAC,EAAA,CAC7C;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,EACJ,CACJ;AAAA,EAAA,GACJ;AAER;AACAjB,EAAgB,cAAc;AAEvB,MAAM2B,IAA8BC,EAAiD5B,CAAe;"}
+{"version":3,"file":"fondue-components49.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,IAAA;AAAA,IAE3D,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;AAAA,GAGb;AAGRT,EAAmB,cAAc;AAE1B,MAAMU,IAAiCC,EAAoDX,CAAkB;"}

package/dist/fondue-components5.js

@@ -1,7 +1,7 @@
 import { jsx as f } from "react/jsx-runtime";
 import { forwardRef as n } from "react";
-import { propsToCssVariables as x } from "./fondue-components43.js";
-import y from "./fondue-components44.js";
+import { propsToCssVariables as x } from "./fondue-components45.js";
+import y from "./fondue-components46.js";
 const c = n(
   ({
     as: a = "div",

package/dist/fondue-components50.js

@@ -1,24 +1,57 @@
-const o = "_root_6n5w5_4", n = "_inputs_6n5w5_12", t = "_colorFormatInput_6n5w5_23", r = "_colorAlphaInput_6n5w5_24", u = "_colorChannelInputGroup_6n5w5_28", p = "_inputDecorator_6n5w5_39", _ = "_gradientInput_6n5w5_43", l = "_reactColorful_6n5w5_46", c = "_valueInput_6n5w5_50", a = {
-  root: o,
-  inputs: n,
-  colorFormatInput: t,
-  colorAlphaInput: r,
-  colorChannelInputGroup: u,
-  inputDecorator: p,
-  gradientInput: _,
-  reactColorful: l,
-  valueInput: c
+import { jsxs as t, jsx as s, Fragment as N } from "react/jsx-runtime";
+import { IconDroplet as I, IconCross as k, IconCaretDown as v } from "@frontify/fondue-icons";
+import { forwardRef as P } from "react";
+import { useTranslation as w } from "./fondue-components42.js";
+import { Button as y } from "./fondue-components6.js";
+import a from "./fondue-components113.js";
+import { getColorWithName as z, colorToCss as x } from "./fondue-components53.js";
+const c = ({
+  id: m,
+  currentColor: e,
+  isOpen: d,
+  disabled: o = !1,
+  onClear: i,
+  onClick: l,
+  "data-test-id": n = "color-picker-input",
+  ...r
+}, p) => {
+  const { t: f } = w(), h = (e == null ? void 0 : e.name) ?? (e ? z(e, "RGBA").name : "");
+  return /* @__PURE__ */ t("div", { id: m, className: a.root, ref: p, "data-test-id": n, children: [
+    /* @__PURE__ */ t(
+      "button",
+      {
+        className: a.button,
+        ...r,
+        disabled: o,
+        onClick: l,
+        type: "button",
+        "data-color-input-select": !0,
+        children: [
+          (e == null ? void 0 : e.red) !== void 0 ? /* @__PURE__ */ s(
+            "div",
+            {
+              "aria-hidden": !0,
+              className: a.colorIndicator,
+              style: { "--active-color": x(e) }
+            }
+          ) : /* @__PURE__ */ t(N, { children: [
+            /* @__PURE__ */ s(I, { size: 16 }),
+            /* @__PURE__ */ s("span", { children: f("ColorPicker_selectColor") })
+          ] }),
+          /* @__PURE__ */ s("span", { className: a.colorName, children: h })
+        ]
+      }
+    ),
+    /* @__PURE__ */ t("div", { className: a.actions, children: [
+      i && /* @__PURE__ */ s(y, { onPress: i, disabled: o, size: "small", emphasis: "weak", aspect: "square", children: /* @__PURE__ */ s(k, { className: a.clearIcon, size: 16 }) }),
+      /* @__PURE__ */ s("div", { className: a.caret, "data-state": d ? "open" : "closed", children: /* @__PURE__ */ s(v, { size: 16 }) })
+    ] })
+  ] });
 };
+c.displayName = "ColorPicker.Input";
+const F = P(c);
 export {
-  r as colorAlphaInput,
-  u as colorChannelInputGroup,
-  t as colorFormatInput,
-  a as default,
-  _ as gradientInput,
-  p as inputDecorator,
-  n as inputs,
-  l as reactColorful,
-  o as root,
-  c as valueInput
+  c as ColorPickerInput,
+  F as ForwardedRefColorPickerInput
 };
 //# sourceMappingURL=fondue-components50.js.map

package/dist/fondue-components50.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components50.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
+{"version":3,"file":"fondue-components50.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 { useTranslation } from '#/hooks/useTranslation';\nimport { type CommonAriaAttrs } from '#/utilities/types';\n\nimport { Button } from '../Button/Button';\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 determine arrow state\n     */\n    isOpen?: boolean;\n    /**\n     * Whether the color picker input is disabled\n     */\n    disabled?: 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        disabled = false,\n        onClear,\n        onClick,\n        'data-test-id': dataTestId = 'color-picker-input',\n        ...props\n    }: ColorPickerInputProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const { t } = useTranslation();\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\n                className={styles.button}\n                {...props}\n                disabled={disabled}\n                onClick={onClick}\n                type=\"button\"\n                data-color-input-select\n            >\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>{t('ColorPicker_selectColor')}</span>\n                    </>\n                )}\n\n                <span className={styles.colorName}>{colorName}</span>\n            </button>\n            <div className={styles.actions}>\n                {onClear && (\n                    <Button onPress={onClear} disabled={disabled} size=\"small\" emphasis=\"weak\" aspect=\"square\">\n                        <IconCross className={styles.clearIcon} size={16} />\n                    </Button>\n                )}\n                <div className={styles.caret} data-state={isOpen ? 'open' : 'closed'}>\n                    <IconCaretDown size={16} />\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","disabled","onClear","onClick","dataTestId","props","forwardedRef","t","useTranslation","colorName","getColorWithName","jsxs","styles","jsx","colorToCss","Fragment","IconDroplet","Button","IconCross","IconCaretDown","ForwardedRefColorPickerInput","forwardRef"],"mappings":";;;;;;;AA0CO,MAAMA,IAAmB,CAC5B;AAAA,EACI,IAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,gBAAgBC,IAAa;AAAA,EAC7B,GAAGC;AACP,GACAC,MACC;AACD,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACRC,KAAYV,KAAA,gBAAAA,EAAc,UAASA,IAAeW,EAAiBX,GAAc,MAAM,EAAE,OAAO;AACtG,SACI,gBAAAY,EAAC,SAAI,IAAAb,GAAQ,WAAWc,EAAO,MAAM,KAAKN,GAAc,gBAAcF,GAClE,UAAA;AAAA,IAAA,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWC,EAAO;AAAA,QACjB,GAAGP;AAAA,QACJ,UAAAJ;AAAA,QACA,SAAAE;AAAA,QACA,MAAK;AAAA,QACL,2BAAuB;AAAA,QAEtB,UAAA;AAAA,WAAAJ,KAAA,gBAAAA,EAAc,SAAQ,SACnB,gBAAAc;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,eAAW;AAAA,cACX,WAAWD,EAAO;AAAA,cAClB,OAAO,EAAE,kBAAkBE,EAAWf,CAAY,EAAA;AAAA,YAAE;AAAA,UAAA,IAGxD,gBAAAY,EAAAI,GAAA,EACI,UAAA;AAAA,YAAA,gBAAAF,EAACG,GAAA,EAAY,MAAM,GAAA,CAAI;AAAA,YACvB,gBAAAH,EAAC,QAAA,EAAM,UAAAN,EAAE,yBAAyB,EAAA,CAAE;AAAA,UAAA,GACxC;AAAA,UAGJ,gBAAAM,EAAC,QAAA,EAAK,WAAWD,EAAO,WAAY,UAAAH,EAAA,CAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAElD,gBAAAE,EAAC,OAAA,EAAI,WAAWC,EAAO,SAClB,UAAA;AAAA,MAAAV,uBACIe,GAAA,EAAO,SAASf,GAAS,UAAAD,GAAoB,MAAK,SAAQ,UAAS,QAAO,QAAO,UAC9E,4BAACiB,GAAA,EAAU,WAAWN,EAAO,WAAW,MAAM,IAAI,GACtD;AAAA,MAEJ,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,OAAO,cAAYZ,IAAS,SAAS,UACxD,UAAA,gBAAAa,EAACM,GAAA,EAAc,MAAM,IAAI,EAAA,CAC7B;AAAA,IAAA,EAAA,CACJ;AAAA,EAAA,GACJ;AAER;AACAtB,EAAiB,cAAc;AAExB,MAAMuB,IAA+BC,EAAkDxB,CAAgB;"}