@frontify/fondue-components 29.1.0 → 29.2.0

package/dist/fondue-components79.js

@@ -1,16 +1,47 @@
-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-components121.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 });
+import { jsx as f } from "react/jsx-runtime";
+import { useSortable as E } from "./fondue-components127.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-components128.js";
+import h from "./fondue-components88.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
+      }
+    ) });
   }
 );
-n.displayName = "OrderableListItemTitle";
+w.displayName = "OrderableListItemComponent";
 export {
-  n as OrderableListItemTitle
+  x as OrderableListItem,
+  w as OrderableListItemComponent
 };
 //# sourceMappingURL=fondue-components79.js.map

package/dist/fondue-components79.js.map

@@ -1 +1 @@
-{"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;"}
+{"version":3,"file":"fondue-components79.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-components8.js

@@ -1,54 +1,68 @@
-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-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,
-  onColorChange: i = () => {
-  },
-  currentFormat: l,
-  onFormatChange: c = () => {
-  },
-  defaultFormat: n = g,
-  "data-test-id": f = "color-picker-input",
-  ...C
-}, u) => {
-  const [d, k] = y(n), m = N(() => l ?? d, [l, d]);
-  return /* @__PURE__ */ a("div", { className: V.root, "data-picker-type": "custom-color", "data-test-id": f, ref: u, children: I.map(t, (R) => /* @__PURE__ */ a(
-    L,
-    {
-      ...C,
-      onColorChange: (o) => {
-        i(s(o, m));
-      },
-      currentColor: r,
-      currentFormat: m,
-      setCurrentFormat: (o) => {
-        k(o), c(o), i(s(r, o));
-      },
-      children: R
-    }
-  )) });
-};
-p.displayName = "ColorPicker";
-const L = ({ children: t, ...r }) => /* @__PURE__ */ a(P, { ...r, children: t }), M = F(p), e = {
-  Root: M,
-  Values: G,
-  Gradient: w,
-  Input: h
-};
-e.Root.displayName = "ColorPicker.Root";
-e.Values.displayName = "ColorPicker.Values";
-e.Gradient.displayName = "ColorPicker.Gradient";
-e.Input.displayName = "ColorPicker.Input";
+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-components53.js";
+const N = ({
+  className: n,
+  value: l,
+  onChange: o,
+  defaultValue: f,
+  size: m = "default",
+  emphasis: u = "default",
+  status: r = "default",
+  "data-test-id": k = "fondue-checkbox",
+  readOnly: a,
+  ...i
+}, h) => /* @__PURE__ */ c(
+  s.Root,
+  {
+    ref: h,
+    checked: l,
+    defaultChecked: f,
+    className: [t.root, n].filter(Boolean).join(" "),
+    "data-size": m,
+    "data-emphasis": u,
+    "data-readonly": a,
+    "data-status": r,
+    onClick: (e) => {
+      if (a)
+        return e.preventDefault(), !1;
+      o == null || o(e);
+    },
+    onFocus: (e) => {
+      var d;
+      if (a)
+        return e.preventDefault(), e.target.blur(), !1;
+      (d = i.onFocus) == null || d.call(i, e);
+    },
+    "data-test-id": k,
+    "aria-readonly": a,
+    "aria-invalid": r === "error",
+    ...i,
+    children: /* @__PURE__ */ x(s.Indicator, { className: t.indicator, children: [
+      /* @__PURE__ */ c(
+        b,
+        {
+          size: 16,
+          className: [t.icon, t.iconIndeterminate].filter(Boolean).join(" "),
+          "data-test-id": "icon-indeterminate"
+        }
+      ),
+      /* @__PURE__ */ c(
+        j,
+        {
+          size: 16,
+          className: [t.icon, t.iconChecked].filter(Boolean).join(" "),
+          "data-test-id": "icon-checked"
+        }
+      )
+    ] })
+  }
+), I = C(N);
+I.displayName = "Checkbox";
 export {
-  e as ColorPicker,
-  p as ColorPickerRoot,
-  M as ForwardedRefColorPicker
+  I as Checkbox,
+  N as CheckboxComponent
 };
 //# sourceMappingURL=fondue-components8.js.map

