@frontify/fondue-components 13.0.2 → 14.0.0

package/dist/fondue-components35.js

@@ -1,24 +1,121 @@
-import { FOCUS_OUTLINE as t } from "./fondue-components74.js";
-import { sv as e } from "./fondue-components31.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}`,
+import { sv as t } from "./fondue-components33.js";
+const s = t({
   variants: {
-    size: {
-      default: "tw-size-4",
-      large: "tw-size-5"
-    },
     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 '
+      default: "",
+      weak: "",
+      strong: ""
+    },
+    variant: {
+      default: "",
+      positive: "",
+      negative: "",
+      danger: "",
+      loud: ""
+    },
+    disabled: {
+      true: "tw-text-box-disabled-inverse"
     }
   },
+  compoundVariants: [
+    {
+      disabled: !1,
+      variant: "default",
+      emphasis: "default",
+      class: "[&_svg]:tw-text-button-icon group-hover:[&_svg]:tw-text-button-icon-hover group-active:[&_svg]:tw-text-button-icon-pressed [&_svg]:tw-leading-none"
+    },
+    {
+      disabled: !1,
+      variant: "default",
+      emphasis: "weak",
+      class: "[&_svg]:tw-text-button-icon group-hover:[&_svg]:tw-text-button-icon-hover group-active:[&_svg]:tw-text-button-icon-pressed [&_svg]:tw-leading-none"
+    },
+    {
+      disabled: !1,
+      variant: "default",
+      emphasis: "strong",
+      class: "[&_svg]:tw-text-button-strong-icon group-hover:[&_svg]:tw-text-button-strong-icon-hover group-active:[&_svg]:tw-text-button-strong-icon-pressed [&_svg]:tw-leading-none"
+    },
+    {
+      disabled: !1,
+      variant: "positive",
+      emphasis: "default",
+      class: "[&_svg]:tw-text-button-positive-icon group-hover:[&_svg]:tw-text-button-positive-icon-hover group-active:[&_svg]:tw-text-button-positive-icon-pressed [&_svg]:tw-leading-none"
+    },
+    {
+      disabled: !1,
+      variant: "positive",
+      emphasis: "weak",
+      class: "[&_svg]:tw-text-button-strong-positive-icon group-hover:[&_svg]:tw-text-button-strong-positive-icon-hovergroup-active:[&_svg]:tw-text-button-strong-positive-icon-pressed [&_svg]:tw-leading-none"
+    },
+    {
+      disabled: !1,
+      variant: "positive",
+      emphasis: "strong",
+      class: "[&_svg]:tw-text-button-strong-positive-icon group-hover:[&_svg]:tw-text-button-strong-positive-icon-hover group-active:[&_svg]:tw-text-button-strong-positive-icon-pressed [&_svg]:tw-leading-none"
+    },
+    {
+      disabled: !1,
+      variant: "negative",
+      emphasis: "default",
+      class: "[&_svg]:tw-text-button-negative-icon group-hover:[&_svg]:tw-text-button-negative-icon-hovergroup-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none"
+    },
+    {
+      disabled: !1,
+      variant: "negative",
+      emphasis: "weak",
+      class: "[&_svg]:tw-text-button-negative-icon group-hover:[&_svg]:tw-text-button-negative-icon-hovergroup-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none"
+    },
+    {
+      disabled: !1,
+      variant: "negative",
+      emphasis: "strong",
+      class: "[&_svg]:tw-text-button-strong-negative-icon group-hover:[&_svg]:tw-text-button-strong-negative-icon-hovergroup-active:[&_svg]:tw-text-button-strong-negative-icon-pressed [&_svg]:tw-leading-none"
+    },
+    {
+      disabled: !1,
+      variant: "danger",
+      emphasis: "default",
+      class: "[&_svg]:tw-text-button-negative-icon group-hover:[&_svg]:tw-text-button-negative-icon-hovergroup-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none"
+    },
+    {
+      disabled: !1,
+      variant: "danger",
+      emphasis: "weak",
+      class: "[&_svg]:tw-text-button-negative-icon group-hover:[&_svg]:tw-text-button-negative-icon-hovergroup-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none"
+    },
+    {
+      disabled: !1,
+      variant: "danger",
+      emphasis: "strong",
+      class: "[&_svg]:tw-text-button-danger-icon group-hover:[&_svg]:tw-text-button-danger-icon-hovergroup-active:[&_svg]:tw-text-button-danger-icon-pressed [&_svg]:tw-leading-none"
+    },
+    {
+      disabled: !1,
+      variant: "loud",
+      emphasis: "default",
+      class: "[&_svg]:tw-text-box-selected-inverse group-hover:[&_svg]:tw-text-box-selected-inverse-hovergroup-active:[&_svg]:tw-text-box-selected-inverse-pressed [&_svg]:tw-leading-none"
+    },
+    {
+      disabled: !1,
+      variant: "loud",
+      emphasis: "weak",
+      class: "[&_svg]:tw-text-box-selected-inverse group-hover:[&_svg]:tw-text-box-selected-inverse-hovergroup-active:[&_svg]:tw-text-box-selected-inverse-pressed [&_svg]:tw-leading-none"
+    },
+    {
+      disabled: !1,
+      variant: "loud",
+      emphasis: "strong",
+      class: "[&_svg]:tw-text-box-selected-strong-inverse group-hover:[&_svg]:tw-text-box-selected-strong-inversegroup-active:[&_svg]:tw-text-box-selected-strong-inverse [&_svg]:tw-leading-none"
+    }
+  ],
   defaultVariants: {
-    size: "default",
-    emphasis: "default"
+    emphasis: "strong",
+    variant: "default",
+    disabled: !1
   }
-}), 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 {
-  o as checkboxIndicatorStyles,
-  s as checkboxStyles
+  s as iconStyles
 };
 //# sourceMappingURL=fondue-components35.js.map

