@opencxh/ui-kit 3.125.0 → 3.128.0

package/dist/index.js

@@ -640,7 +640,7 @@ const At = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
   format: y = "MM/dd/yyyy",
   withTime: h = !1
 }, f) => {
-  const [x, p] = R(!1), [w, g] = R(() => t || /* @__PURE__ */ new Date()), b = se(null), L = se(null), T = ze(x, L);
+  const [x, p] = R(!1), [w, g] = R(() => t || /* @__PURE__ */ new Date()), b = se(null), L = se(null), A = ze(x, L);
   Q(() => {
     const i = (S) => {
       b.current && !b.current.contains(S.target) && p(!1);
@@ -651,17 +651,17 @@ const At = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
   }, [x]);
   const _ = (i) => {
     if (!i) return "";
-    const S = i.getDate().toString().padStart(2, "0"), N = (i.getMonth() + 1).toString().padStart(2, "0"), A = i.getFullYear(), k = y === "dd/MM/yyyy" ? `${S}/${N}/${A}` : y === "yyyy-MM-dd" ? `${A}-${N}-${S}` : `${N}/${S}/${A}`;
+    const S = i.getDate().toString().padStart(2, "0"), N = (i.getMonth() + 1).toString().padStart(2, "0"), T = i.getFullYear(), k = y === "dd/MM/yyyy" ? `${S}/${N}/${T}` : y === "yyyy-MM-dd" ? `${T}-${N}-${S}` : `${N}/${S}/${T}`;
     return h ? `${k} ${$(i)}` : k;
   }, $ = (i) => `${i.getHours().toString().padStart(2, "0")}:${i.getMinutes().toString().padStart(2, "0")}`, X = (i) => {
     const [S, N] = i.split(":").map(Number);
     if (Number.isNaN(S) || Number.isNaN(N)) return;
-    const A = t ? new Date(t) : /* @__PURE__ */ new Date();
-    A.setHours(S, N, 0, 0), r?.(A);
+    const T = t ? new Date(t) : /* @__PURE__ */ new Date();
+    T.setHours(S, N, 0, 0), r?.(T);
   }, W = () => {
-    const i = w.getFullYear(), S = w.getMonth(), N = new Date(i, S, 1), A = new Date(N);
-    A.setDate(A.getDate() - N.getDay());
-    const k = [], ee = new Date(A);
+    const i = w.getFullYear(), S = w.getMonth(), N = new Date(i, S, 1), T = new Date(N);
+    T.setDate(T.getDate() - N.getDay());
+    const k = [], ee = new Date(T);
     for (let ae = 0; ae < 42; ae++)
       k.push(new Date(ee)), ee.setDate(ee.getDate() + 1);
     return k;
@@ -734,7 +734,7 @@ const At = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
         }
       )
     ] }),
