@opencxh/ui-kit 3.13.0 → 3.18.0

package/dist/index.js

@@ -1,30 +1,86 @@
 import { clsx as Te } from "clsx";
-import { jsxs as c, jsx as e, Fragment as Ee } from "react/jsx-runtime";
-import se, { forwardRef as ce, useState as V, useRef as Q, useCallback as ae, useEffect as G, useMemo as ie, createContext as Ae, Component as Ie } from "react";
-import { ChevronDown as je, FileText as pe, HardDrive as Ne, X as Be, ArrowLeft as Me, Search as Pe, FolderPlus as _e, Upload as Oe, Folder as we, ChevronDownIcon as Ve, ChevronRight as Fe } from "lucide-react";
+import { jsxs as c, jsx as e, Fragment as Me } from "react/jsx-runtime";
+import { VideoOff as Ae, User as Ie, MicOff as je, Mic as Be, ChevronDown as Pe, FileText as pe, HardDrive as Ne, X as Oe, ArrowLeft as Ee, Search as _e, FolderPlus as Ve, Upload as Fe, Folder as we, ChevronDownIcon as We, ChevronRight as Re } from "lucide-react";
+import se, { useRef as X, useEffect as K, forwardRef as ce, useState as V, useCallback as ae, useMemo as ie, createContext as He, Component as qe } from "react";
 function x(...r) {
   return Te(r);
 }
