@telegraph/combobox 0.0.1

package/dist/esm/index.mjs

@@ -0,0 +1,1673 @@
+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 p from "react";
+import { Text as N } from "@telegraph/typography";
+import { useComposedRefs as z } 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) {
+  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);
+  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);
+  return a;
+}
+function fe(r, t) {
+  typeof r == "function" ? r(t) : r != null && (r.current = t);
+}
+function me(...r) {
+  return (t) => r.forEach((e) => fe(e, t));
+}
+function ae(...r) {
+  return he.useCallback(me(...r), r);
+}
+const j = ["sm", "md", "lg", "xl", "2xl"], ve = (r) => {
+  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);
+    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]];
+          break;
+        }
+      if (o !== null) {
+        for (let n = 0; n <= a; n++)
+          t.push(o);
+        e = o;
+      }
+    }
+  }
+  return t;
+}, we = (r) => typeof r == "object" && (r.sm || r.md || r.lg || r.xl || r["2xl"]), y = ({
+  value: r,
+  prop: t
+}) => {
+  if (!r) return "";
+  if (t.valueType === "static")
+    return r.toString();
+  const e = t.type === "color" ? "" : `-${t.type}`;
+  return r === !0 ? `var(--tgph${e}-${t.default})` : `var(--tgph${e}-${r})`;
+}, I = {
+  top: 0,
+  right: 1,
+  bottom: 2,
+  left: 3
+}, x = {
+  topLeft: 0,
+  topRight: 1,
+  bottomRight: 2,
+  bottomLeft: 3
+}, xe = ({
+  cssVariables: r,
+  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
+  ];
+  return a === "all" ? y({ value: t, prop: e }) : (e.ordering === "clockwise" ? (a === "top" && (n[x.topLeft] = y({
+    value: t,
+    prop: e
+  }), n[x.topRight] = y({
+    value: t,
+    prop: e
+  })), a === "right" && (n[x.topRight] = y({
+    value: t,
+    prop: e
+  }), n[x.bottomRight] = y({
+    value: t,
+    prop: e
+  })), a === "bottom" && (n[x.bottomRight] = y({
+    value: t,
+    prop: e
+  }), n[x.bottomLeft] = y({
+    value: t,
+    prop: e
+  })), a === "left" && (n[x.bottomLeft] = y({
+    value: t,
+    prop: e
+  }), n[x.topLeft] = y({
+    value: t,
+    prop: e
+  })), (a === "topLeft" || a === "topRight" || a === "bottomRight" || a === "bottomLeft") && (n[x[a]] = y({
+    value: t,
+    prop: e
+  }))) : (a === "x" && (n[I.left] = y({
+    value: t,
+    prop: e
+  }), n[I.right] = y({
+    value: t,
+    prop: e
+  })), a === "y" && (n[I.top] = y({
+    value: t,
+    prop: e
+  }), n[I.bottom] = y({
+    value: t,
+    prop: e
+  })), (a === "top" || a === "bottom" || a === "left" || a === "right") && (n[I[a]] = y({
+    value: t,
+    prop: e
+  }))), n.join(" "));
+}, G = ({
+  prop: r,
+  value: t,
+  cssVariables: e
+}) => r.direction ? xe({
+  cssVariables: e,
+  prop: r,
+  value: t,
+  direction: r.direction,
+  type: r.type
+}) : y({ value: t, prop: r }), ne = ({
+  props: r,
+  ref: t,
+  propsMap: e
+}) => {
+  if (!t.current) return;
+  const a = {};
+  Object.entries(r).forEach(([i, o]) => {
+    const n = e[i];
+    n && (typeof o == "string" || typeof o == "boolean" ? a[`--tgph-${n.rule}`] = G({
+      prop: n,
+      key: i,
+      value: o,
+      cssVariables: a
+    }) : we(o) && ve(o).forEach((l, c) => {
+      l && (a[`--tgph-${n.rule}-${j[c]}`] = G({
+        prop: n,
+        key: i,
+        value: l,
+        cssVariables: a
+      }));
+    })), Object.entries(a).forEach(([l, c]) => {
+      t.current && t.current.style.setProperty(l, c);
+    });
+  });
+}, U = {
+  display: {
+    rule: "display",
+    type: "block-display",
+    valueType: "static"
+  },
+  h: {
+    rule: "height",
+    type: "spacing"
+  },
+  w: {
+    rule: "width",
+    type: "spacing"
+  },
+  maxH: {
+    rule: "max-height",
+    type: "spacing"
+  },
+  maxW: {
+    rule: "max-width",
+    type: "spacing"
+  },
+  p: {
+    rule: "padding",
+    type: "spacing",
+    direction: "all"
+  },
+  m: {
+    rule: "margin",
+    type: "spacing",
+    direction: "all"
+  },
+  pt: {
+    rule: "padding",
+    type: "spacing",
+    direction: "top"
+  },
+  pl: {
+    rule: "padding",
+    type: "spacing",
+    direction: "left"
+  },
+  pb: {
+    rule: "padding",
+    type: "spacing",
+    direction: "bottom"
+  },
+  pr: {
+    rule: "padding",
+    type: "spacing",
+    direction: "right"
+  },
+  px: {
+    rule: "padding",
+    type: "spacing",
+    direction: "x"
+  },
+  py: {
+    rule: "padding",
+    type: "spacing",
+    direction: "y"
+  },
+  mt: {
+    rule: "margin",
+    type: "spacing",
+    direction: "top"
+  },
+  ml: {
+    rule: "margin",
+    type: "spacing",
+    direction: "left"
+  },
+  mb: {
+    rule: "margin",
+    type: "spacing",
+    direction: "bottom"
+  },
+  mr: {
+    rule: "margin",
+    type: "spacing",
+    direction: "right"
+  },
+  mx: {
+    rule: "margin",
+    type: "spacing",
+    direction: "x"
+  },
+  my: {
+    rule: "margin",
+    type: "spacing",
+    direction: "y"
+  },
+  bg: {
+    rule: "background-color",
+    type: "color"
+  },
+  rounded: {
+    rule: "border-radius",
+    type: "rounded",
+    direction: "all"
+  },
+  roundedTopLeft: {
+    rule: "border-radius",
+    type: "rounded",
+    direction: "topLeft",
+    ordering: "clockwise"
+  },
+  roundedBottomLeft: {
+    rule: "border-radius",
+    type: "rounded",
+    direction: "bottomLeft",
+    ordering: "clockwise"
+  },
+  roundedBottomRight: {
+    rule: "border-radius",
+    type: "rounded",
+    direction: "bottomRight",
+    ordering: "clockwise"
+  },
+  roundedTopRight: {
+    rule: "border-radius",
+    type: "rounded",
+    direction: "topRight",
+    ordering: "clockwise"
+  },
+  roundedTop: {
+    rule: "border-radius",
+    type: "rounded",
+    direction: "top",
+    ordering: "clockwise"
+  },
+  roundedBottom: {
+    rule: "border-radius",
+    type: "rounded",
+    direction: "bottom",
+    ordering: "clockwise"
+  },
+  roundedLeft: {
+    rule: "border-radius",
+    type: "rounded",
+    direction: "left",
+    ordering: "clockwise"
+  },
+  roundedRight: {
+    rule: "border-radius",
+    type: "rounded",
+    direction: "right",
+    ordering: "clockwise"
+  },
+  border: {
+    rule: "border-width",
+    type: "spacing",
+    direction: "all",
+    default: "px"
+  },
+  borderTop: {
+    rule: "border-width",
+    type: "spacing",
+    direction: "top",
+    default: "px"
+  },
+  borderLeft: {
+    rule: "border-width",
+    type: "spacing",
+    direction: "left",
+    default: "px"
+  },
+  borderBottom: {
+    rule: "border-width",
+    type: "spacing",
+    direction: "bottom",
+    default: "px"
+  },
+  borderRight: {
+    rule: "border-width",
+    type: "spacing",
+    direction: "right",
+    default: "px"
+  },
+  borderX: {
+    rule: "border-width",
+    type: "spacing",
+    direction: "x",
+    default: "px"
+  },
+  borderY: {
+    rule: "border-width",
+    type: "spacing",
+    direction: "y",
+    default: "px"
+  },
+  borderColor: {
+    rule: "border-color",
+    type: "color",
+    default: "gray-4"
+  },
+  borderStyle: {
+    rule: "border-style",
+    type: "border-style",
+    default: "solid"
+  },
+  shadow: {
+    rule: "box-shadow",
+    type: "shadow"
+  }
+}, Re = ({
+  as: r,
+  className: t,
+  tgphRef: e,
+  ...a
+}) => {
+  const i = r || "div", o = p.useRef(null), n = ae(e, o), 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),
+      { box: {}, rest: {} }
+    );
+  }, [a]);
+  return p.useLayoutEffect(() => {
+    ne({
+      props: l.box,
+      ref: o,
+      propsMap: U
+    });
+  }, [l.box]), /* @__PURE__ */ u(
+    i,
+    {
+      className: $("tgph-box", t),
+      ref: n,
+      ...l.rest
+    }
+  );
+}, J = {
+  display: {
+    rule: "display",
+    type: "flex-display",
+    valueType: "static"
+  },
+  direction: {
+    rule: "flex-direction",
+    type: "flex-direction",
+    valueType: "static"
+  },
+  align: {
+    rule: "align-items",
+    type: "align-items",
+    valueType: "static"
+  },
+  justify: {
+    rule: "justify-content",
+    type: "justify-content",
+    valueType: "static"
+  },
+  wrap: {
+    rule: "flex-wrap",
+    type: "flex-wrap",
+    valueType: "static"
+  },
+  gap: {
+    rule: "gap",
+    type: "spacing",
+    valueType: "variable"
+  }
+}, ke = ({
+  className: r,
+  tgphRef: t,
+  ...e
+}) => {
+  const a = p.useRef(null), i = ae(t, a), o = 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: {} }
+    ),
+    [e]
+  );
+  return p.useLayoutEffect(() => {
+    ne({
+      props: o.stack,
+      ref: a,
+      propsMap: J
+    });
+  }, [o.stack, i]), /* @__PURE__ */ u(
+    Re,
+    {
+      className: $("tgph-stack", r),
+      tgphRef: i,
+      ...o.rest
+    }
+  );
+}, Ce = {
+  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",
+    accent: "bg-accent-9 hover:bg-accent-10 focus:bg-accent-11 data-[tgph-button-active=true]:!bg-accent-11",
+    green: "bg-green-9 hover:bg-green-10 focus:bg-green-11 data-[tgph-button-active=true]:!bg-green-11",
+    blue: "bg-blue-9 hover:bg-blue-10 focus:bg-blue-11 data-[tgph-button-active=true]:!bg-blue-11",
+    yellow: "bg-yellow-9 hover:bg-yellow-10 focus:bg-yellow-11 data-[tgph-button-active=true]:!bg-yellow-11",
+    purple: "bg-purple-9 hover:bg-purple-10 focus:bg-purple-11 data-[tgph-button-active=true]:!bg-purple-11",
+    disabled: "bg-gray-2"
+  },
+  soft: {
+    gray: "bg-gray-3 hover:bg-gray-4 focus:bg-gray-5 data-[tgph-button-active=true]:!bg-gray-5",
+    red: "bg-red-3 hover:bg-red-4 focus:bg-red-5 data-[tgph-button-active=true]:!bg-red-5",
+    accent: "bg-accent-3 hover:bg-accent-4 focus:bg-accent-6 data-[tgph-button-active=true]:!bg-accent-6",
+    green: "bg-green-3 hover:bg-green-4 focus:bg-green-5 data-[tgph-button-active=true]:!bg-green-5",
+    blue: "bg-blue-3 hover:bg-blue-4 focus:bg-blue-5 data-[tgph-button-active=true]:!bg-blue-5",
+    yellow: "bg-yellow-3 hover:bg-yellow-4 focus:bg-yellow-5 data-[tgph-button-active=true]:!bg-yellow-5",
+    purple: "bg-purple-3 hover:bg-purple-4 focus:bg-purple-5 data-[tgph-button-active=true]:!bg-purple-5",
+    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",
+    disabled: "bg-gray-2"
+  },
+  ghost: {
+    gray: "bg-transparent hover:bg-gray-3 focus:bg-gray-4 data-[tgph-button-active=true]:!bg-gray-4 [&data-[tgph-button-active=true]>span]:!text-gray-12",
+    red: "bg-transparent hover:bg-red-3 focus:bg-red-4 data-[tgph-button-active=true]:!bg-red-4",
+    accent: "bg-transparent hover:bg-accent-3 focus:bg-accent-4 data-[tgph-button-active=true]:!bg-accent-4",
+    green: "bg-transparent hover:bg-green-3 focus:bg-green-4 data-[tgph-button-active=true]:!bg-green-4",
+    blue: "bg-transparent hover:bg-blue-3 focus:bg-blue-4 data-[tgph-button-active=true]:!bg-blue-4",
+    yellow: "bg-transparent hover:bg-yellow-3 focus:bg-yellow-4 data-[tgph-button-active=true]:!bg-yellow-4",
+    purple: "bg-transparent hover:bg-purple-3 focus:bg-purple-4 data-[tgph-button-active=true]:!bg-purple-4",
+    disabled: "bg-transparent"
+  }
+}, V = {
+  default: {
+    1: {
+      w: "auto",
+      h: "6",
+      gap: "1",
+      px: "2"
+    },
+    2: {
+      w: "auto",
+      h: "8",
+      gap: "2",
+      px: "3"
+    },
+    3: {
+      w: "auto",
+      h: "10",
+      gap: "3",
+      px: "4"
+    }
+  },
+  "icon-only": {
+    1: {
+      w: "6",
+      h: "6",
+      gap: "0",
+      px: "0"
+    },
+    2: {
+      w: "8",
+      h: "8",
+      gap: "0",
+      px: "0"
+    },
+    3: {
+      w: "10",
+      h: "10",
+      gap: "0",
+      px: "0"
+    }
+  }
+}, Le = {
+  1: "1",
+  2: "2",
+  3: "3"
+}, Te = {
+  solid: {
+    gray: "white",
+    red: "white",
+    accent: "white",
+    green: "white",
+    blue: "white",
+    yellow: "white",
+    purple: "white",
+    disabled: "disabled"
+  },
+  soft: {
+    gray: "default",
+    red: "red",
+    accent: "accent",
+    green: "green",
+    blue: "blue",
+    yellow: "yellow",
+    purple: "purple",
+    disabled: "disabled"
+  },
+  outline: {
+    gray: "default",
+    red: "red",
+    accent: "accent",
+    green: "green",
+    blue: "blue",
+    yellow: "yellow",
+    purple: "purple",
+    disabled: "disabled"
+  },
+  ghost: {
+    gray: "gray",
+    red: "red",
+    accent: "accent",
+    green: "green",
+    blue: "blue",
+    yellow: "yellow",
+    purple: "purple",
+    disabled: "disabled"
+  }
+}, Se = {
+  1: "1",
+  2: "2",
+  3: "3"
+}, je = {
+  solid: {
+    gray: "white",
+    red: "white",
+    accent: "white",
+    green: "white",
+    blue: "white",
+    yellow: "white",
+    purple: "white",
+    disabled: "disabled"
+  },
+  soft: {
+    accent: "accent",
+    gray: "gray",
+    red: "red",
+    green: "green",
+    blue: "blue",
+    yellow: "yellow",
+    purple: "purple",
+    disabled: "disabled"
+  },
+  outline: {
+    accent: "accent",
+    gray: "gray",
+    red: "red",
+    green: "green",
+    blue: "blue",
+    yellow: "yellow",
+    purple: "purple",
+    disabled: "disabled"
+  },
+  ghost: {
+    accent: "accent",
+    gray: "default",
+    red: "red",
+    green: "green",
+    blue: "blue",
+    yellow: "yellow",
+    purple: "purple",
+    disabled: "disabled"
+  }
+}, Oe = {
+  default: "secondary",
+  "icon-only": "primary"
+}, K = p.createContext({
+  variant: "solid",
+  size: "2",
+  color: "gray",
+  state: "default",
+  layout: "default",
+  active: !1
+}), ie = ({
+  as: r,
+  variant: t = "solid",
+  size: e = "2",
+  color: a = "gray",
+  state: i = "default",
+  active: o = !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)
+        return "icon-only";
+    }
+    return "default";
+  }, [c == null ? void 0 : c.children]);
+  return /* @__PURE__ */ u(
+    K.Provider,
+    {
+      value: { variant: t, size: e, color: s, state: d, layout: g, active: o },
+      children: /* @__PURE__ */ u(
+        ke,
+        {
+          as: r || "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],
+            l
+          ),
+          h: V[g][e].h,
+          w: V[g][e].w,
+          gap: V[g][e].gap,
+          px: V[g][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,
+          disabled: n,
+          ...c
+        }
+      )
+    }
+  );
+}, H = ({
+  size: r,
+  color: t,
+  variant: e,
+  icon: a,
+  alt: i,
+  "aria-hidden": o,
+  ...n
+}) => {
+  const l = p.useContext(K), c = {
+    size: r ?? Se[l.size],
+    color: t ?? je[l.variant][l.color],
+    variant: e ?? Oe[l.layout]
+  };
+  return /* @__PURE__ */ u(
+    Y,
+    {
+      icon: a,
+      "data-button-icon": !0,
+      ...i ? { alt: i } : { "aria-hidden": o },
+      ...c,
+      ...n
+    }
+  );
+}, le = ({
+  as: r,
+  color: t,
+  size: e,
+  weight: a = "medium",
+  className: i,
+  ...o
+}) => {
+  const n = p.useContext(K);
+  return /* @__PURE__ */ u(
+    N,
+    {
+      as: r || "span",
+      color: t ?? Te[n.variant][n.color],
+      size: e ?? Le[n.size],
+      weight: a,
+      className: $("no-underline whitespace-nowrap", i),
+      internal_optionalAs: !0,
+      "data-button-text": !0,
+      ...o
+    }
+  );
+}, ce = ({
+  leadingIcon: r,
+  trailingIcon: t,
+  icon: e,
+  children: a,
+  ...i
+}) => {
+  const o = r || e;
+  return /* @__PURE__ */ T(ie, { ...i, children: [
+    o && /* @__PURE__ */ u(H, { ...o }),
+    a && /* @__PURE__ */ u(le, { children: a }),
+    t && /* @__PURE__ */ u(H, { ...t })
+  ] });
+};
+Object.assign(ce, {
+  Root: ie,
+  Icon: H,
+  Text: le
+});
+const M = ce, O = ["sm", "md", "lg", "xl", "2xl"], _e = (r) => {
+  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);
+    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]];
+          break;
+        }
+      if (o !== null) {
+        for (let n = 0; n <= a; n++)
+          t.push(o);
+        e = o;
+      }
+    }
+  }
+  return t;
+}, $e = (r) => typeof r == "object" && (r.sm || r.md || r.lg || r.xl || r["2xl"]), f = ({
+  value: r,
+  prop: t
+}) => {
+  if (!r) return "";
+  if (t.valueType === "static")
+    return r.toString();
+  const e = t.type === "color" ? "" : `-${t.type}`;
+  return r === !0 ? `var(--tgph${e}-${t.default})` : `var(--tgph${e}-${r})`;
+}, A = {
+  top: 0,
+  right: 1,
+  bottom: 2,
+  left: 3
+}, R = {
+  topLeft: 0,
+  topRight: 1,
+  bottomRight: 2,
+  bottomLeft: 3
+}, Ee = ({
+  cssVariables: r,
+  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
+  ];
+  return a === "all" ? f({ value: t, prop: e }) : (e.ordering === "clockwise" ? (a === "top" && (n[R.topLeft] = f({
+    value: t,
+    prop: e
+  }), n[R.topRight] = f({
+    value: t,
+    prop: e
+  })), a === "right" && (n[R.topRight] = f({
+    value: t,
+    prop: e
+  }), n[R.bottomRight] = f({
+    value: t,
+    prop: e
+  })), a === "bottom" && (n[R.bottomRight] = f({
+    value: t,
+    prop: e
+  }), n[R.bottomLeft] = f({
+    value: t,
+    prop: e
+  })), a === "left" && (n[R.bottomLeft] = f({
+    value: t,
+    prop: e
+  }), n[R.topLeft] = f({
+    value: t,
+    prop: e
+  })), (a === "topLeft" || a === "topRight" || a === "bottomRight" || a === "bottomLeft") && (n[R[a]] = f({
+    value: t,
+    prop: e
+  }))) : (a === "x" && (n[A.left] = f({
+    value: t,
+    prop: e
+  }), n[A.right] = f({
+    value: t,
+    prop: e
+  })), a === "y" && (n[A.top] = f({
+    value: t,
+    prop: e
+  }), n[A.bottom] = f({
+    value: t,
+    prop: e
+  })), (a === "top" || a === "bottom" || a === "left" || a === "right") && (n[A[a]] = f({
+    value: t,
+    prop: e
+  }))), n.join(" "));
+}, Z = ({
+  prop: r,
+  value: t,
+  cssVariables: e
+}) => r.direction ? Ee({
+  cssVariables: e,
+  prop: r,
+  value: t,
+  direction: r.direction,
+  type: r.type
+}) : f({ value: t, prop: r }), pe = ({
+  props: r,
+  ref: t,
+  propsMap: e
+}) => {
+  if (!t.current) return;
+  const a = {};
+  Object.entries(r).forEach(([i, o]) => {
+    const n = e[i];
+    n && (typeof o == "string" || typeof o == "boolean" ? a[`--tgph-${n.rule}`] = Z({
+      prop: n,
+      key: i,
+      value: o,
+      cssVariables: a
+    }) : $e(o) && _e(o).forEach((l, c) => {
+      l && (a[`--tgph-${n.rule}-${O[c]}`] = Z({
+        prop: n,
+        key: i,
+        value: l,
+        cssVariables: a
+      }));
+    })), Object.entries(a).forEach(([l, c]) => {
+      t.current && t.current.style.setProperty(l, c);
+    });
+  });
+}, ee = {
+  display: {
+    rule: "display",
+    type: "block-display",
+    valueType: "static"
+  },
+  h: {
+    rule: "height",
+    type: "spacing"
+  },
+  w: {
+    rule: "width",
+    type: "spacing"
+  },
+  maxH: {
+    rule: "max-height",
+    type: "spacing"
+  },
+  maxW: {
+    rule: "max-width",
+    type: "spacing"
+  },
+  p: {
+    rule: "padding",
+    type: "spacing",
+    direction: "all"
+  },
+  m: {
+    rule: "margin",
+    type: "spacing",
+    direction: "all"
+  },
+  pt: {
+    rule: "padding",
+    type: "spacing",
+    direction: "top"
+  },
+  pl: {
+    rule: "padding",
+    type: "spacing",
+    direction: "left"
+  },
+  pb: {
+    rule: "padding",
+    type: "spacing",
+    direction: "bottom"
+  },
+  pr: {
+    rule: "padding",
+    type: "spacing",
+    direction: "right"
+  },
+  px: {
+    rule: "padding",
+    type: "spacing",
+    direction: "x"
+  },
+  py: {
+    rule: "padding",
+    type: "spacing",
+    direction: "y"
+  },
+  mt: {
+    rule: "margin",
+    type: "spacing",
+    direction: "top"
+  },
+  ml: {
+    rule: "margin",
+    type: "spacing",
+    direction: "left"
+  },
+  mb: {
+    rule: "margin",
+    type: "spacing",
+    direction: "bottom"
+  },
+  mr: {
+    rule: "margin",
+    type: "spacing",
+    direction: "right"
+  },
+  mx: {
+    rule: "margin",
+    type: "spacing",
+    direction: "x"
+  },
+  my: {
+    rule: "margin",
+    type: "spacing",
+    direction: "y"
+  },
+  bg: {
+    rule: "background-color",
+    type: "color"
+  },
+  rounded: {
+    rule: "border-radius",
+    type: "rounded",
+    direction: "all"
+  },
+  roundedTopLeft: {
+    rule: "border-radius",
+    type: "rounded",
+    direction: "topLeft",
+    ordering: "clockwise"
+  },
+  roundedBottomLeft: {
+    rule: "border-radius",
+    type: "rounded",
+    direction: "bottomLeft",
+    ordering: "clockwise"
+  },
+  roundedBottomRight: {
+    rule: "border-radius",
+    type: "rounded",
+    direction: "bottomRight",
+    ordering: "clockwise"
+  },
+  roundedTopRight: {
+    rule: "border-radius",
+    type: "rounded",
+    direction: "topRight",
+    ordering: "clockwise"
+  },
+  roundedTop: {
+    rule: "border-radius",
+    type: "rounded",
+    direction: "top",
+    ordering: "clockwise"
+  },
+  roundedBottom: {
+    rule: "border-radius",
+    type: "rounded",
+    direction: "bottom",
+    ordering: "clockwise"
+  },
+  roundedLeft: {
+    rule: "border-radius",
+    type: "rounded",
+    direction: "left",
+    ordering: "clockwise"
+  },
+  roundedRight: {
+    rule: "border-radius",
+    type: "rounded",
+    direction: "right",
+    ordering: "clockwise"
+  },
+  border: {
+    rule: "border-width",
+    type: "spacing",
+    direction: "all",
+    default: "px"
+  },
+  borderTop: {
+    rule: "border-width",
+    type: "spacing",
+    direction: "top",
+    default: "px"
+  },
+  borderLeft: {
+    rule: "border-width",
+    type: "spacing",
+    direction: "left",
+    default: "px"
+  },
+  borderBottom: {
+    rule: "border-width",
+    type: "spacing",
+    direction: "bottom",
+    default: "px"
+  },
+  borderRight: {
+    rule: "border-width",
+    type: "spacing",
+    direction: "right",
+    default: "px"
+  },
+  borderX: {
+    rule: "border-width",
+    type: "spacing",
+    direction: "x",
+    default: "px"
+  },
+  borderY: {
+    rule: "border-width",
+    type: "spacing",
+    direction: "y",
+    default: "px"
+  },
+  borderColor: {
+    rule: "border-color",
+    type: "color",
+    default: "gray-4"
+  },
+  borderStyle: {
+    rule: "border-style",
+    type: "border-style",
+    default: "solid"
+  },
+  shadow: {
+    rule: "box-shadow",
+    type: "shadow"
+  }
+}, X = ({
+  as: r,
+  className: t,
+  tgphRef: e,
+  ...a
+}) => {
+  const i = r || "div", o = p.useRef(null), n = z(e, o), 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),
+      { box: {}, rest: {} }
+    );
+  }, [a]);
+  return p.useLayoutEffect(() => {
+    pe({
+      props: l.box,
+      ref: o,
+      propsMap: ee
+    });
+  }, [l.box]), /* @__PURE__ */ u(
+    i,
+    {
+      className: $("tgph-box", t),
+      ref: n,
+      ...l.rest
+    }
+  );
+}, te = {
+  display: {
+    rule: "display",
+    type: "flex-display",
+    valueType: "static"
+  },
+  direction: {
+    rule: "flex-direction",
+    type: "flex-direction",
+    valueType: "static"
+  },
+  align: {
+    rule: "align-items",
+    type: "align-items",
+    valueType: "static"
+  },
+  justify: {
+    rule: "justify-content",
+    type: "justify-content",
+    valueType: "static"
+  },
+  wrap: {
+    rule: "flex-wrap",
+    type: "flex-wrap",
+    valueType: "static"
+  },
+  gap: {
+    rule: "gap",
+    type: "spacing",
+    valueType: "variable"
+  }
+}, L = ({
+  className: r,
+  tgphRef: t,
+  ...e
+}) => {
+  const a = p.useRef(null), i = z(t, a), o = 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: {} }
+    ),
+    [e]
+  );
+  return p.useLayoutEffect(() => {
+    pe({
+      props: o.stack,
+      ref: a,
+      propsMap: te
+    });
+  }, [o.stack, i]), /* @__PURE__ */ u(
+    X,
+    {
+      className: $("tgph-stack", r),
+      tgphRef: i,
+      ...o.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({
+  onValueChange: () => {
+  },
+  contentId: "",
+  triggerId: "",
+  open: !1,
+  setOpen: () => {
+  },
+  onOpenToggle: () => {
+  }
+}), Ae = ({
+  modal: r = !0,
+  closeOnSelect: t = !0,
+  open: e,
+  onOpenChange: a,
+  defaultOpen: i,
+  value: o,
+  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({
+    prop: e,
+    defaultProp: i,
+    onChange: a
+  }), se = p.useCallback(() => {
+    B((de) => !de);
+  }, [B]);
+  return p.useEffect(() => {
+    C || E("");
+  }, [C]), /* @__PURE__ */ u(
+    w.Provider,
+    {
+      value: {
+        contentId: g,
+        triggerId: m,
+        value: o,
+        onValueChange: n,
+        placeholder: c,
+        open: C,
+        setOpen: B,
+        onOpenToggle: se,
+        closeOnSelect: t,
+        searchQuery: k,
+        setSearchQuery: E,
+        triggerRef: b,
+        searchRef: h,
+        contentRef: v,
+        errored: l,
+        layout: d
+      },
+      children: /* @__PURE__ */ u(
+        D.Root,
+        {
+          open: C,
+          onOpenChange: B,
+          modal: r,
+          ...s
+        }
+      )
+    }
+  );
+}, Qe = ({ label: r, value: t, ...e }) => {
+  const a = p.useContext(w);
+  return /* @__PURE__ */ T(
+    P.Root,
+    {
+      size: "1",
+      as: S.span,
+      initial: { opacity: 0, transform: "scale(0.8)" },
+      animate: { opacity: 1, transform: "scale(1)" },
+      exit: { opacity: 0, transform: "scale(0.5)" },
+      layout: "position",
+      transition: {
+        duration: 0.2,
+        type: "spring",
+        bounce: 0,
+        layout: {
+          duration: 0.05,
+          type: "spring",
+          bounce: 0
+        }
+      },
+      ...e,
+      children: [
+        /* @__PURE__ */ u(P.Text, { children: r || t }),
+        /* @__PURE__ */ u(
+          P.Button,
+          {
+            as: "span",
+            role: "button",
+            icon: { icon: _.X, alt: `Remove ${t}` },
+            onClick: (i) => {
+              const o = a.onValueChange, l = a.value.filter((c) => c.value !== t);
+              o(l), i.stopPropagation();
+            }
+          }
+        )
+      ]
+    }
+  );
+}, Me = ({
+  size: r = "1"
+}) => {
+  var a, i;
+  const t = p.useContext(w), e = r === "1" ? "6" : r === "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,
+      {
+        gap: "1",
+        w: "full",
+        my: "1",
+        wrap: n === "wrap" ? "wrap" : "nowrap",
+        align: "center",
+        style: {
+          position: "relative",
+          flexGrow: 1
+        },
+        children: [
+          /* @__PURE__ */ u(F, { initial: !1, mode: "popLayout", children: o.map((d, s) => {
+            if (n === "truncate" && s <= 1 || n === "wrap")
+              return /* @__PURE__ */ u(re, { children: /* @__PURE__ */ u(Qe, { ...d }) }, d.value);
+          }) }),
+          /* @__PURE__ */ u(F, { children: n === "truncate" && o.length > 2 && /* @__PURE__ */ u(
+            L,
+            {
+              as: S.div,
+              initial: { opacity: 0 },
+              animate: { opacity: 1 },
+              exit: { opacity: 0 },
+              transition: { duration: 0.2, type: "spring", bounce: 0 },
+              h: "full",
+              pr: "1",
+              pl: "8",
+              align: "center",
+              "aria-label": `${l} more selected`,
+              style: {
+                position: "absolute",
+                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: [
+                "+",
+                /* @__PURE__ */ u(F, { mode: "wait", initial: !1, children: c.map((d) => /* @__PURE__ */ u(
+                  X,
+                  {
+                    as: S.span,
+                    w: "2",
+                    display: "inline-block",
+                    initial: {
+                      opacity: 0.5
+                    },
+                    animate: {
+                      opacity: 1
+                    },
+                    exit: {
+                      opacity: 0.5
+                    },
+                    transition: { duration: 0.1, type: "spring", bounce: 0 },
+                    children: d
+                  },
+                  d
+                )) }),
+                " ",
+                "more"
+              ] })
+            },
+            "truncated text"
+          ) })
+        ]
+      }
+    );
+  }
+  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 }) => {
+  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;
+  }, [e.value, e.placeholder]);
+  return /* @__PURE__ */ u(
+    D.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();
+      },
+      onKeyDown: (i) => {
+        i.key === "ArrowDown" && e.onOpenToggle(), (i.key === "Enter" || i.key === " ") && i.preventDefault();
+      },
+      tgphRef: e.triggerRef,
+      children: /* @__PURE__ */ u(re, { children: /* @__PURE__ */ T(
+        M.Root,
+        {
+          id: e.triggerId,
+          variant: "outline",
+          w: "full",
+          h: "full",
+          color: e.errored ? "red" : "gray",
+          justify: "space-between",
+          role: "combobox",
+          "aria-label": a(),
+          "aria-controls": e.contentId,
+          "aria-expanded": e.open,
+          "aria-haspopup": "listbox",
+          "data-tgph-combobox-trigger": !0,
+          "data-tgph-comobox-trigger-open": e.open,
+          children: [
+            /* @__PURE__ */ u(Me, { size: r }),
+            /* @__PURE__ */ u(
+              M.Icon,
+              {
+                as: S.div,
+                icon: _.ChevronDown,
+                animate: { rotate: e.open ? "180deg" : "0deg" },
+                transition: { duration: 0.2, type: "spring", bounce: 0 },
+                "aria-hidden": !0
+              }
+            )
+          ]
+        }
+      ) })
+    }
+  );
+}, Ne = ({
+  tgphRef: r,
+  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);
+    },
+    [s]
+  );
+  return p.useEffect(() => {
+    const b = new ResizeObserver((h) => {
+      for (const v of h) {
+        const k = v.target;
+        m(k);
+      }
+    });
+    return l.current && s && b.observe(l.current), () => b.disconnect();
+  }, [s, m]), p.useEffect(() => {
+    s === !0 && i.open === !1 && g(!1);
+  }, [i.open, s]), /* @__PURE__ */ u(
+    D.Content,
+    {
+      as: S.div,
+      mt: "1",
+      initial: {
+        opacity: 0,
+        scale: 0.8,
+        height: "auto"
+      },
+      animate: {
+        opacity: 1,
+        scale: 1,
+        // Set height based on the internalContentRef so that
+        // we get smooth animations when the content changes
+        height: c ? `${c}px` : "auto"
+      },
+      exit: { opacity: 0, scale: 0 },
+      transition: { duration: 0.2, type: "spring", bounce: 0 },
+      onInteractOutside: () => {
+        i.setOpen(!1), o.current = !0;
+      },
+      onAnimationComplete: () => {
+        if (!s && l) {
+          const b = l.current;
+          m(b);
+        }
+      },
+      onCloseAutoFocus: (b) => {
+        var h, v;
+        o.current || (v = (h = i.triggerRef) == null ? void 0 : h.current) == null || v.focus(), o.current = !1, b.preventDefault();
+      },
+      onKeyDown: (b) => {
+        var v, k, E, C;
+        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);
+      },
+      style: {
+        width: "var(--tgph-comobobox-trigger-width)",
+        ...t,
+        "--tgph-comobobox-content-transform-origin": "var(--radix-popper-transform-origin)",
+        "--tgph-combobox-content-available-width": "var(--radix-popper-available-width)",
+        "--tgph-combobox-content-available-height": "calc(var(--radix-popper-available-height) - var(--tgph-spacing-8))",
+        "--tgph-comobobox-trigger-width": "var(--radix-popper-anchor-width)",
+        "--tgph-combobox-trigger-height": "var(--radix-popper-anchor-height)"
+      },
+      ...a,
+      tgphRef: n,
+      "data-tgph-combobox-content": !0,
+      "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 })
+    }
+  );
+}, ze = ({ ...r }) => {
+  const t = p.useContext(w);
+  return /* @__PURE__ */ u(
+    L,
+    {
+      id: t.contentId,
+      direction: "column",
+      gap: "1",
+      style: {
+        overflowY: "auto"
+      },
+      role: "listbox",
+      ...r
+    }
+  );
+}, ue = ({
+  value: r,
+  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;
+  if (d)
+    return /* @__PURE__ */ u(
+      D.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();
+        },
+        selected: e === null ? null : e ?? s,
+        onFocus: () => l(!0),
+        onBlur: () => l(!1),
+        role: "option",
+        "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-label": t,
+        ...i,
+        children: t || r
+      }
+    );
+}, De = ({
+  label: r = "Search",
+  placeholder: t = "Search",
+  tgphRef: e,
+  ...a
+}) => {
+  var l;
+  const i = p.useId(), o = p.useContext(w), n = z(e, o.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;
+    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 }) }),
+    /* @__PURE__ */ u(
+      ye,
+      {
+        id: i,
+        variant: "ghost",
+        placeholder: t,
+        value: o.searchQuery,
+        onChange: (c) => {
+          var d;
+          (d = o == null ? void 0 : o.setSearchQuery) == null || d.call(o, 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,
+          {
+            as: S.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" },
+            onClick: () => {
+              var c;
+              return (c = o.setSearchQuery) == null ? void 0 : c.call(o, "");
+            }
+          }
+        ) : null,
+        autoFocus: !0,
+        "data-tgph-combobox-search": !0,
+        "aria-controls": o.contentId,
+        ...a,
+        tgphRef: n
+      }
+    )
+  ] });
+}, Pe = ({
+  icon: r = { icon: _.Search, alt: "Search Icon" },
+  message: t = "No results found",
+  children: e,
+  ...a
+}) => {
+  const i = p.useContext(w), [o, 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,
+      {
+        as: S.div,
+        initial: { opacity: 0, scale: 0.8 },
+        animate: { opacity: 1, scale: 1 },
+        transition: { duration: 0.2, type: "spring", bounce: 0 },
+        gap: "1",
+        align: "center",
+        justify: "center",
+        w: "full",
+        my: "8",
+        "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 })
+        ]
+      }
+    );
+}, Fe = ({
+  leadingText: r = "Create",
+  values: t,
+  onCreate: e,
+  selected: a = null,
+  ...i
+}) => {
+  const o = 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))
+    return /* @__PURE__ */ u(
+      ue,
+      {
+        leadingIcon: { icon: _.Plus, "aria-hidden": !0 },
+        mx: "1",
+        value: o.searchQuery,
+        label: `${r} "${o.searchQuery}"`,
+        selected: a,
+        onSelect: () => {
+          e && o.value && o.searchQuery && (q(o.value) && e({ value: o.searchQuery }), Q(o.value) && e({ value: o.searchQuery }));
+        },
+        ...i
+      }
+    );
+}, He = {};
+Object.assign(He, {
+  Root: Ae,
+  Trigger: Be,
+  Content: Ne,
+  Options: ze,
+  Option: ue,
+  Search: De,
+  Empty: Pe,
+  Create: Fe
+});
+export {
+  He as Combobox
+};
+//# sourceMappingURL=index.mjs.map