@opencxh/ui-kit 3.140.1 → 3.143.0

package/dist/index.js

@@ -22,8 +22,8 @@ function Le(t, r, { gap: n = 6, matchWidth: s = !1, placement: a = "bottom-start
     const f = () => {
       const d = r.current;
       if (!d) return;
-      const p = d.getBoundingClientRect(), h = window.innerHeight - p.bottom, u = p.top, b = a.startsWith("top"), v = b ? u < 200 && h > u : h < 200 && u > h, w = b !== v, g = { position: "fixed" };
-      w ? (g.bottom = window.innerHeight - p.top + n, g.maxHeight = Math.max(120, u - n * 2)) : (g.top = p.bottom + n, g.maxHeight = Math.max(120, h - n * 2)), a.endsWith("end") ? g.right = window.innerWidth - p.right : g.left = p.left, s && (g.width = p.width), o(g);
+      const v = d.getBoundingClientRect(), h = window.innerHeight - v.bottom, u = v.top, b = a.startsWith("top"), p = b ? u < 200 && h > u : h < 200 && u > h, w = b !== p, g = { position: "fixed" };
+      w ? (g.bottom = window.innerHeight - v.top + n, g.maxHeight = Math.max(120, u - n * 2)) : (g.top = v.bottom + n, g.maxHeight = Math.max(120, h - n * 2)), a.endsWith("end") ? g.right = window.innerWidth - v.right : g.left = v.left, s && (g.width = v.width), o(g);
     };
     return f(), window.addEventListener("scroll", f, !0), window.addEventListener("resize", f), () => {
       window.removeEventListener("scroll", f, !0), window.removeEventListener("resize", f);
@@ -165,11 +165,11 @@ const Vt = {
     iconOnly: o = !1,
     shape: f = "default",
     className: d,
-    children: p,
+    children: v,
     disabled: h,
     ...u
   }, b) => {
-    const v = h || s;
+    const p = h || s;
     return /* @__PURE__ */ i(
       "button",
       {
@@ -191,7 +191,7 @@ const Vt = {
           s && "cursor-wait",
           d
         ),
-        disabled: v,
+        disabled: p,
         "aria-busy": s || void 0,
         ...u,
         children: [
@@ -203,9 +203,9 @@ const Vt = {
             }
           ),
           !s && a && /* @__PURE__ */ e("span", { className: "flex items-center justify-center shrink-0", children: a }),
-          !o && p,
+          !o && v,
           !s && l && /* @__PURE__ */ e("span", { className: "flex items-center justify-center shrink-0", children: l }),
-          o && !s && !a && !l && p
+          o && !s && !a && !l && v
         ]
       }
     );
@@ -268,7 +268,7 @@ const Kt = {
   "aria-label": o,
   ...f
 }) => {
-  const d = typeof r == "number" ? r : Wt(r), p = c(
+  const d = typeof r == "number" ? r : Wt(r), v = c(
     "inline-block shrink-0",
     Kt[n],
     s && [
@@ -279,7 +279,7 @@ const Kt = {
   ), h = {
     size: d,
     strokeWidth: 2,
-    className: p,
+    className: v,
     onClick: s ? a : void 0,
     "aria-label": o,
     "aria-hidden": o ? void 0 : !0,
@@ -311,28 +311,28 @@ const Qe = ({
   disabled: o = !1,
   triggerLabel: f
 }) => {
-  const [d, p] = j(!1), h = se(null), u = se(null), b = Le(d, u, { placement: n });
+  const [d, v] = j(!1), h = se(null), u = se(null), b = Le(d, u, { placement: n });
   G(() => {
     if (!d) return;
     const g = (_) => {
-      h.current && !h.current.contains(_.target) && p(!1);
+      h.current && !h.current.contains(_.target) && v(!1);
     }, x = (_) => {
-      _.key === "Escape" && p(!1);
+      _.key === "Escape" && v(!1);
     };
     return document.addEventListener("mousedown", g), document.addEventListener("keydown", x), () => {
       document.removeEventListener("mousedown", g), document.removeEventListener("keydown", x);
     };
   }, [d]);
-  const v = (g) => {
-    g.stopPropagation(), !o && p((x) => !x);
-  }, w = () => p(!1);
+  const p = (g) => {
+    g.stopPropagation(), !o && v((x) => !x);
+  }, w = () => v(!1);
   return /* @__PURE__ */ i("div", { ref: h, className: c("relative inline-flex", a), children: [
     /* @__PURE__ */ e(
       "button",
       {
         ref: u,
         type: "button",
-        onClick: v,
+        onClick: p,
         disabled: o,
         "aria-label": f,
         "aria-expanded": d,
@@ -390,13 +390,13 @@ function Xt({
   caret: o = !1,
   menu: f,
   menuClassName: d,
-  onClear: p,
+  onClear: v,
   clearLabel: h = "Filter wissen",
   onClick: u,
   title: b,
-  className: v
+  className: p
 }) {
-  const w = l && !!p, g = s === "pill" ? "rounded-full" : "rounded-md", x = Jt({ active: l, tone: n, shape: s, size: a, className: v }), _ = /* @__PURE__ */ i(ke, { children: [
+  const w = l && !!v, g = s === "pill" ? "rounded-full" : "rounded-md", x = Jt({ active: l, tone: n, shape: s, size: a, className: p }), _ = /* @__PURE__ */ i(ke, { children: [
     r,
     t,
     o && /* @__PURE__ */ e(Z, { icon: $e, size: "xs" })
@@ -405,7 +405,7 @@ function Xt({
     {
       type: "button",
       "aria-label": h,
-      onClick: p,
+      onClick: v,
       className: c("inline-flex h-full items-center pr-3 focus-visible:outline-none focus-visible:focus-ring", g),
       children: /* @__PURE__ */ e(Z, { icon: we, size: "xs" })
     }
@@ -461,7 +461,7 @@ const Zt = {
   children: o,
   href: f,
   target: d,
-  rel: p,
+  rel: v,
   ...h
 }) => {
   const u = a || f && (f.startsWith("http") || f.startsWith("mailto:")), b = c(
@@ -478,14 +478,14 @@ const Zt = {
     ],
     s && "pointer-events-none cursor-not-allowed text-text-disabled opacity-50",
     l
-  ), v = {
+  ), p = {
     ...h,
     href: s ? void 0 : f,
     target: u ? "_blank" : d,
-    rel: u ? "noopener noreferrer" : p,
+    rel: u ? "noopener noreferrer" : v,
     "aria-disabled": s || void 0
   };
-  return /* @__PURE__ */ i("a", { className: b, ...v, children: [
+  return /* @__PURE__ */ i("a", { className: b, ...p, children: [
     o,
     u && /* @__PURE__ */ e(yt, { className: "size-icon-sm shrink-0", "aria-hidden": !0 })
   ] });
@@ -515,12 +515,14 @@ function rr({
         o
       ),
       children: t.map((d) => {
-        const p = d.value === r;
+        const v = d.value === r;
         return /* @__PURE__ */ e(
           "button",
           {
             role: "tab",
-            "aria-selected": p,
+            "aria-selected": v,
+            "aria-label": d.title,
+            title: d.title,
             type: "button",
             onClick: () => n(d.value),
             className: c(
@@ -529,7 +531,7 @@ function rr({
               "focus-visible:outline-none focus-visible:focus-ring",
               l && "min-w-0 flex-1",
               tr[s],
-              p ? "bg-surface text-text font-medium shadow-sm" : "text-text-muted hover:text-text"
+              v ? "bg-surface text-text font-medium shadow-sm" : "text-text-muted hover:text-text"
             ),
             children: d.label
           },
@@ -557,7 +559,7 @@ function et({
   disabled: o = !1,
   loading: f = !1,
   menuPlacement: d = "bottom-end",
-  menuLabel: p = "More options"
+  menuLabel: v = "More options"
 }) {
   const h = o || f, u = l.length > 0;
   return (
@@ -584,7 +586,7 @@ function et({
         {
           placement: d,
           disabled: h,
-          triggerLabel: p,
+          triggerLabel: v,
           className: "min-w-menu py-1",
           trigger: /* @__PURE__ */ e(
             "span",
@@ -600,25 +602,25 @@ function et({
               children: /* @__PURE__ */ e($e, { className: "size-icon-md" })
             }
           ),
-          children: (b) => /* @__PURE__ */ e(ke, { children: l.map((v) => /* @__PURE__ */ i(
+          children: (b) => /* @__PURE__ */ e(ke, { children: l.map((p) => /* @__PURE__ */ i(
             "button",
             {
               type: "button",
               onClick: () => {
-                v.onClick(), b();
+                p.onClick(), b();
               },
               className: c(
                 "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",
-                v.variant === "destructive" ? "text-danger-fg hover:bg-danger-soft" : "text-text hover:bg-surface-hover"
+                p.variant === "destructive" ? "text-danger-fg hover:bg-danger-soft" : "text-text hover:bg-surface-hover"
               ),
               children: [
-                v.icon && /* @__PURE__ */ e("span", { className: "shrink-0", children: v.icon }),
-                v.label
+                p.icon && /* @__PURE__ */ e("span", { className: "shrink-0", children: p.icon }),
+                p.label
               ]
             },
-            v.id
+            p.id
           )) })
         }
       )
@@ -651,9 +653,9 @@ const ar = {
     labelClassName: o,
     className: f,
     id: d,
-    ...p
+    ...v
   }, h) => {
-    const u = ce.useId(), b = d || `checkbox-${u}`, v = !!n, w = ce.useRef(null), g = ce.useCallback(
+    const u = ce.useId(), b = d || `checkbox-${u}`, p = !!n, w = ce.useRef(null), g = ce.useCallback(
       (x) => {
         w.current = x, typeof h == "function" ? h(x) : h && typeof h == "object" && (h.current = x);
       },
@@ -669,7 +671,7 @@ const ar = {
             ref: g,
             id: b,
             type: "checkbox",
-            "aria-invalid": v || void 0,
+            "aria-invalid": p || void 0,
             className: c(
               // radius-xs (5px): its own step on the scale. At 16px the 9px
               // button radius reads as a circle and the 7px chip radius still
@@ -680,10 +682,10 @@ const ar = {
               "focus-visible:outline-none focus-visible:focus-ring",
               "disabled:cursor-not-allowed disabled:bg-surface-hover",
               ar[s],
-              v ? "border-danger-border" : "border-border-strong",
+              p ? "border-danger-border" : "border-border-strong",
               f
             ),
-            ...p
+            ...v
           }
         ),
         t && /* @__PURE__ */ i("div", { className: "flex-1", children: [
@@ -693,7 +695,7 @@ const ar = {
               htmlFor: b,
               className: c(
                 "cursor-pointer",
-                v ? "text-danger-fg" : "text-text",
+                p ? "text-danger-fg" : "text-text",
                 or[s],
                 o
               ),
@@ -718,13 +720,13 @@ const cr = () => /* @__PURE__ */ e(Z, { icon: Nt, size: "md", color: "current" }
   className: o,
   minDate: f,
   maxDate: d,
-  format: p = "MM/dd/yyyy",
+  format: v = "MM/dd/yyyy",
   withTime: h = !1
 }, u) => {
-  const [b, v] = j(!1), [w, g] = j(() => t || /* @__PURE__ */ new Date()), x = se(null), _ = se(null), S = Le(b, _);
+  const [b, p] = j(!1), [w, g] = j(() => t || /* @__PURE__ */ new Date()), x = se(null), _ = se(null), S = Le(b, _);
   G(() => {
     const m = (z) => {
-      x.current && !x.current.contains(z.target) && v(!1);
+      x.current && !x.current.contains(z.target) && p(!1);
     };
     return b && document.addEventListener("mousedown", m), () => {
       document.removeEventListener("mousedown", m);
@@ -732,7 +734,7 @@ const cr = () => /* @__PURE__ */ e(Z, { icon: Nt, size: "md", color: "current" }
   }, [b]);
   const q = (m) => {
     if (!m) return "";
-    const z = m.getDate().toString().padStart(2, "0"), y = (m.getMonth() + 1).toString().padStart(2, "0"), $ = m.getFullYear(), N = p === "dd/MM/yyyy" ? `${z}/${y}/${$}` : p === "yyyy-MM-dd" ? `${$}-${y}-${z}` : `${y}/${z}/${$}`;
+    const z = m.getDate().toString().padStart(2, "0"), y = (m.getMonth() + 1).toString().padStart(2, "0"), $ = m.getFullYear(), N = v === "dd/MM/yyyy" ? `${z}/${y}/${$}` : v === "yyyy-MM-dd" ? `${$}-${y}-${z}` : `${y}/${z}/${$}`;
     return h ? `${N} ${A(m)}` : N;
   }, A = (m) => `${m.getHours().toString().padStart(2, "0")}:${m.getMinutes().toString().padStart(2, "0")}`, J = (m) => {
     const [z, y] = m.split(":").map(Number);
@@ -753,14 +755,14 @@ const cr = () => /* @__PURE__ */ e(Z, { icon: Nt, size: "md", color: "current" }
         y.setHours(t?.getHours() ?? 0, t?.getMinutes() ?? 0, 0, 0), r?.(y);
         return;
       }
-      r?.(m), v(!1);
+      r?.(m), p(!1);
     }
   }, H = () => {
     g(new Date(w.getFullYear(), w.getMonth() - 1, 1));
   }, te = () => {
     g(new Date(w.getFullYear(), w.getMonth() + 1, 1));
   }, Y = () => {
-    r?.(null), v(!1);
+    r?.(null), p(!1);
   }, K = c(
     "w-full border border-border-strong rounded-tile transition-colors duration-fast",
     "bg-surface text-text",
@@ -800,7 +802,7 @@ const cr = () => /* @__PURE__ */ e(Z, { icon: Nt, size: "md", color: "current" }
           disabled: s,
           required: a,
           readOnly: !0,
-          onClick: () => !s && v(!b),
+          onClick: () => !s && p(!b),
           className: c(K, "pr-10 cursor-pointer")
         }
       ),
@@ -808,7 +810,7 @@ const cr = () => /* @__PURE__ */ e(Z, { icon: Nt, size: "md", color: "current" }
         "button",
         {
           type: "button",
-          onClick: () => !s && v(!b),
+          onClick: () => !s && p(!b),
           disabled: s,
           className: "absolute inset-y-0 right-0 flex items-center pr-3 text-text-muted hover:text-text-muted",
           children: /* @__PURE__ */ e(cr, {})
@@ -886,7 +888,7 @@ const cr = () => /* @__PURE__ */ e(Z, { icon: Nt, size: "md", color: "current" }
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: () => v(!1),
+            onClick: () => p(!1),
             className: "text-sm text-info-fg hover:underline",
             children: "Close"
           }
@@ -910,11 +912,11 @@ const cr = () => /* @__PURE__ */ e(Z, { icon: Nt, size: "md", color: "current" }
     options: o,
     placeholder: f,
     containerClassName: d,
-    labelClassName: p,
+    labelClassName: v,
     className: h,
     id: u,
     searchable: b,
-    multiple: v,
+    multiple: p,
     value: w,
     onChange: g,
     allowCreate: x,
@@ -955,12 +957,12 @@ const cr = () => /* @__PURE__ */ e(Z, { icon: Nt, size: "md", color: "current" }
       () => Array.isArray(w) ? w.map(Te) : w == null ? void 0 : Te(w),
       [w]
     ), N = (T) => {
-      if (v) {
+      if (p) {
         const C = Array.isArray($) ? $ : [], D = C.includes(T) ? C.filter((O) => O !== T) : [...C, T];
         g?.(D);
       } else
         g?.(T), I(!1), te("");
-    }, W = v ? null : k.find((T) => T.value === $), re = v ? k.filter(
+    }, W = p ? null : k.find((T) => T.value === $), re = p ? k.filter(
       (T) => Array.isArray($) && $.includes(T.value)
     ) : [], ee = b && H ? k.filter(
       (T) => T.label.toLowerCase().includes(H.toLowerCase())
@@ -972,11 +974,11 @@ const cr = () => /* @__PURE__ */ e(Z, { icon: Nt, size: "md", color: "current" }
         label: C
       };
       if (z(k, D.value) || z(k, D.label)) {
-        N(D.value), te(""), v || I(!1);
+        N(D.value), te(""), p || I(!1);
         return;
       }
-      m((O) => [...O, D]), N(D.value), te(""), v || I(!1);
-    }, B = () => v ? re.length > 0 ? re.map((T) => T.label).join(", ") : f || "Select options" : W?.label || f || "Select an option";
+      m((O) => [...O, D]), N(D.value), te(""), p || I(!1);
+    }, B = () => p ? re.length > 0 ? re.map((T) => T.label).join(", ") : f || "Select options" : W?.label || f || "Select an option";
     return /* @__PURE__ */ i(
       "div",
       {
@@ -996,7 +998,7 @@ const cr = () => /* @__PURE__ */ e(Z, { icon: Nt, size: "md", color: "current" }
               className: c(
                 "block text-xs font-semibold uppercase tracking-label mb-1.5",
                 J ? "text-danger-fg" : "text-text-muted",
-                p
+                v
               ),
               children: t
             }
@@ -1067,7 +1069,7 @@ const cr = () => /* @__PURE__ */ e(Z, { icon: Nt, size: "md", color: "current" }
                 }
               ),
               /* @__PURE__ */ i("ul", { className: "min-h-0 flex-1 overflow-auto py-1", children: [
-                f && !v && /* @__PURE__ */ e(
+                f && !p && /* @__PURE__ */ e(
                   "li",
                   {
                     className: "cursor-pointer px-3 py-1.5 text-sm text-text-muted hover:bg-surface-hover",
@@ -1078,7 +1080,7 @@ const cr = () => /* @__PURE__ */ e(Z, { icon: Nt, size: "md", color: "current" }
                   }
                 ),
                 ee.map((T) => {
-                  const C = v ? Array.isArray($) && $.includes(T.value) : $ === T.value;
+                  const C = p ? Array.isArray($) && $.includes(T.value) : $ === T.value;
                   return /* @__PURE__ */ e(
                     "li",
                     {
@@ -1090,7 +1092,7 @@ const cr = () => /* @__PURE__ */ e(Z, { icon: Nt, size: "md", color: "current" }
                         C && "bg-accent-soft text-accent font-semibold"
                       ),
                       children: /* @__PURE__ */ i("div", { className: "flex items-center", children: [
-                        v && /* @__PURE__ */ e(
+                        p && /* @__PURE__ */ e(
                           "input",
                           {
                             type: "checkbox",
@@ -1140,11 +1142,11 @@ const mr = {
     endIcon: o,
     loading: f = !1,
     containerClassName: d,
-    labelClassName: p,
+    labelClassName: v,
     className: h,
     id: u,
     ...b
-  }, v) => {
+  }, p) => {
     const w = ce.useId(), g = u || `textfield-${w}`, x = !!n, _ = n || r ? `${g}-description` : void 0;
     return /* @__PURE__ */ i("div", { className: c("flex flex-col", a && "w-full", d), children: [
       t && /* @__PURE__ */ e(
@@ -1154,7 +1156,7 @@ const mr = {
           className: c(
             tt,
             x ? "text-danger-fg" : "text-text-muted",
-            p
+            v
           ),
           children: t
         }
@@ -1164,7 +1166,7 @@ const mr = {
         /* @__PURE__ */ e(
           "input",
           {
-            ref: v,
+            ref: p,
             id: g,
             "aria-invalid": x || void 0,
             "aria-describedby": _,
@@ -1209,11 +1211,11 @@ function fr({
   templatePlaceholder: o,
   showTemplate: f = !0
 }) {
-  const [d, p] = j([]);
+  const [d, v] = j([]);
   G(() => {
     let u = !0;
     return Promise.resolve(n?.()).then((b) => {
-      u && b && p(b.data ?? []);
+      u && b && v(b.data ?? []);
     }).catch(() => {
     }), () => {
       u = !1;
@@ -1265,11 +1267,11 @@ const ve = (...t) => t.filter(Boolean).join(" "), hr = (t) => /* @__PURE__ */ e(
     loading: o = !1,
     containerClassName: f,
     labelClassName: d,
-    className: p,
+    className: v,
     id: h,
     options: u,
     onRemoteSearch: b,
-    onSelect: v,
+    onSelect: p,
     debounceTime: w = 500,
     showAllOnOpen: g = !1,
     value: x,
@@ -1315,7 +1317,7 @@ const ve = (...t) => t.filter(Boolean).join(" "), hr = (t) => /* @__PURE__ */ e(
       const B = P.target.value;
       te(B), K(!0), z(!0), _ && _(P);
     }, N = (P) => {
-      te(P.label), K(!1), z(!1), v && v(P.value);
+      te(P.label), K(!1), z(!1), p && p(P.value);
     }, W = () => {
       (u.length > 0 || b) && (K(!0), z(!1));
     }, re = o || ie, ee = Y && (y.length > 0 || re), X = pe(() => q || I, [q]);
@@ -1365,7 +1367,7 @@ const ve = (...t) => t.filter(Boolean).join(" "), hr = (t) => /* @__PURE__ */ e(
                   // Altijd padding rechts voor de dropdown/loading icon
                   // State styles
                   J ? "border-danger-border text-danger-fg focus-visible:focus-ring" : "border-border-strong text-text",
-                  p || ""
+                  v || ""
                 ),
                 ...S
               }
@@ -1445,7 +1447,7 @@ const st = be(
     className: o,
     disabled: f,
     ...d
-  }, p) => /* @__PURE__ */ i(
+  }, v) => /* @__PURE__ */ i(
     "div",
     {
       className: c(
@@ -1463,7 +1465,7 @@ const st = be(
         /* @__PURE__ */ e(
           "input",
           {
-            ref: p,
+            ref: v,
             type: "search",
             value: t,
             disabled: f,
@@ -1564,12 +1566,12 @@ const vr = ({
   showCheck: f = !0,
   header: d
 }) => {
-  const [p, h] = j(!1), [u, b] = j(null), [v, w] = j({ top: 0, left: 0 }), g = se(null), x = se(null), _ = se(null), S = se(null), q = Le(p, x, { placement: a }), A = se(null), J = () => Array.from(
+  const [v, h] = j(!1), [u, b] = j(null), [p, w] = j({ top: 0, left: 0 }), g = se(null), x = se(null), _ = se(null), S = se(null), q = Le(v, x, { placement: a }), A = se(null), J = () => Array.from(
     S.current?.querySelectorAll("button[data-option-value]:not(:disabled)") ?? []
   );
   G(() => {
-    p && J()[0]?.focus();
-  }, [p]);
+    v && J()[0]?.focus();
+  }, [v]);
   const V = (m) => {
     if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(m.key)) return;
     const y = J();
@@ -1582,17 +1584,17 @@ const vr = ({
     const m = (z) => {
       g.current && (!g.current.contains(z.target) || _.current && !_.current.contains(z.target)) && (h(!1), b(null), A.current && (clearTimeout(A.current), A.current = null));
     };
-    return p && document.addEventListener("mousedown", m), () => {
+    return v && document.addEventListener("mousedown", m), () => {
       document.removeEventListener("mousedown", m);
     };
-  }, [p]), G(() => {
+  }, [v]), G(() => {
     const m = (z) => {
       z.key === "Escape" && (h(!1), b(null), x.current?.focus(), A.current && (clearTimeout(A.current), A.current = null));
     };
-    return p && document.addEventListener("keydown", m), () => {
+    return v && document.addEventListener("keydown", m), () => {
       document.removeEventListener("keydown", m);
     };
-  }, [p]), G(() => {
+  }, [v]), G(() => {
     if (u && g.current) {
       const m = g.current.querySelector(
         `[data-option-value="${u}"]`
@@ -1609,7 +1611,7 @@ const vr = ({
     A.current && clearTimeout(A.current);
   }, []);
   const I = (m) => {
-    m.stopPropagation(), !l && (h(!p), b(null), A.current && (clearTimeout(A.current), A.current = null));
+    m.stopPropagation(), !l && (h(!v), b(null), A.current && (clearTimeout(A.current), A.current = null));
   }, H = (m, z, y) => {
     m.stopPropagation(), !z.disabled && !z.divider && (!z.children || z.children.length === 0) && (s?.(z.value, y), h(!1), b(null));
   }, te = (m) => {
@@ -1643,14 +1645,14 @@ const vr = ({
             onClick: I,
             disabled: l,
             "aria-haspopup": "menu",
-            "aria-expanded": p,
+            "aria-expanded": v,
             className: c("inline-flex items-center justify-center", {
               "opacity-50 cursor-not-allowed": l
             }),
             children: t
           }
         ),
-        p && /* @__PURE__ */ e("div", { ref: S, className: ie, style: q, onKeyDown: V, children: /* @__PURE__ */ i("div", { className: "p-2", role: "menu", children: [
+        v && /* @__PURE__ */ e("div", { ref: S, className: ie, style: q, onKeyDown: V, children: /* @__PURE__ */ i("div", { className: "p-2", role: "menu", children: [
           d && (typeof d == "string" ? /* @__PURE__ */ e("div", { className: "text-xs font-medium text-text-muted uppercase tracking-label px-3 py-2", children: d }) : d),
           r.map((m, z) => {
             if (m.divider)
@@ -1701,8 +1703,8 @@ const vr = ({
                   ref: _,
                   className: k,
                   style: {
-                    top: `${v.top}px`,
-                    left: `${v.left}px`
+                    top: `${p.top}px`,
+                    left: `${p.left}px`
                   },
                   onMouseEnter: () => {
                     A.current && (clearTimeout(A.current), A.current = null), b(m.value);
@@ -1905,11 +1907,11 @@ const Sr = (t) => {
   onSearchChange: o,
   filters: f = [],
   toolbarActions: d = [],
-  paginated: p = !1,
+  paginated: v = !1,
   defaultPageSize: h = 10,
   actions: u = [],
   onRowClick: b,
-  selectable: v = !1,
+  selectable: p = !1,
   selectedRows: w = [],
   onSelectionChange: g,
   getRowKey: x = (te, Y) => Y,
@@ -1956,10 +1958,10 @@ const Sr = (t) => {
       return oe < F ? ue = -1 : oe > F && (ue = 1), m.direction === "desc" ? -ue : ue;
     }) : W;
   }, [W, m, r]), ee = pe(() => {
-    if (!p) return re;
+    if (!v) return re;
     const E = y.page * y.pageSize, U = E + y.pageSize;
     return re.slice(E, U);
-  }, [re, y, p]), X = xe(
+  }, [re, y, v]), X = xe(
     (E) => {
       r.find((ne) => ne.id === E)?.sortable && z((ne) => ne.column !== E ? { column: E, direction: "asc" } : ne.direction === "asc" ? { column: E, direction: "desc" } : { column: null, direction: null });
     },
@@ -1996,7 +1998,7 @@ const Sr = (t) => {
     return w.some(
       (ne, oe) => x(ne, oe) === U
     );
-  }), Q = Nr[J], ae = H ? "bg-surface-sunk" : "bg-surface", de = c("text-text", Q), ge = s || f.length > 0 || d.length > 0, he = p && C > 0, Pe = he || S !== void 0;
+  }), Q = Nr[J], ae = H ? "bg-surface-sunk" : "bg-surface", de = c("text-text", Q), ge = s || f.length > 0 || d.length > 0, he = v && C > 0, Pe = he || S !== void 0;
   return /* @__PURE__ */ i("div", { className: c("flex min-w-0 flex-col", V), children: [
     ge && /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center gap-2 pb-3", children: [
       s && /* @__PURE__ */ e(
@@ -2013,7 +2015,7 @@ const Sr = (t) => {
     ] }),
     /* @__PURE__ */ e("div", { className: "relative w-full overflow-x-auto rounded-lg ring-1 ring-border", children: /* @__PURE__ */ i("table", { ref: N, className: "min-w-full border-collapse text-base text-text", children: [
       /* @__PURE__ */ e("thead", { className: c(ae, "h-control-lg"), children: /* @__PURE__ */ i("tr", { children: [
-        v && /* @__PURE__ */ e("th", { className: c(de, "w-10"), children: /* @__PURE__ */ e(
+        p && /* @__PURE__ */ e("th", { className: c(de, "w-10"), children: /* @__PURE__ */ e(
           ye,
           {
             size: "sm",
@@ -2061,7 +2063,7 @@ const Sr = (t) => {
         u.length > 0 && /* @__PURE__ */ e("th", { className: c(de, "w-10"), children: /* @__PURE__ */ e("span", { className: "sr-only", children: "Actions" }) })
       ] }) }),
       /* @__PURE__ */ e("tbody", { children: n ? Array.from({ length: kr }).map((E, U) => /* @__PURE__ */ i("tr", { className: "animate-pulse border-t border-border-subtle", "aria-hidden": !0, children: [
-        v && /* @__PURE__ */ e("td", { className: c(de, "h-row-lg"), children: /* @__PURE__ */ e("span", { className: "block size-4 rounded-xs bg-surface-hover" }) }),
+        p && /* @__PURE__ */ e("td", { className: c(de, "h-row-lg"), children: /* @__PURE__ */ e("span", { className: "block size-4 rounded-xs bg-surface-hover" }) }),
         r.map((ne, oe) => /* @__PURE__ */ e("td", { className: c(de, "h-row-lg"), style: { width: ne.width }, children: /* @__PURE__ */ e(
           "span",
           {
@@ -2073,7 +2075,7 @@ const Sr = (t) => {
       ] }, `skeleton-${U}`)) : ee.length === 0 ? /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e(
         "td",
         {
-          colSpan: r.length + (v ? 1 : 0) + (u.length > 0 ? 1 : 0),
+          colSpan: r.length + (p ? 1 : 0) + (u.length > 0 ? 1 : 0),
           className: c(
             de,
             "border-t border-border-subtle py-10 text-center text-text-muted"
@@ -2101,7 +2103,7 @@ const Sr = (t) => {
               F.stopPropagation(), b?.(E, U);
             },
             children: [
-              v && /* @__PURE__ */ e("td", { className: de, children: /* @__PURE__ */ e(
+              p && /* @__PURE__ */ e("td", { className: de, children: /* @__PURE__ */ e(
                 ye,
                 {
                   size: "sm",
@@ -2247,12 +2249,12 @@ const Sr = (t) => {
 }) => {
   const [f, d] = j(
     r || n || t[0]?.id || ""
-  ), p = n || f, h = (g) => {
+  ), v = n || f, h = (g) => {
     s ? s(g) : d(g);
   }, u = {
-    activeTab: p,
+    activeTab: v,
     setActiveTab: h
-  }, b = t.find((g) => g.id === p), v = c(
+  }, b = t.find((g) => g.id === v), p = c(
     "flex",
     {
       "border-b border-border px-2": a === "default" || a === "underline",
@@ -2287,16 +2289,16 @@ const Sr = (t) => {
     return c(_, S, q, A, J, V);
   };
   return /* @__PURE__ */ e(Er.Provider, { value: u, children: /* @__PURE__ */ i("div", { children: [
-    /* @__PURE__ */ e("div", { className: v, role: "tablist", children: t.map((g) => /* @__PURE__ */ e(
+    /* @__PURE__ */ e("div", { className: p, role: "tablist", children: t.map((g) => /* @__PURE__ */ e(
       "button",
       {
         type: "button",
         role: "tab",
-        "aria-selected": p === g.id,
+        "aria-selected": v === g.id,
         "aria-controls": `tabpanel-${g.id}`,
         disabled: g.disabled,
         onClick: () => !g.disabled && h(g.id),
-        className: w(g, p === g.id),
+        className: w(g, v === g.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 })
@@ -2308,8 +2310,8 @@ const Sr = (t) => {
       "div",
       {
         role: "tabpanel",
-        id: `tabpanel-${p}`,
-        "aria-labelledby": `tab-${p}`,
+        id: `tabpanel-${v}`,
+        "aria-labelledby": `tab-${v}`,
         className: "mt-4",
         children: b.content
       }
@@ -2332,7 +2334,7 @@ function at({
   className: o,
   backdropClassName: f,
   children: d,
-  footer: p,
+  footer: v,
   showCloseButton: h = !0
 }) {
   const u = se(null), b = se(null);
@@ -2345,7 +2347,7 @@ function at({
   }, [t, l, r]), G(() => (t ? (b.current = document.activeElement, u.current && u.current.focus(), document.body.style.overflow = "hidden") : (b.current && b.current.focus(), document.body.style.overflow = ""), () => {
     document.body.style.overflow = "";
   }), [t]);
-  const v = (w) => {
+  const p = (w) => {
     a && w.target === w.currentTarget && r();
   };
   return t ? /* @__PURE__ */ e(
@@ -2357,7 +2359,7 @@ function at({
         // 'animate-fade-in',
         f
       ),
-      onClick: v,
+      onClick: p,
       children: /* @__PURE__ */ i(
         "div",
         {
@@ -2394,7 +2396,7 @@ function at({
               )
             ] }),
             /* @__PURE__ */ e("div", { className: "p-6", children: d }),
-            p && /* @__PURE__ */ e("div", { className: "px-6 py-4", children: p })
+            v && /* @__PURE__ */ e("div", { className: "px-6 py-4", children: v })
           ]
         }
       )
@@ -2443,12 +2445,12 @@ const Mr = {
   italic: o = !1,
   underline: f = !1,
   lineHeight: d = "normal",
-  as: p,
+  as: v,
   className: h,
   children: u,
   ...b
 }) => {
-  const v = p || Lr(t), w = t === "caption", g = t === "label", x = t === "code", _ = c(
+  const p = v || Lr(t), w = t === "caption", g = t === "label", x = t === "code", _ = c(
     "font-sans",
     // Variant — caption and label pin their own size/weight
     w && "text-xs text-text-subtle",
@@ -2467,7 +2469,7 @@ const Mr = {
     l && "truncate",
     h
   );
-  return /* @__PURE__ */ e(v, { className: _, ...b, children: u });
+  return /* @__PURE__ */ e(p, { className: _, ...b, children: u });
 };
 function Lr(t) {
   return {
@@ -2487,11 +2489,11 @@ const Pr = ({
   accept: o,
   onListFiles: f,
   onListMounts: d,
-  onUploadFile: p,
+  onUploadFile: v,
   onDownloadFile: h,
   onRegisterFile: u
 }) => {
-  const [b, v] = j(!1), [w, g] = j([]), [x, _] = j(null), [S, q] = j("/"), [A, J] = j([]), [V, I] = j(!1), [H, te] = j(""), [Y, K] = j(
+  const [b, p] = j(!1), [w, g] = j([]), [x, _] = j(null), [S, q] = j("/"), [A, J] = j([]), [V, I] = j(!1), [H, te] = j(""), [Y, K] = j(
     typeof t == "object" ? t : null
   ), [ie, k] = j(!1), [m, z] = j(""), y = se(null);
   G(() => {
@@ -2537,7 +2539,7 @@ const Pr = ({
           providerKey: L.name,
           ownerId: "me"
         };
-        K(de), r(de, ae), v(!1);
+        K(de), r(de, ae), p(!1);
       } catch (Q) {
         console.error("Local file selection failed", Q);
       } finally {
@@ -2549,7 +2551,7 @@ const Pr = ({
     if (!(!L || !x)) {
       I(!0);
       try {
-        const Q = await L.arrayBuffer(), ae = await p?.({
+        const Q = await L.arrayBuffer(), ae = await v?.({
           file: new Uint8Array(Q),
           filename: L.name,
           mimeType: L.type || "application/octet-stream",
@@ -2558,7 +2560,7 @@ const Pr = ({
         });
         if (ae?.data) {
           const de = ae.data;
-          K(de), r(de, new Uint8Array(Q)), v(!1);
+          K(de), r(de, new Uint8Array(Q)), p(!1);
         }
       } catch (Q) {
         console.error("Upload failed", Q);
@@ -2591,7 +2593,7 @@ const Pr = ({
     I(!0);
     try {
       const L = await h?.(M.id);
-      K(M), r(M, L), v(!1);
+      K(M), r(M, L), p(!1);
     } catch (L) {
       console.error("Failed to download file", L);
     } finally {
@@ -2696,7 +2698,7 @@ const Pr = ({
     /* @__PURE__ */ i(
       "div",
       {
-        onClick: () => !l && v(!0),
+        onClick: () => !l && p(!0),
         className: c(
           "flex items-center gap-3 px-3 py-2 border rounded-lg cursor-pointer transition-colors",
           "hover:border-border-strong bg-surface",
@@ -2723,7 +2725,7 @@ const Pr = ({
       {
         open: b,
         onClose: () => {
-          v(!1), _(null), q("/"), k(!1);
+          p(!1), _(null), q("/"), k(!1);
         },
         title: x ? `Explorer: ${x.name}` : "Select Storage Mount",
         size: "lg",
@@ -2874,11 +2876,11 @@ const Pr = ({
     containerClassName: o,
     labelClassName: f,
     className: d,
-    id: p,
+    id: v,
     rows: h = 4,
     ...u
   }, b) => {
-    const v = ce.useId(), w = p || `textarea-${v}`, g = !!n, x = n || r ? `${w}-description` : void 0;
+    const p = ce.useId(), w = v || `textarea-${p}`, g = !!n, x = n || r ? `${w}-description` : void 0;
     return /* @__PURE__ */ i("div", { className: c("flex flex-col", a && "w-full", o), children: [
       t && /* @__PURE__ */ e(
         "label",
@@ -3027,11 +3029,11 @@ const ts = ({
   validate: o,
   submitButton: f = { label: "Submit", variant: "primary" },
   cancelButton: d = { label: "Cancel", variant: "outline" },
-  showButtons: p = !0,
+  showButtons: v = !0,
   layout: h = "vertical",
   size: u = "md",
   loading: b = !1,
-  className: v,
+  className: p,
   ref: w,
   sdk: g
 }) => {
@@ -3569,12 +3571,12 @@ const ts = ({
       "max-w-6xl": u === "lg",
       "max-w-full": u === "full"
     },
-    v
+    p
   ), ie = u === "full" ? "md" : u;
   return /* @__PURE__ */ i("form", { ref: w, onSubmit: H, className: K, children: [
-    !p && /* @__PURE__ */ e("button", { type: "submit", className: "hidden", tabIndex: -1, "aria-hidden": !0 }),
+    !v && /* @__PURE__ */ e("button", { type: "submit", className: "hidden", tabIndex: -1, "aria-hidden": !0 }),
     /* @__PURE__ */ e("div", { className: "flex flex-col", children: t.map(Y) }),
-    p && /* @__PURE__ */ e("div", { className: "flex items-center gap-2 border-t border-border-subtle py-4", children: /* @__PURE__ */ i(ke, { children: [
+    v && /* @__PURE__ */ e("div", { className: "flex items-center gap-2 border-t border-border-subtle py-4", children: /* @__PURE__ */ i(ke, { children: [
       /* @__PURE__ */ e("div", { className: "ml-auto" }),
       s && /* @__PURE__ */ e(
         le,
@@ -3794,7 +3796,7 @@ function Be({
   tableColumns: f,
   tableRows: d
 }) {
-  const p = r ?? (o ? "table" : "text"), h = n ?? d ?? Kr[p], u = s ?? f ?? (p === "cards" ? 3 : 6), b = /* @__PURE__ */ e("div", { className: c("w-full animate-pulse", l), "aria-hidden": !0, children: a ?? /* @__PURE__ */ e(Ur, { shape: p, rows: h, columns: u }) });
+  const v = r ?? (o ? "table" : "text"), h = n ?? d ?? Kr[v], u = s ?? f ?? (v === "cards" ? 3 : 6), b = /* @__PURE__ */ e("div", { className: c("w-full animate-pulse", l), "aria-hidden": !0, children: a ?? /* @__PURE__ */ e(Ur, { shape: v, rows: h, columns: u }) });
   return t === "inline" ? b : /* @__PURE__ */ e("main", { className: "flex-1 bg-surface p-6", children: b });
 }
 const Wr = {
@@ -4320,11 +4322,11 @@ const fs = ({
   showError: o = !0,
   fallback: f,
   loadingContent: d,
-  errorContent: p,
+  errorContent: v,
   className: h,
   onLoad: u,
   onError: b,
-  ...v
+  ...p
 }) => {
   const [w, g] = j(!0), [x, _] = j(!1), [S, q] = j(t), A = (K) => {
     g(!1), _(!1), u?.(K);
@@ -4379,7 +4381,7 @@ const fs = ({
     /* @__PURE__ */ e(
       "img",
       {
-        ...v,
+        ...p,
         src: S,
         alt: r,
         className: I,
@@ -4388,7 +4390,7 @@ const fs = ({
       }
     ),
     w && l && /* @__PURE__ */ e("div", { className: H, children: d || te }),
-    x && o && /* @__PURE__ */ e("div", { className: H, children: p || Y })
+    x && o && /* @__PURE__ */ e("div", { className: H, children: v || Y })
   ] });
 };
 function hs({
@@ -4424,11 +4426,11 @@ function xs({
   onSelect: o,
   onActiveIndexChange: f,
   isActive: d,
-  unread: p,
+  unread: v,
   dimmed: h,
   groupBy: u,
   groups: b,
-  renderGroupHeader: v,
+  renderGroupHeader: p,
   stickyGroupHeaders: w = !1,
   collapsibleGroups: g = !1,
   hideGroupCount: x = !1,
@@ -4494,7 +4496,7 @@ function xs({
   if (t.length === 0 && H)
     return /* @__PURE__ */ e("div", { className: ee, children: H });
   const X = t.length > 0 && S.length === t.length, P = S.length > 0 && !X, B = (C, D, O) => {
-    const R = d?.(C, D) ?? !1, M = p?.(C, D) ?? !1, L = h?.(C, D) ?? !1, Q = _ && N(C);
+    const R = d?.(C, D) ?? !1, M = v?.(C, D) ?? !1, L = h?.(C, D) ?? !1, Q = _ && N(C);
     return /* @__PURE__ */ i(
       "li",
       {
@@ -4576,7 +4578,7 @@ function xs({
           ),
           "aria-expanded": g ? !Q : void 0,
           style: w ? { top: V ? 28 : 0 } : void 0,
-          children: v ? v(R, L.map((he) => he.item)) : /* @__PURE__ */ i(ke, { children: [
+          children: p ? p(R, L.map((he) => he.item)) : /* @__PURE__ */ i(ke, { children: [
             g && /* @__PURE__ */ e(
               Ae,
               {
@@ -4715,22 +4717,22 @@ const xn = ({
   className: o,
   backLabel: f = "Back",
   backClassName: d,
-  onBack: p,
+  onBack: v,
   editable: h = !1,
   onTitleChange: u
 }) => {
-  const [b, v] = j(!1), [w, g] = j(r), x = se(null);
+  const [b, p] = j(!1), [w, g] = j(r), x = se(null);
   G(() => {
     g(r);
   }, [r]), G(() => {
     b && x.current && (x.current.focus(), x.current.select());
   }, [b]);
   const _ = () => {
-    h && v(!0);
+    h && p(!0);
   }, S = () => {
-    v(!1), w.trim() !== "" && w !== r && u ? u(w.trim()) : g(r);
+    p(!1), w.trim() !== "" && w !== r && u ? u(w.trim()) : g(r);
   }, q = (A) => {
-    A.key === "Enter" ? x.current?.blur() : A.key === "Escape" && (g(r), v(!1));
+    A.key === "Enter" ? x.current?.blur() : A.key === "Escape" && (g(r), p(!1));
   };
   return /* @__PURE__ */ i(
     "div",
@@ -4747,9 +4749,9 @@ const xn = ({
       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-4 text-text", children: [
-            p && // Ghost: a framed box around a back chevron makes the way out of a
+            v && // Ghost: a framed box around a back chevron makes the way out of a
             // page look like the page's primary control.
-            /* @__PURE__ */ e(le, { variant: "ghost", onClick: p, leftIcon: /* @__PURE__ */ e(Z, { icon: Ce, size: "md" }), iconOnly: !0 }),
+            /* @__PURE__ */ e(le, { variant: "ghost", onClick: v, leftIcon: /* @__PURE__ */ e(Z, { icon: Ce, size: "md" }), iconOnly: !0 }),
             /* @__PURE__ */ i("div", { className: "min-w-0 flex-1", children: [
               b ? /* @__PURE__ */ e(
                 "input",
@@ -4842,18 +4844,20 @@ const xn = ({
   meta: n,
   actions: s,
   onBack: a,
-  surface: l,
-  headerContent: o,
-  loading: f = !1,
-  loadingShape: d = "table",
-  empty: p,
-  padding: h = "md",
-  scroll: u = !0,
-  className: b,
-  contentClassName: v,
-  children: w
+  editable: l,
+  onTitleChange: o,
+  surface: f,
+  headerContent: d,
+  loading: v = !1,
+  loadingShape: h = "table",
+  empty: u,
+  padding: b = "md",
+  scroll: p = !0,
+  className: w,
+  contentClassName: g,
+  children: x
 }) => {
-  const g = f ? /* @__PURE__ */ e(Be, { variant: "inline", shape: d }) : p ? /* @__PURE__ */ e("div", { className: "flex flex-col items-center justify-center py-12", children: p }) : w;
+  const _ = v ? /* @__PURE__ */ e(Be, { variant: "inline", shape: h }) : u ? /* @__PURE__ */ e("div", { className: "flex flex-col items-center justify-center py-12", children: u }) : x;
   return /* @__PURE__ */ i(
     "div",
     {
@@ -4862,32 +4866,34 @@ const xn = ({
         // element that scrolls today. Taking the scroll over here is what pins
         // the header; without `min-h-0` the body would grow past the card
         // instead of scrolling inside it.
-        u ? "flex h-full min-h-0 flex-col" : "flex flex-col",
-        b
+        p ? "flex h-full min-h-0 flex-col" : "flex flex-col",
+        w
       ),
       children: [
         /* @__PURE__ */ e(
           xn,
           {
-            surface: l ?? u,
+            surface: f ?? p,
             title: t,
             subtitle: r,
             meta: n,
             actions: s,
             onBack: a,
-            className: u ? "shrink-0" : void 0,
-            children: o
+            editable: l,
+            onTitleChange: o,
+            className: p ? "shrink-0" : void 0,
+            children: d
           }
         ),
         /* @__PURE__ */ e(
           "div",
           {
             className: c(
-              u && "min-h-0 flex-1 overflow-y-auto",
-              bn[h],
-              v
+              p && "min-h-0 flex-1 overflow-y-auto",
+              bn[b],
+              g
             ),
-            children: g
+            children: _
           }
         )
       ]
@@ -4936,17 +4942,17 @@ const pn = {
   loading: o = !1,
   loadingShape: f = "form",
   padding: d = "md",
-  className: p,
+  className: v,
   contentClassName: h
 }) => {
-  const u = gn(), b = mt(), v = se(s);
-  v.current = s;
+  const u = gn(), b = mt(), p = se(s);
+  p.current = s;
   const w = !!s;
   G(() => {
     if (u && !(!w && !l))
       return u.setTrail(b, {
         title: l,
-        onBack: w ? () => v.current?.() : void 0
+        onBack: w ? () => p.current?.() : void 0
       }), () => u.setTrail(b, null);
   }, [u, b, l, w]);
   const g = r.length > 0 || n.length > 0;
@@ -4957,13 +4963,13 @@ const pn = {
      * panel that has not been migrated yet. This way a short page still drops
      * its footer to the bottom, and a long one keeps it pinned while scrolling.
      */
-    /* @__PURE__ */ i("div", { className: c("flex min-h-full flex-col", p), children: [
+    /* @__PURE__ */ i("div", { className: c("flex min-h-full flex-col", v), children: [
       !u && (w || l) && /* @__PURE__ */ i("div", { className: "flex shrink-0 items-center gap-2 px-5 pt-4", children: [
         w && /* @__PURE__ */ e(
           le,
           {
             variant: "ghost",
-            onClick: () => v.current?.(),
+            onClick: () => p.current?.(),
             "aria-label": a,
             leftIcon: /* @__PURE__ */ e(Z, { icon: Ce, size: "sm" }),
             iconOnly: !0
@@ -5045,7 +5051,7 @@ function Es({ label: t, dotColor: r, onClick: n, className: s }) {
   );
 }
 function vn(t) {
-  const { id: r, header: n, accessor: s, label: a, tone: l, visible: o, width: f, sortable: d, align: p } = t;
+  const { id: r, header: n, accessor: s, label: a, tone: l, visible: o, width: f, sortable: d, align: v } = t;
   return {
     id: r,
     header: n,
@@ -5056,7 +5062,7 @@ function vn(t) {
     },
     width: f,
     sortable: d,
-    align: p
+    align: v
   };
 }
 function zs(t) {
@@ -5069,7 +5075,7 @@ function zs(t) {
     onTone: o = "success",
     offTone: f = "secondary",
     width: d,
-    sortable: p
+    sortable: v
   } = t;
   return vn({
     id: r,
@@ -5078,7 +5084,7 @@ function zs(t) {
     label: (h) => h ? a : l,
     tone: (h) => h ? o : f,
     width: d,
-    sortable: p
+    sortable: v
   });
 }
 function Ts(t) {
@@ -5091,18 +5097,18 @@ function Ts(t) {
     separator: o = ", ",
     width: f,
     searchable: d,
-    sortable: p
+    sortable: v
   } = t;
   return {
     id: r,
     header: n,
     accessor: (h) => {
-      const u = s(h), v = (u == null ? [] : Array.isArray(u) ? u : [u]).filter(Boolean).map((w) => a(w) ?? w);
-      return v.length ? v.join(o) : l;
+      const u = s(h), p = (u == null ? [] : Array.isArray(u) ? u : [u]).filter(Boolean).map((w) => a(w) ?? w);
+      return p.length ? p.join(o) : l;
     },
     width: f,
     searchable: d,
-    sortable: p
+    sortable: v
   };
 }
 function yn(t, r) {
@@ -5130,14 +5136,14 @@ const Ms = ({
     }
   }, l = (h) => h ? "Ja" : "Nee", o = (h, u) => {
     if (!u) return String(h || "-");
-    const b = u.find((v) => v.value === h);
+    const b = u.find((p) => p.value === h);
     return b ? b.label : String(h || "-");
   }, f = xe(
     (h) => {
       const u = yn(r, h.name);
       if (h.type === "array") {
-        const v = u;
-        return !v || v.length === 0 ? /* @__PURE__ */ e(
+        const p = u;
+        return !p || p.length === 0 ? /* @__PURE__ */ e(
           fe,
           {
             variant: "body",
@@ -5145,7 +5151,7 @@ const Ms = ({
             className: "text-text-muted",
             children: "Geen items"
           }
-        ) : /* @__PURE__ */ e("div", { className: "space-y-3", children: v.map((w, g) => /* @__PURE__ */ i(
+        ) : /* @__PURE__ */ e("div", { className: "space-y-3", children: p.map((w, g) => /* @__PURE__ */ i(
           "div",
           {
             className: "p-4 border border-border rounded-xl space-y-3",
@@ -5226,14 +5232,14 @@ const Ms = ({
       if (h.type === "custom" && h.customComponent)
         return h.customComponent({ value: u });
       if (h.format) {
-        const v = h.format(u, r);
+        const p = h.format(u, r);
         return /* @__PURE__ */ e(
           fe,
           {
             variant: "body",
             size: "sm",
             className: "text-text",
-            children: v
+            children: p
           }
         );
       }
@@ -5278,7 +5284,7 @@ const Ms = ({
     (h) => {
       if (h.conditional && !h.conditional(r))
         return null;
-      const u = h.items.filter((v) => !(v.hidden || v.conditional && !v.conditional(r)));
+      const u = h.items.filter((p) => !(p.hidden || p.conditional && !p.conditional(r)));
       if (u.length === 0) return null;
       const b = c(
         "space-y-4",
@@ -5320,28 +5326,28 @@ const Ms = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ e("div", { className: "md:col-span-2", children: /* @__PURE__ */ e("div", { className: b, children: u.map((v) => /* @__PURE__ */ i(
+            /* @__PURE__ */ e("div", { className: "md:col-span-2", children: /* @__PURE__ */ e("div", { className: b, children: u.map((p) => /* @__PURE__ */ i(
               "div",
               {
                 className: "space-y-1",
                 style: {
-                  width: typeof v.width == "string" ? v.width : void 0,
-                  gridColumn: typeof v.width == "number" ? `span ${v.width} / span ${v.width}` : void 0
+                  width: typeof p.width == "string" ? p.width : void 0,
+                  gridColumn: typeof p.width == "number" ? `span ${p.width} / span ${p.width}` : void 0
                 },
                 children: [
-                  v.type !== "custom" && /* @__PURE__ */ e(
+                  p.type !== "custom" && /* @__PURE__ */ e(
                     fe,
                     {
                       variant: "label",
                       size: "sm",
                       className: "font-medium text-text-muted",
-                      children: v.label
+                      children: p.label
                     }
                   ),
-                  f(v)
+                  f(p)
                 ]
               },
-              v.name
+              p.name
             )) }) })
           ]
         },
@@ -5349,7 +5355,7 @@ const Ms = ({
       );
     },
     [r, f]
-  ), p = c(
+  ), v = c(
     "space-y-6",
     {
       "max-w-md": n === "sm",
@@ -5359,7 +5365,7 @@ const Ms = ({
     },
     s
   );
-  return /* @__PURE__ */ e("div", { className: p, children: /* @__PURE__ */ e("div", { className: "space-y-8", children: t.map(d) }) });
+  return /* @__PURE__ */ e("div", { className: v, children: /* @__PURE__ */ e("div", { className: "space-y-8", children: t.map(d) }) });
 }, Nn = () => /* @__PURE__ */ e(Be, { variant: "inline", shape: "menu" }), ot = ({ item: t, isSelectedHandler: r, onClick: n, depth: s = 0 }) => {
   const a = !!(t.children && t.children.length > 0), l = r ? r(t.path) : !1;
   if (a)
@@ -5376,7 +5382,7 @@ const Ms = ({
           ]
         }
       ),
-      /* @__PURE__ */ e("ul", { className: "flex flex-col gap-px", children: t.children?.map((d, p) => /* @__PURE__ */ e(
+      /* @__PURE__ */ e("ul", { className: "flex flex-col gap-px", children: t.children?.map((d, v) => /* @__PURE__ */ e(
         ot,
         {
           item: d,
@@ -5384,7 +5390,7 @@ const Ms = ({
           onClick: n,
           depth: s + 1
         },
-        p
+        v
       )) })
     ] });
   const o = t.action, f = o?.visibility !== "always";
@@ -5514,7 +5520,7 @@ const Ms = ({
   children: f,
   ...d
 }) => {
-  const p = `h${t}`, h = c(
+  const v = `h${t}`, h = c(
     "font-sans text-pretty",
     wn[r || En(t)],
     kn[n],
@@ -5523,7 +5529,7 @@ const Ms = ({
     l && "truncate",
     o
   );
-  return /* @__PURE__ */ e(p, { className: h, ...d, children: f });
+  return /* @__PURE__ */ e(v, { className: h, ...d, children: f });
 };
 function En(t) {
   return {
@@ -5543,11 +5549,11 @@ const As = ({
   initialCommandPath: a,
   initialActiveIndex: l
 }) => {
-  const [o, f] = j(""), [d, p] = j(a || []), [h, u] = j(l || 0), b = se(null), v = se(null), g = (d.length ? t.find((x) => x.id === d[0])?.subCommands || [] : t).filter(
+  const [o, f] = j(""), [d, v] = j(a || []), [h, u] = j(l || 0), b = se(null), p = se(null), g = (d.length ? t.find((x) => x.id === d[0])?.subCommands || [] : t).filter(
     (x) => x.label.toLowerCase().includes(o.toLowerCase())
   );
   return G(() => {
-    r || (f(""), p(a || []), u(l || 0));
+    r || (f(""), v(a || []), u(l || 0));
   }, [r]), G(() => {
     const x = (_) => {
       if (r) {
@@ -5563,7 +5569,7 @@ const As = ({
           );
         else if (_.key === "Enter") {
           const S = g[h];
-          S && (S.subCommands ? (p([...d, S.id]), u(0)) : S.action && (S.action(), n()));
+          S && (S.subCommands ? (v([...d, S.id]), u(0)) : S.action && (S.action(), n()));
         }
       }
     };
@@ -5575,7 +5581,7 @@ const As = ({
     return r && document.addEventListener("mousedown", x), () => document.removeEventListener("mousedown", x);
   }, [r, n]), G(() => {
     if (!r) return;
-    v.current?.querySelector(`[data-index="${h}"]`)?.scrollIntoView({ block: "nearest" });
+    p.current?.querySelector(`[data-index="${h}"]`)?.scrollIntoView({ block: "nearest" });
   }, [h, r]), r ? /* @__PURE__ */ e("div", { className: "fixed inset-0 z-modal flex items-center justify-center bg-scrim", children: /* @__PURE__ */ i(
     "div",
     {
@@ -5599,7 +5605,7 @@ const As = ({
         /* @__PURE__ */ i(
           "div",
           {
-            ref: v,
+            ref: p,
             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" }),
@@ -5609,7 +5615,7 @@ const As = ({
                   "data-index": _,
                   className: `flex items-center p-2 cursor-pointer rounded-md ${_ === h ? "bg-accent-soft text-accent" : "text-text"}`,
                   onClick: () => {
-                    x.subCommands ? (p([...d, x.id]), u(0)) : x.action && (x.action(), n());
+                    x.subCommands ? (v([...d, x.id]), u(0)) : x.action && (x.action(), n());
                   },
                   onMouseEnter: () => u(_),
                   children: [
@@ -5712,7 +5718,7 @@ const As = ({
     borderColor: o,
     className: f,
     children: d,
-    ...p
+    ...v
   }, h) => /* @__PURE__ */ e(
     "div",
     {
@@ -5727,7 +5733,7 @@ const As = ({
         o && Dn[o],
         f
       ),
-      ...p,
+      ...v,
       children: d
     }
   )
@@ -5757,22 +5763,22 @@ function Ls({
   componentProps: l,
   className: o
 }) {
-  const f = se(null), [d, p] = j(!0), [h, u] = j(!1), [b, v] = j(null), w = se(null);
+  const f = se(null), [d, v] = j(!0), [h, u] = j(!1), [b, p] = j(null), w = se(null);
   se(null);
   const g = se(r);
   return g.current = r, G(() => {
     let x = !0;
     return (async () => {
-      p(!0), u(!1), v(null);
+      v(!0), u(!1), p(null);
       try {
         const S = await g.current();
         if (!x) return;
         const q = S.component || S.default || S;
-        v(n === "react" ? () => q : () => S);
+        p(n === "react" ? () => q : () => S);
       } catch (S) {
         console.error(`[FederatedResource] Load failed: ${t}`, S), x && u(!0);
       } finally {
-        x && p(!1);
+        x && v(!1);
       }
     })(), () => {
       x = !1;