@spark-ui/components 17.2.3 → 17.2.4-beta.0

package/dist/combobox/index.mjs

@@ -1,889 +1,734 @@
-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-BO327oHU.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-DdB3Pq13.mjs";
-import { V as mt } from "../VisuallyHidden-DjlV0-CW.mjs";
-import { Check as pt } from "@spark-ui/icons/Check";
-import { S as bt } from "../Spinner-Co3AjkQV.mjs";
-function Fe(e, o) {
-  let t = 0;
-  for (const [n] of e.entries()) {
-    if (n === o)
-      return t;
-    t++;
-  }
-  return -1;
+import { VisuallyHidden as e } from "../visually-hidden/index.mjs";
+import { t } from "../icon-D05Uqh8_.mjs";
+import { t as n } from "../spinner-DULLiM6a.mjs";
+import { t as r } from "../icon-button-6p3O7NIm.mjs";
+import { t as i } from "../popover-CxZAQmw6.mjs";
+import { cva as a, cx as o } from "class-variance-authority";
+import { Children as s, Fragment as c, createContext as l, isValidElement as u, useContext as d, useEffect as f, useId as p, useLayoutEffect as m, useRef as h, useState as g } from "react";
+import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+import { ArrowHorizontalDown as b } from "@spark-ui/icons/ArrowHorizontalDown";
+import { useMergeRefs as x } from "@spark-ui/hooks/use-merge-refs";
+import { useFormFieldControl as ee } from "@spark-ui/components/form-field";
+import { Check as S } from "@spark-ui/icons/Check";
+import { useCombinedState as C } from "@spark-ui/hooks/use-combined-state";
+import { useCombobox as w, useMultipleSelection as T } from "downshift";
+import { DeleteOutline as E } from "@spark-ui/icons/DeleteOutline";
+//#region src/combobox/utils/index.ts
+function D(e, t) {
+	let n = 0;
+	for (let [r] of e.entries()) {
+		if (r === t) return n;
+		n++;
+	}
+	return -1;
 }
-const ft = (e, o) => {
-  let t = 0;
-  for (const n of e.keys()) {
-    if (t === o) return n;
-    t++;
-  }
-}, 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)
-      });
-    }
-    t.props.children && Be(t.props.children, o);
-  }
-}), 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 "";
-}, 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);
-      }
-      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()
-  );
-  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: s,
-  defaultValue: m,
-  onValueChange: u,
-  // Open
-  open: b,
-  defaultOpen: O,
-  onOpenChange: I,
-  isLoading: k
-}) => {
-  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);
-  };
-  P(() => {
-    if (!x.current) {
-      x.current = !0;
-      return;
-    }
-    if (r) {
-      const d = D.reduce(
-        (y, p) => {
-          const S = C.get(p);
-          return S ? [...y, S] : y;
-        },
-        []
-      );
-      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 S.SelectedItemClick:
-          return V.current && V.current.focus(), {
-            ...p,
-            activeIndex: -1
-            // the focus will remain on the input
-          };
-        case S.FunctionRemoveSelectedItem:
-          return {
-            ...p,
-            activeIndex: -1
-            // the focus will remain on the input
-          };
-        case S.DropdownKeyDownNavigationPrevious:
-          return Z.closeMenu(), p;
-        default:
-          return p;
-      }
-    }
-  }), 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: w,
-    onInputValueChange: ({ inputValue: d }) => {
-      if (N(d), Q) {
-        const y = ee(C, d || "");
-        ve(y);
-      }
-    },
-    // Open
-    initialIsOpen: O,
-    ...b != null && { isOpen: b },
-    onIsOpenChange: (d) => {
-      d.isOpen != null && I?.(d.isOpen);
-    },
-    // Custom Spark item object parsing
-    itemToString: (d) => d?.text,
-    isItemDisabled: (d) => {
-      const y = !!w && !De.some((p) => d.value === p.value);
-      return d.disabled || y;
-    },
-    // Main reducer
-    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: (d) => {
-      d && d.scrollIntoView({ block: "nearest" });
-    }
-  });
-  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: C,
-        filteredItemsMap: H,
-        highlightedItem: It(H, Z.highlightedIndex),
-        // State
-        multiple: r,
-        disabled: Ye,
-        readOnly: Ze,
-        areSelectedItemsInTrigger: tt,
-        setAreSelectedItemsInTrigger: ot,
-        hasPopover: ke,
-        setHasPopover: et,
-        state: Qe,
-        lastInteractionType: nt,
-        setLastInteractionType: st,
-        wrap: i,
-        // Refs
-        innerInputRef: V,
-        triggerAreaRef: R,
-        // Downshift state
-        ...Z,
-        ...Ve,
-        setInputValue: N,
-        selectItem: Se,
-        setSelectedItems: Y,
-        isLoading: k,
-        setOnInputValueChange: G,
-        isTyping: E,
-        setIsTyping: h
-      },
-      children: /* @__PURE__ */ a(rt, { ...lt, children: e })
-    }
-  );
-}, v = () => {
-  const e = re(We);
-  if (!e)
-    throw Error("useComboboxContext must be used within a Combobox provider");
-  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 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__ */ a(
-    "button",
-    {
-      ref: n,
-      className: f(e, "h-sz-44 text-neutral hover:text-neutral-hovered"),
-      tabIndex: o,
-      onClick: c,
-      type: "button",
-      ...l,
-      children: /* @__PURE__ */ a($, { size: "sm", children: /* @__PURE__ */ a(Ae, {}) })
-    }
-  );
-};
-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 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: 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: f("shrink-0", "rotate-0 transition duration-100 ease-in", {
-            "rotate-180": b
-          }),
-          size: "sm",
-          children: /* @__PURE__ */ a(dt, {})
-        }
-      )
-    }
-  );
+var O = (e, t) => {
+	let n = 0;
+	for (let r of e.keys()) {
+		if (n === t) return r;
+		n++;
+	}
+}, k = (e, t) => {
+	let n = O(e, t);
+	return n === void 0 ? void 0 : e.get(n);
+}, A = (e) => e ? e.type.displayName : "", j = (e, t = []) => (s.forEach(e, (e) => {
+	if (u(e)) {
+		if (A(e) === "Combobox.Item") {
+			let n = e.props;
+			t.push({
+				value: n.value,
+				disabled: !!n.disabled,
+				text: te(n.children)
+			});
+		}
+		e.props.children && j(e.props.children, t);
+	}
+}), t), M = (e) => {
+	if (!e) return "";
+	for (let t of s.toArray(e)) if (u(t)) {
+		let e = t;
+		if (A(e) === "Combobox.ItemText") return e.props.children;
+		let n = M(e.props.children);
+		if (n) return n;
+	}
+	return "";
+}, te = (e) => typeof e == "string" ? e : M(e), ne = (e) => {
+	let t = /* @__PURE__ */ new Map();
+	return j(e).forEach((e) => {
+		t.set(e.value, e);
+	}), t;
+}, re = (e, t) => s.toArray(e).some((e) => u(e) ? A(e) === t ? !0 : e.props.children ? re(e.props.children, t) : !1 : !1), N = (e, t) => s.toArray(e).filter(u).find((e) => t === A(e) || ""), ie = ({ multiselect: e, selectedItems: t, allowCustomValue: n = !1, setSelectedItems: r, triggerAreaRef: i, items: a }) => (o, { changes: s, type: c }) => {
+	let l = i.current?.contains?.(document.activeElement);
+	switch (c) {
+		case w.stateChangeTypes.InputClick: return {
+			...s,
+			isOpen: !0
+		};
+		case w.stateChangeTypes.InputKeyDownEnter:
+		case w.stateChangeTypes.ItemClick: {
+			let n = { ...s };
+			return s.selectedItem != null && (n.inputValue = "", n.isOpen = !0, n.highlightedIndex = D(a, s.selectedItem.value), r(e.selectedItems.some((e) => e.value === s.selectedItem?.value) ? t.filter((e) => e.value !== s.selectedItem?.value) : [...t, s.selectedItem])), n;
+		}
+		case w.stateChangeTypes.ToggleButtonClick: return {
+			...s,
+			inputValue: n ? s.inputValue : ""
+		};
+		case w.stateChangeTypes.InputChange: return {
+			...s,
+			selectedItem: s.highlightedIndex === -1 ? null : s.selectedItem
+		};
+		case w.stateChangeTypes.InputBlur: return {
+			...s,
+			inputValue: n ? s.inputValue : "",
+			isOpen: l
+		};
+		default: return s;
+	}
+}, ae = ({ filteredItems: e, allowCustomValue: t = !1, setSelectedItem: n }) => (r, { changes: i, type: a }) => {
+	let o = e.find((e) => e.text.toLowerCase() === r.inputValue.toLowerCase());
+	switch (a) {
+		case w.stateChangeTypes.InputKeyDownEscape: return i.selectedItem || n(null), i;
+		case w.stateChangeTypes.ItemClick:
+		case w.stateChangeTypes.InputKeyDownEnter: return i.selectedItem && n(i.selectedItem), i;
+		case w.stateChangeTypes.InputClick: return {
+			...i,
+			isOpen: !0
+		};
+		case w.stateChangeTypes.ToggleButtonClick:
+		case w.stateChangeTypes.InputBlur: return t ? i : r.inputValue === "" ? (n(null), {
+			...i,
+			selectedItem: null
+		}) : o ? (n(o), {
+			...i,
+			selectedItem: o,
+			inputValue: o.text
+		}) : r.selectedItem ? {
+			...i,
+			inputValue: r.selectedItem.text
+		} : {
+			...i,
+			inputValue: ""
+		};
+		default: return i;
+	}
+}, oe = l(null), se = (e, t) => t ? new Map(Array.from(e).filter(([e, { text: n }]) => n.toLowerCase().includes(t.toLowerCase()))) : e, ce = ":combobox", P = ({ children: e, state: t, allowCustomValue: n = !1, filtering: r = "auto", disabled: a = !1, multiple: o = !1, readOnly: s = !1, wrap: l = !0, value: u, defaultValue: d, onValueChange: m, open: _, defaultOpen: y, onOpenChange: b, isLoading: x }) => {
+	let S = h(!1), [E, D] = g(""), [O, A] = g(r === "strict"), j = h(null), M = h(null), [te, N] = g(null), [P] = C(u, d), F = r === "strict" || r === "auto" && O, [I, L] = g(ne(e)), [R, z] = g(F ? se(I, E) : I), [B, le] = g(I.get(P) || null), [V, H] = g(P ? [...I.values()].filter((e) => P.includes(e.value)) : []), ue = (e) => {
+		A(!1), e?.value !== B?.value && (le(e), setTimeout(() => {
+			m?.(e?.value);
+		}, 0));
+	}, U = (e) => {
+		H(e), setTimeout(() => {
+			m?.(e.map((e) => e.value));
+		}, 0);
+	};
+	f(() => {
+		if (!S.current) {
+			S.current = !0;
+			return;
+		}
+		if (o) {
+			let e = P.reduce((e, t) => {
+				let n = I.get(t);
+				return n ? [...e, n] : e;
+			}, []);
+			H(P ? e : []);
+		} else le(I.get(P) || null);
+	}, [o ? JSON.stringify(P) : P]);
+	let W = ee(), de = `${ce}-label-${p()}`, G = `${ce}-field-${p()}`, K = W.id || G, fe = W.labelId || de, pe = W.state || t, q = W.disabled ?? a, J = W.readOnly ?? s, [Y, X] = g(re(e, "Combobox.Popover")), [Z, me] = g(!1), [Q, he] = g("mouse");
+	f(() => {
+		z(F ? se(I, E) : I);
+	}, [E, I]);
+	let $ = T({
+		selectedItems: V,
+		stateReducer: (e, { type: t, changes: n }) => {
+			let r = T.stateChangeTypes;
+			switch (t) {
+				case r.SelectedItemKeyDownBackspace:
+				case r.SelectedItemKeyDownDelete: {
+					U(n.selectedItems || []);
+					let i;
+					return i = t === r.SelectedItemKeyDownDelete ? e?.activeIndex === n.selectedItems?.length ? -1 : e.activeIndex : (n?.activeIndex || 0) - 1 >= 0 ? e.activeIndex - 1 : n?.activeIndex, {
+						...n,
+						activeIndex: i
+					};
+				}
+				case r.SelectedItemClick: return M.current && M.current.focus(), {
+					...n,
+					activeIndex: -1
+				};
+				case r.FunctionRemoveSelectedItem: return {
+					...n,
+					activeIndex: -1
+				};
+				case r.DropdownKeyDownNavigationPrevious: return _e.closeMenu(), n;
+				default: return n;
+			}
+		}
+	}), ge = Array.from(R.values());
+	f(() => {
+		te?.(E || "");
+	}, [E]);
+	let _e = w({
+		inputId: K,
+		items: ge,
+		selectedItem: o ? void 0 : B,
+		id: K,
+		labelId: fe,
+		inputValue: E,
+		onInputValueChange: ({ inputValue: e }) => {
+			D(e), F && z(se(I, e || ""));
+		},
+		initialIsOpen: y,
+		..._ != null && { isOpen: _ },
+		onIsOpenChange: (e) => {
+			e.isOpen != null && b?.(e.isOpen);
+		},
+		itemToString: (e) => e?.text,
+		isItemDisabled: (e) => {
+			let t = !!E && !ge.some((t) => e.value === t.value);
+			return e.disabled || t;
+		},
+		stateReducer: o ? ie({
+			multiselect: $,
+			selectedItems: V,
+			allowCustomValue: n,
+			setSelectedItems: U,
+			triggerAreaRef: j,
+			items: I
+		}) : ae({
+			allowCustomValue: n,
+			setSelectedItem: ue,
+			filteredItems: [...R.values()]
+		}),
+		scrollIntoView: (e) => {
+			e && e.scrollIntoView({ block: "nearest" });
+		}
+	});
+	f(() => {
+		let t = ne(e), n = [...I.values()], r = [...t.values()];
+		(n.length !== r.length || n.some((e, t) => {
+			let n = e.value !== r[t]?.value, i = e.text !== r[t]?.text;
+			return n || i;
+		})) && L(t);
+	}, [e]);
+	let [ve, ye] = Y ? [i, { open: !0 }] : [c, {}];
+	return /* @__PURE__ */ v(oe.Provider, {
+		value: {
+			itemsMap: I,
+			filteredItemsMap: R,
+			highlightedItem: k(R, _e.highlightedIndex),
+			multiple: o,
+			disabled: q,
+			readOnly: J,
+			areSelectedItemsInTrigger: Z,
+			setAreSelectedItemsInTrigger: me,
+			hasPopover: Y,
+			setHasPopover: X,
+			state: pe,
+			lastInteractionType: Q,
+			setLastInteractionType: he,
+			wrap: l,
+			innerInputRef: M,
+			triggerAreaRef: j,
+			..._e,
+			...$,
+			setInputValue: D,
+			selectItem: ue,
+			setSelectedItems: U,
+			isLoading: x,
+			setOnInputValueChange: N,
+			isTyping: O,
+			setIsTyping: A
+		},
+		children: /* @__PURE__ */ v(ve, {
+			...ye,
+			children: e
+		})
+	});
+}, F = () => {
+	let e = d(oe);
+	if (!e) throw Error("useComboboxContext must be used within a Combobox provider");
+	return e;
+}, I = ({ children: e, ...t }) => /* @__PURE__ */ v(P, {
+	...t,
+	children: e
+});
+I.displayName = "Combobox";
+//#endregion
+//#region src/combobox/ComboboxClearButton.tsx
+var L = ({ className: e, tabIndex: n = -1, onClick: r, ref: i, ...a }) => {
+	let s = F();
+	return /* @__PURE__ */ v("button", {
+		ref: i,
+		className: o(e, "h-sz-44 text-neutral hover:text-neutral-hovered"),
+		tabIndex: n,
+		onClick: (e) => {
+			e.stopPropagation(), s.multiple ? s.setSelectedItems([]) : s.selectItem(null), s.setInputValue(""), s.innerInputRef.current && s.innerInputRef.current.focus(), r && r(e);
+		},
+		type: "button",
+		...a,
+		children: /* @__PURE__ */ v(t, {
+			size: "sm",
+			children: /* @__PURE__ */ v(E, {})
+		})
+	});
 };
