@opencxh/ui-kit 3.112.2 → 3.113.0

package/dist/index.js

@@ -1,6 +1,6 @@
 import { clsx as Ue } 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 Pe, 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 we, HardDrive as $e, ArrowLeft as ze, 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 { 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 se, 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 u(...t) {
   return Ue(t);
@@ -28,14 +28,14 @@ function Kr({
   hasVideo: a,
   videoSlot: l,
   className: c,
-  fill: f
+  fill: h
 }) {
   return /* @__PURE__ */ i(
     "div",
     {
       className: u(
         "relative rounded-lg overflow-hidden bg-video-surface flex items-center justify-center",
-        f ? "h-full w-full" : "aspect-video",
+        h ? "h-full w-full" : "aspect-video",
         s && "ring-2 ring-speaking",
         c
       ),
@@ -105,21 +105,21 @@ const ft = {
     leftIcon: a,
     rightIcon: l,
     iconOnly: c = !1,
-    shape: f = "default",
-    className: p,
+    shape: h = "default",
+    className: g,
     children: N,
     disabled: x,
     ...d
-  }, h) => {
-    const y = x || s;
+  }, f) => {
+    const v = x || s;
     return /* @__PURE__ */ i(
       "button",
       {
-        ref: h,
+        ref: f,
         type: "button",
         className: u(
           "inline-flex shrink-0 items-center justify-center gap-2 cursor-pointer font-semibold",
-          f === "circle" ? "rounded-full" : "rounded-md",
+          h === "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",
@@ -128,9 +128,9 @@ const ft = {
           c ? xt[r] : ht[r],
           (n || r === "full") && "w-full",
           s && "cursor-wait",
-          p
+          g
         ),
-        disabled: y,
+        disabled: v,
         "aria-busy": s || void 0,
         ...d,
         children: [
@@ -199,9 +199,9 @@ const Gr = ({
   onClick: a,
   className: l,
   "aria-label": c,
-  ...f
+  ...h
 }) => {
-  const p = typeof r == "number" ? r : gt(r), N = u(
+  const g = typeof r == "number" ? r : gt(r), N = u(
     "inline-block shrink-0",
     bt[n],
     s && [
@@ -210,7 +210,7 @@ const Gr = ({
     ],
     l
   ), x = {
-    size: p,
+    size: g,
     strokeWidth: 2,
     className: N,
     onClick: s ? a : void 0,
@@ -221,7 +221,7 @@ const Gr = ({
     onKeyDown: s ? (d) => {
       (d.key === "Enter" || d.key === " ") && (d.preventDefault(), a?.());
     } : void 0,
-    ...f
+    ...h
   };
   return /* @__PURE__ */ e(t, { ...x });
 };
@@ -248,44 +248,44 @@ function Jr({
   size: a = "md",
   active: l = !1,
   caret: c = !1,
-  onClear: f,
-  clearLabel: p = "Filter wissen",
+  onClear: h,
+  clearLabel: g = "Filter wissen",
   onClick: N,
   title: x,
   className: d
 }) {
-  const h = l && !!f, y = s === "pill" ? "rounded-full" : "rounded-md", C = u(
+  const f = l && !!h, v = s === "pill" ? "rounded-full" : "rounded-md", C = 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",
-    y,
+    v,
     // Picking a value outranks whatever the value happens to mean.
     l ? "bg-accent text-accent-fg" : u("border", pt[n]),
     d
-  ), g = /* @__PURE__ */ i(fe, { children: [
+  ), y = /* @__PURE__ */ i(fe, { children: [
     r,
     t,
     c && /* @__PURE__ */ e(J, { icon: be, size: "xs" })
-  ] }), v = u(
+  ] }), p = u(
     "inline-flex items-center gap-1.5 pl-3",
-    y,
-    h ? "pr-1.5" : "pr-3",
+    v,
+    f ? "pr-1.5" : "pr-3",
     "focus-visible:outline-none focus-visible:focus-ring"
   );
-  return h ? /* @__PURE__ */ i("span", { className: C, title: x, children: [
-    /* @__PURE__ */ e("button", { type: "button", onClick: N, className: v, children: g }),
+  return f ? /* @__PURE__ */ i("span", { className: C, title: x, children: [
+    /* @__PURE__ */ e("button", { type: "button", onClick: N, className: p, children: y }),
     /* @__PURE__ */ e(
       "button",
       {
         type: "button",
-        "aria-label": p,
-        onClick: f,
-        className: u("inline-flex h-full items-center pr-3 focus-visible:outline-none focus-visible:focus-ring", y),
+        "aria-label": g,
+        onClick: h,
+        className: u("inline-flex h-full items-center pr-3 focus-visible:outline-none focus-visible:focus-ring", v),
         children: /* @__PURE__ */ e(J, { icon: ve, size: "xs" })
       }
     )
-  ] }) : /* @__PURE__ */ e("button", { type: "button", title: x, onClick: N, className: u(C, v), children: g });
+  ] }) : /* @__PURE__ */ e("button", { type: "button", title: x, onClick: N, className: u(C, p), children: y });
 }
 const vt = {
   xs: "text-xs",
@@ -319,12 +319,12 @@ const vt = {
   external: a = !1,
   className: l,
   children: c,
-  href: f,
-  target: p,
+  href: h,
+  target: g,
   rel: N,
   ...x
 }) => {
-  const d = a || f && (f.startsWith("http") || f.startsWith("mailto:")), h = u(
+  const d = a || h && (h.startsWith("http") || h.startsWith("mailto:")), f = u(
     "inline-flex items-center gap-1 underline-offset-2",
     "transition-colors duration-fast ease-out",
     "focus-visible:outline-none focus-visible:focus-ring",
@@ -338,14 +338,14 @@ const vt = {
     ],
     s && "pointer-events-none cursor-not-allowed text-text-disabled opacity-50",
     l
-  ), y = {
+  ), v = {
     ...x,
-    href: s ? void 0 : f,
-    target: d ? "_blank" : p,
+    href: s ? void 0 : h,
+    target: d ? "_blank" : g,
     rel: d ? "noopener noreferrer" : N,
     "aria-disabled": s || void 0
   };
-  return /* @__PURE__ */ i("a", { className: h, ...y, children: [
+  return /* @__PURE__ */ i("a", { className: f, ...v, children: [
     c,
     d && /* @__PURE__ */ e(Je, { className: "size-icon-sm shrink-0", "aria-hidden": !0 })
   ] });
@@ -368,12 +368,12 @@ function Xr({
       "aria-label": l,
       className: u("inline-flex gap-0.5 rounded-md bg-surface-hover p-0.5", a),
       children: t.map((c) => {
-        const f = c.value === r;
+        const h = c.value === r;
         return /* @__PURE__ */ e(
           "button",
           {
             role: "tab",
-            "aria-selected": f,
+            "aria-selected": h,
             type: "button",
             onClick: () => n(c.value),
             className: u(
@@ -381,7 +381,7 @@ function Xr({
               "transition-colors duration-fast ease-out",
               "focus-visible:outline-none focus-visible:focus-ring",
               wt[s],
-              f ? "bg-surface text-text font-semibold" : "text-text-muted hover:text-text"
+              h ? "bg-surface text-text font-semibold" : "text-text-muted hover:text-text"
             ),
             children: c.label
           },
@@ -391,61 +391,75 @@ function Xr({
     }
   );
 }
+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 g = r.current;
+      if (!g) return;
+      const N = g.getBoundingClientRect(), x = window.innerHeight - N.bottom, d = N.top, f = a.startsWith("top"), v = f ? d < 200 && x > d : x < 200 && d > x, C = f !== v, y = { position: "fixed" };
+      C ? (y.bottom = window.innerHeight - N.top + n, y.maxHeight = Math.max(120, d - n * 2)) : (y.top = N.bottom + n, y.maxHeight = Math.max(120, x - n * 2)), a.endsWith("end") ? y.right = window.innerWidth - N.right : y.left = N.left, s && (y.width = N.width), c(y);
+    };
+    return h(), window.addEventListener("scroll", h, !0), window.addEventListener("resize", h), () => {
+      window.removeEventListener("scroll", h, !0), window.removeEventListener("resize", h);
+    };
+  }, [t, r, n, s, a]), l;
+}
 const kt = ({
   trigger: t,
   children: r,
   placement: n = "bottom-start",
   className: s,
-  disabled: a = !1,
-  triggerLabel: l
+  rootClassName: a,
+  triggerClassName: l,
+  disabled: c = !1,
+  triggerLabel: h
 }) => {
-  const [c, f] = R(!1), [p, N] = R({}), x = se(null), d = se(null);
+  const [g, N] = R(!1), x = se(null), d = se(null), f = we(g, d, { placement: n });
   Y(() => {
-    if (!c) return;
-    const C = (v) => {
-      x.current && !x.current.contains(v.target) && f(!1);
-    }, g = (v) => {
-      v.key === "Escape" && f(!1);
+    if (!g) return;
+    const y = (D) => {
+      x.current && !x.current.contains(D.target) && N(!1);
+    }, p = (D) => {
+      D.key === "Escape" && N(!1);
     };
-    return document.addEventListener("mousedown", C), document.addEventListener("keydown", g), () => {
-      document.removeEventListener("mousedown", C), document.removeEventListener("keydown", g);
+    return document.addEventListener("mousedown", y), document.addEventListener("keydown", p), () => {
+      document.removeEventListener("mousedown", y), document.removeEventListener("keydown", p);
     };
-  }, [c]);
-  const h = (C) => {
-    if (C.stopPropagation(), !a) {
-      if (!c) {
-        const g = d.current?.getBoundingClientRect();
-        if (g) {
-          const $ = {};
-          n.startsWith("bottom") ? $.top = g.bottom + 6 : $.bottom = window.innerHeight - g.top + 6, n.endsWith("start") ? $.left = g.left : $.right = window.innerWidth - g.right, N($);
-        }
-      }
-      f((g) => !g);
-    }
-  }, y = () => f(!1);
-  return /* @__PURE__ */ i("div", { ref: x, className: "relative inline-flex", children: [
+  }, [g]);
+  const v = (y) => {
+    y.stopPropagation(), !c && N((p) => !p);
+  }, C = () => N(!1);
+  return /* @__PURE__ */ i("div", { ref: x, className: u("relative inline-flex", a), children: [
     /* @__PURE__ */ e(
       "button",
       {
         ref: d,
         type: "button",
-        onClick: h,
-        disabled: a,
-        "aria-label": l,
-        "aria-expanded": c,
-        className: u("inline-flex items-center", a && "cursor-not-allowed opacity-50"),
+        onClick: v,
+        disabled: c,
+        "aria-label": h,
+        "aria-expanded": g,
+        className: u(
+          "inline-flex items-center",
+          c && "cursor-not-allowed opacity-50",
+          l
+        ),
         children: t
       }
     ),
-    c && /* @__PURE__ */ e(
+    g && /* @__PURE__ */ e(
       "div",
       {
         className: u(
-          "fixed z-overlay bg-surface rounded-lg shadow-overlay border border-border",
+          // 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: p,
-        children: typeof r == "function" ? r(y) : r
+        style: f,
+        children: typeof r == "function" ? r(C) : r
       }
     )
   ] });
@@ -457,7 +471,7 @@ const kt = ({
   sm: "h-control-sm w-7",
   md: "h-control-md w-8"
 };
-function je({
+function Pe({
   label: t,
   onClick: r,
   variant: n = "primary",
@@ -465,11 +479,11 @@ function je({
   icon: a,
   options: l,
   disabled: c = !1,
-  loading: f = !1,
-  menuPlacement: p = "bottom-end",
+  loading: h = !1,
+  menuPlacement: g = "bottom-end",
   menuLabel: N = "More options"
 }) {
-  const x = c || f, d = l.length > 0;
+  const x = c || h, d = l.length > 0;
   return /* @__PURE__ */ i("div", { className: "inline-flex items-center gap-px", children: [
     /* @__PURE__ */ e(
       ee,
@@ -478,7 +492,7 @@ function je({
         size: s,
         onClick: r,
         disabled: c,
-        loading: f,
+        loading: h,
         leftIcon: a,
         className: u(d && "rounded-r-none"),
         children: t
@@ -487,7 +501,7 @@ function je({
     d && /* @__PURE__ */ e(
       kt,
       {
-        placement: p,
+        placement: g,
         disabled: x,
         triggerLabel: N,
         className: "min-w-menu py-1",
@@ -505,25 +519,25 @@ function je({
             children: /* @__PURE__ */ e(be, { className: "size-icon-md" })
           }
         ),
-        children: (h) => /* @__PURE__ */ e(fe, { children: l.map((y) => /* @__PURE__ */ i(
+        children: (f) => /* @__PURE__ */ e(fe, { children: l.map((v) => /* @__PURE__ */ i(
           "button",
           {
             type: "button",
             onClick: () => {
-              y.onClick(), h();
+              v.onClick(), f();
             },
             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",
-              y.variant === "destructive" ? "text-danger-fg hover:bg-danger-soft" : "text-text hover:bg-surface-hover"
+              v.variant === "destructive" ? "text-danger-fg hover:bg-danger-soft" : "text-text hover:bg-surface-hover"
             ),
             children: [
-              y.icon && /* @__PURE__ */ e("span", { className: "shrink-0", children: y.icon }),
-              y.label
+              v.icon && /* @__PURE__ */ e("span", { className: "shrink-0", children: v.icon }),
+              v.label
             ]
           },
-          y.id
+          v.id
         )) })
       }
     )
@@ -553,26 +567,26 @@ const zt = {
     indeterminate: a = !1,
     shape: l = "square",
     containerClassName: c,
-    labelClassName: f,
-    className: p,
+    labelClassName: h,
+    className: g,
     id: N,
     ...x
   }, d) => {
-    const h = le.useId(), y = N || `checkbox-${h}`, C = !!n, g = le.useRef(null), v = le.useCallback(
-      ($) => {
-        g.current = $, typeof d == "function" ? d($) : d && typeof d == "object" && (d.current = $);
+    const f = le.useId(), v = N || `checkbox-${f}`, C = !!n, y = le.useRef(null), p = le.useCallback(
+      (D) => {
+        y.current = D, typeof d == "function" ? d(D) : d && typeof d == "object" && (d.current = D);
       },
       [d]
     );
     return le.useEffect(() => {
-      g.current && (g.current.indeterminate = a);
+      y.current && (y.current.indeterminate = a);
     }, [a]), /* @__PURE__ */ i("div", { className: u("flex flex-col", c), children: [
       /* @__PURE__ */ i("div", { className: u("flex items-center gap-3", Et[s]), children: [
         /* @__PURE__ */ e(
           "input",
           {
-            ref: v,
-            id: y,
+            ref: p,
+            id: v,
             type: "checkbox",
             "aria-invalid": C || void 0,
             className: u(
@@ -583,7 +597,7 @@ const zt = {
               "disabled:cursor-not-allowed disabled:bg-surface-hover",
               zt[s],
               C ? "border-danger-border" : "border-border-strong",
-              p
+              g
             ),
             ...x
           }
@@ -592,12 +606,12 @@ const zt = {
           /* @__PURE__ */ e(
             "label",
             {
-              htmlFor: y,
+              htmlFor: v,
               className: u(
                 "cursor-pointer",
                 C ? "text-danger-fg" : "text-text",
                 Mt[s],
-                f
+                h
               ),
               children: t
             }
@@ -610,22 +624,7 @@ const zt = {
   }
 );
 xe.displayName = "Checkbox";
-function Ee(t, r, { gap: n = 6, matchWidth: s = !1, placement: a = "bottom-start" } = {}) {
-  const [l, c] = R({});
-  return dt(() => {
-    if (!t) return;
-    const f = () => {
-      const p = r.current;
-      if (!p) return;
-      const N = p.getBoundingClientRect(), x = window.innerHeight - N.bottom, d = N.top, h = a.startsWith("top"), y = h ? d < 200 && x > d : x < 200 && d > x, C = h !== y, g = { position: "fixed" };
-      C ? (g.bottom = window.innerHeight - N.top + n, g.maxHeight = Math.max(120, d - n * 2)) : (g.top = N.bottom + n, g.maxHeight = Math.max(120, x - n * 2)), a.endsWith("end") ? g.right = window.innerWidth - N.right : g.left = N.left, s && (g.width = N.width), c(g);
-    };
-    return f(), window.addEventListener("scroll", f, !0), window.addEventListener("resize", f), () => {
-      window.removeEventListener("scroll", f, !0), window.removeEventListener("resize", f);
-    };
-  }, [t, r, n, s, a]), l;
-}
-const $t = () => /* @__PURE__ */ e(J, { icon: Ye, size: "md", color: "current" }), Dt = () => /* @__PURE__ */ e(J, { icon: Pe, size: "md", color: "current" }), Tt = () => /* @__PURE__ */ e(J, { icon: ye, size: "md", color: "current" }), Ce = de(({
+const $t = () => /* @__PURE__ */ e(J, { icon: Ye, size: "md", color: "current" }), Dt = () => /* @__PURE__ */ e(J, { icon: je, size: "md", color: "current" }), Tt = () => /* @__PURE__ */ e(J, { icon: ye, size: "md", color: "current" }), Se = de(({
   value: t,
   onChange: r,
   placeholder: n = "Select date",
@@ -633,24 +632,24 @@ const $t = () => /* @__PURE__ */ e(J, { icon: Ye, size: "md", color: "current" }
   required: a = !1,
   size: l = "md",
   className: c,
-  minDate: f,
-  maxDate: p,
+  minDate: h,
+  maxDate: g,
   format: N = "MM/dd/yyyy",
   withTime: x = !1
 }, d) => {
-  const [h, y] = R(!1), [C, g] = R(() => t || /* @__PURE__ */ new Date()), v = se(null), $ = Ee(h, v);
+  const [f, v] = R(!1), [C, y] = R(() => t || /* @__PURE__ */ new Date()), p = se(null), D = we(f, p);
   Y(() => {
     const b = (m) => {
-      v.current && !v.current.contains(m.target) && y(!1);
+      p.current && !p.current.contains(m.target) && v(!1);
     };
-    return h && document.addEventListener("mousedown", b), () => {
+    return f && document.addEventListener("mousedown", b), () => {
       document.removeEventListener("mousedown", b);
     };
-  }, [h]);
-  const D = (b) => {
+  }, [f]);
+  const $ = (b) => {
     if (!b) return "";
-    const m = b.getDate().toString().padStart(2, "0"), E = (b.getMonth() + 1).toString().padStart(2, "0"), w = b.getFullYear(), P = N === "dd/MM/yyyy" ? `${m}/${E}/${w}` : N === "yyyy-MM-dd" ? `${w}-${E}-${m}` : `${E}/${m}/${w}`;
-    return x ? `${P} ${_(b)}` : P;
+    const m = b.getDate().toString().padStart(2, "0"), E = (b.getMonth() + 1).toString().padStart(2, "0"), w = b.getFullYear(), j = N === "dd/MM/yyyy" ? `${m}/${E}/${w}` : N === "yyyy-MM-dd" ? `${w}-${E}-${m}` : `${E}/${m}/${w}`;
+    return x ? `${j} ${_(b)}` : j;
   }, _ = (b) => `${b.getHours().toString().padStart(2, "0")}:${b.getMinutes().toString().padStart(2, "0")}`, M = (b) => {
     const [m, E] = b.split(":").map(Number);
     if (Number.isNaN(m) || Number.isNaN(E)) return;
@@ -659,25 +658,25 @@ const $t = () => /* @__PURE__ */ e(J, { icon: Ye, size: "md", color: "current" }
   }, q = () => {
     const b = C.getFullYear(), m = C.getMonth(), E = new Date(b, m, 1), w = new Date(E);
     w.setDate(w.getDate() - E.getDay());
-    const P = [], k = new Date(w);
+    const j = [], k = new Date(w);
     for (let ae = 0; ae < 42; ae++)
-      P.push(new Date(k)), k.setDate(k.getDate() + 1);
-    return P;
+      j.push(new Date(k)), k.setDate(k.getDate() + 1);
+    return j;
   }, V = (b) => {
-    if (b.getMonth() === C.getMonth() && !(f && b < f) && !(p && b > p)) {
+    if (b.getMonth() === C.getMonth() && !(h && b < h) && !(g && b > g)) {
       if (x) {
         const E = new Date(b);
         E.setHours(t?.getHours() ?? 0, t?.getMinutes() ?? 0, 0, 0), r?.(E);
         return;
       }
-      r?.(b), y(!1);
+      r?.(b), v(!1);
     }
   }, I = () => {
-    g(new Date(C.getFullYear(), C.getMonth() - 1, 1));
+    y(new Date(C.getFullYear(), C.getMonth() - 1, 1));
   }, W = () => {
-    g(new Date(C.getFullYear(), C.getMonth() + 1, 1));
+    y(new Date(C.getFullYear(), C.getMonth() + 1, 1));
   }, H = () => {
-    r?.(null), y(!1);
+    r?.(null), v(!1);
   }, X = u(
     "w-full border border-border rounded-md transition-colors duration-fast",
     "bg-surface text-text",
@@ -705,19 +704,19 @@ const $t = () => /* @__PURE__ */ e(J, { icon: Ye, size: "md", color: "current" }
     "November",
     "December"
   ];
-  return /* @__PURE__ */ i("div", { ref: v, className: "relative", children: [
+  return /* @__PURE__ */ i("div", { ref: p, className: "relative", children: [
     /* @__PURE__ */ i("div", { className: "relative", children: [
       /* @__PURE__ */ e(
         "input",
         {
           ref: d,
           type: "text",
-          value: D(t ?? null),
+          value: $(t ?? null),
           placeholder: n,
           disabled: s,
           required: a,
           readOnly: !0,
-          onClick: () => !s && y(!h),
+          onClick: () => !s && v(!f),
           className: u(X, "pr-10 cursor-pointer")
         }
       ),
@@ -725,14 +724,14 @@ const $t = () => /* @__PURE__ */ e(J, { icon: Ye, size: "md", color: "current" }
         "button",
         {
           type: "button",
-          onClick: () => !s && y(!h),
+          onClick: () => !s && v(!f),
           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, {})
         }
       )
     ] }),
-    h && /* @__PURE__ */ i("div", { style: $, className: "z-overlay overflow-auto rounded-lg border border-border bg-surface p-4 shadow-overlay min-w-panel", children: [
+    f && /* @__PURE__ */ i("div", { style: D, className: "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",
@@ -758,7 +757,7 @@ 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((b) => /* @__PURE__ */ e("div", { className: "text-xs font-medium text-text-muted text-center py-1", children: b }, b)) }),
       /* @__PURE__ */ e("div", { className: "grid grid-cols-7 gap-1", children: Z.map((b, m) => {
-        const E = b.getMonth() === C.getMonth(), w = t && b.toDateString() === t.toDateString(), P = b.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), k = !E || f && b < f || p && b > p;
+        const E = b.getMonth() === C.getMonth(), w = t && b.toDateString() === t.toDateString(), j = b.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), k = !E || h && b < h || g && b > g;
         return /* @__PURE__ */ e(
           "button",
           {
@@ -769,7 +768,7 @@ const $t = () => /* @__PURE__ */ e(J, { icon: Ye, size: "md", color: "current" }
               {
                 "text-text hover:bg-surface-hover": E && !w && !k,
                 "bg-accent text-accent-fg": w,
-                "bg-surface-hover text-text": P && !w,
+                "bg-surface-hover text-text": j && !w,
                 "text-text-muted cursor-not-allowed": k
               }
             ),
@@ -803,7 +802,7 @@ const $t = () => /* @__PURE__ */ e(J, { icon: Ye, size: "md", color: "current" }
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: () => y(!1),
+            onClick: () => v(!1),
             className: "text-sm text-info-fg hover:underline",
             children: "Close"
           }
@@ -825,20 +824,20 @@ const $t = () => /* @__PURE__ */ e(J, { icon: Ye, size: "md", color: "current" }
     fullWidth: a = !1,
     options: l,
     placeholder: c,
-    containerClassName: f,
-    labelClassName: p,
+    containerClassName: h,
+    labelClassName: g,
     className: N,
     id: x,
     searchable: d,
-    multiple: h,
-    value: y,
+    multiple: f,
+    value: v,
     onChange: C,
-    allowCreate: g,
-    onCreateOption: v,
-    ...$
-  }, D) => {
-    const _ = x || `select-${Math.random().toString(36).substr(2, 9)}`, M = !!n, [q, V] = le.useState(!1), [I, W] = le.useState(""), H = le.useRef(null), X = le.useRef(null), Z = Ee(q, X, { matchWidth: !0 }), [Q, b] = le.useState(l);
-    le.useImperativeHandle(D, () => H.current), le.useEffect(() => {
+    allowCreate: y,
+    onCreateOption: p,
+    ...D
+  }, $) => {
+    const _ = x || `select-${Math.random().toString(36).substr(2, 9)}`, M = !!n, [q, V] = le.useState(!1), [I, W] = le.useState(""), H = le.useRef(null), X = le.useRef(null), Z = we(q, X, { matchWidth: !0 }), [Q, b] = le.useState(l);
+    le.useImperativeHandle($, () => H.current), le.useEffect(() => {
       const S = (A) => {
         H.current && !H.current.contains(A.target) && V(!1);
       };
@@ -852,8 +851,8 @@ const $t = () => /* @__PURE__ */ e(J, { icon: Ye, size: "md", color: "current" }
     ), E = le.useCallback(
       (S, A) => {
         const L = [...S], T = (U) => {
-          const j = (U ?? "").trim();
-          j && (m(L, j) || L.push({ value: j, label: j }));
+          const P = (U ?? "").trim();
+          P && (m(L, P) || L.push({ value: P, label: P }));
         };
         return Array.isArray(A) ? A.forEach(T) : T(A), L;
       },
@@ -864,32 +863,32 @@ const $t = () => /* @__PURE__ */ e(J, { icon: Ye, size: "md", color: "current" }
         const A = [...l];
         return S.forEach((L) => {
           !m(A, L.value) && !m(A, L.label) && A.push(L);
-        }), E(A, y);
+        }), E(A, v);
       });
-    }, [l, y, E, m]);
+    }, [l, v, E, m]);
     const w = (S) => {
-      if (h) {
-        const A = Array.isArray(y) ? y : [], L = A.includes(S) ? A.filter((T) => T !== S) : [...A, S];
+      if (f) {
+        const A = Array.isArray(v) ? v : [], L = A.includes(S) ? A.filter((T) => T !== S) : [...A, S];
         C?.(L);
       } else
         C?.(S), V(!1), W("");
-    }, P = h ? null : Q.find((S) => S.value === y), k = h ? Q.filter(
-      (S) => Array.isArray(y) && y.includes(S.value)
+    }, j = f ? null : Q.find((S) => S.value === v), k = f ? Q.filter(
+      (S) => Array.isArray(v) && v.includes(S.value)
     ) : [], ae = d && I ? Q.filter(
       (S) => S.label.toLowerCase().includes(I.toLowerCase())
-    ) : Q, ne = !!g && !!d && !!I.trim() && !m(Q, I), te = (S) => {
+    ) : Q, ne = !!y && !!d && !!I.trim() && !m(Q, I), te = (S) => {
       const A = S.trim();
       if (!A) return;
-      const L = v?.(A) ?? {
+      const L = p?.(A) ?? {
         value: A,
         label: A
       };
       if (m(Q, L.value) || m(Q, L.label)) {
-        w(L.value), W(""), h || V(!1);
+        w(L.value), W(""), f || V(!1);
         return;
       }
-      b((T) => [...T, L]), w(L.value), W(""), h || V(!1);
-    }, G = () => h ? k.length > 0 ? k.map((S) => S.label).join(", ") : c || "Select options" : P?.label || c || "Select an option";
+      b((T) => [...T, L]), w(L.value), W(""), f || V(!1);
+    }, G = () => f ? k.length > 0 ? k.map((S) => S.label).join(", ") : c || "Select options" : j?.label || c || "Select an option";
     return /* @__PURE__ */ i(
       "div",
       {
@@ -897,9 +896,9 @@ const $t = () => /* @__PURE__ */ e(J, { icon: Ye, size: "md", color: "current" }
         className: u(
           "relative flex flex-col",
           a && "w-full",
-          f
+          h
         ),
-        ...$,
+        ...D,
         children: [
           t && /* @__PURE__ */ e(
             "label",
@@ -909,7 +908,7 @@ const $t = () => /* @__PURE__ */ e(J, { icon: Ye, size: "md", color: "current" }
               className: u(
                 "block text-xs font-semibold uppercase tracking-label mb-1.5",
                 M ? "text-danger-fg" : "text-text-muted",
-                p
+                g
               ),
               children: t
             }
@@ -979,7 +978,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 && !h && /* @__PURE__ */ e(
+                c && !f && /* @__PURE__ */ e(
                   "li",
                   {
                     className: "cursor-pointer px-3 py-1.5 text-sm text-text-muted hover:bg-surface-hover",
@@ -990,7 +989,7 @@ const $t = () => /* @__PURE__ */ e(J, { icon: Ye, size: "md", color: "current" }
                   }
                 ),
                 ae.map((S) => {
-                  const A = h ? Array.isArray(y) && y.includes(S.value) : y === S.value;
+                  const A = f ? Array.isArray(v) && v.includes(S.value) : v === S.value;
                   return /* @__PURE__ */ e(
                     "li",
                     {
@@ -1002,7 +1001,7 @@ const $t = () => /* @__PURE__ */ e(J, { icon: Ye, size: "md", color: "current" }
                         A && "bg-accent-soft text-accent font-semibold"
                       ),
                       children: /* @__PURE__ */ i("div", { className: "flex items-center", children: [
-                        h && /* @__PURE__ */ e(
+                        f && /* @__PURE__ */ e(
                           "input",
                           {
                             type: "checkbox",
@@ -1050,22 +1049,22 @@ const Lt = {
     fullWidth: a = !1,
     startIcon: l,
     endIcon: c,
-    loading: f = !1,
-    containerClassName: p,
+    loading: h = !1,
+    containerClassName: g,
     labelClassName: N,
     className: x,
     id: d,
-    ...h
-  }, y) => {
-    const C = le.useId(), g = d || `textfield-${C}`, v = !!n, $ = n || r ? `${g}-description` : void 0;
-    return /* @__PURE__ */ i("div", { className: u("flex flex-col", a && "w-full", p), children: [
+    ...f
+  }, v) => {
+    const C = le.useId(), y = d || `textfield-${C}`, p = !!n, D = n || r ? `${y}-description` : void 0;
+    return /* @__PURE__ */ i("div", { className: u("flex flex-col", a && "w-full", g), children: [
       t && /* @__PURE__ */ e(
         "label",
         {
-          htmlFor: g,
+          htmlFor: y,
           className: u(
             Oe,
-            v ? "text-danger-fg" : "text-text-subtle",
+            p ? "text-danger-fg" : "text-text-subtle",
             N
           ),
           children: t
@@ -1076,10 +1075,10 @@ const Lt = {
         /* @__PURE__ */ e(
           "input",
           {
-            ref: y,
-            id: g,
-            "aria-invalid": v || void 0,
-            "aria-describedby": $,
+            ref: v,
+            id: y,
+            "aria-invalid": p || void 0,
+            "aria-describedby": D,
             className: u(
               "block w-full rounded-md border bg-surface-input text-text",
               "transition-colors duration-fast ease-out",
@@ -1088,14 +1087,14 @@ const Lt = {
               "disabled:cursor-not-allowed disabled:bg-surface-hover disabled:text-text-disabled",
               Lt[s],
               l && "pl-9",
-              (c || f) && "pr-9",
-              v ? "border-danger-border bg-danger-soft" : "border-border hover:border-border-strong",
+              (c || h) && "pr-9",
+              p ? "border-danger-border bg-danger-soft" : "border-border hover:border-border-strong",
               x
             ),
-            ...h
+            ...f
           }
         ),
-        (c || f) && /* @__PURE__ */ e("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 text-text-muted", children: f ? /* @__PURE__ */ e(
+        (c || h) && /* @__PURE__ */ e("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 text-text-muted", children: h ? /* @__PURE__ */ e(
           "span",
           {
             "aria-hidden": !0,
@@ -1106,8 +1105,8 @@ const Lt = {
       (n || r) && /* @__PURE__ */ e(
         "p",
         {
-          id: $,
-          className: u("mt-1 text-xs", v ? "text-danger-fg" : "text-text-subtle"),
+          id: D,
+          className: u("mt-1 text-xs", p ? "text-danger-fg" : "text-text-subtle"),
           children: n || r
         }
       )
@@ -1123,13 +1122,13 @@ function It({
   size: a = "md",
   placeholder: l,
   templatePlaceholder: c,
-  showTemplate: f = !0
+  showTemplate: h = !0
 }) {
-  const [p, N] = R([]);
+  const [g, N] = R([]);
   Y(() => {
     let d = !0;
-    return Promise.resolve(n?.()).then((h) => {
-      d && h && N(h.data ?? []);
+    return Promise.resolve(n?.()).then((f) => {
+      d && f && N(f.data ?? []);
     }).catch(() => {
     }), () => {
       d = !1;
@@ -1143,12 +1142,12 @@ function It({
         size: a,
         fullWidth: !0,
         value: x.folderId ?? "",
-        options: p.map((d) => ({ value: d.id, label: d.name })),
+        options: g.map((d) => ({ value: d.id, label: d.name })),
         placeholder: l ?? "Select a folder",
         onChange: (d) => r?.({ ...x, folderId: d })
       }
     ),
-    f && /* @__PURE__ */ e(
+    h && /* @__PURE__ */ e(
       he,
       {
         size: a,
@@ -1160,12 +1159,12 @@ function It({
     )
   ] });
 }
-const ue = (...t) => t.filter(Boolean).join(" "), Pt = (t) => /* @__PURE__ */ e(Ne, { ...t, strokeWidth: 1.5, "aria-hidden": !0 }), jt = (t) => /* @__PURE__ */ e(be, { ...t, strokeWidth: 1.5, "aria-hidden": !0 }), Ot = {
+const ue = (...t) => t.filter(Boolean).join(" "), jt = (t) => /* @__PURE__ */ e(Ne, { ...t, strokeWidth: 1.5, "aria-hidden": !0 }), Pt = (t) => /* @__PURE__ */ e(be, { ...t, strokeWidth: 1.5, "aria-hidden": !0 }), Ot = {
   sm: "h-control-sm px-3 text-sm",
   md: "h-control-md px-3 text-base",
   lg: "h-control-lg px-3 text-base",
   full: "h-control-md w-full px-3 text-base"
-}, ke = {
+}, Ce = {
   sm: "h-4 w-4",
   md: "h-5 w-5",
   lg: "h-6 w-6",
@@ -1177,41 +1176,41 @@ const ue = (...t) => t.filter(Boolean).join(" "), Pt = (t) => /* @__PURE__ */ e(
     error: n,
     size: s = "md",
     fullWidth: a = !1,
-    startIcon: l = /* @__PURE__ */ e(Pt, {}),
+    startIcon: l = /* @__PURE__ */ e(jt, {}),
     loading: c = !1,
-    containerClassName: f,
-    labelClassName: p,
+    containerClassName: h,
+    labelClassName: g,
     className: N,
     id: x,
     options: d,
-    onRemoteSearch: h,
-    onSelect: y,
+    onRemoteSearch: f,
+    onSelect: v,
     debounceTime: C = 500,
-    showAllOnOpen: g = !1,
-    value: v,
-    onChange: $,
-    ...D
+    showAllOnOpen: y = !1,
+    value: p,
+    onChange: D,
+    ...$
   }, _) => {
-    const M = x || `searchfield-${Math.random().toString(36).substr(2, 9)}`, q = !!n, V = se(null), I = se(null), [W, H] = R(v || ""), [X, Z] = R(!1), [Q, b] = R(!1), [m, E] = R(!1);
+    const M = x || `searchfield-${Math.random().toString(36).substr(2, 9)}`, q = !!n, V = se(null), I = se(null), [W, H] = R(p || ""), [X, Z] = R(!1), [Q, b] = R(!1), [m, E] = R(!1);
     Y(() => {
-      v !== void 0 && H(v);
-    }, [v]);
+      p !== void 0 && H(p);
+    }, [p]);
     const w = me(() => {
-      if (g && !m || !W) return d;
+      if (y && !m || !W) return d;
       const S = String(W).toLowerCase();
       return d.filter(
         (A) => String(A.label).toLowerCase().includes(S)
       );
-    }, [W, d, g, m]);
+    }, [W, d, y, m]);
     Y(() => {
-      if (!h || !W) {
+      if (!f || !W) {
         b(!1);
         return;
       }
       const S = setTimeout(async () => {
         b(!0);
         try {
-          await h(String(W));
+          await f(String(W));
         } catch (A) {
           console.error("Remote search failed:", A);
         } finally {
@@ -1221,19 +1220,19 @@ const ue = (...t) => t.filter(Boolean).join(" "), Pt = (t) => /* @__PURE__ */ e(
       return () => {
         clearTimeout(S), b(!1);
       };
-    }, [W, C, h]), Y(() => {
+    }, [W, C, f]), Y(() => {
       const S = (A) => {
         V.current && !V.current.contains(A.target) && Z(!1);
       };
       return document.addEventListener("mousedown", S), () => document.removeEventListener("mousedown", S);
     }, []);
-    const P = (S) => {
+    const j = (S) => {
       const A = S.target.value;
-      H(A), Z(!0), E(!0), $ && $(S);
+      H(A), Z(!0), E(!0), D && D(S);
     }, k = (S) => {
-      H(S.label), Z(!1), E(!1), y && y(S.value);
+      H(S.label), Z(!1), E(!1), v && v(S.value);
     }, ae = () => {
-      (d.length > 0 || h) && (Z(!0), E(!1));
+      (d.length > 0 || f) && (Z(!0), E(!1));
     }, ne = c || Q, te = X && (w.length > 0 || ne), G = me(() => _ || I, [_]);
     return /* @__PURE__ */ i(
       "div",
@@ -1241,7 +1240,7 @@ const ue = (...t) => t.filter(Boolean).join(" "), Pt = (t) => /* @__PURE__ */ e(
         className: ue(
           "flex flex-col",
           a ? "w-full" : "",
-          f || "",
+          h || "",
           "relative"
         ),
         ref: V,
@@ -1253,20 +1252,20 @@ const ue = (...t) => t.filter(Boolean).join(" "), Pt = (t) => /* @__PURE__ */ e(
               className: ue(
                 "block text-sm font-medium mb-1",
                 q ? "text-danger-fg" : "text-text",
-                p || ""
+                g || ""
               ),
               children: t
             }
           ),
           /* @__PURE__ */ i("div", { className: "relative", children: [
-            l && /* @__PURE__ */ e("div", { className: "absolute left-0 pl-3 flex items-center pointer-events-none h-full", children: /* @__PURE__ */ e("span", { className: ue("text-text-muted", ke[s]), children: l }) }),
+            l && /* @__PURE__ */ e("div", { className: "absolute left-0 pl-3 flex items-center pointer-events-none h-full", children: /* @__PURE__ */ e("span", { className: ue("text-text-muted", Ce[s]), children: l }) }),
             /* @__PURE__ */ e(
               "input",
               {
                 ref: G,
                 id: M,
                 value: W,
-                onChange: P,
+                onChange: j,
                 onFocus: ae,
                 className: ue(
                   // Base styles
@@ -1283,7 +1282,7 @@ const ue = (...t) => t.filter(Boolean).join(" "), Pt = (t) => /* @__PURE__ */ e(
                   q ? "border-danger-border text-danger-fg focus-visible:focus-ring" : "border-border text-text",
                   N || ""
                 ),
-                ...D
+                ...$
               }
             ),
             /* @__PURE__ */ e("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: ne || c ? (
@@ -1291,18 +1290,18 @@ const ue = (...t) => t.filter(Boolean).join(" "), Pt = (t) => /* @__PURE__ */ e(
               /* @__PURE__ */ e(
                 Ze,
                 {
-                  className: ue("animate-spin text-info-fg", ke[s]),
+                  className: ue("animate-spin text-info-fg", Ce[s]),
                   "aria-hidden": !0
                 }
               )
             ) : (
               // Dropdown Chevron
               /* @__PURE__ */ e(
-                jt,
+                Pt,
                 {
                   className: ue(
                     "text-text-muted cursor-pointer transition-transform",
-                    ke[s],
+                    Ce[s],
                     X ? "rotate-180" : "rotate-0"
                   ),
                   onClick: () => {
@@ -1340,7 +1339,7 @@ const ue = (...t) => t.filter(Boolean).join(" "), Pt = (t) => /* @__PURE__ */ e(
               children: n || r
             }
           ),
-          h && /* @__PURE__ */ i("p", { className: "mt-2 text-xs text-success-fg", children: [
+          f && /* @__PURE__ */ i("p", { className: "mt-2 text-xs text-success-fg", children: [
             "Huidige zoekterm (niet-gedebounced): ",
             String(W)
           ] })
@@ -1352,7 +1351,7 @@ const ue = (...t) => t.filter(Boolean).join(" "), Pt = (t) => /* @__PURE__ */ e(
 Bt.displayName = "SearchableTextField";
 const Ft = de(
   ({ checked: t, onChange: r, label: n, disabled: s = !1, className: a, ...l }, c) => {
-    const f = /* @__PURE__ */ e(
+    const h = /* @__PURE__ */ e(
       "span",
       {
         "aria-hidden": !0,
@@ -1391,12 +1390,12 @@ const Ft = de(
               role: "switch",
               checked: t,
               disabled: s,
-              onChange: (p) => r(p.target.checked),
+              onChange: (g) => r(g.target.checked),
               className: "peer sr-only",
               ...l
             }
           ),
-          /* @__PURE__ */ e("span", { className: "inline-flex rounded-full peer-focus-visible:focus-ring", children: f }),
+          /* @__PURE__ */ e("span", { className: "inline-flex rounded-full peer-focus-visible:focus-ring", children: h }),
           n && /* @__PURE__ */ e("span", { className: "text-sm text-text", children: n })
         ]
       }
@@ -1426,29 +1425,29 @@ 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, f) => /* @__PURE__ */ e(
+          children: Array.from({ length: s }).map((c, h) => /* @__PURE__ */ e(
             "div",
             {
               className: "h-4 w-2/3 rounded-sm bg-border-strong"
             },
-            `header-${f}`
+            `header-${h}`
           ))
         }
       ),
-      Array.from({ length: a }).map((c, f) => /* @__PURE__ */ e(
+      Array.from({ length: a }).map((c, h) => /* @__PURE__ */ e(
         "div",
         {
           className: "grid gap-2 border-t border-border-subtle p-3",
           style: { gridTemplateColumns: `repeat(${s}, minmax(0, 1fr))` },
-          children: Array.from({ length: s }).map((p, N) => /* @__PURE__ */ e(
+          children: Array.from({ length: s }).map((g, N) => /* @__PURE__ */ e(
             "div",
             {
               className: "h-4 w-full rounded-sm bg-surface-hover"
             },
-            `cell-${f}-${N}`
+            `cell-${h}-${N}`
           ))
         },
-        `row-${f}`
+        `row-${h}`
       ))
     ] })
   ] }) });
@@ -1461,11 +1460,11 @@ const Vt = ({
   placement: a = "bottom-start",
   disabled: l = !1,
   className: c,
-  showCheck: f = !0,
-  header: p
+  showCheck: h = !0,
+  header: g
 }) => {
-  const [N, x] = R(!1), [d, h] = R(null), [y, C] = R({ top: 0, left: 0 }), g = se(null), v = se(null), $ = se(null), D = se(null), _ = Ee(N, v, { placement: a }), M = se(null), q = () => Array.from(
-    D.current?.querySelectorAll("button[data-option-value]:not(:disabled)") ?? []
+  const [N, x] = R(!1), [d, f] = R(null), [v, C] = R({ top: 0, left: 0 }), y = se(null), p = se(null), D = se(null), $ = se(null), _ = we(N, p, { placement: a }), M = se(null), q = () => Array.from(
+    $.current?.querySelectorAll("button[data-option-value]:not(:disabled)") ?? []
   );
   Y(() => {
     N && q()[0]?.focus();
@@ -1475,26 +1474,26 @@ const Vt = ({
     const w = q();
     if (w.length === 0) return;
     m.preventDefault();
-    const P = w.indexOf(document.activeElement), k = m.key === "Home" ? 0 : m.key === "End" ? w.length - 1 : m.key === "ArrowDown" ? (P + 1) % w.length : (P - 1 + w.length) % w.length;
+    const j = w.indexOf(document.activeElement), k = m.key === "Home" ? 0 : m.key === "End" ? w.length - 1 : m.key === "ArrowDown" ? (j + 1) % w.length : (j - 1 + w.length) % w.length;
     w[k]?.focus();
   };
   Y(() => {
     const m = (E) => {
-      g.current && (!g.current.contains(E.target) || $.current && !$.current.contains(E.target)) && (x(!1), h(null), M.current && (clearTimeout(M.current), M.current = null));
+      y.current && (!y.current.contains(E.target) || D.current && !D.current.contains(E.target)) && (x(!1), f(null), M.current && (clearTimeout(M.current), M.current = null));
     };
     return N && document.addEventListener("mousedown", m), () => {
       document.removeEventListener("mousedown", m);
     };
   }, [N]), Y(() => {
     const m = (E) => {
-      E.key === "Escape" && (x(!1), h(null), v.current?.focus(), M.current && (clearTimeout(M.current), M.current = null));
+      E.key === "Escape" && (x(!1), f(null), p.current?.focus(), M.current && (clearTimeout(M.current), M.current = null));
     };
     return N && document.addEventListener("keydown", m), () => {
       document.removeEventListener("keydown", m);
     };
   }, [N]), Y(() => {
-    if (d && g.current) {
-      const m = g.current.querySelector(
+    if (d && y.current) {
+      const m = y.current.querySelector(
         `[data-option-value="${d}"]`
       );
       if (m) {
@@ -1509,17 +1508,17 @@ const Vt = ({
     M.current && clearTimeout(M.current);
   }, []);
   const I = (m) => {
-    m.stopPropagation(), !l && (x(!N), h(null), M.current && (clearTimeout(M.current), M.current = null));
+    m.stopPropagation(), !l && (x(!N), f(null), M.current && (clearTimeout(M.current), M.current = null));
   }, W = (m, E, w) => {
-    m.stopPropagation(), !E.disabled && !E.divider && (!E.children || E.children.length === 0) && (s?.(E.value, w), x(!1), h(null));
+    m.stopPropagation(), !E.disabled && !E.divider && (!E.children || E.children.length === 0) && (s?.(E.value, w), x(!1), f(null));
   }, H = (m) => {
-    M.current && (clearTimeout(M.current), M.current = null), m.children && m.children.length > 0 ? h(m.value) : h(null);
+    M.current && (clearTimeout(M.current), M.current = null), m.children && m.children.length > 0 ? f(m.value) : f(null);
   }, X = (m) => {
     m.children && m.children.length > 0 ? M.current = setTimeout(() => {
-      h(null);
-    }, 150) : h(null);
+      f(null);
+    }, 150) : f(null);
   }, Z = (m, E, w) => {
-    m.stopPropagation(), !E.disabled && !E.divider && (s?.(E.value, w), x(!1), h(null));
+    m.stopPropagation(), !E.disabled && !E.divider && (s?.(E.value, w), x(!1), f(null));
   }, Q = u(
     "fixed z-overlay min-w-menu bg-surface rounded-lg shadow-overlay border border-border",
     "max-h-60 overflow-auto"
@@ -1530,7 +1529,7 @@ const Vt = ({
   return /* @__PURE__ */ i(
     "div",
     {
-      ref: g,
+      ref: y,
       className: u(
         "relative flex flex-row items-center justify-center rounded-lg hover:bg-surface-hover",
         c
@@ -1539,7 +1538,7 @@ const Vt = ({
         /* @__PURE__ */ e(
           "button",
           {
-            ref: v,
+            ref: p,
             onClick: I,
             disabled: l,
             "aria-haspopup": "menu",
@@ -1550,8 +1549,8 @@ const Vt = ({
             children: t
           }
         ),
-        N && /* @__PURE__ */ e("div", { ref: D, className: Q, style: _, onKeyDown: V, children: /* @__PURE__ */ i("div", { className: "p-2", role: "menu", children: [
-          p && (typeof p == "string" ? /* @__PURE__ */ e("div", { className: "text-xs font-medium text-text-muted uppercase tracking-label px-3 py-2", children: p }) : p),
+        N && /* @__PURE__ */ e("div", { ref: $, className: Q, style: _, onKeyDown: V, children: /* @__PURE__ */ i("div", { className: "p-2", role: "menu", children: [
+          g && (typeof g == "string" ? /* @__PURE__ */ e("div", { className: "text-xs font-medium text-text-muted uppercase tracking-label px-3 py-2", children: g }) : g),
           r.map((m, E) => {
             if (m.divider)
               return /* @__PURE__ */ e(
@@ -1561,7 +1560,7 @@ const Vt = ({
                 },
                 `divider-${E}`
               );
-            const w = m.children && m.children.length > 0, P = d === m.value;
+            const w = m.children && m.children.length > 0, j = d === m.value;
             return /* @__PURE__ */ i("div", { className: "relative group", children: [
               /* @__PURE__ */ i(
                 "button",
@@ -1577,7 +1576,7 @@ const Vt = ({
                     "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": m.disabled,
-                      "bg-surface-hover": P && w
+                      "bg-surface-hover": j && w
                     }
                   ),
                   children: [
@@ -1589,27 +1588,27 @@ const Vt = ({
                       ] })
                     ] }),
                     /* @__PURE__ */ i("div", { className: "flex items-center space-x-2", children: [
-                      f && n === m.value && /* @__PURE__ */ e(Me, { className: "size-icon-md shrink-0 text-success-fg", "aria-hidden": !0 }),
+                      h && n === m.value && /* @__PURE__ */ e(Me, { className: "size-icon-md shrink-0 text-success-fg", "aria-hidden": !0 }),
                       w && /* @__PURE__ */ e("span", { className: "text-text-muted text-xs", children: "▶" })
                     ] })
                   ]
                 }
               ),
-              w && P && /* @__PURE__ */ e(
+              w && j && /* @__PURE__ */ e(
                 "div",
                 {
-                  ref: $,
+                  ref: D,
                   className: b,
                   style: {
-                    top: `${y.top}px`,
-                    left: `${y.left}px`
+                    top: `${v.top}px`,
+                    left: `${v.left}px`
                   },
                   onMouseEnter: () => {
-                    M.current && (clearTimeout(M.current), M.current = null), h(m.value);
+                    M.current && (clearTimeout(M.current), M.current = null), f(m.value);
                   },
                   onMouseLeave: () => {
                     M.current = setTimeout(() => {
-                      h(null);
+                      f(null);
                     }, 150);
                   },
                   children: /* @__PURE__ */ e("div", { className: "p-2", children: m.children.map((k, ae) => {
@@ -1647,7 +1646,7 @@ const Vt = ({
                               k.description && /* @__PURE__ */ e("span", { className: "text-xs text-text-muted", children: k.description })
                             ] })
                           ] }),
-                          f && ne && /* @__PURE__ */ e(Me, { className: "size-icon-md shrink-0 text-success-fg", "aria-hidden": !0 })
+                          h && ne && /* @__PURE__ */ e(Me, { className: "size-icon-md shrink-0 text-success-fg", "aria-hidden": !0 })
                         ]
                       },
                       k.value
@@ -1660,8 +1659,8 @@ const Vt = ({
           (() => {
             const m = r.reduce((E, w) => {
               if (w.divider) return E;
-              const P = w.children ? w.children.filter((k) => !k.divider).length : 0;
-              return E + 1 + P;
+              const j = w.children ? w.children.filter((k) => !k.divider).length : 0;
+              return E + 1 + j;
             }, 0);
             return m > 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: [
               m,
@@ -1672,12 +1671,12 @@ 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: Pe, 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" }), 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) => {
   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);
   };
   return t.type === "date" ? /* @__PURE__ */ e("div", { className: "flex items-center space-x-1 max-w-40", children: /* @__PURE__ */ e(
-    Ce,
+    Se,
     {
       size: "sm",
       value: t.value,
@@ -1727,18 +1726,18 @@ const Vt = ({
   searchPlaceholder: a = "Search...",
   filters: l = [],
   paginated: c = !1,
-  pageSizeOptions: f = [10, 25, 50, 100],
-  defaultPageSize: p = 10,
+  pageSizeOptions: h = [10, 25, 50, 100],
+  defaultPageSize: g = 10,
   actions: N = [],
   onRowClick: x,
   selectable: d = !1,
-  selectedRows: h = [],
-  onSelectionChange: y,
+  selectedRows: f = [],
+  onSelectionChange: v,
   getRowKey: C = (q, V) => V,
-  emptyContent: g,
-  hoverable: v = !0,
-  bordered: $ = !1,
-  striped: D = !1,
+  emptyContent: y,
+  hoverable: p = !0,
+  bordered: D = !1,
+  striped: $ = !1,
   className: _,
   rowClassName: M
 }) => {
@@ -1747,7 +1746,7 @@ const Vt = ({
     direction: null
   }), [H, X] = R({
     page: 0,
-    pageSize: p
+    pageSize: g
   }), Z = se(null), Q = me(() => {
     let o = t;
     if (s && q.trim()) {
@@ -1786,22 +1785,22 @@ const Vt = ({
     [r]
   ), w = ce((o) => {
     X((z) => ({ ...z, page: o }));
-  }, []), P = ce((o) => {
+  }, []), j = ce((o) => {
     X({ page: 0, pageSize: o });
   }, []), k = ce(
     (o, z) => {
-      if (!y) return;
+      if (!v) return;
       const B = C(o, 0);
-      h.map((F, O) => C(F, O)), y(z ? [...h, o] : h.filter(
-        (F, O) => C(h[O], O) !== B
+      f.map((F, O) => C(F, O)), v(z ? [...f, o] : f.filter(
+        (F, O) => C(f[O], O) !== B
       ));
     },
-    [h, y, C]
+    [f, v, C]
   ), ae = ce(
     (o) => {
-      y && y(o ? [...m] : []);
+      v && v(o ? [...m] : []);
     },
-    [m, y]
+    [m, v]
   );
   Y(() => {
     X((o) => ({ ...o, page: 0 }));
@@ -1810,21 +1809,21 @@ const Vt = ({
   }, [l.map((o) => o.value).join(",")]);
   const ne = b.length, te = Math.ceil(ne / H.pageSize), G = H.page * H.pageSize + 1, S = Math.min(G + H.pageSize - 1, ne), A = m.length > 0 && m.every((o) => {
     const z = C(o, 0);
-    return h.some(
+    return f.some(
       (B, F) => C(B, F) === z
     );
   }), L = m.some((o) => {
     const z = C(o, 0);
-    return h.some(
+    return f.some(
       (B, F) => C(B, F) === z
     );
   }), T = u(
     "w-full text-sm leading-5 text-text border-collapse",
     _
-  ), U = u("bg-surface"), j = u(
+  ), U = u("bg-surface"), P = u(
     "text-text p-3 border-b border-border"
   ), K = u("h-row-lg", {
-    "hover:bg-surface-sunk": v,
+    "hover:bg-surface-sunk": p,
     "cursor-pointer": x
   });
   return /* @__PURE__ */ i("div", { className: "space-y-4", children: [
@@ -1852,7 +1851,7 @@ const Vt = ({
       ) }),
       /* @__PURE__ */ i("table", { ref: Z, className: u(T, "min-w-full"), children: [
         /* @__PURE__ */ e("thead", { className: U, children: /* @__PURE__ */ i("tr", { children: [
-          d && /* @__PURE__ */ e("th", { className: u(j, "w-12"), children: /* @__PURE__ */ e(
+          d && /* @__PURE__ */ e("th", { className: u(P, "w-12"), children: /* @__PURE__ */ e(
             "input",
             {
               type: "checkbox",
@@ -1868,7 +1867,7 @@ const Vt = ({
             "th",
             {
               className: u(
-                j,
+                P,
                 "font-semibold text-xs text-text-muted uppercase tracking-label",
                 "group",
                 {
@@ -1911,20 +1910,20 @@ const Vt = ({
             },
             o.id
           )),
-          N.length > 0 && /* @__PURE__ */ e("th", { className: u(j, "w-20"), children: /* @__PURE__ */ e("span", { className: "sr-only", children: "Actions" }) })
+          N.length > 0 && /* @__PURE__ */ e("th", { className: u(P, "w-20"), children: /* @__PURE__ */ e("span", { className: "sr-only", children: "Actions" }) })
         ] }) }),
         /* @__PURE__ */ e("tbody", { children: m.length === 0 || n ? !n && /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e(
           "td",
           {
             colSpan: r.length + (d ? 1 : 0) + (N.length > 0 ? 1 : 0),
             className: u(
-              j,
+              P,
               "text-center py-8 text-text-muted"
             ),
-            children: g || "No data available"
+            children: y || "No data available"
           }
         ) }) : m.map((o, z) => {
-          const B = C(o, z), F = h.some(
+          const B = C(o, z), F = f.some(
             (O, re) => C(O, re) === B
           );
           return /* @__PURE__ */ i(
@@ -1939,7 +1938,7 @@ const Vt = ({
                 O.stopPropagation(), x?.(o, z);
               },
               children: [
-                d && /* @__PURE__ */ e("td", { className: j, children: /* @__PURE__ */ e(
+                d && /* @__PURE__ */ e("td", { className: P, children: /* @__PURE__ */ e(
                   "input",
                   {
                     type: "checkbox",
@@ -1955,7 +1954,7 @@ const Vt = ({
                   return /* @__PURE__ */ e(
                     "td",
                     {
-                      className: u(j, {
+                      className: u(P, {
                         "text-left": O.align === "left" || !O.align,
                         "text-center": O.align === "center",
                         "text-right": O.align === "right",
@@ -1967,7 +1966,7 @@ const Vt = ({
                     O.id
                   );
                 }),
-                N.length > 0 && /* @__PURE__ */ e("td", { className: j, children: /* @__PURE__ */ e(
+                N.length > 0 && /* @__PURE__ */ e("td", { className: P, children: /* @__PURE__ */ e(
                   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: [
@@ -2013,9 +2012,9 @@ const Vt = ({
             "select",
             {
               value: H.pageSize,
-              onChange: (o) => P(Number(o.target.value)),
+              onChange: (o) => j(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: f.map((o) => /* @__PURE__ */ e("option", { value: o, children: o }, o))
+              children: h.map((o) => /* @__PURE__ */ e("option", { value: o, children: o }, o))
             }
           )
         ] })
@@ -2080,31 +2079,31 @@ const Vt = ({
   onTabChange: n,
   className: s
 }) => {
-  const [a, l] = R(t[0]?.id || ""), c = r || a, f = (p) => {
-    n ? n(p) : l(p);
+  const [a, l] = R(t[0]?.id || ""), c = r || a, h = (g) => {
+    n ? n(g) : l(g);
   };
-  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((p) => /* @__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((g) => /* @__PURE__ */ e(
     "button",
     {
-      onClick: () => !p.disabled && f(p.id),
-      disabled: p.disabled,
+      onClick: () => !g.disabled && h(g.id),
+      disabled: g.disabled,
       className: u(
         "border-b-2 py-2 px-1 text-sm font-medium transition-colors duration-fast",
         {
-          "border-accent-border text-text": c === p.id,
-          "border-transparent text-text-muted hover:text-text": c !== p.id && !p.disabled,
-          "border-transparent text-disabled cursor-not-allowed": p.disabled
+          "border-accent-border text-text": c === g.id,
+          "border-transparent text-text-muted hover:text-text": c !== g.id && !g.disabled,
+          "border-transparent text-disabled cursor-not-allowed": g.disabled
         }
       ),
       children: /* @__PURE__ */ i("span", { className: "flex items-center gap-2", children: [
-        p.label,
-        p.badge && /* @__PURE__ */ e("span", { className: u(
+        g.label,
+        g.badge && /* @__PURE__ */ e("span", { className: u(
           "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium",
-          c === p.id ? "bg-accent-soft text-accent" : "bg-surface-hover text-text-muted"
-        ), children: p.badge })
+          c === g.id ? "bg-accent-soft text-accent" : "bg-surface-hover text-text-muted"
+        ), children: g.badge })
       ] })
     },
-    p.id
+    g.id
   )) }) });
 }, Xt = ({
   items: t,
@@ -2115,14 +2114,14 @@ const Vt = ({
   size: l = "md",
   className: c
 }) => {
-  const [f, p] = R(
+  const [h, g] = R(
     r || n || t[0]?.id || ""
-  ), N = n || f, x = (g) => {
-    s ? s(g) : p(g);
+  ), N = n || h, x = (y) => {
+    s ? s(y) : g(y);
   }, d = {
     activeTab: N,
     setActiveTab: x
-  }, h = t.find((g) => g.id === N), y = u(
+  }, f = t.find((y) => y.id === N), v = u(
     "flex",
     {
       "border-b border-border px-2": a === "default" || a === "underline",
@@ -2131,8 +2130,8 @@ const Vt = ({
       "space-x-8": a === "default" || a === "underline"
     },
     c
-  ), C = (g, v) => {
-    const $ = "transition-colors duration-fast font-medium", D = {
+  ), C = (y, p) => {
+    const D = "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"
@@ -2144,44 +2143,44 @@ const Vt = ({
       // Underline variant
       "border-b-2 pb-2": a === "underline"
     }, M = {
-      "opacity-50 cursor-not-allowed": g.disabled,
-      "cursor-pointer": !g.disabled
-    }, q = v ? {
+      "opacity-50 cursor-not-allowed": y.disabled,
+      "cursor-pointer": !y.disabled
+    }, q = p ? {
       "border-accent-border text-text": a === "default" || a === "underline",
       "bg-surface text-text shadow-none": a === "pills"
-    } : {}, V = !v && !g.disabled ? {
+    } : {}, V = !p && !y.disabled ? {
       "border-transparent text-text-muted hover:text-text": a === "default",
       "text-text-muted hover:text-text": a === "pills",
       "border-transparent text-text-muted hover:text-text hover:border-border": a === "underline"
     } : {};
-    return u($, D, _, M, q, V);
+    return u(D, $, _, M, q, V);
   };
   return /* @__PURE__ */ e(Yt.Provider, { value: d, children: /* @__PURE__ */ i("div", { children: [
-    /* @__PURE__ */ e("div", { className: y, role: "tablist", children: t.map((g) => /* @__PURE__ */ e(
+    /* @__PURE__ */ e("div", { className: v, role: "tablist", children: t.map((y) => /* @__PURE__ */ e(
       "button",
       {
         type: "button",
         role: "tab",
-        "aria-selected": N === g.id,
-        "aria-controls": `tabpanel-${g.id}`,
-        disabled: g.disabled,
-        onClick: () => !g.disabled && x(g.id),
-        className: C(g, N === g.id),
+        "aria-selected": N === y.id,
+        "aria-controls": `tabpanel-${y.id}`,
+        disabled: y.disabled,
+        onClick: () => !y.disabled && x(y.id),
+        className: C(y, N === y.id),
         children: /* @__PURE__ */ i("span", { className: "flex items-center gap-2", children: [
-          g.label,
-          g.badge && /* @__PURE__ */ e("span", { className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-surface-hover text-text-muted", children: g.badge })
+          y.label,
+          y.badge && /* @__PURE__ */ e("span", { className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-surface-hover text-text-muted", children: y.badge })
         ] })
       },
-      g.id
+      y.id
     )) }),
-    h?.content && /* @__PURE__ */ e(
+    f?.content && /* @__PURE__ */ e(
       "div",
       {
         role: "tabpanel",
         id: `tabpanel-${N}`,
         "aria-labelledby": `tab-${N}`,
         className: "mt-4",
-        children: h.content
+        children: f.content
       }
     )
   ] }) });
@@ -2200,22 +2199,22 @@ function Fe({
   closeOnBackdropClick: a = !0,
   closeOnEscape: l = !0,
   className: c,
-  backdropClassName: f,
-  children: p,
+  backdropClassName: h,
+  children: g,
   footer: N,
   showCloseButton: x = !0
 }) {
-  const d = se(null), h = se(null);
+  const d = se(null), f = se(null);
   Y(() => {
     if (!t || !l) return;
-    const C = (g) => {
-      g.key === "Escape" && r();
+    const C = (y) => {
+      y.key === "Escape" && r();
     };
     return document.addEventListener("keydown", C), () => document.removeEventListener("keydown", C);
-  }, [t, l, r]), Y(() => (t ? (h.current = document.activeElement, d.current && d.current.focus(), document.body.style.overflow = "hidden") : (h.current && h.current.focus(), document.body.style.overflow = ""), () => {
+  }, [t, l, r]), Y(() => (t ? (f.current = document.activeElement, d.current && d.current.focus(), document.body.style.overflow = "hidden") : (f.current && f.current.focus(), document.body.style.overflow = ""), () => {
     document.body.style.overflow = "";
   }), [t]);
-  const y = (C) => {
+  const v = (C) => {
     a && C.target === C.currentTarget && r();
   };
   return t ? /* @__PURE__ */ e(
@@ -2225,9 +2224,9 @@ function Fe({
         "fixed inset-0 z-modal flex items-center justify-center p-4",
         "bg-scrim",
         // 'animate-fade-in',
-        f
+        h
       ),
-      onClick: y,
+      onClick: v,
       children: /* @__PURE__ */ i(
         "div",
         {
@@ -2263,7 +2262,7 @@ function Fe({
                 }
               )
             ] }),
-            /* @__PURE__ */ e("div", { className: "p-6", children: p }),
+            /* @__PURE__ */ e("div", { className: "p-6", children: g }),
             N && /* @__PURE__ */ e("div", { className: "px-6 py-4", children: N })
           ]
         }
@@ -2311,33 +2310,33 @@ const Qt = {
   align: a = "left",
   truncate: l = !1,
   italic: c = !1,
-  underline: f = !1,
-  lineHeight: p = "normal",
+  underline: h = !1,
+  lineHeight: g = "normal",
   as: N,
   className: x,
   children: d,
-  ...h
+  ...f
 }) => {
-  const y = N || sr(t), C = t === "caption", g = t === "label", v = t === "code", $ = u(
+  const v = N || sr(t), C = t === "caption", y = t === "label", p = t === "code", D = u(
     "font-sans",
     // Variant — caption and label pin their own size/weight
     C && "text-xs text-text-subtle",
-    g && "text-xs font-semibold uppercase tracking-label text-text-subtle",
-    v && "font-mono text-sm rounded-sm bg-surface-hover px-1 py-0.5",
+    y && "text-xs font-semibold uppercase tracking-label text-text-subtle",
+    p && "font-mono text-sm rounded-sm bg-surface-hover px-1 py-0.5",
     // Size — only where the variant does not pin it
-    !C && !g && !v && Qt[r],
+    !C && !y && !p && Qt[r],
     // Weight — label owns its weight
-    !g && er[n],
+    !y && er[n],
     tr[s],
     rr[a],
     // Line height only overrides the body variant
-    t === "body" && nr[p],
+    t === "body" && nr[g],
     c && "italic",
-    f && "underline",
+    h && "underline",
     l && "truncate",
     x
   );
-  return /* @__PURE__ */ e(y, { className: $, ...h, children: d });
+  return /* @__PURE__ */ e(v, { className: D, ...f, children: d });
 };
 function sr(t) {
   return {
@@ -2355,35 +2354,35 @@ const ar = ({
   error: a,
   disabled: l,
   accept: c,
-  onListFiles: f,
-  onListMounts: p,
+  onListFiles: h,
+  onListMounts: g,
   onUploadFile: N,
   onDownloadFile: x,
   onRegisterFile: d
 }) => {
-  const [h, y] = R(!1), [C, g] = R([]), [v, $] = R(null), [D, _] = R("/"), [M, q] = R([]), [V, I] = R(!1), [W, H] = R(""), [X, Z] = R(
+  const [f, v] = R(!1), [C, y] = R([]), [p, D] = R(null), [$, _] = R("/"), [M, q] = R([]), [V, I] = R(!1), [W, H] = R(""), [X, Z] = R(
     typeof t == "object" ? t : null
   ), [Q, b] = R(!1), [m, E] = R(""), w = se(null);
   Y(() => {
-    h && P();
-  }, [h]), Y(() => {
-    h && v && k();
-  }, [h, v, D, W]);
-  const P = async () => {
+    f && j();
+  }, [f]), Y(() => {
+    f && p && k();
+  }, [f, p, $, W]);
+  const j = async () => {
     I(!0);
     try {
-      const o = await p?.();
-      o?.data && g(o.data);
+      const o = await g?.();
+      o?.data && y(o.data);
     } catch (o) {
       console.error("Failed to load mounts", o);
     } finally {
       I(!1);
     }
   }, k = async () => {
-    if (v) {
+    if (p) {
       I(!0);
       try {
-        const o = await f?.({ mountId: v.id, name: W, path: D });
+        const o = await h?.({ mountId: p.id, name: W, path: $ });
         o?.data && q(o.data);
       } catch (o) {
         console.error("Failed to load files", o);
@@ -2407,7 +2406,7 @@ const ar = ({
           providerKey: z.name,
           ownerId: "me"
         };
-        Z(O), r(O, F), y(!1);
+        Z(O), r(O, F), v(!1);
       } catch (B) {
         console.error("Local file selection failed", B);
       } finally {
@@ -2416,19 +2415,19 @@ const ar = ({
     }
   }, ne = async (o) => {
     const z = o.target.files?.[0];
-    if (!(!z || !v)) {
+    if (!(!z || !p)) {
       I(!0);
       try {
         const B = await z.arrayBuffer(), F = await N?.({
           file: new Uint8Array(B),
           filename: z.name,
           mimeType: z.type || "application/octet-stream",
-          mountId: v.id,
-          path: D
+          mountId: p.id,
+          path: $
         });
         if (F?.data) {
           const O = F.data;
-          Z(O), r(O, new Uint8Array(B)), y(!1);
+          Z(O), r(O, new Uint8Array(B)), v(!1);
         }
       } catch (B) {
         console.error("Upload failed", B);
@@ -2437,17 +2436,17 @@ const ar = ({
       }
     }
   }, te = async () => {
-    if (!(!m || !v)) {
+    if (!(!m || !p)) {
       I(!0);
       try {
-        const o = `${D}${m}/`;
+        const o = `${$}${m}/`;
         d && (await d({
           name: m,
           type: "folder",
-          path: D,
+          path: $,
           mimeType: "application/x-directory",
           size: 0,
-          mountId: v.id,
+          mountId: p.id,
           providerKey: o,
           ownerId: "me"
         }), await k()), b(!1), E("");
@@ -2461,7 +2460,7 @@ const ar = ({
     I(!0);
     try {
       const z = await x?.(o.id);
-      Z(o), r(o, z), y(!1);
+      Z(o), r(o, z), v(!1);
     } catch (z) {
       console.error("Failed to download file", z);
     } finally {
@@ -2473,19 +2472,19 @@ const ar = ({
     const o = /* @__PURE__ */ new Set(), z = [];
     return M.forEach((B) => {
       if (B.type === "folder") {
-        B.path === D && o.add(B.name);
+        B.path === $ && o.add(B.name);
         return;
       }
-      const F = B.providerKey || B.name, re = (D ? F.substring(D.length) : F).split("/").filter((ie) => ie !== "");
+      const F = B.providerKey || B.name, re = ($ ? F.substring($.length) : F).split("/").filter((ie) => ie !== "");
       re.length > 1 ? o.add(re[0]) : re.length === 1 && z.push(B);
     }), {
       folders: Array.from(o).sort(),
       files: z.sort((B, F) => B.name.localeCompare(F.name))
     };
-  }, [M, D]), L = (o) => {
+  }, [M, $]), L = (o) => {
     _((z) => `${z}${o}/`);
   }, T = () => {
-    const o = D.split("/").filter((z) => z !== "");
+    const o = $.split("/").filter((z) => z !== "");
     o.pop(), o.length === 0 ? _("/") : _(`${o.join("/")}/`);
   }, U = me(() => {
     const o = A.folders.map((z) => ({
@@ -2499,7 +2498,7 @@ const ar = ({
         type: "file"
       });
     }), o;
-  }, [A]), j = [
+  }, [A]), P = [
     {
       id: "name",
       header: "Name",
@@ -2508,7 +2507,7 @@ const ar = ({
         /* @__PURE__ */ e(
           J,
           {
-            icon: z.type === "folder" ? De : we,
+            icon: z.type === "folder" ? De : ke,
             size: "sm",
             color: z.type === "folder" ? "warning" : "secondary"
           }
@@ -2559,7 +2558,7 @@ const ar = ({
       header: "",
       accessor: "id",
       align: "right",
-      cell: (o, z) => /* @__PURE__ */ e(ee, { size: "sm", variant: "outline", onClick: () => $(z), children: "Open" })
+      cell: (o, z) => /* @__PURE__ */ e(ee, { size: "sm", variant: "outline", onClick: () => D(z), children: "Open" })
     }
   ];
   return /* @__PURE__ */ i("div", { className: "space-y-1", children: [
@@ -2567,7 +2566,7 @@ const ar = ({
     /* @__PURE__ */ i(
       "div",
       {
-        onClick: () => !l && y(!0),
+        onClick: () => !l && v(!0),
         className: u(
           "flex items-center gap-3 px-3 py-2 border rounded-lg cursor-pointer transition-colors",
           "hover:border-border-strong bg-surface",
@@ -2575,7 +2574,7 @@ const ar = ({
           l && "opacity-50 cursor-not-allowed bg-surface-sunk"
         ),
         children: [
-          /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: /* @__PURE__ */ e(J, { icon: X ? we : $e, color: X ? "primary" : "secondary" }) }),
+          /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: /* @__PURE__ */ e(J, { icon: X ? ke : $e, color: X ? "primary" : "secondary" }) }),
           /* @__PURE__ */ e("div", { className: "flex-grow truncate", children: X ? /* @__PURE__ */ e("span", { className: "text-sm text-text font-medium", children: X.name }) : /* @__PURE__ */ e("span", { className: "text-sm text-text-muted", children: s }) }),
           X && !l && /* @__PURE__ */ e(
             "button",
@@ -2592,11 +2591,11 @@ const ar = ({
     /* @__PURE__ */ e(
       Fe,
       {
-        open: h,
+        open: f,
         onClose: () => {
-          y(!1), $(null), _("/"), b(!1);
+          v(!1), D(null), _("/"), b(!1);
         },
-        title: v ? `Explorer: ${v.name}` : "Select Storage Mount",
+        title: p ? `Explorer: ${p.name}` : "Select Storage Mount",
         size: "lg",
         children: /* @__PURE__ */ e(
           Xt,
@@ -2606,7 +2605,7 @@ const ar = ({
               {
                 id: "remote",
                 label: "Platform Storage",
-                content: /* @__PURE__ */ e("div", { className: "space-y-4", children: v ? /* @__PURE__ */ i(fe, { children: [
+                content: /* @__PURE__ */ e("div", { className: "space-y-4", children: p ? /* @__PURE__ */ i(fe, { children: [
                   /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center gap-2", children: [
                     /* @__PURE__ */ e(
                       ee,
@@ -2614,13 +2613,13 @@ const ar = ({
                         variant: "ghost",
                         size: "sm",
                         onClick: () => {
-                          D && D !== "/" ? T() : $(null);
+                          $ && $ !== "/" ? T() : D(null);
                         },
-                        leftIcon: /* @__PURE__ */ e(J, { icon: ze, size: "xs" }),
-                        children: D ? "Back" : "Back to Mounts"
+                        leftIcon: /* @__PURE__ */ e(J, { icon: Ee, size: "xs" }),
+                        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,
                       {
@@ -2685,7 +2684,7 @@ const ar = ({
                     Te,
                     {
                       data: U,
-                      columns: j,
+                      columns: P,
                       loading: V,
                       emptyContent: "This folder is empty",
                       onRowClick: (o) => o.type === "folder" ? L(o.name) : G(o)
@@ -2698,7 +2697,7 @@ const ar = ({
                     columns: K,
                     loading: V,
                     emptyContent: "No storage mounts configured",
-                    onRowClick: (o) => $(o)
+                    onRowClick: (o) => D(o)
                   }
                 ) }) })
               },
@@ -2706,7 +2705,7 @@ const ar = ({
                 id: "local",
                 label: "Local File",
                 content: /* @__PURE__ */ e("div", { className: "space-y-6", children: /* @__PURE__ */ i("div", { className: "flex flex-col items-center justify-center py-12 border-2 border-dashed border-border rounded-xl bg-surface-sunk/50", children: [
-                  /* @__PURE__ */ e("div", { className: "p-4 bg-accent-soft rounded-full mb-4", children: /* @__PURE__ */ e(J, { icon: we, size: "xl", color: "primary" }) }),
+                  /* @__PURE__ */ e("div", { className: "p-4 bg-accent-soft rounded-full mb-4", children: /* @__PURE__ */ e(J, { icon: ke, size: "xl", color: "primary" }) }),
                   /* @__PURE__ */ e(oe, { variant: "label", size: "lg", weight: "semibold", children: "Select a file from your computer" }),
                   /* @__PURE__ */ i(oe, { variant: "body", size: "sm", className: "text-text-muted mt-1 mb-6 text-center max-w-xs", children: [
                     "This file will be used directly in the form and will ",
@@ -2739,7 +2738,7 @@ const ar = ({
   md: "px-3 py-2 text-base",
   lg: "px-3 py-2 text-md",
   full: "px-3 py-2 text-md"
-}, Se = de(
+}, ze = de(
   ({
     label: t,
     helperText: r,
@@ -2748,13 +2747,13 @@ const ar = ({
     fullWidth: a = !1,
     loading: l = !1,
     containerClassName: c,
-    labelClassName: f,
-    className: p,
+    labelClassName: h,
+    className: g,
     id: N,
     rows: x = 4,
     ...d
-  }, h) => {
-    const y = le.useId(), C = N || `textarea-${y}`, g = !!n, v = n || r ? `${C}-description` : void 0;
+  }, f) => {
+    const v = le.useId(), C = N || `textarea-${v}`, y = !!n, p = n || r ? `${C}-description` : void 0;
     return /* @__PURE__ */ i("div", { className: u("flex flex-col", a && "w-full", c), children: [
       t && /* @__PURE__ */ e(
         "label",
@@ -2762,8 +2761,8 @@ const ar = ({
           htmlFor: C,
           className: u(
             Oe,
-            g ? "text-danger-fg" : "text-text-subtle",
-            f
+            y ? "text-danger-fg" : "text-text-subtle",
+            h
           ),
           children: t
         }
@@ -2772,11 +2771,11 @@ const ar = ({
         /* @__PURE__ */ e(
           "textarea",
           {
-            ref: h,
+            ref: f,
             id: C,
             rows: x,
-            "aria-invalid": g || void 0,
-            "aria-describedby": v,
+            "aria-invalid": y || void 0,
+            "aria-describedby": p,
             className: u(
               "block w-full resize-y rounded-md border bg-surface-input text-text",
               "transition-colors duration-fast ease-out",
@@ -2784,8 +2783,8 @@ const ar = ({
               "focus-visible:outline-none focus-visible:focus-ring",
               "disabled:cursor-not-allowed disabled:bg-surface-hover disabled:text-text-disabled",
               lr[s],
-              g ? "border-danger-border bg-danger-soft" : "border-border hover:border-border-strong",
-              p
+              y ? "border-danger-border bg-danger-soft" : "border-border hover:border-border-strong",
+              g
             ),
             ...d
           }
@@ -2801,15 +2800,15 @@ const ar = ({
       (n || r) && /* @__PURE__ */ e(
         "p",
         {
-          id: v,
-          className: u("mt-1 text-xs", g ? "text-danger-fg" : "text-text-subtle"),
+          id: p,
+          className: u("mt-1 text-xs", y ? "text-danger-fg" : "text-text-subtle"),
           children: n || r
         }
       )
     ] });
   }
 );
-Se.displayName = "TextArea";
+ze.displayName = "TextArea";
 function Ae(t, r) {
   return r.split(".").reduce(
     (n, s) => n && typeof n == "object" && s in n ? n[s] : void 0,
@@ -2820,8 +2819,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 f = s[c], p = l[f];
-    l[f] = p && typeof p == "object" ? Array.isArray(p) ? [...p] : { ...p } : {}, l = l[f];
+    const h = s[c], g = l[h];
+    l[h] = g && typeof g == "object" ? Array.isArray(g) ? [...g] : { ...g } : {}, l = l[h];
   }
   return l[s[s.length - 1]] = n, a;
 }
@@ -2843,23 +2842,23 @@ const Qr = ({
   onChange: a,
   transform: l,
   validate: c,
-  submitButton: f = { label: "Submit", variant: "primary" },
-  cancelButton: p = { label: "Cancel", variant: "outline" },
+  submitButton: h = { label: "Submit", variant: "primary" },
+  cancelButton: g = { label: "Cancel", variant: "outline" },
   showButtons: N = !0,
   layout: x = "vertical",
   size: d = "md",
-  loading: h = !1,
-  className: y,
+  loading: f = !1,
+  className: v,
   ref: C,
-  sdk: g
+  sdk: y
 }) => {
-  const [v, $] = R(r || {}), [D, _] = R({}), [M, q] = R({});
+  const [p, D] = R(r || {}), [$, _] = R({}), [M, q] = R({});
   Y(() => {
-    r && $({ ...r });
+    r && D({ ...r });
   }, [r]);
   const V = ce(
     (b, m, E) => {
-      const w = t.flatMap((P) => P.items).find((P) => P.name === b);
+      const w = t.flatMap((j) => j.items).find((j) => j.name === b);
       if (!w) return null;
       if (w.required && (m == null || m === ""))
         return `${w.label} is required`;
@@ -2869,7 +2868,7 @@ const Qr = ({
         if (m && !Array.isArray(m))
           return `${w.label} must be an array.`;
         if (Array.isArray(m) && w.arrayFields) {
-          const P = [];
+          const j = [];
           let k = !1;
           if (m.forEach((ae, ne) => {
             const te = {};
@@ -2882,9 +2881,9 @@ const Qr = ({
                 A && (te[G.name] = A, k = !0);
               }
             }
-            P[ne] = te;
+            j[ne] = te;
           }), k)
-            return JSON.stringify(P);
+            return JSON.stringify(j);
         }
       }
       return w.validator ? w.validator(m, E) : null;
@@ -2893,45 +2892,45 @@ const Qr = ({
   ), I = ce(
     (b, m) => {
       let E = or(
-        v,
+        p,
         b,
         m
       );
-      t.flatMap((k) => k.items).find((k) => k.name === b)?.removeIfEmpty && (m == null || m === "") && (E = cr(E, b)), $(E), q((k) => ({ ...k, [b]: !0 }));
-      const P = V(b, m, E);
+      t.flatMap((k) => k.items).find((k) => k.name === b)?.removeIfEmpty && (m == null || m === "") && (E = cr(E, b)), D(E), q((k) => ({ ...k, [b]: !0 }));
+      const j = V(b, m, E);
       _((k) => ({
         ...k,
-        [b]: P || ""
+        [b]: j || ""
       })), a?.(E, b);
     },
-    [v, t, V, a]
+    [p, t, V, a]
   ), W = ce(
     async (b) => {
-      if (b.preventDefault(), h) return;
-      const m = {}, E = t.flatMap((P) => P.items);
-      for (const P of E) {
-        if (P.hidden || P.conditional && !P.conditional(v))
+      if (b.preventDefault(), f) return;
+      const m = {}, E = t.flatMap((j) => j.items);
+      for (const j of E) {
+        if (j.hidden || j.conditional && !j.conditional(p))
           continue;
         const k = V(
-          P.name,
-          Ae(v, P.name),
-          v
+          j.name,
+          Ae(p, j.name),
+          p
         );
-        k && (m[P.name] = k);
+        k && (m[j.name] = k);
       }
       if (c) {
-        const P = c(v);
-        P && Object.assign(m, P);
+        const j = c(p);
+        j && Object.assign(m, j);
       }
-      if (_(m), Object.keys(m).some((P) => m[P]))
+      if (_(m), Object.keys(m).some((j) => m[j]))
         return;
-      const w = l ? l(v) : v;
-      await n?.(v, w);
+      const w = l ? l(p) : p;
+      await n?.(p, w);
     },
-    [v, t, V, c, l, n, h]
+    [p, t, V, c, l, n, f]
   ), H = ce(
     (b) => {
-      const m = Ae(v, b.name), E = M[b.name] ? D[b.name] : void 0, w = b.disabled || h, P = {
+      const m = Ae(p, b.name), E = M[b.name] ? $[b.name] : void 0, w = b.disabled || f, j = {
         value: m || "",
         disabled: w,
         required: b.required,
@@ -2948,7 +2947,7 @@ const Qr = ({
           return /* @__PURE__ */ e(
             he,
             {
-              ...P,
+              ...j,
               onChange: (k) => I(b.name, k.target.value),
               type: b.textType || b.type,
               autoComplete: b.autocomplete,
@@ -2958,9 +2957,9 @@ const Qr = ({
           );
         case "textarea":
           return /* @__PURE__ */ e(
-            Se,
+            ze,
             {
-              ...P,
+              ...j,
               onChange: (k) => I(b.name, k.target.value),
               rows: 4,
               error: E,
@@ -2971,7 +2970,7 @@ const Qr = ({
           return /* @__PURE__ */ e(
             pe,
             {
-              ...P,
+              ...j,
               onChange: (k) => I(b.name, k),
               options: (b.options || []).map((k) => ({
                 ...k,
@@ -2988,7 +2987,7 @@ const Qr = ({
           return /* @__PURE__ */ e(
             xe,
             {
-              ...P,
+              ...j,
               checked: !!m,
               onChange: (k) => I(b.name, k.target.checked),
               size: d
@@ -3019,9 +3018,9 @@ const Qr = ({
           )) });
         case "date":
           return /* @__PURE__ */ e(
-            Ce,
+            Se,
             {
-              ...P,
+              ...j,
               value: m ? new Date(m) : null,
               onChange: (k) => I(b.name, k),
               size: d
@@ -3031,29 +3030,29 @@ const Qr = ({
           return /* @__PURE__ */ e(
             ar,
             {
-              ...P,
+              ...j,
               value: m,
               onChange: (k) => I(b.name, k),
               error: E,
-              onListFiles: (k) => g?.http.invoke({
+              onListFiles: (k) => y?.http.invoke({
                 method: "POST",
                 action: "storage.file.list",
                 body: k
               }),
-              onListMounts: () => g?.http.invoke({
+              onListMounts: () => y?.http.invoke({
                 method: "GET",
                 action: "storage.mount"
               }),
-              onUploadFile: (k) => g?.http.invoke({
+              onUploadFile: (k) => y?.http.invoke({
                 method: "POST",
                 action: "storage.file.upload",
                 body: k
               }),
-              onDownloadFile: (k) => g?.http.invoke({
+              onDownloadFile: (k) => y?.http.invoke({
                 method: "GET",
                 action: `storage.file.${k}.download`
               }),
-              onRegisterFile: (k) => g?.http.invoke({
+              onRegisterFile: (k) => y?.http.invoke({
                 method: "POST",
                 action: "storage.file.folder",
                 body: k
@@ -3066,7 +3065,7 @@ const Qr = ({
             {
               value: m || {},
               onChange: (k) => I(b.name, k),
-              onListFolders: () => g?.http.invoke({
+              onListFolders: () => y?.http.invoke({
                 method: "GET",
                 action: "storage.mount"
               }),
@@ -3136,10 +3135,10 @@ const Qr = ({
                               he,
                               {
                                 ...U,
-                                onChange: (j) => G(
+                                onChange: (P) => G(
                                   A,
                                   L.name,
-                                  j.target.value
+                                  P.target.value
                                 ),
                                 type: L.textType || L.type,
                                 autoComplete: L.autocomplete,
@@ -3149,13 +3148,13 @@ const Qr = ({
                             );
                           case "textarea":
                             return /* @__PURE__ */ e(
-                              Se,
+                              ze,
                               {
                                 ...U,
-                                onChange: (j) => G(
+                                onChange: (P) => G(
                                   A,
                                   L.name,
-                                  j.target.value
+                                  P.target.value
                                 ),
                                 rows: 4,
                                 error: T,
@@ -3167,15 +3166,15 @@ const Qr = ({
                               pe,
                               {
                                 ...U,
-                                onChange: (j) => G(
+                                onChange: (P) => G(
                                   A,
                                   L.name,
-                                  j
+                                  P
                                 ),
                                 options: (L.options || []).map(
-                                  (j) => ({
-                                    ...j,
-                                    value: String(j.value)
+                                  (P) => ({
+                                    ...P,
+                                    value: String(P.value)
                                   })
                                 ),
                                 searchable: L.searchable,
@@ -3191,16 +3190,16 @@ const Qr = ({
                               {
                                 ...U,
                                 checked: !!S?.[L.name],
-                                onChange: (j) => G(
+                                onChange: (P) => G(
                                   A,
                                   L.name,
-                                  j.target.checked
+                                  P.target.checked
                                 ),
                                 size: d
                               }
                             );
                           case "radio":
-                            return /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: L.options?.map((j) => /* @__PURE__ */ i(
+                            return /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: L.options?.map((P) => /* @__PURE__ */ i(
                               "label",
                               {
                                 className: "flex cursor-pointer items-center gap-2 text-base text-text",
@@ -3210,29 +3209,29 @@ const Qr = ({
                                     {
                                       type: "radio",
                                       name: `${b.name}.${A}.${L.name}`,
-                                      value: j.value,
-                                      checked: S?.[L.name] === j.value,
+                                      value: P.value,
+                                      checked: S?.[L.name] === P.value,
                                       onChange: () => G(
                                         A,
                                         L.name,
-                                        j.value
+                                        P.value
                                       ),
-                                      disabled: w || j.disabled,
+                                      disabled: w || P.disabled,
                                       className: "size-checkbox shrink-0 border border-border-strong bg-surface-input accent-accent focus-visible:outline-none focus-visible:focus-ring"
                                     }
                                   ),
-                                  j.label
+                                  P.label
                                 ]
                               },
-                              j.value
+                              P.value
                             )) });
                           case "date": {
-                            const j = S?.[L.name];
+                            const P = S?.[L.name];
                             return /* @__PURE__ */ e(
-                              Ce,
+                              Se,
                               {
                                 ...U,
-                                value: j ? new Date(j) : null,
+                                value: P ? new Date(P) : null,
                                 onChange: (K) => G(
                                   A,
                                   L.name,
@@ -3245,10 +3244,10 @@ const Qr = ({
                           case "custom":
                             return L.customComponent?.({
                               value: S?.[L.name],
-                              onChange: (j) => G(
+                              onChange: (P) => G(
                                 A,
                                 L.name,
-                                j
+                                P
                               ),
                               error: T,
                               disabled: w
@@ -3304,12 +3303,12 @@ const Qr = ({
           return null;
       }
     },
-    [v, M, D, h, d, I]
+    [p, M, $, f, d, I]
   ), X = ce(
     (b) => {
-      if (b.conditional && !b.conditional(v))
+      if (b.conditional && !b.conditional(p))
         return null;
-      const m = b.items.filter((w) => !(w.hidden || w.conditional && !w.conditional(v)));
+      const m = b.items.filter((w) => !(w.hidden || w.conditional && !w.conditional(p)));
       if (m.length === 0) return null;
       const E = u(
         b.layout === "flex" ? "flex flex-wrap gap-3" : "grid gap-3",
@@ -3330,7 +3329,7 @@ const Qr = ({
               /* @__PURE__ */ e("span", { className: "text-sm font-semibold text-text", children: b.title }),
               b.description && /* @__PURE__ */ e("p", { className: "mt-1 text-xs leading-4 text-text-subtle", children: b.description })
             ] }),
-            /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ e("div", { className: E, children: m.map((w) => (M[w.name] && D[w.name], /* @__PURE__ */ i(
+            /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ e("div", { className: E, children: m.map((w) => (M[w.name] && $[w.name], /* @__PURE__ */ i(
               "div",
               {
                 className: u(
@@ -3356,7 +3355,7 @@ const Qr = ({
         b.id
       );
     },
-    [v, M, D, H]
+    [p, M, $, H]
   ), Z = u(
     "overflow-hidden rounded-lg border border-border bg-surface",
     {
@@ -3365,7 +3364,7 @@ const Qr = ({
       "max-w-4xl": d === "lg",
       "max-w-full": d === "full"
     },
-    y
+    v
   ), Q = d === "full" ? "md" : d;
   return /* @__PURE__ */ i("form", { ref: C, onSubmit: W, className: Z, children: [
     /* @__PURE__ */ e("div", { className: "flex flex-col", children: t.map(X) }),
@@ -3375,24 +3374,24 @@ const Qr = ({
         ee,
         {
           type: "button",
-          variant: p.variant ?? "ghost",
-          size: p.size || Q,
-          disabled: p.disabled || h,
+          variant: g.variant ?? "ghost",
+          size: g.size || Q,
+          disabled: g.disabled || f,
           onClick: s,
-          className: p.className,
-          children: p.label
+          className: g.className,
+          children: g.label
         }
       ),
       /* @__PURE__ */ e(
         ee,
         {
           type: "submit",
-          variant: f.variant,
-          size: f.size || Q,
-          disabled: f.disabled || h,
-          loading: h,
-          className: f.className,
-          children: f.label
+          variant: h.variant,
+          size: h.size || Q,
+          disabled: h.disabled || f,
+          loading: f,
+          className: h.className,
+          children: h.label
         }
       )
     ] }) })
@@ -3406,23 +3405,23 @@ function en({
   cancelLabel: a = "Annuleren",
   tone: l = "default",
   loading: c = !1,
-  onConfirm: f,
-  onCancel: p
+  onConfirm: h,
+  onCancel: g
 }) {
   return /* @__PURE__ */ e(
     Fe,
     {
       open: t,
-      onClose: p,
+      onClose: g,
       title: r,
       size: "sm",
       footer: /* @__PURE__ */ i("div", { className: "flex w-full items-center justify-end gap-2", children: [
-        /* @__PURE__ */ e(ee, { variant: "ghost", onClick: p, disabled: c, children: a }),
+        /* @__PURE__ */ e(ee, { variant: "ghost", onClick: g, disabled: c, children: a }),
         /* @__PURE__ */ e(
           ee,
           {
             variant: l === "danger" ? "destructive" : "primary",
-            onClick: f,
+            onClick: h,
             loading: c,
             children: s
           }
@@ -3464,8 +3463,8 @@ function tn({
   dismissible: a = !1,
   onDismiss: l,
   className: c,
-  children: f,
-  ...p
+  children: h,
+  ...g
 }) {
   return /* @__PURE__ */ i(
     "span",
@@ -3479,7 +3478,7 @@ function tn({
         dr[r],
         c
       ),
-      ...p,
+      ...g,
       children: [
         n && /* @__PURE__ */ e(
           "span",
@@ -3490,8 +3489,8 @@ function tn({
             )
           }
         ),
-        s && /* @__PURE__ */ e("span", { className: u("flex-shrink-0", f && "mr-1"), children: s }),
-        f,
+        s && /* @__PURE__ */ e("span", { className: u("flex-shrink-0", h && "mr-1"), children: s }),
+        h,
         a && l && /* @__PURE__ */ e(
           "button",
           {
@@ -3517,7 +3516,7 @@ function rn({
   actions: a,
   card: l = !1,
   className: c,
-  ...f
+  ...h
 }) {
   return /* @__PURE__ */ i(
     "div",
@@ -3527,7 +3526,7 @@ function rn({
         l && "rounded-lg border border-border bg-surface px-11 py-9 shadow-overlay",
         c
       ),
-      ...f,
+      ...h,
       children: [
         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 }),
@@ -3709,33 +3708,33 @@ 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: u("flex items-center gap-1.5", a), children: t.map((f, p) => /* @__PURE__ */ e(
+  return n === "dots" ? /* @__PURE__ */ e("div", { ...c, className: u("flex items-center gap-1.5", a), children: t.map((h, g) => /* @__PURE__ */ e(
     "span",
     {
       className: u(
         "h-step-bar rounded-full transition-all duration-fast ease-out",
-        p === l ? "w-5 bg-accent" : "w-3.5",
-        p < l && "bg-border-strong",
-        p > l && "bg-border"
+        g === l ? "w-5 bg-accent" : "w-3.5",
+        g < l && "bg-border-strong",
+        g > l && "bg-border"
       )
     },
-    f
-  )) }) : /* @__PURE__ */ e("div", { ...c, className: u("flex items-center gap-2", a), children: t.map((f, p) => /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+    h
+  )) }) : /* @__PURE__ */ e("div", { ...c, className: u("flex items-center gap-2", a), children: t.map((h, g) => /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
     /* @__PURE__ */ e(
       "span",
       {
-        "aria-current": p === l ? "step" : void 0,
+        "aria-current": g === l ? "step" : void 0,
         className: u(
           "flex size-tile-sm items-center justify-center rounded-full text-xs font-medium",
-          p === l && "bg-accent text-accent-fg",
-          p < l && "bg-accent-soft text-accent",
-          p > l && "bg-surface-hover text-text-muted"
+          g === l && "bg-accent text-accent-fg",
+          g < l && "bg-accent-soft text-accent",
+          g > l && "bg-surface-hover text-text-muted"
         ),
-        children: p + 1
+        children: g + 1
       }
     ),
-    p < t.length - 1 && /* @__PURE__ */ e("span", { className: "h-px w-8 bg-border-strong" })
-  ] }, f)) });
+    g < t.length - 1 && /* @__PURE__ */ e("span", { className: "h-px w-8 bg-border-strong" })
+  ] }, h)) });
 }
 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(
@@ -3770,7 +3769,7 @@ 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), f = u(
+  const [l, c] = le.useState(!1), h = u(
     "inline-flex items-center justify-center rounded-full overflow-hidden shrink-0 font-semibold select-none bg-surface-hover-border-emphasis text-text",
     vr[n],
     s
@@ -3781,15 +3780,15 @@ const Nr = ({ name: t, src: r, size: n = "sm", className: s, title: a }) => {
       src: r,
       alt: t ?? "",
       title: a ?? t,
-      className: u(f, "object-cover"),
+      className: u(h, "object-cover"),
       onError: () => c(!0)
     }
-  ) : /* @__PURE__ */ e("span", { className: f, title: a ?? t, "aria-label": t, children: yr(t) });
+  ) : /* @__PURE__ */ e("span", { className: h, 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: u("inline-flex items-center", s), children: [
-    a.map((c, f) => /* @__PURE__ */ e(
+    a.map((c, h) => /* @__PURE__ */ e(
       Nr,
       {
         name: c.name,
@@ -3797,12 +3796,12 @@ const Nr = ({ name: t, src: r, size: n = "sm", className: s, title: a }) => {
         size: n,
         title: c.name ? c.seen === !1 ? `${c.name} — nog niet gelezen` : c.name : void 0,
         className: u(
-          f > 0 && "-ml-2",
+          h > 0 && "-ml-2",
           c.owner ? wr : Le,
           c.seen === !1 && "opacity-40"
         )
       },
-      c.id ?? `${c.name}-${f}`
+      c.id ?? `${c.name}-${h}`
     )),
     l > 0 && /* @__PURE__ */ i(
       "span",
@@ -3855,22 +3854,22 @@ const mn = ({
   radius: a = "md",
   showLoading: l = !0,
   showError: c = !0,
-  fallback: f,
-  loadingContent: p,
+  fallback: h,
+  loadingContent: g,
   errorContent: N,
   className: x,
   onLoad: d,
-  onError: h,
-  ...y
+  onError: f,
+  ...v
 }) => {
-  const [C, g] = R(!0), [v, $] = R(!1), [D, _] = R(t), M = (Z) => {
-    g(!1), $(!1), d?.(Z);
+  const [C, y] = R(!0), [p, D] = R(!1), [$, _] = R(t), M = (Z) => {
+    y(!1), D(!1), d?.(Z);
   }, q = (Z) => {
-    if (g(!1), $(!0), f && D !== f) {
-      _(f), $(!1), g(!0);
+    if (y(!1), D(!0), h && $ !== h) {
+      _(h), D(!1), y(!0);
       return;
     }
-    h?.(Z);
+    f?.(Z);
   }, V = u(
     "relative overflow-hidden bg-surface-hover",
     // Size variants
@@ -3902,8 +3901,8 @@ const mn = ({
   ), I = u(
     "w-full h-full object-cover transition-opacity duration-fast",
     {
-      "opacity-0": C || v,
-      "opacity-100": !C && !v
+      "opacity-0": C || p,
+      "opacity-100": !C && !p
     }
   ), W = u(
     "absolute inset-0 flex items-center justify-center",
@@ -3916,16 +3915,16 @@ const mn = ({
     /* @__PURE__ */ e(
       "img",
       {
-        ...y,
-        src: D,
+        ...v,
+        src: $,
         alt: r,
         className: I,
         onLoad: M,
         onError: q
       }
     ),
-    C && l && /* @__PURE__ */ e("div", { className: W, children: p || H }),
-    v && c && /* @__PURE__ */ e("div", { className: W, children: N || X })
+    C && l && /* @__PURE__ */ e("div", { className: W, children: g || H }),
+    p && c && /* @__PURE__ */ e("div", { className: W, children: N || X })
   ] });
 };
 function fn({
@@ -3936,18 +3935,18 @@ function fn({
   renderItem: a,
   trailing: l,
   onSelect: c,
-  onActiveIndexChange: f,
-  isActive: p,
+  onActiveIndexChange: h,
+  isActive: g,
   unread: N,
   dimmed: x,
   groupBy: d,
-  groups: h,
-  renderGroupHeader: y,
+  groups: f,
+  renderGroupHeader: v,
   stickyGroupHeaders: C = !1,
-  collapsibleGroups: g = !1,
-  hideGroupCount: v = !1,
-  selectable: $ = !1,
-  selectedItems: D = [],
+  collapsibleGroups: y = !1,
+  hideGroupCount: p = !1,
+  selectable: D = !1,
+  selectedItems: $ = [],
   onSelectionChange: _,
   bulkActions: M,
   header: q,
@@ -3961,20 +3960,20 @@ function fn({
 }) {
   const [b, m] = le.useState(
     () => Object.fromEntries(
-      (h ?? []).filter((T) => T.defaultCollapsed).map((T) => [T.id, !0])
+      (f ?? []).filter((T) => T.defaultCollapsed).map((T) => [T.id, !0])
     )
   ), E = le.useRef(null), w = (T) => {
     if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(T.key)) return;
-    const j = Array.from(
+    const P = Array.from(
       E.current?.querySelectorAll("li[data-list-row]") ?? []
     );
-    if (j.length === 0) return;
+    if (P.length === 0) return;
     T.preventDefault();
-    const K = j.indexOf(document.activeElement), o = T.key === "Home" ? 0 : T.key === "End" ? j.length - 1 : T.key === "ArrowDown" ? (K + 1) % j.length : (K - 1 + j.length) % j.length;
-    j[o]?.focus();
-  }, P = (T, U) => r ? r(T, U) : U, k = (T) => D.includes(T), ae = (T, U) => {
+    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;
+    P[o]?.focus();
+  }, j = (T, U) => r ? r(T, U) : U, k = (T) => $.includes(T), ae = (T, U) => {
     _ && _(
-      U ? [...D, T] : D.filter((j) => j !== T)
+      U ? [...$, T] : $.filter((P) => P !== T)
     );
   }, ne = (T) => _?.(T ? [...t] : []), te = u(
     "flex flex-col",
@@ -4000,8 +3999,8 @@ function fn({
     )) });
   if (t.length === 0 && W)
     return /* @__PURE__ */ e("div", { className: te, children: W });
-  const G = t.length > 0 && D.length === t.length, S = D.length > 0 && !G, A = (T, U, j) => {
-    const K = p?.(T, U) ?? !1, o = N?.(T, U) ?? !1, z = x?.(T, U) ?? !1, B = $ && k(T);
+  const G = t.length > 0 && $.length === t.length, S = $.length > 0 && !G, A = (T, U, P) => {
+    const K = g?.(T, U) ?? !1, o = N?.(T, U) ?? !1, z = x?.(T, U) ?? !1, B = D && k(T);
     return /* @__PURE__ */ i(
       "li",
       {
@@ -4011,7 +4010,7 @@ function fn({
           "data-list-row": "",
           "aria-current": K || void 0,
           onClick: () => c(T, U),
-          onFocus: () => f?.(U),
+          onFocus: () => h?.(U),
           onKeyDown: (F) => {
             F.key !== "Enter" && F.key !== " " || (F.preventDefault(), c(T, U));
           }
@@ -4019,14 +4018,14 @@ function fn({
         className: u(
           "flex items-center gap-3 px-4 py-2 text-base",
           "transition-colors duration-fast ease-out",
-          n === "divided" && !j && "border-t border-border-subtle",
+          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",
           o && "font-bold",
           z && "opacity-55"
         ),
         children: [
-          $ && /* @__PURE__ */ e("span", { onClick: (F) => F.stopPropagation(), children: /* @__PURE__ */ e(
+          D && /* @__PURE__ */ e("span", { onClick: (F) => F.stopPropagation(), children: /* @__PURE__ */ e(
             xe,
             {
               checked: k(T),
@@ -4046,7 +4045,7 @@ function fn({
           l && /* @__PURE__ */ e("span", { className: "shrink-0 text-xs text-text-subtle", children: l(T, U) })
         ]
       },
-      P(T, U)
+      j(T, U)
     );
   }, L = (() => {
     if (!d)
@@ -4056,15 +4055,15 @@ function fn({
       const z = d(K, o);
       T.has(z) || T.set(z, []), T.get(z).push({ item: K, index: o });
     });
-    const U = h ?? [];
+    const U = f ?? [];
     return [
       ...U.filter((K) => T.has(K.id)),
       ...[...T.keys()].filter((K) => !U.some((o) => o.id === K)).map((K) => ({ id: K }))
     ].flatMap((K, o) => {
-      const z = T.get(K.id) ?? [], B = g && b[K.id], F = K.title ?? K.id, O = K.count ?? z.length, re = /* @__PURE__ */ e(
+      const z = T.get(K.id) ?? [], B = y && b[K.id], F = K.title ?? K.id, O = K.count ?? z.length, re = /* @__PURE__ */ e(
         "li",
         {
-          onClick: g ? () => m((ie) => ({ ...ie, [K.id]: !ie[K.id] })) : void 0,
+          onClick: y ? () => m((ie) => ({ ...ie, [K.id]: !ie[K.id] })) : void 0,
           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",
@@ -4072,12 +4071,12 @@ function fn({
             o > 0 && "border-t",
             "border-b",
             C && "sticky z-10",
-            g && "cursor-pointer select-none hover:text-text"
+            y && "cursor-pointer select-none hover:text-text"
           ),
-          "aria-expanded": g ? !B : void 0,
+          "aria-expanded": y ? !B : void 0,
           style: C ? { top: V ? 28 : 0 } : void 0,
-          children: y ? y(K, z.map((ie) => ie.item)) : /* @__PURE__ */ i(fe, { children: [
-            g && /* @__PURE__ */ e(
+          children: v ? v(K, z.map((ie) => ie.item)) : /* @__PURE__ */ i(fe, { children: [
+            y && /* @__PURE__ */ e(
               ye,
               {
                 "aria-hidden": !0,
@@ -4088,7 +4087,7 @@ function fn({
               }
             ),
             /* @__PURE__ */ e("span", { children: F }),
-            !v && /* @__PURE__ */ e("span", { className: "ml-auto font-normal tabular-nums", children: O })
+            !p && /* @__PURE__ */ e("span", { className: "ml-auto font-normal tabular-nums", children: O })
           ] })
         },
         `group-${K.id}`
@@ -4102,7 +4101,7 @@ function fn({
     });
   })();
   return /* @__PURE__ */ i("div", { ref: E, className: te, onKeyDown: c ? w : 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: [
+    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: [
       /* @__PURE__ */ e(
         xe,
         {
@@ -4113,7 +4112,7 @@ function fn({
         }
       ),
       /* @__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 })
@@ -4182,24 +4181,24 @@ const bn = ({
   actions: a = [],
   children: l,
   className: c,
-  backLabel: f = "Back",
-  backClassName: p,
+  backLabel: h = "Back",
+  backClassName: g,
   onBack: N,
   editable: x = !1,
   onTitleChange: d
 }) => {
-  const [h, y] = R(!1), [C, g] = R(r), v = se(null);
+  const [f, v] = R(!1), [C, y] = R(r), p = se(null);
   Y(() => {
-    g(r);
+    y(r);
   }, [r]), Y(() => {
-    h && v.current && (v.current.focus(), v.current.select());
-  }, [h]);
-  const $ = () => {
-    x && y(!0);
-  }, D = () => {
-    y(!1), C.trim() !== "" && C !== r && d ? d(C.trim()) : g(r);
+    f && p.current && (p.current.focus(), p.current.select());
+  }, [f]);
+  const D = () => {
+    x && v(!0);
+  }, $ = () => {
+    v(!1), C.trim() !== "" && C !== r && d ? d(C.trim()) : y(r);
   }, _ = (M) => {
-    M.key === "Enter" ? v.current?.blur() : M.key === "Escape" && (g(r), y(!1));
+    M.key === "Enter" ? p.current?.blur() : M.key === "Escape" && (y(r), v(!1));
   };
   return /* @__PURE__ */ i(
     "div",
@@ -4213,16 +4212,16 @@ const bn = ({
       children: [
         /* @__PURE__ */ i("div", { className: "flex flex-row sm:items-start sm:justify-between items-center gap-4", children: [
           /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ i("div", { className: "flex items-start gap-2 text-text", children: [
-            N && /* @__PURE__ */ e(ee, { variant: "secondary", onClick: N, leftIcon: /* @__PURE__ */ e(J, { icon: ze, size: "sm" }), iconOnly: !0 }),
+            N && /* @__PURE__ */ e(ee, { variant: "secondary", onClick: N, leftIcon: /* @__PURE__ */ e(J, { icon: Ee, size: "sm" }), iconOnly: !0 }),
             /* @__PURE__ */ i("div", { className: "min-w-0 flex-1", children: [
-              h ? /* @__PURE__ */ e(
+              f ? /* @__PURE__ */ e(
                 "input",
                 {
-                  ref: v,
+                  ref: p,
                   type: "text",
                   value: C,
-                  onChange: (M) => g(M.target.value),
-                  onBlur: D,
+                  onChange: (M) => y(M.target.value),
+                  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"
                 }
@@ -4230,7 +4229,7 @@ const bn = ({
                 /* @__PURE__ */ e(
                   "h2",
                   {
-                    onClick: $,
+                    onClick: D,
                     className: u(
                       "text-2xl font-semibold truncate",
                       x && "cursor-pointer"
@@ -4244,7 +4243,7 @@ const bn = ({
                   ct,
                   {
                     size: 15,
-                    onClick: $,
+                    onClick: D,
                     className: "shrink-0 cursor-pointer text-text-muted opacity-0 group-hover:opacity-100 transition-opacity"
                   }
                 )
@@ -4254,7 +4253,7 @@ const bn = ({
           ] }) }),
           a.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-wrap sm:flex-nowrap gap-2 sm:gap-3", children: a.map(
             (M) => M.render ? /* @__PURE__ */ e(le.Fragment, { children: M.render() }, M.id) : M.splitOptions && M.splitOptions.length > 0 ? /* @__PURE__ */ e(
-              je,
+              Pe,
               {
                 label: M.label,
                 onClick: M.onClick,
@@ -4290,11 +4289,11 @@ const bn = ({
   className: s,
   children: a
 }) => /* @__PURE__ */ i("div", { className: u("flex items-center gap-2 mb-3", s), children: [
-  r && /* @__PURE__ */ e(ee, { variant: "ghost", size: "sm", onClick: r, leftIcon: /* @__PURE__ */ e(ze, { size: 14 }), children: n }),
+  r && /* @__PURE__ */ e(ee, { 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: u("flex flex-wrap gap-2", !a && "ml-auto"), children: t.map(
     (l) => l.splitOptions && l.splitOptions.length > 0 ? /* @__PURE__ */ e(
-      je,
+      Pe,
       {
         label: l.label,
         onClick: l.onClick,
@@ -4419,14 +4418,14 @@ const wn = ({
     }
   }, l = (x) => x ? "Ja" : "Nee", c = (x, d) => {
     if (!d) return String(x || "-");
-    const h = d.find((y) => y.value === x);
-    return h ? h.label : String(x || "-");
-  }, f = ce(
+    const f = d.find((v) => v.value === x);
+    return f ? f.label : String(x || "-");
+  }, h = ce(
     (x) => {
       const d = zr(r, x.name);
       if (x.type === "array") {
-        const y = d;
-        return !y || y.length === 0 ? /* @__PURE__ */ e(
+        const v = d;
+        return !v || v.length === 0 ? /* @__PURE__ */ e(
           oe,
           {
             variant: "body",
@@ -4434,7 +4433,7 @@ const wn = ({
             className: "text-text-muted",
             children: "Geen items"
           }
-        ) : /* @__PURE__ */ e("div", { className: "space-y-3", children: y.map((C, g) => /* @__PURE__ */ i(
+        ) : /* @__PURE__ */ e("div", { className: "space-y-3", children: v.map((C, y) => /* @__PURE__ */ i(
           "div",
           {
             className: "p-4 border border-border rounded-xl space-y-3",
@@ -4449,51 +4448,51 @@ const wn = ({
                   children: [
                     x.label,
                     " ",
-                    g + 1
+                    y + 1
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: x.arrayFields?.map((v) => {
-                const $ = C?.[v.name];
-                let D = "-";
-                switch (v.type) {
+              /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: x.arrayFields?.map((p) => {
+                const D = C?.[p.name];
+                let $ = "-";
+                switch (p.type) {
                   case "text":
                   case "email":
                   case "number":
                   case "tel":
                   case "url":
                   case "textarea":
-                    D = $ || "-";
+                    $ = D || "-";
                     break;
                   case "select":
                   case "radio":
-                    D = c(
-                      $,
-                      v.options
+                    $ = c(
+                      D,
+                      p.options
                     );
                     break;
                   case "checkbox":
-                    D = l($);
+                    $ = l(D);
                     break;
                   case "date":
-                    D = a($);
+                    $ = a(D);
                     break;
                   case "custom":
-                    D = v.customComponent?.({
-                      value: $
+                    $ = p.customComponent?.({
+                      value: D
                     });
                     break;
                   default:
-                    D = String($ || "-");
+                    $ = String(D || "-");
                 }
-                return v.format && (D = v.format($, C)), /* @__PURE__ */ i("div", { className: "space-y-1", children: [
+                return p.format && ($ = p.format(D, C)), /* @__PURE__ */ i("div", { className: "space-y-1", children: [
                   /* @__PURE__ */ e(
                     oe,
                     {
                       variant: "label",
                       size: "xs",
                       className: "text-text-muted",
-                      children: v.label
+                      children: p.label
                     }
                   ),
                   /* @__PURE__ */ e(
@@ -4502,31 +4501,31 @@ const wn = ({
                       variant: "body",
                       size: "sm",
                       className: "text-text",
-                      children: D
+                      children: $
                     }
                   )
-                ] }, v.name);
+                ] }, p.name);
               }) })
             ]
           },
-          g
+          y
         )) });
       }
       if (x.type === "custom" && x.customComponent)
         return x.customComponent({ value: d });
       if (x.format) {
-        const y = x.format(d, r);
+        const v = x.format(d, r);
         return /* @__PURE__ */ e(
           oe,
           {
             variant: "body",
             size: "sm",
             className: "text-text",
-            children: y
+            children: v
           }
         );
       }
-      let h = "-";
+      let f = "-";
       switch (x.type) {
         case "text":
         case "email":
@@ -4534,23 +4533,23 @@ const wn = ({
         case "number":
         case "tel":
         case "url":
-          h = d ? String(d) : "-";
+          f = d ? String(d) : "-";
           break;
         case "textarea":
-          h = d ? /* @__PURE__ */ e("div", { className: "whitespace-pre-wrap", children: String(d || "-") }) : "-";
+          f = d ? /* @__PURE__ */ e("div", { className: "whitespace-pre-wrap", children: String(d || "-") }) : "-";
           break;
         case "select":
         case "radio":
-          h = c(d, x.options);
+          f = c(d, x.options);
           break;
         case "checkbox":
-          h = l(d);
+          f = l(d);
           break;
         case "date":
-          h = a(d);
+          f = a(d);
           break;
         default:
-          h = d ? String(d) : "-";
+          f = d ? String(d) : "-";
       }
       return /* @__PURE__ */ e(
         oe,
@@ -4558,18 +4557,18 @@ const wn = ({
           variant: "body",
           size: "sm",
           className: "text-text",
-          children: h
+          children: f
         }
       );
     },
     [r]
-  ), p = ce(
+  ), g = ce(
     (x) => {
       if (x.conditional && !x.conditional(r))
         return null;
-      const d = x.items.filter((y) => !(y.hidden || y.conditional && !y.conditional(r)));
+      const d = x.items.filter((v) => !(v.hidden || v.conditional && !v.conditional(r)));
       if (d.length === 0) return null;
-      const h = u(
+      const f = u(
         "space-y-4",
         {
           "grid gap-4": x.layout === "grid",
@@ -4609,35 +4608,35 @@ const wn = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ e("div", { className: "md:col-span-2", children: /* @__PURE__ */ e("div", { className: h, children: d.map((y) => /* @__PURE__ */ i(
+            /* @__PURE__ */ e("div", { className: "md:col-span-2", children: /* @__PURE__ */ e("div", { className: f, children: d.map((v) => /* @__PURE__ */ i(
               "div",
               {
                 className: "space-y-1",
                 style: {
-                  width: typeof y.width == "string" ? y.width : void 0,
-                  gridColumn: typeof y.width == "number" ? `span ${y.width} / span ${y.width}` : void 0
+                  width: typeof v.width == "string" ? v.width : void 0,
+                  gridColumn: typeof v.width == "number" ? `span ${v.width} / span ${v.width}` : void 0
                 },
                 children: [
-                  y.type !== "custom" && /* @__PURE__ */ e(
+                  v.type !== "custom" && /* @__PURE__ */ e(
                     oe,
                     {
                       variant: "label",
                       size: "sm",
                       className: "font-medium text-text-muted",
-                      children: y.label
+                      children: v.label
                     }
                   ),
-                  f(y)
+                  h(v)
                 ]
               },
-              y.name
+              v.name
             )) }) })
           ]
         },
         x.id
       );
     },
-    [r, f]
+    [r, h]
   ), N = u(
     "space-y-6",
     {
@@ -4648,7 +4647,7 @@ const wn = ({
     },
     s
   );
-  return /* @__PURE__ */ e("div", { className: N, children: /* @__PURE__ */ e("div", { className: "space-y-8", children: t.map(p) }) });
+  return /* @__PURE__ */ e("div", { className: N, children: /* @__PURE__ */ e("div", { className: "space-y-8", children: t.map(g) }) });
 }, Re = ({ item: t, isSelectedHandler: r, onClick: n, depth: s = 0 }) => {
   const a = !!(t.children && t.children.length > 0), l = r ? r(t.path) : !1;
   return a ? /* @__PURE__ */ i("li", { children: [
@@ -4664,7 +4663,7 @@ const wn = ({
         ]
       }
     ),
-    /* @__PURE__ */ e("ul", { className: "flex flex-col gap-0.5", children: t.children?.map((c, f) => /* @__PURE__ */ e(
+    /* @__PURE__ */ e("ul", { className: "flex flex-col gap-0.5", children: t.children?.map((c, h) => /* @__PURE__ */ e(
       Re,
       {
         item: c,
@@ -4672,7 +4671,7 @@ const wn = ({
         onClick: n,
         depth: s + 1
       },
-      f
+      h
     )) })
   ] }) : /* @__PURE__ */ e("li", { children: /* @__PURE__ */ i(
     "div",
@@ -4715,7 +4714,7 @@ 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, f) => /* @__PURE__ */ e(
+    r && r.length > 0 && /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center gap-1", children: r.map((c, h) => /* @__PURE__ */ e(
       "span",
       {
         className: u(
@@ -4725,19 +4724,19 @@ const wn = ({
         ),
         children: c
       },
-      f
+      h
     )) })
   ] }),
   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, f) => !c.path && !c.label && !c.children ? /* @__PURE__ */ e("li", { "aria-hidden": !0, className: "h-4" }, f) : /* @__PURE__ */ e(
+    (c, h) => !c.path && !c.label && !c.children ? /* @__PURE__ */ e("li", { "aria-hidden": !0, className: "h-4" }, h) : /* @__PURE__ */ e(
       Re,
       {
         item: c,
         isSelectedHandler: s,
         onClick: a
       },
-      f
+      h
     )
   ) })
 ] }), Er = {
@@ -4777,8 +4776,8 @@ const wn = ({
   align: a = "left",
   truncate: l = !1,
   className: c,
-  children: f,
-  ...p
+  children: h,
+  ...g
 }) => {
   const N = `h${t}`, x = u(
     "font-sans text-pretty",
@@ -4789,7 +4788,7 @@ const wn = ({
     l && "truncate",
     c
   );
-  return /* @__PURE__ */ e(N, { className: x, ...p, children: f });
+  return /* @__PURE__ */ e(N, { className: x, ...g, children: h });
 };
 function Tr(t) {
   return {
@@ -4809,44 +4808,44 @@ const Sn = ({
   initialCommandPath: a,
   initialActiveIndex: l
 }) => {
-  const [c, f] = R(""), [p, N] = R(a || []), [x, d] = R(l || 0), h = se(null), y = se(null), g = (p.length ? t.find((v) => v.id === p[0])?.subCommands || [] : t).filter(
-    (v) => v.label.toLowerCase().includes(c.toLowerCase())
+  const [c, h] = R(""), [g, N] = R(a || []), [x, d] = R(l || 0), f = se(null), v = se(null), y = (g.length ? t.find((p) => p.id === g[0])?.subCommands || [] : t).filter(
+    (p) => p.label.toLowerCase().includes(c.toLowerCase())
   );
   return Y(() => {
-    r || (f(""), N(a || []), d(l || 0));
+    r || (h(""), N(a || []), d(l || 0));
   }, [r]), Y(() => {
-    const v = ($) => {
+    const p = (D) => {
       if (r) {
-        if ($.key === "Escape")
+        if (D.key === "Escape")
           n();
-        else if ($.key === "ArrowUp")
+        else if (D.key === "ArrowUp")
           d(
-            (D) => D > 0 ? D - 1 : g.length - 1
+            ($) => $ > 0 ? $ - 1 : y.length - 1
           );
-        else if ($.key === "ArrowDown")
+        else if (D.key === "ArrowDown")
           d(
-            (D) => D < g.length - 1 ? D + 1 : 0
+            ($) => $ < y.length - 1 ? $ + 1 : 0
           );
-        else if ($.key === "Enter") {
-          const D = g[x];
-          D && (D.subCommands ? (N([...p, D.id]), d(0)) : D.action && (D.action(), n()));
+        else if (D.key === "Enter") {
+          const $ = y[x];
+          $ && ($.subCommands ? (N([...g, $.id]), d(0)) : $.action && ($.action(), n()));
         }
       }
     };
-    return document.addEventListener("keydown", v), () => document.removeEventListener("keydown", v);
-  }, [r, n, g, x, p]), Y(() => {
-    const v = ($) => {
-      h.current && !h.current.contains($.target) && n();
+    return document.addEventListener("keydown", p), () => document.removeEventListener("keydown", p);
+  }, [r, n, y, x, g]), Y(() => {
+    const p = (D) => {
+      f.current && !f.current.contains(D.target) && n();
     };
-    return r && document.addEventListener("mousedown", v), () => document.removeEventListener("mousedown", v);
+    return r && document.addEventListener("mousedown", p), () => document.removeEventListener("mousedown", p);
   }, [r, n]), Y(() => {
     if (!r) return;
-    y.current?.querySelector(`[data-index="${x}"]`)?.scrollIntoView({ block: "nearest" });
+    v.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(
     "div",
     {
       className: "flex flex-col w-full max-w-lg max-h-dialog p-2 mx-auto rounded-lg border border-border shadow-modal bg-surface",
-      ref: h,
+      ref: f,
       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" }),
@@ -4857,7 +4856,7 @@ const Sn = ({
               autoFocus: !0,
               placeholder: s?.searchPlaceholder || "Search commands...",
               value: c,
-              onChange: (v) => f(v.target.value),
+              onChange: (p) => h(p.target.value),
               className: "w-full border-0 bg-transparent py-2 text-text focus:outline-none"
             }
           )
@@ -4865,26 +4864,26 @@ const Sn = ({
         /* @__PURE__ */ i(
           "div",
           {
-            ref: y,
+            ref: v,
             className: "mt-2 pt-2 text-sm border-t border-border max-h-dialog-list overflow-y-auto",
             children: [
-              g.length === 0 && /* @__PURE__ */ e("div", { className: "text-text-muted text-center text-sm", children: s?.noCommandsFound || "No commands found" }),
-              g.map((v, $) => /* @__PURE__ */ i(
+              y.length === 0 && /* @__PURE__ */ e("div", { className: "text-text-muted text-center text-sm", children: s?.noCommandsFound || "No commands found" }),
+              y.map((p, D) => /* @__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": D,
+                  className: `flex items-center p-2 cursor-pointer rounded-md ${D === x ? "bg-accent-soft text-accent" : "text-text"}`,
                   onClick: () => {
-                    v.subCommands ? (N([...p, v.id]), d(0)) : v.action && (v.action(), n());
+                    p.subCommands ? (N([...g, p.id]), d(0)) : p.action && (p.action(), n());
                   },
-                  onMouseEnter: () => d($),
+                  onMouseEnter: () => d(D),
                   children: [
-                    v.icon && /* @__PURE__ */ e("span", { className: "mr-3", children: v.icon }),
-                    /* @__PURE__ */ e("span", { className: "flex-grow", children: v.label }),
-                    v.subCommands && /* @__PURE__ */ e("span", { className: "text-text-muted", children: /* @__PURE__ */ e(ye, { className: "w-4 h-4" }) })
+                    p.icon && /* @__PURE__ */ e("span", { className: "mr-3", children: p.icon }),
+                    /* @__PURE__ */ e("span", { className: "flex-grow", children: p.label }),
+                    p.subCommands && /* @__PURE__ */ e("span", { className: "text-text-muted", children: /* @__PURE__ */ e(ye, { className: "w-4 h-4" }) })
                   ]
                 },
-                v.id
+                p.id
               ))
             ]
           }
@@ -4938,14 +4937,14 @@ const Sn = ({
   backdrop: "bg-page",
   editor: "bg-surface",
   input: "bg-surface-input"
-}, Pr = {
+}, jr = {
   none: "rounded-none",
   sm: "rounded-sm",
   md: "rounded-md",
   lg: "rounded-lg",
   xl: "rounded-xl",
   full: "rounded-full"
-}, jr = {
+}, Pr = {
   none: "shadow-none",
   sm: "shadow-none",
   md: "shadow-overlay",
@@ -4976,8 +4975,8 @@ const Sn = ({
     shadow: a,
     border: l,
     borderColor: c,
-    className: f,
-    children: p,
+    className: h,
+    children: g,
     ...N
   }, x) => /* @__PURE__ */ e(
     "div",
@@ -4987,14 +4986,14 @@ const Sn = ({
         t && Ar[t],
         r && Lr[r],
         n && Ir[n],
-        s && Pr[s],
-        a && jr[a],
+        s && jr[s],
+        a && Pr[a],
         l && Or[l],
         c && Br[c],
-        f
+        h
       ),
       ...N,
-      children: p
+      children: g
     }
   )
 );
@@ -5022,43 +5021,43 @@ function En({
   componentProps: a,
   className: l
 }) {
-  const c = se(null), [f, p] = R(!0), [N, x] = R(null), d = se(null);
+  const c = se(null), [h, g] = R(!0), [N, x] = R(null), d = se(null);
   return se(null), Y(() => {
-    let h = !0;
+    let f = !0;
     return (async () => {
-      p(!0);
+      g(!0);
       try {
         const C = await r();
-        if (!h) return;
-        const g = C.component || C.default || C;
-        x(n === "react" ? () => g : () => C);
+        if (!f) return;
+        const y = C.component || C.default || C;
+        x(n === "react" ? () => y : () => C);
       } catch (C) {
         console.error(`[FederatedResource] Load failed: ${t}`, C);
       } finally {
-        h && p(!1);
+        f && g(!1);
       }
     })(), () => {
-      h = !1;
+      f = !1;
     };
   }, [t, r]), Y(() => {
-    if (f || !N || n === "react") return;
-    const h = c.current;
-    if (h) {
+    if (h || !N || n === "react") return;
+    const f = c.current;
+    if (f) {
       if (n === "svelte") {
-        const y = N.default || N, C = new y({ target: h, props: a || {} });
+        const v = N.default || N, C = new v({ target: f, props: a || {} });
         return d.current = C, () => C.$destroy();
       }
       if (N.mount) {
-        const y = N.mount({ container: h, props: a || {} });
+        const v = N.mount({ container: f, props: a || {} });
         return () => {
-          typeof y == "function" ? y() : N.unmount?.(h);
+          typeof v == "function" ? v() : N.unmount?.(f);
         };
       }
     }
-  }, [N, n, f]), Y(() => {
+  }, [N, n, h]), Y(() => {
     n === "svelte" && d.current && d.current.$set?.(a);
   }, [a, n]), /* @__PURE__ */ i("div", { ref: c, className: l, style: { display: "contents" }, children: [
-    f && s,
+    h && s,
     n === "react" && N && /* @__PURE__ */ e(N, { ...a })
   ] });
 }
@@ -5104,7 +5103,7 @@ export {
   Sn as CommandPalette,
   en as ConfirmDialog,
   Rt as ContentLoading,
-  Ce as DatePicker,
+  Se as DatePicker,
   Vt as Dropdown,
   rn as EmptyState,
   Mn as ErrorBoundary,
@@ -5136,7 +5135,7 @@ export {
   kn as SidebarMenu,
   Nn as SourceChip,
   an as Spinner,
-  je as SplitButton,
+  Pe as SplitButton,
   ln as StatusDot,
   on as StepIndicator,
   ar as StorageInput,
@@ -5145,7 +5144,7 @@ export {
   Te as Table,
   Xt as Tabs,
   oe as Text,
-  Se as TextArea,
+  ze as TextArea,
   he as TextField,
   _r as VideoSurface,
   wn as View,