react-ui-suite 0.1.0 → 1.1.1

package/dist/index.js

@@ -1,65 +1,44 @@
+// index.ts
+import "./utility-vars-EJQQEY4Z.css";
+import "./tokens-SXYSRKNB.css";
+import "./layout-safety-HVFX63T3.css";
+
 // components/Alert/Alert.tsx
 import * as React from "react";
-import { twMerge } from "tailwind-merge";
+import clsx from "clsx";
+import "./Alert-AVVBZ6TP.css";
 import { jsx, jsxs } from "react/jsx-runtime";
-var variantStyles = {
-  info: {
-    container: "bg-sky-50 text-sky-900 ring-1 ring-sky-100 dark:bg-sky-500/10 dark:text-sky-100",
-    accent: "bg-sky-400",
-    icon: "\u2139\uFE0F"
-  },
-  success: {
-    container: "bg-emerald-50 text-emerald-900 ring-1 ring-emerald-100 dark:bg-emerald-500/10 dark:text-emerald-100",
-    accent: "bg-emerald-400",
-    icon: "\u2714\uFE0F"
-  },
-  warning: {
-    container: "bg-amber-50 text-amber-900 ring-1 ring-amber-100 dark:bg-amber-400/10 dark:text-amber-100",
-    accent: "bg-amber-400",
-    icon: "\u26A0\uFE0F"
-  },
-  danger: {
-    container: "bg-rose-50 text-rose-900 ring-1 ring-rose-100 dark:bg-rose-500/10 dark:text-rose-100",
-    accent: "bg-rose-400",
-    icon: "\u26D4"
-  }
+var variantIcons = {
+  info: "\u2139\uFE0F",
+  success: "\u2705",
+  warning: "\u26A0\uFE0F",
+  danger: "\u26D4"
 };
 var Alert = React.forwardRef(function Alert2({ title, description, variant = "info", onDismiss, className, ...rest }, ref) {
-  const style = variantStyles[variant];
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ...rest,
       ref,
       role: "alert",
-      className: twMerge(
-        "relative flex items-start gap-3 rounded-2xl px-4 py-3 text-sm shadow-sm",
-        style.container,
-        className
-      ),
+      className: clsx("rui-alert", "rui-root", "rui-surface", `rui-alert--${variant}`, className),
       children: [
-        /* @__PURE__ */ jsx("span", { className: "mt-[2px] text-base", "aria-hidden": "true", children: style.icon }),
-        /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-          /* @__PURE__ */ jsx("p", { className: "font-semibold", children: title }),
-          description ? /* @__PURE__ */ jsx("p", { className: "text-sm/relaxed opacity-90", children: description }) : null
+        /* @__PURE__ */ jsx("span", { className: "rui-alert__icon", "aria-hidden": "true", children: variantIcons[variant] }),
+        /* @__PURE__ */ jsxs("div", { className: "rui-alert__content", children: [
+          /* @__PURE__ */ jsx("p", { className: "rui-alert__title rui-text-wrap", children: title }),
+          description ? /* @__PURE__ */ jsx("p", { className: "rui-alert__description rui-text-wrap", children: description }) : null
         ] }),
         onDismiss ? /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
             onClick: onDismiss,
-            className: "rounded-full p-1 text-xs font-semibold uppercase tracking-wide text-current/70 hover:text-current focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent",
+            className: "rui-alert__dismiss",
             "aria-label": "Dismiss alert",
             children: "\xD7"
           }
         ) : null,
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: twMerge("absolute inset-y-2 left-1 w-1 rounded-full", style.accent),
-            "aria-hidden": "true"
-          }
-        )
+        /* @__PURE__ */ jsx("span", { className: "rui-alert__accent", "aria-hidden": "true" })
       ]
     }
   );
