@frontify/fondue-components 24.0.0-rc.3 → 24.0.0

package/dist/fondue-components43.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components43.js","sources":["../src/components/Button/styles/buttonStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { FOCUS_OUTLINE } from '#/utilities/focusStyle';\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const buttonStyles = sv({\n    base:\n        'tw-group tw-relative tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-center tw-cursor-pointer tw-font-primary tw-font-medium tw-box-border tw-whitespace-nowrap tw-transition-colors ' +\n        `${FOCUS_OUTLINE}`,\n    variants: {\n        disabled: {\n            true: 'tw-cursor-not-allowed tw-pointer-events-none tw-bg-container-disabled',\n        },\n        rounding: {\n            medium: 'tw-rounded-medium',\n            full: 'tw-rounded-full',\n        },\n        size: {\n            small: 'tw-h-6 tw-body-small',\n            medium: 'tw-h-9 tw-body-medium',\n            large: 'tw-h-12 tw-body-large',\n        },\n        aspect: {\n            square: 'tw-aspect-square tw-px-0',\n            default: '',\n        },\n        hugWidth: {\n            false: 'tw-w-full',\n        },\n        emphasis: {\n            default: '',\n            weak: '',\n            strong: '',\n        },\n        variant: {\n            default: '',\n            positive: '',\n            negative: '',\n            danger: '',\n            loud: '',\n        },\n    },\n    compoundVariants: [\n        {\n            disabled: false,\n            variant: 'default',\n            emphasis: 'default',\n            class:\n                'tw-bg-container-secondary ' +\n                'hover:tw-bg-container-secondary-hover ' +\n                'active:tw-bg-container-secondary-active',\n        },\n        {\n            disabled: false,\n            variant: 'default',\n            emphasis: 'weak',\n            class: 'hover:tw-bg-container-secondary-hover active:tw-bg-container-secondary-active',\n        },\n        {\n            disabled: false,\n            variant: 'default',\n            emphasis: 'strong',\n            class: 'tw-bg-primary hover:tw-bg-primary-hover active:tw-bg-primary-active',\n        },\n        {\n            disabled: false,\n            variant: 'positive',\n            emphasis: 'default',\n            class:\n                'tw-bg-container-success ' +\n                'hover:tw-bg-container-success-hover ' +\n                'active:tw-bg-container-success-active',\n        },\n        {\n            disabled: false,\n            variant: 'positive',\n            emphasis: 'weak',\n            class: 'hover:tw-bg-container-success-hover active:tw-bg-container-success-active',\n        },\n        {\n            disabled: false,\n            variant: 'positive',\n            emphasis: 'strong',\n            class: 'tw-bg-success hover:tw-bg-success-hover active:tw-bg-success-active',\n        },\n        {\n            disabled: false,\n            variant: 'negative',\n            emphasis: 'default',\n            class: 'tw-bg-container-error hover:tw-bg-container-error-hover active:tw-bg-container-error-active',\n        },\n        {\n            disabled: false,\n            variant: 'negative',\n            emphasis: 'weak',\n            class: 'hover:tw-bg-container-error-hover active:tw-bg-container-error-active',\n        },\n        {\n            disabled: false,\n            variant: 'negative',\n            emphasis: 'strong',\n            class: 'tw-bg-error hover:tw-bg-error-hover active:tw-bg-error-active',\n        },\n        {\n            disabled: false,\n            variant: 'danger',\n            emphasis: 'default',\n            class: 'tw-bg-error hover:tw-bg-error-hover active:tw-bg-error-active',\n        },\n        {\n            disabled: false,\n            variant: 'danger',\n            emphasis: 'weak',\n            class: 'tw-bg-error hover:tw-bg-error-hover active:tw-bg-error-active',\n        },\n        {\n            disabled: false,\n            variant: 'danger',\n            emphasis: 'strong',\n            class: 'tw-bg-error hover:tw-bg-error-hover active:tw-bg-error-active',\n        },\n        {\n            disabled: false,\n            variant: 'loud',\n            emphasis: 'default',\n            class: 'tw-bg-container-highlight hover:tw-bg-container-highlight-hover active:tw-bg-container-highlight-active',\n        },\n        {\n            disabled: false,\n            variant: 'loud',\n            emphasis: 'weak',\n            class: 'tw-border-transparent hover:tw-bg-container-highlight-hover active:tw-bg-container-highlight-active',\n        },\n        {\n            disabled: false,\n            variant: 'loud',\n            emphasis: 'strong',\n            class: 'tw-bg-highlight hover:tw-bg-highlight-hover active:tw-bg-highlight-active',\n        },\n        {\n            aspect: 'default',\n            size: 'small',\n            class: 'tw-px-3 tw-gap-1.5',\n        },\n        {\n            aspect: 'default',\n            size: 'medium',\n            class: 'tw-px-4 tw-gap-1.5',\n        },\n        {\n            aspect: 'default',\n            size: 'large',\n            class: 'tw-px-6 tw-gap-2',\n        },\n    ],\n    defaultVariants: {\n        variant: 'default',\n        emphasis: 'strong',\n        size: 'medium',\n        rounding: 'medium',\n        hugWidth: true,\n        aspect: 'default',\n        disabled: false,\n    },\n});\n"],"names":["buttonStyles","sv","FOCUS_OUTLINE"],"mappings":";;AAKO,MAAMA,IAAeC,EAAG;AAAA,EAC3B,MACI,gMACGC,CAAa;AAAA,EACpB,UAAU;AAAA,IACN,UAAU;AAAA,MACN,MAAM;AAAA,IAAA;AAAA,IAEV,UAAU;AAAA,MACN,QAAQ;AAAA,MACR,MAAM;AAAA,IAAA;AAAA,IAEV,MAAM;AAAA,MACF,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,IAAA;AAAA,IAEX,QAAQ;AAAA,MACJ,QAAQ;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,IAEb,UAAU;AAAA,MACN,OAAO;AAAA,IAAA;AAAA,IAEX,UAAU;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,MACN,QAAQ;AAAA,IAAA;AAAA,IAEZ,SAAS;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,MAAM;AAAA,IAAA;AAAA,EACV;AAAA,EAEJ,kBAAkB;AAAA,IACd;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,IAIR;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,IAIR;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IAAA;AAAA,EACX;AAAA,EAEJ,iBAAiB;AAAA,IACb,SAAS;AAAA,IACT,UAAU;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA,IACV,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,UAAU;AAAA,EAAA;AAElB,CAAC;"}
+{"version":3,"file":"fondue-components43.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,IAAA;AAAA,IAEZ,SAAS;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,MAAM;AAAA,IAAA;AAAA,IAEV,UAAU;AAAA,MACN,MAAM;AAAA,IAAA;AAAA,EACV;AAAA,EAEJ,kBAAkB;AAAA,IACd;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,IAIR;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,IAIR;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,IAIR;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,IAIR;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,IAIR;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,IAIR;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,IAIR;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,IAIR;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,IAIR;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,IAIR;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,IAIR;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,IAIR;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,IAIR;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,IAIR;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,EAGR;AAAA,EAEJ,iBAAiB;AAAA,IACb,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,EAAA;AAElB,CAAC;"}

