@frontify/fondue-components 28.0.0 → 29.0.1

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,16 +1,8 @@
-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 o = "_root_jkymp_8", t = {
+  root: o
 };
 export {
-  c as corner,
-  s as default,
-  r as root,
-  t as scrollbar,
-  _ as thumb,
-  o as viewport
+  t as default,
+  o as root
 };
 //# sourceMappingURL=fondue-components71.js.map

package/dist/fondue-components71.js.map

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

package/dist/fondue-components72.js

@@ -1,8 +1,16 @@
-const o = "_root_f9dx4_6", t = {
-  root: o
+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 {
-  t as default,
+  s as action,
+  n as content,
+  _ as default,
+  c as dismiss,
+  t as icon,
   o as root
 };
 //# sourceMappingURL=fondue-components72.js.map

package/dist/fondue-components72.js.map

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

package/dist/fondue-components73.js

@@ -1,28 +1,55 @@
-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 = () => {
+import { Modifier as f, configurator as _ } from "@dnd-kit/abstract";
+var y = Object.defineProperty, d = Object.defineProperties, x = Object.getOwnPropertyDescriptors, n = Object.getOwnPropertySymbols, O = Object.prototype.hasOwnProperty, P = Object.prototype.propertyIsEnumerable, p = (o, r, e) => r in o ? y(o, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[r] = e, l = (o, r) => {
+  for (var e in r || (r = {}))
+    O.call(r, e) && p(o, e, r[e]);
+  if (n)
+    for (var e of n(r))
+      P.call(r, e) && p(o, e, r[e]);
+  return o;
+}, u = (o, r) => d(o, x(r)), t = class extends f {
+  /**
+   * Applies the axis restriction to the drag operation.
+   *
+   * @param operation - The current drag operation
+   * @returns The modified transform with the axis restriction applied
+   */
+  apply({ transform: r }) {
+    if (!this.options)
+      return r;
+    const { axis: e, value: i } = this.options;
+    return u(l({}, r), {
+      [e]: i
+    });
   }
-}) => {
-  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];
 };
+t.configure = _(t);
+var v = t;
+v.configure({
+  axis: "x",
+  value: 0
+});
+v.configure({
+  axis: "y",
+  value: 0
+});
+var c = class extends f {
+  /**
+   * Applies the snap grid to the drag operation.
+   *
+   * @param operation - The current drag operation
+   * @returns The modified transform with coordinates snapped to the grid
+   */
+  apply({ transform: r }) {
+    var e;
+    const { size: i = 20 } = (e = this.options) != null ? e : {}, a = typeof i == "number" ? i : i.x, s = typeof i == "number" ? i : i.y;
+    return u(l({}, r), {
+      x: Math.ceil(r.x / a) * a,
+      y: Math.ceil(r.y / s) * s
+    });
+  }
+};
+c.configure = _(c);
 export {
-  U as useControllableState
+  v as AxisModifier
 };
 //# sourceMappingURL=fondue-components73.js.map

package/dist/fondue-components73.js.map

@@ -1 +1 @@
-{"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;"}
+{"version":3,"file":"fondue-components73.js","sources":["../../../node_modules/.pnpm/@dnd-kit+abstract@0.3.2/node_modules/@dnd-kit/abstract/modifiers.js"],"sourcesContent":["import { configurator, Modifier } from '@dnd-kit/abstract';\n\nvar __defProp = Object.defineProperty;\nvar __defProps = Object.defineProperties;\nvar __getOwnPropDescs = Object.getOwnPropertyDescriptors;\nvar __getOwnPropSymbols = Object.getOwnPropertySymbols;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __propIsEnum = Object.prototype.propertyIsEnumerable;\nvar __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;\nvar __spreadValues = (a, b) => {\n  for (var prop in b || (b = {}))\n    if (__hasOwnProp.call(b, prop))\n      __defNormalProp(a, prop, b[prop]);\n  if (__getOwnPropSymbols)\n    for (var prop of __getOwnPropSymbols(b)) {\n      if (__propIsEnum.call(b, prop))\n        __defNormalProp(a, prop, b[prop]);\n    }\n  return a;\n};\nvar __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));\nvar _AxisModifier = class _AxisModifier extends Modifier {\n  /**\n   * Applies the axis restriction to the drag operation.\n   *\n   * @param operation - The current drag operation\n   * @returns The modified transform with the axis restriction applied\n   */\n  apply({ transform }) {\n    if (!this.options) {\n      return transform;\n    }\n    const { axis, value } = this.options;\n    return __spreadProps(__spreadValues({}, transform), {\n      [axis]: value\n    });\n  }\n};\n/**\n * Creates a configured instance of the AxisModifier.\n *\n * @param options - The axis restriction options\n * @returns A configured AxisModifier instance\n */\n_AxisModifier.configure = configurator(_AxisModifier);\nvar AxisModifier = _AxisModifier;\nvar RestrictToVerticalAxis = AxisModifier.configure({\n  axis: \"x\",\n  value: 0\n});\nvar RestrictToHorizontalAxis = AxisModifier.configure({\n  axis: \"y\",\n  value: 0\n});\n\n// src/modifiers/boundingRectangle.ts\nfunction restrictShapeToBoundingRectangle(shape, transform, boundingRect) {\n  const value = __spreadValues({}, transform);\n  if (shape.boundingRectangle.top + transform.y <= boundingRect.top) {\n    value.y = boundingRect.top - shape.boundingRectangle.top;\n  } else if (shape.boundingRectangle.bottom + transform.y >= boundingRect.top + boundingRect.height) {\n    value.y = boundingRect.top + boundingRect.height - shape.boundingRectangle.bottom;\n  }\n  if (shape.boundingRectangle.left + transform.x <= boundingRect.left) {\n    value.x = boundingRect.left - shape.boundingRectangle.left;\n  } else if (shape.boundingRectangle.right + transform.x >= boundingRect.left + boundingRect.width) {\n    value.x = boundingRect.left + boundingRect.width - shape.boundingRectangle.right;\n  }\n  return value;\n}\nvar _SnapModifier = class _SnapModifier extends Modifier {\n  /**\n   * Applies the snap grid to the drag operation.\n   *\n   * @param operation - The current drag operation\n   * @returns The modified transform with coordinates snapped to the grid\n   */\n  apply({ transform }) {\n    var _a;\n    const { size = 20 } = (_a = this.options) != null ? _a : {};\n    const x = typeof size === \"number\" ? size : size.x;\n    const y = typeof size === \"number\" ? size : size.y;\n    return __spreadProps(__spreadValues({}, transform), {\n      x: Math.ceil(transform.x / x) * x,\n      y: Math.ceil(transform.y / y) * y\n    });\n  }\n};\n/**\n * Creates a configured instance of the SnapModifier.\n *\n * @param options - The snap grid options\n * @returns A configured SnapModifier instance\n */\n_SnapModifier.configure = configurator(_SnapModifier);\nvar SnapModifier = _SnapModifier;\n\nexport { AxisModifier, RestrictToHorizontalAxis, RestrictToVerticalAxis, SnapModifier, restrictShapeToBoundingRectangle };\n//# sourceMappingURL=modifiers.js.map\n//# sourceMappingURL=modifiers.js.map"],"names":["__defProp","__defProps","__getOwnPropDescs","__getOwnPropSymbols","__hasOwnProp","__propIsEnum","__defNormalProp","obj","key","value","__spreadValues","a","b","prop","__spreadProps","_AxisModifier","Modifier","transform","axis","configurator","AxisModifier","_SnapModifier","_a","size","x","y"],"mappings":";AAEA,IAAIA,IAAY,OAAO,gBACnBC,IAAa,OAAO,kBACpBC,IAAoB,OAAO,2BAC3BC,IAAsB,OAAO,uBAC7BC,IAAe,OAAO,UAAU,gBAChCC,IAAe,OAAO,UAAU,sBAChCC,IAAkB,CAACC,GAAKC,GAAKC,MAAUD,KAAOD,IAAMP,EAAUO,GAAKC,GAAK,EAAE,YAAY,IAAM,cAAc,IAAM,UAAU,IAAM,OAAAC,EAAK,CAAE,IAAIF,EAAIC,CAAG,IAAIC,GACtJC,IAAiB,CAACC,GAAGC,MAAM;AAC7B,WAASC,KAAQD,MAAMA,IAAI,CAAA;AACzB,IAAIR,EAAa,KAAKQ,GAAGC,CAAI,KAC3BP,EAAgBK,GAAGE,GAAMD,EAAEC,CAAI,CAAC;AACpC,MAAIV;AACF,aAASU,KAAQV,EAAoBS,CAAC;AACpC,MAAIP,EAAa,KAAKO,GAAGC,CAAI,KAC3BP,EAAgBK,GAAGE,GAAMD,EAAEC,CAAI,CAAC;AAEtC,SAAOF;AACT,GACIG,IAAgB,CAACH,GAAGC,MAAMX,EAAWU,GAAGT,EAAkBU,CAAC,CAAC,GAC5DG,IAAgB,cAA4BC,EAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOvD,MAAM,EAAE,WAAAC,KAAa;AACnB,QAAI,CAAC,KAAK;AACR,aAAOA;AAET,UAAM,EAAE,MAAAC,GAAM,OAAAT,EAAK,IAAK,KAAK;AAC7B,WAAOK,EAAcJ,EAAe,CAAA,GAAIO,CAAS,GAAG;AAAA,MAClD,CAACC,CAAI,GAAGT;AAAA,IACd,CAAK;AAAA,EACH;AACF;AAOAM,EAAc,YAAYI,EAAaJ,CAAa;AACjD,IAACK,IAAeL;AACUK,EAAa,UAAU;AAAA,EAClD,MAAM;AAAA,EACN,OAAO;AACT,CAAC;AAC8BA,EAAa,UAAU;AAAA,EACpD,MAAM;AAAA,EACN,OAAO;AACT,CAAC;AAiBD,IAAIC,IAAgB,cAA4BL,EAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOvD,MAAM,EAAE,WAAAC,KAAa;AACnB,QAAIK;AACJ,UAAM,EAAE,MAAAC,IAAO,GAAE,KAAMD,IAAK,KAAK,YAAY,OAAOA,IAAK,CAAA,GACnDE,IAAI,OAAOD,KAAS,WAAWA,IAAOA,EAAK,GAC3CE,IAAI,OAAOF,KAAS,WAAWA,IAAOA,EAAK;AACjD,WAAOT,EAAcJ,EAAe,CAAA,GAAIO,CAAS,GAAG;AAAA,MAClD,GAAG,KAAK,KAAKA,EAAU,IAAIO,CAAC,IAAIA;AAAA,MAChC,GAAG,KAAK,KAAKP,EAAU,IAAIQ,CAAC,IAAIA;AAAA,IACtC,CAAK;AAAA,EACH;AACF;AAOAJ,EAAc,YAAYF,EAAaE,CAAa;","x_google_ignoreList":[0]}

package/dist/fondue-components74.js

@@ -1,20 +1,47 @@
-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
-};
+import { jsx as f } from "react/jsx-runtime";
+import { useSortable as E } from "./fondue-components112.js";
+import { forwardRef as p, useRef as L, useState as v, useCallback as y, useMemo as C, useEffect as H } from "react";
+import { OrderableItemContextProvider as N } from "./fondue-components113.js";
+import h from "./fondue-components83.js";
+const x = p((o, e) => null);
+x.displayName = "OrderableListItem";
+const w = p(
+  ({ children: o, id: e, index: c, disabled: r, padding: u = "small", selected: n, onSelect: s }, a) => {
+    const i = L(null), g = (t) => {
+      i.current = t, typeof a == "function" ? a(t) : a !== null && (a.current = t);
+    }, { isDragging: b, isDropping: I, handleRef: l } = E({ id: e, index: c, element: i, disabled: r }), [m, O] = v(!1), d = y(
+      (t) => {
+        O(t !== null), r || l(t);
+      },
+      [r, l]
+    ), R = C(
+      () => ({ itemId: e, dragHandleRef: d, hasHandle: m, selected: n, onSelect: s }),
+      [e, d, m, n, s]
+    );
+    return H(() => {
+      process.env.NODE_ENV !== "production" && (document.getElementById(`orderable-item-${e}-title`) || console.warn(
+        `[OrderableList] Item "${e}" is missing an <OrderableList.ItemTitle>. This is required for accessible drag-and-drop announcements`
+      ));
+    }, [e]), /* @__PURE__ */ f(N, { value: R, children: /* @__PURE__ */ f(
+      "li",
+      {
+        className: h.item,
+        "aria-roledescription": "sortable item",
+        "data-padding": u,
+        "data-disabled": r || void 0,
+        "data-dragging": b,
+        "data-dropping": I,
+        "data-selected": n || void 0,
+        "data-test-id": "fondue-orderable-list-item",
+        ref: g,
+        children: o
+      }
+    ) });
+  }
+);
+w.displayName = "OrderableListItemComponent";
 export {
-  _ as activeIndicator,
-  m as default,
-  e as item,
-  a as itemLabel,
-  i as itemLabelActive,
-  o as itemLabelInactive,
-  t as root,
-  c as separator
+  x as OrderableListItem,
+  w as OrderableListItemComponent
 };
 //# sourceMappingURL=fondue-components74.js.map

