@frontify/fondue-components 29.0.0 → 29.0.1

package/dist/fondue-components136.js

@@ -1,15 +1,92 @@
-import { useRef as u, useCallback as t } from "react";
-const c = () => {
-  const s = u(!1), o = t((e) => {
-    s.current = !0, e.currentTarget.dataset.showFocusRing = "false";
-  }, []), r = t((e) => {
-    s.current || (e.target.dataset.showFocusRing = "true");
-  }, []), n = t((e) => {
-    e.target.dataset.showFocusRing = "false", s.current = !1;
-  }, []);
-  return { wasClickedRef: s, onMouseDown: o, onFocus: r, onBlur: n };
+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-components42.js";
+import p from "./fondue-components125.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
+        ] })
+      }
+    )
+  ] });
 };
 export {
-  c as useFocusRing
+  x as CollapsibleBadges
 };
 //# sourceMappingURL=fondue-components136.js.map

package/dist/fondue-components136.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components136.js","sources":["../src/components/Select/hooks/useFocusRing.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useCallback, useRef, type FocusEvent, type MouseEvent, type MutableRefObject } from 'react';\n\ntype FocusRingHandlers = {\n    /** Ref tracking whether the element was activated via mouse click. */\n    wasClickedRef: MutableRefObject<boolean>;\n    /** Handler for mousedown events — marks the interaction as click-based. */\n    onMouseDown: (event: MouseEvent<HTMLElement>) => void;\n    /** Handler for focus events — shows the focus ring only for keyboard navigation. */\n    onFocus: (event: FocusEvent<HTMLElement>) => void;\n    /** Handler for blur events — hides the focus ring and resets click tracking. */\n    onBlur: (event: FocusEvent<HTMLElement>) => void;\n};\n\nexport const useFocusRing = (): FocusRingHandlers => {\n    const wasClickedRef = useRef(false);\n\n    const onMouseDown = useCallback((event: MouseEvent<HTMLElement>): void => {\n        wasClickedRef.current = true;\n        event.currentTarget.dataset.showFocusRing = 'false';\n    }, []);\n\n    const onFocus = useCallback((event: FocusEvent<HTMLElement>): void => {\n        if (!wasClickedRef.current) {\n            event.target.dataset.showFocusRing = 'true';\n        }\n    }, []);\n\n    const onBlur = useCallback((event: FocusEvent<HTMLElement>): void => {\n        event.target.dataset.showFocusRing = 'false';\n        wasClickedRef.current = false;\n    }, []);\n\n    return { wasClickedRef, onMouseDown, onFocus, onBlur };\n};\n"],"names":["useFocusRing","wasClickedRef","useRef","onMouseDown","useCallback","event","onFocus","onBlur"],"mappings":";AAeO,MAAMA,IAAe,MAAyB;AACjD,QAAMC,IAAgBC,EAAO,EAAK,GAE5BC,IAAcC,EAAY,CAACC,MAAyC;AACtE,IAAAJ,EAAc,UAAU,IACxBI,EAAM,cAAc,QAAQ,gBAAgB;AAAA,EAChD,GAAG,CAAA,CAAE,GAECC,IAAUF,EAAY,CAACC,MAAyC;AAClE,IAAKJ,EAAc,YACfI,EAAM,OAAO,QAAQ,gBAAgB;AAAA,EAE7C,GAAG,CAAA,CAAE,GAECE,IAASH,EAAY,CAACC,MAAyC;AACjE,IAAAA,EAAM,OAAO,QAAQ,gBAAgB,SACrCJ,EAAc,UAAU;AAAA,EAC5B,GAAG,CAAA,CAAE;AAEL,SAAO,EAAE,eAAAA,GAAe,aAAAE,GAAa,SAAAG,GAAS,QAAAC,EAAA;AAClD;"}
+{"version":3,"file":"fondue-components136.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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"}

package/dist/fondue-components137.js

@@ -1,74 +1,84 @@
-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-components148.js";
-import { ForwardedRefSelectItem as L } from "./fondue-components94.js";
-import { ForwardedRefSelectSlot as y } from "./fondue-components95.js";
-import { getSelectOptionValue as I } from "./fondue-components149.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);
+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-components39.js";
+import a from "./fondue-components125.js";
+import { recursiveMap as R, getSelectOptionValue as _ } from "./fondue-components149.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
+        }
+      )
     }