package/dist/fondue-components35.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components35.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,IAAA;AAAA,EAGZ;AAAA,EACA,iBAAiB;AAAA,IACb,MAAM;AAAA,IACN,UAAU;AAAA,EAAA;AAElB,CAAC,GAEYC,IACT;"}
+{"version":3,"file":"fondue-components35.js","sources":["../src/components/Button/styles/iconStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const iconStyles = sv({\n    variants: {\n        emphasis: {\n            default: '',\n            weak: '',\n            strong: '',\n        },\n        variant: {\n            default: '',\n            positive: '',\n            negative: '',\n            danger: '',\n            loud: '',\n        },\n        disabled: {\n            true: 'tw-text-box-disabled-inverse',\n        },\n    },\n    compoundVariants: [\n        {\n            disabled: false,\n            variant: 'default',\n            emphasis: 'default',\n            class:\n                '[&_svg]:tw-text-button-icon ' +\n                'group-hover:[&_svg]:tw-text-button-icon-hover ' +\n                'group-active:[&_svg]:tw-text-button-icon-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            variant: 'default',\n            emphasis: 'weak',\n            class:\n                '[&_svg]:tw-text-button-icon ' +\n                'group-hover:[&_svg]:tw-text-button-icon-hover ' +\n                'group-active:[&_svg]:tw-text-button-icon-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            variant: 'default',\n            emphasis: 'strong',\n            class:\n                '[&_svg]:tw-text-button-strong-icon ' +\n                'group-hover:[&_svg]:tw-text-button-strong-icon-hover ' +\n                'group-active:[&_svg]:tw-text-button-strong-icon-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            variant: 'positive',\n            emphasis: 'default',\n            class:\n                '[&_svg]:tw-text-button-positive-icon ' +\n                'group-hover:[&_svg]:tw-text-button-positive-icon-hover ' +\n                'group-active:[&_svg]:tw-text-button-positive-icon-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            variant: 'positive',\n            emphasis: 'weak',\n            class:\n                '[&_svg]:tw-text-button-strong-positive-icon ' +\n                'group-hover:[&_svg]:tw-text-button-strong-positive-icon-hover' +\n                'group-active:[&_svg]:tw-text-button-strong-positive-icon-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            variant: 'positive',\n            emphasis: 'strong',\n            class:\n                '[&_svg]:tw-text-button-strong-positive-icon ' +\n                'group-hover:[&_svg]:tw-text-button-strong-positive-icon-hover ' +\n                'group-active:[&_svg]:tw-text-button-strong-positive-icon-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            variant: 'negative',\n            emphasis: 'default',\n            class:\n                '[&_svg]:tw-text-button-negative-icon ' +\n                'group-hover:[&_svg]:tw-text-button-negative-icon-hover' +\n                'group-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            variant: 'negative',\n            emphasis: 'weak',\n            class:\n                '[&_svg]:tw-text-button-negative-icon ' +\n                'group-hover:[&_svg]:tw-text-button-negative-icon-hover' +\n                'group-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            variant: 'negative',\n            emphasis: 'strong',\n            class:\n                '[&_svg]:tw-text-button-strong-negative-icon ' +\n                'group-hover:[&_svg]:tw-text-button-strong-negative-icon-hover' +\n                'group-active:[&_svg]:tw-text-button-strong-negative-icon-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            variant: 'danger',\n            emphasis: 'default',\n            class:\n                '[&_svg]:tw-text-button-negative-icon ' +\n                'group-hover:[&_svg]:tw-text-button-negative-icon-hover' +\n                'group-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            variant: 'danger',\n            emphasis: 'weak',\n            class:\n                '[&_svg]:tw-text-button-negative-icon ' +\n                'group-hover:[&_svg]:tw-text-button-negative-icon-hover' +\n                'group-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            variant: 'danger',\n            emphasis: 'strong',\n            class:\n                '[&_svg]:tw-text-button-danger-icon ' +\n                'group-hover:[&_svg]:tw-text-button-danger-icon-hover' +\n                'group-active:[&_svg]:tw-text-button-danger-icon-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            variant: 'loud',\n            emphasis: 'default',\n            class:\n                '[&_svg]:tw-text-box-selected-inverse ' +\n                'group-hover:[&_svg]:tw-text-box-selected-inverse-hover' +\n                'group-active:[&_svg]:tw-text-box-selected-inverse-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            variant: 'loud',\n            emphasis: 'weak',\n            class:\n                '[&_svg]:tw-text-box-selected-inverse ' +\n                'group-hover:[&_svg]:tw-text-box-selected-inverse-hover' +\n                'group-active:[&_svg]:tw-text-box-selected-inverse-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            variant: 'loud',\n            emphasis: 'strong',\n            class:\n                '[&_svg]:tw-text-box-selected-strong-inverse ' +\n                'group-hover:[&_svg]:tw-text-box-selected-strong-inverse' +\n                'group-active:[&_svg]:tw-text-box-selected-strong-inverse [&_svg]:tw-leading-none',\n        },\n    ],\n    defaultVariants: {\n        emphasis: 'strong',\n        variant: 'default',\n        disabled: false,\n    },\n});\n"],"names":["iconStyles","sv"],"mappings":";AAIO,MAAMA,IAAaC,EAAG;AAAA,EACzB,UAAU;AAAA,IACN,UAAU;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,MACN,QAAQ;AAAA,IACZ;AAAA,IACA,SAAS;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,MAAM;AAAA,IACV;AAAA,IACA,UAAU;AAAA,MACN,MAAM;AAAA,IAAA;AAAA,EAEd;AAAA,EACA,kBAAkB;AAAA,IACd;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,EAIZ;AAAA,EACA,iBAAiB;AAAA,IACb,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,EAAA;AAElB,CAAC;"}