package/dist/fondue-components8.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components8.js","sources":["../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { Children, forwardRef, useMemo, useState, type ForwardedRef, type ReactNode } from 'react';\n\nimport { ForwardedRefColorGradientInput } from './ColorGradientInput';\nimport { ForwardedRefColorPickerInput } from './ColorPickerInput';\nimport { ForwardedRefColorValueInput } from './ColorValueInput';\nimport styles from './styles/customColorPicker.module.scss';\nimport { type ColorFormat, type RgbaColor } from './types';\nimport { DEFAULT_COLOR, DEFAULT_FORMAT, getColorWithName } from './utils';\n\ntype ColorPickerProps = {\n    /**\n     * The children of the color picker component. This can contain multiple `ColorPicker.Values` or `ColorPicker.Gradient` components.\n     */\n    children?: ReactNode;\n    /**\n     * The active color in the color picker\n     */\n    currentColor?: RgbaColor;\n    /**\n     * Event handler called when the color changes\n     */\n    onColorChange?: (color: RgbaColor) => void;\n    /**\n     * The active color format in the color picker\n     */\n    currentFormat?: ColorFormat;\n    /**\n     * Event handler called when the color format changes\n     */\n    onFormatChange?: (format: ColorFormat) => void;\n    /**\n     * The default format to use for the color input when not controlled externally\n     * @default \"HEX\"\n     */\n    defaultFormat?: ColorFormat;\n    /**\n     * The test id of the color picker\n     */\n    'data-test-id'?: string;\n};\n\nexport const ColorPickerRoot = (\n    {\n        children,\n        currentColor = DEFAULT_COLOR,\n        onColorChange = () => {},\n        currentFormat,\n        onFormatChange = () => {},\n        defaultFormat = DEFAULT_FORMAT,\n        'data-test-id': dataTestId = 'color-picker-input',\n        ...props\n    }: ColorPickerProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const [managedFormat, setManagedFormat] = useState<ColorFormat>(defaultFormat);\n    const activeFormat = useMemo(() => currentFormat ?? managedFormat, [currentFormat, managedFormat]);\n\n    return (\n        <div className={styles.root} data-picker-type=\"custom-color\" data-test-id={dataTestId} ref={forwardedRef}>\n            {Children.map(children, (child) => (\n                <ColorPickerSlot\n                    {...props}\n                    onColorChange={(color: RgbaColor) => {\n                        onColorChange(getColorWithName(color, activeFormat));\n                    }}\n                    currentColor={currentColor}\n                    currentFormat={activeFormat}\n                    setCurrentFormat={(currentFormat: ColorFormat) => {\n                        setManagedFormat(currentFormat);\n                        onFormatChange(currentFormat);\n                        onColorChange(getColorWithName(currentColor, currentFormat));\n                    }}\n                >\n                    {child}\n                </ColorPickerSlot>\n            ))}\n        </div>\n    );\n};\nColorPickerRoot.displayName = 'ColorPicker';\n\ntype ColorPickerSlotProps = ColorPickerProps & {\n    currentFormat?: ColorFormat;\n    setCurrentFormat?: (format: ColorFormat) => void;\n};\nconst ColorPickerSlot = ({ children, ...props }: ColorPickerSlotProps) => <RadixSlot {...props}>{children}</RadixSlot>;\n\nexport const ForwardedRefColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(ColorPickerRoot);\n\nexport const ColorPicker = {\n    Root: ForwardedRefColorPicker,\n    Values: ForwardedRefColorValueInput,\n    Gradient: ForwardedRefColorGradientInput,\n    Input: ForwardedRefColorPickerInput,\n};\n\nColorPicker.Root.displayName = 'ColorPicker.Root';\nColorPicker.Values.displayName = 'ColorPicker.Values';\nColorPicker.Gradient.displayName = 'ColorPicker.Gradient';\nColorPicker.Input.displayName = 'ColorPicker.Input';\n"],"names":["ColorPickerRoot","children","currentColor","DEFAULT_COLOR","onColorChange","currentFormat","onFormatChange","defaultFormat","DEFAULT_FORMAT","dataTestId","props","forwardedRef","managedFormat","setManagedFormat","useState","activeFormat","useMemo","jsx","styles","Children","child","ColorPickerSlot","color","getColorWithName","RadixSlot","ForwardedRefColorPicker","forwardRef","ColorPicker","ForwardedRefColorValueInput","ForwardedRefColorGradientInput","ForwardedRefColorPickerInput"],"mappings":";;;;;;;;AA4CO,MAAMA,IAAkB,CAC3B;AAAA,EACI,UAAAC;AAAA,EACA,cAAAC,IAAeC;AAAA,EACf,eAAAC,IAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,eAAAC;AAAA,EACA,gBAAAC,IAAiB,MAAM;AAAA,EAAC;AAAA,EACxB,eAAAC,IAAgBC;AAAA,EAChB,gBAAgBC,IAAa;AAAA,EAC7B,GAAGC;AACP,GACAC,MACC;AACD,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAsBP,CAAa,GACvEQ,IAAeC,EAAQ,MAAMX,KAAiBO,GAAe,CAACP,GAAeO,CAAa,CAAC;AAEjG,SACI,gBAAAK,EAAC,OAAA,EAAI,WAAWC,EAAO,MAAM,oBAAiB,gBAAe,gBAAcT,GAAY,KAAKE,GACvF,UAAAQ,EAAS,IAAIlB,GAAU,CAACmB,MACrB,gBAAAH;AAAA,IAACI;AAAA,IAAA;AAAA,MACI,GAAGX;AAAA,MACJ,eAAe,CAACY,MAAqB;AACjC,QAAAlB,EAAcmB,EAAiBD,GAAOP,CAAY,CAAC;AAAA,MACvD;AAAA,MACA,cAAAb;AAAA,MACA,eAAea;AAAA,MACf,kBAAkB,CAACV,MAA+B;AAC9C,QAAAQ,EAAiBR,CAAa,GAC9BC,EAAeD,CAAa,GAC5BD,EAAcmB,EAAiBrB,GAAcG,CAAa,CAAC;AAAA,MAC/D;AAAA,MAEC,UAAAe;AAAA,IAAA;AAAA,EAAA,CAER,GACL;AAER;AACApB,EAAgB,cAAc;AAM9B,MAAMqB,IAAkB,CAAC,EAAE,UAAApB,GAAU,GAAGS,EAAA,MAAkC,gBAAAO,EAACO,GAAA,EAAW,GAAGd,GAAQ,UAAAT,GAAS,GAE7FwB,IAA0BC,EAA6C1B,CAAe,GAEtF2B,IAAc;AAAA,EACvB,MAAMF;AAAA,EACN,QAAQG;AAAA,EACR,UAAUC;AAAA,EACV,OAAOC;AACX;AAEAH,EAAY,KAAK,cAAc;AAC/BA,EAAY,OAAO,cAAc;AACjCA,EAAY,SAAS,cAAc;AACnCA,EAAY,MAAM,cAAc;"}
+{"version":3,"file":"fondue-components8.js","sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconMinus } from '@frontify/fondue-icons';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { forwardRef, type FormEvent, type ForwardedRef } from 'react';\n\nimport styles from './styles/checkbox.module.scss';\n\nexport type CheckboxProps = {\n    id?: string;\n    name?: string;\n    /**\n     * The default value of the checkbox\n     * Used for uncontrolled components\n     * @default false\n     */\n    defaultValue?: boolean | 'indeterminate';\n    /**\n     * The controlled value of the checkbox\n     * @default false\n     */\n    value?: boolean | 'indeterminate';\n    /**\n     * The size of the checkbox\n     * @default \"default\"\n     */\n    size?: 'default' | 'large';\n    /**\n     * The emphasis of the checkbox\n     * @default \"default\"\n     */\n    emphasis?: 'default' | 'weak';\n    /**\n     * Disable the checkbox\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Make the checkbox required in form\n     * @default false\n     */\n    required?: boolean;\n    /**\n     * Make the checkbox read-only\n     * @default false\n     */\n    readOnly?: boolean;\n    /**\n     * Status of the checkbox\n     * @default \"default\"\n     */\n    status?: 'default' | 'error';\n    className?: string;\n    /**\n     * Event handler called when the checkbox value changes\n     */\n    onChange?: (event: FormEvent<HTMLButtonElement>) => void;\n    /**\n     * Event handler called when the checkbox is blurred\n     */\n    onBlur?: (event: FormEvent<HTMLButtonElement>) => void;\n    /**\n     * Event handler called when the checkbox is focused\n     */\n    onFocus?: (event: FormEvent<HTMLButtonElement>) => void;\n    'data-test-id'?: string;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    'aria-describedby'?: string;\n};\n\nexport const CheckboxComponent = (\n    {\n        className,\n        value,\n        onChange,\n        defaultValue,\n        size = 'default',\n        emphasis = 'default',\n        status = 'default',\n        'data-test-id': dataTestId = 'fondue-checkbox',\n        readOnly,\n        ...props\n    }: CheckboxProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <CheckboxPrimitive.Root\n            ref={ref}\n            checked={value}\n            defaultChecked={defaultValue}\n            className={[styles.root, className].filter(Boolean).join(' ')}\n            data-size={size}\n            data-emphasis={emphasis}\n            data-readonly={readOnly}\n            data-status={status}\n            onClick={(event) => {\n                if (readOnly) {\n                    event.preventDefault();\n                    return false;\n                }\n                onChange?.(event);\n            }}\n            onFocus={(event) => {\n                if (readOnly) {\n                    event.preventDefault();\n                    event.target.blur();\n                    return false;\n                }\n                props.onFocus?.(event);\n            }}\n            data-test-id={dataTestId}\n            aria-readonly={readOnly}\n            aria-invalid={status === 'error'}\n            {...props}\n        >\n            <CheckboxPrimitive.Indicator className={styles.indicator}>\n                <IconMinus\n                    size={16}\n                    className={[styles.icon, styles.iconIndeterminate].filter(Boolean).join(' ')}\n                    data-test-id=\"icon-indeterminate\"\n                />\n\n                <IconCheckMark\n                    size={16}\n                    className={[styles.icon, styles.iconChecked].filter(Boolean).join(' ')}\n                    data-test-id=\"icon-checked\"\n                />\n            </CheckboxPrimitive.Indicator>\n        </CheckboxPrimitive.Root>\n    );\n};\n\nexport const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(CheckboxComponent);\nCheckbox.displayName = 'Checkbox';\n"],"names":["CheckboxComponent","className","value","onChange","defaultValue","size","emphasis","status","dataTestId","readOnly","props","ref","jsx","CheckboxPrimitive","styles","event","_a","IconMinus","IconCheckMark","Checkbox","forwardRef"],"mappings":";;;;;AAuEO,MAAMA,IAAoB,CAC7B;AAAA,EACI,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,QAAAC,IAAS;AAAA,EACT,gBAAgBC,IAAa;AAAA,EAC7B,UAAAC;AAAA,EACA,GAAGC;AACP,GACAC,MAGI,gBAAAC;AAAA,EAACC,EAAkB;AAAA,EAAlB;AAAA,IACG,KAAAF;AAAA,IACA,SAAST;AAAA,IACT,gBAAgBE;AAAA,IAChB,WAAW,CAACU,EAAO,MAAMb,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,IAC5D,aAAWI;AAAA,IACX,iBAAeC;AAAA,IACf,iBAAeG;AAAA,IACf,eAAaF;AAAA,IACb,SAAS,CAACQ,MAAU;AAChB,UAAIN;AACA,eAAAM,EAAM,eAAA,GACC;AAEX,MAAAZ,KAAA,QAAAA,EAAWY;AAAA,IACf;AAAA,IACA,SAAS,CAACA,MAAU;;AAChB,UAAIN;AACA,eAAAM,EAAM,eAAA,GACNA,EAAM,OAAO,KAAA,GACN;AAEX,OAAAC,IAAAN,EAAM,YAAN,QAAAM,EAAA,KAAAN,GAAgBK;AAAA,IACpB;AAAA,IACA,gBAAcP;AAAA,IACd,iBAAeC;AAAA,IACf,gBAAcF,MAAW;AAAA,IACxB,GAAGG;AAAA,IAEJ,4BAACG,EAAkB,WAAlB,EAA4B,WAAWC,EAAO,WAC3C,UAAA;AAAA,MAAA,gBAAAF;AAAA,QAACK;AAAA,QAAA;AAAA,UACG,MAAM;AAAA,UACN,WAAW,CAACH,EAAO,MAAMA,EAAO,iBAAiB,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,UAC3E,gBAAa;AAAA,QAAA;AAAA,MAAA;AAAA,MAGjB,gBAAAF;AAAA,QAACM;AAAA,QAAA;AAAA,UACG,MAAM;AAAA,UACN,WAAW,CAACJ,EAAO,MAAMA,EAAO,WAAW,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,UACrE,gBAAa;AAAA,QAAA;AAAA,MAAA;AAAA,IACjB,EAAA,CACJ;AAAA,EAAA;AAAA,GAKCK,IAAWC,EAA6CpB,CAAiB;AACtFmB,EAAS,cAAc;"}