package/dist/fondue-components74.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components74.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
+{"version":3,"file":"fondue-components74.js","sources":["../src/components/OrderableList/OrderableListItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useSortable } from '@dnd-kit/react/sortable';\nimport { forwardRef, useCallback, useEffect, useRef, useState, type ReactNode, useMemo } from 'react';\n\nimport { OrderableItemContextProvider } from './hooks/useOrderedListItemContext';\nimport styles from './styles/orderable-list.module.scss';\n\nexport type OrderableListItemPadding = 'none' | 'small';\nexport type OrderableListItemProps = {\n    children?: ReactNode;\n    id: string;\n    disabled?: boolean;\n    padding?: OrderableListItemPadding;\n    selected?: boolean;\n    onSelect?: (isSelected: boolean) => void;\n};\nexport const OrderableListItem = forwardRef<HTMLLIElement, OrderableListItemProps>((_props, _ref) => null);\nOrderableListItem.displayName = 'OrderableListItem';\n\nexport const OrderableListItemComponent = forwardRef<HTMLLIElement, OrderableListItemProps & { index: number }>(\n    ({ children, id, index, disabled, padding = 'small', selected, onSelect }, ref) => {\n        const internalRef = useRef<HTMLLIElement | null>(null);\n\n        const mergedRef = (node: HTMLLIElement | null) => {\n            internalRef.current = node;\n            if (typeof ref === 'function') {\n                ref(node);\n            } else if (ref !== null) {\n                ref.current = node;\n            }\n        };\n\n        const { isDragging, isDropping, handleRef } = useSortable({ id, index, element: internalRef, disabled });\n\n        const [hasHandle, setHasHandle] = useState(false);\n        const wrappedHandleRef = useCallback(\n            (element: Element | null) => {\n                setHasHandle(element !== null);\n                if (!disabled) {\n                    handleRef(element);\n                }\n            },\n            [disabled, handleRef],\n        );\n\n        const itemContextValue = useMemo(\n            () => ({ itemId: id, dragHandleRef: wrappedHandleRef, hasHandle, selected, onSelect }),\n            [id, wrappedHandleRef, hasHandle, selected, onSelect],\n        );\n\n        useEffect(() => {\n            if (process.env.NODE_ENV !== 'production') {\n                const titleElement = document.getElementById(`orderable-item-${id}-title`);\n                if (!titleElement) {\n                    console.warn(\n                        `[OrderableList] Item \"${id}\" is missing an <OrderableList.ItemTitle>. ` +\n                            'This is required for accessible drag-and-drop announcements',\n                    );\n                }\n            }\n        }, [id]);\n\n        return (\n            <OrderableItemContextProvider value={itemContextValue}>\n                <li\n                    className={styles.item}\n                    aria-roledescription=\"sortable item\"\n                    data-padding={padding}\n                    data-disabled={disabled || undefined}\n                    data-dragging={isDragging}\n                    data-dropping={isDropping}\n                    data-selected={selected || undefined}\n                    data-test-id=\"fondue-orderable-list-item\"\n                    ref={mergedRef}\n                >\n                    {children}\n                </li>\n            </OrderableItemContextProvider>\n        );\n    },\n);\nOrderableListItemComponent.displayName = 'OrderableListItemComponent';\n"],"names":["OrderableListItem","forwardRef","_props","_ref","OrderableListItemComponent","children","id","index","disabled","padding","selected","onSelect","ref","internalRef","useRef","mergedRef","node","isDragging","isDropping","handleRef","useSortable","hasHandle","setHasHandle","useState","wrappedHandleRef","useCallback","element","itemContextValue","useMemo","useEffect","jsx","OrderableItemContextProvider","styles"],"mappings":";;;;;AAiBO,MAAMA,IAAoBC,EAAkD,CAACC,GAAQC,MAAS,IAAI;AACzGH,EAAkB,cAAc;AAEzB,MAAMI,IAA6BH;AAAA,EACtC,CAAC,EAAE,UAAAI,GAAU,IAAAC,GAAI,OAAAC,GAAO,UAAAC,GAAU,SAAAC,IAAU,SAAS,UAAAC,GAAU,UAAAC,EAAA,GAAYC,MAAQ;AAC/E,UAAMC,IAAcC,EAA6B,IAAI,GAE/CC,IAAY,CAACC,MAA+B;AAC9C,MAAAH,EAAY,UAAUG,GAClB,OAAOJ,KAAQ,aACfA,EAAII,CAAI,IACDJ,MAAQ,SACfA,EAAI,UAAUI;AAAA,IAEtB,GAEM,EAAE,YAAAC,GAAY,YAAAC,GAAY,WAAAC,EAAA,IAAcC,EAAY,EAAE,IAAAd,GAAI,OAAAC,GAAO,SAASM,GAAa,UAAAL,EAAA,CAAU,GAEjG,CAACa,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1CC,IAAmBC;AAAA,MACrB,CAACC,MAA4B;AACzB,QAAAJ,EAAaI,MAAY,IAAI,GACxBlB,KACDW,EAAUO,CAAO;AAAA,MAEzB;AAAA,MACA,CAAClB,GAAUW,CAAS;AAAA,IAAA,GAGlBQ,IAAmBC;AAAA,MACrB,OAAO,EAAE,QAAQtB,GAAI,eAAekB,GAAkB,WAAAH,GAAW,UAAAX,GAAU,UAAAC;MAC3E,CAACL,GAAIkB,GAAkBH,GAAWX,GAAUC,CAAQ;AAAA,IAAA;AAGxD,WAAAkB,EAAU,MAAM;AACZ,MAAI,QAAQ,IAAI,aAAa,iBACJ,SAAS,eAAe,kBAAkBvB,CAAE,QAAQ,KAErE,QAAQ;AAAA,QACJ,yBAAyBA,CAAE;AAAA,MAAA;AAAA,IAK3C,GAAG,CAACA,CAAE,CAAC,GAGH,gBAAAwB,EAACC,GAAA,EAA6B,OAAOJ,GACjC,UAAA,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWE,EAAO;AAAA,QAClB,wBAAqB;AAAA,QACrB,gBAAcvB;AAAA,QACd,iBAAeD,KAAY;AAAA,QAC3B,iBAAeS;AAAA,QACf,iBAAeC;AAAA,QACf,iBAAeR,KAAY;AAAA,QAC3B,gBAAa;AAAA,QACb,KAAKK;AAAA,QAEJ,UAAAV;AAAA,MAAA;AAAA,IAAA,GAET;AAAA,EAER;AACJ;AACAD,EAA2B,cAAc;"}

