@opencxh/ui-kit 3.134.0 → 3.136.0

package/dist/index.js

@@ -1,7 +1,7 @@
 import { clsx as We } from "clsx";
 import { jsxs as c, jsx as e, Fragment as xe } from "react/jsx-runtime";
 import { VideoOff as Ke, User as Ge, MicOff as Je, Mic as Ye, X as we, ChevronDown as ge, ExternalLink as Xe, Calendar as Ze, ChevronLeft as ke, ChevronRight as Ce, ChevronDownIcon as Qe, Loader2 as et, Search as Se, Check as Te, ChevronUp as tt, ChevronsLeft as rt, ChevronsRight as nt, FileText as Ee, HardDrive as _e, ArrowLeft as st, FolderPlus as at, Upload as lt, Folder as Ae, Trash2 as ot, Plus as ct, Sparkles as it, ImageOff as dt, Pencil as ut, ArrowUpRight as mt } from "lucide-react";
-import oe, { useRef as se, useEffect as Q, forwardRef as me, useState as B, useLayoutEffect as ft, useMemo as he, useCallback as ue, createContext as ht, Component as xt } from "react";
+import oe, { useRef as se, useEffect as Q, forwardRef as me, useState as R, useLayoutEffect as ft, useMemo as he, useCallback as ue, createContext as ht, Component as xt } from "react";
 import bt from "dompurify";
 import pt from "react-markdown";
 import gt from "remark-gfm";