package/dist/fondue-components80.js

@@ -1,8 +1,9 @@
-const n = (t) => {
-  var e;
-  return ((e = document.getElementById(`orderable-item-${t}-title`)) == null ? void 0 : e.textContent) ?? t;
-};
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as o } from "react";
+import i from "./fondue-components88.js";
+const m = o(({ children: r }, t) => /* @__PURE__ */ e("div", { className: i.action, ref: t, children: r }));
+m.displayName = "OrderableListItemAction";
 export {
-  n as getItemTitle
+  m as OrderableListItemAction
 };
 //# sourceMappingURL=fondue-components80.js.map

package/dist/fondue-components80.js.map

@@ -1 +1 @@
-{"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;"}
+{"version":3,"file":"fondue-components80.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-components81.js

@@ -1,16 +1,9 @@
-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 };
-};
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+import a from "./fondue-components88.js";
+const m = t(({ children: r }, e) => /* @__PURE__ */ o("span", { className: a.decorator, ref: e, children: r }));
+m.displayName = "OrderableListItemDecorator";
 export {
-  d as OrderableListAnnounceProvider,
-  m as useAnnounceState,
-  l as useOrderableListAnnounce
+  m as OrderableListItemDecorator
 };
 //# sourceMappingURL=fondue-components81.js.map