package/dist/fondue-components75.js

@@ -1,23 +1,9 @@
-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";
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as o } from "react";
+import i from "./fondue-components83.js";
+const m = o(({ children: r }, t) => /* @__PURE__ */ e("div", { className: i.action, ref: t, children: r }));
+m.displayName = "OrderableListItemAction";
 export {
-  n as ComboboxMultiple
+  m as OrderableListItemAction
 };
 //# sourceMappingURL=fondue-components75.js.map

package/dist/fondue-components75.js.map

@@ -1 +1 @@
-{"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;"}
+{"version":3,"file":"fondue-components75.js","sources":["../src/components/OrderableList/OrderableListItemAction.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ReactNode } from 'react';\n\nimport styles from './styles/orderable-list.module.scss';\n\nexport type OrderableListItemActionProps = { children: ReactNode };\nexport const OrderableListItemAction = forwardRef<HTMLDivElement, OrderableListItemActionProps>(({ children }, ref) => {\n    return (\n        <div className={styles.action} ref={ref}>\n            {children}\n        </div>\n    );\n});\nOrderableListItemAction.displayName = 'OrderableListItemAction';\n"],"names":["OrderableListItemAction","forwardRef","children","ref","styles"],"mappings":";;;AAOO,MAAMA,IAA0BC,EAAyD,CAAC,EAAE,UAAAC,EAAA,GAAYC,wBAEtG,OAAA,EAAI,WAAWC,EAAO,QAAQ,KAAAD,GAC1B,UAAAD,GACL,CAEP;AACDF,EAAwB,cAAc;"}