package/dist/fondue-components44.js

@@ -1,121 +1,24 @@
-import { sv as e } from "./fondue-components42.js";
+import { FOCUS_OUTLINE as t } from "./fondue-components90.js";
+import { sv as e } from "./fondue-components40.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 data-[readonly="true"]:tw-pointer-events-none ${t}`,
   variants: {
-    emphasis: {
-      default: "",
-      weak: "",
-      strong: ""
-    },
-    variant: {
-      default: "",
-      positive: "",
-      negative: "",
-      danger: "",
-      loud: ""
+    size: {
+      default: "tw-size-4",
+      large: "tw-size-5"
     },
-    disabled: {
-      true: "tw-text-container-disabled-on-disabled-container"
+    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 '
     }
   },
-  compoundVariants: [
-    {
-      disabled: !1,
-      variant: "default",
-      emphasis: "default",
-      class: "[&_svg]:tw-text-primary [&_svg]:hover:tw-text-primary[&_svg]:active:tw-text-primary [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      variant: "default",
-      emphasis: "weak",
-      class: "[&_svg]:tw-text-primary [&_svg]:hover:tw-text-primary [&_svg]:active:tw-text-primary [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      variant: "default",
-      emphasis: "strong",
-      class: "[&_svg]:tw-text-primary-on-primary [&_svg]:hover:tw-text-primary-on-primary [&_svg]:active:tw-text-primary-on-primary [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      variant: "positive",
-      emphasis: "default",
-      class: "[&_svg]:tw-text-container-success-on-success-container [&_svg]:hover:tw-text-container-success-on-success-container[&_svg]:active:tw-text-container-success-on-success-container [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      variant: "positive",
-      emphasis: "weak",
-      class: "[&_svg]:tw-text-success [&_svg]:hover:tw-text-container-success-on-success-container [&_svg]:active:tw-text-container-success-on-success-container [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      variant: "positive",
-      emphasis: "strong",
-      class: "[&_svg]:tw-text-success-on-success[&_svg]:hover:tw-text-success-on-success [&_svg]:active:tw-text-success-on-success [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      variant: "negative",
-      emphasis: "default",
-      class: "[&_svg]:tw-text-container-error-on-error-container [&_svg]:hover:tw-text-button-negative-icon-hover[&_svg]:active:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      variant: "negative",
-      emphasis: "weak",
-      class: "[&_svg]:tw-text-error [&_svg]:hover:tw-text-container-error-on-error-container [&_svg]:active:tw-text-container-error-on-error-container [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      variant: "negative",
-      emphasis: "strong",
-      class: "[&_svg]:tw-text-error-on-error [&_svg]:hover:tw-text-error-on-error[&_svg]:active:tw-text-error-on-error [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      variant: "danger",
-      emphasis: "default",
-      class: "[&_svg]:tw-text-error-on-error [&_svg]:hover:tw-text-error-on-error [&_svg]:active:tw-text-error-on-error [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      variant: "danger",
-      emphasis: "weak",
-      class: "[&_svg]:tw-text-error-on-error [&_svg]:hover:tw-text-error-on-error [&_svg]:active:tw-text-error-on-error [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      variant: "danger",
-      emphasis: "strong",
-      class: "[&_svg]:tw-text-error-on-error [&_svg]:hover:tw-text-error-on-error[&_svg]:active:tw-text-error-on-error [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      variant: "loud",
-      emphasis: "default",
-      class: "[&_svg]:tw-text-container-highlight-on-highlight-container [&_svg]:hover:tw-text-container-highlight-on-highlight-container [&_svg]:active:tw-text-container-highlight-on-highlight-container [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      variant: "loud",
-      emphasis: "weak",
-      class: "[&_svg]:tw-text-highlight[&_svg]:hover:tw-text-container-highlight-on-highlight-container [&_svg]:active:tw-text-container-highlight-on-highlight-container [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      variant: "loud",
-      emphasis: "strong",
-      class: "[&_svg]:tw-text-highlight-on-highlight [&_svg]:hover:tw-text-highlight-on-highlight [&_svg]:active:tw-text-highlight-on-highlight [&_svg]:tw-leading-none"
-    }
-  ],
   defaultVariants: {
-    emphasis: "strong",
-    variant: "default",
-    disabled: !1
+    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 {
-  s as iconStyles
+  o as checkboxIndicatorStyles,
+  s as checkboxStyles
 };
 //# sourceMappingURL=fondue-components44.js.map

package/dist/fondue-components44.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components44.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-container-disabled-on-disabled-container',\n        },\n    },\n    compoundVariants: [\n        {\n            disabled: false,\n            variant: 'default',\n            emphasis: 'default',\n            class:\n                '[&_svg]:tw-text-primary ' +\n                '[&_svg]:hover:tw-text-primary' +\n                '[&_svg]:active:tw-text-primary [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            variant: 'default',\n            emphasis: 'weak',\n            class:\n                '[&_svg]:tw-text-primary ' +\n                '[&_svg]:hover:tw-text-primary ' +\n                '[&_svg]:active:tw-text-primary [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            variant: 'default',\n            emphasis: 'strong',\n            class:\n                '[&_svg]:tw-text-primary-on-primary ' +\n                '[&_svg]:hover:tw-text-primary-on-primary ' +\n                '[&_svg]:active:tw-text-primary-on-primary [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            variant: 'positive',\n            emphasis: 'default',\n            class:\n                '[&_svg]:tw-text-container-success-on-success-container ' +\n                '[&_svg]:hover:tw-text-container-success-on-success-container' +\n                '[&_svg]:active:tw-text-container-success-on-success-container [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            variant: 'positive',\n            emphasis: 'weak',\n            class:\n                '[&_svg]:tw-text-success ' +\n                '[&_svg]:hover:tw-text-container-success-on-success-container ' +\n                '[&_svg]:active:tw-text-container-success-on-success-container [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            variant: 'positive',\n            emphasis: 'strong',\n            class:\n                '[&_svg]:tw-text-success-on-success' +\n                '[&_svg]:hover:tw-text-success-on-success ' +\n                '[&_svg]:active:tw-text-success-on-success [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            variant: 'negative',\n            emphasis: 'default',\n            class:\n                '[&_svg]:tw-text-container-error-on-error-container ' +\n                '[&_svg]:hover:tw-text-button-negative-icon-hover' +\n                '[&_svg]:active: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-error ' +\n                '[&_svg]:hover:tw-text-container-error-on-error-container ' +\n                '[&_svg]:active:tw-text-container-error-on-error-container [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            variant: 'negative',\n            emphasis: 'strong',\n            class:\n                '[&_svg]:tw-text-error-on-error ' +\n                '[&_svg]:hover:tw-text-error-on-error' +\n                '[&_svg]:active:tw-text-error-on-error [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            variant: 'danger',\n            emphasis: 'default',\n            class:\n                '[&_svg]:tw-text-error-on-error ' +\n                '[&_svg]:hover:tw-text-error-on-error ' +\n                '[&_svg]:active:tw-text-error-on-error [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            variant: 'danger',\n            emphasis: 'weak',\n            class:\n                '[&_svg]:tw-text-error-on-error ' +\n                '[&_svg]:hover:tw-text-error-on-error ' +\n                '[&_svg]:active:tw-text-error-on-error [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            variant: 'danger',\n            emphasis: 'strong',\n            class:\n                '[&_svg]:tw-text-error-on-error ' +\n                '[&_svg]:hover:tw-text-error-on-error' +\n                '[&_svg]:active:tw-text-error-on-error [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            variant: 'loud',\n            emphasis: 'default',\n            class:\n                '[&_svg]:tw-text-container-highlight-on-highlight-container ' +\n                '[&_svg]:hover:tw-text-container-highlight-on-highlight-container ' +\n                '[&_svg]:active:tw-text-container-highlight-on-highlight-container [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            variant: 'loud',\n            emphasis: 'weak',\n            class:\n                '[&_svg]:tw-text-highlight' +\n                '[&_svg]:hover:tw-text-container-highlight-on-highlight-container ' +\n                '[&_svg]:active:tw-text-container-highlight-on-highlight-container [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            variant: 'loud',\n            emphasis: 'strong',\n            class:\n                '[&_svg]:tw-text-highlight-on-highlight ' +\n                '[&_svg]:hover:tw-text-highlight-on-highlight ' +\n                '[&_svg]:active:tw-text-highlight-on-highlight [&_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,IAAA;AAAA,IAEZ,SAAS;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,MAAM;AAAA,IAAA;AAAA,IAEV,UAAU;AAAA,MACN,MAAM;AAAA,IAAA;AAAA,EACV;AAAA,EAEJ,kBAAkB;AAAA,IACd;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,IAIR;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,IAIR;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,IAIR;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,IAIR;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,IAIR;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,IAIR;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,IAIR;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,IAIR;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,IAIR;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,IAIR;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,IAIR;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,IAIR;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,IAIR;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,IAIR;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,EAGR;AAAA,EAEJ,iBAAiB;AAAA,IACb,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,EAAA;AAElB,CAAC;"}
+{"version":3,"file":"fondue-components44.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        'data-[readonly=\"true\"]:tw-pointer-events-none ' +\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,2eAIGC,CAAa;AAAA,EACpB,UAAU;AAAA,IACN,MAAM;AAAA,MACF,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,IAEX,UAAU;AAAA,MACN,SACI;AAAA,MAEJ,MACI;AAAA,IAAA;AAAA,EAER;AAAA,EAEJ,iBAAiB;AAAA,IACb,MAAM;AAAA,IACN,UAAU;AAAA,EAAA;AAElB,CAAC,GAEYC,IACT;"}

package/dist/fondue-components45.js

@@ -1,121 +1,35 @@
-import { sv as e } from "./fondue-components42.js";
-const r = e({
-  variants: {
-    emphasis: {
-      default: "",
-      weak: "",
-      strong: ""
-    },
-    variant: {
-      default: "",
-      positive: "",
-      negative: "",
-      danger: "",
-      loud: ""
-    },
-    disabled: {
-      true: "tw-text-container-disabled-on-disabled-container"
-    }
+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-components48.js";
+import { DEFAULT_COLOR as s } from "./fondue-components49.js";
+const i = ({
+  currentColor: a = s,
+  onColorChange: d = () => {
   },
-  compoundVariants: [
-    {
-      disabled: !1,
-      variant: "default",
-      emphasis: "default",
-      class: "tw-text-primary hover:tw-text-primary-hover active:tw-text-primary-pressed"
-    },
-    {
-      disabled: !1,
-      variant: "default",
-      emphasis: "weak",
-      class: "tw-text-primary hover:tw-text-primary-hover active:tw-text-primary-pressed"
-    },
-    {
-      disabled: !1,
-      variant: "default",
-      emphasis: "strong",
-      class: "tw-text-primary-on-primary hover:tw-text-primary-on-primary-hover active:tw-text-primary-on-primary-pressed"
-    },
-    {
-      disabled: !1,
-      variant: "positive",
-      emphasis: "default",
-      class: "tw-text-container-success-on-success-container hover:tw-text-container-success-on-success-container active:tw-text-container-success-on-success-container-pressed"
-    },
-    {
-      disabled: !1,
-      variant: "positive",
-      emphasis: "weak",
-      class: "tw-text-success hover:tw-text-container-success-on-success-container active:tw-text-container-success-on-success-container"
-    },
-    {
-      disabled: !1,
-      variant: "positive",
-      emphasis: "strong",
-      class: "tw-text-success-on-success hover:tw-text-success-on-success active:tw-text-success-on-success"
-    },
-    {
-      disabled: !1,
-      variant: "negative",
-      emphasis: "default",
-      class: "tw-text-container-error-on-error-container hover:tw-text-container-error-on-error-container active:tw-text-container-error-on-error-container"
-    },
-    {
-      disabled: !1,
-      variant: "negative",
-      emphasis: "weak",
-      class: "tw-text-error hover:tw-text-container-error-on-error-container active:tw-text-container-error-on-error-container"
-    },
-    {
-      disabled: !1,
-      variant: "negative",
-      emphasis: "strong",
-      class: "tw-text-error-on-error hover:tw-text-error-on-error active:tw-text-error-on-error"
-    },
-    {
-      disabled: !1,
-      variant: "danger",
-      emphasis: "default",
-      class: "tw-text-error-on-error hover:tw-text-error-on-error active:tw-text-error-on-error"
-    },
-    {
-      disabled: !1,
-      variant: "danger",
-      emphasis: "weak",
-      class: "tw-text-error-on-error hover:tw-text-error-on-error active:tw-text-error-on-error"
-    },
-    {
-      disabled: !1,
-      variant: "danger",
-      emphasis: "strong",
-      class: "tw-text-error-on-error hover:tw-text-error-on-error active:tw-text-error-on-error"
-    },
-    {
-      disabled: !1,
-      variant: "loud",
-      emphasis: "default",
-      class: "tw-text-container-highlight-on-highlight-container hover:tw-text-container-highlight-on-highlight-container active:tw-text-container-highlight-on-highlight-container"
-    },
-    {
-      disabled: !1,
-      variant: "loud",
-      emphasis: "weak",
-      class: "tw-text-highlight hover:tw-text-container-highlight-on-highlight-container active:tw-text-container-highlight-on-highlight-container"
-    },
-    {
-      disabled: !1,
-      variant: "loud",
-      emphasis: "strong",
-      class: "tw-text-highlight-on-highlight hover:tw-text-highlight-on-highlight active:tw-text-highlight-on-highlight"
-    }
-  ],
-  defaultVariants: {
-    emphasis: "strong",
-    variant: "default",
-    disabled: !1
+  "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 {
-  r as textStyles
+  i as ColorGradientInput,
+  c as ForwardedRefColorGradientInput
 };
 //# sourceMappingURL=fondue-components45.js.map

package/dist/fondue-components45.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components45.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-container-disabled-on-disabled-container',\n        },\n    },\n    compoundVariants: [\n        {\n            disabled: false,\n            variant: 'default',\n            emphasis: 'default',\n            class: 'tw-text-primary hover:tw-text-primary-hover active:tw-text-primary-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'default',\n            emphasis: 'weak',\n            class: 'tw-text-primary hover:tw-text-primary-hover active:tw-text-primary-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'default',\n            emphasis: 'strong',\n            class:\n                'tw-text-primary-on-primary ' +\n                'hover:tw-text-primary-on-primary-hover ' +\n                'active:tw-text-primary-on-primary-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'positive',\n            emphasis: 'default',\n            class:\n                'tw-text-container-success-on-success-container ' +\n                'hover:tw-text-container-success-on-success-container ' +\n                'active:tw-text-container-success-on-success-container-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'positive',\n            emphasis: 'weak',\n            class:\n                'tw-text-success ' +\n                'hover:tw-text-container-success-on-success-container ' +\n                'active:tw-text-container-success-on-success-container',\n        },\n        {\n            disabled: false,\n            variant: 'positive',\n            emphasis: 'strong',\n            class:\n                'tw-text-success-on-success ' +\n                'hover:tw-text-success-on-success ' +\n                'active:tw-text-success-on-success',\n        },\n        {\n            disabled: false,\n            variant: 'negative',\n            emphasis: 'default',\n            class:\n                'tw-text-container-error-on-error-container ' +\n                'hover:tw-text-container-error-on-error-container ' +\n                'active:tw-text-container-error-on-error-container',\n        },\n        {\n            disabled: false,\n            variant: 'negative',\n            emphasis: 'weak',\n            class:\n                'tw-text-error ' +\n                'hover:tw-text-container-error-on-error-container ' +\n                'active:tw-text-container-error-on-error-container',\n        },\n        {\n            disabled: false,\n            variant: 'negative',\n            emphasis: 'strong',\n            class: 'tw-text-error-on-error hover:tw-text-error-on-error active:tw-text-error-on-error',\n        },\n        {\n            disabled: false,\n            variant: 'danger',\n            emphasis: 'default',\n            class: 'tw-text-error-on-error hover:tw-text-error-on-error active:tw-text-error-on-error',\n        },\n        {\n            disabled: false,\n            variant: 'danger',\n            emphasis: 'weak',\n            class: 'tw-text-error-on-error hover:tw-text-error-on-error active:tw-text-error-on-error',\n        },\n        {\n            disabled: false,\n            variant: 'danger',\n            emphasis: 'strong',\n            class: 'tw-text-error-on-error hover:tw-text-error-on-error active:tw-text-error-on-error',\n        },\n        {\n            disabled: false,\n            variant: 'loud',\n            emphasis: 'default',\n            class:\n                'tw-text-container-highlight-on-highlight-container ' +\n                'hover:tw-text-container-highlight-on-highlight-container ' +\n                'active:tw-text-container-highlight-on-highlight-container',\n        },\n        {\n            disabled: false,\n            variant: 'loud',\n            emphasis: 'weak',\n            class:\n                'tw-text-highlight ' +\n                'hover:tw-text-container-highlight-on-highlight-container ' +\n                'active:tw-text-container-highlight-on-highlight-container',\n        },\n        {\n            disabled: false,\n            variant: 'loud',\n            emphasis: 'strong',\n            class:\n                'tw-text-highlight-on-highlight ' +\n                'hover:tw-text-highlight-on-highlight ' +\n                'active:tw-text-highlight-on-highlight',\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,IAAA;AAAA,IAEZ,SAAS;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,MAAM;AAAA,IAAA;AAAA,IAEV,UAAU;AAAA,MACN,MAAM;AAAA,IAAA;AAAA,EACV;AAAA,EAEJ,kBAAkB;AAAA,IACd;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,IAIR;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,IAIR;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,IAIR;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,IAIR;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,IAIR;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,IAIR;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,IAIR;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,IAIR;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,EAGR;AAAA,EAEJ,iBAAiB;AAAA,IACb,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,EAAA;AAElB,CAAC;"}
+{"version":3,"file":"fondue-components45.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-components46.js

@@ -1,24 +1,57 @@
-import { FOCUS_OUTLINE as t } from "./fondue-components92.js";
-import { sv as e } from "./fondue-components42.js";
-const r = e({
-  base: `tw-peer tw-relative tw-inline-flex tw-bg-surface tw-text-white tw-shrink-0 tw-rounded-medium tw-border tw-border-line-mid group-hover:tw-border-line-strong hover:tw-border-line-strong tw-transition-colors data-[state="checked"]:tw-border-transparent data-[state="indeterminate"]:tw-border-transparent disabled:tw-border-line-strong disabled:tw-bg-surface disabled:tw-cursor-not-allowed data-[state="checked"]:disabled:tw-bg-disabled data-[readonly="true"]:tw-pointer-events-none ${t}`,
-  variants: {
-    size: {
-      default: "tw-size-4",
-      large: "tw-size-5"
-    },
-    emphasis: {
-      default: 'data-[state="checked"]:tw-bg-highlight data-[state="checked"]:hover:tw-bg-highlight-hover data-[state="checked"]:active:tw-bg-highlight-active data-[state="indeterminate"]:tw-bg-highlight data-[state="indeterminate"]:hover:tw-bg-highlight-hover data-[state="indeterminate"]:active:tw-bg-highlight-active ',
-      weak: 'data-[state="checked"]:tw-bg-primary data-[state="checked"]:hover:tw-bg-primary-hover data-[state="checked"]:active:tw-bg-primary-active data-[state="indeterminate"]:tw-bg-primary data-[state="indeterminate"]:hover:tw-bg-primary-hover data-[state="indeterminate"]:active:tw-bg-primary-active '
-    }
-  },
-  defaultVariants: {
-    size: "default",
-    emphasis: "default"
-  }
-}), d = '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 ';
+import { jsxs as t, jsx as s, Fragment as h } 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-components35.js";
+import { Button as y } from "./fondue-components6.js";
+import a from "./fondue-components89.js";
+import { getColorWithName as z, colorToCss as x } from "./fondue-components49.js";
+const c = ({
+  id: m,
+  currentColor: e,
+  isOpen: l,
+  disabled: o = !1,
+  onClear: i,
+  onClick: r,
+  "data-test-id": d = "color-picker-input",
+  ...n
+}, p) => {
+  const { t: f } = w(), N = (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": d, children: [
+    /* @__PURE__ */ t(
+      "button",
+      {
+        className: a.button,
+        ...n,
+        disabled: o,
+        onClick: r,
+        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(h, { children: [
+            /* @__PURE__ */ s(I, { size: 16 }),
+            /* @__PURE__ */ s("span", { children: f("ColorPicker_selectColor") })
+          ] }),
+          /* @__PURE__ */ s("span", { className: a.colorName, children: N })
+        ]
+      }
+    ),
+    /* @__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": l ? "open" : "closed", children: /* @__PURE__ */ s(v, { size: 16, className: a.caret }) })
+    ] })
+  ] });
+};
+c.displayName = "ColorPicker.Input";
+const F = P(c);
 export {
-  d as checkboxIndicatorStyles,
-  r as checkboxStyles
+  c as ColorPickerInput,
+  F as ForwardedRefColorPickerInput
 };
 //# sourceMappingURL=fondue-components46.js.map

package/dist/fondue-components46.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components46.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-surface tw-text-white tw-shrink-0 tw-rounded-medium tw-border tw-border-line-mid group-hover:tw-border-line-strong hover:tw-border-line-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-surface disabled:tw-cursor-not-allowed data-[state=\"checked\"]:disabled:tw-bg-disabled ' +\n        'data-[readonly=\"true\"]:tw-pointer-events-none ' +\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-highlight data-[state=\"checked\"]:hover:tw-bg-highlight-hover data-[state=\"checked\"]:active:tw-bg-highlight-active ' +\n                'data-[state=\"indeterminate\"]:tw-bg-highlight data-[state=\"indeterminate\"]:hover:tw-bg-highlight-hover data-[state=\"indeterminate\"]:active:tw-bg-highlight-active ',\n            weak:\n                'data-[state=\"checked\"]:tw-bg-primary data-[state=\"checked\"]:hover:tw-bg-primary-hover data-[state=\"checked\"]:active:tw-bg-primary-active ' +\n                'data-[state=\"indeterminate\"]:tw-bg-primary data-[state=\"indeterminate\"]:hover:tw-bg-primary-hover data-[state=\"indeterminate\"]:active:tw-bg-primary-active ',\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,keAIGC,CAAa;AAAA,EACpB,UAAU;AAAA,IACN,MAAM;AAAA,MACF,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,IAEX,UAAU;AAAA,MACN,SACI;AAAA,MAEJ,MACI;AAAA,IAAA;AAAA,EAER;AAAA,EAEJ,iBAAiB;AAAA,IACb,MAAM;AAAA,IACN,UAAU;AAAA,EAAA;AAElB,CAAC,GAEYC,IACT;"}
+{"version":3,"file":"fondue-components46.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} 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","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,wBAEH,OAAA,EAAI,WAAWA,EAAO,OAAO,cAAYZ,IAAS,SAAS,UACxD,UAAA,gBAAAa,EAACM,KAAc,MAAM,IAAI,WAAWP,EAAO,OAAO,EAAA,CACtD;AAAA,IAAA,EAAA,CACJ;AAAA,EAAA,GACJ;AAER;AACAf,EAAiB,cAAc;AAExB,MAAMuB,IAA+BC,EAAkDxB,CAAgB;"}