-function Rr(r) {
-  return (l, t) => r[l]?.[t] || "";
+function Gr(r) {
+  return (n, t) => r[n]?.[t] || "";
 }
-function qr(r) {
-  return (l) => r[l] || "";
+function Kr(r) {
+  return (n) => r[n] || "";
 }
-const We = {
+function Jr({ tiles: r, pinned: n, className: t }) {
+  if (n)
+    return /* @__PURE__ */ c("div", { className: x("flex flex-col md:flex-row gap-2 h-full", t), 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((o, i) => /* @__PURE__ */ e("div", { className: "min-w-[160px] md:min-w-0", children: o }, i)) })
+    ] });
+  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: x("grid gap-2 h-full", a, t), children: r.map((o, i) => /* @__PURE__ */ e("div", { children: o }, i)) });
+}
+function Yr({
+  name: r,
+  avatarUrl: n,
+  muted: t,
+  speaking: a,
+  hasVideo: o,
+  videoSlot: i,
+  className: h
+}) {
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      className: x(
+        "relative rounded-lg overflow-hidden bg-gray-800 aspect-video flex items-center justify-center",
+        a && "ring-2 ring-emerald-400",
+        h
+      ),
+      children: [
+        o && i ? /* @__PURE__ */ e("div", { className: "absolute inset-0", children: i }) : /* @__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: o ? /* @__PURE__ */ e(Ae, { className: "w-8 h-8" }) : /* @__PURE__ */ e(Ie, { className: "w-8 h-8" }) }) }),
+        /* @__PURE__ */ c("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(je, { className: "w-3 h-3" }) : /* @__PURE__ */ e(Be, { className: "w-3 h-3" }),
+          /* @__PURE__ */ e("span", { className: "truncate max-w-[140px]", children: r })
+        ] })
+      ]
+    }
+  );
+}
+function Zr({ attach: r, active: n = !0, mirrored: t = !1, className: a }) {
+  const o = X(null);
+  return K(() => {
+    if (!n || !o.current) return;
+    const i = r(o.current);
+    return () => {
+      typeof i == "function" && i(), o.current && (o.current.innerHTML = "");
+    };
+  }, [r, n]), /* @__PURE__ */ e(
+    "div",
+    {
+      ref: o,
+      className: x(
+        "w-full h-full bg-gray-900 overflow-hidden",
+        t && "[&>*]:scale-x-[-1]",
+        a
+      )
+    }
+  );
+}
+const Ue = {
   primary: "btn o__primary",
   secondary: "btn o__secondary",
   outline: "btn o__secondary",
   ghost: "btn text-gray-700",
   destructive: "btn o__destructive"
-}, Re = {
+}, Ge = {
   xs: "px-2 py-1 text-xs",
   sm: "px-3 py-1.5 text-sm",
   md: "px-4 py-2 text-sm",
   lg: "px-6 py-3 text-base",
   xl: "px-8 py-4 text-lg",
   full: "px-4 py-3 text-base"
-}, qe = {
+}, Ke = {
   xs: "p-1",
   sm: "p-1.5",
   md: "p-2",
@@ -34,7 +90,7 @@ const We = {
 }, ee = ce(
   ({
     variant: r = "primary",
-    size: l = "md",
+    size: n = "md",
     fullWidth: t = !1,
     loading: a = !1,
     leftIcon: o,
@@ -44,12 +100,12 @@ const We = {
     children: f,
     disabled: b,
     ...m
-  }, n) => {
+  }, l) => {
     const d = b || a;
     return /* @__PURE__ */ c(
       "button",
       {
-        ref: n,
+        ref: l,
         type: "button",
         className: x(
           // Base styles
@@ -57,9 +113,9 @@ const We = {
           "focus:outline-none focus:ring-1 focus:ring-offset-1",
           "disabled:opacity-50 disabled:cursor-not-allowed",
           // Variant styles
-          We[r],
+          Ue[r],
           // Size styles
-          h ? qe[l] : Re[l],
+          h ? Ke[n] : Ge[n],
           // Full width
           t && "w-full",
           // Loading state
@@ -111,9 +167,9 @@ const We = {
   }
 );
 ee.displayName = "Button";
-const Hr = ({
+const Xr = ({
   children: r,
-  size: l = "md",
+  size: n = "md",
   orientation: t = "horizontal",
   attached: a = !0,
   className: o
@@ -134,16 +190,16 @@ const Hr = ({
       "[&>*:not(:first-child)]:-ml-px": a && t === "horizontal",
       "[&>*:not(:first-child)]:-mt-px": a && t === "vertical",
       // Spacing for non-attached buttons
-      "gap-1": !a && l === "xs",
-      "gap-2": !a && (l === "sm" || l === "md"),
-      "gap-3": !a && (l === "lg" || l === "xl")
+      "gap-1": !a && n === "xs",
+      "gap-2": !a && (n === "sm" || n === "md"),
+      "gap-3": !a && (n === "lg" || n === "xl")
     },
     o
   );
   return /* @__PURE__ */ e("div", { className: i, role: "group", children: r });
-}, Ur = ({
+}, Qr = ({
   variant: r = "default",
-  size: l = "md",
+  size: n = "md",
   color: t = "primary",
   disabled: a = !1,
   external: o = !1,
@@ -154,16 +210,16 @@ const Hr = ({
   rel: b,
   ...m
 }) => {
-  const n = o || g && (g.startsWith("http") || g.startsWith("mailto:")), d = x(
+  const l = o || g && (g.startsWith("http") || g.startsWith("mailto:")), d = x(
     // Base styles
     "inline-flex items-center gap-1 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2",
     // Size variants
     {
-      "text-xs": l === "xs",
-      "text-sm": l === "sm",
-      "text-base": l === "md",
-      "text-lg": l === "lg",
-      "text-xl": l === "xl"
+      "text-xs": n === "xs",
+      "text-sm": n === "sm",
+      "text-base": n === "md",
+      "text-lg": n === "lg",
+      "text-xl": n === "xl"
     },
     // Color variants
     {
@@ -211,12 +267,12 @@ const Hr = ({
   ), p = {
     ...m,
     href: a ? void 0 : g,
-    target: n ? "_blank" : f,
-    rel: n ? "noopener noreferrer" : b
+    target: l ? "_blank" : f,
+    rel: l ? "noopener noreferrer" : b
   };
   return /* @__PURE__ */ c("a", { className: d, ...p, children: [
     h,
-    n && /* @__PURE__ */ e(
+    l && /* @__PURE__ */ e(
       "svg",
       {
         className: "w-3 h-3 ml-1",
@@ -240,41 +296,41 @@ const Hr = ({
   primary: "btn o__primary",
   secondary: "btn o__secondary",
   outline: "btn o__secondary"
-}, He = {
+}, Je = {
   sm: "px-3 py-1.5 text-sm",
   md: "px-4 py-2 text-sm"
 };
-function Ue({
+function Ye({
   label: r,
-  onClick: l,
+  onClick: n,
   variant: t = "primary",
   size: a = "md",
   icon: o,
   options: i,
   disabled: h = !1
 }) {
-  const [g, f] = V(!1), b = Q(null), m = ae(() => {
-    f((n) => !n);
+  const [g, f] = V(!1), b = X(null), m = ae(() => {
+    f((l) => !l);
   }, []);
-  return G(() => {
-    const n = (d) => {
+  return K(() => {
+    const l = (d) => {
       b.current && !b.current.contains(d.target) && f(!1);
     };
-    return document.addEventListener("mousedown", n), () => document.removeEventListener("mousedown", n);
-  }, []), /* @__PURE__ */ c("div", { ref: b, className: "relative inline-flex", children: [
+    return document.addEventListener("mousedown", l), () => document.removeEventListener("mousedown", l);
+  }, []), /* @__PURE__ */ c("div", { ref: b, className: "relative inline-flex items-center gap-px", children: [
     /* @__PURE__ */ c(
       "button",
       {
         type: "button",
-        onClick: l,
+        onClick: n,
         disabled: h,
         className: x(
-          "inline-flex items-center justify-center font-medium rounded-l-lg transition-colors duration-200",
+          "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",
           Ce[t],
-          He[a],
-          "rounded-r-none border-r-0"
+          Je[a],
+          "!rounded-r-none"
         ),
         children: [
           o && /* @__PURE__ */ e("span", { className: "mr-2 flex-shrink-0", children: o }),
@@ -289,40 +345,39 @@ function Ue({
         onClick: m,
         disabled: h,
         className: x(
-          "inline-flex items-center justify-center font-medium rounded-r-lg transition-colors duration-200",
+          "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",
-          "border-l border-l-white/20",
           Ce[t],
           a === "sm" ? "px-1.5 py-1.5" : "px-2 py-2",
-          "rounded-l-none"
+          "!rounded-l-none"
         ),
-        children: /* @__PURE__ */ e(je, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ e(Pe, { className: "h-4 w-4" })
       }
     ),
-    g && i.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: i.map((n) => /* @__PURE__ */ e(
+    g && i.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: i.map((l) => /* @__PURE__ */ e(
       "button",
       {
         type: "button",
         onClick: () => {
-          n.onClick(), f(!1);
+          l.onClick(), f(!1);
         },
         className: x(
           "w-full text-left px-3 py-2 text-sm hover:bg-gray-50 transition-colors",
-          n.variant === "destructive" ? "text-red-600 hover:bg-red-50" : "text-gray-700"
+          l.variant === "destructive" ? "text-red-600 hover:bg-red-50" : "text-gray-700"
         ),
-        children: n.label
+        children: l.label
       },
-      n.id
+      l.id
     )) })
   ] });
 }
-const Ke = {
+const Ze = {
   sm: "h-4 w-4",
   md: "h-5 w-5",
   lg: "h-6 w-6",
   full: "h-6 w-6"
-}, Ge = {
+}, Xe = {
   sm: "text-sm",
   md: "text-sm",
   lg: "text-base",
@@ -330,7 +385,7 @@ const Ke = {
 }, be = ce(
   ({
     label: r,
-    helperText: l,
+    helperText: n,
     error: t,
     size: a = "md",
     indeterminate: o = !1,
@@ -340,7 +395,7 @@ const Ke = {
     id: f,
     ...b
   }, m) => {
-    const n = f || `checkbox-${Math.random().toString(36).substr(2, 9)}`, d = !!t;
+    const l = f || `checkbox-${Math.random().toString(36).substr(2, 9)}`, d = !!t;
     return se.useEffect(() => {
       m && typeof m == "object" && m.current && (m.current.indeterminate = o);
     }, [o, m]), /* @__PURE__ */ c("div", { className: x("flex flex-col", i), children: [
@@ -349,7 +404,7 @@ const Ke = {
           "input",
           {
             ref: m,
-            id: n,
+            id: l,
             type: "checkbox",
             className: x(
               // Base styles
@@ -357,7 +412,7 @@ const Ke = {
               "focus:ring-2 focus:ring-offset-2 focus:outline-none",
               "disabled:opacity-50 disabled:cursor-not-allowed",
               // Size styles
-              Ke[a],
+              Ze[a],
               // State styles
               d ? "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",
               g
@@ -369,17 +424,17 @@ const Ke = {
           /* @__PURE__ */ e(
             "label",
             {
-              htmlFor: n,
+              htmlFor: l,
               className: x(
                 "font-medium cursor-pointer",
                 d ? "text-error" : "text-secondary-900 dark:text-secondary-100",
-                Ge[a],
+                Xe[a],
                 h
               ),
               children: r
             }
           ),
-          l && !t && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-secondary-500 dark:text-secondary-400", children: l })
+          n && !t && /* @__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 })
@@ -387,9 +442,9 @@ const Ke = {
   }
 );
 be.displayName = "Checkbox";
-const Je = () => /* @__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" }) }), Ye = () => /* @__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" }) }), Ze = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "m9 18 6-6-6-6" }) }), ye = ce(({
+const 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,
-  onChange: l,
+  onChange: n,
   placeholder: t = "Select date",
   disabled: a = !1,
   required: o = !1,
@@ -399,15 +454,15 @@ const Je = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
   maxDate: f,
   format: b = "MM/dd/yyyy"
 }, m) => {
-  const [n, d] = V(!1), [p, N] = V(() => r || /* @__PURE__ */ new Date()), v = Q(null);
-  G(() => {
+  const [l, d] = V(!1), [p, N] = V(() => r || /* @__PURE__ */ new Date()), v = X(null);
+  K(() => {
     const z = (y) => {
       v.current && !v.current.contains(y.target) && d(!1);
     };
-    return n && document.addEventListener("mousedown", z), () => {
+    return l && document.addEventListener("mousedown", z), () => {
       document.removeEventListener("mousedown", z);
     };
-  }, [n]);
+  }, [l]);
   const S = (z) => {
     if (!z) return "";
     const y = z.getDate().toString().padStart(2, "0"), T = (z.getMonth() + 1).toString().padStart(2, "0"), u = z.getFullYear();
@@ -428,13 +483,13 @@ const Je = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
       $.push(new Date(L)), L.setDate(L.getDate() + 1);
     return $;
   }, k = (z) => {
-    z.getMonth() === p.getMonth() && (g && z < g || f && z > f || (l?.(z), d(!1)));
-  }, q = () => {
+    z.getMonth() === p.getMonth() && (g && z < g || f && z > f || (n?.(z), d(!1)));
+  }, H = () => {
     N(new Date(p.getFullYear(), p.getMonth() - 1, 1));
-  }, K = () => {
+  }, G = () => {
     N(new Date(p.getFullYear(), p.getMonth() + 1, 1));
-  }, H = () => {
-    l?.(null), d(!1);
+  }, q = () => {
+    n?.(null), d(!1);
   }, F = x(
     "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",
@@ -448,7 +503,7 @@ const Je = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
       "px-4 py-3 text-base": i === "full"
     },
     h
-  ), M = B(), J = [
+  ), E = B(), J = [
     "January",
     "February",
     "March",
@@ -474,7 +529,7 @@ const Je = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
           disabled: a,
           required: o,
           readOnly: !0,
-          onClick: () => !a && d(!n),
+          onClick: () => !a && d(!l),
           className: x(F, "pr-10 cursor-pointer")
         }
       ),
@@ -482,21 +537,21 @@ const Je = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
         "button",
         {
           type: "button",
-          onClick: () => !a && d(!n),
+          onClick: () => !a && d(!l),
           disabled: a,
           className: "absolute inset-y-0 right-0 flex items-center pr-3 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300",
-          children: /* @__PURE__ */ e(Je, {})
+          children: /* @__PURE__ */ e(Qe, {})
         }
       )
     ] }),
-    n && /* @__PURE__ */ c("div", { className: "absolute z-50 mt-1 bg-white dark:bg-neutral-800 border border-neutral-100 dark:border-neutral-600 rounded-md shadow-lg p-4 min-w-[280px]", children: [
+    l && /* @__PURE__ */ c("div", { className: "absolute z-50 mt-1 bg-white dark:bg-neutral-800 border border-neutral-100 dark:border-neutral-600 rounded-md shadow-lg p-4 min-w-[280px]", children: [
       /* @__PURE__ */ c("div", { className: "flex items-center justify-between mb-4", children: [
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: q,
+            onClick: H,
             className: "p-1 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded",
-            children: /* @__PURE__ */ e(Ye, {})
+            children: /* @__PURE__ */ e(er, {})
           }
         ),
         /* @__PURE__ */ c("h3", { className: "text-sm font-medium text-neutral-900 dark:text-neutral-100", children: [
@@ -507,14 +562,14 @@ const Je = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: K,
+            onClick: G,
             className: "p-1 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded",
-            children: /* @__PURE__ */ e(Ze, {})
+            children: /* @__PURE__ */ e(rr, {})
           }
         )
       ] }),
       /* @__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: M.map((z, y) => {
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-7 gap-1", children: E.map((z, y) => {
         const T = z.getMonth() === p.getMonth(), u = r && z.toDateString() === r.toDateString(), $ = z.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), L = !T || g && z < g || f && z > f;
         return /* @__PURE__ */ e(
           "button",
@@ -539,7 +594,7 @@ const Je = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: H,
+            onClick: q,
             className: "text-sm text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300",
             children: "Clear"
           }
@@ -555,7 +610,7 @@ const Je = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
       ] })
     ] })
   ] });
-}), de = (...r) => r.filter(Boolean).join(" "), Xe = (r) => /* @__PURE__ */ e(
+}), de = (...r) => r.filter(Boolean).join(" "), tr = (r) => /* @__PURE__ */ e(
   "svg",
   {
     ...r,
@@ -573,7 +628,7 @@ const Je = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
       }
     )
   }
-), Qe = (r) => /* @__PURE__ */ e(
+), ar = (r) => /* @__PURE__ */ e(
   "svg",
   {
     ...r,
@@ -591,7 +646,7 @@ const Je = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
       }
     )
   }
-), er = {
+), nr = {
   sm: "px-3 py-1.5 text-sm",
   md: "px-3 py-2 text-sm",
   lg: "px-3 py-2 text-sm",
@@ -601,20 +656,20 @@ const Je = () => /* @__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"
-}, rr = ce(
+}, lr = ce(
   ({
     label: r,
-    helperText: l,
+    helperText: n,
     error: t,
     size: a = "md",
     fullWidth: o = !1,
-    startIcon: i = /* @__PURE__ */ e(Xe, {}),
+    startIcon: i = /* @__PURE__ */ e(tr, {}),
     loading: h = !1,
     containerClassName: g,
     labelClassName: f,
     className: b,
     id: m,
-    options: n,
+    options: l,
     onRemoteSearch: d,
     onSelect: p,
     debounceTime: N = 500,
@@ -622,26 +677,26 @@ const Je = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
     onChange: S,
     ...B
   }, k) => {
-    const q = m || `searchfield-${Math.random().toString(36).substr(2, 9)}`, K = !!t, H = Q(null), F = Q(null), [M, J] = V(v || ""), [z, y] = V(!1), [T, u] = V(!1);
-    G(() => {
+    const H = m || `searchfield-${Math.random().toString(36).substr(2, 9)}`, G = !!t, q = X(null), F = X(null), [E, J] = V(v || ""), [z, y] = V(!1), [T, u] = V(!1);
+    K(() => {
       v !== void 0 && J(v);
     }, [v]);
     const $ = ie(() => {
-      if (!M) return n;
-      const W = String(M).toLowerCase();
-      return n.filter(
+      if (!E) return l;
+      const W = String(E).toLowerCase();
+      return l.filter(
         (C) => String(C.label).toLowerCase().includes(W)
       );
-    }, [M, n]);
-    G(() => {
-      if (!d || !M) {
+    }, [E, l]);
+    K(() => {
+      if (!d || !E) {
         u(!1);
         return;
       }
       const W = setTimeout(async () => {
         u(!0);
         try {
-          await d(String(M));
+          await d(String(E));
         } catch (C) {
           console.error("Remote search failed:", C);
         } finally {
@@ -651,9 +706,9 @@ const Je = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
       return () => {
         clearTimeout(W), u(!1);
       };
-    }, [M, N, d]), G(() => {
+    }, [E, N, d]), K(() => {
       const W = (C) => {
-        H.current && !H.current.contains(C.target) && y(!1);
+        q.current && !q.current.contains(C.target) && y(!1);
       };
       return document.addEventListener("mousedown", W), () => document.removeEventListener("mousedown", W);
     }, []);
@@ -663,8 +718,8 @@ const Je = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
     }, D = (W) => {
       J(W.label), y(!1), p && p(W.value);
     }, P = () => {
-      (n.length > 0 || d) && y(!0);
-    }, E = h || T, re = z && ($.length > 0 || E), ne = ie(() => k || F, [k]);
+      (l.length > 0 || d) && y(!0);
+    }, M = h || T, re = z && ($.length > 0 || M), ne = ie(() => k || F, [k]);
     return /* @__PURE__ */ c(
       "div",
       {
@@ -674,15 +729,15 @@ const Je = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
           g || "",
           "relative"
         ),
-        ref: H,
+        ref: q,
         children: [
           r && /* @__PURE__ */ e(
             "label",
             {
-              htmlFor: q,
+              htmlFor: H,
               className: de(
                 "block text-sm font-medium mb-1",
-                K ? "text-red-500" : "text-gray-700 dark:text-gray-300",
+                G ? "text-red-500" : "text-gray-700 dark:text-gray-300",
                 f || ""
               ),
               children: r
@@ -694,8 +749,8 @@ const Je = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
               "input",
               {
                 ref: ne,
-                id: q,
-                value: M,
+                id: H,
+                value: E,
                 onChange: L,
                 onFocus: P,
                 className: de(
@@ -704,19 +759,19 @@ const Je = () => /* @__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
-                  er[a],
+                  nr[a],
                   // Icon padding
                   i ? "pl-10" : "",
                   "pr-10",
                   // Altijd padding rechts voor de dropdown/loading icon
                   // State styles
-                  K ? "border-red-500 text-red-500 focus:border-red-500 focus:ring-red-500" : "border-gray-300 text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100",
+                  G ? "border-red-500 text-red-500 focus:border-red-500 focus:ring-red-500" : "border-gray-300 text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100",
                   b || ""
                 ),
                 ...B
               }
             ),
-            /* @__PURE__ */ e("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: E || h ? (
+            /* @__PURE__ */ e("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: M || h ? (
               // Loading Spinner
               /* @__PURE__ */ c(
                 "svg",
@@ -751,7 +806,7 @@ const Je = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
             ) : (
               // Dropdown Chevron
               /* @__PURE__ */ e(
-                Qe,
+                ar,
                 {
                   className: de(
                     "text-gray-400 cursor-pointer transition-transform",
@@ -774,34 +829,34 @@ const Je = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
                   className: "px-4 py-2 cursor-pointer text-gray-900 dark:text-gray-100 hover:bg-blue-500 hover:text-white transition-colors",
                   onClick: () => D(W),
                   role: "option",
-                  "aria-selected": M === W.label,
+                  "aria-selected": E === W.label,
                   children: W.label
                 },
                 W.value
-              )) : /* @__PURE__ */ e("li", { className: "px-4 py-2 text-gray-500 dark:text-gray-400", children: E || h ? "Zoeken op afstand..." : "Geen resultaten gevonden." })
+              )) : /* @__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 || l) && /* @__PURE__ */ e(
+          (t || n) && /* @__PURE__ */ e(
             "p",
             {
               className: de(
                 "mt-1 text-xs",
-                K ? "text-red-500" : "text-gray-500"
+                G ? "text-red-500" : "text-gray-500"
               ),
-              children: t || l
+              children: t || n
             }
           ),
           d && /* @__PURE__ */ c("p", { className: "mt-2 text-xs text-green-600 dark:text-green-400", children: [
             "Huidige zoekterm (niet-gedebounced): ",
-            String(M)
+            String(E)
           ] })
         ]
       }
     );
   }
 );
-rr.displayName = "SearchableTextField";
-const tr = {
+lr.displayName = "SearchableTextField";
+const sr = {
   sm: "px-3 py-1.5 text-sm",
   md: "px-3 py-2 text-sm",
   lg: "px-3 py-2 text-sm",
@@ -809,7 +864,7 @@ const tr = {
 }, me = (r) => r.trim().toLowerCase(), ve = ce(
   ({
     label: r,
-    helperText: l,
+    helperText: n,
     error: t,
     size: a = "md",
     fullWidth: o = !1,
@@ -819,7 +874,7 @@ const tr = {
     labelClassName: f,
     className: b,
     id: m,
-    searchable: n,
+    searchable: l,
     multiple: d,
     value: p,
     onChange: N,
@@ -827,7 +882,7 @@ const tr = {
     onCreateOption: S,
     ...B
   }, k) => {
-    const q = m || `select-${Math.random().toString(36).substr(2, 9)}`, K = !!t, [H, F] = se.useState(!1), [M, J] = se.useState(""), z = se.useRef(null), [y, T] = se.useState(i);
+    const H = m || `select-${Math.random().toString(36).substr(2, 9)}`, G = !!t, [q, F] = se.useState(!1), [E, J] = se.useState(""), z = se.useRef(null), [y, T] = se.useState(i);
     se.useImperativeHandle(k, () => z.current), se.useEffect(() => {
       const C = (I) => {
         z.current && !z.current.contains(I.target) && F(!1);
@@ -836,49 +891,49 @@ const tr = {
     }, []);
     const u = se.useCallback(
       (C, I) => C.some(
-        (O) => me(O.value) === me(I) || me(O.label) === me(I)
+        (_) => me(_.value) === me(I) || me(_.label) === me(I)
       ),
       []
     ), $ = se.useCallback(
       (C, I) => {
-        const O = [...C], A = (X) => {
-          const te = (X ?? "").trim();
-          te && (u(O, te) || O.push({ value: te, label: te }));
+        const _ = [...C], A = (Q) => {
+          const te = (Q ?? "").trim();
+          te && (u(_, te) || _.push({ value: te, label: te }));
         };
-        return Array.isArray(I) ? I.forEach(A) : A(I), O;
+        return Array.isArray(I) ? I.forEach(A) : A(I), _;
       },
       [u]
     );
     se.useEffect(() => {
       T((C) => {
         const I = [...i];
-        return C.forEach((O) => {
-          !u(I, O.value) && !u(I, O.label) && I.push(O);
+        return C.forEach((_) => {
+          !u(I, _.value) && !u(I, _.label) && I.push(_);
         }), $(I, p);
       });
     }, [i, p, $, u]);
     const L = (C) => {
       if (d) {
-        const I = Array.isArray(p) ? p : [], O = I.includes(C) ? I.filter((A) => A !== C) : [...I, C];
-        N?.(O);
+        const I = Array.isArray(p) ? p : [], _ = I.includes(C) ? I.filter((A) => A !== C) : [...I, C];
+        N?.(_);
       } else
         N?.(C), F(!1), J("");
     }, D = d ? null : y.find((C) => C.value === p), P = d ? y.filter(
       (C) => Array.isArray(p) && p.includes(C.value)
-    ) : [], E = n && M ? y.filter(
-      (C) => C.label.toLowerCase().includes(M.toLowerCase())
-    ) : y, re = !!v && !!n && !!M.trim() && !u(y, M), ne = (C) => {
+    ) : [], M = l && E ? y.filter(
+      (C) => C.label.toLowerCase().includes(E.toLowerCase())
+    ) : y, re = !!v && !!l && !!E.trim() && !u(y, E), ne = (C) => {
       const I = C.trim();
       if (!I) return;
-      const O = S?.(I) ?? {
+      const _ = S?.(I) ?? {
         value: I,
         label: I
       };
-      if (u(y, O.value) || u(y, O.label)) {
-        L(O.value), J(""), d || F(!1);
+      if (u(y, _.value) || u(y, _.label)) {
+        L(_.value), J(""), d || F(!1);
         return;
       }
-      T((A) => [...A, O]), L(O.value), J(""), d || F(!1);
+      T((A) => [...A, _]), L(_.value), J(""), d || F(!1);
     }, W = () => d ? P.length > 0 ? P.map((C) => C.label).join(", ") : h || "Select options" : D?.label || h || "Select an option";
     return /* @__PURE__ */ c(
       "div",
@@ -894,11 +949,11 @@ const tr = {
           r && /* @__PURE__ */ e(
             "label",
             {
-              htmlFor: q,
-              onClick: () => F(!H),
+              htmlFor: H,
+              onClick: () => F(!q),
               className: x(
                 "block text-sm font-medium mb-1",
-                K ? "text-error" : "text-secondary-700 dark:text-secondary-300",
+                G ? "text-error" : "text-secondary-700 dark:text-secondary-300",
                 f
               ),
               children: r
@@ -909,30 +964,30 @@ const tr = {
               "button",
               {
                 type: "button",
-                id: q,
-                onClick: () => F(!H),
+                id: H,
+                onClick: () => F(!q),
                 className: x(
                   "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",
-                  tr[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",
+                  sr[a],
+                  G ? "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",
                   b
                 ),
                 children: /* @__PURE__ */ e("span", { className: "block truncate", children: W() })
               }
             ),
-            H && /* @__PURE__ */ c("div", { className: "absolute z-10 mt-1 w-full rounded-md bg-white dark:bg-secondary-800 shadow-lg border border-neutral dark:border-neutral-700", children: [
-              n && /* @__PURE__ */ e("div", { className: "p-2", children: /* @__PURE__ */ e(
+            q && /* @__PURE__ */ c("div", { className: "absolute z-10 mt-1 w-full rounded-md bg-white dark:bg-secondary-800 shadow-lg border border-neutral dark:border-neutral-700", children: [
+              l && /* @__PURE__ */ e("div", { className: "p-2", children: /* @__PURE__ */ e(
                 "input",
                 {
                   type: "text",
                   placeholder: "Search...",
-                  value: M,
+                  value: E,
                   onChange: (C) => J(C.target.value),
                   onKeyDown: (C) => {
-                    C.key === "Enter" && re && (C.preventDefault(), ne(M));
+                    C.key === "Enter" && re && (C.preventDefault(), ne(E));
                   },
                   className: x(
                     "w-full px-3 py-2 text-sm rounded-md border",
@@ -947,10 +1002,10 @@ const tr = {
                     "px-4 py-2 text-sm cursor-pointer",
                     "text-primary hover:bg-gray-100 dark:hover:bg-secondary-700"
                   ),
-                  onClick: () => ne(M),
+                  onClick: () => ne(E),
                   children: [
                     "+: “",
-                    M.trim(),
+                    E.trim(),
                     "”"
                   ]
                 }
@@ -966,7 +1021,7 @@ const tr = {
                     children: h
                   }
                 ),
-                E.map((C) => {
+                M.map((C) => {
                   const I = d ? Array.isArray(p) && p.includes(C.value) : p === C.value;
                   return /* @__PURE__ */ e(
                     "li",
@@ -997,14 +1052,14 @@ const tr = {
               ] })
             ] })
           ] }),
-          (t || l) && /* @__PURE__ */ e(
+          (t || n) && /* @__PURE__ */ e(
             "p",
             {
               className: x(
                 "mt-1 text-xs",
-                K ? "text-error" : "text-secondary-500"
+                G ? "text-error" : "text-secondary-500"
               ),
-              children: t || l
+              children: t || n
             }
           )
         ]
@@ -1013,7 +1068,7 @@ const tr = {
   }
 );
 ve.displayName = "Select";
-const ar = {
+const or = {
   sm: "px-3 py-1.5 text-sm",
   md: "px-3 py-2 text-sm",
   lg: "px-4 py-3 text-base",
@@ -1021,7 +1076,7 @@ const ar = {
 }, ke = ce(
   ({
     label: r,
-    helperText: l,
+    helperText: n,
     error: t,
     size: a = "md",
     fullWidth: o = !1,
@@ -1031,7 +1086,7 @@ const ar = {
     className: f,
     id: b,
     rows: m = 4,
-    ...n
+    ...l
   }, d) => {
     const p = b || `textarea-${Math.random().toString(36).substr(2, 9)}`, N = !!t;
     return /* @__PURE__ */ c("div", { className: x("flex flex-col", o && "w-full", h), children: [
@@ -1060,12 +1115,12 @@ const ar = {
               "placeholder-secondary-400 focus:outline-none focus:ring-0",
               "disabled:opacity-50 disabled:cursor-not-allowed",
               // Size styles
-              ar[a],
+              or[a],
               // State styles
               N ? "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",
               f
             ),
-            ...n
+            ...l
           }
         ),
         i && /* @__PURE__ */ e("div", { className: "absolute top-3 right-3", children: /* @__PURE__ */ c(
@@ -1098,21 +1153,21 @@ const ar = {
           }
         ) })
       ] }),
-      (t || l) && /* @__PURE__ */ e(
+      (t || n) && /* @__PURE__ */ e(
         "p",
         {
           className: x(
             "mt-1 text-xs",
             N ? "text-error" : "text-secondary-500"
           ),
-          children: t || l
+          children: t || n
         }
       )
     ] });
   }
 );
 ke.displayName = "TextArea";
-const nr = {
+const cr = {
   sm: "px-3 py-1.5 text-sm",
   md: "px-3 py-2 text-sm",
   lg: "px-3 py-2 text-sm",
@@ -1125,7 +1180,7 @@ const nr = {
 }, ue = ce(
   ({
     label: r,
-    helperText: l,
+    helperText: n,
     error: t,
     size: a = "md",
     fullWidth: o = !1,
@@ -1135,10 +1190,10 @@ const nr = {
     containerClassName: f,
     labelClassName: b,
     className: m,
-    id: n,
+    id: l,
     ...d
   }, p) => {
-    const N = n || `textfield-${Math.random().toString(36).substr(2, 9)}`, v = !!t;
+    const N = l || `textfield-${Math.random().toString(36).substr(2, 9)}`, v = !!t;
     return /* @__PURE__ */ c("div", { className: x("flex flex-col", o && "w-full", f), children: [
       r && /* @__PURE__ */ e(
         "label",
@@ -1166,7 +1221,7 @@ const nr = {
               "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
-              nr[a],
+              cr[a],
               // Icon padding
               i && "pl-10",
               h && "pr-10",
@@ -1207,14 +1262,14 @@ const nr = {
           }
         ) : h && /* @__PURE__ */ e("span", { className: x("text-secondary-400", ge[a]), children: h }) })
       ] }),
-      (t || l) && /* @__PURE__ */ e(
+      (t || n) && /* @__PURE__ */ e(
         "p",
         {
           className: x(
             "mt-1 text-xs",
             v ? "text-error" : "text-secondary-500"
           ),
-          children: t || l
+          children: t || n
         }
       )
     ] });
@@ -1223,7 +1278,7 @@ const nr = {
 ue.displayName = "TextField";
 const oe = ({
   icon: r,
-  size: l = "md",
+  size: n = "md",
   color: t = "current",
   clickable: a = !1,
   onClick: o,
@@ -1231,7 +1286,7 @@ const oe = ({
   "aria-label": h,
   ...g
 }) => {
-  const f = typeof l == "number" ? l : lr(l), b = x(
+  const f = typeof n == "number" ? n : dr(n), b = x(
     "inline-block",
     // Color variants
     {
@@ -1258,14 +1313,14 @@ const oe = ({
     "aria-label": h,
     role: a ? "button" : void 0,
     tabIndex: a ? 0 : void 0,
-    onKeyDown: a ? (n) => {
-      (n.key === "Enter" || n.key === " ") && (n.preventDefault(), o?.());
+    onKeyDown: a ? (l) => {
+      (l.key === "Enter" || l.key === " ") && (l.preventDefault(), o?.());
     } : void 0,
     ...g
   };
   return /* @__PURE__ */ e(r, { ...m });
 };
-function lr(r) {
+function dr(r) {
   return {
     xs: 12,
     sm: 16,
@@ -1274,21 +1329,21 @@ function lr(r) {
     xl: 32
   }[r];
 }
-function sr({
+function ir({
   children: r,
-  showTableSkeleton: l = !1,
+  showTableSkeleton: n = !1,
   tableColumns: t = 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__ */ c("div", { className: "w-full mx-auto space-y-6 animate-pulse", children: [
-    !l && /* @__PURE__ */ c(Ee, { children: [
+    !n && /* @__PURE__ */ c(Me, { children: [
       /* @__PURE__ */ e("div", { className: "h-6 bg-gray-200 dark:bg-gray-700 rounded w-1/4" }),
       /* @__PURE__ */ c("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" })
       ] })
     ] }),
-    l && /* @__PURE__ */ c("div", { className: "rounded-lg overflow-hidden", children: [
+    n && /* @__PURE__ */ c("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((o, i) => /* @__PURE__ */ e(
         "div",
         {
@@ -1313,9 +1368,9 @@ function sr({
     ] })
   ] }) });
 }
-const or = ({
+const ur = ({
   trigger: r,
-  options: l,
+  options: n,
   value: t,
   onSelect: a,
   placement: o = "bottom-start",
@@ -1324,25 +1379,25 @@ const or = ({
   showCheck: g = !0,
   header: f
 }) => {
-  const [b, m] = V(!1), [n, d] = V(null), [p, N] = V({ top: 0, left: 0 }), v = Q(null), S = Q(null), B = Q(null), k = Q(null);
-  G(() => {
+  const [b, m] = V(!1), [l, d] = V(null), [p, N] = V({ top: 0, left: 0 }), v = X(null), S = X(null), B = X(null), k = X(null);
+  K(() => {
     const y = (T) => {
       v.current && (!v.current.contains(T.target) || B.current && !B.current.contains(T.target)) && (m(!1), d(null), k.current && (clearTimeout(k.current), k.current = null));
     };
     return b && document.addEventListener("mousedown", y), () => {
       document.removeEventListener("mousedown", y);
     };
-  }, [b]), G(() => {
+  }, [b]), K(() => {
     const y = (T) => {
       T.key === "Escape" && (m(!1), d(null), k.current && (clearTimeout(k.current), k.current = null));
     };
     return b && document.addEventListener("keydown", y), () => {
       document.removeEventListener("keydown", y);
     };
-  }, [b]), G(() => {
-    if (n && v.current) {
+  }, [b]), K(() => {
+    if (l && v.current) {
       const y = v.current.querySelector(
-        `[data-option-value="${n}"]`
+        `[data-option-value="${l}"]`
       );
       if (y) {
         const T = y.getBoundingClientRect();
@@ -1352,20 +1407,20 @@ const or = ({
         });
       }
     }
-  }, [n]), G(() => () => {
+  }, [l]), K(() => () => {
     k.current && clearTimeout(k.current);
   }, []);
-  const q = (y) => {
+  const H = (y) => {
     y.stopPropagation(), i || (m(!b), d(null), k.current && (clearTimeout(k.current), k.current = null));
-  }, K = (y, T, u) => {
+  }, G = (y, T, u) => {
     y.stopPropagation(), !T.disabled && !T.divider && (!T.children || T.children.length === 0) && (a?.(T.value, u), m(!1), d(null));
-  }, H = (y) => {
+  }, q = (y) => {
     k.current && (clearTimeout(k.current), k.current = null), y.children && y.children.length > 0 ? d(y.value) : d(null);
   }, F = (y) => {
     y.children && y.children.length > 0 ? k.current = setTimeout(() => {
       d(null);
     }, 150) : d(null);
-  }, M = (y, T, u) => {
+  }, E = (y, T, u) => {
     y.stopPropagation(), !T.disabled && !T.divider && (a?.(T.value, u), m(!1), d(null));
   }, J = x(
     "absolute z-50 min-w-[200px] bg-white dark:bg-gray-800 rounded-md shadow-xs border border-gray-100 dark:border-gray-600",
@@ -1393,7 +1448,7 @@ const or = ({
           "button",
           {
             ref: S,
-            onClick: q,
+            onClick: H,
             disabled: i,
             className: x("inline-flex items-center justify-center", {
               "opacity-50 cursor-not-allowed": i
@@ -1403,7 +1458,7 @@ const or = ({
         ),
         b && /* @__PURE__ */ e("div", { className: J, children: /* @__PURE__ */ c("div", { className: "p-2", children: [
           f && (typeof f == "string" ? /* @__PURE__ */ e("div", { className: "text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider px-3 py-2", children: f }) : f),
-          l.map((y, T) => {
+          n.map((y, T) => {
             if (y.divider)
               return /* @__PURE__ */ e(
                 "div",
@@ -1412,14 +1467,14 @@ const or = ({
                 },
                 `divider-${T}`
               );
-            const u = y.children && y.children.length > 0, $ = n === y.value;
+            const u = y.children && y.children.length > 0, $ = l === y.value;
             return /* @__PURE__ */ c("div", { className: "relative group", children: [
               /* @__PURE__ */ c(
                 "button",
                 {
                   "data-option-value": y.value,
-                  onClick: (L) => K(L, y),
-                  onMouseEnter: () => H(y),
+                  onClick: (L) => G(L, y),
+                  onMouseEnter: () => q(y),
                   onMouseLeave: () => F(y),
                   disabled: y.disabled,
                   className: x(
@@ -1476,8 +1531,8 @@ const or = ({
                     return /* @__PURE__ */ c(
                       "button",
                       {
-                        onClick: (E) => M(
-                          E,
+                        onClick: (M) => E(
+                          M,
                           L,
                           y.value
                         ),
@@ -1507,7 +1562,7 @@ const or = ({
             ] }, y.value);
           }),
           (() => {
-            const y = l.reduce((T, u) => {
+            const y = n.reduce((T, u) => {
               if (u.divider) return T;
               const $ = u.children ? u.children.filter((L) => !L.divider).length : 0;
               return T + 1 + $;
@@ -1521,7 +1576,7 @@ const or = ({
       ]
     }
   );
-}, cr = () => /* @__PURE__ */ e(
+}, mr = () => /* @__PURE__ */ e(
   "svg",
   {
     className: "h-4 w-4",
@@ -1538,7 +1593,7 @@ const or = ({
       }
     )
   }
-), dr = ({ active: r }) => /* @__PURE__ */ e(
+), hr = ({ active: r }) => /* @__PURE__ */ e(
   "svg",
   {
     className: x(
@@ -1558,7 +1613,7 @@ const or = ({
       }
     )
   }
-), ir = ({ active: r }) => /* @__PURE__ */ e(
+), fr = ({ active: r }) => /* @__PURE__ */ e(
   "svg",
   {
     className: x(
@@ -1578,7 +1633,7 @@ const or = ({
       }
     )
   }
-), ur = () => /* @__PURE__ */ e(
+), pr = () => /* @__PURE__ */ e(
   "svg",
   {
     className: "h-4 w-4",
@@ -1595,7 +1650,7 @@ const or = ({
       }
     )
   }
-), mr = () => /* @__PURE__ */ e(
+), xr = () => /* @__PURE__ */ e(
   "svg",
   {
     className: "h-4 w-4",
@@ -1612,7 +1667,7 @@ const or = ({
       }
     )
   }
-), hr = () => /* @__PURE__ */ e(
+), gr = () => /* @__PURE__ */ e(
   "svg",
   {
     className: "h-4 w-4",
@@ -1629,7 +1684,7 @@ const or = ({
       }
     )
   }
-), fr = () => /* @__PURE__ */ e(
+), br = () => /* @__PURE__ */ e(
   "svg",
   {
     className: "h-4 w-4",
@@ -1663,8 +1718,8 @@ const or = ({
       }
     )
   }
-), pr = (r) => {
-  const l = (a) => r.multiSelect && Array.isArray(r.value) ? r.value?.includes(a) : r.value === a, t = (a) => {
+), 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((o) => o !== a)) : r.onChange(a);
   };
   return r.type === "date" ? /* @__PURE__ */ e("div", { className: "flex items-center space-x-1 max-w-[160px]", children: /* @__PURE__ */ e(
@@ -1693,7 +1748,7 @@ const or = ({
           children: /* @__PURE__ */ e(
             "span",
             {
-              className: x(l(a.value) && "text-primary-500"),
+              className: x(n(a.value) && "text-primary-500"),
               children: a.label
             }
           )
@@ -1712,7 +1767,7 @@ const or = ({
   ] }) }) });
 }, Se = ({
   data: r,
-  columns: l,
+  columns: n,
   loading: t = !1,
   searchable: a = !1,
   searchPlaceholder: o = "Search...",
@@ -1722,69 +1777,69 @@ const or = ({
   defaultPageSize: f = 10,
   actions: b = [],
   onRowClick: m,
-  selectable: n = !1,
+  selectable: l = !1,
   selectedRows: d = [],
   onSelectionChange: p,
-  getRowKey: N = (H, F) => F,
+  getRowKey: N = (q, F) => F,
   emptyContent: v,
   hoverable: S = !0,
   bordered: B = !1,
   striped: k = !1,
-  className: q,
-  rowClassName: K
+  className: H,
+  rowClassName: G
 }) => {
-  const [H, F] = V(""), [M, J] = V({
+  const [q, F] = V(""), [E, J] = V({
     column: null,
     direction: null
   }), [z, y] = V({
     page: 0,
     pageSize: f
-  }), T = Q(null), u = ie(() => {
+  }), T = X(null), u = ie(() => {
     let s = r;
-    if (a && H.trim()) {
-      const w = l.filter(
+    if (a && q.trim()) {
+      const w = n.filter(
         (R) => R.searchable !== !1
-      ), _ = H.toLowerCase();
+      ), O = q.toLowerCase();
       s = s.filter((R) => w.some((j) => {
         const Y = typeof j.accessor == "function" ? j.accessor(R) : R[j.accessor];
-        return String(Y || "").toLowerCase().includes(_);
+        return String(Y || "").toLowerCase().includes(O);
       }));
     }
     return i.forEach((w) => {
-      w.value && w.value !== "all" && (s = s.filter((_) => {
-        const R = l.find((Y) => Y.id === w.id);
+      w.value && w.value !== "all" && (s = s.filter((O) => {
+        const R = n.find((Y) => Y.id === w.id);
         if (!R) return !0;
-        const j = typeof R.accessor == "function" ? R.accessor(_) : _[R.accessor];
+        const j = typeof R.accessor == "function" ? R.accessor(O) : O[R.accessor];
         return String(j || "") === w.value;
       }));
     }), s;
-  }, [r, H, l, a, i]), $ = ie(() => {
-    if (!M.column || !M.direction) return u;
-    const s = l.find((w) => w.id === M.column);
-    return s ? [...u].sort((w, _) => {
-      const R = typeof s.accessor == "function" ? s.accessor(w) : w[s.accessor], j = typeof s.accessor == "function" ? s.accessor(_) : _[s.accessor];
+  }, [r, q, n, a, i]), $ = ie(() => {
+    if (!E.column || !E.direction) return u;
+    const s = n.find((w) => w.id === E.column);
+    return s ? [...u].sort((w, O) => {
+      const R = typeof s.accessor == "function" ? s.accessor(w) : w[s.accessor], j = typeof s.accessor == "function" ? s.accessor(O) : O[s.accessor];
       let Y = 0;
-      return R < j ? Y = -1 : R > j && (Y = 1), M.direction === "desc" ? -Y : Y;
+      return R < j ? Y = -1 : R > j && (Y = 1), E.direction === "desc" ? -Y : Y;
     }) : u;
-  }, [u, M, l]), L = ie(() => {
+  }, [u, E, n]), L = ie(() => {
     if (!h) return $;
     const s = z.page * z.pageSize, w = s + z.pageSize;
     return $.slice(s, w);
   }, [$, z, h]), D = ae(
     (s) => {
-      l.find((_) => _.id === s)?.sortable && J((_) => _.column !== s ? { column: s, direction: "asc" } : _.direction === "asc" ? { column: s, direction: "desc" } : { column: null, direction: null });
+      n.find((O) => O.id === s)?.sortable && J((O) => O.column !== s ? { column: s, direction: "asc" } : O.direction === "asc" ? { column: s, direction: "desc" } : { column: null, direction: null });
     },
-    [l]
+    [n]
   ), P = ae((s) => {
     y((w) => ({ ...w, page: s }));
-  }, []), E = ae((s) => {
+  }, []), M = ae((s) => {
     y({ page: 0, pageSize: s });
   }, []), re = ae(
     (s, w) => {
       if (!p) return;
-      const _ = N(s, 0);
+      const O = N(s, 0);
       d.map((R, j) => N(R, j)), p(w ? [...d, s] : d.filter(
-        (R, j) => N(d[j], j) !== _
+        (R, j) => N(d[j], j) !== O
       ));
     },
     [d, p, N]
@@ -1794,24 +1849,24 @@ const or = ({
     },
     [L, p]
   );
-  G(() => {
+  K(() => {
     y((s) => ({ ...s, page: 0 }));
-  }, [H, M]), G(() => {
+  }, [q, E]), K(() => {
     y((s) => ({ ...s, page: 0 }));
   }, [i.map((s) => s.value).join(",")]);
-  const W = $.length, C = Math.ceil(W / z.pageSize), I = z.page * z.pageSize + 1, O = Math.min(I + z.pageSize - 1, W), A = L.length > 0 && L.every((s) => {
+  const W = $.length, C = Math.ceil(W / z.pageSize), I = z.page * z.pageSize + 1, _ = Math.min(I + z.pageSize - 1, W), A = L.length > 0 && L.every((s) => {
     const w = N(s, 0);
     return d.some(
-      (_, R) => N(_, R) === w
+      (O, R) => N(O, R) === w
     );
-  }), X = L.some((s) => {
+  }), Q = L.some((s) => {
     const w = N(s, 0);
     return d.some(
-      (_, R) => N(_, R) === w
+      (O, R) => N(O, R) === w
     );
   }), te = x(
     "w-full text-sm leading-5 text-[var(--text-default)] border-collapse",
-    q
+    H
   ), U = x("bg-[var(--base-module)]"), le = x(
     "text-[var(--text-default)] dark:text-[var(--text-on-neutral)] p-3 border-b border-[var(--neutral-border)]"
   ), he = x("h-12", {
@@ -1820,42 +1875,42 @@ const or = ({
   });
   return /* @__PURE__ */ c("div", { className: "space-y-4", children: [
     (a || i.length > 0) && /* @__PURE__ */ e("div", { className: "pt-4 pb-2", children: /* @__PURE__ */ c("div", { className: "flex flex-wrap gap-4 items-start", children: [
-      i.map((s) => /* @__PURE__ */ e(pr, { ...s }, s.id)),
+      i.map((s) => /* @__PURE__ */ e(yr, { ...s }, s.id)),
       /* @__PURE__ */ e("div", { className: "w-full sm:w-auto sm:ml-auto min-w-[200px]", children: /* @__PURE__ */ e(
         ue,
         {
           placeholder: o,
-          value: H,
+          value: q,
           onChange: (s) => F(s.target.value),
-          startIcon: /* @__PURE__ */ e(cr, {}),
+          startIcon: /* @__PURE__ */ e(mr, {}),
           className: "max-w-sm"
         }
       ) })
     ] }) }),
     /* @__PURE__ */ c("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(
-        sr,
+        ir,
         {
           showTableSkeleton: !0,
           tableRows: 10,
-          tableColumns: l.length
+          tableColumns: n.length
         }
       ) }),
       /* @__PURE__ */ c("table", { ref: T, className: x(te, "min-w-full"), children: [
         /* @__PURE__ */ e("thead", { className: U, children: /* @__PURE__ */ c("tr", { children: [
-          n && /* @__PURE__ */ e("th", { className: x(le, "w-12"), children: /* @__PURE__ */ e(
+          l && /* @__PURE__ */ e("th", { className: x(le, "w-12"), children: /* @__PURE__ */ e(
             "input",
             {
               type: "checkbox",
               checked: A,
               ref: (s) => {
-                s && (s.indeterminate = X && !A);
+                s && (s.indeterminate = Q && !A);
               },
               onChange: (s) => ne(s.target.checked),
               className: "rounded border-neutral-300 dark:border-neutral-600"
             }
           ) }),
-          !t && l.map((s) => /* @__PURE__ */ e(
+          !t && n.map((s) => /* @__PURE__ */ e(
             "th",
             {
               className: x(
@@ -1880,19 +1935,19 @@ const or = ({
                   {
                     className: x(
                       "flex flex-col opacity-0 group-hover:opacity-100 transition-opacity",
-                      M.column === s.id && "opacity-100"
+                      E.column === s.id && "opacity-100"
                     ),
                     children: [
                       /* @__PURE__ */ e(
-                        dr,
+                        hr,
                         {
-                          active: M.column === s.id && M.direction === "asc"
+                          active: E.column === s.id && E.direction === "asc"
                         }
                       ),
                       /* @__PURE__ */ e(
-                        ir,
+                        fr,
                         {
-                          active: M.column === s.id && M.direction === "desc"
+                          active: E.column === s.id && E.direction === "desc"
                         }
                       )
                     ]
@@ -1907,7 +1962,7 @@ const or = ({
         /* @__PURE__ */ e("tbody", { children: L.length === 0 || t ? !t && /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e(
           "td",
           {
-            colSpan: l.length + (n ? 1 : 0) + (b.length > 0 ? 1 : 0),
+            colSpan: n.length + (l ? 1 : 0) + (b.length > 0 ? 1 : 0),
             className: x(
               le,
               "text-center py-8 text-neutral-500 dark:text-neutral-400"
@@ -1915,8 +1970,8 @@ const or = ({
             children: v || "No data available"
           }
         ) }) : L.map((s, w) => {
-          const _ = N(s, w), R = d.some(
-            (j, Y) => N(j, Y) === _
+          const O = N(s, w), R = d.some(
+            (j, Y) => N(j, Y) === O
           );
           return /* @__PURE__ */ c(
             "tr",
@@ -1924,13 +1979,13 @@ const or = ({
               className: x(
                 he,
                 { "bg-blue-50 dark:bg-blue-900/20": R },
-                K?.(s, w)
+                G?.(s, w)
               ),
               onClick: (j) => {
                 j.stopPropagation(), m?.(s, w);
               },
               children: [
-                n && /* @__PURE__ */ e("td", { className: le, children: /* @__PURE__ */ e(
+                l && /* @__PURE__ */ e("td", { className: le, children: /* @__PURE__ */ e(
                   "input",
                   {
                     type: "checkbox",
@@ -1941,7 +1996,7 @@ const or = ({
                     className: "rounded border-neutral-300 dark:border-neutral-600"
                   }
                 ) }),
-                l.map((j) => {
+                n.map((j) => {
                   const Y = typeof j.accessor == "function" ? j.accessor(s) : s[j.accessor];
                   return /* @__PURE__ */ e(
                     "td",
@@ -1959,7 +2014,7 @@ const or = ({
                   );
                 }),
                 b.length > 0 && /* @__PURE__ */ e("td", { className: le, children: /* @__PURE__ */ e(
-                  or,
+                  ur,
                   {
                     trigger: /* @__PURE__ */ c("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" }),
@@ -1982,7 +2037,7 @@ const or = ({
                 ) })
               ]
             },
-            _
+            O
           );
         }) })
       ] })
@@ -1993,7 +2048,7 @@ const or = ({
           "Showing ",
           I,
           " to ",
-          O,
+          _,
           " of ",
           W,
           " results"
@@ -2004,7 +2059,7 @@ const or = ({
             "select",
             {
               value: z.pageSize,
-              onChange: (s) => E(Number(s.target.value)),
+              onChange: (s) => M(Number(s.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: g.map((s) => /* @__PURE__ */ e("option", { value: s, children: s }, s))
             }
@@ -2020,7 +2075,7 @@ const or = ({
             onClick: () => P(0),
             disabled: z.page === 0,
             iconOnly: !0,
-            children: /* @__PURE__ */ e(hr, {})
+            children: /* @__PURE__ */ e(gr, {})
           }
         ),
         /* @__PURE__ */ e(
@@ -2031,7 +2086,7 @@ const or = ({
             onClick: () => P(z.page - 1),
             disabled: z.page === 0,
             iconOnly: !0,
-            children: /* @__PURE__ */ e(ur, {})
+            children: /* @__PURE__ */ e(pr, {})
           }
         ),
         /* @__PURE__ */ c("span", { className: "px-3 py-1 text-sm text-gray-500 dark:text-gray-400", children: [
@@ -2048,7 +2103,7 @@ const or = ({
             onClick: () => P(z.page + 1),
             disabled: z.page >= C - 1,
             iconOnly: !0,
-            children: /* @__PURE__ */ e(mr, {})
+            children: /* @__PURE__ */ e(xr, {})
           }
         ),
         /* @__PURE__ */ e(
@@ -2059,19 +2114,19 @@ const or = ({
             onClick: () => P(C - 1),
             disabled: z.page >= C - 1,
             iconOnly: !0,
-            children: /* @__PURE__ */ e(fr, {})
+            children: /* @__PURE__ */ e(br, {})
           }
         )
       ] })
     ] })
   ] });
-}, xr = Ae(null), Kr = ({
+}, vr = He(null), et = ({
   items: r,
-  activeTab: l,
+  activeTab: n,
   onTabChange: t,
   className: a
 }) => {
-  const [o, i] = V(r[0]?.id || ""), h = l || o, g = (f) => {
+  const [o, i] = V(r[0]?.id || ""), h = n || o, g = (f) => {
     t ? t(f) : i(f);
   };
   return /* @__PURE__ */ e("div", { className: x("border-b border-neutral-200 dark:border-neutral-700", a), children: /* @__PURE__ */ e("nav", { className: "-mb-px flex space-x-8", children: r.map((f) => /* @__PURE__ */ e(
@@ -2097,9 +2152,9 @@ const or = ({
     },
     f.id
   )) }) });
-}, gr = ({
+}, kr = ({
   items: r,
-  defaultTab: l,
+  defaultTab: n,
   activeTab: t,
   onTabChange: a,
   variant: o = "default",
@@ -2107,10 +2162,10 @@ const or = ({
   className: h
 }) => {
   const [g, f] = V(
-    l || t || r[0]?.id || ""
+    n || t || r[0]?.id || ""
   ), b = t || g, m = (v) => {
     a ? a(v) : f(v);
-  }, n = {
+  }, l = {
     activeTab: b,
     setActiveTab: m
   }, d = r.find((v) => v.id === b), p = x(
@@ -2127,17 +2182,17 @@ const or = ({
       "text-xs px-2 py-1": i === "sm",
       "text-sm px-3 py-2": i === "md",
       "text-base px-4 py-3": i === "lg"
-    }, q = {
+    }, H = {
       // Default variant
       "border-b-2 -mb-px": o === "default",
       // Pills variant
       "rounded-md": o === "pills",
       // Underline variant
       "border-b-2 pb-2": o === "underline"
-    }, K = {
+    }, G = {
       "opacity-50 cursor-not-allowed": v.disabled,
       "cursor-pointer": !v.disabled
-    }, H = S ? {
+    }, q = S ? {
       "border-primary text-primary": o === "default" || o === "underline",
       "bg-white dark:bg-neutral-700 text-neutral-900 dark:text-neutral-100 shadow-sm": o === "pills"
     } : {}, F = !S && !v.disabled ? {
@@ -2145,9 +2200,9 @@ const or = ({
       "text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100": o === "pills",
       "border-transparent text-neutral-600 hover:text-neutral-900 hover:border-neutral-300 dark:text-neutral-400 dark:hover:text-neutral-100": o === "underline"
     } : {};
-    return x(B, k, q, K, H, F);
+    return x(B, k, H, G, q, F);
   };
-  return /* @__PURE__ */ e(xr.Provider, { value: n, children: /* @__PURE__ */ c("div", { children: [
+  return /* @__PURE__ */ e(vr.Provider, { value: l, children: /* @__PURE__ */ c("div", { children: [
     /* @__PURE__ */ e("div", { className: p, role: "tablist", children: r.map((v) => /* @__PURE__ */ e(
       "button",
       {
@@ -2176,16 +2231,16 @@ const or = ({
       }
     )
   ] }) });
-}, br = {
+}, Nr = {
   sm: "max-w-md",
   md: "max-w-lg",
   lg: "max-w-2xl",
   xl: "max-w-4xl",
   full: "max-w-full mx-4"
 };
-function yr({
+function wr({
   open: r,
-  onClose: l,
+  onClose: n,
   title: t,
   size: a = "md",
   closeOnBackdropClick: o = !0,
@@ -2196,18 +2251,18 @@ function yr({
   footer: b,
   showCloseButton: m = !0
 }) {
-  const n = Q(null), d = Q(null);
-  G(() => {
+  const l = X(null), d = X(null);
+  K(() => {
     if (!r || !i) return;
     const N = (v) => {
-      v.key === "Escape" && l();
+      v.key === "Escape" && n();
     };
     return document.addEventListener("keydown", N), () => document.removeEventListener("keydown", N);
-  }, [r, i, l]), G(() => (r ? (d.current = document.activeElement, n.current && n.current.focus(), document.body.style.overflow = "hidden") : (d.current && d.current.focus(), document.body.style.overflow = ""), () => {
+  }, [r, i, n]), K(() => (r ? (d.current = document.activeElement, l.current && l.current.focus(), document.body.style.overflow = "hidden") : (d.current && d.current.focus(), document.body.style.overflow = ""), () => {
     document.body.style.overflow = "";
   }), [r]);
   const p = (N) => {
-    o && N.target === N.currentTarget && l();
+    o && N.target === N.currentTarget && n();
   };
   return r ? /* @__PURE__ */ e(
     "div",
@@ -2222,12 +2277,12 @@ function yr({
       children: /* @__PURE__ */ c(
         "div",
         {
-          ref: n,
+          ref: l,
           className: x(
             "relative w-full bg-white dark:bg-secondary-800 rounded-modal shadow-modal rounded-md",
             // 'animate-scale-in',
             "focus:outline-none",
-            br[a],
+            Nr[a],
             h
           ),
           role: "dialog",
@@ -2247,7 +2302,7 @@ function yr({
               m && /* @__PURE__ */ e(
                 "button",
                 {
-                  onClick: l,
+                  onClick: n,
                   className: "p-1 text-secondary-400 hover:text-secondary-600 dark:hover:text-secondary-300 transition-colors",
                   "aria-label": "Close modal",
                   children: /* @__PURE__ */ e("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
@@ -2264,7 +2319,7 @@ function yr({
 }
 const Z = ({
   variant: r = "body",
-  size: l = "md",
+  size: n = "md",
   weight: t = "normal",
   color: a = "current",
   align: o = "left",
@@ -2274,10 +2329,10 @@ const Z = ({
   lineHeight: f = "normal",
   as: b,
   className: m,
-  children: n,
+  children: l,
   ...d
 }) => {
-  const p = b || vr(r), N = x(
+  const p = b || Cr(r), N = x(
     // Base styles
     "font-primary",
     // Variant styles
@@ -2289,11 +2344,11 @@ const Z = ({
     },
     // Size variants (override variant sizes)
     r !== "code" && {
-      "text-xs": l === "xs",
-      "text-sm": l === "sm",
-      "text-base": l === "md",
-      "text-lg": l === "lg",
-      "text-xl": l === "xl"
+      "text-xs": n === "xs",
+      "text-sm": n === "sm",
+      "text-base": n === "md",
+      "text-lg": n === "lg",
+      "text-xl": n === "xl"
     },
     // Weight variants
     r !== "label" && {
@@ -2337,9 +2392,9 @@ const Z = ({
     },
     m
   );
-  return /* @__PURE__ */ e(p, { className: N, ...d, children: n });
+  return /* @__PURE__ */ e(p, { className: N, ...d, children: l });
 };
-function vr(r) {
+function Cr(r) {
   return {
     body: "p",
     caption: "span",
@@ -2347,9 +2402,9 @@ function vr(r) {
     code: "code"
   }[r] || "p";
 }
-const kr = ({
+const Sr = ({
   value: r,
-  onChange: l,
+  onChange: n,
   label: t,
   placeholder: a = "Select or upload a file",
   error: o,
@@ -2359,44 +2414,44 @@ const kr = ({
   onListMounts: f,
   onUploadFile: b,
   onDownloadFile: m,
-  onRegisterFile: n
+  onRegisterFile: l
 }) => {
-  const [d, p] = V(!1), [N, v] = V([]), [S, B] = V(null), [k, q] = V("/"), [K, H] = V([]), [F, M] = V(!1), [J, z] = V(""), [y, T] = V(
+  const [d, p] = V(!1), [N, v] = V([]), [S, B] = V(null), [k, H] = V("/"), [G, q] = V([]), [F, E] = V(!1), [J, z] = V(""), [y, T] = V(
     typeof r == "object" ? r : null
-  ), [u, $] = V(!1), [L, D] = V(""), P = Q(null);
-  G(() => {
-    d && E();
-  }, [d]), G(() => {
+  ), [u, $] = V(!1), [L, D] = V(""), P = X(null);
+  K(() => {
+    d && M();
+  }, [d]), K(() => {
     d && S && re();
   }, [d, S, k, J]);
-  const E = async () => {
-    M(!0);
+  const M = async () => {
+    E(!0);
     try {
       const s = await f?.();
       s?.data && v(s.data);
     } catch (s) {
       console.error("Failed to load mounts", s);
     } finally {
-      M(!1);
+      E(!1);
     }
   }, re = async () => {
     if (S) {
-      M(!0);
+      E(!0);
       try {
         const s = await g?.({ mountId: S.id, name: J, path: k });
-        s?.data && H(s.data);
+        s?.data && q(s.data);
       } catch (s) {
         console.error("Failed to load files", s);
       } finally {
-        M(!1);
+        E(!1);
       }
     }
   }, ne = async (s) => {
     const w = s.target.files?.[0];
     if (w) {
-      M(!0);
+      E(!0);
       try {
-        const _ = await w.arrayBuffer(), R = new Uint8Array(_), j = {
+        const O = await w.arrayBuffer(), R = new Uint8Array(O), j = {
           id: `local-${Date.now()}`,
           name: w.name,
           type: "file",
@@ -2407,20 +2462,20 @@ const kr = ({
           providerKey: w.name,
           ownerId: "me"
         };
-        T(j), l(j, R), p(!1);
-      } catch (_) {
-        console.error("Local file selection failed", _);
+        T(j), n(j, R), p(!1);
+      } catch (O) {
+        console.error("Local file selection failed", O);
       } finally {
-        M(!1);
+        E(!1);
       }
     }
   }, W = async (s) => {
     const w = s.target.files?.[0];
     if (!(!w || !S)) {
-      M(!0);
+      E(!0);
       try {
-        const _ = await w.arrayBuffer(), R = await b?.({
-          file: new Uint8Array(_),
+        const O = await w.arrayBuffer(), R = await b?.({
+          file: new Uint8Array(O),
           filename: w.name,
           mimeType: w.type || "application/octet-stream",
           mountId: S.id,
@@ -2428,20 +2483,20 @@ const kr = ({
         });
         if (R?.data) {
           const j = R.data;
-          T(j), l(j, new Uint8Array(_)), p(!1);
+          T(j), n(j, new Uint8Array(O)), p(!1);
         }
-      } catch (_) {
-        console.error("Upload failed", _);
+      } catch (O) {
+        console.error("Upload failed", O);
       } finally {
-        M(!1);
+        E(!1);
       }
     }
   }, C = async () => {
     if (!(!L || !S)) {
-      M(!0);
+      E(!0);
       try {
         const s = `${k}${L}/`;
-        n && (await n({
+        l && (await l({
           name: L,
           type: "folder",
           path: k,
@@ -2454,39 +2509,39 @@ const kr = ({
       } catch (s) {
         console.error("Failed to create folder", s);
       } finally {
-        M(!1);
+        E(!1);
       }
     }
   }, I = async (s) => {
-    M(!0);
+    E(!0);
     try {
       const w = await m?.(s.id);
-      T(s), l(s, w), p(!1);
+      T(s), n(s, w), p(!1);
     } catch (w) {
       console.error("Failed to download file", w);
     } finally {
-      M(!1);
+      E(!1);
     }
-  }, O = (s) => {
-    s.stopPropagation(), T(null), l(null);
+  }, _ = (s) => {
+    s.stopPropagation(), T(null), n(null);
   }, A = ie(() => {
     const s = /* @__PURE__ */ new Set(), w = [];
-    return K.forEach((_) => {
-      if (_.type === "folder") {
-        _.path === k && s.add(_.name);
+    return G.forEach((O) => {
+      if (O.type === "folder") {
+        O.path === k && s.add(O.name);
         return;
       }
-      const R = _.providerKey || _.name, Y = (k ? R.substring(k.length) : R).split("/").filter((fe) => fe !== "");
-      Y.length > 1 ? s.add(Y[0]) : Y.length === 1 && w.push(_);
+      const R = O.providerKey || O.name, Y = (k ? R.substring(k.length) : R).split("/").filter((fe) => fe !== "");
+      Y.length > 1 ? s.add(Y[0]) : Y.length === 1 && w.push(O);
     }), {
       folders: Array.from(s).sort(),
-      files: w.sort((_, R) => _.name.localeCompare(R.name))
+      files: w.sort((O, R) => O.name.localeCompare(R.name))
     };
-  }, [K, k]), X = (s) => {
-    q((w) => `${w}${s}/`);
+  }, [G, k]), Q = (s) => {
+    H((w) => `${w}${s}/`);
   }, te = () => {
     const s = k.split("/").filter((w) => w !== "");
-    s.pop(), s.length === 0 ? q("/") : q(`${s.join("/")}/`);
+    s.pop(), s.length === 0 ? H("/") : H(`${s.join("/")}/`);
   }, U = ie(() => {
     const s = A.folders.map((w) => ({
       id: `folder-${w}`,
@@ -2536,8 +2591,8 @@ const kr = ({
         {
           size: "sm",
           variant: "outline",
-          onClick: (_) => {
-            _.stopPropagation(), w.type === "folder" ? X(w.name) : I(w);
+          onClick: (O) => {
+            O.stopPropagation(), w.type === "folder" ? Q(w.name) : I(w);
           },
           loading: F && w.type === "file" && y?.id === w.id,
           children: w.type === "folder" ? "Open" : "Select"
@@ -2580,9 +2635,9 @@ const kr = ({
           y && !i && /* @__PURE__ */ e(
             "button",
             {
-              onClick: O,
+              onClick: _,
               className: "p-1 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded",
-              children: /* @__PURE__ */ e(oe, { icon: Be, size: "xs" })
+              children: /* @__PURE__ */ e(oe, { icon: Oe, size: "xs" })
             }
           )
         ]
@@ -2590,23 +2645,23 @@ const kr = ({
     ),
     o && /* @__PURE__ */ e(Z, { variant: "body", size: "xs", className: "text-error", children: o }),
     /* @__PURE__ */ e(
-      yr,
+      wr,
       {
         open: d,
         onClose: () => {
-          p(!1), B(null), q("/"), $(!1);
+          p(!1), B(null), H("/"), $(!1);
         },
         title: S ? `Explorer: ${S.name}` : "Select Storage Mount",
         size: "lg",
         children: /* @__PURE__ */ e(
-          gr,
+          kr,
           {
             variant: "pills",
             items: [
               {
                 id: "remote",
                 label: "Platform Storage",
-                content: /* @__PURE__ */ e("div", { className: "space-y-4", children: S ? /* @__PURE__ */ c(Ee, { children: [
+                content: /* @__PURE__ */ e("div", { className: "space-y-4", children: S ? /* @__PURE__ */ c(Me, { children: [
                   /* @__PURE__ */ c("div", { className: "flex flex-wrap items-center gap-2", children: [
                     /* @__PURE__ */ e(
                       ee,
@@ -2616,7 +2671,7 @@ const kr = ({
                         onClick: () => {
                           k && k !== "/" ? te() : B(null);
                         },
-                        leftIcon: /* @__PURE__ */ e(oe, { icon: Me, size: "xs" }),
+                        leftIcon: /* @__PURE__ */ e(oe, { icon: Ee, size: "xs" }),
                         children: k ? "Back" : "Back to Mounts"
                       }
                     ),
@@ -2627,7 +2682,7 @@ const kr = ({
                         placeholder: "Search...",
                         value: J,
                         onChange: (s) => z(s.target.value),
-                        startIcon: /* @__PURE__ */ e(Pe, { size: 14 }),
+                        startIcon: /* @__PURE__ */ e(_e, { size: 14 }),
                         fullWidth: !0,
                         size: "sm"
                       }
@@ -2639,7 +2694,7 @@ const kr = ({
                           variant: "outline",
                           size: "sm",
                           onClick: () => $(!0),
-                          leftIcon: /* @__PURE__ */ e(oe, { icon: _e, size: "xs" }),
+                          leftIcon: /* @__PURE__ */ e(oe, { icon: Ve, size: "xs" }),
                           children: "New Folder"
                         }
                       ),
@@ -2649,7 +2704,7 @@ const kr = ({
                           variant: "primary",
                           size: "sm",
                           onClick: () => P.current?.click(),
-                          leftIcon: /* @__PURE__ */ e(oe, { icon: Oe, size: "xs" }),
+                          leftIcon: /* @__PURE__ */ e(oe, { icon: Fe, size: "xs" }),
                           loading: F,
                           children: "Upload"
                         }
@@ -2688,7 +2743,7 @@ const kr = ({
                       columns: le,
                       loading: F,
                       emptyContent: "This folder is empty",
-                      onRowClick: (s) => s.type === "folder" ? X(s.name) : I(s)
+                      onRowClick: (s) => s.type === "folder" ? Q(s.name) : I(s)
                     }
                   ) })
                 ] }) : /* @__PURE__ */ e("div", { className: "max-h-[400px] overflow-auto rounded-lg border border-neutral-200 dark:border-neutral-700", children: /* @__PURE__ */ e(
@@ -2744,14 +2799,14 @@ const kr = ({
     )
   ] });
 };
-function Le(r, l) {
-  return l.split(".").reduce(
+function Le(r, n) {
+  return n.split(".").reduce(
     (t, a) => t && typeof t == "object" && a in t ? t[a] : void 0,
     r
   );
 }
-function Nr(r, l, t) {
-  const a = l.split("."), o = Array.isArray(r) ? [...r] : { ...r };
+function Lr(r, n, t) {
+  const a = n.split("."), o = Array.isArray(r) ? [...r] : { ...r };
   let i = o;
   for (let h = 0; h < a.length - 1; h++) {
     const g = a[h], f = i[g];
@@ -2759,8 +2814,8 @@ function Nr(r, l, t) {
   }
   return i[a[a.length - 1]] = t, o;
 }
-function wr(r, l) {
-  const t = l.split("."), a = Array.isArray(r) ? [...r] : { ...r };
+function Mr(r, n) {
+  const t = n.split("."), a = Array.isArray(r) ? [...r] : { ...r };
   let o = a;
   for (let i = 0; i < t.length - 1; i++) {
     const h = t[i];
@@ -2769,9 +2824,9 @@ function wr(r, l) {
   }
   return delete o[t[t.length - 1]], a;
 }
-const Gr = ({
+const rt = ({
   groups: r,
-  data: l,
+  data: n,
   onSubmit: t,
   onCancel: a,
   onChange: o,
@@ -2781,16 +2836,16 @@ const Gr = ({
   cancelButton: f = { label: "Cancel", variant: "outline" },
   showButtons: b = !0,
   layout: m = "vertical",
-  size: n = "md",
+  size: l = "md",
   loading: d = !1,
   className: p,
   ref: N,
   sdk: v
 }) => {
-  const [S, B] = V(l || {}), [k, q] = V({}), [K, H] = V({});
-  G(() => {
-    l && B({ ...l });
-  }, [l]);
+  const [S, B] = V(n || {}), [k, H] = V({}), [G, q] = V({});
+  K(() => {
+    n && B({ ...n });
+  }, [n]);
   const F = ae(
     (u, $, L) => {
       const D = r.flatMap((P) => P.items).find((P) => P.name === u);
@@ -2804,37 +2859,37 @@ const Gr = ({
           return `${D.label} must be an array.`;
         if (Array.isArray($) && D.arrayFields) {
           const P = [];
-          let E = !1;
+          let M = !1;
           if ($.forEach((re, ne) => {
             const W = {};
             for (const C of D.arrayFields) {
               const I = re?.[C.name];
               if (C.required && (I == null || I === ""))
-                W[C.name] = `${C.label} is required`, E = !0;
+                W[C.name] = `${C.label} is required`, M = !0;
               else if (C.validator) {
-                const O = C.validator(I, re);
-                O && (W[C.name] = O, E = !0);
+                const _ = C.validator(I, re);
+                _ && (W[C.name] = _, M = !0);
               }
             }
             P[ne] = W;
-          }), E)
+          }), M)
             return JSON.stringify(P);
         }
       }
       return D.validator ? D.validator($, L) : null;
     },
     [r]
-  ), M = ae(
+  ), E = ae(
     (u, $) => {
-      let L = Nr(
+      let L = Lr(
         S,
         u,
         $
       );
-      r.flatMap((E) => E.items).find((E) => E.name === u)?.removeIfEmpty && ($ == null || $ === "") && (L = wr(L, u)), B(L), H((E) => ({ ...E, [u]: !0 }));
+      r.flatMap((M) => M.items).find((M) => M.name === u)?.removeIfEmpty && ($ == null || $ === "") && (L = Mr(L, u)), B(L), q((M) => ({ ...M, [u]: !0 }));
       const P = F(u, $, L);
-      q((E) => ({
-        ...E,
+      H((M) => ({
+        ...M,
         [u]: P || ""
       })), o?.(L, u);
     },
@@ -2846,18 +2901,18 @@ const Gr = ({
       for (const P of L) {
         if (P.hidden || P.conditional && !P.conditional(S))
           continue;
-        const E = F(
+        const M = F(
           P.name,
           Le(S, P.name),
           S
         );
-        E && ($[P.name] = E);
+        M && ($[P.name] = M);
       }
       if (h) {
         const P = h(S);
         P && Object.assign($, P);
       }
-      if (q($), console.log("newErrors", $), Object.keys($).some((P) => $[P]))
+      if (H($), console.log("newErrors", $), Object.keys($).some((P) => $[P]))
         return;
       const D = i ? i(S) : S;
       await t?.(S, D);
@@ -2865,7 +2920,7 @@ const Gr = ({
     [S, r, F, h, i, t, d]
   ), z = ae(
     (u) => {
-      const $ = Le(S, u.name), L = K[u.name] ? k[u.name] : void 0, D = u.disabled || d, P = {
+      const $ = Le(S, u.name), L = G[u.name] ? k[u.name] : void 0, D = u.disabled || d, P = {
         value: $ || "",
         disabled: D,
         required: u.required,
@@ -2883,11 +2938,11 @@ const Gr = ({
             ue,
             {
               ...P,
-              onChange: (E) => M(u.name, E.target.value),
+              onChange: (M) => E(u.name, M.target.value),
               type: u.textType || u.type,
               autoComplete: u.autocomplete,
               error: L,
-              size: n
+              size: l
             }
           );
         case "textarea":
@@ -2895,10 +2950,10 @@ const Gr = ({
             ke,
             {
               ...P,
-              onChange: (E) => M(u.name, E.target.value),
+              onChange: (M) => E(u.name, M.target.value),
               rows: 4,
               error: L,
-              size: n
+              size: l
             }
           );
         case "select":
@@ -2906,16 +2961,16 @@ const Gr = ({
             ve,
             {
               ...P,
-              onChange: (E) => M(u.name, E),
-              options: (u.options || []).map((E) => ({
-                ...E,
-                value: String(E.value)
+              onChange: (M) => E(u.name, M),
+              options: (u.options || []).map((M) => ({
+                ...M,
+                value: String(M.value)
               })),
               searchable: u.searchable,
               multiple: u.multiple,
               allowCreate: u.allowCreate,
               error: L,
-              size: n
+              size: l
             }
           );
         case "checkbox":
@@ -2924,78 +2979,78 @@ const Gr = ({
             {
               ...P,
               checked: !!$,
-              onChange: (E) => M(u.name, E.target.checked),
-              size: n
+              onChange: (M) => E(u.name, M.target.checked),
+              size: l
             }
           );
         case "radio":
-          return /* @__PURE__ */ e("div", { className: "space-y-1", children: u.options?.map((E) => /* @__PURE__ */ c("label", { className: "flex items-center gap-2", children: [
+          return /* @__PURE__ */ e("div", { className: "space-y-1", children: u.options?.map((M) => /* @__PURE__ */ c("label", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ e(
               "input",
               {
                 type: "radio",
                 name: u.name,
-                value: E.value,
-                checked: $ === E.value,
-                onChange: () => M(u.name, E.value),
-                disabled: D || E.disabled,
+                value: M.value,
+                checked: $ === M.value,
+                onChange: () => E(u.name, M.value),
+                disabled: D || M.disabled,
                 className: "rounded-full border-neutral-100 dark:border-neutral-600"
               }
             ),
-            /* @__PURE__ */ e(Z, { variant: "label", size: "sm", children: E.label })
-          ] }, E.value)) });
+            /* @__PURE__ */ e(Z, { variant: "label", size: "sm", children: M.label })
+          ] }, M.value)) });
         case "date":
           return /* @__PURE__ */ e(
             ye,
             {
               ...P,
               value: $ ? new Date($) : null,
-              onChange: (E) => M(u.name, E),
-              size: n
+              onChange: (M) => E(u.name, M),
+              size: l
             }
           );
         case "file":
           return /* @__PURE__ */ e(
-            kr,
+            Sr,
             {
               ...P,
               value: $,
-              onChange: (E) => M(u.name, E),
+              onChange: (M) => E(u.name, M),
               error: L,
-              onListFiles: (E) => v?.http.invoke({
+              onListFiles: (M) => v?.http.invoke({
                 method: "POST",
                 action: "storage.file.list",
-                body: E
+                body: M
               }),
               onListMounts: () => v?.http.invoke({
                 method: "GET",
                 action: "storage.mount"
               }),
-              onUploadFile: (E) => v?.http.invoke({
+              onUploadFile: (M) => v?.http.invoke({
                 method: "POST",
                 action: "storage.file.upload",
-                body: E
+                body: M
               }),
-              onDownloadFile: (E) => v?.http.invoke({
+              onDownloadFile: (M) => v?.http.invoke({
                 method: "GET",
-                action: `storage.file.${E}.download`
+                action: `storage.file.${M}.download`
               }),
-              onRegisterFile: (E) => v?.http.invoke({
+              onRegisterFile: (M) => v?.http.invoke({
                 method: "POST",
                 action: "storage.file.folder",
-                body: E
+                body: M
               })
             }
           );
         case "custom":
           return u.customComponent?.({
             value: $,
-            onChange: (E) => M(u.name, E),
+            onChange: (M) => E(u.name, M),
             error: L,
             disabled: D
           });
         case "array": {
-          const E = $ || [];
+          const M = $ || [];
           let re = [];
           if (typeof L == "string" && L.startsWith("["))
             try {
@@ -3003,21 +3058,21 @@ const Gr = ({
             } catch {
             }
           const ne = () => {
-            M(u.name, [...E, {}]);
+            E(u.name, [...M, {}]);
           }, W = (I) => {
-            M(
+            E(
               u.name,
-              E.filter((O, A) => A !== I)
+              M.filter((_, A) => A !== I)
             );
-          }, C = (I, O, A) => {
-            const X = [...E];
-            X[I] = {
-              ...X[I],
-              [O]: A
-            }, M(u.name, X);
+          }, C = (I, _, A) => {
+            const Q = [...M];
+            Q[I] = {
+              ...Q[I],
+              [_]: A
+            }, E(u.name, Q);
           };
           return /* @__PURE__ */ c("div", { className: "space-y-2", children: [
-            E.map((I, O) => /* @__PURE__ */ c(
+            M.map((I, _) => /* @__PURE__ */ c(
               "div",
               {
                 className: "p-4 border rounded-md dark:border-neutral-700 space-y-2 relative",
@@ -3028,13 +3083,13 @@ const Gr = ({
                       type: "button",
                       variant: "ghost",
                       size: "sm",
-                      onClick: () => W(O),
+                      onClick: () => W(_),
                       disabled: D,
                       children: "Remove"
                     }
                   ) }),
                   /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: u.arrayFields?.map((A) => {
-                    const X = re?.[O]?.[A.name];
+                    const Q = re?.[_]?.[A.name];
                     return /* @__PURE__ */ c(
                       "div",
                       {
@@ -3072,14 +3127,14 @@ const Gr = ({
                                   {
                                     ...te,
                                     onChange: (U) => C(
-                                      O,
+                                      _,
                                       A.name,
                                       U.target.value
                                     ),
                                     type: A.textType || A.type,
                                     autoComplete: A.autocomplete,
-                                    error: X,
-                                    size: n
+                                    error: Q,
+                                    size: l
                                   }
                                 );
                               case "textarea":
@@ -3088,13 +3143,13 @@ const Gr = ({
                                   {
                                     ...te,
                                     onChange: (U) => C(
-                                      O,
+                                      _,
                                       A.name,
                                       U.target.value
                                     ),
                                     rows: 4,
-                                    error: X,
-                                    size: n
+                                    error: Q,
+                                    size: l
                                   }
                                 );
                               case "select":
@@ -3103,7 +3158,7 @@ const Gr = ({
                                   {
                                     ...te,
                                     onChange: (U) => C(
-                                      O,
+                                      _,
                                       A.name,
                                       U
                                     ),
@@ -3116,8 +3171,8 @@ const Gr = ({
                                     searchable: A.searchable,
                                     multiple: A.multiple,
                                     allowCreate: A.allowCreate,
-                                    error: X,
-                                    size: n
+                                    error: Q,
+                                    size: l
                                   }
                                 );
                               case "checkbox":
@@ -3127,11 +3182,11 @@ const Gr = ({
                                     ...te,
                                     checked: !!I?.[A.name],
                                     onChange: (U) => C(
-                                      O,
+                                      _,
                                       A.name,
                                       U.target.checked
                                     ),
-                                    size: n
+                                    size: l
                                   }
                                 );
                               case "radio":
@@ -3144,11 +3199,11 @@ const Gr = ({
                                         "input",
                                         {
                                           type: "radio",
-                                          name: `${u.name}.${O}.${A.name}`,
+                                          name: `${u.name}.${_}.${A.name}`,
                                           value: U.value,
                                           checked: I?.[A.name] === U.value,
                                           onChange: () => C(
-                                            O,
+                                            _,
                                             A.name,
                                             U.value
                                           ),
@@ -3169,11 +3224,11 @@ const Gr = ({
                                     ...te,
                                     value: U ? new Date(U) : null,
                                     onChange: (le) => C(
-                                      O,
+                                      _,
                                       A.name,
                                       le
                                     ),
-                                    size: n
+                                    size: l
                                   }
                                 );
                               }
@@ -3181,11 +3236,11 @@ const Gr = ({
                                 return A.customComponent?.({
                                   value: I?.[A.name],
                                   onChange: (U) => C(
-                                    O,
+                                    _,
                                     A.name,
                                     U
                                   ),
-                                  error: X,
+                                  error: Q,
                                   disabled: D
                                 });
                               // Add other field types here as needed
@@ -3197,13 +3252,13 @@ const Gr = ({
                                 ] });
                             }
                           })(),
-                          X && /* @__PURE__ */ e(
+                          Q && /* @__PURE__ */ e(
                             Z,
                             {
                               variant: "body",
                               size: "sm",
                               className: "text-red-600 dark:text-red-400",
-                              children: X
+                              children: Q
                             }
                           )
                         ]
@@ -3213,7 +3268,7 @@ const Gr = ({
                   }) })
                 ]
               },
-              O
+              _
             )),
             /* @__PURE__ */ c(
               ee,
@@ -3235,7 +3290,7 @@ const Gr = ({
           return null;
       }
     },
-    [S, K, k, d, n, M]
+    [S, G, k, d, l, E]
   ), y = ae(
     (u) => {
       if (u.conditional && !u.conditional(S))
@@ -3282,7 +3337,7 @@ const Gr = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ e("div", { className: "md:col-span-2", children: /* @__PURE__ */ e("div", { className: L, children: $.map((D) => (K[D.name] && k[D.name], /* @__PURE__ */ c(
+            /* @__PURE__ */ e("div", { className: "md:col-span-2", children: /* @__PURE__ */ e("div", { className: L, children: $.map((D) => (G[D.name] && k[D.name], /* @__PURE__ */ c(
               "div",
               {
                 className: x(
@@ -3313,14 +3368,14 @@ const Gr = ({
         u.id
       );
     },
-    [S, K, k, z]
+    [S, G, k, z]
   ), T = x(
     "space-y-6",
     {
-      "max-w-md": n === "sm",
-      "max-w-2xl": n === "md",
-      "max-w-4xl": n === "lg",
-      "max-w-full": n === "full"
+      "max-w-md": l === "sm",
+      "max-w-2xl": l === "md",
+      "max-w-4xl": l === "lg",
+      "max-w-full": l === "full"
     },
     p
   );
@@ -3332,7 +3387,7 @@ const Gr = ({
         {
           type: "button",
           variant: f.variant,
-          size: f.size || n,
+          size: f.size || l,
           disabled: f.disabled || d,
           onClick: a,
           className: f.className,
@@ -3344,7 +3399,7 @@ const Gr = ({
         {
           type: "submit",
           variant: g.variant,
-          size: g.size || n,
+          size: g.size || l,
           disabled: g.disabled || d,
           loading: d,
           className: g.className,
@@ -3353,7 +3408,7 @@ const Gr = ({
       )
     ] })
   ] });
-}, Cr = {
+}, Er = {
   default: "bg-secondary-100 text-secondary-800 dark:bg-secondary-800 dark:text-secondary-200",
   primary: "bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200",
   secondary: "bg-secondary-100 text-secondary-800 dark:bg-secondary-800 dark:text-secondary-200",
@@ -3361,11 +3416,11 @@ const Gr = ({
   warning: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200",
   error: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200",
   info: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
-}, Sr = {
+}, $r = {
   sm: "px-2 py-0.5 text-xs",
   md: "px-2.5 py-1 text-sm",
   lg: "px-3 py-1.5 text-base"
-}, Lr = {
+}, zr = {
   default: "bg-secondary-400",
   primary: "bg-primary-500",
   secondary: "bg-secondary-400",
@@ -3374,9 +3429,9 @@ const Gr = ({
   error: "bg-red-500",
   info: "bg-blue-500"
 };
-function Jr({
+function tt({
   variant: r = "default",
-  size: l = "md",
+  size: n = "md",
   dot: t = !1,
   icon: a,
   dismissible: o = !1,
@@ -3392,9 +3447,9 @@ function Jr({
         // Base styles
         "inline-flex items-center font-medium rounded-full",
         // Variant styles
-        Cr[r],
+        Er[r],
         // Size styles
-        Sr[l],
+        $r[n],
         h
       ),
       ...f,
@@ -3404,7 +3459,7 @@ function Jr({
           {
             className: x(
               "w-2 h-2 rounded-full mr-1.5",
-              Lr[r]
+              zr[r]
             )
           }
         ),
@@ -3430,27 +3485,27 @@ function Jr({
     }
   );
 }
-const Er = {
+const Dr = {
   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"
-}, Mr = {
+}, Tr = {
   primary: "text-primary",
   secondary: "text-secondary-600",
   white: "text-white",
   current: "text-current"
-}, $r = {
+}, Ar = {
   xs: "text-xs",
   sm: "text-sm",
   md: "text-sm",
   lg: "text-base",
   xl: "text-lg"
 };
-function Yr({
+function at({
   size: r = "md",
-  variant: l = "primary",
+  variant: n = "primary",
   label: t = "Loading...",
   showLabel: a = !1,
   className: o,
@@ -3471,8 +3526,8 @@ function Yr({
           {
             className: x(
               "animate-spin",
-              Er[r],
-              Mr[l]
+              Dr[r],
+              Tr[n]
             ),
             fill: "none",
             viewBox: "0 0 24 24",
@@ -3506,7 +3561,7 @@ function Yr({
           {
             className: x(
               "text-secondary-600 dark:text-secondary-400",
-              $r[r]
+              Ar[r]
             ),
             children: t
           }
@@ -3516,9 +3571,9 @@ function Yr({
     }
   );
 }
-const Zr = ({
+const nt = ({
   src: r,
-  alt: l,
+  alt: n,
   size: t = "md",
   aspectRatio: a = "auto",
   radius: o = "md",
@@ -3528,15 +3583,15 @@ const Zr = ({
   loadingContent: f,
   errorContent: b,
   className: m,
-  onLoad: n,
+  onLoad: l,
   onError: d,
   ...p
 }) => {
-  const [N, v] = V(!0), [S, B] = V(!1), [k, q] = V(r), K = (T) => {
-    v(!1), B(!1), n?.(T);
-  }, H = (T) => {
+  const [N, v] = V(!0), [S, B] = V(!1), [k, H] = V(r), G = (T) => {
+    v(!1), B(!1), l?.(T);
+  }, q = (T) => {
     if (v(!1), B(!0), g && k !== g) {
-      q(g), B(!1), v(!0);
+      H(g), B(!1), v(!0);
       return;
     }
     d?.(T);
@@ -3568,7 +3623,7 @@ const Zr = ({
       "rounded-full": o === "full"
     },
     m
-  ), M = x(
+  ), E = x(
     "w-full h-full object-cover transition-opacity duration-200",
     {
       "opacity-0": N || S,
@@ -3604,18 +3659,18 @@ const Zr = ({
       {
         ...p,
         src: k,
-        alt: l,
-        className: M,
-        onLoad: K,
-        onError: H
+        alt: n,
+        className: E,
+        onLoad: G,
+        onError: q
       }
     ),
     N && i && /* @__PURE__ */ e("div", { className: J, children: f || z }),
     S && h && /* @__PURE__ */ e("div", { className: J, children: b || y })
   ] });
-}, Xr = ({
+}, lt = ({
   title: r,
-  subtitle: l,
+  subtitle: n,
   actions: t = [],
   children: a,
   className: o,
@@ -3625,18 +3680,18 @@ const Zr = ({
   editable: f = !1,
   onTitleChange: b
 }) => {
-  const [m, n] = V(!1), [d, p] = V(r), N = Q(null);
-  G(() => {
+  const [m, l] = V(!1), [d, p] = V(r), N = X(null);
+  K(() => {
     p(r);
-  }, [r]), G(() => {
+  }, [r]), K(() => {
     m && N.current && (N.current.focus(), N.current.select());
   }, [m]);
   const v = () => {
-    f && n(!0);
+    f && l(!0);
   }, S = () => {
-    n(!1), d.trim() !== "" && d !== r && b ? b(d.trim()) : p(r);
+    l(!1), d.trim() !== "" && d !== r && b ? b(d.trim()) : p(r);
   }, B = (k) => {
-    k.key === "Enter" ? N.current?.blur() : k.key === "Escape" && (p(r), n(!1));
+    k.key === "Enter" ? N.current?.blur() : k.key === "Escape" && (p(r), l(!1));
   };
   return /* @__PURE__ */ c(
     "div",
@@ -3657,7 +3712,7 @@ const Zr = ({
                   "flex items-center text-sm dark:hover:text-neutral-300 cursor-pointer transition",
                   h
                 ),
-                children: /* @__PURE__ */ e(Me, { size: 16, color: "currentColor" })
+                children: /* @__PURE__ */ e(Ee, { size: 16, color: "currentColor" })
               }
             ),
             m ? /* @__PURE__ */ e(
@@ -3686,7 +3741,7 @@ const Zr = ({
           ] }) }),
           t.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-wrap sm:flex-nowrap gap-2 sm:gap-3", children: t.map(
             (k) => k.splitOptions && k.splitOptions.length > 0 ? /* @__PURE__ */ e(
-              Ue,
+              Ye,
               {
                 label: k.label,
                 onClick: k.onClick,
@@ -3700,8 +3755,8 @@ const Zr = ({
               "button",
               {
                 type: "button",
-                onClick: (q) => {
-                  q.stopPropagation(), q.target.blur(), k.onClick();
+                onClick: (H) => {
+                  H.stopPropagation(), H.target.blur(), k.onClick();
                 },
                 disabled: k.disabled,
                 className: x("btn", {
@@ -3724,15 +3779,15 @@ const Zr = ({
     }
   );
 };
-function zr(r, l) {
-  return l.split(".").reduce(
+function Ir(r, n) {
+  return n.split(".").reduce(
     (t, a) => t && typeof t == "object" && a in t ? t[a] : void 0,
     r
   );
 }
-const Qr = ({
+const st = ({
   groups: r,
-  data: l,
+  data: n,
   size: t = "md",
   className: a
 }) => {
@@ -3747,15 +3802,15 @@ const Qr = ({
     } catch {
       return String(m);
     }
-  }, i = (m) => m ? "Ja" : "Nee", h = (m, n) => {
-    if (!n) return String(m || "-");
-    const d = n.find((p) => p.value === m);
+  }, i = (m) => m ? "Ja" : "Nee", h = (m, l) => {
+    if (!l) return String(m || "-");
+    const d = l.find((p) => p.value === m);
     return d ? d.label : String(m || "-");
   }, g = ae(
     (m) => {
-      const n = zr(l, m.name);
+      const l = Ir(n, m.name);
       if (m.type === "array") {
-        const p = n;
+        const p = l;
         return !p || p.length === 0 ? /* @__PURE__ */ e(
           Z,
           {
@@ -3843,9 +3898,9 @@ const Qr = ({
         )) });
       }
       if (m.type === "custom" && m.customComponent)
-        return m.customComponent({ value: n });
+        return m.customComponent({ value: l });
       if (m.format) {
-        const p = m.format(n, l);
+        const p = m.format(l, n);
         return /* @__PURE__ */ e(
           Z,
           {
@@ -3864,23 +3919,23 @@ const Qr = ({
         case "number":
         case "tel":
         case "url":
-          d = n ? String(n) : "-";
+          d = l ? String(l) : "-";
           break;
         case "textarea":
-          d = n ? /* @__PURE__ */ e("div", { className: "whitespace-pre-wrap", children: String(n || "-") }) : "-";
+          d = l ? /* @__PURE__ */ e("div", { className: "whitespace-pre-wrap", children: String(l || "-") }) : "-";
           break;
         case "select":
         case "radio":
-          d = h(n, m.options);
+          d = h(l, m.options);
           break;
         case "checkbox":
-          d = i(n);
+          d = i(l);
           break;
         case "date":
-          d = o(n);
+          d = o(l);
           break;
         default:
-          d = n ? String(n) : "-";
+          d = l ? String(l) : "-";
       }
       return /* @__PURE__ */ e(
         Z,
@@ -3892,13 +3947,13 @@ const Qr = ({
         }
       );
     },
-    [l]
+    [n]
   ), f = ae(
     (m) => {
-      if (m.conditional && !m.conditional(l))
+      if (m.conditional && !m.conditional(n))
         return null;
-      const n = m.items.filter((p) => !(p.hidden || p.conditional && !p.conditional(l)));
-      if (n.length === 0) return null;
+      const l = m.items.filter((p) => !(p.hidden || p.conditional && !p.conditional(n)));
+      if (l.length === 0) return null;
       const d = x(
         "space-y-4",
         {
@@ -3939,7 +3994,7 @@ const Qr = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ e("div", { className: "md:col-span-2", children: /* @__PURE__ */ e("div", { className: d, children: n.map((p) => /* @__PURE__ */ c(
+            /* @__PURE__ */ e("div", { className: "md:col-span-2", children: /* @__PURE__ */ e("div", { className: d, children: l.map((p) => /* @__PURE__ */ c(
               "div",
               {
                 className: x(
@@ -3967,7 +4022,7 @@ const Qr = ({
         m.id
       );
     },
-    [l, g]
+    [n, g]
   ), b = x(
     "space-y-6",
     {
@@ -3979,10 +4034,10 @@ const Qr = ({
     a
   );
   return /* @__PURE__ */ e("div", { className: b, children: /* @__PURE__ */ e("div", { className: "space-y-8", children: r.map(f) }) });
-}, ze = ({ item: r, isSelectedHandler: l, onClick: t }) => {
+}, ze = ({ item: r, isSelectedHandler: n, onClick: t }) => {
   const [a, o] = V(!1), i = r.children && r.children.length > 0, h = () => {
     i && o(!a);
-  }, g = l ? l(r.path) : !1;
+  }, g = n ? n(r.path) : !1;
   return /* @__PURE__ */ c("li", { children: [
     /* @__PURE__ */ c(
       "div",
@@ -4002,7 +4057,7 @@ const Qr = ({
           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 }),
-          i && /* @__PURE__ */ e("span", { className: `${a ? "collapsed" : ""}`, children: /* @__PURE__ */ e(Ve, { className: "w-4 h-4 text-gray-300" }) })
+          i && /* @__PURE__ */ e("span", { className: `${a ? "collapsed" : ""}`, children: /* @__PURE__ */ e(We, { className: "w-4 h-4 text-gray-300" }) })
         ]
       }
     ),
@@ -4010,15 +4065,15 @@ const Qr = ({
       ze,
       {
         item: f,
-        isSelectedHandler: l,
+        isSelectedHandler: n,
         onClick: t
       },
       b
     )) })
   ] });
-}, et = ({
+}, ot = ({
   title: r,
-  actionIcons: l,
+  actionIcons: n,
   items: t,
   isSelectedHandler: a,
   onClick: o,
@@ -4026,7 +4081,7 @@ const Qr = ({
 }) => /* @__PURE__ */ c("div", { className: "flex flex-col h-screen mb-6", children: [
   /* @__PURE__ */ c("div", { className: "sidebar-menu-header", children: [
     /* @__PURE__ */ e("span", { className: "text-xl font-semibold text-gray-800 mb-2", children: r }),
-    /* @__PURE__ */ e("div", { className: "sidebar-menu-actions", children: l?.map((h, g) => /* @__PURE__ */ e("span", { className: "sidebar-menu-action-icon", children: h }, g)) })
+    /* @__PURE__ */ e("div", { className: "sidebar-menu-actions", children: n?.map((h, g) => /* @__PURE__ */ e("span", { className: "sidebar-menu-action-icon", children: h }, g)) })
   ] }),
   i && /* @__PURE__ */ e("div", { className: "sidebar-menu-pre-items mb-4", children: i }),
   /* @__PURE__ */ e("ul", { children: t.map(
@@ -4040,9 +4095,9 @@ const Qr = ({
       g
     )
   ) })
-] }), rt = ({
+] }), ct = ({
   level: r = 1,
-  size: l,
+  size: n,
   weight: t = "bold",
   color: a = "current",
   align: o = "left",
@@ -4051,7 +4106,7 @@ const Qr = ({
   children: g,
   ...f
 }) => {
-  const b = l || Dr(r), m = x(
+  const b = n || jr(r), m = x(
     "font-primary",
     // Size variants
     {
@@ -4095,10 +4150,10 @@ const Qr = ({
       truncate: i
     },
     h
-  ), n = `h${r}`;
-  return /* @__PURE__ */ e(n, { className: m, ...f, children: g });
+  ), l = `h${r}`;
+  return /* @__PURE__ */ e(l, { className: m, ...f, children: g });
 };
-function Dr(r) {
+function jr(r) {
   return {
     1: "4xl",
     2: "3xl",
@@ -4108,9 +4163,9 @@ function Dr(r) {
     6: "md"
   }[r] || "md";
 }
-const tt = ({
+const dt = ({
   items: r,
-  type: l = "unordered",
+  type: n = "unordered",
   variant: t = "default",
   size: a = "md",
   interactive: o = !1,
@@ -4138,7 +4193,7 @@ const tt = ({
       "text-lg": a === "lg"
     },
     i
-  ), f = (n, d) => x(
+  ), f = (l, d) => x(
     // Base item styles
     "transition-colors duration-200",
     // Size-based padding
@@ -4148,93 +4203,93 @@ const tt = ({
       "py-3 px-4": a === "lg" && (t === "bordered" || t === "divided")
     },
     // Interactive styles
-    o && !n.disabled && {
+    o && !l.disabled && {
       "cursor-pointer hover:bg-neutral-50 dark:hover:bg-neutral-800": !0,
       "focus:outline-none focus:bg-neutral-100 dark:focus:bg-neutral-700": !0
     },
     // Disabled styles
-    n.disabled && {
+    l.disabled && {
       "opacity-50 cursor-not-allowed": !0
     },
     h
-  ), b = (n) => {
-    o && !n.disabled && n.onClick && n.onClick();
-  }, m = (n, d) => {
-    o && !d.disabled && (n.key === "Enter" || n.key === " ") && (n.preventDefault(), d.onClick?.());
+  ), b = (l) => {
+    o && !l.disabled && l.onClick && l.onClick();
+  }, m = (l, d) => {
+    o && !d.disabled && (l.key === "Enter" || l.key === " ") && (l.preventDefault(), d.onClick?.());
   };
-  return l === "ordered" ? /* @__PURE__ */ e("ol", { className: g, children: r.map((n, d) => /* @__PURE__ */ e(
+  return n === "ordered" ? /* @__PURE__ */ e("ol", { className: g, children: r.map((l, d) => /* @__PURE__ */ e(
     "li",
     {
-      className: f(n),
-      onClick: () => b(n),
-      onKeyDown: (p) => m(p, n),
-      tabIndex: o && !n.disabled ? 0 : void 0,
+      className: f(l),
+      onClick: () => b(l),
+      onKeyDown: (p) => m(p, l),
+      tabIndex: o && !l.disabled ? 0 : void 0,
       role: o ? "button" : void 0,
-      children: n.content
+      children: l.content
     },
-    n.id || d
-  )) }) : l === "description" ? /* @__PURE__ */ e("dl", { className: g, children: r.map((n, d) => /* @__PURE__ */ e(
+    l.id || d
+  )) }) : n === "description" ? /* @__PURE__ */ e("dl", { className: g, children: r.map((l, d) => /* @__PURE__ */ e(
     "div",
     {
-      className: f(n),
-      onClick: () => b(n),
-      onKeyDown: (p) => m(p, n),
-      tabIndex: o && !n.disabled ? 0 : void 0,
+      className: f(l),
+      onClick: () => b(l),
+      onKeyDown: (p) => m(p, l),
+      tabIndex: o && !l.disabled ? 0 : void 0,
       role: o ? "button" : void 0,
-      children: n.content
+      children: l.content
     },
-    n.id || d
-  )) }) : /* @__PURE__ */ e("ul", { className: g, children: r.map((n, d) => /* @__PURE__ */ e(
+    l.id || d
+  )) }) : /* @__PURE__ */ e("ul", { className: g, children: r.map((l, d) => /* @__PURE__ */ e(
     "li",
     {
-      className: f(n),
-      onClick: () => b(n),
-      onKeyDown: (p) => m(p, n),
-      tabIndex: o && !n.disabled ? 0 : void 0,
+      className: f(l),
+      onClick: () => b(l),
+      onKeyDown: (p) => m(p, l),
+      tabIndex: o && !l.disabled ? 0 : void 0,
       role: o ? "button" : void 0,
-      children: n.content
+      children: l.content
     },
-    n.id || d
+    l.id || d
   )) });
-}, at = ({
+}, it = ({
   commands: r,
-  isOpen: l,
+  isOpen: n,
   onClose: t,
   labels: a,
   initialCommandPath: o,
   initialActiveIndex: i
 }) => {
-  const [h, g] = V(""), [f, b] = V(o || []), [m, n] = V(i || 0), d = Q(null), N = (f.length ? r.find((v) => v.id === f[0])?.subCommands || [] : r).filter(
+  const [h, g] = V(""), [f, b] = V(o || []), [m, l] = V(i || 0), d = X(null), N = (f.length ? r.find((v) => v.id === f[0])?.subCommands || [] : r).filter(
     (v) => v.label.toLowerCase().includes(h.toLowerCase())
   );
-  return G(() => {
-    l || (g(""), b(o || []), n(i || 0));
-  }, [l]), G(() => {
+  return K(() => {
+    n || (g(""), b(o || []), l(i || 0));
+  }, [n]), K(() => {
     const v = (S) => {
-      if (l) {
+      if (n) {
         if (S.key === "Escape")
           t();
         else if (S.key === "ArrowUp")
-          n(
+          l(
             (B) => B > 0 ? B - 1 : N.length - 1
           );
         else if (S.key === "ArrowDown")
-          n(
+          l(
             (B) => B < N.length - 1 ? B + 1 : 0
           );
         else if (S.key === "Enter") {
           const B = N[m];
-          B && (B.subCommands ? (b([...f, B.id]), n(0)) : B.action && (B.action(), t()));
+          B && (B.subCommands ? (b([...f, B.id]), l(0)) : B.action && (B.action(), t()));
         }
       }
     };
     return document.addEventListener("keydown", v), () => document.removeEventListener("keydown", v);
-  }, [l, t, N, m, f]), G(() => {
+  }, [n, t, N, m, f]), K(() => {
     const v = (S) => {
       d.current && !d.current.contains(S.target) && t();
     };
-    return l && document.addEventListener("mousedown", v), () => document.removeEventListener("mousedown", v);
-  }, [l, t]), l ? /* @__PURE__ */ e("div", { className: "fixed inset-0 z-50 flex items-center justify-center shadow-lvl-0", children: /* @__PURE__ */ c(
+    return n && document.addEventListener("mousedown", v), () => document.removeEventListener("mousedown", v);
+  }, [n, t]), n ? /* @__PURE__ */ e("div", { className: "fixed inset-0 z-50 flex items-center justify-center shadow-lvl-0", children: /* @__PURE__ */ c(
     "div",
     {
       className: "flex flex-col w-full max-w-lg p-2 mx-auto rounded-lg shadow-lg bg-white",
@@ -4257,13 +4312,13 @@ const tt = ({
             {
               className: `flex items-center p-2 cursor-pointer rounded-md text-secondary-800 ${S === m ? "bg-gray-100" : ""}`,
               onClick: () => {
-                v.subCommands ? (b([...f, v.id]), n(0)) : v.action && (v.action(), t());
+                v.subCommands ? (b([...f, v.id]), l(0)) : v.action && (v.action(), t());
               },
-              onMouseEnter: () => n(S),
+              onMouseEnter: () => l(S),
               children: [
                 v.icon && /* @__PURE__ */ e("span", { className: "mr-3", children: v.icon }),
                 /* @__PURE__ */ e("span", { className: "flex-grow", children: v.label }),
-                v.subCommands && /* @__PURE__ */ e("span", { className: "text-gray-400", children: /* @__PURE__ */ e(Fe, { className: "w-4 h-4" }) })
+                v.subCommands && /* @__PURE__ */ e("span", { className: "text-gray-400", children: /* @__PURE__ */ e(Re, { className: "w-4 h-4" }) })
               ]
             },
             v.id
@@ -4289,7 +4344,7 @@ const tt = ({
       ]
     }
   ) }) : null;
-}, Tr = {
+}, Br = {
   none: "p-0",
   xs: "p-1",
   sm: "p-2",
@@ -4297,7 +4352,7 @@ const tt = ({
   lg: "p-6",
   xl: "p-8",
   "2xl": "p-12"
-}, Ar = {
+}, Pr = {
   none: "m-0",
   xs: "m-1",
   sm: "m-2",
@@ -4305,7 +4360,7 @@ const tt = ({
   lg: "m-6",
   xl: "m-8",
   "2xl": "m-12"
-}, Ir = {
+}, Or = {
   none: "",
   primary: "bg-primary",
   secondary: "bg-secondary",
@@ -4317,26 +4372,26 @@ const tt = ({
   neutral: "bg-neutral",
   white: "bg-white",
   module: "bg-module"
-}, jr = {
+}, _r = {
   none: "rounded-none",
   sm: "rounded-sm",
   md: "rounded-md",
   lg: "rounded-lg",
   xl: "rounded-xl",
   full: "rounded-full"
-}, Br = {
+}, Vr = {
   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"
-}, Pr = {
+}, Fr = {
   none: "border-0",
   sm: "border",
   md: "border-2",
   lg: "border-4"
-}, _r = {
+}, Wr = {
   primary: "border-primary",
   secondary: "border-secondary",
   accent: "border-accent",
@@ -4349,7 +4404,7 @@ const tt = ({
 }, De = ce(
   ({
     padding: r,
-    margin: l,
+    margin: n,
     background: t,
     radius: a,
     shadow: o,
@@ -4363,13 +4418,13 @@ const tt = ({
     {
       ref: m,
       className: x(
-        r && Tr[r],
-        l && Ar[l],
-        t && Ir[t],
-        a && jr[a],
-        o && Br[o],
-        i && Pr[i],
-        h && _r[h],
+        r && Br[r],
+        n && Pr[n],
+        t && Or[t],
+        a && _r[a],
+        o && Vr[o],
+        i && Fr[i],
+        h && Wr[h],
         g
       ),
       ...b,
@@ -4378,25 +4433,25 @@ const tt = ({
   )
 );
 De.displayName = "Box";
-const nt = ({ children: r, title: l, ...t }) => /* @__PURE__ */ c(De, { background: "module", radius: "xl", shadow: "sm", ...t, children: [
-  l && /* @__PURE__ */ e("span", { className: "text-base font-medium text-gray-800 mb-2", children: l }),
+const ut = ({ children: r, title: n, ...t }) => /* @__PURE__ */ c(De, { background: "module", radius: "xl", shadow: "sm", ...t, children: [
+  n && /* @__PURE__ */ e("span", { className: "text-base font-medium text-gray-800 mb-2", children: n }),
   r
 ] });
-function lt({
+function mt({
   identifier: r,
-  resourceLoader: l,
+  resourceLoader: n,
   framework: t = "react",
   fallback: a,
   componentProps: o,
   className: i
 }) {
-  const h = Q(null), [g, f] = V(!0), [b, m] = V(null), n = Q(null);
-  return Q(null), G(() => {
+  const h = X(null), [g, f] = V(!0), [b, m] = V(null), l = X(null);
+  return X(null), K(() => {
     let d = !0;
     return (async () => {
       f(!0);
       try {
-        const N = await l();
+        const N = await n();
         if (!d) return;
         const v = N.component || N.default || N;
         m(t === "react" ? () => v : () => N);
@@ -4408,13 +4463,13 @@ function lt({
     })(), () => {
       d = !1;
     };
-  }, [r, l]), G(() => {
+  }, [r, n]), K(() => {
     if (g || !b || t === "react") return;
     const d = h.current;
     if (d) {
       if (t === "svelte") {
         const p = b.default || b, N = new p({ target: d, props: o || {} });
-        return n.current = N, () => N.$destroy();
+        return l.current = N, () => N.$destroy();
       }
       if (b.mount) {
         const p = b.mount({ container: d, props: o || {} });
@@ -4423,25 +4478,25 @@ function lt({
         };
       }
     }
-  }, [b, t, g]), G(() => {
-    t === "svelte" && n.current && n.current.$set?.(o);
+  }, [b, t, g]), K(() => {
+    t === "svelte" && l.current && l.current.$set?.(o);
   }, [o, t]), /* @__PURE__ */ c("div", { ref: h, className: i, style: { display: "contents" }, children: [
     g && a,
     t === "react" && b && /* @__PURE__ */ e(b, { ...o })
   ] });
 }
-class st extends Ie {
+class ht extends qe {
   constructor() {
     super(...arguments), this.state = {
       hasError: !1,
       error: null
     };
   }
-  static getDerivedStateFromError(l) {
-    return { hasError: !0, error: l };
+  static getDerivedStateFromError(n) {
+    return { hasError: !0, error: n };
   }
-  componentDidCatch(l, t) {
-    console.error(`[ErrorBoundary] Error in ${this.props.name || "Component"}:`, l, t);
+  componentDidCatch(n, t) {
+    console.error(`[ErrorBoundary] Error in ${this.props.name || "Component"}:`, n, t);
   }
   render() {
     return this.state.hasError ? this.props.fallback ? this.props.fallback : /* @__PURE__ */ c("div", { className: "p-4 m-4 border border-red-200 bg-red-50 rounded-lg", children: [
@@ -4459,41 +4514,44 @@ class st extends Ie {
   }
 }
 export {
-  Jr as Badge,
+  tt as Badge,
   De as Box,
   ee as Button,
-  Hr as ButtonGroup,
-  nt as Card,
+  Xr as ButtonGroup,
+  ut as Card,
   be as Checkbox,
-  at as CommandPalette,
-  sr as ContentLoading,
+  it as CommandPalette,
+  ir as ContentLoading,
   ye as DatePicker,
-  or as Dropdown,
-  st as ErrorBoundary,
-  lt as FederatedResource,
-  Gr as Form,
-  rt as Heading,
+  ur as Dropdown,
+  ht as ErrorBoundary,
+  mt as FederatedResource,
+  rt as Form,
+  ct as Heading,
   oe as Icon,
-  Zr as Image,
-  Ur as Link,
-  tt as List,
-  yr as Modal,
-  Xr as PageHeader,
-  rr as SearchableTextField,
+  nt as Image,
+  Qr as Link,
+  dt as List,
+  Jr as MeetingGrid,
+  wr as Modal,
+  lt as PageHeader,
+  Yr as ParticipantTile,
+  lr as SearchableTextField,
   ve as Select,
-  et as SidebarMenu,
-  Yr as Spinner,
-  Ue as SplitButton,
-  kr as StorageInput,
-  Kr as TabBar,
+  ot as SidebarMenu,
+  at as Spinner,
+  Ye as SplitButton,
+  Sr as StorageInput,
+  et as TabBar,
   Se as Table,
-  gr as Tabs,
+  kr as Tabs,
   Z as Text,
   ke as TextArea,
   ue as TextField,
-  Qr as View,
+  Zr as VideoSurface,
+  st as View,
   x as cn,
-  qr as createSizes,
-  Rr as createVariants
+  Kr as createSizes,
+  Gr as createVariants
 };
 //# sourceMappingURL=index.js.map