package/dist/fondue-components36.js

@@ -1,35 +1,121 @@
-import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-import { RgbaColorPicker as m } from "react-colorful";
-import t from "./fondue-components39.js";
-import { DEFAULT_COLOR as s } from "./fondue-components40.js";
-const i = ({
-  currentColor: e = s,
-  onColorChange: d = () => {
+import { sv as t } from "./fondue-components33.js";
+const s = t({
+  variants: {
+    emphasis: {
+      default: "",
+      weak: "",
+      strong: ""
+    },
+    variant: {
+      default: "",
+      positive: "",
+      negative: "",
+      danger: "",
+      loud: ""
+    },
+    disabled: {
+      true: "tw-text-box-disabled-inverse"
+    }
   },
-  "data-test-id": o = "color-picker-input"
-}, p) => /* @__PURE__ */ r("div", { className: t.gradientInput, "data-test-id": o, ref: p, children: /* @__PURE__ */ r(
-  m,
-  {
-    className: t.reactColorful,
-    color: {
-      r: e.red,
-      g: e.green,
-      b: e.blue,
-      a: e.alpha === void 0 ? 1 : e.alpha
-    },
-    onChange: (a) => d({
-      red: a.r,
-      green: a.g,
-      blue: a.b,
-      alpha: a.a
-    })
+  compoundVariants: [
+    {
+      disabled: !1,
+      variant: "default",
+      emphasis: "default",
+      class: "tw-text-button-text group-hover:tw-text-button-text-hover group-active:tw-text-button-text-pressed"
+    },
+    {
+      disabled: !1,
+      variant: "default",
+      emphasis: "weak",
+      class: "tw-text-button-text group-hover:tw-text-button-text-hover group-active:tw-text-button-text-pressed"
+    },
+    {
+      disabled: !1,
+      variant: "default",
+      emphasis: "strong",
+      class: "tw-text-button-strong-icon group-hover:tw-text-button-strong-icon-hover group-active:tw-text-button-strong-text-pressed"
+    },
+    {
+      disabled: !1,
+      variant: "positive",
+      emphasis: "default",
+      class: "tw-text-button-positive-text group-hover:tw-text-button-positive-text-hover group-active:tw-text-button-positive-text-pressed"
+    },
+    {
+      disabled: !1,
+      variant: "positive",
+      emphasis: "weak",
+      class: "tw-text-button-positive-text group-hover:tw-text-button-positive-text-hover group-active:tw-text-button-positive-text-pressed"
+    },
+    {
+      disabled: !1,
+      variant: "positive",
+      emphasis: "strong",
+      class: "tw-text-button-strong-positive-text group-hover:tw-text-button-strong-positive-text-hover group-active:tw-text-button-strong-positive-text-pressed"
+    },
+    {
+      disabled: !1,
+      variant: "negative",
+      emphasis: "default",
+      class: "tw-text-button-negative-text group-hover:tw-text-button-negative-text-hovergroup-active:tw-text-button-negative-text-pressed"
+    },
+    {
+      disabled: !1,
+      variant: "negative",
+      emphasis: "weak",
+      class: "tw-text-button-negative-text group-hover:tw-text-button-negative-text-hovergroup-active:tw-text-button-negative-text-pressed"
+    },
+    {
+      disabled: !1,
+      variant: "negative",
+      emphasis: "strong",
+      class: "tw-text-button-strong-negative-text group-hover:tw-text-button-strong-negative-text-hovergroup-active:tw-text-button-strong-negative-text-pressed"
+    },
+    {
+      disabled: !1,
+      variant: "danger",
+      emphasis: "default",
+      class: "tw-text-button-negative-icon group-hover:tw-text-button-negative-icon-hovergroup-active:tw-text-button-negative-icon-pressed"
+    },
+    {
+      disabled: !1,
+      variant: "danger",
+      emphasis: "weak",
+      class: "tw-text-button-negative-icon group-hover:tw-text-button-negative-icon-hovergroup-active:tw-text-button-negative-icon-pressed"
+    },
+    {
+      disabled: !1,
+      variant: "danger",
+      emphasis: "strong",
+      class: "tw-text-button-danger-text group-hover:tw-text-button-danger-text-hovergroup-active:tw-text-button-danger-text-pressed"
+    },
+    {
+      disabled: !1,
+      variant: "loud",
+      emphasis: "default",
+      class: "tw-text-box-selected-inverse group-hover:tw-text-box-selected-inverse-hovergroup-active:tw-text-box-selected-inverse-pressed"
+    },
+    {
+      disabled: !1,
+      variant: "loud",
+      emphasis: "weak",
+      class: "tw-text-box-selected-inverse group-hover:tw-text-box-selected-inverse-hovergroup-active:tw-text-box-selected-inverse-pressed"
+    },
+    {
+      disabled: !1,
+      variant: "loud",
+      emphasis: "strong",
+      class: "tw-text-box-selected-strong-inverse group-hover:tw-text-box-selected-strong-inversegroup-active:tw-text-box-selected-strong-inverse"
+    }
+  ],
+  defaultVariants: {
+    emphasis: "strong",
+    variant: "default",
+    disabled: !1
   }
-) });
-i.displayName = "ColorPicker.Gradient";
-const u = n(i);
+});
 export {
-  i as ColorGradientInput,
-  u as ForwardedRefColorGradientInput
+  s as textStyles
 };
 //# sourceMappingURL=fondue-components36.js.map

package/dist/fondue-components36.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components36.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,IAChB,CAAA;AAAA,EAAA;AAAA,GAGb;AAGRT,EAAmB,cAAc;AAEpB,MAAAU,IAAiCC,EAAoDX,CAAkB;"}
+{"version":3,"file":"fondue-components36.js","sources":["../src/components/Button/styles/textStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const textStyles = sv({\n    variants: {\n        emphasis: {\n            default: '',\n            weak: '',\n            strong: '',\n        },\n        variant: {\n            default: '',\n            positive: '',\n            negative: '',\n            danger: '',\n            loud: '',\n        },\n        disabled: {\n            true: 'tw-text-box-disabled-inverse',\n        },\n    },\n    compoundVariants: [\n        {\n            disabled: false,\n            variant: 'default',\n            emphasis: 'default',\n            class:\n                'tw-text-button-text ' +\n                'group-hover:tw-text-button-text-hover ' +\n                'group-active:tw-text-button-text-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'default',\n            emphasis: 'weak',\n            class:\n                'tw-text-button-text ' +\n                'group-hover:tw-text-button-text-hover ' +\n                'group-active:tw-text-button-text-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'default',\n            emphasis: 'strong',\n            class:\n                'tw-text-button-strong-icon ' +\n                'group-hover:tw-text-button-strong-icon-hover ' +\n                'group-active:tw-text-button-strong-text-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'positive',\n            emphasis: 'default',\n            class:\n                'tw-text-button-positive-text ' +\n                'group-hover:tw-text-button-positive-text-hover ' +\n                'group-active:tw-text-button-positive-text-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'positive',\n            emphasis: 'weak',\n            class:\n                'tw-text-button-positive-text ' +\n                'group-hover:tw-text-button-positive-text-hover ' +\n                'group-active:tw-text-button-positive-text-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'positive',\n            emphasis: 'strong',\n            class:\n                'tw-text-button-strong-positive-text ' +\n                'group-hover:tw-text-button-strong-positive-text-hover ' +\n                'group-active:tw-text-button-strong-positive-text-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'negative',\n            emphasis: 'default',\n            class:\n                'tw-text-button-negative-text ' +\n                'group-hover:tw-text-button-negative-text-hover' +\n                'group-active:tw-text-button-negative-text-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'negative',\n            emphasis: 'weak',\n            class:\n                'tw-text-button-negative-text ' +\n                'group-hover:tw-text-button-negative-text-hover' +\n                'group-active:tw-text-button-negative-text-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'negative',\n            emphasis: 'strong',\n            class:\n                'tw-text-button-strong-negative-text ' +\n                'group-hover:tw-text-button-strong-negative-text-hover' +\n                'group-active:tw-text-button-strong-negative-text-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'danger',\n            emphasis: 'default',\n            class:\n                'tw-text-button-negative-icon ' +\n                'group-hover:tw-text-button-negative-icon-hover' +\n                'group-active:tw-text-button-negative-icon-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'danger',\n            emphasis: 'weak',\n            class:\n                'tw-text-button-negative-icon ' +\n                'group-hover:tw-text-button-negative-icon-hover' +\n                'group-active:tw-text-button-negative-icon-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'danger',\n            emphasis: 'strong',\n            class:\n                'tw-text-button-danger-text ' +\n                'group-hover:tw-text-button-danger-text-hover' +\n                'group-active:tw-text-button-danger-text-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'loud',\n            emphasis: 'default',\n            class:\n                'tw-text-box-selected-inverse ' +\n                'group-hover:tw-text-box-selected-inverse-hover' +\n                'group-active:tw-text-box-selected-inverse-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'loud',\n            emphasis: 'weak',\n            class:\n                'tw-text-box-selected-inverse ' +\n                'group-hover:tw-text-box-selected-inverse-hover' +\n                'group-active:tw-text-box-selected-inverse-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'loud',\n            emphasis: 'strong',\n            class:\n                'tw-text-box-selected-strong-inverse ' +\n                'group-hover:tw-text-box-selected-strong-inverse' +\n                'group-active:tw-text-box-selected-strong-inverse',\n        },\n    ],\n    defaultVariants: {\n        emphasis: 'strong',\n        variant: 'default',\n        disabled: false,\n    },\n});\n"],"names":["textStyles","sv"],"mappings":";AAIO,MAAMA,IAAaC,EAAG;AAAA,EACzB,UAAU;AAAA,IACN,UAAU;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,MACN,QAAQ;AAAA,IACZ;AAAA,IACA,SAAS;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,MAAM;AAAA,IACV;AAAA,IACA,UAAU;AAAA,MACN,MAAM;AAAA,IAAA;AAAA,EAEd;AAAA,EACA,kBAAkB;AAAA,IACd;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,EAIZ;AAAA,EACA,iBAAiB;AAAA,IACb,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,EAAA;AAElB,CAAC;"}

package/dist/fondue-components37.js

@@ -1,40 +1,24 @@
-import { jsxs as s, jsx as e, Fragment as p } from "react/jsx-runtime";
-import { IconDroplet as f, IconTrashBin as h, IconCaretDown as N } from "@frontify/fondue-icons";
-import { forwardRef as b } from "react";
-import a from "./fondue-components75.js";
-import { colorToCss as I } from "./fondue-components40.js";
-const o = ({
-  id: c,
-  currentColor: t,
-  isOpen: d,
-  onClear: i,
-  onClick: l,
-  "data-test-id": n = "color-picker-input",
-  ...r
-}, m) => /* @__PURE__ */ s("div", { id: c, className: a.root, ...r, ref: m, "data-test-id": n, children: [
-  /* @__PURE__ */ s("button", { className: a.button, onClick: l, type: "button", "data-color-input-select": !0, children: [
-    (t == null ? void 0 : t.red) !== void 0 ? /* @__PURE__ */ e(
-      "div",
-      {
-        "aria-hidden": !0,
-        className: a.colorIndicator,
-        style: { backgroundColor: I(t) }
-      }
-    ) : /* @__PURE__ */ s(p, { children: [
-      /* @__PURE__ */ e(f, { size: 16 }),
-      /* @__PURE__ */ e("span", { children: "Select Color" })
-    ] }),
-    /* @__PURE__ */ e("span", { className: a.colorName, children: t == null ? void 0 : t.name })
-  ] }),
-  /* @__PURE__ */ s("div", { className: a.actions, children: [
-    i && /* @__PURE__ */ e("button", { type: "button", "aria-label": "Clear color", onClick: i, className: a.clear, children: /* @__PURE__ */ e(h, { size: 16 }) }),
-    /* @__PURE__ */ e("div", { className: a.caret, "data-state": d ? "open" : "closed", children: /* @__PURE__ */ e(N, { size: 16, className: a.caret }) })
-  ] })
-] });
-o.displayName = "ColorPicker.Input";
-const x = b(o);
+import { FOCUS_OUTLINE as t } from "./fondue-components76.js";
+import { sv as e } from "./fondue-components33.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"
+    },
+    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"
+  }
+}), 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 {
-  o as ColorPickerInput,
-  x as ForwardedRefColorPickerInput
+  o as checkboxIndicatorStyles,
+  s as checkboxStyles
 };
 //# sourceMappingURL=fondue-components37.js.map

