cekat-ui 1.1.0 → 1.2.0

package/dist/index.es.js

@@ -1,49 +1,49 @@
-import * as h from "react";
-import s, { forwardRef as B, createElement as V, useId as D, useState as F } from "react";
-import { createPortal as _ } from "react-dom";
-function j(e) {
-  var r, t, a = "";
-  if (typeof e == "string" || typeof e == "number") a += e;
-  else if (typeof e == "object") if (Array.isArray(e)) {
-    var i = e.length;
-    for (r = 0; r < i; r++) e[r] && (t = j(e[r])) && (a && (a += " "), a += t);
-  } else for (t in e) e[t] && (a && (a += " "), a += t);
-  return a;
+import * as e from "react";
+import d, { forwardRef as pe, createElement as M, useId as ge, useState as be } from "react";
+import { createPortal as fe } from "react-dom";
+function J(t) {
+  var s, r, l = "";
+  if (typeof t == "string" || typeof t == "number") l += t;
+  else if (typeof t == "object") if (Array.isArray(t)) {
+    var i = t.length;
+    for (s = 0; s < i; s++) t[s] && (r = J(t[s])) && (l && (l += " "), l += r);
+  } else for (r in t) t[r] && (l && (l += " "), l += r);
+  return l;
 }
-function x() {
-  for (var e, r, t = 0, a = "", i = arguments.length; t < i; t++) (e = arguments[t]) && (r = j(e)) && (a && (a += " "), a += r);
-  return a;
+function g() {
+  for (var t, s, r = 0, l = "", i = arguments.length; r < i; r++) (t = arguments[r]) && (s = J(t)) && (l && (l += " "), l += s);
+  return l;
 }
-const R = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, $ = x, u = (e, r) => (t) => {
-  var a;
-  if (r?.variants == null) return $(e, t?.class, t?.className);
-  const { variants: i, defaultVariants: l } = r, m = Object.keys(i).map((n) => {
-    const c = t?.[n], f = l?.[n];
-    if (c === null) return null;
-    const g = R(c) || R(f);
-    return i[n][g];
-  }), d = t && Object.entries(t).reduce((n, c) => {
-    let [f, g] = c;
-    return g === void 0 || (n[f] = g), n;
-  }, {}), o = r == null || (a = r.compoundVariants) === null || a === void 0 ? void 0 : a.reduce((n, c) => {
-    let { class: f, className: g, ...b } = c;
-    return Object.entries(b).every((y) => {
-      let [E, N] = y;
-      return Array.isArray(N) ? N.includes({
-        ...l,
-        ...d
-      }[E]) : {
-        ...l,
-        ...d
-      }[E] === N;
+const H = (t) => typeof t == "boolean" ? `${t}` : t === 0 ? "0" : t, F = g, b = (t, s) => (r) => {
+  var l;
+  if (s?.variants == null) return F(t, r?.class, r?.className);
+  const { variants: i, defaultVariants: a } = s, c = Object.keys(i).map((o) => {
+    const m = r?.[o], p = a?.[o];
+    if (m === null) return null;
+    const f = H(m) || H(p);
+    return i[o][f];
+  }), n = r && Object.entries(r).reduce((o, m) => {
+    let [p, f] = m;
+    return f === void 0 || (o[p] = f), o;
+  }, {}), u = s == null || (l = s.compoundVariants) === null || l === void 0 ? void 0 : l.reduce((o, m) => {
+    let { class: p, className: f, ...h } = m;
+    return Object.entries(h).every((E) => {
+      let [w, k] = E;
+      return Array.isArray(k) ? k.includes({
+        ...a,
+        ...n
+      }[w]) : {
+        ...a,
+        ...n
+      }[w] === k;
     }) ? [
-      ...n,
-      f,
-      g
-    ] : n;
+      ...o,
+      p,
+      f
+    ] : o;
   }, []);
-  return $(e, m, o, t?.class, t?.className);
-}, O = u(
+  return F(t, c, u, r?.class, r?.className);
+}, he = b(
   [
     "inline-flex items-center justify-center font-bold",
     "transition-colors duration-150",
@@ -53,6 +53,7 @@ const R = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, $ = x, u =
   {
     variants: {
       size: {
+        xs: "py-1 px-2 gap-1 rounded-md text-caption-sm",
         sm: "h-[36px] px-4 gap-1 rounded-lg text-caption-sm",
         md: "h-[44px] px-4 gap-2 rounded-lg text-sm",
         lg: "h-[52px] px-5 gap-2 rounded-[10px] text-body-sm",
@@ -63,13 +64,17 @@ const R = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, $ = x, u =
         primary: "",
         destructive: ""
       },
+      iconOnly: {
+        true: "!p-0",
+        false: ""
+      },
       variant: {
         solid: ["text-white", "disabled:bg-light-100 disabled:text-light-400"],
         outline: [
           "bg-white border",
           "disabled:bg-white disabled:text-light-400 disabled:border-light-200"
         ],
-        ghost: ["bg-white", "disabled:text-light-400"],
+        ghost: ["bg-transparent", "disabled:text-light-400"],
         "outline-primary": [
           "bg-white border border-primary-500 text-primary-500",
           "hover:bg-primary-100 hover:border-primary-300 hover:text-primary-800",
@@ -77,7 +82,7 @@ const R = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, $ = x, u =
           "disabled:bg-white disabled:text-light-400 disabled:border-light-200"
         ],
         "ghost-primary": [
-          "bg-white text-primary-500",
+          "bg-transparent text-primary-500",
           "hover:bg-primary-50 hover:text-primary-800",
           "focus-visible:ring-2 focus-visible:ring-primary-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white",
           "disabled:text-light-400"
@@ -117,7 +122,7 @@ const R = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, $ = x, u =
         variant: "ghost",
         class: [
           "text-light-800",
-          "hover:bg-light-50",
+          "hover:bg-light-50 hover:text-light-900",
           "focus-visible:ring-2 focus-visible:ring-primary-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white"
         ].join(" ")
       },
@@ -134,7 +139,7 @@ const R = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, $ = x, u =
         tone: "primary",
         variant: "plain-black",
         class: [
-          "text-light-900",
+          "text-light-800",
           "hover:text-light-900 hover:bg-transparent",
           "focus-visible:ring-2 focus-visible:ring-primary-400 focus-visible:ring-offset-2"
         ].join(" ")
@@ -155,7 +160,7 @@ const R = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, $ = x, u =
         variant: "outline",
         class: [
           "border-error-500 text-error-500",
-          "hover:border-error-300 hover:bg-error-50 hover:text-error-800",
+          "hover:border-error-300 hover:bg-error-100 hover:text-error-800",
           "focus-visible:ring-2 focus-visible:ring-error-300 focus-visible:ring-offset-2 focus-visible:ring-offset-white"
         ].join(" ")
       },
@@ -177,43 +182,56 @@ const R = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, $ = x, u =
           "hover:text-error-800 hover:bg-transparent",
           "focus-visible:ring-2 focus-visible:ring-error-300 focus-visible:ring-offset-2"
         ].join(" ")
-      }
+      },
+      /* ================= ICON ONLY (square) ================= */
+      { size: "xs", iconOnly: !0, class: "!w-[26px] !h-[26px]" },
+      { size: "sm", iconOnly: !0, class: "!w-[36px] !h-[36px]" },
+      { size: "md", iconOnly: !0, class: "!w-[44px] !h-[44px]" },
+      { size: "lg", iconOnly: !0, class: "!w-[52px] !h-[52px]" },
+      { size: "xl", iconOnly: !0, class: "!w-[60px] !h-[60px]" },
+      { size: "2xl", iconOnly: !0, class: "!w-[68px] !h-[68px]" }
     ],
     defaultVariants: {
       size: "md",
       tone: "primary",
-      variant: "solid"
+      variant: "solid",
+      iconOnly: !1
     }
   }
-), P = ({
-  children: e,
-  className: r,
-  tone: t,
-  variant: a,
+), xe = ({
+  children: t,
+  className: s,
+  tone: r,
+  variant: l,
   size: i,
-  ...l
-}) => /* @__PURE__ */ s.createElement(
+  iconOnly: a,
+  ...c
+}) => /* @__PURE__ */ d.createElement(
   "button",
   {
-    className: x(O({ tone: t, variant: a, size: i }), r),
-    ...l
+    className: g(
+      he({ tone: r, variant: l, size: i, iconOnly: a }),
+      s
+    ),
+    ...c
   },
-  e
-), G = ({ children: e }) => /* @__PURE__ */ s.createElement("span", { className: "flex items-center" }, e), W = ({ children: e }) => /* @__PURE__ */ s.createElement("span", { className: "whitespace-nowrap" }, e), z = P;
-z.Icon = G;
-z.Text = W;
-const M = u(
+  t
+), ve = ({ children: t }) => /* @__PURE__ */ d.createElement("span", { className: "flex items-center" }, t), ye = ({ children: t }) => /* @__PURE__ */ d.createElement("span", { className: "whitespace-nowrap" }, t), Y = xe;
+Y.Icon = ve;
+Y.Text = ye;
+const we = b(
   [
     "inline-flex items-center justify-center",
-    "border-2 transition-colors duration-150",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400"
+    "border transition-colors duration-150",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white"
   ],
   {
     variants: {
       size: {
-        sm: "h-5 w-5 rounded-[4px]",
-        md: "h-6 w-6 rounded-[6px]",
-        lg: "h-8 w-8 rounded-[8px]"
+        sm: "h-4 w-4 rounded-[4px]",
+        md: "h-5 w-5 rounded-[6px]",
+        // deprecated: `lg` is aliased to `md` for backward compatibility.
+        lg: "h-5 w-5 rounded-[6px]"
       },
       checked: {
         true: "",
@@ -228,16 +246,16 @@ const M = u(
       {
         checked: !1,
         disabled: !1,
-        className: "bg-white border-[#D0D5DD]"
+        className: "bg-white border-light-200 hover:border-light-400"
       },
       {
         checked: !0,
         disabled: !1,
-        className: "bg-primary-500 border-primary-500 text-white"
+        className: "bg-primary-500 border-primary-500 text-white hover:bg-primary-800 hover:border-primary-800"
       },
       {
         disabled: !0,
-        className: "bg-[#F2F4F7] border-[#E4E7EC] text-white"
+        className: "bg-light-100 border-light-200 text-white"
       }
     ],
     defaultVariants: {
@@ -246,48 +264,49 @@ const M = u(
       disabled: !1
     }
   }
-), L = {
+), Ee = {
   sm: { width: 12, height: 9 },
   md: { width: 14, height: 10 },
-  lg: { width: 18, height: 14 }
-}, U = h.forwardRef(
+  // deprecated: `lg` is aliased to `md` for backward compatibility.
+  lg: { width: 14, height: 10 }
+}, Ne = e.forwardRef(
   ({
-    id: e,
-    checked: r,
-    indeterminate: t = !1,
-    disabled: a,
+    id: t,
+    checked: s,
+    indeterminate: r = !1,
+    disabled: l,
     size: i = "md",
-    onCheckedChange: l,
-    className: m
-  }, d) => {
-    const o = () => {
-      a || l?.(!r);
-    }, n = L[i], c = a ? "text-white/80" : "text-current";
-    return /* @__PURE__ */ h.createElement(
+    onCheckedChange: a,
+    className: c
+  }, n) => {
+    const u = () => {
+      l || a?.(!s);
+    }, o = Ee[i], m = l ? "text-white/80" : "text-current";
+    return /* @__PURE__ */ e.createElement(
       "button",
       {
-        id: e,
-        ref: d,
+        id: t,
+        ref: n,
         type: "button",
         role: "checkbox",
-        "aria-checked": t ? "mixed" : r,
-        disabled: a,
-        onClick: o,
-        className: x(
-          M({ size: i, checked: r, disabled: a }),
-          m
+        "aria-checked": r ? "mixed" : s,
+        disabled: l,
+        onClick: u,
+        className: g(
+          we({ size: i, checked: s, disabled: l }),
+          c
         )
       },
-      r && !t && /* @__PURE__ */ h.createElement(
+      s && !r && /* @__PURE__ */ e.createElement(
         "svg",
         {
-          width: n.width,
-          height: n.height,
+          width: o.width,
+          height: o.height,
           viewBox: "0 0 14 10",
           fill: "none",
-          className: c
+          className: m
         },
-        /* @__PURE__ */ h.createElement(
+        /* @__PURE__ */ e.createElement(
           "path",
           {
             d: "M1 5L5 9L13 1",
@@ -298,56 +317,56 @@ const M = u(
           }
         )
       ),
-      t && /* @__PURE__ */ h.createElement(
+      r && /* @__PURE__ */ e.createElement(
         "span",
         {
-          className: x(
-            c,
+          className: g(
+            m,
             "bg-current rounded-sm",
             i === "sm" && "h-0.5 w-3",
-            i === "md" && "h-0.5 w-4",
-            i === "lg" && "h-0.5 w-5"
+            (i === "md" || i === "lg") && "h-0.5 w-4"
           )
         }
       )
     );
   }
 );
-U.displayName = "Checkbox";
-const I = h.createContext(null), Fe = ({
-  value: e,
-  defaultValue: r,
-  onValueChange: t,
-  children: a,
+Ne.displayName = "Checkbox";
+const ee = e.createContext(null), $r = ({
+  value: t,
+  defaultValue: s,
+  onValueChange: r,
+  children: l,
   className: i
 }) => {
-  const [l, m] = h.useState(r), d = e ?? l, o = (n) => {
-    m(n), t?.(n);
+  const [a, c] = e.useState(s), n = t ?? a, u = (o) => {
+    c(o), r?.(o);
   };
-  return /* @__PURE__ */ h.createElement(
-    I.Provider,
+  return /* @__PURE__ */ e.createElement(
+    ee.Provider,
     {
-      value: { value: d, onValueChange: o }
+      value: { value: n, onValueChange: u }
     },
-    /* @__PURE__ */ h.createElement("div", { role: "radiogroup", className: i }, a)
+    /* @__PURE__ */ e.createElement("div", { role: "radiogroup", className: i }, l)
   );
-}, K = () => {
-  const e = h.useContext(I);
-  if (!e)
+}, ke = () => {
+  const t = e.useContext(ee);
+  if (!t)
     throw new Error("RadioGroupItem must be used within RadioGroup");
-  return e;
-}, Z = u(
+  return t;
+}, Se = b(
   [
     "relative inline-flex items-center justify-center",
-    "border-2 rounded-full transition-colors duration-150",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400"
+    "border rounded-full transition-colors duration-150",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white"
   ],
   {
     variants: {
       size: {
-        sm: "h-5 w-5",
-        md: "h-6 w-6",
-        lg: "h-8 w-8"
+        sm: "h-4 w-4",
+        md: "h-5 w-5",
+        // deprecated: `lg` is aliased to `md` for backward compatibility.
+        lg: "h-5 w-5"
       },
       checked: {
         true: "",
@@ -362,16 +381,16 @@ const I = h.createContext(null), Fe = ({
       {
         checked: !1,
         disabled: !1,
-        className: "border-[#D0D5DD] bg-white"
+        className: "border-light-200 bg-white hover:border-light-400"
       },
       {
         checked: !0,
         disabled: !1,
-        className: "border-primary-500 bg-primary-500"
+        className: "border-primary-500 bg-primary-500 hover:bg-primary-800 hover:border-primary-800"
       },
       {
         disabled: !0,
-        className: "border-[#E4E7EC] bg-[#F2F4F7]"
+        className: "border-light-200 bg-light-100"
       }
     ],
     defaultVariants: {
@@ -380,14 +399,15 @@ const I = h.createContext(null), Fe = ({
       disabled: !1
     }
   }
-), q = u(
+), Ce = b(
   ["rounded-full bg-white transition-all"],
   {
     variants: {
       size: {
-        sm: "h-2 w-2",
-        md: "h-2.5 w-2.5",
-        lg: "h-3 w-3"
+        sm: "h-1.5 w-1.5",
+        md: "h-2 w-2",
+        // deprecated: `lg` is aliased to `md` for backward compatibility.
+        lg: "h-2 w-2"
       },
       checked: {
         true: "scale-100",
@@ -399,135 +419,163 @@ const I = h.createContext(null), Fe = ({
       checked: !1
     }
   }
-), H = h.forwardRef(({ id: e, value: r, disabled: t, size: a = "md", className: i }, l) => {
-  const { value: m, onValueChange: d } = K(), o = m === r;
-  return /* @__PURE__ */ h.createElement(
+), ze = e.forwardRef(({ id: t, value: s, disabled: r, size: l = "md", className: i }, a) => {
+  const { value: c, onValueChange: n } = ke(), u = c === s;
+  return /* @__PURE__ */ e.createElement(
     "button",
     {
-      ref: l,
-      id: e,
+      ref: a,
+      id: t,
       type: "button",
       role: "radio",
-      "aria-checked": o,
-      disabled: t,
+      "aria-checked": u,
+      disabled: r,
       onClick: () => {
-        t || d?.(r);
+        r || n?.(s);
       },
-      className: x(
-        Z({ size: a, checked: o, disabled: t }),
+      className: g(
+        Se({ size: l, checked: u, disabled: r }),
         i
       )
     },
-    /* @__PURE__ */ h.createElement(
+    /* @__PURE__ */ e.createElement(
       "span",
       {
-        className: q({
-          size: a,
-          checked: o
+        className: Ce({
+          size: l,
+          checked: u
         })
       }
     )
   );
 });
-H.displayName = "RadioGroupItem";
-const J = u(
-  "relative inline-flex shrink-0 cursor-pointer rounded-full transition-colors duration-200 focus-visible:outline-none",
+ze.displayName = "RadioGroupItem";
+const Le = b(
+  [
+    "inline-flex items-center shrink-0 rounded-full p-[2px]",
+    "transition-colors duration-200",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white"
+  ],
   {
     variants: {
       size: {
-        sm: "h-6 w-10",
-        md: "h-8 w-14",
-        lg: "h-10 w-[72px]"
+        sm: "h-5 w-9",
+        md: "h-6 w-11",
+        // deprecated: `lg` is aliased to `md` for backward compatibility.
+        lg: "h-6 w-11"
       },
       checked: {
-        true: "bg-primary-500",
-        false: "bg-[#e4e7ec]"
+        true: "justify-end",
+        false: "justify-start"
       },
       disabled: {
-        true: "cursor-not-allowed opacity-60"
-      }
-    },
-    defaultVariants: {
-      size: "md",
-      checked: !1
-    }
-  }
-), Q = u(
-  "absolute top-1 left-1 rounded-full bg-white transition-transform duration-200 shadow",
-  {
-    variants: {
-      size: {
-        sm: "h-4 w-4",
-        md: "h-6 w-6",
-        lg: "h-8 w-8"
+        true: "cursor-not-allowed",
+        false: "cursor-pointer"
       },
-      checked: {
-        true: "",
-        false: ""
+      variant: {
+        default: "",
+        success: ""
       }
     },
     compoundVariants: [
       {
-        size: "sm",
-        checked: !0,
-        className: "translate-x-4"
+        checked: !1,
+        disabled: !1,
+        className: "bg-light-200"
       },
       {
-        size: "md",
         checked: !0,
-        className: "translate-x-6"
+        disabled: !1,
+        variant: "default",
+        className: "bg-primary-500 hover:bg-primary-800"
       },
       {
-        size: "lg",
         checked: !0,
-        className: "translate-x-8"
+        disabled: !1,
+        variant: "success",
+        className: "bg-success-500 hover:bg-success-800"
+      },
+      {
+        disabled: !0,
+        className: "bg-light-100"
+      },
+      {
+        variant: "default",
+        className: "focus-visible:ring-primary-400"
+      },
+      {
+        variant: "success",
+        className: "focus-visible:ring-success-500"
       }
     ],
     defaultVariants: {
       size: "md",
-      checked: !1
+      checked: !1,
+      disabled: !1,
+      variant: "default"
+    }
+  }
+), Be = b(
+  "rounded-full shrink-0 shadow-[0_1px_3px_0_rgba(16,24,40,0.10),0_1px_2px_0_rgba(16,24,40,0.06)]",
+  {
+    variants: {
+      size: {
+        sm: "h-4 w-4",
+        md: "h-5 w-5",
+        // deprecated: `lg` is aliased to `md` for backward compatibility.
+        lg: "h-5 w-5"
+      },
+      disabled: {
+        true: "bg-light-50",
+        false: "bg-white"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      disabled: !1
     }
   }
-), X = h.forwardRef(
+), Te = e.forwardRef(
   ({
-    checked: e = !1,
-    size: r = "md",
-    disabled: t,
-    onCheckedChange: a,
-    className: i
-  }, l) => /* @__PURE__ */ h.createElement(
+    checked: t = !1,
+    size: s = "md",
+    variant: r = "default",
+    disabled: l,
+    onCheckedChange: i,
+    className: a
+  }, c) => /* @__PURE__ */ e.createElement(
     "button",
     {
-      ref: l,
+      ref: c,
       type: "button",
       role: "switch",
-      "aria-checked": e,
-      disabled: t,
+      "aria-checked": t,
+      disabled: l,
       onClick: () => {
-        t || a?.(!e);
+        l || i?.(!t);
       },
-      className: x(
-        J({ size: r, checked: e, disabled: t }),
-        i
+      className: g(
+        Le({ size: s, checked: t, disabled: l, variant: r }),
+        a
       )
     },
-    /* @__PURE__ */ h.createElement(
+    /* @__PURE__ */ e.createElement(
       "span",
       {
-        className: Q({
-          size: r,
-          checked: e
+        className: Be({
+          size: s,
+          disabled: l
         })
       }
     )
   )
 );
-X.displayName = "Toggle";
-const Y = u(
+Te.displayName = "Toggle";
+const Ve = b(
   [
-    "relative rounded-xl px-4 py-2 text-sm text-white",
-    "bg-[#020b1c]",
-    "shadow-[0_10px_30px_rgba(2,8,23,0.25)]",
+    "relative rounded-lg text-caption-sm font-semibold text-white",
+    "bg-primary-900",
+    "shadow-lg",
     "pointer-events-none",
     "select-none"
   ],
@@ -538,426 +586,1789 @@ const Y = u(
         bottom: "",
         left: "",
         right: ""
+      },
+      hasSupportingText: {
+        true: "p-3",
+        false: "px-3 py-2"
       }
     },
     defaultVariants: {
-      side: "top"
+      side: "top",
+      hasSupportingText: !1
     }
   }
-), ee = u(
-  [
-    "absolute w-2 h-2 rotate-45",
-    "bg-[#020b1c]"
-  ],
-  {
-    variants: {
-      side: {
-        top: "bottom-[-4px] left-1/2 -translate-x-1/2",
-        bottom: "top-[-4px] left-1/2 -translate-x-1/2",
-        left: "right-[-4px] top-1/2 -translate-y-1/2",
-        right: "left-[-4px] top-1/2 -translate-y-1/2"
-      }
-    },
-    defaultVariants: {
-      side: "top"
+), je = "mt-1 font-medium text-light-100", Ie = b(["absolute"], {
+  variants: {
+    side: {
+      top: [
+        "bottom-[-6px] left-1/2 -translate-x-1/2",
+        "border-x-8 border-x-transparent border-t-[6px] border-t-primary-900"
+      ],
+      bottom: [
+        "top-[-6px] left-1/2 -translate-x-1/2",
+        "border-x-8 border-x-transparent border-b-[6px] border-b-primary-900"
+      ],
+      left: [
+        "right-[-6px] top-1/2 -translate-y-1/2",
+        "border-y-8 border-y-transparent border-l-[6px] border-l-primary-900"
+      ],
+      right: [
+        "left-[-6px] top-1/2 -translate-y-1/2",
+        "border-y-8 border-y-transparent border-r-[6px] border-r-primary-900"
+      ]
     }
+  },
+  defaultVariants: {
+    side: "top"
   }
-), C = 12, te = ({
-  content: e,
+}), O = 12, Oe = ({
+  content: t,
+  supportingText: s,
   side: r = "top",
-  open: t,
-  defaultOpen: a = !1,
-  disabled: i = !1,
-  delay: l = 0,
-  className: m,
-  children: d
+  open: l,
+  defaultOpen: i = !1,
+  disabled: a = !1,
+  delay: c = 0,
+  className: n,
+  children: u
 }) => {
-  const [o, n] = h.useState(a), [c, f] = h.useState(null), g = h.useRef(null), b = h.useRef(null), y = () => {
-    if (i || !g.current) return;
-    const v = g.current.getBoundingClientRect();
-    let p = 0, w = 0;
+  const [o, m] = e.useState(i), [p, f] = e.useState(null), h = e.useRef(null), E = e.useRef(null), w = () => {
+    if (a || !h.current) return;
+    const x = h.current.getBoundingClientRect();
+    let N = 0, C = 0;
     switch (r) {
       case "top":
-        p = v.top - C, w = v.left + v.width / 2;
+        N = x.top - O, C = x.left + x.width / 2;
         break;
       case "bottom":
-        p = v.bottom + C, w = v.left + v.width / 2;
+        N = x.bottom + O, C = x.left + x.width / 2;
         break;
       case "left":
-        p = v.top + v.height / 2, w = v.left - C;
+        N = x.top + x.height / 2, C = x.left - O;
         break;
       case "right":
-        p = v.top + v.height / 2, w = v.right + C;
+        N = x.top + x.height / 2, C = x.right + O;
         break;
     }
-    const k = () => {
-      f({ top: p, left: w }), n(!0);
+    const L = () => {
+      f({ top: N, left: C }), m(!0);
     };
-    l > 0 ? b.current = window.setTimeout(k, l) : k();
-  }, E = () => {
-    b.current && (clearTimeout(b.current), b.current = null), n(!1);
-  }, N = t ?? o;
-  return /* @__PURE__ */ h.createElement(h.Fragment, null, /* @__PURE__ */ h.createElement(
+    c > 0 ? E.current = window.setTimeout(L, c) : L();
+  }, k = () => {
+    E.current && (clearTimeout(E.current), E.current = null), m(!1);
+  }, y = l ?? o;
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
     "span",
     {
-      ref: g,
+      ref: h,
       className: "inline-flex",
-      onMouseEnter: y,
-      onMouseLeave: E,
-      onFocus: y,
-      onBlur: E,
+      onMouseEnter: w,
+      onMouseLeave: k,
+      onFocus: w,
+      onBlur: k,
       tabIndex: 0
     },
-    d
-  ), N && c && _(
-    /* @__PURE__ */ h.createElement(
+    u
+  ), y && p && fe(
+    /* @__PURE__ */ e.createElement(
       "div",
       {
         role: "tooltip",
         className: "fixed z-[9999] pointer-events-none",
         style: {
-          top: c.top,
-          left: c.left,
+          top: p.top,
+          left: p.left,
           transform: r === "top" ? "translate(-50%, -100%)" : r === "bottom" ? "translate(-50%, 0)" : r === "left" ? "translate(-100%, -50%)" : "translate(0, -50%)"
         }
       },
-      /* @__PURE__ */ h.createElement(
+      /* @__PURE__ */ e.createElement(
         "div",
         {
-          className: x(
-            Y({ side: r }),
-            m
+          className: g(
+            Ve({
+              side: r,
+              hasSupportingText: !!s
+            }),
+            n
           )
         },
-        e,
-        /* @__PURE__ */ h.createElement("span", { className: ee({ side: r }) })
+        t,
+        s && /* @__PURE__ */ e.createElement("p", { className: je }, s),
+        /* @__PURE__ */ e.createElement("span", { className: Ie({ side: r }) })
       )
     ),
     document.body
   ));
 };
-te.displayName = "Tooltip";
-const re = u("flex flex-col gap-1 w-[320px]", {
-  variants: {
-    size: {
-      sm: "text-caption-lg",
-      md: "text-sm"
-    }
+Oe.displayName = "Tooltip";
+const _e = {
+  brand: {
+    bg: "bg-primary-50",
+    border: "border-primary-300",
+    text: "text-primary-700"
   },
-  defaultVariants: {
-    size: "md"
-  }
-}), se = u("flex items-center gap-1 font-bold text-sm", {
-  variants: {
-    error: {
-      true: "",
-      false: "text-light-800"
-    }
+  gray: {
+    bg: "bg-white",
+    border: "border-light-200",
+    text: "text-light-800"
   },
-  defaultVariants: {
-    error: !1
+  error: {
+    bg: "bg-error-50",
+    border: "border-error-200",
+    text: "text-error-700"
+  },
+  warning: {
+    bg: "bg-warning-50",
+    border: "border-warning-200",
+    text: "text-warning-700"
+  },
+  success: {
+    bg: "bg-success-50",
+    border: "border-success-200",
+    text: "text-success-700"
+  },
+  "blue-gray": {
+    bg: "bg-blue-gray-50",
+    border: "border-blue-gray-200",
+    text: "text-blue-gray-700"
+  },
+  "blue-light": {
+    bg: "bg-blue-light-50",
+    border: "border-blue-light-200",
+    text: "text-blue-light-700"
+  },
+  indigo: {
+    bg: "bg-indigo-50",
+    border: "border-indigo-200",
+    text: "text-indigo-700"
+  },
+  purple: {
+    bg: "bg-purple-50",
+    border: "border-purple-200",
+    text: "text-purple-700"
+  },
+  blue: {
+    bg: "bg-blue-50",
+    border: "border-blue-200",
+    text: "text-blue-700"
+  },
+  pink: {
+    bg: "bg-pink-50",
+    border: "border-pink-200",
+    text: "text-pink-700"
+  },
+  orange: {
+    bg: "bg-orange-50",
+    border: "border-orange-200",
+    text: "text-orange-700"
   }
-}), ae = u(
+}, $e = b(
   [
-    "flex items-center w-full rounded-lg border",
-    "bg-white transition-colors",
-    "focus-within:ring-2"
+    "inline-flex items-center gap-1 border",
+    "font-medium transition-colors duration-150",
+    "select-none"
   ],
   {
     variants: {
       size: {
-        sm: "h-9 px-3 gap-2",
-        md: "h-11 px-3 gap-2"
+        sm: "text-caption-sm py-[3px]",
+        md: "text-caption-lg py-[2px]",
+        lg: "text-caption-lg py-1"
       },
-      error: {
-        true: ["border-error-200", "focus-within:ring-error-500"],
-        false: ["border-light-200", "focus-within:ring-primary-500"]
+      shape: {
+        rounded: "rounded-md",
+        pill: "rounded-full"
+      },
+      hasLeading: {
+        true: "",
+        false: ""
+      },
+      hasTrailing: {
+        true: "",
+        false: ""
+      },
+      interactive: {
+        true: "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white",
+        false: ""
       },
       disabled: {
-        true: "bg-light-100 text-light-400 cursor-not-allowed",
+        true: "cursor-not-allowed opacity-60",
         false: ""
       }
     },
+    compoundVariants: [
+      { size: "sm", hasLeading: !1, className: "pl-2" },
+      { size: "sm", hasLeading: !0, className: "pl-1" },
+      { size: "sm", hasTrailing: !1, className: "pr-2" },
+      { size: "sm", hasTrailing: !0, className: "pr-1" },
+      { size: "md", hasLeading: !1, className: "pl-[9px]" },
+      { size: "md", hasLeading: !0, className: "pl-1" },
+      { size: "md", hasTrailing: !1, className: "pr-[9px]" },
+      { size: "md", hasTrailing: !0, className: "pr-1" },
+      { size: "lg", hasLeading: !1, className: "pl-2.5" },
+      { size: "lg", hasLeading: !0, className: "pl-1.5" },
+      { size: "lg", hasTrailing: !1, className: "pr-2.5" },
+      { size: "lg", hasTrailing: !0, className: "pr-1.5" }
+    ],
     defaultVariants: {
-      size: "md",
-      error: !1,
+      size: "sm",
+      shape: "rounded",
+      hasLeading: !1,
+      hasTrailing: !1,
+      interactive: !1,
       disabled: !1
     }
   }
-), ie = u(
-  [
-    "flex-1 bg-transparent outline-none text-light-900",
-    "placeholder:text-light-500",
-    "disabled:text-light-400 disabled:cursor-not-allowed"
-  ],
+), We = b(
+  ["shrink-0 rounded border bg-white transition-colors duration-150 size-3.5"],
   {
     variants: {
-      size: {
-        sm: "text-caption-lg",
-        md: "text-body-sm"
-      },
-      error: {
-        true: "",
-        false: "text-light-900"
+      checked: {
+        true: "bg-primary-500 border-primary-500",
+        false: ""
       }
     },
     defaultVariants: {
-      size: "md",
-      error: !1
-    }
-  }
-), le = u("text-caption-lg", {
-  variants: {
-    error: {
-      true: "text-error-600",
-      false: "text-light-700"
+      checked: !1
     }
   }
-});
-function S({
-  label: e,
-  required: r,
-  hint: t,
-  rightIcon: a,
-  size: i = "md",
-  error: l = !1,
-  disabled: m = !1,
-  prefix: d,
-  suffix: o,
-  maxLength: n,
-  value: c,
-  className: f,
-  wrapperClassName: g,
-  ...b
-}) {
-  return /* @__PURE__ */ s.createElement("div", { className: x(re({ size: i }), g) }, e && /* @__PURE__ */ s.createElement("label", { className: se({ error: l }) }, e, r && /* @__PURE__ */ s.createElement("span", { className: "text-error-400" }, "*")), /* @__PURE__ */ s.createElement(
+), Re = "shrink-0 rounded-[3px] bg-light-100 px-1 text-light-800", Me = "shrink-0 rounded-[3px] p-0.5 hover:bg-black/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400", te = /^#([0-9a-f]{6})$/i, re = (t) => te.test(t.trim()), se = (t, s) => {
+  const r = te.exec(t.trim());
+  if (!r) return;
+  const l = parseInt(r[1], 16), i = l >> 16 & 255, a = l >> 8 & 255, c = l & 255;
+  return `rgba(${i}, ${a}, ${c}, ${s})`;
+}, ae = ({
+  children: t,
+  size: s = "sm",
+  shape: r = "rounded",
+  icon: l,
+  checked: i,
+  onCheckedChange: a,
+  onClose: c,
+  count: n,
+  disabled: u = !1,
+  className: o,
+  color: m = "gray",
+  customColor: p
+}) => {
+  const f = a !== void 0, h = i !== void 0 || !!l, E = !!c || n !== void 0, w = _e[m], k = !!(p && re(p)), y = k ? {
+    borderColor: p,
+    backgroundColor: se(p, 0.12),
+    color: p
+  } : void 0, x = () => {
+    u || a?.(!i);
+  }, N = (C) => {
+    !f || u || (C.key === "Enter" || C.key === " ") && (C.preventDefault(), x());
+  };
+  return /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: ae({
-        size: i,
-        error: l,
-        disabled: m
-      })
-    },
-    d && /* @__PURE__ */ s.createElement("div", { className: "flex items-center" }, d),
-    /* @__PURE__ */ s.createElement(
-      "input",
-      {
-        ...b,
-        disabled: m,
-        maxLength: n,
-        value: c,
-        className: x(ie({ size: i }), f)
-      }
-    ),
-    (a || o) && /* @__PURE__ */ s.createElement("div", { className: "flex h-full items-center gap-2" }, a && /* @__PURE__ */ s.createElement("div", { className: "flex h-full items-center pb-0.5 text-light-400 hover:text-light-600" }, a), o && /* @__PURE__ */ s.createElement("div", { className: "flex h-full items-center gap-1 leading-none text-light-700" }, o))
-  ), n && typeof c == "string" && /* @__PURE__ */ s.createElement("div", { className: "text-right text-xs text-light-400" }, c.length, "/", n), t && /* @__PURE__ */ s.createElement("p", { className: le({ error: l }) }, t));
-}
-function ne({ children: e }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center text-light-500" }, e);
-}
-function oe({ children: e }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center text-light-500" }, e);
-}
-var ce = {
-  outline: {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  },
-  filled: {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    fill: "currentColor",
-    stroke: "none"
-  }
-};
-const ue = (e, r, t, a) => {
-  const i = B(
-    ({ color: l = "currentColor", size: m = 24, stroke: d = 2, title: o, className: n, children: c, ...f }, g) => V(
-      "svg",
+      role: f ? "checkbox" : void 0,
+      "aria-checked": f ? !!i : void 0,
+      "aria-disabled": u || void 0,
+      tabIndex: f && !u ? 0 : void 0,
+      onClick: f ? x : void 0,
+      onKeyDown: N,
+      style: y,
+      className: g(
+        $e({
+          size: s,
+          shape: r,
+          hasLeading: h,
+          hasTrailing: E,
+          interactive: f,
+          disabled: u
+        }),
+        !k && w.bg,
+        !k && w.border,
+        !k && w.text,
+        o
+      )
+    },
+    i !== void 0 && /* @__PURE__ */ e.createElement(
+      "span",
       {
-        ref: g,
-        ...ce[e],
-        width: m,
-        height: m,
-        className: ["tabler-icon", `tabler-icon-${r}`, n].join(" "),
-        strokeWidth: d,
-        stroke: l,
-        ...f
+        className: g(
+          We({ checked: i }),
+          !i && !k && w.border
+        ),
+        style: !i && k ? { borderColor: p } : void 0
       },
-      [
-        o && V("title", { key: "svg-title" }, o),
-        ...a.map(([b, y]) => V(b, y)),
-        ...Array.isArray(c) ? c : [c]
-      ]
-    )
-  );
-  return i.displayName = `${t}`, i;
-};
-const de = [["path", { d: "M6 9l6 6l6 -6", key: "svg-0" }]], A = ue("outline", "chevron-down", "ChevronDown", de);
-function _e({
-  size: e = "md",
-  label: r,
-  required: t,
-  hint: a,
-  error: i,
-  disabled: l,
-  placeholder: m = "+1 (555) 000-0000",
-  rightIcon: d,
-  value: o,
-  onChange: n,
-  className: c,
-  wrapperClassName: f
-}) {
-  return /* @__PURE__ */ s.createElement(
-    S,
-    {
-      size: e,
-      label: r,
-      required: t,
-      hint: a,
-      error: i,
-      disabled: l,
-      placeholder: m,
-      rightIcon: d,
-      value: o,
-      onChange: n,
-      className: c,
-      wrapperClassName: f,
-      prefix: /* @__PURE__ */ s.createElement("div", { className: "flex items-center gap-1 pr-2 text-sm text-light-700" }, /* @__PURE__ */ s.createElement("span", null, "US"), /* @__PURE__ */ s.createElement(A, { size: 14 }))
-    }
-  );
-}
-function Oe({
-  size: e = "md",
-  label: r,
-  required: t,
-  hint: a,
-  error: i,
-  disabled: l,
-  value: m,
-  placeholder: d = "1,000.00",
-  currency: o = "USD",
-  onCurrencyChange: n,
-  rightIcon: c,
-  onChange: f,
-  className: g,
-  wrapperClassName: b
-}) {
-  return /* @__PURE__ */ s.createElement(
-    S,
-    {
-      size: e,
-      label: r,
-      required: t,
-      hint: a,
-      error: i,
-      disabled: l,
-      value: m,
-      placeholder: d,
-      rightIcon: c,
-      onChange: f,
-      className: g,
-      wrapperClassName: b,
-      prefix: /* @__PURE__ */ s.createElement("span", { className: "select-none text-sm text-light-700" }, "$"),
-      suffix: /* @__PURE__ */ s.createElement(
-        "button",
+      i && /* @__PURE__ */ e.createElement(
+        "svg",
         {
-          type: "button",
-          disabled: l,
-          onClick: n,
-          className: "flex items-center gap-1 text-sm text-light-700 hover:text-light-900 disabled:cursor-not-allowed"
+          viewBox: "0 0 14 10",
+          fill: "none",
+          className: "size-full text-white"
         },
-        o,
-        /* @__PURE__ */ s.createElement(A, { size: 14 })
+        /* @__PURE__ */ e.createElement(
+          "path",
+          {
+            d: "M1 5L5 9L13 1",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
       )
-    }
-  );
-}
-function Pe({
-  size: e = "md",
-  label: r,
-  required: t,
-  hint: a,
-  disabled: i,
-  error: l,
-  className: m,
-  wrapperClassName: d,
-  value: o,
-  maxLength: n,
-  placeholder: c,
-  onChange: f
-}) {
-  const g = o.length > n, b = l || g;
-  return /* @__PURE__ */ s.createElement(
-    S,
-    {
-      size: e,
-      label: r,
-      required: t,
-      disabled: i,
-      error: b,
-      value: o,
-      placeholder: c,
-      onChange: f,
-      className: m,
-      wrapperClassName: d,
-      hint: a,
-      suffix: /* @__PURE__ */ s.createElement(
-        "span",
-        {
-          className: x(
-            "text-caption-lg",
-            g ? "text-error-600" : "text-light-400"
-          )
+    ),
+    l,
+    /* @__PURE__ */ e.createElement("span", { className: "whitespace-nowrap" }, t),
+    n !== void 0 && /* @__PURE__ */ e.createElement("span", { className: Re }, n),
+    c && /* @__PURE__ */ e.createElement(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Remove",
+        disabled: u,
+        onClick: (C) => {
+          C.stopPropagation(), c();
         },
-        o.length,
-        "/",
-        n
-      )
-    }
+        className: Me
+      },
+      /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 10 10", fill: "none", className: "size-2.5" }, /* @__PURE__ */ e.createElement(
+        "path",
+        {
+          d: "M1 1L9 9M9 1L1 9",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round"
+        }
+      ))
+    )
   );
-}
-function Ge({
-  size: e = "md",
-  label: r = "Card number",
-  required: t,
-  hint: a,
-  error: i,
-  disabled: l,
-  placeholder: m = "Card number",
-  value: d,
-  onChange: o,
+};
+ae.displayName = "Tag";
+const Ae = {
+  brand: {
+    solidBg: "bg-primary-50",
+    solidBorder: "border-primary-300",
+    solidText: "text-primary-500",
+    outlineBorder: "border-primary-500",
+    outlineText: "text-primary-700"
+  },
+  gray: {
+    solidBg: "bg-light-50",
+    solidBorder: "border-light-200",
+    solidText: "text-light-700",
+    outlineBorder: "border-light-600",
+    outlineText: "text-light-700"
+  },
+  error: {
+    solidBg: "bg-error-50",
+    solidBorder: "border-error-200",
+    solidText: "text-error-700",
+    outlineBorder: "border-error-600",
+    outlineText: "text-error-700"
+  },
+  warning: {
+    solidBg: "bg-warning-50",
+    solidBorder: "border-warning-200",
+    solidText: "text-warning-700",
+    outlineBorder: "border-warning-600",
+    outlineText: "text-warning-700"
+  },
+  success: {
+    solidBg: "bg-success-50",
+    solidBorder: "border-success-200",
+    solidText: "text-success-700",
+    outlineBorder: "border-success-600",
+    outlineText: "text-success-700"
+  },
+  "blue-gray": {
+    solidBg: "bg-blue-gray-50",
+    solidBorder: "border-blue-gray-200",
+    solidText: "text-blue-gray-700",
+    outlineBorder: "border-blue-gray-600",
+    outlineText: "text-blue-gray-700"
+  },
+  "blue-light": {
+    solidBg: "bg-blue-light-50",
+    solidBorder: "border-blue-light-200",
+    solidText: "text-blue-light-700",
+    outlineBorder: "border-blue-light-600",
+    outlineText: "text-blue-light-700"
+  },
+  indigo: {
+    solidBg: "bg-indigo-50",
+    solidBorder: "border-indigo-200",
+    solidText: "text-indigo-700",
+    outlineBorder: "border-indigo-600",
+    outlineText: "text-indigo-700"
+  },
+  purple: {
+    solidBg: "bg-purple-50",
+    solidBorder: "border-purple-200",
+    solidText: "text-purple-700",
+    outlineBorder: "border-purple-600",
+    outlineText: "text-purple-700"
+  },
+  blue: {
+    solidBg: "bg-blue-50",
+    solidBorder: "border-blue-200",
+    solidText: "text-blue-700",
+    outlineBorder: "border-blue-600",
+    outlineText: "text-blue-700"
+  },
+  pink: {
+    solidBg: "bg-pink-50",
+    solidBorder: "border-pink-200",
+    solidText: "text-pink-700",
+    outlineBorder: "border-pink-600",
+    outlineText: "text-pink-700"
+  },
+  orange: {
+    solidBg: "bg-orange-50",
+    solidBorder: "border-orange-200",
+    solidText: "text-orange-700",
+    outlineBorder: "border-orange-600",
+    outlineText: "text-orange-700"
+  }
+}, Pe = b(
+  [
+    "inline-flex items-center gap-1 border font-medium",
+    "transition-colors duration-150"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "text-caption-sm py-0.5",
+        md: "text-caption-lg py-0.5",
+        lg: "text-caption-lg py-1"
+      },
+      shape: {
+        pill: "rounded-full",
+        badge: ""
+      },
+      modern: {
+        true: "rounded-md shadow-xs",
+        false: ""
+      },
+      hasLeading: {
+        true: "",
+        false: ""
+      },
+      hasTrailing: {
+        true: "",
+        false: ""
+      },
+      iconOnly: {
+        true: "p-[5px]",
+        false: ""
+      },
+      interactive: {
+        true: "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white",
+        false: ""
+      },
+      disabled: {
+        true: "cursor-not-allowed opacity-60",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      // shape=badge radius (only applies when not overridden by `modern`)
+      { shape: "badge", size: "sm", modern: !1, className: "rounded-md" },
+      { shape: "badge", size: "md", modern: !1, className: "rounded-md" },
+      { shape: "badge", size: "lg", modern: !1, className: "rounded-lg" },
+      // horizontal padding (skipped entirely when iconOnly)
+      {
+        size: "sm",
+        shape: "pill",
+        iconOnly: !1,
+        hasLeading: !1,
+        className: "pl-2"
+      },
+      {
+        size: "sm",
+        shape: "badge",
+        iconOnly: !1,
+        hasLeading: !1,
+        className: "pl-1.5"
+      },
+      { size: "sm", iconOnly: !1, hasLeading: !0, className: "pl-1" },
+      {
+        size: "sm",
+        iconOnly: !1,
+        hasTrailing: !1,
+        className: "pr-2"
+      },
+      { size: "sm", iconOnly: !1, hasTrailing: !0, className: "pr-1" },
+      {
+        size: "md",
+        iconOnly: !1,
+        hasLeading: !1,
+        className: "pl-2.5"
+      },
+      { size: "md", iconOnly: !1, hasLeading: !0, className: "pl-1" },
+      {
+        size: "md",
+        iconOnly: !1,
+        hasTrailing: !1,
+        className: "pr-2.5"
+      },
+      { size: "md", iconOnly: !1, hasTrailing: !0, className: "pr-1" },
+      {
+        size: "lg",
+        shape: "pill",
+        iconOnly: !1,
+        hasLeading: !1,
+        className: "pl-3"
+      },
+      {
+        size: "lg",
+        shape: "badge",
+        iconOnly: !1,
+        hasLeading: !1,
+        className: "pl-2.5"
+      },
+      { size: "lg", iconOnly: !1, hasLeading: !0, className: "pl-1.5" },
+      {
+        size: "lg",
+        shape: "pill",
+        iconOnly: !1,
+        hasTrailing: !1,
+        className: "pr-3"
+      },
+      {
+        size: "lg",
+        shape: "badge",
+        iconOnly: !1,
+        hasTrailing: !1,
+        className: "pr-2.5"
+      },
+      { size: "lg", iconOnly: !1, hasTrailing: !0, className: "pr-1.5" }
+    ],
+    defaultVariants: {
+      size: "sm",
+      shape: "pill",
+      modern: !1,
+      hasLeading: !1,
+      hasTrailing: !1,
+      iconOnly: !1,
+      interactive: !1,
+      disabled: !1
+    }
+  }
+), De = "size-4 shrink-0 rounded border bg-white", Ge = "shrink-0 rounded p-0.5 hover:bg-black/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400", He = ({
+  children: t,
+  size: s = "sm",
+  shape: r = "pill",
+  variant: l = "solid",
+  color: i = "brand",
+  customColor: a,
+  modern: c = !1,
+  icon: n,
+  trailingIcon: u,
+  checked: o,
+  onCheckedChange: m,
+  onClose: p,
+  iconOnly: f = !1,
+  disabled: h = !1,
+  className: E
+}) => {
+  const w = m !== void 0, k = o !== void 0 || !!n, y = !!p || !!u, x = Ae[i], N = !!(a && re(a)), C = N ? {
+    borderColor: a,
+    color: a,
+    backgroundColor: l === "outline" ? "transparent" : se(a, 0.1)
+  } : void 0, L = () => {
+    h || m?.(!o);
+  }, S = (z) => {
+    !w || h || (z.key === "Enter" || z.key === " ") && (z.preventDefault(), L());
+  };
+  return /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      role: w ? "checkbox" : void 0,
+      "aria-checked": w ? !!o : void 0,
+      "aria-disabled": h || void 0,
+      tabIndex: w && !h ? 0 : void 0,
+      onClick: w ? L : void 0,
+      onKeyDown: S,
+      style: C,
+      className: g(
+        Pe({
+          size: s,
+          shape: r,
+          modern: c,
+          hasLeading: k,
+          hasTrailing: y,
+          iconOnly: f,
+          interactive: w,
+          disabled: h
+        }),
+        !N && (l === "outline" ? g("bg-transparent", x.outlineBorder, x.outlineText) : g(x.solidBg, x.solidBorder, x.solidText)),
+        E
+      )
+    },
+    o !== void 0 && /* @__PURE__ */ e.createElement(
+      "span",
+      {
+        className: g(
+          De,
+          o ? "bg-primary-500 border-primary-500" : !N && x.solidBorder
+        ),
+        style: !o && N ? { borderColor: a } : void 0
+      },
+      o && /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 14 10", fill: "none", className: "size-full text-white" }, /* @__PURE__ */ e.createElement(
+        "path",
+        {
+          d: "M1 5L5 9L13 1",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ))
+    ),
+    n,
+    !f && /* @__PURE__ */ e.createElement("span", { className: "whitespace-nowrap" }, t),
+    u,
+    p && /* @__PURE__ */ e.createElement(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Remove",
+        disabled: h,
+        onClick: (z) => {
+          z.stopPropagation(), p();
+        },
+        className: Ge
+      },
+      /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 10 10", fill: "none", className: "size-2.5" }, /* @__PURE__ */ e.createElement(
+        "path",
+        {
+          d: "M1 1L9 9M9 1L1 9",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round"
+        }
+      ))
+    )
+  );
+};
+He.displayName = "Badge";
+const Fe = {
+  brand: {
+    bg50: "bg-primary-50",
+    hoverBg100: "hover:bg-primary-100",
+    border200: "border-primary-200",
+    border500: "border-primary-500",
+    text500: "text-primary-500"
+  },
+  gray: {
+    bg50: "bg-light-50",
+    hoverBg100: "hover:bg-light-100",
+    border200: "border-light-200",
+    border500: "border-light-500",
+    text500: "text-light-500"
+  },
+  error: {
+    bg50: "bg-error-50",
+    hoverBg100: "hover:bg-error-100",
+    border200: "border-error-200",
+    border500: "border-error-500",
+    text500: "text-error-500"
+  },
+  warning: {
+    bg50: "bg-warning-50",
+    hoverBg100: "hover:bg-warning-100",
+    border200: "border-warning-200",
+    border500: "border-warning-500",
+    text500: "text-warning-500"
+  },
+  success: {
+    bg50: "bg-success-50",
+    hoverBg100: "hover:bg-success-100",
+    border200: "border-success-200",
+    border500: "border-success-500",
+    text500: "text-success-500"
+  }
+}, Ke = {
+  md: {
+    outerPad: { leading: "pl-1 pr-2.5 py-1", trailing: "pl-3 pr-1 py-1" },
+    gap: "gap-2",
+    chipPad: "px-2 py-0.5",
+    text: "text-caption-lg"
+  },
+  lg: {
+    outerPad: { leading: "pl-1.5 pr-3 py-1.5", trailing: "pl-3 pr-1.5 py-1.5" },
+    gap: "gap-2",
+    chipPad: "px-2.5 py-[3px]",
+    text: "text-body-sm"
+  }
+}, Ze = ({
+  badgeLabel: t,
+  children: s,
+  size: r = "md",
+  theme: l = "light",
+  color: i = "brand",
+  badgePosition: a = "leading",
+  icon: c,
+  onClick: n,
+  className: u
+}) => {
+  const o = Fe[i], m = Ke[r], p = l === "modern", f = l === "outline", h = g(
+    "inline-flex items-center border transition-colors duration-150",
+    m.gap,
+    m.outerPad[a],
+    p ? "rounded-lg bg-light-50 border-light-200 shadow-xs" : f ? g("rounded-full bg-white border-[1.5px]", o.border500) : g("rounded-full", o.bg50, o.border200, o.hoverBg100),
+    n && "cursor-pointer",
+    u
+  ), E = g(
+    "inline-flex shrink-0 items-center gap-1 border font-medium whitespace-nowrap",
+    m.chipPad,
+    m.text,
+    p ? "rounded-md bg-white border-light-200 text-light-800" : f ? g("rounded-full bg-white border-[1.5px]", o.border500, o.text500) : g("rounded-full bg-white", o.border200, o.text500)
+  ), w = g(
+    "inline-flex items-center gap-1 font-medium",
+    m.text,
+    p ? "text-light-800" : o.text500
+  ), k = /* @__PURE__ */ e.createElement("span", { className: E }, p && /* @__PURE__ */ e.createElement("span", { className: "size-2 shrink-0 rounded-full bg-light-400" }), t);
+  return /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      role: n ? "button" : void 0,
+      tabIndex: n ? 0 : void 0,
+      onClick: n,
+      className: h
+    },
+    a === "leading" && k,
+    /* @__PURE__ */ e.createElement("span", { className: w }, s, c),
+    a === "trailing" && k
+  );
+};
+Ze.displayName = "BadgeGroup";
+const Ue = ({ size: t }) => {
+  const s = t * 0.09, r = (t - s) / 2, l = 2 * Math.PI * r;
+  return /* @__PURE__ */ e.createElement(
+    "svg",
+    {
+      width: t,
+      height: t,
+      viewBox: `0 0 ${t} ${t}`,
+      fill: "none",
+      className: "animate-spin"
+    },
+    /* @__PURE__ */ e.createElement(
+      "circle",
+      {
+        cx: t / 2,
+        cy: t / 2,
+        r,
+        strokeWidth: s,
+        className: "stroke-light-100"
+      }
+    ),
+    /* @__PURE__ */ e.createElement(
+      "circle",
+      {
+        cx: t / 2,
+        cy: t / 2,
+        r,
+        strokeWidth: s,
+        strokeLinecap: "round",
+        strokeDasharray: `${l * 0.25} ${l}`,
+        className: "stroke-primary-600"
+      }
+    )
+  );
+}, qe = ({ size: t }) => {
+  const s = e.useId(), r = t * 0.125, l = (t - r) / 2, i = 2 * Math.PI * l;
+  return /* @__PURE__ */ e.createElement(
+    "svg",
+    {
+      width: t,
+      height: t,
+      viewBox: `0 0 ${t} ${t}`,
+      fill: "none",
+      className: "animate-spin text-primary-600"
+    },
+    /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("linearGradient", { id: s, x1: "100%", y1: "0%", x2: "0%", y2: "100%" }, /* @__PURE__ */ e.createElement("stop", { offset: "0%", stopColor: "currentColor", stopOpacity: "1" }), /* @__PURE__ */ e.createElement("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0" }))),
+    /* @__PURE__ */ e.createElement(
+      "circle",
+      {
+        cx: t / 2,
+        cy: t / 2,
+        r: l,
+        strokeWidth: r,
+        className: "stroke-light-100"
+      }
+    ),
+    /* @__PURE__ */ e.createElement(
+      "circle",
+      {
+        cx: t / 2,
+        cy: t / 2,
+        r: l,
+        strokeWidth: r,
+        strokeLinecap: "round",
+        stroke: `url(#${s})`,
+        strokeDasharray: `${i * 0.75} ${i}`
+      }
+    )
+  );
+}, Qe = ({ size: t }) => {
+  const r = Math.max(t * 0.1, 3), l = (t - r) / 2;
+  return /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: "relative animate-spin",
+      style: { width: t, height: t }
+    },
+    Array.from({ length: 12 }).map((i, a) => {
+      const c = 30 * a, n = 0.15 + 0.85 * a / 11;
+      return /* @__PURE__ */ e.createElement(
+        "span",
+        {
+          key: a,
+          className: "absolute rounded-full bg-primary-600 top-1/2 left-1/2",
+          style: {
+            width: r,
+            height: r,
+            opacity: n,
+            marginTop: -r / 2,
+            marginLeft: -r / 2,
+            transform: `rotate(${c}deg) translate(${l}px) rotate(${-c}deg)`
+          }
+        }
+      );
+    })
+  );
+}, Xe = {
+  sm: { box: 32, gapClass: "gap-4", textClass: "text-caption-lg" },
+  md: { box: 48, gapClass: "gap-4", textClass: "text-caption-lg" },
+  lg: { box: 56, gapClass: "gap-4", textClass: "text-body-lg" },
+  xl: { box: 64, gapClass: "gap-5", textClass: "text-body-lg" }
+}, Je = ({
+  size: t = "sm",
+  style: s = "line-simple",
+  supportingText: r = !0,
+  label: l = "Loading...",
+  className: i
+}) => {
+  const { box: a, gapClass: c, textClass: n } = Xe[t];
+  return /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      role: "status",
+      "aria-label": typeof l == "string" ? l : "Loading",
+      className: g("inline-flex flex-col items-center", c, i)
+    },
+    s === "line-simple" && /* @__PURE__ */ e.createElement(Ue, { size: a }),
+    s === "line-spinner" && /* @__PURE__ */ e.createElement(qe, { size: a }),
+    s === "dot-circle" && /* @__PURE__ */ e.createElement(Qe, { size: a }),
+    r && /* @__PURE__ */ e.createElement(
+      "p",
+      {
+        className: g(
+          "font-medium text-light-700 whitespace-nowrap",
+          n
+        )
+      },
+      l
+    )
+  );
+};
+Je.displayName = "Loading";
+const le = ({
+  className: t,
+  style: s
+}) => /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 24 24", fill: "none", className: t, style: s }, /* @__PURE__ */ e.createElement(
+  "path",
+  {
+    d: "M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Z",
+    stroke: "currentColor",
+    strokeWidth: "1.75"
+  }
+), /* @__PURE__ */ e.createElement(
+  "path",
+  {
+    d: "M3.75 20.25a8.25 8.25 0 0 1 16.5 0",
+    stroke: "currentColor",
+    strokeWidth: "1.75",
+    strokeLinecap: "round"
+  }
+)), ie = ({ className: t }) => /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 20 20", fill: "none", className: t }, /* @__PURE__ */ e.createElement("circle", { cx: "10", cy: "10", r: "9", className: "fill-primary-500 stroke-white", strokeWidth: "1.5" }), /* @__PURE__ */ e.createElement(
+  "path",
+  {
+    d: "M6 10.2 8.6 12.8 14 7",
+    stroke: "white",
+    strokeWidth: "1.75",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+)), Ye = {
+  xs: { box: 24, borderWidth: "0.5px", statusSize: 6, badgeSize: 10, textClass: "text-caption-sm" },
+  sm: { box: 32, borderWidth: "0.5px", statusSize: 8, badgeSize: 12, textClass: "text-caption-lg" },
+  md: { box: 40, borderWidth: "0.75px", statusSize: 10, badgeSize: 14, textClass: "text-body-sm" },
+  lg: { box: 48, borderWidth: "0.75px", statusSize: 12, badgeSize: 16, textClass: "text-body-lg" },
+  xl: { box: 56, borderWidth: "0.75px", statusSize: 14, badgeSize: 18, textClass: "text-h6" },
+  "2xl": { box: 64, borderWidth: "0.75px", statusSize: 16, badgeSize: 20, textClass: "text-h5 leading-7" }
+}, et = "#17B26A", _ = ({
+  src: t,
+  alt: s,
+  initials: r,
+  size: l = "md",
+  status: i = "none",
+  statusIcon: a,
+  contrastBorder: c = !0,
+  className: n
+}) => {
+  const { box: u, borderWidth: o, statusSize: m, badgeSize: p, textClass: f } = Ye[l], h = t ? "image" : r !== void 0 ? "initials" : "placeholder";
+  return /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: g("relative inline-block shrink-0 rounded-full", n),
+      style: { width: u, height: u }
+    },
+    h === "image" && /* @__PURE__ */ e.createElement(
+      "img",
+      {
+        src: t,
+        alt: s ?? "",
+        className: "absolute inset-0 size-full rounded-full object-cover"
+      }
+    ),
+    h === "placeholder" && /* @__PURE__ */ e.createElement("div", { className: "absolute inset-0 flex items-center justify-center rounded-full bg-light-50" }, /* @__PURE__ */ e.createElement(
+      le,
+      {
+        className: "text-light-300",
+        style: { width: u * 0.55, height: u * 0.55 }
+      }
+    )),
+    h === "initials" && /* @__PURE__ */ e.createElement(
+      "div",
+      {
+        className: g(
+          "absolute inset-0 flex items-center justify-center rounded-full bg-light-50 font-semibold text-light-500",
+          f
+        )
+      },
+      r
+    ),
+    c && /* @__PURE__ */ e.createElement(
+      "div",
+      {
+        className: "pointer-events-none absolute inset-0 rounded-full border-black/[0.08]",
+        style: { borderWidth: o, borderStyle: "solid" }
+      }
+    ),
+    i === "online" && /* @__PURE__ */ e.createElement(
+      "span",
+      {
+        className: "absolute bottom-0 right-0 rounded-full border-[1.5px] border-white",
+        style: {
+          width: m,
+          height: m,
+          backgroundColor: et
+        }
+      }
+    ),
+    i === "company" && /* @__PURE__ */ e.createElement(
+      "div",
+      {
+        className: "absolute bottom-0 right-0 flex items-center justify-center overflow-hidden rounded-full border-[1.5px] border-white bg-white",
+        style: { width: p, height: p }
+      },
+      a
+    ),
+    i === "verified" && /* @__PURE__ */ e.createElement(
+      "div",
+      {
+        className: "absolute bottom-0 right-0",
+        style: { width: p, height: p }
+      },
+      /* @__PURE__ */ e.createElement(ie, { className: "size-full" })
+    )
+  );
+};
+_.displayName = "Avatar";
+const tt = {
+  xs: { box: 24, overlap: -4, contrastBorderWidth: "0.5px", plusIconSize: 16, textClass: "text-caption-sm" },
+  sm: { box: 32, overlap: -8, contrastBorderWidth: "0.5px", plusIconSize: 16, textClass: "text-caption-lg" },
+  md: { box: 40, overlap: -12, contrastBorderWidth: "0.75px", plusIconSize: 20, textClass: "text-body-sm" }
+}, rt = ({
+  avatars: t,
+  max: s,
+  size: r = "xs",
+  onAdd: l,
+  className: i
+}) => {
+  const { box: a, overlap: c, contrastBorderWidth: n, textClass: u } = tt[r], o = s ? t.slice(0, s) : t, m = s && t.length > s ? t.length - s : 0;
+  return /* @__PURE__ */ e.createElement("div", { className: g("inline-flex items-start gap-2", i) }, /* @__PURE__ */ e.createElement("div", { className: "flex items-start" }, o.map((p, f) => /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      key: f,
+      className: "relative shrink-0 overflow-hidden rounded-full border-[1.5px] border-white",
+      style: { width: a, height: a, marginRight: c }
+    },
+    p.src ? /* @__PURE__ */ e.createElement(
+      "img",
+      {
+        src: p.src,
+        alt: p.alt ?? "",
+        className: "size-full object-cover"
+      }
+    ) : /* @__PURE__ */ e.createElement("div", { className: "flex size-full items-center justify-center bg-light-50 font-semibold text-light-500" }, p.initials),
+    /* @__PURE__ */ e.createElement(
+      "div",
+      {
+        className: "pointer-events-none absolute inset-0 rounded-full border-black/[0.08]",
+        style: { borderWidth: n, borderStyle: "solid" }
+      }
+    )
+  )), m > 0 && /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: "relative flex shrink-0 items-center justify-center rounded-full border-2 border-white bg-light-100",
+      style: { width: a, height: a }
+    },
+    /* @__PURE__ */ e.createElement("span", { className: g("font-semibold text-light-600", u) }, "+", m)
+  )), l && /* @__PURE__ */ e.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: l,
+      "aria-label": "Add",
+      className: "flex shrink-0 items-center justify-center rounded-full border border-dashed border-light-300 bg-white text-light-500 hover:bg-light-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400 focus-visible:ring-offset-2",
+      style: { width: a, height: a }
+    },
+    /* @__PURE__ */ e.createElement(
+      "svg",
+      {
+        width: a * 0.4,
+        height: a * 0.4,
+        viewBox: "0 0 20 20",
+        fill: "none"
+      },
+      /* @__PURE__ */ e.createElement(
+        "path",
+        {
+          d: "M10 4v12M4 10h12",
+          stroke: "currentColor",
+          strokeWidth: "1.75",
+          strokeLinecap: "round"
+        }
+      )
+    )
+  ));
+};
+rt.displayName = "AvatarGroup";
+const st = {
+  xs: { nameClass: "text-caption-sm", subtitleClass: "text-caption-sm" },
+  sm: { nameClass: "text-caption-lg", subtitleClass: "text-caption-sm" },
+  md: { nameClass: "text-caption-lg", subtitleClass: "text-caption-lg" },
+  lg: { nameClass: "text-body-sm", subtitleClass: "text-body-sm" },
+  xl: { nameClass: "text-body-lg", subtitleClass: "text-body-sm" }
+}, at = ({
+  name: t,
+  subtitle: s,
+  src: r,
+  initials: l,
+  size: i = "xs",
+  status: a = "none",
+  statusIcon: c,
+  className: n
+}) => {
+  const { nameClass: u, subtitleClass: o } = st[i];
+  return /* @__PURE__ */ e.createElement("div", { className: g("inline-flex items-center gap-2", n) }, /* @__PURE__ */ e.createElement(
+    _,
+    {
+      src: r,
+      initials: l,
+      size: i,
+      status: a,
+      statusIcon: c
+    }
+  ), /* @__PURE__ */ e.createElement("div", { className: "flex flex-col items-start whitespace-nowrap" }, /* @__PURE__ */ e.createElement("span", { className: g("font-bold text-light-800", u) }, t), s && /* @__PURE__ */ e.createElement("span", { className: g("font-normal text-light-700", o) }, s)));
+};
+at.displayName = "AvatarLabelGroup";
+const lt = {
+  sm: {
+    box: 72,
+    ringWidth: 3,
+    shadowClass: "shadow-md",
+    iconSize: 36,
+    textClass: "text-h4",
+    verifiedSize: 20,
+    verifiedOffset: 0
+  },
+  md: {
+    box: 96,
+    ringWidth: 4,
+    shadowClass: "shadow-lg",
+    iconSize: 48,
+    textClass: "text-h3",
+    verifiedSize: 24,
+    verifiedOffset: 0
+  },
+  lg: {
+    box: 160,
+    ringWidth: 4,
+    shadowClass: "shadow-lg",
+    iconSize: 80,
+    textClass: "text-h1",
+    verifiedSize: 32,
+    verifiedOffset: 4
+  }
+}, it = ({
+  src: t,
+  alt: s,
+  initials: r,
+  size: l = "sm",
+  verified: i = !0,
+  contrastBorder: a = !0,
+  className: c
+}) => {
+  const {
+    box: n,
+    ringWidth: u,
+    shadowClass: o,
+    iconSize: m,
+    textClass: p,
+    verifiedSize: f,
+    verifiedOffset: h
+  } = lt[l], E = t ? "image" : r !== void 0 ? "initials" : "placeholder";
+  return /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: g("relative rounded-full", c),
+      style: { width: n, height: n }
+    },
+    /* @__PURE__ */ e.createElement(
+      "div",
+      {
+        className: g(
+          "absolute inset-0 overflow-hidden rounded-full border-white",
+          o,
+          E !== "image" && "bg-light-100"
+        ),
+        style: { borderWidth: u, borderStyle: "solid" }
+      },
+      E === "image" && /* @__PURE__ */ e.createElement(
+        "img",
+        {
+          src: t,
+          alt: s ?? "",
+          className: "absolute inset-0 size-full rounded-full object-cover"
+        }
+      ),
+      a && /* @__PURE__ */ e.createElement("div", { className: "pointer-events-none absolute inset-0 rounded-full border border-black/[0.08]" }),
+      E === "placeholder" && /* @__PURE__ */ e.createElement("div", { className: "absolute inset-0 flex items-center justify-center" }, /* @__PURE__ */ e.createElement(
+        le,
+        {
+          className: "text-light-300",
+          style: { width: m, height: m }
+        }
+      )),
+      E === "initials" && /* @__PURE__ */ e.createElement(
+        "div",
+        {
+          className: g(
+            "absolute inset-0 flex items-center justify-center font-semibold text-light-500",
+            p
+          )
+        },
+        r
+      )
+    ),
+    i && /* @__PURE__ */ e.createElement(
+      "div",
+      {
+        className: "absolute",
+        style: {
+          width: f,
+          height: f,
+          bottom: h,
+          right: h
+        }
+      },
+      /* @__PURE__ */ e.createElement(ie, { className: "size-full" })
+    )
+  );
+};
+it.displayName = "AvatarProfilePhoto";
+const nt = {
+  "button-gray": { sm: "h-9 px-3 py-2 text-sm gap-2", md: "h-11 px-3 py-2 text-base gap-2" },
+  "button-white": { sm: "h-9 px-3 py-2 text-sm gap-2", md: "h-11 px-3 py-2 text-base gap-2" },
+  "button-primary": { sm: "h-9 px-3 py-2 text-sm gap-2", md: "h-11 px-3 py-2 text-base gap-2" },
+  underline: { sm: "h-8 px-1 pb-3 text-sm gap-2", md: "h-9 px-1 pb-3 text-base gap-2" },
+  "underline-filled": { sm: "h-11 p-3 text-sm gap-2", md: "h-12 p-3 text-base gap-2" },
+  line: { sm: "h-9 px-3 py-2 text-sm gap-2", md: "h-11 px-3.5 py-2.5 text-base gap-2" }
+}, ot = {
+  "button-gray": "rounded-md",
+  "button-white": "rounded-md",
+  "button-primary": "rounded-md",
+  underline: "rounded-none",
+  "underline-filled": "rounded-none",
+  line: "rounded-none"
+}, ct = {
+  "button-gray": {
+    active: "bg-light-50 text-light-700",
+    inactive: "bg-transparent text-light-500",
+    hoverInactive: "hover:bg-light-50 hover:text-light-700",
+    hasFocusRing: !0
+  },
+  "button-white": {
+    active: "bg-white text-light-700 shadow-sm",
+    inactive: "bg-transparent text-light-500",
+    hoverInactive: "hover:bg-white hover:text-light-700 hover:shadow-sm",
+    hasFocusRing: !0
+  },
+  "button-primary": {
+    active: "bg-primary-50 text-primary-700",
+    inactive: "bg-transparent text-light-500",
+    hoverInactive: "hover:bg-primary-50 hover:text-primary-700",
+    hasFocusRing: !0
+  },
+  underline: {
+    active: "border-b-2 border-primary-500 text-primary-700",
+    inactive: "border-b-2 border-transparent text-light-500",
+    hoverInactive: "hover:border-primary-500 hover:text-primary-700",
+    hasFocusRing: !1
+  },
+  "underline-filled": {
+    active: "bg-primary-50 border-b-2 border-primary-500 text-primary-700",
+    inactive: "bg-transparent border-b-2 border-transparent text-light-500",
+    hoverInactive: "hover:bg-primary-50 hover:border-primary-500 hover:text-primary-700",
+    hasFocusRing: !1
+  },
+  line: {
+    active: "bg-transparent border-l-2 border-primary-500 text-primary-700",
+    inactive: "bg-transparent border-l-2 border-transparent text-light-500",
+    hoverInactive: "hover:border-primary-500 hover:text-primary-700",
+    hasFocusRing: !0
+  }
+}, dt = "inline-flex items-center justify-center rounded-full border border-light-200 bg-light-50 px-2 py-0.5 text-caption-sm font-medium text-light-700", ut = {
+  "button-gray": { gapClass: "gap-1", hasHairline: !1 },
+  "button-white": { gapClass: "gap-1", hasHairline: !1 },
+  "button-primary": { gapClass: "gap-1", hasHairline: !1 },
+  underline: { gapClass: "gap-3", hasHairline: !0 },
+  "underline-filled": { gapClass: "gap-3", hasHairline: !0 },
+  line: { gapClass: "gap-1", hasHairline: !1 }
+}, mt = ({
+  children: t,
+  variant: s = "button-primary",
+  size: r = "sm",
+  active: l = !1,
+  fullWidth: i = !1,
+  count: a,
+  disabled: c = !1,
+  onClick: n,
+  className: u
+}) => {
+  const o = ct[s];
+  return /* @__PURE__ */ e.createElement(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      "aria-selected": l,
+      disabled: c,
+      onClick: n,
+      className: g(
+        "inline-flex items-center justify-center font-semibold transition-colors duration-150",
+        nt[s][r],
+        ot[s],
+        l ? o.active : o.inactive,
+        !l && !c && o.hoverInactive,
+        o.hasFocusRing && "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white",
+        i && "w-full",
+        c ? "cursor-not-allowed opacity-60" : "cursor-pointer",
+        u
+      )
+    },
+    /* @__PURE__ */ e.createElement("span", { className: "whitespace-nowrap" }, t),
+    a !== void 0 && /* @__PURE__ */ e.createElement("span", { className: dt }, a)
+  );
+};
+mt.displayName = "Tab";
+const pt = ({
+  children: t,
+  variant: s = "button-primary",
+  orientation: r = "horizontal",
+  boxed: l = !1,
+  className: i
+}) => {
+  const { gapClass: a, hasHairline: c } = ut[s];
+  return /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      role: "tablist",
+      "aria-orientation": r,
+      className: g(
+        "inline-flex",
+        r === "vertical" ? "flex-col items-stretch" : "flex-row items-center",
+        a,
+        l && "rounded-lg border border-light-200 bg-light-50 p-1",
+        c && r === "horizontal" && !l && "border-b border-light-200",
+        i
+      )
+    },
+    t
+  );
+};
+pt.displayName = "TabList";
+const gt = b("flex flex-col gap-1 w-full max-w-[320px]", {
+  variants: {
+    size: {
+      xs: "text-caption-sm",
+      sm: "text-caption-lg",
+      md: "text-sm"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), bt = b("flex items-center gap-1 font-bold text-sm", {
+  variants: {
+    error: {
+      true: "",
+      false: "text-light-800"
+    }
+  },
+  defaultVariants: {
+    error: !1
+  }
+}), ft = b(
+  [
+    "flex items-center w-full border",
+    "bg-white transition-[border-color,border-width]"
+  ],
+  {
+    variants: {
+      size: {
+        xs: "h-7 px-2 gap-1 rounded text-caption-sm",
+        sm: "h-9 px-3 gap-2 rounded-lg",
+        md: "h-11 px-3 gap-2 rounded-lg"
+      },
+      error: {
+        true: [
+          "border-error-200",
+          "focus-within:border-2 focus-within:border-error-500"
+        ],
+        false: [
+          "border-light-200",
+          "focus-within:border-2 focus-within:border-primary-500"
+        ]
+      },
+      disabled: {
+        true: "bg-light-100 text-light-400 cursor-not-allowed",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      error: !1,
+      disabled: !1
+    }
+  }
+), ht = b(
+  [
+    "flex-1 bg-transparent outline-none text-light-900",
+    "placeholder:text-light-500",
+    "disabled:text-light-400 disabled:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      size: {
+        xs: "text-caption-sm",
+        sm: "text-caption-lg",
+        md: "text-body-sm"
+      },
+      error: {
+        true: "",
+        false: "text-light-900"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      error: !1
+    }
+  }
+), xt = b("text-caption-lg", {
+  variants: {
+    error: {
+      true: "text-error-500",
+      false: "text-light-700"
+    }
+  }
+}), vt = b(
+  "flex items-stretch w-full bg-white border overflow-hidden transition-[border-color,border-width]",
+  {
+    variants: {
+      size: {
+        xs: "rounded",
+        sm: "rounded-lg",
+        md: "rounded-lg"
+      },
+      error: {
+        true: [
+          "border-error-200",
+          "focus-within:border-2 focus-within:border-error-500"
+        ],
+        false: [
+          "border-light-200",
+          "focus-within:border-2 focus-within:border-primary-500"
+        ]
+      },
+      disabled: {
+        true: "bg-light-100",
+        false: ""
+      }
+    },
+    defaultVariants: { size: "md", error: !1, disabled: !1 }
+  }
+), yt = b("flex flex-1 items-center min-w-0", {
+  variants: {
+    size: {
+      xs: "gap-1 px-2 py-1",
+      sm: "gap-2 px-3 py-2",
+      md: "gap-2 px-3 py-2"
+    },
+    disabled: {
+      true: "text-light-400 cursor-not-allowed",
+      false: ""
+    }
+  },
+  defaultVariants: { size: "md", disabled: !1 }
+}), wt = b("flex items-center text-light-700 whitespace-nowrap border-r border-light-200", {
+  variants: {
+    size: {
+      xs: "px-2 text-caption-sm",
+      sm: "px-3 text-caption-lg",
+      md: "px-3 text-body-sm"
+    }
+  },
+  defaultVariants: { size: "md" }
+}), K = b(
+  [
+    "flex items-center gap-1 shrink-0 bg-transparent p-0 text-light-800 cursor-pointer",
+    "hover:bg-transparent hover:text-light-900",
+    "disabled:cursor-not-allowed disabled:text-light-400"
+  ],
+  {
+    variants: {
+      size: {
+        xs: "text-caption-sm",
+        sm: "text-caption-lg",
+        md: "text-body-sm"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+), Et = b(
+  "flex shrink-0 items-center justify-center gap-1 w-[92px] border-l border-light-200 bg-white font-semibold text-light-800 hover:bg-light-50 disabled:cursor-not-allowed disabled:text-light-400",
+  {
+    variants: {
+      size: {
+        xs: "text-caption-sm",
+        sm: "text-caption-lg",
+        md: "text-body-sm"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+), Z = ({ className: t }) => /* @__PURE__ */ d.createElement("svg", { viewBox: "0 0 20 20", fill: "none", className: t }, /* @__PURE__ */ d.createElement(
+  "path",
+  {
+    d: "M5 7.5L10 12.5L15 7.5",
+    stroke: "currentColor",
+    strokeWidth: "1.67",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+)), Nt = {
+  xs: "h-7",
+  // 18px (caption-sm) + 8 + 2 = 28px
+  sm: "h-[30px]",
+  // 20px (caption-lg) + 8 + 2 = 30px
+  md: "h-[34px]"
+  // 24px (body-sm) + 8 + 2 = 34px
+}, kt = ({ size: t, error: s, disabled: r }) => g(
+  "flex items-center w-full gap-2 rounded-lg border bg-white px-2 transition-[border-color,border-width]",
+  Nt[t],
+  s ? "border-error-200 focus-within:border-2 focus-within:border-error-500" : "border-light-200 focus-within:border-2 focus-within:border-primary-500",
+  r && "bg-light-100 text-light-400 cursor-not-allowed"
+), St = ({ error: t }) => g("flex items-center gap-1 text-caption-sm font-semibold", t ? "" : "text-light-800"), Ct = "flex flex-col w-full max-w-[320px]";
+function j({
+  label: t,
+  required: s,
+  hint: r,
+  rightIcon: l,
+  size: i = "md",
+  error: a = !1,
+  disabled: c = !1,
+  compact: n = !1,
+  hideCalendarIcon: u = !1,
+  type: o,
+  prefix: m,
+  suffix: p,
+  leadingAddon: f,
+  leadingDropdown: h,
+  trailingDropdown: E,
+  trailingButton: w,
+  maxLength: k,
+  value: y,
+  className: x,
+  wrapperClassName: N,
+  ...C
+}) {
+  const L = !!(f || w), S = /* @__PURE__ */ d.createElement(d.Fragment, null, h && /* @__PURE__ */ d.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: h.onClick,
+      disabled: h.disabled || c,
+      className: K({ size: i })
+    },
+    /* @__PURE__ */ d.createElement("span", null, h.value),
+    /* @__PURE__ */ d.createElement(Z, { className: "size-5 text-light-500" })
+  ), m && /* @__PURE__ */ d.createElement("div", { className: "flex items-center" }, m), /* @__PURE__ */ d.createElement(
+    "input",
+    {
+      ...C,
+      type: o,
+      disabled: c,
+      maxLength: k,
+      value: y,
+      className: g(
+        ht({ size: i, error: a }),
+        "h-full",
+        u && "[&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-clear-button]:hidden",
+        o === "date" && "[&::-webkit-datetime-edit]:p-0 [&::-webkit-datetime-edit-fields-wrapper]:p-0",
+        x
+      )
+    }
+  ), (l || p) && /* @__PURE__ */ d.createElement("div", { className: "flex h-full items-center gap-2" }, l && /* @__PURE__ */ d.createElement("div", { className: "flex h-full items-center pb-0.5 text-light-400 hover:text-light-600" }, l), p && /* @__PURE__ */ d.createElement("div", { className: "flex h-full items-center gap-1 leading-none text-light-700" }, p)), E && /* @__PURE__ */ d.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: E.onClick,
+      disabled: E.disabled || c,
+      className: K({ size: i })
+    },
+    /* @__PURE__ */ d.createElement("span", null, E.value),
+    /* @__PURE__ */ d.createElement(Z, { className: "size-5 text-light-500" })
+  ));
+  return /* @__PURE__ */ d.createElement("div", { className: g(n ? Ct : gt({ size: i }), N) }, t && /* @__PURE__ */ d.createElement("label", { className: n ? St({ error: a }) : bt({ error: a }) }, t, s && /* @__PURE__ */ d.createElement("span", { className: "text-error-400" }, "*")), L ? /* @__PURE__ */ d.createElement("div", { className: vt({ size: i, error: a, disabled: c }) }, f && /* @__PURE__ */ d.createElement("div", { className: wt({ size: i }) }, f), /* @__PURE__ */ d.createElement("div", { className: yt({ size: i, disabled: c }) }, S), w && /* @__PURE__ */ d.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: w.onClick,
+      disabled: w.disabled || c,
+      className: Et({ size: i })
+    },
+    w.icon,
+    /* @__PURE__ */ d.createElement("span", null, w.label)
+  )) : /* @__PURE__ */ d.createElement("div", { className: n ? kt({ size: i, error: a, disabled: c }) : ft({ size: i, error: a, disabled: c }) }, S), k && typeof y == "string" && /* @__PURE__ */ d.createElement("div", { className: "text-right text-xs text-light-400" }, y.length, "/", k), r && /* @__PURE__ */ d.createElement("p", { className: xt({ error: a }) }, r));
+}
+function zt({ children: t }) {
+  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center text-light-500" }, t);
+}
+function Lt({ children: t }) {
+  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center text-light-500" }, t);
+}
+var Bt = {
+  outline: {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  },
+  filled: {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    stroke: "none"
+  }
+};
+const Tt = (t, s, r, l) => {
+  const i = pe(
+    ({ color: a = "currentColor", size: c = 24, stroke: n = 2, title: u, className: o, children: m, ...p }, f) => M(
+      "svg",
+      {
+        ref: f,
+        ...Bt[t],
+        width: c,
+        height: c,
+        className: ["tabler-icon", `tabler-icon-${s}`, o].join(" "),
+        strokeWidth: n,
+        stroke: a,
+        ...p
+      },
+      [
+        u && M("title", { key: "svg-title" }, u),
+        ...l.map(([h, E]) => M(h, E)),
+        ...Array.isArray(m) ? m : [m]
+      ]
+    )
+  );
+  return i.displayName = `${r}`, i;
+};
+const Vt = [["path", { d: "M6 9l6 6l6 -6", key: "svg-0" }]], ne = Tt("outline", "chevron-down", "ChevronDown", Vt);
+function Wr({
+  size: t = "md",
+  label: s,
+  required: r,
+  hint: l,
+  error: i,
+  disabled: a,
+  placeholder: c = "+1 (555) 000-0000",
   rightIcon: n,
-  prefix: c,
-  className: f,
-  wrapperClassName: g
+  value: u,
+  onChange: o,
+  className: m,
+  wrapperClassName: p
 }) {
-  return /* @__PURE__ */ s.createElement(
-    S,
+  return /* @__PURE__ */ d.createElement(
+    j,
     {
-      size: e,
-      label: r,
-      required: t,
-      hint: a,
+      size: t,
+      label: s,
+      required: r,
+      hint: l,
       error: i,
-      disabled: l,
-      placeholder: m,
-      value: d,
-      onChange: o,
+      disabled: a,
+      placeholder: c,
       rightIcon: n,
+      value: u,
+      onChange: o,
+      className: m,
+      wrapperClassName: p,
+      prefix: /* @__PURE__ */ d.createElement("div", { className: "flex items-center gap-1 pr-2 text-sm text-light-700" }, /* @__PURE__ */ d.createElement("span", null, "US"), /* @__PURE__ */ d.createElement(ne, { size: 14 }))
+    }
+  );
+}
+function Rr({
+  size: t = "md",
+  label: s,
+  required: r,
+  hint: l,
+  error: i,
+  disabled: a,
+  value: c,
+  placeholder: n = "1,000.00",
+  currency: u = "USD",
+  onCurrencyChange: o,
+  rightIcon: m,
+  onChange: p,
+  className: f,
+  wrapperClassName: h
+}) {
+  return /* @__PURE__ */ d.createElement(
+    j,
+    {
+      size: t,
+      label: s,
+      required: r,
+      hint: l,
+      error: i,
+      disabled: a,
+      value: c,
+      placeholder: n,
+      rightIcon: m,
+      onChange: p,
       className: f,
-      wrapperClassName: g,
-      prefix: c ?? /* @__PURE__ */ s.createElement(
+      wrapperClassName: h,
+      prefix: /* @__PURE__ */ d.createElement("span", { className: "select-none text-sm text-light-700" }, "$"),
+      suffix: /* @__PURE__ */ d.createElement(
+        "button",
+        {
+          type: "button",
+          disabled: a,
+          onClick: o,
+          className: "flex items-center gap-1 text-sm text-light-700 hover:text-light-900 disabled:cursor-not-allowed"
+        },
+        u,
+        /* @__PURE__ */ d.createElement(ne, { size: 14 })
+      )
+    }
+  );
+}
+function Mr({
+  size: t = "md",
+  label: s,
+  required: r,
+  hint: l,
+  disabled: i,
+  error: a,
+  className: c,
+  wrapperClassName: n,
+  value: u,
+  maxLength: o,
+  placeholder: m,
+  onChange: p
+}) {
+  const f = u.length > o, h = a || f;
+  return /* @__PURE__ */ d.createElement(
+    j,
+    {
+      size: t,
+      label: s,
+      required: r,
+      disabled: i,
+      error: h,
+      value: u,
+      placeholder: m,
+      onChange: p,
+      className: c,
+      wrapperClassName: n,
+      hint: l,
+      suffix: /* @__PURE__ */ d.createElement(
+        "span",
+        {
+          className: g(
+            "text-caption-lg",
+            f ? "text-error-600" : "text-light-400"
+          )
+        },
+        u.length,
+        "/",
+        o
+      )
+    }
+  );
+}
+function Ar({
+  size: t = "md",
+  label: s = "Card number",
+  required: r,
+  hint: l,
+  error: i,
+  disabled: a,
+  placeholder: c = "Card number",
+  value: n,
+  onChange: u,
+  rightIcon: o,
+  prefix: m,
+  className: p,
+  wrapperClassName: f
+}) {
+  return /* @__PURE__ */ d.createElement(
+    j,
+    {
+      size: t,
+      label: s,
+      required: r,
+      hint: l,
+      error: i,
+      disabled: a,
+      placeholder: c,
+      value: n,
+      onChange: u,
+      rightIcon: o,
+      className: p,
+      wrapperClassName: f,
+      prefix: m ?? /* @__PURE__ */ d.createElement(
         "img",
         {
           src: "/stories/assets/mastercard.png",
@@ -968,19 +2379,121 @@ function Ge({
       inputMode: "numeric",
       autoComplete: "cc-number"
     }
-  );
-}
-const T = S;
-T.Prefix = ne;
-T.Suffix = oe;
-const me = u("flex w-[320px] flex-col gap-1"), fe = u("flex items-center gap-1 text-sm font-bold", {
+  );
+}
+const oe = j;
+oe.Prefix = zt;
+oe.Suffix = Lt;
+const jt = "flex flex-col gap-1 w-full max-w-[320px]", It = b("flex items-center gap-1 font-bold text-sm", {
+  variants: {
+    error: {
+      true: "",
+      false: "text-light-800"
+    }
+  },
+  defaultVariants: {
+    error: !1
+  }
+}), Ot = b(
+  [
+    "flex w-full gap-2 border rounded-lg p-3 bg-white",
+    "transition-[border-color,border-width]"
+  ],
+  {
+    variants: {
+      error: {
+        true: [
+          "border-error-200",
+          "focus-within:border-2 focus-within:border-error-500"
+        ],
+        false: [
+          "border-light-200",
+          "focus-within:border-2 focus-within:border-primary-500"
+        ]
+      },
+      disabled: {
+        true: "bg-light-100 cursor-not-allowed",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      error: !1,
+      disabled: !1
+    }
+  }
+), _t = b(
+  [
+    "flex-1 min-h-[132px] bg-transparent outline-none text-caption-lg text-light-900",
+    "placeholder:text-light-500",
+    "disabled:text-light-400 disabled:cursor-not-allowed disabled:resize-none"
+  ],
+  {
+    variants: {
+      resizable: {
+        true: "resize-y",
+        false: "resize-none"
+      }
+    },
+    defaultVariants: {
+      resizable: !0
+    }
+  }
+), $t = b("text-caption-lg", {
+  variants: {
+    error: {
+      true: "text-error-500",
+      false: "text-light-700"
+    }
+  },
+  defaultVariants: {
+    error: !1
+  }
+}), Wt = ({ error: t, disabled: s }) => g(
+  "flex w-full gap-2 rounded-lg border bg-white p-2 transition-[border-color,border-width]",
+  t ? "border-error-200 focus-within:border-2 focus-within:border-error-500" : "border-light-200 focus-within:border-2 focus-within:border-primary-500",
+  s && "bg-light-100 cursor-not-allowed"
+), Rt = ({ error: t }) => g("flex items-center gap-1 text-caption-sm font-semibold", t ? "" : "text-light-800"), Mt = (t) => g("flex-1 min-h-[64px] bg-transparent outline-none text-sm text-light-900", "placeholder:text-light-500", t ? "resize-y" : "resize-none"), At = "flex flex-col w-full max-w-[320px]", Pt = e.forwardRef(
+  ({
+    label: t,
+    required: s,
+    hint: r,
+    helpIcon: l,
+    error: i = !1,
+    disabled: a = !1,
+    resizable: c = !0,
+    compact: n = !1,
+    rows: u,
+    style: o,
+    className: m,
+    wrapperClassName: p,
+    ...f
+  }, h) => {
+    const E = u ? { minHeight: `${u * 20}px` } : void 0;
+    return /* @__PURE__ */ e.createElement("div", { className: g(n ? At : jt, p) }, t && /* @__PURE__ */ e.createElement("label", { className: n ? Rt({ error: i }) : It({ error: i }) }, t, s && /* @__PURE__ */ e.createElement("span", { className: "text-error-400" }, "*"), l), /* @__PURE__ */ e.createElement("div", { className: n ? Wt({ error: i, disabled: a }) : Ot({ error: i, disabled: a }) }, /* @__PURE__ */ e.createElement(
+      "textarea",
+      {
+        ref: h,
+        disabled: a,
+        rows: u,
+        style: { ...E, ...o },
+        className: g(
+          n ? Mt(c && !a) : _t({ resizable: c && !a }),
+          m
+        ),
+        ...f
+      }
+    )), r && /* @__PURE__ */ e.createElement("p", { className: $t({ error: i }) }, r));
+  }
+);
+Pt.displayName = "Textarea";
+const Dt = b("flex w-[320px] flex-col gap-1"), Gt = b("flex items-center gap-1 text-sm font-bold", {
   variants: {
     error: {
       true: "text-error-600",
       false: "text-light-800"
     }
   }
-}), ge = u(["flex items-center", "rounded-lg border bg-white", "overflow-hidden", "transition-colors"], {
+}), Ht = b(["flex items-center", "rounded-lg border bg-white", "overflow-hidden", "transition-colors"], {
   variants: {
     size: {
       sm: "h-9 px-2",
@@ -1000,14 +2513,14 @@ const me = u("flex w-[320px] flex-col gap-1"), fe = u("flex items-center gap-1 t
     error: !1,
     disabled: !1
   }
-}), he = u(["flex items-center gap-1", "overflow-x-auto overflow-y-hidden", "whitespace-nowrap", "scrollbar-hide", "flex-1"]), pe = u("flex shrink-0 items-center gap-1 rounded-md bg-white border border-light-200 px-2 py-1 text-caption-lg text-light-800"), be = u(["min-w-[120px]", "bg-transparent outline-none", "text-light-900 placeholder:text-light-500"], {
+}), Ft = b(["flex items-center gap-1", "overflow-x-auto overflow-y-hidden", "whitespace-nowrap", "scrollbar-hide", "flex-1"]), Kt = b("flex shrink-0 items-center gap-1 rounded-md bg-white border border-light-200 px-2 py-1 text-caption-lg text-light-800"), Zt = b(["min-w-[120px]", "bg-transparent outline-none", "text-light-900 placeholder:text-light-500"], {
   variants: {
     disabled: {
       true: "cursor-not-allowed text-light-400",
       false: ""
     }
   }
-}), xe = u("text-caption-lg", {
+}), Ut = b("text-caption-lg", {
   variants: {
     error: {
       true: "text-error-600",
@@ -1015,64 +2528,64 @@ const me = u("flex w-[320px] flex-col gap-1"), fe = u("flex items-center gap-1 t
     }
   }
 });
-function We({
-  size: e = "md",
-  label: r,
-  required: t,
-  hint: a,
+function Pr({
+  size: t = "md",
+  label: s,
+  required: r,
+  hint: l,
   error: i = !1,
-  disabled: l = !1,
-  placeholder: m = "Add items",
-  rightIcon: d,
-  className: o,
-  wrapperClassName: n,
-  options: c,
-  value: f = [],
-  onChange: g
+  disabled: a = !1,
+  placeholder: c = "Add items",
+  rightIcon: n,
+  className: u,
+  wrapperClassName: o,
+  options: m,
+  value: p = [],
+  onChange: f
 }) {
-  const b = D(), [y, E] = F(""), N = (p) => {
-    const w = c.find((k) => k.label === p);
-    w && (f.some((k) => k.id === w.id) || (g?.([...f, w]), E("")));
-  }, v = (p) => {
-    g?.(f.filter((w) => w.id !== p));
+  const h = ge(), [E, w] = be(""), k = (x) => {
+    const N = m.find((C) => C.label === x);
+    N && (p.some((C) => C.id === N.id) || (f?.([...p, N]), w("")));
+  }, y = (x) => {
+    f?.(p.filter((N) => N.id !== x));
   };
-  return /* @__PURE__ */ s.createElement("div", { className: x(me(), n) }, r && /* @__PURE__ */ s.createElement("label", { className: fe({ error: i }) }, r, t && /* @__PURE__ */ s.createElement("span", { className: "text-error-400" }, "*")), /* @__PURE__ */ s.createElement("div", { className: ge({ size: e, error: i, disabled: l }) }, /* @__PURE__ */ s.createElement("div", { className: he() }, f.map((p) => /* @__PURE__ */ s.createElement("span", { key: p.id, className: pe() }, p.avatar && /* @__PURE__ */ s.createElement(
+  return /* @__PURE__ */ d.createElement("div", { className: g(Dt(), o) }, s && /* @__PURE__ */ d.createElement("label", { className: Gt({ error: i }) }, s, r && /* @__PURE__ */ d.createElement("span", { className: "text-error-400" }, "*")), /* @__PURE__ */ d.createElement("div", { className: Ht({ size: t, error: i, disabled: a }) }, /* @__PURE__ */ d.createElement("div", { className: Ft() }, p.map((x) => /* @__PURE__ */ d.createElement("span", { key: x.id, className: Kt() }, x.avatar && /* @__PURE__ */ d.createElement(
     "img",
     {
-      src: p.avatar,
-      alt: p.label,
+      src: x.avatar,
+      alt: x.label,
       className: "h-4 w-4 rounded-full"
     }
-  ), p.label, !l && /* @__PURE__ */ s.createElement(
+  ), x.label, !a && /* @__PURE__ */ d.createElement(
     "button",
     {
       type: "button",
-      onClick: () => v(p.id),
+      onClick: () => y(x.id),
       className: "ml-1 text-light-500 hover:text-light-700"
     },
     "×"
-  ))), /* @__PURE__ */ s.createElement(
+  ))), /* @__PURE__ */ d.createElement(
     "input",
     {
-      list: b,
-      value: y,
-      onChange: (p) => {
-        E(p.target.value), N(p.target.value);
+      list: h,
+      value: E,
+      onChange: (x) => {
+        w(x.target.value), k(x.target.value);
       },
-      placeholder: f.length === 0 ? m : "",
-      disabled: l,
-      className: x(be({ disabled: l }), o)
+      placeholder: p.length === 0 ? c : "",
+      disabled: a,
+      className: g(Zt({ disabled: a }), u)
     }
-  ), /* @__PURE__ */ s.createElement("datalist", { id: b }, c.map((p) => /* @__PURE__ */ s.createElement("option", { key: p.id, value: p.label })))), d && /* @__PURE__ */ s.createElement("div", { className: "ml-2 flex shrink-0 items-center text-light-400" }, d)), a && /* @__PURE__ */ s.createElement("p", { className: xe({ error: i }) }, a));
+  ), /* @__PURE__ */ d.createElement("datalist", { id: h }, m.map((x) => /* @__PURE__ */ d.createElement("option", { key: x.id, value: x.label })))), n && /* @__PURE__ */ d.createElement("div", { className: "ml-2 flex shrink-0 items-center text-light-400" }, n)), l && /* @__PURE__ */ d.createElement("p", { className: Ut({ error: i }) }, l));
 }
-const ve = u("flex w-[320px] flex-col gap-1"), we = u("flex items-center gap-1 font-bold text-sm", {
+const qt = b("flex w-[320px] flex-col gap-1"), Qt = b("flex items-center gap-1 font-bold text-sm", {
   variants: {
     error: {
       true: "",
       false: "text-light-800"
     }
   }
-}), ye = u("flex items-stretch rounded-lg border bg-white transition-colors", {
+}), Xt = b("flex items-stretch rounded-lg border bg-white transition-colors", {
   variants: {
     error: {
       true: "",
@@ -1083,7 +2596,7 @@ const ve = u("flex w-[320px] flex-col gap-1"), we = u("flex items-center gap-1 f
       false: ""
     }
   }
-}), Ee = u("flex items-center px-3 text-sm text-light-500  rounded-l-lg select-none", {
+}), Jt = b("flex items-center px-3 text-sm text-light-500  rounded-l-lg select-none", {
   variants: {
     size: {
       sm: "h-9",
@@ -1094,7 +2607,7 @@ const ve = u("flex w-[320px] flex-col gap-1"), we = u("flex items-center gap-1 f
       false: "bg-white"
     }
   }
-}), Ne = "w-px bg-light-200", ke = u(["flex flex-1 items-center gap-2 px-3 rounded-r-lg", "transition-shadow", "focus-within:ring-2 focus-within:ring-offset-0"], {
+}), Yt = "w-px bg-light-200", er = b(["flex flex-1 items-center gap-2 px-3 rounded-r-lg", "transition-shadow", "focus-within:ring-2 focus-within:ring-offset-0"], {
   variants: {
     size: {
       sm: "h-9",
@@ -1109,14 +2622,14 @@ const ve = u("flex w-[320px] flex-col gap-1"), we = u("flex items-center gap-1 f
       false: ""
     }
   }
-}), Se = u("flex-1 bg-transparent outline-none text-light-900 placeholder:text-light-500", {
+}), tr = b("flex-1 bg-transparent outline-none text-light-900 placeholder:text-light-500", {
   variants: {
     disabled: {
       true: "text-light-400 cursor-not-allowed",
       false: ""
     }
   }
-}), Ce = u("text-caption-lg", {
+}), rr = b("text-caption-lg", {
   variants: {
     error: {
       true: "text-error-600",
@@ -1124,46 +2637,46 @@ const ve = u("flex w-[320px] flex-col gap-1"), we = u("flex items-center gap-1 f
     }
   }
 });
-function Me({
-  size: e = "md",
-  label: r,
-  required: t,
-  hint: a,
+function Dr({
+  size: t = "md",
+  label: s,
+  required: r,
+  hint: l,
   error: i = !1,
-  disabled: l = !1,
-  placeholder: m = "www.cekat.ai",
-  value: d,
-  rightIcon: o,
-  onChange: n,
-  className: c,
-  wrapperClassName: f
+  disabled: a = !1,
+  placeholder: c = "www.cekat.ai",
+  value: n,
+  rightIcon: u,
+  onChange: o,
+  className: m,
+  wrapperClassName: p
 }) {
-  return /* @__PURE__ */ s.createElement("div", { className: x(ve(), f) }, r && /* @__PURE__ */ s.createElement("label", { className: we({ error: i }) }, r, t && /* @__PURE__ */ s.createElement("span", { className: "text-error-400" }, "*")), /* @__PURE__ */ s.createElement("div", { className: ye({ error: i, disabled: l }) }, /* @__PURE__ */ s.createElement("div", { className: Ee({ size: e }) }, "http://"), /* @__PURE__ */ s.createElement("div", { className: Ne }), /* @__PURE__ */ s.createElement("div", { className: ke({ size: e, error: i, disabled: l }) }, /* @__PURE__ */ s.createElement(
+  return /* @__PURE__ */ d.createElement("div", { className: g(qt(), p) }, s && /* @__PURE__ */ d.createElement("label", { className: Qt({ error: i }) }, s, r && /* @__PURE__ */ d.createElement("span", { className: "text-error-400" }, "*")), /* @__PURE__ */ d.createElement("div", { className: Xt({ error: i, disabled: a }) }, /* @__PURE__ */ d.createElement("div", { className: Jt({ size: t }) }, "http://"), /* @__PURE__ */ d.createElement("div", { className: Yt }), /* @__PURE__ */ d.createElement("div", { className: er({ size: t, error: i, disabled: a }) }, /* @__PURE__ */ d.createElement(
     "input",
     {
-      value: d,
-      onChange: n,
-      placeholder: m,
-      disabled: l,
-      className: x(Se({ disabled: l }), c)
+      value: n,
+      onChange: o,
+      placeholder: c,
+      disabled: a,
+      className: g(tr({ disabled: a }), m)
     }
-  ), o && /* @__PURE__ */ s.createElement("div", { className: "flex items-center text-light-400" }, o))), a && /* @__PURE__ */ s.createElement("p", { className: Ce({ error: i }) }, a));
+  ), u && /* @__PURE__ */ d.createElement("div", { className: "flex items-center text-light-400" }, u))), l && /* @__PURE__ */ d.createElement("p", { className: rr({ error: i }) }, l));
 }
-const Ve = u("flex w-[320px] flex-col gap-1"), Re = u("flex items-center gap-1 font-bold text-sm", {
+const sr = b("flex w-[320px] flex-col gap-1"), ar = b("flex items-center gap-1 font-bold text-sm", {
   variants: {
     error: {
       true: "text-error-600",
       false: "text-light-800"
     }
   }
-}), $e = u("flex items-stretch rounded-lg border border-light-200 bg-white transition-colors", {
+}), lr = b("flex items-stretch rounded-lg border border-light-200 bg-white transition-colors", {
   variants: {
     disabled: {
       true: "bg-light-100",
       false: ""
     }
   }
-}), je = u(["flex flex-1 items-center gap-2 px-3 rounded-l-lg", "transition-shadow", "focus-within:ring-2 focus-within:ring-offset-0"], {
+}), ir = b(["flex flex-1 items-center gap-2 px-3 rounded-l-lg", "transition-shadow", "focus-within:ring-2 focus-within:ring-offset-0"], {
   variants: {
     size: {
       sm: "h-9",
@@ -1178,14 +2691,14 @@ const Ve = u("flex w-[320px] flex-col gap-1"), Re = u("flex items-center gap-1 f
       false: ""
     }
   }
-}), ze = u("w-px transition-colors", {
+}), nr = b("w-px transition-colors", {
   variants: {
     error: {
       true: "focus:bg-error-200  group-focus-within:bg-error-500",
       false: "focus:bg-light-200 group-focus-within:bg-primary-500"
     }
   }
-}), Ie = u("flex items-center gap-1 px-3 text-sm text-light-700 rounded-r-lg select-none", {
+}), or = b("flex items-center gap-1 px-3 text-sm text-light-700 rounded-r-lg select-none", {
   variants: {
     size: {
       sm: "h-9",
@@ -1196,14 +2709,14 @@ const Ve = u("flex w-[320px] flex-col gap-1"), Re = u("flex items-center gap-1 f
       false: "bg-white"
     }
   }
-}), Ae = u("flex-1 bg-transparent outline-none text-light-900 placeholder:text-light-500", {
+}), cr = b("flex-1 bg-transparent outline-none text-light-900 placeholder:text-light-500", {
   variants: {
     disabled: {
       true: "text-light-400 cursor-not-allowed",
       false: ""
     }
   }
-}), Te = u("text-caption-lg", {
+}), dr = b("text-caption-lg", {
   variants: {
     error: {
       true: "text-error-600",
@@ -1211,45 +2724,571 @@ const Ve = u("flex w-[320px] flex-col gap-1"), Re = u("flex items-center gap-1 f
     }
   }
 });
-function Le({
-  size: e = "md",
-  label: r,
-  required: t,
-  hint: a,
+function Gr({
+  size: t = "md",
+  label: s,
+  required: r,
+  hint: l,
   error: i = !1,
-  disabled: l = !1,
-  placeholder: m = "www.cekat.ai",
-  value: d,
-  rightIcon: o,
-  suffix: n,
-  onChange: c,
-  className: f,
-  wrapperClassName: g
+  disabled: a = !1,
+  placeholder: c = "www.cekat.ai",
+  value: n,
+  rightIcon: u,
+  suffix: o,
+  onChange: m,
+  className: p,
+  wrapperClassName: f
 }) {
-  return /* @__PURE__ */ s.createElement("div", { className: x(Ve(), g) }, r && /* @__PURE__ */ s.createElement("label", { className: Re({ error: i }) }, r, t && /* @__PURE__ */ s.createElement("span", { className: "text-error-400" }, "*")), /* @__PURE__ */ s.createElement("div", { className: $e({ disabled: l }) }, /* @__PURE__ */ s.createElement("div", { className: je({ size: e, error: i, disabled: l }) }, /* @__PURE__ */ s.createElement(
+  return /* @__PURE__ */ d.createElement("div", { className: g(sr(), f) }, s && /* @__PURE__ */ d.createElement("label", { className: ar({ error: i }) }, s, r && /* @__PURE__ */ d.createElement("span", { className: "text-error-400" }, "*")), /* @__PURE__ */ d.createElement("div", { className: lr({ disabled: a }) }, /* @__PURE__ */ d.createElement("div", { className: ir({ size: t, error: i, disabled: a }) }, /* @__PURE__ */ d.createElement(
     "input",
     {
-      value: d,
-      onChange: c,
-      placeholder: m,
-      disabled: l,
-      className: x(Ae({ disabled: l }), f)
+      value: n,
+      onChange: m,
+      placeholder: c,
+      disabled: a,
+      className: g(cr({ disabled: a }), p)
+    }
+  ), u && /* @__PURE__ */ d.createElement("div", { className: "text-light-400" }, u)), /* @__PURE__ */ d.createElement("div", { className: nr({ error: i }) }), /* @__PURE__ */ d.createElement("div", { className: or({ size: t, disabled: a }) }, o)), l && /* @__PURE__ */ d.createElement("p", { className: dr({ error: i }) }, l));
+}
+const ur = b("flex w-full max-w-[320px] flex-col gap-1"), mr = b(
+  "flex items-center gap-1 text-sm font-bold text-light-800"
+), U = b(
+  [
+    "flex w-full items-center border bg-white text-left",
+    "transition-[border-color,border-width]"
+  ],
+  {
+    variants: {
+      size: {
+        xs: "h-7 gap-1 rounded px-2 text-caption-sm",
+        sm: "h-9 gap-2 rounded-lg px-3 text-caption-lg",
+        md: "h-11 gap-2 rounded-lg px-3 text-body-sm"
+      },
+      open: {
+        true: "border-2 border-primary-500",
+        false: "border-light-200 focus-within:border-2 focus-within:border-primary-500"
+      },
+      disabled: {
+        true: "cursor-not-allowed bg-light-100",
+        false: "cursor-pointer"
+      }
+    },
+    defaultVariants: { size: "md", open: !1, disabled: !1 }
+  }
+), pr = b(
+  [
+    "absolute left-0 top-full z-10 mt-2 w-full overflow-y-auto",
+    "rounded-lg border border-light-200 bg-white py-1",
+    "shadow-[0_12px_16px_-4px_rgba(16,24,40,0.08),0_4px_6px_-2px_rgba(16,24,40,0.03)]"
+  ],
+  {
+    variants: {
+      size: {
+        xs: "max-h-52",
+        sm: "max-h-64",
+        md: "max-h-80"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+), q = b(
+  "flex w-full items-center rounded-md text-left",
+  {
+    variants: {
+      size: {
+        xs: "gap-1 px-2 py-1 text-caption-sm",
+        sm: "gap-2 px-3 py-1.5 text-caption-lg",
+        md: "gap-2 py-2.5 pl-4 pr-2.5 text-body-sm"
+      },
+      disabled: {
+        true: "cursor-not-allowed text-light-400",
+        false: "cursor-pointer hover:bg-light-50"
+      }
+    },
+    defaultVariants: { size: "md", disabled: !1 }
+  }
+), gr = b("text-caption-lg text-light-700"), br = ({ className: t }) => /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 20 20", fill: "none", className: t }, /* @__PURE__ */ e.createElement(
+  "path",
+  {
+    d: "M5 7.5L10 12.5L15 7.5",
+    stroke: "currentColor",
+    strokeWidth: "1.67",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+)), fr = ({ className: t }) => /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 20 20", fill: "none", className: t }, /* @__PURE__ */ e.createElement(
+  "path",
+  {
+    d: "M17.5 17.5L14.1 14.1M16 9.25C16 12.98 12.98 16 9.25 16C5.52 16 2.5 12.98 2.5 9.25C2.5 5.52 5.52 2.5 9.25 2.5C12.98 2.5 16 5.52 16 9.25Z",
+    stroke: "currentColor",
+    strokeWidth: "1.67",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+)), hr = ({ className: t }) => /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 20 20", fill: "none", className: t }, /* @__PURE__ */ e.createElement(
+  "path",
+  {
+    d: "M16.67 5L7.5 14.17L3.33 10",
+    stroke: "currentColor",
+    strokeWidth: "1.67",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+)), A = {
+  xs: "size-4",
+  sm: "size-5",
+  md: "size-6"
+}, Q = {
+  xs: "size-4",
+  sm: "size-5",
+  md: "size-5"
+}, xr = {
+  xs: "text-caption-sm",
+  sm: "text-caption-lg",
+  md: "text-body-sm"
+}, vr = {
+  xs: "h-7",
+  sm: "h-[30px]",
+  md: "h-[34px]"
+}, X = ({ size: t, open: s, disabled: r }) => g(
+  "flex w-full items-center gap-2 rounded-lg border bg-white px-2 text-left transition-[border-color,border-width]",
+  xr[t],
+  vr[t],
+  s ? "border-2 border-primary-500" : "border-light-200 focus-within:border-2 focus-within:border-primary-500",
+  r ? "cursor-not-allowed bg-light-100" : "cursor-pointer"
+), yr = () => "flex items-center gap-1 text-caption-sm font-semibold text-light-800", wr = "flex w-full max-w-[320px] flex-col";
+function Hr({
+  size: t = "md",
+  type: s = "default",
+  label: r,
+  required: l,
+  helpIcon: i,
+  hint: a,
+  placeholder: c = "Select option",
+  disabled: n = !1,
+  compact: u = !1,
+  leadingIcon: o,
+  options: m,
+  value: p = null,
+  onChange: f,
+  values: h = [],
+  onValuesChange: E,
+  className: w,
+  wrapperClassName: k
+}) {
+  const [y, x] = e.useState(!1), [N, C] = e.useState(""), L = e.useRef(null), S = e.useRef(null), z = s === "tags", V = s === "search" || z, T = m.find((v) => v.id === p) ?? null, $ = m.filter((v) => h.includes(v.id)), W = N ? m.filter(
+    (v) => `${v.label} ${v.supportingText ?? ""}`.toLowerCase().includes(N.toLowerCase())
+  ) : m, I = () => {
+    x(!1), C("");
+  };
+  e.useEffect(() => {
+    if (!y) return;
+    const v = (B) => {
+      L.current?.contains(B.target) || I();
+    };
+    return document.addEventListener("mousedown", v), () => document.removeEventListener("mousedown", v);
+  }, [y]), e.useEffect(() => {
+    y && V && S.current?.focus();
+  }, [y, V]);
+  const P = () => {
+    n || (y ? I() : x(!0));
+  }, R = (v) => {
+    v.disabled || (z ? (E?.(
+      h.includes(v.id) ? h.filter((B) => B !== v.id) : [...h, v.id]
+    ), C(""), S.current?.focus()) : (f?.(v), I()));
+  }, ce = (v) => {
+    if (v.key === "Enter") {
+      v.preventDefault();
+      const B = W.find((me) => !me.disabled);
+      y && B && R(B);
+    } else v.key === "Backspace" && z && !N && h.length ? E?.(h.slice(0, -1)) : y || x(!0);
+  }, D = (v) => v.avatar ? /* @__PURE__ */ e.createElement(
+    "img",
+    {
+      src: v.avatar,
+      alt: "",
+      className: g(A[t], "shrink-0 rounded-full object-cover")
+    }
+  ) : v.icon ? /* @__PURE__ */ e.createElement(
+    "span",
+    {
+      className: g(
+        A[t],
+        "flex shrink-0 items-center justify-center",
+        n ? "text-light-400" : "text-light-500"
+      )
+    },
+    v.icon
+  ) : v.dot ? /* @__PURE__ */ e.createElement(
+    "span",
+    {
+      className: "size-2 shrink-0 rounded-full",
+      style: { backgroundColor: n ? "#d0d5dd" : v.dot }
     }
-  ), o && /* @__PURE__ */ s.createElement("div", { className: "text-light-400" }, o)), /* @__PURE__ */ s.createElement("div", { className: ze({ error: i }) }), /* @__PURE__ */ s.createElement("div", { className: Ie({ size: e, disabled: l }) }, n)), a && /* @__PURE__ */ s.createElement("p", { className: Te({ error: i }) }, a));
+  ) : null, de = T ? D(T) : o ? /* @__PURE__ */ e.createElement(
+    "span",
+    {
+      className: g(
+        A[t],
+        "flex shrink-0 items-center justify-center",
+        n ? "text-light-400" : "text-light-500"
+      )
+    },
+    o
+  ) : null, G = T ? /* @__PURE__ */ e.createElement("span", { className: "flex min-w-0 items-center gap-2 whitespace-nowrap" }, /* @__PURE__ */ e.createElement(
+    "span",
+    {
+      className: g(
+        "truncate font-medium",
+        n ? "text-light-400" : "text-light-800"
+      )
+    },
+    T.label
+  ), T.supportingText && /* @__PURE__ */ e.createElement("span", { className: n ? "text-light-400" : "text-light-700" }, T.supportingText)) : /* @__PURE__ */ e.createElement("span", { className: n ? "text-light-400" : "text-light-500" }, c), ue = y && /* @__PURE__ */ e.createElement("div", { role: "listbox", className: pr({ size: t }) }, W.length === 0 && /* @__PURE__ */ e.createElement("div", { className: g(q({ size: t }), "mx-1 w-auto text-light-500 hover:bg-transparent") }, "No options found"), W.map((v) => {
+    const B = z ? h.includes(v.id) : v.id === p;
+    return /* @__PURE__ */ e.createElement("div", { key: v.id, className: "px-1 py-0.5" }, /* @__PURE__ */ e.createElement(
+      "button",
+      {
+        type: "button",
+        role: "option",
+        "aria-selected": B,
+        disabled: v.disabled,
+        onClick: () => R(v),
+        className: q({ size: t, disabled: v.disabled })
+      },
+      D(v),
+      /* @__PURE__ */ e.createElement("span", { className: "flex min-w-0 flex-1 items-center gap-2 whitespace-nowrap" }, /* @__PURE__ */ e.createElement(
+        "span",
+        {
+          className: g(
+            "truncate font-medium",
+            v.disabled ? "text-light-400" : "text-light-900"
+          )
+        },
+        v.label
+      ), v.supportingText && /* @__PURE__ */ e.createElement(
+        "span",
+        {
+          className: v.disabled ? "text-light-400" : "text-light-700"
+        },
+        v.supportingText
+      )),
+      B && /* @__PURE__ */ e.createElement(hr, { className: "ml-auto size-5 shrink-0 text-primary-500" })
+    ));
+  }));
+  return /* @__PURE__ */ e.createElement("div", { ref: L, className: g(u ? wr : ur(), k) }, r && /* @__PURE__ */ e.createElement("label", { className: u ? yr() : mr() }, r, l && /* @__PURE__ */ e.createElement("span", { className: "text-error-400" }, "*"), i), /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: "relative",
+      onKeyDown: (v) => {
+        v.key === "Escape" && I();
+      }
+    },
+    s === "default" ? /* @__PURE__ */ e.createElement(
+      "button",
+      {
+        type: "button",
+        "aria-haspopup": "listbox",
+        "aria-expanded": y,
+        disabled: n,
+        onClick: P,
+        className: g(u ? X({ size: t, open: y, disabled: n }) : U({ size: t, open: y, disabled: n }), w)
+      },
+      de,
+      /* @__PURE__ */ e.createElement("span", { className: "flex min-w-0 flex-1 items-center" }, G),
+      /* @__PURE__ */ e.createElement(
+        br,
+        {
+          className: g(Q[t], "shrink-0 text-light-500")
+        }
+      )
+    ) : /* @__PURE__ */ e.createElement(
+      "div",
+      {
+        role: "combobox",
+        "aria-haspopup": "listbox",
+        "aria-expanded": y,
+        onClick: P,
+        className: g(u ? X({ size: t, open: y, disabled: n }) : U({ size: t, open: y, disabled: n }), w)
+      },
+      /* @__PURE__ */ e.createElement(
+        fr,
+        {
+          className: g(
+            Q[t],
+            "shrink-0",
+            n ? "text-light-400" : "text-light-500"
+          )
+        }
+      ),
+      z && $.length > 0 && /* @__PURE__ */ e.createElement("div", { className: "flex shrink items-center gap-1 overflow-x-auto whitespace-nowrap scrollbar-hide" }, $.map((v) => /* @__PURE__ */ e.createElement(
+        ae,
+        {
+          key: v.id,
+          size: "sm",
+          disabled: n,
+          icon: v.avatar ? /* @__PURE__ */ e.createElement(
+            "img",
+            {
+              src: v.avatar,
+              alt: "",
+              className: "size-4 shrink-0 rounded-full object-cover"
+            }
+          ) : void 0,
+          onClose: () => R(v)
+        },
+        v.label
+      ))),
+      !z && !y && T ? /* @__PURE__ */ e.createElement("span", { className: "flex min-w-0 flex-1 items-center" }, G) : /* @__PURE__ */ e.createElement(
+        "input",
+        {
+          ref: S,
+          value: N,
+          disabled: n,
+          placeholder: z && $.length > 0 ? "" : c,
+          onChange: (v) => {
+            C(v.target.value), y || x(!0);
+          },
+          onKeyDown: ce,
+          className: "min-w-8 flex-1 bg-transparent text-light-900 outline-none placeholder:text-light-500 disabled:cursor-not-allowed disabled:placeholder:text-light-400"
+        }
+      )
+    ),
+    ue
+  ), a && /* @__PURE__ */ e.createElement("p", { className: gr() }, a));
+}
+const Er = b(
+  [
+    "inline-flex items-center justify-center gap-1 shrink-0",
+    "rounded-md border border-light-200 bg-white px-2 py-1",
+    "font-bold text-caption-sm text-light-900",
+    "transition-shadow"
+  ],
+  {
+    variants: {
+      open: {
+        true: "shadow-[0px_0px_0px_2px_white,0px_0px_0px_4px_rgba(112,150,217,1)]",
+        false: ""
+      },
+      disabled: {
+        true: "cursor-not-allowed opacity-50",
+        false: "cursor-pointer"
+      }
+    },
+    defaultVariants: { open: !1, disabled: !1 }
+  }
+), Nr = b(
+  "flex size-5 shrink-0 items-center justify-center text-light-500",
+  {
+    variants: {
+      disabled: {
+        true: "cursor-not-allowed opacity-50",
+        false: "cursor-pointer hover:text-light-700"
+      }
+    },
+    defaultVariants: { disabled: !1 }
+  }
+), kr = b(
+  "rounded-full transition-shadow",
+  {
+    variants: {
+      open: {
+        true: "shadow-[0px_0px_0px_2px_white,0px_0px_0px_4px_rgba(112,150,217,1)]",
+        false: ""
+      },
+      disabled: {
+        true: "cursor-not-allowed opacity-50",
+        false: "cursor-pointer"
+      }
+    },
+    defaultVariants: { open: !1, disabled: !1 }
+  }
+), Sr = b([
+  "absolute top-full z-10 mt-2 flex w-60 flex-col overflow-clip",
+  "rounded-lg border border-light-200 bg-white",
+  "shadow-[0px_12px_16px_-4px_rgba(16,24,40,0.08),0px_4px_6px_-2px_rgba(16,24,40,0.03)]"
+]), Cr = b(
+  "flex w-full flex-col items-start border-b border-light-200 px-4 py-3"
+), zr = b(
+  "flex w-full flex-col items-start overflow-y-auto py-1"
+), Lr = b(
+  [
+    "mx-1 flex w-[calc(100%-8px)] items-center gap-3 rounded-md px-4 py-2.5",
+    "text-left font-bold text-caption-lg"
+  ],
+  {
+    variants: {
+      disabled: {
+        true: "cursor-not-allowed text-light-400",
+        false: "cursor-pointer text-light-800 hover:bg-light-50"
+      }
+    },
+    defaultVariants: { disabled: !1 }
+  }
+), Br = b(
+  "ml-auto shrink-0 font-normal text-caption-sm text-light-500"
+), Tr = b("my-1 h-px w-full bg-light-200"), Vr = ({ className: t }) => /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 18 18", fill: "none", className: t }, /* @__PURE__ */ e.createElement(
+  "path",
+  {
+    d: "M4.5 6.75L9 11.25L13.5 6.75",
+    stroke: "currentColor",
+    strokeWidth: "1.67",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+)), jr = ({ className: t }) => /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 18 18", fill: "none", className: t }, /* @__PURE__ */ e.createElement(
+  "path",
+  {
+    d: "M13.5 11.25L9 6.75L4.5 11.25",
+    stroke: "currentColor",
+    strokeWidth: "1.67",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+)), Ir = ({ className: t }) => /* @__PURE__ */ e.createElement("svg", { viewBox: "0 0 20 20", fill: "none", className: t }, /* @__PURE__ */ e.createElement(
+  "path",
+  {
+    d: "M10 10.83a.83.83 0 1 0 0-1.67.83.83 0 0 0 0 1.67ZM10 5a.83.83 0 1 0 0-1.67A.83.83 0 0 0 10 5ZM10 16.67a.83.83 0 1 0 0-1.67.83.83 0 0 0 0 1.67Z",
+    stroke: "currentColor",
+    strokeWidth: "1.67",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+));
+function Fr({
+  trigger: t = "button",
+  label: s = "Account",
+  icon: r,
+  avatarSrc: l,
+  avatarInitials: i,
+  header: a,
+  items: c,
+  open: n,
+  defaultOpen: u = !1,
+  onOpenChange: o,
+  disabled: m = !1,
+  align: p = "end",
+  className: f,
+  menuClassName: h
+}) {
+  const [E, w] = e.useState(u), k = n !== void 0, y = k ? n : E, x = e.useRef(null), N = (S) => {
+    k || w(S), o?.(S);
+  };
+  e.useEffect(() => {
+    if (!y) return;
+    const S = (V) => {
+      x.current?.contains(V.target) || N(!1);
+    }, z = (V) => {
+      V.key === "Escape" && N(!1);
+    };
+    return document.addEventListener("mousedown", S), document.addEventListener("keydown", z), () => {
+      document.removeEventListener("mousedown", S), document.removeEventListener("keydown", z);
+    };
+  }, [y]);
+  const C = () => {
+    m || N(!y);
+  }, L = (S) => {
+    S.disabled || (S.onClick?.(), N(!1));
+  };
+  return /* @__PURE__ */ e.createElement("div", { ref: x, className: g("relative inline-block", f) }, t === "button" && /* @__PURE__ */ e.createElement(
+    "button",
+    {
+      type: "button",
+      "aria-haspopup": "menu",
+      "aria-expanded": y,
+      disabled: m,
+      onClick: C,
+      className: Er({ open: y, disabled: m })
+    },
+    /* @__PURE__ */ e.createElement("span", null, s),
+    y ? /* @__PURE__ */ e.createElement(jr, { className: "size-[18px]" }) : /* @__PURE__ */ e.createElement(Vr, { className: "size-[18px]" })
+  ), t === "icon" && /* @__PURE__ */ e.createElement(
+    "button",
+    {
+      type: "button",
+      "aria-haspopup": "menu",
+      "aria-expanded": y,
+      "aria-label": s,
+      disabled: m,
+      onClick: C,
+      className: Nr({ disabled: m })
+    },
+    r ?? /* @__PURE__ */ e.createElement(Ir, { className: "size-5" })
+  ), t === "avatar" && /* @__PURE__ */ e.createElement(
+    "button",
+    {
+      type: "button",
+      "aria-haspopup": "menu",
+      "aria-expanded": y,
+      "aria-label": s,
+      disabled: m,
+      onClick: C,
+      className: kr({ open: y, disabled: m })
+    },
+    /* @__PURE__ */ e.createElement(_, { src: l, initials: i, size: "md", status: "online" })
+  ), y && /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      role: "menu",
+      className: g(
+        Sr(),
+        p === "end" ? "right-0" : "left-0",
+        h
+      )
+    },
+    a && /* @__PURE__ */ e.createElement("div", { className: Cr() }, /* @__PURE__ */ e.createElement("div", { className: "flex w-full items-center gap-3" }, /* @__PURE__ */ e.createElement(
+      _,
+      {
+        src: a.avatarSrc,
+        initials: a.avatarInitials,
+        size: "md",
+        status: a.status ?? "online"
+      }
+    ), /* @__PURE__ */ e.createElement("div", { className: "flex min-w-0 flex-1 flex-col items-start text-left" }, /* @__PURE__ */ e.createElement("span", { className: "w-full truncate text-sm font-bold text-light-800" }, a.name), a.subtitle && /* @__PURE__ */ e.createElement("span", { className: "w-full truncate text-caption-lg font-normal text-light-700" }, a.subtitle)))),
+    /* @__PURE__ */ e.createElement("div", { className: zr() }, c.map(
+      (S) => S.divider ? /* @__PURE__ */ e.createElement("div", { key: S.id, role: "separator", className: Tr() }) : /* @__PURE__ */ e.createElement(
+        "button",
+        {
+          key: S.id,
+          type: "button",
+          role: "menuitem",
+          disabled: S.disabled,
+          onClick: () => L(S),
+          className: Lr({ disabled: S.disabled })
+        },
+        S.icon && /* @__PURE__ */ e.createElement("span", { className: "flex size-4 shrink-0 items-center justify-center" }, S.icon),
+        /* @__PURE__ */ e.createElement("span", { className: "flex-1 truncate" }, S.label),
+        S.shortcut && /* @__PURE__ */ e.createElement("span", { className: Br() }, S.shortcut)
+      )
+    ))
+  ));
 }
 export {
-  z as Button,
-  Ge as CardNumberInput,
-  U as Checkbox,
-  T as Input,
-  Pe as InputCounter,
-  We as MultiSelectInput,
-  _e as PhoneInput,
-  Fe as RadioGroup,
-  H as RadioGroupItem,
-  Oe as SaleAmountInput,
-  X as Toggle,
-  te as Tooltip,
-  Le as WebsiteCopyInput,
-  Me as WebsiteInput
+  _ as Avatar,
+  rt as AvatarGroup,
+  at as AvatarLabelGroup,
+  it as AvatarProfilePhoto,
+  He as Badge,
+  Ze as BadgeGroup,
+  Y as Button,
+  Ar as CardNumberInput,
+  Ne as Checkbox,
+  Fr as Dropdown,
+  oe as Input,
+  Mr as InputCounter,
+  Hr as InputDropdown,
+  Je as Loading,
+  Pr as MultiSelectInput,
+  Wr as PhoneInput,
+  $r as RadioGroup,
+  ze as RadioGroupItem,
+  Rr as SaleAmountInput,
+  mt as Tab,
+  pt as TabList,
+  ae as Tag,
+  Pt as Textarea,
+  Te as Toggle,
+  Oe as Tooltip,
+  Gr as WebsiteCopyInput,
+  Dr as WebsiteInput
 };