package/dist/fondue-components81.js.map

@@ -1 +1 @@
-{"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;"}
+{"version":3,"file":"fondue-components81.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-components82.js

@@ -1,51 +1,16 @@
-import { jsxs as I, jsx as l } from "react/jsx-runtime";
-import { useMemo as f, Children as d, isValidElement as i } from "react";
-import { OrderableListItemComponent as y, OrderableListItem as b } from "./fondue-components74.js";
-import { OrderableListItemAction as g } from "./fondue-components75.js";
-import { OrderableListItemContent as C } from "./fondue-components122.js";
-import { OrderableItemDragHandle as c, OrderableItemCustomHandle as O } from "./fondue-components78.js";
-import H from "./fondue-components83.js";
-const L = (n) => {
-  let s = !1, r = !1;
-  const o = [], e = [];
-  return d.forEach(n, (t) => {
-    i(t) && t.type === g ? o.push(t) : i(t) && t.type === c ? s = !0 : (i(t) && t.type === O && (r = !0), e.push(t));
-  }), { hasDragHandle: s, hasCustomHandle: r, actions: o, content: e };
-}, E = (n) => {
-  const s = {};
-  return d.forEach(n, (r) => {
-    if (i(r) && r.type === b) {
-      const o = r, { actions: e, content: t, hasDragHandle: m, hasCustomHandle: p } = L(
-        o.props.children
-      ), a = o.props.id;
-      s[a] = {
-        ...o.props,
-        id: a,
-        ref: o.ref,
-        actions: e,
-        children: t,
-        hasDragHandle: m,
-        hasCustomHandle: p
-      };
-    }
-  }), s;
-}, A = (n, s) => {
-  const r = f(() => {
-    const e = E(n);
-    if (Object.keys(e).length !== s.length)
-      throw new Error("The number of items in the list does not match the order array");
-    return e;
-  }, [n, s]);
-  return f(
-    () => s.map((e) => r[e]).filter((e) => e !== void 0),
-    [s, r]
-  ).map(({ id: e, children: t, actions: m, hasDragHandle: p, hasCustomHandle: a, ...h }, u) => /* @__PURE__ */ I(y, { index: u, id: e, ...h, children: [
-    /* @__PURE__ */ l(C, { children: t }),
-    m.length > 0 && /* @__PURE__ */ l("div", { className: H.actions, children: m }),
-    p && !a && /* @__PURE__ */ l(c, {})
-  ] }, e));
-};
+import { jsx as i } from "react/jsx-runtime";
+import { Slot as m } from "@radix-ui/react-slot";
+import { forwardRef as s } from "react";
+import { useOrderableItemContext as n } from "./fondue-components128.js";
+import p from "./fondue-components88.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 {
-  A as useOrderedListItems
+  a as OrderableListItemDescription
 };
 //# sourceMappingURL=fondue-components82.js.map

