@opencxh/ui-kit 3.94.0 → 3.98.0

package/dist/index.js

@@ -1,7 +1,7 @@
 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 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";
+import { jsxs as d, jsx as e, Fragment as we } from "react/jsx-runtime";
+import { VideoOff as _e, User as Pe, MicOff as Be, Mic as Oe, ChevronDown as We, ChevronDownIcon as $e, FileText as xe, HardDrive as Ce, X as Fe, ArrowLeft as ke, Search as Te, FolderPlus as Ve, Upload as Re, Folder as Se, Pencil as He, ChevronRight as qe } from "lucide-react";
+import se, { useRef as Z, useEffect as G, forwardRef as ce, useState as B, useMemo as de, useCallback as ae, createContext as Ue, Component as Ge } from "react";
 function p(...t) {
   return je(t);
 }
@@ -28,14 +28,14 @@ function nr({
   hasVideo: s,
   videoSlot: o,
   className: u,
-  fill: b
+  fill: x
 }) {
   return /* @__PURE__ */ d(
     "div",
     {
       className: p(
         "relative rounded-lg overflow-hidden bg-gray-800 flex items-center justify-center",
-        b ? "h-full w-full" : "aspect-video",
+        x ? "h-full w-full" : "aspect-video",
         n && "ring-2 ring-emerald-400",
         u
       ),
@@ -50,8 +50,8 @@ function nr({
   );
 }
 function ar({ attach: t, active: a = !0, mirrored: r = !1, className: n }) {
-  const s = J(null);
-  return U(() => {
+  const s = Z(null);
+  return G(() => {
     if (!a || !s.current) return;
     const o = t(s.current);
     return () => {
@@ -69,20 +69,20 @@ function ar({ attach: t, active: a = !0, mirrored: r = !1, className: n }) {
     }
   );
 }
-const Je = {
+const Ke = {
   primary: "btn o__primary",
   secondary: "btn o__secondary",
   outline: "btn o__secondary",
   ghost: "btn o__tertiary",
   destructive: "btn o__destructive"
-}, Ye = {
+}, Je = {
   xs: "px-2 py-1 text-xs",
   sm: "px-3 py-1.5 text-sm",
   md: "px-4 py-2 text-sm",
   lg: "px-6 py-3 text-base",
   xl: "px-8 py-4 text-lg",
   full: "px-4 py-3 text-base"
-}, Ze = {
+}, Ye = {
   xs: "p-1",
   sm: "p-1.5",
   md: "p-2",
@@ -98,8 +98,8 @@ const Je = {
     leftIcon: s,
     rightIcon: o,
     iconOnly: u = !1,
-    className: b,
-    children: x,
+    className: x,
+    children: b,
     disabled: g,
     ...f
   }, l) => {
@@ -114,14 +114,14 @@ const Je = {
           "inline-flex items-center justify-center transition-colors duration-200",
           "disabled:opacity-50 disabled:cursor-not-allowed",
           // Variant styles
-          Je[t],
+          Ke[t],
           // Size styles
-          u ? Ze[a] : Ye[a],
+          u ? Ye[a] : Je[a],
           // Full width
           r && "w-full",
           // Loading state
           n && "cursor-wait",
-          b
+          x
         ),
         disabled: m,
         ...f,
@@ -159,9 +159,9 @@ const Je = {
             }
           ),
           !n && s && /* @__PURE__ */ e("span", { className: p("flex-shrink-0", !u && "mr-2"), children: s }),
-          !u && x,
+          !u && b,
           !n && o && /* @__PURE__ */ e("span", { className: p("flex-shrink-0", !u && "ml-2"), children: o }),
-          u && !n && !s && !o && x
+          u && !n && !s && !o && b
         ]
       }
     );
@@ -206,12 +206,12 @@ const lr = ({
   external: s = !1,
   className: o,
   children: u,
-  href: b,
-  target: x,
+  href: x,
+  target: b,
   rel: g,
   ...f
 }) => {
-  const l = s || b && (b.startsWith("http") || b.startsWith("mailto:")), m = p(
+  const l = s || x && (x.startsWith("http") || x.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
@@ -267,8 +267,8 @@ const lr = ({
     o
   ), h = {
     ...f,
-    href: n ? void 0 : b,
-    target: l ? "_blank" : x,
+    href: n ? void 0 : x,
+    target: l ? "_blank" : b,
     rel: l ? "noopener noreferrer" : g
   };
   return /* @__PURE__ */ d("a", { className: m, ...h, children: [
@@ -293,84 +293,136 @@ const lr = ({
       }
     )
   ] });
-}, Se = {
+}, Ze = ({
+  trigger: t,
+  children: a,
+  placement: r = "bottom-start",
+  className: n,
+  disabled: s = !1,
+  triggerLabel: o
+}) => {
+  const [u, x] = B(!1), [b, g] = B({}), f = Z(null), l = Z(null);
+  G(() => {
+    if (!u) return;
+    const k = (y) => {
+      f.current && !f.current.contains(y.target) && x(!1);
+    }, w = (y) => {
+      y.key === "Escape" && x(!1);
+    };
+    return document.addEventListener("mousedown", k), document.addEventListener("keydown", w), () => {
+      document.removeEventListener("mousedown", k), document.removeEventListener("keydown", w);
+    };
+  }, [u]);
+  const m = (k) => {
+    if (k.stopPropagation(), !s) {
+      if (!u) {
+        const w = l.current?.getBoundingClientRect();
+        if (w) {
+          const A = {};
+          r.startsWith("bottom") ? A.top = w.bottom + 6 : A.bottom = window.innerHeight - w.top + 6, r.endsWith("start") ? A.left = w.left : A.right = window.innerWidth - w.right, g(A);
+        }
+      }
+      x((w) => !w);
+    }
+  }, h = () => x(!1);
+  return /* @__PURE__ */ d("div", { ref: f, className: "relative inline-flex", children: [
+    /* @__PURE__ */ e(
+      "button",
+      {
+        ref: l,
+        type: "button",
+        onClick: m,
+        disabled: s,
+        "aria-label": o,
+        "aria-expanded": u,
+        className: p("inline-flex items-center", s && "opacity-50 cursor-not-allowed"),
+        children: t
+      }
+    ),
+    u && /* @__PURE__ */ e(
+      "div",
+      {
+        className: p(
+          "fixed z-[60] bg-module rounded-lg shadow-lg border border-neutral",
+          n
+        ),
+        style: b,
+        children: typeof a == "function" ? a(h) : a
+      }
+    )
+  ] });
+}, Xe = {
   primary: "btn o__primary",
   secondary: "btn o__secondary",
   outline: "btn o__secondary"
-}, Xe = {
-  sm: "px-3 py-1.5 text-sm",
-  md: "px-4 py-2 text-sm"
 };
-function ze({
+function De({
   label: t,
   onClick: a,
   variant: r = "primary",
   size: n = "md",
   icon: s,
   options: o,
-  disabled: u = !1
+  disabled: u = !1,
+  loading: x = !1,
+  menuPlacement: b = "bottom-end",
+  menuLabel: g = "More options"
 }) {
-  const [b, x] = P(!1), g = J(null), f = ae(() => {
-    x((l) => !l);
-  }, []);
-  return U(() => {
-    const l = (m) => {
-      g.current && !g.current.contains(m.target) && x(!1);
-    };
-    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",
+  const f = u || x, l = o.length > 0;
+  return /* @__PURE__ */ d("div", { className: "inline-flex items-center gap-px", children: [
+    /* @__PURE__ */ e(
+      te,
       {
-        type: "button",
+        variant: r,
+        size: n,
         onClick: a,
         disabled: u,
-        className: p(
-          "inline-flex items-center justify-center font-medium transition-colors duration-200",
-          "focus:outline-none focus:ring-1 focus:ring-offset-1",
-          "disabled:opacity-50 disabled:cursor-not-allowed",
-          Se[r],
-          Xe[n],
-          "!rounded-r-none"
-        ),
-        children: [
-          s && /* @__PURE__ */ e("span", { className: "mr-2 flex-shrink-0", children: s }),
-          t
-        ]
+        loading: x,
+        leftIcon: s,
+        className: p(l && "!rounded-r-none"),
+        children: t
       }
     ),
-    /* @__PURE__ */ e(
-      "button",
+    l && /* @__PURE__ */ e(
+      Ze,
       {
-        type: "button",
-        onClick: f,
-        disabled: u,
-        className: p(
-          "inline-flex items-center justify-center font-medium transition-colors duration-200",
-          "focus:outline-none focus:ring-1 focus:ring-offset-1",
-          "disabled:opacity-50 disabled:cursor-not-allowed",
-          Se[r],
-          n === "sm" ? "px-1.5 py-1.5" : "px-2 py-2",
-          "!rounded-l-none"
+        placement: b,
+        disabled: f,
+        triggerLabel: g,
+        className: "min-w-[200px] py-1",
+        trigger: /* @__PURE__ */ e(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: p(
+              "inline-flex items-center justify-center transition-colors duration-200",
+              Xe[r],
+              n === "sm" ? "px-1.5 py-1.5" : "px-2 py-2",
+              "!rounded-l-none"
+            ),
+            children: /* @__PURE__ */ e(We, { className: "h-4 w-4" })
+          }
         ),
-        children: /* @__PURE__ */ e(We, { className: "h-4 w-4" })
+        children: (m) => /* @__PURE__ */ e(we, { children: o.map((h) => /* @__PURE__ */ d(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              h.onClick(), m();
+            },
+            className: p(
+              "flex w-full items-center gap-2 px-3 py-2 text-left text-sm transition-colors",
+              h.variant === "destructive" ? "text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900" : "text-default hover:bg-neutral-container"
+            ),
+            children: [
+              h.icon && /* @__PURE__ */ e("span", { className: "flex-shrink-0", children: h.icon }),
+              h.label
+            ]
+          },
+          h.id
+        )) })
       }
-    ),
-    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: () => {
-          l.onClick(), x(!1);
-        },
-        className: p(
-          "w-full text-left px-3 py-2 text-sm hover:bg-gray-50 transition-colors",
-          l.variant === "destructive" ? "text-red-600 hover:bg-red-50" : "text-gray-700"
-        ),
-        children: l.label
-      },
-      l.id
-    )) })
+    )
   ] });
 }
 const Qe = {
@@ -383,7 +435,7 @@ const Qe = {
   md: "text-sm",
   lg: "text-base",
   full: "text-base"
-}, ye = ce(
+}, ve = ce(
   ({
     label: t,
     helperText: a,
@@ -392,11 +444,11 @@ const Qe = {
     indeterminate: s = !1,
     containerClassName: o,
     labelClassName: u,
-    className: b,
-    id: x,
+    className: x,
+    id: b,
     ...g
   }, f) => {
-    const l = x || `checkbox-${Math.random().toString(36).substr(2, 9)}`, m = !!r;
+    const l = b || `checkbox-${Math.random().toString(36).substr(2, 9)}`, m = !!r;
     return se.useEffect(() => {
       f && typeof f == "object" && f.current && (f.current.indeterminate = s);
     }, [s, f]), /* @__PURE__ */ d("div", { className: p("flex flex-col", o), children: [
@@ -419,7 +471,7 @@ const Qe = {
               // check glyph is white, so the fill must stay dark in both modes
               // (accent-fill would invert to near-white in dark → invisible check).
               m ? "border-error [&:not(:checked)]:bg-[var(--base-input)] text-error focus:border-error focus:ring-error" : "border-neutral [&:not(:checked)]:bg-[var(--base-input)] text-[#1a1a1a] focus:border-primary focus:ring-primary",
-              b
+              x
             ),
             ...g
           }
@@ -445,8 +497,8 @@ const Qe = {
     ] });
   }
 );
-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(({
+ve.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(({
   value: t,
   onChange: a,
   placeholder: r = "Select date",
@@ -454,22 +506,22 @@ const tt = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
   required: s = !1,
   size: o = "md",
   className: u,
-  minDate: b,
-  maxDate: x,
+  minDate: x,
+  maxDate: b,
   format: g = "MM/dd/yyyy"
 }, f) => {
-  const [l, m] = P(!1), [h, w] = P(() => t || /* @__PURE__ */ new Date()), k = J(null);
-  U(() => {
-    const z = (W) => {
-      k.current && !k.current.contains(W.target) && m(!1);
+  const [l, m] = B(!1), [h, k] = B(() => t || /* @__PURE__ */ new Date()), w = Z(null);
+  G(() => {
+    const D = (W) => {
+      w.current && !w.current.contains(W.target) && m(!1);
     };
-    return l && document.addEventListener("mousedown", z), () => {
-      document.removeEventListener("mousedown", z);
+    return l && document.addEventListener("mousedown", D), () => {
+      document.removeEventListener("mousedown", D);
     };
   }, [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();
+  const y = (D) => {
+    if (!D) return "";
+    const W = D.getDate().toString().padStart(2, "0"), V = (D.getMonth() + 1).toString().padStart(2, "0"), i = D.getFullYear();
     switch (g) {
       case "dd/MM/yyyy":
         return `${W}/${V}/${i}`;
@@ -479,20 +531,20 @@ const tt = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
       default:
         return `${V}/${W}/${i}`;
     }
-  }, j = () => {
-    const z = h.getFullYear(), W = h.getMonth(), V = new Date(z, W, 1), i = new Date(V);
+  }, A = () => {
+    const D = h.getFullYear(), W = h.getMonth(), V = new Date(D, W, 1), i = new Date(V);
     i.setDate(i.getDate() - V.getDay());
-    const y = [], E = new Date(i);
+    const v = [], E = new Date(i);
     for (let S = 0; S < 42; S++)
-      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)));
+      v.push(new Date(E)), E.setDate(E.getDate() + 1);
+    return v;
+  }, N = (D) => {
+    D.getMonth() === h.getMonth() && (x && D < x || b && D > b || (a?.(D), m(!1)));
   }, q = () => {
-    w(new Date(h.getFullYear(), h.getMonth() - 1, 1));
-  }, B = () => {
-    w(new Date(h.getFullYear(), h.getMonth() + 1, 1));
-  }, G = () => {
+    k(new Date(h.getFullYear(), h.getMonth() - 1, 1));
+  }, P = () => {
+    k(new Date(h.getFullYear(), h.getMonth() + 1, 1));
+  }, U = () => {
     a?.(null), m(!1);
   }, F = p(
     "w-full border border-neutral rounded-md transition-colors duration-200",
@@ -507,7 +559,7 @@ const tt = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
       "px-4 py-3 text-base": o === "full"
     },
     u
-  ), I = j(), H = [
+  ), z = A(), H = [
     "January",
     "February",
     "March",
@@ -521,14 +573,14 @@ const tt = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
     "November",
     "December"
   ];
-  return /* @__PURE__ */ d("div", { ref: k, className: "relative", children: [
+  return /* @__PURE__ */ d("div", { ref: w, className: "relative", children: [
     /* @__PURE__ */ d("div", { className: "relative", children: [
       /* @__PURE__ */ e(
         "input",
         {
           ref: f,
           type: "text",
-          value: v(t ?? null),
+          value: y(t ?? null),
           placeholder: r,
           disabled: n,
           required: s,
@@ -566,30 +618,30 @@ const tt = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: B,
+            onClick: P,
             className: "p-1 hover:bg-neutral-container rounded",
             children: /* @__PURE__ */ e(nt, {})
           }
         )
       ] }),
-      /* @__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;
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-7 gap-1 mb-2", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((D) => /* @__PURE__ */ e("div", { className: "text-xs font-medium text-muted text-center py-1", children: D }, D)) }),
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-7 gap-1", children: z.map((D, W) => {
+        const V = D.getMonth() === h.getMonth(), i = t && D.toDateString() === t.toDateString(), v = D.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), E = !V || x && D < x || b && D > b;
         return /* @__PURE__ */ e(
           "button",
           {
-            onClick: () => !E && N(z),
+            onClick: () => !E && N(D),
             disabled: E,
             className: p(
               "w-8 h-8 text-sm rounded transition-colors duration-200",
               {
                 "text-default hover:bg-neutral-container": V && !i && !E,
                 "bg-primary text-white": i,
-                "bg-neutral-container text-default": y && !i,
+                "bg-neutral-container text-default": v && !i,
                 "text-muted cursor-not-allowed": E
               }
             ),
-            children: z.getDate()
+            children: D.getDate()
           },
           W
         );
@@ -598,7 +650,7 @@ const tt = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: G,
+            onClick: U,
             className: "text-sm text-muted hover:text-default",
             children: "Clear"
           }
@@ -669,69 +721,69 @@ const tt = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
     fullWidth: s = !1,
     startIcon: o = /* @__PURE__ */ e(at, {}),
     loading: u = !1,
-    containerClassName: b,
-    labelClassName: x,
+    containerClassName: x,
+    labelClassName: b,
     className: g,
     id: f,
     options: l,
     onRemoteSearch: m,
     onSelect: h,
-    debounceTime: w = 500,
-    showAllOnOpen: k = !1,
-    value: v,
-    onChange: j,
+    debounceTime: k = 500,
+    showAllOnOpen: w = !1,
+    value: y,
+    onChange: A,
     ...N
   }, q) => {
-    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(() => {
-      v !== void 0 && z(v);
-    }, [v]);
+    const P = f || `searchfield-${Math.random().toString(36).substr(2, 9)}`, U = !!r, F = Z(null), z = Z(null), [H, D] = B(y || ""), [W, V] = B(!1), [i, v] = B(!1), [E, S] = B(!1);
+    G(() => {
+      y !== void 0 && D(y);
+    }, [y]);
     const M = de(() => {
-      if (k && !E || !H) return l;
+      if (w && !E || !H) return l;
       const T = String(H).toLowerCase();
       return l.filter(
-        (D) => String(D.label).toLowerCase().includes(T)
+        (I) => String(I.label).toLowerCase().includes(T)
       );
-    }, [H, l, k, E]);
-    U(() => {
+    }, [H, l, w, E]);
+    G(() => {
       if (!m || !H) {
-        y(!1);
+        v(!1);
         return;
       }
       const T = setTimeout(async () => {
-        y(!0);
+        v(!0);
         try {
           await m(String(H));
-        } catch (D) {
-          console.error("Remote search failed:", D);
+        } catch (I) {
+          console.error("Remote search failed:", I);
         } finally {
-          y(!1);
+          v(!1);
         }
-      }, w);
+      }, k);
       return () => {
-        clearTimeout(T), y(!1);
+        clearTimeout(T), v(!1);
       };
-    }, [H, w, m]), U(() => {
-      const T = (D) => {
-        F.current && !F.current.contains(D.target) && V(!1);
+    }, [H, k, m]), G(() => {
+      const T = (I) => {
+        F.current && !F.current.contains(I.target) && V(!1);
       };
       return document.addEventListener("mousedown", T), () => document.removeEventListener("mousedown", T);
     }, []);
     const L = (T) => {
-      const D = T.target.value;
-      z(D), V(!0), S(!0), j && j(T);
+      const I = T.target.value;
+      D(I), V(!0), S(!0), A && A(T);
     }, Q = (T) => {
-      z(T.label), V(!1), S(!1), h && h(T.value);
+      D(T.label), V(!1), S(!1), h && h(T.value);
     }, re = () => {
       (l.length > 0 || m) && (V(!0), S(!1));
-    }, X = u || i, $ = W && (M.length > 0 || X), A = de(() => q || I, [q]);
+    }, X = u || i, $ = W && (M.length > 0 || X), j = de(() => q || z, [q]);
     return /* @__PURE__ */ d(
       "div",
       {
         className: ie(
           "flex flex-col",
           s ? "w-full" : "",
-          b || "",
+          x || "",
           "relative"
         ),
         ref: F,
@@ -739,11 +791,11 @@ const tt = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
           t && /* @__PURE__ */ e(
             "label",
             {
-              htmlFor: B,
+              htmlFor: P,
               className: ie(
                 "block text-sm font-medium mb-1",
-                G ? "text-error" : "text-default",
-                x || ""
+                U ? "text-error" : "text-default",
+                b || ""
               ),
               children: t
             }
@@ -753,8 +805,8 @@ const tt = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
             /* @__PURE__ */ e(
               "input",
               {
-                ref: A,
-                id: B,
+                ref: j,
+                id: P,
                 value: H,
                 onChange: L,
                 onFocus: re,
@@ -770,7 +822,7 @@ const tt = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
                   "pr-10",
                   // Altijd padding rechts voor de dropdown/loading icon
                   // State styles
-                  G ? "border-red-500 text-error focus:border-red-500 focus:ring-red-500" : "border-neutral text-default",
+                  U ? "border-red-500 text-error focus:border-red-500 focus:ring-red-500" : "border-neutral text-default",
                   g || ""
                 ),
                 ...N
@@ -848,7 +900,7 @@ const tt = () => /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none",
             {
               className: ie(
                 "mt-1 text-xs",
-                G ? "text-error" : "text-muted"
+                U ? "text-error" : "text-muted"
               ),
               children: r || a
             }
@@ -877,124 +929,136 @@ const ct = {
     fullWidth: s = !1,
     options: o,
     placeholder: u,
-    containerClassName: b,
-    labelClassName: x,
+    containerClassName: x,
+    labelClassName: b,
     className: g,
     id: f,
     searchable: l,
     multiple: m,
     value: h,
-    onChange: w,
-    allowCreate: k,
-    onCreateOption: v,
-    ...j
+    onChange: k,
+    allowCreate: w,
+    onCreateOption: y,
+    ...A
   }, N) => {
-    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) => {
-        z.current && !z.current.contains(A.target) && F(!1);
+    const q = f || `select-${Math.random().toString(36).substr(2, 9)}`, P = !!r, [U, F] = se.useState(!1), [z, H] = se.useState(""), D = se.useRef(null), [W, V] = se.useState(o);
+    se.useImperativeHandle(N, () => D.current), se.useEffect(() => {
+      const $ = (j) => {
+        D.current && !D.current.contains(j.target) && F(!1);
       };
       return document.addEventListener("mousedown", $), () => document.removeEventListener("mousedown", $);
     }, []);
     const i = se.useCallback(
-      ($, A) => $.some(
-        (T) => me(T.value) === me(A) || me(T.label) === me(A)
+      ($, j) => $.some(
+        (T) => me(T.value) === me(j) || me(T.label) === me(j)
       ),
       []
-    ), y = se.useCallback(
-      ($, A) => {
-        const T = [...$], D = (ee) => {
+    ), v = se.useCallback(
+      ($, j) => {
+        const T = [...$], I = (ee) => {
           const ne = (ee ?? "").trim();
           ne && (i(T, ne) || T.push({ value: ne, label: ne }));
         };
-        return Array.isArray(A) ? A.forEach(D) : D(A), T;
+        return Array.isArray(j) ? j.forEach(I) : I(j), T;
       },
       [i]
     );
     se.useEffect(() => {
       V(($) => {
-        const A = [...o];
+        const j = [...o];
         return $.forEach((T) => {
-          !i(A, T.value) && !i(A, T.label) && A.push(T);
-        }), y(A, h);
+          !i(j, T.value) && !i(j, T.label) && j.push(T);
+        }), v(j, h);
       });
-    }, [o, h, y, i]);
+    }, [o, h, v, i]);
     const E = ($) => {
       if (m) {
-        const A = Array.isArray(h) ? h : [], T = A.includes($) ? A.filter((D) => D !== $) : [...A, $];
-        w?.(T);
+        const j = Array.isArray(h) ? h : [], T = j.includes($) ? j.filter((I) => I !== $) : [...j, $];
+        k?.(T);
       } else
-        w?.($), F(!1), H("");
+        k?.($), F(!1), H("");
     }, S = m ? null : W.find(($) => $.value === h), M = m ? W.filter(
       ($) => Array.isArray(h) && h.includes($.value)
-    ) : [], L = l && I ? W.filter(
-      ($) => $.label.toLowerCase().includes(I.toLowerCase())
-    ) : W, Q = !!k && !!l && !!I.trim() && !i(W, I), re = ($) => {
-      const A = $.trim();
-      if (!A) return;
-      const T = v?.(A) ?? {
-        value: A,
-        label: A
+    ) : [], L = l && z ? W.filter(
+      ($) => $.label.toLowerCase().includes(z.toLowerCase())
+    ) : W, Q = !!w && !!l && !!z.trim() && !i(W, z), re = ($) => {
+      const j = $.trim();
+      if (!j) return;
+      const T = y?.(j) ?? {
+        value: j,
+        label: j
       };
       if (i(W, T.value) || i(W, T.label)) {
         E(T.value), H(""), m || F(!1);
         return;
       }
-      V((D) => [...D, T]), E(T.value), H(""), m || F(!1);
+      V((I) => [...I, 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: z,
+        ref: D,
         className: p(
           "relative flex flex-col",
           s && "w-full",
-          b
+          x
         ),
-        ...j,
+        ...A,
         children: [
           t && /* @__PURE__ */ e(
             "label",
             {
               htmlFor: q,
-              onClick: () => F(!G),
+              onClick: () => F(!U),
               className: p(
                 "block text-sm font-medium mb-1",
-                B ? "text-error" : "text-default",
-                x
+                P ? "text-error" : "text-default",
+                b
               ),
               children: t
             }
           ),
           /* @__PURE__ */ d("div", { className: "relative", children: [
-            /* @__PURE__ */ e(
+            /* @__PURE__ */ d(
               "button",
               {
                 type: "button",
                 id: q,
-                onClick: () => F(!G),
+                onClick: () => F(!U),
                 className: p(
-                  "block w-full rounded-lg border transition-colors duration-200 text-left",
+                  "flex w-full items-center justify-between gap-2 rounded-lg border transition-colors duration-200 text-left",
                   "focus:outline-none focus:ring-0 focus:ring-offset-0",
                   "disabled:opacity-50 disabled:cursor-not-allowed",
                   "bg-module",
                   ct[n],
-                  B ? "border-error text-error focus:border-error focus:ring-error" : "border-neutral text-default",
+                  P ? "border-error text-error focus:border-error focus:ring-error" : "border-neutral text-default",
                   g
                 ),
-                children: /* @__PURE__ */ e("span", { className: "block truncate", children: X() })
+                children: [
+                  /* @__PURE__ */ e("span", { className: "truncate flex-1 min-w-0", children: X() }),
+                  /* @__PURE__ */ e(
+                    $e,
+                    {
+                      size: 16,
+                      className: p(
+                        "shrink-0 opacity-60 transition-transform duration-200",
+                        U && "rotate-180"
+                      )
+                    }
+                  )
+                ]
               }
             ),
-            G && /* @__PURE__ */ d("div", { className: "absolute z-10 mt-1 w-full rounded-md bg-module shadow-lg border border-neutral", children: [
+            U && /* @__PURE__ */ d("div", { className: "absolute z-10 mt-1 w-full rounded-md bg-module shadow-lg border border-neutral", children: [
               l && /* @__PURE__ */ e("div", { className: "p-2", children: /* @__PURE__ */ e(
                 "input",
                 {
                   type: "text",
                   placeholder: "Search...",
-                  value: I,
+                  value: z,
                   onChange: ($) => H($.target.value),
                   onKeyDown: ($) => {
-                    $.key === "Enter" && Q && ($.preventDefault(), re(I));
+                    $.key === "Enter" && Q && ($.preventDefault(), re(z));
                   },
                   className: p(
                     "w-full px-3 py-2 text-sm rounded-md border",
@@ -1009,10 +1073,10 @@ const ct = {
                     "px-4 py-2 text-sm cursor-pointer",
                     "text-primary hover:bg-neutral-container"
                   ),
-                  onClick: () => re(I),
+                  onClick: () => re(z),
                   children: [
                     "+: “",
-                    I.trim(),
+                    z.trim(),
                     "”"
                   ]
                 }
@@ -1023,13 +1087,13 @@ const ct = {
                   {
                     className: "px-4 py-2 text-sm text-muted cursor-pointer hover:bg-neutral-container",
                     onClick: () => {
-                      w?.(""), F(!1);
+                      k?.(""), F(!1);
                     },
                     children: u
                   }
                 ),
                 L.map(($) => {
-                  const A = m ? Array.isArray(h) && h.includes($.value) : h === $.value;
+                  const j = m ? Array.isArray(h) && h.includes($.value) : h === $.value;
                   return /* @__PURE__ */ e(
                     "li",
                     {
@@ -1038,14 +1102,14 @@ const ct = {
                         "px-4 py-2 text-sm cursor-pointer",
                         "text-default",
                         $.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-neutral-container",
-                        A && "font-semibold"
+                        j && "font-semibold"
                       ),
                       children: /* @__PURE__ */ d("div", { className: "flex items-center", children: [
                         m && /* @__PURE__ */ e(
                           "input",
                           {
                             type: "checkbox",
-                            checked: A,
+                            checked: j,
                             readOnly: !0,
                             className: "mr-3 h-4 w-4 rounded border-neutral [&:not(:checked)]:bg-[var(--base-input)] text-[#1a1a1a] focus:ring-primary"
                           }
@@ -1064,7 +1128,7 @@ const ct = {
             {
               className: p(
                 "mt-1 text-xs",
-                B ? "text-error" : "text-muted"
+                P ? "text-error" : "text-muted"
               ),
               children: r || a
             }
@@ -1089,13 +1153,13 @@ const it = {
     fullWidth: s = !1,
     loading: o = !1,
     containerClassName: u,
-    labelClassName: b,
-    className: x,
+    labelClassName: x,
+    className: b,
     id: g,
     rows: f = 4,
     ...l
   }, m) => {
-    const h = g || `textarea-${Math.random().toString(36).substr(2, 9)}`, w = !!r;
+    const h = g || `textarea-${Math.random().toString(36).substr(2, 9)}`, k = !!r;
     return /* @__PURE__ */ d("div", { className: p("flex flex-col", s && "w-full", u), children: [
       t && /* @__PURE__ */ e(
         "label",
@@ -1103,8 +1167,8 @@ const it = {
           htmlFor: h,
           className: p(
             "block text-sm font-medium mb-1",
-            w ? "text-error" : "text-default",
-            b
+            k ? "text-error" : "text-default",
+            x
           ),
           children: t
         }
@@ -1124,8 +1188,8 @@ const it = {
               // Size styles
               it[n],
               // State styles
-              w ? "border-error text-error focus:border-error focus:ring-error" : "border-neutral text-default",
-              x
+              k ? "border-error text-error focus:border-error focus:ring-error" : "border-neutral text-default",
+              b
             ),
             ...l
           }
@@ -1165,7 +1229,7 @@ const it = {
         {
           className: p(
             "mt-1 text-xs",
-            w ? "text-error" : "text-muted"
+            k ? "text-error" : "text-muted"
           ),
           children: r || a
         }
@@ -1193,22 +1257,22 @@ const dt = {
     fullWidth: s = !1,
     startIcon: o,
     endIcon: u,
-    loading: b = !1,
-    containerClassName: x,
+    loading: x = !1,
+    containerClassName: b,
     labelClassName: g,
     className: f,
     id: l,
     ...m
   }, h) => {
-    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: [
+    const k = l || `textfield-${Math.random().toString(36).substr(2, 9)}`, w = !!r;
+    return /* @__PURE__ */ d("div", { className: p("flex flex-col", s && "w-full", b), children: [
       t && /* @__PURE__ */ e(
         "label",
         {
-          htmlFor: w,
+          htmlFor: k,
           className: p(
             "block text-sm font-medium mb-1",
-            k ? "text-error" : "text-default",
+            w ? "text-error" : "text-default",
             g
           ),
           children: t
@@ -1221,7 +1285,7 @@ const dt = {
           "input",
           {
             ref: h,
-            id: w,
+            id: k,
             className: p(
               // Base styles
               "block w-full rounded-lg border transition-colors duration-200 bg-input",
@@ -1233,13 +1297,13 @@ const dt = {
               o && "pl-10",
               u && "pr-10",
               // State styles
-              k ? "border-error text-error focus:border-error focus:ring-error" : "border-neutral text-default focus:border-primary focus:ring-primary",
+              w ? "border-error text-error focus:border-error focus:ring-error" : "border-neutral text-default focus:border-primary focus:ring-primary",
               f
             ),
             ...m
           }
         ),
-        (u || b) && /* @__PURE__ */ e("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: b ? /* @__PURE__ */ d(
+        (u || x) && /* @__PURE__ */ e("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: x ? /* @__PURE__ */ d(
           "svg",
           {
             className: p("animate-spin text-muted", ge[n]),
@@ -1274,7 +1338,7 @@ const dt = {
         {
           className: p(
             "mt-1 text-xs",
-            k ? "text-error" : "text-muted"
+            w ? "text-error" : "text-muted"
           ),
           children: r || a
         }
@@ -1291,9 +1355,9 @@ const oe = ({
   onClick: s,
   className: o,
   "aria-label": u,
-  ...b
+  ...x
 }) => {
-  const x = typeof a == "number" ? a : ut(a), g = p(
+  const b = typeof a == "number" ? a : ut(a), g = p(
     "inline-block",
     // Color variants
     {
@@ -1314,7 +1378,7 @@ const oe = ({
     },
     o
   ), f = {
-    size: x,
+    size: b,
     className: g,
     onClick: n ? s : void 0,
     "aria-label": u,
@@ -1323,7 +1387,7 @@ const oe = ({
     onKeyDown: n ? (l) => {
       (l.key === "Enter" || l.key === " ") && (l.preventDefault(), s?.());
     } : void 0,
-    ...b
+    ...x
   };
   return /* @__PURE__ */ e(t, { ...f });
 };
@@ -1343,7 +1407,7 @@ function mt({
   tableRows: n = 8
 }) {
   return t ? /* @__PURE__ */ e("main", { className: "flex-1 bg-module p-6", children: /* @__PURE__ */ e("div", { className: "w-full max-w-6xl mx-auto animate-pulse", children: t }) }) : /* @__PURE__ */ e("main", { className: "flex-1 bg-module p-6", children: /* @__PURE__ */ d("div", { className: "w-full mx-auto space-y-6 animate-pulse", children: [
-    !a && /* @__PURE__ */ d($e, { children: [
+    !a && /* @__PURE__ */ d(we, { children: [
       /* @__PURE__ */ e("div", { className: "h-6 bg-neutral-container-emphasis rounded w-1/4" }),
       /* @__PURE__ */ d("div", { className: "space-y-2", children: [
         /* @__PURE__ */ e("div", { className: "h-4 bg-neutral-container-emphasis rounded w-3/4" }),
@@ -1362,12 +1426,12 @@ function mt({
         "div",
         {
           className: `grid grid-cols-${r} gap-2 p-3 border-t border-neutral`,
-          children: Array.from({ length: r }).map((u, b) => /* @__PURE__ */ e(
+          children: Array.from({ length: r }).map((u, x) => /* @__PURE__ */ e(
             "div",
             {
               className: "h-4 bg-neutral-container-emphasis rounded w-full"
             },
-            `cell-${o}-${b}`
+            `cell-${o}-${x}`
           ))
         },
         `row-${o}`
@@ -1383,61 +1447,61 @@ const ft = ({
   placement: s = "bottom-start",
   disabled: o = !1,
   className: u,
-  showCheck: b = !0,
-  header: x
+  showCheck: x = !0,
+  header: b
 }) => {
-  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 = (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));
+  const [g, f] = B(!1), [l, m] = B(null), [h, k] = B({ top: 0, left: 0 }), [w, y] = B({}), A = Z(null), N = Z(null), q = Z(null), P = Z(null);
+  G(() => {
+    const i = (v) => {
+      A.current && (!A.current.contains(v.target) || q.current && !q.current.contains(v.target)) && (f(!1), m(null), P.current && (clearTimeout(P.current), P.current = null));
     };
     return g && document.addEventListener("mousedown", i), () => {
       document.removeEventListener("mousedown", i);
     };
-  }, [g]), U(() => {
-    const i = (y) => {
-      y.key === "Escape" && (f(!1), m(null), B.current && (clearTimeout(B.current), B.current = null));
+  }, [g]), G(() => {
+    const i = (v) => {
+      v.key === "Escape" && (f(!1), m(null), P.current && (clearTimeout(P.current), P.current = null));
     };
     return g && document.addEventListener("keydown", i), () => {
       document.removeEventListener("keydown", i);
     };
-  }, [g]), U(() => {
-    if (l && j.current) {
-      const i = j.current.querySelector(
+  }, [g]), G(() => {
+    if (l && A.current) {
+      const i = A.current.querySelector(
         `[data-option-value="${l}"]`
       );
       if (i) {
-        const y = i.getBoundingClientRect();
-        w({
-          top: y.top,
-          left: y.right + 8
+        const v = i.getBoundingClientRect();
+        k({
+          top: v.top,
+          left: v.right + 8
         });
       }
     }
-  }, [l]), U(() => () => {
-    B.current && clearTimeout(B.current);
+  }, [l]), G(() => () => {
+    P.current && clearTimeout(P.current);
   }, []);
-  const G = (i) => {
+  const U = (i) => {
     if (i.stopPropagation(), !o) {
       if (!g) {
-        const y = N.current?.getBoundingClientRect();
-        if (y) {
+        const v = N.current?.getBoundingClientRect();
+        if (v) {
           const 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);
+          s.startsWith("bottom") ? S.top = v.bottom + 6 : S.bottom = window.innerHeight - v.top + 6, s.endsWith("start") ? S.left = v.left : S.right = window.innerWidth - v.right, y(S);
         }
       }
-      f(!g), m(null), B.current && (clearTimeout(B.current), B.current = null);
+      f(!g), m(null), P.current && (clearTimeout(P.current), P.current = 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);
+  }, F = (i, v, E) => {
+    i.stopPropagation(), !v.disabled && !v.divider && (!v.children || v.children.length === 0) && (n?.(v.value, E), f(!1), m(null));
+  }, z = (i) => {
+    P.current && (clearTimeout(P.current), P.current = null), i.children && i.children.length > 0 ? m(i.value) : m(null);
   }, H = (i) => {
-    i.children && i.children.length > 0 ? B.current = setTimeout(() => {
+    i.children && i.children.length > 0 ? P.current = setTimeout(() => {
       m(null);
     }, 150) : m(null);
-  }, z = (i, y, E) => {
-    i.stopPropagation(), !y.disabled && !y.divider && (n?.(y.value, E), f(!1), m(null));
+  }, D = (i, v, E) => {
+    i.stopPropagation(), !v.disabled && !v.divider && (n?.(v.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"
@@ -1448,7 +1512,7 @@ const ft = ({
   return /* @__PURE__ */ d(
     "div",
     {
-      ref: j,
+      ref: A,
       className: p(
         "relative flex flex-row items-center justify-center rounded-lg hover:bg-neutral-container",
         u
@@ -1458,7 +1522,7 @@ const ft = ({
           "button",
           {
             ref: N,
-            onClick: G,
+            onClick: U,
             disabled: o,
             className: p("inline-flex items-center justify-center", {
               "opacity-50 cursor-not-allowed": o
@@ -1466,16 +1530,16 @@ const ft = ({
             children: t
           }
         ),
-        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, y) => {
+        g && /* @__PURE__ */ e("div", { className: W, style: w, children: /* @__PURE__ */ d("div", { className: "p-2", children: [
+          b && (typeof b == "string" ? /* @__PURE__ */ e("div", { className: "text-xs font-medium text-muted uppercase tracking-wider px-3 py-2", children: b }) : b),
+          a.map((i, v) => {
             if (i.divider)
               return /* @__PURE__ */ e(
                 "div",
                 {
                   className: "border-t border-neutral my-2"
                 },
-                `divider-${y}`
+                `divider-${v}`
               );
             const E = i.children && i.children.length > 0, S = l === i.value;
             return /* @__PURE__ */ d("div", { className: "relative group", children: [
@@ -1484,7 +1548,7 @@ const ft = ({
                 {
                   "data-option-value": i.value,
                   onClick: (M) => F(M, i),
-                  onMouseEnter: () => I(i),
+                  onMouseEnter: () => z(i),
                   onMouseLeave: () => H(i),
                   disabled: i.disabled,
                   className: p(
@@ -1503,7 +1567,7 @@ 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: "✓" }),
+                      x && r === i.value && /* @__PURE__ */ e("span", { className: "h-4 w-4 text-success flex-shrink-0 text-sm font-bold", children: "✓" }),
                       E && /* @__PURE__ */ e("span", { className: "text-muted text-xs", children: "▶" })
                     ] })
                   ]
@@ -1519,10 +1583,10 @@ const ft = ({
                     left: `${h.left}px`
                   },
                   onMouseEnter: () => {
-                    B.current && (clearTimeout(B.current), B.current = null), m(i.value);
+                    P.current && (clearTimeout(P.current), P.current = null), m(i.value);
                   },
                   onMouseLeave: () => {
-                    B.current = setTimeout(() => {
+                    P.current = setTimeout(() => {
                       m(null);
                     }, 150);
                   },
@@ -1541,7 +1605,7 @@ const ft = ({
                     return /* @__PURE__ */ d(
                       "button",
                       {
-                        onClick: (re) => z(
+                        onClick: (re) => D(
                           re,
                           M,
                           i.value
@@ -1561,7 +1625,7 @@ const ft = ({
                               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: "✓" })
+                          x && Q && /* @__PURE__ */ e("span", { className: "h-4 w-4 text-success flex-shrink-0 text-sm font-bold", children: "✓" })
                         ]
                       },
                       M.value
@@ -1572,10 +1636,10 @@ const ft = ({
             ] }, i.value);
           }),
           (() => {
-            const i = a.reduce((y, E) => {
-              if (E.divider) return y;
+            const i = a.reduce((v, E) => {
+              if (E.divider) return v;
               const S = E.children ? E.children.filter((M) => !M.divider).length : 0;
-              return y + 1 + S;
+              return v + 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,
@@ -1677,7 +1741,7 @@ const ft = ({
       }
     )
   }
-), yt = () => /* @__PURE__ */ e(
+), vt = () => /* @__PURE__ */ e(
   "svg",
   {
     className: "h-4 w-4",
@@ -1694,7 +1758,7 @@ const ft = ({
       }
     )
   }
-), vt = () => /* @__PURE__ */ e(
+), yt = () => /* @__PURE__ */ e(
   "svg",
   {
     className: "h-4 w-4",
@@ -1711,7 +1775,7 @@ const ft = ({
       }
     )
   }
-), De = () => /* @__PURE__ */ e(
+), Ie = () => /* @__PURE__ */ e(
   "svg",
   {
     className: "h-4 w-4",
@@ -1733,7 +1797,7 @@ const ft = ({
     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(
-    ve,
+    ye,
     {
       size: "sm",
       value: t.value,
@@ -1747,7 +1811,7 @@ const ft = ({
       /* @__PURE__ */ e("span", { className: "text-default", children: t.multiSelect && Array.isArray(t.value) ? t.value?.map(
         (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, {}) })
+      /* @__PURE__ */ e("span", { className: "text-muted text-sm group-open:rotate-180 transition-transform", children: /* @__PURE__ */ e(Ie, {}) })
     ] }),
     /* @__PURE__ */ d("div", { className: "absolute z-10 left-0 mt-1 bg-module border border-neutral rounded-lg shadow-lvl-0 p-2 w-48", children: [
       t.options?.map((n) => /* @__PURE__ */ e(
@@ -1783,59 +1847,59 @@ const ft = ({
   searchPlaceholder: s = "Search...",
   filters: o = [],
   paginated: u = !1,
-  pageSizeOptions: b = [10, 25, 50, 100],
-  defaultPageSize: x = 10,
+  pageSizeOptions: x = [10, 25, 50, 100],
+  defaultPageSize: b = 10,
   actions: g = [],
   onRowClick: f,
   selectable: l = !1,
   selectedRows: m = [],
   onSelectionChange: h,
-  getRowKey: w = (G, F) => F,
-  emptyContent: k,
-  hoverable: v = !0,
-  bordered: j = !1,
+  getRowKey: k = (U, F) => F,
+  emptyContent: w,
+  hoverable: y = !0,
+  bordered: A = !1,
   striped: N = !1,
   className: q,
-  rowClassName: B
+  rowClassName: P
 }) => {
-  const [G, F] = P(""), [I, H] = P({
+  const [U, F] = B(""), [z, H] = B({
     column: null,
     direction: null
-  }), [z, W] = P({
+  }), [D, W] = B({
     page: 0,
-    pageSize: x
-  }), V = J(null), i = de(() => {
+    pageSize: b
+  }), V = Z(null), i = de(() => {
     let c = t;
-    if (n && G.trim()) {
+    if (n && U.trim()) {
       const C = a.filter(
         (R) => R.searchable !== !1
-      ), O = G.toLowerCase();
+      ), O = U.toLowerCase();
       c = c.filter((R) => C.some((_) => {
-        const Y = typeof _.accessor == "function" ? _.accessor(R) : R[_.accessor];
-        return String(Y || "").toLowerCase().includes(O);
+        const J = typeof _.accessor == "function" ? _.accessor(R) : R[_.accessor];
+        return String(J || "").toLowerCase().includes(O);
       }));
     }
     return o.forEach((C) => {
       C.value && C.value !== "all" && (c = c.filter((O) => {
-        const R = a.find((Y) => Y.id === C.id);
+        const R = a.find((J) => J.id === C.id);
         if (!R) return !0;
         const _ = typeof R.accessor == "function" ? R.accessor(O) : O[R.accessor];
         return String(_ || "") === C.value;
       }));
     }), c;
-  }, [t, G, a, n, o]), y = de(() => {
-    if (!I.column || !I.direction) return i;
-    const c = a.find((C) => C.id === I.column);
+  }, [t, U, a, n, o]), v = de(() => {
+    if (!z.column || !z.direction) return i;
+    const c = a.find((C) => C.id === z.column);
     return c ? [...i].sort((C, O) => {
       const R = typeof c.accessor == "function" ? c.accessor(C) : C[c.accessor], _ = typeof c.accessor == "function" ? c.accessor(O) : O[c.accessor];
-      let Y = 0;
-      return R < _ ? Y = -1 : R > _ && (Y = 1), I.direction === "desc" ? -Y : Y;
+      let J = 0;
+      return R < _ ? J = -1 : R > _ && (J = 1), z.direction === "desc" ? -J : J;
     }) : i;
-  }, [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(
+  }, [i, z, a]), E = de(() => {
+    if (!u) return v;
+    const c = D.page * D.pageSize, C = c + D.pageSize;
+    return v.slice(c, C);
+  }, [v, D, 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 });
     },
@@ -1847,32 +1911,32 @@ const ft = ({
   }, []), Q = ae(
     (c, C) => {
       if (!h) return;
-      const O = w(c, 0);
-      m.map((R, _) => w(R, _)), h(C ? [...m, c] : m.filter(
-        (R, _) => w(m[_], _) !== O
+      const O = k(c, 0);
+      m.map((R, _) => k(R, _)), h(C ? [...m, c] : m.filter(
+        (R, _) => k(m[_], _) !== O
       ));
     },
-    [m, h, w]
+    [m, h, k]
   ), re = ae(
     (c) => {
       h && h(c ? [...E] : []);
     },
     [E, h]
   );
-  U(() => {
+  G(() => {
     W((c) => ({ ...c, page: 0 }));
-  }, [G, I]), U(() => {
+  }, [U, z]), G(() => {
     W((c) => ({ ...c, page: 0 }));
   }, [o.map((c) => c.value).join(",")]);
-  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);
+  const X = v.length, $ = Math.ceil(X / D.pageSize), j = D.page * D.pageSize + 1, T = Math.min(j + D.pageSize - 1, X), I = E.length > 0 && E.every((c) => {
+    const C = k(c, 0);
     return m.some(
-      (O, R) => w(O, R) === C
+      (O, R) => k(O, R) === C
     );
   }), ee = E.some((c) => {
-    const C = w(c, 0);
+    const C = k(c, 0);
     return m.some(
-      (O, R) => w(O, R) === C
+      (O, R) => k(O, R) === C
     );
   }), ne = p(
     "w-full text-sm leading-5 text-[var(--text-default)] border-collapse",
@@ -1880,7 +1944,7 @@ const ft = ({
   ), K = p("bg-[var(--base-module)]"), le = p(
     "text-[var(--text-default)] p-3 border-b border-[var(--neutral-border)]"
   ), he = p("h-12", {
-    "hover:bg-[var(--neutral-container)] dark:hover:bg-[var(--neutral-container-emphasis)]": v,
+    "hover:bg-[var(--neutral-container)] dark:hover:bg-[var(--neutral-container-emphasis)]": y,
     "cursor-pointer": f
   });
   return /* @__PURE__ */ d("div", { className: "space-y-4", children: [
@@ -1890,7 +1954,7 @@ const ft = ({
         ue,
         {
           placeholder: s,
-          value: G,
+          value: U,
           onChange: (c) => F(c.target.value),
           startIcon: /* @__PURE__ */ e(ht, {}),
           className: "max-w-sm"
@@ -1912,9 +1976,9 @@ const ft = ({
             "input",
             {
               type: "checkbox",
-              checked: D,
+              checked: I,
               ref: (c) => {
-                c && (c.indeterminate = ee && !D);
+                c && (c.indeterminate = ee && !I);
               },
               onChange: (c) => re(c.target.checked),
               className: "rounded border-neutral [&:not(:checked)]:bg-[var(--base-input)] text-[#1a1a1a]"
@@ -1945,19 +2009,19 @@ const ft = ({
                   {
                     className: p(
                       "flex flex-col opacity-0 group-hover:opacity-100 transition-opacity",
-                      I.column === c.id && "opacity-100"
+                      z.column === c.id && "opacity-100"
                     ),
                     children: [
                       /* @__PURE__ */ e(
                         pt,
                         {
-                          active: I.column === c.id && I.direction === "asc"
+                          active: z.column === c.id && z.direction === "asc"
                         }
                       ),
                       /* @__PURE__ */ e(
                         xt,
                         {
-                          active: I.column === c.id && I.direction === "desc"
+                          active: z.column === c.id && z.direction === "desc"
                         }
                       )
                     ]
@@ -1977,11 +2041,11 @@ const ft = ({
               le,
               "text-center py-8 text-muted"
             ),
-            children: k || "No data available"
+            children: w || "No data available"
           }
         ) }) : E.map((c, C) => {
-          const O = w(c, C), R = m.some(
-            (_, Y) => w(_, Y) === O
+          const O = k(c, C), R = m.some(
+            (_, J) => k(_, J) === O
           );
           return /* @__PURE__ */ d(
             "tr",
@@ -1989,7 +2053,7 @@ const ft = ({
               className: p(
                 he,
                 { "bg-accent-container": R },
-                B?.(c, C)
+                P?.(c, C)
               ),
               onClick: (_) => {
                 _.stopPropagation(), f?.(c, C);
@@ -2007,7 +2071,7 @@ const ft = ({
                   }
                 ) }),
                 a.map((_) => {
-                  const Y = typeof _.accessor == "function" ? _.accessor(c) : c[_.accessor];
+                  const J = typeof _.accessor == "function" ? _.accessor(c) : c[_.accessor];
                   return /* @__PURE__ */ e(
                     "td",
                     {
@@ -2018,7 +2082,7 @@ const ft = ({
                         "sticky left-0 bg-module": _.sticky === "left",
                         "sticky right-0 bg-module": _.sticky === "right"
                       }),
-                      children: _.cell ? _.cell(Y, c, C) : String(Y || "")
+                      children: _.cell ? _.cell(J, c, C) : String(J || "")
                     },
                     _.id
                   );
@@ -2028,7 +2092,7 @@ const ft = ({
                   {
                     trigger: /* @__PURE__ */ d("div", { className: "inline-flex items-center gap-1 px-2 py-1 text-sm text-muted hover:text-default", children: [
                       /* @__PURE__ */ e("span", { children: "Options" }),
-                      /* @__PURE__ */ e(De, {})
+                      /* @__PURE__ */ e(Ie, {})
                     ] }),
                     options: g.map((_) => ({
                       value: _.id,
@@ -2037,10 +2101,10 @@ const ft = ({
                       disabled: _.disabled?.(c)
                     })),
                     onSelect: (_) => {
-                      const Y = g.find(
+                      const J = g.find(
                         (pe) => pe.id === _
                       );
-                      Y && Y.onClick(c, C);
+                      J && J.onClick(c, C);
                     },
                     placement: "bottom-end"
                   }
@@ -2056,7 +2120,7 @@ const ft = ({
       /* @__PURE__ */ d("div", { className: "flex items-center gap-4", children: [
         /* @__PURE__ */ d("span", { className: "text-sm text-muted", children: [
           "Showing ",
-          A,
+          j,
           " to ",
           T,
           " of ",
@@ -2068,10 +2132,10 @@ const ft = ({
           /* @__PURE__ */ e(
             "select",
             {
-              value: z.pageSize,
+              value: D.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))
+              children: x.map((c) => /* @__PURE__ */ e("option", { value: c, children: c }, c))
             }
           )
         ] })
@@ -2083,9 +2147,9 @@ const ft = ({
             size: "sm",
             variant: "ghost",
             onClick: () => M(0),
-            disabled: z.page === 0,
+            disabled: D.page === 0,
             iconOnly: !0,
-            children: /* @__PURE__ */ e(yt, {})
+            children: /* @__PURE__ */ e(vt, {})
           }
         ),
         /* @__PURE__ */ e(
@@ -2093,15 +2157,15 @@ const ft = ({
           {
             size: "sm",
             variant: "ghost",
-            onClick: () => M(z.page - 1),
-            disabled: z.page === 0,
+            onClick: () => M(D.page - 1),
+            disabled: D.page === 0,
             iconOnly: !0,
             children: /* @__PURE__ */ e(bt, {})
           }
         ),
         /* @__PURE__ */ d("span", { className: "px-3 py-1 text-sm text-muted", children: [
           "Page ",
-          z.page + 1,
+          D.page + 1,
           " of ",
           $
         ] }),
@@ -2110,8 +2174,8 @@ const ft = ({
           {
             size: "sm",
             variant: "ghost",
-            onClick: () => M(z.page + 1),
-            disabled: z.page >= $ - 1,
+            onClick: () => M(D.page + 1),
+            disabled: D.page >= $ - 1,
             iconOnly: !0,
             children: /* @__PURE__ */ e(gt, {})
           }
@@ -2122,45 +2186,45 @@ const ft = ({
             size: "sm",
             variant: "ghost",
             onClick: () => M($ - 1),
-            disabled: z.page >= $ - 1,
+            disabled: D.page >= $ - 1,
             iconOnly: !0,
-            children: /* @__PURE__ */ e(vt, {})
+            children: /* @__PURE__ */ e(yt, {})
           }
         )
       ] })
     ] })
   ] });
-}, wt = Ge(null), or = ({
+}, wt = Ue(null), or = ({
   items: t,
   activeTab: a,
   onTabChange: r,
   className: n
 }) => {
-  const [s, o] = P(t[0]?.id || ""), u = a || s, b = (x) => {
-    r ? r(x) : o(x);
+  const [s, o] = B(t[0]?.id || ""), u = a || s, x = (b) => {
+    r ? r(b) : o(b);
   };
-  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(
+  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((b) => /* @__PURE__ */ e(
     "button",
     {
-      onClick: () => !x.disabled && b(x.id),
-      disabled: x.disabled,
+      onClick: () => !b.disabled && x(b.id),
+      disabled: b.disabled,
       className: p(
         "border-b-2 py-2 px-1 text-sm font-medium transition-colors duration-200",
         {
-          "border-primary text-primary": u === x.id,
-          "border-transparent text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300": u !== x.id && !x.disabled,
-          "border-transparent text-neutral-300 cursor-not-allowed dark:text-neutral-600": x.disabled
+          "border-primary text-primary": u === b.id,
+          "border-transparent text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300": u !== b.id && !b.disabled,
+          "border-transparent text-neutral-300 cursor-not-allowed dark:text-neutral-600": b.disabled
         }
       ),
       children: /* @__PURE__ */ d("span", { className: "flex items-center gap-2", children: [
-        x.label,
-        x.badge && /* @__PURE__ */ e("span", { className: p(
+        b.label,
+        b.badge && /* @__PURE__ */ e("span", { className: p(
           "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium",
-          u === x.id ? "bg-primary/10 text-primary" : "bg-neutral-100 text-neutral-600 dark:bg-neutral-800 dark:text-neutral-400"
-        ), children: x.badge })
+          u === b.id ? "bg-primary/10 text-primary" : "bg-neutral-100 text-neutral-600 dark:bg-neutral-800 dark:text-neutral-400"
+        ), children: b.badge })
       ] })
     },
-    x.id
+    b.id
   )) }) });
 }, kt = ({
   items: t,
@@ -2171,14 +2235,14 @@ const ft = ({
   size: o = "md",
   className: u
 }) => {
-  const [b, x] = P(
+  const [x, b] = B(
     a || r || t[0]?.id || ""
-  ), g = r || b, f = (k) => {
-    n ? n(k) : x(k);
+  ), g = r || x, f = (w) => {
+    n ? n(w) : b(w);
   }, l = {
     activeTab: g,
     setActiveTab: f
-  }, m = t.find((k) => k.id === g), h = p(
+  }, m = t.find((w) => w.id === g), h = p(
     "flex",
     {
       "border-b border-neutral-200 dark:border-neutral-700 px-2": s === "default" || s === "underline",
@@ -2187,8 +2251,8 @@ const ft = ({
       "space-x-8": s === "default" || s === "underline"
     },
     u
-  ), w = (k, v) => {
-    const j = "transition-colors duration-200 font-medium", N = {
+  ), k = (w, y) => {
+    const A = "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"
@@ -2199,36 +2263,36 @@ const ft = ({
       "rounded-md": s === "pills",
       // Underline variant
       "border-b-2 pb-2": s === "underline"
-    }, B = {
-      "opacity-50 cursor-not-allowed": k.disabled,
-      "cursor-pointer": !k.disabled
-    }, G = v ? {
+    }, P = {
+      "opacity-50 cursor-not-allowed": w.disabled,
+      "cursor-pointer": !w.disabled
+    }, U = y ? {
       "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 ? {
+    } : {}, F = !y && !w.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, F);
+    return p(A, N, q, P, U, F);
   };
   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(
+    /* @__PURE__ */ e("div", { className: h, role: "tablist", children: t.map((w) => /* @__PURE__ */ e(
       "button",
       {
         type: "button",
         role: "tab",
-        "aria-selected": g === k.id,
-        "aria-controls": `tabpanel-${k.id}`,
-        disabled: k.disabled,
-        onClick: () => !k.disabled && f(k.id),
-        className: w(k, g === k.id),
+        "aria-selected": g === w.id,
+        "aria-controls": `tabpanel-${w.id}`,
+        disabled: w.disabled,
+        onClick: () => !w.disabled && f(w.id),
+        className: k(w, g === w.id),
         children: /* @__PURE__ */ d("span", { className: "flex items-center gap-2", children: [
-          k.label,
-          k.badge && /* @__PURE__ */ e("span", { className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300", children: k.badge })
+          w.label,
+          w.badge && /* @__PURE__ */ e("span", { className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300", children: w.badge })
         ] })
       },
-      k.id
+      w.id
     )) }),
     m?.content && /* @__PURE__ */ e(
       "div",
@@ -2256,23 +2320,23 @@ function St({
   closeOnBackdropClick: s = !0,
   closeOnEscape: o = !0,
   className: u,
-  backdropClassName: b,
-  children: x,
+  backdropClassName: x,
+  children: b,
   footer: g,
   showCloseButton: f = !0
 }) {
-  const l = J(null), m = J(null);
-  U(() => {
+  const l = Z(null), m = Z(null);
+  G(() => {
     if (!t || !o) return;
-    const w = (k) => {
-      k.key === "Escape" && a();
+    const k = (w) => {
+      w.key === "Escape" && a();
     };
-    return document.addEventListener("keydown", w), () => document.removeEventListener("keydown", w);
-  }, [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 = ""), () => {
+    return document.addEventListener("keydown", k), () => document.removeEventListener("keydown", k);
+  }, [t, o, a]), G(() => (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) => {
-    s && w.target === w.currentTarget && a();
+  const h = (k) => {
+    s && k.target === k.currentTarget && a();
   };
   return t ? /* @__PURE__ */ e(
     "div",
@@ -2281,7 +2345,7 @@ function St({
         "fixed inset-0 z-50 flex items-center justify-center p-4",
         "bg-black/20",
         // 'animate-fade-in',
-        b
+        x
       ),
       onClick: h,
       children: /* @__PURE__ */ d(
@@ -2319,7 +2383,7 @@ function St({
                 }
               )
             ] }),
-            /* @__PURE__ */ e("div", { className: "p-6", children: x }),
+            /* @__PURE__ */ e("div", { className: "p-6", children: b }),
             g && /* @__PURE__ */ e("div", { className: "px-6 py-4", children: g })
           ]
         }
@@ -2327,7 +2391,7 @@ function St({
     }
   ) : null;
 }
-const Z = ({
+const Y = ({
   variant: t = "body",
   size: a = "md",
   weight: r = "normal",
@@ -2335,14 +2399,14 @@ const Z = ({
   align: s = "left",
   truncate: o = !1,
   italic: u = !1,
-  underline: b = !1,
-  lineHeight: x = "normal",
+  underline: x = !1,
+  lineHeight: b = "normal",
   as: g,
   className: f,
   children: l,
   ...m
 }) => {
-  const h = g || Lt(t), w = p(
+  const h = g || Lt(t), k = p(
     // Base styles
     "font-primary",
     // Variant styles
@@ -2393,19 +2457,19 @@ const Z = ({
     },
     // Line height (override variant line heights)
     t === "body" && {
-      "leading-tight": x === "tight",
-      "leading-normal": x === "normal",
-      "leading-relaxed": x === "relaxed"
+      "leading-tight": b === "tight",
+      "leading-normal": b === "normal",
+      "leading-relaxed": b === "relaxed"
     },
     // Text decorations
     {
       italic: u,
-      underline: b,
+      underline: x,
       truncate: o
     },
     f
   );
-  return /* @__PURE__ */ e(h, { className: w, ...m, children: l });
+  return /* @__PURE__ */ e(h, { className: k, ...m, children: l });
 };
 function Lt(t) {
   return {
@@ -2423,46 +2487,46 @@ const Et = ({
   error: s,
   disabled: o,
   accept: u,
-  onListFiles: b,
-  onListMounts: x,
+  onListFiles: x,
+  onListMounts: b,
   onUploadFile: g,
   onDownloadFile: f,
   onRegisterFile: l
 }) => {
-  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(
+  const [m, h] = B(!1), [k, w] = B([]), [y, A] = B(null), [N, q] = B("/"), [P, U] = B([]), [F, z] = B(!1), [H, D] = B(""), [W, V] = B(
     typeof t == "object" ? t : null
-  ), [i, y] = P(!1), [E, S] = P(""), M = J(null);
-  U(() => {
+  ), [i, v] = B(!1), [E, S] = B(""), M = Z(null);
+  G(() => {
     m && L();
-  }, [m]), U(() => {
-    m && v && Q();
-  }, [m, v, N, H]);
+  }, [m]), G(() => {
+    m && y && Q();
+  }, [m, y, N, H]);
   const L = async () => {
-    I(!0);
+    z(!0);
     try {
-      const c = await x?.();
-      c?.data && k(c.data);
+      const c = await b?.();
+      c?.data && w(c.data);
     } catch (c) {
       console.error("Failed to load mounts", c);
     } finally {
-      I(!1);
+      z(!1);
     }
   }, Q = async () => {
-    if (v) {
-      I(!0);
+    if (y) {
+      z(!0);
       try {
-        const c = await b?.({ mountId: v.id, name: H, path: N });
-        c?.data && G(c.data);
+        const c = await x?.({ mountId: y.id, name: H, path: N });
+        c?.data && U(c.data);
       } catch (c) {
         console.error("Failed to load files", c);
       } finally {
-        I(!1);
+        z(!1);
       }
     }
   }, re = async (c) => {
     const C = c.target.files?.[0];
     if (C) {
-      I(!0);
+      z(!0);
       try {
         const O = await C.arrayBuffer(), R = new Uint8Array(O), _ = {
           id: `local-${Date.now()}`,
@@ -2479,19 +2543,19 @@ const Et = ({
       } catch (O) {
         console.error("Local file selection failed", O);
       } finally {
-        I(!1);
+        z(!1);
       }
     }
   }, X = async (c) => {
     const C = c.target.files?.[0];
-    if (!(!C || !v)) {
-      I(!0);
+    if (!(!C || !y)) {
+      z(!0);
       try {
         const O = await C.arrayBuffer(), R = await g?.({
           file: new Uint8Array(O),
           filename: C.name,
           mimeType: C.type || "application/octet-stream",
-          mountId: v.id,
+          mountId: y.id,
           path: N
         });
         if (R?.data) {
@@ -2501,12 +2565,12 @@ const Et = ({
       } catch (O) {
         console.error("Upload failed", O);
       } finally {
-        I(!1);
+        z(!1);
       }
     }
   }, $ = async () => {
-    if (!(!E || !v)) {
-      I(!0);
+    if (!(!E || !y)) {
+      z(!0);
       try {
         const c = `${N}${E}/`;
         l && (await l({
@@ -2515,59 +2579,59 @@ const Et = ({
           path: N,
           mimeType: "application/x-directory",
           size: 0,
-          mountId: v.id,
+          mountId: y.id,
           providerKey: c,
           ownerId: "me"
-        }), await Q()), y(!1), S("");
+        }), await Q()), v(!1), S("");
       } catch (c) {
         console.error("Failed to create folder", c);
       } finally {
-        I(!1);
+        z(!1);
       }
     }
-  }, A = async (c) => {
-    I(!0);
+  }, j = async (c) => {
+    z(!0);
     try {
       const C = await f?.(c.id);
       V(c), a(c, C), h(!1);
     } catch (C) {
       console.error("Failed to download file", C);
     } finally {
-      I(!1);
+      z(!1);
     }
   }, T = (c) => {
     c.stopPropagation(), V(null), a(null);
-  }, D = de(() => {
+  }, I = de(() => {
     const c = /* @__PURE__ */ new Set(), C = [];
-    return B.forEach((O) => {
+    return P.forEach((O) => {
       if (O.type === "folder") {
         O.path === N && c.add(O.name);
         return;
       }
-      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);
+      const R = O.providerKey || O.name, J = (N ? R.substring(N.length) : R).split("/").filter((pe) => pe !== "");
+      J.length > 1 ? c.add(J[0]) : J.length === 1 && C.push(O);
     }), {
       folders: Array.from(c).sort(),
       files: C.sort((O, R) => O.name.localeCompare(R.name))
     };
-  }, [B, N]), ee = (c) => {
+  }, [P, N]), ee = (c) => {
     q((C) => `${C}${c}/`);
   }, ne = () => {
     const c = N.split("/").filter((C) => C !== "");
     c.pop(), c.length === 0 ? q("/") : q(`${c.join("/")}/`);
   }, K = de(() => {
-    const c = D.folders.map((C) => ({
+    const c = I.folders.map((C) => ({
       id: `folder-${C}`,
       name: C,
       type: "folder"
     }));
-    return D.files.forEach((C) => {
+    return I.files.forEach((C) => {
       c.push({
         ...C,
         type: "file"
       });
     }), c;
-  }, [D]), le = [
+  }, [I]), le = [
     {
       id: "name",
       header: "Name",
@@ -2576,7 +2640,7 @@ const Et = ({
         /* @__PURE__ */ e(
           oe,
           {
-            icon: C.type === "folder" ? Ce : xe,
+            icon: C.type === "folder" ? Se : xe,
             size: "sm",
             color: C.type === "folder" ? "warning" : "secondary"
           }
@@ -2605,7 +2669,7 @@ const Et = ({
           size: "sm",
           variant: "outline",
           onClick: (O) => {
-            O.stopPropagation(), C.type === "folder" ? ee(C.name) : A(C);
+            O.stopPropagation(), C.type === "folder" ? ee(C.name) : j(C);
           },
           loading: F && C.type === "file" && W?.id === C.id,
           children: C.type === "folder" ? "Open" : "Select"
@@ -2618,7 +2682,7 @@ const Et = ({
       header: "Mount Name",
       accessor: "name",
       cell: (c) => /* @__PURE__ */ d("div", { className: "flex items-center gap-2 font-medium", children: [
-        /* @__PURE__ */ e(oe, { icon: ke, size: "sm", color: "primary" }),
+        /* @__PURE__ */ e(oe, { icon: Ce, size: "sm", color: "primary" }),
         /* @__PURE__ */ e("span", { children: c })
       ] })
     },
@@ -2627,11 +2691,11 @@ const Et = ({
       header: "",
       accessor: "id",
       align: "right",
-      cell: (c, C) => /* @__PURE__ */ e(te, { size: "sm", variant: "outline", onClick: () => j(C), children: "Open" })
+      cell: (c, C) => /* @__PURE__ */ e(te, { size: "sm", variant: "outline", onClick: () => A(C), children: "Open" })
     }
   ];
   return /* @__PURE__ */ d("div", { className: "space-y-1", children: [
-    r && /* @__PURE__ */ e(Z, { variant: "label", size: "sm", weight: "medium", children: r }),
+    r && /* @__PURE__ */ e(Y, { variant: "label", size: "sm", weight: "medium", children: r }),
     /* @__PURE__ */ d(
       "div",
       {
@@ -2643,7 +2707,7 @@ const Et = ({
           o && "opacity-50 cursor-not-allowed bg-module-subtle"
         ),
         children: [
-          /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: /* @__PURE__ */ e(oe, { icon: W ? xe : ke, color: W ? "primary" : "secondary" }) }),
+          /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: /* @__PURE__ */ e(oe, { icon: W ? xe : Ce, 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",
@@ -2656,15 +2720,15 @@ const Et = ({
         ]
       }
     ),
-    s && /* @__PURE__ */ e(Z, { variant: "body", size: "xs", className: "text-error", children: s }),
+    s && /* @__PURE__ */ e(Y, { variant: "body", size: "xs", className: "text-error", children: s }),
     /* @__PURE__ */ e(
       St,
       {
         open: m,
         onClose: () => {
-          h(!1), j(null), q("/"), y(!1);
+          h(!1), A(null), q("/"), v(!1);
         },
-        title: v ? `Explorer: ${v.name}` : "Select Storage Mount",
+        title: y ? `Explorer: ${y.name}` : "Select Storage Mount",
         size: "lg",
         children: /* @__PURE__ */ e(
           kt,
@@ -2674,7 +2738,7 @@ const Et = ({
               {
                 id: "remote",
                 label: "Platform Storage",
-                content: /* @__PURE__ */ e("div", { className: "space-y-4", children: v ? /* @__PURE__ */ d($e, { children: [
+                content: /* @__PURE__ */ e("div", { className: "space-y-4", children: y ? /* @__PURE__ */ d(we, { children: [
                   /* @__PURE__ */ d("div", { className: "flex flex-wrap items-center gap-2", children: [
                     /* @__PURE__ */ e(
                       te,
@@ -2682,9 +2746,9 @@ const Et = ({
                         variant: "ghost",
                         size: "sm",
                         onClick: () => {
-                          N && N !== "/" ? ne() : j(null);
+                          N && N !== "/" ? ne() : A(null);
                         },
-                        leftIcon: /* @__PURE__ */ e(oe, { icon: we, size: "xs" }),
+                        leftIcon: /* @__PURE__ */ e(oe, { icon: ke, size: "xs" }),
                         children: N ? "Back" : "Back to Mounts"
                       }
                     ),
@@ -2694,7 +2758,7 @@ const Et = ({
                       {
                         placeholder: "Search...",
                         value: H,
-                        onChange: (c) => z(c.target.value),
+                        onChange: (c) => D(c.target.value),
                         startIcon: /* @__PURE__ */ e(Te, { size: 14 }),
                         fullWidth: !0,
                         size: "sm"
@@ -2706,7 +2770,7 @@ const Et = ({
                         {
                           variant: "outline",
                           size: "sm",
-                          onClick: () => y(!0),
+                          onClick: () => v(!0),
                           leftIcon: /* @__PURE__ */ e(oe, { icon: Ve, size: "xs" }),
                           children: "New Folder"
                         }
@@ -2735,7 +2799,7 @@ const Et = ({
                     ] })
                   ] }),
                   i && /* @__PURE__ */ d("div", { className: "flex items-center gap-2 p-3 bg-module-subtle rounded-lg border border-neutral", children: [
-                    /* @__PURE__ */ e(oe, { icon: Ce, size: "sm", color: "warning" }),
+                    /* @__PURE__ */ e(oe, { icon: Se, size: "sm", color: "warning" }),
                     /* @__PURE__ */ e(
                       ue,
                       {
@@ -2747,7 +2811,7 @@ const Et = ({
                       }
                     ),
                     /* @__PURE__ */ e(te, { size: "sm", onClick: $, loading: F, children: "Create" }),
-                    /* @__PURE__ */ e(te, { size: "sm", variant: "ghost", onClick: () => y(!1), children: "Cancel" })
+                    /* @__PURE__ */ e(te, { size: "sm", variant: "ghost", onClick: () => v(!1), children: "Cancel" })
                   ] }),
                   /* @__PURE__ */ e("div", { className: "max-h-[400px] overflow-auto rounded-lg border border-neutral", children: /* @__PURE__ */ e(
                     Le,
@@ -2756,17 +2820,17 @@ const Et = ({
                       columns: le,
                       loading: F,
                       emptyContent: "This folder is empty",
-                      onRowClick: (c) => c.type === "folder" ? ee(c.name) : A(c)
+                      onRowClick: (c) => c.type === "folder" ? ee(c.name) : j(c)
                     }
                   ) })
                 ] }) : /* @__PURE__ */ e("div", { className: "max-h-[400px] overflow-auto rounded-lg border border-neutral", children: /* @__PURE__ */ e(
                   Le,
                   {
-                    data: w,
+                    data: k,
                     columns: he,
                     loading: F,
                     emptyContent: "No storage mounts configured",
-                    onRowClick: (c) => j(c)
+                    onRowClick: (c) => A(c)
                   }
                 ) }) })
               },
@@ -2775,8 +2839,8 @@ const Et = ({
                 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: 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: [
+                  /* @__PURE__ */ e(Y, { variant: "label", size: "lg", weight: "semibold", children: "Select a file from your computer" }),
+                  /* @__PURE__ */ d(Y, { 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 ",
                     /* @__PURE__ */ e("strong", { children: "not" }),
                     " be uploaded to platform storage."
@@ -2820,10 +2884,10 @@ function Mt({
   size: s = "md",
   placeholder: o,
   templatePlaceholder: u,
-  showTemplate: b = !0
+  showTemplate: x = !0
 }) {
-  const [x, g] = P([]);
-  U(() => {
+  const [b, g] = B([]);
+  G(() => {
     let l = !0;
     return Promise.resolve(r?.()).then((m) => {
       l && m && g(m.data ?? []);
@@ -2840,12 +2904,12 @@ function Mt({
         size: s,
         fullWidth: !0,
         value: f.folderId ?? "",
-        options: x.map((l) => ({ value: l.id, label: l.name })),
+        options: b.map((l) => ({ value: l.id, label: l.name })),
         placeholder: o ?? "Select a folder",
         onChange: (l) => a?.({ ...f, folderId: l })
       }
     ),
-    b && /* @__PURE__ */ e(
+    x && /* @__PURE__ */ e(
       ue,
       {
         size: s,
@@ -2867,8 +2931,8 @@ 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];
+    const x = n[u], b = o[x];
+    o[x] = b && typeof b == "object" ? Array.isArray(b) ? [...b] : { ...b } : {}, o = o[x];
   }
   return o[n[n.length - 1]] = r, s;
 }
@@ -2890,42 +2954,42 @@ const cr = ({
   onChange: s,
   transform: o,
   validate: u,
-  submitButton: b = { label: "Submit", variant: "primary" },
-  cancelButton: x = { label: "Cancel", variant: "outline" },
+  submitButton: x = { label: "Submit", variant: "primary" },
+  cancelButton: b = { label: "Cancel", variant: "outline" },
   showButtons: g = !0,
   layout: f = "vertical",
   size: l = "md",
   loading: m = !1,
   className: h,
-  ref: w,
-  sdk: k
+  ref: k,
+  sdk: w
 }) => {
-  const [v, j] = P(a || {}), [N, q] = P({}), [B, G] = P({});
-  U(() => {
-    a && j({ ...a });
+  const [y, A] = B(a || {}), [N, q] = B({}), [P, U] = B({});
+  G(() => {
+    a && A({ ...a });
   }, [a]);
   const F = ae(
-    (i, y, E) => {
+    (i, v, E) => {
       const S = t.flatMap((M) => M.items).find((M) => M.name === i);
       if (!S) return null;
-      if (S.required && (y == null || y === ""))
+      if (S.required && (v == null || v === ""))
         return `${S.label} is required`;
       if (S.type === "array") {
-        if (S.required && (!y || y.length === 0))
+        if (S.required && (!v || v.length === 0))
           return `${S.label} cannot be empty.`;
-        if (y && !Array.isArray(y))
+        if (v && !Array.isArray(v))
           return `${S.label} must be an array.`;
-        if (Array.isArray(y) && S.arrayFields) {
+        if (Array.isArray(v) && S.arrayFields) {
           const M = [];
           let L = !1;
-          if (y.forEach((Q, re) => {
+          if (v.forEach((Q, re) => {
             const X = {};
             for (const $ of S.arrayFields) {
-              const A = Q?.[$.name];
-              if ($.required && (A == null || A === ""))
+              const j = Q?.[$.name];
+              if ($.required && (j == null || j === ""))
                 X[$.name] = `${$.label} is required`, L = !0;
               else if ($.validator) {
-                const T = $.validator(A, Q);
+                const T = $.validator(j, Q);
                 T && (X[$.name] = T, L = !0);
               }
             }
@@ -2934,52 +2998,52 @@ const cr = ({
             return JSON.stringify(M);
         }
       }
-      return S.validator ? S.validator(y, E) : null;
+      return S.validator ? S.validator(v, E) : null;
     },
     [t]
-  ), I = ae(
-    (i, y) => {
+  ), z = ae(
+    (i, v) => {
       let E = $t(
-        v,
+        y,
         i,
-        y
+        v
       );
-      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);
+      t.flatMap((L) => L.items).find((L) => L.name === i)?.removeIfEmpty && (v == null || v === "") && (E = Tt(E, i)), A(E), U((L) => ({ ...L, [i]: !0 }));
+      const M = F(i, v, E);
       q((L) => ({
         ...L,
         [i]: M || ""
       })), s?.(E, i);
     },
-    [v, t, F, s]
+    [y, t, F, s]
   ), H = ae(
     async (i) => {
       if (console.log("handleSubmit"), i.preventDefault(), m) return;
-      const y = {}, E = t.flatMap((M) => M.items);
+      const v = {}, E = t.flatMap((M) => M.items);
       for (const M of E) {
-        if (M.hidden || M.conditional && !M.conditional(v))
+        if (M.hidden || M.conditional && !M.conditional(y))
           continue;
         const L = F(
           M.name,
-          Ee(v, M.name),
-          v
+          Ee(y, M.name),
+          y
         );
-        L && (y[M.name] = L);
+        L && (v[M.name] = L);
       }
       if (u) {
-        const M = u(v);
-        M && Object.assign(y, M);
+        const M = u(y);
+        M && Object.assign(v, M);
       }
-      if (q(y), console.log("newErrors", y), Object.keys(y).some((M) => y[M]))
+      if (q(v), console.log("newErrors", v), Object.keys(v).some((M) => v[M]))
         return;
-      const S = o ? o(v) : v;
-      await r?.(v, S);
+      const S = o ? o(y) : y;
+      await r?.(y, S);
     },
-    [v, t, F, u, o, r, m]
-  ), z = ae(
+    [y, t, F, u, o, r, m]
+  ), D = ae(
     (i) => {
-      const y = Ee(v, i.name), E = B[i.name] ? N[i.name] : void 0, S = i.disabled || m, M = {
-        value: y || "",
+      const v = Ee(y, i.name), E = P[i.name] ? N[i.name] : void 0, S = i.disabled || m, M = {
+        value: v || "",
         disabled: S,
         required: i.required,
         placeholder: i.placeholder,
@@ -2996,7 +3060,7 @@ const cr = ({
             ue,
             {
               ...M,
-              onChange: (L) => I(i.name, L.target.value),
+              onChange: (L) => z(i.name, L.target.value),
               type: i.textType || i.type,
               autoComplete: i.autocomplete,
               error: E,
@@ -3008,7 +3072,7 @@ const cr = ({
             Ne,
             {
               ...M,
-              onChange: (L) => I(i.name, L.target.value),
+              onChange: (L) => z(i.name, L.target.value),
               rows: 4,
               error: E,
               size: l
@@ -3019,7 +3083,7 @@ const cr = ({
             fe,
             {
               ...M,
-              onChange: (L) => I(i.name, L),
+              onChange: (L) => z(i.name, L),
               options: (i.options || []).map((L) => ({
                 ...L,
                 value: String(L.value)
@@ -3033,11 +3097,11 @@ const cr = ({
           );
         case "checkbox":
           return /* @__PURE__ */ e(
-            ye,
+            ve,
             {
               ...M,
-              checked: !!y,
-              onChange: (L) => I(i.name, L.target.checked),
+              checked: !!v,
+              onChange: (L) => z(i.name, L.target.checked),
               size: l
             }
           );
@@ -3049,21 +3113,21 @@ const cr = ({
                 type: "radio",
                 name: i.name,
                 value: L.value,
-                checked: y === L.value,
-                onChange: () => I(i.name, L.value),
+                checked: v === L.value,
+                onChange: () => z(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: L.label })
+            /* @__PURE__ */ e(Y, { variant: "label", size: "sm", children: L.label })
           ] }, L.value)) });
         case "date":
           return /* @__PURE__ */ e(
-            ve,
+            ye,
             {
               ...M,
-              value: y ? new Date(y) : null,
-              onChange: (L) => I(i.name, L),
+              value: v ? new Date(v) : null,
+              onChange: (L) => z(i.name, L),
               size: l
             }
           );
@@ -3072,28 +3136,28 @@ const cr = ({
             Et,
             {
               ...M,
-              value: y,
-              onChange: (L) => I(i.name, L),
+              value: v,
+              onChange: (L) => z(i.name, L),
               error: E,
-              onListFiles: (L) => k?.http.invoke({
+              onListFiles: (L) => w?.http.invoke({
                 method: "POST",
                 action: "storage.file.list",
                 body: L
               }),
-              onListMounts: () => k?.http.invoke({
+              onListMounts: () => w?.http.invoke({
                 method: "GET",
                 action: "storage.mount"
               }),
-              onUploadFile: (L) => k?.http.invoke({
+              onUploadFile: (L) => w?.http.invoke({
                 method: "POST",
                 action: "storage.file.upload",
                 body: L
               }),
-              onDownloadFile: (L) => k?.http.invoke({
+              onDownloadFile: (L) => w?.http.invoke({
                 method: "GET",
                 action: `storage.file.${L}.download`
               }),
-              onRegisterFile: (L) => k?.http.invoke({
+              onRegisterFile: (L) => w?.http.invoke({
                 method: "POST",
                 action: "storage.file.folder",
                 body: L
@@ -3104,9 +3168,9 @@ const cr = ({
           return /* @__PURE__ */ e(
             Mt,
             {
-              value: y || {},
-              onChange: (L) => I(i.name, L),
-              onListFolders: () => k?.http.invoke({
+              value: v || {},
+              onChange: (L) => z(i.name, L),
+              onListFolders: () => w?.http.invoke({
                 method: "GET",
                 action: "storage.mount"
               }),
@@ -3117,13 +3181,13 @@ const cr = ({
           );
         case "custom":
           return i.customComponent?.({
-            value: y,
-            onChange: (L) => I(i.name, L),
+            value: v,
+            onChange: (L) => z(i.name, L),
             error: E,
             disabled: S
           });
         case "array": {
-          const L = y || [];
+          const L = v || [];
           let Q = [];
           if (typeof E == "string" && E.startsWith("["))
             try {
@@ -3131,21 +3195,21 @@ const cr = ({
             } catch {
             }
           const re = () => {
-            I(i.name, [...L, {}]);
-          }, X = (A) => {
-            I(
+            z(i.name, [...L, {}]);
+          }, X = (j) => {
+            z(
               i.name,
-              L.filter((T, D) => D !== A)
+              L.filter((T, I) => I !== j)
             );
-          }, $ = (A, T, D) => {
+          }, $ = (j, T, I) => {
             const ee = [...L];
-            ee[A] = {
-              ...ee[A],
-              [T]: D
-            }, I(i.name, ee);
+            ee[j] = {
+              ...ee[j],
+              [T]: I
+            }, z(i.name, ee);
           };
           return /* @__PURE__ */ d("div", { className: "space-y-2", children: [
-            L.map((A, T) => /* @__PURE__ */ d(
+            L.map((j, T) => /* @__PURE__ */ d(
               "div",
               {
                 className: "p-4 border rounded-md dark:border-neutral-700 space-y-2 relative",
@@ -3161,34 +3225,34 @@ const cr = ({
                       children: "Remove"
                     }
                   ) }),
-                  /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: i.arrayFields?.map((D) => {
-                    const ee = Q?.[T]?.[D.name];
+                  /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: i.arrayFields?.map((I) => {
+                    const ee = Q?.[T]?.[I.name];
                     return /* @__PURE__ */ d(
                       "div",
                       {
                         className: "space-y-1",
                         children: [
                           /* @__PURE__ */ e("label", { className: "block", children: /* @__PURE__ */ d(
-                            Z,
+                            Y,
                             {
                               variant: "label",
                               size: "sm",
                               className: "font-semibold text-neutral-700 dark:text-neutral-300",
                               children: [
-                                D.label,
-                                D.required && /* @__PURE__ */ e("span", { className: "text-red-500 ml-1", children: "*" })
+                                I.label,
+                                I.required && /* @__PURE__ */ e("span", { className: "text-red-500 ml-1", children: "*" })
                               ]
                             }
                           ) }),
                           (() => {
                             const ne = {
-                              value: A?.[D.name] || "",
+                              value: j?.[I.name] || "",
                               disabled: S,
-                              required: D.required,
-                              placeholder: D.placeholder,
-                              ...D.fieldProps
+                              required: I.required,
+                              placeholder: I.placeholder,
+                              ...I.fieldProps
                             };
-                            switch (D.type) {
+                            switch (I.type) {
                               case "text":
                               case "email":
                               case "password":
@@ -3201,11 +3265,11 @@ const cr = ({
                                     ...ne,
                                     onChange: (K) => $(
                                       T,
-                                      D.name,
+                                      I.name,
                                       K.target.value
                                     ),
-                                    type: D.textType || D.type,
-                                    autoComplete: D.autocomplete,
+                                    type: I.textType || I.type,
+                                    autoComplete: I.autocomplete,
                                     error: ee,
                                     size: l
                                   }
@@ -3217,7 +3281,7 @@ const cr = ({
                                     ...ne,
                                     onChange: (K) => $(
                                       T,
-                                      D.name,
+                                      I.name,
                                       K.target.value
                                     ),
                                     rows: 4,
@@ -3232,38 +3296,38 @@ const cr = ({
                                     ...ne,
                                     onChange: (K) => $(
                                       T,
-                                      D.name,
+                                      I.name,
                                       K
                                     ),
-                                    options: (D.options || []).map(
+                                    options: (I.options || []).map(
                                       (K) => ({
                                         ...K,
                                         value: String(K.value)
                                       })
                                     ),
-                                    searchable: D.searchable,
-                                    multiple: D.multiple,
-                                    allowCreate: D.allowCreate,
+                                    searchable: I.searchable,
+                                    multiple: I.multiple,
+                                    allowCreate: I.allowCreate,
                                     error: ee,
                                     size: l
                                   }
                                 );
                               case "checkbox":
                                 return /* @__PURE__ */ e(
-                                  ye,
+                                  ve,
                                   {
                                     ...ne,
-                                    checked: !!A?.[D.name],
+                                    checked: !!j?.[I.name],
                                     onChange: (K) => $(
                                       T,
-                                      D.name,
+                                      I.name,
                                       K.target.checked
                                     ),
                                     size: l
                                   }
                                 );
                               case "radio":
-                                return /* @__PURE__ */ e("div", { className: "space-y-1", children: D.options?.map((K) => /* @__PURE__ */ d(
+                                return /* @__PURE__ */ e("div", { className: "space-y-1", children: I.options?.map((K) => /* @__PURE__ */ d(
                                   "label",
                                   {
                                     className: "flex items-center gap-2",
@@ -3272,33 +3336,33 @@ const cr = ({
                                         "input",
                                         {
                                           type: "radio",
-                                          name: `${i.name}.${T}.${D.name}`,
+                                          name: `${i.name}.${T}.${I.name}`,
                                           value: K.value,
-                                          checked: A?.[D.name] === K.value,
+                                          checked: j?.[I.name] === K.value,
                                           onChange: () => $(
                                             T,
-                                            D.name,
+                                            I.name,
                                             K.value
                                           ),
                                           disabled: S || K.disabled,
                                           className: "rounded-full border-neutral-100 dark:border-neutral-600"
                                         }
                                       ),
-                                      /* @__PURE__ */ e(Z, { variant: "label", size: "sm", children: K.label })
+                                      /* @__PURE__ */ e(Y, { variant: "label", size: "sm", children: K.label })
                                     ]
                                   },
                                   K.value
                                 )) });
                               case "date": {
-                                const K = A?.[D.name];
+                                const K = j?.[I.name];
                                 return /* @__PURE__ */ e(
-                                  ve,
+                                  ye,
                                   {
                                     ...ne,
                                     value: K ? new Date(K) : null,
                                     onChange: (le) => $(
                                       T,
-                                      D.name,
+                                      I.name,
                                       le
                                     ),
                                     size: l
@@ -3306,11 +3370,11 @@ const cr = ({
                                 );
                               }
                               case "custom":
-                                return D.customComponent?.({
-                                  value: A?.[D.name],
+                                return I.customComponent?.({
+                                  value: j?.[I.name],
                                   onChange: (K) => $(
                                     T,
-                                    D.name,
+                                    I.name,
                                     K
                                   ),
                                   error: ee,
@@ -3321,12 +3385,12 @@ const cr = ({
                                 return /* @__PURE__ */ d("p", { children: [
                                   "Unsupported field type in array:",
                                   " ",
-                                  D.type
+                                  I.type
                                 ] });
                             }
                           })(),
                           ee && /* @__PURE__ */ e(
-                            Z,
+                            Y,
                             {
                               variant: "body",
                               size: "sm",
@@ -3336,7 +3400,7 @@ const cr = ({
                           )
                         ]
                       },
-                      D.name
+                      I.name
                     );
                   }) })
                 ]
@@ -3363,13 +3427,13 @@ const cr = ({
           return null;
       }
     },
-    [v, B, N, m, l, I]
+    [y, P, N, m, l, z]
   ), W = ae(
     (i) => {
-      if (i.conditional && !i.conditional(v))
+      if (i.conditional && !i.conditional(y))
         return null;
-      const y = i.items.filter((S) => !(S.hidden || S.conditional && !S.conditional(v)));
-      if (y.length === 0) return null;
+      const v = i.items.filter((S) => !(S.hidden || S.conditional && !S.conditional(y)));
+      if (v.length === 0) return null;
       const E = p(
         "space-y-2",
         {
@@ -3391,7 +3455,7 @@ const cr = ({
           children: [
             /* @__PURE__ */ d("div", { className: "md:col-span-1", children: [
               /* @__PURE__ */ e(
-                Z,
+                Y,
                 {
                   variant: "label",
                   size: "lg",
@@ -3401,7 +3465,7 @@ const cr = ({
                 }
               ),
               i.description && /* @__PURE__ */ e(
-                Z,
+                Y,
                 {
                   variant: "body",
                   size: "sm",
@@ -3410,7 +3474,7 @@ const cr = ({
                 }
               )
             ] }),
-            /* @__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(
+            /* @__PURE__ */ e("div", { className: "md:col-span-2", children: /* @__PURE__ */ e("div", { className: E, children: v.map((S) => (P[S.name] && N[S.name], /* @__PURE__ */ d(
               "div",
               {
                 className: p(
@@ -3420,7 +3484,7 @@ const cr = ({
                 ),
                 children: [
                   S.type !== "custom" && /* @__PURE__ */ e("label", { className: "block", children: /* @__PURE__ */ d(
-                    Z,
+                    Y,
                     {
                       variant: "label",
                       size: "sm",
@@ -3431,7 +3495,7 @@ const cr = ({
                       ]
                     }
                   ) }),
-                  z(S)
+                  D(S)
                 ]
               },
               S.name
@@ -3441,7 +3505,7 @@ const cr = ({
         i.id
       );
     },
-    [v, B, N, z]
+    [y, P, N, D]
   ), V = p(
     "space-y-6",
     {
@@ -3452,91 +3516,36 @@ const cr = ({
     },
     h
   );
-  return /* @__PURE__ */ d("form", { ref: w, onSubmit: H, className: V, children: [
+  return /* @__PURE__ */ d("form", { ref: k, 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 || l,
-          disabled: x.disabled || m,
+          variant: b.variant,
+          size: b.size || l,
+          disabled: b.disabled || m,
           onClick: n,
-          className: x.className,
-          children: x.label
+          className: b.className,
+          children: b.label
         }
       ),
       /* @__PURE__ */ e(
         te,
         {
           type: "submit",
-          variant: b.variant,
-          size: b.size || l,
-          disabled: b.disabled || m,
+          variant: x.variant,
+          size: x.size || l,
+          disabled: x.disabled || m,
           loading: m,
-          className: b.className,
-          children: b.label
+          className: x.className,
+          children: x.label
         }
       )
     ] })
   ] });
-}, ir = ({
-  trigger: t,
-  children: a,
-  placement: r = "bottom-start",
-  className: n,
-  disabled: s = !1
-}) => {
-  const [o, u] = P(!1), [b, x] = P({}), g = J(null), f = J(null);
-  U(() => {
-    if (!o) return;
-    const h = (k) => {
-      g.current && !g.current.contains(k.target) && u(!1);
-    }, w = (k) => {
-      k.key === "Escape" && u(!1);
-    };
-    return document.addEventListener("mousedown", h), document.addEventListener("keydown", w), () => {
-      document.removeEventListener("mousedown", h), document.removeEventListener("keydown", w);
-    };
-  }, [o]);
-  const l = (h) => {
-    if (h.stopPropagation(), !s) {
-      if (!o) {
-        const w = f.current?.getBoundingClientRect();
-        if (w) {
-          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);
-    }
-  }, m = () => u(!1);
-  return /* @__PURE__ */ d("div", { ref: g, className: "relative inline-flex", children: [
-    /* @__PURE__ */ e(
-      "button",
-      {
-        ref: f,
-        type: "button",
-        onClick: l,
-        disabled: s,
-        className: p("inline-flex items-center", s && "opacity-50 cursor-not-allowed"),
-        children: t
-      }
-    ),
-    o && /* @__PURE__ */ e(
-      "div",
-      {
-        className: p(
-          "fixed z-[60] bg-module rounded-lg shadow-lg border border-neutral",
-          n
-        ),
-        style: b,
-        children: typeof a == "function" ? a(m) : a
-      }
-    )
-  ] });
-}, zt = {
+}, Dt = {
   default: "bg-neutral-container text-default",
   primary: "bg-accent-container text-accent",
   secondary: "bg-neutral-container text-muted",
@@ -3544,11 +3553,11 @@ const cr = ({
   warning: "bg-notice-container text-on-notice",
   error: "bg-error-container text-error",
   info: "bg-beta-container text-link"
-}, Dt = {
+}, It = {
   sm: "px-2 py-0.5 text-xs",
   md: "px-2.5 py-1 text-sm",
   lg: "px-3 py-1.5 text-base"
-}, It = {
+}, zt = {
   default: "bg-neutral-fill",
   primary: "bg-accent-fill",
   secondary: "bg-neutral-fill",
@@ -3557,7 +3566,7 @@ const cr = ({
   error: "bg-error-fill",
   info: "bg-beta-fill"
 };
-function dr({
+function ir({
   variant: t = "default",
   size: a = "md",
   dot: r = !1,
@@ -3565,8 +3574,8 @@ function dr({
   dismissible: s = !1,
   onDismiss: o,
   className: u,
-  children: b,
-  ...x
+  children: x,
+  ...b
 }) {
   return /* @__PURE__ */ d(
     "span",
@@ -3575,24 +3584,24 @@ function dr({
         // Base styles
         "inline-flex items-center font-medium rounded-full",
         // Variant styles
-        zt[t],
+        Dt[t],
         // Size styles
-        Dt[a],
+        It[a],
         u
       ),
-      ...x,
+      ...b,
       children: [
         r && /* @__PURE__ */ e(
           "span",
           {
             className: p(
               "w-2 h-2 rounded-full mr-1.5",
-              It[t]
+              zt[t]
             )
           }
         ),
-        n && /* @__PURE__ */ e("span", { className: p("flex-shrink-0", b && "mr-1"), children: n }),
-        b,
+        n && /* @__PURE__ */ e("span", { className: p("flex-shrink-0", x && "mr-1"), children: n }),
+        x,
         s && o && /* @__PURE__ */ e(
           "button",
           {
@@ -3631,7 +3640,7 @@ const At = {
   lg: "text-base",
   xl: "text-lg"
 };
-function ur({
+function dr({
   size: t = "md",
   variant: a = "primary",
   label: r = "Loading...",
@@ -3711,7 +3720,7 @@ function Bt(t) {
   return a.length >= 2 ? (a[0][0] + a[1][0]).toUpperCase() : a.length === 1 ? a[0].slice(0, 2).toUpperCase() : "?";
 }
 const Ot = ({ name: t, src: a, size: r = "sm", className: n, title: s }) => {
-  const [o, u] = se.useState(!1), b = p(
+  const [o, u] = se.useState(!1), x = p(
     "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
@@ -3722,15 +3731,15 @@ const Ot = ({ name: t, src: a, size: r = "sm", className: n, title: s }) => {
       src: a,
       alt: t ?? "",
       title: s ?? t,
-      className: p(b, "object-cover"),
+      className: p(x, "object-cover"),
       onError: () => u(!0)
     }
-  ) : /* @__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 }) => {
+  ) : /* @__PURE__ */ e("span", { className: x, 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)]", ur = ({ people: t, max: a = 4, size: r = "sm", className: n }) => {
   if (t.length === 0) return null;
   const s = t.slice(0, a), o = t.length - s.length;
   return /* @__PURE__ */ d("span", { className: p("inline-flex items-center", n), children: [
-    s.map((u, b) => /* @__PURE__ */ e(
+    s.map((u, x) => /* @__PURE__ */ e(
       Ot,
       {
         name: u.name,
@@ -3738,12 +3747,12 @@ const Ot = ({ name: t, src: a, size: r = "sm", className: n, title: s }) => {
         size: r,
         title: u.name ? u.seen === !1 ? `${u.name} — nog niet gelezen` : u.name : void 0,
         className: p(
-          b > 0 && "-ml-2",
+          x > 0 && "-ml-2",
           u.owner ? Wt : Me,
           u.seen === !1 && "opacity-40"
         )
       },
-      u.id ?? `${u.name}-${b}`
+      u.id ?? `${u.name}-${x}`
     )),
     o > 0 && /* @__PURE__ */ d(
       "span",
@@ -3760,7 +3769,7 @@ const Ot = ({ name: t, src: a, size: r = "sm", className: n, title: s }) => {
       }
     )
   ] });
-}, fr = ({
+}, mr = ({
   src: t,
   alt: a,
   size: r = "md",
@@ -3768,19 +3777,19 @@ const Ot = ({ name: t, src: a, size: r = "sm", className: n, title: s }) => {
   radius: s = "md",
   showLoading: o = !0,
   showError: u = !0,
-  fallback: b,
-  loadingContent: x,
+  fallback: x,
+  loadingContent: b,
   errorContent: g,
   className: f,
   onLoad: l,
   onError: m,
   ...h
 }) => {
-  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);
+  const [k, w] = B(!0), [y, A] = B(!1), [N, q] = B(t), P = (V) => {
+    w(!1), A(!1), l?.(V);
+  }, U = (V) => {
+    if (w(!1), A(!0), x && N !== x) {
+      q(x), A(!1), w(!0);
       return;
     }
     m?.(V);
@@ -3812,16 +3821,16 @@ const Ot = ({ name: t, src: a, size: r = "sm", className: n, title: s }) => {
       "rounded-full": s === "full"
     },
     f
-  ), I = p(
+  ), z = p(
     "w-full h-full object-cover transition-opacity duration-200",
     {
-      "opacity-0": w || v,
-      "opacity-100": !w && !v
+      "opacity-0": k || y,
+      "opacity-100": !k && !y
     }
   ), H = p(
     "absolute inset-0 flex items-center justify-center",
     "text-neutral-400 dark:text-neutral-500"
-  ), 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: [
+  ), D = /* @__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",
       {
@@ -3849,15 +3858,15 @@ const Ot = ({ name: t, src: a, size: r = "sm", className: n, title: s }) => {
         ...h,
         src: N,
         alt: a,
-        className: I,
-        onLoad: B,
-        onError: G
+        className: z,
+        onLoad: P,
+        onError: U
       }
     ),
-    w && o && /* @__PURE__ */ e("div", { className: H, children: x || z }),
-    v && u && /* @__PURE__ */ e("div", { className: H, children: g || W })
+    k && o && /* @__PURE__ */ e("div", { className: H, children: b || D }),
+    y && u && /* @__PURE__ */ e("div", { className: H, children: g || W })
   ] });
-}, hr = ({
+}, fr = ({
   title: t,
   subtitle: a,
   actions: r = [],
@@ -3865,22 +3874,22 @@ const Ot = ({ name: t, src: a, size: r = "sm", className: n, title: s }) => {
   className: s,
   backLabel: o = "Back",
   backClassName: u,
-  onBack: b,
-  editable: x = !1,
+  onBack: x,
+  editable: b = !1,
   onTitleChange: g
 }) => {
-  const [f, l] = P(!1), [m, h] = P(t), w = J(null);
-  U(() => {
+  const [f, l] = B(!1), [m, h] = B(t), k = Z(null);
+  G(() => {
     h(t);
-  }, [t]), U(() => {
-    f && w.current && (w.current.focus(), w.current.select());
+  }, [t]), G(() => {
+    f && k.current && (k.current.focus(), k.current.select());
   }, [f]);
-  const k = () => {
-    x && l(!0);
-  }, v = () => {
+  const w = () => {
+    b && l(!0);
+  }, y = () => {
     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), l(!1));
+  }, A = (N) => {
+    N.key === "Enter" ? k.current?.blur() : N.key === "Escape" && (h(t), l(!1));
   };
   return /* @__PURE__ */ d(
     "div",
@@ -3892,47 +3901,47 @@ const Ot = ({ name: t, src: a, size: r = "sm", className: n, title: s }) => {
       children: [
         /* @__PURE__ */ d("div", { className: "flex flex-row sm:items-start sm:justify-between items-center gap-4", children: [
           /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ d("div", { className: "flex items-center gap-2 text-default", children: [
-            b && /* @__PURE__ */ e(
+            x && /* @__PURE__ */ e(
               "button",
               {
                 type: "button",
-                onClick: b,
+                onClick: x,
                 className: p(
                   "flex items-center text-sm cursor-pointer transition",
                   u
                 ),
-                children: /* @__PURE__ */ e(we, { size: 16, color: "currentColor" })
+                children: /* @__PURE__ */ e(ke, { size: 16, color: "currentColor" })
               }
             ),
             f ? /* @__PURE__ */ e(
               "input",
               {
-                ref: w,
+                ref: k,
                 type: "text",
                 value: m,
                 onChange: (N) => h(N.target.value),
-                onBlur: v,
-                onKeyDown: j,
+                onBlur: y,
+                onKeyDown: A,
                 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"
               }
             ) : /* @__PURE__ */ d("div", { className: "group flex items-center gap-1.5 min-w-0", children: [
               /* @__PURE__ */ e(
                 "h2",
                 {
-                  onClick: k,
+                  onClick: w,
                   className: p(
                     "text-2xl font-semibold truncate",
-                    x && "cursor-pointer"
+                    b && "cursor-pointer"
                   ),
-                  title: x ? "Klik om te bewerken" : void 0,
+                  title: b ? "Klik om te bewerken" : void 0,
                   children: t
                 }
               ),
-              x && /* @__PURE__ */ e(
+              b && /* @__PURE__ */ e(
                 He,
                 {
                   size: 15,
-                  onClick: k,
+                  onClick: w,
                   className: "shrink-0 cursor-pointer text-muted opacity-0 group-hover:opacity-100 transition-opacity"
                 }
               )
@@ -3940,7 +3949,7 @@ const Ot = ({ name: t, src: a, size: r = "sm", className: n, title: s }) => {
           ] }) }),
           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(
-              ze,
+              De,
               {
                 label: N.label,
                 onClick: N.onClick,
@@ -3977,7 +3986,7 @@ const Ot = ({ name: t, src: a, size: r = "sm", className: n, title: s }) => {
       ]
     }
   );
-}, pr = ({
+}, hr = ({
   actions: t = [],
   onBack: a,
   backLabel: r = "Back",
@@ -3991,7 +4000,7 @@ const Ot = ({ name: t, src: a, size: r = "sm", className: n, title: s }) => {
       onClick: a,
       className: "flex items-center gap-1 text-sm text-neutral-700 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-neutral-100 cursor-pointer transition px-2 py-1 rounded",
       children: [
-        /* @__PURE__ */ e(we, { size: 16 }),
+        /* @__PURE__ */ e(ke, { size: 16 }),
         /* @__PURE__ */ e("span", { children: r })
       ]
     }
@@ -3999,7 +4008,7 @@ const Ot = ({ name: t, src: a, size: r = "sm", className: n, title: s }) => {
   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(
-      ze,
+      De,
       {
         label: o.label,
         onClick: o.onClick,
@@ -4038,7 +4047,7 @@ function Ft(t, a) {
     t
   );
 }
-const xr = ({
+const pr = ({
   groups: t,
   data: a,
   size: r = "md",
@@ -4059,26 +4068,26 @@ const xr = ({
     if (!l) return String(f || "-");
     const m = l.find((h) => h.value === f);
     return m ? m.label : String(f || "-");
-  }, b = ae(
+  }, x = ae(
     (f) => {
       const l = Ft(a, f.name);
       if (f.type === "array") {
         const h = l;
         return !h || h.length === 0 ? /* @__PURE__ */ e(
-          Z,
+          Y,
           {
             variant: "body",
             size: "sm",
             className: "text-neutral-500 dark:text-neutral-400",
             children: "Geen items"
           }
-        ) : /* @__PURE__ */ e("div", { className: "space-y-3", children: h.map((w, k) => /* @__PURE__ */ d(
+        ) : /* @__PURE__ */ e("div", { className: "space-y-3", children: h.map((k, w) => /* @__PURE__ */ d(
           "div",
           {
             className: "p-4 border border-neutral-200 dark:border-neutral-700 rounded-lg space-y-3",
             children: [
               /* @__PURE__ */ e("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ d(
-                Z,
+                Y,
                 {
                   variant: "label",
                   size: "sm",
@@ -4087,55 +4096,55 @@ const xr = ({
                   children: [
                     f.label,
                     " ",
-                    k + 1
+                    w + 1
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: f.arrayFields?.map((v) => {
-                const j = w?.[v.name];
+              /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: f.arrayFields?.map((y) => {
+                const A = k?.[y.name];
                 let N = "-";
-                switch (v.type) {
+                switch (y.type) {
                   case "text":
                   case "email":
                   case "number":
                   case "tel":
                   case "url":
                   case "textarea":
-                    N = j || "-";
+                    N = A || "-";
                     break;
                   case "select":
                   case "radio":
                     N = u(
-                      j,
-                      v.options
+                      A,
+                      y.options
                     );
                     break;
                   case "checkbox":
-                    N = o(j);
+                    N = o(A);
                     break;
                   case "date":
-                    N = s(j);
+                    N = s(A);
                     break;
                   case "custom":
-                    N = v.customComponent?.({
-                      value: j
+                    N = y.customComponent?.({
+                      value: A
                     });
                     break;
                   default:
-                    N = String(j || "-");
+                    N = String(A || "-");
                 }
-                return v.format && (N = v.format(j, w)), /* @__PURE__ */ d("div", { className: "space-y-1", children: [
+                return y.format && (N = y.format(A, k)), /* @__PURE__ */ d("div", { className: "space-y-1", children: [
                   /* @__PURE__ */ e(
-                    Z,
+                    Y,
                     {
                       variant: "label",
                       size: "xs",
                       className: "text-neutral-600 dark:text-neutral-400",
-                      children: v.label
+                      children: y.label
                     }
                   ),
                   /* @__PURE__ */ e(
-                    Z,
+                    Y,
                     {
                       variant: "body",
                       size: "sm",
@@ -4143,11 +4152,11 @@ const xr = ({
                       children: N
                     }
                   )
-                ] }, v.name);
+                ] }, y.name);
               }) })
             ]
           },
-          k
+          w
         )) });
       }
       if (f.type === "custom" && f.customComponent)
@@ -4155,7 +4164,7 @@ const xr = ({
       if (f.format) {
         const h = f.format(l, a);
         return /* @__PURE__ */ e(
-          Z,
+          Y,
           {
             variant: "body",
             size: "sm",
@@ -4191,7 +4200,7 @@ const xr = ({
           m = l ? String(l) : "-";
       }
       return /* @__PURE__ */ e(
-        Z,
+        Y,
         {
           variant: "body",
           size: "sm",
@@ -4201,7 +4210,7 @@ const xr = ({
       );
     },
     [a]
-  ), x = ae(
+  ), b = ae(
     (f) => {
       if (f.conditional && !f.conditional(a))
         return null;
@@ -4228,7 +4237,7 @@ const xr = ({
           children: [
             /* @__PURE__ */ d("div", { className: "md:col-span-1", children: [
               /* @__PURE__ */ e(
-                Z,
+                Y,
                 {
                   variant: "label",
                   size: "lg",
@@ -4238,7 +4247,7 @@ const xr = ({
                 }
               ),
               f.description && /* @__PURE__ */ e(
-                Z,
+                Y,
                 {
                   variant: "body",
                   size: "sm",
@@ -4257,7 +4266,7 @@ const xr = ({
                 ),
                 children: [
                   h.type !== "custom" && /* @__PURE__ */ e(
-                    Z,
+                    Y,
                     {
                       variant: "label",
                       size: "sm",
@@ -4265,7 +4274,7 @@ const xr = ({
                       children: h.label
                     }
                   ),
-                  b(h)
+                  x(h)
                 ]
               },
               h.name
@@ -4275,7 +4284,7 @@ const xr = ({
         f.id
       );
     },
-    [a, b]
+    [a, x]
   ), g = p(
     "space-y-6",
     {
@@ -4286,9 +4295,9 @@ const xr = ({
     },
     n
   );
-  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 [s, o] = P(t.defaultCollapsed ?? !1), u = t.children && t.children.length > 0, b = u && n === 0, x = () => {
+  return /* @__PURE__ */ e("div", { className: g, children: /* @__PURE__ */ e("div", { className: "space-y-8", children: t.map(b) }) });
+}, ze = ({ item: t, isSelectedHandler: a, onClick: r, depth: n = 0 }) => {
+  const [s, o] = B(t.defaultCollapsed ?? !1), u = t.children && t.children.length > 0, x = u && n === 0, b = () => {
     u && o(!s);
   }, g = a ? a(t.path) : !1;
   return /* @__PURE__ */ d("li", { children: [
@@ -4300,22 +4309,22 @@ const xr = ({
           {
             "active-nav-item": g && !u,
             "shadow-lvl-0": g && !u,
-            "font-semibold": g || b
+            "font-semibold": g || x
           }
         ),
         onClick: () => {
-          u ? x() : t.path && r?.(t.path);
+          u ? b() : t.path && r?.(t.path);
         },
         children: [
           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: `${s ? "collapsed" : ""}`, children: /* @__PURE__ */ e(qe, { className: "w-4 h-4 text-muted" }) })
+          u && /* @__PURE__ */ e("span", { className: `${s ? "collapsed" : ""}`, children: /* @__PURE__ */ e($e, { className: "w-4 h-4 text-muted" }) })
         ]
       }
     ),
     u && !s && /* @__PURE__ */ e("ul", { className: "sidebar-menu-nested-items mb-1", children: t.children?.map((f, l) => /* @__PURE__ */ e(
-      Ie,
+      ze,
       {
         item: f,
         isSelectedHandler: a,
@@ -4325,7 +4334,7 @@ const xr = ({
       l
     )) })
   ] });
-}, br = ({
+}, xr = ({
   title: t,
   actionIcons: a,
   items: r,
@@ -4335,21 +4344,21 @@ const xr = ({
 }) => /* @__PURE__ */ d("div", { className: "flex flex-col h-screen mb-6", children: [
   /* @__PURE__ */ d("div", { className: "sidebar-menu-header", children: [
     /* @__PURE__ */ e("span", { className: "text-xl font-semibold text-default mb-2", children: t }),
-    /* @__PURE__ */ e("div", { className: "sidebar-menu-actions", children: a?.map((u, b) => /* @__PURE__ */ e("span", { className: "sidebar-menu-action-icon", children: u }, b)) })
+    /* @__PURE__ */ e("div", { className: "sidebar-menu-actions", children: a?.map((u, x) => /* @__PURE__ */ e("span", { className: "sidebar-menu-action-icon", children: u }, x)) })
   ] }),
   o && /* @__PURE__ */ e("div", { className: "sidebar-menu-pre-items mb-4", children: o }),
   /* @__PURE__ */ e("ul", { children: r.map(
-    (u, b) => !u.path && !u.label && !u.children ? /* @__PURE__ */ e("span", { className: "flex w-full h-4" }, b) : /* @__PURE__ */ e(
-      Ie,
+    (u, x) => !u.path && !u.label && !u.children ? /* @__PURE__ */ e("span", { className: "flex w-full h-4" }, x) : /* @__PURE__ */ e(
+      ze,
       {
         item: u,
         isSelectedHandler: n,
         onClick: s
       },
-      b
+      x
     )
   ) })
-] }), gr = ({
+] }), br = ({
   level: t = 1,
   size: a,
   weight: r = "bold",
@@ -4357,8 +4366,8 @@ const xr = ({
   align: s = "left",
   truncate: o = !1,
   className: u,
-  children: b,
-  ...x
+  children: x,
+  ...b
 }) => {
   const g = a || Vt(t), f = p(
     "font-primary",
@@ -4405,7 +4414,7 @@ const xr = ({
     },
     u
   ), l = `h${t}`;
-  return /* @__PURE__ */ e(l, { className: f, ...x, children: b });
+  return /* @__PURE__ */ e(l, { className: f, ...b, children: x });
 };
 function Vt(t) {
   return {
@@ -4417,7 +4426,7 @@ function Vt(t) {
     6: "md"
   }[t] || "md";
 }
-const yr = ({
+const gr = ({
   items: t,
   type: a = "unordered",
   variant: r = "default",
@@ -4426,7 +4435,7 @@ const yr = ({
   className: o,
   itemClassName: u
 }) => {
-  const b = p(
+  const x = p(
     // Base styles
     "space-y-1",
     // Variant styles
@@ -4447,7 +4456,7 @@ const yr = ({
       "text-lg": n === "lg"
     },
     o
-  ), x = (l, m) => p(
+  ), b = (l, m) => p(
     // Base item styles
     "transition-colors duration-200",
     // Size-based padding
@@ -4471,10 +4480,10 @@ const yr = ({
   }, 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((l, m) => /* @__PURE__ */ e(
+  return a === "ordered" ? /* @__PURE__ */ e("ol", { className: x, children: t.map((l, m) => /* @__PURE__ */ e(
     "li",
     {
-      className: x(l),
+      className: b(l),
       onClick: () => g(l),
       onKeyDown: (h) => f(h, l),
       tabIndex: s && !l.disabled ? 0 : void 0,
@@ -4482,10 +4491,10 @@ const yr = ({
       children: l.content
     },
     l.id || m
-  )) }) : a === "description" ? /* @__PURE__ */ e("dl", { className: b, children: t.map((l, m) => /* @__PURE__ */ e(
+  )) }) : a === "description" ? /* @__PURE__ */ e("dl", { className: x, children: t.map((l, m) => /* @__PURE__ */ e(
     "div",
     {
-      className: x(l),
+      className: b(l),
       onClick: () => g(l),
       onKeyDown: (h) => f(h, l),
       tabIndex: s && !l.disabled ? 0 : void 0,
@@ -4493,10 +4502,10 @@ const yr = ({
       children: l.content
     },
     l.id || m
-  )) }) : /* @__PURE__ */ e("ul", { className: b, children: t.map((l, m) => /* @__PURE__ */ e(
+  )) }) : /* @__PURE__ */ e("ul", { className: x, children: t.map((l, m) => /* @__PURE__ */ e(
     "li",
     {
-      className: x(l),
+      className: b(l),
       onClick: () => g(l),
       onKeyDown: (h) => f(h, l),
       tabIndex: s && !l.disabled ? 0 : void 0,
@@ -4513,37 +4522,37 @@ const yr = ({
   initialCommandPath: s,
   initialActiveIndex: o
 }) => {
-  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())
+  const [u, x] = B(""), [b, g] = B(s || []), [f, l] = B(o || 0), m = Z(null), h = Z(null), w = (b.length ? t.find((y) => y.id === b[0])?.subCommands || [] : t).filter(
+    (y) => y.label.toLowerCase().includes(u.toLowerCase())
   );
-  return U(() => {
-    a || (b(""), g(s || []), l(o || 0));
-  }, [a]), U(() => {
-    const v = (j) => {
+  return G(() => {
+    a || (x(""), g(s || []), l(o || 0));
+  }, [a]), G(() => {
+    const y = (A) => {
       if (a) {
-        if (j.key === "Escape")
+        if (A.key === "Escape")
           r();
-        else if (j.key === "ArrowUp")
+        else if (A.key === "ArrowUp")
           l(
-            (N) => N > 0 ? N - 1 : k.length - 1
+            (N) => N > 0 ? N - 1 : w.length - 1
           );
-        else if (j.key === "ArrowDown")
+        else if (A.key === "ArrowDown")
           l(
-            (N) => N < k.length - 1 ? N + 1 : 0
+            (N) => N < w.length - 1 ? N + 1 : 0
           );
-        else if (j.key === "Enter") {
-          const N = k[f];
-          N && (N.subCommands ? (g([...x, N.id]), l(0)) : N.action && (N.action(), r()));
+        else if (A.key === "Enter") {
+          const N = w[f];
+          N && (N.subCommands ? (g([...b, N.id]), l(0)) : N.action && (N.action(), r()));
         }
       }
     };
-    return document.addEventListener("keydown", v), () => document.removeEventListener("keydown", v);
-  }, [a, r, k, f, x]), U(() => {
-    const v = (j) => {
-      m.current && !m.current.contains(j.target) && r();
+    return document.addEventListener("keydown", y), () => document.removeEventListener("keydown", y);
+  }, [a, r, w, f, b]), G(() => {
+    const y = (A) => {
+      m.current && !m.current.contains(A.target) && r();
     };
-    return a && document.addEventListener("mousedown", v), () => document.removeEventListener("mousedown", v);
-  }, [a, r]), U(() => {
+    return a && document.addEventListener("mousedown", y), () => document.removeEventListener("mousedown", y);
+  }, [a, r]), G(() => {
     if (!a) return;
     h.current?.querySelector(`[data-index="${f}"]`)?.scrollIntoView({ block: "nearest" });
   }, [f, a]), a ? /* @__PURE__ */ e("div", { className: "fixed inset-0 z-50 flex items-center justify-center shadow-lvl-0", children: /* @__PURE__ */ d(
@@ -4561,7 +4570,7 @@ const yr = ({
               autoFocus: !0,
               placeholder: n?.searchPlaceholder || "Search commands...",
               value: u,
-              onChange: (v) => b(v.target.value),
+              onChange: (y) => x(y.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"
             }
           )
@@ -4572,23 +4581,23 @@ const yr = ({
             ref: h,
             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((v, j) => /* @__PURE__ */ d(
+              w.length === 0 && /* @__PURE__ */ e("div", { className: "text-muted text-center text-sm", children: n?.noCommandsFound || "No commands found" }),
+              w.map((y, A) => /* @__PURE__ */ d(
                 "div",
                 {
-                  "data-index": j,
-                  className: `flex items-center p-2 cursor-pointer rounded-md text-default ${j === f ? "bg-neutral-container" : ""}`,
+                  "data-index": A,
+                  className: `flex items-center p-2 cursor-pointer rounded-md text-default ${A === f ? "bg-neutral-container" : ""}`,
                   onClick: () => {
-                    v.subCommands ? (g([...x, v.id]), l(0)) : v.action && (v.action(), r());
+                    y.subCommands ? (g([...b, y.id]), l(0)) : y.action && (y.action(), r());
                   },
-                  onMouseEnter: () => l(j),
+                  onMouseEnter: () => l(A),
                   children: [
-                    v.icon && /* @__PURE__ */ e("span", { className: "mr-3", children: v.icon }),
-                    /* @__PURE__ */ e("span", { className: "flex-grow", children: v.label }),
-                    v.subCommands && /* @__PURE__ */ e("span", { className: "text-muted", children: /* @__PURE__ */ e(Ue, { className: "w-4 h-4" }) })
+                    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(qe, { className: "w-4 h-4" }) })
                   ]
                 },
-                v.id
+                y.id
               ))
             ]
           }
@@ -4680,8 +4689,8 @@ const yr = ({
     shadow: s,
     border: o,
     borderColor: u,
-    className: b,
-    children: x,
+    className: x,
+    children: b,
     ...g
   }, f) => /* @__PURE__ */ e(
     "div",
@@ -4695,19 +4704,19 @@ const yr = ({
         s && Gt[s],
         o && Kt[o],
         u && Jt[u],
-        b
+        x
       ),
       ...g,
-      children: x
+      children: b
     }
   )
 );
 Ae.displayName = "Box";
-const Nr = ({ children: t, title: a, ...r }) => /* @__PURE__ */ d(Ae, { background: "module", radius: "xl", shadow: "sm", ...r, children: [
+const yr = ({ 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 wr({
+function Nr({
   identifier: t,
   resourceLoader: a,
   framework: r = "react",
@@ -4715,31 +4724,31 @@ function wr({
   componentProps: s,
   className: o
 }) {
-  const u = J(null), [b, x] = P(!0), [g, f] = P(null), l = J(null);
-  return J(null), U(() => {
+  const u = Z(null), [x, b] = B(!0), [g, f] = B(null), l = Z(null);
+  return Z(null), G(() => {
     let m = !0;
     return (async () => {
-      x(!0);
+      b(!0);
       try {
-        const w = await a();
+        const k = await a();
         if (!m) return;
-        const k = w.component || w.default || w;
-        f(r === "react" ? () => k : () => w);
-      } catch (w) {
-        console.error(`[FederatedResource] Load failed: ${t}`, w);
+        const w = k.component || k.default || k;
+        f(r === "react" ? () => w : () => k);
+      } catch (k) {
+        console.error(`[FederatedResource] Load failed: ${t}`, k);
       } finally {
-        m && x(!1);
+        m && b(!1);
       }
     })(), () => {
       m = !1;
     };
-  }, [t, a]), U(() => {
-    if (b || !g || r === "react") return;
+  }, [t, a]), G(() => {
+    if (x || !g || r === "react") return;
     const m = u.current;
     if (m) {
       if (r === "svelte") {
-        const h = g.default || g, w = new h({ target: m, props: s || {} });
-        return l.current = w, () => w.$destroy();
+        const h = g.default || g, k = new h({ target: m, props: s || {} });
+        return l.current = k, () => k.$destroy();
       }
       if (g.mount) {
         const h = g.mount({ container: m, props: s || {} });
@@ -4748,14 +4757,14 @@ function wr({
         };
       }
     }
-  }, [g, r, b]), U(() => {
+  }, [g, r, x]), G(() => {
     r === "svelte" && l.current && l.current.$set?.(s);
   }, [s, r]), /* @__PURE__ */ d("div", { ref: u, className: o, style: { display: "contents" }, children: [
-    b && n,
+    x && n,
     r === "react" && g && /* @__PURE__ */ e(g, { ...s })
   ] });
 }
-class kr extends Ke {
+class wr extends Ge {
   constructor() {
     super(...arguments), this.state = {
       hasError: !1,
@@ -4785,46 +4794,46 @@ class kr extends Ke {
 }
 export {
   Ot as Avatar,
-  mr as AvatarStack,
-  dr as Badge,
+  ur as AvatarStack,
+  ir as Badge,
   Ae as Box,
   te as Button,
   lr as ButtonGroup,
-  Nr as Card,
-  ye as Checkbox,
+  yr as Card,
+  ve as Checkbox,
   vr as CommandPalette,
   mt as ContentLoading,
-  ve as DatePicker,
+  ye as DatePicker,
   ft as Dropdown,
-  kr as ErrorBoundary,
-  wr as FederatedResource,
+  wr as ErrorBoundary,
+  Nr as FederatedResource,
   Mt as FolderSelect,
   cr as Form,
-  gr as Heading,
+  br as Heading,
   oe as Icon,
-  fr as Image,
+  mr as Image,
   sr as Link,
-  yr as List,
+  gr as List,
   rr as MeetingGrid,
   St as Modal,
-  hr as PageHeader,
-  pr as PageToolbar,
+  fr as PageHeader,
+  hr as PageToolbar,
   nr as ParticipantTile,
-  ir as Popover,
+  Ze as Popover,
   ot as SearchableTextField,
   fe as Select,
-  br as SidebarMenu,
-  ur as Spinner,
-  ze as SplitButton,
+  xr as SidebarMenu,
+  dr as Spinner,
+  De as SplitButton,
   Et as StorageInput,
   or as TabBar,
   Le as Table,
   kt as Tabs,
-  Z as Text,
+  Y as Text,
   Ne as TextArea,
   ue as TextField,
   ar as VideoSurface,
-  xr as View,
+  pr as View,
   p as cn,
   tr as createSizes,
   er as createVariants