@stokelp/ui 1.6.4 → 1.8.0

package/dist/ui.js

@@ -1,57 +1,57 @@
 "use client";
-import { jsx as a, jsxs as v } from "react/jsx-runtime";
-import { Accordion as $, Checkbox as _, Dialog as C, ark as P, Portal as Q, Switch as F, Tabs as R, Select as b } from "@ark-ui/react";
-import { styled as i, splitCssProps as j } from "@stokelp/styled-system/jsx";
-import { accordion as we, button as Ie, checkbox as q, drawer as Ce, formControl as Se, formLabel as O, formHelperText as ke, heading as Te, switchRecipe as Z, text as _e, textarea as Ee, tabs as Re, select as Be, input as Fe, inputAddon as $e, inputGroup as De } from "@stokelp/styled-system/recipes";
-import { createContext as ze, forwardRef as k, useContext as Ae, createElement as Ne, useMemo as J } from "react";
-import { cx as G, css as Y } from "@stokelp/styled-system/css";
-import { defineKeyframes as Pe, defineRecipe as w, defineSlotRecipe as T, defineSemanticTokens as Le, defineTextStyles as We, defineTokens as d, defineUtility as Ve, definePreset as Me } from "@pandacss/dev";
-const K = (...e) => e.filter(Boolean).join(" "), L = (e, t) => {
-  const o = ze(null);
+import { jsx as a, jsxs as b } from "react/jsx-runtime";
+import { Accordion as $, Checkbox as _, Dialog as T, ark as z, Portal as ee, Switch as F, Tabs as R, Select as v } from "@ark-ui/react";
+import { styled as i, splitCssProps as W, Circle as Ie } from "@stokelp/styled-system/jsx";
+import { accordion as Ce, button as Se, checkbox as Z, drawer as Te, formControl as ke, formLabel as Y, formHelperText as _e, heading as Ee, switchRecipe as K, text as Re, textarea as Be, tabs as Fe, select as De, input as $e, inputAddon as ze, inputGroup as Ae, tag as Q } from "@stokelp/styled-system/recipes";
+import { createContext as Ne, forwardRef as S, useContext as Pe, createElement as Le, useMemo as X } from "react";
+import { cx as D, css as V } from "@stokelp/styled-system/css";
+import { defineKeyframes as We, defineRecipe as I, defineSlotRecipe as k, defineSemanticTokens as Ve, defineTextStyles as Me, defineTokens as c, defineUtility as He, definePreset as Oe } from "@pandacss/dev";
+const J = (...e) => e.filter(Boolean).join(" "), M = (e, t) => {
+  const o = Ne(null);
   return {
-    withContext: (m, s, u) => s ? k((c, H) => {
-      const B = Ae(o), D = (t == null ? void 0 : t.dataAttr) ?? !1;
-      return Ne(m, {
-        ...D && { "data-recipe-slot": s ?? "" },
-        ...c,
+    withContext: (p, l, u) => l ? S((d, G) => {
+      const B = Pe(o), A = (t == null ? void 0 : t.dataAttr) ?? !1;
+      return Le(p, {
+        ...A && { "data-recipe-slot": l ?? "" },
+        ...d,
         ...u == null ? void 0 : u.defaultProps,
-        className: K(B == null ? void 0 : B[s ?? ""], c.className),
-        ref: H
+        className: J(B == null ? void 0 : B[l ?? ""], d.className),
+        ref: G
       });
-    }) : m,
-    withProvider: (m, s, u) => k((c, H) => {
-      const [B, D] = e.splitVariantProps({
-        ...c,
+    }) : p,
+    withProvider: (p, l, u) => S((d, G) => {
+      const [B, A] = e.splitVariantProps({
+        ...d,
         ...u == null ? void 0 : u.defaultProps
-      }), U = e(B), xe = (t == null ? void 0 : t.dataAttr) ?? !1;
-      return /* @__PURE__ */ a(o.Provider, { value: U, children: /* @__PURE__ */ a(
-        m,
+      }), q = e(B), we = (t == null ? void 0 : t.dataAttr) ?? !1;
+      return /* @__PURE__ */ a(o.Provider, { value: q, children: /* @__PURE__ */ a(
+        p,
         {
-          ref: H,
-          ...xe && { "data-recipe-slot": s ?? "" },
-          ...D,
-          className: K(U[s ?? ""], D.className)
+          ref: G,
+          ...we && { "data-recipe-slot": l ?? "" },
+          ...A,
+          className: J(q[l ?? ""], A.className)
         }
       ) });
     })
   };
-}, { withProvider: He, withContext: W } = L(we), tr = He(i($.Root), "root"), or = W(i($.Item), "item"), rr = W(i($.ItemContent), "itemContent"), ar = W(i($.ItemIndicator), "itemIndicator", {
+}, { withProvider: je, withContext: H } = M(Ce), ar = je(i($.Root), "root"), ir = H(i($.Item), "item"), nr = H(i($.ItemContent), "itemContent"), lr = H(i($.ItemIndicator), "itemIndicator", {
   defaultProps: {
     children: /* @__PURE__ */ a("svg", { width: "16", height: "17", viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ a("path", { d: "M4.94 6.03L8 9.08333L11.06 6.03L12 6.97L8 10.97L4 6.97L4.94 6.03Z", fill: "currentColor" }) })
   }
-}), ir = W(i($.ItemTrigger), "itemTrigger"), Oe = i("button", Ie), je = k((e, t) => {
-  const [o, r] = q.splitVariantProps(e), [l, m] = j(r), { children: s, className: u, ...S } = m, c = q(o);
-  return /* @__PURE__ */ v(_.Root, { ref: t, className: G(c.root, Y(l), u), ...S, children: [
-    /* @__PURE__ */ v(_.Control, { className: c.control, children: [
-      /* @__PURE__ */ a(_.Indicator, { children: /* @__PURE__ */ a(Ge, {}) }),
-      /* @__PURE__ */ a(_.Indicator, { indeterminate: !0, children: /* @__PURE__ */ a(Ye, {}) })
+}), sr = H(i($.ItemTrigger), "itemTrigger"), Ge = i("button", Se), Ye = S((e, t) => {
+  const [o, r] = Z.splitVariantProps(e), [n, p] = W(r), { children: l, className: u, ...x } = p, d = Z(o);
+  return /* @__PURE__ */ b(_.Root, { ref: t, className: D(d.root, V(n), u), ...x, children: [
+    /* @__PURE__ */ b(_.Control, { className: d.control, children: [
+      /* @__PURE__ */ a(_.Indicator, { children: /* @__PURE__ */ a(Xe, {}) }),
+      /* @__PURE__ */ a(_.Indicator, { indeterminate: !0, children: /* @__PURE__ */ a(Ue, {}) })
     ] }),
-    s && /* @__PURE__ */ a(_.Label, { className: c.label, children: s }),
+    l && /* @__PURE__ */ a(_.Label, { className: d.label, children: l }),
     /* @__PURE__ */ a(_.HiddenInput, {})
   ] });
 });
-je.displayName = "Checkbox";
-const Ge = () => /* @__PURE__ */ v("svg", { viewBox: "0 0 12 13", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+Ye.displayName = "Checkbox";
+const Xe = () => /* @__PURE__ */ b("svg", { viewBox: "0 0 12 13", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
   /* @__PURE__ */ a("title", { children: "Check Icon" }),
   /* @__PURE__ */ a(
     "path",
@@ -60,18 +60,18 @@ const Ge = () => /* @__PURE__ */ v("svg", { viewBox: "0 0 12 13", fill: "none",
       fill: "white"
     }
   )
-] }), Ye = () => /* @__PURE__ */ v("svg", { width: "12", height: "13", viewBox: "0 0 12 13", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+] }), Ue = () => /* @__PURE__ */ b("svg", { width: "12", height: "13", viewBox: "0 0 12 13", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
   /* @__PURE__ */ a("title", { children: "Minus Icon" }),
   /* @__PURE__ */ a("path", { d: "M3 6H9V7H3V6Z", fill: "white" })
-] }), { withProvider: Xe, withContext: I } = L(Ce), nr = Xe(C.Root, void 0, {
+] }), { withProvider: qe, withContext: C } = M(Te), dr = qe(T.Root, void 0, {
   defaultProps: {
     unmountOnExit: !0,
     lazyMount: !0
   }
-}), lr = I(i(P.main), "body"), Ue = I(i(C.CloseTrigger), "closeTrigger"), sr = I(i(P.footer), "footer"), ee = k(
-  ({ children: e, showCloseTrigger: t = !0, ...o }, r) => /* @__PURE__ */ v(P.header, { ...o, ref: r, children: [
+}), cr = C(i(z.main), "body"), Ze = C(i(T.CloseTrigger), "closeTrigger"), ur = C(i(z.footer), "footer"), te = S(
+  ({ children: e, showCloseTrigger: t = !0, ...o }, r) => /* @__PURE__ */ b(z.header, { ...o, ref: r, children: [
     e,
-    t && /* @__PURE__ */ a(Ue, { asChild: !0, children: /* @__PURE__ */ a(Oe, { ml: "auto", p: "space-8", variant: "tertiary", children: /* @__PURE__ */ a("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ a(
+    t && /* @__PURE__ */ a(Ze, { asChild: !0, children: /* @__PURE__ */ a(Ge, { ml: "auto", p: "space-8", variant: "tertiary", children: /* @__PURE__ */ a("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ a(
       "path",
       {
         d: "M12.6666 4.27331L11.7266 3.33331L7.99998 7.05998L4.27331 3.33331L3.33331 4.27331L7.05998 7.99998L3.33331 11.7266L4.27331 12.6666L7.99998 8.93998L11.7266 12.6666L12.6666 11.7266L8.93998 7.99998L12.6666 4.27331Z",
@@ -80,89 +80,89 @@ const Ge = () => /* @__PURE__ */ v("svg", { viewBox: "0 0 12 13", fill: "none",
     ) }) }) })
   ] })
 );
-ee.displayName = "DrawerHeader";
-const dr = I(ee, "header"), cr = I(i(C.Title), "title"), ur = I(i(C.Trigger), "trigger"), qe = I(i(C.Positioner), "positioner"), Ze = I(i(C.Backdrop), "backdrop"), te = k(
-  ({ children: e, ...t }, o) => /* @__PURE__ */ v(Q, { children: [
-    /* @__PURE__ */ a(Ze, {}),
-    /* @__PURE__ */ a(qe, { children: /* @__PURE__ */ a(C.Content, { ref: o, ...t, children: e }) })
+te.displayName = "DrawerHeader";
+const pr = C(te, "header"), gr = C(i(T.Title), "title"), mr = C(i(T.Trigger), "trigger"), Ke = C(i(T.Positioner), "positioner"), Qe = C(i(T.Backdrop), "backdrop"), oe = S(
+  ({ children: e, ...t }, o) => /* @__PURE__ */ b(ee, { children: [
+    /* @__PURE__ */ a(Qe, {}),
+    /* @__PURE__ */ a(Ke, { children: /* @__PURE__ */ a(T.Content, { ref: o, ...t, children: e }) })
   ] })
 );
-te.displayName = C.Content.displayName;
-const pr = I(i(te), "content"), Ke = i("div", Se, {
+oe.displayName = T.Content.displayName;
+const hr = C(i(oe), "content"), Je = i("div", ke, {
   defaultProps: {
     role: "group"
   }
-}), gr = ({ isInvalid: e, isRequired: t, ...o }) => {
+}), br = ({ isInvalid: e, isRequired: t, ...o }) => {
   const r = {
     ...e ? { "aria-invalid": !0 } : {},
     ...t ? { "aria-required": !0 } : {}
   };
-  return /* @__PURE__ */ a(Ke, { ...r, ...o });
-}, Qe = i("label", O), mr = (e) => {
-  const [t, o] = O.splitVariantProps(e), [r, l] = j(o), { children: m, className: s, addon: u, ...S } = l, c = O(t);
-  return /* @__PURE__ */ v(Qe, { className: G(c.root, Y(r), s), ...S, children: [
-    m,
-    u ? /* @__PURE__ */ a(i.span, { className: c.addon, children: u }) : null
+  return /* @__PURE__ */ a(Je, { ...r, ...o });
+}, et = i("label", Y), vr = (e) => {
+  const [t, o] = Y.splitVariantProps(e), [r, n] = W(o), { children: p, className: l, addon: u, ...x } = n, d = Y(t);
+  return /* @__PURE__ */ b(et, { className: D(d.root, V(r), l), ...x, children: [
+    p,
+    u ? /* @__PURE__ */ a(i.span, { className: d.addon, children: u }) : null
   ] });
-}, hr = i("p", ke, {
+}, fr = i("p", _e, {
   dataAttr: !0
-}), vr = (e) => {
-  const { as: t = "h2", ...o } = e, r = J(() => i(t, Te), [t]);
+}), yr = (e) => {
+  const { as: t = "h2", ...o } = e, r = X(() => i(t, Ee), [t]);
   return /* @__PURE__ */ a(r, { size: t, ...o });
-}, Je = k((e, t) => {
-  const [o, r] = Z.splitVariantProps(e), [l, m] = j(r), { children: s, className: u, ...S } = m, c = Z(o);
-  return /* @__PURE__ */ v(F.Root, { ref: t, className: G(c.root, Y(l), u), ...S, children: [
-    /* @__PURE__ */ a(F.Control, { className: c.control, children: /* @__PURE__ */ a(F.Thumb, { className: c.thumb }) }),
-    s ? /* @__PURE__ */ a(F.Label, { className: c.label, children: s }) : null,
+}, tt = S((e, t) => {
+  const [o, r] = K.splitVariantProps(e), [n, p] = W(r), { children: l, className: u, ...x } = p, d = K(o);
+  return /* @__PURE__ */ b(F.Root, { ref: t, className: D(d.root, V(n), u), ...x, children: [
+    /* @__PURE__ */ a(F.Control, { className: d.control, children: /* @__PURE__ */ a(F.Thumb, { className: d.thumb }) }),
+    l ? /* @__PURE__ */ a(F.Label, { className: d.label, children: l }) : null,
     /* @__PURE__ */ a(F.HiddenInput, {})
   ] });
 });
-Je.displayName = "Switch";
-const et = (e) => {
-  const { as: t = "p", ...o } = e, r = J(() => i(t, _e), [t]);
+tt.displayName = "Switch";
+const ot = (e) => {
+  const { as: t = "p", ...o } = e, r = X(() => i(t, Re), [t]);
   return /* @__PURE__ */ a(r, { ...o });
-}, br = i(P.textarea, Ee), { withProvider: tt, withContext: V } = L(Re), fr = tt(i(R.Root), "root", {
+}, xr = i(z.textarea, Be), { withProvider: rt, withContext: O } = M(Fe), wr = rt(i(R.Root), "root", {
   defaultProps: {
     lazyMount: !0
   }
-}), yr = V(i(R.Content), "content"), xr = V(i(R.Trigger), "trigger"), ot = V(i(R.Indicator), "indicator"), oe = k(
-  ({ children: e, ...t }, o) => /* @__PURE__ */ v(R.List, { ref: o, ...t, children: [
+}), Ir = O(i(R.Content), "content"), Cr = O(i(R.Trigger), "trigger"), at = O(i(R.Indicator), "indicator"), re = S(
+  ({ children: e, ...t }, o) => /* @__PURE__ */ b(R.List, { ref: o, ...t, children: [
     e,
-    /* @__PURE__ */ a(ot, {})
+    /* @__PURE__ */ a(at, {})
   ] })
 );
-oe.displayName = R.List.displayName;
-const wr = V(i(oe), "list"), rt = ({ children: e, when: t, wrapper: o }) => t === !0 ? o(e) : e, { withProvider: at, withContext: y } = L(Be), it = at(i(b.Root), "root", {
+re.displayName = R.List.displayName;
+const Sr = O(i(re), "list"), it = ({ children: e, when: t, wrapper: o }) => t === !0 ? o(e) : e, { withProvider: nt, withContext: y } = M(De), lt = nt(i(v.Root), "root", {
   defaultProps: {
     loopFocus: !0
   }
-}), nt = y(i(b.ClearTrigger), "clearTrigger"), lt = y(i(b.Content), "content"), st = y(i(b.Control), "control"), dt = y(i(b.Indicator), "indicator"), ct = y(i(b.Item), "item"), ut = y(i(b.ItemIndicator), "itemIndicator"), pt = y(i(b.ItemText), "itemText"), gt = y(i(b.Positioner), "positioner"), mt = y(i(b.Trigger), "trigger"), ht = y(i(b.ValueText), "valueText"), Ir = ({
+}), st = y(i(v.ClearTrigger), "clearTrigger"), dt = y(i(v.Content), "content"), ct = y(i(v.Control), "control"), ut = y(i(v.Indicator), "indicator"), pt = y(i(v.Item), "item"), gt = y(i(v.ItemIndicator), "itemIndicator"), mt = y(i(v.ItemText), "itemText"), ht = y(i(v.Positioner), "positioner"), bt = y(i(v.Trigger), "trigger"), vt = y(i(v.ValueText), "valueText"), Tr = ({
   items: e,
   placeholder: t,
   emptyLabel: o,
   usePortal: r = !0,
-  positioning: l,
-  ...m
-}) => /* @__PURE__ */ v(
-  it,
+  positioning: n,
+  ...p
+}) => /* @__PURE__ */ b(
+  lt,
   {
     lazyMount: !0,
     unmountOnExit: !0,
     items: e,
-    positioning: { sameWidth: !0, gutter: 0, ...l },
+    positioning: { sameWidth: !0, gutter: 0, ...n },
     "data-recipe": "select",
-    ...m,
+    ...p,
     children: [
-      /* @__PURE__ */ a(st, { children: /* @__PURE__ */ v(mt, { children: [
-        /* @__PURE__ */ a(ht, { truncate: !0, placeholder: t }),
-        /* @__PURE__ */ a(nt, { asChild: !0, children: /* @__PURE__ */ a(i.svg, { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ a(
+      /* @__PURE__ */ a(ct, { children: /* @__PURE__ */ b(bt, { children: [
+        /* @__PURE__ */ a(vt, { truncate: !0, placeholder: t }),
+        /* @__PURE__ */ a(st, { asChild: !0, children: /* @__PURE__ */ a(i.svg, { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ a(
           "path",
           {
             d: "M9.99996 1.66669C5.39163 1.66669 1.66663 5.39169 1.66663 10C1.66663 14.6084 5.39163 18.3334 9.99996 18.3334C14.6083 18.3334 18.3333 14.6084 18.3333 10C18.3333 5.39169 14.6083 1.66669 9.99996 1.66669ZM9.99996 16.6667C6.32496 16.6667 3.33329 13.675 3.33329 10C3.33329 6.32502 6.32496 3.33335 9.99996 3.33335C13.675 3.33335 16.6666 6.32502 16.6666 10C16.6666 13.675 13.675 16.6667 9.99996 16.6667ZM12.9916 5.83335L9.99996 8.82502L7.00829 5.83335L5.83329 7.00835L8.82496 10L5.83329 12.9917L7.00829 14.1667L9.99996 11.175L12.9916 14.1667L14.1666 12.9917L11.175 10L14.1666 7.00835L12.9916 5.83335Z",
             fill: "currentColor"
           }
         ) }) }),
-        /* @__PURE__ */ a(dt, { asChild: !0, children: /* @__PURE__ */ a(i.svg, { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ a(
+        /* @__PURE__ */ a(ut, { asChild: !0, children: /* @__PURE__ */ a(i.svg, { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ a(
           "path",
           {
             d: "M7.41 8.29498L12 12.875L16.59 8.29498L18 9.70498L12 15.705L6 9.70498L7.41 8.29498Z",
@@ -170,23 +170,32 @@ const wr = V(i(oe), "list"), rt = ({ children: e, when: t, wrapper: o }) => t ==
           }
         ) }) })
       ] }) }),
-      /* @__PURE__ */ a(rt, { when: r, wrapper: (s) => /* @__PURE__ */ a(Q, { children: s }), children: /* @__PURE__ */ a(gt, { children: /* @__PURE__ */ a(lt, { children: e.length === 0 ? /* @__PURE__ */ a(et, { px: "space-8", textAlign: "center", children: o ?? "Aucun résultat" }) : e.map((s) => /* @__PURE__ */ v(ct, { item: s, children: [
-        /* @__PURE__ */ a(pt, { truncate: !0, children: s.label }),
-        m.multiple ? /* @__PURE__ */ a(ut, { children: "✓" }) : null
-      ] }, s.value)) }) }) }),
-      /* @__PURE__ */ a(b.HiddenSelect, {})
+      /* @__PURE__ */ a(it, { when: r, wrapper: (l) => /* @__PURE__ */ a(ee, { children: l }), children: /* @__PURE__ */ a(ht, { children: /* @__PURE__ */ a(dt, { children: e.length === 0 ? /* @__PURE__ */ a(ot, { px: "space-8", textAlign: "center", children: o ?? "Aucun résultat" }) : e.map((l) => /* @__PURE__ */ b(pt, { item: l, children: [
+        /* @__PURE__ */ a(mt, { truncate: !0, children: l.label }),
+        p.multiple ? /* @__PURE__ */ a(gt, { children: "✓" }) : null
+      ] }, l.value)) }) }) }),
+      /* @__PURE__ */ a(v.HiddenSelect, {})
     ]
   }
-), Cr = i("input", Fe, {
+), kr = i("input", $e, {
   dataAttr: !0
-}), Sr = i("div", $e, {
+}), _r = i("div", ze, {
   dataAttr: !0
-}), kr = i("div", De), vt = {
+}), Er = i("div", Ae), Rr = (e) => {
+  const { as: t = "div", ...o } = e, r = X(() => i(t), [t]);
+  return /* @__PURE__ */ a(r, { ...o });
+}, Br = S((e, t) => {
+  const [o, r] = Q.splitVariantProps(e), [n, p] = W(r), { children: l, className: u, ...x } = p, d = Q(o);
+  return /* @__PURE__ */ b(z.div, { ref: t, className: D(d.root, V(n), u), ...x, children: [
+    l,
+    /* @__PURE__ */ a(Ie, { className: D(d.badge) })
+  ] });
+}), ft = {
   xl: "1536px",
   lg: "1200px",
   md: "900px",
   sm: "600px"
-}, bt = {
+}, yt = {
   extend: {
     checked: "&:where(:checked, [data-checked], [aria-checked=true], [data-state=checked])",
     closed: "&:where([data-state=closed])",
@@ -204,7 +213,7 @@ const wr = V(i(oe), "list"), rt = ({ children: e, when: t, wrapper: o }) => t ==
     today: "&:where([data-today])",
     underValue: '&:where([data-state="under-value"])'
   }
-}, ft = {
+}, xt = {
   "2xl": "672px",
   "3xl": "768px",
   "4xl": "896px",
@@ -217,7 +226,7 @@ const wr = V(i(oe), "list"), rt = ({ children: e, when: t, wrapper: o }) => t ==
   sm: "384px",
   xl: "576px",
   xs: "320px"
-}, yt = Pe({
+}, wt = We({
   blob: {
     "0%": {
       rotate: "0deg"
@@ -335,7 +344,7 @@ const wr = V(i(oe), "list"), rt = ({ children: e, when: t, wrapper: o }) => t ==
       transform: "rotate(360deg)"
     }
   }
-}), xt = w({
+}), It = I({
   base: {
     _focusVisible: {
       ring: "2px solid {colors.primary.200}",
@@ -526,7 +535,7 @@ const wr = V(i(oe), "list"), rt = ({ children: e, when: t, wrapper: o }) => t ==
       }
     }
   ]
-}), wt = w({
+}), Ct = I({
   className: "heading",
   defaultVariants: {
     size: "h2"
@@ -557,14 +566,14 @@ const wr = V(i(oe), "list"), rt = ({ children: e, when: t, wrapper: o }) => t ==
     }
   }
 });
-var x = (e, t = []) => ({
+var w = (e, t = []) => ({
   parts: (...o) => {
-    if (It(t))
-      return x(e, o);
+    if (St(t))
+      return w(e, o);
     throw new Error("createAnatomy().parts(...) should only be called once. Did you mean to use .extendWith(...) ?");
   },
-  extendWith: (...o) => x(e, [...t, ...o]),
-  rename: (o) => x(o, t),
+  extendWith: (...o) => w(e, [...t, ...o]),
+  rename: (o) => w(o, t),
   keys: () => t,
   build: () => [...new Set(t)].reduce(
     (o, r) => Object.assign(o, {
@@ -578,36 +587,36 @@ var x = (e, t = []) => ({
     }),
     {}
   )
-}), E = (e) => e.replace(/([A-Z])([A-Z])/g, "$1-$2").replace(/([a-z])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase(), It = (e) => e.length === 0, Ct = (e) => e.nodeType === Node.DOCUMENT_NODE, St = (e) => e != null && e === e.window;
-function kt(e) {
-  return Ct(e) ? e : St(e) ? e.document : (e == null ? void 0 : e.ownerDocument) ?? document;
+}), E = (e) => e.replace(/([A-Z])([A-Z])/g, "$1-$2").replace(/([a-z])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase(), St = (e) => e.length === 0, Tt = (e) => e.nodeType === Node.DOCUMENT_NODE, kt = (e) => e != null && e === e.window;
+function _t(e) {
+  return Tt(e) ? e : kt(e) ? e.document : (e == null ? void 0 : e.ownerDocument) ?? document;
 }
-var re = (e) => e.id;
-function Tt(e, t, o = re) {
+var ae = (e) => e.id;
+function Et(e, t, o = ae) {
   return e.find((r) => o(r) === t);
 }
-function ae(e, t, o = re) {
-  const r = Tt(e, t, o);
+function ie(e, t, o = ae) {
+  const r = Et(e, t, o);
   return r ? e.indexOf(r) : -1;
 }
-function _t(e, t, o = !0) {
-  let r = ae(e, t);
+function Rt(e, t, o = !0) {
+  let r = ie(e, t);
   return r = o ? (r + 1) % e.length : Math.min(r + 1, e.length - 1), e[r];
 }
-function Et(e, t, o = !0) {
-  let r = ae(e, t);
+function Bt(e, t, o = !0) {
+  let r = ie(e, t);
   return r === -1 ? o ? e[e.length - 1] : null : (r = o ? (r - 1 + e.length) % e.length : Math.max(0, r - 1), e[r]);
 }
-function Rt(e, t) {
+function Ft(e, t) {
   return Array.from((e == null ? void 0 : e.querySelectorAll(t)) ?? []);
 }
-function Bt(e) {
+function Dt(e) {
   const t = {
     getRootNode: (o) => {
       var r;
       return ((r = o.getRootNode) == null ? void 0 : r.call(o)) ?? document;
     },
-    getDoc: (o) => kt(t.getRootNode(o)),
+    getDoc: (o) => _t(t.getRootNode(o)),
     getWin: (o) => t.getDoc(o).defaultView ?? window,
     getActiveElement: (o) => t.getDoc(o).activeElement,
     isActiveElement: (o, r) => r === t.getActiveElement(o),
@@ -615,15 +624,15 @@ function Bt(e) {
     setValue: (o, r) => {
       if (o == null || r == null)
         return;
-      const l = r.toString();
-      o.value !== l && (o.value = r.toString());
+      const n = r.toString();
+      o.value !== n && (o.value = r.toString());
     }
   };
   return { ...t, ...e };
 }
-var ie = (e) => e[0], ne = (e) => e[e.length - 1], le = () => (e) => Array.from(new Set(e)), se = x("accordion").parts("root", "item", "itemTrigger", "itemContent", "itemIndicator");
-se.build();
-var f = Bt({
+var ne = (e) => e[0], le = (e) => e[e.length - 1], se = () => (e) => Array.from(new Set(e)), de = w("accordion").parts("root", "item", "itemTrigger", "itemContent", "itemIndicator");
+de.build();
+var f = Dt({
   getRootId: (e) => {
     var t;
     return ((t = e.ids) == null ? void 0 : t.root) ?? `accordion:${e.id}`;
@@ -643,14 +652,14 @@ var f = Bt({
   getRootEl: (e) => f.getById(e, f.getRootId(e)),
   getTriggers: (e) => {
     const o = `[aria-controls][data-ownedby='${CSS.escape(f.getRootId(e))}']:not([disabled])`;
-    return Rt(f.getRootEl(e), o);
+    return Ft(f.getRootEl(e), o);
   },
-  getFirstTriggerEl: (e) => ie(f.getTriggers(e)),
-  getLastTriggerEl: (e) => ne(f.getTriggers(e)),
-  getNextTriggerEl: (e, t) => _t(f.getTriggers(e), f.getItemTriggerId(e, t)),
-  getPrevTriggerEl: (e, t) => Et(f.getTriggers(e), f.getItemTriggerId(e, t))
+  getFirstTriggerEl: (e) => ne(f.getTriggers(e)),
+  getLastTriggerEl: (e) => le(f.getTriggers(e)),
+  getNextTriggerEl: (e, t) => Rt(f.getTriggers(e), f.getItemTriggerId(e, t)),
+  getPrevTriggerEl: (e, t) => Bt(f.getTriggers(e), f.getItemTriggerId(e, t))
 });
-le()([
+se()([
   "collapsible",
   "dir",
   "disabled",
@@ -663,18 +672,18 @@ le()([
   "orientation",
   "value"
 ]);
-le()(["value", "disabled"]);
-var Ft = (e) => e.nodeType === Node.DOCUMENT_NODE, $t = (e) => e != null && e === e.window;
-function Dt(e) {
-  return Ft(e) ? e : $t(e) ? e.document : (e == null ? void 0 : e.ownerDocument) ?? document;
+se()(["value", "disabled"]);
+var $t = (e) => e.nodeType === Node.DOCUMENT_NODE, zt = (e) => e != null && e === e.window;
+function At(e) {
+  return $t(e) ? e : zt(e) ? e.document : (e == null ? void 0 : e.ownerDocument) ?? document;
 }
-function zt(e) {
+function Nt(e) {
   const t = {
     getRootNode: (o) => {
       var r;
       return ((r = o.getRootNode) == null ? void 0 : r.call(o)) ?? document;
     },
-    getDoc: (o) => Dt(t.getRootNode(o)),
+    getDoc: (o) => At(t.getRootNode(o)),
     getWin: (o) => t.getDoc(o).defaultView ?? window,
     getActiveElement: (o) => t.getDoc(o).activeElement,
     isActiveElement: (o, r) => r === t.getActiveElement(o),
@@ -682,15 +691,15 @@ function zt(e) {
     setValue: (o, r) => {
       if (o == null || r == null)
         return;
-      const l = r.toString();
-      o.value !== l && (o.value = r.toString());
+      const n = r.toString();
+      o.value !== n && (o.value = r.toString());
     }
   };
   return { ...t, ...e };
 }
-var At = () => (e) => Array.from(new Set(e)), de = x("checkbox").parts("root", "label", "control", "indicator");
-de.build();
-var z = zt({
+var Pt = () => (e) => Array.from(new Set(e)), ce = w("checkbox").parts("root", "label", "control", "indicator");
+ce.build();
+var N = Nt({
   getRootId: (e) => {
     var t;
     return ((t = e.ids) == null ? void 0 : t.root) ?? `checkbox:${e.id}`;
@@ -707,10 +716,10 @@ var z = zt({
     var t;
     return ((t = e.ids) == null ? void 0 : t.hiddenInput) ?? `checkbox:${e.id}:hidden`;
   },
-  getRootEl: (e) => z.getById(e, z.getRootId(e)),
-  getHiddenInputEl: (e) => z.getById(e, z.getHiddenInputId(e))
+  getRootEl: (e) => N.getById(e, N.getRootId(e)),
+  getHiddenInputEl: (e) => N.getById(e, N.getHiddenInputId(e))
 });
-At()([
+Pt()([
   "checked",
   "dir",
   "disabled",
@@ -725,17 +734,17 @@ At()([
   "required",
   "value"
 ]);
-var Nt = (e) => e.nodeType === Node.DOCUMENT_NODE, Pt = (e) => e != null && e === e.window;
-function Lt(e) {
-  return Nt(e) ? e : Pt(e) ? e.document : (e == null ? void 0 : e.ownerDocument) ?? document;
+var Lt = (e) => e.nodeType === Node.DOCUMENT_NODE, Wt = (e) => e != null && e === e.window;
+function Vt(e) {
+  return Lt(e) ? e : Wt(e) ? e.document : (e == null ? void 0 : e.ownerDocument) ?? document;
 }
-function Wt(e) {
+function Mt(e) {
   const t = {
     getRootNode: (o) => {
       var r;
       return ((r = o.getRootNode) == null ? void 0 : r.call(o)) ?? document;
     },
-    getDoc: (o) => Lt(t.getRootNode(o)),
+    getDoc: (o) => Vt(t.getRootNode(o)),
     getWin: (o) => t.getDoc(o).defaultView ?? window,
     getActiveElement: (o) => t.getDoc(o).activeElement,
     isActiveElement: (o, r) => r === t.getActiveElement(o),
@@ -743,13 +752,13 @@ function Wt(e) {
     setValue: (o, r) => {
       if (o == null || r == null)
         return;
-      const l = r.toString();
-      o.value !== l && (o.value = r.toString());
+      const n = r.toString();
+      o.value !== n && (o.value = r.toString());
     }
   };
   return { ...t, ...e };
 }
-var Vt = () => (e) => Array.from(new Set(e)), ce = x("dialog").parts(
+var Ht = () => (e) => Array.from(new Set(e)), ue = w("dialog").parts(
   "trigger",
   "backdrop",
   "positioner",
@@ -758,8 +767,8 @@ var Vt = () => (e) => Array.from(new Set(e)), ce = x("dialog").parts(
   "description",
   "closeTrigger"
 );
-ce.build();
-var p = Wt({
+ue.build();
+var g = Mt({
   getPositionerId: (e) => {
     var t;
     return ((t = e.ids) == null ? void 0 : t.positioner) ?? `dialog:${e.id}:positioner`;
@@ -788,15 +797,15 @@ var p = Wt({
     var t;
     return ((t = e.ids) == null ? void 0 : t.closeTrigger) ?? `dialog:${e.id}:close`;
   },
-  getContentEl: (e) => p.getById(e, p.getContentId(e)),
-  getPositionerEl: (e) => p.getById(e, p.getPositionerId(e)),
-  getBackdropEl: (e) => p.getById(e, p.getBackdropId(e)),
-  getTriggerEl: (e) => p.getById(e, p.getTriggerId(e)),
-  getTitleEl: (e) => p.getById(e, p.getTitleId(e)),
-  getDescriptionEl: (e) => p.getById(e, p.getDescriptionId(e)),
-  getCloseTriggerEl: (e) => p.getById(e, p.getCloseTriggerId(e))
+  getContentEl: (e) => g.getById(e, g.getContentId(e)),
+  getPositionerEl: (e) => g.getById(e, g.getPositionerId(e)),
+  getBackdropEl: (e) => g.getById(e, g.getBackdropId(e)),
+  getTriggerEl: (e) => g.getById(e, g.getTriggerId(e)),
+  getTitleEl: (e) => g.getById(e, g.getTitleId(e)),
+  getDescriptionEl: (e) => g.getById(e, g.getDescriptionId(e)),
+  getCloseTriggerEl: (e) => g.getById(e, g.getCloseTriggerId(e))
 });
-Vt()([
+Ht()([
   "aria-label",
   "closeOnEscape",
   "closeOnInteractOutside",
@@ -822,17 +831,17 @@ Vt()([
   "role",
   "trapFocus"
 ]);
-var Mt = (e) => e.nodeType === Node.DOCUMENT_NODE, Ht = (e) => e != null && e === e.window;
-function Ot(e) {
-  return Mt(e) ? e : Ht(e) ? e.document : (e == null ? void 0 : e.ownerDocument) ?? document;
+var Ot = (e) => e.nodeType === Node.DOCUMENT_NODE, jt = (e) => e != null && e === e.window;
+function Gt(e) {
+  return Ot(e) ? e : jt(e) ? e.document : (e == null ? void 0 : e.ownerDocument) ?? document;
 }
-function jt(e) {
+function Yt(e) {
   const t = {
     getRootNode: (o) => {
       var r;
       return ((r = o.getRootNode) == null ? void 0 : r.call(o)) ?? document;
     },
-    getDoc: (o) => Ot(t.getRootNode(o)),
+    getDoc: (o) => Gt(t.getRootNode(o)),
     getWin: (o) => t.getDoc(o).defaultView ?? window,
     getActiveElement: (o) => t.getDoc(o).activeElement,
     isActiveElement: (o, r) => r === t.getActiveElement(o),
@@ -840,13 +849,13 @@ function jt(e) {
     setValue: (o, r) => {
       if (o == null || r == null)
         return;
-      const l = r.toString();
-      o.value !== l && (o.value = r.toString());
+      const n = r.toString();
+      o.value !== n && (o.value = r.toString());
     }
   };
   return { ...t, ...e };
 }
-var M = () => (e) => Array.from(new Set(e)), ue = x("select").parts(
+var j = () => (e) => Array.from(new Set(e)), pe = w("select").parts(
   "label",
   "positioner",
   "trigger",
@@ -861,8 +870,8 @@ var M = () => (e) => Array.from(new Set(e)), ue = x("select").parts(
   "root",
   "control"
 );
-ue.build();
-var g = jt({
+pe.build();
+var m = Yt({
   getRootId: (e) => {
     var t;
     return ((t = e.ids) == null ? void 0 : t.root) ?? `select:${e.id}`;
@@ -907,17 +916,17 @@ var g = jt({
     var o, r;
     return ((r = (o = e.ids) == null ? void 0 : o.itemGroupLabel) == null ? void 0 : r.call(o, t)) ?? `select:${e.id}:optgroup-label:${t}`;
   },
-  getHiddenSelectEl: (e) => g.getById(e, g.getHiddenSelectId(e)),
-  getContentEl: (e) => g.getById(e, g.getContentId(e)),
-  getControlEl: (e) => g.getById(e, g.getControlId(e)),
-  getTriggerEl: (e) => g.getById(e, g.getTriggerId(e)),
-  getClearTriggerEl: (e) => g.getById(e, g.getClearTriggerId(e)),
-  getPositionerEl: (e) => g.getById(e, g.getPositionerId(e)),
+  getHiddenSelectEl: (e) => m.getById(e, m.getHiddenSelectId(e)),
+  getContentEl: (e) => m.getById(e, m.getContentId(e)),
+  getControlEl: (e) => m.getById(e, m.getControlId(e)),
+  getTriggerEl: (e) => m.getById(e, m.getTriggerId(e)),
+  getClearTriggerEl: (e) => m.getById(e, m.getClearTriggerId(e)),
+  getPositionerEl: (e) => m.getById(e, m.getPositionerId(e)),
   getHighlightedOptionEl(e) {
-    return e.highlightedValue ? g.getById(e, g.getItemId(e, e.highlightedValue)) : null;
+    return e.highlightedValue ? m.getById(e, m.getItemId(e, e.highlightedValue)) : null;
   }
 });
-M()([
+j()([
   "closeOnSelect",
   "collection",
   "dir",
@@ -945,21 +954,21 @@ M()([
   "scrollToIndexFn",
   "value"
 ]);
-M()(["item", "persistFocus"]);
-M()(["id"]);
-M()(["htmlFor"]);
-const Gt = ue.extendWith("valueText");
-var Yt = (e) => e.nodeType === Node.DOCUMENT_NODE, Xt = (e) => e != null && e === e.window;
-function Ut(e) {
-  return Yt(e) ? e : Xt(e) ? e.document : (e == null ? void 0 : e.ownerDocument) ?? document;
+j()(["item", "persistFocus"]);
+j()(["id"]);
+j()(["htmlFor"]);
+const Xt = pe.extendWith("valueText");
+var Ut = (e) => e.nodeType === Node.DOCUMENT_NODE, qt = (e) => e != null && e === e.window;
+function Zt(e) {
+  return Ut(e) ? e : qt(e) ? e.document : (e == null ? void 0 : e.ownerDocument) ?? document;
 }
-function qt(e) {
+function Kt(e) {
   const t = {
     getRootNode: (o) => {
       var r;
       return ((r = o.getRootNode) == null ? void 0 : r.call(o)) ?? document;
     },
-    getDoc: (o) => Ut(t.getRootNode(o)),
+    getDoc: (o) => Zt(t.getRootNode(o)),
     getWin: (o) => t.getDoc(o).defaultView ?? window,
     getActiveElement: (o) => t.getDoc(o).activeElement,
     isActiveElement: (o, r) => r === t.getActiveElement(o),
@@ -967,15 +976,15 @@ function qt(e) {
     setValue: (o, r) => {
       if (o == null || r == null)
         return;
-      const l = r.toString();
-      o.value !== l && (o.value = r.toString());
+      const n = r.toString();
+      o.value !== n && (o.value = r.toString());
     }
   };
   return { ...t, ...e };
 }
-var Zt = () => (e) => Array.from(new Set(e)), pe = x("switch").parts("root", "label", "control", "thumb");
-pe.build();
-var A = qt({
+var Qt = () => (e) => Array.from(new Set(e)), ge = w("switch").parts("root", "label", "control", "thumb");
+ge.build();
+var P = Kt({
   getRootId: (e) => {
     var t;
     return ((t = e.ids) == null ? void 0 : t.root) ?? `switch:${e.id}`;
@@ -992,14 +1001,14 @@ var A = qt({
     var t;
     return ((t = e.ids) == null ? void 0 : t.control) ?? `switch:${e.id}:control`;
   },
-  getRootEl: (e) => A.getById(e, A.getRootId(e)),
+  getRootEl: (e) => P.getById(e, P.getRootId(e)),
   getHiddenInputId: (e) => {
     var t;
     return ((t = e.ids) == null ? void 0 : t.input) ?? `switch:${e.id}:input`;
   },
-  getHiddenInputEl: (e) => A.getById(e, A.getHiddenInputId(e))
+  getHiddenInputEl: (e) => P.getById(e, P.getHiddenInputId(e))
 });
-Zt()([
+Qt()([
   "checked",
   "dir",
   "disabled",
@@ -1015,36 +1024,36 @@ Zt()([
   "required",
   "value"
 ]);
-var Kt = (e) => e.nodeType === Node.DOCUMENT_NODE, Qt = (e) => e != null && e === e.window;
-function Jt(e) {
-  return Kt(e) ? e : Qt(e) ? e.document : (e == null ? void 0 : e.ownerDocument) ?? document;
+var Jt = (e) => e.nodeType === Node.DOCUMENT_NODE, eo = (e) => e != null && e === e.window;
+function to(e) {
+  return Jt(e) ? e : eo(e) ? e.document : (e == null ? void 0 : e.ownerDocument) ?? document;
 }
-var ge = (e) => e.id;
-function me(e, t, o = ge) {
+var me = (e) => e.id;
+function he(e, t, o = me) {
   return e.find((r) => o(r) === t);
 }
-function he(e, t, o = ge) {
-  const r = me(e, t, o);
+function be(e, t, o = me) {
+  const r = he(e, t, o);
   return r ? e.indexOf(r) : -1;
 }
-function eo(e, t, o = !0) {
-  let r = he(e, t);
+function oo(e, t, o = !0) {
+  let r = be(e, t);
   return r = o ? (r + 1) % e.length : Math.min(r + 1, e.length - 1), e[r];
 }
-function to(e, t, o = !0) {
-  let r = he(e, t);
+function ro(e, t, o = !0) {
+  let r = be(e, t);
   return r === -1 ? o ? e[e.length - 1] : null : (r = o ? (r - 1 + e.length) % e.length : Math.max(0, r - 1), e[r]);
 }
-function oo(e, t) {
+function ao(e, t) {
   return Array.from((e == null ? void 0 : e.querySelectorAll(t)) ?? []);
 }
-function ro(e) {
+function io(e) {
   const t = {
     getRootNode: (o) => {
       var r;
       return ((r = o.getRootNode) == null ? void 0 : r.call(o)) ?? document;
     },
-    getDoc: (o) => Jt(t.getRootNode(o)),
+    getDoc: (o) => to(t.getRootNode(o)),
     getWin: (o) => t.getDoc(o).defaultView ?? window,
     getActiveElement: (o) => t.getDoc(o).activeElement,
     isActiveElement: (o, r) => r === t.getActiveElement(o),
@@ -1052,15 +1061,15 @@ function ro(e) {
     setValue: (o, r) => {
       if (o == null || r == null)
         return;
-      const l = r.toString();
-      o.value !== l && (o.value = r.toString());
+      const n = r.toString();
+      o.value !== n && (o.value = r.toString());
     }
   };
   return { ...t, ...e };
 }
-var X = () => (e) => Array.from(new Set(e)), ve = x("tabs").parts("root", "list", "trigger", "content", "indicator");
+var U = () => (e) => Array.from(new Set(e)), ve = w("tabs").parts("root", "list", "trigger", "content", "indicator");
 ve.build();
-var n = ro({
+var s = io({
   getRootId: (e) => {
     var t;
     return ((t = e.ids) == null ? void 0 : t.root) ?? `tabs:${e.id}`;
@@ -1081,25 +1090,25 @@ var n = ro({
     var t;
     return ((t = e.ids) == null ? void 0 : t.indicator) ?? `tabs:${e.id}:indicator`;
   },
-  getListEl: (e) => n.getById(e, n.getListId(e)),
-  getContentEl: (e, t) => n.getById(e, n.getContentId(e, t)),
-  getTriggerEl: (e, t) => n.getById(e, n.getTriggerId(e, t)),
-  getIndicatorEl: (e) => n.getById(e, n.getIndicatorId(e)),
+  getListEl: (e) => s.getById(e, s.getListId(e)),
+  getContentEl: (e, t) => s.getById(e, s.getContentId(e, t)),
+  getTriggerEl: (e, t) => s.getById(e, s.getTriggerId(e, t)),
+  getIndicatorEl: (e) => s.getById(e, s.getIndicatorId(e)),
   getElements: (e) => {
-    const o = `[role=tab][data-ownedby='${CSS.escape(n.getListId(e))}']:not([disabled])`;
-    return oo(n.getListEl(e), o);
+    const o = `[role=tab][data-ownedby='${CSS.escape(s.getListId(e))}']:not([disabled])`;
+    return ao(s.getListEl(e), o);
   },
-  getFirstTriggerEl: (e) => ie(n.getElements(e)),
-  getLastTriggerEl: (e) => ne(n.getElements(e)),
-  getNextTriggerEl: (e, t) => eo(n.getElements(e), n.getTriggerId(e, t), e.loopFocus),
-  getPrevTriggerEl: (e, t) => to(n.getElements(e), n.getTriggerId(e, t), e.loopFocus),
+  getFirstTriggerEl: (e) => ne(s.getElements(e)),
+  getLastTriggerEl: (e) => le(s.getElements(e)),
+  getNextTriggerEl: (e, t) => oo(s.getElements(e), s.getTriggerId(e, t), e.loopFocus),
+  getPrevTriggerEl: (e, t) => ro(s.getElements(e), s.getTriggerId(e, t), e.loopFocus),
   getSelectedContentEl: (e) => {
     if (e.value)
-      return n.getContentEl(e, e.value);
+      return s.getContentEl(e, e.value);
   },
   getSelectedTriggerEl: (e) => {
     if (e.value)
-      return n.getTriggerEl(e, e.value);
+      return s.getTriggerEl(e, e.value);
   },
   getOffsetRect: (e) => ({
     left: (e == null ? void 0 : e.offsetLeft) ?? 0,
@@ -1108,8 +1117,8 @@ var n = ro({
     height: (e == null ? void 0 : e.offsetHeight) ?? 0
   }),
   getRectById: (e, t) => {
-    const o = me(n.getElements(e), n.getTriggerId(e, t));
-    return n.resolveRect(n.getOffsetRect(o));
+    const o = he(s.getElements(e), s.getTriggerId(e, t));
+    return s.resolveRect(s.getOffsetRect(o));
   },
   resolveRect: (e) => ({
     width: `${e.width}px`,
@@ -1118,7 +1127,7 @@ var n = ro({
     top: `${e.top}px`
   })
 });
-X()([
+U()([
   "activationMode",
   "composite",
   "dir",
@@ -1132,9 +1141,9 @@ X()([
   "translations",
   "value"
 ]);
-X()(["disabled", "value"]);
-X()(["value"]);
-const ao = T({
+U()(["disabled", "value"]);
+U()(["value"]);
+const no = k({
   base: {
     control: {
       _focus: {
@@ -1194,7 +1203,7 @@ const ao = T({
     size: "md"
   },
   jsx: ["Switch", "SwitchField"],
-  slots: pe.keys(),
+  slots: ge.keys(),
   variants: {
     size: {
       md: {
@@ -1216,7 +1225,7 @@ const ao = T({
       }
     }
   }
-}), io = w({
+}), lo = I({
   className: "text",
   defaultVariants: {
     size: "md"
@@ -1249,7 +1258,7 @@ const ao = T({
       sm: { textStyle: "body.sm" }
     }
   }
-}), be = w({
+}), fe = I({
   base: {
     '&[type="time"]::-webkit-calendar-picker-indicator': {
       display: "none"
@@ -1303,15 +1312,15 @@ const ao = T({
       }
     }
   }
-}), no = w({
+}), so = I({
   className: "textarea",
   jsx: ["Textarea"],
   base: {
     px: "space-16",
     py: "space-8",
-    ...be.base
+    ...fe.base
   }
-}), lo = w({
+}), co = I({
   base: {
     _invalid: {
       '& [data-recipe="formHelperText"]': {
@@ -1341,7 +1350,7 @@ const ao = T({
   className: "form-control",
   description: "The styles for the FormControl component",
   jsx: ["FormControl"]
-}), so = w({
+}), uo = I({
   base: {
     color: "grey.400",
     fontFamily: "satoshi",
@@ -1350,9 +1359,9 @@ const ao = T({
   className: "form-helper-text",
   description: "The styles for the FormHelperText component",
   jsx: ["FormHelperText"]
-}), co = ce.extendWith("header", "body", "footer"), uo = T({
+}), po = ue.extendWith("header", "body", "footer"), go = k({
   className: "drawer",
-  slots: co.keys(),
+  slots: po.keys(),
   jsx: ["Drawer"],
   base: {
     backdrop: {
@@ -1470,10 +1479,10 @@ const ao = T({
       }
     }
   }
-}), po = T({
+}), mo = k({
   className: "accordion",
   jsx: ["Accordion"],
-  slots: se.keys(),
+  slots: de.keys(),
   base: {
     root: {
       display: "flex",
@@ -1574,7 +1583,7 @@ const ao = T({
       }
     }
   }
-}), go = T({
+}), ho = k({
   base: {
     root: { color: "grey.400", fontFamily: "satoshi", textStyle: "body.sm" },
     addon: {
@@ -1604,9 +1613,9 @@ const ao = T({
   className: "form-label",
   description: "The styles for the FormLabel component",
   jsx: ["FormLabel"]
-}), mo = T({
+}), bo = k({
   className: "checkbox",
-  slots: de.keys(),
+  slots: ce.keys(),
   jsx: ["Checkbox"],
   base: {
     root: {
@@ -1722,7 +1731,7 @@ const ao = T({
       }
     }
   }
-}), ho = T({
+}), vo = k({
   className: "tabs",
   slots: ve.keys(),
   base: {
@@ -1828,7 +1837,7 @@ const ao = T({
       }
     }
   }
-}), vo = T({
+}), fo = k({
   base: {
     control: {
       fontFamily: "satoshi"
@@ -1959,7 +1968,7 @@ const ao = T({
     size: "md"
   },
   jsx: ["Select"],
-  slots: Gt.keys(),
+  slots: Xt.keys(),
   variants: {
     size: {
       md: {
@@ -1975,7 +1984,7 @@ const ao = T({
       }
     }
   }
-}), bo = w({
+}), yo = I({
   base: {
     alignItems: "center",
     borderRadius: "inherit",
@@ -1988,7 +1997,7 @@ const ao = T({
   className: "input-addon",
   description: "The styles for the InputAddon component",
   jsx: ["InputAddon"]
-}), fo = w({
+}), xo = I({
   base: {
     '& [data-recipe="input"]': {
       border: {
@@ -2028,25 +2037,131 @@ const ao = T({
   className: "input-group",
   description: "The styles for the InputGroup component",
   jsx: ["InputGroup"]
-}), yo = {
-  button: xt,
-  heading: wt,
-  switchRecipe: ao,
-  text: io,
-  textarea: no,
-  formControl: lo,
-  formHelperText: so,
-  input: be,
-  inputAddon: bo,
-  inputGroup: fo
-}, xo = {
-  drawer: uo,
-  accordion: po,
-  formLabel: go,
-  checkbox: mo,
-  tabs: ho,
-  select: vo
-}, wo = Le.colors({
+}), wo = k({
+  base: {
+    root: {
+      fontFamily: "satoshi",
+      borderRadius: "radius-28",
+      borderStyle: "solid",
+      display: "inline-flex",
+      flexDirection: "row",
+      alignItems: "center",
+      gap: "space-8"
+    }
+  },
+  slots: ["root", "badge"],
+  className: "tag",
+  defaultVariants: {
+    size: "md",
+    severity: "neutral"
+  },
+  description: "The styles for the Tag component",
+  jsx: ["Tag"],
+  variants: {
+    size: {
+      lg: {
+        root: {
+          borderWidth: 2,
+          textStyle: "body.lg",
+          fontWeight: "bold",
+          py: "space-8",
+          px: "space-16"
+        },
+        badge: {
+          width: "size-8",
+          height: "size-8"
+        }
+      },
+      md: {
+        root: {
+          borderWidth: 1,
+          textStyle: "body.md",
+          fontWeight: "bold",
+          py: "space-4",
+          px: "space-12"
+        },
+        badge: {
+          width: "size-6",
+          height: "size-6"
+        }
+      },
+      sm: {
+        root: {
+          borderWidth: 1,
+          textStyle: "body.sm",
+          fontWeight: "bold",
+          py: "space-4",
+          px: "space-8"
+        },
+        badge: {
+          width: "size-4",
+          height: "size-4"
+        }
+      }
+    },
+    severity: {
+      success: {
+        root: {
+          bg: "success.100",
+          borderColor: "success.500",
+          color: "success.500"
+        },
+        badge: {
+          bg: "success.500"
+        }
+      },
+      warning: {
+        root: {
+          bg: "warning.100",
+          borderColor: "warning.500",
+          color: "warning.500"
+        },
+        badge: {
+          bg: "warning.500"
+        }
+      },
+      error: {
+        root: {
+          bg: "error.100",
+          borderColor: "error.500",
+          color: "error.500"
+        },
+        badge: {
+          bg: "error.500"
+        }
+      },
+      neutral: {
+        root: {
+          bg: "grey.50",
+          borderColor: "grey.400",
+          color: "grey.400"
+        },
+        badge: {
+          bg: "grey.400"
+        }
+      }
+    }
+  }
+}), Io = {
+  button: It,
+  heading: Ct,
+  switchRecipe: no,
+  text: lo,
+  textarea: so,
+  formControl: co,
+  formHelperText: uo,
+  input: fe,
+  inputAddon: yo,
+  inputGroup: xo
+}, Co = {
+  drawer: go,
+  accordion: mo,
+  formLabel: ho,
+  checkbox: bo,
+  tabs: vo,
+  tag: wo,
+  select: fo
+}, So = Ve.colors({
   decorative: {
     red: {
       light: { value: "#FFB5AD" },
@@ -2145,9 +2260,9 @@ const ao = T({
       value: "{colors.primary.900}"
     }
   }
-}), Io = {
-  colors: wo
-}, Co = We({
+}), To = {
+  colors: So
+}, ko = Me({
   body: {
     lg: {
       value: {
@@ -2230,7 +2345,7 @@ const ao = T({
       }
     }
   }
-}), So = d.animations({
+}), _o = c.animations({
   "backdrop-in": {
     value: "fade-in 250ms {easings.emphasized-in}"
   },
@@ -2271,14 +2386,14 @@ const ao = T({
   "collapse-out": {
     value: "collapse-out 150ms {easings.in-out}"
   }
-}), ko = d.borders({
+}), Eo = c.borders({
   golden: { value: "1.618 / 1" },
   landscape: { value: "4 / 3" },
   portrait: { value: "3 / 4" },
   square: { value: "1 / 1" },
   ultrawide: { value: "18 / 5" },
   wide: { value: "16 / 9" }
-}), To = d.blurs({
+}), Ro = c.blurs({
   "2xl": { value: "40px" },
   "3xl": { value: "64px" },
   base: { value: "8px" },
@@ -2286,11 +2401,11 @@ const ao = T({
   md: { value: "12px" },
   sm: { value: "4px" },
   xl: { value: "24px" }
-}), _o = d.borders({
+}), Bo = c.borders({
   border: {
     none: { value: "none" }
   }
-}), Eo = d.colors({
+}), Fo = c.colors({
   black: { value: "#000" },
   current: { value: "currentColor" },
   transparent: { value: "rgb(0 0 0 / 0)" },
@@ -2362,7 +2477,7 @@ const ao = T({
     200: { value: "#FFEAAC" },
     100: { value: "#FFF9E6" }
   }
-}), Ro = d.durations({
+}), Do = c.durations({
   fast: { value: "150ms" },
   faster: { value: "100ms" },
   fastest: { value: "50ms" },
@@ -2370,7 +2485,7 @@ const ao = T({
   slow: { value: "300ms" },
   slower: { value: "400ms" },
   slowest: { value: "500ms" }
-}), Bo = d.easings({
+}), $o = c.easings({
   default: { value: "cubic-bezier(0.2, 0.0, 0, 1.0)" },
   "ease-bounce-1": {
     value: `linear(
@@ -2458,7 +2573,7 @@ const ao = T({
   linear: { value: "linear" },
   out: { value: "cubic-bezier(0, 0, 0.2, 1)" },
   pulse: { value: "cubic-bezier(0.4, 0.0, 0.6, 1.0)" }
-}), Fo = d.radii({
+}), zo = c.radii({
   "radius-0": { value: "0px" },
   "radius-2": { value: "2px" },
   "radius-4": { value: "4px" },
@@ -2480,7 +2595,7 @@ const ao = T({
   "radius-60": { value: "60px" },
   "radius-64": { value: "64px" },
   full: { value: "9999px" }
-}), $o = d.shadows({
+}), Ao = c.shadows({
   "2xl": { value: "0 25px 50px -12px rgb(0 0 0 / 0.25)" },
   inner: { value: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)" },
   lg: { value: ["0 10px 15px -3px rgb(0 0 0 / 0.1)", "0 4px 6px -4px rgb(0 0 0 / 0.1)"] },
@@ -2488,7 +2603,7 @@ const ao = T({
   sm: { value: ["0 1px 3px 0 rgb(0 0 0 / 0.1)", "0 1px 2px -1px rgb(0 0 0 / 0.1)"] },
   xl: { value: ["0 20px 25px -5px rgb(0 0 0 / 0.1)", "0 8px 10px -6px rgb(0 0 0 / 0.1)"] },
   xs: { value: "0 1px 2px 0 rgb(0 0 0 / 0.05)" }
-}), Do = d.sizes({
+}), No = c.sizes({
   "size-0": {
     value: "0px"
   },
@@ -2565,7 +2680,7 @@ const ao = T({
   "size-80": {
     value: "80px"
   }
-}), zo = d.spacing({
+}), Po = c.spacing({
   "space-0": {
     value: "0px"
   },
@@ -2645,9 +2760,9 @@ const ao = T({
     value: "80px"
   }
 });
-var Ao = "cm,mm,Q,in,pc,pt,px,em,ex,ch,rem,lh,rlh,vw,vh,vmin,vmax,vb,vi,svw,svh,lvw,lvh,dvw,dvh,cqw,cqh,cqi,cqb,cqmin,cqmax,%";
-`${Ao.split(",").join("|")}`;
-var No = {
+var Lo = "cm,mm,Q,in,pc,pt,px,em,ex,ch,rem,lh,rlh,vw,vh,vmin,vmax,vb,vi,svw,svh,lvw,lvh,dvw,dvh,cqw,cqh,cqi,cqb,cqmin,cqmax,%";
+`${Lo.split(",").join("|")}`;
+var Wo = {
   animation: [
     "animationName",
     "animationDuration",
@@ -2758,22 +2873,22 @@ var No = {
   textEmphasis: ["textEmphasisStyle", "textEmphasisColor"],
   transition: ["transitionProperty", "transitionDuration", "transitionTimingFunction", "transitionDelay"]
 };
-Object.values(No).reduce((e, t) => [...e, ...t], []);
-var Po = 16, fe = "px", ye = "em", N = "rem";
-function Lo(e = "") {
-  const t = new RegExp(String.raw`-?\d+(?:\.\d+|\d*)`), o = new RegExp(`${fe}|${ye}|${N}`), r = e.match(new RegExp(`${t.source}(${o.source})`));
+Object.values(Wo).reduce((e, t) => [...e, ...t], []);
+var Vo = 16, ye = "px", xe = "em", L = "rem";
+function Mo(e = "") {
+  const t = new RegExp(String.raw`-?\d+(?:\.\d+|\d*)`), o = new RegExp(`${ye}|${xe}|${L}`), r = e.match(new RegExp(`${t.source}(${o.source})`));
   return r == null ? void 0 : r[1];
 }
 function h(e = "") {
-  const t = Lo(e);
-  if (!t || t === N)
+  const t = Mo(e);
+  if (!t || t === L)
     return e;
+  if (t === xe)
+    return `${parseFloat(e)}${L}`;
   if (t === ye)
-    return `${parseFloat(e)}${N}`;
-  if (t === fe)
-    return `${parseFloat(e) / Po}${N}`;
+    return `${parseFloat(e) / Vo}${L}`;
 }
-const Wo = d.fontSizes({
+const Ho = c.fontSizes({
   body: {
     lg: { value: h("16px") },
     md: { value: h("14px") },
@@ -2795,7 +2910,7 @@ const Wo = d.fontSizes({
       xs: { value: h("18px") }
     }
   }
-}), Vo = d.fontWeights({
+}), Oo = c.fontWeights({
   black: { value: "900" },
   bold: { value: "700" },
   extrabold: { value: "800" },
@@ -2805,14 +2920,14 @@ const Wo = d.fontSizes({
   normal: { value: "400" },
   semibold: { value: "600" },
   thin: { value: "100" }
-}), Mo = d.letterSpacings({
+}), jo = c.letterSpacings({
   normal: { value: "0em" },
   tight: { value: "-0.025em" },
   tighter: { value: "-0.05em" },
   wide: { value: "0.025em" },
   wider: { value: "0.05em" },
   widest: { value: "0.1em" }
-}), Ho = d.lineHeights({}), Oo = d.fonts({
+}), Go = c.lineHeights({}), Yo = c.fonts({
   satoshi: { value: "var(--font-satoshi)" },
   cabinet: { value: "var(--font-cabinet)" },
   mono: {
@@ -2848,7 +2963,7 @@ const Wo = d.fontSizes({
   serif: {
     value: ["ui-serif", "Georgia", "Cambria", '"Times New Roman"', "Times", "serif"]
   }
-}), jo = d.zIndex({
+}), Xo = c.zIndex({
   banner: {
     value: 1200
   },
@@ -2885,82 +3000,84 @@ const Wo = d.fontSizes({
   tooltip: {
     value: 1800
   }
-}), Go = {
-  animations: So,
-  aspectRatios: ko,
-  blurs: To,
-  borders: _o,
-  colors: Eo,
-  durations: Ro,
-  easings: Bo,
-  fontSizes: Wo,
-  fontWeights: Vo,
-  fonts: Oo,
-  letterSpacings: Mo,
-  lineHeights: Ho,
-  radii: Fo,
-  shadows: $o,
-  sizes: Do,
-  spacing: zo,
-  zIndex: jo
-}, Yo = Ve({
+}), Uo = {
+  animations: _o,
+  aspectRatios: Eo,
+  blurs: Ro,
+  borders: Bo,
+  colors: Fo,
+  durations: Do,
+  easings: $o,
+  fontSizes: Ho,
+  fontWeights: Oo,
+  fonts: Yo,
+  letterSpacings: jo,
+  lineHeights: Go,
+  radii: zo,
+  shadows: Ao,
+  sizes: No,
+  spacing: Po,
+  zIndex: Xo
+}, qo = He({
   className: "size",
   transform(e) {
     return { height: e, width: e };
   },
   values: "sizes"
-}), Xo = {
+}), Zo = {
   extend: {
-    boxSize: Yo
+    boxSize: qo
   }
-}, Tr = Me({
+}, Fr = Oe({
   staticCss: {
     recipes: "*"
   },
   theme: {
-    breakpoints: vt,
-    containerSizes: ft,
-    keyframes: yt,
-    recipes: yo,
-    semanticTokens: Io,
-    slotRecipes: xo,
-    textStyles: Co,
-    tokens: Go
-  },
-  utilities: Xo,
-  conditions: bt
+    breakpoints: ft,
+    containerSizes: xt,
+    keyframes: wt,
+    recipes: Io,
+    semanticTokens: To,
+    slotRecipes: Co,
+    textStyles: ko,
+    tokens: Uo
+  },
+  utilities: Zo,
+  conditions: yt
 });
 export {
-  tr as Accordion,
-  or as AccordionItem,
-  rr as AccordionItemContent,
-  ar as AccordionItemIndicator,
-  ir as AccordionItemTrigger,
-  Oe as Button,
-  je as Checkbox,
-  nr as Drawer,
-  lr as DrawerBody,
-  Ue as DrawerCloseTrigger,
-  pr as DrawerContent,
-  sr as DrawerFooter,
-  dr as DrawerHeader,
-  cr as DrawerTitle,
-  ur as DrawerTrigger,
-  gr as FormControl,
-  hr as FormHelperText,
-  mr as FormLabel,
-  vr as Heading,
-  Cr as Input,
-  Sr as InputAddon,
-  kr as InputGroup,
-  Ir as Select,
-  Je as Switch,
-  fr as Tabs,
-  yr as TabsContent,
-  wr as TabsList,
-  xr as TabsTrigger,
-  et as Text,
-  br as Textarea,
-  Tr as preset
+  ar as Accordion,
+  ir as AccordionItem,
+  nr as AccordionItemContent,
+  lr as AccordionItemIndicator,
+  sr as AccordionItemTrigger,
+  Rr as Box,
+  Ge as Button,
+  Ye as Checkbox,
+  dr as Drawer,
+  cr as DrawerBody,
+  Ze as DrawerCloseTrigger,
+  hr as DrawerContent,
+  ur as DrawerFooter,
+  pr as DrawerHeader,
+  gr as DrawerTitle,
+  mr as DrawerTrigger,
+  br as FormControl,
+  fr as FormHelperText,
+  vr as FormLabel,
+  yr as Heading,
+  kr as Input,
+  _r as InputAddon,
+  Er as InputGroup,
+  Tr as Select,
+  tt as Switch,
+  wr as Tabs,
+  Ir as TabsContent,
+  Sr as TabsList,
+  Cr as TabsTrigger,
+  Br as Tag,
+  ot as Text,
+  xr as Textarea,
+  Fr as preset
 };
 //# sourceMappingURL=ui.js.map