@@ -112,15 +112,15 @@ const vt = {
     iconOnly: l = !1,
     shape: u = "default",
     className: m,
-    children: y,
-    disabled: h,
-    ...f
-  }, x) => {
-    const p = h || s;
+    children: N,
+    disabled: f,
+    ...h
+  }, b) => {
+    const p = f || s;
     return /* @__PURE__ */ c(
       "button",
       {
-        ref: x,
+        ref: b,
         type: "button",
         className: d(
           "inline-flex shrink-0 items-center justify-center gap-2 cursor-pointer font-semibold",
@@ -137,7 +137,7 @@ const vt = {
         ),
         disabled: p,
         "aria-busy": s || void 0,
-        ...f,
+        ...h,
         children: [
           s && /* @__PURE__ */ e(
             "span",
@@ -147,9 +147,9 @@ const vt = {
             }
           ),
           !s && a && /* @__PURE__ */ e("span", { className: "flex items-center justify-center shrink-0", children: a }),
-          !l && y,
+          !l && N,
           !s && o && /* @__PURE__ */ e("span", { className: "flex items-center justify-center shrink-0", children: o }),
-          l && !s && !a && !o && y
+          l && !s && !a && !o && N
         ]
       }
     );
@@ -206,7 +206,7 @@ const ln = ({
   "aria-label": l,
   ...u
 }) => {
-  const m = typeof r == "number" ? r : kt(r), y = d(
+  const m = typeof r == "number" ? r : kt(r), N = d(
     "inline-block shrink-0",
     wt[n],
     s && [
@@ -214,21 +214,21 @@ const ln = ({
       "focus-visible:outline-none focus-visible:focus-ring"
     ],
     o
-  ), h = {
+  ), f = {
     size: m,
     strokeWidth: 2,
-    className: y,
+    className: N,
     onClick: s ? a : void 0,
     "aria-label": l,
     "aria-hidden": l ? void 0 : !0,
     role: s ? "button" : void 0,
     tabIndex: s ? 0 : void 0,
-    onKeyDown: s ? (f) => {
-      (f.key === "Enter" || f.key === " ") && (f.preventDefault(), a?.());
+    onKeyDown: s ? (h) => {
+      (h.key === "Enter" || h.key === " ") && (h.preventDefault(), a?.());
     } : void 0,
     ...u
   };
-  return /* @__PURE__ */ e(t, { ...h });
+  return /* @__PURE__ */ e(t, { ...f });
 };
 function kt(t) {
   return {
@@ -256,11 +256,11 @@ function on({
   caret: l = !1,
   onClear: u,
   clearLabel: m = "Filter wissen",
-  onClick: y,
-  title: h,
-  className: f
+  onClick: N,
+  title: f,
+  className: h
 }) {
-  const x = o && !!u, p = s === "pill" ? "rounded-full" : "rounded-md", w = d(
+  const b = o && !!u, p = s === "pill" ? "rounded-full" : "rounded-md", C = d(
     // A button's default cursor is an arrow, so it has to be asked for.
     "inline-flex cursor-pointer select-none items-center text-sm font-semibold",
     a === "sm" ? "h-control-sm" : "h-control-md",
@@ -268,19 +268,19 @@ function on({
     p,
     // Picking a value outranks whatever the value happens to mean.
     o ? "bg-accent text-accent-fg" : d("border", Ct[n]),
-    f
+    h
   ), g = /* @__PURE__ */ c(xe, { children: [
     r,
     t,
     l && /* @__PURE__ */ e(Y, { icon: ge, size: "xs" })
-  ] }), b = d(
+  ] }), x = d(
     "inline-flex items-center gap-1.5 pl-3",
     p,
-    x ? "pr-1.5" : "pr-3",
+    b ? "pr-1.5" : "pr-3",
     "focus-visible:outline-none focus-visible:focus-ring"
   );
-  return x ? /* @__PURE__ */ c("span", { className: w, title: h, children: [
-    /* @__PURE__ */ e("button", { type: "button", onClick: y, className: b, children: g }),
+  return b ? /* @__PURE__ */ c("span", { className: C, title: f, children: [
+    /* @__PURE__ */ e("button", { type: "button", onClick: N, className: x, children: g }),
     /* @__PURE__ */ e(
       "button",
       {
@@ -291,7 +291,7 @@ function on({
         children: /* @__PURE__ */ e(Y, { icon: we, size: "xs" })
       }
     )
-  ] }) : /* @__PURE__ */ e("button", { type: "button", title: h, onClick: y, className: d(w, b), children: g });
+  ] }) : /* @__PURE__ */ e("button", { type: "button", title: f, onClick: N, className: d(C, x), children: g });
 }
 const St = {
   xs: "text-xs",
@@ -327,10 +327,10 @@ const St = {
   children: l,
   href: u,
   target: m,
-  rel: y,
-  ...h
+  rel: N,
+  ...f
 }) => {
-  const f = a || u && (u.startsWith("http") || u.startsWith("mailto:")), x = d(
+  const h = a || u && (u.startsWith("http") || u.startsWith("mailto:")), b = d(
     "inline-flex items-center gap-1 underline-offset-2",
     "transition-colors duration-fast ease-out",
     "focus-visible:outline-none focus-visible:focus-ring",
@@ -345,15 +345,15 @@ const St = {
     s && "pointer-events-none cursor-not-allowed text-text-disabled opacity-50",
     o
   ), p = {
-    ...h,
+    ...f,
     href: s ? void 0 : u,
-    target: f ? "_blank" : m,
-    rel: f ? "noopener noreferrer" : y,
+    target: h ? "_blank" : m,
+    rel: h ? "noopener noreferrer" : N,
     "aria-disabled": s || void 0
   };
-  return /* @__PURE__ */ c("a", { className: x, ...p, children: [
+  return /* @__PURE__ */ c("a", { className: b, ...p, children: [
     l,
-    f && /* @__PURE__ */ e(Xe, { className: "size-icon-sm shrink-0", "aria-hidden": !0 })
+    h && /* @__PURE__ */ e(Xe, { className: "size-icon-sm shrink-0", "aria-hidden": !0 })
   ] });
 }, Mt = {
   sm: "h-control-sm px-3 text-sm",
@@ -398,14 +398,14 @@ function dn({
   );
 }
 function ze(t, r, { gap: n = 6, matchWidth: s = !1, placement: a = "bottom-start" } = {}) {
-  const [o, l] = B({});
+  const [o, l] = R({});
   return ft(() => {
     if (!t) return;
     const u = () => {
       const m = r.current;
       if (!m) return;
-      const y = m.getBoundingClientRect(), h = window.innerHeight - y.bottom, f = y.top, x = a.startsWith("top"), p = x ? f < 200 && h > f : h < 200 && f > h, w = x !== p, g = { position: "fixed" };
-      w ? (g.bottom = window.innerHeight - y.top + n, g.maxHeight = Math.max(120, f - n * 2)) : (g.top = y.bottom + n, g.maxHeight = Math.max(120, h - n * 2)), a.endsWith("end") ? g.right = window.innerWidth - y.right : g.left = y.left, s && (g.width = y.width), l(g);
+      const N = m.getBoundingClientRect(), f = window.innerHeight - N.bottom, h = N.top, b = a.startsWith("top"), p = b ? h < 200 && f > h : f < 200 && h > f, C = b !== p, g = { position: "fixed" };
+      C ? (g.bottom = window.innerHeight - N.top + n, g.maxHeight = Math.max(120, h - n * 2)) : (g.top = N.bottom + n, g.maxHeight = Math.max(120, f - n * 2)), a.endsWith("end") ? g.right = window.innerWidth - N.right : g.left = N.left, s && (g.width = N.width), l(g);
     };
     return u(), window.addEventListener("scroll", u, !0), window.addEventListener("resize", u), () => {
       window.removeEventListener("scroll", u, !0), window.removeEventListener("resize", u);
@@ -422,26 +422,26 @@ const $t = ({
   disabled: l = !1,
   triggerLabel: u
 }) => {
-  const [m, y] = B(!1), h = se(null), f = se(null), x = ze(m, f, { placement: n });
+  const [m, N] = R(!1), f = se(null), h = se(null), b = ze(m, h, { placement: n });
   Q(() => {
     if (!m) return;
-    const g = (A) => {
-      h.current && !h.current.contains(A.target) && y(!1);
-    }, b = (A) => {
-      A.key === "Escape" && y(!1);
+    const g = (_) => {
+      f.current && !f.current.contains(_.target) && N(!1);
+    }, x = (_) => {
+      _.key === "Escape" && N(!1);
     };
-    return document.addEventListener("mousedown", g), document.addEventListener("keydown", b), () => {
-      document.removeEventListener("mousedown", g), document.removeEventListener("keydown", b);
+    return document.addEventListener("mousedown", g), document.addEventListener("keydown", x), () => {
+      document.removeEventListener("mousedown", g), document.removeEventListener("keydown", x);
     };
   }, [m]);
   const p = (g) => {
-    g.stopPropagation(), !l && y((b) => !b);
-  }, w = () => y(!1);
-  return /* @__PURE__ */ c("div", { ref: h, className: d("relative inline-flex", a), children: [
+    g.stopPropagation(), !l && N((x) => !x);
+  }, C = () => N(!1);
+  return /* @__PURE__ */ c("div", { ref: f, className: d("relative inline-flex", a), children: [
     /* @__PURE__ */ e(
       "button",
       {
-        ref: f,
+        ref: h,
         type: "button",
         onClick: p,
         disabled: l,
@@ -464,8 +464,8 @@ const $t = ({
           "fixed z-overlay overflow-y-auto rounded-lg border border-border bg-surface shadow-overlay",
           s
         ),
-        style: x,
-        children: typeof r == "function" ? r(w) : r
+        style: b,
+        children: typeof r == "function" ? r(C) : r
       }
     )
   ] });
@@ -477,7 +477,7 @@ const $t = ({
   sm: "h-control-sm w-7",
   md: "h-control-md w-8"
 };
-function Be({
+function Re({
   label: t,
   onClick: r,
   variant: n = "primary",
@@ -487,9 +487,9 @@ function Be({
   disabled: l = !1,
   loading: u = !1,
   menuPlacement: m = "bottom-end",
-  menuLabel: y = "More options"
+  menuLabel: N = "More options"
 }) {
-  const h = l || u, f = o.length > 0;
+  const f = l || u, h = o.length > 0;
   return /* @__PURE__ */ c("div", { className: d("inline-flex items-center", n === "primary" && "gap-0.5"), children: [
     /* @__PURE__ */ e(
       ne,
@@ -500,16 +500,16 @@ function Be({
         disabled: l,
         loading: u,
         leftIcon: a,
-        className: d(f && "rounded-r-none"),
+        className: d(h && "rounded-r-none"),
         children: t
       }
     ),
-    f && /* @__PURE__ */ e(
+    h && /* @__PURE__ */ e(
       $t,
       {
         placement: m,
-        disabled: h,
-        triggerLabel: y,
+        disabled: f,
+        triggerLabel: N,
         className: "min-w-menu py-1",
         trigger: /* @__PURE__ */ e(
           "span",
@@ -520,17 +520,17 @@ function Be({
               "transition-colors duration-fast ease-out",
               Dt[n],
               Tt[s],
-              h && "cursor-not-allowed opacity-50"
+              f && "cursor-not-allowed opacity-50"
             ),
             children: /* @__PURE__ */ e(ge, { className: "size-icon-md" })
           }
         ),
-        children: (x) => /* @__PURE__ */ e(xe, { children: o.map((p) => /* @__PURE__ */ c(
+        children: (b) => /* @__PURE__ */ e(xe, { children: o.map((p) => /* @__PURE__ */ c(
           "button",
           {
             type: "button",
             onClick: () => {
-              p.onClick(), x();
+              p.onClick(), b();
             },
             className: d(
               "flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm",
@@ -575,23 +575,23 @@ const _t = {
     labelClassName: l,
     className: u,
     id: m,
-    ...y
-  }, h) => {
-    const f = oe.useId(), x = m || `checkbox-${f}`, p = !!n, w = oe.useRef(null), g = oe.useCallback(
-      (b) => {
-        w.current = b, typeof h == "function" ? h(b) : h && typeof h == "object" && (h.current = b);
+    ...N
+  }, f) => {
+    const h = oe.useId(), b = m || `checkbox-${h}`, p = !!n, C = oe.useRef(null), g = oe.useCallback(
+      (x) => {
+        C.current = x, typeof f == "function" ? f(x) : f && typeof f == "object" && (f.current = x);
       },
-      [h]
+      [f]
     );
     return oe.useEffect(() => {
-      w.current && (w.current.indeterminate = a);
+      C.current && (C.current.indeterminate = a);
     }, [a]), /* @__PURE__ */ c("div", { className: d("flex flex-col", o), children: [
       /* @__PURE__ */ c("div", { className: d("flex items-center gap-3", At[s]), children: [
         /* @__PURE__ */ e(
           "input",
           {
             ref: g,
-            id: x,
+            id: b,
             type: "checkbox",
             "aria-invalid": p || void 0,
             className: d(
@@ -605,14 +605,14 @@ const _t = {
               p ? "border-danger-border" : "border-border-strong",
               u
             ),
-            ...y
+            ...N
           }
         ),
         t && /* @__PURE__ */ c("div", { className: "flex-1", children: [
           /* @__PURE__ */ e(
             "label",
             {
-              htmlFor: x,
+              htmlFor: b,
               className: d(
                 "cursor-pointer",
                 p ? "text-danger-fg" : "text-text",
@@ -640,47 +640,47 @@ const It = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
   className: l,
   minDate: u,
   maxDate: m,
-  format: y = "MM/dd/yyyy",
-  withTime: h = !1
-}, f) => {
-  const [x, p] = B(!1), [w, g] = B(() => t || /* @__PURE__ */ new Date()), b = se(null), A = se(null), _ = ze(x, A);
+  format: N = "MM/dd/yyyy",
+  withTime: f = !1
+}, h) => {
+  const [b, p] = R(!1), [C, g] = R(() => t || /* @__PURE__ */ new Date()), x = se(null), _ = se(null), E = ze(b, _);
   Q(() => {
     const i = (S) => {
-      b.current && !b.current.contains(S.target) && p(!1);
+      x.current && !x.current.contains(S.target) && p(!1);
     };
-    return x && document.addEventListener("mousedown", i), () => {
+    return b && document.addEventListener("mousedown", i), () => {
       document.removeEventListener("mousedown", i);
     };
-  }, [x]);
-  const K = (i) => {
+  }, [b]);
+  const W = (i) => {
     if (!i) return "";
-    const S = i.getDate().toString().padStart(2, "0"), N = (i.getMonth() + 1).toString().padStart(2, "0"), T = i.getFullYear(), k = y === "dd/MM/yyyy" ? `${S}/${N}/${T}` : y === "yyyy-MM-dd" ? `${T}-${N}-${S}` : `${N}/${S}/${T}`;
-    return h ? `${k} ${$(i)}` : k;
-  }, $ = (i) => `${i.getHours().toString().padStart(2, "0")}:${i.getMinutes().toString().padStart(2, "0")}`, X = (i) => {
-    const [S, N] = i.split(":").map(Number);
-    if (Number.isNaN(S) || Number.isNaN(N)) return;
-    const T = t ? new Date(t) : /* @__PURE__ */ new Date();
-    T.setHours(S, N, 0, 0), r?.(T);
+    const S = i.getDate().toString().padStart(2, "0"), y = (i.getMonth() + 1).toString().padStart(2, "0"), A = i.getFullYear(), w = N === "dd/MM/yyyy" ? `${S}/${y}/${A}` : N === "yyyy-MM-dd" ? `${A}-${y}-${S}` : `${y}/${S}/${A}`;
+    return f ? `${w} ${D(i)}` : w;
+  }, D = (i) => `${i.getHours().toString().padStart(2, "0")}:${i.getMinutes().toString().padStart(2, "0")}`, X = (i) => {
+    const [S, y] = i.split(":").map(Number);
+    if (Number.isNaN(S) || Number.isNaN(y)) return;
+    const A = t ? new Date(t) : /* @__PURE__ */ new Date();
+    A.setHours(S, y, 0, 0), r?.(A);
   }, U = () => {
-    const i = w.getFullYear(), S = w.getMonth(), N = new Date(i, S, 1), T = new Date(N);
-    T.setDate(T.getDate() - N.getDay());
-    const k = [], ee = new Date(T);
+    const i = C.getFullYear(), S = C.getMonth(), y = new Date(i, S, 1), A = new Date(y);
+    A.setDate(A.getDate() - y.getDay());
+    const w = [], ee = new Date(A);
     for (let ae = 0; ae < 42; ae++)
-      k.push(new Date(ee)), ee.setDate(ee.getDate() + 1);
-    return k;
+      w.push(new Date(ee)), ee.setDate(ee.getDate() + 1);
+    return w;
   }, I = (i) => {
-    if (i.getMonth() === w.getMonth() && !(u && i < u) && !(m && i > m)) {
-      if (h) {
-        const N = new Date(i);
-        N.setHours(t?.getHours() ?? 0, t?.getMinutes() ?? 0, 0, 0), r?.(N);
+    if (i.getMonth() === C.getMonth() && !(u && i < u) && !(m && i > m)) {
+      if (f) {
+        const y = new Date(i);
+        y.setHours(t?.getHours() ?? 0, t?.getMinutes() ?? 0, 0, 0), r?.(y);
         return;
       }
       r?.(i), p(!1);
     }
   }, q = () => {
-    g(new Date(w.getFullYear(), w.getMonth() - 1, 1));
-  }, W = () => {
-    g(new Date(w.getFullYear(), w.getMonth() + 1, 1));
+    g(new Date(C.getFullYear(), C.getMonth() - 1, 1));
+  }, K = () => {
+    g(new Date(C.getFullYear(), C.getMonth() + 1, 1));
   }, re = () => {
     r?.(null), p(!1);
   }, P = d(
@@ -696,7 +696,7 @@ const It = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
       "h-control-md w-full px-3 text-base": o === "full"
     },
     l
-  ), ce = U(), C = [
+  ), ce = U(), k = [
     "January",
     "February",
     "March",
@@ -710,19 +710,19 @@ const It = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
     "November",
     "December"
   ];
-  return /* @__PURE__ */ c("div", { ref: b, className: "relative", children: [
-    /* @__PURE__ */ c("div", { ref: A, className: "relative", children: [
+  return /* @__PURE__ */ c("div", { ref: x, className: "relative", children: [
+    /* @__PURE__ */ c("div", { ref: _, className: "relative", children: [
       /* @__PURE__ */ e(
         "input",
         {
-          ref: f,
+          ref: h,
           type: "text",
-          value: K(t ?? null),
+          value: W(t ?? null),
           placeholder: n,
           disabled: s,
           required: a,
           readOnly: !0,
-          onClick: () => !s && p(!x),
+          onClick: () => !s && p(!b),
           className: d(P, "pr-10 cursor-pointer")
         }
       ),
@@ -730,14 +730,14 @@ const It = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
         "button",
         {
           type: "button",
-          onClick: () => !s && p(!x),
+          onClick: () => !s && p(!b),
           disabled: s,
           className: "absolute inset-y-0 right-0 flex items-center pr-3 text-text-muted hover:text-text-muted",
           children: /* @__PURE__ */ e(It, {})
         }
       )
     ] }),
-    x && /* @__PURE__ */ c("div", { style: _, className: "fixed z-overlay overflow-auto rounded-lg border border-border bg-surface p-4 shadow-overlay min-w-panel", children: [
+    b && /* @__PURE__ */ c("div", { style: E, className: "fixed z-overlay overflow-auto rounded-lg border border-border bg-surface p-4 shadow-overlay min-w-panel", children: [
       /* @__PURE__ */ c("div", { className: "flex items-center justify-between mb-4", children: [
         /* @__PURE__ */ e(
           "button",
@@ -748,14 +748,14 @@ const It = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
           }
         ),
         /* @__PURE__ */ c("h3", { className: "text-sm font-medium text-text", children: [
-          C[w.getMonth()],
+          k[C.getMonth()],
           " ",
-          w.getFullYear()
+          C.getFullYear()
         ] }),
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: W,
+            onClick: K,
             className: "p-1 hover:bg-surface-hover rounded",
             children: /* @__PURE__ */ e(Pt, {})
           }
@@ -763,7 +763,7 @@ const It = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
       ] }),
       /* @__PURE__ */ e("div", { className: "grid grid-cols-7 gap-1 mb-2", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((i) => /* @__PURE__ */ e("div", { className: "text-xs font-medium text-text-muted text-center py-1", children: i }, i)) }),
       /* @__PURE__ */ e("div", { className: "grid grid-cols-7 gap-1", children: ce.map((i, S) => {
-        const N = i.getMonth() === w.getMonth(), T = t && i.toDateString() === t.toDateString(), k = i.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), ee = !N || u && i < u || m && i > m;
+        const y = i.getMonth() === C.getMonth(), A = t && i.toDateString() === t.toDateString(), w = i.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), ee = !y || u && i < u || m && i > m;
         return /* @__PURE__ */ e(
           "button",
           {
@@ -772,9 +772,9 @@ const It = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
             className: d(
               "w-8 h-8 text-sm rounded transition-colors duration-fast",
               {
-                "text-text hover:bg-surface-hover": N && !T && !ee,
-                "bg-accent text-accent-fg": T,
-                "bg-surface-hover text-text": k && !T,
+                "text-text hover:bg-surface-hover": y && !A && !ee,
+                "bg-accent text-accent-fg": A,
+                "bg-surface-hover text-text": w && !A,
                 "text-text-muted cursor-not-allowed": ee
               }
             ),
@@ -783,14 +783,14 @@ const It = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
           S
         );
       }) }),
-      h && /* @__PURE__ */ c("div", { className: "mt-3 flex items-center gap-2 border-t border-border pt-3", children: [
+      f && /* @__PURE__ */ c("div", { className: "mt-3 flex items-center gap-2 border-t border-border pt-3", children: [
         /* @__PURE__ */ e("label", { htmlFor: "datepicker-time", className: "text-sm text-text-muted", children: "Tijd" }),
         /* @__PURE__ */ e(
           "input",
           {
             id: "datepicker-time",
             type: "time",
-            value: t ? $(t) : "",
+            value: t ? D(t) : "",
             onChange: (i) => X(i.target.value),
             className: "h-control-sm rounded-md border border-border bg-surface-input px-2 text-sm text-text focus-visible:outline-none focus-visible:focus-ring"
           }
@@ -832,70 +832,70 @@ const It = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
     options: l,
     placeholder: u,
     containerClassName: m,
-    labelClassName: y,
-    className: h,
-    id: f,
-    searchable: x,
+    labelClassName: N,
+    className: f,
+    id: h,
+    searchable: b,
     multiple: p,
-    value: w,
+    value: C,
     onChange: g,
-    allowCreate: b,
-    onCreateOption: A,
-    ..._
-  }, K) => {
-    const $ = f || `select-${Math.random().toString(36).substr(2, 9)}`, X = !!n, [U, I] = oe.useState(!1), [q, W] = oe.useState(""), re = oe.useRef(null), P = oe.useRef(null), ce = ze(U, P, { matchWidth: !0 }), [C, i] = oe.useState(l);
-    oe.useImperativeHandle(K, () => re.current), oe.useEffect(() => {
-      const E = (D) => {
-        re.current && !re.current.contains(D.target) && I(!1);
+    allowCreate: x,
+    onCreateOption: _,
+    ...E
+  }, W) => {
+    const D = h || `select-${Math.random().toString(36).substr(2, 9)}`, X = !!n, [U, I] = oe.useState(!1), [q, K] = oe.useState(""), re = oe.useRef(null), P = oe.useRef(null), ce = ze(U, P, { matchWidth: !0 }), [k, i] = oe.useState(l);
+    oe.useImperativeHandle(W, () => re.current), oe.useEffect(() => {
+      const M = (T) => {
+        re.current && !re.current.contains(T.target) && I(!1);
       };
-      return document.addEventListener("mousedown", E), () => document.removeEventListener("mousedown", E);
+      return document.addEventListener("mousedown", M), () => document.removeEventListener("mousedown", M);
     }, []);
     const S = oe.useCallback(
-      (E, D) => E.some(
-        (z) => ye(z.value) === ye(D) || ye(z.label) === ye(D)
+      (M, T) => M.some(
+        (z) => ye(z.value) === ye(T) || ye(z.label) === ye(T)
       ),
       []
-    ), N = oe.useCallback(
-      (E, D) => {
-        const z = [...E], R = (F) => {
+    ), y = oe.useCallback(
+      (M, T) => {
+        const z = [...M], B = (F) => {
           const H = (F ?? "").trim();
           H && (S(z, H) || z.push({ value: H, label: H }));
         };
-        return Array.isArray(D) ? D.forEach(R) : R(D), z;
+        return Array.isArray(T) ? T.forEach(B) : B(T), z;
       },
       [S]
     );
     oe.useEffect(() => {
-      i((E) => {
-        const D = [...l];
-        return E.forEach((z) => {
-          !S(D, z.value) && !S(D, z.label) && D.push(z);
-        }), N(D, w);
+      i((M) => {
+        const T = [...l];
+        return M.forEach((z) => {
+          !S(T, z.value) && !S(T, z.label) && T.push(z);
+        }), y(T, C);
       });
-    }, [l, w, N, S]);
-    const T = (E) => {
+    }, [l, C, y, S]);
+    const A = (M) => {
       if (p) {
-        const D = Array.isArray(w) ? w : [], z = D.includes(E) ? D.filter((R) => R !== E) : [...D, E];
+        const T = Array.isArray(C) ? C : [], z = T.includes(M) ? T.filter((B) => B !== M) : [...T, M];
         g?.(z);
       } else
-        g?.(E), I(!1), W("");
-    }, k = p ? null : C.find((E) => E.value === w), ee = p ? C.filter(
-      (E) => Array.isArray(w) && w.includes(E.value)
-    ) : [], ae = x && q ? C.filter(
-      (E) => E.label.toLowerCase().includes(q.toLowerCase())
-    ) : C, le = !!b && !!x && !!q.trim() && !S(C, q), G = (E) => {
-      const D = E.trim();
-      if (!D) return;
-      const z = A?.(D) ?? {
-        value: D,
-        label: D
+        g?.(M), I(!1), K("");
+    }, w = p ? null : k.find((M) => M.value === C), ee = p ? k.filter(
+      (M) => Array.isArray(C) && C.includes(M.value)
+    ) : [], ae = b && q ? k.filter(
+      (M) => M.label.toLowerCase().includes(q.toLowerCase())
+    ) : k, le = !!x && !!b && !!q.trim() && !S(k, q), G = (M) => {
+      const T = M.trim();
+      if (!T) return;
+      const z = _?.(T) ?? {
+        value: T,
+        label: T
       };
-      if (S(C, z.value) || S(C, z.label)) {
-        T(z.value), W(""), p || I(!1);
+      if (S(k, z.value) || S(k, z.label)) {
+        A(z.value), K(""), p || I(!1);
         return;
       }
-      i((R) => [...R, z]), T(z.value), W(""), p || I(!1);
-    }, j = () => p ? ee.length > 0 ? ee.map((E) => E.label).join(", ") : u || "Select options" : k?.label || u || "Select an option";
+      i((B) => [...B, z]), A(z.value), K(""), p || I(!1);
+    }, j = () => p ? ee.length > 0 ? ee.map((M) => M.label).join(", ") : u || "Select options" : w?.label || u || "Select an option";
     return /* @__PURE__ */ c(
       "div",
       {
@@ -905,17 +905,17 @@ const It = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
           a && "w-full",
           m
         ),
-        ..._,
+        ...E,
         children: [
           t && /* @__PURE__ */ e(
             "label",
             {
-              htmlFor: $,
+              htmlFor: D,
               onClick: () => I(!U),
               className: d(
                 "block text-xs font-semibold uppercase tracking-label mb-1.5",
                 X ? "text-danger-fg" : "text-text-muted",
-                y
+                N
               ),
               children: t
             }
@@ -926,7 +926,7 @@ const It = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
               {
                 ref: P,
                 type: "button",
-                id: $,
+                id: D,
                 disabled: o,
                 onClick: () => I(!U),
                 className: d(
@@ -936,7 +936,7 @@ const It = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
                   "bg-surface",
                   Ot[s],
                   X ? "border-danger-border text-danger-fg focus-visible:focus-ring" : "border-border text-text",
-                  h
+                  f
                 ),
                 children: [
                   /* @__PURE__ */ e("span", { className: "truncate flex-1 min-w-0", children: j() }),
@@ -954,15 +954,15 @@ const It = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
               }
             ),
             U && /* @__PURE__ */ c("div", { style: ce, className: "fixed z-overlay flex flex-col overflow-hidden rounded-lg border border-border bg-surface shadow-overlay", children: [
-              x && /* @__PURE__ */ e("div", { className: "p-2", children: /* @__PURE__ */ e(
+              b && /* @__PURE__ */ e("div", { className: "p-2", children: /* @__PURE__ */ e(
                 "input",
                 {
                   type: "text",
                   placeholder: "Search...",
                   value: q,
-                  onChange: (E) => W(E.target.value),
-                  onKeyDown: (E) => {
-                    E.key === "Enter" && le && (E.preventDefault(), G(q));
+                  onChange: (M) => K(M.target.value),
+                  onKeyDown: (M) => {
+                    M.key === "Enter" && le && (M.preventDefault(), G(q));
                   },
                   className: d(
                     "w-full px-3 py-2 text-sm rounded-md border",
@@ -996,32 +996,32 @@ const It = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
                     children: u
                   }
                 ),
-                ae.map((E) => {
-                  const D = p ? Array.isArray(w) && w.includes(E.value) : w === E.value;
+                ae.map((M) => {
+                  const T = p ? Array.isArray(C) && C.includes(M.value) : C === M.value;
                   return /* @__PURE__ */ e(
                     "li",
                     {
-                      onClick: () => !E.disabled && T(E.value),
+                      onClick: () => !M.disabled && A(M.value),
                       className: d(
                         "cursor-pointer px-3 py-1.5 text-sm",
                         "text-text",
-                        E.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-surface-hover",
-                        D && "bg-accent-soft text-accent font-semibold"
+                        M.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-surface-hover",
+                        T && "bg-accent-soft text-accent font-semibold"
                       ),
                       children: /* @__PURE__ */ c("div", { className: "flex items-center", children: [
                         p && /* @__PURE__ */ e(
                           "input",
                           {
                             type: "checkbox",
-                            checked: D,
+                            checked: T,
                             readOnly: !0,
                             className: "mr-3 h-4 w-4 rounded border-border [&:not(:checked)]:bg-surface-input text-accent "
                           }
                         ),
-                        /* @__PURE__ */ e("span", { children: E.label })
+                        /* @__PURE__ */ e("span", { children: M.label })
                       ] })
                     },
-                    E.value
+                    M.value
                   );
                 })
               ] })
@@ -1048,7 +1048,7 @@ const Ft = {
   md: "h-control-md px-3 text-base",
   lg: "h-control-lg px-3 text-base",
   full: "h-control-md px-3 text-base"
-}, Re = "mb-1.5 block text-xs font-semibold uppercase tracking-label", be = me(
+}, Be = "mb-1.5 block text-xs font-semibold uppercase tracking-label", be = me(
   ({
     label: t,
     helperText: r,
@@ -1059,21 +1059,21 @@ const Ft = {
     endIcon: l,
     loading: u = !1,
     containerClassName: m,
-    labelClassName: y,
-    className: h,
-    id: f,
-    ...x
+    labelClassName: N,
+    className: f,
+    id: h,
+    ...b
   }, p) => {
-    const w = oe.useId(), g = f || `textfield-${w}`, b = !!n, A = n || r ? `${g}-description` : void 0;
+    const C = oe.useId(), g = h || `textfield-${C}`, x = !!n, _ = n || r ? `${g}-description` : void 0;
     return /* @__PURE__ */ c("div", { className: d("flex flex-col", a && "w-full", m), children: [
       t && /* @__PURE__ */ e(
         "label",
         {
           htmlFor: g,
           className: d(
-            Re,
-            b ? "text-danger-fg" : "text-text-subtle",
-            y
+            Be,
+            x ? "text-danger-fg" : "text-text-subtle",
+            N
           ),
           children: t
         }
@@ -1085,8 +1085,8 @@ const Ft = {
           {
             ref: p,
             id: g,
-            "aria-invalid": b || void 0,
-            "aria-describedby": A,
+            "aria-invalid": x || void 0,
+            "aria-describedby": _,
             className: d(
               "block w-full rounded-md border bg-surface-input text-text",
               "transition-colors duration-fast ease-out",
@@ -1096,10 +1096,10 @@ const Ft = {
               Ft[s],
               o && "pl-9",
               (l || u) && "pr-9",
-              b ? "border-danger-border bg-danger-soft" : "border-border hover:border-border-strong",
-              h
+              x ? "border-danger-border bg-danger-soft" : "border-border hover:border-border-strong",
+              f
             ),
-            ...x
+            ...b
           }
         ),
         (l || u) && /* @__PURE__ */ e("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 text-text-muted", children: u ? /* @__PURE__ */ e(
@@ -1113,8 +1113,8 @@ const Ft = {
       (n || r) && /* @__PURE__ */ e(
         "p",
         {
-          id: A,
-          className: d("mt-1 text-xs", b ? "text-danger-fg" : "text-text-subtle"),
+          id: _,
+          className: d("mt-1 text-xs", x ? "text-danger-fg" : "text-text-subtle"),
           children: n || r
         }
       )
@@ -1122,7 +1122,7 @@ const Ft = {
   }
 );
 be.displayName = "TextField";
-function Bt({
+function Rt({
   value: t,
   onChange: r,
   onListFolders: n,
@@ -1132,27 +1132,27 @@ function Bt({
   templatePlaceholder: l,
   showTemplate: u = !0
 }) {
-  const [m, y] = B([]);
+  const [m, N] = R([]);
   Q(() => {
-    let f = !0;
-    return Promise.resolve(n?.()).then((x) => {
-      f && x && y(x.data ?? []);
+    let h = !0;
+    return Promise.resolve(n?.()).then((b) => {
+      h && b && N(b.data ?? []);
     }).catch(() => {
     }), () => {
-      f = !1;
+      h = !1;
     };
   }, []);
-  const h = t ?? {};
+  const f = t ?? {};
   return /* @__PURE__ */ c("div", { className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ e(
       Ne,
       {
         size: a,
         fullWidth: !0,
-        value: h.folderId ?? "",
-        options: m.map((f) => ({ value: f.id, label: f.name })),
+        value: f.folderId ?? "",
+        options: m.map((h) => ({ value: h.id, label: h.name })),
         placeholder: o ?? "Select a folder",
-        onChange: (f) => r?.({ ...h, folderId: f })
+        onChange: (h) => r?.({ ...f, folderId: h })
       }
     ),
     u && /* @__PURE__ */ e(
@@ -1160,14 +1160,14 @@ function Bt({
       {
         size: a,
         disabled: s ?? !1,
-        value: h.pathTemplate ?? "",
+        value: f.pathTemplate ?? "",
         placeholder: l ?? "Sub-path e.g. {yyyy}/{mm}/{dd} (optional)",
-        onChange: (f) => r?.({ ...h, pathTemplate: f.target.value })
+        onChange: (h) => r?.({ ...f, pathTemplate: h.target.value })
       }
     )
   ] });
 }
-const fe = (...t) => t.filter(Boolean).join(" "), Rt = (t) => /* @__PURE__ */ e(Se, { ...t, strokeWidth: 1.5, "aria-hidden": !0 }), Ht = (t) => /* @__PURE__ */ e(ge, { ...t, strokeWidth: 1.5, "aria-hidden": !0 }), Vt = {
+const fe = (...t) => t.filter(Boolean).join(" "), Bt = (t) => /* @__PURE__ */ e(Se, { ...t, strokeWidth: 1.5, "aria-hidden": !0 }), Ht = (t) => /* @__PURE__ */ e(ge, { ...t, strokeWidth: 1.5, "aria-hidden": !0 }), Vt = {
   sm: "h-control-sm px-3 text-sm",
   md: "h-control-md px-3 text-base",
   lg: "h-control-lg px-3 text-base",
@@ -1184,64 +1184,64 @@ const fe = (...t) => t.filter(Boolean).join(" "), Rt = (t) => /* @__PURE__ */ e(
     error: n,
     size: s = "md",
     fullWidth: a = !1,
-    startIcon: o = /* @__PURE__ */ e(Rt, {}),
+    startIcon: o = /* @__PURE__ */ e(Bt, {}),
     loading: l = !1,
     containerClassName: u,
     labelClassName: m,
-    className: y,
-    id: h,
-    options: f,
-    onRemoteSearch: x,
+    className: N,
+    id: f,
+    options: h,
+    onRemoteSearch: b,
     onSelect: p,
-    debounceTime: w = 500,
+    debounceTime: C = 500,
     showAllOnOpen: g = !1,
-    value: b,
-    onChange: A,
-    ..._
-  }, K) => {
-    const $ = h || `searchfield-${Math.random().toString(36).substr(2, 9)}`, X = !!n, U = se(null), I = se(null), [q, W] = B(b || ""), [re, P] = B(!1), [ce, C] = B(!1), [i, S] = B(!1);
+    value: x,
+    onChange: _,
+    ...E
+  }, W) => {
+    const D = f || `searchfield-${Math.random().toString(36).substr(2, 9)}`, X = !!n, U = se(null), I = se(null), [q, K] = R(x || ""), [re, P] = R(!1), [ce, k] = R(!1), [i, S] = R(!1);
     Q(() => {
-      b !== void 0 && W(b);
-    }, [b]);
-    const N = he(() => {
-      if (g && !i || !q) return f;
+      x !== void 0 && K(x);
+    }, [x]);
+    const y = he(() => {
+      if (g && !i || !q) return h;
       const j = String(q).toLowerCase();
-      return f.filter(
-        (E) => String(E.label).toLowerCase().includes(j)
+      return h.filter(
+        (M) => String(M.label).toLowerCase().includes(j)
       );
-    }, [q, f, g, i]);
+    }, [q, h, g, i]);
     Q(() => {
-      if (!x || !q) {
-        C(!1);
+      if (!b || !q) {
+        k(!1);
         return;
       }
       const j = setTimeout(async () => {
-        C(!0);
+        k(!0);
         try {
-          await x(String(q));
-        } catch (E) {
-          console.error("Remote search failed:", E);
+          await b(String(q));
+        } catch (M) {
+          console.error("Remote search failed:", M);
         } finally {
-          C(!1);
+          k(!1);
         }
-      }, w);
+      }, C);
       return () => {
-        clearTimeout(j), C(!1);
+        clearTimeout(j), k(!1);
       };
-    }, [q, w, x]), Q(() => {
-      const j = (E) => {
-        U.current && !U.current.contains(E.target) && P(!1);
+    }, [q, C, b]), Q(() => {
+      const j = (M) => {
+        U.current && !U.current.contains(M.target) && P(!1);
       };
       return document.addEventListener("mousedown", j), () => document.removeEventListener("mousedown", j);
     }, []);
-    const T = (j) => {
-      const E = j.target.value;
-      W(E), P(!0), S(!0), A && A(j);
-    }, k = (j) => {
-      W(j.label), P(!1), S(!1), p && p(j.value);
+    const A = (j) => {
+      const M = j.target.value;
+      K(M), P(!0), S(!0), _ && _(j);
+    }, w = (j) => {
+      K(j.label), P(!1), S(!1), p && p(j.value);
     }, ee = () => {
-      (f.length > 0 || x) && (P(!0), S(!1));
-    }, ae = l || ce, le = re && (N.length > 0 || ae), G = he(() => K || I, [K]);
+      (h.length > 0 || b) && (P(!0), S(!1));
+    }, ae = l || ce, le = re && (y.length > 0 || ae), G = he(() => W || I, [W]);
     return /* @__PURE__ */ c(
       "div",
       {
@@ -1256,7 +1256,7 @@ const fe = (...t) => t.filter(Boolean).join(" "), Rt = (t) => /* @__PURE__ */ e(
           t && /* @__PURE__ */ e(
             "label",
             {
-              htmlFor: $,
+              htmlFor: D,
               className: fe(
                 "block text-sm font-medium mb-1",
                 X ? "text-danger-fg" : "text-text",
@@ -1271,9 +1271,9 @@ const fe = (...t) => t.filter(Boolean).join(" "), Rt = (t) => /* @__PURE__ */ e(
               "input",
               {
                 ref: G,
-                id: $,
+                id: D,
                 value: q,
-                onChange: T,
+                onChange: A,
                 onFocus: ee,
                 className: fe(
                   // Base styles
@@ -1288,9 +1288,9 @@ const fe = (...t) => t.filter(Boolean).join(" "), Rt = (t) => /* @__PURE__ */ e(
                   // Altijd padding rechts voor de dropdown/loading icon
                   // State styles
                   X ? "border-danger-border text-danger-fg focus-visible:focus-ring" : "border-border text-text",
-                  y || ""
+                  N || ""
                 ),
-                ..._
+                ...E
               }
             ),
             /* @__PURE__ */ e("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: ae || l ? (
@@ -1324,11 +1324,11 @@ const fe = (...t) => t.filter(Boolean).join(" "), Rt = (t) => /* @__PURE__ */ e(
             {
               className: "absolute z-10 mt-1 w-full bg-surface border border-border rounded-lg shadow-lg max-h-60 overflow-auto top-full",
               role: "listbox",
-              children: N.length > 0 ? N.map((j) => /* @__PURE__ */ e(
+              children: y.length > 0 ? y.map((j) => /* @__PURE__ */ e(
                 "li",
                 {
                   className: "px-4 py-2 cursor-pointer text-text hover:bg-accent-soft hover:text-accent transition-colors",
-                  onClick: () => k(j),
+                  onClick: () => w(j),
                   role: "option",
                   "aria-selected": q === j.label,
                   children: j.label
@@ -1347,7 +1347,7 @@ const fe = (...t) => t.filter(Boolean).join(" "), Rt = (t) => /* @__PURE__ */ e(
               children: n || r
             }
           ),
-          x && /* @__PURE__ */ c("p", { className: "mt-2 text-xs text-success-fg", children: [
+          b && /* @__PURE__ */ c("p", { className: "mt-2 text-xs text-success-fg", children: [
             "Huidige zoekterm (niet-gedebounced): ",
             String(q)
           ] })
@@ -1447,12 +1447,12 @@ function Wt({
         {
           className: "grid gap-2 border-t border-border-subtle p-3",
           style: { gridTemplateColumns: `repeat(${s}, minmax(0, 1fr))` },
-          children: Array.from({ length: s }).map((m, y) => /* @__PURE__ */ e(
+          children: Array.from({ length: s }).map((m, N) => /* @__PURE__ */ e(
             "div",
             {
               className: "h-4 w-full rounded-sm bg-surface-hover"
             },
-            `cell-${u}-${y}`
+            `cell-${u}-${N}`
           ))
         },
         `row-${u}`
@@ -1471,66 +1471,66 @@ const Kt = ({
   showCheck: u = !0,
   header: m
 }) => {
-  const [y, h] = B(!1), [f, x] = B(null), [p, w] = B({ top: 0, left: 0 }), g = se(null), b = se(null), A = se(null), _ = se(null), K = ze(y, b, { placement: a }), $ = se(null), X = () => Array.from(
-    _.current?.querySelectorAll("button[data-option-value]:not(:disabled)") ?? []
+  const [N, f] = R(!1), [h, b] = R(null), [p, C] = R({ top: 0, left: 0 }), g = se(null), x = se(null), _ = se(null), E = se(null), W = ze(N, x, { placement: a }), D = se(null), X = () => Array.from(
+    E.current?.querySelectorAll("button[data-option-value]:not(:disabled)") ?? []
   );
   Q(() => {
-    y && X()[0]?.focus();
-  }, [y]);
+    N && X()[0]?.focus();
+  }, [N]);
   const U = (i) => {
     if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(i.key)) return;
-    const N = X();
-    if (N.length === 0) return;
+    const y = X();
+    if (y.length === 0) return;
     i.preventDefault();
-    const T = N.indexOf(document.activeElement), k = i.key === "Home" ? 0 : i.key === "End" ? N.length - 1 : i.key === "ArrowDown" ? (T + 1) % N.length : (T - 1 + N.length) % N.length;
-    N[k]?.focus();
+    const A = y.indexOf(document.activeElement), w = i.key === "Home" ? 0 : i.key === "End" ? y.length - 1 : i.key === "ArrowDown" ? (A + 1) % y.length : (A - 1 + y.length) % y.length;
+    y[w]?.focus();
   };
   Q(() => {
     const i = (S) => {
-      g.current && (!g.current.contains(S.target) || A.current && !A.current.contains(S.target)) && (h(!1), x(null), $.current && (clearTimeout($.current), $.current = null));
+      g.current && (!g.current.contains(S.target) || _.current && !_.current.contains(S.target)) && (f(!1), b(null), D.current && (clearTimeout(D.current), D.current = null));
     };
-    return y && document.addEventListener("mousedown", i), () => {
+    return N && document.addEventListener("mousedown", i), () => {
       document.removeEventListener("mousedown", i);
     };
-  }, [y]), Q(() => {
+  }, [N]), Q(() => {
     const i = (S) => {
-      S.key === "Escape" && (h(!1), x(null), b.current?.focus(), $.current && (clearTimeout($.current), $.current = null));
+      S.key === "Escape" && (f(!1), b(null), x.current?.focus(), D.current && (clearTimeout(D.current), D.current = null));
     };
-    return y && document.addEventListener("keydown", i), () => {
+    return N && document.addEventListener("keydown", i), () => {
       document.removeEventListener("keydown", i);
     };
-  }, [y]), Q(() => {
-    if (f && g.current) {
+  }, [N]), Q(() => {
+    if (h && g.current) {
       const i = g.current.querySelector(
-        `[data-option-value="${f}"]`
+        `[data-option-value="${h}"]`
       );
       if (i) {
         const S = i.getBoundingClientRect();
-        w({
+        C({
           top: S.top,
           left: S.right + 8
         });
       }
     }
-  }, [f]), Q(() => () => {
-    $.current && clearTimeout($.current);
+  }, [h]), Q(() => () => {
+    D.current && clearTimeout(D.current);
   }, []);
   const I = (i) => {
-    i.stopPropagation(), !o && (h(!y), x(null), $.current && (clearTimeout($.current), $.current = null));
-  }, q = (i, S, N) => {
-    i.stopPropagation(), !S.disabled && !S.divider && (!S.children || S.children.length === 0) && (s?.(S.value, N), h(!1), x(null));
-  }, W = (i) => {
-    $.current && (clearTimeout($.current), $.current = null), i.children && i.children.length > 0 ? x(i.value) : x(null);
+    i.stopPropagation(), !o && (f(!N), b(null), D.current && (clearTimeout(D.current), D.current = null));
+  }, q = (i, S, y) => {
+    i.stopPropagation(), !S.disabled && !S.divider && (!S.children || S.children.length === 0) && (s?.(S.value, y), f(!1), b(null));
+  }, K = (i) => {
+    D.current && (clearTimeout(D.current), D.current = null), i.children && i.children.length > 0 ? b(i.value) : b(null);
   }, re = (i) => {
-    i.children && i.children.length > 0 ? $.current = setTimeout(() => {
-      x(null);
-    }, 150) : x(null);
-  }, P = (i, S, N) => {
-    i.stopPropagation(), !S.disabled && !S.divider && (s?.(S.value, N), h(!1), x(null));
+    i.children && i.children.length > 0 ? D.current = setTimeout(() => {
+      b(null);
+    }, 150) : b(null);
+  }, P = (i, S, y) => {
+    i.stopPropagation(), !S.disabled && !S.divider && (s?.(S.value, y), f(!1), b(null));
   }, ce = d(
     "fixed z-overlay min-w-menu bg-surface rounded-lg shadow-overlay border border-border",
     "max-h-60 overflow-auto"
-  ), C = d(
+  ), k = d(
     "fixed z-overlay min-w-menu bg-surface rounded-lg shadow-overlay border border-border",
     "max-h-60 overflow-auto"
   );
@@ -1546,18 +1546,18 @@ const Kt = ({
         /* @__PURE__ */ e(
           "button",
           {
-            ref: b,
+            ref: x,
             onClick: I,
             disabled: o,
             "aria-haspopup": "menu",
-            "aria-expanded": y,
+            "aria-expanded": N,
             className: d("inline-flex items-center justify-center", {
               "opacity-50 cursor-not-allowed": o
             }),
             children: t
           }
         ),
-        y && /* @__PURE__ */ e("div", { ref: _, className: ce, style: K, onKeyDown: U, children: /* @__PURE__ */ c("div", { className: "p-2", role: "menu", children: [
+        N && /* @__PURE__ */ e("div", { ref: E, className: ce, style: W, onKeyDown: U, children: /* @__PURE__ */ c("div", { className: "p-2", role: "menu", children: [
           m && (typeof m == "string" ? /* @__PURE__ */ e("div", { className: "text-xs font-medium text-text-muted uppercase tracking-label px-3 py-2", children: m }) : m),
           r.map((i, S) => {
             if (i.divider)
@@ -1568,23 +1568,23 @@ const Kt = ({
                 },
                 `divider-${S}`
               );
-            const N = i.children && i.children.length > 0, T = f === i.value;
+            const y = i.children && i.children.length > 0, A = h === i.value;
             return /* @__PURE__ */ c("div", { className: "relative group", children: [
               /* @__PURE__ */ c(
                 "button",
                 {
                   "data-option-value": i.value,
                   role: "menuitem",
-                  "aria-haspopup": N ? "menu" : void 0,
-                  onClick: (k) => q(k, i),
-                  onMouseEnter: () => W(i),
+                  "aria-haspopup": y ? "menu" : void 0,
+                  onClick: (w) => q(w, i),
+                  onMouseEnter: () => K(i),
                   onMouseLeave: () => re(i),
                   disabled: i.disabled,
                   className: d(
                     "flex w-full items-center justify-between rounded-md px-3 py-1.5 text-sm text-text transition-colors duration-fast ease-out hover:bg-surface-hover focus-visible:outline-none focus-visible:focus-ring",
                     {
                       "opacity-50 cursor-not-allowed": i.disabled,
-                      "bg-surface-hover": T && N
+                      "bg-surface-hover": A && y
                     }
                   ),
                   children: [
@@ -1597,30 +1597,30 @@ const Kt = ({
                     ] }),
                     /* @__PURE__ */ c("div", { className: "flex items-center space-x-2", children: [
                       u && n === i.value && /* @__PURE__ */ e(Te, { className: "size-icon-md shrink-0 text-success-fg", "aria-hidden": !0 }),
-                      N && /* @__PURE__ */ e("span", { className: "text-text-muted text-xs", children: "▶" })
+                      y && /* @__PURE__ */ e("span", { className: "text-text-muted text-xs", children: "▶" })
                     ] })
                   ]
                 }
               ),
-              N && T && /* @__PURE__ */ e(
+              y && A && /* @__PURE__ */ e(
                 "div",
                 {
-                  ref: A,
-                  className: C,
+                  ref: _,
+                  className: k,
                   style: {
                     top: `${p.top}px`,
                     left: `${p.left}px`
                   },
                   onMouseEnter: () => {
-                    $.current && (clearTimeout($.current), $.current = null), x(i.value);
+                    D.current && (clearTimeout(D.current), D.current = null), b(i.value);
                   },
                   onMouseLeave: () => {
-                    $.current = setTimeout(() => {
-                      x(null);
+                    D.current = setTimeout(() => {
+                      b(null);
                     }, 150);
                   },
-                  children: /* @__PURE__ */ e("div", { className: "p-2", children: i.children.map((k, ee) => {
-                    if (k.divider)
+                  children: /* @__PURE__ */ e("div", { className: "p-2", children: i.children.map((w, ee) => {
+                    if (w.divider)
                       return /* @__PURE__ */ e(
                         "div",
                         {
@@ -1629,35 +1629,35 @@ const Kt = ({
                         `divider-${ee}`
                       );
                     const ae = typeof n == "object" && n[i.value] && n[i.value].includes(
-                      k.value
-                    ) || n === k.value;
+                      w.value
+                    ) || n === w.value;
                     return /* @__PURE__ */ c(
                       "button",
                       {
                         onClick: (le) => P(
                           le,
-                          k,
+                          w,
                           i.value
                         ),
-                        disabled: k.disabled,
+                        disabled: w.disabled,
                         className: d(
                           "flex w-full items-center justify-between rounded-md px-3 py-1.5 text-sm text-text transition-colors duration-fast ease-out hover:bg-surface-hover",
                           {
-                            "opacity-50 cursor-not-allowed": k.disabled
+                            "opacity-50 cursor-not-allowed": w.disabled
                           }
                         ),
                         children: [
                           /* @__PURE__ */ c("div", { className: "flex items-center space-x-2 min-w-0", children: [
-                            k.icon && /* @__PURE__ */ e("span", { className: "flex-shrink-0", children: k.icon }),
+                            w.icon && /* @__PURE__ */ e("span", { className: "flex-shrink-0", children: w.icon }),
                             /* @__PURE__ */ c("div", { className: "flex flex-col items-start min-w-0", children: [
-                              /* @__PURE__ */ e("span", { className: "font-base truncate", children: k.label }),
-                              k.description && /* @__PURE__ */ e("span", { className: "text-xs text-text-muted", children: k.description })
+                              /* @__PURE__ */ e("span", { className: "font-base truncate", children: w.label }),
+                              w.description && /* @__PURE__ */ e("span", { className: "text-xs text-text-muted", children: w.description })
                             ] })
                           ] }),
                           u && ae && /* @__PURE__ */ e(Te, { className: "size-icon-md shrink-0 text-success-fg", "aria-hidden": !0 })
                         ]
                       },
-                      k.value
+                      w.value
                     );
                   }) })
                 }
@@ -1665,10 +1665,10 @@ const Kt = ({
             ] }, i.value);
           }),
           (() => {
-            const i = r.reduce((S, N) => {
-              if (N.divider) return S;
-              const T = N.children ? N.children.filter((k) => !k.divider).length : 0;
-              return S + 1 + T;
+            const i = r.reduce((S, y) => {
+              if (y.divider) return S;
+              const A = y.children ? y.children.filter((w) => !w.divider).length : 0;
+              return S + 1 + A;
             }, 0);
             return i > 1 && /* @__PURE__ */ e("div", { className: "border-t border-border mt-2 pt-2", children: /* @__PURE__ */ c("div", { className: "text-xs text-text-muted px-3 py-1", children: [
               i,
@@ -1746,28 +1746,28 @@ const Kt = ({
   paginated: l = !1,
   pageSizeOptions: u = [10, 25, 50, 100],
   defaultPageSize: m = 10,
-  actions: y = [],
-  onRowClick: h,
-  selectable: f = !1,
-  selectedRows: x = [],
+  actions: N = [],
+  onRowClick: f,
+  selectable: h = !1,
+  selectedRows: b = [],
   onSelectionChange: p,
-  getRowKey: w = (I, q) => q,
+  getRowKey: C = (I, q) => q,
   emptyContent: g,
-  hoverable: b = !0,
-  bordered: A = !1,
-  striped: _ = !1,
-  padding: K = "md",
-  className: $,
+  hoverable: x = !0,
+  bordered: _ = !1,
+  striped: E = !1,
+  padding: W = "md",
+  className: D,
   rowClassName: X,
   headerBackground: U = !0
 }) => {
-  const [I, q] = B(""), [W, re] = B({
+  const [I, q] = R(""), [K, re] = R({
     column: null,
     direction: null
-  }), [P, ce] = B({
+  }), [P, ce] = R({
     page: 0,
     pageSize: m
-  }), C = se(null), i = he(() => {
+  }), k = se(null), i = he(() => {
     let v = t;
     if (s && I.trim()) {
       const V = r.filter(
@@ -1787,64 +1787,64 @@ const Kt = ({
       }));
     }), v;
   }, [t, I, r, s, o]), S = he(() => {
-    if (!W.column || !W.direction) return i;
-    const v = r.find((V) => V.id === W.column);
+    if (!K.column || !K.direction) return i;
+    const v = r.find((V) => V.id === K.column);
     return v ? [...i].sort((V, Z) => {
       const J = typeof v.accessor == "function" ? v.accessor(V) : V[v.accessor], O = typeof v.accessor == "function" ? v.accessor(Z) : Z[v.accessor];
       let ie = 0;
-      return J < O ? ie = -1 : J > O && (ie = 1), W.direction === "desc" ? -ie : ie;
+      return J < O ? ie = -1 : J > O && (ie = 1), K.direction === "desc" ? -ie : ie;
     }) : i;
-  }, [i, W, r]), N = he(() => {
+  }, [i, K, r]), y = he(() => {
     if (!l) return S;
     const v = P.page * P.pageSize, V = v + P.pageSize;
     return S.slice(v, V);
-  }, [S, P, l]), T = ue(
+  }, [S, P, l]), A = ue(
     (v) => {
       r.find((Z) => Z.id === v)?.sortable && re((Z) => Z.column !== v ? { column: v, direction: "asc" } : Z.direction === "asc" ? { column: v, direction: "desc" } : { column: null, direction: null });
     },
     [r]
-  ), k = ue((v) => {
+  ), w = ue((v) => {
     ce((V) => ({ ...V, page: v }));
   }, []), ee = ue((v) => {
     ce({ page: 0, pageSize: v });
   }, []), ae = ue(
     (v, V) => {
       if (!p) return;
-      const Z = w(v, 0);
-      x.map((J, O) => w(J, O)), p(V ? [...x, v] : x.filter(
-        (J, O) => w(x[O], O) !== Z
+      const Z = C(v, 0);
+      b.map((J, O) => C(J, O)), p(V ? [...b, v] : b.filter(
+        (J, O) => C(b[O], O) !== Z
       ));
     },
-    [x, p, w]
+    [b, p, C]
   ), le = ue(
     (v) => {
-      p && p(v ? [...N] : []);
+      p && p(v ? [...y] : []);
     },
-    [N, p]
+    [y, p]
   );
   Q(() => {
     ce((v) => ({ ...v, page: 0 }));
-  }, [I, W]), Q(() => {
+  }, [I, K]), Q(() => {
     ce((v) => ({ ...v, page: 0 }));
   }, [o.map((v) => v.value).join(",")]);
-  const G = S.length, j = Math.ceil(G / P.pageSize), E = P.page * P.pageSize + 1, D = Math.min(E + P.pageSize - 1, G), z = N.length > 0 && N.every((v) => {
-    const V = w(v, 0);
-    return x.some(
-      (Z, J) => w(Z, J) === V
+  const G = S.length, j = Math.ceil(G / P.pageSize), M = P.page * P.pageSize + 1, T = Math.min(M + P.pageSize - 1, G), z = y.length > 0 && y.every((v) => {
+    const V = C(v, 0);
+    return b.some(
+      (Z, J) => C(Z, J) === V
     );
-  }), R = N.some((v) => {
-    const V = w(v, 0);
-    return x.some(
-      (Z, J) => w(Z, J) === V
+  }), B = y.some((v) => {
+    const V = C(v, 0);
+    return b.some(
+      (Z, J) => C(Z, J) === V
     );
   }), F = d(
     "w-full text-sm leading-5 text-text border-collapse",
-    $
-  ), H = U ? "bg-surface-sunk border-border border-t" : "bg-surface", M = d(H, "h-control-lg"), L = d(
+    D
+  ), H = U ? "bg-surface-sunk border-border border-t" : "bg-surface", $ = d(H, "h-control-lg"), L = d(
     "text-text border-b border-border p-2"
   ), te = d("h-row-lg", {
-    "hover:bg-surface-sunk": b,
-    "cursor-pointer": h
+    "hover:bg-surface-sunk": x,
+    "cursor-pointer": f
   });
   return /* @__PURE__ */ c("div", { className: "space-y-4", children: [
     (s || o.length > 0) && /* @__PURE__ */ e("div", { className: "px-4 pt-4 pb-2", children: /* @__PURE__ */ c("div", { className: "flex flex-wrap gap-4 items-start", children: [
@@ -1869,15 +1869,15 @@ const Kt = ({
           tableColumns: r.length
         }
       ) }),
-      /* @__PURE__ */ c("table", { ref: C, className: d(F, "min-w-full"), children: [
-        /* @__PURE__ */ e("thead", { className: M, children: /* @__PURE__ */ c("tr", { children: [
-          f && /* @__PURE__ */ e("th", { className: d(L, "w-12"), children: /* @__PURE__ */ e(
+      /* @__PURE__ */ c("table", { ref: k, className: d(F, "min-w-full"), children: [
+        /* @__PURE__ */ e("thead", { className: $, children: /* @__PURE__ */ c("tr", { children: [
+          h && /* @__PURE__ */ e("th", { className: d(L, "w-12"), children: /* @__PURE__ */ e(
             "input",
             {
               type: "checkbox",
               checked: z,
               ref: (v) => {
-                v && (v.indeterminate = R && !z);
+                v && (v.indeterminate = B && !z);
               },
               onChange: (v) => le(v.target.checked),
               className: "rounded border-border [&:not(:checked)]:bg-surface-input text-accent"
@@ -1898,11 +1898,11 @@ const Kt = ({
                   [`sticky left-0 ${H}`]: v.sticky === "left",
                   [`sticky right-0 ${H}`]: v.sticky === "right"
                 },
-                V === 0 && Le[K],
-                V === r.length - 1 && Ie[K]
+                V === 0 && Le[W],
+                V === r.length - 1 && Ie[W]
               ),
               style: { width: v.width },
-              onClick: () => v.sortable && T(v.id),
+              onClick: () => v.sortable && A(v.id),
               children: /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
                 v.headerCell ? v.headerCell() : v.header,
                 v.sortable && /* @__PURE__ */ c(
@@ -1910,19 +1910,19 @@ const Kt = ({
                   {
                     className: d(
                       "flex flex-col opacity-0 group-hover:opacity-100 transition-opacity",
-                      W.column === v.id && "opacity-100"
+                      K.column === v.id && "opacity-100"
                     ),
                     children: [
                       /* @__PURE__ */ e(
                         Jt,
                         {
-                          active: W.column === v.id && W.direction === "asc"
+                          active: K.column === v.id && K.direction === "asc"
                         }
                       ),
                       /* @__PURE__ */ e(
                         Yt,
                         {
-                          active: W.column === v.id && W.direction === "desc"
+                          active: K.column === v.id && K.direction === "desc"
                         }
                       )
                     ]
@@ -1932,21 +1932,21 @@ const Kt = ({
             },
             v.id
           )),
-          y.length > 0 && /* @__PURE__ */ e("th", { className: d(L, "w-20"), children: /* @__PURE__ */ e("span", { className: "sr-only", children: "Actions" }) })
+          N.length > 0 && /* @__PURE__ */ e("th", { className: d(L, "w-20"), children: /* @__PURE__ */ e("span", { className: "sr-only", children: "Actions" }) })
         ] }) }),
-        /* @__PURE__ */ e("tbody", { children: N.length === 0 || n ? !n && /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e(
+        /* @__PURE__ */ e("tbody", { children: y.length === 0 || n ? !n && /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e(
           "td",
           {
-            colSpan: r.length + (f ? 1 : 0) + (y.length > 0 ? 1 : 0),
+            colSpan: r.length + (h ? 1 : 0) + (N.length > 0 ? 1 : 0),
             className: d(
               L,
               "text-center py-8 text-text-muted"
             ),
             children: g || "No data available"
           }
-        ) }) : N.map((v, V) => {
-          const Z = w(v, V), J = x.some(
-            (O, ie) => w(O, ie) === Z
+        ) }) : y.map((v, V) => {
+          const Z = C(v, V), J = b.some(
+            (O, ie) => C(O, ie) === Z
           );
           return /* @__PURE__ */ c(
             "tr",
@@ -1957,10 +1957,10 @@ const Kt = ({
                 X?.(v, V)
               ),
               onClick: (O) => {
-                O.stopPropagation(), h?.(v, V);
+                O.stopPropagation(), f?.(v, V);
               },
               children: [
-                f && /* @__PURE__ */ e("td", { className: L, children: /* @__PURE__ */ e(
+                h && /* @__PURE__ */ e("td", { className: L, children: /* @__PURE__ */ e(
                   "input",
                   {
                     type: "checkbox",
@@ -1985,29 +1985,29 @@ const Kt = ({
                           "sticky left-0 bg-surface": O.sticky === "left",
                           "sticky right-0 bg-surface": O.sticky === "right"
                         },
-                        ie === 0 && Le[K],
-                        ie === r.length - 1 && Ie[K]
+                        ie === 0 && Le[W],
+                        ie === r.length - 1 && Ie[W]
                       ),
                       children: O.cell ? O.cell(ve, v, ie) : String(ve || "")
                     },
                     O.id
                   );
                 }),
-                y.length > 0 && /* @__PURE__ */ e("td", { className: L, children: /* @__PURE__ */ e(
+                N.length > 0 && /* @__PURE__ */ e("td", { className: L, children: /* @__PURE__ */ e(
                   Kt,
                   {
                     trigger: /* @__PURE__ */ c("div", { className: "inline-flex items-center gap-1 px-2 py-1 text-sm text-text-muted hover:text-text", children: [
                       /* @__PURE__ */ e("span", { children: "Options" }),
                       /* @__PURE__ */ e(He, {})
                     ] }),
-                    options: y.map((O) => ({
+                    options: N.map((O) => ({
                       value: O.id,
                       label: O.label,
                       icon: O.icon,
                       disabled: O.disabled?.(v)
                     })),
                     onSelect: (O) => {
-                      const ie = y.find(
+                      const ie = N.find(
                         (ve) => ve.id === O
                       );
                       ie && ie.onClick(v, V);
@@ -2026,9 +2026,9 @@ const Kt = ({
       /* @__PURE__ */ c("div", { className: "flex items-center gap-4", children: [
         /* @__PURE__ */ c("span", { className: "text-sm text-text-muted", children: [
           "Showing ",
-          E,
+          M,
           " to ",
-          D,
+          T,
           " of ",
           G,
           " results"
@@ -2052,7 +2052,7 @@ const Kt = ({
           {
             size: "sm",
             variant: "ghost",
-            onClick: () => k(0),
+            onClick: () => w(0),
             disabled: P.page === 0,
             iconOnly: !0,
             children: /* @__PURE__ */ e(Qt, {})
@@ -2063,7 +2063,7 @@ const Kt = ({
           {
             size: "sm",
             variant: "ghost",
-            onClick: () => k(P.page - 1),
+            onClick: () => w(P.page - 1),
             disabled: P.page === 0,
             iconOnly: !0,
             children: /* @__PURE__ */ e(Xt, {})
@@ -2080,7 +2080,7 @@ const Kt = ({
           {
             size: "sm",
             variant: "ghost",
-            onClick: () => k(P.page + 1),
+            onClick: () => w(P.page + 1),
             disabled: P.page >= j - 1,
             iconOnly: !0,
             children: /* @__PURE__ */ e(Zt, {})
@@ -2091,7 +2091,7 @@ const Kt = ({
           {
             size: "sm",
             variant: "ghost",
-            onClick: () => k(j - 1),
+            onClick: () => w(j - 1),
             disabled: P.page >= j - 1,
             iconOnly: !0,
             children: /* @__PURE__ */ e(er, {})
@@ -2106,7 +2106,7 @@ const Kt = ({
   onTabChange: n,
   className: s
 }) => {
-  const [a, o] = B(t[0]?.id || ""), l = r || a, u = (m) => {
+  const [a, o] = R(t[0]?.id || ""), l = r || a, u = (m) => {
     n ? n(m) : o(m);
   };
   return /* @__PURE__ */ e("div", { className: d("border-b border-border", s), children: /* @__PURE__ */ e("nav", { className: "-mb-px flex space-x-8", children: t.map((m) => /* @__PURE__ */ e(
@@ -2141,14 +2141,14 @@ const Kt = ({
   size: o = "md",
   className: l
 }) => {
-  const [u, m] = B(
+  const [u, m] = R(
     r || n || t[0]?.id || ""
-  ), y = n || u, h = (g) => {
+  ), N = n || u, f = (g) => {
     s ? s(g) : m(g);
-  }, f = {
-    activeTab: y,
-    setActiveTab: h
-  }, x = t.find((g) => g.id === y), p = d(
+  }, h = {
+    activeTab: N,
+    setActiveTab: f
+  }, b = t.find((g) => g.id === N), p = d(
     "flex",
     {
       "border-b border-border px-2": a === "default" || a === "underline",
@@ -2157,42 +2157,42 @@ const Kt = ({
       "space-x-8": a === "default" || a === "underline"
     },
     l
-  ), w = (g, b) => {
-    const A = "transition-colors duration-fast font-medium", _ = {
+  ), C = (g, x) => {
+    const _ = "transition-colors duration-fast font-medium", E = {
       "text-xs px-2 py-1": o === "sm",
       "text-sm px-3 py-2": o === "md",
       "text-base px-4 py-3": o === "lg"
-    }, K = {
+    }, W = {
       // Default variant
       "border-b-2 -mb-px": a === "default",
       // Pills variant
       "rounded-md": a === "pills",
       // Underline variant
       "border-b-2 pb-2": a === "underline"
-    }, $ = {
+    }, D = {
       "opacity-50 cursor-not-allowed": g.disabled,
       "cursor-pointer": !g.disabled
-    }, X = b ? {
+    }, X = x ? {
       "border-accent-border text-text": a === "default" || a === "underline",
       "bg-surface text-text shadow-none": a === "pills"
-    } : {}, U = !b && !g.disabled ? {
+    } : {}, U = !x && !g.disabled ? {
       "border-transparent text-text-muted hover:text-text": a === "default",
       "text-text-muted hover:text-text": a === "pills",
       "border-transparent text-text-muted hover:text-text hover:border-border": a === "underline"
     } : {};
-    return d(A, _, K, $, X, U);
+    return d(_, E, W, D, X, U);
   };
-  return /* @__PURE__ */ e(rr.Provider, { value: f, children: /* @__PURE__ */ c("div", { children: [
+  return /* @__PURE__ */ e(rr.Provider, { value: h, children: /* @__PURE__ */ c("div", { children: [
     /* @__PURE__ */ e("div", { className: p, role: "tablist", children: t.map((g) => /* @__PURE__ */ e(
       "button",
       {
         type: "button",
         role: "tab",
-        "aria-selected": y === g.id,
+        "aria-selected": N === g.id,
         "aria-controls": `tabpanel-${g.id}`,
         disabled: g.disabled,
-        onClick: () => !g.disabled && h(g.id),
-        className: w(g, y === g.id),
+        onClick: () => !g.disabled && f(g.id),
+        className: C(g, N === g.id),
         children: /* @__PURE__ */ c("span", { className: "flex items-center gap-2", children: [
           g.label,
           g.badge && /* @__PURE__ */ e("span", { className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-surface-hover text-text-muted", children: g.badge })
@@ -2200,14 +2200,14 @@ const Kt = ({
       },
       g.id
     )) }),
-    x?.content && /* @__PURE__ */ e(
+    b?.content && /* @__PURE__ */ e(
       "div",
       {
         role: "tabpanel",
-        id: `tabpanel-${y}`,
-        "aria-labelledby": `tab-${y}`,
+        id: `tabpanel-${N}`,
+        "aria-labelledby": `tab-${N}`,
         className: "mt-4",
-        children: x.content
+        children: b.content
       }
     )
   ] }) });
@@ -2228,21 +2228,21 @@ function Ve({
   className: l,
   backdropClassName: u,
   children: m,
-  footer: y,
-  showCloseButton: h = !0
+  footer: N,
+  showCloseButton: f = !0
 }) {
-  const f = se(null), x = se(null);
+  const h = se(null), b = se(null);
   Q(() => {
     if (!t || !o) return;
-    const w = (g) => {
+    const C = (g) => {
       g.key === "Escape" && r();
     };
-    return document.addEventListener("keydown", w), () => document.removeEventListener("keydown", w);
-  }, [t, o, r]), Q(() => (t ? (x.current = document.activeElement, f.current && f.current.focus(), document.body.style.overflow = "hidden") : (x.current && x.current.focus(), document.body.style.overflow = ""), () => {
+    return document.addEventListener("keydown", C), () => document.removeEventListener("keydown", C);
+  }, [t, o, r]), Q(() => (t ? (b.current = document.activeElement, h.current && h.current.focus(), document.body.style.overflow = "hidden") : (b.current && b.current.focus(), document.body.style.overflow = ""), () => {
     document.body.style.overflow = "";
   }), [t]);
-  const p = (w) => {
-    a && w.target === w.currentTarget && r();
+  const p = (C) => {
+    a && C.target === C.currentTarget && r();
   };
   return t ? /* @__PURE__ */ e(
     "div",
@@ -2257,7 +2257,7 @@ function Ve({
       children: /* @__PURE__ */ c(
         "div",
         {
-          ref: f,
+          ref: h,
           className: d(
             "relative w-full bg-surface rounded-lg shadow-modal",
             // 'animate-scale-in',
@@ -2270,7 +2270,7 @@ function Ve({
           "aria-labelledby": n ? "modal-title" : void 0,
           tabIndex: -1,
           children: [
-            (n || h) && /* @__PURE__ */ c("div", { className: "flex items-center justify-between p-6 pb-0", children: [
+            (n || f) && /* @__PURE__ */ c("div", { className: "flex items-center justify-between p-6 pb-0", children: [
               n && /* @__PURE__ */ e(
                 "span",
                 {
@@ -2279,7 +2279,7 @@ function Ve({
                   children: n
                 }
               ),
-              h && /* @__PURE__ */ e(
+              f && /* @__PURE__ */ e(
                 "button",
                 {
                   onClick: r,
@@ -2290,7 +2290,7 @@ function Ve({
               )
             ] }),
             /* @__PURE__ */ e("div", { className: "p-6", children: m }),
-            y && /* @__PURE__ */ e("div", { className: "px-6 py-4", children: y })
+            N && /* @__PURE__ */ e("div", { className: "px-6 py-4", children: N })
           ]
         }
       )
@@ -2339,19 +2339,19 @@ const ar = {
   italic: l = !1,
   underline: u = !1,
   lineHeight: m = "normal",
-  as: y,
-  className: h,
-  children: f,
-  ...x
+  as: N,
+  className: f,
+  children: h,
+  ...b
 }) => {
-  const p = y || dr(t), w = t === "caption", g = t === "label", b = t === "code", A = d(
+  const p = N || dr(t), C = t === "caption", g = t === "label", x = t === "code", _ = d(
     "font-sans",
     // Variant — caption and label pin their own size/weight
-    w && "text-xs text-text-subtle",
+    C && "text-xs text-text-subtle",
     g && "text-xs font-semibold uppercase tracking-label text-text-subtle",
-    b && "font-mono text-sm rounded-sm bg-surface-hover px-1 py-0.5",
+    x && "font-mono text-sm rounded-sm bg-surface-hover px-1 py-0.5",
     // Size — only where the variant does not pin it
-    !w && !g && !b && ar[r],
+    !C && !g && !x && ar[r],
     // Weight — label owns its weight
     !g && lr[n],
     or[s],
@@ -2361,9 +2361,9 @@ const ar = {
     l && "italic",
     u && "underline",
     o && "truncate",
-    h
+    f
   );
-  return /* @__PURE__ */ e(p, { className: A, ...x, children: f });
+  return /* @__PURE__ */ e(p, { className: _, ...b, children: h });
 };
 function dr(t) {
   return {
@@ -2383,42 +2383,42 @@ const ur = ({
   accept: l,
   onListFiles: u,
   onListMounts: m,
-  onUploadFile: y,
-  onDownloadFile: h,
-  onRegisterFile: f
+  onUploadFile: N,
+  onDownloadFile: f,
+  onRegisterFile: h
 }) => {
-  const [x, p] = B(!1), [w, g] = B([]), [b, A] = B(null), [_, K] = B("/"), [$, X] = B([]), [U, I] = B(!1), [q, W] = B(""), [re, P] = B(
+  const [b, p] = R(!1), [C, g] = R([]), [x, _] = R(null), [E, W] = R("/"), [D, X] = R([]), [U, I] = R(!1), [q, K] = R(""), [re, P] = R(
     typeof t == "object" ? t : null
-  ), [ce, C] = B(!1), [i, S] = B(""), N = se(null);
+  ), [ce, k] = R(!1), [i, S] = R(""), y = se(null);
   Q(() => {
-    x && T();
-  }, [x]), Q(() => {
-    x && b && k();
-  }, [x, b, _, q]);
-  const T = async () => {
+    b && A();
+  }, [b]), Q(() => {
+    b && x && w();
+  }, [b, x, E, q]);
+  const A = async () => {
     I(!0);
     try {
-      const M = await m?.();
-      M?.data && g(M.data);
-    } catch (M) {
-      console.error("Failed to load mounts", M);
+      const $ = await m?.();
+      $?.data && g($.data);
+    } catch ($) {
+      console.error("Failed to load mounts", $);
     } finally {
       I(!1);
     }
-  }, k = async () => {
-    if (b) {
+  }, w = async () => {
+    if (x) {
       I(!0);
       try {
-        const M = await u?.({ mountId: b.id, name: q, path: _ });
-        M?.data && X(M.data);
-      } catch (M) {
-        console.error("Failed to load files", M);
+        const $ = await u?.({ mountId: x.id, name: q, path: E });
+        $?.data && X($.data);
+      } catch ($) {
+        console.error("Failed to load files", $);
       } finally {
         I(!1);
       }
     }
-  }, ee = async (M) => {
-    const L = M.target.files?.[0];
+  }, ee = async ($) => {
+    const L = $.target.files?.[0];
     if (L) {
       I(!0);
       try {
@@ -2440,17 +2440,17 @@ const ur = ({
         I(!1);
       }
     }
-  }, ae = async (M) => {
-    const L = M.target.files?.[0];
-    if (!(!L || !b)) {
+  }, ae = async ($) => {
+    const L = $.target.files?.[0];
+    if (!(!L || !x)) {
       I(!0);
       try {
-        const te = await L.arrayBuffer(), v = await y?.({
+        const te = await L.arrayBuffer(), v = await N?.({
           file: new Uint8Array(te),
           filename: L.name,
           mimeType: L.type || "application/octet-stream",
-          mountId: b.id,
-          path: _
+          mountId: x.id,
+          path: E
         });
         if (v?.data) {
           const V = v.data;
@@ -2463,74 +2463,74 @@ const ur = ({
       }
     }
   }, le = async () => {
-    if (!(!i || !b)) {
+    if (!(!i || !x)) {
       I(!0);
       try {
-        const M = `${_}${i}/`;
-        f && (await f({
+        const $ = `${E}${i}/`;
+        h && (await h({
           name: i,
           type: "folder",
-          path: _,
+          path: E,
           mimeType: "application/x-directory",
           size: 0,
-          mountId: b.id,
-          providerKey: M,
+          mountId: x.id,
+          providerKey: $,
           ownerId: "me"
-        }), await k()), C(!1), S("");
-      } catch (M) {
-        console.error("Failed to create folder", M);
+        }), await w()), k(!1), S("");
+      } catch ($) {
+        console.error("Failed to create folder", $);
       } finally {
         I(!1);
       }
     }
-  }, G = async (M) => {
+  }, G = async ($) => {
     I(!0);
     try {
-      const L = await h?.(M.id);
-      P(M), r(M, L), p(!1);
+      const L = await f?.($.id);
+      P($), r($, L), p(!1);
     } catch (L) {
       console.error("Failed to download file", L);
     } finally {
       I(!1);
     }
-  }, j = (M) => {
-    M.stopPropagation(), P(null), r(null);
-  }, E = he(() => {
-    const M = /* @__PURE__ */ new Set(), L = [];
-    return $.forEach((te) => {
+  }, j = ($) => {
+    $.stopPropagation(), P(null), r(null);
+  }, M = he(() => {
+    const $ = /* @__PURE__ */ new Set(), L = [];
+    return D.forEach((te) => {
       if (te.type === "folder") {
-        te.path === _ && M.add(te.name);
+        te.path === E && $.add(te.name);
         return;
       }
-      const v = te.providerKey || te.name, Z = (_ ? v.substring(_.length) : v).split("/").filter((J) => J !== "");
-      Z.length > 1 ? M.add(Z[0]) : Z.length === 1 && L.push(te);
+      const v = te.providerKey || te.name, Z = (E ? v.substring(E.length) : v).split("/").filter((J) => J !== "");
+      Z.length > 1 ? $.add(Z[0]) : Z.length === 1 && L.push(te);
     }), {
-      folders: Array.from(M).sort(),
+      folders: Array.from($).sort(),
       files: L.sort((te, v) => te.name.localeCompare(v.name))
     };
-  }, [$, _]), D = (M) => {
-    K((L) => `${L}${M}/`);
+  }, [D, E]), T = ($) => {
+    W((L) => `${L}${$}/`);
   }, z = () => {
-    const M = _.split("/").filter((L) => L !== "");
-    M.pop(), M.length === 0 ? K("/") : K(`${M.join("/")}/`);
-  }, R = he(() => {
-    const M = E.folders.map((L) => ({
+    const $ = E.split("/").filter((L) => L !== "");
+    $.pop(), $.length === 0 ? W("/") : W(`${$.join("/")}/`);
+  }, B = he(() => {
+    const $ = M.folders.map((L) => ({
       id: `folder-${L}`,
       name: L,
       type: "folder"
     }));
-    return E.files.forEach((L) => {
-      M.push({
+    return M.files.forEach((L) => {
+      $.push({
         ...L,
         type: "file"
       });
-    }), M;
-  }, [E]), F = [
+    }), $;
+  }, [M]), F = [
     {
       id: "name",
       header: "Name",
       accessor: "name",
-      cell: (M, L) => /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
+      cell: ($, L) => /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ e(
           Y,
           {
@@ -2539,31 +2539,31 @@ const ur = ({
             color: L.type === "folder" ? "warning" : "secondary"
           }
         ),
-        /* @__PURE__ */ e("span", { className: d(L.type === "folder" && "font-medium"), children: M })
+        /* @__PURE__ */ e("span", { className: d(L.type === "folder" && "font-medium"), children: $ })
       ] })
     },
     {
       id: "type",
       header: "Type",
-      accessor: (M) => M.type === "folder" ? "Folder" : M.mimeType
+      accessor: ($) => $.type === "folder" ? "Folder" : $.mimeType
     },
     {
       id: "size",
       header: "Size",
-      accessor: (M) => M.type === "file" ? `${(M.size / 1024).toFixed(1)} KB` : "-"
+      accessor: ($) => $.type === "file" ? `${($.size / 1024).toFixed(1)} KB` : "-"
     },
     {
       id: "actions",
       header: "",
       accessor: "id",
       align: "right",
-      cell: (M, L) => /* @__PURE__ */ e(
+      cell: ($, L) => /* @__PURE__ */ e(
         ne,
         {
           size: "sm",
           variant: "outline",
           onClick: (te) => {
-            te.stopPropagation(), L.type === "folder" ? D(L.name) : G(L);
+            te.stopPropagation(), L.type === "folder" ? T(L.name) : G(L);
           },
           loading: U && L.type === "file" && re?.id === L.id,
           children: L.type === "folder" ? "Open" : "Select"
@@ -2575,9 +2575,9 @@ const ur = ({
       id: "name",
       header: "Mount Name",
       accessor: "name",
-      cell: (M) => /* @__PURE__ */ c("div", { className: "flex items-center gap-2 font-medium", children: [
+      cell: ($) => /* @__PURE__ */ c("div", { className: "flex items-center gap-2 font-medium", children: [
         /* @__PURE__ */ e(Y, { icon: _e, size: "sm", color: "primary" }),
-        /* @__PURE__ */ e("span", { children: M })
+        /* @__PURE__ */ e("span", { children: $ })
       ] })
     },
     {
@@ -2585,7 +2585,7 @@ const ur = ({
       header: "",
       accessor: "id",
       align: "right",
-      cell: (M, L) => /* @__PURE__ */ e(ne, { size: "sm", variant: "outline", onClick: () => A(L), children: "Open" })
+      cell: ($, L) => /* @__PURE__ */ e(ne, { size: "sm", variant: "outline", onClick: () => _(L), children: "Open" })
     }
   ];
   return /* @__PURE__ */ c("div", { className: "space-y-1", children: [
@@ -2618,11 +2618,11 @@ const ur = ({
     /* @__PURE__ */ e(
       Ve,
       {
-        open: x,
+        open: b,
         onClose: () => {
-          p(!1), A(null), K("/"), C(!1);
+          p(!1), _(null), W("/"), k(!1);
         },
-        title: b ? `Explorer: ${b.name}` : "Select Storage Mount",
+        title: x ? `Explorer: ${x.name}` : "Select Storage Mount",
         size: "lg",
         children: /* @__PURE__ */ e(
           nr,
@@ -2632,7 +2632,7 @@ const ur = ({
               {
                 id: "remote",
                 label: "Platform Storage",
-                content: /* @__PURE__ */ e("div", { className: "space-y-4", children: b ? /* @__PURE__ */ c(xe, { children: [
+                content: /* @__PURE__ */ e("div", { className: "space-y-4", children: x ? /* @__PURE__ */ c(xe, { children: [
                   /* @__PURE__ */ c("div", { className: "flex flex-wrap items-center gap-2", children: [
                     /* @__PURE__ */ e(
                       ne,
@@ -2640,19 +2640,19 @@ const ur = ({
                         variant: "ghost",
                         size: "sm",
                         onClick: () => {
-                          _ && _ !== "/" ? z() : A(null);
+                          E && E !== "/" ? z() : _(null);
                         },
                         leftIcon: /* @__PURE__ */ e(Y, { icon: st, size: "xs" }),
-                        children: _ ? "Back" : "Back to Mounts"
+                        children: E ? "Back" : "Back to Mounts"
                       }
                     ),
-                    /* @__PURE__ */ e("div", { className: "flex items-center gap-1 text-xs text-text-muted overflow-hidden bg-surface-hover px-2 py-1 rounded", children: /* @__PURE__ */ e("span", { className: "truncate", children: _ }) }),
+                    /* @__PURE__ */ e("div", { className: "flex items-center gap-1 text-xs text-text-muted overflow-hidden bg-surface-hover px-2 py-1 rounded", children: /* @__PURE__ */ e("span", { className: "truncate", children: E }) }),
                     /* @__PURE__ */ e("div", { className: "flex-grow min-w-40", children: /* @__PURE__ */ e(
                       be,
                       {
                         placeholder: "Search...",
                         value: q,
-                        onChange: (M) => W(M.target.value),
+                        onChange: ($) => K($.target.value),
                         startIcon: /* @__PURE__ */ e(Se, { size: 14 }),
                         fullWidth: !0,
                         size: "sm"
@@ -2664,7 +2664,7 @@ const ur = ({
                         {
                           variant: "outline",
                           size: "sm",
-                          onClick: () => C(!0),
+                          onClick: () => k(!0),
                           leftIcon: /* @__PURE__ */ e(Y, { icon: at, size: "xs" }),
                           children: "New Folder"
                         }
@@ -2674,7 +2674,7 @@ const ur = ({
                         {
                           variant: "primary",
                           size: "sm",
-                          onClick: () => N.current?.click(),
+                          onClick: () => y.current?.click(),
                           leftIcon: /* @__PURE__ */ e(Y, { icon: lt, size: "xs" }),
                           loading: U,
                           children: "Upload"
@@ -2685,7 +2685,7 @@ const ur = ({
                         {
                           type: "file",
                           className: "hidden",
-                          ref: N,
+                          ref: y,
                           onChange: ae,
                           accept: l
                         }
@@ -2700,31 +2700,31 @@ const ur = ({
                         size: "sm",
                         placeholder: "Folder name",
                         value: i,
-                        onChange: (M) => S(M.target.value),
+                        onChange: ($) => S($.target.value),
                         autoFocus: !0
                       }
                     ),
                     /* @__PURE__ */ e(ne, { size: "sm", onClick: le, loading: U, children: "Create" }),
-                    /* @__PURE__ */ e(ne, { size: "sm", variant: "ghost", onClick: () => C(!1), children: "Cancel" })
+                    /* @__PURE__ */ e(ne, { size: "sm", variant: "ghost", onClick: () => k(!1), children: "Cancel" })
                   ] }),
                   /* @__PURE__ */ e("div", { className: "max-h-100 overflow-auto rounded-lg border border-border", children: /* @__PURE__ */ e(
                     je,
                     {
-                      data: R,
+                      data: B,
                       columns: F,
                       loading: U,
                       emptyContent: "This folder is empty",
-                      onRowClick: (M) => M.type === "folder" ? D(M.name) : G(M)
+                      onRowClick: ($) => $.type === "folder" ? T($.name) : G($)
                     }
                   ) })
                 ] }) : /* @__PURE__ */ e("div", { className: "max-h-100 overflow-auto rounded-lg border border-border", children: /* @__PURE__ */ e(
                   je,
                   {
-                    data: w,
+                    data: C,
                     columns: H,
                     loading: U,
                     emptyContent: "No storage mounts configured",
-                    onRowClick: (M) => A(M)
+                    onRowClick: ($) => _($)
                   }
                 ) }) })
               },
@@ -2776,18 +2776,18 @@ const ur = ({
     containerClassName: l,
     labelClassName: u,
     className: m,
-    id: y,
-    rows: h = 4,
-    ...f
-  }, x) => {
-    const p = oe.useId(), w = y || `textarea-${p}`, g = !!n, b = n || r ? `${w}-description` : void 0;
+    id: N,
+    rows: f = 4,
+    ...h
+  }, b) => {
+    const p = oe.useId(), C = N || `textarea-${p}`, g = !!n, x = n || r ? `${C}-description` : void 0;
     return /* @__PURE__ */ c("div", { className: d("flex flex-col", a && "w-full", l), children: [
       t && /* @__PURE__ */ e(
         "label",
         {
-          htmlFor: w,
+          htmlFor: C,
           className: d(
-            Re,
+            Be,
             g ? "text-danger-fg" : "text-text-subtle",
             u
           ),
@@ -2798,11 +2798,11 @@ const ur = ({
         /* @__PURE__ */ e(
           "textarea",
           {
-            ref: x,
-            id: w,
-            rows: h,
+            ref: b,
+            id: C,
+            rows: f,
             "aria-invalid": g || void 0,
-            "aria-describedby": b,
+            "aria-describedby": x,
             className: d(
               "block w-full resize-y rounded-md border bg-surface-input text-text",
               "transition-colors duration-fast ease-out",
@@ -2813,7 +2813,7 @@ const ur = ({
               g ? "border-danger-border bg-danger-soft" : "border-border hover:border-border-strong",
               m
             ),
-            ...f
+            ...h
           }
         ),
         o && /* @__PURE__ */ e(
@@ -2827,7 +2827,7 @@ const ur = ({
       (n || r) && /* @__PURE__ */ e(
         "p",
         {
-          id: b,
+          id: x,
           className: d("mt-1 text-xs", g ? "text-danger-fg" : "text-text-subtle"),
           children: n || r
         }
@@ -2871,100 +2871,100 @@ const hn = ({
   validate: l,
   submitButton: u = { label: "Submit", variant: "primary" },
   cancelButton: m = { label: "Cancel", variant: "outline" },
-  showButtons: y = !0,
-  layout: h = "vertical",
-  size: f = "md",
-  loading: x = !1,
+  showButtons: N = !0,
+  layout: f = "vertical",
+  size: h = "md",
+  loading: b = !1,
   className: p,
-  ref: w,
+  ref: C,
   sdk: g
 }) => {
-  const [b, A] = B(r || {}), [_, K] = B({}), [$, X] = B({});
+  const [x, _] = R(r || {}), [E, W] = R({}), [D, X] = R({});
   Q(() => {
-    r && A({ ...r });
+    r && _({ ...r });
   }, [r]);
   const U = ue(
-    (C, i, S) => {
-      const N = t.flatMap((T) => T.items).find((T) => T.name === C);
-      if (!N) return null;
-      if (N.required && (i == null || i === ""))
-        return `${N.label} is required`;
-      if (N.type === "array") {
-        if (N.required && (!i || i.length === 0))
-          return `${N.label} cannot be empty.`;
+    (k, i, S) => {
+      const y = t.flatMap((A) => A.items).find((A) => A.name === k);
+      if (!y) return null;
+      if (y.required && (i == null || i === ""))
+        return `${y.label} is required`;
+      if (y.type === "array") {
+        if (y.required && (!i || i.length === 0))
+          return `${y.label} cannot be empty.`;
         if (i && !Array.isArray(i))
-          return `${N.label} must be an array.`;
-        if (Array.isArray(i) && N.arrayFields) {
-          const T = [];
-          let k = !1;
+          return `${y.label} must be an array.`;
+        if (Array.isArray(i) && y.arrayFields) {
+          const A = [];
+          let w = !1;
           if (i.forEach((ee, ae) => {
             const le = {};
-            for (const G of N.arrayFields) {
+            for (const G of y.arrayFields) {
               const j = ee?.[G.name];
               if (G.required && (j == null || j === ""))
-                le[G.name] = `${G.label} is required`, k = !0;
+                le[G.name] = `${G.label} is required`, w = !0;
               else if (G.validator) {
-                const E = G.validator(j, ee);
-                E && (le[G.name] = E, k = !0);
+                const M = G.validator(j, ee);
+                M && (le[G.name] = M, w = !0);
               }
             }
-            T[ae] = le;
-          }), k)
-            return JSON.stringify(T);
+            A[ae] = le;
+          }), w)
+            return JSON.stringify(A);
         }
       }
-      return N.validator ? N.validator(i, S) : null;
+      return y.validator ? y.validator(i, S) : null;
     },
     [t]
   ), I = ue(
-    (C, i) => {
+    (k, i) => {
       let S = fr(
-        b,
-        C,
+        x,
+        k,
         i
       );
-      t.flatMap((k) => k.items).find((k) => k.name === C)?.removeIfEmpty && (i == null || i === "") && (S = hr(S, C)), A(S), X((k) => ({ ...k, [C]: !0 }));
-      const T = U(C, i, S);
-      K((k) => ({
-        ...k,
-        [C]: T || ""
-      })), a?.(S, C);
+      t.flatMap((w) => w.items).find((w) => w.name === k)?.removeIfEmpty && (i == null || i === "") && (S = hr(S, k)), _(S), X((w) => ({ ...w, [k]: !0 }));
+      const A = U(k, i, S);
+      W((w) => ({
+        ...w,
+        [k]: A || ""
+      })), a?.(S, k);
     },
-    [b, t, U, a]
+    [x, t, U, a]
   ), q = ue(
-    async (C) => {
-      if (C.preventDefault(), x) return;
-      const i = {}, S = t.flatMap((T) => T.items);
-      for (const T of S) {
-        if (T.hidden || T.conditional && !T.conditional(b))
+    async (k) => {
+      if (k.preventDefault(), b) return;
+      const i = {}, S = t.flatMap((A) => A.items);
+      for (const A of S) {
+        if (A.hidden || A.conditional && !A.conditional(x))
           continue;
-        const k = U(
-          T.name,
-          Pe(b, T.name),
-          b
+        const w = U(
+          A.name,
+          Pe(x, A.name),
+          x
         );
-        k && (i[T.name] = k);
+        w && (i[A.name] = w);
       }
       if (l) {
-        const T = l(b);
-        T && Object.assign(i, T);
+        const A = l(x);
+        A && Object.assign(i, A);
       }
-      if (K(i), Object.keys(i).some((T) => i[T]))
+      if (W(i), Object.keys(i).some((A) => i[A]))
         return;
-      const N = o ? o(b) : b;
-      await n?.(b, N);
+      const y = o ? o(x) : x;
+      await n?.(x, y);
     },
-    [b, t, U, l, o, n, x]
-  ), W = ue(
-    (C) => {
-      const i = Pe(b, C.name), S = $[C.name] ? _[C.name] : void 0, N = C.disabled || x, T = {
+    [x, t, U, l, o, n, b]
+  ), K = ue(
+    (k) => {
+      const i = Pe(x, k.name), S = D[k.name] ? E[k.name] : void 0, y = k.disabled || b, A = {
         value: i || "",
-        disabled: N,
-        required: C.required,
-        placeholder: C.placeholder,
-        ...C.fieldProps
+        disabled: y,
+        required: k.required,
+        placeholder: k.placeholder,
+        ...k.fieldProps
       };
-      switch (C.type) {
+      switch (k.type) {
         case "text":
         case "email":
         case "password":
@@ -2974,55 +2974,55 @@ const hn = ({
           return /* @__PURE__ */ e(
             be,
             {
-              ...T,
-              onChange: (k) => I(C.name, k.target.value),
-              type: C.textType || C.type,
-              autoComplete: C.autocomplete,
+              ...A,
+              onChange: (w) => I(k.name, w.target.value),
+              type: k.textType || k.type,
+              autoComplete: k.autocomplete,
               error: S,
-              size: f
+              size: h
             }
           );
         case "textarea":
           return /* @__PURE__ */ e(
             De,
             {
-              ...T,
-              onChange: (k) => I(C.name, k.target.value),
+              ...A,
+              onChange: (w) => I(k.name, w.target.value),
               rows: 4,
               error: S,
-              size: f
+              size: h
             }
           );
         case "select":
           return /* @__PURE__ */ e(
             Ne,
             {
-              ...T,
-              onChange: (k) => I(C.name, k),
-              options: (C.options || []).map((k) => ({
-                ...k,
-                value: String(k.value)
+              ...A,
+              onChange: (w) => I(k.name, w),
+              options: (k.options || []).map((w) => ({
+                ...w,
+                value: String(w.value)
               })),
-              searchable: C.searchable,
-              multiple: C.multiple,
-              allowCreate: C.allowCreate,
+              searchable: k.searchable,
+              multiple: k.multiple,
+              allowCreate: k.allowCreate,
               error: S,
-              size: f
+              size: h
             }
           );
         case "checkbox":
           return /* @__PURE__ */ e(
             pe,
             {
-              ...T,
-              label: C.label,
+              ...A,
+              label: k.label,
               checked: !!i,
-              onChange: (k) => I(C.name, k.target.checked),
-              size: f
+              onChange: (w) => I(k.name, w.target.checked),
+              size: h
             }
           );
         case "radio":
-          return /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: C.options?.map((k) => /* @__PURE__ */ c(
+          return /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: k.options?.map((w) => /* @__PURE__ */ c(
             "label",
             {
               className: "flex cursor-pointer items-center gap-3 text-base text-text",
@@ -3031,86 +3031,86 @@ const hn = ({
                   "input",
                   {
                     type: "radio",
-                    name: C.name,
-                    value: k.value,
-                    checked: i === k.value,
-                    onChange: () => I(C.name, k.value),
-                    disabled: N || k.disabled,
+                    name: k.name,
+                    value: w.value,
+                    checked: i === w.value,
+                    onChange: () => I(k.name, w.value),
+                    disabled: y || w.disabled,
                     className: "size-checkbox shrink-0 border border-border-strong bg-surface-input accent-accent focus-visible:outline-none focus-visible:focus-ring"
                   }
                 ),
-                k.label
+                w.label
               ]
             },
-            k.value
+            w.value
           )) });
         case "date":
           return /* @__PURE__ */ e(
             $e,
             {
-              ...T,
+              ...A,
               value: i ? new Date(i) : null,
-              onChange: (k) => I(C.name, k),
-              size: f
+              onChange: (w) => I(k.name, w),
+              size: h
             }
           );
         case "file":
           return /* @__PURE__ */ e(
             ur,
             {
-              ...T,
+              ...A,
               value: i,
-              onChange: (k) => I(C.name, k),
+              onChange: (w) => I(k.name, w),
               error: S,
-              onListFiles: (k) => g?.http.invoke({
+              onListFiles: (w) => g?.http.invoke({
                 method: "POST",
                 action: "storage.file.list",
-                body: k
+                body: w
               }),
               onListMounts: () => g?.http.invoke({
                 method: "GET",
                 action: "storage.mount"
               }),
-              onUploadFile: (k) => g?.http.invoke({
+              onUploadFile: (w) => g?.http.invoke({
                 method: "POST",
                 action: "storage.file.upload",
-                body: k
+                body: w
               }),
-              onDownloadFile: (k) => g?.http.invoke({
+              onDownloadFile: (w) => g?.http.invoke({
                 method: "GET",
-                action: `storage.file.${k}.download`
+                action: `storage.file.${w}.download`
               }),
-              onRegisterFile: (k) => g?.http.invoke({
+              onRegisterFile: (w) => g?.http.invoke({
                 method: "POST",
                 action: "storage.file.folder",
-                body: k
+                body: w
               })
             }
           );
         case "folder":
           return /* @__PURE__ */ e(
-            Bt,
+            Rt,
             {
               value: i || {},
-              onChange: (k) => I(C.name, k),
+              onChange: (w) => I(k.name, w),
               onListFolders: () => g?.http.invoke({
                 method: "GET",
                 action: "storage.mount"
               }),
-              disabled: N,
-              size: f,
-              placeholder: C.placeholder
+              disabled: y,
+              size: h,
+              placeholder: k.placeholder
             }
           );
         case "custom":
-          return C.customComponent?.({
+          return k.customComponent?.({
             value: i,
-            onChange: (k) => I(C.name, k),
+            onChange: (w) => I(k.name, w),
             error: S,
-            disabled: N
+            disabled: y
           });
         case "array": {
-          const k = i || [];
+          const w = i || [];
           let ee = [];
           if (typeof S == "string" && S.startsWith("["))
             try {
@@ -3118,41 +3118,41 @@ const hn = ({
             } catch {
             }
           const ae = () => {
-            I(C.name, [...k, {}]);
+            I(k.name, [...w, {}]);
           }, le = (j) => {
             I(
-              C.name,
-              k.filter((E, D) => D !== j)
+              k.name,
+              w.filter((M, T) => T !== j)
             );
-          }, G = (j, E, D) => {
-            const z = [...k];
+          }, G = (j, M, T) => {
+            const z = [...w];
             z[j] = {
               ...z[j],
-              [E]: D
-            }, I(C.name, z);
+              [M]: T
+            }, I(k.name, z);
           };
           return /* @__PURE__ */ c("div", { className: "flex flex-col gap-2", children: [
-            k.map((j, E) => /* @__PURE__ */ c("div", { className: "flex items-start gap-2", children: [
-              /* @__PURE__ */ e("div", { className: "grid flex-1 gap-2 sm:grid-cols-2", children: C.arrayFields?.map((D) => {
-                const z = ee?.[E]?.[D.name];
+            w.map((j, M) => /* @__PURE__ */ c("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ e("div", { className: "grid flex-1 gap-2 sm:grid-cols-2", children: k.arrayFields?.map((T) => {
+                const z = ee?.[M]?.[T.name];
                 return /* @__PURE__ */ c(
                   "div",
                   {
                     className: "flex flex-col gap-1",
                     children: [
-                      E === 0 && /* @__PURE__ */ c("label", { className: "block text-xs font-semibold uppercase tracking-label text-text-subtle", children: [
-                        D.label,
-                        D.required && /* @__PURE__ */ e("span", { className: "ml-1 text-danger-fg", children: "*" })
+                      M === 0 && /* @__PURE__ */ c("label", { className: "block text-xs font-semibold uppercase tracking-label text-text-subtle", children: [
+                        T.label,
+                        T.required && /* @__PURE__ */ e("span", { className: "ml-1 text-danger-fg", children: "*" })
                       ] }),
                       (() => {
-                        const R = {
-                          value: j?.[D.name] || "",
-                          disabled: N,
-                          required: D.required,
-                          placeholder: D.placeholder,
-                          ...D.fieldProps
+                        const B = {
+                          value: j?.[T.name] || "",
+                          disabled: y,
+                          required: T.required,
+                          placeholder: T.placeholder,
+                          ...T.fieldProps
                         };
-                        switch (D.type) {
+                        switch (T.type) {
                           case "text":
                           case "email":
                           case "password":
@@ -3162,72 +3162,72 @@ const hn = ({
                             return /* @__PURE__ */ e(
                               be,
                               {
-                                ...R,
+                                ...B,
                                 onChange: (F) => G(
-                                  E,
-                                  D.name,
+                                  M,
+                                  T.name,
                                   F.target.value
                                 ),
-                                type: D.textType || D.type,
-                                autoComplete: D.autocomplete,
+                                type: T.textType || T.type,
+                                autoComplete: T.autocomplete,
                                 error: z,
-                                size: f
+                                size: h
                               }
                             );
                           case "textarea":
                             return /* @__PURE__ */ e(
                               De,
                               {
-                                ...R,
+                                ...B,
                                 onChange: (F) => G(
-                                  E,
-                                  D.name,
+                                  M,
+                                  T.name,
                                   F.target.value
                                 ),
                                 rows: 4,
                                 error: z,
-                                size: f
+                                size: h
                               }
                             );
                           case "select":
                             return /* @__PURE__ */ e(
                               Ne,
                               {
-                                ...R,
+                                ...B,
                                 onChange: (F) => G(
-                                  E,
-                                  D.name,
+                                  M,
+                                  T.name,
                                   F
                                 ),
-                                options: (D.options || []).map(
+                                options: (T.options || []).map(
                                   (F) => ({
                                     ...F,
                                     value: String(F.value)
                                   })
                                 ),
-                                searchable: D.searchable,
-                                multiple: D.multiple,
-                                allowCreate: D.allowCreate,
+                                searchable: T.searchable,
+                                multiple: T.multiple,
+                                allowCreate: T.allowCreate,
                                 error: z,
-                                size: f
+                                size: h
                               }
                             );
                           case "checkbox":
                             return /* @__PURE__ */ e(
                               pe,
                               {
-                                ...R,
-                                checked: !!j?.[D.name],
+                                ...B,
+                                checked: !!j?.[T.name],
                                 onChange: (F) => G(
-                                  E,
-                                  D.name,
+                                  M,
+                                  T.name,
                                   F.target.checked
                                 ),
-                                size: f
+                                size: h
                               }
                             );
                           case "radio":
-                            return /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: D.options?.map((F) => /* @__PURE__ */ c(
+                            return /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: T.options?.map((F) => /* @__PURE__ */ c(
                               "label",
                               {
                                 className: "flex cursor-pointer items-center gap-2 text-base text-text",
@@ -3236,15 +3236,15 @@ const hn = ({
                                     "input",
                                     {
                                       type: "radio",
-                                      name: `${C.name}.${E}.${D.name}`,
+                                      name: `${k.name}.${M}.${T.name}`,
                                       value: F.value,
-                                      checked: j?.[D.name] === F.value,
+                                      checked: j?.[T.name] === F.value,
                                       onChange: () => G(
-                                        E,
-                                        D.name,
+                                        M,
+                                        T.name,
                                         F.value
                                       ),
-                                      disabled: N || F.disabled,
+                                      disabled: y || F.disabled,
                                       className: "size-checkbox shrink-0 border border-border-strong bg-surface-input accent-accent focus-visible:outline-none focus-visible:focus-ring"
                                     }
                                   ),
@@ -3254,45 +3254,45 @@ const hn = ({
                               F.value
                             )) });
                           case "date": {
-                            const F = j?.[D.name];
+                            const F = j?.[T.name];
                             return /* @__PURE__ */ e(
                               $e,
                               {
-                                ...R,
+                                ...B,
                                 value: F ? new Date(F) : null,
                                 onChange: (H) => G(
-                                  E,
-                                  D.name,
+                                  M,
+                                  T.name,
                                   H
                                 ),
-                                size: f
+                                size: h
                               }
                             );
                           }
                           case "custom":
-                            return D.customComponent?.({
-                              value: j?.[D.name],
+                            return T.customComponent?.({
+                              value: j?.[T.name],
                               onChange: (F) => G(
-                                E,
-                                D.name,
+                                M,
+                                T.name,
                                 F
                               ),
                               error: z,
-                              disabled: N
+                              disabled: y
                             });
                           // Add other field types here as needed
                           default:
                             return /* @__PURE__ */ c("p", { children: [
                               "Unsupported field type in array:",
                               " ",
-                              D.type
+                              T.type
                             ] });
                         }
                       })(),
                       z && /* @__PURE__ */ e("p", { className: "text-xs text-danger-fg", children: z })
                     ]
                   },
-                  D.name
+                  T.name
                 );
               }) }),
               /* @__PURE__ */ e(
@@ -3302,14 +3302,14 @@ const hn = ({
                   iconOnly: !0,
                   variant: "ghost",
                   size: "md",
-                  "aria-label": `${C.label} verwijderen`,
-                  onClick: () => le(E),
-                  disabled: N,
-                  className: d("shrink-0", E === 0 && "mt-5"),
+                  "aria-label": `${k.label} verwijderen`,
+                  onClick: () => le(M),
+                  disabled: y,
+                  className: d("shrink-0", M === 0 && "mt-5"),
                   children: /* @__PURE__ */ e(ot, { className: "size-icon-md" })
                 }
               )
-            ] }, E)),
+            ] }, M)),
             /* @__PURE__ */ c(
               ne,
               {
@@ -3318,9 +3318,9 @@ const hn = ({
                 size: "sm",
                 leftIcon: /* @__PURE__ */ e(ct, { className: "size-icon-sm" }),
                 onClick: ae,
-                disabled: N,
+                disabled: y,
                 children: [
-                  C.label,
+                  k.label,
                   " toevoegen"
                 ]
               }
@@ -3331,22 +3331,22 @@ const hn = ({
           return null;
       }
     },
-    [b, $, _, x, f, I]
+    [x, D, E, b, h, I]
   ), re = ue(
-    (C) => {
-      if (C.conditional && !C.conditional(b))
+    (k) => {
+      if (k.conditional && !k.conditional(x))
         return null;
-      const i = C.items.filter((N) => !(N.hidden || N.conditional && !N.conditional(b)));
+      const i = k.items.filter((y) => !(y.hidden || y.conditional && !y.conditional(x)));
       if (i.length === 0) return null;
       const S = d(
-        C.layout === "flex" ? "flex flex-wrap gap-3" : "grid gap-3",
-        C.layout !== "flex" && {
-          "grid-cols-1": !C.columns || C.columns === 1,
-          "grid-cols-2": C.columns === 2,
-          "grid-cols-3": C.columns === 3,
-          "grid-cols-4": C.columns === 4
+        k.layout === "flex" ? "flex flex-wrap gap-3" : "grid gap-3",
+        k.layout !== "flex" && {
+          "grid-cols-1": !k.columns || k.columns === 1,
+          "grid-cols-2": k.columns === 2,
+          "grid-cols-3": k.columns === 3,
+          "grid-cols-4": k.columns === 4
         },
-        C.className
+        k.className
       );
       return /* @__PURE__ */ c(
         "div",
@@ -3354,54 +3354,54 @@ const hn = ({
           className: "flex flex-col gap-4 px-5 py-4 not-first:border-t not-first:border-border-subtle sm:flex-row sm:gap-5",
           children: [
             /* @__PURE__ */ c("div", { className: "w-full shrink-0 sm:w-form-label", children: [
-              /* @__PURE__ */ e("span", { className: "text-sm font-semibold text-text", children: C.title }),
-              C.description && /* @__PURE__ */ e("p", { className: "mt-1 text-xs leading-4 text-text-subtle", children: C.description })
+              /* @__PURE__ */ e("span", { className: "text-sm font-semibold text-text", children: k.title }),
+              k.description && /* @__PURE__ */ e("p", { className: "mt-1 text-xs leading-4 text-text-subtle", children: k.description })
             ] }),
-            /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ e("div", { className: S, children: i.map((N) => {
-              const T = $[N.name] ? _[N.name] : void 0;
+            /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ e("div", { className: S, children: i.map((y) => {
+              const A = D[y.name] ? E[y.name] : void 0;
               return /* @__PURE__ */ c(
                 "div",
                 {
                   className: d(
                     "flex min-w-0 flex-col gap-1.5",
-                    N.type === "checkbox" && "justify-center"
+                    y.type === "checkbox" && "justify-center"
                   ),
                   style: {
-                    width: typeof N.width == "string" ? N.width : void 0,
-                    gridColumn: typeof N.width == "number" ? `span ${N.width} / span ${N.width}` : void 0
+                    width: typeof y.width == "string" ? y.width : void 0,
+                    gridColumn: typeof y.width == "number" ? `span ${y.width} / span ${y.width}` : void 0
                   },
                   children: [
-                    N.type !== "custom" && N.type !== "checkbox" && /* @__PURE__ */ c("label", { className: "block text-xs font-semibold uppercase tracking-label text-text-subtle", children: [
-                      N.label,
-                      N.required && /* @__PURE__ */ e("span", { className: "ml-1 text-danger-fg", children: "*" })
+                    y.type !== "custom" && y.type !== "checkbox" && /* @__PURE__ */ c("label", { className: "block text-xs font-semibold uppercase tracking-label text-text-subtle", children: [
+                      y.label,
+                      y.required && /* @__PURE__ */ e("span", { className: "ml-1 text-danger-fg", children: "*" })
                     ] }),
-                    W(N),
-                    N.help && !T && /* @__PURE__ */ e("p", { className: "text-xs leading-4 text-text-subtle", children: N.help })
+                    K(y),
+                    y.help && !A && /* @__PURE__ */ e("p", { className: "text-xs leading-4 text-text-subtle", children: y.help })
                   ]
                 },
-                N.name
+                y.name
               );
             }) }) })
           ]
         },
-        C.id
+        k.id
       );
     },
-    [b, $, _, W]
+    [x, D, E, K]
   ), P = d(
     "overflow-hidden rounded-lg border border-border bg-surface",
     {
-      "max-w-md": f === "sm",
-      "max-w-2xl": f === "md",
-      "max-w-4xl": f === "lg",
-      "max-w-full": f === "full"
+      "max-w-md": h === "sm",
+      "max-w-2xl": h === "md",
+      "max-w-4xl": h === "lg",
+      "max-w-full": h === "full"
     },
     p
-  ), ce = f === "full" ? "md" : f;
-  return /* @__PURE__ */ c("form", { ref: w, onSubmit: q, className: P, children: [
-    !y && /* @__PURE__ */ e("button", { type: "submit", className: "hidden", tabIndex: -1, "aria-hidden": !0 }),
+  ), ce = h === "full" ? "md" : h;
+  return /* @__PURE__ */ c("form", { ref: C, onSubmit: q, className: P, children: [
+    !N && /* @__PURE__ */ e("button", { type: "submit", className: "hidden", tabIndex: -1, "aria-hidden": !0 }),
     /* @__PURE__ */ e("div", { className: "flex flex-col", children: t.map(re) }),
-    /* @__PURE__ */ e("div", { className: "flex items-center gap-2 border-t border-border-subtle bg-surface-sunk px-5 py-3", children: y && /* @__PURE__ */ c(xe, { children: [
+    /* @__PURE__ */ e("div", { className: "flex items-center gap-2 border-t border-border-subtle bg-surface-sunk px-5 py-3", children: N && /* @__PURE__ */ c(xe, { children: [
       /* @__PURE__ */ e("div", { className: "ml-auto" }),
       s && /* @__PURE__ */ e(
         ne,
@@ -3409,7 +3409,7 @@ const hn = ({
           type: "button",
           variant: m.variant ?? "ghost",
           size: m.size || ce,
-          disabled: m.disabled || x,
+          disabled: m.disabled || b,
           onClick: s,
           className: m.className,
           children: m.label
@@ -3421,8 +3421,8 @@ const hn = ({
           type: "submit",
           variant: u.variant,
           size: u.size || ce,
-          disabled: u.disabled || x,
-          loading: x,
+          disabled: u.disabled || b,
+          loading: b,
           className: u.className,
           children: u.label
         }
@@ -3889,20 +3889,20 @@ const zn = ({
   showError: l = !0,
   fallback: u,
   loadingContent: m,
-  errorContent: y,
-  className: h,
-  onLoad: f,
-  onError: x,
+  errorContent: N,
+  className: f,
+  onLoad: h,
+  onError: b,
   ...p
 }) => {
-  const [w, g] = B(!0), [b, A] = B(!1), [_, K] = B(t), $ = (P) => {
-    g(!1), A(!1), f?.(P);
+  const [C, g] = R(!0), [x, _] = R(!1), [E, W] = R(t), D = (P) => {
+    g(!1), _(!1), h?.(P);
   }, X = (P) => {
-    if (g(!1), A(!0), u && _ !== u) {
-      K(u), A(!1), g(!0);
+    if (g(!1), _(!0), u && E !== u) {
+      W(u), _(!1), g(!0);
       return;
     }
-    x?.(P);
+    b?.(P);
   }, U = d(
     "relative overflow-hidden bg-surface-hover",
     // Size variants
@@ -3930,17 +3930,17 @@ const zn = ({
       "rounded-xl": a === "xl",
       "rounded-full": a === "full"
     },
-    h
+    f
   ), I = d(
     "w-full h-full object-cover transition-opacity duration-fast",
     {
-      "opacity-0": w || b,
-      "opacity-100": !w && !b
+      "opacity-0": C || x,
+      "opacity-100": !C && !x
     }
   ), q = d(
     "absolute inset-0 flex items-center justify-center",
     "text-text-muted"
-  ), W = /* @__PURE__ */ e("div", { className: "animate-pulse", children: /* @__PURE__ */ e("div", { className: "w-6 h-6 bg-surface-hover rounded" }) }), re = /* @__PURE__ */ c("div", { className: "text-center", children: [
+  ), K = /* @__PURE__ */ e("div", { className: "animate-pulse", children: /* @__PURE__ */ e("div", { className: "w-6 h-6 bg-surface-hover rounded" }) }), re = /* @__PURE__ */ c("div", { className: "text-center", children: [
     /* @__PURE__ */ e(Y, { icon: dt, size: "lg", className: "mx-auto mb-1" }),
     /* @__PURE__ */ e("span", { className: "text-xs", children: "Failed to load" })
   ] });
@@ -3949,15 +3949,15 @@ const zn = ({
       "img",
       {
         ...p,
-        src: _,
+        src: E,
         alt: r,
         className: I,
-        onLoad: $,
+        onLoad: D,
         onError: X
       }
     ),
-    w && o && /* @__PURE__ */ e("div", { className: q, children: m || W }),
-    b && l && /* @__PURE__ */ e("div", { className: q, children: y || re })
+    C && o && /* @__PURE__ */ e("div", { className: q, children: m || K }),
+    x && l && /* @__PURE__ */ e("div", { className: q, children: N || re })
   ] });
 };
 function En({
@@ -3970,56 +3970,56 @@ function En({
   onSelect: l,
   onActiveIndexChange: u,
   isActive: m,
-  unread: y,
-  dimmed: h,
-  groupBy: f,
-  groups: x,
+  unread: N,
+  dimmed: f,
+  groupBy: h,
+  groups: b,
   renderGroupHeader: p,
-  stickyGroupHeaders: w = !1,
+  stickyGroupHeaders: C = !1,
   collapsibleGroups: g = !1,
-  hideGroupCount: b = !1,
-  selectable: A = !1,
-  selectedItems: _ = [],
-  onSelectionChange: K,
-  bulkActions: $,
+  hideGroupCount: x = !1,
+  selectable: _ = !1,
+  selectedItems: E = [],
+  onSelectionChange: W,
+  bulkActions: D,
   header: X,
   stickyHeader: U = !1,
   bordered: I = !1,
   emptyContent: q,
-  loading: W = !1,
+  loading: K = !1,
   loadingRows: re = 4,
   className: P,
   "aria-label": ce
 }) {
-  const [C, i] = oe.useState(
+  const [k, i] = oe.useState(
     () => Object.fromEntries(
-      (x ?? []).filter((z) => z.defaultCollapsed).map((z) => [z.id, !0])
+      (b ?? []).filter((z) => z.defaultCollapsed).map((z) => [z.id, !0])
     )
-  ), S = oe.useRef(null), N = (z) => {
+  ), S = oe.useRef(null), y = (z) => {
     if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(z.key)) return;
     const F = Array.from(
       S.current?.querySelectorAll("li[data-list-row]") ?? []
     );
     if (F.length === 0) return;
     z.preventDefault();
-    const H = F.indexOf(document.activeElement), M = z.key === "Home" ? 0 : z.key === "End" ? F.length - 1 : z.key === "ArrowDown" ? (H + 1) % F.length : (H - 1 + F.length) % F.length;
-    F[M]?.focus();
-  }, T = (z, R) => r ? r(z, R) : R, k = (z) => _.includes(z), ee = (z, R) => {
-    K && K(
-      R ? [..._, z] : _.filter((F) => F !== z)
+    const H = F.indexOf(document.activeElement), $ = z.key === "Home" ? 0 : z.key === "End" ? F.length - 1 : z.key === "ArrowDown" ? (H + 1) % F.length : (H - 1 + F.length) % F.length;
+    F[$]?.focus();
+  }, A = (z, B) => r ? r(z, B) : B, w = (z) => E.includes(z), ee = (z, B) => {
+    W && W(
+      B ? [...E, z] : E.filter((F) => F !== z)
     );
-  }, ae = (z) => K?.(z ? [...t] : []), le = d(
+  }, ae = (z) => W?.(z ? [...t] : []), le = d(
     "flex flex-col",
     I && "overflow-hidden rounded-lg border border-border-subtle",
     P
   );
-  if (W)
-    return /* @__PURE__ */ e("div", { className: le, children: Array.from({ length: re }).map((z, R) => /* @__PURE__ */ c(
+  if (K)
+    return /* @__PURE__ */ e("div", { className: le, children: Array.from({ length: re }).map((z, B) => /* @__PURE__ */ c(
       "div",
       {
         className: d(
           "flex animate-pulse items-center gap-3 px-4 py-2",
-          n === "divided" && R > 0 && "border-t border-border-subtle"
+          n === "divided" && B > 0 && "border-t border-border-subtle"
         ),
         children: [
           /* @__PURE__ */ e("span", { className: "size-tile-sm shrink-0 rounded-md bg-surface-hover" }),
@@ -4028,12 +4028,12 @@ function En({
           /* @__PURE__ */ e("span", { className: "h-3 w-8 shrink-0 rounded-sm bg-surface-hover" })
         ]
       },
-      `skeleton-${R}`
+      `skeleton-${B}`
     )) });
   if (t.length === 0 && q)
     return /* @__PURE__ */ e("div", { className: le, children: q });
-  const G = t.length > 0 && _.length === t.length, j = _.length > 0 && !G, E = (z, R, F) => {
-    const H = m?.(z, R) ?? !1, M = y?.(z, R) ?? !1, L = h?.(z, R) ?? !1, te = A && k(z);
+  const G = t.length > 0 && E.length === t.length, j = E.length > 0 && !G, M = (z, B, F) => {
+    const H = m?.(z, B) ?? !1, $ = N?.(z, B) ?? !1, L = f?.(z, B) ?? !1, te = _ && w(z);
     return /* @__PURE__ */ c(
       "li",
       {
@@ -4042,10 +4042,10 @@ function En({
           tabIndex: 0,
           "data-list-row": "",
           "aria-current": H || void 0,
-          onClick: () => l(z, R),
-          onFocus: () => u?.(R),
+          onClick: () => l(z, B),
+          onFocus: () => u?.(B),
           onKeyDown: (v) => {
-            v.key !== "Enter" && v.key !== " " || (v.preventDefault(), l(z, R));
+            v.key !== "Enter" && v.key !== " " || (v.preventDefault(), l(z, B));
           }
         } : {},
         className: d(
@@ -4054,14 +4054,14 @@ function En({
           n === "divided" && !F && "border-t border-border-subtle",
           l && "cursor-pointer focus-visible:outline-none focus-visible:focus-ring",
           H || te ? "bg-accent-soft text-text" : l && "hover:bg-surface-hover",
-          M && "font-bold",
+          $ && "font-bold",
           L && "opacity-55"
         ),
         children: [
-          A && /* @__PURE__ */ e("span", { onClick: (v) => v.stopPropagation(), children: /* @__PURE__ */ e(
+          _ && /* @__PURE__ */ e("span", { onClick: (v) => v.stopPropagation(), children: /* @__PURE__ */ e(
             pe,
             {
-              checked: k(z),
+              checked: w(z),
               onChange: (v) => ee(z, v.target.checked),
               "aria-label": "Rij selecteren"
             }
@@ -4073,27 +4073,27 @@ function En({
               className: "mt-2 size-1.5 shrink-0 self-start rounded-full bg-border-strong"
             }
           ),
-          s && /* @__PURE__ */ e("span", { className: "shrink-0", children: s(z, R) }),
-          /* @__PURE__ */ e("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: a ? a(z, R) : String(z) }),
-          o && /* @__PURE__ */ e("span", { className: "shrink-0 text-xs text-text-subtle", children: o(z, R) })
+          s && /* @__PURE__ */ e("span", { className: "shrink-0", children: s(z, B) }),
+          /* @__PURE__ */ e("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: a ? a(z, B) : String(z) }),
+          o && /* @__PURE__ */ e("span", { className: "shrink-0 text-xs text-text-subtle", children: o(z, B) })
         ]
       },
-      T(z, R)
+      A(z, B)
     );
-  }, D = (() => {
-    if (!f)
-      return t.map((H, M) => E(H, M, M === 0));
+  }, T = (() => {
+    if (!h)
+      return t.map((H, $) => M(H, $, $ === 0));
     const z = /* @__PURE__ */ new Map();
-    t.forEach((H, M) => {
-      const L = f(H, M);
-      z.has(L) || z.set(L, []), z.get(L).push({ item: H, index: M });
+    t.forEach((H, $) => {
+      const L = h(H, $);
+      z.has(L) || z.set(L, []), z.get(L).push({ item: H, index: $ });
     });
-    const R = x ?? [];
+    const B = b ?? [];
     return [
-      ...R.filter((H) => z.has(H.id)),
-      ...[...z.keys()].filter((H) => !R.some((M) => M.id === H)).map((H) => ({ id: H }))
-    ].flatMap((H, M) => {
-      const L = z.get(H.id) ?? [], te = g && C[H.id], v = H.title ?? H.id, V = H.count ?? L.length, Z = /* @__PURE__ */ e(
+      ...B.filter((H) => z.has(H.id)),
+      ...[...z.keys()].filter((H) => !B.some(($) => $.id === H)).map((H) => ({ id: H }))
+    ].flatMap((H, $) => {
+      const L = z.get(H.id) ?? [], te = g && k[H.id], v = H.title ?? H.id, V = H.count ?? L.length, Z = /* @__PURE__ */ e(
         "li",
         {
           onClick: g ? () => i((J) => ({ ...J, [H.id]: !J[H.id] })) : void 0,
@@ -4101,13 +4101,13 @@ function En({
             "flex items-center gap-2 bg-surface-sunk px-4 py-1.5",
             "text-xs font-semibold uppercase tracking-label text-text-subtle",
             "border-border-subtle",
-            M > 0 && "border-t",
+            $ > 0 && "border-t",
             "border-b",
-            w && "sticky z-10",
+            C && "sticky z-10",
             g && "cursor-pointer select-none hover:text-text"
           ),
           "aria-expanded": g ? !te : void 0,
-          style: w ? { top: U ? 28 : 0 } : void 0,
+          style: C ? { top: U ? 28 : 0 } : void 0,
           children: p ? p(H, L.map((J) => J.item)) : /* @__PURE__ */ c(xe, { children: [
             g && /* @__PURE__ */ e(
               Ce,
@@ -4120,7 +4120,7 @@ function En({
               }
             ),
             /* @__PURE__ */ e("span", { children: v }),
-            !b && /* @__PURE__ */ e("span", { className: "ml-auto font-normal tabular-nums", children: V })
+            !x && /* @__PURE__ */ e("span", { className: "ml-auto font-normal tabular-nums", children: V })
           ] })
         },
         `group-${H.id}`
@@ -4128,13 +4128,13 @@ function En({
       return te ? [Z] : [
         Z,
         ...L.map(
-          ({ item: J, index: O }, ie) => E(J, O, ie === 0)
+          ({ item: J, index: O }, ie) => M(J, O, ie === 0)
         )
       ];
     });
   })();
-  return /* @__PURE__ */ c("div", { ref: S, className: le, onKeyDown: l ? N : void 0, children: [
-    A && _.length > 0 && /* @__PURE__ */ c("div", { className: "flex items-center gap-3 border-b border-border-subtle bg-surface-sunk px-4 py-2", children: [
+  return /* @__PURE__ */ c("div", { ref: S, className: le, onKeyDown: l ? y : void 0, children: [
+    _ && E.length > 0 && /* @__PURE__ */ c("div", { className: "flex items-center gap-3 border-b border-border-subtle bg-surface-sunk px-4 py-2", children: [
       /* @__PURE__ */ e(
         pe,
         {
@@ -4145,10 +4145,10 @@ function En({
         }
       ),
       /* @__PURE__ */ c("span", { className: "text-xs text-text-subtle", children: [
-        _.length,
+        E.length,
         " geselecteerd"
       ] }),
-      $ && /* @__PURE__ */ e("div", { className: "ml-auto flex gap-2", children: $ })
+      D && /* @__PURE__ */ e("div", { className: "ml-auto flex gap-2", children: D })
     ] }),
     X && /* @__PURE__ */ e(
       "div",
@@ -4161,7 +4161,7 @@ function En({
         children: X
       }
     ),
-    /* @__PURE__ */ e("ul", { "aria-label": ce, className: "flex flex-col", children: D })
+    /* @__PURE__ */ e("ul", { "aria-label": ce, className: "flex flex-col", children: T })
   ] });
 }
 function Mn({
@@ -4215,22 +4215,22 @@ const Dn = ({
   className: l,
   backLabel: u = "Back",
   backClassName: m,
-  onBack: y,
-  editable: h = !1,
-  onTitleChange: f
+  onBack: N,
+  editable: f = !1,
+  onTitleChange: h
 }) => {
-  const [x, p] = B(!1), [w, g] = B(r), b = se(null);
+  const [b, p] = R(!1), [C, g] = R(r), x = se(null);
   Q(() => {
     g(r);
   }, [r]), Q(() => {
-    x && b.current && (b.current.focus(), b.current.select());
-  }, [x]);
-  const A = () => {
-    h && p(!0);
-  }, _ = () => {
-    p(!1), w.trim() !== "" && w !== r && f ? f(w.trim()) : g(r);
-  }, K = ($) => {
-    $.key === "Enter" ? b.current?.blur() : $.key === "Escape" && (g(r), p(!1));
+    b && x.current && (x.current.focus(), x.current.select());
+  }, [b]);
+  const _ = () => {
+    f && p(!0);
+  }, E = () => {
+    p(!1), C.trim() !== "" && C !== r && h ? h(C.trim()) : g(r);
+  }, W = (D) => {
+    D.key === "Enter" ? x.current?.blur() : D.key === "Escape" && (g(r), p(!1));
   };
   return /* @__PURE__ */ c(
     "div",
@@ -4244,38 +4244,38 @@ const Dn = ({
       children: [
         /* @__PURE__ */ c("div", { className: "flex flex-row sm:items-start sm:justify-between items-center gap-4", children: [
           /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ c("div", { className: "flex items-start gap-4 text-text", children: [
-            y && /* @__PURE__ */ e(ne, { variant: "outline", onClick: y, leftIcon: /* @__PURE__ */ e(Y, { icon: ke, size: "sm" }), iconOnly: !0 }),
+            N && /* @__PURE__ */ e(ne, { variant: "outline", onClick: N, leftIcon: /* @__PURE__ */ e(Y, { icon: ke, size: "sm" }), iconOnly: !0 }),
             /* @__PURE__ */ c("div", { className: "min-w-0 flex-1", children: [
-              x ? /* @__PURE__ */ e(
+              b ? /* @__PURE__ */ e(
                 "input",
                 {
-                  ref: b,
+                  ref: x,
                   type: "text",
-                  value: w,
-                  onChange: ($) => g($.target.value),
-                  onBlur: _,
-                  onKeyDown: K,
+                  value: C,
+                  onChange: (D) => g(D.target.value),
+                  onBlur: E,
+                  onKeyDown: W,
                   className: "text-1xl font-semibold bg-transparent border-b-1 border-border rounded-lg outline-none focus:border-none px-1 -mx-1 min-w-0 w-full"
                 }
               ) : /* @__PURE__ */ c("div", { className: "group flex items-baseline gap-2.5 min-w-0", children: [
                 /* @__PURE__ */ e(
                   "h2",
                   {
-                    onClick: A,
+                    onClick: _,
                     className: d(
                       "text-xl font-semibold truncate",
-                      h && "cursor-pointer"
+                      f && "cursor-pointer"
                     ),
-                    title: h ? "Click to edit" : void 0,
+                    title: f ? "Click to edit" : void 0,
                     children: r
                   }
                 ),
                 n && /* @__PURE__ */ e("span", { className: "shrink-0 text-base text-text-muted truncate", children: n }),
-                h && /* @__PURE__ */ e(
+                f && /* @__PURE__ */ e(
                   ut,
                   {
                     size: 15,
-                    onClick: A,
+                    onClick: _,
                     className: "shrink-0 cursor-pointer text-text-muted opacity-0 group-hover:opacity-100 transition-opacity"
                   }
                 )
@@ -4284,29 +4284,29 @@ const Dn = ({
             ] })
           ] }) }),
           a.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-wrap sm:flex-nowrap gap-2 sm:gap-3", children: a.map(
-            ($) => $.render ? /* @__PURE__ */ e(oe.Fragment, { children: $.render() }, $.id) : $.splitOptions && $.splitOptions.length > 0 ? /* @__PURE__ */ e(
-              Be,
+            (D) => D.render ? /* @__PURE__ */ e(oe.Fragment, { children: D.render() }, D.id) : D.splitOptions && D.splitOptions.length > 0 ? /* @__PURE__ */ e(
+              Re,
               {
-                label: $.label,
-                onClick: $.onClick,
-                icon: $.icon,
-                variant: $.variant === "primary" ? "primary" : "outline",
-                options: $.splitOptions,
-                disabled: $.disabled
+                label: D.label,
+                onClick: D.onClick,
+                icon: D.icon,
+                variant: D.variant === "primary" ? "primary" : "outline",
+                options: D.splitOptions,
+                disabled: D.disabled
               },
-              $.id
+              D.id
             ) : /* @__PURE__ */ e(
               ne,
               {
-                variant: $.variant ?? "secondary",
+                variant: D.variant ?? "secondary",
                 onClick: (X) => {
-                  X.stopPropagation(), X.target.blur(), $.onClick();
+                  X.stopPropagation(), X.target.blur(), D.onClick();
                 },
-                disabled: $.disabled,
-                leftIcon: $.icon,
-                children: $.label
+                disabled: D.disabled,
+                leftIcon: D.icon,
+                children: D.label
               },
-              $.id
+              D.id
             )
           ) })
         ] }),
@@ -4331,7 +4331,7 @@ const Dn = ({
   o && /* @__PURE__ */ e("div", { className: "flex-1 min-w-0", children: o }),
   t.length > 0 && /* @__PURE__ */ e("div", { className: d("flex flex-wrap gap-4", !o && "ml-auto"), children: t.map(
     (l) => l.splitOptions && l.splitOptions.length > 0 ? /* @__PURE__ */ e(
-      Be,
+      Re,
       {
         label: l.label,
         onClick: l.onClick,
@@ -4490,26 +4490,26 @@ const Pn = ({
   size: n = "md",
   className: s
 }) => {
-  const a = (h) => {
-    if (!h) return "-";
+  const a = (f) => {
+    if (!f) return "-";
     try {
-      return new Date(h).toLocaleDateString("nl-NL", {
+      return new Date(f).toLocaleDateString("nl-NL", {
         year: "numeric",
         month: "long",
         day: "numeric"
       });
     } catch {
-      return String(h);
+      return String(f);
     }
-  }, o = (h) => h ? "Ja" : "Nee", l = (h, f) => {
-    if (!f) return String(h || "-");
-    const x = f.find((p) => p.value === h);
-    return x ? x.label : String(h || "-");
+  }, o = (f) => f ? "Ja" : "Nee", l = (f, h) => {
+    if (!h) return String(f || "-");
+    const b = h.find((p) => p.value === f);
+    return b ? b.label : String(f || "-");
   }, u = ue(
-    (h) => {
-      const f = Ir(r, h.name);
-      if (h.type === "array") {
-        const p = f;
+    (f) => {
+      const h = Ir(r, f.name);
+      if (f.type === "array") {
+        const p = h;
         return !p || p.length === 0 ? /* @__PURE__ */ e(
           de,
           {
@@ -4518,7 +4518,7 @@ const Pn = ({
             className: "text-text-muted",
             children: "Geen items"
           }
-        ) : /* @__PURE__ */ e("div", { className: "space-y-3", children: p.map((w, g) => /* @__PURE__ */ c(
+        ) : /* @__PURE__ */ e("div", { className: "space-y-3", children: p.map((C, g) => /* @__PURE__ */ c(
           "div",
           {
             className: "p-4 border border-border rounded-xl space-y-3",
@@ -4531,53 +4531,53 @@ const Pn = ({
                   weight: "medium",
                   className: "text-text-muted",
                   children: [
-                    h.label,
+                    f.label,
                     " ",
                     g + 1
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: h.arrayFields?.map((b) => {
-                const A = w?.[b.name];
-                let _ = "-";
-                switch (b.type) {
+              /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: f.arrayFields?.map((x) => {
+                const _ = C?.[x.name];
+                let E = "-";
+                switch (x.type) {
                   case "text":
                   case "email":
                   case "number":
                   case "tel":
                   case "url":
                   case "textarea":
-                    _ = A || "-";
+                    E = _ || "-";
                     break;
                   case "select":
                   case "radio":
-                    _ = l(
-                      A,
-                      b.options
+                    E = l(
+                      _,
+                      x.options
                     );
                     break;
                   case "checkbox":
-                    _ = o(A);
+                    E = o(_);
                     break;
                   case "date":
-                    _ = a(A);
+                    E = a(_);
                     break;
                   case "custom":
-                    _ = b.customComponent?.({
-                      value: A
+                    E = x.customComponent?.({
+                      value: _
                     });
                     break;
                   default:
-                    _ = String(A || "-");
+                    E = String(_ || "-");
                 }
-                return b.format && (_ = b.format(A, w)), /* @__PURE__ */ c("div", { className: "space-y-1", children: [
+                return x.format && (E = x.format(_, C)), /* @__PURE__ */ c("div", { className: "space-y-1", children: [
                   /* @__PURE__ */ e(
                     de,
                     {
                       variant: "label",
                       size: "xs",
                       className: "text-text-muted",
-                      children: b.label
+                      children: x.label
                     }
                   ),
                   /* @__PURE__ */ e(
@@ -4586,20 +4586,20 @@ const Pn = ({
                       variant: "body",
                       size: "sm",
                       className: "text-text",
-                      children: _
+                      children: E
                     }
                   )
-                ] }, b.name);
+                ] }, x.name);
               }) })
             ]
           },
           g
         )) });
       }
-      if (h.type === "custom" && h.customComponent)
-        return h.customComponent({ value: f });
-      if (h.format) {
-        const p = h.format(f, r);
+      if (f.type === "custom" && f.customComponent)
+        return f.customComponent({ value: h });
+      if (f.format) {
+        const p = f.format(h, r);
         return /* @__PURE__ */ e(
           de,
           {
@@ -4610,31 +4610,31 @@ const Pn = ({
           }
         );
       }
-      let x = "-";
-      switch (h.type) {
+      let b = "-";
+      switch (f.type) {
         case "text":
         case "email":
         case "password":
         case "number":
         case "tel":
         case "url":
-          x = f ? String(f) : "-";
+          b = h ? String(h) : "-";
           break;
         case "textarea":
-          x = f ? /* @__PURE__ */ e("div", { className: "whitespace-pre-wrap", children: String(f || "-") }) : "-";
+          b = h ? /* @__PURE__ */ e("div", { className: "whitespace-pre-wrap", children: String(h || "-") }) : "-";
           break;
         case "select":
         case "radio":
-          x = l(f, h.options);
+          b = l(h, f.options);
           break;
         case "checkbox":
-          x = o(f);
+          b = o(h);
           break;
         case "date":
-          x = a(f);
+          b = a(h);
           break;
         default:
-          x = f ? String(f) : "-";
+          b = h ? String(h) : "-";
       }
       return /* @__PURE__ */ e(
         de,
@@ -4642,30 +4642,30 @@ const Pn = ({
           variant: "body",
           size: "sm",
           className: "text-text",
-          children: x
+          children: b
         }
       );
     },
     [r]
   ), m = ue(
-    (h) => {
-      if (h.conditional && !h.conditional(r))
+    (f) => {
+      if (f.conditional && !f.conditional(r))
         return null;
-      const f = h.items.filter((p) => !(p.hidden || p.conditional && !p.conditional(r)));
-      if (f.length === 0) return null;
-      const x = d(
+      const h = f.items.filter((p) => !(p.hidden || p.conditional && !p.conditional(r)));
+      if (h.length === 0) return null;
+      const b = d(
         "space-y-4",
         {
-          "grid gap-4": h.layout === "grid",
-          "flex flex-wrap gap-4": h.layout === "flex"
+          "grid gap-4": f.layout === "grid",
+          "flex flex-wrap gap-4": f.layout === "flex"
         },
-        h.layout === "grid" && {
-          "grid-cols-1": !h.columns || h.columns === 1,
-          "grid-cols-2": h.columns === 2,
-          "grid-cols-3": h.columns === 3,
-          "grid-cols-4": h.columns === 4
+        f.layout === "grid" && {
+          "grid-cols-1": !f.columns || f.columns === 1,
+          "grid-cols-2": f.columns === 2,
+          "grid-cols-3": f.columns === 3,
+          "grid-cols-4": f.columns === 4
         },
-        h.className
+        f.className
       );
       return /* @__PURE__ */ c(
         "div",
@@ -4680,20 +4680,20 @@ const Pn = ({
                   size: "lg",
                   weight: "semibold",
                   className: "text-text",
-                  children: h.title
+                  children: f.title
                 }
               ),
-              h.description && /* @__PURE__ */ e(
+              f.description && /* @__PURE__ */ e(
                 de,
                 {
                   variant: "body",
                   size: "sm",
                   className: "text-text-muted mt-1",
-                  children: h.description
+                  children: f.description
                 }
               )
             ] }),
-            /* @__PURE__ */ e("div", { className: "md:col-span-2", children: /* @__PURE__ */ e("div", { className: x, children: f.map((p) => /* @__PURE__ */ c(
+            /* @__PURE__ */ e("div", { className: "md:col-span-2", children: /* @__PURE__ */ e("div", { className: b, children: h.map((p) => /* @__PURE__ */ c(
               "div",
               {
                 className: "space-y-1",
@@ -4718,11 +4718,11 @@ const Pn = ({
             )) }) })
           ]
         },
-        h.id
+        f.id
       );
     },
     [r, u]
-  ), y = d(
+  ), N = d(
     "space-y-6",
     {
       "max-w-md": n === "sm",
@@ -4732,7 +4732,7 @@ const Pn = ({
     },
     s
   );
-  return /* @__PURE__ */ e("div", { className: y, children: /* @__PURE__ */ e("div", { className: "space-y-8", children: t.map(m) }) });
+  return /* @__PURE__ */ e("div", { className: N, children: /* @__PURE__ */ e("div", { className: "space-y-8", children: t.map(m) }) });
 }, qe = ({ item: t, isSelectedHandler: r, onClick: n, depth: s = 0 }) => {
   const a = !!(t.children && t.children.length > 0), o = r ? r(t.path) : !1;
   if (a)
@@ -4749,7 +4749,7 @@ const Pn = ({
           ]
         }
       ),
-      /* @__PURE__ */ e("ul", { className: "flex flex-col gap-0.5", children: t.children?.map((m, y) => /* @__PURE__ */ e(
+      /* @__PURE__ */ e("ul", { className: "flex flex-col gap-0.5", children: t.children?.map((m, N) => /* @__PURE__ */ e(
         qe,
         {
           item: m,
@@ -4757,7 +4757,7 @@ const Pn = ({
           onClick: n,
           depth: s + 1
         },
-        y
+        N
       )) })
     ] });
   const l = t.action, u = l?.visibility !== "always";
@@ -4888,18 +4888,18 @@ const Pn = ({
   children: u,
   ...m
 }) => {
-  const y = `h${t}`, h = d(
+  const N = `h${t}`, f = d(
     "font-sans text-pretty",
-    jr[r || Br(t)],
+    jr[r || Rr(t)],
     Pr[n],
     Or[s],
     Fr[a],
     o && "truncate",
     l
   );
-  return /* @__PURE__ */ e(y, { className: h, ...m, children: u });
+  return /* @__PURE__ */ e(N, { className: f, ...m, children: u });
 };
-function Br(t) {
+function Rr(t) {
   return {
     1: "2xl",
     2: "xl",
@@ -4909,7 +4909,7 @@ function Br(t) {
     6: "md"
   }[t] || "md";
 }
-const Bn = ({
+const Rn = ({
   commands: t,
   isOpen: r,
   onClose: n,
@@ -4917,44 +4917,44 @@ const Bn = ({
   initialCommandPath: a,
   initialActiveIndex: o
 }) => {
-  const [l, u] = B(""), [m, y] = B(a || []), [h, f] = B(o || 0), x = se(null), p = se(null), g = (m.length ? t.find((b) => b.id === m[0])?.subCommands || [] : t).filter(
-    (b) => b.label.toLowerCase().includes(l.toLowerCase())
+  const [l, u] = R(""), [m, N] = R(a || []), [f, h] = R(o || 0), b = se(null), p = se(null), g = (m.length ? t.find((x) => x.id === m[0])?.subCommands || [] : t).filter(
+    (x) => x.label.toLowerCase().includes(l.toLowerCase())
   );
   return Q(() => {
-    r || (u(""), y(a || []), f(o || 0));
+    r || (u(""), N(a || []), h(o || 0));
   }, [r]), Q(() => {
-    const b = (A) => {
+    const x = (_) => {
       if (r) {
-        if (A.key === "Escape")
+        if (_.key === "Escape")
           n();
-        else if (A.key === "ArrowUp")
-          f(
-            (_) => _ > 0 ? _ - 1 : g.length - 1
+        else if (_.key === "ArrowUp")
+          h(
+            (E) => E > 0 ? E - 1 : g.length - 1
           );
-        else if (A.key === "ArrowDown")
-          f(
-            (_) => _ < g.length - 1 ? _ + 1 : 0
+        else if (_.key === "ArrowDown")
+          h(
+            (E) => E < g.length - 1 ? E + 1 : 0
           );
-        else if (A.key === "Enter") {
-          const _ = g[h];
-          _ && (_.subCommands ? (y([...m, _.id]), f(0)) : _.action && (_.action(), n()));
+        else if (_.key === "Enter") {
+          const E = g[f];
+          E && (E.subCommands ? (N([...m, E.id]), h(0)) : E.action && (E.action(), n()));
         }
       }
     };
-    return document.addEventListener("keydown", b), () => document.removeEventListener("keydown", b);
-  }, [r, n, g, h, m]), Q(() => {
-    const b = (A) => {
-      x.current && !x.current.contains(A.target) && n();
+    return document.addEventListener("keydown", x), () => document.removeEventListener("keydown", x);
+  }, [r, n, g, f, m]), Q(() => {
+    const x = (_) => {
+      b.current && !b.current.contains(_.target) && n();
     };
-    return r && document.addEventListener("mousedown", b), () => document.removeEventListener("mousedown", b);
+    return r && document.addEventListener("mousedown", x), () => document.removeEventListener("mousedown", x);
   }, [r, n]), Q(() => {
     if (!r) return;
-    p.current?.querySelector(`[data-index="${h}"]`)?.scrollIntoView({ block: "nearest" });
-  }, [h, r]), r ? /* @__PURE__ */ e("div", { className: "fixed inset-0 z-modal flex items-center justify-center bg-scrim", children: /* @__PURE__ */ c(
+    p.current?.querySelector(`[data-index="${f}"]`)?.scrollIntoView({ block: "nearest" });
+  }, [f, r]), r ? /* @__PURE__ */ e("div", { className: "fixed inset-0 z-modal flex items-center justify-center bg-scrim", children: /* @__PURE__ */ c(
     "div",
     {
       className: "flex flex-col w-full max-w-lg max-h-dialog p-2 mx-auto rounded-lg border border-border shadow-modal bg-surface",
-      ref: x,
+      ref: b,
       children: [
         /* @__PURE__ */ c("div", { className: "flex items-center gap-2 px-3 flex-shrink-0", children: [
           /* @__PURE__ */ e(Se, { className: "w-4 h-4 text-text-muted shrink-0" }),
@@ -4965,7 +4965,7 @@ const Bn = ({
               autoFocus: !0,
               placeholder: s?.searchPlaceholder || "Search commands...",
               value: l,
-              onChange: (b) => u(b.target.value),
+              onChange: (x) => u(x.target.value),
               className: "w-full border-0 bg-transparent py-2 text-text focus:outline-none"
             }
           )
@@ -4977,22 +4977,22 @@ const Bn = ({
             className: "mt-2 pt-2 text-sm border-t border-border max-h-dialog-list overflow-y-auto",
             children: [
               g.length === 0 && /* @__PURE__ */ e("div", { className: "text-text-muted text-center text-sm", children: s?.noCommandsFound || "No commands found" }),
-              g.map((b, A) => /* @__PURE__ */ c(
+              g.map((x, _) => /* @__PURE__ */ c(
                 "div",
                 {
-                  "data-index": A,
-                  className: `flex items-center p-2 cursor-pointer rounded-md ${A === h ? "bg-accent-soft text-accent" : "text-text"}`,
+                  "data-index": _,
+                  className: `flex items-center p-2 cursor-pointer rounded-md ${_ === f ? "bg-accent-soft text-accent" : "text-text"}`,
                   onClick: () => {
-                    b.subCommands ? (y([...m, b.id]), f(0)) : b.action && (b.action(), n());
+                    x.subCommands ? (N([...m, x.id]), h(0)) : x.action && (x.action(), n());
                   },
-                  onMouseEnter: () => f(A),
+                  onMouseEnter: () => h(_),
                   children: [
-                    b.icon && /* @__PURE__ */ e("span", { className: "mr-3", children: b.icon }),
-                    /* @__PURE__ */ e("span", { className: "flex-grow", children: b.label }),
-                    b.subCommands && /* @__PURE__ */ e("span", { className: "text-text-muted", children: /* @__PURE__ */ e(Ce, { className: "w-4 h-4" }) })
+                    x.icon && /* @__PURE__ */ e("span", { className: "mr-3", children: x.icon }),
+                    /* @__PURE__ */ e("span", { className: "flex-grow", children: x.label }),
+                    x.subCommands && /* @__PURE__ */ e("span", { className: "text-text-muted", children: /* @__PURE__ */ e(Ce, { className: "w-4 h-4" }) })
                   ]
                 },
-                b.id
+                x.id
               ))
             ]
           }
@@ -5014,7 +5014,7 @@ const Bn = ({
       ]
     }
   ) }) : null;
-}, Rr = {
+}, Br = {
   none: "p-0",
   xs: "p-1",
   sm: "p-2",
@@ -5086,13 +5086,13 @@ const Bn = ({
     borderColor: l,
     className: u,
     children: m,
-    ...y
-  }, h) => /* @__PURE__ */ e(
+    ...N
+  }, f) => /* @__PURE__ */ e(
     "div",
     {
-      ref: h,
+      ref: f,
       className: d(
-        t && Rr[t],
+        t && Br[t],
         r && Hr[r],
         n && Vr[n],
         s && qr[s],
@@ -5101,13 +5101,13 @@ const Bn = ({
         l && Kr[l],
         u
       ),
-      ...y,
+      ...N,
       children: m
     }
   )
 );
 Ue.displayName = "Box";
-const Rn = ({ children: t, title: r, ...n }) => /* @__PURE__ */ c(
+const Bn = ({ children: t, title: r, ...n }) => /* @__PURE__ */ c(
   Ue,
   {
     background: "module",
@@ -5127,47 +5127,51 @@ function Hn({
   resourceLoader: r,
   framework: n = "react",
   fallback: s,
-  componentProps: a,
-  className: o
+  errorFallback: a,
+  componentProps: o,
+  className: l
 }) {
-  const l = se(null), [u, m] = B(!0), [y, h] = B(null), f = se(null);
-  return se(null), Q(() => {
+  const u = se(null), [m, N] = R(!0), [f, h] = R(!1), [b, p] = R(null), C = se(null);
+  se(null);
+  const g = se(r);
+  return g.current = r, Q(() => {
     let x = !0;
     return (async () => {
-      m(!0);
+      N(!0), h(!1), p(null);
       try {
-        const w = await r();
+        const E = await g.current();
         if (!x) return;
-        const g = w.component || w.default || w;
-        h(n === "react" ? () => g : () => w);
-      } catch (w) {
-        console.error(`[FederatedResource] Load failed: ${t}`, w);
+        const W = E.component || E.default || E;
+        p(n === "react" ? () => W : () => E);
+      } catch (E) {
+        console.error(`[FederatedResource] Load failed: ${t}`, E), x && h(!0);
       } finally {
-        x && m(!1);
+        x && N(!1);
       }
     })(), () => {
       x = !1;
     };
-  }, [t, r]), Q(() => {
-    if (u || !y || n === "react") return;
-    const x = l.current;
+  }, [t, n]), Q(() => {
+    if (m || !b || n === "react") return;
+    const x = u.current;
     if (x) {
       if (n === "svelte") {
-        const p = y.default || y, w = new p({ target: x, props: a || {} });
-        return f.current = w, () => w.$destroy();
+        const _ = b.default || b, E = new _({ target: x, props: o || {} });
+        return C.current = E, () => E.$destroy();
       }
-      if (y.mount) {
-        const p = y.mount({ container: x, props: a || {} });
+      if (b.mount) {
+        const _ = b.mount({ container: x, props: o || {} });
         return () => {
-          typeof p == "function" ? p() : y.unmount?.(x);
+          typeof _ == "function" ? _() : b.unmount?.(x);
         };
       }
     }
-  }, [y, n, u]), Q(() => {
-    n === "svelte" && f.current && f.current.$set?.(a);
-  }, [a, n]), /* @__PURE__ */ c("div", { ref: l, className: o, style: { display: "contents" }, children: [
-    u && s,
-    n === "react" && y && /* @__PURE__ */ e(y, { ...a })
+  }, [b, n, m]), Q(() => {
+    n === "svelte" && C.current && C.current.$set?.(o);
+  }, [o, n]), /* @__PURE__ */ c("div", { ref: u, className: l, style: { display: "contents" }, children: [
+    m && s,
+    !m && f && a,
+    n === "react" && !f && b && /* @__PURE__ */ e(b, { ...o })
   ] });
 }
 class Vn extends xt {
@@ -5206,10 +5210,10 @@ export {
   Ue as Box,
   ne as Button,
   ln as ButtonGroup,
-  Rn as Card,
+  Bn as Card,
   Sn as ChannelBadge,
   pe as Checkbox,
-  Bn as CommandPalette,
+  Rn as CommandPalette,
   xn as ConfirmDialog,
   Wt as ContentLoading,
   $e as DatePicker,
@@ -5218,7 +5222,7 @@ export {
   Vn as ErrorBoundary,
   Hn as FederatedResource,
   on as FilterChip,
-  Bt as FolderSelect,
+  Rt as FolderSelect,
   hn as Form,
   Fn as Heading,
   Y as Icon,
@@ -5245,7 +5249,7 @@ export {
   On as SidebarMenu,
   jn as SourceChip,
   yn as Spinner,
-  Be as SplitButton,
+  Re as SplitButton,
   Nn as StatusDot,
   wn as StepIndicator,
   ur as StorageInput,