@telegraph/combobox 0.0.30 → 0.0.32

package/dist/esm/index.mjs

@@ -1,24 +1,24 @@
-import { jsx as a, jsxs as w, Fragment as P } from "react/jsx-runtime";
+import { jsx as c, jsxs as S, Fragment as V } from "react/jsx-runtime";
 import { useControllableState as G } from "@radix-ui/react-use-controllable-state";
-import * as Y from "@radix-ui/react-visually-hidden";
-import { Button as I } from "@telegraph/button";
+import * as M from "@radix-ui/react-visually-hidden";
+import { Button as k } from "@telegraph/button";
 import { useComposedRefs as F } from "@telegraph/compose-refs";
-import { RefToTgphRef as z } from "@telegraph/helpers";
-import { Lucide as R, Icon as H } from "@telegraph/icon";
-import { Input as M } from "@telegraph/input";
-import { Stack as k, Box as K } from "@telegraph/layout";
-import { Menu as Q } from "@telegraph/menu";
-import { Tag as A } from "@telegraph/tag";
+import { RefToTgphRef as Y } from "@telegraph/helpers";
+import { Lucide as v, Icon as H } from "@telegraph/icon";
+import { Input as z } from "@telegraph/input";
+import { Stack as E, Box as B } from "@telegraph/layout";
+import { Menu as O } from "@telegraph/menu";
+import { Tag as D } from "@telegraph/tag";
 import { Tooltip as X } from "@telegraph/tooltip";
