@frontify/fondue-components 28.0.0 → 29.0.1

package/dist/fondue-components112.js

@@ -1,74 +1,130 @@
-import { jsx as E } from "react/jsx-runtime";
-import { useState as S, useMemo as b, Children as V, isValidElement as C, cloneElement as w, useCallback as B, useEffect as x } from "react";
-import { SelectClear as F } from "./fondue-components122.js";
-import { ForwardedRefSelectItem as L } from "./fondue-components79.js";
-import { ForwardedRefSelectSlot as y } from "./fondue-components80.js";
-import { getSelectOptionValue as I } from "./fondue-components123.js";
-const d = (n, s) => {
-  const [e, r] = S(!1), [m, i] = S(null), [l, f] = S({
-    menuComponents: [],
-    items: []
-  });
-  return x(() => {
-    i(null), s || f({
-      menuComponents: [],
-      items: []
-    }), s && (r(!0), s(n).then((u) => {
-      f({
-        menuComponents: u.map((o) => /* @__PURE__ */ E(L, { label: o.label, value: o.value, children: o.content ? o.content : o.label }, o.value)),
-        items: u.map((o) => ({ value: o.value, label: o.label, children: o.content }))
-      }), r(!1);
-    }).catch((u) => {
-      i(u), r(!1);
-    }));
-  }, [n, s]), { isLoading: e, error: m, menuComponents: l.menuComponents, items: l.items };
-}, g = (n) => {
-  const s = [];
-  return V.forEach(n, (e) => {
-    if (C(e) && e.type === L)
-      s.push(I(e.props));
-    else if (C(e) && e.props.children) {
-      const r = g(e.props.children);
-      for (const m of r)
-        s.push(m);
-    }
-  }), s;
-}, q = (n, s) => {
-  const [e, r] = S(""), { inputSlots: m, menuSlots: i, itemValues: l, clearButton: f } = b(() => {
-    const a = [], p = [];
-    let v;
-    V.toArray(n).some(
-      (t) => C(t) && t.type === y
-    ) ? V.forEach(n, (t) => {
-      C(t) && t.type === y && (t.props.name === "menu" ? p.push(t.props.children) : t.props.name === "left" || t.props.name === "right" ? a.push(t) : t.props.name === "clear" && (t.props.children ? v = t : v = w(t, { children: /* @__PURE__ */ E(F, {}) })));
-    }) : p.push(n);
-    const R = g(p);
-    return { inputSlots: a, menuSlots: p, itemValues: R, clearButton: v };
-  }, [n]), u = b(
-    () => l.filter(
-      (a) => e === "" || a.label.toLowerCase().includes(e.toLowerCase())
+import { useCallback as c } from "react";
+import { deepEqual as f } from "./fondue-components139.js";
+import { defaultSortableTransition as x, Sortable as R } from "./fondue-components84.js";
+import { isSortable as rr } from "./fondue-components84.js";
+import { useInstance as T } from "@dnd-kit/react";
+import { useDeepSignal as V, useOnValueChange as i, useIsomorphicLayoutEffect as k, useOnElementChange as m, useImmediateEffect as q } from "./fondue-components140.js";
+import { currentValue as v } from "./fondue-components141.js";
+import { batch as L } from "./fondue-components142.js";
+var N = Object.defineProperty, U = Object.defineProperties, z = Object.getOwnPropertyDescriptors, I = Object.getOwnPropertySymbols, A = Object.prototype.hasOwnProperty, B = Object.prototype.propertyIsEnumerable, j = (o, t, a) => t in o ? N(o, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : o[t] = a, _ = (o, t) => {
+  for (var a in t || (t = {}))
+    A.call(t, a) && j(o, a, t[a]);
+  if (I)
+    for (var a of I(t))
+      B.call(t, a) && j(o, a, t[a]);
+  return o;
+}, F = (o, t) => U(o, z(t));
+function Y(o) {
+  const {
+    accept: t,
+    collisionDetector: a,
+    collisionPriority: b,
+    id: O,
+    data: p,
+    element: h,
+    handle: y,
+    index: g,
+    group: D,
+    disabled: P,
+    feedback: d,
+    modifiers: S,
+    sensors: w,
+    target: C,
+    type: E
+  } = o, l = _(_({}, x), o.transition), r = T((e) => new R(
+    F(_({}, o), {
+      transition: l,
+      register: !1,
+      handle: v(y),
+      element: v(h),
+      target: v(C),
+      feedback: d
+    }),
+    e
+  )), u = V(r, G);
+  return i(O, () => r.id = O), k(() => {
+    L(() => {
+      r.group = D, r.index = g;
+    });
+  }, [r, D, g]), i(E, () => r.type = E), i(
+    t,
+    () => r.accept = t,
+    void 0,
+    f
+  ), i(p, () => p && (r.data = p)), i(
+    g,
+    () => {
+      var e;
+      (e = r.manager) != null && e.dragOperation.status.idle && (l != null && l.idle) && r.refreshShape();
+    },
+    q
+  ), m(y, (e) => r.handle = e), m(h, (e) => r.element = e), m(C, (e) => r.target = e), i(P, () => r.disabled = P === !0), i(w, () => r.sensors = w), i(
+    a,
+    () => r.collisionDetector = a
+  ), i(
+    b,
+    () => r.collisionPriority = b
+  ), i(d, () => r.feedback = d ?? "default"), i(
+    l,
+    () => r.transition = l,
+    void 0,
+    f
+  ), i(
+    S,
+    () => r.modifiers = S,
+    void 0,
+    f
+  ), i(
+    o.alignment,
+    () => r.alignment = o.alignment
+  ), {
+    sortable: u,
+    get isDragging() {
+      return u.isDragging;
+    },
+    get isDropping() {
+      return u.isDropping;
+    },
+    get isDragSource() {
+      return u.isDragSource;
+    },
+    get isDropTarget() {
+      return u.isDropTarget;
+    },
+    handleRef: c(
+      (e) => {
+        r.handle = e ?? void 0;
+      },
+      [r]
     ),
-    [l, e]
-  ), o = B(
-    (a) => a !== void 0 ? l.find((p) => p.value === a) : void 0,
-    [l]
-  ), c = d(e, s);
-  return {
-    items: [...u, ...c.items],
-    menuSlots: [...i, ...c.menuComponents],
-    filterText: e,
-    inputSlots: m,
-    clearButton: f,
-    setFilterText: r,
-    getItemByValue: o,
-    asyncItemStatus: {
-      isLoading: c.isLoading,
-      error: c.error
-    }
+    ref: c(
+      (e) => {
+        var n, s;
+        !e && ((n = r.element) != null && n.isConnected) && !((s = r.manager) != null && s.dragOperation.status.idle) || (r.element = e ?? void 0);
+      },
+      [r]
+    ),
+    sourceRef: c(
+      (e) => {
+        var n, s;
+        !e && ((n = r.source) != null && n.isConnected) && !((s = r.manager) != null && s.dragOperation.status.idle) || (r.source = e ?? void 0);
+      },
+      [r]
+    ),
+    targetRef: c(
+      (e) => {
+        var n, s;
+        !e && ((n = r.target) != null && n.isConnected) && !((s = r.manager) != null && s.dragOperation.status.idle) || (r.target = e ?? void 0);
+      },
+      [r]
+    )
   };
-};
+}
+function G(o, t, a) {
+  return !!(o === "isDragSource" && !a && t);
+}
 export {
-  g as getRecursiveOptionValues,
-  q as useSelectData
+  rr as isSortable,
+  Y as useSortable
 };
 //# sourceMappingURL=fondue-components112.js.map

package/dist/fondue-components112.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components112.js","sources":["../src/components/Select/hooks/useSelectData.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    Children,\n    cloneElement,\n    isValidElement,\n    useCallback,\n    useEffect,\n    useMemo,\n    useState,\n    type ReactNode,\n} from 'react';\n\nimport { SelectClear } from '../components/SelectClear';\nimport { ForwardedRefSelectItem, type SelectItemProps } from '../components/SelectItem';\nimport { ForwardedRefSelectSlot, type SelectSlotProps } from '../components/SelectSlot';\nimport { getSelectOptionValue } from '../utils';\n\nexport type SelectItemType = {\n    value: string;\n    label: string;\n};\n\nexport type AsyncItem = { label: string; value: string; content?: ReactNode };\n\nexport type AsyncItemsFetcher = (filterText: string) => Promise<AsyncItem[]>;\n\nconst useAsyncItems = (filterText: string, getAsyncItems?: AsyncItemsFetcher) => {\n    const [isLoading, setIsLoading] = useState(false);\n    const [error, setError] = useState<Error | null>(null);\n    const [asyncResult, setAsyncResult] = useState<{\n        menuComponents: ReactNode[];\n        items: { value: string; label: string; children?: ReactNode }[];\n    }>({\n        menuComponents: [],\n        items: [],\n    });\n\n    useEffect(() => {\n        // eslint-disable-next-line react-hooks/set-state-in-effect\n        setError(null);\n        if (!getAsyncItems) {\n            setAsyncResult({\n                menuComponents: [],\n                items: [],\n            });\n        }\n\n        if (getAsyncItems) {\n            setIsLoading(true);\n            getAsyncItems(filterText)\n                .then((items) => {\n                    setAsyncResult({\n                        menuComponents: items.map((item) => (\n                            <ForwardedRefSelectItem key={item.value} label={item.label} value={item.value}>\n                                {item.content ? item.content : item.label}\n                            </ForwardedRefSelectItem>\n                        )),\n                        items: items.map((item) => ({ value: item.value, label: item.label, children: item.content })),\n                    });\n                    setIsLoading(false);\n                })\n                .catch((error: Error) => {\n                    setError(error);\n                    setIsLoading(false);\n                });\n        }\n    }, [filterText, getAsyncItems]);\n\n    return { isLoading, error, menuComponents: asyncResult.menuComponents, items: asyncResult.items };\n};\n\n/**\n * Recursively extracts option values from children.\n * This function traverses through the React component tree and collects all SelectItem values.\n *\n * @param {ReactNode} children - The React children to extract values from.\n * @returns {SelectItemType[]} An array of SelectItemType objects.\n *\n * @example\n * const options = (\n *   <SelectItem value=\"1\">Option 1</SelectItem>\n *   <SelectItem value=\"2\">Option 2</SelectItem>\n * );\n * const values = getRecursiveOptionValues(options);\n * // Returns: [{ value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }]\n */\nexport const getRecursiveOptionValues = (\n    children: ReactNode,\n): { value: string; label: string; children?: ReactNode }[] => {\n    const values: { value: string; label: string }[] = [];\n    Children.forEach(children, (child) => {\n        if (isValidElement<SelectItemProps>(child) && child.type === ForwardedRefSelectItem) {\n            values.push(getSelectOptionValue(child.props));\n        } else if (isValidElement<{ children: ReactNode }>(child) && child.props.children) {\n            const optionValues = getRecursiveOptionValues(child.props.children);\n            for (const optionValue of optionValues) {\n                values.push(optionValue);\n            }\n        }\n    });\n    return values;\n};\n\n/**\n * Custom hook for managing select data and filtering.\n *\n * @param {ReactNode} children - The React children to process, typically SelectItem components.\n * @param {AsyncItemsFetcher} [getAsyncItems] - Optional function to fetch items asynchronously based on filter text.\n * @returns {Object} An object containing the processed data.\n */\nexport const useSelectData = (children: ReactNode, getAsyncItems?: AsyncItemsFetcher) => {\n    const [filterText, setFilterText] = useState('');\n    // eslint-disable-next-line react-hooks/preserve-manual-memoization\n    const { inputSlots, menuSlots, itemValues, clearButton } = useMemo(() => {\n        const inputSlots: ReactNode[] = [];\n        const menuSlots: ReactNode[] = [];\n        let clearButton: ReactNode;\n\n        const hasSlots = Children.toArray(children).some(\n            (child) => isValidElement<SelectSlotProps>(child) && child.type === ForwardedRefSelectSlot,\n        );\n\n        if (hasSlots) {\n            Children.forEach(children, (child) => {\n                if (isValidElement<SelectSlotProps>(child) && child.type === ForwardedRefSelectSlot) {\n                    if (child.props.name === 'menu') {\n                        menuSlots.push(child.props.children);\n                    } else if (child.props.name === 'left' || child.props.name === 'right') {\n                        inputSlots.push(child);\n                    } else if (child.props.name === 'clear') {\n                        if (child.props.children) {\n                            clearButton = child;\n                        } else {\n                            clearButton = cloneElement(child, { children: <SelectClear /> });\n                        }\n                    }\n                }\n            });\n        } else {\n            menuSlots.push(children);\n        }\n\n        const itemValues = getRecursiveOptionValues(menuSlots);\n\n        return { inputSlots, menuSlots, itemValues, clearButton };\n    }, [children]);\n\n    const items = useMemo(\n        () =>\n            itemValues.filter(\n                (item) => filterText === '' || item.label.toLowerCase().includes(filterText.toLowerCase()),\n            ),\n        [itemValues, filterText],\n    );\n\n    const getItemByValue = useCallback(\n        (value?: string | null) => (value !== undefined ? itemValues.find((item) => item.value === value) : undefined),\n        [itemValues],\n    );\n\n    const asyncItems = useAsyncItems(filterText, getAsyncItems);\n\n    return {\n        items: [...items, ...asyncItems.items],\n        menuSlots: [...menuSlots, ...asyncItems.menuComponents],\n        filterText,\n        inputSlots,\n        clearButton,\n        setFilterText,\n        getItemByValue,\n        asyncItemStatus: {\n            isLoading: asyncItems.isLoading,\n            error: asyncItems.error,\n        },\n    };\n};\n"],"names":["useAsyncItems","filterText","getAsyncItems","isLoading","setIsLoading","useState","error","setError","asyncResult","setAsyncResult","useEffect","items","item","jsx","ForwardedRefSelectItem","getRecursiveOptionValues","children","values","Children","child","isValidElement","getSelectOptionValue","optionValues","optionValue","useSelectData","setFilterText","inputSlots","menuSlots","itemValues","clearButton","useMemo","ForwardedRefSelectSlot","cloneElement","SelectClear","getItemByValue","useCallback","value","asyncItems"],"mappings":"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"}
+{"version":3,"file":"fondue-components112.js","sources":["../../../node_modules/.pnpm/@dnd-kit+react@0.3.2_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@dnd-kit/react/sortable.js"],"sourcesContent":["import { useCallback } from 'react';\nimport { batch, deepEqual } from '@dnd-kit/state';\nimport { defaultSortableTransition, Sortable } from '@dnd-kit/dom/sortable';\nexport { isSortable, isSortableOperation } from '@dnd-kit/dom/sortable';\nimport { useInstance } from '@dnd-kit/react';\nimport { useDeepSignal, useOnValueChange, useIsomorphicLayoutEffect, useImmediateEffect, useOnElementChange } from '@dnd-kit/react/hooks';\nimport { currentValue } from '@dnd-kit/react/utilities';\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));\nfunction useSortable(input) {\n  const {\n    accept,\n    collisionDetector,\n    collisionPriority,\n    id,\n    data,\n    element,\n    handle,\n    index,\n    group,\n    disabled,\n    feedback,\n    modifiers,\n    sensors,\n    target,\n    type\n  } = input;\n  const transition = __spreadValues(__spreadValues({}, defaultSortableTransition), input.transition);\n  const sortable = useInstance((manager) => {\n    return new Sortable(\n      __spreadProps(__spreadValues({}, input), {\n        transition,\n        register: false,\n        handle: currentValue(handle),\n        element: currentValue(element),\n        target: currentValue(target),\n        feedback\n      }),\n      manager\n    );\n  });\n  const trackedSortable = useDeepSignal(sortable, shouldUpdateSynchronously);\n  useOnValueChange(id, () => sortable.id = id);\n  useIsomorphicLayoutEffect(() => {\n    batch(() => {\n      sortable.group = group;\n      sortable.index = index;\n    });\n  }, [sortable, group, index]);\n  useOnValueChange(type, () => sortable.type = type);\n  useOnValueChange(\n    accept,\n    () => sortable.accept = accept,\n    void 0,\n    deepEqual\n  );\n  useOnValueChange(data, () => data && (sortable.data = data));\n  useOnValueChange(\n    index,\n    () => {\n      var _a;\n      if (((_a = sortable.manager) == null ? void 0 : _a.dragOperation.status.idle) && (transition == null ? void 0 : transition.idle)) {\n        sortable.refreshShape();\n      }\n    },\n    useImmediateEffect\n  );\n  useOnElementChange(handle, (handle2) => sortable.handle = handle2);\n  useOnElementChange(element, (element2) => sortable.element = element2);\n  useOnElementChange(target, (target2) => sortable.target = target2);\n  useOnValueChange(disabled, () => sortable.disabled = disabled === true);\n  useOnValueChange(sensors, () => sortable.sensors = sensors);\n  useOnValueChange(\n    collisionDetector,\n    () => sortable.collisionDetector = collisionDetector\n  );\n  useOnValueChange(\n    collisionPriority,\n    () => sortable.collisionPriority = collisionPriority\n  );\n  useOnValueChange(feedback, () => sortable.feedback = feedback != null ? feedback : \"default\");\n  useOnValueChange(\n    transition,\n    () => sortable.transition = transition,\n    void 0,\n    deepEqual\n  );\n  useOnValueChange(\n    modifiers,\n    () => sortable.modifiers = modifiers,\n    void 0,\n    deepEqual\n  );\n  useOnValueChange(\n    input.alignment,\n    () => sortable.alignment = input.alignment\n  );\n  return {\n    sortable: trackedSortable,\n    get isDragging() {\n      return trackedSortable.isDragging;\n    },\n    get isDropping() {\n      return trackedSortable.isDropping;\n    },\n    get isDragSource() {\n      return trackedSortable.isDragSource;\n    },\n    get isDropTarget() {\n      return trackedSortable.isDropTarget;\n    },\n    handleRef: useCallback(\n      (element2) => {\n        sortable.handle = element2 != null ? element2 : void 0;\n      },\n      [sortable]\n    ),\n    ref: useCallback(\n      (element2) => {\n        var _a, _b;\n        if (!element2 && ((_a = sortable.element) == null ? void 0 : _a.isConnected) && !((_b = sortable.manager) == null ? void 0 : _b.dragOperation.status.idle)) {\n          return;\n        }\n        sortable.element = element2 != null ? element2 : void 0;\n      },\n      [sortable]\n    ),\n    sourceRef: useCallback(\n      (element2) => {\n        var _a, _b;\n        if (!element2 && ((_a = sortable.source) == null ? void 0 : _a.isConnected) && !((_b = sortable.manager) == null ? void 0 : _b.dragOperation.status.idle)) {\n          return;\n        }\n        sortable.source = element2 != null ? element2 : void 0;\n      },\n      [sortable]\n    ),\n    targetRef: useCallback(\n      (element2) => {\n        var _a, _b;\n        if (!element2 && ((_a = sortable.target) == null ? void 0 : _a.isConnected) && !((_b = sortable.manager) == null ? void 0 : _b.dragOperation.status.idle)) {\n          return;\n        }\n        sortable.target = element2 != null ? element2 : void 0;\n      },\n      [sortable]\n    )\n  };\n}\nfunction shouldUpdateSynchronously(key, oldValue, newValue) {\n  if (key === \"isDragSource\" && !newValue && oldValue) return true;\n  return false;\n}\n\nexport { useSortable };\n//# sourceMappingURL=sortable.js.map\n//# sourceMappingURL=sortable.js.map"],"names":["__defProp","__defProps","__getOwnPropDescs","__getOwnPropSymbols","__hasOwnProp","__propIsEnum","__defNormalProp","obj","key","value","__spreadValues","a","b","prop","__spreadProps","useSortable","input","accept","collisionDetector","collisionPriority","id","data","element","handle","index","group","disabled","feedback","modifiers","sensors","target","type","transition","defaultSortableTransition","sortable","useInstance","manager","Sortable","currentValue","trackedSortable","useDeepSignal","shouldUpdateSynchronously","useOnValueChange","useIsomorphicLayoutEffect","batch","deepEqual","_a","useImmediateEffect","useOnElementChange","handle2","element2","target2","useCallback","_b","oldValue","newValue"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/fondue-components113.js

@@ -1,18 +1,14 @@
-import { useId as u, useMemo as f } from "react";
-import { useTranslation as D } from "./fondue-components40.js";
-const g = (t, n, r) => {
-  const { t: i } = D(), s = u(), e = f(() => {
-    if (!t || n.length === 0)
-      return "";
-    const p = n.map((c) => {
-      const o = r(c);
-      return (o == null ? void 0 : o.label) ?? c;
-    }).join(", ");
-    return i("Select_selectedCount", { count: n.length.toString(), items: p });
-  }, [t, n, r, i]);
-  return { selectionDescriptionId: s, selectionDescription: e };
-};
+import { createContext as t, useContext as r } from "react";
+const e = t({
+  itemId: "",
+  dragHandleRef: () => null,
+  hasHandle: !1
+});
+e.displayName = "OrderableItemContext";
+const a = e.Provider, n = () => r(e);
 export {
-  g as useSelectionDescription
+  e as OrderableItemContext,
+  a as OrderableItemContextProvider,
+  n as useOrderableItemContext
 };
 //# sourceMappingURL=fondue-components113.js.map

package/dist/fondue-components113.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components113.js","sources":["../src/components/Select/hooks/useSelectionDescription.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useId, useMemo } from 'react';\n\nimport { useTranslation } from '#/hooks/useTranslation';\n\ntype SelectItemLike = {\n    value: string;\n    label: string;\n};\n\ntype SelectionDescription = {\n    /** The unique ID for the SR description element. */\n    selectionDescriptionId: string;\n    /** The description text for screen readers (empty string when not applicable). */\n    selectionDescription: string;\n};\n\nexport const useSelectionDescription = (\n    isMultiple: boolean,\n    selectedItemValues: string[],\n    getItemByValue: (value?: string) => SelectItemLike | undefined,\n): SelectionDescription => {\n    const { t } = useTranslation();\n    const selectionDescriptionId = useId();\n\n    const selectionDescription = useMemo((): string => {\n        if (!isMultiple || selectedItemValues.length === 0) {\n            return '';\n        }\n        const labels = selectedItemValues\n            .map((value) => {\n                const item = getItemByValue(value);\n                return item?.label ?? value;\n            })\n            .join(', ');\n        return t('Select_selectedCount', { count: selectedItemValues.length.toString(), items: labels });\n    }, [isMultiple, selectedItemValues, getItemByValue, t]);\n\n    return { selectionDescriptionId, selectionDescription };\n};\n"],"names":["useSelectionDescription","isMultiple","selectedItemValues","getItemByValue","t","useTranslation","selectionDescriptionId","useId","selectionDescription","useMemo","labels","value","item"],"mappings":";;AAkBO,MAAMA,IAA0B,CACnCC,GACAC,GACAC,MACuB;AACvB,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACRC,IAAyBC,EAAA,GAEzBC,IAAuBC,EAAQ,MAAc;AAC/C,QAAI,CAACR,KAAcC,EAAmB,WAAW;AAC7C,aAAO;AAEX,UAAMQ,IAASR,EACV,IAAI,CAACS,MAAU;AACZ,YAAMC,IAAOT,EAAeQ,CAAK;AACjC,cAAOC,KAAA,gBAAAA,EAAM,UAASD;AAAA,IAC1B,CAAC,EACA,KAAK,IAAI;AACd,WAAOP,EAAE,wBAAwB,EAAE,OAAOF,EAAmB,OAAO,SAAA,GAAY,OAAOQ,GAAQ;AAAA,EACnG,GAAG,CAACT,GAAYC,GAAoBC,GAAgBC,CAAC,CAAC;AAEtD,SAAO,EAAE,wBAAAE,GAAwB,sBAAAE,EAAA;AACrC;"}
+{"version":3,"file":"fondue-components113.js","sources":["../src/components/OrderableList/hooks/useOrderedListItemContext.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { createContext, useContext } from 'react';\n\ntype OrderableItemContextType = {\n    itemId: string;\n    dragHandleRef: (element: Element | null) => void;\n    hasHandle: boolean;\n    selected?: boolean;\n    onSelect?: (isSelected: boolean) => void;\n};\n\nexport const OrderableItemContext = createContext<OrderableItemContextType>({\n    itemId: '',\n    dragHandleRef: () => null,\n    hasHandle: false,\n});\nOrderableItemContext.displayName = 'OrderableItemContext';\n\nexport const OrderableItemContextProvider = OrderableItemContext.Provider;\n\nexport const useOrderableItemContext = (): OrderableItemContextType => useContext(OrderableItemContext);\n"],"names":["OrderableItemContext","createContext","OrderableItemContextProvider","useOrderableItemContext","useContext"],"mappings":";AAYO,MAAMA,IAAuBC,EAAwC;AAAA,EACxE,QAAQ;AAAA,EACR,eAAe,MAAM;AAAA,EACrB,WAAW;AACf,CAAC;AACDD,EAAqB,cAAc;AAE5B,MAAME,IAA+BF,EAAqB,UAEpDG,IAA0B,MAAgCC,EAAWJ,CAAoB;"}

package/dist/fondue-components114.js

@@ -1,10 +1,39 @@
-import { jsx as r } from "react/jsx-runtime";
-import { Slot as e } from "@radix-ui/react-slot";
-import a from "./fondue-components102.js";
-const m = ({ children: o, onClear: t }) => /* @__PURE__ */ r(e, { onClick: (l) => {
-  l.stopPropagation(), t();
-}, className: a.clear, role: "button", "aria-label": "Clear selection", children: o });
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { getItemTitle as p } from "./fondue-components80.js";
+import { useOrderableListAnnounce as u } from "./fondue-components81.js";
+import { useOrderableItemContext as b } from "./fondue-components113.js";
+import l from "./fondue-components83.js";
+const I = f(({ children: t }, o) => {
+  const { itemId: c, onSelect: n, selected: r, hasHandle: d } = b(), m = u();
+  if (!n)
+    return (
+      // eslint-disable-next-line jsx-a11y-x/no-noninteractive-tabindex
+      /* @__PURE__ */ s("div", { className: l.content, ref: o, tabIndex: d ? 0 : void 0, children: t })
+    );
+  const a = () => {
+    const e = !r;
+    n(e), m(`${p(c)} ${e ? "selected" : "unselected"}`);
+  }, i = (e) => {
+    (e.key === "Enter" || e.key === " ") && (e.preventDefault(), a());
+  };
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      className: l.content,
+      ref: o,
+      role: "button",
+      tabIndex: 0,
+      "aria-pressed": !!r,
+      onClick: a,
+      onKeyDown: i,
+      "data-clickable": !0,
+      children: t
+    }
+  );
+});
+I.displayName = "OrderableListItemContent";
 export {
-  m as ClearButton
+  I as OrderableListItemContent
 };
 //# sourceMappingURL=fondue-components114.js.map

package/dist/fondue-components114.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components114.js","sources":["../src/components/Select/components/ClearButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { type MouseEvent, type ReactNode } from 'react';\n\nimport styles from '../styles/select.module.scss';\n\ntype ClearButtonProps = {\n    /** The clear button element to render inside the slot. */\n    children: ReactNode;\n    /** Callback fired when the clear button is clicked. */\n    onClear: () => void;\n};\n\nexport const ClearButton = ({ children, onClear }: ClearButtonProps): ReactNode => {\n    const handleClick = (event: MouseEvent): void => {\n        event.stopPropagation();\n        onClear();\n    };\n\n    return (\n        <RadixSlot onClick={handleClick} className={styles.clear} role=\"button\" aria-label=\"Clear selection\">\n            {children}\n        </RadixSlot>\n    );\n};\n"],"names":["ClearButton","children","onClear","jsx","RadixSlot","event","styles"],"mappings":";;;AAcO,MAAMA,IAAc,CAAC,EAAE,UAAAC,GAAU,SAAAC,QAOhC,gBAAAC,EAACC,GAAA,EAAU,SANK,CAACC,MAA4B;AAC7C,EAAAA,EAAM,gBAAA,GACNH,EAAA;AACJ,GAGqC,WAAWI,EAAO,OAAO,MAAK,UAAS,cAAW,mBAC9E,UAAAL,EAAA,CACL;"}
+{"version":3,"file":"fondue-components114.js","sources":["../src/components/OrderableList/OrderableListItemContent.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type KeyboardEvent, type ReactNode } from 'react';\n\nimport { getItemTitle } from './helpers/getItemTitle';\nimport { useOrderableListAnnounce } from './hooks/useOrderableListAnnounce';\nimport { useOrderableItemContext } from './hooks/useOrderedListItemContext';\nimport styles from './styles/orderable-list.module.scss';\n\nexport const OrderableListItemContent = forwardRef<HTMLDivElement, { children: ReactNode }>(({ children }, ref) => {\n    const { itemId, onSelect, selected, hasHandle } = useOrderableItemContext();\n    const announce = useOrderableListAnnounce();\n\n    if (!onSelect) {\n        return (\n            // eslint-disable-next-line jsx-a11y-x/no-noninteractive-tabindex\n            <div className={styles.content} ref={ref} tabIndex={hasHandle ? 0 : undefined}>\n                {children}\n            </div>\n        );\n    }\n\n    const handleSelect = () => {\n        const newSelected = !selected;\n        onSelect(newSelected);\n        announce(`${getItemTitle(itemId)} ${newSelected ? 'selected' : 'unselected'}`);\n    };\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            handleSelect();\n        }\n    };\n\n    return (\n        <div\n            className={styles.content}\n            ref={ref}\n            role=\"button\"\n            tabIndex={0}\n            aria-pressed={Boolean(selected)}\n            onClick={handleSelect}\n            onKeyDown={handleKeyDown}\n            data-clickable\n        >\n            {children}\n        </div>\n    );\n});\nOrderableListItemContent.displayName = 'OrderableListItemContent';\n"],"names":["OrderableListItemContent","forwardRef","children","ref","itemId","onSelect","selected","hasHandle","useOrderableItemContext","announce","useOrderableListAnnounce","jsx","styles","handleSelect","newSelected","getItemTitle","handleKeyDown","event"],"mappings":";;;;;;AASO,MAAMA,IAA2BC,EAAoD,CAAC,EAAE,UAAAC,EAAA,GAAYC,MAAQ;AAC/G,QAAM,EAAE,QAAAC,GAAQ,UAAAC,GAAU,UAAAC,GAAU,WAAAC,EAAA,IAAcC,EAAA,GAC5CC,IAAWC,EAAA;AAEjB,MAAI,CAACL;AACD;AAAA;AAAA,MAEI,gBAAAM,EAAC,OAAA,EAAI,WAAWC,EAAO,SAAS,KAAAT,GAAU,UAAUI,IAAY,IAAI,QAC/D,UAAAL,EAAA,CACL;AAAA;AAIR,QAAMW,IAAe,MAAM;AACvB,UAAMC,IAAc,CAACR;AACrB,IAAAD,EAASS,CAAW,GACpBL,EAAS,GAAGM,EAAaX,CAAM,CAAC,IAAIU,IAAc,aAAa,YAAY,EAAE;AAAA,EACjF,GAEME,IAAgB,CAACC,MAAyB;AAC5C,KAAIA,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACvCA,EAAM,eAAA,GACNJ,EAAA;AAAA,EAER;AAEA,SACI,gBAAAF;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC,EAAO;AAAA,MAClB,KAAAT;AAAA,MACA,MAAK;AAAA,MACL,UAAU;AAAA,MACV,gBAAc,EAAQG;AAAA,MACtB,SAASO;AAAA,MACT,WAAWG;AAAA,MACX,kBAAc;AAAA,MAEb,UAAAd;AAAA,IAAA;AAAA,EAAA;AAGb,CAAC;AACDF,EAAyB,cAAc;"}

package/dist/fondue-components115.js

@@ -1,92 +1,17 @@
-import { jsxs as S, jsx as f } from "react/jsx-runtime";
-import { useRef as m, useState as C, useEffect as _ } from "react";
-import { Badge as w } from "./fondue-components4.js";
-import { useTranslation as I } from "./fondue-components40.js";
-import p from "./fondue-components102.js";
-const W = 4, D = 40, E = 24, M = (r, h, u, o) => {
-  const g = r.offsetWidth;
-  let s = o ? E + W : 0, n = 0;
-  for (const d of u) {
-    const a = h.get(d.value);
-    if (!a)
-      continue;
-    const l = a.offsetWidth, i = n > 0 ? l + W : l, c = u.length - n - 1 > 0 ? D + W : 0;
-    if (s + i + c > g)
-      break;
-    s += i, n++;
-  }
-  return Math.max(1, n);
-}, x = ({
-  items: r,
-  placeholder: h,
-  onDismiss: u,
-  children: o,
-  selectedCount: g = 0
-}) => {
-  const { t: s } = I(), n = m(!1), d = m(null), a = m(/* @__PURE__ */ new Map()), [l, i] = C(r.length), b = o !== void 0;
-  if (_(() => {
-    const e = d.current;
-    if (!e)
-      return;
-    const v = () => {
-      if (r.length === 0) {
-        i(0);
-        return;
-      }
-      i(M(e, a.current, r, b));
-    }, t = new ResizeObserver(v);
-    return t.observe(e), () => {
-      t.disconnect();
-    };
-  }, [r, b]), r.length === 0 && !o)
-    return h;
-  const c = r.length - l, y = (e) => e === 1 ? s("Select_singleItemSelected") : e > 1 ? s("Select_multipleItemsSelected", { count: e.toString() }) : "";
-  return /* @__PURE__ */ S("div", { ref: d, className: p.badgesContainer, children: [
-    /* @__PURE__ */ f("span", { className: p.srOnly, "aria-live": "polite", "aria-atomic": "true", children: y(g) }),
-    o,
-    r.map((e, v) => /* @__PURE__ */ f(
-      "div",
-      {
-        ref: (t) => {
-          t ? a.current.set(e.value, t) : a.current.delete(e.value);
-        },
-        role: "presentation",
-        className: p.badgeWrapper,
-        "data-visible": v < l,
-        onKeyDown: (t) => {
-          (t.key === "Enter" || t.key === " ") && t.stopPropagation();
-        },
-        onMouseDown: () => {
-          n.current = !0;
-        },
-        children: /* @__PURE__ */ f(
-          w,
-          {
-            emphasis: "weak",
-            "aria-label": typeof e.displayValue == "string" ? e.displayValue : e.value,
-            onDismiss: (t) => {
-              t.stopPropagation(), u(e.value, n.current), n.current = !1;
-            },
-            children: e.displayValue
-          }
-        )
-      },
-      e.value
-    )),
-    c > 0 && /* @__PURE__ */ f(
-      "div",
-      {
-        className: p.badgeWrapper,
-        "aria-label": s("Select_additionalItemsSelected", { count: c.toString() }),
-        children: /* @__PURE__ */ S(w, { emphasis: "weak", "aria-hidden": "true", children: [
-          "+",
-          c
-        ] })
-      }
-    )
-  ] });
-};
+import { format as o } from "date-fns";
+import { transformDateRangeToPickerDateRange as i, transformDatePickerDateToDate as e } from "./fondue-components128.js";
+const y = (r) => !!(r && "from" in r && "to" in r), M = (r) => {
+  const t = e(r);
+  if (t)
+    return o(t, "MMMM d, yyyy");
+}, a = (r) => {
+  const t = i(r);
+  if (!(t != null && t.from) || !(t != null && t.to))
+    return;
+  const n = t.from.getFullYear() === t.to.getFullYear();
+  return n && t.from.getMonth() === t.to.getMonth() ? `${o(t.from, "MMM d")}–${o(t.to, "d, yyyy")}` : n ? `${o(t.from, "MMM d")}–${o(t.to, "MMM d, yyyy")}` : `${o(t.from, "MMM d, yyyy")}–${o(t.to, "MMM d, yyyy")}`;
+}, g = (r) => y(r) ? a(r) : M(r);
 export {
-  x as CollapsibleBadges
+  g as getDateDisplayString
 };
 //# sourceMappingURL=fondue-components115.js.map

package/dist/fondue-components115.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components115.js","sources":["../src/components/Select/components/CollapsibleBadges.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect, useRef, useState, type KeyboardEvent, type ReactNode } from 'react';\n\nimport { Badge } from '#/components/Badge/Badge';\nimport { useTranslation } from '#/hooks/useTranslation';\n\nimport styles from '../styles/select.module.scss';\n\nconst BADGE_GAP = 4;\nconst OVERFLOW_BADGE_MIN_WIDTH = 40;\nconst INPUT_MIN_WIDTH = 24;\n\ntype BadgeItem = {\n    value: string;\n    displayValue: ReactNode;\n};\n\ntype CollapsibleBadgesProps = {\n    items: BadgeItem[];\n    placeholder?: string;\n    onDismiss: (value: string, preventFocusRing: boolean) => void;\n    /** Optional children to render at the end (e.g., an input field). Space is reserved in the layout calculation. */\n    children?: ReactNode;\n    /** Total number of selected items (for screen reader announcements). */\n    selectedCount?: number;\n};\n\nconst calculateVisibleCount = (\n    container: HTMLDivElement,\n    badgeElements: Map<string, HTMLDivElement>,\n    items: BadgeItem[],\n    hasInputSlot: boolean,\n): number => {\n    const containerWidth = container.offsetWidth;\n    let usedWidth = hasInputSlot ? INPUT_MIN_WIDTH + BADGE_GAP : 0;\n    let count = 0;\n\n    for (const item of items) {\n        const badgeElement = badgeElements.get(item.value);\n        if (!badgeElement) {\n            continue;\n        }\n\n        const badgeWidth = badgeElement.offsetWidth;\n        const widthWithGap = count > 0 ? badgeWidth + BADGE_GAP : badgeWidth;\n        const hasMoreAfterThis = items.length - count - 1 > 0;\n        const reservedWidth = hasMoreAfterThis ? OVERFLOW_BADGE_MIN_WIDTH + BADGE_GAP : 0;\n\n        if (usedWidth + widthWithGap + reservedWidth > containerWidth) {\n            break;\n        }\n\n        usedWidth += widthWithGap;\n        count++;\n    }\n\n    return Math.max(1, count);\n};\n\nexport const CollapsibleBadges = ({\n    items,\n    placeholder,\n    onDismiss,\n    children,\n    selectedCount = 0,\n}: CollapsibleBadgesProps): ReactNode => {\n    const { t } = useTranslation();\n    const wasClickedRef = useRef(false);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const badgeElementsRef = useRef<Map<string, HTMLDivElement>>(new Map());\n    const [visibleCount, setVisibleCount] = useState(items.length);\n    const hasChildren = children !== undefined;\n\n    useEffect(() => {\n        const container = containerRef.current;\n        if (!container) {\n            return;\n        }\n\n        const recalculate = (): void => {\n            if (items.length === 0) {\n                setVisibleCount(0);\n                return;\n            }\n            setVisibleCount(calculateVisibleCount(container, badgeElementsRef.current, items, hasChildren));\n        };\n\n        const observer = new ResizeObserver(recalculate);\n        observer.observe(container);\n        return (): void => {\n            observer.disconnect();\n        };\n    }, [items, hasChildren]);\n\n    if (items.length === 0 && !children) {\n        return placeholder;\n    }\n\n    const overflowCount = items.length - visibleCount;\n\n    const getSelectedCountText = (count: number): string => {\n        if (count === 1) {\n            return t('Select_singleItemSelected');\n        }\n        if (count > 1) {\n            return t('Select_multipleItemsSelected', { count: count.toString() });\n        }\n        return '';\n    };\n\n    return (\n        <div ref={containerRef} className={styles.badgesContainer}>\n            <span className={styles.srOnly} aria-live=\"polite\" aria-atomic=\"true\">\n                {getSelectedCountText(selectedCount)}\n            </span>\n            {children}\n            {items.map((item, index) => (\n                <div\n                    key={item.value}\n                    ref={(element): void => {\n                        if (element) {\n                            badgeElementsRef.current.set(item.value, element);\n                        } else {\n                            badgeElementsRef.current.delete(item.value);\n                        }\n                    }}\n                    role=\"presentation\"\n                    className={styles.badgeWrapper}\n                    data-visible={index < visibleCount}\n                    onKeyDown={(event: KeyboardEvent<HTMLDivElement>): void => {\n                        if (event.key === 'Enter' || event.key === ' ') {\n                            event.stopPropagation();\n                        }\n                    }}\n                    onMouseDown={(): void => {\n                        wasClickedRef.current = true;\n                    }}\n                >\n                    <Badge\n                        emphasis=\"weak\"\n                        aria-label={typeof item.displayValue === 'string' ? item.displayValue : item.value}\n                        onDismiss={(event) => {\n                            event.stopPropagation();\n                            onDismiss(item.value, wasClickedRef.current);\n                            wasClickedRef.current = false;\n                        }}\n                    >\n                        {item.displayValue}\n                    </Badge>\n                </div>\n            ))}\n            {overflowCount > 0 && (\n                <div\n                    className={styles.badgeWrapper}\n                    aria-label={t('Select_additionalItemsSelected', { count: overflowCount.toString() })}\n                >\n                    <Badge emphasis=\"weak\" aria-hidden=\"true\">\n                        +{overflowCount}\n                    </Badge>\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["BADGE_GAP","OVERFLOW_BADGE_MIN_WIDTH","INPUT_MIN_WIDTH","calculateVisibleCount","container","badgeElements","items","hasInputSlot","containerWidth","usedWidth","count","item","badgeElement","badgeWidth","widthWithGap","reservedWidth","CollapsibleBadges","placeholder","onDismiss","children","selectedCount","t","useTranslation","wasClickedRef","useRef","containerRef","badgeElementsRef","visibleCount","setVisibleCount","useState","hasChildren","useEffect","recalculate","observer","overflowCount","getSelectedCountText","styles","jsx","index","element","event","Badge","jsxs"],"mappings":"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"}
+{"version":3,"file":"fondue-components115.js","sources":["../src/components/DatePicker/helpers/dateDisplayFormatter.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { format } from 'date-fns';\n\nimport { type DatePickerDate, type DatePickerDateRange } from '../types';\n\nimport { transformDateRangeToPickerDateRange, transformDatePickerDateToDate } from './dateTransformer';\n\nconst isDateRange = (selected?: DatePickerDateRange | DatePickerDate): selected is DatePickerDateRange => {\n    return Boolean(selected && 'from' in selected && 'to' in selected);\n};\n\nconst getSingleDateDisplayString = (selected?: DatePickerDate): string | undefined => {\n    const singleDate = transformDatePickerDateToDate(selected);\n    if (!singleDate) {\n        return undefined;\n    }\n    return format(singleDate, 'MMMM d, yyyy');\n};\n\nconst getDateRangeDisplayString = (selected?: DatePickerDateRange): string | undefined => {\n    const dateRange = transformDateRangeToPickerDateRange(selected);\n    if (!dateRange?.from || !dateRange?.to) {\n        return undefined;\n    }\n\n    const isSameYear = dateRange.from.getFullYear() === dateRange.to.getFullYear();\n\n    const isSameMonth = isSameYear && dateRange.from.getMonth() === dateRange.to.getMonth();\n\n    if (isSameMonth) {\n        return `${format(dateRange.from, 'MMM d')}\\u2013${format(dateRange.to, 'd, yyyy')}`;\n    }\n\n    if (isSameYear) {\n        return `${format(dateRange.from, 'MMM d')}\\u2013${format(dateRange.to, 'MMM d, yyyy')}`;\n    }\n\n    return `${format(dateRange.from, 'MMM d, yyyy')}\\u2013${format(dateRange.to, 'MMM d, yyyy')}`;\n};\n\nexport const getDateDisplayString = (selected?: DatePickerDateRange | DatePickerDate): string | undefined => {\n    if (isDateRange(selected)) {\n        return getDateRangeDisplayString(selected);\n    }\n    return getSingleDateDisplayString(selected);\n};\n"],"names":["isDateRange","selected","getSingleDateDisplayString","singleDate","transformDatePickerDateToDate","format","getDateRangeDisplayString","dateRange","transformDateRangeToPickerDateRange","isSameYear","getDateDisplayString"],"mappings":";;AAQA,MAAMA,IAAc,CAACC,MACV,GAAQA,KAAY,UAAUA,KAAY,QAAQA,IAGvDC,IAA6B,CAACD,MAAkD;AAClF,QAAME,IAAaC,EAA8BH,CAAQ;AACzD,MAAKE;AAGL,WAAOE,EAAOF,GAAY,cAAc;AAC5C,GAEMG,IAA4B,CAACL,MAAuD;AACtF,QAAMM,IAAYC,EAAoCP,CAAQ;AAC9D,MAAI,EAACM,KAAA,QAAAA,EAAW,SAAQ,EAACA,KAAA,QAAAA,EAAW;AAChC;AAGJ,QAAME,IAAaF,EAAU,KAAK,kBAAkBA,EAAU,GAAG,YAAA;AAIjE,SAFoBE,KAAcF,EAAU,KAAK,eAAeA,EAAU,GAAG,SAAA,IAGlE,GAAGF,EAAOE,EAAU,MAAM,OAAO,CAAC,IAASF,EAAOE,EAAU,IAAI,SAAS,CAAC,KAGjFE,IACO,GAAGJ,EAAOE,EAAU,MAAM,OAAO,CAAC,IAASF,EAAOE,EAAU,IAAI,aAAa,CAAC,KAGlF,GAAGF,EAAOE,EAAU,MAAM,aAAa,CAAC,IAASF,EAAOE,EAAU,IAAI,aAAa,CAAC;AAC/F,GAEaG,IAAuB,CAACT,MAC7BD,EAAYC,CAAQ,IACbK,EAA0BL,CAAQ,IAEtCC,EAA2BD,CAAQ;"}

package/dist/fondue-components116.js

@@ -1,84 +1,18 @@
-import { jsx as r } from "react/jsx-runtime";
-import * as p from "@radix-ui/react-popover";
-import { Slot as M } from "@radix-ui/react-slot";
-import { isValidElement as T } from "react";
-import { useFondueTheme as E, ThemeProvider as F } from "./fondue-components37.js";
-import a from "./fondue-components102.js";
-import { recursiveMap as R, getSelectOptionValue as _ } from "./fondue-components123.js";
-const j = ({
-  highlightedIndex: l,
-  getMenuProps: u,
-  getItemProps: m,
-  children: f,
-  filterText: d,
-  align: h,
-  side: P,
-  selectedItemValues: o,
-  hasInteractedSinceOpening: S,
-  viewportCollisionPadding: g = "compact",
-  onEscapeKeyDown: v
-}) => {
-  const O = (e) => {
-    e.preventDefault();
-  }, N = {
-    compact: 8,
-    spacious: 24
-  }, { theme: A, dir: n } = E(), C = (e) => n === "ltr" ? e : e === "left" ? "right" : e === "right" ? "left" : e;
-  return /* @__PURE__ */ r(p.Portal, { children: /* @__PURE__ */ r(F, { theme: A, dir: n, children: /* @__PURE__ */ r(
-    p.Content,
-    {
-      dir: n,
-      align: h,
-      side: C(P),
-      collisionPadding: N[g] + 8,
-      onOpenAutoFocus: O,
-      onEscapeKeyDown: v,
-      className: a.portal,
-      children: /* @__PURE__ */ r(
-        "ul",
-        {
-          className: a.menu,
-          ...u({}, { suppressRefError: !0 }),
-          "data-has-interacted": S ? "true" : "false",
-          "data-test-id": "fondue-select-menu",
-          children: R(
-            f,
-            (e, s) => {
-              if (((t) => (
-                // @ts-expect-error - We are explicitly checking for ref
-                T(t) && t.ref !== void 0
-              ))(e)) {
-                const t = _(e.props), i = m({
-                  item: t,
-                  index: s,
-                  ...e.ref ? { ref: e.ref } : {}
-                }), c = o == null ? void 0 : o.includes(t.value);
-                return /* @__PURE__ */ r(
-                  M,
-                  {
-                    className: a.item,
-                    "data-highlighted": l === s,
-                    "data-selected": c,
-                    onTouchStart: (D) => {
-                      i.onClick && i.onClick(D);
-                    },
-                    ...i,
-                    "aria-selected": c,
-                    children: e
-                  },
-                  e.props.value
-                );
-              }
-            },
-            d
-          ).parsedChildren
-        }
-      )
-    }
-  ) }) });
+const t = "_root_v3an7_5", a = "_caret_v3an7_44", o = "_dateName_v3an7_59", n = "_button_v3an7_80", c = "_actions_v3an7_93", _ = "_clearIcon_v3an7_101", e = {
+  root: t,
+  caret: a,
+  dateName: o,
+  button: n,
+  actions: c,
+  clearIcon: _
 };
-j.displayName = "Select.Menu";
 export {
-  j as SelectMenu
+  c as actions,
+  n as button,
+  a as caret,
+  _ as clearIcon,
+  o as dateName,
+  e as default,
+  t as root
 };
 //# sourceMappingURL=fondue-components116.js.map