package/dist/fondue-components76.js

@@ -1,23 +1,9 @@
-import { jsx as c } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
-import { ComboboxBase as a } from "./fondue-components98.js";
-import { useSingleSelect as b } from "./fondue-components100.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";
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+import a from "./fondue-components83.js";
+const m = t(({ children: r }, e) => /* @__PURE__ */ o("span", { className: a.decorator, ref: e, children: r }));
+m.displayName = "OrderableListItemDecorator";
 export {
-  f as ComboboxSingle
+  m as OrderableListItemDecorator
 };
 //# sourceMappingURL=fondue-components76.js.map

package/dist/fondue-components76.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components76.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-components76.js","sources":["../src/components/OrderableList/OrderableListItemDecorator.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ReactNode } from 'react';\n\nimport styles from './styles/orderable-list.module.scss';\n\nexport const OrderableListItemDecorator = forwardRef<HTMLSpanElement, { children: ReactNode }>(({ children }, ref) => {\n    return (\n        <span className={styles.decorator} ref={ref}>\n            {children}\n        </span>\n    );\n});\nOrderableListItemDecorator.displayName = 'OrderableListItemDecorator';\n"],"names":["OrderableListItemDecorator","forwardRef","children","ref","styles"],"mappings":";;;AAMO,MAAMA,IAA6BC,EAAqD,CAAC,EAAE,UAAAC,EAAA,GAAYC,wBAErG,QAAA,EAAK,WAAWC,EAAO,WAAW,KAAAD,GAC9B,UAAAD,GACL,CAEP;AACDF,EAA2B,cAAc;"}