-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
-  }
-) : 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: t,
-      role: "group",
-      "aria-labelledby": l.groupLabelId,
-      className: f(o),
-      children: e
-    }
-  ) : null;
+L.displayName = "Combobox.ClearButton";
+//#endregion
+//#region src/combobox/ComboboxDisclosure.tsx
+var R = ({ className: e, closedLabel: n, openedLabel: i, intent: a = "neutral", design: s = "ghost", size: c = "sm", ref: l, ...u }) => {
+	let d = F(), { ref: f, ...p } = d.getToggleButtonProps({
+		disabled: d.disabled || d.readOnly,
+		onClick: (e) => {
+			e.stopPropagation();
+		}
+	}), m = p["aria-expanded"];
+	return /* @__PURE__ */ v(r, {
+		ref: x(l, f),
+		className: o(e, "ml-sm mt-[calc((44px-32px)/2)]"),
+		intent: a,
+		design: s,
+		size: c,
+		...p,
+		...u,
+		"aria-label": m ? i : n,
+		disabled: d.disabled,
+		children: /* @__PURE__ */ v(t, {
+			className: o("shrink-0", "rotate-0 transition duration-100 ease-in", { "rotate-180": m }),
+			size: "sm",
+			children: /* @__PURE__ */ v(b, {})
+		})
+	});
 };
