@telegraph/combobox 0.0.53 → 0.0.55

package/dist/esm/index.mjs

@@ -1,4 +1,4 @@
-import { jsx as l, jsxs as S, Fragment as K } from "react/jsx-runtime";
+import { jsx as u, jsxs as S, Fragment as K } from "react/jsx-runtime";
 import { DismissableLayer as q } from "@radix-ui/react-dismissable-layer";
 import * as U from "@radix-ui/react-portal";
 import { useControllableState as W } from "@radix-ui/react-use-controllable-state";
@@ -10,41 +10,43 @@ import { Lucide as w, Icon as _ } from "@telegraph/icon";
 import { Input as ee } from "@telegraph/input";
 import { Stack as I, Box as $ } from "@telegraph/layout";
 import { Menu as Q } from "@telegraph/menu";
-import { motion as B, AnimatePresence as P } from "@telegraph/motion";
+import { motion as A, AnimatePresence as P } from "@telegraph/motion";
 import { Tag as L } from "@telegraph/tag";
 import { Tooltip as te } from "@telegraph/tooltip";
 import { Text as M } from "@telegraph/typography";
-import i from "react";
+import c from "react";
 const oe = {
   0: "5",
   1: "6",
   2: "8",
   3: "10"
 }, k = (t) => Array.isArray(t), T = (t) => typeof t == "object" && !Array.isArray(t) || typeof t == "string" || !t, ne = (t) => {
-  const r = (a, u = []) => (i.Children.toArray(a).forEach((n) => {
-    i.isValidElement(n) && (n.props.value ? u.push(n) : n.props.children && r(n.props.children, u));
-  }), u);
-  return r(t).map((a) => {
+  const a = (r, i = []) => (c.Children.toArray(r).forEach((n) => {
+    c.isValidElement(n) && (n.props.value ? i.push(n) : n.props.children && a(n.props.children, i));
+  }), i);
+  return a(t).map((r) => {
     var o;
-    const u = a;
+    const i = r;
     return {
-      value: u.props.value,
-      label: ((o = u.props) == null ? void 0 : o.label) || u.props.children || u.props.value
+      value: i.props.value,
+      label: ((o = i.props) == null ? void 0 : o.label) || i.props.children || i.props.value
     };
   });
-}, C = (t, r) => {
+}, C = (t, a) => {
   if (t)
-    return r === !0 ? t == null ? void 0 : t.value : t;
-}, F = (t, r, e) => {
-  if (t && !(!r || r.length === 0))
-    return r.find(
-      (p) => p.value === C(t, e)
-    );
+    return a === !0 ? t == null ? void 0 : t.value : t;
+}, F = (t, a, e) => {
+  if (!t || !a || a.length === 0) return;
+  const p = a.find(
+    (r) => r.value === C(t, e)
+  );
+  if (p)
+    return p;
 }, re = ({
   label: t,
-  value: r,
+  value: a,
   searchQuery: e
-}) => (r == null ? void 0 : r.toLowerCase().includes(e.toLowerCase())) || (t == null ? void 0 : t.toLowerCase().includes(e.toLowerCase())), ae = ["ArrowDown", "PageUp", "Home"], ie = ["ArrowUp", "PageDown", "End"], z = ["Enter", " "], x = i.createContext({
+}) => (a == null ? void 0 : a.toLowerCase().includes(e.toLowerCase())) || (t == null ? void 0 : t.toLowerCase().includes(e.toLowerCase())), ae = ["ArrowDown", "PageUp", "Home"], ie = ["ArrowUp", "PageDown", "End"], z = ["Enter", " "], x = c.createContext({
   value: void 0,
   onValueChange: () => {
   },
@@ -61,46 +63,46 @@ const oe = {
   legacyBehavior: !1
 }), ce = ({
   modal: t = !0,
-  closeOnSelect: r = !0,
+  closeOnSelect: a = !0,
   clearable: e = !1,
   disabled: p = !1,
-  legacyBehavior: a = !1,
-  open: u,
+  legacyBehavior: r = !1,
+  open: i,
   onOpenChange: o,
   defaultOpen: n,
-  value: c,
+  value: s,
   onValueChange: f,
   errored: y,
   placeholder: v,
   layout: d,
-  children: s,
+  children: l,
   ...g
 }) => {
-  const m = i.useId(), b = i.useId(), h = i.useRef(null), R = i.useRef(null), D = i.useRef(null), V = i.useMemo(() => ne(s), [s]), [Y, H] = i.useState(""), [O = !1, A] = W({
-    prop: u,
+  const m = c.useId(), b = c.useId(), h = c.useRef(null), R = c.useRef(null), D = c.useRef(null), V = c.useMemo(() => ne(l), [l]), [Y, H] = c.useState(""), [O = !1, B] = W({
+    prop: i,
     defaultProp: n,
     onChange: o
-  }), N = i.useCallback(() => {
-    A((X) => !X);
-  }, [A]);
-  return i.useEffect(() => {
+  }), N = c.useCallback(() => {
+    B((X) => !X);
+  }, [B]);
+  return c.useEffect(() => {
     O || H("");
-  }, [O]), /* @__PURE__ */ l(
+  }, [O]), /* @__PURE__ */ u(
     x.Provider,
     {
       value: {
         contentId: m,
         triggerId: b,
-        value: c,
+        value: s,
         // Need to cast this to avoid type errors
         // because the type of onValueChange is not
         // consistent with the value type
         onValueChange: f,
         placeholder: v,
         open: O,
-        setOpen: A,
+        setOpen: B,
         onOpenToggle: N,
-        closeOnSelect: r,
+        closeOnSelect: a,
         clearable: e,
         disabled: p,
         searchQuery: Y,
@@ -111,34 +113,35 @@ const oe = {
         errored: y,
         layout: d,
         options: V,
-        legacyBehavior: a
+        legacyBehavior: r
       },
-      children: /* @__PURE__ */ l(
+      children: /* @__PURE__ */ u(
         Q.Root,
         {
           open: O,
-          onOpenChange: A,
+          onOpenChange: B,
           modal: t,
           ...g,
-          children: s
+          children: l
         }
       )
     }
   );
-}, se = ({ value: t, ...r }) => {
-  const e = i.useContext(x), p = i.useMemo(() => {
-    const a = e.options.find((n) => n.value === t);
-    if (a) return a.label || a.value;
+}, se = ({ value: t, ...a }) => {
+  const e = c.useContext(x), p = c.useMemo(() => {
+    const r = e.options.find((n) => n.value === t);
+    if (r) return r.label || r.value;
     if (!e.value) return;
     const o = e.value.find(
       (n) => C(n, e.legacyBehavior) === t
     );
-    if (o) return o;
+    if (o)
+      return o;
   }, [e.options, e.value, t, e.legacyBehavior]);
   return /* @__PURE__ */ S(
     L.Root,
     {
-      as: B.span,
+      as: A.span,
       initializeWithAnimation: !1,
       initial: { opacity: 0, scale: 0.5 },
       animate: { opacity: 1, scale: 1 },
@@ -147,17 +150,17 @@ const oe = {
       "tgph-motion-key": t,
       size: "1",
       layout: "position",
-      ...r,
+      ...a,
       children: [
-        /* @__PURE__ */ l(L.Text, { children: p }),
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ u(L.Text, { children: p }),
+        /* @__PURE__ */ u(
           L.Button,
           {
             icon: { icon: w.X, alt: `Remove ${t}` },
-            onClick: (a) => {
+            onClick: (r) => {
               if (!e.onValueChange) return;
-              const u = e.onValueChange, n = e.value.filter((c) => C(c, e.legacyBehavior) !== t);
-              u == null || u(n), a.stopPropagation(), a.preventDefault();
+              const i = e.onValueChange, n = e.value.filter((s) => C(s, e.legacyBehavior) !== t);
+              i == null || i(n), r.stopPropagation(), r.preventDefault();
             }
           }
         )
@@ -165,36 +168,37 @@ const oe = {
     }
   );
 }, le = () => {
-  const t = i.useContext(x);
+  var a;
+  const t = c.useContext(x);
   if (t.value && k(t.value)) {
-    const r = t.layout || "truncate", e = t.value.length - 2, p = e.toString().split("");
-    return t.value.length === 0 ? /* @__PURE__ */ l(E.Text, { color: "gray", children: t.placeholder }) : /* @__PURE__ */ S(
+    const e = t.layout || "truncate", p = t.value.length - 2, r = p.toString().split("");
+    return t.value.length === 0 ? /* @__PURE__ */ u(E.Text, { color: "gray", children: t.placeholder }) : /* @__PURE__ */ S(
       I,
       {
         gap: "1",
         w: "full",
-        wrap: r === "wrap" ? "wrap" : "nowrap",
+        wrap: e === "wrap" ? "wrap" : "nowrap",
         align: "center",
         style: {
           position: "relative",
           flexGrow: 1
         },
         children: [
-          /* @__PURE__ */ l(
+          /* @__PURE__ */ u(
             P,
             {
-              presenceMap: t.value.map((a) => ({
-                "tgph-motion-key": C(a, t.legacyBehavior) || "",
+              presenceMap: t.value.map((i) => ({
+                "tgph-motion-key": C(i, t.legacyBehavior) || "",
                 value: !0
               })),
-              children: t.value.map((a, u) => {
-                const o = C(a, t.legacyBehavior);
-                if (o && (r === "truncate" && u <= 1 || r === "wrap"))
-                  return /* @__PURE__ */ l(Z, { children: /* @__PURE__ */ l(se, { value: o }) }, o);
+              children: t.value.map((i, o) => {
+                const n = C(i, t.legacyBehavior);
+                if (n && (e === "truncate" && o <= 1 || e === "wrap"))
+                  return /* @__PURE__ */ u(Z, { children: /* @__PURE__ */ u(se, { value: n }) }, n);
               })
             }
           ),
-          /* @__PURE__ */ l(
+          /* @__PURE__ */ u(
             P,
             {
               presenceMap: [
@@ -203,10 +207,10 @@ const oe = {
                   value: !0
                 }
               ],
-              children: r === "truncate" && t.value.length > 2 && /* @__PURE__ */ l(
+              children: e === "truncate" && t.value.length > 2 && /* @__PURE__ */ u(
                 I,
                 {
-                  as: B.div,
+                  as: A.div,
                   initial: { opacity: 0 },
                   animate: { opacity: 1 },
                   exit: { opacity: 0 },
@@ -215,7 +219,7 @@ const oe = {
                   pr: "1",
                   pl: "8",
                   align: "center",
-                  "aria-label": `${e} more selected`,
+                  "aria-label": `${p} more selected`,
                   position: "absolute",
                   right: "0",
                   style: {
@@ -226,25 +230,25 @@ const oe = {
                     /* @__PURE__ */ S(
                       P,
                       {
-                        presenceMap: p.map((a) => ({
-                          "tgph-motion-key": a,
+                        presenceMap: r.map((i) => ({
+                          "tgph-motion-key": i,
                           value: !0
                         })),
                         children: [
-                          p.map((a) => /* @__PURE__ */ l(
+                          r.map((i) => /* @__PURE__ */ u(
                             $,
                             {
-                              as: B.span,
+                              as: A.span,
                               initial: { opacity: 0 },
                               animate: { opacity: 1 },
                               exit: { opacity: 0 },
                               transition: { duration: 100, type: "spring" },
                               w: "2",
                               display: "inline-block",
-                              "tgph-motion-key": a,
-                              children: a
+                              "tgph-motion-key": i,
+                              children: i
                             },
-                            a
+                            i
                           )),
                           " "
                         ]
@@ -261,15 +265,15 @@ const oe = {
     );
   }
   if (t && T(t.value)) {
-    const r = F(
+    const e = F(
       t.value,
       t.options,
       t.legacyBehavior
-    );
-    return /* @__PURE__ */ l(E.Text, { color: t.value ? "default" : "gray", children: (r == null ? void 0 : r.label) || t.placeholder });
+    ), p = (e == null ? void 0 : e.label) || (e == null ? void 0 : e.value) || t.placeholder, r = t.legacyBehavior && ((a = t == null ? void 0 : t.value) == null ? void 0 : a.label);
+    return /* @__PURE__ */ u(E.Text, { color: t.value ? "default" : "gray", children: r ?? p });
   }
-}, ue = ({ size: t = "2", ...r }) => {
-  const e = i.useContext(x), p = i.useCallback(() => {
+}, ue = ({ size: t = "2", ...a }) => {
+  const e = c.useContext(x), p = c.useCallback(() => {
     var o;
     if (!e.value) return e.placeholder;
     if (T(e.value)) {
@@ -282,44 +286,44 @@ const oe = {
     }
     if (k(e.value))
       return ((o = e.value) == null ? void 0 : o.map((n) => {
-        const c = F(
+        const s = F(
           n,
           e.options,
           e.legacyBehavior
         );
-        return c == null ? void 0 : c.label;
+        return s == null ? void 0 : s.label;
       }).join(", ")) || e.placeholder;
   }, [
     e.value,
     e.placeholder,
     e.options,
     e.legacyBehavior
-  ]), a = i.useMemo(() => {
+  ]), r = c.useMemo(() => {
     var o;
     if (T(e.value))
       return e.clearable && e.value;
     if (k(e.value))
       return e.clearable && ((o = e.value) == null ? void 0 : o.length) > 0;
-  }, [e.clearable, e.value]), u = () => {
+  }, [e.clearable, e.value]), i = () => {
     var o, n;
     if (k(e.value)) {
-      const c = e.onValueChange;
-      c == null || c([]);
+      const s = e.onValueChange;
+      s == null || s([]);
     }
     if (T(e.value)) {
-      const c = e.onValueChange;
-      c == null || c(void 0);
+      const s = e.onValueChange;
+      s == null || s(void 0);
     }
     (n = (o = e.triggerRef) == null ? void 0 : o.current) == null || n.focus();
   };
-  return /* @__PURE__ */ l(
+  return /* @__PURE__ */ u(
     Q.Trigger,
     {
-      ...r,
+      ...a,
       asChild: !0,
       onClick: (o) => {
-        var n, c;
-        o.preventDefault(), e.onOpenToggle(), (c = (n = e.triggerRef) == null ? void 0 : n.current) == null || c.focus();
+        var n, s;
+        o.preventDefault(), e.onOpenToggle(), (s = (n = e.triggerRef) == null ? void 0 : n.current) == null || s.focus();
       },
       onKeyDown: (o) => {
         if (o.key === "Tab") {
@@ -360,9 +364,9 @@ const oe = {
           "data-tgph-comobox-trigger-open": e.open,
           disabled: e.disabled,
           children: [
-            /* @__PURE__ */ l(le, {}),
+            /* @__PURE__ */ u(le, {}),
             /* @__PURE__ */ S(I, { align: "center", gap: "1", children: [
-              a && /* @__PURE__ */ l(te, { label: "Clear field", children: /* @__PURE__ */ l(
+              r && /* @__PURE__ */ u(te, { label: "Clear field", children: /* @__PURE__ */ u(
                 E,
                 {
                   type: "button",
@@ -370,10 +374,10 @@ const oe = {
                   size: "1",
                   variant: "ghost",
                   onClick: (o) => {
-                    e.value && (o.stopPropagation(), u());
+                    e.value && (o.stopPropagation(), i());
                   },
                   onKeyDown: (o) => {
-                    (o.key === "Enter" || o.key === " ") && (o.stopPropagation(), u());
+                    (o.key === "Enter" || o.key === " ") && (o.stopPropagation(), i());
                   },
                   "data-tgph-combobox-clear": !0,
                   style: {
@@ -384,10 +388,10 @@ const oe = {
                   }
                 }
               ) }),
-              /* @__PURE__ */ l(
+              /* @__PURE__ */ u(
                 E.Icon,
                 {
-                  as: B.span,
+                  as: A.span,
                   animate: { rotate: e.open ? 180 : 0 },
                   transition: { duration: 150, type: "spring" },
                   icon: w.ChevronDown,
@@ -402,52 +406,52 @@ const oe = {
   );
 }, pe = ({
   style: t,
-  children: r,
+  children: a,
   tgphRef: e,
   ...p
 }) => {
-  const a = i.useContext(x), u = i.useRef(!1), o = j(e, a.contentRef), n = i.useRef(null), [c, f] = i.useState(0), [y, v] = i.useState(!1), d = i.useCallback(
-    (s) => {
-      const g = s == null ? void 0 : s.getBoundingClientRect();
+  const r = c.useContext(x), i = c.useRef(!1), o = j(e, r.contentRef), n = c.useRef(null), [s, f] = c.useState(0), [y, v] = c.useState(!1), d = c.useCallback(
+    (l) => {
+      const g = l == null ? void 0 : l.getBoundingClientRect();
       g && f(g.height), y || v(!0);
     },
     [y]
   );
-  return i.useEffect(() => {
-    const s = new ResizeObserver((g) => {
+  return c.useEffect(() => {
+    const l = new ResizeObserver((g) => {
       for (const m of g) {
         const b = m.target;
         d(b);
       }
     });
-    return n.current && y && s.observe(n.current), () => s.disconnect();
-  }, [y, d]), i.useEffect(() => {
-    y === !0 && a.open === !1 && v(!1);
-  }, [a.open, y]), i.useEffect(() => {
-    let s;
-    return a.open && (s = setTimeout(() => {
+    return n.current && y && l.observe(n.current), () => l.disconnect();
+  }, [y, d]), c.useEffect(() => {
+    y === !0 && r.open === !1 && v(!1);
+  }, [r.open, y]), c.useEffect(() => {
+    let l;
+    return r.open && (l = setTimeout(() => {
       d(n.current);
-    }, 10)), () => s && clearTimeout(s);
-  }, [a.open, d]), /* @__PURE__ */ l(U.Root, { asChild: !0, children: /* @__PURE__ */ l(
+    }, 10)), () => l && clearTimeout(l);
+  }, [r.open, d]), /* @__PURE__ */ u(U.Root, { asChild: !0, children: /* @__PURE__ */ u(
     q,
     {
-      onEscapeKeyDown: (s) => {
-        a.open && (s.stopPropagation(), s.preventDefault(), a.setOpen(!1));
+      onEscapeKeyDown: (l) => {
+        r.open && (l.stopPropagation(), l.preventDefault(), r.setOpen(!1));
       },
-      children: /* @__PURE__ */ l(
+      children: /* @__PURE__ */ u(
         Q.Content,
         {
           className: "tgph",
           mt: "1",
-          onCloseAutoFocus: (s) => {
+          onCloseAutoFocus: (l) => {
             var g, m;
-            u.current || (m = (g = a.triggerRef) == null ? void 0 : g.current) == null || m.focus(), u.current = !1, s.preventDefault();
+            i.current || (m = (g = r.triggerRef) == null ? void 0 : g.current) == null || m.focus(), i.current = !1, l.preventDefault();
           },
           bg: "surface-1",
           style: {
             width: "var(--tgph-comobobox-trigger-width)",
             transition: "min-height 200ms ease-in-out",
-            minHeight: c ? `${c}px` : "0",
+            minHeight: s ? `${s}px` : "0",
             ...t,
             "--tgph-comobobox-content-transform-origin": "var(--radix-popper-transform-origin)",
             "--tgph-combobox-content-available-width": "var(--radix-popper-available-width)",
@@ -458,28 +462,28 @@ const oe = {
           ...p,
           tgphRef: o,
           "data-tgph-combobox-content": !0,
-          "data-tgph-combobox-content-open": a.open,
+          "data-tgph-combobox-content-open": r.open,
           role: void 0,
           "aria-orientation": void 0,
-          onKeyDown: (s) => {
+          onKeyDown: (l) => {
             var m, b, h, R;
-            s.stopPropagation();
-            const g = (b = (m = a.contentRef) == null ? void 0 : m.current) == null ? void 0 : b.querySelectorAll(
+            l.stopPropagation();
+            const g = (b = (m = r.contentRef) == null ? void 0 : m.current) == null ? void 0 : b.querySelectorAll(
               "[data-tgph-combobox-option]"
             );
-            document.activeElement === (g == null ? void 0 : g[0]) && ie.includes(s.key) && ((R = (h = a.searchRef) == null ? void 0 : h.current) == null || R.focus());
+            document.activeElement === (g == null ? void 0 : g[0]) && ie.includes(l.key) && ((R = (h = r.searchRef) == null ? void 0 : h.current) == null || R.focus());
           },
-          children: /* @__PURE__ */ l(I, { direction: "column", gap: "1", tgphRef: n, children: r })
+          children: /* @__PURE__ */ u(I, { direction: "column", gap: "1", tgphRef: n, children: a })
         }
       )
     }
   ) });
 }, fe = ({ ...t }) => {
-  const r = i.useContext(x);
-  return /* @__PURE__ */ l(
+  const a = c.useContext(x);
+  return /* @__PURE__ */ u(
     I,
     {
-      id: r.contentId,
+      id: a.contentId,
       direction: "column",
       gap: "1",
       style: {
@@ -493,35 +497,35 @@ const oe = {
   );
 }, G = ({
   value: t,
-  label: r,
+  label: a,
   selected: e,
   onSelect: p,
-  children: a,
-  ...u
+  children: r,
+  ...i
 }) => {
-  const o = i.useContext(x), [n, c] = i.useState(!1), f = o.value, y = !o.searchQuery || re({
-    label: (r == null ? void 0 : r.toString()) || (a == null ? void 0 : a.toString()),
+  const o = c.useContext(x), [n, s] = c.useState(!1), f = o.value, y = !o.searchQuery || re({
+    label: (a == null ? void 0 : a.toString()) || (r == null ? void 0 : r.toString()),
     value: t,
     searchQuery: o.searchQuery
   }), v = k(f) ? f.some(
-    (s) => C(s, o.legacyBehavior) === t
-  ) : C(f, o.legacyBehavior) === t, d = (s) => {
+    (l) => C(l, o.legacyBehavior) === t
+  ) : C(f, o.legacyBehavior) === t, d = (l) => {
     var m, b;
-    s.stopPropagation();
-    const g = s;
+    l.stopPropagation();
+    const g = l;
     if (!(g.key && !z.includes(g.key))) {
-      if (s.preventDefault(), o.closeOnSelect === !0 && o.setOpen(!1), p)
-        return p(s);
+      if (l.preventDefault(), o.closeOnSelect === !0 && o.setOpen(!1), p)
+        return p(l);
       if (T(f)) {
         const h = o.onValueChange;
-        o.legacyBehavior === !0 ? h == null || h({ value: t, label: r }) : h == null || h(t);
+        o.legacyBehavior === !0 ? h == null || h({ value: t, label: a }) : h == null || h(t);
       } else if (k(f)) {
         const h = o.onValueChange, R = o.value, D = v ? R.filter(
           (V) => C(V, o.legacyBehavior) !== t
         ) : [
           ...R,
           // TODO: Remove this once { value, label } option is deprecated
-          o.legacyBehavior === !0 ? { value: t, label: r } : t
+          o.legacyBehavior === !0 ? { value: t, label: a } : t
         ];
         h == null || h(D);
       }
@@ -529,59 +533,59 @@ const oe = {
     }
   };
   if (y)
-    return /* @__PURE__ */ l(
+    return /* @__PURE__ */ u(
       Q.Button,
       {
         type: "button",
         onSelect: d,
         onKeyDown: d,
         selected: e === null ? null : e ?? v,
-        onFocus: () => c(!0),
-        onBlur: () => c(!1),
+        onFocus: () => s(!0),
+        onBlur: () => s(!1),
         role: "option",
         "aria-selected": v ? "true" : "false",
         "data-tgph-combobox-option": !0,
         "data-tgph-combobox-option-focused": n,
         "data-tgph-combobox-option-value": t,
-        "data-tgph-combobox-option-label": r,
-        ...u,
-        children: r || a || t
+        "data-tgph-combobox-option-label": a,
+        ...i,
+        children: a || r || t
       }
     );
 }, ge = ({
   label: t = "Search",
-  placeholder: r = "Search",
+  placeholder: a = "Search",
   tgphRef: e,
   value: p,
-  onValueChange: a,
-  ...u
+  onValueChange: r,
+  ...i
 }) => {
   var v;
-  const o = i.useId(), n = i.useContext(x), c = j(e, n.searchRef), f = p ?? n.searchQuery, y = a ?? n.setSearchQuery;
-  return i.useEffect(() => {
+  const o = c.useId(), n = c.useContext(x), s = j(e, n.searchRef), f = p ?? n.searchQuery, y = r ?? n.setSearchQuery;
+  return c.useEffect(() => {
     var g;
     const d = (m) => {
       var b, h;
       ae.includes(m.key) && ((h = (b = n.contentRef) == null ? void 0 : b.current) == null || h.focus({ preventScroll: !0 })), m.key === "Escape" && n.setOpen(!1), m.stopPropagation();
-    }, s = (g = n.searchRef) == null ? void 0 : g.current;
-    if (s)
-      return s.addEventListener("keydown", d), () => {
-        s.removeEventListener("keydown", d);
+    }, l = (g = n.searchRef) == null ? void 0 : g.current;
+    if (l)
+      return l.addEventListener("keydown", d), () => {
+        l.removeEventListener("keydown", d);
       };
   }, [n]), /* @__PURE__ */ S($, { borderBottom: "px", px: "1", pb: "1", children: [
-    /* @__PURE__ */ l(J.Root, { children: /* @__PURE__ */ l(M, { as: "label", htmlFor: o, children: t }) }),
-    /* @__PURE__ */ l(
+    /* @__PURE__ */ u(J.Root, { children: /* @__PURE__ */ u(M, { as: "label", htmlFor: o, children: t }) }),
+    /* @__PURE__ */ u(
       ee,
       {
         id: o,
         variant: "ghost",
-        placeholder: r,
+        placeholder: a,
         value: f,
         onChange: (d) => {
           y(d.target.value);
         },
-        LeadingComponent: /* @__PURE__ */ l(_, { icon: w.Search, alt: "Search Icon" }),
-        TrailingComponent: n != null && n.searchQuery && ((v = n == null ? void 0 : n.searchQuery) == null ? void 0 : v.length) > 0 ? /* @__PURE__ */ l(
+        LeadingComponent: /* @__PURE__ */ u(_, { icon: w.Search, alt: "Search Icon" }),
+        TrailingComponent: n != null && n.searchQuery && ((v = n == null ? void 0 : n.searchQuery) == null ? void 0 : v.length) > 0 ? /* @__PURE__ */ u(
           E,
           {
             variant: "ghost",
@@ -596,25 +600,25 @@ const oe = {
         autoFocus: !0,
         "data-tgph-combobox-search": !0,
         "aria-controls": n.contentId,
-        ...u,
-        tgphRef: c
+        ...i,
+        tgphRef: s
       }
     )
   ] });
 }, he = ({
   icon: t = { icon: w.Search, alt: "Search Icon" },
-  message: r = "No results found",
+  message: a = "No results found",
   children: e,
   ...p
 }) => {
-  const a = i.useContext(x), [u, o] = i.useState(!1);
-  if (i.useEffect(() => {
-    var c, f;
-    const n = (f = (c = a.contentRef) == null ? void 0 : c.current) == null ? void 0 : f.querySelectorAll(
+  const r = c.useContext(x), [i, o] = c.useState(!1);
+  if (c.useEffect(() => {
+    var s, f;
+    const n = (f = (s = r.contentRef) == null ? void 0 : s.current) == null ? void 0 : f.querySelectorAll(
       "[data-tgph-combobox-option]"
     );
     (n == null ? void 0 : n.length) === 0 ? o(!0) : o(!1);
-  }, [a.searchQuery, a.contentRef, e]), u)
+  }, [r.searchQuery, r.contentRef, e]), i)
     return /* @__PURE__ */ S(
       I,
       {
@@ -626,27 +630,27 @@ const oe = {
         "data-tgph-combobox-empty": !0,
         ...p,
         children: [
-          t === null ? /* @__PURE__ */ l(K, {}) : /* @__PURE__ */ l(_, { ...t }),
-          r === null ? /* @__PURE__ */ l(K, {}) : /* @__PURE__ */ l(M, { as: "span", children: r })
+          t === null ? /* @__PURE__ */ u(K, {}) : /* @__PURE__ */ u(_, { ...t }),
+          a === null ? /* @__PURE__ */ u(K, {}) : /* @__PURE__ */ u(M, { as: "span", children: a })
         ]
       }
     );
 }, de = ({
   leadingText: t = "Create",
-  values: r,
+  values: a,
   onCreate: e,
   selected: p = null,
-  legacyBehavior: a = !1,
-  ...u
+  legacyBehavior: r = !1,
+  ...i
 }) => {
-  const o = i.useContext(x), n = i.useCallback(
-    (c) => !r || (r == null ? void 0 : r.length) === 0 ? !1 : r.some(
-      (f) => C(f, a) === c
+  const o = c.useContext(x), n = c.useCallback(
+    (s) => !a || (a == null ? void 0 : a.length) === 0 ? !1 : a.some(
+      (f) => C(f, r) === s
     ),
-    [r, a]
+    [a, r]
   );
   if (o.searchQuery && !n(o.searchQuery))
-    return /* @__PURE__ */ l(
+    return /* @__PURE__ */ u(
       G,
       {
         leadingIcon: { icon: w.Plus, "aria-hidden": !0 },
@@ -655,13 +659,13 @@ const oe = {
         label: `${t} "${o.searchQuery}"`,
         selected: p,
         onSelect: () => {
-          var c;
+          var s;
           if (e && o.value && o.searchQuery) {
-            const f = a === !0 ? { value: o.searchQuery } : o.searchQuery;
-            e(f), (c = o.setSearchQuery) == null || c.call(o, "");
+            const f = r === !0 ? { value: o.searchQuery } : o.searchQuery;
+            e(f), (s = o.setSearchQuery) == null || s.call(o, "");
           }
         },
-        ...u
+        ...i
       }
     );
 }, me = {};