@opencxh/ui-kit 3.120.3 → 3.120.5

package/dist/index.js

@@ -1,6 +1,6 @@
 import { clsx as Ue } from "clsx";
 import { jsxs as c, jsx as e, Fragment as he } from "react/jsx-runtime";
-import { VideoOff as qe, User as We, MicOff as Ke, Mic as _e, X as ye, ChevronDown as ge, ExternalLink as Ge, Calendar as Je, ChevronLeft as Ne, ChevronRight as we, ChevronDownIcon as Ye, Loader2 as Xe, Search as ke, Check as De, ChevronUp as Ze, ChevronsLeft as Qe, ChevronsRight as et, FileText as ze, HardDrive as Te, ArrowLeft as tt, FolderPlus as rt, Upload as nt, Folder as Ae, Trash2 as st, Plus as at, Sparkles as lt, ImageOff as ot, Pencil as ct, ArrowUpRight as it } from "lucide-react";
+import { VideoOff as qe, User as We, MicOff as Ke, Mic as _e, X as Ne, ChevronDown as pe, ExternalLink as Ge, Calendar as Je, ChevronLeft as we, ChevronRight as ke, ChevronDownIcon as Ye, Loader2 as Xe, Search as Ce, Check as De, ChevronUp as Ze, ChevronsLeft as Qe, ChevronsRight as et, FileText as ze, HardDrive as Te, ArrowLeft as tt, FolderPlus as rt, Upload as nt, Folder as Ae, 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 Q, forwardRef as ue, useState as U, useLayoutEffect as dt, useMemo as fe, useCallback as de, createContext as ut, Component as mt } from "react";
 function d(...t) {
   return Ue(t);
@@ -268,7 +268,7 @@ function Yr({
   ), v = /* @__PURE__ */ c(he, { children: [
     r,
     t,
-    l && /* @__PURE__ */ e(Y, { icon: ge, size: "xs" })
+    l && /* @__PURE__ */ e(Y, { icon: pe, size: "xs" })
   ] }), b = d(
     "inline-flex items-center gap-1.5 pl-3",
     g,
@@ -284,7 +284,7 @@ function Yr({
         "aria-label": x,
         onClick: u,
         className: d("inline-flex h-full items-center pr-3 focus-visible:outline-none focus-visible:focus-ring", g),
-        children: /* @__PURE__ */ e(Y, { icon: ye, size: "xs" })
+        children: /* @__PURE__ */ e(Y, { icon: Ne, size: "xs" })
       }
     )
   ] }) : /* @__PURE__ */ e("button", { type: "button", title: f, onClick: y, className: d(N, b), children: v });
@@ -393,7 +393,7 @@ function Zr({
     }
   );
 }