-ce.displayName = "Combobox.Group";
-const de = ({
-  "aria-label": e,
-  className: o,
-  placeholder: t,
-  value: n,
-  defaultValue: l,
-  onValueChange: r,
-  ref: c,
-  ...i
-}) => {
-  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 I = s.hasPopover ? K.Trigger : se, k = s.hasPopover ? {
-    asChild: !0,
-    type: void 0
-  } : {}, 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);
-    },
-    /**
-     *
-     * Important:
-     * - 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: (V) => {
-      s.setInputValue(V.target.value);
-    },
-    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 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__ */ _(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",
-        ...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",
-          o
-        ),
-        ...i,
-        ...N,
-        ...R,
-        value: s.inputValue,
-        "aria-label": e,
-        disabled: s.disabled,
-        readOnly: s.readOnly,
-        "aria-invalid": b,
-        "aria-describedby": O
-      }
-    ) })
-  ] });
+R.displayName = "Combobox.Disclosure";
+//#endregion
+//#region src/combobox/ComboboxEmpty.tsx
+var z = ({ className: e, children: t, ref: n }) => F().filteredItemsMap.size === 0 ? /* @__PURE__ */ v("div", {
+	ref: n,
+	className: o("px-lg py-md text-body-1 text-on-surface/dim-1", e),
+	children: t
+}) : null;
+z.displayName = "Combobox.Empty";
+//#endregion
+//#region src/combobox/ComboboxItemsGroupContext.tsx
+var B = l(null), le = ({ children: e }) => {
+	let t = `${ce}-group-label-${p()}`;
+	return /* @__PURE__ */ v(B.Provider, {
+		value: { groupLabelId: t },
+		children: e
+	});
+}, V = () => {
+	let e = d(B);
+	if (!e) throw Error("useComboboxGroupContext must be used within a ComboboxGroup provider");
+	return e;
+}, H = ({ children: e, ref: t, ...n }) => /* @__PURE__ */ v(le, { children: /* @__PURE__ */ v(ue, {
+	ref: t,
+	...n,
+	children: e
+}) }), ue = ({ children: e, className: t, ref: n }) => {
+	let r = F(), i = V();
+	return s.toArray(e).some((e) => u(e) && r.filteredItemsMap.get(e.props.value)) ? /* @__PURE__ */ v("div", {
+		ref: n,
+		role: "group",
+		"aria-labelledby": i.groupLabelId,
+		className: o(t),
+		children: e
+	}) : null;
 };