@@ -67,26 +46,16 @@ var Alert = React.forwardRef(function Alert2({ title, description, variant = "in
 
 // components/Badge/Badge.tsx
 import * as React2 from "react";
-import { twMerge as twMerge2 } from "tailwind-merge";
+import clsx2 from "clsx";
+import "./Badge-FPJ2X7KC.css";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var variantClasses = {
-  neutral: "bg-slate-100 text-slate-700 ring-1 ring-slate-200 dark:bg-zinc-900/60 dark:text-zinc-100 dark:ring-zinc-700/60",
-  info: "bg-sky-50 text-sky-700 ring-1 ring-sky-200 dark:bg-sky-500/10 dark:text-sky-300",
-  success: "bg-emerald-50 text-emerald-700 ring-1 ring-emerald-200 dark:bg-emerald-500/10 dark:text-emerald-300",
-  warning: "bg-amber-50 text-amber-700 ring-1 ring-amber-200 dark:bg-amber-500/10 dark:text-amber-200",
-  danger: "bg-rose-50 text-rose-700 ring-1 ring-rose-200 dark:bg-rose-500/10 dark:text-rose-300"
-};
 var Badge = React2.forwardRef(function Badge2({ variant = "neutral", icon, className, children, ...rest }, ref) {
   return /* @__PURE__ */ jsxs2(
     "span",
     {
       ...rest,
       ref,
-      className: twMerge2(
-        "inline-flex items-center gap-1 rounded-full px-3 py-1 text-[0.7rem] font-semibold uppercase tracking-wide",
-        variantClasses[variant],
-        className
-      ),
+      className: clsx2("rui-badge", "rui-root", "rui-text-wrap", `rui-badge--${variant}`, className),
       children: [
         icon ? /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", children: icon }) : null,
         children
@@ -96,21 +65,20 @@ var Badge = React2.forwardRef(function Badge2({ variant = "neutral", icon, class
 });
 
 // components/Button/Button.tsx
-import { twMerge as twMerge3 } from "tailwind-merge";
+import clsx3 from "clsx";
+import "./Button-S5BQ425L.css";
 import { jsx as jsx3 } from "react/jsx-runtime";
 function Button({
   children,
   onClick,
   disabled = false,
-  className = "",
+  className,
   type = "button",
   style,
   ...rest
 }) {
   const hasCustomBackground = typeof className === "string" && /bg-/.test(className);
   const hasCustomText = typeof className === "string" && /text-/.test(className);
-  const backgroundClasses = hasCustomBackground ? "" : "bg-white hover:bg-slate-100 dark:bg-zinc-900/70 dark:hover:bg-zinc-800";
-  const textClasses = hasCustomText ? "" : "text-slate-900 dark:text-zinc-100";
   return /* @__PURE__ */ jsx3(
     "button",
     {
@@ -119,13 +87,11 @@ function Button({
       disabled,
       style,
       ...rest,
-      className: twMerge3(
-        "inline-flex items-center justify-center gap-2 rounded-xl border border-slate-300 px-4 py-2 text-sm font-semibold shadow-sm transition",
-        backgroundClasses,
-        textClasses,
-        "hover:border-slate-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-500",
-        "disabled:cursor-not-allowed disabled:opacity-60",
-        "dark:border-zinc-700/60 dark:hover:border-zinc-500 dark:shadow-slate-950/20",
+      className: clsx3(
+        "rui-button",
+        "rui-root",
+        !hasCustomBackground && "rui-button--bg-default",
+        !hasCustomText && "rui-button--text-default",
         className
       ),
       children
@@ -135,37 +101,34 @@ function Button({
 
 // components/Card/Card.tsx
 import * as React3 from "react";
-import { twMerge as twMerge4 } from "tailwind-merge";
+import clsx4 from "clsx";
+import "./Card-SS7L6RAU.css";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var Card = React3.forwardRef(function Card2({ eyebrow, title, actions, children, footer, muted, className, ...rest }, ref) {
-  const hasHeader = eyebrow || actions;
+  const hasHeader = Boolean(eyebrow || actions);
   return /* @__PURE__ */ jsxs3(
     "div",
     {
       ...rest,
       ref,
-      className: twMerge4(
-        "flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-5 shadow-lg shadow-slate-200/40 dark:border-zinc-700/60 dark:bg-zinc-900/70 dark:shadow-none",
-        muted && "bg-slate-50/70 dark:bg-zinc-900/40",
-        className
-      ),
+      className: clsx4("rui-card", "rui-root", "rui-surface", muted && "rui-card--muted", className),
       children: [
-        hasHeader && /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between gap-4", children: [
-          eyebrow ? /* @__PURE__ */ jsx4("p", { className: "text-xs font-semibold uppercase tracking-[0.2em] text-slate-400 dark:text-zinc-400", children: eyebrow }) : /* @__PURE__ */ jsx4("span", {}),
-          actions ? /* @__PURE__ */ jsx4("div", { className: "text-sm text-slate-500 dark:text-zinc-400", children: actions }) : null
+        hasHeader && /* @__PURE__ */ jsxs3("div", { className: "rui-card__header", children: [
+          eyebrow ? /* @__PURE__ */ jsx4("p", { className: "rui-card__eyebrow rui-text-wrap", children: eyebrow }) : /* @__PURE__ */ jsx4("p", { className: "rui-card__eyebrow rui-text-wrap rui-card__eyebrow--placeholder", children: "Eyebrow" }),
+          actions ? /* @__PURE__ */ jsx4("div", { className: "rui-card__actions", children: actions }) : null
         ] }),
         title ? /* @__PURE__ */ jsx4(
           "h3",
           {
-            className: twMerge4(
-              "text-lg font-semibold text-slate-900 dark:text-zinc-100",
-              hasHeader ? "mt-3" : "mt-0"
+            className: clsx4(
+              "rui-card__title rui-text-wrap",
+              hasHeader && "rui-card__title--offset"
             ),
             children: title
           }
         ) : null,
-        children ? /* @__PURE__ */ jsx4("div", { className: "mt-3 flex-1 text-sm text-slate-600 dark:text-zinc-300", children }) : null,
-        footer ? /* @__PURE__ */ jsx4("div", { className: "mt-4 border-t border-slate-100 pt-3 text-xs text-slate-500 dark:border-zinc-800 dark:text-zinc-400", children: footer }) : null
+        children ? /* @__PURE__ */ jsx4("div", { className: "rui-card__body rui-text-wrap", children }) : null,
+        footer ? /* @__PURE__ */ jsx4("div", { className: "rui-card__footer rui-text-wrap", children: footer }) : null
       ]
     }
   );
@@ -173,7 +136,6 @@ var Card = React3.forwardRef(function Card2({ eyebrow, title, actions, children,
 
 // components/Checkbox/Checkbox.tsx
 import * as React4 from "react";
-import { twMerge as twMerge5 } from "tailwind-merge";
 
 // components/Combobox/icons.tsx
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
@@ -223,6 +185,8 @@ function assignRef(ref, value) {
 }
 
 // components/Checkbox/Checkbox.tsx
+import clsx5 from "clsx";
+import "./Checkbox-DH24P7XS.css";
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var Checkbox = React4.forwardRef(function Checkbox2({
   label,
@@ -233,6 +197,10 @@ var Checkbox = React4.forwardRef(function Checkbox2({
   disabled,
   className,
   indeterminate,
+  uncheckedBoxColor,
+  checkedBoxColor,
+  uncheckedBorderColor,
+  checkedBorderColor,
   id,
   ...rest
 }, forwardedRef) {
@@ -265,14 +233,20 @@ var Checkbox = React4.forwardRef(function Checkbox2({
     "label",
     {
       htmlFor: checkboxId,
-      className: twMerge5(
-        "flex cursor-pointer gap-3 rounded-2xl border border-transparent px-2 py-2 text-left transition hover:bg-slate-50 dark:hover:bg-zinc-900/60",
-        "items-center",
-        disabled && "cursor-not-allowed opacity-60",
+      className: clsx5(
+        "rui-root",
+        "rui-checkbox",
+        disabled && "rui-checkbox--disabled",
         className
       ),
+      style: {
+        "--rui-checkbox-box-bg": uncheckedBoxColor,
+        "--rui-checkbox-box-bg-checked": checkedBoxColor,
+        "--rui-checkbox-box-border": uncheckedBorderColor,
+        "--rui-checkbox-box-border-checked": checkedBorderColor
+      },
       children: [
-        /* @__PURE__ */ jsxs5("span", { className: "flex h-6 w-6 items-center justify-center", children: [
+        /* @__PURE__ */ jsxs5("span", { className: "rui-checkbox__control", children: [
           /* @__PURE__ */ jsx6(
             "input",
             {
@@ -280,7 +254,7 @@ var Checkbox = React4.forwardRef(function Checkbox2({
               ref: mergedRef,
               id: checkboxId,
               type: "checkbox",
-              className: "peer sr-only",
+              className: "rui-checkbox__input",
               checked: resolvedChecked,
               onChange: handleChange,
               disabled
@@ -289,18 +263,19 @@ var Checkbox = React4.forwardRef(function Checkbox2({
           /* @__PURE__ */ jsx6(
             "span",
             {
-              className: twMerge5(
-                "grid size-5 place-items-center rounded-lg border border-slate-300 bg-white text-[0.65rem] font-semibold text-slate-600 transition drop-shadow-sm peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-slate-400 dark:border-zinc-600 dark:bg-zinc-950/70 dark:text-zinc-200",
-                resolvedChecked && "border-slate-400 bg-slate-100 text-slate-900 shadow-[0_0_0_1px_rgba(148,163,184,0.45)] dark:border-zinc-500 dark:bg-zinc-500 dark:text-white"
+              className: clsx5(
+                "rui-checkbox__box",
+                resolvedChecked && "rui-checkbox__box--checked",
+                indeterminate && !resolvedChecked && "rui-checkbox__box--indeterminate"
               ),
               "aria-hidden": "true",
-              children: resolvedChecked ? /* @__PURE__ */ jsx6(Check, { className: "h-3 w-3" }) : indeterminate ? /* @__PURE__ */ jsx6("span", { className: "h-[2px] w-2 rounded-full bg-current" }) : null
+              children: resolvedChecked ? /* @__PURE__ */ jsx6(Check, { className: "rui-checkbox__check" }) : indeterminate ? /* @__PURE__ */ jsx6("span", { className: "rui-checkbox__dash" }) : null
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs5("span", { className: "flex flex-1 flex-col", children: [
-          /* @__PURE__ */ jsx6("span", { className: "text-sm font-semibold text-slate-900 dark:text-zinc-100", children: label }),
-          description ? /* @__PURE__ */ jsx6("span", { className: "text-xs text-slate-500 dark:text-zinc-400", children: description }) : null
+        /* @__PURE__ */ jsxs5("span", { className: "rui-checkbox__text", children: [
+          /* @__PURE__ */ jsx6("span", { className: "rui-checkbox__label rui-text-wrap", children: label }),
+          description ? /* @__PURE__ */ jsx6("span", { className: "rui-checkbox__description rui-text-wrap", children: description }) : null
         ] })
       ]
     }
@@ -309,7 +284,8 @@ var Checkbox = React4.forwardRef(function Checkbox2({
 
 // components/ColorPicker/ColorPicker.tsx
 import * as React5 from "react";
-import { twMerge as twMerge6 } from "tailwind-merge";
+import clsx6 from "clsx";
+import "./ColorPicker-K6LXYYSW.css";
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var defaultSwatches = ["#0ea5e9", "#22c55e", "#f97316", "#f43f5e", "#6366f1", "#facc15"];
 var formatOrder = ["hex", "rgb", "hsl"];
@@ -553,6 +529,7 @@ var ColorPicker = React5.forwardRef(
     const [hue, setHue] = React5.useState(resolvedHsv.h);
     const [saturation, setSaturation] = React5.useState(resolvedHsv.s);
     const [valueLevel, setValueLevel] = React5.useState(resolvedHsv.v);
+    const lastColorUpdateSource = React5.useRef(null);
     const generatedId = React5.useId();
     const inputId = id != null ? id : generatedId;
     const inputRef = React5.useRef(null);
@@ -572,9 +549,12 @@ var ColorPicker = React5.forwardRef(
     );
     const shouldLockHue = (s, v) => s <= 1 || v <= 1;
     React5.useEffect(() => {
-      setHue((prev) => shouldLockHue(resolvedHsv.s, resolvedHsv.v) ? prev : resolvedHsv.h);
+      if (lastColorUpdateSource.current !== "gradient") {
+        setHue((prev) => shouldLockHue(resolvedHsv.s, resolvedHsv.v) ? prev : resolvedHsv.h);
+      }
       setSaturation(resolvedHsv.s);
       setValueLevel(resolvedHsv.v);
+      lastColorUpdateSource.current = null;
     }, [resolvedHsv.h, resolvedHsv.s, resolvedHsv.v]);
     React5.useEffect(() => {
       setSwatchList(normalizedSwatches);
@@ -595,6 +575,7 @@ var ColorPicker = React5.forwardRef(
       if (!normalized) return;
       const hsv = hexToHsv(normalized);
       if (hsv) {
+        lastColorUpdateSource.current = "swatch";
         setHue((prev) => shouldLockHue(hsv.s, hsv.v) ? prev : hsv.h);
         setSaturation(hsv.s);
         setValueLevel(hsv.v);
@@ -626,6 +607,7 @@ var ColorPicker = React5.forwardRef(
           }
           const parsed = channelsToHex(updated, format);
           if (parsed) {
+            lastColorUpdateSource.current = "channel";
             applyColor(parsed);
           }
           return updated;
@@ -675,6 +657,7 @@ var ColorPicker = React5.forwardRef(
         const nextV = Math.round((1 - yRatio) * 100);
         setSaturation(nextS);
         setValueLevel(nextV);
+        lastColorUpdateSource.current = "gradient";
         applyColor(hsvToHex(hue, nextS, nextV));
       },
       [applyColor, hue]
@@ -710,6 +693,7 @@ var ColorPicker = React5.forwardRef(
         const ratio = clamp((clientX - rect.left) / rect.width, 0, 1);
         const nextHue = Math.round(ratio * 360);
         setHue(nextHue);
+        lastColorUpdateSource.current = "hue";
         applyColor(hsvToHex(nextHue, saturation, valueLevel));
       },
       [applyColor, saturation, valueLevel]
@@ -745,8 +729,8 @@ var ColorPicker = React5.forwardRef(
       };
     }, []);
     const activeLabels = channelLabels[format];
-    return /* @__PURE__ */ jsxs6("div", { className: "relative inline-flex flex-col items-center gap-2", children: [
-      label ? /* @__PURE__ */ jsx7("p", { className: "text-[10px] font-semibold uppercase tracking-[0.3em] text-slate-400 dark:text-zinc-500", children: label }) : null,
+    return /* @__PURE__ */ jsxs6("div", { className: "rui-root rui-color-picker", children: [
+      label ? /* @__PURE__ */ jsx7("p", { className: "rui-color-picker__label rui-text-wrap", children: label }) : null,
       /* @__PURE__ */ jsxs6(
         "button",
         {
@@ -756,12 +740,12 @@ var ColorPicker = React5.forwardRef(
           "aria-haspopup": "dialog",
           "aria-expanded": isOpen,
           "aria-label": label ? `Adjust ${label}` : "Choose color",
-          className: "relative inline-flex h-12 w-12 items-center justify-center rounded-full border border-slate-200 bg-white shadow-sm transition hover:shadow-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 dark:border-zinc-700 dark:bg-zinc-900",
+          className: "rui-color-picker__trigger",
           children: [
             /* @__PURE__ */ jsx7(
               "span",
               {
-                className: "absolute inset-1 rounded-full border border-white/30 shadow-inner dark:border-zinc-900/60",
+                className: "rui-color-picker__trigger-fill",
                 style: { background: resolvedValue },
                 "aria-hidden": "true"
               }
@@ -769,7 +753,7 @@ var ColorPicker = React5.forwardRef(
             /* @__PURE__ */ jsx7(
               "span",
               {
-                className: "relative text-xl drop-shadow-[0_1px_1px_rgba(15,23,42,0.55)]",
+                className: "rui-color-picker__trigger-icon",
                 style: { transform: "translateX(0.5px) translateY(-1.5px)" },
                 "aria-hidden": "true",
                 children: "\u{1F3A8}"
@@ -784,15 +768,15 @@ var ColorPicker = React5.forwardRef(
           ref: panelRef,
           role: "dialog",
           "aria-label": label ? `${label} color picker` : "Color picker dialog",
-          className: "absolute left-1/2 top-full z-20 mt-3 w-[340px] max-w-[90vw] -translate-x-1/2 rounded-2xl border border-slate-200/80 bg-white/95 p-4 shadow-2xl backdrop-blur-sm dark:border-zinc-700/60 dark:bg-zinc-900/95",
-          children: /* @__PURE__ */ jsxs6("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ jsxs6("div", { className: "space-y-3", children: [
+          className: "rui-color-picker__panel",
+          children: /* @__PURE__ */ jsxs6("div", { className: "rui-color-picker__panel-body", children: [
+            /* @__PURE__ */ jsxs6("div", { className: "rui-color-picker__gradient-section", children: [
               /* @__PURE__ */ jsx7(
                 "div",
                 {
                   ref: gradientRef,
                   onPointerDown: handleGradientPointerDown,
-                  className: "relative h-40 w-full cursor-crosshair overflow-hidden rounded-xl shadow-[inset_0_1px_2px_rgba(15,23,42,.25)] ring-1 ring-black/5 dark:ring-white/10",
+                  className: "rui-color-picker__gradient",
                   style: {
                     backgroundColor: `hsl(${hue}, 100%, 50%)`,
                     backgroundImage: "linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0)), linear-gradient(to right, #fff, rgba(255,255,255,0))"
@@ -801,7 +785,7 @@ var ColorPicker = React5.forwardRef(
                   children: /* @__PURE__ */ jsx7(
                     "span",
                     {
-                      className: "pointer-events-none absolute h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-[0_1px_2px_rgba(15,23,42,.4)]",
+                      className: "rui-color-picker__gradient-thumb",
                       style: {
                         left: `${saturation}%`,
                         top: `${100 - valueLevel}%`,
@@ -816,7 +800,7 @@ var ColorPicker = React5.forwardRef(
                 {
                   ref: hueRef,
                   onPointerDown: handleHuePointerDown,
-                  className: "relative h-3 w-full cursor-pointer rounded-full border border-white/40 shadow-inner dark:border-zinc-800/60",
+                  className: "rui-color-picker__hue",
                   style: {
                     background: "linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)"
                   },
@@ -824,69 +808,73 @@ var ColorPicker = React5.forwardRef(
                   children: /* @__PURE__ */ jsx7(
                     "span",
                     {
-                      className: "pointer-events-none absolute top-1/2 h-5 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full border border-slate-900/40 bg-white shadow",
+                      className: "rui-color-picker__hue-thumb",
                       style: { left: `${hue / 360 * 100}%` }
                     }
                   )
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs6("div", { className: "flex flex-wrap items-center gap-2", children: [
-              swatchList.map((color) => /* @__PURE__ */ jsxs6("div", { className: "relative group", children: [
-                /* @__PURE__ */ jsx7(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => handleSwatchClick(color),
-                    className: twMerge6(
-                      "h-7 w-7 rounded-full border border-white/30 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 dark:border-zinc-900/70",
-                      color.toLowerCase() === resolvedValue.toLowerCase() && "ring-2 ring-offset-2 ring-slate-500 dark:ring-offset-slate-900"
-                    ),
-                    style: { background: color },
-                    "aria-label": `Select ${color}`
-                  }
-                ),
-                /* @__PURE__ */ jsx7(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => handleRemoveSwatch(color),
-                    className: "absolute -top-1.5 -right-1.5 hidden h-5 w-5 items-center justify-center rounded-full bg-white text-[10px] font-bold text-slate-600 shadow-sm ring-1 ring-slate-200 transition group-hover:flex group-focus-within:flex dark:bg-zinc-900 dark:text-zinc-200 dark:ring-zinc-700",
-                    "aria-label": `Remove ${color} swatch`,
-                    children: "\xD7"
-                  }
-                )
-              ] }, color)),
+            /* @__PURE__ */ jsxs6("div", { className: "rui-color-picker__swatch-row", children: [
+              swatchList.map((color) => {
+                const isActive = color.toLowerCase() === resolvedValue.toLowerCase();
+                return /* @__PURE__ */ jsxs6("div", { className: "rui-color-picker__swatch", children: [
+                  /* @__PURE__ */ jsx7(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => handleSwatchClick(color),
+                      className: clsx6(
+                        "rui-color-picker__swatch-button",
+                        isActive && "rui-color-picker__swatch-button--active"
+                      ),
+                      style: { background: color },
+                      "aria-label": `Select ${color}`
+                    }
+                  ),
+                  /* @__PURE__ */ jsx7(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => handleRemoveSwatch(color),
+                      className: "rui-color-picker__swatch-remove",
+                      "aria-label": `Remove ${color} swatch`,
+                      children: "\xD7"
+                    }
+                  )
+                ] }, color);
+              }),
               /* @__PURE__ */ jsx7(
                 "button",
                 {
                   type: "button",
                   onClick: handleAddSwatch,
-                  className: "inline-flex h-7 items-center gap-1 rounded-full border border-dashed border-slate-300 px-3 text-xs font-semibold uppercase tracking-wide text-slate-500 transition hover:border-slate-400 hover:text-slate-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 dark:border-zinc-600 dark:text-zinc-300 dark:hover:border-zinc-500",
-                  children: "+ Add swatch"
+                  className: "rui-color-picker__add-swatch",
+                  "aria-label": "+ Add swatch",
+                  children: "+"
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs6("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsxs6("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
-                /* @__PURE__ */ jsx7("p", { className: "text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-400 dark:text-zinc-500", children: "Channels" }),
-                /* @__PURE__ */ jsx7("div", { className: "inline-flex overflow-hidden rounded-xl border border-slate-200 bg-white/80 text-[11px] font-semibold uppercase text-slate-500 dark:border-zinc-700 dark:bg-zinc-900/80 dark:text-zinc-300", children: formatOrder.map((option) => /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsxs6("div", { className: "rui-color-picker__channels", children: [
+              /* @__PURE__ */ jsxs6("div", { className: "rui-color-picker__channels-header", children: [
+                /* @__PURE__ */ jsx7("span", { children: "Channels" }),
+                /* @__PURE__ */ jsx7("div", { className: "rui-color-picker__format-toggle", children: formatOrder.map((option) => /* @__PURE__ */ jsx7(
                   "button",
                   {
                     type: "button",
                     onClick: () => setFormat(option),
                     "aria-pressed": format === option,
-                    className: twMerge6(
-                      "px-3 py-1.5 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400/60",
-                      format === option ? "bg-white text-slate-900 shadow-[inset_0_0_0_1px_rgba(15,23,42,0.08)] dark:bg-white/15 dark:text-white" : "text-slate-500 dark:text-zinc-400"
+                    className: clsx6(
+                      "rui-color-picker__format-button",
+                      format === option && "is-active"
                     ),
                     children: option.toUpperCase()
                   },
                   option
                 )) })
               ] }),
-              /* @__PURE__ */ jsx7("div", { className: "flex flex-wrap gap-2", children: format === "hex" ? /* @__PURE__ */ jsxs6("label", { className: "flex min-w-[180px] flex-1 items-center gap-2 rounded-xl border border-slate-200 bg-white/60 px-3 py-1.5 font-mono text-sm text-slate-900 focus-within:border-slate-400 dark:border-zinc-700 dark:bg-zinc-900/70 dark:text-zinc-100", children: [
-                /* @__PURE__ */ jsx7("span", { className: "text-base font-semibold text-slate-400 dark:text-zinc-500", children: "#" }),
+              /* @__PURE__ */ jsx7("div", { className: "rui-color-picker__channel-grid", children: format === "hex" ? /* @__PURE__ */ jsxs6("label", { className: "rui-color-picker__channel-field rui-color-picker__channel-field--hex", children: [
+                /* @__PURE__ */ jsx7("span", { className: "rui-color-picker__channel-prefix", children: "#" }),
                 /* @__PURE__ */ jsx7(
                   "input",
                   {
@@ -896,15 +884,15 @@ var ColorPicker = React5.forwardRef(
                     onBlur: resetChannels,
                     inputMode: "text",
                     maxLength: 6,
-                    className: "h-6 min-w-0 flex-1 border-none bg-transparent p-0 text-left text-sm uppercase tracking-[0.2em] text-slate-900 placeholder:text-slate-400 focus:outline-none dark:text-zinc-50"
+                    className: "rui-color-picker__channel-input rui-color-picker__channel-input--hex"
                   }
                 )
               ] }) : channelValues.map((value2, index) => /* @__PURE__ */ jsxs6(
                 "label",
                 {
-                  className: "flex min-w-[90px] flex-1 items-center gap-2 rounded-xl border border-slate-200 bg-white/60 px-3 py-1.5 font-mono text-sm text-slate-900 focus-within:border-slate-400 dark:border-zinc-700 dark:bg-zinc-900/70 dark:text-zinc-100",
+                  className: "rui-color-picker__channel-field",
                   children: [
-                    /* @__PURE__ */ jsx7("span", { className: "text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-400 dark:text-zinc-500", children: activeLabels[index] }),
+                    /* @__PURE__ */ jsx7("span", { className: "rui-color-picker__channel-prefix", children: activeLabels[index] }),
                     /* @__PURE__ */ jsx7(
                       "input",
                       {
@@ -913,7 +901,7 @@ var ColorPicker = React5.forwardRef(
                         onChange: (event) => handleChannelChange(index, event.target.value),
                         onBlur: resetChannels,
                         inputMode: "numeric",
-                        className: "h-6 min-w-0 flex-1 border-none bg-transparent p-0 text-right text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none dark:text-zinc-50"
+                        className: "rui-color-picker__channel-input"
                       }
                     )
                   ]
@@ -942,11 +930,11 @@ var ColorPicker = React5.forwardRef(
 
 // components/Combobox/Combobox.tsx
 import * as React9 from "react";
-import { twMerge as twMerge10 } from "tailwind-merge";
 
 // components/Dropdown/Dropdown.tsx
 import * as React6 from "react";
-import { twMerge as twMerge7 } from "tailwind-merge";
+import clsx7 from "clsx";
+import "./Dropdown-RQAPUZUJ.css";
 import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var Dropdown = React6.forwardRef(
   ({
@@ -978,32 +966,28 @@ var Dropdown = React6.forwardRef(
     onChevronClick,
     children
   }, ref) => {
-    const focusClasses = !isOpen ? "focus-within:border-slate-400 focus-within:shadow-[0_0_0_1px_rgba(148,163,184,0.45)] dark:focus-within:border-slate-500" : "";
-    const buttonClasses = "inline-flex h-9 w-10 items-center justify-center rounded-xl bg-transparent text-sm text-slate-600 transition focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:text-zinc-200";
-    const inputClasses = twMerge7(
-      "w-full bg-transparent text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none dark:text-zinc-100 dark:placeholder:text-zinc-500",
-      inputClassName,
-      inputProps == null ? void 0 : inputProps.className
-    );
+    const focusClasses = !isOpen ? "rui-dropdown__focusWhenClosed" : "";
+    const buttonClasses = "rui-dropdown__chevronButton";
+    const inputClasses = clsx7("rui-dropdown__input", inputClassName, inputProps == null ? void 0 : inputProps.className);
     const mergedPlaceholder = placeholder != null ? placeholder : inputProps == null ? void 0 : inputProps.placeholder;
     const mergedAriaLabel = ariaLabel != null ? ariaLabel : inputProps == null ? void 0 : inputProps["aria-label"];
-    return /* @__PURE__ */ jsxs7("div", { ref, className: twMerge7("relative w-full", className), children: [
+    return /* @__PURE__ */ jsxs7("div", { ref, className: clsx7("rui-dropdown", "rui-root", className), children: [
       /* @__PURE__ */ jsxs7(
         "div",
         {
           onKeyDownCapture,
-          onMouseDown: onShellMouseDown,
+          onPointerDown: onShellMouseDown,
           onFocusCapture: onShellFocusCapture,
           onBlurCapture: onShellBlurCapture,
-          className: twMerge7(
-            "flex h-11 items-center gap-1 rounded-2xl border border-slate-300 bg-white pl-3 pr-1 text-slate-900 shadow-sm transition dark:border-zinc-700/60 dark:bg-zinc-900/70 dark:text-zinc-100",
+          className: clsx7(
+            "rui-dropdown__shell",
             focusClasses,
-            isOpen && twMerge7("rounded-b-none border-b-0 dark:border-b-0", highlightClass),
-            disabled && "opacity-60",
+            isOpen && clsx7("rui-dropdown__shell--open", highlightClass),
+            disabled && "rui-dropdown__shell--disabled",
             shellClassName
           ),
           children: [
-            leadingContent ? /* @__PURE__ */ jsx8("div", { className: "flex items-center", children: leadingContent }) : null,
+            leadingContent ? /* @__PURE__ */ jsx8("div", { className: "rui-dropdown__leading", children: leadingContent }) : null,
             /* @__PURE__ */ jsx8(
               "input",
               {
@@ -1016,8 +1000,8 @@ var Dropdown = React6.forwardRef(
                 "aria-activedescendant": ariaActiveDescendant,
                 "aria-label": mergedAriaLabel,
                 disabled: !!disabled || (inputProps == null ? void 0 : inputProps.disabled),
-                readOnly: !isOpen,
-                onMouseDown: onInputMouseDown,
+                readOnly: !isOpen || !onInputChange,
+                onPointerDown: onInputMouseDown,
                 value: isOpen ? query : displayValue,
                 onFocus: onInputFocus,
                 onChange: onInputChange,
@@ -1025,7 +1009,7 @@ var Dropdown = React6.forwardRef(
                 className: inputClasses
               }
             ),
-            inlineContent ? /* @__PURE__ */ jsx8("div", { className: "flex items-center gap-2", children: inlineContent }) : null,
+            inlineContent ? /* @__PURE__ */ jsx8("div", { className: "rui-dropdown__inline", children: inlineContent }) : null,
             showChevron ? /* @__PURE__ */ jsx8(
               "button",
               {
@@ -1038,7 +1022,7 @@ var Dropdown = React6.forwardRef(
                 children: /* @__PURE__ */ jsx8(
                   ChevronDown,
                   {
-                    className: twMerge7("size-4 transition-transform", isOpen && "rotate-180")
+                    className: clsx7("rui-dropdown__chevronIcon", isOpen && "rui-dropdown__chevronIcon--open")
                   }
                 )
               }
@@ -1054,10 +1038,21 @@ Dropdown.displayName = "Dropdown";
 
 // components/Popover/Popover.tsx
 import * as React7 from "react";
-import { twMerge as twMerge8 } from "tailwind-merge";
+import { createPortal } from "react-dom";
+import clsx8 from "clsx";
+import "./Popover-UQEO2HLP.css";
 import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var MIN_THUMB_SIZE = 28;
 var TRACK_PADDING = 6;
+function getAnchorPosition(anchor) {
+  if (!anchor) return null;
+  const rect = anchor.getBoundingClientRect();
+  return {
+    top: rect.bottom - 1,
+    left: rect.left,
+    width: rect.width
+  };
+}
 function Scrollbar({ scrollRef }) {
   const [{ visible, size, offset }, setThumbState] = React7.useState({
     visible: false,
@@ -1163,16 +1158,16 @@ function Scrollbar({ scrollRef }) {
     "div",
     {
       "aria-hidden": "true",
-      className: "pointer-events-none absolute inset-y-[6px] right-[2px] flex w-3 justify-center",
+      className: "rui-popover__scrollbar",
       children: /* @__PURE__ */ jsx9(
         "div",
         {
-          className: "pointer-events-auto relative h-full w-1 rounded-full bg-slate-900/5 shadow-inner dark:bg-white/10",
+          className: "rui-popover__scrollbar-track",
           onPointerDown: handleTrackPointerDown,
           children: /* @__PURE__ */ jsx9(
             "div",
             {
-              className: "pointer-events-auto absolute left-1/2 w-1.5 -translate-x-1/2 rounded-full bg-slate-400/80 shadow-sm transition-colors dark:bg-zinc-200/70",
+              className: "rui-popover__scrollbar-thumb",
               style: { height: `${size}px`, top: `${offset}px` },
               onPointerDown: handleThumbPointerDown
             }
@@ -1182,21 +1177,56 @@ function Scrollbar({ scrollRef }) {
     }
   );
 }
-function Popover({ className, children }) {
+function Popover({ className, anchorRef, rootRef, children }) {
   const scrollRef = React7.useRef(null);
-  return /* @__PURE__ */ jsx9(
+  const [position, setPosition] = React7.useState(
+    () => {
+      var _a;
+      return getAnchorPosition((_a = anchorRef == null ? void 0 : anchorRef.current) != null ? _a : null);
+    }
+  );
+  const shouldPortal = Boolean(anchorRef) && typeof document !== "undefined";
+  React7.useLayoutEffect(() => {
+    if (!(anchorRef == null ? void 0 : anchorRef.current)) return;
+    let raf = 0;
+    const update = () => {
+      cancelAnimationFrame(raf);
+      raf = window.requestAnimationFrame(() => {
+        setPosition(getAnchorPosition(anchorRef.current));
+      });
+    };
+    update();
+    const onScroll = () => update();
+    window.addEventListener("resize", update);
+    window.addEventListener("scroll", onScroll, true);
+    const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver(update) : null;
+    observer == null ? void 0 : observer.observe(anchorRef.current);
+    return () => {
+      window.removeEventListener("resize", update);
+      window.removeEventListener("scroll", onScroll, true);
+      observer == null ? void 0 : observer.disconnect();
+      cancelAnimationFrame(raf);
+    };
+  }, [anchorRef]);
+  const popoverStyle = shouldPortal ? position ? { top: position.top, left: position.left, width: position.width } : { visibility: "hidden" } : void 0;
+  const popover = /* @__PURE__ */ jsx9(
     "div",
     {
-      className: twMerge8(
-        "absolute left-0 right-0 top-full z-[999] -mt-px rounded-b-2xl rounded-t-none border border-slate-300 bg-white/95 py-1 shadow-xl shadow-slate-200/60 backdrop-blur dark:border-zinc-600 dark:bg-zinc-900/95 dark:shadow-zinc-900/40",
+      ref: rootRef,
+      className: clsx8(
+        "rui-popover",
+        "rui-overlay-root",
+        shouldPortal && "rui-popover--portal",
         className
       ),
-      children: /* @__PURE__ */ jsxs8("div", { className: "relative", children: [
+      style: popoverStyle,
+      children: /* @__PURE__ */ jsxs8("div", { className: "rui-popover__inner", children: [
         children({ scrollRef }),
         /* @__PURE__ */ jsx9(Scrollbar, { scrollRef })
       ] })
     }
   );
+  return shouldPortal ? createPortal(popover, document.body) : popover;
 }
 
 // components/Combobox/hooks.ts
@@ -1222,14 +1252,15 @@ function useOutsideClick(refs, handler) {
       const inside = refs.some((r) => r.current && r.current.contains(target));
       if (!inside) handler();
     }
-    document.addEventListener("mousedown", onDoc);
-    return () => document.removeEventListener("mousedown", onDoc);
+    document.addEventListener("pointerdown", onDoc);
+    return () => document.removeEventListener("pointerdown", onDoc);
   }, [refs, handler]);
 }
 
 // components/Combobox/Listbox.tsx
 import * as React8 from "react";
-import { twMerge as twMerge9 } from "tailwind-merge";
+import clsx9 from "clsx";
+import "./Combobox-UQBN7KFK.css";
 import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function Listbox({
   id,
@@ -1254,9 +1285,9 @@ function Listbox({
       ref: listRef,
       id,
       role: "listbox",
-      className: twMerge9("combobox-scrollbar max-h-64 overflow-auto px-1 pr-4"),
+      className: clsx9("rui-combobox__listbox"),
       children: [
-        options.length === 0 && /* @__PURE__ */ jsx10("li", { "aria-disabled": true, className: "select-none", children: /* @__PURE__ */ jsx10("div", { className: "px-3 py-2 text-sm text-slate-500 dark:text-zinc-500", children: emptyState != null ? emptyState : "No results" }) }),
+        options.length === 0 && /* @__PURE__ */ jsx10("li", { "aria-disabled": true, className: "rui-combobox__empty", children: /* @__PURE__ */ jsx10("div", { className: "rui-combobox__empty-content", children: emptyState != null ? emptyState : "No results" }) }),
         options.map((opt, i) => {
           const selected = opt.id === selectedId;
           const active = i === activeIndex;
@@ -1269,21 +1300,26 @@ function Listbox({
               "aria-selected": selected,
               "aria-disabled": opt.disabled,
               "data-index": i,
-              className: "list-none",
+              className: "rui-combobox__option",
               onMouseEnter: () => !opt.disabled && onHoverIndex(i),
-              onMouseDown: (e) => e.preventDefault(),
-              onClick: () => !opt.disabled && onSelectIndex(i),
+              onPointerDown: (e) => {
+                if (opt.disabled) return;
+                e.preventDefault();
+                e.stopPropagation();
+                onSelectIndex(i);
+              },
               children: renderOption ? renderOption(opt, optionState) : /* @__PURE__ */ jsxs9(
                 "div",
                 {
-                  className: twMerge9(
-                    "flex cursor-pointer items-center gap-3 rounded-xl px-3 py-2 text-sm",
-                    active ? "bg-slate-100 text-slate-900 dark:bg-zinc-800/70 dark:text-zinc-100" : "text-slate-700 hover:bg-slate-100 dark:text-zinc-200 dark:hover:bg-zinc-800/70",
-                    opt.disabled && "cursor-not-allowed opacity-50"
+                  className: clsx9(
+                    "rui-combobox__option-row",
+                    active && "rui-combobox__option-row--active",
+                    selected && "rui-combobox__option-row--selected",
+                    opt.disabled && "rui-combobox__option-row--disabled"
                   ),
                   children: [
-                    /* @__PURE__ */ jsx10("span", { className: "truncate", children: opt.label }),
-                    selected ? /* @__PURE__ */ jsx10(Check, { className: "ml-auto h-3 w-3 text-slate-600 dark:text-zinc-300" }) : /* @__PURE__ */ jsx10("span", { className: "ml-auto inline-flex h-3 w-3" })
+                    /* @__PURE__ */ jsx10("span", { className: "rui-combobox__option-label", children: opt.label }),
+                    selected ? /* @__PURE__ */ jsx10(Check, { className: "rui-combobox__option-icon" }) : /* @__PURE__ */ jsx10("span", { className: "rui-combobox__option-icon-placeholder" })
                   ]
                 }
               )
@@ -1297,6 +1333,8 @@ function Listbox({
 }
 
 // components/Combobox/Combobox.tsx
+import clsx10 from "clsx";
+import "./Combobox-UQBN7KFK.css";
 import { jsx as jsx11 } from "react/jsx-runtime";
 function InnerCombobox({
   options,
@@ -1318,9 +1356,13 @@ function InnerCombobox({
   const inputRef = React9.useRef(null);
   const containerRef = React9.useRef(null);
   const chevronRef = React9.useRef(null);
+  const popoverRef = React9.useRef(null);
   const outsideClickRefs = React9.useMemo(
-    () => [containerRef],
-    [containerRef]
+    () => [
+      containerRef,
+      popoverRef
+    ],
+    [containerRef, popoverRef]
   );
   const mergedInputRef = (node) => {
     inputRef.current = node;
@@ -1331,7 +1373,7 @@ function InnerCombobox({
   const [query, setQuery] = React9.useState("");
   const [activeIndex, setActiveIndex] = React9.useState(-1);
   const suppressNextOpenRef = React9.useRef(false);
-  const suppressToggleRef = React9.useRef(false);
+  const closeAfterSelectRef = React9.useRef(false);
   const prevOpenRef = React9.useRef(open);
   const [selected, setSelected] = useControlledState(
     valueProp,
@@ -1430,14 +1472,24 @@ function InnerCombobox({
       setOpen(false);
     }
   }, [open]);
+  React9.useEffect(() => {
+    if (!closeAfterSelectRef.current) return;
+    if (open) {
+      setOpen(false);
+      return;
+    }
+    closeAfterSelectRef.current = false;
+  }, [open]);
   useOutsideClick(outsideClickRefs, closeOnOutsideClick);
   function commitSelection(opt, opts = {}) {
     const { refocus = true } = opts;
+    closeAfterSelectRef.current = true;
     setSelected(opt);
     onChange == null ? void 0 : onChange(opt);
     if (opt) setQuery("");
     setOpen(false);
     if (refocus) {
+      suppressNextOpenRef.current = true;
       requestAnimationFrame(() => {
         var _a2;
         return (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
@@ -1513,7 +1565,7 @@ function InnerCombobox({
   }
   const selectedLabel = (_a = selected == null ? void 0 : selected.label) != null ? _a : "";
   const selectedId = (_b = selected == null ? void 0 : selected.id) != null ? _b : null;
-  const highlightBorder = "border-slate-400 dark:border-slate-500";
+  const highlightBorder = "rui-combobox__highlightBorder";
   const listboxHighlight = isEffectivelyOpen ? highlightBorder : "";
   function openList() {
     if (disabled) return;
@@ -1546,13 +1598,10 @@ function InnerCombobox({
       chevronRef,
       onKeyDownCapture: onKeyDown,
       onShellMouseDown: (e) => {
-        var _a2;
         if (disabled) return;
-        if ((_a2 = chevronRef.current) == null ? void 0 : _a2.contains(e.target)) return;
         if (!isEffectivelyOpen) {
           e.preventDefault();
           openList();
-          suppressToggleRef.current = true;
         }
       },
       onInputMouseDown: (e) => {
@@ -1582,28 +1631,37 @@ function InnerCombobox({
       },
       onChevronClick: () => {
         if (disabled) return;
-        if (suppressToggleRef.current) {
-          suppressToggleRef.current = false;
-          setOpen((o) => !o);
+        if (!isEffectivelyOpen) {
+          openList();
           return;
         }
-        suppressNextOpenRef.current = false;
-        setOpen((o) => !o);
+        requestAnimationFrame(() => {
+          var _a2;
+          return (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+        });
       },
-      children: isEffectivelyOpen && /* @__PURE__ */ jsx11(Popover, { className: twMerge10(listboxHighlight, listClassName), children: ({ scrollRef }) => /* @__PURE__ */ jsx11(
-        Listbox,
+      children: isEffectivelyOpen && /* @__PURE__ */ jsx11(
+        Popover,
         {
-          id: listboxId,
-          options: visibleOptions,
-          activeIndex,
-          selectedId,
-          onHoverIndex: setActiveIndex,
-          onSelectIndex: (i) => commitSelection(visibleOptions[i]),
-          listRef: scrollRef,
-          emptyState,
-          renderOption
+          anchorRef: containerRef,
+          rootRef: popoverRef,
+          className: clsx10(listboxHighlight, listClassName),
+          children: ({ scrollRef }) => /* @__PURE__ */ jsx11(
+            Listbox,
+            {
+              id: listboxId,
+              options: visibleOptions,
+              activeIndex,
+              selectedId,
+              onHoverIndex: setActiveIndex,
+              onSelectIndex: (i) => commitSelection(visibleOptions[i]),
+              listRef: scrollRef,
+              emptyState,
+              renderOption
+            }
+          )
         }
-      ) })
+      )
     }
   );
 }
@@ -1611,7 +1669,8 @@ var Combobox = React9.forwardRef(InnerCombobox);
 
 // components/DatalistInput/DatalistInput.tsx
 import * as React10 from "react";
-import { twMerge as twMerge11 } from "tailwind-merge";
+import clsx11 from "clsx";
+import "./DatalistInput-72UMJ3OM.css";
 import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 var DatalistInput = React10.forwardRef(
   function DatalistInput2({ label, description, options, className, id, disabled, ...rest }, ref) {
@@ -1654,6 +1713,7 @@ var DatalistInput = React10.forwardRef(
       });
     };
     const handleKeyDown = (e) => {
+      if (disabled) return;
       if (!open && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
         setOpen(true);
         setActiveIndex(0);
@@ -1687,6 +1747,7 @@ var DatalistInput = React10.forwardRef(
     };
     const handleInputChange = (e) => {
       var _a2;
+      if (disabled) return;
       setQuery(e.target.value);
       setOpen(true);
       setActiveIndex(0);
@@ -1696,12 +1757,12 @@ var DatalistInput = React10.forwardRef(
       scrollRef.current = node;
       listboxRef.current = node;
     };
-    return /* @__PURE__ */ jsxs10("div", { className: "space-y-1.5", children: [
+    return /* @__PURE__ */ jsxs10("div", { className: "rui-datalist-input rui-root", children: [
       label ? /* @__PURE__ */ jsx12(
         "label",
         {
           htmlFor: inputId,
-          className: "text-xs font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-zinc-400",
+          className: "rui-datalist-input__label rui-text-wrap",
           children: label
         }
       ) : null,
@@ -1716,11 +1777,11 @@ var DatalistInput = React10.forwardRef(
           query: displayValue,
           inputRef: mergedRef,
           showChevron: false,
-          inlineContent: /* @__PURE__ */ jsx12("span", { className: "text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-400 dark:text-zinc-500", children: "CMD" }),
+          inlineContent: /* @__PURE__ */ jsx12("span", { className: "rui-datalist-input__inline-key", children: "CMD" }),
           onKeyDownCapture: handleKeyDown,
-          onShellMouseDown: () => setOpen(true),
-          onInputFocus: () => setOpen(true),
-          onInputMouseDown: () => setOpen(true),
+          onShellMouseDown: () => !disabled && setOpen(true),
+          onInputFocus: () => !disabled && setOpen(true),
+          onInputMouseDown: () => !disabled && setOpen(true),
           onInputChange: handleInputChange,
           ariaControls: listboxId,
           ariaActiveDescendant: activeDescendant,
@@ -1731,32 +1792,33 @@ var DatalistInput = React10.forwardRef(
             id: inputId,
             "aria-describedby": description ? descriptionId : rest["aria-describedby"]
           },
-          children: open && filtered.length ? /* @__PURE__ */ jsx12(Popover, { children: ({ scrollRef }) => /* @__PURE__ */ jsx12(
+          children: open && filtered.length ? /* @__PURE__ */ jsx12(Popover, { anchorRef: dropdownRef, children: ({ scrollRef }) => /* @__PURE__ */ jsx12(
             "ul",
             {
               ref: (node) => setListRef(node, scrollRef),
               id: listboxId,
               role: "listbox",
-              className: "combobox-scrollbar max-h-56 overflow-auto py-1 text-sm text-slate-800 dark:text-zinc-100",
+              className: "rui-datalist-input__list",
               children: filtered.map((opt, index) => /* @__PURE__ */ jsx12(
                 "li",
                 {
                   id: `${listboxId}-option-${index}`,
                   role: "option",
                   "aria-selected": index === activeIndex,
+                  className: "rui-datalist-input__option",
                   children: /* @__PURE__ */ jsxs10(
                     "button",
                     {
                       type: "button",
                       onMouseEnter: () => setActiveIndex(index),
                       onClick: () => handleSelect(opt),
-                      className: twMerge11(
-                        "flex w-full items-center gap-3 px-3 py-2 text-left transition hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400/70 dark:hover:bg-zinc-800/60",
-                        index === activeIndex && "bg-slate-50 dark:bg-zinc-800/60"
+                      className: clsx11(
+                        "rui-datalist-input__option-button",
+                        index === activeIndex && "is-active"
                       ),
                       children: [
-                        /* @__PURE__ */ jsx12("span", { className: "text-[10px] uppercase tracking-[0.2em] text-slate-400 dark:text-zinc-500", children: "cmd" }),
-                        /* @__PURE__ */ jsx12("span", { className: "font-semibold", children: opt })
+                        /* @__PURE__ */ jsx12("span", { className: "rui-datalist-input__option-key", children: "cmd" }),
+                        /* @__PURE__ */ jsx12("span", { className: "rui-datalist-input__option-text rui-text-truncate", children: opt })
                       ]
                     }
                   )
@@ -1767,18 +1829,18 @@ var DatalistInput = React10.forwardRef(
           ) }) : null
         }
       ),
-      description ? /* @__PURE__ */ jsx12("p", { id: descriptionId, className: "text-xs text-slate-500 dark:text-zinc-400", children: description }) : null
+      description ? /* @__PURE__ */ jsx12("p", { id: descriptionId, className: "rui-datalist-input__description rui-text-wrap", children: description }) : null
     ] });
   }
 );
 
 // components/DatePicker/DatePicker.tsx
 import * as React12 from "react";
-import { twMerge as twMerge13 } from "tailwind-merge";
 
 // components/Select/Select.tsx
 import * as React11 from "react";
-import { twMerge as twMerge12 } from "tailwind-merge";
+import clsx12 from "clsx";
+import "./Select-UA2CM52H.css";
 import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 function Select({
   label,
@@ -1803,7 +1865,19 @@ function Select({
   const id = React11.useId();
   const listboxId = `${id}-listbox`;
   const [open, setOpen] = React11.useState(false);
-  const [activeIndex, setActiveIndex] = React11.useState(-1);
+  const [activeIndexState, setActiveIndexState] = React11.useState(-1);
+  const activeIndexRef = React11.useRef(activeIndexState);
+  const setActiveIndex = React11.useCallback(
+    (value2) => {
+      setActiveIndexState((prev) => {
+        const next = typeof value2 === "function" ? value2(prev) : value2;
+        activeIndexRef.current = next;
+        return next;
+      });
+    },
+    []
+  );
+  const activeIndex = activeIndexState;
   const [selected, setSelected] = useControlledState(value, defaultValue != null ? defaultValue : null);
   useOutsideClick(
     [containerRef],
@@ -1900,7 +1974,7 @@ function Select({
       case "Enter":
       case " ":
         e.preventDefault();
-        if (activeIndex >= 0) commitSelection(activeIndex);
+        if (activeIndexRef.current >= 0) commitSelection(activeIndexRef.current);
         break;
       case "Escape":
         e.preventDefault();
@@ -1916,10 +1990,10 @@ function Select({
     el == null ? void 0 : el.scrollIntoView({ block: "nearest" });
   }, [open, activeIndex]);
   const displayValue = (_b = selectedOption == null ? void 0 : selectedOption.label) != null ? _b : "";
-  const highlightBorder = "border-slate-400 dark:border-slate-500";
+  const highlightBorder = "rui-select__highlightBorder";
   const listboxHighlight = open ? highlightBorder : "";
-  return /* @__PURE__ */ jsxs11("div", { className: "space-y-1.5", children: [
-    label ? /* @__PURE__ */ jsx13("p", { className: "text-xs font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-zinc-400", children: label }) : null,
+  return /* @__PURE__ */ jsxs11("div", { className: "rui-select rui-root", children: [
+    label ? /* @__PURE__ */ jsx13("p", { className: "rui-select__label rui-text-wrap", children: label }) : null,
     /* @__PURE__ */ jsx13(
       Dropdown,
       {
@@ -1929,12 +2003,12 @@ function Select({
         placeholder,
         displayValue,
         query: displayValue,
-        className: twMerge12(
-          "w-full",
-          error && "border-rose-300 focus-within:border-rose-400 focus-within:shadow-[0_0_0_1px_rgba(248,113,113,0.35)] dark:border-rose-500/60",
+        className: clsx12(
+          "rui-select__dropdown",
+          error && "rui-select__dropdown--error",
           className
         ),
-        inputClassName: "font-semibold",
+        inputClassName: "rui-select__input",
         highlightClass: highlightBorder,
         ariaControls: listboxId,
         ariaLabel: label,
@@ -1975,7 +2049,7 @@ function Select({
           }
           setOpen((o) => !o);
         },
-        children: open && /* @__PURE__ */ jsx13(Popover, { className: listboxHighlight, children: ({ scrollRef }) => {
+        children: open && /* @__PURE__ */ jsx13(Popover, { anchorRef: containerRef, className: listboxHighlight, children: ({ scrollRef }) => {
           popoverListRef.current = scrollRef;
           return /* @__PURE__ */ jsx13(
             "ul",
@@ -1983,11 +2057,11 @@ function Select({
               ref: scrollRef,
               id: listboxId,
               role: "listbox",
-              className: "combobox-scrollbar max-h-64 overflow-auto px-1 pr-4",
+              className: "rui-select__list",
               children: options.map((opt, index) => {
                 const isSelected = selected === opt.value;
                 const isActive = activeIndex === index;
-                return /* @__PURE__ */ jsx13("li", { className: "list-none", "data-index": index, children: /* @__PURE__ */ jsxs11(
+                return /* @__PURE__ */ jsx13("li", { className: "rui-select__option", "data-index": index, children: /* @__PURE__ */ jsxs11(
                   "button",
                   {
                     type: "button",
@@ -1996,18 +2070,17 @@ function Select({
                     disabled: opt.disabled,
                     onMouseEnter: () => !opt.disabled && setActiveIndex(index),
                     onClick: () => commitSelection(index),
-                    className: twMerge12(
-                      "flex w-full items-center gap-3 rounded-xl px-3 py-2 text-left text-sm transition",
-                      isActive ? "bg-slate-100 text-slate-900 dark:bg-zinc-800/70 dark:text-zinc-100" : "text-slate-700 hover:bg-slate-100 dark:text-zinc-200 dark:hover:bg-zinc-800/70",
-                      isSelected && "font-semibold",
-                      opt.disabled && "cursor-not-allowed opacity-50"
+                    className: clsx12(
+                      "rui-select__option-button",
+                      isActive && "rui-select__option-button--active",
+                      isSelected && "rui-select__option-button--selected"
                     ),
                     children: [
-                      /* @__PURE__ */ jsxs11("span", { className: "flex-1 text-left", children: [
-                        /* @__PURE__ */ jsx13("span", { className: "block text-slate-900 dark:text-zinc-100", children: opt.label }),
-                        opt.description ? /* @__PURE__ */ jsx13("span", { className: "block text-xs text-slate-500 dark:text-zinc-400", children: opt.description }) : null
+                      /* @__PURE__ */ jsxs11("span", { className: "rui-select__option-content", children: [
+                        /* @__PURE__ */ jsx13("span", { className: "rui-select__option-label rui-text-wrap", children: opt.label }),
+                        opt.description ? /* @__PURE__ */ jsx13("span", { className: "rui-select__option-description rui-text-wrap", children: opt.description }) : null
                       ] }),
-                      isSelected ? /* @__PURE__ */ jsx13(Check, { className: "ml-auto h-3 w-3 text-slate-600 dark:text-zinc-300" }) : /* @__PURE__ */ jsx13("span", { className: "ml-auto inline-flex h-3 w-3" })
+                      isSelected ? /* @__PURE__ */ jsx13(Check, { className: "rui-select__option-check" }) : /* @__PURE__ */ jsx13("span", { className: "rui-select__option-check-placeholder" })
                     ]
                   }
                 ) }, opt.value);
@@ -2017,12 +2090,14 @@ function Select({
         } })
       }
     ),
-    description ? /* @__PURE__ */ jsx13("p", { className: "text-xs text-slate-500 dark:text-zinc-400", children: description }) : null,
-    error ? /* @__PURE__ */ jsx13("p", { className: "text-xs font-medium text-rose-500 dark:text-rose-400", children: error }) : null
+    description ? /* @__PURE__ */ jsx13("p", { className: "rui-select__description rui-text-wrap", children: description }) : null,
+    error ? /* @__PURE__ */ jsx13("p", { className: "rui-select__error rui-text-wrap", children: error }) : null
   ] });
 }
 
 // components/DatePicker/DatePicker.tsx
+import clsx13 from "clsx";
+import "./DatePicker-ICNOIGZ2.css";
 import { Fragment, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 function formatLocalDateString(year, month, day) {
   const y = String(year).padStart(4, "0");
@@ -2030,7 +2105,10 @@ function formatLocalDateString(year, month, day) {
   const d = String(day).padStart(2, "0");
   return `${y}-${m}-${d}`;
 }
-function parseLocalDateString(value) {
+function toDateFromParts(mode, year, month, day) {
+  return mode === "utc" ? new Date(Date.UTC(year, month, day)) : new Date(year, month, day);
+}
+function parseDateString(value, mode) {
   if (!value) return null;
   const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value.trim());
   if (!match) return null;
@@ -2038,19 +2116,19 @@ function parseLocalDateString(value) {
   const year = Number(y);
   const month = Number(m) - 1;
   const day = Number(d);
-  const date = new Date(year, month, day);
+  const date = toDateFromParts(mode, year, month, day);
   if (Number.isNaN(date.getTime())) return null;
   return { date, year, month, day };
 }
-function getMonthDays(year, month) {
-  const first = new Date(year, month, 1);
-  const start = first.getDay();
-  const days = new Date(year, month + 1, 0).getDate();
+function getMonthDays(year, month, mode) {
+  const first = toDateFromParts(mode, year, month, 1);
+  const start = mode === "utc" ? first.getUTCDay() : first.getDay();
+  const endOfMonth = toDateFromParts(mode, year, month + 1, 0);
+  const days = mode === "utc" ? endOfMonth.getUTCDate() : endOfMonth.getDate();
   const grid = [];
   for (let i = 0; i < start; i += 1) grid.push({ day: null });
   for (let d = 1; d <= days; d += 1) {
-    const date = new Date(year, month, d);
-    grid.push({ day: d, date: date.toISOString().slice(0, 10) });
+    grid.push({ day: d, date: formatLocalDateString(year, month, d) });
   }
   return grid;
 }
@@ -2065,7 +2143,8 @@ var DatePicker = React12.forwardRef(function DatePicker2({
   onChange,
   type = "date",
   timeIntervalMinutes = 30,
-  use24HourClock = true
+  use24HourClock = true,
+  dateMode = "local"
 }, ref) {
   const isDate = type === "date";
   const clampInterval = Math.max(1, Math.min(60, Math.floor(timeIntervalMinutes)));
@@ -2089,7 +2168,7 @@ var DatePicker = React12.forwardRef(function DatePicker2({
     [use24HourClock]
   );
   const initial = (() => {
-    var _a, _b, _c;
+    var _a, _b;
     if (!isDate) {
       return (_b = (_a = normalizeTimeString(value)) != null ? _a : normalizeTimeString(defaultValue)) != null ? _b : (() => {
         const now = /* @__PURE__ */ new Date();
@@ -2101,27 +2180,36 @@ var DatePicker = React12.forwardRef(function DatePicker2({
         return `${String(safeH).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
       })();
     }
-    const normalized = (_c = parseLocalDateString(value != null ? value : defaultValue)) == null ? void 0 : _c.date;
-    if (normalized)
-      return formatLocalDateString(
-        normalized.getFullYear(),
-        normalized.getMonth(),
-        normalized.getDate()
-      );
+    const normalized = parseDateString(value != null ? value : defaultValue, dateMode);
+    if (normalized) return formatLocalDateString(normalized.year, normalized.month, normalized.day);
     const today = /* @__PURE__ */ new Date();
-    return formatLocalDateString(today.getFullYear(), today.getMonth(), today.getDate());
+    const year = dateMode === "utc" ? today.getUTCFullYear() : today.getFullYear();
+    const month2 = dateMode === "utc" ? today.getUTCMonth() : today.getMonth();
+    const day = dateMode === "utc" ? today.getUTCDate() : today.getDate();
+    return formatLocalDateString(year, month2, day);
   })();
   const [open, setOpen] = React12.useState(false);
   const [current, setCurrent] = React12.useState(initial);
   const [month, setMonth] = React12.useState(() => {
-    var _a, _b;
-    const base = (_b = (_a = parseLocalDateString(initial)) == null ? void 0 : _a.date) != null ? _b : /* @__PURE__ */ new Date();
-    return { year: base.getFullYear(), month: base.getMonth() };
+    var _a;
+    const parsed = (_a = parseDateString(initial, dateMode)) == null ? void 0 : _a.date;
+    if (parsed) {
+      return {
+        year: dateMode === "utc" ? parsed.getUTCFullYear() : parsed.getFullYear(),
+        month: dateMode === "utc" ? parsed.getUTCMonth() : parsed.getMonth()
+      };
+    }
+    const now = /* @__PURE__ */ new Date();
+    return {
+      year: dateMode === "utc" ? now.getUTCFullYear() : now.getFullYear(),
+      month: dateMode === "utc" ? now.getUTCMonth() : now.getMonth()
+    };
   });
   const [viewMode, setViewMode] = React12.useState("day");
   const dropdownRef = React12.useRef(null);
   const toggleRef = React12.useRef(null);
   const inputInnerRef = React12.useRef(null);
+  const popoverRef = React12.useRef(null);
   const suppressToggleRef = React12.useRef(false);
   const canvasRef = React12.useRef(null);
   const [useShortLabel, setUseShortLabel] = React12.useState(false);
@@ -2134,10 +2222,14 @@ var DatePicker = React12.forwardRef(function DatePicker2({
     },
     [ref]
   );
-  useOutsideClick(
-    [dropdownRef],
-    () => setOpen(false)
+  const outsideClickRefs = React12.useMemo(
+    () => [
+      dropdownRef,
+      popoverRef
+    ],
+    []
   );
+  useOutsideClick(outsideClickRefs, () => setOpen(false));
   const commit = (next) => {
     setCurrent(next);
     onChange == null ? void 0 : onChange(next);
@@ -2146,26 +2238,28 @@ var DatePicker = React12.forwardRef(function DatePicker2({
   };
   const parsedDate = React12.useMemo(() => {
     var _a;
-    const parsed = parseLocalDateString(current);
+    const parsed = parseDateString(current, dateMode);
     return (_a = parsed == null ? void 0 : parsed.date) != null ? _a : null;
-  }, [current]);
+  }, [current, dateMode]);
   const longDisplayLabel = React12.useMemo(() => {
     if (!parsedDate) return current;
     return parsedDate.toLocaleDateString(void 0, {
       weekday: "short",
       month: "short",
       day: "numeric",
-      year: "numeric"
+      year: "numeric",
+      timeZone: dateMode === "utc" ? "UTC" : void 0
     });
-  }, [parsedDate, current]);
+  }, [parsedDate, current, dateMode]);
   const shortDisplayLabel = React12.useMemo(() => {
     if (!parsedDate) return current;
     return parsedDate.toLocaleDateString(void 0, {
       month: "2-digit",
       day: "2-digit",
-      year: "2-digit"
+      year: "2-digit",
+      timeZone: dateMode === "utc" ? "UTC" : void 0
     });
-  }, [parsedDate, current]);
+  }, [parsedDate, current, dateMode]);
   const displayLabel = useShortLabel ? shortDisplayLabel : longDisplayLabel;
   const timeOptions = React12.useMemo(() => {
     const opts = [];
@@ -2179,7 +2273,7 @@ var DatePicker = React12.forwardRef(function DatePicker2({
     }
     return opts;
   }, [clampInterval, formatTimeLabel]);
-  const highlightBorder = "border-slate-400 shadow-[0_0_0_1px_rgba(148,163,184,0.45)] dark:border-slate-500";
+  const highlightBorder = "rui-date-picker__highlightBorder";
   const monthNames = React12.useMemo(
     () => ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
     []
@@ -2211,14 +2305,18 @@ var DatePicker = React12.forwardRef(function DatePicker2({
   };
   const rangeStart = decadeStart - 1;
   const rangeEnd = decadeStart + 10;
-  const headerLabel = viewMode === "year" ? `${rangeStart} - ${rangeEnd}` : viewMode === "month" ? `${month.year}` : new Date(month.year, month.month).toLocaleString("default", {
+  const headerLabel = viewMode === "year" ? `${rangeStart} - ${rangeEnd}` : viewMode === "month" ? `${month.year}` : toDateFromParts(dateMode, month.year, month.month, 1).toLocaleString("default", {
     month: "long",
-    year: "numeric"
+    year: "numeric",
+    timeZone: dateMode === "utc" ? "UTC" : void 0
   });
   function openPicker() {
     if (disabled) return;
     const base = parsedDate != null ? parsedDate : /* @__PURE__ */ new Date();
-    setMonth({ year: base.getFullYear(), month: base.getMonth() });
+    setMonth({
+      year: dateMode === "utc" ? base.getUTCFullYear() : base.getFullYear(),
+      month: dateMode === "utc" ? base.getUTCMonth() : base.getMonth()
+    });
     setViewMode("day");
     setOpen(true);
   }
@@ -2267,13 +2365,13 @@ var DatePicker = React12.forwardRef(function DatePicker2({
         placeholder: "Select time",
         disabled,
         className,
-        leadingContent: /* @__PURE__ */ jsx14("span", { className: "pointer-events-none rounded-xl bg-slate-100 px-2 py-1 shadow-inner dark:bg-zinc-800/70", children: /* @__PURE__ */ jsx14(Clock, { className: "h-4 w-4 text-slate-500 dark:text-zinc-300" }) })
+        leadingContent: /* @__PURE__ */ jsx14("span", { className: "rui-date-picker__leading-icon", children: /* @__PURE__ */ jsx14(Clock, { className: "rui-date-picker__leading-icon-mark" }) })
       }
     );
   }
-  return /* @__PURE__ */ jsxs12("div", { className: "space-y-1.5", children: [
-    label ? /* @__PURE__ */ jsx14("p", { className: "text-xs font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-zinc-400", children: label }) : null,
-    /* @__PURE__ */ jsx14("div", { className: "relative", children: /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs12("div", { className: "rui-date-picker rui-root", children: [
+    label ? /* @__PURE__ */ jsx14("p", { className: "rui-date-picker__label rui-text-wrap", children: label }) : null,
+    /* @__PURE__ */ jsx14("div", { className: "rui-date-picker__field", children: /* @__PURE__ */ jsx14(
       Dropdown,
       {
         ref: dropdownRef,
@@ -2282,12 +2380,12 @@ var DatePicker = React12.forwardRef(function DatePicker2({
         placeholder: "",
         displayValue: displayLabel,
         query: displayLabel,
-        className: "w-full",
-        inputClassName: twMerge13("min-w-0 font-semibold", className),
-        shellClassName: twMerge13(
-          error && "border-rose-300 focus-within:border-rose-400 focus-within:shadow-[0_0_0_1px_rgba(248,113,113,0.35)] dark:border-rose-500/60"
+        className: "rui-date-picker__dropdown",
+        inputClassName: clsx13("rui-date-picker__input", className),
+        shellClassName: clsx13(
+          error && "rui-date-picker__shell--error"
         ),
-        leadingContent: /* @__PURE__ */ jsx14("span", { className: "pointer-events-none rounded-xl bg-slate-100 px-2 py-1 shadow-inner dark:bg-zinc-800/70", children: /* @__PURE__ */ jsx14(Calendar, { className: "h-4 w-4 text-slate-500 dark:text-zinc-300" }) }),
+        leadingContent: /* @__PURE__ */ jsx14("span", { className: "rui-date-picker__leading-icon", children: /* @__PURE__ */ jsx14(Calendar, { className: "rui-date-picker__leading-icon-mark" }) }),
         highlightClass: highlightBorder,
         ariaControls: popoverId,
         ariaLabel: label,
@@ -2338,109 +2436,118 @@ var DatePicker = React12.forwardRef(function DatePicker2({
           }
           setOpen((o) => !o);
         },
-        children: open && /* @__PURE__ */ jsx14(Popover, { className: twMerge13("p-3", highlightBorder), children: () => /* @__PURE__ */ jsxs12("div", { className: "space-y-3", id: popoverId, children: [
-          /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between text-sm text-slate-600 dark:text-zinc-300", children: [
-            /* @__PURE__ */ jsx14(
-              Button,
-              {
-                type: "button",
-                onClick: goPrev,
-                className: "h-8 w-8 min-w-0 rounded-xl border border-slate-200 bg-white p-0 text-sm font-semibold text-slate-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100",
-                children: /* @__PURE__ */ jsx14("span", { style: { transform: "translateY(-1.5px)" }, children: "<" })
-              }
-            ),
-            viewMode === "year" ? /* @__PURE__ */ jsx14("span", { className: "font-semibold text-slate-900 dark:text-zinc-100", children: headerLabel }) : /* @__PURE__ */ jsx14(
-              "button",
-              {
-                type: "button",
-                onClick: () => setViewMode((prev) => prev === "day" ? "month" : "year"),
-                className: "font-semibold text-slate-900 transition hover:underline dark:text-zinc-100",
-                children: headerLabel
-              }
-            ),
-            /* @__PURE__ */ jsx14(
-              Button,
-              {
-                type: "button",
-                onClick: goNext,
-                className: "h-8 w-8 min-w-0 rounded-xl border border-slate-200 bg-white p-0 text-sm font-semibold text-slate-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100",
-                children: /* @__PURE__ */ jsx14("span", { style: { transform: "translateY(-1.5px)" }, children: ">" })
-              }
-            )
-          ] }),
-          viewMode === "day" ? /* @__PURE__ */ jsxs12(Fragment, { children: [
-            /* @__PURE__ */ jsx14("div", { className: "grid grid-cols-7 gap-1 text-center text-[11px] uppercase tracking-[0.2em] text-slate-400 dark:text-zinc-500", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((d) => /* @__PURE__ */ jsx14("span", { children: d }, d)) }),
-            /* @__PURE__ */ jsx14("div", { className: "grid grid-cols-7 gap-1", children: getMonthDays(month.year, month.month).map((cell, idx) => {
-              var _a, _b;
-              const isSelected = cell.date === current;
-              return /* @__PURE__ */ jsx14(
-                "button",
-                {
-                  type: "button",
-                  disabled: !cell.date,
-                  onClick: () => {
-                    if (!cell.date) return;
-                    commit(cell.date);
-                  },
-                  className: twMerge13(
-                    "h-9 rounded-xl text-sm font-semibold text-slate-700 transition hover:bg-slate-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400/70 dark:text-zinc-200 dark:hover:bg-zinc-800",
-                    isSelected && "bg-slate-200 text-slate-900 ring-1 ring-slate-400/70 shadow-sm dark:bg-zinc-800 dark:hover:bg-zinc-700/80 dark:text-zinc-100 dark:ring-zinc-500/70",
-                    !cell.date && "opacity-30"
-                  ),
-                  children: (_b = cell.day) != null ? _b : ""
-                },
-                `${(_a = cell.date) != null ? _a : "empty"}-${idx}`
-              );
-            }) })
-          ] }) : viewMode === "month" ? /* @__PURE__ */ jsx14("div", { className: "grid grid-cols-3 gap-2", children: monthNames.map((name, idx) => {
-            const isSelected = (parsedDate == null ? void 0 : parsedDate.getFullYear()) === month.year && (parsedDate == null ? void 0 : parsedDate.getMonth()) === idx;
-            return /* @__PURE__ */ jsx14(
-              "button",
-              {
-                type: "button",
-                onClick: () => {
-                  setMonth((prev) => ({ ...prev, month: idx }));
-                  setViewMode("day");
-                },
-                className: twMerge13(
-                  "h-10 rounded-xl border border-slate-200 bg-white text-sm font-semibold text-slate-700 shadow-sm transition hover:-translate-y-[1px] hover:shadow-md dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100",
-                  isSelected && "border-slate-400 bg-slate-100 dark:border-slate-500 dark:bg-zinc-800"
+        children: open && /* @__PURE__ */ jsx14(
+          Popover,
+          {
+            anchorRef: dropdownRef,
+            rootRef: popoverRef,
+            className: clsx13("rui-date-picker__popover", highlightBorder),
+            children: () => /* @__PURE__ */ jsxs12("div", { className: "rui-date-picker__panel", id: popoverId, children: [
+              /* @__PURE__ */ jsxs12("div", { className: "rui-date-picker__header", children: [
+                /* @__PURE__ */ jsx14(
+                  Button,
+                  {
+                    type: "button",
+                    onClick: goPrev,
+                    className: "rui-date-picker__nav-button",
+                    children: /* @__PURE__ */ jsx14("span", { style: { transform: "translateY(-1.5px)" }, children: "<" })
+                  }
                 ),
-                children: name
-              },
-              name
-            );
-          }) }) : /* @__PURE__ */ jsx14("div", { className: "grid grid-cols-3 gap-2", children: Array.from({ length: 12 }, (_, i) => rangeStart + i).map((yr) => {
-            const isSelected = (parsedDate == null ? void 0 : parsedDate.getFullYear()) === yr;
-            return /* @__PURE__ */ jsx14(
-              "button",
-              {
-                type: "button",
-                onClick: () => {
-                  setMonth((prev) => ({ ...prev, year: yr }));
-                  setViewMode("month");
-                },
-                className: twMerge13(
-                  "h-10 rounded-xl border border-slate-200 bg-white text-sm font-semibold text-slate-700 shadow-sm transition hover:-translate-y-[1px] hover:shadow-md dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100",
-                  isSelected && "border-slate-400 bg-slate-100 dark:border-slate-500 dark:bg-zinc-800"
+                viewMode === "year" ? /* @__PURE__ */ jsx14("span", { className: "rui-date-picker__header-title rui-text-wrap", children: headerLabel }) : /* @__PURE__ */ jsx14(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setViewMode((prev) => prev === "day" ? "month" : "year"),
+                    className: "rui-date-picker__header-title rui-text-wrap rui-date-picker__header-title-button",
+                    children: headerLabel
+                  }
                 ),
-                children: yr
-              },
-              yr
-            );
-          }) })
-        ] }) })
+                /* @__PURE__ */ jsx14(
+                  Button,
+                  {
+                    type: "button",
+                    onClick: goNext,
+                    className: "rui-date-picker__nav-button",
+                    children: /* @__PURE__ */ jsx14("span", { style: { transform: "translateY(-1.5px)" }, children: ">" })
+                  }
+                )
+              ] }),
+              viewMode === "day" ? /* @__PURE__ */ jsxs12(Fragment, { children: [
+                /* @__PURE__ */ jsx14("div", { className: "rui-date-picker__weekday-row", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((d) => /* @__PURE__ */ jsx14("span", { children: d }, d)) }),
+                /* @__PURE__ */ jsx14("div", { className: "rui-date-picker__day-grid", children: getMonthDays(month.year, month.month, dateMode).map((cell, idx) => {
+                  var _a, _b;
+                  const isSelected = cell.date === current;
+                  return /* @__PURE__ */ jsx14(
+                    "button",
+                    {
+                      type: "button",
+                      disabled: !cell.date,
+                      onClick: () => {
+                        if (!cell.date) return;
+                        commit(cell.date);
+                      },
+                      className: clsx13(
+                        "rui-date-picker__day",
+                        isSelected && "is-selected",
+                        !cell.date && "is-empty"
+                      ),
+                      children: (_b = cell.day) != null ? _b : ""
+                    },
+                    `${(_a = cell.date) != null ? _a : "empty"}-${idx}`
+                  );
+                }) })
+              ] }) : viewMode === "month" ? /* @__PURE__ */ jsx14("div", { className: "rui-date-picker__month-grid", children: monthNames.map((name, idx) => {
+                const isSelected = (parsedDate == null ? void 0 : parsedDate.getFullYear()) === month.year && (parsedDate == null ? void 0 : parsedDate.getMonth()) === idx;
+                return /* @__PURE__ */ jsx14(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      setMonth((prev) => ({ ...prev, month: idx }));
+                      setViewMode("day");
+                    },
+                    className: clsx13(
+                      "rui-date-picker__tile",
+                      isSelected && "is-selected"
+                    ),
+                    children: name
+                  },
+                  name
+                );
+              }) }) : /* @__PURE__ */ jsx14("div", { className: "rui-date-picker__year-grid", children: Array.from({ length: 12 }, (_, i) => rangeStart + i).map((yr) => {
+                const isSelected = (parsedDate == null ? void 0 : parsedDate.getFullYear()) === yr;
+                return /* @__PURE__ */ jsx14(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      setMonth((prev) => ({ ...prev, year: yr }));
+                      setViewMode("month");
+                    },
+                    className: clsx13(
+                      "rui-date-picker__tile",
+                      isSelected && "is-selected"
+                    ),
+                    children: yr
+                  },
+                  yr
+                );
+              }) })
+            ] })
+          }
+        )
       }
     ) }),
-    description ? /* @__PURE__ */ jsx14("p", { className: "text-xs text-slate-500 dark:text-zinc-400", children: description }) : null,
-    error ? /* @__PURE__ */ jsx14("p", { className: "text-xs font-medium text-rose-500 dark:text-rose-400", children: error }) : null
+    description ? /* @__PURE__ */ jsx14("p", { className: "rui-date-picker__description rui-text-wrap", children: description }) : null,
+    error ? /* @__PURE__ */ jsx14("p", { className: "rui-date-picker__error rui-text-wrap", children: error }) : null
   ] });
 });
 
 // components/Dialog/Dialog.tsx
 import * as React13 from "react";
-import { createPortal } from "react-dom";
-import { twMerge as twMerge14 } from "tailwind-merge";
+import { createPortal as createPortal2 } from "react-dom";
+import clsx14 from "clsx";
+import "./Dialog-ZY5E3VZ4.css";
 import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
 function Dialog({
   open,
@@ -2454,6 +2561,8 @@ function Dialog({
 }) {
   const overlayRef = React13.useRef(null);
   const dialogRef = React13.useRef(null);
+  const titleId = React13.useId();
+  const descriptionId = React13.useId();
   const dragState = React13.useRef(null);
   const [dragOffset, setDragOffset] = React13.useState({ x: 0, y: 0 });
   React13.useEffect(() => {
@@ -2462,11 +2571,40 @@ function Dialog({
       if (event.key === "Escape") {
         event.preventDefault();
         onClose();
+        return;
+      }
+      if (event.key === "Tab" && modal) {
+        const dialog = dialogRef.current;
+        if (!dialog) return;
+        const focusable = Array.from(
+          dialog.querySelectorAll(
+            'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])'
+          )
+        ).filter((el) => !el.hasAttribute("disabled") && el.tabIndex >= 0);
+        if (focusable.length === 0) {
+          event.preventDefault();
+          dialog.focus();
+          return;
+        }
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        const active = document.activeElement;
+        if (event.shiftKey) {
+          if (active === first || active === dialog) {
+            event.preventDefault();
+            last.focus();
+          }
+          return;
+        }
+        if (active === last) {
+          event.preventDefault();
+          first.focus();
+        }
       }
     };
     window.addEventListener("keydown", handleKey);
     return () => window.removeEventListener("keydown", handleKey);
-  }, [open, onClose]);
+  }, [open, onClose, modal]);
   React13.useEffect(() => {
     var _a;
     if (!open) return;
@@ -2561,56 +2699,58 @@ function Dialog({
       ref: dialogRef,
       role: "dialog",
       "aria-modal": modal || void 0,
+      "aria-labelledby": titleId,
+      "aria-describedby": description ? descriptionId : void 0,
       tabIndex: -1,
-      "aria-label": title,
-      className: twMerge14(
-        "w-[min(640px,92vw)] rounded-3xl border border-slate-200 bg-white/95 p-6 shadow-2xl ring-1 ring-white/80 dark:border-zinc-700/60 dark:bg-zinc-900/95 dark:ring-zinc-800/80",
-        modal ? "" : "pointer-events-auto",
-        draggable && "cursor-grab active:cursor-grabbing"
+      className: clsx14(
+        "rui-dialog__card",
+        modal ? "" : "rui-dialog__card--floating",
+        draggable && "rui-dialog__card--draggable"
       ),
       style: { transform: `translate(${dragOffset.x}px, ${dragOffset.y}px)` },
       onPointerDown: onDragPointerDown,
       children: [
-        /* @__PURE__ */ jsxs13("div", { className: "flex items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs13("div", { className: "rui-dialog__header", children: [
           /* @__PURE__ */ jsxs13("div", { children: [
-            /* @__PURE__ */ jsx15("p", { className: "text-xs font-semibold uppercase tracking-[0.3em] text-slate-500 dark:text-zinc-400", children: "Dialog" }),
-            /* @__PURE__ */ jsx15("h2", { className: "text-xl font-semibold text-slate-900 dark:text-zinc-100", children: title }),
-            description ? /* @__PURE__ */ jsx15("p", { className: "mt-1 text-sm text-slate-600 dark:text-zinc-400", children: description }) : null
+            /* @__PURE__ */ jsx15("p", { className: "rui-dialog__eyebrow", children: "Dialog" }),
+            /* @__PURE__ */ jsx15("h2", { id: titleId, className: "rui-dialog__title", children: title }),
+            description ? /* @__PURE__ */ jsx15("p", { id: descriptionId, className: "rui-dialog__description", children: description }) : null
           ] }),
           /* @__PURE__ */ jsx15(
             Button,
             {
               onClick: onClose,
               "aria-label": "Close dialog",
-              className: "size-8 !px-0 !py-0 text-sm font-semibold",
-              children: "X"
+              className: "rui-dialog__close-button",
+              children: "\xD7"
             }
           )
         ] }),
-        /* @__PURE__ */ jsx15("div", { className: "mt-4 space-y-3 text-sm text-slate-700 dark:text-zinc-300", children }),
-        footer ? /* @__PURE__ */ jsx15("div", { className: "mt-6 flex flex-wrap justify-end gap-2", children: footer }) : null
+        /* @__PURE__ */ jsx15("div", { className: "rui-dialog__content", children }),
+        footer ? /* @__PURE__ */ jsx15("div", { className: "rui-dialog__footer", children: footer }) : null
       ]
     }
   );
-  return createPortal(
+  return createPortal2(
     modal ? /* @__PURE__ */ jsx15(
       "div",
       {
         ref: overlayRef,
-        className: "fixed inset-0 z-50 flex items-center justify-center bg-zinc-950/60 backdrop-blur-sm",
-        onMouseDown: (e) => {
+        className: "rui-overlay-root rui-dialog__overlay",
+        onPointerDown: (e) => {
           if (e.target === overlayRef.current) onClose();
         },
         children: dialogCard
       }
-    ) : /* @__PURE__ */ jsx15("div", { className: "pointer-events-none fixed bottom-6 right-6 z-50 flex justify-end", children: dialogCard }),
+    ) : /* @__PURE__ */ jsx15("div", { className: "rui-overlay-root rui-dialog__dock", children: dialogCard }),
     document.body
   );
 }
 
 // components/Disclosure/Disclosure.tsx
 import * as React14 from "react";
-import { twMerge as twMerge15 } from "tailwind-merge";
+import clsx15 from "clsx";
+import "./Disclosure-YZNVFFHQ.css";
 import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
 var Disclosure = React14.forwardRef(function Disclosure2({ title, children, className, subtle, ...rest }, ref) {
   const summaryId = React14.useId();
@@ -2619,9 +2759,10 @@ var Disclosure = React14.forwardRef(function Disclosure2({ title, children, clas
     {
       ...rest,
       ref,
-      className: twMerge15(
-        "group rounded-2xl border border-slate-200 bg-white/90 p-3 shadow-sm transition dark:border-zinc-700/60 dark:bg-zinc-900/70",
-        subtle && "border-transparent bg-white/60 shadow-none dark:bg-zinc-900/40",
+      className: clsx15(
+        "rui-disclosure",
+        "rui-root",
+        subtle && "rui-disclosure--subtle",
         className
       ),
       children: [
@@ -2629,13 +2770,13 @@ var Disclosure = React14.forwardRef(function Disclosure2({ title, children, clas
           "summary",
           {
             id: summaryId,
-            className: "flex cursor-pointer list-none items-center justify-between gap-3 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400/70",
+            className: "rui-disclosure__summary",
             children: [
-              /* @__PURE__ */ jsx16("span", { className: "flex flex-1 items-center gap-2", children: /* @__PURE__ */ jsx16("span", { className: "rounded-lg bg-slate-100 px-2 py-1 text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500 shadow-inner dark:bg-zinc-800/70 dark:text-zinc-300", children: title }) }),
+              /* @__PURE__ */ jsx16("span", { className: "rui-disclosure__header", children: /* @__PURE__ */ jsx16("span", { className: "rui-disclosure__title rui-text-wrap", children: title }) }),
               /* @__PURE__ */ jsx16(
                 "span",
                 {
-                  className: "text-slate-400 transition-transform duration-200 group-open:rotate-180 dark:text-zinc-500",
+                  className: "rui-disclosure__caret",
                   "aria-hidden": "true",
                   children: "\u25BE"
                 }
@@ -2643,7 +2784,7 @@ var Disclosure = React14.forwardRef(function Disclosure2({ title, children, clas
             ]
           }
         ),
-        /* @__PURE__ */ jsx16("div", { className: "mt-3 space-y-2 text-sm text-slate-600 dark:text-zinc-300", children })
+        /* @__PURE__ */ jsx16("div", { className: "rui-disclosure__content rui-text-wrap", children })
       ]
     }
   );
@@ -2651,7 +2792,8 @@ var Disclosure = React14.forwardRef(function Disclosure2({ title, children, clas
 
 // components/InputField/InputField.tsx
 import * as React15 from "react";
-import { twMerge as twMerge16 } from "tailwind-merge";
+import clsx16 from "clsx";
+import "./InputField-TKTNGOH3.css";
 import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 var InputField = React15.forwardRef(function InputField2({ label, description, error, leadingIcon, trailingLabel, className, id, disabled, ...rest }, ref) {
   const generatedId = React15.useId();
@@ -2660,27 +2802,26 @@ var InputField = React15.forwardRef(function InputField2({ label, description, e
   const errorId = React15.useId();
   const hintIds = [description ? descriptionId : null, error ? errorId : null].filter(Boolean);
   const resolvedAriaDescribedBy = hintIds.length ? hintIds.join(" ") : void 0;
-  const containerClasses = twMerge16(
-    "flex items-center gap-3 rounded-2xl border border-slate-300 bg-white/70 px-3 py-2 transition focus-within:border-slate-400 focus-within:shadow-[0_0_0_1px_rgba(148,163,184,0.45)] dark:border-zinc-700 dark:bg-zinc-900/70 dark:focus-within:border-slate-500",
-    disabled && "opacity-60",
-    error && "border-rose-300 focus-within:border-rose-400 focus-within:shadow-[0_0_0_1px_rgba(248,113,113,0.35)] dark:border-rose-500/60"
+  const containerClasses = clsx16(
+    disabled && "rui-input-field__shell--disabled",
+    error && "rui-input-field__shell--error"
   );
-  const inputClasses = twMerge16(
-    "flex-1 border-none bg-transparent text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none disabled:cursor-not-allowed dark:text-zinc-100 dark:placeholder:text-zinc-500",
+  const inputClasses = clsx16(
+    "rui-input-field__input",
     className
   );
-  const leadingElm = leadingIcon ? /* @__PURE__ */ jsx17("span", { className: "text-slate-400 dark:text-zinc-500", "aria-hidden": "true", children: leadingIcon }) : null;
-  const trailingElm = trailingLabel ? /* @__PURE__ */ jsx17("span", { className: "text-xs font-semibold uppercase tracking-wide text-slate-400 dark:text-zinc-500", children: trailingLabel }) : null;
-  return /* @__PURE__ */ jsxs15("div", { className: "space-y-1.5", children: [
+  const leadingElm = leadingIcon ? /* @__PURE__ */ jsx17("span", { className: "rui-input-field__leading", "aria-hidden": "true", children: leadingIcon }) : null;
+  const trailingElm = trailingLabel ? /* @__PURE__ */ jsx17("span", { className: "rui-input-field__trailing rui-text-wrap", children: trailingLabel }) : null;
+  return /* @__PURE__ */ jsxs15("div", { className: "rui-input-field rui-root", children: [
     label ? /* @__PURE__ */ jsx17(
       "label",
       {
         htmlFor: inputId,
-        className: "text-xs font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-zinc-400",
+        className: "rui-input-field__label rui-text-wrap",
         children: label
       }
     ) : null,
-    /* @__PURE__ */ jsxs15("div", { className: containerClasses, children: [
+    /* @__PURE__ */ jsxs15("div", { className: clsx16("rui-input-field__shell", containerClasses), children: [
       leadingElm,
       /* @__PURE__ */ jsx17(
         "input",
@@ -2696,14 +2837,15 @@ var InputField = React15.forwardRef(function InputField2({ label, description, e
       ),
       trailingElm
     ] }),
-    description ? /* @__PURE__ */ jsx17("p", { id: descriptionId, className: "text-xs text-slate-500 dark:text-zinc-400", children: description }) : null,
-    error ? /* @__PURE__ */ jsx17("p", { id: errorId, className: "text-xs font-medium text-rose-500 dark:text-rose-400", children: error }) : null
+    description ? /* @__PURE__ */ jsx17("p", { id: descriptionId, className: "rui-input-field__description rui-text-wrap", children: description }) : null,
+    error ? /* @__PURE__ */ jsx17("p", { id: errorId, className: "rui-input-field__error rui-text-wrap", children: error }) : null
   ] });
 });
 
 // components/NumberInput/NumberInput.tsx
 import * as React16 from "react";
-import { twMerge as twMerge17 } from "tailwind-merge";
+import clsx17 from "clsx";
+import "./NumberInput-KTYVXS7K.css";
 import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
 var NumberInput = React16.forwardRef(
   function NumberInput2({
@@ -2711,6 +2853,7 @@ var NumberInput = React16.forwardRef(
     description,
     error,
     className,
+    style,
     disabled,
     value,
     defaultValue = 0,
@@ -2718,7 +2861,8 @@ var NumberInput = React16.forwardRef(
     step = 1,
     suffix,
     min,
-    max
+    max,
+    scale = 1
   }, ref) {
     const [internal, setInternal] = React16.useState(defaultValue);
     const isControlled = typeof value === "number";
@@ -2728,38 +2872,82 @@ var NumberInput = React16.forwardRef(
       if (!isControlled) setInternal(clamped);
       onChange == null ? void 0 : onChange(clamped);
     };
-    return /* @__PURE__ */ jsxs16("div", { className: "space-y-1.5", children: [
-      label ? /* @__PURE__ */ jsx18("p", { className: "text-xs font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-zinc-400", children: label }) : null,
+    const resolvedText = `${resolved}`;
+    const valueChars = Math.max(resolvedText.length, 1);
+    const rootStyle = React16.useMemo(
+      () => ({
+        "--rui-number-input-scale": scale,
+        "--rui-number-input-value-ch": valueChars,
+        ...style
+      }),
+      [scale, style, valueChars]
+    );
+    return /* @__PURE__ */ jsxs16("div", { className: "rui-number-input rui-root", style: rootStyle, children: [
+      label ? /* @__PURE__ */ jsx18("p", { className: "rui-number-input__label rui-text-wrap", children: label }) : null,
       /* @__PURE__ */ jsxs16(
         "div",
         {
-          className: twMerge17(
-            "flex items-center gap-3 rounded-2xl border border-slate-300 bg-white/80 px-3 py-2 shadow-sm transition focus-within:border-slate-400 focus-within:shadow-[0_0_0_1px_rgba(148,163,184,0.45)] dark:border-zinc-700 dark:bg-zinc-900/70 dark:focus-within:border-slate-500",
-            disabled && "opacity-60",
-            error && "border-rose-300 focus-within:border-rose-400 focus-within:shadow-[0_0_0_1px_rgba(248,113,113,0.35)] dark:border-rose-500/60"
+          className: clsx17(
+            "rui-number-input__shell",
+            disabled && "rui-number-input__shell--disabled",
+            error && "rui-number-input__shell--error"
           ),
           children: [
-            /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsxs16("div", { className: "rui-number-input__stepper", children: [
               /* @__PURE__ */ jsx18(
-                "button",
+                Button,
                 {
                   type: "button",
                   "aria-label": "Increase",
                   onClick: () => update(resolved + step),
-                  className: "grid size-7 place-items-center rounded-xl border border-slate-200 bg-white text-xs font-semibold text-slate-700 shadow-sm transition hover:-translate-y-[1px] hover:shadow-md disabled:opacity-50 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100",
+                  className: "rui-number-input__step-button",
                   disabled,
-                  children: "+"
+                  children: /* @__PURE__ */ jsx18(
+                    "svg",
+                    {
+                      viewBox: "0 0 20 20",
+                      fill: "currentColor",
+                      "aria-hidden": "true",
+                      width: "1.1em",
+                      height: "1.1em",
+                      children: /* @__PURE__ */ jsx18(
+                        "path",
+                        {
+                          fillRule: "evenodd",
+                          d: "M5.23 12.79a.75.75 0 0 0 1.06-.02L10 8.828l3.71 3.94a.75.75 0 1 0 1.08-1.04l-4.24-4.5a.75.75 0 0 0-1.08 0l-4.24 4.5a.75.75 0 0 0 .02 1.06z",
+                          clipRule: "evenodd"
+                        }
+                      )
+                    }
+                  )
                 }
               ),
               /* @__PURE__ */ jsx18(
-                "button",
+                Button,
                 {
                   type: "button",
                   "aria-label": "Decrease",
                   onClick: () => update(resolved - step),
-                  className: "grid size-7 place-items-center rounded-xl border border-slate-200 bg-white text-xs font-semibold text-slate-700 shadow-sm transition hover:-translate-y-[1px] hover:shadow-md disabled:opacity-50 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100",
+                  className: "rui-number-input__step-button",
                   disabled,
-                  children: "-"
+                  children: /* @__PURE__ */ jsx18(
+                    "svg",
+                    {
+                      viewBox: "0 0 20 20",
+                      fill: "currentColor",
+                      "aria-hidden": "true",
+                      width: "1.1em",
+                      height: "1.1em",
+                      children: /* @__PURE__ */ jsx18(
+                        "path",
+                        {
+                          fillRule: "evenodd",
+                          d: "M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.172l3.71-3.94a.75.75 0 1 1 1.08 1.04l-4.24 4.5a.75.75 0 0 1-1.08 0l-4.24-4.5a.75.75 0 0 1 .02-1.06z",
+                          clipRule: "evenodd"
+                        }
+                      )
+                    }
+                  )
                 }
               )
             ] }),
@@ -2774,56 +2962,46 @@ var NumberInput = React16.forwardRef(
                 max,
                 step,
                 disabled,
-                className: twMerge17(
-                  "flex-1 border-none bg-transparent text-2xl font-semibold tabular-nums text-slate-900 placeholder:text-slate-400 focus:outline-none dark:text-zinc-100 dark:placeholder:text-zinc-500 appearance-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
+                className: clsx17(
+                  "rui-number-input__input",
                   className
                 )
               }
             ),
-            suffix ? /* @__PURE__ */ jsx18("span", { className: "text-sm font-semibold uppercase tracking-wide text-slate-500 dark:text-zinc-300", children: suffix }) : null
+            suffix ? /* @__PURE__ */ jsx18("span", { className: "rui-number-input__suffix rui-text-wrap", children: suffix }) : null
           ]
         }
       ),
-      description ? /* @__PURE__ */ jsx18("p", { className: "text-xs text-slate-500 dark:text-zinc-400", children: description }) : null,
-      error ? /* @__PURE__ */ jsx18("p", { className: "text-xs font-medium text-rose-500 dark:text-rose-400", children: error }) : null
+      description ? /* @__PURE__ */ jsx18("p", { className: "rui-number-input__helper rui-number-input__helper--description rui-text-wrap", children: description }) : null,
+      error ? /* @__PURE__ */ jsx18("p", { className: "rui-number-input__helper rui-number-input__helper--error rui-text-wrap", children: error }) : null
     ] });
   }
 );
 
 // components/OutputChip/OutputChip.tsx
 import * as React17 from "react";
-import { twMerge as twMerge18 } from "tailwind-merge";
+import clsx18 from "clsx";
+import "./OutputChip-CN7R243G.css";
 import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
-var toneStyles = {
-  neutral: { bg: "bg-slate-900", text: "text-white", ring: "ring-slate-300" },
-  success: { bg: "bg-emerald-500", text: "text-white", ring: "ring-emerald-200" },
-  warning: { bg: "bg-amber-500", text: "text-white", ring: "ring-amber-200" },
-  danger: { bg: "bg-rose-500", text: "text-white", ring: "ring-rose-200" }
-};
 var OutputChip = React17.forwardRef(function OutputChip2({ children, className, tone = "neutral", label, ...rest }, ref) {
-  const styles = toneStyles[tone];
   return /* @__PURE__ */ jsxs17(
     "output",
     {
       ...rest,
       ref,
-      className: twMerge18(
-        "inline-flex items-center justify-center gap-2 rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-[0.25em] shadow-sm ring-1 text-center",
-        styles.bg,
-        styles.text,
-        styles.ring,
-        className
-      ),
+      "data-tone": tone,
+      className: clsx18("rui-root", "rui-output-chip", className),
       children: [
-        label ? /* @__PURE__ */ jsx19("span", { className: "opacity-70", children: label }) : null,
-        /* @__PURE__ */ jsx19("span", { children })
+        label ? /* @__PURE__ */ jsx19("span", { className: "rui-output-chip__label rui-text-wrap", children: label }) : null,
+        /* @__PURE__ */ jsx19("span", { className: "rui-output-chip__value rui-text-wrap", children })
       ]
     }
   );
 });
 
 // components/ProgressMeter/ProgressMeter.tsx
-import { twMerge as twMerge19 } from "tailwind-merge";
+import clsx19 from "clsx";
+import "./ProgressMeter-6EOIFB3Y.css";
 import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
 function Progress({
   label,
@@ -2835,29 +3013,29 @@ function Progress({
 }) {
   const clamped = Math.min(max, Math.max(0, value));
   const percent = max === 0 ? 0 : Math.round(clamped / max * 100);
-  return /* @__PURE__ */ jsxs18("div", { className: twMerge19("space-y-1.5", className), children: [
-    label ? /* @__PURE__ */ jsxs18("div", { className: "flex items-center justify-between gap-3", children: [
-      /* @__PURE__ */ jsx20("p", { className: "text-xs font-semibold uppercase tracking-[0.24em] text-slate-500 dark:text-zinc-400", children: label }),
-      showValue ? /* @__PURE__ */ jsxs18("span", { className: "text-xs font-semibold text-slate-600 dark:text-zinc-300", children: [
+  return /* @__PURE__ */ jsxs18("div", { className: clsx19("rui-progress-meter rui-root", className), children: [
+    label ? /* @__PURE__ */ jsxs18("div", { className: "rui-progress-meter__header", children: [
+      /* @__PURE__ */ jsx20("p", { className: "rui-progress-meter__label rui-text-wrap", children: label }),
+      showValue ? /* @__PURE__ */ jsxs18("span", { className: "rui-progress-meter__value", children: [
         percent,
         "%"
       ] }) : null
     ] }) : null,
-    description ? /* @__PURE__ */ jsx20("p", { className: "text-[11px] text-slate-500 dark:text-zinc-400", children: description }) : null,
-    /* @__PURE__ */ jsxs18("div", { className: "relative h-3 w-full overflow-hidden rounded-full border border-slate-200 bg-white shadow-inner ring-1 ring-slate-100/80 dark:border-zinc-700 dark:bg-zinc-900/80 dark:ring-zinc-800/70", children: [
+    description ? /* @__PURE__ */ jsx20("p", { className: "rui-progress-meter__description rui-text-wrap", children: description }) : null,
+    /* @__PURE__ */ jsxs18("div", { className: "rui-progress-meter__track", children: [
       /* @__PURE__ */ jsx20(
         "progress",
         {
           value: clamped,
           max,
-          className: "absolute inset-0 h-full w-full appearance-none",
+          className: "rui-progress-meter__native",
           "aria-label": label
         }
       ),
       /* @__PURE__ */ jsx20(
         "div",
         {
-          className: "absolute inset-y-0 left-0 rounded-full bg-gradient-to-r from-slate-900 via-slate-700 to-slate-900 shadow-[0_0_0_1px_rgba(15,23,42,0.2)] transition-[width]",
+          className: "rui-progress-meter__fill rui-progress-meter__fill--gradient",
           style: { width: `${percent}%` }
         }
       )
@@ -2880,27 +3058,27 @@ function Meter({
     (acc, t) => clamped >= t.value ? t.color : acc,
     (_b = (_a = thresholds[0]) == null ? void 0 : _a.color) != null ? _b : "linear-gradient(90deg, #22c55e, #0ea5e9)"
   ) : "linear-gradient(90deg, #22c55e, #0ea5e9)";
-  return /* @__PURE__ */ jsxs18("div", { className: twMerge19("space-y-1.5", className), children: [
-    label ? /* @__PURE__ */ jsxs18("div", { className: "flex items-center justify-between gap-3", children: [
-      /* @__PURE__ */ jsx20("p", { className: "text-xs font-semibold uppercase tracking-[0.24em] text-slate-500 dark:text-zinc-400", children: label }),
-      /* @__PURE__ */ jsx20("span", { className: "text-xs font-semibold text-slate-600 dark:text-zinc-300", children: clamped })
+  return /* @__PURE__ */ jsxs18("div", { className: clsx19("rui-progress-meter rui-root", className), children: [
+    label ? /* @__PURE__ */ jsxs18("div", { className: "rui-progress-meter__header", children: [
+      /* @__PURE__ */ jsx20("p", { className: "rui-progress-meter__label rui-text-wrap", children: label }),
+      /* @__PURE__ */ jsx20("span", { className: "rui-progress-meter__value", children: clamped })
     ] }) : null,
-    description ? /* @__PURE__ */ jsx20("p", { className: "text-[11px] text-slate-500 dark:text-zinc-400", children: description }) : null,
-    /* @__PURE__ */ jsxs18("div", { className: "relative h-3 w-full overflow-hidden rounded-full border border-slate-200 bg-white shadow-inner ring-1 ring-slate-100/80 dark:border-zinc-700 dark:bg-zinc-900/80 dark:ring-zinc-800/70", children: [
+    description ? /* @__PURE__ */ jsx20("p", { className: "rui-progress-meter__description rui-text-wrap", children: description }) : null,
+    /* @__PURE__ */ jsxs18("div", { className: "rui-progress-meter__track", children: [
       /* @__PURE__ */ jsx20(
         "meter",
         {
           value: clamped,
           min,
           max,
-          className: "absolute inset-0 h-full w-full appearance-none",
+          className: "rui-progress-meter__native",
           "aria-label": label
         }
       ),
       /* @__PURE__ */ jsx20(
         "div",
         {
-          className: "absolute inset-y-0 left-0 rounded-full shadow-[0_0_0_1px_rgba(15,23,42,0.2)] transition-[width]",
+          className: "rui-progress-meter__fill",
           style: { width: `${percent}%`, background: activeColor }
         }
       )
@@ -2910,11 +3088,13 @@ function Meter({
 
 // components/Radio/Radio.tsx
 import * as React18 from "react";
-import { twMerge as twMerge20 } from "tailwind-merge";
+import clsx20 from "clsx";
+import "./Radio-K6CDDBCQ.css";
 import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
 var Radio = React18.forwardRef(function Radio2({
   label,
   description,
+  color,
   extra,
   checked,
   defaultChecked = false,
@@ -2941,14 +3121,15 @@ var Radio = React18.forwardRef(function Radio2({
     "label",
     {
       htmlFor: radioId,
-      className: twMerge20(
-        "flex items-center justify-between gap-3 rounded-2xl border border-transparent px-3 py-2 text-left transition hover:bg-slate-50 focus-within:bg-slate-50 dark:hover:bg-zinc-900/60 dark:focus-within:bg-zinc-900/60",
-        disabled && "cursor-not-allowed opacity-60",
+      className: clsx20(
+        "rui-radio rui-root",
+        color && `rui-radio--color-${color}`,
+        disabled && "rui-radio--disabled",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs19("span", { className: "flex flex-1 items-center gap-3", children: [
-          /* @__PURE__ */ jsxs19("span", { className: "flex h-6 w-6 items-center justify-center", children: [
+        /* @__PURE__ */ jsxs19("span", { className: "rui-radio__content", children: [
+          /* @__PURE__ */ jsxs19("span", { className: "rui-radio__indicator", children: [
             /* @__PURE__ */ jsx21(
               "input",
               {
@@ -2956,7 +3137,7 @@ var Radio = React18.forwardRef(function Radio2({
                 ref: forwardedRef,
                 id: radioId,
                 type: "radio",
-                className: "peer sr-only",
+                className: "rui-radio__input",
                 checked: resolvedChecked,
                 onChange: handleChange,
                 "aria-describedby": description ? descriptionId : rest["aria-describedby"],
@@ -2966,29 +3147,17 @@ var Radio = React18.forwardRef(function Radio2({
             /* @__PURE__ */ jsx21(
               "span",
               {
-                className: twMerge20(
-                  "grid size-5 place-items-center rounded-full border border-slate-300 bg-white text-slate-600 shadow-sm transition duration-150 peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-slate-400 dark:border-zinc-600 dark:bg-zinc-950/70 dark:text-zinc-200",
-                  resolvedChecked && "border-slate-400 bg-slate-100 shadow-[0_0_0_1px_rgba(148,163,184,0.45)] dark:border-zinc-500 dark:bg-zinc-700/70"
-                ),
-                "aria-hidden": "true",
-                children: /* @__PURE__ */ jsx21(
-                  "span",
-                  {
-                    className: twMerge20(
-                      "block h-2.5 w-2.5 rounded-full bg-slate-900 opacity-0 transition duration-200 dark:bg-zinc-100",
-                      resolvedChecked && "opacity-100"
-                    )
-                  }
-                )
+                className: "rui-radio__control",
+                "aria-hidden": "true"
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs19("span", { className: "flex flex-1 flex-col", children: [
-            /* @__PURE__ */ jsx21("span", { className: "text-sm font-semibold text-slate-900 dark:text-zinc-100", children: label }),
-            description ? /* @__PURE__ */ jsx21("span", { id: descriptionId, className: "text-xs text-slate-500 dark:text-zinc-400", children: description }) : null
+          /* @__PURE__ */ jsxs19("span", { className: "rui-radio__meta", children: [
+            /* @__PURE__ */ jsx21("span", { className: "rui-radio__label rui-text-wrap", children: label }),
+            description ? /* @__PURE__ */ jsx21("span", { id: descriptionId, className: "rui-radio__description rui-text-wrap", children: description }) : null
           ] })
         ] }),
-        extra ? /* @__PURE__ */ jsx21("span", { className: "self-center rounded-xl border border-slate-200 bg-white/80 px-3 py-1 text-xs font-semibold text-slate-600 dark:border-zinc-700 dark:bg-zinc-900/60 dark:text-zinc-200", children: extra }) : null
+        extra ? /* @__PURE__ */ jsx21("span", { className: "rui-radio__extra rui-text-wrap", children: extra }) : null
       ]
     }
   );
@@ -2996,7 +3165,8 @@ var Radio = React18.forwardRef(function Radio2({
 
 // components/Slider/Slider.tsx
 import * as React19 from "react";
-import { twMerge as twMerge21 } from "tailwind-merge";
+import clsx21 from "clsx";
+import "./Slider-KHMHINU4.css";
 import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
 function clampValue(value, min, max) {
   return Math.min(max, Math.max(min, value));
@@ -3097,7 +3267,7 @@ var Slider = React19.forwardRef(function Slider2({
   const trackOffset = trackMetrics.mainOffset;
   const trackCrossOffset = trackMetrics.crossOffset;
   const trackThickness = trackMetrics.thickness;
-  const overlap = Math.max(edgeOverlap, 0);
+  const overlap = Math.max(renderThumb ? 0 : edgeOverlap, 0);
   const minCenter = Math.max(thumbRadius - overlap, 0);
   const maxCenter = Math.max(trackLength - thumbRadius + overlap, minCenter);
   const usableLength = Math.max(maxCenter - minCenter, 0);
@@ -3201,11 +3371,17 @@ var Slider = React19.forwardRef(function Slider2({
     },
     [isControlled, max, min, onChange, step]
   );
-  const handleInputChange = (event) => {
-    const next = Number(event.target.value);
+  const applyInputValue = (value2) => {
+    const next = Number(value2);
     if (Number.isNaN(next)) return;
     commitValue(next);
   };
+  const handleInputChange = (event) => {
+    applyInputValue(event.currentTarget.value);
+  };
+  const handleInputEvent = (event) => {
+    applyInputValue(event.currentTarget.value);
+  };
   const formattedValue = formatValue(resolvedValue);
   const setValueFromPointer = React19.useCallback(
     (clientX, clientY) => {
@@ -3264,11 +3440,10 @@ var Slider = React19.forwardRef(function Slider2({
     "div",
     {
       ref: trackRef,
-      className: twMerge21(
-        "relative overflow-hidden rounded-full shadow-inner ring-1 ring-slate-200/80 dark:ring-white/10",
-        "bg-[length:100%_100%]",
-        isVertical ? "mx-auto h-full w-3" : "h-3 w-full",
-        disabled && "opacity-60",
+      className: clsx21(
+        "rui-slider__track",
+        isVertical && "rui-slider__track--vertical",
+        disabled && "rui-slider__track--disabled",
         trackClassName
       ),
       style: { backgroundImage: trackGradient },
@@ -3277,10 +3452,10 @@ var Slider = React19.forwardRef(function Slider2({
         /* @__PURE__ */ jsx22(
           "div",
           {
-            className: twMerge21(
-              "absolute rounded-full shadow-[0_0_0_1px_rgba(59,130,246,0.18)]",
-              dragging ? "transition-none" : "transition-[width,height] duration-150 ease-out",
-              isVertical ? "left-0 right-0" : "inset-y-0"
+            className: clsx21(
+              "rui-slider__track-fill",
+              dragging && "rui-slider__track-fill--dragging",
+              isVertical ? "rui-slider__track-fill--vertical" : "rui-slider__track-fill--horizontal"
             ),
             style: {
               ...progressStyle,
@@ -3290,122 +3465,133 @@ var Slider = React19.forwardRef(function Slider2({
             }
           }
         ),
-        /* @__PURE__ */ jsx22("div", { className: "pointer-events-none absolute inset-0 rounded-full ring-1 ring-black/5 dark:ring-white/10" })
+        /* @__PURE__ */ jsx22("div", { className: "rui-slider__track-overlay" })
       ]
     }
   );
   const defaultThumb = /* @__PURE__ */ jsx22(
     "span",
     {
-      className: twMerge21(
-        "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 rounded-full border border-white bg-white shadow-md shadow-slate-900/20 ring-1 ring-slate-200 transition-transform duration-150 dark:border-zinc-700/60 dark:bg-zinc-800 dark:shadow-black/30 dark:ring-zinc-700",
-        focused && "scale-[1.04] ring-slate-300 dark:ring-slate-500",
-        disabled && "opacity-60 shadow-none dark:shadow-none",
+      className: clsx21(
+        "rui-slider__thumb",
+        focused && "rui-slider__thumb--focused",
+        disabled && "rui-slider__thumb--disabled",
         thumbClassName
       ),
       style: { ...thumbStyle, width: thumbDiameter, height: thumbDiameter },
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsxs20("span", { className: "relative block h-full w-full", children: [
-        /* @__PURE__ */ jsx22("span", { className: "absolute inset-[5px] rounded-full bg-gradient-to-br from-slate-50 to-slate-200 dark:from-slate-600 dark:to-slate-700" }),
-        /* @__PURE__ */ jsx22("span", { className: "absolute inset-0 rounded-full bg-slate-950/5 backdrop-blur-[1px] dark:bg-white/5" })
+      children: /* @__PURE__ */ jsxs20("span", { className: "rui-slider__thumb-core", children: [
+        /* @__PURE__ */ jsx22("span", { className: "rui-slider__thumb-gradient" }),
+        /* @__PURE__ */ jsx22("span", { className: "rui-slider__thumb-overlay" })
       ] })
     }
   );
-  return /* @__PURE__ */ jsxs20("div", { className: twMerge21("w-full space-y-2", isVertical && "max-w-[120px]", className), children: [
-    label ? /* @__PURE__ */ jsxs20("div", { className: "flex items-center justify-between gap-3", children: [
-      /* @__PURE__ */ jsx22(
-        "label",
-        {
-          htmlFor: inputId,
-          className: "text-[11px] font-semibold uppercase tracking-[0.25em] text-slate-500 dark:text-zinc-400",
-          children: label
-        }
+  return /* @__PURE__ */ jsxs20(
+    "div",
+    {
+      className: clsx21(
+        "rui-root rui-slider",
+        isVertical && "rui-slider--vertical",
+        className
       ),
-      /* @__PURE__ */ jsx22("span", { className: "rounded-full bg-white/90 px-2 py-0.5 text-xs font-semibold text-slate-700 shadow-sm ring-1 ring-slate-200 dark:bg-zinc-900/80 dark:text-zinc-200 dark:ring-zinc-700", children: formattedValue })
-    ] }) : null,
-    /* @__PURE__ */ jsxs20(
-      "div",
-      {
-        ref: trackContainerRef,
-        className: twMerge21(
-          "relative w-full pt-2 pb-3",
-          isVertical && "flex h-48 items-center justify-center px-4 pb-4 pt-4"
-        ),
-        "data-orientation": orientation,
-        children: [
-          renderTrack ? renderTrack({ ...renderProps, children: defaultTrack }) : defaultTrack,
-          renderThumb ? renderThumb(renderProps) : defaultThumb,
+      children: [
+        label ? /* @__PURE__ */ jsxs20("div", { className: "rui-slider__header", children: [
           /* @__PURE__ */ jsx22(
-            "input",
+            "label",
             {
-              ...rest,
-              ref: mergedRef,
-              id: inputId,
-              type: "range",
-              min,
-              max,
-              step,
-              value: resolvedValue,
-              onChange: handleInputChange,
-              onInput: handleInputChange,
-              onFocus: () => setFocused(true),
-              onBlur: () => setFocused(false),
-              disabled,
-              "aria-valuetext": formattedValue,
-              "aria-orientation": orientation,
-              "data-orientation": orientation,
-              className: "absolute inset-0 h-10 w-full appearance-none opacity-0 pointer-events-none"
+              htmlFor: inputId,
+              className: "rui-slider__label rui-text-wrap",
+              children: label
             }
           ),
-          /* @__PURE__ */ jsx22(
-            "div",
-            {
-              ref: interactionRef,
-              "aria-hidden": "true",
-              onPointerDown: handlePointerDown,
-              className: twMerge21(
-                "absolute inset-0 cursor-pointer bg-transparent",
-                isVertical ? "left-1/2 w-8 -translate-x-1/2" : "top-1/2 h-8 -translate-y-1/2"
+          /* @__PURE__ */ jsx22("span", { className: "rui-slider__value", children: formattedValue })
+        ] }) : null,
+        /* @__PURE__ */ jsxs20(
+          "div",
+          {
+            ref: trackContainerRef,
+            className: clsx21(
+              "rui-slider__track-container",
+              isVertical && "rui-slider__track-container--vertical"
+            ),
+            "data-orientation": orientation,
+            children: [
+              renderTrack ? renderTrack({ ...renderProps, children: defaultTrack }) : defaultTrack,
+              renderThumb ? renderThumb(renderProps) : defaultThumb,
+              /* @__PURE__ */ jsx22(
+                "input",
+                {
+                  ...rest,
+                  ref: mergedRef,
+                  id: inputId,
+                  type: "range",
+                  min,
+                  max,
+                  step,
+                  value: resolvedValue,
+                  onChange: handleInputChange,
+                  onInput: handleInputEvent,
+                  onFocus: () => setFocused(true),
+                  onBlur: () => setFocused(false),
+                  disabled,
+                  "aria-valuetext": formattedValue,
+                  "aria-orientation": orientation,
+                  "data-orientation": orientation,
+                  className: "rui-slider__input"
+                }
+              ),
+              /* @__PURE__ */ jsx22(
+                "div",
+                {
+                  ref: interactionRef,
+                  "aria-hidden": "true",
+                  onPointerDown: handlePointerDown,
+                  className: clsx21(
+                    "rui-slider__interaction",
+                    isVertical ? "rui-slider__interaction--vertical" : "rui-slider__interaction--horizontal"
+                  )
+                }
               )
-            }
-          )
-        ]
-      }
-    )
-  ] });
+            ]
+          }
+        )
+      ]
+    }
+  );
 });
 
 // components/StackedList/StackedList.tsx
-import { twMerge as twMerge22 } from "tailwind-merge";
+import clsx22 from "clsx";
+import "./StackedList-QF5242GF.css";
 import { jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
 function StackedList({ items, dense, className, ...rest }) {
   return /* @__PURE__ */ jsx23(
     "div",
     {
       ...rest,
-      className: twMerge22(
-        "rounded-3xl border border-slate-200 bg-white/80 shadow-xl shadow-slate-200/40 dark:border-zinc-800 dark:bg-zinc-900/80 dark:shadow-none",
+      className: clsx22(
+        "rui-stacked-list rui-root rui-surface",
         className
       ),
-      children: /* @__PURE__ */ jsx23("ul", { role: "list", className: "divide-y divide-slate-100 dark:divide-zinc-800", children: items.map((item) => /* @__PURE__ */ jsxs21(
+      children: /* @__PURE__ */ jsx23("ul", { role: "list", className: "rui-stacked-list__list", children: items.map((item) => /* @__PURE__ */ jsxs21(
         "li",
         {
-          className: twMerge22("flex items-start gap-4 px-5 py-4", dense && "py-3"),
+          className: clsx22("rui-stacked-list__item", dense && "rui-stacked-list__item--dense"),
           children: [
             item.icon ? /* @__PURE__ */ jsx23(
               "div",
               {
-                className: "mt-0.5 rounded-2xl bg-slate-100 p-2 text-slate-600 dark:bg-zinc-900/50 dark:text-zinc-200",
+                className: "rui-stacked-list__icon",
                 "aria-hidden": "true",
                 children: item.icon
               }
             ) : null,
-            /* @__PURE__ */ jsxs21("div", { className: "flex-1", children: [
-              /* @__PURE__ */ jsx23("p", { className: "text-sm font-semibold text-slate-900 dark:text-zinc-100", children: item.title }),
-              item.description ? /* @__PURE__ */ jsx23("p", { className: "text-sm text-slate-500 dark:text-zinc-400", children: item.description }) : null
+            /* @__PURE__ */ jsxs21("div", { className: "rui-stacked-list__content", children: [
+              /* @__PURE__ */ jsx23("p", { className: "rui-stacked-list__title rui-text-wrap", children: item.title }),
+              item.description ? /* @__PURE__ */ jsx23("p", { className: "rui-stacked-list__description rui-text-wrap", children: item.description }) : null
             ] }),
-            /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-end gap-1 text-right", children: [
-              item.meta ? /* @__PURE__ */ jsx23("span", { className: "text-xs uppercase tracking-wide text-slate-400 dark:text-zinc-500", children: item.meta }) : null,
+            /* @__PURE__ */ jsxs21("div", { className: "rui-stacked-list__meta", children: [
+              item.meta ? /* @__PURE__ */ jsx23("span", { className: "rui-stacked-list__meta-text rui-text-wrap", children: item.meta }) : null,
               item.action
             ] })
           ]
@@ -3416,22 +3602,312 @@ function StackedList({ items, dense, className, ...rest }) {
   );
 }
 
+// components/TabGroup/TabGroup.tsx
+import React20 from "react";
+import "./TabGroup-CV2AC3EO.css";
+import { Fragment as Fragment2, jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
+function TabGroup({
+  align = "start",
+  position = "top",
+  fill = "full",
+  rotation = "horizontal",
+  size = 50,
+  tabs,
+  active,
+  defaultActive = 0,
+  onActiveChange
+}) {
+  var _a, _b;
+  const rootRef = React20.useRef(null);
+  const tabStripRef = React20.useRef(null);
+  const idBase = React20.useId();
+  const [effectiveFill, setEffectiveFill] = React20.useState(fill);
+  const [availableMain, setAvailableMain] = React20.useState(0);
+  const [minMain, setMinMain] = React20.useState(32);
+  const count = tabs.length;
+  const clampIndex = React20.useCallback(
+    (i) => {
+      if (count <= 0) {
+        return 0;
+      }
+      if (!Number.isFinite(i)) {
+        return 0;
+      }
+      return Math.max(0, Math.min(count - 1, Math.trunc(i)));
+    },
+    [count]
+  );
+  const isControlled = active !== void 0;
+  const [activeInternal, setActiveInternal] = React20.useState(() => clampIndex(defaultActive));
+  React20.useEffect(() => {
+    if (!isControlled) {
+      setActiveInternal((i) => clampIndex(i));
+    }
+  }, [clampIndex, isControlled]);
+  const currentActive = clampIndex(isControlled ? active : activeInternal);
+  const setActive = React20.useCallback(
+    (next) => {
+      const i = clampIndex(next);
+      if (!isControlled) {
+        setActiveInternal(i);
+      }
+      onActiveChange == null ? void 0 : onActiveChange(i);
+    },
+    [clampIndex, isControlled, onActiveChange]
+  );
+  const tabsFirst = position === "top" || position === "left";
+  const updateEffectiveFill = React20.useCallback(() => {
+    const root = rootRef.current;
+    if (!root) {
+      setEffectiveFill(fill);
+      return;
+    }
+    const rect = root.getBoundingClientRect();
+    const computed = getComputedStyle(root);
+    const radius = parseFloat(computed.getPropertyValue("--rui-tab-panel-radius")) || 0;
+    const border = parseFloat(computed.getPropertyValue("--rui-tab-border")) || 0;
+    const minMainValue = parseFloat(computed.getPropertyValue("--rui-tab-min-main")) || 32;
+    const wiggle = border * 2 + 1;
+    const available = position === "top" || position === "bottom" ? rect.width : rect.height;
+    const required = (size != null ? size : 0) * tabs.length;
+    const slots2 = minMainValue > 0 ? Math.floor(available / minMainValue) : tabs.length;
+    const hasOverflowControls = slots2 < tabs.length;
+    const shouldFill = available - 2 * radius - wiggle <= required;
+    setEffectiveFill(shouldFill || hasOverflowControls ? "full" : "partial");
+  }, [fill, position, size, tabs.length]);
+  React20.useLayoutEffect(() => {
+    if (fill === "full") {
+      setEffectiveFill("full");
+      return;
+    }
+    updateEffectiveFill();
+    const node = rootRef.current;
+    if (!node || typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const observer = new ResizeObserver(() => updateEffectiveFill());
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [fill, updateEffectiveFill]);
+  const isVertical = position === "left" || position === "right";
+  React20.useLayoutEffect(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const computed = getComputedStyle(root);
+    const cssMin = parseFloat(computed.getPropertyValue("--rui-tab-min-main"));
+    setMinMain(Number.isFinite(cssMin) && cssMin > 0 ? cssMin : 32);
+  }, [position]);
+  React20.useLayoutEffect(() => {
+    const node = tabStripRef.current;
+    if (!node) return;
+    const measure = () => {
+      const rect = node.getBoundingClientRect();
+      setAvailableMain(isVertical ? rect.height : rect.width);
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => measure());
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [isVertical]);
+  const slots = availableMain > 0 && minMain > 0 ? Math.floor(availableMain / minMain) : count;
+  const overflow = slots < count;
+  const windowSize = overflow ? Math.max(1, slots - 2) : count;
+  const maxStart = Math.max(0, count - windowSize);
+  const [startIndex, setStartIndex] = React20.useState(0);
+  React20.useEffect(() => {
+    if (!overflow) {
+      setStartIndex(0);
+      return;
+    }
+    setStartIndex((prev) => Math.min(Math.max(0, prev), maxStart));
+  }, [overflow, maxStart]);
+  React20.useEffect(() => {
+    if (!overflow) return;
+    setStartIndex((prev) => {
+      if (currentActive < prev) return currentActive;
+      const end = prev + windowSize;
+      if (currentActive >= end) return currentActive - windowSize + 1;
+      return prev;
+    });
+  }, [currentActive, overflow, windowSize]);
+  const visibleTabs = overflow ? tabs.slice(startIndex, startIndex + windowSize) : tabs;
+  const slotSize = overflow && slots > 0 ? availableMain / slots : 0;
+  const overflowMainStyle = overflow && slotSize > 0 ? isVertical ? { height: slotSize } : { width: slotSize } : void 0;
+  const mainStyle = overflow ? overflowMainStyle : effectiveFill === "partial" ? isVertical ? { height: size } : { width: size } : void 0;
+  const scrollLabels = isVertical ? { back: "Scroll tabs up", forward: "Scroll tabs down" } : { back: "Scroll tabs left", forward: "Scroll tabs right" };
+  const scrollMainStyle = overflowMainStyle;
+  const panelId = `${idBase}-panel`;
+  const getTabId = React20.useCallback(
+    (index) => `${idBase}-tab-${index}`,
+    [idBase]
+  );
+  const focusTabAt = React20.useCallback((index) => {
+    var _a2;
+    const node = (_a2 = rootRef.current) == null ? void 0 : _a2.querySelector(`[data-tab-index="${index}"]`);
+    node == null ? void 0 : node.focus();
+  }, []);
+  const moveActiveBy = React20.useCallback(
+    (direction) => {
+      var _a2;
+      if (count === 0) return;
+      for (let i = 0; i < count; i += 1) {
+        const next = (currentActive + direction * (i + 1) + count) % count;
+        if (!((_a2 = tabs[next]) == null ? void 0 : _a2.disabled)) {
+          setActive(next);
+          requestAnimationFrame(() => focusTabAt(next));
+          return;
+        }
+      }
+    },
+    [count, currentActive, focusTabAt, setActive, tabs]
+  );
+  const moveToEdge = React20.useCallback(
+    (edge) => {
+      var _a2;
+      if (count === 0) return;
+      const range = edge === "start" ? [0, count, 1] : [count - 1, -1, -1];
+      for (let i = range[0]; i !== range[1]; i += range[2]) {
+        if (!((_a2 = tabs[i]) == null ? void 0 : _a2.disabled)) {
+          setActive(i);
+          requestAnimationFrame(() => focusTabAt(i));
+          return;
+        }
+      }
+    },
+    [count, focusTabAt, setActive, tabs]
+  );
+  const handleTabListKeyDown = React20.useCallback(
+    (event) => {
+      const key = event.key;
+      const prevKey = isVertical ? "ArrowUp" : "ArrowLeft";
+      const nextKey = isVertical ? "ArrowDown" : "ArrowRight";
+      if (key === prevKey) {
+        event.preventDefault();
+        moveActiveBy(-1);
+        return;
+      }
+      if (key === nextKey) {
+        event.preventDefault();
+        moveActiveBy(1);
+        return;
+      }
+      if (key === "Home") {
+        event.preventDefault();
+        moveToEdge("start");
+      } else if (key === "End") {
+        event.preventDefault();
+        moveToEdge("end");
+      }
+    },
+    [isVertical, moveActiveBy, moveToEdge]
+  );
+  const tabList = /* @__PURE__ */ jsxs22("div", { className: "rui-tab-group__tabstrip", ref: tabStripRef, children: [
+    overflow && /* @__PURE__ */ jsx24(
+      "button",
+      {
+        type: "button",
+        className: "rui-tab-group__scroll is-back",
+        "aria-label": scrollLabels.back,
+        disabled: startIndex === 0,
+        onClick: () => setStartIndex((i) => Math.max(0, i - 1)),
+        style: scrollMainStyle,
+        children: /* @__PURE__ */ jsx24("span", { "aria-hidden": "true", className: "rui-tab-group__scrollIcon", children: isVertical ? "\u25B2" : "\u25C0" })
+      }
+    ),
+    /* @__PURE__ */ jsx24(
+      "div",
+      {
+        className: "rui-tab-group__tablist",
+        role: "tablist",
+        "aria-orientation": isVertical ? "vertical" : "horizontal",
+        onKeyDown: handleTabListKeyDown,
+        children: visibleTabs.map((tab, localIndex) => {
+          const index = overflow ? startIndex + localIndex : localIndex;
+          return /* @__PURE__ */ jsx24(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              className: `rui-tab-group__tab ${index === currentActive ? "is-active" : ""}`,
+              style: mainStyle,
+              disabled: tab.disabled,
+              "aria-selected": index === currentActive,
+              "aria-controls": panelId,
+              id: getTabId(index),
+              "data-tab-index": index,
+              tabIndex: index === currentActive ? 0 : -1,
+              onClick: () => !tab.disabled && setActive(index),
+              children: /* @__PURE__ */ jsx24("span", { className: "rui-tab-group__label", children: tab.label })
+            },
+            index
+          );
+        })
+      }
+    ),
+    overflow && /* @__PURE__ */ jsx24(
+      "button",
+      {
+        type: "button",
+        className: "rui-tab-group__scroll is-forward",
+        "aria-label": scrollLabels.forward,
+        disabled: startIndex === maxStart,
+        onClick: () => setStartIndex((i) => Math.min(maxStart, i + 1)),
+        style: scrollMainStyle,
+        children: /* @__PURE__ */ jsx24("span", { "aria-hidden": "true", className: "rui-tab-group__scrollIcon", children: isVertical ? "\u25BC" : "\u25B6" })
+      }
+    )
+  ] });
+  const panel = /* @__PURE__ */ jsx24(
+    "div",
+    {
+      className: "rui-tab-group__panel",
+      role: "tabpanel",
+      id: panelId,
+      "aria-labelledby": getTabId(currentActive),
+      tabIndex: 0,
+      children: (_b = (_a = tabs[currentActive]) == null ? void 0 : _a.content) != null ? _b : null
+    }
+  );
+  return /* @__PURE__ */ jsx24(
+    "div",
+    {
+      ref: rootRef,
+      className: "rui-tab-group",
+      "data-align": align,
+      "data-position": position,
+      "data-fill": effectiveFill,
+      "data-requested-fill": fill,
+      "data-rotation": rotation,
+      "data-overflow": overflow ? "true" : "false",
+      children: tabsFirst ? /* @__PURE__ */ jsxs22(Fragment2, { children: [
+        tabList,
+        panel
+      ] }) : /* @__PURE__ */ jsxs22(Fragment2, { children: [
+        panel,
+        tabList
+      ] })
+    }
+  );
+}
+
 // components/Table/Table.tsx
-import * as React20 from "react";
-import { twMerge as twMerge23 } from "tailwind-merge";
-import { jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
+import * as React21 from "react";
+import clsx23 from "clsx";
+import "./Table-GHEVUAUZ.css";
+import { jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
 var MIN_THUMB = 24;
 var TRACK_PADDING2 = 6;
 var TRACK_THICKNESS = 6;
 var TRACK_INSET = 8;
 var V_TRACK_INSET = 10;
 function useScrollbarMetrics(ref, axis, extraSpace) {
-  const [state, setState] = React20.useState({
+  const [state, setState] = React21.useState({
     visible: false,
     size: MIN_THUMB,
     offset: 0
   });
-  React20.useLayoutEffect(() => {
+  React21.useLayoutEffect(() => {
     const el = ref.current;
     if (!el) return;
     let raf = 0;
@@ -3467,7 +3943,7 @@ function useScrollbarMetrics(ref, axis, extraSpace) {
   return state;
 }
 function useThumbDrag(ref, axis, thumbState, extraSpace) {
-  const startDrag = React20.useCallback(
+  const startDrag = React21.useCallback(
     (event, startScrollOverride) => {
       var _a, _b;
       const el = ref.current;
@@ -3498,7 +3974,7 @@ function useThumbDrag(ref, axis, thumbState, extraSpace) {
     },
     [axis, ref, thumbState.size, extraSpace]
   );
-  const onThumbPointerDown = React20.useCallback(
+  const onThumbPointerDown = React21.useCallback(
     (event) => {
       event.stopPropagation();
       startDrag(event);
@@ -3515,15 +3991,15 @@ function Table({
   scrollAreaStyle,
   style
 }) {
-  const scrollRef = React20.useRef(null);
-  const [padRight, setPadRight] = React20.useState(0);
-  const [padBottom, setPadBottom] = React20.useState(0);
+  const scrollRef = React21.useRef(null);
+  const [padRight, setPadRight] = React21.useState(0);
+  const [padBottom, setPadBottom] = React21.useState(0);
   const vThumb = useScrollbarMetrics(scrollRef, "vertical", padBottom);
   const hThumb = useScrollbarMetrics(scrollRef, "horizontal", padRight);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     setPadRight(vThumb.visible ? TRACK_PADDING2 + 10 : 0);
   }, [vThumb.visible]);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     setPadBottom(hThumb.visible ? TRACK_PADDING2 + 10 : 0);
   }, [hThumb.visible]);
   const { onThumbPointerDown: handleVThumbDown, startDrag: startVDrag } = useThumbDrag(
@@ -3538,7 +4014,7 @@ function Table({
     hThumb,
     padRight
   );
-  const handleTrackPointerDown = React20.useCallback(
+  const handleTrackPointerDown = React21.useCallback(
     (axis, thumb, startDrag, event) => {
       const el = scrollRef.current;
       if (!el) return;
@@ -3563,55 +4039,55 @@ function Table({
   const vOffset = Math.max(TRACK_PADDING2, (vSlot - TRACK_THICKNESS) / 2);
   const hOffset = Math.max(TRACK_PADDING2, (hSlot - TRACK_THICKNESS) / 2);
   const hBottom = Math.max(TRACK_PADDING2 / 2, (hSlot - TRACK_THICKNESS) / 2);
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     "div",
     {
-      className: twMerge23(
-        "overflow-hidden rounded-3xl border border-slate-200 shadow-sm dark:border-zinc-800",
+      className: clsx23(
+        "rui-table",
         className
       ),
       style,
-      children: /* @__PURE__ */ jsxs22(
+      children: /* @__PURE__ */ jsxs23(
         "div",
         {
-          className: "relative overflow-hidden bg-white/90 dark:bg-zinc-950/80",
+          className: "rui-table__container",
           style: { paddingRight: padRight, paddingBottom: padBottom },
           children: [
-            /* @__PURE__ */ jsx24(
+            /* @__PURE__ */ jsx25(
               "div",
               {
                 ref: scrollRef,
-                className: "table-scrollbar overflow-auto",
+                className: "rui-table__scroll",
                 style: { ...scrollAreaStyle },
-                children: /* @__PURE__ */ jsxs22("table", { className: "w-full border-collapse text-sm text-slate-700 dark:text-zinc-200", children: [
-                  caption ? /* @__PURE__ */ jsx24("caption", { className: "bg-slate-50 px-4 py-2 text-left text-xs font-semibold uppercase tracking-[0.25em] text-slate-500 dark:bg-zinc-900/70 dark:text-zinc-400", children: caption }) : null,
-                  /* @__PURE__ */ jsx24("thead", { className: "bg-white/90 text-xs uppercase tracking-[0.16em] text-slate-500 dark:bg-zinc-900/80 dark:text-zinc-400", children: /* @__PURE__ */ jsx24("tr", { children: columns.map((col) => /* @__PURE__ */ jsx24(
+                children: /* @__PURE__ */ jsxs23("table", { className: "rui-table__table", children: [
+                  caption ? /* @__PURE__ */ jsx25("caption", { className: "rui-table__caption rui-text-wrap", children: caption }) : null,
+                  /* @__PURE__ */ jsx25("thead", { className: "rui-table__head", children: /* @__PURE__ */ jsx25("tr", { children: columns.map((col) => /* @__PURE__ */ jsx25(
                     "th",
                     {
                       scope: "col",
-                      className: twMerge23(
-                        "px-4 py-3 text-left font-semibold",
-                        col.align === "right" && "text-right",
-                        col.align === "center" && "text-center"
+                      className: clsx23(
+                        "rui-table__header-cell",
+                        col.align === "right" && "rui-table__header-cell--align-right",
+                        col.align === "center" && "rui-table__header-cell--align-center"
                       ),
                       children: col.header
                     },
                     String(col.key)
                   )) }) }),
-                  /* @__PURE__ */ jsx24("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ jsx24(
+                  /* @__PURE__ */ jsx25("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ jsx25(
                     "tr",
                     {
-                      className: twMerge23(
-                        "border-t border-slate-100 transition dark:border-zinc-800",
-                        rowIndex % 2 === 0 ? "bg-slate-100/70 hover:bg-slate-200 dark:bg-zinc-950/70 dark:hover:bg-zinc-800" : "bg-white/80 hover:bg-slate-200 dark:bg-zinc-900/60 dark:hover:bg-zinc-800"
+                      className: clsx23(
+                        "rui-table__row",
+                        rowIndex % 2 === 0 && "rui-table__row--alt"
                       ),
-                      children: columns.map((col) => /* @__PURE__ */ jsx24(
+                      children: columns.map((col) => /* @__PURE__ */ jsx25(
                         "td",
                         {
-                          className: twMerge23(
-                            "px-4 py-3 align-middle",
-                            col.align === "right" && "text-right",
-                            col.align === "center" && "text-center"
+                          className: clsx23(
+                            "rui-table__cell",
+                            col.align === "right" && "rui-table__cell--align-right",
+                            col.align === "center" && "rui-table__cell--align-center"
                           ),
                           children: col.render ? col.render(row[col.key], row) : row[col.key]
                         },
@@ -3623,10 +4099,10 @@ function Table({
                 ] })
               }
             ),
-            vThumb.visible ? /* @__PURE__ */ jsx24(
+            vThumb.visible ? /* @__PURE__ */ jsx25(
               "div",
               {
-                className: "absolute z-20 pointer-events-auto rounded-full bg-white/80 shadow-inner dark:bg-zinc-900/70",
+                className: "rui-table__track rui-table__track--vertical",
                 style: {
                   right: vOffset,
                   top: TRACK_PADDING2 + V_TRACK_INSET,
@@ -3634,20 +4110,22 @@ function Table({
                   width: TRACK_THICKNESS
                 },
                 onPointerDown: (e) => handleTrackPointerDown("vertical", vThumb, startVDrag, e),
-                children: /* @__PURE__ */ jsx24("div", { className: "relative h-full w-full rounded-full bg-slate-900/5 shadow-inner dark:bg-white/10", children: /* @__PURE__ */ jsx24(
+                children: /* @__PURE__ */ jsx25("div", { className: "rui-table__track-inner", children: /* @__PURE__ */ jsx25(
                   "div",
                   {
-                    className: "absolute left-1/2 w-full -translate-x-1/2 rounded-full bg-slate-400/80 shadow-sm transition-colors dark:bg-zinc-500/70",
+                    className: clsx23(
+                      "rui-table__thumb rui-table__thumb--vertical"
+                    ),
                     style: { height: `${vThumb.size}px`, top: `${vThumb.offset}px` },
                     onPointerDown: handleVThumbDown
                   }
                 ) })
               }
             ) : null,
-            hThumb.visible ? /* @__PURE__ */ jsx24(
+            hThumb.visible ? /* @__PURE__ */ jsx25(
               "div",
               {
-                className: "absolute z-20 pointer-events-auto rounded-full bg-white/80 shadow-inner dark:bg-zinc-900/70",
+                className: "rui-table__track rui-table__track--horizontal",
                 style: {
                   left: hOffset + TRACK_INSET,
                   right: hOffset + TRACK_INSET,
@@ -3655,10 +4133,12 @@ function Table({
                   height: TRACK_THICKNESS
                 },
                 onPointerDown: (e) => handleTrackPointerDown("horizontal", hThumb, startHDrag, e),
-                children: /* @__PURE__ */ jsx24("div", { className: "relative h-full w-full rounded-full bg-slate-900/5 shadow-inner dark:bg-white/10", children: /* @__PURE__ */ jsx24(
+                children: /* @__PURE__ */ jsx25("div", { className: "rui-table__track-inner", children: /* @__PURE__ */ jsx25(
                   "div",
                   {
-                    className: "absolute top-1/2 h-full -translate-y-1/2 rounded-full bg-slate-400/80 shadow-sm transition-colors dark:bg-zinc-500/70",
+                    className: clsx23(
+                      "rui-table__thumb rui-table__thumb--horizontal"
+                    ),
                     style: { width: `${hThumb.size}px`, left: `${hThumb.offset}px` },
                     onPointerDown: handleHThumbDown
                   }
@@ -3673,16 +4153,17 @@ function Table({
 }
 
 // components/Textarea/Textarea.tsx
-import * as React21 from "react";
-import { twMerge as twMerge24 } from "tailwind-merge";
-import { jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
+import * as React22 from "react";
+import clsx24 from "clsx";
+import "./Textarea-ETXFJO7T.css";
+import { jsx as jsx26, jsxs as jsxs24 } from "react/jsx-runtime";
 var MIN_THUMB2 = 24;
 var TRACK_THICKNESS2 = 6;
 var TRACK_TOP = 8;
 var TRACK_BOTTOM = 22;
 var TRACK_REDUCTION = 20;
 var TRACK_REDUCTION_HALF = TRACK_REDUCTION / 2;
-var Textarea = React21.forwardRef(function Textarea2({
+var Textarea = React22.forwardRef(function Textarea2({
   label,
   description,
   error,
@@ -3695,24 +4176,24 @@ var Textarea = React21.forwardRef(function Textarea2({
   ...rest
 }, ref) {
   var _a, _b;
-  const generatedId = React21.useId();
+  const generatedId = React22.useId();
   const textareaId = id != null ? id : generatedId;
-  const descriptionId = React21.useId();
-  const errorId = React21.useId();
-  const textareaRef = React21.useRef(null);
-  const shellRef = React21.useRef(null);
-  const resizeListenersRef = React21.useRef({});
-  const [thumb, setThumb] = React21.useState({
+  const descriptionId = React22.useId();
+  const errorId = React22.useId();
+  const textareaRef = React22.useRef(null);
+  const shellRef = React22.useRef(null);
+  const resizeListenersRef = React22.useRef({});
+  const [thumb, setThumb] = React22.useState({
     visible: false,
     size: MIN_THUMB2,
     offset: 0
   });
   const hintIds = [description ? descriptionId : null, error ? errorId : null].filter(Boolean);
   const resolvedAriaDescribedBy = hintIds.length ? hintIds.join(" ") : void 0;
-  const [value, setValue] = React21.useState((_b = (_a = rest.defaultValue) == null ? void 0 : _a.toString()) != null ? _b : "");
-  const [height, setHeight] = React21.useState(void 0);
-  const [width, setWidth] = React21.useState(void 0);
-  const setRefs = React21.useCallback(
+  const [value, setValue] = React22.useState((_b = (_a = rest.defaultValue) == null ? void 0 : _a.toString()) != null ? _b : "");
+  const [height, setHeight] = React22.useState(void 0);
+  const [width, setWidth] = React22.useState(void 0);
+  const setRefs = React22.useCallback(
     (node) => {
       textareaRef.current = node;
       if (typeof ref === "function") {
@@ -3723,17 +4204,17 @@ var Textarea = React21.forwardRef(function Textarea2({
     },
     [ref]
   );
-  React21.useEffect(() => {
+  React22.useEffect(() => {
     if (typeof rest.value === "string") {
       setValue(rest.value);
     }
   }, [rest.value]);
-  React21.useLayoutEffect(() => {
+  React22.useLayoutEffect(() => {
     if (textareaRef.current && height === void 0) {
       setHeight(textareaRef.current.offsetHeight);
     }
   }, [height]);
-  React21.useLayoutEffect(() => {
+  React22.useLayoutEffect(() => {
     const el = textareaRef.current;
     if (!el) return;
     let raf = 0;
@@ -3768,26 +4249,24 @@ var Textarea = React21.forwardRef(function Textarea2({
       cancelAnimationFrame(raf);
     };
   }, [height]);
-  React21.useLayoutEffect(() => {
-    if (!shellRef.current || width !== void 0) return;
-    setWidth(shellRef.current.offsetWidth);
-  }, [width]);
-  React21.useEffect(() => {
+  React22.useEffect(() => {
     return () => {
       if (resizeListenersRef.current.move) {
-        window.removeEventListener("mousemove", resizeListenersRef.current.move);
+        window.removeEventListener("pointermove", resizeListenersRef.current.move);
       }
       if (resizeListenersRef.current.up) {
-        window.removeEventListener("mouseup", resizeListenersRef.current.up);
+        window.removeEventListener("pointerup", resizeListenersRef.current.up);
+        window.removeEventListener("pointercancel", resizeListenersRef.current.up);
       }
     };
   }, []);
   const handleResizeStart = (event) => {
-    var _a2, _b2, _c, _d, _e;
+    var _a2, _b2, _c, _d, _e, _f, _g;
+    if (event.pointerType === "mouse" && event.button !== 0) return;
     event.preventDefault();
     if (!textareaRef.current) return;
     const allowY = resizeDirection === "vertical" || resizeDirection === "both";
-    const allowX = resizeDirection === "horizontal" || resizeDirection === "both";
+    const allowX2 = resizeDirection === "horizontal" || resizeDirection === "both";
     const startY = event.clientY;
     const startX = event.clientX;
     const startHeight = textareaRef.current.offsetHeight;
@@ -3800,22 +4279,25 @@ var Textarea = React21.forwardRef(function Textarea2({
         const nextHeight = Math.max(minHeight, startHeight + (moveEvent.clientY - startY));
         setHeight(nextHeight);
       }
-      if (allowX) {
+      if (allowX2) {
         const proposed = startWidth + (moveEvent.clientX - startX);
         const nextWidth = Math.min(parentWidth, Math.max(minWidth, proposed));
         setWidth(nextWidth);
       }
     };
     const onUp = () => {
-      window.removeEventListener("mousemove", onMove);
-      window.removeEventListener("mouseup", onUp);
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onUp);
       resizeListenersRef.current = {};
     };
     resizeListenersRef.current = { move: onMove, up: onUp };
-    window.addEventListener("mousemove", onMove);
-    window.addEventListener("mouseup", onUp);
+    (_g = (_f = event.currentTarget).setPointerCapture) == null ? void 0 : _g.call(_f, event.pointerId);
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onUp);
   };
-  const handleThumbDrag = React21.useCallback(
+  const handleThumbDrag = React22.useCallback(
     (event, startScrollOverride) => {
       var _a2, _b2;
       const el = textareaRef.current;
@@ -3846,13 +4328,15 @@ var Textarea = React21.forwardRef(function Textarea2({
     },
     [thumb.size]
   );
-  const shellClasses = twMerge24(
-    "relative rounded-2xl border border-slate-300 bg-white/80 px-3 py-2 shadow-sm transition focus-within:border-slate-400 focus-within:shadow-[0_0_0_1px_rgba(148,163,184,0.45)] dark:border-zinc-700 dark:bg-zinc-900/70 dark:focus-within:border-slate-500",
-    disabled && "opacity-60",
-    error && "border-rose-300 focus-within:border-rose-400 focus-within:shadow-[0_0_0_1px_rgba(248,113,113,0.35)] dark:border-rose-500/60"
+  const rootClasses = clsx24("rui-textarea", "rui-root", disabled && "rui-textarea--disabled");
+  const shellClasses = clsx24(
+    "rui-textarea__shell",
+    disabled && "rui-textarea__shell--disabled",
+    error && "rui-textarea__shell--error"
   );
-  const textareaClasses = twMerge24(
-    "textarea-scrollbar min-h-[120px] w-full resize-none border-none bg-transparent pb-4 pr-5 text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none dark:text-zinc-100 dark:placeholder:text-zinc-500",
+  const textareaClasses = clsx24(
+    "rui-textarea__control",
+    `rui-textarea__control--resize-${resizeDirection}`,
     className
   );
   const count = value.length;
@@ -3860,22 +4344,21 @@ var Textarea = React21.forwardRef(function Textarea2({
   const { style, ...restProps } = rest;
   const textareaStyle = {
     ...style,
-    ...height !== void 0 ? { height } : null,
-    ...width !== void 0 ? { width } : null,
-    maxWidth: "100%"
+    ...height !== void 0 ? { height } : null
   };
-  const shellStyle = width !== void 0 ? { width, maxWidth: "100%" } : { maxWidth: "100%" };
-  return /* @__PURE__ */ jsxs23("div", { className: "space-y-1.5", children: [
-    label ? /* @__PURE__ */ jsx25(
+  const allowX = resizeDirection === "horizontal" || resizeDirection === "both";
+  const shellStyle = width !== void 0 && allowX ? { width } : void 0;
+  return /* @__PURE__ */ jsxs24("div", { className: rootClasses, children: [
+    label ? /* @__PURE__ */ jsx26(
       "label",
       {
         htmlFor: textareaId,
-        className: "text-xs font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-zinc-400",
+        className: "rui-textarea__label rui-text-wrap",
         children: label
       }
     ) : null,
-    /* @__PURE__ */ jsxs23("div", { className: shellClasses, ref: shellRef, style: shellStyle, children: [
-      /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsxs24("div", { className: shellClasses, ref: shellRef, style: shellStyle, children: [
+      /* @__PURE__ */ jsx26(
         "textarea",
         {
           ...restProps,
@@ -3894,10 +4377,10 @@ var Textarea = React21.forwardRef(function Textarea2({
           }
         }
       ),
-      thumb.visible ? /* @__PURE__ */ jsx25(
+      thumb.visible ? /* @__PURE__ */ jsx26(
         "div",
         {
-          className: "pointer-events-auto absolute z-20 rounded-full bg-white/60 shadow-inner backdrop-blur-sm transition-colors dark:bg-zinc-800/70",
+          className: "rui-textarea__scrollbar",
           style: {
             right: 4,
             top: TRACK_TOP + TRACK_REDUCTION_HALF,
@@ -3920,10 +4403,10 @@ var Textarea = React21.forwardRef(function Textarea2({
             el.scrollTop = target;
             handleThumbDrag(event, target);
           },
-          children: /* @__PURE__ */ jsx25("div", { className: "relative h-full w-full rounded-full bg-slate-900/5 shadow-inner dark:bg-white/10", children: /* @__PURE__ */ jsx25(
+          children: /* @__PURE__ */ jsx26("div", { className: "rui-textarea__scrollbar-track", children: /* @__PURE__ */ jsx26(
             "div",
             {
-              className: "absolute left-1/2 w-full -translate-x-1/2 rounded-full bg-slate-400/80 shadow-sm transition-colors dark:bg-zinc-500/70",
+              className: "rui-textarea__scrollbar-thumb",
               style: { height: `${thumb.size}px`, top: `${thumb.offset}px` },
               onPointerDown: (event) => {
                 event.stopPropagation();
@@ -3933,57 +4416,442 @@ var Textarea = React21.forwardRef(function Textarea2({
           ) })
         }
       ) : null,
-      resizeDirection !== "none" ? /* @__PURE__ */ jsxs23("div", { className: "pointer-events-none absolute bottom-2 right-2 flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400 dark:text-zinc-500", children: [
-        showCount && limit ? /* @__PURE__ */ jsxs23("div", { className: "pointer-events-auto", children: [
+      resizeDirection !== "none" ? /* @__PURE__ */ jsxs24("div", { className: "rui-textarea__footer", children: [
+        showCount && limit ? /* @__PURE__ */ jsxs24("div", { className: "rui-textarea__footer-count", children: [
           count,
           "/",
           limit
         ] }) : null,
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx26(
           "button",
           {
             type: "button",
             "aria-label": "Resize textarea",
-            onMouseDown: handleResizeStart,
-            className: "pointer-events-auto inline-flex h-[14px] w-[14px] items-center justify-center rounded-[3px] bg-transparent text-slate-400 outline-none transition hover:text-slate-500 focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-1 focus-visible:ring-offset-white active:cursor-grab dark:bg-transparent dark:text-zinc-400 dark:hover:text-zinc-200 dark:focus-visible:ring-slate-500 dark:focus-visible:ring-offset-zinc-900",
+            onPointerDown: handleResizeStart,
+            className: "rui-textarea__resize-handle",
             style: {
               border: "none",
               boxShadow: "none",
               appearance: "none",
               background: "transparent"
             },
-            children: /* @__PURE__ */ jsx25(
+            children: /* @__PURE__ */ jsx26(
               "svg",
               {
-                viewBox: "0 0 12 12",
+                viewBox: "0 0 16 16",
                 "aria-hidden": "true",
-                className: "h-3 w-3 text-slate-400 dark:text-zinc-400",
-                children: /* @__PURE__ */ jsx25(
-                  "path",
-                  {
-                    d: "M2 10.5 10.5 2M4.5 10.5 10.5 4.5M7 10.5 10.5 7",
-                    stroke: "currentColor",
-                    strokeWidth: "1.1"
-                  }
-                )
+                className: "rui-textarea__resize-handle-icon",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                children: /* @__PURE__ */ jsx26("path", { d: "M7 15 L15 7 M11 15 L15 11 M3 15 L15 3" })
               }
             )
           }
         )
       ] }) : null
     ] }),
-    description ? /* @__PURE__ */ jsx25("p", { id: descriptionId, className: "text-xs text-slate-500 dark:text-zinc-400", children: description }) : null,
-    error ? /* @__PURE__ */ jsx25("p", { id: errorId, className: "text-xs font-medium text-rose-500 dark:text-rose-400", children: error }) : null
+    description ? /* @__PURE__ */ jsx26("p", { id: descriptionId, className: "rui-textarea__description rui-text-wrap", children: description }) : null,
+    error ? /* @__PURE__ */ jsx26("p", { id: errorId, className: "rui-textarea__error rui-text-wrap", children: error }) : null
   ] });
 });
 
+// components/ResizableContainer/ResizableContainer.tsx
+import * as React23 from "react";
+import clsx25 from "clsx";
+import "./ResizableContainer-KIX7YKZJ.css";
+import { jsx as jsx27, jsxs as jsxs25 } from "react/jsx-runtime";
+var DEFAULT_MIN_WIDTH = 240;
+var DEFAULT_MIN_HEIGHT = 120;
+var DEFAULT_STEP = 8;
+var MIN_THUMB3 = 24;
+var TRACK_PADDING3 = 6;
+var TRACK_THICKNESS3 = 6;
+var TRACK_INSET2 = 8;
+var V_TRACK_INSET2 = 10;
+function useScrollbarMetrics2(ref, axis, extraSpace) {
+  const [state, setState] = React23.useState({
+    visible: false,
+    size: MIN_THUMB3,
+    offset: 0
+  });
+  React23.useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    let raf = 0;
+    const update = () => {
+      const target = ref.current;
+      if (!target) return;
+      const scrollRange = axis === "vertical" ? target.scrollHeight - target.clientHeight : target.scrollWidth - target.clientWidth;
+      const trackLength = axis === "vertical" ? Math.max(0, target.clientHeight + extraSpace - TRACK_PADDING3 * 2 - V_TRACK_INSET2 * 2) : Math.max(0, target.clientWidth + extraSpace - 2 * (TRACK_PADDING3 + TRACK_INSET2));
+      if (scrollRange <= 0 || trackLength <= 0) {
+        setState((prev) => prev.visible ? { ...prev, visible: false } : prev);
+        return;
+      }
+      const ratio = axis === "vertical" ? target.clientHeight / target.scrollHeight : target.clientWidth / target.scrollWidth;
+      const thumbSize = Math.max(trackLength * ratio, MIN_THUMB3);
+      const maxOffset = Math.max(0, trackLength - thumbSize);
+      const currentOffset = maxOffset > 0 ? (axis === "vertical" ? target.scrollTop : target.scrollLeft) / scrollRange * maxOffset : 0;
+      setState({ visible: true, size: thumbSize, offset: currentOffset });
+    };
+    const handleScroll = () => {
+      cancelAnimationFrame(raf);
+      raf = window.requestAnimationFrame(update);
+    };
+    const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(update) : null;
+    resizeObserver == null ? void 0 : resizeObserver.observe(el);
+    el.addEventListener("scroll", handleScroll, { passive: true });
+    update();
+    return () => {
+      resizeObserver == null ? void 0 : resizeObserver.disconnect();
+      el.removeEventListener("scroll", handleScroll);
+      cancelAnimationFrame(raf);
+    };
+  }, [ref, axis, extraSpace]);
+  return state;
+}
+function useThumbDrag2(ref, axis, thumbState, extraSpace) {
+  const startDrag = React23.useCallback(
+    (event, startScrollOverride) => {
+      var _a, _b;
+      const el = ref.current;
+      if (!el) return;
+      event.preventDefault();
+      const startPos = axis === "vertical" ? event.clientY : event.clientX;
+      const startScroll = startScrollOverride != null ? startScrollOverride : axis === "vertical" ? el.scrollTop : el.scrollLeft;
+      const thumbSize = thumbState.size;
+      const handleMove = (moveEvent) => {
+        const delta = (axis === "vertical" ? moveEvent.clientY : moveEvent.clientX) - startPos;
+        const scrollRange = axis === "vertical" ? el.scrollHeight - el.clientHeight : el.scrollWidth - el.clientWidth;
+        const trackLength = axis === "vertical" ? el.clientHeight + extraSpace - TRACK_PADDING3 * 2 - V_TRACK_INSET2 * 2 : el.clientWidth + extraSpace - 2 * (TRACK_PADDING3 + TRACK_INSET2);
+        if (scrollRange <= 0 || trackLength <= thumbSize) return;
+        const ratio = scrollRange / (trackLength - thumbSize);
+        const next = startScroll + delta * ratio;
+        if (axis === "vertical") el.scrollTop = Math.min(scrollRange, Math.max(0, next));
+        else el.scrollLeft = Math.min(scrollRange, Math.max(0, next));
+      };
+      const handleUp = () => {
+        window.removeEventListener("pointermove", handleMove);
+        window.removeEventListener("pointerup", handleUp);
+        window.removeEventListener("pointercancel", handleUp);
+      };
+      (_b = (_a = event.currentTarget).setPointerCapture) == null ? void 0 : _b.call(_a, event.pointerId);
+      window.addEventListener("pointermove", handleMove);
+      window.addEventListener("pointerup", handleUp);
+      window.addEventListener("pointercancel", handleUp);
+    },
+    [axis, ref, thumbState.size, extraSpace]
+  );
+  const onThumbPointerDown = React23.useCallback(
+    (event) => {
+      event.stopPropagation();
+      startDrag(event);
+    },
+    [startDrag]
+  );
+  return { onThumbPointerDown, startDrag };
+}
+var ResizableContainer = React23.forwardRef(
+  function ResizableContainer2({
+    axis = "both",
+    minWidth = DEFAULT_MIN_WIDTH,
+    minHeight = DEFAULT_MIN_HEIGHT,
+    maxWidth,
+    maxHeight,
+    defaultWidth,
+    defaultHeight,
+    width,
+    height,
+    step = DEFAULT_STEP,
+    className,
+    style,
+    children,
+    onSizeChange,
+    ...rest
+  }, ref) {
+    const rootRef = React23.useRef(null);
+    const contentRef = React23.useRef(null);
+    const [internalWidth, setInternalWidth] = React23.useState(defaultWidth);
+    const [internalHeight, setInternalHeight] = React23.useState(defaultHeight);
+    const [isResizing, setIsResizing] = React23.useState(false);
+    const [padRight, setPadRight] = React23.useState(0);
+    const [padBottom, setPadBottom] = React23.useState(0);
+    const resizeStateRef = React23.useRef({
+      startX: 0,
+      startY: 0,
+      startWidth: 0,
+      startHeight: 0,
+      pointerId: null
+    });
+    const widthControlled = typeof width === "number";
+    const heightControlled = typeof height === "number";
+    const allowX = axis === "both" || axis === "x";
+    const allowY = axis === "both" || axis === "y";
+    const maxWidthLimit = maxWidth;
+    const maxHeightLimit = maxHeight;
+    const vThumb = useScrollbarMetrics2(contentRef, "vertical", padBottom);
+    const hThumb = useScrollbarMetrics2(contentRef, "horizontal", padRight);
+    React23.useEffect(() => {
+      setPadRight(vThumb.visible ? TRACK_PADDING3 + 10 : 0);
+    }, [vThumb.visible]);
+    React23.useEffect(() => {
+      setPadBottom(hThumb.visible ? TRACK_PADDING3 + 10 : 0);
+    }, [hThumb.visible]);
+    const { onThumbPointerDown: handleVThumbDown, startDrag: startVDrag } = useThumbDrag2(
+      contentRef,
+      "vertical",
+      vThumb,
+      padBottom
+    );
+    const { onThumbPointerDown: handleHThumbDown, startDrag: startHDrag } = useThumbDrag2(
+      contentRef,
+      "horizontal",
+      hThumb,
+      padRight
+    );
+    const handleTrackPointerDown = React23.useCallback(
+      (axis2, thumb, startDrag, event) => {
+        const el = contentRef.current;
+        if (!el) return;
+        event.preventDefault();
+        event.stopPropagation();
+        const rect = event.currentTarget.getBoundingClientRect();
+        const clickOffset = axis2 === "vertical" ? event.clientY - rect.top : event.clientX - rect.left;
+        const trackLength = axis2 === "vertical" ? rect.height : rect.width;
+        const scrollRange = axis2 === "vertical" ? el.scrollHeight - el.clientHeight : el.scrollWidth - el.clientWidth;
+        if (scrollRange <= 0 || trackLength <= 0) return;
+        const effective = Math.max(1, trackLength - thumb.size);
+        const ratio = Math.max(0, Math.min(effective, clickOffset - thumb.size / 2)) / effective;
+        const target = ratio * scrollRange;
+        if (axis2 === "vertical") el.scrollTop = target;
+        else el.scrollLeft = target;
+        startDrag(event, axis2 === "vertical" ? el.scrollTop : el.scrollLeft);
+      },
+      []
+    );
+    const setRefs = React23.useCallback(
+      (node) => {
+        rootRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    const clamp2 = React23.useCallback((value, min, max) => {
+      return Math.max(min != null ? min : -Infinity, Math.min(max != null ? max : Infinity, value));
+    }, []);
+    const handlePointerDown = (event) => {
+      var _a, _b;
+      if (event.pointerType === "mouse" && event.button !== 0) return;
+      event.preventDefault();
+      const node = rootRef.current;
+      if (!node) return;
+      const startWidth = node.offsetWidth;
+      const startHeight = node.offsetHeight;
+      resizeStateRef.current = {
+        startX: event.clientX,
+        startY: event.clientY,
+        startWidth,
+        startHeight,
+        pointerId: event.pointerId,
+        maxWidthLimit,
+        maxHeightLimit
+      };
+      setIsResizing(true);
+      (_b = (_a = event.currentTarget).setPointerCapture) == null ? void 0 : _b.call(_a, event.pointerId);
+    };
+    const applySize = React23.useCallback(
+      (nextWidth, nextHeight) => {
+        if (allowX && !widthControlled) {
+          setInternalWidth(nextWidth);
+        }
+        if (allowY && !heightControlled) {
+          setInternalHeight(nextHeight);
+        }
+        onSizeChange == null ? void 0 : onSizeChange({ width: nextWidth, height: nextHeight });
+      },
+      [allowX, allowY, heightControlled, onSizeChange, widthControlled]
+    );
+    const handlePointerMove = (event) => {
+      if (!isResizing) return;
+      const { startX, startY, startWidth, startHeight } = resizeStateRef.current;
+      const maxWidthLimit2 = resizeStateRef.current.maxWidthLimit;
+      const maxHeightLimit2 = resizeStateRef.current.maxHeightLimit;
+      const deltaX = event.clientX - startX;
+      const deltaY = event.clientY - startY;
+      const nextWidth = allowX ? clamp2(startWidth + deltaX, minWidth, maxWidthLimit2) : widthControlled ? width != null ? width : startWidth : internalWidth != null ? internalWidth : startWidth;
+      const nextHeight = allowY ? clamp2(startHeight + deltaY, minHeight, maxHeightLimit2) : heightControlled ? height != null ? height : startHeight : internalHeight != null ? internalHeight : startHeight;
+      applySize(nextWidth, nextHeight);
+    };
+    const handlePointerUp = (event) => {
+      var _a, _b;
+      if (!isResizing) return;
+      setIsResizing(false);
+      if (resizeStateRef.current.pointerId !== null) {
+        (_b = (_a = event.currentTarget).releasePointerCapture) == null ? void 0 : _b.call(_a, resizeStateRef.current.pointerId);
+      }
+      resizeStateRef.current.pointerId = null;
+    };
+    const handleKeyDown = (event) => {
+      var _a, _b;
+      let deltaX = 0;
+      let deltaY = 0;
+      switch (event.key) {
+        case "ArrowLeft":
+          if (allowX) deltaX = -step;
+          break;
+        case "ArrowRight":
+          if (allowX) deltaX = step;
+          break;
+        case "ArrowUp":
+          if (allowY) deltaY = -step;
+          break;
+        case "ArrowDown":
+          if (allowY) deltaY = step;
+          break;
+        default:
+          return;
+      }
+      if (deltaX === 0 && deltaY === 0) {
+        return;
+      }
+      event.preventDefault();
+      const node = rootRef.current;
+      const measuredWidth = (_a = node == null ? void 0 : node.offsetWidth) != null ? _a : 0;
+      const measuredHeight = (_b = node == null ? void 0 : node.offsetHeight) != null ? _b : 0;
+      const limitWidth = maxWidthLimit;
+      const limitHeight = maxHeightLimit;
+      const baseWidth = widthControlled ? width != null ? width : measuredWidth : internalWidth != null ? internalWidth : measuredWidth;
+      const baseHeight = heightControlled ? height != null ? height : measuredHeight : internalHeight != null ? internalHeight : measuredHeight;
+      const nextWidth = allowX ? clamp2(baseWidth + deltaX, minWidth, limitWidth) : baseWidth;
+      const nextHeight = allowY ? clamp2(baseHeight + deltaY, minHeight, limitHeight) : baseHeight;
+      applySize(nextWidth, nextHeight);
+    };
+    const resolvedWidth = widthControlled ? width : internalWidth;
+    const resolvedHeight = heightControlled ? height : internalHeight;
+    const sizeStyle = {
+      ...resolvedWidth !== void 0 ? { width: resolvedWidth } : null,
+      ...resolvedHeight !== void 0 ? { height: resolvedHeight } : null,
+      ...minWidth !== void 0 ? { minWidth } : null,
+      ...minHeight !== void 0 ? { minHeight } : null,
+      ...maxWidthLimit !== void 0 ? { maxWidth: maxWidthLimit } : null,
+      ...maxHeightLimit !== void 0 ? { maxHeight: maxHeightLimit } : null
+    };
+    const vSlot = padRight || TRACK_PADDING3;
+    const hSlot = padBottom || TRACK_PADDING3;
+    const vOffset = Math.max(TRACK_PADDING3, (vSlot - TRACK_THICKNESS3) / 2);
+    const hOffset = Math.max(TRACK_PADDING3, (hSlot - TRACK_THICKNESS3) / 2);
+    const hBottom = Math.max(TRACK_PADDING3 / 2, (hSlot - TRACK_THICKNESS3) / 2);
+    return /* @__PURE__ */ jsxs25(
+      "div",
+      {
+        ...rest,
+        ref: setRefs,
+        className: clsx25("rui-resizable", "rui-root", className),
+        style: { ...style, ...sizeStyle },
+        "data-axis": axis,
+        "data-resizing": isResizing ? "true" : void 0,
+        "data-scrollbar-x": hThumb.visible ? "true" : void 0,
+        "data-scrollbar-y": vThumb.visible ? "true" : void 0,
+        children: [
+          /* @__PURE__ */ jsx27(
+            "div",
+            {
+              ref: contentRef,
+              className: "rui-resizable__content",
+              style: {
+                paddingRight: `calc(var(--rui-resize-content-padding) + ${padRight}px)`,
+                paddingBottom: `calc(var(--rui-resize-content-padding) + ${padBottom}px)`
+              },
+              children
+            }
+          ),
+          vThumb.visible ? /* @__PURE__ */ jsx27(
+            "div",
+            {
+              className: "rui-resizable__scrollbar rui-resizable__scrollbar--vertical",
+              style: {
+                right: vOffset,
+                top: TRACK_PADDING3 + V_TRACK_INSET2,
+                bottom: TRACK_PADDING3 + V_TRACK_INSET2,
+                width: TRACK_THICKNESS3
+              },
+              onPointerDown: (e) => handleTrackPointerDown("vertical", vThumb, startVDrag, e),
+              children: /* @__PURE__ */ jsx27("div", { className: "rui-resizable__scrollbar-track", children: /* @__PURE__ */ jsx27(
+                "div",
+                {
+                  className: "rui-resizable__scrollbar-thumb",
+                  style: { height: `${vThumb.size}px`, top: `${vThumb.offset}px` },
+                  onPointerDown: handleVThumbDown
+                }
+              ) })
+            }
+          ) : null,
+          hThumb.visible ? /* @__PURE__ */ jsx27(
+            "div",
+            {
+              className: "rui-resizable__scrollbar rui-resizable__scrollbar--horizontal",
+              style: {
+                left: hOffset + TRACK_INSET2,
+                right: hOffset + TRACK_INSET2,
+                bottom: hBottom,
+                height: TRACK_THICKNESS3
+              },
+              onPointerDown: (e) => handleTrackPointerDown("horizontal", hThumb, startHDrag, e),
+              children: /* @__PURE__ */ jsx27("div", { className: "rui-resizable__scrollbar-track", children: /* @__PURE__ */ jsx27(
+                "div",
+                {
+                  className: "rui-resizable__scrollbar-thumb",
+                  style: { width: `${hThumb.size}px`, left: `${hThumb.offset}px` },
+                  onPointerDown: handleHThumbDown
+                }
+              ) })
+            }
+          ) : null,
+          /* @__PURE__ */ jsx27(
+            "button",
+            {
+              type: "button",
+              className: "rui-resizable__handle",
+              "aria-label": "Resize",
+              onPointerDown: handlePointerDown,
+              onPointerMove: handlePointerMove,
+              onPointerUp: handlePointerUp,
+              onPointerCancel: handlePointerUp,
+              onKeyDown: handleKeyDown,
+              children: /* @__PURE__ */ jsx27(
+                "svg",
+                {
+                  viewBox: "0 0 16 16",
+                  "aria-hidden": "true",
+                  className: "rui-resizable__handle-icon",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "1.5",
+                  strokeLinecap: "round",
+                  children: /* @__PURE__ */ jsx27("path", { d: "M7 15 L15 7 M11 15 L15 11 M3 15 L15 3" })
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
 // components/Toggle/Toggle.tsx
-import * as React22 from "react";
-import { twMerge as twMerge25 } from "tailwind-merge";
-import { jsx as jsx26 } from "react/jsx-runtime";
-var Toggle = React22.forwardRef(function Toggle2({ checked, defaultChecked = false, onChange, disabled, className, onClick, ...rest }, ref) {
+import * as React24 from "react";
+import clsx26 from "clsx";
+import "./Toggle-H2VEMC4W.css";
+import { jsx as jsx28 } from "react/jsx-runtime";
+var Toggle = React24.forwardRef(function Toggle2({ checked, defaultChecked = false, onChange, disabled, className, onClick, ...rest }, ref) {
   const isControlled = typeof checked === "boolean";
-  const [internalChecked, setInternalChecked] = React22.useState(defaultChecked);
+  const [internalChecked, setInternalChecked] = React24.useState(defaultChecked);
   const resolvedChecked = isControlled ? !!checked : internalChecked;
   const handleClick = (event) => {
     if (disabled) {
@@ -3997,18 +4865,18 @@ var Toggle = React22.forwardRef(function Toggle2({ checked, defaultChecked = fal
     onChange == null ? void 0 : onChange(next);
     onClick == null ? void 0 : onClick(event);
   };
-  const buttonClasses = twMerge25(
-    "relative inline-flex h-7 w-12 shrink-0 cursor-pointer items-center rounded-full border border-slate-300 bg-slate-200 transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-500 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-100",
-    "dark:border-zinc-700/70 dark:bg-zinc-900/70 dark:focus-visible:ring-offset-slate-950",
-    resolvedChecked && "border-slate-400 bg-slate-500/40 shadow-[0_0_0_1px_rgba(148,163,184,0.45)] dark:border-zinc-500 dark:bg-zinc-500",
-    disabled && "cursor-not-allowed opacity-60",
+  const buttonClasses = clsx26(
+    "rui-toggle__button rui-root",
+    resolvedChecked && "rui-toggle__button--checked",
+    disabled && "rui-toggle__button--disabled rui-toggle__is-disabled",
     className
   );
-  const thumbClasses = twMerge25(
-    "pointer-events-none absolute left-1 top-[3px] size-5 rounded-full bg-white text-zinc-900 shadow-lg shadow-black/30 transition-transform duration-200",
-    resolvedChecked ? "translate-x-[19px]" : "translate-x-0"
+  const thumbClasses = clsx26(
+    "rui-toggle__thumb",
+    resolvedChecked ? "rui-toggle__thumb--checked" : "rui-toggle__thumb--unchecked",
+    disabled && "rui-toggle__thumb--disabled"
   );
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx28(
     "button",
     {
       ...rest,
@@ -4020,7 +4888,7 @@ var Toggle = React22.forwardRef(function Toggle2({ checked, defaultChecked = fal
       "data-state": resolvedChecked ? "on" : "off",
       className: buttonClasses,
       onClick: handleClick,
-      children: /* @__PURE__ */ jsx26("span", { "aria-hidden": "true", className: thumbClasses })
+      children: /* @__PURE__ */ jsx28("span", { "aria-hidden": "true", className: thumbClasses })
     }
   );
 });
@@ -4045,9 +4913,11 @@ export {
   Popover,
   Progress,
   Radio,
+  ResizableContainer,
   Select,
   Slider,
   StackedList,
+  TabGroup,
   Table,
   Textarea,
   Toggle_default as Toggle