@opencxh/ui-kit 3.22.0 → 3.28.0

package/dist/index.js

@@ -1,8 +1,8 @@
 import { clsx as Te } from "clsx";
 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) {
+import { VideoOff as Ae, User as Ie, MicOff as je, Mic as Be, ChevronDown as Pe, FileText as xe, HardDrive as Ne, X as Oe, ArrowLeft as Ee, Search as Ve, FolderPlus as _e, Upload as Fe, Folder as we, ChevronDownIcon as We, ChevronRight as Re } from "lucide-react";
+import se, { useRef as X, useEffect as G, forwardRef as ce, useState as _, useCallback as ae, useMemo as ie, createContext as qe, Component as He } from "react";
+function g(...r) {
   return Te(r);
 }
 function Gr(r) {
@@ -13,12 +13,12 @@ function Kr(r) {
 }
 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: [
+    return /* @__PURE__ */ c("div", { className: g("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)) });
+  return /* @__PURE__ */ e("div", { className: g("grid gap-2 h-full", a, t), children: r.map((o, i) => /* @__PURE__ */ e("div", { children: o }, i)) });
 }
 function Yr({
   name: r,
@@ -32,7 +32,7 @@ function Yr({
   return /* @__PURE__ */ c(
     "div",
     {
-      className: x(
+      className: g(
         "relative rounded-lg overflow-hidden bg-gray-800 aspect-video flex items-center justify-center",
         a && "ring-2 ring-emerald-400",
         h
@@ -49,7 +49,7 @@ function Yr({
 }
 function Zr({ attach: r, active: n = !0, mirrored: t = !1, className: a }) {
   const o = X(null);
-  return K(() => {
+  return G(() => {
     if (!n || !o.current) return;
     const i = r(o.current);
     return () => {
@@ -59,7 +59,7 @@ function Zr({ attach: r, active: n = !0, mirrored: t = !1, className: a }) {
     "div",
     {
       ref: o,
-      className: x(
+      className: g(
         "w-full h-full bg-gray-900 overflow-hidden",
         t && "[&>*]:scale-x-[-1]",
         a
@@ -96,18 +96,18 @@ const Ue = {
     leftIcon: o,
     rightIcon: i,
     iconOnly: h = !1,
-    className: g,
-    children: f,
-    disabled: b,
-    ...m
+    className: b,
+    children: x,
+    disabled: y,
+    ...u
   }, l) => {
-    const d = b || a;
+    const d = y || a;
     return /* @__PURE__ */ c(
       "button",
       {
         ref: l,
         type: "button",
-        className: x(
+        className: g(
           // Base styles
           "inline-flex items-center justify-center font-medium rounded-lg transition-colors duration-200",
           "focus:outline-none focus:ring-1 focus:ring-offset-1",
@@ -120,15 +120,15 @@ const Ue = {
           t && "w-full",
           // Loading state
           a && "cursor-wait",
-          g
+          b
         ),
         disabled: d,
-        ...m,
+        ...u,
         children: [
           a && /* @__PURE__ */ c(
             "svg",
             {
-              className: x(
+              className: g(
                 "animate-spin",
                 h ? "h-4 w-4" : "h-4 w-4 mr-2"
               ),
@@ -157,10 +157,10 @@ const Ue = {
               ]
             }
           ),
-          !a && o && /* @__PURE__ */ e("span", { className: x("flex-shrink-0", !h && "mr-2"), children: o }),
-          !h && f,
-          !a && i && /* @__PURE__ */ e("span", { className: x("flex-shrink-0", !h && "ml-2"), children: i }),
-          h && !a && !o && !i && f
+          !a && o && /* @__PURE__ */ e("span", { className: g("flex-shrink-0", !h && "mr-2"), children: o }),
+          !h && x,
+          !a && i && /* @__PURE__ */ e("span", { className: g("flex-shrink-0", !h && "ml-2"), children: i }),
+          h && !a && !o && !i && x
         ]
       }
     );
@@ -174,7 +174,7 @@ const Xr = ({
   attached: a = !0,
   className: o
 }) => {
-  const i = x(
+  const i = g(
     "inline-flex",
     {
       // Orientation
@@ -205,12 +205,12 @@ const Xr = ({
   external: o = !1,
   className: i,
   children: h,
-  href: g,
-  target: f,
-  rel: b,
-  ...m
+  href: b,
+  target: x,
+  rel: y,
+  ...u
 }) => {
-  const l = o || g && (g.startsWith("http") || g.startsWith("mailto:")), d = x(
+  const l = o || b && (b.startsWith("http") || b.startsWith("mailto:")), d = g(
     // Base styles
     "inline-flex items-center gap-1 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2",
     // Size variants
@@ -264,13 +264,13 @@ const Xr = ({
       "opacity-50 cursor-not-allowed pointer-events-none": a
     },
     i
-  ), p = {
-    ...m,
-    href: a ? void 0 : g,
-    target: l ? "_blank" : f,
-    rel: l ? "noopener noreferrer" : b
+  ), f = {
+    ...u,
+    href: a ? void 0 : b,
+    target: l ? "_blank" : x,
+    rel: l ? "noopener noreferrer" : y
   };
-  return /* @__PURE__ */ c("a", { className: d, ...p, children: [
+  return /* @__PURE__ */ c("a", { className: d, ...f, children: [
     h,
     l && /* @__PURE__ */ e(
       "svg",
@@ -309,22 +309,22 @@ function Ye({
   options: i,
   disabled: h = !1
 }) {
-  const [g, f] = V(!1), b = X(null), m = ae(() => {
-    f((l) => !l);
+  const [b, x] = _(!1), y = X(null), u = ae(() => {
+    x((l) => !l);
   }, []);
-  return K(() => {
+  return G(() => {
     const l = (d) => {
-      b.current && !b.current.contains(d.target) && f(!1);
+      y.current && !y.current.contains(d.target) && x(!1);
     };
     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("div", { ref: y, className: "relative inline-flex items-center gap-px", children: [
     /* @__PURE__ */ c(
       "button",
       {
         type: "button",
         onClick: n,
         disabled: h,
-        className: x(
+        className: g(
           "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",
@@ -342,9 +342,9 @@ function Ye({
       "button",
       {
         type: "button",
-        onClick: m,
+        onClick: u,
         disabled: h,
-        className: x(
+        className: g(
           "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",
@@ -355,14 +355,14 @@ function Ye({
         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((l) => /* @__PURE__ */ e(
+    b && 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: () => {
-          l.onClick(), f(!1);
+          l.onClick(), x(!1);
         },
-        className: x(
+        className: g(
           "w-full text-left px-3 py-2 text-sm hover:bg-gray-50 transition-colors",
           l.variant === "destructive" ? "text-red-600 hover:bg-red-50" : "text-gray-700"
         ),
@@ -391,22 +391,22 @@ const Ze = {
     indeterminate: o = !1,
     containerClassName: i,
     labelClassName: h,
-    className: g,
-    id: f,
-    ...b
-  }, m) => {
-    const l = f || `checkbox-${Math.random().toString(36).substr(2, 9)}`, d = !!t;
+    className: b,
+    id: x,
+    ...y
+  }, u) => {
+    const l = x || `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: [
+      u && typeof u == "object" && u.current && (u.current.indeterminate = o);
+    }, [o, u]), /* @__PURE__ */ c("div", { className: g("flex flex-col", i), children: [
       /* @__PURE__ */ c("div", { className: "flex items-start", children: [
         /* @__PURE__ */ e("div", { className: "flex items-center h-5", children: /* @__PURE__ */ e(
           "input",
           {
-            ref: m,
+            ref: u,
             id: l,
             type: "checkbox",
-            className: x(
+            className: g(
               // Base styles
               "rounded border transition-colors duration-200",
               "focus:ring-2 focus:ring-offset-2 focus:outline-none",
@@ -415,9 +415,9 @@ const Ze = {
               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
+              b
             ),
-            ...b
+            ...y
           }
         ) }),
         r && /* @__PURE__ */ c("div", { className: "ml-3 flex-1", children: [
@@ -425,7 +425,7 @@ const Ze = {
             "label",
             {
               htmlFor: l,
-              className: x(
+              className: g(
                 "font-medium cursor-pointer",
                 d ? "text-error" : "text-secondary-900 dark:text-secondary-100",
                 Xe[a],
@@ -450,47 +450,47 @@ const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
   required: o = !1,
   size: i = "md",
   className: h,
-  minDate: g,
-  maxDate: f,
-  format: b = "MM/dd/yyyy"
-}, m) => {
-  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);
+  minDate: b,
+  maxDate: x,
+  format: y = "MM/dd/yyyy"
+}, u) => {
+  const [l, d] = _(!1), [f, C] = _(() => r || /* @__PURE__ */ new Date()), N = X(null);
+  G(() => {
+    const z = (v) => {
+      N.current && !N.current.contains(v.target) && d(!1);
     };
     return l && document.addEventListener("mousedown", z), () => {
       document.removeEventListener("mousedown", z);
     };
   }, [l]);
-  const S = (z) => {
+  const k = (z) => {
     if (!z) return "";
-    const y = z.getDate().toString().padStart(2, "0"), T = (z.getMonth() + 1).toString().padStart(2, "0"), u = z.getFullYear();
-    switch (b) {
+    const v = z.getDate().toString().padStart(2, "0"), T = (z.getMonth() + 1).toString().padStart(2, "0"), m = z.getFullYear();
+    switch (y) {
       case "dd/MM/yyyy":
-        return `${y}/${T}/${u}`;
+        return `${v}/${T}/${m}`;
       case "yyyy-MM-dd":
-        return `${u}-${T}-${y}`;
+        return `${m}-${T}-${v}`;
       case "MM/dd/yyyy":
       default:
-        return `${T}/${y}/${u}`;
+        return `${T}/${v}/${m}`;
     }
   }, B = () => {
-    const z = p.getFullYear(), y = p.getMonth(), T = new Date(z, y, 1), u = new Date(T);
-    u.setDate(u.getDate() - T.getDay());
-    const $ = [], L = new Date(u);
+    const z = f.getFullYear(), v = f.getMonth(), T = new Date(z, v, 1), m = new Date(T);
+    m.setDate(m.getDate() - T.getDay());
+    const $ = [], L = new Date(m);
     for (let D = 0; D < 42; D++)
       $.push(new Date(L)), L.setDate(L.getDate() + 1);
     return $;
-  }, k = (z) => {
-    z.getMonth() === p.getMonth() && (g && z < g || f && z > f || (n?.(z), d(!1)));
-  }, H = () => {
-    N(new Date(p.getFullYear(), p.getMonth() - 1, 1));
-  }, G = () => {
-    N(new Date(p.getFullYear(), p.getMonth() + 1, 1));
+  }, p = (z) => {
+    z.getMonth() === f.getMonth() && (b && z < b || x && z > x || (n?.(z), d(!1)));
   }, q = () => {
+    C(new Date(f.getFullYear(), f.getMonth() - 1, 1));
+  }, K = () => {
+    C(new Date(f.getFullYear(), f.getMonth() + 1, 1));
+  }, H = () => {
     n?.(null), d(!1);
-  }, F = x(
+  }, F = g(
     "w-full border border-neutral-100 dark:border-neutral-600 rounded-md transition-colors duration-200",
     "bg-white dark:bg-neutral-800 text-gray-700 dark:text-gray-300",
     "placeholder:text-gray-800 dark:placeholder:text-gray-500",
@@ -517,20 +517,20 @@ const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
     "November",
     "December"
   ];
-  return /* @__PURE__ */ c("div", { ref: v, className: "relative", children: [
+  return /* @__PURE__ */ c("div", { ref: N, className: "relative", children: [
     /* @__PURE__ */ c("div", { className: "relative", children: [
       /* @__PURE__ */ e(
         "input",
         {
-          ref: m,
+          ref: u,
           type: "text",
-          value: S(r ?? null),
+          value: k(r ?? null),
           placeholder: t,
           disabled: a,
           required: o,
           readOnly: !0,
           onClick: () => !a && d(!l),
-          className: x(F, "pr-10 cursor-pointer")
+          className: g(F, "pr-10 cursor-pointer")
         }
       ),
       /* @__PURE__ */ e(
@@ -549,52 +549,52 @@ const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: H,
+            onClick: q,
             className: "p-1 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded",
             children: /* @__PURE__ */ e(er, {})
           }
         ),
         /* @__PURE__ */ c("h3", { className: "text-sm font-medium text-neutral-900 dark:text-neutral-100", children: [
-          J[p.getMonth()],
+          J[f.getMonth()],
           " ",
-          p.getFullYear()
+          f.getFullYear()
         ] }),
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: G,
+            onClick: K,
             className: "p-1 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded",
             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: 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;
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-7 gap-1", children: E.map((z, v) => {
+        const T = z.getMonth() === f.getMonth(), m = r && z.toDateString() === r.toDateString(), $ = z.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), L = !T || b && z < b || x && z > x;
         return /* @__PURE__ */ e(
           "button",
           {
-            onClick: () => !L && k(z),
+            onClick: () => !L && p(z),
             disabled: L,
-            className: x(
+            className: g(
               "w-8 h-8 text-sm rounded transition-colors duration-200",
               {
-                "text-neutral-900 dark:text-neutral-100 hover:bg-neutral-100 dark:hover:bg-neutral-700": T && !u && !L,
-                "bg-primary text-white": u,
-                "bg-neutral-100 dark:bg-neutral-700 text-neutral-900 dark:text-neutral-100": $ && !u,
+                "text-neutral-900 dark:text-neutral-100 hover:bg-neutral-100 dark:hover:bg-neutral-700": T && !m && !L,
+                "bg-primary text-white": m,
+                "bg-neutral-100 dark:bg-neutral-700 text-neutral-900 dark:text-neutral-100": $ && !m,
                 "text-neutral-300 dark:text-neutral-600 cursor-not-allowed": L
               }
             ),
             children: z.getDate()
           },
-          y
+          v
         );
       }) }),
       /* @__PURE__ */ c("div", { className: "flex justify-between items-center mt-4 pt-3 border-t border-neutral-200 dark:border-neutral-700", children: [
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: q,
+            onClick: H,
             className: "text-sm text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300",
             children: "Clear"
           }
@@ -651,7 +651,7 @@ const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
   md: "px-3 py-2 text-sm",
   lg: "px-3 py-2 text-sm",
   full: "px-3 py-2 text-sm"
-}, xe = {
+}, pe = {
   sm: "h-4 w-4",
   md: "h-5 w-5",
   lg: "h-6 w-6",
@@ -665,91 +665,91 @@ const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
     fullWidth: o = !1,
     startIcon: i = /* @__PURE__ */ e(tr, {}),
     loading: h = !1,
-    containerClassName: g,
-    labelClassName: f,
-    className: b,
-    id: m,
+    containerClassName: b,
+    labelClassName: x,
+    className: y,
+    id: u,
     options: l,
     onRemoteSearch: d,
-    onSelect: p,
-    debounceTime: N = 500,
-    value: v,
-    onChange: S,
+    onSelect: f,
+    debounceTime: C = 500,
+    value: N,
+    onChange: k,
     ...B
-  }, k) => {
-    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]);
+  }, p) => {
+    const q = u || `searchfield-${Math.random().toString(36).substr(2, 9)}`, K = !!t, H = X(null), F = X(null), [E, J] = _(N || ""), [z, v] = _(!1), [T, m] = _(!1);
+    G(() => {
+      N !== void 0 && J(N);
+    }, [N]);
     const $ = ie(() => {
       if (!E) return l;
       const W = String(E).toLowerCase();
       return l.filter(
-        (C) => String(C.label).toLowerCase().includes(W)
+        (S) => String(S.label).toLowerCase().includes(W)
       );
     }, [E, l]);
-    K(() => {
+    G(() => {
       if (!d || !E) {
-        u(!1);
+        m(!1);
         return;
       }
       const W = setTimeout(async () => {
-        u(!0);
+        m(!0);
         try {
           await d(String(E));
-        } catch (C) {
-          console.error("Remote search failed:", C);
+        } catch (S) {
+          console.error("Remote search failed:", S);
         } finally {
-          u(!1);
+          m(!1);
         }
-      }, N);
+      }, C);
       return () => {
-        clearTimeout(W), u(!1);
+        clearTimeout(W), m(!1);
       };
-    }, [E, N, d]), K(() => {
-      const W = (C) => {
-        q.current && !q.current.contains(C.target) && y(!1);
+    }, [E, C, d]), G(() => {
+      const W = (S) => {
+        H.current && !H.current.contains(S.target) && v(!1);
       };
       return document.addEventListener("mousedown", W), () => document.removeEventListener("mousedown", W);
     }, []);
     const L = (W) => {
-      const C = W.target.value;
-      J(C), y(!0), S && S(W);
+      const S = W.target.value;
+      J(S), v(!0), k && k(W);
     }, D = (W) => {
-      J(W.label), y(!1), p && p(W.value);
+      J(W.label), v(!1), f && f(W.value);
     }, P = () => {
-      (l.length > 0 || d) && y(!0);
-    }, M = h || T, re = z && ($.length > 0 || M), ne = ie(() => k || F, [k]);
+      (l.length > 0 || d) && v(!0);
+    }, M = h || T, re = z && ($.length > 0 || M), ne = ie(() => p || F, [p]);
     return /* @__PURE__ */ c(
       "div",
       {
         className: de(
           "flex flex-col",
           o ? "w-full" : "",
-          g || "",
+          b || "",
           "relative"
         ),
-        ref: q,
+        ref: H,
         children: [
           r && /* @__PURE__ */ e(
             "label",
             {
-              htmlFor: H,
+              htmlFor: q,
               className: de(
                 "block text-sm font-medium mb-1",
-                G ? "text-red-500" : "text-gray-700 dark:text-gray-300",
-                f || ""
+                K ? "text-red-500" : "text-gray-700 dark:text-gray-300",
+                x || ""
               ),
               children: r
             }
           ),
           /* @__PURE__ */ c("div", { className: "relative", children: [
-            i && /* @__PURE__ */ e("div", { className: "absolute left-0 pl-3 flex items-center pointer-events-none h-full", children: /* @__PURE__ */ e("span", { className: de("text-gray-400", xe[a]), children: i }) }),
+            i && /* @__PURE__ */ e("div", { className: "absolute left-0 pl-3 flex items-center pointer-events-none h-full", children: /* @__PURE__ */ e("span", { className: de("text-gray-400", pe[a]), children: i }) }),
             /* @__PURE__ */ e(
               "input",
               {
                 ref: ne,
-                id: H,
+                id: q,
                 value: E,
                 onChange: L,
                 onFocus: P,
@@ -765,8 +765,8 @@ const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
                   "pr-10",
                   // Altijd padding rechts voor de dropdown/loading icon
                   // State styles
-                  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 || ""
+                  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",
+                  y || ""
                 ),
                 ...B
               }
@@ -776,7 +776,7 @@ const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
               /* @__PURE__ */ c(
                 "svg",
                 {
-                  className: de("animate-spin text-blue-500", xe[a]),
+                  className: de("animate-spin text-blue-500", pe[a]),
                   xmlns: "http://www.w3.org/2000/svg",
                   fill: "none",
                   viewBox: "0 0 24 24",
@@ -810,10 +810,10 @@ const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
                 {
                   className: de(
                     "text-gray-400 cursor-pointer transition-transform",
-                    xe[a],
+                    pe[a],
                     z ? "rotate-180" : "rotate-0"
                   ),
-                  onClick: () => y((W) => !W)
+                  onClick: () => v((W) => !W)
                 }
               )
             ) })
@@ -841,7 +841,7 @@ const Qe = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
             {
               className: de(
                 "mt-1 text-xs",
-                G ? "text-red-500" : "text-gray-500"
+                K ? "text-red-500" : "text-gray-500"
               ),
               children: t || n
             }
@@ -870,91 +870,91 @@ const sr = {
     fullWidth: o = !1,
     options: i,
     placeholder: h,
-    containerClassName: g,
-    labelClassName: f,
-    className: b,
-    id: m,
+    containerClassName: b,
+    labelClassName: x,
+    className: y,
+    id: u,
     searchable: l,
     multiple: d,
-    value: p,
-    onChange: N,
-    allowCreate: v,
-    onCreateOption: S,
+    value: f,
+    onChange: C,
+    allowCreate: N,
+    onCreateOption: k,
     ...B
-  }, k) => {
-    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) => {
+  }, p) => {
+    const q = u || `select-${Math.random().toString(36).substr(2, 9)}`, K = !!t, [H, F] = se.useState(!1), [E, J] = se.useState(""), z = se.useRef(null), [v, T] = se.useState(i);
+    se.useImperativeHandle(p, () => z.current), se.useEffect(() => {
+      const S = (I) => {
         z.current && !z.current.contains(I.target) && F(!1);
       };
-      return document.addEventListener("mousedown", C), () => document.removeEventListener("mousedown", C);
+      return document.addEventListener("mousedown", S), () => document.removeEventListener("mousedown", S);
     }, []);
-    const u = se.useCallback(
-      (C, I) => C.some(
-        (_) => me(_.value) === me(I) || me(_.label) === me(I)
+    const m = se.useCallback(
+      (S, I) => S.some(
+        (V) => me(V.value) === me(I) || me(V.label) === me(I)
       ),
       []
     ), $ = se.useCallback(
-      (C, I) => {
-        const _ = [...C], A = (Q) => {
+      (S, I) => {
+        const V = [...S], A = (Q) => {
           const te = (Q ?? "").trim();
-          te && (u(_, te) || _.push({ value: te, label: te }));
+          te && (m(V, te) || V.push({ value: te, label: te }));
         };
-        return Array.isArray(I) ? I.forEach(A) : A(I), _;
+        return Array.isArray(I) ? I.forEach(A) : A(I), V;
       },
-      [u]
+      [m]
     );
     se.useEffect(() => {
-      T((C) => {
+      T((S) => {
         const I = [...i];
-        return C.forEach((_) => {
-          !u(I, _.value) && !u(I, _.label) && I.push(_);
-        }), $(I, p);
+        return S.forEach((V) => {
+          !m(I, V.value) && !m(I, V.label) && I.push(V);
+        }), $(I, f);
       });
-    }, [i, p, $, u]);
-    const L = (C) => {
+    }, [i, f, $, m]);
+    const L = (S) => {
       if (d) {
-        const I = Array.isArray(p) ? p : [], _ = I.includes(C) ? I.filter((A) => A !== C) : [...I, C];
-        N?.(_);
+        const I = Array.isArray(f) ? f : [], V = I.includes(S) ? I.filter((A) => A !== S) : [...I, S];
+        C?.(V);
       } 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)
-    ) : [], 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();
+        C?.(S), F(!1), J("");
+    }, D = d ? null : v.find((S) => S.value === f), P = d ? v.filter(
+      (S) => Array.isArray(f) && f.includes(S.value)
+    ) : [], M = l && E ? v.filter(
+      (S) => S.label.toLowerCase().includes(E.toLowerCase())
+    ) : v, re = !!N && !!l && !!E.trim() && !m(v, E), ne = (S) => {
+      const I = S.trim();
       if (!I) return;
-      const _ = S?.(I) ?? {
+      const V = k?.(I) ?? {
         value: I,
         label: I
       };
-      if (u(y, _.value) || u(y, _.label)) {
-        L(_.value), J(""), d || F(!1);
+      if (m(v, V.value) || m(v, V.label)) {
+        L(V.value), J(""), d || F(!1);
         return;
       }
-      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";
+      T((A) => [...A, V]), L(V.value), J(""), d || F(!1);
+    }, W = () => d ? P.length > 0 ? P.map((S) => S.label).join(", ") : h || "Select options" : D?.label || h || "Select an option";
     return /* @__PURE__ */ c(
       "div",
       {
         ref: z,
-        className: x(
+        className: g(
           "relative flex flex-col",
           o && "w-full",
-          g
+          b
         ),
         ...B,
         children: [
           r && /* @__PURE__ */ e(
             "label",
             {
-              htmlFor: H,
-              onClick: () => F(!q),
-              className: x(
+              htmlFor: q,
+              onClick: () => F(!H),
+              className: g(
                 "block text-sm font-medium mb-1",
-                G ? "text-error" : "text-secondary-700 dark:text-secondary-300",
-                f
+                K ? "text-error" : "text-secondary-700 dark:text-secondary-300",
+                x
               ),
               children: r
             }
@@ -964,32 +964,32 @@ const sr = {
               "button",
               {
                 type: "button",
-                id: H,
-                onClick: () => F(!q),
-                className: x(
+                id: q,
+                onClick: () => F(!H),
+                className: g(
                   "block w-full rounded-lg border transition-colors duration-200 text-left",
                   "focus:outline-none focus:ring-0 focus:ring-offset-0",
                   "disabled:opacity-50 disabled:cursor-not-allowed",
                   "bg-white dark:bg-secondary-800",
                   sr[a],
-                  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
+                  K ? "border-error text-error focus:border-error focus:ring-error" : "border-neutral text-secondary-900 dark:border-neutral-700 dark:bg-secondary-800 dark:text-secondary-100",
+                  y
                 ),
                 children: /* @__PURE__ */ e("span", { className: "block truncate", children: W() })
               }
             ),
-            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: [
+            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: [
               l && /* @__PURE__ */ e("div", { className: "p-2", children: /* @__PURE__ */ e(
                 "input",
                 {
                   type: "text",
                   placeholder: "Search...",
                   value: E,
-                  onChange: (C) => J(C.target.value),
-                  onKeyDown: (C) => {
-                    C.key === "Enter" && re && (C.preventDefault(), ne(E));
+                  onChange: (S) => J(S.target.value),
+                  onKeyDown: (S) => {
+                    S.key === "Enter" && re && (S.preventDefault(), ne(E));
                   },
-                  className: x(
+                  className: g(
                     "w-full px-3 py-2 text-sm rounded-md border",
                     "text-secondary-900 border-gray-100 dark:border-gray-600 focus:outline-none focus:ring-0"
                   )
@@ -998,7 +998,7 @@ const sr = {
               re && /* @__PURE__ */ c(
                 "div",
                 {
-                  className: x(
+                  className: g(
                     "px-4 py-2 text-sm cursor-pointer",
                     "text-primary hover:bg-gray-100 dark:hover:bg-secondary-700"
                   ),
@@ -1016,21 +1016,21 @@ const sr = {
                   {
                     className: "px-4 py-2 text-sm text-secondary-500 cursor-pointer hover:bg-gray-100 dark:hover:bg-secondary-700",
                     onClick: () => {
-                      N?.(""), F(!1);
+                      C?.(""), F(!1);
                     },
                     children: h
                   }
                 ),
-                M.map((C) => {
-                  const I = d ? Array.isArray(p) && p.includes(C.value) : p === C.value;
+                M.map((S) => {
+                  const I = d ? Array.isArray(f) && f.includes(S.value) : f === S.value;
                   return /* @__PURE__ */ e(
                     "li",
                     {
-                      onClick: () => !C.disabled && L(C.value),
-                      className: x(
+                      onClick: () => !S.disabled && L(S.value),
+                      className: g(
                         "px-4 py-2 text-sm cursor-pointer",
                         "text-secondary-900 dark:text-secondary-100",
-                        C.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-gray-100 dark:hover:bg-secondary-700",
+                        S.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-gray-100 dark:hover:bg-secondary-700",
                         I && "font-semibold"
                       ),
                       children: /* @__PURE__ */ c("div", { className: "flex items-center", children: [
@@ -1043,10 +1043,10 @@ const sr = {
                             className: "mr-3 h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
                           }
                         ),
-                        /* @__PURE__ */ e("span", { children: C.label })
+                        /* @__PURE__ */ e("span", { children: S.label })
                       ] })
                     },
-                    C.value
+                    S.value
                   );
                 })
               ] })
@@ -1055,9 +1055,9 @@ const sr = {
           (t || n) && /* @__PURE__ */ e(
             "p",
             {
-              className: x(
+              className: g(
                 "mt-1 text-xs",
-                G ? "text-error" : "text-secondary-500"
+                K ? "text-error" : "text-secondary-500"
               ),
               children: t || n
             }
@@ -1082,22 +1082,22 @@ const or = {
     fullWidth: o = !1,
     loading: i = !1,
     containerClassName: h,
-    labelClassName: g,
-    className: f,
-    id: b,
-    rows: m = 4,
+    labelClassName: b,
+    className: x,
+    id: y,
+    rows: u = 4,
     ...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: [
+    const f = y || `textarea-${Math.random().toString(36).substr(2, 9)}`, C = !!t;
+    return /* @__PURE__ */ c("div", { className: g("flex flex-col", o && "w-full", h), children: [
       r && /* @__PURE__ */ e(
         "label",
         {
-          htmlFor: p,
-          className: x(
+          htmlFor: f,
+          className: g(
             "block text-sm font-medium mb-1",
-            N ? "text-error" : "text-secondary-700 dark:text-secondary-300",
-            g
+            C ? "text-error" : "text-secondary-700 dark:text-secondary-300",
+            b
           ),
           children: r
         }
@@ -1107,9 +1107,9 @@ const or = {
           "textarea",
           {
             ref: d,
-            id: p,
-            rows: m,
-            className: x(
+            id: f,
+            rows: u,
+            className: g(
               // Base styles
               "block w-full rounded-lg border transition-colors duration-200 resize-vertical",
               "placeholder-secondary-400 focus:outline-none focus:ring-0",
@@ -1117,8 +1117,8 @@ const or = {
               // Size styles
               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
+              C ? "border-error text-error focus:border-error focus:ring-error" : "border-gray-100 text-secondary-900 dark:border-gray-600 dark:bg-secondary-800 dark:text-secondary-100",
+              x
             ),
             ...l
           }
@@ -1156,9 +1156,9 @@ const or = {
       (t || n) && /* @__PURE__ */ e(
         "p",
         {
-          className: x(
+          className: g(
             "mt-1 text-xs",
-            N ? "text-error" : "text-secondary-500"
+            C ? "text-error" : "text-secondary-500"
           ),
           children: t || n
         }
@@ -1186,36 +1186,36 @@ const cr = {
     fullWidth: o = !1,
     startIcon: i,
     endIcon: h,
-    loading: g = !1,
-    containerClassName: f,
-    labelClassName: b,
-    className: m,
+    loading: b = !1,
+    containerClassName: x,
+    labelClassName: y,
+    className: u,
     id: l,
     ...d
-  }, p) => {
-    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: [
+  }, f) => {
+    const C = l || `textfield-${Math.random().toString(36).substr(2, 9)}`, N = !!t;
+    return /* @__PURE__ */ c("div", { className: g("flex flex-col", o && "w-full", x), children: [
       r && /* @__PURE__ */ e(
         "label",
         {
-          htmlFor: N,
-          className: x(
+          htmlFor: C,
+          className: g(
             "block text-sm font-medium mb-1",
-            v ? "text-error" : "text-secondary-700 dark:text-secondary-300",
-            b
+            N ? "text-error" : "text-secondary-700 dark:text-secondary-300",
+            y
           ),
           children: r
         }
       ),
       /* @__PURE__ */ c("div", { className: "relative", children: [
         i && // Todo fix inset not showing correctly on different sizes
-        /* @__PURE__ */ e("div", { className: "absolute left-0 pl-3 flex items-center pointer-events-none h-full", children: /* @__PURE__ */ e("span", { className: x("text-secondary-400", ge[a]), children: i }) }),
+        /* @__PURE__ */ e("div", { className: "absolute left-0 pl-3 flex items-center pointer-events-none h-full", children: /* @__PURE__ */ e("span", { className: g("text-secondary-400", ge[a]), children: i }) }),
         /* @__PURE__ */ e(
           "input",
           {
-            ref: p,
-            id: N,
-            className: x(
+            ref: f,
+            id: C,
+            className: g(
               // Base styles
               "block w-full rounded-lg border dark:border-gray-600 transition-colors duration-200",
               "placeholder-gray-500 dark:placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-offset-0",
@@ -1226,16 +1226,16 @@ const cr = {
               i && "pl-10",
               h && "pr-10",
               // State styles
-              v ? "border-error text-error focus:border-error focus:ring-error" : "border-gray-100 text-secondary-900 focus:border-primary focus:ring-primary dark:border-gray-600 dark:bg-secondary-800 dark:text-secondary-100",
-              m
+              N ? "border-error text-error focus:border-error focus:ring-error" : "border-gray-100 text-secondary-900 focus:border-primary focus:ring-primary dark:border-gray-600 dark:bg-secondary-800 dark:text-secondary-100",
+              u
             ),
             ...d
           }
         ),
-        (h || g) && /* @__PURE__ */ e("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: g ? /* @__PURE__ */ c(
+        (h || b) && /* @__PURE__ */ e("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: b ? /* @__PURE__ */ c(
           "svg",
           {
-            className: x("animate-spin text-secondary-400", ge[a]),
+            className: g("animate-spin text-secondary-400", ge[a]),
             fill: "none",
             viewBox: "0 0 24 24",
             children: [
@@ -1260,14 +1260,14 @@ const cr = {
               )
             ]
           }
-        ) : h && /* @__PURE__ */ e("span", { className: x("text-secondary-400", ge[a]), children: h }) })
+        ) : h && /* @__PURE__ */ e("span", { className: g("text-secondary-400", ge[a]), children: h }) })
       ] }),
       (t || n) && /* @__PURE__ */ e(
         "p",
         {
-          className: x(
+          className: g(
             "mt-1 text-xs",
-            v ? "text-error" : "text-secondary-500"
+            N ? "text-error" : "text-secondary-500"
           ),
           children: t || n
         }
@@ -1284,9 +1284,9 @@ const oe = ({
   onClick: o,
   className: i,
   "aria-label": h,
-  ...g
+  ...b
 }) => {
-  const f = typeof n == "number" ? n : dr(n), b = x(
+  const x = typeof n == "number" ? n : dr(n), y = g(
     "inline-block",
     // Color variants
     {
@@ -1306,9 +1306,9 @@ const oe = ({
       "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary/20 rounded": a
     },
     i
-  ), m = {
-    size: f,
-    className: b,
+  ), u = {
+    size: x,
+    className: y,
     onClick: a ? o : void 0,
     "aria-label": h,
     role: a ? "button" : void 0,
@@ -1316,9 +1316,9 @@ const oe = ({
     onKeyDown: a ? (l) => {
       (l.key === "Enter" || l.key === " ") && (l.preventDefault(), o?.());
     } : void 0,
-    ...g
+    ...b
   };
-  return /* @__PURE__ */ e(r, { ...m });
+  return /* @__PURE__ */ e(r, { ...u });
 };
 function dr(r) {
   return {
@@ -1355,12 +1355,12 @@ function ir({
         "div",
         {
           className: `grid grid-cols-${t} gap-2 p-3 border-t border-gray-100 dark:border-gray-800`,
-          children: Array.from({ length: t }).map((h, g) => /* @__PURE__ */ e(
+          children: Array.from({ length: t }).map((h, b) => /* @__PURE__ */ e(
             "div",
             {
               className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-full"
             },
-            `cell-${i}-${g}`
+            `cell-${i}-${b}`
           ))
         },
         `row-${i}`
@@ -1376,53 +1376,53 @@ const ur = ({
   placement: o = "bottom-start",
   disabled: i = !1,
   className: h,
-  showCheck: g = !0,
-  header: f
+  showCheck: b = !0,
+  header: x
 }) => {
-  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));
+  const [y, u] = _(!1), [l, d] = _(null), [f, C] = _({ top: 0, left: 0 }), N = X(null), k = X(null), B = X(null), p = X(null);
+  G(() => {
+    const v = (T) => {
+      N.current && (!N.current.contains(T.target) || B.current && !B.current.contains(T.target)) && (u(!1), d(null), p.current && (clearTimeout(p.current), p.current = null));
     };
-    return b && document.addEventListener("mousedown", y), () => {
-      document.removeEventListener("mousedown", y);
+    return y && document.addEventListener("mousedown", v), () => {
+      document.removeEventListener("mousedown", v);
     };
-  }, [b]), K(() => {
-    const y = (T) => {
-      T.key === "Escape" && (m(!1), d(null), k.current && (clearTimeout(k.current), k.current = null));
+  }, [y]), G(() => {
+    const v = (T) => {
+      T.key === "Escape" && (u(!1), d(null), p.current && (clearTimeout(p.current), p.current = null));
     };
-    return b && document.addEventListener("keydown", y), () => {
-      document.removeEventListener("keydown", y);
+    return y && document.addEventListener("keydown", v), () => {
+      document.removeEventListener("keydown", v);
     };
-  }, [b]), K(() => {
-    if (l && v.current) {
-      const y = v.current.querySelector(
+  }, [y]), G(() => {
+    if (l && N.current) {
+      const v = N.current.querySelector(
         `[data-option-value="${l}"]`
       );
-      if (y) {
-        const T = y.getBoundingClientRect();
-        N({
+      if (v) {
+        const T = v.getBoundingClientRect();
+        C({
           top: T.top,
           left: T.right + 8
         });
       }
     }
-  }, [l]), K(() => () => {
-    k.current && clearTimeout(k.current);
+  }, [l]), G(() => () => {
+    p.current && clearTimeout(p.current);
   }, []);
-  const H = (y) => {
-    y.stopPropagation(), i || (m(!b), d(null), k.current && (clearTimeout(k.current), k.current = null));
-  }, G = (y, T, u) => {
-    y.stopPropagation(), !T.disabled && !T.divider && (!T.children || T.children.length === 0) && (a?.(T.value, u), m(!1), d(null));
-  }, 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(() => {
+  const q = (v) => {
+    v.stopPropagation(), i || (u(!y), d(null), p.current && (clearTimeout(p.current), p.current = null));
+  }, K = (v, T, m) => {
+    v.stopPropagation(), !T.disabled && !T.divider && (!T.children || T.children.length === 0) && (a?.(T.value, m), u(!1), d(null));
+  }, H = (v) => {
+    p.current && (clearTimeout(p.current), p.current = null), v.children && v.children.length > 0 ? d(v.value) : d(null);
+  }, F = (v) => {
+    v.children && v.children.length > 0 ? p.current = setTimeout(() => {
       d(null);
     }, 150) : d(null);
-  }, E = (y, T, u) => {
-    y.stopPropagation(), !T.disabled && !T.divider && (a?.(T.value, u), m(!1), d(null));
-  }, J = x(
+  }, E = (v, T, m) => {
+    v.stopPropagation(), !T.disabled && !T.divider && (a?.(T.value, m), u(!1), d(null));
+  }, J = g(
     "absolute z-50 min-w-[200px] bg-white dark:bg-gray-800 rounded-md shadow-xs border border-gray-100 dark:border-gray-600",
     "max-h-60 overflow-auto",
     {
@@ -1431,15 +1431,15 @@ const ur = ({
       "bottom-full left-0 mb-2": o === "top-start",
       "bottom-full right-0 mb-2": o === "top-end"
     }
-  ), z = x(
+  ), z = g(
     "fixed z-[60] min-w-[200px] bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-100 dark:border-gray-600",
     "max-h-60 overflow-auto"
   );
   return /* @__PURE__ */ c(
     "div",
     {
-      ref: v,
-      className: x(
+      ref: N,
+      className: g(
         "relative flex flex-row items-center justify-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700",
         h
       ),
@@ -1447,19 +1447,19 @@ const ur = ({
         /* @__PURE__ */ e(
           "button",
           {
-            ref: S,
-            onClick: H,
+            ref: k,
+            onClick: q,
             disabled: i,
-            className: x("inline-flex items-center justify-center", {
+            className: g("inline-flex items-center justify-center", {
               "opacity-50 cursor-not-allowed": i
             }),
             children: r
           }
         ),
-        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),
-          n.map((y, T) => {
-            if (y.divider)
+        y && /* @__PURE__ */ e("div", { className: J, children: /* @__PURE__ */ c("div", { className: "p-2", children: [
+          x && (typeof x == "string" ? /* @__PURE__ */ e("div", { className: "text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider px-3 py-2", children: x }) : x),
+          n.map((v, T) => {
+            if (v.divider)
               return /* @__PURE__ */ e(
                 "div",
                 {
@@ -1467,56 +1467,56 @@ const ur = ({
                 },
                 `divider-${T}`
               );
-            const u = y.children && y.children.length > 0, $ = l === y.value;
+            const m = v.children && v.children.length > 0, $ = l === v.value;
             return /* @__PURE__ */ c("div", { className: "relative group", children: [
               /* @__PURE__ */ c(
                 "button",
                 {
-                  "data-option-value": y.value,
-                  onClick: (L) => G(L, y),
-                  onMouseEnter: () => q(y),
-                  onMouseLeave: () => F(y),
-                  disabled: y.disabled,
-                  className: x(
+                  "data-option-value": v.value,
+                  onClick: (L) => K(L, v),
+                  onMouseEnter: () => H(v),
+                  onMouseLeave: () => F(v),
+                  disabled: v.disabled,
+                  className: g(
                     "w-full flex items-center justify-between px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors",
                     {
-                      "opacity-50 cursor-not-allowed": y.disabled,
-                      "bg-gray-100 dark:bg-gray-700": $ && u
+                      "opacity-50 cursor-not-allowed": v.disabled,
+                      "bg-gray-100 dark:bg-gray-700": $ && m
                     }
                   ),
                   children: [
                     /* @__PURE__ */ c("div", { className: "flex items-center space-x-2 min-w-0", children: [
-                      y.icon && /* @__PURE__ */ e("span", { className: "flex-shrink-0", children: y.icon }),
+                      v.icon && /* @__PURE__ */ e("span", { className: "flex-shrink-0", children: v.icon }),
                       /* @__PURE__ */ c("div", { className: "flex flex-col items-start min-w-0", children: [
-                        /* @__PURE__ */ e("span", { className: "font-base truncate", children: y.label }),
-                        y.description && /* @__PURE__ */ e("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: y.description })
+                        /* @__PURE__ */ e("span", { className: "font-base truncate", children: v.label }),
+                        v.description && /* @__PURE__ */ e("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: v.description })
                       ] })
                     ] }),
                     /* @__PURE__ */ c("div", { className: "flex items-center space-x-2", children: [
-                      g && t === y.value && /* @__PURE__ */ e("span", { className: "h-4 w-4 text-green-600 flex-shrink-0 text-sm font-bold", children: "✓" }),
-                      u && /* @__PURE__ */ e("span", { className: "text-gray-400 dark:text-gray-500 text-xs", children: "▶" })
+                      b && t === v.value && /* @__PURE__ */ e("span", { className: "h-4 w-4 text-green-600 flex-shrink-0 text-sm font-bold", children: "✓" }),
+                      m && /* @__PURE__ */ e("span", { className: "text-gray-400 dark:text-gray-500 text-xs", children: "▶" })
                     ] })
                   ]
                 }
               ),
-              u && $ && /* @__PURE__ */ e(
+              m && $ && /* @__PURE__ */ e(
                 "div",
                 {
                   ref: B,
                   className: z,
                   style: {
-                    top: `${p.top}px`,
-                    left: `${p.left}px`
+                    top: `${f.top}px`,
+                    left: `${f.left}px`
                   },
                   onMouseEnter: () => {
-                    k.current && (clearTimeout(k.current), k.current = null), d(y.value);
+                    p.current && (clearTimeout(p.current), p.current = null), d(v.value);
                   },
                   onMouseLeave: () => {
-                    k.current = setTimeout(() => {
+                    p.current = setTimeout(() => {
                       d(null);
                     }, 150);
                   },
-                  children: /* @__PURE__ */ e("div", { className: "p-2", children: y.children.map((L, D) => {
+                  children: /* @__PURE__ */ e("div", { className: "p-2", children: v.children.map((L, D) => {
                     if (L.divider)
                       return /* @__PURE__ */ e(
                         "div",
@@ -1525,7 +1525,7 @@ const ur = ({
                         },
                         `divider-${D}`
                       );
-                    const P = typeof t == "object" && t[y.value] && t[y.value].includes(
+                    const P = typeof t == "object" && t[v.value] && t[v.value].includes(
                       L.value
                     ) || t === L.value;
                     return /* @__PURE__ */ c(
@@ -1534,10 +1534,10 @@ const ur = ({
                         onClick: (M) => E(
                           M,
                           L,
-                          y.value
+                          v.value
                         ),
                         disabled: L.disabled,
-                        className: x(
+                        className: g(
                           "w-full flex items-center justify-between px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors",
                           {
                             "opacity-50 cursor-not-allowed": L.disabled
@@ -1551,7 +1551,7 @@ const ur = ({
                               L.description && /* @__PURE__ */ e("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: L.description })
                             ] })
                           ] }),
-                          g && P && /* @__PURE__ */ e("span", { className: "h-4 w-4 text-green-600 flex-shrink-0 text-sm font-bold", children: "✓" })
+                          b && P && /* @__PURE__ */ e("span", { className: "h-4 w-4 text-green-600 flex-shrink-0 text-sm font-bold", children: "✓" })
                         ]
                       },
                       L.value
@@ -1559,16 +1559,16 @@ const ur = ({
                   }) })
                 }
               )
-            ] }, y.value);
+            ] }, v.value);
           }),
           (() => {
-            const y = n.reduce((T, u) => {
-              if (u.divider) return T;
-              const $ = u.children ? u.children.filter((L) => !L.divider).length : 0;
+            const v = n.reduce((T, m) => {
+              if (m.divider) return T;
+              const $ = m.children ? m.children.filter((L) => !L.divider).length : 0;
               return T + 1 + $;
             }, 0);
-            return y > 1 && /* @__PURE__ */ e("div", { className: "border-t border-gray-200 dark:border-gray-600 mt-2 pt-2", children: /* @__PURE__ */ c("div", { className: "text-xs text-gray-500 dark:text-gray-400 px-3 py-1", children: [
-              y,
+            return v > 1 && /* @__PURE__ */ e("div", { className: "border-t border-gray-200 dark:border-gray-600 mt-2 pt-2", children: /* @__PURE__ */ c("div", { className: "text-xs text-gray-500 dark:text-gray-400 px-3 py-1", children: [
+              v,
               " options available"
             ] }) });
           })()
@@ -1596,7 +1596,7 @@ const ur = ({
 ), hr = ({ active: r }) => /* @__PURE__ */ e(
   "svg",
   {
-    className: x(
+    className: g(
       "h-3 w-3",
       r ? "text-neutral-900 dark:text-neutral-100" : "text-neutral-400"
     ),
@@ -1616,7 +1616,7 @@ const ur = ({
 ), fr = ({ active: r }) => /* @__PURE__ */ e(
   "svg",
   {
-    className: x(
+    className: g(
       "h-3 w-3",
       r ? "text-neutral-900 dark:text-neutral-100" : "text-neutral-400"
     ),
@@ -1633,7 +1633,7 @@ const ur = ({
       }
     )
   }
-), pr = () => /* @__PURE__ */ e(
+), xr = () => /* @__PURE__ */ e(
   "svg",
   {
     className: "h-4 w-4",
@@ -1650,7 +1650,7 @@ const ur = ({
       }
     )
   }
-), xr = () => /* @__PURE__ */ e(
+), pr = () => /* @__PURE__ */ e(
   "svg",
   {
     className: "h-4 w-4",
@@ -1748,7 +1748,7 @@ const ur = ({
           children: /* @__PURE__ */ e(
             "span",
             {
-              className: x(n(a.value) && "text-primary-500"),
+              className: g(n(a.value) && "text-primary-500"),
               children: a.label
             }
           )
@@ -1773,33 +1773,33 @@ const ur = ({
   searchPlaceholder: o = "Search...",
   filters: i = [],
   paginated: h = !1,
-  pageSizeOptions: g = [10, 25, 50, 100],
-  defaultPageSize: f = 10,
-  actions: b = [],
-  onRowClick: m,
+  pageSizeOptions: b = [10, 25, 50, 100],
+  defaultPageSize: x = 10,
+  actions: y = [],
+  onRowClick: u,
   selectable: l = !1,
   selectedRows: d = [],
-  onSelectionChange: p,
-  getRowKey: N = (q, F) => F,
-  emptyContent: v,
-  hoverable: S = !0,
+  onSelectionChange: f,
+  getRowKey: C = (H, F) => F,
+  emptyContent: N,
+  hoverable: k = !0,
   bordered: B = !1,
-  striped: k = !1,
-  className: H,
-  rowClassName: G
+  striped: p = !1,
+  className: q,
+  rowClassName: K
 }) => {
-  const [q, F] = V(""), [E, J] = V({
+  const [H, F] = _(""), [E, J] = _({
     column: null,
     direction: null
-  }), [z, y] = V({
+  }), [z, v] = _({
     page: 0,
-    pageSize: f
-  }), T = X(null), u = ie(() => {
+    pageSize: x
+  }), T = X(null), m = ie(() => {
     let s = r;
-    if (a && q.trim()) {
+    if (a && H.trim()) {
       const w = n.filter(
         (R) => R.searchable !== !1
-      ), O = q.toLowerCase();
+      ), O = H.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(O);
@@ -1813,15 +1813,15 @@ const ur = ({
         return String(j || "") === w.value;
       }));
     }), s;
-  }, [r, q, n, a, i]), $ = ie(() => {
-    if (!E.column || !E.direction) return u;
+  }, [r, H, n, a, i]), $ = ie(() => {
+    if (!E.column || !E.direction) return m;
     const s = n.find((w) => w.id === E.column);
-    return s ? [...u].sort((w, O) => {
+    return s ? [...m].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), E.direction === "desc" ? -Y : Y;
-    }) : u;
-  }, [u, E, n]), L = ie(() => {
+    }) : m;
+  }, [m, E, n]), L = ie(() => {
     if (!h) return $;
     const s = z.page * z.pageSize, w = s + z.pageSize;
     return $.slice(s, w);
@@ -1831,47 +1831,47 @@ const ur = ({
     },
     [n]
   ), P = ae((s) => {
-    y((w) => ({ ...w, page: s }));
+    v((w) => ({ ...w, page: s }));
   }, []), M = ae((s) => {
-    y({ page: 0, pageSize: s });
+    v({ page: 0, pageSize: s });
   }, []), re = ae(
     (s, w) => {
-      if (!p) return;
-      const O = N(s, 0);
-      d.map((R, j) => N(R, j)), p(w ? [...d, s] : d.filter(
-        (R, j) => N(d[j], j) !== O
+      if (!f) return;
+      const O = C(s, 0);
+      d.map((R, j) => C(R, j)), f(w ? [...d, s] : d.filter(
+        (R, j) => C(d[j], j) !== O
       ));
     },
-    [d, p, N]
+    [d, f, C]
   ), ne = ae(
     (s) => {
-      p && p(s ? [...L] : []);
+      f && f(s ? [...L] : []);
     },
-    [L, p]
+    [L, f]
   );
-  K(() => {
-    y((s) => ({ ...s, page: 0 }));
-  }, [q, E]), K(() => {
-    y((s) => ({ ...s, page: 0 }));
+  G(() => {
+    v((s) => ({ ...s, page: 0 }));
+  }, [H, E]), G(() => {
+    v((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, _ = Math.min(I + z.pageSize - 1, W), A = L.length > 0 && L.every((s) => {
-    const w = N(s, 0);
+  const W = $.length, S = Math.ceil(W / z.pageSize), I = z.page * z.pageSize + 1, V = Math.min(I + z.pageSize - 1, W), A = L.length > 0 && L.every((s) => {
+    const w = C(s, 0);
     return d.some(
-      (O, R) => N(O, R) === w
+      (O, R) => C(O, R) === w
     );
   }), Q = L.some((s) => {
-    const w = N(s, 0);
+    const w = C(s, 0);
     return d.some(
-      (O, R) => N(O, R) === w
+      (O, R) => C(O, R) === w
     );
-  }), te = x(
+  }), te = g(
     "w-full text-sm leading-5 text-[var(--text-default)] border-collapse",
-    H
-  ), U = x("bg-[var(--base-module)]"), le = x(
+    q
+  ), U = g("bg-[var(--base-module)]"), le = g(
     "text-[var(--text-default)] dark:text-[var(--text-on-neutral)] p-3 border-b border-[var(--neutral-border)]"
-  ), he = x("h-12", {
-    "hover:bg-[var(--neutral-container)] dark:hover:bg-[var(--neutral-container-emphasis)]": S,
-    "cursor-pointer": m
+  ), he = g("h-12", {
+    "hover:bg-[var(--neutral-container)] dark:hover:bg-[var(--neutral-container-emphasis)]": k,
+    "cursor-pointer": u
   });
   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: [
@@ -1880,7 +1880,7 @@ const ur = ({
         ue,
         {
           placeholder: o,
-          value: q,
+          value: H,
           onChange: (s) => F(s.target.value),
           startIcon: /* @__PURE__ */ e(mr, {}),
           className: "max-w-sm"
@@ -1896,9 +1896,9 @@ const ur = ({
           tableColumns: n.length
         }
       ) }),
-      /* @__PURE__ */ c("table", { ref: T, className: x(te, "min-w-full"), children: [
+      /* @__PURE__ */ c("table", { ref: T, className: g(te, "min-w-full"), children: [
         /* @__PURE__ */ e("thead", { className: U, children: /* @__PURE__ */ c("tr", { children: [
-          l && /* @__PURE__ */ e("th", { className: x(le, "w-12"), children: /* @__PURE__ */ e(
+          l && /* @__PURE__ */ e("th", { className: g(le, "w-12"), children: /* @__PURE__ */ e(
             "input",
             {
               type: "checkbox",
@@ -1913,7 +1913,7 @@ const ur = ({
           !t && n.map((s) => /* @__PURE__ */ e(
             "th",
             {
-              className: x(
+              className: g(
                 le,
                 "font-semibold text-xs text-[var(--text-muted)] dark:text-[var(--text-muted)] uppercase tracking-wider",
                 "group",
@@ -1933,7 +1933,7 @@ const ur = ({
                 s.sortable && /* @__PURE__ */ c(
                   "div",
                   {
-                    className: x(
+                    className: g(
                       "flex flex-col opacity-0 group-hover:opacity-100 transition-opacity",
                       E.column === s.id && "opacity-100"
                     ),
@@ -1957,32 +1957,32 @@ const ur = ({
             },
             s.id
           )),
-          b.length > 0 && /* @__PURE__ */ e("th", { className: x(le, "w-20"), children: /* @__PURE__ */ e("span", { className: "sr-only", children: "Actions" }) })
+          y.length > 0 && /* @__PURE__ */ e("th", { className: g(le, "w-20"), children: /* @__PURE__ */ e("span", { className: "sr-only", children: "Actions" }) })
         ] }) }),
         /* @__PURE__ */ e("tbody", { children: L.length === 0 || t ? !t && /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e(
           "td",
           {
-            colSpan: n.length + (l ? 1 : 0) + (b.length > 0 ? 1 : 0),
-            className: x(
+            colSpan: n.length + (l ? 1 : 0) + (y.length > 0 ? 1 : 0),
+            className: g(
               le,
               "text-center py-8 text-neutral-500 dark:text-neutral-400"
             ),
-            children: v || "No data available"
+            children: N || "No data available"
           }
         ) }) : L.map((s, w) => {
-          const O = N(s, w), R = d.some(
-            (j, Y) => N(j, Y) === O
+          const O = C(s, w), R = d.some(
+            (j, Y) => C(j, Y) === O
           );
           return /* @__PURE__ */ c(
             "tr",
             {
-              className: x(
+              className: g(
                 he,
                 { "bg-blue-50 dark:bg-blue-900/20": R },
-                G?.(s, w)
+                K?.(s, w)
               ),
               onClick: (j) => {
-                j.stopPropagation(), m?.(s, w);
+                j.stopPropagation(), u?.(s, w);
               },
               children: [
                 l && /* @__PURE__ */ e("td", { className: le, children: /* @__PURE__ */ e(
@@ -2001,7 +2001,7 @@ const ur = ({
                   return /* @__PURE__ */ e(
                     "td",
                     {
-                      className: x(le, {
+                      className: g(le, {
                         "text-left": j.align === "left" || !j.align,
                         "text-center": j.align === "center",
                         "text-right": j.align === "right",
@@ -2013,21 +2013,21 @@ const ur = ({
                     j.id
                   );
                 }),
-                b.length > 0 && /* @__PURE__ */ e("td", { className: le, children: /* @__PURE__ */ e(
+                y.length > 0 && /* @__PURE__ */ e("td", { className: le, children: /* @__PURE__ */ e(
                   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" }),
                       /* @__PURE__ */ e($e, {})
                     ] }),
-                    options: b.map((j) => ({
+                    options: y.map((j) => ({
                       value: j.id,
                       label: j.label,
                       icon: j.icon,
                       disabled: j.disabled?.(s)
                     })),
                     onSelect: (j) => {
-                      const Y = b.find(
+                      const Y = y.find(
                         (fe) => fe.id === j
                       );
                       Y && Y.onClick(s, w);
@@ -2048,7 +2048,7 @@ const ur = ({
           "Showing ",
           I,
           " to ",
-          _,
+          V,
           " of ",
           W,
           " results"
@@ -2061,7 +2061,7 @@ const ur = ({
               value: z.pageSize,
               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))
+              children: b.map((s) => /* @__PURE__ */ e("option", { value: s, children: s }, s))
             }
           )
         ] })
@@ -2086,14 +2086,14 @@ const ur = ({
             onClick: () => P(z.page - 1),
             disabled: z.page === 0,
             iconOnly: !0,
-            children: /* @__PURE__ */ e(pr, {})
+            children: /* @__PURE__ */ e(xr, {})
           }
         ),
         /* @__PURE__ */ c("span", { className: "px-3 py-1 text-sm text-gray-500 dark:text-gray-400", children: [
           "Page ",
           z.page + 1,
           " of ",
-          C
+          S
         ] }),
         /* @__PURE__ */ e(
           ee,
@@ -2101,9 +2101,9 @@ const ur = ({
             size: "sm",
             variant: "ghost",
             onClick: () => P(z.page + 1),
-            disabled: z.page >= C - 1,
+            disabled: z.page >= S - 1,
             iconOnly: !0,
-            children: /* @__PURE__ */ e(xr, {})
+            children: /* @__PURE__ */ e(pr, {})
           }
         ),
         /* @__PURE__ */ e(
@@ -2111,8 +2111,8 @@ const ur = ({
           {
             size: "sm",
             variant: "ghost",
-            onClick: () => P(C - 1),
-            disabled: z.page >= C - 1,
+            onClick: () => P(S - 1),
+            disabled: z.page >= S - 1,
             iconOnly: !0,
             children: /* @__PURE__ */ e(br, {})
           }
@@ -2120,37 +2120,37 @@ const ur = ({
       ] })
     ] })
   ] });
-}, vr = He(null), et = ({
+}, vr = qe(null), et = ({
   items: r,
   activeTab: n,
   onTabChange: t,
   className: a
 }) => {
-  const [o, i] = V(r[0]?.id || ""), h = n || o, g = (f) => {
-    t ? t(f) : i(f);
+  const [o, i] = _(r[0]?.id || ""), h = n || o, b = (x) => {
+    t ? t(x) : i(x);
   };
-  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(
+  return /* @__PURE__ */ e("div", { className: g("border-b border-neutral-200 dark:border-neutral-700", a), children: /* @__PURE__ */ e("nav", { className: "-mb-px flex space-x-8", children: r.map((x) => /* @__PURE__ */ e(
     "button",
     {
-      onClick: () => !f.disabled && g(f.id),
-      disabled: f.disabled,
-      className: x(
+      onClick: () => !x.disabled && b(x.id),
+      disabled: x.disabled,
+      className: g(
         "border-b-2 py-2 px-1 text-sm font-medium transition-colors duration-200",
         {
-          "border-primary text-primary": h === f.id,
-          "border-transparent text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300": h !== f.id && !f.disabled,
-          "border-transparent text-neutral-300 cursor-not-allowed dark:text-neutral-600": f.disabled
+          "border-primary text-primary": h === x.id,
+          "border-transparent text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300": h !== x.id && !x.disabled,
+          "border-transparent text-neutral-300 cursor-not-allowed dark:text-neutral-600": x.disabled
         }
       ),
       children: /* @__PURE__ */ c("span", { className: "flex items-center gap-2", children: [
-        f.label,
-        f.badge && /* @__PURE__ */ e("span", { className: x(
+        x.label,
+        x.badge && /* @__PURE__ */ e("span", { className: g(
           "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium",
-          h === f.id ? "bg-primary/10 text-primary" : "bg-neutral-100 text-neutral-600 dark:bg-neutral-800 dark:text-neutral-400"
-        ), children: f.badge })
+          h === x.id ? "bg-primary/10 text-primary" : "bg-neutral-100 text-neutral-600 dark:bg-neutral-800 dark:text-neutral-400"
+        ), children: x.badge })
       ] })
     },
-    f.id
+    x.id
   )) }) });
 }, kr = ({
   items: r,
@@ -2161,14 +2161,14 @@ const ur = ({
   size: i = "md",
   className: h
 }) => {
-  const [g, f] = V(
+  const [b, x] = _(
     n || t || r[0]?.id || ""
-  ), b = t || g, m = (v) => {
-    a ? a(v) : f(v);
+  ), y = t || b, u = (N) => {
+    a ? a(N) : x(N);
   }, l = {
-    activeTab: b,
-    setActiveTab: m
-  }, d = r.find((v) => v.id === b), p = x(
+    activeTab: y,
+    setActiveTab: u
+  }, d = r.find((N) => N.id === y), f = g(
     "flex",
     {
       "border-b border-neutral-200 dark:border-neutral-700 px-2": o === "default" || o === "underline",
@@ -2177,55 +2177,55 @@ const ur = ({
       "space-x-8": o === "default" || o === "underline"
     },
     h
-  ), N = (v, S) => {
-    const B = "transition-colors duration-200 font-medium", k = {
+  ), C = (N, k) => {
+    const B = "transition-colors duration-200 font-medium", p = {
       "text-xs px-2 py-1": i === "sm",
       "text-sm px-3 py-2": i === "md",
       "text-base px-4 py-3": i === "lg"
-    }, H = {
+    }, q = {
       // Default variant
       "border-b-2 -mb-px": o === "default",
       // Pills variant
       "rounded-md": o === "pills",
       // Underline variant
       "border-b-2 pb-2": o === "underline"
-    }, G = {
-      "opacity-50 cursor-not-allowed": v.disabled,
-      "cursor-pointer": !v.disabled
-    }, q = S ? {
+    }, K = {
+      "opacity-50 cursor-not-allowed": N.disabled,
+      "cursor-pointer": !N.disabled
+    }, H = k ? {
       "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 ? {
+    } : {}, F = !k && !N.disabled ? {
       "border-transparent text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100": o === "default",
       "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, H, G, q, F);
+    return g(B, p, q, K, H, F);
   };
   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(
+    /* @__PURE__ */ e("div", { className: f, role: "tablist", children: r.map((N) => /* @__PURE__ */ e(
       "button",
       {
         type: "button",
         role: "tab",
-        "aria-selected": b === v.id,
-        "aria-controls": `tabpanel-${v.id}`,
-        disabled: v.disabled,
-        onClick: () => !v.disabled && m(v.id),
-        className: N(v, b === v.id),
+        "aria-selected": y === N.id,
+        "aria-controls": `tabpanel-${N.id}`,
+        disabled: N.disabled,
+        onClick: () => !N.disabled && u(N.id),
+        className: C(N, y === N.id),
         children: /* @__PURE__ */ c("span", { className: "flex items-center gap-2", children: [
-          v.label,
-          v.badge && /* @__PURE__ */ e("span", { className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300", children: v.badge })
+          N.label,
+          N.badge && /* @__PURE__ */ e("span", { className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300", children: N.badge })
         ] })
       },
-      v.id
+      N.id
     )) }),
     d?.content && /* @__PURE__ */ e(
       "div",
       {
         role: "tabpanel",
-        id: `tabpanel-${b}`,
-        "aria-labelledby": `tab-${b}`,
+        id: `tabpanel-${y}`,
+        "aria-labelledby": `tab-${y}`,
         className: "mt-4",
         children: d.content
       }
@@ -2246,39 +2246,39 @@ function wr({
   closeOnBackdropClick: o = !0,
   closeOnEscape: i = !0,
   className: h,
-  backdropClassName: g,
-  children: f,
-  footer: b,
-  showCloseButton: m = !0
+  backdropClassName: b,
+  children: x,
+  footer: y,
+  showCloseButton: u = !0
 }) {
   const l = X(null), d = X(null);
-  K(() => {
+  G(() => {
     if (!r || !i) return;
-    const N = (v) => {
-      v.key === "Escape" && n();
+    const C = (N) => {
+      N.key === "Escape" && n();
     };
-    return document.addEventListener("keydown", N), () => document.removeEventListener("keydown", N);
-  }, [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 = ""), () => {
+    return document.addEventListener("keydown", C), () => document.removeEventListener("keydown", C);
+  }, [r, i, n]), G(() => (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 && n();
+  const f = (C) => {
+    o && C.target === C.currentTarget && n();
   };
   return r ? /* @__PURE__ */ e(
     "div",
     {
-      className: x(
+      className: g(
         "fixed inset-0 z-50 flex items-center justify-center p-4",
         "bg-black/20",
         // 'animate-fade-in',
-        g
+        b
       ),
-      onClick: p,
+      onClick: f,
       children: /* @__PURE__ */ c(
         "div",
         {
           ref: l,
-          className: x(
+          className: g(
             "relative w-full bg-white dark:bg-secondary-800 rounded-modal shadow-modal rounded-md",
             // 'animate-scale-in',
             "focus:outline-none",
@@ -2290,7 +2290,7 @@ function wr({
           "aria-labelledby": t ? "modal-title" : void 0,
           tabIndex: -1,
           children: [
-            (t || m) && /* @__PURE__ */ c("div", { className: "flex items-center justify-between p-6 pb-0", children: [
+            (t || u) && /* @__PURE__ */ c("div", { className: "flex items-center justify-between p-6 pb-0", children: [
               t && /* @__PURE__ */ e(
                 "span",
                 {
@@ -2299,7 +2299,7 @@ function wr({
                   children: t
                 }
               ),
-              m && /* @__PURE__ */ e(
+              u && /* @__PURE__ */ e(
                 "button",
                 {
                   onClick: n,
@@ -2309,8 +2309,8 @@ function wr({
                 }
               )
             ] }),
-            /* @__PURE__ */ e("div", { className: "p-6", children: f }),
-            b && /* @__PURE__ */ e("div", { className: "px-6 py-4", children: b })
+            /* @__PURE__ */ e("div", { className: "p-6", children: x }),
+            y && /* @__PURE__ */ e("div", { className: "px-6 py-4", children: y })
           ]
         }
       )
@@ -2325,14 +2325,14 @@ const Z = ({
   align: o = "left",
   truncate: i = !1,
   italic: h = !1,
-  underline: g = !1,
-  lineHeight: f = "normal",
-  as: b,
-  className: m,
+  underline: b = !1,
+  lineHeight: x = "normal",
+  as: y,
+  className: u,
   children: l,
   ...d
 }) => {
-  const p = b || Cr(r), N = x(
+  const f = y || Cr(r), C = g(
     // Base styles
     "font-primary",
     // Variant styles
@@ -2380,19 +2380,19 @@ const Z = ({
     },
     // Line height (override variant line heights)
     r === "body" && {
-      "leading-tight": f === "tight",
-      "leading-normal": f === "normal",
-      "leading-relaxed": f === "relaxed"
+      "leading-tight": x === "tight",
+      "leading-normal": x === "normal",
+      "leading-relaxed": x === "relaxed"
     },
     // Text decorations
     {
       italic: h,
-      underline: g,
+      underline: b,
       truncate: i
     },
-    m
+    u
   );
-  return /* @__PURE__ */ e(p, { className: N, ...d, children: l });
+  return /* @__PURE__ */ e(f, { className: C, ...d, children: l });
 };
 function Cr(r) {
   return {
@@ -2410,36 +2410,36 @@ const Sr = ({
   error: o,
   disabled: i,
   accept: h,
-  onListFiles: g,
-  onListMounts: f,
-  onUploadFile: b,
-  onDownloadFile: m,
+  onListFiles: b,
+  onListMounts: x,
+  onUploadFile: y,
+  onDownloadFile: u,
   onRegisterFile: l
 }) => {
-  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(
+  const [d, f] = _(!1), [C, N] = _([]), [k, B] = _(null), [p, q] = _("/"), [K, H] = _([]), [F, E] = _(!1), [J, z] = _(""), [v, T] = _(
     typeof r == "object" ? r : null
-  ), [u, $] = V(!1), [L, D] = V(""), P = X(null);
-  K(() => {
+  ), [m, $] = _(!1), [L, D] = _(""), P = X(null);
+  G(() => {
     d && M();
-  }, [d]), K(() => {
-    d && S && re();
-  }, [d, S, k, J]);
+  }, [d]), G(() => {
+    d && k && re();
+  }, [d, k, p, J]);
   const M = async () => {
     E(!0);
     try {
-      const s = await f?.();
-      s?.data && v(s.data);
+      const s = await x?.();
+      s?.data && N(s.data);
     } catch (s) {
       console.error("Failed to load mounts", s);
     } finally {
       E(!1);
     }
   }, re = async () => {
-    if (S) {
+    if (k) {
       E(!0);
       try {
-        const s = await g?.({ mountId: S.id, name: J, path: k });
-        s?.data && q(s.data);
+        const s = await b?.({ mountId: k.id, name: J, path: p });
+        s?.data && H(s.data);
       } catch (s) {
         console.error("Failed to load files", s);
       } finally {
@@ -2462,7 +2462,7 @@ const Sr = ({
           providerKey: w.name,
           ownerId: "me"
         };
-        T(j), n(j, R), p(!1);
+        T(j), n(j, R), f(!1);
       } catch (O) {
         console.error("Local file selection failed", O);
       } finally {
@@ -2471,19 +2471,19 @@ const Sr = ({
     }
   }, W = async (s) => {
     const w = s.target.files?.[0];
-    if (!(!w || !S)) {
+    if (!(!w || !k)) {
       E(!0);
       try {
-        const O = await w.arrayBuffer(), R = await b?.({
+        const O = await w.arrayBuffer(), R = await y?.({
           file: new Uint8Array(O),
           filename: w.name,
           mimeType: w.type || "application/octet-stream",
-          mountId: S.id,
-          path: k
+          mountId: k.id,
+          path: p
         });
         if (R?.data) {
           const j = R.data;
-          T(j), n(j, new Uint8Array(O)), p(!1);
+          T(j), n(j, new Uint8Array(O)), f(!1);
         }
       } catch (O) {
         console.error("Upload failed", O);
@@ -2491,18 +2491,18 @@ const Sr = ({
         E(!1);
       }
     }
-  }, C = async () => {
-    if (!(!L || !S)) {
+  }, S = async () => {
+    if (!(!L || !k)) {
       E(!0);
       try {
-        const s = `${k}${L}/`;
+        const s = `${p}${L}/`;
         l && (await l({
           name: L,
           type: "folder",
-          path: k,
+          path: p,
           mimeType: "application/x-directory",
           size: 0,
-          mountId: S.id,
+          mountId: k.id,
           providerKey: s,
           ownerId: "me"
         }), await re()), $(!1), D("");
@@ -2515,33 +2515,33 @@ const Sr = ({
   }, I = async (s) => {
     E(!0);
     try {
-      const w = await m?.(s.id);
-      T(s), n(s, w), p(!1);
+      const w = await u?.(s.id);
+      T(s), n(s, w), f(!1);
     } catch (w) {
       console.error("Failed to download file", w);
     } finally {
       E(!1);
     }
-  }, _ = (s) => {
+  }, V = (s) => {
     s.stopPropagation(), T(null), n(null);
   }, A = ie(() => {
     const s = /* @__PURE__ */ new Set(), w = [];
-    return G.forEach((O) => {
+    return K.forEach((O) => {
       if (O.type === "folder") {
-        O.path === k && s.add(O.name);
+        O.path === p && s.add(O.name);
         return;
       }
-      const R = O.providerKey || O.name, Y = (k ? R.substring(k.length) : R).split("/").filter((fe) => fe !== "");
+      const R = O.providerKey || O.name, Y = (p ? R.substring(p.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((O, R) => O.name.localeCompare(R.name))
     };
-  }, [G, k]), Q = (s) => {
-    H((w) => `${w}${s}/`);
+  }, [K, p]), Q = (s) => {
+    q((w) => `${w}${s}/`);
   }, te = () => {
-    const s = k.split("/").filter((w) => w !== "");
-    s.pop(), s.length === 0 ? H("/") : H(`${s.join("/")}/`);
+    const s = p.split("/").filter((w) => w !== "");
+    s.pop(), s.length === 0 ? q("/") : q(`${s.join("/")}/`);
   }, U = ie(() => {
     const s = A.folders.map((w) => ({
       id: `folder-${w}`,
@@ -2563,12 +2563,12 @@ const Sr = ({
         /* @__PURE__ */ e(
           oe,
           {
-            icon: w.type === "folder" ? we : pe,
+            icon: w.type === "folder" ? we : xe,
             size: "sm",
             color: w.type === "folder" ? "warning" : "secondary"
           }
         ),
-        /* @__PURE__ */ e("span", { className: x(w.type === "folder" && "font-medium"), children: s })
+        /* @__PURE__ */ e("span", { className: g(w.type === "folder" && "font-medium"), children: s })
       ] })
     },
     {
@@ -2594,7 +2594,7 @@ const Sr = ({
           onClick: (O) => {
             O.stopPropagation(), w.type === "folder" ? Q(w.name) : I(w);
           },
-          loading: F && w.type === "file" && y?.id === w.id,
+          loading: F && w.type === "file" && v?.id === w.id,
           children: w.type === "folder" ? "Open" : "Select"
         }
       )
@@ -2622,20 +2622,20 @@ const Sr = ({
     /* @__PURE__ */ c(
       "div",
       {
-        onClick: () => !i && p(!0),
-        className: x(
+        onClick: () => !i && f(!0),
+        className: g(
           "flex items-center gap-3 px-3 py-2 border rounded-lg cursor-pointer transition-colors",
           "hover:border-primary-400 bg-white dark:bg-secondary-800",
           o ? "border-error" : "border-neutral-200 dark:border-neutral-700",
           i && "opacity-50 cursor-not-allowed bg-neutral-50"
         ),
         children: [
-          /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: /* @__PURE__ */ e(oe, { icon: y ? pe : Ne, color: y ? "primary" : "secondary" }) }),
-          /* @__PURE__ */ e("div", { className: "flex-grow truncate", children: y ? /* @__PURE__ */ e("span", { className: "text-sm text-neutral-900 dark:text-neutral-100 font-medium", children: y.name }) : /* @__PURE__ */ e("span", { className: "text-sm text-neutral-500", children: a }) }),
-          y && !i && /* @__PURE__ */ e(
+          /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: /* @__PURE__ */ e(oe, { icon: v ? xe : Ne, color: v ? "primary" : "secondary" }) }),
+          /* @__PURE__ */ e("div", { className: "flex-grow truncate", children: v ? /* @__PURE__ */ e("span", { className: "text-sm text-neutral-900 dark:text-neutral-100 font-medium", children: v.name }) : /* @__PURE__ */ e("span", { className: "text-sm text-neutral-500", children: a }) }),
+          v && !i && /* @__PURE__ */ e(
             "button",
             {
-              onClick: _,
+              onClick: V,
               className: "p-1 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded",
               children: /* @__PURE__ */ e(oe, { icon: Oe, size: "xs" })
             }
@@ -2649,9 +2649,9 @@ const Sr = ({
       {
         open: d,
         onClose: () => {
-          p(!1), B(null), H("/"), $(!1);
+          f(!1), B(null), q("/"), $(!1);
         },
-        title: S ? `Explorer: ${S.name}` : "Select Storage Mount",
+        title: k ? `Explorer: ${k.name}` : "Select Storage Mount",
         size: "lg",
         children: /* @__PURE__ */ e(
           kr,
@@ -2661,7 +2661,7 @@ const Sr = ({
               {
                 id: "remote",
                 label: "Platform Storage",
-                content: /* @__PURE__ */ e("div", { className: "space-y-4", children: S ? /* @__PURE__ */ c(Me, { children: [
+                content: /* @__PURE__ */ e("div", { className: "space-y-4", children: k ? /* @__PURE__ */ c(Me, { children: [
                   /* @__PURE__ */ c("div", { className: "flex flex-wrap items-center gap-2", children: [
                     /* @__PURE__ */ e(
                       ee,
@@ -2669,20 +2669,20 @@ const Sr = ({
                         variant: "ghost",
                         size: "sm",
                         onClick: () => {
-                          k && k !== "/" ? te() : B(null);
+                          p && p !== "/" ? te() : B(null);
                         },
                         leftIcon: /* @__PURE__ */ e(oe, { icon: Ee, size: "xs" }),
-                        children: k ? "Back" : "Back to Mounts"
+                        children: p ? "Back" : "Back to Mounts"
                       }
                     ),
-                    /* @__PURE__ */ e("div", { className: "flex items-center gap-1 text-xs text-neutral-500 overflow-hidden bg-neutral-100 dark:bg-neutral-800 px-2 py-1 rounded", children: /* @__PURE__ */ e("span", { className: "truncate", children: k }) }),
+                    /* @__PURE__ */ e("div", { className: "flex items-center gap-1 text-xs text-neutral-500 overflow-hidden bg-neutral-100 dark:bg-neutral-800 px-2 py-1 rounded", children: /* @__PURE__ */ e("span", { className: "truncate", children: p }) }),
                     /* @__PURE__ */ e("div", { className: "flex-grow min-w-[150px]", children: /* @__PURE__ */ e(
                       ue,
                       {
                         placeholder: "Search...",
                         value: J,
                         onChange: (s) => z(s.target.value),
-                        startIcon: /* @__PURE__ */ e(_e, { size: 14 }),
+                        startIcon: /* @__PURE__ */ e(Ve, { size: 14 }),
                         fullWidth: !0,
                         size: "sm"
                       }
@@ -2694,7 +2694,7 @@ const Sr = ({
                           variant: "outline",
                           size: "sm",
                           onClick: () => $(!0),
-                          leftIcon: /* @__PURE__ */ e(oe, { icon: Ve, size: "xs" }),
+                          leftIcon: /* @__PURE__ */ e(oe, { icon: _e, size: "xs" }),
                           children: "New Folder"
                         }
                       ),
@@ -2721,7 +2721,7 @@ const Sr = ({
                       )
                     ] })
                   ] }),
-                  u && /* @__PURE__ */ c("div", { className: "flex items-center gap-2 p-3 bg-neutral-50 dark:bg-neutral-900 rounded-lg border border-neutral-200 dark:border-neutral-700", children: [
+                  m && /* @__PURE__ */ c("div", { className: "flex items-center gap-2 p-3 bg-neutral-50 dark:bg-neutral-900 rounded-lg border border-neutral-200 dark:border-neutral-700", children: [
                     /* @__PURE__ */ e(oe, { icon: we, size: "sm", color: "warning" }),
                     /* @__PURE__ */ e(
                       ue,
@@ -2733,7 +2733,7 @@ const Sr = ({
                         autoFocus: !0
                       }
                     ),
-                    /* @__PURE__ */ e(ee, { size: "sm", onClick: C, loading: F, children: "Create" }),
+                    /* @__PURE__ */ e(ee, { size: "sm", onClick: S, loading: F, children: "Create" }),
                     /* @__PURE__ */ e(ee, { size: "sm", variant: "ghost", onClick: () => $(!1), children: "Cancel" })
                   ] }),
                   /* @__PURE__ */ e("div", { className: "max-h-[400px] overflow-auto rounded-lg border border-neutral-200 dark:border-neutral-700", children: /* @__PURE__ */ e(
@@ -2749,7 +2749,7 @@ const Sr = ({
                 ] }) : /* @__PURE__ */ e("div", { className: "max-h-[400px] overflow-auto rounded-lg border border-neutral-200 dark:border-neutral-700", children: /* @__PURE__ */ e(
                   Se,
                   {
-                    data: N,
+                    data: C,
                     columns: he,
                     loading: F,
                     emptyContent: "No storage mounts configured",
@@ -2761,7 +2761,7 @@ const Sr = ({
                 id: "local",
                 label: "Local File",
                 content: /* @__PURE__ */ e("div", { className: "space-y-6", children: /* @__PURE__ */ c("div", { className: "flex flex-col items-center justify-center py-12 border-2 border-dashed border-neutral-200 dark:border-neutral-700 rounded-xl bg-neutral-50 dark:bg-secondary-900/50", children: [
-                  /* @__PURE__ */ e("div", { className: "p-4 bg-primary/10 rounded-full mb-4", children: /* @__PURE__ */ e(oe, { icon: pe, size: "xl", color: "primary" }) }),
+                  /* @__PURE__ */ e("div", { className: "p-4 bg-primary/10 rounded-full mb-4", children: /* @__PURE__ */ e(oe, { icon: xe, size: "xl", color: "primary" }) }),
                   /* @__PURE__ */ e(Z, { variant: "label", size: "lg", weight: "semibold", children: "Select a file from your computer" }),
                   /* @__PURE__ */ c(Z, { variant: "body", size: "sm", className: "text-neutral-500 mt-1 mb-6 text-center max-w-xs", children: [
                     "This file will be used directly in the form and will ",
@@ -2769,7 +2769,7 @@ const Sr = ({
                     " be uploaded to platform storage."
                   ] }),
                   /* @__PURE__ */ c("label", { className: "cursor-pointer", children: [
-                    /* @__PURE__ */ c("div", { className: x(
+                    /* @__PURE__ */ c("div", { className: g(
                       "inline-flex items-center justify-center font-medium rounded-lg transition-colors duration-200 px-6 py-3 text-base bg-primary text-white hover:bg-primary-600",
                       F && "opacity-50 cursor-wait"
                     ), children: [
@@ -2809,8 +2809,8 @@ 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];
-    i[g] = f && typeof f == "object" ? Array.isArray(f) ? [...f] : { ...f } : {}, i = i[g];
+    const b = a[h], x = i[b];
+    i[b] = x && typeof x == "object" ? Array.isArray(x) ? [...x] : { ...x } : {}, i = i[b];
   }
   return i[a[a.length - 1]] = t, o;
 }
@@ -2832,23 +2832,23 @@ const rt = ({
   onChange: o,
   transform: i,
   validate: h,
-  submitButton: g = { label: "Submit", variant: "primary" },
-  cancelButton: f = { label: "Cancel", variant: "outline" },
-  showButtons: b = !0,
-  layout: m = "vertical",
+  submitButton: b = { label: "Submit", variant: "primary" },
+  cancelButton: x = { label: "Cancel", variant: "outline" },
+  showButtons: y = !0,
+  layout: u = "vertical",
   size: l = "md",
   loading: d = !1,
-  className: p,
-  ref: N,
-  sdk: v
+  className: f,
+  ref: C,
+  sdk: N
 }) => {
-  const [S, B] = V(n || {}), [k, H] = V({}), [G, q] = V({});
-  K(() => {
+  const [k, B] = _(n || {}), [p, q] = _({}), [K, H] = _({});
+  G(() => {
     n && B({ ...n });
   }, [n]);
   const F = ae(
-    (u, $, L) => {
-      const D = r.flatMap((P) => P.items).find((P) => P.name === u);
+    (m, $, L) => {
+      const D = r.flatMap((P) => P.items).find((P) => P.name === m);
       if (!D) return null;
       if (D.required && ($ == null || $ === ""))
         return `${D.label} is required`;
@@ -2862,13 +2862,13 @@ const rt = ({
           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`, M = !0;
-              else if (C.validator) {
-                const _ = C.validator(I, re);
-                _ && (W[C.name] = _, M = !0);
+            for (const S of D.arrayFields) {
+              const I = re?.[S.name];
+              if (S.required && (I == null || I === ""))
+                W[S.name] = `${S.label} is required`, M = !0;
+              else if (S.validator) {
+                const V = S.validator(I, re);
+                V && (W[S.name] = V, M = !0);
               }
             }
             P[ne] = W;
@@ -2880,54 +2880,54 @@ const rt = ({
     },
     [r]
   ), E = ae(
-    (u, $) => {
+    (m, $) => {
       let L = Lr(
-        S,
-        u,
+        k,
+        m,
         $
       );
-      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);
-      H((M) => ({
+      r.flatMap((M) => M.items).find((M) => M.name === m)?.removeIfEmpty && ($ == null || $ === "") && (L = Mr(L, m)), B(L), H((M) => ({ ...M, [m]: !0 }));
+      const P = F(m, $, L);
+      q((M) => ({
         ...M,
-        [u]: P || ""
-      })), o?.(L, u);
+        [m]: P || ""
+      })), o?.(L, m);
     },
-    [S, r, F, o]
+    [k, r, F, o]
   ), J = ae(
-    async (u) => {
-      if (console.log("handleSubmit"), u.preventDefault(), d) return;
+    async (m) => {
+      if (console.log("handleSubmit"), m.preventDefault(), d) return;
       const $ = {}, L = r.flatMap((P) => P.items);
       for (const P of L) {
-        if (P.hidden || P.conditional && !P.conditional(S))
+        if (P.hidden || P.conditional && !P.conditional(k))
           continue;
         const M = F(
           P.name,
-          Le(S, P.name),
-          S
+          Le(k, P.name),
+          k
         );
         M && ($[P.name] = M);
       }
       if (h) {
-        const P = h(S);
+        const P = h(k);
         P && Object.assign($, P);
       }
-      if (H($), console.log("newErrors", $), Object.keys($).some((P) => $[P]))
+      if (q($), console.log("newErrors", $), Object.keys($).some((P) => $[P]))
         return;
-      const D = i ? i(S) : S;
-      await t?.(S, D);
+      const D = i ? i(k) : k;
+      await t?.(k, D);
     },
-    [S, r, F, h, i, t, d]
+    [k, r, F, h, i, t, d]
   ), z = ae(
-    (u) => {
-      const $ = Le(S, u.name), L = G[u.name] ? k[u.name] : void 0, D = u.disabled || d, P = {
+    (m) => {
+      const $ = Le(k, m.name), L = K[m.name] ? p[m.name] : void 0, D = m.disabled || d, P = {
         value: $ || "",
         disabled: D,
-        required: u.required,
-        placeholder: u.placeholder,
-        ...u.fieldProps
+        required: m.required,
+        placeholder: m.placeholder,
+        ...m.fieldProps
       };
-      switch (u.type) {
+      switch (m.type) {
         case "text":
         case "email":
         case "password":
@@ -2938,9 +2938,9 @@ const rt = ({
             ue,
             {
               ...P,
-              onChange: (M) => E(u.name, M.target.value),
-              type: u.textType || u.type,
-              autoComplete: u.autocomplete,
+              onChange: (M) => E(m.name, M.target.value),
+              type: m.textType || m.type,
+              autoComplete: m.autocomplete,
               error: L,
               size: l
             }
@@ -2950,7 +2950,7 @@ const rt = ({
             ke,
             {
               ...P,
-              onChange: (M) => E(u.name, M.target.value),
+              onChange: (M) => E(m.name, M.target.value),
               rows: 4,
               error: L,
               size: l
@@ -2961,14 +2961,14 @@ const rt = ({
             ve,
             {
               ...P,
-              onChange: (M) => E(u.name, M),
-              options: (u.options || []).map((M) => ({
+              onChange: (M) => E(m.name, M),
+              options: (m.options || []).map((M) => ({
                 ...M,
                 value: String(M.value)
               })),
-              searchable: u.searchable,
-              multiple: u.multiple,
-              allowCreate: u.allowCreate,
+              searchable: m.searchable,
+              multiple: m.multiple,
+              allowCreate: m.allowCreate,
               error: L,
               size: l
             }
@@ -2979,20 +2979,20 @@ const rt = ({
             {
               ...P,
               checked: !!$,
-              onChange: (M) => E(u.name, M.target.checked),
+              onChange: (M) => E(m.name, M.target.checked),
               size: l
             }
           );
         case "radio":
-          return /* @__PURE__ */ e("div", { className: "space-y-1", children: u.options?.map((M) => /* @__PURE__ */ c("label", { className: "flex items-center gap-2", children: [
+          return /* @__PURE__ */ e("div", { className: "space-y-1", children: m.options?.map((M) => /* @__PURE__ */ c("label", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ e(
               "input",
               {
                 type: "radio",
-                name: u.name,
+                name: m.name,
                 value: M.value,
                 checked: $ === M.value,
-                onChange: () => E(u.name, M.value),
+                onChange: () => E(m.name, M.value),
                 disabled: D || M.disabled,
                 className: "rounded-full border-neutral-100 dark:border-neutral-600"
               }
@@ -3005,7 +3005,7 @@ const rt = ({
             {
               ...P,
               value: $ ? new Date($) : null,
-              onChange: (M) => E(u.name, M),
+              onChange: (M) => E(m.name, M),
               size: l
             }
           );
@@ -3015,27 +3015,27 @@ const rt = ({
             {
               ...P,
               value: $,
-              onChange: (M) => E(u.name, M),
+              onChange: (M) => E(m.name, M),
               error: L,
-              onListFiles: (M) => v?.http.invoke({
+              onListFiles: (M) => N?.http.invoke({
                 method: "POST",
                 action: "storage.file.list",
                 body: M
               }),
-              onListMounts: () => v?.http.invoke({
+              onListMounts: () => N?.http.invoke({
                 method: "GET",
                 action: "storage.mount"
               }),
-              onUploadFile: (M) => v?.http.invoke({
+              onUploadFile: (M) => N?.http.invoke({
                 method: "POST",
                 action: "storage.file.upload",
                 body: M
               }),
-              onDownloadFile: (M) => v?.http.invoke({
+              onDownloadFile: (M) => N?.http.invoke({
                 method: "GET",
                 action: `storage.file.${M}.download`
               }),
-              onRegisterFile: (M) => v?.http.invoke({
+              onRegisterFile: (M) => N?.http.invoke({
                 method: "POST",
                 action: "storage.file.folder",
                 body: M
@@ -3043,9 +3043,9 @@ const rt = ({
             }
           );
         case "custom":
-          return u.customComponent?.({
+          return m.customComponent?.({
             value: $,
-            onChange: (M) => E(u.name, M),
+            onChange: (M) => E(m.name, M),
             error: L,
             disabled: D
           });
@@ -3058,21 +3058,21 @@ const rt = ({
             } catch {
             }
           const ne = () => {
-            E(u.name, [...M, {}]);
+            E(m.name, [...M, {}]);
           }, W = (I) => {
             E(
-              u.name,
-              M.filter((_, A) => A !== I)
+              m.name,
+              M.filter((V, A) => A !== I)
             );
-          }, C = (I, _, A) => {
+          }, S = (I, V, A) => {
             const Q = [...M];
             Q[I] = {
               ...Q[I],
-              [_]: A
-            }, E(u.name, Q);
+              [V]: A
+            }, E(m.name, Q);
           };
           return /* @__PURE__ */ c("div", { className: "space-y-2", children: [
-            M.map((I, _) => /* @__PURE__ */ c(
+            M.map((I, V) => /* @__PURE__ */ c(
               "div",
               {
                 className: "p-4 border rounded-md dark:border-neutral-700 space-y-2 relative",
@@ -3083,13 +3083,13 @@ const rt = ({
                       type: "button",
                       variant: "ghost",
                       size: "sm",
-                      onClick: () => W(_),
+                      onClick: () => W(V),
                       disabled: D,
                       children: "Remove"
                     }
                   ) }),
-                  /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: u.arrayFields?.map((A) => {
-                    const Q = re?.[_]?.[A.name];
+                  /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: m.arrayFields?.map((A) => {
+                    const Q = re?.[V]?.[A.name];
                     return /* @__PURE__ */ c(
                       "div",
                       {
@@ -3126,8 +3126,8 @@ const rt = ({
                                   ue,
                                   {
                                     ...te,
-                                    onChange: (U) => C(
-                                      _,
+                                    onChange: (U) => S(
+                                      V,
                                       A.name,
                                       U.target.value
                                     ),
@@ -3142,8 +3142,8 @@ const rt = ({
                                   ke,
                                   {
                                     ...te,
-                                    onChange: (U) => C(
-                                      _,
+                                    onChange: (U) => S(
+                                      V,
                                       A.name,
                                       U.target.value
                                     ),
@@ -3157,8 +3157,8 @@ const rt = ({
                                   ve,
                                   {
                                     ...te,
-                                    onChange: (U) => C(
-                                      _,
+                                    onChange: (U) => S(
+                                      V,
                                       A.name,
                                       U
                                     ),
@@ -3181,8 +3181,8 @@ const rt = ({
                                   {
                                     ...te,
                                     checked: !!I?.[A.name],
-                                    onChange: (U) => C(
-                                      _,
+                                    onChange: (U) => S(
+                                      V,
                                       A.name,
                                       U.target.checked
                                     ),
@@ -3199,11 +3199,11 @@ const rt = ({
                                         "input",
                                         {
                                           type: "radio",
-                                          name: `${u.name}.${_}.${A.name}`,
+                                          name: `${m.name}.${V}.${A.name}`,
                                           value: U.value,
                                           checked: I?.[A.name] === U.value,
-                                          onChange: () => C(
-                                            _,
+                                          onChange: () => S(
+                                            V,
                                             A.name,
                                             U.value
                                           ),
@@ -3223,8 +3223,8 @@ const rt = ({
                                   {
                                     ...te,
                                     value: U ? new Date(U) : null,
-                                    onChange: (le) => C(
-                                      _,
+                                    onChange: (le) => S(
+                                      V,
                                       A.name,
                                       le
                                     ),
@@ -3235,8 +3235,8 @@ const rt = ({
                               case "custom":
                                 return A.customComponent?.({
                                   value: I?.[A.name],
-                                  onChange: (U) => C(
-                                    _,
+                                  onChange: (U) => S(
+                                    V,
                                     A.name,
                                     U
                                   ),
@@ -3268,7 +3268,7 @@ const rt = ({
                   }) })
                 ]
               },
-              _
+              V
             )),
             /* @__PURE__ */ c(
               ee,
@@ -3280,7 +3280,7 @@ const rt = ({
                 disabled: D,
                 children: [
                   "Add ",
-                  u.label
+                  m.label
                 ]
               }
             )
@@ -3290,26 +3290,26 @@ const rt = ({
           return null;
       }
     },
-    [S, G, k, d, l, E]
-  ), y = ae(
-    (u) => {
-      if (u.conditional && !u.conditional(S))
+    [k, K, p, d, l, E]
+  ), v = ae(
+    (m) => {
+      if (m.conditional && !m.conditional(k))
         return null;
-      const $ = u.items.filter((D) => !(D.hidden || D.conditional && !D.conditional(S)));
+      const $ = m.items.filter((D) => !(D.hidden || D.conditional && !D.conditional(k)));
       if ($.length === 0) return null;
-      const L = x(
+      const L = g(
         "space-y-2",
         {
-          "grid gap-2": u.layout === "grid",
-          "flex flex-wrap gap-2": u.layout === "flex"
+          "grid gap-2": m.layout === "grid",
+          "flex flex-wrap gap-2": m.layout === "flex"
         },
-        u.layout === "grid" && {
-          "grid-cols-1": !u.columns || u.columns === 1,
-          "grid-cols-2": u.columns === 2,
-          "grid-cols-3": u.columns === 3,
-          "grid-cols-4": u.columns === 4
+        m.layout === "grid" && {
+          "grid-cols-1": !m.columns || m.columns === 1,
+          "grid-cols-2": m.columns === 2,
+          "grid-cols-3": m.columns === 3,
+          "grid-cols-4": m.columns === 4
         },
-        u.className
+        m.className
       );
       return /* @__PURE__ */ c(
         "div",
@@ -3324,23 +3324,23 @@ const rt = ({
                   size: "lg",
                   weight: "semibold",
                   className: "text-neutral-900 dark:text-neutral-100",
-                  children: u.title
+                  children: m.title
                 }
               ),
-              u.description && /* @__PURE__ */ e(
+              m.description && /* @__PURE__ */ e(
                 Z,
                 {
                   variant: "body",
                   size: "sm",
                   className: "text-neutral-600 dark:text-neutral-400 mt-1",
-                  children: u.description
+                  children: m.description
                 }
               )
             ] }),
-            /* @__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(
+            /* @__PURE__ */ e("div", { className: "md:col-span-2", children: /* @__PURE__ */ e("div", { className: L, children: $.map((D) => (K[D.name] && p[D.name], /* @__PURE__ */ c(
               "div",
               {
-                className: x(
+                className: g(
                   "space-y-1",
                   D.width && typeof D.width == "string" && `w-[${D.width}]`,
                   D.width && typeof D.width == "number" && `col-span-${D.width}`
@@ -3365,11 +3365,11 @@ const rt = ({
             ))) }) })
           ]
         },
-        u.id
+        m.id
       );
     },
-    [S, G, k, z]
-  ), T = x(
+    [k, K, p, z]
+  ), T = g(
     "space-y-6",
     {
       "max-w-md": l === "sm",
@@ -3377,33 +3377,33 @@ const rt = ({
       "max-w-4xl": l === "lg",
       "max-w-full": l === "full"
     },
-    p
+    f
   );
-  return /* @__PURE__ */ c("form", { ref: N, onSubmit: J, className: T, children: [
-    /* @__PURE__ */ e("div", { className: "space-y-8", children: r.map(y) }),
-    b && /* @__PURE__ */ c("div", { className: x("flex gap-3 justify-end pt-8"), children: [
+  return /* @__PURE__ */ c("form", { ref: C, onSubmit: J, className: T, children: [
+    /* @__PURE__ */ e("div", { className: "space-y-8", children: r.map(v) }),
+    y && /* @__PURE__ */ c("div", { className: g("flex gap-3 justify-end pt-8"), children: [
       a && /* @__PURE__ */ e(
         ee,
         {
           type: "button",
-          variant: f.variant,
-          size: f.size || l,
-          disabled: f.disabled || d,
+          variant: x.variant,
+          size: x.size || l,
+          disabled: x.disabled || d,
           onClick: a,
-          className: f.className,
-          children: f.label
+          className: x.className,
+          children: x.label
         }
       ),
       /* @__PURE__ */ e(
         ee,
         {
           type: "submit",
-          variant: g.variant,
-          size: g.size || l,
-          disabled: g.disabled || d,
+          variant: b.variant,
+          size: b.size || l,
+          disabled: b.disabled || d,
           loading: d,
-          className: g.className,
-          children: g.label
+          className: b.className,
+          children: b.label
         }
       )
     ] })
@@ -3437,13 +3437,13 @@ function tt({
   dismissible: o = !1,
   onDismiss: i,
   className: h,
-  children: g,
-  ...f
+  children: b,
+  ...x
 }) {
   return /* @__PURE__ */ c(
     "span",
     {
-      className: x(
+      className: g(
         // Base styles
         "inline-flex items-center font-medium rounded-full",
         // Variant styles
@@ -3452,19 +3452,19 @@ function tt({
         $r[n],
         h
       ),
-      ...f,
+      ...x,
       children: [
         t && /* @__PURE__ */ e(
           "span",
           {
-            className: x(
+            className: g(
               "w-2 h-2 rounded-full mr-1.5",
               zr[r]
             )
           }
         ),
-        a && /* @__PURE__ */ e("span", { className: x("flex-shrink-0", g && "mr-1"), children: a }),
-        g,
+        a && /* @__PURE__ */ e("span", { className: g("flex-shrink-0", b && "mr-1"), children: a }),
+        b,
         o && i && /* @__PURE__ */ e(
           "button",
           {
@@ -3514,7 +3514,7 @@ function at({
   return /* @__PURE__ */ c(
     "div",
     {
-      className: x(
+      className: g(
         "inline-flex items-center",
         a ? "flex-col space-y-2" : "",
         o
@@ -3524,7 +3524,7 @@ function at({
         /* @__PURE__ */ c(
           "svg",
           {
-            className: x(
+            className: g(
               "animate-spin",
               Dr[r],
               Tr[n]
@@ -3559,7 +3559,7 @@ function at({
         a && /* @__PURE__ */ e(
           "span",
           {
-            className: x(
+            className: g(
               "text-secondary-600 dark:text-secondary-400",
               Ar[r]
             ),
@@ -3579,23 +3579,23 @@ const nt = ({
   radius: o = "md",
   showLoading: i = !0,
   showError: h = !0,
-  fallback: g,
-  loadingContent: f,
-  errorContent: b,
-  className: m,
+  fallback: b,
+  loadingContent: x,
+  errorContent: y,
+  className: u,
   onLoad: l,
   onError: d,
-  ...p
+  ...f
 }) => {
-  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) {
-      H(g), B(!1), v(!0);
+  const [C, N] = _(!0), [k, B] = _(!1), [p, q] = _(r), K = (T) => {
+    N(!1), B(!1), l?.(T);
+  }, H = (T) => {
+    if (N(!1), B(!0), b && p !== b) {
+      q(b), B(!1), N(!0);
       return;
     }
     d?.(T);
-  }, F = x(
+  }, F = g(
     "relative overflow-hidden bg-neutral-100 dark:bg-neutral-800",
     // Size variants
     {
@@ -3622,17 +3622,17 @@ const nt = ({
       "rounded-xl": o === "xl",
       "rounded-full": o === "full"
     },
-    m
-  ), E = x(
+    u
+  ), E = g(
     "w-full h-full object-cover transition-opacity duration-200",
     {
-      "opacity-0": N || S,
-      "opacity-100": !N && !S
+      "opacity-0": C || k,
+      "opacity-100": !C && !k
     }
-  ), J = x(
+  ), J = g(
     "absolute inset-0 flex items-center justify-center",
     "text-neutral-400 dark:text-neutral-500"
-  ), z = /* @__PURE__ */ e("div", { className: "animate-pulse", children: /* @__PURE__ */ e("div", { className: "w-6 h-6 bg-neutral-300 dark:bg-neutral-600 rounded" }) }), y = /* @__PURE__ */ c("div", { className: "text-center", children: [
+  ), z = /* @__PURE__ */ e("div", { className: "animate-pulse", children: /* @__PURE__ */ e("div", { className: "w-6 h-6 bg-neutral-300 dark:bg-neutral-600 rounded" }) }), v = /* @__PURE__ */ c("div", { className: "text-center", children: [
     /* @__PURE__ */ e(
       "svg",
       {
@@ -3657,16 +3657,16 @@ const nt = ({
     /* @__PURE__ */ e(
       "img",
       {
-        ...p,
-        src: k,
+        ...f,
+        src: p,
         alt: n,
         className: E,
-        onLoad: G,
-        onError: q
+        onLoad: K,
+        onError: H
       }
     ),
-    N && i && /* @__PURE__ */ e("div", { className: J, children: f || z }),
-    S && h && /* @__PURE__ */ e("div", { className: J, children: b || y })
+    C && i && /* @__PURE__ */ e("div", { className: J, children: x || z }),
+    k && h && /* @__PURE__ */ e("div", { className: J, children: y || v })
   ] });
 }, lt = ({
   title: r,
@@ -3676,101 +3676,101 @@ const nt = ({
   className: o,
   backLabel: i = "Back",
   backClassName: h,
-  onBack: g,
-  editable: f = !1,
-  onTitleChange: b
+  onBack: b,
+  editable: x = !1,
+  onTitleChange: y
 }) => {
-  const [m, l] = V(!1), [d, p] = V(r), N = X(null);
-  K(() => {
-    p(r);
-  }, [r]), K(() => {
-    m && N.current && (N.current.focus(), N.current.select());
-  }, [m]);
-  const v = () => {
-    f && l(!0);
-  }, S = () => {
-    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), l(!1));
+  const [u, l] = _(!1), [d, f] = _(r), C = X(null);
+  G(() => {
+    f(r);
+  }, [r]), G(() => {
+    u && C.current && (C.current.focus(), C.current.select());
+  }, [u]);
+  const N = () => {
+    x && l(!0);
+  }, k = () => {
+    l(!1), d.trim() !== "" && d !== r && y ? y(d.trim()) : f(r);
+  }, B = (p) => {
+    p.key === "Enter" ? C.current?.blur() : p.key === "Escape" && (f(r), l(!1));
   };
   return /* @__PURE__ */ c(
     "div",
     {
-      className: x(
+      className: g(
         "p-5 pb-3 border-b border-gray-100 dark:border-gray-700",
         o
       ),
       children: [
         /* @__PURE__ */ c("div", { className: "flex flex-col sm:flex-row sm:items-start sm:justify-between items-center gap-4", children: [
           /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ c("div", { className: "flex items-center gap-2 text-neutral-900 dark:text-neutral-100", children: [
-            g && /* @__PURE__ */ e(
+            b && /* @__PURE__ */ e(
               "button",
               {
                 type: "button",
-                onClick: g,
-                className: x(
+                onClick: b,
+                className: g(
                   "flex items-center text-sm dark:hover:text-neutral-300 cursor-pointer transition",
                   h
                 ),
                 children: /* @__PURE__ */ e(Ee, { size: 16, color: "currentColor" })
               }
             ),
-            m ? /* @__PURE__ */ e(
+            u ? /* @__PURE__ */ e(
               "input",
               {
-                ref: N,
+                ref: C,
                 type: "text",
                 value: d,
-                onChange: (k) => p(k.target.value),
-                onBlur: S,
+                onChange: (p) => f(p.target.value),
+                onBlur: k,
                 onKeyDown: B,
                 className: "text-1xl font-semibold bg-transparent border-b-1 border-gray-200 dark:border-gray-700 rounded-lg outline-none focus:border-none px-1 -mx-1 min-w-0 flex-1"
               }
             ) : /* @__PURE__ */ e(
               "h2",
               {
-                onClick: v,
-                className: x(
+                onClick: N,
+                className: g(
                   "text-2xl font-semibold truncate",
-                  f && "cursor-pointer hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+                  x && "cursor-pointer hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
                 ),
-                title: f ? "Klik om te bewerken" : void 0,
+                title: x ? "Klik om te bewerken" : void 0,
                 children: r
               }
             )
           ] }) }),
           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(
+            (p) => p.splitOptions && p.splitOptions.length > 0 ? /* @__PURE__ */ e(
               Ye,
               {
-                label: k.label,
-                onClick: k.onClick,
-                icon: k.icon,
-                variant: k.variant === "primary" ? "primary" : "secondary",
-                options: k.splitOptions,
-                disabled: k.disabled
+                label: p.label,
+                onClick: p.onClick,
+                icon: p.icon,
+                variant: p.variant === "primary" ? "primary" : "secondary",
+                options: p.splitOptions,
+                disabled: p.disabled
               },
-              k.id
+              p.id
             ) : /* @__PURE__ */ c(
               "button",
               {
                 type: "button",
-                onClick: (H) => {
-                  H.stopPropagation(), H.target.blur(), k.onClick();
+                onClick: (q) => {
+                  q.stopPropagation(), q.target.blur(), p.onClick();
                 },
-                disabled: k.disabled,
-                className: x("btn", {
-                  o__primary: k.variant === "primary",
-                  o__secondary: k.variant === "secondary" || k.variant === "outline",
-                  o__ghost: k.variant === "ghost",
-                  o__destructive: k.variant === "destructive"
+                disabled: p.disabled,
+                className: g("btn", {
+                  o__primary: p.variant === "primary",
+                  o__secondary: p.variant === "secondary" || p.variant === "outline",
+                  o__ghost: p.variant === "ghost",
+                  o__destructive: p.variant === "destructive"
                 }),
                 children: [
-                  k.icon && /* @__PURE__ */ e("span", { className: "mr-2", children: k.icon }),
-                  k.label
+                  p.icon && /* @__PURE__ */ e("span", { className: "mr-2", children: p.icon }),
+                  p.label
                 ]
               },
-              k.id
+              p.id
             )
           ) })
         ] }),
@@ -3791,27 +3791,27 @@ const st = ({
   size: t = "md",
   className: a
 }) => {
-  const o = (m) => {
-    if (!m) return "-";
+  const o = (u) => {
+    if (!u) return "-";
     try {
-      return new Date(m).toLocaleDateString("nl-NL", {
+      return new Date(u).toLocaleDateString("nl-NL", {
         year: "numeric",
         month: "long",
         day: "numeric"
       });
     } catch {
-      return String(m);
+      return String(u);
     }
-  }, 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 l = Ir(n, m.name);
-      if (m.type === "array") {
-        const p = l;
-        return !p || p.length === 0 ? /* @__PURE__ */ e(
+  }, i = (u) => u ? "Ja" : "Nee", h = (u, l) => {
+    if (!l) return String(u || "-");
+    const d = l.find((f) => f.value === u);
+    return d ? d.label : String(u || "-");
+  }, b = ae(
+    (u) => {
+      const l = Ir(n, u.name);
+      if (u.type === "array") {
+        const f = l;
+        return !f || f.length === 0 ? /* @__PURE__ */ e(
           Z,
           {
             variant: "body",
@@ -3819,7 +3819,7 @@ const st = ({
             className: "text-neutral-500 dark:text-neutral-400",
             children: "Geen items"
           }
-        ) : /* @__PURE__ */ e("div", { className: "space-y-3", children: p.map((N, v) => /* @__PURE__ */ c(
+        ) : /* @__PURE__ */ e("div", { className: "space-y-3", children: f.map((C, N) => /* @__PURE__ */ c(
           "div",
           {
             className: "p-4 border border-neutral-200 dark:border-neutral-700 rounded-lg space-y-3",
@@ -3832,53 +3832,53 @@ const st = ({
                   weight: "medium",
                   className: "text-neutral-700 dark:text-neutral-300",
                   children: [
-                    m.label,
+                    u.label,
                     " ",
-                    v + 1
+                    N + 1
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: m.arrayFields?.map((S) => {
-                const B = N?.[S.name];
-                let k = "-";
-                switch (S.type) {
+              /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: u.arrayFields?.map((k) => {
+                const B = C?.[k.name];
+                let p = "-";
+                switch (k.type) {
                   case "text":
                   case "email":
                   case "number":
                   case "tel":
                   case "url":
                   case "textarea":
-                    k = B || "-";
+                    p = B || "-";
                     break;
                   case "select":
                   case "radio":
-                    k = h(
+                    p = h(
                       B,
-                      S.options
+                      k.options
                     );
                     break;
                   case "checkbox":
-                    k = i(B);
+                    p = i(B);
                     break;
                   case "date":
-                    k = o(B);
+                    p = o(B);
                     break;
                   case "custom":
-                    k = S.customComponent?.({
+                    p = k.customComponent?.({
                       value: B
                     });
                     break;
                   default:
-                    k = String(B || "-");
+                    p = String(B || "-");
                 }
-                return S.format && (k = S.format(B, N)), /* @__PURE__ */ c("div", { className: "space-y-1", children: [
+                return k.format && (p = k.format(B, C)), /* @__PURE__ */ c("div", { className: "space-y-1", children: [
                   /* @__PURE__ */ e(
                     Z,
                     {
                       variant: "label",
                       size: "xs",
                       className: "text-neutral-600 dark:text-neutral-400",
-                      children: S.label
+                      children: k.label
                     }
                   ),
                   /* @__PURE__ */ e(
@@ -3887,32 +3887,32 @@ const st = ({
                       variant: "body",
                       size: "sm",
                       className: "text-neutral-900 dark:text-neutral-100",
-                      children: k
+                      children: p
                     }
                   )
-                ] }, S.name);
+                ] }, k.name);
               }) })
             ]
           },
-          v
+          N
         )) });
       }
-      if (m.type === "custom" && m.customComponent)
-        return m.customComponent({ value: l });
-      if (m.format) {
-        const p = m.format(l, n);
+      if (u.type === "custom" && u.customComponent)
+        return u.customComponent({ value: l });
+      if (u.format) {
+        const f = u.format(l, n);
         return /* @__PURE__ */ e(
           Z,
           {
             variant: "body",
             size: "sm",
             className: "text-neutral-900 dark:text-neutral-100",
-            children: p
+            children: f
           }
         );
       }
       let d = "-";
-      switch (m.type) {
+      switch (u.type) {
         case "text":
         case "email":
         case "password":
@@ -3926,7 +3926,7 @@ const st = ({
           break;
         case "select":
         case "radio":
-          d = h(l, m.options);
+          d = h(l, u.options);
           break;
         case "checkbox":
           d = i(l);
@@ -3948,25 +3948,25 @@ const st = ({
       );
     },
     [n]
-  ), f = ae(
-    (m) => {
-      if (m.conditional && !m.conditional(n))
+  ), x = ae(
+    (u) => {
+      if (u.conditional && !u.conditional(n))
         return null;
-      const l = m.items.filter((p) => !(p.hidden || p.conditional && !p.conditional(n)));
+      const l = u.items.filter((f) => !(f.hidden || f.conditional && !f.conditional(n)));
       if (l.length === 0) return null;
-      const d = x(
+      const d = g(
         "space-y-4",
         {
-          "grid gap-4": m.layout === "grid",
-          "flex flex-wrap gap-4": m.layout === "flex"
+          "grid gap-4": u.layout === "grid",
+          "flex flex-wrap gap-4": u.layout === "flex"
         },
-        m.layout === "grid" && {
-          "grid-cols-1": !m.columns || m.columns === 1,
-          "grid-cols-2": m.columns === 2,
-          "grid-cols-3": m.columns === 3,
-          "grid-cols-4": m.columns === 4
+        u.layout === "grid" && {
+          "grid-cols-1": !u.columns || u.columns === 1,
+          "grid-cols-2": u.columns === 2,
+          "grid-cols-3": u.columns === 3,
+          "grid-cols-4": u.columns === 4
         },
-        m.className
+        u.className
       );
       return /* @__PURE__ */ c(
         "div",
@@ -3981,49 +3981,49 @@ const st = ({
                   size: "lg",
                   weight: "semibold",
                   className: "text-neutral-900 dark:text-neutral-100",
-                  children: m.title
+                  children: u.title
                 }
               ),
-              m.description && /* @__PURE__ */ e(
+              u.description && /* @__PURE__ */ e(
                 Z,
                 {
                   variant: "body",
                   size: "sm",
                   className: "text-neutral-600 dark:text-neutral-400 mt-1",
-                  children: m.description
+                  children: u.description
                 }
               )
             ] }),
-            /* @__PURE__ */ e("div", { className: "md:col-span-2", children: /* @__PURE__ */ e("div", { className: d, children: l.map((p) => /* @__PURE__ */ c(
+            /* @__PURE__ */ e("div", { className: "md:col-span-2", children: /* @__PURE__ */ e("div", { className: d, children: l.map((f) => /* @__PURE__ */ c(
               "div",
               {
-                className: x(
+                className: g(
                   "space-y-1",
-                  p.width && typeof p.width == "string" && `w-[${p.width}]`,
-                  p.width && typeof p.width == "number" && `col-span-${p.width}`
+                  f.width && typeof f.width == "string" && `w-[${f.width}]`,
+                  f.width && typeof f.width == "number" && `col-span-${f.width}`
                 ),
                 children: [
-                  p.type !== "custom" && /* @__PURE__ */ e(
+                  f.type !== "custom" && /* @__PURE__ */ e(
                     Z,
                     {
                       variant: "label",
                       size: "sm",
                       className: "font-medium text-neutral-700 dark:text-neutral-300",
-                      children: p.label
+                      children: f.label
                     }
                   ),
-                  g(p)
+                  b(f)
                 ]
               },
-              p.name
+              f.name
             )) }) })
           ]
         },
-        m.id
+        u.id
       );
     },
-    [n, g]
-  ), b = x(
+    [n, b]
+  ), y = g(
     "space-y-6",
     {
       "max-w-md": t === "sm",
@@ -4033,21 +4033,21 @@ const st = ({
     },
     a
   );
-  return /* @__PURE__ */ e("div", { className: b, children: /* @__PURE__ */ e("div", { className: "space-y-8", children: r.map(f) }) });
+  return /* @__PURE__ */ e("div", { className: y, children: /* @__PURE__ */ e("div", { className: "space-y-8", children: r.map(x) }) });
 }, ze = ({ item: r, isSelectedHandler: n, onClick: t }) => {
-  const [a, o] = V(!1), i = r.children && r.children.length > 0, h = () => {
+  const [a, o] = _(!1), i = r.children && r.children.length > 0, h = () => {
     i && o(!a);
-  }, g = n ? n(r.path) : !1;
+  }, b = n ? n(r.path) : !1;
   return /* @__PURE__ */ c("li", { children: [
     /* @__PURE__ */ c(
       "div",
       {
-        className: x(
+        className: g(
           "flex flex-row w-full py-1 rounded-lg items-center h-8 transition-colors cursor-pointer px-3 pr-1 no-underline text-sm",
           {
-            "active-nav-item": g && !i,
-            "shadow-lvl-0": g && !i,
-            "font-semibold": g || i || r.children !== void 0
+            "active-nav-item": b && !i,
+            "shadow-lvl-0": b && !i,
+            "font-semibold": b || i || r.children !== void 0
           }
         ),
         onClick: () => {
@@ -4061,14 +4061,14 @@ const st = ({
         ]
       }
     ),
-    i && !a && /* @__PURE__ */ e("ul", { className: "sidebar-menu-nested-items mb-1", children: r.children?.map((f, b) => /* @__PURE__ */ e(
+    i && !a && /* @__PURE__ */ e("ul", { className: "sidebar-menu-nested-items mb-1", children: r.children?.map((x, y) => /* @__PURE__ */ e(
       ze,
       {
-        item: f,
+        item: x,
         isSelectedHandler: n,
         onClick: t
       },
-      b
+      y
     )) })
   ] });
 }, ot = ({
@@ -4081,18 +4081,18 @@ const st = ({
 }) => /* @__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: n?.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, b) => /* @__PURE__ */ e("span", { className: "sidebar-menu-action-icon", children: h }, b)) })
   ] }),
   i && /* @__PURE__ */ e("div", { className: "sidebar-menu-pre-items mb-4", children: i }),
   /* @__PURE__ */ e("ul", { children: t.map(
-    (h, g) => !h.path && !h.label && !h.children ? /* @__PURE__ */ e("span", { className: "flex w-full h-4" }, g) : /* @__PURE__ */ e(
+    (h, b) => !h.path && !h.label && !h.children ? /* @__PURE__ */ e("span", { className: "flex w-full h-4" }, b) : /* @__PURE__ */ e(
       ze,
       {
         item: h,
         isSelectedHandler: a,
         onClick: o
       },
-      g
+      b
     )
   ) })
 ] }), ct = ({
@@ -4103,21 +4103,21 @@ const st = ({
   align: o = "left",
   truncate: i = !1,
   className: h,
-  children: g,
-  ...f
+  children: b,
+  ...x
 }) => {
-  const b = n || jr(r), m = x(
+  const y = n || jr(r), u = g(
     "font-primary",
     // Size variants
     {
-      "text-xs": b === "xs",
-      "text-sm": b === "sm",
-      "text-base": b === "md",
-      "text-lg": b === "lg",
-      "text-xl": b === "xl",
-      "text-2xl": b === "2xl",
-      "text-3xl": b === "3xl",
-      "text-4xl": b === "4xl"
+      "text-xs": y === "xs",
+      "text-sm": y === "sm",
+      "text-base": y === "md",
+      "text-lg": y === "lg",
+      "text-xl": y === "xl",
+      "text-2xl": y === "2xl",
+      "text-3xl": y === "3xl",
+      "text-4xl": y === "4xl"
     },
     // Weight variants
     {
@@ -4151,7 +4151,7 @@ const st = ({
     },
     h
   ), l = `h${r}`;
-  return /* @__PURE__ */ e(l, { className: m, ...f, children: g });
+  return /* @__PURE__ */ e(l, { className: u, ...x, children: b });
 };
 function jr(r) {
   return {
@@ -4172,7 +4172,7 @@ const dt = ({
   className: i,
   itemClassName: h
 }) => {
-  const g = x(
+  const b = g(
     // Base styles
     "space-y-1",
     // Variant styles
@@ -4193,7 +4193,7 @@ const dt = ({
       "text-lg": a === "lg"
     },
     i
-  ), f = (l, d) => x(
+  ), x = (l, d) => g(
     // Base item styles
     "transition-colors duration-200",
     // Size-based padding
@@ -4212,39 +4212,39 @@ const dt = ({
       "opacity-50 cursor-not-allowed": !0
     },
     h
-  ), b = (l) => {
+  ), y = (l) => {
     o && !l.disabled && l.onClick && l.onClick();
-  }, m = (l, d) => {
+  }, u = (l, d) => {
     o && !d.disabled && (l.key === "Enter" || l.key === " ") && (l.preventDefault(), d.onClick?.());
   };
-  return n === "ordered" ? /* @__PURE__ */ e("ol", { className: g, children: r.map((l, d) => /* @__PURE__ */ e(
+  return n === "ordered" ? /* @__PURE__ */ e("ol", { className: b, children: r.map((l, d) => /* @__PURE__ */ e(
     "li",
     {
-      className: f(l),
-      onClick: () => b(l),
-      onKeyDown: (p) => m(p, l),
+      className: x(l),
+      onClick: () => y(l),
+      onKeyDown: (f) => u(f, l),
       tabIndex: o && !l.disabled ? 0 : void 0,
       role: o ? "button" : void 0,
       children: l.content
     },
     l.id || d
-  )) }) : n === "description" ? /* @__PURE__ */ e("dl", { className: g, children: r.map((l, d) => /* @__PURE__ */ e(
+  )) }) : n === "description" ? /* @__PURE__ */ e("dl", { className: b, children: r.map((l, d) => /* @__PURE__ */ e(
     "div",
     {
-      className: f(l),
-      onClick: () => b(l),
-      onKeyDown: (p) => m(p, l),
+      className: x(l),
+      onClick: () => y(l),
+      onKeyDown: (f) => u(f, l),
       tabIndex: o && !l.disabled ? 0 : void 0,
       role: o ? "button" : void 0,
       children: l.content
     },
     l.id || d
-  )) }) : /* @__PURE__ */ e("ul", { className: g, children: r.map((l, d) => /* @__PURE__ */ e(
+  )) }) : /* @__PURE__ */ e("ul", { className: b, children: r.map((l, d) => /* @__PURE__ */ e(
     "li",
     {
-      className: f(l),
-      onClick: () => b(l),
-      onKeyDown: (p) => m(p, l),
+      className: x(l),
+      onClick: () => y(l),
+      onKeyDown: (f) => u(f, l),
       tabIndex: o && !l.disabled ? 0 : void 0,
       role: o ? "button" : void 0,
       children: l.content
@@ -4259,40 +4259,42 @@ const dt = ({
   initialCommandPath: o,
   initialActiveIndex: i
 }) => {
-  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())
+  const [h, b] = _(""), [x, y] = _(o || []), [u, l] = _(i || 0), d = X(null), f = X(null), N = (x.length ? r.find((k) => k.id === x[0])?.subCommands || [] : r).filter(
+    (k) => k.label.toLowerCase().includes(h.toLowerCase())
   );
-  return K(() => {
-    n || (g(""), b(o || []), l(i || 0));
-  }, [n]), K(() => {
-    const v = (S) => {
+  return G(() => {
+    n || (b(""), y(o || []), l(i || 0));
+  }, [n]), G(() => {
+    const k = (B) => {
       if (n) {
-        if (S.key === "Escape")
+        if (B.key === "Escape")
           t();
-        else if (S.key === "ArrowUp")
+        else if (B.key === "ArrowUp")
           l(
-            (B) => B > 0 ? B - 1 : N.length - 1
+            (p) => p > 0 ? p - 1 : N.length - 1
           );
-        else if (S.key === "ArrowDown")
+        else if (B.key === "ArrowDown")
           l(
-            (B) => B < N.length - 1 ? B + 1 : 0
+            (p) => p < N.length - 1 ? p + 1 : 0
           );
-        else if (S.key === "Enter") {
-          const B = N[m];
-          B && (B.subCommands ? (b([...f, B.id]), l(0)) : B.action && (B.action(), t()));
+        else if (B.key === "Enter") {
+          const p = N[u];
+          p && (p.subCommands ? (y([...x, p.id]), l(0)) : p.action && (p.action(), t()));
         }
       }
     };
-    return document.addEventListener("keydown", v), () => document.removeEventListener("keydown", v);
-  }, [n, t, N, m, f]), K(() => {
-    const v = (S) => {
-      d.current && !d.current.contains(S.target) && t();
+    return document.addEventListener("keydown", k), () => document.removeEventListener("keydown", k);
+  }, [n, t, N, u, x]), G(() => {
+    const k = (B) => {
+      d.current && !d.current.contains(B.target) && t();
     };
-    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(
+    return n && document.addEventListener("mousedown", k), () => document.removeEventListener("mousedown", k);
+  }, [n, t]), n ? (G(() => {
+    f.current?.querySelector(`[data-index="${u}"]`)?.scrollIntoView({ block: "nearest" });
+  }, [u]), /* @__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",
+      className: "flex flex-col w-full max-w-lg max-h-[80vh] p-2 mx-auto rounded-lg shadow-lg bg-white",
       ref: d,
       children: [
         /* @__PURE__ */ e(
@@ -4301,29 +4303,37 @@ const dt = ({
             type: "text",
             placeholder: a?.searchPlaceholder || "Search commands...",
             value: h,
-            onChange: (v) => g(v.target.value),
-            className: "w-full px-4 py-2 text-gray-800 border-none border-b border-gray-200 focus:outline-none focus:ring-0 rounded-lg bg-transparent"
+            onChange: (k) => b(k.target.value),
+            className: "w-full px-4 py-2 text-gray-800 border-none border-b border-gray-200 focus:outline-none focus:ring-0 rounded-lg bg-transparent flex-shrink-0"
+          }
+        ),
+        /* @__PURE__ */ c(
+          "div",
+          {
+            ref: f,
+            className: "mt-2 pt-2 text-sm border-t border-gray-200 max-h-[50vh] overflow-y-auto",
+            children: [
+              N.length === 0 && /* @__PURE__ */ e("div", { className: "text-gray-500 text-center text-sm", children: a?.noCommandsFound || "No commands found" }),
+              N.map((k, B) => /* @__PURE__ */ c(
+                "div",
+                {
+                  "data-index": B,
+                  className: `flex items-center p-2 cursor-pointer rounded-md text-secondary-800 ${B === u ? "bg-gray-100" : ""}`,
+                  onClick: () => {
+                    k.subCommands ? (y([...x, k.id]), l(0)) : k.action && (k.action(), t());
+                  },
+                  onMouseEnter: () => l(B),
+                  children: [
+                    k.icon && /* @__PURE__ */ e("span", { className: "mr-3", children: k.icon }),
+                    /* @__PURE__ */ e("span", { className: "flex-grow", children: k.label }),
+                    k.subCommands && /* @__PURE__ */ e("span", { className: "text-gray-400", children: /* @__PURE__ */ e(Re, { className: "w-4 h-4" }) })
+                  ]
+                },
+                k.id
+              ))
+            ]
           }
         ),
-        /* @__PURE__ */ c("div", { className: "mt-2 pt-2 text-sm border-t border-gray-200", children: [
-          N.length === 0 && /* @__PURE__ */ e("div", { className: "text-gray-500 text-center text-sm", children: a?.noCommandsFound || "No commands found" }),
-          N.map((v, S) => /* @__PURE__ */ c(
-            "div",
-            {
-              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]), l(0)) : v.action && (v.action(), t());
-              },
-              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(Re, { className: "w-4 h-4" }) })
-              ]
-            },
-            v.id
-          ))
-        ] }),
         /* @__PURE__ */ c("div", { className: "flex items-center justify-between pt-2 mt-2 text-xs text-gray-500 border-t border-gray-200", children: [
           /* @__PURE__ */ c("span", { children: [
             /* @__PURE__ */ e("span", { className: "font-bold", children: "↑↓" }),
@@ -4343,7 +4353,7 @@ const dt = ({
         ] })
       ]
     }
-  ) }) : null;
+  ) })) : null;
 }, Br = {
   none: "p-0",
   xs: "p-1",
@@ -4372,14 +4382,14 @@ const dt = ({
   neutral: "bg-neutral",
   white: "bg-white",
   module: "bg-module"
-}, _r = {
+}, Vr = {
   none: "rounded-none",
   sm: "rounded-sm",
   md: "rounded-md",
   lg: "rounded-lg",
   xl: "rounded-xl",
   full: "rounded-full"
-}, Vr = {
+}, _r = {
   none: "shadow-none",
   sm: "shadow-sm shadow-lvl-0",
   md: "shadow-md shadow-lvl-0",
@@ -4410,25 +4420,25 @@ const dt = ({
     shadow: o,
     border: i,
     borderColor: h,
-    className: g,
-    children: f,
-    ...b
-  }, m) => /* @__PURE__ */ e(
+    className: b,
+    children: x,
+    ...y
+  }, u) => /* @__PURE__ */ e(
     "div",
     {
-      ref: m,
-      className: x(
+      ref: u,
+      className: g(
         r && Br[r],
         n && Pr[n],
         t && Or[t],
-        a && _r[a],
-        o && Vr[o],
+        a && Vr[a],
+        o && _r[o],
         i && Fr[i],
         h && Wr[h],
-        g
+        b
       ),
-      ...b,
-      children: f
+      ...y,
+      children: x
     }
   )
 );
@@ -4445,47 +4455,47 @@ function mt({
   componentProps: o,
   className: i
 }) {
-  const h = X(null), [g, f] = V(!0), [b, m] = V(null), l = X(null);
-  return X(null), K(() => {
+  const h = X(null), [b, x] = _(!0), [y, u] = _(null), l = X(null);
+  return X(null), G(() => {
     let d = !0;
     return (async () => {
-      f(!0);
+      x(!0);
       try {
-        const N = await n();
+        const C = await n();
         if (!d) return;
-        const v = N.component || N.default || N;
-        m(t === "react" ? () => v : () => N);
-      } catch (N) {
-        console.error(`[FederatedResource] Load failed: ${r}`, N);
+        const N = C.component || C.default || C;
+        u(t === "react" ? () => N : () => C);
+      } catch (C) {
+        console.error(`[FederatedResource] Load failed: ${r}`, C);
       } finally {
-        d && f(!1);
+        d && x(!1);
       }
     })(), () => {
       d = !1;
     };
-  }, [r, n]), K(() => {
-    if (g || !b || t === "react") return;
+  }, [r, n]), G(() => {
+    if (b || !y || 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 l.current = N, () => N.$destroy();
+        const f = y.default || y, C = new f({ target: d, props: o || {} });
+        return l.current = C, () => C.$destroy();
       }
-      if (b.mount) {
-        const p = b.mount({ container: d, props: o || {} });
+      if (y.mount) {
+        const f = y.mount({ container: d, props: o || {} });
         return () => {
-          typeof p == "function" ? p() : b.unmount?.(d);
+          typeof f == "function" ? f() : y.unmount?.(d);
         };
       }
     }
-  }, [b, t, g]), K(() => {
+  }, [y, t, b]), G(() => {
     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 })
+    b && a,
+    t === "react" && y && /* @__PURE__ */ e(y, { ...o })
   ] });
 }
-class ht extends qe {
+class ht extends He {
   constructor() {
     super(...arguments), this.state = {
       hasError: !1,
@@ -4550,7 +4560,7 @@ export {
   ue as TextField,
   Zr as VideoSurface,
   st as View,
-  x as cn,
+  g as cn,
   Kr as createSizes,
   Gr as createVariants
 };