package/dist/fondue-components77.js

@@ -1,23 +1,16 @@
-import { jsx as p } from "react/jsx-runtime";
+import { jsx as i } from "react/jsx-runtime";
+import { Slot as m } from "@radix-ui/react-slot";
 import { forwardRef as s } from "react";
-import { SelectBase as u } from "./fondue-components101.js";
-import { useMultiselect as a } from "./fondue-components99.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
-    }
-  );
-}, f = s(n);
-f.displayName = "Select.Multi";
+import { useOrderableItemContext as n } from "./fondue-components113.js";
+import p from "./fondue-components83.js";
+const a = s(
+  ({ children: e, asChild: r }, t) => {
+    const { itemId: o } = n();
+    return /* @__PURE__ */ i(r ? m : "span", { className: p.description, id: `orderable-item-${o}-description`, ref: t, children: e });
+  }
+);
+a.displayName = "OrderableListItemDescription";
 export {
-  f as SelectMultiple
+  a as OrderableListItemDescription
 };
 //# sourceMappingURL=fondue-components77.js.map

package/dist/fondue-components77.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components77.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-components77.js","sources":["../src/components/OrderableList/OrderableListItemDescription.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { useOrderableItemContext } from './hooks/useOrderedListItemContext';\nimport styles from './styles/orderable-list.module.scss';\n\nexport const OrderableListItemDescription = forwardRef<HTMLSpanElement, { children: ReactNode; asChild?: boolean }>(\n    ({ children, asChild }, ref) => {\n        const { itemId } = useOrderableItemContext();\n        const Component = asChild ? Slot : 'span';\n        return (\n            <Component className={styles.description} id={`orderable-item-${itemId}-description`} ref={ref}>\n                {children}\n            </Component>\n        );\n    },\n);\nOrderableListItemDescription.displayName = 'OrderableListItemDescription';\n"],"names":["OrderableListItemDescription","forwardRef","children","asChild","ref","itemId","useOrderableItemContext","jsx","Slot","styles"],"mappings":";;;;;AAQO,MAAMA,IAA+BC;AAAA,EACxC,CAAC,EAAE,UAAAC,GAAU,SAAAC,EAAA,GAAWC,MAAQ;AAC5B,UAAM,EAAE,QAAAC,EAAA,IAAWC,EAAA;AAEnB,WACI,gBAAAC,EAFcJ,IAAUK,IAAO,QAE9B,EAAU,WAAWC,EAAO,aAAa,IAAI,kBAAkBJ,CAAM,gBAAgB,KAAAD,GACjF,UAAAF,EAAA,CACL;AAAA,EAER;AACJ;AACAF,EAA6B,cAAc;"}