package/dist/fondue-components37.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components37.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 } from 'react';\n\nimport { type CommonAriaAttrs } from '#/utilities/types';\n\nimport styles from './styles/colorInput.module.scss';\nimport { type RgbaColor } from './types';\nimport { colorToCss } from './utils';\n\ntype ColorPickerInputProps = {\n    id?: string;\n    /**\n     * The active color in the color picker\n     */\n    currentColor?: RgbaColor;\n    /**\n     * The open state of the color picker used to dermine arrow state\n     */\n    isOpen?: boolean;\n    /**\n     * callback for clearing the color\n     */\n    onClear?: () => void;\n    /**\n     * Event handler called when the color picker input is clicked\n     */\n    onClick?: () => void;\n    /**\n     * The test id of the color picker input\n     */\n    'data-test-id'?: string;\n} & CommonAriaAttrs;\n\nexport const ColorPickerInput = (\n    {\n        id,\n        currentColor,\n        isOpen,\n        onClear,\n        onClick,\n        'data-test-id': dataTestId = 'color-picker-input',\n        ...props\n    }: ColorPickerInputProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div id={id} className={styles.root} {...props} ref={forwardedRef} data-test-id={dataTestId}>\n            <button className={styles.button} onClick={onClick} type=\"button\" data-color-input-select>\n                {currentColor?.red !== undefined ? (\n                    <div\n                        aria-hidden\n                        className={styles.colorIndicator}\n                        style={{ backgroundColor: colorToCss(currentColor) }}\n                    />\n                ) : (\n                    <>\n                        <IconDroplet size={16} />\n                        <span>Select Color</span>\n                    </>\n                )}\n\n                <span className={styles.colorName}>{currentColor?.name}</span>\n            </button>\n            <div className={styles.actions}>\n                {onClear && (\n                    <button type=\"button\" aria-label=\"Clear color\" onClick={onClear} className={styles.clear}>\n                        <IconTrashBin size={16} />\n                    </button>\n                )}\n                <div className={styles.caret} data-state={isOpen ? 'open' : 'closed'}>\n                    <IconCaretDown size={16} className={styles.caret} />\n                </div>\n            </div>\n        </div>\n    );\n};\nColorPickerInput.displayName = 'ColorPicker.Input';\n\nexport const ForwardedRefColorPickerInput = forwardRef<HTMLDivElement, ColorPickerInputProps>(ColorPickerInput);\n"],"names":["ColorPickerInput","id","currentColor","isOpen","onClear","onClick","dataTestId","props","forwardedRef","jsxs","styles","jsx","colorToCss","Fragment","IconDroplet","IconTrashBin","IconCaretDown","ForwardedRefColorPickerInput","forwardRef"],"mappings":";;;;;AAmCO,MAAMA,IAAmB,CAC5B;AAAA,EACI,IAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,gBAAgBC,IAAa;AAAA,EAC7B,GAAGC;AACP,GACAC,MAGI,gBAAAC,EAAC,OAAI,EAAA,IAAAR,GAAQ,WAAWS,EAAO,MAAO,GAAGH,GAAO,KAAKC,GAAc,gBAAcF,GAC7E,UAAA;AAAA,EAAC,gBAAAG,EAAA,UAAA,EAAO,WAAWC,EAAO,QAAQ,SAAAL,GAAkB,MAAK,UAAS,2BAAuB,IACpF,UAAA;AAAA,KAAAH,KAAA,gBAAAA,EAAc,SAAQ,SACnB,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,eAAW;AAAA,QACX,WAAWD,EAAO;AAAA,QAClB,OAAO,EAAE,iBAAiBE,EAAWV,CAAY,EAAE;AAAA,MAAA;AAAA,IAAA,IAInD,gBAAAO,EAAAI,GAAA,EAAA,UAAA;AAAA,MAAC,gBAAAF,EAAAG,GAAA,EAAY,MAAM,GAAI,CAAA;AAAA,MACvB,gBAAAH,EAAC,UAAK,UAAY,eAAA,CAAA;AAAA,IAAA,GACtB;AAAA,sBAGH,QAAK,EAAA,WAAWD,EAAO,WAAY,iCAAc,KAAK,CAAA;AAAA,EAAA,GAC3D;AAAA,EACC,gBAAAD,EAAA,OAAA,EAAI,WAAWC,EAAO,SAClB,UAAA;AAAA,IAAAN,KACI,gBAAAO,EAAA,UAAA,EAAO,MAAK,UAAS,cAAW,eAAc,SAASP,GAAS,WAAWM,EAAO,OAC/E,UAAA,gBAAAC,EAACI,GAAa,EAAA,MAAM,GAAI,CAAA,GAC5B;AAAA,sBAEH,OAAI,EAAA,WAAWL,EAAO,OAAO,cAAYP,IAAS,SAAS,UACxD,UAAA,gBAAAQ,EAACK,KAAc,MAAM,IAAI,WAAWN,EAAO,OAAO,EACtD,CAAA;AAAA,EAAA,EACJ,CAAA;AAAA,GACJ;AAGRV,EAAiB,cAAc;AAElB,MAAAiB,IAA+BC,EAAkDlB,CAAgB;"}
+{"version":3,"file":"fondue-components37.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,IAAA;AAAA,EAGZ;AAAA,EACA,iBAAiB;AAAA,IACb,MAAM;AAAA,IACN,UAAU;AAAA,EAAA;AAElB,CAAC,GAEYC,IACT;"}

