@opencxh/ui-kit 3.113.1 → 3.114.0

package/dist/index.js

@@ -1,24 +1,24 @@
-import { clsx as Ue } from "clsx";
+import { clsx as qe } from "clsx";
 import { jsxs as i, jsx as e, Fragment as fe } from "react/jsx-runtime";
 import { VideoOff as We, User as Ke, MicOff as _e, Mic as Ge, X as ve, ChevronDown as be, ExternalLink as Je, Calendar as Ye, ChevronLeft as je, ChevronRight as ye, ChevronDownIcon as Xe, Loader2 as Ze, Search as Ne, Check as Me, ChevronUp as Qe, ChevronsLeft as et, ChevronsRight as tt, FileText as ke, HardDrive as $e, ArrowLeft as Ee, FolderPlus as rt, Upload as nt, Folder as De, Trash2 as st, Plus as at, Sparkles as lt, ImageOff as ot, Pencil as ct, ArrowUpRight as it } from "lucide-react";
 import le, { useRef as ae, useEffect as Y, forwardRef as de, useState as R, useLayoutEffect as dt, useMemo as me, useCallback as ce, createContext as ut, Component as mt } from "react";
-function m(...t) {
-  return Ue(t);
+function u(...t) {
+  return qe(t);
 }
-function qr(t) {
+function Ur(t) {
   return (r, n) => t[r]?.[n] || "";
 }
-function Ur(t) {
+function qr(t) {
   return (r) => t[r] || "";
 }
 function Wr({ tiles: t, pinned: r, className: n }) {
   if (r)
-    return /* @__PURE__ */ i("div", { className: m("flex flex-col md:flex-row gap-2 h-full min-h-0", n), children: [
+    return /* @__PURE__ */ i("div", { className: u("flex flex-col md:flex-row gap-2 h-full min-h-0", n), children: [
       /* @__PURE__ */ e("div", { className: "flex-1 min-h-0", children: r }),
       t.length > 0 && /* @__PURE__ */ e("div", { className: "flex md:flex-col gap-2 md:w-48 overflow-auto", children: t.map((a, l) => /* @__PURE__ */ e("div", { className: "min-w-40 md:min-w-0", children: a }, l)) })
     ] });
   const s = t.length <= 1 ? "grid-cols-1" : t.length <= 4 ? "grid-cols-2" : t.length <= 9 ? "grid-cols-3" : "grid-cols-4";
-  return /* @__PURE__ */ e("div", { className: m("grid gap-2 h-full", s, n), children: t.map((a, l) => /* @__PURE__ */ e("div", { children: a }, l)) });
+  return /* @__PURE__ */ e("div", { className: u("grid gap-2 h-full", s, n), children: t.map((a, l) => /* @__PURE__ */ e("div", { children: a }, l)) });
 }
 function Kr({
   name: t,
@@ -28,14 +28,14 @@ function Kr({
   hasVideo: a,
   videoSlot: l,
   className: c,
-  fill: h
+  fill: x
 }) {
   return /* @__PURE__ */ i(
     "div",
     {
-      className: m(
+      className: u(
         "relative rounded-lg overflow-hidden bg-video-surface flex items-center justify-center",
-        h ? "h-full w-full" : "aspect-video",
+        x ? "h-full w-full" : "aspect-video",
         s && "ring-2 ring-speaking",
         c
       ),
@@ -61,7 +61,7 @@ function _r({ attach: t, active: r = !0, mirrored: n = !1, className: s }) {
     "div",
     {
       ref: a,
-      className: m(
+      className: u(
         "w-full h-full bg-video-surface-strong overflow-hidden",
         n && "[&>*]:scale-x-[-1]",
         s
@@ -70,16 +70,18 @@ function _r({ attach: t, active: r = !0, mirrored: n = !1, className: s }) {
   );
 }
 const ft = {
-  primary: "bg-accent text-accent-fg hover:bg-accent-hover",
-  secondary: "border border-border bg-surface text-text hover:bg-surface-hover",
+  primary: "bg-accent text-accent-fg hover:bg-accent-hover disabled:bg-surface-hover",
+  secondary: "border border-border bg-surface text-text hover:bg-surface-hover disabled:bg-surface-hover",
+  // No resting fill, so no disabled fill either — a greyed-out plate where
+  // there was nothing reads as a different control, not as a disabled one.
   outline: "border border-accent-border text-accent hover:bg-accent-soft",
   ghost: "text-text-muted hover:bg-surface-hover hover:text-text",
-  destructive: "border border-danger-border bg-danger-soft text-danger-fg hover:border-danger",
+  destructive: "border border-danger-border bg-danger-soft text-danger-fg hover:border-danger disabled:bg-surface-hover",
   // Solid status fills. Reserved for a control whose colour IS the answer —
   // an RSVP, answering or rejecting a call — not for ordinary emphasis.
-  success: "bg-success text-text-inverse hover:opacity-90",
-  warning: "bg-warning text-text-inverse hover:opacity-90",
-  "danger-solid": "bg-danger text-text-inverse hover:opacity-90"
+  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"
 }, ht = {
   xs: "h-control-xs px-2 text-xs",
   sm: "h-control-sm px-3 text-sm",
@@ -105,25 +107,25 @@ const ft = {
     leftIcon: a,
     rightIcon: l,
     iconOnly: c = !1,
-    shape: h = "default",
+    shape: x = "default",
     className: b,
     children: y,
-    disabled: x,
-    ...u
-  }, f) => {
-    const p = x || s;
+    disabled: f,
+    ...m
+  }, h) => {
+    const p = f || s;
     return /* @__PURE__ */ i(
       "button",
       {
-        ref: f,
+        ref: h,
         type: "button",
-        className: m(
+        className: u(
           "inline-flex shrink-0 items-center justify-center gap-2 cursor-pointer font-semibold",
-          h === "circle" ? "rounded-full" : "rounded-md",
+          x === "circle" ? "rounded-full" : "rounded-md",
           "transition-colors duration-fast ease-out",
           "focus-visible:outline-none focus-visible:focus-ring",
           "disabled:cursor-not-allowed disabled:border-border-subtle",
-          "disabled:bg-surface-hover disabled:text-text-disabled",
+          "disabled:text-text-disabled",
           ft[t],
           c ? xt[r] : ht[r],
           (n || r === "full") && "w-full",
@@ -132,7 +134,7 @@ const ft = {
         ),
         disabled: p,
         "aria-busy": s || void 0,
-        ...u,
+        ...m,
         children: [
           s && /* @__PURE__ */ e(
             "span",
@@ -158,7 +160,7 @@ const Gr = ({
   attached: s = !0,
   className: a
 }) => {
-  const l = m(
+  const l = u(
     "inline-flex",
     {
       // Orientation
@@ -199,9 +201,9 @@ const Gr = ({
   onClick: a,
   className: l,
   "aria-label": c,
-  ...h
+  ...x
 }) => {
-  const b = typeof r == "number" ? r : gt(r), y = m(
+  const b = typeof r == "number" ? r : gt(r), y = u(
     "inline-block shrink-0",
     bt[n],
     s && [
@@ -209,7 +211,7 @@ const Gr = ({
       "focus-visible:outline-none focus-visible:focus-ring"
     ],
     l
-  ), x = {
+  ), f = {
     size: b,
     strokeWidth: 2,
     className: y,
@@ -218,12 +220,12 @@ const Gr = ({
     "aria-hidden": c ? void 0 : !0,
     role: s ? "button" : void 0,
     tabIndex: s ? 0 : void 0,
-    onKeyDown: s ? (u) => {
-      (u.key === "Enter" || u.key === " ") && (u.preventDefault(), a?.());
+    onKeyDown: s ? (m) => {
+      (m.key === "Enter" || m.key === " ") && (m.preventDefault(), a?.());
     } : void 0,
-    ...h
+    ...x
   };
-  return /* @__PURE__ */ e(t, { ...x });
+  return /* @__PURE__ */ e(t, { ...f });
 };
 function gt(t) {
   return {
@@ -248,44 +250,44 @@ function Jr({
   size: a = "md",
   active: l = !1,
   caret: c = !1,
-  onClear: h,
+  onClear: x,
   clearLabel: b = "Filter wissen",
   onClick: y,
-  title: x,
-  className: u
+  title: f,
+  className: m
 }) {
-  const f = l && !!h, p = s === "pill" ? "rounded-full" : "rounded-md", k = m(
+  const h = l && !!x, p = s === "pill" ? "rounded-full" : "rounded-md", k = u(
     // 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",
     p,
     // Picking a value outranks whatever the value happens to mean.
-    l ? "bg-accent text-accent-fg" : m("border", pt[n]),
-    u
+    l ? "bg-accent text-accent-fg" : u("border", pt[n]),
+    m
   ), v = /* @__PURE__ */ i(fe, { children: [
     r,
     t,
     c && /* @__PURE__ */ e(J, { icon: be, size: "xs" })
-  ] }), g = m(
+  ] }), g = u(
     "inline-flex items-center gap-1.5 pl-3",
     p,
-    f ? "pr-1.5" : "pr-3",
+    h ? "pr-1.5" : "pr-3",
     "focus-visible:outline-none focus-visible:focus-ring"
   );
-  return f ? /* @__PURE__ */ i("span", { className: k, title: x, children: [
+  return h ? /* @__PURE__ */ i("span", { className: k, title: f, children: [
     /* @__PURE__ */ e("button", { type: "button", onClick: y, className: g, children: v }),
     /* @__PURE__ */ e(
       "button",
       {
         type: "button",
         "aria-label": b,
-        onClick: h,
-        className: m("inline-flex h-full items-center pr-3 focus-visible:outline-none focus-visible:focus-ring", p),
+        onClick: x,
+        className: u("inline-flex h-full items-center pr-3 focus-visible:outline-none focus-visible:focus-ring", p),
         children: /* @__PURE__ */ e(J, { icon: ve, size: "xs" })
       }
     )
-  ] }) : /* @__PURE__ */ e("button", { type: "button", title: x, onClick: y, className: m(k, g), children: v });
+  ] }) : /* @__PURE__ */ e("button", { type: "button", title: f, onClick: y, className: u(k, g), children: v });
 }
 const vt = {
   xs: "text-xs",
@@ -319,12 +321,12 @@ const vt = {
   external: a = !1,
   className: l,
   children: c,
-  href: h,
+  href: x,
   target: b,
   rel: y,
-  ...x
+  ...f
 }) => {
-  const u = a || h && (h.startsWith("http") || h.startsWith("mailto:")), f = m(
+  const m = a || x && (x.startsWith("http") || x.startsWith("mailto:")), h = u(
     "inline-flex items-center gap-1 underline-offset-2",
     "transition-colors duration-fast ease-out",
     "focus-visible:outline-none focus-visible:focus-ring",
@@ -339,15 +341,15 @@ const vt = {
     s && "pointer-events-none cursor-not-allowed text-text-disabled opacity-50",
     l
   ), p = {
-    ...x,
-    href: s ? void 0 : h,
-    target: u ? "_blank" : b,
-    rel: u ? "noopener noreferrer" : y,
+    ...f,
+    href: s ? void 0 : x,
+    target: m ? "_blank" : b,
+    rel: m ? "noopener noreferrer" : y,
     "aria-disabled": s || void 0
   };
-  return /* @__PURE__ */ i("a", { className: f, ...p, children: [
+  return /* @__PURE__ */ i("a", { className: h, ...p, children: [
     c,
-    u && /* @__PURE__ */ e(Je, { className: "size-icon-sm shrink-0", "aria-hidden": !0 })
+    m && /* @__PURE__ */ e(Je, { className: "size-icon-sm shrink-0", "aria-hidden": !0 })
   ] });
 }, wt = {
   sm: "h-control-sm px-3 text-sm",
@@ -366,22 +368,22 @@ function Xr({
     {
       role: "tablist",
       "aria-label": l,
-      className: m("inline-flex gap-0.5 rounded-md bg-surface-hover p-0.5", a),
+      className: u("inline-flex gap-0.5 rounded-md bg-surface-hover p-0.5", a),
       children: t.map((c) => {
-        const h = c.value === r;
+        const x = c.value === r;
         return /* @__PURE__ */ e(
           "button",
           {
             role: "tab",
-            "aria-selected": h,
+            "aria-selected": x,
             type: "button",
             onClick: () => n(c.value),
-            className: m(
+            className: u(
               "inline-flex items-center justify-center rounded-sm",
               "transition-colors duration-fast ease-out",
               "focus-visible:outline-none focus-visible:focus-ring",
               wt[s],
-              h ? "bg-surface text-text font-semibold" : "text-text-muted hover:text-text"
+              x ? "bg-surface text-text font-semibold" : "text-text-muted hover:text-text"
             ),
             children: c.label
           },
@@ -395,14 +397,14 @@ function we(t, r, { gap: n = 6, matchWidth: s = !1, placement: a = "bottom-start
   const [l, c] = R({});
   return dt(() => {
     if (!t) return;
-    const h = () => {
+    const x = () => {
       const b = r.current;
       if (!b) return;
-      const y = b.getBoundingClientRect(), x = window.innerHeight - y.bottom, u = y.top, f = a.startsWith("top"), p = f ? u < 200 && x > u : x < 200 && u > x, k = f !== p, v = { position: "fixed" };
-      k ? (v.bottom = window.innerHeight - y.top + n, v.maxHeight = Math.max(120, u - n * 2)) : (v.top = y.bottom + n, v.maxHeight = Math.max(120, x - n * 2)), a.endsWith("end") ? v.right = window.innerWidth - y.right : v.left = y.left, s && (v.width = y.width), c(v);
+      const y = b.getBoundingClientRect(), f = window.innerHeight - y.bottom, m = y.top, h = a.startsWith("top"), p = h ? m < 200 && f > m : f < 200 && m > f, k = h !== p, v = { position: "fixed" };
+      k ? (v.bottom = window.innerHeight - y.top + n, v.maxHeight = Math.max(120, m - n * 2)) : (v.top = y.bottom + n, v.maxHeight = Math.max(120, f - n * 2)), a.endsWith("end") ? v.right = window.innerWidth - y.right : v.left = y.left, s && (v.width = y.width), c(v);
     };
-    return h(), window.addEventListener("scroll", h, !0), window.addEventListener("resize", h), () => {
-      window.removeEventListener("scroll", h, !0), window.removeEventListener("resize", h);
+    return x(), window.addEventListener("scroll", x, !0), window.addEventListener("resize", x), () => {
+      window.removeEventListener("scroll", x, !0), window.removeEventListener("resize", x);
     };
   }, [t, r, n, s, a]), l;
 }
@@ -414,15 +416,15 @@ const kt = ({
   rootClassName: a,
   triggerClassName: l,
   disabled: c = !1,
-  triggerLabel: h
+  triggerLabel: x
 }) => {
-  const [b, y] = R(!1), x = ae(null), u = ae(null), f = we(b, u, { placement: n });
+  const [b, y] = R(!1), f = ae(null), m = ae(null), h = we(b, m, { placement: n });
   Y(() => {
     if (!b) return;
-    const v = ($) => {
-      x.current && !x.current.contains($.target) && y(!1);
-    }, g = ($) => {
-      $.key === "Escape" && y(!1);
+    const v = (L) => {
+      f.current && !f.current.contains(L.target) && y(!1);
+    }, g = (L) => {
+      L.key === "Escape" && y(!1);
     };
     return document.addEventListener("mousedown", v), document.addEventListener("keydown", g), () => {
       document.removeEventListener("mousedown", v), document.removeEventListener("keydown", g);
@@ -431,17 +433,17 @@ const kt = ({
   const p = (v) => {
     v.stopPropagation(), !c && y((g) => !g);
   }, k = () => y(!1);
-  return /* @__PURE__ */ i("div", { ref: x, className: m("relative inline-flex", a), children: [
+  return /* @__PURE__ */ i("div", { ref: f, className: u("relative inline-flex", a), children: [
     /* @__PURE__ */ e(
       "button",
       {
-        ref: u,
+        ref: m,
         type: "button",
         onClick: p,
         disabled: c,
-        "aria-label": h,
+        "aria-label": x,
         "aria-expanded": b,
-        className: m(
+        className: u(
           "inline-flex items-center",
           c && "cursor-not-allowed opacity-50",
           l
@@ -452,13 +454,13 @@ const kt = ({
     b && /* @__PURE__ */ e(
       "div",
       {
-        className: m(
+        className: u(
           // overflow-y-auto pairs with the hook's max-height: without it a
           // panel taller than the space available is simply cut off.
           "fixed z-overlay overflow-y-auto rounded-lg border border-border bg-surface shadow-overlay",
           s
         ),
-        style: f,
+        style: h,
         children: typeof r == "function" ? r(k) : r
       }
     )
@@ -479,11 +481,11 @@ function Pe({
   icon: a,
   options: l,
   disabled: c = !1,
-  loading: h = !1,
+  loading: x = !1,
   menuPlacement: b = "bottom-end",
   menuLabel: y = "More options"
 }) {
-  const x = c || h, u = l.length > 0;
+  const f = c || x, m = l.length > 0;
   return /* @__PURE__ */ i("div", { className: "inline-flex items-center gap-px", children: [
     /* @__PURE__ */ e(
       re,
@@ -492,41 +494,41 @@ function Pe({
         size: s,
         onClick: r,
         disabled: c,
-        loading: h,
+        loading: x,
         leftIcon: a,
-        className: m(u && "rounded-r-none"),
+        className: u(m && "rounded-r-none"),
         children: t
       }
     ),
-    u && /* @__PURE__ */ e(
+    m && /* @__PURE__ */ e(
       kt,
       {
         placement: b,
-        disabled: x,
+        disabled: f,
         triggerLabel: y,
         className: "min-w-menu py-1",
         trigger: /* @__PURE__ */ e(
           "span",
           {
             "aria-hidden": "true",
-            className: m(
+            className: u(
               "inline-flex items-center justify-center rounded-md rounded-l-none",
               "transition-colors duration-fast ease-out",
               Ct[n],
               St[s],
-              x && "cursor-not-allowed opacity-50"
+              f && "cursor-not-allowed opacity-50"
             ),
             children: /* @__PURE__ */ e(be, { className: "size-icon-md" })
           }
         ),
-        children: (f) => /* @__PURE__ */ e(fe, { children: l.map((p) => /* @__PURE__ */ i(
+        children: (h) => /* @__PURE__ */ e(fe, { children: l.map((p) => /* @__PURE__ */ i(
           "button",
           {
             type: "button",
             onClick: () => {
-              p.onClick(), f();
+              p.onClick(), h();
             },
-            className: m(
+            className: u(
               "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",
@@ -565,53 +567,53 @@ const zt = {
     error: n,
     size: s = "md",
     indeterminate: a = !1,
-    shape: l = "square",
-    containerClassName: c,
-    labelClassName: h,
-    className: b,
-    id: y,
-    ...x
-  }, u) => {
-    const f = le.useId(), p = y || `checkbox-${f}`, k = !!n, v = le.useRef(null), g = le.useCallback(
-      ($) => {
-        v.current = $, typeof u == "function" ? u($) : u && typeof u == "object" && (u.current = $);
+    containerClassName: l,
+    labelClassName: c,
+    className: x,
+    id: b,
+    ...y
+  }, f) => {
+    const m = le.useId(), h = b || `checkbox-${m}`, p = !!n, k = le.useRef(null), v = le.useCallback(
+      (g) => {
+        k.current = g, typeof f == "function" ? f(g) : f && typeof f == "object" && (f.current = g);
       },
-      [u]
+      [f]
     );
     return le.useEffect(() => {
-      v.current && (v.current.indeterminate = a);
-    }, [a]), /* @__PURE__ */ i("div", { className: m("flex flex-col", c), children: [
-      /* @__PURE__ */ i("div", { className: m("flex items-center gap-3", Et[s]), children: [
+      k.current && (k.current.indeterminate = a);
+    }, [a]), /* @__PURE__ */ i("div", { className: u("flex flex-col", l), children: [
+      /* @__PURE__ */ i("div", { className: u("flex items-center gap-3", Et[s]), children: [
         /* @__PURE__ */ e(
           "input",
           {
-            ref: g,
-            id: p,
+            ref: v,
+            id: h,
             type: "checkbox",
-            "aria-invalid": k || void 0,
-            className: m(
-              "shrink-0 border bg-surface-input accent-accent",
-              l === "circle" ? "rounded-full" : "rounded-sm",
+            "aria-invalid": p || void 0,
+            className: u(
+              // 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.
+              "shrink-0 rounded-md border bg-surface-input accent-accent",
               "transition-colors duration-fast ease-out",
               "focus-visible:outline-none focus-visible:focus-ring",
               "disabled:cursor-not-allowed disabled:bg-surface-hover",
               zt[s],
-              k ? "border-danger-border" : "border-border-strong",
-              b
+              p ? "border-danger-border" : "border-border-strong",
+              x
             ),
-            ...x
+            ...y
           }
         ),
         t && /* @__PURE__ */ i("div", { className: "flex-1", children: [
           /* @__PURE__ */ e(
             "label",
             {
-              htmlFor: p,
-              className: m(
+              htmlFor: h,
+              className: u(
                 "cursor-pointer",
-                k ? "text-danger-fg" : "text-text",
+                p ? "text-danger-fg" : "text-text",
                 Mt[s],
-                h
+                c
               ),
               children: t
             }
@@ -632,39 +634,39 @@ const $t = () => /* @__PURE__ */ e(J, { icon: Ye, size: "md", color: "current" }
   required: a = !1,
   size: l = "md",
   className: c,
-  minDate: h,
+  minDate: x,
   maxDate: b,
   format: y = "MM/dd/yyyy",
-  withTime: x = !1
-}, u) => {
-  const [f, p] = R(!1), [k, v] = R(() => t || /* @__PURE__ */ new Date()), g = ae(null), $ = ae(null), D = we(f, $);
+  withTime: f = !1
+}, m) => {
+  const [h, p] = R(!1), [k, v] = R(() => t || /* @__PURE__ */ new Date()), g = ae(null), L = ae(null), $ = we(h, L);
   Y(() => {
     const d = (E) => {
       g.current && !g.current.contains(E.target) && p(!1);
     };
-    return f && document.addEventListener("mousedown", d), () => {
+    return h && document.addEventListener("mousedown", d), () => {
       document.removeEventListener("mousedown", d);
     };
-  }, [f]);
+  }, [h]);
   const _ = (d) => {
     if (!d) return "";
-    const E = d.getDate().toString().padStart(2, "0"), N = (d.getMonth() + 1).toString().padStart(2, "0"), L = d.getFullYear(), w = y === "dd/MM/yyyy" ? `${E}/${N}/${L}` : y === "yyyy-MM-dd" ? `${L}-${N}-${E}` : `${N}/${E}/${L}`;
-    return x ? `${w} ${M(d)}` : w;
-  }, M = (d) => `${d.getHours().toString().padStart(2, "0")}:${d.getMinutes().toString().padStart(2, "0")}`, q = (d) => {
+    const E = d.getDate().toString().padStart(2, "0"), N = (d.getMonth() + 1).toString().padStart(2, "0"), A = d.getFullYear(), w = y === "dd/MM/yyyy" ? `${E}/${N}/${A}` : y === "yyyy-MM-dd" ? `${A}-${N}-${E}` : `${N}/${E}/${A}`;
+    return f ? `${w} ${M(d)}` : w;
+  }, M = (d) => `${d.getHours().toString().padStart(2, "0")}:${d.getMinutes().toString().padStart(2, "0")}`, U = (d) => {
     const [E, N] = d.split(":").map(Number);
     if (Number.isNaN(E) || Number.isNaN(N)) return;
-    const L = t ? new Date(t) : /* @__PURE__ */ new Date();
-    L.setHours(E, N, 0, 0), r?.(L);
+    const A = t ? new Date(t) : /* @__PURE__ */ new Date();
+    A.setHours(E, N, 0, 0), r?.(A);
   }, V = () => {
-    const d = k.getFullYear(), E = k.getMonth(), N = new Date(d, E, 1), L = new Date(N);
-    L.setDate(L.getDate() - N.getDay());
-    const w = [], Q = new Date(L);
+    const d = k.getFullYear(), E = k.getMonth(), N = new Date(d, E, 1), A = new Date(N);
+    A.setDate(A.getDate() - N.getDay());
+    const w = [], Q = new Date(A);
     for (let te = 0; te < 42; te++)
       w.push(new Date(Q)), Q.setDate(Q.getDate() + 1);
     return w;
   }, j = (d) => {
-    if (d.getMonth() === k.getMonth() && !(h && d < h) && !(b && d > b)) {
-      if (x) {
+    if (d.getMonth() === k.getMonth() && !(x && d < x) && !(b && d > b)) {
+      if (f) {
         const N = new Date(d);
         N.setHours(t?.getHours() ?? 0, t?.getMinutes() ?? 0, 0, 0), r?.(N);
         return;
@@ -677,7 +679,7 @@ const $t = () => /* @__PURE__ */ e(J, { icon: Ye, size: "md", color: "current" }
     v(new Date(k.getFullYear(), k.getMonth() + 1, 1));
   }, X = () => {
     r?.(null), p(!1);
-  }, Z = m(
+  }, Z = u(
     "w-full border border-border rounded-md transition-colors duration-fast",
     "bg-surface text-text",
     "placeholder:text-text-muted",
@@ -705,33 +707,33 @@ const $t = () => /* @__PURE__ */ e(J, { icon: Ye, size: "md", color: "current" }
     "December"
   ];
   return /* @__PURE__ */ i("div", { ref: g, className: "relative", children: [
-    /* @__PURE__ */ i("div", { ref: $, className: "relative", children: [
+    /* @__PURE__ */ i("div", { ref: L, className: "relative", children: [
       /* @__PURE__ */ e(
         "input",
         {
-          ref: u,
+          ref: m,
           type: "text",
           value: _(t ?? null),
           placeholder: n,
           disabled: s,
           required: a,
           readOnly: !0,
-          onClick: () => !s && p(!f),
-          className: m(Z, "pr-10 cursor-pointer")
+          onClick: () => !s && p(!h),
+          className: u(Z, "pr-10 cursor-pointer")
         }
       ),
       /* @__PURE__ */ e(
         "button",
         {
           type: "button",
-          onClick: () => !s && p(!f),
+          onClick: () => !s && p(!h),
           disabled: s,
           className: "absolute inset-y-0 right-0 flex items-center pr-3 text-text-muted hover:text-text-muted",
           children: /* @__PURE__ */ e($t, {})
         }
       )
     ] }),
-    f && /* @__PURE__ */ i("div", { style: D, className: "fixed z-overlay overflow-auto rounded-lg border border-border bg-surface p-4 shadow-overlay min-w-panel", children: [
+    h && /* @__PURE__ */ i("div", { style: $, className: "fixed z-overlay overflow-auto rounded-lg border border-border bg-surface p-4 shadow-overlay min-w-panel", children: [
       /* @__PURE__ */ i("div", { className: "flex items-center justify-between mb-4", children: [
         /* @__PURE__ */ e(
           "button",
@@ -757,18 +759,18 @@ const $t = () => /* @__PURE__ */ e(J, { icon: Ye, 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((d) => /* @__PURE__ */ e("div", { className: "text-xs font-medium text-text-muted text-center py-1", children: d }, d)) }),
       /* @__PURE__ */ e("div", { className: "grid grid-cols-7 gap-1", children: ee.map((d, E) => {
-        const N = d.getMonth() === k.getMonth(), L = t && d.toDateString() === t.toDateString(), w = d.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), Q = !N || h && d < h || b && d > b;
+        const N = d.getMonth() === k.getMonth(), A = t && d.toDateString() === t.toDateString(), w = d.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), Q = !N || x && d < x || b && d > b;
         return /* @__PURE__ */ e(
           "button",
           {
             onClick: () => !Q && j(d),
             disabled: Q,
-            className: m(
+            className: u(
               "w-8 h-8 text-sm rounded transition-colors duration-fast",
               {
-                "text-text hover:bg-surface-hover": N && !L && !Q,
-                "bg-accent text-accent-fg": L,
-                "bg-surface-hover text-text": w && !L,
+                "text-text hover:bg-surface-hover": N && !A && !Q,
+                "bg-accent text-accent-fg": A,
+                "bg-surface-hover text-text": w && !A,
                 "text-text-muted cursor-not-allowed": Q
               }
             ),
@@ -777,7 +779,7 @@ const $t = () => /* @__PURE__ */ e(J, { icon: Ye, size: "md", color: "current" }
           E
         );
       }) }),
-      x && /* @__PURE__ */ i("div", { className: "mt-3 flex items-center gap-2 border-t border-border pt-3", children: [
+      f && /* @__PURE__ */ i("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",
@@ -785,7 +787,7 @@ const $t = () => /* @__PURE__ */ e(J, { icon: Ye, size: "md", color: "current" }
             id: "datepicker-time",
             type: "time",
             value: t ? M(t) : "",
-            onChange: (d) => q(d.target.value),
+            onChange: (d) => U(d.target.value),
             className: "h-control-sm rounded-md border border-border bg-surface-input px-2 text-sm text-text focus-visible:outline-none focus-visible:focus-ring"
           }
         )
@@ -824,88 +826,88 @@ const $t = () => /* @__PURE__ */ e(J, { icon: Ye, size: "md", color: "current" }
     fullWidth: a = !1,
     options: l,
     placeholder: c,
-    containerClassName: h,
+    containerClassName: x,
     labelClassName: b,
     className: y,
-    id: x,
-    searchable: u,
-    multiple: f,
+    id: f,
+    searchable: m,
+    multiple: h,
     value: p,
     onChange: k,
     allowCreate: v,
     onCreateOption: g,
-    ...$
-  }, D) => {
-    const _ = x || `select-${Math.random().toString(36).substr(2, 9)}`, M = !!n, [q, V] = le.useState(!1), [j, W] = le.useState(""), H = le.useRef(null), X = le.useRef(null), Z = we(q, X, { matchWidth: !0 }), [ee, C] = le.useState(l);
-    le.useImperativeHandle(D, () => H.current), le.useEffect(() => {
-      const S = (A) => {
-        H.current && !H.current.contains(A.target) && V(!1);
+    ...L
+  }, $) => {
+    const _ = f || `select-${Math.random().toString(36).substr(2, 9)}`, M = !!n, [U, V] = le.useState(!1), [j, W] = le.useState(""), H = le.useRef(null), X = le.useRef(null), Z = we(U, X, { matchWidth: !0 }), [ee, C] = le.useState(l);
+    le.useImperativeHandle($, () => H.current), le.useEffect(() => {
+      const S = (T) => {
+        H.current && !H.current.contains(T.target) && V(!1);
       };
       return document.addEventListener("mousedown", S), () => document.removeEventListener("mousedown", S);
     }, []);
     const d = le.useCallback(
-      (S, A) => S.some(
-        (I) => ge(I.value) === ge(A) || ge(I.label) === ge(A)
+      (S, T) => S.some(
+        (I) => ge(I.value) === ge(T) || ge(I.label) === ge(T)
       ),
       []
     ), E = le.useCallback(
-      (S, A) => {
-        const I = [...S], T = (U) => {
-          const P = (U ?? "").trim();
+      (S, T) => {
+        const I = [...S], D = (q) => {
+          const P = (q ?? "").trim();
           P && (d(I, P) || I.push({ value: P, label: P }));
         };
-        return Array.isArray(A) ? A.forEach(T) : T(A), I;
+        return Array.isArray(T) ? T.forEach(D) : D(T), I;
       },
       [d]
     );
     le.useEffect(() => {
       C((S) => {
-        const A = [...l];
+        const T = [...l];
         return S.forEach((I) => {
-          !d(A, I.value) && !d(A, I.label) && A.push(I);
-        }), E(A, p);
+          !d(T, I.value) && !d(T, I.label) && T.push(I);
+        }), E(T, p);
       });
     }, [l, p, E, d]);
     const N = (S) => {
-      if (f) {
-        const A = Array.isArray(p) ? p : [], I = A.includes(S) ? A.filter((T) => T !== S) : [...A, S];
+      if (h) {
+        const T = Array.isArray(p) ? p : [], I = T.includes(S) ? T.filter((D) => D !== S) : [...T, S];
         k?.(I);
       } else
         k?.(S), V(!1), W("");
-    }, L = f ? null : ee.find((S) => S.value === p), w = f ? ee.filter(
+    }, A = h ? null : ee.find((S) => S.value === p), w = h ? ee.filter(
       (S) => Array.isArray(p) && p.includes(S.value)
-    ) : [], Q = u && j ? ee.filter(
+    ) : [], Q = m && j ? ee.filter(
       (S) => S.label.toLowerCase().includes(j.toLowerCase())
-    ) : ee, te = !!v && !!u && !!j.trim() && !d(ee, j), ne = (S) => {
-      const A = S.trim();
-      if (!A) return;
-      const I = g?.(A) ?? {
-        value: A,
-        label: A
+    ) : ee, te = !!v && !!m && !!j.trim() && !d(ee, j), ne = (S) => {
+      const T = S.trim();
+      if (!T) return;
+      const I = g?.(T) ?? {
+        value: T,
+        label: T
       };
       if (d(ee, I.value) || d(ee, I.label)) {
-        N(I.value), W(""), f || V(!1);
+        N(I.value), W(""), h || V(!1);
         return;
       }
-      C((T) => [...T, I]), N(I.value), W(""), f || V(!1);
-    }, G = () => f ? w.length > 0 ? w.map((S) => S.label).join(", ") : c || "Select options" : L?.label || c || "Select an option";
+      C((D) => [...D, I]), N(I.value), W(""), h || V(!1);
+    }, G = () => h ? w.length > 0 ? w.map((S) => S.label).join(", ") : c || "Select options" : A?.label || c || "Select an option";
     return /* @__PURE__ */ i(
       "div",
       {
         ref: H,
-        className: m(
+        className: u(
           "relative flex flex-col",
           a && "w-full",
-          h
+          x
         ),
-        ...$,
+        ...L,
         children: [
           t && /* @__PURE__ */ e(
             "label",
             {
               htmlFor: _,
-              onClick: () => V(!q),
-              className: m(
+              onClick: () => V(!U),
+              className: u(
                 "block text-xs font-semibold uppercase tracking-label mb-1.5",
                 M ? "text-danger-fg" : "text-text-muted",
                 b
@@ -920,8 +922,8 @@ const $t = () => /* @__PURE__ */ e(J, { icon: Ye, size: "md", color: "current" }
                 ref: X,
                 type: "button",
                 id: _,
-                onClick: () => V(!q),
-                className: m(
+                onClick: () => V(!U),
+                className: u(
                   "flex w-full items-center justify-between gap-2 rounded-md border transition-colors duration-fast text-left",
                   "focus-visible:outline-none focus-visible:focus-ring",
                   "disabled:cursor-not-allowed disabled:bg-surface-hover disabled:text-text-disabled",
@@ -936,17 +938,17 @@ const $t = () => /* @__PURE__ */ e(J, { icon: Ye, size: "md", color: "current" }
                     Xe,
                     {
                       size: 16,
-                      className: m(
+                      className: u(
                         "shrink-0 opacity-60 transition-transform duration-fast",
-                        q && "rotate-180"
+                        U && "rotate-180"
                       )
                     }
                   )
                 ]
               }
             ),
-            q && /* @__PURE__ */ i("div", { style: Z, className: "fixed z-overlay flex flex-col overflow-hidden rounded-lg border border-border bg-surface shadow-overlay", children: [
-              u && /* @__PURE__ */ e("div", { className: "p-2", children: /* @__PURE__ */ e(
+            U && /* @__PURE__ */ i("div", { style: Z, className: "fixed z-overlay flex flex-col overflow-hidden rounded-lg border border-border bg-surface shadow-overlay", children: [
+              m && /* @__PURE__ */ e("div", { className: "p-2", children: /* @__PURE__ */ e(
                 "input",
                 {
                   type: "text",
@@ -956,7 +958,7 @@ const $t = () => /* @__PURE__ */ e(J, { icon: Ye, size: "md", color: "current" }
                   onKeyDown: (S) => {
                     S.key === "Enter" && te && (S.preventDefault(), ne(j));
                   },
-                  className: m(
+                  className: u(
                     "w-full px-3 py-2 text-sm rounded-md border",
                     "text-text border-border focus-visible:outline-none focus-visible:focus-ring"
                   )
@@ -965,7 +967,7 @@ const $t = () => /* @__PURE__ */ e(J, { icon: Ye, size: "md", color: "current" }
               te && /* @__PURE__ */ i(
                 "div",
                 {
-                  className: m(
+                  className: u(
                     "cursor-pointer px-3 py-1.5 text-sm",
                     "text-info-fg hover:bg-surface-hover"
                   ),
@@ -978,7 +980,7 @@ const $t = () => /* @__PURE__ */ e(J, { icon: Ye, size: "md", color: "current" }
                 }
               ),
               /* @__PURE__ */ i("ul", { className: "min-h-0 flex-1 overflow-auto py-1", children: [
-                c && !f && /* @__PURE__ */ e(
+                c && !h && /* @__PURE__ */ e(
                   "li",
                   {
                     className: "cursor-pointer px-3 py-1.5 text-sm text-text-muted hover:bg-surface-hover",
@@ -989,23 +991,23 @@ const $t = () => /* @__PURE__ */ e(J, { icon: Ye, size: "md", color: "current" }
                   }
                 ),
                 Q.map((S) => {
-                  const A = f ? Array.isArray(p) && p.includes(S.value) : p === S.value;
+                  const T = h ? Array.isArray(p) && p.includes(S.value) : p === S.value;
                   return /* @__PURE__ */ e(
                     "li",
                     {
                       onClick: () => !S.disabled && N(S.value),
-                      className: m(
+                      className: u(
                         "cursor-pointer px-3 py-1.5 text-sm",
                         "text-text",
                         S.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-surface-hover",
-                        A && "bg-accent-soft text-accent font-semibold"
+                        T && "bg-accent-soft text-accent font-semibold"
                       ),
                       children: /* @__PURE__ */ i("div", { className: "flex items-center", children: [
-                        f && /* @__PURE__ */ e(
+                        h && /* @__PURE__ */ e(
                           "input",
                           {
                             type: "checkbox",
-                            checked: A,
+                            checked: T,
                             readOnly: !0,
                             className: "mr-3 h-4 w-4 rounded border-border [&:not(:checked)]:bg-surface-input text-accent "
                           }
@@ -1022,7 +1024,7 @@ const $t = () => /* @__PURE__ */ e(J, { icon: Ye, size: "md", color: "current" }
           (n || r) && /* @__PURE__ */ e(
             "p",
             {
-              className: m(
+              className: u(
                 "mt-1 text-xs",
                 M ? "text-danger-fg" : "text-text-muted"
               ),
@@ -1049,20 +1051,20 @@ const Lt = {
     fullWidth: a = !1,
     startIcon: l,
     endIcon: c,
-    loading: h = !1,
+    loading: x = !1,
     containerClassName: b,
     labelClassName: y,
-    className: x,
-    id: u,
-    ...f
+    className: f,
+    id: m,
+    ...h
   }, p) => {
-    const k = le.useId(), v = u || `textfield-${k}`, g = !!n, $ = n || r ? `${v}-description` : void 0;
-    return /* @__PURE__ */ i("div", { className: m("flex flex-col", a && "w-full", b), children: [
+    const k = le.useId(), v = m || `textfield-${k}`, g = !!n, L = n || r ? `${v}-description` : void 0;
+    return /* @__PURE__ */ i("div", { className: u("flex flex-col", a && "w-full", b), children: [
       t && /* @__PURE__ */ e(
         "label",
         {
           htmlFor: v,
-          className: m(
+          className: u(
             Oe,
             g ? "text-danger-fg" : "text-text-subtle",
             y
@@ -1078,8 +1080,8 @@ const Lt = {
             ref: p,
             id: v,
             "aria-invalid": g || void 0,
-            "aria-describedby": $,
-            className: m(
+            "aria-describedby": L,
+            className: u(
               "block w-full rounded-md border bg-surface-input text-text",
               "transition-colors duration-fast ease-out",
               "placeholder:text-text-subtle",
@@ -1087,14 +1089,14 @@ const Lt = {
               "disabled:cursor-not-allowed disabled:bg-surface-hover disabled:text-text-disabled",
               Lt[s],
               l && "pl-9",
-              (c || h) && "pr-9",
+              (c || x) && "pr-9",
               g ? "border-danger-border bg-danger-soft" : "border-border hover:border-border-strong",
-              x
+              f
             ),
-            ...f
+            ...h
           }
         ),
-        (c || h) && /* @__PURE__ */ e("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 text-text-muted", children: h ? /* @__PURE__ */ e(
+        (c || x) && /* @__PURE__ */ e("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 text-text-muted", children: x ? /* @__PURE__ */ e(
           "span",
           {
             "aria-hidden": !0,
@@ -1105,8 +1107,8 @@ const Lt = {
       (n || r) && /* @__PURE__ */ e(
         "p",
         {
-          id: $,
-          className: m("mt-1 text-xs", g ? "text-danger-fg" : "text-text-subtle"),
+          id: L,
+          className: u("mt-1 text-xs", g ? "text-danger-fg" : "text-text-subtle"),
           children: n || r
         }
       )
@@ -1122,39 +1124,39 @@ function It({
   size: a = "md",
   placeholder: l,
   templatePlaceholder: c,
-  showTemplate: h = !0
+  showTemplate: x = !0
 }) {
   const [b, y] = R([]);
   Y(() => {
-    let u = !0;
-    return Promise.resolve(n?.()).then((f) => {
-      u && f && y(f.data ?? []);
+    let m = !0;
+    return Promise.resolve(n?.()).then((h) => {
+      m && h && y(h.data ?? []);
     }).catch(() => {
     }), () => {
-      u = !1;
+      m = !1;
     };
   }, []);
-  const x = t ?? {};
+  const f = t ?? {};
   return /* @__PURE__ */ i("div", { className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ e(
       pe,
       {
         size: a,
         fullWidth: !0,
-        value: x.folderId ?? "",
-        options: b.map((u) => ({ value: u.id, label: u.name })),
+        value: f.folderId ?? "",
+        options: b.map((m) => ({ value: m.id, label: m.name })),
         placeholder: l ?? "Select a folder",
-        onChange: (u) => r?.({ ...x, folderId: u })
+        onChange: (m) => r?.({ ...f, folderId: m })
       }
     ),
-    h && /* @__PURE__ */ e(
+    x && /* @__PURE__ */ e(
       he,
       {
         size: a,
         disabled: s ?? !1,
-        value: x.pathTemplate ?? "",
+        value: f.pathTemplate ?? "",
         placeholder: c ?? "Sub-path e.g. {yyyy}/{mm}/{dd} (optional)",
-        onChange: (u) => r?.({ ...x, pathTemplate: u.target.value })
+        onChange: (m) => r?.({ ...f, pathTemplate: m.target.value })
       }
     )
   ] });
@@ -1169,7 +1171,7 @@ const ue = (...t) => t.filter(Boolean).join(" "), jt = (t) => /* @__PURE__ */ e(
   md: "h-5 w-5",
   lg: "h-6 w-6",
   full: "h-6 w-6"
-}, Bt = de(
+}, Ft = de(
   ({
     label: t,
     helperText: r,
@@ -1178,41 +1180,41 @@ const ue = (...t) => t.filter(Boolean).join(" "), jt = (t) => /* @__PURE__ */ e(
     fullWidth: a = !1,
     startIcon: l = /* @__PURE__ */ e(jt, {}),
     loading: c = !1,
-    containerClassName: h,
+    containerClassName: x,
     labelClassName: b,
     className: y,
-    id: x,
-    options: u,
-    onRemoteSearch: f,
+    id: f,
+    options: m,
+    onRemoteSearch: h,
     onSelect: p,
     debounceTime: k = 500,
     showAllOnOpen: v = !1,
     value: g,
-    onChange: $,
-    ...D
+    onChange: L,
+    ...$
   }, _) => {
-    const M = x || `searchfield-${Math.random().toString(36).substr(2, 9)}`, q = !!n, V = ae(null), j = ae(null), [W, H] = R(g || ""), [X, Z] = R(!1), [ee, C] = R(!1), [d, E] = R(!1);
+    const M = f || `searchfield-${Math.random().toString(36).substr(2, 9)}`, U = !!n, V = ae(null), j = ae(null), [W, H] = R(g || ""), [X, Z] = R(!1), [ee, C] = R(!1), [d, E] = R(!1);
     Y(() => {
       g !== void 0 && H(g);
     }, [g]);
     const N = me(() => {
-      if (v && !d || !W) return u;
+      if (v && !d || !W) return m;
       const S = String(W).toLowerCase();
-      return u.filter(
-        (A) => String(A.label).toLowerCase().includes(S)
+      return m.filter(
+        (T) => String(T.label).toLowerCase().includes(S)
       );
-    }, [W, u, v, d]);
+    }, [W, m, v, d]);
     Y(() => {
-      if (!f || !W) {
+      if (!h || !W) {
         C(!1);
         return;
       }
       const S = setTimeout(async () => {
         C(!0);
         try {
-          await f(String(W));
-        } catch (A) {
-          console.error("Remote search failed:", A);
+          await h(String(W));
+        } catch (T) {
+          console.error("Remote search failed:", T);
         } finally {
           C(!1);
         }
@@ -1220,19 +1222,19 @@ const ue = (...t) => t.filter(Boolean).join(" "), jt = (t) => /* @__PURE__ */ e(
       return () => {
         clearTimeout(S), C(!1);
       };
-    }, [W, k, f]), Y(() => {
-      const S = (A) => {
-        V.current && !V.current.contains(A.target) && Z(!1);
+    }, [W, k, h]), Y(() => {
+      const S = (T) => {
+        V.current && !V.current.contains(T.target) && Z(!1);
       };
       return document.addEventListener("mousedown", S), () => document.removeEventListener("mousedown", S);
     }, []);
-    const L = (S) => {
-      const A = S.target.value;
-      H(A), Z(!0), E(!0), $ && $(S);
+    const A = (S) => {
+      const T = S.target.value;
+      H(T), Z(!0), E(!0), L && L(S);
     }, w = (S) => {
       H(S.label), Z(!1), E(!1), p && p(S.value);
     }, Q = () => {
-      (u.length > 0 || f) && (Z(!0), E(!1));
+      (m.length > 0 || h) && (Z(!0), E(!1));
     }, te = c || ee, ne = X && (N.length > 0 || te), G = me(() => _ || j, [_]);
     return /* @__PURE__ */ i(
       "div",
@@ -1240,7 +1242,7 @@ const ue = (...t) => t.filter(Boolean).join(" "), jt = (t) => /* @__PURE__ */ e(
         className: ue(
           "flex flex-col",
           a ? "w-full" : "",
-          h || "",
+          x || "",
           "relative"
         ),
         ref: V,
@@ -1251,7 +1253,7 @@ const ue = (...t) => t.filter(Boolean).join(" "), jt = (t) => /* @__PURE__ */ e(
               htmlFor: M,
               className: ue(
                 "block text-sm font-medium mb-1",
-                q ? "text-danger-fg" : "text-text",
+                U ? "text-danger-fg" : "text-text",
                 b || ""
               ),
               children: t
@@ -1265,7 +1267,7 @@ const ue = (...t) => t.filter(Boolean).join(" "), jt = (t) => /* @__PURE__ */ e(
                 ref: G,
                 id: M,
                 value: W,
-                onChange: L,
+                onChange: A,
                 onFocus: Q,
                 className: ue(
                   // Base styles
@@ -1279,10 +1281,10 @@ const ue = (...t) => t.filter(Boolean).join(" "), jt = (t) => /* @__PURE__ */ e(
                   "pr-10",
                   // Altijd padding rechts voor de dropdown/loading icon
                   // State styles
-                  q ? "border-danger-border text-danger-fg focus-visible:focus-ring" : "border-border text-text",
+                  U ? "border-danger-border text-danger-fg focus-visible:focus-ring" : "border-border text-text",
                   y || ""
                 ),
-                ...D
+                ...$
               }
             ),
             /* @__PURE__ */ e("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: te || c ? (
@@ -1334,12 +1336,12 @@ const ue = (...t) => t.filter(Boolean).join(" "), jt = (t) => /* @__PURE__ */ e(
             {
               className: ue(
                 "mt-1 text-xs",
-                q ? "text-danger-fg" : "text-text-muted"
+                U ? "text-danger-fg" : "text-text-muted"
               ),
               children: n || r
             }
           ),
-          f && /* @__PURE__ */ i("p", { className: "mt-2 text-xs text-success-fg", children: [
+          h && /* @__PURE__ */ i("p", { className: "mt-2 text-xs text-success-fg", children: [
             "Huidige zoekterm (niet-gedebounced): ",
             String(W)
           ] })
@@ -1348,14 +1350,14 @@ const ue = (...t) => t.filter(Boolean).join(" "), jt = (t) => /* @__PURE__ */ e(
     );
   }
 );
-Bt.displayName = "SearchableTextField";
-const Ft = de(
+Ft.displayName = "SearchableTextField";
+const Bt = de(
   ({ checked: t, onChange: r, label: n, disabled: s = !1, className: a, ...l }, c) => {
-    const h = /* @__PURE__ */ e(
+    const x = /* @__PURE__ */ e(
       "span",
       {
         "aria-hidden": !0,
-        className: m(
+        className: u(
           "relative inline-flex size-switch-track shrink-0 items-center rounded-full",
           "transition-colors duration-fast ease-out",
           t ? "bg-accent" : "bg-surface-hover",
@@ -1364,7 +1366,7 @@ const Ft = de(
         children: /* @__PURE__ */ e(
           "span",
           {
-            className: m(
+            className: u(
               "absolute left-0.5 size-switch-knob rounded-full bg-surface shadow-overlay",
               "transition-transform duration-fast ease-out",
               t && "translate-switch"
@@ -1376,7 +1378,7 @@ const Ft = de(
     return /* @__PURE__ */ i(
       "label",
       {
-        className: m(
+        className: u(
           "inline-flex items-center gap-2",
           s ? "cursor-not-allowed" : "cursor-pointer",
           a
@@ -1395,14 +1397,14 @@ const Ft = de(
               ...l
             }
           ),
-          /* @__PURE__ */ e("span", { className: "inline-flex rounded-full peer-focus-visible:focus-ring", children: h }),
+          /* @__PURE__ */ e("span", { className: "inline-flex rounded-full peer-focus-visible:focus-ring", children: x }),
           n && /* @__PURE__ */ e("span", { className: "text-sm text-text", children: n })
         ]
       }
     );
   }
 );
-Ft.displayName = "Switch";
+Bt.displayName = "Switch";
 function Rt({
   variant: t = "page",
   children: r,
@@ -1425,16 +1427,16 @@ function Rt({
         {
           className: "grid gap-2 bg-surface-hover p-3",
           style: { gridTemplateColumns: `repeat(${s}, minmax(0, 1fr))` },
-          children: Array.from({ length: s }).map((c, h) => /* @__PURE__ */ e(
+          children: Array.from({ length: s }).map((c, x) => /* @__PURE__ */ e(
             "div",
             {
               className: "h-4 w-2/3 rounded-sm bg-border-strong"
             },
-            `header-${h}`
+            `header-${x}`
           ))
         }
       ),
-      Array.from({ length: a }).map((c, h) => /* @__PURE__ */ e(
+      Array.from({ length: a }).map((c, x) => /* @__PURE__ */ e(
         "div",
         {
           className: "grid gap-2 border-t border-border-subtle p-3",
@@ -1444,10 +1446,10 @@ function Rt({
             {
               className: "h-4 w-full rounded-sm bg-surface-hover"
             },
-            `cell-${h}-${y}`
+            `cell-${x}-${y}`
           ))
         },
-        `row-${h}`
+        `row-${x}`
       ))
     ] })
   ] }) });
@@ -1460,41 +1462,41 @@ const Vt = ({
   placement: a = "bottom-start",
   disabled: l = !1,
   className: c,
-  showCheck: h = !0,
+  showCheck: x = !0,
   header: b
 }) => {
-  const [y, x] = R(!1), [u, f] = R(null), [p, k] = R({ top: 0, left: 0 }), v = ae(null), g = ae(null), $ = ae(null), D = ae(null), _ = we(y, g, { placement: a }), M = ae(null), q = () => Array.from(
-    D.current?.querySelectorAll("button[data-option-value]:not(:disabled)") ?? []
+  const [y, f] = R(!1), [m, h] = R(null), [p, k] = R({ top: 0, left: 0 }), v = ae(null), g = ae(null), L = ae(null), $ = ae(null), _ = we(y, g, { placement: a }), M = ae(null), U = () => Array.from(
+    $.current?.querySelectorAll("button[data-option-value]:not(:disabled)") ?? []
   );
   Y(() => {
-    y && q()[0]?.focus();
+    y && U()[0]?.focus();
   }, [y]);
   const V = (d) => {
     if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(d.key)) return;
-    const N = q();
+    const N = U();
     if (N.length === 0) return;
     d.preventDefault();
-    const L = N.indexOf(document.activeElement), w = d.key === "Home" ? 0 : d.key === "End" ? N.length - 1 : d.key === "ArrowDown" ? (L + 1) % N.length : (L - 1 + N.length) % N.length;
+    const A = N.indexOf(document.activeElement), w = d.key === "Home" ? 0 : d.key === "End" ? N.length - 1 : d.key === "ArrowDown" ? (A + 1) % N.length : (A - 1 + N.length) % N.length;
     N[w]?.focus();
   };
   Y(() => {
     const d = (E) => {
-      v.current && (!v.current.contains(E.target) || $.current && !$.current.contains(E.target)) && (x(!1), f(null), M.current && (clearTimeout(M.current), M.current = null));
+      v.current && (!v.current.contains(E.target) || L.current && !L.current.contains(E.target)) && (f(!1), h(null), M.current && (clearTimeout(M.current), M.current = null));
     };
     return y && document.addEventListener("mousedown", d), () => {
       document.removeEventListener("mousedown", d);
     };
   }, [y]), Y(() => {
     const d = (E) => {
-      E.key === "Escape" && (x(!1), f(null), g.current?.focus(), M.current && (clearTimeout(M.current), M.current = null));
+      E.key === "Escape" && (f(!1), h(null), g.current?.focus(), M.current && (clearTimeout(M.current), M.current = null));
     };
     return y && document.addEventListener("keydown", d), () => {
       document.removeEventListener("keydown", d);
     };
   }, [y]), Y(() => {
-    if (u && v.current) {
+    if (m && v.current) {
       const d = v.current.querySelector(
-        `[data-option-value="${u}"]`
+        `[data-option-value="${m}"]`
       );
       if (d) {
         const E = d.getBoundingClientRect();
@@ -1504,25 +1506,25 @@ const Vt = ({
         });
       }
     }
-  }, [u]), Y(() => () => {
+  }, [m]), Y(() => () => {
     M.current && clearTimeout(M.current);
   }, []);
   const j = (d) => {
-    d.stopPropagation(), !l && (x(!y), f(null), M.current && (clearTimeout(M.current), M.current = null));
+    d.stopPropagation(), !l && (f(!y), h(null), M.current && (clearTimeout(M.current), M.current = null));
   }, W = (d, E, N) => {
-    d.stopPropagation(), !E.disabled && !E.divider && (!E.children || E.children.length === 0) && (s?.(E.value, N), x(!1), f(null));
+    d.stopPropagation(), !E.disabled && !E.divider && (!E.children || E.children.length === 0) && (s?.(E.value, N), f(!1), h(null));
   }, H = (d) => {
-    M.current && (clearTimeout(M.current), M.current = null), d.children && d.children.length > 0 ? f(d.value) : f(null);
+    M.current && (clearTimeout(M.current), M.current = null), d.children && d.children.length > 0 ? h(d.value) : h(null);
   }, X = (d) => {
     d.children && d.children.length > 0 ? M.current = setTimeout(() => {
-      f(null);
-    }, 150) : f(null);
+      h(null);
+    }, 150) : h(null);
   }, Z = (d, E, N) => {
-    d.stopPropagation(), !E.disabled && !E.divider && (s?.(E.value, N), x(!1), f(null));
-  }, ee = m(
+    d.stopPropagation(), !E.disabled && !E.divider && (s?.(E.value, N), f(!1), h(null));
+  }, ee = u(
     "fixed z-overlay min-w-menu bg-surface rounded-lg shadow-overlay border border-border",
     "max-h-60 overflow-auto"
-  ), C = m(
+  ), C = u(
     "fixed z-overlay min-w-menu bg-surface rounded-lg shadow-overlay border border-border",
     "max-h-60 overflow-auto"
   );
@@ -1530,7 +1532,7 @@ const Vt = ({
     "div",
     {
       ref: v,
-      className: m(
+      className: u(
         "relative flex flex-row items-center justify-center rounded-lg hover:bg-surface-hover",
         c
       ),
@@ -1543,13 +1545,13 @@ const Vt = ({
             disabled: l,
             "aria-haspopup": "menu",
             "aria-expanded": y,
-            className: m("inline-flex items-center justify-center", {
+            className: u("inline-flex items-center justify-center", {
               "opacity-50 cursor-not-allowed": l
             }),
             children: t
           }
         ),
-        y && /* @__PURE__ */ e("div", { ref: D, className: ee, style: _, onKeyDown: V, children: /* @__PURE__ */ i("div", { className: "p-2", role: "menu", children: [
+        y && /* @__PURE__ */ e("div", { ref: $, className: ee, style: _, onKeyDown: V, children: /* @__PURE__ */ i("div", { className: "p-2", role: "menu", children: [
           b && (typeof b == "string" ? /* @__PURE__ */ e("div", { className: "text-xs font-medium text-text-muted uppercase tracking-label px-3 py-2", children: b }) : b),
           r.map((d, E) => {
             if (d.divider)
@@ -1560,7 +1562,7 @@ const Vt = ({
                 },
                 `divider-${E}`
               );
-            const N = d.children && d.children.length > 0, L = u === d.value;
+            const N = d.children && d.children.length > 0, A = m === d.value;
             return /* @__PURE__ */ i("div", { className: "relative group", children: [
               /* @__PURE__ */ i(
                 "button",
@@ -1572,11 +1574,11 @@ const Vt = ({
                   onMouseEnter: () => H(d),
                   onMouseLeave: () => X(d),
                   disabled: d.disabled,
-                  className: m(
+                  className: u(
                     "flex w-full items-center justify-between rounded-md px-3 py-1.5 text-sm text-text transition-colors duration-fast ease-out hover:bg-surface-hover focus-visible:outline-none focus-visible:focus-ring",
                     {
                       "opacity-50 cursor-not-allowed": d.disabled,
-                      "bg-surface-hover": L && N
+                      "bg-surface-hover": A && N
                     }
                   ),
                   children: [
@@ -1588,27 +1590,27 @@ const Vt = ({
                       ] })
                     ] }),
                     /* @__PURE__ */ i("div", { className: "flex items-center space-x-2", children: [
-                      h && n === d.value && /* @__PURE__ */ e(Me, { className: "size-icon-md shrink-0 text-success-fg", "aria-hidden": !0 }),
+                      x && n === d.value && /* @__PURE__ */ e(Me, { className: "size-icon-md shrink-0 text-success-fg", "aria-hidden": !0 }),
                       N && /* @__PURE__ */ e("span", { className: "text-text-muted text-xs", children: "▶" })
                     ] })
                   ]
                 }
               ),
-              N && L && /* @__PURE__ */ e(
+              N && A && /* @__PURE__ */ e(
                 "div",
                 {
-                  ref: $,
+                  ref: L,
                   className: C,
                   style: {
                     top: `${p.top}px`,
                     left: `${p.left}px`
                   },
                   onMouseEnter: () => {
-                    M.current && (clearTimeout(M.current), M.current = null), f(d.value);
+                    M.current && (clearTimeout(M.current), M.current = null), h(d.value);
                   },
                   onMouseLeave: () => {
                     M.current = setTimeout(() => {
-                      f(null);
+                      h(null);
                     }, 150);
                   },
                   children: /* @__PURE__ */ e("div", { className: "p-2", children: d.children.map((w, Q) => {
@@ -1632,7 +1634,7 @@ const Vt = ({
                           d.value
                         ),
                         disabled: w.disabled,
-                        className: m(
+                        className: u(
                           "flex w-full items-center justify-between rounded-md px-3 py-1.5 text-sm text-text transition-colors duration-fast ease-out hover:bg-surface-hover",
                           {
                             "opacity-50 cursor-not-allowed": w.disabled
@@ -1646,7 +1648,7 @@ const Vt = ({
                               w.description && /* @__PURE__ */ e("span", { className: "text-xs text-text-muted", children: w.description })
                             ] })
                           ] }),
-                          h && te && /* @__PURE__ */ e(Me, { className: "size-icon-md shrink-0 text-success-fg", "aria-hidden": !0 })
+                          x && te && /* @__PURE__ */ e(Me, { className: "size-icon-md shrink-0 text-success-fg", "aria-hidden": !0 })
                         ]
                       },
                       w.value
@@ -1659,8 +1661,8 @@ const Vt = ({
           (() => {
             const d = r.reduce((E, N) => {
               if (N.divider) return E;
-              const L = N.children ? N.children.filter((w) => !w.divider).length : 0;
-              return E + 1 + L;
+              const A = N.children ? N.children.filter((w) => !w.divider).length : 0;
+              return E + 1 + A;
             }, 0);
             return d > 1 && /* @__PURE__ */ e("div", { className: "border-t border-border mt-2 pt-2", children: /* @__PURE__ */ i("div", { className: "text-xs text-text-muted px-3 py-1", children: [
               d,
@@ -1671,7 +1673,7 @@ const Vt = ({
       ]
     }
   );
-}, Ht = () => /* @__PURE__ */ e(J, { icon: Ne, size: "md", color: "current" }), qt = ({ active: t }) => /* @__PURE__ */ e(J, { icon: Qe, size: "sm", className: t ? "text-text" : "text-text-subtle" }), Ut = ({ active: t }) => /* @__PURE__ */ e(J, { icon: be, size: "sm", className: t ? "text-text" : "text-text-subtle" }), Wt = () => /* @__PURE__ */ e(J, { icon: je, size: "md", color: "current" }), Kt = () => /* @__PURE__ */ e(J, { icon: ye, size: "md", color: "current" }), _t = () => /* @__PURE__ */ e(J, { icon: et, size: "md", color: "current" }), Gt = () => /* @__PURE__ */ e(J, { icon: tt, size: "md", color: "current" }), Be = () => /* @__PURE__ */ e(J, { icon: be, size: "md", color: "current" }), Jt = (t) => {
+}, Ht = () => /* @__PURE__ */ e(J, { icon: Ne, size: "md", color: "current" }), Ut = ({ active: t }) => /* @__PURE__ */ e(J, { icon: Qe, size: "sm", className: t ? "text-text" : "text-text-subtle" }), qt = ({ active: t }) => /* @__PURE__ */ e(J, { icon: be, size: "sm", className: t ? "text-text" : "text-text-subtle" }), Wt = () => /* @__PURE__ */ e(J, { icon: je, size: "md", color: "current" }), Kt = () => /* @__PURE__ */ e(J, { icon: ye, size: "md", color: "current" }), _t = () => /* @__PURE__ */ e(J, { icon: et, size: "md", color: "current" }), Gt = () => /* @__PURE__ */ e(J, { icon: tt, size: "md", color: "current" }), Fe = () => /* @__PURE__ */ e(J, { icon: be, size: "md", color: "current" }), Jt = (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);
   };
@@ -1690,7 +1692,7 @@ const Vt = ({
       /* @__PURE__ */ e("span", { className: "text-text", children: t.multiSelect && Array.isArray(t.value) ? t.value?.map(
         (s) => t.options?.find((a) => a.value === s)?.label
       ).join(", ") : t.options?.find((s) => s.value === t.value)?.label }),
-      /* @__PURE__ */ e("span", { className: "text-text-muted text-sm group-open:rotate-180 transition-transform", children: /* @__PURE__ */ e(Be, {}) })
+      /* @__PURE__ */ e("span", { className: "text-text-muted text-sm group-open:rotate-180 transition-transform", children: /* @__PURE__ */ e(Fe, {}) })
     ] }),
     /* @__PURE__ */ i("div", { className: "absolute z-10 left-0 mt-1 bg-surface border border-border rounded-lg shadow-overlay p-2 w-48", children: [
       t.options?.map((s) => /* @__PURE__ */ e(
@@ -1701,7 +1703,7 @@ const Vt = ({
           children: /* @__PURE__ */ e(
             "span",
             {
-              className: m(r(s.value) && "text-accent"),
+              className: u(r(s.value) && "text-accent"),
               children: s.label
             }
           )
@@ -1726,22 +1728,22 @@ const Vt = ({
   searchPlaceholder: a = "Search...",
   filters: l = [],
   paginated: c = !1,
-  pageSizeOptions: h = [10, 25, 50, 100],
+  pageSizeOptions: x = [10, 25, 50, 100],
   defaultPageSize: b = 10,
   actions: y = [],
-  onRowClick: x,
-  selectable: u = !1,
-  selectedRows: f = [],
+  onRowClick: f,
+  selectable: m = !1,
+  selectedRows: h = [],
   onSelectionChange: p,
-  getRowKey: k = (q, V) => V,
+  getRowKey: k = (U, V) => V,
   emptyContent: v,
   hoverable: g = !0,
-  bordered: $ = !1,
-  striped: D = !1,
+  bordered: L = !1,
+  striped: $ = !1,
   className: _,
   rowClassName: M
 }) => {
-  const [q, V] = R(""), [j, W] = R({
+  const [U, V] = R(""), [j, W] = R({
     column: null,
     direction: null
   }), [H, X] = R({
@@ -1749,30 +1751,30 @@ const Vt = ({
     pageSize: b
   }), Z = ae(null), ee = me(() => {
     let o = t;
-    if (s && q.trim()) {
+    if (s && U.trim()) {
       const z = r.filter(
-        (F) => F.searchable !== !1
-      ), B = q.toLowerCase();
-      o = o.filter((F) => z.some((O) => {
-        const se = typeof O.accessor == "function" ? O.accessor(F) : F[O.accessor];
-        return String(se || "").toLowerCase().includes(B);
+        (B) => B.searchable !== !1
+      ), F = U.toLowerCase();
+      o = o.filter((B) => z.some((O) => {
+        const se = typeof O.accessor == "function" ? O.accessor(B) : B[O.accessor];
+        return String(se || "").toLowerCase().includes(F);
       }));
     }
     return l.forEach((z) => {
-      z.value && z.value !== "all" && (o = o.filter((B) => {
-        const F = r.find((se) => se.id === z.id);
-        if (!F) return !0;
-        const O = typeof F.accessor == "function" ? F.accessor(B) : B[F.accessor];
+      z.value && z.value !== "all" && (o = o.filter((F) => {
+        const B = r.find((se) => se.id === z.id);
+        if (!B) return !0;
+        const O = typeof B.accessor == "function" ? B.accessor(F) : F[B.accessor];
         return String(O || "") === z.value;
       }));
     }), o;
-  }, [t, q, r, s, l]), C = me(() => {
+  }, [t, U, r, s, l]), C = me(() => {
     if (!j.column || !j.direction) return ee;
     const o = r.find((z) => z.id === j.column);
-    return o ? [...ee].sort((z, B) => {
-      const F = typeof o.accessor == "function" ? o.accessor(z) : z[o.accessor], O = typeof o.accessor == "function" ? o.accessor(B) : B[o.accessor];
+    return o ? [...ee].sort((z, F) => {
+      const B = typeof o.accessor == "function" ? o.accessor(z) : z[o.accessor], O = typeof o.accessor == "function" ? o.accessor(F) : F[o.accessor];
       let se = 0;
-      return F < O ? se = -1 : F > O && (se = 1), j.direction === "desc" ? -se : se;
+      return B < O ? se = -1 : B > O && (se = 1), j.direction === "desc" ? -se : se;
     }) : ee;
   }, [ee, j, r]), d = me(() => {
     if (!c) return C;
@@ -1780,22 +1782,22 @@ const Vt = ({
     return C.slice(o, z);
   }, [C, H, c]), E = ce(
     (o) => {
-      r.find((B) => B.id === o)?.sortable && W((B) => B.column !== o ? { column: o, direction: "asc" } : B.direction === "asc" ? { column: o, direction: "desc" } : { column: null, direction: null });
+      r.find((F) => F.id === o)?.sortable && W((F) => F.column !== o ? { column: o, direction: "asc" } : F.direction === "asc" ? { column: o, direction: "desc" } : { column: null, direction: null });
     },
     [r]
   ), N = ce((o) => {
     X((z) => ({ ...z, page: o }));
-  }, []), L = ce((o) => {
+  }, []), A = ce((o) => {
     X({ page: 0, pageSize: o });
   }, []), w = ce(
     (o, z) => {
       if (!p) return;
-      const B = k(o, 0);
-      f.map((F, O) => k(F, O)), p(z ? [...f, o] : f.filter(
-        (F, O) => k(f[O], O) !== B
+      const F = k(o, 0);
+      h.map((B, O) => k(B, O)), p(z ? [...h, o] : h.filter(
+        (B, O) => k(h[O], O) !== F
       ));
     },
-    [f, p, k]
+    [h, p, k]
   ), Q = ce(
     (o) => {
       p && p(o ? [...d] : []);
@@ -1804,27 +1806,27 @@ const Vt = ({
   );
   Y(() => {
     X((o) => ({ ...o, page: 0 }));
-  }, [q, j]), Y(() => {
+  }, [U, j]), Y(() => {
     X((o) => ({ ...o, page: 0 }));
   }, [l.map((o) => o.value).join(",")]);
-  const te = C.length, ne = Math.ceil(te / H.pageSize), G = H.page * H.pageSize + 1, S = Math.min(G + H.pageSize - 1, te), A = d.length > 0 && d.every((o) => {
+  const te = C.length, ne = Math.ceil(te / H.pageSize), G = H.page * H.pageSize + 1, S = Math.min(G + H.pageSize - 1, te), T = d.length > 0 && d.every((o) => {
     const z = k(o, 0);
-    return f.some(
-      (B, F) => k(B, F) === z
+    return h.some(
+      (F, B) => k(F, B) === z
     );
   }), I = d.some((o) => {
     const z = k(o, 0);
-    return f.some(
-      (B, F) => k(B, F) === z
+    return h.some(
+      (F, B) => k(F, B) === z
     );
-  }), T = m(
+  }), D = u(
     "w-full text-sm leading-5 text-text border-collapse",
     _
-  ), U = m("bg-surface"), P = m(
+  ), q = u("bg-surface"), P = u(
     "text-text p-3 border-b border-border"
-  ), K = m("h-row-lg", {
+  ), K = u("h-row-lg", {
     "hover:bg-surface-sunk": g,
-    "cursor-pointer": x
+    "cursor-pointer": f
   });
   return /* @__PURE__ */ i("div", { className: "space-y-4", children: [
     (s || l.length > 0) && /* @__PURE__ */ e("div", { className: "pt-4 pb-2", children: /* @__PURE__ */ i("div", { className: "flex flex-wrap gap-4 items-start", children: [
@@ -1833,7 +1835,7 @@ const Vt = ({
         he,
         {
           placeholder: a,
-          value: q,
+          value: U,
           onChange: (o) => V(o.target.value),
           startIcon: /* @__PURE__ */ e(Ht, {}),
           className: "max-w-sm"
@@ -1849,15 +1851,15 @@ const Vt = ({
           tableColumns: r.length
         }
       ) }),
-      /* @__PURE__ */ i("table", { ref: Z, className: m(T, "min-w-full"), children: [
-        /* @__PURE__ */ e("thead", { className: U, children: /* @__PURE__ */ i("tr", { children: [
-          u && /* @__PURE__ */ e("th", { className: m(P, "w-12"), children: /* @__PURE__ */ e(
+      /* @__PURE__ */ i("table", { ref: Z, className: u(D, "min-w-full"), children: [
+        /* @__PURE__ */ e("thead", { className: q, children: /* @__PURE__ */ i("tr", { children: [
+          m && /* @__PURE__ */ e("th", { className: u(P, "w-12"), children: /* @__PURE__ */ e(
             "input",
             {
               type: "checkbox",
-              checked: A,
+              checked: T,
               ref: (o) => {
-                o && (o.indeterminate = I && !A);
+                o && (o.indeterminate = I && !T);
               },
               onChange: (o) => Q(o.target.checked),
               className: "rounded border-border [&:not(:checked)]:bg-surface-input text-accent"
@@ -1866,7 +1868,7 @@ const Vt = ({
           !n && r.map((o) => /* @__PURE__ */ e(
             "th",
             {
-              className: m(
+              className: u(
                 P,
                 "font-semibold text-xs text-text-muted uppercase tracking-label",
                 "group",
@@ -1886,19 +1888,19 @@ const Vt = ({
                 o.sortable && /* @__PURE__ */ i(
                   "div",
                   {
-                    className: m(
+                    className: u(
                       "flex flex-col opacity-0 group-hover:opacity-100 transition-opacity",
                       j.column === o.id && "opacity-100"
                     ),
                     children: [
                       /* @__PURE__ */ e(
-                        qt,
+                        Ut,
                         {
                           active: j.column === o.id && j.direction === "asc"
                         }
                       ),
                       /* @__PURE__ */ e(
-                        Ut,
+                        qt,
                         {
                           active: j.column === o.id && j.direction === "desc"
                         }
@@ -1910,39 +1912,39 @@ const Vt = ({
             },
             o.id
           )),
-          y.length > 0 && /* @__PURE__ */ e("th", { className: m(P, "w-20"), children: /* @__PURE__ */ e("span", { className: "sr-only", children: "Actions" }) })
+          y.length > 0 && /* @__PURE__ */ e("th", { className: u(P, "w-20"), children: /* @__PURE__ */ e("span", { className: "sr-only", children: "Actions" }) })
         ] }) }),
         /* @__PURE__ */ e("tbody", { children: d.length === 0 || n ? !n && /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e(
           "td",
           {
-            colSpan: r.length + (u ? 1 : 0) + (y.length > 0 ? 1 : 0),
-            className: m(
+            colSpan: r.length + (m ? 1 : 0) + (y.length > 0 ? 1 : 0),
+            className: u(
               P,
               "text-center py-8 text-text-muted"
             ),
             children: v || "No data available"
           }
         ) }) : d.map((o, z) => {
-          const B = k(o, z), F = f.some(
-            (O, se) => k(O, se) === B
+          const F = k(o, z), B = h.some(
+            (O, se) => k(O, se) === F
           );
           return /* @__PURE__ */ i(
             "tr",
             {
-              className: m(
+              className: u(
                 K,
-                { "bg-accent-soft": F },
+                { "bg-accent-soft": B },
                 M?.(o, z)
               ),
               onClick: (O) => {
-                O.stopPropagation(), x?.(o, z);
+                O.stopPropagation(), f?.(o, z);
               },
               children: [
-                u && /* @__PURE__ */ e("td", { className: P, children: /* @__PURE__ */ e(
+                m && /* @__PURE__ */ e("td", { className: P, children: /* @__PURE__ */ e(
                   "input",
                   {
                     type: "checkbox",
-                    checked: F,
+                    checked: B,
                     onChange: (O) => {
                       O.stopPropagation(), w(o, O.target.checked);
                     },
@@ -1954,7 +1956,7 @@ const Vt = ({
                   return /* @__PURE__ */ e(
                     "td",
                     {
-                      className: m(P, {
+                      className: u(P, {
                         "text-left": O.align === "left" || !O.align,
                         "text-center": O.align === "center",
                         "text-right": O.align === "right",
@@ -1971,7 +1973,7 @@ const Vt = ({
                   {
                     trigger: /* @__PURE__ */ i("div", { className: "inline-flex items-center gap-1 px-2 py-1 text-sm text-text-muted hover:text-text", children: [
                       /* @__PURE__ */ e("span", { children: "Options" }),
-                      /* @__PURE__ */ e(Be, {})
+                      /* @__PURE__ */ e(Fe, {})
                     ] }),
                     options: y.map((O) => ({
                       value: O.id,
@@ -1990,7 +1992,7 @@ const Vt = ({
                 ) })
               ]
             },
-            B
+            F
           );
         }) })
       ] })
@@ -2012,9 +2014,9 @@ const Vt = ({
             "select",
             {
               value: H.pageSize,
-              onChange: (o) => L(Number(o.target.value)),
+              onChange: (o) => A(Number(o.target.value)),
               className: "h-control-sm w-16 rounded-md border border-border bg-surface-input px-2 text-sm text-text",
-              children: h.map((o) => /* @__PURE__ */ e("option", { value: o, children: o }, o))
+              children: x.map((o) => /* @__PURE__ */ e("option", { value: o, children: o }, o))
             }
           )
         ] })
@@ -2079,15 +2081,15 @@ const Vt = ({
   onTabChange: n,
   className: s
 }) => {
-  const [a, l] = R(t[0]?.id || ""), c = r || a, h = (b) => {
+  const [a, l] = R(t[0]?.id || ""), c = r || a, x = (b) => {
     n ? n(b) : l(b);
   };
-  return /* @__PURE__ */ e("div", { className: m("border-b border-border", s), children: /* @__PURE__ */ e("nav", { className: "-mb-px flex space-x-8", children: t.map((b) => /* @__PURE__ */ e(
+  return /* @__PURE__ */ e("div", { className: u("border-b border-border", s), children: /* @__PURE__ */ e("nav", { className: "-mb-px flex space-x-8", children: t.map((b) => /* @__PURE__ */ e(
     "button",
     {
-      onClick: () => !b.disabled && h(b.id),
+      onClick: () => !b.disabled && x(b.id),
       disabled: b.disabled,
-      className: m(
+      className: u(
         "border-b-2 py-2 px-1 text-sm font-medium transition-colors duration-fast",
         {
           "border-accent-border text-text": c === b.id,
@@ -2097,7 +2099,7 @@ const Vt = ({
       ),
       children: /* @__PURE__ */ i("span", { className: "flex items-center gap-2", children: [
         b.label,
-        b.badge && /* @__PURE__ */ e("span", { className: m(
+        b.badge && /* @__PURE__ */ e("span", { className: u(
           "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium",
           c === b.id ? "bg-accent-soft text-accent" : "bg-surface-hover text-text-muted"
         ), children: b.badge })
@@ -2114,14 +2116,14 @@ const Vt = ({
   size: l = "md",
   className: c
 }) => {
-  const [h, b] = R(
+  const [x, b] = R(
     r || n || t[0]?.id || ""
-  ), y = n || h, x = (v) => {
+  ), y = n || x, f = (v) => {
     s ? s(v) : b(v);
-  }, u = {
+  }, m = {
     activeTab: y,
-    setActiveTab: x
-  }, f = t.find((v) => v.id === y), p = m(
+    setActiveTab: f
+  }, h = t.find((v) => v.id === y), p = u(
     "flex",
     {
       "border-b border-border px-2": a === "default" || a === "underline",
@@ -2131,7 +2133,7 @@ const Vt = ({
     },
     c
   ), k = (v, g) => {
-    const $ = "transition-colors duration-fast font-medium", D = {
+    const L = "transition-colors duration-fast font-medium", $ = {
       "text-xs px-2 py-1": l === "sm",
       "text-sm px-3 py-2": l === "md",
       "text-base px-4 py-3": l === "lg"
@@ -2145,7 +2147,7 @@ const Vt = ({
     }, M = {
       "opacity-50 cursor-not-allowed": v.disabled,
       "cursor-pointer": !v.disabled
-    }, q = g ? {
+    }, U = g ? {
       "border-accent-border text-text": a === "default" || a === "underline",
       "bg-surface text-text shadow-none": a === "pills"
     } : {}, V = !g && !v.disabled ? {
@@ -2153,9 +2155,9 @@ const Vt = ({
       "text-text-muted hover:text-text": a === "pills",
       "border-transparent text-text-muted hover:text-text hover:border-border": a === "underline"
     } : {};
-    return m($, D, _, M, q, V);
+    return u(L, $, _, M, U, V);
   };
-  return /* @__PURE__ */ e(Yt.Provider, { value: u, children: /* @__PURE__ */ i("div", { children: [
+  return /* @__PURE__ */ e(Yt.Provider, { value: m, children: /* @__PURE__ */ i("div", { children: [
     /* @__PURE__ */ e("div", { className: p, role: "tablist", children: t.map((v) => /* @__PURE__ */ e(
       "button",
       {
@@ -2164,7 +2166,7 @@ const Vt = ({
         "aria-selected": y === v.id,
         "aria-controls": `tabpanel-${v.id}`,
         disabled: v.disabled,
-        onClick: () => !v.disabled && x(v.id),
+        onClick: () => !v.disabled && f(v.id),
         className: k(v, y === v.id),
         children: /* @__PURE__ */ i("span", { className: "flex items-center gap-2", children: [
           v.label,
@@ -2173,14 +2175,14 @@ const Vt = ({
       },
       v.id
     )) }),
-    f?.content && /* @__PURE__ */ e(
+    h?.content && /* @__PURE__ */ e(
       "div",
       {
         role: "tabpanel",
         id: `tabpanel-${y}`,
         "aria-labelledby": `tab-${y}`,
         className: "mt-4",
-        children: f.content
+        children: h.content
       }
     )
   ] }) });
@@ -2191,7 +2193,7 @@ const Vt = ({
   xl: "max-w-4xl",
   full: "max-w-full mx-4"
 };
-function Fe({
+function Be({
   open: t,
   onClose: r,
   title: n,
@@ -2199,19 +2201,19 @@ function Fe({
   closeOnBackdropClick: a = !0,
   closeOnEscape: l = !0,
   className: c,
-  backdropClassName: h,
+  backdropClassName: x,
   children: b,
   footer: y,
-  showCloseButton: x = !0
+  showCloseButton: f = !0
 }) {
-  const u = ae(null), f = ae(null);
+  const m = ae(null), h = ae(null);
   Y(() => {
     if (!t || !l) return;
     const k = (v) => {
       v.key === "Escape" && r();
     };
     return document.addEventListener("keydown", k), () => document.removeEventListener("keydown", k);
-  }, [t, l, r]), Y(() => (t ? (f.current = document.activeElement, u.current && u.current.focus(), document.body.style.overflow = "hidden") : (f.current && f.current.focus(), document.body.style.overflow = ""), () => {
+  }, [t, l, r]), Y(() => (t ? (h.current = document.activeElement, m.current && m.current.focus(), document.body.style.overflow = "hidden") : (h.current && h.current.focus(), document.body.style.overflow = ""), () => {
     document.body.style.overflow = "";
   }), [t]);
   const p = (k) => {
@@ -2220,18 +2222,18 @@ function Fe({
   return t ? /* @__PURE__ */ e(
     "div",
     {
-      className: m(
+      className: u(
         "fixed inset-0 z-modal flex items-center justify-center p-4",
         "bg-scrim",
         // 'animate-fade-in',
-        h
+        x
       ),
       onClick: p,
       children: /* @__PURE__ */ i(
         "div",
         {
-          ref: u,
-          className: m(
+          ref: m,
+          className: u(
             "relative w-full bg-surface rounded-lg shadow-modal",
             // 'animate-scale-in',
             "focus:outline-none",
@@ -2243,7 +2245,7 @@ function Fe({
           "aria-labelledby": n ? "modal-title" : void 0,
           tabIndex: -1,
           children: [
-            (n || x) && /* @__PURE__ */ i("div", { className: "flex items-center justify-between p-6 pb-0", children: [
+            (n || f) && /* @__PURE__ */ i("div", { className: "flex items-center justify-between p-6 pb-0", children: [
               n && /* @__PURE__ */ e(
                 "span",
                 {
@@ -2252,7 +2254,7 @@ function Fe({
                   children: n
                 }
               ),
-              x && /* @__PURE__ */ e(
+              f && /* @__PURE__ */ e(
                 "button",
                 {
                   onClick: r,
@@ -2310,14 +2312,14 @@ const Qt = {
   align: a = "left",
   truncate: l = !1,
   italic: c = !1,
-  underline: h = !1,
+  underline: x = !1,
   lineHeight: b = "normal",
   as: y,
-  className: x,
-  children: u,
-  ...f
+  className: f,
+  children: m,
+  ...h
 }) => {
-  const p = y || sr(t), k = t === "caption", v = t === "label", g = t === "code", $ = m(
+  const p = y || sr(t), k = t === "caption", v = t === "label", g = t === "code", L = u(
     "font-sans",
     // Variant — caption and label pin their own size/weight
     k && "text-xs text-text-subtle",
@@ -2332,11 +2334,11 @@ const Qt = {
     // Line height only overrides the body variant
     t === "body" && nr[b],
     c && "italic",
-    h && "underline",
+    x && "underline",
     l && "truncate",
-    x
+    f
   );
-  return /* @__PURE__ */ e(p, { className: $, ...f, children: u });
+  return /* @__PURE__ */ e(p, { className: L, ...h, children: m });
 };
 function sr(t) {
   return {
@@ -2354,21 +2356,21 @@ const ar = ({
   error: a,
   disabled: l,
   accept: c,
-  onListFiles: h,
+  onListFiles: x,
   onListMounts: b,
   onUploadFile: y,
-  onDownloadFile: x,
-  onRegisterFile: u
+  onDownloadFile: f,
+  onRegisterFile: m
 }) => {
-  const [f, p] = R(!1), [k, v] = R([]), [g, $] = R(null), [D, _] = R("/"), [M, q] = R([]), [V, j] = R(!1), [W, H] = R(""), [X, Z] = R(
+  const [h, p] = R(!1), [k, v] = R([]), [g, L] = R(null), [$, _] = R("/"), [M, U] = R([]), [V, j] = R(!1), [W, H] = R(""), [X, Z] = R(
     typeof t == "object" ? t : null
   ), [ee, C] = R(!1), [d, E] = R(""), N = ae(null);
   Y(() => {
-    f && L();
-  }, [f]), Y(() => {
-    f && g && w();
-  }, [f, g, D, W]);
-  const L = async () => {
+    h && A();
+  }, [h]), Y(() => {
+    h && g && w();
+  }, [h, g, $, W]);
+  const A = async () => {
     j(!0);
     try {
       const o = await b?.();
@@ -2382,8 +2384,8 @@ const ar = ({
     if (g) {
       j(!0);
       try {
-        const o = await h?.({ mountId: g.id, name: W, path: D });
-        o?.data && q(o.data);
+        const o = await x?.({ mountId: g.id, name: W, path: $ });
+        o?.data && U(o.data);
       } catch (o) {
         console.error("Failed to load files", o);
       } finally {
@@ -2395,7 +2397,7 @@ const ar = ({
     if (z) {
       j(!0);
       try {
-        const B = await z.arrayBuffer(), F = new Uint8Array(B), O = {
+        const F = await z.arrayBuffer(), B = new Uint8Array(F), O = {
           id: `local-${Date.now()}`,
           name: z.name,
           type: "file",
@@ -2406,9 +2408,9 @@ const ar = ({
           providerKey: z.name,
           ownerId: "me"
         };
-        Z(O), r(O, F), p(!1);
-      } catch (B) {
-        console.error("Local file selection failed", B);
+        Z(O), r(O, B), p(!1);
+      } catch (F) {
+        console.error("Local file selection failed", F);
       } finally {
         j(!1);
       }
@@ -2418,19 +2420,19 @@ const ar = ({
     if (!(!z || !g)) {
       j(!0);
       try {
-        const B = await z.arrayBuffer(), F = await y?.({
-          file: new Uint8Array(B),
+        const F = await z.arrayBuffer(), B = await y?.({
+          file: new Uint8Array(F),
           filename: z.name,
           mimeType: z.type || "application/octet-stream",
           mountId: g.id,
-          path: D
+          path: $
         });
-        if (F?.data) {
-          const O = F.data;
-          Z(O), r(O, new Uint8Array(B)), p(!1);
+        if (B?.data) {
+          const O = B.data;
+          Z(O), r(O, new Uint8Array(F)), p(!1);
         }
-      } catch (B) {
-        console.error("Upload failed", B);
+      } catch (F) {
+        console.error("Upload failed", F);
       } finally {
         j(!1);
       }
@@ -2439,11 +2441,11 @@ const ar = ({
     if (!(!d || !g)) {
       j(!0);
       try {
-        const o = `${D}${d}/`;
-        u && (await u({
+        const o = `${$}${d}/`;
+        m && (await m({
           name: d,
           type: "folder",
-          path: D,
+          path: $,
           mimeType: "application/x-directory",
           size: 0,
           mountId: g.id,
@@ -2459,7 +2461,7 @@ const ar = ({
   }, G = async (o) => {
     j(!0);
     try {
-      const z = await x?.(o.id);
+      const z = await f?.(o.id);
       Z(o), r(o, z), p(!1);
     } catch (z) {
       console.error("Failed to download file", z);
@@ -2468,37 +2470,37 @@ const ar = ({
     }
   }, S = (o) => {
     o.stopPropagation(), Z(null), r(null);
-  }, A = me(() => {
+  }, T = me(() => {
     const o = /* @__PURE__ */ new Set(), z = [];
-    return M.forEach((B) => {
-      if (B.type === "folder") {
-        B.path === D && o.add(B.name);
+    return M.forEach((F) => {
+      if (F.type === "folder") {
+        F.path === $ && o.add(F.name);
         return;
       }
-      const F = B.providerKey || B.name, se = (D ? F.substring(D.length) : F).split("/").filter((ie) => ie !== "");
-      se.length > 1 ? o.add(se[0]) : se.length === 1 && z.push(B);
+      const B = F.providerKey || F.name, se = ($ ? B.substring($.length) : B).split("/").filter((ie) => ie !== "");
+      se.length > 1 ? o.add(se[0]) : se.length === 1 && z.push(F);
     }), {
       folders: Array.from(o).sort(),
-      files: z.sort((B, F) => B.name.localeCompare(F.name))
+      files: z.sort((F, B) => F.name.localeCompare(B.name))
     };
-  }, [M, D]), I = (o) => {
+  }, [M, $]), I = (o) => {
     _((z) => `${z}${o}/`);
-  }, T = () => {
-    const o = D.split("/").filter((z) => z !== "");
+  }, D = () => {
+    const o = $.split("/").filter((z) => z !== "");
     o.pop(), o.length === 0 ? _("/") : _(`${o.join("/")}/`);
-  }, U = me(() => {
-    const o = A.folders.map((z) => ({
+  }, q = me(() => {
+    const o = T.folders.map((z) => ({
       id: `folder-${z}`,
       name: z,
       type: "folder"
     }));
-    return A.files.forEach((z) => {
+    return T.files.forEach((z) => {
       o.push({
         ...z,
         type: "file"
       });
     }), o;
-  }, [A]), P = [
+  }, [T]), P = [
     {
       id: "name",
       header: "Name",
@@ -2512,7 +2514,7 @@ const ar = ({
             color: z.type === "folder" ? "warning" : "secondary"
           }
         ),
-        /* @__PURE__ */ e("span", { className: m(z.type === "folder" && "font-medium"), children: o })
+        /* @__PURE__ */ e("span", { className: u(z.type === "folder" && "font-medium"), children: o })
       ] })
     },
     {
@@ -2535,8 +2537,8 @@ const ar = ({
         {
           size: "sm",
           variant: "outline",
-          onClick: (B) => {
-            B.stopPropagation(), z.type === "folder" ? I(z.name) : G(z);
+          onClick: (F) => {
+            F.stopPropagation(), z.type === "folder" ? I(z.name) : G(z);
           },
           loading: V && z.type === "file" && X?.id === z.id,
           children: z.type === "folder" ? "Open" : "Select"
@@ -2558,7 +2560,7 @@ const ar = ({
       header: "",
       accessor: "id",
       align: "right",
-      cell: (o, z) => /* @__PURE__ */ e(re, { size: "sm", variant: "outline", onClick: () => $(z), children: "Open" })
+      cell: (o, z) => /* @__PURE__ */ e(re, { size: "sm", variant: "outline", onClick: () => L(z), children: "Open" })
     }
   ];
   return /* @__PURE__ */ i("div", { className: "space-y-1", children: [
@@ -2567,7 +2569,7 @@ const ar = ({
       "div",
       {
         onClick: () => !l && p(!0),
-        className: m(
+        className: u(
           "flex items-center gap-3 px-3 py-2 border rounded-lg cursor-pointer transition-colors",
           "hover:border-border-strong bg-surface",
           a ? "border-danger-border" : "border-border",
@@ -2589,11 +2591,11 @@ const ar = ({
     ),
     a && /* @__PURE__ */ e(oe, { variant: "body", size: "xs", className: "text-danger-fg", children: a }),
     /* @__PURE__ */ e(
-      Fe,
+      Be,
       {
-        open: f,
+        open: h,
         onClose: () => {
-          p(!1), $(null), _("/"), C(!1);
+          p(!1), L(null), _("/"), C(!1);
         },
         title: g ? `Explorer: ${g.name}` : "Select Storage Mount",
         size: "lg",
@@ -2613,13 +2615,13 @@ const ar = ({
                         variant: "ghost",
                         size: "sm",
                         onClick: () => {
-                          D && D !== "/" ? T() : $(null);
+                          $ && $ !== "/" ? D() : L(null);
                         },
                         leftIcon: /* @__PURE__ */ e(J, { icon: Ee, size: "xs" }),
-                        children: D ? "Back" : "Back to Mounts"
+                        children: $ ? "Back" : "Back to Mounts"
                       }
                     ),
-                    /* @__PURE__ */ e("div", { className: "flex items-center gap-1 text-xs text-text-muted overflow-hidden bg-surface-hover px-2 py-1 rounded", children: /* @__PURE__ */ e("span", { className: "truncate", children: D }) }),
+                    /* @__PURE__ */ e("div", { className: "flex items-center gap-1 text-xs text-text-muted overflow-hidden bg-surface-hover px-2 py-1 rounded", children: /* @__PURE__ */ e("span", { className: "truncate", children: $ }) }),
                     /* @__PURE__ */ e("div", { className: "flex-grow min-w-40", children: /* @__PURE__ */ e(
                       he,
                       {
@@ -2683,7 +2685,7 @@ const ar = ({
                   /* @__PURE__ */ e("div", { className: "max-h-100 overflow-auto rounded-lg border border-border", children: /* @__PURE__ */ e(
                     Te,
                     {
-                      data: U,
+                      data: q,
                       columns: P,
                       loading: V,
                       emptyContent: "This folder is empty",
@@ -2697,7 +2699,7 @@ const ar = ({
                     columns: K,
                     loading: V,
                     emptyContent: "No storage mounts configured",
-                    onRowClick: (o) => $(o)
+                    onRowClick: (o) => L(o)
                   }
                 ) }) })
               },
@@ -2747,22 +2749,22 @@ const ar = ({
     fullWidth: a = !1,
     loading: l = !1,
     containerClassName: c,
-    labelClassName: h,
+    labelClassName: x,
     className: b,
     id: y,
-    rows: x = 4,
-    ...u
-  }, f) => {
+    rows: f = 4,
+    ...m
+  }, h) => {
     const p = le.useId(), k = y || `textarea-${p}`, v = !!n, g = n || r ? `${k}-description` : void 0;
-    return /* @__PURE__ */ i("div", { className: m("flex flex-col", a && "w-full", c), children: [
+    return /* @__PURE__ */ i("div", { className: u("flex flex-col", a && "w-full", c), children: [
       t && /* @__PURE__ */ e(
         "label",
         {
           htmlFor: k,
-          className: m(
+          className: u(
             Oe,
             v ? "text-danger-fg" : "text-text-subtle",
-            h
+            x
           ),
           children: t
         }
@@ -2771,12 +2773,12 @@ const ar = ({
         /* @__PURE__ */ e(
           "textarea",
           {
-            ref: f,
+            ref: h,
             id: k,
-            rows: x,
+            rows: f,
             "aria-invalid": v || void 0,
             "aria-describedby": g,
-            className: m(
+            className: u(
               "block w-full resize-y rounded-md border bg-surface-input text-text",
               "transition-colors duration-fast ease-out",
               "placeholder:text-text-subtle",
@@ -2786,7 +2788,7 @@ const ar = ({
               v ? "border-danger-border bg-danger-soft" : "border-border hover:border-border-strong",
               b
             ),
-            ...u
+            ...m
           }
         ),
         l && /* @__PURE__ */ e(
@@ -2801,7 +2803,7 @@ const ar = ({
         "p",
         {
           id: g,
-          className: m("mt-1 text-xs", v ? "text-danger-fg" : "text-text-subtle"),
+          className: u("mt-1 text-xs", v ? "text-danger-fg" : "text-text-subtle"),
           children: n || r
         }
       )
@@ -2819,8 +2821,8 @@ function or(t, r, n) {
   const s = r.split("."), a = Array.isArray(t) ? [...t] : { ...t };
   let l = a;
   for (let c = 0; c < s.length - 1; c++) {
-    const h = s[c], b = l[h];
-    l[h] = b && typeof b == "object" ? Array.isArray(b) ? [...b] : { ...b } : {}, l = l[h];
+    const x = s[c], b = l[x];
+    l[x] = b && typeof b == "object" ? Array.isArray(b) ? [...b] : { ...b } : {}, l = l[x];
   }
   return l[s[s.length - 1]] = n, a;
 }
@@ -2842,23 +2844,23 @@ const Qr = ({
   onChange: a,
   transform: l,
   validate: c,
-  submitButton: h = { label: "Submit", variant: "primary" },
+  submitButton: x = { label: "Submit", variant: "primary" },
   cancelButton: b = { label: "Cancel", variant: "outline" },
   showButtons: y = !0,
-  layout: x = "vertical",
-  size: u = "md",
-  loading: f = !1,
+  layout: f = "vertical",
+  size: m = "md",
+  loading: h = !1,
   className: p,
   ref: k,
   sdk: v
 }) => {
-  const [g, $] = R(r || {}), [D, _] = R({}), [M, q] = R({});
+  const [g, L] = R(r || {}), [$, _] = R({}), [M, U] = R({});
   Y(() => {
-    r && $({ ...r });
+    r && L({ ...r });
   }, [r]);
   const V = ce(
     (C, d, E) => {
-      const N = t.flatMap((L) => L.items).find((L) => L.name === C);
+      const N = t.flatMap((A) => A.items).find((A) => A.name === C);
       if (!N) return null;
       if (N.required && (d == null || d === ""))
         return `${N.label} is required`;
@@ -2868,7 +2870,7 @@ const Qr = ({
         if (d && !Array.isArray(d))
           return `${N.label} must be an array.`;
         if (Array.isArray(d) && N.arrayFields) {
-          const L = [];
+          const A = [];
           let w = !1;
           if (d.forEach((Q, te) => {
             const ne = {};
@@ -2877,13 +2879,13 @@ const Qr = ({
               if (G.required && (S == null || S === ""))
                 ne[G.name] = `${G.label} is required`, w = !0;
               else if (G.validator) {
-                const A = G.validator(S, Q);
-                A && (ne[G.name] = A, w = !0);
+                const T = G.validator(S, Q);
+                T && (ne[G.name] = T, w = !0);
               }
             }
-            L[te] = ne;
+            A[te] = ne;
           }), w)
-            return JSON.stringify(L);
+            return JSON.stringify(A);
         }
       }
       return N.validator ? N.validator(d, E) : null;
@@ -2896,41 +2898,41 @@ const Qr = ({
         C,
         d
       );
-      t.flatMap((w) => w.items).find((w) => w.name === C)?.removeIfEmpty && (d == null || d === "") && (E = cr(E, C)), $(E), q((w) => ({ ...w, [C]: !0 }));
-      const L = V(C, d, E);
+      t.flatMap((w) => w.items).find((w) => w.name === C)?.removeIfEmpty && (d == null || d === "") && (E = cr(E, C)), L(E), U((w) => ({ ...w, [C]: !0 }));
+      const A = V(C, d, E);
       _((w) => ({
         ...w,
-        [C]: L || ""
+        [C]: A || ""
       })), a?.(E, C);
     },
     [g, t, V, a]
   ), W = ce(
     async (C) => {
-      if (C.preventDefault(), f) return;
-      const d = {}, E = t.flatMap((L) => L.items);
-      for (const L of E) {
-        if (L.hidden || L.conditional && !L.conditional(g))
+      if (C.preventDefault(), h) return;
+      const d = {}, E = t.flatMap((A) => A.items);
+      for (const A of E) {
+        if (A.hidden || A.conditional && !A.conditional(g))
           continue;
         const w = V(
-          L.name,
-          Ae(g, L.name),
+          A.name,
+          Ae(g, A.name),
           g
         );
-        w && (d[L.name] = w);
+        w && (d[A.name] = w);
       }
       if (c) {
-        const L = c(g);
-        L && Object.assign(d, L);
+        const A = c(g);
+        A && Object.assign(d, A);
       }
-      if (_(d), Object.keys(d).some((L) => d[L]))
+      if (_(d), Object.keys(d).some((A) => d[A]))
         return;
       const N = l ? l(g) : g;
       await n?.(g, N);
     },
-    [g, t, V, c, l, n, f]
+    [g, t, V, c, l, n, h]
   ), H = ce(
     (C) => {
-      const d = Ae(g, C.name), E = M[C.name] ? D[C.name] : void 0, N = C.disabled || f, L = {
+      const d = Ae(g, C.name), E = M[C.name] ? $[C.name] : void 0, N = C.disabled || h, A = {
         value: d || "",
         disabled: N,
         required: C.required,
@@ -2947,30 +2949,30 @@ const Qr = ({
           return /* @__PURE__ */ e(
             he,
             {
-              ...L,
+              ...A,
               onChange: (w) => j(C.name, w.target.value),
               type: C.textType || C.type,
               autoComplete: C.autocomplete,
               error: E,
-              size: u
+              size: m
             }
           );
         case "textarea":
           return /* @__PURE__ */ e(
             ze,
             {
-              ...L,
+              ...A,
               onChange: (w) => j(C.name, w.target.value),
               rows: 4,
               error: E,
-              size: u
+              size: m
             }
           );
         case "select":
           return /* @__PURE__ */ e(
             pe,
             {
-              ...L,
+              ...A,
               onChange: (w) => j(C.name, w),
               options: (C.options || []).map((w) => ({
                 ...w,
@@ -2980,17 +2982,17 @@ const Qr = ({
               multiple: C.multiple,
               allowCreate: C.allowCreate,
               error: E,
-              size: u
+              size: m
             }
           );
         case "checkbox":
           return /* @__PURE__ */ e(
             xe,
             {
-              ...L,
+              ...A,
               checked: !!d,
               onChange: (w) => j(C.name, w.target.checked),
-              size: u
+              size: m
             }
           );
         case "radio":
@@ -3020,17 +3022,17 @@ const Qr = ({
           return /* @__PURE__ */ e(
             Se,
             {
-              ...L,
+              ...A,
               value: d ? new Date(d) : null,
               onChange: (w) => j(C.name, w),
-              size: u
+              size: m
             }
           );
         case "file":
           return /* @__PURE__ */ e(
             ar,
             {
-              ...L,
+              ...A,
               value: d,
               onChange: (w) => j(C.name, w),
               error: E,
@@ -3070,7 +3072,7 @@ const Qr = ({
                 action: "storage.mount"
               }),
               disabled: N,
-              size: u,
+              size: m,
               placeholder: C.placeholder
             }
           );
@@ -3094,30 +3096,30 @@ const Qr = ({
           }, ne = (S) => {
             j(
               C.name,
-              w.filter((A, I) => I !== S)
+              w.filter((T, I) => I !== S)
             );
-          }, G = (S, A, I) => {
-            const T = [...w];
-            T[S] = {
-              ...T[S],
-              [A]: I
-            }, j(C.name, T);
+          }, G = (S, T, I) => {
+            const D = [...w];
+            D[S] = {
+              ...D[S],
+              [T]: I
+            }, j(C.name, D);
           };
           return /* @__PURE__ */ i("div", { className: "flex flex-col gap-2", children: [
-            w.map((S, A) => /* @__PURE__ */ i("div", { className: "flex items-start gap-2", children: [
+            w.map((S, T) => /* @__PURE__ */ i("div", { className: "flex items-start gap-2", children: [
               /* @__PURE__ */ e("div", { className: "grid flex-1 gap-2 sm:grid-cols-2", children: C.arrayFields?.map((I) => {
-                const T = Q?.[A]?.[I.name];
+                const D = Q?.[T]?.[I.name];
                 return /* @__PURE__ */ i(
                   "div",
                   {
                     className: "flex flex-col gap-1",
                     children: [
-                      A === 0 && /* @__PURE__ */ i("label", { className: "block text-xs font-semibold uppercase tracking-label text-text-subtle", children: [
+                      T === 0 && /* @__PURE__ */ i("label", { className: "block text-xs font-semibold uppercase tracking-label text-text-subtle", children: [
                         I.label,
                         I.required && /* @__PURE__ */ e("span", { className: "ml-1 text-danger-fg", children: "*" })
                       ] }),
                       (() => {
-                        const U = {
+                        const q = {
                           value: S?.[I.name] || "",
                           disabled: N,
                           required: I.required,
@@ -3134,40 +3136,40 @@ const Qr = ({
                             return /* @__PURE__ */ e(
                               he,
                               {
-                                ...U,
+                                ...q,
                                 onChange: (P) => G(
-                                  A,
+                                  T,
                                   I.name,
                                   P.target.value
                                 ),
                                 type: I.textType || I.type,
                                 autoComplete: I.autocomplete,
-                                error: T,
-                                size: u
+                                error: D,
+                                size: m
                               }
                             );
                           case "textarea":
                             return /* @__PURE__ */ e(
                               ze,
                               {
-                                ...U,
+                                ...q,
                                 onChange: (P) => G(
-                                  A,
+                                  T,
                                   I.name,
                                   P.target.value
                                 ),
                                 rows: 4,
-                                error: T,
-                                size: u
+                                error: D,
+                                size: m
                               }
                             );
                           case "select":
                             return /* @__PURE__ */ e(
                               pe,
                               {
-                                ...U,
+                                ...q,
                                 onChange: (P) => G(
-                                  A,
+                                  T,
                                   I.name,
                                   P
                                 ),
@@ -3180,22 +3182,22 @@ const Qr = ({
                                 searchable: I.searchable,
                                 multiple: I.multiple,
                                 allowCreate: I.allowCreate,
-                                error: T,
-                                size: u
+                                error: D,
+                                size: m
                               }
                             );
                           case "checkbox":
                             return /* @__PURE__ */ e(
                               xe,
                               {
-                                ...U,
+                                ...q,
                                 checked: !!S?.[I.name],
                                 onChange: (P) => G(
-                                  A,
+                                  T,
                                   I.name,
                                   P.target.checked
                                 ),
-                                size: u
+                                size: m
                               }
                             );
                           case "radio":
@@ -3208,11 +3210,11 @@ const Qr = ({
                                     "input",
                                     {
                                       type: "radio",
-                                      name: `${C.name}.${A}.${I.name}`,
+                                      name: `${C.name}.${T}.${I.name}`,
                                       value: P.value,
                                       checked: S?.[I.name] === P.value,
                                       onChange: () => G(
-                                        A,
+                                        T,
                                         I.name,
                                         P.value
                                       ),
@@ -3230,14 +3232,14 @@ const Qr = ({
                             return /* @__PURE__ */ e(
                               Se,
                               {
-                                ...U,
+                                ...q,
                                 value: P ? new Date(P) : null,
                                 onChange: (K) => G(
-                                  A,
+                                  T,
                                   I.name,
                                   K
                                 ),
-                                size: u
+                                size: m
                               }
                             );
                           }
@@ -3245,11 +3247,11 @@ const Qr = ({
                             return I.customComponent?.({
                               value: S?.[I.name],
                               onChange: (P) => G(
-                                A,
+                                T,
                                 I.name,
                                 P
                               ),
-                              error: T,
+                              error: D,
                               disabled: N
                             });
                           // Add other field types here as needed
@@ -3261,7 +3263,7 @@ const Qr = ({
                             ] });
                         }
                       })(),
-                      T && /* @__PURE__ */ e("p", { className: "text-xs text-danger-fg", children: T })
+                      D && /* @__PURE__ */ e("p", { className: "text-xs text-danger-fg", children: D })
                     ]
                   },
                   I.name
@@ -3275,13 +3277,13 @@ const Qr = ({
                   variant: "ghost",
                   size: "md",
                   "aria-label": `${C.label} verwijderen`,
-                  onClick: () => ne(A),
+                  onClick: () => ne(T),
                   disabled: N,
-                  className: m("shrink-0", A === 0 && "mt-5"),
+                  className: u("shrink-0", T === 0 && "mt-5"),
                   children: /* @__PURE__ */ e(st, { className: "size-icon-md" })
                 }
               )
-            ] }, A)),
+            ] }, T)),
             /* @__PURE__ */ i(
               re,
               {
@@ -3303,14 +3305,14 @@ const Qr = ({
           return null;
       }
     },
-    [g, M, D, f, u, j]
+    [g, M, $, h, m, j]
   ), X = ce(
     (C) => {
       if (C.conditional && !C.conditional(g))
         return null;
       const d = C.items.filter((N) => !(N.hidden || N.conditional && !N.conditional(g)));
       if (d.length === 0) return null;
-      const E = m(
+      const E = u(
         C.layout === "flex" ? "flex flex-wrap gap-3" : "grid gap-3",
         C.layout !== "flex" && {
           "grid-cols-1": !C.columns || C.columns === 1,
@@ -3329,10 +3331,10 @@ const Qr = ({
               /* @__PURE__ */ e("span", { className: "text-sm font-semibold text-text", children: C.title }),
               C.description && /* @__PURE__ */ e("p", { className: "mt-1 text-xs leading-4 text-text-subtle", children: C.description })
             ] }),
-            /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ e("div", { className: E, children: d.map((N) => (M[N.name] && D[N.name], /* @__PURE__ */ i(
+            /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ e("div", { className: E, children: d.map((N) => (M[N.name] && $[N.name], /* @__PURE__ */ i(
               "div",
               {
-                className: m(
+                className: u(
                   "flex min-w-0 flex-col gap-1.5",
                   N.type === "checkbox" && "justify-center"
                 ),
@@ -3355,18 +3357,19 @@ const Qr = ({
         C.id
       );
     },
-    [g, M, D, H]
-  ), Z = m(
+    [g, M, $, H]
+  ), Z = u(
     "overflow-hidden rounded-lg border border-border bg-surface",
     {
-      "max-w-md": u === "sm",
-      "max-w-2xl": u === "md",
-      "max-w-4xl": u === "lg",
-      "max-w-full": u === "full"
+      "max-w-md": m === "sm",
+      "max-w-2xl": m === "md",
+      "max-w-4xl": m === "lg",
+      "max-w-full": m === "full"
     },
     p
-  ), ee = u === "full" ? "md" : u;
+  ), ee = m === "full" ? "md" : m;
   return /* @__PURE__ */ i("form", { ref: k, onSubmit: W, className: Z, children: [
+    !y && /* @__PURE__ */ e("button", { type: "submit", className: "hidden", tabIndex: -1, "aria-hidden": !0 }),
     /* @__PURE__ */ e("div", { className: "flex flex-col", children: t.map(X) }),
     /* @__PURE__ */ e("div", { className: "flex items-center gap-2 border-t border-border-subtle bg-surface-sunk px-5 py-3", children: y && /* @__PURE__ */ i(fe, { children: [
       /* @__PURE__ */ e("div", { className: "ml-auto" }),
@@ -3376,7 +3379,7 @@ const Qr = ({
           type: "button",
           variant: b.variant ?? "ghost",
           size: b.size || ee,
-          disabled: b.disabled || f,
+          disabled: b.disabled || h,
           onClick: s,
           className: b.className,
           children: b.label
@@ -3386,12 +3389,12 @@ const Qr = ({
         re,
         {
           type: "submit",
-          variant: h.variant,
-          size: h.size || ee,
-          disabled: h.disabled || f,
-          loading: f,
-          className: h.className,
-          children: h.label
+          variant: x.variant,
+          size: x.size || ee,
+          disabled: x.disabled || h,
+          loading: h,
+          className: x.className,
+          children: x.label
         }
       )
     ] }) })
@@ -3405,11 +3408,11 @@ function en({
   cancelLabel: a = "Annuleren",
   tone: l = "default",
   loading: c = !1,
-  onConfirm: h,
+  onConfirm: x,
   onCancel: b
 }) {
   return /* @__PURE__ */ e(
-    Fe,
+    Be,
     {
       open: t,
       onClose: b,
@@ -3421,7 +3424,7 @@ function en({
           re,
           {
             variant: l === "danger" ? "destructive" : "primary",
-            onClick: h,
+            onClick: x,
             loading: c,
             children: s
           }
@@ -3463,13 +3466,13 @@ function tn({
   dismissible: a = !1,
   onDismiss: l,
   className: c,
-  children: h,
+  children: x,
   ...b
 }) {
   return /* @__PURE__ */ i(
     "span",
     {
-      className: m(
+      className: u(
         // Base styles
         "inline-flex items-center font-medium rounded-full",
         // Variant styles
@@ -3483,14 +3486,14 @@ function tn({
         n && /* @__PURE__ */ e(
           "span",
           {
-            className: m(
+            className: u(
               "w-2 h-2 rounded-full mr-1.5",
               ur[t]
             )
           }
         ),
-        s && /* @__PURE__ */ e("span", { className: m("flex-shrink-0", h && "mr-1"), children: s }),
-        h,
+        s && /* @__PURE__ */ e("span", { className: u("flex-shrink-0", x && "mr-1"), children: s }),
+        x,
         a && l && /* @__PURE__ */ e(
           "button",
           {
@@ -3516,19 +3519,19 @@ function rn({
   actions: a,
   card: l = !1,
   className: c,
-  ...h
+  ...x
 }) {
   return /* @__PURE__ */ i(
     "div",
     {
-      className: m(
+      className: u(
         "flex flex-col items-center gap-2.5 text-center",
         l && "rounded-lg border border-border bg-surface px-11 py-9 shadow-overlay",
         c
       ),
-      ...h,
+      ...x,
       children: [
-        t != null && /* @__PURE__ */ e("span", { className: m("flex size-disc items-center justify-center rounded-full text-2xl", mr[r]), children: t }),
+        t != null && /* @__PURE__ */ e("span", { className: u("flex size-disc items-center justify-center rounded-full text-2xl", mr[r]), children: t }),
         /* @__PURE__ */ e("div", { className: "text-lg font-semibold text-text", children: n }),
         s && /* @__PURE__ */ e("div", { className: "max-w-sm text-sm leading-relaxed text-text-muted", children: s }),
         a && /* @__PURE__ */ e("div", { className: "flex gap-2 pt-1.5", children: a })
@@ -3540,7 +3543,7 @@ function nn({ children: t, className: r, ...n }) {
   return /* @__PURE__ */ e(
     "kbd",
     {
-      className: m(
+      className: u(
         "inline-flex items-center rounded border border-border px-1.5 py-px text-xs font-medium leading-none text-text-muted",
         r
       ),
@@ -3565,12 +3568,12 @@ function sn({ value: t, variant: r = "accent", size: n = "md", className: s, ...
       "aria-valuenow": Math.round(l),
       "aria-valuemin": 0,
       "aria-valuemax": 100,
-      className: m("w-full overflow-hidden rounded-full bg-surface-hover", fr[n], s),
+      className: u("w-full overflow-hidden rounded-full bg-surface-hover", fr[n], s),
       ...a,
       children: /* @__PURE__ */ e(
         "div",
         {
-          className: m("h-full rounded-full transition-[width] duration-300 ease-out", hr[r]),
+          className: u("h-full rounded-full transition-[width] duration-300 ease-out", hr[r]),
           style: { width: `${l}%` }
         }
       )
@@ -3606,7 +3609,7 @@ function an({
   return /* @__PURE__ */ i(
     "div",
     {
-      className: m(
+      className: u(
         "inline-flex items-center",
         s ? "flex-col space-y-2" : "",
         a
@@ -3616,7 +3619,7 @@ function an({
         /* @__PURE__ */ i(
           "svg",
           {
-            className: m(
+            className: u(
               "animate-spin",
               xr[t],
               br[r]
@@ -3651,7 +3654,7 @@ function an({
         s && /* @__PURE__ */ e(
           "span",
           {
-            className: m(
+            className: u(
               "text-text-muted",
               gr[t]
             ),
@@ -3690,7 +3693,7 @@ function ln({
       role: s ? "img" : void 0,
       "aria-label": s,
       "aria-hidden": s ? void 0 : !0,
-      className: m(
+      className: u(
         "inline-block size-dot shrink-0",
         r === "round" ? "rounded-full" : "rounded-sm",
         pr[t],
@@ -3708,23 +3711,23 @@ function on({
   className: a
 }) {
   const l = t.indexOf(r), c = { role: s ? "group" : void 0, "aria-label": s, "aria-hidden": s ? void 0 : !0 };
-  return n === "dots" ? /* @__PURE__ */ e("div", { ...c, className: m("flex items-center gap-1.5", a), children: t.map((h, b) => /* @__PURE__ */ e(
+  return n === "dots" ? /* @__PURE__ */ e("div", { ...c, className: u("flex items-center gap-1.5", a), children: t.map((x, b) => /* @__PURE__ */ e(
     "span",
     {
-      className: m(
+      className: u(
         "h-step-bar rounded-full transition-all duration-fast ease-out",
         b === l ? "w-5 bg-accent" : "w-3.5",
         b < l && "bg-border-strong",
         b > l && "bg-border"
       )
     },
-    h
-  )) }) : /* @__PURE__ */ e("div", { ...c, className: m("flex items-center gap-2", a), children: t.map((h, b) => /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+    x
+  )) }) : /* @__PURE__ */ e("div", { ...c, className: u("flex items-center gap-2", a), children: t.map((x, b) => /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
     /* @__PURE__ */ e(
       "span",
       {
         "aria-current": b === l ? "step" : void 0,
-        className: m(
+        className: u(
           "flex size-tile-sm items-center justify-center rounded-full text-xs font-medium",
           b === l && "bg-accent text-accent-fg",
           b < l && "bg-accent-soft text-accent",
@@ -3734,13 +3737,13 @@ function on({
       }
     ),
     b < t.length - 1 && /* @__PURE__ */ e("span", { className: "h-px w-8 bg-border-strong" })
-  ] }, h)) });
+  ] }, x)) });
 }
 function cn({ title: t, icon: r = /* @__PURE__ */ e(lt, { className: "size-icon-md", "aria-hidden": !0 }), action: n, children: s, className: a, ...l }) {
   return /* @__PURE__ */ i(
     "div",
     {
-      className: m(
+      className: u(
         "flex flex-col gap-2 rounded-xl border p-4",
         "border-assistant-border bg-assistant-soft",
         a
@@ -3769,8 +3772,8 @@ function yr(t) {
   return r.length >= 2 ? (r[0][0] + r[1][0]).toUpperCase() : r.length === 1 ? r[0].slice(0, 2).toUpperCase() : "?";
 }
 const Nr = ({ name: t, src: r, size: n = "sm", className: s, title: a }) => {
-  const [l, c] = le.useState(!1), h = m(
-    "inline-flex items-center justify-center rounded-full overflow-hidden shrink-0 font-semibold select-none bg-surface-hover-border-emphasis text-text",
+  const [l, c] = le.useState(!1), x = u(
+    "inline-flex items-center justify-center rounded-full overflow-hidden shrink-0 font-semibold select-none bg-surface-hover text-text",
     vr[n],
     s
   );
@@ -3780,33 +3783,33 @@ const Nr = ({ name: t, src: r, size: n = "sm", className: s, title: a }) => {
       src: r,
       alt: t ?? "",
       title: a ?? t,
-      className: m(h, "object-cover"),
+      className: u(x, "object-cover"),
       onError: () => c(!0)
     }
-  ) : /* @__PURE__ */ e("span", { className: h, title: a ?? t, "aria-label": t, children: yr(t) });
+  ) : /* @__PURE__ */ e("span", { className: x, title: a ?? t, "aria-label": t, children: yr(t) });
 }, Le = "ring-surface", wr = "ring-surface-accent", dn = ({ people: t, max: r = 4, size: n = "sm", className: s }) => {
   if (t.length === 0) return null;
   const a = t.slice(0, r), l = t.length - a.length;
-  return /* @__PURE__ */ i("span", { className: m("inline-flex items-center", s), children: [
-    a.map((c, h) => /* @__PURE__ */ e(
+  return /* @__PURE__ */ i("span", { className: u("inline-flex items-center", s), children: [
+    a.map((c, x) => /* @__PURE__ */ e(
       Nr,
       {
         name: c.name,
         src: c.src,
         size: n,
         title: c.name ? c.seen === !1 ? `${c.name} — nog niet gelezen` : c.name : void 0,
-        className: m(
-          h > 0 && "-ml-2",
+        className: u(
+          x > 0 && "-ml-2",
           c.owner ? wr : Le,
           c.seen === !1 && "opacity-40"
         )
       },
-      c.id ?? `${c.name}-${h}`
+      c.id ?? `${c.name}-${x}`
     )),
     l > 0 && /* @__PURE__ */ i(
       "span",
       {
-        className: m(
+        className: u(
           "inline-flex items-center justify-center rounded-full shrink-0 -ml-2 font-semibold bg-surface-hover text-text-muted",
           n === "xs" ? "w-5 h-5 text-xs" : n === "md" ? "w-7 h-7 text-xs" : n === "lg" ? "w-9 h-9 text-xs" : "w-6 h-6 text-xs",
           Le
@@ -3835,7 +3838,7 @@ function un({ channel: t, children: r, size: n = "md", className: s, title: a })
     "span",
     {
       title: a,
-      className: m(
+      className: u(
         "inline-flex shrink-0 items-center justify-center font-bold",
         kr[n],
         l.fg,
@@ -3854,23 +3857,23 @@ const mn = ({
   radius: a = "md",
   showLoading: l = !0,
   showError: c = !0,
-  fallback: h,
+  fallback: x,
   loadingContent: b,
   errorContent: y,
-  className: x,
-  onLoad: u,
-  onError: f,
+  className: f,
+  onLoad: m,
+  onError: h,
   ...p
 }) => {
-  const [k, v] = R(!0), [g, $] = R(!1), [D, _] = R(t), M = (Z) => {
-    v(!1), $(!1), u?.(Z);
-  }, q = (Z) => {
-    if (v(!1), $(!0), h && D !== h) {
-      _(h), $(!1), v(!0);
+  const [k, v] = R(!0), [g, L] = R(!1), [$, _] = R(t), M = (Z) => {
+    v(!1), L(!1), m?.(Z);
+  }, U = (Z) => {
+    if (v(!1), L(!0), x && $ !== x) {
+      _(x), L(!1), v(!0);
       return;
     }
-    f?.(Z);
-  }, V = m(
+    h?.(Z);
+  }, V = u(
     "relative overflow-hidden bg-surface-hover",
     // Size variants
     {
@@ -3897,14 +3900,14 @@ const mn = ({
       "rounded-xl": a === "xl",
       "rounded-full": a === "full"
     },
-    x
-  ), j = m(
+    f
+  ), j = u(
     "w-full h-full object-cover transition-opacity duration-fast",
     {
       "opacity-0": k || g,
       "opacity-100": !k && !g
     }
-  ), W = m(
+  ), W = u(
     "absolute inset-0 flex items-center justify-center",
     "text-text-muted"
   ), H = /* @__PURE__ */ e("div", { className: "animate-pulse", children: /* @__PURE__ */ e("div", { className: "w-6 h-6 bg-surface-hover rounded" }) }), X = /* @__PURE__ */ i("div", { className: "text-center", children: [
@@ -3916,11 +3919,11 @@ const mn = ({
       "img",
       {
         ...p,
-        src: D,
+        src: $,
         alt: r,
         className: j,
         onLoad: M,
-        onError: q
+        onError: U
       }
     ),
     k && l && /* @__PURE__ */ e("div", { className: W, children: b || H }),
@@ -3935,21 +3938,21 @@ function fn({
   renderItem: a,
   trailing: l,
   onSelect: c,
-  onActiveIndexChange: h,
+  onActiveIndexChange: x,
   isActive: b,
   unread: y,
-  dimmed: x,
-  groupBy: u,
-  groups: f,
+  dimmed: f,
+  groupBy: m,
+  groups: h,
   renderGroupHeader: p,
   stickyGroupHeaders: k = !1,
   collapsibleGroups: v = !1,
   hideGroupCount: g = !1,
-  selectable: $ = !1,
-  selectedItems: D = [],
+  selectable: L = !1,
+  selectedItems: $ = [],
   onSelectionChange: _,
   bulkActions: M,
-  header: q,
+  header: U,
   stickyHeader: V = !1,
   bordered: j = !1,
   emptyContent: W,
@@ -3960,33 +3963,33 @@ function fn({
 }) {
   const [C, d] = le.useState(
     () => Object.fromEntries(
-      (f ?? []).filter((T) => T.defaultCollapsed).map((T) => [T.id, !0])
+      (h ?? []).filter((D) => D.defaultCollapsed).map((D) => [D.id, !0])
     )
-  ), E = le.useRef(null), N = (T) => {
-    if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(T.key)) return;
+  ), E = le.useRef(null), N = (D) => {
+    if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(D.key)) return;
     const P = Array.from(
       E.current?.querySelectorAll("li[data-list-row]") ?? []
     );
     if (P.length === 0) return;
-    T.preventDefault();
-    const K = P.indexOf(document.activeElement), o = T.key === "Home" ? 0 : T.key === "End" ? P.length - 1 : T.key === "ArrowDown" ? (K + 1) % P.length : (K - 1 + P.length) % P.length;
+    D.preventDefault();
+    const K = P.indexOf(document.activeElement), o = D.key === "Home" ? 0 : D.key === "End" ? P.length - 1 : D.key === "ArrowDown" ? (K + 1) % P.length : (K - 1 + P.length) % P.length;
     P[o]?.focus();
-  }, L = (T, U) => r ? r(T, U) : U, w = (T) => D.includes(T), Q = (T, U) => {
+  }, A = (D, q) => r ? r(D, q) : q, w = (D) => $.includes(D), Q = (D, q) => {
     _ && _(
-      U ? [...D, T] : D.filter((P) => P !== T)
+      q ? [...$, D] : $.filter((P) => P !== D)
     );
-  }, te = (T) => _?.(T ? [...t] : []), ne = m(
+  }, te = (D) => _?.(D ? [...t] : []), ne = u(
     "flex flex-col",
     j && "overflow-hidden rounded-lg border border-border-subtle",
     Z
   );
   if (H)
-    return /* @__PURE__ */ e("div", { className: ne, children: Array.from({ length: X }).map((T, U) => /* @__PURE__ */ i(
+    return /* @__PURE__ */ e("div", { className: ne, children: Array.from({ length: X }).map((D, q) => /* @__PURE__ */ i(
       "div",
       {
-        className: m(
+        className: u(
           "flex animate-pulse items-center gap-3 px-4 py-2",
-          n === "divided" && U > 0 && "border-t border-border-subtle"
+          n === "divided" && q > 0 && "border-t border-border-subtle"
         ),
         children: [
           /* @__PURE__ */ e("span", { className: "size-tile-sm shrink-0 rounded-md bg-surface-hover" }),
@@ -3995,12 +3998,12 @@ function fn({
           /* @__PURE__ */ e("span", { className: "h-3 w-8 shrink-0 rounded-sm bg-surface-hover" })
         ]
       },
-      `skeleton-${U}`
+      `skeleton-${q}`
     )) });
   if (t.length === 0 && W)
     return /* @__PURE__ */ e("div", { className: ne, children: W });
-  const G = t.length > 0 && D.length === t.length, S = D.length > 0 && !G, A = (T, U, P) => {
-    const K = b?.(T, U) ?? !1, o = y?.(T, U) ?? !1, z = x?.(T, U) ?? !1, B = $ && w(T);
+  const G = t.length > 0 && $.length === t.length, S = $.length > 0 && !G, T = (D, q, P) => {
+    const K = b?.(D, q) ?? !1, o = y?.(D, q) ?? !1, z = f?.(D, q) ?? !1, F = L && w(D);
     return /* @__PURE__ */ i(
       "li",
       {
@@ -4009,27 +4012,27 @@ function fn({
           tabIndex: 0,
           "data-list-row": "",
           "aria-current": K || void 0,
-          onClick: () => c(T, U),
-          onFocus: () => h?.(U),
-          onKeyDown: (F) => {
-            F.key !== "Enter" && F.key !== " " || (F.preventDefault(), c(T, U));
+          onClick: () => c(D, q),
+          onFocus: () => x?.(q),
+          onKeyDown: (B) => {
+            B.key !== "Enter" && B.key !== " " || (B.preventDefault(), c(D, q));
           }
         } : {},
-        className: m(
+        className: u(
           "flex items-center gap-3 px-4 py-2 text-base",
           "transition-colors duration-fast ease-out",
           n === "divided" && !P && "border-t border-border-subtle",
           c && "cursor-pointer focus-visible:outline-none focus-visible:focus-ring",
-          K || B ? "bg-accent-soft text-text" : c && "hover:bg-surface-hover",
+          K || F ? "bg-accent-soft text-text" : c && "hover:bg-surface-hover",
           o && "font-bold",
           z && "opacity-55"
         ),
         children: [
-          $ && /* @__PURE__ */ e("span", { onClick: (F) => F.stopPropagation(), children: /* @__PURE__ */ e(
+          L && /* @__PURE__ */ e("span", { onClick: (B) => B.stopPropagation(), children: /* @__PURE__ */ e(
             xe,
             {
-              checked: w(T),
-              onChange: (F) => Q(T, F.target.checked),
+              checked: w(D),
+              onChange: (B) => Q(D, B.target.checked),
               "aria-label": "Rij selecteren"
             }
           ) }),
@@ -4040,31 +4043,31 @@ function fn({
               className: "mt-2 size-1.5 shrink-0 self-start rounded-full bg-border-strong"
             }
           ),
-          s && /* @__PURE__ */ e("span", { className: "shrink-0", children: s(T, U) }),
-          /* @__PURE__ */ e("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: a ? a(T, U) : String(T) }),
-          l && /* @__PURE__ */ e("span", { className: "shrink-0 text-xs text-text-subtle", children: l(T, U) })
+          s && /* @__PURE__ */ e("span", { className: "shrink-0", children: s(D, q) }),
+          /* @__PURE__ */ e("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: a ? a(D, q) : String(D) }),
+          l && /* @__PURE__ */ e("span", { className: "shrink-0 text-xs text-text-subtle", children: l(D, q) })
         ]
       },
-      L(T, U)
+      A(D, q)
     );
   }, I = (() => {
-    if (!u)
-      return t.map((K, o) => A(K, o, o === 0));
-    const T = /* @__PURE__ */ new Map();
+    if (!m)
+      return t.map((K, o) => T(K, o, o === 0));
+    const D = /* @__PURE__ */ new Map();
     t.forEach((K, o) => {
-      const z = u(K, o);
-      T.has(z) || T.set(z, []), T.get(z).push({ item: K, index: o });
+      const z = m(K, o);
+      D.has(z) || D.set(z, []), D.get(z).push({ item: K, index: o });
     });
-    const U = f ?? [];
+    const q = h ?? [];
     return [
-      ...U.filter((K) => T.has(K.id)),
-      ...[...T.keys()].filter((K) => !U.some((o) => o.id === K)).map((K) => ({ id: K }))
+      ...q.filter((K) => D.has(K.id)),
+      ...[...D.keys()].filter((K) => !q.some((o) => o.id === K)).map((K) => ({ id: K }))
     ].flatMap((K, o) => {
-      const z = T.get(K.id) ?? [], B = v && C[K.id], F = K.title ?? K.id, O = K.count ?? z.length, se = /* @__PURE__ */ e(
+      const z = D.get(K.id) ?? [], F = v && C[K.id], B = K.title ?? K.id, O = K.count ?? z.length, se = /* @__PURE__ */ e(
         "li",
         {
           onClick: v ? () => d((ie) => ({ ...ie, [K.id]: !ie[K.id] })) : void 0,
-          className: m(
+          className: u(
             "flex items-center gap-2 bg-surface-sunk px-4 py-1.5",
             "text-xs font-semibold uppercase tracking-label text-text-subtle",
             "border-border-subtle",
@@ -4073,59 +4076,59 @@ function fn({
             k && "sticky z-10",
             v && "cursor-pointer select-none hover:text-text"
           ),
-          "aria-expanded": v ? !B : void 0,
+          "aria-expanded": v ? !F : void 0,
           style: k ? { top: V ? 28 : 0 } : void 0,
           children: p ? p(K, z.map((ie) => ie.item)) : /* @__PURE__ */ i(fe, { children: [
             v && /* @__PURE__ */ e(
               ye,
               {
                 "aria-hidden": !0,
-                className: m(
+                className: u(
                   "size-icon-sm shrink-0 transition-transform duration-fast ease-out",
-                  !B && "rotate-90"
+                  !F && "rotate-90"
                 )
               }
             ),
-            /* @__PURE__ */ e("span", { children: F }),
+            /* @__PURE__ */ e("span", { children: B }),
             !g && /* @__PURE__ */ e("span", { className: "ml-auto font-normal tabular-nums", children: O })
           ] })
         },
         `group-${K.id}`
       );
-      return B ? [se] : [
+      return F ? [se] : [
         se,
         ...z.map(
-          ({ item: ie, index: He }, qe) => A(ie, He, qe === 0)
+          ({ item: ie, index: He }, Ue) => T(ie, He, Ue === 0)
         )
       ];
     });
   })();
   return /* @__PURE__ */ i("div", { ref: E, className: ne, onKeyDown: c ? N : void 0, children: [
-    $ && D.length > 0 && /* @__PURE__ */ i("div", { className: "flex items-center gap-3 border-b border-border-subtle bg-surface-sunk px-4 py-2", children: [
+    L && $.length > 0 && /* @__PURE__ */ i("div", { className: "flex items-center gap-3 border-b border-border-subtle bg-surface-sunk px-4 py-2", children: [
       /* @__PURE__ */ e(
         xe,
         {
           checked: G,
           indeterminate: S,
-          onChange: (T) => te(T.target.checked),
+          onChange: (D) => te(D.target.checked),
           "aria-label": "Alles selecteren"
         }
       ),
       /* @__PURE__ */ i("span", { className: "text-xs text-text-subtle", children: [
-        D.length,
+        $.length,
         " geselecteerd"
       ] }),
       M && /* @__PURE__ */ e("div", { className: "ml-auto flex gap-2", children: M })
     ] }),
-    q && /* @__PURE__ */ e(
+    U && /* @__PURE__ */ e(
       "div",
       {
-        className: m(
+        className: u(
           "flex items-center gap-3 border-b border-border-subtle px-4 py-1.5",
           "text-xs font-semibold uppercase tracking-label text-text-subtle",
           V && "sticky top-0 z-20"
         ),
-        children: q
+        children: U
       }
     ),
     /* @__PURE__ */ e("ul", { "aria-label": ee, className: "flex flex-col", children: I })
@@ -4141,7 +4144,7 @@ function hn({
   return /* @__PURE__ */ e(
     "div",
     {
-      className: m(
+      className: u(
         // A bubble never spans the whole column; it narrows further from md,
         // where the thread itself is wide enough for the difference to matter.
         "min-w-0 max-w-bubble border md:max-w-bubble-md",
@@ -4168,8 +4171,8 @@ const Cr = {
   success: "border-border"
 };
 function xn({ value: t, label: r, tone: n = "default", className: s, ...a }) {
-  return /* @__PURE__ */ i("div", { className: m("rounded-xl border bg-surface px-4 py-3.5", Sr[n], s), ...a, children: [
-    /* @__PURE__ */ e("div", { className: m("text-2xl font-semibold", Cr[n]), children: t }),
+  return /* @__PURE__ */ i("div", { className: u("rounded-xl border bg-surface px-4 py-3.5", Sr[n], s), ...a, children: [
+    /* @__PURE__ */ e("div", { className: u("text-2xl font-semibold", Cr[n]), children: t }),
     /* @__PURE__ */ e("div", { className: "pt-0.5 text-xs text-text-muted", children: r })
   ] });
 }
@@ -4181,29 +4184,29 @@ const bn = ({
   actions: a = [],
   children: l,
   className: c,
-  backLabel: h = "Back",
+  backLabel: x = "Back",
   backClassName: b,
   onBack: y,
-  editable: x = !1,
-  onTitleChange: u
+  editable: f = !1,
+  onTitleChange: m
 }) => {
-  const [f, p] = R(!1), [k, v] = R(r), g = ae(null);
+  const [h, p] = R(!1), [k, v] = R(r), g = ae(null);
   Y(() => {
     v(r);
   }, [r]), Y(() => {
-    f && g.current && (g.current.focus(), g.current.select());
-  }, [f]);
-  const $ = () => {
-    x && p(!0);
-  }, D = () => {
-    p(!1), k.trim() !== "" && k !== r && u ? u(k.trim()) : v(r);
+    h && g.current && (g.current.focus(), g.current.select());
+  }, [h]);
+  const L = () => {
+    f && p(!0);
+  }, $ = () => {
+    p(!1), k.trim() !== "" && k !== r && m ? m(k.trim()) : v(r);
   }, _ = (M) => {
     M.key === "Enter" ? g.current?.blur() : M.key === "Escape" && (v(r), p(!1));
   };
   return /* @__PURE__ */ i(
     "div",
     {
-      className: m(
+      className: u(
         "p-5 pb-3",
         // App-bar treatment: own background, full-bleed, closed with a rule.
         t && "bg-surface border-b border-border",
@@ -4214,14 +4217,14 @@ const bn = ({
           /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ i("div", { className: "flex items-start gap-2 text-text", children: [
             y && /* @__PURE__ */ e(re, { variant: "secondary", onClick: y, leftIcon: /* @__PURE__ */ e(J, { icon: Ee, size: "sm" }), iconOnly: !0 }),
             /* @__PURE__ */ i("div", { className: "min-w-0 flex-1", children: [
-              f ? /* @__PURE__ */ e(
+              h ? /* @__PURE__ */ e(
                 "input",
                 {
                   ref: g,
                   type: "text",
                   value: k,
                   onChange: (M) => v(M.target.value),
-                  onBlur: D,
+                  onBlur: $,
                   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"
                 }
@@ -4229,21 +4232,21 @@ const bn = ({
                 /* @__PURE__ */ e(
                   "h2",
                   {
-                    onClick: $,
-                    className: m(
+                    onClick: L,
+                    className: u(
                       "text-2xl font-semibold truncate",
-                      x && "cursor-pointer"
+                      f && "cursor-pointer"
                     ),
-                    title: x ? "Klik om te bewerken" : void 0,
+                    title: f ? "Klik om te bewerken" : void 0,
                     children: r
                   }
                 ),
                 n && /* @__PURE__ */ e("span", { className: "shrink-0 text-base text-text-muted truncate", children: n }),
-                x && /* @__PURE__ */ e(
+                f && /* @__PURE__ */ e(
                   ct,
                   {
                     size: 15,
-                    onClick: $,
+                    onClick: L,
                     className: "shrink-0 cursor-pointer text-text-muted opacity-0 group-hover:opacity-100 transition-opacity"
                   }
                 )
@@ -4267,8 +4270,8 @@ const bn = ({
               re,
               {
                 variant: M.variant ?? "secondary",
-                onClick: (q) => {
-                  q.stopPropagation(), q.target.blur(), M.onClick();
+                onClick: (U) => {
+                  U.stopPropagation(), U.target.blur(), M.onClick();
                 },
                 disabled: M.disabled,
                 leftIcon: M.icon,
@@ -4288,10 +4291,10 @@ const bn = ({
   backLabel: n = "Back",
   className: s,
   children: a
-}) => /* @__PURE__ */ i("div", { className: m("flex items-center gap-2 mb-3", s), children: [
+}) => /* @__PURE__ */ i("div", { className: u("flex items-center gap-2 mb-3", s), children: [
   r && /* @__PURE__ */ e(re, { variant: "ghost", size: "sm", onClick: r, leftIcon: /* @__PURE__ */ e(Ee, { size: 14 }), children: n }),
   a && /* @__PURE__ */ e("div", { className: "flex-1 min-w-0", children: a }),
-  t.length > 0 && /* @__PURE__ */ e("div", { className: m("flex flex-wrap gap-2", !a && "ml-auto"), children: t.map(
+  t.length > 0 && /* @__PURE__ */ e("div", { className: u("flex flex-wrap gap-2", !a && "ml-auto"), children: t.map(
     (l) => l.splitOptions && l.splitOptions.length > 0 ? /* @__PURE__ */ e(
       Pe,
       {
@@ -4321,7 +4324,7 @@ const bn = ({
 ] });
 function pn({ label: t, trailing: r, align: n = "center", className: s }) {
   const a = /* @__PURE__ */ e("span", { className: "h-px flex-1 bg-border-subtle", "aria-hidden": !0 });
-  return !t && !r ? /* @__PURE__ */ e("div", { className: m("flex items-center py-2", s), children: a }) : /* @__PURE__ */ i("div", { className: m("flex items-center gap-3 py-2", s), children: [
+  return !t && !r ? /* @__PURE__ */ e("div", { className: u("flex items-center py-2", s), children: a }) : /* @__PURE__ */ i("div", { className: u("flex items-center gap-3 py-2", s), children: [
     n === "center" && a,
     /* @__PURE__ */ e("span", { className: "shrink-0 text-xs font-medium text-text-muted", children: t }),
     a,
@@ -4339,7 +4342,7 @@ function vn({
   return /* @__PURE__ */ i(
     "div",
     {
-      className: m(
+      className: u(
         "flex items-center justify-between gap-4 py-2",
         s && "rounded-lg border border-border px-3",
         a && "opacity-50",
@@ -4363,7 +4366,7 @@ function yn({
   children: a,
   className: l
 }) {
-  return /* @__PURE__ */ i("section", { className: m("flex flex-col gap-2", l), children: [
+  return /* @__PURE__ */ i("section", { className: u("flex flex-col gap-2", l), children: [
     /* @__PURE__ */ i("div", { className: "flex items-start gap-2", children: [
       t && /* @__PURE__ */ e(J, { icon: t, size: "md", color: "secondary", className: "mt-0.5" }),
       /* @__PURE__ */ i("div", { className: "min-w-0 flex-1", children: [
@@ -4372,7 +4375,7 @@ function yn({
       ] }),
       s && /* @__PURE__ */ e("div", { className: "shrink-0", children: s })
     ] }),
-    /* @__PURE__ */ e("div", { className: m("flex flex-col", t && "pl-6"), children: a })
+    /* @__PURE__ */ e("div", { className: u("flex flex-col", t && "pl-6"), children: a })
   ] });
 }
 function Nn({ label: t, dotColor: r, onClick: n, className: s }) {
@@ -4381,7 +4384,7 @@ function Nn({ label: t, dotColor: r, onClick: n, className: s }) {
     {
       type: "button",
       onClick: n,
-      className: m(
+      className: u(
         "inline-flex max-w-full items-center gap-1.5 rounded-full bg-surface-sunk px-2.5 py-1 text-xs text-text-muted transition-colors duration-fast ease-out hover:bg-surface-hover hover:text-text",
         s
       ),
@@ -4405,26 +4408,26 @@ const wn = ({
   size: n = "md",
   className: s
 }) => {
-  const a = (x) => {
-    if (!x) return "-";
+  const a = (f) => {
+    if (!f) return "-";
     try {
-      return new Date(x).toLocaleDateString("nl-NL", {
+      return new Date(f).toLocaleDateString("nl-NL", {
         year: "numeric",
         month: "long",
         day: "numeric"
       });
     } catch {
-      return String(x);
+      return String(f);
     }
-  }, l = (x) => x ? "Ja" : "Nee", c = (x, u) => {
-    if (!u) return String(x || "-");
-    const f = u.find((p) => p.value === x);
-    return f ? f.label : String(x || "-");
-  }, h = ce(
-    (x) => {
-      const u = zr(r, x.name);
-      if (x.type === "array") {
-        const p = u;
+  }, l = (f) => f ? "Ja" : "Nee", c = (f, m) => {
+    if (!m) return String(f || "-");
+    const h = m.find((p) => p.value === f);
+    return h ? h.label : String(f || "-");
+  }, x = ce(
+    (f) => {
+      const m = zr(r, f.name);
+      if (f.type === "array") {
+        const p = m;
         return !p || p.length === 0 ? /* @__PURE__ */ e(
           oe,
           {
@@ -4446,15 +4449,15 @@ const wn = ({
                   weight: "medium",
                   className: "text-text-muted",
                   children: [
-                    x.label,
+                    f.label,
                     " ",
                     v + 1
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: x.arrayFields?.map((g) => {
-                const $ = k?.[g.name];
-                let D = "-";
+              /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: f.arrayFields?.map((g) => {
+                const L = k?.[g.name];
+                let $ = "-";
                 switch (g.type) {
                   case "text":
                   case "email":
@@ -4462,30 +4465,30 @@ const wn = ({
                   case "tel":
                   case "url":
                   case "textarea":
-                    D = $ || "-";
+                    $ = L || "-";
                     break;
                   case "select":
                   case "radio":
-                    D = c(
-                      $,
+                    $ = c(
+                      L,
                       g.options
                     );
                     break;
                   case "checkbox":
-                    D = l($);
+                    $ = l(L);
                     break;
                   case "date":
-                    D = a($);
+                    $ = a(L);
                     break;
                   case "custom":
-                    D = g.customComponent?.({
-                      value: $
+                    $ = g.customComponent?.({
+                      value: L
                     });
                     break;
                   default:
-                    D = String($ || "-");
+                    $ = String(L || "-");
                 }
-                return g.format && (D = g.format($, k)), /* @__PURE__ */ i("div", { className: "space-y-1", children: [
+                return g.format && ($ = g.format(L, k)), /* @__PURE__ */ i("div", { className: "space-y-1", children: [
                   /* @__PURE__ */ e(
                     oe,
                     {
@@ -4501,7 +4504,7 @@ const wn = ({
                       variant: "body",
                       size: "sm",
                       className: "text-text",
-                      children: D
+                      children: $
                     }
                   )
                 ] }, g.name);
@@ -4511,10 +4514,10 @@ const wn = ({
           v
         )) });
       }
-      if (x.type === "custom" && x.customComponent)
-        return x.customComponent({ value: u });
-      if (x.format) {
-        const p = x.format(u, r);
+      if (f.type === "custom" && f.customComponent)
+        return f.customComponent({ value: m });
+      if (f.format) {
+        const p = f.format(m, r);
         return /* @__PURE__ */ e(
           oe,
           {
@@ -4525,31 +4528,31 @@ const wn = ({
           }
         );
       }
-      let f = "-";
-      switch (x.type) {
+      let h = "-";
+      switch (f.type) {
         case "text":
         case "email":
         case "password":
         case "number":
         case "tel":
         case "url":
-          f = u ? String(u) : "-";
+          h = m ? String(m) : "-";
           break;
         case "textarea":
-          f = u ? /* @__PURE__ */ e("div", { className: "whitespace-pre-wrap", children: String(u || "-") }) : "-";
+          h = m ? /* @__PURE__ */ e("div", { className: "whitespace-pre-wrap", children: String(m || "-") }) : "-";
           break;
         case "select":
         case "radio":
-          f = c(u, x.options);
+          h = c(m, f.options);
           break;
         case "checkbox":
-          f = l(u);
+          h = l(m);
           break;
         case "date":
-          f = a(u);
+          h = a(m);
           break;
         default:
-          f = u ? String(u) : "-";
+          h = m ? String(m) : "-";
       }
       return /* @__PURE__ */ e(
         oe,
@@ -4557,30 +4560,30 @@ const wn = ({
           variant: "body",
           size: "sm",
           className: "text-text",
-          children: f
+          children: h
         }
       );
     },
     [r]
   ), b = ce(
-    (x) => {
-      if (x.conditional && !x.conditional(r))
+    (f) => {
+      if (f.conditional && !f.conditional(r))
         return null;
-      const u = x.items.filter((p) => !(p.hidden || p.conditional && !p.conditional(r)));
-      if (u.length === 0) return null;
-      const f = m(
+      const m = f.items.filter((p) => !(p.hidden || p.conditional && !p.conditional(r)));
+      if (m.length === 0) return null;
+      const h = u(
         "space-y-4",
         {
-          "grid gap-4": x.layout === "grid",
-          "flex flex-wrap gap-4": x.layout === "flex"
+          "grid gap-4": f.layout === "grid",
+          "flex flex-wrap gap-4": f.layout === "flex"
         },
-        x.layout === "grid" && {
-          "grid-cols-1": !x.columns || x.columns === 1,
-          "grid-cols-2": x.columns === 2,
-          "grid-cols-3": x.columns === 3,
-          "grid-cols-4": x.columns === 4
+        f.layout === "grid" && {
+          "grid-cols-1": !f.columns || f.columns === 1,
+          "grid-cols-2": f.columns === 2,
+          "grid-cols-3": f.columns === 3,
+          "grid-cols-4": f.columns === 4
         },
-        x.className
+        f.className
       );
       return /* @__PURE__ */ i(
         "div",
@@ -4595,20 +4598,20 @@ const wn = ({
                   size: "lg",
                   weight: "semibold",
                   className: "text-text",
-                  children: x.title
+                  children: f.title
                 }
               ),
-              x.description && /* @__PURE__ */ e(
+              f.description && /* @__PURE__ */ e(
                 oe,
                 {
                   variant: "body",
                   size: "sm",
                   className: "text-text-muted mt-1",
-                  children: x.description
+                  children: f.description
                 }
               )
             ] }),
-            /* @__PURE__ */ e("div", { className: "md:col-span-2", children: /* @__PURE__ */ e("div", { className: f, children: u.map((p) => /* @__PURE__ */ i(
+            /* @__PURE__ */ e("div", { className: "md:col-span-2", children: /* @__PURE__ */ e("div", { className: h, children: m.map((p) => /* @__PURE__ */ i(
               "div",
               {
                 className: "space-y-1",
@@ -4626,18 +4629,18 @@ const wn = ({
                       children: p.label
                     }
                   ),
-                  h(p)
+                  x(p)
                 ]
               },
               p.name
             )) }) })
           ]
         },
-        x.id
+        f.id
       );
     },
-    [r, h]
-  ), y = m(
+    [r, x]
+  ), y = u(
     "space-y-6",
     {
       "max-w-md": n === "sm",
@@ -4654,7 +4657,7 @@ const wn = ({
     /* @__PURE__ */ i(
       "div",
       {
-        className: m(
+        className: u(
           "flex items-center gap-2 px-2 pt-4 pb-1 text-xs font-semibold uppercase tracking-label text-text-subtle"
         ),
         children: [
@@ -4663,7 +4666,7 @@ const wn = ({
         ]
       }
     ),
-    /* @__PURE__ */ e("ul", { className: "flex flex-col gap-0.5", children: t.children?.map((c, h) => /* @__PURE__ */ e(
+    /* @__PURE__ */ e("ul", { className: "flex flex-col gap-0.5", children: t.children?.map((c, x) => /* @__PURE__ */ e(
       Re,
       {
         item: c,
@@ -4671,7 +4674,7 @@ const wn = ({
         onClick: n,
         depth: s + 1
       },
-      h
+      x
     )) })
   ] }) : /* @__PURE__ */ e("li", { children: /* @__PURE__ */ i(
     "div",
@@ -4682,7 +4685,7 @@ const wn = ({
       onKeyDown: (c) => {
         (c.key === "Enter" || c.key === " ") && (c.preventDefault(), t.path && n?.(t.path));
       },
-      className: m(
+      className: u(
         "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",
@@ -4694,7 +4697,7 @@ const wn = ({
         t.count !== void 0 && t.count > 0 && /* @__PURE__ */ e(
           "span",
           {
-            className: m(
+            className: u(
               "shrink-0 text-xs tabular-nums",
               l ? "rounded-full bg-accent px-2 font-semibold text-accent-fg" : "text-text-subtle"
             ),
@@ -4714,29 +4717,29 @@ const wn = ({
 }) => /* @__PURE__ */ i("nav", { className: "flex h-full shrink-0 flex-col p-3 pt-4", children: [
   /* @__PURE__ */ i("div", { className: "flex items-center gap-2 px-2 pb-3", children: [
     /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 truncate text-lg font-semibold text-text", children: t }),
-    r && r.length > 0 && /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center gap-1", children: r.map((c, h) => /* @__PURE__ */ e(
+    r && r.length > 0 && /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center gap-1", children: r.map((c, x) => /* @__PURE__ */ e(
       "span",
       {
-        className: m(
+        className: u(
           "flex h-control-sm w-7 cursor-pointer items-center justify-center rounded-md text-text-strong",
           "transition-colors duration-fast ease-out hover:bg-surface-hover hover:text-text-strong",
           "focus-visible:outline-none focus-visible:focus-ring"
         ),
         children: c
       },
-      h
+      x
     )) })
   ] }),
   l && /* @__PURE__ */ e("div", { className: "px-1 pb-3", children: l }),
   /* @__PURE__ */ e("ul", { className: "flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto", children: n.map(
-    (c, h) => !c.path && !c.label && !c.children ? /* @__PURE__ */ e("li", { "aria-hidden": !0, className: "h-4" }, h) : /* @__PURE__ */ e(
+    (c, x) => !c.path && !c.label && !c.children ? /* @__PURE__ */ e("li", { "aria-hidden": !0, className: "h-4" }, x) : /* @__PURE__ */ e(
       Re,
       {
         item: c,
         isSelectedHandler: s,
         onClick: a
       },
-      h
+      x
     )
   ) })
 ] }), Er = {
@@ -4776,10 +4779,10 @@ const wn = ({
   align: a = "left",
   truncate: l = !1,
   className: c,
-  children: h,
+  children: x,
   ...b
 }) => {
-  const y = `h${t}`, x = m(
+  const y = `h${t}`, f = u(
     "font-sans text-pretty",
     Er[r || Tr(t)],
     Mr[n],
@@ -4788,7 +4791,7 @@ const wn = ({
     l && "truncate",
     c
   );
-  return /* @__PURE__ */ e(y, { className: x, ...b, children: h });
+  return /* @__PURE__ */ e(y, { className: f, ...b, children: x });
 };
 function Tr(t) {
   return {
@@ -4808,44 +4811,44 @@ const Sn = ({
   initialCommandPath: a,
   initialActiveIndex: l
 }) => {
-  const [c, h] = R(""), [b, y] = R(a || []), [x, u] = R(l || 0), f = ae(null), p = ae(null), v = (b.length ? t.find((g) => g.id === b[0])?.subCommands || [] : t).filter(
+  const [c, x] = R(""), [b, y] = R(a || []), [f, m] = R(l || 0), h = ae(null), p = ae(null), v = (b.length ? t.find((g) => g.id === b[0])?.subCommands || [] : t).filter(
     (g) => g.label.toLowerCase().includes(c.toLowerCase())
   );
   return Y(() => {
-    r || (h(""), y(a || []), u(l || 0));
+    r || (x(""), y(a || []), m(l || 0));
   }, [r]), Y(() => {
-    const g = ($) => {
+    const g = (L) => {
       if (r) {
-        if ($.key === "Escape")
+        if (L.key === "Escape")
           n();
-        else if ($.key === "ArrowUp")
-          u(
-            (D) => D > 0 ? D - 1 : v.length - 1
+        else if (L.key === "ArrowUp")
+          m(
+            ($) => $ > 0 ? $ - 1 : v.length - 1
           );
-        else if ($.key === "ArrowDown")
-          u(
-            (D) => D < v.length - 1 ? D + 1 : 0
+        else if (L.key === "ArrowDown")
+          m(
+            ($) => $ < v.length - 1 ? $ + 1 : 0
           );
-        else if ($.key === "Enter") {
-          const D = v[x];
-          D && (D.subCommands ? (y([...b, D.id]), u(0)) : D.action && (D.action(), n()));
+        else if (L.key === "Enter") {
+          const $ = v[f];
+          $ && ($.subCommands ? (y([...b, $.id]), m(0)) : $.action && ($.action(), n()));
         }
       }
     };
     return document.addEventListener("keydown", g), () => document.removeEventListener("keydown", g);
-  }, [r, n, v, x, b]), Y(() => {
-    const g = ($) => {
-      f.current && !f.current.contains($.target) && n();
+  }, [r, n, v, f, b]), Y(() => {
+    const g = (L) => {
+      h.current && !h.current.contains(L.target) && n();
     };
     return r && document.addEventListener("mousedown", g), () => document.removeEventListener("mousedown", g);
   }, [r, n]), Y(() => {
     if (!r) return;
-    p.current?.querySelector(`[data-index="${x}"]`)?.scrollIntoView({ block: "nearest" });
-  }, [x, r]), r ? /* @__PURE__ */ e("div", { className: "fixed inset-0 z-modal flex items-center justify-center bg-scrim", children: /* @__PURE__ */ i(
+    p.current?.querySelector(`[data-index="${f}"]`)?.scrollIntoView({ block: "nearest" });
+  }, [f, r]), r ? /* @__PURE__ */ e("div", { className: "fixed inset-0 z-modal flex items-center justify-center bg-scrim", children: /* @__PURE__ */ i(
     "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: f,
+      ref: h,
       children: [
         /* @__PURE__ */ i("div", { className: "flex items-center gap-2 px-3 flex-shrink-0", children: [
           /* @__PURE__ */ e(Ne, { className: "w-4 h-4 text-text-muted shrink-0" }),
@@ -4856,7 +4859,7 @@ const Sn = ({
               autoFocus: !0,
               placeholder: s?.searchPlaceholder || "Search commands...",
               value: c,
-              onChange: (g) => h(g.target.value),
+              onChange: (g) => x(g.target.value),
               className: "w-full border-0 bg-transparent py-2 text-text focus:outline-none"
             }
           )
@@ -4868,15 +4871,15 @@ const Sn = ({
             className: "mt-2 pt-2 text-sm border-t border-border max-h-dialog-list overflow-y-auto",
             children: [
               v.length === 0 && /* @__PURE__ */ e("div", { className: "text-text-muted text-center text-sm", children: s?.noCommandsFound || "No commands found" }),
-              v.map((g, $) => /* @__PURE__ */ i(
+              v.map((g, L) => /* @__PURE__ */ i(
                 "div",
                 {
-                  "data-index": $,
-                  className: `flex items-center p-2 cursor-pointer rounded-md ${$ === x ? "bg-accent-soft text-accent" : "text-text"}`,
+                  "data-index": L,
+                  className: `flex items-center p-2 cursor-pointer rounded-md ${L === f ? "bg-accent-soft text-accent" : "text-text"}`,
                   onClick: () => {
-                    g.subCommands ? (y([...b, g.id]), u(0)) : g.action && (g.action(), n());
+                    g.subCommands ? (y([...b, g.id]), m(0)) : g.action && (g.action(), n());
                   },
-                  onMouseEnter: () => u($),
+                  onMouseEnter: () => m(L),
                   children: [
                     g.icon && /* @__PURE__ */ e("span", { className: "mr-3", children: g.icon }),
                     /* @__PURE__ */ e("span", { className: "flex-grow", children: g.label }),
@@ -4956,7 +4959,7 @@ const Sn = ({
   sm: "border",
   md: "border-2",
   lg: "border-4"
-}, Br = {
+}, Fr = {
   primary: "border-accent-border",
   secondary: "border-border",
   accent: "border-accent-border",
@@ -4975,22 +4978,22 @@ const Sn = ({
     shadow: a,
     border: l,
     borderColor: c,
-    className: h,
+    className: x,
     children: b,
     ...y
-  }, x) => /* @__PURE__ */ e(
+  }, f) => /* @__PURE__ */ e(
     "div",
     {
-      ref: x,
-      className: m(
+      ref: f,
+      className: u(
         t && Ar[t],
         r && Lr[r],
         n && Ir[n],
         s && jr[s],
         a && Pr[a],
         l && Or[l],
-        c && Br[c],
-        h
+        c && Fr[c],
+        x
       ),
       ...y,
       children: b
@@ -5021,43 +5024,43 @@ function En({
   componentProps: a,
   className: l
 }) {
-  const c = ae(null), [h, b] = R(!0), [y, x] = R(null), u = ae(null);
+  const c = ae(null), [x, b] = R(!0), [y, f] = R(null), m = ae(null);
   return ae(null), Y(() => {
-    let f = !0;
+    let h = !0;
     return (async () => {
       b(!0);
       try {
         const k = await r();
-        if (!f) return;
+        if (!h) return;
         const v = k.component || k.default || k;
-        x(n === "react" ? () => v : () => k);
+        f(n === "react" ? () => v : () => k);
       } catch (k) {
         console.error(`[FederatedResource] Load failed: ${t}`, k);
       } finally {
-        f && b(!1);
+        h && b(!1);
       }
     })(), () => {
-      f = !1;
+      h = !1;
     };
   }, [t, r]), Y(() => {
-    if (h || !y || n === "react") return;
-    const f = c.current;
-    if (f) {
+    if (x || !y || n === "react") return;
+    const h = c.current;
+    if (h) {
       if (n === "svelte") {
-        const p = y.default || y, k = new p({ target: f, props: a || {} });
-        return u.current = k, () => k.$destroy();
+        const p = y.default || y, k = new p({ target: h, props: a || {} });
+        return m.current = k, () => k.$destroy();
       }
       if (y.mount) {
-        const p = y.mount({ container: f, props: a || {} });
+        const p = y.mount({ container: h, props: a || {} });
         return () => {
-          typeof p == "function" ? p() : y.unmount?.(f);
+          typeof p == "function" ? p() : y.unmount?.(h);
         };
       }
     }
-  }, [y, n, h]), Y(() => {
-    n === "svelte" && u.current && u.current.$set?.(a);
+  }, [y, n, x]), Y(() => {
+    n === "svelte" && m.current && m.current.$set?.(a);
   }, [a, n]), /* @__PURE__ */ i("div", { ref: c, className: l, style: { display: "contents" }, children: [
-    h && s,
+    x && s,
     n === "react" && y && /* @__PURE__ */ e(y, { ...a })
   ] });
 }
@@ -5120,13 +5123,13 @@ export {
   fn as List,
   Wr as MeetingGrid,
   hn as MessageBubble,
-  Fe as Modal,
+  Be as Modal,
   bn as PageHeader,
   gn as PageToolbar,
   Kr as ParticipantTile,
   kt as Popover,
   sn as ProgressBar,
-  Bt as SearchableTextField,
+  Ft as SearchableTextField,
   pn as SectionDivider,
   Xr as SegmentedToggle,
   pe as Select,
@@ -5139,7 +5142,7 @@ export {
   ln as StatusDot,
   on as StepIndicator,
   ar as StorageInput,
-  Ft as Switch,
+  Bt as Switch,
   Zr as TabBar,
   Te as Table,
   Xt as Tabs,
@@ -5148,8 +5151,8 @@ export {
   he as TextField,
   _r as VideoSurface,
   wn as View,
-  m as cn,
-  Ur as createSizes,
-  qr as createVariants
+  u as cn,
+  qr as createSizes,
+  Ur as createVariants
 };
 //# sourceMappingURL=index.js.map