-function Ce(t, r, { gap: n = 6, matchWidth: s = !1, placement: a = "bottom-start" } = {}) {
+function Se(t, r, { gap: n = 6, matchWidth: s = !1, placement: a = "bottom-start" } = {}) {
   const [o, l] = U({});
   return dt(() => {
     if (!t) return;
@@ -418,7 +418,7 @@ const kt = ({
   disabled: l = !1,
   triggerLabel: u
 }) => {
-  const [x, y] = U(!1), f = se(null), m = se(null), h = Ce(x, m, { placement: n });
+  const [x, y] = U(!1), f = se(null), m = se(null), h = Se(x, m, { placement: n });
   Q(() => {
     if (!x) return;
     const v = (L) => {
@@ -518,7 +518,7 @@ function Oe({
               St[s],
               f && "cursor-not-allowed opacity-50"
             ),
-            children: /* @__PURE__ */ e(ge, { className: "size-icon-md" })
+            children: /* @__PURE__ */ e(pe, { className: "size-icon-md" })
           }
         ),
         children: (h) => /* @__PURE__ */ e(he, { children: o.map((g) => /* @__PURE__ */ c(
@@ -560,7 +560,7 @@ const zt = {
   md: "text-base",
   lg: "text-md",
   full: "text-md"
-}, be = ue(
+}, ge = ue(
   ({
     label: t,
     helperText: r,
@@ -625,8 +625,8 @@ const zt = {
     ] });
   }
 );
-be.displayName = "Checkbox";
-const $t = () => /* @__PURE__ */ e(Y, { icon: Je, size: "md", color: "current" }), Dt = () => /* @__PURE__ */ e(Y, { icon: Ne, size: "md", color: "current" }), Tt = () => /* @__PURE__ */ e(Y, { icon: we, size: "md", color: "current" }), Me = ue(({
+ge.displayName = "Checkbox";
+const $t = () => /* @__PURE__ */ e(Y, { icon: Je, size: "md", color: "current" }), Dt = () => /* @__PURE__ */ e(Y, { icon: we, size: "md", color: "current" }), Tt = () => /* @__PURE__ */ e(Y, { icon: ke, size: "md", color: "current" }), Me = ue(({
   value: t,
   onChange: r,
   placeholder: n = "Select date",
@@ -639,7 +639,7 @@ const $t = () => /* @__PURE__ */ e(Y, { icon: Je, size: "md", color: "current" }
   format: y = "MM/dd/yyyy",
   withTime: f = !1
 }, m) => {
-  const [h, g] = U(!1), [N, v] = U(() => t || /* @__PURE__ */ new Date()), b = se(null), L = se(null), A = Ce(h, L);
+  const [h, g] = U(!1), [N, v] = U(() => t || /* @__PURE__ */ new Date()), b = se(null), L = se(null), A = Se(h, L);
   Q(() => {
     const i = (S) => {
       b.current && !b.current.contains(S.target) && g(!1);
@@ -664,7 +664,7 @@ const $t = () => /* @__PURE__ */ e(Y, { icon: Je, size: "md", color: "current" }
     for (let ae = 0; ae < 42; ae++)
       C.push(new Date(ee)), ee.setDate(ee.getDate() + 1);
     return C;
-  }, P = (i) => {
+  }, O = (i) => {
     if (i.getMonth() === N.getMonth() && !(u && i < u) && !(x && i > x)) {
       if (f) {
         const w = new Date(i);
@@ -763,7 +763,7 @@ const $t = () => /* @__PURE__ */ e(Y, { icon: Je, size: "md", color: "current" }
         return /* @__PURE__ */ e(
           "button",
           {
-            onClick: () => !ee && P(i),
+            onClick: () => !ee && O(i),
             disabled: ee,
             className: d(
               "w-8 h-8 text-sm rounded transition-colors duration-fast",
@@ -817,7 +817,7 @@ const $t = () => /* @__PURE__ */ e(Y, { icon: Je, size: "md", color: "current" }
   md: "h-control-md px-3 text-sm",
   lg: "h-control-lg px-3 text-base",
   full: "h-control-md w-full px-3 text-sm"
-}, pe = (t) => t.trim().toLowerCase(), ve = ue(
+}, ve = (t) => t.trim().toLowerCase(), ye = ue(
   ({
     label: t,
     helperText: r,
@@ -839,16 +839,16 @@ const $t = () => /* @__PURE__ */ e(Y, { icon: Je, size: "md", color: "current" }
     onCreateOption: L,
     ...A
   }, X) => {
-    const $ = m || `select-${Math.random().toString(36).substr(2, 9)}`, Z = !!n, [H, P] = le.useState(!1), [F, re] = le.useState(""), V = le.useRef(null), _ = le.useRef(null), ce = Ce(H, _, { matchWidth: !0 }), [k, i] = le.useState(l);
+    const $ = m || `select-${Math.random().toString(36).substr(2, 9)}`, Z = !!n, [H, O] = le.useState(!1), [F, re] = le.useState(""), V = le.useRef(null), _ = le.useRef(null), ce = Se(H, _, { matchWidth: !0 }), [k, i] = le.useState(l);
     le.useImperativeHandle(X, () => V.current), le.useEffect(() => {
       const M = (D) => {
-        V.current && !V.current.contains(D.target) && P(!1);
+        V.current && !V.current.contains(D.target) && O(!1);
       };
       return document.addEventListener("mousedown", M), () => document.removeEventListener("mousedown", M);
     }, []);
     const S = le.useCallback(
       (M, D) => M.some(
-        (E) => pe(E.value) === pe(D) || pe(E.label) === pe(D)
+        (E) => ve(E.value) === ve(D) || ve(E.label) === ve(D)
       ),
       []
     ), w = le.useCallback(
@@ -874,7 +874,7 @@ const $t = () => /* @__PURE__ */ e(Y, { icon: Je, size: "md", color: "current" }
         const D = Array.isArray(N) ? N : [], E = D.includes(M) ? D.filter((q) => q !== M) : [...D, M];
         v?.(E);
       } else
-        v?.(M), P(!1), re("");
+        v?.(M), O(!1), re("");
     }, C = g ? null : k.find((M) => M.value === N), ee = g ? k.filter(
       (M) => Array.isArray(N) && N.includes(M.value)
     ) : [], ae = h && F ? k.filter(
@@ -887,10 +887,10 @@ const $t = () => /* @__PURE__ */ e(Y, { icon: Je, size: "md", color: "current" }
         label: D
       };
       if (S(k, E.value) || S(k, E.label)) {
-        T(E.value), re(""), g || P(!1);
+        T(E.value), re(""), g || O(!1);
         return;
       }
-      i((q) => [...q, E]), T(E.value), re(""), g || P(!1);
+      i((q) => [...q, E]), T(E.value), re(""), g || O(!1);
     }, B = () => g ? ee.length > 0 ? ee.map((M) => M.label).join(", ") : u || "Select options" : C?.label || u || "Select an option";
     return /* @__PURE__ */ c(
       "div",
@@ -907,7 +907,7 @@ const $t = () => /* @__PURE__ */ e(Y, { icon: Je, size: "md", color: "current" }
             "label",
             {
               htmlFor: $,
-              onClick: () => P(!H),
+              onClick: () => O(!H),
               className: d(
                 "block text-xs font-semibold uppercase tracking-label mb-1.5",
                 Z ? "text-danger-fg" : "text-text-muted",
@@ -924,7 +924,7 @@ const $t = () => /* @__PURE__ */ e(Y, { icon: Je, size: "md", color: "current" }
                 type: "button",
                 id: $,
                 disabled: o,
-                onClick: () => P(!H),
+                onClick: () => O(!H),
                 className: d(
                   "flex w-full items-center justify-between gap-2 rounded-md border transition-colors duration-fast text-left",
                   "focus-visible:outline-none focus-visible:focus-ring",
@@ -987,7 +987,7 @@ const $t = () => /* @__PURE__ */ e(Y, { icon: Je, size: "md", color: "current" }
                   {
                     className: "cursor-pointer px-3 py-1.5 text-sm text-text-muted hover:bg-surface-hover",
                     onClick: () => {
-                      v?.(""), P(!1);
+                      v?.(""), O(!1);
                     },
                     children: u
                   }
@@ -1038,7 +1038,7 @@ const $t = () => /* @__PURE__ */ e(Y, { icon: Je, size: "md", color: "current" }
     );
   }
 );
-ve.displayName = "Select";
+ye.displayName = "Select";
 const Lt = {
   sm: "h-control-sm px-3 text-sm",
   md: "h-control-md px-3 text-base",
@@ -1141,7 +1141,7 @@ function It({
   const f = t ?? {};
   return /* @__PURE__ */ c("div", { className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ e(
-      ve,
+      ye,
       {
         size: a,
         fullWidth: !0,
@@ -1163,7 +1163,7 @@ function It({
     )
   ] });
 }
-const me = (...t) => t.filter(Boolean).join(" "), jt = (t) => /* @__PURE__ */ e(ke, { ...t, strokeWidth: 1.5, "aria-hidden": !0 }), Pt = (t) => /* @__PURE__ */ e(ge, { ...t, strokeWidth: 1.5, "aria-hidden": !0 }), Ot = {
+const me = (...t) => t.filter(Boolean).join(" "), jt = (t) => /* @__PURE__ */ e(Ce, { ...t, strokeWidth: 1.5, "aria-hidden": !0 }), Pt = (t) => /* @__PURE__ */ e(pe, { ...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",
@@ -1195,7 +1195,7 @@ const me = (...t) => t.filter(Boolean).join(" "), jt = (t) => /* @__PURE__ */ e(
     onChange: L,
     ...A
   }, X) => {
-    const $ = f || `searchfield-${Math.random().toString(36).substr(2, 9)}`, Z = !!n, H = se(null), P = se(null), [F, re] = U(b || ""), [V, _] = U(!1), [ce, k] = U(!1), [i, S] = U(!1);
+    const $ = f || `searchfield-${Math.random().toString(36).substr(2, 9)}`, Z = !!n, H = se(null), O = se(null), [F, re] = U(b || ""), [V, _] = U(!1), [ce, k] = U(!1), [i, S] = U(!1);
     Q(() => {
       b !== void 0 && re(b);
     }, [b]);
@@ -1237,7 +1237,7 @@ const me = (...t) => t.filter(Boolean).join(" "), jt = (t) => /* @__PURE__ */ e(
       re(B.label), _(!1), S(!1), g && g(B.value);
     }, ee = () => {
       (m.length > 0 || h) && (_(!0), S(!1));
-    }, ae = l || ce, ne = V && (w.length > 0 || ae), K = fe(() => X || P, [X]);
+    }, ae = l || ce, ne = V && (w.length > 0 || ae), K = fe(() => X || O, [X]);
     return /* @__PURE__ */ c(
       "div",
       {
@@ -1467,7 +1467,7 @@ const Vt = ({
   showCheck: u = !0,
   header: x
 }) => {
-  const [y, f] = U(!1), [m, h] = U(null), [g, N] = U({ top: 0, left: 0 }), v = se(null), b = se(null), L = se(null), A = se(null), X = Ce(y, b, { placement: a }), $ = se(null), Z = () => Array.from(
+  const [y, f] = U(!1), [m, h] = U(null), [g, N] = U({ top: 0, left: 0 }), v = se(null), b = se(null), L = se(null), A = se(null), X = Se(y, b, { placement: a }), $ = se(null), Z = () => Array.from(
     A.current?.querySelectorAll("button[data-option-value]:not(:disabled)") ?? []
   );
   Q(() => {
@@ -1511,7 +1511,7 @@ const Vt = ({
   }, [m]), Q(() => () => {
     $.current && clearTimeout($.current);
   }, []);
-  const P = (i) => {
+  const O = (i) => {
     i.stopPropagation(), !o && (f(!y), h(null), $.current && (clearTimeout($.current), $.current = null));
   }, F = (i, S, w) => {
     i.stopPropagation(), !S.disabled && !S.divider && (!S.children || S.children.length === 0) && (s?.(S.value, w), f(!1), h(null));
@@ -1543,7 +1543,7 @@ const Vt = ({
           "button",
           {
             ref: b,
-            onClick: P,
+            onClick: O,
             disabled: o,
             "aria-haspopup": "menu",
             "aria-expanded": y,
@@ -1675,7 +1675,7 @@ const Vt = ({
       ]
     }
   );
-}, Ht = () => /* @__PURE__ */ e(Y, { icon: ke, size: "md", color: "current" }), Ut = ({ active: t }) => /* @__PURE__ */ e(Y, { icon: Ze, size: "sm", className: t ? "text-text" : "text-text-subtle" }), qt = ({ active: t }) => /* @__PURE__ */ e(Y, { icon: ge, size: "sm", className: t ? "text-text" : "text-text-subtle" }), Wt = () => /* @__PURE__ */ e(Y, { icon: Ne, size: "md", color: "current" }), Kt = () => /* @__PURE__ */ e(Y, { icon: we, size: "md", color: "current" }), _t = () => /* @__PURE__ */ e(Y, { icon: Qe, size: "md", color: "current" }), Gt = () => /* @__PURE__ */ e(Y, { icon: et, size: "md", color: "current" }), Be = () => /* @__PURE__ */ e(Y, { icon: ge, size: "md", color: "current" }), Jt = (t) => {
+}, Ht = () => /* @__PURE__ */ e(Y, { icon: Ce, size: "md", color: "current" }), Ut = ({ active: t }) => /* @__PURE__ */ e(Y, { icon: Ze, size: "sm", className: t ? "text-text" : "text-text-subtle" }), qt = ({ active: t }) => /* @__PURE__ */ e(Y, { icon: pe, size: "sm", className: t ? "text-text" : "text-text-subtle" }), Wt = () => /* @__PURE__ */ e(Y, { icon: we, size: "md", color: "current" }), Kt = () => /* @__PURE__ */ e(Y, { icon: ke, size: "md", color: "current" }), _t = () => /* @__PURE__ */ e(Y, { icon: Qe, size: "md", color: "current" }), Gt = () => /* @__PURE__ */ e(Y, { icon: et, size: "md", color: "current" }), Be = () => /* @__PURE__ */ e(Y, { icon: pe, 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);
   };
@@ -1737,7 +1737,7 @@ const Vt = ({
   selectable: m = !1,
   selectedRows: h = [],
   onSelectionChange: g,
-  getRowKey: N = (H, P) => P,
+  getRowKey: N = (H, O) => O,
   emptyContent: v,
   hoverable: b = !0,
   bordered: L = !1,
@@ -1746,7 +1746,7 @@ const Vt = ({
   rowClassName: $,
   headerBackground: Z = !0
 }) => {
-  const [H, P] = U(""), [F, re] = U({
+  const [H, O] = U(""), [F, re] = U({
     column: null,
     direction: null
   }), [V, _] = U({
@@ -1755,49 +1755,49 @@ const Vt = ({
   }), ce = se(null), k = fe(() => {
     let p = t;
     if (s && H.trim()) {
-      const O = r.filter(
+      const j = r.filter(
         (J) => J.searchable !== !1
       ), G = H.toLowerCase();
-      p = p.filter((J) => O.some((j) => {
-        const oe = typeof j.accessor == "function" ? j.accessor(J) : J[j.accessor];
+      p = p.filter((J) => j.some((P) => {
+        const oe = typeof P.accessor == "function" ? P.accessor(J) : J[P.accessor];
         return String(oe || "").toLowerCase().includes(G);
       }));
     }
-    return o.forEach((O) => {
-      O.value && O.value !== "all" && (p = p.filter((G) => {
-        const J = r.find((oe) => oe.id === O.id);
+    return o.forEach((j) => {
+      j.value && j.value !== "all" && (p = p.filter((G) => {
+        const J = r.find((oe) => oe.id === j.id);
         if (!J) return !0;
-        const j = typeof J.accessor == "function" ? J.accessor(G) : G[J.accessor];
-        return String(j || "") === O.value;
+        const P = typeof J.accessor == "function" ? J.accessor(G) : G[J.accessor];
+        return String(P || "") === j.value;
       }));
     }), p;
   }, [t, H, r, s, o]), i = fe(() => {
     if (!F.column || !F.direction) return k;
-    const p = r.find((O) => O.id === F.column);
-    return p ? [...k].sort((O, G) => {
-      const J = typeof p.accessor == "function" ? p.accessor(O) : O[p.accessor], j = typeof p.accessor == "function" ? p.accessor(G) : G[p.accessor];
+    const p = r.find((j) => j.id === F.column);
+    return p ? [...k].sort((j, G) => {
+      const J = typeof p.accessor == "function" ? p.accessor(j) : j[p.accessor], P = typeof p.accessor == "function" ? p.accessor(G) : G[p.accessor];
       let oe = 0;
-      return J < j ? oe = -1 : J > j && (oe = 1), F.direction === "desc" ? -oe : oe;
+      return J < P ? oe = -1 : J > P && (oe = 1), F.direction === "desc" ? -oe : oe;
     }) : k;
   }, [k, F, r]), S = fe(() => {
     if (!l) return i;
-    const p = V.page * V.pageSize, O = p + V.pageSize;
-    return i.slice(p, O);
+    const p = V.page * V.pageSize, j = p + V.pageSize;
+    return i.slice(p, j);
   }, [i, V, l]), w = de(
     (p) => {
       r.find((G) => G.id === p)?.sortable && re((G) => G.column !== p ? { column: p, direction: "asc" } : G.direction === "asc" ? { column: p, direction: "desc" } : { column: null, direction: null });
     },
     [r]
   ), T = de((p) => {
-    _((O) => ({ ...O, page: p }));
+    _((j) => ({ ...j, page: p }));
   }, []), C = de((p) => {
     _({ page: 0, pageSize: p });
   }, []), ee = de(
-    (p, O) => {
+    (p, j) => {
       if (!g) return;
       const G = N(p, 0);
-      h.map((J, j) => N(J, j)), g(O ? [...h, p] : h.filter(
-        (J, j) => N(h[j], j) !== G
+      h.map((J, P) => N(J, P)), g(j ? [...h, p] : h.filter(
+        (J, P) => N(h[P], P) !== G
       ));
     },
     [h, g, N]
@@ -1813,20 +1813,20 @@ const Vt = ({
     _((p) => ({ ...p, page: 0 }));
   }, [o.map((p) => p.value).join(",")]);
   const ne = i.length, K = Math.ceil(ne / V.pageSize), B = V.page * V.pageSize + 1, M = Math.min(B + V.pageSize - 1, ne), D = S.length > 0 && S.every((p) => {
-    const O = N(p, 0);
+    const j = N(p, 0);
     return h.some(
-      (G, J) => N(G, J) === O
+      (G, J) => N(G, J) === j
     );
   }), E = S.some((p) => {
-    const O = N(p, 0);
+    const j = N(p, 0);
     return h.some(
-      (G, J) => N(G, J) === O
+      (G, J) => N(G, J) === j
     );
   }), q = d(
     "w-full text-sm leading-5 text-text border-collapse",
     X
-  ), R = Z ? "bg-surface-sunk border-border border-t" : "bg-surface", W = d(R), z = d(
-    "text-text p-3 border-b border-border"
+  ), R = Z ? "bg-surface-sunk border-border border-t" : "bg-surface", W = d(R, "h-control-lg"), z = d(
+    "text-text border-b border-border"
   ), I = d("h-row-lg", {
     "hover:bg-surface-sunk": b,
     "cursor-pointer": f
@@ -1839,7 +1839,7 @@ const Vt = ({
         {
           placeholder: a,
           value: H,
-          onChange: (p) => P(p.target.value),
+          onChange: (p) => O(p.target.value),
           startIcon: /* @__PURE__ */ e(Ht, {}),
           className: "max-w-sm"
         }
@@ -1868,7 +1868,7 @@ const Vt = ({
               className: "rounded border-border [&:not(:checked)]:bg-surface-input text-accent"
             }
           ) }),
-          !n && r.map((p) => /* @__PURE__ */ e(
+          !n && r.map((p, j) => /* @__PURE__ */ e(
             "th",
             {
               className: d(
@@ -1882,7 +1882,9 @@ const Vt = ({
                   "cursor-pointer select-none": p.sortable,
                   [`sticky left-0 ${R}`]: p.sticky === "left",
                   [`sticky right-0 ${R}`]: p.sticky === "right"
-                }
+                },
+                j === 0 && "pl-2",
+                j === r.length - 1 && "pr-2"
               ),
               style: { width: p.width },
               onClick: () => p.sortable && w(p.id),
@@ -1927,9 +1929,9 @@ const Vt = ({
             ),
             children: v || "No data available"
           }
-        ) }) : S.map((p, O) => {
-          const G = N(p, O), J = h.some(
-            (j, oe) => N(j, oe) === G
+        ) }) : S.map((p, j) => {
+          const G = N(p, j), J = h.some(
+            (P, oe) => N(P, oe) === G
           );
           return /* @__PURE__ */ c(
             "tr",
@@ -1937,10 +1939,10 @@ const Vt = ({
               className: d(
                 I,
                 { "bg-accent-soft": J },
-                $?.(p, O)
+                $?.(p, j)
               ),
-              onClick: (j) => {
-                j.stopPropagation(), f?.(p, O);
+              onClick: (P) => {
+                P.stopPropagation(), f?.(p, j);
               },
               children: [
                 m && /* @__PURE__ */ e("td", { className: z, children: /* @__PURE__ */ e(
@@ -1948,27 +1950,32 @@ const Vt = ({
                   {
                     type: "checkbox",
                     checked: J,
-                    onChange: (j) => {
-                      j.stopPropagation(), ee(p, j.target.checked);
+                    onChange: (P) => {
+                      P.stopPropagation(), ee(p, P.target.checked);
                     },
                     className: "rounded border-border [&:not(:checked)]:bg-surface-input text-accent"
                   }
                 ) }),
-                r.map((j) => {
-                  const oe = typeof j.accessor == "function" ? j.accessor(p) : p[j.accessor];
+                r.map((P, oe) => {
+                  const be = typeof P.accessor == "function" ? P.accessor(p) : p[P.accessor];
                   return /* @__PURE__ */ e(
                     "td",
                     {
-                      className: d(z, {
-                        "text-left": j.align === "left" || !j.align,
-                        "text-center": j.align === "center",
-                        "text-right": j.align === "right",
-                        "sticky left-0 bg-surface": j.sticky === "left",
-                        "sticky right-0 bg-surface": j.sticky === "right"
-                      }),
-                      children: j.cell ? j.cell(oe, p, O) : String(oe || "")
+                      className: d(
+                        z,
+                        {
+                          "text-left": P.align === "left" || !P.align,
+                          "text-center": P.align === "center",
+                          "text-right": P.align === "right",
+                          "sticky left-0 bg-surface": P.sticky === "left",
+                          "sticky right-0 bg-surface": P.sticky === "right"
+                        },
+                        oe === 0 && "pl-2",
+                        oe === r.length - 1 && "pr-2"
+                      ),
+                      children: P.cell ? P.cell(be, p, oe) : String(be || "")
                     },
-                    j.id
+                    P.id
                   );
                 }),
                 y.length > 0 && /* @__PURE__ */ e("td", { className: z, children: /* @__PURE__ */ e(
@@ -1978,17 +1985,17 @@ const Vt = ({
                       /* @__PURE__ */ e("span", { children: "Options" }),
                       /* @__PURE__ */ e(Be, {})
                     ] }),
-                    options: y.map((j) => ({
-                      value: j.id,
-                      label: j.label,
-                      icon: j.icon,
-                      disabled: j.disabled?.(p)
+                    options: y.map((P) => ({
+                      value: P.id,
+                      label: P.label,
+                      icon: P.icon,
+                      disabled: P.disabled?.(p)
                     })),
-                    onSelect: (j) => {
+                    onSelect: (P) => {
                       const oe = y.find(
-                        (Se) => Se.id === j
+                        (be) => be.id === P
                       );
-                      oe && oe.onClick(p, O);
+                      oe && oe.onClick(p, j);
                     },
                     placement: "bottom-end"
                   }
@@ -2263,7 +2270,7 @@ function Re({
                   onClick: r,
                   className: "p-1 text-text-muted hover:text-text transition-colors",
                   "aria-label": "Close modal",
-                  children: /* @__PURE__ */ e(Y, { icon: ye, size: "lg", color: "current" })
+                  children: /* @__PURE__ */ e(Y, { icon: Ne, size: "lg", color: "current" })
                 }
               )
             ] }),
@@ -2365,7 +2372,7 @@ const ar = ({
   onDownloadFile: f,
   onRegisterFile: m
 }) => {
-  const [h, g] = U(!1), [N, v] = U([]), [b, L] = U(null), [A, X] = U("/"), [$, Z] = U([]), [H, P] = U(!1), [F, re] = U(""), [V, _] = U(
+  const [h, g] = U(!1), [N, v] = U([]), [b, L] = U(null), [A, X] = U("/"), [$, Z] = U([]), [H, O] = U(!1), [F, re] = U(""), [V, _] = U(
     typeof t == "object" ? t : null
   ), [ce, k] = U(!1), [i, S] = U(""), w = se(null);
   Q(() => {
@@ -2374,33 +2381,33 @@ const ar = ({
     h && b && C();
   }, [h, b, A, F]);
   const T = async () => {
-    P(!0);
+    O(!0);
     try {
       const z = await x?.();
       z?.data && v(z.data);
     } catch (z) {
       console.error("Failed to load mounts", z);
     } finally {
-      P(!1);
+      O(!1);
     }
   }, C = async () => {
     if (b) {
-      P(!0);
+      O(!0);
       try {
         const z = await u?.({ mountId: b.id, name: F, path: A });
         z?.data && Z(z.data);
       } catch (z) {
         console.error("Failed to load files", z);
       } finally {
-        P(!1);
+        O(!1);
       }
     }
   }, ee = async (z) => {
     const I = z.target.files?.[0];
     if (I) {
-      P(!0);
+      O(!0);
       try {
-        const p = await I.arrayBuffer(), O = new Uint8Array(p), G = {
+        const p = await I.arrayBuffer(), j = new Uint8Array(p), G = {
           id: `local-${Date.now()}`,
           name: I.name,
           type: "file",
@@ -2411,38 +2418,38 @@ const ar = ({
           providerKey: I.name,
           ownerId: "me"
         };
-        _(G), r(G, O), g(!1);
+        _(G), r(G, j), g(!1);
       } catch (p) {
         console.error("Local file selection failed", p);
       } finally {
-        P(!1);
+        O(!1);
       }
     }
   }, ae = async (z) => {
     const I = z.target.files?.[0];
     if (!(!I || !b)) {
-      P(!0);
+      O(!0);
       try {
-        const p = await I.arrayBuffer(), O = await y?.({
+        const p = await I.arrayBuffer(), j = await y?.({
           file: new Uint8Array(p),
           filename: I.name,
           mimeType: I.type || "application/octet-stream",
           mountId: b.id,
           path: A
         });
-        if (O?.data) {
-          const G = O.data;
+        if (j?.data) {
+          const G = j.data;
           _(G), r(G, new Uint8Array(p)), g(!1);
         }
       } catch (p) {
         console.error("Upload failed", p);
       } finally {
-        P(!1);
+        O(!1);
       }
     }
   }, ne = async () => {
     if (!(!i || !b)) {
-      P(!0);
+      O(!0);
       try {
         const z = `${A}${i}/`;
         m && (await m({
@@ -2458,18 +2465,18 @@ const ar = ({
       } catch (z) {
         console.error("Failed to create folder", z);
       } finally {
-        P(!1);
+        O(!1);
       }
     }
   }, K = async (z) => {
-    P(!0);
+    O(!0);
     try {
       const I = await f?.(z.id);
       _(z), r(z, I), g(!1);
     } catch (I) {
       console.error("Failed to download file", I);
     } finally {
-      P(!1);
+      O(!1);
     }
   }, B = (z) => {
     z.stopPropagation(), _(null), r(null);
@@ -2480,11 +2487,11 @@ const ar = ({
         p.path === A && z.add(p.name);
         return;
       }
-      const O = p.providerKey || p.name, J = (A ? O.substring(A.length) : O).split("/").filter((j) => j !== "");
+      const j = p.providerKey || p.name, J = (A ? j.substring(A.length) : j).split("/").filter((P) => P !== "");
       J.length > 1 ? z.add(J[0]) : J.length === 1 && I.push(p);
     }), {
       folders: Array.from(z).sort(),
-      files: I.sort((p, O) => p.name.localeCompare(O.name))
+      files: I.sort((p, j) => p.name.localeCompare(j.name))
     };
   }, [$, A]), D = (z) => {
     X((I) => `${I}${z}/`);
@@ -2586,7 +2593,7 @@ const ar = ({
             {
               onClick: B,
               className: "p-1 hover:bg-surface-hover rounded",
-              children: /* @__PURE__ */ e(Y, { icon: ye, size: "xs" })
+              children: /* @__PURE__ */ e(Y, { icon: Ne, size: "xs" })
             }
           )
         ]
@@ -2631,7 +2638,7 @@ const ar = ({
                         placeholder: "Search...",
                         value: F,
                         onChange: (z) => re(z.target.value),
-                        startIcon: /* @__PURE__ */ e(ke, { size: 14 }),
+                        startIcon: /* @__PURE__ */ e(Ce, { size: 14 }),
                         fullWidth: !0,
                         size: "sm"
                       }
@@ -2894,7 +2901,7 @@ const en = ({
       return w.validator ? w.validator(i, S) : null;
     },
     [t]
-  ), P = de(
+  ), O = de(
     (k, i) => {
       let S = or(
         b,
@@ -2953,7 +2960,7 @@ const en = ({
             xe,
             {
               ...T,
-              onChange: (C) => P(k.name, C.target.value),
+              onChange: (C) => O(k.name, C.target.value),
               type: k.textType || k.type,
               autoComplete: k.autocomplete,
               error: S,
@@ -2965,7 +2972,7 @@ const en = ({
             $e,
             {
               ...T,
-              onChange: (C) => P(k.name, C.target.value),
+              onChange: (C) => O(k.name, C.target.value),
               rows: 4,
               error: S,
               size: m
@@ -2973,10 +2980,10 @@ const en = ({
           );
         case "select":
           return /* @__PURE__ */ e(
-            ve,
+            ye,
             {
               ...T,
-              onChange: (C) => P(k.name, C),
+              onChange: (C) => O(k.name, C),
               options: (k.options || []).map((C) => ({
                 ...C,
                 value: String(C.value)
@@ -2990,11 +2997,11 @@ const en = ({
           );
         case "checkbox":
           return /* @__PURE__ */ e(
-            be,
+            ge,
             {
               ...T,
               checked: !!i,
-              onChange: (C) => P(k.name, C.target.checked),
+              onChange: (C) => O(k.name, C.target.checked),
               size: m
             }
           );
@@ -3011,7 +3018,7 @@ const en = ({
                     name: k.name,
                     value: C.value,
                     checked: i === C.value,
-                    onChange: () => P(k.name, C.value),
+                    onChange: () => O(k.name, C.value),
                     disabled: w || C.disabled,
                     className: "size-checkbox shrink-0 border border-border-strong bg-surface-input accent-accent focus-visible:outline-none focus-visible:focus-ring"
                   }
@@ -3027,7 +3034,7 @@ const en = ({
             {
               ...T,
               value: i ? new Date(i) : null,
-              onChange: (C) => P(k.name, C),
+              onChange: (C) => O(k.name, C),
               size: m
             }
           );
@@ -3037,7 +3044,7 @@ const en = ({
             {
               ...T,
               value: i,
-              onChange: (C) => P(k.name, C),
+              onChange: (C) => O(k.name, C),
               error: S,
               onListFiles: (C) => v?.http.invoke({
                 method: "POST",
@@ -3069,7 +3076,7 @@ const en = ({
             It,
             {
               value: i || {},
-              onChange: (C) => P(k.name, C),
+              onChange: (C) => O(k.name, C),
               onListFolders: () => v?.http.invoke({
                 method: "GET",
                 action: "storage.mount"
@@ -3082,7 +3089,7 @@ const en = ({
         case "custom":
           return k.customComponent?.({
             value: i,
-            onChange: (C) => P(k.name, C),
+            onChange: (C) => O(k.name, C),
             error: S,
             disabled: w
           });
@@ -3095,9 +3102,9 @@ const en = ({
             } catch {
             }
           const ae = () => {
-            P(k.name, [...C, {}]);
+            O(k.name, [...C, {}]);
           }, ne = (B) => {
-            P(
+            O(
               k.name,
               C.filter((M, D) => D !== B)
             );
@@ -3106,7 +3113,7 @@ const en = ({
             E[B] = {
               ...E[B],
               [M]: D
-            }, P(k.name, E);
+            }, O(k.name, E);
           };
           return /* @__PURE__ */ c("div", { className: "flex flex-col gap-2", children: [
             C.map((B, M) => /* @__PURE__ */ c("div", { className: "flex items-start gap-2", children: [
@@ -3168,7 +3175,7 @@ const en = ({
                             );
                           case "select":
                             return /* @__PURE__ */ e(
-                              ve,
+                              ye,
                               {
                                 ...q,
                                 onChange: (R) => K(
@@ -3191,7 +3198,7 @@ const en = ({
                             );
                           case "checkbox":
                             return /* @__PURE__ */ e(
-                              be,
+                              ge,
                               {
                                 ...q,
                                 checked: !!B?.[D.name],
@@ -3308,7 +3315,7 @@ const en = ({
           return null;
       }
     },
-    [b, $, A, h, m, P]
+    [b, $, A, h, m, O]
   ), V = de(
     (k) => {
       if (k.conditional && !k.conditional(b))
@@ -3503,7 +3510,7 @@ function rn({
             onClick: o,
             className: "ml-1.5 flex-shrink-0 hover:opacity-70 transition-opacity",
             "aria-label": "Remove badge",
-            children: /* @__PURE__ */ e(Y, { icon: ye, size: "xs", color: "current" })
+            children: /* @__PURE__ */ e(Y, { icon: Ne, size: "xs", color: "current" })
           }
         )
       ]
@@ -3904,7 +3911,7 @@ const fn = ({
       "rounded-full": a === "full"
     },
     f
-  ), P = d(
+  ), O = d(
     "w-full h-full object-cover transition-opacity duration-fast",
     {
       "opacity-0": N || b,
@@ -3924,7 +3931,7 @@ const fn = ({
         ...g,
         src: A,
         alt: r,
-        className: P,
+        className: O,
         onLoad: $,
         onError: Z
       }
@@ -3957,7 +3964,7 @@ function hn({
   bulkActions: $,
   header: Z,
   stickyHeader: H = !1,
-  bordered: P = !1,
+  bordered: O = !1,
   emptyContent: F,
   loading: re = !1,
   loadingRows: V = 4,
@@ -3983,7 +3990,7 @@ function hn({
     );
   }, ae = (E) => X?.(E ? [...t] : []), ne = d(
     "flex flex-col",
-    P && "overflow-hidden rounded-lg border border-border-subtle",
+    O && "overflow-hidden rounded-lg border border-border-subtle",
     _
   );
   if (re)
@@ -4017,8 +4024,8 @@ function hn({
           "aria-current": W || void 0,
           onClick: () => l(E, q),
           onFocus: () => u?.(q),
-          onKeyDown: (O) => {
-            O.key !== "Enter" && O.key !== " " || (O.preventDefault(), l(E, q));
+          onKeyDown: (j) => {
+            j.key !== "Enter" && j.key !== " " || (j.preventDefault(), l(E, q));
           }
         } : {},
         className: d(
@@ -4031,11 +4038,11 @@ function hn({
           I && "opacity-55"
         ),
         children: [
-          L && /* @__PURE__ */ e("span", { onClick: (O) => O.stopPropagation(), children: /* @__PURE__ */ e(
-            be,
+          L && /* @__PURE__ */ e("span", { onClick: (j) => j.stopPropagation(), children: /* @__PURE__ */ e(
+            ge,
             {
               checked: C(E),
-              onChange: (O) => ee(E, O.target.checked),
+              onChange: (j) => ee(E, j.target.checked),
               "aria-label": "Rij selecteren"
             }
           ) }),
@@ -4066,10 +4073,10 @@ function hn({
       ...q.filter((W) => E.has(W.id)),
       ...[...E.keys()].filter((W) => !q.some((z) => z.id === W)).map((W) => ({ id: W }))
     ].flatMap((W, z) => {
-      const I = E.get(W.id) ?? [], p = v && k[W.id], O = W.title ?? W.id, G = W.count ?? I.length, J = /* @__PURE__ */ e(
+      const I = E.get(W.id) ?? [], p = v && k[W.id], j = W.title ?? W.id, G = W.count ?? I.length, J = /* @__PURE__ */ e(
         "li",
         {
-          onClick: v ? () => i((j) => ({ ...j, [W.id]: !j[W.id] })) : void 0,
+          onClick: v ? () => i((P) => ({ ...P, [W.id]: !P[W.id] })) : void 0,
           className: d(
             "flex items-center gap-2 bg-surface-sunk px-4 py-1.5",
             "text-xs font-semibold uppercase tracking-label text-text-subtle",
@@ -4081,9 +4088,9 @@ function hn({
           ),
           "aria-expanded": v ? !p : void 0,
           style: N ? { top: H ? 28 : 0 } : void 0,
-          children: g ? g(W, I.map((j) => j.item)) : /* @__PURE__ */ c(he, { children: [
+          children: g ? g(W, I.map((P) => P.item)) : /* @__PURE__ */ c(he, { children: [
             v && /* @__PURE__ */ e(
-              we,
+              ke,
               {
                 "aria-hidden": !0,
                 className: d(
@@ -4092,7 +4099,7 @@ function hn({
                 )
               }
             ),
-            /* @__PURE__ */ e("span", { children: O }),
+            /* @__PURE__ */ e("span", { children: j }),
             !b && /* @__PURE__ */ e("span", { className: "ml-auto font-normal tabular-nums", children: G })
           ] })
         },
@@ -4101,7 +4108,7 @@ function hn({
       return p ? [J] : [
         J,
         ...I.map(
-          ({ item: j, index: oe }, Se) => M(j, oe, Se === 0)
+          ({ item: P, index: oe }, be) => M(P, oe, be === 0)
         )
       ];
     });
@@ -4109,7 +4116,7 @@ function hn({
   return /* @__PURE__ */ c("div", { ref: S, className: ne, onKeyDown: l ? w : void 0, 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(
-        be,
+        ge,
         {
           checked: K,
           indeterminate: B,
@@ -4218,7 +4225,7 @@ const gn = ({
       children: [
         /* @__PURE__ */ c("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__ */ c("div", { className: "flex items-start gap-4 text-text", children: [
-            y && /* @__PURE__ */ e(te, { variant: "secondary", onClick: y, leftIcon: /* @__PURE__ */ e(Y, { icon: Ne, size: "sm" }), iconOnly: !0 }),
+            y && /* @__PURE__ */ e(te, { variant: "secondary", onClick: y, leftIcon: /* @__PURE__ */ e(Y, { icon: we, size: "sm" }), iconOnly: !0 }),
             /* @__PURE__ */ c("div", { className: "min-w-0 flex-1", children: [
               h ? /* @__PURE__ */ e(
                 "input",
@@ -4301,7 +4308,7 @@ const gn = ({
   padding: a = "md",
   children: o
 }) => /* @__PURE__ */ c("div", { className: d("flex items-center gap-2 mb-3", zr[a], s), children: [
-  r && /* @__PURE__ */ e(te, { variant: "secondary", onClick: r, leftIcon: /* @__PURE__ */ e(Y, { icon: Ne, size: "sm" }), iconOnly: !0 }),
+  r && /* @__PURE__ */ e(te, { variant: "secondary", onClick: r, leftIcon: /* @__PURE__ */ e(Y, { icon: we, size: "sm" }), iconOnly: !0 }),
   o && /* @__PURE__ */ e("div", { className: "flex-1 min-w-0", children: o }),
   t.length > 0 && /* @__PURE__ */ e("div", { className: d("flex flex-wrap gap-2", !o && "ml-auto"), children: t.map(
     (l) => l.splitOptions && l.splitOptions.length > 0 ? /* @__PURE__ */ e(
@@ -4860,7 +4867,7 @@ const zn = ({
       ref: h,
       children: [
         /* @__PURE__ */ c("div", { className: "flex items-center gap-2 px-3 flex-shrink-0", children: [
-          /* @__PURE__ */ e(ke, { className: "w-4 h-4 text-text-muted shrink-0" }),
+          /* @__PURE__ */ e(Ce, { className: "w-4 h-4 text-text-muted shrink-0" }),
           /* @__PURE__ */ e(
             "input",
             {
@@ -4892,7 +4899,7 @@ const zn = ({
                   children: [
                     b.icon && /* @__PURE__ */ e("span", { className: "mr-3", children: b.icon }),
                     /* @__PURE__ */ e("span", { className: "flex-grow", children: b.label }),
-                    b.subCommands && /* @__PURE__ */ e("span", { className: "text-text-muted", children: /* @__PURE__ */ e(we, { className: "w-4 h-4" }) })
+                    b.subCommands && /* @__PURE__ */ e("span", { className: "text-text-muted", children: /* @__PURE__ */ e(ke, { className: "w-4 h-4" }) })
                   ]
                 },
                 b.id
@@ -5111,7 +5118,7 @@ export {
   Jr as ButtonGroup,
   En as Card,
   mn as ChannelBadge,
-  be as Checkbox,
+  ge as Checkbox,
   zn as CommandPalette,
   tn as ConfirmDialog,
   Rt as ContentLoading,
@@ -5141,7 +5148,7 @@ export {
   Ft as SearchableTextField,
   vn as SectionDivider,
   Zr as SegmentedToggle,
-  ve as Select,
+  ye as Select,
   yn as SettingsRow,
   Nn as SettingsSection,
   Cn as SidebarMenu,