@telegraph/combobox 0.0.4 → 0.0.6

package/dist/esm/index.mjs

@@ -1,27 +1,27 @@
-import { jsx as u, jsxs as T, Fragment as W } from "react/jsx-runtime";
-import { useControllableState as be } from "@radix-ui/react-use-controllable-state";
-import * as he from "@radix-ui/react-visually-hidden";
+import { jsx as u, jsxs as S, Fragment as W } from "react/jsx-runtime";
+import { useControllableState as ge } from "@radix-ui/react-use-controllable-state";
+import * as be from "@radix-ui/react-visually-hidden";
 import { Icon as K, Lucide as j } from "@telegraph/icon";
-import * as ye from "react";
+import * as he from "react";
 import p from "react";
 import { Text as P } from "@telegraph/typography";
 import { useComposedRefs as B } from "@telegraph/compose-refs";
-import { RefToTgphRef as re } from "@telegraph/helpers";
+import { RefToTgphRef as ye } from "@telegraph/helpers";
 import { Input as fe } from "@telegraph/input";
 import { Menu as N } from "@telegraph/menu";
 import { Tag as z } from "@telegraph/tag";
 import { motion as E, AnimatePresence as F } from "framer-motion";
-function oe(o) {
+function re(o) {
   var t, e, a = "";
   if (typeof o == "string" || typeof o == "number") a += o;
   else if (typeof o == "object") if (Array.isArray(o)) {
     var i = o.length;
-    for (t = 0; t < i; t++) o[t] && (e = oe(o[t])) && (a && (a += " "), a += e);
+    for (t = 0; t < i; t++) o[t] && (e = re(o[t])) && (a && (a += " "), a += e);
   } else for (e in o) o[e] && (a && (a += " "), a += e);
   return a;
 }
 function $() {
-  for (var o, t, e = 0, a = "", i = arguments.length; e < i; e++) (o = arguments[e]) && (t = oe(o)) && (a && (a += " "), a += t);
+  for (var o, t, e = 0, a = "", i = arguments.length; e < i; e++) (o = arguments[e]) && (t = re(o)) && (a && (a += " "), a += t);
   return a;
 }
 function me(o, t) {
@@ -30,8 +30,8 @@ function me(o, t) {
 function ve(...o) {
   return (t) => o.forEach((e) => me(e, t));
 }
-function ae(...o) {
-  return ye.useCallback(ve(...o), o);
+function oe(...o) {
+  return he.useCallback(ve(...o), o);
 }
 const O = ["sm", "md", "lg", "xl", "2xl"], we = (o) => {
   const t = [];
@@ -71,7 +71,7 @@ const O = ["sm", "md", "lg", "xl", "2xl"], we = (o) => {
   right: 1,
   bottom: 2,
   left: 3
-}, x = {
+}, k = {
   topLeft: 0,
   topRight: 1,
   bottomRight: 2,
@@ -88,31 +88,31 @@ const O = ["sm", "md", "lg", "xl", "2xl"], we = (o) => {
     (r == null ? void 0 : r[2]) || 0,
     (r == null ? void 0 : r[3]) || 0
   ];
-  return a === "all" ? f({ value: t, prop: e }) : (e.ordering === "clockwise" ? (a === "top" && (n[x.topLeft] = f({
+  return a === "all" ? f({ value: t, prop: e }) : (e.ordering === "clockwise" ? (a === "top" && (n[k.topLeft] = f({
     value: t,
     prop: e
-  }), n[x.topRight] = f({
+  }), n[k.topRight] = f({
     value: t,
     prop: e
-  })), a === "right" && (n[x.topRight] = f({
+  })), a === "right" && (n[k.topRight] = f({
     value: t,
     prop: e
-  }), n[x.bottomRight] = f({
+  }), n[k.bottomRight] = f({
     value: t,
     prop: e
-  })), a === "bottom" && (n[x.bottomRight] = f({
+  })), a === "bottom" && (n[k.bottomRight] = f({
     value: t,
     prop: e
-  }), n[x.bottomLeft] = f({
+  }), n[k.bottomLeft] = f({
     value: t,
     prop: e
-  })), a === "left" && (n[x.bottomLeft] = f({
+  })), a === "left" && (n[k.bottomLeft] = f({
     value: t,
     prop: e
-  }), n[x.topLeft] = f({
+  }), n[k.topLeft] = f({
     value: t,
     prop: e
-  })), (a === "topLeft" || a === "topRight" || a === "bottomRight" || a === "bottomLeft") && (n[x[a]] = f({
+  })), (a === "topLeft" || a === "topRight" || a === "bottomRight" || a === "bottomLeft") && (n[k[a]] = f({
     value: t,
     prop: e
   }))) : (a === "x" && (n[I.left] = f({
@@ -141,7 +141,7 @@ const O = ["sm", "md", "lg", "xl", "2xl"], we = (o) => {
   value: t,
   direction: o.direction,
   type: o.type
-}) : f({ value: t, prop: o }), ne = ({
+}) : f({ value: t, prop: o }), ae = ({
   props: o,
   ref: t,
   propsMap: e
@@ -377,7 +377,7 @@ const O = ["sm", "md", "lg", "xl", "2xl"], we = (o) => {
   tgphRef: e,
   ...a
 }) => {
-  const i = o || "div", r = p.useRef(null), n = ae(e, r), l = p.useMemo(() => {
+  const i = o || "div", r = p.useRef(null), n = oe(e, r), l = p.useMemo(() => {
     const c = { borderColor: !0, ...a };
     return Object.keys(c).reduce(
       (d, s) => (Object.keys(U).some((b) => b === s) ? d.box[s] = c[s] : d.rest[s] = c[s], d),
@@ -385,7 +385,7 @@ const O = ["sm", "md", "lg", "xl", "2xl"], we = (o) => {
     );
   }, [a]);
   return p.useLayoutEffect(() => {
-    ne({
+    ae({
       props: l.box,
       ref: r,
       propsMap: U
@@ -434,7 +434,7 @@ const O = ["sm", "md", "lg", "xl", "2xl"], we = (o) => {
   tgphRef: t,
   ...e
 }) => {
-  const a = p.useRef(null), i = ae(t, a), r = p.useMemo(
+  const a = p.useRef(null), i = oe(t, a), r = p.useMemo(
     () => Object.keys(e).reduce(
       (n, l) => (Object.keys(J).some((c) => c === l) ? n.stack[l] = e[l] : n.rest[l] = e[l], n),
       { stack: {}, rest: {} }
@@ -442,7 +442,7 @@ const O = ["sm", "md", "lg", "xl", "2xl"], we = (o) => {
     [e]
   );
   return p.useLayoutEffect(() => {
-    ne({
+    ae({
       props: r.stack,
       ref: a,
       propsMap: J
@@ -537,11 +537,11 @@ const O = ["sm", "md", "lg", "xl", "2xl"], we = (o) => {
       px: "0"
     }
   }
-}, Se = {
+}, Te = {
   1: "1",
   2: "2",
   3: "3"
-}, Te = {
+}, Se = {
   solid: {
     gray: "white",
     red: "white",
@@ -637,7 +637,7 @@ const O = ["sm", "md", "lg", "xl", "2xl"], we = (o) => {
   state: "default",
   layout: "default",
   active: !1
-}), ie = ({
+}), ne = ({
   as: o,
   variant: t = "solid",
   size: e = "2",
@@ -649,11 +649,11 @@ const O = ["sm", "md", "lg", "xl", "2xl"], we = (o) => {
   ...c
 }) => {
   const d = n ? "disabled" : i, s = d === "disabled" ? "disabled" : a, b = p.useMemo(() => {
-    var h;
+    var y;
     const g = p.Children.toArray(c == null ? void 0 : c.children);
     if ((g == null ? void 0 : g.length) === 1 && p.isValidElement(g[0])) {
-      const y = g[0];
-      if ((h = y == null ? void 0 : y.props) != null && h.icon)
+      const h = g[0];
+      if ((y = h == null ? void 0 : h.props) != null && y.icon)
         return "icon-only";
     }
     return "default";
@@ -715,7 +715,7 @@ const O = ["sm", "md", "lg", "xl", "2xl"], we = (o) => {
       ...n
     }
   );
-}, le = ({
+}, ie = ({
   as: o,
   color: t,
   size: e,
@@ -728,8 +728,8 @@ const O = ["sm", "md", "lg", "xl", "2xl"], we = (o) => {
     P,
     {
       as: o || "span",
-      color: t ?? Te[n.variant][n.color],
-      size: e ?? Se[n.size],
+      color: t ?? Se[n.variant][n.color],
+      size: e ?? Te[n.size],
       weight: a,
       className: $("no-underline whitespace-nowrap", i),
       internal_optionalAs: !0,
@@ -737,7 +737,7 @@ const O = ["sm", "md", "lg", "xl", "2xl"], we = (o) => {
       ...r
     }
   );
-}, ce = ({
+}, le = ({
   leadingIcon: o,
   trailingIcon: t,
   icon: e,
@@ -745,18 +745,18 @@ const O = ["sm", "md", "lg", "xl", "2xl"], we = (o) => {
   ...i
 }) => {
   const r = o || e;
-  return /* @__PURE__ */ T(ie, { ...i, children: [
+  return /* @__PURE__ */ S(ne, { ...i, children: [
     r && /* @__PURE__ */ u(H, { ...r }),
-    a && /* @__PURE__ */ u(le, { children: a }),
+    a && /* @__PURE__ */ u(ie, { children: a }),
     t && /* @__PURE__ */ u(H, { ...t })
   ] });
 };
-Object.assign(ce, {
-  Root: ie,
+Object.assign(le, {
+  Root: ne,
   Icon: H,
-  Text: le
+  Text: ie
 });
-const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
+const D = le, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
   const t = [];
   let e = null;
   for (let a = 0; a < _.length; a++) {
@@ -794,7 +794,7 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
   right: 1,
   bottom: 2,
   left: 3
-}, R = {
+}, C = {
   topLeft: 0,
   topRight: 1,
   bottomRight: 2,
@@ -811,31 +811,31 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
     (r == null ? void 0 : r[2]) || 0,
     (r == null ? void 0 : r[3]) || 0
   ];
-  return a === "all" ? m({ value: t, prop: e }) : (e.ordering === "clockwise" ? (a === "top" && (n[R.topLeft] = m({
+  return a === "all" ? m({ value: t, prop: e }) : (e.ordering === "clockwise" ? (a === "top" && (n[C.topLeft] = m({
     value: t,
     prop: e
-  }), n[R.topRight] = m({
+  }), n[C.topRight] = m({
     value: t,
     prop: e
-  })), a === "right" && (n[R.topRight] = m({
+  })), a === "right" && (n[C.topRight] = m({
     value: t,
     prop: e
-  }), n[R.bottomRight] = m({
+  }), n[C.bottomRight] = m({
     value: t,
     prop: e
-  })), a === "bottom" && (n[R.bottomRight] = m({
+  })), a === "bottom" && (n[C.bottomRight] = m({
     value: t,
     prop: e
-  }), n[R.bottomLeft] = m({
+  }), n[C.bottomLeft] = m({
     value: t,
     prop: e
-  })), a === "left" && (n[R.bottomLeft] = m({
+  })), a === "left" && (n[C.bottomLeft] = m({
     value: t,
     prop: e
-  }), n[R.topLeft] = m({
+  }), n[C.topLeft] = m({
     value: t,
     prop: e
-  })), (a === "topLeft" || a === "topRight" || a === "bottomRight" || a === "bottomLeft") && (n[R[a]] = m({
+  })), (a === "topLeft" || a === "topRight" || a === "bottomRight" || a === "bottomLeft") && (n[C[a]] = m({
     value: t,
     prop: e
   }))) : (a === "x" && (n[A.left] = m({
@@ -864,7 +864,7 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
   value: t,
   direction: o.direction,
   type: o.type
-}) : m({ value: t, prop: o }), pe = ({
+}) : m({ value: t, prop: o }), ce = ({
   props: o,
   ref: t,
   propsMap: e
@@ -1108,7 +1108,7 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
     );
   }, [a]);
   return p.useLayoutEffect(() => {
-    pe({
+    ce({
       props: l.box,
       ref: r,
       propsMap: ee
@@ -1152,7 +1152,7 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
     type: "spacing",
     valueType: "variable"
   }
-}, S = ({
+}, T = ({
   className: o,
   tgphRef: t,
   ...e
@@ -1165,7 +1165,7 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
     [e]
   );
   return p.useLayoutEffect(() => {
-    pe({
+    ce({
       props: r.stack,
       ref: a,
       propsMap: te
@@ -1178,7 +1178,7 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
       ...r.rest
     }
   );
-}, Q = (o) => Array.isArray(o), q = (o) => typeof o == "object" && !Array.isArray(o), Ve = ["ArrowDown", "PageUp", "Home"], Ae = ["ArrowUp", "PageDown", "End"], ue = ["Enter", " "], w = p.createContext({
+}, Q = (o) => Array.isArray(o), q = (o) => typeof o == "object" && !Array.isArray(o), Ve = ["ArrowDown", "PageUp", "Home"], Ae = ["ArrowUp", "PageDown", "End"], pe = ["Enter", " "], x = p.createContext({
   onValueChange: () => {
   },
   contentId: "",
@@ -1201,32 +1201,32 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
   layout: d,
   ...s
 }) => {
-  const b = p.useId(), h = p.useId(), g = p.useRef(null), y = p.useRef(null), v = p.useRef(null), [k, C] = p.useState(""), [L = !1, M] = be({
+  const b = p.useId(), y = p.useId(), g = p.useRef(null), h = p.useRef(null), v = p.useRef(null), [w, L] = p.useState(""), [R = !1, M] = ge({
     prop: e,
     defaultProp: i,
     onChange: a
-  }), de = p.useCallback(() => {
-    M((ge) => !ge);
+  }), se = p.useCallback(() => {
+    M((de) => !de);
   }, [M]);
   return p.useEffect(() => {
-    L || C("");
-  }, [L]), /* @__PURE__ */ u(
-    w.Provider,
+    R || L("");
+  }, [R]), /* @__PURE__ */ u(
+    x.Provider,
     {
       value: {
         contentId: b,
-        triggerId: h,
+        triggerId: y,
         value: r,
         onValueChange: n,
         placeholder: c,
-        open: L,
+        open: R,
         setOpen: M,
-        onOpenToggle: de,
+        onOpenToggle: se,
         closeOnSelect: t,
-        searchQuery: k,
-        setSearchQuery: C,
+        searchQuery: w,
+        setSearchQuery: L,
         triggerRef: g,
-        searchRef: y,
+        searchRef: h,
         contentRef: v,
         errored: l,
         layout: d
@@ -1234,7 +1234,7 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
       children: /* @__PURE__ */ u(
         N.Root,
         {
-          open: L,
+          open: R,
           onOpenChange: M,
           modal: o,
           ...s
@@ -1243,8 +1243,8 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
     }
   );
 }, De = ({ label: o, value: t, ...e }) => {
-  const a = p.useContext(w);
-  return /* @__PURE__ */ T(
+  const a = p.useContext(x);
+  return /* @__PURE__ */ S(
     z.Root,
     {
       size: "1",
@@ -1283,11 +1283,11 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
   size: o = "1"
 }) => {
   var a, i;
-  const t = p.useContext(w), e = o === "1" ? "6" : o === "2" ? "8" : "10";
+  const t = p.useContext(x), e = o === "1" ? "6" : o === "2" ? "8" : "10";
   if (t.value && Q(t.value)) {
     const r = t.value, n = t.layout || "truncate", l = r.length - 2, c = l.toString().split("");
-    return r.length === 0 ? /* @__PURE__ */ u(S, { h: e, align: "center", my: "1", children: /* @__PURE__ */ u(D.Text, { color: "gray", children: t.placeholder }) }) : /* @__PURE__ */ T(
-      S,
+    return r.length === 0 ? /* @__PURE__ */ u(T, { h: e, align: "center", my: "1", children: /* @__PURE__ */ u(D.Text, { color: "gray", children: t.placeholder }) }) : /* @__PURE__ */ S(
+      T,
       {
         gap: "1",
         w: "full",
@@ -1301,10 +1301,10 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
         children: [
           /* @__PURE__ */ u(F, { initial: !1, mode: "popLayout", children: r.map((d, s) => {
             if (n === "truncate" && s <= 1 || n === "wrap")
-              return /* @__PURE__ */ u(re, { children: /* @__PURE__ */ u(De, { ...d }) }, d.value);
+              return /* @__PURE__ */ u(ye, { children: /* @__PURE__ */ u(De, { ...d }) }, d.value);
           }) }),
           /* @__PURE__ */ u(F, { children: n === "truncate" && r.length > 2 && /* @__PURE__ */ u(
-            S,
+            T,
             {
               as: E.div,
               initial: { opacity: 0 },
@@ -1321,7 +1321,7 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
                 right: 0,
                 backgroundImage: "linear-gradient(to left, var(--tgph-surface-1) 0 60%, transparent 90% 100%)"
               },
-              children: /* @__PURE__ */ T(P, { as: "span", size: "1", style: { whiteSpace: "nowrap" }, children: [
+              children: /* @__PURE__ */ S(P, { as: "span", size: "1", style: { whiteSpace: "nowrap" }, children: [
                 "+",
                 /* @__PURE__ */ u(F, { mode: "wait", initial: !1, children: c.map((d) => /* @__PURE__ */ u(
                   X,
@@ -1353,14 +1353,14 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
       }
     );
   }
-  return /* @__PURE__ */ u(S, { h: e, align: "center", my: "1", children: /* @__PURE__ */ u(D.Text, { color: t.value ? "default" : "gray", children: ((a = t == null ? void 0 : t.value) == null ? void 0 : a.label) || ((i = t == null ? void 0 : t.value) == null ? void 0 : i.value) || t.placeholder }) });
+  return /* @__PURE__ */ u(T, { h: e, align: "center", my: "1", children: /* @__PURE__ */ u(D.Text, { color: t.value ? "default" : "gray", children: ((a = t == null ? void 0 : t.value) == null ? void 0 : a.label) || ((i = t == null ? void 0 : t.value) == null ? void 0 : i.value) || t.placeholder }) });
 }, Pe = ({ size: o = "1", ...t }) => {
-  const e = p.useContext(w), a = p.useCallback(() => {
+  const e = p.useContext(x), a = p.useCallback(() => {
     var i, r, n;
     return e.value ? q(e.value) ? ((i = e.value) == null ? void 0 : i.label) || ((r = e.value) == null ? void 0 : r.value) || e.placeholder : ((n = e.value) == null ? void 0 : n.map((l) => l.label).join(", ")) || e.placeholder : e.placeholder;
   }, [e.value, e.placeholder]);
   return /* @__PURE__ */ u(
-    N.Anchor,
+    N.Trigger,
     {
       ...t,
       asChild: !0,
@@ -1373,7 +1373,7 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
           i.stopPropagation();
           return;
         }
-        if (ue.includes(i.key)) {
+        if (pe.includes(i.key)) {
           i.preventDefault();
           return;
         }
@@ -1383,7 +1383,7 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
         }
       },
       tgphRef: e.triggerRef,
-      children: /* @__PURE__ */ u(re, { children: /* @__PURE__ */ T(
+      children: /* @__PURE__ */ S(
         D.Root,
         {
           id: e.triggerId,
@@ -1414,7 +1414,7 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
             )
           ]
         }
-      ) })
+      )
     }
   );
 }, Be = ({
@@ -1423,22 +1423,22 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
   children: e,
   ...a
 }) => {
-  const i = p.useContext(w), r = p.useRef(!1), n = B(o, i.contentRef), l = p.useRef(null), [c, d] = p.useState(0), [s, b] = p.useState(!1), h = p.useCallback(
+  const i = p.useContext(x), r = p.useRef(!1), n = B(o, i.contentRef), l = p.useRef(null), [c, d] = p.useState(0), [s, b] = p.useState(!1), y = p.useCallback(
     (g) => {
-      const y = g.getBoundingClientRect();
-      y && d(y.height), s || b(!0);
+      const h = g.getBoundingClientRect();
+      h && d(h.height), s || b(!0);
     },
     [s]
   );
   return p.useEffect(() => {
-    const g = new ResizeObserver((y) => {
-      for (const v of y) {
-        const k = v.target;
-        h(k);
+    const g = new ResizeObserver((h) => {
+      for (const v of h) {
+        const w = v.target;
+        y(w);
       }
     });
     return l.current && s && g.observe(l.current), () => g.disconnect();
-  }, [s, h]), p.useEffect(() => {
+  }, [s, y]), p.useEffect(() => {
     s === !0 && i.open === !1 && b(!1);
   }, [i.open, s]), /* @__PURE__ */ u(
     N.Content,
@@ -1465,19 +1465,19 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
       onAnimationComplete: () => {
         if (!s && l) {
           const g = l.current;
-          h(g);
+          y(g);
         }
       },
       onCloseAutoFocus: (g) => {
-        var y, v;
-        r.current || (v = (y = i.triggerRef) == null ? void 0 : y.current) == null || v.focus(), r.current = !1, g.preventDefault();
+        var h, v;
+        r.current || (v = (h = i.triggerRef) == null ? void 0 : h.current) == null || v.focus(), r.current = !1, g.preventDefault();
       },
       onKeyDown: (g) => {
-        var v, k, C, L;
-        const y = (k = (v = i.contentRef) == null ? void 0 : v.current) == null ? void 0 : k.querySelectorAll(
+        var v, w, L, R;
+        const h = (w = (v = i.contentRef) == null ? void 0 : v.current) == null ? void 0 : w.querySelectorAll(
           "[data-tgph-combobox-option]"
         );
-        document.activeElement === (y == null ? void 0 : y[0]) && Ae.includes(g.key) && ((L = (C = i.searchRef) == null ? void 0 : C.current) == null || L.focus()), g.key === "Escape" && i.setOpen(!1), g.stopPropagation();
+        document.activeElement === (h == null ? void 0 : h[0]) && Ae.includes(g.key) && ((R = (L = i.searchRef) == null ? void 0 : L.current) == null || R.focus()), g.key === "Escape" && i.setOpen(!1), g.stopPropagation();
       },
       bg: "surface-1",
       style: {
@@ -1495,13 +1495,13 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
       "data-tgph-combobox-content-open": s,
       role: void 0,
       "aria-orientation": void 0,
-      children: /* @__PURE__ */ u(S, { direction: "column", gap: "1", tgphRef: l, children: e })
+      children: /* @__PURE__ */ u(T, { direction: "column", gap: "1", tgphRef: l, children: e })
     }
   );
 }, Ne = ({ ...o }) => {
-  const t = p.useContext(w);
+  const t = p.useContext(x);
   return /* @__PURE__ */ u(
-    S,
+    T,
     {
       id: t.contentId,
       direction: "column",
@@ -1515,32 +1515,34 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
       ...o
     }
   );
-}, se = ({
+}, ue = ({
   value: o,
   label: t,
   selected: e,
   onSelect: a,
   ...i
 }) => {
-  const r = p.useContext(w), [n, l] = p.useState(!1), c = r.value ?? [], d = (Q(c), !r.searchQuery || o.toLowerCase().includes(r.searchQuery.toLowerCase())), s = Q(c) ? c.some((h) => h.value === o) : c.value === o, b = (h) => {
-    var g, y;
-    if (!(h.key && !ue.includes(h.key))) {
-      if (h.stopPropagation(), h.preventDefault(), r.closeOnSelect === !0 && r.setOpen(!1), a)
-        return a(h);
+  const r = p.useContext(x), [n, l] = p.useState(!1), c = r.value ?? [], d = (Q(c), !r.searchQuery || o.toLowerCase().includes(r.searchQuery.toLowerCase())), s = Q(c) ? c.some((y) => y.value === o) : c.value === o, b = (y) => {
+    var h, v;
+    const g = y;
+    if (!(g.key && !pe.includes(g.key))) {
+      if (y.stopPropagation(), y.preventDefault(), r.closeOnSelect === !0 && r.setOpen(!1), a)
+        return a(y);
       if (Q(c)) {
-        const v = r.onValueChange, k = s ? c.filter((C) => C.value !== o) : [...c, { value: o, label: t }];
-        v(k);
+        const w = r.onValueChange, L = s ? c.filter((R) => R.value !== o) : [...c, { value: o, label: t }];
+        w(L);
       } else if (q(c)) {
-        const v = r.onValueChange;
-        v({ value: o, label: t });
+        const w = r.onValueChange;
+        w({ value: o, label: t });
       }
-      (y = (g = r.triggerRef) == null ? void 0 : g.current) == null || y.focus();
+      (v = (h = r.triggerRef) == null ? void 0 : h.current) == null || v.focus();
     }
   };
   if (d)
     return /* @__PURE__ */ u(
       N.Button,
       {
+        type: "button",
         onSelect: b,
         onKeyDown: b,
         selected: e === null ? null : e ?? s,
@@ -1563,19 +1565,19 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
   ...a
 }) => {
   var l;
-  const i = p.useId(), r = p.useContext(w), n = B(e, r.searchRef);
+  const i = p.useId(), r = p.useContext(x), n = B(e, r.searchRef);
   return p.useEffect(() => {
     var s;
     const c = (b) => {
-      var h, g;
-      Ve.includes(b.key) && ((g = (h = r.contentRef) == null ? void 0 : h.current) == null || g.focus({ preventScroll: !0 })), b.key === "Escape" && r.setOpen(!1), b.stopPropagation();
+      var y, g;
+      Ve.includes(b.key) && ((g = (y = r.contentRef) == null ? void 0 : y.current) == null || g.focus({ preventScroll: !0 })), b.key === "Escape" && r.setOpen(!1), b.stopPropagation();
     }, d = (s = r.searchRef) == null ? void 0 : s.current;
     if (d)
       return d.addEventListener("keydown", c), () => {
         d.removeEventListener("keydown", c);
       };
-  }, [r]), /* @__PURE__ */ T(X, { borderBottom: !0, px: "1", pb: "1", children: [
-    /* @__PURE__ */ u(he.Root, { children: /* @__PURE__ */ u(P, { as: "label", htmlFor: i, children: o }) }),
+  }, [r]), /* @__PURE__ */ S(X, { borderBottom: !0, px: "1", pb: "1", children: [
+    /* @__PURE__ */ u(be.Root, { children: /* @__PURE__ */ u(P, { as: "label", htmlFor: i, children: o }) }),
     /* @__PURE__ */ u(
       fe,
       {
@@ -1618,7 +1620,7 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
   children: e,
   ...a
 }) => {
-  const i = p.useContext(w), [r, n] = p.useState(!1);
+  const i = p.useContext(x), [r, n] = p.useState(!1);
   if (p.useEffect(() => {
     var c, d;
     const l = (d = (c = i.contentRef) == null ? void 0 : c.current) == null ? void 0 : d.querySelectorAll(
@@ -1626,8 +1628,8 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
     );
     (l == null ? void 0 : l.length) === 0 ? n(!0) : n(!1);
   }, [i.searchQuery, i.contentRef, e]), r)
-    return /* @__PURE__ */ T(
-      S,
+    return /* @__PURE__ */ S(
+      T,
       {
         as: E.div,
         initial: { opacity: 0, scale: 0.8 },
@@ -1653,13 +1655,13 @@ const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
   selected: a = null,
   ...i
 }) => {
-  const r = p.useContext(w), n = p.useCallback(
+  const r = p.useContext(x), n = p.useCallback(
     (l) => !t || (t == null ? void 0 : t.length) === 0 ? !1 : t.some((c) => c.value === l),
     [t]
   );
   if (r.searchQuery && !n(r.searchQuery))
     return /* @__PURE__ */ u(
-      se,
+      ue,
       {
         leadingIcon: { icon: j.Plus, "aria-hidden": !0 },
         mx: "1",
@@ -1679,7 +1681,7 @@ Object.assign(Ke, {
   Trigger: Pe,
   Content: Be,
   Options: Ne,
-  Option: se,
+  Option: ue,
   Search: ze,
   Empty: Fe,
   Create: He