@matthiaskrijgsman/mat-ui 0.0.41 → 0.0.42

package/dist/index.js

@@ -1,15 +1,15 @@
 "use client";
 import { jsx as e, jsxs as d, Fragment as ce } from "react/jsx-runtime";
 import * as C from "react";
-import { createContext as Qe, useContext as Ze, useEffect as _, useState as W, useRef as Ce, useCallback as Le, useLayoutEffect as It, useMemo as se } from "react";
+import { createContext as Qe, useContext as Ze, useEffect as _, useState as W, useRef as Ce, useCallback as Le, useLayoutEffect as It, useMemo as le } from "react";
 import { AnimatePresence as De, motion as q, animate as Kt } from "motion/react";
-import { IconExclamationCircleFilled as et, IconEyeOff as Gt, IconEye as qt, IconPaperclip as Jt, IconCircleCheckFilled as tt, IconX as de, IconCloudUpload as Yt, IconCheck as Rt, IconChevronDown as be, IconBold as Qt, IconItalic as Zt, IconUnderline as en, IconList as Je, IconListNumbers as tn, IconLink as nn, IconArrowBackUp as rn, IconArrowForwardUp as ln, IconDots as on, IconSearch as Fe, IconSearchOff as nt, IconInfoCircleFilled as sn, IconAlertTriangleFilled as an, IconChevronRight as cn, IconChevronUp as dn, IconSettings as mt, IconPlus as ft, IconTrash as un, IconMailFilled as mn } from "@tabler/icons-react";
-import { FloatingPortal as Me, flip as rt, shift as lt, size as ot, useFloating as st, autoUpdate as at, useDismiss as St, useInteractions as Dt, offset as fn, useListNavigation as hn, FloatingOverlay as Ot } from "@floating-ui/react";
+import { IconExclamationCircleFilled as et, IconEyeOff as Gt, IconEye as qt, IconPaperclip as Jt, IconCircleCheckFilled as tt, IconX as de, IconCloudUpload as Yt, IconCheck as Rt, IconChevronDown as ve, IconBold as Qt, IconItalic as Zt, IconUnderline as en, IconList as Je, IconListNumbers as tn, IconLink as nn, IconArrowBackUp as rn, IconArrowForwardUp as on, IconDots as an, IconSearch as Fe, IconSearchOff as nt, IconInfoCircleFilled as ln, IconAlertTriangleFilled as sn, IconChevronRight as cn, IconChevronUp as dn, IconSettings as ht, IconPlus as ft, IconTrash as un, IconMailFilled as hn } from "@tabler/icons-react";
+import { FloatingPortal as Me, flip as rt, shift as ot, size as at, useFloating as lt, autoUpdate as it, useDismiss as St, useInteractions as Dt, offset as fn, useListNavigation as mn, FloatingOverlay as zt } from "@floating-ui/react";
 import { mergeRefs as pn } from "react-merge-refs";
-import { useDropzone as zt } from "react-dropzone";
+import { useDropzone as Ot } from "react-dropzone";
 import { LexicalComposer as gn } from "@lexical/react/LexicalComposer";
-import { RichTextPlugin as bn } from "@lexical/react/LexicalRichTextPlugin";
-import { ContentEditable as vn } from "@lexical/react/LexicalContentEditable";
+import { RichTextPlugin as vn } from "@lexical/react/LexicalRichTextPlugin";
+import { ContentEditable as bn } from "@lexical/react/LexicalContentEditable";
 import { HistoryPlugin as xn } from "@lexical/react/LexicalHistoryPlugin";
 import { ListPlugin as wn } from "@lexical/react/LexicalListPlugin";
 import { LinkPlugin as Nn } from "@lexical/react/LexicalLinkPlugin";
@@ -17,13 +17,13 @@ import { OnChangePlugin as yn } from "@lexical/react/LexicalOnChangePlugin";
 import { AutoFocusPlugin as kn } from "@lexical/react/LexicalAutoFocusPlugin";
 import { LexicalErrorBoundary as Cn } from "@lexical/react/LexicalErrorBoundary";
 import { HeadingNode as In, QuoteNode as Rn, $isHeadingNode as Sn, $createHeadingNode as Dn } from "@lexical/rich-text";
-import { ListNode as Tt, ListItemNode as On, $isListNode as zn, REMOVE_LIST_COMMAND as ht, INSERT_UNORDERED_LIST_COMMAND as Tn, INSERT_ORDERED_LIST_COMMAND as Ln } from "@lexical/list";
+import { ListNode as Tt, ListItemNode as zn, $isListNode as On, REMOVE_LIST_COMMAND as mt, INSERT_UNORDERED_LIST_COMMAND as Tn, INSERT_ORDERED_LIST_COMMAND as Ln } from "@lexical/list";
 import { LinkNode as Pn, $isLinkNode as pt, TOGGLE_LINK_COMMAND as gt } from "@lexical/link";
 import { useLexicalComposerContext as ue } from "@lexical/react/LexicalComposerContext";
 import { CAN_UNDO_COMMAND as En, COMMAND_PRIORITY_LOW as Pe, CAN_REDO_COMMAND as Fn, $getSelection as Lt, $isRangeSelection as Pt, $createParagraphNode as Mn, FORMAT_TEXT_COMMAND as je, UNDO_COMMAND as Bn, REDO_COMMAND as An, FOCUS_COMMAND as Un, BLUR_COMMAND as Wn } from "lexical";
 import { mergeRegister as Et, $getNearestNodeOfType as Hn } from "@lexical/utils";