package/dist/fondue-components78.js

@@ -1,23 +1,31 @@
-import { jsx as n } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
-import { SelectBase as S } from "./fondue-components101.js";
-import { useSingleSelect as a } from "./fondue-components100.js";
-const p = ({ value: e, onSelect: t, defaultValue: l, ...o }, r) => {
-  const { selectedItemValues: m, selectItem: c, clear: s } = a(t, e, l);
+import { jsxs as n, jsx as l } from "react/jsx-runtime";
+import { IconGrabHandle as o } from "@frontify/fondue-icons";
+import { Slot as m } from "@radix-ui/react-slot";
+import { useOrderableItemContext as t } from "./fondue-components113.js";
+import r from "./fondue-components83.js";
+const s = () => {
+  const { itemId: e, dragHandleRef: a } = t();
   return /* @__PURE__ */ n(
-    S,
+    "button",
     {
-      ref: r,
-      multiple: !1,
-      selectedItemValues: m,
-      onItemSelect: c,
-      onClear: s,
-      ...o
+      type: "button",
+      "aria-labelledby": `orderable-handle-label-${e} orderable-item-${e}-title`,
+      className: `${r.handle} ${r.dragHandle}`,
+      ref: a,
+      children: [
+        /* @__PURE__ */ l("span", { id: `orderable-handle-label-${e}`, className: r.visuallyHidden, children: "Reorder" }),
+        /* @__PURE__ */ l(o, { size: 16 })
+      ]
     }
   );
-}, f = i(p);
-f.displayName = "Select";
+}, i = ({ children: e, asChild: a }) => {
+  const { dragHandleRef: d } = t();
+  return /* @__PURE__ */ l(a ? m : "div", { className: r.handle, ref: d, children: e });
+};
+s.displayName = "OrderableItemDragHandle";
+i.displayName = "OrderableItemCustomHandle";
 export {
-  f as SelectSingle
+  i as OrderableItemCustomHandle,
+  s as OrderableItemDragHandle
 };
 //# sourceMappingURL=fondue-components78.js.map

package/dist/fondue-components78.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components78.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-components78.js","sources":["../src/components/OrderableList/OrderableListItemDragHandle.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconGrabHandle } from '@frontify/fondue-icons';\nimport { Slot } from '@radix-ui/react-slot';\nimport { type ReactNode } from 'react';\n\nimport { useOrderableItemContext } from './hooks/useOrderedListItemContext';\nimport styles from './styles/orderable-list.module.scss';\n\nexport const OrderableItemDragHandle = () => {\n    const { itemId, dragHandleRef } = useOrderableItemContext();\n    return (\n        <button\n            type=\"button\"\n            aria-labelledby={`orderable-handle-label-${itemId} orderable-item-${itemId}-title`}\n            className={`${styles.handle} ${styles.dragHandle}`}\n            ref={dragHandleRef}\n        >\n            <span id={`orderable-handle-label-${itemId}`} className={styles.visuallyHidden}>\n                Reorder\n            </span>\n            <IconGrabHandle size={16} />\n        </button>\n    );\n};\n\nexport const OrderableItemCustomHandle = ({ children, asChild }: { children: ReactNode; asChild?: boolean }) => {\n    const { dragHandleRef } = useOrderableItemContext();\n    const Component = asChild ? Slot : 'div';\n    return (\n        <Component className={styles.handle} ref={dragHandleRef}>\n            {children}\n        </Component>\n    );\n};\nOrderableItemDragHandle.displayName = 'OrderableItemDragHandle';\nOrderableItemCustomHandle.displayName = 'OrderableItemCustomHandle';\n"],"names":["OrderableItemDragHandle","itemId","dragHandleRef","useOrderableItemContext","jsxs","styles","jsx","IconGrabHandle","OrderableItemCustomHandle","children","asChild","Slot"],"mappings":";;;;;AASO,MAAMA,IAA0B,MAAM;AACzC,QAAM,EAAE,QAAAC,GAAQ,eAAAC,EAAA,IAAkBC,EAAA;AAClC,SACI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,mBAAiB,0BAA0BH,CAAM,mBAAmBA,CAAM;AAAA,MAC1E,WAAW,GAAGI,EAAO,MAAM,IAAIA,EAAO,UAAU;AAAA,MAChD,KAAKH;AAAA,MAEL,UAAA;AAAA,QAAA,gBAAAI,EAAC,QAAA,EAAK,IAAI,0BAA0BL,CAAM,IAAI,WAAWI,EAAO,gBAAgB,UAAA,UAAA,CAEhF;AAAA,QACA,gBAAAC,EAACC,GAAA,EAAe,MAAM,GAAA,CAAI;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGtC,GAEaC,IAA4B,CAAC,EAAE,UAAAC,GAAU,SAAAC,QAA0D;AAC5G,QAAM,EAAE,eAAAR,EAAA,IAAkBC,EAAA;AAE1B,2BADkBO,IAAUC,IAAO,OAE9B,EAAU,WAAWN,EAAO,QAAQ,KAAKH,GACrC,UAAAO,GACL;AAER;AACAT,EAAwB,cAAc;AACtCQ,EAA0B,cAAc;"}

