@frontify/fondue-components 3.1.0 → 3.2.0

package/dist/fondue-components27.js

@@ -1,28 +1,121 @@
-import { useMemo as f, useCallback as d, useState as v, useRef as S, useEffect as m } from "react";
-const U = ({
-  prop: e,
-  defaultProp: n,
-  onChange: s = () => {
+import { sv as t } from "./fondue-components24.js";
+const s = t({
+  variants: {
+    emphasis: {
+      default: "",
+      weak: "",
+      strong: ""
+    },
+    variant: {
+      default: "",
+      positive: "",
+      negative: "",
+      danger: "",
+      loud: ""
+    },
+    disabled: {
+      true: "tw-text-box-disabled-inverse"
+    }
+  },
+  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
   }
-}) => {
-  const [o, c] = b({ defaultProp: n, onChange: s }), t = e !== void 0, i = t ? e : o, r = f(() => s, [s]), a = d(
-    (l) => {
-      if (t) {
-        const u = typeof l == "function" ? l(e) : l;
-        u !== e && r(u);
-      } else
-        c(l);
-    },
-    [t, e, c, r]
-  );
-  return [i, a];
-}, b = ({ defaultProp: e, onChange: n }) => {
-  const s = v(e), [o] = s, c = S(o), t = f(() => n, [n]);
-  return m(() => {
-    c.current !== o && (t == null || t(o), c.current = o);
-  }, [o, c, t]), s;
-};
+});
 export {
-  U as useControllableState
+  s as textStyles
 };
 //# sourceMappingURL=fondue-components27.js.map

package/dist/fondue-components27.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components27.js","sources":["../src/hooks/useControllableState.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type Dispatch, type SetStateAction, useCallback, useMemo, useState, useRef, useEffect } from 'react';\n\n// Radix UI handy hook for handling controlled and uncontrolled state\n// Source: https://github.com/radix-ui/primitives/blob/main/packages/react/use-controllable-state/src/useControllableState.tsx\n\ntype UseControllableStateParams<TValue> = {\n    prop?: TValue;\n    defaultProp?: TValue;\n    onChange?: (state: TValue) => void;\n};\n\ntype SetStateFn<T> = (prevState?: T) => T;\n\nexport const useControllableState = <TValue>({\n    prop,\n    defaultProp,\n    onChange = () => {},\n}: UseControllableStateParams<TValue>) => {\n    const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({ defaultProp, onChange });\n    const isControlled = prop !== undefined;\n    const value = isControlled ? prop : uncontrolledProp;\n    const handleChange = useMemo(() => onChange, [onChange]);\n\n    const setValue: Dispatch<SetStateAction<TValue | undefined>> = useCallback(\n        (nextValue) => {\n            if (isControlled) {\n                const setter = nextValue as SetStateFn<TValue>;\n                const value = typeof nextValue === 'function' ? setter(prop) : nextValue;\n                if (value !== prop) {\n                    handleChange(value as TValue);\n                }\n            } else {\n                setUncontrolledProp(nextValue);\n            }\n        },\n        [isControlled, prop, setUncontrolledProp, handleChange],\n    );\n\n    return [value, setValue] as const;\n};\n\nconst useUncontrolledState = <TValue>({ defaultProp, onChange }: Omit<UseControllableStateParams<TValue>, 'prop'>) => {\n    const uncontrolledState = useState<TValue | undefined>(defaultProp);\n    const [value] = uncontrolledState;\n    const prevValueRef = useRef(value);\n    const handleChange = useMemo(() => onChange, [onChange]);\n\n    useEffect(() => {\n        if (prevValueRef.current !== value) {\n            handleChange?.(value as TValue);\n            prevValueRef.current = value;\n        }\n    }, [value, prevValueRef, handleChange]);\n\n    return uncontrolledState;\n};\n"],"names":["useControllableState","prop","defaultProp","onChange","uncontrolledProp","setUncontrolledProp","useUncontrolledState","isControlled","value","handleChange","useMemo","setValue","useCallback","nextValue","uncontrolledState","useState","prevValueRef","useRef","useEffect"],"mappings":";AAeO,MAAMA,IAAuB,CAAS;AAAA,EACzC,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC,IAAW,MAAM;AAAA,EAAC;AACtB,MAA0C;AAChC,QAAA,CAACC,GAAkBC,CAAmB,IAAIC,EAAqB,EAAE,aAAAJ,GAAa,UAAAC,GAAU,GACxFI,IAAeN,MAAS,QACxBO,IAAQD,IAAeN,IAAOG,GAC9BK,IAAeC,EAAQ,MAAMP,GAAU,CAACA,CAAQ,CAAC,GAEjDQ,IAAyDC;AAAA,IAC3D,CAACC,MAAc;AACX,UAAIN,GAAc;AAEd,cAAMC,IAAQ,OAAOK,KAAc,aADpBA,EACwCZ,CAAI,IAAIY;AAC/D,QAAIL,MAAUP,KACVQ,EAAaD,CAAe;AAAA,MAChC;AAEA,QAAAH,EAAoBQ,CAAS;AAAA,IAErC;AAAA,IACA,CAACN,GAAcN,GAAMI,GAAqBI,CAAY;AAAA,EAAA;AAGnD,SAAA,CAACD,GAAOG,CAAQ;AAC3B,GAEML,IAAuB,CAAS,EAAE,aAAAJ,GAAa,UAAAC,QAAiE;AAC5G,QAAAW,IAAoBC,EAA6Bb,CAAW,GAC5D,CAACM,CAAK,IAAIM,GACVE,IAAeC,EAAOT,CAAK,GAC3BC,IAAeC,EAAQ,MAAMP,GAAU,CAACA,CAAQ,CAAC;AAEvD,SAAAe,EAAU,MAAM;AACR,IAAAF,EAAa,YAAYR,MACzBC,KAAA,QAAAA,EAAeD,IACfQ,EAAa,UAAUR;AAAA,EAE5B,GAAA,CAACA,GAAOQ,GAAcP,CAAY,CAAC,GAE/BK;AACX;"}
+{"version":3,"file":"fondue-components27.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,IACV;AAAA,EACJ;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,IAGR;AAAA,EACJ;AAAA,EACA,iBAAiB;AAAA,IACb,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,EACd;AACJ,CAAC;"}

package/dist/fondue-components28.js