-import { $setBlocksType as bt } from "@lexical/selection";
-const m = (...n) => n.filter(Boolean).join(" "), $n = [
+import { $setBlocksType as vt } from "@lexical/selection";
+const h = (...n) => n.filter(Boolean).join(" "), $n = [
   "polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)",
   "polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)",
   "polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)",
@@ -32,15 +32,15 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
 ], Se = (n) => {
   const {
     speed: t = 1,
-    className: o
-  } = n, s = 1 / t, r = 2 / t;
+    className: a
+  } = n, l = 1 / t, r = 2 / t;
   return /* @__PURE__ */ e(De, { children: /* @__PURE__ */ e(
     q.div,
     {
       role: "status",
-      className: m("relative rounded-full", o),
+      className: h("relative rounded-full", a),
       animate: { rotate: 360 },
-      transition: { repeat: 1 / 0, ease: "linear", duration: s },
+      transition: { repeat: 1 / 0, ease: "linear", duration: l },
       children: /* @__PURE__ */ e(
         q.div,
         {
@@ -81,11 +81,11 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
   sm: "px-[var(--control-size-sm-px)]",
   md: "px-[var(--control-size-md-px)]",
   lg: "px-[var(--control-size-lg-px)]"
-}, me = {
+}, he = {
   sm: "pl-[var(--control-size-sm-px)]",
   md: "pl-[var(--control-size-md-px)]",
   lg: "pl-[var(--control-size-lg-px)]"
-}, it = {
+}, st = {
   sm: "pr-[var(--control-size-sm-px)]",
   md: "pr-[var(--control-size-md-px)]",
   lg: "pr-[var(--control-size-lg-px)]"
@@ -109,7 +109,7 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
   sm: "right-[var(--control-size-sm-px)]",
   md: "right-[var(--control-size-md-px)]",
   lg: "right-[var(--control-size-lg-px)]"
-}, ae = {
+}, ie = {
   sm: "h-[var(--control-size-sm-icon)] w-[var(--control-size-sm-icon)]",
   md: "h-[var(--control-size-md-icon)] w-[var(--control-size-md-icon)]",
   lg: "h-[var(--control-size-lg-icon)] w-[var(--control-size-lg-icon)]"
@@ -119,280 +119,280 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
   lg: "h-[var(--control-size-lg-height)] w-[var(--control-size-lg-height)]"
 }, Vn = `
   inline-flex flex-row items-center justify-center
-  button-ring font-semibold ring-0 disabled:hover:ring-0 hover:ring-4 active:ring-1
-  rounded-[var(--border-radius-input)]
-  cursor-pointer transition-all duration-150 select-none focus:outline-none focus:ring-4
+  button-ring font-[number:var(--font-weight-button)] font-[family-name:var(--font-family-base)] ring-0 disabled:hover:ring-0 hover:ring-[length:var(--control-ring-width)] active:ring-[length:var(--control-ring-width-active)]
+  rounded-[var(--border-radius-button)]
+  cursor-pointer transition-all duration-[var(--control-transition-duration)] select-none focus:outline-none focus:ring-[length:var(--control-ring-width)]
   disabled:cursor-default
   `, Kn = {
-  primary: "border button-primary shadow-sm",
-  secondary: "border button-secondary shadow-sm",
-  tertiary: "border button-tertiary",
-  white: "border button-white shadow-sm",
-  black: "border button-black shadow-sm",
-  transparent: "border button-transparent"
+  primary: "border-[length:var(--border-width-input)] button-primary shadow-[var(--shadow-control)]",
+  secondary: "border-[length:var(--border-width-input)] button-secondary shadow-[var(--shadow-control)]",
+  tertiary: "border-[length:var(--border-width-input)] button-tertiary",
+  white: "border-[length:var(--border-width-input)] button-white shadow-[var(--shadow-control)]",
+  black: "border-[length:var(--border-width-input)] button-black shadow-[var(--shadow-control)]",
+  transparent: "border-[length:var(--border-width-input)] button-transparent"
 }, Gn = C.forwardRef((n, t) => {
   const {
-    variant: o = "white",
-    size: s = "md",
+    variant: a = "white",
+    size: l = "md",
     className: r,
-    children: l,
-    loading: a = !1,
-    Icon: i,
+    children: o,
+    loading: i = !1,
+    Icon: s,
     IconRight: c,
-    ...b
+    ...v
   } = n;
   return /* @__PURE__ */ d(
     "button",
     {
       ref: t,
-      className: m(
+      className: h(
         Vn,
-        Kn[o],
-        te[s],
-        jn[s],
-        J[s],
-        _n[s],
+        Kn[a],
+        te[l],
+        jn[l],
+        J[l],
+        _n[l],
         r
       ),
-      ...b,
+      ...v,
       children: [
-        a && /* @__PURE__ */ e(Se, { className: m(ae[s]) }),
-        !a && /* @__PURE__ */ d(ce, { children: [
-          i && /* @__PURE__ */ e(i, { className: m(ae[s], "-ml-1") }),
-          l,
-          c && /* @__PURE__ */ e(c, { className: m(ae[s], "-mr-1") })
+        i && /* @__PURE__ */ e(Se, { className: h(ie[l]) }),
+        !i && /* @__PURE__ */ d(ce, { children: [
+          s && /* @__PURE__ */ e(s, { className: h(ie[l], "-ml-1") }),
+          o,
+          c && /* @__PURE__ */ e(c, { className: h(ie[l], "-mr-1") })
         ] })
       ]
     }
   );
 }), qn = `
   inline-flex flex-row items-center justify-center
-  button-ring font-semibold ring-0 disabled:hover:ring-0 hover:ring-4 active:ring-1
-  rounded-[var(--border-radius-input)]
-  cursor-pointer transition-all duration-150 select-none focus:outline-none focus:ring-4
+  button-ring font-[number:var(--font-weight-button)] font-[family-name:var(--font-family-base)] ring-0 disabled:hover:ring-0 hover:ring-[length:var(--control-ring-width)] active:ring-[length:var(--control-ring-width-active)]
+  rounded-[var(--border-radius-button)]
+  cursor-pointer transition-all duration-[var(--control-transition-duration)] select-none focus:outline-none focus:ring-[length:var(--control-ring-width)]
   disabled:cursor-default
 `, Jn = {
-  primary: "border button-primary shadow-sm",
-  secondary: "border button-secondary shadow-sm",
-  tertiary: "border button-tertiary",
-  white: "border button-white shadow-sm",
-  black: "border button-black shadow-sm",
-  transparent: "border button-transparent"
+  primary: "border-[length:var(--border-width-input)] button-primary shadow-[var(--shadow-control)]",
+  secondary: "border-[length:var(--border-width-input)] button-secondary shadow-[var(--shadow-control)]",
+  tertiary: "border-[length:var(--border-width-input)] button-tertiary",
+  white: "border-[length:var(--border-width-input)] button-white shadow-[var(--shadow-control)]",
+  black: "border-[length:var(--border-width-input)] button-black shadow-[var(--shadow-control)]",
+  transparent: "border-[length:var(--border-width-input)] button-transparent"
 }, Ye = C.forwardRef((n, t) => {
   const {
-    variant: o = "white",
-    size: s = "md",
+    variant: a = "white",
+    size: l = "md",
     className: r,
-    Icon: l,
-    ...a
+    Icon: o,
+    ...i
   } = n;
   return /* @__PURE__ */ e(
     "button",
     {
       ref: t,
-      className: m(
+      className: h(
         qn,
-        Jn[o],
-        At[s],
+        Jn[a],
+        At[l],
         r
       ),
-      ...a,
-      children: /* @__PURE__ */ e(l, { className: ae[s] })
+      ...i,
+      children: /* @__PURE__ */ e(o, { className: ie[l] })
     }
   );
 }), Yn = `
   inline-flex flex-row items-center justify-center
-  button-ring font-semibold ring-0 disabled:hover:ring-0 hover:ring-4 active:ring-1 rounded-full cursor-pointer transition-all duration-150 select-none focus:outline-none focus:ring-4
+  button-ring font-[number:var(--font-weight-button)] font-[family-name:var(--font-family-base)] ring-0 disabled:hover:ring-0 hover:ring-[length:var(--control-ring-width)] active:ring-[length:var(--control-ring-width-active)] rounded-full cursor-pointer transition-all duration-[var(--control-transition-duration)] select-none focus:outline-none focus:ring-[length:var(--control-ring-width)]
   disabled:cursor-default
 `, Qn = {
-  primary: "border button-primary shadow-sm",
-  secondary: "border button-secondary shadow-sm",
-  tertiary: "border button-tertiary",
-  white: "border button-white shadow-sm",
-  black: "border button-black shadow-sm",
-  transparent: "border button-transparent"
+  primary: "border-[length:var(--border-width-input)] button-primary shadow-[var(--shadow-control)]",
+  secondary: "border-[length:var(--border-width-input)] button-secondary shadow-[var(--shadow-control)]",
+  tertiary: "border-[length:var(--border-width-input)] button-tertiary",
+  white: "border-[length:var(--border-width-input)] button-white shadow-[var(--shadow-control)]",
+  black: "border-[length:var(--border-width-input)] button-black shadow-[var(--shadow-control)]",
+  transparent: "border-[length:var(--border-width-input)] button-transparent"
 }, Ut = C.forwardRef((n, t) => {
   const {
-    variant: o = "white",
-    size: s = "md",
+    variant: a = "white",
+    size: l = "md",
     className: r,
-    Icon: l,
-    ...a
+    Icon: o,
+    ...i
   } = n;
   return /* @__PURE__ */ e(
     "button",
     {
       ref: t,
-      className: m(
+      className: h(
         Yn,
-        Qn[o],
-        At[s],
+        Qn[a],
+        At[l],
         r
       ),
-      ...a,
-      children: /* @__PURE__ */ e(l, { className: ae[s] })
+      ...i,
+      children: /* @__PURE__ */ e(o, { className: ie[l] })
     }
   );
 }), Y = (n) => {
   const {
     children: t
   } = n;
-  return t ? /* @__PURE__ */ e("label", { className: "input-label font-medium mb-1", children: t }) : null;
-}, ne = () => /* @__PURE__ */ e("div", { className: "h-5 w-5", children: /* @__PURE__ */ e(et, { className: "h-5 w-5 input-error-icon" }) }), Q = Qe("md"), Zn = () => Ze(Q), he = C.forwardRef((n, t) => {
+  return t ? /* @__PURE__ */ e("label", { className: "input-label font-[number:var(--font-weight-input-label)] mb-1", children: t }) : null;
+}, ne = () => /* @__PURE__ */ e("div", { className: "h-5 w-5", children: /* @__PURE__ */ e(et, { className: "h-5 w-5 input-error-icon" }) }), Q = Qe("md"), Zn = () => Ze(Q), me = C.forwardRef((n, t) => {
   const {
-    children: o,
-    className: s
+    children: a,
+    className: l
   } = n, r = Zn();
   return /* @__PURE__ */ e(
     "div",
     {
       ref: t,
-      className: m(
+      className: h(
         "absolute top-1/2 -translate-y-1/2 flex flex-row items-center gap-1 pointer-events-none",
         Xn[r],
-        s
+        l
       ),
-      children: o
+      children: a
     }
   );
 }), V = (n) => {
   const {
     children: t
   } = n;
-  return t ? /* @__PURE__ */ e("div", { className: "input-description text-sm font-medium mt-2", children: t }) : null;
+  return t ? /* @__PURE__ */ e("div", { className: "input-description text-[length:var(--font-size-description)] font-[number:var(--font-weight-input-description)] mt-2", children: t }) : null;
 }, K = (n) => {
   const {
     children: t
   } = n;
-  return t ? /* @__PURE__ */ e("div", { className: "input-error-text text-sm font-medium mt-2", children: t }) : null;
+  return t ? /* @__PURE__ */ e("div", { className: "input-error-text text-[length:var(--font-size-error)] font-[number:var(--font-weight-input-error)] mt-2", children: t }) : null;
 }, Wt = (n) => {
   const {
     className: t,
-    label: o,
-    description: s,
+    label: a,
+    description: l,
     Icon: r,
-    error: l,
-    buttonTray: a,
-    size: i = "md",
+    error: o,
+    buttonTray: i,
+    size: s = "md",
     ...c
-  } = n, b = !!l || !!a;
-  return /* @__PURE__ */ e(Q.Provider, { value: i, children: /* @__PURE__ */ d(
+  } = n, v = !!o || !!i;
+  return /* @__PURE__ */ e(Q.Provider, { value: s, children: /* @__PURE__ */ d(
     "div",
     {
-      className: m(
+      className: h(
         "flex flex-col",
         t
       ),
       children: [
-        /* @__PURE__ */ e(Y, { children: o }),
+        /* @__PURE__ */ e(Y, { children: a }),
         /* @__PURE__ */ d("div", { className: "flex flex-col relative", children: [
-          r && /* @__PURE__ */ e(r, { className: m(
+          r && /* @__PURE__ */ e(r, { className: h(
             "input-icon absolute top-1/2 -translate-y-1/2",
-            ae[i],
-            Bt[i]
+            ie[s],
+            Bt[s]
           ) }),
           /* @__PURE__ */ e(
             "input",
             {
-              className: m(
-                "border input-base transition-all duration-150 rounded-xl shadow-sm ring-0 focus:ring-4 focus:outline-none",
-                te[i],
-                J[i],
-                r ? Mt[i] : me[i],
-                b ? fe[i] : it[i],
-                l && "input-error"
+              className: h(
+                "border-[length:var(--border-width-input)] input-base transition-all duration-[var(--control-transition-duration)] rounded-[var(--border-radius-input)] shadow-[var(--shadow-control)] ring-0 focus:ring-[length:var(--control-ring-width)] focus:outline-none font-[number:var(--font-weight-input-text)] font-[family-name:var(--font-family-base)]",
+                te[s],
+                J[s],
+                r ? Mt[s] : he[s],
+                v ? fe[s] : st[s],
+                o && "input-error"
               ),
               ...c
             }
           ),
-          /* @__PURE__ */ d(he, { children: [
-            l && /* @__PURE__ */ e(ne, {}),
-            a
+          /* @__PURE__ */ d(me, { children: [
+            o && /* @__PURE__ */ e(ne, {}),
+            i
           ] })
         ] }),
-        /* @__PURE__ */ e(V, { children: s }),
-        /* @__PURE__ */ e(K, { children: l })
+        /* @__PURE__ */ e(V, { children: l }),
+        /* @__PURE__ */ e(K, { children: o })
       ]
     }
   ) });
 }, er = (n) => {
   const t = n.match(/^#?([0-9a-fA-F]{6})$/);
   if (!t) return null;
-  const o = parseInt(t[1], 16);
-  return [(o >> 16 & 255) / 255, (o >> 8 & 255) / 255, (o & 255) / 255];
-}, tr = (n, t, o) => {
-  const s = (r) => Math.round(r * 255).toString(16).padStart(2, "0").toUpperCase();
-  return "#" + s(n) + s(t) + s(o);
-}, nr = (n, t, o) => {
-  const s = Math.max(n, t, o), r = Math.min(n, t, o), l = s - r;
-  let a = 0;
-  return l !== 0 && (s === n ? a = ((t - o) / l + 6) % 6 : s === t ? a = (o - n) / l + 2 : a = (n - t) / l + 4, a *= 60), [a, s === 0 ? 0 : l / s, s];
-}, rr = (n, t, o) => {
-  const s = o * t, r = n / 60, l = s * (1 - Math.abs(r % 2 - 1));
-  let a = 0, i = 0, c = 0;
-  r < 1 ? (a = s, i = l) : r < 2 ? (a = l, i = s) : r < 3 ? (i = s, c = l) : r < 4 ? (i = l, c = s) : r < 5 ? (a = l, c = s) : (a = s, c = l);
-  const b = o - s;
-  return [a + b, i + b, c + b];
-}, Re = (n, t, o) => {
-  const [s, r, l] = rr(n, t, o);
-  return tr(s, r, l);
-}, vt = (n) => {
+  const a = parseInt(t[1], 16);
+  return [(a >> 16 & 255) / 255, (a >> 8 & 255) / 255, (a & 255) / 255];
+}, tr = (n, t, a) => {
+  const l = (r) => Math.round(r * 255).toString(16).padStart(2, "0").toUpperCase();
+  return "#" + l(n) + l(t) + l(a);
+}, nr = (n, t, a) => {
+  const l = Math.max(n, t, a), r = Math.min(n, t, a), o = l - r;
+  let i = 0;
+  return o !== 0 && (l === n ? i = ((t - a) / o + 6) % 6 : l === t ? i = (a - n) / o + 2 : i = (n - t) / o + 4, i *= 60), [i, l === 0 ? 0 : o / l, l];
+}, rr = (n, t, a) => {
+  const l = a * t, r = n / 60, o = l * (1 - Math.abs(r % 2 - 1));
+  let i = 0, s = 0, c = 0;
+  r < 1 ? (i = l, s = o) : r < 2 ? (i = o, s = l) : r < 3 ? (s = l, c = o) : r < 4 ? (s = o, c = l) : r < 5 ? (i = o, c = l) : (i = l, c = o);
+  const v = a - l;
+  return [i + v, s + v, c + v];
+}, Re = (n, t, a) => {
+  const [l, r, o] = rr(n, t, a);
+  return tr(l, r, o);
+}, bt = (n) => {
   const t = er(n);
   return t ? nr(t[0], t[1], t[2]) : null;
-}, lr = (n) => {
+}, or = (n) => {
   const t = n.trim();
   if (!t) return null;
-  const o = t.match(/^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/);
-  if (o) {
-    let a = o[1];
-    return a.length === 3 && (a = a.split("").map((i) => i + i).join("")), "#" + a.toUpperCase();
+  const a = t.match(/^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/);
+  if (a) {
+    let i = a[1];
+    return i.length === 3 && (i = i.split("").map((s) => s + s).join("")), "#" + i.toUpperCase();
   }
   if (typeof document > "u") return null;
-  const s = document.createElement("div");
-  if (s.style.color = t, !s.style.color) return null;
-  document.body.appendChild(s);
-  const r = getComputedStyle(s).color;
-  document.body.removeChild(s);
-  const l = r.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
-  return l ? "#" + [l[1], l[2], l[3]].map((a) => parseInt(a, 10).toString(16).padStart(2, "0")).join("").toUpperCase() : null;
+  const l = document.createElement("div");
+  if (l.style.color = t, !l.style.color) return null;
+  document.body.appendChild(l);
+  const r = getComputedStyle(l).color;
+  document.body.removeChild(l);
+  const o = r.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+  return o ? "#" + [o[1], o[2], o[3]].map((i) => parseInt(i, 10).toString(16).padStart(2, "0")).join("").toUpperCase() : null;
 }, Xe = (n) => {
-  const t = C.useRef(null), [o, s] = C.useState(!1), r = (l) => {
-    t.current = null, s(!1), l.currentTarget.releasePointerCapture?.(l.pointerId);
+  const t = C.useRef(null), [a, l] = C.useState(!1), r = (o) => {
+    t.current = null, l(!1), o.currentTarget.releasePointerCapture?.(o.pointerId);
   };
   return {
-    isDragging: o,
+    isDragging: a,
     bind: {
-      onPointerDown: (l) => {
-        const a = l.currentTarget;
-        t.current = a.getBoundingClientRect(), a.setPointerCapture?.(l.pointerId), s(!0), n(l.clientX, l.clientY, t.current);
+      onPointerDown: (o) => {
+        const i = o.currentTarget;
+        t.current = i.getBoundingClientRect(), i.setPointerCapture?.(o.pointerId), l(!0), n(o.clientX, o.clientY, t.current);
       },
-      onPointerMove: (l) => {
-        t.current && n(l.clientX, l.clientY, t.current);
+      onPointerMove: (o) => {
+        t.current && n(o.clientX, o.clientY, t.current);
       },
       onPointerUp: r,
       onPointerCancel: r
     }
   };
-}, or = "flex flex-col dropdown-panel border mt-1 rounded-xl shadow-lg overflow-y-auto relative space-y-1", sr = {
+}, ar = "flex flex-col dropdown-panel border-[length:var(--border-width-input)] mt-1 rounded-[var(--border-radius-dropdown)] shadow-[var(--shadow-dropdown)] overflow-y-auto relative space-y-1", lr = {
   sm: "p-2",
   md: "p-3",
   lg: "p-4"
-}, ve = (n) => {
+}, be = (n) => {
   const {
     className: t,
-    children: o,
-    padding: s = "md",
+    children: a,
+    padding: l = "md",
     ...r
   } = n;
   return /* @__PURE__ */ e(
     "div",
     {
-      className: m(or, sr[s], t),
+      className: h(ar, lr[l], t),
       ...r,
-      children: o
+      children: a
     }
   );
-}, ar = {
+}, ir = {
   top: "bottom center",
   "top-start": "bottom left",
   "top-end": "bottom right",
@@ -406,11 +406,11 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
   "left-start": "top right",
   "left-end": "bottom right"
 }, Ht = C.memo(
-  ({ open: n, children: t, className: o, floatingStyles: s, setFloating: r, placement: l, floatingProps: a }) => /* @__PURE__ */ e(Me, { children: /* @__PURE__ */ e(De, { children: n && /* @__PURE__ */ e("div", { ref: r, style: s, className: "z-50", ...a, children: /* @__PURE__ */ e(
+  ({ open: n, children: t, className: a, floatingStyles: l, setFloating: r, placement: o, floatingProps: i }) => /* @__PURE__ */ e(Me, { children: /* @__PURE__ */ e(De, { children: n && /* @__PURE__ */ e("div", { ref: r, style: l, className: "z-50", ...i, children: /* @__PURE__ */ e(
     q.div,
     {
-      className: o,
-      style: { transformOrigin: ar[l] },
+      className: a,
+      style: { transformOrigin: ir[o] },
       initial: { opacity: 0, scale: 0.95 },
       animate: { opacity: 1, scale: 1 },
       exit: { opacity: 0, scale: 0.95 },
@@ -419,44 +419,44 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
     }
   ) }) }) })
 ), ct = (n) => {
-  const { placement: t = "bottom", open: o, onOpenChange: s, fullWidth: r, minWidth: l, maxWidth: a } = n, i = C.useMemo(() => [
+  const { placement: t = "bottom", open: a, onOpenChange: l, fullWidth: r, minWidth: o, maxWidth: i } = n, s = C.useMemo(() => [
     rt({ padding: 8 }),
-    lt({ padding: 8 }),
-    ot({
+    ot({ padding: 8 }),
+    at({
       apply({ rects: u, elements: I }) {
-        r && (I.floating.style.width = `${u.reference.width}px`), l && (I.floating.style.minWidth = `${l}px`), a && (I.floating.style.maxWidth = `${a}px`);
+        r && (I.floating.style.width = `${u.reference.width}px`), o && (I.floating.style.minWidth = `${o}px`), i && (I.floating.style.maxWidth = `${i}px`);
       }
     })
-  ], [r, a, l]), { refs: c, floatingStyles: b, context: R, placement: N } = st({
+  ], [r, i, o]), { refs: c, floatingStyles: v, context: R, placement: N } = lt({
     placement: t,
-    open: o,
-    onOpenChange: s,
-    middleware: i,
-    whileElementsMounted: at
-  }), h = St(R, {
-    enabled: !!s,
+    open: a,
+    onOpenChange: l,
+    middleware: s,
+    whileElementsMounted: it
+  }), m = St(R, {
+    enabled: !!l,
     outsidePress: !0,
     escapeKey: !1
-  }), { getFloatingProps: v } = Dt([h]), f = C.useRef({
-    floatingStyles: b,
+  }), { getFloatingProps: b } = Dt([m]), f = C.useRef({
+    floatingStyles: v,
     setFloating: c.setFloating,
     placement: t,
-    getFloatingProps: v
+    getFloatingProps: b
   });
   f.current = {
-    floatingStyles: b,
+    floatingStyles: v,
     setFloating: c.setFloating,
     placement: N,
-    getFloatingProps: v
+    getFloatingProps: b
   };
   const p = C.useMemo(() => {
     const u = (I) => {
-      const { floatingStyles: x, setFloating: y, placement: k, getFloatingProps: S } = f.current, { className: O, open: P, children: T } = I;
+      const { floatingStyles: x, setFloating: y, placement: k, getFloatingProps: S } = f.current, { className: z, open: P, children: T } = I;
       return /* @__PURE__ */ e(
         Ht,
         {
           open: P,
-          className: O,
+          className: z,
           floatingStyles: x,
           setFloating: y,
           placement: k,
@@ -474,41 +474,41 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
 }, xe = (n, t) => {
   _(() => {
     if (!n) return;
-    const o = (s) => {
-      s.key === "Escape" && t();
+    const a = (l) => {
+      l.key === "Escape" && t();
     };
-    return document.addEventListener("keydown", o), () => {
-      document.removeEventListener("keydown", o);
+    return document.addEventListener("keydown", a), () => {
+      document.removeEventListener("keydown", a);
     };
   }, [n, t]);
-}, ir = "linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%)", cr = "linear-gradient(to right, #fff, rgba(255,255,255,0))", dr = "linear-gradient(to top, #000, rgba(0,0,0,0))", Ve = "0 0 0 1px rgba(0,0,0,0.15)", ur = 14, mr = 28, fr = 6, hr = 8, Ke = { type: "spring", stiffness: 500, damping: 18, mass: 0.6 }, ye = (n) => {
-  const t = n ? mr : ur, o = t / 2;
+}, sr = "linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%)", cr = "linear-gradient(to right, #fff, rgba(255,255,255,0))", dr = "linear-gradient(to top, #000, rgba(0,0,0,0))", Ve = "0 0 0 1px rgba(0,0,0,0.15)", ur = 14, hr = 28, fr = 6, mr = 8, Ke = { type: "spring", stiffness: 500, damping: 18, mass: 0.6 }, ye = (n) => {
+  const t = n ? hr : ur, a = t / 2;
   return {
     width: t,
     height: t,
-    marginLeft: -o,
-    marginTop: -o,
-    borderRadius: n ? hr : fr
+    marginLeft: -a,
+    marginTop: -a,
+    borderRadius: n ? mr : fr
   };
 }, Te = (n) => Math.max(0, Math.min(1, n)), xt = (n, t) => {
   Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set?.call(n, t), n.dispatchEvent(new Event("input", { bubbles: !0 }));
 }, pr = ({ value: n, onChange: t }) => {
-  const [o, s] = W(() => vt(n) ?? [0, 0, 1]), r = Ce(Re(o[0], o[1], o[2]));
+  const [a, l] = W(() => bt(n) ?? [0, 0, 1]), r = Ce(Re(a[0], a[1], a[2]));
   _(() => {
     if ((n || "").toUpperCase() === r.current) return;
-    const p = vt(n);
-    p && s(p);
+    const p = bt(n);
+    p && l(p);
   }, [n]);
-  const l = (p) => {
-    s(p);
+  const o = (p) => {
+    l(p);
     const u = Re(p[0], p[1], p[2]);
     r.current = u, t(u);
-  }, [a, i, c] = o, b = Re(a, 1, 1), R = Re(a, i, 1), N = Re(a, i, c), h = Xe((p, u, I) => {
-    l([a, Te((p - I.left) / I.width), 1 - Te((u - I.top) / I.height)]);
-  }), v = Xe((p, u, I) => {
-    l([Te((p - I.left) / I.width) * 360, i, c]);
+  }, [i, s, c] = a, v = Re(i, 1, 1), R = Re(i, s, 1), N = Re(i, s, c), m = Xe((p, u, I) => {
+    o([i, Te((p - I.left) / I.width), 1 - Te((u - I.top) / I.height)]);
+  }), b = Xe((p, u, I) => {
+    o([Te((p - I.left) / I.width) * 360, s, c]);
   }), f = Xe((p, u, I) => {
-    l([a, i, Te((p - I.left) / I.width)]);
+    o([i, s, Te((p - I.left) / I.width)]);
   });
   return /* @__PURE__ */ d(
     "div",
@@ -526,13 +526,13 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
               touchAction: "none",
               cursor: "crosshair"
             },
-            ...h.bind,
+            ...m.bind,
             children: [
               /* @__PURE__ */ d(
                 "div",
                 {
-                  className: "absolute inset-0 rounded-md overflow-hidden border color-picker-surface",
-                  style: { backgroundColor: b },
+                  className: "absolute inset-0 rounded-[var(--border-radius-control-inner)] overflow-hidden border-[length:var(--border-width-input)] color-picker-surface",
+                  style: { backgroundColor: v },
                   children: [
                     /* @__PURE__ */ e(
                       "div",
@@ -556,13 +556,13 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
                 {
                   className: "absolute pointer-events-none border-1 border-white",
                   style: {
-                    left: `${i * 100}%`,
+                    left: `${s * 100}%`,
                     top: `${(1 - c) * 100}%`,
                     boxShadow: Ve,
                     backgroundColor: N
                   },
                   initial: ye(!1),
-                  animate: ye(h.isDragging),
+                  animate: ye(m.isDragging),
                   transition: Ke
                 }
               )
@@ -572,26 +572,26 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
         /* @__PURE__ */ e(
           "div",
           {
-            className: "relative w-full rounded-md",
+            className: "relative w-full rounded-[var(--border-radius-control-inner)]",
             style: {
               height: 12,
-              background: ir,
+              background: sr,
               touchAction: "none",
               cursor: "ew-resize"
             },
-            ...v.bind,
+            ...b.bind,
             children: /* @__PURE__ */ e(
               q.div,
               {
                 className: "absolute pointer-events-none border-1 border-white",
                 style: {
                   top: "50%",
-                  left: `${a / 360 * 100}%`,
-                  backgroundColor: b,
+                  left: `${i / 360 * 100}%`,
+                  backgroundColor: v,
                   boxShadow: Ve
                 },
                 initial: ye(!1),
-                animate: ye(v.isDragging),
+                animate: ye(b.isDragging),
                 transition: Ke
               }
             )
@@ -600,7 +600,7 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
         /* @__PURE__ */ e(
           "div",
           {
-            className: "relative w-full rounded-md",
+            className: "relative w-full rounded-[var(--border-radius-control-inner)]",
             style: {
               height: 12,
               background: `linear-gradient(to right, #000, ${R})`,
@@ -628,55 +628,55 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
       ]
     }
   );
-}, xl = (n) => {
+}, wo = (n) => {
   const {
     className: t,
-    label: o,
-    description: s,
+    label: a,
+    description: l,
     error: r,
-    buttonTray: l,
-    size: a = "md",
-    value: i,
+    buttonTray: o,
+    size: i = "md",
+    value: s,
     defaultValue: c,
-    onChange: b,
+    onChange: v,
     onBlur: R,
     onFocus: N,
-    ...h
-  } = n, [v, f] = W(
-    i != null ? String(i) : c != null ? String(c) : ""
-  ), [p, u] = W(!1), I = Ce(null), x = i != null ? String(i) : v, y = x || "white";
+    ...m
+  } = n, [b, f] = W(
+    s != null ? String(s) : c != null ? String(c) : ""
+  ), [p, u] = W(!1), I = Ce(null), x = s != null ? String(s) : b, y = x || "white";
   xe(p, () => u(!1));
   const { anchorRef: k, Popover: S } = ct({
     placement: "bottom-start",
     open: p,
     onOpenChange: u
-  }), O = (g) => {
-    f(g.target.value), b?.(g);
+  }), z = (g) => {
+    f(g.target.value), v?.(g);
   }, P = (g) => {
     u(!0), N?.(g);
   }, T = (g) => {
-    const M = g.target.value, L = lr(M);
+    const M = g.target.value, L = or(M);
     L && L !== M && I.current && xt(I.current, L), u(!1), R?.(g);
-  }, z = (g) => {
+  }, O = (g) => {
     I.current && xt(I.current, g);
-  }, w = !!r || !!l;
-  return /* @__PURE__ */ e(Q.Provider, { value: a, children: /* @__PURE__ */ d(
+  }, w = !!r || !!o;
+  return /* @__PURE__ */ e(Q.Provider, { value: i, children: /* @__PURE__ */ d(
     "div",
     {
-      className: m(
+      className: h(
         "flex flex-col",
         t
       ),
       children: [
-        /* @__PURE__ */ e(Y, { children: o }),
+        /* @__PURE__ */ e(Y, { children: a }),
         /* @__PURE__ */ d("div", { className: "flex flex-col relative", ref: k, children: [
           /* @__PURE__ */ e(
             "div",
             {
-              className: m(
-                "absolute top-1/2 -translate-y-1/2 rounded-md border color-swatch",
-                ae[a],
-                Bt[a]
+              className: h(
+                "absolute top-1/2 -translate-y-1/2 rounded-[var(--border-radius-control-inner)] border-[length:var(--border-width-input)] color-swatch",
+                ie[i],
+                Bt[i]
               ),
               style: { backgroundColor: y }
             }
@@ -685,29 +685,29 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
             "input",
             {
               ref: I,
-              className: m(
-                "border input-base transition-all duration-150 rounded-xl shadow-sm ring-0 focus:ring-4 focus:outline-none",
-                te[a],
-                J[a],
-                Mt[a],
-                w ? fe[a] : it[a],
+              className: h(
+                "border-[length:var(--border-width-input)] input-base transition-all duration-[var(--control-transition-duration)] rounded-[var(--border-radius-input)] shadow-[var(--shadow-control)] ring-0 focus:ring-[length:var(--control-ring-width)] focus:outline-none font-[number:var(--font-weight-input-text)] font-[family-name:var(--font-family-base)]",
+                te[i],
+                J[i],
+                Mt[i],
+                w ? fe[i] : st[i],
                 r && "input-error"
               ),
-              value: i ?? v,
-              onChange: O,
+              value: s ?? b,
+              onChange: z,
               onFocus: P,
               onBlur: T,
               onClick: () => u(!0),
-              ...h
+              ...m
             }
           ),
-          /* @__PURE__ */ d(he, { children: [
+          /* @__PURE__ */ d(me, { children: [
             r && /* @__PURE__ */ e(ne, {}),
-            l
+            o
           ] }),
-          /* @__PURE__ */ e(S, { open: p, children: /* @__PURE__ */ e(ve, { padding: "md", children: /* @__PURE__ */ e(pr, { value: x, onChange: z }) }) })
+          /* @__PURE__ */ e(S, { open: p, children: /* @__PURE__ */ e(be, { padding: "md", children: /* @__PURE__ */ e(pr, { value: x, onChange: O }) }) })
         ] }),
-        /* @__PURE__ */ e(V, { children: s }),
+        /* @__PURE__ */ e(V, { children: l }),
         /* @__PURE__ */ e(K, { children: r })
       ]
     }
@@ -715,114 +715,114 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
 }, Z = (n) => {
   const {
     onClick: t,
-    Icon: o
+    Icon: a
   } = n;
   return /* @__PURE__ */ e(
     "div",
     {
       onClick: t,
-      className: m(
+      className: h(
         "h-6 w-6 select-none rounded-full p-0.5",
-        t && "ring-0 transition-all duration-150 input-icon-button-interactive active:ring-2 cursor-pointer hover:ring-4 group pointer-events-auto"
+        t && "ring-0 transition-all duration-[var(--control-transition-duration)] input-icon-button-interactive active:ring-[length:var(--control-ring-width-active)] cursor-pointer hover:ring-[length:var(--control-ring-width)] group pointer-events-auto"
       ),
-      children: /* @__PURE__ */ e(o, { className: m("h-5 w-5 input-icon-button-icon", t && "group-active:scale-[0.8] transition-transform origin-center") })
+      children: /* @__PURE__ */ e(a, { className: h("h-5 w-5 input-icon-button-icon", t && "group-active:scale-[0.8] transition-transform duration-[var(--control-transition-duration)] origin-center") })
     }
   );
-}, wl = (n) => {
+}, No = (n) => {
   const {
     type: t = "password",
-    enableShowPasswordToggle: o = !0,
-    ...s
-  } = n, [r, l] = W(!1);
+    enableShowPasswordToggle: a = !0,
+    ...l
+  } = n, [r, o] = W(!1);
   return /* @__PURE__ */ e(
     Wt,
     {
       type: r ? "text" : t,
-      buttonTray: o ? /* @__PURE__ */ e(Z, { Icon: r ? Gt : qt, onClick: () => {
-        l(!r);
+      buttonTray: a ? /* @__PURE__ */ e(Z, { Icon: r ? Gt : qt, onClick: () => {
+        o(!r);
       } }) : void 0,
-      ...s
+      ...l
     }
   );
-}, Nl = (n) => {
+}, yo = (n) => {
   const {
     className: t,
-    label: o,
-    description: s,
+    label: a,
+    description: l,
     error: r,
-    size: l = "md",
-    autogrow: a = !1,
-    maxRows: i,
+    size: o = "md",
+    autogrow: i = !1,
+    maxRows: s,
     ref: c,
-    onChange: b,
+    onChange: v,
     ...R
-  } = n, N = C.useRef(null), h = C.useCallback(() => {
+  } = n, N = C.useRef(null), m = C.useCallback(() => {
     const f = N.current;
     if (!f) return;
     f.style.height = "auto";
     let p = f.scrollHeight;
-    if (i) {
-      const u = window.getComputedStyle(f), I = parseFloat(u.lineHeight), x = parseFloat(u.paddingTop), y = parseFloat(u.paddingBottom), k = parseFloat(u.borderTopWidth), S = parseFloat(u.borderBottomWidth), O = I * i + x + y + k + S;
-      p = Math.min(f.scrollHeight, O);
+    if (s) {
+      const u = window.getComputedStyle(f), I = parseFloat(u.lineHeight), x = parseFloat(u.paddingTop), y = parseFloat(u.paddingBottom), k = parseFloat(u.borderTopWidth), S = parseFloat(u.borderBottomWidth), z = I * s + x + y + k + S;
+      p = Math.min(f.scrollHeight, z);
     }
     f.style.height = `${p}px`;
-  }, [i]);
+  }, [s]);
   C.useLayoutEffect(() => {
-    if (!a) {
+    if (!i) {
       N.current && (N.current.style.height = "");
       return;
     }
-    h();
-  }, [a, h, n.value, n.defaultValue, l]);
-  const v = (f) => {
-    b?.(f), a && h();
+    m();
+  }, [i, m, n.value, n.defaultValue, o]);
+  const b = (f) => {
+    v?.(f), i && m();
   };
-  return /* @__PURE__ */ e(Q.Provider, { value: l, children: /* @__PURE__ */ d(
+  return /* @__PURE__ */ e(Q.Provider, { value: o, children: /* @__PURE__ */ d(
     "div",
     {
-      className: m(
+      className: h(
         "flex flex-col",
         t
       ),
       children: [
-        /* @__PURE__ */ e(Y, { children: o }),
+        /* @__PURE__ */ e(Y, { children: a }),
         /* @__PURE__ */ d("div", { className: "flex flex-col relative", children: [
           /* @__PURE__ */ e(
             "textarea",
             {
               ref: c ? pn([c, N]) : N,
-              onChange: v,
-              className: m(
-                "py-2.5 border input-base transition-all duration-150 rounded-xl shadow-sm ring-0 focus:ring-4 focus:outline-none",
-                Ft[l],
-                J[l],
-                me[l],
-                r ? fe[l] : it[l],
+              onChange: b,
+              className: h(
+                "py-2.5 border-[length:var(--border-width-input)] input-base transition-all duration-[var(--control-transition-duration)] rounded-[var(--border-radius-input)] shadow-[var(--shadow-control)] ring-0 focus:ring-[length:var(--control-ring-width)] focus:outline-none font-[number:var(--font-weight-input-text)] font-[family-name:var(--font-family-base)]",
+                Ft[o],
+                J[o],
+                he[o],
+                r ? fe[o] : st[o],
                 r && "input-error",
-                a && (i ? "resize-none overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" : "resize-none overflow-hidden")
+                i && (s ? "resize-none overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" : "resize-none overflow-hidden")
               ),
               ...R
             }
           ),
-          /* @__PURE__ */ e(he, { className: "top-3.5 translate-y-0", children: r && /* @__PURE__ */ e(ne, {}) })
+          /* @__PURE__ */ e(me, { className: "top-3.5 translate-y-0", children: r && /* @__PURE__ */ e(ne, {}) })
         ] }),
-        /* @__PURE__ */ e(V, { children: s }),
+        /* @__PURE__ */ e(V, { children: l }),
         /* @__PURE__ */ e(K, { children: r })
       ]
     }
   ) });
-}, yl = (n) => {
+}, ko = (n) => {
   const {
     className: t,
-    label: o,
-    description: s,
+    label: a,
+    description: l,
     error: r,
-    ...l
+    ...o
   } = n;
   return /* @__PURE__ */ d(
     "div",
     {
-      className: m(
+      className: h(
         "flex flex-col",
         t
       ),
@@ -832,32 +832,32 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
             "input",
             {
               type: "radio",
-              className: "h-6 w-6 shrink-0 rounded-full border check-base shadow-sm ring-0 hover:ring-4 focus:ring-4 ring-offset-0 focus:outline-0 transition-all duration-150",
-              ...l
+              className: "h-6 w-6 shrink-0 rounded-full border-[length:var(--border-width-input)] check-base shadow-[var(--shadow-control)] ring-0 hover:ring-[length:var(--control-ring-width)] focus:ring-[length:var(--control-ring-width)] ring-offset-0 focus:outline-0 transition-all duration-[var(--control-transition-duration)]",
+              ...o
             }
           ),
-          o && /* @__PURE__ */ e("label", { htmlFor: n.id, className: m(
-            "input-label font-medium mb-1",
+          a && /* @__PURE__ */ e("label", { htmlFor: n.id, className: h(
+            "input-label font-[number:var(--font-weight-input-option-label)] mb-1",
             n.id && "cursor-pointer"
-          ), children: o })
+          ), children: a })
         ] }),
-        /* @__PURE__ */ e(V, { children: s }),
+        /* @__PURE__ */ e(V, { children: l }),
         /* @__PURE__ */ e(K, { children: r })
       ]
     }
   );
-}, kl = (n) => {
+}, Co = (n) => {
   const {
     className: t,
-    label: o,
-    description: s,
+    label: a,
+    description: l,
     error: r,
-    ...l
+    ...o
   } = n;
   return /* @__PURE__ */ d(
     "div",
     {
-      className: m(
+      className: h(
         "flex flex-col",
         t
       ),
@@ -868,40 +868,40 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
               "input",
               {
                 type: "checkbox",
-                className: "appearance-none absolute inset-0 h-6 w-10 rounded-full checked:bg-transparent border-0 toggle-input ring-0 hover:ring-4 focus:ring-4 ring-offset-0 focus:outline-0 transition-all duration-150",
-                ...l
+                className: "appearance-none absolute inset-0 h-6 w-10 rounded-full checked:bg-transparent border-0 toggle-input ring-0 hover:ring-[length:var(--control-ring-width)] focus:ring-[length:var(--control-ring-width)] ring-offset-0 focus:outline-0 transition-all duration-[var(--control-transition-duration)]",
+                ...o
               }
             ),
-            /* @__PURE__ */ e("div", { className: m(
-              "rounded-full absolute border inset-0 pointer-events-none transition-colors duration-150 ",
+            /* @__PURE__ */ e("div", { className: h(
+              "rounded-full absolute border inset-0 pointer-events-none transition-colors duration-[var(--control-transition-duration)] ",
               n.checked ? "toggle-track-on" : "toggle-track-off"
-            ), children: /* @__PURE__ */ e("div", { className: m(
-              "absolute top-1/2 -translate-y-1/2 left-1 h-4 w-4 rounded-full toggle-thumb shadow-md transition-all duration-150",
+            ), children: /* @__PURE__ */ e("div", { className: h(
+              "absolute top-1/2 -translate-y-1/2 left-1 h-4 w-4 rounded-full toggle-thumb shadow-md transition-all duration-[var(--control-transition-duration)]",
               n.checked && "translate-x-3.5 "
             ) }) })
           ] }),
-          o && /* @__PURE__ */ e("label", { htmlFor: n.id, className: m(
-            "input-label font-medium mb-1",
+          a && /* @__PURE__ */ e("label", { htmlFor: n.id, className: h(
+            "input-label font-[number:var(--font-weight-input-option-label)] mb-1",
             n.id && "cursor-pointer"
-          ), children: o })
+          ), children: a })
         ] }),
-        /* @__PURE__ */ e(V, { children: s }),
+        /* @__PURE__ */ e(V, { children: l }),
         /* @__PURE__ */ e(K, { children: r })
       ]
     }
   );
-}, Cl = (n) => {
+}, Io = (n) => {
   const {
     className: t,
-    label: o,
-    description: s,
+    label: a,
+    description: l,
     error: r,
-    ...l
+    ...o
   } = n;
   return /* @__PURE__ */ d(
     "div",
     {
-      className: m(
+      className: h(
         "flex flex-col",
         t
       ),
@@ -911,16 +911,16 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
             "input",
             {
               type: "checkbox",
-              className: "h-6 w-6 shrink-0 rounded-lg border check-base shadow-sm ring-0 hover:ring-4 focus:ring-4 ring-offset-0 focus:outline-0 transition-all duration-150",
-              ...l
+              className: "h-6 w-6 shrink-0 rounded-[var(--border-radius-checkbox)] border-[length:var(--border-width-input)] check-base shadow-[var(--shadow-control)] ring-0 hover:ring-[length:var(--control-ring-width)] focus:ring-[length:var(--control-ring-width)] ring-offset-0 focus:outline-0 transition-all duration-[var(--control-transition-duration)]",
+              ...o
             }
           ),
-          o && /* @__PURE__ */ e("label", { htmlFor: n.id, className: m(
-            "input-label font-medium mb-1",
+          a && /* @__PURE__ */ e("label", { htmlFor: n.id, className: h(
+            "input-label font-[number:var(--font-weight-input-option-label)] mb-1",
             n.id && "cursor-pointer"
-          ), children: o })
+          ), children: a })
         ] }),
-        /* @__PURE__ */ e(V, { children: s }),
+        /* @__PURE__ */ e(V, { children: l }),
         /* @__PURE__ */ e(K, { children: r })
       ]
     }
@@ -929,144 +929,144 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
   sm: "h-7",
   md: "h-8",
   lg: "h-10"
-}, br = {
+}, vr = {
   sm: "px-2.5",
   md: "px-3",
   lg: "px-4"
-}, vr = {
+}, br = {
   sm: "text-xs",
   md: "text-sm",
   lg: "text-sm"
-}, Il = (n) => {
+}, Ro = (n) => {
   const {
     label: t,
-    description: o,
-    error: s,
+    description: a,
+    error: l,
     placeholder: r = "No file chosen",
-    buttonText: l = "Choose",
-    Icon: a = Jt,
-    size: i = "md",
+    buttonText: o = "Choose",
+    Icon: i = Jt,
+    size: s = "md",
     value: c,
-    isUploaded: b = !1,
+    isUploaded: v = !1,
     isUploading: R = !1,
     onChange: N,
-    onDropRejected: h,
-    accept: v,
+    onDropRejected: m,
+    accept: b,
     maxSize: f,
     minSize: p,
     disabled: u = !1,
     className: I
-  } = n, x = async (z) => {
-    const [w] = z;
+  } = n, x = async (O) => {
+    const [w] = O;
     w && await N?.(w);
   }, {
     getRootProps: y,
     getInputProps: k,
     open: S,
-    isDragActive: O,
+    isDragActive: z,
     isFocused: P
-  } = zt({
+  } = Ot({
     multiple: !1,
-    accept: v,
+    accept: b,
     maxSize: f,
     minSize: p,
     disabled: u,
     onDrop: x,
-    onDropRejected: h
+    onDropRejected: m
   }), T = c?.name;
-  return /* @__PURE__ */ e(Q.Provider, { value: i, children: /* @__PURE__ */ d("div", { className: m("flex flex-col", I), children: [
+  return /* @__PURE__ */ e(Q.Provider, { value: s, children: /* @__PURE__ */ d("div", { className: h("flex flex-col", I), children: [
     /* @__PURE__ */ e(Y, { children: t }),
     /* @__PURE__ */ d(
       "div",
       {
         ...y({
-          className: m(
+          className: h(
             "flex flex-row items-center",
-            "border input-base rounded-xl shadow-sm transition-all duration-150",
+            "border-[length:var(--border-width-input)] input-base rounded-[var(--border-radius-input)] shadow-[var(--shadow-control)] transition-all duration-[var(--control-transition-duration)]",
             "ring-0 focus:outline-none",
-            (P || O) && "ring-4",
-            s && "input-error",
+            (P || z) && "ring-[length:var(--control-ring-width)]",
+            l && "input-error",
             u && "opacity-60 cursor-not-allowed",
-            te[i],
-            me[i],
+            te[s],
+            he[s],
             "gap-3"
           )
         }),
         children: [
           /* @__PURE__ */ e("input", { ...k() }),
-          /* @__PURE__ */ e(a, { className: m("input-icon shrink-0", ae[i]) }),
+          /* @__PURE__ */ e(i, { className: h("input-icon shrink-0", ie[s]) }),
           /* @__PURE__ */ e(
             "span",
             {
-              className: m(
+              className: h(
                 "flex-1 truncate",
-                J[i],
+                J[s],
                 !T && "text-[var(--color-input-placeholder)]"
               ),
               children: T ?? r
             }
           ),
-          s && /* @__PURE__ */ e(ne, {}),
-          R && !s && /* @__PURE__ */ e("div", { className: "h-5 w-5 flex items-center justify-center", children: /* @__PURE__ */ e(Se, { className: "h-4 w-4 text-[var(--color-input-icon)]" }) }),
-          b && !R && !s && /* @__PURE__ */ e("div", { className: "h-5 w-5", children: /* @__PURE__ */ e(tt, { className: "h-5 w-5 text-[var(--color-status-success)]" }) }),
+          l && /* @__PURE__ */ e(ne, {}),
+          R && !l && /* @__PURE__ */ e("div", { className: "h-5 w-5 flex items-center justify-center", children: /* @__PURE__ */ e(Se, { className: "h-4 w-4 text-[var(--color-input-icon)]" }) }),
+          v && !R && !l && /* @__PURE__ */ e("div", { className: "h-5 w-5", children: /* @__PURE__ */ e(tt, { className: "h-5 w-5 text-[var(--color-status-success)]" }) }),
           /* @__PURE__ */ e(
             "button",
             {
               type: "button",
               disabled: u,
-              onClick: (z) => {
-                z.stopPropagation(), S();
+              onClick: (O) => {
+                O.stopPropagation(), S();
               },
-              className: m(
+              className: h(
                 "inline-flex flex-row items-center justify-center shrink-0",
-                "border button-white shadow-sm rounded-[calc(var(--border-radius-input)-0.25rem)]",
-                "font-semibold cursor-pointer select-none transition-all duration-150",
-                "button-ring ring-0 hover:ring-4 active:ring-1 focus:outline-none focus:ring-4",
+                "border-[length:var(--border-width-input)] button-white shadow-[var(--shadow-control)] rounded-[calc(var(--border-radius-button)-0.25rem)]",
+                "font-[number:var(--font-weight-button)] font-[family-name:var(--font-family-base)] cursor-pointer select-none transition-all duration-[var(--control-transition-duration)]",
+                "button-ring ring-0 hover:ring-[length:var(--control-ring-width)] active:ring-[length:var(--control-ring-width-active)] focus:outline-none focus:ring-[length:var(--control-ring-width)]",
                 "disabled:cursor-default",
                 "mr-1.5",
-                gr[i],
-                br[i],
-                vr[i]
+                gr[s],
+                vr[s],
+                br[s]
               ),
-              children: l
+              children: o
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ e(V, { children: o }),
-    /* @__PURE__ */ e(K, { children: s })
+    /* @__PURE__ */ e(V, { children: a }),
+    /* @__PURE__ */ e(K, { children: l })
   ] }) });
 }, xr = (n) => n < 1024 ? `${n} B` : n < 1024 * 1024 ? `${(n / 1024).toFixed(1)} KB` : n < 1024 * 1024 * 1024 ? `${(n / (1024 * 1024)).toFixed(1)} MB` : `${(n / (1024 * 1024 * 1024)).toFixed(1)} GB`, wr = (n) => {
   const {
     file: t,
-    isUploaded: o = !1,
-    isUploading: s = !1,
+    isUploaded: a = !1,
+    isUploading: l = !1,
     error: r,
-    onRemove: l,
-    className: a
-  } = n, i = s || o || !!r;
+    onRemove: o,
+    className: i
+  } = n, s = l || a || !!r;
   return /* @__PURE__ */ d(
     "div",
     {
-      className: m(
+      className: h(
         "flex flex-row items-center gap-3",
-        "border input-base rounded-xl shadow-sm",
+        "border-[length:var(--border-width-input)] input-base rounded-[var(--border-radius-input)] shadow-[var(--shadow-control)]",
         "pl-4 pr-1 py-1",
         r && "input-error",
-        a
+        i
       ),
       children: [
-        i && /* @__PURE__ */ e("div", { className: "shrink-0 h-5 w-5 flex items-center justify-center", children: r ? /* @__PURE__ */ e(et, { className: "h-5 w-5 input-error-icon" }) : s ? /* @__PURE__ */ e(Se, { className: "h-4 w-4 text-[var(--color-input-icon)]" }) : /* @__PURE__ */ e(tt, { className: "h-5 w-5 text-[var(--color-status-success)]" }) }),
-        /* @__PURE__ */ e("div", { className: "flex-1 min-w-0 font-medium truncate", children: t.name }),
+        s && /* @__PURE__ */ e("div", { className: "shrink-0 h-5 w-5 flex items-center justify-center", children: r ? /* @__PURE__ */ e(et, { className: "h-5 w-5 input-error-icon" }) : l ? /* @__PURE__ */ e(Se, { className: "h-4 w-4 text-[var(--color-input-icon)]" }) : /* @__PURE__ */ e(tt, { className: "h-5 w-5 text-[var(--color-status-success)]" }) }),
+        /* @__PURE__ */ e("div", { className: "flex-1 min-w-0 font-[number:var(--font-weight-input-option-label)] truncate", children: t.name }),
         /* @__PURE__ */ e("div", { className: "shrink-0 text-sm text-[var(--color-input-description-text)]", children: xr(t.size) }),
-        l && /* @__PURE__ */ e(
+        o && /* @__PURE__ */ e(
           Ye,
           {
             variant: "transparent",
             size: "sm",
             Icon: de,
-            onClick: l,
+            onClick: o,
             "aria-label": "Remove file",
             className: "shrink-0"
           }
@@ -1074,21 +1074,21 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
       ]
     }
   );
-}, Rl = (n) => {
+}, So = (n) => {
   const {
     label: t,
-    description: o,
-    error: s,
+    description: a,
+    error: l,
     title: r = "Drop files here",
-    hint: l,
-    Icon: a = Yt,
-    onUpload: i,
+    hint: o,
+    Icon: i = Yt,
+    onUpload: s,
     onFileRemoved: c,
-    onDropRejected: b,
+    onDropRejected: v,
     renderFileTile: R,
     accept: N,
-    maxSize: h,
-    minSize: v,
+    maxSize: m,
+    minSize: b,
     maxFiles: f,
     disabled: p = !1,
     className: u
@@ -1099,55 +1099,55 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
     const M = g.map((L) => ({
       id: String(++y.current),
       file: L,
-      status: i ? "uploading" : "idle"
+      status: s ? "uploading" : "idle"
     }));
-    if (x((L) => [...L, ...M]), !!i)
+    if (x((L) => [...L, ...M]), !!s)
       for (const L of M)
-        Promise.resolve().then(() => i(L.file)).then(() => k(L.id, { status: "uploaded" })).catch(($) => {
+        Promise.resolve().then(() => s(L.file)).then(() => k(L.id, { status: "uploaded" })).catch(($) => {
           k(L.id, {
             status: "error",
             error: $ instanceof Error ? $ : new Error(String($))
           });
         });
-  }, O = (g) => {
+  }, z = (g) => {
     const M = I.find((L) => L.id === g);
     x((L) => L.filter(($) => $.id !== g)), M && c?.(M.file);
   }, {
     getRootProps: P,
     getInputProps: T,
-    isDragActive: z,
+    isDragActive: O,
     isFocused: w
-  } = zt({
+  } = Ot({
     multiple: !0,
     accept: N,
-    maxSize: h,
-    minSize: v,
+    maxSize: m,
+    minSize: b,
     maxFiles: f,
     disabled: p,
     onDrop: S,
-    onDropRejected: b
+    onDropRejected: v
   });
-  return /* @__PURE__ */ d("div", { className: m("flex flex-col", u), children: [
+  return /* @__PURE__ */ d("div", { className: h("flex flex-col", u), children: [
     /* @__PURE__ */ e(Y, { children: t }),
     /* @__PURE__ */ d(
       "div",
       {
         ...P({
-          className: m(
+          className: h(
             "flex flex-col items-center justify-center gap-1",
-            "border-2 border-dashed input-base rounded-xl bg-transparent!",
-            "py-10 px-6 cursor-pointer transition-all duration-150",
+            "border-2 border-dashed input-base rounded-[var(--border-radius-input)] bg-transparent!",
+            "py-10 px-6 cursor-pointer transition-all duration-[var(--control-transition-duration)]",
             "ring-0 focus:outline-none",
-            (w || z) && "ring-4",
-            s && "input-error",
+            (w || O) && "ring-[length:var(--control-ring-width)]",
+            l && "input-error",
             p && "opacity-60 cursor-not-allowed"
           )
         }),
         children: [
           /* @__PURE__ */ e("input", { ...T() }),
-          /* @__PURE__ */ e("div", { className: "h-14 w-14 rounded-xl flex items-center justify-center bg-[var(--color-input-file-icon-bg)] mb-2", children: /* @__PURE__ */ e(a, { className: "h-7 w-7 input-icon" }) }),
-          /* @__PURE__ */ e("div", { className: "text-base font-semibold", children: r }),
-          l && /* @__PURE__ */ e("div", { className: "text-sm text-[var(--color-input-description-text)] ", children: l })
+          /* @__PURE__ */ e("div", { className: "h-14 w-14 rounded-[var(--border-radius-input)] flex items-center justify-center bg-[var(--color-input-file-icon-bg)] mb-2", children: /* @__PURE__ */ e(i, { className: "h-7 w-7 input-icon" }) }),
+          /* @__PURE__ */ e("div", { className: "text-base font-[number:var(--font-weight-button)]", children: r }),
+          o && /* @__PURE__ */ e("div", { className: "text-sm text-[var(--color-input-description-text)] ", children: o })
         ]
       }
     ),
@@ -1157,18 +1157,18 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
         isUploading: g.status === "uploading",
         isUploaded: g.status === "uploaded",
         error: g.status === "error" ? g.error?.message : void 0,
-        onRemove: () => O(g.id)
+        onRemove: () => z(g.id)
       };
       return /* @__PURE__ */ e(C.Fragment, { children: R ? R(g.file, M) : /* @__PURE__ */ e(wr, { ...M }) }, g.id);
     }) }),
-    /* @__PURE__ */ e(V, { children: o }),
-    /* @__PURE__ */ e(K, { children: s })
+    /* @__PURE__ */ e(V, { children: a }),
+    /* @__PURE__ */ e(K, { children: l })
   ] });
 }, Nr = [
   In,
   Rn,
   Tt,
-  On,
+  zn,
   Pn
 ], wt = {
   paragraph: "lexical-paragraph",
@@ -1208,42 +1208,42 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
   tone: "light",
   orientation: "horizontal"
 }), we = () => Ze(Ae), _t = () => {
-  const [n] = ue(), [t, o] = W($t);
+  const [n] = ue(), [t, a] = W($t);
   return _(() => {
-    const s = () => {
+    const l = () => {
       n.getEditorState().read(() => {
         const r = Lt();
         if (!Pt(r))
           return;
-        const l = r.anchor.getNode(), a = Hn(l, Tt), i = a && zn(a) ? a.getListType() : null;
+        const o = r.anchor.getNode(), i = Hn(o, Tt), s = i && On(i) ? i.getListType() : null;
         let c = "paragraph";
-        if (!i) {
-          const v = l.getKey() === "root" ? l : l.getTopLevelElementOrThrow();
-          Sn(v) && (c = v.getTag());
+        if (!s) {
+          const b = o.getKey() === "root" ? o : o.getTopLevelElementOrThrow();
+          Sn(b) && (c = b.getTag());
         }
-        const b = r.hasFormat("bold"), R = r.hasFormat("italic"), N = r.hasFormat("underline"), h = pt(l.getParent()) || pt(l);
-        o((v) => ({
-          ...v,
-          isBold: b,
+        const v = r.hasFormat("bold"), R = r.hasFormat("italic"), N = r.hasFormat("underline"), m = pt(o.getParent()) || pt(o);
+        a((b) => ({
+          ...b,
+          isBold: v,
           isItalic: R,
           isUnderline: N,
-          isLink: h,
-          isUnorderedList: i === "bullet",
-          isOrderedList: i === "number",
+          isLink: m,
+          isUnorderedList: s === "bullet",
+          isOrderedList: s === "number",
           blockType: c
         }));
       });
     };
     return Et(
-      n.registerUpdateListener(() => s()),
+      n.registerUpdateListener(() => l()),
       n.registerCommand(
         En,
-        (r) => (o((l) => ({ ...l, canUndo: r })), !1),
+        (r) => (a((o) => ({ ...o, canUndo: r })), !1),
         Pe
       ),
       n.registerCommand(
         Fn,
-        (r) => (o((l) => ({ ...l, canRedo: r })), !1),
+        (r) => (a((o) => ({ ...o, canRedo: r })), !1),
         Pe
       )
     );
@@ -1252,40 +1252,40 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
   dismiss: Ze(jt) || (() => {
   })
 }), Ue = (n) => {
-  const { trigger: t, children: o, placement: s = "bottom-end", minWidth: r = 200, className: l } = n, [a, i] = W(!1), { Popover: c, anchorRef: b } = ct({
-    placement: s,
-    open: a,
-    onOpenChange: i,
+  const { trigger: t, children: a, placement: l = "bottom-end", minWidth: r = 200, className: o } = n, [i, s] = W(!1), { Popover: c, anchorRef: v } = ct({
+    placement: l,
+    open: i,
+    onOpenChange: s,
     minWidth: r
   });
   return /* @__PURE__ */ d(ce, { children: [
-    /* @__PURE__ */ e("div", { ref: b, className: l, onClick: () => i(!a), children: t }),
-    /* @__PURE__ */ e(c, { open: a, children: /* @__PURE__ */ e(ve, { padding: "sm", children: /* @__PURE__ */ e(jt.Provider, { value: () => i(!1), children: o }) }) })
+    /* @__PURE__ */ e("div", { ref: v, className: o, onClick: () => s(!i), children: t }),
+    /* @__PURE__ */ e(c, { open: i, children: /* @__PURE__ */ e(be, { padding: "sm", children: /* @__PURE__ */ e(jt.Provider, { value: () => s(!1), children: a }) }) })
   ] });
-}, kr = "inline-flex flex-row items-center gap-3 h-10 px-3 font-semibold ring-0 dropdown-item rounded-lg cursor-pointer transition-all duration-150 select-none focus:outline-none focus:ring-0 border border-transparent bg-transparent", X = C.forwardRef((n, t) => {
+}, kr = "inline-flex flex-row items-center gap-3 h-10 px-3 font-[number:var(--font-weight-dropdown-item)] font-[family-name:var(--font-family-base)] ring-0 dropdown-item rounded-[var(--border-radius-menu-item)] cursor-pointer transition-all duration-[var(--control-transition-duration)] select-none focus:outline-none focus:ring-0 border border-transparent bg-transparent", X = C.forwardRef((n, t) => {
   const {
-    className: o,
-    children: s,
+    className: a,
+    children: l,
     Icon: r,
-    onClick: l,
-    dismissOnClick: a = !0,
-    ...i
-  } = n, { dismiss: c } = yr(), b = (R) => {
-    l && l(R), a && c();
+    onClick: o,
+    dismissOnClick: i = !0,
+    ...s
+  } = n, { dismiss: c } = yr(), v = (R) => {
+    o && o(R), i && c();
   };
   return /* @__PURE__ */ d(
     "button",
     {
       ref: t,
-      className: m(
+      className: h(
         kr,
-        o
+        a
       ),
-      onClick: b,
-      ...i,
+      onClick: v,
+      ...s,
       children: [
         r && /* @__PURE__ */ e(r, { className: "h-5 w-5" }),
-        s
+        l
       ]
     }
   );
@@ -1296,12 +1296,12 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
   { value: "h3", label: "Heading 3" },
   { value: "h4", label: "Heading 4" }
 ], Cr = () => {
-  const [n] = ue(), { state: t, tone: o } = we(), s = (l) => {
+  const [n] = ue(), { state: t, tone: a } = we(), l = (o) => {
     n.update(() => {
-      const a = Lt();
-      Pt(a) && (l === "paragraph" ? bt(a, () => Mn()) : bt(a, () => Dn(l)));
+      const i = Lt();
+      Pt(i) && (o === "paragraph" ? vt(i, () => Mn()) : vt(i, () => Dn(o)));
     });
-  }, r = Ge.find((l) => l.value === t.blockType) ?? Ge[0];
+  }, r = Ge.find((o) => o.value === t.blockType) ?? Ge[0];
   return /* @__PURE__ */ e(
     Ue,
     {
@@ -1311,82 +1311,82 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
         "button",
         {
           type: "button",
-          onMouseDown: (l) => l.preventDefault(),
-          className: m(
-            "lexical-tb-btn h-8 px-2 gap-1 text-sm font-medium",
-            o === "dark" ? "lexical-tb-btn-dark" : "lexical-tb-btn-light"
+          onMouseDown: (o) => o.preventDefault(),
+          className: h(
+            "lexical-tb-btn h-8 px-2 gap-1 text-sm font-[number:var(--font-weight-input-option-label)]",
+            a === "dark" ? "lexical-tb-btn-dark" : "lexical-tb-btn-light"
           ),
           children: [
             r.label,
-            /* @__PURE__ */ e(be, { className: "h-4 w-4" })
+            /* @__PURE__ */ e(ve, { className: "h-4 w-4" })
           ]
         }
       ),
-      children: Ge.map((l) => /* @__PURE__ */ e(
+      children: Ge.map((o) => /* @__PURE__ */ e(
         X,
         {
-          Icon: l.value === t.blockType ? Rt : void 0,
-          onClick: () => s(l.value),
-          className: l.value === t.blockType ? void 0 : "pl-11",
-          children: l.label
+          Icon: o.value === t.blockType ? Rt : void 0,
+          onClick: () => l(o.value),
+          className: o.value === t.blockType ? void 0 : "pl-11",
+          children: o.label
         },
-        l.value
+        o.value
       ))
     }
   );
 }, Ir = {
   light: "lexical-tb-btn-light",
   dark: "lexical-tb-btn-dark"
-}, ie = C.forwardRef(
+}, se = C.forwardRef(
   (n, t) => {
-    const { Icon: o, active: s = !1, tone: r = "light", className: l, onMouseDown: a, ...i } = n;
+    const { Icon: a, active: l = !1, tone: r = "light", className: o, onMouseDown: i, ...s } = n;
     return /* @__PURE__ */ e(
       "button",
       {
         ref: t,
         type: "button",
-        onMouseDown: (b) => {
-          b.preventDefault(), a?.(b);
+        onMouseDown: (v) => {
+          v.preventDefault(), i?.(v);
         },
-        className: m(
+        className: h(
           "lexical-tb-btn h-8 w-8",
           Ir[r],
-          s && "lexical-tb-btn-active",
-          l
+          l && "lexical-tb-btn-active",
+          o
         ),
-        ...i,
-        children: /* @__PURE__ */ e(o, { className: "h-[18px] w-[18px]" })
+        ...s,
+        children: /* @__PURE__ */ e(a, { className: "h-[18px] w-[18px]" })
       }
     );
   }
 ), Rr = () => {
-  const [n] = ue(), { state: t, tone: o } = we();
+  const [n] = ue(), { state: t, tone: a } = we();
   return /* @__PURE__ */ d(ce, { children: [
     /* @__PURE__ */ e(
-      ie,
+      se,
       {
         Icon: Qt,
-        tone: o,
+        tone: a,
         active: t.isBold,
         "aria-label": "Bold",
         onClick: () => n.dispatchCommand(je, "bold")
       }
     ),
     /* @__PURE__ */ e(
-      ie,
+      se,
       {
         Icon: Zt,
-        tone: o,
+        tone: a,
         active: t.isItalic,
         "aria-label": "Italic",
         onClick: () => n.dispatchCommand(je, "italic")
       }
     ),
     /* @__PURE__ */ e(
-      ie,
+      se,
       {
         Icon: en,
-        tone: o,
+        tone: a,
         active: t.isUnderline,
         "aria-label": "Underline",
         onClick: () => n.dispatchCommand(je, "underline")
@@ -1394,33 +1394,33 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
     )
   ] });
 }, Sr = () => {
-  const [n] = ue(), { state: t, tone: o } = we(), s = () => {
+  const [n] = ue(), { state: t, tone: a } = we(), l = () => {
     n.dispatchCommand(
-      t.isUnorderedList ? ht : Tn,
+      t.isUnorderedList ? mt : Tn,
       void 0
     );
   }, r = () => {
     n.dispatchCommand(
-      t.isOrderedList ? ht : Ln,
+      t.isOrderedList ? mt : Ln,
       void 0
     );
   };
   return /* @__PURE__ */ d(ce, { children: [
     /* @__PURE__ */ e(
-      ie,
+      se,
       {
         Icon: Je,
-        tone: o,
+        tone: a,
         active: t.isUnorderedList,
         "aria-label": "Bullet list",
-        onClick: s
+        onClick: l
       }
     ),
     /* @__PURE__ */ e(
-      ie,
+      se,
       {
         Icon: tn,
-        tone: o,
+        tone: a,
         active: t.isOrderedList,
         "aria-label": "Numbered list",
         onClick: r
@@ -1428,7 +1428,7 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
     )
   ] });
 }, Dr = () => {
-  const [n] = ue(), { state: t, tone: o } = we(), s = () => {
+  const [n] = ue(), { state: t, tone: a } = we(), l = () => {
     if (t.isLink) {
       n.dispatchCommand(gt, null);
       return;
@@ -1437,65 +1437,65 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
     r && n.dispatchCommand(gt, r);
   };
   return /* @__PURE__ */ e(
-    ie,
+    se,
     {
       Icon: nn,
-      tone: o,
+      tone: a,
       active: t.isLink,
       "aria-label": "Link",
-      onClick: s
+      onClick: l
     }
   );
-}, Or = () => {
-  const [n] = ue(), { state: t, tone: o } = we();
+}, zr = () => {
+  const [n] = ue(), { state: t, tone: a } = we();
   return /* @__PURE__ */ d(ce, { children: [
     /* @__PURE__ */ e(
-      ie,
+      se,
       {
         Icon: rn,
-        tone: o,
+        tone: a,
         disabled: !t.canUndo,
         "aria-label": "Undo",
         onClick: () => n.dispatchCommand(Bn, void 0)
       }
     ),
     /* @__PURE__ */ e(
-      ie,
+      se,
       {
-        Icon: ln,
-        tone: o,
+        Icon: on,
+        tone: a,
         disabled: !t.canRedo,
         "aria-label": "Redo",
         onClick: () => n.dispatchCommand(An, void 0)
       }
     )
   ] });
-}, zr = {
+}, Or = {
   light: "lexical-tb-divider-light",
   dark: "lexical-tb-divider-dark"
 }, qe = (n) => {
-  const { tone: t, className: o } = n, { tone: s, orientation: r } = we();
+  const { tone: t, className: a } = n, { tone: l, orientation: r } = we();
   return /* @__PURE__ */ e(
     "div",
     {
-      className: m(
+      className: h(
         r === "vertical" ? "h-px w-full my-1" : "w-px h-5 my-auto mx-1",
         "shrink-0",
-        zr[t ?? s],
-        o
+        Or[t ?? l],
+        a
       )
     }
   );
 }, Nt = 4, Tr = 36, Xt = (n) => {
   const t = [];
-  return C.Children.forEach(n, (o) => {
-    C.isValidElement(o) && o.type === C.Fragment ? t.push(...Xt(o.props.children)) : t.push(o);
+  return C.Children.forEach(n, (a) => {
+    C.isValidElement(a) && a.type === C.Fragment ? t.push(...Xt(a.props.children)) : t.push(a);
   }), t;
 }, Vt = (n) => {
-  const { children: t } = n, { state: o, tone: s } = we(), r = Xt(t), l = Ce(null), a = Ce(null), [i, c] = W(r.length), b = Le(() => {
-    const h = l.current, v = a.current;
-    if (!h || !v) return;
-    const f = h.clientWidth, p = Array.from(v.children).map((y) => y.offsetWidth);
+  const { children: t } = n, { state: a, tone: l } = we(), r = Xt(t), o = Ce(null), i = Ce(null), [s, c] = W(r.length), v = Le(() => {
+    const m = o.current, b = i.current;
+    if (!m || !b) return;
+    const f = m.clientWidth, p = Array.from(b.children).map((y) => y.offsetWidth);
     if (p.reduce((y, k, S) => y + k + (S > 0 ? Nt : 0), 0) <= f) {
       c(p.length);
       return;
@@ -1509,30 +1509,30 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
     c(x);
   }, []);
   It(() => {
-    b();
+    v();
   }), _(() => {
-    const h = l.current, v = a.current;
-    if (!h) return;
-    const f = new ResizeObserver(() => b());
-    return f.observe(h), v && f.observe(v), () => f.disconnect();
-  }, [b]);
-  const R = r.slice(0, i), N = r.slice(i);
+    const m = o.current, b = i.current;
+    if (!m) return;
+    const f = new ResizeObserver(() => v());
+    return f.observe(m), b && f.observe(b), () => f.disconnect();
+  }, [v]);
+  const R = r.slice(0, s), N = r.slice(s);
   return /* @__PURE__ */ d(
     "div",
     {
-      ref: l,
+      ref: o,
       className: "relative flex flex-row items-center gap-1 min-w-0 flex-1",
       children: [
         /* @__PURE__ */ e(
           "div",
           {
-            ref: a,
+            ref: i,
             "aria-hidden": !0,
             className: "pointer-events-none invisible absolute left-0 top-0 flex flex-row items-center gap-1 w-max",
-            children: r.map((h, v) => /* @__PURE__ */ e("div", { className: "flex flex-row items-center", children: h }, v))
+            children: r.map((m, b) => /* @__PURE__ */ e("div", { className: "flex flex-row items-center", children: m }, b))
           }
         ),
-        R.map((h, v) => /* @__PURE__ */ e(C.Fragment, { children: h }, v)),
+        R.map((m, b) => /* @__PURE__ */ e(C.Fragment, { children: m }, b)),
         N.length > 0 && /* @__PURE__ */ e(
           Ue,
           {
@@ -1543,20 +1543,20 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
               {
                 type: "button",
                 "aria-label": "More",
-                onMouseDown: (h) => h.preventDefault(),
-                className: m(
+                onMouseDown: (m) => m.preventDefault(),
+                className: h(
                   "lexical-tb-btn h-8 w-8 shrink-0",
-                  s === "dark" ? "lexical-tb-btn-dark" : "lexical-tb-btn-light"
+                  l === "dark" ? "lexical-tb-btn-dark" : "lexical-tb-btn-light"
                 ),
-                children: /* @__PURE__ */ e(on, { className: "h-[18px] w-[18px]" })
+                children: /* @__PURE__ */ e(an, { className: "h-[18px] w-[18px]" })
               }
             ),
-            children: /* @__PURE__ */ e(Ae.Provider, { value: { state: o, tone: "light", orientation: "vertical" }, children: /* @__PURE__ */ e(
+            children: /* @__PURE__ */ e(Ae.Provider, { value: { state: a, tone: "light", orientation: "vertical" }, children: /* @__PURE__ */ e(
               "div",
               {
                 className: "flex flex-col items-stretch gap-1",
-                onMouseDown: (h) => h.preventDefault(),
-                children: N.map((h, v) => /* @__PURE__ */ e(C.Fragment, { children: h }, v))
+                onMouseDown: (m) => m.preventDefault(),
+                children: N.map((m, b) => /* @__PURE__ */ e(C.Fragment, { children: m }, b))
               }
             ) })
           }
@@ -1572,114 +1572,114 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
   /* @__PURE__ */ e(Sr, {}),
   /* @__PURE__ */ e(Dr, {}),
   /* @__PURE__ */ e(qe, {}),
-  /* @__PURE__ */ e(Or, {})
-] }), Sl = () => dt(), Lr = (n) => {
-  const { render: t, className: o } = n, [s] = ue(), r = _t();
+  /* @__PURE__ */ e(zr, {})
+] }), Do = () => dt(), Lr = (n) => {
+  const { render: t, className: a } = n, [l] = ue(), r = _t();
   return /* @__PURE__ */ e(Ae.Provider, { value: { state: r, tone: "light" }, children: /* @__PURE__ */ e(
     "div",
     {
-      className: m(
+      className: h(
         "lexical-toolbar flex flex-row items-center p-1.5",
-        o
+        a
       ),
-      children: /* @__PURE__ */ e(Vt, { children: t ? t({ editor: s, state: r, tone: "light" }) : dt() })
+      children: /* @__PURE__ */ e(Vt, { children: t ? t({ editor: l, state: r, tone: "light" }) : dt() })
     }
   ) });
 }, Pr = (n) => {
-  const { render: t } = n, [o] = ue(), s = _t(), [r, l] = W(!1), { refs: a, floatingStyles: i } = st({
+  const { render: t } = n, [a] = ue(), l = _t(), [r, o] = W(!1), { refs: i, floatingStyles: s } = lt({
     placement: "top-start",
     strategy: "fixed",
     middleware: [
       fn(8),
       rt(),
-      lt({ padding: 8 }),
-      ot({
-        apply({ rects: c, elements: b }) {
-          b.floating.style.width = `${c.reference.width}px`;
+      ot({ padding: 8 }),
+      at({
+        apply({ rects: c, elements: v }) {
+          v.floating.style.width = `${c.reference.width}px`;
         }
       })
     ],
-    whileElementsMounted: at
+    whileElementsMounted: it
   });
-  return _(() => o.registerRootListener((c) => a.setReference(c ?? null)), [o, a]), _(() => Et(
-    o.registerCommand(
+  return _(() => a.registerRootListener((c) => i.setReference(c ?? null)), [a, i]), _(() => Et(
+    a.registerCommand(
       Un,
-      () => (l(!0), !1),
+      () => (o(!0), !1),
       Pe
     ),
-    o.registerCommand(
+    a.registerCommand(
       Wn,
-      () => (l(!1), !1),
+      () => (o(!1), !1),
       Pe
     )
-  ), [o]), /* @__PURE__ */ e(Ae.Provider, { value: { state: s, tone: "dark" }, children: /* @__PURE__ */ e(Me, { children: /* @__PURE__ */ e(De, { children: r && /* @__PURE__ */ e("div", { ref: a.setFloating, style: i, className: "z-50", children: /* @__PURE__ */ e(
+  ), [a]), /* @__PURE__ */ e(Ae.Provider, { value: { state: l, tone: "dark" }, children: /* @__PURE__ */ e(Me, { children: /* @__PURE__ */ e(De, { children: r && /* @__PURE__ */ e("div", { ref: i.setFloating, style: s, className: "z-50", children: /* @__PURE__ */ e(
     q.div,
     {
-      className: "lexical-floating-toolbar flex w-full flex-row items-center p-1 rounded-xl",
+      className: "lexical-floating-toolbar flex w-full flex-row items-center p-1 rounded-[var(--border-radius-dropdown)]",
       initial: { opacity: 0, y: 4 },
       animate: { opacity: 1, y: 0 },
       exit: { opacity: 0, y: 4 },
       transition: { duration: 0.1, ease: "easeInOut" },
-      children: /* @__PURE__ */ e(Vt, { children: t ? t({ editor: o, state: s, tone: "dark" }) : dt() })
+      children: /* @__PURE__ */ e(Vt, { children: t ? t({ editor: a, state: l, tone: "dark" }) : dt() })
     }
   ) }) }) }) });
-}, Dl = (n) => {
+}, zo = (n) => {
   const {
     label: t,
-    description: o,
-    error: s,
+    description: a,
+    error: l,
     placeholder: r,
-    value: l,
-    onChange: a,
-    size: i = "md",
+    value: o,
+    onChange: i,
+    size: s = "md",
     toolbar: c = "static",
-    renderToolbar: b,
+    renderToolbar: v,
     minRows: R = 4,
     maxRows: N,
-    autogrow: h = !1,
-    namespace: v = "InputLexical",
+    autogrow: m = !1,
+    namespace: b = "InputLexical",
     nodes: f,
     theme: p,
     autoFocus: u = !1,
     children: I,
     className: x
-  } = n, y = se(
+  } = n, y = le(
     () => ({
-      namespace: v,
+      namespace: b,
       theme: p ? { ...wt, ...p } : wt,
       nodes: [...Nr, ...f ?? []],
-      editorState: l ?? null,
-      onError: (z) => {
-        throw z;
+      editorState: o ?? null,
+      onError: (O) => {
+        throw O;
       }
     }),
     // Lexical reads initialConfig once on mount; later prop changes are ignored by design.
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   ), k = Le(
-    (z) => {
-      a?.(JSON.stringify(z.toJSON()));
+    (O) => {
+      i?.(JSON.stringify(O.toJSON()));
     },
-    [a]
-  ), S = J[i], O = !!s, P = (z) => `calc(${z} * 1lh + 1.5rem)`, T = h ? { minHeight: P(R), maxHeight: N ? P(N) : void 0 } : { height: P(R) };
-  return /* @__PURE__ */ e(Q.Provider, { value: i, children: /* @__PURE__ */ d("div", { className: m("flex flex-col", x), children: [
+    [i]
+  ), S = J[s], z = !!l, P = (O) => `calc(${O} * 1lh + 1.5rem)`, T = m ? { minHeight: P(R), maxHeight: N ? P(N) : void 0 } : { height: P(R) };
+  return /* @__PURE__ */ e(Q.Provider, { value: s, children: /* @__PURE__ */ d("div", { className: h("flex flex-col", x), children: [
     /* @__PURE__ */ e(Y, { children: t }),
     /* @__PURE__ */ e(gn, { initialConfig: y, children: /* @__PURE__ */ d(
       "div",
       {
-        className: m(
-          "relative flex flex-col border input-base rounded-xl shadow-sm overflow-hidden transition-all duration-150 ring-0 focus-within:ring-4 focus-within:outline-none",
-          O && "input-error"
+        className: h(
+          "relative flex flex-col border-[length:var(--border-width-input)] input-base rounded-[var(--border-radius-input)] shadow-[var(--shadow-control)] overflow-hidden transition-all duration-[var(--control-transition-duration)] ring-0 focus-within:ring-[length:var(--control-ring-width)] focus-within:outline-none font-[family-name:var(--font-family-base)]",
+          z && "input-error"
         ),
         children: [
-          c === "static" && /* @__PURE__ */ e(Lr, { render: b }),
+          c === "static" && /* @__PURE__ */ e(Lr, { render: v }),
           /* @__PURE__ */ e("div", { className: "relative flex-1 min-h-0", children: /* @__PURE__ */ e(
-            bn,
+            vn,
             {
               contentEditable: /* @__PURE__ */ e(
-                vn,
+                bn,
                 {
-                  className: m(
+                  className: h(
                     "lexical-content w-full outline-none px-3 py-3 leading-[1.55] overflow-y-auto mat-ui-hide-scrollbars",
                     S
                   ),
@@ -1688,7 +1688,7 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
                   placeholder: /* @__PURE__ */ e(
                     "div",
                     {
-                      className: m(
+                      className: h(
                         "lexical-placeholder pointer-events-none absolute left-3 top-3",
                         S
                       ),
@@ -1704,75 +1704,75 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
           /* @__PURE__ */ e(wn, {}),
           /* @__PURE__ */ e(Nn, {}),
           u && /* @__PURE__ */ e(kn, {}),
-          a && /* @__PURE__ */ e(yn, { onChange: k }),
+          i && /* @__PURE__ */ e(yn, { onChange: k }),
           I,
-          c === "floating" && /* @__PURE__ */ e(Pr, { render: b })
+          c === "floating" && /* @__PURE__ */ e(Pr, { render: v })
         ]
       }
     ) }),
-    /* @__PURE__ */ e(V, { children: o }),
-    /* @__PURE__ */ e(K, { children: s })
+    /* @__PURE__ */ e(V, { children: a }),
+    /* @__PURE__ */ e(K, { children: l })
   ] }) });
-}, Ol = (n) => {
+}, Oo = (n) => {
   const {
     className: t,
-    label: o,
-    description: s,
+    label: a,
+    description: l,
     options: r,
-    error: l,
-    size: a = "md",
-    ...i
+    error: o,
+    size: i = "md",
+    ...s
   } = n;
-  return /* @__PURE__ */ e(Q.Provider, { value: a, children: /* @__PURE__ */ d(
+  return /* @__PURE__ */ e(Q.Provider, { value: i, children: /* @__PURE__ */ d(
     "div",
     {
-      className: m(
+      className: h(
         "flex flex-col",
         t
       ),
       children: [
-        /* @__PURE__ */ e(Y, { children: o }),
+        /* @__PURE__ */ e(Y, { children: a }),
         /* @__PURE__ */ d("div", { className: "relative flex w-full flex-col", children: [
           /* @__PURE__ */ e(
             "select",
             {
-              className: m(
-                "appearance-none border input-base bg-none transition-all duration-150 rounded-xl shadow-sm ring-0 focus:ring-4 focus:outline-none",
-                te[a],
-                J[a],
-                me[a],
-                fe[a]
+              className: h(
+                "appearance-none border-[length:var(--border-width-input)] input-base bg-none transition-all duration-[var(--control-transition-duration)] rounded-[var(--border-radius-input)] shadow-[var(--shadow-control)] ring-0 focus:ring-[length:var(--control-ring-width)] focus:outline-none font-[number:var(--font-weight-input-text)] font-[family-name:var(--font-family-base)]",
+                te[i],
+                J[i],
+                he[i],
+                fe[i]
               ),
-              ...i,
-              children: r && r.map((c, b) => /* @__PURE__ */ e(
+              ...s,
+              children: r && r.map((c, v) => /* @__PURE__ */ e(
                 "option",
                 {
                   value: c.value,
                   disabled: c.disabled,
                   children: c.label
                 },
-                b
+                v
               ))
             }
           ),
-          /* @__PURE__ */ d(he, { children: [
-            l && /* @__PURE__ */ e(ne, {}),
-            /* @__PURE__ */ e(Z, { Icon: be })
+          /* @__PURE__ */ d(me, { children: [
+            o && /* @__PURE__ */ e(ne, {}),
+            /* @__PURE__ */ e(Z, { Icon: ve })
           ] })
         ] }),
-        /* @__PURE__ */ e(V, { children: s }),
-        /* @__PURE__ */ e(K, { children: l })
+        /* @__PURE__ */ e(V, { children: l }),
+        /* @__PURE__ */ e(K, { children: o })
       ]
     }
   ) });
 }, We = C.forwardRef((n, t) => {
   const {
-    children: o,
-    onClick: s,
+    children: a,
+    onClick: l,
     selected: r,
-    disabled: l = !1,
-    active: a = !1,
-    className: i,
+    disabled: o = !1,
+    active: i = !1,
+    className: s,
     ...c
   } = n;
   return /* @__PURE__ */ d(
@@ -1780,78 +1780,78 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
     {
       ref: t,
       ...c,
-      onClick: () => !l && s && s(),
-      className: m(
-        "option-base px-4 py-2 rounded-xl cursor-pointer transition-all duration-150 select-none flex flex-row gap-3 items-center",
-        r && !l && "option-selected",
-        a && !l && "option-active",
-        l && "option-disabled cursor-not-allowed hover:bg-transparent active:bg-transparent",
-        i
+      onClick: () => !o && l && l(),
+      className: h(
+        "option-base px-4 py-2 rounded-[var(--border-radius-option)] cursor-pointer transition-all duration-[var(--control-transition-duration)] select-none flex flex-row gap-3 items-center",
+        r && !o && "option-selected",
+        i && !o && "option-active",
+        o && "option-disabled cursor-not-allowed hover:bg-transparent active:bg-transparent",
+        s
       ),
       children: [
-        /* @__PURE__ */ e("div", { className: "flex-1 min-w-0 break-all line-clamp-1", children: o }),
-        r && !l && /* @__PURE__ */ e("div", { className: "shrink-0", children: /* @__PURE__ */ e(Rt, { className: "h-5 w-5" }) })
+        /* @__PURE__ */ e("div", { className: "flex-1 min-w-0 break-all line-clamp-1", children: a }),
+        r && !o && /* @__PURE__ */ e("div", { className: "shrink-0", children: /* @__PURE__ */ e(Rt, { className: "h-5 w-5" }) })
       ]
     }
   );
 }), He = C.forwardRef((n, t) => {
-  const { children: o, className: s, ...r } = n;
+  const { children: a, className: l, ...r } = n;
   return /* @__PURE__ */ e(
     "div",
     {
       ref: t,
       ...r,
-      className: m(
-        "option-group-header px-4 pt-3 pb-1 text-xs font-semibold uppercase tracking-wide select-none",
-        s
+      className: h(
+        "option-group-header px-4 pt-3 pb-1 text-xs font-[number:var(--font-weight-group-header)] uppercase tracking-wide select-none",
+        l
       ),
-      children: o
+      children: a
     }
   );
 }), $e = C.forwardRef((n, t) => {
-  const { className: o, ...s } = n;
+  const { className: a, ...l } = n;
   return /* @__PURE__ */ e(
     "div",
     {
       ref: t,
-      ...s,
-      className: m(
+      ...l,
+      className: h(
         "option-divider my-1 h-px",
-        o
+        a
       )
     }
   );
 }), H = (n) => !("kind" in n), G = (n, t) => n === t ? !0 : n == null || t == null || typeof n != "object" || typeof t != "object" ? !1 : JSON.stringify(n) === JSON.stringify(t), _e = (n) => {
   const {
     placement: t = "bottom",
-    fullWidth: o,
-    minWidth: s,
+    fullWidth: a,
+    minWidth: l,
     maxWidth: r,
-    open: l,
-    onOpenChange: a,
-    listRef: i,
+    open: o,
+    onOpenChange: i,
+    listRef: s,
     activeIndex: c,
-    onNavigate: b,
+    onNavigate: v,
     loop: R = !0,
     disabledIndices: N
-  } = n, h = C.useMemo(() => [
+  } = n, m = C.useMemo(() => [
     rt({ padding: 8 }),
-    lt({ padding: 8 }),
-    ot({
-      apply({ rects: T, elements: z }) {
-        o && (z.floating.style.width = `${T.reference.width}px`), s && (z.floating.style.minWidth = `${s}px`), r && (z.floating.style.maxWidth = `${r}px`);
+    ot({ padding: 8 }),
+    at({
+      apply({ rects: T, elements: O }) {
+        a && (O.floating.style.width = `${T.reference.width}px`), l && (O.floating.style.minWidth = `${l}px`), r && (O.floating.style.maxWidth = `${r}px`);
       }
     })
-  ], [o, r, s]), { refs: v, floatingStyles: f, context: p, placement: u } = st({
+  ], [a, r, l]), { refs: b, floatingStyles: f, context: p, placement: u } = lt({
     placement: t,
-    open: l,
-    onOpenChange: a,
-    middleware: h,
-    whileElementsMounted: at
-  }), I = hn(p, {
-    listRef: i,
+    open: o,
+    onOpenChange: i,
+    middleware: m,
+    whileElementsMounted: it
+  }), I = mn(p, {
+    listRef: s,
     activeIndex: c,
-    onNavigate: b,
+    onNavigate: v,
     loop: R,
     virtual: !0,
     focusItemOnOpen: !1,
@@ -1859,21 +1859,21 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
   }), x = St(p, {
     outsidePress: !0,
     escapeKey: !1
-  }), { getReferenceProps: y, getFloatingProps: k, getItemProps: S } = Dt([I, x]), O = C.useRef({
+  }), { getReferenceProps: y, getFloatingProps: k, getItemProps: S } = Dt([I, x]), z = C.useRef({
     floatingStyles: f,
-    setFloating: v.setFloating,
+    setFloating: b.setFloating,
     placement: t,
     getFloatingProps: k
   });
-  O.current = {
+  z.current = {
     floatingStyles: f,
-    setFloating: v.setFloating,
+    setFloating: b.setFloating,
     placement: u,
     getFloatingProps: k
   };
   const P = C.useMemo(() => {
-    const T = (z) => {
-      const { floatingStyles: w, setFloating: g, placement: M, getFloatingProps: L } = O.current, { className: $, open: j, children: re } = z;
+    const T = (O) => {
+      const { floatingStyles: w, setFloating: g, placement: M, getFloatingProps: L } = z.current, { className: $, open: j, children: re } = O;
       return /* @__PURE__ */ e(
         Ht,
         {
@@ -1890,7 +1890,7 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
     return C.memo(T);
   }, []);
   return {
-    anchorRef: v.setReference,
+    anchorRef: b.setReference,
     Popover: P,
     getReferenceProps: y,
     getItemProps: S
@@ -1898,25 +1898,25 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
 }, Er = (n) => {
   const {
     className: t,
-    label: o,
-    description: s,
+    label: a,
+    description: l,
     options: r,
-    onChange: l,
-    value: a,
-    placeholder: i,
+    onChange: o,
+    value: i,
+    placeholder: s,
     maxHeight: c = 300,
-    error: b,
+    error: v,
     size: R = "md",
     disabled: N = !1,
-    clearable: h = !1
-  } = n, [v, f] = W(!1), [p, u] = W(null), I = C.useRef(null), x = C.useRef([]), y = r?.find((w) => H(w) && G(w.value, a)), k = se(
+    clearable: m = !1
+  } = n, [b, f] = W(!1), [p, u] = W(null), I = C.useRef(null), x = C.useRef([]), y = r?.find((w) => H(w) && G(w.value, i)), k = le(
     () => r.map((w, g) => !H(w) || w.disabled ? g : -1).filter((w) => w !== -1),
     [r]
   );
-  xe(v, () => f(!1)), _(() => {
-    if (v) {
+  xe(b, () => f(!1)), _(() => {
+    if (b) {
       I.current?.focus({ preventScroll: !0 });
-      const w = r.findIndex((g) => H(g) && G(g.value, a));
+      const w = r.findIndex((g) => H(g) && G(g.value, i));
       if (w >= 0)
         u(w);
       else {
@@ -1925,30 +1925,30 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
       }
     } else
       u(null);
-  }, [v]);
-  const { anchorRef: S, Popover: O, getReferenceProps: P, getItemProps: T } = _e({
+  }, [b]);
+  const { anchorRef: S, Popover: z, getReferenceProps: P, getItemProps: T } = _e({
     placement: "bottom",
     fullWidth: !0,
     minWidth: 200,
-    open: v,
+    open: b,
     onOpenChange: f,
     listRef: x,
     activeIndex: p,
     onNavigate: u,
     disabledIndices: k
-  }), z = (w) => {
+  }), O = (w) => {
     const g = r[w];
-    g && H(g) && !g.disabled && (l(g.value), f(!1));
+    g && H(g) && !g.disabled && (o(g.value), f(!1));
   };
   return /* @__PURE__ */ e(Q.Provider, { value: R, children: /* @__PURE__ */ d(
     "div",
     {
-      className: m(
+      className: h(
         "flex flex-col",
         t
       ),
       children: [
-        /* @__PURE__ */ e(Y, { children: o }),
+        /* @__PURE__ */ e(Y, { children: a }),
         /* @__PURE__ */ d("div", { className: "relative flex w-full flex-col", ref: S, children: [
           /* @__PURE__ */ d(
             "div",
@@ -1959,33 +1959,33 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
                 tabIndex: N ? -1 : 0,
                 "aria-disabled": N,
                 onClick: () => {
-                  N || f(!v);
+                  N || f(!b);
                 },
                 onKeyDown: (w) => {
-                  N || (w.key === " " ? (w.preventDefault(), f((g) => !g)) : w.key === "Enter" && (w.preventDefault(), v && p != null ? z(p) : f(!0)));
+                  N || (w.key === " " ? (w.preventDefault(), f((g) => !g)) : w.key === "Enter" && (w.preventDefault(), b && p != null ? O(p) : f(!0)));
                 }
               }),
-              className: m(
-                "flex flex-row items-center border select-trigger transition-all duration-150 rounded-xl shadow-sm ring-0 focus:ring-4 focus:outline-none select-none",
+              className: h(
+                "flex flex-row items-center border-[length:var(--border-width-input)] select-trigger transition-all duration-[var(--control-transition-duration)] rounded-[var(--border-radius-input)] shadow-[var(--shadow-control)] ring-0 focus:ring-[length:var(--control-ring-width)] focus:outline-none select-none font-[number:var(--font-weight-input-text)] font-[family-name:var(--font-family-base)]",
                 te[R],
                 J[R],
-                me[R],
-                h && a ? Be[R] : fe[R],
-                N ? "select-trigger-disabled" : b && "select-trigger-error",
-                !N && v && "ring-4"
+                he[R],
+                m && i ? Be[R] : fe[R],
+                N ? "select-trigger-disabled" : v && "select-trigger-error",
+                !N && b && "ring-[length:var(--control-ring-width)]"
               ),
               children: [
                 y && /* @__PURE__ */ e("span", { className: "flex-1 min-w-0 break-all line-clamp-1 text-left", children: y.label }),
-                !y && i && /* @__PURE__ */ e("span", { className: "flex-1 min-w-0 break-all line-clamp-1 text-left select-placeholder", children: i })
+                !y && s && /* @__PURE__ */ e("span", { className: "flex-1 min-w-0 break-all line-clamp-1 text-left select-placeholder", children: s })
               ]
             }
           ),
-          /* @__PURE__ */ d(he, { children: [
-            !N && b && /* @__PURE__ */ e(ne, {}),
-            h && !!a && !N && /* @__PURE__ */ e(Z, { Icon: de, onClick: () => l(null) }),
-            /* @__PURE__ */ e(Z, { Icon: be })
+          /* @__PURE__ */ d(me, { children: [
+            !N && v && /* @__PURE__ */ e(ne, {}),
+            m && !!i && !N && /* @__PURE__ */ e(Z, { Icon: de, onClick: () => o(null) }),
+            /* @__PURE__ */ e(Z, { Icon: ve })
           ] }),
-          /* @__PURE__ */ e(O, { open: v, children: /* @__PURE__ */ e(ve, { className: "!p-0", style: { maxHeight: c }, children: /* @__PURE__ */ e("div", { className: "flex flex-col p-2 gap-1", children: r.map((w, g) => {
+          /* @__PURE__ */ e(z, { open: b, children: /* @__PURE__ */ e(be, { className: "!p-0", style: { maxHeight: c }, children: /* @__PURE__ */ e("div", { className: "flex flex-col p-2 gap-1", children: r.map((w, g) => {
             if (!H(w))
               return w.kind === "header" ? /* @__PURE__ */ e(
                 He,
@@ -2005,7 +2005,7 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
                 },
                 `divider-${g}`
               );
-            const M = G(w.value, a);
+            const M = G(w.value, i);
             return /* @__PURE__ */ e(
               We,
               {
@@ -2014,7 +2014,7 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
                     x.current[g] = L;
                   }
                 }),
-                onClick: () => z(g),
+                onClick: () => O(g),
                 selected: M,
                 active: p === g,
                 disabled: w.disabled,
@@ -2024,40 +2024,40 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
             );
           }) }) }) })
         ] }),
-        /* @__PURE__ */ e(V, { children: s }),
-        /* @__PURE__ */ e(K, { children: b })
+        /* @__PURE__ */ e(V, { children: l }),
+        /* @__PURE__ */ e(K, { children: v })
       ]
     }
   ) });
-}, zl = (n) => {
+}, To = (n) => {
   const {
     className: t,
-    label: o,
-    description: s,
+    label: a,
+    description: l,
     options: r,
-    onChange: l,
-    onSearch: a,
-    value: i,
+    onChange: o,
+    onSearch: i,
+    value: s,
     placeholder: c,
-    maxHeight: b = 300,
+    maxHeight: v = 300,
     error: R,
     size: N = "md",
-    disabled: h = !1,
-    clearable: v = !1
-  } = n, [f, p] = W(!1), [u, I] = W(r), [x, y] = W(""), [k, S] = W(null), O = C.useRef(null), P = C.useRef(null), T = C.useRef([]), z = r?.find((E) => H(E) && G(E.value, i)), w = se(() => x !== "" ? u : r, [x, u, r]), g = se(
+    disabled: m = !1,
+    clearable: b = !1
+  } = n, [f, p] = W(!1), [u, I] = W(r), [x, y] = W(""), [k, S] = W(null), z = C.useRef(null), P = C.useRef(null), T = C.useRef([]), O = r?.find((E) => H(E) && G(E.value, s)), w = le(() => x !== "" ? u : r, [x, u, r]), g = le(
     () => w.map((E, U) => !H(E) || E.disabled ? U : -1).filter((E) => E !== -1),
     [w]
   );
   xe(f, () => p(!1)), _(() => {
-    I(a(x));
-  }, [x, r, a]), _(() => {
+    I(i(x));
+  }, [x, r, i]), _(() => {
     if (f) {
       setTimeout(() => P.current?.focus(), 100);
-      const E = r.findIndex((U) => H(U) && G(U.value, i));
+      const E = r.findIndex((U) => H(U) && G(U.value, s));
       if (E >= 0)
         S(E);
       else {
-        const U = r.findIndex((le) => H(le) && !le.disabled);
+        const U = r.findIndex((oe) => H(oe) && !oe.disabled);
         S(U >= 0 ? U : null);
       }
     } else
@@ -2079,54 +2079,54 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
     disabledIndices: g
   }), re = (E) => {
     const U = w[E];
-    U && H(U) && !U.disabled && (l(U.value), p(!1));
+    U && H(U) && !U.disabled && (o(U.value), p(!1));
   }, Ne = w.some((E) => H(E));
   return /* @__PURE__ */ e(Q.Provider, { value: N, children: /* @__PURE__ */ d(
     "div",
     {
-      className: m(
+      className: h(
         "flex flex-col",
         t
       ),
       children: [
-        /* @__PURE__ */ e(Y, { children: o }),
+        /* @__PURE__ */ e(Y, { children: a }),
         /* @__PURE__ */ d("div", { className: "relative flex w-full flex-col", ref: M, children: [
           /* @__PURE__ */ d(
             "div",
             {
               ...$({
-                ref: O,
+                ref: z,
                 role: "button",
-                tabIndex: h ? -1 : 0,
-                "aria-disabled": h,
+                tabIndex: m ? -1 : 0,
+                "aria-disabled": m,
                 onClick: () => {
-                  h || p(!f);
+                  m || p(!f);
                 },
                 onKeyDown: (E) => {
-                  h || (E.key === " " ? (E.preventDefault(), p((U) => !U)) : E.key === "Enter" && !f && (E.preventDefault(), p(!0)));
+                  m || (E.key === " " ? (E.preventDefault(), p((U) => !U)) : E.key === "Enter" && !f && (E.preventDefault(), p(!0)));
                 }
               }),
-              className: m(
-                "flex flex-row items-center border select-trigger transition-all duration-150 rounded-xl shadow-sm ring-0 focus:ring-4 focus:outline-none select-none",
+              className: h(
+                "flex flex-row items-center border-[length:var(--border-width-input)] select-trigger transition-all duration-[var(--control-transition-duration)] rounded-[var(--border-radius-input)] shadow-[var(--shadow-control)] ring-0 focus:ring-[length:var(--control-ring-width)] focus:outline-none select-none font-[number:var(--font-weight-input-text)] font-[family-name:var(--font-family-base)]",
                 te[N],
                 J[N],
-                me[N],
-                v && i ? Be[N] : fe[N],
-                h ? "select-trigger-disabled" : R && "select-trigger-error",
-                !h && f && "ring-4"
+                he[N],
+                b && s ? Be[N] : fe[N],
+                m ? "select-trigger-disabled" : R && "select-trigger-error",
+                !m && f && "ring-[length:var(--control-ring-width)]"
               ),
               children: [
-                z && /* @__PURE__ */ e("span", { className: "flex-1 min-w-0 break-all line-clamp-1 text-left", children: z.label }),
-                !z && c && /* @__PURE__ */ e("span", { className: "flex-1 min-w-0 break-all line-clamp-1 text-left select-placeholder", children: c })
+                O && /* @__PURE__ */ e("span", { className: "flex-1 min-w-0 break-all line-clamp-1 text-left", children: O.label }),
+                !O && c && /* @__PURE__ */ e("span", { className: "flex-1 min-w-0 break-all line-clamp-1 text-left select-placeholder", children: c })
               ]
             }
           ),
-          /* @__PURE__ */ d(he, { children: [
-            !h && R && /* @__PURE__ */ e(ne, {}),
-            v && !!i && !h && /* @__PURE__ */ e(Z, { Icon: de, onClick: () => l(null) }),
-            /* @__PURE__ */ e(Z, { Icon: be })
+          /* @__PURE__ */ d(me, { children: [
+            !m && R && /* @__PURE__ */ e(ne, {}),
+            b && !!s && !m && /* @__PURE__ */ e(Z, { Icon: de, onClick: () => o(null) }),
+            /* @__PURE__ */ e(Z, { Icon: ve })
           ] }),
-          /* @__PURE__ */ e(L, { open: f, children: /* @__PURE__ */ d(ve, { className: "gap-0 !p-0", style: { maxHeight: b }, children: [
+          /* @__PURE__ */ e(L, { open: f, children: /* @__PURE__ */ d(be, { className: "gap-0 !p-0", style: { maxHeight: v }, children: [
             /* @__PURE__ */ d("div", { className: "sticky top-0 border-b select-search-bar py-1 backdrop-blur-sm", children: [
               /* @__PURE__ */ e(
                 "input",
@@ -2135,7 +2135,7 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
                   type: "text",
                   placeholder: "Search",
                   value: x,
-                  className: "appearance-none border-none w-full bg-transparent rounded- pl-10 transition-all duration-150 focus:outline-none ring-0 placeholder:text-[var(--color-input-placeholder)]",
+                  className: "appearance-none border-none w-full bg-transparent rounded- pl-10 transition-all duration-[var(--control-transition-duration)] focus:outline-none ring-0 placeholder:text-[var(--color-input-placeholder)]",
                   onChange: (E) => y(E.target.value),
                   onKeyDown: (E) => {
                     E.key === "Enter" && k != null && (E.preventDefault(), re(k));
@@ -2166,7 +2166,7 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
                     },
                     `divider-${U}`
                   );
-                const le = G(E.value, i);
+                const oe = G(E.value, s);
                 return /* @__PURE__ */ e(
                   We,
                   {
@@ -2176,7 +2176,7 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
                       }
                     }),
                     onClick: () => re(U),
-                    selected: le,
+                    selected: oe,
                     active: k === U,
                     disabled: E.disabled,
                     children: E.label
@@ -2187,50 +2187,50 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
             ] })
           ] }) })
         ] }),
-        /* @__PURE__ */ e(V, { children: s }),
+        /* @__PURE__ */ e(V, { children: l }),
         /* @__PURE__ */ e(K, { children: R })
       ]
     }
   ) });
 }, Fr = (n, t) => {
-  const [o, s] = W(n);
+  const [a, l] = W(n);
   return _(() => {
     const r = setTimeout(() => {
-      s(n);
+      l(n);
     }, t);
     return () => {
       clearTimeout(r);
     };
-  }, [n, t]), o;
-}, Tl = (n) => {
+  }, [n, t]), a;
+}, Lo = (n) => {
   const {
     className: t,
-    label: o,
-    description: s,
+    label: a,
+    description: l,
     onChange: r,
-    fetchOptionsByQuery: l,
-    fetchOptionByValue: a,
-    onSearchDebounceMs: i = 300,
+    fetchOptionsByQuery: o,
+    fetchOptionByValue: i,
+    onSearchDebounceMs: s = 300,
     value: c,
-    placeholder: b,
+    placeholder: v,
     maxHeight: R = 300,
     error: N,
-    size: h = "md",
-    disabled: v = !1,
+    size: m = "md",
+    disabled: b = !1,
     clearable: f = !1
-  } = n, [p, u] = W(!1), I = C.useRef(null), [x, y] = W(""), [k, S] = W([]), [O, P] = W(null), T = C.useRef(null), [z, w] = W(!1), [g, M] = W(!1), [L, $] = W(null), j = C.useRef([]), re = se(
+  } = n, [p, u] = W(!1), I = C.useRef(null), [x, y] = W(""), [k, S] = W([]), [z, P] = W(null), T = C.useRef(null), [O, w] = W(!1), [g, M] = W(!1), [L, $] = W(null), j = C.useRef([]), re = le(
     () => k.map((B, A) => !H(B) || B.disabled ? A : -1).filter((B) => B !== -1),
     [k]
   );
   xe(p, () => u(!1));
-  const Ne = Fr(x, i);
+  const Ne = Fr(x, s);
   _(() => {
     (async () => {
       w(!0);
-      const A = await l(Ne);
+      const A = await o(Ne);
       S(A), w(!1);
     })();
-  }, [Ne, l]), _(() => {
+  }, [Ne, o]), _(() => {
     if (c == null) {
       P(null);
       return;
@@ -2238,17 +2238,17 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
     const B = k?.find((A) => H(A) && G(A.value, c));
     B ? P(B) : (async () => {
       M(!0);
-      const oe = await a(c);
-      P(oe), M(!1);
+      const ae = await i(c);
+      P(ae), M(!1);
     })();
-  }, [a, k, c]), _(() => {
+  }, [i, k, c]), _(() => {
     p ? setTimeout(() => T.current?.focus(), 100) : ($(null), y(""));
   }, [p]), _(() => {
     if (!p) return;
     const B = k.findIndex((A) => H(A) && !A.disabled);
     $(B >= 0 ? B : null);
   }, [k, p]);
-  const { anchorRef: E, Popover: U, getReferenceProps: le, getItemProps: ee } = _e({
+  const { anchorRef: E, Popover: U, getReferenceProps: oe, getItemProps: ee } = _e({
     placement: "bottom",
     fullWidth: !0,
     minWidth: 200,
@@ -2258,57 +2258,57 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
     activeIndex: L,
     onNavigate: $,
     disabledIndices: re
-  }), Oe = (B) => {
+  }), ze = (B) => {
     const A = k[B];
     A && H(A) && !A.disabled && (r(A.value), u(!1));
-  }, ze = k.some((B) => H(B));
-  return /* @__PURE__ */ e(Q.Provider, { value: h, children: /* @__PURE__ */ d(
+  }, Oe = k.some((B) => H(B));
+  return /* @__PURE__ */ e(Q.Provider, { value: m, children: /* @__PURE__ */ d(
     "div",
     {
-      className: m(
+      className: h(
         "flex flex-col",
         t
       ),
       children: [
-        /* @__PURE__ */ e(Y, { children: o }),
+        /* @__PURE__ */ e(Y, { children: a }),
         /* @__PURE__ */ d("div", { className: "relative flex w-full flex-col", ref: E, children: [
           /* @__PURE__ */ d(
             "div",
             {
-              ...le({
+              ...oe({
                 ref: I,
                 role: "button",
-                tabIndex: v ? -1 : 0,
-                "aria-disabled": v,
+                tabIndex: b ? -1 : 0,
+                "aria-disabled": b,
                 onClick: () => {
-                  v || u(!p);
+                  b || u(!p);
                 },
                 onKeyDown: (B) => {
-                  v || (B.key === " " ? (B.preventDefault(), u((A) => !A)) : B.key === "Enter" && !p && (B.preventDefault(), u(!0)));
+                  b || (B.key === " " ? (B.preventDefault(), u((A) => !A)) : B.key === "Enter" && !p && (B.preventDefault(), u(!0)));
                 }
               }),
-              className: m(
-                "flex flex-row items-center border select-trigger transition-all duration-150 rounded-xl shadow-sm ring-0 focus:ring-4 focus:outline-none select-none",
-                te[h],
-                J[h],
-                me[h],
-                f && c ? Be[h] : fe[h],
-                v ? "select-trigger-disabled" : N && "select-trigger-error",
-                !v && p && "ring-4"
+              className: h(
+                "flex flex-row items-center border-[length:var(--border-width-input)] select-trigger transition-all duration-[var(--control-transition-duration)] rounded-[var(--border-radius-input)] shadow-[var(--shadow-control)] ring-0 focus:ring-[length:var(--control-ring-width)] focus:outline-none select-none font-[number:var(--font-weight-input-text)] font-[family-name:var(--font-family-base)]",
+                te[m],
+                J[m],
+                he[m],
+                f && c ? Be[m] : fe[m],
+                b ? "select-trigger-disabled" : N && "select-trigger-error",
+                !b && p && "ring-[length:var(--control-ring-width)]"
               ),
               children: [
-                !g && O && /* @__PURE__ */ e("span", { className: "flex-1 min-w-0 break-all line-clamp-1 text-left", children: O.label }),
-                !g && !O && b && /* @__PURE__ */ e("span", { className: "flex-1 min-w-0 break-all line-clamp-1 text-left select-placeholder", children: b }),
+                !g && z && /* @__PURE__ */ e("span", { className: "flex-1 min-w-0 break-all line-clamp-1 text-left", children: z.label }),
+                !g && !z && v && /* @__PURE__ */ e("span", { className: "flex-1 min-w-0 break-all line-clamp-1 text-left select-placeholder", children: v }),
                 g && /* @__PURE__ */ e(Se, { className: "h-4 w-4 text-[var(--color-input-text)]" })
               ]
             }
           ),
-          /* @__PURE__ */ d(he, { children: [
-            !v && N && /* @__PURE__ */ e(ne, {}),
-            f && !!c && !v && /* @__PURE__ */ e(Z, { Icon: de, onClick: () => r(null) }),
-            /* @__PURE__ */ e(Z, { Icon: be })
+          /* @__PURE__ */ d(me, { children: [
+            !b && N && /* @__PURE__ */ e(ne, {}),
+            f && !!c && !b && /* @__PURE__ */ e(Z, { Icon: de, onClick: () => r(null) }),
+            /* @__PURE__ */ e(Z, { Icon: ve })
           ] }),
-          /* @__PURE__ */ e(U, { open: p, children: /* @__PURE__ */ d(ve, { className: "gap-0 !p-0", style: { maxHeight: R }, children: [
+          /* @__PURE__ */ e(U, { open: p, children: /* @__PURE__ */ d(be, { className: "gap-0 !p-0", style: { maxHeight: R }, children: [
             /* @__PURE__ */ d("div", { className: "sticky top-0 border-b select-search-bar py-1 backdrop-blur-sm", children: [
               /* @__PURE__ */ e(
                 "input",
@@ -2317,19 +2317,19 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
                   type: "text",
                   placeholder: "Search",
                   value: x,
-                  className: "appearance-none border-none w-full bg-transparent rounded- pl-10 transition-all duration-150 focus:outline-none ring-0 placeholder:text-[var(--color-input-placeholder)]",
+                  className: "appearance-none border-none w-full bg-transparent rounded- pl-10 transition-all duration-[var(--control-transition-duration)] focus:outline-none ring-0 placeholder:text-[var(--color-input-placeholder)]",
                   onChange: (B) => y(B.target.value),
                   onKeyDown: (B) => {
-                    B.key === "Enter" && L != null && (B.preventDefault(), Oe(L));
+                    B.key === "Enter" && L != null && (B.preventDefault(), ze(L));
                   }
                 }
               ),
               /* @__PURE__ */ e(Fe, { className: "absolute select-search-icon left-4 top-4 h-4 w-4" })
             ] }),
             /* @__PURE__ */ d("div", { className: "flex flex-col gap-1 p-2", children: [
-              !z && !ze && /* @__PURE__ */ e("div", { className: "flex flex-col items-center justify-center py-6", children: /* @__PURE__ */ e(nt, { className: "h-6 w-6 text-[var(--color-input-text)]" }) }),
-              z && /* @__PURE__ */ e("div", { className: "flex flex-col items-center justify-center py-6", children: /* @__PURE__ */ e(Se, { className: "h-6 w-6 text-[var(--color-input-text)]" }) }),
-              !z && k.map((B, A) => {
+              !O && !Oe && /* @__PURE__ */ e("div", { className: "flex flex-col items-center justify-center py-6", children: /* @__PURE__ */ e(nt, { className: "h-6 w-6 text-[var(--color-input-text)]" }) }),
+              O && /* @__PURE__ */ e("div", { className: "flex flex-col items-center justify-center py-6", children: /* @__PURE__ */ e(Se, { className: "h-6 w-6 text-[var(--color-input-text)]" }) }),
+              !O && k.map((B, A) => {
                 if (!H(B))
                   return B.kind === "header" ? /* @__PURE__ */ e(
                     He,
@@ -2349,7 +2349,7 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
                     },
                     `divider-${A}`
                   );
-                const oe = G(B.value, c);
+                const ae = G(B.value, c);
                 return /* @__PURE__ */ e(
                   We,
                   {
@@ -2358,8 +2358,8 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
                         j.current[A] = pe;
                       }
                     }),
-                    onClick: () => Oe(A),
-                    selected: oe,
+                    onClick: () => ze(A),
+                    selected: ae,
                     active: L === A,
                     disabled: B.disabled,
                     children: B.label
@@ -2370,7 +2370,7 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
             ] })
           ] }) })
         ] }),
-        /* @__PURE__ */ e(V, { children: s }),
+        /* @__PURE__ */ e(V, { children: l }),
         /* @__PURE__ */ e(K, { children: N })
       ]
     }
@@ -2402,26 +2402,26 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
   black: "bg-[var(--color-badge-black-bg)] text-[var(--color-badge-black-text)] ring-[var(--color-badge-black-ring)]"
 }, Ee = C.forwardRef((n, t) => {
   const {
-    className: o,
-    children: s,
+    className: a,
+    children: l,
     onClick: r,
-    showCloseIcon: l,
-    Icon: a,
-    color: i = "gray"
-  } = n, c = m(
-    "inline-flex align-top items-center gap-2 px-3 h-7 rounded-lg font-semibold",
-    Mr[i],
-    o
+    showCloseIcon: o,
+    Icon: i,
+    color: s = "gray"
+  } = n, c = h(
+    "inline-flex align-top items-center gap-2 px-3 h-7 rounded-[var(--border-radius-badge)] font-[number:var(--font-weight-badge)] font-[family-name:var(--font-family-base)]",
+    Mr[s],
+    a
   );
   return r ? /* @__PURE__ */ e("div", { ref: t, children: /* @__PURE__ */ d(
     "button",
     {
-      className: m("cursor-pointer ring-0 hover:ring-4 active:ring-1 transition-all duration-100 select-none focus:outline-none focus:ring-4", c),
+      className: h("cursor-pointer ring-0 hover:ring-[length:var(--control-ring-width)] active:ring-[length:var(--control-ring-width-active)] transition-all duration-[var(--control-transition-duration-fast)] select-none focus:outline-none focus:ring-[length:var(--control-ring-width)]", c),
       onClick: r,
       children: [
-        a && /* @__PURE__ */ e(a, { className: "h-4 w-4 shrink-0" }),
-        /* @__PURE__ */ e("div", { className: "break-all line-clamp-1 text-left", children: s }),
-        l && /* @__PURE__ */ e(
+        i && /* @__PURE__ */ e(i, { className: "h-4 w-4 shrink-0" }),
+        /* @__PURE__ */ e("div", { className: "break-all line-clamp-1 text-left", children: l }),
+        o && /* @__PURE__ */ e(
           de,
           {
             className: "h-4 w-4 shrink-0"
@@ -2430,31 +2430,31 @@ const m = (...n) => n.filter(Boolean).join(" "), $n = [
       ]
     }
   ) }) : /* @__PURE__ */ d("div", { className: c, ref: t, children: [
-    a && /* @__PURE__ */ e(a, { className: "h-4 w-4 shrink-0" }),
-    /* @__PURE__ */ e("div", { className: "break-all line-clamp-1 text-left", children: s })
+    i && /* @__PURE__ */ e(i, { className: "h-4 w-4 shrink-0" }),
+    /* @__PURE__ */ e("div", { className: "break-all line-clamp-1 text-left", children: l })
   ] });
 });
 function Br(n) {
   const {
     enabled: t,
-    triggerRef: o,
-    measureRef: s,
+    triggerRef: a,
+    measureRef: l,
     trayRef: r,
-    itemCount: l,
-    deps: a = [],
-    gap: i = 4
-  } = n, [c, b] = W(0);
+    itemCount: o,
+    deps: i = [],
+    gap: s = 4
+  } = n, [c, v] = W(0);
   return It(() => {
     if (!t) return;
-    const R = o.current, N = s.current;
+    const R = a.current, N = l.current;
     if (!R || !N) return;
-    const h = () => {
-      if (l === 0) {
-        b(0);
+    const m = () => {
+      if (o === 0) {
+        v(0);
         return;
       }
-      if (l === 1) {
-        b(1);
+      if (o === 1) {
+        v(1);
         return;
       }
       const f = window.getComputedStyle(R), p = parseFloat(f.paddingLeft || "0"), u = R.getBoundingClientRect(), I = u.left + p;
@@ -2462,65 +2462,65 @@ function Br(n) {
       const y = r?.current;
       if (y) {
         const w = y.getBoundingClientRect();
-        w.width > 0 && (x = Math.min(x, w.left - i));
+        w.width > 0 && (x = Math.min(x, w.left - s));
       }
       const k = Math.max(0, x - I), S = Array.from(N.children);
-      if (S.length < l + 1) return;
-      let O = 0;
-      for (let w = 0; w < l; w++)
-        O += S[w].offsetWidth + (w > 0 ? i : 0);
-      if (O <= k) {
-        b(l);
+      if (S.length < o + 1) return;
+      let z = 0;
+      for (let w = 0; w < o; w++)
+        z += S[w].offsetWidth + (w > 0 ? s : 0);
+      if (z <= k) {
+        v(o);
         return;
       }
-      const P = S[l].offsetWidth;
-      let T = 0, z = 0;
-      for (let w = 0; w < l; w++) {
-        const g = S[w].offsetWidth, M = T + g + (w > 0 ? i : 0);
-        if (M + P + i > k) break;
-        T = M, z++;
+      const P = S[o].offsetWidth;
+      let T = 0, O = 0;
+      for (let w = 0; w < o; w++) {
+        const g = S[w].offsetWidth, M = T + g + (w > 0 ? s : 0);
+        if (M + P + s > k) break;
+        T = M, O++;
       }
-      b(Math.max(1, z));
-    }, v = new ResizeObserver(h);
-    return v.observe(R), r?.current && v.observe(r.current), h(), () => v.disconnect();
-  }, [t, l, ...a]), c;
+      v(Math.max(1, O));
+    }, b = new ResizeObserver(m);
+    return b.observe(R), r?.current && b.observe(r.current), m(), () => b.disconnect();
+  }, [t, o, ...i]), c;
 }
-const Ll = (n) => {
+const Po = (n) => {
   const {
     className: t,
-    label: o,
-    description: s,
+    label: a,
+    description: l,
     options: r,
-    onChange: l,
-    onSearch: a,
-    value: i,
+    onChange: o,
+    onSearch: i,
+    value: s,
     placeholder: c,
-    maxHeight: b = 300,
+    maxHeight: v = 300,
     error: R,
     size: N = "md",
-    singleLine: h = !1,
-    color: v = "blue",
+    singleLine: m = !1,
+    color: b = "blue",
     disabled: f = !1,
     clearable: p = !1
-  } = n, [u, I] = W(!1), [x, y] = W(r), [k, S] = W(""), [O, P] = W(null), T = C.useRef(null), z = C.useRef(null), w = C.useRef([]), g = C.useRef(null), M = C.useRef(null), L = se(
-    () => i.map((D) => r.find((F) => H(F) && G(F.value, D))).filter((D) => D !== void 0),
-    [i, r]
+  } = n, [u, I] = W(!1), [x, y] = W(r), [k, S] = W(""), [z, P] = W(null), T = C.useRef(null), O = C.useRef(null), w = C.useRef([]), g = C.useRef(null), M = C.useRef(null), L = le(
+    () => s.map((D) => r.find((F) => H(F) && G(F.value, D))).filter((D) => D !== void 0),
+    [s, r]
   ), $ = (D) => {
     if (D === "") return r;
     const F = D.toLowerCase();
     return r.filter((Ie) => H(Ie) && typeof Ie.label == "string" ? Ie.label.toLowerCase().includes(F) : !0);
-  }, j = se(
+  }, j = le(
     () => k !== "" ? x : r,
     [k, x, r]
-  ), re = se(
+  ), re = le(
     () => j.map((D, F) => !H(D) || D.disabled ? F : -1).filter((D) => D !== -1),
     [j]
   );
   xe(u, () => I(!1)), _(() => {
-    y((a ?? $)(k));
-  }, [k, r, a]), _(() => {
+    y((i ?? $)(k));
+  }, [k, r, i]), _(() => {
     if (u) {
-      setTimeout(() => z.current?.focus(), 100);
+      setTimeout(() => O.current?.focus(), 100);
       const D = r.findIndex((F) => H(F) && !F.disabled);
       P(D >= 0 ? D : null);
     } else
@@ -2531,42 +2531,42 @@ const Ll = (n) => {
     P(D >= 0 ? D : null);
   }, [k, u, j]);
   const Ne = Br({
-    enabled: h,
+    enabled: m,
     triggerRef: T,
     measureRef: g,
     trayRef: M,
     itemCount: L.length,
     deps: [L, R]
-  }), { anchorRef: E, Popover: U, getReferenceProps: le, getItemProps: ee } = _e({
+  }), { anchorRef: E, Popover: U, getReferenceProps: oe, getItemProps: ee } = _e({
     placement: "bottom",
     fullWidth: !0,
     minWidth: 200,
     open: u,
     onOpenChange: I,
     listRef: w,
-    activeIndex: O,
+    activeIndex: z,
     onNavigate: P,
     disabledIndices: re
-  }), Oe = (D) => {
-    i.some((F) => G(F, D)) ? l(i.filter((F) => !G(F, D))) : l([...i, D]);
-  }, ze = (D) => {
+  }), ze = (D) => {
+    s.some((F) => G(F, D)) ? o(s.filter((F) => !G(F, D))) : o([...s, D]);
+  }, Oe = (D) => {
     const F = j[D];
-    F && H(F) && !F.disabled && Oe(F.value);
-  }, B = j.some((D) => H(D)), A = i.length > 0, oe = h ? Ne : L.length, pe = L.slice(0, oe), ut = L.length - oe;
+    F && H(F) && !F.disabled && ze(F.value);
+  }, B = j.some((D) => H(D)), A = s.length > 0, ae = m ? Ne : L.length, pe = L.slice(0, ae), ut = L.length - ae;
   return /* @__PURE__ */ e(Q.Provider, { value: N, children: /* @__PURE__ */ d(
     "div",
     {
-      className: m(
+      className: h(
         "flex flex-col",
         t
       ),
       children: [
-        /* @__PURE__ */ e(Y, { children: o }),
+        /* @__PURE__ */ e(Y, { children: a }),
         /* @__PURE__ */ d("div", { className: "relative flex w-full flex-col", ref: E, children: [
           /* @__PURE__ */ d(
             "div",
             {
-              ...le({
+              ...oe({
                 ref: T,
                 role: "button",
                 tabIndex: f ? -1 : 0,
@@ -2575,33 +2575,33 @@ const Ll = (n) => {
                   f || I(!u);
                 },
                 onKeyDown: (D) => {
-                  f || (D.key === " " ? (D.preventDefault(), I((F) => !F)) : D.key === "Enter" && !u ? (D.preventDefault(), I(!0)) : D.key === "Backspace" && !u && A && (D.preventDefault(), l(i.slice(0, -1))));
+                  f || (D.key === " " ? (D.preventDefault(), I((F) => !F)) : D.key === "Enter" && !u ? (D.preventDefault(), I(!0)) : D.key === "Backspace" && !u && A && (D.preventDefault(), o(s.slice(0, -1))));
                 }
               }),
-              className: m(
-                "flex flex-row items-center gap-1 border select-trigger transition-all duration-150 rounded-xl shadow-sm ring-0 focus:ring-4 focus:outline-none select-none",
-                h && m("flex-nowrap overflow-hidden", te[N]),
-                !h && m("flex-wrap py-1.5", Ft[N]),
+              className: h(
+                "flex flex-row items-center gap-1 border-[length:var(--border-width-input)] select-trigger transition-all duration-[var(--control-transition-duration)] rounded-[var(--border-radius-input)] shadow-[var(--shadow-control)] ring-0 focus:ring-[length:var(--control-ring-width)] focus:outline-none select-none font-[number:var(--font-weight-input-text)] font-[family-name:var(--font-family-base)]",
+                m && h("flex-nowrap overflow-hidden", te[N]),
+                !m && h("flex-wrap py-1.5", Ft[N]),
                 J[N],
-                me[N],
+                he[N],
                 p && A ? Be[N] : fe[N],
                 f ? "select-trigger-disabled" : R && "select-trigger-error",
-                !f && u && "ring-4"
+                !f && u && "ring-[length:var(--control-ring-width)]"
               ),
               children: [
                 A && pe.map((D, F) => /* @__PURE__ */ e(
                   Ee,
                   {
-                    color: v,
-                    className: m(
-                      h && oe > 1 && "shrink-0",
-                      (!h || oe === 1) && "max-w-full min-w-0"
+                    color: b,
+                    className: h(
+                      m && ae > 1 && "shrink-0",
+                      (!m || ae === 1) && "max-w-full min-w-0"
                     ),
                     children: D.label
                   },
                   `badge-${F}`
                 )),
-                A && ut > 0 && /* @__PURE__ */ d("span", { className: "shrink-0 text-sm font-medium select-placeholder px-1", children: [
+                A && ut > 0 && /* @__PURE__ */ d("span", { className: "shrink-0 text-sm font-[number:var(--font-weight-input-option-label)] select-placeholder px-1", children: [
                   "+",
                   ut,
                   " more"
@@ -2610,15 +2610,15 @@ const Ll = (n) => {
               ]
             }
           ),
-          h && /* @__PURE__ */ d(
+          m && /* @__PURE__ */ d(
             "div",
             {
               ref: g,
               "aria-hidden": !0,
               className: "absolute top-0 left-0 invisible pointer-events-none flex flex-row flex-nowrap items-center gap-1 w-max",
               children: [
-                L.map((D, F) => /* @__PURE__ */ e(Ee, { color: v, children: D.label }, `measure-${F}`)),
-                L.length > 0 && /* @__PURE__ */ d("span", { className: "text-sm font-medium px-1", children: [
+                L.map((D, F) => /* @__PURE__ */ e(Ee, { color: b, children: D.label }, `measure-${F}`)),
+                L.length > 0 && /* @__PURE__ */ d("span", { className: "text-sm font-[number:var(--font-weight-input-option-label)] px-1", children: [
                   "+",
                   L.length,
                   " more"
@@ -2626,24 +2626,24 @@ const Ll = (n) => {
               ]
             }
           ),
-          /* @__PURE__ */ d(he, { ref: M, children: [
+          /* @__PURE__ */ d(me, { ref: M, children: [
             !f && R && /* @__PURE__ */ e(ne, {}),
-            p && A && !f && /* @__PURE__ */ e(Z, { Icon: de, onClick: () => l([]) }),
-            /* @__PURE__ */ e(Z, { Icon: be })
+            p && A && !f && /* @__PURE__ */ e(Z, { Icon: de, onClick: () => o([]) }),
+            /* @__PURE__ */ e(Z, { Icon: ve })
           ] }),
-          /* @__PURE__ */ e(U, { open: u, children: /* @__PURE__ */ d(ve, { className: "gap-0 !p-0", style: { maxHeight: b }, children: [
+          /* @__PURE__ */ e(U, { open: u, children: /* @__PURE__ */ d(be, { className: "gap-0 !p-0", style: { maxHeight: v }, children: [
             /* @__PURE__ */ d("div", { className: "sticky top-0 border-b select-search-bar py-1 backdrop-blur-sm", children: [
               /* @__PURE__ */ e(
                 "input",
                 {
-                  ref: z,
+                  ref: O,
                   type: "text",
                   placeholder: "Search",
                   value: k,
-                  className: "appearance-none border-none w-full bg-transparent rounded- pl-10 transition-all duration-150 focus:outline-none ring-0 placeholder:text-[var(--color-input-placeholder)]",
+                  className: "appearance-none border-none w-full bg-transparent rounded- pl-10 transition-all duration-[var(--control-transition-duration)] focus:outline-none ring-0 placeholder:text-[var(--color-input-placeholder)]",
                   onChange: (D) => S(D.target.value),
                   onKeyDown: (D) => {
-                    D.key === "Enter" && O != null ? (D.preventDefault(), ze(O)) : D.key === "Backspace" && k === "" && A && (D.preventDefault(), l(i.slice(0, -1)));
+                    D.key === "Enter" && z != null ? (D.preventDefault(), Oe(z)) : D.key === "Backspace" && k === "" && A && (D.preventDefault(), o(s.slice(0, -1)));
                   }
                 }
               ),
@@ -2671,7 +2671,7 @@ const Ll = (n) => {
                     },
                     `divider-${F}`
                   );
-                const Ie = i.some((ge) => G(ge, D.value));
+                const Ie = s.some((ge) => G(ge, D.value));
                 return /* @__PURE__ */ e(
                   We,
                   {
@@ -2680,9 +2680,9 @@ const Ll = (n) => {
                         w.current[F] = ge;
                       }
                     }),
-                    onClick: () => ze(F),
+                    onClick: () => Oe(F),
                     selected: Ie,
-                    active: O === F,
+                    active: z === F,
                     disabled: D.disabled,
                     children: D.label
                   },
@@ -2692,183 +2692,183 @@ const Ll = (n) => {
             ] })
           ] }) })
         ] }),
-        /* @__PURE__ */ e(V, { children: s }),
+        /* @__PURE__ */ e(V, { children: l }),
         /* @__PURE__ */ e(K, { children: R })
       ]
     }
   ) });
-}, Pl = C.forwardRef((n, t) => {
+}, Eo = C.forwardRef((n, t) => {
   const {
-    className: o,
-    children: s,
+    className: a,
+    children: l,
     ...r
   } = n;
   return /* @__PURE__ */ e(
     "div",
     {
       ref: t,
-      className: m(
-        "flex flex-col gap-6 border panel-base rounded-2xl shadow-sm px-6 py-6",
-        o
+      className: h(
+        "flex flex-col gap-6 border-[length:var(--border-width-input)] panel-base rounded-[var(--border-radius-panel)] shadow-[var(--shadow-control)] px-6 py-6",
+        a
       ),
       ...r,
-      children: s
+      children: l
     }
   );
-}), El = C.forwardRef((n, t) => {
+}), Fo = C.forwardRef((n, t) => {
   const {
-    className: o,
-    children: s,
+    className: a,
+    children: l,
     ...r
   } = n;
   return /* @__PURE__ */ e(
     "div",
     {
       ref: t,
-      className: m(
-        "flex flex-col gap-1 border panel-base rounded-2xl shadow-sm p-2",
-        o
+      className: h(
+        "flex flex-col gap-1 border-[length:var(--border-width-input)] panel-base rounded-[var(--border-radius-panel)] shadow-[var(--shadow-control)] p-2",
+        a
       ),
       ...r,
-      children: s
+      children: l
     }
   );
-}), yt = "input-description text-sm font-medium", Fl = (n) => {
+}), yt = "input-description text-[length:var(--font-size-description)] font-[number:var(--font-weight-panel-field)]", Mo = (n) => {
   const {
     className: t,
-    label: o,
-    children: s,
+    label: a,
+    children: l,
     orientation: r = "vertical",
-    ...l
+    ...o
   } = n;
   return r === "horizontal" ? /* @__PURE__ */ d(
     "div",
     {
-      className: m(
+      className: h(
         "flex flex-row items-center gap-3 px-3 py-2",
         t
       ),
-      ...l,
+      ...o,
       children: [
-        /* @__PURE__ */ e("div", { className: m(yt, "w-1/2 line-clamp-1 break-all"), children: o }),
-        /* @__PURE__ */ e("div", { className: "w-1/2 line-clamp-1 break-all", children: s })
+        /* @__PURE__ */ e("div", { className: h(yt, "w-1/2 line-clamp-1 break-all"), children: a }),
+        /* @__PURE__ */ e("div", { className: "w-1/2 line-clamp-1 break-all", children: l })
       ]
     }
   ) : /* @__PURE__ */ d(
     "div",
     {
-      className: m(
+      className: h(
         "flex flex-col gap-1 px-3 py-2",
         t
       ),
-      ...l,
+      ...o,
       children: [
-        o && /* @__PURE__ */ e("div", { className: yt, children: o }),
-        /* @__PURE__ */ e("div", { children: s })
+        a && /* @__PURE__ */ e("div", { className: yt, children: a }),
+        /* @__PURE__ */ e("div", { children: l })
       ]
     }
   );
 }, Ar = {
   error: et,
-  warning: an,
+  warning: sn,
   success: tt,
-  info: sn
+  info: ln
 }, Ur = {
   error: "text-[var(--color-status-error)]",
   warning: "text-[var(--color-status-warning)]",
   success: "text-[var(--color-status-success)]",
   info: "text-[var(--color-status-info)]"
-}, kt = "inline-flex flex-row gap-3 items-center justify-between h-10 px-3 font-semibold ring-0 dropdown-item rounded-lg cursor-pointer transition-all duration-150 select-none focus:outline-none focus:ring-0 border border-transparent bg-transparent", Ml = (n) => {
+}, kt = "inline-flex flex-row gap-3 items-center justify-between h-10 px-3 font-[number:var(--font-weight-panel-link)] font-[family-name:var(--font-family-base)] ring-0 dropdown-item rounded-[var(--border-radius-menu-item)] cursor-pointer transition-all duration-[var(--control-transition-duration)] select-none focus:outline-none focus:ring-0 border border-transparent bg-transparent", Bo = (n) => {
   const {
     className: t,
-    children: o,
-    Icon: s,
+    children: a,
+    Icon: l,
     status: r,
-    ...l
-  } = n, a = r ? Ar[r] : null, i = /* @__PURE__ */ d(ce, { children: [
+    ...o
+  } = n, i = r ? Ar[r] : null, s = /* @__PURE__ */ d(ce, { children: [
     /* @__PURE__ */ d("span", { className: "inline-flex flex-row items-center gap-3 min-w-0", children: [
-      s && /* @__PURE__ */ e(s, { className: "h-5 w-5 shrink-0" }),
-      /* @__PURE__ */ e("span", { className: "truncate", children: o })
+      l && /* @__PURE__ */ e(l, { className: "h-5 w-5 shrink-0" }),
+      /* @__PURE__ */ e("span", { className: "truncate", children: a })
     ] }),
     /* @__PURE__ */ d("span", { className: "inline-flex flex-row items-center gap-2 shrink-0", children: [
-      a && r && /* @__PURE__ */ e(a, { className: m("h-5 w-5", Ur[r]) }),
+      i && r && /* @__PURE__ */ e(i, { className: h("h-5 w-5", Ur[r]) }),
       /* @__PURE__ */ e(cn, { className: "h-5 w-5 text-[var(--color-input-icon-button-icon)]" })
     ] })
   ] });
-  if (l.href !== void 0) {
-    const { href: c, ...b } = l;
+  if (o.href !== void 0) {
+    const { href: c, ...v } = o;
     return /* @__PURE__ */ e(
       "a",
       {
         href: c,
-        className: m(kt, t),
-        ...b,
-        children: i
+        className: h(kt, t),
+        ...v,
+        children: s
       }
     );
   }
   return /* @__PURE__ */ e(
     "button",
     {
-      className: m(kt, t),
-      ...l,
-      children: i
+      className: h(kt, t),
+      ...o,
+      children: s
     }
   );
-}, Bl = (n) => {
+}, Ao = (n) => {
   const {
     className: t,
-    vertical: o = !1,
-    ...s
+    vertical: a = !1,
+    ...l
   } = n;
   return /* @__PURE__ */ e(
     "div",
     {
-      className: m(
-        o ? "w-px h-full bg-[var(--color-divider)]" : "w-full h-px bg-[var(--color-divider)]",
+      className: h(
+        a ? "w-px h-full bg-[var(--color-divider)]" : "w-full h-px bg-[var(--color-divider)]",
         t
       ),
-      ...s
+      ...l
     }
   );
-}, Al = (n) => {
+}, Uo = (n) => {
   const {
     children: t,
-    content: o,
-    className: s,
+    content: a,
+    className: l,
     placement: r = "top",
-    minWidth: l = 100,
-    maxWidth: a = 200
-  } = n, [i, c] = W(!1), { anchorRef: b, Popover: R } = ct({
+    minWidth: o = 100,
+    maxWidth: i = 200
+  } = n, [s, c] = W(!1), { anchorRef: v, Popover: R } = ct({
     placement: r,
-    minWidth: l,
-    maxWidth: a
+    minWidth: o,
+    maxWidth: i
   });
   return /* @__PURE__ */ d(
     "span",
     {
-      ref: b,
-      className: s,
+      ref: v,
+      className: l,
       onMouseEnter: () => c(!0),
       onMouseLeave: () => c(!1),
       children: [
         t,
-        /* @__PURE__ */ e(R, { open: i, children: /* @__PURE__ */ e(ve, { children: o }) })
+        /* @__PURE__ */ e(R, { open: s, children: /* @__PURE__ */ e(be, { children: a }) })
       ]
     }
   );
-}, Ul = (n) => {
+}, Wo = (n) => {
   const {
     open: t,
-    onDismiss: o,
-    enableDismissOnOutsideClick: s,
+    onDismiss: a,
+    enableDismissOnOutsideClick: l,
     enableDismissOnEscKey: r,
-    enableDismissButton: l,
-    className: a,
-    children: i,
+    enableDismissButton: o,
+    className: i,
+    children: s,
     maxWidth: c = 600
   } = n;
-  return xe(!!r && t, o || (() => {
+  return xe(!!r && t, a || (() => {
   })), /* @__PURE__ */ e(De, { children: t && /* @__PURE__ */ d(Me, { children: [
     /* @__PURE__ */ e(
       q.div,
@@ -2880,10 +2880,10 @@ const Ll = (n) => {
         exit: { opacity: 0 },
         transition: { duration: 0.15, ease: "easeInOut" },
         children: /* @__PURE__ */ e(
-          Ot,
+          zt,
           {
             className: "modal-overlay backdrop-blur-[1px]",
-            onClick: s ? o : void 0,
+            onClick: l ? a : void 0,
             lockScroll: !0
           }
         )
@@ -2892,9 +2892,9 @@ const Ll = (n) => {
     /* @__PURE__ */ e("div", { className: "fixed inset-0 flex flex-col items-center pointer-events-none p-4 lg:p-12 overflow-y-auto z-50", children: /* @__PURE__ */ d(
       q.div,
       {
-        className: m(
-          "flex flex-col modal-content rounded-2xl shadow-xl p-6 lg:p-12 pointer-events-auto w-full relative",
-          a
+        className: h(
+          "flex flex-col modal-content rounded-[var(--border-radius-panel)] shadow-[var(--shadow-overlay)] p-6 lg:p-12 pointer-events-auto w-full relative",
+          i
         ),
         style: { transformOrigin: "bottom", maxWidth: c },
         initial: { opacity: 0, scale: 0.98, translateY: 10 },
@@ -2902,33 +2902,33 @@ const Ll = (n) => {
         exit: { opacity: 0, scale: 0.98, translateY: 10 },
         transition: { duration: 0.15, ease: "easeInOut" },
         children: [
-          l && /* @__PURE__ */ e(
+          o && /* @__PURE__ */ e(
             Ut,
             {
               Icon: de,
               className: "absolute top-4 right-4",
               variant: "transparent",
               size: "sm",
-              onClick: o
+              onClick: a
             }
           ),
-          i
+          s
         ]
       }
     ) })
   ] }) });
-}, Wl = (n) => {
+}, Ho = (n) => {
   const {
     open: t,
-    onDismiss: o,
-    enableDismissOnOutsideClick: s,
+    onDismiss: a,
+    enableDismissOnOutsideClick: l,
     enableDismissOnEscKey: r,
-    enableDismissButton: l,
-    className: a,
-    children: i,
+    enableDismissButton: o,
+    className: i,
+    children: s,
     maxWidth: c = 480
   } = n;
-  return xe(!!r && t, o || (() => {
+  return xe(!!r && t, a || (() => {
   })), /* @__PURE__ */ e(De, { children: t && /* @__PURE__ */ d(Me, { children: [
     /* @__PURE__ */ e(
       q.div,
@@ -2940,10 +2940,10 @@ const Ll = (n) => {
         exit: { opacity: 0 },
         transition: { duration: 0.15, ease: "easeInOut" },
         children: /* @__PURE__ */ e(
-          Ot,
+          zt,
           {
             className: "modal-overlay backdrop-blur-[1px]",
-            onClick: s ? o : void 0,
+            onClick: l ? a : void 0,
             lockScroll: !0
           }
         )
@@ -2952,9 +2952,9 @@ const Ll = (n) => {
     /* @__PURE__ */ e("div", { className: "fixed inset-0 flex flex-row justify-end pointer-events-none z-50", children: /* @__PURE__ */ d(
       q.div,
       {
-        className: m(
-          "flex flex-col modal-content shadow-xl p-6 lg:p-12 pointer-events-auto h-full w-full overflow-y-auto relative",
-          a
+        className: h(
+          "flex flex-col modal-content shadow-[var(--shadow-overlay)] p-6 lg:p-12 pointer-events-auto h-full w-full overflow-y-auto relative",
+          i
         ),
         style: { maxWidth: c },
         initial: { translateX: "100%" },
@@ -2962,17 +2962,17 @@ const Ll = (n) => {
         exit: { translateX: "100%" },
         transition: { duration: 0.25, ease: [0.32, 0.72, 0, 1] },
         children: [
-          l && /* @__PURE__ */ e(
+          o && /* @__PURE__ */ e(
             Ut,
             {
               Icon: de,
               className: "absolute top-4 right-4",
               variant: "transparent",
               size: "sm",
-              onClick: o
+              onClick: a
             }
           ),
-          i
+          s
         ]
       }
     ) })
@@ -2980,62 +2980,62 @@ const Ll = (n) => {
 }, Wr = (n) => {
   const {
     className: t,
-    tabs: o
+    tabs: a
   } = n;
-  return /* @__PURE__ */ e("div", { className: m(
-    "h-12 tab-container p-1 rounded-xl inline-flex flex-row space-x-1 overflow-x-auto mat-ui-hide-scrollbars",
+  return /* @__PURE__ */ e("div", { className: h(
+    "h-12 tab-container p-1 rounded-[var(--border-radius-tab)] inline-flex flex-row space-x-1 overflow-x-auto mat-ui-hide-scrollbars",
     t
-  ), children: o.map((s, r) => {
-    const l = m(
-      "shrink-0 px-4 h-full inline-flex flex-row items-center font-semibold rounded-xl cursor-pointer border border-transparent ing-0 tab-button transition-all duration-150 select-none focus:outline-none focus:ring-0",
-      s.active && "tab-button-active shadow-sm"
+  ), children: a.map((l, r) => {
+    const o = h(
+      "shrink-0 px-4 h-full inline-flex flex-row items-center font-[number:var(--font-weight-tab)] font-[family-name:var(--font-family-base)] rounded-[var(--border-radius-tab)] cursor-pointer border border-transparent ing-0 tab-button transition-all duration-[var(--control-transition-duration)] select-none focus:outline-none focus:ring-0",
+      l.active && "tab-button-active shadow-[var(--shadow-control)]"
     );
-    return s.href ? /* @__PURE__ */ d(
+    return l.href ? /* @__PURE__ */ d(
       "a",
       {
-        href: s.href,
-        className: l,
+        href: l.href,
+        className: o,
         children: [
-          s.Icon && /* @__PURE__ */ e(s.Icon, { className: "h-5 w-5 shrink-0 mr-2 -ml-1" }),
-          s.label
+          l.Icon && /* @__PURE__ */ e(l.Icon, { className: "h-5 w-5 shrink-0 mr-2 -ml-1" }),
+          l.label
         ]
       },
       r
     ) : /* @__PURE__ */ d(
       "button",
       {
-        className: l,
-        onClick: s.onClick,
+        className: o,
+        onClick: l.onClick,
         children: [
-          s.Icon && /* @__PURE__ */ e(s.Icon, { className: "h-5 w-5 shrink-0 mr-2 -ml-1" }),
-          s.label
+          l.Icon && /* @__PURE__ */ e(l.Icon, { className: "h-5 w-5 shrink-0 mr-2 -ml-1" }),
+          l.label
         ]
       },
       r
     );
   }) });
-}, Hl = (n) => {
+}, $o = (n) => {
   const {
     duration: t = 0.3,
-    ease: o = "easeInOut",
-    horizontal: s = !1,
+    ease: a = "easeInOut",
+    horizontal: l = !1,
     pauseOnScroll: r = !1,
-    threshold: l = 1,
-    onPinnedChange: a,
-    children: i,
+    threshold: o = 1,
+    onPinnedChange: i,
+    children: s,
     className: c,
-    ...b
-  } = n, R = C.useRef(null), N = C.useRef(null), h = C.useRef(null), v = C.useRef(!0), f = C.useRef(!1), p = C.useRef(a);
-  return p.current = a, C.useEffect(() => {
+    ...v
+  } = n, R = C.useRef(null), N = C.useRef(null), m = C.useRef(null), b = C.useRef(!0), f = C.useRef(!1), p = C.useRef(i);
+  return p.current = i, C.useEffect(() => {
     const u = R.current, I = N.current;
     if (!u || !I) return;
     let x = !0;
-    const y = () => s ? u.scrollWidth - u.clientWidth : u.scrollHeight - u.clientHeight, k = () => s ? u.scrollLeft : u.scrollTop, S = (g) => {
-      s ? u.scrollLeft = g : u.scrollTop = g;
-    }, O = (g) => {
-      v.current !== g && (v.current = g, p.current?.(g));
+    const y = () => l ? u.scrollWidth - u.clientWidth : u.scrollHeight - u.clientHeight, k = () => l ? u.scrollLeft : u.scrollTop, S = (g) => {
+      l ? u.scrollLeft = g : u.scrollTop = g;
+    }, z = (g) => {
+      b.current !== g && (b.current = g, p.current?.(g));
     }, P = () => {
-      if (r && !v.current) return;
+      if (r && !b.current) return;
       const g = y(), M = k();
       if (!(g <= 0 || Math.abs(g - M) < 1)) {
         if (x) {
@@ -3044,9 +3044,9 @@ const Ll = (n) => {
           });
           return;
         }
-        h.current?.stop(), f.current = !0, h.current = Kt(M, g, {
+        m.current?.stop(), f.current = !0, m.current = Kt(M, g, {
           duration: t,
-          ease: o,
+          ease: a,
           onUpdate: S,
           onComplete: () => {
             requestAnimationFrame(() => {
@@ -3057,54 +3057,54 @@ const Ll = (n) => {
       }
     }, T = new ResizeObserver(P);
     T.observe(I);
-    const z = () => {
-      f.current || O(y() - k() <= l);
+    const O = () => {
+      f.current || z(y() - k() <= o);
     }, w = () => {
-      h.current?.stop(), f.current = !1;
+      m.current?.stop(), f.current = !1;
     };
-    return r && (u.addEventListener("scroll", z, { passive: !0 }), u.addEventListener("wheel", w, { passive: !0 }), u.addEventListener("touchstart", w, { passive: !0 })), () => {
-      T.disconnect(), h.current?.stop(), r && (u.removeEventListener("scroll", z), u.removeEventListener("wheel", w), u.removeEventListener("touchstart", w));
+    return r && (u.addEventListener("scroll", O, { passive: !0 }), u.addEventListener("wheel", w, { passive: !0 }), u.addEventListener("touchstart", w, { passive: !0 })), () => {
+      T.disconnect(), m.current?.stop(), r && (u.removeEventListener("scroll", O), u.removeEventListener("wheel", w), u.removeEventListener("touchstart", w));
     };
-  }, [t, o, s, r, l]), /* @__PURE__ */ e(
+  }, [t, a, l, r, o]), /* @__PURE__ */ e(
     "div",
     {
       ref: R,
-      className: m(
+      className: h(
         "min-h-0 min-w-0",
-        s ? "overflow-x-auto" : "overflow-y-auto",
+        l ? "overflow-x-auto" : "overflow-y-auto",
         c
       ),
-      ...b,
-      children: /* @__PURE__ */ e("div", { ref: N, children: i })
+      ...v,
+      children: /* @__PURE__ */ e("div", { ref: N, children: s })
     }
   );
 };
 function Hr(n) {
   const {
     onDelta: t,
-    onDragStart: o,
-    onDragEnd: s,
+    onDragStart: a,
+    onDragEnd: l,
     disabled: r = !1,
-    primaryButtonOnly: l = !0,
-    preventScrollOnMove: a = !0
-  } = n, [i, c] = C.useState(!1), b = C.useRef(!1), R = C.useRef(0), N = C.useRef(0), h = C.useRef(0), v = C.useRef(null), f = C.useRef(null), p = C.useRef({ onDelta: t, onDragStart: o, onDragEnd: s, preventScrollOnMove: a });
+    primaryButtonOnly: o = !0,
+    preventScrollOnMove: i = !0
+  } = n, [s, c] = C.useState(!1), v = C.useRef(!1), R = C.useRef(0), N = C.useRef(0), m = C.useRef(0), b = C.useRef(null), f = C.useRef(null), p = C.useRef({ onDelta: t, onDragStart: a, onDragEnd: l, preventScrollOnMove: i });
   C.useEffect(() => {
-    p.current = { onDelta: t, onDragStart: o, onDragEnd: s, preventScrollOnMove: a };
+    p.current = { onDelta: t, onDragStart: a, onDragEnd: l, preventScrollOnMove: i };
   });
   const u = C.useRef({}), I = C.useCallback((y) => {
-    if (!b.current) return;
+    if (!v.current) return;
     const k = {
       clientX: y ?? N.current,
       startX: R.current,
-      totalDeltaX: h.current,
-      target: v.current
+      totalDeltaX: m.current,
+      target: b.current
     };
-    b.current = !1, c(!1);
-    const { move: S, up: O, keydown: P } = u.current;
-    S && window.removeEventListener("pointermove", S, !0), O && (window.removeEventListener("pointerup", O, !0), window.removeEventListener("pointercancel", O, !0)), P && window.removeEventListener("keydown", P, !0), u.current = {}, f.current != null && (cancelAnimationFrame(f.current), f.current = null), p.current.onDragEnd?.(k), v.current = null, h.current = 0;
+    v.current = !1, c(!1);
+    const { move: S, up: z, keydown: P } = u.current;
+    S && window.removeEventListener("pointermove", S, !0), z && (window.removeEventListener("pointerup", z, !0), window.removeEventListener("pointercancel", z, !0)), P && window.removeEventListener("keydown", P, !0), u.current = {}, f.current != null && (cancelAnimationFrame(f.current), f.current = null), p.current.onDragEnd?.(k), b.current = null, m.current = 0;
   }, []), x = C.useCallback((y) => {
-    if (r || l && y.button !== 0) return;
-    y.target.setPointerCapture?.(y.pointerId), R.current = y.clientX, N.current = y.clientX, h.current = 0, v.current = y.target, b.current = !0, c(!0);
+    if (r || o && y.button !== 0) return;
+    y.target.setPointerCapture?.(y.pointerId), R.current = y.clientX, N.current = y.clientX, m.current = 0, b.current = y.target, v.current = !0, c(!0);
     const k = {
       clientX: y.clientX,
       startX: y.clientX,
@@ -3113,33 +3113,33 @@ function Hr(n) {
     };
     p.current.onDragStart?.(k);
     const S = (T) => {
-      b.current && f.current == null && (f.current = requestAnimationFrame(() => {
+      v.current && f.current == null && (f.current = requestAnimationFrame(() => {
         f.current = null;
-        const z = T.clientX, w = z - N.current;
+        const O = T.clientX, w = O - N.current;
         if (w === 0) return;
-        N.current = z, h.current += w;
+        N.current = O, m.current += w;
         const g = {
-          clientX: z,
+          clientX: O,
           startX: R.current,
-          totalDeltaX: h.current,
-          target: v.current
+          totalDeltaX: m.current,
+          target: b.current
         };
         p.current.preventScrollOnMove && T.preventDefault(), p.current.onDelta(w, g);
       }));
-    }, O = (T) => {
+    }, z = (T) => {
       I(T.clientX);
     }, P = (T) => {
       T.key === "Escape" && (T.preventDefault(), I());
     };
-    u.current = { move: S, up: O, keydown: P }, window.addEventListener("pointermove", S, {
-      passive: !a,
+    u.current = { move: S, up: z, keydown: P }, window.addEventListener("pointermove", S, {
+      passive: !i,
       capture: !0
-    }), window.addEventListener("pointerup", O, { capture: !0 }), window.addEventListener("pointercancel", O, { capture: !0 }), window.addEventListener("keydown", P, !0);
-  }, [I, r, a, l]);
+    }), window.addEventListener("pointerup", z, { capture: !0 }), window.addEventListener("pointercancel", z, { capture: !0 }), window.addEventListener("keydown", P, !0);
+  }, [I, r, i, o]);
   return C.useEffect(() => () => {
-    b.current && I();
+    v.current && I();
   }, [I]), {
-    isDragging: i,
+    isDragging: s,
     bind: {
       onPointerDown: x,
       role: "separator",
@@ -3150,32 +3150,32 @@ function Hr(n) {
 const $r = (n) => {
   const {
     column: t,
-    width: o,
-    height: s,
+    width: a,
+    height: l,
     onResize: r,
-    sortDirection: l,
-    onSortClick: a
-  } = n, i = !!t.sortable, { bind: c } = Hr({
-    onDelta: (b) => r(b)
+    sortDirection: o,
+    onSortClick: i
+  } = n, s = !!t.sortable, { bind: c } = Hr({
+    onDelta: (v) => r(v)
   });
   return /* @__PURE__ */ d(
     "div",
     {
-      style: { width: o, height: s },
+      style: { width: a, height: l },
       className: "flex flex-row items-stretch select-none shrink-0",
       children: [
         /* @__PURE__ */ d(
           "div",
           {
-            className: m(
-              "flex-1 min-w-0 px-4 table-header-cell transition-colors duration-100 flex flex-row items-center gap-2",
-              i && "cursor-pointer"
+            className: h(
+              "flex-1 min-w-0 px-4 table-header-cell transition-colors duration-[var(--control-transition-duration-fast)] flex flex-row items-center gap-2",
+              s && "cursor-pointer"
             ),
-            onClick: i ? a : void 0,
+            onClick: s ? i : void 0,
             children: [
               /* @__PURE__ */ e("span", { className: "truncate", children: t.header }),
-              i && l === "asc" && /* @__PURE__ */ e(dn, { className: "h-4 w-4 shrink-0" }),
-              i && l === "desc" && /* @__PURE__ */ e(be, { className: "h-4 w-4 shrink-0" })
+              s && o === "asc" && /* @__PURE__ */ e(dn, { className: "h-4 w-4 shrink-0" }),
+              s && o === "desc" && /* @__PURE__ */ e(ve, { className: "h-4 w-4 shrink-0" })
             ]
           }
         ),
@@ -3197,24 +3197,24 @@ const $r = (n) => {
   );
 }, ke = 200, _r = 60, jr = (n) => {
   const t = {};
-  for (const o of n)
-    t[o.id] = o.defaultWidth ?? ke;
+  for (const a of n)
+    t[a.id] = a.defaultWidth ?? ke;
   return t;
 }, Xr = (n) => {
   const {
     columns: t,
-    rows: o,
-    getRowId: s,
+    rows: a,
+    getRowId: l,
     onRowClick: r,
-    sort: l,
-    onSortChange: a,
-    className: i,
+    sort: o,
+    onSortChange: i,
+    className: s,
     rowHeight: c = 44,
-    headerHeight: b = 44,
+    headerHeight: v = 44,
     emptyState: R
-  } = n, [N, h] = W(() => jr(t));
+  } = n, [N, m] = W(() => jr(t));
   _(() => {
-    h((x) => {
+    m((x) => {
       const y = {};
       let k = Object.keys(x).length !== t.length;
       for (const S of t)
@@ -3222,49 +3222,49 @@ const $r = (n) => {
       return k ? y : x;
     });
   }, [t]);
-  const v = Le((x, y, k) => {
-    h((S) => {
-      const O = S[x] ?? ke, P = Math.max(k, O + y);
-      return P === O ? S : { ...S, [x]: P };
+  const b = Le((x, y, k) => {
+    m((S) => {
+      const z = S[x] ?? ke, P = Math.max(k, z + y);
+      return P === z ? S : { ...S, [x]: P };
     });
   }, []), f = Le((x) => {
-    if (a) {
-      if (!l || l.columnId !== x) {
-        a({ columnId: x, direction: "asc" });
+    if (i) {
+      if (!o || o.columnId !== x) {
+        i({ columnId: x, direction: "asc" });
         return;
       }
-      if (l.direction === "asc") {
-        a({ columnId: x, direction: "desc" });
+      if (o.direction === "asc") {
+        i({ columnId: x, direction: "desc" });
         return;
       }
-      a(null);
+      i(null);
     }
-  }, [l, a]), p = t.reduce(
+  }, [o, i]), p = t.reduce(
     (x, y) => x + (N[y.id] ?? y.defaultWidth ?? ke),
     0
   ), u = Ce(null), I = (x) => {
     u.current && (u.current.scrollLeft = x.currentTarget.scrollLeft);
   };
-  return /* @__PURE__ */ d("div", { className: m("flex flex-col h-full w-full", i), children: [
+  return /* @__PURE__ */ d("div", { className: h("flex flex-col h-full w-full", s), children: [
     /* @__PURE__ */ e(
       "div",
       {
         ref: u,
         className: "overflow-hidden shrink-0 table-header-strip",
-        style: { height: b },
+        style: { height: v },
         children: /* @__PURE__ */ e(
           "div",
           {
-            className: "flex flex-row table-header font-medium",
+            className: "flex flex-row table-header font-[number:var(--font-weight-table-header)]",
             style: { width: p, minWidth: "100%" },
             children: t.map((x) => /* @__PURE__ */ e(
               $r,
               {
                 column: x,
                 width: N[x.id] ?? x.defaultWidth ?? ke,
-                height: b,
-                onResize: (y) => v(x.id, y, x.minWidth ?? _r),
-                sortDirection: l?.columnId === x.id ? l.direction : null,
+                height: v,
+                onResize: (y) => b(x.id, y, x.minWidth ?? _r),
+                sortDirection: o?.columnId === x.id ? o.direction : null,
                 onSortClick: () => f(x.id)
               },
               x.id
@@ -3278,16 +3278,16 @@ const $r = (n) => {
       {
         className: "flex-1 overflow-auto",
         onScroll: I,
-        children: o.length === 0 && R ? /* @__PURE__ */ e("div", { className: "flex h-full min-w-full items-center justify-center p-8", children: R }) : /* @__PURE__ */ e(
+        children: a.length === 0 && R ? /* @__PURE__ */ e("div", { className: "flex h-full min-w-full items-center justify-center p-8", children: R }) : /* @__PURE__ */ e(
           "div",
           {
             className: "flex flex-col",
             style: { width: p, minWidth: "100%" },
-            children: o.map((x, y) => /* @__PURE__ */ e(
+            children: a.map((x, y) => /* @__PURE__ */ e(
               "div",
               {
-                className: m(
-                  "flex flex-row table-body-row transition-colors duration-100",
+                className: h(
+                  "flex flex-row table-body-row transition-colors duration-[var(--control-transition-duration-fast)]",
                   r && "cursor-pointer"
                 ),
                 onClick: r ? () => r(x, y) : void 0,
@@ -3299,33 +3299,33 @@ const $r = (n) => {
                       width: N[k.id] ?? k.defaultWidth ?? ke,
                       height: c
                     },
-                    children: /* @__PURE__ */ e("div", { className: "break-all line-clamp-1", children: k.renderCell(x, y) })
+                    children: /* @__PURE__ */ e("div", { className: "break-all line-clamp-1 font-[number:var(--font-weight-table-cell)]", children: k.renderCell(x, y) })
                   },
                   k.id
                 ))
               },
-              s(x, y)
+              l(x, y)
             ))
           }
         )
       }
     )
   ] });
-}, $l = (n) => {
-  const { Icon: t, title: o, description: s, children: r, className: l } = n;
-  return /* @__PURE__ */ d("div", { className: m("flex flex-col items-center gap-3 text-center", l), children: [
-    t && /* @__PURE__ */ e("div", { className: "flex h-14 w-14 items-center justify-center rounded-2xl bg-[var(--color-table-header-bg)]", children: /* @__PURE__ */ e(t, { className: "h-6 w-6 text-[var(--color-input-icon)]" }) }),
-    (o || s) && /* @__PURE__ */ d("div", { className: "flex flex-col gap-1", children: [
-      o && /* @__PURE__ */ e("div", { className: "font-medium text-[var(--color-input-text)]", children: o }),
-      s && /* @__PURE__ */ e("div", { className: "text-sm text-[var(--color-input-description-text)]", children: s })
+}, _o = (n) => {
+  const { Icon: t, title: a, description: l, children: r, className: o } = n;
+  return /* @__PURE__ */ d("div", { className: h("flex flex-col items-center gap-3 text-center", o), children: [
+    t && /* @__PURE__ */ e("div", { className: "flex h-14 w-14 items-center justify-center rounded-[var(--border-radius-panel)] bg-[var(--color-table-header-bg)]", children: /* @__PURE__ */ e(t, { className: "h-6 w-6 text-[var(--color-input-icon)]" }) }),
+    (a || l) && /* @__PURE__ */ d("div", { className: "flex flex-col gap-1", children: [
+      a && /* @__PURE__ */ e("div", { className: "font-[number:var(--font-weight-table-header)] text-[var(--color-input-text)]", children: a }),
+      l && /* @__PURE__ */ e("div", { className: "text-sm text-[var(--color-input-description-text)]", children: l })
     ] }),
     r
   ] });
 }, Ct = (n) => {
-  const { label: t, children: o, className: s } = n;
-  return /* @__PURE__ */ d("div", { className: m("flex flex-col dropdown-button-group", s), children: [
-    t && /* @__PURE__ */ e("div", { className: "mb-2 text-sm dropdown-group-label font-semibold px-3", children: t }),
-    o
+  const { label: t, children: a, className: l } = n;
+  return /* @__PURE__ */ d("div", { className: h("flex flex-col dropdown-button-group", l), children: [
+    t && /* @__PURE__ */ e("div", { className: "mb-2 text-[length:var(--font-size-label)] dropdown-group-label font-[number:var(--font-weight-group-header)] px-3", children: t }),
+    a
   ] });
 }, Vr = () => /* @__PURE__ */ e("div", {}), Kr = [
   { id: 1, email: "sarah.jennings@example.com", firstname: "Sarah", lastname: "Jennings", status: "active" },
@@ -3345,7 +3345,7 @@ const $r = (n) => {
   {
     id: "email",
     header: "Email",
-    renderCell: (n) => /* @__PURE__ */ e(Ee, { Icon: mn, onClick: () => {
+    renderCell: (n) => /* @__PURE__ */ e(Ee, { Icon: hn, onClick: () => {
     }, children: n.email })
   },
   { id: "firstname", header: "First Name", renderCell: (n) => n.firstname },
@@ -3355,15 +3355,15 @@ const $r = (n) => {
     header: "Status",
     renderCell: () => /* @__PURE__ */ e(qr, {})
   }
-], _l = () => /* @__PURE__ */ d("div", { className: "flex flex-col gap-6", children: [
+], jo = () => /* @__PURE__ */ d("div", { className: "flex flex-col gap-6", children: [
   /* @__PURE__ */ d("div", { className: "flex flex-row items-center justify-start gap-3", children: [
     /* @__PURE__ */ e(Wt, { Icon: Fe, placeholder: "Search..." }),
-    /* @__PURE__ */ e(Ye, { Icon: mt }),
+    /* @__PURE__ */ e(Ye, { Icon: ht }),
     /* @__PURE__ */ e(Gn, { Icon: ft, children: "New" }),
     /* @__PURE__ */ d(
       Ue,
       {
-        trigger: /* @__PURE__ */ e(Ye, { Icon: mt }),
+        trigger: /* @__PURE__ */ e(Ye, { Icon: ht }),
         children: [
           /* @__PURE__ */ e(X, { dismissOnClick: !1, Icon: ft, children: "Add new" }),
           /* @__PURE__ */ e(X, { Icon: un, children: "Remove" }),
@@ -3436,68 +3436,68 @@ const $r = (n) => {
   }
 ) });
 export {
-  Hl as AutoScroll,
+  $o as AutoScroll,
   Ee as Badge,
   Mr as BadgeColor,
   Gn as Button,
   Ut as ButtonIconRound,
   Ye as ButtonIconSquare,
-  Bl as Divider,
+  Ao as Divider,
   X as DropdownButton,
   Ct as DropdownButtonGroup,
   jt as DropdownDismissContext,
   Ue as DropdownMenu,
-  ve as DropdownPanel,
+  be as DropdownPanel,
   Wt as Input,
-  Cl as InputCheck,
-  xl as InputColor,
+  Io as InputCheck,
+  wo as InputColor,
   V as InputDescription,
   K as InputError,
   ne as InputErrorIcon,
-  Rl as InputFileMultiple,
-  Il as InputFileSingle,
+  So as InputFileMultiple,
+  Ro as InputFileSingle,
   Z as InputIconButton,
-  he as InputIconButtonTray,
+  me as InputIconButtonTray,
   Y as InputLabel,
-  Dl as InputLexical,
-  wl as InputPassword,
-  yl as InputRadio,
+  zo as InputLexical,
+  No as InputPassword,
+  ko as InputRadio,
   Er as InputSelect,
   $e as InputSelectDivider,
   He as InputSelectGroupHeader,
-  Ll as InputSelectMultiple,
-  Ol as InputSelectNative,
+  Po as InputSelectMultiple,
+  Oo as InputSelectNative,
   We as InputSelectOption,
-  zl as InputSelectSearchable,
-  Tl as InputSelectSearchableAsync,
-  Nl as InputTextArea,
-  kl as InputToggle,
+  To as InputSelectSearchable,
+  Lo as InputSelectSearchableAsync,
+  yo as InputTextArea,
+  Co as InputToggle,
   Nr as LEXICAL_NODES,
   Cr as LexicalBlockTypeSelect,
-  Sl as LexicalDefaultToolbarContent,
+  Do as LexicalDefaultToolbarContent,
   Pr as LexicalFloatingToolbar,
   Rr as LexicalFormatButtons,
-  Or as LexicalHistoryButtons,
+  zr as LexicalHistoryButtons,
   Dr as LexicalLinkButton,
   Sr as LexicalListButtons,
   Lr as LexicalToolbar,
-  ie as LexicalToolbarButton,
+  se as LexicalToolbarButton,
   qe as LexicalToolbarDivider,
   Vt as LexicalToolbarItems,
-  Ul as Modal,
-  Pl as Panel,
-  Fl as PanelField,
-  Ml as PanelLink,
-  El as PanelStack,
+  Wo as Modal,
+  Eo as Panel,
+  Mo as PanelField,
+  Bo as PanelLink,
+  Fo as PanelStack,
   Ht as PopoverBase,
-  Wl as SidebarModal,
+  Ho as SidebarModal,
   Se as Spinner,
   Wr as TabButtons,
   Xr as Table,
   $r as TableColumnHead,
-  $l as TableEmpty,
-  _l as Test,
-  Al as Tooltip,
+  _o as TableEmpty,
+  jo as Test,
+  Uo as Tooltip,
   wr as UploadFileTile,
   H as isSelectOption,
   wt as lexicalTheme,