-de.displayName = "Combobox.Input";
-const _e = ne(null), vt = ({
-  value: e,
-  disabled: o = !1,
-  children: t
-}) => {
-  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: l, setTextId: r, isSelected: s, itemData: i, index: c, disabled: o },
-      children: t
-    }
-  );
-}, ue = () => {
-  const e = re(_e);
-  if (!e)
-    throw Error("useComboboxItemContext must be used within a ComboboxItem provider");
-  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"
-    },
-    disabled: {
-      true: "opacity-dim-3 cursor-not-allowed",
-      false: "cursor-pointer"
-    },
-    highlighted: {
-      true: ""
-    },
-    interactionType: {
-      mouse: "",
-      keyboard: ""
-    }
-  },
-  compoundVariants: [
-    {
-      highlighted: !0,
-      interactionType: "mouse",
-      class: "bg-surface-hovered"
-    },
-    {
-      highlighted: !0,
-      interactionType: "keyboard",
-      class: "u-outline"
-    }
-  ]
-}), Nt = ({
-  className: e,
-  disabled: o = !1,
-  value: t,
-  children: n,
-  ref: l,
-  ...r
-}) => {
-  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: b,
-      className: f(
-        wt({
-          selected: i.isSelected,
-          disabled: o,
-          highlighted: c.highlightedItem?.value === t,
-          interactionType: c.lastInteractionType,
-          className: e
-        })
-      ),
-      ...u,
-      ...r,
-      "aria-selected": i.isSelected,
-      "aria-labelledby": i.textId,
-      children: n
-    },
-    t
-  ) : null;
+H.displayName = "Combobox.Group";
+//#endregion
+//#region src/combobox/ComboboxInput.tsx
+var U = ({ "aria-label": t, className: n, placeholder: r, value: a, defaultValue: s, onValueChange: l, ref: u, ...d }) => {
+	let p = F(), m = ee(), [h] = C(a, s), { isInvalid: g, description: b } = m;
+	f(() => {
+		h != null && p.setInputValue(h);
+	}, [h]), f(() => {
+		l && p.setOnInputValueChange(() => l), !p.multiple && p.selectedItem && p.setInputValue(p.selectedItem.text);
+	}, []);
+	let S = p.hasPopover ? i.Trigger : c, w = p.hasPopover ? {
+		asChild: !0,
+		type: void 0
+	} : {}, T = p.getDropdownProps(), E = x(u, p.innerInputRef, T.ref), D = p.getInputProps({
+		disabled: p.disabled || p.readOnly,
+		...T,
+		onKeyDown: (e) => {
+			T.onKeyDown?.(e), p.setLastInteractionType("keyboard"), p.setIsTyping(!0);
+		},
+		onChange: (e) => {
+			p.setInputValue(e.target.value);
+		},
+		ref: E
+	}), O = p.multiple ? !p.areSelectedItemsInTrigger || p.selectedItems.length === 0 : p.selectedItem === null;
+	function k(e, t) {
+		return (n) => {
+			e?.(n), t?.(n);
+		};
+	}
+	let A = {
+		onBlur: k(d.onBlur, D.onBlur),
+		onChange: k(d.onChange, D.onChange),
+		onClick: k(d.onClick, D.onClick),
+		onKeyDown: k(d.onKeyDown, D.onKeyDown)
+	};
+	return /* @__PURE__ */ y(_, { children: [t && /* @__PURE__ */ v(e, { children: /* @__PURE__ */ v("label", {
+		...p.getLabelProps(),
+		children: t
+	}) }), /* @__PURE__ */ v(S, {
+		...w,
+		children: /* @__PURE__ */ v("input", {
+			"data-spark-component": "combobox-input",
+			type: "text",
+			...O && { placeholder: r },
+			className: o("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", n),
+			...d,
+			...D,
+			...A,
+			value: p.inputValue,
+			"aria-label": t,
+			disabled: p.disabled,
+			readOnly: p.readOnly,
+			"aria-invalid": g,
+			"aria-describedby": b
+		})
+	})] });
 };
