@opencxh/ui-kit 3.83.0 → 3.87.0

package/dist/index.js

@@ -1,31 +1,31 @@
 import { clsx as je } from "clsx";
 import { jsxs as d, jsx as e, Fragment as $e } from "react/jsx-runtime";
-import { VideoOff as _e, User as Be, MicOff as Pe, Mic as Oe, ChevronDown as Ve, FileText as pe, HardDrive as ke, X as We, ArrowLeft as we, Search as ze, FolderPlus as Fe, Upload as Re, Folder as Ce, Pencil as He, ChevronDownIcon as qe, ChevronRight as Ue } from "lucide-react";
+import { VideoOff as _e, User as Pe, MicOff as Be, Mic as Oe, ChevronDown as We, FileText as xe, HardDrive as ke, X as Fe, ArrowLeft as we, Search as Te, FolderPlus as Ve, Upload as Re, Folder as Ce, Pencil as He, ChevronDownIcon as qe, ChevronRight as Ue } from "lucide-react";
 import se, { useRef as J, useEffect as U, forwardRef as ce, useState as P, useCallback as ae, useMemo as de, createContext as Ge, Component as Ke } from "react";
 function p(...t) {
   return je(t);
 }
-function Qt(t) {
+function er(t) {
   return (a, r) => t[a]?.[r] || "";
 }
-function er(t) {
+function tr(t) {
   return (a) => t[a] || "";
 }
-function tr({ tiles: t, pinned: a, className: r }) {
+function rr({ tiles: t, pinned: a, className: r }) {
   if (a)
     return /* @__PURE__ */ d("div", { className: p("flex flex-col md:flex-row gap-2 h-full", r), children: [
       /* @__PURE__ */ e("div", { className: "flex-1 min-h-[240px]", children: a }),
-      t.length > 0 && /* @__PURE__ */ e("div", { className: "flex md:flex-col gap-2 md:w-48 overflow-auto", children: t.map((l, o) => /* @__PURE__ */ e("div", { className: "min-w-[160px] md:min-w-0", children: l }, o)) })
+      t.length > 0 && /* @__PURE__ */ e("div", { className: "flex md:flex-col gap-2 md:w-48 overflow-auto", children: t.map((s, o) => /* @__PURE__ */ e("div", { className: "min-w-[160px] md:min-w-0", children: s }, o)) })
     ] });
   const n = t.length <= 1 ? "grid-cols-1" : t.length <= 4 ? "grid-cols-2" : t.length <= 9 ? "grid-cols-3" : "grid-cols-4";
-  return /* @__PURE__ */ e("div", { className: p("grid gap-2 h-full", n, r), children: t.map((l, o) => /* @__PURE__ */ e("div", { children: l }, o)) });
+  return /* @__PURE__ */ e("div", { className: p("grid gap-2 h-full", n, r), children: t.map((s, o) => /* @__PURE__ */ e("div", { children: s }, o)) });
 }
-function rr({
+function nr({
   name: t,
   avatarUrl: a,
   muted: r,
   speaking: n,
-  hasVideo: l,
+  hasVideo: s,
   videoSlot: o,
   className: u
 }) {
@@ -38,27 +38,27 @@ function rr({
         u
       ),
       children: [
-        l && o ? /* @__PURE__ */ e("div", { className: "absolute inset-0", children: o }) : /* @__PURE__ */ e("div", { className: "flex flex-col items-center gap-2 text-gray-300", children: a ? /* @__PURE__ */ e("img", { src: a, alt: t, className: "w-16 h-16 rounded-full object-cover" }) : /* @__PURE__ */ e("div", { className: "w-16 h-16 rounded-full bg-gray-700 flex items-center justify-center", children: l ? /* @__PURE__ */ e(_e, { className: "w-8 h-8" }) : /* @__PURE__ */ e(Be, { className: "w-8 h-8" }) }) }),
+        s && o ? /* @__PURE__ */ e("div", { className: "absolute inset-0", children: o }) : /* @__PURE__ */ e("div", { className: "flex flex-col items-center gap-2 text-gray-300", children: a ? /* @__PURE__ */ e("img", { src: a, alt: t, className: "w-16 h-16 rounded-full object-cover" }) : /* @__PURE__ */ e("div", { className: "w-16 h-16 rounded-full bg-gray-700 flex items-center justify-center", children: s ? /* @__PURE__ */ e(_e, { className: "w-8 h-8" }) : /* @__PURE__ */ e(Pe, { className: "w-8 h-8" }) }) }),
         /* @__PURE__ */ d("div", { className: "absolute bottom-2 left-2 flex items-center gap-1.5 px-2 py-1 rounded bg-black/50 text-white text-xs", children: [
-          r ? /* @__PURE__ */ e(Pe, { className: "w-3 h-3" }) : /* @__PURE__ */ e(Oe, { className: "w-3 h-3" }),
+          r ? /* @__PURE__ */ e(Be, { className: "w-3 h-3" }) : /* @__PURE__ */ e(Oe, { className: "w-3 h-3" }),
           /* @__PURE__ */ e("span", { className: "truncate max-w-[140px]", children: t })
         ] })
       ]
     }
   );
 }
-function nr({ attach: t, active: a = !0, mirrored: r = !1, className: n }) {
-  const l = J(null);
+function ar({ attach: t, active: a = !0, mirrored: r = !1, className: n }) {
+  const s = J(null);
   return U(() => {
-    if (!a || !l.current) return;
-    const o = t(l.current);
+    if (!a || !s.current) return;
+    const o = t(s.current);
     return () => {
-      typeof o == "function" && o(), l.current && (l.current.innerHTML = "");
+      typeof o == "function" && o(), s.current && (s.current.innerHTML = "");
     };
   }, [t, a]), /* @__PURE__ */ e(
     "div",
     {
-      ref: l,
+      ref: s,
       className: p(
         "w-full h-full bg-gray-900 overflow-hidden",
         r && "[&>*]:scale-x-[-1]",
@@ -93,19 +93,19 @@ const Je = {
     size: a = "md",
     fullWidth: r = !1,
     loading: n = !1,
-    leftIcon: l,
+    leftIcon: s,
     rightIcon: o,
     iconOnly: u = !1,
     className: b,
     children: x,
     disabled: g,
     ...f
-  }, s) => {
+  }, l) => {
     const m = g || n;
     return /* @__PURE__ */ d(
       "button",
       {
-        ref: s,
+        ref: l,
         type: "button",
         className: p(
           // Base styles — radius/focus/colors come from the token-driven `.btn o__*` CSS
@@ -156,22 +156,22 @@ const Je = {
               ]
             }
           ),
-          !n && l && /* @__PURE__ */ e("span", { className: p("flex-shrink-0", !u && "mr-2"), children: l }),
+          !n && s && /* @__PURE__ */ e("span", { className: p("flex-shrink-0", !u && "mr-2"), children: s }),
           !u && x,
           !n && o && /* @__PURE__ */ e("span", { className: p("flex-shrink-0", !u && "ml-2"), children: o }),
-          u && !n && !l && !o && x
+          u && !n && !s && !o && x
         ]
       }
     );
   }
 );
 te.displayName = "Button";
-const ar = ({
+const lr = ({
   children: t,
   size: a = "md",
   orientation: r = "horizontal",
   attached: n = !0,
-  className: l
+  className: s
 }) => {
   const o = p(
     "inline-flex",
@@ -193,15 +193,15 @@ const ar = ({
       "gap-2": !n && (a === "sm" || a === "md"),
       "gap-3": !n && (a === "lg" || a === "xl")
     },
-    l
+    s
   );
   return /* @__PURE__ */ e("div", { className: o, role: "group", children: t });
-}, lr = ({
+}, sr = ({
   variant: t = "default",
   size: a = "md",
   color: r = "primary",
   disabled: n = !1,
-  external: l = !1,
+  external: s = !1,
   className: o,
   children: u,
   href: b,
@@ -209,7 +209,7 @@ const ar = ({
   rel: g,
   ...f
 }) => {
-  const s = l || b && (b.startsWith("http") || b.startsWith("mailto:")), m = p(
+  const l = s || b && (b.startsWith("http") || b.startsWith("mailto:")), m = p(
     // Base styles
     "inline-flex items-center gap-1 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2",
     // Size variants
@@ -266,12 +266,12 @@ const ar = ({
   ), h = {
     ...f,
     href: n ? void 0 : b,
-    target: s ? "_blank" : x,
-    rel: s ? "noopener noreferrer" : g
+    target: l ? "_blank" : x,
+    rel: l ? "noopener noreferrer" : g
   };
   return /* @__PURE__ */ d("a", { className: m, ...h, children: [
     u,
-    s && /* @__PURE__ */ e(
+    l && /* @__PURE__ */ e(
       "svg",
       {
         className: "w-3 h-3 ml-1",
@@ -299,23 +299,23 @@ const ar = ({
   sm: "px-3 py-1.5 text-sm",
   md: "px-4 py-2 text-sm"
 };
-function Te({
+function ze({
   label: t,
   onClick: a,
   variant: r = "primary",
   size: n = "md",
-  icon: l,
+  icon: s,
   options: o,
   disabled: u = !1
 }) {
   const [b, x] = P(!1), g = J(null), f = ae(() => {
-    x((s) => !s);
+    x((l) => !l);
   }, []);
   return U(() => {
-    const s = (m) => {
+    const l = (m) => {
       g.current && !g.current.contains(m.target) && x(!1);
     };
-    return document.addEventListener("mousedown", s), () => document.removeEventListener("mousedown", s);
+    return document.addEventListener("mousedown", l), () => document.removeEventListener("mousedown", l);
   }, []), /* @__PURE__ */ d("div", { ref: g, className: "relative inline-flex items-center gap-px", children: [
     /* @__PURE__ */ d(
       "button",
@@ -332,7 +332,7 @@ function Te({
           "!rounded-r-none"
         ),
         children: [
-          l && /* @__PURE__ */ e("span", { className: "mr-2 flex-shrink-0", children: l }),
+          s && /* @__PURE__ */ e("span", { className: "mr-2 flex-shrink-0", children: s }),
           t
         ]
       }
@@ -351,23 +351,23 @@ function Te({
           n === "sm" ? "px-1.5 py-1.5" : "px-2 py-2",
           "!rounded-l-none"
         ),
-        children: /* @__PURE__ */ e(Ve, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ e(We, { className: "h-4 w-4" })
       }
     ),
-    b && o.length > 0 && /* @__PURE__ */ e("div", { className: "absolute right-0 top-full mt-1 z-50 min-w-[160px] rounded-lg border border-gray-200 bg-white shadow-lg py-1", children: o.map((s) => /* @__PURE__ */ e(
+    b && o.length > 0 && /* @__PURE__ */ e("div", { className: "absolute right-0 top-full mt-1 z-50 min-w-[160px] rounded-lg border border-gray-200 bg-white shadow-lg py-1", children: o.map((l) => /* @__PURE__ */ e(
       "button",
       {
         type: "button",
         onClick: () => {
-          s.onClick(), x(!1);
+          l.onClick(), x(!1);
         },
         className: p(
           "w-full text-left px-3 py-2 text-sm hover:bg-gray-50 transition-colors",
-          s.variant === "destructive" ? "text-red-600 hover:bg-red-50" : "text-gray-700"
+          l.variant === "destructive" ? "text-red-600 hover:bg-red-50" : "text-gray-700"
         ),
-        children: s.label
+        children: l.label
       },
-      s.id
+      l.id
     )) })
   ] });
 }
@@ -381,29 +381,29 @@ const Qe = {
   md: "text-sm",
   lg: "text-base",
   full: "text-base"
-}, ge = ce(
+}, ye = ce(
   ({
     label: t,
     helperText: a,
     error: r,
     size: n = "md",
-    indeterminate: l = !1,
+    indeterminate: s = !1,
     containerClassName: o,
     labelClassName: u,
     className: b,
     id: x,
     ...g
   }, f) => {
-    const s = x || `checkbox-${Math.random().toString(36).substr(2, 9)}`, m = !!r;
+    const l = x || `checkbox-${Math.random().toString(36).substr(2, 9)}`, m = !!r;
     return se.useEffect(() => {
-      f && typeof f == "object" && f.current && (f.current.indeterminate = l);
-    }, [l, f]), /* @__PURE__ */ d("div", { className: p("flex flex-col", o), children: [
+      f && typeof f == "object" && f.current && (f.current.indeterminate = s);
+    }, [s, f]), /* @__PURE__ */ d("div", { className: p("flex flex-col", o), children: [
       /* @__PURE__ */ d("div", { className: "flex items-start", children: [
         /* @__PURE__ */ e("div", { className: "flex items-center h-5", children: /* @__PURE__ */ e(
           "input",
           {
             ref: f,
-            id: s,
+            id: l,
             type: "checkbox",
             className: p(
               // Base styles
@@ -426,7 +426,7 @@ const Qe = {
           /* @__PURE__ */ e(
             "label",
             {
-              htmlFor: s,
+              htmlFor: l,
               className: p(
                 "font-medium cursor-pointer",
                 m ? "text-error" : "text-default",
@@ -443,56 +443,56 @@ const Qe = {
     ] });
   }
 );
-ge.displayName = "Checkbox";
-const tt = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) }), rt = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "m15 18-6-6 6-6" }) }), nt = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "m9 18 6-6-6-6" }) }), ye = ce(({
+ye.displayName = "Checkbox";
+const tt = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) }), rt = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "m15 18-6-6 6-6" }) }), nt = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "m9 18 6-6-6-6" }) }), ve = ce(({
   value: t,
   onChange: a,
   placeholder: r = "Select date",
   disabled: n = !1,
-  required: l = !1,
+  required: s = !1,
   size: o = "md",
   className: u,
   minDate: b,
   maxDate: x,
   format: g = "MM/dd/yyyy"
 }, f) => {
-  const [s, m] = P(!1), [h, w] = P(() => t || /* @__PURE__ */ new Date()), k = J(null);
+  const [l, m] = P(!1), [h, w] = P(() => t || /* @__PURE__ */ new Date()), k = J(null);
   U(() => {
-    const T = (V) => {
-      k.current && !k.current.contains(V.target) && m(!1);
+    const z = (W) => {
+      k.current && !k.current.contains(W.target) && m(!1);
     };
-    return s && document.addEventListener("mousedown", T), () => {
-      document.removeEventListener("mousedown", T);
+    return l && document.addEventListener("mousedown", z), () => {
+      document.removeEventListener("mousedown", z);
     };
-  }, [s]);
-  const y = (T) => {
-    if (!T) return "";
-    const V = T.getDate().toString().padStart(2, "0"), F = (T.getMonth() + 1).toString().padStart(2, "0"), i = T.getFullYear();
+  }, [l]);
+  const v = (z) => {
+    if (!z) return "";
+    const W = z.getDate().toString().padStart(2, "0"), V = (z.getMonth() + 1).toString().padStart(2, "0"), i = z.getFullYear();
     switch (g) {
       case "dd/MM/yyyy":
-        return `${V}/${F}/${i}`;
+        return `${W}/${V}/${i}`;
       case "yyyy-MM-dd":
-        return `${i}-${F}-${V}`;
+        return `${i}-${V}-${W}`;
       case "MM/dd/yyyy":
       default:
-        return `${F}/${V}/${i}`;
+        return `${V}/${W}/${i}`;
     }
   }, j = () => {
-    const T = h.getFullYear(), V = h.getMonth(), F = new Date(T, V, 1), i = new Date(F);
-    i.setDate(i.getDate() - F.getDay());
-    const v = [], L = new Date(i);
+    const z = h.getFullYear(), W = h.getMonth(), V = new Date(z, W, 1), i = new Date(V);
+    i.setDate(i.getDate() - V.getDay());
+    const y = [], E = new Date(i);
     for (let S = 0; S < 42; S++)
-      v.push(new Date(L)), L.setDate(L.getDate() + 1);
-    return v;
-  }, N = (T) => {
-    T.getMonth() === h.getMonth() && (b && T < b || x && T > x || (a?.(T), m(!1)));
+      y.push(new Date(E)), E.setDate(E.getDate() + 1);
+    return y;
+  }, N = (z) => {
+    z.getMonth() === h.getMonth() && (b && z < b || x && z > x || (a?.(z), m(!1)));
   }, q = () => {
     w(new Date(h.getFullYear(), h.getMonth() - 1, 1));
   }, B = () => {
     w(new Date(h.getFullYear(), h.getMonth() + 1, 1));
   }, G = () => {
     a?.(null), m(!1);
-  }, W = p(
+  }, F = p(
     "w-full border border-neutral rounded-md transition-colors duration-200",
     "bg-module text-default",
     "placeholder:text-default dark:placeholder:text-muted",
@@ -526,27 +526,27 @@ const tt = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
         {
           ref: f,
           type: "text",
-          value: y(t ?? null),
+          value: v(t ?? null),
           placeholder: r,
           disabled: n,
-          required: l,
+          required: s,
           readOnly: !0,
-          onClick: () => !n && m(!s),
-          className: p(W, "pr-10 cursor-pointer")
+          onClick: () => !n && m(!l),
+          className: p(F, "pr-10 cursor-pointer")
         }
       ),
       /* @__PURE__ */ e(
         "button",
         {
           type: "button",
-          onClick: () => !n && m(!s),
+          onClick: () => !n && m(!l),
           disabled: n,
           className: "absolute inset-y-0 right-0 flex items-center pr-3 text-muted hover:text-muted",
           children: /* @__PURE__ */ e(tt, {})
         }
       )
     ] }),
-    s && /* @__PURE__ */ d("div", { className: "absolute z-50 mt-1 bg-module border border-neutral rounded-md shadow-lg p-4 min-w-[280px]", children: [
+    l && /* @__PURE__ */ d("div", { className: "absolute z-50 mt-1 bg-module border border-neutral rounded-md shadow-lg p-4 min-w-[280px]", children: [
       /* @__PURE__ */ d("div", { className: "flex items-center justify-between mb-4", children: [
         /* @__PURE__ */ e(
           "button",
@@ -570,26 +570,26 @@ const tt = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
           }
         )
       ] }),
-      /* @__PURE__ */ e("div", { className: "grid grid-cols-7 gap-1 mb-2", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((T) => /* @__PURE__ */ e("div", { className: "text-xs font-medium text-muted text-center py-1", children: T }, T)) }),
-      /* @__PURE__ */ e("div", { className: "grid grid-cols-7 gap-1", children: I.map((T, V) => {
-        const F = T.getMonth() === h.getMonth(), i = t && T.toDateString() === t.toDateString(), v = T.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), L = !F || b && T < b || x && T > x;
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-7 gap-1 mb-2", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((z) => /* @__PURE__ */ e("div", { className: "text-xs font-medium text-muted text-center py-1", children: z }, z)) }),
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-7 gap-1", children: I.map((z, W) => {
+        const V = z.getMonth() === h.getMonth(), i = t && z.toDateString() === t.toDateString(), y = z.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), E = !V || b && z < b || x && z > x;
         return /* @__PURE__ */ e(
           "button",
           {
-            onClick: () => !L && N(T),
-            disabled: L,
+            onClick: () => !E && N(z),
+            disabled: E,
             className: p(
               "w-8 h-8 text-sm rounded transition-colors duration-200",
               {
-                "text-default hover:bg-neutral-container": F && !i && !L,
+                "text-default hover:bg-neutral-container": V && !i && !E,
                 "bg-primary text-white": i,
-                "bg-neutral-container text-default": v && !i,
-                "text-muted cursor-not-allowed": L
+                "bg-neutral-container text-default": y && !i,
+                "text-muted cursor-not-allowed": E
               }
             ),
-            children: T.getDate()
+            children: z.getDate()
           },
-          V
+          W
         );
       }) }),
       /* @__PURE__ */ d("div", { className: "flex justify-between items-center mt-4 pt-3 border-t border-neutral", children: [
@@ -653,7 +653,7 @@ const tt = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
   md: "px-3 py-2 text-sm",
   lg: "px-3 py-2 text-sm",
   full: "px-3 py-2 text-sm"
-}, xe = {
+}, be = {
   sm: "h-4 w-4",
   md: "h-5 w-5",
   lg: "h-6 w-6",
@@ -664,75 +664,75 @@ const tt = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
     helperText: a,
     error: r,
     size: n = "md",
-    fullWidth: l = !1,
+    fullWidth: s = !1,
     startIcon: o = /* @__PURE__ */ e(at, {}),
     loading: u = !1,
     containerClassName: b,
     labelClassName: x,
     className: g,
     id: f,
-    options: s,
+    options: l,
     onRemoteSearch: m,
     onSelect: h,
     debounceTime: w = 500,
     showAllOnOpen: k = !1,
-    value: y,
+    value: v,
     onChange: j,
     ...N
   }, q) => {
-    const B = f || `searchfield-${Math.random().toString(36).substr(2, 9)}`, G = !!r, W = J(null), I = J(null), [H, T] = P(y || ""), [V, F] = P(!1), [i, v] = P(!1), [L, S] = P(!1);
+    const B = f || `searchfield-${Math.random().toString(36).substr(2, 9)}`, G = !!r, F = J(null), I = J(null), [H, z] = P(v || ""), [W, V] = P(!1), [i, y] = P(!1), [E, S] = P(!1);
     U(() => {
-      y !== void 0 && T(y);
-    }, [y]);
-    const E = de(() => {
-      if (k && !L || !H) return s;
-      const z = String(H).toLowerCase();
-      return s.filter(
-        (D) => String(D.label).toLowerCase().includes(z)
+      v !== void 0 && z(v);
+    }, [v]);
+    const M = de(() => {
+      if (k && !E || !H) return l;
+      const T = String(H).toLowerCase();
+      return l.filter(
+        (D) => String(D.label).toLowerCase().includes(T)
       );
-    }, [H, s, k, L]);
+    }, [H, l, k, E]);
     U(() => {
       if (!m || !H) {
-        v(!1);
+        y(!1);
         return;
       }
-      const z = setTimeout(async () => {
-        v(!0);
+      const T = setTimeout(async () => {
+        y(!0);
         try {
           await m(String(H));
         } catch (D) {
           console.error("Remote search failed:", D);
         } finally {
-          v(!1);
+          y(!1);
         }
       }, w);
       return () => {
-        clearTimeout(z), v(!1);
+        clearTimeout(T), y(!1);
       };
     }, [H, w, m]), U(() => {
-      const z = (D) => {
-        W.current && !W.current.contains(D.target) && F(!1);
+      const T = (D) => {
+        F.current && !F.current.contains(D.target) && V(!1);
       };
-      return document.addEventListener("mousedown", z), () => document.removeEventListener("mousedown", z);
+      return document.addEventListener("mousedown", T), () => document.removeEventListener("mousedown", T);
     }, []);
-    const M = (z) => {
-      const D = z.target.value;
-      T(D), F(!0), S(!0), j && j(z);
-    }, Q = (z) => {
-      T(z.label), F(!1), S(!1), h && h(z.value);
+    const L = (T) => {
+      const D = T.target.value;
+      z(D), V(!0), S(!0), j && j(T);
+    }, Q = (T) => {
+      z(T.label), V(!1), S(!1), h && h(T.value);
     }, re = () => {
-      (s.length > 0 || m) && (F(!0), S(!1));
-    }, X = u || i, $ = V && (E.length > 0 || X), A = de(() => q || I, [q]);
+      (l.length > 0 || m) && (V(!0), S(!1));
+    }, X = u || i, $ = W && (M.length > 0 || X), A = de(() => q || I, [q]);
     return /* @__PURE__ */ d(
       "div",
       {
         className: ie(
           "flex flex-col",
-          l ? "w-full" : "",
+          s ? "w-full" : "",
           b || "",
           "relative"
         ),
-        ref: W,
+        ref: F,
         children: [
           t && /* @__PURE__ */ e(
             "label",
@@ -747,14 +747,14 @@ const tt = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
             }
           ),
           /* @__PURE__ */ d("div", { className: "relative", children: [
-            o && /* @__PURE__ */ e("div", { className: "absolute left-0 pl-3 flex items-center pointer-events-none h-full", children: /* @__PURE__ */ e("span", { className: ie("text-muted", xe[n]), children: o }) }),
+            o && /* @__PURE__ */ e("div", { className: "absolute left-0 pl-3 flex items-center pointer-events-none h-full", children: /* @__PURE__ */ e("span", { className: ie("text-muted", be[n]), children: o }) }),
             /* @__PURE__ */ e(
               "input",
               {
                 ref: A,
                 id: B,
                 value: H,
-                onChange: M,
+                onChange: L,
                 onFocus: re,
                 className: ie(
                   // Base styles
@@ -779,7 +779,7 @@ const tt = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
               /* @__PURE__ */ d(
                 "svg",
                 {
-                  className: ie("animate-spin text-link", xe[n]),
+                  className: ie("animate-spin text-link", be[n]),
                   xmlns: "http://www.w3.org/2000/svg",
                   fill: "none",
                   viewBox: "0 0 24 24",
@@ -813,11 +813,11 @@ const tt = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
                 {
                   className: ie(
                     "text-muted cursor-pointer transition-transform",
-                    xe[n],
-                    V ? "rotate-180" : "rotate-0"
+                    be[n],
+                    W ? "rotate-180" : "rotate-0"
                   ),
                   onClick: () => {
-                    F((z) => (z || S(!1), !z));
+                    V((T) => (T || S(!1), !T));
                   }
                 }
               )
@@ -828,16 +828,16 @@ const tt = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
             {
               className: "absolute z-10 mt-1 w-full bg-module border border-neutral rounded-lg shadow-lg max-h-60 overflow-auto top-full",
               role: "listbox",
-              children: E.length > 0 ? E.map((z) => /* @__PURE__ */ e(
+              children: M.length > 0 ? M.map((T) => /* @__PURE__ */ e(
                 "li",
                 {
                   className: "px-4 py-2 cursor-pointer text-default hover:bg-accent-container hover:text-accent transition-colors",
-                  onClick: () => Q(z),
+                  onClick: () => Q(T),
                   role: "option",
-                  "aria-selected": H === z.label,
-                  children: z.label
+                  "aria-selected": H === T.label,
+                  children: T.label
                 },
-                z.value
+                T.value
               )) : /* @__PURE__ */ e("li", { className: "px-4 py-2 text-muted", children: X || u ? "Zoeken op afstand..." : "Geen resultaten gevonden." })
             }
           ),
@@ -866,87 +866,87 @@ const ct = {
   md: "px-3 py-2 text-sm",
   lg: "px-3 py-2 text-sm",
   full: "px-3 py-2 text-sm"
-}, me = (t) => t.trim().toLowerCase(), ve = ce(
+}, me = (t) => t.trim().toLowerCase(), fe = ce(
   ({
     label: t,
     helperText: a,
     error: r,
     size: n = "md",
-    fullWidth: l = !1,
+    fullWidth: s = !1,
     options: o,
     placeholder: u,
     containerClassName: b,
     labelClassName: x,
     className: g,
     id: f,
-    searchable: s,
+    searchable: l,
     multiple: m,
     value: h,
     onChange: w,
     allowCreate: k,
-    onCreateOption: y,
+    onCreateOption: v,
     ...j
   }, N) => {
-    const q = f || `select-${Math.random().toString(36).substr(2, 9)}`, B = !!r, [G, W] = se.useState(!1), [I, H] = se.useState(""), T = se.useRef(null), [V, F] = se.useState(o);
-    se.useImperativeHandle(N, () => T.current), se.useEffect(() => {
+    const q = f || `select-${Math.random().toString(36).substr(2, 9)}`, B = !!r, [G, F] = se.useState(!1), [I, H] = se.useState(""), z = se.useRef(null), [W, V] = se.useState(o);
+    se.useImperativeHandle(N, () => z.current), se.useEffect(() => {
       const $ = (A) => {
-        T.current && !T.current.contains(A.target) && W(!1);
+        z.current && !z.current.contains(A.target) && F(!1);
       };
       return document.addEventListener("mousedown", $), () => document.removeEventListener("mousedown", $);
     }, []);
     const i = se.useCallback(
       ($, A) => $.some(
-        (z) => me(z.value) === me(A) || me(z.label) === me(A)
+        (T) => me(T.value) === me(A) || me(T.label) === me(A)
       ),
       []
-    ), v = se.useCallback(
+    ), y = se.useCallback(
       ($, A) => {
-        const z = [...$], D = (ee) => {
+        const T = [...$], D = (ee) => {
           const ne = (ee ?? "").trim();
-          ne && (i(z, ne) || z.push({ value: ne, label: ne }));
+          ne && (i(T, ne) || T.push({ value: ne, label: ne }));
         };
-        return Array.isArray(A) ? A.forEach(D) : D(A), z;
+        return Array.isArray(A) ? A.forEach(D) : D(A), T;
       },
       [i]
     );
     se.useEffect(() => {
-      F(($) => {
+      V(($) => {
         const A = [...o];
-        return $.forEach((z) => {
-          !i(A, z.value) && !i(A, z.label) && A.push(z);
-        }), v(A, h);
+        return $.forEach((T) => {
+          !i(A, T.value) && !i(A, T.label) && A.push(T);
+        }), y(A, h);
       });
-    }, [o, h, v, i]);
-    const L = ($) => {
+    }, [o, h, y, i]);
+    const E = ($) => {
       if (m) {
-        const A = Array.isArray(h) ? h : [], z = A.includes($) ? A.filter((D) => D !== $) : [...A, $];
-        w?.(z);
+        const A = Array.isArray(h) ? h : [], T = A.includes($) ? A.filter((D) => D !== $) : [...A, $];
+        w?.(T);
       } else
-        w?.($), W(!1), H("");
-    }, S = m ? null : V.find(($) => $.value === h), E = m ? V.filter(
+        w?.($), F(!1), H("");
+    }, S = m ? null : W.find(($) => $.value === h), M = m ? W.filter(
       ($) => Array.isArray(h) && h.includes($.value)
-    ) : [], M = s && I ? V.filter(
+    ) : [], L = l && I ? W.filter(
       ($) => $.label.toLowerCase().includes(I.toLowerCase())
-    ) : V, Q = !!k && !!s && !!I.trim() && !i(V, I), re = ($) => {
+    ) : W, Q = !!k && !!l && !!I.trim() && !i(W, I), re = ($) => {
       const A = $.trim();
       if (!A) return;
-      const z = y?.(A) ?? {
+      const T = v?.(A) ?? {
         value: A,
         label: A
       };
-      if (i(V, z.value) || i(V, z.label)) {
-        L(z.value), H(""), m || W(!1);
+      if (i(W, T.value) || i(W, T.label)) {
+        E(T.value), H(""), m || F(!1);
         return;
       }
-      F((D) => [...D, z]), L(z.value), H(""), m || W(!1);
-    }, X = () => m ? E.length > 0 ? E.map(($) => $.label).join(", ") : u || "Select options" : S?.label || u || "Select an option";
+      V((D) => [...D, T]), E(T.value), H(""), m || F(!1);
+    }, X = () => m ? M.length > 0 ? M.map(($) => $.label).join(", ") : u || "Select options" : S?.label || u || "Select an option";
     return /* @__PURE__ */ d(
       "div",
       {
-        ref: T,
+        ref: z,
         className: p(
           "relative flex flex-col",
-          l && "w-full",
+          s && "w-full",
           b
         ),
         ...j,
@@ -955,7 +955,7 @@ const ct = {
             "label",
             {
               htmlFor: q,
-              onClick: () => W(!G),
+              onClick: () => F(!G),
               className: p(
                 "block text-sm font-medium mb-1",
                 B ? "text-error" : "text-default",
@@ -970,7 +970,7 @@ const ct = {
               {
                 type: "button",
                 id: q,
-                onClick: () => W(!G),
+                onClick: () => F(!G),
                 className: p(
                   "block w-full rounded-lg border transition-colors duration-200 text-left",
                   "focus:outline-none focus:ring-0 focus:ring-offset-0",
@@ -984,7 +984,7 @@ const ct = {
               }
             ),
             G && /* @__PURE__ */ d("div", { className: "absolute z-10 mt-1 w-full rounded-md bg-module shadow-lg border border-neutral", children: [
-              s && /* @__PURE__ */ e("div", { className: "p-2", children: /* @__PURE__ */ e(
+              l && /* @__PURE__ */ e("div", { className: "p-2", children: /* @__PURE__ */ e(
                 "input",
                 {
                   type: "text",
@@ -1021,17 +1021,17 @@ const ct = {
                   {
                     className: "px-4 py-2 text-sm text-muted cursor-pointer hover:bg-neutral-container",
                     onClick: () => {
-                      w?.(""), W(!1);
+                      w?.(""), F(!1);
                     },
                     children: u
                   }
                 ),
-                M.map(($) => {
+                L.map(($) => {
                   const A = m ? Array.isArray(h) && h.includes($.value) : h === $.value;
                   return /* @__PURE__ */ e(
                     "li",
                     {
-                      onClick: () => !$.disabled && L($.value),
+                      onClick: () => !$.disabled && E($.value),
                       className: p(
                         "px-4 py-2 text-sm cursor-pointer",
                         "text-default",
@@ -1072,7 +1072,7 @@ const ct = {
     );
   }
 );
-ve.displayName = "Select";
+fe.displayName = "Select";
 const it = {
   sm: "px-3 py-1.5 text-sm",
   md: "px-3 py-2 text-sm",
@@ -1084,17 +1084,17 @@ const it = {
     helperText: a,
     error: r,
     size: n = "md",
-    fullWidth: l = !1,
+    fullWidth: s = !1,
     loading: o = !1,
     containerClassName: u,
     labelClassName: b,
     className: x,
     id: g,
     rows: f = 4,
-    ...s
+    ...l
   }, m) => {
     const h = g || `textarea-${Math.random().toString(36).substr(2, 9)}`, w = !!r;
-    return /* @__PURE__ */ d("div", { className: p("flex flex-col", l && "w-full", u), children: [
+    return /* @__PURE__ */ d("div", { className: p("flex flex-col", s && "w-full", u), children: [
       t && /* @__PURE__ */ e(
         "label",
         {
@@ -1125,7 +1125,7 @@ const it = {
               w ? "border-error text-error focus:border-error focus:ring-error" : "border-neutral text-default",
               x
             ),
-            ...s
+            ...l
           }
         ),
         o && /* @__PURE__ */ e("div", { className: "absolute top-3 right-3", children: /* @__PURE__ */ d(
@@ -1177,7 +1177,7 @@ const dt = {
   md: "px-3 py-2 text-sm",
   lg: "px-3 py-2 text-sm",
   full: "px-3 py-2 text-sm"
-}, be = {
+}, ge = {
   sm: "h-4 w-4",
   md: "h-5 w-5",
   lg: "h-6 w-6",
@@ -1188,18 +1188,18 @@ const dt = {
     helperText: a,
     error: r,
     size: n = "md",
-    fullWidth: l = !1,
+    fullWidth: s = !1,
     startIcon: o,
     endIcon: u,
     loading: b = !1,
     containerClassName: x,
     labelClassName: g,
     className: f,
-    id: s,
+    id: l,
     ...m
   }, h) => {
-    const w = s || `textfield-${Math.random().toString(36).substr(2, 9)}`, k = !!r;
-    return /* @__PURE__ */ d("div", { className: p("flex flex-col", l && "w-full", x), children: [
+    const w = l || `textfield-${Math.random().toString(36).substr(2, 9)}`, k = !!r;
+    return /* @__PURE__ */ d("div", { className: p("flex flex-col", s && "w-full", x), children: [
       t && /* @__PURE__ */ e(
         "label",
         {
@@ -1214,7 +1214,7 @@ const dt = {
       ),
       /* @__PURE__ */ d("div", { className: "relative", children: [
         o && // Todo fix inset not showing correctly on different sizes
-        /* @__PURE__ */ e("div", { className: "absolute left-0 pl-3 flex items-center pointer-events-none h-full", children: /* @__PURE__ */ e("span", { className: p("text-muted", be[n]), children: o }) }),
+        /* @__PURE__ */ e("div", { className: "absolute left-0 pl-3 flex items-center pointer-events-none h-full", children: /* @__PURE__ */ e("span", { className: p("text-muted", ge[n]), children: o }) }),
         /* @__PURE__ */ e(
           "input",
           {
@@ -1240,7 +1240,7 @@ const dt = {
         (u || b) && /* @__PURE__ */ e("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: b ? /* @__PURE__ */ d(
           "svg",
           {
-            className: p("animate-spin text-muted", be[n]),
+            className: p("animate-spin text-muted", ge[n]),
             fill: "none",
             viewBox: "0 0 24 24",
             children: [
@@ -1265,7 +1265,7 @@ const dt = {
               )
             ]
           }
-        ) : u && /* @__PURE__ */ e("span", { className: p("text-muted", be[n]), children: u }) })
+        ) : u && /* @__PURE__ */ e("span", { className: p("text-muted", ge[n]), children: u }) })
       ] }),
       (r || a) && /* @__PURE__ */ e(
         "p",
@@ -1286,7 +1286,7 @@ const oe = ({
   size: a = "md",
   color: r = "current",
   clickable: n = !1,
-  onClick: l,
+  onClick: s,
   className: o,
   "aria-label": u,
   ...b
@@ -1314,12 +1314,12 @@ const oe = ({
   ), f = {
     size: x,
     className: g,
-    onClick: n ? l : void 0,
+    onClick: n ? s : void 0,
     "aria-label": u,
     role: n ? "button" : void 0,
     tabIndex: n ? 0 : void 0,
-    onKeyDown: n ? (s) => {
-      (s.key === "Enter" || s.key === " ") && (s.preventDefault(), l?.());
+    onKeyDown: n ? (l) => {
+      (l.key === "Enter" || l.key === " ") && (l.preventDefault(), s?.());
     } : void 0,
     ...b
   };
@@ -1349,14 +1349,14 @@ function mt({
       ] })
     ] }),
     a && /* @__PURE__ */ d("div", { className: "rounded-lg overflow-hidden", children: [
-      /* @__PURE__ */ e("div", { className: `grid grid-cols-${r} gap-2 bg-neutral-container p-3`, children: Array.from({ length: r }).map((l, o) => /* @__PURE__ */ e(
+      /* @__PURE__ */ e("div", { className: `grid grid-cols-${r} gap-2 bg-neutral-container p-3`, children: Array.from({ length: r }).map((s, o) => /* @__PURE__ */ e(
         "div",
         {
           className: "h-4 bg-neutral-border-emphasis rounded w-2/3"
         },
         `header-${o}`
       )) }),
-      Array.from({ length: n }).map((l, o) => /* @__PURE__ */ e(
+      Array.from({ length: n }).map((s, o) => /* @__PURE__ */ e(
         "div",
         {
           className: `grid grid-cols-${r} gap-2 p-3 border-t border-neutral`,
@@ -1378,68 +1378,68 @@ const ft = ({
   options: a,
   value: r,
   onSelect: n,
-  placement: l = "bottom-start",
+  placement: s = "bottom-start",
   disabled: o = !1,
   className: u,
   showCheck: b = !0,
   header: x
 }) => {
-  const [g, f] = P(!1), [s, m] = P(null), [h, w] = P({ top: 0, left: 0 }), [k, y] = P({}), j = J(null), N = J(null), q = J(null), B = J(null);
+  const [g, f] = P(!1), [l, m] = P(null), [h, w] = P({ top: 0, left: 0 }), [k, v] = P({}), j = J(null), N = J(null), q = J(null), B = J(null);
   U(() => {
-    const i = (v) => {
-      j.current && (!j.current.contains(v.target) || q.current && !q.current.contains(v.target)) && (f(!1), m(null), B.current && (clearTimeout(B.current), B.current = null));
+    const i = (y) => {
+      j.current && (!j.current.contains(y.target) || q.current && !q.current.contains(y.target)) && (f(!1), m(null), B.current && (clearTimeout(B.current), B.current = null));
     };
     return g && document.addEventListener("mousedown", i), () => {
       document.removeEventListener("mousedown", i);
     };
   }, [g]), U(() => {
-    const i = (v) => {
-      v.key === "Escape" && (f(!1), m(null), B.current && (clearTimeout(B.current), B.current = null));
+    const i = (y) => {
+      y.key === "Escape" && (f(!1), m(null), B.current && (clearTimeout(B.current), B.current = null));
     };
     return g && document.addEventListener("keydown", i), () => {
       document.removeEventListener("keydown", i);
     };
   }, [g]), U(() => {
-    if (s && j.current) {
+    if (l && j.current) {
       const i = j.current.querySelector(
-        `[data-option-value="${s}"]`
+        `[data-option-value="${l}"]`
       );
       if (i) {
-        const v = i.getBoundingClientRect();
+        const y = i.getBoundingClientRect();
         w({
-          top: v.top,
-          left: v.right + 8
+          top: y.top,
+          left: y.right + 8
         });
       }
     }
-  }, [s]), U(() => () => {
+  }, [l]), U(() => () => {
     B.current && clearTimeout(B.current);
   }, []);
   const G = (i) => {
     if (i.stopPropagation(), !o) {
       if (!g) {
-        const v = N.current?.getBoundingClientRect();
-        if (v) {
+        const y = N.current?.getBoundingClientRect();
+        if (y) {
           const S = {};
-          l.startsWith("bottom") ? S.top = v.bottom + 6 : S.bottom = window.innerHeight - v.top + 6, l.endsWith("start") ? S.left = v.left : S.right = window.innerWidth - v.right, y(S);
+          s.startsWith("bottom") ? S.top = y.bottom + 6 : S.bottom = window.innerHeight - y.top + 6, s.endsWith("start") ? S.left = y.left : S.right = window.innerWidth - y.right, v(S);
         }
       }
       f(!g), m(null), B.current && (clearTimeout(B.current), B.current = null);
     }
-  }, W = (i, v, L) => {
-    i.stopPropagation(), !v.disabled && !v.divider && (!v.children || v.children.length === 0) && (n?.(v.value, L), f(!1), m(null));
+  }, F = (i, y, E) => {
+    i.stopPropagation(), !y.disabled && !y.divider && (!y.children || y.children.length === 0) && (n?.(y.value, E), f(!1), m(null));
   }, I = (i) => {
     B.current && (clearTimeout(B.current), B.current = null), i.children && i.children.length > 0 ? m(i.value) : m(null);
   }, H = (i) => {
     i.children && i.children.length > 0 ? B.current = setTimeout(() => {
       m(null);
     }, 150) : m(null);
-  }, T = (i, v, L) => {
-    i.stopPropagation(), !v.disabled && !v.divider && (n?.(v.value, L), f(!1), m(null));
-  }, V = p(
+  }, z = (i, y, E) => {
+    i.stopPropagation(), !y.disabled && !y.divider && (n?.(y.value, E), f(!1), m(null));
+  }, W = p(
     "fixed z-[60] min-w-[200px] bg-module rounded-md shadow-lg border border-neutral",
     "max-h-60 overflow-auto"
-  ), F = p(
+  ), V = p(
     "fixed z-[60] min-w-[200px] bg-module rounded-md shadow-lg border border-neutral",
     "max-h-60 overflow-auto"
   );
@@ -1464,24 +1464,24 @@ const ft = ({
             children: t
           }
         ),
-        g && /* @__PURE__ */ e("div", { className: V, style: k, children: /* @__PURE__ */ d("div", { className: "p-2", children: [
+        g && /* @__PURE__ */ e("div", { className: W, style: k, children: /* @__PURE__ */ d("div", { className: "p-2", children: [
           x && (typeof x == "string" ? /* @__PURE__ */ e("div", { className: "text-xs font-medium text-muted uppercase tracking-wider px-3 py-2", children: x }) : x),
-          a.map((i, v) => {
+          a.map((i, y) => {
             if (i.divider)
               return /* @__PURE__ */ e(
                 "div",
                 {
                   className: "border-t border-neutral my-2"
                 },
-                `divider-${v}`
+                `divider-${y}`
               );
-            const L = i.children && i.children.length > 0, S = s === i.value;
+            const E = i.children && i.children.length > 0, S = l === i.value;
             return /* @__PURE__ */ d("div", { className: "relative group", children: [
               /* @__PURE__ */ d(
                 "button",
                 {
                   "data-option-value": i.value,
-                  onClick: (E) => W(E, i),
+                  onClick: (M) => F(M, i),
                   onMouseEnter: () => I(i),
                   onMouseLeave: () => H(i),
                   disabled: i.disabled,
@@ -1489,7 +1489,7 @@ const ft = ({
                     "w-full flex items-center justify-between px-3 py-2 text-sm text-default hover:bg-neutral-container rounded-md transition-colors",
                     {
                       "opacity-50 cursor-not-allowed": i.disabled,
-                      "bg-neutral-container": S && L
+                      "bg-neutral-container": S && E
                     }
                   ),
                   children: [
@@ -1502,16 +1502,16 @@ const ft = ({
                     ] }),
                     /* @__PURE__ */ d("div", { className: "flex items-center space-x-2", children: [
                       b && r === i.value && /* @__PURE__ */ e("span", { className: "h-4 w-4 text-success flex-shrink-0 text-sm font-bold", children: "✓" }),
-                      L && /* @__PURE__ */ e("span", { className: "text-muted text-xs", children: "▶" })
+                      E && /* @__PURE__ */ e("span", { className: "text-muted text-xs", children: "▶" })
                     ] })
                   ]
                 }
               ),
-              L && S && /* @__PURE__ */ e(
+              E && S && /* @__PURE__ */ e(
                 "div",
                 {
                   ref: q,
-                  className: F,
+                  className: V,
                   style: {
                     top: `${h.top}px`,
                     left: `${h.left}px`
@@ -1524,45 +1524,45 @@ const ft = ({
                       m(null);
                     }, 150);
                   },
-                  children: /* @__PURE__ */ e("div", { className: "p-2", children: i.children.map((E, M) => {
-                    if (E.divider)
+                  children: /* @__PURE__ */ e("div", { className: "p-2", children: i.children.map((M, L) => {
+                    if (M.divider)
                       return /* @__PURE__ */ e(
                         "div",
                         {
                           className: "border-t border-neutral my-2"
                         },
-                        `divider-${M}`
+                        `divider-${L}`
                       );
                     const Q = typeof r == "object" && r[i.value] && r[i.value].includes(
-                      E.value
-                    ) || r === E.value;
+                      M.value
+                    ) || r === M.value;
                     return /* @__PURE__ */ d(
                       "button",
                       {
-                        onClick: (re) => T(
+                        onClick: (re) => z(
                           re,
-                          E,
+                          M,
                           i.value
                         ),
-                        disabled: E.disabled,
+                        disabled: M.disabled,
                         className: p(
                           "w-full flex items-center justify-between px-3 py-2 text-sm text-default hover:bg-neutral-container rounded-md transition-colors",
                           {
-                            "opacity-50 cursor-not-allowed": E.disabled
+                            "opacity-50 cursor-not-allowed": M.disabled
                           }
                         ),
                         children: [
                           /* @__PURE__ */ d("div", { className: "flex items-center space-x-2 min-w-0", children: [
-                            E.icon && /* @__PURE__ */ e("span", { className: "flex-shrink-0", children: E.icon }),
+                            M.icon && /* @__PURE__ */ e("span", { className: "flex-shrink-0", children: M.icon }),
                             /* @__PURE__ */ d("div", { className: "flex flex-col items-start min-w-0", children: [
-                              /* @__PURE__ */ e("span", { className: "font-base truncate", children: E.label }),
-                              E.description && /* @__PURE__ */ e("span", { className: "text-xs text-muted", children: E.description })
+                              /* @__PURE__ */ e("span", { className: "font-base truncate", children: M.label }),
+                              M.description && /* @__PURE__ */ e("span", { className: "text-xs text-muted", children: M.description })
                             ] })
                           ] }),
                           b && Q && /* @__PURE__ */ e("span", { className: "h-4 w-4 text-success flex-shrink-0 text-sm font-bold", children: "✓" })
                         ]
                       },
-                      E.value
+                      M.value
                     );
                   }) })
                 }
@@ -1570,10 +1570,10 @@ const ft = ({
             ] }, i.value);
           }),
           (() => {
-            const i = a.reduce((v, L) => {
-              if (L.divider) return v;
-              const S = L.children ? L.children.filter((E) => !E.divider).length : 0;
-              return v + 1 + S;
+            const i = a.reduce((y, E) => {
+              if (E.divider) return y;
+              const S = E.children ? E.children.filter((M) => !M.divider).length : 0;
+              return y + 1 + S;
             }, 0);
             return i > 1 && /* @__PURE__ */ e("div", { className: "border-t border-neutral mt-2 pt-2", children: /* @__PURE__ */ d("div", { className: "text-xs text-muted px-3 py-1", children: [
               i,
@@ -1728,10 +1728,10 @@ const ft = ({
   }
 ), Nt = (t) => {
   const a = (n) => t.multiSelect && Array.isArray(t.value) ? t.value?.includes(n) : t.value === n, r = (n) => {
-    t.multiSelect && Array.isArray(t.value) ? t.onChange(t.value.filter((l) => l !== n)) : t.onChange(n);
+    t.multiSelect && Array.isArray(t.value) ? t.onChange(t.value.filter((s) => s !== n)) : t.onChange(n);
   };
   return t.type === "date" ? /* @__PURE__ */ e("div", { className: "flex items-center space-x-1 max-w-[160px]", children: /* @__PURE__ */ e(
-    ye,
+    ve,
     {
       size: "sm",
       value: t.value,
@@ -1743,7 +1743,7 @@ const ft = ({
     /* @__PURE__ */ d("summary", { className: "flex items-center space-x-2 cursor-pointer rounded-full px-3 py-2 text-sm btn btn o__secondary", children: [
       /* @__PURE__ */ e("span", { children: t.label }),
       /* @__PURE__ */ e("span", { className: "text-default", children: t.multiSelect && Array.isArray(t.value) ? t.value?.map(
-        (n) => t.options?.find((l) => l.value === n)?.label
+        (n) => t.options?.find((s) => s.value === n)?.label
       ).join(", ") : t.options?.find((n) => n.value === t.value)?.label }),
       /* @__PURE__ */ e("span", { className: "text-muted text-sm group-open:rotate-180 transition-transform", children: /* @__PURE__ */ e(De, {}) })
     ] }),
@@ -1778,31 +1778,31 @@ const ft = ({
   columns: a,
   loading: r = !1,
   searchable: n = !1,
-  searchPlaceholder: l = "Search...",
+  searchPlaceholder: s = "Search...",
   filters: o = [],
   paginated: u = !1,
   pageSizeOptions: b = [10, 25, 50, 100],
   defaultPageSize: x = 10,
   actions: g = [],
   onRowClick: f,
-  selectable: s = !1,
+  selectable: l = !1,
   selectedRows: m = [],
   onSelectionChange: h,
-  getRowKey: w = (G, W) => W,
+  getRowKey: w = (G, F) => F,
   emptyContent: k,
-  hoverable: y = !0,
+  hoverable: v = !0,
   bordered: j = !1,
   striped: N = !1,
   className: q,
   rowClassName: B
 }) => {
-  const [G, W] = P(""), [I, H] = P({
+  const [G, F] = P(""), [I, H] = P({
     column: null,
     direction: null
-  }), [T, V] = P({
+  }), [z, W] = P({
     page: 0,
     pageSize: x
-  }), F = J(null), i = de(() => {
+  }), V = J(null), i = de(() => {
     let c = t;
     if (n && G.trim()) {
       const C = a.filter(
@@ -1821,7 +1821,7 @@ const ft = ({
         return String(_ || "") === C.value;
       }));
     }), c;
-  }, [t, G, a, n, o]), v = de(() => {
+  }, [t, G, a, n, o]), y = de(() => {
     if (!I.column || !I.direction) return i;
     const c = a.find((C) => C.id === I.column);
     return c ? [...i].sort((C, O) => {
@@ -1829,19 +1829,19 @@ const ft = ({
       let Y = 0;
       return R < _ ? Y = -1 : R > _ && (Y = 1), I.direction === "desc" ? -Y : Y;
     }) : i;
-  }, [i, I, a]), L = de(() => {
-    if (!u) return v;
-    const c = T.page * T.pageSize, C = c + T.pageSize;
-    return v.slice(c, C);
-  }, [v, T, u]), S = ae(
+  }, [i, I, a]), E = de(() => {
+    if (!u) return y;
+    const c = z.page * z.pageSize, C = c + z.pageSize;
+    return y.slice(c, C);
+  }, [y, z, u]), S = ae(
     (c) => {
       a.find((O) => O.id === c)?.sortable && H((O) => O.column !== c ? { column: c, direction: "asc" } : O.direction === "asc" ? { column: c, direction: "desc" } : { column: null, direction: null });
     },
     [a]
-  ), E = ae((c) => {
-    V((C) => ({ ...C, page: c }));
-  }, []), M = ae((c) => {
-    V({ page: 0, pageSize: c });
+  ), M = ae((c) => {
+    W((C) => ({ ...C, page: c }));
+  }, []), L = ae((c) => {
+    W({ page: 0, pageSize: c });
   }, []), Q = ae(
     (c, C) => {
       if (!h) return;
@@ -1853,21 +1853,21 @@ const ft = ({
     [m, h, w]
   ), re = ae(
     (c) => {
-      h && h(c ? [...L] : []);
+      h && h(c ? [...E] : []);
     },
-    [L, h]
+    [E, h]
   );
   U(() => {
-    V((c) => ({ ...c, page: 0 }));
+    W((c) => ({ ...c, page: 0 }));
   }, [G, I]), U(() => {
-    V((c) => ({ ...c, page: 0 }));
+    W((c) => ({ ...c, page: 0 }));
   }, [o.map((c) => c.value).join(",")]);
-  const X = v.length, $ = Math.ceil(X / T.pageSize), A = T.page * T.pageSize + 1, z = Math.min(A + T.pageSize - 1, X), D = L.length > 0 && L.every((c) => {
+  const X = y.length, $ = Math.ceil(X / z.pageSize), A = z.page * z.pageSize + 1, T = Math.min(A + z.pageSize - 1, X), D = E.length > 0 && E.every((c) => {
     const C = w(c, 0);
     return m.some(
       (O, R) => w(O, R) === C
     );
-  }), ee = L.some((c) => {
+  }), ee = E.some((c) => {
     const C = w(c, 0);
     return m.some(
       (O, R) => w(O, R) === C
@@ -1877,8 +1877,8 @@ const ft = ({
     q
   ), K = p("bg-[var(--base-module)]"), le = p(
     "text-[var(--text-default)] p-3 border-b border-[var(--neutral-border)]"
-  ), fe = p("h-12", {
-    "hover:bg-[var(--neutral-container)] dark:hover:bg-[var(--neutral-container-emphasis)]": y,
+  ), he = p("h-12", {
+    "hover:bg-[var(--neutral-container)] dark:hover:bg-[var(--neutral-container-emphasis)]": v,
     "cursor-pointer": f
   });
   return /* @__PURE__ */ d("div", { className: "space-y-4", children: [
@@ -1887,9 +1887,9 @@ const ft = ({
       /* @__PURE__ */ e("div", { className: "w-full sm:w-auto sm:ml-auto min-w-[200px]", children: /* @__PURE__ */ e(
         ue,
         {
-          placeholder: l,
+          placeholder: s,
           value: G,
-          onChange: (c) => W(c.target.value),
+          onChange: (c) => F(c.target.value),
           startIcon: /* @__PURE__ */ e(ht, {}),
           className: "max-w-sm"
         }
@@ -1904,9 +1904,9 @@ const ft = ({
           tableColumns: a.length
         }
       ) }),
-      /* @__PURE__ */ d("table", { ref: F, className: p(ne, "min-w-full"), children: [
+      /* @__PURE__ */ d("table", { ref: V, className: p(ne, "min-w-full"), children: [
         /* @__PURE__ */ e("thead", { className: K, children: /* @__PURE__ */ d("tr", { children: [
-          s && /* @__PURE__ */ e("th", { className: p(le, "w-12"), children: /* @__PURE__ */ e(
+          l && /* @__PURE__ */ e("th", { className: p(le, "w-12"), children: /* @__PURE__ */ e(
             "input",
             {
               type: "checkbox",
@@ -1967,17 +1967,17 @@ const ft = ({
           )),
           g.length > 0 && /* @__PURE__ */ e("th", { className: p(le, "w-20"), children: /* @__PURE__ */ e("span", { className: "sr-only", children: "Actions" }) })
         ] }) }),
-        /* @__PURE__ */ e("tbody", { children: L.length === 0 || r ? !r && /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e(
+        /* @__PURE__ */ e("tbody", { children: E.length === 0 || r ? !r && /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e(
           "td",
           {
-            colSpan: a.length + (s ? 1 : 0) + (g.length > 0 ? 1 : 0),
+            colSpan: a.length + (l ? 1 : 0) + (g.length > 0 ? 1 : 0),
             className: p(
               le,
               "text-center py-8 text-muted"
             ),
             children: k || "No data available"
           }
-        ) }) : L.map((c, C) => {
+        ) }) : E.map((c, C) => {
           const O = w(c, C), R = m.some(
             (_, Y) => w(_, Y) === O
           );
@@ -1985,7 +1985,7 @@ const ft = ({
             "tr",
             {
               className: p(
-                fe,
+                he,
                 { "bg-accent-container": R },
                 B?.(c, C)
               ),
@@ -1993,7 +1993,7 @@ const ft = ({
                 _.stopPropagation(), f?.(c, C);
               },
               children: [
-                s && /* @__PURE__ */ e("td", { className: le, children: /* @__PURE__ */ e(
+                l && /* @__PURE__ */ e("td", { className: le, children: /* @__PURE__ */ e(
                   "input",
                   {
                     type: "checkbox",
@@ -2036,7 +2036,7 @@ const ft = ({
                     })),
                     onSelect: (_) => {
                       const Y = g.find(
-                        (he) => he.id === _
+                        (pe) => pe.id === _
                       );
                       Y && Y.onClick(c, C);
                     },
@@ -2056,7 +2056,7 @@ const ft = ({
           "Showing ",
           A,
           " to ",
-          z,
+          T,
           " of ",
           X,
           " results"
@@ -2066,8 +2066,8 @@ const ft = ({
           /* @__PURE__ */ e(
             "select",
             {
-              value: T.pageSize,
-              onChange: (c) => M(Number(c.target.value)),
+              value: z.pageSize,
+              onChange: (c) => L(Number(c.target.value)),
               className: "border border-[var(--neutral-border)] text-[var(--text-default)] rounded-md px-2 py-1 text-sm bg-[var(--base-input)] w-16",
               children: b.map((c) => /* @__PURE__ */ e("option", { value: c, children: c }, c))
             }
@@ -2080,8 +2080,8 @@ const ft = ({
           {
             size: "sm",
             variant: "ghost",
-            onClick: () => E(0),
-            disabled: T.page === 0,
+            onClick: () => M(0),
+            disabled: z.page === 0,
             iconOnly: !0,
             children: /* @__PURE__ */ e(yt, {})
           }
@@ -2091,15 +2091,15 @@ const ft = ({
           {
             size: "sm",
             variant: "ghost",
-            onClick: () => E(T.page - 1),
-            disabled: T.page === 0,
+            onClick: () => M(z.page - 1),
+            disabled: z.page === 0,
             iconOnly: !0,
             children: /* @__PURE__ */ e(bt, {})
           }
         ),
         /* @__PURE__ */ d("span", { className: "px-3 py-1 text-sm text-muted", children: [
           "Page ",
-          T.page + 1,
+          z.page + 1,
           " of ",
           $
         ] }),
@@ -2108,8 +2108,8 @@ const ft = ({
           {
             size: "sm",
             variant: "ghost",
-            onClick: () => E(T.page + 1),
-            disabled: T.page >= $ - 1,
+            onClick: () => M(z.page + 1),
+            disabled: z.page >= $ - 1,
             iconOnly: !0,
             children: /* @__PURE__ */ e(gt, {})
           }
@@ -2119,8 +2119,8 @@ const ft = ({
           {
             size: "sm",
             variant: "ghost",
-            onClick: () => E($ - 1),
-            disabled: T.page >= $ - 1,
+            onClick: () => M($ - 1),
+            disabled: z.page >= $ - 1,
             iconOnly: !0,
             children: /* @__PURE__ */ e(vt, {})
           }
@@ -2128,13 +2128,13 @@ const ft = ({
       ] })
     ] })
   ] });
-}, wt = Ge(null), sr = ({
+}, wt = Ge(null), or = ({
   items: t,
   activeTab: a,
   onTabChange: r,
   className: n
 }) => {
-  const [l, o] = P(t[0]?.id || ""), u = a || l, b = (x) => {
+  const [s, o] = P(t[0]?.id || ""), u = a || s, b = (x) => {
     r ? r(x) : o(x);
   };
   return /* @__PURE__ */ e("div", { className: p("border-b border-neutral-200 dark:border-neutral-700", n), children: /* @__PURE__ */ e("nav", { className: "-mb-px flex space-x-8", children: t.map((x) => /* @__PURE__ */ e(
@@ -2165,7 +2165,7 @@ const ft = ({
   defaultTab: a,
   activeTab: r,
   onTabChange: n,
-  variant: l = "default",
+  variant: s = "default",
   size: o = "md",
   className: u
 }) => {
@@ -2173,44 +2173,44 @@ const ft = ({
     a || r || t[0]?.id || ""
   ), g = r || b, f = (k) => {
     n ? n(k) : x(k);
-  }, s = {
+  }, l = {
     activeTab: g,
     setActiveTab: f
   }, m = t.find((k) => k.id === g), h = p(
     "flex",
     {
-      "border-b border-neutral-200 dark:border-neutral-700 px-2": l === "default" || l === "underline",
-      "bg-neutral-100 dark:bg-neutral-800 p-1 rounded-lg": l === "pills",
-      "space-x-1": l === "pills",
-      "space-x-8": l === "default" || l === "underline"
+      "border-b border-neutral-200 dark:border-neutral-700 px-2": s === "default" || s === "underline",
+      "bg-neutral-100 dark:bg-neutral-800 p-1 rounded-lg": s === "pills",
+      "space-x-1": s === "pills",
+      "space-x-8": s === "default" || s === "underline"
     },
     u
-  ), w = (k, y) => {
+  ), w = (k, v) => {
     const j = "transition-colors duration-200 font-medium", N = {
       "text-xs px-2 py-1": o === "sm",
       "text-sm px-3 py-2": o === "md",
       "text-base px-4 py-3": o === "lg"
     }, q = {
       // Default variant
-      "border-b-2 -mb-px": l === "default",
+      "border-b-2 -mb-px": s === "default",
       // Pills variant
-      "rounded-md": l === "pills",
+      "rounded-md": s === "pills",
       // Underline variant
-      "border-b-2 pb-2": l === "underline"
+      "border-b-2 pb-2": s === "underline"
     }, B = {
       "opacity-50 cursor-not-allowed": k.disabled,
       "cursor-pointer": !k.disabled
-    }, G = y ? {
-      "border-primary text-primary": l === "default" || l === "underline",
-      "bg-white dark:bg-neutral-700 text-neutral-900 dark:text-neutral-100 shadow-sm": l === "pills"
-    } : {}, W = !y && !k.disabled ? {
-      "border-transparent text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100": l === "default",
-      "text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100": l === "pills",
-      "border-transparent text-neutral-600 hover:text-neutral-900 hover:border-neutral-300 dark:text-neutral-400 dark:hover:text-neutral-100": l === "underline"
+    }, G = v ? {
+      "border-primary text-primary": s === "default" || s === "underline",
+      "bg-white dark:bg-neutral-700 text-neutral-900 dark:text-neutral-100 shadow-sm": s === "pills"
+    } : {}, F = !v && !k.disabled ? {
+      "border-transparent text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100": s === "default",
+      "text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100": s === "pills",
+      "border-transparent text-neutral-600 hover:text-neutral-900 hover:border-neutral-300 dark:text-neutral-400 dark:hover:text-neutral-100": s === "underline"
     } : {};
-    return p(j, N, q, B, G, W);
+    return p(j, N, q, B, G, F);
   };
-  return /* @__PURE__ */ e(wt.Provider, { value: s, children: /* @__PURE__ */ d("div", { children: [
+  return /* @__PURE__ */ e(wt.Provider, { value: l, children: /* @__PURE__ */ d("div", { children: [
     /* @__PURE__ */ e("div", { className: h, role: "tablist", children: t.map((k) => /* @__PURE__ */ e(
       "button",
       {
@@ -2251,7 +2251,7 @@ function St({
   onClose: a,
   title: r,
   size: n = "md",
-  closeOnBackdropClick: l = !0,
+  closeOnBackdropClick: s = !0,
   closeOnEscape: o = !0,
   className: u,
   backdropClassName: b,
@@ -2259,18 +2259,18 @@ function St({
   footer: g,
   showCloseButton: f = !0
 }) {
-  const s = J(null), m = J(null);
+  const l = J(null), m = J(null);
   U(() => {
     if (!t || !o) return;
     const w = (k) => {
       k.key === "Escape" && a();
     };
     return document.addEventListener("keydown", w), () => document.removeEventListener("keydown", w);
-  }, [t, o, a]), U(() => (t ? (m.current = document.activeElement, s.current && s.current.focus(), document.body.style.overflow = "hidden") : (m.current && m.current.focus(), document.body.style.overflow = ""), () => {
+  }, [t, o, a]), U(() => (t ? (m.current = document.activeElement, l.current && l.current.focus(), document.body.style.overflow = "hidden") : (m.current && m.current.focus(), document.body.style.overflow = ""), () => {
     document.body.style.overflow = "";
   }), [t]);
   const h = (w) => {
-    l && w.target === w.currentTarget && a();
+    s && w.target === w.currentTarget && a();
   };
   return t ? /* @__PURE__ */ e(
     "div",
@@ -2285,7 +2285,7 @@ function St({
       children: /* @__PURE__ */ d(
         "div",
         {
-          ref: s,
+          ref: l,
           className: p(
             "relative w-full bg-module rounded-modal shadow-modal rounded-md",
             // 'animate-scale-in',
@@ -2330,14 +2330,14 @@ const Z = ({
   size: a = "md",
   weight: r = "normal",
   color: n = "current",
-  align: l = "left",
+  align: s = "left",
   truncate: o = !1,
   italic: u = !1,
   underline: b = !1,
   lineHeight: x = "normal",
   as: g,
   className: f,
-  children: s,
+  children: l,
   ...m
 }) => {
   const h = g || Lt(t), w = p(
@@ -2384,10 +2384,10 @@ const Z = ({
     },
     // Alignment
     {
-      "text-left": l === "left",
-      "text-center": l === "center",
-      "text-right": l === "right",
-      "text-justify": l === "justify"
+      "text-left": s === "left",
+      "text-center": s === "center",
+      "text-right": s === "right",
+      "text-justify": s === "justify"
     },
     // Line height (override variant line heights)
     t === "body" && {
@@ -2403,7 +2403,7 @@ const Z = ({
     },
     f
   );
-  return /* @__PURE__ */ e(h, { className: w, ...m, children: s });
+  return /* @__PURE__ */ e(h, { className: w, ...m, children: l });
 };
 function Lt(t) {
   return {
@@ -2418,24 +2418,24 @@ const Et = ({
   onChange: a,
   label: r,
   placeholder: n = "Select or upload a file",
-  error: l,
+  error: s,
   disabled: o,
   accept: u,
   onListFiles: b,
   onListMounts: x,
   onUploadFile: g,
   onDownloadFile: f,
-  onRegisterFile: s
+  onRegisterFile: l
 }) => {
-  const [m, h] = P(!1), [w, k] = P([]), [y, j] = P(null), [N, q] = P("/"), [B, G] = P([]), [W, I] = P(!1), [H, T] = P(""), [V, F] = P(
+  const [m, h] = P(!1), [w, k] = P([]), [v, j] = P(null), [N, q] = P("/"), [B, G] = P([]), [F, I] = P(!1), [H, z] = P(""), [W, V] = P(
     typeof t == "object" ? t : null
-  ), [i, v] = P(!1), [L, S] = P(""), E = J(null);
+  ), [i, y] = P(!1), [E, S] = P(""), M = J(null);
   U(() => {
-    m && M();
+    m && L();
   }, [m]), U(() => {
-    m && y && Q();
-  }, [m, y, N, H]);
-  const M = async () => {
+    m && v && Q();
+  }, [m, v, N, H]);
+  const L = async () => {
     I(!0);
     try {
       const c = await x?.();
@@ -2446,10 +2446,10 @@ const Et = ({
       I(!1);
     }
   }, Q = async () => {
-    if (y) {
+    if (v) {
       I(!0);
       try {
-        const c = await b?.({ mountId: y.id, name: H, path: N });
+        const c = await b?.({ mountId: v.id, name: H, path: N });
         c?.data && G(c.data);
       } catch (c) {
         console.error("Failed to load files", c);
@@ -2473,7 +2473,7 @@ const Et = ({
           providerKey: C.name,
           ownerId: "me"
         };
-        F(_), a(_, R), h(!1);
+        V(_), a(_, R), h(!1);
       } catch (O) {
         console.error("Local file selection failed", O);
       } finally {
@@ -2482,19 +2482,19 @@ const Et = ({
     }
   }, X = async (c) => {
     const C = c.target.files?.[0];
-    if (!(!C || !y)) {
+    if (!(!C || !v)) {
       I(!0);
       try {
         const O = await C.arrayBuffer(), R = await g?.({
           file: new Uint8Array(O),
           filename: C.name,
           mimeType: C.type || "application/octet-stream",
-          mountId: y.id,
+          mountId: v.id,
           path: N
         });
         if (R?.data) {
           const _ = R.data;
-          F(_), a(_, new Uint8Array(O)), h(!1);
+          V(_), a(_, new Uint8Array(O)), h(!1);
         }
       } catch (O) {
         console.error("Upload failed", O);
@@ -2503,20 +2503,20 @@ const Et = ({
       }
     }
   }, $ = async () => {
-    if (!(!L || !y)) {
+    if (!(!E || !v)) {
       I(!0);
       try {
-        const c = `${N}${L}/`;
-        s && (await s({
-          name: L,
+        const c = `${N}${E}/`;
+        l && (await l({
+          name: E,
           type: "folder",
           path: N,
           mimeType: "application/x-directory",
           size: 0,
-          mountId: y.id,
+          mountId: v.id,
           providerKey: c,
           ownerId: "me"
-        }), await Q()), v(!1), S("");
+        }), await Q()), y(!1), S("");
       } catch (c) {
         console.error("Failed to create folder", c);
       } finally {
@@ -2527,14 +2527,14 @@ const Et = ({
     I(!0);
     try {
       const C = await f?.(c.id);
-      F(c), a(c, C), h(!1);
+      V(c), a(c, C), h(!1);
     } catch (C) {
       console.error("Failed to download file", C);
     } finally {
       I(!1);
     }
-  }, z = (c) => {
-    c.stopPropagation(), F(null), a(null);
+  }, T = (c) => {
+    c.stopPropagation(), V(null), a(null);
   }, D = de(() => {
     const c = /* @__PURE__ */ new Set(), C = [];
     return B.forEach((O) => {
@@ -2542,7 +2542,7 @@ const Et = ({
         O.path === N && c.add(O.name);
         return;
       }
-      const R = O.providerKey || O.name, Y = (N ? R.substring(N.length) : R).split("/").filter((he) => he !== "");
+      const R = O.providerKey || O.name, Y = (N ? R.substring(N.length) : R).split("/").filter((pe) => pe !== "");
       Y.length > 1 ? c.add(Y[0]) : Y.length === 1 && C.push(O);
     }), {
       folders: Array.from(c).sort(),
@@ -2574,7 +2574,7 @@ const Et = ({
         /* @__PURE__ */ e(
           oe,
           {
-            icon: C.type === "folder" ? Ce : pe,
+            icon: C.type === "folder" ? Ce : xe,
             size: "sm",
             color: C.type === "folder" ? "warning" : "secondary"
           }
@@ -2605,12 +2605,12 @@ const Et = ({
           onClick: (O) => {
             O.stopPropagation(), C.type === "folder" ? ee(C.name) : A(C);
           },
-          loading: W && C.type === "file" && V?.id === C.id,
+          loading: F && C.type === "file" && W?.id === C.id,
           children: C.type === "folder" ? "Open" : "Select"
         }
       )
     }
-  ], fe = [
+  ], he = [
     {
       id: "name",
       header: "Mount Name",
@@ -2637,32 +2637,32 @@ const Et = ({
         className: p(
           "flex items-center gap-3 px-3 py-2 border rounded-lg cursor-pointer transition-colors",
           "hover:border-primary-400 bg-module",
-          l ? "border-error" : "border-neutral",
+          s ? "border-error" : "border-neutral",
           o && "opacity-50 cursor-not-allowed bg-module-subtle"
         ),
         children: [
-          /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: /* @__PURE__ */ e(oe, { icon: V ? pe : ke, color: V ? "primary" : "secondary" }) }),
-          /* @__PURE__ */ e("div", { className: "flex-grow truncate", children: V ? /* @__PURE__ */ e("span", { className: "text-sm text-default font-medium", children: V.name }) : /* @__PURE__ */ e("span", { className: "text-sm text-muted", children: n }) }),
-          V && !o && /* @__PURE__ */ e(
+          /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: /* @__PURE__ */ e(oe, { icon: W ? xe : ke, color: W ? "primary" : "secondary" }) }),
+          /* @__PURE__ */ e("div", { className: "flex-grow truncate", children: W ? /* @__PURE__ */ e("span", { className: "text-sm text-default font-medium", children: W.name }) : /* @__PURE__ */ e("span", { className: "text-sm text-muted", children: n }) }),
+          W && !o && /* @__PURE__ */ e(
             "button",
             {
-              onClick: z,
+              onClick: T,
               className: "p-1 hover:bg-neutral-container rounded",
-              children: /* @__PURE__ */ e(oe, { icon: We, size: "xs" })
+              children: /* @__PURE__ */ e(oe, { icon: Fe, size: "xs" })
             }
           )
         ]
       }
     ),
-    l && /* @__PURE__ */ e(Z, { variant: "body", size: "xs", className: "text-error", children: l }),
+    s && /* @__PURE__ */ e(Z, { variant: "body", size: "xs", className: "text-error", children: s }),
     /* @__PURE__ */ e(
       St,
       {
         open: m,
         onClose: () => {
-          h(!1), j(null), q("/"), v(!1);
+          h(!1), j(null), q("/"), y(!1);
         },
-        title: y ? `Explorer: ${y.name}` : "Select Storage Mount",
+        title: v ? `Explorer: ${v.name}` : "Select Storage Mount",
         size: "lg",
         children: /* @__PURE__ */ e(
           kt,
@@ -2672,7 +2672,7 @@ const Et = ({
               {
                 id: "remote",
                 label: "Platform Storage",
-                content: /* @__PURE__ */ e("div", { className: "space-y-4", children: y ? /* @__PURE__ */ d($e, { children: [
+                content: /* @__PURE__ */ e("div", { className: "space-y-4", children: v ? /* @__PURE__ */ d($e, { children: [
                   /* @__PURE__ */ d("div", { className: "flex flex-wrap items-center gap-2", children: [
                     /* @__PURE__ */ e(
                       te,
@@ -2692,8 +2692,8 @@ const Et = ({
                       {
                         placeholder: "Search...",
                         value: H,
-                        onChange: (c) => T(c.target.value),
-                        startIcon: /* @__PURE__ */ e(ze, { size: 14 }),
+                        onChange: (c) => z(c.target.value),
+                        startIcon: /* @__PURE__ */ e(Te, { size: 14 }),
                         fullWidth: !0,
                         size: "sm"
                       }
@@ -2704,8 +2704,8 @@ const Et = ({
                         {
                           variant: "outline",
                           size: "sm",
-                          onClick: () => v(!0),
-                          leftIcon: /* @__PURE__ */ e(oe, { icon: Fe, size: "xs" }),
+                          onClick: () => y(!0),
+                          leftIcon: /* @__PURE__ */ e(oe, { icon: Ve, size: "xs" }),
                           children: "New Folder"
                         }
                       ),
@@ -2714,9 +2714,9 @@ const Et = ({
                         {
                           variant: "primary",
                           size: "sm",
-                          onClick: () => E.current?.click(),
+                          onClick: () => M.current?.click(),
                           leftIcon: /* @__PURE__ */ e(oe, { icon: Re, size: "xs" }),
-                          loading: W,
+                          loading: F,
                           children: "Upload"
                         }
                       ),
@@ -2725,7 +2725,7 @@ const Et = ({
                         {
                           type: "file",
                           className: "hidden",
-                          ref: E,
+                          ref: M,
                           onChange: X,
                           accept: u
                         }
@@ -2739,20 +2739,20 @@ const Et = ({
                       {
                         size: "sm",
                         placeholder: "Folder name",
-                        value: L,
+                        value: E,
                         onChange: (c) => S(c.target.value),
                         autoFocus: !0
                       }
                     ),
-                    /* @__PURE__ */ e(te, { size: "sm", onClick: $, loading: W, children: "Create" }),
-                    /* @__PURE__ */ e(te, { size: "sm", variant: "ghost", onClick: () => v(!1), children: "Cancel" })
+                    /* @__PURE__ */ e(te, { size: "sm", onClick: $, loading: F, children: "Create" }),
+                    /* @__PURE__ */ e(te, { size: "sm", variant: "ghost", onClick: () => y(!1), children: "Cancel" })
                   ] }),
                   /* @__PURE__ */ e("div", { className: "max-h-[400px] overflow-auto rounded-lg border border-neutral", children: /* @__PURE__ */ e(
                     Le,
                     {
                       data: K,
                       columns: le,
-                      loading: W,
+                      loading: F,
                       emptyContent: "This folder is empty",
                       onRowClick: (c) => c.type === "folder" ? ee(c.name) : A(c)
                     }
@@ -2761,8 +2761,8 @@ const Et = ({
                   Le,
                   {
                     data: w,
-                    columns: fe,
-                    loading: W,
+                    columns: he,
+                    loading: F,
                     emptyContent: "No storage mounts configured",
                     onRowClick: (c) => j(c)
                   }
@@ -2772,7 +2772,7 @@ const Et = ({
                 id: "local",
                 label: "Local File",
                 content: /* @__PURE__ */ e("div", { className: "space-y-6", children: /* @__PURE__ */ d("div", { className: "flex flex-col items-center justify-center py-12 border-2 border-dashed border-neutral rounded-xl bg-module-subtle/50", children: [
-                  /* @__PURE__ */ e("div", { className: "p-4 bg-primary/10 rounded-full mb-4", children: /* @__PURE__ */ e(oe, { icon: pe, size: "xl", color: "primary" }) }),
+                  /* @__PURE__ */ e("div", { className: "p-4 bg-primary/10 rounded-full mb-4", children: /* @__PURE__ */ e(oe, { icon: xe, size: "xl", color: "primary" }) }),
                   /* @__PURE__ */ e(Z, { variant: "label", size: "lg", weight: "semibold", children: "Select a file from your computer" }),
                   /* @__PURE__ */ d(Z, { variant: "body", size: "sm", className: "text-muted mt-1 mb-6 text-center max-w-xs", children: [
                     "This file will be used directly in the form and will ",
@@ -2782,9 +2782,9 @@ const Et = ({
                   /* @__PURE__ */ d("label", { className: "cursor-pointer", children: [
                     /* @__PURE__ */ d("div", { className: p(
                       "inline-flex items-center justify-center font-medium rounded-lg transition-colors duration-200 px-6 py-3 text-base bg-primary text-white hover:bg-primary-600",
-                      W && "opacity-50 cursor-wait"
+                      F && "opacity-50 cursor-wait"
                     ), children: [
-                      W && /* @__PURE__ */ d("svg", { className: "animate-spin h-4 w-4 mr-2", fill: "none", viewBox: "0 0 24 24", children: [
+                      F && /* @__PURE__ */ d("svg", { className: "animate-spin h-4 w-4 mr-2", fill: "none", viewBox: "0 0 24 24", children: [
                         /* @__PURE__ */ e("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
                         /* @__PURE__ */ e("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
                       ] }),
@@ -2797,7 +2797,7 @@ const Et = ({
                         className: "hidden",
                         onChange: re,
                         accept: u,
-                        disabled: W
+                        disabled: F
                       }
                     )
                   ] })
@@ -2810,129 +2810,175 @@ const Et = ({
     )
   ] });
 };
+function Mt({
+  value: t,
+  onChange: a,
+  onListFolders: r,
+  disabled: n,
+  size: s = "md",
+  placeholder: o,
+  templatePlaceholder: u,
+  showTemplate: b = !0
+}) {
+  const [x, g] = P([]);
+  U(() => {
+    let l = !0;
+    return Promise.resolve(r?.()).then((m) => {
+      l && m && g(m.data ?? []);
+    }).catch(() => {
+    }), () => {
+      l = !1;
+    };
+  }, []);
+  const f = t ?? {};
+  return /* @__PURE__ */ d("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ e(
+      fe,
+      {
+        size: s,
+        fullWidth: !0,
+        disabled: n,
+        value: f.folderId ?? "",
+        options: x.map((l) => ({ value: l.id, label: l.name })),
+        placeholder: o ?? "Select a folder",
+        onChange: (l) => a?.({ ...f, folderId: l })
+      }
+    ),
+    b && /* @__PURE__ */ e(
+      ue,
+      {
+        size: s,
+        disabled: n,
+        value: f.pathTemplate ?? "",
+        placeholder: u ?? "Sub-path e.g. {yyyy}/{mm}/{dd} (optional)",
+        onChange: (l) => a?.({ ...f, pathTemplate: l.target.value })
+      }
+    )
+  ] });
+}
 function Ee(t, a) {
   return a.split(".").reduce(
     (r, n) => r && typeof r == "object" && n in r ? r[n] : void 0,
     t
   );
 }
-function Mt(t, a, r) {
-  const n = a.split("."), l = Array.isArray(t) ? [...t] : { ...t };
-  let o = l;
+function $t(t, a, r) {
+  const n = a.split("."), s = Array.isArray(t) ? [...t] : { ...t };
+  let o = s;
   for (let u = 0; u < n.length - 1; u++) {
     const b = n[u], x = o[b];
     o[b] = x && typeof x == "object" ? Array.isArray(x) ? [...x] : { ...x } : {}, o = o[b];
   }
-  return o[n[n.length - 1]] = r, l;
+  return o[n[n.length - 1]] = r, s;
 }
-function $t(t, a) {
+function Tt(t, a) {
   const r = a.split("."), n = Array.isArray(t) ? [...t] : { ...t };
-  let l = n;
+  let s = n;
   for (let o = 0; o < r.length - 1; o++) {
     const u = r[o];
-    if (!l[u] || typeof l[u] != "object") return n;
-    l[u] = Array.isArray(l[u]) ? [...l[u]] : { ...l[u] }, l = l[u];
+    if (!s[u] || typeof s[u] != "object") return n;
+    s[u] = Array.isArray(s[u]) ? [...s[u]] : { ...s[u] }, s = s[u];
   }
-  return delete l[r[r.length - 1]], n;
+  return delete s[r[r.length - 1]], n;
 }
-const or = ({
+const cr = ({
   groups: t,
   data: a,
   onSubmit: r,
   onCancel: n,
-  onChange: l,
+  onChange: s,
   transform: o,
   validate: u,
   submitButton: b = { label: "Submit", variant: "primary" },
   cancelButton: x = { label: "Cancel", variant: "outline" },
   showButtons: g = !0,
   layout: f = "vertical",
-  size: s = "md",
+  size: l = "md",
   loading: m = !1,
   className: h,
   ref: w,
   sdk: k
 }) => {
-  const [y, j] = P(a || {}), [N, q] = P({}), [B, G] = P({});
+  const [v, j] = P(a || {}), [N, q] = P({}), [B, G] = P({});
   U(() => {
     a && j({ ...a });
   }, [a]);
-  const W = ae(
-    (i, v, L) => {
-      const S = t.flatMap((E) => E.items).find((E) => E.name === i);
+  const F = ae(
+    (i, y, E) => {
+      const S = t.flatMap((M) => M.items).find((M) => M.name === i);
       if (!S) return null;
-      if (S.required && (v == null || v === ""))
+      if (S.required && (y == null || y === ""))
         return `${S.label} is required`;
       if (S.type === "array") {
-        if (S.required && (!v || v.length === 0))
+        if (S.required && (!y || y.length === 0))
           return `${S.label} cannot be empty.`;
-        if (v && !Array.isArray(v))
+        if (y && !Array.isArray(y))
           return `${S.label} must be an array.`;
-        if (Array.isArray(v) && S.arrayFields) {
-          const E = [];
-          let M = !1;
-          if (v.forEach((Q, re) => {
+        if (Array.isArray(y) && S.arrayFields) {
+          const M = [];
+          let L = !1;
+          if (y.forEach((Q, re) => {
             const X = {};
             for (const $ of S.arrayFields) {
               const A = Q?.[$.name];
               if ($.required && (A == null || A === ""))
-                X[$.name] = `${$.label} is required`, M = !0;
+                X[$.name] = `${$.label} is required`, L = !0;
               else if ($.validator) {
-                const z = $.validator(A, Q);
-                z && (X[$.name] = z, M = !0);
+                const T = $.validator(A, Q);
+                T && (X[$.name] = T, L = !0);
               }
             }
-            E[re] = X;
-          }), M)
-            return JSON.stringify(E);
+            M[re] = X;
+          }), L)
+            return JSON.stringify(M);
         }
       }
-      return S.validator ? S.validator(v, L) : null;
+      return S.validator ? S.validator(y, E) : null;
     },
     [t]
   ), I = ae(
-    (i, v) => {
-      let L = Mt(
-        y,
+    (i, y) => {
+      let E = $t(
+        v,
         i,
-        v
+        y
       );
-      t.flatMap((M) => M.items).find((M) => M.name === i)?.removeIfEmpty && (v == null || v === "") && (L = $t(L, i)), j(L), G((M) => ({ ...M, [i]: !0 }));
-      const E = W(i, v, L);
-      q((M) => ({
-        ...M,
-        [i]: E || ""
-      })), l?.(L, i);
+      t.flatMap((L) => L.items).find((L) => L.name === i)?.removeIfEmpty && (y == null || y === "") && (E = Tt(E, i)), j(E), G((L) => ({ ...L, [i]: !0 }));
+      const M = F(i, y, E);
+      q((L) => ({
+        ...L,
+        [i]: M || ""
+      })), s?.(E, i);
     },
-    [y, t, W, l]
+    [v, t, F, s]
   ), H = ae(
     async (i) => {
       if (console.log("handleSubmit"), i.preventDefault(), m) return;
-      const v = {}, L = t.flatMap((E) => E.items);
-      for (const E of L) {
-        if (E.hidden || E.conditional && !E.conditional(y))
+      const y = {}, E = t.flatMap((M) => M.items);
+      for (const M of E) {
+        if (M.hidden || M.conditional && !M.conditional(v))
           continue;
-        const M = W(
-          E.name,
-          Ee(y, E.name),
-          y
+        const L = F(
+          M.name,
+          Ee(v, M.name),
+          v
         );
-        M && (v[E.name] = M);
+        L && (y[M.name] = L);
       }
       if (u) {
-        const E = u(y);
-        E && Object.assign(v, E);
+        const M = u(v);
+        M && Object.assign(y, M);
       }
-      if (q(v), console.log("newErrors", v), Object.keys(v).some((E) => v[E]))
+      if (q(y), console.log("newErrors", y), Object.keys(y).some((M) => y[M]))
         return;
-      const S = o ? o(y) : y;
-      await r?.(y, S);
+      const S = o ? o(v) : v;
+      await r?.(v, S);
     },
-    [y, t, W, u, o, r, m]
-  ), T = ae(
+    [v, t, F, u, o, r, m]
+  ), z = ae(
     (i) => {
-      const v = Ee(y, i.name), L = B[i.name] ? N[i.name] : void 0, S = i.disabled || m, E = {
-        value: v || "",
+      const y = Ee(v, i.name), E = B[i.name] ? N[i.name] : void 0, S = i.disabled || m, M = {
+        value: y || "",
         disabled: S,
         required: i.required,
         placeholder: i.placeholder,
@@ -2948,142 +2994,157 @@ const or = ({
           return /* @__PURE__ */ e(
             ue,
             {
-              ...E,
-              onChange: (M) => I(i.name, M.target.value),
+              ...M,
+              onChange: (L) => I(i.name, L.target.value),
               type: i.textType || i.type,
               autoComplete: i.autocomplete,
-              error: L,
-              size: s
+              error: E,
+              size: l
             }
           );
         case "textarea":
           return /* @__PURE__ */ e(
             Ne,
             {
-              ...E,
-              onChange: (M) => I(i.name, M.target.value),
+              ...M,
+              onChange: (L) => I(i.name, L.target.value),
               rows: 4,
-              error: L,
-              size: s
+              error: E,
+              size: l
             }
           );
         case "select":
           return /* @__PURE__ */ e(
-            ve,
+            fe,
             {
-              ...E,
-              onChange: (M) => I(i.name, M),
-              options: (i.options || []).map((M) => ({
-                ...M,
-                value: String(M.value)
+              ...M,
+              onChange: (L) => I(i.name, L),
+              options: (i.options || []).map((L) => ({
+                ...L,
+                value: String(L.value)
               })),
               searchable: i.searchable,
               multiple: i.multiple,
               allowCreate: i.allowCreate,
-              error: L,
-              size: s
+              error: E,
+              size: l
             }
           );
         case "checkbox":
           return /* @__PURE__ */ e(
-            ge,
+            ye,
             {
-              ...E,
-              checked: !!v,
-              onChange: (M) => I(i.name, M.target.checked),
-              size: s
+              ...M,
+              checked: !!y,
+              onChange: (L) => I(i.name, L.target.checked),
+              size: l
             }
           );
         case "radio":
-          return /* @__PURE__ */ e("div", { className: "space-y-1", children: i.options?.map((M) => /* @__PURE__ */ d("label", { className: "flex items-center gap-2", children: [
+          return /* @__PURE__ */ e("div", { className: "space-y-1", children: i.options?.map((L) => /* @__PURE__ */ d("label", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ e(
               "input",
               {
                 type: "radio",
                 name: i.name,
-                value: M.value,
-                checked: v === M.value,
-                onChange: () => I(i.name, M.value),
-                disabled: S || M.disabled,
+                value: L.value,
+                checked: y === L.value,
+                onChange: () => I(i.name, L.value),
+                disabled: S || L.disabled,
                 className: "rounded-full border-neutral-100 dark:border-neutral-600"
               }
             ),
-            /* @__PURE__ */ e(Z, { variant: "label", size: "sm", children: M.label })
-          ] }, M.value)) });
+            /* @__PURE__ */ e(Z, { variant: "label", size: "sm", children: L.label })
+          ] }, L.value)) });
         case "date":
           return /* @__PURE__ */ e(
-            ye,
+            ve,
             {
-              ...E,
-              value: v ? new Date(v) : null,
-              onChange: (M) => I(i.name, M),
-              size: s
+              ...M,
+              value: y ? new Date(y) : null,
+              onChange: (L) => I(i.name, L),
+              size: l
             }
           );
         case "file":
           return /* @__PURE__ */ e(
             Et,
             {
-              ...E,
-              value: v,
-              onChange: (M) => I(i.name, M),
-              error: L,
-              onListFiles: (M) => k?.http.invoke({
+              ...M,
+              value: y,
+              onChange: (L) => I(i.name, L),
+              error: E,
+              onListFiles: (L) => k?.http.invoke({
                 method: "POST",
                 action: "storage.file.list",
-                body: M
+                body: L
               }),
               onListMounts: () => k?.http.invoke({
                 method: "GET",
                 action: "storage.mount"
               }),
-              onUploadFile: (M) => k?.http.invoke({
+              onUploadFile: (L) => k?.http.invoke({
                 method: "POST",
                 action: "storage.file.upload",
-                body: M
+                body: L
               }),
-              onDownloadFile: (M) => k?.http.invoke({
+              onDownloadFile: (L) => k?.http.invoke({
                 method: "GET",
-                action: `storage.file.${M}.download`
+                action: `storage.file.${L}.download`
               }),
-              onRegisterFile: (M) => k?.http.invoke({
+              onRegisterFile: (L) => k?.http.invoke({
                 method: "POST",
                 action: "storage.file.folder",
-                body: M
+                body: L
               })
             }
           );
+        case "folder":
+          return /* @__PURE__ */ e(
+            Mt,
+            {
+              value: y || {},
+              onChange: (L) => I(i.name, L),
+              onListFolders: () => k?.http.invoke({
+                method: "GET",
+                action: "storage.mount"
+              }),
+              disabled: S,
+              size: l,
+              placeholder: i.placeholder
+            }
+          );
         case "custom":
           return i.customComponent?.({
-            value: v,
-            onChange: (M) => I(i.name, M),
-            error: L,
+            value: y,
+            onChange: (L) => I(i.name, L),
+            error: E,
             disabled: S
           });
         case "array": {
-          const M = v || [];
+          const L = y || [];
           let Q = [];
-          if (typeof L == "string" && L.startsWith("["))
+          if (typeof E == "string" && E.startsWith("["))
             try {
-              Q = JSON.parse(L);
+              Q = JSON.parse(E);
             } catch {
             }
           const re = () => {
-            I(i.name, [...M, {}]);
+            I(i.name, [...L, {}]);
           }, X = (A) => {
             I(
               i.name,
-              M.filter((z, D) => D !== A)
+              L.filter((T, D) => D !== A)
             );
-          }, $ = (A, z, D) => {
-            const ee = [...M];
+          }, $ = (A, T, D) => {
+            const ee = [...L];
             ee[A] = {
               ...ee[A],
-              [z]: D
+              [T]: D
             }, I(i.name, ee);
           };
           return /* @__PURE__ */ d("div", { className: "space-y-2", children: [
-            M.map((A, z) => /* @__PURE__ */ d(
+            L.map((A, T) => /* @__PURE__ */ d(
               "div",
               {
                 className: "p-4 border rounded-md dark:border-neutral-700 space-y-2 relative",
@@ -3094,13 +3155,13 @@ const or = ({
                       type: "button",
                       variant: "ghost",
                       size: "sm",
-                      onClick: () => X(z),
+                      onClick: () => X(T),
                       disabled: S,
                       children: "Remove"
                     }
                   ) }),
                   /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: i.arrayFields?.map((D) => {
-                    const ee = Q?.[z]?.[D.name];
+                    const ee = Q?.[T]?.[D.name];
                     return /* @__PURE__ */ d(
                       "div",
                       {
@@ -3138,14 +3199,14 @@ const or = ({
                                   {
                                     ...ne,
                                     onChange: (K) => $(
-                                      z,
+                                      T,
                                       D.name,
                                       K.target.value
                                     ),
                                     type: D.textType || D.type,
                                     autoComplete: D.autocomplete,
                                     error: ee,
-                                    size: s
+                                    size: l
                                   }
                                 );
                               case "textarea":
@@ -3154,22 +3215,22 @@ const or = ({
                                   {
                                     ...ne,
                                     onChange: (K) => $(
-                                      z,
+                                      T,
                                       D.name,
                                       K.target.value
                                     ),
                                     rows: 4,
                                     error: ee,
-                                    size: s
+                                    size: l
                                   }
                                 );
                               case "select":
                                 return /* @__PURE__ */ e(
-                                  ve,
+                                  fe,
                                   {
                                     ...ne,
                                     onChange: (K) => $(
-                                      z,
+                                      T,
                                       D.name,
                                       K
                                     ),
@@ -3183,21 +3244,21 @@ const or = ({
                                     multiple: D.multiple,
                                     allowCreate: D.allowCreate,
                                     error: ee,
-                                    size: s
+                                    size: l
                                   }
                                 );
                               case "checkbox":
                                 return /* @__PURE__ */ e(
-                                  ge,
+                                  ye,
                                   {
                                     ...ne,
                                     checked: !!A?.[D.name],
                                     onChange: (K) => $(
-                                      z,
+                                      T,
                                       D.name,
                                       K.target.checked
                                     ),
-                                    size: s
+                                    size: l
                                   }
                                 );
                               case "radio":
@@ -3210,11 +3271,11 @@ const or = ({
                                         "input",
                                         {
                                           type: "radio",
-                                          name: `${i.name}.${z}.${D.name}`,
+                                          name: `${i.name}.${T}.${D.name}`,
                                           value: K.value,
                                           checked: A?.[D.name] === K.value,
                                           onChange: () => $(
-                                            z,
+                                            T,
                                             D.name,
                                             K.value
                                           ),
@@ -3230,16 +3291,16 @@ const or = ({
                               case "date": {
                                 const K = A?.[D.name];
                                 return /* @__PURE__ */ e(
-                                  ye,
+                                  ve,
                                   {
                                     ...ne,
                                     value: K ? new Date(K) : null,
                                     onChange: (le) => $(
-                                      z,
+                                      T,
                                       D.name,
                                       le
                                     ),
-                                    size: s
+                                    size: l
                                   }
                                 );
                               }
@@ -3247,7 +3308,7 @@ const or = ({
                                 return D.customComponent?.({
                                   value: A?.[D.name],
                                   onChange: (K) => $(
-                                    z,
+                                    T,
                                     D.name,
                                     K
                                   ),
@@ -3279,7 +3340,7 @@ const or = ({
                   }) })
                 ]
               },
-              z
+              T
             )),
             /* @__PURE__ */ d(
               te,
@@ -3301,14 +3362,14 @@ const or = ({
           return null;
       }
     },
-    [y, B, N, m, s, I]
-  ), V = ae(
+    [v, B, N, m, l, I]
+  ), W = ae(
     (i) => {
-      if (i.conditional && !i.conditional(y))
+      if (i.conditional && !i.conditional(v))
         return null;
-      const v = i.items.filter((S) => !(S.hidden || S.conditional && !S.conditional(y)));
-      if (v.length === 0) return null;
-      const L = p(
+      const y = i.items.filter((S) => !(S.hidden || S.conditional && !S.conditional(v)));
+      if (y.length === 0) return null;
+      const E = p(
         "space-y-2",
         {
           "grid gap-2": i.layout === "grid",
@@ -3348,7 +3409,7 @@ const or = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ e("div", { className: "md:col-span-2", children: /* @__PURE__ */ e("div", { className: L, children: v.map((S) => (B[S.name] && N[S.name], /* @__PURE__ */ d(
+            /* @__PURE__ */ e("div", { className: "md:col-span-2", children: /* @__PURE__ */ e("div", { className: E, children: y.map((S) => (B[S.name] && N[S.name], /* @__PURE__ */ d(
               "div",
               {
                 className: p(
@@ -3369,7 +3430,7 @@ const or = ({
                       ]
                     }
                   ) }),
-                  T(S)
+                  z(S)
                 ]
               },
               S.name
@@ -3379,26 +3440,26 @@ const or = ({
         i.id
       );
     },
-    [y, B, N, T]
-  ), F = p(
+    [v, B, N, z]
+  ), V = p(
     "space-y-6",
     {
-      "max-w-md": s === "sm",
-      "max-w-2xl": s === "md",
-      "max-w-4xl": s === "lg",
-      "max-w-full": s === "full"
+      "max-w-md": l === "sm",
+      "max-w-2xl": l === "md",
+      "max-w-4xl": l === "lg",
+      "max-w-full": l === "full"
     },
     h
   );
-  return /* @__PURE__ */ d("form", { ref: w, onSubmit: H, className: F, children: [
-    /* @__PURE__ */ e("div", { className: "space-y-8", children: t.map(V) }),
+  return /* @__PURE__ */ d("form", { ref: w, onSubmit: H, className: V, children: [
+    /* @__PURE__ */ e("div", { className: "space-y-8", children: t.map(W) }),
     g && /* @__PURE__ */ d("div", { className: p("flex gap-3 justify-end pt-8"), children: [
       n && /* @__PURE__ */ e(
         te,
         {
           type: "button",
           variant: x.variant,
-          size: x.size || s,
+          size: x.size || l,
           disabled: x.disabled || m,
           onClick: n,
           className: x.className,
@@ -3410,7 +3471,7 @@ const or = ({
         {
           type: "submit",
           variant: b.variant,
-          size: b.size || s,
+          size: b.size || l,
           disabled: b.disabled || m,
           loading: m,
           className: b.className,
@@ -3419,12 +3480,12 @@ const or = ({
       )
     ] })
   ] });
-}, cr = ({
+}, ir = ({
   trigger: t,
   children: a,
   placement: r = "bottom-start",
   className: n,
-  disabled: l = !1
+  disabled: s = !1
 }) => {
   const [o, u] = P(!1), [b, x] = P({}), g = J(null), f = J(null);
   U(() => {
@@ -3438,13 +3499,13 @@ const or = ({
       document.removeEventListener("mousedown", h), document.removeEventListener("keydown", w);
     };
   }, [o]);
-  const s = (h) => {
-    if (h.stopPropagation(), !l) {
+  const l = (h) => {
+    if (h.stopPropagation(), !s) {
       if (!o) {
         const w = f.current?.getBoundingClientRect();
         if (w) {
-          const y = {};
-          r.startsWith("bottom") ? y.top = w.bottom + 6 : y.bottom = window.innerHeight - w.top + 6, r.endsWith("start") ? y.left = w.left : y.right = window.innerWidth - w.right, x(y);
+          const v = {};
+          r.startsWith("bottom") ? v.top = w.bottom + 6 : v.bottom = window.innerHeight - w.top + 6, r.endsWith("start") ? v.left = w.left : v.right = window.innerWidth - w.right, x(v);
         }
       }
       u((w) => !w);
@@ -3456,9 +3517,9 @@ const or = ({
       {
         ref: f,
         type: "button",
-        onClick: s,
-        disabled: l,
-        className: p("inline-flex items-center", l && "opacity-50 cursor-not-allowed"),
+        onClick: l,
+        disabled: s,
+        className: p("inline-flex items-center", s && "opacity-50 cursor-not-allowed"),
         children: t
       }
     ),
@@ -3482,11 +3543,11 @@ const or = ({
   warning: "bg-notice-container text-on-notice",
   error: "bg-error-container text-error",
   info: "bg-beta-container text-link"
-}, Tt = {
+}, Dt = {
   sm: "px-2 py-0.5 text-xs",
   md: "px-2.5 py-1 text-sm",
   lg: "px-3 py-1.5 text-base"
-}, Dt = {
+}, It = {
   default: "bg-neutral-fill",
   primary: "bg-accent-fill",
   secondary: "bg-neutral-fill",
@@ -3495,12 +3556,12 @@ const or = ({
   error: "bg-error-fill",
   info: "bg-beta-fill"
 };
-function ir({
+function dr({
   variant: t = "default",
   size: a = "md",
   dot: r = !1,
   icon: n,
-  dismissible: l = !1,
+  dismissible: s = !1,
   onDismiss: o,
   className: u,
   children: b,
@@ -3515,7 +3576,7 @@ function ir({
         // Variant styles
         zt[t],
         // Size styles
-        Tt[a],
+        Dt[a],
         u
       ),
       ...x,
@@ -3525,13 +3586,13 @@ function ir({
           {
             className: p(
               "w-2 h-2 rounded-full mr-1.5",
-              Dt[t]
+              It[t]
             )
           }
         ),
         n && /* @__PURE__ */ e("span", { className: p("flex-shrink-0", b && "mr-1"), children: n }),
         b,
-        l && o && /* @__PURE__ */ e(
+        s && o && /* @__PURE__ */ e(
           "button",
           {
             onClick: o,
@@ -3551,30 +3612,30 @@ function ir({
     }
   );
 }
-const It = {
+const At = {
   xs: "h-3 w-3",
   sm: "h-4 w-4",
   md: "h-6 w-6",
   lg: "h-8 w-8",
   xl: "h-12 w-12"
-}, At = {
+}, jt = {
   primary: "text-primary",
   secondary: "text-secondary-600",
   white: "text-white",
   current: "text-current"
-}, jt = {
+}, _t = {
   xs: "text-xs",
   sm: "text-sm",
   md: "text-sm",
   lg: "text-base",
   xl: "text-lg"
 };
-function dr({
+function ur({
   size: t = "md",
   variant: a = "primary",
   label: r = "Loading...",
   showLabel: n = !1,
-  className: l,
+  className: s,
   ...o
 }) {
   return /* @__PURE__ */ d(
@@ -3583,7 +3644,7 @@ function dr({
       className: p(
         "inline-flex items-center",
         n ? "flex-col space-y-2" : "",
-        l
+        s
       ),
       ...o,
       children: [
@@ -3592,8 +3653,8 @@ function dr({
           {
             className: p(
               "animate-spin",
-              It[t],
-              At[a]
+              At[t],
+              jt[a]
             ),
             fill: "none",
             viewBox: "0 0 24 24",
@@ -3627,7 +3688,7 @@ function dr({
           {
             className: p(
               "text-secondary-600 dark:text-secondary-400",
-              jt[t]
+              _t[t]
             ),
             children: r
           }
@@ -3637,7 +3698,7 @@ function dr({
     }
   );
 }
-const _t = {
+const Pt = {
   xs: "w-5 h-5 text-[10px]",
   sm: "w-6 h-6 text-xs",
   md: "w-7 h-7 text-[13px]",
@@ -3648,10 +3709,10 @@ function Bt(t) {
   const a = t.trim().split(/[\s@.]+/).filter(Boolean);
   return a.length >= 2 ? (a[0][0] + a[1][0]).toUpperCase() : t.slice(0, 2).toUpperCase();
 }
-const Pt = ({ name: t, src: a, size: r = "sm", className: n, title: l }) => {
+const Ot = ({ name: t, src: a, size: r = "sm", className: n, title: s }) => {
   const [o, u] = se.useState(!1), b = p(
-    "inline-flex items-center justify-center rounded-full overflow-hidden shrink-0 font-semibold select-none bg-neutral-container text-default",
-    _t[r],
+    "inline-flex items-center justify-center rounded-full overflow-hidden shrink-0 font-semibold select-none bg-neutral-border-emphasis text-default",
+    Pt[r],
     n
   );
   return a && !o ? /* @__PURE__ */ e(
@@ -3659,17 +3720,17 @@ const Pt = ({ name: t, src: a, size: r = "sm", className: n, title: l }) => {
     {
       src: a,
       alt: t ?? "",
-      title: l ?? t,
+      title: s ?? t,
       className: p(b, "object-cover"),
       onError: () => u(!0)
     }
-  ) : /* @__PURE__ */ e("span", { className: b, title: l ?? t, "aria-label": t, children: Bt(t) });
-}, Me = "shadow-[0_0_0_2px_var(--base-module)]", Ot = "shadow-[0_0_0_2px_var(--base-module),0_0_0_3.5px_var(--accent-border)]", ur = ({ people: t, max: a = 4, size: r = "sm", className: n }) => {
+  ) : /* @__PURE__ */ e("span", { className: b, title: s ?? t, "aria-label": t, children: Bt(t) });
+}, Me = "shadow-[0_0_0_2px_var(--base-module)]", Wt = "shadow-[0_0_0_2px_var(--base-module),0_0_0_3.5px_var(--accent-border)]", mr = ({ people: t, max: a = 4, size: r = "sm", className: n }) => {
   if (t.length === 0) return null;
-  const l = t.slice(0, a), o = t.length - l.length;
+  const s = t.slice(0, a), o = t.length - s.length;
   return /* @__PURE__ */ d("span", { className: p("inline-flex items-center", n), children: [
-    l.map((u, b) => /* @__PURE__ */ e(
-      Pt,
+    s.map((u, b) => /* @__PURE__ */ e(
+      Ot,
       {
         name: u.name,
         src: u.src,
@@ -3677,7 +3738,7 @@ const Pt = ({ name: t, src: a, size: r = "sm", className: n, title: l }) => {
         title: u.name ? u.seen === !1 ? `${u.name} — nog niet gelezen` : u.name : void 0,
         className: p(
           b > 0 && "-ml-2",
-          u.owner ? Ot : Me,
+          u.owner ? Wt : Me,
           u.seen === !1 && "opacity-40"
         )
       },
@@ -3698,31 +3759,31 @@ const Pt = ({ name: t, src: a, size: r = "sm", className: n, title: l }) => {
       }
     )
   ] });
-}, mr = ({
+}, fr = ({
   src: t,
   alt: a,
   size: r = "md",
   aspectRatio: n = "auto",
-  radius: l = "md",
+  radius: s = "md",
   showLoading: o = !0,
   showError: u = !0,
   fallback: b,
   loadingContent: x,
   errorContent: g,
   className: f,
-  onLoad: s,
+  onLoad: l,
   onError: m,
   ...h
 }) => {
-  const [w, k] = P(!0), [y, j] = P(!1), [N, q] = P(t), B = (F) => {
-    k(!1), j(!1), s?.(F);
-  }, G = (F) => {
+  const [w, k] = P(!0), [v, j] = P(!1), [N, q] = P(t), B = (V) => {
+    k(!1), j(!1), l?.(V);
+  }, G = (V) => {
     if (k(!1), j(!0), b && N !== b) {
       q(b), j(!1), k(!0);
       return;
     }
-    m?.(F);
-  }, W = p(
+    m?.(V);
+  }, F = p(
     "relative overflow-hidden bg-neutral-100 dark:bg-neutral-800",
     // Size variants
     {
@@ -3742,24 +3803,24 @@ const Pt = ({ name: t, src: a, size: r = "sm", className: n, title: l }) => {
     },
     // Border radius variants
     {
-      "rounded-none": l === "none",
-      "rounded-sm": l === "sm",
-      "rounded-md": l === "md",
-      "rounded-lg": l === "lg",
-      "rounded-xl": l === "xl",
-      "rounded-full": l === "full"
+      "rounded-none": s === "none",
+      "rounded-sm": s === "sm",
+      "rounded-md": s === "md",
+      "rounded-lg": s === "lg",
+      "rounded-xl": s === "xl",
+      "rounded-full": s === "full"
     },
     f
   ), I = p(
     "w-full h-full object-cover transition-opacity duration-200",
     {
-      "opacity-0": w || y,
-      "opacity-100": !w && !y
+      "opacity-0": w || v,
+      "opacity-100": !w && !v
     }
   ), H = p(
     "absolute inset-0 flex items-center justify-center",
     "text-neutral-400 dark:text-neutral-500"
-  ), T = /* @__PURE__ */ e("div", { className: "animate-pulse", children: /* @__PURE__ */ e("div", { className: "w-6 h-6 bg-neutral-300 dark:bg-neutral-600 rounded" }) }), V = /* @__PURE__ */ d("div", { className: "text-center", children: [
+  ), z = /* @__PURE__ */ e("div", { className: "animate-pulse", children: /* @__PURE__ */ e("div", { className: "w-6 h-6 bg-neutral-300 dark:bg-neutral-600 rounded" }) }), W = /* @__PURE__ */ d("div", { className: "text-center", children: [
     /* @__PURE__ */ e(
       "svg",
       {
@@ -3780,7 +3841,7 @@ const Pt = ({ name: t, src: a, size: r = "sm", className: n, title: l }) => {
     ),
     /* @__PURE__ */ e("span", { className: "text-xs", children: "Failed to load" })
   ] });
-  return /* @__PURE__ */ d("div", { className: W, children: [
+  return /* @__PURE__ */ d("div", { className: F, children: [
     /* @__PURE__ */ e(
       "img",
       {
@@ -3792,40 +3853,40 @@ const Pt = ({ name: t, src: a, size: r = "sm", className: n, title: l }) => {
         onError: G
       }
     ),
-    w && o && /* @__PURE__ */ e("div", { className: H, children: x || T }),
-    y && u && /* @__PURE__ */ e("div", { className: H, children: g || V })
+    w && o && /* @__PURE__ */ e("div", { className: H, children: x || z }),
+    v && u && /* @__PURE__ */ e("div", { className: H, children: g || W })
   ] });
-}, fr = ({
+}, hr = ({
   title: t,
   subtitle: a,
   actions: r = [],
   children: n,
-  className: l,
+  className: s,
   backLabel: o = "Back",
   backClassName: u,
   onBack: b,
   editable: x = !1,
   onTitleChange: g
 }) => {
-  const [f, s] = P(!1), [m, h] = P(t), w = J(null);
+  const [f, l] = P(!1), [m, h] = P(t), w = J(null);
   U(() => {
     h(t);
   }, [t]), U(() => {
     f && w.current && (w.current.focus(), w.current.select());
   }, [f]);
   const k = () => {
-    x && s(!0);
-  }, y = () => {
-    s(!1), m.trim() !== "" && m !== t && g ? g(m.trim()) : h(t);
+    x && l(!0);
+  }, v = () => {
+    l(!1), m.trim() !== "" && m !== t && g ? g(m.trim()) : h(t);
   }, j = (N) => {
-    N.key === "Enter" ? w.current?.blur() : N.key === "Escape" && (h(t), s(!1));
+    N.key === "Enter" ? w.current?.blur() : N.key === "Escape" && (h(t), l(!1));
   };
   return /* @__PURE__ */ d(
     "div",
     {
       className: p(
         "p-5 pb-3 border-b border-neutral",
-        l
+        s
       ),
       children: [
         /* @__PURE__ */ d("div", { className: "flex flex-row sm:items-start sm:justify-between items-center gap-4", children: [
@@ -3849,7 +3910,7 @@ const Pt = ({ name: t, src: a, size: r = "sm", className: n, title: l }) => {
                 type: "text",
                 value: m,
                 onChange: (N) => h(N.target.value),
-                onBlur: y,
+                onBlur: v,
                 onKeyDown: j,
                 className: "text-1xl font-semibold bg-transparent border-b-1 border-neutral rounded-lg outline-none focus:border-none px-1 -mx-1 min-w-0 flex-1"
               }
@@ -3878,7 +3939,7 @@ const Pt = ({ name: t, src: a, size: r = "sm", className: n, title: l }) => {
           ] }) }),
           r.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-wrap sm:flex-nowrap gap-2 sm:gap-3", children: r.map(
             (N) => N.splitOptions && N.splitOptions.length > 0 ? /* @__PURE__ */ e(
-              Te,
+              ze,
               {
                 label: N.label,
                 onClick: N.onClick,
@@ -3915,12 +3976,12 @@ const Pt = ({ name: t, src: a, size: r = "sm", className: n, title: l }) => {
       ]
     }
   );
-}, hr = ({
+}, pr = ({
   actions: t = [],
   onBack: a,
   backLabel: r = "Back",
   className: n,
-  children: l
+  children: s
 }) => /* @__PURE__ */ d("div", { className: p("flex items-center gap-2 mb-3", n), children: [
   a && /* @__PURE__ */ d(
     "button",
@@ -3934,10 +3995,10 @@ const Pt = ({ name: t, src: a, size: r = "sm", className: n, title: l }) => {
       ]
     }
   ),
-  l && /* @__PURE__ */ e("div", { className: "flex-1 min-w-0", children: l }),
-  t.length > 0 && /* @__PURE__ */ e("div", { className: p("flex flex-wrap gap-2", !l && "ml-auto"), children: t.map(
+  s && /* @__PURE__ */ e("div", { className: "flex-1 min-w-0", children: s }),
+  t.length > 0 && /* @__PURE__ */ e("div", { className: p("flex flex-wrap gap-2", !s && "ml-auto"), children: t.map(
     (o) => o.splitOptions && o.splitOptions.length > 0 ? /* @__PURE__ */ e(
-      Te,
+      ze,
       {
         label: o.label,
         onClick: o.onClick,
@@ -3970,19 +4031,19 @@ const Pt = ({ name: t, src: a, size: r = "sm", className: n, title: l }) => {
     )
   ) })
 ] });
-function Vt(t, a) {
+function Ft(t, a) {
   return a.split(".").reduce(
     (r, n) => r && typeof r == "object" && n in r ? r[n] : void 0,
     t
   );
 }
-const pr = ({
+const xr = ({
   groups: t,
   data: a,
   size: r = "md",
   className: n
 }) => {
-  const l = (f) => {
+  const s = (f) => {
     if (!f) return "-";
     try {
       return new Date(f).toLocaleDateString("nl-NL", {
@@ -3993,15 +4054,15 @@ const pr = ({
     } catch {
       return String(f);
     }
-  }, o = (f) => f ? "Ja" : "Nee", u = (f, s) => {
-    if (!s) return String(f || "-");
-    const m = s.find((h) => h.value === f);
+  }, o = (f) => f ? "Ja" : "Nee", u = (f, l) => {
+    if (!l) return String(f || "-");
+    const m = l.find((h) => h.value === f);
     return m ? m.label : String(f || "-");
   }, b = ae(
     (f) => {
-      const s = Vt(a, f.name);
+      const l = Ft(a, f.name);
       if (f.type === "array") {
-        const h = s;
+        const h = l;
         return !h || h.length === 0 ? /* @__PURE__ */ e(
           Z,
           {
@@ -4029,10 +4090,10 @@ const pr = ({
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: f.arrayFields?.map((y) => {
-                const j = w?.[y.name];
+              /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: f.arrayFields?.map((v) => {
+                const j = w?.[v.name];
                 let N = "-";
-                switch (y.type) {
+                switch (v.type) {
                   case "text":
                   case "email":
                   case "number":
@@ -4045,31 +4106,31 @@ const pr = ({
                   case "radio":
                     N = u(
                       j,
-                      y.options
+                      v.options
                     );
                     break;
                   case "checkbox":
                     N = o(j);
                     break;
                   case "date":
-                    N = l(j);
+                    N = s(j);
                     break;
                   case "custom":
-                    N = y.customComponent?.({
+                    N = v.customComponent?.({
                       value: j
                     });
                     break;
                   default:
                     N = String(j || "-");
                 }
-                return y.format && (N = y.format(j, w)), /* @__PURE__ */ d("div", { className: "space-y-1", children: [
+                return v.format && (N = v.format(j, w)), /* @__PURE__ */ d("div", { className: "space-y-1", children: [
                   /* @__PURE__ */ e(
                     Z,
                     {
                       variant: "label",
                       size: "xs",
                       className: "text-neutral-600 dark:text-neutral-400",
-                      children: y.label
+                      children: v.label
                     }
                   ),
                   /* @__PURE__ */ e(
@@ -4081,7 +4142,7 @@ const pr = ({
                       children: N
                     }
                   )
-                ] }, y.name);
+                ] }, v.name);
               }) })
             ]
           },
@@ -4089,9 +4150,9 @@ const pr = ({
         )) });
       }
       if (f.type === "custom" && f.customComponent)
-        return f.customComponent({ value: s });
+        return f.customComponent({ value: l });
       if (f.format) {
-        const h = f.format(s, a);
+        const h = f.format(l, a);
         return /* @__PURE__ */ e(
           Z,
           {
@@ -4110,23 +4171,23 @@ const pr = ({
         case "number":
         case "tel":
         case "url":
-          m = s ? String(s) : "-";
+          m = l ? String(l) : "-";
           break;
         case "textarea":
-          m = s ? /* @__PURE__ */ e("div", { className: "whitespace-pre-wrap", children: String(s || "-") }) : "-";
+          m = l ? /* @__PURE__ */ e("div", { className: "whitespace-pre-wrap", children: String(l || "-") }) : "-";
           break;
         case "select":
         case "radio":
-          m = u(s, f.options);
+          m = u(l, f.options);
           break;
         case "checkbox":
-          m = o(s);
+          m = o(l);
           break;
         case "date":
-          m = l(s);
+          m = s(l);
           break;
         default:
-          m = s ? String(s) : "-";
+          m = l ? String(l) : "-";
       }
       return /* @__PURE__ */ e(
         Z,
@@ -4143,8 +4204,8 @@ const pr = ({
     (f) => {
       if (f.conditional && !f.conditional(a))
         return null;
-      const s = f.items.filter((h) => !(h.hidden || h.conditional && !h.conditional(a)));
-      if (s.length === 0) return null;
+      const l = f.items.filter((h) => !(h.hidden || h.conditional && !h.conditional(a)));
+      if (l.length === 0) return null;
       const m = p(
         "space-y-4",
         {
@@ -4185,7 +4246,7 @@ const pr = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ e("div", { className: "md:col-span-2", children: /* @__PURE__ */ e("div", { className: m, children: s.map((h) => /* @__PURE__ */ d(
+            /* @__PURE__ */ e("div", { className: "md:col-span-2", children: /* @__PURE__ */ e("div", { className: m, children: l.map((h) => /* @__PURE__ */ d(
               "div",
               {
                 className: p(
@@ -4226,8 +4287,8 @@ const pr = ({
   );
   return /* @__PURE__ */ e("div", { className: g, children: /* @__PURE__ */ e("div", { className: "space-y-8", children: t.map(x) }) });
 }, Ie = ({ item: t, isSelectedHandler: a, onClick: r, depth: n = 0 }) => {
-  const [l, o] = P(t.defaultCollapsed ?? !1), u = t.children && t.children.length > 0, b = u && n === 0, x = () => {
-    u && o(!l);
+  const [s, o] = P(t.defaultCollapsed ?? !1), u = t.children && t.children.length > 0, b = u && n === 0, x = () => {
+    u && o(!s);
   }, g = a ? a(t.path) : !1;
   return /* @__PURE__ */ d("li", { children: [
     /* @__PURE__ */ d(
@@ -4248,11 +4309,11 @@ const pr = ({
           t.icon && /* @__PURE__ */ e("span", { className: "mr-2 shrink-0", children: t.icon }),
           /* @__PURE__ */ e("span", { className: "flex-1 min-w-0 truncate", children: t.label }),
           t.count !== void 0 && t.count > 0 && /* @__PURE__ */ e("span", { className: "ml-2 mr-1.5", children: t.count }),
-          u && /* @__PURE__ */ e("span", { className: `${l ? "collapsed" : ""}`, children: /* @__PURE__ */ e(qe, { className: "w-4 h-4 text-muted" }) })
+          u && /* @__PURE__ */ e("span", { className: `${s ? "collapsed" : ""}`, children: /* @__PURE__ */ e(qe, { className: "w-4 h-4 text-muted" }) })
         ]
       }
     ),
-    u && !l && /* @__PURE__ */ e("ul", { className: "sidebar-menu-nested-items mb-1", children: t.children?.map((f, s) => /* @__PURE__ */ e(
+    u && !s && /* @__PURE__ */ e("ul", { className: "sidebar-menu-nested-items mb-1", children: t.children?.map((f, l) => /* @__PURE__ */ e(
       Ie,
       {
         item: f,
@@ -4260,15 +4321,15 @@ const pr = ({
         onClick: r,
         depth: n + 1
       },
-      s
+      l
     )) })
   ] });
-}, xr = ({
+}, br = ({
   title: t,
   actionIcons: a,
   items: r,
   isSelectedHandler: n,
-  onClick: l,
+  onClick: s,
   preMenuItemsComponent: o
 }) => /* @__PURE__ */ d("div", { className: "flex flex-col h-screen mb-6", children: [
   /* @__PURE__ */ d("div", { className: "sidebar-menu-header", children: [
@@ -4282,23 +4343,23 @@ const pr = ({
       {
         item: u,
         isSelectedHandler: n,
-        onClick: l
+        onClick: s
       },
       b
     )
   ) })
-] }), br = ({
+] }), gr = ({
   level: t = 1,
   size: a,
   weight: r = "bold",
   color: n = "current",
-  align: l = "left",
+  align: s = "left",
   truncate: o = !1,
   className: u,
   children: b,
   ...x
 }) => {
-  const g = a || Wt(t), f = p(
+  const g = a || Vt(t), f = p(
     "font-primary",
     // Size variants
     {
@@ -4333,19 +4394,19 @@ const pr = ({
     },
     // Alignment
     {
-      "text-left": l === "left",
-      "text-center": l === "center",
-      "text-right": l === "right"
+      "text-left": s === "left",
+      "text-center": s === "center",
+      "text-right": s === "right"
     },
     // Truncation
     {
       truncate: o
     },
     u
-  ), s = `h${t}`;
-  return /* @__PURE__ */ e(s, { className: f, ...x, children: b });
+  ), l = `h${t}`;
+  return /* @__PURE__ */ e(l, { className: f, ...x, children: b });
 };
-function Wt(t) {
+function Vt(t) {
   return {
     1: "4xl",
     2: "3xl",
@@ -4355,12 +4416,12 @@ function Wt(t) {
     6: "md"
   }[t] || "md";
 }
-const gr = ({
+const yr = ({
   items: t,
   type: a = "unordered",
   variant: r = "default",
   size: n = "md",
-  interactive: l = !1,
+  interactive: s = !1,
   className: o,
   itemClassName: u
 }) => {
@@ -4385,7 +4446,7 @@ const gr = ({
       "text-lg": n === "lg"
     },
     o
-  ), x = (s, m) => p(
+  ), x = (l, m) => p(
     // Base item styles
     "transition-colors duration-200",
     // Size-based padding
@@ -4395,92 +4456,92 @@ const gr = ({
       "py-3 px-4": n === "lg" && (r === "bordered" || r === "divided")
     },
     // Interactive styles
-    l && !s.disabled && {
+    s && !l.disabled && {
       "cursor-pointer hover:bg-neutral-50 dark:hover:bg-neutral-800": !0,
       "focus:outline-none focus:bg-neutral-100 dark:focus:bg-neutral-700": !0
     },
     // Disabled styles
-    s.disabled && {
+    l.disabled && {
       "opacity-50 cursor-not-allowed": !0
     },
     u
-  ), g = (s) => {
-    l && !s.disabled && s.onClick && s.onClick();
-  }, f = (s, m) => {
-    l && !m.disabled && (s.key === "Enter" || s.key === " ") && (s.preventDefault(), m.onClick?.());
+  ), g = (l) => {
+    s && !l.disabled && l.onClick && l.onClick();
+  }, f = (l, m) => {
+    s && !m.disabled && (l.key === "Enter" || l.key === " ") && (l.preventDefault(), m.onClick?.());
   };
-  return a === "ordered" ? /* @__PURE__ */ e("ol", { className: b, children: t.map((s, m) => /* @__PURE__ */ e(
+  return a === "ordered" ? /* @__PURE__ */ e("ol", { className: b, children: t.map((l, m) => /* @__PURE__ */ e(
     "li",
     {
-      className: x(s),
-      onClick: () => g(s),
-      onKeyDown: (h) => f(h, s),
-      tabIndex: l && !s.disabled ? 0 : void 0,
-      role: l ? "button" : void 0,
-      children: s.content
+      className: x(l),
+      onClick: () => g(l),
+      onKeyDown: (h) => f(h, l),
+      tabIndex: s && !l.disabled ? 0 : void 0,
+      role: s ? "button" : void 0,
+      children: l.content
     },
-    s.id || m
-  )) }) : a === "description" ? /* @__PURE__ */ e("dl", { className: b, children: t.map((s, m) => /* @__PURE__ */ e(
+    l.id || m
+  )) }) : a === "description" ? /* @__PURE__ */ e("dl", { className: b, children: t.map((l, m) => /* @__PURE__ */ e(
     "div",
     {
-      className: x(s),
-      onClick: () => g(s),
-      onKeyDown: (h) => f(h, s),
-      tabIndex: l && !s.disabled ? 0 : void 0,
-      role: l ? "button" : void 0,
-      children: s.content
+      className: x(l),
+      onClick: () => g(l),
+      onKeyDown: (h) => f(h, l),
+      tabIndex: s && !l.disabled ? 0 : void 0,
+      role: s ? "button" : void 0,
+      children: l.content
     },
-    s.id || m
-  )) }) : /* @__PURE__ */ e("ul", { className: b, children: t.map((s, m) => /* @__PURE__ */ e(
+    l.id || m
+  )) }) : /* @__PURE__ */ e("ul", { className: b, children: t.map((l, m) => /* @__PURE__ */ e(
     "li",
     {
-      className: x(s),
-      onClick: () => g(s),
-      onKeyDown: (h) => f(h, s),
-      tabIndex: l && !s.disabled ? 0 : void 0,
-      role: l ? "button" : void 0,
-      children: s.content
+      className: x(l),
+      onClick: () => g(l),
+      onKeyDown: (h) => f(h, l),
+      tabIndex: s && !l.disabled ? 0 : void 0,
+      role: s ? "button" : void 0,
+      children: l.content
     },
-    s.id || m
+    l.id || m
   )) });
-}, yr = ({
+}, vr = ({
   commands: t,
   isOpen: a,
   onClose: r,
   labels: n,
-  initialCommandPath: l,
+  initialCommandPath: s,
   initialActiveIndex: o
 }) => {
-  const [u, b] = P(""), [x, g] = P(l || []), [f, s] = P(o || 0), m = J(null), h = J(null), k = (x.length ? t.find((y) => y.id === x[0])?.subCommands || [] : t).filter(
-    (y) => y.label.toLowerCase().includes(u.toLowerCase())
+  const [u, b] = P(""), [x, g] = P(s || []), [f, l] = P(o || 0), m = J(null), h = J(null), k = (x.length ? t.find((v) => v.id === x[0])?.subCommands || [] : t).filter(
+    (v) => v.label.toLowerCase().includes(u.toLowerCase())
   );
   return U(() => {
-    a || (b(""), g(l || []), s(o || 0));
+    a || (b(""), g(s || []), l(o || 0));
   }, [a]), U(() => {
-    const y = (j) => {
+    const v = (j) => {
       if (a) {
         if (j.key === "Escape")
           r();
         else if (j.key === "ArrowUp")
-          s(
+          l(
             (N) => N > 0 ? N - 1 : k.length - 1
           );
         else if (j.key === "ArrowDown")
-          s(
+          l(
             (N) => N < k.length - 1 ? N + 1 : 0
           );
         else if (j.key === "Enter") {
           const N = k[f];
-          N && (N.subCommands ? (g([...x, N.id]), s(0)) : N.action && (N.action(), r()));
+          N && (N.subCommands ? (g([...x, N.id]), l(0)) : N.action && (N.action(), r()));
         }
       }
     };
-    return document.addEventListener("keydown", y), () => document.removeEventListener("keydown", y);
+    return document.addEventListener("keydown", v), () => document.removeEventListener("keydown", v);
   }, [a, r, k, f, x]), U(() => {
-    const y = (j) => {
+    const v = (j) => {
       m.current && !m.current.contains(j.target) && r();
     };
-    return a && document.addEventListener("mousedown", y), () => document.removeEventListener("mousedown", y);
+    return a && document.addEventListener("mousedown", v), () => document.removeEventListener("mousedown", v);
   }, [a, r]), U(() => {
     if (!a) return;
     h.current?.querySelector(`[data-index="${f}"]`)?.scrollIntoView({ block: "nearest" });
@@ -4491,7 +4552,7 @@ const gr = ({
       ref: m,
       children: [
         /* @__PURE__ */ d("div", { className: "flex items-center gap-2 px-3 flex-shrink-0", children: [
-          /* @__PURE__ */ e(ze, { className: "w-4 h-4 text-muted shrink-0" }),
+          /* @__PURE__ */ e(Te, { className: "w-4 h-4 text-muted shrink-0" }),
           /* @__PURE__ */ e(
             "input",
             {
@@ -4499,7 +4560,7 @@ const gr = ({
               autoFocus: !0,
               placeholder: n?.searchPlaceholder || "Search commands...",
               value: u,
-              onChange: (y) => b(y.target.value),
+              onChange: (v) => b(v.target.value),
               className: "w-full py-2 text-default border-0 focus:outline-none focus:ring-0 focus:border-0 focus:shadow-none bg-transparent"
             }
           )
@@ -4511,22 +4572,22 @@ const gr = ({
             className: "mt-2 pt-2 text-sm border-t border-neutral max-h-[50vh] overflow-y-auto",
             children: [
               k.length === 0 && /* @__PURE__ */ e("div", { className: "text-muted text-center text-sm", children: n?.noCommandsFound || "No commands found" }),
-              k.map((y, j) => /* @__PURE__ */ d(
+              k.map((v, j) => /* @__PURE__ */ d(
                 "div",
                 {
                   "data-index": j,
                   className: `flex items-center p-2 cursor-pointer rounded-md text-default ${j === f ? "bg-neutral-container" : ""}`,
                   onClick: () => {
-                    y.subCommands ? (g([...x, y.id]), s(0)) : y.action && (y.action(), r());
+                    v.subCommands ? (g([...x, v.id]), l(0)) : v.action && (v.action(), r());
                   },
-                  onMouseEnter: () => s(j),
+                  onMouseEnter: () => l(j),
                   children: [
-                    y.icon && /* @__PURE__ */ e("span", { className: "mr-3", children: y.icon }),
-                    /* @__PURE__ */ e("span", { className: "flex-grow", children: y.label }),
-                    y.subCommands && /* @__PURE__ */ e("span", { className: "text-muted", children: /* @__PURE__ */ e(Ue, { className: "w-4 h-4" }) })
+                    v.icon && /* @__PURE__ */ e("span", { className: "mr-3", children: v.icon }),
+                    /* @__PURE__ */ e("span", { className: "flex-grow", children: v.label }),
+                    v.subCommands && /* @__PURE__ */ e("span", { className: "text-muted", children: /* @__PURE__ */ e(Ue, { className: "w-4 h-4" }) })
                   ]
                 },
-                y.id
+                v.id
               ))
             ]
           }
@@ -4548,7 +4609,7 @@ const gr = ({
       ]
     }
   ) }) : null;
-}, Ft = {
+}, Rt = {
   none: "p-0",
   xs: "p-1",
   sm: "p-2",
@@ -4556,7 +4617,7 @@ const gr = ({
   lg: "p-6",
   xl: "p-8",
   "2xl": "p-12"
-}, Rt = {
+}, Ht = {
   none: "m-0",
   xs: "m-1",
   sm: "m-2",
@@ -4564,7 +4625,7 @@ const gr = ({
   lg: "m-6",
   xl: "m-8",
   "2xl": "m-12"
-}, Ht = {
+}, qt = {
   none: "",
   primary: "bg-primary",
   secondary: "bg-secondary",
@@ -4580,26 +4641,26 @@ const gr = ({
   backdrop: "bg-backdrop",
   editor: "bg-editor",
   input: "bg-input"
-}, qt = {
+}, Ut = {
   none: "rounded-none",
   sm: "rounded-sm",
   md: "rounded-md",
   lg: "rounded-lg",
   xl: "rounded-xl",
   full: "rounded-full"
-}, Ut = {
+}, Gt = {
   none: "shadow-none",
   sm: "shadow-sm shadow-lvl-0",
   md: "shadow-md shadow-lvl-0",
   lg: "shadow-lg shadow-lvl-0",
   xl: "shadow-xl shadow-lvl-0",
   "2xl": "shadow-2xl shadow-lvl-0"
-}, Gt = {
+}, Kt = {
   none: "border-0",
   sm: "border",
   md: "border-2",
   lg: "border-4"
-}, Kt = {
+}, Jt = {
   primary: "border-primary",
   secondary: "border-secondary",
   accent: "border-accent",
@@ -4615,7 +4676,7 @@ const gr = ({
     margin: a,
     background: r,
     radius: n,
-    shadow: l,
+    shadow: s,
     border: o,
     borderColor: u,
     className: b,
@@ -4626,13 +4687,13 @@ const gr = ({
     {
       ref: f,
       className: p(
-        t && Ft[t],
-        a && Rt[a],
-        r && Ht[r],
-        n && qt[n],
-        l && Ut[l],
-        o && Gt[o],
-        u && Kt[u],
+        t && Rt[t],
+        a && Ht[a],
+        r && qt[r],
+        n && Ut[n],
+        s && Gt[s],
+        o && Kt[o],
+        u && Jt[u],
         b
       ),
       ...g,
@@ -4641,19 +4702,19 @@ const gr = ({
   )
 );
 Ae.displayName = "Box";
-const vr = ({ children: t, title: a, ...r }) => /* @__PURE__ */ d(Ae, { background: "module", radius: "xl", shadow: "sm", ...r, children: [
+const Nr = ({ children: t, title: a, ...r }) => /* @__PURE__ */ d(Ae, { background: "module", radius: "xl", shadow: "sm", ...r, children: [
   a && /* @__PURE__ */ e("span", { className: "text-base font-medium text-default mb-2", children: a }),
   t
 ] });
-function Nr({
+function wr({
   identifier: t,
   resourceLoader: a,
   framework: r = "react",
   fallback: n,
-  componentProps: l,
+  componentProps: s,
   className: o
 }) {
-  const u = J(null), [b, x] = P(!0), [g, f] = P(null), s = J(null);
+  const u = J(null), [b, x] = P(!0), [g, f] = P(null), l = J(null);
   return J(null), U(() => {
     let m = !0;
     return (async () => {
@@ -4676,24 +4737,24 @@ function Nr({
     const m = u.current;
     if (m) {
       if (r === "svelte") {
-        const h = g.default || g, w = new h({ target: m, props: l || {} });
-        return s.current = w, () => w.$destroy();
+        const h = g.default || g, w = new h({ target: m, props: s || {} });
+        return l.current = w, () => w.$destroy();
       }
       if (g.mount) {
-        const h = g.mount({ container: m, props: l || {} });
+        const h = g.mount({ container: m, props: s || {} });
         return () => {
           typeof h == "function" ? h() : g.unmount?.(m);
         };
       }
     }
   }, [g, r, b]), U(() => {
-    r === "svelte" && s.current && s.current.$set?.(l);
-  }, [l, r]), /* @__PURE__ */ d("div", { ref: u, className: o, style: { display: "contents" }, children: [
+    r === "svelte" && l.current && l.current.$set?.(s);
+  }, [s, r]), /* @__PURE__ */ d("div", { ref: u, className: o, style: { display: "contents" }, children: [
     b && n,
-    r === "react" && g && /* @__PURE__ */ e(g, { ...l })
+    r === "react" && g && /* @__PURE__ */ e(g, { ...s })
   ] });
 }
-class wr extends Ke {
+class kr extends Ke {
   constructor() {
     super(...arguments), this.state = {
       hasError: !1,
@@ -4722,48 +4783,49 @@ class wr extends Ke {
   }
 }
 export {
-  Pt as Avatar,
-  ur as AvatarStack,
-  ir as Badge,
+  Ot as Avatar,
+  mr as AvatarStack,
+  dr as Badge,
   Ae as Box,
   te as Button,
-  ar as ButtonGroup,
-  vr as Card,
-  ge as Checkbox,
-  yr as CommandPalette,
+  lr as ButtonGroup,
+  Nr as Card,
+  ye as Checkbox,
+  vr as CommandPalette,
   mt as ContentLoading,
-  ye as DatePicker,
+  ve as DatePicker,
   ft as Dropdown,
-  wr as ErrorBoundary,
-  Nr as FederatedResource,
-  or as Form,
-  br as Heading,
+  kr as ErrorBoundary,
+  wr as FederatedResource,
+  Mt as FolderSelect,
+  cr as Form,
+  gr as Heading,
   oe as Icon,
-  mr as Image,
-  lr as Link,
-  gr as List,
-  tr as MeetingGrid,
+  fr as Image,
+  sr as Link,
+  yr as List,
+  rr as MeetingGrid,
   St as Modal,
-  fr as PageHeader,
-  hr as PageToolbar,
-  rr as ParticipantTile,
-  cr as Popover,
+  hr as PageHeader,
+  pr as PageToolbar,
+  nr as ParticipantTile,
+  ir as Popover,
   ot as SearchableTextField,
-  ve as Select,
-  xr as SidebarMenu,
-  dr as Spinner,
-  Te as SplitButton,
+  fe as Select,
+  br as SidebarMenu,
+  ur as Spinner,
+  ze as SplitButton,
   Et as StorageInput,
-  sr as TabBar,
+  or as TabBar,
   Le as Table,
   kt as Tabs,
   Z as Text,
   Ne as TextArea,
   ue as TextField,
-  nr as VideoSurface,
-  pr as View,
+  ar as VideoSurface,
+  xr as View,
   p as cn,
-  er as createSizes,
-  Qt as createVariants
+  tr as createSizes,
+  er as createVariants
 };
 //# sourceMappingURL=index.js.map