@opencxh/ui-kit 3.57.1 → 3.57.2

package/dist/index.js

@@ -2,28 +2,28 @@ 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";
-function g(...r) {
-  return Ae(r);
+function b(...t) {
+  return Ae(t);
 }
-function Gr(r) {
-  return (n, t) => r[n]?.[t] || "";
+function Gt(t) {
+  return (n, r) => t[n]?.[r] || "";
 }
-function Kr(r) {
-  return (n) => r[n] || "";
+function Kt(t) {
+  return (n) => t[n] || "";
 }
-function Jr({ tiles: r, pinned: n, className: t }) {
+function Jt({ tiles: t, pinned: n, className: r }) {
   if (n)
-    return /* @__PURE__ */ d("div", { className: g("flex flex-col md:flex-row gap-2 h-full", t), children: [
+    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 }),
-      r.length > 0 && /* @__PURE__ */ e("div", { className: "flex md:flex-col gap-2 md:w-48 overflow-auto", children: r.map((s, c) => /* @__PURE__ */ e("div", { className: "min-w-[160px] md:min-w-0", children: s }, c)) })
+      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 = r.length <= 1 ? "grid-cols-1" : r.length <= 4 ? "grid-cols-2" : r.length <= 9 ? "grid-cols-3" : "grid-cols-4";
-  return /* @__PURE__ */ e("div", { className: g("grid gap-2 h-full", a, t), children: r.map((s, c) => /* @__PURE__ */ e("div", { 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)) });
 }
-function Yr({
-  name: r,
+function Yt({
+  name: t,
   avatarUrl: n,
-  muted: t,
+  muted: r,
   speaking: a,
   hasVideo: s,
   videoSlot: c,
@@ -32,36 +32,36 @@ function Yr({
   return /* @__PURE__ */ d(
     "div",
     {
-      className: g(
+      className: b(
         "relative rounded-lg overflow-hidden bg-gray-800 aspect-video flex items-center justify-center",
         a && "ring-2 ring-emerald-400",
         h
       ),
       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: r, 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" }) }) }),
+        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: [
-          t ? /* @__PURE__ */ e(Be, { className: "w-3 h-3" }) : /* @__PURE__ */ e(Pe, { className: "w-3 h-3" }),
-          /* @__PURE__ */ e("span", { className: "truncate max-w-[140px]", children: r })
+          r ? /* @__PURE__ */ e(Be, { className: "w-3 h-3" }) : /* @__PURE__ */ e(Pe, { className: "w-3 h-3" }),
+          /* @__PURE__ */ e("span", { className: "truncate max-w-[140px]", children: t })
         ] })
       ]
     }
   );
 }
-function Zr({ attach: r, active: n = !0, mirrored: t = !1, className: a }) {
+function Zt({ attach: t, active: n = !0, mirrored: r = !1, className: a }) {
   const s = X(null);
   return G(() => {
     if (!n || !s.current) return;
-    const c = r(s.current);
+    const c = t(s.current);
     return () => {
       typeof c == "function" && c(), s.current && (s.current.innerHTML = "");
     };
-  }, [r, n]), /* @__PURE__ */ e(
+  }, [t, n]), /* @__PURE__ */ e(
     "div",
     {
       ref: s,
-      className: g(
+      className: b(
         "w-full h-full bg-gray-900 overflow-hidden",
-        t && "[&>*]:scale-x-[-1]",
+        r && "[&>*]:scale-x-[-1]",
         a
       )
     }
@@ -89,14 +89,14 @@ const Ge = {
   full: "p-4"
 }, ee = ce(
   ({
-    variant: r = "primary",
+    variant: t = "primary",
     size: n = "md",
-    fullWidth: t = !1,
+    fullWidth: r = !1,
     loading: a = !1,
     leftIcon: s,
     rightIcon: c,
     iconOnly: h = !1,
-    className: b,
+    className: g,
     children: p,
     disabled: y,
     ...u
@@ -107,19 +107,19 @@ const Ge = {
       {
         ref: l,
         type: "button",
-        className: g(
+        className: b(
           // Base styles — radius/focus/colors come from the token-driven `.btn o__*` CSS
           "inline-flex items-center justify-center transition-colors duration-200",
           "disabled:opacity-50 disabled:cursor-not-allowed",
           // Variant styles
-          Ge[r],
+          Ge[t],
           // Size styles
           h ? Je[n] : Ke[n],
           // Full width
-          t && "w-full",
+          r && "w-full",
           // Loading state
           a && "cursor-wait",
-          b
+          g
         ),
         disabled: i,
         ...u,
@@ -127,7 +127,7 @@ const Ge = {
           a && /* @__PURE__ */ d(
             "svg",
             {
-              className: g(
+              className: b(
                 "animate-spin",
                 h ? "h-4 w-4" : "h-4 w-4 mr-2"
               ),
@@ -156,9 +156,9 @@ const Ge = {
               ]
             }
           ),
-          !a && s && /* @__PURE__ */ e("span", { className: g("flex-shrink-0", !h && "mr-2"), children: s }),
+          !a && s && /* @__PURE__ */ e("span", { className: b("flex-shrink-0", !h && "mr-2"), children: s }),
           !h && p,
-          !a && c && /* @__PURE__ */ e("span", { className: g("flex-shrink-0", !h && "ml-2"), children: c }),
+          !a && c && /* @__PURE__ */ e("span", { className: b("flex-shrink-0", !h && "ml-2"), children: c }),
           h && !a && !s && !c && p
         ]
       }
@@ -166,28 +166,28 @@ const Ge = {
   }
 );
 ee.displayName = "Button";
-const Xr = ({
-  children: r,
+const Xt = ({
+  children: t,
   size: n = "md",
-  orientation: t = "horizontal",
+  orientation: r = "horizontal",
   attached: a = !0,
   className: s
 }) => {
-  const c = g(
+  const c = b(
     "inline-flex",
     {
       // Orientation
-      "flex-row": t === "horizontal",
-      "flex-col": t === "vertical",
+      "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 && t === "horizontal",
-      "[&>*:last-child]:rounded-l-none": a && t === "horizontal",
-      "[&>*:first-child]:rounded-b-none": a && t === "vertical",
-      "[&>*:last-child]:rounded-t-none": a && t === "vertical",
+      "[&>*: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",
       // Borders for attached buttons
-      "[&>*:not(:first-child)]:-ml-px": a && t === "horizontal",
-      "[&>*:not(:first-child)]:-mt-px": a && t === "vertical",
+      "[&>*:not(:first-child)]:-ml-px": a && r === "horizontal",
+      "[&>*:not(:first-child)]:-mt-px": a && r === "vertical",
       // Spacing for non-attached buttons
       "gap-1": !a && n === "xs",
       "gap-2": !a && (n === "sm" || n === "md"),
@@ -195,21 +195,21 @@ const Xr = ({
     },
     s
   );
-  return /* @__PURE__ */ e("div", { className: c, role: "group", children: r });
-}, Qr = ({
-  variant: r = "default",
+  return /* @__PURE__ */ e("div", { className: c, role: "group", children: t });
+}, Qt = ({
+  variant: t = "default",
   size: n = "md",
-  color: t = "primary",
+  color: r = "primary",
   disabled: a = !1,
   external: s = !1,
   className: c,
   children: h,
-  href: b,
+  href: g,
   target: p,
   rel: y,
   ...u
 }) => {
-  const l = s || b && (b.startsWith("http") || b.startsWith("mailto:")), i = g(
+  const l = s || g && (g.startsWith("http") || g.startsWith("mailto:")), i = 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
@@ -223,40 +223,40 @@ const Xr = ({
     // Color variants
     {
       // Primary
-      "text-primary hover:text-primary/80 focus:ring-primary/20": t === "primary" && !a,
+      "text-primary hover:text-primary/80 focus:ring-primary/20": r === "primary" && !a,
       // Secondary
-      "text-secondary hover:text-secondary/80 focus:ring-secondary/20": t === "secondary" && !a,
+      "text-secondary hover:text-secondary/80 focus:ring-secondary/20": r === "secondary" && !a,
       // Accent
-      "text-accent hover:text-accent/80 focus:ring-accent/20": t === "accent" && !a,
+      "text-accent hover:text-accent/80 focus:ring-accent/20": r === "accent" && !a,
       // Success
-      "text-success hover:text-success/80 focus:ring-success/20": t === "success" && !a,
+      "text-success hover:text-success/80 focus:ring-success/20": r === "success" && !a,
       // Warning
-      "text-warning hover:text-warning/80 focus:ring-warning/20": t === "warning" && !a,
+      "text-warning hover:text-warning/80 focus:ring-warning/20": r === "warning" && !a,
       // Error
-      "text-error hover:text-error/80 focus:ring-error/20": t === "error" && !a,
+      "text-error hover:text-error/80 focus:ring-error/20": r === "error" && !a,
       // Info
-      "text-info hover:text-info/80 focus:ring-info/20": t === "info" && !a,
+      "text-info hover:text-info/80 focus:ring-info/20": r === "info" && !a,
       // Neutral
-      "text-neutral hover:text-neutral/80 focus:ring-neutral/20": t === "neutral" && !a
+      "text-neutral hover:text-neutral/80 focus:ring-neutral/20": r === "neutral" && !a
     },
     // Variant styles
     {
       // Default - just colored text
-      "": r === "default",
+      "": t === "default",
       // Subtle - muted colors
-      "text-opacity-70 hover:text-opacity-100": r === "subtle",
+      "text-opacity-70 hover:text-opacity-100": t === "subtle",
       // Underline - always underlined
-      "underline underline-offset-2 decoration-1 hover:decoration-2": r === "underline",
+      "underline underline-offset-2 decoration-1 hover:decoration-2": t === "underline",
       // Button - looks like a button
-      "px-3 py-1.5 rounded-md bg-opacity-10 hover:bg-opacity-20": r === "button",
-      "bg-primary": r === "button" && t === "primary",
-      "bg-secondary": r === "button" && t === "secondary",
-      "bg-accent": r === "button" && t === "accent",
-      "bg-success": r === "button" && t === "success",
-      "bg-warning": r === "button" && t === "warning",
-      "bg-error": r === "button" && t === "error",
-      "bg-info": r === "button" && t === "info",
-      "bg-neutral": r === "button" && t === "neutral"
+      "px-3 py-1.5 rounded-md bg-opacity-10 hover:bg-opacity-20": t === "button",
+      "bg-primary": t === "button" && r === "primary",
+      "bg-secondary": t === "button" && r === "secondary",
+      "bg-accent": t === "button" && r === "accent",
+      "bg-success": t === "button" && r === "success",
+      "bg-warning": t === "button" && r === "warning",
+      "bg-error": t === "button" && r === "error",
+      "bg-info": t === "button" && r === "info",
+      "bg-neutral": t === "button" && r === "neutral"
     },
     // Disabled state
     {
@@ -265,7 +265,7 @@ const Xr = ({
     c
   ), f = {
     ...u,
-    href: a ? void 0 : b,
+    href: a ? void 0 : g,
     target: l ? "_blank" : p,
     rel: l ? "noopener noreferrer" : y
   };
@@ -300,15 +300,15 @@ const Xr = ({
   md: "px-4 py-2 text-sm"
 };
 function $e({
-  label: r,
+  label: t,
   onClick: n,
-  variant: t = "primary",
+  variant: r = "primary",
   size: a = "md",
   icon: s,
   options: c,
   disabled: h = !1
 }) {
-  const [b, p] = V(!1), y = X(null), u = ae(() => {
+  const [g, p] = V(!1), y = X(null), u = ae(() => {
     p((l) => !l);
   }, []);
   return G(() => {
@@ -323,17 +323,17 @@ function $e({
         type: "button",
         onClick: n,
         disabled: h,
-        className: g(
+        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[t],
+          Se[r],
           Ye[a],
           "!rounded-r-none"
         ),
         children: [
           s && /* @__PURE__ */ e("span", { className: "mr-2 flex-shrink-0", children: s }),
-          r
+          t
         ]
       }
     ),
@@ -343,25 +343,25 @@ function $e({
         type: "button",
         onClick: u,
         disabled: h,
-        className: g(
+        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[t],
+          Se[r],
           a === "sm" ? "px-1.5 py-1.5" : "px-2 py-2",
           "!rounded-l-none"
         ),
         children: /* @__PURE__ */ e(_e, { className: "h-4 w-4" })
       }
     ),
-    b && 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(
+    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(
       "button",
       {
         type: "button",
         onClick: () => {
           l.onClick(), p(!1);
         },
-        className: g(
+        className: b(
           "w-full text-left px-3 py-2 text-sm hover:bg-gray-50 transition-colors",
           l.variant === "destructive" ? "text-red-600 hover:bg-red-50" : "text-gray-700"
         ),
@@ -381,23 +381,23 @@ const Ze = {
   md: "text-sm",
   lg: "text-base",
   full: "text-base"
-}, be = ce(
+}, ge = ce(
   ({
-    label: r,
+    label: t,
     helperText: n,
-    error: t,
+    error: r,
     size: a = "md",
     indeterminate: s = !1,
     containerClassName: c,
     labelClassName: h,
-    className: b,
+    className: g,
     id: p,
     ...y
   }, u) => {
-    const l = p || `checkbox-${Math.random().toString(36).substr(2, 9)}`, i = !!t;
+    const l = p || `checkbox-${Math.random().toString(36).substr(2, 9)}`, i = !!r;
     return se.useEffect(() => {
       u && typeof u == "object" && u.current && (u.current.indeterminate = s);
-    }, [s, u]), /* @__PURE__ */ d("div", { className: g("flex flex-col", c), children: [
+    }, [s, u]), /* @__PURE__ */ d("div", { className: b("flex flex-col", c), children: [
       /* @__PURE__ */ d("div", { className: "flex items-start", children: [
         /* @__PURE__ */ e("div", { className: "flex items-center h-5", children: /* @__PURE__ */ e(
           "input",
@@ -405,7 +405,7 @@ const Ze = {
             ref: u,
             id: l,
             type: "checkbox",
-            className: g(
+            className: b(
               // Base styles
               "rounded border transition-colors duration-200",
               "focus:ring-2 focus:ring-offset-2 focus:outline-none",
@@ -414,46 +414,46 @@ const Ze = {
               Ze[a],
               // 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",
-              b
+              g
             ),
             ...y
           }
         ) }),
-        r && /* @__PURE__ */ d("div", { className: "ml-3 flex-1", children: [
+        t && /* @__PURE__ */ d("div", { className: "ml-3 flex-1", children: [
           /* @__PURE__ */ e(
             "label",
             {
               htmlFor: l,
-              className: g(
+              className: b(
                 "font-medium cursor-pointer",
                 i ? "text-error" : "text-secondary-900 dark:text-secondary-100",
                 Xe[a],
                 h
               ),
-              children: r
+              children: t
             }
           ),
-          n && !t && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-secondary-500 dark:text-secondary-400", children: n })
+          n && !r && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-secondary-500 dark:text-secondary-400", children: n })
         ] })
       ] }),
-      t && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-error", children: t })
+      r && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-error", children: r })
     ] });
   }
 );
-be.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" }) }), er = () => /* @__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" }) }), rr = () => /* @__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: r,
+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(({
+  value: t,
   onChange: n,
-  placeholder: t = "Select date",
+  placeholder: r = "Select date",
   disabled: a = !1,
   required: s = !1,
   size: c = "md",
   className: h,
-  minDate: b,
+  minDate: g,
   maxDate: p,
   format: y = "MM/dd/yyyy"
 }, u) => {
-  const [l, i] = V(!1), [f, C] = V(() => r || /* @__PURE__ */ new Date()), N = X(null);
+  const [l, i] = V(!1), [f, C] = V(() => t || /* @__PURE__ */ new Date()), N = X(null);
   G(() => {
     const z = (v) => {
       N.current && !N.current.contains(v.target) && i(!1);
@@ -482,14 +482,14 @@ const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
       $.push(new Date(L)), L.setDate(L.getDate() + 1);
     return $;
   }, x = (z) => {
-    z.getMonth() === f.getMonth() && (b && z < b || p && z > p || (n?.(z), i(!1)));
+    z.getMonth() === f.getMonth() && (g && z < g || p && z > p || (n?.(z), i(!1)));
   }, q = () => {
     C(new Date(f.getFullYear(), f.getMonth() - 1, 1));
   }, K = () => {
     C(new Date(f.getFullYear(), f.getMonth() + 1, 1));
   }, H = () => {
     n?.(null), i(!1);
-  }, F = g(
+  }, 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",
@@ -523,13 +523,13 @@ const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
         {
           ref: u,
           type: "text",
-          value: k(r ?? null),
-          placeholder: t,
+          value: k(t ?? null),
+          placeholder: r,
           disabled: a,
           required: s,
           readOnly: !0,
           onClick: () => !a && i(!l),
-          className: g(F, "pr-10 cursor-pointer")
+          className: b(F, "pr-10 cursor-pointer")
         }
       ),
       /* @__PURE__ */ e(
@@ -550,7 +550,7 @@ const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
           {
             onClick: q,
             className: "p-1 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded",
-            children: /* @__PURE__ */ e(er, {})
+            children: /* @__PURE__ */ e(et, {})
           }
         ),
         /* @__PURE__ */ d("h3", { className: "text-sm font-medium text-neutral-900 dark:text-neutral-100", children: [
@@ -563,19 +563,19 @@ const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
           {
             onClick: K,
             className: "p-1 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded",
-            children: /* @__PURE__ */ e(rr, {})
+            children: /* @__PURE__ */ e(tt, {})
           }
         )
       ] }),
       /* @__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", children: E.map((z, v) => {
-        const T = z.getMonth() === f.getMonth(), m = r && z.toDateString() === r.toDateString(), $ = z.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), L = !T || b && z < b || p && z > p;
+        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;
         return /* @__PURE__ */ e(
           "button",
           {
             onClick: () => !L && x(z),
             disabled: L,
-            className: g(
+            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,
@@ -609,10 +609,10 @@ const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
       ] })
     ] })
   ] });
-}), de = (...r) => r.filter(Boolean).join(" "), tr = (r) => /* @__PURE__ */ e(
+}), de = (...t) => t.filter(Boolean).join(" "), rt = (t) => /* @__PURE__ */ e(
   "svg",
   {
-    ...r,
+    ...t,
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
@@ -627,10 +627,10 @@ const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
       }
     )
   }
-), ar = (r) => /* @__PURE__ */ e(
+), at = (t) => /* @__PURE__ */ e(
   "svg",
   {
-    ...r,
+    ...t,
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
@@ -645,7 +645,7 @@ const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
       }
     )
   }
-), nr = {
+), nt = {
   sm: "px-3 py-1.5 text-sm",
   md: "px-3 py-2 text-sm",
   lg: "px-3 py-2 text-sm",
@@ -655,16 +655,16 @@ 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"
-}, lr = ce(
+}, lt = ce(
   ({
-    label: r,
+    label: t,
     helperText: n,
-    error: t,
+    error: r,
     size: a = "md",
     fullWidth: s = !1,
-    startIcon: c = /* @__PURE__ */ e(tr, {}),
+    startIcon: c = /* @__PURE__ */ e(rt, {}),
     loading: h = !1,
-    containerClassName: b,
+    containerClassName: g,
     labelClassName: p,
     className: y,
     id: u,
@@ -676,7 +676,7 @@ const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
     onChange: k,
     ...B
   }, x) => {
-    const q = u || `searchfield-${Math.random().toString(36).substr(2, 9)}`, K = !!t, 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(N || ""), [z, v] = V(!1), [T, m] = V(!1);
     G(() => {
       N !== void 0 && J(N);
     }, [N]);
@@ -718,19 +718,19 @@ const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
       J(W.label), v(!1), f && f(W.value);
     }, P = () => {
       (l.length > 0 || i) && v(!0);
-    }, M = h || T, re = z && ($.length > 0 || M), ne = ie(() => x || F, [x]);
+    }, M = h || T, te = z && ($.length > 0 || M), ne = ie(() => x || F, [x]);
     return /* @__PURE__ */ d(
       "div",
       {
         className: de(
           "flex flex-col",
           s ? "w-full" : "",
-          b || "",
+          g || "",
           "relative"
         ),
         ref: H,
         children: [
-          r && /* @__PURE__ */ e(
+          t && /* @__PURE__ */ e(
             "label",
             {
               htmlFor: q,
@@ -739,7 +739,7 @@ const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
                 K ? "text-red-500" : "text-gray-700 dark:text-gray-300",
                 p || ""
               ),
-              children: r
+              children: t
             }
           ),
           /* @__PURE__ */ d("div", { className: "relative", children: [
@@ -758,7 +758,7 @@ const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
                   "placeholder-gray-500 dark:placeholder-gray-500 focus:outline-none",
                   "disabled:opacity-50 disabled:cursor-not-allowed",
                   // Size styles
-                  nr[a],
+                  nt[a],
                   // Icon padding
                   c ? "pl-10" : "",
                   "pr-10",
@@ -805,7 +805,7 @@ const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
             ) : (
               // Dropdown Chevron
               /* @__PURE__ */ e(
-                ar,
+                at,
                 {
                   className: de(
                     "text-gray-400 cursor-pointer transition-transform",
@@ -817,7 +817,7 @@ const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
               )
             ) })
           ] }),
-          re && /* @__PURE__ */ e(
+          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",
@@ -835,14 +835,14 @@ const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
               )) : /* @__PURE__ */ e("li", { className: "px-4 py-2 text-gray-500 dark:text-gray-400", children: M || h ? "Zoeken op afstand..." : "Geen resultaten gevonden." })
             }
           ),
-          (t || n) && /* @__PURE__ */ e(
+          (r || n) && /* @__PURE__ */ e(
             "p",
             {
               className: de(
                 "mt-1 text-xs",
                 K ? "text-red-500" : "text-gray-500"
               ),
-              children: t || n
+              children: r || n
             }
           ),
           i && /* @__PURE__ */ d("p", { className: "mt-2 text-xs text-green-600 dark:text-green-400", children: [
@@ -854,22 +854,22 @@ const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
     );
   }
 );
-lr.displayName = "SearchableTextField";
-const sr = {
+lt.displayName = "SearchableTextField";
+const st = {
   sm: "px-3 py-1.5 text-sm",
   md: "px-3 py-2 text-sm",
   lg: "px-3 py-2 text-sm",
   full: "px-3 py-2 text-sm"
-}, me = (r) => r.trim().toLowerCase(), ve = ce(
+}, me = (t) => t.trim().toLowerCase(), ve = ce(
   ({
-    label: r,
+    label: t,
     helperText: n,
-    error: t,
+    error: r,
     size: a = "md",
     fullWidth: s = !1,
     options: c,
     placeholder: h,
-    containerClassName: b,
+    containerClassName: g,
     labelClassName: p,
     className: y,
     id: u,
@@ -881,7 +881,7 @@ const sr = {
     onCreateOption: k,
     ...B
   }, x) => {
-    const q = u || `select-${Math.random().toString(36).substr(2, 9)}`, K = !!t, [H, F] = se.useState(!1), [E, J] = se.useState(""), z = se.useRef(null), [v, T] = se.useState(c);
+    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);
     se.useImperativeHandle(x, () => z.current), se.useEffect(() => {
       const S = (I) => {
         z.current && !z.current.contains(I.target) && F(!1);
@@ -896,8 +896,8 @@ const sr = {
     ), $ = se.useCallback(
       (S, I) => {
         const O = [...S], A = (Q) => {
-          const te = (Q ?? "").trim();
-          te && (m(O, te) || O.push({ value: te, label: te }));
+          const re = (Q ?? "").trim();
+          re && (m(O, re) || O.push({ value: re, label: re }));
         };
         return Array.isArray(I) ? I.forEach(A) : A(I), O;
       },
@@ -921,7 +921,7 @@ const sr = {
       (S) => Array.isArray(f) && f.includes(S.value)
     ) : [], M = l && E ? v.filter(
       (S) => S.label.toLowerCase().includes(E.toLowerCase())
-    ) : v, re = !!N && !!l && !!E.trim() && !m(v, E), ne = (S) => {
+    ) : v, te = !!N && !!l && !!E.trim() && !m(v, E), ne = (S) => {
       const I = S.trim();
       if (!I) return;
       const O = k?.(I) ?? {
@@ -938,24 +938,24 @@ const sr = {
       "div",
       {
         ref: z,
-        className: g(
+        className: b(
           "relative flex flex-col",
           s && "w-full",
-          b
+          g
         ),
         ...B,
         children: [
-          r && /* @__PURE__ */ e(
+          t && /* @__PURE__ */ e(
             "label",
             {
               htmlFor: q,
               onClick: () => F(!H),
-              className: g(
+              className: b(
                 "block text-sm font-medium mb-1",
                 K ? "text-error" : "text-secondary-700 dark:text-secondary-300",
                 p
               ),
-              children: r
+              children: t
             }
           ),
           /* @__PURE__ */ d("div", { className: "relative", children: [
@@ -965,12 +965,12 @@ const sr = {
                 type: "button",
                 id: q,
                 onClick: () => F(!H),
-                className: g(
+                className: b(
                   "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",
-                  sr[a],
+                  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",
                   y
                 ),
@@ -986,18 +986,18 @@ const sr = {
                   value: E,
                   onChange: (S) => J(S.target.value),
                   onKeyDown: (S) => {
-                    S.key === "Enter" && re && (S.preventDefault(), ne(E));
+                    S.key === "Enter" && te && (S.preventDefault(), ne(E));
                   },
-                  className: g(
+                  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"
                   )
                 }
               ) }),
-              re && /* @__PURE__ */ d(
+              te && /* @__PURE__ */ d(
                 "div",
                 {
-                  className: g(
+                  className: b(
                     "px-4 py-2 text-sm cursor-pointer",
                     "text-primary hover:bg-gray-100 dark:hover:bg-secondary-700"
                   ),
@@ -1026,7 +1026,7 @@ const sr = {
                     "li",
                     {
                       onClick: () => !S.disabled && L(S.value),
-                      className: g(
+                      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",
@@ -1051,14 +1051,14 @@ const sr = {
               ] })
             ] })
           ] }),
-          (t || n) && /* @__PURE__ */ e(
+          (r || n) && /* @__PURE__ */ e(
             "p",
             {
-              className: g(
+              className: b(
                 "mt-1 text-xs",
                 K ? "text-error" : "text-secondary-500"
               ),
-              children: t || n
+              children: r || n
             }
           )
         ]
@@ -1067,38 +1067,38 @@ const sr = {
   }
 );
 ve.displayName = "Select";
-const or = {
+const ot = {
   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(
   ({
-    label: r,
+    label: t,
     helperText: n,
-    error: t,
+    error: r,
     size: a = "md",
     fullWidth: s = !1,
     loading: c = !1,
     containerClassName: h,
-    labelClassName: b,
+    labelClassName: g,
     className: p,
     id: y,
     rows: u = 4,
     ...l
   }, i) => {
-    const f = y || `textarea-${Math.random().toString(36).substr(2, 9)}`, C = !!t;
-    return /* @__PURE__ */ d("div", { className: g("flex flex-col", s && "w-full", h), children: [
-      r && /* @__PURE__ */ e(
+    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: [
+      t && /* @__PURE__ */ e(
         "label",
         {
           htmlFor: f,
-          className: g(
+          className: b(
             "block text-sm font-medium mb-1",
             C ? "text-error" : "text-secondary-700 dark:text-secondary-300",
-            b
+            g
           ),
-          children: r
+          children: t
         }
       ),
       /* @__PURE__ */ d("div", { className: "relative", children: [
@@ -1108,13 +1108,13 @@ const or = {
             ref: i,
             id: f,
             rows: u,
-            className: g(
+            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",
               "disabled:opacity-50 disabled:cursor-not-allowed",
               // Size styles
-              or[a],
+              ot[a],
               // 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",
               p
@@ -1152,75 +1152,75 @@ const or = {
           }
         ) })
       ] }),
-      (t || n) && /* @__PURE__ */ e(
+      (r || n) && /* @__PURE__ */ e(
         "p",
         {
-          className: g(
+          className: b(
             "mt-1 text-xs",
             C ? "text-error" : "text-secondary-500"
           ),
-          children: t || n
+          children: r || n
         }
       )
     ] });
   }
 );
 ke.displayName = "TextArea";
-const cr = {
+const ct = {
   sm: "px-3 py-1.5 text-sm",
   md: "px-3 py-2 text-sm",
   lg: "px-3 py-2 text-sm",
   full: "px-3 py-2 text-sm"
-}, ge = {
+}, be = {
   sm: "h-4 w-4",
   md: "h-5 w-5",
   lg: "h-6 w-6",
   full: "h-6 w-6"
 }, ue = ce(
   ({
-    label: r,
+    label: t,
     helperText: n,
-    error: t,
+    error: r,
     size: a = "md",
     fullWidth: s = !1,
     startIcon: c,
     endIcon: h,
-    loading: b = !1,
+    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 = !!t;
-    return /* @__PURE__ */ d("div", { className: g("flex flex-col", s && "w-full", p), children: [
-      r && /* @__PURE__ */ e(
+    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: [
+      t && /* @__PURE__ */ e(
         "label",
         {
           htmlFor: C,
-          className: g(
+          className: b(
             "block text-sm font-medium mb-1",
             N ? "text-error" : "text-secondary-700 dark:text-secondary-300",
             y
           ),
-          children: r
+          children: t
         }
       ),
       /* @__PURE__ */ d("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: g("text-secondary-400", ge[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-secondary-400", be[a]), children: c }) }),
         /* @__PURE__ */ e(
           "input",
           {
             ref: f,
             id: C,
-            className: g(
+            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",
               "disabled:opacity-50 disabled:cursor-not-allowed",
               // Size styles
-              cr[a],
+              ct[a],
               // Icon padding
               c && "pl-10",
               h && "pr-10",
@@ -1231,10 +1231,10 @@ const cr = {
             ...i
           }
         ),
-        (h || b) && /* @__PURE__ */ e("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: b ? /* @__PURE__ */ d(
+        (h || g) && /* @__PURE__ */ e("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: g ? /* @__PURE__ */ d(
           "svg",
           {
-            className: g("animate-spin text-secondary-400", ge[a]),
+            className: b("animate-spin text-secondary-400", be[a]),
             fill: "none",
             viewBox: "0 0 24 24",
             children: [
@@ -1259,16 +1259,16 @@ const cr = {
               )
             ]
           }
-        ) : h && /* @__PURE__ */ e("span", { className: g("text-secondary-400", ge[a]), children: h }) })
+        ) : h && /* @__PURE__ */ e("span", { className: b("text-secondary-400", be[a]), children: h }) })
       ] }),
-      (t || n) && /* @__PURE__ */ e(
+      (r || n) && /* @__PURE__ */ e(
         "p",
         {
-          className: g(
+          className: b(
             "mt-1 text-xs",
             N ? "text-error" : "text-secondary-500"
           ),
-          children: t || n
+          children: r || n
         }
       )
     ] });
@@ -1276,28 +1276,28 @@ const cr = {
 );
 ue.displayName = "TextField";
 const oe = ({
-  icon: r,
+  icon: t,
   size: n = "md",
-  color: t = "current",
+  color: r = "current",
   clickable: a = !1,
   onClick: s,
   className: c,
   "aria-label": h,
-  ...b
+  ...g
 }) => {
-  const p = typeof n == "number" ? n : dr(n), y = g(
+  const p = typeof n == "number" ? n : dt(n), y = b(
     "inline-block",
     // Color variants
     {
-      "text-primary": t === "primary",
-      "text-secondary": t === "secondary",
-      "text-accent": t === "accent",
-      "text-success": t === "success",
-      "text-warning": t === "warning",
-      "text-error": t === "error",
-      "text-info": t === "info",
-      "text-neutral": t === "neutral",
-      "text-current": t === "current"
+      "text-primary": r === "primary",
+      "text-secondary": r === "secondary",
+      "text-accent": r === "accent",
+      "text-success": r === "success",
+      "text-warning": r === "warning",
+      "text-error": r === "error",
+      "text-info": r === "info",
+      "text-neutral": r === "neutral",
+      "text-current": r === "current"
     },
     // Clickable styles
     {
@@ -1315,51 +1315,51 @@ const oe = ({
     onKeyDown: a ? (l) => {
       (l.key === "Enter" || l.key === " ") && (l.preventDefault(), s?.());
     } : void 0,
-    ...b
+    ...g
   };
-  return /* @__PURE__ */ e(r, { ...u });
+  return /* @__PURE__ */ e(t, { ...u });
 };
-function dr(r) {
+function dt(t) {
   return {
     xs: 12,
     sm: 16,
     md: 20,
     lg: 24,
     xl: 32
-  }[r];
+  }[t];
 }
-function ir({
-  children: r,
+function it({
+  children: t,
   showTableSkeleton: n = !1,
-  tableColumns: t = 6,
+  tableColumns: r = 6,
   tableRows: a = 8
 }) {
-  return r ? /* @__PURE__ */ e("main", { className: "flex-1 bg-gray-50 dark:bg-gray-950 p-6", children: /* @__PURE__ */ e("div", { className: "w-full max-w-6xl mx-auto animate-pulse", children: r }) }) : /* @__PURE__ */ e("main", { className: "flex-1 bg-gray-50 dark:bg-gray-950 p-6", children: /* @__PURE__ */ d("div", { className: "w-full mx-auto space-y-6 animate-pulse", 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__ */ d("div", { className: "w-full mx-auto space-y-6 animate-pulse", children: [
     !n && /* @__PURE__ */ d(Ee, { children: [
-      /* @__PURE__ */ e("div", { className: "h-6 bg-gray-200 dark:bg-gray-700 rounded w-1/4" }),
+      /* @__PURE__ */ e("div", { className: "h-6 bg-neutral-container-emphasis rounded w-1/4" }),
       /* @__PURE__ */ d("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ e("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4" }),
-        /* @__PURE__ */ e("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2" })
+        /* @__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: [
-      /* @__PURE__ */ e("div", { className: `grid grid-cols-${t} gap-2 bg-gray-100 dark:bg-gray-800 p-3`, children: Array.from({ length: t }).map((s, c) => /* @__PURE__ */ e(
+      /* @__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",
         {
-          className: "h-4 bg-gray-300 dark:bg-gray-600 rounded w-2/3"
+          className: "h-4 bg-neutral-border-emphasis rounded w-2/3"
         },
         `header-${c}`
       )) }),
       Array.from({ length: a }).map((s, c) => /* @__PURE__ */ e(
         "div",
         {
-          className: `grid grid-cols-${t} gap-2 p-3 border-t border-gray-100 dark:border-gray-800`,
-          children: Array.from({ length: t }).map((h, b) => /* @__PURE__ */ e(
+          className: `grid grid-cols-${r} gap-2 p-3 border-t border-neutral`,
+          children: Array.from({ length: r }).map((h, g) => /* @__PURE__ */ e(
             "div",
             {
-              className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-full"
+              className: "h-4 bg-neutral-container-emphasis rounded w-full"
             },
-            `cell-${c}-${b}`
+            `cell-${c}-${g}`
           ))
         },
         `row-${c}`
@@ -1367,15 +1367,15 @@ function ir({
     ] })
   ] }) });
 }
-const ur = ({
-  trigger: r,
+const ut = ({
+  trigger: t,
   options: n,
-  value: t,
+  value: r,
   onSelect: a,
   placement: s = "bottom-start",
   disabled: c = !1,
   className: h,
-  showCheck: b = !0,
+  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);
@@ -1421,7 +1421,7 @@ const ur = ({
     }, 150) : i(null);
   }, E = (v, T, m) => {
     v.stopPropagation(), !T.disabled && !T.divider && (a?.(T.value, m), u(!1), i(null));
-  }, J = g(
+  }, 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",
     "max-h-60 overflow-auto",
     {
@@ -1430,7 +1430,7 @@ const ur = ({
       "bottom-full left-0 mb-2": s === "top-start",
       "bottom-full right-0 mb-2": s === "top-end"
     }
-  ), z = g(
+  ), 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",
     "max-h-60 overflow-auto"
   );
@@ -1438,7 +1438,7 @@ const ur = ({
     "div",
     {
       ref: N,
-      className: g(
+      className: b(
         "relative flex flex-row items-center justify-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700",
         h
       ),
@@ -1449,10 +1449,10 @@ const ur = ({
             ref: k,
             onClick: q,
             disabled: c,
-            className: g("inline-flex items-center justify-center", {
+            className: b("inline-flex items-center justify-center", {
               "opacity-50 cursor-not-allowed": c
             }),
-            children: r
+            children: t
           }
         ),
         y && /* @__PURE__ */ e("div", { className: J, children: /* @__PURE__ */ d("div", { className: "p-2", children: [
@@ -1476,7 +1476,7 @@ const ur = ({
                   onMouseEnter: () => H(v),
                   onMouseLeave: () => F(v),
                   disabled: v.disabled,
-                  className: g(
+                  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",
                     {
                       "opacity-50 cursor-not-allowed": v.disabled,
@@ -1492,7 +1492,7 @@ const ur = ({
                       ] })
                     ] }),
                     /* @__PURE__ */ d("div", { className: "flex items-center space-x-2", children: [
-                      b && t === v.value && /* @__PURE__ */ e("span", { className: "h-4 w-4 text-green-600 flex-shrink-0 text-sm font-bold", 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: "▶" })
                     ] })
                   ]
@@ -1524,9 +1524,9 @@ const ur = ({
                         },
                         `divider-${D}`
                       );
-                    const P = typeof t == "object" && t[v.value] && t[v.value].includes(
+                    const P = typeof r == "object" && r[v.value] && r[v.value].includes(
                       L.value
-                    ) || t === L.value;
+                    ) || r === L.value;
                     return /* @__PURE__ */ d(
                       "button",
                       {
@@ -1536,7 +1536,7 @@ const ur = ({
                           v.value
                         ),
                         disabled: L.disabled,
-                        className: g(
+                        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",
                           {
                             "opacity-50 cursor-not-allowed": L.disabled
@@ -1550,7 +1550,7 @@ const ur = ({
                               L.description && /* @__PURE__ */ e("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: L.description })
                             ] })
                           ] }),
-                          b && 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-green-600 flex-shrink-0 text-sm font-bold", children: "✓" })
                         ]
                       },
                       L.value
@@ -1575,7 +1575,7 @@ const ur = ({
       ]
     }
   );
-}, mr = () => /* @__PURE__ */ e(
+}, mt = () => /* @__PURE__ */ e(
   "svg",
   {
     className: "h-4 w-4",
@@ -1592,12 +1592,12 @@ const ur = ({
       }
     )
   }
-), hr = ({ active: r }) => /* @__PURE__ */ e(
+), ht = ({ active: t }) => /* @__PURE__ */ e(
   "svg",
   {
-    className: g(
+    className: b(
       "h-3 w-3",
-      r ? "text-neutral-900 dark:text-neutral-100" : "text-neutral-400"
+      t ? "text-neutral-900 dark:text-neutral-100" : "text-neutral-400"
     ),
     fill: "none",
     stroke: "currentColor",
@@ -1612,12 +1612,12 @@ const ur = ({
       }
     )
   }
-), fr = ({ active: r }) => /* @__PURE__ */ e(
+), ft = ({ active: t }) => /* @__PURE__ */ e(
   "svg",
   {
-    className: g(
+    className: b(
       "h-3 w-3",
-      r ? "text-neutral-900 dark:text-neutral-100" : "text-neutral-400"
+      t ? "text-neutral-900 dark:text-neutral-100" : "text-neutral-400"
     ),
     fill: "none",
     stroke: "currentColor",
@@ -1632,7 +1632,7 @@ const ur = ({
       }
     )
   }
-), pr = () => /* @__PURE__ */ e(
+), pt = () => /* @__PURE__ */ e(
   "svg",
   {
     className: "h-4 w-4",
@@ -1649,7 +1649,7 @@ const ur = ({
       }
     )
   }
-), xr = () => /* @__PURE__ */ e(
+), xt = () => /* @__PURE__ */ e(
   "svg",
   {
     className: "h-4 w-4",
@@ -1666,7 +1666,7 @@ const ur = ({
       }
     )
   }
-), gr = () => /* @__PURE__ */ e(
+), bt = () => /* @__PURE__ */ e(
   "svg",
   {
     className: "h-4 w-4",
@@ -1683,7 +1683,7 @@ const ur = ({
       }
     )
   }
-), br = () => /* @__PURE__ */ e(
+), gt = () => /* @__PURE__ */ e(
   "svg",
   {
     className: "h-4 w-4",
@@ -1717,62 +1717,62 @@ const ur = ({
       }
     )
   }
-), yr = (r) => {
-  const n = (a) => r.multiSelect && Array.isArray(r.value) ? r.value?.includes(a) : r.value === a, t = (a) => {
-    r.multiSelect && Array.isArray(r.value) ? r.onChange(r.value.filter((s) => s !== a)) : r.onChange(a);
+), 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);
   };
-  return r.type === "date" ? /* @__PURE__ */ e("div", { className: "flex items-center space-x-1 max-w-[160px]", children: /* @__PURE__ */ e(
+  return t.type === "date" ? /* @__PURE__ */ e("div", { className: "flex items-center space-x-1 max-w-[160px]", children: /* @__PURE__ */ e(
     ye,
     {
       size: "sm",
-      value: r.value,
-      onChange: (a) => r.onChange(a),
-      placeholder: r.placeholder || `Select ${r.label.toLowerCase()}`,
+      value: t.value,
+      onChange: (a) => t.onChange(a),
+      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("span", { children: r.label }),
-      /* @__PURE__ */ e("span", { className: "text-default", children: r.multiSelect && Array.isArray(r.value) ? r.value?.map(
-        (a) => r.options?.find((s) => s.value === a)?.label
-      ).join(", ") : r.options?.find((a) => a.value === r.value)?.label }),
+      /* @__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, {}) })
     ] }),
     /* @__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: [
-      r.options?.map((a) => /* @__PURE__ */ e(
+      t.options?.map((a) => /* @__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: () => t(a.value),
+          onClick: () => r(a.value),
           children: /* @__PURE__ */ e(
             "span",
             {
-              className: g(n(a.value) && "text-primary-500"),
+              className: b(n(a.value) && "text-primary-500"),
               children: a.label
             }
           )
         },
         a.value
       )),
-      r.value && /* @__PURE__ */ e(
+      t.value && /* @__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 mt-2",
-          onClick: () => t(null),
+          onClick: () => r(null),
           children: /* @__PURE__ */ e("span", { className: "text-muted", children: "Clear filter" })
         }
       )
     ] })
   ] }) }) });
 }, Le = ({
-  data: r,
+  data: t,
   columns: n,
-  loading: t = !1,
+  loading: r = !1,
   searchable: a = !1,
   searchPlaceholder: s = "Search...",
   filters: c = [],
   paginated: h = !1,
-  pageSizeOptions: b = [10, 25, 50, 100],
+  pageSizeOptions: g = [10, 25, 50, 100],
   defaultPageSize: p = 10,
   actions: y = [],
   onRowClick: u,
@@ -1794,7 +1794,7 @@ const ur = ({
     page: 0,
     pageSize: p
   }), T = X(null), m = ie(() => {
-    let o = r;
+    let o = t;
     if (a && H.trim()) {
       const w = n.filter(
         (R) => R.searchable !== !1
@@ -1812,7 +1812,7 @@ const ur = ({
         return String(j || "") === w.value;
       }));
     }), o;
-  }, [r, H, n, a, c]), $ = ie(() => {
+  }, [t, H, n, a, c]), $ = ie(() => {
     if (!E.column || !E.direction) return m;
     const o = n.find((w) => w.id === E.column);
     return o ? [...m].sort((w, _) => {
@@ -1833,7 +1833,7 @@ const ur = ({
     v((w) => ({ ...w, page: o }));
   }, []), M = ae((o) => {
     v({ page: 0, pageSize: o });
-  }, []), re = ae(
+  }, []), te = ae(
     (o, w) => {
       if (!f) return;
       const _ = C(o, 0);
@@ -1863,41 +1863,41 @@ const ur = ({
     return i.some(
       (_, R) => C(_, R) === w
     );
-  }), te = g(
+  }), re = b(
     "w-full text-sm leading-5 text-[var(--text-default)] border-collapse",
     q
-  ), U = g("bg-[var(--base-module)]"), le = g(
+  ), 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 = g("h-12", {
+  ), he = b("h-12", {
     "hover:bg-[var(--neutral-container)] dark:hover:bg-[var(--neutral-container-emphasis)]": k,
     "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(yr, { ...o }, o.id)),
+      c.map((o) => /* @__PURE__ */ e(yt, { ...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(mr, {}),
+          startIcon: /* @__PURE__ */ e(mt, {}),
           className: "max-w-sm"
         }
       ) })
     ] }) }),
     /* @__PURE__ */ d("div", { className: "relative w-full overflow-x-auto min-h-[400px]", children: [
-      t && /* @__PURE__ */ e("div", { className: "flex items-center justify-center z-10", children: /* @__PURE__ */ e(
-        ir,
+      r && /* @__PURE__ */ e("div", { className: "flex items-center justify-center z-10", children: /* @__PURE__ */ e(
+        it,
         {
           showTableSkeleton: !0,
           tableRows: 10,
           tableColumns: n.length
         }
       ) }),
-      /* @__PURE__ */ d("table", { ref: T, className: g(te, "min-w-full"), children: [
+      /* @__PURE__ */ d("table", { ref: T, className: b(re, "min-w-full"), children: [
         /* @__PURE__ */ e("thead", { className: U, children: /* @__PURE__ */ d("tr", { children: [
-          l && /* @__PURE__ */ e("th", { className: g(le, "w-12"), children: /* @__PURE__ */ e(
+          l && /* @__PURE__ */ e("th", { className: b(le, "w-12"), children: /* @__PURE__ */ e(
             "input",
             {
               type: "checkbox",
@@ -1909,10 +1909,10 @@ const ur = ({
               className: "rounded border-neutral-300 dark:border-neutral-600"
             }
           ) }),
-          !t && n.map((o) => /* @__PURE__ */ e(
+          !r && n.map((o) => /* @__PURE__ */ e(
             "th",
             {
-              className: g(
+              className: b(
                 le,
                 "font-semibold text-xs text-[var(--text-muted)] dark:text-[var(--text-muted)] uppercase tracking-wider",
                 "group",
@@ -1932,19 +1932,19 @@ const ur = ({
                 o.sortable && /* @__PURE__ */ d(
                   "div",
                   {
-                    className: g(
+                    className: b(
                       "flex flex-col opacity-0 group-hover:opacity-100 transition-opacity",
                       E.column === o.id && "opacity-100"
                     ),
                     children: [
                       /* @__PURE__ */ e(
-                        hr,
+                        ht,
                         {
                           active: E.column === o.id && E.direction === "asc"
                         }
                       ),
                       /* @__PURE__ */ e(
-                        fr,
+                        ft,
                         {
                           active: E.column === o.id && E.direction === "desc"
                         }
@@ -1956,13 +1956,13 @@ const ur = ({
             },
             o.id
           )),
-          y.length > 0 && /* @__PURE__ */ e("th", { className: g(le, "w-20"), children: /* @__PURE__ */ e("span", { className: "sr-only", children: "Actions" }) })
+          y.length > 0 && /* @__PURE__ */ e("th", { className: b(le, "w-20"), children: /* @__PURE__ */ e("span", { className: "sr-only", children: "Actions" }) })
         ] }) }),
-        /* @__PURE__ */ e("tbody", { children: L.length === 0 || t ? !t && /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e(
+        /* @__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),
-            className: g(
+            className: b(
               le,
               "text-center py-8 text-neutral-500 dark:text-neutral-400"
             ),
@@ -1975,7 +1975,7 @@ const ur = ({
           return /* @__PURE__ */ d(
             "tr",
             {
-              className: g(
+              className: b(
                 he,
                 { "bg-blue-50 dark:bg-blue-900/20": R },
                 K?.(o, w)
@@ -1990,7 +1990,7 @@ const ur = ({
                     type: "checkbox",
                     checked: R,
                     onChange: (j) => {
-                      j.stopPropagation(), re(o, j.target.checked);
+                      j.stopPropagation(), te(o, j.target.checked);
                     },
                     className: "rounded border-neutral-300 dark:border-neutral-600"
                   }
@@ -2000,7 +2000,7 @@ const ur = ({
                   return /* @__PURE__ */ e(
                     "td",
                     {
-                      className: g(le, {
+                      className: b(le, {
                         "text-left": j.align === "left" || !j.align,
                         "text-center": j.align === "center",
                         "text-right": j.align === "right",
@@ -2013,7 +2013,7 @@ const ur = ({
                   );
                 }),
                 y.length > 0 && /* @__PURE__ */ e("td", { className: le, children: /* @__PURE__ */ e(
-                  ur,
+                  ut,
                   {
                     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: [
                       /* @__PURE__ */ e("span", { children: "Options" }),
@@ -2060,7 +2060,7 @@ const ur = ({
               value: z.pageSize,
               onChange: (o) => M(Number(o.target.value)),
               className: "border border-[var(--neutral-border)] text-[var(--text-default)] dark:text-[var(--text-on-neutral)] rounded-md px-2 py-1 text-sm bg-[var(--base-input)] dark:bg-[var(--base-input)] w-16",
-              children: b.map((o) => /* @__PURE__ */ e("option", { value: o, children: o }, o))
+              children: g.map((o) => /* @__PURE__ */ e("option", { value: o, children: o }, o))
             }
           )
         ] })
@@ -2074,7 +2074,7 @@ const ur = ({
             onClick: () => P(0),
             disabled: z.page === 0,
             iconOnly: !0,
-            children: /* @__PURE__ */ e(gr, {})
+            children: /* @__PURE__ */ e(bt, {})
           }
         ),
         /* @__PURE__ */ e(
@@ -2085,7 +2085,7 @@ const ur = ({
             onClick: () => P(z.page - 1),
             disabled: z.page === 0,
             iconOnly: !0,
-            children: /* @__PURE__ */ e(pr, {})
+            children: /* @__PURE__ */ e(pt, {})
           }
         ),
         /* @__PURE__ */ d("span", { className: "px-3 py-1 text-sm text-gray-500 dark:text-gray-400", children: [
@@ -2102,7 +2102,7 @@ const ur = ({
             onClick: () => P(z.page + 1),
             disabled: z.page >= S - 1,
             iconOnly: !0,
-            children: /* @__PURE__ */ e(xr, {})
+            children: /* @__PURE__ */ e(xt, {})
           }
         ),
         /* @__PURE__ */ e(
@@ -2113,27 +2113,27 @@ const ur = ({
             onClick: () => P(S - 1),
             disabled: z.page >= S - 1,
             iconOnly: !0,
-            children: /* @__PURE__ */ e(br, {})
+            children: /* @__PURE__ */ e(gt, {})
           }
         )
       ] })
     ] })
   ] });
-}, vr = He(null), et = ({
-  items: r,
+}, vt = He(null), er = ({
+  items: t,
   activeTab: n,
-  onTabChange: t,
+  onTabChange: r,
   className: a
 }) => {
-  const [s, c] = V(r[0]?.id || ""), h = n || s, b = (p) => {
-    t ? t(p) : c(p);
+  const [s, c] = V(t[0]?.id || ""), h = n || s, g = (p) => {
+    r ? r(p) : c(p);
   };
-  return /* @__PURE__ */ e("div", { className: g("border-b border-neutral-200 dark:border-neutral-700", a), children: /* @__PURE__ */ e("nav", { className: "-mb-px flex space-x-8", children: r.map((p) => /* @__PURE__ */ e(
+  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(
     "button",
     {
-      onClick: () => !p.disabled && b(p.id),
+      onClick: () => !p.disabled && g(p.id),
       disabled: p.disabled,
-      className: g(
+      className: b(
         "border-b-2 py-2 px-1 text-sm font-medium transition-colors duration-200",
         {
           "border-primary text-primary": h === p.id,
@@ -2143,7 +2143,7 @@ const ur = ({
       ),
       children: /* @__PURE__ */ d("span", { className: "flex items-center gap-2", children: [
         p.label,
-        p.badge && /* @__PURE__ */ e("span", { className: g(
+        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"
         ), children: p.badge })
@@ -2151,23 +2151,23 @@ const ur = ({
     },
     p.id
   )) }) });
-}, kr = ({
-  items: r,
+}, kt = ({
+  items: t,
   defaultTab: n,
-  activeTab: t,
+  activeTab: r,
   onTabChange: a,
   variant: s = "default",
   size: c = "md",
   className: h
 }) => {
-  const [b, p] = V(
-    n || t || r[0]?.id || ""
-  ), y = t || b, u = (N) => {
+  const [g, p] = V(
+    n || r || t[0]?.id || ""
+  ), y = r || g, u = (N) => {
     a ? a(N) : p(N);
   }, l = {
     activeTab: y,
     setActiveTab: u
-  }, i = r.find((N) => N.id === y), f = g(
+  }, i = t.find((N) => N.id === y), f = b(
     "flex",
     {
       "border-b border-neutral-200 dark:border-neutral-700 px-2": s === "default" || s === "underline",
@@ -2199,10 +2199,10 @@ const ur = ({
       "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 g(B, x, q, K, H, F);
+    return b(B, x, q, K, H, F);
   };
-  return /* @__PURE__ */ e(vr.Provider, { value: l, children: /* @__PURE__ */ d("div", { children: [
-    /* @__PURE__ */ e("div", { className: f, role: "tablist", children: r.map((N) => /* @__PURE__ */ e(
+  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(
       "button",
       {
         type: "button",
@@ -2230,72 +2230,72 @@ const ur = ({
       }
     )
   ] }) });
-}, Nr = {
+}, Nt = {
   sm: "max-w-md",
   md: "max-w-lg",
   lg: "max-w-2xl",
   xl: "max-w-4xl",
   full: "max-w-full mx-4"
 };
-function wr({
-  open: r,
+function wt({
+  open: t,
   onClose: n,
-  title: t,
+  title: r,
   size: a = "md",
   closeOnBackdropClick: s = !0,
   closeOnEscape: c = !0,
   className: h,
-  backdropClassName: b,
+  backdropClassName: g,
   children: p,
   footer: y,
   showCloseButton: u = !0
 }) {
   const l = X(null), i = X(null);
   G(() => {
-    if (!r || !c) return;
+    if (!t || !c) return;
     const C = (N) => {
       N.key === "Escape" && n();
     };
     return document.addEventListener("keydown", C), () => document.removeEventListener("keydown", C);
-  }, [r, c, n]), G(() => (r ? (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, 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 = ""), () => {
     document.body.style.overflow = "";
-  }), [r]);
+  }), [t]);
   const f = (C) => {
     s && C.target === C.currentTarget && n();
   };
-  return r ? /* @__PURE__ */ e(
+  return t ? /* @__PURE__ */ e(
     "div",
     {
-      className: g(
+      className: b(
         "fixed inset-0 z-50 flex items-center justify-center p-4",
         "bg-black/20",
         // 'animate-fade-in',
-        b
+        g
       ),
       onClick: f,
       children: /* @__PURE__ */ d(
         "div",
         {
           ref: l,
-          className: g(
+          className: b(
             "relative w-full bg-white dark:bg-secondary-800 rounded-modal shadow-modal rounded-md",
             // 'animate-scale-in',
             "focus:outline-none",
-            Nr[a],
+            Nt[a],
             h
           ),
           role: "dialog",
           "aria-modal": "true",
-          "aria-labelledby": t ? "modal-title" : void 0,
+          "aria-labelledby": r ? "modal-title" : void 0,
           tabIndex: -1,
           children: [
-            (t || u) && /* @__PURE__ */ d("div", { className: "flex items-center justify-between p-6 pb-0", children: [
-              t && /* @__PURE__ */ e(
+            (r || u) && /* @__PURE__ */ d("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",
-                  children: t
+                  children: r
                 }
               ),
               u && /* @__PURE__ */ e(
@@ -2317,32 +2317,32 @@ function wr({
   ) : null;
 }
 const Z = ({
-  variant: r = "body",
+  variant: t = "body",
   size: n = "md",
-  weight: t = "normal",
+  weight: r = "normal",
   color: a = "current",
   align: s = "left",
   truncate: c = !1,
   italic: h = !1,
-  underline: b = !1,
+  underline: g = !1,
   lineHeight: p = "normal",
   as: y,
   className: u,
   children: l,
   ...i
 }) => {
-  const f = y || Cr(r), C = g(
+  const f = y || Ct(t), C = b(
     // Base styles
     "font-primary",
     // Variant styles
     {
-      "leading-relaxed": r === "body",
-      "text-sm leading-tight": r === "caption",
-      "text-sm font-medium leading-none": r === "label",
-      "font-mono text-sm bg-neutral-100 dark:bg-neutral-800 px-1 py-0.5 rounded": r === "code"
+      "leading-relaxed": t === "body",
+      "text-sm leading-tight": t === "caption",
+      "text-sm font-medium leading-none": t === "label",
+      "font-mono text-sm bg-neutral-100 dark:bg-neutral-800 px-1 py-0.5 rounded": t === "code"
     },
     // Size variants (override variant sizes)
-    r !== "code" && {
+    t !== "code" && {
       "text-xs": n === "xs",
       "text-sm": n === "sm",
       "text-base": n === "md",
@@ -2350,12 +2350,12 @@ const Z = ({
       "text-xl": n === "xl"
     },
     // Weight variants
-    r !== "label" && {
-      "font-light": t === "light",
-      "font-normal": t === "normal",
-      "font-medium": t === "medium",
-      "font-semibold": t === "semibold",
-      "font-bold": t === "bold"
+    t !== "label" && {
+      "font-light": r === "light",
+      "font-normal": r === "normal",
+      "font-medium": r === "medium",
+      "font-semibold": r === "semibold",
+      "font-bold": r === "bold"
     },
     // Color variants. Tekst-tonen lopen via de semantische `--text-*` tokens
     // (gedefinieerd voor light én dark in global.css) zodat ze matchen met de
@@ -2381,7 +2381,7 @@ const Z = ({
       "text-justify": s === "justify"
     },
     // Line height (override variant line heights)
-    r === "body" && {
+    t === "body" && {
       "leading-tight": p === "tight",
       "leading-normal": p === "normal",
       "leading-relaxed": p === "relaxed"
@@ -2389,42 +2389,42 @@ const Z = ({
     // Text decorations
     {
       italic: h,
-      underline: b,
+      underline: g,
       truncate: c
     },
     u
   );
   return /* @__PURE__ */ e(f, { className: C, ...i, children: l });
 };
-function Cr(r) {
+function Ct(t) {
   return {
     body: "p",
     caption: "span",
     label: "span",
     code: "code"
-  }[r] || "p";
+  }[t] || "p";
 }
-const Sr = ({
-  value: r,
+const St = ({
+  value: t,
   onChange: n,
-  label: t,
+  label: r,
   placeholder: a = "Select or upload a file",
   error: s,
   disabled: c,
   accept: h,
-  onListFiles: b,
+  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(
-    typeof r == "object" ? r : null
+    typeof t == "object" ? t : null
   ), [m, $] = V(!1), [L, D] = V(""), P = X(null);
   G(() => {
     i && M();
   }, [i]), G(() => {
-    i && k && re();
+    i && k && te();
   }, [i, k, x, J]);
   const M = async () => {
     E(!0);
@@ -2436,11 +2436,11 @@ const Sr = ({
     } finally {
       E(!1);
     }
-  }, re = async () => {
+  }, te = async () => {
     if (k) {
       E(!0);
       try {
-        const o = await b?.({ mountId: k.id, name: J, path: x });
+        const o = await g?.({ mountId: k.id, name: J, path: x });
         o?.data && H(o.data);
       } catch (o) {
         console.error("Failed to load files", o);
@@ -2507,7 +2507,7 @@ const Sr = ({
           mountId: k.id,
           providerKey: o,
           ownerId: "me"
-        }), await re()), $(!1), D("");
+        }), await te()), $(!1), D("");
       } catch (o) {
         console.error("Failed to create folder", o);
       } finally {
@@ -2541,7 +2541,7 @@ const Sr = ({
     };
   }, [K, x]), Q = (o) => {
     q((w) => `${w}${o}/`);
-  }, te = () => {
+  }, re = () => {
     const o = x.split("/").filter((w) => w !== "");
     o.pop(), o.length === 0 ? q("/") : q(`${o.join("/")}/`);
   }, U = ie(() => {
@@ -2570,7 +2570,7 @@ const Sr = ({
             color: w.type === "folder" ? "warning" : "secondary"
           }
         ),
-        /* @__PURE__ */ e("span", { className: g(w.type === "folder" && "font-medium"), children: o })
+        /* @__PURE__ */ e("span", { className: b(w.type === "folder" && "font-medium"), children: o })
       ] })
     },
     {
@@ -2620,12 +2620,12 @@ const Sr = ({
     }
   ];
   return /* @__PURE__ */ d("div", { className: "space-y-1", children: [
-    t && /* @__PURE__ */ e(Z, { variant: "label", size: "sm", weight: "medium", children: t }),
+    r && /* @__PURE__ */ e(Z, { variant: "label", size: "sm", weight: "medium", children: r }),
     /* @__PURE__ */ d(
       "div",
       {
         onClick: () => !c && f(!0),
-        className: g(
+        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",
@@ -2647,7 +2647,7 @@ const Sr = ({
     ),
     s && /* @__PURE__ */ e(Z, { variant: "body", size: "xs", className: "text-error", children: s }),
     /* @__PURE__ */ e(
-      wr,
+      wt,
       {
         open: i,
         onClose: () => {
@@ -2656,7 +2656,7 @@ const Sr = ({
         title: k ? `Explorer: ${k.name}` : "Select Storage Mount",
         size: "lg",
         children: /* @__PURE__ */ e(
-          kr,
+          kt,
           {
             variant: "pills",
             items: [
@@ -2671,7 +2671,7 @@ const Sr = ({
                         variant: "ghost",
                         size: "sm",
                         onClick: () => {
-                          x && x !== "/" ? te() : B(null);
+                          x && x !== "/" ? re() : B(null);
                         },
                         leftIcon: /* @__PURE__ */ e(oe, { icon: Ne, size: "xs" }),
                         children: x ? "Back" : "Back to Mounts"
@@ -2771,7 +2771,7 @@ const Sr = ({
                     " be uploaded to platform storage."
                   ] }),
                   /* @__PURE__ */ d("label", { className: "cursor-pointer", children: [
-                    /* @__PURE__ */ d("div", { className: g(
+                    /* @__PURE__ */ d("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: [
@@ -2801,40 +2801,40 @@ const Sr = ({
     )
   ] });
 };
-function Me(r, n) {
+function Me(t, n) {
   return n.split(".").reduce(
-    (t, a) => t && typeof t == "object" && a in t ? t[a] : void 0,
-    r
+    (r, a) => r && typeof r == "object" && a in r ? r[a] : void 0,
+    t
   );
 }
-function Lr(r, n, t) {
-  const a = n.split("."), s = Array.isArray(r) ? [...r] : { ...r };
+function Lt(t, n, r) {
+  const a = n.split("."), s = Array.isArray(t) ? [...t] : { ...t };
   let c = s;
   for (let h = 0; h < a.length - 1; h++) {
-    const b = a[h], p = c[b];
-    c[b] = p && typeof p == "object" ? Array.isArray(p) ? [...p] : { ...p } : {}, c = c[b];
+    const g = a[h], p = c[g];
+    c[g] = p && typeof p == "object" ? Array.isArray(p) ? [...p] : { ...p } : {}, c = c[g];
   }
-  return c[a[a.length - 1]] = t, s;
+  return c[a[a.length - 1]] = r, s;
 }
-function Mr(r, n) {
-  const t = n.split("."), a = Array.isArray(r) ? [...r] : { ...r };
+function Mt(t, n) {
+  const r = n.split("."), a = Array.isArray(t) ? [...t] : { ...t };
   let s = a;
-  for (let c = 0; c < t.length - 1; c++) {
-    const h = t[c];
+  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];
   }
-  return delete s[t[t.length - 1]], a;
+  return delete s[r[r.length - 1]], a;
 }
-const rt = ({
-  groups: r,
+const tr = ({
+  groups: t,
   data: n,
-  onSubmit: t,
+  onSubmit: r,
   onCancel: a,
   onChange: s,
   transform: c,
   validate: h,
-  submitButton: b = { label: "Submit", variant: "primary" },
+  submitButton: g = { label: "Submit", variant: "primary" },
   cancelButton: p = { label: "Cancel", variant: "outline" },
   showButtons: y = !0,
   layout: u = "vertical",
@@ -2850,7 +2850,7 @@ const rt = ({
   }, [n]);
   const F = ae(
     (m, $, L) => {
-      const D = r.flatMap((P) => P.items).find((P) => P.name === m);
+      const D = t.flatMap((P) => P.items).find((P) => P.name === m);
       if (!D) return null;
       if (D.required && ($ == null || $ === ""))
         return `${D.label} is required`;
@@ -2862,14 +2862,14 @@ const rt = ({
         if (Array.isArray($) && D.arrayFields) {
           const P = [];
           let M = !1;
-          if ($.forEach((re, ne) => {
+          if ($.forEach((te, ne) => {
             const W = {};
             for (const S of D.arrayFields) {
-              const I = re?.[S.name];
+              const I = te?.[S.name];
               if (S.required && (I == null || I === ""))
                 W[S.name] = `${S.label} is required`, M = !0;
               else if (S.validator) {
-                const O = S.validator(I, re);
+                const O = S.validator(I, te);
                 O && (W[S.name] = O, M = !0);
               }
             }
@@ -2880,26 +2880,26 @@ const rt = ({
       }
       return D.validator ? D.validator($, L) : null;
     },
-    [r]
+    [t]
   ), E = ae(
     (m, $) => {
-      let L = Lr(
+      let L = Lt(
         k,
         m,
         $
       );
-      r.flatMap((M) => M.items).find((M) => M.name === m)?.removeIfEmpty && ($ == null || $ === "") && (L = Mr(L, m)), B(L), H((M) => ({ ...M, [m]: !0 }));
+      t.flatMap((M) => M.items).find((M) => M.name === m)?.removeIfEmpty && ($ == null || $ === "") && (L = Mt(L, m)), B(L), H((M) => ({ ...M, [m]: !0 }));
       const P = F(m, $, L);
       q((M) => ({
         ...M,
         [m]: P || ""
       })), s?.(L, m);
     },
-    [k, r, F, s]
+    [k, t, F, s]
   ), J = ae(
     async (m) => {
       if (console.log("handleSubmit"), m.preventDefault(), i) return;
-      const $ = {}, L = r.flatMap((P) => P.items);
+      const $ = {}, L = t.flatMap((P) => P.items);
       for (const P of L) {
         if (P.hidden || P.conditional && !P.conditional(k))
           continue;
@@ -2917,9 +2917,9 @@ const rt = ({
       if (q($), console.log("newErrors", $), Object.keys($).some((P) => $[P]))
         return;
       const D = c ? c(k) : k;
-      await t?.(k, D);
+      await r?.(k, D);
     },
-    [k, r, F, h, c, t, i]
+    [k, t, F, h, c, r, i]
   ), z = ae(
     (m) => {
       const $ = Me(k, m.name), L = K[m.name] ? x[m.name] : void 0, D = m.disabled || i, P = {
@@ -2977,7 +2977,7 @@ const rt = ({
           );
         case "checkbox":
           return /* @__PURE__ */ e(
-            be,
+            ge,
             {
               ...P,
               checked: !!$,
@@ -3013,7 +3013,7 @@ const rt = ({
           );
         case "file":
           return /* @__PURE__ */ e(
-            Sr,
+            St,
             {
               ...P,
               value: $,
@@ -3053,10 +3053,10 @@ const rt = ({
           });
         case "array": {
           const M = $ || [];
-          let re = [];
+          let te = [];
           if (typeof L == "string" && L.startsWith("["))
             try {
-              re = JSON.parse(L);
+              te = JSON.parse(L);
             } catch {
             }
           const ne = () => {
@@ -3091,7 +3091,7 @@ const rt = ({
                     }
                   ) }),
                   /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: m.arrayFields?.map((A) => {
-                    const Q = re?.[O]?.[A.name];
+                    const Q = te?.[O]?.[A.name];
                     return /* @__PURE__ */ d(
                       "div",
                       {
@@ -3110,7 +3110,7 @@ const rt = ({
                             }
                           ) }),
                           (() => {
-                            const te = {
+                            const re = {
                               value: I?.[A.name] || "",
                               disabled: D,
                               required: A.required,
@@ -3127,7 +3127,7 @@ const rt = ({
                                 return /* @__PURE__ */ e(
                                   ue,
                                   {
-                                    ...te,
+                                    ...re,
                                     onChange: (U) => S(
                                       O,
                                       A.name,
@@ -3143,7 +3143,7 @@ const rt = ({
                                 return /* @__PURE__ */ e(
                                   ke,
                                   {
-                                    ...te,
+                                    ...re,
                                     onChange: (U) => S(
                                       O,
                                       A.name,
@@ -3158,7 +3158,7 @@ const rt = ({
                                 return /* @__PURE__ */ e(
                                   ve,
                                   {
-                                    ...te,
+                                    ...re,
                                     onChange: (U) => S(
                                       O,
                                       A.name,
@@ -3179,9 +3179,9 @@ const rt = ({
                                 );
                               case "checkbox":
                                 return /* @__PURE__ */ e(
-                                  be,
+                                  ge,
                                   {
-                                    ...te,
+                                    ...re,
                                     checked: !!I?.[A.name],
                                     onChange: (U) => S(
                                       O,
@@ -3223,7 +3223,7 @@ const rt = ({
                                 return /* @__PURE__ */ e(
                                   ye,
                                   {
-                                    ...te,
+                                    ...re,
                                     value: U ? new Date(U) : null,
                                     onChange: (le) => S(
                                       O,
@@ -3299,7 +3299,7 @@ const rt = ({
         return null;
       const $ = m.items.filter((D) => !(D.hidden || D.conditional && !D.conditional(k)));
       if ($.length === 0) return null;
-      const L = g(
+      const L = b(
         "space-y-2",
         {
           "grid gap-2": m.layout === "grid",
@@ -3342,7 +3342,7 @@ const rt = ({
             /* @__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(
               "div",
               {
-                className: g(
+                className: b(
                   "space-y-1",
                   D.width && typeof D.width == "string" && `w-[${D.width}]`,
                   D.width && typeof D.width == "number" && `col-span-${D.width}`
@@ -3371,7 +3371,7 @@ const rt = ({
       );
     },
     [k, K, x, z]
-  ), T = g(
+  ), T = b(
     "space-y-6",
     {
       "max-w-md": l === "sm",
@@ -3382,8 +3382,8 @@ const rt = ({
     f
   );
   return /* @__PURE__ */ d("form", { ref: C, onSubmit: J, className: T, children: [
-    /* @__PURE__ */ e("div", { className: "space-y-8", children: r.map(v) }),
-    y && /* @__PURE__ */ d("div", { className: g("flex gap-3 justify-end pt-8"), 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(
         ee,
         {
@@ -3400,17 +3400,17 @@ const rt = ({
         ee,
         {
           type: "submit",
-          variant: b.variant,
-          size: b.size || l,
-          disabled: b.disabled || i,
+          variant: g.variant,
+          size: g.size || l,
+          disabled: g.disabled || i,
           loading: i,
-          className: b.className,
-          children: b.label
+          className: g.className,
+          children: g.label
         }
       )
     ] })
   ] });
-}, Er = {
+}, Et = {
   default: "bg-neutral-container text-default",
   primary: "bg-accent-container text-accent",
   secondary: "bg-neutral-container text-muted",
@@ -3418,11 +3418,11 @@ const rt = ({
   warning: "bg-notice-container text-on-notice",
   error: "bg-error-container text-error",
   info: "bg-beta-container text-link"
-}, $r = {
+}, $t = {
   sm: "px-2 py-0.5 text-xs",
   md: "px-2.5 py-1 text-sm",
   lg: "px-3 py-1.5 text-base"
-}, zr = {
+}, zt = {
   default: "bg-neutral-fill",
   primary: "bg-accent-fill",
   secondary: "bg-neutral-fill",
@@ -3431,42 +3431,42 @@ const rt = ({
   error: "bg-error-fill",
   info: "bg-beta-fill"
 };
-function tt({
-  variant: r = "default",
+function rr({
+  variant: t = "default",
   size: n = "md",
-  dot: t = !1,
+  dot: r = !1,
   icon: a,
   dismissible: s = !1,
   onDismiss: c,
   className: h,
-  children: b,
+  children: g,
   ...p
 }) {
   return /* @__PURE__ */ d(
     "span",
     {
-      className: g(
+      className: b(
         // Base styles
         "inline-flex items-center font-medium rounded-full",
         // Variant styles
-        Er[r],
+        Et[t],
         // Size styles
-        $r[n],
+        $t[n],
         h
       ),
       ...p,
       children: [
-        t && /* @__PURE__ */ e(
+        r && /* @__PURE__ */ e(
           "span",
           {
-            className: g(
+            className: b(
               "w-2 h-2 rounded-full mr-1.5",
-              zr[r]
+              zt[t]
             )
           }
         ),
-        a && /* @__PURE__ */ e("span", { className: g("flex-shrink-0", b && "mr-1"), children: a }),
-        b,
+        a && /* @__PURE__ */ e("span", { className: b("flex-shrink-0", g && "mr-1"), children: a }),
+        g,
         s && c && /* @__PURE__ */ e(
           "button",
           {
@@ -3487,28 +3487,28 @@ function tt({
     }
   );
 }
-const Dr = {
+const Dt = {
   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"
-}, Tr = {
+}, Tt = {
   primary: "text-primary",
   secondary: "text-secondary-600",
   white: "text-white",
   current: "text-current"
-}, Ar = {
+}, At = {
   xs: "text-xs",
   sm: "text-sm",
   md: "text-sm",
   lg: "text-base",
   xl: "text-lg"
 };
-function at({
-  size: r = "md",
+function ar({
+  size: t = "md",
   variant: n = "primary",
-  label: t = "Loading...",
+  label: r = "Loading...",
   showLabel: a = !1,
   className: s,
   ...c
@@ -3516,7 +3516,7 @@ function at({
   return /* @__PURE__ */ d(
     "div",
     {
-      className: g(
+      className: b(
         "inline-flex items-center",
         a ? "flex-col space-y-2" : "",
         s
@@ -3526,10 +3526,10 @@ function at({
         /* @__PURE__ */ d(
           "svg",
           {
-            className: g(
+            className: b(
               "animate-spin",
-              Dr[r],
-              Tr[n]
+              Dt[t],
+              Tt[n]
             ),
             fill: "none",
             viewBox: "0 0 24 24",
@@ -3561,27 +3561,27 @@ function at({
         a && /* @__PURE__ */ e(
           "span",
           {
-            className: g(
+            className: b(
               "text-secondary-600 dark:text-secondary-400",
-              Ar[r]
+              At[t]
             ),
-            children: t
+            children: r
           }
         ),
-        !a && /* @__PURE__ */ e("span", { className: "sr-only", children: t })
+        !a && /* @__PURE__ */ e("span", { className: "sr-only", children: r })
       ]
     }
   );
 }
-const nt = ({
-  src: r,
+const nr = ({
+  src: t,
   alt: n,
-  size: t = "md",
+  size: r = "md",
   aspectRatio: a = "auto",
   radius: s = "md",
   showLoading: c = !0,
   showError: h = !0,
-  fallback: b,
+  fallback: g,
   loadingContent: p,
   errorContent: y,
   className: u,
@@ -3589,24 +3589,24 @@ const nt = ({
   onError: i,
   ...f
 }) => {
-  const [C, N] = V(!0), [k, B] = V(!1), [x, q] = V(r), K = (T) => {
+  const [C, N] = V(!0), [k, B] = V(!1), [x, q] = V(t), K = (T) => {
     N(!1), B(!1), l?.(T);
   }, H = (T) => {
-    if (N(!1), B(!0), b && x !== b) {
-      q(b), B(!1), N(!0);
+    if (N(!1), B(!0), g && x !== g) {
+      q(g), B(!1), N(!0);
       return;
     }
     i?.(T);
-  }, F = g(
+  }, F = b(
     "relative overflow-hidden bg-neutral-100 dark:bg-neutral-800",
     // Size variants
     {
-      "w-8 h-8": t === "xs",
-      "w-12 h-12": t === "sm",
-      "w-16 h-16": t === "md",
-      "w-24 h-24": t === "lg",
-      "w-32 h-32": t === "xl",
-      "w-full h-full": t === "full"
+      "w-8 h-8": r === "xs",
+      "w-12 h-12": r === "sm",
+      "w-16 h-16": r === "md",
+      "w-24 h-24": r === "lg",
+      "w-32 h-32": r === "xl",
+      "w-full h-full": r === "full"
     },
     // Aspect ratio variants
     {
@@ -3625,13 +3625,13 @@ const nt = ({
       "rounded-full": s === "full"
     },
     u
-  ), E = g(
+  ), E = b(
     "w-full h-full object-cover transition-opacity duration-200",
     {
       "opacity-0": C || k,
       "opacity-100": !C && !k
     }
-  ), J = g(
+  ), 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: [
@@ -3670,47 +3670,47 @@ const nt = ({
     C && c && /* @__PURE__ */ e("div", { className: J, children: p || z }),
     k && h && /* @__PURE__ */ e("div", { className: J, children: y || v })
   ] });
-}, lt = ({
-  title: r,
+}, lr = ({
+  title: t,
   subtitle: n,
-  actions: t = [],
+  actions: r = [],
   children: a,
   className: s,
   backLabel: c = "Back",
   backClassName: h,
-  onBack: b,
+  onBack: g,
   editable: p = !1,
   onTitleChange: y
 }) => {
-  const [u, l] = V(!1), [i, f] = V(r), C = X(null);
+  const [u, l] = V(!1), [i, f] = V(t), C = X(null);
   G(() => {
-    f(r);
-  }, [r]), G(() => {
+    f(t);
+  }, [t]), G(() => {
     u && C.current && (C.current.focus(), C.current.select());
   }, [u]);
   const N = () => {
     p && l(!0);
   }, k = () => {
-    l(!1), i.trim() !== "" && i !== r && y ? y(i.trim()) : f(r);
+    l(!1), i.trim() !== "" && i !== t && y ? y(i.trim()) : f(t);
   }, B = (x) => {
-    x.key === "Enter" ? C.current?.blur() : x.key === "Escape" && (f(r), l(!1));
+    x.key === "Enter" ? C.current?.blur() : x.key === "Escape" && (f(t), l(!1));
   };
   return /* @__PURE__ */ d(
     "div",
     {
-      className: g(
+      className: b(
         "p-5 pb-3 border-b border-gray-100 dark:border-gray-700",
         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: [
-            b && /* @__PURE__ */ e(
+            g && /* @__PURE__ */ e(
               "button",
               {
                 type: "button",
-                onClick: b,
-                className: g(
+                onClick: g,
+                className: b(
                   "flex items-center text-sm dark:hover:text-neutral-300 cursor-pointer transition",
                   h
                 ),
@@ -3732,16 +3732,16 @@ const nt = ({
               "h2",
               {
                 onClick: N,
-                className: g(
+                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: r
+                children: t
               }
             )
           ] }) }),
-          t.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-wrap sm:flex-nowrap gap-2 sm:gap-3", children: t.map(
+          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,
               {
@@ -3761,7 +3761,7 @@ const nt = ({
                   q.stopPropagation(), q.target.blur(), x.onClick();
                 },
                 disabled: x.disabled,
-                className: g("btn", {
+                className: b("btn", {
                   o__primary: x.variant === "primary",
                   o__secondary: x.variant === "secondary" || x.variant === "outline",
                   o__ghost: x.variant === "ghost",
@@ -3780,13 +3780,13 @@ const nt = ({
       ]
     }
   );
-}, st = ({
-  actions: r = [],
+}, sr = ({
+  actions: t = [],
   onBack: n,
-  backLabel: t = "Back",
+  backLabel: r = "Back",
   className: a,
   children: s
-}) => /* @__PURE__ */ d("div", { className: g("flex items-center gap-2 mb-3", a), children: [
+}) => /* @__PURE__ */ d("div", { className: b("flex items-center gap-2 mb-3", a), children: [
   n && /* @__PURE__ */ d(
     "button",
     {
@@ -3795,12 +3795,12 @@ const nt = ({
       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("span", { children: t })
+        /* @__PURE__ */ e("span", { children: r })
       ]
     }
   ),
   s && /* @__PURE__ */ e("div", { className: "flex-1 min-w-0", children: s }),
-  r.length > 0 && /* @__PURE__ */ e("div", { className: g("flex flex-wrap gap-2", !s && "ml-auto"), children: r.map(
+  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,
       {
@@ -3820,7 +3820,7 @@ const nt = ({
           h.stopPropagation(), h.target.blur(), c.onClick();
         },
         disabled: c.disabled,
-        className: g("btn", {
+        className: b("btn", {
           o__primary: c.variant === "primary",
           o__secondary: c.variant === "secondary" || c.variant === "outline",
           o__ghost: c.variant === "ghost",
@@ -3835,16 +3835,16 @@ const nt = ({
     )
   ) })
 ] });
-function Ir(r, n) {
+function It(t, n) {
   return n.split(".").reduce(
-    (t, a) => t && typeof t == "object" && a in t ? t[a] : void 0,
-    r
+    (r, a) => r && typeof r == "object" && a in r ? r[a] : void 0,
+    t
   );
 }
-const ot = ({
-  groups: r,
+const or = ({
+  groups: t,
   data: n,
-  size: t = "md",
+  size: r = "md",
   className: a
 }) => {
   const s = (u) => {
@@ -3862,9 +3862,9 @@ const ot = ({
     if (!l) return String(u || "-");
     const i = l.find((f) => f.value === u);
     return i ? i.label : String(u || "-");
-  }, b = ae(
+  }, g = ae(
     (u) => {
-      const l = Ir(n, u.name);
+      const l = It(n, u.name);
       if (u.type === "array") {
         const f = l;
         return !f || f.length === 0 ? /* @__PURE__ */ e(
@@ -4010,7 +4010,7 @@ const ot = ({
         return null;
       const l = u.items.filter((f) => !(f.hidden || f.conditional && !f.conditional(n)));
       if (l.length === 0) return null;
-      const i = g(
+      const i = b(
         "space-y-4",
         {
           "grid gap-4": u.layout === "grid",
@@ -4053,7 +4053,7 @@ const ot = ({
             /* @__PURE__ */ e("div", { className: "md:col-span-2", children: /* @__PURE__ */ e("div", { className: i, children: l.map((f) => /* @__PURE__ */ d(
               "div",
               {
-                className: g(
+                className: b(
                   "space-y-1",
                   f.width && typeof f.width == "string" && `w-[${f.width}]`,
                   f.width && typeof f.width == "number" && `col-span-${f.width}`
@@ -4068,7 +4068,7 @@ const ot = ({
                       children: f.label
                     }
                   ),
-                  b(f)
+                  g(f)
                 ]
               },
               f.name
@@ -4078,91 +4078,91 @@ const ot = ({
         u.id
       );
     },
-    [n, b]
-  ), y = g(
+    [n, g]
+  ), y = b(
     "space-y-6",
     {
-      "max-w-md": t === "sm",
-      "max-w-2xl": t === "md",
-      "max-w-4xl": t === "lg",
-      "max-w-full": t === "full"
+      "max-w-md": r === "sm",
+      "max-w-2xl": r === "md",
+      "max-w-4xl": r === "lg",
+      "max-w-full": r === "full"
     },
     a
   );
-  return /* @__PURE__ */ e("div", { className: y, children: /* @__PURE__ */ e("div", { className: "space-y-8", children: r.map(p) }) });
-}, De = ({ item: r, isSelectedHandler: n, onClick: t }) => {
-  const [a, s] = V(!1), c = r.children && r.children.length > 0, h = () => {
+  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);
-  }, b = n ? n(r.path) : !1;
+  }, g = n ? n(t.path) : !1;
   return /* @__PURE__ */ d("li", { children: [
     /* @__PURE__ */ d(
       "div",
       {
-        className: g(
+        className: b(
           "flex flex-row w-full py-1 rounded-lg items-center h-8 transition-colors cursor-pointer px-3 pr-1 no-underline text-sm",
           {
-            "active-nav-item": b && !c,
-            "shadow-lvl-0": b && !c,
-            "font-semibold": b || c || r.children !== void 0
+            "active-nav-item": g && !c,
+            "shadow-lvl-0": g && !c,
+            "font-semibold": g || c || t.children !== void 0
           }
         ),
         onClick: () => {
-          c ? h() : r.path && t?.(r.path);
+          c ? h() : t.path && r?.(t.path);
         },
         children: [
-          r.icon && /* @__PURE__ */ e("span", { className: "mr-2", children: r.icon }),
-          /* @__PURE__ */ e("span", { className: "flex-1", children: r.label }),
-          r.count !== void 0 && r.count > 0 && /* @__PURE__ */ e("span", { className: "ml-2 mr-1.5", children: r.count }),
+          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 && !a && /* @__PURE__ */ e("ul", { className: "sidebar-menu-nested-items mb-1", children: r.children?.map((p, y) => /* @__PURE__ */ e(
+    c && !a && /* @__PURE__ */ e("ul", { className: "sidebar-menu-nested-items mb-1", children: t.children?.map((p, y) => /* @__PURE__ */ e(
       De,
       {
         item: p,
         isSelectedHandler: n,
-        onClick: t
+        onClick: r
       },
       y
     )) })
   ] });
-}, ct = ({
-  title: r,
+}, cr = ({
+  title: t,
   actionIcons: n,
-  items: t,
+  items: r,
   isSelectedHandler: a,
   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__ */ e("span", { className: "text-xl font-semibold text-default mb-2", children: r }),
-    /* @__PURE__ */ e("div", { className: "sidebar-menu-actions", children: n?.map((h, b) => /* @__PURE__ */ e("span", { className: "sidebar-menu-action-icon", children: h }, b)) })
+    /* @__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)) })
   ] }),
   c && /* @__PURE__ */ e("div", { className: "sidebar-menu-pre-items mb-4", children: c }),
-  /* @__PURE__ */ e("ul", { children: t.map(
-    (h, b) => !h.path && !h.label && !h.children ? /* @__PURE__ */ e("span", { className: "flex w-full h-4" }, b) : /* @__PURE__ */ e(
+  /* @__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,
       {
         item: h,
         isSelectedHandler: a,
         onClick: s
       },
-      b
+      g
     )
   ) })
-] }), dt = ({
-  level: r = 1,
+] }), dr = ({
+  level: t = 1,
   size: n,
-  weight: t = "bold",
+  weight: r = "bold",
   color: a = "current",
   align: s = "left",
   truncate: c = !1,
   className: h,
-  children: b,
+  children: g,
   ...p
 }) => {
-  const y = n || jr(r), u = g(
+  const y = n || jt(t), u = b(
     "font-primary",
     // Size variants
     {
@@ -4177,11 +4177,11 @@ const ot = ({
     },
     // Weight variants
     {
-      "font-light": t === "light",
-      "font-normal": t === "normal",
-      "font-medium": t === "medium",
-      "font-semibold": t === "semibold",
-      "font-bold": t === "bold"
+      "font-light": r === "light",
+      "font-normal": r === "normal",
+      "font-medium": r === "medium",
+      "font-semibold": r === "semibold",
+      "font-bold": r === "bold"
     },
     // Color variants — semantische `--text-*` tokens (light+dark) net als Text/Table.
     {
@@ -4206,10 +4206,10 @@ const ot = ({
       truncate: c
     },
     h
-  ), l = `h${r}`;
-  return /* @__PURE__ */ e(l, { className: u, ...p, children: b });
+  ), l = `h${t}`;
+  return /* @__PURE__ */ e(l, { className: u, ...p, children: g });
 };
-function jr(r) {
+function jt(t) {
   return {
     1: "4xl",
     2: "3xl",
@@ -4217,30 +4217,30 @@ function jr(r) {
     4: "xl",
     5: "lg",
     6: "md"
-  }[r] || "md";
+  }[t] || "md";
 }
-const it = ({
-  items: r,
+const ir = ({
+  items: t,
   type: n = "unordered",
-  variant: t = "default",
+  variant: r = "default",
   size: a = "md",
   interactive: s = !1,
   className: c,
   itemClassName: h
 }) => {
-  const b = g(
+  const g = b(
     // Base styles
     "space-y-1",
     // Variant styles
     {
       // Default - basic spacing
-      "": t === "default",
+      "": r === "default",
       // Flush - no padding
-      "space-y-0": t === "flush",
+      "space-y-0": r === "flush",
       // Bordered - border around entire list
-      "border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden": t === "bordered",
+      "border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden": r === "bordered",
       // Divided - borders between items
-      "divide-y divide-neutral-200 dark:divide-neutral-700": t === "divided"
+      "divide-y divide-neutral-200 dark:divide-neutral-700": r === "divided"
     },
     // Size variants
     {
@@ -4249,14 +4249,14 @@ const it = ({
       "text-lg": a === "lg"
     },
     c
-  ), p = (l, i) => g(
+  ), p = (l, i) => b(
     // Base item styles
     "transition-colors duration-200",
     // Size-based padding
     {
-      "py-1 px-2": a === "sm" && (t === "bordered" || t === "divided"),
-      "py-2 px-3": a === "md" && (t === "bordered" || t === "divided"),
-      "py-3 px-4": a === "lg" && (t === "bordered" || t === "divided")
+      "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")
     },
     // Interactive styles
     s && !l.disabled && {
@@ -4273,7 +4273,7 @@ const it = ({
   }, u = (l, i) => {
     s && !i.disabled && (l.key === "Enter" || l.key === " ") && (l.preventDefault(), i.onClick?.());
   };
-  return n === "ordered" ? /* @__PURE__ */ e("ol", { className: b, children: r.map((l, i) => /* @__PURE__ */ e(
+  return n === "ordered" ? /* @__PURE__ */ e("ol", { className: g, children: t.map((l, i) => /* @__PURE__ */ e(
     "li",
     {
       className: p(l),
@@ -4284,7 +4284,7 @@ const it = ({
       children: l.content
     },
     l.id || i
-  )) }) : n === "description" ? /* @__PURE__ */ e("dl", { className: b, children: r.map((l, i) => /* @__PURE__ */ e(
+  )) }) : n === "description" ? /* @__PURE__ */ e("dl", { className: g, children: t.map((l, i) => /* @__PURE__ */ e(
     "div",
     {
       className: p(l),
@@ -4295,7 +4295,7 @@ const it = ({
       children: l.content
     },
     l.id || i
-  )) }) : /* @__PURE__ */ e("ul", { className: b, children: r.map((l, i) => /* @__PURE__ */ e(
+  )) }) : /* @__PURE__ */ e("ul", { className: g, children: t.map((l, i) => /* @__PURE__ */ e(
     "li",
     {
       className: p(l),
@@ -4307,24 +4307,24 @@ const it = ({
     },
     l.id || i
   )) });
-}, ut = ({
-  commands: r,
+}, ur = ({
+  commands: t,
   isOpen: n,
-  onClose: t,
+  onClose: r,
   labels: a,
   initialCommandPath: s,
   initialActiveIndex: c
 }) => {
-  const [h, b] = V(""), [p, y] = V(s || []), [u, l] = V(c || 0), i = X(null), f = X(null), N = (p.length ? r.find((k) => k.id === p[0])?.subCommands || [] : r).filter(
+  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())
   );
   return G(() => {
-    n || (b(""), y(s || []), l(c || 0));
+    n || (g(""), y(s || []), l(c || 0));
   }, [n]), G(() => {
     const k = (B) => {
       if (n) {
         if (B.key === "Escape")
-          t();
+          r();
         else if (B.key === "ArrowUp")
           l(
             (x) => x > 0 ? x - 1 : N.length - 1
@@ -4335,17 +4335,17 @@ const it = ({
           );
         else if (B.key === "Enter") {
           const x = N[u];
-          x && (x.subCommands ? (y([...p, x.id]), l(0)) : x.action && (x.action(), t()));
+          x && (x.subCommands ? (y([...p, x.id]), l(0)) : x.action && (x.action(), r()));
         }
       }
     };
     return document.addEventListener("keydown", k), () => document.removeEventListener("keydown", k);
-  }, [n, t, N, u, p]), G(() => {
+  }, [n, r, N, u, p]), G(() => {
     const k = (B) => {
-      i.current && !i.current.contains(B.target) && t();
+      i.current && !i.current.contains(B.target) && r();
     };
     return n && document.addEventListener("mousedown", k), () => document.removeEventListener("mousedown", k);
-  }, [n, t]), G(() => {
+  }, [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(
@@ -4360,7 +4360,7 @@ const it = ({
             type: "text",
             placeholder: a?.searchPlaceholder || "Search commands...",
             value: h,
-            onChange: (k) => b(k.target.value),
+            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"
           }
         ),
@@ -4377,7 +4377,7 @@ const it = ({
                   "data-index": B,
                   className: `flex items-center p-2 cursor-pointer rounded-md text-secondary-800 ${B === u ? "bg-gray-100" : ""}`,
                   onClick: () => {
-                    k.subCommands ? (y([...p, k.id]), l(0)) : k.action && (k.action(), t());
+                    k.subCommands ? (y([...p, k.id]), l(0)) : k.action && (k.action(), r());
                   },
                   onMouseEnter: () => l(B),
                   children: [
@@ -4411,7 +4411,7 @@ const it = ({
       ]
     }
   ) }) : null;
-}, Br = {
+}, Bt = {
   none: "p-0",
   xs: "p-1",
   sm: "p-2",
@@ -4419,7 +4419,7 @@ const it = ({
   lg: "p-6",
   xl: "p-8",
   "2xl": "p-12"
-}, Pr = {
+}, Pt = {
   none: "m-0",
   xs: "m-1",
   sm: "m-2",
@@ -4427,7 +4427,7 @@ const it = ({
   lg: "m-6",
   xl: "m-8",
   "2xl": "m-12"
-}, _r = {
+}, _t = {
   none: "",
   primary: "bg-primary",
   secondary: "bg-secondary",
@@ -4443,26 +4443,26 @@ const it = ({
   backdrop: "bg-backdrop",
   editor: "bg-editor",
   input: "bg-input"
-}, Or = {
+}, Ot = {
   none: "rounded-none",
   sm: "rounded-sm",
   md: "rounded-md",
   lg: "rounded-lg",
   xl: "rounded-xl",
   full: "rounded-full"
-}, Vr = {
+}, Vt = {
   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"
-}, Fr = {
+}, Ft = {
   none: "border-0",
   sm: "border",
   md: "border-2",
   lg: "border-4"
-}, Wr = {
+}, Wt = {
   primary: "border-primary",
   secondary: "border-secondary",
   accent: "border-accent",
@@ -4474,29 +4474,29 @@ const it = ({
   white: "border-white"
 }, Te = ce(
   ({
-    padding: r,
+    padding: t,
     margin: n,
-    background: t,
+    background: r,
     radius: a,
     shadow: s,
     border: c,
     borderColor: h,
-    className: b,
+    className: g,
     children: p,
     ...y
   }, u) => /* @__PURE__ */ e(
     "div",
     {
       ref: u,
-      className: g(
-        r && Br[r],
-        n && Pr[n],
-        t && _r[t],
-        a && Or[a],
-        s && Vr[s],
-        c && Fr[c],
-        h && Wr[h],
-        b
+      className: b(
+        t && Bt[t],
+        n && Pt[n],
+        r && _t[r],
+        a && Ot[a],
+        s && Vt[s],
+        c && Ft[c],
+        h && Wt[h],
+        g
       ),
       ...y,
       children: p
@@ -4504,19 +4504,19 @@ const it = ({
   )
 );
 Te.displayName = "Box";
-const mt = ({ children: r, title: n, ...t }) => /* @__PURE__ */ d(Te, { background: "module", radius: "xl", shadow: "sm", ...t, children: [
+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 }),
-  r
+  t
 ] });
-function ht({
-  identifier: r,
+function hr({
+  identifier: t,
   resourceLoader: n,
-  framework: t = "react",
+  framework: r = "react",
   fallback: a,
   componentProps: s,
   className: c
 }) {
-  const h = X(null), [b, p] = V(!0), [y, u] = V(null), l = X(null);
+  const h = X(null), [g, p] = V(!0), [y, u] = V(null), l = X(null);
   return X(null), G(() => {
     let i = !0;
     return (async () => {
@@ -4525,20 +4525,20 @@ function ht({
         const C = await n();
         if (!i) return;
         const N = C.component || C.default || C;
-        u(t === "react" ? () => N : () => C);
+        u(r === "react" ? () => N : () => C);
       } catch (C) {
-        console.error(`[FederatedResource] Load failed: ${r}`, C);
+        console.error(`[FederatedResource] Load failed: ${t}`, C);
       } finally {
         i && p(!1);
       }
     })(), () => {
       i = !1;
     };
-  }, [r, n]), G(() => {
-    if (b || !y || t === "react") return;
+  }, [t, n]), G(() => {
+    if (g || !y || r === "react") return;
     const i = h.current;
     if (i) {
-      if (t === "svelte") {
+      if (r === "svelte") {
         const f = y.default || y, C = new f({ target: i, props: s || {} });
         return l.current = C, () => C.$destroy();
       }
@@ -4549,14 +4549,14 @@ function ht({
         };
       }
     }
-  }, [y, t, b]), G(() => {
-    t === "svelte" && l.current && l.current.$set?.(s);
-  }, [s, t]), /* @__PURE__ */ d("div", { ref: h, className: c, style: { display: "contents" }, children: [
-    b && a,
-    t === "react" && y && /* @__PURE__ */ e(y, { ...s })
+  }, [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,
+    r === "react" && y && /* @__PURE__ */ e(y, { ...s })
   ] });
 }
-class ft extends Ue {
+class fr extends Ue {
   constructor() {
     super(...arguments), this.state = {
       hasError: !1,
@@ -4566,8 +4566,8 @@ class ft extends Ue {
   static getDerivedStateFromError(n) {
     return { hasError: !0, error: n };
   }
-  componentDidCatch(n, t) {
-    console.error(`[ErrorBoundary] Error in ${this.props.name || "Component"}:`, n, t);
+  componentDidCatch(n, r) {
+    console.error(`[ErrorBoundary] Error in ${this.props.name || "Component"}:`, n, 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: [
@@ -4585,45 +4585,45 @@ class ft extends Ue {
   }
 }
 export {
-  tt as Badge,
+  rr as Badge,
   Te as Box,
   ee as Button,
-  Xr as ButtonGroup,
-  mt as Card,
-  be as Checkbox,
-  ut as CommandPalette,
-  ir as ContentLoading,
+  Xt as ButtonGroup,
+  mr as Card,
+  ge as Checkbox,
+  ur as CommandPalette,
+  it as ContentLoading,
   ye as DatePicker,
-  ur as Dropdown,
-  ft as ErrorBoundary,
-  ht as FederatedResource,
-  rt as Form,
-  dt as Heading,
+  ut as Dropdown,
+  fr as ErrorBoundary,
+  hr as FederatedResource,
+  tr as Form,
+  dr as Heading,
   oe as Icon,
-  nt as Image,
-  Qr as Link,
-  it as List,
-  Jr as MeetingGrid,
-  wr as Modal,
-  lt as PageHeader,
-  st as PageToolbar,
-  Yr as ParticipantTile,
-  lr as SearchableTextField,
+  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,
   ve as Select,
-  ct as SidebarMenu,
-  at as Spinner,
+  cr as SidebarMenu,
+  ar as Spinner,
   $e as SplitButton,
-  Sr as StorageInput,
-  et as TabBar,
+  St as StorageInput,
+  er as TabBar,
   Le as Table,
-  kr as Tabs,
+  kt as Tabs,
   Z as Text,
   ke as TextArea,
   ue as TextField,
-  Zr as VideoSurface,
-  ot as View,
-  g as cn,
-  Kr as createSizes,
-  Gr as createVariants
+  Zt as VideoSurface,
+  or as View,
+  b as cn,
+  Kt as createSizes,
+  Gt as createVariants
 };
 //# sourceMappingURL=index.js.map