-me.displayName = "Combobox.Item";
-const pe = ({
-  className: e,
-  children: o,
-  label: t,
-  ref: n
-}) => {
-  const { disabled: l, isSelected: r } = ue(), c = o || /* @__PURE__ */ a($, { size: "sm", children: /* @__PURE__ */ a(pt, { "aria-label": t }) });
-  return /* @__PURE__ */ a(
-    "span",
-    {
-      ref: n,
-      className: f("min-h-sz-16 min-w-sz-16 flex", l && "opacity-dim-3", e),
-      children: r && c
-    }
-  );
+U.displayName = "Combobox.Input";
+//#endregion
+//#region src/combobox/ComboboxItemContext.tsx
+var W = l(null), de = ({ value: e, disabled: t = !1, children: n }) => {
+	let r = F(), [i, a] = g(void 0), o = D(r.filteredItemsMap, e), s = {
+		disabled: t,
+		value: e,
+		text: te(n)
+	}, c = r.multiple ? r.selectedItems.some((t) => t.value === e) : r.selectedItem?.value === e;
+	return /* @__PURE__ */ v(W.Provider, {
+		value: {
+			textId: i,
+			setTextId: a,
+			isSelected: c,
+			itemData: s,
+			index: o,
+			disabled: t
+		},
+		children: n
+	});
+}, G = () => {
+	let e = d(W);
+	if (!e) throw Error("useComboboxItemContext must be used within a ComboboxItem provider");
+	return e;
+}, K = ({ children: e, ref: t, ...n }) => {
+	let { value: r, disabled: i } = n;
+	return /* @__PURE__ */ v(de, {
+		value: r,
+		disabled: i,
+		children: /* @__PURE__ */ v(pe, {
+			ref: t,
+			...n,
+			children: e
+		})
+	});
+}, fe = a("px-lg py-md text-body-1", {
+	variants: {
+		selected: { true: "font-bold" },
+		disabled: {
+			true: "opacity-dim-3 cursor-not-allowed",
+			false: "cursor-pointer"
+		},
+		highlighted: { true: "" },
+		interactionType: {
+			mouse: "",
+			keyboard: ""
+		}
+	},
+	compoundVariants: [{
+		highlighted: !0,
+		interactionType: "mouse",
+		class: "bg-surface-hovered"
+	}, {
+		highlighted: !0,
+		interactionType: "keyboard",
+		class: "u-outline"
+	}]
+}), pe = ({ className: e, disabled: t = !1, value: n, children: r, ref: i, ...a }) => {
+	let s = F(), c = G(), l = !!s.filteredItemsMap.get(n), { ref: u, ...d } = s.getItemProps({
+		item: c.itemData,
+		index: c.index
+	}), f = x(i, u);
+	return l ? /* @__PURE__ */ v("li", {
+		ref: f,
+		className: o(fe({
+			selected: c.isSelected,
+			disabled: t,
+			highlighted: s.highlightedItem?.value === n,
+			interactionType: s.lastInteractionType,
+			className: e
+		})),
+		...d,
+		...a,
+		"aria-selected": c.isSelected,
+		"aria-labelledby": c.textId,
+		children: r
+	}, n) : null;
 };
-pe.displayName = "Combobox.ItemIndicator";
-const be = ({ children: e, className: o, ref: t, ...n }) => {
-  const l = v(), { ref: r, ...c } = l.getMenuProps({
-    onMouseMove: () => {
-      l.setLastInteractionType("mouse");
-    }
-  }), 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: s,
-      className: f(
-        o,
-        "flex flex-col",
-        m ? "block" : "pointer-events-none invisible opacity-0",
-        l.hasPopover && "p-lg",
-        l.isLoading && "items-center overflow-y-auto"
-      ),
-      ...n,
-      ...c,
-      "aria-busy": l.isLoading,
-      "data-spark-component": "combobox-items",
-      children: l.isLoading ? /* @__PURE__ */ a(bt, { size: "sm" }) : e
-    }
-  );
+K.displayName = "Combobox.Item";
+//#endregion
+//#region src/combobox/ComboboxItemIndicator.tsx
+var q = ({ className: e, children: n, label: r, ref: i }) => {
+	let { disabled: a, isSelected: s } = G(), c = n || /* @__PURE__ */ v(t, {
+		size: "sm",
+		children: /* @__PURE__ */ v(S, { "aria-label": r })
+	});
+	return /* @__PURE__ */ v("span", {
+		ref: i,
+		className: o("min-h-sz-16 min-w-sz-16 flex", a && "opacity-dim-3", e),
+		children: s && c
+	});
 };
