npm - @opencxh/ui-kit - Versions diffs - 3.57.2 → 3.57.4 - Mend

@opencxh/ui-kit 3.57.2 → 3.57.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/index.js CHANGED Viewed

@@ -1,86 +1,86 @@
-import { clsx as Ae } from "clsx";
-import { jsxs as d, jsx as e, Fragment as Ee } from "react/jsx-runtime";
-import { VideoOff as Ie, User as je, MicOff as Be, Mic as Pe, ChevronDown as _e, FileText as pe, HardDrive as we, X as Oe, ArrowLeft as Ne, Search as Ve, FolderPlus as Fe, Upload as We, Folder as Ce, ChevronDownIcon as Re, ChevronRight as qe } from "lucide-react";
-import se, { useRef as X, useEffect as G, forwardRef as ce, useState as V, useCallback as ae, useMemo as ie, createContext as He, Component as Ue } from "react";
+import { clsx as Ie } from "clsx";
+import { jsxs as i, jsx as e, Fragment as Ee } from "react/jsx-runtime";
+import { VideoOff as je, User as Be, MicOff as Pe, Mic as _e, ChevronDown as Oe, FileText as pe, HardDrive as ke, X as Ve, ArrowLeft as we, Search as $e, FolderPlus as Fe, Upload as We, Folder as Ce, Pencil as Re, ChevronDownIcon as qe, ChevronRight as He } from "lucide-react";
+import se, { useRef as X, useEffect as G, forwardRef as ce, useState as V, useCallback as ne, useMemo as de, createContext as Ue, Component as Ge } from "react";
 function b(...t) {
-  return Ae(t);
-}
-function Gt(t) {
-  return (n, r) => t[n]?.[r] || "";
+  return Ie(t);
 }
 function Kt(t) {
-  return (n) => t[n] || "";
+  return (a, r) => t[a]?.[r] || "";
+}
+function Jt(t) {
+  return (a) => t[a] || "";
 }