package/dist/fondue-components79.js

@@ -1,22 +1,16 @@
-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-components102.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 m } from "react/jsx-runtime";
+import { Slot as i } from "@radix-ui/react-slot";
+import { forwardRef as s } from "react";
+import { useOrderableItemContext as l } from "./fondue-components113.js";
+import a from "./fondue-components83.js";
+const n = s(
+  ({ children: t, asChild: e }, r) => {
+    const { itemId: o } = l();
+    return /* @__PURE__ */ m(e ? i : "span", { className: a.title, id: `orderable-item-${o}-title`, ref: r, children: t });
+  }
+);
+n.displayName = "OrderableListItemTitle";
 export {
-  I as ForwardedRefSelectItem,
-  N as ForwardedRefSelectItemGroup,
-  o as SelectItem,
-  s as SelectItemGroup
+  n as OrderableListItemTitle
 };
 //# sourceMappingURL=fondue-components79.js.map

package/dist/fondue-components79.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components79.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-components79.js","sources":["../src/components/OrderableList/OrderableListItemTitle.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { useOrderableItemContext } from './hooks/useOrderedListItemContext';\nimport styles from './styles/orderable-list.module.scss';\n\nexport const OrderableListItemTitle = forwardRef<HTMLSpanElement, { children: ReactNode; asChild?: boolean }>(\n    ({ children, asChild }, ref) => {\n        const { itemId } = useOrderableItemContext();\n        const Component = asChild ? Slot : 'span';\n        return (\n            <Component className={styles.title} id={`orderable-item-${itemId}-title`} ref={ref}>\n                {children}\n            </Component>\n        );\n    },\n);\nOrderableListItemTitle.displayName = 'OrderableListItemTitle';\n"],"names":["OrderableListItemTitle","forwardRef","children","asChild","ref","itemId","useOrderableItemContext","jsx","Slot","styles"],"mappings":";;;;;AAQO,MAAMA,IAAyBC;AAAA,EAClC,CAAC,EAAE,UAAAC,GAAU,SAAAC,EAAA,GAAWC,MAAQ;AAC5B,UAAM,EAAE,QAAAC,EAAA,IAAWC,EAAA;AAEnB,WACI,gBAAAC,EAFcJ,IAAUK,IAAO,QAE9B,EAAU,WAAWC,EAAO,OAAO,IAAI,kBAAkBJ,CAAM,UAAU,KAAAD,GACrE,UAAAF,EAAA,CACL;AAAA,EAER;AACJ;AACAF,EAAuB,cAAc;"}

package/dist/fondue-components8.js

@@ -1,11 +1,11 @@
 import { jsx as a } from "react/jsx-runtime";
 import { Slot as P } from "@radix-ui/react-slot";
 import { forwardRef as F, useState as y, useMemo as N, Children as I } from "react";
