@frontify/fondue-components 27.0.1 → 28.0.0

package/dist/fondue-components62.js

@@ -1,40 +1,16 @@
-const o = "_root_18l9z_2", l = "_truncate_18l9z_138", r = "_disabled_18l9z_144", _ = {
+const o = "_root_1ngt5_6", t = "_overlay_1ngt5_51", e = "_header_1ngt5_68", _ = "_body_1ngt5_93", r = "_footer_1ngt5_122", n = {
   root: o,
-  "size-xx-small": "_size-xx-small_18l9z_8",
-  "size-x-small": "_size-x-small_18l9z_14",
-  "size-small": "_size-small_18l9z_20",
-  "size-medium": "_size-medium_18l9z_26",
-  "size-large": "_size-large_18l9z_32",
-  "size-x-large": "_size-x-large_18l9z_38",
-  "size-xx-large": "_size-xx-large_18l9z_44",
-  "weight-regular": "_weight-regular_18l9z_50",
-  "weight-medium": "_weight-medium_18l9z_54",
-  "weight-bold": "_weight-bold_18l9z_58",
-  "wrap-wrap": "_wrap-wrap_18l9z_62",
-  "wrap-nowrap": "_wrap-nowrap_18l9z_66",
-  "underline-auto": "_underline-auto_18l9z_70",
-  "underline-always": "_underline-always_18l9z_74",
-  "underline-hover": "_underline-hover_18l9z_78",
-  "underline-none": "_underline-none_18l9z_86",
-  "color-primary": "_color-primary_18l9z_90",
-  "color-secondary": "_color-secondary_18l9z_94",
-  "color-error": "_color-error_18l9z_98",
-  "color-success": "_color-success_18l9z_102",
-  "color-warning": "_color-warning_18l9z_106",
-  "color-highlight": "_color-highlight_18l9z_110",
-  "color-on-container-secondary": "_color-on-container-secondary_18l9z_114",
-  "color-on-container-disabled": "_color-on-container-disabled_18l9z_118",
-  "color-on-container-error": "_color-on-container-error_18l9z_122",
-  "color-on-container-success": "_color-on-container-success_18l9z_126",
-  "color-on-container-warning": "_color-on-container-warning_18l9z_130",
-  "color-on-container-highlight": "_color-on-container-highlight_18l9z_134",
-  truncate: l,
-  disabled: r
+  overlay: t,
+  header: e,
+  body: _,
+  footer: r
 };
 export {
-  _ as default,
-  r as disabled,
-  o as root,
-  l as truncate
+  _ as body,
+  n as default,
+  r as footer,
+  e as header,
+  t as overlay,
+  o as root
 };
 //# sourceMappingURL=fondue-components62.js.map

package/dist/fondue-components62.js.map

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

package/dist/fondue-components63.js

@@ -1,10 +1,8 @@
-const n = "_container_1mpjk_13", t = "_indicator_1mpjk_43", o = {
-  container: n,
-  indicator: t
+const o = "_root_1b3p9_6", t = {
+  root: o
 };
 export {
-  n as container,
-  o as default,
-  t as indicator
+  t as default,
+  o as root
 };
 //# sourceMappingURL=fondue-components63.js.map

package/dist/fondue-components63.js.map

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

package/dist/fondue-components64.js

@@ -1,8 +1,21 @@
-const o = "_root_jkymp_8", t = {
-  root: o
+const r = "_root_1ri4z_2", i = {
+  root: r,
+  "size-medium": "_size-medium_1ri4z_6",
+  "size-large": "_size-large_1ri4z_11",
+  "size-x-large": "_size-x-large_1ri4z_16",
+  "size-xx-large": "_size-xx-large_1ri4z_21",
+  "weight-default": "_weight-default_1ri4z_26",
+  "weight-strong": "_weight-strong_1ri4z_30",
+  "color-default": "_color-default_1ri4z_34",
+  "color-weak": "_color-weak_1ri4z_38",
+  "color-disabled": "_color-disabled_1ri4z_42",
+  "color-negative": "_color-negative_1ri4z_46",
+  "color-positive": "_color-positive_1ri4z_50",
+  "color-warning": "_color-warning_1ri4z_54",
+  "color-interactive": "_color-interactive_1ri4z_58"
 };
 export {
-  t as default,
-  o as root
+  i as default,
+  r as root
 };
 //# sourceMappingURL=fondue-components64.js.map

package/dist/fondue-components64.js.map

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

package/dist/fondue-components65.js

@@ -1,16 +1,14 @@
-const o = "_root_1bfzg_3", t = "_icon_1bfzg_90", n = "_content_1bfzg_118", s = "_action_1bfzg_125", c = "_dismiss_1bfzg_290", _ = {
-  root: o,
-  icon: t,
-  content: n,
-  action: s,
-  dismiss: c
+const t = "_root_1h7zi_3", e = "_contentArea_1h7zi_71", o = "_hiddenText_1h7zi_76", n = "_visibleText_1h7zi_82", i = {
+  root: t,
+  contentArea: e,
+  hiddenText: o,
+  visibleText: n
 };
 export {
-  s as action,
-  n as content,
-  _ as default,
-  c as dismiss,
-  t as icon,
-  o as root
+  e as contentArea,
+  i as default,
+  o as hiddenText,
+  t as root,
+  n as visibleText
 };
 //# sourceMappingURL=fondue-components65.js.map

package/dist/fondue-components65.js.map

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

package/dist/fondue-components66.js

@@ -1,12 +1,40 @@
-const o = "_root_1osq1_3", t = "_item_1osq1_21", s = "_indicator_1osq1_59", i = {
+const o = "_root_18l9z_2", l = "_truncate_18l9z_138", r = "_disabled_18l9z_144", _ = {
   root: o,
-  item: t,
-  indicator: s
+  "size-xx-small": "_size-xx-small_18l9z_8",
+  "size-x-small": "_size-x-small_18l9z_14",
+  "size-small": "_size-small_18l9z_20",
+  "size-medium": "_size-medium_18l9z_26",
+  "size-large": "_size-large_18l9z_32",
+  "size-x-large": "_size-x-large_18l9z_38",
+  "size-xx-large": "_size-xx-large_18l9z_44",
+  "weight-regular": "_weight-regular_18l9z_50",
+  "weight-medium": "_weight-medium_18l9z_54",
+  "weight-bold": "_weight-bold_18l9z_58",
+  "wrap-wrap": "_wrap-wrap_18l9z_62",
+  "wrap-nowrap": "_wrap-nowrap_18l9z_66",
+  "underline-auto": "_underline-auto_18l9z_70",
+  "underline-always": "_underline-always_18l9z_74",
+  "underline-hover": "_underline-hover_18l9z_78",
+  "underline-none": "_underline-none_18l9z_86",
+  "color-primary": "_color-primary_18l9z_90",
+  "color-secondary": "_color-secondary_18l9z_94",
+  "color-error": "_color-error_18l9z_98",
+  "color-success": "_color-success_18l9z_102",
+  "color-warning": "_color-warning_18l9z_106",
+  "color-highlight": "_color-highlight_18l9z_110",
+  "color-on-container-secondary": "_color-on-container-secondary_18l9z_114",
+  "color-on-container-disabled": "_color-on-container-disabled_18l9z_118",
+  "color-on-container-error": "_color-on-container-error_18l9z_122",
+  "color-on-container-success": "_color-on-container-success_18l9z_126",
+  "color-on-container-warning": "_color-on-container-warning_18l9z_130",
+  "color-on-container-highlight": "_color-on-container-highlight_18l9z_134",
+  truncate: l,
+  disabled: r
 };
 export {
-  i as default,
-  s as indicator,
-  t as item,
-  o as root
+  _ as default,
+  r as disabled,
+  o as root,
+  l as truncate
 };
 //# sourceMappingURL=fondue-components66.js.map

package/dist/fondue-components66.js.map

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

package/dist/fondue-components67.js

@@ -1,16 +1,10 @@
-const r = "_root_71r9v_4", o = "_viewport_71r9v_12", t = "_scrollbar_71r9v_43", _ = "_thumb_71r9v_75", c = "_corner_71r9v_93", s = {
-  root: r,
-  viewport: o,
-  scrollbar: t,
-  thumb: _,
-  corner: c
+const n = "_container_1mpjk_13", t = "_indicator_1mpjk_43", o = {
+  container: n,
+  indicator: t
 };
 export {
-  c as corner,
-  s as default,
-  r as root,
-  t as scrollbar,
-  _ as thumb,
-  o as viewport
+  n as container,
+  o as default,
+  t as indicator
 };
 //# sourceMappingURL=fondue-components67.js.map

package/dist/fondue-components67.js.map

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

package/dist/fondue-components68.js

@@ -1,4 +1,4 @@
-const o = "_root_f9dx4_6", t = {
+const o = "_root_jkymp_8", t = {
   root: o
 };
 export {

package/dist/fondue-components69.js

@@ -1,28 +1,16 @@
-import { useMemo as d, useCallback as v, useState as a, useRef as m, useEffect as S } from "react";
-const U = ({
-  prop: e,
-  defaultProp: s,
-  onChange: t = () => {
-  }
-}) => {
-  const [l, c] = b({ defaultProp: s, onChange: t }), r = e !== void 0, n = r ? e : l, u = d(() => t, [t]), i = v(
-    (o) => {
-      if (r) {
-        const f = typeof o == "function" ? o(e) : o;
-        f !== e && u(f);
-      } else
-        c(o);
-    },
-    [r, e, c, u]
-  );
-  return [n, i];
-}, b = ({ defaultProp: e, onChange: s }) => {
-  const [t, l] = a(e), c = m(t);
-  return S(() => {
-    c.current !== t && (s == null || s(t), c.current = t);
-  }, [s, t]), [t, l];
+const o = "_root_1bfzg_3", t = "_icon_1bfzg_90", n = "_content_1bfzg_118", s = "_action_1bfzg_125", c = "_dismiss_1bfzg_290", _ = {
+  root: o,
+  icon: t,
+  content: n,
+  action: s,
+  dismiss: c
 };
 export {
-  U as useControllableState
+  s as action,
+  n as content,
+  _ as default,
+  c as dismiss,
+  t as icon,
+  o as root
 };
 //# sourceMappingURL=fondue-components69.js.map

package/dist/fondue-components69.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components69.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 [value, setValue] = useState<TValue | undefined>(defaultProp);\n    const prevValueRef = useRef(value);\n\n    useEffect(() => {\n        if (prevValueRef.current !== value) {\n            onChange?.(value as TValue);\n            prevValueRef.current = value;\n        }\n    }, [onChange, value]);\n\n    return [value, setValue] as const;\n};\n"],"names":["useControllableState","prop","defaultProp","onChange","uncontrolledProp","setUncontrolledProp","useUncontrolledState","isControlled","value","handleChange","useMemo","setValue","useCallback","nextValue","useState","prevValueRef","useRef","useEffect"],"mappings":";AAeO,MAAMA,IAAuB,CAAS;AAAA,EACzC,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC,IAAW,MAAM;AAAA,EAAC;AACtB,MAA0C;AACtC,QAAM,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,MAEpC;AACI,QAAAH,EAAoBQ,CAAS;AAAA,IAErC;AAAA,IACA,CAACN,GAAcN,GAAMI,GAAqBI,CAAY;AAAA,EAAA;AAG1D,SAAO,CAACD,GAAOG,CAAQ;AAC3B,GAEML,IAAuB,CAAS,EAAE,aAAAJ,GAAa,UAAAC,QAAiE;AAClH,QAAM,CAACK,GAAOG,CAAQ,IAAIG,EAA6BZ,CAAW,GAC5Da,IAAeC,EAAOR,CAAK;AAEjC,SAAAS,EAAU,MAAM;AACZ,IAAIF,EAAa,YAAYP,MACzBL,KAAA,QAAAA,EAAWK,IACXO,EAAa,UAAUP;AAAA,EAE/B,GAAG,CAACL,GAAUK,CAAK,CAAC,GAEb,CAACA,GAAOG,CAAQ;AAC3B;"}
+{"version":3,"file":"fondue-components69.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/fondue-components7.js

@@ -2,7 +2,7 @@ import { jsx as c, jsxs as x } from "react/jsx-runtime";
 import { IconMinus as b, IconCheckMark as j } from "@frontify/fondue-icons";
 import * as s from "@radix-ui/react-checkbox";
 import { forwardRef as C } from "react";
-import t from "./fondue-components45.js";
+import t from "./fondue-components46.js";
 const N = ({
   className: n,
   value: l,

package/dist/fondue-components70.js

@@ -1,20 +1,12 @@
-const t = "_root_zjamu_5", e = "_item_zjamu_34", a = "_itemLabel_zjamu_59", i = "_itemLabelActive_zjamu_80", o = "_itemLabelInactive_zjamu_111", _ = "_activeIndicator_zjamu_141", c = "_separator_zjamu_267", m = {
-  root: t,
-  item: e,
-  itemLabel: a,
-  itemLabelActive: i,
-  itemLabelInactive: o,
-  activeIndicator: _,
-  separator: c
+const o = "_root_1osq1_3", t = "_item_1osq1_21", s = "_indicator_1osq1_59", i = {
+  root: o,
+  item: t,
+  indicator: s
 };
 export {
-  _ as activeIndicator,
-  m as default,
-  e as item,
-  a as itemLabel,
-  i as itemLabelActive,
-  o as itemLabelInactive,
-  t as root,
-  c as separator
+  i as default,
+  s as indicator,
+  t as item,
+  o as root
 };
 //# sourceMappingURL=fondue-components70.js.map

package/dist/fondue-components70.js.map

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

package/dist/fondue-components71.js

@@ -1,23 +1,16 @@
-import { jsx as s } from "react/jsx-runtime";
-import { forwardRef as u } from "react";
-import { ComboboxBase as c } from "./fondue-components95.js";
-import { useMultiselect as b } from "./fondue-components96.js";
-const a = ({ value: e, onSelect: o, defaultValue: t, ...l }, m) => {
-  const { selectedItemValues: r, toggleSelectedItem: p, clear: i } = b(o, e, t);
-  return /* @__PURE__ */ s(
-    c,
-    {
-      ref: m,
-      multiple: !0,
-      selectedItemValues: r,
-      onItemSelect: p,
-      onClear: i,
-      ...l
-    }
-  );
-}, n = u(a);
-n.displayName = "Select.Combobox.Multiple";
+const r = "_root_71r9v_4", o = "_viewport_71r9v_12", t = "_scrollbar_71r9v_43", _ = "_thumb_71r9v_75", c = "_corner_71r9v_93", s = {
+  root: r,
+  viewport: o,
+  scrollbar: t,
+  thumb: _,
+  corner: c
+};
 export {
-  n as ComboboxMultiple
+  c as corner,
+  s as default,
+  r as root,
+  t as scrollbar,
+  _ as thumb,
+  o as viewport
 };
 //# sourceMappingURL=fondue-components71.js.map

package/dist/fondue-components71.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components71.js","sources":["../src/components/Select/ComboboxMultiple.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef } from 'react';\n\nimport { ComboboxBase, type ComboboxSharedProps } from './components/ComboboxBase';\nimport { useMultiselect } from './hooks/useMultiselect';\n\nexport type ComboboxMultipleProps = ComboboxSharedProps & {\n    /**\n     * The active value in the combobox component. This is used to control the combobox externally\n     */\n    value?: string[] | null;\n    /**\n     * Callback function that is called when items are selected\n     */\n    onSelect?: (selectedValues: string[] | null) => void;\n    /**\n     * The default value of the combobox component. Used for uncontrolled usages\n     */\n    defaultValue?: string[];\n};\n\nconst ComboboxMultipleInput = (\n    { value, onSelect, defaultValue, ...rest }: ComboboxMultipleProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { selectedItemValues, toggleSelectedItem, clear } = useMultiselect(onSelect, value, defaultValue);\n\n    return (\n        <ComboboxBase\n            ref={ref}\n            multiple\n            selectedItemValues={selectedItemValues}\n            onItemSelect={toggleSelectedItem}\n            onClear={clear}\n            {...rest}\n        />\n    );\n};\n\nexport const ComboboxMultiple = forwardRef<HTMLDivElement, ComboboxMultipleProps>(ComboboxMultipleInput);\nComboboxMultiple.displayName = 'Select.Combobox.Multiple';\n"],"names":["ComboboxMultipleInput","value","onSelect","defaultValue","rest","ref","selectedItemValues","toggleSelectedItem","clear","useMultiselect","jsx","ComboboxBase","ComboboxMultiple","forwardRef"],"mappings":";;;;AAsBA,MAAMA,IAAwB,CAC1B,EAAE,OAAAC,GAAO,UAAAC,GAAU,cAAAC,GAAc,GAAGC,EAAA,GACpCC,MACC;AACD,QAAM,EAAE,oBAAAC,GAAoB,oBAAAC,GAAoB,OAAAC,EAAA,IAAUC,EAAeP,GAAUD,GAAOE,CAAY;AAEtG,SACI,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,KAAAN;AAAA,MACA,UAAQ;AAAA,MACR,oBAAAC;AAAA,MACA,cAAcC;AAAA,MACd,SAASC;AAAA,MACR,GAAGJ;AAAA,IAAA;AAAA,EAAA;AAGhB,GAEaQ,IAAmBC,EAAkDb,CAAqB;AACvGY,EAAiB,cAAc;"}
+{"version":3,"file":"fondue-components71.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/fondue-components72.js

@@ -1,23 +1,8 @@
-import { jsx as c } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
-import { ComboboxBase as a } from "./fondue-components95.js";
-import { useSingleSelect as b } from "./fondue-components97.js";
-const p = ({ value: e, onSelect: o, defaultValue: t, ...m }, l) => {
-  const { selectedItemValues: r, selectItem: s, clear: n } = b(o, e, t);
-  return /* @__PURE__ */ c(
-    a,
-    {
-      ref: l,
-      multiple: !1,
-      selectedItemValues: r,
-      onItemSelect: s,
-      onClear: n,
-      ...m
-    }
-  );
-}, f = i(p);
-f.displayName = "Select.Combobox";
+const o = "_root_f9dx4_6", t = {
+  root: o
+};
 export {
-  f as ComboboxSingle
+  t as default,
+  o as root
 };
 //# sourceMappingURL=fondue-components72.js.map

package/dist/fondue-components72.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components72.js","sources":["../src/components/Select/ComboboxSingle.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef } from 'react';\n\nimport { ComboboxBase, type ComboboxSharedProps } from './components/ComboboxBase';\nimport { useSingleSelect } from './hooks/useSingleSelect';\n\nexport type ComboboxSingleProps = ComboboxSharedProps & {\n    /**\n     * The active value in the combobox component. This is used to control the combobox externally\n     */\n    value?: string | null;\n    /**\n     * Callback function that is called when an item is selected\n     */\n    onSelect?: (selectedValue: string | null) => void;\n    /**\n     * The default value of the combobox component. Used for uncontrolled usages\n     */\n    defaultValue?: string;\n};\n\nconst ComboboxSingleInput = (\n    { value, onSelect, defaultValue, ...rest }: ComboboxSingleProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { selectedItemValues, selectItem, clear } = useSingleSelect(onSelect, value, defaultValue);\n\n    return (\n        <ComboboxBase\n            ref={ref}\n            multiple={false}\n            selectedItemValues={selectedItemValues}\n            onItemSelect={selectItem}\n            onClear={clear}\n            {...rest}\n        />\n    );\n};\n\nexport const ComboboxSingle = forwardRef<HTMLDivElement, ComboboxSingleProps>(ComboboxSingleInput);\nComboboxSingle.displayName = 'Select.Combobox';\n"],"names":["ComboboxSingleInput","value","onSelect","defaultValue","rest","ref","selectedItemValues","selectItem","clear","useSingleSelect","jsx","ComboboxBase","ComboboxSingle","forwardRef"],"mappings":";;;;AAsBA,MAAMA,IAAsB,CACxB,EAAE,OAAAC,GAAO,UAAAC,GAAU,cAAAC,GAAc,GAAGC,EAAA,GACpCC,MACC;AACD,QAAM,EAAE,oBAAAC,GAAoB,YAAAC,GAAY,OAAAC,EAAA,IAAUC,EAAgBP,GAAUD,GAAOE,CAAY;AAE/F,SACI,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,KAAAN;AAAA,MACA,UAAU;AAAA,MACV,oBAAAC;AAAA,MACA,cAAcC;AAAA,MACd,SAASC;AAAA,MACR,GAAGJ;AAAA,IAAA;AAAA,EAAA;AAGhB,GAEaQ,IAAiBC,EAAgDb,CAAmB;AACjGY,EAAe,cAAc;"}
+{"version":3,"file":"fondue-components72.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/fondue-components73.js

@@ -1,23 +1,28 @@
-import { jsx as p } from "react/jsx-runtime";
-import { forwardRef as s } from "react";
-import { SelectBase as u } from "./fondue-components98.js";
-import { useMultiselect as a } from "./fondue-components96.js";
-const n = ({ value: e, onSelect: t, defaultValue: l, ...o }, r) => {
-  const { selectedItemValues: m, toggleSelectedItem: c, clear: i } = a(t, e, l);
-  return /* @__PURE__ */ p(
-    u,
-    {
-      ref: r,
-      multiple: !0,
-      selectedItemValues: m,
-      onItemSelect: c,
-      onClear: i,
-      ...o
-    }
+import { useMemo as d, useCallback as v, useState as a, useRef as m, useEffect as S } from "react";
+const U = ({
+  prop: e,
+  defaultProp: s,
+  onChange: t = () => {
+  }
+}) => {
+  const [l, c] = b({ defaultProp: s, onChange: t }), r = e !== void 0, n = r ? e : l, u = d(() => t, [t]), i = v(
+    (o) => {
+      if (r) {
+        const f = typeof o == "function" ? o(e) : o;
+        f !== e && u(f);
+      } else
+        c(o);
+    },
+    [r, e, c, u]
   );
-}, f = s(n);
-f.displayName = "Select.Multi";
+  return [n, i];
+}, b = ({ defaultProp: e, onChange: s }) => {
+  const [t, l] = a(e), c = m(t);
+  return S(() => {
+    c.current !== t && (s == null || s(t), c.current = t);
+  }, [s, t]), [t, l];
+};
 export {
-  f as SelectMultiple
+  U as useControllableState
 };
 //# sourceMappingURL=fondue-components73.js.map

package/dist/fondue-components73.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components73.js","sources":["../src/components/Select/SelectMultiple.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef } from 'react';\n\nimport { SelectBase, type SelectSharedProps } from './components/SelectBase';\nimport { useMultiselect } from './hooks/useMultiselect';\n\nexport type SelectMultipleProps = SelectSharedProps & {\n    /**\n     * The active value in the select component. This is used to control the select externally\n     */\n    value?: string[] | null;\n    /**\n     * Callback function that is called when items are selected\n     */\n    onSelect?: (selectedValues: string[] | null) => void;\n    /**\n     * The default value of the select component. Used for uncontrolled usages\n     */\n    defaultValue?: string[];\n};\n\nconst SelectMultipleInput = (\n    { value, onSelect, defaultValue, ...rest }: SelectMultipleProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { selectedItemValues, toggleSelectedItem, clear } = useMultiselect(onSelect, value, defaultValue);\n\n    return (\n        <SelectBase\n            ref={ref}\n            multiple\n            selectedItemValues={selectedItemValues}\n            onItemSelect={toggleSelectedItem}\n            onClear={clear}\n            {...rest}\n        />\n    );\n};\n\nexport const SelectMultiple = forwardRef<HTMLDivElement, SelectMultipleProps>(SelectMultipleInput);\nSelectMultiple.displayName = 'Select.Multi';\n"],"names":["SelectMultipleInput","value","onSelect","defaultValue","rest","ref","selectedItemValues","toggleSelectedItem","clear","useMultiselect","jsx","SelectBase","SelectMultiple","forwardRef"],"mappings":";;;;AAsBA,MAAMA,IAAsB,CACxB,EAAE,OAAAC,GAAO,UAAAC,GAAU,cAAAC,GAAc,GAAGC,EAAA,GACpCC,MACC;AACD,QAAM,EAAE,oBAAAC,GAAoB,oBAAAC,GAAoB,OAAAC,EAAA,IAAUC,EAAeP,GAAUD,GAAOE,CAAY;AAEtG,SACI,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,KAAAN;AAAA,MACA,UAAQ;AAAA,MACR,oBAAAC;AAAA,MACA,cAAcC;AAAA,MACd,SAASC;AAAA,MACR,GAAGJ;AAAA,IAAA;AAAA,EAAA;AAGhB,GAEaQ,IAAiBC,EAAgDb,CAAmB;AACjGY,EAAe,cAAc;"}
+{"version":3,"file":"fondue-components73.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 [value, setValue] = useState<TValue | undefined>(defaultProp);\n    const prevValueRef = useRef(value);\n\n    useEffect(() => {\n        if (prevValueRef.current !== value) {\n            onChange?.(value as TValue);\n            prevValueRef.current = value;\n        }\n    }, [onChange, value]);\n\n    return [value, setValue] as const;\n};\n"],"names":["useControllableState","prop","defaultProp","onChange","uncontrolledProp","setUncontrolledProp","useUncontrolledState","isControlled","value","handleChange","useMemo","setValue","useCallback","nextValue","useState","prevValueRef","useRef","useEffect"],"mappings":";AAeO,MAAMA,IAAuB,CAAS;AAAA,EACzC,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC,IAAW,MAAM;AAAA,EAAC;AACtB,MAA0C;AACtC,QAAM,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,MAEpC;AACI,QAAAH,EAAoBQ,CAAS;AAAA,IAErC;AAAA,IACA,CAACN,GAAcN,GAAMI,GAAqBI,CAAY;AAAA,EAAA;AAG1D,SAAO,CAACD,GAAOG,CAAQ;AAC3B,GAEML,IAAuB,CAAS,EAAE,aAAAJ,GAAa,UAAAC,QAAiE;AAClH,QAAM,CAACK,GAAOG,CAAQ,IAAIG,EAA6BZ,CAAW,GAC5Da,IAAeC,EAAOR,CAAK;AAEjC,SAAAS,EAAU,MAAM;AACZ,IAAIF,EAAa,YAAYP,MACzBL,KAAA,QAAAA,EAAWK,IACXO,EAAa,UAAUP;AAAA,EAE/B,GAAG,CAACL,GAAUK,CAAK,CAAC,GAEb,CAACA,GAAOG,CAAQ;AAC3B;"}

package/dist/fondue-components74.js

@@ -1,23 +1,20 @@
-import { jsx as n } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
-import { SelectBase as S } from "./fondue-components98.js";
-import { useSingleSelect as a } from "./fondue-components97.js";
-const p = ({ value: e, onSelect: t, defaultValue: l, ...o }, r) => {
-  const { selectedItemValues: m, selectItem: c, clear: s } = a(t, e, l);
-  return /* @__PURE__ */ n(
-    S,
-    {
-      ref: r,
-      multiple: !1,
-      selectedItemValues: m,
-      onItemSelect: c,
-      onClear: s,
-      ...o
-    }
-  );
-}, f = i(p);
-f.displayName = "Select";
+const t = "_root_zjamu_5", e = "_item_zjamu_34", a = "_itemLabel_zjamu_59", i = "_itemLabelActive_zjamu_80", o = "_itemLabelInactive_zjamu_111", _ = "_activeIndicator_zjamu_141", c = "_separator_zjamu_267", m = {
+  root: t,
+  item: e,
+  itemLabel: a,
+  itemLabelActive: i,
+  itemLabelInactive: o,
+  activeIndicator: _,
+  separator: c
+};
 export {
-  f as SelectSingle
+  _ as activeIndicator,
+  m as default,
+  e as item,
+  a as itemLabel,
+  i as itemLabelActive,
+  o as itemLabelInactive,
+  t as root,
+  c as separator
 };
 //# sourceMappingURL=fondue-components74.js.map

package/dist/fondue-components74.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components74.js","sources":["../src/components/Select/SelectSingle.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef } from 'react';\n\nimport { SelectBase, type SelectSharedProps } from './components/SelectBase';\nimport { useSingleSelect } from './hooks/useSingleSelect';\n\nexport type SelectSingleProps = SelectSharedProps & {\n    /**\n     * The active value in the select component. This is used to control the select externally\n     */\n    value?: string | null;\n    /**\n     * Callback function that is called when an item is selected\n     */\n    onSelect?: (selectedValue: string | null) => void;\n    /**\n     * The default value of the select component. Used for uncontrolled usages\n     */\n    defaultValue?: string;\n};\n\nconst SelectSingleInput = (\n    { value, onSelect, defaultValue, ...rest }: SelectSingleProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { selectedItemValues, selectItem, clear } = useSingleSelect(onSelect, value, defaultValue);\n\n    return (\n        <SelectBase\n            ref={ref}\n            multiple={false}\n            selectedItemValues={selectedItemValues}\n            onItemSelect={selectItem}\n            onClear={clear}\n            {...rest}\n        />\n    );\n};\n\nexport const SelectSingle = forwardRef<HTMLDivElement, SelectSingleProps>(SelectSingleInput);\nSelectSingle.displayName = 'Select';\n"],"names":["SelectSingleInput","value","onSelect","defaultValue","rest","ref","selectedItemValues","selectItem","clear","useSingleSelect","jsx","SelectBase","SelectSingle","forwardRef"],"mappings":";;;;AAsBA,MAAMA,IAAoB,CACtB,EAAE,OAAAC,GAAO,UAAAC,GAAU,cAAAC,GAAc,GAAGC,EAAA,GACpCC,MACC;AACD,QAAM,EAAE,oBAAAC,GAAoB,YAAAC,GAAY,OAAAC,EAAA,IAAUC,EAAgBP,GAAUD,GAAOE,CAAY;AAE/F,SACI,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,KAAAN;AAAA,MACA,UAAU;AAAA,MACV,oBAAAC;AAAA,MACA,cAAcC;AAAA,MACd,SAASC;AAAA,MACR,GAAGJ;AAAA,IAAA;AAAA,EAAA;AAGhB,GAEaQ,IAAeC,EAA8Cb,CAAiB;AAC3FY,EAAa,cAAc;"}
+{"version":3,"file":"fondue-components74.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/fondue-components75.js

@@ -1,22 +1,23 @@
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
-import { IconCheckMark as n } from "@frontify/fondue-icons";
-import { forwardRef as l } from "react";
-import a from "./fondue-components99.js";
-const o = ({ "data-test-id": c = "fondue-select-item", ...e }, t) => /* @__PURE__ */ d("li", { "data-test-id": c, ref: t, ...e, children: [
-  /* @__PURE__ */ r("div", { className: a.itemValue, children: e.children }),
-  /* @__PURE__ */ r(n, { className: a.checkmarkIcon })
-] });
-o.displayName = "Select.Item";
-const I = l(o), s = ({ children: c, groupId: e, heading: t, "data-test-id": i = "fondue-select-item-group" }, m) => /* @__PURE__ */ d("div", { "data-test-id": i, className: a.group, ref: m, children: [
-  t ? /* @__PURE__ */ r("div", { className: a.groupHeading, children: /* @__PURE__ */ r("span", { children: t }) }) : null,
-  c
-] }, e);
-s.displayName = "Select.Group";
-const N = l(s);
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { ComboboxBase as c } from "./fondue-components98.js";
+import { useMultiselect as b } from "./fondue-components99.js";
+const a = ({ value: e, onSelect: o, defaultValue: t, ...l }, m) => {
+  const { selectedItemValues: r, toggleSelectedItem: p, clear: i } = b(o, e, t);
+  return /* @__PURE__ */ s(
+    c,
+    {
+      ref: m,
+      multiple: !0,
+      selectedItemValues: r,
+      onItemSelect: p,
+      onClear: i,
+      ...l
+    }
+  );
+}, n = u(a);
+n.displayName = "Select.Combobox.Multiple";
 export {
-  I as ForwardedRefSelectItem,
-  N as ForwardedRefSelectItemGroup,
-  o as SelectItem,
-  s as SelectItemGroup
+  n as ComboboxMultiple
 };
 //# sourceMappingURL=fondue-components75.js.map

package/dist/fondue-components75.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components75.js","sources":["../src/components/Select/components/SelectItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark } from '@frontify/fondue-icons';\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            <div className={styles.itemValue}>{props.children}</div>\n            <IconCheckMark className={styles.checkmarkIcon} />\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 groups heading\n     */\n    heading?: 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, heading, '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            {heading ? (\n                <div className={styles.groupHeading}>\n                    <span>{heading}</span>\n                </div>\n            ) : null}\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","styles","IconCheckMark","ForwardedRefSelectItem","forwardRef","SelectItemGroup","children","groupId","heading","jsxs","ForwardedRefSelectItemGroup"],"mappings":";;;;AAiCO,MAAMA,IAAa,CACtB,EAAE,gBAAgBC,IAAa,sBAAsB,GAAGC,EAAA,GACxDC,wBAGK,MAAA,EAAG,gBAAcF,GAAY,KAAKE,GAAe,GAAGD,GACjD,UAAA;AAAA,EAAA,gBAAAE,EAAC,OAAA,EAAI,WAAWC,EAAO,WAAY,YAAM,UAAS;AAAA,EAClD,gBAAAD,EAACE,GAAA,EAAc,WAAWD,EAAO,cAAA,CAAe;AAAA,GACpD;AAGRL,EAAW,cAAc;AAElB,MAAMO,IAAyBC,EAA2CR,CAAU,GAqB9ES,IAAkB,CAC3B,EAAE,UAAAC,GAAU,SAAAC,GAAS,SAAAC,GAAS,gBAAgBX,IAAa,2BAAA,GAC3DE,MAGI,gBAAAU,EAAC,SAAI,gBAAcZ,GAAY,WAAWI,EAAO,OAAO,KAAKF,GACxD,UAAA;AAAA,EAAAS,IACG,gBAAAR,EAAC,SAAI,WAAWC,EAAO,cACnB,UAAA,gBAAAD,EAAC,QAAA,EAAM,UAAAQ,EAAA,CAAQ,EAAA,CACnB,IACA;AAAA,EACHF;AAAA,EAAA,GAN2EC,CAOhF;AAGRF,EAAgB,cAAc;AAEvB,MAAMK,IAA8BN,EAAiDC,CAAe;"}
+{"version":3,"file":"fondue-components75.js","sources":["../src/components/Select/ComboboxMultiple.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef } from 'react';\n\nimport { ComboboxBase, type ComboboxSharedProps } from './components/ComboboxBase';\nimport { useMultiselect } from './hooks/useMultiselect';\n\nexport type ComboboxMultipleProps = ComboboxSharedProps & {\n    /**\n     * The active value in the combobox component. This is used to control the combobox externally\n     */\n    value?: string[] | null;\n    /**\n     * Callback function that is called when items are selected\n     */\n    onSelect?: (selectedValues: string[] | null) => void;\n    /**\n     * The default value of the combobox component. Used for uncontrolled usages\n     */\n    defaultValue?: string[];\n};\n\nconst ComboboxMultipleInput = (\n    { value, onSelect, defaultValue, ...rest }: ComboboxMultipleProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { selectedItemValues, toggleSelectedItem, clear } = useMultiselect(onSelect, value, defaultValue);\n\n    return (\n        <ComboboxBase\n            ref={ref}\n            multiple\n            selectedItemValues={selectedItemValues}\n            onItemSelect={toggleSelectedItem}\n            onClear={clear}\n            {...rest}\n        />\n    );\n};\n\nexport const ComboboxMultiple = forwardRef<HTMLDivElement, ComboboxMultipleProps>(ComboboxMultipleInput);\nComboboxMultiple.displayName = 'Select.Combobox.Multiple';\n"],"names":["ComboboxMultipleInput","value","onSelect","defaultValue","rest","ref","selectedItemValues","toggleSelectedItem","clear","useMultiselect","jsx","ComboboxBase","ComboboxMultiple","forwardRef"],"mappings":";;;;AAsBA,MAAMA,IAAwB,CAC1B,EAAE,OAAAC,GAAO,UAAAC,GAAU,cAAAC,GAAc,GAAGC,EAAA,GACpCC,MACC;AACD,QAAM,EAAE,oBAAAC,GAAoB,oBAAAC,GAAoB,OAAAC,EAAA,IAAUC,EAAeP,GAAUD,GAAOE,CAAY;AAEtG,SACI,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,KAAAN;AAAA,MACA,UAAQ;AAAA,MACR,oBAAAC;AAAA,MACA,cAAcC;AAAA,MACd,SAASC;AAAA,MACR,GAAGJ;AAAA,IAAA;AAAA,EAAA;AAGhB,GAEaQ,IAAmBC,EAAkDb,CAAqB;AACvGY,EAAiB,cAAc;"}