@@ -1,12 +1,24 @@
-import { FOCUS_OUTLINE as t } from "./fondue-components37.js";
-const a = "tw-inline-grid tw-h-9 tw-grid-flow-col tw-auto-cols-[1fr] tw-items-stretch tw-bg-base-alt disabled:tw-bg-base-alt tw-border tw-border-line-strong tw-rounded tw-relative tw-min-w-max tw-font-sans tw-font-normal tw-text-center tw-isolate", n = `tw-peer tw-group tw-flex tw-items-stretch tw-justify-center tw-select-none first:tw-rounded-l-[calc(var(--radius)-var(--line-width))] [&:nth-last-child(2)]:tw-rounded-r-[calc(var(--radius)-var(--line-width))] ${t} focus-visible:tw-rounded-[calc(var(--radius)-var(--line-width))]`, o = "tw-hidden tw-absolute -tw-z-[1] tw-top-0 tw-left-0 tw-h-full tw-pointer-events-none tw-transition-transform before:tw-content-[''] before:tw-inset-0 before:tw-absolute before:tw-rounded-[calc(var(--radius)-var(--line-width))] before:tw-bg-white peer-disabled:before:tw-bg-box-disabled before:tw-shadow-[0_0_0_var(--line-width)_var(--line-color-xx-strong)] peer-disabled:before:tw-shadow-[0_0_0_var(--line-width)_var(--line-color-x-strong)] peer-data-[state=on]:tw-block [&:nth-child(2)]:tw-w-[calc(100%/1)] [&:nth-child(3)]:tw-w-[calc(100%/2)] [&:nth-child(4)]:tw-w-[calc(100%/3)] [&:nth-child(5)]:tw-w-[calc(100%/4)] [&:nth-child(6)]:tw-w-[calc(100%/5)] [&:nth-child(7)]:tw-w-[calc(100%/6)] [&:nth-child(8)]:tw-w-[calc(100%/7)] [&:nth-child(9)]:tw-w-[calc(100%/8)] [&:nth-child(10)]:tw-w-[calc(100%/9)] [&:nth-child(11)]:tw-w-[calc(100%/10)] peer-[[data-state=on]:nth-child(1)]:tw-translate-x-[0%] peer-[[data-state=on]:nth-child(2)]:tw-translate-x-[100%] peer-[[data-state=on]:nth-child(3)]:tw-translate-x-[200%] peer-[[data-state=on]:nth-child(4)]:tw-translate-x-[300%] peer-[[data-state=on]:nth-child(5)]:tw-translate-x-[400%] peer-[[data-state=on]:nth-child(6)]:tw-translate-x-[500%] peer-[[data-state=on]:nth-child(7)]:tw-translate-x-[600%] peer-[[data-state=on]:nth-child(8)]:tw-translate-x-[700%] peer-[[data-state=on]:nth-child(9)]:tw-translate-x-[800%] peer-[[data-state=on]:nth-child(10)]:tw-translate-x-[900%]", w = "-tw-z-[1] tw-min-w-px tw-w-px -tw-mx-[0.5px] tw-bg-line-strong tw-transition-opacity tw-ease-out group-first:tw-opacity-0 group-first:tw-ease-in group-data-[state=on]:tw-opacity-0 group-data-[state=on]:tw-ease-in group-focus-visible:tw-opacity-0 group-focus-visible:tw-ease-in [[data-state=on]_+_*_&]:tw-opacity-0 [[data-state=on]_+_*_&]:tw-ease-in group-focus-visible:tw-duration-0", r = "tw-flex tw-flex-grow tw-items-center tw-justify-center tw-rounded-[inherit] tw-px-4 tw-gap-2 tw-text-body-medium group-data-[state=off]:group-enabled:hover:tw-bg-[#00005506] [&_svg]:tw-shrink-0", i = "tw-inline-flex tw-gap-2 tw-items-center tw-justify-center tw-transition-opacity group-disabled:tw-text-box-disabled-inverse tw-font-medium tw-opacity-0 tw-ease-in group-data-[state=on]:tw-opacity-100 group-data-[state=on]:tw-ease-out", s = "tw-absolute tw-inline-flex tw-gap-2 tw-items-center tw-justify-center tw-transition-opacity group-disabled:tw-text-box-disabled-inverse tw-font-normal tw-opacity-100 tw-ease-out group-data-[state=on]:tw-opacity-0 group-data-[state=on]:tw-ease-in";
+import { FOCUS_OUTLINE as t } from "./fondue-components56.js";
+import { sv as e } from "./fondue-components24.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 segmentedControlActiveIndicatorStyles,
-  i as segmentedControlItemLabelActiveStyles,
-  s as segmentedControlItemLabelInactiveStyles,
-  r as segmentedControlItemLabelStyles,
-  w as segmentedControlItemSeparatorStyles,
-  n as segmentedControlItemStyles,
-  a as segmentedControlRootStyles
+  o as checkboxIndicatorStyles,
+  s as checkboxStyles
 };
 //# sourceMappingURL=fondue-components28.js.map

