@telegraph/combobox 0.0.78 → 0.0.80

package/dist/esm/index.mjs

@@ -1,28 +1,29 @@
-import { jsx as l, jsxs as R, Fragment as _ } from "react/jsx-runtime";
-import { DismissableLayer as Z } from "@radix-ui/react-dismissable-layer";
-import * as ee from "@radix-ui/react-portal";
-import { useControllableState as te } from "@radix-ui/react-use-controllable-state";
-import * as oe from "@radix-ui/react-visually-hidden";
-import { Button as B } from "@telegraph/button";
+import { jsx as s, jsxs as w, Fragment as _ } from "react/jsx-runtime";
+import { DismissableLayer as ee } from "@radix-ui/react-dismissable-layer";
+import * as te from "@radix-ui/react-portal";
+import { useControllableState as oe } from "@radix-ui/react-use-controllable-state";
+import * as re from "@radix-ui/react-visually-hidden";
+import { Button as O } from "@telegraph/button";
 import { useComposedRefs as $ } from "@telegraph/compose-refs";
-import { RefToTgphRef as re } from "@telegraph/helpers";
+import { RefToTgphRef as ne } from "@telegraph/helpers";
 import { Lucide as E, Icon as z } from "@telegraph/icon";
-import { Input as ne } from "@telegraph/input";
-import { Stack as I, Box as G } from "@telegraph/layout";
+import { Input as ae } from "@telegraph/input";
+import { Stack as k, Box as G } from "@telegraph/layout";
 import { Menu as Q } from "@telegraph/menu";
 import { Text as H } from "@telegraph/typography";
-import s from "react";
+import l from "react";
 import { motion as P, AnimatePresence as M } from "@telegraph/motion";
 import { Tag as K } from "@telegraph/tag";
