@telegraph/combobox 0.0.1 → 0.0.2

package/dist/esm/index.mjs

@@ -1,71 +1,71 @@
-import { jsx as u, jsxs as T, Fragment as W } from "react/jsx-runtime";
-import { useControllableState as ge } from "@radix-ui/react-use-controllable-state";
-import * as be from "@radix-ui/react-visually-hidden";
-import { Icon as Y, Lucide as _ } from "@telegraph/icon";
-import * as he from "react";
+import { jsx as u, jsxs as S, Fragment as W } from "react/jsx-runtime";
+import { useControllableState as be } from "@radix-ui/react-use-controllable-state";
+import * as he from "@radix-ui/react-visually-hidden";
+import { Icon as K, Lucide as j } from "@telegraph/icon";
+import * as ye from "react";
 import p from "react";
-import { Text as N } from "@telegraph/typography";
-import { useComposedRefs as z } from "@telegraph/compose-refs";
+import { Text as P } from "@telegraph/typography";
+import { useComposedRefs as B } from "@telegraph/compose-refs";
 import { RefToTgphRef as re } from "@telegraph/helpers";
-import { Input as ye } from "@telegraph/input";
-import { Menu as D } from "@telegraph/menu";
-import { Tag as P } from "@telegraph/tag";
-import { motion as S, AnimatePresence as F } from "framer-motion";
-function oe(r) {
+import { Input as fe } from "@telegraph/input";
+import { Menu as N } from "@telegraph/menu";
+import { Tag as z } from "@telegraph/tag";
+import { motion as E, AnimatePresence as F } from "framer-motion";
+function oe(o) {
   var t, e, a = "";
-  if (typeof r == "string" || typeof r == "number") a += r;
-  else if (typeof r == "object") if (Array.isArray(r)) {
-    var i = r.length;
-    for (t = 0; t < i; t++) r[t] && (e = oe(r[t])) && (a && (a += " "), a += e);
-  } else for (e in r) r[e] && (a && (a += " "), a += e);
+  if (typeof o == "string" || typeof o == "number") a += o;
+  else if (typeof o == "object") if (Array.isArray(o)) {
+    var i = o.length;
+    for (t = 0; t < i; t++) o[t] && (e = oe(o[t])) && (a && (a += " "), a += e);
+  } else for (e in o) o[e] && (a && (a += " "), a += e);
   return a;
 }
 function $() {
-  for (var r, t, e = 0, a = "", i = arguments.length; e < i; e++) (r = arguments[e]) && (t = oe(r)) && (a && (a += " "), a += t);
+  for (var o, t, e = 0, a = "", i = arguments.length; e < i; e++) (o = arguments[e]) && (t = oe(o)) && (a && (a += " "), a += t);
   return a;
 }
-function fe(r, t) {
-  typeof r == "function" ? r(t) : r != null && (r.current = t);
+function me(o, t) {
+  typeof o == "function" ? o(t) : o != null && (o.current = t);
 }
-function me(...r) {
-  return (t) => r.forEach((e) => fe(e, t));
+function ve(...o) {
+  return (t) => o.forEach((e) => me(e, t));
 }
-function ae(...r) {
-  return he.useCallback(me(...r), r);
+function ae(...o) {
+  return ye.useCallback(ve(...o), o);
 }
-const j = ["sm", "md", "lg", "xl", "2xl"], ve = (r) => {
+const O = ["sm", "md", "lg", "xl", "2xl"], we = (o) => {
   const t = [];
   let e = null;
-  for (let a = 0; a < j.length; a++) {
-    const i = j[a];
-    if (r[i])
-      e = r[i], t.push(e);
+  for (let a = 0; a < O.length; a++) {
+    const i = O[a];
+    if (o[i])
+      e = o[i], t.push(e);
     else if (e !== null)
       t.push(e);
     else {
-      let o = null;
-      for (let n = a + 1; n < j.length; n++)
-        if (r[j[n]]) {
-          o = r[j[n]];
+      let r = null;
+      for (let n = a + 1; n < O.length; n++)
+        if (o[O[n]]) {
+          r = o[O[n]];
           break;
         }
-      if (o !== null) {
+      if (r !== null) {
         for (let n = 0; n <= a; n++)
-          t.push(o);
-        e = o;
+          t.push(r);
+        e = r;
       }
     }
   }
   return t;
-}, we = (r) => typeof r == "object" && (r.sm || r.md || r.lg || r.xl || r["2xl"]), y = ({
-  value: r,
+}, xe = (o) => typeof o == "object" && (o.sm || o.md || o.lg || o.xl || o["2xl"]), f = ({
+  value: o,
   prop: t
 }) => {
-  if (!r) return "";
+  if (!o) return "";
   if (t.valueType === "static")
-    return r.toString();
+    return o.toString();
   const e = t.type === "color" ? "" : `-${t.type}`;
-  return r === !0 ? `var(--tgph${e}-${t.default})` : `var(--tgph${e}-${r})`;
+  return o === !0 ? `var(--tgph${e}-${t.default})` : `var(--tgph${e}-${o})`;
 }, I = {
   top: 0,
   right: 1,
@@ -76,87 +76,87 @@ const j = ["sm", "md", "lg", "xl", "2xl"], ve = (r) => {
   topRight: 1,
   bottomRight: 2,
   bottomLeft: 3
-}, xe = ({
-  cssVariables: r,
+}, Re = ({
+  cssVariables: o,
   value: t,
   prop: e,
   direction: a = "all"
 }) => {
-  const i = r[`--tgph-${e.rule}`] || "", o = i ? i.split(" ") : [], n = [
-    (o == null ? void 0 : o[0]) || 0,
-    (o == null ? void 0 : o[1]) || 0,
-    (o == null ? void 0 : o[2]) || 0,
-    (o == null ? void 0 : o[3]) || 0
+  const i = o[`--tgph-${e.rule}`] || "", r = i ? i.split(" ") : [], n = [
+    (r == null ? void 0 : r[0]) || 0,
+    (r == null ? void 0 : r[1]) || 0,
+    (r == null ? void 0 : r[2]) || 0,
+    (r == null ? void 0 : r[3]) || 0
   ];
-  return a === "all" ? y({ value: t, prop: e }) : (e.ordering === "clockwise" ? (a === "top" && (n[x.topLeft] = y({
+  return a === "all" ? f({ value: t, prop: e }) : (e.ordering === "clockwise" ? (a === "top" && (n[x.topLeft] = f({
     value: t,
     prop: e
-  }), n[x.topRight] = y({
+  }), n[x.topRight] = f({
     value: t,
     prop: e
-  })), a === "right" && (n[x.topRight] = y({
+  })), a === "right" && (n[x.topRight] = f({
     value: t,
     prop: e
-  }), n[x.bottomRight] = y({
+  }), n[x.bottomRight] = f({
     value: t,
     prop: e
-  })), a === "bottom" && (n[x.bottomRight] = y({
+  })), a === "bottom" && (n[x.bottomRight] = f({
     value: t,
     prop: e
-  }), n[x.bottomLeft] = y({
+  }), n[x.bottomLeft] = f({
     value: t,
     prop: e
-  })), a === "left" && (n[x.bottomLeft] = y({
+  })), a === "left" && (n[x.bottomLeft] = f({
     value: t,
     prop: e
-  }), n[x.topLeft] = y({
+  }), n[x.topLeft] = f({
     value: t,
     prop: e
-  })), (a === "topLeft" || a === "topRight" || a === "bottomRight" || a === "bottomLeft") && (n[x[a]] = y({
+  })), (a === "topLeft" || a === "topRight" || a === "bottomRight" || a === "bottomLeft") && (n[x[a]] = f({
     value: t,
     prop: e
-  }))) : (a === "x" && (n[I.left] = y({
+  }))) : (a === "x" && (n[I.left] = f({
     value: t,
     prop: e
-  }), n[I.right] = y({
+  }), n[I.right] = f({
     value: t,
     prop: e
-  })), a === "y" && (n[I.top] = y({
+  })), a === "y" && (n[I.top] = f({
     value: t,
     prop: e
-  }), n[I.bottom] = y({
+  }), n[I.bottom] = f({
     value: t,
     prop: e
-  })), (a === "top" || a === "bottom" || a === "left" || a === "right") && (n[I[a]] = y({
+  })), (a === "top" || a === "bottom" || a === "left" || a === "right") && (n[I[a]] = f({
     value: t,
     prop: e
   }))), n.join(" "));
 }, G = ({
-  prop: r,
+  prop: o,
   value: t,
   cssVariables: e
-}) => r.direction ? xe({
+}) => o.direction ? Re({
   cssVariables: e,
-  prop: r,
+  prop: o,
   value: t,
-  direction: r.direction,
-  type: r.type
-}) : y({ value: t, prop: r }), ne = ({
-  props: r,
+  direction: o.direction,
+  type: o.type
+}) : f({ value: t, prop: o }), ne = ({
+  props: o,
   ref: t,
   propsMap: e
 }) => {
   if (!t.current) return;
   const a = {};
-  Object.entries(r).forEach(([i, o]) => {
+  Object.entries(o).forEach(([i, r]) => {
     const n = e[i];
-    n && (typeof o == "string" || typeof o == "boolean" ? a[`--tgph-${n.rule}`] = G({
+    n && (typeof r == "string" || typeof r == "boolean" ? a[`--tgph-${n.rule}`] = G({
       prop: n,
       key: i,
-      value: o,
+      value: r,
       cssVariables: a
-    }) : we(o) && ve(o).forEach((l, c) => {
-      l && (a[`--tgph-${n.rule}-${j[c]}`] = G({
+    }) : xe(r) && we(r).forEach((l, c) => {
+      l && (a[`--tgph-${n.rule}-${O[c]}`] = G({
         prop: n,
         key: i,
         value: l,
@@ -371,23 +371,23 @@ const j = ["sm", "md", "lg", "xl", "2xl"], ve = (r) => {
     rule: "box-shadow",
     type: "shadow"
   }
-}, Re = ({
-  as: r,
+}, ke = ({
+  as: o,
   className: t,
   tgphRef: e,
   ...a
 }) => {
-  const i = r || "div", o = p.useRef(null), n = ae(e, o), l = p.useMemo(() => {
+  const i = o || "div", r = p.useRef(null), n = ae(e, r), l = p.useMemo(() => {
     const c = { borderColor: !0, ...a };
     return Object.keys(c).reduce(
-      (d, s) => (Object.keys(U).some((g) => g === s) ? d.box[s] = c[s] : d.rest[s] = c[s], d),
+      (d, s) => (Object.keys(U).some((b) => b === s) ? d.box[s] = c[s] : d.rest[s] = c[s], d),
       { box: {}, rest: {} }
     );
   }, [a]);
   return p.useLayoutEffect(() => {
     ne({
       props: l.box,
-      ref: o,
+      ref: r,
       propsMap: U
     });
   }, [l.box]), /* @__PURE__ */ u(
@@ -429,12 +429,12 @@ const j = ["sm", "md", "lg", "xl", "2xl"], ve = (r) => {
     type: "spacing",
     valueType: "variable"
   }
-}, ke = ({
-  className: r,
+}, Ce = ({
+  className: o,
   tgphRef: t,
   ...e
 }) => {
-  const a = p.useRef(null), i = ae(t, a), o = p.useMemo(
+  const a = p.useRef(null), i = ae(t, a), r = p.useMemo(
     () => Object.keys(e).reduce(
       (n, l) => (Object.keys(J).some((c) => c === l) ? n.stack[l] = e[l] : n.rest[l] = e[l], n),
       { stack: {}, rest: {} }
@@ -443,19 +443,19 @@ const j = ["sm", "md", "lg", "xl", "2xl"], ve = (r) => {
   );
   return p.useLayoutEffect(() => {
     ne({
-      props: o.stack,
+      props: r.stack,
       ref: a,
       propsMap: J
     });
-  }, [o.stack, i]), /* @__PURE__ */ u(
-    Re,
+  }, [r.stack, i]), /* @__PURE__ */ u(
+    ke,
     {
-      className: $("tgph-stack", r),
+      className: $("tgph-stack", o),
       tgphRef: i,
-      ...o.rest
+      ...r.rest
     }
   );
-}, Ce = {
+}, Le = {
   solid: {
     gray: "bg-gray-9 hover:bg-gray-10 focus:bg-gray-11 data-[tgph-button-active=true]:!bg-gray-11",
     red: "bg-red-9 hover:bg-red-10 focus:bg-red-11 data-[tgph-button-active=true]:!bg-red-11",
@@ -477,13 +477,13 @@ const j = ["sm", "md", "lg", "xl", "2xl"], ve = (r) => {
     disabled: "bg-gray-2"
   },
   outline: {
-    gray: "bg-transparent shadow-[inset_0_0_0_1px] shadow-gray-6 hover:shadow-gray-7 focus:shadow-gray-8 data-[tgph-button-active=true]:!shadow-gray-8",
-    red: "bg-transparent shadow-[inset_0_0_0_1px] shadow-red-6 hover:shadow-red-7 focus:shadow-red-8 data-[tgph-button-active=true]:!shadow-red-8",
-    accent: "bg-transparent shadow-[inset_0_0_0_1px] shadow-accent-6 hover:shadow-accent-7 focus:shadow-accent-8  data-[tgph-button-active=true]:!shadow-accent-8",
-    green: "bg-transparent shadow-[inset_0_0_0_1px] shadow-green-6 hover:shadow-green-7 focus:shadow-green-8 data-[tgph-button-active=true]:!shadow-green-8",
-    blue: "bg-transparent shadow-[inset_0_0_0_1px] shadow-blue-6 hover:shadow-blue-7 focus:shadow-blue-8 data-[tgph-button-active=true]:!shadow-blue-8",
-    yellow: "bg-transparent shadow-[inset_0_0_0_1px] shadow-yellow-6 hover:shadow-yellow-7 focus:shadow-yellow-8 data-[tgph-button-active=true]:!shadow-yellow-8",
-    purple: "bg-transparent shadow-[inset_0_0_0_1px] shadow-purple-6 hover:shadow-purple-7 focus:shadow-purple-8 data-[tgph-button-active=true]:!shadow-purple-8",
+    gray: "bg-surface-1 shadow-[inset_0_0_0_1px] shadow-gray-6 hover:shadow-gray-7 focus:shadow-gray-8 data-[tgph-button-active=true]:!shadow-gray-8",
+    red: "bg-surface-1 shadow-[inset_0_0_0_1px] shadow-red-6 hover:shadow-red-7 focus:shadow-red-8 data-[tgph-button-active=true]:!shadow-red-8",
+    accent: "bg-surface-1 shadow-[inset_0_0_0_1px] shadow-accent-6 hover:shadow-accent-7 focus:shadow-accent-8  data-[tgph-button-active=true]:!shadow-accent-8",
+    green: "bg-surface-1 shadow-[inset_0_0_0_1px] shadow-green-6 hover:shadow-green-7 focus:shadow-green-8 data-[tgph-button-active=true]:!shadow-green-8",
+    blue: "bg-surface-1 shadow-[inset_0_0_0_1px] shadow-blue-6 hover:shadow-blue-7 focus:shadow-blue-8 data-[tgph-button-active=true]:!shadow-blue-8",
+    yellow: "bg-surface-1 shadow-[inset_0_0_0_1px] shadow-yellow-6 hover:shadow-yellow-7 focus:shadow-yellow-8 data-[tgph-button-active=true]:!shadow-yellow-8",
+    purple: "bg-surface-1 shadow-[inset_0_0_0_1px] shadow-purple-6 hover:shadow-purple-7 focus:shadow-purple-8 data-[tgph-button-active=true]:!shadow-purple-8",
     disabled: "bg-gray-2"
   },
   ghost: {
@@ -537,11 +537,11 @@ const j = ["sm", "md", "lg", "xl", "2xl"], ve = (r) => {
       px: "0"
     }
   }
-}, Le = {
+}, Te = {
   1: "1",
   2: "2",
   3: "3"
-}, Te = {
+}, Se = {
   solid: {
     gray: "white",
     red: "white",
@@ -582,11 +582,11 @@ const j = ["sm", "md", "lg", "xl", "2xl"], ve = (r) => {
     purple: "purple",
     disabled: "disabled"
   }
-}, Se = {
+}, Ee = {
   1: "1",
   2: "2",
   3: "3"
-}, je = {
+}, Oe = {
   solid: {
     gray: "white",
     red: "white",
@@ -627,10 +627,10 @@ const j = ["sm", "md", "lg", "xl", "2xl"], ve = (r) => {
     purple: "purple",
     disabled: "disabled"
   }
-}, Oe = {
+}, _e = {
   default: "secondary",
   "icon-only": "primary"
-}, K = p.createContext({
+}, Y = p.createContext({
   variant: "solid",
   size: "2",
   color: "gray",
@@ -638,53 +638,53 @@ const j = ["sm", "md", "lg", "xl", "2xl"], ve = (r) => {
   layout: "default",
   active: !1
 }), ie = ({
-  as: r,
+  as: o,
   variant: t = "solid",
   size: e = "2",
   color: a = "gray",
   state: i = "default",
-  active: o = !1,
+  active: r = !1,
   disabled: n,
   className: l,
   ...c
 }) => {
-  const d = n ? "disabled" : i, s = d === "disabled" ? "disabled" : a, g = p.useMemo(() => {
-    var m;
-    const b = p.Children.toArray(c == null ? void 0 : c.children);
-    if ((b == null ? void 0 : b.length) === 1 && p.isValidElement(b[0])) {
-      const h = b[0];
-      if ((m = h == null ? void 0 : h.props) != null && m.icon)
+  const d = n ? "disabled" : i, s = d === "disabled" ? "disabled" : a, b = p.useMemo(() => {
+    var y;
+    const g = p.Children.toArray(c == null ? void 0 : c.children);
+    if ((g == null ? void 0 : g.length) === 1 && p.isValidElement(g[0])) {
+      const h = g[0];
+      if ((y = h == null ? void 0 : h.props) != null && y.icon)
         return "icon-only";
     }
     return "default";
   }, [c == null ? void 0 : c.children]);
   return /* @__PURE__ */ u(
-    K.Provider,
+    Y.Provider,
     {
-      value: { variant: t, size: e, color: s, state: d, layout: g, active: o },
+      value: { variant: t, size: e, color: s, state: d, layout: b, active: r },
       children: /* @__PURE__ */ u(
-        ke,
+        Ce,
         {
-          as: r || "button",
+          as: o || "button",
           className: $(
             "appearance-none border-0 cursor-pointer bg-none box-border [font-family:inherit]",
             "transition-colors no-underline",
             d === "disabled" && "cursor-not-allowed",
-            Ce[t][s],
-            V[g][e],
+            Le[t][s],
+            V[b][e],
             l
           ),
-          h: V[g][e].h,
-          w: V[g][e].w,
-          gap: V[g][e].gap,
-          px: V[g][e].px,
+          h: V[b][e].h,
+          w: V[b][e].w,
+          gap: V[b][e].gap,
+          px: V[b][e].px,
           display: "inline-flex",
           align: "center",
           justify: "center",
           rounded: "3",
           "data-tgph-button": !0,
-          "data-tgph-button-layout": g,
-          "data-tgph-button-active": o,
+          "data-tgph-button-layout": b,
+          "data-tgph-button-active": r,
           disabled: n,
           ...c
         }
@@ -692,61 +692,61 @@ const j = ["sm", "md", "lg", "xl", "2xl"], ve = (r) => {
     }
   );
 }, H = ({
-  size: r,
+  size: o,
   color: t,
   variant: e,
   icon: a,
   alt: i,
-  "aria-hidden": o,
+  "aria-hidden": r,
   ...n
 }) => {
-  const l = p.useContext(K), c = {
-    size: r ?? Se[l.size],
-    color: t ?? je[l.variant][l.color],
-    variant: e ?? Oe[l.layout]
+  const l = p.useContext(Y), c = {
+    size: o ?? Ee[l.size],
+    color: t ?? Oe[l.variant][l.color],
+    variant: e ?? _e[l.layout]
   };
   return /* @__PURE__ */ u(
-    Y,
+    K,
     {
       icon: a,
       "data-button-icon": !0,
-      ...i ? { alt: i } : { "aria-hidden": o },
+      ...i ? { alt: i } : { "aria-hidden": r },
       ...c,
       ...n
     }
   );
 }, le = ({
-  as: r,
+  as: o,
   color: t,
   size: e,
   weight: a = "medium",
   className: i,
-  ...o
+  ...r
 }) => {
-  const n = p.useContext(K);
+  const n = p.useContext(Y);
   return /* @__PURE__ */ u(
-    N,
+    P,
     {
-      as: r || "span",
-      color: t ?? Te[n.variant][n.color],
-      size: e ?? Le[n.size],
+      as: o || "span",
+      color: t ?? Se[n.variant][n.color],
+      size: e ?? Te[n.size],
       weight: a,
       className: $("no-underline whitespace-nowrap", i),
       internal_optionalAs: !0,
       "data-button-text": !0,
-      ...o
+      ...r
     }
   );
 }, ce = ({
-  leadingIcon: r,
+  leadingIcon: o,
   trailingIcon: t,
   icon: e,
   children: a,
   ...i
 }) => {
-  const o = r || e;
-  return /* @__PURE__ */ T(ie, { ...i, children: [
-    o && /* @__PURE__ */ u(H, { ...o }),
+  const r = o || e;
+  return /* @__PURE__ */ S(ie, { ...i, children: [
+    r && /* @__PURE__ */ u(H, { ...r }),
     a && /* @__PURE__ */ u(le, { children: a }),
     t && /* @__PURE__ */ u(H, { ...t })
   ] });
@@ -756,39 +756,39 @@ Object.assign(ce, {
   Icon: H,
   Text: le
 });
-const M = ce, O = ["sm", "md", "lg", "xl", "2xl"], _e = (r) => {
+const D = ce, _ = ["sm", "md", "lg", "xl", "2xl"], je = (o) => {
   const t = [];
   let e = null;
-  for (let a = 0; a < O.length; a++) {
-    const i = O[a];
-    if (r[i])
-      e = r[i], t.push(e);
+  for (let a = 0; a < _.length; a++) {
+    const i = _[a];
+    if (o[i])
+      e = o[i], t.push(e);
     else if (e !== null)
       t.push(e);
     else {
-      let o = null;
-      for (let n = a + 1; n < O.length; n++)
-        if (r[O[n]]) {
-          o = r[O[n]];
+      let r = null;
+      for (let n = a + 1; n < _.length; n++)
+        if (o[_[n]]) {
+          r = o[_[n]];
           break;
         }
-      if (o !== null) {
+      if (r !== null) {
         for (let n = 0; n <= a; n++)
-          t.push(o);
-        e = o;
+          t.push(r);
+        e = r;
       }
     }
   }
   return t;
-}, $e = (r) => typeof r == "object" && (r.sm || r.md || r.lg || r.xl || r["2xl"]), f = ({
-  value: r,
+}, $e = (o) => typeof o == "object" && (o.sm || o.md || o.lg || o.xl || o["2xl"]), m = ({
+  value: o,
   prop: t
 }) => {
-  if (!r) return "";
+  if (!o) return "";
   if (t.valueType === "static")
-    return r.toString();
+    return o.toString();
   const e = t.type === "color" ? "" : `-${t.type}`;
-  return r === !0 ? `var(--tgph${e}-${t.default})` : `var(--tgph${e}-${r})`;
+  return o === !0 ? `var(--tgph${e}-${t.default})` : `var(--tgph${e}-${o})`;
 }, A = {
   top: 0,
   right: 1,
@@ -799,87 +799,87 @@ const M = ce, O = ["sm", "md", "lg", "xl", "2xl"], _e = (r) => {
   topRight: 1,
   bottomRight: 2,
   bottomLeft: 3
-}, Ee = ({
-  cssVariables: r,
+}, Ie = ({
+  cssVariables: o,
   value: t,
   prop: e,
   direction: a = "all"
 }) => {
-  const i = r[`--tgph-${e.rule}`] || "", o = i ? i.split(" ") : [], n = [
-    (o == null ? void 0 : o[0]) || 0,
-    (o == null ? void 0 : o[1]) || 0,
-    (o == null ? void 0 : o[2]) || 0,
-    (o == null ? void 0 : o[3]) || 0
+  const i = o[`--tgph-${e.rule}`] || "", r = i ? i.split(" ") : [], n = [
+    (r == null ? void 0 : r[0]) || 0,
+    (r == null ? void 0 : r[1]) || 0,
+    (r == null ? void 0 : r[2]) || 0,
+    (r == null ? void 0 : r[3]) || 0
   ];
-  return a === "all" ? f({ value: t, prop: e }) : (e.ordering === "clockwise" ? (a === "top" && (n[R.topLeft] = f({
+  return a === "all" ? m({ value: t, prop: e }) : (e.ordering === "clockwise" ? (a === "top" && (n[R.topLeft] = m({
     value: t,
     prop: e
-  }), n[R.topRight] = f({
+  }), n[R.topRight] = m({
     value: t,
     prop: e
-  })), a === "right" && (n[R.topRight] = f({
+  })), a === "right" && (n[R.topRight] = m({
     value: t,
     prop: e
-  }), n[R.bottomRight] = f({
+  }), n[R.bottomRight] = m({
     value: t,
     prop: e
-  })), a === "bottom" && (n[R.bottomRight] = f({
+  })), a === "bottom" && (n[R.bottomRight] = m({
     value: t,
     prop: e
-  }), n[R.bottomLeft] = f({
+  }), n[R.bottomLeft] = m({
     value: t,
     prop: e
-  })), a === "left" && (n[R.bottomLeft] = f({
+  })), a === "left" && (n[R.bottomLeft] = m({
     value: t,
     prop: e
-  }), n[R.topLeft] = f({
+  }), n[R.topLeft] = m({
     value: t,
     prop: e
-  })), (a === "topLeft" || a === "topRight" || a === "bottomRight" || a === "bottomLeft") && (n[R[a]] = f({
+  })), (a === "topLeft" || a === "topRight" || a === "bottomRight" || a === "bottomLeft") && (n[R[a]] = m({
     value: t,
     prop: e
-  }))) : (a === "x" && (n[A.left] = f({
+  }))) : (a === "x" && (n[A.left] = m({
     value: t,
     prop: e
-  }), n[A.right] = f({
+  }), n[A.right] = m({
     value: t,
     prop: e
-  })), a === "y" && (n[A.top] = f({
+  })), a === "y" && (n[A.top] = m({
     value: t,
     prop: e
-  }), n[A.bottom] = f({
+  }), n[A.bottom] = m({
     value: t,
     prop: e
-  })), (a === "top" || a === "bottom" || a === "left" || a === "right") && (n[A[a]] = f({
+  })), (a === "top" || a === "bottom" || a === "left" || a === "right") && (n[A[a]] = m({
     value: t,
     prop: e
   }))), n.join(" "));
 }, Z = ({
-  prop: r,
+  prop: o,
   value: t,
   cssVariables: e
-}) => r.direction ? Ee({
+}) => o.direction ? Ie({
   cssVariables: e,
-  prop: r,
+  prop: o,
   value: t,
-  direction: r.direction,
-  type: r.type
-}) : f({ value: t, prop: r }), pe = ({
-  props: r,
+  direction: o.direction,
+  type: o.type
+}) : m({ value: t, prop: o }), pe = ({
+  props: o,
   ref: t,
   propsMap: e
 }) => {
   if (!t.current) return;
   const a = {};
-  Object.entries(r).forEach(([i, o]) => {
+  Object.entries(o).forEach(([i, r]) => {
     const n = e[i];
-    n && (typeof o == "string" || typeof o == "boolean" ? a[`--tgph-${n.rule}`] = Z({
+    n && (typeof r == "string" || typeof r == "boolean" ? a[`--tgph-${n.rule}`] = Z({
       prop: n,
       key: i,
-      value: o,
+      value: r,
       cssVariables: a
-    }) : $e(o) && _e(o).forEach((l, c) => {
-      l && (a[`--tgph-${n.rule}-${O[c]}`] = Z({
+    }) : $e(r) && je(r).forEach((l, c) => {
+      l && (a[`--tgph-${n.rule}-${_[c]}`] = Z({
         prop: n,
         key: i,
         value: l,
@@ -1095,22 +1095,22 @@ const M = ce, O = ["sm", "md", "lg", "xl", "2xl"], _e = (r) => {
     type: "shadow"
   }
 }, X = ({
-  as: r,
+  as: o,
   className: t,
   tgphRef: e,
   ...a
 }) => {
-  const i = r || "div", o = p.useRef(null), n = z(e, o), l = p.useMemo(() => {
+  const i = o || "div", r = p.useRef(null), n = B(e, r), l = p.useMemo(() => {
     const c = { borderColor: !0, ...a };
     return Object.keys(c).reduce(
-      (d, s) => (Object.keys(ee).some((g) => g === s) ? d.box[s] = c[s] : d.rest[s] = c[s], d),
+      (d, s) => (Object.keys(ee).some((b) => b === s) ? d.box[s] = c[s] : d.rest[s] = c[s], d),
       { box: {}, rest: {} }
     );
   }, [a]);
   return p.useLayoutEffect(() => {
     pe({
       props: l.box,
-      ref: o,
+      ref: r,
       propsMap: ee
     });
   }, [l.box]), /* @__PURE__ */ u(
@@ -1152,12 +1152,12 @@ const M = ce, O = ["sm", "md", "lg", "xl", "2xl"], _e = (r) => {
     type: "spacing",
     valueType: "variable"
   }
-}, L = ({
-  className: r,
+}, T = ({
+  className: o,
   tgphRef: t,
   ...e
 }) => {
-  const a = p.useRef(null), i = z(t, a), o = p.useMemo(
+  const a = p.useRef(null), i = B(t, a), r = p.useMemo(
     () => Object.keys(e).reduce(
       (n, l) => (Object.keys(te).some((c) => c === l) ? n.stack[l] = e[l] : n.rest[l] = e[l], n),
       { stack: {}, rest: {} }
@@ -1166,19 +1166,19 @@ const M = ce, O = ["sm", "md", "lg", "xl", "2xl"], _e = (r) => {
   );
   return p.useLayoutEffect(() => {
     pe({
-      props: o.stack,
+      props: r.stack,
       ref: a,
       propsMap: te
     });
-  }, [o.stack, i]), /* @__PURE__ */ u(
+  }, [r.stack, i]), /* @__PURE__ */ u(
     X,
     {
-      className: $("tgph-stack", r),
+      className: $("tgph-stack", o),
       tgphRef: i,
-      ...o.rest
+      ...r.rest
     }
   );
-}, Q = (r) => Array.isArray(r), q = (r) => typeof r == "object" && !Array.isArray(r), Ie = ["ArrowDown", "PageUp", "Home"], Ve = ["ArrowUp", "PageDown", "End"], w = p.createContext({
+}, Q = (o) => Array.isArray(o), q = (o) => typeof o == "object" && !Array.isArray(o), Ve = ["ArrowDown", "PageUp", "Home"], Ae = ["ArrowUp", "PageDown", "End"], ue = ["Enter", " "], w = p.createContext({
   onValueChange: () => {
   },
   contentId: "",
@@ -1188,67 +1188,67 @@ const M = ce, O = ["sm", "md", "lg", "xl", "2xl"], _e = (r) => {
   },
   onOpenToggle: () => {
   }
-}), Ae = ({
-  modal: r = !0,
+}), Qe = ({
+  modal: o = !0,
   closeOnSelect: t = !0,
   open: e,
   onOpenChange: a,
   defaultOpen: i,
-  value: o,
+  value: r,
   onValueChange: n,
   errored: l,
   placeholder: c,
   layout: d,
   ...s
 }) => {
-  const g = p.useId(), m = p.useId(), b = p.useRef(null), h = p.useRef(null), v = p.useRef(null), [k, E] = p.useState(""), [C = !1, B] = ge({
+  const b = p.useId(), y = p.useId(), g = p.useRef(null), h = p.useRef(null), v = p.useRef(null), [k, C] = p.useState(""), [L = !1, M] = be({
     prop: e,
     defaultProp: i,
     onChange: a
-  }), se = p.useCallback(() => {
-    B((de) => !de);
-  }, [B]);
+  }), de = p.useCallback(() => {
+    M((ge) => !ge);
+  }, [M]);
   return p.useEffect(() => {
-    C || E("");
-  }, [C]), /* @__PURE__ */ u(
+    L || C("");
+  }, [L]), /* @__PURE__ */ u(
     w.Provider,
     {
       value: {
-        contentId: g,
-        triggerId: m,
-        value: o,
+        contentId: b,
+        triggerId: y,
+        value: r,
         onValueChange: n,
         placeholder: c,
-        open: C,
-        setOpen: B,
-        onOpenToggle: se,
+        open: L,
+        setOpen: M,
+        onOpenToggle: de,
         closeOnSelect: t,
         searchQuery: k,
-        setSearchQuery: E,
-        triggerRef: b,
+        setSearchQuery: C,
+        triggerRef: g,
         searchRef: h,
         contentRef: v,
         errored: l,
         layout: d
       },
       children: /* @__PURE__ */ u(
-        D.Root,
+        N.Root,
         {
-          open: C,
-          onOpenChange: B,
-          modal: r,
+          open: L,
+          onOpenChange: M,
+          modal: o,
           ...s
         }
       )
     }
   );
-}, Qe = ({ label: r, value: t, ...e }) => {
+}, De = ({ label: o, value: t, ...e }) => {
   const a = p.useContext(w);
-  return /* @__PURE__ */ T(
-    P.Root,
+  return /* @__PURE__ */ S(
+    z.Root,
     {
       size: "1",
-      as: S.span,
+      as: E.span,
       initial: { opacity: 0, transform: "scale(0.8)" },
       animate: { opacity: 1, transform: "scale(1)" },
       exit: { opacity: 0, transform: "scale(0.5)" },
@@ -1265,16 +1265,14 @@ const M = ce, O = ["sm", "md", "lg", "xl", "2xl"], _e = (r) => {
       },
       ...e,
       children: [
-        /* @__PURE__ */ u(P.Text, { children: r || t }),
+        /* @__PURE__ */ u(z.Text, { children: o || t }),
         /* @__PURE__ */ u(
-          P.Button,
+          z.Button,
           {
-            as: "span",
-            role: "button",
-            icon: { icon: _.X, alt: `Remove ${t}` },
+            icon: { icon: j.X, alt: `Remove ${t}` },
             onClick: (i) => {
-              const o = a.onValueChange, l = a.value.filter((c) => c.value !== t);
-              o(l), i.stopPropagation();
+              const r = a.onValueChange, l = a.value.filter((c) => c.value !== t);
+              r(l), i.stopPropagation(), i.preventDefault();
             }
           }
         )
@@ -1282,14 +1280,14 @@ const M = ce, O = ["sm", "md", "lg", "xl", "2xl"], _e = (r) => {
     }
   );
 }, Me = ({
-  size: r = "1"
+  size: o = "1"
 }) => {
   var a, i;
-  const t = p.useContext(w), e = r === "1" ? "6" : r === "2" ? "8" : "10";
+  const t = p.useContext(w), e = o === "1" ? "6" : o === "2" ? "8" : "10";
   if (t.value && Q(t.value)) {
-    const o = t.value, n = t.layout || "truncate", l = o.length - 2, c = l.toString().split("");
-    return o.length === 0 ? /* @__PURE__ */ u(L, { h: e, align: "center", children: /* @__PURE__ */ u(M.Text, { color: "gray", children: t.placeholder }) }) : /* @__PURE__ */ T(
-      L,
+    const r = t.value, n = t.layout || "truncate", l = r.length - 2, c = l.toString().split("");
+    return r.length === 0 ? /* @__PURE__ */ u(T, { h: e, align: "center", my: "1", children: /* @__PURE__ */ u(D.Text, { color: "gray", children: t.placeholder }) }) : /* @__PURE__ */ S(
+      T,
       {
         gap: "1",
         w: "full",
@@ -1301,14 +1299,14 @@ const M = ce, O = ["sm", "md", "lg", "xl", "2xl"], _e = (r) => {
           flexGrow: 1
         },
         children: [
-          /* @__PURE__ */ u(F, { initial: !1, mode: "popLayout", children: o.map((d, s) => {
+          /* @__PURE__ */ u(F, { initial: !1, mode: "popLayout", children: r.map((d, s) => {
             if (n === "truncate" && s <= 1 || n === "wrap")
-              return /* @__PURE__ */ u(re, { children: /* @__PURE__ */ u(Qe, { ...d }) }, d.value);
+              return /* @__PURE__ */ u(re, { children: /* @__PURE__ */ u(De, { ...d }) }, d.value);
           }) }),
-          /* @__PURE__ */ u(F, { children: n === "truncate" && o.length > 2 && /* @__PURE__ */ u(
-            L,
+          /* @__PURE__ */ u(F, { children: n === "truncate" && r.length > 2 && /* @__PURE__ */ u(
+            T,
             {
-              as: S.div,
+              as: E.div,
               initial: { opacity: 0 },
               animate: { opacity: 1 },
               exit: { opacity: 0 },
@@ -1323,12 +1321,12 @@ const M = ce, O = ["sm", "md", "lg", "xl", "2xl"], _e = (r) => {
                 right: 0,
                 backgroundImage: "linear-gradient(to left, var(--tgph-surface-1) 0 60%, transparent 90% 100%)"
               },
-              children: /* @__PURE__ */ T(N, { as: "span", size: "1", style: { whiteSpace: "nowrap" }, children: [
+              children: /* @__PURE__ */ S(P, { as: "span", size: "1", style: { whiteSpace: "nowrap" }, children: [
                 "+",
                 /* @__PURE__ */ u(F, { mode: "wait", initial: !1, children: c.map((d) => /* @__PURE__ */ u(
                   X,
                   {
-                    as: S.span,
+                    as: E.span,
                     w: "2",
                     display: "inline-block",
                     initial: {
@@ -1355,29 +1353,41 @@ const M = ce, O = ["sm", "md", "lg", "xl", "2xl"], _e = (r) => {
       }
     );
   }
-  return /* @__PURE__ */ u(L, { h: e, align: "center", my: "1", children: /* @__PURE__ */ u(M.Text, { color: t.value ? "default" : "gray", children: ((a = t == null ? void 0 : t.value) == null ? void 0 : a.label) || ((i = t == null ? void 0 : t.value) == null ? void 0 : i.value) || t.placeholder }) });
-}, Be = ({ size: r = "1", ...t }) => {
+  return /* @__PURE__ */ u(T, { h: e, align: "center", my: "1", children: /* @__PURE__ */ u(D.Text, { color: t.value ? "default" : "gray", children: ((a = t == null ? void 0 : t.value) == null ? void 0 : a.label) || ((i = t == null ? void 0 : t.value) == null ? void 0 : i.value) || t.placeholder }) });
+}, Pe = ({ size: o = "1", ...t }) => {
   const e = p.useContext(w), a = p.useCallback(() => {
-    var i, o, n;
-    return e.value ? q(e.value) ? ((i = e.value) == null ? void 0 : i.label) || ((o = e.value) == null ? void 0 : o.value) || e.placeholder : ((n = e.value) == null ? void 0 : n.map((l) => l.label).join(", ")) || e.placeholder : e.placeholder;
+    var i, r, n;
+    return e.value ? q(e.value) ? ((i = e.value) == null ? void 0 : i.label) || ((r = e.value) == null ? void 0 : r.value) || e.placeholder : ((n = e.value) == null ? void 0 : n.map((l) => l.label).join(", ")) || e.placeholder : e.placeholder;
   }, [e.value, e.placeholder]);
   return /* @__PURE__ */ u(
-    D.Anchor,
+    N.Anchor,
     {
       ...t,
       asChild: !0,
       onClick: (i) => {
-        var o, n;
-        i.preventDefault(), e.onOpenToggle(), (n = (o = e.triggerRef) == null ? void 0 : o.current) == null || n.focus();
+        var r, n;
+        i.preventDefault(), e.onOpenToggle(), (n = (r = e.triggerRef) == null ? void 0 : r.current) == null || n.focus();
       },
       onKeyDown: (i) => {
-        i.key === "ArrowDown" && e.onOpenToggle(), (i.key === "Enter" || i.key === " ") && i.preventDefault();
+        if (i.key === "Tab") {
+          i.stopPropagation();
+          return;
+        }
+        if (ue.includes(i.key)) {
+          i.preventDefault();
+          return;
+        }
+        if (i.key === "ArrowDown") {
+          e.onOpenToggle();
+          return;
+        }
       },
       tgphRef: e.triggerRef,
-      children: /* @__PURE__ */ u(re, { children: /* @__PURE__ */ T(
-        M.Root,
+      children: /* @__PURE__ */ u(re, { children: /* @__PURE__ */ S(
+        D.Root,
         {
           id: e.triggerId,
+          bg: "surface-1",
           variant: "outline",
           w: "full",
           h: "full",
@@ -1391,12 +1401,12 @@ const M = ce, O = ["sm", "md", "lg", "xl", "2xl"], _e = (r) => {
           "data-tgph-combobox-trigger": !0,
           "data-tgph-comobox-trigger-open": e.open,
           children: [
-            /* @__PURE__ */ u(Me, { size: r }),
+            /* @__PURE__ */ u(Me, { size: o }),
             /* @__PURE__ */ u(
-              M.Icon,
+              D.Icon,
               {
-                as: S.div,
-                icon: _.ChevronDown,
+                as: E.div,
+                icon: j.ChevronDown,
                 animate: { rotate: e.open ? "180deg" : "0deg" },
                 transition: { duration: 0.2, type: "spring", bounce: 0 },
                 "aria-hidden": !0
@@ -1407,33 +1417,33 @@ const M = ce, O = ["sm", "md", "lg", "xl", "2xl"], _e = (r) => {
       ) })
     }
   );
-}, Ne = ({
-  tgphRef: r,
+}, Be = ({
+  tgphRef: o,
   style: t,
   children: e,
   ...a
 }) => {
-  const i = p.useContext(w), o = p.useRef(!1), n = z(r, i.contentRef), l = p.useRef(null), [c, d] = p.useState(0), [s, g] = p.useState(!1), m = p.useCallback(
-    (b) => {
-      const h = b.getBoundingClientRect();
-      h && d(h.height), s || g(!0);
+  const i = p.useContext(w), r = p.useRef(!1), n = B(o, i.contentRef), l = p.useRef(null), [c, d] = p.useState(0), [s, b] = p.useState(!1), y = p.useCallback(
+    (g) => {
+      const h = g.getBoundingClientRect();
+      h && d(h.height), s || b(!0);
     },
     [s]
   );
   return p.useEffect(() => {
-    const b = new ResizeObserver((h) => {
+    const g = new ResizeObserver((h) => {
       for (const v of h) {
         const k = v.target;
-        m(k);
+        y(k);
       }
     });
-    return l.current && s && b.observe(l.current), () => b.disconnect();
-  }, [s, m]), p.useEffect(() => {
-    s === !0 && i.open === !1 && g(!1);
+    return l.current && s && g.observe(l.current), () => g.disconnect();
+  }, [s, y]), p.useEffect(() => {
+    s === !0 && i.open === !1 && b(!1);
   }, [i.open, s]), /* @__PURE__ */ u(
-    D.Content,
+    N.Content,
     {
-      as: S.div,
+      as: E.div,
       mt: "1",
       initial: {
         opacity: 0,
@@ -1445,30 +1455,31 @@ const M = ce, O = ["sm", "md", "lg", "xl", "2xl"], _e = (r) => {
         scale: 1,
         // Set height based on the internalContentRef so that
         // we get smooth animations when the content changes
-        height: c ? `${c}px` : "auto"
+        minHeight: c ? `${c}px` : "0"
       },
       exit: { opacity: 0, scale: 0 },
       transition: { duration: 0.2, type: "spring", bounce: 0 },
       onInteractOutside: () => {
-        i.setOpen(!1), o.current = !0;
+        i.setOpen(!1), r.current = !0;
       },
       onAnimationComplete: () => {
         if (!s && l) {
-          const b = l.current;
-          m(b);
+          const g = l.current;
+          y(g);
         }
       },
-      onCloseAutoFocus: (b) => {
+      onCloseAutoFocus: (g) => {
         var h, v;
-        o.current || (v = (h = i.triggerRef) == null ? void 0 : h.current) == null || v.focus(), o.current = !1, b.preventDefault();
+        r.current || (v = (h = i.triggerRef) == null ? void 0 : h.current) == null || v.focus(), r.current = !1, g.preventDefault();
       },
-      onKeyDown: (b) => {
-        var v, k, E, C;
+      onKeyDown: (g) => {
+        var v, k, C, L;
         const h = (k = (v = i.contentRef) == null ? void 0 : v.current) == null ? void 0 : k.querySelectorAll(
           "[data-tgph-combobox-option]"
         );
-        document.activeElement === (h == null ? void 0 : h[0]) && Ve.includes(b.key) && ((C = (E = i.searchRef) == null ? void 0 : E.current) == null || C.focus()), b.key === "Escape" && i.setOpen(!1);
+        document.activeElement === (h == null ? void 0 : h[0]) && Ae.includes(g.key) && ((L = (C = i.searchRef) == null ? void 0 : C.current) == null || L.focus()), g.key === "Escape" && i.setOpen(!1), g.stopPropagation();
       },
+      bg: "surface-1",
       style: {
         width: "var(--tgph-comobobox-trigger-width)",
         ...t,
@@ -1484,49 +1495,53 @@ const M = ce, O = ["sm", "md", "lg", "xl", "2xl"], _e = (r) => {
       "data-tgph-combobox-content-open": s,
       role: void 0,
       "aria-orientation": void 0,
-      children: /* @__PURE__ */ u(L, { direction: "column", gap: "1", tgphRef: l, children: e })
+      children: /* @__PURE__ */ u(T, { direction: "column", gap: "1", tgphRef: l, children: e })
     }
   );
-}, ze = ({ ...r }) => {
+}, Ne = ({ ...o }) => {
   const t = p.useContext(w);
   return /* @__PURE__ */ u(
-    L,
+    T,
     {
       id: t.contentId,
       direction: "column",
       gap: "1",
       style: {
-        overflowY: "auto"
+        overflowY: "auto",
+        // Available Height - Padding from edge of screen
+        maxHeight: "calc(var(--tgph-combobox-content-available-height) - var(--tgph-spacing-12))"
       },
       role: "listbox",
-      ...r
+      ...o
     }
   );
-}, ue = ({
-  value: r,
+}, se = ({
+  value: o,
   label: t,
   selected: e,
   onSelect: a,
   ...i
 }) => {
-  const o = p.useContext(w), [n, l] = p.useState(!1), c = o.value ?? [], d = Q(c) ? !o.searchQuery || r.includes(o.searchQuery.toLowerCase()) : !o.searchQuery || r.toLowerCase().includes(o.searchQuery.toLowerCase()), s = Q(c) ? c.some((g) => g.value === r) : c.value === r;
+  const r = p.useContext(w), [n, l] = p.useState(!1), c = r.value ?? [], d = (Q(c), !r.searchQuery || o.toLowerCase().includes(r.searchQuery.toLowerCase())), s = Q(c) ? c.some((y) => y.value === o) : c.value === o, b = (y) => {
+    var g, h;
+    if (ue.includes(y.key)) {
+      if (y.stopPropagation(), y.preventDefault(), r.closeOnSelect === !0 && r.setOpen(!1), a)
+        return a(y);
+      if (Q(c)) {
+        const v = r.onValueChange, k = s ? c.filter((C) => C.value !== o) : [...c, { value: o, label: t }];
+        v(k);
+      } else if (q(c)) {
+        const v = r.onValueChange;
+        v({ value: o, label: t });
+      }
+      (h = (g = r.triggerRef) == null ? void 0 : g.current) == null || h.focus();
+    }
+  };
   if (d)
     return /* @__PURE__ */ u(
-      D.Button,
+      N.Button,
       {
-        onSelect: (g) => {
-          var m, b;
-          if (!o.closeOnSelect && g.preventDefault(), a)
-            return a(g);
-          if (Q(c)) {
-            const h = o.onValueChange, v = s ? c.filter((k) => k.value !== r) : [...c, { value: r, label: t }];
-            h(v);
-          } else if (q(c)) {
-            const h = o.onValueChange;
-            h({ value: r, label: t });
-          }
-          (b = (m = o.triggerRef) == null ? void 0 : m.current) == null || b.focus();
-        },
+        onKeyDown: b,
         selected: e === null ? null : e ?? s,
         onFocus: () => l(!0),
         onBlur: () => l(!1),
@@ -1534,86 +1549,86 @@ const M = ce, O = ["sm", "md", "lg", "xl", "2xl"], _e = (r) => {
         "aria-selected": s ? "true" : "false",
         "data-tgph-combobox-option": !0,
         "data-tgph-combobox-option-focused": n,
-        "data-tgph-combobox-option-value": r,
+        "data-tgph-combobox-option-value": o,
         "data-tgph-combobox-option-label": t,
         ...i,
-        children: t || r
+        children: t || o
       }
     );
-}, De = ({
-  label: r = "Search",
+}, ze = ({
+  label: o = "Search",
   placeholder: t = "Search",
   tgphRef: e,
   ...a
 }) => {
   var l;
-  const i = p.useId(), o = p.useContext(w), n = z(e, o.searchRef);
+  const i = p.useId(), r = p.useContext(w), n = B(e, r.searchRef);
   return p.useEffect(() => {
     var s;
-    const c = (g) => {
-      var m, b;
-      Ie.includes(g.key) && ((b = (m = o.contentRef) == null ? void 0 : m.current) == null || b.focus({ preventScroll: !0 })), g.key === "Escape" && o.setOpen(!1), g.stopPropagation();
-    }, d = (s = o.searchRef) == null ? void 0 : s.current;
+    const c = (b) => {
+      var y, g;
+      Ve.includes(b.key) && ((g = (y = r.contentRef) == null ? void 0 : y.current) == null || g.focus({ preventScroll: !0 })), b.key === "Escape" && r.setOpen(!1), b.stopPropagation();
+    }, d = (s = r.searchRef) == null ? void 0 : s.current;
     if (d)
       return d.addEventListener("keydown", c), () => {
         d.removeEventListener("keydown", c);
       };
-  }, [o]), /* @__PURE__ */ T(X, { borderBottom: !0, px: "1", pb: "1", children: [
-    /* @__PURE__ */ u(be.Root, { children: /* @__PURE__ */ u(N, { as: "label", htmlFor: i, children: r }) }),
+  }, [r]), /* @__PURE__ */ S(X, { borderBottom: !0, px: "1", pb: "1", children: [
+    /* @__PURE__ */ u(he.Root, { children: /* @__PURE__ */ u(P, { as: "label", htmlFor: i, children: o }) }),
     /* @__PURE__ */ u(
-      ye,
+      fe,
       {
         id: i,
         variant: "ghost",
         placeholder: t,
-        value: o.searchQuery,
+        value: r.searchQuery,
         onChange: (c) => {
           var d;
-          (d = o == null ? void 0 : o.setSearchQuery) == null || d.call(o, c.target.value);
+          (d = r == null ? void 0 : r.setSearchQuery) == null || d.call(r, c.target.value);
         },
-        LeadingComponent: /* @__PURE__ */ u(Y, { icon: _.Search, alt: "Search Icon" }),
-        TrailingComponent: o != null && o.searchQuery && ((l = o == null ? void 0 : o.searchQuery) == null ? void 0 : l.length) > 0 ? /* @__PURE__ */ u(
-          M,
+        LeadingComponent: /* @__PURE__ */ u(K, { icon: j.Search, alt: "Search Icon" }),
+        TrailingComponent: r != null && r.searchQuery && ((l = r == null ? void 0 : r.searchQuery) == null ? void 0 : l.length) > 0 ? /* @__PURE__ */ u(
+          D,
           {
-            as: S.button,
+            as: E.button,
             initial: { opacity: 0 },
             animate: { opacity: 1 },
             transition: { duration: 0.2, type: "spring", bounce: 0 },
             variant: "ghost",
             color: "gray",
-            icon: { icon: _.X, alt: "Clear Search Query" },
+            icon: { icon: j.X, alt: "Clear Search Query" },
             onClick: () => {
               var c;
-              return (c = o.setSearchQuery) == null ? void 0 : c.call(o, "");
+              return (c = r.setSearchQuery) == null ? void 0 : c.call(r, "");
             }
           }
         ) : null,
         autoFocus: !0,
         "data-tgph-combobox-search": !0,
-        "aria-controls": o.contentId,
+        "aria-controls": r.contentId,
         ...a,
         tgphRef: n
       }
     )
   ] });
-}, Pe = ({
-  icon: r = { icon: _.Search, alt: "Search Icon" },
+}, Fe = ({
+  icon: o = { icon: j.Search, alt: "Search Icon" },
   message: t = "No results found",
   children: e,
   ...a
 }) => {
-  const i = p.useContext(w), [o, n] = p.useState(!1);
+  const i = p.useContext(w), [r, n] = p.useState(!1);
   if (p.useEffect(() => {
     var c, d;
     const l = (d = (c = i.contentRef) == null ? void 0 : c.current) == null ? void 0 : d.querySelectorAll(
       "[data-tgph-combobox-option]"
     );
     (l == null ? void 0 : l.length) === 0 ? n(!0) : n(!1);
-  }, [i.searchQuery, i.contentRef, e]), o)
-    return /* @__PURE__ */ T(
-      L,
+  }, [i.searchQuery, i.contentRef, e]), r)
+    return /* @__PURE__ */ S(
+      T,
       {
-        as: S.div,
+        as: E.div,
         initial: { opacity: 0, scale: 0.8 },
         animate: { opacity: 1, scale: 1 },
         transition: { duration: 0.2, type: "spring", bounce: 0 },
@@ -1625,49 +1640,50 @@ const M = ce, O = ["sm", "md", "lg", "xl", "2xl"], _e = (r) => {
         "data-tgph-combobox-empty": !0,
         ...a,
         children: [
-          r === null ? /* @__PURE__ */ u(W, {}) : /* @__PURE__ */ u(Y, { ...r }),
-          t === null ? /* @__PURE__ */ u(W, {}) : /* @__PURE__ */ u(N, { as: "span", children: t })
+          o === null ? /* @__PURE__ */ u(W, {}) : /* @__PURE__ */ u(K, { ...o }),
+          t === null ? /* @__PURE__ */ u(W, {}) : /* @__PURE__ */ u(P, { as: "span", children: t })
         ]
       }
     );
-}, Fe = ({
-  leadingText: r = "Create",
+}, He = ({
+  leadingText: o = "Create",
   values: t,
   onCreate: e,
   selected: a = null,
   ...i
 }) => {
-  const o = p.useContext(w), n = p.useCallback(
+  const r = p.useContext(w), n = p.useCallback(
     (l) => !t || (t == null ? void 0 : t.length) === 0 ? !1 : t.some((c) => c.value === l),
     [t]
   );
-  if (o.searchQuery && !n(o.searchQuery))
+  if (r.searchQuery && !n(r.searchQuery))
     return /* @__PURE__ */ u(
-      ue,
+      se,
       {
-        leadingIcon: { icon: _.Plus, "aria-hidden": !0 },
+        leadingIcon: { icon: j.Plus, "aria-hidden": !0 },
         mx: "1",
-        value: o.searchQuery,
-        label: `${r} "${o.searchQuery}"`,
+        value: r.searchQuery,
+        label: `${o} "${r.searchQuery}"`,
         selected: a,
         onSelect: () => {
-          e && o.value && o.searchQuery && (q(o.value) && e({ value: o.searchQuery }), Q(o.value) && e({ value: o.searchQuery }));
+          var l;
+          e && r.value && r.searchQuery && (q(r.value) && e({ value: r.searchQuery }), Q(r.value) && e({ value: r.searchQuery }), (l = r.setSearchQuery) == null || l.call(r, ""));
         },
         ...i
       }
     );
-}, He = {};
-Object.assign(He, {
-  Root: Ae,
-  Trigger: Be,
-  Content: Ne,
-  Options: ze,
-  Option: ue,
-  Search: De,
-  Empty: Pe,
-  Create: Fe
+}, Ke = {};
+Object.assign(Ke, {
+  Root: Qe,
+  Trigger: Pe,
+  Content: Be,
+  Options: Ne,
+  Option: se,
+  Search: ze,
+  Empty: Fe,
+  Create: He
 });
 export {
-  He as Combobox
+  Ke as Combobox
 };
 //# sourceMappingURL=index.mjs.map