package/dist/fondue-components28.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components28.js","sources":["../src/components/SegmentedControl/styles/segmentedControlStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { FOCUS_OUTLINE } from '#/utilities/focusStyle';\n\nexport const segmentedControlRootStyles =\n    'tw-inline-grid tw-h-9 tw-grid-flow-col tw-auto-cols-[1fr] tw-items-stretch tw-bg-base-alt disabled:tw-bg-base-alt ' +\n    'tw-border tw-border-line-strong tw-rounded tw-relative tw-min-w-max tw-font-sans tw-font-normal tw-text-center tw-isolate';\n\nexport const segmentedControlItemStyles =\n    'tw-peer tw-group tw-flex tw-items-stretch tw-justify-center tw-select-none ' +\n    // Apply border radius based on the index\n    'first:tw-rounded-l-[calc(var(--radius)-var(--line-width))] [&:nth-last-child(2)]:tw-rounded-r-[calc(var(--radius)-var(--line-width))] ' +\n    // Focus styles for keyboard navigation, custom rounding applied to match the active indicator\n    `${FOCUS_OUTLINE} focus-visible:tw-rounded-[calc(var(--radius)-var(--line-width))]`;\n\nexport const segmentedControlActiveIndicatorStyles =\n    'tw-hidden tw-absolute -tw-z-[1] tw-top-0 tw-left-0 tw-h-full tw-pointer-events-none tw-transition-transform ' +\n    // Outline of active item\n    \"before:tw-content-[''] before:tw-inset-0 before:tw-absolute before:tw-rounded-[calc(var(--radius)-var(--line-width))] before:tw-bg-white peer-disabled:before:tw-bg-box-disabled \" +\n    'before:tw-shadow-[0_0_0_var(--line-width)_var(--line-color-xx-strong)] peer-disabled:before:tw-shadow-[0_0_0_var(--line-width)_var(--line-color-x-strong)] ' +\n    // Show the active indicator when the state is on\n    'peer-data-[state=on]:tw-block ' +\n    // Used to animate the active indicator horizontally\n    '[&:nth-child(2)]:tw-w-[calc(100%/1)] [&:nth-child(3)]:tw-w-[calc(100%/2)] ' +\n    '[&:nth-child(4)]:tw-w-[calc(100%/3)] [&:nth-child(5)]:tw-w-[calc(100%/4)] ' +\n    '[&:nth-child(6)]:tw-w-[calc(100%/5)] [&:nth-child(7)]:tw-w-[calc(100%/6)] ' +\n    '[&:nth-child(8)]:tw-w-[calc(100%/7)] [&:nth-child(9)]:tw-w-[calc(100%/8)] ' +\n    '[&:nth-child(10)]:tw-w-[calc(100%/9)] [&:nth-child(11)]:tw-w-[calc(100%/10)] ' +\n    'peer-[[data-state=on]:nth-child(1)]:tw-translate-x-[0%] ' +\n    'peer-[[data-state=on]:nth-child(2)]:tw-translate-x-[100%] ' +\n    'peer-[[data-state=on]:nth-child(3)]:tw-translate-x-[200%] ' +\n    'peer-[[data-state=on]:nth-child(4)]:tw-translate-x-[300%] ' +\n    'peer-[[data-state=on]:nth-child(5)]:tw-translate-x-[400%] ' +\n    'peer-[[data-state=on]:nth-child(6)]:tw-translate-x-[500%] ' +\n    'peer-[[data-state=on]:nth-child(7)]:tw-translate-x-[600%] ' +\n    'peer-[[data-state=on]:nth-child(8)]:tw-translate-x-[700%] ' +\n    'peer-[[data-state=on]:nth-child(9)]:tw-translate-x-[800%] ' +\n    'peer-[[data-state=on]:nth-child(10)]:tw-translate-x-[900%]';\n\nexport const segmentedControlItemSeparatorStyles =\n    '-tw-z-[1] tw-min-w-px tw-w-px -tw-mx-[0.5px] tw-bg-line-strong tw-transition-opacity tw-ease-out ' +\n    // Hide the separator when the state is on to rely on the active item's border\n    'group-first:tw-opacity-0 group-first:tw-ease-in ' +\n    'group-data-[state=on]:tw-opacity-0 group-data-[state=on]:tw-ease-in ' +\n    'group-focus-visible:tw-opacity-0 group-focus-visible:tw-ease-in ' +\n    '[[data-state=on]_+_*_&]:tw-opacity-0 [[data-state=on]_+_*_&]:tw-ease-in ' +\n    // Remove transition is the control is focused\n    'group-focus-visible:tw-duration-0';\n\nexport const segmentedControlItemLabelStyles =\n    'tw-flex tw-flex-grow tw-items-center tw-justify-center tw-rounded-[inherit] tw-px-4 tw-gap-2 tw-text-body-medium ' +\n    // Hover on unselected items but not when disabled\n    'group-data-[state=off]:group-enabled:hover:tw-bg-[#00005506] ' +\n    // Prevent shrinking of icons\n    '[&_svg]:tw-shrink-0';\n\nexport const segmentedControlItemLabelActiveStyles =\n    'tw-inline-flex tw-gap-2 tw-items-center tw-justify-center tw-transition-opacity group-disabled:tw-text-box-disabled-inverse tw-font-medium ' +\n    'tw-opacity-0 tw-ease-in group-data-[state=on]:tw-opacity-100 ' +\n    'group-data-[state=on]:tw-ease-out';\n\nexport const segmentedControlItemLabelInactiveStyles =\n    'tw-absolute tw-inline-flex tw-gap-2 tw-items-center tw-justify-center tw-transition-opacity group-disabled:tw-text-box-disabled-inverse tw-font-normal ' +\n    'tw-opacity-100 tw-ease-out group-data-[state=on]:tw-opacity-0 ' +\n    'group-data-[state=on]:tw-ease-in';\n"],"names":["segmentedControlRootStyles","segmentedControlItemStyles","FOCUS_OUTLINE","segmentedControlActiveIndicatorStyles","segmentedControlItemSeparatorStyles","segmentedControlItemLabelStyles","segmentedControlItemLabelActiveStyles","segmentedControlItemLabelInactiveStyles"],"mappings":";AAIO,MAAMA,IACT,+OAGSC,IACT,oNAIGC,CAAa,qEAEPC,IACT,i5CAuBSC,IACT,kYASSC,IACT,qMAMSC,IACT,6OAISC,IACT;"}
+{"version":3,"file":"fondue-components28.js","sources":["../src/components/Checkbox/styles/checkboxStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { FOCUS_OUTLINE } from '#/utilities/focusStyle';\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const checkboxStyles = sv({\n    base:\n        'tw-peer tw-relative tw-inline-flex tw-bg-base tw-text-white tw-shrink-0 tw-rounded tw-border tw-border-line-x-strong group-hover:tw-border-line-xx-strong hover:tw-border-line-xx-strong tw-transition-colors ' +\n        'data-[state=\"checked\"]:tw-border-transparent data-[state=\"indeterminate\"]:tw-border-transparent ' +\n        'disabled:tw-border-line-strong disabled:tw-bg-base disabled:tw-cursor-not-allowed data-[state=\"checked\"]:disabled:tw-bg-box-disabled-strong ' +\n        `${FOCUS_OUTLINE}`,\n    variants: {\n        size: {\n            default: 'tw-size-4',\n            large: 'tw-size-5',\n        },\n        emphasis: {\n            default:\n                'data-[state=\"checked\"]:tw-bg-box-selected-strong data-[state=\"checked\"]:hover:tw-bg-box-selected-strong-hover data-[state=\"checked\"]:active:tw-bg-box-selected-strong-pressed ' +\n                'data-[state=\"indeterminate\"]:tw-bg-box-selected-strong data-[state=\"indeterminate\"]:hover:tw-bg-box-selected-strong-hover data-[state=\"indeterminate\"]:active:tw-bg-box-selected-strong-pressed ',\n            weak:\n                'data-[state=\"checked\"]:tw-bg-box-neutral-strong data-[state=\"checked\"]:hover:tw-bg-box-neutral-strong-hover data-[state=\"checked\"]:active:tw-bg-box-neutral-strong-pressed ' +\n                'data-[state=\"indeterminate\"]:tw-bg-box-neutral-strong data-[state=\"indeterminate\"]:hover:tw-bg-box-neutral-strong-hover data-[state=\"indeterminate\"]:active:tw-bg-box-neutral-strong-pressed ',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n        emphasis: 'default',\n    },\n});\n\nexport const checkboxIndicatorStyles =\n    'tw-group tw-absolute tw-inset-0 tw-inline-flex tw-items-center tw-justify-center tw-text-current ' +\n    'tw-opacity-0 data-[state=\"checked\"]:tw-opacity-100 data-[state=\"indeterminate\"]:tw-opacity-100 tw-transition-opacity ';\n"],"names":["checkboxStyles","sv","FOCUS_OUTLINE","checkboxIndicatorStyles"],"mappings":";;AAKO,MAAMA,IAAiBC,EAAG;AAAA,EAC7B,MACI,6bAGGC,CAAa;AAAA,EACpB,UAAU;AAAA,IACN,MAAM;AAAA,MACF,SAAS;AAAA,MACT,OAAO;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACN,SACI;AAAA,MAEJ,MACI;AAAA,IAER;AAAA,EACJ;AAAA,EACA,iBAAiB;AAAA,IACb,MAAM;AAAA,IACN,UAAU;AAAA,EACd;AACJ,CAAC,GAEYC,IACT;"}

package/dist/fondue-components29.js