-  }), 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())
-    ),
-    [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
-    }
-  };
+  ) }) });
 };
+j.displayName = "Select.Menu";
 export {
-  g as getRecursiveOptionValues,
-  q as useSelectData
+  j as SelectMenu
 };
 //# sourceMappingURL=fondue-components137.js.map

package/dist/fondue-components137.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components137.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-components137.js","sources":["../src/components/Select/components/SelectMenu.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { type UseComboboxPropGetters, type UseSelectPropGetters } from 'downshift';\nimport { isValidElement, type ForwardedRef, type MouseEvent, type ReactElement, type ReactNode } from 'react';\n\nimport { ThemeProvider, useFondueTheme } from '#/components/ThemeProvider/ThemeProvider';\n\nimport styles from '../styles/select.module.scss';\nimport { getSelectOptionValue, recursiveMap } from '../utils';\n\nimport { type SelectItemProps } from './SelectItem';\n\nexport type SelectMenuViewportCollisionPadding = 'compact' | 'spacious';\n\nexport type SelectMenuProps = {\n    /**\n     * @internal\n     * The index of the highlighted item in the menu.\n     */\n    highlightedIndex: number;\n    /**\n     * @internal\n     * Callback function to retrieve the props for a menu element.\n     */\n    getMenuProps: UseSelectPropGetters<unknown>['getMenuProps'] | UseComboboxPropGetters<unknown>['getMenuProps'];\n    /**\n     * @internal\n     * Callback function to retrieve the props for a item element.\n     */\n    getItemProps: UseSelectPropGetters<unknown>['getItemProps'] | UseComboboxPropGetters<unknown>['getItemProps'];\n    /**\n     * @internal\n     * The children of the menu component. This can contain multiple `Select.Item` or `Select.Group` components.\n     */\n    children: ReactNode;\n    /**\n     * @internal\n     * The filter text shown in the combobox input element.\n     */\n    filterText?: string;\n    /**\n     * @internal\n     * The alignment of the menu.\n     */\n    align: 'start' | 'center' | 'end';\n    /**\n     * @internal\n     * Defines the preferred side of the select. It will not be respected if there are collisions with the viewport.\n     * @default \"bottom\"\n     */\n    side: 'left' | 'right' | 'bottom' | 'top';\n    /**\n     * @internal\n     * The type of the menu.\n     */\n    selectedItemValues?: string[];\n    /**\n     * @internal\n     * A boolean to indicate if highlighted item was changed since opening the menu.\n     * This is used to determine the style of the selected/highlighted item.\n     */\n    hasInteractedSinceOpening?: boolean;\n    /**\n     * Define the minimum distance between the select menu and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: SelectMenuViewportCollisionPadding;\n    /**\n     * @internal\n     * Event handler called when the escape key is pressed.\n     */\n    onEscapeKeyDown?: (event: KeyboardEvent) => void;\n};\n\nexport const SelectMenu = ({\n    highlightedIndex,\n    getMenuProps,\n    getItemProps,\n    children,\n    filterText,\n    align,\n    side,\n    selectedItemValues,\n    hasInteractedSinceOpening,\n    viewportCollisionPadding = 'compact',\n    onEscapeKeyDown,\n}: SelectMenuProps) => {\n    const handleOnOpenAutoFocus = (event: Event) => {\n        event.preventDefault();\n    };\n\n    const VIEWPORT_COLLISION_PADDING_MAP: Record<SelectMenuViewportCollisionPadding, number> = {\n        compact: 8,\n        spacious: 24,\n    };\n\n    const { theme, dir } = useFondueTheme();\n\n    const getAdjustedSide = (side: 'left' | 'right' | 'bottom' | 'top') => {\n        if (dir === 'ltr') {\n            return side;\n        }\n\n        if (side === 'left') {\n            return 'right';\n        }\n        if (side === 'right') {\n            return 'left';\n        }\n\n        return side;\n    };\n\n    return (\n        <RadixPopover.Portal>\n            <ThemeProvider theme={theme} dir={dir}>\n                <RadixPopover.Content\n                    dir={dir}\n                    align={align}\n                    side={getAdjustedSide(side)}\n                    collisionPadding={VIEWPORT_COLLISION_PADDING_MAP[viewportCollisionPadding] + 8}\n                    onOpenAutoFocus={handleOnOpenAutoFocus}\n                    onEscapeKeyDown={onEscapeKeyDown}\n                    className={styles.portal}\n                >\n                    <ul\n                        className={styles.menu}\n                        // TODO: fix this accessibility issue\n                        // We are mounting/unmounting the menu on open/close\n                        // We should instead toggle its visibility for accessibility reasons\n                        // https://github.com/downshift-js/downshift?tab=readme-ov-file#getmenuprops\n                        {...getMenuProps({}, { suppressRefError: true })}\n                        data-has-interacted={hasInteractedSinceOpening ? 'true' : 'false'}\n                        data-test-id=\"fondue-select-menu\"\n                    >\n                        {\n                            recursiveMap(\n                                children,\n                                (child, index) => {\n                                    const isValid = <TProps,>(\n                                        child: ReactNode,\n                                    ): child is ReactElement<TProps> & { ref: ForwardedRef<HTMLElement> } =>\n                                        // @ts-expect-error - We are explicitly checking for ref\n                                        isValidElement<TProps>(child) && child.ref !== undefined;\n\n                                    if (isValid<SelectItemProps>(child)) {\n                                        const optionData = getSelectOptionValue(child.props);\n                                        const itemProps = getItemProps({\n                                            item: optionData,\n                                            index,\n                                            ...(child.ref ? { ref: child.ref } : {}),\n                                        });\n\n                                        const isSelected = selectedItemValues?.includes(optionData.value);\n\n                                        return (\n                                            <RadixSlot\n                                                className={styles.item}\n                                                data-highlighted={highlightedIndex === index}\n                                                data-selected={isSelected}\n                                                key={child.props.value}\n                                                // Workaround for the issue where the onClick event is not fired on touch devices because of portal usage\n                                                onTouchStart={(event) => {\n                                                    if (itemProps.onClick) {\n                                                        itemProps.onClick(event as unknown as MouseEvent<HTMLElement>);\n                                                    }\n                                                }}\n                                                {...itemProps}\n                                                aria-selected={isSelected}\n                                            >\n                                                {child}\n                                            </RadixSlot>\n                                        );\n                                    }\n                                },\n                                filterText,\n                            ).parsedChildren\n                        }\n                    </ul>\n                </RadixPopover.Content>\n            </ThemeProvider>\n        </RadixPopover.Portal>\n    );\n};\nSelectMenu.displayName = 'Select.Menu';\n"],"names":["SelectMenu","highlightedIndex","getMenuProps","getItemProps","children","filterText","align","side","selectedItemValues","hasInteractedSinceOpening","viewportCollisionPadding","onEscapeKeyDown","handleOnOpenAutoFocus","event","VIEWPORT_COLLISION_PADDING_MAP","theme","dir","useFondueTheme","getAdjustedSide","RadixPopover","jsx","ThemeProvider","styles","recursiveMap","child","index","isValidElement","optionData","getSelectOptionValue","itemProps","isSelected","RadixSlot"],"mappings":";;;;;;;AA4EO,MAAMA,IAAa,CAAC;AAAA,EACvB,kBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,2BAAAC;AAAA,EACA,0BAAAC,IAA2B;AAAA,EAC3B,iBAAAC;AACJ,MAAuB;AACnB,QAAMC,IAAwB,CAACC,MAAiB;AAC5C,IAAAA,EAAM,eAAA;AAAA,EACV,GAEMC,IAAqF;AAAA,IACvF,SAAS;AAAA,IACT,UAAU;AAAA,EAAA,GAGR,EAAE,OAAAC,GAAO,KAAAC,EAAA,IAAQC,EAAA,GAEjBC,IAAkB,CAACX,MACjBS,MAAQ,QACDT,IAGPA,MAAS,SACF,UAEPA,MAAS,UACF,SAGJA;AAGX,2BACKY,EAAa,QAAb,EACG,UAAA,gBAAAC,EAACC,GAAA,EAAc,OAAAN,GAAc,KAAAC,GACzB,UAAA,gBAAAI;AAAA,IAACD,EAAa;AAAA,IAAb;AAAA,MACG,KAAAH;AAAA,MACA,OAAAV;AAAA,MACA,MAAMY,EAAgBX,CAAI;AAAA,MAC1B,kBAAkBO,EAA+BJ,CAAwB,IAAI;AAAA,MAC7E,iBAAiBE;AAAA,MACjB,iBAAAD;AAAA,MACA,WAAWW,EAAO;AAAA,MAElB,UAAA,gBAAAF;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAWE,EAAO;AAAA,UAKjB,GAAGpB,EAAa,CAAA,GAAI,EAAE,kBAAkB,IAAM;AAAA,UAC/C,uBAAqBO,IAA4B,SAAS;AAAA,UAC1D,gBAAa;AAAA,UAGT,UAAAc;AAAA,YACInB;AAAA,YACA,CAACoB,GAAOC,MAAU;AAOd,mBANgB,CACZD;AAAAA;AAAAA,gBAGAE,EAAuBF,CAAK,KAAKA,EAAM,QAAQ;AAAA,iBAEtBA,CAAK,GAAG;AACjC,sBAAMG,IAAaC,EAAqBJ,EAAM,KAAK,GAC7CK,IAAY1B,EAAa;AAAA,kBAC3B,MAAMwB;AAAA,kBACN,OAAAF;AAAA,kBACA,GAAID,EAAM,MAAM,EAAE,KAAKA,EAAM,IAAA,IAAQ,CAAA;AAAA,gBAAC,CACzC,GAEKM,IAAatB,KAAA,gBAAAA,EAAoB,SAASmB,EAAW;AAE3D,uBACI,gBAAAP;AAAA,kBAACW;AAAAA,kBAAA;AAAA,oBACG,WAAWT,EAAO;AAAA,oBAClB,oBAAkBrB,MAAqBwB;AAAA,oBACvC,iBAAeK;AAAA,oBAGf,cAAc,CAACjB,MAAU;AACrB,sBAAIgB,EAAU,WACVA,EAAU,QAAQhB,CAA2C;AAAA,oBAErE;AAAA,oBACC,GAAGgB;AAAA,oBACJ,iBAAeC;AAAA,oBAEd,UAAAN;AAAA,kBAAA;AAAA,kBAVIA,EAAM,MAAM;AAAA,gBAAA;AAAA,cAa7B;AAAA,YACJ;AAAA,YACAnB;AAAA,UAAA,EACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAEV;AAAA,EAAA,GAER,EAAA,CACJ;AAER;AACAL,EAAW,cAAc;"}

package/dist/fondue-components138.js

@@ -1,18 +1,34 @@
-import { useId as u, useMemo as f } from "react";
-import { useTranslation as D } from "./fondue-components42.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 { jsxs as c, Fragment as n, jsx as r } from "react/jsx-runtime";
+import { IconCheckMark as i, IconExclamationMarkTriangle as l } from "@frontify/fondue-icons";
+import { useTranslation as m } from "./fondue-components42.js";
+import s from "./fondue-components125.js";
+const f = ({ status: o, hasError: a, dataTestId: e }) => {
+  const { t } = m();
+  return /* @__PURE__ */ c(n, { children: [
+    o === "success" ? /* @__PURE__ */ r(
+      i,
+      {
+        size: 16,
+        className: s.iconSuccess,
+        "data-test-id": `${e}-success-icon`,
+        "aria-hidden": "true"
+      }
+    ) : null,
+    a ? /* @__PURE__ */ c(n, { children: [
+      /* @__PURE__ */ r(
+        l,
+        {
+          size: 16,
+          className: s.iconError,
+          "data-test-id": `${e}-error-icon`,
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ r("span", { className: s.srOnly, role: "alert", children: t("Select_error") })
+    ] }) : null
+  ] });
 };
 export {
-  g as useSelectionDescription
+  f as StatusIcons
 };
 //# sourceMappingURL=fondue-components138.js.map

package/dist/fondue-components138.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components138.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-components138.js","sources":["../src/components/Select/components/StatusIcons.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport { type ReactNode } from 'react';\n\nimport { useTranslation } from '#/hooks/useTranslation';\n\nimport styles from '../styles/select.module.scss';\n\ntype StatusIconsProps = {\n    /** The current status of the component. */\n    status: 'neutral' | 'success' | 'error';\n    /** Whether the component is in an error state (may differ from status when validation is involved). */\n    hasError: boolean;\n    /** The data-test-id prefix for the icons. */\n    dataTestId: string;\n};\n\nexport const StatusIcons = ({ status, hasError, dataTestId }: StatusIconsProps): ReactNode => {\n    const { t } = useTranslation();\n    return (\n        <>\n            {status === 'success' ? (\n                <IconCheckMark\n                    size={16}\n                    className={styles.iconSuccess}\n                    data-test-id={`${dataTestId}-success-icon`}\n                    aria-hidden=\"true\"\n                />\n            ) : null}\n            {hasError ? (\n                <>\n                    <IconExclamationMarkTriangle\n                        size={16}\n                        className={styles.iconError}\n                        data-test-id={`${dataTestId}-error-icon`}\n                        aria-hidden=\"true\"\n                    />\n                    <span className={styles.srOnly} role=\"alert\">\n                        {t('Select_error')}\n                    </span>\n                </>\n            ) : null}\n        </>\n    );\n};\n"],"names":["StatusIcons","status","hasError","dataTestId","useTranslation","jsxs","Fragment","jsx","IconCheckMark","styles","IconExclamationMarkTriangle"],"mappings":";;;;AAkBO,MAAMA,IAAc,CAAC,EAAE,QAAAC,GAAQ,UAAAC,GAAU,YAAAC,QAA8C;AAC1F,QAAM,EAAE,EAAA,IAAMC,EAAA;AACd,SACI,gBAAAC,EAAAC,GAAA,EACK,UAAA;AAAA,IAAAL,MAAW,YACR,gBAAAM;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,MAAM;AAAA,QACN,WAAWC,EAAO;AAAA,QAClB,gBAAc,GAAGN,CAAU;AAAA,QAC3B,eAAY;AAAA,MAAA;AAAA,IAAA,IAEhB;AAAA,IACHD,IACG,gBAAAG,EAAAC,GAAA,EACI,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACG;AAAA,QAAA;AAAA,UACG,MAAM;AAAA,UACN,WAAWD,EAAO;AAAA,UAClB,gBAAc,GAAGN,CAAU;AAAA,UAC3B,eAAY;AAAA,QAAA;AAAA,MAAA;AAAA,MAEhB,gBAAAI,EAAC,UAAK,WAAWE,EAAO,QAAQ,MAAK,SAChC,UAAA,EAAE,cAAc,EAAA,CACrB;AAAA,IAAA,EAAA,CACJ,IACA;AAAA,EAAA,GACR;AAER;"}

package/dist/fondue-components139.js

@@ -1,10 +1,173 @@
-import { jsx as r } from "react/jsx-runtime";
-import { Slot as e } from "@radix-ui/react-slot";
-import a from "./fondue-components127.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 { computed as U, untracked as ue, batch as X, effect as le, signal as fe } from "./fondue-components142.js";
+import { Signal as Ee } from "./fondue-components142.js";
+var _e = Object.create, G = Object.defineProperty, he = Object.defineProperties, pe = Object.getOwnPropertyDescriptor, ve = Object.getOwnPropertyDescriptors, Y = Object.getOwnPropertySymbols, de = Object.prototype.hasOwnProperty, ge = Object.prototype.propertyIsEnumerable, Oe = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), O = (e) => {
+  throw TypeError(e);
+}, A = (e, t, r) => t in e ? G(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, ye = (e, t) => {
+  for (var r in t || (t = {}))
+    de.call(t, r) && A(e, r, t[r]);
+  if (Y)
+    for (var r of Y(t))
+      ge.call(t, r) && A(e, r, t[r]);
+  return e;
+}, we = (e, t) => he(e, ve(t)), Z = (e, t) => G(e, "name", { value: t, configurable: !0 }), Pe = (e) => {
+  var t;
+  return [, , , _e((t = void 0) != null ? t : null)];
+}, x = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], P = (e) => e !== void 0 && typeof e != "function" ? O("Function expected") : e, Se = (e, t, r, i, n) => ({ kind: x[e], name: t, metadata: i, addInitializer: (a) => r._ ? O("Already initialized") : n.push(P(a || null)) }), ee = (e, t) => A(t, Oe("metadata"), e[3]), d = (e, t, r, i) => {
+  for (var n = 0, a = e[t >> 1], p = a && a.length; n < p; n++) t & 1 ? a[n].call(r) : i = a[n].call(r, i);
+  return i;
+}, y = (e, t, r, i, n, a) => {
+  var p, l, L, w, m, s = t & 7, j = !!(t & 8), h = !!(t & 16), D = s > 3 ? e.length + 1 : s ? j ? 1 : 2 : 0, Q = x[s + 5], R = s > 3 && (e[D - 1] = []), ce = e[D] || (e[D] = []), _ = s && (!h && !j && (n = n.prototype), s < 5 && (s > 3 || !h) && pe(s < 4 ? n : { get [r]() {
+    return f(this, a);
+  }, set [r](u) {
+    return v(this, a, u);
+  } }, r));
+  s ? h && s < 4 && Z(a, (s > 2 ? "set " : s > 1 ? "get " : "") + r) : Z(n, r);
+  for (var M = i.length - 1; M >= 0; M--)
+    w = Se(s, r, L = {}, e[3], ce), s && (w.static = j, w.private = h, m = w.access = { has: h ? (u) => ke(n, u) : (u) => r in u }, s ^ 3 && (m.get = h ? (u) => (s ^ 1 ? f : me)(u, n, s ^ 4 ? a : _.get) : (u) => u[r]), s > 2 && (m.set = h ? (u, V) => v(u, n, V, s ^ 4 ? a : _.set) : (u, V) => u[r] = V)), l = (0, i[M])(s ? s < 4 ? h ? a : _[Q] : s > 4 ? void 0 : { get: _.get, set: _.set } : n, w), L._ = 1, s ^ 4 || l === void 0 ? P(l) && (s > 4 ? R.unshift(l) : s ? h ? a = l : _[Q] = l : n = l) : typeof l != "object" || l === null ? O("Object expected") : (P(p = l.get) && (_.get = p), P(p = l.set) && (_.set = p), P(p = l.init) && R.unshift(p));
+  return s || ee(e, n), _ && G(n, r, _), h ? s ^ 4 ? a : _ : n;
+}, N = (e, t, r) => t.has(e) || O("Cannot " + r), ke = (e, t) => Object(t) !== t ? O('Cannot use the "in" operator on this value') : e.has(t), f = (e, t, r) => (N(e, t, "read from private field"), r ? r.call(e) : t.get(e)), S = (e, t, r) => t.has(e) ? O("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, r), v = (e, t, r, i) => (N(e, t, "write to private field"), i ? i.call(e, r) : t.set(e, r), r), me = (e, t, r) => (N(e, t, "access private method"), r);
+function je(e, t) {
+  if (t) {
+    let r;
+    return U(() => {
+      const i = e();
+      return i && r && t(r, i) ? r : (r = i, i);
+    });
+  }
+  return U(e);
+}
+function $(e, t) {
+  if (Object.is(e, t))
+    return !0;
+  if (e === null || t === null) return !1;
+  if (typeof e == "function" && typeof t == "function")
+    return e === t;
+  if (e instanceof Set && t instanceof Set) {
+    if (e.size !== t.size)
+      return !1;
+    for (const r of e)
+      if (!t.has(r))
+        return !1;
+    return !0;
+  }
+  if (Array.isArray(e))
+    return !Array.isArray(t) || e.length !== t.length ? !1 : !e.some(
+      (i, n) => !$(i, t[n])
+    );
+  if (typeof e == "object" && typeof t == "object") {
+    const r = Object.keys(e), i = Object.keys(t);
+    return r.length !== i.length ? !1 : !r.some(
+      (a) => !$(e[a], t[a])
+    );
+  }
+  return !1;
+}
+function W({ get: e }, t) {
+  return {
+    init(r) {
+      return fe(r);
+    },
+    get() {
+      return e.call(this).value;
+    },
+    set(r) {
+      const i = e.call(this);
+      i.peek() !== r && (i.value = r);
+    }
+  };
+}
+function Me(e, t) {
+  const r = /* @__PURE__ */ new WeakMap();
+  return function() {
+    let i = r.get(this);
+    return i || (i = je(e.bind(this)), r.set(this, i)), i.value;
+  };
+}
+function b(e = !0) {
+  return function(t, r) {
+    r.addInitializer(function() {
+      const i = r.kind === "field" ? this : r.static ? this : Object.getPrototypeOf(this), n = Object.getOwnPropertyDescriptor(i, r.name);
+      n && Object.defineProperty(i, r.name, we(ye({}, n), { enumerable: e }));
+    });
+  };
+}
+function Ve(...e) {
+  const t = e.map((r) => le(r));
+  return () => t.forEach((r) => r());
+}
+var te, re, ie, se, ne, ae, c, T, z, C, q, o, B, E, oe, F, J, I, H, K;
+ae = [W], ne = [W], se = [W], ie = [b()], re = [b()], te = [b()];
+var k = class {
+  constructor(e, t = Object.is) {
+    this.defaultValue = e, this.equals = t, d(c, 5, this), S(this, o), S(this, T, d(c, 8, this)), d(c, 11, this), S(this, B, d(c, 12, this)), d(c, 15, this), S(this, J, d(c, 16, this)), d(c, 19, this), this.reset = this.reset.bind(this), this.reset();
+  }
+  get current() {
+    return f(this, o, H);
+  }
+  get initial() {
+    return f(this, o, C);
+  }
+  get previous() {
+    return f(this, o, oe);
+  }
+  /** Set the current value */
+  set current(e) {
+    const t = ue(() => f(this, o, H));
+    e && t && this.equals(t, e) || X(() => {
+      f(this, o, C) || v(this, o, e, q), v(this, o, t, F), v(this, o, e, K);
+    });
+  }
+  /** Reset the state to the initial value */
+  reset(e = this.defaultValue) {
+    X(() => {
+      v(this, o, void 0, F), v(this, o, e, q), v(this, o, e, K);
+    });
+  }
+};
+c = Pe();
+T = /* @__PURE__ */ new WeakMap();
+o = /* @__PURE__ */ new WeakSet();
+B = /* @__PURE__ */ new WeakMap();
+J = /* @__PURE__ */ new WeakMap();
+z = y(c, 20, "#initial", ae, o, T), C = z.get, q = z.set;
+E = y(c, 20, "#previous", ne, o, B), oe = E.get, F = E.set;
+I = y(c, 20, "#current", se, o, J), H = I.get, K = I.set;
+y(c, 2, "current", ie, k);
+y(c, 2, "initial", re, k);
+y(c, 2, "previous", te, k);
+ee(c, k);
+var g, We = class {
+  constructor() {
+    S(this, g, /* @__PURE__ */ new WeakMap());
+  }
+  get(e, t) {
+    var r;
+    return e ? (r = f(this, g).get(e)) == null ? void 0 : r.get(t) : void 0;
+  }
+  set(e, t, r) {
+    var i;
+    if (e)
+      return f(this, g).has(e) || f(this, g).set(e, /* @__PURE__ */ new Map()), (i = f(this, g).get(e)) == null ? void 0 : i.set(t, r);
+  }
+  clear(e) {
+    var t;
+    return e ? (t = f(this, g).get(e)) == null ? void 0 : t.clear() : void 0;
+  }
+};
+g = /* @__PURE__ */ new WeakMap();
 export {
-  m as ClearButton
+  Ee as Signal,
+  k as ValueHistory,
+  We as WeakStore,
+  X as batch,
+  je as computed,
+  $ as deepEqual,
+  Me as derived,
+  le as effect,
+  Ve as effects,
+  b as enumerable,
+  W as reactive,
+  fe as signal,
+  ue as untracked
 };
 //# sourceMappingURL=fondue-components139.js.map