package/dist/fondue-components82.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components82.js","sources":["../src/components/OrderableList/hooks/useOrderedListItems.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Children, isValidElement, useMemo, type ReactElement, type ReactNode, type RefObject } from 'react';\n\nimport { OrderableListItem, OrderableListItemComponent, type OrderableListItemProps } from '../OrderableListItem';\nimport { OrderableListItemAction, type OrderableListItemActionProps } from '../OrderableListItemAction';\nimport { OrderableListItemContent } from '../OrderableListItemContent';\nimport { OrderableItemCustomHandle, OrderableItemDragHandle } from '../OrderableListItemDragHandle';\nimport styles from '../styles/orderable-list.module.scss';\n\nconst getItemContentByType = (\n    children: ReactNode,\n): {\n    actions: ReactNode[];\n    content: ReactNode[];\n    hasDragHandle: boolean;\n    hasCustomHandle: boolean;\n} => {\n    let hasDragHandle = false;\n    let hasCustomHandle = false;\n    const actions: ReactNode[] = [];\n    const content: ReactNode[] = [];\n    Children.forEach(children, (child) => {\n        if (isValidElement<OrderableListItemActionProps>(child) && child.type === OrderableListItemAction) {\n            actions.push(child);\n        } else if (isValidElement(child) && child.type === OrderableItemDragHandle) {\n            hasDragHandle = true;\n        } else if (isValidElement(child) && child.type === OrderableItemCustomHandle) {\n            hasCustomHandle = true;\n            content.push(child);\n        } else {\n            content.push(child);\n        }\n    });\n    return { hasDragHandle, hasCustomHandle, actions, content };\n};\n\ntype OrderableListItemElement = ReactElement<OrderableListItemProps> & {\n    ref: RefObject<HTMLLIElement> | null;\n};\ntype ListItems = Record<string, ListItem>;\ntype ListItem = {\n    id: string;\n    ref: RefObject<HTMLLIElement> | null;\n    children: ReactNode;\n    actions: ReactNode[];\n    hasDragHandle: boolean;\n    hasCustomHandle: boolean;\n};\n\nconst getListItems = (children: ReactNode): ListItems => {\n    const items: ListItems = {};\n    Children.forEach(children, (child) => {\n        if (isValidElement<OrderableListItemProps>(child) && child.type === OrderableListItem) {\n            const typedChild = child as OrderableListItemElement;\n            const { actions, content, hasDragHandle, hasCustomHandle } = getItemContentByType(\n                typedChild.props.children,\n            );\n            const itemId = typedChild.props.id;\n            items[itemId] = {\n                ...typedChild.props,\n                id: itemId,\n                ref: typedChild.ref,\n                actions,\n                children: content,\n                hasDragHandle,\n                hasCustomHandle,\n            };\n        }\n    });\n    return items;\n};\n\nexport const useOrderedListItems = (children: ReactNode, order: string[]): ReactNode => {\n    const itemsWithIds = useMemo(() => {\n        const items = getListItems(children);\n        if (Object.keys(items).length !== order.length) {\n            throw new Error('The number of items in the list does not match the order array');\n        }\n        return items;\n    }, [children, order]);\n\n    const sortedItems = useMemo(\n        () => order.map((id) => itemsWithIds[id]).filter((item) => item !== undefined),\n        [order, itemsWithIds],\n    );\n\n    return sortedItems.map(({ id, children, actions, hasDragHandle, hasCustomHandle, ...props }, index) => (\n        <OrderableListItemComponent key={id} index={index} id={id} {...props}>\n            <OrderableListItemContent>{children}</OrderableListItemContent>\n            {actions.length > 0 && <div className={styles.actions}>{actions}</div>}\n            {hasDragHandle && !hasCustomHandle && <OrderableItemDragHandle />}\n        </OrderableListItemComponent>\n    ));\n};\n"],"names":["getItemContentByType","children","hasDragHandle","hasCustomHandle","actions","content","Children","child","isValidElement","OrderableListItemAction","OrderableItemDragHandle","OrderableItemCustomHandle","getListItems","items","OrderableListItem","typedChild","itemId","useOrderedListItems","order","itemsWithIds","useMemo","id","item","props","index","jsxs","OrderableListItemComponent","jsx","OrderableListItemContent","styles"],"mappings":";;;;;;;AAUA,MAAMA,IAAuB,CACzBC,MAMC;AACD,MAAIC,IAAgB,IAChBC,IAAkB;AACtB,QAAMC,IAAuB,CAAA,GACvBC,IAAuB,CAAA;AAC7B,SAAAC,EAAS,QAAQL,GAAU,CAACM,MAAU;AAClC,IAAIC,EAA6CD,CAAK,KAAKA,EAAM,SAASE,IACtEL,EAAQ,KAAKG,CAAK,IACXC,EAAeD,CAAK,KAAKA,EAAM,SAASG,IAC/CR,IAAgB,MACTM,EAAeD,CAAK,KAAKA,EAAM,SAASI,MAC/CR,IAAkB,KAClBE,EAAQ,KAAKE,CAAK;AAAA,EAI1B,CAAC,GACM,EAAE,eAAAL,GAAe,iBAAAC,GAAiB,SAAAC,GAAS,SAAAC,EAAA;AACtD,GAeMO,IAAe,CAACX,MAAmC;AACrD,QAAMY,IAAmB,CAAA;AACzB,SAAAP,EAAS,QAAQL,GAAU,CAACM,MAAU;AAClC,QAAIC,EAAuCD,CAAK,KAAKA,EAAM,SAASO,GAAmB;AACnF,YAAMC,IAAaR,GACb,EAAE,SAAAH,GAAS,SAAAC,GAAS,eAAAH,GAAe,iBAAAC,MAAoBH;AAAA,QACzDe,EAAW,MAAM;AAAA,MAAA,GAEfC,IAASD,EAAW,MAAM;AAChC,MAAAF,EAAMG,CAAM,IAAI;AAAA,QACZ,GAAGD,EAAW;AAAA,QACd,IAAIC;AAAA,QACJ,KAAKD,EAAW;AAAA,QAChB,SAAAX;AAAA,QACA,UAAUC;AAAA,QACV,eAAAH;AAAA,QACA,iBAAAC;AAAA,MAAA;AAAA,IAER;AAAA,EACJ,CAAC,GACMU;AACX,GAEaI,IAAsB,CAAChB,GAAqBiB,MAA+B;AACpF,QAAMC,IAAeC,EAAQ,MAAM;AAC/B,UAAMP,IAAQD,EAAaX,CAAQ;AACnC,QAAI,OAAO,KAAKY,CAAK,EAAE,WAAWK,EAAM;AACpC,YAAM,IAAI,MAAM,gEAAgE;AAEpF,WAAOL;AAAA,EACX,GAAG,CAACZ,GAAUiB,CAAK,CAAC;AAOpB,SALoBE;AAAA,IAChB,MAAMF,EAAM,IAAI,CAACG,MAAOF,EAAaE,CAAE,CAAC,EAAE,OAAO,CAACC,MAASA,MAAS,MAAS;AAAA,IAC7E,CAACJ,GAAOC,CAAY;AAAA,EAAA,EAGL,IAAI,CAAC,EAAE,IAAAE,GAAI,UAAApB,GAAU,SAAAG,GAAS,eAAAF,GAAe,iBAAAC,GAAiB,GAAGoB,KAASC,MACzF,gBAAAC,EAACC,KAAoC,OAAAF,GAAc,IAAAH,GAAS,GAAGE,GAC3D,UAAA;AAAA,IAAA,gBAAAI,EAACC,GAAA,EAA0B,UAAA3B,EAAAA,CAAS;AAAA,IACnCG,EAAQ,SAAS,KAAK,gBAAAuB,EAAC,SAAI,WAAWE,EAAO,SAAU,UAAAzB,EAAA,CAAQ;AAAA,IAC/DF,KAAiB,CAACC,KAAmB,gBAAAwB,EAACjB,GAAA,CAAA,CAAwB;AAAA,EAAA,EAAA,GAHlCW,CAIjC,CACH;AACL;"}
+{"version":3,"file":"fondue-components82.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-components83.js

@@ -1,26 +1,31 @@
-const t = "_root_1lkrw_5", o = "_item_1lkrw_22", n = "_content_1lkrw_44", _ = "_actions_1lkrw_45", e = "_handle_1lkrw_52", l = "_decorator_1lkrw_88", r = "_title_1lkrw_88", c = "_description_1lkrw_88", s = "_dragHandle_1lkrw_137", d = "_visuallyHidden_1lkrw_162", i = {
-  root: t,
-  item: o,
-  content: n,
-  actions: _,
-  handle: e,
-  decorator: l,
-  title: r,
-  description: c,
-  dragHandle: s,
-  visuallyHidden: d
+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-components128.js";
+import r from "./fondue-components88.js";
+const s = () => {
+  const { itemId: e, dragHandleRef: a } = t();
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      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 })
+      ]
+    }
+  );
+}, 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 {
-  _ as actions,
-  n as content,
-  l as decorator,
-  i as default,
-  c as description,
-  s as dragHandle,
-  e as handle,
-  o as item,
-  t as root,
-  r as title,
-  d as visuallyHidden
+  i as OrderableItemCustomHandle,
+  s as OrderableItemDragHandle
 };
 //# sourceMappingURL=fondue-components83.js.map

package/dist/fondue-components83.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components83.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"fondue-components83.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;"}