@@ -1,113 +1,35 @@
-import { jsxs as p, jsx as t } from "react/jsx-runtime";
-import { IconCaretDown as L } from "@frontify/fondue-icons";
-import * as f from "@radix-ui/react-popover";
-import { Slot as z } from "@radix-ui/react-slot";
-import { useCombobox as A } from "downshift";
-import { forwardRef as H, useRef as O, useMemo as q } from "react";
-import { SelectMenu as G } from "./fondue-components31.js";
-import r from "./fondue-components33.js";
-import { useSelectData as J } from "./fondue-components34.js";
-const g = ({
-  children: h,
-  onSelect: l,
-  value: b,
-  defaultValue: x,
-  placeholder: I = "",
-  disabled: i,
-  "aria-label": C,
-  "data-test-id": w = "fondue-select-combobox"
-}, S) => {
-  const { inputSlots: R, menuSlots: B, items: a, filterText: F, clearButton: u, getItemByValue: c, setFilterText: P } = J(h), v = c(x), M = c(b), {
-    getInputProps: n,
-    getToggleButtonProps: N,
-    getMenuProps: T,
-    getItemProps: y,
-    reset: D,
-    isOpen: V,
-    highlightedIndex: j,
-    inputValue: s
-  } = A({
-    items: a,
-    onSelectedItemChange: ({ selectedItem: e }) => {
-      l && l(e.value);
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { RgbaColorPicker as n } from "react-colorful";
+import t from "./fondue-components32.js";
+import { DEFAULT_COLOR as s } from "./fondue-components33.js";
+const i = ({
+  currentColor: a = s,
+  onColorChange: d = () => {
+  },
+  "data-test-id": o = "color-picker-input"
+}, p) => /* @__PURE__ */ r("div", { className: t.gradientInput, "data-test-id": o, ref: p, children: /* @__PURE__ */ r(
+  n,
+  {
+    className: t.reactColorful,
+    color: {
+      r: a.red,
+      g: a.green,
+      b: a.blue,
+      a: a.alpha === void 0 ? 1 : a.alpha
     },
-    selectedItem: M,
-    onInputValueChange: ({ inputValue: e }) => {
-      P(e);
-    },
-    defaultSelectedItem: v,
-    defaultHighlightedIndex: 0,
-    itemToString: (e) => e ? e.label : ""
-  }), o = O(!1), k = q(
-    () => s && !a.find((e) => e.label.toLowerCase().includes(s.toLowerCase())),
-    [s, a]
-  );
-  return /* @__PURE__ */ p(f.Root, { open: V, children: [
-    /* @__PURE__ */ t(f.Anchor, { asChild: !0, children: /* @__PURE__ */ p("div", { ref: S, className: r.root, "data-error": k, children: [
-      /* @__PURE__ */ t(
-        "input",
-        {
-          onMouseDown: (e) => {
-            o.current = !0, e.currentTarget.dataset.showFocusRing = "false";
-          },
-          placeholder: I,
-          ...n({
-            "aria-label": C
-          }),
-          onFocus: (e) => {
-            o.current || (e.target.dataset.showFocusRing = "true");
-          },
-          onBlur: (e) => {
-            var m, d;
-            e.target.dataset.showFocusRing = "false", o.current = !1, n().onBlur && ((d = (m = n()).onBlur) == null || d.call(m, e));
-          },
-          className: r.input,
-          disabled: i,
-          "data-test-id": w
-        }
-      ),
-      R,
-      u && /* @__PURE__ */ t(
-        z,
-        {
-          onClick: (e) => {
-            e.stopPropagation(), D();
-          },
-          className: r.clear,
-          role: "button",
-          children: u
-        }
-      ),
-      /* @__PURE__ */ t(
-        "button",
-        {
-          type: "button",
-          onMouseDown: () => {
-            o.current = !0;
-          },
-          ...N(),
-          "aria-label": "toggle menu",
-          disabled: i,
-          children: /* @__PURE__ */ t(L, { size: 16, className: r.caret })
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ t(
-      G,
-      {
-        highlightedIndex: j,
-        filterText: F,
-        getMenuProps: T,
-        getItemProps: y,
-        children: B
-      }
-    )
-  ] });
-};
-g.displayName = "Select.Combobox";
-const $ = H(g);
+    onChange: (e) => d({
+      red: e.r,
+      green: e.g,
+      blue: e.b,
+      alpha: e.a
+    })
+  }
+) });
+i.displayName = "ColorPicker.Gradient";
+const c = m(i);
 export {
-  $ as ForwardedRefCombobox,
-  g as SelectCombobox
+  i as ColorGradientInput,
+  c as ForwardedRefColorGradientInput
 };
 //# sourceMappingURL=fondue-components29.js.map

package/dist/fondue-components29.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components29.js","sources":["../src/components/Select/Combobox.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { useCombobox } from 'downshift';\nimport { forwardRef, useMemo, useRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport { SelectMenu } from './SelectMenu';\nimport styles from './styles/select.module.scss';\nimport { useSelectData } from './useSelectData';\n\nexport type ComboboxProps = {\n    /**\n     * Children of the Combobox component. This can contain the `Select.Slot` components for the label, decorators, clear action and menu.\n     */\n    children?: ReactNode;\n    /**\n     * Callback function that is called when an item is selected.\n     */\n    onSelect?: (selectedValue: string) => void;\n    /**\n     * The active value in the combobox component. This is used to control the combobox externally.\n     */\n    value?: string;\n    /**\n     * The default value of the combobox component. Used for uncontrolled usages.\n     */\n    defaultValue?: string;\n    /**\n     * The placeholder in the combobox component.\n     */\n    placeholder?: string;\n    /**\n     * Disables the combobox component.\n     */\n    disabled?: boolean;\n    /**\n     * The aria label of the combobox component.\n     */\n    'aria-label'?: string;\n    /**\n     * The data test id of the select component.\n     */\n    'data-test-id'?: string;\n};\n\nexport const SelectCombobox = (\n    {\n        children,\n        onSelect,\n        value,\n        defaultValue,\n        placeholder = '',\n        disabled,\n        'aria-label': ariaLabel,\n        'data-test-id': dataTestId = 'fondue-select-combobox',\n    }: ComboboxProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const { inputSlots, menuSlots, items, filterText, clearButton, getItemByValue, setFilterText } =\n        useSelectData(children);\n\n    const defaultItem = getItemByValue(defaultValue);\n    const activeItem = getItemByValue(value);\n\n    const {\n        getInputProps,\n        getToggleButtonProps,\n        getMenuProps,\n        getItemProps,\n        reset,\n        isOpen,\n        highlightedIndex,\n        inputValue,\n    } = useCombobox({\n        items,\n        onSelectedItemChange: ({ selectedItem }) => {\n            onSelect && onSelect(selectedItem.value);\n        },\n        selectedItem: activeItem,\n        onInputValueChange: ({ inputValue }) => {\n            setFilterText(inputValue);\n        },\n        defaultSelectedItem: defaultItem,\n        defaultHighlightedIndex: 0,\n        itemToString: (item) => (item ? item.label : ''),\n    });\n\n    const wasClicked = useRef(false);\n    const valueInvalid = useMemo(\n        () => inputValue && !items.find((item) => item.label.toLowerCase().includes(inputValue.toLowerCase())),\n        [inputValue, items],\n    );\n\n    return (\n        <RadixPopover.Root open={isOpen}>\n            <RadixPopover.Anchor asChild>\n                <div ref={forwardedRef} className={styles.root} data-error={valueInvalid}>\n                    <input\n                        onMouseDown={(mouseEvent) => {\n                            wasClicked.current = true;\n                            mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                        }}\n                        placeholder={placeholder}\n                        {...getInputProps({\n                            'aria-label': ariaLabel,\n                        })}\n                        onFocus={(focusEvent) => {\n                            if (!wasClicked.current) {\n                                focusEvent.target.dataset.showFocusRing = 'true';\n                            }\n                        }}\n                        onBlur={(blurEvent) => {\n                            blurEvent.target.dataset.showFocusRing = 'false';\n                            wasClicked.current = false;\n                            if (getInputProps().onBlur) {\n                                getInputProps().onBlur?.(blurEvent);\n                            }\n                        }}\n                        className={styles.input}\n                        disabled={disabled}\n                        data-test-id={dataTestId}\n                    />\n                    {inputSlots}\n                    {clearButton && (\n                        <RadixSlot\n                            onClick={(event) => {\n                                event.stopPropagation();\n                                reset();\n                            }}\n                            className={styles.clear}\n                            role=\"button\"\n                        >\n                            {clearButton}\n                        </RadixSlot>\n                    )}\n                    <button\n                        type=\"button\"\n                        onMouseDown={() => {\n                            wasClicked.current = true;\n                        }}\n                        {...getToggleButtonProps()}\n                        aria-label=\"toggle menu\"\n                        disabled={disabled}\n                    >\n                        <IconCaretDown size={16} className={styles.caret} />\n                    </button>\n                </div>\n            </RadixPopover.Anchor>\n\n            <SelectMenu\n                highlightedIndex={highlightedIndex}\n                filterText={filterText}\n                getMenuProps={getMenuProps}\n                getItemProps={getItemProps}\n            >\n                {menuSlots}\n            </SelectMenu>\n        </RadixPopover.Root>\n    );\n};\nSelectCombobox.displayName = 'Select.Combobox';\n\nexport const ForwardedRefCombobox = forwardRef<HTMLDivElement, ComboboxProps>(SelectCombobox);\n"],"names":["SelectCombobox","children","onSelect","value","defaultValue","placeholder","disabled","ariaLabel","dataTestId","forwardedRef","inputSlots","menuSlots","items","filterText","clearButton","getItemByValue","setFilterText","useSelectData","defaultItem","activeItem","getInputProps","getToggleButtonProps","getMenuProps","getItemProps","reset","isOpen","highlightedIndex","inputValue","useCombobox","selectedItem","item","wasClicked","useRef","valueInvalid","useMemo","jsxs","RadixPopover","jsx","styles","mouseEvent","focusEvent","blurEvent","_b","_a","RadixSlot","event","IconCaretDown","SelectMenu","ForwardedRefCombobox","forwardRef"],"mappings":";;;;;;;;;AA+CO,MAAMA,IAAiB,CAC1B;AAAA,EACI,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,UAAAC;AAAA,EACA,cAAcC;AAAA,EACd,gBAAgBC,IAAa;AACjC,GACAC,MACC;AACK,QAAA,EAAE,YAAAC,GAAY,WAAAC,GAAW,OAAAC,GAAO,YAAAC,GAAY,aAAAC,GAAa,gBAAAC,GAAgB,eAAAC,EAAA,IAC3EC,EAAchB,CAAQ,GAEpBiB,IAAcH,EAAeX,CAAY,GACzCe,IAAaJ,EAAeZ,CAAK,GAEjC;AAAA,IACF,eAAAiB;AAAA,IACA,sBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,YAAAC;AAAA,MACAC,EAAY;AAAA,IACZ,OAAAhB;AAAA,IACA,sBAAsB,CAAC,EAAE,cAAAiB,QAAmB;AAC5B,MAAA3B,KAAAA,EAAS2B,EAAa,KAAK;AAAA,IAC3C;AAAA,IACA,cAAcV;AAAA,IACd,oBAAoB,CAAC,EAAE,YAAAQ,QAAiB;AACpC,MAAAX,EAAcW,CAAU;AAAA,IAC5B;AAAA,IACA,qBAAqBT;AAAA,IACrB,yBAAyB;AAAA,IACzB,cAAc,CAACY,MAAUA,IAAOA,EAAK,QAAQ;AAAA,EAAA,CAChD,GAEKC,IAAaC,EAAO,EAAK,GACzBC,IAAeC;AAAA,IACjB,MAAMP,KAAc,CAACf,EAAM,KAAK,CAACkB,MAASA,EAAK,MAAM,cAAc,SAASH,EAAW,YAAa,CAAA,CAAC;AAAA,IACrG,CAACA,GAAYf,CAAK;AAAA,EAAA;AAGtB,SACK,gBAAAuB,EAAAC,EAAa,MAAb,EAAkB,MAAMX,GACrB,UAAA;AAAA,IAAA,gBAAAY,EAACD,EAAa,QAAb,EAAoB,SAAO,IACxB,UAAA,gBAAAD,EAAC,OAAI,EAAA,KAAK1B,GAAc,WAAW6B,EAAO,MAAM,cAAYL,GACxD,UAAA;AAAA,MAAA,gBAAAI;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,aAAa,CAACE,MAAe;AACzB,YAAAR,EAAW,UAAU,IACVQ,EAAA,cAAc,QAAQ,gBAAgB;AAAA,UACrD;AAAA,UACA,aAAAlC;AAAA,UACC,GAAGe,EAAc;AAAA,YACd,cAAcb;AAAA,UAAA,CACjB;AAAA,UACD,SAAS,CAACiC,MAAe;AACjB,YAACT,EAAW,YACDS,EAAA,OAAO,QAAQ,gBAAgB;AAAA,UAElD;AAAA,UACA,QAAQ,CAACC,MAAc;;AACT,YAAAA,EAAA,OAAO,QAAQ,gBAAgB,SACzCV,EAAW,UAAU,IACjBX,IAAgB,YACFsB,KAAAC,IAAAvB,EAAA,GAAE,WAAF,QAAAsB,EAAA,KAAAC,GAAWF;AAAA,UAEjC;AAAA,UACA,WAAWH,EAAO;AAAA,UAClB,UAAAhC;AAAA,UACA,gBAAcE;AAAA,QAAA;AAAA,MAClB;AAAA,MACCE;AAAA,MACAI,KACG,gBAAAuB;AAAA,QAACO;AAAAA,QAAA;AAAA,UACG,SAAS,CAACC,MAAU;AAChB,YAAAA,EAAM,gBAAgB,GAChBrB;UACV;AAAA,UACA,WAAWc,EAAO;AAAA,UAClB,MAAK;AAAA,UAEJ,UAAAxB;AAAA,QAAA;AAAA,MACL;AAAA,MAEJ,gBAAAuB;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,MAAK;AAAA,UACL,aAAa,MAAM;AACf,YAAAN,EAAW,UAAU;AAAA,UACzB;AAAA,UACC,GAAGV,EAAqB;AAAA,UACzB,cAAW;AAAA,UACX,UAAAf;AAAA,UAEA,4BAACwC,GAAc,EAAA,MAAM,IAAI,WAAWR,EAAO,OAAO;AAAA,QAAA;AAAA,MACtD;AAAA,IAAA,EAAA,CACJ,EACJ,CAAA;AAAA,IAEA,gBAAAD;AAAA,MAACU;AAAA,MAAA;AAAA,QACG,kBAAArB;AAAA,QACA,YAAAb;AAAA,QACA,cAAAS;AAAA,QACA,cAAAC;AAAA,QAEC,UAAAZ;AAAA,MAAA;AAAA,IACL;AAAA,EACJ,EAAA,CAAA;AAER;AACAX,EAAe,cAAc;AAEhB,MAAAgD,IAAuBC,EAA0CjD,CAAc;"}
+{"version":3,"file":"fondue-components29.js","sources":["../src/components/ColorPicker/ColorGradientInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ForwardedRef, forwardRef } from 'react';\nimport { RgbaColorPicker } from 'react-colorful';\n\nimport styles from './styles/customColorPicker.module.scss';\nimport { type RgbaColor } from './types';\nimport { DEFAULT_COLOR } from './utils';\n\ntype ColorGradientInputProps = {\n    /**\n     * @ignore\n     * The active color in the color picker, passed down from the root component\n     */\n    currentColor?: RgbaColor;\n    /**\n     * @ignore\n     * Event handler called when the color changes, passed down from the root component\n     */\n    onColorChange?: (color: RgbaColor) => void;\n    /**\n     * The test id of the color picker gradient input\n     */\n    'data-test-id'?: string;\n};\n\nexport const ColorGradientInput = (\n    {\n        currentColor = DEFAULT_COLOR,\n        onColorChange = () => {},\n        'data-test-id': dataTestId = 'color-picker-input',\n    }: ColorGradientInputProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div className={styles.gradientInput} data-test-id={dataTestId} ref={forwardedRef}>\n            <RgbaColorPicker\n                className={styles.reactColorful}\n                color={{\n                    r: currentColor.red,\n                    g: currentColor.green,\n                    b: currentColor.blue,\n                    a: currentColor.alpha === undefined ? 1 : currentColor.alpha,\n                }}\n                onChange={(color) =>\n                    onColorChange({\n                        red: color.r,\n                        green: color.g,\n                        blue: color.b,\n                        alpha: color.a,\n                    })\n                }\n            />\n        </div>\n    );\n};\nColorGradientInput.displayName = 'ColorPicker.Gradient';\n\nexport const ForwardedRefColorGradientInput = forwardRef<HTMLDivElement, ColorGradientInputProps>(ColorGradientInput);\n"],"names":["ColorGradientInput","currentColor","DEFAULT_COLOR","onColorChange","dataTestId","forwardedRef","jsx","styles","RgbaColorPicker","color","ForwardedRefColorGradientInput","forwardRef"],"mappings":";;;;;AA0BO,MAAMA,IAAqB,CAC9B;AAAA,EACI,cAAAC,IAAeC;AAAA,EACf,eAAAC,IAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,gBAAgBC,IAAa;AACjC,GACAC,MAGI,gBAAAC,EAAC,SAAI,WAAWC,EAAO,eAAe,gBAAcH,GAAY,KAAKC,GACjE,UAAA,gBAAAC;AAAA,EAACE;AAAA,EAAA;AAAA,IACG,WAAWD,EAAO;AAAA,IAClB,OAAO;AAAA,MACH,GAAGN,EAAa;AAAA,MAChB,GAAGA,EAAa;AAAA,MAChB,GAAGA,EAAa;AAAA,MAChB,GAAGA,EAAa,UAAU,SAAY,IAAIA,EAAa;AAAA,IAC3D;AAAA,IACA,UAAU,CAACQ,MACPN,EAAc;AAAA,MACV,KAAKM,EAAM;AAAA,MACX,OAAOA,EAAM;AAAA,MACb,MAAMA,EAAM;AAAA,MACZ,OAAOA,EAAM;AAAA,IAAA,CAChB;AAAA,EAAA;AAGb,EAAA,CAAA;AAGRT,EAAmB,cAAc;AAEpB,MAAAU,IAAiCC,EAAoDX,CAAkB;"}

package/dist/fondue-components3.js

@@ -1,43 +1,14 @@
-import { jsx as a } from "react/jsx-runtime";
-import { forwardRef as b } from "react";
-import { cn as y } from "./fondue-components15.js";
-import { buttonStyles as r } from "./fondue-components16.js";
-import { iconStyles as x } from "./fondue-components17.js";
-import { textStyles as S } from "./fondue-components18.js";
-const k = b(
-  ({
-    children: u,
-    type: d = "button",
-    variant: m,
-    size: e = "medium",
-    "data-test-id": l = "fondue-button",
-    className: c = "",
-    onPress: o = () => {
-    },
-    ...t
-  }, n) => /* @__PURE__ */ a(
-    "button",
-    {
-      ref: n,
-      type: d,
-      "data-test-id": l,
-      className: y(
-        r({ size: e, variant: m, ...t }),
-        S({ variant: m, ...t }),
-        x({ variant: m, ...t }),
-        c
-      ),
-      ...t,
-      onClick: (i) => {
-        var f;
-        (f = t.onClick) == null || f.call(t, i), o == null || o(i);
-      },
-      children: u
-    }
-  )
-);
-k.displayName = "Button";
+import { jsx as r } from "react/jsx-runtime";
+import { propsToCssVariables as e } from "./fondue-components22.js";
+import i from "./fondue-components23.js";
+const m = ({
+  as: t = "div",
+  "data-test-id": s = "fondue-box",
+  children: a,
+  ...o
+}) => /* @__PURE__ */ r(t, { className: i.root, "data-test-id": s, ...o, style: e(o), children: a });
+m.displayName = "Box";
 export {
-  k as Button
+  m as Box
 };
 //# sourceMappingURL=fondue-components3.js.map

package/dist/fondue-components3.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components3.js","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef, type MouseEvent, type ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { buttonStyles } from './styles/buttonStyles';\nimport { iconStyles } from './styles/iconStyles';\nimport { textStyles } from './styles/textStyles';\n\ntype ButtonRounding = 'medium' | 'full';\n\ntype ButtonStyle = 'default' | 'positive' | 'negative' | 'danger' | 'loud';\n\ntype ButtonSize = 'small' | 'medium' | 'large';\n\ntype ButtonType = 'button' | 'submit' | 'reset';\n\ntype ButtonEmphasis = 'default' | 'weak' | 'strong';\n\ntype ButtonAspect = 'default' | 'square';\n\nexport type ButtonProps = {\n    /**\n     * @default \"button\"\n     */\n    type?: ButtonType;\n    /**\n     * @default null\n     */\n    title?: string;\n    /**\n     * @default \"default\"\n     */\n    variant?: ButtonStyle;\n    /**\n     * @default \"strong\"\n     */\n    emphasis?: ButtonEmphasis;\n    /**\n     * @default \"medium\"\n     */\n    size?: ButtonSize;\n    /**\n     * @default \"medium\"\n     */\n    rounding?: ButtonRounding;\n    /**\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * @default \"default\"\n     */\n    aspect?: ButtonAspect;\n    /**\n     * @default true\n     */\n    hugWidth?: boolean;\n    children?: ReactNode;\n    onPress?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    'aria-label'?: string;\n    'aria-describedby'?: string;\n    'data-test-id'?: string;\n    className?: string;\n};\n\nexport const Button = forwardRef<HTMLButtonElement | null, ButtonProps>(\n    (\n        {\n            children,\n            type = 'button',\n            variant,\n            size = 'medium',\n            'data-test-id': dataTestId = 'fondue-button',\n            className = '',\n            onPress = () => {},\n            ...props\n        }: ButtonProps,\n        ref: ForwardedRef<HTMLButtonElement | null>,\n    ) => {\n        return (\n            <button\n                ref={ref}\n                type={type}\n                data-test-id={dataTestId}\n                className={cn(\n                    buttonStyles({ size, variant, ...props }),\n                    textStyles({ variant, ...props }),\n                    iconStyles({ variant, ...props }),\n                    className,\n                )}\n                {...props}\n                onClick={(event) => {\n                    // @ts-expect-error - Allows other components who use Button as a trigger to pass an action\n                    // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n                    props.onClick?.(event);\n                    onPress?.(event);\n                }}\n            >\n                {children}\n            </button>\n        );\n    },\n);\n\nButton.displayName = 'Button';\n"],"names":["Button","forwardRef","children","type","variant","size","dataTestId","className","onPress","props","ref","jsx","cn","buttonStyles","textStyles","iconStyles","event","_a"],"mappings":";;;;;;AAmEO,MAAMA,IAASC;AAAA,EAClB,CACI;AAAA,IACI,UAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,SAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,gBAAgBC,IAAa;AAAA,IAC7B,WAAAC,IAAY;AAAA,IACZ,SAAAC,IAAU,MAAM;AAAA,IAAC;AAAA,IACjB,GAAGC;AAAA,KAEPC,MAGI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAD;AAAA,MACA,MAAAP;AAAA,MACA,gBAAcG;AAAA,MACd,WAAWM;AAAA,QACPC,EAAa,EAAE,MAAAR,GAAM,SAAAD,GAAS,GAAGK,GAAO;AAAA,QACxCK,EAAW,EAAE,SAAAV,GAAS,GAAGK,GAAO;AAAA,QAChCM,EAAW,EAAE,SAAAX,GAAS,GAAGK,GAAO;AAAA,QAChCF;AAAA,MACJ;AAAA,MACC,GAAGE;AAAA,MACJ,SAAS,CAACO,MAAU;;AAGhB,SAAAC,IAAAR,EAAM,YAAN,QAAAQ,EAAA,KAAAR,GAAgBO,IAChBR,KAAA,QAAAA,EAAUQ;AAAA,MACd;AAAA,MAEC,UAAAd;AAAA,IAAA;AAAA,EAAA;AAIjB;AAEAF,EAAO,cAAc;"}
+{"version":3,"file":"fondue-components3.js","sources":["../src/components/Box/Box.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { type Responsive, type LayoutComponentProps } from '#/helpers/layout';\nimport { propsToCssVariables } from '#/helpers/propsToCssVariables';\n\nimport styles from './styles/box.module.scss';\n\nexport type BoxProps = LayoutComponentProps & {\n    /**\n     * The element to render the Box component as.\n     * @default 'div'\n     */\n    as?: 'div' | 'span';\n    /**\n     * The display property.\n     * @default 'block'\n     */\n    display?: Responsive<'none' | 'block' | 'inline-block' | 'inline'>;\n\n    children?: ReactNode;\n    'data-test-id'?: string;\n} & CommonAriaProps;\n\nexport const Box = ({\n    as: Component = 'div',\n    'data-test-id': dataTestId = 'fondue-box',\n    children,\n    ...props\n}: BoxProps) => {\n    return (\n        <Component className={styles.root} data-test-id={dataTestId} {...props} style={propsToCssVariables(props)}>\n            {children}\n        </Component>\n    );\n};\nBox.displayName = 'Box';\n"],"names":["Box","Component","dataTestId","children","props","jsx","styles","propsToCssVariables"],"mappings":";;;AA0BO,MAAMA,IAAM,CAAC;AAAA,EAChB,IAAIC,IAAY;AAAA,EAChB,gBAAgBC,IAAa;AAAA,EAC7B,UAAAC;AAAA,EACA,GAAGC;AACP,MAES,gBAAAC,EAAAJ,GAAA,EAAU,WAAWK,EAAO,MAAM,gBAAcJ,GAAa,GAAGE,GAAO,OAAOG,EAAoBH,CAAK,GACnG,UAAAD,EACL,CAAA;AAGRH,EAAI,cAAc;"}

package/dist/fondue-components30.js

@@ -1,15 +1,31 @@
-import { jsx as d } from "react/jsx-runtime";
-import { forwardRef as o } from "react";
-import c from "./fondue-components33.js";
-const a = ({ "data-test-id": t = "fondue-select-item", ...e }, r) => /* @__PURE__ */ d("li", { "data-test-id": t, ref: r, ...e, children: e.children });
-a.displayName = "Select.Item";
-const n = o(a), m = ({ children: t, groupId: e, "data-test-id": r = "fondue-select-item-group" }, s) => /* @__PURE__ */ d("div", { "data-test-id": r, className: c.group, ref: s, children: t }, e);
-m.displayName = "Select.Group";
-const p = o(m);
+import { jsxs as d, jsx as a, Fragment as m } from "react/jsx-runtime";
+import { IconDroplet as n, IconTrashBin as p, IconCaretDown as f } from "@frontify/fondue-icons";
+import { forwardRef as I, useId as N } from "react";
+import i from "./fondue-components57.js";
+import { colorToCss as h } from "./fondue-components33.js";
+const c = ({ currentColor: e, onClear: s, "data-test-id": t = "color-picker-input", ...r }, l) => {
+  const o = N();
+  return /* @__PURE__ */ d("div", { className: i.root, ...r, ref: l, "data-test-id": t, children: [
+    (e == null ? void 0 : e.red) !== void 0 ? /* @__PURE__ */ a(
+      "div",
+      {
+        "aria-describedby": o,
+        className: i.colorIndicator,
+        style: { backgroundColor: h(e) }
+      }
+    ) : /* @__PURE__ */ d(m, { children: [
+      /* @__PURE__ */ a(n, { size: 16 }),
+      /* @__PURE__ */ a("span", { children: "Select Color" })
+    ] }),
+    /* @__PURE__ */ a("span", { id: o, className: i.colorName, children: e == null ? void 0 : e.name }),
+    s && /* @__PURE__ */ a("button", { type: "button", "aria-label": "Clear color", onClick: s, className: i.clear, children: /* @__PURE__ */ a(p, { size: 16 }) }),
+    /* @__PURE__ */ a("div", { children: /* @__PURE__ */ a(f, { size: 16, className: i.caret }) })
+  ] });
+};
+c.displayName = "ColorPicker.Input";
+const x = I(c);
 export {
-  n as ForwardedRefSelectItem,
-  p as ForwardedRefSelectItemGroup,
-  a as SelectItem,
-  m as SelectItemGroup
+  c as ColorPickerInput,
+  x as ForwardedRefColorPickerInput
 };
 //# sourceMappingURL=fondue-components30.js.map

package/dist/fondue-components30.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components30.js","sources":["../src/components/Select/SelectItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport styles from './styles/select.module.scss';\n\nexport type SelectItemProps = {\n    /**\n     * The value of the select item.\n     */\n    value: string;\n    /**\n     * The data test id of the select item.\n     */\n    'data-test-id'?: string;\n} & (\n    | {\n          /**\n           * The label of the select item. Required when the child is not a string.\n           */\n          label: string;\n          /**\n           * The children of the select item. This can be a custom component or a string.\n           */\n          children?: ReactNode;\n      }\n    | {\n          label?: string;\n          children: string;\n      }\n);\n\nexport const SelectItem = (\n    { 'data-test-id': dataTestId = 'fondue-select-item', ...props }: SelectItemProps,\n    forwardedRef?: ForwardedRef<HTMLLIElement>,\n) => {\n    return (\n        <li data-test-id={dataTestId} ref={forwardedRef} {...props}>\n            {props.children}\n        </li>\n    );\n};\nSelectItem.displayName = 'Select.Item';\n\nexport const ForwardedRefSelectItem = forwardRef<HTMLLIElement, SelectItemProps>(SelectItem);\n\nexport type SelectItemGroupProps = {\n    /**\n     * The children of the select item group. This can contain multiple `Select.Item` components.\n     */\n    children: ReactNode;\n    /**\n     * The internal group ID of the select item group.\n     */\n    groupId: string;\n    /**\n     * The data test id of the select item group.\n     */\n    'data-test-id'?: string;\n};\n\nexport const SelectItemGroup = (\n    { children, groupId, 'data-test-id': dataTestId = 'fondue-select-item-group' }: SelectItemGroupProps,\n    forwardedRef?: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} className={styles.group} ref={forwardedRef} key={groupId}>\n            {children}\n        </div>\n    );\n};\nSelectItemGroup.displayName = 'Select.Group';\n\nexport const ForwardedRefSelectItemGroup = forwardRef<HTMLDivElement, SelectItemGroupProps>(SelectItemGroup);\n"],"names":["SelectItem","dataTestId","props","forwardedRef","jsx","ForwardedRefSelectItem","forwardRef","SelectItemGroup","children","groupId","styles","ForwardedRefSelectItemGroup"],"mappings":";;;AAgCa,MAAAA,IAAa,CACtB,EAAE,gBAAgBC,IAAa,sBAAsB,GAAGC,EAAM,GAC9DC,MAGI,gBAAAC,EAAC,QAAG,gBAAcH,GAAY,KAAKE,GAAe,GAAGD,GAChD,UAAAA,EAAM,SACX,CAAA;AAGRF,EAAW,cAAc;AAEZ,MAAAK,IAAyBC,EAA2CN,CAAU,GAiB9EO,IAAkB,CAC3B,EAAE,UAAAC,GAAU,SAAAC,GAAS,gBAAgBR,IAAa,2BAA2B,GAC7EE,MAGI,gBAAAC,EAAC,OAAI,EAAA,gBAAcH,GAAY,WAAWS,EAAO,OAAO,KAAKP,GACxD,UAAAK,EAAA,GAD2EC,CAEhF;AAGRF,EAAgB,cAAc;AAEjB,MAAAI,IAA8BL,EAAiDC,CAAe;"}
+{"version":3,"file":"fondue-components30.js","sources":["../src/components/ColorPicker/ColorPickerInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconDroplet, IconTrashBin } from '@frontify/fondue-icons';\nimport { type ForwardedRef, forwardRef, useId } from 'react';\n\nimport { type CommonAriaAttrs } from '#/utilities/types';\n\nimport styles from './styles/colorInput.module.scss';\nimport { type RgbaColor } from './types';\nimport { colorToCss } from './utils';\n\ntype ColorPickerInputProps = {\n    /**\n     * The active color in the color picker\n     */\n    currentColor?: RgbaColor;\n    /**\n     * The open state of the color picker used to dermine arrow state\n     */\n    isOpen?: boolean;\n    /**\n     * callback for clearing the color\n     */\n    onClear?: () => void;\n    /**\n     * The test id of the color picker input\n     */\n    'data-test-id'?: string;\n} & CommonAriaAttrs;\n\nexport const ColorPickerInput = (\n    { currentColor, onClear, 'data-test-id': dataTestId = 'color-picker-input', ...props }: ColorPickerInputProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const colorNameId = useId();\n\n    return (\n        <div className={styles.root} {...props} ref={forwardedRef} data-test-id={dataTestId}>\n            {currentColor?.red !== undefined ? (\n                <div\n                    aria-describedby={colorNameId}\n                    className={styles.colorIndicator}\n                    style={{ backgroundColor: colorToCss(currentColor) }}\n                />\n            ) : (\n                <>\n                    <IconDroplet size={16} />\n                    <span>Select Color</span>\n                </>\n            )}\n\n            <span id={colorNameId} className={styles.colorName}>\n                {currentColor?.name}\n            </span>\n            {onClear && (\n                <button type=\"button\" aria-label=\"Clear color\" onClick={onClear} className={styles.clear}>\n                    <IconTrashBin size={16} />\n                </button>\n            )}\n            <div>\n                <IconCaretDown size={16} className={styles.caret} />\n            </div>\n        </div>\n    );\n};\nColorPickerInput.displayName = 'ColorPicker.Input';\n\nexport const ForwardedRefColorPickerInput = forwardRef<HTMLDivElement, ColorPickerInputProps>(ColorPickerInput);\n"],"names":["ColorPickerInput","currentColor","onClear","dataTestId","props","forwardedRef","colorNameId","useId","jsxs","styles","jsx","colorToCss","Fragment","IconDroplet","IconTrashBin","IconCaretDown","ForwardedRefColorPickerInput","forwardRef"],"mappings":";;;;;AA8Ba,MAAAA,IAAmB,CAC5B,EAAE,cAAAC,GAAc,SAAAC,GAAS,gBAAgBC,IAAa,sBAAsB,GAAGC,EAAM,GACrFC,MACC;AACD,QAAMC,IAAcC;AAGhB,SAAA,gBAAAC,EAAC,OAAI,EAAA,WAAWC,EAAO,MAAO,GAAGL,GAAO,KAAKC,GAAc,gBAAcF,GACpE,UAAA;AAAA,KAAAF,KAAA,gBAAAA,EAAc,SAAQ,SACnB,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,oBAAkBJ;AAAA,QAClB,WAAWG,EAAO;AAAA,QAClB,OAAO,EAAE,iBAAiBE,EAAWV,CAAY,EAAE;AAAA,MAAA;AAAA,IAAA,IAInD,gBAAAO,EAAAI,GAAA,EAAA,UAAA;AAAA,MAAC,gBAAAF,EAAAG,GAAA,EAAY,MAAM,GAAI,CAAA;AAAA,MACvB,gBAAAH,EAAC,UAAK,UAAY,eAAA,CAAA;AAAA,IAAA,GACtB;AAAA,IAGJ,gBAAAA,EAAC,UAAK,IAAIJ,GAAa,WAAWG,EAAO,WACpC,iCAAc,KACnB,CAAA;AAAA,IACCP,KACI,gBAAAQ,EAAA,UAAA,EAAO,MAAK,UAAS,cAAW,eAAc,SAASR,GAAS,WAAWO,EAAO,OAC/E,UAAA,gBAAAC,EAACI,GAAa,EAAA,MAAM,GAAI,CAAA,GAC5B;AAAA,IAEJ,gBAAAJ,EAAC,SACG,UAAC,gBAAAA,EAAAK,GAAA,EAAc,MAAM,IAAI,WAAWN,EAAO,MAAA,CAAO,EACtD,CAAA;AAAA,EACJ,EAAA,CAAA;AAER;AACAT,EAAiB,cAAc;AAElB,MAAAgB,IAA+BC,EAAkDjB,CAAgB;"}