-import { Tooltip as ae } from "@telegraph/tooltip";
-const ie = {
+import { Tooltip as ie } from "@telegraph/tooltip";
+import { TooltipIfTruncated as Y } from "@telegraph/truncate";
+const ce = {
   0: "5",
   1: "6",
   2: "8",
   3: "10"
-}, S = (t) => Array.isArray(t), k = (t) => typeof t == "object" && !Array.isArray(t) || typeof t == "string" || !t, ce = (t) => {
-  const o = (a, c = []) => (s.Children.toArray(a).forEach((i) => {
-    s.isValidElement(i) && (i.props.value ? c.push(i) : i.props.children && o(i.props.children, c));
+}, R = (t) => Array.isArray(t), I = (t) => typeof t == "object" && !Array.isArray(t) || typeof t == "string" || !t, le = (t) => {
+  const o = (a, c = []) => (l.Children.toArray(a).forEach((i) => {
+    l.isValidElement(i) && (i.props.value ? c.push(i) : i.props.children && o(i.props.children, c));
   }), c);
   return o(t).map((a) => {
     var n;
@@ -47,23 +48,23 @@ const ie = {
   value: o,
   searchQuery: e
 }) => {
-  const r = Y(t);
+  const r = X(t);
   return (o == null ? void 0 : o.toLowerCase().includes(e.toLowerCase())) || r.some(
     (a) => a.toLowerCase().includes(e.toLowerCase())
   );
-}, Y = (t) => {
-  const o = s.Children.toArray(t), e = [];
+}, X = (t) => {
+  const o = l.Children.toArray(t), e = [];
   return o.forEach((r) => {
-    typeof r == "string" && e.push(r), s.isValidElement(r) && r.props.children && e.push(...Y(r.props.children));
+    typeof r == "string" && e.push(r), l.isValidElement(r) && r.props.children && e.push(...X(r.props.children));
   }), e;
-}, le = ({
+}, ue = ({
   icon: t = E.ChevronDown,
   "aria-hidden": o = !0,
   ...e
 }) => {
-  const r = s.useContext(y);
-  return /* @__PURE__ */ l(
-    B.Icon,
+  const r = l.useContext(y);
+  return /* @__PURE__ */ s(
+    O.Icon,
     {
       as: P.span,
       animate: { rotate: r.open ? 180 : 0 },
@@ -73,30 +74,30 @@ const ie = {
       ...e
     }
   );
-}, ue = ({
+}, pe = ({
   tooltipProps: t,
   ...o
 }) => {
-  const e = s.useContext(y), r = () => {
+  const e = l.useContext(y), r = () => {
     var c, n;
-    if (S(e.value)) {
+    if (R(e.value)) {
       const i = e.onValueChange;
       i == null || i([]);
     }
-    if (k(e.value)) {
+    if (I(e.value)) {
       const i = e.onValueChange;
       i == null || i(void 0);
     }
     (n = (c = e.triggerRef) == null ? void 0 : c.current) == null || n.focus();
   };
-  return s.useMemo(() => {
+  return l.useMemo(() => {
     var c;
-    if (k(e.value))
+    if (I(e.value))
       return e.clearable && e.value;
-    if (S(e.value))
+    if (R(e.value))
       return e.clearable && ((c = e.value) == null ? void 0 : c.length) > 0;
-  }, [e.clearable, e.value]) ? /* @__PURE__ */ l(ae, { label: "Clear field", ...t, children: /* @__PURE__ */ l(
-    B,
+  }, [e.clearable, e.value]) ? /* @__PURE__ */ s(ie, { label: "Clear field", ...t, children: /* @__PURE__ */ s(
+    O,
     {
       type: "button",
       icon: { icon: E.X, alt: "Clear field" },
@@ -118,13 +119,13 @@ const ie = {
       ...o
     }
   ) }) : null;
-}, pe = ({
+}, ge = ({
   children: t,
   ...o
 }) => {
-  const e = s.useContext(y), r = s.useMemo(() => {
+  const e = l.useContext(y), r = l.useMemo(() => {
     var i;
-    if (!k(e.value)) return;
+    if (!I(e.value)) return;
     const a = F(
       e.value,
       e.options,
@@ -137,8 +138,8 @@ const ie = {
     e.legacyBehavior,
     e.placeholder
   ]);
-  return /* @__PURE__ */ l(
-    B.Text,
+  return /* @__PURE__ */ s(Y, { children: /* @__PURE__ */ s(
+    O.Text,
     {
       color: e.value ? "default" : "gray",
       textOverflow: "ellipsis",
@@ -146,19 +147,28 @@ const ie = {
       ...o,
       children: t || r
     }
-  );
-}, ge = ({
+  ) });
+}, fe = ({
   children: t,
   ...o
 }) => {
-  const e = s.useContext(y);
-  return /* @__PURE__ */ l(B.Text, { color: "gray", ...o, children: t || e.placeholder });
-}, fe = ({ children: t }) => {
-  const o = s.useContext(y);
-  if (!S(o.value)) return null;
+  const e = l.useContext(y);
+  return /* @__PURE__ */ s(Y, { children: /* @__PURE__ */ s(
+    O.Text,
+    {
+      color: "gray",
+      textOverflow: "ellipsis",
+      overflow: "hidden",
+      ...o,
+      children: t || e.placeholder
+    }
+  ) });
+}, he = ({ children: t }) => {
+  const o = l.useContext(y);
+  if (!R(o.value)) return null;
   const e = o.layout || "truncate", a = (o.value.length - 2).toString().split("");
-  return /* @__PURE__ */ R(
-    I,
+  return /* @__PURE__ */ w(
+    k,
     {
       gap: "1",
       w: "full",
@@ -169,7 +179,7 @@ const ie = {
         flexGrow: 1
       },
       children: [
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ s(
           M,
           {
             presenceMap: o.value.map((c) => ({
@@ -179,7 +189,7 @@ const ie = {
             children: t
           }
         ),
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ s(
           M,
           {
             presenceMap: [
@@ -188,8 +198,8 @@ const ie = {
                 value: !0
               }
             ],
-            children: e === "truncate" && o.value.length > 2 && /* @__PURE__ */ l(
-              I,
+            children: e === "truncate" && o.value.length > 2 && /* @__PURE__ */ s(
+              k,
               {
                 as: P.div,
                 initial: { opacity: 0 },
@@ -206,9 +216,9 @@ const ie = {
                 style: {
                   backgroundImage: "linear-gradient(to left, var(--tgph-surface-1) 0 60%, transparent 90% 100%)"
                 },
-                children: /* @__PURE__ */ R(H, { as: "span", size: "1", style: { whiteSpace: "nowrap" }, children: [
+                children: /* @__PURE__ */ w(H, { as: "span", size: "1", style: { whiteSpace: "nowrap" }, children: [
                   "+",
-                  /* @__PURE__ */ R(
+                  /* @__PURE__ */ w(
                     M,
                     {
                       presenceMap: a.map((c) => ({
@@ -216,7 +226,7 @@ const ie = {
                         value: !0
                       })),
                       children: [
-                        a.map((c) => /* @__PURE__ */ l(
+                        a.map((c) => /* @__PURE__ */ s(
                           G,
                           {
                             as: P.span,
@@ -244,13 +254,13 @@ const ie = {
       ]
     }
   );
-}, j = s.createContext({
+}, j = l.createContext({
   value: ""
-}), he = ({
+}), de = ({
   value: t,
   children: o,
   ...e
-}) => /* @__PURE__ */ l(j.Provider, { value: { value: t }, children: /* @__PURE__ */ l(
+}) => /* @__PURE__ */ s(j.Provider, { value: { value: t }, children: /* @__PURE__ */ s(
   K.Root,
   {
     as: P.span,
@@ -265,11 +275,11 @@ const ie = {
     ...e,
     children: o
   }
-) }), de = ({
+) }), me = ({
   children: t,
   ...o
 }) => {
-  const e = s.useContext(y), r = s.useContext(j), a = s.useMemo(() => {
+  const e = l.useContext(y), r = l.useContext(j), a = l.useMemo(() => {
     const c = e.options.find(
       (p) => p.value === r.value
     );
@@ -286,13 +296,13 @@ const ie = {
     r.value,
     e.legacyBehavior
   ]);
-  return /* @__PURE__ */ l(K.Text, { ...o, children: t || a });
-}, me = ({
+  return /* @__PURE__ */ s(K.Text, { ...o, children: t || a });
+}, ye = ({
   children: t,
   ...o
 }) => {
-  const e = s.useContext(y), r = s.useContext(j);
-  return /* @__PURE__ */ l(
+  const e = l.useContext(y), r = l.useContext(j);
+  return /* @__PURE__ */ s(
     K.Button,
     {
       icon: { icon: E.X, alt: `Remove ${r.value}` },
@@ -305,26 +315,26 @@ const ie = {
       children: t
     }
   );
-}, ye = ({
+}, be = ({
   value: t,
   children: o,
   ...e
-}) => /* @__PURE__ */ R(D.Root, { value: t, ...e, children: [
-  /* @__PURE__ */ l(D.Text, { children: o }),
-  /* @__PURE__ */ l(D.Button, {})
+}) => /* @__PURE__ */ w(D.Root, { value: t, ...e, children: [
+  /* @__PURE__ */ s(D.Text, { children: o }),
+  /* @__PURE__ */ s(D.Button, {})
 ] }), D = {
-  Root: he,
-  Text: de,
-  Button: me,
-  Default: ye
+  Root: de,
+  Text: me,
+  Button: ye,
+  Default: be
 }, T = {
-  TriggerIndicator: le,
-  TriggerClear: ue,
-  TriggerText: pe,
-  TriggerPlaceholder: ge,
-  TriggerTagsContainer: fe,
+  TriggerIndicator: ue,
+  TriggerClear: pe,
+  TriggerText: ge,
+  TriggerPlaceholder: fe,
+  TriggerTagsContainer: he,
   TriggerTag: D
-}, be = ["ArrowDown", "PageUp", "Home"], xe = ["ArrowUp", "PageDown", "End"], X = ["Enter", " "], y = s.createContext({
+}, ve = ["ArrowDown", "PageUp", "Home"], xe = ["ArrowUp", "PageDown", "End"], q = ["Enter", " "], y = l.createContext({
   value: void 0,
   onValueChange: () => {
   },
@@ -339,7 +349,7 @@ const ie = {
   disabled: !1,
   options: [],
   legacyBehavior: !1
-}), ve = ({
+}), Ce = ({
   modal: t = !0,
   closeOnSelect: o = !0,
   clearable: e = !1,
@@ -351,52 +361,52 @@ const ie = {
   value: p,
   onValueChange: g,
   errored: b,
-  placeholder: v,
+  placeholder: x,
   layout: d,
   children: u,
   ...f
 }) => {
-  const m = s.useId(), x = s.useId(), h = s.useRef(null), w = s.useRef(null), L = s.useRef(null), V = s.useMemo(() => ce(u), [u]), [U, N] = s.useState(""), [O = !1, A] = te({
+  const m = l.useId(), v = l.useId(), h = l.useRef(null), S = l.useRef(null), L = l.useRef(null), V = l.useMemo(() => le(u), [u]), [W, N] = l.useState(""), [B = !1, A] = oe({
     prop: c,
     defaultProp: i,
     onChange: n
-  }), W = s.useCallback(() => {
-    A((J) => !J);
+  }), J = l.useCallback(() => {
+    A((Z) => !Z);
   }, [A]);
-  return s.useEffect(() => {
-    O || N("");
-  }, [O]), /* @__PURE__ */ l(
+  return l.useEffect(() => {
+    B || N("");
+  }, [B]), /* @__PURE__ */ s(
     y.Provider,
     {
       value: {
         contentId: m,
-        triggerId: x,
+        triggerId: v,
         value: p,
         // Need to cast this to avoid type errors
         // because the type of onValueChange is not
         // consistent with the value type
         onValueChange: g,
-        placeholder: v,
-        open: O,
+        placeholder: x,
+        open: B,
         setOpen: A,
-        onOpenToggle: W,
+        onOpenToggle: J,
         closeOnSelect: o,
         clearable: e,
         disabled: r,
-        searchQuery: U,
+        searchQuery: W,
         setSearchQuery: N,
         triggerRef: h,
-        searchRef: w,
+        searchRef: S,
         contentRef: L,
         errored: b,
         layout: d,
         options: V,
         legacyBehavior: a
       },
-      children: /* @__PURE__ */ l(
+      children: /* @__PURE__ */ s(
         Q.Root,
         {
-          open: O,
+          open: B,
           onOpenChange: A,
           modal: t,
           ...f,
@@ -405,38 +415,38 @@ const ie = {
       )
     }
   );
-}, Ce = () => {
-  const t = s.useContext(y);
-  if (t.value && S(t.value)) {
+}, Te = () => {
+  const t = l.useContext(y);
+  if (t.value && R(t.value)) {
     const o = t.layout || "truncate";
-    return t.value.length === 0 ? /* @__PURE__ */ l(T.TriggerPlaceholder, {}) : /* @__PURE__ */ l(T.TriggerTagsContainer, { children: t.value.map((e, r) => {
+    return t.value.length === 0 ? /* @__PURE__ */ s(T.TriggerPlaceholder, {}) : /* @__PURE__ */ s(T.TriggerTagsContainer, { children: t.value.map((e, r) => {
       const a = C(e, t.legacyBehavior);
       if (a && (o === "truncate" && r <= 1 || o === "wrap"))
-        return /* @__PURE__ */ l(re, { children: /* @__PURE__ */ l(T.TriggerTag.Default, { value: a }) }, a);
+        return /* @__PURE__ */ s(ne, { children: /* @__PURE__ */ s(T.TriggerTag.Default, { value: a }) }, a);
     }) });
   }
-  if (t && k(t.value))
-    return t.value ? /* @__PURE__ */ l(T.TriggerText, {}) : /* @__PURE__ */ l(T.TriggerPlaceholder, {});
-}, Te = ({
+  if (t && I(t.value))
+    return t.value ? /* @__PURE__ */ s(T.TriggerText, {}) : /* @__PURE__ */ s(T.TriggerPlaceholder, {});
+}, we = ({
   size: t = "2",
   children: o,
   ...e
 }) => {
-  const r = s.useContext(y), a = s.useMemo(() => {
+  const r = l.useContext(y), a = l.useMemo(() => {
     if (r.value) {
-      if (k(r.value))
+      if (I(r.value))
         return F(
           r.value,
           r.options,
           r.legacyBehavior
         );
-      if (S(r.value))
+      if (R(r.value))
         return r.value.map(
           (n) => F(n, r.options, r.legacyBehavior)
         );
     }
-  }, [r.value, r.options, r.legacyBehavior]), c = s.useCallback(() => a ? k(a) ? (a == null ? void 0 : a.label) || (a == null ? void 0 : a.value) || r.placeholder : S(a) && a.map((n) => (n == null ? void 0 : n.label) || (n == null ? void 0 : n.value)).join(", ") || r.placeholder : r.placeholder, [a, r.placeholder]);
-  return /* @__PURE__ */ l(
+  }, [r.value, r.options, r.legacyBehavior]), c = l.useCallback(() => a ? I(a) ? (a == null ? void 0 : a.label) || (a == null ? void 0 : a.value) || r.placeholder : R(a) && a.map((n) => (n == null ? void 0 : n.label) || (n == null ? void 0 : n.value)).join(", ") || r.placeholder : r.placeholder, [a, r.placeholder]);
+  return /* @__PURE__ */ s(
     Q.Trigger,
     {
       ...e,
@@ -450,7 +460,7 @@ const ie = {
           n.stopPropagation();
           return;
         }
-        if (X.includes(n.key)) {
+        if (q.includes(n.key)) {
           n.preventDefault();
           return;
         }
@@ -460,15 +470,15 @@ const ie = {
         }
       },
       tgphRef: r.triggerRef,
-      children: /* @__PURE__ */ R(
-        B.Root,
+      children: /* @__PURE__ */ w(
+        O.Root,
         {
           id: r.triggerId,
           type: "button",
           bg: "surface-1",
           variant: "outline",
           align: "center",
-          minH: ie[t],
+          minH: ce[t],
           h: "full",
           w: "full",
           py: "1",
@@ -485,10 +495,10 @@ const ie = {
           disabled: r.disabled,
           ...e,
           children: [
-            o ? typeof o == "function" ? o({ value: a }) : o : /* @__PURE__ */ l(Ce, {}),
-            /* @__PURE__ */ R(I, { align: "center", gap: "1", children: [
-              /* @__PURE__ */ l(T.TriggerClear, {}),
-              /* @__PURE__ */ l(T.TriggerIndicator, {})
+            o ? typeof o == "function" ? o({ value: a }) : o : /* @__PURE__ */ s(Te, {}),
+            /* @__PURE__ */ w(k, { align: "center", gap: "1", children: [
+              /* @__PURE__ */ s(T.TriggerClear, {}),
+              /* @__PURE__ */ s(T.TriggerIndicator, {})
             ] })
           ]
         }
@@ -501,35 +511,35 @@ const ie = {
   tgphRef: e,
   ...r
 }) => {
-  const a = s.useContext(y), c = s.useRef(!1), n = $(e, a.contentRef), i = s.useRef(null), [p, g] = s.useState(0), [b, v] = s.useState(!1), d = s.useCallback(
+  const a = l.useContext(y), c = l.useRef(!1), n = $(e, a.contentRef), i = l.useRef(null), [p, g] = l.useState(0), [b, x] = l.useState(!1), d = l.useCallback(
     (u) => {
       const f = u == null ? void 0 : u.getBoundingClientRect();
-      f && g(f.height), b || v(!0);
+      f && g(f.height), b || x(!0);
     },
     [b]
   );
-  return s.useEffect(() => {
+  return l.useEffect(() => {
     const u = new ResizeObserver((f) => {
       for (const m of f) {
-        const x = m.target;
-        d(x);
+        const v = m.target;
+        d(v);
       }
     });
     return i.current && b && u.observe(i.current), () => u.disconnect();
-  }, [b, d]), s.useEffect(() => {
-    b === !0 && a.open === !1 && v(!1);
-  }, [a.open, b]), s.useEffect(() => {
+  }, [b, d]), l.useEffect(() => {
+    b === !0 && a.open === !1 && x(!1);
+  }, [a.open, b]), l.useEffect(() => {
     let u;
     return a.open && (u = setTimeout(() => {
       d(i.current);
     }, 10)), () => u && clearTimeout(u);
-  }, [a.open, d]), /* @__PURE__ */ l(ee.Root, { asChild: !0, children: /* @__PURE__ */ l(
-    Z,
+  }, [a.open, d]), /* @__PURE__ */ s(te.Root, { asChild: !0, children: /* @__PURE__ */ s(
+    ee,
     {
       onEscapeKeyDown: (u) => {
         a.open && (u.stopPropagation(), u.preventDefault(), a.setOpen(!1));
       },
-      children: /* @__PURE__ */ l(
+      children: /* @__PURE__ */ s(
         Q.Content,
         {
           className: "tgph",
@@ -557,22 +567,22 @@ const ie = {
           role: void 0,
           "aria-orientation": void 0,
           onKeyDown: (u) => {
-            var m, x, h, w;
+            var m, v, h, S;
             u.stopPropagation();
-            const f = (x = (m = a.contentRef) == null ? void 0 : m.current) == null ? void 0 : x.querySelectorAll(
+            const f = (v = (m = a.contentRef) == null ? void 0 : m.current) == null ? void 0 : v.querySelectorAll(
               "[data-tgph-combobox-option]"
             );
-            document.activeElement === (f == null ? void 0 : f[0]) && xe.includes(u.key) && ((w = (h = a.searchRef) == null ? void 0 : h.current) == null || w.focus());
+            document.activeElement === (f == null ? void 0 : f[0]) && xe.includes(u.key) && ((S = (h = a.searchRef) == null ? void 0 : h.current) == null || S.focus());
           },
-          children: /* @__PURE__ */ l(I, { direction: "column", gap: "1", tgphRef: i, children: o })
+          children: /* @__PURE__ */ s(k, { direction: "column", gap: "1", tgphRef: i, children: o })
         }
       )
     }
   ) });
 }, Se = ({ ...t }) => {
-  const o = s.useContext(y);
-  return /* @__PURE__ */ l(
-    I,
+  const o = l.useContext(y);
+  return /* @__PURE__ */ s(
+    k,
     {
       id: o.contentId,
       direction: "column",
@@ -586,7 +596,7 @@ const ie = {
       ...t
     }
   );
-}, q = ({
+}, U = ({
   value: t,
   label: o,
   selected: e,
@@ -594,47 +604,47 @@ const ie = {
   children: a,
   ...c
 }) => {
-  const n = s.useContext(y), [i, p] = s.useState(!1), g = n.value, b = !n.searchQuery || se({
+  const n = l.useContext(y), [i, p] = l.useState(!1), g = n.value, b = !n.searchQuery || se({
     children: o || a,
     value: t,
     searchQuery: n.searchQuery
-  }), v = S(g) ? g.some(
+  }), x = R(g) ? g.some(
     (u) => C(u, n.legacyBehavior) === t
   ) : C(g, n.legacyBehavior) === t, d = (u) => {
-    var m, x;
+    var m, v;
     u.stopPropagation();
     const f = u;
-    if (!(f.key && !X.includes(f.key))) {
+    if (!(f.key && !q.includes(f.key))) {
       if (u.preventDefault(), n.closeOnSelect === !0 && n.setOpen(!1), r)
         return r(u);
-      if (k(g)) {
+      if (I(g)) {
         const h = n.onValueChange;
         n.legacyBehavior === !0 ? h == null || h({ value: t, label: o }) : h == null || h(t);
-      } else if (S(g)) {
-        const h = n.onValueChange, w = n.value, L = v ? w.filter(
+      } else if (R(g)) {
+        const h = n.onValueChange, S = n.value, L = x ? S.filter(
           (V) => C(V, n.legacyBehavior) !== t
         ) : [
-          ...w,
+          ...S,
           // TODO: Remove this once { value, label } option is deprecated
           n.legacyBehavior === !0 ? { value: t, label: o } : t
         ];
         h == null || h(L);
       }
-      (x = (m = n.triggerRef) == null ? void 0 : m.current) == null || x.focus();
+      (v = (m = n.triggerRef) == null ? void 0 : m.current) == null || v.focus();
     }
   };
   if (b)
-    return /* @__PURE__ */ l(
+    return /* @__PURE__ */ s(
       Q.Button,
       {
         type: "button",
         onSelect: d,
         onKeyDown: d,
-        selected: e === null ? null : e ?? v,
+        selected: e === null ? null : e ?? x,
         onFocus: () => p(!0),
         onBlur: () => p(!1),
         role: "option",
-        "aria-selected": v ? "true" : "false",
+        "aria-selected": x ? "true" : "false",
         "data-tgph-combobox-option": !0,
         "data-tgph-combobox-option-focused": i,
         "data-tgph-combobox-option-value": t,
@@ -643,7 +653,7 @@ const ie = {
         children: o || a || t
       }
     );
-}, we = ({
+}, Ee = ({
   label: t = "Search",
   placeholder: o = "Search",
   tgphRef: e,
@@ -651,22 +661,22 @@ const ie = {
   onValueChange: a,
   ...c
 }) => {
-  var v;
-  const n = s.useId(), i = s.useContext(y), p = $(e, i.searchRef), g = r ?? i.searchQuery, b = a ?? i.setSearchQuery;
-  return s.useEffect(() => {
+  var x;
+  const n = l.useId(), i = l.useContext(y), p = $(e, i.searchRef), g = r ?? i.searchQuery, b = a ?? i.setSearchQuery;
+  return l.useEffect(() => {
     var f;
     const d = (m) => {
-      var x, h;
-      be.includes(m.key) && ((h = (x = i.contentRef) == null ? void 0 : x.current) == null || h.focus({ preventScroll: !0 })), m.key === "Escape" && i.setOpen(!1), m.stopPropagation();
+      var v, h;
+      ve.includes(m.key) && ((h = (v = i.contentRef) == null ? void 0 : v.current) == null || h.focus({ preventScroll: !0 })), m.key === "Escape" && i.setOpen(!1), m.stopPropagation();
     }, u = (f = i.searchRef) == null ? void 0 : f.current;
     if (u)
       return u.addEventListener("keydown", d), () => {
         u.removeEventListener("keydown", d);
       };
-  }, [i]), /* @__PURE__ */ R(G, { borderBottom: "px", px: "1", pb: "1", children: [
-    /* @__PURE__ */ l(oe.Root, { children: /* @__PURE__ */ l(H, { as: "label", htmlFor: n, children: t }) }),
-    /* @__PURE__ */ l(
-      ne,
+  }, [i]), /* @__PURE__ */ w(G, { borderBottom: "px", px: "1", pb: "1", children: [
+    /* @__PURE__ */ s(re.Root, { children: /* @__PURE__ */ s(H, { as: "label", htmlFor: n, children: t }) }),
+    /* @__PURE__ */ s(
+      ae,
       {
         id: n,
         variant: "ghost",
@@ -675,9 +685,9 @@ const ie = {
         onChange: (d) => {
           b(d.target.value);
         },
-        LeadingComponent: /* @__PURE__ */ l(z, { icon: E.Search, alt: "Search Icon" }),
-        TrailingComponent: i != null && i.searchQuery && ((v = i == null ? void 0 : i.searchQuery) == null ? void 0 : v.length) > 0 ? /* @__PURE__ */ l(
-          B,
+        LeadingComponent: /* @__PURE__ */ s(z, { icon: E.Search, alt: "Search Icon" }),
+        TrailingComponent: i != null && i.searchQuery && ((x = i == null ? void 0 : i.searchQuery) == null ? void 0 : x.length) > 0 ? /* @__PURE__ */ s(
+          O,
           {
             variant: "ghost",
             color: "gray",
@@ -696,22 +706,22 @@ const ie = {
       }
     )
   ] });
-}, Ee = ({
+}, Ie = ({
   icon: t = { icon: E.Search, alt: "Search Icon" },
   message: o = "No results found",
   children: e,
   ...r
 }) => {
-  const a = s.useContext(y), [c, n] = s.useState(!1);
-  if (s.useEffect(() => {
+  const a = l.useContext(y), [c, n] = l.useState(!1);
+  if (l.useEffect(() => {
     var p, g;
     const i = (g = (p = a.contentRef) == null ? void 0 : p.current) == null ? void 0 : g.querySelectorAll(
       "[data-tgph-combobox-option]"
     );
     (i == null ? void 0 : i.length) === 0 ? n(!0) : n(!1);
   }, [a.searchQuery, a.contentRef, e]), c)
-    return /* @__PURE__ */ R(
-      I,
+    return /* @__PURE__ */ w(
+      k,
       {
         gap: "1",
         align: "center",
@@ -721,8 +731,8 @@ const ie = {
         "data-tgph-combobox-empty": !0,
         ...r,
         children: [
-          t === null ? /* @__PURE__ */ l(_, {}) : /* @__PURE__ */ l(z, { ...t }),
-          o === null ? /* @__PURE__ */ l(_, {}) : /* @__PURE__ */ l(H, { as: "span", children: o })
+          t === null ? /* @__PURE__ */ s(_, {}) : /* @__PURE__ */ s(z, { ...t }),
+          o === null ? /* @__PURE__ */ s(_, {}) : /* @__PURE__ */ s(H, { as: "span", children: o })
         ]
       }
     );
@@ -734,15 +744,15 @@ const ie = {
   legacyBehavior: a = !1,
   ...c
 }) => {
-  const n = s.useContext(y), i = s.useCallback(
+  const n = l.useContext(y), i = l.useCallback(
     (p) => !o || (o == null ? void 0 : o.length) === 0 ? !1 : o.some(
       (g) => C(g, a) === p
     ),
     [o, a]
   );
   if (n.searchQuery && !i(n.searchQuery))
-    return /* @__PURE__ */ l(
-      q,
+    return /* @__PURE__ */ s(
+      U,
       {
         leadingIcon: { icon: E.Plus, "aria-hidden": !0 },
         mx: "1",
@@ -759,19 +769,19 @@ const ie = {
         ...c
       }
     );
-}, Ie = {};
-Object.assign(Ie, {
-  Root: ve,
-  Trigger: Te,
+}, Oe = {};
+Object.assign(Oe, {
+  Root: Ce,
+  Trigger: we,
   Content: Re,
   Options: Se,
-  Option: q,
-  Search: we,
-  Empty: Ee,
+  Option: U,
+  Search: Ee,
+  Empty: Ie,
   Create: ke,
   Primitives: T
 });
 export {
-  Ie as Combobox
+  Oe as Combobox
 };
 //# sourceMappingURL=index.mjs.map