-import { Text as D } from "@telegraph/typography";
-import { motion as S, AnimatePresence as O } from "framer-motion";
+import { Text as P } from "@telegraph/typography";
+import { motion as I, AnimatePresence as L } from "framer-motion";
 import i from "react";
 const q = {
   0: "5",
   1: "6",
   2: "8",
   3: "10"
-}, E = (n) => Array.isArray(n), L = (n) => typeof n == "object" && !Array.isArray(n), N = ["ArrowDown", "PageUp", "Home"], U = ["ArrowUp", "PageDown", "End"], j = ["Enter", " "], C = i.createContext({
+}, R = (t) => Array.isArray(t), T = (t) => typeof t == "object" && !Array.isArray(t) || !t, N = ["ArrowDown", "PageUp", "Home"], U = ["ArrowUp", "PageDown", "End"], K = ["Enter", " "], x = i.createContext({
   onValueChange: () => {
   },
   contentId: "",
@@ -30,68 +30,68 @@ const q = {
   },
   clearable: !1
 }), J = ({
-  modal: n = !0,
-  closeOnSelect: c = !0,
+  modal: t = !0,
+  closeOnSelect: l = !0,
   clearable: e = !1,
-  open: s,
-  onOpenChange: r,
-  defaultOpen: t,
-  value: u,
+  open: u,
+  onOpenChange: s,
+  defaultOpen: r,
+  value: n,
   onValueChange: o,
-  errored: l,
-  placeholder: y,
-  layout: f,
-  ...b
+  errored: a,
+  placeholder: b,
+  layout: d,
+  ...y
 }) => {
-  const g = i.useId(), p = i.useId(), h = i.useRef(null), d = i.useRef(null), m = i.useRef(null), [x, v] = i.useState(""), [T = !1, V] = G({
-    prop: s,
-    defaultProp: t,
-    onChange: r
+  const p = i.useId(), g = i.useId(), h = i.useRef(null), m = i.useRef(null), f = i.useRef(null), [C, w] = i.useState(""), [Q = !1, A] = G({
+    prop: u,
+    defaultProp: r,
+    onChange: s
   }), _ = i.useCallback(() => {
-    V(($) => !$);
-  }, [V]);
+    A(($) => !$);
+  }, [A]);
   return i.useEffect(() => {
-    T || v("");
-  }, [T]), /* @__PURE__ */ a(
-    C.Provider,
+    Q || w("");
+  }, [Q]), /* @__PURE__ */ c(
+    x.Provider,
     {
       value: {
-        contentId: g,
-        triggerId: p,
-        value: u,
+        contentId: p,
+        triggerId: g,
+        value: n,
         onValueChange: o,
-        placeholder: y,
-        open: T,
-        setOpen: V,
+        placeholder: b,
+        open: Q,
+        setOpen: A,
         onOpenToggle: _,
-        closeOnSelect: c,
+        closeOnSelect: l,
         clearable: e,
-        searchQuery: x,
-        setSearchQuery: v,
+        searchQuery: C,
+        setSearchQuery: w,
         triggerRef: h,
-        searchRef: d,
-        contentRef: m,
-        errored: l,
-        layout: f
+        searchRef: m,
+        contentRef: f,
+        errored: a,
+        layout: d
       },
-      children: /* @__PURE__ */ a(
-        Q.Root,
+      children: /* @__PURE__ */ c(
+        O.Root,
         {
-          open: T,
-          onOpenChange: V,
-          modal: n,
-          ...b
+          open: Q,
+          onOpenChange: A,
+          modal: t,
+          ...y
         }
       )
     }
   );
-}, W = ({ label: n, value: c, ...e }) => {
-  const s = i.useContext(C);
-  return /* @__PURE__ */ w(
-    A.Root,
+}, W = ({ label: t, value: l, ...e }) => {
+  const u = i.useContext(x);
+  return /* @__PURE__ */ S(
+    D.Root,
     {
       size: "1",
-      as: S.span,
+      as: I.span,
       initial: { opacity: 0, transform: "scale(0.8)" },
       animate: { opacity: 1, transform: "scale(1)" },
       exit: { opacity: 0, transform: "scale(0.5)" },
@@ -108,14 +108,15 @@ const q = {
       },
       ...e,
       children: [
-        /* @__PURE__ */ a(A.Text, { children: n || c }),
-        /* @__PURE__ */ a(
-          A.Button,
+        /* @__PURE__ */ c(D.Text, { children: t || l }),
+        /* @__PURE__ */ c(
+          D.Button,
           {
-            icon: { icon: R.X, alt: `Remove ${c}` },
-            onClick: (r) => {
-              const t = s.onValueChange, o = s.value.filter((l) => l.value !== c);
-              t(o), r.stopPropagation(), r.preventDefault();
+            icon: { icon: v.X, alt: `Remove ${l}` },
+            onClick: (s) => {
+              if (!u.onValueChange) return;
+              const r = u.onValueChange, o = u.value.filter((a) => (a == null ? void 0 : a.value) !== l);
+              r == null || r(o), s.stopPropagation(), s.preventDefault();
             }
           }
         )
@@ -123,30 +124,30 @@ const q = {
     }
   );
 }, Z = () => {
-  var c, e;
-  const n = i.useContext(C);
-  if (n.value && E(n.value)) {
-    const s = n.value, r = n.layout || "truncate", t = s.length - 2, u = t.toString().split("");
-    return s.length === 0 ? /* @__PURE__ */ a(I.Text, { color: "gray", children: n.placeholder }) : /* @__PURE__ */ w(
-      k,
+  var l, e;
+  const t = i.useContext(x);
+  if (t.value && R(t.value)) {
+    const u = t.layout || "truncate", s = t.value.length - 2, r = s.toString().split("");
+    return t.value.length === 0 ? /* @__PURE__ */ c(k.Text, { color: "gray", children: t.placeholder }) : /* @__PURE__ */ S(
+      E,
       {
         gap: "1",
         w: "full",
-        wrap: r === "wrap" ? "wrap" : "nowrap",
+        wrap: u === "wrap" ? "wrap" : "nowrap",
         align: "center",
         style: {
           position: "relative",
           flexGrow: 1
         },
         children: [
-          /* @__PURE__ */ a(O, { initial: !1, mode: "popLayout", children: s.map((o, l) => {
-            if (r === "truncate" && l <= 1 || r === "wrap")
-              return /* @__PURE__ */ a(z, { children: /* @__PURE__ */ a(W, { ...o }) }, o.value);
+          /* @__PURE__ */ c(L, { initial: !1, mode: "popLayout", children: t.value.map((n, o) => {
+            if (n != null && n.value && (u === "truncate" && o <= 1 || u === "wrap"))
+              return /* @__PURE__ */ c(Y, { children: /* @__PURE__ */ c(W, { ...n }) }, n.value);
           }) }),
-          /* @__PURE__ */ a(O, { children: r === "truncate" && s.length > 2 && /* @__PURE__ */ a(
-            k,
+          /* @__PURE__ */ c(L, { children: u === "truncate" && t.value.length > 2 && /* @__PURE__ */ c(
+            E,
             {
-              as: S.div,
+              as: I.div,
               initial: { opacity: 0 },
               animate: { opacity: 1 },
               exit: { opacity: 0 },
@@ -155,18 +156,18 @@ const q = {
               pr: "1",
               pl: "8",
               align: "center",
-              "aria-label": `${t} more selected`,
+              "aria-label": `${s} more selected`,
               style: {
                 position: "absolute",
                 right: 0,
                 backgroundImage: "linear-gradient(to left, var(--tgph-surface-1) 0 60%, transparent 90% 100%)"
               },
-              children: /* @__PURE__ */ w(D, { as: "span", size: "1", style: { whiteSpace: "nowrap" }, children: [
+              children: /* @__PURE__ */ S(P, { as: "span", size: "1", style: { whiteSpace: "nowrap" }, children: [
                 "+",
-                /* @__PURE__ */ a(O, { mode: "wait", initial: !1, children: u.map((o) => /* @__PURE__ */ a(
-                  K,
+                /* @__PURE__ */ c(L, { mode: "wait", initial: !1, children: r.map((n) => /* @__PURE__ */ c(
+                  B,
                   {
-                    as: S.span,
+                    as: I.span,
                     w: "2",
                     display: "inline-block",
                     initial: {
@@ -179,9 +180,9 @@ const q = {
                       opacity: 0.5
                     },
                     transition: { duration: 0.1, type: "spring", bounce: 0 },
-                    children: o
+                    children: n
                   },
-                  o
+                  n
                 )) }),
                 " ",
                 "more"
@@ -193,83 +194,104 @@ const q = {
       }
     );
   }
-  return /* @__PURE__ */ a(I.Text, { color: n.value ? "default" : "gray", children: ((c = n == null ? void 0 : n.value) == null ? void 0 : c.label) || ((e = n == null ? void 0 : n.value) == null ? void 0 : e.value) || n.placeholder });
-}, ee = ({ size: n = "2", ...c }) => {
-  const e = i.useContext(C), s = i.useCallback(() => {
-    var r, t, u;
-    return e.value ? L(e.value) ? ((r = e.value) == null ? void 0 : r.label) || ((t = e.value) == null ? void 0 : t.value) || e.placeholder : ((u = e.value) == null ? void 0 : u.map((o) => o.label).join(", ")) || e.placeholder : e.placeholder;
-  }, [e.value, e.placeholder]);
-  return /* @__PURE__ */ a(
-    Q.Trigger,
+  return /* @__PURE__ */ c(k.Text, { color: t.value ? "default" : "gray", children: ((l = t == null ? void 0 : t.value) == null ? void 0 : l.label) || ((e = t == null ? void 0 : t.value) == null ? void 0 : e.value) || t.placeholder });
+}, ee = ({ size: t = "2", ...l }) => {
+  const e = i.useContext(x), u = i.useCallback(() => {
+    var n, o, a;
+    return e.value ? T(e.value) ? ((n = e.value) == null ? void 0 : n.label) || ((o = e.value) == null ? void 0 : o.value) || e.placeholder : ((a = e.value) == null ? void 0 : a.map((b) => b == null ? void 0 : b.label).join(", ")) || e.placeholder : e.placeholder;
+  }, [e.value, e.placeholder]), s = i.useMemo(() => {
+    var n;
+    if (R(e.value))
+      return e.clearable && ((n = e.value) == null ? void 0 : n.length) > 0;
+    if (T(e.value))
+      return e.clearable && e.value;
+  }, [e.clearable, e.value]), r = () => {
+    var n, o;
+    if (R(e.value)) {
+      const a = e.onValueChange;
+      a == null || a([]);
+    }
+    if (T(e.value)) {
+      const a = e.onValueChange;
+      a == null || a(void 0);
+    }
+    (o = (n = e.triggerRef) == null ? void 0 : n.current) == null || o.focus();
+  };
+  return /* @__PURE__ */ c(
+    O.Trigger,
     {
-      ...c,
+      ...l,
       asChild: !0,
-      onClick: (r) => {
-        var t, u;
-        r.preventDefault(), e.onOpenToggle(), (u = (t = e.triggerRef) == null ? void 0 : t.current) == null || u.focus();
+      onClick: (n) => {
+        var o, a;
+        n.preventDefault(), e.onOpenToggle(), (a = (o = e.triggerRef) == null ? void 0 : o.current) == null || a.focus();
       },
-      onKeyDown: (r) => {
-        if (r.key === "Tab") {
-          r.stopPropagation();
+      onKeyDown: (n) => {
+        if (n.key === "Tab") {
+          n.stopPropagation();
           return;
         }
-        if (j.includes(r.key)) {
-          r.preventDefault();
+        if (K.includes(n.key)) {
+          n.preventDefault();
           return;
         }
-        if (r.key === "ArrowDown") {
+        if (n.key === "ArrowDown") {
           e.onOpenToggle();
           return;
         }
       },
       tgphRef: e.triggerRef,
-      children: /* @__PURE__ */ w(
-        I.Root,
+      children: /* @__PURE__ */ S(
+        k.Root,
         {
           id: e.triggerId,
           bg: "surface-1",
           variant: "outline",
           align: "center",
-          minH: q[n],
+          minH: q[t],
           h: "full",
           w: "full",
           py: "1",
-          size: n,
+          size: t,
           color: e.errored ? "red" : "gray",
           justify: "space-between",
           role: "combobox",
-          "aria-label": s(),
+          "aria-label": u(),
           "aria-controls": e.contentId,
           "aria-expanded": e.open,
           "aria-haspopup": "listbox",
           "data-tgph-combobox-trigger": !0,
           "data-tgph-comobox-trigger-open": e.open,
           children: [
-            /* @__PURE__ */ a(Z, {}),
-            /* @__PURE__ */ w(k, { align: "center", gap: "1", children: [
-              e.clearable && e.value && /* @__PURE__ */ a(X, { label: "Clear field", children: /* @__PURE__ */ a(
-                I,
+            /* @__PURE__ */ c(Z, {}),
+            /* @__PURE__ */ S(E, { align: "center", gap: "1", children: [
+              s && /* @__PURE__ */ c(X, { label: "Clear field", children: /* @__PURE__ */ c(
+                k,
                 {
                   type: "button",
-                  icon: { icon: R.X, alt: "Clear field" },
+                  icon: { icon: v.X, alt: "Clear field" },
                   size: "1",
                   variant: "ghost",
-                  onClick: (r) => {
-                    var t;
-                    e.value && (r.stopPropagation(), (t = e == null ? void 0 : e.onValueChange) == null || t.call(e, void 0));
+                  onClick: (n) => {
+                    e.value && (n.stopPropagation(), r());
                   },
-                  onKeyDown: (r) => {
-                    var t;
-                    (r.key === "Enter" || r.key === " ") && (r.stopPropagation(), (t = e == null ? void 0 : e.onValueChange) == null || t.call(e, void 0));
+                  onKeyDown: (n) => {
+                    (n.key === "Enter" || n.key === " ") && (n.stopPropagation(), r());
                   },
-                  "data-tgph-combobox-clear": !0
+                  "data-tgph-combobox-clear": !0,
+                  style: {
+                    // Remove margin to make the clear button flush
+                    // with the trigger button
+                    marginTop: "calc(-1 * var(--tgph-spacing-1)",
+                    marginBottom: "calc(-1 * var(--tgph-spacing-1)"
+                  }
                 }
               ) }),
-              /* @__PURE__ */ a(
-                I.Icon,
+              /* @__PURE__ */ c(
+                k.Icon,
                 {
-                  as: S.div,
-                  icon: R.ChevronDown,
+                  as: I.div,
+                  icon: v.ChevronDown,
                   animate: { rotate: e.open ? "180deg" : "0deg" },
                   transition: { duration: 0.2, type: "spring", bounce: 0 },
                   "aria-hidden": !0
@@ -282,32 +304,32 @@ const q = {
     }
   );
 }, te = ({
-  tgphRef: n,
-  style: c,
+  tgphRef: t,
+  style: l,
   children: e,
-  ...s
+  ...u
 }) => {
-  const r = i.useContext(C), t = i.useRef(!1), u = F(n, r.contentRef), o = i.useRef(null), [l, y] = i.useState(0), [f, b] = i.useState(!1), g = i.useCallback(
-    (p) => {
-      const h = p.getBoundingClientRect();
-      h && y(h.height), f || b(!0);
+  const s = i.useContext(x), r = i.useRef(!1), n = F(t, s.contentRef), o = i.useRef(null), [a, b] = i.useState(0), [d, y] = i.useState(!1), p = i.useCallback(
+    (g) => {
+      const h = g.getBoundingClientRect();
+      h && b(h.height), d || y(!0);
     },
-    [f]
+    [d]
   );
   return i.useEffect(() => {
-    const p = new ResizeObserver((h) => {
-      for (const d of h) {
-        const m = d.target;
-        g(m);
+    const g = new ResizeObserver((h) => {
+      for (const m of h) {
+        const f = m.target;
+        p(f);
       }
     });
-    return o.current && f && p.observe(o.current), () => p.disconnect();
-  }, [f, g]), i.useEffect(() => {
-    f === !0 && r.open === !1 && b(!1);
-  }, [r.open, f]), /* @__PURE__ */ a(
-    Q.Content,
+    return o.current && d && g.observe(o.current), () => g.disconnect();
+  }, [d, p]), i.useEffect(() => {
+    d === !0 && s.open === !1 && y(!1);
+  }, [s.open, d]), /* @__PURE__ */ c(
+    O.Content,
     {
-      as: S.div,
+      as: I.div,
       mt: "1",
       initial: {
         opacity: 0,
@@ -319,52 +341,52 @@ const q = {
         scale: 1,
         // Set height based on the internalContentRef so that
         // we get smooth animations when the content changes
-        minHeight: l ? `${l}px` : "0"
+        minHeight: a ? `${a}px` : "0"
       },
       exit: { opacity: 0, scale: 0 },
       transition: { duration: 0.2, type: "spring", bounce: 0 },
       onAnimationComplete: () => {
-        if (!f && o) {
-          const p = o.current;
-          g(p);
+        if (!d && o) {
+          const g = o.current;
+          p(g);
         }
       },
-      onCloseAutoFocus: (p) => {
-        var h, d;
-        t.current || (d = (h = r.triggerRef) == null ? void 0 : h.current) == null || d.focus(), t.current = !1, p.preventDefault();
+      onCloseAutoFocus: (g) => {
+        var h, m;
+        r.current || (m = (h = s.triggerRef) == null ? void 0 : h.current) == null || m.focus(), r.current = !1, g.preventDefault();
       },
-      onKeyDown: (p) => {
-        var d, m, x, v;
-        const h = (m = (d = r.contentRef) == null ? void 0 : d.current) == null ? void 0 : m.querySelectorAll(
+      onKeyDown: (g) => {
+        var m, f, C, w;
+        const h = (f = (m = s.contentRef) == null ? void 0 : m.current) == null ? void 0 : f.querySelectorAll(
           "[data-tgph-combobox-option]"
         );
-        document.activeElement === (h == null ? void 0 : h[0]) && U.includes(p.key) && ((v = (x = r.searchRef) == null ? void 0 : x.current) == null || v.focus()), p.key === "Escape" && r.setOpen(!1), p.stopPropagation();
+        document.activeElement === (h == null ? void 0 : h[0]) && U.includes(g.key) && ((w = (C = s.searchRef) == null ? void 0 : C.current) == null || w.focus()), g.key === "Escape" && s.setOpen(!1), g.stopPropagation();
       },
       bg: "surface-1",
       style: {
         width: "var(--tgph-comobobox-trigger-width)",
-        ...c,
+        ...l,
         "--tgph-comobobox-content-transform-origin": "var(--radix-popper-transform-origin)",
         "--tgph-combobox-content-available-width": "var(--radix-popper-available-width)",
         "--tgph-combobox-content-available-height": "calc(var(--radix-popper-available-height) - var(--tgph-spacing-8))",
         "--tgph-comobobox-trigger-width": "var(--radix-popper-anchor-width)",
         "--tgph-combobox-trigger-height": "var(--radix-popper-anchor-height)"
       },
-      ...s,
-      tgphRef: u,
+      ...u,
+      tgphRef: n,
       "data-tgph-combobox-content": !0,
-      "data-tgph-combobox-content-open": f,
+      "data-tgph-combobox-content-open": d,
       role: void 0,
       "aria-orientation": void 0,
-      children: /* @__PURE__ */ a(k, { direction: "column", gap: "1", tgphRef: o, children: e })
+      children: /* @__PURE__ */ c(E, { direction: "column", gap: "1", tgphRef: o, children: e })
     }
   );
-}, oe = ({ ...n }) => {
-  const c = i.useContext(C);
-  return /* @__PURE__ */ a(
-    k,
+}, oe = ({ ...t }) => {
+  const l = i.useContext(x);
+  return /* @__PURE__ */ c(
+    E,
     {
-      id: c.contentId,
+      id: l.contentId,
       direction: "column",
       gap: "1",
       style: {
@@ -373,127 +395,127 @@ const q = {
         maxHeight: "calc(var(--tgph-combobox-content-available-height) - var(--tgph-spacing-12))"
       },
       role: "listbox",
-      ...n
+      ...t
     }
   );
-}, B = ({
-  value: n,
-  label: c,
+}, j = ({
+  value: t,
+  label: l,
   selected: e,
-  onSelect: s,
-  ...r
+  onSelect: u,
+  ...s
 }) => {
-  const t = i.useContext(C), [u, o] = i.useState(!1), l = t.value ?? [], y = (E(l), !t.searchQuery || n.toLowerCase().includes(t.searchQuery.toLowerCase())), f = E(l) ? l.some((g) => g.value === n) : l.value === n, b = (g) => {
-    var h, d;
-    const p = g;
-    if (!(p.key && !j.includes(p.key))) {
-      if (g.stopPropagation(), g.preventDefault(), t.closeOnSelect === !0 && t.setOpen(!1), s)
-        return s(g);
-      if (E(l)) {
-        const m = t.onValueChange, x = f ? l.filter((v) => v.value !== n) : [...l, { value: n, label: c }];
-        m(x);
-      } else if (L(l)) {
-        const m = t.onValueChange;
-        m({ value: n, label: c });
+  const r = i.useContext(x), [n, o] = i.useState(!1), a = r.value, b = (R(a), !r.searchQuery || t.toLowerCase().includes(r.searchQuery.toLowerCase())), d = R(a) ? a.some((p) => (p == null ? void 0 : p.value) === t) : (a == null ? void 0 : a.value) === t, y = (p) => {
+    var h, m;
+    const g = p;
+    if (!(g.key && !K.includes(g.key))) {
+      if (p.stopPropagation(), p.preventDefault(), r.closeOnSelect === !0 && r.setOpen(!1), u)
+        return u(p);
+      if (T(a)) {
+        const f = r.onValueChange;
+        f == null || f({ value: t, label: l });
+      } else if (R(a)) {
+        const f = r.onValueChange, C = d ? a.filter((w) => (w == null ? void 0 : w.value) !== t) : [...a, { value: t, label: l }];
+        f == null || f(C);
       }
-      (d = (h = t.triggerRef) == null ? void 0 : h.current) == null || d.focus();
+      (m = (h = r.triggerRef) == null ? void 0 : h.current) == null || m.focus();
     }
   };
-  if (y)
-    return /* @__PURE__ */ a(
-      Q.Button,
+  if (b)
+    return /* @__PURE__ */ c(
+      O.Button,
       {
         type: "button",
-        onSelect: b,
-        onKeyDown: b,
-        selected: e === null ? null : e ?? f,
+        onSelect: y,
+        onKeyDown: y,
+        selected: e === null ? null : e ?? d,
         onFocus: () => o(!0),
         onBlur: () => o(!1),
         role: "option",
-        "aria-selected": f ? "true" : "false",
+        "aria-selected": d ? "true" : "false",
         "data-tgph-combobox-option": !0,
-        "data-tgph-combobox-option-focused": u,
-        "data-tgph-combobox-option-value": n,
-        "data-tgph-combobox-option-label": c,
-        ...r,
-        children: c || n
+        "data-tgph-combobox-option-focused": n,
+        "data-tgph-combobox-option-value": t,
+        "data-tgph-combobox-option-label": l,
+        ...s,
+        children: l || t
       }
     );
 }, ne = ({
-  label: n = "Search",
-  placeholder: c = "Search",
+  label: t = "Search",
+  placeholder: l = "Search",
   tgphRef: e,
-  value: s,
-  onValueChange: r,
-  ...t
+  value: u,
+  onValueChange: s,
+  ...r
 }) => {
-  var b;
-  const u = i.useId(), o = i.useContext(C), l = F(e, o.searchRef), y = s ?? o.searchQuery, f = r ?? o.setSearchQuery;
+  var y;
+  const n = i.useId(), o = i.useContext(x), a = F(e, o.searchRef), b = u ?? o.searchQuery, d = s ?? o.setSearchQuery;
   return i.useEffect(() => {
     var h;
-    const g = (d) => {
-      var m, x;
-      N.includes(d.key) && ((x = (m = o.contentRef) == null ? void 0 : m.current) == null || x.focus({ preventScroll: !0 })), d.key === "Escape" && o.setOpen(!1), d.stopPropagation();
-    }, p = (h = o.searchRef) == null ? void 0 : h.current;
-    if (p)
-      return p.addEventListener("keydown", g), () => {
-        p.removeEventListener("keydown", g);
+    const p = (m) => {
+      var f, C;
+      N.includes(m.key) && ((C = (f = o.contentRef) == null ? void 0 : f.current) == null || C.focus({ preventScroll: !0 })), m.key === "Escape" && o.setOpen(!1), m.stopPropagation();
+    }, g = (h = o.searchRef) == null ? void 0 : h.current;
+    if (g)
+      return g.addEventListener("keydown", p), () => {
+        g.removeEventListener("keydown", p);
       };
-  }, [o]), /* @__PURE__ */ w(K, { borderBottom: "px", px: "1", pb: "1", children: [
-    /* @__PURE__ */ a(Y.Root, { children: /* @__PURE__ */ a(D, { as: "label", htmlFor: u, children: n }) }),
-    /* @__PURE__ */ a(
-      M,
+  }, [o]), /* @__PURE__ */ S(B, { borderBottom: "px", px: "1", pb: "1", children: [
+    /* @__PURE__ */ c(M.Root, { children: /* @__PURE__ */ c(P, { as: "label", htmlFor: n, children: t }) }),
+    /* @__PURE__ */ c(
+      z,
       {
-        id: u,
+        id: n,
         variant: "ghost",
-        placeholder: c,
-        value: y,
-        onChange: (g) => {
-          f(g.target.value);
+        placeholder: l,
+        value: b,
+        onChange: (p) => {
+          d(p.target.value);
         },
-        LeadingComponent: /* @__PURE__ */ a(H, { icon: R.Search, alt: "Search Icon" }),
-        TrailingComponent: o != null && o.searchQuery && ((b = o == null ? void 0 : o.searchQuery) == null ? void 0 : b.length) > 0 ? /* @__PURE__ */ a(
-          I,
+        LeadingComponent: /* @__PURE__ */ c(H, { icon: v.Search, alt: "Search Icon" }),
+        TrailingComponent: o != null && o.searchQuery && ((y = o == null ? void 0 : o.searchQuery) == null ? void 0 : y.length) > 0 ? /* @__PURE__ */ c(
+          k,
           {
-            as: S.button,
+            as: I.button,
             initial: { opacity: 0 },
             animate: { opacity: 1 },
             transition: { duration: 0.2, type: "spring", bounce: 0 },
             variant: "ghost",
             color: "gray",
-            icon: { icon: R.X, alt: "Clear Search Query" },
+            icon: { icon: v.X, alt: "Clear Search Query" },
             onClick: () => {
-              var g;
-              return (g = o.setSearchQuery) == null ? void 0 : g.call(o, "");
+              var p;
+              return (p = o.setSearchQuery) == null ? void 0 : p.call(o, "");
             }
           }
         ) : null,
         autoFocus: !0,
         "data-tgph-combobox-search": !0,
         "aria-controls": o.contentId,
-        ...t,
-        tgphRef: l
+        ...r,
+        tgphRef: a
       }
     )
   ] });
 }, re = ({
-  icon: n = { icon: R.Search, alt: "Search Icon" },
-  message: c = "No results found",
+  icon: t = { icon: v.Search, alt: "Search Icon" },
+  message: l = "No results found",
   children: e,
-  ...s
+  ...u
 }) => {
-  const r = i.useContext(C), [t, u] = i.useState(!1);
+  const s = i.useContext(x), [r, n] = i.useState(!1);
   if (i.useEffect(() => {
-    var l, y;
-    const o = (y = (l = r.contentRef) == null ? void 0 : l.current) == null ? void 0 : y.querySelectorAll(
+    var a, b;
+    const o = (b = (a = s.contentRef) == null ? void 0 : a.current) == null ? void 0 : b.querySelectorAll(
       "[data-tgph-combobox-option]"
     );
-    (o == null ? void 0 : o.length) === 0 ? u(!0) : u(!1);
-  }, [r.searchQuery, r.contentRef, e]), t)
-    return /* @__PURE__ */ w(
-      k,
+    (o == null ? void 0 : o.length) === 0 ? n(!0) : n(!1);
+  }, [s.searchQuery, s.contentRef, e]), r)
+    return /* @__PURE__ */ S(
+      E,
       {
-        as: S.div,
+        as: I.div,
         initial: { opacity: 0, scale: 0.8 },
         animate: { opacity: 1, scale: 1 },
         transition: { duration: 0.2, type: "spring", bounce: 0 },
@@ -503,38 +525,38 @@ const q = {
         w: "full",
         my: "8",
         "data-tgph-combobox-empty": !0,
-        ...s,
+        ...u,
         children: [
-          n === null ? /* @__PURE__ */ a(P, {}) : /* @__PURE__ */ a(H, { ...n }),
-          c === null ? /* @__PURE__ */ a(P, {}) : /* @__PURE__ */ a(D, { as: "span", children: c })
+          t === null ? /* @__PURE__ */ c(V, {}) : /* @__PURE__ */ c(H, { ...t }),
+          l === null ? /* @__PURE__ */ c(V, {}) : /* @__PURE__ */ c(P, { as: "span", children: l })
         ]
       }
     );
 }, ae = ({
-  leadingText: n = "Create",
-  values: c,
+  leadingText: t = "Create",
+  values: l,
   onCreate: e,
-  selected: s = null,
-  ...r
+  selected: u = null,
+  ...s
 }) => {
-  const t = i.useContext(C), u = i.useCallback(
-    (o) => !c || (c == null ? void 0 : c.length) === 0 ? !1 : c.some((l) => l.value === o),
-    [c]
+  const r = i.useContext(x), n = i.useCallback(
+    (o) => !l || (l == null ? void 0 : l.length) === 0 ? !1 : l.some((a) => (a == null ? void 0 : a.value) === o),
+    [l]
   );
-  if (t.searchQuery && !u(t.searchQuery))
-    return /* @__PURE__ */ a(
-      B,
+  if (r.searchQuery && !n(r.searchQuery))
+    return /* @__PURE__ */ c(
+      j,
       {
-        leadingIcon: { icon: R.Plus, "aria-hidden": !0 },
+        leadingIcon: { icon: v.Plus, "aria-hidden": !0 },
         mx: "1",
-        value: t.searchQuery,
-        label: `${n} "${t.searchQuery}"`,
-        selected: s,
+        value: r.searchQuery,
+        label: `${t} "${r.searchQuery}"`,
+        selected: u,
         onSelect: () => {
           var o;
-          e && t.value && t.searchQuery && (L(t.value) && e({ value: t.searchQuery }), E(t.value) && e({ value: t.searchQuery }), (o = t.setSearchQuery) == null || o.call(t, ""));
+          e && r.value && r.searchQuery && (T(r.value) && e({ value: r.searchQuery }), R(r.value) && e({ value: r.searchQuery }), (o = r.setSearchQuery) == null || o.call(r, ""));
         },
-        ...r
+        ...s
       }
     );
 }, ie = {};
@@ -543,7 +565,7 @@ Object.assign(ie, {
   Trigger: ee,
   Content: te,
   Options: oe,
-  Option: B,
+  Option: j,
   Search: ne,
   Empty: re,
   Create: ae