@opencxh/ui-kit 3.124.11 → 3.125.0

package/dist/index.js

@@ -1,6 +1,6 @@
 import { clsx as Ke } from "clsx";
 import { jsxs as c, jsx as e, Fragment as xe } from "react/jsx-runtime";
-import { VideoOff as _e, User as Ge, MicOff as Je, Mic as Ye, X as we, ChevronDown as pe, 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 Ae, ArrowLeft as st, FolderPlus as at, Upload as lt, Folder as Le, Trash2 as ot, Plus as ct, Sparkles as it, ImageOff as dt, Pencil as ut, ArrowUpRight as mt } from "lucide-react";
+import { VideoOff as _e, 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 Ae, ArrowLeft as st, FolderPlus as at, Upload as lt, Folder as Le, 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 R, useLayoutEffect as ft, useMemo as he, useCallback as ue, createContext as ht, Component as xt } from "react";
 function d(...t) {
   return Ke(t);
@@ -82,7 +82,7 @@ const bt = {
   success: "bg-success text-text-inverse hover:opacity-90 disabled:bg-surface-hover",
   warning: "bg-warning text-text-inverse hover:opacity-90 disabled:bg-surface-hover",
   "danger-solid": "bg-danger text-text-inverse hover:opacity-90 disabled:bg-surface-hover"
-}, gt = {
+}, pt = {
   xs: "h-control-xs px-2 text-xs",
   sm: "h-control-sm px-3 text-sm",
   md: "h-control-md px-4 text-sm",
@@ -90,7 +90,7 @@ const bt = {
   xl: "h-control-xl px-6 text-base",
   "2xl": "h-control-2xl px-6 text-base",
   full: "h-control-md px-4 text-sm"
-}, pt = {
+}, gt = {
   xs: "h-control-xs w-6",
   sm: "h-control-sm w-7",
   md: "h-control-md w-8",
@@ -108,16 +108,16 @@ const bt = {
     rightIcon: o,
     iconOnly: l = !1,
     shape: u = "default",
-    className: x,
+    className: m,
     children: y,
-    disabled: f,
-    ...m
-  }, h) => {
-    const g = f || s;
+    disabled: h,
+    ...f
+  }, x) => {
+    const p = h || s;
     return /* @__PURE__ */ c(
       "button",
       {
-        ref: h,
+        ref: x,
         type: "button",
         className: d(
           "inline-flex shrink-0 items-center justify-center gap-2 cursor-pointer font-semibold",
@@ -127,14 +127,14 @@ const bt = {
           "disabled:cursor-not-allowed disabled:border-border-subtle",
           "disabled:text-text-disabled",
           bt[t],
-          l ? pt[r] : gt[r],
+          l ? gt[r] : pt[r],
           (n || r === "full") && "w-full",
           s && "cursor-wait",
-          x
+          m
         ),
-        disabled: g,
+        disabled: p,
         "aria-busy": s || void 0,
-        ...m,
+        ...f,
         children: [
           s && /* @__PURE__ */ e(
             "span",
@@ -203,7 +203,7 @@ const Xr = ({
   "aria-label": l,
   ...u
 }) => {
-  const x = typeof r == "number" ? r : yt(r), y = d(
+  const m = typeof r == "number" ? r : yt(r), y = d(
     "inline-block shrink-0",
     vt[n],
     s && [
@@ -211,8 +211,8 @@ const Xr = ({
       "focus-visible:outline-none focus-visible:focus-ring"
     ],
     o
-  ), f = {
-    size: x,
+  ), h = {
+    size: m,
     strokeWidth: 2,
     className: y,
     onClick: s ? a : void 0,
@@ -220,12 +220,12 @@ const Xr = ({
     "aria-hidden": l ? void 0 : !0,
     role: s ? "button" : void 0,
     tabIndex: s ? 0 : void 0,
-    onKeyDown: s ? (m) => {
-      (m.key === "Enter" || m.key === " ") && (m.preventDefault(), a?.());
+    onKeyDown: s ? (f) => {
+      (f.key === "Enter" || f.key === " ") && (f.preventDefault(), a?.());
     } : void 0,
     ...u
   };
-  return /* @__PURE__ */ e(t, { ...f });
+  return /* @__PURE__ */ e(t, { ...h });
 };
 function yt(t) {
   return {
@@ -252,43 +252,43 @@ function Zr({
   active: o = !1,
   caret: l = !1,
   onClear: u,
-  clearLabel: x = "Filter wissen",
+  clearLabel: m = "Filter wissen",
   onClick: y,
-  title: f,
-  className: m
+  title: h,
+  className: f
 }) {
-  const h = o && !!u, g = s === "pill" ? "rounded-full" : "rounded-md", w = d(
+  const x = o && !!u, p = s === "pill" ? "rounded-full" : "rounded-md", w = 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",
     "transition-colors duration-fast ease-out",
-    g,
+    p,
     // Picking a value outranks whatever the value happens to mean.
     o ? "bg-accent text-accent-fg" : d("border", Nt[n]),
-    m
-  ), p = /* @__PURE__ */ c(xe, { children: [
+    f
+  ), g = /* @__PURE__ */ c(xe, { children: [
     r,
     t,
-    l && /* @__PURE__ */ e(Y, { icon: pe, size: "xs" })
+    l && /* @__PURE__ */ e(Y, { icon: ge, size: "xs" })
   ] }), b = d(
     "inline-flex items-center gap-1.5 pl-3",
-    g,
-    h ? "pr-1.5" : "pr-3",
+    p,
+    x ? "pr-1.5" : "pr-3",
     "focus-visible:outline-none focus-visible:focus-ring"
   );
-  return h ? /* @__PURE__ */ c("span", { className: w, title: f, children: [
-    /* @__PURE__ */ e("button", { type: "button", onClick: y, className: b, children: p }),
+  return x ? /* @__PURE__ */ c("span", { className: w, title: h, children: [
+    /* @__PURE__ */ e("button", { type: "button", onClick: y, className: b, children: g }),
     /* @__PURE__ */ e(
       "button",
       {
         type: "button",
-        "aria-label": x,
+        "aria-label": m,
         onClick: u,
-        className: d("inline-flex h-full items-center pr-3 focus-visible:outline-none focus-visible:focus-ring", g),
+        className: d("inline-flex h-full items-center pr-3 focus-visible:outline-none focus-visible:focus-ring", p),
         children: /* @__PURE__ */ e(Y, { icon: we, size: "xs" })
       }
     )
-  ] }) : /* @__PURE__ */ e("button", { type: "button", title: f, onClick: y, className: d(w, b), children: p });
+  ] }) : /* @__PURE__ */ e("button", { type: "button", title: h, onClick: y, className: d(w, b), children: g });
 }
 const wt = {
   xs: "text-xs",
@@ -323,11 +323,11 @@ const wt = {
   className: o,
   children: l,
   href: u,
-  target: x,
+  target: m,
   rel: y,
-  ...f
+  ...h
 }) => {
-  const m = a || u && (u.startsWith("http") || u.startsWith("mailto:")), h = d(
+  const f = a || u && (u.startsWith("http") || u.startsWith("mailto:")), x = d(
     "inline-flex items-center gap-1 underline-offset-2",
     "transition-colors duration-fast ease-out",
     "focus-visible:outline-none focus-visible:focus-ring",
@@ -341,16 +341,16 @@ const wt = {
     ],
     s && "pointer-events-none cursor-not-allowed text-text-disabled opacity-50",
     o
-  ), g = {
-    ...f,
+  ), p = {
+    ...h,
     href: s ? void 0 : u,
-    target: m ? "_blank" : x,
-    rel: m ? "noopener noreferrer" : y,
+    target: f ? "_blank" : m,
+    rel: f ? "noopener noreferrer" : y,
     "aria-disabled": s || void 0
   };
-  return /* @__PURE__ */ c("a", { className: h, ...g, children: [
+  return /* @__PURE__ */ c("a", { className: x, ...p, children: [
     l,
-    m && /* @__PURE__ */ e(Xe, { className: "size-icon-sm shrink-0", "aria-hidden": !0 })
+    f && /* @__PURE__ */ e(Xe, { className: "size-icon-sm shrink-0", "aria-hidden": !0 })
   ] });
 }, St = {
   sm: "h-control-sm px-3 text-sm",
@@ -399,10 +399,10 @@ function ze(t, r, { gap: n = 6, matchWidth: s = !1, placement: a = "bottom-start
   return ft(() => {
     if (!t) return;
     const u = () => {
-      const x = r.current;
-      if (!x) return;
-      const y = x.getBoundingClientRect(), f = window.innerHeight - y.bottom, m = y.top, h = a.startsWith("top"), g = h ? m < 200 && f > m : f < 200 && m > f, w = h !== g, p = { position: "fixed" };
-      w ? (p.bottom = window.innerHeight - y.top + n, p.maxHeight = Math.max(120, m - n * 2)) : (p.top = y.bottom + n, p.maxHeight = Math.max(120, f - n * 2)), a.endsWith("end") ? p.right = window.innerWidth - y.right : p.left = y.left, s && (p.width = y.width), l(p);
+      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);
     };
     return u(), window.addEventListener("scroll", u, !0), window.addEventListener("resize", u), () => {
       window.removeEventListener("scroll", u, !0), window.removeEventListener("resize", u);
@@ -419,31 +419,31 @@ const zt = ({
   disabled: l = !1,
   triggerLabel: u
 }) => {
-  const [x, y] = R(!1), f = se(null), m = se(null), h = ze(x, m, { placement: n });
+  const [m, y] = R(!1), h = se(null), f = se(null), x = ze(m, f, { placement: n });
   Q(() => {
-    if (!x) return;
-    const p = (L) => {
-      f.current && !f.current.contains(L.target) && y(!1);
+    if (!m) return;
+    const g = (L) => {
+      h.current && !h.current.contains(L.target) && y(!1);
     }, b = (L) => {
       L.key === "Escape" && y(!1);
     };
-    return document.addEventListener("mousedown", p), document.addEventListener("keydown", b), () => {
-      document.removeEventListener("mousedown", p), document.removeEventListener("keydown", b);
+    return document.addEventListener("mousedown", g), document.addEventListener("keydown", b), () => {
+      document.removeEventListener("mousedown", g), document.removeEventListener("keydown", b);
     };
-  }, [x]);
-  const g = (p) => {
-    p.stopPropagation(), !l && y((b) => !b);
+  }, [m]);
+  const p = (g) => {
+    g.stopPropagation(), !l && y((b) => !b);
   }, w = () => y(!1);
-  return /* @__PURE__ */ c("div", { ref: f, className: d("relative inline-flex", a), children: [
+  return /* @__PURE__ */ c("div", { ref: h, className: d("relative inline-flex", a), children: [
     /* @__PURE__ */ e(
       "button",
       {
-        ref: m,
+        ref: f,
         type: "button",
-        onClick: g,
+        onClick: p,
         disabled: l,
         "aria-label": u,
-        "aria-expanded": x,
+        "aria-expanded": m,
         className: d(
           "inline-flex items-center",
           l && "cursor-not-allowed opacity-50",
@@ -452,7 +452,7 @@ const zt = ({
         children: t
       }
     ),
-    x && /* @__PURE__ */ e(
+    m && /* @__PURE__ */ e(
       "div",
       {
         className: d(
@@ -461,7 +461,7 @@ const zt = ({
           "fixed z-overlay overflow-y-auto rounded-lg border border-border bg-surface shadow-overlay",
           s
         ),
-        style: h,
+        style: x,
         children: typeof r == "function" ? r(w) : r
       }
     )
@@ -483,10 +483,10 @@ function Re({
   options: o,
   disabled: l = !1,
   loading: u = !1,
-  menuPlacement: x = "bottom-end",
+  menuPlacement: m = "bottom-end",
   menuLabel: y = "More options"
 }) {
-  const f = l || u, m = o.length > 0;
+  const h = l || u, f = o.length > 0;
   return /* @__PURE__ */ c("div", { className: d("inline-flex items-center", n === "primary" && "gap-0.5"), children: [
     /* @__PURE__ */ e(
       ne,
@@ -497,15 +497,15 @@ function Re({
         disabled: l,
         loading: u,
         leftIcon: a,
-        className: d(m && "rounded-r-none"),
+        className: d(f && "rounded-r-none"),
         children: t
       }
     ),
-    m && /* @__PURE__ */ e(
+    f && /* @__PURE__ */ e(
       zt,
       {
-        placement: x,
-        disabled: f,
+        placement: m,
+        disabled: h,
         triggerLabel: y,
         className: "min-w-menu py-1",
         trigger: /* @__PURE__ */ e(
@@ -517,30 +517,30 @@ function Re({
               "transition-colors duration-fast ease-out",
               Et[n],
               Mt[s],
-              f && "cursor-not-allowed opacity-50"
+              h && "cursor-not-allowed opacity-50"
             ),
-            children: /* @__PURE__ */ e(pe, { className: "size-icon-md" })
+            children: /* @__PURE__ */ e(ge, { className: "size-icon-md" })
           }
         ),
-        children: (h) => /* @__PURE__ */ e(xe, { children: o.map((g) => /* @__PURE__ */ c(
+        children: (x) => /* @__PURE__ */ e(xe, { children: o.map((p) => /* @__PURE__ */ c(
           "button",
           {
             type: "button",
             onClick: () => {
-              g.onClick(), h();
+              p.onClick(), x();
             },
             className: d(
               "flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm",
               "transition-colors duration-fast ease-out",
               "focus-visible:outline-none focus-visible:focus-ring",
-              g.variant === "destructive" ? "text-danger-fg hover:bg-danger-soft" : "text-text hover:bg-surface-hover"
+              p.variant === "destructive" ? "text-danger-fg hover:bg-danger-soft" : "text-text hover:bg-surface-hover"
             ),
             children: [
-              g.icon && /* @__PURE__ */ e("span", { className: "shrink-0", children: g.icon }),
-              g.label
+              p.icon && /* @__PURE__ */ e("span", { className: "shrink-0", children: p.icon }),
+              p.label
             ]
           },
-          g.id
+          p.id
         )) })
       }
     )
@@ -561,7 +561,7 @@ const $t = {
   md: "text-base",
   lg: "text-md",
   full: "text-base"
-}, ge = me(
+}, pe = me(
   ({
     label: t,
     helperText: r,
@@ -571,14 +571,14 @@ const $t = {
     containerClassName: o,
     labelClassName: l,
     className: u,
-    id: x,
+    id: m,
     ...y
-  }, f) => {
-    const m = oe.useId(), h = x || `checkbox-${m}`, g = !!n, w = oe.useRef(null), p = oe.useCallback(
+  }, h) => {
+    const f = oe.useId(), x = m || `checkbox-${f}`, p = !!n, w = oe.useRef(null), g = oe.useCallback(
       (b) => {
-        w.current = b, typeof f == "function" ? f(b) : f && typeof f == "object" && (f.current = b);
+        w.current = b, typeof h == "function" ? h(b) : h && typeof h == "object" && (h.current = b);
       },
-      [f]
+      [h]
     );
     return oe.useEffect(() => {
       w.current && (w.current.indeterminate = a);
@@ -587,10 +587,10 @@ const $t = {
         /* @__PURE__ */ e(
           "input",
           {
-            ref: p,
-            id: h,
+            ref: g,
+            id: x,
             type: "checkbox",
-            "aria-invalid": g || void 0,
+            "aria-invalid": p || void 0,
             className: d(
               // rounded-md, not rounded-sm: at 16px a 4px corner reads as a
               // hard square, and the box is the one thing you aim at in a list.
@@ -599,7 +599,7 @@ const $t = {
               "focus-visible:outline-none focus-visible:focus-ring",
               "disabled:cursor-not-allowed disabled:bg-surface-hover",
               $t[s],
-              g ? "border-danger-border" : "border-border-strong",
+              p ? "border-danger-border" : "border-border-strong",
               u
             ),
             ...y
@@ -609,10 +609,10 @@ const $t = {
           /* @__PURE__ */ e(
             "label",
             {
-              htmlFor: h,
+              htmlFor: x,
               className: d(
                 "cursor-pointer",
-                g ? "text-danger-fg" : "text-text",
+                p ? "text-danger-fg" : "text-text",
                 Tt[s],
                 l
               ),
@@ -626,7 +626,7 @@ const $t = {
     ] });
   }
 );
-ge.displayName = "Checkbox";
+pe.displayName = "Checkbox";
 const At = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }), Lt = () => /* @__PURE__ */ e(Y, { icon: ke, size: "md", color: "current" }), It = () => /* @__PURE__ */ e(Y, { icon: Ce, size: "md", color: "current" }), $e = me(({
   value: t,
   onChange: r,
@@ -636,23 +636,23 @@ const At = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
   size: o = "md",
   className: l,
   minDate: u,
-  maxDate: x,
+  maxDate: m,
   format: y = "MM/dd/yyyy",
-  withTime: f = !1
-}, m) => {
-  const [h, g] = R(!1), [w, p] = R(() => t || /* @__PURE__ */ new Date()), b = se(null), L = se(null), T = ze(h, L);
+  withTime: h = !1
+}, f) => {
+  const [x, p] = R(!1), [w, g] = R(() => t || /* @__PURE__ */ new Date()), b = se(null), L = se(null), T = ze(x, L);
   Q(() => {
     const i = (S) => {
-      b.current && !b.current.contains(S.target) && g(!1);
+      b.current && !b.current.contains(S.target) && p(!1);
     };
-    return h && document.addEventListener("mousedown", i), () => {
+    return x && document.addEventListener("mousedown", i), () => {
       document.removeEventListener("mousedown", i);
     };
-  }, [h]);
+  }, [x]);
   const _ = (i) => {
     if (!i) return "";
     const S = i.getDate().toString().padStart(2, "0"), N = (i.getMonth() + 1).toString().padStart(2, "0"), A = i.getFullYear(), k = y === "dd/MM/yyyy" ? `${S}/${N}/${A}` : y === "yyyy-MM-dd" ? `${A}-${N}-${S}` : `${N}/${S}/${A}`;
-    return f ? `${k} ${$(i)}` : k;
+    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;
@@ -666,20 +666,20 @@ const At = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
       k.push(new Date(ee)), ee.setDate(ee.getDate() + 1);
     return k;
   }, j = (i) => {
-    if (i.getMonth() === w.getMonth() && !(u && i < u) && !(x && i > x)) {
-      if (f) {
+    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);
         return;
       }
-      r?.(i), g(!1);
+      r?.(i), p(!1);
     }
   }, q = () => {
-    p(new Date(w.getFullYear(), w.getMonth() - 1, 1));
+    g(new Date(w.getFullYear(), w.getMonth() - 1, 1));
   }, K = () => {
-    p(new Date(w.getFullYear(), w.getMonth() + 1, 1));
+    g(new Date(w.getFullYear(), w.getMonth() + 1, 1));
   }, re = () => {
-    r?.(null), g(!1);
+    r?.(null), p(!1);
   }, O = d(
     "w-full border border-border rounded-md transition-colors duration-fast",
     "bg-surface text-text",
@@ -712,14 +712,14 @@ const At = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
       /* @__PURE__ */ e(
         "input",
         {
-          ref: m,
+          ref: f,
           type: "text",
           value: _(t ?? null),
           placeholder: n,
           disabled: s,
           required: a,
           readOnly: !0,
-          onClick: () => !s && g(!h),
+          onClick: () => !s && p(!x),
           className: d(O, "pr-10 cursor-pointer")
         }
       ),
@@ -727,14 +727,14 @@ const At = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
         "button",
         {
           type: "button",
-          onClick: () => !s && g(!h),
+          onClick: () => !s && p(!x),
           disabled: s,
           className: "absolute inset-y-0 right-0 flex items-center pr-3 text-text-muted hover:text-text-muted",
           children: /* @__PURE__ */ e(At, {})
         }
       )
     ] }),
-    h && /* @__PURE__ */ c("div", { style: T, className: "fixed z-overlay overflow-auto rounded-lg border border-border bg-surface p-4 shadow-overlay min-w-panel", children: [
+    x && /* @__PURE__ */ c("div", { style: T, 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",
@@ -760,7 +760,7 @@ const At = () => /* @__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(), A = t && i.toDateString() === t.toDateString(), k = i.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), ee = !N || u && i < u || x && i > x;
+        const N = i.getMonth() === w.getMonth(), A = t && i.toDateString() === t.toDateString(), k = i.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), ee = !N || u && i < u || m && i > m;
         return /* @__PURE__ */ e(
           "button",
           {
@@ -780,7 +780,7 @@ const At = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
           S
         );
       }) }),
-      f && /* @__PURE__ */ c("div", { className: "mt-3 flex items-center gap-2 border-t border-border pt-3", children: [
+      h && /* @__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",
@@ -805,7 +805,7 @@ const At = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: () => g(!1),
+            onClick: () => p(!1),
             className: "text-sm text-info-fg hover:underline",
             children: "Close"
           }
@@ -828,19 +828,19 @@ const At = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
     disabled: o = !1,
     options: l,
     placeholder: u,
-    containerClassName: x,
+    containerClassName: m,
     labelClassName: y,
-    className: f,
-    id: m,
-    searchable: h,
-    multiple: g,
+    className: h,
+    id: f,
+    searchable: x,
+    multiple: p,
     value: w,
-    onChange: p,
+    onChange: g,
     allowCreate: b,
     onCreateOption: L,
     ...T
   }, _) => {
-    const $ = m || `select-${Math.random().toString(36).substr(2, 9)}`, X = !!n, [W, j] = oe.useState(!1), [q, K] = oe.useState(""), re = oe.useRef(null), O = oe.useRef(null), ce = ze(W, O, { matchWidth: !0 }), [C, i] = oe.useState(l);
+    const $ = f || `select-${Math.random().toString(36).substr(2, 9)}`, X = !!n, [W, j] = oe.useState(!1), [q, K] = oe.useState(""), re = oe.useRef(null), O = oe.useRef(null), ce = ze(W, O, { matchWidth: !0 }), [C, i] = oe.useState(l);
     oe.useImperativeHandle(_, () => re.current), oe.useEffect(() => {
       const E = (D) => {
         re.current && !re.current.contains(D.target) && j(!1);
@@ -871,16 +871,16 @@ const At = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
       });
     }, [l, w, N, S]);
     const A = (E) => {
-      if (g) {
+      if (p) {
         const D = Array.isArray(w) ? w : [], z = D.includes(E) ? D.filter((V) => V !== E) : [...D, E];
-        p?.(z);
+        g?.(z);
       } else
-        p?.(E), j(!1), K("");
-    }, k = g ? null : C.find((E) => E.value === w), ee = g ? C.filter(
+        g?.(E), j(!1), K("");
+    }, k = p ? null : C.find((E) => E.value === w), ee = p ? C.filter(
       (E) => Array.isArray(w) && w.includes(E.value)
-    ) : [], ae = h && q ? C.filter(
+    ) : [], ae = x && q ? C.filter(
       (E) => E.label.toLowerCase().includes(q.toLowerCase())
-    ) : C, le = !!b && !!h && !!q.trim() && !S(C, q), G = (E) => {
+    ) : C, le = !!b && !!x && !!q.trim() && !S(C, q), G = (E) => {
       const D = E.trim();
       if (!D) return;
       const z = L?.(D) ?? {
@@ -888,11 +888,11 @@ const At = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
         label: D
       };
       if (S(C, z.value) || S(C, z.label)) {
-        A(z.value), K(""), g || j(!1);
+        A(z.value), K(""), p || j(!1);
         return;
       }
-      i((V) => [...V, z]), A(z.value), K(""), g || j(!1);
-    }, P = () => g ? ee.length > 0 ? ee.map((E) => E.label).join(", ") : u || "Select options" : k?.label || u || "Select an option";
+      i((V) => [...V, z]), A(z.value), K(""), p || j(!1);
+    }, P = () => p ? ee.length > 0 ? ee.map((E) => E.label).join(", ") : u || "Select options" : k?.label || u || "Select an option";
     return /* @__PURE__ */ c(
       "div",
       {
@@ -900,7 +900,7 @@ const At = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
         className: d(
           "relative flex flex-col",
           a && "w-full",
-          x
+          m
         ),
         ...T,
         children: [
@@ -933,7 +933,7 @@ const At = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
                   "bg-surface",
                   jt[s],
                   X ? "border-danger-border text-danger-fg focus-visible:focus-ring" : "border-border text-text",
-                  f
+                  h
                 ),
                 children: [
                   /* @__PURE__ */ e("span", { className: "truncate flex-1 min-w-0", children: P() }),
@@ -951,7 +951,7 @@ const At = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
               }
             ),
             W && /* @__PURE__ */ c("div", { style: ce, className: "fixed z-overlay flex flex-col overflow-hidden rounded-lg border border-border bg-surface shadow-overlay", children: [
-              h && /* @__PURE__ */ e("div", { className: "p-2", children: /* @__PURE__ */ e(
+              x && /* @__PURE__ */ e("div", { className: "p-2", children: /* @__PURE__ */ e(
                 "input",
                 {
                   type: "text",
@@ -983,18 +983,18 @@ const At = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
                 }
               ),
               /* @__PURE__ */ c("ul", { className: "min-h-0 flex-1 overflow-auto py-1", children: [
-                u && !g && /* @__PURE__ */ e(
+                u && !p && /* @__PURE__ */ e(
                   "li",
                   {
                     className: "cursor-pointer px-3 py-1.5 text-sm text-text-muted hover:bg-surface-hover",
                     onClick: () => {
-                      p?.(""), j(!1);
+                      g?.(""), j(!1);
                     },
                     children: u
                   }
                 ),
                 ae.map((E) => {
-                  const D = g ? Array.isArray(w) && w.includes(E.value) : w === E.value;
+                  const D = p ? Array.isArray(w) && w.includes(E.value) : w === E.value;
                   return /* @__PURE__ */ e(
                     "li",
                     {
@@ -1006,7 +1006,7 @@ const At = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
                         D && "bg-accent-soft text-accent font-semibold"
                       ),
                       children: /* @__PURE__ */ c("div", { className: "flex items-center", children: [
-                        g && /* @__PURE__ */ e(
+                        p && /* @__PURE__ */ e(
                           "input",
                           {
                             type: "checkbox",
@@ -1055,18 +1055,18 @@ const Pt = {
     startIcon: o,
     endIcon: l,
     loading: u = !1,
-    containerClassName: x,
+    containerClassName: m,
     labelClassName: y,
-    className: f,
-    id: m,
-    ...h
-  }, g) => {
-    const w = oe.useId(), p = m || `textfield-${w}`, b = !!n, L = n || r ? `${p}-description` : void 0;
-    return /* @__PURE__ */ c("div", { className: d("flex flex-col", a && "w-full", x), children: [
+    className: h,
+    id: f,
+    ...x
+  }, p) => {
+    const w = oe.useId(), g = f || `textfield-${w}`, b = !!n, L = 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: p,
+          htmlFor: g,
           className: d(
             Ve,
             b ? "text-danger-fg" : "text-text-subtle",
@@ -1080,8 +1080,8 @@ const Pt = {
         /* @__PURE__ */ e(
           "input",
           {
-            ref: g,
-            id: p,
+            ref: p,
+            id: g,
             "aria-invalid": b || void 0,
             "aria-describedby": L,
             className: d(
@@ -1094,9 +1094,9 @@ const Pt = {
               o && "pl-9",
               (l || u) && "pr-9",
               b ? "border-danger-border bg-danger-soft" : "border-border hover:border-border-strong",
-              f
+              h
             ),
-            ...h
+            ...x
           }
         ),
         (l || u) && /* @__PURE__ */ e("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 text-text-muted", children: u ? /* @__PURE__ */ e(
@@ -1129,27 +1129,27 @@ function Ot({
   templatePlaceholder: l,
   showTemplate: u = !0
 }) {
-  const [x, y] = R([]);
+  const [m, y] = R([]);
   Q(() => {
-    let m = !0;
-    return Promise.resolve(n?.()).then((h) => {
-      m && h && y(h.data ?? []);
+    let f = !0;
+    return Promise.resolve(n?.()).then((x) => {
+      f && x && y(x.data ?? []);
     }).catch(() => {
     }), () => {
-      m = !1;
+      f = !1;
     };
   }, []);
-  const f = t ?? {};
+  const h = t ?? {};
   return /* @__PURE__ */ c("div", { className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ e(
       Ne,
       {
         size: a,
         fullWidth: !0,
-        value: f.folderId ?? "",
-        options: x.map((m) => ({ value: m.id, label: m.name })),
+        value: h.folderId ?? "",
+        options: m.map((f) => ({ value: f.id, label: f.name })),
         placeholder: o ?? "Select a folder",
-        onChange: (m) => r?.({ ...f, folderId: m })
+        onChange: (f) => r?.({ ...h, folderId: f })
       }
     ),
     u && /* @__PURE__ */ e(
@@ -1157,14 +1157,14 @@ function Ot({
       {
         size: a,
         disabled: s ?? !1,
-        value: f.pathTemplate ?? "",
+        value: h.pathTemplate ?? "",
         placeholder: l ?? "Sub-path e.g. {yyyy}/{mm}/{dd} (optional)",
-        onChange: (m) => r?.({ ...f, pathTemplate: m.target.value })
+        onChange: (f) => r?.({ ...h, pathTemplate: f.target.value })
       }
     )
   ] });
 }
-const fe = (...t) => t.filter(Boolean).join(" "), Ft = (t) => /* @__PURE__ */ e(Se, { ...t, strokeWidth: 1.5, "aria-hidden": !0 }), Bt = (t) => /* @__PURE__ */ e(pe, { ...t, strokeWidth: 1.5, "aria-hidden": !0 }), Rt = {
+const fe = (...t) => t.filter(Boolean).join(" "), Ft = (t) => /* @__PURE__ */ e(Se, { ...t, strokeWidth: 1.5, "aria-hidden": !0 }), Bt = (t) => /* @__PURE__ */ e(ge, { ...t, strokeWidth: 1.5, "aria-hidden": !0 }), Rt = {
   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,38 +1184,38 @@ const fe = (...t) => t.filter(Boolean).join(" "), Ft = (t) => /* @__PURE__ */ e(
     startIcon: o = /* @__PURE__ */ e(Ft, {}),
     loading: l = !1,
     containerClassName: u,
-    labelClassName: x,
+    labelClassName: m,
     className: y,
-    id: f,
-    options: m,
-    onRemoteSearch: h,
-    onSelect: g,
+    id: h,
+    options: f,
+    onRemoteSearch: x,
+    onSelect: p,
     debounceTime: w = 500,
-    showAllOnOpen: p = !1,
+    showAllOnOpen: g = !1,
     value: b,
     onChange: L,
     ...T
   }, _) => {
-    const $ = f || `searchfield-${Math.random().toString(36).substr(2, 9)}`, X = !!n, W = se(null), j = se(null), [q, K] = R(b || ""), [re, O] = R(!1), [ce, C] = R(!1), [i, S] = R(!1);
+    const $ = h || `searchfield-${Math.random().toString(36).substr(2, 9)}`, X = !!n, W = se(null), j = se(null), [q, K] = R(b || ""), [re, O] = R(!1), [ce, C] = R(!1), [i, S] = R(!1);
     Q(() => {
       b !== void 0 && K(b);
     }, [b]);
     const N = he(() => {
-      if (p && !i || !q) return m;
+      if (g && !i || !q) return f;
       const P = String(q).toLowerCase();
-      return m.filter(
+      return f.filter(
         (E) => String(E.label).toLowerCase().includes(P)
       );
-    }, [q, m, p, i]);
+    }, [q, f, g, i]);
     Q(() => {
-      if (!h || !q) {
+      if (!x || !q) {
         C(!1);
         return;
       }
       const P = setTimeout(async () => {
         C(!0);
         try {
-          await h(String(q));
+          await x(String(q));
         } catch (E) {
           console.error("Remote search failed:", E);
         } finally {
@@ -1225,7 +1225,7 @@ const fe = (...t) => t.filter(Boolean).join(" "), Ft = (t) => /* @__PURE__ */ e(
       return () => {
         clearTimeout(P), C(!1);
       };
-    }, [q, w, h]), Q(() => {
+    }, [q, w, x]), Q(() => {
       const P = (E) => {
         W.current && !W.current.contains(E.target) && O(!1);
       };
@@ -1235,9 +1235,9 @@ const fe = (...t) => t.filter(Boolean).join(" "), Ft = (t) => /* @__PURE__ */ e(
       const E = P.target.value;
       K(E), O(!0), S(!0), L && L(P);
     }, k = (P) => {
-      K(P.label), O(!1), S(!1), g && g(P.value);
+      K(P.label), O(!1), S(!1), p && p(P.value);
     }, ee = () => {
-      (m.length > 0 || h) && (O(!0), S(!1));
+      (f.length > 0 || x) && (O(!0), S(!1));
     }, ae = l || ce, le = re && (N.length > 0 || ae), G = he(() => _ || j, [_]);
     return /* @__PURE__ */ c(
       "div",
@@ -1257,7 +1257,7 @@ const fe = (...t) => t.filter(Boolean).join(" "), Ft = (t) => /* @__PURE__ */ e(
               className: fe(
                 "block text-sm font-medium mb-1",
                 X ? "text-danger-fg" : "text-text",
-                x || ""
+                m || ""
               ),
               children: t
             }
@@ -1344,7 +1344,7 @@ const fe = (...t) => t.filter(Boolean).join(" "), Ft = (t) => /* @__PURE__ */ e(
               children: n || r
             }
           ),
-          h && /* @__PURE__ */ c("p", { className: "mt-2 text-xs text-success-fg", children: [
+          x && /* @__PURE__ */ c("p", { className: "mt-2 text-xs text-success-fg", children: [
             "Huidige zoekterm (niet-gedebounced): ",
             String(q)
           ] })
@@ -1395,7 +1395,7 @@ const Ht = me(
               role: "switch",
               checked: t,
               disabled: s,
-              onChange: (x) => r(x.target.checked),
+              onChange: (m) => r(m.target.checked),
               className: "peer sr-only",
               ...o
             }
@@ -1444,7 +1444,7 @@ function Ut({
         {
           className: "grid gap-2 border-t border-border-subtle p-3",
           style: { gridTemplateColumns: `repeat(${s}, minmax(0, 1fr))` },
-          children: Array.from({ length: s }).map((x, y) => /* @__PURE__ */ e(
+          children: Array.from({ length: s }).map((m, y) => /* @__PURE__ */ e(
             "div",
             {
               className: "h-4 w-full rounded-sm bg-surface-hover"
@@ -1466,9 +1466,9 @@ const qt = ({
   disabled: o = !1,
   className: l,
   showCheck: u = !0,
-  header: x
+  header: m
 }) => {
-  const [y, f] = R(!1), [m, h] = R(null), [g, w] = R({ top: 0, left: 0 }), p = se(null), b = se(null), L = se(null), T = se(null), _ = ze(y, b, { placement: a }), $ = se(null), X = () => Array.from(
+  const [y, h] = R(!1), [f, x] = R(null), [p, w] = R({ top: 0, left: 0 }), g = se(null), b = se(null), L = se(null), T = se(null), _ = ze(y, b, { placement: a }), $ = se(null), X = () => Array.from(
     T.current?.querySelectorAll("button[data-option-value]:not(:disabled)") ?? []
   );
   Q(() => {
@@ -1484,22 +1484,22 @@ const qt = ({
   };
   Q(() => {
     const i = (S) => {
-      p.current && (!p.current.contains(S.target) || L.current && !L.current.contains(S.target)) && (f(!1), h(null), $.current && (clearTimeout($.current), $.current = null));
+      g.current && (!g.current.contains(S.target) || L.current && !L.current.contains(S.target)) && (h(!1), x(null), $.current && (clearTimeout($.current), $.current = null));
     };
     return y && document.addEventListener("mousedown", i), () => {
       document.removeEventListener("mousedown", i);
     };
   }, [y]), Q(() => {
     const i = (S) => {
-      S.key === "Escape" && (f(!1), h(null), b.current?.focus(), $.current && (clearTimeout($.current), $.current = null));
+      S.key === "Escape" && (h(!1), x(null), b.current?.focus(), $.current && (clearTimeout($.current), $.current = null));
     };
     return y && document.addEventListener("keydown", i), () => {
       document.removeEventListener("keydown", i);
     };
   }, [y]), Q(() => {
-    if (m && p.current) {
-      const i = p.current.querySelector(
-        `[data-option-value="${m}"]`
+    if (f && g.current) {
+      const i = g.current.querySelector(
+        `[data-option-value="${f}"]`
       );
       if (i) {
         const S = i.getBoundingClientRect();
@@ -1509,21 +1509,21 @@ const qt = ({
         });
       }
     }
-  }, [m]), Q(() => () => {
+  }, [f]), Q(() => () => {
     $.current && clearTimeout($.current);
   }, []);
   const j = (i) => {
-    i.stopPropagation(), !o && (f(!y), h(null), $.current && (clearTimeout($.current), $.current = null));
+    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), f(!1), h(null));
+    i.stopPropagation(), !S.disabled && !S.divider && (!S.children || S.children.length === 0) && (s?.(S.value, N), h(!1), x(null));
   }, K = (i) => {
-    $.current && (clearTimeout($.current), $.current = null), i.children && i.children.length > 0 ? h(i.value) : h(null);
+    $.current && (clearTimeout($.current), $.current = null), i.children && i.children.length > 0 ? x(i.value) : x(null);
   }, re = (i) => {
     i.children && i.children.length > 0 ? $.current = setTimeout(() => {
-      h(null);
-    }, 150) : h(null);
+      x(null);
+    }, 150) : x(null);
   }, O = (i, S, N) => {
-    i.stopPropagation(), !S.disabled && !S.divider && (s?.(S.value, N), f(!1), h(null));
+    i.stopPropagation(), !S.disabled && !S.divider && (s?.(S.value, N), h(!1), x(null));
   }, ce = d(
     "fixed z-overlay min-w-menu bg-surface rounded-lg shadow-overlay border border-border",
     "max-h-60 overflow-auto"
@@ -1534,7 +1534,7 @@ const qt = ({
   return /* @__PURE__ */ c(
     "div",
     {
-      ref: p,
+      ref: g,
       className: d(
         "relative flex flex-row items-center justify-center rounded-lg hover:bg-surface-hover",
         l
@@ -1555,7 +1555,7 @@ const qt = ({
           }
         ),
         y && /* @__PURE__ */ e("div", { ref: T, className: ce, style: _, onKeyDown: W, children: /* @__PURE__ */ c("div", { className: "p-2", role: "menu", children: [
-          x && (typeof x == "string" ? /* @__PURE__ */ e("div", { className: "text-xs font-medium text-text-muted uppercase tracking-label px-3 py-2", children: x }) : x),
+          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)
               return /* @__PURE__ */ e(
@@ -1565,7 +1565,7 @@ const qt = ({
                 },
                 `divider-${S}`
               );
-            const N = i.children && i.children.length > 0, A = m === i.value;
+            const N = i.children && i.children.length > 0, A = f === i.value;
             return /* @__PURE__ */ c("div", { className: "relative group", children: [
               /* @__PURE__ */ c(
                 "button",
@@ -1605,15 +1605,15 @@ const qt = ({
                   ref: L,
                   className: C,
                   style: {
-                    top: `${g.top}px`,
-                    left: `${g.left}px`
+                    top: `${p.top}px`,
+                    left: `${p.left}px`
                   },
                   onMouseEnter: () => {
-                    $.current && (clearTimeout($.current), $.current = null), h(i.value);
+                    $.current && (clearTimeout($.current), $.current = null), x(i.value);
                   },
                   onMouseLeave: () => {
                     $.current = setTimeout(() => {
-                      h(null);
+                      x(null);
                     }, 150);
                   },
                   children: /* @__PURE__ */ e("div", { className: "p-2", children: i.children.map((k, ee) => {
@@ -1686,7 +1686,7 @@ const qt = ({
   sm: "pr-2",
   md: "pr-4",
   lg: "pr-6"
-}, Wt = () => /* @__PURE__ */ e(Y, { icon: Se, size: "md", color: "current" }), Kt = ({ active: t }) => /* @__PURE__ */ e(Y, { icon: tt, size: "sm", className: t ? "text-text" : "text-text-subtle" }), _t = ({ active: t }) => /* @__PURE__ */ e(Y, { icon: pe, size: "sm", className: t ? "text-text" : "text-text-subtle" }), Gt = () => /* @__PURE__ */ e(Y, { icon: ke, size: "md", color: "current" }), Jt = () => /* @__PURE__ */ e(Y, { icon: Ce, size: "md", color: "current" }), Yt = () => /* @__PURE__ */ e(Y, { icon: rt, size: "md", color: "current" }), Xt = () => /* @__PURE__ */ e(Y, { icon: nt, size: "md", color: "current" }), He = () => /* @__PURE__ */ e(Y, { icon: pe, size: "md", color: "current" }), Zt = (t) => {
+}, Wt = () => /* @__PURE__ */ e(Y, { icon: Se, size: "md", color: "current" }), Kt = ({ active: t }) => /* @__PURE__ */ e(Y, { icon: tt, size: "sm", className: t ? "text-text" : "text-text-subtle" }), _t = ({ active: t }) => /* @__PURE__ */ e(Y, { icon: ge, size: "sm", className: t ? "text-text" : "text-text-subtle" }), Gt = () => /* @__PURE__ */ e(Y, { icon: ke, size: "md", color: "current" }), Jt = () => /* @__PURE__ */ e(Y, { icon: Ce, size: "md", color: "current" }), Yt = () => /* @__PURE__ */ e(Y, { icon: rt, size: "md", color: "current" }), Xt = () => /* @__PURE__ */ e(Y, { icon: nt, size: "md", color: "current" }), He = () => /* @__PURE__ */ e(Y, { icon: ge, size: "md", color: "current" }), Zt = (t) => {
   const r = (s) => t.multiSelect && Array.isArray(t.value) ? t.value?.includes(s) : t.value === s, n = (s) => {
     t.multiSelect && Array.isArray(t.value) ? t.onChange(t.value.filter((a) => a !== s)) : t.onChange(s);
   };
@@ -1742,14 +1742,14 @@ const qt = ({
   filters: o = [],
   paginated: l = !1,
   pageSizeOptions: u = [10, 25, 50, 100],
-  defaultPageSize: x = 10,
+  defaultPageSize: m = 10,
   actions: y = [],
-  onRowClick: f,
-  selectable: m = !1,
-  selectedRows: h = [],
-  onSelectionChange: g,
+  onRowClick: h,
+  selectable: f = !1,
+  selectedRows: x = [],
+  onSelectionChange: p,
   getRowKey: w = (j, q) => q,
-  emptyContent: p,
+  emptyContent: g,
   hoverable: b = !0,
   bordered: L = !1,
   striped: T = !1,
@@ -1763,7 +1763,7 @@ const qt = ({
     direction: null
   }), [O, ce] = R({
     page: 0,
-    pageSize: x
+    pageSize: m
   }), C = se(null), i = he(() => {
     let v = t;
     if (s && j.trim()) {
@@ -1806,18 +1806,18 @@ const qt = ({
     ce({ page: 0, pageSize: v });
   }, []), ae = ue(
     (v, U) => {
-      if (!g) return;
+      if (!p) return;
       const Z = w(v, 0);
-      h.map((J, F) => w(J, F)), g(U ? [...h, v] : h.filter(
-        (J, F) => w(h[F], F) !== Z
+      x.map((J, F) => w(J, F)), p(U ? [...x, v] : x.filter(
+        (J, F) => w(x[F], F) !== Z
       ));
     },
-    [h, g, w]
+    [x, p, w]
   ), le = ue(
     (v) => {
-      g && g(v ? [...N] : []);
+      p && p(v ? [...N] : []);
     },
-    [N, g]
+    [N, p]
   );
   Q(() => {
     ce((v) => ({ ...v, page: 0 }));
@@ -1826,12 +1826,12 @@ const qt = ({
   }, [o.map((v) => v.value).join(",")]);
   const G = S.length, P = Math.ceil(G / O.pageSize), E = O.page * O.pageSize + 1, D = Math.min(E + O.pageSize - 1, G), z = N.length > 0 && N.every((v) => {
     const U = w(v, 0);
-    return h.some(
+    return x.some(
       (Z, J) => w(Z, J) === U
     );
   }), V = N.some((v) => {
     const U = w(v, 0);
-    return h.some(
+    return x.some(
       (Z, J) => w(Z, J) === U
     );
   }), B = d(
@@ -1841,7 +1841,7 @@ const qt = ({
     "text-text border-b border-border p-2"
   ), te = d("h-row-lg", {
     "hover:bg-surface-sunk": b,
-    "cursor-pointer": f
+    "cursor-pointer": h
   });
   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: [
@@ -1868,7 +1868,7 @@ const qt = ({
       ) }),
       /* @__PURE__ */ c("table", { ref: C, className: d(B, "min-w-full"), children: [
         /* @__PURE__ */ e("thead", { className: M, children: /* @__PURE__ */ c("tr", { children: [
-          m && /* @__PURE__ */ e("th", { className: d(I, "w-12"), children: /* @__PURE__ */ e(
+          f && /* @__PURE__ */ e("th", { className: d(I, "w-12"), children: /* @__PURE__ */ e(
             "input",
             {
               type: "checkbox",
@@ -1934,15 +1934,15 @@ const qt = ({
         /* @__PURE__ */ e("tbody", { children: N.length === 0 || n ? !n && /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e(
           "td",
           {
-            colSpan: r.length + (m ? 1 : 0) + (y.length > 0 ? 1 : 0),
+            colSpan: r.length + (f ? 1 : 0) + (y.length > 0 ? 1 : 0),
             className: d(
               I,
               "text-center py-8 text-text-muted"
             ),
-            children: p || "No data available"
+            children: g || "No data available"
           }
         ) }) : N.map((v, U) => {
-          const Z = w(v, U), J = h.some(
+          const Z = w(v, U), J = x.some(
             (F, ie) => w(F, ie) === Z
           );
           return /* @__PURE__ */ c(
@@ -1954,10 +1954,10 @@ const qt = ({
                 X?.(v, U)
               ),
               onClick: (F) => {
-                F.stopPropagation(), f?.(v, U);
+                F.stopPropagation(), h?.(v, U);
               },
               children: [
-                m && /* @__PURE__ */ e("td", { className: I, children: /* @__PURE__ */ e(
+                f && /* @__PURE__ */ e("td", { className: I, children: /* @__PURE__ */ e(
                   "input",
                   {
                     type: "checkbox",
@@ -2103,31 +2103,31 @@ const qt = ({
   onTabChange: n,
   className: s
 }) => {
-  const [a, o] = R(t[0]?.id || ""), l = r || a, u = (x) => {
-    n ? n(x) : o(x);
+  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((x) => /* @__PURE__ */ e(
+  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(
     "button",
     {
-      onClick: () => !x.disabled && u(x.id),
-      disabled: x.disabled,
+      onClick: () => !m.disabled && u(m.id),
+      disabled: m.disabled,
       className: d(
         "border-b-2 py-2 px-1 text-sm font-medium transition-colors duration-fast",
         {
-          "border-accent-border text-text": l === x.id,
-          "border-transparent text-text-muted hover:text-text": l !== x.id && !x.disabled,
-          "border-transparent text-disabled cursor-not-allowed": x.disabled
+          "border-accent-border text-text": l === m.id,
+          "border-transparent text-text-muted hover:text-text": l !== m.id && !m.disabled,
+          "border-transparent text-disabled cursor-not-allowed": m.disabled
         }
       ),
       children: /* @__PURE__ */ c("span", { className: "flex items-center gap-2", children: [
-        x.label,
-        x.badge && /* @__PURE__ */ e("span", { className: d(
+        m.label,
+        m.badge && /* @__PURE__ */ e("span", { className: d(
           "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium",
-          l === x.id ? "bg-accent-soft text-accent" : "bg-surface-hover text-text-muted"
-        ), children: x.badge })
+          l === m.id ? "bg-accent-soft text-accent" : "bg-surface-hover text-text-muted"
+        ), children: m.badge })
       ] })
     },
-    x.id
+    m.id
   )) }) });
 }, er = ({
   items: t,
@@ -2138,14 +2138,14 @@ const qt = ({
   size: o = "md",
   className: l
 }) => {
-  const [u, x] = R(
+  const [u, m] = R(
     r || n || t[0]?.id || ""
-  ), y = n || u, f = (p) => {
-    s ? s(p) : x(p);
-  }, m = {
+  ), y = n || u, h = (g) => {
+    s ? s(g) : m(g);
+  }, f = {
     activeTab: y,
-    setActiveTab: f
-  }, h = t.find((p) => p.id === y), g = d(
+    setActiveTab: h
+  }, x = t.find((g) => g.id === y), p = d(
     "flex",
     {
       "border-b border-border px-2": a === "default" || a === "underline",
@@ -2154,7 +2154,7 @@ const qt = ({
       "space-x-8": a === "default" || a === "underline"
     },
     l
-  ), w = (p, b) => {
+  ), w = (g, b) => {
     const L = "transition-colors duration-fast font-medium", T = {
       "text-xs px-2 py-1": o === "sm",
       "text-sm px-3 py-2": o === "md",
@@ -2167,44 +2167,44 @@ const qt = ({
       // Underline variant
       "border-b-2 pb-2": a === "underline"
     }, $ = {
-      "opacity-50 cursor-not-allowed": p.disabled,
-      "cursor-pointer": !p.disabled
+      "opacity-50 cursor-not-allowed": g.disabled,
+      "cursor-pointer": !g.disabled
     }, X = b ? {
       "border-accent-border text-text": a === "default" || a === "underline",
       "bg-surface text-text shadow-none": a === "pills"
-    } : {}, W = !b && !p.disabled ? {
+    } : {}, W = !b && !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(L, T, _, $, X, W);
   };
-  return /* @__PURE__ */ e(Qt.Provider, { value: m, children: /* @__PURE__ */ c("div", { children: [
-    /* @__PURE__ */ e("div", { className: g, role: "tablist", children: t.map((p) => /* @__PURE__ */ e(
+  return /* @__PURE__ */ e(Qt.Provider, { value: f, 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 === p.id,
-        "aria-controls": `tabpanel-${p.id}`,
-        disabled: p.disabled,
-        onClick: () => !p.disabled && f(p.id),
-        className: w(p, y === p.id),
+        "aria-selected": y === g.id,
+        "aria-controls": `tabpanel-${g.id}`,
+        disabled: g.disabled,
+        onClick: () => !g.disabled && h(g.id),
+        className: w(g, y === g.id),
         children: /* @__PURE__ */ c("span", { className: "flex items-center gap-2", children: [
-          p.label,
-          p.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: p.badge })
+          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 })
         ] })
       },
-      p.id
+      g.id
     )) }),
-    h?.content && /* @__PURE__ */ e(
+    x?.content && /* @__PURE__ */ e(
       "div",
       {
         role: "tabpanel",
         id: `tabpanel-${y}`,
         "aria-labelledby": `tab-${y}`,
         className: "mt-4",
-        children: h.content
+        children: x.content
       }
     )
   ] }) });
@@ -2224,21 +2224,21 @@ function Ue({
   closeOnEscape: o = !0,
   className: l,
   backdropClassName: u,
-  children: x,
+  children: m,
   footer: y,
-  showCloseButton: f = !0
+  showCloseButton: h = !0
 }) {
-  const m = se(null), h = se(null);
+  const f = se(null), x = se(null);
   Q(() => {
     if (!t || !o) return;
-    const w = (p) => {
-      p.key === "Escape" && r();
+    const w = (g) => {
+      g.key === "Escape" && r();
     };
     return document.addEventListener("keydown", w), () => document.removeEventListener("keydown", w);
-  }, [t, o, r]), Q(() => (t ? (h.current = document.activeElement, m.current && m.current.focus(), document.body.style.overflow = "hidden") : (h.current && h.current.focus(), document.body.style.overflow = ""), () => {
+  }, [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 = ""), () => {
     document.body.style.overflow = "";
   }), [t]);
-  const g = (w) => {
+  const p = (w) => {
     a && w.target === w.currentTarget && r();
   };
   return t ? /* @__PURE__ */ e(
@@ -2250,11 +2250,11 @@ function Ue({
         // 'animate-fade-in',
         u
       ),
-      onClick: g,
+      onClick: p,
       children: /* @__PURE__ */ c(
         "div",
         {
-          ref: m,
+          ref: f,
           className: d(
             "relative w-full bg-surface rounded-lg shadow-modal",
             // 'animate-scale-in',
@@ -2267,7 +2267,7 @@ function Ue({
           "aria-labelledby": n ? "modal-title" : void 0,
           tabIndex: -1,
           children: [
-            (n || f) && /* @__PURE__ */ c("div", { className: "flex items-center justify-between p-6 pb-0", children: [
+            (n || h) && /* @__PURE__ */ c("div", { className: "flex items-center justify-between p-6 pb-0", children: [
               n && /* @__PURE__ */ e(
                 "span",
                 {
@@ -2276,7 +2276,7 @@ function Ue({
                   children: n
                 }
               ),
-              f && /* @__PURE__ */ e(
+              h && /* @__PURE__ */ e(
                 "button",
                 {
                   onClick: r,
@@ -2286,7 +2286,7 @@ function Ue({
                 }
               )
             ] }),
-            /* @__PURE__ */ e("div", { className: "p-6", children: x }),
+            /* @__PURE__ */ e("div", { className: "p-6", children: m }),
             y && /* @__PURE__ */ e("div", { className: "px-6 py-4", children: y })
           ]
         }
@@ -2335,32 +2335,32 @@ const rr = {
   truncate: o = !1,
   italic: l = !1,
   underline: u = !1,
-  lineHeight: x = "normal",
+  lineHeight: m = "normal",
   as: y,
-  className: f,
-  children: m,
-  ...h
+  className: h,
+  children: f,
+  ...x
 }) => {
-  const g = y || or(t), w = t === "caption", p = t === "label", b = t === "code", L = d(
+  const p = y || or(t), w = t === "caption", g = t === "label", b = t === "code", L = d(
     "font-sans",
     // Variant — caption and label pin their own size/weight
     w && "text-xs text-text-subtle",
-    p && "text-xs font-semibold uppercase tracking-label 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",
     // Size — only where the variant does not pin it
-    !w && !p && !b && rr[r],
+    !w && !g && !b && rr[r],
     // Weight — label owns its weight
-    !p && nr[n],
+    !g && nr[n],
     sr[s],
     ar[a],
     // Line height only overrides the body variant
-    t === "body" && lr[x],
+    t === "body" && lr[m],
     l && "italic",
     u && "underline",
     o && "truncate",
-    f
+    h
   );
-  return /* @__PURE__ */ e(g, { className: L, ...h, children: m });
+  return /* @__PURE__ */ e(p, { className: L, ...x, children: f });
 };
 function or(t) {
   return {
@@ -2379,24 +2379,24 @@ const cr = ({
   disabled: o,
   accept: l,
   onListFiles: u,
-  onListMounts: x,
+  onListMounts: m,
   onUploadFile: y,
-  onDownloadFile: f,
-  onRegisterFile: m
+  onDownloadFile: h,
+  onRegisterFile: f
 }) => {
-  const [h, g] = R(!1), [w, p] = R([]), [b, L] = R(null), [T, _] = R("/"), [$, X] = R([]), [W, j] = R(!1), [q, K] = R(""), [re, O] = R(
+  const [x, p] = R(!1), [w, g] = R([]), [b, L] = R(null), [T, _] = R("/"), [$, X] = R([]), [W, j] = R(!1), [q, K] = R(""), [re, O] = R(
     typeof t == "object" ? t : null
   ), [ce, C] = R(!1), [i, S] = R(""), N = se(null);
   Q(() => {
-    h && A();
-  }, [h]), Q(() => {
-    h && b && k();
-  }, [h, b, T, q]);
+    x && A();
+  }, [x]), Q(() => {
+    x && b && k();
+  }, [x, b, T, q]);
   const A = async () => {
     j(!0);
     try {
-      const M = await x?.();
-      M?.data && p(M.data);
+      const M = await m?.();
+      M?.data && g(M.data);
     } catch (M) {
       console.error("Failed to load mounts", M);
     } finally {
@@ -2430,7 +2430,7 @@ const cr = ({
           providerKey: I.name,
           ownerId: "me"
         };
-        O(U), r(U, v), g(!1);
+        O(U), r(U, v), p(!1);
       } catch (te) {
         console.error("Local file selection failed", te);
       } finally {
@@ -2451,7 +2451,7 @@ const cr = ({
         });
         if (v?.data) {
           const U = v.data;
-          O(U), r(U, new Uint8Array(te)), g(!1);
+          O(U), r(U, new Uint8Array(te)), p(!1);
         }
       } catch (te) {
         console.error("Upload failed", te);
@@ -2464,7 +2464,7 @@ const cr = ({
       j(!0);
       try {
         const M = `${T}${i}/`;
-        m && (await m({
+        f && (await f({
           name: i,
           type: "folder",
           path: T,
@@ -2483,8 +2483,8 @@ const cr = ({
   }, G = async (M) => {
     j(!0);
     try {
-      const I = await f?.(M.id);
-      O(M), r(M, I), g(!1);
+      const I = await h?.(M.id);
+      O(M), r(M, I), p(!1);
     } catch (I) {
       console.error("Failed to download file", I);
     } finally {
@@ -2590,7 +2590,7 @@ const cr = ({
     /* @__PURE__ */ c(
       "div",
       {
-        onClick: () => !o && g(!0),
+        onClick: () => !o && p(!0),
         className: d(
           "flex items-center gap-3 px-3 py-2 border rounded-lg cursor-pointer transition-colors",
           "hover:border-border-strong bg-surface",
@@ -2615,9 +2615,9 @@ const cr = ({
     /* @__PURE__ */ e(
       Ue,
       {
-        open: h,
+        open: x,
         onClose: () => {
-          g(!1), L(null), _("/"), C(!1);
+          p(!1), L(null), _("/"), C(!1);
         },
         title: b ? `Explorer: ${b.name}` : "Select Storage Mount",
         size: "lg",
@@ -2772,12 +2772,12 @@ const cr = ({
     loading: o = !1,
     containerClassName: l,
     labelClassName: u,
-    className: x,
+    className: m,
     id: y,
-    rows: f = 4,
-    ...m
-  }, h) => {
-    const g = oe.useId(), w = y || `textarea-${g}`, p = !!n, b = n || r ? `${w}-description` : void 0;
+    rows: h = 4,
+    ...f
+  }, x) => {
+    const p = oe.useId(), w = y || `textarea-${p}`, g = !!n, b = n || r ? `${w}-description` : void 0;
     return /* @__PURE__ */ c("div", { className: d("flex flex-col", a && "w-full", l), children: [
       t && /* @__PURE__ */ e(
         "label",
@@ -2785,7 +2785,7 @@ const cr = ({
           htmlFor: w,
           className: d(
             Ve,
-            p ? "text-danger-fg" : "text-text-subtle",
+            g ? "text-danger-fg" : "text-text-subtle",
             u
           ),
           children: t
@@ -2795,10 +2795,10 @@ const cr = ({
         /* @__PURE__ */ e(
           "textarea",
           {
-            ref: h,
+            ref: x,
             id: w,
-            rows: f,
-            "aria-invalid": p || void 0,
+            rows: h,
+            "aria-invalid": g || void 0,
             "aria-describedby": b,
             className: d(
               "block w-full resize-y rounded-md border bg-surface-input text-text",
@@ -2807,10 +2807,10 @@ const cr = ({
               "focus-visible:outline-none focus-visible:focus-ring",
               "disabled:cursor-not-allowed disabled:bg-surface-hover disabled:text-text-disabled",
               ir[s],
-              p ? "border-danger-border bg-danger-soft" : "border-border hover:border-border-strong",
-              x
+              g ? "border-danger-border bg-danger-soft" : "border-border hover:border-border-strong",
+              m
             ),
-            ...m
+            ...f
           }
         ),
         o && /* @__PURE__ */ e(
@@ -2825,7 +2825,7 @@ const cr = ({
         "p",
         {
           id: b,
-          className: d("mt-1 text-xs", p ? "text-danger-fg" : "text-text-subtle"),
+          className: d("mt-1 text-xs", g ? "text-danger-fg" : "text-text-subtle"),
           children: n || r
         }
       )
@@ -2843,8 +2843,8 @@ function dr(t, r, n) {
   const s = r.split("."), a = Array.isArray(t) ? [...t] : { ...t };
   let o = a;
   for (let l = 0; l < s.length - 1; l++) {
-    const u = s[l], x = o[u];
-    o[u] = x && typeof x == "object" ? Array.isArray(x) ? [...x] : { ...x } : {}, o = o[u];
+    const u = s[l], m = o[u];
+    o[u] = m && typeof m == "object" ? Array.isArray(m) ? [...m] : { ...m } : {}, o = o[u];
   }
   return o[s[s.length - 1]] = n, a;
 }
@@ -2867,14 +2867,14 @@ const rn = ({
   transform: o,
   validate: l,
   submitButton: u = { label: "Submit", variant: "primary" },
-  cancelButton: x = { label: "Cancel", variant: "outline" },
+  cancelButton: m = { label: "Cancel", variant: "outline" },
   showButtons: y = !0,
-  layout: f = "vertical",
-  size: m = "md",
-  loading: h = !1,
-  className: g,
+  layout: h = "vertical",
+  size: f = "md",
+  loading: x = !1,
+  className: p,
   ref: w,
-  sdk: p
+  sdk: g
 }) => {
   const [b, L] = R(r || {}), [T, _] = R({}), [$, X] = R({});
   Q(() => {
@@ -2930,7 +2930,7 @@ const rn = ({
     [b, t, W, a]
   ), q = ue(
     async (C) => {
-      if (C.preventDefault(), h) return;
+      if (C.preventDefault(), x) return;
       const i = {}, S = t.flatMap((A) => A.items);
       for (const A of S) {
         if (A.hidden || A.conditional && !A.conditional(b))
@@ -2951,10 +2951,10 @@ const rn = ({
       const N = o ? o(b) : b;
       await n?.(b, N);
     },
-    [b, t, W, l, o, n, h]
+    [b, t, W, l, o, n, x]
   ), K = ue(
     (C) => {
-      const i = Oe(b, C.name), S = $[C.name] ? T[C.name] : void 0, N = C.disabled || h, A = {
+      const i = Oe(b, C.name), S = $[C.name] ? T[C.name] : void 0, N = C.disabled || x, A = {
         value: i || "",
         disabled: N,
         required: C.required,
@@ -2976,7 +2976,7 @@ const rn = ({
               type: C.textType || C.type,
               autoComplete: C.autocomplete,
               error: S,
-              size: m
+              size: f
             }
           );
         case "textarea":
@@ -2987,7 +2987,7 @@ const rn = ({
               onChange: (k) => j(C.name, k.target.value),
               rows: 4,
               error: S,
-              size: m
+              size: f
             }
           );
         case "select":
@@ -3004,18 +3004,18 @@ const rn = ({
               multiple: C.multiple,
               allowCreate: C.allowCreate,
               error: S,
-              size: m
+              size: f
             }
           );
         case "checkbox":
           return /* @__PURE__ */ e(
-            ge,
+            pe,
             {
               ...A,
               label: C.label,
               checked: !!i,
               onChange: (k) => j(C.name, k.target.checked),
-              size: m
+              size: f
             }
           );
         case "radio":
@@ -3048,7 +3048,7 @@ const rn = ({
               ...A,
               value: i ? new Date(i) : null,
               onChange: (k) => j(C.name, k),
-              size: m
+              size: f
             }
           );
         case "file":
@@ -3059,25 +3059,25 @@ const rn = ({
               value: i,
               onChange: (k) => j(C.name, k),
               error: S,
-              onListFiles: (k) => p?.http.invoke({
+              onListFiles: (k) => g?.http.invoke({
                 method: "POST",
                 action: "storage.file.list",
                 body: k
               }),
-              onListMounts: () => p?.http.invoke({
+              onListMounts: () => g?.http.invoke({
                 method: "GET",
                 action: "storage.mount"
               }),
-              onUploadFile: (k) => p?.http.invoke({
+              onUploadFile: (k) => g?.http.invoke({
                 method: "POST",
                 action: "storage.file.upload",
                 body: k
               }),
-              onDownloadFile: (k) => p?.http.invoke({
+              onDownloadFile: (k) => g?.http.invoke({
                 method: "GET",
                 action: `storage.file.${k}.download`
               }),
-              onRegisterFile: (k) => p?.http.invoke({
+              onRegisterFile: (k) => g?.http.invoke({
                 method: "POST",
                 action: "storage.file.folder",
                 body: k
@@ -3090,12 +3090,12 @@ const rn = ({
             {
               value: i || {},
               onChange: (k) => j(C.name, k),
-              onListFolders: () => p?.http.invoke({
+              onListFolders: () => g?.http.invoke({
                 method: "GET",
                 action: "storage.mount"
               }),
               disabled: N,
-              size: m,
+              size: f,
               placeholder: C.placeholder
             }
           );
@@ -3168,7 +3168,7 @@ const rn = ({
                                 type: D.textType || D.type,
                                 autoComplete: D.autocomplete,
                                 error: z,
-                                size: m
+                                size: f
                               }
                             );
                           case "textarea":
@@ -3183,7 +3183,7 @@ const rn = ({
                                 ),
                                 rows: 4,
                                 error: z,
-                                size: m
+                                size: f
                               }
                             );
                           case "select":
@@ -3206,12 +3206,12 @@ const rn = ({
                                 multiple: D.multiple,
                                 allowCreate: D.allowCreate,
                                 error: z,
-                                size: m
+                                size: f
                               }
                             );
                           case "checkbox":
                             return /* @__PURE__ */ e(
-                              ge,
+                              pe,
                               {
                                 ...V,
                                 checked: !!P?.[D.name],
@@ -3220,7 +3220,7 @@ const rn = ({
                                   D.name,
                                   B.target.checked
                                 ),
-                                size: m
+                                size: f
                               }
                             );
                           case "radio":
@@ -3262,7 +3262,7 @@ const rn = ({
                                   D.name,
                                   H
                                 ),
-                                size: m
+                                size: f
                               }
                             );
                           }
@@ -3328,7 +3328,7 @@ const rn = ({
           return null;
       }
     },
-    [b, $, T, h, m, j]
+    [b, $, T, x, f, j]
   ), re = ue(
     (C) => {
       if (C.conditional && !C.conditional(b))
@@ -3384,13 +3384,13 @@ const rn = ({
   ), O = d(
     "overflow-hidden rounded-lg border border-border bg-surface",
     {
-      "max-w-md": m === "sm",
-      "max-w-2xl": m === "md",
-      "max-w-4xl": m === "lg",
-      "max-w-full": m === "full"
+      "max-w-md": f === "sm",
+      "max-w-2xl": f === "md",
+      "max-w-4xl": f === "lg",
+      "max-w-full": f === "full"
     },
-    g
-  ), ce = m === "full" ? "md" : m;
+    p
+  ), ce = f === "full" ? "md" : f;
   return /* @__PURE__ */ c("form", { ref: w, onSubmit: q, className: O, children: [
     !y && /* @__PURE__ */ e("button", { type: "submit", className: "hidden", tabIndex: -1, "aria-hidden": !0 }),
     /* @__PURE__ */ e("div", { className: "flex flex-col", children: t.map(re) }),
@@ -3400,12 +3400,12 @@ const rn = ({
         ne,
         {
           type: "button",
-          variant: x.variant ?? "ghost",
-          size: x.size || ce,
-          disabled: x.disabled || h,
+          variant: m.variant ?? "ghost",
+          size: m.size || ce,
+          disabled: m.disabled || x,
           onClick: s,
-          className: x.className,
-          children: x.label
+          className: m.className,
+          children: m.label
         }
       ),
       /* @__PURE__ */ e(
@@ -3414,8 +3414,8 @@ const rn = ({
           type: "submit",
           variant: u.variant,
           size: u.size || ce,
-          disabled: u.disabled || h,
-          loading: h,
+          disabled: u.disabled || x,
+          loading: x,
           className: u.className,
           children: u.label
         }
@@ -3432,17 +3432,17 @@ function nn({
   tone: o = "default",
   loading: l = !1,
   onConfirm: u,
-  onCancel: x
+  onCancel: m
 }) {
   return /* @__PURE__ */ e(
     Ue,
     {
       open: t,
-      onClose: x,
+      onClose: m,
       title: r,
       size: "sm",
       footer: /* @__PURE__ */ c("div", { className: "flex w-full items-center justify-end gap-2", children: [
-        /* @__PURE__ */ e(ne, { variant: "ghost", onClick: x, disabled: l, children: a }),
+        /* @__PURE__ */ e(ne, { variant: "ghost", onClick: m, disabled: l, children: a }),
         /* @__PURE__ */ e(
           ne,
           {
@@ -3490,7 +3490,7 @@ function sn({
   onDismiss: o,
   className: l,
   children: u,
-  ...x
+  ...m
 }) {
   return /* @__PURE__ */ c(
     "span",
@@ -3504,7 +3504,7 @@ function sn({
         fr[r],
         l
       ),
-      ...x,
+      ...m,
       children: [
         n && /* @__PURE__ */ e(
           "span",
@@ -3578,7 +3578,7 @@ function ln({ children: t, className: r, ...n }) {
 const br = {
   sm: "h-1",
   md: "h-1.5"
-}, gr = {
+}, pr = {
   accent: "bg-accent",
   success: "bg-success"
 };
@@ -3596,14 +3596,14 @@ function on({ value: t, variant: r = "accent", size: n = "md", className: s, ...
       children: /* @__PURE__ */ e(
         "div",
         {
-          className: d("h-full rounded-full transition-[width] duration-300 ease-out", gr[r]),
+          className: d("h-full rounded-full transition-[width] duration-300 ease-out", pr[r]),
           style: { width: `${o}%` }
         }
       )
     }
   );
 }
-const pr = {
+const gr = {
   xs: "h-3 w-3",
   sm: "h-4 w-4",
   md: "h-6 w-6",
@@ -3644,7 +3644,7 @@ function cn({
           {
             className: d(
               "animate-spin",
-              pr[t],
+              gr[t],
               vr[r]
             ),
             fill: "none",
@@ -3734,32 +3734,32 @@ function un({
   className: a
 }) {
   const o = t.indexOf(r), l = { role: s ? "group" : void 0, "aria-label": s, "aria-hidden": s ? void 0 : !0 };
-  return n === "dots" ? /* @__PURE__ */ e("div", { ...l, className: d("flex items-center gap-1.5", a), children: t.map((u, x) => /* @__PURE__ */ e(
+  return n === "dots" ? /* @__PURE__ */ e("div", { ...l, className: d("flex items-center gap-1.5", a), children: t.map((u, m) => /* @__PURE__ */ e(
     "span",
     {
       className: d(
         "h-step-bar rounded-full transition-all duration-fast ease-out",
-        x === o ? "w-5 bg-accent" : "w-3.5",
-        x < o && "bg-border-strong",
-        x > o && "bg-border"
+        m === o ? "w-5 bg-accent" : "w-3.5",
+        m < o && "bg-border-strong",
+        m > o && "bg-border"
       )
     },
     u
-  )) }) : /* @__PURE__ */ e("div", { ...l, className: d("flex items-center gap-2", a), children: t.map((u, x) => /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
+  )) }) : /* @__PURE__ */ e("div", { ...l, className: d("flex items-center gap-2", a), children: t.map((u, m) => /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
     /* @__PURE__ */ e(
       "span",
       {
-        "aria-current": x === o ? "step" : void 0,
+        "aria-current": m === o ? "step" : void 0,
         className: d(
           "flex size-tile-sm items-center justify-center rounded-full text-xs font-medium",
-          x === o && "bg-accent text-accent-fg",
-          x < o && "bg-accent-soft text-accent",
-          x > o && "bg-surface-hover text-text-muted"
+          m === o && "bg-accent text-accent-fg",
+          m < o && "bg-accent-soft text-accent",
+          m > o && "bg-surface-hover text-text-muted"
         ),
-        children: x + 1
+        children: m + 1
       }
     ),
-    x < t.length - 1 && /* @__PURE__ */ e("span", { className: "h-px w-8 bg-border-strong" })
+    m < t.length - 1 && /* @__PURE__ */ e("span", { className: "h-px w-8 bg-border-strong" })
   ] }, u)) });
 }
 function mn({ title: t, icon: r = /* @__PURE__ */ e(it, { className: "size-icon-md", "aria-hidden": !0 }), action: n, children: s, className: a, ...o }) {
@@ -3881,21 +3881,21 @@ const xn = ({
   showLoading: o = !0,
   showError: l = !0,
   fallback: u,
-  loadingContent: x,
+  loadingContent: m,
   errorContent: y,
-  className: f,
-  onLoad: m,
-  onError: h,
-  ...g
+  className: h,
+  onLoad: f,
+  onError: x,
+  ...p
 }) => {
-  const [w, p] = R(!0), [b, L] = R(!1), [T, _] = R(t), $ = (O) => {
-    p(!1), L(!1), m?.(O);
+  const [w, g] = R(!0), [b, L] = R(!1), [T, _] = R(t), $ = (O) => {
+    g(!1), L(!1), f?.(O);
   }, X = (O) => {
-    if (p(!1), L(!0), u && T !== u) {
-      _(u), L(!1), p(!0);
+    if (g(!1), L(!0), u && T !== u) {
+      _(u), L(!1), g(!0);
       return;
     }
-    h?.(O);
+    x?.(O);
   }, W = d(
     "relative overflow-hidden bg-surface-hover",
     // Size variants
@@ -3923,7 +3923,7 @@ const xn = ({
       "rounded-xl": a === "xl",
       "rounded-full": a === "full"
     },
-    f
+    h
   ), j = d(
     "w-full h-full object-cover transition-opacity duration-fast",
     {
@@ -3941,7 +3941,7 @@ const xn = ({
     /* @__PURE__ */ e(
       "img",
       {
-        ...g,
+        ...p,
         src: T,
         alt: r,
         className: j,
@@ -3949,7 +3949,7 @@ const xn = ({
         onError: X
       }
     ),
-    w && o && /* @__PURE__ */ e("div", { className: q, children: x || K }),
+    w && o && /* @__PURE__ */ e("div", { className: q, children: m || K }),
     b && l && /* @__PURE__ */ e("div", { className: q, children: y || re })
   ] });
 };
@@ -3962,14 +3962,14 @@ function bn({
   trailing: o,
   onSelect: l,
   onActiveIndexChange: u,
-  isActive: x,
+  isActive: m,
   unread: y,
-  dimmed: f,
-  groupBy: m,
-  groups: h,
-  renderGroupHeader: g,
+  dimmed: h,
+  groupBy: f,
+  groups: x,
+  renderGroupHeader: p,
   stickyGroupHeaders: w = !1,
-  collapsibleGroups: p = !1,
+  collapsibleGroups: g = !1,
   hideGroupCount: b = !1,
   selectable: L = !1,
   selectedItems: T = [],
@@ -3986,7 +3986,7 @@ function bn({
 }) {
   const [C, i] = oe.useState(
     () => Object.fromEntries(
-      (h ?? []).filter((z) => z.defaultCollapsed).map((z) => [z.id, !0])
+      (x ?? []).filter((z) => z.defaultCollapsed).map((z) => [z.id, !0])
     )
   ), S = oe.useRef(null), N = (z) => {
     if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(z.key)) return;
@@ -4026,7 +4026,7 @@ function bn({
   if (t.length === 0 && q)
     return /* @__PURE__ */ e("div", { className: le, children: q });
   const G = t.length > 0 && T.length === t.length, P = T.length > 0 && !G, E = (z, V, B) => {
-    const H = x?.(z, V) ?? !1, M = y?.(z, V) ?? !1, I = f?.(z, V) ?? !1, te = L && k(z);
+    const H = m?.(z, V) ?? !1, M = y?.(z, V) ?? !1, I = h?.(z, V) ?? !1, te = L && k(z);
     return /* @__PURE__ */ c(
       "li",
       {
@@ -4052,7 +4052,7 @@ function bn({
         ),
         children: [
           L && /* @__PURE__ */ e("span", { onClick: (v) => v.stopPropagation(), children: /* @__PURE__ */ e(
-            ge,
+            pe,
             {
               checked: k(z),
               onChange: (v) => ee(z, v.target.checked),
@@ -4074,22 +4074,22 @@ function bn({
       A(z, V)
     );
   }, D = (() => {
-    if (!m)
+    if (!f)
       return t.map((H, M) => E(H, M, M === 0));
     const z = /* @__PURE__ */ new Map();
     t.forEach((H, M) => {
-      const I = m(H, M);
+      const I = f(H, M);
       z.has(I) || z.set(I, []), z.get(I).push({ item: H, index: M });
     });
-    const V = h ?? [];
+    const V = x ?? [];
     return [
       ...V.filter((H) => z.has(H.id)),
       ...[...z.keys()].filter((H) => !V.some((M) => M.id === H)).map((H) => ({ id: H }))
     ].flatMap((H, M) => {
-      const I = z.get(H.id) ?? [], te = p && C[H.id], v = H.title ?? H.id, U = H.count ?? I.length, Z = /* @__PURE__ */ e(
+      const I = z.get(H.id) ?? [], te = g && C[H.id], v = H.title ?? H.id, U = H.count ?? I.length, Z = /* @__PURE__ */ e(
         "li",
         {
-          onClick: p ? () => i((J) => ({ ...J, [H.id]: !J[H.id] })) : void 0,
+          onClick: g ? () => i((J) => ({ ...J, [H.id]: !J[H.id] })) : void 0,
           className: d(
             "flex items-center gap-2 bg-surface-sunk px-4 py-1.5",
             "text-xs font-semibold uppercase tracking-label text-text-subtle",
@@ -4097,12 +4097,12 @@ function bn({
             M > 0 && "border-t",
             "border-b",
             w && "sticky z-10",
-            p && "cursor-pointer select-none hover:text-text"
+            g && "cursor-pointer select-none hover:text-text"
           ),
-          "aria-expanded": p ? !te : void 0,
+          "aria-expanded": g ? !te : void 0,
           style: w ? { top: W ? 28 : 0 } : void 0,
-          children: g ? g(H, I.map((J) => J.item)) : /* @__PURE__ */ c(xe, { children: [
-            p && /* @__PURE__ */ e(
+          children: p ? p(H, I.map((J) => J.item)) : /* @__PURE__ */ c(xe, { children: [
+            g && /* @__PURE__ */ e(
               Ce,
               {
                 "aria-hidden": !0,
@@ -4129,7 +4129,7 @@ function bn({
   return /* @__PURE__ */ c("div", { ref: S, className: le, onKeyDown: l ? N : void 0, children: [
     L && T.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(
-        ge,
+        pe,
         {
           checked: G,
           indeterminate: P,
@@ -4157,7 +4157,7 @@ function bn({
     /* @__PURE__ */ e("ul", { "aria-label": ce, className: "flex flex-col", children: D })
   ] });
 }
-function gn({
+function pn({
   side: t,
   continued: r = !1,
   tone: n = "default",
@@ -4192,7 +4192,7 @@ const Er = {
   urgent: "text-danger-fg",
   success: "text-success-fg"
 };
-function pn({ value: t, label: r, tone: n = "default", className: s, ...a }) {
+function gn({ value: t, label: r, tone: n = "default", className: s, ...a }) {
   return /* @__PURE__ */ c("div", { className: d("rounded-xl shadow-sm bg-surface px-4 py-3.5", s), ...a, children: [
     /* @__PURE__ */ e("div", { className: d("text-2xl font-semibold", Er[n]), children: t }),
     /* @__PURE__ */ e("div", { className: "pt-0.5 text-xs text-text-muted", children: r })
@@ -4207,23 +4207,23 @@ const vn = ({
   children: o,
   className: l,
   backLabel: u = "Back",
-  backClassName: x,
+  backClassName: m,
   onBack: y,
-  editable: f = !1,
-  onTitleChange: m
+  editable: h = !1,
+  onTitleChange: f
 }) => {
-  const [h, g] = R(!1), [w, p] = R(r), b = se(null);
+  const [x, p] = R(!1), [w, g] = R(r), b = se(null);
   Q(() => {
-    p(r);
+    g(r);
   }, [r]), Q(() => {
-    h && b.current && (b.current.focus(), b.current.select());
-  }, [h]);
+    x && b.current && (b.current.focus(), b.current.select());
+  }, [x]);
   const L = () => {
-    f && g(!0);
+    h && p(!0);
   }, T = () => {
-    g(!1), w.trim() !== "" && w !== r && m ? m(w.trim()) : p(r);
+    p(!1), w.trim() !== "" && w !== r && f ? f(w.trim()) : g(r);
   }, _ = ($) => {
-    $.key === "Enter" ? b.current?.blur() : $.key === "Escape" && (p(r), g(!1));
+    $.key === "Enter" ? b.current?.blur() : $.key === "Escape" && (g(r), p(!1));
   };
   return /* @__PURE__ */ c(
     "div",
@@ -4239,13 +4239,13 @@ const vn = ({
           /* @__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 }),
             /* @__PURE__ */ c("div", { className: "min-w-0 flex-1", children: [
-              h ? /* @__PURE__ */ e(
+              x ? /* @__PURE__ */ e(
                 "input",
                 {
                   ref: b,
                   type: "text",
                   value: w,
-                  onChange: ($) => p($.target.value),
+                  onChange: ($) => g($.target.value),
                   onBlur: T,
                   onKeyDown: _,
                   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"
@@ -4257,14 +4257,14 @@ const vn = ({
                     onClick: L,
                     className: d(
                       "text-xl font-semibold truncate",
-                      f && "cursor-pointer"
+                      h && "cursor-pointer"
                     ),
-                    title: f ? "Click to edit" : void 0,
+                    title: h ? "Click to edit" : void 0,
                     children: r
                   }
                 ),
                 n && /* @__PURE__ */ e("span", { className: "shrink-0 text-base text-text-muted truncate", children: n }),
-                f && /* @__PURE__ */ e(
+                h && /* @__PURE__ */ e(
                   ut,
                   {
                     size: 15,
@@ -4436,27 +4436,27 @@ const Sn = ({
   size: n = "md",
   className: s
 }) => {
-  const a = (f) => {
-    if (!f) return "-";
+  const a = (h) => {
+    if (!h) return "-";
     try {
-      return new Date(f).toLocaleDateString("nl-NL", {
+      return new Date(h).toLocaleDateString("nl-NL", {
         year: "numeric",
         month: "long",
         day: "numeric"
       });
     } catch {
-      return String(f);
+      return String(h);
     }
-  }, o = (f) => f ? "Ja" : "Nee", l = (f, m) => {
-    if (!m) return String(f || "-");
-    const h = m.find((g) => g.value === f);
-    return h ? h.label : 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 || "-");
   }, u = ue(
-    (f) => {
-      const m = $r(r, f.name);
-      if (f.type === "array") {
-        const g = m;
-        return !g || g.length === 0 ? /* @__PURE__ */ e(
+    (h) => {
+      const f = $r(r, h.name);
+      if (h.type === "array") {
+        const p = f;
+        return !p || p.length === 0 ? /* @__PURE__ */ e(
           de,
           {
             variant: "body",
@@ -4464,7 +4464,7 @@ const Sn = ({
             className: "text-text-muted",
             children: "Geen items"
           }
-        ) : /* @__PURE__ */ e("div", { className: "space-y-3", children: g.map((w, p) => /* @__PURE__ */ c(
+        ) : /* @__PURE__ */ e("div", { className: "space-y-3", children: p.map((w, g) => /* @__PURE__ */ c(
           "div",
           {
             className: "p-4 border border-border rounded-xl space-y-3",
@@ -4477,13 +4477,13 @@ const Sn = ({
                   weight: "medium",
                   className: "text-text-muted",
                   children: [
-                    f.label,
+                    h.label,
                     " ",
-                    p + 1
+                    g + 1
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: f.arrayFields?.map((b) => {
+              /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: h.arrayFields?.map((b) => {
                 const L = w?.[b.name];
                 let T = "-";
                 switch (b.type) {
@@ -4539,48 +4539,48 @@ const Sn = ({
               }) })
             ]
           },
-          p
+          g
         )) });
       }
-      if (f.type === "custom" && f.customComponent)
-        return f.customComponent({ value: m });
-      if (f.format) {
-        const g = f.format(m, r);
+      if (h.type === "custom" && h.customComponent)
+        return h.customComponent({ value: f });
+      if (h.format) {
+        const p = h.format(f, r);
         return /* @__PURE__ */ e(
           de,
           {
             variant: "body",
             size: "sm",
             className: "text-text",
-            children: g
+            children: p
           }
         );
       }
-      let h = "-";
-      switch (f.type) {
+      let x = "-";
+      switch (h.type) {
         case "text":
         case "email":
         case "password":
         case "number":
         case "tel":
         case "url":
-          h = m ? String(m) : "-";
+          x = f ? String(f) : "-";
           break;
         case "textarea":
-          h = m ? /* @__PURE__ */ e("div", { className: "whitespace-pre-wrap", children: String(m || "-") }) : "-";
+          x = f ? /* @__PURE__ */ e("div", { className: "whitespace-pre-wrap", children: String(f || "-") }) : "-";
           break;
         case "select":
         case "radio":
-          h = l(m, f.options);
+          x = l(f, h.options);
           break;
         case "checkbox":
-          h = o(m);
+          x = o(f);
           break;
         case "date":
-          h = a(m);
+          x = a(f);
           break;
         default:
-          h = m ? String(m) : "-";
+          x = f ? String(f) : "-";
       }
       return /* @__PURE__ */ e(
         de,
@@ -4588,30 +4588,30 @@ const Sn = ({
           variant: "body",
           size: "sm",
           className: "text-text",
-          children: h
+          children: x
         }
       );
     },
     [r]
-  ), x = ue(
-    (f) => {
-      if (f.conditional && !f.conditional(r))
+  ), m = ue(
+    (h) => {
+      if (h.conditional && !h.conditional(r))
         return null;
-      const m = f.items.filter((g) => !(g.hidden || g.conditional && !g.conditional(r)));
-      if (m.length === 0) return null;
-      const h = d(
+      const f = h.items.filter((p) => !(p.hidden || p.conditional && !p.conditional(r)));
+      if (f.length === 0) return null;
+      const x = d(
         "space-y-4",
         {
-          "grid gap-4": f.layout === "grid",
-          "flex flex-wrap gap-4": f.layout === "flex"
+          "grid gap-4": h.layout === "grid",
+          "flex flex-wrap gap-4": h.layout === "flex"
         },
-        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.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.className
+        h.className
       );
       return /* @__PURE__ */ c(
         "div",
@@ -4626,45 +4626,45 @@ const Sn = ({
                   size: "lg",
                   weight: "semibold",
                   className: "text-text",
-                  children: f.title
+                  children: h.title
                 }
               ),
-              f.description && /* @__PURE__ */ e(
+              h.description && /* @__PURE__ */ e(
                 de,
                 {
                   variant: "body",
                   size: "sm",
                   className: "text-text-muted mt-1",
-                  children: f.description
+                  children: h.description
                 }
               )
             ] }),
-            /* @__PURE__ */ e("div", { className: "md:col-span-2", children: /* @__PURE__ */ e("div", { className: h, children: m.map((g) => /* @__PURE__ */ c(
+            /* @__PURE__ */ e("div", { className: "md:col-span-2", children: /* @__PURE__ */ e("div", { className: x, children: f.map((p) => /* @__PURE__ */ c(
               "div",
               {
                 className: "space-y-1",
                 style: {
-                  width: typeof g.width == "string" ? g.width : void 0,
-                  gridColumn: typeof g.width == "number" ? `span ${g.width} / span ${g.width}` : void 0
+                  width: typeof p.width == "string" ? p.width : void 0,
+                  gridColumn: typeof p.width == "number" ? `span ${p.width} / span ${p.width}` : void 0
                 },
                 children: [
-                  g.type !== "custom" && /* @__PURE__ */ e(
+                  p.type !== "custom" && /* @__PURE__ */ e(
                     de,
                     {
                       variant: "label",
                       size: "sm",
                       className: "font-medium text-text-muted",
-                      children: g.label
+                      children: p.label
                     }
                   ),
-                  u(g)
+                  u(p)
                 ]
               },
-              g.name
+              p.name
             )) }) })
           ]
         },
-        f.id
+        h.id
       );
     },
     [r, u]
@@ -4678,43 +4678,46 @@ const Sn = ({
     },
     s
   );
-  return /* @__PURE__ */ e("div", { className: y, children: /* @__PURE__ */ e("div", { className: "space-y-8", children: t.map(x) }) });
+  return /* @__PURE__ */ e("div", { className: y, 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;
-  return a ? /* @__PURE__ */ c("li", { children: [
-    /* @__PURE__ */ c(
-      "div",
-      {
-        className: d(
-          "flex items-center gap-2 px-2 pt-4 pb-1 text-xs font-semibold uppercase tracking-label text-text-subtle"
-        ),
-        children: [
-          /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 truncate", children: t.label }),
-          t.count !== void 0 && t.count > 0 && /* @__PURE__ */ e("span", { className: "font-normal tabular-nums", children: t.count })
-        ]
-      }
-    ),
-    /* @__PURE__ */ e("ul", { className: "flex flex-col gap-0.5", children: t.children?.map((l, u) => /* @__PURE__ */ e(
-      qe,
-      {
-        item: l,
-        isSelectedHandler: r,
-        onClick: n,
-        depth: s + 1
-      },
-      u
-    )) })
-  ] }) : /* @__PURE__ */ e("li", { children: /* @__PURE__ */ c(
+  if (a)
+    return /* @__PURE__ */ c("li", { children: [
+      /* @__PURE__ */ c(
+        "div",
+        {
+          className: d(
+            "flex items-center gap-2 px-2 pt-4 pb-1 text-xs font-semibold uppercase tracking-label text-text-subtle"
+          ),
+          children: [
+            /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 truncate", children: t.label }),
+            t.count !== void 0 && t.count > 0 && /* @__PURE__ */ e("span", { className: "font-normal tabular-nums", children: t.count })
+          ]
+        }
+      ),
+      /* @__PURE__ */ e("ul", { className: "flex flex-col gap-0.5", children: t.children?.map((m, y) => /* @__PURE__ */ e(
+        qe,
+        {
+          item: m,
+          isSelectedHandler: r,
+          onClick: n,
+          depth: s + 1
+        },
+        y
+      )) })
+    ] });
+  const l = t.action, u = l?.visibility !== "always";
+  return /* @__PURE__ */ e("li", { children: /* @__PURE__ */ c(
     "div",
     {
       role: "button",
       tabIndex: 0,
       onClick: () => t.path && n?.(t.path),
-      onKeyDown: (l) => {
-        (l.key === "Enter" || l.key === " ") && (l.preventDefault(), t.path && n?.(t.path));
+      onKeyDown: (m) => {
+        (m.key === "Enter" || m.key === " ") && (m.preventDefault(), t.path && n?.(t.path));
       },
       className: d(
-        "flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-base no-underline",
+        "group/item flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-base no-underline",
         "transition-colors duration-fast ease-out",
         "focus-visible:outline-none focus-visible:focus-ring",
         o ? "bg-accent-soft font-semibold text-accent" : "text-text-muted hover:bg-surface-hover hover:text-text"
@@ -4727,10 +4730,31 @@ const Sn = ({
           {
             className: d(
               "shrink-0 text-xs tabular-nums",
-              o ? "rounded-full bg-accent px-2 font-semibold text-accent-fg" : "text-text-subtle"
+              o ? "rounded-full bg-accent px-2 font-semibold text-accent-fg" : "text-text-subtle",
+              l && u && "group-hover/item:hidden group-focus-within/item:hidden"
             ),
             children: t.count
           }
+        ),
+        l && /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            "aria-label": l.label,
+            title: l.label,
+            onClick: (m) => {
+              m.stopPropagation(), l.onClick();
+            },
+            onKeyDown: (m) => m.stopPropagation(),
+            className: d(
+              "flex size-5 shrink-0 items-center justify-center rounded",
+              "text-text-subtle transition-colors duration-fast ease-out",
+              "hover:bg-surface-hover hover:text-text",
+              "focus-visible:outline-none focus-visible:focus-ring",
+              u && "opacity-0 group-hover/item:opacity-100 focus-visible:opacity-100"
+            ),
+            children: l.icon
+          }
         )
       ]
     }
@@ -4808,9 +4832,9 @@ const Sn = ({
   truncate: o = !1,
   className: l,
   children: u,
-  ...x
+  ...m
 }) => {
-  const y = `h${t}`, f = d(
+  const y = `h${t}`, h = d(
     "font-sans text-pretty",
     Dr[r || Ir(t)],
     Tr[n],
@@ -4819,7 +4843,7 @@ const Sn = ({
     o && "truncate",
     l
   );
-  return /* @__PURE__ */ e(y, { className: f, ...x, children: u });
+  return /* @__PURE__ */ e(y, { className: h, ...m, children: u });
 };
 function Ir(t) {
   return {
@@ -4839,44 +4863,44 @@ const Mn = ({
   initialCommandPath: a,
   initialActiveIndex: o
 }) => {
-  const [l, u] = R(""), [x, y] = R(a || []), [f, m] = R(o || 0), h = se(null), g = se(null), p = (x.length ? t.find((b) => b.id === x[0])?.subCommands || [] : t).filter(
+  const [l, u] = R(""), [m, y] = R(a || []), [h, f] = R(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())
   );
   return Q(() => {
-    r || (u(""), y(a || []), m(o || 0));
+    r || (u(""), y(a || []), f(o || 0));
   }, [r]), Q(() => {
     const b = (L) => {
       if (r) {
         if (L.key === "Escape")
           n();
         else if (L.key === "ArrowUp")
-          m(
-            (T) => T > 0 ? T - 1 : p.length - 1
+          f(
+            (T) => T > 0 ? T - 1 : g.length - 1
           );
         else if (L.key === "ArrowDown")
-          m(
-            (T) => T < p.length - 1 ? T + 1 : 0
+          f(
+            (T) => T < g.length - 1 ? T + 1 : 0
           );
         else if (L.key === "Enter") {
-          const T = p[f];
-          T && (T.subCommands ? (y([...x, T.id]), m(0)) : T.action && (T.action(), n()));
+          const T = g[h];
+          T && (T.subCommands ? (y([...m, T.id]), f(0)) : T.action && (T.action(), n()));
         }
       }
     };
     return document.addEventListener("keydown", b), () => document.removeEventListener("keydown", b);
-  }, [r, n, p, f, x]), Q(() => {
+  }, [r, n, g, h, m]), Q(() => {
     const b = (L) => {
-      h.current && !h.current.contains(L.target) && n();
+      x.current && !x.current.contains(L.target) && n();
     };
     return r && document.addEventListener("mousedown", b), () => document.removeEventListener("mousedown", b);
   }, [r, n]), Q(() => {
     if (!r) return;
-    g.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(
+    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(
     "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: h,
+      ref: x,
       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" }),
@@ -4895,19 +4919,19 @@ const Mn = ({
         /* @__PURE__ */ c(
           "div",
           {
-            ref: g,
+            ref: p,
             className: "mt-2 pt-2 text-sm border-t border-border max-h-dialog-list overflow-y-auto",
             children: [
-              p.length === 0 && /* @__PURE__ */ e("div", { className: "text-text-muted text-center text-sm", children: s?.noCommandsFound || "No commands found" }),
-              p.map((b, L) => /* @__PURE__ */ c(
+              g.length === 0 && /* @__PURE__ */ e("div", { className: "text-text-muted text-center text-sm", children: s?.noCommandsFound || "No commands found" }),
+              g.map((b, L) => /* @__PURE__ */ c(
                 "div",
                 {
                   "data-index": L,
-                  className: `flex items-center p-2 cursor-pointer rounded-md ${L === f ? "bg-accent-soft text-accent" : "text-text"}`,
+                  className: `flex items-center p-2 cursor-pointer rounded-md ${L === h ? "bg-accent-soft text-accent" : "text-text"}`,
                   onClick: () => {
-                    b.subCommands ? (y([...x, b.id]), m(0)) : b.action && (b.action(), n());
+                    b.subCommands ? (y([...m, b.id]), f(0)) : b.action && (b.action(), n());
                   },
-                  onMouseEnter: () => m(L),
+                  onMouseEnter: () => f(L),
                   children: [
                     b.icon && /* @__PURE__ */ e("span", { className: "mr-3", children: b.icon }),
                     /* @__PURE__ */ e("span", { className: "flex-grow", children: b.label }),
@@ -5007,12 +5031,12 @@ const Mn = ({
     border: o,
     borderColor: l,
     className: u,
-    children: x,
+    children: m,
     ...y
-  }, f) => /* @__PURE__ */ e(
+  }, h) => /* @__PURE__ */ e(
     "div",
     {
-      ref: f,
+      ref: h,
       className: d(
         t && jr[t],
         r && Pr[r],
@@ -5024,7 +5048,7 @@ const Mn = ({
         u
       ),
       ...y,
-      children: x
+      children: m
     }
   )
 );
@@ -5052,41 +5076,41 @@ function Dn({
   componentProps: a,
   className: o
 }) {
-  const l = se(null), [u, x] = R(!0), [y, f] = R(null), m = se(null);
+  const l = se(null), [u, m] = R(!0), [y, h] = R(null), f = se(null);
   return se(null), Q(() => {
-    let h = !0;
+    let x = !0;
     return (async () => {
-      x(!0);
+      m(!0);
       try {
         const w = await r();
-        if (!h) return;
-        const p = w.component || w.default || w;
-        f(n === "react" ? () => p : () => w);
+        if (!x) return;
+        const g = w.component || w.default || w;
+        h(n === "react" ? () => g : () => w);
       } catch (w) {
         console.error(`[FederatedResource] Load failed: ${t}`, w);
       } finally {
-        h && x(!1);
+        x && m(!1);
       }
     })(), () => {
-      h = !1;
+      x = !1;
     };
   }, [t, r]), Q(() => {
     if (u || !y || n === "react") return;
-    const h = l.current;
-    if (h) {
+    const x = l.current;
+    if (x) {
       if (n === "svelte") {
-        const g = y.default || y, w = new g({ target: h, props: a || {} });
-        return m.current = w, () => w.$destroy();
+        const p = y.default || y, w = new p({ target: x, props: a || {} });
+        return f.current = w, () => w.$destroy();
       }
       if (y.mount) {
-        const g = y.mount({ container: h, props: a || {} });
+        const p = y.mount({ container: x, props: a || {} });
         return () => {
-          typeof g == "function" ? g() : y.unmount?.(h);
+          typeof p == "function" ? p() : y.unmount?.(x);
         };
       }
     }
   }, [y, n, u]), Q(() => {
-    n === "svelte" && m.current && m.current.$set?.(a);
+    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 })
@@ -5130,7 +5154,7 @@ export {
   Xr as ButtonGroup,
   $n as Card,
   hn as ChannelBadge,
-  ge as Checkbox,
+  pe as Checkbox,
   Mn as CommandPalette,
   nn as ConfirmDialog,
   Ut as ContentLoading,
@@ -5146,11 +5170,11 @@ export {
   Y as Icon,
   xn as Image,
   ln as Kbd,
-  pn as KpiCard,
+  gn as KpiCard,
   Qr as Link,
   bn as List,
   Gr as MeetingGrid,
-  gn as MessageBubble,
+  pn as MessageBubble,
   Ue as Modal,
   vn as PageHeader,
   yn as PageToolbar,