@telegraph/combobox 0.0.75 → 0.0.77

package/dist/esm/index.mjs

@@ -3,60 +3,60 @@ import { DismissableLayer as U } from "@radix-ui/react-dismissable-layer";
 import * as W from "@radix-ui/react-portal";
 import { useControllableState as J } from "@radix-ui/react-use-controllable-state";
 import * as Z from "@radix-ui/react-visually-hidden";
-import { Button as E } from "@telegraph/button";
+import { Button as I } from "@telegraph/button";
 import { useComposedRefs as j } from "@telegraph/compose-refs";
 import { RefToTgphRef as ee } from "@telegraph/helpers";
-import { Lucide as R, Icon as N } from "@telegraph/icon";
+import { Lucide as E, Icon as N } from "@telegraph/icon";
 import { Input as te } from "@telegraph/input";
-import { Stack as I, Box as _ } from "@telegraph/layout";
+import { Stack as T, 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 B, AnimatePresence as V } from "@telegraph/motion";
 import { Tag as L } from "@telegraph/tag";
 import { Tooltip as oe } from "@telegraph/tooltip";
 import { Text as M } from "@telegraph/typography";
-import i from "react";
+import s from "react";
 const ne = {
   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, re = (t) => {
-  const a = (r, c = []) => (i.Children.toArray(r).forEach((n) => {
-    i.isValidElement(n) && (n.props.value ? c.push(n) : n.props.children && a(n.props.children, c));
-  }), c);
-  return a(t).map((r) => {
-    var o;
-    const c = r;
+}, R = (e) => Array.isArray(e), k = (e) => typeof e == "object" && !Array.isArray(e) || typeof e == "string" || !e, re = (e) => {
+  const c = (o, l = []) => (s.Children.toArray(o).forEach((n) => {
+    s.isValidElement(n) && (n.props.value ? l.push(n) : n.props.children && c(n.props.children, l));
+  }), l);
+  return c(e).map((o) => {
+    var i;
+    const l = o;
     return {
-      value: c.props.value,
-      label: ((o = c.props) == null ? void 0 : o.label) || c.props.children || c.props.value
+      value: l.props.value,
+      label: ((i = l.props) == null ? void 0 : i.label) || l.props.children || l.props.value
     };
   });
-}, C = (t, a) => {
-  if (t)
-    return a === !0 ? t == null ? void 0 : t.value : t;
-}, F = (t, a, e) => {
-  if (!t || !a || a.length === 0) return;
-  const l = a.find(
-    (r) => r.value === C(t, e)
+}, C = (e, c) => {
+  if (e)
+    return c === !0 ? e == null ? void 0 : e.value : e;
+}, F = (e, c, r) => {
+  if (!e || !c || c.length === 0) return;
+  const t = c.find(
+    (o) => o.value === C(e, r)
   );
-  if (l)
-    return l;
+  if (t)
+    return t;
 }, ae = ({
-  children: t,
-  value: a,
-  searchQuery: e
+  children: e,
+  value: c,
+  searchQuery: r
 }) => {
-  const l = $(t);
-  return (a == null ? void 0 : a.toLowerCase().includes(e.toLowerCase())) || l.some(
-    (r) => r.toLowerCase().includes(e.toLowerCase())
+  const t = $(e);
+  return (c == null ? void 0 : c.toLowerCase().includes(r.toLowerCase())) || t.some(
+    (o) => o.toLowerCase().includes(r.toLowerCase())
   );
-}, $ = (t) => {
-  const a = i.Children.toArray(t), e = [];
-  return a.forEach((l) => {
-    typeof l == "string" && e.push(l), i.isValidElement(l) && l.props.children && e.push(...$(l.props.children));
-  }), e;
-}, ie = ["ArrowDown", "PageUp", "Home"], ce = ["ArrowUp", "PageDown", "End"], z = ["Enter", " "], x = i.createContext({
+}, $ = (e) => {
+  const c = s.Children.toArray(e), r = [];
+  return c.forEach((t) => {
+    typeof t == "string" && r.push(t), s.isValidElement(t) && t.props.children && r.push(...$(t.props.children));
+  }), r;
+}, ie = ["ArrowDown", "PageUp", "Home"], ce = ["ArrowUp", "PageDown", "End"], z = ["Enter", " "], x = s.createContext({
   value: void 0,
   onValueChange: () => {
   },
@@ -72,38 +72,38 @@ const ne = {
   options: [],
   legacyBehavior: !1
 }), se = ({
-  modal: t = !0,
-  closeOnSelect: a = !0,
-  clearable: e = !1,
-  disabled: l = !1,
-  legacyBehavior: r = !1,
-  open: c,
-  onOpenChange: o,
+  modal: e = !0,
+  closeOnSelect: c = !0,
+  clearable: r = !1,
+  disabled: t = !1,
+  legacyBehavior: o = !1,
+  open: l,
+  onOpenChange: i,
   defaultOpen: n,
-  value: s,
+  value: a,
   onValueChange: f,
-  errored: y,
+  errored: g,
   placeholder: v,
-  layout: d,
+  layout: m,
   children: u,
-  ...g
+  ...h
 }) => {
-  const m = i.useId(), b = i.useId(), h = i.useRef(null), w = i.useRef(null), V = i.useRef(null), D = i.useMemo(() => re(u), [u]), [Y, H] = i.useState(""), [O = !1, A] = J({
-    prop: c,
+  const y = s.useId(), b = s.useId(), d = s.useRef(null), w = s.useRef(null), D = s.useRef(null), P = s.useMemo(() => re(u), [u]), [Y, H] = s.useState(""), [O = !1, A] = J({
+    prop: l,
     defaultProp: n,
-    onChange: o
-  }), X = i.useCallback(() => {
+    onChange: i
+  }), X = s.useCallback(() => {
     A((q) => !q);
   }, [A]);
-  return i.useEffect(() => {
+  return s.useEffect(() => {
     O || H("");
   }, [O]), /* @__PURE__ */ p(
     x.Provider,
     {
       value: {
-        contentId: m,
+        contentId: y,
         triggerId: b,
-        value: s,
+        value: a,
         // Need to cast this to avoid type errors
         // because the type of onValueChange is not
         // consistent with the value type
@@ -112,42 +112,42 @@ const ne = {
         open: O,
         setOpen: A,
         onOpenToggle: X,
-        closeOnSelect: a,
-        clearable: e,
-        disabled: l,
+        closeOnSelect: c,
+        clearable: r,
+        disabled: t,
         searchQuery: Y,
         setSearchQuery: H,
-        triggerRef: h,
+        triggerRef: d,
         searchRef: w,
-        contentRef: V,
-        errored: y,
-        layout: d,
-        options: D,
-        legacyBehavior: r
+        contentRef: D,
+        errored: g,
+        layout: m,
+        options: P,
+        legacyBehavior: o
       },
       children: /* @__PURE__ */ p(
         Q.Root,
         {
           open: O,
           onOpenChange: A,
-          modal: t,
-          ...g,
+          modal: e,
+          ...h,
           children: u
         }
       )
     }
   );
-}, le = ({ value: t, ...a }) => {
-  const e = i.useContext(x), l = i.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
+}, le = ({ value: e, ...c }) => {
+  const r = s.useContext(x), t = s.useMemo(() => {
+    const o = r.options.find((n) => n.value === e);
+    if (o) return o.label || o.value;
+    if (!r.value) return;
+    const i = r.value.find(
+      (n) => C(n, r.legacyBehavior) === e
     );
-    if (o)
-      return o;
-  }, [e.options, e.value, t, e.legacyBehavior]);
+    if (i)
+      return i;
+  }, [r.options, r.value, e, r.legacyBehavior]);
   return /* @__PURE__ */ S(
     L.Root,
     {
@@ -157,20 +157,20 @@ const ne = {
       animate: { opacity: 1, scale: 1 },
       exit: { opacity: 0, scale: 0.5 },
       transition: { duration: 100, type: "spring" },
-      "tgph-motion-key": t,
+      "tgph-motion-key": e,
       size: "1",
       layout: "position",
-      ...a,
+      ...c,
       children: [
-        /* @__PURE__ */ p(L.Text, { children: l }),
+        /* @__PURE__ */ p(L.Text, { children: t }),
         /* @__PURE__ */ p(
           L.Button,
           {
-            icon: { icon: R.X, alt: `Remove ${t}` },
-            onClick: (r) => {
-              if (!e.onValueChange) return;
-              const c = e.onValueChange, n = e.value.filter((s) => C(s, e.legacyBehavior) !== t);
-              c == null || c(n), r.stopPropagation(), r.preventDefault();
+            icon: { icon: E.X, alt: `Remove ${e}` },
+            onClick: (o) => {
+              if (!r.onValueChange) return;
+              const l = r.onValueChange, n = r.value.filter((a) => C(a, r.legacyBehavior) !== e);
+              l == null || l(n), o.stopPropagation(), o.preventDefault();
             }
           }
         )
@@ -178,16 +178,16 @@ const ne = {
     }
   );
 }, ue = () => {
-  var a;
-  const t = i.useContext(x);
-  if (t.value && k(t.value)) {
-    const e = t.layout || "truncate", l = t.value.length - 2, r = l.toString().split("");
-    return t.value.length === 0 ? /* @__PURE__ */ p(E.Text, { color: "gray", children: t.placeholder }) : /* @__PURE__ */ S(
-      I,
+  var c;
+  const e = s.useContext(x);
+  if (e.value && R(e.value)) {
+    const r = e.layout || "truncate", t = e.value.length - 2, o = t.toString().split("");
+    return e.value.length === 0 ? /* @__PURE__ */ p(I.Text, { color: "gray", children: e.placeholder }) : /* @__PURE__ */ S(
+      T,
       {
         gap: "1",
         w: "full",
-        wrap: e === "wrap" ? "wrap" : "nowrap",
+        wrap: r === "wrap" ? "wrap" : "nowrap",
         align: "center",
         style: {
           position: "relative",
@@ -195,21 +195,21 @@ const ne = {
         },
         children: [
           /* @__PURE__ */ p(
-            P,
+            V,
             {
-              presenceMap: t.value.map((c) => ({
-                "tgph-motion-key": C(c, t.legacyBehavior) || "",
+              presenceMap: e.value.map((l) => ({
+                "tgph-motion-key": C(l, e.legacyBehavior) || "",
                 value: !0
               })),
-              children: t.value.map((c, o) => {
-                const n = C(c, t.legacyBehavior);
-                if (n && (e === "truncate" && o <= 1 || e === "wrap"))
+              children: e.value.map((l, i) => {
+                const n = C(l, e.legacyBehavior);
+                if (n && (r === "truncate" && i <= 1 || r === "wrap"))
                   return /* @__PURE__ */ p(ee, { children: /* @__PURE__ */ p(le, { value: n }) }, n);
               })
             }
           ),
           /* @__PURE__ */ p(
-            P,
+            V,
             {
               presenceMap: [
                 {
@@ -217,8 +217,8 @@ const ne = {
                   value: !0
                 }
               ],
-              children: e === "truncate" && t.value.length > 2 && /* @__PURE__ */ p(
-                I,
+              children: r === "truncate" && e.value.length > 2 && /* @__PURE__ */ p(
+                T,
                 {
                   as: B.div,
                   initial: { opacity: 0 },
@@ -229,7 +229,7 @@ const ne = {
                   pr: "1",
                   pl: "8",
                   align: "center",
-                  "aria-label": `${l} more selected`,
+                  "aria-label": `${t} more selected`,
                   position: "absolute",
                   right: "0",
                   style: {
@@ -238,14 +238,14 @@ const ne = {
                   children: /* @__PURE__ */ S(M, { as: "span", size: "1", style: { whiteSpace: "nowrap" }, children: [
                     "+",
                     /* @__PURE__ */ S(
-                      P,
+                      V,
                       {
-                        presenceMap: r.map((c) => ({
-                          "tgph-motion-key": c,
+                        presenceMap: o.map((l) => ({
+                          "tgph-motion-key": l,
                           value: !0
                         })),
                         children: [
-                          r.map((c) => /* @__PURE__ */ p(
+                          o.map((l) => /* @__PURE__ */ p(
                             _,
                             {
                               as: B.span,
@@ -255,10 +255,10 @@ const ne = {
                               transition: { duration: 100, type: "spring" },
                               w: "2",
                               display: "inline-block",
-                              "tgph-motion-key": c,
-                              children: c
+                              "tgph-motion-key": l,
+                              children: l
                             },
-                            c
+                            l
                           )),
                           " "
                         ]
@@ -274,128 +274,121 @@ const ne = {
       }
     );
   }
-  if (t && T(t.value)) {
-    const e = F(
-      t.value,
-      t.options,
-      t.legacyBehavior
-    ), l = (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);
+  if (e && k(e.value)) {
+    const r = F(
+      e.value,
+      e.options,
+      e.legacyBehavior
+    ), t = (r == null ? void 0 : r.label) || (r == null ? void 0 : r.value) || e.placeholder, o = e.legacyBehavior && ((c = e == null ? void 0 : e.value) == null ? void 0 : c.label);
     return /* @__PURE__ */ p(
-      E.Text,
+      I.Text,
       {
-        color: t.value ? "default" : "gray",
+        color: e.value ? "default" : "gray",
         textOverflow: "ellipsis",
         overflow: "hidden",
-        children: r || l
+        children: o || t
       }
     );
   }
-}, pe = ({ size: t = "2", ...a }) => {
-  const e = i.useContext(x), l = i.useCallback(() => {
-    var o;
-    if (!e.value) return e.placeholder;
-    if (T(e.value)) {
-      const n = F(
-        e.value,
-        e.options,
-        e.legacyBehavior
-      );
-      return (n == null ? void 0 : n.label) || e.placeholder;
-    }
-    if (k(e.value))
-      return ((o = e.value) == null ? void 0 : o.map((n) => {
-        const s = F(
-          n,
-          e.options,
-          e.legacyBehavior
+}, pe = ({
+  size: e = "2",
+  children: c,
+  ...r
+}) => {
+  const t = s.useContext(x), o = s.useMemo(() => {
+    if (t.value) {
+      if (k(t.value))
+        return F(
+          t.value,
+          t.options,
+          t.legacyBehavior
+        );
+      if (R(t.value))
+        return t.value.map(
+          (a) => F(a, t.options, t.legacyBehavior)
         );
-        return s == null ? void 0 : s.label;
-      }).join(", ")) || e.placeholder;
-  }, [
-    e.value,
-    e.placeholder,
-    e.options,
-    e.legacyBehavior
-  ]), r = i.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]), c = () => {
-    var o, n;
-    if (k(e.value)) {
-      const s = e.onValueChange;
-      s == null || s([]);
     }
-    if (T(e.value)) {
-      const s = e.onValueChange;
-      s == null || s(void 0);
+  }, [t.value, t.options, t.legacyBehavior]), l = s.useCallback(() => o ? k(o) ? (o == null ? void 0 : o.label) || (o == null ? void 0 : o.value) || t.placeholder : R(o) && o.map((a) => (a == null ? void 0 : a.label) || (a == null ? void 0 : a.value)).join(", ") || t.placeholder : t.placeholder, [o, t.placeholder]), i = s.useMemo(() => {
+    var a;
+    if (k(t.value))
+      return t.clearable && t.value;
+    if (R(t.value))
+      return t.clearable && ((a = t.value) == null ? void 0 : a.length) > 0;
+  }, [t.clearable, t.value]), n = () => {
+    var a, f;
+    if (R(t.value)) {
+      const g = t.onValueChange;
+      g == null || g([]);
     }
-    (n = (o = e.triggerRef) == null ? void 0 : o.current) == null || n.focus();
+    if (k(t.value)) {
+      const g = t.onValueChange;
+      g == null || g(void 0);
+    }
+    (f = (a = t.triggerRef) == null ? void 0 : a.current) == null || f.focus();
   };
   return /* @__PURE__ */ p(
     Q.Trigger,
     {
-      ...a,
+      ...r,
       asChild: !0,
-      onClick: (o) => {
-        var n, s;
-        o.preventDefault(), e.onOpenToggle(), (s = (n = e.triggerRef) == null ? void 0 : n.current) == null || s.focus();
+      onClick: (a) => {
+        var f, g;
+        a.preventDefault(), t.onOpenToggle(), (g = (f = t.triggerRef) == null ? void 0 : f.current) == null || g.focus();
       },
-      onKeyDown: (o) => {
-        if (o.key === "Tab") {
-          o.stopPropagation();
+      onKeyDown: (a) => {
+        if (a.key === "Tab") {
+          a.stopPropagation();
           return;
         }
-        if (z.includes(o.key)) {
-          o.preventDefault();
+        if (z.includes(a.key)) {
+          a.preventDefault();
           return;
         }
-        if (o.key === "ArrowDown") {
-          o.stopPropagation(), o.preventDefault(), e.onOpenToggle();
+        if (a.key === "ArrowDown") {
+          a.stopPropagation(), a.preventDefault(), t.onOpenToggle();
           return;
         }
       },
-      tgphRef: e.triggerRef,
+      tgphRef: t.triggerRef,
       children: /* @__PURE__ */ S(
-        E.Root,
+        I.Root,
         {
-          id: e.triggerId,
+          id: t.triggerId,
           type: "button",
           bg: "surface-1",
           variant: "outline",
           align: "center",
-          minH: ne[t],
+          minH: ne[e],
           h: "full",
           w: "full",
           py: "1",
-          size: t,
-          color: e.errored ? "red" : "gray",
+          size: e,
+          color: t.errored ? "red" : "gray",
           justify: "space-between",
           role: "combobox",
           "aria-label": l(),
-          "aria-controls": e.contentId,
-          "aria-expanded": e.open,
+          "aria-controls": t.contentId,
+          "aria-expanded": t.open,
           "aria-haspopup": "listbox",
           "data-tgph-combobox-trigger": !0,
-          "data-tgph-combobox-trigger-open": e.open,
-          disabled: e.disabled,
+          "data-tgph-combobox-trigger-open": t.open,
+          disabled: t.disabled,
+          ...r,
           children: [
-            /* @__PURE__ */ p(ue, {}),
-            /* @__PURE__ */ S(I, { align: "center", gap: "1", children: [
-              r && /* @__PURE__ */ p(oe, { label: "Clear field", children: /* @__PURE__ */ p(
-                E,
+            c ? typeof c == "function" ? c({ value: o }) : c : /* @__PURE__ */ p(ue, {}),
+            /* @__PURE__ */ S(T, { align: "center", gap: "1", children: [
+              i && /* @__PURE__ */ p(oe, { label: "Clear field", children: /* @__PURE__ */ p(
+                I,
                 {
                   type: "button",
-                  icon: { icon: R.X, alt: "Clear field" },
+                  icon: { icon: E.X, alt: "Clear field" },
                   size: "1",
                   variant: "ghost",
-                  onClick: (o) => {
-                    e.value && (o.stopPropagation(), c());
+                  onClick: (a) => {
+                    t.value && (a.stopPropagation(), n());
                   },
-                  onKeyDown: (o) => {
-                    (o.key === "Enter" || o.key === " ") && (o.stopPropagation(), c());
+                  onKeyDown: (a) => {
+                    (a.key === "Enter" || a.key === " ") && (a.stopPropagation(), n());
                   },
                   "data-tgph-combobox-clear": !0,
                   style: {
@@ -407,12 +400,12 @@ const ne = {
                 }
               ) }),
               /* @__PURE__ */ p(
-                E.Icon,
+                I.Icon,
                 {
                   as: B.span,
-                  animate: { rotate: e.open ? 180 : 0 },
+                  animate: { rotate: t.open ? 180 : 0 },
                   transition: { duration: 150, type: "spring" },
-                  icon: R.ChevronDown,
+                  icon: E.ChevronDown,
                   "aria-hidden": !0
                 }
               )
@@ -423,38 +416,38 @@ const ne = {
     }
   );
 }, fe = ({
-  style: t,
-  children: a,
-  tgphRef: e,
-  ...l
+  style: e,
+  children: c,
+  tgphRef: r,
+  ...t
 }) => {
-  const r = i.useContext(x), c = i.useRef(!1), o = j(e, r.contentRef), n = i.useRef(null), [s, f] = i.useState(0), [y, v] = i.useState(!1), d = i.useCallback(
+  const o = s.useContext(x), l = s.useRef(!1), i = j(r, o.contentRef), n = s.useRef(null), [a, f] = s.useState(0), [g, v] = s.useState(!1), m = s.useCallback(
     (u) => {
-      const g = u == null ? void 0 : u.getBoundingClientRect();
-      g && f(g.height), y || v(!0);
+      const h = u == null ? void 0 : u.getBoundingClientRect();
+      h && f(h.height), g || v(!0);
     },
-    [y]
+    [g]
   );
-  return i.useEffect(() => {
-    const u = new ResizeObserver((g) => {
-      for (const m of g) {
-        const b = m.target;
-        d(b);
+  return s.useEffect(() => {
+    const u = new ResizeObserver((h) => {
+      for (const y of h) {
+        const b = y.target;
+        m(b);
       }
     });
-    return n.current && y && u.observe(n.current), () => u.disconnect();
-  }, [y, d]), i.useEffect(() => {
-    y === !0 && r.open === !1 && v(!1);
-  }, [r.open, y]), i.useEffect(() => {
+    return n.current && g && u.observe(n.current), () => u.disconnect();
+  }, [g, m]), s.useEffect(() => {
+    g === !0 && o.open === !1 && v(!1);
+  }, [o.open, g]), s.useEffect(() => {
     let u;
-    return r.open && (u = setTimeout(() => {
-      d(n.current);
+    return o.open && (u = setTimeout(() => {
+      m(n.current);
     }, 10)), () => u && clearTimeout(u);
-  }, [r.open, d]), /* @__PURE__ */ p(W.Root, { asChild: !0, children: /* @__PURE__ */ p(
+  }, [o.open, m]), /* @__PURE__ */ p(W.Root, { asChild: !0, children: /* @__PURE__ */ p(
     U,
     {
       onEscapeKeyDown: (u) => {
-        r.open && (u.stopPropagation(), u.preventDefault(), r.setOpen(!1));
+        o.open && (u.stopPropagation(), u.preventDefault(), o.setOpen(!1));
       },
       children: /* @__PURE__ */ p(
         Q.Content,
@@ -462,183 +455,183 @@ const ne = {
           className: "tgph",
           mt: "1",
           onCloseAutoFocus: (u) => {
-            var g, m;
-            c.current || (m = (g = r.triggerRef) == null ? void 0 : g.current) == null || m.focus(), c.current = !1, u.preventDefault();
+            var h, y;
+            l.current || (y = (h = o.triggerRef) == null ? void 0 : h.current) == null || y.focus(), l.current = !1, u.preventDefault();
           },
           bg: "surface-1",
           style: {
             width: "var(--tgph-combobox-trigger-width)",
             transition: "min-height 200ms ease-in-out",
-            minHeight: s ? `${s}px` : "0",
-            ...t,
+            minHeight: a ? `${a}px` : "0",
+            ...e,
             "--tgph-combobox-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-combobox-trigger-width": "var(--radix-popper-anchor-width)",
             "--tgph-combobox-trigger-height": "var(--radix-popper-anchor-height)"
           },
-          ...l,
-          tgphRef: o,
+          ...t,
+          tgphRef: i,
           "data-tgph-combobox-content": !0,
-          "data-tgph-combobox-content-open": r.open,
+          "data-tgph-combobox-content-open": o.open,
           role: void 0,
           "aria-orientation": void 0,
           onKeyDown: (u) => {
-            var m, b, h, w;
+            var y, b, d, w;
             u.stopPropagation();
-            const g = (b = (m = r.contentRef) == null ? void 0 : m.current) == null ? void 0 : b.querySelectorAll(
+            const h = (b = (y = o.contentRef) == null ? void 0 : y.current) == null ? void 0 : b.querySelectorAll(
               "[data-tgph-combobox-option]"
             );
-            document.activeElement === (g == null ? void 0 : g[0]) && ce.includes(u.key) && ((w = (h = r.searchRef) == null ? void 0 : h.current) == null || w.focus());
+            document.activeElement === (h == null ? void 0 : h[0]) && ce.includes(u.key) && ((w = (d = o.searchRef) == null ? void 0 : d.current) == null || w.focus());
           },
-          children: /* @__PURE__ */ p(I, { direction: "column", gap: "1", tgphRef: n, children: a })
+          children: /* @__PURE__ */ p(T, { direction: "column", gap: "1", tgphRef: n, children: c })
         }
       )
     }
   ) });
-}, ge = ({ ...t }) => {
-  const a = i.useContext(x);
+}, ge = ({ ...e }) => {
+  const c = s.useContext(x);
   return /* @__PURE__ */ p(
-    I,
+    T,
     {
-      id: a.contentId,
+      id: c.contentId,
       direction: "column",
       gap: "1",
       style: {
         overflowY: "auto",
         // maxHeight defaults to available height - padding from edge of screen
-        "--max-height": t.maxHeight ? void 0 : "calc(var(--tgph-combobox-content-available-height) - var(--tgph-spacing-12))"
+        "--max-height": e.maxHeight ? void 0 : "calc(var(--tgph-combobox-content-available-height) - var(--tgph-spacing-12))"
       },
       role: "listbox",
-      ...t
+      ...e
     }
   );
 }, G = ({
-  value: t,
-  label: a,
-  selected: e,
-  onSelect: l,
-  children: r,
-  ...c
+  value: e,
+  label: c,
+  selected: r,
+  onSelect: t,
+  children: o,
+  ...l
 }) => {
-  const o = i.useContext(x), [n, s] = i.useState(!1), f = o.value, y = !o.searchQuery || ae({
-    children: a || r,
-    value: t,
-    searchQuery: o.searchQuery
-  }), v = k(f) ? f.some(
-    (u) => C(u, o.legacyBehavior) === t
-  ) : C(f, o.legacyBehavior) === t, d = (u) => {
-    var m, b;
+  const i = s.useContext(x), [n, a] = s.useState(!1), f = i.value, g = !i.searchQuery || ae({
+    children: c || o,
+    value: e,
+    searchQuery: i.searchQuery
+  }), v = R(f) ? f.some(
+    (u) => C(u, i.legacyBehavior) === e
+  ) : C(f, i.legacyBehavior) === e, m = (u) => {
+    var y, b;
     u.stopPropagation();
-    const g = u;
-    if (!(g.key && !z.includes(g.key))) {
-      if (u.preventDefault(), o.closeOnSelect === !0 && o.setOpen(!1), l)
-        return l(u);
-      if (T(f)) {
-        const h = o.onValueChange;
-        o.legacyBehavior === !0 ? h == null || h({ value: t, label: a }) : h == null || h(t);
-      } else if (k(f)) {
-        const h = o.onValueChange, w = o.value, V = v ? w.filter(
-          (D) => C(D, o.legacyBehavior) !== t
+    const h = u;
+    if (!(h.key && !z.includes(h.key))) {
+      if (u.preventDefault(), i.closeOnSelect === !0 && i.setOpen(!1), t)
+        return t(u);
+      if (k(f)) {
+        const d = i.onValueChange;
+        i.legacyBehavior === !0 ? d == null || d({ value: e, label: c }) : d == null || d(e);
+      } else if (R(f)) {
+        const d = i.onValueChange, w = i.value, D = v ? w.filter(
+          (P) => C(P, i.legacyBehavior) !== e
         ) : [
           ...w,
           // TODO: Remove this once { value, label } option is deprecated
-          o.legacyBehavior === !0 ? { value: t, label: a } : t
+          i.legacyBehavior === !0 ? { value: e, label: c } : e
         ];
-        h == null || h(V);
+        d == null || d(D);
       }
-      (b = (m = o.triggerRef) == null ? void 0 : m.current) == null || b.focus();
+      (b = (y = i.triggerRef) == null ? void 0 : y.current) == null || b.focus();
     }
   };
-  if (y)
+  if (g)
     return /* @__PURE__ */ p(
       Q.Button,
       {
         type: "button",
-        onSelect: d,
-        onKeyDown: d,
-        selected: e === null ? null : e ?? v,
-        onFocus: () => s(!0),
-        onBlur: () => s(!1),
+        onSelect: m,
+        onKeyDown: m,
+        selected: r === null ? null : r ?? v,
+        onFocus: () => a(!0),
+        onBlur: () => a(!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": a,
-        ...c,
-        children: a || r || t
+        "data-tgph-combobox-option-value": e,
+        "data-tgph-combobox-option-label": c,
+        ...l,
+        children: c || o || e
       }
     );
 }, he = ({
-  label: t = "Search",
-  placeholder: a = "Search",
-  tgphRef: e,
-  value: l,
-  onValueChange: r,
-  ...c
+  label: e = "Search",
+  placeholder: c = "Search",
+  tgphRef: r,
+  value: t,
+  onValueChange: o,
+  ...l
 }) => {
   var v;
-  const o = i.useId(), n = i.useContext(x), s = j(e, n.searchRef), f = l ?? n.searchQuery, y = r ?? n.setSearchQuery;
-  return i.useEffect(() => {
-    var g;
-    const d = (m) => {
-      var b, h;
-      ie.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();
-    }, u = (g = n.searchRef) == null ? void 0 : g.current;
+  const i = s.useId(), n = s.useContext(x), a = j(r, n.searchRef), f = t ?? n.searchQuery, g = o ?? n.setSearchQuery;
+  return s.useEffect(() => {
+    var h;
+    const m = (y) => {
+      var b, d;
+      ie.includes(y.key) && ((d = (b = n.contentRef) == null ? void 0 : b.current) == null || d.focus({ preventScroll: !0 })), y.key === "Escape" && n.setOpen(!1), y.stopPropagation();
+    }, u = (h = n.searchRef) == null ? void 0 : h.current;
     if (u)
-      return u.addEventListener("keydown", d), () => {
-        u.removeEventListener("keydown", d);
+      return u.addEventListener("keydown", m), () => {
+        u.removeEventListener("keydown", m);
       };
   }, [n]), /* @__PURE__ */ S(_, { borderBottom: "px", px: "1", pb: "1", children: [
-    /* @__PURE__ */ p(Z.Root, { children: /* @__PURE__ */ p(M, { as: "label", htmlFor: o, children: t }) }),
+    /* @__PURE__ */ p(Z.Root, { children: /* @__PURE__ */ p(M, { as: "label", htmlFor: i, children: e }) }),
     /* @__PURE__ */ p(
       te,
       {
-        id: o,
+        id: i,
         variant: "ghost",
-        placeholder: a,
+        placeholder: c,
         value: f,
-        onChange: (d) => {
-          y(d.target.value);
+        onChange: (m) => {
+          g(m.target.value);
         },
-        LeadingComponent: /* @__PURE__ */ p(N, { icon: R.Search, alt: "Search Icon" }),
+        LeadingComponent: /* @__PURE__ */ p(N, { icon: E.Search, alt: "Search Icon" }),
         TrailingComponent: n != null && n.searchQuery && ((v = n == null ? void 0 : n.searchQuery) == null ? void 0 : v.length) > 0 ? /* @__PURE__ */ p(
-          E,
+          I,
           {
             variant: "ghost",
             color: "gray",
-            icon: { icon: R.X, alt: "Clear Search Query" },
+            icon: { icon: E.X, alt: "Clear Search Query" },
             onClick: () => {
-              var d;
-              return (d = n.setSearchQuery) == null ? void 0 : d.call(n, "");
+              var m;
+              return (m = n.setSearchQuery) == null ? void 0 : m.call(n, "");
             }
           }
         ) : null,
         autoFocus: !0,
         "data-tgph-combobox-search": !0,
         "aria-controls": n.contentId,
-        ...c,
-        tgphRef: s
+        ...l,
+        tgphRef: a
       }
     )
   ] });
 }, de = ({
-  icon: t = { icon: R.Search, alt: "Search Icon" },
-  message: a = "No results found",
-  children: e,
-  ...l
+  icon: e = { icon: E.Search, alt: "Search Icon" },
+  message: c = "No results found",
+  children: r,
+  ...t
 }) => {
-  const r = i.useContext(x), [c, o] = i.useState(!1);
-  if (i.useEffect(() => {
-    var s, f;
-    const n = (f = (s = r.contentRef) == null ? void 0 : s.current) == null ? void 0 : f.querySelectorAll(
+  const o = s.useContext(x), [l, i] = s.useState(!1);
+  if (s.useEffect(() => {
+    var a, f;
+    const n = (f = (a = o.contentRef) == null ? void 0 : a.current) == null ? void 0 : f.querySelectorAll(
       "[data-tgph-combobox-option]"
     );
-    (n == null ? void 0 : n.length) === 0 ? o(!0) : o(!1);
-  }, [r.searchQuery, r.contentRef, e]), c)
+    (n == null ? void 0 : n.length) === 0 ? i(!0) : i(!1);
+  }, [o.searchQuery, o.contentRef, r]), l)
     return /* @__PURE__ */ S(
-      I,
+      T,
       {
         gap: "1",
         align: "center",
@@ -646,44 +639,44 @@ const ne = {
         w: "full",
         my: "8",
         "data-tgph-combobox-empty": !0,
-        ...l,
+        ...t,
         children: [
-          t === null ? /* @__PURE__ */ p(K, {}) : /* @__PURE__ */ p(N, { ...t }),
-          a === null ? /* @__PURE__ */ p(K, {}) : /* @__PURE__ */ p(M, { as: "span", children: a })
+          e === null ? /* @__PURE__ */ p(K, {}) : /* @__PURE__ */ p(N, { ...e }),
+          c === null ? /* @__PURE__ */ p(K, {}) : /* @__PURE__ */ p(M, { as: "span", children: c })
         ]
       }
     );
 }, me = ({
-  leadingText: t = "Create",
-  values: a,
-  onCreate: e,
-  selected: l = null,
-  legacyBehavior: r = !1,
-  ...c
+  leadingText: e = "Create",
+  values: c,
+  onCreate: r,
+  selected: t = null,
+  legacyBehavior: o = !1,
+  ...l
 }) => {
-  const o = i.useContext(x), n = i.useCallback(
-    (s) => !a || (a == null ? void 0 : a.length) === 0 ? !1 : a.some(
-      (f) => C(f, r) === s
+  const i = s.useContext(x), n = s.useCallback(
+    (a) => !c || (c == null ? void 0 : c.length) === 0 ? !1 : c.some(
+      (f) => C(f, o) === a
     ),
-    [a, r]
+    [c, o]
   );
-  if (o.searchQuery && !n(o.searchQuery))
+  if (i.searchQuery && !n(i.searchQuery))
     return /* @__PURE__ */ p(
       G,
       {
-        leadingIcon: { icon: R.Plus, "aria-hidden": !0 },
+        leadingIcon: { icon: E.Plus, "aria-hidden": !0 },
         mx: "1",
-        value: o.searchQuery,
-        label: `${t} "${o.searchQuery}"`,
-        selected: l,
+        value: i.searchQuery,
+        label: `${e} "${i.searchQuery}"`,
+        selected: t,
         onSelect: () => {
-          var s;
-          if (e && o.value && o.searchQuery) {
-            const f = r === !0 ? { value: o.searchQuery } : o.searchQuery;
-            e(f), (s = o.setSearchQuery) == null || s.call(o, "");
+          var a;
+          if (r && i.value && i.searchQuery) {
+            const f = o === !0 ? { value: i.searchQuery } : i.searchQuery;
+            r(f), (a = i.setSearchQuery) == null || a.call(i, "");
           }
         },
-        ...c
+        ...l
       }
     );
 }, ye = {};