-    x && /* @__PURE__ */ c("div", { style: T, className: "fixed z-overlay overflow-auto rounded-lg border border-border bg-surface p-4 shadow-overlay min-w-panel", children: [
+    x && /* @__PURE__ */ c("div", { style: A, className: "fixed z-overlay overflow-auto rounded-lg border border-border bg-surface p-4 shadow-overlay min-w-panel", children: [
       /* @__PURE__ */ c("div", { className: "flex items-center justify-between mb-4", children: [
         /* @__PURE__ */ e(
           "button",
@@ -760,7 +760,7 @@ const At = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
       ] }),
       /* @__PURE__ */ e("div", { className: "grid grid-cols-7 gap-1 mb-2", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((i) => /* @__PURE__ */ e("div", { className: "text-xs font-medium text-text-muted text-center py-1", children: i }, i)) }),
       /* @__PURE__ */ e("div", { className: "grid grid-cols-7 gap-1", children: ce.map((i, S) => {
-        const N = i.getMonth() === w.getMonth(), A = t && i.toDateString() === t.toDateString(), k = i.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), ee = !N || u && i < u || m && i > m;
+        const N = i.getMonth() === w.getMonth(), T = t && i.toDateString() === t.toDateString(), k = i.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), ee = !N || u && i < u || m && i > m;
         return /* @__PURE__ */ e(
           "button",
           {
@@ -769,9 +769,9 @@ const At = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
             className: d(
               "w-8 h-8 text-sm rounded transition-colors duration-fast",
               {
-                "text-text hover:bg-surface-hover": N && !A && !ee,
-                "bg-accent text-accent-fg": A,
-                "bg-surface-hover text-text": k && !A,
+                "text-text hover:bg-surface-hover": N && !T && !ee,
+                "bg-accent text-accent-fg": T,
+                "bg-surface-hover text-text": k && !T,
                 "text-text-muted cursor-not-allowed": ee
               }
             ),
@@ -838,7 +838,7 @@ const At = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
     onChange: g,
     allowCreate: b,
     onCreateOption: L,
-    ...T
+    ...A
   }, _) => {
     const $ = f || `select-${Math.random().toString(36).substr(2, 9)}`, X = !!n, [W, j] = oe.useState(!1), [q, K] = oe.useState(""), re = oe.useRef(null), O = oe.useRef(null), ce = ze(W, O, { matchWidth: !0 }), [C, i] = oe.useState(l);
     oe.useImperativeHandle(_, () => re.current), oe.useEffect(() => {
@@ -870,7 +870,7 @@ const At = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
         }), N(D, w);
       });
     }, [l, w, N, S]);
-    const A = (E) => {
+    const T = (E) => {
       if (p) {
         const D = Array.isArray(w) ? w : [], z = D.includes(E) ? D.filter((V) => V !== E) : [...D, E];
         g?.(z);
@@ -888,10 +888,10 @@ const At = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
         label: D
       };
       if (S(C, z.value) || S(C, z.label)) {
-        A(z.value), K(""), p || j(!1);
+        T(z.value), K(""), p || j(!1);
         return;
       }
-      i((V) => [...V, z]), A(z.value), K(""), p || j(!1);
+      i((V) => [...V, z]), T(z.value), K(""), p || j(!1);
     }, P = () => p ? ee.length > 0 ? ee.map((E) => E.label).join(", ") : u || "Select options" : k?.label || u || "Select an option";
     return /* @__PURE__ */ c(
       "div",
@@ -902,7 +902,7 @@ const At = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
           a && "w-full",
           m
         ),
-        ...T,
+        ...A,
         children: [
           t && /* @__PURE__ */ e(
             "label",
@@ -998,7 +998,7 @@ const At = () => /* @__PURE__ */ e(Y, { icon: Ze, size: "md", color: "current" }
                   return /* @__PURE__ */ e(
                     "li",
                     {
-                      onClick: () => !E.disabled && A(E.value),
+                      onClick: () => !E.disabled && T(E.value),
                       className: d(
                         "cursor-pointer px-3 py-1.5 text-sm",
                         "text-text",
@@ -1194,7 +1194,7 @@ const fe = (...t) => t.filter(Boolean).join(" "), Ft = (t) => /* @__PURE__ */ e(
     showAllOnOpen: g = !1,
     value: b,
     onChange: L,
-    ...T
+    ...A
   }, _) => {
     const $ = h || `searchfield-${Math.random().toString(36).substr(2, 9)}`, X = !!n, W = se(null), j = se(null), [q, K] = R(b || ""), [re, O] = R(!1), [ce, C] = R(!1), [i, S] = R(!1);
     Q(() => {
@@ -1231,7 +1231,7 @@ const fe = (...t) => t.filter(Boolean).join(" "), Ft = (t) => /* @__PURE__ */ e(
       };
       return document.addEventListener("mousedown", P), () => document.removeEventListener("mousedown", P);
     }, []);
-    const A = (P) => {
+    const T = (P) => {
       const E = P.target.value;
       K(E), O(!0), S(!0), L && L(P);
     }, k = (P) => {
@@ -1270,7 +1270,7 @@ const fe = (...t) => t.filter(Boolean).join(" "), Ft = (t) => /* @__PURE__ */ e(
                 ref: G,
                 id: $,
                 value: q,
-                onChange: A,
+                onChange: T,
                 onFocus: ee,
                 className: fe(
                   // Base styles
@@ -1287,7 +1287,7 @@ const fe = (...t) => t.filter(Boolean).join(" "), Ft = (t) => /* @__PURE__ */ e(
                   X ? "border-danger-border text-danger-fg focus-visible:focus-ring" : "border-border text-text",
                   y || ""
                 ),
-                ...T
+                ...A
               }
             ),
             /* @__PURE__ */ e("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: ae || l ? (
@@ -1468,8 +1468,8 @@ const qt = ({
   showCheck: u = !0,
   header: m
 }) => {
-  const [y, h] = R(!1), [f, x] = R(null), [p, w] = R({ top: 0, left: 0 }), g = se(null), b = se(null), L = se(null), T = se(null), _ = ze(y, b, { placement: a }), $ = se(null), X = () => Array.from(
-    T.current?.querySelectorAll("button[data-option-value]:not(:disabled)") ?? []
+  const [y, h] = R(!1), [f, x] = R(null), [p, w] = R({ top: 0, left: 0 }), g = se(null), b = se(null), L = se(null), A = se(null), _ = ze(y, b, { placement: a }), $ = se(null), X = () => Array.from(
+    A.current?.querySelectorAll("button[data-option-value]:not(:disabled)") ?? []
   );
   Q(() => {
     y && X()[0]?.focus();
@@ -1479,7 +1479,7 @@ const qt = ({
     const N = X();
     if (N.length === 0) return;
     i.preventDefault();
-    const A = N.indexOf(document.activeElement), k = i.key === "Home" ? 0 : i.key === "End" ? N.length - 1 : i.key === "ArrowDown" ? (A + 1) % N.length : (A - 1 + N.length) % N.length;
+    const T = N.indexOf(document.activeElement), k = i.key === "Home" ? 0 : i.key === "End" ? N.length - 1 : i.key === "ArrowDown" ? (T + 1) % N.length : (T - 1 + N.length) % N.length;
     N[k]?.focus();
   };
   Q(() => {
@@ -1554,7 +1554,7 @@ const qt = ({
             children: t
           }
         ),
-        y && /* @__PURE__ */ e("div", { ref: T, className: ce, style: _, onKeyDown: W, children: /* @__PURE__ */ c("div", { className: "p-2", role: "menu", children: [
+        y && /* @__PURE__ */ e("div", { ref: A, className: ce, style: _, onKeyDown: W, children: /* @__PURE__ */ c("div", { className: "p-2", role: "menu", children: [
           m && (typeof m == "string" ? /* @__PURE__ */ e("div", { className: "text-xs font-medium text-text-muted uppercase tracking-label px-3 py-2", children: m }) : m),
           r.map((i, S) => {
             if (i.divider)
@@ -1565,7 +1565,7 @@ const qt = ({
                 },
                 `divider-${S}`
               );
-            const N = i.children && i.children.length > 0, A = f === i.value;
+            const N = i.children && i.children.length > 0, T = f === i.value;
             return /* @__PURE__ */ c("div", { className: "relative group", children: [
               /* @__PURE__ */ c(
                 "button",
@@ -1581,7 +1581,7 @@ const qt = ({
                     "flex w-full items-center justify-between rounded-md px-3 py-1.5 text-sm text-text transition-colors duration-fast ease-out hover:bg-surface-hover focus-visible:outline-none focus-visible:focus-ring",
                     {
                       "opacity-50 cursor-not-allowed": i.disabled,
-                      "bg-surface-hover": A && N
+                      "bg-surface-hover": T && N
                     }
                   ),
                   children: [
@@ -1599,7 +1599,7 @@ const qt = ({
                   ]
                 }
               ),
-              N && A && /* @__PURE__ */ e(
+              N && T && /* @__PURE__ */ e(
                 "div",
                 {
                   ref: L,
@@ -1664,8 +1664,8 @@ const qt = ({
           (() => {
             const i = r.reduce((S, N) => {
               if (N.divider) return S;
-              const A = N.children ? N.children.filter((k) => !k.divider).length : 0;
-              return S + 1 + A;
+              const T = N.children ? N.children.filter((k) => !k.divider).length : 0;
+              return S + 1 + T;
             }, 0);
             return i > 1 && /* @__PURE__ */ e("div", { className: "border-t border-border mt-2 pt-2", children: /* @__PURE__ */ c("div", { className: "text-xs text-text-muted px-3 py-1", children: [
               i,
@@ -1752,7 +1752,7 @@ const qt = ({
   emptyContent: g,
   hoverable: b = !0,
   bordered: L = !1,
-  striped: T = !1,
+  striped: A = !1,
   padding: _ = "md",
   className: $,
   rowClassName: X,
@@ -1795,7 +1795,7 @@ const qt = ({
     if (!l) return S;
     const v = O.page * O.pageSize, U = v + O.pageSize;
     return S.slice(v, U);
-  }, [S, O, l]), A = ue(
+  }, [S, O, l]), T = ue(
     (v) => {
       r.find((Z) => Z.id === v)?.sortable && re((Z) => Z.column !== v ? { column: v, direction: "asc" } : Z.direction === "asc" ? { column: v, direction: "desc" } : { column: null, direction: null });
     },
@@ -1899,7 +1899,7 @@ const qt = ({
                 U === r.length - 1 && je[_]
               ),
               style: { width: v.width },
-              onClick: () => v.sortable && A(v.id),
+              onClick: () => v.sortable && T(v.id),
               children: /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
                 v.headerCell ? v.headerCell() : v.header,
                 v.sortable && /* @__PURE__ */ c(
@@ -2155,7 +2155,7 @@ const qt = ({
     },
     l
   ), w = (g, b) => {
-    const L = "transition-colors duration-fast font-medium", T = {
+    const L = "transition-colors duration-fast font-medium", A = {
       "text-xs px-2 py-1": o === "sm",
       "text-sm px-3 py-2": o === "md",
       "text-base px-4 py-3": o === "lg"
@@ -2177,7 +2177,7 @@ const qt = ({
       "text-text-muted hover:text-text": a === "pills",
       "border-transparent text-text-muted hover:text-text hover:border-border": a === "underline"
     } : {};
-    return d(L, T, _, $, X, W);
+    return d(L, A, _, $, X, W);
   };
   return /* @__PURE__ */ e(Qt.Provider, { value: f, children: /* @__PURE__ */ c("div", { children: [
     /* @__PURE__ */ e("div", { className: p, role: "tablist", children: t.map((g) => /* @__PURE__ */ e(
@@ -2384,15 +2384,15 @@ const cr = ({
   onDownloadFile: h,
   onRegisterFile: f
 }) => {
-  const [x, p] = R(!1), [w, g] = R([]), [b, L] = R(null), [T, _] = R("/"), [$, X] = R([]), [W, j] = R(!1), [q, K] = R(""), [re, O] = R(
+  const [x, p] = R(!1), [w, g] = R([]), [b, L] = R(null), [A, _] = R("/"), [$, X] = R([]), [W, j] = R(!1), [q, K] = R(""), [re, O] = R(
     typeof t == "object" ? t : null
   ), [ce, C] = R(!1), [i, S] = R(""), N = se(null);
   Q(() => {
-    x && A();
+    x && T();
   }, [x]), Q(() => {
     x && b && k();
-  }, [x, b, T, q]);
-  const A = async () => {
+  }, [x, b, A, q]);
+  const T = async () => {
     j(!0);
     try {
       const M = await m?.();
@@ -2406,7 +2406,7 @@ const cr = ({
     if (b) {
       j(!0);
       try {
-        const M = await u?.({ mountId: b.id, name: q, path: T });
+        const M = await u?.({ mountId: b.id, name: q, path: A });
         M?.data && X(M.data);
       } catch (M) {
         console.error("Failed to load files", M);
@@ -2447,7 +2447,7 @@ const cr = ({
           filename: I.name,
           mimeType: I.type || "application/octet-stream",
           mountId: b.id,
-          path: T
+          path: A
         });
         if (v?.data) {
           const U = v.data;
@@ -2463,11 +2463,11 @@ const cr = ({
     if (!(!i || !b)) {
       j(!0);
       try {
-        const M = `${T}${i}/`;
+        const M = `${A}${i}/`;
         f && (await f({
           name: i,
           type: "folder",
-          path: T,
+          path: A,
           mimeType: "application/x-directory",
           size: 0,
           mountId: b.id,
@@ -2496,19 +2496,19 @@ const cr = ({
     const M = /* @__PURE__ */ new Set(), I = [];
     return $.forEach((te) => {
       if (te.type === "folder") {
-        te.path === T && M.add(te.name);
+        te.path === A && M.add(te.name);
         return;
       }
-      const v = te.providerKey || te.name, Z = (T ? v.substring(T.length) : v).split("/").filter((J) => J !== "");
+      const v = te.providerKey || te.name, Z = (A ? v.substring(A.length) : v).split("/").filter((J) => J !== "");
       Z.length > 1 ? M.add(Z[0]) : Z.length === 1 && I.push(te);
     }), {
       folders: Array.from(M).sort(),
       files: I.sort((te, v) => te.name.localeCompare(v.name))
     };
-  }, [$, T]), D = (M) => {
+  }, [$, A]), D = (M) => {
     _((I) => `${I}${M}/`);
   }, z = () => {
-    const M = T.split("/").filter((I) => I !== "");
+    const M = A.split("/").filter((I) => I !== "");
     M.pop(), M.length === 0 ? _("/") : _(`${M.join("/")}/`);
   }, V = he(() => {
     const M = E.folders.map((I) => ({
@@ -2637,13 +2637,13 @@ const cr = ({
                         variant: "ghost",
                         size: "sm",
                         onClick: () => {
-                          T && T !== "/" ? z() : L(null);
+                          A && A !== "/" ? z() : L(null);
                         },
                         leftIcon: /* @__PURE__ */ e(Y, { icon: st, size: "xs" }),
-                        children: T ? "Back" : "Back to Mounts"
+                        children: A ? "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: T }) }),
+                    /* @__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: A }) }),
                     /* @__PURE__ */ e("div", { className: "flex-grow min-w-40", children: /* @__PURE__ */ e(
                       be,
                       {
@@ -2876,13 +2876,13 @@ const rn = ({
   ref: w,
   sdk: g
 }) => {
-  const [b, L] = R(r || {}), [T, _] = R({}), [$, X] = R({});
+  const [b, L] = R(r || {}), [A, _] = R({}), [$, X] = R({});
   Q(() => {
     r && L({ ...r });
   }, [r]);
   const W = ue(
     (C, i, S) => {
-      const N = t.flatMap((A) => A.items).find((A) => A.name === C);
+      const N = t.flatMap((T) => T.items).find((T) => T.name === C);
       if (!N) return null;
       if (N.required && (i == null || i === ""))
         return `${N.label} is required`;
@@ -2892,7 +2892,7 @@ const rn = ({
         if (i && !Array.isArray(i))
           return `${N.label} must be an array.`;
         if (Array.isArray(i) && N.arrayFields) {
-          const A = [];
+          const T = [];
           let k = !1;
           if (i.forEach((ee, ae) => {
             const le = {};
@@ -2905,9 +2905,9 @@ const rn = ({
                 E && (le[G.name] = E, k = !0);
               }
             }
-            A[ae] = le;
+            T[ae] = le;
           }), k)
-            return JSON.stringify(A);
+            return JSON.stringify(T);
         }
       }
       return N.validator ? N.validator(i, S) : null;
@@ -2921,32 +2921,32 @@ const rn = ({
         i
       );
       t.flatMap((k) => k.items).find((k) => k.name === C)?.removeIfEmpty && (i == null || i === "") && (S = ur(S, C)), L(S), X((k) => ({ ...k, [C]: !0 }));
-      const A = W(C, i, S);
+      const T = W(C, i, S);
       _((k) => ({
         ...k,
-        [C]: A || ""
+        [C]: T || ""
       })), a?.(S, C);
     },
     [b, t, W, a]
   ), q = ue(
     async (C) => {
       if (C.preventDefault(), x) return;
-      const i = {}, S = t.flatMap((A) => A.items);
-      for (const A of S) {
-        if (A.hidden || A.conditional && !A.conditional(b))
+      const i = {}, S = t.flatMap((T) => T.items);
+      for (const T of S) {
+        if (T.hidden || T.conditional && !T.conditional(b))
           continue;
         const k = W(
-          A.name,
-          Oe(b, A.name),
+          T.name,
+          Oe(b, T.name),
           b
         );
-        k && (i[A.name] = k);
+        k && (i[T.name] = k);
       }
       if (l) {
-        const A = l(b);
-        A && Object.assign(i, A);
+        const T = l(b);
+        T && Object.assign(i, T);
       }
-      if (_(i), Object.keys(i).some((A) => i[A]))
+      if (_(i), Object.keys(i).some((T) => i[T]))
         return;
       const N = o ? o(b) : b;
       await n?.(b, N);
@@ -2954,7 +2954,7 @@ const rn = ({
     [b, t, W, l, o, n, x]
   ), K = ue(
     (C) => {
-      const i = Oe(b, C.name), S = $[C.name] ? T[C.name] : void 0, N = C.disabled || x, A = {
+      const i = Oe(b, C.name), S = $[C.name] ? A[C.name] : void 0, N = C.disabled || x, T = {
         value: i || "",
         disabled: N,
         required: C.required,
@@ -2971,7 +2971,7 @@ const rn = ({
           return /* @__PURE__ */ e(
             be,
             {
-              ...A,
+              ...T,
               onChange: (k) => j(C.name, k.target.value),
               type: C.textType || C.type,
               autoComplete: C.autocomplete,
@@ -2983,7 +2983,7 @@ const rn = ({
           return /* @__PURE__ */ e(
             De,
             {
-              ...A,
+              ...T,
               onChange: (k) => j(C.name, k.target.value),
               rows: 4,
               error: S,
@@ -2994,7 +2994,7 @@ const rn = ({
           return /* @__PURE__ */ e(
             Ne,
             {
-              ...A,
+              ...T,
               onChange: (k) => j(C.name, k),
               options: (C.options || []).map((k) => ({
                 ...k,
@@ -3011,7 +3011,7 @@ const rn = ({
           return /* @__PURE__ */ e(
             pe,
             {
-              ...A,
+              ...T,
               label: C.label,
               checked: !!i,
               onChange: (k) => j(C.name, k.target.checked),
@@ -3045,7 +3045,7 @@ const rn = ({
           return /* @__PURE__ */ e(
             $e,
             {
-              ...A,
+              ...T,
               value: i ? new Date(i) : null,
               onChange: (k) => j(C.name, k),
               size: f
@@ -3055,7 +3055,7 @@ const rn = ({
           return /* @__PURE__ */ e(
             cr,
             {
-              ...A,
+              ...T,
               value: i,
               onChange: (k) => j(C.name, k),
               error: S,
@@ -3328,7 +3328,7 @@ const rn = ({
           return null;
       }
     },
-    [b, $, T, x, f, j]
+    [b, $, A, x, f, j]
   ), re = ue(
     (C) => {
       if (C.conditional && !C.conditional(b))
@@ -3354,33 +3354,37 @@ const rn = ({
               /* @__PURE__ */ e("span", { className: "text-sm font-semibold text-text", children: C.title }),
               C.description && /* @__PURE__ */ e("p", { className: "mt-1 text-xs leading-4 text-text-subtle", children: C.description })
             ] }),
-            /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ e("div", { className: S, children: i.map((N) => ($[N.name] && T[N.name], /* @__PURE__ */ c(
-              "div",
-              {
-                className: d(
-                  "flex min-w-0 flex-col gap-1.5",
-                  N.type === "checkbox" && "justify-center"
-                ),
-                style: {
-                  width: typeof N.width == "string" ? N.width : void 0,
-                  gridColumn: typeof N.width == "number" ? `span ${N.width} / span ${N.width}` : void 0
+            /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ e("div", { className: S, children: i.map((N) => {
+              const T = $[N.name] ? A[N.name] : void 0;
+              return /* @__PURE__ */ c(
+                "div",
+                {
+                  className: d(
+                    "flex min-w-0 flex-col gap-1.5",
+                    N.type === "checkbox" && "justify-center"
+                  ),
+                  style: {
+                    width: typeof N.width == "string" ? N.width : void 0,
+                    gridColumn: typeof N.width == "number" ? `span ${N.width} / span ${N.width}` : void 0
+                  },
+                  children: [
+                    N.type !== "custom" && N.type !== "checkbox" && /* @__PURE__ */ c("label", { className: "block text-xs font-semibold uppercase tracking-label text-text-subtle", children: [
+                      N.label,
+                      N.required && /* @__PURE__ */ e("span", { className: "ml-1 text-danger-fg", children: "*" })
+                    ] }),
+                    K(N),
+                    N.help && !T && /* @__PURE__ */ e("p", { className: "text-xs leading-4 text-text-subtle", children: N.help })
+                  ]
                 },
-                children: [
-                  N.type !== "custom" && N.type !== "checkbox" && /* @__PURE__ */ c("label", { className: "block text-xs font-semibold uppercase tracking-label text-text-subtle", children: [
-                    N.label,
-                    N.required && /* @__PURE__ */ e("span", { className: "ml-1 text-danger-fg", children: "*" })
-                  ] }),
-                  K(N)
-                ]
-              },
-              N.name
-            ))) }) })
+                N.name
+              );
+            }) }) })
           ]
         },
         C.id
       );
     },
-    [b, $, T, K]
+    [b, $, A, K]
   ), O = d(
     "overflow-hidden rounded-lg border border-border bg-surface",
     {
@@ -3888,10 +3892,10 @@ const xn = ({
   onError: x,
   ...p
 }) => {
-  const [w, g] = R(!0), [b, L] = R(!1), [T, _] = R(t), $ = (O) => {
+  const [w, g] = R(!0), [b, L] = R(!1), [A, _] = R(t), $ = (O) => {
     g(!1), L(!1), f?.(O);
   }, X = (O) => {
-    if (g(!1), L(!0), u && T !== u) {
+    if (g(!1), L(!0), u && A !== u) {
       _(u), L(!1), g(!0);
       return;
     }
@@ -3942,7 +3946,7 @@ const xn = ({
       "img",
       {
         ...p,
-        src: T,
+        src: A,
         alt: r,
         className: j,
         onLoad: $,
@@ -3972,7 +3976,7 @@ function bn({
   collapsibleGroups: g = !1,
   hideGroupCount: b = !1,
   selectable: L = !1,
-  selectedItems: T = [],
+  selectedItems: A = [],
   onSelectionChange: _,
   bulkActions: $,
   header: X,
@@ -3997,9 +4001,9 @@ function bn({
     z.preventDefault();
     const H = B.indexOf(document.activeElement), M = z.key === "Home" ? 0 : z.key === "End" ? B.length - 1 : z.key === "ArrowDown" ? (H + 1) % B.length : (H - 1 + B.length) % B.length;
     B[M]?.focus();
-  }, A = (z, V) => r ? r(z, V) : V, k = (z) => T.includes(z), ee = (z, V) => {
+  }, T = (z, V) => r ? r(z, V) : V, k = (z) => A.includes(z), ee = (z, V) => {
     _ && _(
-      V ? [...T, z] : T.filter((B) => B !== z)
+      V ? [...A, z] : A.filter((B) => B !== z)
     );
   }, ae = (z) => _?.(z ? [...t] : []), le = d(
     "flex flex-col",
@@ -4025,7 +4029,7 @@ function bn({
     )) });
   if (t.length === 0 && q)
     return /* @__PURE__ */ e("div", { className: le, children: q });
-  const G = t.length > 0 && T.length === t.length, P = T.length > 0 && !G, E = (z, V, B) => {
+  const G = t.length > 0 && A.length === t.length, P = A.length > 0 && !G, E = (z, V, B) => {
     const H = m?.(z, V) ?? !1, M = y?.(z, V) ?? !1, I = h?.(z, V) ?? !1, te = L && k(z);
     return /* @__PURE__ */ c(
       "li",
@@ -4071,7 +4075,7 @@ function bn({
           o && /* @__PURE__ */ e("span", { className: "shrink-0 text-xs text-text-subtle", children: o(z, V) })
         ]
       },
-      A(z, V)
+      T(z, V)
     );
   }, D = (() => {
     if (!f)
@@ -4127,7 +4131,7 @@ function bn({
     });
   })();
   return /* @__PURE__ */ c("div", { ref: S, className: le, onKeyDown: l ? N : void 0, children: [
-    L && T.length > 0 && /* @__PURE__ */ c("div", { className: "flex items-center gap-3 border-b border-border-subtle bg-surface-sunk px-4 py-2", children: [
+    L && A.length > 0 && /* @__PURE__ */ c("div", { className: "flex items-center gap-3 border-b border-border-subtle bg-surface-sunk px-4 py-2", children: [
       /* @__PURE__ */ e(
         pe,
         {
@@ -4138,7 +4142,7 @@ function bn({
         }
       ),
       /* @__PURE__ */ c("span", { className: "text-xs text-text-subtle", children: [
-        T.length,
+        A.length,
         " geselecteerd"
       ] }),
       $ && /* @__PURE__ */ e("div", { className: "ml-auto flex gap-2", children: $ })
@@ -4220,7 +4224,7 @@ const vn = ({
   }, [x]);
   const L = () => {
     h && p(!0);
-  }, T = () => {
+  }, A = () => {
     p(!1), w.trim() !== "" && w !== r && f ? f(w.trim()) : g(r);
   }, _ = ($) => {
     $.key === "Enter" ? b.current?.blur() : $.key === "Escape" && (g(r), p(!1));
@@ -4246,7 +4250,7 @@ const vn = ({
                   type: "text",
                   value: w,
                   onChange: ($) => g($.target.value),
-                  onBlur: T,
+                  onBlur: A,
                   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"
                 }
@@ -4485,7 +4489,7 @@ const Sn = ({
               ) }),
               /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: h.arrayFields?.map((b) => {
                 const L = w?.[b.name];
-                let T = "-";
+                let A = "-";
                 switch (b.type) {
                   case "text":
                   case "email":
@@ -4493,30 +4497,30 @@ const Sn = ({
                   case "tel":
                   case "url":
                   case "textarea":
-                    T = L || "-";
+                    A = L || "-";
                     break;
                   case "select":
                   case "radio":
-                    T = l(
+                    A = l(
                       L,
                       b.options
                     );
                     break;
                   case "checkbox":
-                    T = o(L);
+                    A = o(L);
                     break;
                   case "date":
-                    T = a(L);
+                    A = a(L);
                     break;
                   case "custom":
-                    T = b.customComponent?.({
+                    A = b.customComponent?.({
                       value: L
                     });
                     break;
                   default:
-                    T = String(L || "-");
+                    A = String(L || "-");
                 }
-                return b.format && (T = b.format(L, w)), /* @__PURE__ */ c("div", { className: "space-y-1", children: [
+                return b.format && (A = b.format(L, w)), /* @__PURE__ */ c("div", { className: "space-y-1", children: [
                   /* @__PURE__ */ e(
                     de,
                     {
@@ -4532,7 +4536,7 @@ const Sn = ({
                       variant: "body",
                       size: "sm",
                       className: "text-text",
-                      children: T
+                      children: A
                     }
                   )
                 ] }, b.name);
@@ -4875,15 +4879,15 @@ const Mn = ({
           n();
         else if (L.key === "ArrowUp")
           f(
-            (T) => T > 0 ? T - 1 : g.length - 1
+            (A) => A > 0 ? A - 1 : g.length - 1
           );
         else if (L.key === "ArrowDown")
           f(
-            (T) => T < g.length - 1 ? T + 1 : 0
+            (A) => A < g.length - 1 ? A + 1 : 0
           );
         else if (L.key === "Enter") {
-          const T = g[h];
-          T && (T.subCommands ? (y([...m, T.id]), f(0)) : T.action && (T.action(), n()));
+          const A = g[h];
+          A && (A.subCommands ? (y([...m, A.id]), f(0)) : A.action && (A.action(), n()));
         }
       }
     };