-function Jt({ tiles: t, pinned: n, className: r }) {
-  if (n)
-    return /* @__PURE__ */ d("div", { className: b("flex flex-col md:flex-row gap-2 h-full", r), children: [
-      /* @__PURE__ */ e("div", { className: "flex-1 min-h-[240px]", children: n }),
+function Yt({ tiles: t, pinned: a, className: r }) {
+  if (a)
+    return /* @__PURE__ */ i("div", { className: b("flex flex-col md:flex-row gap-2 h-full", r), children: [
+      /* @__PURE__ */ e("div", { className: "flex-1 min-h-[240px]", children: a }),
       t.length > 0 && /* @__PURE__ */ e("div", { className: "flex md:flex-col gap-2 md:w-48 overflow-auto", children: t.map((s, c) => /* @__PURE__ */ e("div", { className: "min-w-[160px] md:min-w-0", children: s }, c)) })
     ] });
-  const a = t.length <= 1 ? "grid-cols-1" : t.length <= 4 ? "grid-cols-2" : t.length <= 9 ? "grid-cols-3" : "grid-cols-4";
-  return /* @__PURE__ */ e("div", { className: b("grid gap-2 h-full", a, r), children: t.map((s, c) => /* @__PURE__ */ e("div", { children: s }, c)) });
+  const n = t.length <= 1 ? "grid-cols-1" : t.length <= 4 ? "grid-cols-2" : t.length <= 9 ? "grid-cols-3" : "grid-cols-4";
+  return /* @__PURE__ */ e("div", { className: b("grid gap-2 h-full", n, r), children: t.map((s, c) => /* @__PURE__ */ e("div", { children: s }, c)) });
 }
-function Yt({
+function Zt({
   name: t,
-  avatarUrl: n,
+  avatarUrl: a,
   muted: r,
-  speaking: a,
+  speaking: n,
   hasVideo: s,
   videoSlot: c,
-  className: h
+  className: f
 }) {
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ i(
     "div",
     {
       className: b(
         "relative rounded-lg overflow-hidden bg-gray-800 aspect-video flex items-center justify-center",
-        a && "ring-2 ring-emerald-400",
-        h
+        n && "ring-2 ring-emerald-400",
+        f
       ),
       children: [
-        s && c ? /* @__PURE__ */ e("div", { className: "absolute inset-0", children: c }) : /* @__PURE__ */ e("div", { className: "flex flex-col items-center gap-2 text-gray-300", children: n ? /* @__PURE__ */ e("img", { src: n, alt: t, className: "w-16 h-16 rounded-full object-cover" }) : /* @__PURE__ */ e("div", { className: "w-16 h-16 rounded-full bg-gray-700 flex items-center justify-center", children: s ? /* @__PURE__ */ e(Ie, { className: "w-8 h-8" }) : /* @__PURE__ */ e(je, { className: "w-8 h-8" }) }) }),
-        /* @__PURE__ */ d("div", { className: "absolute bottom-2 left-2 flex items-center gap-1.5 px-2 py-1 rounded bg-black/50 text-white text-xs", children: [
-          r ? /* @__PURE__ */ e(Be, { className: "w-3 h-3" }) : /* @__PURE__ */ e(Pe, { className: "w-3 h-3" }),
+        s && c ? /* @__PURE__ */ e("div", { className: "absolute inset-0", children: c }) : /* @__PURE__ */ e("div", { className: "flex flex-col items-center gap-2 text-gray-300", children: a ? /* @__PURE__ */ e("img", { src: a, alt: t, className: "w-16 h-16 rounded-full object-cover" }) : /* @__PURE__ */ e("div", { className: "w-16 h-16 rounded-full bg-gray-700 flex items-center justify-center", children: s ? /* @__PURE__ */ e(je, { className: "w-8 h-8" }) : /* @__PURE__ */ e(Be, { className: "w-8 h-8" }) }) }),
+        /* @__PURE__ */ i("div", { className: "absolute bottom-2 left-2 flex items-center gap-1.5 px-2 py-1 rounded bg-black/50 text-white text-xs", children: [
+          r ? /* @__PURE__ */ e(Pe, { className: "w-3 h-3" }) : /* @__PURE__ */ e(_e, { className: "w-3 h-3" }),
           /* @__PURE__ */ e("span", { className: "truncate max-w-[140px]", children: t })
         ] })
       ]
     }
   );
 }
-function Zt({ attach: t, active: n = !0, mirrored: r = !1, className: a }) {
+function Xt({ attach: t, active: a = !0, mirrored: r = !1, className: n }) {
   const s = X(null);
   return G(() => {
-    if (!n || !s.current) return;
+    if (!a || !s.current) return;
     const c = t(s.current);
     return () => {
       typeof c == "function" && c(), s.current && (s.current.innerHTML = "");
     };
-  }, [t, n]), /* @__PURE__ */ e(
+  }, [t, a]), /* @__PURE__ */ e(
     "div",
     {
       ref: s,
       className: b(
         "w-full h-full bg-gray-900 overflow-hidden",
         r && "[&>*]:scale-x-[-1]",
-        a
+        n
       )
     }
   );
 }
-const Ge = {
+const Ke = {
   primary: "btn o__primary",
   secondary: "btn o__secondary",
   outline: "btn o__secondary",
   ghost: "btn o__tertiary",
   destructive: "btn o__destructive"
-}, Ke = {
+}, Je = {
   xs: "px-2 py-1 text-xs",
   sm: "px-3 py-1.5 text-sm",
   md: "px-4 py-2 text-sm",
   lg: "px-6 py-3 text-base",
   xl: "px-8 py-4 text-lg",
   full: "px-4 py-3 text-base"
-}, Je = {
+}, Ye = {
   xs: "p-1",
   sm: "p-1.5",
   md: "p-2",
@@ -90,19 +90,19 @@ const Ge = {
 }, ee = ce(
   ({
     variant: t = "primary",
-    size: n = "md",
+    size: a = "md",
     fullWidth: r = !1,
-    loading: a = !1,
+    loading: n = !1,
     leftIcon: s,
     rightIcon: c,
-    iconOnly: h = !1,
+    iconOnly: f = !1,
     className: g,
     children: p,
     disabled: y,
     ...u
   }, l) => {
-    const i = y || a;
-    return /* @__PURE__ */ d(
+    const d = y || n;
+    return /* @__PURE__ */ i(
       "button",
       {
         ref: l,
@@ -112,24 +112,24 @@ const Ge = {
           "inline-flex items-center justify-center transition-colors duration-200",
           "disabled:opacity-50 disabled:cursor-not-allowed",
           // Variant styles
-          Ge[t],
+          Ke[t],
           // Size styles
-          h ? Je[n] : Ke[n],
+          f ? Ye[a] : Je[a],
           // Full width
           r && "w-full",
           // Loading state
-          a && "cursor-wait",
+          n && "cursor-wait",
           g
         ),
-        disabled: i,
+        disabled: d,
         ...u,
         children: [
-          a && /* @__PURE__ */ d(
+          n && /* @__PURE__ */ i(
             "svg",
             {
               className: b(
                 "animate-spin",
-                h ? "h-4 w-4" : "h-4 w-4 mr-2"
+                f ? "h-4 w-4" : "h-4 w-4 mr-2"
               ),
               fill: "none",
               viewBox: "0 0 24 24",
@@ -156,21 +156,21 @@ const Ge = {
               ]
             }
           ),
-          !a && s && /* @__PURE__ */ e("span", { className: b("flex-shrink-0", !h && "mr-2"), children: s }),
-          !h && p,
-          !a && c && /* @__PURE__ */ e("span", { className: b("flex-shrink-0", !h && "ml-2"), children: c }),
-          h && !a && !s && !c && p
+          !n && s && /* @__PURE__ */ e("span", { className: b("flex-shrink-0", !f && "mr-2"), children: s }),
+          !f && p,
+          !n && c && /* @__PURE__ */ e("span", { className: b("flex-shrink-0", !f && "ml-2"), children: c }),
+          f && !n && !s && !c && p
         ]
       }
     );
   }
 );
 ee.displayName = "Button";
-const Xt = ({
+const Qt = ({
   children: t,
-  size: n = "md",
+  size: a = "md",
   orientation: r = "horizontal",
-  attached: a = !0,
+  attached: n = !0,
   className: s
 }) => {
   const c = b(
@@ -180,64 +180,64 @@ const Xt = ({
       "flex-row": r === "horizontal",
       "flex-col": r === "vertical",
       // Attached styling
-      "[&>*:not(:first-child):not(:last-child)]:rounded-none": a,
-      "[&>*:first-child]:rounded-r-none": a && r === "horizontal",
-      "[&>*:last-child]:rounded-l-none": a && r === "horizontal",
-      "[&>*:first-child]:rounded-b-none": a && r === "vertical",
-      "[&>*:last-child]:rounded-t-none": a && r === "vertical",
+      "[&>*:not(:first-child):not(:last-child)]:rounded-none": n,
+      "[&>*:first-child]:rounded-r-none": n && r === "horizontal",
+      "[&>*:last-child]:rounded-l-none": n && r === "horizontal",
+      "[&>*:first-child]:rounded-b-none": n && r === "vertical",
+      "[&>*:last-child]:rounded-t-none": n && r === "vertical",
       // Borders for attached buttons
-      "[&>*:not(:first-child)]:-ml-px": a && r === "horizontal",
-      "[&>*:not(:first-child)]:-mt-px": a && r === "vertical",
+      "[&>*:not(:first-child)]:-ml-px": n && r === "horizontal",
+      "[&>*:not(:first-child)]:-mt-px": n && r === "vertical",
       // Spacing for non-attached buttons
-      "gap-1": !a && n === "xs",
-      "gap-2": !a && (n === "sm" || n === "md"),
-      "gap-3": !a && (n === "lg" || n === "xl")
+      "gap-1": !n && a === "xs",
+      "gap-2": !n && (a === "sm" || a === "md"),
+      "gap-3": !n && (a === "lg" || a === "xl")
     },
     s
   );
   return /* @__PURE__ */ e("div", { className: c, role: "group", children: t });
-}, Qt = ({
+}, er = ({
   variant: t = "default",
-  size: n = "md",
+  size: a = "md",
   color: r = "primary",
-  disabled: a = !1,
+  disabled: n = !1,
   external: s = !1,
   className: c,
-  children: h,
+  children: f,
   href: g,
   target: p,
   rel: y,
   ...u
 }) => {
-  const l = s || g && (g.startsWith("http") || g.startsWith("mailto:")), i = b(
+  const l = s || g && (g.startsWith("http") || g.startsWith("mailto:")), d = b(
     // Base styles
     "inline-flex items-center gap-1 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2",
     // Size variants
     {
-      "text-xs": n === "xs",
-      "text-sm": n === "sm",
-      "text-base": n === "md",
-      "text-lg": n === "lg",
-      "text-xl": n === "xl"
+      "text-xs": a === "xs",
+      "text-sm": a === "sm",
+      "text-base": a === "md",
+      "text-lg": a === "lg",
+      "text-xl": a === "xl"
     },
     // Color variants
     {
       // Primary
-      "text-primary hover:text-primary/80 focus:ring-primary/20": r === "primary" && !a,
+      "text-primary hover:text-primary/80 focus:ring-primary/20": r === "primary" && !n,
       // Secondary
-      "text-secondary hover:text-secondary/80 focus:ring-secondary/20": r === "secondary" && !a,
+      "text-secondary hover:text-secondary/80 focus:ring-secondary/20": r === "secondary" && !n,
       // Accent
-      "text-accent hover:text-accent/80 focus:ring-accent/20": r === "accent" && !a,
+      "text-accent hover:text-accent/80 focus:ring-accent/20": r === "accent" && !n,
       // Success
-      "text-success hover:text-success/80 focus:ring-success/20": r === "success" && !a,
+      "text-success hover:text-success/80 focus:ring-success/20": r === "success" && !n,
       // Warning
-      "text-warning hover:text-warning/80 focus:ring-warning/20": r === "warning" && !a,
+      "text-warning hover:text-warning/80 focus:ring-warning/20": r === "warning" && !n,
       // Error
-      "text-error hover:text-error/80 focus:ring-error/20": r === "error" && !a,
+      "text-error hover:text-error/80 focus:ring-error/20": r === "error" && !n,
       // Info
-      "text-info hover:text-info/80 focus:ring-info/20": r === "info" && !a,
+      "text-info hover:text-info/80 focus:ring-info/20": r === "info" && !n,
       // Neutral
-      "text-neutral hover:text-neutral/80 focus:ring-neutral/20": r === "neutral" && !a
+      "text-neutral hover:text-neutral/80 focus:ring-neutral/20": r === "neutral" && !n
     },
     // Variant styles
     {
@@ -260,17 +260,17 @@ const Xt = ({
     },
     // Disabled state
     {
-      "opacity-50 cursor-not-allowed pointer-events-none": a
+      "opacity-50 cursor-not-allowed pointer-events-none": n
     },
     c
-  ), f = {
+  ), h = {
     ...u,
-    href: a ? void 0 : g,
+    href: n ? void 0 : g,
     target: l ? "_blank" : p,
     rel: l ? "noopener noreferrer" : y
   };
-  return /* @__PURE__ */ d("a", { className: i, ...f, children: [
-    h,
+  return /* @__PURE__ */ i("a", { className: d, ...h, children: [
+    f,
     l && /* @__PURE__ */ e(
       "svg",
       {
@@ -295,40 +295,40 @@ const Xt = ({
   primary: "btn o__primary",
   secondary: "btn o__secondary",
   outline: "btn o__secondary"
-}, Ye = {
+}, Ze = {
   sm: "px-3 py-1.5 text-sm",
   md: "px-4 py-2 text-sm"
 };
-function $e({
+function ze({
   label: t,
-  onClick: n,
+  onClick: a,
   variant: r = "primary",
-  size: a = "md",
+  size: n = "md",
   icon: s,
   options: c,
-  disabled: h = !1
+  disabled: f = !1
 }) {
-  const [g, p] = V(!1), y = X(null), u = ae(() => {
+  const [g, p] = V(!1), y = X(null), u = ne(() => {
     p((l) => !l);
   }, []);
   return G(() => {
-    const l = (i) => {
-      y.current && !y.current.contains(i.target) && p(!1);
+    const l = (d) => {
+      y.current && !y.current.contains(d.target) && p(!1);
     };
     return document.addEventListener("mousedown", l), () => document.removeEventListener("mousedown", l);
-  }, []), /* @__PURE__ */ d("div", { ref: y, className: "relative inline-flex items-center gap-px", children: [
-    /* @__PURE__ */ d(
+  }, []), /* @__PURE__ */ i("div", { ref: y, className: "relative inline-flex items-center gap-px", children: [
+    /* @__PURE__ */ i(
       "button",
       {
         type: "button",
-        onClick: n,
-        disabled: h,
+        onClick: a,
+        disabled: f,
         className: b(
           "inline-flex items-center justify-center font-medium transition-colors duration-200",
           "focus:outline-none focus:ring-1 focus:ring-offset-1",
           "disabled:opacity-50 disabled:cursor-not-allowed",
           Se[r],
-          Ye[a],
+          Ze[n],
           "!rounded-r-none"
         ),
         children: [
@@ -342,16 +342,16 @@ function $e({
       {
         type: "button",
         onClick: u,
-        disabled: h,
+        disabled: f,
         className: b(
           "inline-flex items-center justify-center font-medium transition-colors duration-200",
           "focus:outline-none focus:ring-1 focus:ring-offset-1",
           "disabled:opacity-50 disabled:cursor-not-allowed",
           Se[r],
-          a === "sm" ? "px-1.5 py-1.5" : "px-2 py-2",
+          n === "sm" ? "px-1.5 py-1.5" : "px-2 py-2",
           "!rounded-l-none"
         ),
-        children: /* @__PURE__ */ e(_e, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ e(Oe, { className: "h-4 w-4" })
       }
     ),
     g && c.length > 0 && /* @__PURE__ */ e("div", { className: "absolute right-0 top-full mt-1 z-50 min-w-[160px] rounded-lg border border-gray-200 bg-white shadow-lg py-1", children: c.map((l) => /* @__PURE__ */ e(
@@ -371,12 +371,12 @@ function $e({
     )) })
   ] });
 }
-const Ze = {
+const Xe = {
   sm: "h-4 w-4",
   md: "h-5 w-5",
   lg: "h-6 w-6",
   full: "h-6 w-6"
-}, Xe = {
+}, Qe = {
   sm: "text-sm",
   md: "text-sm",
   lg: "text-base",
@@ -384,21 +384,21 @@ const Ze = {
 }, ge = ce(
   ({
     label: t,
-    helperText: n,
+    helperText: a,
     error: r,
-    size: a = "md",
+    size: n = "md",
     indeterminate: s = !1,
     containerClassName: c,
-    labelClassName: h,
+    labelClassName: f,
     className: g,
     id: p,
     ...y
   }, u) => {
-    const l = p || `checkbox-${Math.random().toString(36).substr(2, 9)}`, i = !!r;
+    const l = p || `checkbox-${Math.random().toString(36).substr(2, 9)}`, d = !!r;
     return se.useEffect(() => {
       u && typeof u == "object" && u.current && (u.current.indeterminate = s);
-    }, [s, u]), /* @__PURE__ */ d("div", { className: b("flex flex-col", c), children: [
-      /* @__PURE__ */ d("div", { className: "flex items-start", children: [
+    }, [s, u]), /* @__PURE__ */ i("div", { className: b("flex flex-col", c), children: [
+      /* @__PURE__ */ i("div", { className: "flex items-start", children: [
         /* @__PURE__ */ e("div", { className: "flex items-center h-5", children: /* @__PURE__ */ e(
           "input",
           {
@@ -411,29 +411,29 @@ const Ze = {
               "focus:ring-2 focus:ring-offset-2 focus:outline-none",
               "disabled:opacity-50 disabled:cursor-not-allowed",
               // Size styles
-              Ze[a],
+              Xe[n],
               // State styles
-              i ? "border-error text-error focus:border-error focus:ring-error" : "border-gray-100 text-primary focus:border-primary focus:ring-primary dark:border-gray-600 dark:bg-secondary-800",
+              d ? "border-error text-error focus:border-error focus:ring-error" : "border-neutral text-primary focus:border-primary focus:ring-primary",
               g
             ),
             ...y
           }
         ) }),
-        t && /* @__PURE__ */ d("div", { className: "ml-3 flex-1", children: [
+        t && /* @__PURE__ */ i("div", { className: "ml-3 flex-1", children: [
           /* @__PURE__ */ e(
             "label",
             {
               htmlFor: l,
               className: b(
                 "font-medium cursor-pointer",
-                i ? "text-error" : "text-secondary-900 dark:text-secondary-100",
-                Xe[a],
-                h
+                d ? "text-error" : "text-default",
+                Qe[n],
+                f
               ),
               children: t
             }
           ),
-          n && !r && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-secondary-500 dark:text-secondary-400", children: n })
+          a && !r && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-muted", children: a })
         ] })
       ] }),
       r && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-error", children: r })
@@ -441,28 +441,28 @@ const Ze = {
   }
 );
 ge.displayName = "Checkbox";
-const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) }), et = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "m15 18-6-6 6-6" }) }), tt = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "m9 18 6-6-6-6" }) }), ye = ce(({
+const et = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) }), tt = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "m15 18-6-6 6-6" }) }), rt = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "m9 18 6-6-6-6" }) }), ye = ce(({
   value: t,
-  onChange: n,
+  onChange: a,
   placeholder: r = "Select date",
-  disabled: a = !1,
+  disabled: n = !1,
   required: s = !1,
   size: c = "md",
-  className: h,
+  className: f,
   minDate: g,
   maxDate: p,
   format: y = "MM/dd/yyyy"
 }, u) => {
-  const [l, i] = V(!1), [f, C] = V(() => t || /* @__PURE__ */ new Date()), N = X(null);
+  const [l, d] = V(!1), [h, C] = V(() => t || /* @__PURE__ */ new Date()), w = X(null);
   G(() => {
     const z = (v) => {
-      N.current && !N.current.contains(v.target) && i(!1);
+      w.current && !w.current.contains(v.target) && d(!1);
     };
     return l && document.addEventListener("mousedown", z), () => {
       document.removeEventListener("mousedown", z);
     };
   }, [l]);
-  const k = (z) => {
+  const N = (z) => {
     if (!z) return "";
     const v = z.getDate().toString().padStart(2, "0"), T = (z.getMonth() + 1).toString().padStart(2, "0"), m = z.getFullYear();
     switch (y) {
@@ -475,33 +475,33 @@ const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
         return `${T}/${v}/${m}`;
     }
   }, B = () => {
-    const z = f.getFullYear(), v = f.getMonth(), T = new Date(z, v, 1), m = new Date(T);
+    const z = h.getFullYear(), v = h.getMonth(), T = new Date(z, v, 1), m = new Date(T);
     m.setDate(m.getDate() - T.getDay());
     const $ = [], L = new Date(m);
     for (let D = 0; D < 42; D++)
       $.push(new Date(L)), L.setDate(L.getDate() + 1);
     return $;
   }, x = (z) => {
-    z.getMonth() === f.getMonth() && (g && z < g || p && z > p || (n?.(z), i(!1)));
+    z.getMonth() === h.getMonth() && (g && z < g || p && z > p || (a?.(z), d(!1)));
   }, q = () => {
-    C(new Date(f.getFullYear(), f.getMonth() - 1, 1));
+    C(new Date(h.getFullYear(), h.getMonth() - 1, 1));
   }, K = () => {
-    C(new Date(f.getFullYear(), f.getMonth() + 1, 1));
+    C(new Date(h.getFullYear(), h.getMonth() + 1, 1));
   }, H = () => {
-    n?.(null), i(!1);
+    a?.(null), d(!1);
   }, F = b(
-    "w-full border border-neutral-100 dark:border-neutral-600 rounded-md transition-colors duration-200",
-    "bg-white dark:bg-neutral-800 text-gray-700 dark:text-gray-300",
-    "placeholder:text-gray-800 dark:placeholder:text-gray-500",
+    "w-full border border-neutral rounded-md transition-colors duration-200",
+    "bg-module text-default",
+    "placeholder:text-default dark:placeholder:text-muted",
     "focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary",
-    "disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-neutral-50 dark:disabled:bg-neutral-900",
+    "disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-module-subtle",
     {
       "px-3 py-2 text-sm": c === "sm",
       "px-3 py-2 text-base": c === "md",
       "px-4 py-3 text-lg": c === "lg",
       "px-4 py-3 text-base": c === "full"
     },
-    h
+    f
   ), E = B(), J = [
     "January",
     "February",
@@ -516,19 +516,19 @@ const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
     "November",
     "December"
   ];
-  return /* @__PURE__ */ d("div", { ref: N, className: "relative", children: [
-    /* @__PURE__ */ d("div", { className: "relative", children: [
+  return /* @__PURE__ */ i("div", { ref: w, className: "relative", children: [
+    /* @__PURE__ */ i("div", { className: "relative", children: [
       /* @__PURE__ */ e(
         "input",
         {
           ref: u,
           type: "text",
-          value: k(t ?? null),
+          value: N(t ?? null),
           placeholder: r,
-          disabled: a,
+          disabled: n,
           required: s,
           readOnly: !0,
-          onClick: () => !a && i(!l),
+          onClick: () => !n && d(!l),
           className: b(F, "pr-10 cursor-pointer")
         }
       ),
@@ -536,40 +536,40 @@ const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
         "button",
         {
           type: "button",
-          onClick: () => !a && i(!l),
-          disabled: a,
-          className: "absolute inset-y-0 right-0 flex items-center pr-3 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300",
-          children: /* @__PURE__ */ e(Qe, {})
+          onClick: () => !n && d(!l),
+          disabled: n,
+          className: "absolute inset-y-0 right-0 flex items-center pr-3 text-muted hover:text-muted",
+          children: /* @__PURE__ */ e(et, {})
         }
       )
     ] }),
-    l && /* @__PURE__ */ d("div", { className: "absolute z-50 mt-1 bg-white dark:bg-neutral-800 border border-neutral-100 dark:border-neutral-600 rounded-md shadow-lg p-4 min-w-[280px]", children: [
-      /* @__PURE__ */ d("div", { className: "flex items-center justify-between mb-4", children: [
+    l && /* @__PURE__ */ i("div", { className: "absolute z-50 mt-1 bg-module border border-neutral rounded-md shadow-lg p-4 min-w-[280px]", children: [
+      /* @__PURE__ */ i("div", { className: "flex items-center justify-between mb-4", children: [
         /* @__PURE__ */ e(
           "button",
           {
             onClick: q,
-            className: "p-1 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded",
-            children: /* @__PURE__ */ e(et, {})
+            className: "p-1 hover:bg-neutral-container rounded",
+            children: /* @__PURE__ */ e(tt, {})
           }
         ),
-        /* @__PURE__ */ d("h3", { className: "text-sm font-medium text-neutral-900 dark:text-neutral-100", children: [
-          J[f.getMonth()],
+        /* @__PURE__ */ i("h3", { className: "text-sm font-medium text-default", children: [
+          J[h.getMonth()],
           " ",
-          f.getFullYear()
+          h.getFullYear()
         ] }),
         /* @__PURE__ */ e(
           "button",
           {
             onClick: K,
-            className: "p-1 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded",
-            children: /* @__PURE__ */ e(tt, {})
+            className: "p-1 hover:bg-neutral-container rounded",
+            children: /* @__PURE__ */ e(rt, {})
           }
         )
       ] }),
-      /* @__PURE__ */ e("div", { className: "grid grid-cols-7 gap-1 mb-2", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((z) => /* @__PURE__ */ e("div", { className: "text-xs font-medium text-neutral-500 dark:text-neutral-400 text-center py-1", children: z }, z)) }),
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-7 gap-1 mb-2", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((z) => /* @__PURE__ */ e("div", { className: "text-xs font-medium text-muted text-center py-1", children: z }, z)) }),
       /* @__PURE__ */ e("div", { className: "grid grid-cols-7 gap-1", children: E.map((z, v) => {
-        const T = z.getMonth() === f.getMonth(), m = t && z.toDateString() === t.toDateString(), $ = z.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), L = !T || g && z < g || p && z > p;
+        const T = z.getMonth() === h.getMonth(), m = t && z.toDateString() === t.toDateString(), $ = z.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), L = !T || g && z < g || p && z > p;
         return /* @__PURE__ */ e(
           "button",
           {
@@ -578,10 +578,10 @@ const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
             className: b(
               "w-8 h-8 text-sm rounded transition-colors duration-200",
               {
-                "text-neutral-900 dark:text-neutral-100 hover:bg-neutral-100 dark:hover:bg-neutral-700": T && !m && !L,
+                "text-default hover:bg-neutral-container": T && !m && !L,
                 "bg-primary text-white": m,
-                "bg-neutral-100 dark:bg-neutral-700 text-neutral-900 dark:text-neutral-100": $ && !m,
-                "text-neutral-300 dark:text-neutral-600 cursor-not-allowed": L
+                "bg-neutral-container text-default": $ && !m,
+                "text-muted cursor-not-allowed": L
               }
             ),
             children: z.getDate()
@@ -589,19 +589,19 @@ const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
           v
         );
       }) }),
-      /* @__PURE__ */ d("div", { className: "flex justify-between items-center mt-4 pt-3 border-t border-neutral-200 dark:border-neutral-700", children: [
+      /* @__PURE__ */ i("div", { className: "flex justify-between items-center mt-4 pt-3 border-t border-neutral", children: [
         /* @__PURE__ */ e(
           "button",
           {
             onClick: H,
-            className: "text-sm text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300",
+            className: "text-sm text-muted hover:text-default",
             children: "Clear"
           }
         ),
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: () => i(!1),
+            onClick: () => d(!1),
             className: "text-sm text-primary hover:text-primary/80",
             children: "Close"
           }
@@ -609,7 +609,7 @@ const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
       ] })
     ] })
   ] });
-}), de = (...t) => t.filter(Boolean).join(" "), rt = (t) => /* @__PURE__ */ e(
+}), ie = (...t) => t.filter(Boolean).join(" "), nt = (t) => /* @__PURE__ */ e(
   "svg",
   {
     ...t,
@@ -645,7 +645,7 @@ const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
       }
     )
   }
-), nt = {
+), lt = {
   sm: "px-3 py-1.5 text-sm",
   md: "px-3 py-2 text-sm",
   lg: "px-3 py-2 text-sm",
@@ -655,32 +655,32 @@ const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
   md: "h-5 w-5",
   lg: "h-6 w-6",
   full: "h-6 w-6"
-}, lt = ce(
+}, st = ce(
   ({
     label: t,
-    helperText: n,
+    helperText: a,
     error: r,
-    size: a = "md",
+    size: n = "md",
     fullWidth: s = !1,
-    startIcon: c = /* @__PURE__ */ e(rt, {}),
-    loading: h = !1,
+    startIcon: c = /* @__PURE__ */ e(nt, {}),
+    loading: f = !1,
     containerClassName: g,
     labelClassName: p,
     className: y,
     id: u,
     options: l,
-    onRemoteSearch: i,
-    onSelect: f,
+    onRemoteSearch: d,
+    onSelect: h,
     debounceTime: C = 500,
-    value: N,
-    onChange: k,
+    value: w,
+    onChange: N,
     ...B
   }, x) => {
-    const q = u || `searchfield-${Math.random().toString(36).substr(2, 9)}`, K = !!r, H = X(null), F = X(null), [E, J] = V(N || ""), [z, v] = V(!1), [T, m] = V(!1);
+    const q = u || `searchfield-${Math.random().toString(36).substr(2, 9)}`, K = !!r, H = X(null), F = X(null), [E, J] = V(w || ""), [z, v] = V(!1), [T, m] = V(!1);
     G(() => {
-      N !== void 0 && J(N);
-    }, [N]);
-    const $ = ie(() => {
+      w !== void 0 && J(w);
+    }, [w]);
+    const $ = de(() => {
       if (!E) return l;
       const W = String(E).toLowerCase();
       return l.filter(
@@ -688,14 +688,14 @@ const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
       );
     }, [E, l]);
     G(() => {
-      if (!i || !E) {
+      if (!d || !E) {
         m(!1);
         return;
       }
       const W = setTimeout(async () => {
         m(!0);
         try {
-          await i(String(E));
+          await d(String(E));
         } catch (S) {
           console.error("Remote search failed:", S);
         } finally {
@@ -705,7 +705,7 @@ const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
       return () => {
         clearTimeout(W), m(!1);
       };
-    }, [E, C, i]), G(() => {
+    }, [E, C, d]), G(() => {
       const W = (S) => {
         H.current && !H.current.contains(S.target) && v(!1);
       };
@@ -713,16 +713,16 @@ const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
     }, []);
     const L = (W) => {
       const S = W.target.value;
-      J(S), v(!0), k && k(W);
+      J(S), v(!0), N && N(W);
     }, D = (W) => {
-      J(W.label), v(!1), f && f(W.value);
+      J(W.label), v(!1), h && h(W.value);
     }, P = () => {
-      (l.length > 0 || i) && v(!0);
-    }, M = h || T, te = z && ($.length > 0 || M), ne = ie(() => x || F, [x]);
-    return /* @__PURE__ */ d(
+      (l.length > 0 || d) && v(!0);
+    }, M = f || T, te = z && ($.length > 0 || M), ae = de(() => x || F, [x]);
+    return /* @__PURE__ */ i(
       "div",
       {
-        className: de(
+        className: ie(
           "flex flex-col",
           s ? "w-full" : "",
           g || "",
@@ -734,48 +734,48 @@ const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
             "label",
             {
               htmlFor: q,
-              className: de(
+              className: ie(
                 "block text-sm font-medium mb-1",
-                K ? "text-red-500" : "text-gray-700 dark:text-gray-300",
+                K ? "text-error" : "text-default",
                 p || ""
               ),
               children: t
             }
           ),
-          /* @__PURE__ */ d("div", { className: "relative", children: [
-            c && /* @__PURE__ */ e("div", { className: "absolute left-0 pl-3 flex items-center pointer-events-none h-full", children: /* @__PURE__ */ e("span", { className: de("text-gray-400", xe[a]), children: c }) }),
+          /* @__PURE__ */ i("div", { className: "relative", children: [
+            c && /* @__PURE__ */ e("div", { className: "absolute left-0 pl-3 flex items-center pointer-events-none h-full", children: /* @__PURE__ */ e("span", { className: ie("text-muted", xe[n]), children: c }) }),
             /* @__PURE__ */ e(
               "input",
               {
-                ref: ne,
+                ref: ae,
                 id: q,
                 value: E,
                 onChange: L,
                 onFocus: P,
-                className: de(
+                className: ie(
                   // Base styles
-                  "block w-full rounded-lg border dark:border-gray-600 transition-colors duration-200",
-                  "placeholder-gray-500 dark:placeholder-gray-500 focus:outline-none",
+                  "block w-full rounded-lg border transition-colors duration-200",
+                  "placeholder:text-[var(--text-muted)] focus:outline-none",
                   "disabled:opacity-50 disabled:cursor-not-allowed",
                   // Size styles
-                  nt[a],
+                  lt[n],
                   // Icon padding
                   c ? "pl-10" : "",
                   "pr-10",
                   // Altijd padding rechts voor de dropdown/loading icon
                   // State styles
-                  K ? "border-red-500 text-red-500 focus:border-red-500 focus:ring-red-500" : "border-gray-300 text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100",
+                  K ? "border-red-500 text-error focus:border-red-500 focus:ring-red-500" : "border-neutral text-default",
                   y || ""
                 ),
                 ...B
               }
             ),
-            /* @__PURE__ */ e("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: M || h ? (
+            /* @__PURE__ */ e("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: M || f ? (
               // Loading Spinner
-              /* @__PURE__ */ d(
+              /* @__PURE__ */ i(
                 "svg",
                 {
-                  className: de("animate-spin text-blue-500", xe[a]),
+                  className: ie("animate-spin text-link", xe[n]),
                   xmlns: "http://www.w3.org/2000/svg",
                   fill: "none",
                   viewBox: "0 0 24 24",
@@ -807,9 +807,9 @@ const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
               /* @__PURE__ */ e(
                 at,
                 {
-                  className: de(
-                    "text-gray-400 cursor-pointer transition-transform",
-                    xe[a],
+                  className: ie(
+                    "text-muted cursor-pointer transition-transform",
+                    xe[n],
                     z ? "rotate-180" : "rotate-0"
                   ),
                   onClick: () => v((W) => !W)
@@ -820,32 +820,32 @@ const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
           te && /* @__PURE__ */ e(
             "ul",
             {
-              className: "absolute z-10 mt-1 w-full bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-60 overflow-auto top-full",
+              className: "absolute z-10 mt-1 w-full bg-module border border-neutral rounded-lg shadow-lg max-h-60 overflow-auto top-full",
               role: "listbox",
               children: $.length > 0 ? $.map((W) => /* @__PURE__ */ e(
                 "li",
                 {
-                  className: "px-4 py-2 cursor-pointer text-gray-900 dark:text-gray-100 hover:bg-blue-500 hover:text-white transition-colors",
+                  className: "px-4 py-2 cursor-pointer text-default hover:bg-accent-container hover:text-accent transition-colors",
                   onClick: () => D(W),
                   role: "option",
                   "aria-selected": E === W.label,
                   children: W.label
                 },
                 W.value
-              )) : /* @__PURE__ */ e("li", { className: "px-4 py-2 text-gray-500 dark:text-gray-400", children: M || h ? "Zoeken op afstand..." : "Geen resultaten gevonden." })
+              )) : /* @__PURE__ */ e("li", { className: "px-4 py-2 text-muted", children: M || f ? "Zoeken op afstand..." : "Geen resultaten gevonden." })
             }
           ),
-          (r || n) && /* @__PURE__ */ e(
+          (r || a) && /* @__PURE__ */ e(
             "p",
             {
-              className: de(
+              className: ie(
                 "mt-1 text-xs",
-                K ? "text-red-500" : "text-gray-500"
+                K ? "text-error" : "text-muted"
               ),
-              children: r || n
+              children: r || a
             }
           ),
-          i && /* @__PURE__ */ d("p", { className: "mt-2 text-xs text-green-600 dark:text-green-400", children: [
+          d && /* @__PURE__ */ i("p", { className: "mt-2 text-xs text-success dark:text-success", children: [
             "Huidige zoekterm (niet-gedebounced): ",
             String(E)
           ] })
@@ -854,8 +854,8 @@ const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
     );
   }
 );
-lt.displayName = "SearchableTextField";
-const st = {
+st.displayName = "SearchableTextField";
+const ot = {
   sm: "px-3 py-1.5 text-sm",
   md: "px-3 py-2 text-sm",
   lg: "px-3 py-2 text-sm",
@@ -863,22 +863,22 @@ const st = {
 }, me = (t) => t.trim().toLowerCase(), ve = ce(
   ({
     label: t,
-    helperText: n,
+    helperText: a,
     error: r,
-    size: a = "md",
+    size: n = "md",
     fullWidth: s = !1,
     options: c,
-    placeholder: h,
+    placeholder: f,
     containerClassName: g,
     labelClassName: p,
     className: y,
     id: u,
     searchable: l,
-    multiple: i,
-    value: f,
+    multiple: d,
+    value: h,
     onChange: C,
-    allowCreate: N,
-    onCreateOption: k,
+    allowCreate: w,
+    onCreateOption: N,
     ...B
   }, x) => {
     const q = u || `select-${Math.random().toString(36).substr(2, 9)}`, K = !!r, [H, F] = se.useState(!1), [E, J] = se.useState(""), z = se.useRef(null), [v, T] = se.useState(c);
@@ -908,33 +908,33 @@ const st = {
         const I = [...c];
         return S.forEach((O) => {
           !m(I, O.value) && !m(I, O.label) && I.push(O);
-        }), $(I, f);
+        }), $(I, h);
       });
-    }, [c, f, $, m]);
+    }, [c, h, $, m]);
     const L = (S) => {
-      if (i) {
-        const I = Array.isArray(f) ? f : [], O = I.includes(S) ? I.filter((A) => A !== S) : [...I, S];
+      if (d) {
+        const I = Array.isArray(h) ? h : [], O = I.includes(S) ? I.filter((A) => A !== S) : [...I, S];
         C?.(O);
       } else
         C?.(S), F(!1), J("");
-    }, D = i ? null : v.find((S) => S.value === f), P = i ? v.filter(
-      (S) => Array.isArray(f) && f.includes(S.value)
+    }, D = d ? null : v.find((S) => S.value === h), P = d ? v.filter(
+      (S) => Array.isArray(h) && h.includes(S.value)
     ) : [], M = l && E ? v.filter(
       (S) => S.label.toLowerCase().includes(E.toLowerCase())
-    ) : v, te = !!N && !!l && !!E.trim() && !m(v, E), ne = (S) => {
+    ) : v, te = !!w && !!l && !!E.trim() && !m(v, E), ae = (S) => {
       const I = S.trim();
       if (!I) return;
-      const O = k?.(I) ?? {
+      const O = N?.(I) ?? {
         value: I,
         label: I
       };
       if (m(v, O.value) || m(v, O.label)) {
-        L(O.value), J(""), i || F(!1);
+        L(O.value), J(""), d || F(!1);
         return;
       }
-      T((A) => [...A, O]), L(O.value), J(""), i || F(!1);
-    }, W = () => i ? P.length > 0 ? P.map((S) => S.label).join(", ") : h || "Select options" : D?.label || h || "Select an option";
-    return /* @__PURE__ */ d(
+      T((A) => [...A, O]), L(O.value), J(""), d || F(!1);
+    }, W = () => d ? P.length > 0 ? P.map((S) => S.label).join(", ") : f || "Select options" : D?.label || f || "Select an option";
+    return /* @__PURE__ */ i(
       "div",
       {
         ref: z,
@@ -952,13 +952,13 @@ const st = {
               onClick: () => F(!H),
               className: b(
                 "block text-sm font-medium mb-1",
-                K ? "text-error" : "text-secondary-700 dark:text-secondary-300",
+                K ? "text-error" : "text-default",
                 p
               ),
               children: t
             }
           ),
-          /* @__PURE__ */ d("div", { className: "relative", children: [
+          /* @__PURE__ */ i("div", { className: "relative", children: [
             /* @__PURE__ */ e(
               "button",
               {
@@ -969,15 +969,15 @@ const st = {
                   "block w-full rounded-lg border transition-colors duration-200 text-left",
                   "focus:outline-none focus:ring-0 focus:ring-offset-0",
                   "disabled:opacity-50 disabled:cursor-not-allowed",
-                  "bg-white dark:bg-secondary-800",
-                  st[a],
-                  K ? "border-error text-error focus:border-error focus:ring-error" : "border-neutral text-secondary-900 dark:border-neutral-700 dark:bg-secondary-800 dark:text-secondary-100",
+                  "bg-module",
+                  ot[n],
+                  K ? "border-error text-error focus:border-error focus:ring-error" : "border-neutral text-default",
                   y
                 ),
                 children: /* @__PURE__ */ e("span", { className: "block truncate", children: W() })
               }
             ),
-            H && /* @__PURE__ */ d("div", { className: "absolute z-10 mt-1 w-full rounded-md bg-white dark:bg-secondary-800 shadow-lg border border-neutral dark:border-neutral-700", children: [
+            H && /* @__PURE__ */ i("div", { className: "absolute z-10 mt-1 w-full rounded-md bg-module shadow-lg border border-neutral", children: [
               l && /* @__PURE__ */ e("div", { className: "p-2", children: /* @__PURE__ */ e(
                 "input",
                 {
@@ -986,22 +986,22 @@ const st = {
                   value: E,
                   onChange: (S) => J(S.target.value),
                   onKeyDown: (S) => {
-                    S.key === "Enter" && te && (S.preventDefault(), ne(E));
+                    S.key === "Enter" && te && (S.preventDefault(), ae(E));
                   },
                   className: b(
                     "w-full px-3 py-2 text-sm rounded-md border",
-                    "text-secondary-900 border-gray-100 dark:border-gray-600 focus:outline-none focus:ring-0"
+                    "text-default border-neutral focus:outline-none focus:ring-0"
                   )
                 }
               ) }),
-              te && /* @__PURE__ */ d(
+              te && /* @__PURE__ */ i(
                 "div",
                 {
                   className: b(
                     "px-4 py-2 text-sm cursor-pointer",
-                    "text-primary hover:bg-gray-100 dark:hover:bg-secondary-700"
+                    "text-primary hover:bg-neutral-container"
                   ),
-                  onClick: () => ne(E),
+                  onClick: () => ae(E),
                   children: [
                     "+: “",
                     E.trim(),
@@ -1009,37 +1009,37 @@ const st = {
                   ]
                 }
               ),
-              /* @__PURE__ */ d("ul", { className: "max-h-60 overflow-auto py-1", children: [
-                h && !i && /* @__PURE__ */ e(
+              /* @__PURE__ */ i("ul", { className: "max-h-60 overflow-auto py-1", children: [
+                f && !d && /* @__PURE__ */ e(
                   "li",
                   {
-                    className: "px-4 py-2 text-sm text-secondary-500 cursor-pointer hover:bg-gray-100 dark:hover:bg-secondary-700",
+                    className: "px-4 py-2 text-sm text-muted cursor-pointer hover:bg-neutral-container",
                     onClick: () => {
                       C?.(""), F(!1);
                     },
-                    children: h
+                    children: f
                   }
                 ),
                 M.map((S) => {
-                  const I = i ? Array.isArray(f) && f.includes(S.value) : f === S.value;
+                  const I = d ? Array.isArray(h) && h.includes(S.value) : h === S.value;
                   return /* @__PURE__ */ e(
                     "li",
                     {
                       onClick: () => !S.disabled && L(S.value),
                       className: b(
                         "px-4 py-2 text-sm cursor-pointer",
-                        "text-secondary-900 dark:text-secondary-100",
-                        S.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-gray-100 dark:hover:bg-secondary-700",
+                        "text-default",
+                        S.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-neutral-container",
                         I && "font-semibold"
                       ),
-                      children: /* @__PURE__ */ d("div", { className: "flex items-center", children: [
-                        i && /* @__PURE__ */ e(
+                      children: /* @__PURE__ */ i("div", { className: "flex items-center", children: [
+                        d && /* @__PURE__ */ e(
                           "input",
                           {
                             type: "checkbox",
                             checked: I,
                             readOnly: !0,
-                            className: "mr-3 h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
+                            className: "mr-3 h-4 w-4 rounded border-neutral text-primary focus:ring-primary"
                           }
                         ),
                         /* @__PURE__ */ e("span", { children: S.label })
@@ -1051,14 +1051,14 @@ const st = {
               ] })
             ] })
           ] }),
-          (r || n) && /* @__PURE__ */ e(
+          (r || a) && /* @__PURE__ */ e(
             "p",
             {
               className: b(
                 "mt-1 text-xs",
-                K ? "text-error" : "text-secondary-500"
+                K ? "text-error" : "text-muted"
               ),
-              children: r || n
+              children: r || a
             }
           )
         ]
@@ -1067,65 +1067,65 @@ const st = {
   }
 );
 ve.displayName = "Select";
-const ot = {
+const ct = {
   sm: "px-3 py-1.5 text-sm",
   md: "px-3 py-2 text-sm",
   lg: "px-4 py-3 text-base",
   full: "px-4 py-3 text-base"
-}, ke = ce(
+}, Ne = ce(
   ({
     label: t,
-    helperText: n,
+    helperText: a,
     error: r,
-    size: a = "md",
+    size: n = "md",
     fullWidth: s = !1,
     loading: c = !1,
-    containerClassName: h,
+    containerClassName: f,
     labelClassName: g,
     className: p,
     id: y,
     rows: u = 4,
     ...l
-  }, i) => {
-    const f = y || `textarea-${Math.random().toString(36).substr(2, 9)}`, C = !!r;
-    return /* @__PURE__ */ d("div", { className: b("flex flex-col", s && "w-full", h), children: [
+  }, d) => {
+    const h = y || `textarea-${Math.random().toString(36).substr(2, 9)}`, C = !!r;
+    return /* @__PURE__ */ i("div", { className: b("flex flex-col", s && "w-full", f), children: [
       t && /* @__PURE__ */ e(
         "label",
         {
-          htmlFor: f,
+          htmlFor: h,
           className: b(
             "block text-sm font-medium mb-1",
-            C ? "text-error" : "text-secondary-700 dark:text-secondary-300",
+            C ? "text-error" : "text-default",
             g
           ),
           children: t
         }
       ),
-      /* @__PURE__ */ d("div", { className: "relative", children: [
+      /* @__PURE__ */ i("div", { className: "relative", children: [
         /* @__PURE__ */ e(
           "textarea",
           {
-            ref: i,
-            id: f,
+            ref: d,
+            id: h,
             rows: u,
             className: b(
               // Base styles
               "block w-full rounded-lg border transition-colors duration-200 resize-vertical",
-              "placeholder-secondary-400 focus:outline-none focus:ring-0",
+              "placeholder:text-[var(--text-muted)] focus:outline-none focus:ring-0",
               "disabled:opacity-50 disabled:cursor-not-allowed",
               // Size styles
-              ot[a],
+              ct[n],
               // State styles
-              C ? "border-error text-error focus:border-error focus:ring-error" : "border-gray-100 text-secondary-900 dark:border-gray-600 dark:bg-secondary-800 dark:text-secondary-100",
+              C ? "border-error text-error focus:border-error focus:ring-error" : "border-neutral text-default",
               p
             ),
             ...l
           }
         ),
-        c && /* @__PURE__ */ e("div", { className: "absolute top-3 right-3", children: /* @__PURE__ */ d(
+        c && /* @__PURE__ */ e("div", { className: "absolute top-3 right-3", children: /* @__PURE__ */ i(
           "svg",
           {
-            className: "animate-spin h-4 w-4 text-secondary-400",
+            className: "animate-spin h-4 w-4 text-muted",
             fill: "none",
             viewBox: "0 0 24 24",
             children: [
@@ -1152,21 +1152,21 @@ const ot = {
           }
         ) })
       ] }),
-      (r || n) && /* @__PURE__ */ e(
+      (r || a) && /* @__PURE__ */ e(
         "p",
         {
           className: b(
             "mt-1 text-xs",
-            C ? "text-error" : "text-secondary-500"
+            C ? "text-error" : "text-muted"
           ),
-          children: r || n
+          children: r || a
         }
       )
     ] });
   }
 );
-ke.displayName = "TextArea";
-const ct = {
+Ne.displayName = "TextArea";
+const it = {
   sm: "px-3 py-1.5 text-sm",
   md: "px-3 py-2 text-sm",
   lg: "px-3 py-2 text-sm",
@@ -1179,62 +1179,62 @@ const ct = {
 }, ue = ce(
   ({
     label: t,
-    helperText: n,
+    helperText: a,
     error: r,
-    size: a = "md",
+    size: n = "md",
     fullWidth: s = !1,
     startIcon: c,
-    endIcon: h,
+    endIcon: f,
     loading: g = !1,
     containerClassName: p,
     labelClassName: y,
     className: u,
     id: l,
-    ...i
-  }, f) => {
-    const C = l || `textfield-${Math.random().toString(36).substr(2, 9)}`, N = !!r;
-    return /* @__PURE__ */ d("div", { className: b("flex flex-col", s && "w-full", p), children: [
+    ...d
+  }, h) => {
+    const C = l || `textfield-${Math.random().toString(36).substr(2, 9)}`, w = !!r;
+    return /* @__PURE__ */ i("div", { className: b("flex flex-col", s && "w-full", p), children: [
       t && /* @__PURE__ */ e(
         "label",
         {
           htmlFor: C,
           className: b(
             "block text-sm font-medium mb-1",
-            N ? "text-error" : "text-secondary-700 dark:text-secondary-300",
+            w ? "text-error" : "text-default",
             y
           ),
           children: t
         }
       ),
-      /* @__PURE__ */ d("div", { className: "relative", children: [
+      /* @__PURE__ */ i("div", { className: "relative", children: [
         c && // Todo fix inset not showing correctly on different sizes
-        /* @__PURE__ */ e("div", { className: "absolute left-0 pl-3 flex items-center pointer-events-none h-full", children: /* @__PURE__ */ e("span", { className: b("text-secondary-400", be[a]), children: c }) }),
+        /* @__PURE__ */ e("div", { className: "absolute left-0 pl-3 flex items-center pointer-events-none h-full", children: /* @__PURE__ */ e("span", { className: b("text-muted", be[n]), children: c }) }),
         /* @__PURE__ */ e(
           "input",
           {
-            ref: f,
+            ref: h,
             id: C,
             className: b(
               // Base styles
-              "block w-full rounded-lg border dark:border-gray-600 transition-colors duration-200",
-              "placeholder-gray-500 dark:placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-offset-0",
+              "block w-full rounded-lg border transition-colors duration-200",
+              "placeholder:text-[var(--text-muted)] focus:outline-none focus:ring-1 focus:ring-offset-0",
               "disabled:opacity-50 disabled:cursor-not-allowed",
               // Size styles
-              ct[a],
+              it[n],
               // Icon padding
               c && "pl-10",
-              h && "pr-10",
+              f && "pr-10",
               // State styles
-              N ? "border-error text-error focus:border-error focus:ring-error" : "border-gray-100 text-secondary-900 focus:border-primary focus:ring-primary dark:border-gray-600 dark:bg-secondary-800 dark:text-secondary-100",
+              w ? "border-error text-error focus:border-error focus:ring-error" : "border-neutral text-default focus:border-primary focus:ring-primary",
               u
             ),
-            ...i
+            ...d
           }
         ),
-        (h || g) && /* @__PURE__ */ e("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: g ? /* @__PURE__ */ d(
+        (f || g) && /* @__PURE__ */ e("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: g ? /* @__PURE__ */ i(
           "svg",
           {
-            className: b("animate-spin text-secondary-400", be[a]),
+            className: b("animate-spin text-muted", be[n]),
             fill: "none",
             viewBox: "0 0 24 24",
             children: [
@@ -1259,16 +1259,16 @@ const ct = {
               )
             ]
           }
-        ) : h && /* @__PURE__ */ e("span", { className: b("text-secondary-400", be[a]), children: h }) })
+        ) : f && /* @__PURE__ */ e("span", { className: b("text-muted", be[n]), children: f }) })
       ] }),
-      (r || n) && /* @__PURE__ */ e(
+      (r || a) && /* @__PURE__ */ e(
         "p",
         {
           className: b(
             "mt-1 text-xs",
-            N ? "text-error" : "text-secondary-500"
+            w ? "text-error" : "text-muted"
           ),
-          children: r || n
+          children: r || a
         }
       )
     ] });
@@ -1277,15 +1277,15 @@ const ct = {
 ue.displayName = "TextField";
 const oe = ({
   icon: t,
-  size: n = "md",
+  size: a = "md",
   color: r = "current",
-  clickable: a = !1,
+  clickable: n = !1,
   onClick: s,
   className: c,
-  "aria-label": h,
+  "aria-label": f,
   ...g
 }) => {
-  const p = typeof n == "number" ? n : dt(n), y = b(
+  const p = typeof a == "number" ? a : dt(a), y = b(
     "inline-block",
     // Color variants
     {
@@ -1301,18 +1301,18 @@ const oe = ({
     },
     // Clickable styles
     {
-      "cursor-pointer hover:opacity-80 transition-opacity duration-200": a,
-      "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary/20 rounded": a
+      "cursor-pointer hover:opacity-80 transition-opacity duration-200": n,
+      "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary/20 rounded": n
     },
     c
   ), u = {
     size: p,
     className: y,
-    onClick: a ? s : void 0,
-    "aria-label": h,
-    role: a ? "button" : void 0,
-    tabIndex: a ? 0 : void 0,
-    onKeyDown: a ? (l) => {
+    onClick: n ? s : void 0,
+    "aria-label": f,
+    role: n ? "button" : void 0,
+    tabIndex: n ? 0 : void 0,
+    onKeyDown: n ? (l) => {
       (l.key === "Enter" || l.key === " ") && (l.preventDefault(), s?.());
     } : void 0,
     ...g
@@ -1328,21 +1328,21 @@ function dt(t) {
     xl: 32
   }[t];
 }
-function it({
+function ut({
   children: t,
-  showTableSkeleton: n = !1,
+  showTableSkeleton: a = !1,
   tableColumns: r = 6,
-  tableRows: a = 8
+  tableRows: n = 8
 }) {
-  return t ? /* @__PURE__ */ e("main", { className: "flex-1 bg-module p-6", children: /* @__PURE__ */ e("div", { className: "w-full max-w-6xl mx-auto animate-pulse", children: t }) }) : /* @__PURE__ */ e("main", { className: "flex-1 bg-module p-6", children: /* @__PURE__ */ d("div", { className: "w-full mx-auto space-y-6 animate-pulse", children: [
-    !n && /* @__PURE__ */ d(Ee, { children: [
+  return t ? /* @__PURE__ */ e("main", { className: "flex-1 bg-module p-6", children: /* @__PURE__ */ e("div", { className: "w-full max-w-6xl mx-auto animate-pulse", children: t }) }) : /* @__PURE__ */ e("main", { className: "flex-1 bg-module p-6", children: /* @__PURE__ */ i("div", { className: "w-full mx-auto space-y-6 animate-pulse", children: [
+    !a && /* @__PURE__ */ i(Ee, { children: [
       /* @__PURE__ */ e("div", { className: "h-6 bg-neutral-container-emphasis rounded w-1/4" }),
-      /* @__PURE__ */ d("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ i("div", { className: "space-y-2", children: [
         /* @__PURE__ */ e("div", { className: "h-4 bg-neutral-container-emphasis rounded w-3/4" }),
         /* @__PURE__ */ e("div", { className: "h-4 bg-neutral-container-emphasis rounded w-1/2" })
       ] })
     ] }),
-    n && /* @__PURE__ */ d("div", { className: "rounded-lg overflow-hidden", children: [
+    a && /* @__PURE__ */ i("div", { className: "rounded-lg overflow-hidden", children: [
       /* @__PURE__ */ e("div", { className: `grid grid-cols-${r} gap-2 bg-neutral-container p-3`, children: Array.from({ length: r }).map((s, c) => /* @__PURE__ */ e(
         "div",
         {
@@ -1350,11 +1350,11 @@ function it({
         },
         `header-${c}`
       )) }),
-      Array.from({ length: a }).map((s, c) => /* @__PURE__ */ e(
+      Array.from({ length: n }).map((s, c) => /* @__PURE__ */ e(
         "div",
         {
           className: `grid grid-cols-${r} gap-2 p-3 border-t border-neutral`,
-          children: Array.from({ length: r }).map((h, g) => /* @__PURE__ */ e(
+          children: Array.from({ length: r }).map((f, g) => /* @__PURE__ */ e(
             "div",
             {
               className: "h-4 bg-neutral-container-emphasis rounded w-full"
@@ -1367,35 +1367,35 @@ function it({
     ] })
   ] }) });
 }
-const ut = ({
+const mt = ({
   trigger: t,
-  options: n,
+  options: a,
   value: r,
-  onSelect: a,
+  onSelect: n,
   placement: s = "bottom-start",
   disabled: c = !1,
-  className: h,
+  className: f,
   showCheck: g = !0,
   header: p
 }) => {
-  const [y, u] = V(!1), [l, i] = V(null), [f, C] = V({ top: 0, left: 0 }), N = X(null), k = X(null), B = X(null), x = X(null);
+  const [y, u] = V(!1), [l, d] = V(null), [h, C] = V({ top: 0, left: 0 }), w = X(null), N = X(null), B = X(null), x = X(null);
   G(() => {
     const v = (T) => {
-      N.current && (!N.current.contains(T.target) || B.current && !B.current.contains(T.target)) && (u(!1), i(null), x.current && (clearTimeout(x.current), x.current = null));
+      w.current && (!w.current.contains(T.target) || B.current && !B.current.contains(T.target)) && (u(!1), d(null), x.current && (clearTimeout(x.current), x.current = null));
     };
     return y && document.addEventListener("mousedown", v), () => {
       document.removeEventListener("mousedown", v);
     };
   }, [y]), G(() => {
     const v = (T) => {
-      T.key === "Escape" && (u(!1), i(null), x.current && (clearTimeout(x.current), x.current = null));
+      T.key === "Escape" && (u(!1), d(null), x.current && (clearTimeout(x.current), x.current = null));
     };
     return y && document.addEventListener("keydown", v), () => {
       document.removeEventListener("keydown", v);
     };
   }, [y]), G(() => {
-    if (l && N.current) {
-      const v = N.current.querySelector(
+    if (l && w.current) {
+      const v = w.current.querySelector(
         `[data-option-value="${l}"]`
       );
       if (v) {
@@ -1410,19 +1410,19 @@ const ut = ({
     x.current && clearTimeout(x.current);
   }, []);
   const q = (v) => {
-    v.stopPropagation(), c || (u(!y), i(null), x.current && (clearTimeout(x.current), x.current = null));
+    v.stopPropagation(), c || (u(!y), d(null), x.current && (clearTimeout(x.current), x.current = null));
   }, K = (v, T, m) => {
-    v.stopPropagation(), !T.disabled && !T.divider && (!T.children || T.children.length === 0) && (a?.(T.value, m), u(!1), i(null));
+    v.stopPropagation(), !T.disabled && !T.divider && (!T.children || T.children.length === 0) && (n?.(T.value, m), u(!1), d(null));
   }, H = (v) => {
-    x.current && (clearTimeout(x.current), x.current = null), v.children && v.children.length > 0 ? i(v.value) : i(null);
+    x.current && (clearTimeout(x.current), x.current = null), v.children && v.children.length > 0 ? d(v.value) : d(null);
   }, F = (v) => {
     v.children && v.children.length > 0 ? x.current = setTimeout(() => {
-      i(null);
-    }, 150) : i(null);
+      d(null);
+    }, 150) : d(null);
   }, E = (v, T, m) => {
-    v.stopPropagation(), !T.disabled && !T.divider && (a?.(T.value, m), u(!1), i(null));
+    v.stopPropagation(), !T.disabled && !T.divider && (n?.(T.value, m), u(!1), d(null));
   }, J = b(
-    "absolute z-50 min-w-[200px] bg-white dark:bg-gray-800 rounded-md shadow-xs border border-gray-100 dark:border-gray-600",
+    "absolute z-50 min-w-[200px] bg-module rounded-md shadow-xs border border-neutral",
     "max-h-60 overflow-auto",
     {
       "top-full left-0 mt-2": s === "bottom-start",
@@ -1431,22 +1431,22 @@ const ut = ({
       "bottom-full right-0 mb-2": s === "top-end"
     }
   ), z = b(
-    "fixed z-[60] min-w-[200px] bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-100 dark:border-gray-600",
+    "fixed z-[60] min-w-[200px] bg-module rounded-md shadow-lg border border-neutral",
     "max-h-60 overflow-auto"
   );
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ i(
     "div",
     {
-      ref: N,
+      ref: w,
       className: b(
-        "relative flex flex-row items-center justify-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700",
-        h
+        "relative flex flex-row items-center justify-center rounded-lg hover:bg-neutral-container",
+        f
       ),
       children: [
         /* @__PURE__ */ e(
           "button",
           {
-            ref: k,
+            ref: N,
             onClick: q,
             disabled: c,
             className: b("inline-flex items-center justify-center", {
@@ -1455,20 +1455,20 @@ const ut = ({
             children: t
           }
         ),
-        y && /* @__PURE__ */ e("div", { className: J, children: /* @__PURE__ */ d("div", { className: "p-2", children: [
-          p && (typeof p == "string" ? /* @__PURE__ */ e("div", { className: "text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider px-3 py-2", children: p }) : p),
-          n.map((v, T) => {
+        y && /* @__PURE__ */ e("div", { className: J, children: /* @__PURE__ */ i("div", { className: "p-2", children: [
+          p && (typeof p == "string" ? /* @__PURE__ */ e("div", { className: "text-xs font-medium text-muted uppercase tracking-wider px-3 py-2", children: p }) : p),
+          a.map((v, T) => {
             if (v.divider)
               return /* @__PURE__ */ e(
                 "div",
                 {
-                  className: "border-t border-gray-200 dark:border-gray-700 my-2"
+                  className: "border-t border-neutral my-2"
                 },
                 `divider-${T}`
               );
             const m = v.children && v.children.length > 0, $ = l === v.value;
-            return /* @__PURE__ */ d("div", { className: "relative group", children: [
-              /* @__PURE__ */ d(
+            return /* @__PURE__ */ i("div", { className: "relative group", children: [
+              /* @__PURE__ */ i(
                 "button",
                 {
                   "data-option-value": v.value,
@@ -1477,23 +1477,23 @@ const ut = ({
                   onMouseLeave: () => F(v),
                   disabled: v.disabled,
                   className: b(
-                    "w-full flex items-center justify-between px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors",
+                    "w-full flex items-center justify-between px-3 py-2 text-sm text-default hover:bg-neutral-container rounded-md transition-colors",
                     {
                       "opacity-50 cursor-not-allowed": v.disabled,
-                      "bg-gray-100 dark:bg-gray-700": $ && m
+                      "bg-neutral-container": $ && m
                     }
                   ),
                   children: [
-                    /* @__PURE__ */ d("div", { className: "flex items-center space-x-2 min-w-0", children: [
+                    /* @__PURE__ */ i("div", { className: "flex items-center space-x-2 min-w-0", children: [
                       v.icon && /* @__PURE__ */ e("span", { className: "flex-shrink-0", children: v.icon }),
-                      /* @__PURE__ */ d("div", { className: "flex flex-col items-start min-w-0", children: [
+                      /* @__PURE__ */ i("div", { className: "flex flex-col items-start min-w-0", children: [
                         /* @__PURE__ */ e("span", { className: "font-base truncate", children: v.label }),
-                        v.description && /* @__PURE__ */ e("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: v.description })
+                        v.description && /* @__PURE__ */ e("span", { className: "text-xs text-muted", children: v.description })
                       ] })
                     ] }),
-                    /* @__PURE__ */ d("div", { className: "flex items-center space-x-2", children: [
-                      g && r === v.value && /* @__PURE__ */ e("span", { className: "h-4 w-4 text-green-600 flex-shrink-0 text-sm font-bold", children: "✓" }),
-                      m && /* @__PURE__ */ e("span", { className: "text-gray-400 dark:text-gray-500 text-xs", children: "▶" })
+                    /* @__PURE__ */ i("div", { className: "flex items-center space-x-2", children: [
+                      g && r === v.value && /* @__PURE__ */ e("span", { className: "h-4 w-4 text-success flex-shrink-0 text-sm font-bold", children: "✓" }),
+                      m && /* @__PURE__ */ e("span", { className: "text-muted text-xs", children: "▶" })
                     ] })
                   ]
                 }
@@ -1504,15 +1504,15 @@ const ut = ({
                   ref: B,
                   className: z,
                   style: {
-                    top: `${f.top}px`,
-                    left: `${f.left}px`
+                    top: `${h.top}px`,
+                    left: `${h.left}px`
                   },
                   onMouseEnter: () => {
-                    x.current && (clearTimeout(x.current), x.current = null), i(v.value);
+                    x.current && (clearTimeout(x.current), x.current = null), d(v.value);
                   },
                   onMouseLeave: () => {
                     x.current = setTimeout(() => {
-                      i(null);
+                      d(null);
                     }, 150);
                   },
                   children: /* @__PURE__ */ e("div", { className: "p-2", children: v.children.map((L, D) => {
@@ -1520,14 +1520,14 @@ const ut = ({
                       return /* @__PURE__ */ e(
                         "div",
                         {
-                          className: "border-t border-gray-200 dark:border-gray-700 my-2"
+                          className: "border-t border-neutral my-2"
                         },
                         `divider-${D}`
                       );
                     const P = typeof r == "object" && r[v.value] && r[v.value].includes(
                       L.value
                     ) || r === L.value;
-                    return /* @__PURE__ */ d(
+                    return /* @__PURE__ */ i(
                       "button",
                       {
                         onClick: (M) => E(
@@ -1537,20 +1537,20 @@ const ut = ({
                         ),
                         disabled: L.disabled,
                         className: b(
-                          "w-full flex items-center justify-between px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors",
+                          "w-full flex items-center justify-between px-3 py-2 text-sm text-default hover:bg-neutral-container rounded-md transition-colors",
                           {
                             "opacity-50 cursor-not-allowed": L.disabled
                           }
                         ),
                         children: [
-                          /* @__PURE__ */ d("div", { className: "flex items-center space-x-2 min-w-0", children: [
+                          /* @__PURE__ */ i("div", { className: "flex items-center space-x-2 min-w-0", children: [
                             L.icon && /* @__PURE__ */ e("span", { className: "flex-shrink-0", children: L.icon }),
-                            /* @__PURE__ */ d("div", { className: "flex flex-col items-start min-w-0", children: [
+                            /* @__PURE__ */ i("div", { className: "flex flex-col items-start min-w-0", children: [
                               /* @__PURE__ */ e("span", { className: "font-base truncate", children: L.label }),
-                              L.description && /* @__PURE__ */ e("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: L.description })
+                              L.description && /* @__PURE__ */ e("span", { className: "text-xs text-muted", children: L.description })
                             ] })
                           ] }),
-                          g && P && /* @__PURE__ */ e("span", { className: "h-4 w-4 text-green-600 flex-shrink-0 text-sm font-bold", children: "✓" })
+                          g && P && /* @__PURE__ */ e("span", { className: "h-4 w-4 text-success flex-shrink-0 text-sm font-bold", children: "✓" })
                         ]
                       },
                       L.value
@@ -1561,12 +1561,12 @@ const ut = ({
             ] }, v.value);
           }),
           (() => {
-            const v = n.reduce((T, m) => {
+            const v = a.reduce((T, m) => {
               if (m.divider) return T;
               const $ = m.children ? m.children.filter((L) => !L.divider).length : 0;
               return T + 1 + $;
             }, 0);
-            return v > 1 && /* @__PURE__ */ e("div", { className: "border-t border-gray-200 dark:border-gray-600 mt-2 pt-2", children: /* @__PURE__ */ d("div", { className: "text-xs text-gray-500 dark:text-gray-400 px-3 py-1", children: [
+            return v > 1 && /* @__PURE__ */ e("div", { className: "border-t border-neutral mt-2 pt-2", children: /* @__PURE__ */ i("div", { className: "text-xs text-muted px-3 py-1", children: [
               v,
               " options available"
             ] }) });
@@ -1575,7 +1575,7 @@ const ut = ({
       ]
     }
   );
-}, mt = () => /* @__PURE__ */ e(
+}, ft = () => /* @__PURE__ */ e(
   "svg",
   {
     className: "h-4 w-4",
@@ -1597,7 +1597,7 @@ const ut = ({
   {
     className: b(
       "h-3 w-3",
-      t ? "text-neutral-900 dark:text-neutral-100" : "text-neutral-400"
+      t ? "text-default" : "text-muted"
     ),
     fill: "none",
     stroke: "currentColor",
@@ -1612,12 +1612,12 @@ const ut = ({
       }
     )
   }
-), ft = ({ active: t }) => /* @__PURE__ */ e(
+), pt = ({ active: t }) => /* @__PURE__ */ e(
   "svg",
   {
     className: b(
       "h-3 w-3",
-      t ? "text-neutral-900 dark:text-neutral-100" : "text-neutral-400"
+      t ? "text-default" : "text-muted"
     ),
     fill: "none",
     stroke: "currentColor",
@@ -1632,7 +1632,7 @@ const ut = ({
       }
     )
   }
-), pt = () => /* @__PURE__ */ e(
+), xt = () => /* @__PURE__ */ e(
   "svg",
   {
     className: "h-4 w-4",
@@ -1649,7 +1649,7 @@ const ut = ({
       }
     )
   }
-), xt = () => /* @__PURE__ */ e(
+), bt = () => /* @__PURE__ */ e(
   "svg",
   {
     className: "h-4 w-4",
@@ -1666,7 +1666,7 @@ const ut = ({
       }
     )
   }
-), bt = () => /* @__PURE__ */ e(
+), gt = () => /* @__PURE__ */ e(
   "svg",
   {
     className: "h-4 w-4",
@@ -1683,7 +1683,7 @@ const ut = ({
       }
     )
   }
-), gt = () => /* @__PURE__ */ e(
+), yt = () => /* @__PURE__ */ e(
   "svg",
   {
     className: "h-4 w-4",
@@ -1700,7 +1700,7 @@ const ut = ({
       }
     )
   }
-), ze = () => /* @__PURE__ */ e(
+), De = () => /* @__PURE__ */ e(
   "svg",
   {
     className: "h-4 w-4",
@@ -1717,42 +1717,42 @@ const ut = ({
       }
     )
   }
-), yt = (t) => {
-  const n = (a) => t.multiSelect && Array.isArray(t.value) ? t.value?.includes(a) : t.value === a, r = (a) => {
-    t.multiSelect && Array.isArray(t.value) ? t.onChange(t.value.filter((s) => s !== a)) : t.onChange(a);
+), vt = (t) => {
+  const a = (n) => t.multiSelect && Array.isArray(t.value) ? t.value?.includes(n) : t.value === n, r = (n) => {
+    t.multiSelect && Array.isArray(t.value) ? t.onChange(t.value.filter((s) => s !== n)) : t.onChange(n);
   };
   return t.type === "date" ? /* @__PURE__ */ e("div", { className: "flex items-center space-x-1 max-w-[160px]", children: /* @__PURE__ */ e(
     ye,
     {
       size: "sm",
       value: t.value,
-      onChange: (a) => t.onChange(a),
+      onChange: (n) => t.onChange(n),
       placeholder: t.placeholder || `Select ${t.label.toLowerCase()}`,
       className: "min-w-[160px] btn btn o__secondary"
     }
-  ) }) : /* @__PURE__ */ e("div", { className: "flex items-center space-x-1 max-w-[240px]", children: /* @__PURE__ */ e("div", { className: "relative", children: /* @__PURE__ */ d("details", { className: "group", children: [
-    /* @__PURE__ */ d("summary", { className: "flex items-center space-x-2 cursor-pointer rounded-full px-3 py-2 text-sm btn btn o__secondary", children: [
+  ) }) : /* @__PURE__ */ e("div", { className: "flex items-center space-x-1 max-w-[240px]", children: /* @__PURE__ */ e("div", { className: "relative", children: /* @__PURE__ */ i("details", { className: "group", children: [
+    /* @__PURE__ */ i("summary", { className: "flex items-center space-x-2 cursor-pointer rounded-full px-3 py-2 text-sm btn btn o__secondary", children: [
       /* @__PURE__ */ e("span", { children: t.label }),
       /* @__PURE__ */ e("span", { className: "text-default", children: t.multiSelect && Array.isArray(t.value) ? t.value?.map(
-        (a) => t.options?.find((s) => s.value === a)?.label
-      ).join(", ") : t.options?.find((a) => a.value === t.value)?.label }),
-      /* @__PURE__ */ e("span", { className: "text-muted text-sm group-open:rotate-180 transition-transform", children: /* @__PURE__ */ e(ze, {}) })
+        (n) => t.options?.find((s) => s.value === n)?.label
+      ).join(", ") : t.options?.find((n) => n.value === t.value)?.label }),
+      /* @__PURE__ */ e("span", { className: "text-muted text-sm group-open:rotate-180 transition-transform", children: /* @__PURE__ */ e(De, {}) })
     ] }),
-    /* @__PURE__ */ d("div", { className: "absolute z-10 left-0 mt-1 bg-module border border-neutral rounded-lg shadow-lvl-0 p-2 w-48", children: [
-      t.options?.map((a) => /* @__PURE__ */ e(
+    /* @__PURE__ */ i("div", { className: "absolute z-10 left-0 mt-1 bg-module border border-neutral rounded-lg shadow-lvl-0 p-2 w-48", children: [
+      t.options?.map((n) => /* @__PURE__ */ e(
         "button",
         {
           className: "w-full text-left px-3 py-2 rounded-md hover:bg-module-subtle text-sm text-default flex items-center space-x-2",
-          onClick: () => r(a.value),
+          onClick: () => r(n.value),
           children: /* @__PURE__ */ e(
             "span",
             {
-              className: b(n(a.value) && "text-primary-500"),
-              children: a.label
+              className: b(a(n.value) && "text-primary-500"),
+              children: n.label
             }
           )
         },
-        a.value
+        n.value
       )),
       t.value && /* @__PURE__ */ e(
         "button",
@@ -1766,22 +1766,22 @@ const ut = ({
   ] }) }) });
 }, Le = ({
   data: t,
-  columns: n,
+  columns: a,
   loading: r = !1,
-  searchable: a = !1,
+  searchable: n = !1,
   searchPlaceholder: s = "Search...",
   filters: c = [],
-  paginated: h = !1,
+  paginated: f = !1,
   pageSizeOptions: g = [10, 25, 50, 100],
   defaultPageSize: p = 10,
   actions: y = [],
   onRowClick: u,
   selectable: l = !1,
-  selectedRows: i = [],
-  onSelectionChange: f,
+  selectedRows: d = [],
+  onSelectionChange: h,
   getRowKey: C = (H, F) => F,
-  emptyContent: N,
-  hoverable: k = !0,
+  emptyContent: w,
+  hoverable: N = !0,
   bordered: B = !1,
   striped: x = !1,
   className: q,
@@ -1793,60 +1793,60 @@ const ut = ({
   }), [z, v] = V({
     page: 0,
     pageSize: p
-  }), T = X(null), m = ie(() => {
+  }), T = X(null), m = de(() => {
     let o = t;
-    if (a && H.trim()) {
-      const w = n.filter(
+    if (n && H.trim()) {
+      const k = a.filter(
         (R) => R.searchable !== !1
       ), _ = H.toLowerCase();
-      o = o.filter((R) => w.some((j) => {
+      o = o.filter((R) => k.some((j) => {
         const Y = typeof j.accessor == "function" ? j.accessor(R) : R[j.accessor];
         return String(Y || "").toLowerCase().includes(_);
       }));
     }
-    return c.forEach((w) => {
-      w.value && w.value !== "all" && (o = o.filter((_) => {
-        const R = n.find((Y) => Y.id === w.id);
+    return c.forEach((k) => {
+      k.value && k.value !== "all" && (o = o.filter((_) => {
+        const R = a.find((Y) => Y.id === k.id);
         if (!R) return !0;
         const j = typeof R.accessor == "function" ? R.accessor(_) : _[R.accessor];
-        return String(j || "") === w.value;
+        return String(j || "") === k.value;
       }));
     }), o;
-  }, [t, H, n, a, c]), $ = ie(() => {
+  }, [t, H, a, n, c]), $ = de(() => {
     if (!E.column || !E.direction) return m;
-    const o = n.find((w) => w.id === E.column);
-    return o ? [...m].sort((w, _) => {
-      const R = typeof o.accessor == "function" ? o.accessor(w) : w[o.accessor], j = typeof o.accessor == "function" ? o.accessor(_) : _[o.accessor];
+    const o = a.find((k) => k.id === E.column);
+    return o ? [...m].sort((k, _) => {
+      const R = typeof o.accessor == "function" ? o.accessor(k) : k[o.accessor], j = typeof o.accessor == "function" ? o.accessor(_) : _[o.accessor];
       let Y = 0;
       return R < j ? Y = -1 : R > j && (Y = 1), E.direction === "desc" ? -Y : Y;
     }) : m;
-  }, [m, E, n]), L = ie(() => {
-    if (!h) return $;
-    const o = z.page * z.pageSize, w = o + z.pageSize;
-    return $.slice(o, w);
-  }, [$, z, h]), D = ae(
+  }, [m, E, a]), L = de(() => {
+    if (!f) return $;
+    const o = z.page * z.pageSize, k = o + z.pageSize;
+    return $.slice(o, k);
+  }, [$, z, f]), D = ne(
     (o) => {
-      n.find((_) => _.id === o)?.sortable && J((_) => _.column !== o ? { column: o, direction: "asc" } : _.direction === "asc" ? { column: o, direction: "desc" } : { column: null, direction: null });
+      a.find((_) => _.id === o)?.sortable && J((_) => _.column !== o ? { column: o, direction: "asc" } : _.direction === "asc" ? { column: o, direction: "desc" } : { column: null, direction: null });
     },
-    [n]
-  ), P = ae((o) => {
-    v((w) => ({ ...w, page: o }));
-  }, []), M = ae((o) => {
+    [a]
+  ), P = ne((o) => {
+    v((k) => ({ ...k, page: o }));
+  }, []), M = ne((o) => {
     v({ page: 0, pageSize: o });
-  }, []), te = ae(
-    (o, w) => {
-      if (!f) return;
+  }, []), te = ne(
+    (o, k) => {
+      if (!h) return;
       const _ = C(o, 0);
-      i.map((R, j) => C(R, j)), f(w ? [...i, o] : i.filter(
-        (R, j) => C(i[j], j) !== _
+      d.map((R, j) => C(R, j)), h(k ? [...d, o] : d.filter(
+        (R, j) => C(d[j], j) !== _
       ));
     },
-    [i, f, C]
-  ), ne = ae(
+    [d, h, C]
+  ), ae = ne(
     (o) => {
-      f && f(o ? [...L] : []);
+      h && h(o ? [...L] : []);
     },
-    [L, f]
+    [L, h]
   );
   G(() => {
     v((o) => ({ ...o, page: 0 }));
@@ -1854,49 +1854,49 @@ const ut = ({
     v((o) => ({ ...o, page: 0 }));
   }, [c.map((o) => o.value).join(",")]);
   const W = $.length, S = Math.ceil(W / z.pageSize), I = z.page * z.pageSize + 1, O = Math.min(I + z.pageSize - 1, W), A = L.length > 0 && L.every((o) => {
-    const w = C(o, 0);
-    return i.some(
-      (_, R) => C(_, R) === w
+    const k = C(o, 0);
+    return d.some(
+      (_, R) => C(_, R) === k
     );
   }), Q = L.some((o) => {
-    const w = C(o, 0);
-    return i.some(
-      (_, R) => C(_, R) === w
+    const k = C(o, 0);
+    return d.some(
+      (_, R) => C(_, R) === k
     );
   }), re = b(
     "w-full text-sm leading-5 text-[var(--text-default)] border-collapse",
     q
   ), U = b("bg-[var(--base-module)]"), le = b(
     "text-[var(--text-default)] dark:text-[var(--text-on-neutral)] p-3 border-b border-[var(--neutral-border)]"
-  ), he = b("h-12", {
-    "hover:bg-[var(--neutral-container)] dark:hover:bg-[var(--neutral-container-emphasis)]": k,
+  ), fe = b("h-12", {
+    "hover:bg-[var(--neutral-container)] dark:hover:bg-[var(--neutral-container-emphasis)]": N,
     "cursor-pointer": u
   });
-  return /* @__PURE__ */ d("div", { className: "space-y-4", children: [
-    (a || c.length > 0) && /* @__PURE__ */ e("div", { className: "pt-4 pb-2", children: /* @__PURE__ */ d("div", { className: "flex flex-wrap gap-4 items-start", children: [
-      c.map((o) => /* @__PURE__ */ e(yt, { ...o }, o.id)),
+  return /* @__PURE__ */ i("div", { className: "space-y-4", children: [
+    (n || c.length > 0) && /* @__PURE__ */ e("div", { className: "pt-4 pb-2", children: /* @__PURE__ */ i("div", { className: "flex flex-wrap gap-4 items-start", children: [
+      c.map((o) => /* @__PURE__ */ e(vt, { ...o }, o.id)),
       /* @__PURE__ */ e("div", { className: "w-full sm:w-auto sm:ml-auto min-w-[200px]", children: /* @__PURE__ */ e(
         ue,
         {
           placeholder: s,
           value: H,
           onChange: (o) => F(o.target.value),
-          startIcon: /* @__PURE__ */ e(mt, {}),
+          startIcon: /* @__PURE__ */ e(ft, {}),
           className: "max-w-sm"
         }
       ) })
     ] }) }),
-    /* @__PURE__ */ d("div", { className: "relative w-full overflow-x-auto min-h-[400px]", children: [
+    /* @__PURE__ */ i("div", { className: "relative w-full overflow-x-auto min-h-[400px]", children: [
       r && /* @__PURE__ */ e("div", { className: "flex items-center justify-center z-10", children: /* @__PURE__ */ e(
-        it,
+        ut,
         {
           showTableSkeleton: !0,
           tableRows: 10,
-          tableColumns: n.length
+          tableColumns: a.length
         }
       ) }),
-      /* @__PURE__ */ d("table", { ref: T, className: b(re, "min-w-full"), children: [
-        /* @__PURE__ */ e("thead", { className: U, children: /* @__PURE__ */ d("tr", { children: [
+      /* @__PURE__ */ i("table", { ref: T, className: b(re, "min-w-full"), children: [
+        /* @__PURE__ */ e("thead", { className: U, children: /* @__PURE__ */ i("tr", { children: [
           l && /* @__PURE__ */ e("th", { className: b(le, "w-12"), children: /* @__PURE__ */ e(
             "input",
             {
@@ -1905,11 +1905,11 @@ const ut = ({
               ref: (o) => {
                 o && (o.indeterminate = Q && !A);
               },
-              onChange: (o) => ne(o.target.checked),
-              className: "rounded border-neutral-300 dark:border-neutral-600"
+              onChange: (o) => ae(o.target.checked),
+              className: "rounded border-neutral"
             }
           ) }),
-          !r && n.map((o) => /* @__PURE__ */ e(
+          !r && a.map((o) => /* @__PURE__ */ e(
             "th",
             {
               className: b(
@@ -1927,9 +1927,9 @@ const ut = ({
               ),
               style: { width: o.width },
               onClick: () => o.sortable && D(o.id),
-              children: /* @__PURE__ */ d("div", { className: "flex items-center gap-2", children: [
+              children: /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
                 o.headerCell ? o.headerCell() : o.header,
-                o.sortable && /* @__PURE__ */ d(
+                o.sortable && /* @__PURE__ */ i(
                   "div",
                   {
                     className: b(
@@ -1944,7 +1944,7 @@ const ut = ({
                         }
                       ),
                       /* @__PURE__ */ e(
-                        ft,
+                        pt,
                         {
                           active: E.column === o.id && E.direction === "desc"
                         }
@@ -1961,27 +1961,27 @@ const ut = ({
         /* @__PURE__ */ e("tbody", { children: L.length === 0 || r ? !r && /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e(
           "td",
           {
-            colSpan: n.length + (l ? 1 : 0) + (y.length > 0 ? 1 : 0),
+            colSpan: a.length + (l ? 1 : 0) + (y.length > 0 ? 1 : 0),
             className: b(
               le,
-              "text-center py-8 text-neutral-500 dark:text-neutral-400"
+              "text-center py-8 text-muted"
             ),
-            children: N || "No data available"
+            children: w || "No data available"
           }
-        ) }) : L.map((o, w) => {
-          const _ = C(o, w), R = i.some(
+        ) }) : L.map((o, k) => {
+          const _ = C(o, k), R = d.some(
             (j, Y) => C(j, Y) === _
           );
-          return /* @__PURE__ */ d(
+          return /* @__PURE__ */ i(
             "tr",
             {
               className: b(
-                he,
-                { "bg-blue-50 dark:bg-blue-900/20": R },
-                K?.(o, w)
+                fe,
+                { "bg-accent-container": R },
+                K?.(o, k)
               ),
               onClick: (j) => {
-                j.stopPropagation(), u?.(o, w);
+                j.stopPropagation(), u?.(o, k);
               },
               children: [
                 l && /* @__PURE__ */ e("td", { className: le, children: /* @__PURE__ */ e(
@@ -1992,10 +1992,10 @@ const ut = ({
                     onChange: (j) => {
                       j.stopPropagation(), te(o, j.target.checked);
                     },
-                    className: "rounded border-neutral-300 dark:border-neutral-600"
+                    className: "rounded border-neutral"
                   }
                 ) }),
-                n.map((j) => {
+                a.map((j) => {
                   const Y = typeof j.accessor == "function" ? j.accessor(o) : o[j.accessor];
                   return /* @__PURE__ */ e(
                     "td",
@@ -2007,17 +2007,17 @@ const ut = ({
                         "sticky left-0 bg-module": j.sticky === "left",
                         "sticky right-0 bg-module": j.sticky === "right"
                       }),
-                      children: j.cell ? j.cell(Y, o, w) : String(Y || "")
+                      children: j.cell ? j.cell(Y, o, k) : String(Y || "")
                     },
                     j.id
                   );
                 }),
                 y.length > 0 && /* @__PURE__ */ e("td", { className: le, children: /* @__PURE__ */ e(
-                  ut,
+                  mt,
                   {
-                    trigger: /* @__PURE__ */ d("div", { className: "inline-flex items-center gap-1 px-2 py-1 text-sm text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100", children: [
+                    trigger: /* @__PURE__ */ i("div", { className: "inline-flex items-center gap-1 px-2 py-1 text-sm text-muted hover:text-default", children: [
                       /* @__PURE__ */ e("span", { children: "Options" }),
-                      /* @__PURE__ */ e(ze, {})
+                      /* @__PURE__ */ e(De, {})
                     ] }),
                     options: y.map((j) => ({
                       value: j.id,
@@ -2027,9 +2027,9 @@ const ut = ({
                     })),
                     onSelect: (j) => {
                       const Y = y.find(
-                        (fe) => fe.id === j
+                        (he) => he.id === j
                       );
-                      Y && Y.onClick(o, w);
+                      Y && Y.onClick(o, k);
                     },
                     placement: "bottom-end"
                   }
@@ -2041,9 +2041,9 @@ const ut = ({
         }) })
       ] })
     ] }),
-    h && W > 0 && /* @__PURE__ */ d("div", { className: "flex items-center justify-between px-6", children: [
-      /* @__PURE__ */ d("div", { className: "flex items-center gap-4", children: [
-        /* @__PURE__ */ d("span", { className: "text-sm text-neutral-600 dark:text-neutral-400", children: [
+    f && W > 0 && /* @__PURE__ */ i("div", { className: "flex items-center justify-between px-6", children: [
+      /* @__PURE__ */ i("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ i("span", { className: "text-sm text-muted", children: [
           "Showing ",
           I,
           " to ",
@@ -2052,8 +2052,8 @@ const ut = ({
           W,
           " results"
         ] }),
-        /* @__PURE__ */ d("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ e("span", { className: "text-sm text-neutral-600 dark:text-neutral-400", children: "Rows per page:" }),
+        /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ e("span", { className: "text-sm text-muted", children: "Rows per page:" }),
           /* @__PURE__ */ e(
             "select",
             {
@@ -2065,7 +2065,7 @@ const ut = ({
           )
         ] })
       ] }),
-      /* @__PURE__ */ d("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ i("div", { className: "flex items-center gap-1", children: [
         /* @__PURE__ */ e(
           ee,
           {
@@ -2074,7 +2074,7 @@ const ut = ({
             onClick: () => P(0),
             disabled: z.page === 0,
             iconOnly: !0,
-            children: /* @__PURE__ */ e(bt, {})
+            children: /* @__PURE__ */ e(gt, {})
           }
         ),
         /* @__PURE__ */ e(
@@ -2085,10 +2085,10 @@ const ut = ({
             onClick: () => P(z.page - 1),
             disabled: z.page === 0,
             iconOnly: !0,
-            children: /* @__PURE__ */ e(pt, {})
+            children: /* @__PURE__ */ e(xt, {})
           }
         ),
-        /* @__PURE__ */ d("span", { className: "px-3 py-1 text-sm text-gray-500 dark:text-gray-400", children: [
+        /* @__PURE__ */ i("span", { className: "px-3 py-1 text-sm text-muted", children: [
           "Page ",
           z.page + 1,
           " of ",
@@ -2102,7 +2102,7 @@ const ut = ({
             onClick: () => P(z.page + 1),
             disabled: z.page >= S - 1,
             iconOnly: !0,
-            children: /* @__PURE__ */ e(xt, {})
+            children: /* @__PURE__ */ e(bt, {})
           }
         ),
         /* @__PURE__ */ e(
@@ -2113,22 +2113,22 @@ const ut = ({
             onClick: () => P(S - 1),
             disabled: z.page >= S - 1,
             iconOnly: !0,
-            children: /* @__PURE__ */ e(gt, {})
+            children: /* @__PURE__ */ e(yt, {})
           }
         )
       ] })
     ] })
   ] });
-}, vt = He(null), er = ({
+}, Nt = Ue(null), tr = ({
   items: t,
-  activeTab: n,
+  activeTab: a,
   onTabChange: r,
-  className: a
+  className: n
 }) => {
-  const [s, c] = V(t[0]?.id || ""), h = n || s, g = (p) => {
+  const [s, c] = V(t[0]?.id || ""), f = a || s, g = (p) => {
     r ? r(p) : c(p);
   };
-  return /* @__PURE__ */ e("div", { className: b("border-b border-neutral-200 dark:border-neutral-700", a), children: /* @__PURE__ */ e("nav", { className: "-mb-px flex space-x-8", children: t.map((p) => /* @__PURE__ */ e(
+  return /* @__PURE__ */ e("div", { className: b("border-b border-neutral-200 dark:border-neutral-700", n), children: /* @__PURE__ */ e("nav", { className: "-mb-px flex space-x-8", children: t.map((p) => /* @__PURE__ */ e(
     "button",
     {
       onClick: () => !p.disabled && g(p.id),
@@ -2136,38 +2136,38 @@ const ut = ({
       className: b(
         "border-b-2 py-2 px-1 text-sm font-medium transition-colors duration-200",
         {
-          "border-primary text-primary": h === p.id,
-          "border-transparent text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300": h !== p.id && !p.disabled,
+          "border-primary text-primary": f === p.id,
+          "border-transparent text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300": f !== p.id && !p.disabled,
           "border-transparent text-neutral-300 cursor-not-allowed dark:text-neutral-600": p.disabled
         }
       ),
-      children: /* @__PURE__ */ d("span", { className: "flex items-center gap-2", children: [
+      children: /* @__PURE__ */ i("span", { className: "flex items-center gap-2", children: [
         p.label,
         p.badge && /* @__PURE__ */ e("span", { className: b(
           "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium",
-          h === p.id ? "bg-primary/10 text-primary" : "bg-neutral-100 text-neutral-600 dark:bg-neutral-800 dark:text-neutral-400"
+          f === p.id ? "bg-primary/10 text-primary" : "bg-neutral-100 text-neutral-600 dark:bg-neutral-800 dark:text-neutral-400"
         ), children: p.badge })
       ] })
     },
     p.id
   )) }) });
-}, kt = ({
+}, wt = ({
   items: t,
-  defaultTab: n,
+  defaultTab: a,
   activeTab: r,
-  onTabChange: a,
+  onTabChange: n,
   variant: s = "default",
   size: c = "md",
-  className: h
+  className: f
 }) => {
   const [g, p] = V(
-    n || r || t[0]?.id || ""
-  ), y = r || g, u = (N) => {
-    a ? a(N) : p(N);
+    a || r || t[0]?.id || ""
+  ), y = r || g, u = (w) => {
+    n ? n(w) : p(w);
   }, l = {
     activeTab: y,
     setActiveTab: u
-  }, i = t.find((N) => N.id === y), f = b(
+  }, d = t.find((w) => w.id === y), h = b(
     "flex",
     {
       "border-b border-neutral-200 dark:border-neutral-700 px-2": s === "default" || s === "underline",
@@ -2175,8 +2175,8 @@ const ut = ({
       "space-x-1": s === "pills",
       "space-x-8": s === "default" || s === "underline"
     },
-    h
-  ), C = (N, k) => {
+    f
+  ), C = (w, N) => {
     const B = "transition-colors duration-200 font-medium", x = {
       "text-xs px-2 py-1": c === "sm",
       "text-sm px-3 py-2": c === "md",
@@ -2189,79 +2189,79 @@ const ut = ({
       // Underline variant
       "border-b-2 pb-2": s === "underline"
     }, K = {
-      "opacity-50 cursor-not-allowed": N.disabled,
-      "cursor-pointer": !N.disabled
-    }, H = k ? {
+      "opacity-50 cursor-not-allowed": w.disabled,
+      "cursor-pointer": !w.disabled
+    }, H = N ? {
       "border-primary text-primary": s === "default" || s === "underline",
       "bg-white dark:bg-neutral-700 text-neutral-900 dark:text-neutral-100 shadow-sm": s === "pills"
-    } : {}, F = !k && !N.disabled ? {
+    } : {}, F = !N && !w.disabled ? {
       "border-transparent text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100": s === "default",
       "text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100": s === "pills",
       "border-transparent text-neutral-600 hover:text-neutral-900 hover:border-neutral-300 dark:text-neutral-400 dark:hover:text-neutral-100": s === "underline"
     } : {};
     return b(B, x, q, K, H, F);
   };
-  return /* @__PURE__ */ e(vt.Provider, { value: l, children: /* @__PURE__ */ d("div", { children: [
-    /* @__PURE__ */ e("div", { className: f, role: "tablist", children: t.map((N) => /* @__PURE__ */ e(
+  return /* @__PURE__ */ e(Nt.Provider, { value: l, children: /* @__PURE__ */ i("div", { children: [
+    /* @__PURE__ */ e("div", { className: h, role: "tablist", children: t.map((w) => /* @__PURE__ */ e(
       "button",
       {
         type: "button",
         role: "tab",
-        "aria-selected": y === N.id,
-        "aria-controls": `tabpanel-${N.id}`,
-        disabled: N.disabled,
-        onClick: () => !N.disabled && u(N.id),
-        className: C(N, y === N.id),
-        children: /* @__PURE__ */ d("span", { className: "flex items-center gap-2", children: [
-          N.label,
-          N.badge && /* @__PURE__ */ e("span", { className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300", children: N.badge })
+        "aria-selected": y === w.id,
+        "aria-controls": `tabpanel-${w.id}`,
+        disabled: w.disabled,
+        onClick: () => !w.disabled && u(w.id),
+        className: C(w, y === w.id),
+        children: /* @__PURE__ */ i("span", { className: "flex items-center gap-2", children: [
+          w.label,
+          w.badge && /* @__PURE__ */ e("span", { className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300", children: w.badge })
         ] })
       },
-      N.id
+      w.id
     )) }),
-    i?.content && /* @__PURE__ */ e(
+    d?.content && /* @__PURE__ */ e(
       "div",
       {
         role: "tabpanel",
         id: `tabpanel-${y}`,
         "aria-labelledby": `tab-${y}`,
         className: "mt-4",
-        children: i.content
+        children: d.content
       }
     )
   ] }) });
-}, Nt = {
+}, kt = {
   sm: "max-w-md",
   md: "max-w-lg",
   lg: "max-w-2xl",
   xl: "max-w-4xl",
   full: "max-w-full mx-4"
 };
-function wt({
+function Ct({
   open: t,
-  onClose: n,
+  onClose: a,
   title: r,
-  size: a = "md",
+  size: n = "md",
   closeOnBackdropClick: s = !0,
   closeOnEscape: c = !0,
-  className: h,
+  className: f,
   backdropClassName: g,
   children: p,
   footer: y,
   showCloseButton: u = !0
 }) {
-  const l = X(null), i = X(null);
+  const l = X(null), d = X(null);
   G(() => {
     if (!t || !c) return;
-    const C = (N) => {
-      N.key === "Escape" && n();
+    const C = (w) => {
+      w.key === "Escape" && a();
     };
     return document.addEventListener("keydown", C), () => document.removeEventListener("keydown", C);
-  }, [t, c, n]), G(() => (t ? (i.current = document.activeElement, l.current && l.current.focus(), document.body.style.overflow = "hidden") : (i.current && i.current.focus(), document.body.style.overflow = ""), () => {
+  }, [t, c, a]), G(() => (t ? (d.current = document.activeElement, l.current && l.current.focus(), document.body.style.overflow = "hidden") : (d.current && d.current.focus(), document.body.style.overflow = ""), () => {
     document.body.style.overflow = "";
   }), [t]);
-  const f = (C) => {
-    s && C.target === C.currentTarget && n();
+  const h = (C) => {
+    s && C.target === C.currentTarget && a();
   };
   return t ? /* @__PURE__ */ e(
     "div",
@@ -2272,37 +2272,37 @@ function wt({
         // 'animate-fade-in',
         g
       ),
-      onClick: f,
-      children: /* @__PURE__ */ d(
+      onClick: h,
+      children: /* @__PURE__ */ i(
         "div",
         {
           ref: l,
           className: b(
-            "relative w-full bg-white dark:bg-secondary-800 rounded-modal shadow-modal rounded-md",
+            "relative w-full bg-module rounded-modal shadow-modal rounded-md",
             // 'animate-scale-in',
             "focus:outline-none",
-            Nt[a],
-            h
+            kt[n],
+            f
           ),
           role: "dialog",
           "aria-modal": "true",
           "aria-labelledby": r ? "modal-title" : void 0,
           tabIndex: -1,
           children: [
-            (r || u) && /* @__PURE__ */ d("div", { className: "flex items-center justify-between p-6 pb-0", children: [
+            (r || u) && /* @__PURE__ */ i("div", { className: "flex items-center justify-between p-6 pb-0", children: [
               r && /* @__PURE__ */ e(
                 "span",
                 {
                   id: "modal-title",
-                  className: "text-lg font-semibold text-secondary-800 dark:text-secondary-200",
+                  className: "text-lg font-semibold text-default",
                   children: r
                 }
               ),
               u && /* @__PURE__ */ e(
                 "button",
                 {
-                  onClick: n,
-                  className: "p-1 text-secondary-400 hover:text-secondary-600 dark:hover:text-secondary-300 transition-colors",
+                  onClick: a,
+                  className: "p-1 text-muted hover:text-muted transition-colors",
                   "aria-label": "Close modal",
                   children: /* @__PURE__ */ e("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
                 }
@@ -2318,20 +2318,20 @@ function wt({
 }
 const Z = ({
   variant: t = "body",
-  size: n = "md",
+  size: a = "md",
   weight: r = "normal",
-  color: a = "current",
+  color: n = "current",
   align: s = "left",
   truncate: c = !1,
-  italic: h = !1,
+  italic: f = !1,
   underline: g = !1,
   lineHeight: p = "normal",
   as: y,
   className: u,
   children: l,
-  ...i
+  ...d
 }) => {
-  const f = y || Ct(t), C = b(
+  const h = y || St(t), C = b(
     // Base styles
     "font-primary",
     // Variant styles
@@ -2343,11 +2343,11 @@ const Z = ({
     },
     // Size variants (override variant sizes)
     t !== "code" && {
-      "text-xs": n === "xs",
-      "text-sm": n === "sm",
-      "text-base": n === "md",
-      "text-lg": n === "lg",
-      "text-xl": n === "xl"
+      "text-xs": a === "xs",
+      "text-sm": a === "sm",
+      "text-base": a === "md",
+      "text-lg": a === "lg",
+      "text-xl": a === "xl"
     },
     // Weight variants
     t !== "label" && {
@@ -2362,16 +2362,16 @@ const Z = ({
     // rest van de interface (zelfde tokens als bv. Table). De `--text-*` vars
     // worden in `.dark` overschreven, dus geen aparte `dark:`-varianten nodig.
     {
-      "text-primary": a === "primary",
-      "text-secondary": a === "secondary",
-      "text-[var(--text-accent)]": a === "accent",
-      "text-[var(--text-success)]": a === "success",
-      "text-warning": a === "warning",
-      "text-[var(--text-error)]": a === "error",
-      "text-info": a === "info",
-      "text-[var(--text-default)]": a === "neutral",
-      "text-current": a === "current",
-      "text-[var(--text-muted)]": a === "muted"
+      "text-primary": n === "primary",
+      "text-secondary": n === "secondary",
+      "text-[var(--text-accent)]": n === "accent",
+      "text-[var(--text-success)]": n === "success",
+      "text-warning": n === "warning",
+      "text-[var(--text-error)]": n === "error",
+      "text-info": n === "info",
+      "text-[var(--text-default)]": n === "neutral",
+      "text-current": n === "current",
+      "text-[var(--text-muted)]": n === "muted"
     },
     // Alignment
     {
@@ -2388,15 +2388,15 @@ const Z = ({
     },
     // Text decorations
     {
-      italic: h,
+      italic: f,
       underline: g,
       truncate: c
     },
     u
   );
-  return /* @__PURE__ */ e(f, { className: C, ...i, children: l });
+  return /* @__PURE__ */ e(h, { className: C, ...d, children: l });
 };
-function Ct(t) {
+function St(t) {
   return {
     body: "p",
     caption: "span",
@@ -2404,43 +2404,43 @@ function Ct(t) {
     code: "code"
   }[t] || "p";
 }
-const St = ({
+const Lt = ({
   value: t,
-  onChange: n,
+  onChange: a,
   label: r,
-  placeholder: a = "Select or upload a file",
+  placeholder: n = "Select or upload a file",
   error: s,
   disabled: c,
-  accept: h,
+  accept: f,
   onListFiles: g,
   onListMounts: p,
   onUploadFile: y,
   onDownloadFile: u,
   onRegisterFile: l
 }) => {
-  const [i, f] = V(!1), [C, N] = V([]), [k, B] = V(null), [x, q] = V("/"), [K, H] = V([]), [F, E] = V(!1), [J, z] = V(""), [v, T] = V(
+  const [d, h] = V(!1), [C, w] = V([]), [N, B] = V(null), [x, q] = V("/"), [K, H] = V([]), [F, E] = V(!1), [J, z] = V(""), [v, T] = V(
     typeof t == "object" ? t : null
   ), [m, $] = V(!1), [L, D] = V(""), P = X(null);
   G(() => {
-    i && M();
-  }, [i]), G(() => {
-    i && k && te();
-  }, [i, k, x, J]);
+    d && M();
+  }, [d]), G(() => {
+    d && N && te();
+  }, [d, N, x, J]);
   const M = async () => {
     E(!0);
     try {
       const o = await p?.();
-      o?.data && N(o.data);
+      o?.data && w(o.data);
     } catch (o) {
       console.error("Failed to load mounts", o);
     } finally {
       E(!1);
     }
   }, te = async () => {
-    if (k) {
+    if (N) {
       E(!0);
       try {
-        const o = await g?.({ mountId: k.id, name: J, path: x });
+        const o = await g?.({ mountId: N.id, name: J, path: x });
         o?.data && H(o.data);
       } catch (o) {
         console.error("Failed to load files", o);
@@ -2448,23 +2448,23 @@ const St = ({
         E(!1);
       }
     }
-  }, ne = async (o) => {
-    const w = o.target.files?.[0];
-    if (w) {
+  }, ae = async (o) => {
+    const k = o.target.files?.[0];
+    if (k) {
       E(!0);
       try {
-        const _ = await w.arrayBuffer(), R = new Uint8Array(_), j = {
+        const _ = await k.arrayBuffer(), R = new Uint8Array(_), j = {
           id: `local-${Date.now()}`,
-          name: w.name,
+          name: k.name,
           type: "file",
           path: "/",
-          mimeType: w.type || "application/octet-stream",
-          size: w.size,
+          mimeType: k.type || "application/octet-stream",
+          size: k.size,
           mountId: "local",
-          providerKey: w.name,
+          providerKey: k.name,
           ownerId: "me"
         };
-        T(j), n(j, R), f(!1);
+        T(j), a(j, R), h(!1);
       } catch (_) {
         console.error("Local file selection failed", _);
       } finally {
@@ -2472,20 +2472,20 @@ const St = ({
       }
     }
   }, W = async (o) => {
-    const w = o.target.files?.[0];
-    if (!(!w || !k)) {
+    const k = o.target.files?.[0];
+    if (!(!k || !N)) {
       E(!0);
       try {
-        const _ = await w.arrayBuffer(), R = await y?.({
+        const _ = await k.arrayBuffer(), R = await y?.({
           file: new Uint8Array(_),
-          filename: w.name,
-          mimeType: w.type || "application/octet-stream",
-          mountId: k.id,
+          filename: k.name,
+          mimeType: k.type || "application/octet-stream",
+          mountId: N.id,
           path: x
         });
         if (R?.data) {
           const j = R.data;
-          T(j), n(j, new Uint8Array(_)), f(!1);
+          T(j), a(j, new Uint8Array(_)), h(!1);
         }
       } catch (_) {
         console.error("Upload failed", _);
@@ -2494,7 +2494,7 @@ const St = ({
       }
     }
   }, S = async () => {
-    if (!(!L || !k)) {
+    if (!(!L || !N)) {
       E(!0);
       try {
         const o = `${x}${L}/`;
@@ -2504,7 +2504,7 @@ const St = ({
           path: x,
           mimeType: "application/x-directory",
           size: 0,
-          mountId: k.id,
+          mountId: N.id,
           providerKey: o,
           ownerId: "me"
         }), await te()), $(!1), D("");
@@ -2517,42 +2517,42 @@ const St = ({
   }, I = async (o) => {
     E(!0);
     try {
-      const w = await u?.(o.id);
-      T(o), n(o, w), f(!1);
-    } catch (w) {
-      console.error("Failed to download file", w);
+      const k = await u?.(o.id);
+      T(o), a(o, k), h(!1);
+    } catch (k) {
+      console.error("Failed to download file", k);
     } finally {
       E(!1);
     }
   }, O = (o) => {
-    o.stopPropagation(), T(null), n(null);
-  }, A = ie(() => {
-    const o = /* @__PURE__ */ new Set(), w = [];
+    o.stopPropagation(), T(null), a(null);
+  }, A = de(() => {
+    const o = /* @__PURE__ */ new Set(), k = [];
     return K.forEach((_) => {
       if (_.type === "folder") {
         _.path === x && o.add(_.name);
         return;
       }
-      const R = _.providerKey || _.name, Y = (x ? R.substring(x.length) : R).split("/").filter((fe) => fe !== "");
-      Y.length > 1 ? o.add(Y[0]) : Y.length === 1 && w.push(_);
+      const R = _.providerKey || _.name, Y = (x ? R.substring(x.length) : R).split("/").filter((he) => he !== "");
+      Y.length > 1 ? o.add(Y[0]) : Y.length === 1 && k.push(_);
     }), {
       folders: Array.from(o).sort(),
-      files: w.sort((_, R) => _.name.localeCompare(R.name))
+      files: k.sort((_, R) => _.name.localeCompare(R.name))
     };
   }, [K, x]), Q = (o) => {
-    q((w) => `${w}${o}/`);
+    q((k) => `${k}${o}/`);
   }, re = () => {
-    const o = x.split("/").filter((w) => w !== "");
+    const o = x.split("/").filter((k) => k !== "");
     o.pop(), o.length === 0 ? q("/") : q(`${o.join("/")}/`);
-  }, U = ie(() => {
-    const o = A.folders.map((w) => ({
-      id: `folder-${w}`,
-      name: w,
+  }, U = de(() => {
+    const o = A.folders.map((k) => ({
+      id: `folder-${k}`,
+      name: k,
       type: "folder"
     }));
-    return A.files.forEach((w) => {
+    return A.files.forEach((k) => {
       o.push({
-        ...w,
+        ...k,
         type: "file"
       });
     }), o;
@@ -2561,16 +2561,16 @@ const St = ({
       id: "name",
       header: "Name",
       accessor: "name",
-      cell: (o, w) => /* @__PURE__ */ d("div", { className: "flex items-center gap-2", children: [
+      cell: (o, k) => /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ e(
           oe,
           {
-            icon: w.type === "folder" ? Ce : pe,
+            icon: k.type === "folder" ? Ce : pe,
             size: "sm",
-            color: w.type === "folder" ? "warning" : "secondary"
+            color: k.type === "folder" ? "warning" : "secondary"
           }
         ),
-        /* @__PURE__ */ e("span", { className: b(w.type === "folder" && "font-medium"), children: o })
+        /* @__PURE__ */ e("span", { className: b(k.type === "folder" && "font-medium"), children: o })
       ] })
     },
     {
@@ -2588,26 +2588,26 @@ const St = ({
       header: "",
       accessor: "id",
       align: "right",
-      cell: (o, w) => /* @__PURE__ */ e(
+      cell: (o, k) => /* @__PURE__ */ e(
         ee,
         {
           size: "sm",
           variant: "outline",
           onClick: (_) => {
-            _.stopPropagation(), w.type === "folder" ? Q(w.name) : I(w);
+            _.stopPropagation(), k.type === "folder" ? Q(k.name) : I(k);
           },
-          loading: F && w.type === "file" && v?.id === w.id,
-          children: w.type === "folder" ? "Open" : "Select"
+          loading: F && k.type === "file" && v?.id === k.id,
+          children: k.type === "folder" ? "Open" : "Select"
         }
       )
     }
-  ], he = [
+  ], fe = [
     {
       id: "name",
       header: "Mount Name",
       accessor: "name",
-      cell: (o) => /* @__PURE__ */ d("div", { className: "flex items-center gap-2 font-medium", children: [
-        /* @__PURE__ */ e(oe, { icon: we, size: "sm", color: "primary" }),
+      cell: (o) => /* @__PURE__ */ i("div", { className: "flex items-center gap-2 font-medium", children: [
+        /* @__PURE__ */ e(oe, { icon: ke, size: "sm", color: "primary" }),
         /* @__PURE__ */ e("span", { children: o })
       ] })
     },
@@ -2616,30 +2616,30 @@ const St = ({
       header: "",
       accessor: "id",
       align: "right",
-      cell: (o, w) => /* @__PURE__ */ e(ee, { size: "sm", variant: "outline", onClick: () => B(w), children: "Open" })
+      cell: (o, k) => /* @__PURE__ */ e(ee, { size: "sm", variant: "outline", onClick: () => B(k), children: "Open" })
     }
   ];
-  return /* @__PURE__ */ d("div", { className: "space-y-1", children: [
+  return /* @__PURE__ */ i("div", { className: "space-y-1", children: [
     r && /* @__PURE__ */ e(Z, { variant: "label", size: "sm", weight: "medium", children: r }),
-    /* @__PURE__ */ d(
+    /* @__PURE__ */ i(
       "div",
       {
-        onClick: () => !c && f(!0),
+        onClick: () => !c && h(!0),
         className: b(
           "flex items-center gap-3 px-3 py-2 border rounded-lg cursor-pointer transition-colors",
-          "hover:border-primary-400 bg-white dark:bg-secondary-800",
-          s ? "border-error" : "border-neutral-200 dark:border-neutral-700",
-          c && "opacity-50 cursor-not-allowed bg-neutral-50"
+          "hover:border-primary-400 bg-module",
+          s ? "border-error" : "border-neutral",
+          c && "opacity-50 cursor-not-allowed bg-module-subtle"
         ),
         children: [
-          /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: /* @__PURE__ */ e(oe, { icon: v ? pe : we, color: v ? "primary" : "secondary" }) }),
-          /* @__PURE__ */ e("div", { className: "flex-grow truncate", children: v ? /* @__PURE__ */ e("span", { className: "text-sm text-neutral-900 dark:text-neutral-100 font-medium", children: v.name }) : /* @__PURE__ */ e("span", { className: "text-sm text-neutral-500", children: a }) }),
+          /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: /* @__PURE__ */ e(oe, { icon: v ? pe : ke, color: v ? "primary" : "secondary" }) }),
+          /* @__PURE__ */ e("div", { className: "flex-grow truncate", children: v ? /* @__PURE__ */ e("span", { className: "text-sm text-default font-medium", children: v.name }) : /* @__PURE__ */ e("span", { className: "text-sm text-muted", children: n }) }),
           v && !c && /* @__PURE__ */ e(
             "button",
             {
               onClick: O,
-              className: "p-1 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded",
-              children: /* @__PURE__ */ e(oe, { icon: Oe, size: "xs" })
+              className: "p-1 hover:bg-neutral-container rounded",
+              children: /* @__PURE__ */ e(oe, { icon: Ve, size: "xs" })
             }
           )
         ]
@@ -2647,24 +2647,24 @@ const St = ({
     ),
     s && /* @__PURE__ */ e(Z, { variant: "body", size: "xs", className: "text-error", children: s }),
     /* @__PURE__ */ e(
-      wt,
+      Ct,
       {
-        open: i,
+        open: d,
         onClose: () => {
-          f(!1), B(null), q("/"), $(!1);
+          h(!1), B(null), q("/"), $(!1);
         },
-        title: k ? `Explorer: ${k.name}` : "Select Storage Mount",
+        title: N ? `Explorer: ${N.name}` : "Select Storage Mount",
         size: "lg",
         children: /* @__PURE__ */ e(
-          kt,
+          wt,
           {
             variant: "pills",
             items: [
               {
                 id: "remote",
                 label: "Platform Storage",
-                content: /* @__PURE__ */ e("div", { className: "space-y-4", children: k ? /* @__PURE__ */ d(Ee, { children: [
-                  /* @__PURE__ */ d("div", { className: "flex flex-wrap items-center gap-2", children: [
+                content: /* @__PURE__ */ e("div", { className: "space-y-4", children: N ? /* @__PURE__ */ i(Ee, { children: [
+                  /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center gap-2", children: [
                     /* @__PURE__ */ e(
                       ee,
                       {
@@ -2673,23 +2673,23 @@ const St = ({
                         onClick: () => {
                           x && x !== "/" ? re() : B(null);
                         },
-                        leftIcon: /* @__PURE__ */ e(oe, { icon: Ne, size: "xs" }),
+                        leftIcon: /* @__PURE__ */ e(oe, { icon: we, size: "xs" }),
                         children: x ? "Back" : "Back to Mounts"
                       }
                     ),
-                    /* @__PURE__ */ e("div", { className: "flex items-center gap-1 text-xs text-neutral-500 overflow-hidden bg-neutral-100 dark:bg-neutral-800 px-2 py-1 rounded", children: /* @__PURE__ */ e("span", { className: "truncate", children: x }) }),
+                    /* @__PURE__ */ e("div", { className: "flex items-center gap-1 text-xs text-muted overflow-hidden bg-neutral-container px-2 py-1 rounded", children: /* @__PURE__ */ e("span", { className: "truncate", children: x }) }),
                     /* @__PURE__ */ e("div", { className: "flex-grow min-w-[150px]", children: /* @__PURE__ */ e(
                       ue,
                       {
                         placeholder: "Search...",
                         value: J,
                         onChange: (o) => z(o.target.value),
-                        startIcon: /* @__PURE__ */ e(Ve, { size: 14 }),
+                        startIcon: /* @__PURE__ */ e($e, { size: 14 }),
                         fullWidth: !0,
                         size: "sm"
                       }
                     ) }),
-                    /* @__PURE__ */ d("div", { className: "flex items-center gap-1", children: [
+                    /* @__PURE__ */ i("div", { className: "flex items-center gap-1", children: [
                       /* @__PURE__ */ e(
                         ee,
                         {
@@ -2718,12 +2718,12 @@ const St = ({
                           className: "hidden",
                           ref: P,
                           onChange: W,
-                          accept: h
+                          accept: f
                         }
                       )
                     ] })
                   ] }),
-                  m && /* @__PURE__ */ d("div", { className: "flex items-center gap-2 p-3 bg-neutral-50 dark:bg-neutral-900 rounded-lg border border-neutral-200 dark:border-neutral-700", children: [
+                  m && /* @__PURE__ */ i("div", { className: "flex items-center gap-2 p-3 bg-module-subtle rounded-lg border border-neutral", children: [
                     /* @__PURE__ */ e(oe, { icon: Ce, size: "sm", color: "warning" }),
                     /* @__PURE__ */ e(
                       ue,
@@ -2738,7 +2738,7 @@ const St = ({
                     /* @__PURE__ */ e(ee, { size: "sm", onClick: S, loading: F, children: "Create" }),
                     /* @__PURE__ */ e(ee, { size: "sm", variant: "ghost", onClick: () => $(!1), children: "Cancel" })
                   ] }),
-                  /* @__PURE__ */ e("div", { className: "max-h-[400px] overflow-auto rounded-lg border border-neutral-200 dark:border-neutral-700", children: /* @__PURE__ */ e(
+                  /* @__PURE__ */ e("div", { className: "max-h-[400px] overflow-auto rounded-lg border border-neutral", children: /* @__PURE__ */ e(
                     Le,
                     {
                       data: U,
@@ -2748,11 +2748,11 @@ const St = ({
                       onRowClick: (o) => o.type === "folder" ? Q(o.name) : I(o)
                     }
                   ) })
-                ] }) : /* @__PURE__ */ e("div", { className: "max-h-[400px] overflow-auto rounded-lg border border-neutral-200 dark:border-neutral-700", children: /* @__PURE__ */ e(
+                ] }) : /* @__PURE__ */ e("div", { className: "max-h-[400px] overflow-auto rounded-lg border border-neutral", children: /* @__PURE__ */ e(
                   Le,
                   {
                     data: C,
-                    columns: he,
+                    columns: fe,
                     loading: F,
                     emptyContent: "No storage mounts configured",
                     onRowClick: (o) => B(o)
@@ -2762,20 +2762,20 @@ const St = ({
               {
                 id: "local",
                 label: "Local File",
-                content: /* @__PURE__ */ e("div", { className: "space-y-6", children: /* @__PURE__ */ d("div", { className: "flex flex-col items-center justify-center py-12 border-2 border-dashed border-neutral-200 dark:border-neutral-700 rounded-xl bg-neutral-50 dark:bg-secondary-900/50", children: [
+                content: /* @__PURE__ */ e("div", { className: "space-y-6", children: /* @__PURE__ */ i("div", { className: "flex flex-col items-center justify-center py-12 border-2 border-dashed border-neutral rounded-xl bg-module-subtle/50", children: [
                   /* @__PURE__ */ e("div", { className: "p-4 bg-primary/10 rounded-full mb-4", children: /* @__PURE__ */ e(oe, { icon: pe, size: "xl", color: "primary" }) }),
                   /* @__PURE__ */ e(Z, { variant: "label", size: "lg", weight: "semibold", children: "Select a file from your computer" }),
-                  /* @__PURE__ */ d(Z, { variant: "body", size: "sm", className: "text-neutral-500 mt-1 mb-6 text-center max-w-xs", children: [
+                  /* @__PURE__ */ i(Z, { variant: "body", size: "sm", className: "text-muted mt-1 mb-6 text-center max-w-xs", children: [
                     "This file will be used directly in the form and will ",
                     /* @__PURE__ */ e("strong", { children: "not" }),
                     " be uploaded to platform storage."
                   ] }),
-                  /* @__PURE__ */ d("label", { className: "cursor-pointer", children: [
-                    /* @__PURE__ */ d("div", { className: b(
+                  /* @__PURE__ */ i("label", { className: "cursor-pointer", children: [
+                    /* @__PURE__ */ i("div", { className: b(
                       "inline-flex items-center justify-center font-medium rounded-lg transition-colors duration-200 px-6 py-3 text-base bg-primary text-white hover:bg-primary-600",
                       F && "opacity-50 cursor-wait"
                     ), children: [
-                      F && /* @__PURE__ */ d("svg", { className: "animate-spin h-4 w-4 mr-2", fill: "none", viewBox: "0 0 24 24", children: [
+                      F && /* @__PURE__ */ i("svg", { className: "animate-spin h-4 w-4 mr-2", fill: "none", viewBox: "0 0 24 24", children: [
                         /* @__PURE__ */ e("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
                         /* @__PURE__ */ e("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
                       ] }),
@@ -2786,8 +2786,8 @@ const St = ({
                       {
                         type: "file",
                         className: "hidden",
-                        onChange: ne,
-                        accept: h,
+                        onChange: ae,
+                        accept: f,
                         disabled: F
                       }
                     )
@@ -2801,54 +2801,54 @@ const St = ({
     )
   ] });
 };
-function Me(t, n) {
-  return n.split(".").reduce(
-    (r, a) => r && typeof r == "object" && a in r ? r[a] : void 0,
+function Me(t, a) {
+  return a.split(".").reduce(
+    (r, n) => r && typeof r == "object" && n in r ? r[n] : void 0,
     t
   );
 }
-function Lt(t, n, r) {
-  const a = n.split("."), s = Array.isArray(t) ? [...t] : { ...t };
+function Mt(t, a, r) {
+  const n = a.split("."), s = Array.isArray(t) ? [...t] : { ...t };
   let c = s;
-  for (let h = 0; h < a.length - 1; h++) {
-    const g = a[h], p = c[g];
+  for (let f = 0; f < n.length - 1; f++) {
+    const g = n[f], p = c[g];
     c[g] = p && typeof p == "object" ? Array.isArray(p) ? [...p] : { ...p } : {}, c = c[g];
   }
-  return c[a[a.length - 1]] = r, s;
+  return c[n[n.length - 1]] = r, s;
 }
-function Mt(t, n) {
-  const r = n.split("."), a = Array.isArray(t) ? [...t] : { ...t };
-  let s = a;
+function Et(t, a) {
+  const r = a.split("."), n = Array.isArray(t) ? [...t] : { ...t };
+  let s = n;
   for (let c = 0; c < r.length - 1; c++) {
-    const h = r[c];
-    if (!s[h] || typeof s[h] != "object") return a;
-    s[h] = Array.isArray(s[h]) ? [...s[h]] : { ...s[h] }, s = s[h];
+    const f = r[c];
+    if (!s[f] || typeof s[f] != "object") return n;
+    s[f] = Array.isArray(s[f]) ? [...s[f]] : { ...s[f] }, s = s[f];
   }
-  return delete s[r[r.length - 1]], a;
+  return delete s[r[r.length - 1]], n;
 }
-const tr = ({
+const rr = ({
   groups: t,
-  data: n,
+  data: a,
   onSubmit: r,
-  onCancel: a,
+  onCancel: n,
   onChange: s,
   transform: c,
-  validate: h,
+  validate: f,
   submitButton: g = { label: "Submit", variant: "primary" },
   cancelButton: p = { label: "Cancel", variant: "outline" },
   showButtons: y = !0,
   layout: u = "vertical",
   size: l = "md",
-  loading: i = !1,
-  className: f,
+  loading: d = !1,
+  className: h,
   ref: C,
-  sdk: N
+  sdk: w
 }) => {
-  const [k, B] = V(n || {}), [x, q] = V({}), [K, H] = V({});
+  const [N, B] = V(a || {}), [x, q] = V({}), [K, H] = V({});
   G(() => {
-    n && B({ ...n });
-  }, [n]);
-  const F = ae(
+    a && B({ ...a });
+  }, [a]);
+  const F = ne(
     (m, $, L) => {
       const D = t.flatMap((P) => P.items).find((P) => P.name === m);
       if (!D) return null;
@@ -2862,7 +2862,7 @@ const tr = ({
         if (Array.isArray($) && D.arrayFields) {
           const P = [];
           let M = !1;
-          if ($.forEach((te, ne) => {
+          if ($.forEach((te, ae) => {
             const W = {};
             for (const S of D.arrayFields) {
               const I = te?.[S.name];
@@ -2873,7 +2873,7 @@ const tr = ({
                 O && (W[S.name] = O, M = !0);
               }
             }
-            P[ne] = W;
+            P[ae] = W;
           }), M)
             return JSON.stringify(P);
         }
@@ -2881,48 +2881,48 @@ const tr = ({
       return D.validator ? D.validator($, L) : null;
     },
     [t]
-  ), E = ae(
+  ), E = ne(
     (m, $) => {
-      let L = Lt(
-        k,
+      let L = Mt(
+        N,
         m,
         $
       );
-      t.flatMap((M) => M.items).find((M) => M.name === m)?.removeIfEmpty && ($ == null || $ === "") && (L = Mt(L, m)), B(L), H((M) => ({ ...M, [m]: !0 }));
+      t.flatMap((M) => M.items).find((M) => M.name === m)?.removeIfEmpty && ($ == null || $ === "") && (L = Et(L, m)), B(L), H((M) => ({ ...M, [m]: !0 }));
       const P = F(m, $, L);
       q((M) => ({
         ...M,
         [m]: P || ""
       })), s?.(L, m);
     },
-    [k, t, F, s]
-  ), J = ae(
+    [N, t, F, s]
+  ), J = ne(
     async (m) => {
-      if (console.log("handleSubmit"), m.preventDefault(), i) return;
+      if (console.log("handleSubmit"), m.preventDefault(), d) return;
       const $ = {}, L = t.flatMap((P) => P.items);
       for (const P of L) {
-        if (P.hidden || P.conditional && !P.conditional(k))
+        if (P.hidden || P.conditional && !P.conditional(N))
           continue;
         const M = F(
           P.name,
-          Me(k, P.name),
-          k
+          Me(N, P.name),
+          N
         );
         M && ($[P.name] = M);
       }
-      if (h) {
-        const P = h(k);
+      if (f) {
+        const P = f(N);
         P && Object.assign($, P);
       }
       if (q($), console.log("newErrors", $), Object.keys($).some((P) => $[P]))
         return;
-      const D = c ? c(k) : k;
-      await r?.(k, D);
+      const D = c ? c(N) : N;
+      await r?.(N, D);
     },
-    [k, t, F, h, c, r, i]
-  ), z = ae(
+    [N, t, F, f, c, r, d]
+  ), z = ne(
     (m) => {
-      const $ = Me(k, m.name), L = K[m.name] ? x[m.name] : void 0, D = m.disabled || i, P = {
+      const $ = Me(N, m.name), L = K[m.name] ? x[m.name] : void 0, D = m.disabled || d, P = {
         value: $ || "",
         disabled: D,
         required: m.required,
@@ -2949,7 +2949,7 @@ const tr = ({
           );
         case "textarea":
           return /* @__PURE__ */ e(
-            ke,
+            Ne,
             {
               ...P,
               onChange: (M) => E(m.name, M.target.value),
@@ -2986,7 +2986,7 @@ const tr = ({
             }
           );
         case "radio":
-          return /* @__PURE__ */ e("div", { className: "space-y-1", children: m.options?.map((M) => /* @__PURE__ */ d("label", { className: "flex items-center gap-2", children: [
+          return /* @__PURE__ */ e("div", { className: "space-y-1", children: m.options?.map((M) => /* @__PURE__ */ i("label", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ e(
               "input",
               {
@@ -3013,31 +3013,31 @@ const tr = ({
           );
         case "file":
           return /* @__PURE__ */ e(
-            St,
+            Lt,
             {
               ...P,
               value: $,
               onChange: (M) => E(m.name, M),
               error: L,
-              onListFiles: (M) => N?.http.invoke({
+              onListFiles: (M) => w?.http.invoke({
                 method: "POST",
                 action: "storage.file.list",
                 body: M
               }),
-              onListMounts: () => N?.http.invoke({
+              onListMounts: () => w?.http.invoke({
                 method: "GET",
                 action: "storage.mount"
               }),
-              onUploadFile: (M) => N?.http.invoke({
+              onUploadFile: (M) => w?.http.invoke({
                 method: "POST",
                 action: "storage.file.upload",
                 body: M
               }),
-              onDownloadFile: (M) => N?.http.invoke({
+              onDownloadFile: (M) => w?.http.invoke({
                 method: "GET",
                 action: `storage.file.${M}.download`
               }),
-              onRegisterFile: (M) => N?.http.invoke({
+              onRegisterFile: (M) => w?.http.invoke({
                 method: "POST",
                 action: "storage.file.folder",
                 body: M
@@ -3059,7 +3059,7 @@ const tr = ({
               te = JSON.parse(L);
             } catch {
             }
-          const ne = () => {
+          const ae = () => {
             E(m.name, [...M, {}]);
           }, W = (I) => {
             E(
@@ -3073,8 +3073,8 @@ const tr = ({
               [O]: A
             }, E(m.name, Q);
           };
-          return /* @__PURE__ */ d("div", { className: "space-y-2", children: [
-            M.map((I, O) => /* @__PURE__ */ d(
+          return /* @__PURE__ */ i("div", { className: "space-y-2", children: [
+            M.map((I, O) => /* @__PURE__ */ i(
               "div",
               {
                 className: "p-4 border rounded-md dark:border-neutral-700 space-y-2 relative",
@@ -3092,12 +3092,12 @@ const tr = ({
                   ) }),
                   /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: m.arrayFields?.map((A) => {
                     const Q = te?.[O]?.[A.name];
-                    return /* @__PURE__ */ d(
+                    return /* @__PURE__ */ i(
                       "div",
                       {
                         className: "space-y-1",
                         children: [
-                          /* @__PURE__ */ e("label", { className: "block", children: /* @__PURE__ */ d(
+                          /* @__PURE__ */ e("label", { className: "block", children: /* @__PURE__ */ i(
                             Z,
                             {
                               variant: "label",
@@ -3141,7 +3141,7 @@ const tr = ({
                                 );
                               case "textarea":
                                 return /* @__PURE__ */ e(
-                                  ke,
+                                  Ne,
                                   {
                                     ...re,
                                     onChange: (U) => S(
@@ -3192,7 +3192,7 @@ const tr = ({
                                   }
                                 );
                               case "radio":
-                                return /* @__PURE__ */ e("div", { className: "space-y-1", children: A.options?.map((U) => /* @__PURE__ */ d(
+                                return /* @__PURE__ */ e("div", { className: "space-y-1", children: A.options?.map((U) => /* @__PURE__ */ i(
                                   "label",
                                   {
                                     className: "flex items-center gap-2",
@@ -3247,7 +3247,7 @@ const tr = ({
                                 });
                               // Add other field types here as needed
                               default:
-                                return /* @__PURE__ */ d("p", { children: [
+                                return /* @__PURE__ */ i("p", { children: [
                                   "Unsupported field type in array:",
                                   " ",
                                   A.type
@@ -3272,13 +3272,13 @@ const tr = ({
               },
               O
             )),
-            /* @__PURE__ */ d(
+            /* @__PURE__ */ i(
               ee,
               {
                 type: "button",
                 variant: "outline",
                 size: "sm",
-                onClick: ne,
+                onClick: ae,
                 disabled: D,
                 children: [
                   "Add ",
@@ -3292,12 +3292,12 @@ const tr = ({
           return null;
       }
     },
-    [k, K, x, i, l, E]
-  ), v = ae(
+    [N, K, x, d, l, E]
+  ), v = ne(
     (m) => {
-      if (m.conditional && !m.conditional(k))
+      if (m.conditional && !m.conditional(N))
         return null;
-      const $ = m.items.filter((D) => !(D.hidden || D.conditional && !D.conditional(k)));
+      const $ = m.items.filter((D) => !(D.hidden || D.conditional && !D.conditional(N)));
       if ($.length === 0) return null;
       const L = b(
         "space-y-2",
@@ -3313,12 +3313,12 @@ const tr = ({
         },
         m.className
       );
-      return /* @__PURE__ */ d(
+      return /* @__PURE__ */ i(
         "div",
         {
           className: "grid grid-cols-1 md:grid-cols-3 gap-8 p-6 border border-neutral dark:border-neutral-700 rounded-xl",
           children: [
-            /* @__PURE__ */ d("div", { className: "md:col-span-1", children: [
+            /* @__PURE__ */ i("div", { className: "md:col-span-1", children: [
               /* @__PURE__ */ e(
                 Z,
                 {
@@ -3339,7 +3339,7 @@ const tr = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ e("div", { className: "md:col-span-2", children: /* @__PURE__ */ e("div", { className: L, children: $.map((D) => (K[D.name] && x[D.name], /* @__PURE__ */ d(
+            /* @__PURE__ */ e("div", { className: "md:col-span-2", children: /* @__PURE__ */ e("div", { className: L, children: $.map((D) => (K[D.name] && x[D.name], /* @__PURE__ */ i(
               "div",
               {
                 className: b(
@@ -3348,7 +3348,7 @@ const tr = ({
                   D.width && typeof D.width == "number" && `col-span-${D.width}`
                 ),
                 children: [
-                  D.type !== "custom" && /* @__PURE__ */ e("label", { className: "block", children: /* @__PURE__ */ d(
+                  D.type !== "custom" && /* @__PURE__ */ e("label", { className: "block", children: /* @__PURE__ */ i(
                     Z,
                     {
                       variant: "label",
@@ -3370,7 +3370,7 @@ const tr = ({
         m.id
       );
     },
-    [k, K, x, z]
+    [N, K, x, z]
   ), T = b(
     "space-y-6",
     {
@@ -3379,19 +3379,19 @@ const tr = ({
       "max-w-4xl": l === "lg",
       "max-w-full": l === "full"
     },
-    f
+    h
   );
-  return /* @__PURE__ */ d("form", { ref: C, onSubmit: J, className: T, children: [
+  return /* @__PURE__ */ i("form", { ref: C, onSubmit: J, className: T, children: [
     /* @__PURE__ */ e("div", { className: "space-y-8", children: t.map(v) }),
-    y && /* @__PURE__ */ d("div", { className: b("flex gap-3 justify-end pt-8"), children: [
-      a && /* @__PURE__ */ e(
+    y && /* @__PURE__ */ i("div", { className: b("flex gap-3 justify-end pt-8"), children: [
+      n && /* @__PURE__ */ e(
         ee,
         {
           type: "button",
           variant: p.variant,
           size: p.size || l,
-          disabled: p.disabled || i,
-          onClick: a,
+          disabled: p.disabled || d,
+          onClick: n,
           className: p.className,
           children: p.label
         }
@@ -3402,15 +3402,15 @@ const tr = ({
           type: "submit",
           variant: g.variant,
           size: g.size || l,
-          disabled: g.disabled || i,
-          loading: i,
+          disabled: g.disabled || d,
+          loading: d,
           className: g.className,
           children: g.label
         }
       )
     ] })
   ] });
-}, Et = {
+}, $t = {
   default: "bg-neutral-container text-default",
   primary: "bg-accent-container text-accent",
   secondary: "bg-neutral-container text-muted",
@@ -3418,11 +3418,11 @@ const tr = ({
   warning: "bg-notice-container text-on-notice",
   error: "bg-error-container text-error",
   info: "bg-beta-container text-link"
-}, $t = {
+}, zt = {
   sm: "px-2 py-0.5 text-xs",
   md: "px-2.5 py-1 text-sm",
   lg: "px-3 py-1.5 text-base"
-}, zt = {
+}, Dt = {
   default: "bg-neutral-fill",
   primary: "bg-accent-fill",
   secondary: "bg-neutral-fill",
@@ -3431,28 +3431,28 @@ const tr = ({
   error: "bg-error-fill",
   info: "bg-beta-fill"
 };
-function rr({
+function nr({
   variant: t = "default",
-  size: n = "md",
+  size: a = "md",
   dot: r = !1,
-  icon: a,
+  icon: n,
   dismissible: s = !1,
   onDismiss: c,
-  className: h,
+  className: f,
   children: g,
   ...p
 }) {
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ i(
     "span",
     {
       className: b(
         // Base styles
         "inline-flex items-center font-medium rounded-full",
         // Variant styles
-        Et[t],
+        $t[t],
         // Size styles
-        $t[n],
-        h
+        zt[a],
+        f
       ),
       ...p,
       children: [
@@ -3461,11 +3461,11 @@ function rr({
           {
             className: b(
               "w-2 h-2 rounded-full mr-1.5",
-              zt[t]
+              Dt[t]
             )
           }
         ),
-        a && /* @__PURE__ */ e("span", { className: b("flex-shrink-0", g && "mr-1"), children: a }),
+        n && /* @__PURE__ */ e("span", { className: b("flex-shrink-0", g && "mr-1"), children: n }),
         g,
         s && c && /* @__PURE__ */ e(
           "button",
@@ -3487,18 +3487,18 @@ function rr({
     }
   );
 }
-const Dt = {
+const Tt = {
   xs: "h-3 w-3",
   sm: "h-4 w-4",
   md: "h-6 w-6",
   lg: "h-8 w-8",
   xl: "h-12 w-12"
-}, Tt = {
+}, At = {
   primary: "text-primary",
   secondary: "text-secondary-600",
   white: "text-white",
   current: "text-current"
-}, At = {
+}, It = {
   xs: "text-xs",
   sm: "text-sm",
   md: "text-sm",
@@ -3507,34 +3507,34 @@ const Dt = {
 };
 function ar({
   size: t = "md",
-  variant: n = "primary",
+  variant: a = "primary",
   label: r = "Loading...",
-  showLabel: a = !1,
+  showLabel: n = !1,
   className: s,
   ...c
 }) {
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ i(
     "div",
     {
       className: b(
         "inline-flex items-center",
-        a ? "flex-col space-y-2" : "",
+        n ? "flex-col space-y-2" : "",
         s
       ),
       ...c,
       children: [
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ i(
           "svg",
           {
             className: b(
               "animate-spin",
-              Dt[t],
-              Tt[n]
+              Tt[t],
+              At[a]
             ),
             fill: "none",
             viewBox: "0 0 24 24",
-            "aria-hidden": !a,
-            role: a ? "status" : void 0,
+            "aria-hidden": !n,
+            role: n ? "status" : void 0,
             children: [
               /* @__PURE__ */ e(
                 "circle",
@@ -3558,45 +3558,45 @@ function ar({
             ]
           }
         ),
-        a && /* @__PURE__ */ e(
+        n && /* @__PURE__ */ e(
           "span",
           {
             className: b(
               "text-secondary-600 dark:text-secondary-400",
-              At[t]
+              It[t]
             ),
             children: r
           }
         ),
-        !a && /* @__PURE__ */ e("span", { className: "sr-only", children: r })
+        !n && /* @__PURE__ */ e("span", { className: "sr-only", children: r })
       ]
     }
   );
 }
-const nr = ({
+const lr = ({
   src: t,
-  alt: n,
+  alt: a,
   size: r = "md",
-  aspectRatio: a = "auto",
+  aspectRatio: n = "auto",
   radius: s = "md",
   showLoading: c = !0,
-  showError: h = !0,
+  showError: f = !0,
   fallback: g,
   loadingContent: p,
   errorContent: y,
   className: u,
   onLoad: l,
-  onError: i,
-  ...f
+  onError: d,
+  ...h
 }) => {
-  const [C, N] = V(!0), [k, B] = V(!1), [x, q] = V(t), K = (T) => {
-    N(!1), B(!1), l?.(T);
+  const [C, w] = V(!0), [N, B] = V(!1), [x, q] = V(t), K = (T) => {
+    w(!1), B(!1), l?.(T);
   }, H = (T) => {
-    if (N(!1), B(!0), g && x !== g) {
-      q(g), B(!1), N(!0);
+    if (w(!1), B(!0), g && x !== g) {
+      q(g), B(!1), w(!0);
       return;
     }
-    i?.(T);
+    d?.(T);
   }, F = b(
     "relative overflow-hidden bg-neutral-100 dark:bg-neutral-800",
     // Size variants
@@ -3610,10 +3610,10 @@ const nr = ({
     },
     // Aspect ratio variants
     {
-      "aspect-square": a === "square",
-      "aspect-video": a === "video",
-      "aspect-[3/4]": a === "portrait",
-      "aspect-[4/3]": a === "landscape"
+      "aspect-square": n === "square",
+      "aspect-video": n === "video",
+      "aspect-[3/4]": n === "portrait",
+      "aspect-[4/3]": n === "landscape"
     },
     // Border radius variants
     {
@@ -3628,13 +3628,13 @@ const nr = ({
   ), E = b(
     "w-full h-full object-cover transition-opacity duration-200",
     {
-      "opacity-0": C || k,
-      "opacity-100": !C && !k
+      "opacity-0": C || N,
+      "opacity-100": !C && !N
     }
   ), J = b(
     "absolute inset-0 flex items-center justify-center",
     "text-neutral-400 dark:text-neutral-500"
-  ), z = /* @__PURE__ */ e("div", { className: "animate-pulse", children: /* @__PURE__ */ e("div", { className: "w-6 h-6 bg-neutral-300 dark:bg-neutral-600 rounded" }) }), v = /* @__PURE__ */ d("div", { className: "text-center", children: [
+  ), z = /* @__PURE__ */ e("div", { className: "animate-pulse", children: /* @__PURE__ */ e("div", { className: "w-6 h-6 bg-neutral-300 dark:bg-neutral-600 rounded" }) }), v = /* @__PURE__ */ i("div", { className: "text-center", children: [
     /* @__PURE__ */ e(
       "svg",
       {
@@ -3655,66 +3655,66 @@ const nr = ({
     ),
     /* @__PURE__ */ e("span", { className: "text-xs", children: "Failed to load" })
   ] });
-  return /* @__PURE__ */ d("div", { className: F, children: [
+  return /* @__PURE__ */ i("div", { className: F, children: [
     /* @__PURE__ */ e(
       "img",
       {
-        ...f,
+        ...h,
         src: x,
-        alt: n,
+        alt: a,
         className: E,
         onLoad: K,
         onError: H
       }
     ),
     C && c && /* @__PURE__ */ e("div", { className: J, children: p || z }),
-    k && h && /* @__PURE__ */ e("div", { className: J, children: y || v })
+    N && f && /* @__PURE__ */ e("div", { className: J, children: y || v })
   ] });
-}, lr = ({
+}, sr = ({
   title: t,
-  subtitle: n,
+  subtitle: a,
   actions: r = [],
-  children: a,
+  children: n,
   className: s,
   backLabel: c = "Back",
-  backClassName: h,
+  backClassName: f,
   onBack: g,
   editable: p = !1,
   onTitleChange: y
 }) => {
-  const [u, l] = V(!1), [i, f] = V(t), C = X(null);
+  const [u, l] = V(!1), [d, h] = V(t), C = X(null);
   G(() => {
-    f(t);
+    h(t);
   }, [t]), G(() => {
     u && C.current && (C.current.focus(), C.current.select());
   }, [u]);
-  const N = () => {
+  const w = () => {
     p && l(!0);
-  }, k = () => {
-    l(!1), i.trim() !== "" && i !== t && y ? y(i.trim()) : f(t);
+  }, N = () => {
+    l(!1), d.trim() !== "" && d !== t && y ? y(d.trim()) : h(t);
   }, B = (x) => {
-    x.key === "Enter" ? C.current?.blur() : x.key === "Escape" && (f(t), l(!1));
+    x.key === "Enter" ? C.current?.blur() : x.key === "Escape" && (h(t), l(!1));
   };
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ i(
     "div",
     {
       className: b(
-        "p-5 pb-3 border-b border-gray-100 dark:border-gray-700",
+        "p-5 pb-3 border-b border-neutral",
         s
       ),
       children: [
-        /* @__PURE__ */ d("div", { className: "flex flex-row sm:items-start sm:justify-between items-center gap-4", children: [
-          /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ d("div", { className: "flex items-center gap-2 text-neutral-900 dark:text-neutral-100", children: [
+        /* @__PURE__ */ i("div", { className: "flex flex-row sm:items-start sm:justify-between items-center gap-4", children: [
+          /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ i("div", { className: "flex items-center gap-2 text-default", children: [
             g && /* @__PURE__ */ e(
               "button",
               {
                 type: "button",
                 onClick: g,
                 className: b(
-                  "flex items-center text-sm dark:hover:text-neutral-300 cursor-pointer transition",
-                  h
+                  "flex items-center text-sm cursor-pointer transition",
+                  f
                 ),
-                children: /* @__PURE__ */ e(Ne, { size: 16, color: "currentColor" })
+                children: /* @__PURE__ */ e(we, { size: 16, color: "currentColor" })
               }
             ),
             u ? /* @__PURE__ */ e(
@@ -3722,28 +3722,38 @@ const nr = ({
               {
                 ref: C,
                 type: "text",
-                value: i,
-                onChange: (x) => f(x.target.value),
-                onBlur: k,
+                value: d,
+                onChange: (x) => h(x.target.value),
+                onBlur: N,
                 onKeyDown: B,
-                className: "text-1xl font-semibold bg-transparent border-b-1 border-gray-200 dark:border-gray-700 rounded-lg outline-none focus:border-none px-1 -mx-1 min-w-0 flex-1"
-              }
-            ) : /* @__PURE__ */ e(
-              "h2",
-              {
-                onClick: N,
-                className: b(
-                  "text-2xl font-semibold truncate",
-                  p && "cursor-pointer hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
-                ),
-                title: p ? "Klik om te bewerken" : void 0,
-                children: t
+                className: "text-1xl font-semibold bg-transparent border-b-1 border-neutral rounded-lg outline-none focus:border-none px-1 -mx-1 min-w-0 flex-1"
               }
-            )
+            ) : /* @__PURE__ */ i("div", { className: "group flex items-center gap-1.5 min-w-0", children: [
+              /* @__PURE__ */ e(
+                "h2",
+                {
+                  onClick: w,
+                  className: b(
+                    "text-2xl font-semibold truncate",
+                    p && "cursor-pointer"
+                  ),
+                  title: p ? "Klik om te bewerken" : void 0,
+                  children: t
+                }
+              ),
+              p && /* @__PURE__ */ e(
+                Re,
+                {
+                  size: 15,
+                  onClick: w,
+                  className: "shrink-0 cursor-pointer text-muted opacity-0 group-hover:opacity-100 transition-opacity"
+                }
+              )
+            ] })
           ] }) }),
           r.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-wrap sm:flex-nowrap gap-2 sm:gap-3", children: r.map(
             (x) => x.splitOptions && x.splitOptions.length > 0 ? /* @__PURE__ */ e(
-              $e,
+              ze,
               {
                 label: x.label,
                 onClick: x.onClick,
@@ -3753,7 +3763,7 @@ const nr = ({
                 disabled: x.disabled
               },
               x.id
-            ) : /* @__PURE__ */ d(
+            ) : /* @__PURE__ */ i(
               "button",
               {
                 type: "button",
@@ -3776,25 +3786,25 @@ const nr = ({
             )
           ) })
         ] }),
-        a && /* @__PURE__ */ e("div", { className: "mt-4", children: a })
+        n && /* @__PURE__ */ e("div", { className: "mt-4", children: n })
       ]
     }
   );
-}, sr = ({
+}, or = ({
   actions: t = [],
-  onBack: n,
+  onBack: a,
   backLabel: r = "Back",
-  className: a,
+  className: n,
   children: s
-}) => /* @__PURE__ */ d("div", { className: b("flex items-center gap-2 mb-3", a), children: [
-  n && /* @__PURE__ */ d(
+}) => /* @__PURE__ */ i("div", { className: b("flex items-center gap-2 mb-3", n), children: [
+  a && /* @__PURE__ */ i(
     "button",
     {
       type: "button",
-      onClick: n,
+      onClick: a,
       className: "flex items-center gap-1 text-sm text-neutral-700 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-neutral-100 cursor-pointer transition px-2 py-1 rounded",
       children: [
-        /* @__PURE__ */ e(Ne, { size: 16 }),
+        /* @__PURE__ */ e(we, { size: 16 }),
         /* @__PURE__ */ e("span", { children: r })
       ]
     }
@@ -3802,7 +3812,7 @@ const nr = ({
   s && /* @__PURE__ */ e("div", { className: "flex-1 min-w-0", children: s }),
   t.length > 0 && /* @__PURE__ */ e("div", { className: b("flex flex-wrap gap-2", !s && "ml-auto"), children: t.map(
     (c) => c.splitOptions && c.splitOptions.length > 0 ? /* @__PURE__ */ e(
-      $e,
+      ze,
       {
         label: c.label,
         onClick: c.onClick,
@@ -3812,12 +3822,12 @@ const nr = ({
         disabled: c.disabled
       },
       c.id
-    ) : /* @__PURE__ */ d(
+    ) : /* @__PURE__ */ i(
       "button",
       {
         type: "button",
-        onClick: (h) => {
-          h.stopPropagation(), h.target.blur(), c.onClick();
+        onClick: (f) => {
+          f.stopPropagation(), f.target.blur(), c.onClick();
         },
         disabled: c.disabled,
         className: b("btn", {
@@ -3835,17 +3845,17 @@ const nr = ({
     )
   ) })
 ] });
-function It(t, n) {
-  return n.split(".").reduce(
-    (r, a) => r && typeof r == "object" && a in r ? r[a] : void 0,
+function jt(t, a) {
+  return a.split(".").reduce(
+    (r, n) => r && typeof r == "object" && n in r ? r[n] : void 0,
     t
   );
 }
-const or = ({
+const cr = ({
   groups: t,
-  data: n,
+  data: a,
   size: r = "md",
-  className: a
+  className: n
 }) => {
   const s = (u) => {
     if (!u) return "-";
@@ -3858,16 +3868,16 @@ const or = ({
     } catch {
       return String(u);
     }
-  }, c = (u) => u ? "Ja" : "Nee", h = (u, l) => {
+  }, c = (u) => u ? "Ja" : "Nee", f = (u, l) => {
     if (!l) return String(u || "-");
-    const i = l.find((f) => f.value === u);
-    return i ? i.label : String(u || "-");
-  }, g = ae(
+    const d = l.find((h) => h.value === u);
+    return d ? d.label : String(u || "-");
+  }, g = ne(
     (u) => {
-      const l = It(n, u.name);
+      const l = jt(a, u.name);
       if (u.type === "array") {
-        const f = l;
-        return !f || f.length === 0 ? /* @__PURE__ */ e(
+        const h = l;
+        return !h || h.length === 0 ? /* @__PURE__ */ e(
           Z,
           {
             variant: "body",
@@ -3875,12 +3885,12 @@ const or = ({
             className: "text-neutral-500 dark:text-neutral-400",
             children: "Geen items"
           }
-        ) : /* @__PURE__ */ e("div", { className: "space-y-3", children: f.map((C, N) => /* @__PURE__ */ d(
+        ) : /* @__PURE__ */ e("div", { className: "space-y-3", children: h.map((C, w) => /* @__PURE__ */ i(
           "div",
           {
             className: "p-4 border border-neutral-200 dark:border-neutral-700 rounded-lg space-y-3",
             children: [
-              /* @__PURE__ */ e("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ d(
+              /* @__PURE__ */ e("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ i(
                 Z,
                 {
                   variant: "label",
@@ -3890,14 +3900,14 @@ const or = ({
                   children: [
                     u.label,
                     " ",
-                    N + 1
+                    w + 1
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: u.arrayFields?.map((k) => {
-                const B = C?.[k.name];
+              /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: u.arrayFields?.map((N) => {
+                const B = C?.[N.name];
                 let x = "-";
-                switch (k.type) {
+                switch (N.type) {
                   case "text":
                   case "email":
                   case "number":
@@ -3908,9 +3918,9 @@ const or = ({
                     break;
                   case "select":
                   case "radio":
-                    x = h(
+                    x = f(
                       B,
-                      k.options
+                      N.options
                     );
                     break;
                   case "checkbox":
@@ -3920,21 +3930,21 @@ const or = ({
                     x = s(B);
                     break;
                   case "custom":
-                    x = k.customComponent?.({
+                    x = N.customComponent?.({
                       value: B
                     });
                     break;
                   default:
                     x = String(B || "-");
                 }
-                return k.format && (x = k.format(B, C)), /* @__PURE__ */ d("div", { className: "space-y-1", children: [
+                return N.format && (x = N.format(B, C)), /* @__PURE__ */ i("div", { className: "space-y-1", children: [
                   /* @__PURE__ */ e(
                     Z,
                     {
                       variant: "label",
                       size: "xs",
                       className: "text-neutral-600 dark:text-neutral-400",
-                      children: k.label
+                      children: N.label
                     }
                   ),
                   /* @__PURE__ */ e(
@@ -3946,28 +3956,28 @@ const or = ({
                       children: x
                     }
                   )
-                ] }, k.name);
+                ] }, N.name);
               }) })
             ]
           },
-          N
+          w
         )) });
       }
       if (u.type === "custom" && u.customComponent)
         return u.customComponent({ value: l });
       if (u.format) {
-        const f = u.format(l, n);
+        const h = u.format(l, a);
         return /* @__PURE__ */ e(
           Z,
           {
             variant: "body",
             size: "sm",
             className: "text-neutral-900 dark:text-neutral-100",
-            children: f
+            children: h
           }
         );
       }
-      let i = "-";
+      let d = "-";
       switch (u.type) {
         case "text":
         case "email":
@@ -3975,23 +3985,23 @@ const or = ({
         case "number":
         case "tel":
         case "url":
-          i = l ? String(l) : "-";
+          d = l ? String(l) : "-";
           break;
         case "textarea":
-          i = l ? /* @__PURE__ */ e("div", { className: "whitespace-pre-wrap", children: String(l || "-") }) : "-";
+          d = l ? /* @__PURE__ */ e("div", { className: "whitespace-pre-wrap", children: String(l || "-") }) : "-";
           break;
         case "select":
         case "radio":
-          i = h(l, u.options);
+          d = f(l, u.options);
           break;
         case "checkbox":
-          i = c(l);
+          d = c(l);
           break;
         case "date":
-          i = s(l);
+          d = s(l);
           break;
         default:
-          i = l ? String(l) : "-";
+          d = l ? String(l) : "-";
       }
       return /* @__PURE__ */ e(
         Z,
@@ -3999,18 +4009,18 @@ const or = ({
           variant: "body",
           size: "sm",
           className: "text-neutral-900 dark:text-neutral-100",
-          children: i
+          children: d
         }
       );
     },
-    [n]
-  ), p = ae(
+    [a]
+  ), p = ne(
     (u) => {
-      if (u.conditional && !u.conditional(n))
+      if (u.conditional && !u.conditional(a))
         return null;
-      const l = u.items.filter((f) => !(f.hidden || f.conditional && !f.conditional(n)));
+      const l = u.items.filter((h) => !(h.hidden || h.conditional && !h.conditional(a)));
       if (l.length === 0) return null;
-      const i = b(
+      const d = b(
         "space-y-4",
         {
           "grid gap-4": u.layout === "grid",
@@ -4024,12 +4034,12 @@ const or = ({
         },
         u.className
       );
-      return /* @__PURE__ */ d(
+      return /* @__PURE__ */ i(
         "div",
         {
           className: "grid grid-cols-1 md:grid-cols-3 gap-8 p-6 border border-neutral dark:border-neutral-700 rounded-xl",
           children: [
-            /* @__PURE__ */ d("div", { className: "md:col-span-1", children: [
+            /* @__PURE__ */ i("div", { className: "md:col-span-1", children: [
               /* @__PURE__ */ e(
                 Z,
                 {
@@ -4050,35 +4060,35 @@ const or = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ e("div", { className: "md:col-span-2", children: /* @__PURE__ */ e("div", { className: i, children: l.map((f) => /* @__PURE__ */ d(
+            /* @__PURE__ */ e("div", { className: "md:col-span-2", children: /* @__PURE__ */ e("div", { className: d, children: l.map((h) => /* @__PURE__ */ i(
               "div",
               {
                 className: b(
                   "space-y-1",
-                  f.width && typeof f.width == "string" && `w-[${f.width}]`,
-                  f.width && typeof f.width == "number" && `col-span-${f.width}`
+                  h.width && typeof h.width == "string" && `w-[${h.width}]`,
+                  h.width && typeof h.width == "number" && `col-span-${h.width}`
                 ),
                 children: [
-                  f.type !== "custom" && /* @__PURE__ */ e(
+                  h.type !== "custom" && /* @__PURE__ */ e(
                     Z,
                     {
                       variant: "label",
                       size: "sm",
                       className: "font-medium text-neutral-700 dark:text-neutral-300",
-                      children: f.label
+                      children: h.label
                     }
                   ),
-                  g(f)
+                  g(h)
                 ]
               },
-              f.name
+              h.name
             )) }) })
           ]
         },
         u.id
       );
     },
-    [n, g]
+    [a, g]
   ), y = b(
     "space-y-6",
     {
@@ -4087,15 +4097,15 @@ const or = ({
       "max-w-4xl": r === "lg",
       "max-w-full": r === "full"
     },
-    a
+    n
   );
   return /* @__PURE__ */ e("div", { className: y, children: /* @__PURE__ */ e("div", { className: "space-y-8", children: t.map(p) }) });
-}, De = ({ item: t, isSelectedHandler: n, onClick: r }) => {
-  const [a, s] = V(!1), c = t.children && t.children.length > 0, h = () => {
-    c && s(!a);
-  }, g = n ? n(t.path) : !1;
-  return /* @__PURE__ */ d("li", { children: [
-    /* @__PURE__ */ d(
+}, Te = ({ item: t, isSelectedHandler: a, onClick: r }) => {
+  const [n, s] = V(!1), c = t.children && t.children.length > 0, f = () => {
+    c && s(!n);
+  }, g = a ? a(t.path) : !1;
+  return /* @__PURE__ */ i("li", { children: [
+    /* @__PURE__ */ i(
       "div",
       {
         className: b(
@@ -4107,45 +4117,45 @@ const or = ({
           }
         ),
         onClick: () => {
-          c ? h() : t.path && r?.(t.path);
+          c ? f() : t.path && r?.(t.path);
         },
         children: [
           t.icon && /* @__PURE__ */ e("span", { className: "mr-2", children: t.icon }),
           /* @__PURE__ */ e("span", { className: "flex-1", children: t.label }),
           t.count !== void 0 && t.count > 0 && /* @__PURE__ */ e("span", { className: "ml-2 mr-1.5", children: t.count }),
-          c && /* @__PURE__ */ e("span", { className: `${a ? "collapsed" : ""}`, children: /* @__PURE__ */ e(Re, { className: "w-4 h-4 text-muted" }) })
+          c && /* @__PURE__ */ e("span", { className: `${n ? "collapsed" : ""}`, children: /* @__PURE__ */ e(qe, { className: "w-4 h-4 text-muted" }) })
         ]
       }
     ),
-    c && !a && /* @__PURE__ */ e("ul", { className: "sidebar-menu-nested-items mb-1", children: t.children?.map((p, y) => /* @__PURE__ */ e(
-      De,
+    c && !n && /* @__PURE__ */ e("ul", { className: "sidebar-menu-nested-items mb-1", children: t.children?.map((p, y) => /* @__PURE__ */ e(
+      Te,
       {
         item: p,
-        isSelectedHandler: n,
+        isSelectedHandler: a,
         onClick: r
       },
       y
     )) })
   ] });
-}, cr = ({
+}, ir = ({
   title: t,
-  actionIcons: n,
+  actionIcons: a,
   items: r,
-  isSelectedHandler: a,
+  isSelectedHandler: n,
   onClick: s,
   preMenuItemsComponent: c
-}) => /* @__PURE__ */ d("div", { className: "flex flex-col h-screen mb-6", children: [
-  /* @__PURE__ */ d("div", { className: "sidebar-menu-header", children: [
+}) => /* @__PURE__ */ i("div", { className: "flex flex-col h-screen mb-6", children: [
+  /* @__PURE__ */ i("div", { className: "sidebar-menu-header", children: [
     /* @__PURE__ */ e("span", { className: "text-xl font-semibold text-default mb-2", children: t }),
-    /* @__PURE__ */ e("div", { className: "sidebar-menu-actions", children: n?.map((h, g) => /* @__PURE__ */ e("span", { className: "sidebar-menu-action-icon", children: h }, g)) })
+    /* @__PURE__ */ e("div", { className: "sidebar-menu-actions", children: a?.map((f, g) => /* @__PURE__ */ e("span", { className: "sidebar-menu-action-icon", children: f }, g)) })
   ] }),
   c && /* @__PURE__ */ e("div", { className: "sidebar-menu-pre-items mb-4", children: c }),
   /* @__PURE__ */ e("ul", { children: r.map(
-    (h, g) => !h.path && !h.label && !h.children ? /* @__PURE__ */ e("span", { className: "flex w-full h-4" }, g) : /* @__PURE__ */ e(
-      De,
+    (f, g) => !f.path && !f.label && !f.children ? /* @__PURE__ */ e("span", { className: "flex w-full h-4" }, g) : /* @__PURE__ */ e(
+      Te,
       {
-        item: h,
-        isSelectedHandler: a,
+        item: f,
+        isSelectedHandler: n,
         onClick: s
       },
       g
@@ -4153,16 +4163,16 @@ const or = ({
   ) })
 ] }), dr = ({
   level: t = 1,
-  size: n,
+  size: a,
   weight: r = "bold",
-  color: a = "current",
+  color: n = "current",
   align: s = "left",
   truncate: c = !1,
-  className: h,
+  className: f,
   children: g,
   ...p
 }) => {
-  const y = n || jt(t), u = b(
+  const y = a || Bt(t), u = b(
     "font-primary",
     // Size variants
     {
@@ -4185,15 +4195,15 @@ const or = ({
     },
     // Color variants — semantische `--text-*` tokens (light+dark) net als Text/Table.
     {
-      "text-primary": a === "primary",
-      "text-secondary": a === "secondary",
-      "text-[var(--text-accent)]": a === "accent",
-      "text-[var(--text-success)]": a === "success",
-      "text-warning": a === "warning",
-      "text-[var(--text-error)]": a === "error",
-      "text-info": a === "info",
-      "text-[var(--text-default)]": a === "neutral",
-      "text-current": a === "current"
+      "text-primary": n === "primary",
+      "text-secondary": n === "secondary",
+      "text-[var(--text-accent)]": n === "accent",
+      "text-[var(--text-success)]": n === "success",
+      "text-warning": n === "warning",
+      "text-[var(--text-error)]": n === "error",
+      "text-info": n === "info",
+      "text-[var(--text-default)]": n === "neutral",
+      "text-current": n === "current"
     },
     // Alignment
     {
@@ -4205,11 +4215,11 @@ const or = ({
     {
       truncate: c
     },
-    h
+    f
   ), l = `h${t}`;
   return /* @__PURE__ */ e(l, { className: u, ...p, children: g });
 };
-function jt(t) {
+function Bt(t) {
   return {
     1: "4xl",
     2: "3xl",
@@ -4219,14 +4229,14 @@ function jt(t) {
     6: "md"
   }[t] || "md";
 }
-const ir = ({
+const ur = ({
   items: t,
-  type: n = "unordered",
+  type: a = "unordered",
   variant: r = "default",
-  size: a = "md",
+  size: n = "md",
   interactive: s = !1,
   className: c,
-  itemClassName: h
+  itemClassName: f
 }) => {
   const g = b(
     // Base styles
@@ -4244,19 +4254,19 @@ const ir = ({
     },
     // Size variants
     {
-      "text-sm": a === "sm",
-      "text-base": a === "md",
-      "text-lg": a === "lg"
+      "text-sm": n === "sm",
+      "text-base": n === "md",
+      "text-lg": n === "lg"
     },
     c
-  ), p = (l, i) => b(
+  ), p = (l, d) => b(
     // Base item styles
     "transition-colors duration-200",
     // Size-based padding
     {
-      "py-1 px-2": a === "sm" && (r === "bordered" || r === "divided"),
-      "py-2 px-3": a === "md" && (r === "bordered" || r === "divided"),
-      "py-3 px-4": a === "lg" && (r === "bordered" || r === "divided")
+      "py-1 px-2": n === "sm" && (r === "bordered" || r === "divided"),
+      "py-2 px-3": n === "md" && (r === "bordered" || r === "divided"),
+      "py-3 px-4": n === "lg" && (r === "bordered" || r === "divided")
     },
     // Interactive styles
     s && !l.disabled && {
@@ -4267,151 +4277,152 @@ const ir = ({
     l.disabled && {
       "opacity-50 cursor-not-allowed": !0
     },
-    h
+    f
   ), y = (l) => {
     s && !l.disabled && l.onClick && l.onClick();
-  }, u = (l, i) => {
-    s && !i.disabled && (l.key === "Enter" || l.key === " ") && (l.preventDefault(), i.onClick?.());
+  }, u = (l, d) => {
+    s && !d.disabled && (l.key === "Enter" || l.key === " ") && (l.preventDefault(), d.onClick?.());
   };
-  return n === "ordered" ? /* @__PURE__ */ e("ol", { className: g, children: t.map((l, i) => /* @__PURE__ */ e(
+  return a === "ordered" ? /* @__PURE__ */ e("ol", { className: g, children: t.map((l, d) => /* @__PURE__ */ e(
     "li",
     {
       className: p(l),
       onClick: () => y(l),
-      onKeyDown: (f) => u(f, l),
+      onKeyDown: (h) => u(h, l),
       tabIndex: s && !l.disabled ? 0 : void 0,
       role: s ? "button" : void 0,
       children: l.content
     },
-    l.id || i
-  )) }) : n === "description" ? /* @__PURE__ */ e("dl", { className: g, children: t.map((l, i) => /* @__PURE__ */ e(
+    l.id || d
+  )) }) : a === "description" ? /* @__PURE__ */ e("dl", { className: g, children: t.map((l, d) => /* @__PURE__ */ e(
     "div",
     {
       className: p(l),
       onClick: () => y(l),
-      onKeyDown: (f) => u(f, l),
+      onKeyDown: (h) => u(h, l),
       tabIndex: s && !l.disabled ? 0 : void 0,
       role: s ? "button" : void 0,
       children: l.content
     },
-    l.id || i
-  )) }) : /* @__PURE__ */ e("ul", { className: g, children: t.map((l, i) => /* @__PURE__ */ e(
+    l.id || d
+  )) }) : /* @__PURE__ */ e("ul", { className: g, children: t.map((l, d) => /* @__PURE__ */ e(
     "li",
     {
       className: p(l),
       onClick: () => y(l),
-      onKeyDown: (f) => u(f, l),
+      onKeyDown: (h) => u(h, l),
       tabIndex: s && !l.disabled ? 0 : void 0,
       role: s ? "button" : void 0,
       children: l.content
     },
-    l.id || i
+    l.id || d
   )) });
-}, ur = ({
+}, mr = ({
   commands: t,
-  isOpen: n,
+  isOpen: a,
   onClose: r,
-  labels: a,
+  labels: n,
   initialCommandPath: s,
   initialActiveIndex: c
 }) => {
-  const [h, g] = V(""), [p, y] = V(s || []), [u, l] = V(c || 0), i = X(null), f = X(null), N = (p.length ? t.find((k) => k.id === p[0])?.subCommands || [] : t).filter(
-    (k) => k.label.toLowerCase().includes(h.toLowerCase())
+  const [f, g] = V(""), [p, y] = V(s || []), [u, l] = V(c || 0), d = X(null), h = X(null), w = (p.length ? t.find((N) => N.id === p[0])?.subCommands || [] : t).filter(
+    (N) => N.label.toLowerCase().includes(f.toLowerCase())
   );
   return G(() => {
-    n || (g(""), y(s || []), l(c || 0));
-  }, [n]), G(() => {
-    const k = (B) => {
-      if (n) {
+    a || (g(""), y(s || []), l(c || 0));
+  }, [a]), G(() => {
+    const N = (B) => {
+      if (a) {
         if (B.key === "Escape")
           r();
         else if (B.key === "ArrowUp")
           l(
-            (x) => x > 0 ? x - 1 : N.length - 1
+            (x) => x > 0 ? x - 1 : w.length - 1
           );
         else if (B.key === "ArrowDown")
           l(
-            (x) => x < N.length - 1 ? x + 1 : 0
+            (x) => x < w.length - 1 ? x + 1 : 0
           );
         else if (B.key === "Enter") {
-          const x = N[u];
+          const x = w[u];
           x && (x.subCommands ? (y([...p, x.id]), l(0)) : x.action && (x.action(), r()));
         }
       }
     };
-    return document.addEventListener("keydown", k), () => document.removeEventListener("keydown", k);
-  }, [n, r, N, u, p]), G(() => {
-    const k = (B) => {
-      i.current && !i.current.contains(B.target) && r();
+    return document.addEventListener("keydown", N), () => document.removeEventListener("keydown", N);
+  }, [a, r, w, u, p]), G(() => {
+    const N = (B) => {
+      d.current && !d.current.contains(B.target) && r();
     };
-    return n && document.addEventListener("mousedown", k), () => document.removeEventListener("mousedown", k);
-  }, [n, r]), G(() => {
-    if (!n) return;
-    f.current?.querySelector(`[data-index="${u}"]`)?.scrollIntoView({ block: "nearest" });
-  }, [u, n]), n ? /* @__PURE__ */ e("div", { className: "fixed inset-0 z-50 flex items-center justify-center shadow-lvl-0", children: /* @__PURE__ */ d(
+    return a && document.addEventListener("mousedown", N), () => document.removeEventListener("mousedown", N);
+  }, [a, r]), G(() => {
+    if (!a) return;
+    h.current?.querySelector(`[data-index="${u}"]`)?.scrollIntoView({ block: "nearest" });
+  }, [u, a]), a ? /* @__PURE__ */ e("div", { className: "fixed inset-0 z-50 flex items-center justify-center shadow-lvl-0", children: /* @__PURE__ */ i(
     "div",
     {
-      className: "flex flex-col w-full max-w-lg max-h-[80vh] p-2 mx-auto rounded-lg shadow-lg bg-white",
-      ref: i,
+      className: "flex flex-col w-full max-w-lg max-h-[80vh] p-2 mx-auto rounded-xl border border-neutral shadow-lg bg-module",
+      ref: d,
       children: [
-        /* @__PURE__ */ e(
-          "input",
-          {
-            type: "text",
-            placeholder: a?.searchPlaceholder || "Search commands...",
-            value: h,
-            onChange: (k) => g(k.target.value),
-            className: "w-full px-4 py-2 text-gray-800 border-none border-b border-gray-200 focus:outline-none focus:ring-0 rounded-lg bg-transparent flex-shrink-0"
-          }
-        ),
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ i("div", { className: "flex items-center gap-2 px-3 flex-shrink-0", children: [
+          /* @__PURE__ */ e($e, { className: "w-4 h-4 text-muted shrink-0" }),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              type: "text",
+              autoFocus: !0,
+              placeholder: n?.searchPlaceholder || "Search commands...",
+              value: f,
+              onChange: (N) => g(N.target.value),
+              className: "w-full py-2 text-default focus:outline-none focus:ring-0 bg-transparent"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ i(
           "div",
           {
-            ref: f,
-            className: "mt-2 pt-2 text-sm border-t border-gray-200 max-h-[50vh] overflow-y-auto",
+            ref: h,
+            className: "mt-2 pt-2 text-sm border-t border-neutral max-h-[50vh] overflow-y-auto",
             children: [
-              N.length === 0 && /* @__PURE__ */ e("div", { className: "text-gray-500 text-center text-sm", children: a?.noCommandsFound || "No commands found" }),
-              N.map((k, B) => /* @__PURE__ */ d(
+              w.length === 0 && /* @__PURE__ */ e("div", { className: "text-muted text-center text-sm", children: n?.noCommandsFound || "No commands found" }),
+              w.map((N, B) => /* @__PURE__ */ i(
                 "div",
                 {
                   "data-index": B,
-                  className: `flex items-center p-2 cursor-pointer rounded-md text-secondary-800 ${B === u ? "bg-gray-100" : ""}`,
+                  className: `flex items-center p-2 cursor-pointer rounded-md text-default ${B === u ? "bg-neutral-container" : ""}`,
                   onClick: () => {
-                    k.subCommands ? (y([...p, k.id]), l(0)) : k.action && (k.action(), r());
+                    N.subCommands ? (y([...p, N.id]), l(0)) : N.action && (N.action(), r());
                   },
                   onMouseEnter: () => l(B),
                   children: [
-                    k.icon && /* @__PURE__ */ e("span", { className: "mr-3", children: k.icon }),
-                    /* @__PURE__ */ e("span", { className: "flex-grow", children: k.label }),
-                    k.subCommands && /* @__PURE__ */ e("span", { className: "text-gray-400", children: /* @__PURE__ */ e(qe, { className: "w-4 h-4" }) })
+                    N.icon && /* @__PURE__ */ e("span", { className: "mr-3", children: N.icon }),
+                    /* @__PURE__ */ e("span", { className: "flex-grow", children: N.label }),
+                    N.subCommands && /* @__PURE__ */ e("span", { className: "text-muted", children: /* @__PURE__ */ e(He, { className: "w-4 h-4" }) })
                   ]
                 },
-                k.id
+                N.id
               ))
             ]
           }
         ),
-        /* @__PURE__ */ d("div", { className: "flex items-center justify-between pt-2 mt-2 text-xs text-gray-500 border-t border-gray-200", children: [
-          /* @__PURE__ */ d("span", { children: [
-            /* @__PURE__ */ e("span", { className: "font-bold", children: "↑↓" }),
-            " ",
-            a?.navigate || "to navigate"
+        /* @__PURE__ */ i("div", { className: "flex items-center gap-4 px-3 pt-2 mt-2 text-xs text-muted border-t border-neutral", children: [
+          /* @__PURE__ */ i("span", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ e("kbd", { className: "inline-flex items-center justify-center min-w-[1.25rem] px-1 py-0.5 rounded border border-neutral bg-module-subtle text-[10px] font-medium not-italic", children: "↑↓" }),
+            n?.navigate || "to navigate"
           ] }),
-          /* @__PURE__ */ d("span", { children: [
-            /* @__PURE__ */ e("span", { className: "font-bold", children: "↵" }),
-            " ",
-            a?.select || "to select"
+          /* @__PURE__ */ i("span", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ e("kbd", { className: "inline-flex items-center justify-center min-w-[1.25rem] px-1 py-0.5 rounded border border-neutral bg-module-subtle text-[10px] font-medium not-italic", children: "↵" }),
+            n?.select || "to select"
           ] }),
-          /* @__PURE__ */ d("span", { children: [
-            /* @__PURE__ */ e("span", { className: "font-bold", children: "Esc" }),
-            " ",
-            a?.close || "to close"
+          /* @__PURE__ */ i("span", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ e("kbd", { className: "inline-flex items-center justify-center min-w-[1.25rem] px-1 py-0.5 rounded border border-neutral bg-module-subtle text-[10px] font-medium not-italic", children: "Esc" }),
+            n?.close || "to close"
           ] })
         ] })
       ]
     }
   ) }) : null;
-}, Bt = {
+}, Pt = {
   none: "p-0",
   xs: "p-1",
   sm: "p-2",
@@ -4419,7 +4430,7 @@ const ir = ({
   lg: "p-6",
   xl: "p-8",
   "2xl": "p-12"
-}, Pt = {
+}, _t = {
   none: "m-0",
   xs: "m-1",
   sm: "m-2",
@@ -4427,7 +4438,7 @@ const ir = ({
   lg: "m-6",
   xl: "m-8",
   "2xl": "m-12"
-}, _t = {
+}, Ot = {
   none: "",
   primary: "bg-primary",
   secondary: "bg-secondary",
@@ -4443,26 +4454,26 @@ const ir = ({
   backdrop: "bg-backdrop",
   editor: "bg-editor",
   input: "bg-input"
-}, Ot = {
+}, Vt = {
   none: "rounded-none",
   sm: "rounded-sm",
   md: "rounded-md",
   lg: "rounded-lg",
   xl: "rounded-xl",
   full: "rounded-full"
-}, Vt = {
+}, Ft = {
   none: "shadow-none",
   sm: "shadow-sm shadow-lvl-0",
   md: "shadow-md shadow-lvl-0",
   lg: "shadow-lg shadow-lvl-0",
   xl: "shadow-xl shadow-lvl-0",
   "2xl": "shadow-2xl shadow-lvl-0"
-}, Ft = {
+}, Wt = {
   none: "border-0",
   sm: "border",
   md: "border-2",
   lg: "border-4"
-}, Wt = {
+}, Rt = {
   primary: "border-primary",
   secondary: "border-secondary",
   accent: "border-accent",
@@ -4472,15 +4483,15 @@ const ir = ({
   info: "border-info",
   neutral: "border-neutral",
   white: "border-white"
-}, Te = ce(
+}, Ae = ce(
   ({
     padding: t,
-    margin: n,
+    margin: a,
     background: r,
-    radius: a,
+    radius: n,
     shadow: s,
     border: c,
-    borderColor: h,
+    borderColor: f,
     className: g,
     children: p,
     ...y
@@ -4489,13 +4500,13 @@ const ir = ({
     {
       ref: u,
       className: b(
-        t && Bt[t],
-        n && Pt[n],
-        r && _t[r],
-        a && Ot[a],
-        s && Vt[s],
-        c && Ft[c],
-        h && Wt[h],
+        t && Pt[t],
+        a && _t[a],
+        r && Ot[r],
+        n && Vt[n],
+        s && Ft[s],
+        c && Wt[c],
+        f && Rt[f],
         g
       ),
       ...y,
@@ -4503,74 +4514,74 @@ const ir = ({
     }
   )
 );
-Te.displayName = "Box";
-const mr = ({ children: t, title: n, ...r }) => /* @__PURE__ */ d(Te, { background: "module", radius: "xl", shadow: "sm", ...r, children: [
-  n && /* @__PURE__ */ e("span", { className: "text-base font-medium text-default mb-2", children: n }),
+Ae.displayName = "Box";
+const fr = ({ children: t, title: a, ...r }) => /* @__PURE__ */ i(Ae, { background: "module", radius: "xl", shadow: "sm", ...r, children: [
+  a && /* @__PURE__ */ e("span", { className: "text-base font-medium text-default mb-2", children: a }),
   t
 ] });
 function hr({
   identifier: t,
-  resourceLoader: n,
+  resourceLoader: a,
   framework: r = "react",
-  fallback: a,
+  fallback: n,
   componentProps: s,
   className: c
 }) {
-  const h = X(null), [g, p] = V(!0), [y, u] = V(null), l = X(null);
+  const f = X(null), [g, p] = V(!0), [y, u] = V(null), l = X(null);
   return X(null), G(() => {
-    let i = !0;
+    let d = !0;
     return (async () => {
       p(!0);
       try {
-        const C = await n();
-        if (!i) return;
-        const N = C.component || C.default || C;
-        u(r === "react" ? () => N : () => C);
+        const C = await a();
+        if (!d) return;
+        const w = C.component || C.default || C;
+        u(r === "react" ? () => w : () => C);
       } catch (C) {
         console.error(`[FederatedResource] Load failed: ${t}`, C);
       } finally {
-        i && p(!1);
+        d && p(!1);
       }
     })(), () => {
-      i = !1;
+      d = !1;
     };
-  }, [t, n]), G(() => {
+  }, [t, a]), G(() => {
     if (g || !y || r === "react") return;
-    const i = h.current;
-    if (i) {
+    const d = f.current;
+    if (d) {
       if (r === "svelte") {
-        const f = y.default || y, C = new f({ target: i, props: s || {} });
+        const h = y.default || y, C = new h({ target: d, props: s || {} });
         return l.current = C, () => C.$destroy();
       }
       if (y.mount) {
-        const f = y.mount({ container: i, props: s || {} });
+        const h = y.mount({ container: d, props: s || {} });
         return () => {
-          typeof f == "function" ? f() : y.unmount?.(i);
+          typeof h == "function" ? h() : y.unmount?.(d);
         };
       }
     }
   }, [y, r, g]), G(() => {
     r === "svelte" && l.current && l.current.$set?.(s);
-  }, [s, r]), /* @__PURE__ */ d("div", { ref: h, className: c, style: { display: "contents" }, children: [
-    g && a,
+  }, [s, r]), /* @__PURE__ */ i("div", { ref: f, className: c, style: { display: "contents" }, children: [
+    g && n,
     r === "react" && y && /* @__PURE__ */ e(y, { ...s })
   ] });
 }
-class fr extends Ue {
+class pr extends Ge {
   constructor() {
     super(...arguments), this.state = {
       hasError: !1,
       error: null
     };
   }
-  static getDerivedStateFromError(n) {
-    return { hasError: !0, error: n };
+  static getDerivedStateFromError(a) {
+    return { hasError: !0, error: a };
   }
-  componentDidCatch(n, r) {
-    console.error(`[ErrorBoundary] Error in ${this.props.name || "Component"}:`, n, r);
+  componentDidCatch(a, r) {
+    console.error(`[ErrorBoundary] Error in ${this.props.name || "Component"}:`, a, r);
   }
   render() {
-    return this.state.hasError ? this.props.fallback ? this.props.fallback : /* @__PURE__ */ d("div", { className: "p-4 m-4 border border-red-200 bg-red-50 rounded-lg", children: [
+    return this.state.hasError ? this.props.fallback ? this.props.fallback : /* @__PURE__ */ i("div", { className: "p-4 m-4 border border-red-200 bg-red-50 rounded-lg", children: [
       /* @__PURE__ */ e("h2", { className: "text-lg font-semibold text-red-800", children: "Something went wrong" }),
       /* @__PURE__ */ e("p", { className: "text-sm text-red-600 mt-1", children: this.props.name ? `Error in ${this.props.name}` : "The component failed to render." }),
       /* @__PURE__ */ e(
@@ -4585,45 +4596,45 @@ class fr extends Ue {
   }
 }
 export {
-  rr as Badge,
-  Te as Box,
+  nr as Badge,
+  Ae as Box,
   ee as Button,
-  Xt as ButtonGroup,
-  mr as Card,
+  Qt as ButtonGroup,
+  fr as Card,
   ge as Checkbox,
-  ur as CommandPalette,
-  it as ContentLoading,
+  mr as CommandPalette,
+  ut as ContentLoading,
   ye as DatePicker,
-  ut as Dropdown,
-  fr as ErrorBoundary,
+  mt as Dropdown,
+  pr as ErrorBoundary,
   hr as FederatedResource,
-  tr as Form,
+  rr as Form,
   dr as Heading,
   oe as Icon,
-  nr as Image,
-  Qt as Link,
-  ir as List,
-  Jt as MeetingGrid,
-  wt as Modal,
-  lr as PageHeader,
-  sr as PageToolbar,
-  Yt as ParticipantTile,
-  lt as SearchableTextField,
+  lr as Image,
+  er as Link,
+  ur as List,
+  Yt as MeetingGrid,
+  Ct as Modal,
+  sr as PageHeader,
+  or as PageToolbar,
+  Zt as ParticipantTile,
+  st as SearchableTextField,
   ve as Select,
-  cr as SidebarMenu,
+  ir as SidebarMenu,
   ar as Spinner,
-  $e as SplitButton,
-  St as StorageInput,
-  er as TabBar,
+  ze as SplitButton,
+  Lt as StorageInput,
+  tr as TabBar,
   Le as Table,
-  kt as Tabs,
+  wt as Tabs,
   Z as Text,
-  ke as TextArea,
+  Ne as TextArea,
   ue as TextField,
-  Zt as VideoSurface,
-  or as View,
+  Xt as VideoSurface,
+  cr as View,
   b as cn,
-  Kt as createSizes,
-  Gt as createVariants
+  Jt as createSizes,
+  Kt as createVariants
 };
 //# sourceMappingURL=index.js.map