-import { ForwardedRefColorGradientInput as w } from "./fondue-components47.js";
-import { ForwardedRefColorPickerInput as h } from "./fondue-components48.js";
-import { ForwardedRefColorValueInput as G } from "./fondue-components49.js";
-import V from "./fondue-components50.js";
-import { DEFAULT_FORMAT as g, DEFAULT_COLOR as A, getColorWithName as s } from "./fondue-components51.js";
+import { ForwardedRefColorGradientInput as w } from "./fondue-components49.js";
+import { ForwardedRefColorPickerInput as h } from "./fondue-components50.js";
+import { ForwardedRefColorValueInput as G } from "./fondue-components51.js";
+import V from "./fondue-components52.js";
+import { DEFAULT_FORMAT as g, DEFAULT_COLOR as A, getColorWithName as s } from "./fondue-components53.js";
 const p = ({
   children: t,
   currentColor: r = A,

package/dist/fondue-components80.js

@@ -1,11 +1,8 @@
-import { jsx as l } from "react/jsx-runtime";
-import { forwardRef as d } from "react";
-import m from "./fondue-components102.js";
-const t = ({ children: e, name: o, "data-test-id": r = "fondue-select-slot", ...a }, s) => /* @__PURE__ */ l("div", { "data-test-id": r, ref: s, className: m.slot, "data-name": o, ...a, children: e });
-t.displayName = "Select.Slot";
-const S = d(t);
+const n = (t) => {
+  var e;
+  return ((e = document.getElementById(`orderable-item-${t}-title`)) == null ? void 0 : e.textContent) ?? t;
+};
 export {
-  S as ForwardedRefSelectSlot,
-  t as SelectSlot
+  n as getItemTitle
 };
 //# sourceMappingURL=fondue-components80.js.map

package/dist/fondue-components80.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components80.js","sources":["../src/components/Select/components/SelectSlot.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 SelectSlotProps = {\n    /**\n     * The children of the select slot. This can be a custom component.\n     */\n    children?: ReactNode;\n    /**\n     * The slot name that is used to determine the placement.\n     */\n    name: 'menu' | 'left' | 'right' | 'clear';\n    /**\n     * The data test id of the select slot.\n     */\n    'data-test-id'?: string;\n};\n\nexport const SelectSlot = (\n    { children, name, 'data-test-id': dataTestId = 'fondue-select-slot', ...props }: SelectSlotProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={forwardedRef} className={styles.slot} data-name={name} {...props}>\n            {children}\n        </div>\n    );\n};\nSelectSlot.displayName = 'Select.Slot';\n\nexport const ForwardedRefSelectSlot = forwardRef<HTMLDivElement, SelectSlotProps>(SelectSlot);\n"],"names":["SelectSlot","children","name","dataTestId","props","forwardedRef","jsx","styles","ForwardedRefSelectSlot","forwardRef"],"mappings":";;;AAqBO,MAAMA,IAAa,CACtB,EAAE,UAAAC,GAAU,MAAAC,GAAM,gBAAgBC,IAAa,sBAAsB,GAAGC,EAAA,GACxEC,MAGI,gBAAAC,EAAC,OAAA,EAAI,gBAAcH,GAAY,KAAKE,GAAc,WAAWE,EAAO,MAAM,aAAWL,GAAO,GAAGE,GAC1F,UAAAH,GACL;AAGRD,EAAW,cAAc;AAElB,MAAMQ,IAAyBC,EAA4CT,CAAU;"}
+{"version":3,"file":"fondue-components80.js","sources":["../src/components/OrderableList/helpers/getItemTitle.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nexport const getItemTitle = (itemId: string) =>\n    document.getElementById(`orderable-item-${itemId}-title`)?.textContent ?? itemId;\n"],"names":["getItemTitle","itemId","_a"],"mappings":"AAEO,MAAMA,IAAe,CAACC,MAAA;AAAtB,MAAAC;AACH,WAAAA,IAAA,SAAS,eAAe,kBAAkBD,CAAM,QAAQ,MAAxD,gBAAAC,EAA2D,gBAAeD;AAAA;"}

package/dist/fondue-components81.js

@@ -1,14 +1,16 @@
-const t = "_root_1x5sc_5", c = "_thumb_1x5sc_17", o = "_track_1x5sc_21", s = "_range_1x5sc_28", _ = {
-  root: t,
-  thumb: c,
-  track: o,
-  range: s
+import { createContext as r, useContext as a, useState as c, useCallback as u } from "react";
+const e = r(() => {
+});
+e.displayName = "OrderableListAnnounceContext";
+const d = e.Provider, l = () => a(e), m = () => {
+  const [t, n] = c(""), o = u((s) => {
+    n(""), requestAnimationFrame(() => n(s));
+  }, []);
+  return { message: t, announce: o };
 };
 export {
-  _ as default,
-  s as range,
-  t as root,
-  c as thumb,
-  o as track
+  d as OrderableListAnnounceProvider,
+  m as useAnnounceState,
+  l as useOrderableListAnnounce
 };
 //# sourceMappingURL=fondue-components81.js.map

package/dist/fondue-components81.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components81.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"fondue-components81.js","sources":["../src/components/OrderableList/hooks/useOrderableListAnnounce.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { createContext, useCallback, useContext, useState } from 'react';\n\ntype AnnounceFunction = (message: string) => void;\n\nconst OrderableListAnnounceContext = createContext<AnnounceFunction>(() => {});\nOrderableListAnnounceContext.displayName = 'OrderableListAnnounceContext';\n\nexport const OrderableListAnnounceProvider = OrderableListAnnounceContext.Provider;\n\nexport const useOrderableListAnnounce = (): AnnounceFunction => useContext(OrderableListAnnounceContext);\n\nexport const useAnnounceState = () => {\n    const [message, setMessage] = useState('');\n\n    const announce = useCallback((text: string) => {\n        // Clear first to ensure repeated identical messages are announced\n        setMessage('');\n        requestAnimationFrame(() => setMessage(text));\n    }, []);\n\n    return { message, announce };\n};\n"],"names":["OrderableListAnnounceContext","createContext","OrderableListAnnounceProvider","useOrderableListAnnounce","useContext","useAnnounceState","message","setMessage","useState","announce","useCallback","text"],"mappings":";AAMA,MAAMA,IAA+BC,EAAgC,MAAM;AAAC,CAAC;AAC7ED,EAA6B,cAAc;AAEpC,MAAME,IAAgCF,EAA6B,UAE7DG,IAA2B,MAAwBC,EAAWJ,CAA4B,GAE1FK,IAAmB,MAAM;AAClC,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAE,GAEnCC,IAAWC,EAAY,CAACC,MAAiB;AAE3C,IAAAJ,EAAW,EAAE,GACb,sBAAsB,MAAMA,EAAWI,CAAI,CAAC;AAAA,EAChD,GAAG,CAAA,CAAE;AAEL,SAAO,EAAE,SAAAL,GAAS,UAAAG,EAAA;AACtB;"}