package/dist/fondue-components38.js

@@ -1,133 +1,35 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { forwardRef as N, useState as b, useEffect as R } from "react";
-import { Select as c } from "./fondue-components20.js";
-import { TextInput as r } from "./fondue-components26.js";
-import a from "./fondue-components39.js";
-import { rgbColorToHex as d, isValidHexColor as m, hexColorToRgba as I, getLimitedColorChannelValue as o, DEFAULT_COLOR as x, DEFAULT_FORMAT as S } from "./fondue-components40.js";
-const h = ({
-  currentColor: t = x,
-  onColorChange: i = () => {
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import { RgbaColorPicker as m } from "react-colorful";
+import t from "./fondue-components41.js";
+import { DEFAULT_COLOR as s } from "./fondue-components42.js";
+const i = ({
+  currentColor: e = s,
+  onColorChange: d = () => {
   },
-  currentFormat: s = S,
-  setCurrentFormat: v = () => {
-  },
-  "data-test-id": f = "color-picker-value-input"
-}, g) => {
-  const [u, p] = b(d(t));
-  return R(() => {
-    p(d(t));
-  }, [t]), /* @__PURE__ */ n("div", { className: a.inputs, "data-test-id": f, ref: g, children: [
-    /* @__PURE__ */ e("div", { className: a.colorFormatInput, children: /* @__PURE__ */ n(
-      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__ */ n("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: o(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: o(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: o(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__ */ n(
-      r.Root,
-      {
-        "data-test-id": "color-picker-value-input-alpha",
-        className: a.valueInput,
-        value: t.alpha === void 0 ? 100 : Math.trunc(t.alpha * 100).toString(),
-        type: "number",
-        onChange: (l) => {
-          i({
-            ...t,
-            alpha: o(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 = N(h);
+  "data-test-id": o = "color-picker-input"
+}, p) => /* @__PURE__ */ r("div", { className: t.gradientInput, "data-test-id": o, ref: p, children: /* @__PURE__ */ r(
+  m,
+  {
+    className: t.reactColorful,
+    color: {
+      r: e.red,
+      g: e.green,
+      b: e.blue,
+      a: e.alpha === void 0 ? 1 : e.alpha
+    },
+    onChange: (a) => d({
+      red: a.r,
+      green: a.g,
+      blue: a.b,
+      alpha: a.a
+    })
+  }
+) });
+i.displayName = "ColorPicker.Gradient";
+const u = n(i);
 export {
-  h as ColorValueInput,
-  E as ForwardedRefColorValueInput
+  i as ColorGradientInput,
+  u as ForwardedRefColorGradientInput
 };
 //# sourceMappingURL=fondue-components38.js.map