-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 });
+q.displayName = "Combobox.ItemIndicator";
+//#endregion
+//#region src/combobox/ComboboxItems.tsx
+var J = ({ children: e, className: t, ref: r, ...i }) => {
+	let a = F(), { ref: s, ...c } = a.getMenuProps({ onMouseMove: () => {
+		a.setLastInteractionType("mouse");
+	} }), l = h(null), u = x(r, s, l), d = a.hasPopover ? a.isOpen : !0, f = a.hasPopover && !d;
+	return m(() => {
+		l.current?.parentElement && (l.current.parentElement.style.pointerEvents = f ? "none" : "", l.current.style.pointerEvents = f ? "none" : "");
+	}, [f]), /* @__PURE__ */ v("ul", {
+		ref: u,
+		className: o(t, "flex flex-col", d ? "block" : "pointer-events-none invisible opacity-0", a.hasPopover && "p-lg", a.isLoading && "items-center overflow-y-auto"),
+		...i,
+		...c,
+		"aria-busy": a.isLoading,
+		"data-spark-component": "combobox-items",
+		children: a.isLoading ? /* @__PURE__ */ v(n, { size: "sm" }) : e
+	});
 };
-fe.displayName = "Combobox.ItemText";
-const Ie = ({ children: e, className: o, ref: t }) => {
-  const n = je();
-  return /* @__PURE__ */ a(
-    "div",
-    {
-      ref: t,
-      id: n.groupLabelId,
-      className: f("px-md py-sm text-body-2 text-neutral italic", o),
-      children: e
-    }
-  );
+J.displayName = "Combobox.Items";
+//#endregion
+//#region src/combobox/ComboboxItemText.tsx
+var Y = ({ children: e, className: t, ref: n }) => {
+	let r = `${ce}-item-text-${p()}`, { setTextId: i } = G();
+	return f(() => (i(r), () => i(void 0))), /* @__PURE__ */ v("span", {
+		id: r,
+		className: o("inline", t),
+		ref: n,
+		children: e
+	});
 };
-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 c = v();
-  return P(() => (c.setHasPopover(!0), () => c.setHasPopover(!1)), []), /* @__PURE__ */ a(
-    K.Content,
-    {
-      ref: l,
-      inset: !0,
-      asChild: !0,
-      matchTriggerWidth: o,
-      className: f("z-dropdown! relative", n),
-      sideOffset: t,
-      onOpenAutoFocus: (i) => {
-        i.preventDefault();
-      },
-      ...r,
-      "data-spark-component": "combobox-popover",
-      children: e
-    }
-  );
+Y.displayName = "Combobox.ItemText";
+//#endregion
+//#region src/combobox/ComboboxLabel.tsx
+var X = ({ children: e, className: t, ref: n }) => /* @__PURE__ */ v("div", {
+	ref: n,
+	id: V().groupLabelId,
+	className: o("px-md py-sm text-body-2 text-neutral italic", t),
+	children: e
+});
+X.displayName = "Combobox.Label";
+//#endregion
+//#region src/combobox/ComboboxLeadingIcon.tsx
+var Z = ({ children: e }) => /* @__PURE__ */ v(t, {
+	size: "sm",
+	className: "h-sz-44 shrink-0",
+	children: e
+});
+Z.displayName = "Combobox.LeadingIcon";
+//#endregion
+//#region src/combobox/ComboboxPopover.tsx
+var me = ({ children: e, matchTriggerWidth: t = !0, sideOffset: n = 4, className: r, ref: a, ...s }) => {
+	let c = F();
+	return f(() => (c.setHasPopover(!0), () => c.setHasPopover(!1)), []), /* @__PURE__ */ v(i.Content, {
+		ref: a,
+		inset: !0,
+		asChild: !0,
+		matchTriggerWidth: t,
+		className: o("z-dropdown! relative", r),
+		sideOffset: n,
+		onOpenAutoFocus: (e) => {
+			e.preventDefault();
+		},
+		...s,
+		"data-spark-component": "combobox-popover",
+		children: e
+	});
 };
-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
-  });
-  return /* @__PURE__ */ _(
-    r ? "button" : "span",
-    {
-      role: "presentation",
-      "data-spark-component": "combobox-selected-item",
-      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": !n, "pl-md": n }
-      ),
-      ...c,
-      tabIndex: -1,
-      ...r && { disabled: !0 },
-      onFocus: l,
-      children: [
-        /* @__PURE__ */ a(
-          "span",
-          {
-            className: f("line-clamp-1 overflow-x-hidden leading-normal break-all text-ellipsis", {
-              "w-max": !t.wrap
-            }),
-            children: e.text
-          }
-        ),
-        t.disabled,
-        n && /* @__PURE__ */ a(
-          "button",
-          {
-            type: "button",
-            tabIndex: -1,
-            "aria-hidden": !0,
-            className: "px-md h-full cursor-pointer",
-            onClick: (s) => {
-              s.stopPropagation();
-              const m = t.selectedItems.filter(
-                (u) => u.value !== e.value
-              );
-              t.setSelectedItems(m), t.innerInputRef.current && t.innerInputRef.current.focus({ preventScroll: !0 });
-            },
-            children: /* @__PURE__ */ a($, { size: "sm", children: /* @__PURE__ */ a(Ae, {}) })
-          }
-        )
-      ]
-    },
-    `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;
+me.displayName = "Combobox.Popover";
+//#endregion
+//#region src/combobox/ComboboxPortal.tsx
+var Q = ({ children: e, ...t }) => /* @__PURE__ */ v(i.Portal, {
+	...t,
+	children: e
+});
+Q.displayName = "Combobox.Portal";
+//#endregion
+//#region src/combobox/ComboboxSelectedItems.tsx
+var he = ({ item: e, index: n }) => {
+	let r = F(), i = !r.disabled && !r.readOnly, a = (e) => {
+		let t = e.target;
+		r.lastInteractionType === "keyboard" && t.scrollIntoView({
+			behavior: "smooth",
+			block: "nearest",
+			inline: "nearest"
+		});
+	}, { disabled: s, ...c } = r.getSelectedItemProps({
+		disabled: r.disabled || r.readOnly,
+		selectedItem: e,
+		index: n
+	});
+	return /* @__PURE__ */ y(s ? "button" : "span", {
+		role: "presentation",
+		"data-spark-component": "combobox-selected-item",
+		className: o("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": !i,
+			"pl-md": i
+		}),
+		...c,
+		tabIndex: -1,
+		...s && { disabled: !0 },
+		onFocus: a,
+		children: [
+			/* @__PURE__ */ v("span", {
+				className: o("line-clamp-1 overflow-x-hidden leading-normal break-all text-ellipsis", { "w-max": !r.wrap }),
+				children: e.text
+			}),
+			r.disabled,
+			i && /* @__PURE__ */ v("button", {
+				type: "button",
+				tabIndex: -1,
+				"aria-hidden": !0,
+				className: "px-md h-full cursor-pointer",
+				onClick: (t) => {
+					t.stopPropagation();
+					let n = r.selectedItems.filter((t) => t.value !== e.value);
+					r.setSelectedItems(n), r.innerInputRef.current && r.innerInputRef.current.focus({ preventScroll: !0 });
+				},
+				children: /* @__PURE__ */ v(t, {
+					size: "sm",
+					children: /* @__PURE__ */ v(E, {})
+				})
+			})
+		]
+	}, `selected-item-${n}`);
+}, $ = () => {
+	let e = F();
+	return e.multiple && e.selectedItems.length ? /* @__PURE__ */ v(_, { children: e.selectedItems.map((e, t) => /* @__PURE__ */ v(he, {
+		item: e,
+		index: t
+	}, e.value)) }) : null;
 };
-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",
-    // outline styles
-    "ring-1 outline-hidden ring-inset focus-within:ring-2 focus-within:ring-focus"
-  ],
-  {
-    variants: {
-      allowWrap: {
-        true: "",
-        false: "h-sz-44"
-      },
-      state: {
-        undefined: "ring-outline",
-        error: "ring-error",
-        alert: "ring-alert",
-        success: "ring-success"
-      },
-      disabled: {
-        true: "cursor-not-allowed border-outline bg-on-surface/dim-5 text-on-surface/dim-3"
-      },
-      readOnly: {
-        true: "cursor-default bg-on-surface/dim-5 text-on-surface"
-      }
-    },
-    compoundVariants: [
-      {
-        disabled: !1,
-        state: void 0,
-        class: "default:hover:ring-outline-high"
-      },
-      {
-        disabled: !1,
-        readOnly: !1,
-        class: "bg-surface text-on-surface cursor-text"
-      }
-    ],
-    defaultVariants: {
-      state: void 0,
-      disabled: !1,
-      readOnly: !1
-    }
-  }
-), 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;
-    }
-  };
-  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();
-    };
-  }, []), /* @__PURE__ */ a(te, { children: /* @__PURE__ */ a(u, { ...b, children: /* @__PURE__ */ _(
-    "div",
-    {
-      ref: O,
-      className: Pt({
-        className: e,
-        state: n.state,
-        disabled: k,
-        readOnly: x,
-        allowWrap: n.wrap
-      }),
-      onClick: () => {
-        !n.isOpen && !k && !x && (n.openMenu(), n.innerInputRef.current && n.innerInputRef.current.focus());
-      },
-      children: [
-        r,
-        /* @__PURE__ */ _(
-          "div",
-          {
-            ref: I,
-            className: f(
-              "min-w-none gap-sm py-md inline-flex grow items-start",
-              n.wrap ? "flex-wrap" : "u-no-scrollbar overflow-x-auto p-[2px]"
-            ),
-            children: [
-              c,
-              i
-            ]
-          }
-        ),
-        w && s,
-        m
-      ]
-    }
-  ) }) });
+$.displayName = "Combobox.SelectedItems";
+//#endregion
+//#region src/combobox/ComboboxTrigger.styles.tsx
+var ge = a([
+	"flex items-start gap-md min-h-sz-44 text-body-1",
+	"h-fit rounded-lg px-lg",
+	"ring-1 outline-hidden ring-inset focus-within:ring-2 focus-within:ring-focus"
+], {
+	variants: {
+		allowWrap: {
+			true: "",
+			false: "h-sz-44"
+		},
+		state: {
+			undefined: "ring-outline",
+			error: "ring-error",
+			alert: "ring-alert",
+			success: "ring-success"
+		},
+		disabled: { true: "cursor-not-allowed border-outline bg-on-surface/dim-5 text-on-surface/dim-3" },
+		readOnly: { true: "cursor-default bg-on-surface/dim-5 text-on-surface" }
+	},
+	compoundVariants: [{
+		disabled: !1,
+		state: void 0,
+		class: "default:hover:ring-outline-high"
+	}, {
+		disabled: !1,
+		readOnly: !1,
+		class: "bg-surface text-on-surface cursor-text"
+	}],
+	defaultVariants: {
+		state: void 0,
+		disabled: !1,
+		readOnly: !1
+	}
+}), _e = (e, t) => {
+	let n = h(null);
+	f(() => {
+		let r = () => {
+			let i = e.current?.scrollWidth || null;
+			n.current && i && i > n.current && t(), n.current = i, requestAnimationFrame(r);
+		}, i = requestAnimationFrame(r);
+		return () => cancelAnimationFrame(i);
+	}, [e]);
+}, ve = ({ className: e, children: t, ref: n }) => {
+	let r = F(), a = ee(), s = N(t, "Combobox.LeadingIcon"), l = N(t, "Combobox.SelectedItems"), u = N(t, "Combobox.Input"), d = N(t, "Combobox.ClearButton"), p = N(t, "Combobox.Disclosure"), [m, g] = r.hasPopover ? [i.Anchor, {
+		asChild: !0,
+		type: void 0
+	}] : [c, {}], b = x(n, r.triggerAreaRef), S = h(null), C = a.disabled || r.disabled, w = a.readOnly || r.readOnly, T = !!d && !C && !w, E = () => {
+		if (S.current && !r.wrap) {
+			let { scrollWidth: e, clientWidth: t } = S.current;
+			S.current.scrollLeft = e - t;
+		}
+	};
+	_e(S, E);
+	let D = !!l;
+	return f(() => {
+		r.setAreSelectedItemsInTrigger(D);
+	}, [D]), f(() => {
+		let e = new ResizeObserver(E);
+		return S.current && e.observe(S.current), () => {
+			e.disconnect();
+		};
+	}, []), /* @__PURE__ */ v(_, { children: /* @__PURE__ */ v(m, {
+		...g,
+		children: /* @__PURE__ */ y("div", {
+			ref: b,
+			className: ge({
+				className: e,
+				state: r.state,
+				disabled: C,
+				readOnly: w,
+				allowWrap: r.wrap
+			}),
+			onClick: () => {
+				!r.isOpen && !C && !w && (r.openMenu(), r.innerInputRef.current && r.innerInputRef.current.focus());
+			},
+			children: [
+				s,
+				/* @__PURE__ */ y("div", {
+					ref: S,
+					className: o("min-w-none gap-sm py-md inline-flex grow items-start", r.wrap ? "flex-wrap" : "u-no-scrollbar overflow-x-auto p-[2px]"),
+					children: [l, u]
+				}),
+				T && d,
+				p
+			]
+		})
+	}) });
 };
-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
+ve.displayName = "Combobox.Trigger";
+//#endregion
+//#region src/combobox/index.ts
+var ye = Object.assign(I, {
+	Group: H,
+	Item: K,
+	Items: J,
+	ItemText: Y,
+	ItemIndicator: q,
+	Label: X,
+	Popover: me,
+	Trigger: ve,
+	LeadingIcon: Z,
+	Empty: z,
+	Input: U,
+	Disclosure: R,
+	SelectedItems: $,
+	ClearButton: L,
+	Portal: Q
 });
-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 {
-  Ot as Combobox,
-  Ct as ComboboxProvider,
-  v as useComboboxContext
-};
-//# sourceMappingURL=index.mjs.map
+ye.displayName = "Combobox", H.displayName = "Combobox.Group", J.displayName = "Combobox.Items", K.displayName = "Combobox.Item", Y.displayName = "Combobox.ItemText", q.displayName = "Combobox.ItemIndicator", X.displayName = "Combobox.Label", me.displayName = "Combobox.Popover", ve.displayName = "Combobox.Trigger", Z.displayName = "Combobox.LeadingIcon", z.displayName = "Combobox.Empty", U.displayName = "Combobox.Input", R.displayName = "Combobox.Disclosure", $.displayName = "Combobox.SelectedItems", L.displayName = "Combobox.ClearButton", Q.displayName = "Combobox.Portal";
+//#endregion
+export { ye as Combobox, P as ComboboxProvider, F as useComboboxContext };
+
+//# sourceMappingURL=index.mjs.map