@spark-ui/components 13.1.4 → 13.2.0

package/dist/combobox/index.mjs

@@ -1,697 +1,449 @@
-import {
-  Popover
-} from "../chunk-GPJMLIHC.mjs";
-import {
-  IconButton
-} from "../chunk-DCXWGQVZ.mjs";
-import {
-  Icon
-} from "../chunk-UMUMFMFB.mjs";
-import "../chunk-2YM6GKWW.mjs";
-import {
-  Spinner
-} from "../chunk-GAK4SC2F.mjs";
-import {
-  VisuallyHidden
-} from "../chunk-KEGAAGJW.mjs";
-import "../chunk-6QCEPQ3U.mjs";
-
-// src/combobox/ComboboxContext.tsx
-import { useFormFieldControl } from "@spark-ui/components/form-field";
-import { useCombinedState } from "@spark-ui/hooks/use-combined-state";
-import { useCombobox as useCombobox3, useMultipleSelection } from "downshift";
-import {
-  createContext,
-  Fragment,
-  useContext,
-  useEffect,
-  useId,
-  useRef,
-  useState
-} from "react";
-
-// src/combobox/useCombobox/multipleSelectionReducer.ts
-import { useCombobox } from "downshift";
-
-// src/combobox/utils/index.ts
-import { isValidElement, Children } from "react";
-function getIndexByKey(map, targetKey) {
-  let index = 0;
-  for (const [key] of map.entries()) {
-    if (key === targetKey) {
-      return index;
-    }
-    index++;
+import { jsx as a, jsxs as _, Fragment as te } from "react/jsx-runtime";
+import { useFormFieldControl as oe } from "@spark-ui/components/form-field";
+import { useCombinedState as Le } from "@spark-ui/hooks/use-combined-state";
+import { useCombobox as g, useMultipleSelection as Ee } from "downshift";
+import { Children as B, isValidElement as z, createContext as ne, useRef as A, useState as T, useEffect as P, useId as q, Fragment as se, useContext as re, useLayoutEffect as ct } from "react";
+import { Popover as K } from "../popover/index.mjs";
+import { DeleteOutline as Ae } from "@spark-ui/icons/DeleteOutline";
+import { cx as f, cva as Me } from "class-variance-authority";
+import { I as $ } from "../Icon-Ck-dhfLd.mjs";
+import { useMergeRefs as W } from "@spark-ui/hooks/use-merge-refs";
+import { ArrowHorizontalDown as dt } from "@spark-ui/icons/ArrowHorizontalDown";
+import { I as ut } from "../IconButton-C62-axzv.mjs";
+import { V as mt } from "../VisuallyHidden-KH1biLx-.mjs";
+import { Check as pt } from "@spark-ui/icons/Check";
+import { S as bt } from "../Spinner-jF3-zoh_.mjs";
+function Fe(e, o) {
+  let t = 0;
+  for (const [n] of e.entries()) {
+    if (n === o)
+      return t;
+    t++;
   }
   return -1;
 }
-var getKeyAtIndex = (map, index) => {
-  let i = 0;
-  for (const key of map.keys()) {
-    if (i === index) return key;
-    i++;
+const ft = (e, o) => {
+  let t = 0;
+  for (const n of e.keys()) {
+    if (t === o) return n;
+    t++;
   }
-  return void 0;
-};
-var getElementByIndex = (map, index) => {
-  const key = getKeyAtIndex(map, index);
-  return key !== void 0 ? map.get(key) : void 0;
-};
-var getElementDisplayName = (element) => {
-  return element ? element.type.displayName : "";
-};
-var getOrderedItems = (children, result = []) => {
-  Children.forEach(children, (child) => {
-    if (!isValidElement(child)) return;
-    if (getElementDisplayName(child) === "Combobox.Item") {
-      const childProps = child.props;
-      result.push({
-        value: childProps.value,
-        disabled: !!childProps.disabled,
-        text: getItemText(childProps.children)
+}, It = (e, o) => {
+  const t = ft(e, o);
+  return t !== void 0 ? e.get(t) : void 0;
+}, J = (e) => e ? e.type.displayName : "", Be = (e, o = []) => (B.forEach(e, (t) => {
+  if (z(t)) {
+    if (J(t) === "Combobox.Item") {
+      const n = t.props;
+      o.push({
+        value: n.value,
+        disabled: !!n.disabled,
+        text: Ke(n.children)
       });
     }
-    if (child.props.children) {
-      getOrderedItems(child.props.children, result);
-    }
-  });
-  return result;
-};
-var findNestedItemText = (children) => {
-  if (!children) return "";
-  for (const child of Children.toArray(children)) {
-    if (isValidElement(child)) {
-      const childElement = child;
-      if (getElementDisplayName(childElement) === "Combobox.ItemText") {
-        return childElement.props.children;
-      }
-      const foundText = findNestedItemText(childElement.props.children);
-      if (foundText) return foundText;
-    }
+    t.props.children && Be(t.props.children, o);
   }
-  return "";
-};
-var getItemText = (children) => {
-  return typeof children === "string" ? children : findNestedItemText(children);
-};
-var getItemsFromChildren = (children) => {
-  const newMap = /* @__PURE__ */ new Map();
-  getOrderedItems(children).forEach((itemData) => {
-    newMap.set(itemData.value, itemData);
-  });
-  return newMap;
-};
-var hasChildComponent = (children, displayName) => {
-  return Children.toArray(children).some((child) => {
-    if (!isValidElement(child)) return false;
-    if (getElementDisplayName(child) === displayName) {
-      return true;
-    } else if (child.props.children) {
-      return hasChildComponent(child.props.children, displayName);
+}), o), ze = (e) => {
+  if (!e) return "";
+  for (const o of B.toArray(e))
+    if (z(o)) {
+      const t = o;
+      if (J(t) === "Combobox.ItemText")
+        return t.props.children;
+      const n = ze(t.props.children);
+      if (n) return n;
     }
-    return false;
-  });
-};
-var findElement = (children, value) => {
-  return Children.toArray(children).filter(isValidElement).find((child) => value === getElementDisplayName(child) || "");
-};
-
-// src/combobox/useCombobox/multipleSelectionReducer.ts
-var multipleSelectionReducer = ({
-  multiselect,
-  selectedItems,
-  allowCustomValue = false,
-  setSelectedItems,
-  triggerAreaRef,
-  items
-}) => {
-  const reducer = (_, { changes, type }) => {
-    const isFocusInsideTriggerArea = triggerAreaRef.current?.contains?.(document.activeElement);
-    switch (type) {
-      case useCombobox.stateChangeTypes.InputClick:
-        return {
-          ...changes,
-          isOpen: true
-          // keep menu opened
-        };
-      case useCombobox.stateChangeTypes.InputKeyDownEnter:
-      case useCombobox.stateChangeTypes.ItemClick: {
-        const newState = { ...changes };
-        if (changes.selectedItem != null) {
-          newState.inputValue = "";
-          newState.isOpen = true;
-          const highlightedIndex = getIndexByKey(items, changes.selectedItem.value);
-          newState.highlightedIndex = highlightedIndex;
-          const isAlreadySelected = multiselect.selectedItems.some(
-            (selectedItem) => selectedItem.value === changes.selectedItem?.value
-          );
-          const updatedItems = isAlreadySelected ? selectedItems.filter((item) => item.value !== changes.selectedItem?.value) : [...selectedItems, changes.selectedItem];
-          setSelectedItems(updatedItems);
-        }
-        return newState;
+  return "";
+}, Ke = (e) => typeof e == "string" ? e : ze(e), Re = (e) => {
+  const o = /* @__PURE__ */ new Map();
+  return Be(e).forEach((t) => {
+    o.set(t.value, t);
+  }), o;
+}, $e = (e, o) => B.toArray(e).some((t) => z(t) ? J(t) === o ? !0 : t.props.children ? $e(t.props.children, o) : !1 : !1), F = (e, o) => B.toArray(e).filter(z).find((t) => o === J(t) || ""), xt = ({
+  multiselect: e,
+  selectedItems: o,
+  allowCustomValue: t = !1,
+  setSelectedItems: n,
+  triggerAreaRef: l,
+  items: r
+}) => (i, { changes: s, type: m }) => {
+  const u = l.current?.contains?.(document.activeElement);
+  switch (m) {
+    case g.stateChangeTypes.InputClick:
+      return {
+        ...s,
+        isOpen: !0
+        // keep menu opened
+      };
+    case g.stateChangeTypes.InputKeyDownEnter:
+    case g.stateChangeTypes.ItemClick: {
+      const b = { ...s };
+      if (s.selectedItem != null) {
+        b.inputValue = "", b.isOpen = !0;
+        const O = Fe(r, s.selectedItem.value);
+        b.highlightedIndex = O;
+        const k = e.selectedItems.some(
+          (x) => x.value === s.selectedItem?.value
+        ) ? o.filter((x) => x.value !== s.selectedItem?.value) : [...o, s.selectedItem];
+        n(k);
       }
-      case useCombobox.stateChangeTypes.ToggleButtonClick:
-        return {
-          ...changes,
-          inputValue: allowCustomValue ? changes.inputValue : ""
-        };
-      case useCombobox.stateChangeTypes.InputChange:
-        return {
-          ...changes,
-          selectedItem: changes.highlightedIndex === -1 ? null : changes.selectedItem
-        };
-      case useCombobox.stateChangeTypes.InputBlur:
-        return {
-          ...changes,
-          inputValue: allowCustomValue ? changes.inputValue : "",
-          isOpen: isFocusInsideTriggerArea
-        };
-      default:
-        return changes;
-    }
-  };
-  return reducer;
-};
-
-// src/combobox/useCombobox/singleSelectionReducer.ts
-import { useCombobox as useCombobox2 } from "downshift";
-var singleSelectionReducer = ({
-  filteredItems,
-  allowCustomValue = false,
-  setSelectedItem
-}) => {
-  const reducer = (state, { changes, type }) => {
-    const exactMatch = filteredItems.find(
-      (item) => item.text.toLowerCase() === state.inputValue.toLowerCase()
-    );
-    switch (type) {
-      case useCombobox2.stateChangeTypes.InputKeyDownEscape:
-        if (!changes.selectedItem) {
-          setSelectedItem(null);
-        }
-        return changes;
-      case useCombobox2.stateChangeTypes.ItemClick:
-      case useCombobox2.stateChangeTypes.InputKeyDownEnter:
-        if (changes.selectedItem) {
-          setSelectedItem(changes.selectedItem);
-        }
-        return changes;
-      case useCombobox2.stateChangeTypes.InputClick:
-        return { ...changes, isOpen: true };
-      case useCombobox2.stateChangeTypes.ToggleButtonClick:
-      case useCombobox2.stateChangeTypes.InputBlur:
-        if (allowCustomValue) return changes;
-        if (state.inputValue === "") {
-          setSelectedItem(null);
-          return { ...changes, selectedItem: null };
-        }
-        if (exactMatch) {
-          setSelectedItem(exactMatch);
-          return { ...changes, selectedItem: exactMatch, inputValue: exactMatch.text };
-        }
-        if (state.selectedItem) {
-          return { ...changes, inputValue: state.selectedItem.text };
-        }
-        return { ...changes, inputValue: "" };
-      default:
-        return changes;
-    }
-  };
-  return reducer;
-};
-
-// src/combobox/ComboboxContext.tsx
-import { jsx } from "react/jsx-runtime";
-var ComboboxContext = createContext(null);
-var getFilteredItemsMap = (map, inputValue) => {
-  if (!inputValue) return map;
-  return new Map(
-    Array.from(map).filter(([_, { text }]) => text.toLowerCase().includes(inputValue.toLowerCase()))
+      return b;
+    }
+    case g.stateChangeTypes.ToggleButtonClick:
+      return {
+        ...s,
+        inputValue: t ? s.inputValue : ""
+      };
+    case g.stateChangeTypes.InputChange:
+      return {
+        ...s,
+        selectedItem: s.highlightedIndex === -1 ? null : s.selectedItem
+      };
+    case g.stateChangeTypes.InputBlur:
+      return {
+        ...s,
+        inputValue: t ? s.inputValue : "",
+        isOpen: u
+      };
+    default:
+      return s;
+  }
+}, yt = ({
+  filteredItems: e,
+  allowCustomValue: o = !1,
+  setSelectedItem: t
+}) => (l, { changes: r, type: c }) => {
+  const i = e.find(
+    (s) => s.text.toLowerCase() === l.inputValue.toLowerCase()
   );
-};
-var ID_PREFIX = ":combobox";
-var ComboboxProvider = ({
-  children,
-  state: stateProp,
-  allowCustomValue = false,
-  filtering = "auto",
-  disabled: disabledProp = false,
-  multiple = false,
-  readOnly: readOnlyProp = false,
-  wrap = true,
+  switch (c) {
+    case g.stateChangeTypes.InputKeyDownEscape:
+      return r.selectedItem || t(null), r;
+    case g.stateChangeTypes.ItemClick:
+    case g.stateChangeTypes.InputKeyDownEnter:
+      return r.selectedItem && t(r.selectedItem), r;
+    case g.stateChangeTypes.InputClick:
+      return { ...r, isOpen: !0 };
+    case g.stateChangeTypes.ToggleButtonClick:
+    case g.stateChangeTypes.InputBlur:
+      return o ? r : l.inputValue === "" ? (t(null), { ...r, selectedItem: null }) : i ? (t(i), { ...r, selectedItem: i, inputValue: i.text }) : l.selectedItem ? { ...r, inputValue: l.selectedItem.text } : { ...r, inputValue: "" };
+    default:
+      return r;
+  }
+}, We = ne(null), ee = (e, o) => o ? new Map(
+  Array.from(e).filter(([t, { text: n }]) => n.toLowerCase().includes(o.toLowerCase()))
+) : e, U = ":combobox", Ct = ({
+  children: e,
+  state: o,
+  allowCustomValue: t = !1,
+  filtering: n = "auto",
+  disabled: l = !1,
+  multiple: r = !1,
+  readOnly: c = !1,
+  wrap: i = !0,
   // Value
-  value: controlledValue,
-  defaultValue,
-  onValueChange,
+  value: s,
+  defaultValue: m,
+  onValueChange: u,
   // Open
-  open: controlledOpen,
-  defaultOpen,
-  onOpenChange,
-  isLoading
+  open: b,
+  defaultOpen: O,
+  onOpenChange: I,
+  isLoading: k
 }) => {
-  const isMounted = useRef(false);
-  const [inputValue, setInputValue] = useState("");
-  const [isTyping, setIsTyping] = useState(filtering === "strict");
-  const triggerAreaRef = useRef(null);
-  const innerInputRef = useRef(null);
-  const [onInputValueChange, setOnInputValueChange] = useState(null);
-  const [comboboxValue] = useCombinedState(controlledValue, defaultValue);
-  const shouldFilterItems = filtering === "strict" || filtering === "auto" && isTyping;
-  const [itemsMap, setItemsMap] = useState(getItemsFromChildren(children));
-  const [filteredItemsMap, setFilteredItems] = useState(
-    shouldFilterItems ? getFilteredItemsMap(itemsMap, inputValue) : itemsMap
-  );
-  const [selectedItem, setSelectedItem] = useState(
-    itemsMap.get(comboboxValue) || null
-  );
-  const [selectedItems, setSelectedItems] = useState(
-    comboboxValue ? [...itemsMap.values()].filter((item) => comboboxValue.includes(item.value)) : []
-  );
-  const onInternalSelectedItemChange = (item) => {
-    setIsTyping(false);
-    if (item?.value !== selectedItem?.value) {
-      setSelectedItem(item);
-      setTimeout(() => {
-        onValueChange?.(item?.value);
-      }, 0);
-    }
-  };
-  const onInternalSelectedItemsChange = (items) => {
-    setSelectedItems(items);
-    setTimeout(() => {
-      onValueChange?.(items.map((i) => i.value));
+  const x = A(!1), [w, N] = T(""), [E, h] = T(n === "strict"), R = A(null), V = A(null), [X, G] = T(null), [D] = Le(s, m), Q = n === "strict" || n === "auto" && E, [C, qe] = T(Re(e)), [H, ve] = T(
+    Q ? ee(C, w) : C
+  ), [we, Ne] = T(
+    C.get(D) || null
+  ), [Te, Pe] = T(
+    D ? [...C.values()].filter((d) => D.includes(d.value)) : []
+  ), Se = (d) => {
+    h(!1), d?.value !== we?.value && (Ne(d), setTimeout(() => {
+      u?.(d?.value);
+    }, 0));
+  }, Y = (d) => {
+    Pe(d), setTimeout(() => {
+      u?.(d.map((y) => y.value));
     }, 0);
   };
-  useEffect(() => {
-    if (!isMounted.current) {
-      isMounted.current = true;
+  P(() => {
+    if (!x.current) {
+      x.current = !0;
       return;
     }
-    if (multiple) {
-      const newSelectedItems = comboboxValue.reduce(
-        (accum, value) => {
-          const match = itemsMap.get(value);
-          return match ? [...accum, match] : accum;
+    if (r) {
+      const d = D.reduce(
+        (y, p) => {
+          const S = C.get(p);
+          return S ? [...y, S] : y;
         },
         []
       );
-      setSelectedItems(comboboxValue ? newSelectedItems : []);
-    } else {
-      setSelectedItem(itemsMap.get(comboboxValue) || null);
-    }
-  }, [multiple ? JSON.stringify(comboboxValue) : comboboxValue]);
-  const field = useFormFieldControl();
-  const internalFieldLabelID = `${ID_PREFIX}-label-${useId()}`;
-  const internalFieldID = `${ID_PREFIX}-field-${useId()}`;
-  const id = field.id || internalFieldID;
-  const labelId = field.labelId || internalFieldLabelID;
-  const state = field.state || stateProp;
-  const disabled = field.disabled ?? disabledProp;
-  const readOnly = field.readOnly ?? readOnlyProp;
-  const [hasPopover, setHasPopover] = useState(
-    hasChildComponent(children, "Combobox.Popover")
-  );
-  const [areSelectedItemsInTrigger, setAreSelectedItemsInTrigger] = useState(false);
-  const [lastInteractionType, setLastInteractionType] = useState("mouse");
-  useEffect(() => {
-    setFilteredItems(shouldFilterItems ? getFilteredItemsMap(itemsMap, inputValue) : itemsMap);
-  }, [inputValue, itemsMap]);
-  const multiselect = useMultipleSelection({
-    selectedItems,
-    stateReducer: (state2, { type, changes }) => {
-      const types = useMultipleSelection.stateChangeTypes;
-      switch (type) {
-        case types.SelectedItemKeyDownBackspace:
-        case types.SelectedItemKeyDownDelete: {
-          onInternalSelectedItemsChange(changes.selectedItems || []);
-          let activeIndex;
-          if (type === types.SelectedItemKeyDownDelete) {
-            const isLastItem = state2?.activeIndex === changes.selectedItems?.length;
-            activeIndex = isLastItem ? -1 : state2.activeIndex;
-          } else {
-            const hasItemBefore = (changes?.activeIndex || 0) - 1 >= 0;
-            activeIndex = hasItemBefore ? state2.activeIndex - 1 : changes?.activeIndex;
-          }
-          return {
-            ...changes,
-            activeIndex
+      Pe(D ? d : []);
+    } else
+      Ne(C.get(D) || null);
+  }, [r ? JSON.stringify(D) : D]);
+  const M = oe(), Ue = `${U}-label-${q()}`, Je = `${U}-field-${q()}`, Oe = M.id || Je, Xe = M.labelId || Ue, Qe = M.state || o, Ye = M.disabled ?? l, Ze = M.readOnly ?? c, [ke, et] = T(
+    $e(e, "Combobox.Popover")
+  ), [tt, ot] = T(!1), [nt, st] = T("mouse");
+  P(() => {
+    ve(Q ? ee(C, w) : C);
+  }, [w, C]);
+  const Ve = Ee({
+    selectedItems: Te,
+    stateReducer: (d, { type: y, changes: p }) => {
+      const S = Ee.stateChangeTypes;
+      switch (y) {
+        case S.SelectedItemKeyDownBackspace:
+        case S.SelectedItemKeyDownDelete: {
+          Y(p.selectedItems || []);
+          let L;
+          return y === S.SelectedItemKeyDownDelete ? L = d?.activeIndex === p.selectedItems?.length ? -1 : d.activeIndex : L = (p?.activeIndex || 0) - 1 >= 0 ? d.activeIndex - 1 : p?.activeIndex, {
+            ...p,
+            activeIndex: L
           };
         }
-        case types.SelectedItemClick:
-          if (innerInputRef.current) {
-            innerInputRef.current.focus();
-          }
-          return {
-            ...changes,
+        case S.SelectedItemClick:
+          return V.current && V.current.focus(), {
+            ...p,
             activeIndex: -1
             // the focus will remain on the input
           };
-        case types.FunctionRemoveSelectedItem:
+        case S.FunctionRemoveSelectedItem:
           return {
-            ...changes,
+            ...p,
             activeIndex: -1
             // the focus will remain on the input
           };
-        case types.DropdownKeyDownNavigationPrevious:
-          downshift.closeMenu();
-          return changes;
+        case S.DropdownKeyDownNavigationPrevious:
+          return Z.closeMenu(), p;
         default:
-          return changes;
+          return p;
       }
     }
-  });
-  const filteredItems = Array.from(filteredItemsMap.values());
-  useEffect(() => {
-    onInputValueChange?.(inputValue || "");
-  }, [inputValue]);
-  const downshift = useCombobox3({
-    inputId: id,
-    items: filteredItems,
-    selectedItem: multiple ? void 0 : selectedItem,
-    id,
-    labelId,
+  }), De = Array.from(H.values());
+  P(() => {
+    X?.(w || "");
+  }, [w]);
+  const Z = g({
+    inputId: Oe,
+    items: De,
+    selectedItem: r ? void 0 : we,
+    id: Oe,
+    labelId: Xe,
     // Input
-    inputValue,
-    onInputValueChange: ({ inputValue: newInputValue }) => {
-      setInputValue(newInputValue);
-      if (shouldFilterItems) {
-        const filtered = getFilteredItemsMap(itemsMap, newInputValue || "");
-        setFilteredItems(filtered);
+    inputValue: w,
+    onInputValueChange: ({ inputValue: d }) => {
+      if (N(d), Q) {
+        const y = ee(C, d || "");
+        ve(y);
       }
     },
     // Open
-    initialIsOpen: defaultOpen,
-    ...controlledOpen != null && { isOpen: controlledOpen },
-    onIsOpenChange: (changes) => {
-      if (changes.isOpen != null) {
-        onOpenChange?.(changes.isOpen);
-      }
+    initialIsOpen: O,
+    ...b != null && { isOpen: b },
+    onIsOpenChange: (d) => {
+      d.isOpen != null && I?.(d.isOpen);
     },
     // Custom Spark item object parsing
-    itemToString: (item) => {
-      return item?.text;
-    },
-    isItemDisabled: (item) => {
-      const isFilteredOut = !!inputValue && !filteredItems.some((filteredItem) => {
-        return item.value === filteredItem.value;
-      });
-      return item.disabled || isFilteredOut;
+    itemToString: (d) => d?.text,
+    isItemDisabled: (d) => {
+      const y = !!w && !De.some((p) => d.value === p.value);
+      return d.disabled || y;
     },
     // Main reducer
-    stateReducer: multiple ? multipleSelectionReducer({
-      multiselect,
-      selectedItems,
-      allowCustomValue,
-      setSelectedItems: onInternalSelectedItemsChange,
-      triggerAreaRef,
-      items: itemsMap
-    }) : singleSelectionReducer({
-      allowCustomValue,
-      setSelectedItem: onInternalSelectedItemChange,
-      filteredItems: [...filteredItemsMap.values()]
+    stateReducer: r ? xt({
+      multiselect: Ve,
+      selectedItems: Te,
+      allowCustomValue: t,
+      setSelectedItems: Y,
+      triggerAreaRef: R,
+      items: C
+    }) : yt({
+      allowCustomValue: t,
+      setSelectedItem: Se,
+      filteredItems: [...H.values()]
     }),
     /**
      * Downshift default behaviour is to scroll into view the highlighted item when the dropdown opens. This behaviour is not stable and scrolls the dropdown to the bottom of the screen.
      */
-    scrollIntoView: (node) => {
-      if (node) {
-        node.scrollIntoView({ block: "nearest" });
-      }
-      return void 0;
+    scrollIntoView: (d) => {
+      d && d.scrollIntoView({ block: "nearest" });
     }
   });
-  useEffect(() => {
-    const newMap = getItemsFromChildren(children);
-    const previousItems = [...itemsMap.values()];
-    const newItems = [...newMap.values()];
-    const hasItemsChanges = previousItems.length !== newItems.length || previousItems.some((item, index) => {
-      const hasUpdatedValue = item.value !== newItems[index]?.value;
-      const hasUpdatedText = item.text !== newItems[index]?.text;
-      return hasUpdatedValue || hasUpdatedText;
-    });
-    if (hasItemsChanges) {
-      setItemsMap(newMap);
-    }
-  }, [children]);
-  const [WrapperComponent, wrapperProps] = hasPopover ? [Popover, { open: true }] : [Fragment, {}];
-  return /* @__PURE__ */ jsx(
-    ComboboxContext.Provider,
+  P(() => {
+    const d = Re(e), y = [...C.values()], p = [...d.values()];
+    (y.length !== p.length || y.some((L, j) => {
+      const at = L.value !== p[j]?.value, it = L.text !== p[j]?.text;
+      return at || it;
+    })) && qe(d);
+  }, [e]);
+  const [rt, lt] = ke ? [K, { open: !0 }] : [se, {}];
+  return /* @__PURE__ */ a(
+    We.Provider,
     {
       value: {
         // Data
-        itemsMap,
-        filteredItemsMap,
-        highlightedItem: getElementByIndex(filteredItemsMap, downshift.highlightedIndex),
+        itemsMap: C,
+        filteredItemsMap: H,
+        highlightedItem: It(H, Z.highlightedIndex),
         // State
-        multiple,
-        disabled,
-        readOnly,
-        areSelectedItemsInTrigger,
-        setAreSelectedItemsInTrigger,
-        hasPopover,
-        setHasPopover,
-        state,
-        lastInteractionType,
-        setLastInteractionType,
-        wrap,
+        multiple: r,
+        disabled: Ye,
+        readOnly: Ze,
+        areSelectedItemsInTrigger: tt,
+        setAreSelectedItemsInTrigger: ot,
+        hasPopover: ke,
+        setHasPopover: et,
+        state: Qe,
+        lastInteractionType: nt,
+        setLastInteractionType: st,
+        wrap: i,
         // Refs
-        innerInputRef,
-        triggerAreaRef,
+        innerInputRef: V,
+        triggerAreaRef: R,
         // Downshift state
-        ...downshift,
-        ...multiselect,
-        setInputValue,
-        selectItem: onInternalSelectedItemChange,
-        setSelectedItems: onInternalSelectedItemsChange,
-        isLoading,
-        setOnInputValueChange,
-        isTyping,
-        setIsTyping
+        ...Z,
+        ...Ve,
+        setInputValue: N,
+        selectItem: Se,
+        setSelectedItems: Y,
+        isLoading: k,
+        setOnInputValueChange: G,
+        isTyping: E,
+        setIsTyping: h
       },
-      children: /* @__PURE__ */ jsx(WrapperComponent, { ...wrapperProps, children })
+      children: /* @__PURE__ */ a(rt, { ...lt, children: e })
     }
   );
-};
-var useComboboxContext = () => {
-  const context = useContext(ComboboxContext);
-  if (!context) {
+}, v = () => {
+  const e = re(We);
+  if (!e)
     throw Error("useComboboxContext must be used within a Combobox provider");
-  }
-  return context;
-};
-
-// src/combobox/Combobox.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var Combobox = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx2(ComboboxProvider, { ...props, children });
-};
-Combobox.displayName = "Combobox";
-
-// src/combobox/ComboboxClearButton.tsx
-import { DeleteOutline } from "@spark-ui/icons/DeleteOutline";
-import { cx } from "class-variance-authority";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var ClearButton = ({
-  className,
-  tabIndex = -1,
-  onClick,
-  ref,
-  ...others
+  return e;
+}, Ge = ({ children: e, ...o }) => /* @__PURE__ */ a(Ct, { ...o, children: e });
+Ge.displayName = "Combobox";
+const le = ({
+  className: e,
+  tabIndex: o = -1,
+  onClick: t,
+  ref: n,
+  ...l
 }) => {
-  const ctx = useComboboxContext();
-  const handleClick = (event) => {
-    event.stopPropagation();
-    if (ctx.multiple) {
-      ctx.setSelectedItems([]);
-    } else {
-      ctx.selectItem(null);
-    }
-    ctx.setInputValue("");
-    if (ctx.innerInputRef.current) {
-      ctx.innerInputRef.current.focus();
-    }
-    if (onClick) {
-      onClick(event);
-    }
+  const r = v(), c = (i) => {
+    i.stopPropagation(), r.multiple ? r.setSelectedItems([]) : r.selectItem(null), r.setInputValue(""), r.innerInputRef.current && r.innerInputRef.current.focus(), t && t(i);
   };
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ a(
     "button",
     {
-      ref,
-      className: cx(className, "h-sz-44 text-neutral hover:text-neutral-hovered"),
-      tabIndex,
-      onClick: handleClick,
+      ref: n,
+      className: f(e, "h-sz-44 text-neutral hover:text-neutral-hovered"),
+      tabIndex: o,
+      onClick: c,
       type: "button",
-      ...others,
-      children: /* @__PURE__ */ jsx3(Icon, { size: "sm", children: /* @__PURE__ */ jsx3(DeleteOutline, {}) })
+      ...l,
+      children: /* @__PURE__ */ a($, { size: "sm", children: /* @__PURE__ */ a(Ae, {}) })
     }
   );
 };
-ClearButton.displayName = "Combobox.ClearButton";
-
-// src/combobox/ComboboxDisclosure.tsx
-import { useMergeRefs } from "@spark-ui/hooks/use-merge-refs";
-import { ArrowHorizontalDown } from "@spark-ui/icons/ArrowHorizontalDown";
-import { cx as cx2 } from "class-variance-authority";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var Disclosure = ({
-  className,
-  closedLabel,
-  openedLabel,
-  intent = "neutral",
-  design = "ghost",
-  size = "sm",
-  ref: forwardedRef,
-  ...props
+le.displayName = "Combobox.ClearButton";
+const ae = ({
+  className: e,
+  closedLabel: o,
+  openedLabel: t,
+  intent: n = "neutral",
+  design: l = "ghost",
+  size: r = "sm",
+  ref: c,
+  ...i
 }) => {
-  const ctx = useComboboxContext();
-  const { ref: downshiftRef, ...downshiftDisclosureProps } = ctx.getToggleButtonProps({
-    disabled: ctx.disabled || ctx.readOnly,
-    onClick: (event) => {
-      event.stopPropagation();
-    }
-  });
-  const isExpanded = downshiftDisclosureProps["aria-expanded"];
-  const ref = useMergeRefs(forwardedRef, downshiftRef);
-  return /* @__PURE__ */ jsx4(
-    IconButton,
+  const s = v(), { ref: m, ...u } = s.getToggleButtonProps({
+    disabled: s.disabled || s.readOnly,
+    onClick: (I) => {
+      I.stopPropagation();
+    }
+  }), b = u["aria-expanded"], O = W(c, m);
+  return /* @__PURE__ */ a(
+    ut,
     {
-      ref,
-      className: cx2(className, "ml-sm mt-[calc((44px-32px)/2)]"),
-      intent,
-      design,
-      size,
-      ...downshiftDisclosureProps,
-      ...props,
-      "aria-label": isExpanded ? openedLabel : closedLabel,
-      disabled: ctx.disabled,
-      children: /* @__PURE__ */ jsx4(
-        Icon,
+      ref: O,
+      className: f(e, "ml-sm mt-[calc((44px-32px)/2)]"),
+      intent: n,
+      design: l,
+      size: r,
+      ...u,
+      ...i,
+      "aria-label": b ? t : o,
+      disabled: s.disabled,
+      children: /* @__PURE__ */ a(
+        $,
         {
-          className: cx2("shrink-0", "rotate-0 transition duration-100 ease-in", {
-            "rotate-180": isExpanded
+          className: f("shrink-0", "rotate-0 transition duration-100 ease-in", {
+            "rotate-180": b
           }),
           size: "sm",
-          children: /* @__PURE__ */ jsx4(ArrowHorizontalDown, {})
+          children: /* @__PURE__ */ a(dt, {})
         }
       )
     }
   );
 };
-Disclosure.displayName = "Combobox.Disclosure";
-
-// src/combobox/ComboboxEmpty.tsx
-import { cx as cx3 } from "class-variance-authority";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var Empty = ({ className, children, ref: forwardedRef }) => {
-  const ctx = useComboboxContext();
-  const hasNoItemVisible = ctx.filteredItemsMap.size === 0;
-  return hasNoItemVisible ? /* @__PURE__ */ jsx5(
-    "div",
-    {
-      ref: forwardedRef,
-      className: cx3("px-lg py-md text-body-1 text-on-surface/dim-1", className),
-      children
-    }
-  ) : null;
-};
-Empty.displayName = "Combobox.Empty";
-
-// src/combobox/ComboboxGroup.tsx
-import { cx as cx4 } from "class-variance-authority";
-import { Children as Children2, isValidElement as isValidElement2 } from "react";
-
-// src/combobox/ComboboxItemsGroupContext.tsx
-import { createContext as createContext2, useContext as useContext2, useId as useId2 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var ComboboxGroupContext = createContext2(null);
-var ComboboxGroupProvider = ({ children }) => {
-  const groupLabelId = `${ID_PREFIX}-group-label-${useId2()}`;
-  return /* @__PURE__ */ jsx6(ComboboxGroupContext.Provider, { value: { groupLabelId }, children });
-};
-var useComboboxGroupContext = () => {
-  const context = useContext2(ComboboxGroupContext);
-  if (!context) {
-    throw Error("useComboboxGroupContext must be used within a ComboboxGroup provider");
+ae.displayName = "Combobox.Disclosure";
+const ie = ({ className: e, children: o, ref: t }) => v().filteredItemsMap.size === 0 ? /* @__PURE__ */ a(
+  "div",
+  {
+    ref: t,
+    className: f("px-lg py-md text-body-1 text-on-surface/dim-1", e),
+    children: o
   }
-  return context;
-};
-
-// src/combobox/ComboboxGroup.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
-var Group = ({ children, ref: forwardedRef, ...props }) => {
-  return /* @__PURE__ */ jsx7(ComboboxGroupProvider, { children: /* @__PURE__ */ jsx7(GroupContent, { ref: forwardedRef, ...props, children }) });
-};
-var GroupContent = ({ children, className, ref: forwardedRef }) => {
-  const ctx = useComboboxContext();
-  const groupCtx = useComboboxGroupContext();
-  const hasVisibleOptions = Children2.toArray(children).some((child) => {
-    return isValidElement2(child) && ctx.filteredItemsMap.get(child.props.value);
-  });
-  return hasVisibleOptions ? /* @__PURE__ */ jsx7(
+) : null;
+ie.displayName = "Combobox.Empty";
+const He = ne(null), gt = ({ children: e }) => {
+  const o = `${U}-group-label-${q()}`;
+  return /* @__PURE__ */ a(He.Provider, { value: { groupLabelId: o }, children: e });
+}, je = () => {
+  const e = re(He);
+  if (!e)
+    throw Error("useComboboxGroupContext must be used within a ComboboxGroup provider");
+  return e;
+}, ce = ({ children: e, ref: o, ...t }) => /* @__PURE__ */ a(gt, { children: /* @__PURE__ */ a(ht, { ref: o, ...t, children: e }) }), ht = ({ children: e, className: o, ref: t }) => {
+  const n = v(), l = je();
+  return B.toArray(e).some((c) => z(c) && n.filteredItemsMap.get(c.props.value)) ? /* @__PURE__ */ a(
     "div",
     {
-      ref: forwardedRef,
+      ref: t,
       role: "group",
-      "aria-labelledby": groupCtx.groupLabelId,
-      className: cx4(className),
-      children
+      "aria-labelledby": l.groupLabelId,
+      className: f(o),
+      children: e
     }
   ) : null;
 };
-Group.displayName = "Combobox.Group";
-
-// src/combobox/ComboboxInput.tsx
-import { useFormFieldControl as useFormFieldControl2 } from "@spark-ui/components/form-field";
-import { useCombinedState as useCombinedState2 } from "@spark-ui/hooks/use-combined-state";
-import { useMergeRefs as useMergeRefs2 } from "@spark-ui/hooks/use-merge-refs";
-import { cx as cx5 } from "class-variance-authority";
-import {
-  Fragment as Fragment2,
-  useEffect as useEffect2
-} from "react";
-import { Fragment as Fragment3, jsx as jsx8, jsxs } from "react/jsx-runtime";
-var Input = ({
-  "aria-label": ariaLabel,
-  className,
-  placeholder,
-  value,
-  defaultValue,
-  onValueChange,
-  ref: forwardedRef,
-  ...props
+ce.displayName = "Combobox.Group";
+const de = ({
+  "aria-label": e,
+  className: o,
+  placeholder: t,
+  value: n,
+  defaultValue: l,
+  onValueChange: r,
+  ref: c,
+  ...i
 }) => {
-  const ctx = useComboboxContext();
-  const field = useFormFieldControl2();
-  const [inputValue] = useCombinedState2(value, defaultValue);
-  const { isInvalid, description } = field;
-  useEffect2(() => {
-    if (inputValue != null) {
-      ctx.setInputValue(inputValue);
-    }
-  }, [inputValue]);
-  useEffect2(() => {
-    if (onValueChange) {
-      ctx.setOnInputValueChange(() => onValueChange);
-    }
-    if (!ctx.multiple && ctx.selectedItem) {
-      ctx.setInputValue(ctx.selectedItem.text);
-    }
+  const s = v(), m = oe(), [u] = Le(n, l), { isInvalid: b, description: O } = m;
+  P(() => {
+    u != null && s.setInputValue(u);
+  }, [u]), P(() => {
+    r && s.setOnInputValueChange(() => r), !s.multiple && s.selectedItem && s.setInputValue(s.selectedItem.text);
   }, []);
-  const PopoverTrigger = ctx.hasPopover ? Popover.Trigger : Fragment2;
-  const popoverTriggerProps = ctx.hasPopover ? {
-    asChild: true,
+  const I = s.hasPopover ? K.Trigger : se, k = s.hasPopover ? {
+    asChild: !0,
     type: void 0
-  } : {};
-  const multiselectInputProps = ctx.getDropdownProps();
-  const inputRef = useMergeRefs2(forwardedRef, ctx.innerInputRef, multiselectInputProps.ref);
-  const downshiftInputProps = ctx.getInputProps({
-    disabled: ctx.disabled || ctx.readOnly,
-    ...multiselectInputProps,
-    onKeyDown: (event) => {
-      multiselectInputProps.onKeyDown?.(event);
-      ctx.setLastInteractionType("keyboard");
-      ctx.setIsTyping(true);
+  } : {}, x = s.getDropdownProps(), w = W(c, s.innerInputRef, x.ref), N = s.getInputProps({
+    disabled: s.disabled || s.readOnly,
+    ...x,
+    onKeyDown: (V) => {
+      x.onKeyDown?.(V), s.setLastInteractionType("keyboard"), s.setIsTyping(!0);
     },
     /**
      *
@@ -699,99 +451,73 @@ var Input = ({
      * - without this, the input cursor is moved to the end after every change.
      * @see https://github.com/downshift-js/downshift/issues/1108#issuecomment-674180157
      */
-    onChange: (e) => {
-      ctx.setInputValue(e.target.value);
+    onChange: (V) => {
+      s.setInputValue(V.target.value);
     },
-    ref: inputRef
-  });
-  const hasPlaceholder = ctx.multiple ? !ctx.areSelectedItemsInTrigger || ctx.selectedItems.length === 0 : ctx.selectedItem === null;
-  function mergeHandlers(handlerA, handlerB) {
-    return (event) => {
-      handlerA?.(event);
-      handlerB?.(event);
+    ref: w
+  }), E = s.multiple ? !s.areSelectedItemsInTrigger || s.selectedItems.length === 0 : s.selectedItem === null;
+  function h(V, X) {
+    return (G) => {
+      V?.(G), X?.(G);
     };
   }
-  const mergedEventProps = {
-    onBlur: mergeHandlers(props.onBlur, downshiftInputProps.onBlur),
-    onChange: mergeHandlers(props.onChange, downshiftInputProps.onChange),
-    onClick: mergeHandlers(props.onClick, downshiftInputProps.onClick),
-    onKeyDown: mergeHandlers(props.onKeyDown, downshiftInputProps.onKeyDown)
+  const R = {
+    onBlur: h(i.onBlur, N.onBlur),
+    onChange: h(i.onChange, N.onChange),
+    onClick: h(i.onClick, N.onClick),
+    onKeyDown: h(i.onKeyDown, N.onKeyDown)
   };
-  return /* @__PURE__ */ jsxs(Fragment3, { children: [
-    ariaLabel && /* @__PURE__ */ jsx8(VisuallyHidden, { children: /* @__PURE__ */ jsx8("label", { ...ctx.getLabelProps(), children: ariaLabel }) }),
-    /* @__PURE__ */ jsx8(PopoverTrigger, { ...popoverTriggerProps, children: /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ _(te, { children: [
+    e && /* @__PURE__ */ a(mt, { children: /* @__PURE__ */ a("label", { ...s.getLabelProps(), children: e }) }),
+    /* @__PURE__ */ a(I, { ...k, children: /* @__PURE__ */ a(
       "input",
       {
         "data-spark-component": "combobox-input",
         type: "text",
-        ...hasPlaceholder && { placeholder },
-        className: cx5(
+        ...E && { placeholder: t },
+        className: f(
           "max-w-full shrink-0 grow basis-[80px]",
           "h-sz-28 bg-surface px-sm text-body-1 text-ellipsis outline-hidden",
           "disabled:text-on-surface/dim-3 disabled:cursor-not-allowed disabled:bg-transparent",
           "read-only:text-on-surface read-only:cursor-default read-only:bg-transparent",
-          className
+          o
         ),
-        ...props,
-        ...downshiftInputProps,
-        ...mergedEventProps,
-        value: ctx.inputValue,
-        "aria-label": ariaLabel,
-        disabled: ctx.disabled,
-        readOnly: ctx.readOnly,
-        "aria-invalid": isInvalid,
-        "aria-describedby": description
+        ...i,
+        ...N,
+        ...R,
+        value: s.inputValue,
+        "aria-label": e,
+        disabled: s.disabled,
+        readOnly: s.readOnly,
+        "aria-invalid": b,
+        "aria-describedby": O
       }
     ) })
   ] });
 };
-Input.displayName = "Combobox.Input";
-
-// src/combobox/ComboboxItem.tsx
-import { useMergeRefs as useMergeRefs3 } from "@spark-ui/hooks/use-merge-refs";
-import { cva, cx as cx6 } from "class-variance-authority";
-
-// src/combobox/ComboboxItemContext.tsx
-import {
-  createContext as createContext3,
-  useContext as useContext3,
-  useState as useState2
-} from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
-var ComboboxItemContext = createContext3(null);
-var ComboboxItemProvider = ({
-  value,
-  disabled = false,
-  children
+de.displayName = "Combobox.Input";
+const _e = ne(null), vt = ({
+  value: e,
+  disabled: o = !1,
+  children: t
 }) => {
-  const ctx = useComboboxContext();
-  const [textId, setTextId] = useState2(void 0);
-  const index = getIndexByKey(ctx.filteredItemsMap, value);
-  const itemData = { disabled, value, text: getItemText(children) };
-  const isSelected = ctx.multiple ? ctx.selectedItems.some((selectedItem) => selectedItem.value === value) : ctx.selectedItem?.value === value;
-  return /* @__PURE__ */ jsx9(
-    ComboboxItemContext.Provider,
+  const n = v(), [l, r] = T(void 0), c = Fe(n.filteredItemsMap, e), i = { disabled: o, value: e, text: Ke(t) }, s = n.multiple ? n.selectedItems.some((m) => m.value === e) : n.selectedItem?.value === e;
+  return /* @__PURE__ */ a(
+    _e.Provider,
     {
-      value: { textId, setTextId, isSelected, itemData, index, disabled },
-      children
+      value: { textId: l, setTextId: r, isSelected: s, itemData: i, index: c, disabled: o },
+      children: t
     }
   );
-};
-var useComboboxItemContext = () => {
-  const context = useContext3(ComboboxItemContext);
-  if (!context) {
+}, ue = () => {
+  const e = re(_e);
+  if (!e)
     throw Error("useComboboxItemContext must be used within a ComboboxItem provider");
-  }
-  return context;
-};
-
-// src/combobox/ComboboxItem.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
-var Item = ({ children, ref: forwardedRef, ...props }) => {
-  const { value, disabled } = props;
-  return /* @__PURE__ */ jsx10(ComboboxItemProvider, { value, disabled, children: /* @__PURE__ */ jsx10(ItemContent, { ref: forwardedRef, ...props, children }) });
-};
-var styles = cva("px-lg py-md text-body-1", {
+  return e;
+}, me = ({ children: e, ref: o, ...t }) => {
+  const { value: n, disabled: l } = t;
+  return /* @__PURE__ */ a(vt, { value: n, disabled: l, children: /* @__PURE__ */ a(Nt, { ref: o, ...t, children: e }) });
+}, wt = Me("px-lg py-md text-body-1", {
   variants: {
     selected: {
       true: "font-bold"
@@ -810,295 +536,213 @@ var styles = cva("px-lg py-md text-body-1", {
   },
   compoundVariants: [
     {
-      highlighted: true,
+      highlighted: !0,
       interactionType: "mouse",
       class: "bg-surface-hovered"
     },
     {
-      highlighted: true,
+      highlighted: !0,
       interactionType: "keyboard",
       class: "u-outline"
     }
   ]
-});
-var ItemContent = ({
-  className,
-  disabled = false,
-  value,
-  children,
-  ref: forwardedRef,
-  ...rest
+}), Nt = ({
+  className: e,
+  disabled: o = !1,
+  value: t,
+  children: n,
+  ref: l,
+  ...r
 }) => {
-  const ctx = useComboboxContext();
-  const itemCtx = useComboboxItemContext();
-  const isVisible = !!ctx.filteredItemsMap.get(value);
-  const { ref: downshiftRef, ...downshiftItemProps } = ctx.getItemProps({
-    item: itemCtx.itemData,
-    index: itemCtx.index
-  });
-  const ref = useMergeRefs3(forwardedRef, downshiftRef);
-  if (!isVisible) return null;
-  return /* @__PURE__ */ jsx10(
+  const c = v(), i = ue(), s = !!c.filteredItemsMap.get(t), { ref: m, ...u } = c.getItemProps({
+    item: i.itemData,
+    index: i.index
+  }), b = W(l, m);
+  return s ? /* @__PURE__ */ a(
     "li",
     {
-      ref,
-      className: cx6(
-        styles({
-          selected: itemCtx.isSelected,
-          disabled,
-          highlighted: ctx.highlightedItem?.value === value,
-          interactionType: ctx.lastInteractionType,
-          className
+      ref: b,
+      className: f(
+        wt({
+          selected: i.isSelected,
+          disabled: o,
+          highlighted: c.highlightedItem?.value === t,
+          interactionType: c.lastInteractionType,
+          className: e
         })
       ),
-      ...downshiftItemProps,
-      ...rest,
-      "aria-selected": itemCtx.isSelected,
-      "aria-labelledby": itemCtx.textId,
-      children
+      ...u,
+      ...r,
+      "aria-selected": i.isSelected,
+      "aria-labelledby": i.textId,
+      children: n
     },
-    value
-  );
+    t
+  ) : null;
 };
-Item.displayName = "Combobox.Item";
-
-// src/combobox/ComboboxItemIndicator.tsx
-import { Check } from "@spark-ui/icons/Check";
-import { cx as cx7 } from "class-variance-authority";
-import { jsx as jsx11 } from "react/jsx-runtime";
-var ItemIndicator = ({
-  className,
-  children,
-  label,
-  ref: forwardedRef
+me.displayName = "Combobox.Item";
+const pe = ({
+  className: e,
+  children: o,
+  label: t,
+  ref: n
 }) => {
-  const { disabled, isSelected } = useComboboxItemContext();
-  const childElement = children || /* @__PURE__ */ jsx11(Icon, { size: "sm", children: /* @__PURE__ */ jsx11(Check, { "aria-label": label }) });
-  return /* @__PURE__ */ jsx11(
+  const { disabled: l, isSelected: r } = ue(), c = o || /* @__PURE__ */ a($, { size: "sm", children: /* @__PURE__ */ a(pt, { "aria-label": t }) });
+  return /* @__PURE__ */ a(
     "span",
     {
-      ref: forwardedRef,
-      className: cx7("min-h-sz-16 min-w-sz-16 flex", disabled && "opacity-dim-3", className),
-      children: isSelected && childElement
+      ref: n,
+      className: f("min-h-sz-16 min-w-sz-16 flex", l && "opacity-dim-3", e),
+      children: r && c
     }
   );
 };
-ItemIndicator.displayName = "Combobox.ItemIndicator";
-
-// src/combobox/ComboboxItems.tsx
-import { useMergeRefs as useMergeRefs4 } from "@spark-ui/hooks/use-merge-refs";
-import { cx as cx8 } from "class-variance-authority";
-import { useLayoutEffect, useRef as useRef2 } from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var Items = ({ children, className, ref: forwardedRef, ...props }) => {
-  const ctx = useComboboxContext();
-  const { ref: downshiftRef, ...downshiftMenuProps } = ctx.getMenuProps({
+pe.displayName = "Combobox.ItemIndicator";
+const be = ({ children: e, className: o, ref: t, ...n }) => {
+  const l = v(), { ref: r, ...c } = l.getMenuProps({
     onMouseMove: () => {
-      ctx.setLastInteractionType("mouse");
-    }
-  });
-  const innerRef = useRef2(null);
-  const ref = useMergeRefs4(forwardedRef, downshiftRef, innerRef);
-  const isOpen = ctx.hasPopover ? ctx.isOpen : true;
-  const isPointerEventsDisabled = ctx.hasPopover && !isOpen;
-  useLayoutEffect(() => {
-    if (innerRef.current?.parentElement) {
-      innerRef.current.parentElement.style.pointerEvents = isPointerEventsDisabled ? "none" : "";
-      innerRef.current.style.pointerEvents = isPointerEventsDisabled ? "none" : "";
+      l.setLastInteractionType("mouse");
     }
-  }, [isPointerEventsDisabled]);
-  return /* @__PURE__ */ jsx12(
+  }), i = A(null), s = W(t, r, i), m = l.hasPopover ? l.isOpen : !0, u = l.hasPopover && !m;
+  return ct(() => {
+    i.current?.parentElement && (i.current.parentElement.style.pointerEvents = u ? "none" : "", i.current.style.pointerEvents = u ? "none" : "");
+  }, [u]), /* @__PURE__ */ a(
     "ul",
     {
-      ref,
-      className: cx8(
-        className,
+      ref: s,
+      className: f(
+        o,
         "flex flex-col",
-        isOpen ? "block" : "pointer-events-none invisible opacity-0",
-        ctx.hasPopover && "p-lg",
-        ctx.isLoading && "items-center overflow-y-auto"
+        m ? "block" : "pointer-events-none invisible opacity-0",
+        l.hasPopover && "p-lg",
+        l.isLoading && "items-center overflow-y-auto"
       ),
-      ...props,
-      ...downshiftMenuProps,
-      "aria-busy": ctx.isLoading,
+      ...n,
+      ...c,
+      "aria-busy": l.isLoading,
       "data-spark-component": "combobox-items",
-      children: ctx.isLoading ? /* @__PURE__ */ jsx12(Spinner, { size: "sm" }) : children
+      children: l.isLoading ? /* @__PURE__ */ a(bt, { size: "sm" }) : e
     }
   );
 };
-Items.displayName = "Combobox.Items";
-
-// src/combobox/ComboboxItemText.tsx
-import { cx as cx9 } from "class-variance-authority";
-import { useEffect as useEffect3, useId as useId3 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
-var ItemText = ({ children, className, ref: forwardedRef }) => {
-  const id = `${ID_PREFIX}-item-text-${useId3()}`;
-  const { setTextId } = useComboboxItemContext();
-  useEffect3(() => {
-    setTextId(id);
-    return () => setTextId(void 0);
-  });
-  return /* @__PURE__ */ jsx13("span", { id, className: cx9("inline", className), ref: forwardedRef, children });
+be.displayName = "Combobox.Items";
+const fe = ({ children: e, className: o, ref: t }) => {
+  const n = `${U}-item-text-${q()}`, { setTextId: l } = ue();
+  return P(() => (l(n), () => l(void 0))), /* @__PURE__ */ a("span", { id: n, className: f("inline", o), ref: t, children: e });
 };
-ItemText.displayName = "Combobox.ItemText";
-
-// src/combobox/ComboboxLabel.tsx
-import { cx as cx10 } from "class-variance-authority";
-import { jsx as jsx14 } from "react/jsx-runtime";
-var Label = ({ children, className, ref: forwardedRef }) => {
-  const groupCtx = useComboboxGroupContext();
-  return /* @__PURE__ */ jsx14(
+fe.displayName = "Combobox.ItemText";
+const Ie = ({ children: e, className: o, ref: t }) => {
+  const n = je();
+  return /* @__PURE__ */ a(
     "div",
     {
-      ref: forwardedRef,
-      id: groupCtx.groupLabelId,
-      className: cx10("px-md py-sm text-body-2 text-neutral italic", className),
-      children
+      ref: t,
+      id: n.groupLabelId,
+      className: f("px-md py-sm text-body-2 text-neutral italic", o),
+      children: e
     }
   );
 };
-Label.displayName = "Combobox.Label";
-
-// src/combobox/ComboboxLeadingIcon.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
-var LeadingIcon = ({ children }) => {
-  return /* @__PURE__ */ jsx15(Icon, { size: "sm", className: "h-sz-44 shrink-0", children });
-};
-LeadingIcon.displayName = "Combobox.LeadingIcon";
-
-// src/combobox/ComboboxPopover.tsx
-import { cx as cx11 } from "class-variance-authority";
-import { useEffect as useEffect4 } from "react";
-import { jsx as jsx16 } from "react/jsx-runtime";
-var Popover2 = ({
-  children,
-  matchTriggerWidth = true,
-  sideOffset = 4,
-  className,
-  ref: forwardedRef,
-  ...props
+Ie.displayName = "Combobox.Label";
+const xe = ({ children: e }) => /* @__PURE__ */ a($, { size: "sm", className: "h-sz-44 shrink-0", children: e });
+xe.displayName = "Combobox.LeadingIcon";
+const ye = ({
+  children: e,
+  matchTriggerWidth: o = !0,
+  sideOffset: t = 4,
+  className: n,
+  ref: l,
+  ...r
 }) => {
-  const ctx = useComboboxContext();
-  useEffect4(() => {
-    ctx.setHasPopover(true);
-    return () => ctx.setHasPopover(false);
-  }, []);
-  return /* @__PURE__ */ jsx16(
-    Popover.Content,
+  const c = v();
+  return P(() => (c.setHasPopover(!0), () => c.setHasPopover(!1)), []), /* @__PURE__ */ a(
+    K.Content,
     {
-      ref: forwardedRef,
-      inset: true,
-      asChild: true,
-      matchTriggerWidth,
-      className: cx11("z-dropdown! relative", className),
-      sideOffset,
-      onOpenAutoFocus: (e) => {
-        e.preventDefault();
+      ref: l,
+      inset: !0,
+      asChild: !0,
+      matchTriggerWidth: o,
+      className: f("z-dropdown! relative", n),
+      sideOffset: t,
+      onOpenAutoFocus: (i) => {
+        i.preventDefault();
       },
-      ...props,
+      ...r,
       "data-spark-component": "combobox-popover",
-      children
+      children: e
     }
   );
 };
-Popover2.displayName = "Combobox.Popover";
-
-// src/combobox/ComboboxPortal.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
-var Portal = ({ children, ...rest }) => /* @__PURE__ */ jsx17(Popover.Portal, { ...rest, children });
-Portal.displayName = "Combobox.Portal";
-
-// src/combobox/ComboboxSelectedItems.tsx
-import { DeleteOutline as DeleteOutline2 } from "@spark-ui/icons/DeleteOutline";
-import { cx as cx12 } from "class-variance-authority";
-import { Fragment as Fragment4, jsx as jsx18, jsxs as jsxs2 } from "react/jsx-runtime";
-var SelectedItem = ({ item: selectedItem, index }) => {
-  const ctx = useComboboxContext();
-  const isCleanable = !ctx.disabled && !ctx.readOnly;
-  const handleFocus = (e) => {
-    const element = e.target;
-    if (ctx.lastInteractionType === "keyboard") {
-      element.scrollIntoView({
-        behavior: "smooth",
-        block: "nearest",
-        inline: "nearest"
-      });
-    }
-  };
-  const { disabled, ...selectedItemProps } = ctx.getSelectedItemProps({
-    disabled: ctx.disabled || ctx.readOnly,
-    selectedItem,
-    index
+ye.displayName = "Combobox.Popover";
+const Ce = ({ children: e, ...o }) => /* @__PURE__ */ a(K.Portal, { ...o, children: e });
+Ce.displayName = "Combobox.Portal";
+const Tt = ({ item: e, index: o }) => {
+  const t = v(), n = !t.disabled && !t.readOnly, l = (s) => {
+    const m = s.target;
+    t.lastInteractionType === "keyboard" && m.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+      inline: "nearest"
+    });
+  }, { disabled: r, ...c } = t.getSelectedItemProps({
+    disabled: t.disabled || t.readOnly,
+    selectedItem: e,
+    index: o
   });
-  const Element = disabled ? "button" : "span";
-  return /* @__PURE__ */ jsxs2(
-    Element,
+  return /* @__PURE__ */ _(
+    r ? "button" : "span",
     {
       role: "presentation",
       "data-spark-component": "combobox-selected-item",
-      className: cx12(
+      className: f(
         "h-sz-28 bg-neutral-container flex items-center rounded-md align-middle",
         "text-body-2 text-on-neutral-container",
         "disabled:opacity-dim-3 disabled:cursor-not-allowed",
         "focus-visible:u-outline-inset outline-hidden",
-        { "px-md": !isCleanable, "pl-md": isCleanable }
+        { "px-md": !n, "pl-md": n }
       ),
-      ...selectedItemProps,
+      ...c,
       tabIndex: -1,
-      ...disabled && { disabled: true },
-      onFocus: handleFocus,
+      ...r && { disabled: !0 },
+      onFocus: l,
       children: [
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ a(
           "span",
           {
-            className: cx12("line-clamp-1 overflow-x-hidden leading-normal break-all text-ellipsis", {
-              "w-max": !ctx.wrap
+            className: f("line-clamp-1 overflow-x-hidden leading-normal break-all text-ellipsis", {
+              "w-max": !t.wrap
             }),
-            children: selectedItem.text
+            children: e.text
           }
         ),
-        ctx.disabled,
-        isCleanable && /* @__PURE__ */ jsx18(
+        t.disabled,
+        n && /* @__PURE__ */ a(
           "button",
           {
             type: "button",
             tabIndex: -1,
-            "aria-hidden": true,
+            "aria-hidden": !0,
             className: "px-md h-full cursor-pointer",
-            onClick: (e) => {
-              e.stopPropagation();
-              const updatedSelectedItems = ctx.selectedItems.filter(
-                (item) => item.value !== selectedItem.value
+            onClick: (s) => {
+              s.stopPropagation();
+              const m = t.selectedItems.filter(
+                (u) => u.value !== e.value
               );
-              ctx.setSelectedItems(updatedSelectedItems);
-              if (ctx.innerInputRef.current) {
-                ctx.innerInputRef.current.focus({ preventScroll: true });
-              }
+              t.setSelectedItems(m), t.innerInputRef.current && t.innerInputRef.current.focus({ preventScroll: !0 });
             },
-            children: /* @__PURE__ */ jsx18(Icon, { size: "sm", children: /* @__PURE__ */ jsx18(DeleteOutline2, {}) })
+            children: /* @__PURE__ */ a($, { size: "sm", children: /* @__PURE__ */ a(Ae, {}) })
           }
         )
       ]
     },
-    `selected-item-${index}`
+    `selected-item-${o}`
   );
+}, ge = () => {
+  const e = v();
+  return e.multiple && e.selectedItems.length ? /* @__PURE__ */ a(te, { children: e.selectedItems.map((o, t) => /* @__PURE__ */ a(Tt, { item: o, index: t }, o.value)) }) : null;
 };
-var SelectedItems = () => {
-  const ctx = useComboboxContext();
-  return ctx.multiple && ctx.selectedItems.length ? /* @__PURE__ */ jsx18(Fragment4, { children: ctx.selectedItems.map((item, index) => /* @__PURE__ */ jsx18(SelectedItem, { item, index }, item.value)) }) : null;
-};
-SelectedItems.displayName = "Combobox.SelectedItems";
-
-// src/combobox/ComboboxTrigger.tsx
-import { useFormFieldControl as useFormFieldControl3 } from "@spark-ui/components/form-field";
-import { useMergeRefs as useMergeRefs5 } from "@spark-ui/hooks/use-merge-refs";
-import { cx as cx13 } from "class-variance-authority";
-import { Fragment as Fragment5, useEffect as useEffect6, useRef as useRef4 } from "react";
-
-// src/combobox/ComboboxTrigger.styles.tsx
-import { cva as cva2 } from "class-variance-authority";
-var styles2 = cva2(
+ge.displayName = "Combobox.SelectedItems";
+const Pt = Me(
   [
     "flex items-start gap-md min-h-sz-44 text-body-1",
     "h-fit rounded-lg px-lg",
@@ -1126,158 +770,120 @@ var styles2 = cva2(
     },
     compoundVariants: [
       {
-        disabled: false,
+        disabled: !1,
         state: void 0,
         class: "default:hover:ring-outline-high"
       },
       {
-        disabled: false,
-        readOnly: false,
+        disabled: !1,
+        readOnly: !1,
         class: "bg-surface text-on-surface cursor-text"
       }
     ],
     defaultVariants: {
       state: void 0,
-      disabled: false,
-      readOnly: false
+      disabled: !1,
+      readOnly: !1
     }
   }
-);
-
-// src/combobox/utils/useWidthIncreaseCallback.ts
-import { useEffect as useEffect5, useRef as useRef3 } from "react";
-var useWidthIncreaseCallback = (elementRef, callback) => {
-  const prevWidthRef = useRef3(null);
-  useEffect5(() => {
-    const checkWidthIncrease = () => {
-      const currentWidth = elementRef.current?.scrollWidth || null;
-      if (prevWidthRef.current && currentWidth && currentWidth > prevWidthRef.current) {
-        callback();
-      }
-      prevWidthRef.current = currentWidth;
-      requestAnimationFrame(checkWidthIncrease);
-    };
-    const interval = requestAnimationFrame(checkWidthIncrease);
-    return () => cancelAnimationFrame(interval);
-  }, [elementRef]);
-};
-
-// src/combobox/ComboboxTrigger.tsx
-import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs3 } from "react/jsx-runtime";
-var Trigger = ({ className, children, ref: forwardedRef }) => {
-  const ctx = useComboboxContext();
-  const field = useFormFieldControl3();
-  const leadingIcon = findElement(children, "Combobox.LeadingIcon");
-  const selectedItems = findElement(children, "Combobox.SelectedItems");
-  const input = findElement(children, "Combobox.Input");
-  const clearButton = findElement(children, "Combobox.ClearButton");
-  const disclosure = findElement(children, "Combobox.Disclosure");
-  const [PopoverAnchor, popoverAnchorProps] = ctx.hasPopover ? [Popover.Anchor, { asChild: true, type: void 0 }] : [Fragment5, {}];
-  const ref = useMergeRefs5(forwardedRef, ctx.triggerAreaRef);
-  const scrollableAreaRef = useRef4(null);
-  const disabled = field.disabled || ctx.disabled;
-  const readOnly = field.readOnly || ctx.readOnly;
-  const hasClearButton = !!clearButton && !disabled && !readOnly;
-  const scrollToRight = () => {
-    if (scrollableAreaRef.current && !ctx.wrap) {
-      const { scrollWidth, clientWidth } = scrollableAreaRef.current;
-      scrollableAreaRef.current.scrollLeft = scrollWidth - clientWidth;
+), St = (e, o) => {
+  const t = A(null);
+  P(() => {
+    const n = () => {
+      const r = e.current?.scrollWidth || null;
+      t.current && r && r > t.current && o(), t.current = r, requestAnimationFrame(n);
+    }, l = requestAnimationFrame(n);
+    return () => cancelAnimationFrame(l);
+  }, [e]);
+}, he = ({ className: e, children: o, ref: t }) => {
+  const n = v(), l = oe(), r = F(o, "Combobox.LeadingIcon"), c = F(o, "Combobox.SelectedItems"), i = F(o, "Combobox.Input"), s = F(o, "Combobox.ClearButton"), m = F(o, "Combobox.Disclosure"), [u, b] = n.hasPopover ? [K.Anchor, { asChild: !0, type: void 0 }] : [se, {}], O = W(t, n.triggerAreaRef), I = A(null), k = l.disabled || n.disabled, x = l.readOnly || n.readOnly, w = !!s && !k && !x, N = () => {
+    if (I.current && !n.wrap) {
+      const { scrollWidth: h, clientWidth: R } = I.current;
+      I.current.scrollLeft = h - R;
     }
   };
-  useWidthIncreaseCallback(scrollableAreaRef, scrollToRight);
-  const hasSelectedItems = !!selectedItems;
-  useEffect6(() => {
-    ctx.setAreSelectedItemsInTrigger(hasSelectedItems);
-  }, [hasSelectedItems]);
-  useEffect6(() => {
-    const resizeObserver = new ResizeObserver(scrollToRight);
-    if (scrollableAreaRef.current) {
-      resizeObserver.observe(scrollableAreaRef.current);
-    }
-    return () => {
-      resizeObserver.disconnect();
+  St(I, N);
+  const E = !!c;
+  return P(() => {
+    n.setAreSelectedItemsInTrigger(E);
+  }, [E]), P(() => {
+    const h = new ResizeObserver(N);
+    return I.current && h.observe(I.current), () => {
+      h.disconnect();
     };
-  }, []);
-  return /* @__PURE__ */ jsx19(Fragment6, { children: /* @__PURE__ */ jsx19(PopoverAnchor, { ...popoverAnchorProps, children: /* @__PURE__ */ jsxs3(
+  }, []), /* @__PURE__ */ a(te, { children: /* @__PURE__ */ a(u, { ...b, children: /* @__PURE__ */ _(
     "div",
     {
-      ref,
-      className: styles2({
-        className,
-        state: ctx.state,
-        disabled,
-        readOnly,
-        allowWrap: ctx.wrap
+      ref: O,
+      className: Pt({
+        className: e,
+        state: n.state,
+        disabled: k,
+        readOnly: x,
+        allowWrap: n.wrap
       }),
       onClick: () => {
-        if (!ctx.isOpen && !disabled && !readOnly) {
-          ctx.openMenu();
-          if (ctx.innerInputRef.current) {
-            ctx.innerInputRef.current.focus();
-          }
-        }
+        !n.isOpen && !k && !x && (n.openMenu(), n.innerInputRef.current && n.innerInputRef.current.focus());
       },
       children: [
-        leadingIcon,
-        /* @__PURE__ */ jsxs3(
+        r,
+        /* @__PURE__ */ _(
           "div",
           {
-            ref: scrollableAreaRef,
-            className: cx13(
+            ref: I,
+            className: f(
               "min-w-none gap-sm py-md inline-flex grow items-start",
-              ctx.wrap ? "flex-wrap" : "u-no-scrollbar overflow-x-auto p-[2px]"
+              n.wrap ? "flex-wrap" : "u-no-scrollbar overflow-x-auto p-[2px]"
             ),
             children: [
-              selectedItems,
-              input
+              c,
+              i
             ]
           }
         ),
-        hasClearButton && clearButton,
-        disclosure
+        w && s,
+        m
       ]
     }
   ) }) });
 };
-Trigger.displayName = "Combobox.Trigger";
-
-// src/combobox/index.ts
-var Combobox2 = Object.assign(Combobox, {
-  Group,
-  Item,
-  Items,
-  ItemText,
-  ItemIndicator,
-  Label,
-  Popover: Popover2,
-  Trigger,
-  LeadingIcon,
-  Empty,
-  Input,
-  Disclosure,
-  SelectedItems,
-  ClearButton,
-  Portal
+he.displayName = "Combobox.Trigger";
+const Ot = Object.assign(Ge, {
+  Group: ce,
+  Item: me,
+  Items: be,
+  ItemText: fe,
+  ItemIndicator: pe,
+  Label: Ie,
+  Popover: ye,
+  Trigger: he,
+  LeadingIcon: xe,
+  Empty: ie,
+  Input: de,
+  Disclosure: ae,
+  SelectedItems: ge,
+  ClearButton: le,
+  Portal: Ce
 });
-Combobox2.displayName = "Combobox";
-Group.displayName = "Combobox.Group";
-Items.displayName = "Combobox.Items";
-Item.displayName = "Combobox.Item";
-ItemText.displayName = "Combobox.ItemText";
-ItemIndicator.displayName = "Combobox.ItemIndicator";
-Label.displayName = "Combobox.Label";
-Popover2.displayName = "Combobox.Popover";
-Trigger.displayName = "Combobox.Trigger";
-LeadingIcon.displayName = "Combobox.LeadingIcon";
-Empty.displayName = "Combobox.Empty";
-Input.displayName = "Combobox.Input";
-Disclosure.displayName = "Combobox.Disclosure";
-SelectedItems.displayName = "Combobox.SelectedItems";
-ClearButton.displayName = "Combobox.ClearButton";
-Portal.displayName = "Combobox.Portal";
+Ot.displayName = "Combobox";
+ce.displayName = "Combobox.Group";
+be.displayName = "Combobox.Items";
+me.displayName = "Combobox.Item";
+fe.displayName = "Combobox.ItemText";
+pe.displayName = "Combobox.ItemIndicator";
+Ie.displayName = "Combobox.Label";
+ye.displayName = "Combobox.Popover";
+he.displayName = "Combobox.Trigger";
+xe.displayName = "Combobox.LeadingIcon";
+ie.displayName = "Combobox.Empty";
+de.displayName = "Combobox.Input";
+ae.displayName = "Combobox.Disclosure";
+ge.displayName = "Combobox.SelectedItems";
+le.displayName = "Combobox.ClearButton";
+Ce.displayName = "Combobox.Portal";
 export {
-  Combobox2 as Combobox,
-  ComboboxProvider,
-  useComboboxContext
+  Ot as Combobox,
+  Ct as ComboboxProvider,
+  v as useComboboxContext
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map