unifyedx-storybook-new 0.2.27 → 0.2.28

package/dist/unifyedx-storybook-new.es.js

@@ -1,7 +1,7 @@
 import { jsxs as n, jsx as e, Fragment as te } from "react/jsx-runtime";
-import re, { useState as L, useMemo as ue, useId as Qe, Fragment as Q, useEffect as Z, useCallback as ae, useRef as xe } from "react";
+import se, { useState as M, useMemo as ue, useId as Qe, Fragment as Q, useEffect as Z, useCallback as ne, useRef as xe } from "react";
 import { a as H, U as mt, X as ge, P as c, L as Ua, C as ve, b as tt, f as Ze, d as yt, D as Yt, F as qa, e as Ga, h as Ya, T as Ke, u as Wa, i as zt, I as Wt, j as Jt, k as Ja, l as Xa, m as Ha, n as Xt, S as vt, o as Ht, M as Qa, p as Za, q as wt, r as Ka, A as er, E as Qt, s as tr, t as ar, v as rr, w as nr, x as Zt, y as sr, z as Kt, B as ea, G as lr, H as ir, J as or, K as et, N as ut, O as ht, Q as cr, R as dr, V as ta, W as mr, Y as Nt, Z as ur, _ as hr, $ as Me, a0 as pr, a1 as gr, a2 as br, a3 as fr, a4 as xr, a5 as yr, a6 as St, a7 as vr, a8 as wr, a9 as Nr, aa as kr, ab as Cr, ac as zr, ad as Sr, ae as Dr, af as $r, ag as Fe, ah as aa, ai as Tr, aj as Ar, ak as Fr, al as Er, am as Rr, an as ra, ao as Ir, ap as Or, aq as na, ar as Pr, as as pt, at as sa, au as Lr } from "./vendor-wRQnjUYv.js";
-import { Popover as Mr, PopoverButton as Br, PopoverPanel as jr, Transition as he, Dialog as ye, TransitionChild as Ne, DialogPanel as Ee, DialogTitle as at, TabGroup as Vr, TabList as _r, Tab as se, TabPanels as Ur, RadioGroup as qe, Listbox as K, ListboxButton as qr, ListboxOptions as Gr, ListboxOption as Yr, SwitchGroup as Wr, Switch as ot, Menu as Jr, MenuButton as Xr, Portal as Hr, MenuItems as Qr, MenuItem as Zr, DialogBackdrop as Kr } from "@headlessui/react";
+import { Popover as Mr, PopoverButton as Br, PopoverPanel as jr, Transition as he, Dialog as ye, TransitionChild as Ne, DialogPanel as Ee, DialogTitle as at, TabGroup as Vr, TabList as _r, Tab as re, TabPanels as Ur, RadioGroup as qe, Listbox as K, ListboxButton as qr, ListboxOptions as Gr, ListboxOption as Yr, SwitchGroup as Wr, Switch as ot, Menu as Jr, MenuButton as Xr, Portal as Hr, MenuItems as Qr, MenuItem as Zr, DialogBackdrop as Kr } from "@headlessui/react";
 import { motion as le, AnimatePresence as Ce } from "framer-motion";
 import { d as en } from "./vendor-lodash-C6Pmit-j.js";
 import { useFloating as la, offset as ia, flip as oa, shift as ca, autoUpdate as da, useClick as tn, useDismiss as an, useInteractions as rn, FloatingPortal as nn } from "@floating-ui/react";
@@ -15,8 +15,8 @@ const kn = (t) => {
     a ^= t.charCodeAt(s), a += (a << 1) + (a << 4) + (a << 7) + (a << 8) + (a << 24);
   return a >>> 0;
 }, Cn = (t) => {
-  const a = (t ?? "").trim().toLowerCase(), s = parseInt((a.match(/\d+$/) ?? [0])[0], 10) || 0, i = kn(a), l = (i % 360 + 37 * s) % 360, m = 55 + (i >>> 8) % 20, o = 30 + (i >>> 16) % 10, u = 86 + (i >>> 24) % 8, p = `hsl(${l}, ${m}%, ${u}%)`, b = `hsl(${l}, ${m}%, ${o}%)`;
-  return { bg: p, text: b };
+  const a = (t ?? "").trim().toLowerCase(), s = parseInt((a.match(/\d+$/) ?? [0])[0], 10) || 0, i = kn(a), l = (i % 360 + 37 * s) % 360, m = 55 + (i >>> 8) % 20, o = 30 + (i >>> 16) % 10, u = 86 + (i >>> 24) % 8, p = `hsl(${l}, ${m}%, ${u}%)`, g = `hsl(${l}, ${m}%, ${o}%)`;
+  return { bg: p, text: g };
 }, zn = (t = "") => t.split(" ").map((a) => a[0]).slice(0, 2).join("").toUpperCase(), ze = ({
   src: t,
   name: a,
@@ -29,16 +29,16 @@ const kn = (t) => {
   className: m,
   ...o
 }) => {
-  const [u, p] = L(!1), b = ue(() => Cn(a), []), f = t && !u, r = !f && a, w = !f && !a, d = H(
+  const [u, p] = M(!1), g = ue(() => Cn(a), []), b = t && !u, r = !b && a, y = !b && !a, d = H(
     "avatar-container",
     `avatar--size-${s}`,
     m
-  ), h = f ? "transparent" : i || b.bg, z = l || b.text;
+  ), h = b ? "transparent" : i || g.bg, $ = l || g.text;
   return /* @__PURE__ */ n("div", { className: d, style: {
     backgroundColor: h,
-    color: z
+    color: $
   }, ...o, children: [
-    f && /* @__PURE__ */ e(
+    b && /* @__PURE__ */ e(
       "img",
       {
         src: t,
@@ -48,10 +48,10 @@ const kn = (t) => {
       }
     ),
     r && /* @__PURE__ */ e("span", { className: "avatar-initials", "aria-label": a, children: zn(a) }),
-    w && /* @__PURE__ */ e("span", { className: "avatar-icon", children: /* @__PURE__ */ e(mt, {}) })
+    y && /* @__PURE__ */ e("span", { className: "avatar-icon", children: /* @__PURE__ */ e(mt, {}) })
   ] });
 }, Sn = ({ children: t, max: a = 4, truncatedMessage: s = "Members", ...i }) => {
-  const l = re.Children.toArray(t), m = l.slice(0, a), o = l.length - a;
+  const l = se.Children.toArray(t), m = l.slice(0, a), o = l.length - a;
   return /* @__PURE__ */ n("div", { className: "avatar-group-container", ...i, children: [
     m,
     o > 0 && /* @__PURE__ */ n("div", { className: "avatar-container avatar--size-medium avatar-excess", children: [
@@ -74,14 +74,14 @@ const kn = (t) => {
   className: u,
   ...p
 }) => {
-  const b = H(
+  const g = H(
     "badge",
     `badge--variant-${a}`,
     `badge--size-${s}`,
     { "badge--with-remove": !!l },
     u
   );
-  return /* @__PURE__ */ n("span", { className: b, style: m && o ? {
+  return /* @__PURE__ */ n("span", { className: g, style: m && o ? {
     backgroundColor: m,
     color: o,
     borderColor: "#ff0000"
@@ -149,20 +149,20 @@ const $n = {
   icon: u,
   // Renamed for clarity, expecting a component type e.g., CheckCircle
   disabled: p = !1,
-  size: b = "medium",
-  label: f,
+  size: g = "medium",
+  label: b,
   children: r,
   // ✅ Add children to the props list
-  onClick: w,
+  onClick: y,
   ...d
 }) => {
-  const h = p || m, z = u && !f, $ = H(
+  const h = p || m, $ = u && !b, T = H(
     "btn-base",
-    $n[b],
+    $n[g],
     Tn[o],
     {
       "is-loading": m,
-      "btn-icon-only": z
+      "btn-icon-only": $
     },
     l
   );
@@ -171,15 +171,15 @@ const $n = {
     {
       "data-testid": t,
       type: s,
-      className: $,
+      className: T,
       disabled: h,
-      onClick: w,
-      title: a || z && i || (typeof f == "string" ? f : void 0),
-      "aria-label": i || z && a || (typeof f == "string" ? f : void 0),
+      onClick: y,
+      title: a || $ && i || (typeof b == "string" ? b : void 0),
+      "aria-label": i || $ && a || (typeof b == "string" ? b : void 0),
       ...d,
       children: m ? /* @__PURE__ */ e(Ua, { className: "loader-spin", "data-testid": "button-loader" }) : /* @__PURE__ */ n(te, { children: [
-        u && /* @__PURE__ */ e(u, { size: b === "large" ? 20 : 16 }),
-        f,
+        u && /* @__PURE__ */ e(u, { size: g === "large" ? 20 : 16 }),
+        b,
         r,
         " "
       ] })
@@ -218,13 +218,13 @@ const $n = {
   onChange: o,
   ...u
 }) => {
-  const p = Qe(), b = a || p;
+  const p = Qe(), g = a || p;
   return /* @__PURE__ */ n("div", { className: `checkbox-container ${i || ""}`, children: [
-    /* @__PURE__ */ n("label", { htmlFor: b, className: "checkbox-wrapper", children: [
+    /* @__PURE__ */ n("label", { htmlFor: g, className: "checkbox-wrapper", children: [
       /* @__PURE__ */ e(
         "input",
         {
-          id: b,
+          id: g,
           type: "checkbox",
           ref: l,
           className: "checkbox-input",
@@ -259,8 +259,8 @@ const $n = {
   className: u,
   ...p
 }) => {
-  const b = (f) => {
-    f.stopPropagation(), f.preventDefault(), s?.();
+  const g = (b) => {
+    b.stopPropagation(), b.preventDefault(), s?.();
   };
   return /* @__PURE__ */ n("div", { className: H("datepicker-wrapper", u), children: [
     l && /* @__PURE__ */ e("label", { className: "datepicker-label", htmlFor: "datepicker-input", children: l }),
@@ -287,7 +287,7 @@ const $n = {
           "button",
           {
             type: "button",
-            onClick: b,
+            onClick: g,
             className: "datepicker-clear-button",
             "aria-label": "Clear selected date",
             children: /* @__PURE__ */ e(ge, { size: 16 })
@@ -319,12 +319,12 @@ const $n = {
   className: u,
   ...p
 }) => {
-  const b = t?.from, f = t?.to, r = (d) => {
+  const g = t?.from, b = t?.to, r = (d) => {
     d.stopPropagation(), d.preventDefault(), s?.();
-  }, w = b && f ? /* @__PURE__ */ n(te, { children: [
-    Ze(b, "MMM d, y"),
+  }, y = g && b ? /* @__PURE__ */ n(te, { children: [
+    Ze(g, "MMM d, y"),
     " - ",
-    Ze(f, "MMM d, y")
+    Ze(b, "MMM d, y")
   ] }) : /* @__PURE__ */ e("span", { className: "datepicker-placeholder", children: i });
   return /* @__PURE__ */ n("div", { className: H("datepicker-wrapper", u), children: [
     l && /* @__PURE__ */ e("label", { className: "datepicker-label", htmlFor: "daterangepicker-input", children: l }),
@@ -340,14 +340,14 @@ const $n = {
               "datepicker-trigger--disabled": o
             }),
             disabled: o,
-            "aria-label": b && f ? `Selected range is ${w}` : i,
+            "aria-label": g && b ? `Selected range is ${y}` : i,
             children: [
               /* @__PURE__ */ e(yt, { className: "datepicker-icon" }),
-              /* @__PURE__ */ e("span", { className: "datepicker-value", children: w })
+              /* @__PURE__ */ e("span", { className: "datepicker-value", children: y })
             ]
           }
         ),
-        b && s && !o && /* @__PURE__ */ e(
+        g && s && !o && /* @__PURE__ */ e(
           "button",
           {
             type: "button",
@@ -627,15 +627,15 @@ const $n = {
   validFiles: o = [],
   rejectedFiles: u = [],
   handleRemoveValidFile: p,
-  handleRemoveRejectedFile: b,
-  handleSubmit: f,
+  handleRemoveRejectedFile: g,
+  handleSubmit: b,
   isSubmitting: r,
-  formErrors: w,
+  formErrors: y,
   // --- UI Text ---
   title: d = "Upload Files",
   subHeading: h = "Supports PNG, JPG, PDF. Max size: 50MB."
 }) => {
-  const z = o.length > 0 || u.length > 0;
+  const $ = o.length > 0 || u.length > 0;
   return /* @__PURE__ */ e(he, { appear: !0, show: t, as: Q, children: /* @__PURE__ */ n(
     ye,
     {
@@ -671,10 +671,10 @@ const $n = {
               Ee,
               {
                 className: "dialog-panel",
-                onClick: ($) => $.stopPropagation(),
+                onClick: (T) => T.stopPropagation(),
                 children: [
                   /* @__PURE__ */ e("input", { ...i() }),
-                  /* @__PURE__ */ n("form", { onSubmit: f, className: "form-wrapper", children: [
+                  /* @__PURE__ */ n("form", { onSubmit: b, className: "form-wrapper", children: [
                     /* @__PURE__ */ n("div", { className: "dialog-header", children: [
                       /* @__PURE__ */ e(at, { as: "h3", className: "dialog-title-text", children: d }),
                       /* @__PURE__ */ e(
@@ -710,11 +710,11 @@ const $n = {
                           ]
                         }
                       ),
-                      w.filesToUpload && /* @__PURE__ */ e("p", { className: "form-error-message", children: w.filesToUpload.message }),
-                      z && /* @__PURE__ */ n("div", { className: "file-list-container", children: [
+                      y.filesToUpload && /* @__PURE__ */ e("p", { className: "form-error-message", children: y.filesToUpload.message }),
+                      $ && /* @__PURE__ */ n("div", { className: "file-list-container", children: [
                         /* @__PURE__ */ e("h3", { children: "Upload Queue" }),
                         /* @__PURE__ */ n("ul", { className: "file-list", children: [
-                          o.map(($, A) => /* @__PURE__ */ n(
+                          o.map((T, F) => /* @__PURE__ */ n(
                             "li",
                             {
                               className: "file-item",
@@ -723,28 +723,28 @@ const $n = {
                                   /* @__PURE__ */ e(
                                     Tt,
                                     {
-                                      extension: $.name.split(".").pop()
+                                      extension: T.name.split(".").pop()
                                     }
                                   ),
                                   /* @__PURE__ */ n("div", { children: [
-                                    /* @__PURE__ */ e("p", { className: "file-item-name", children: $.name }),
-                                    /* @__PURE__ */ e("p", { className: "file-item-size", children: At($.size) })
+                                    /* @__PURE__ */ e("p", { className: "file-item-name", children: T.name }),
+                                    /* @__PURE__ */ e("p", { className: "file-item-size", children: At(T.size) })
                                   ] })
                                 ] }),
                                 /* @__PURE__ */ e(
                                   "button",
                                   {
                                     type: "button",
-                                    onClick: () => p(A),
+                                    onClick: () => p(F),
                                     className: "remove-file-button",
                                     children: /* @__PURE__ */ e(Ke, { size: 16 })
                                   }
                                 )
                               ]
                             },
-                            `${$.name}-${A}`
+                            `${T.name}-${F}`
                           )),
-                          u.map(({ file: $, message: A }, E) => /* @__PURE__ */ n(
+                          u.map(({ file: T, message: F }, A) => /* @__PURE__ */ n(
                             "li",
                             {
                               className: "file-item file-item--rejected",
@@ -753,27 +753,27 @@ const $n = {
                                   /* @__PURE__ */ e(
                                     Tt,
                                     {
-                                      extension: $.name.split(".").pop()
+                                      extension: T.name.split(".").pop()
                                     }
                                   ),
                                   /* @__PURE__ */ n("div", { children: [
-                                    /* @__PURE__ */ e("p", { className: "file-item-name", children: $.name }),
-                                    /* @__PURE__ */ e("p", { className: "file-item-size", children: At($.size) }),
-                                    /* @__PURE__ */ e("p", { className: "rejection-reason", children: A })
+                                    /* @__PURE__ */ e("p", { className: "file-item-name", children: T.name }),
+                                    /* @__PURE__ */ e("p", { className: "file-item-size", children: At(T.size) }),
+                                    /* @__PURE__ */ e("p", { className: "rejection-reason", children: F })
                                   ] })
                                 ] }),
                                 /* @__PURE__ */ e(
                                   "button",
                                   {
                                     type: "button",
-                                    onClick: () => b(E),
+                                    onClick: () => g(A),
                                     className: "remove-file-button",
                                     children: /* @__PURE__ */ e(Ke, { size: 16 })
                                   }
                                 )
                               ]
                             },
-                            `${$.name}-${E}`
+                            `${T.name}-${A}`
                           ))
                         ] })
                       ] })
@@ -858,75 +858,75 @@ const $n = {
   fetchCreatedOrUpdatedByUsers: u = async () => []
   // Mockable fetcher
 }) => {
-  const [p, b] = L({
+  const [p, g] = M({
     createdBy: [],
     updatedBy: []
-  }), [f, r] = L({
+  }), [b, r] = M({
     createdBy: !1,
     updatedBy: !1
-  }), [w, d] = L({
+  }), [y, d] = M({
     startDate: null
-  }), [h, z] = L({
+  }), [h, $] = M({
     endDate: null
-  }), $ = Wa({
+  }), T = Wa({
     initialValues: JSON.parse(JSON.stringify(m)),
     // Deep copy
-    onSubmit: (T) => {
-      const v = {};
-      Object.keys(T).forEach((g) => {
-        v[g] = {
-          operator: T[g].operator || "in",
-          values: Array.isArray(T[g].values) ? T[g].values : [],
-          range: T[g].range || null
+    onSubmit: (z) => {
+      const f = {};
+      Object.keys(z).forEach((v) => {
+        f[v] = {
+          operator: z[v].operator || "in",
+          values: Array.isArray(z[v].values) ? z[v].values : [],
+          range: z[v].range || null
         };
-      }), console.log("[storybook filter] Applied Filters:", v), typeof s == "function" && s({
-        filters: v,
-        activeCount: E
+      }), console.log("[storybook filter] Applied Filters:", f), typeof s == "function" && s({
+        filters: f,
+        activeCount: A
       }), a();
     },
     enableReinitialize: !0
-  }), A = ue(() => l.reduce((T, v) => {
-    const g = v.key, x = $.values[g];
+  }), F = ue(() => l.reduce((z, f) => {
+    const v = f.key, w = T.values[v];
     let C = !1;
-    if (x)
-      switch (v.type) {
+    if (w)
+      switch (f.type) {
         case "multiselect":
         case "multiselect-users":
-          C = Array.isArray(x.values) && x.values.length > 0;
+          C = Array.isArray(w.values) && w.values.length > 0;
           break;
         case "date":
-          (x.range && x.range !== "" || Array.isArray(x.values) && x.values.length > 0) && (C = !0);
+          (w.range && w.range !== "" || Array.isArray(w.values) && w.values.length > 0) && (C = !0);
           break;
       }
-    return T[g] = C, T;
-  }, {}), [l, $.values]), E = Object.values(A).filter(Boolean).length, I = ue(() => l.some((T) => {
-    if (T.type !== "date") return !1;
-    const v = $.values?.[T.key]?.values;
-    if (!Array.isArray(v) || v.length < 2) return !1;
-    const [g, x] = v;
-    if (!g || !x) return !1;
-    const C = g instanceof Date ? g : new Date(g), N = x instanceof Date ? x : new Date(x);
+    return z[v] = C, z;
+  }, {}), [l, T.values]), A = Object.values(F).filter(Boolean).length, I = ue(() => l.some((z) => {
+    if (z.type !== "date") return !1;
+    const f = T.values?.[z.key]?.values;
+    if (!Array.isArray(f) || f.length < 2) return !1;
+    const [v, w] = f;
+    if (!v || !w) return !1;
+    const C = v instanceof Date ? v : new Date(v), N = w instanceof Date ? w : new Date(w);
     return C > N;
-  }), [l, $.values]), j = async (T, v) => {
+  }), [l, T.values]), V = async (z, f) => {
     try {
-      r((x) => ({ ...x, [T]: !0 }));
-      const g = await u(T, v);
-      b((x) => ({ ...x, [T]: g }));
-    } catch (g) {
-      console.error(`Error fetching ${T} users:`, g);
+      r((w) => ({ ...w, [z]: !0 }));
+      const v = await u(z, f);
+      g((w) => ({ ...w, [z]: v }));
+    } catch (v) {
+      console.error(`Error fetching ${z} users:`, v);
     } finally {
-      r((g) => ({ ...g, [T]: !1 }));
+      r((v) => ({ ...v, [z]: !1 }));
     }
-  }, V = (T) => {
-    const v = l[T].key, g = l[T].url;
-    l[T].type === "multiselect-users" && p[v].length === 0 && !f[v] && j(v, g);
+  }, U = (z) => {
+    const f = l[z].key, v = l[z].url;
+    l[z].type === "multiselect-users" && p[f].length === 0 && !b[f] && V(f, v);
   }, G = () => {
-    $.resetForm(), b({ createdBy: [], updatedBy: [] }), i();
-  }, q = (T) => {
-    const v = l.find((C) => C.key === T);
-    if (!v) return null;
-    const g = $.values[T] || m[T], x = Array.isArray(g.values) ? g.values : [];
-    switch (v.type) {
+    T.resetForm(), g({ createdBy: [], updatedBy: [] }), i();
+  }, B = (z) => {
+    const f = l.find((C) => C.key === z);
+    if (!f) return null;
+    const v = T.values[z] || m[z], w = Array.isArray(v.values) ? v.values : [];
+    switch (f.type) {
       case "multiselect":
         return /* @__PURE__ */ n("div", { className: "filter-panel-content", children: [
           /* @__PURE__ */ n("div", { className: "filter-operator-group", children: [
@@ -934,10 +934,10 @@ const $n = {
             /* @__PURE__ */ e(
               "select",
               {
-                value: g.operator || "in",
-                onChange: (R) => $.setFieldValue(`${T}.operator`, R.target.value),
+                value: v.operator || "in",
+                onChange: (R) => T.setFieldValue(`${z}.operator`, R.target.value),
                 className: "filter-select",
-                children: v.operators.map((R) => /* @__PURE__ */ e("option", { value: R, children: R === "in" ? "Includes" : "Excludes" }, R))
+                children: f.operators.map((R) => /* @__PURE__ */ e("option", { value: R, children: R === "in" ? "Includes" : "Excludes" }, R))
               }
             )
           ] }),
@@ -947,42 +947,42 @@ const $n = {
                 "input",
                 {
                   type: "checkbox",
-                  id: `select-all-${T}`,
+                  id: `select-all-${z}`,
                   className: "filter-checkbox-input",
-                  checked: v.options.length > 0 && x.length === v.options.length,
+                  checked: f.options.length > 0 && w.length === f.options.length,
                   onChange: (R) => {
-                    const Y = R.target.checked ? v.options.map((W) => W.value) : [];
-                    $.setFieldValue(`${T}.values`, Y);
+                    const Y = R.target.checked ? f.options.map((W) => W.value) : [];
+                    T.setFieldValue(`${z}.values`, Y);
                   }
                 }
               ),
               /* @__PURE__ */ e(
                 "label",
                 {
-                  htmlFor: `select-all-${T}`,
+                  htmlFor: `select-all-${z}`,
                   className: "filter-checkbox-label",
                   children: "Select All"
                 }
               )
             ] }),
-            v.options.map((R) => /* @__PURE__ */ n("div", { className: "filter-checkbox-item", children: [
+            f.options.map((R) => /* @__PURE__ */ n("div", { className: "filter-checkbox-item", children: [
               /* @__PURE__ */ e(
                 "input",
                 {
                   type: "checkbox",
-                  id: `${T}-${R.value}`,
+                  id: `${z}-${R.value}`,
                   className: "filter-checkbox-input",
-                  checked: x.includes(R.value),
+                  checked: w.includes(R.value),
                   onChange: (Y) => {
-                    const W = Y.target.checked ? [...x, R.value] : x.filter((pe) => pe !== R.value);
-                    $.setFieldValue(`${T}.values`, W);
+                    const W = Y.target.checked ? [...w, R.value] : w.filter((pe) => pe !== R.value);
+                    T.setFieldValue(`${z}.values`, W);
                   }
                 }
               ),
               /* @__PURE__ */ e(
                 "label",
                 {
-                  htmlFor: `${T}-${R.value}`,
+                  htmlFor: `${z}-${R.value}`,
                   className: "filter-checkbox-label",
                   children: R.label
                 }
@@ -991,17 +991,17 @@ const $n = {
           ] })
         ] });
       case "multiselect-users":
-        const C = p[T] || [], N = f[T];
+        const C = p[z] || [], N = b[z];
         return /* @__PURE__ */ n("div", { className: "filter-panel-content", children: [
           /* @__PURE__ */ n("div", { className: "filter-operator-group", children: [
             /* @__PURE__ */ e("label", { className: "filter-label", children: "Operator:" }),
             /* @__PURE__ */ e(
               "select",
               {
-                value: g.operator || "in",
-                onChange: (R) => $.setFieldValue(`${T}.operator`, R.target.value),
+                value: v.operator || "in",
+                onChange: (R) => T.setFieldValue(`${z}.operator`, R.target.value),
                 className: "filter-select",
-                children: v.operators.map((R) => /* @__PURE__ */ e("option", { value: R, children: R === "in" ? "Includes" : "Excludes" }, R))
+                children: f.operators.map((R) => /* @__PURE__ */ e("option", { value: R, children: R === "in" ? "Includes" : "Excludes" }, R))
               }
             )
           ] }),
@@ -1011,13 +1011,13 @@ const $n = {
                 "input",
                 {
                   type: "checkbox",
-                  id: `select-all-users-${T}`,
+                  id: `select-all-users-${z}`,
                   className: "filter-checkbox-input",
-                  checked: C.length > 0 && x.length === C.length,
+                  checked: C.length > 0 && w.length === C.length,
                   onChange: (R) => {
                     const Y = R.target.checked ? C.map((W) => W.email) : [];
-                    $.setFieldValue(
-                      `${T}.values`,
+                    T.setFieldValue(
+                      `${z}.values`,
                       Y
                     );
                   }
@@ -1026,7 +1026,7 @@ const $n = {
               /* @__PURE__ */ e(
                 "label",
                 {
-                  htmlFor: `select-all-users-${T}`,
+                  htmlFor: `select-all-users-${z}`,
                   className: "filter-checkbox-label",
                   children: "Select All Users"
                 }
@@ -1037,13 +1037,13 @@ const $n = {
                 "input",
                 {
                   type: "checkbox",
-                  id: `${T}-${R.email}`,
+                  id: `${z}-${R.email}`,
                   className: "filter-checkbox-input",
-                  checked: x.includes(R.email),
+                  checked: w.includes(R.email),
                   onChange: (Y) => {
-                    const W = Y.target.checked ? [...x, R.email] : x.filter((pe) => pe !== R.email);
-                    $.setFieldValue(
-                      `${T}.values`,
+                    const W = Y.target.checked ? [...w, R.email] : w.filter((pe) => pe !== R.email);
+                    T.setFieldValue(
+                      `${z}.values`,
                       W
                     );
                   }
@@ -1052,7 +1052,7 @@ const $n = {
               /* @__PURE__ */ n(
                 "label",
                 {
-                  htmlFor: `${T}-${R.email}`,
+                  htmlFor: `${z}-${R.email}`,
                   className: "filter-checkbox-label",
                   children: [
                     /* @__PURE__ */ e("span", { className: "user-label-name", children: R.name }),
@@ -1064,9 +1064,9 @@ const $n = {
           ] }) : /* @__PURE__ */ e("div", { className: "text-center py-4 text-gray-500 text-sm", children: "No users loaded." }) })
         ] });
       case "date":
-        const y = g.values || [], [k, F] = y, M = k && F, U = y[0] || null, S = y[1] || null, O = {
-          startDate: U instanceof Date ? U.toISOString().slice(0, 10) : null,
-          endDate: U instanceof Date ? U.toISOString().slice(0, 10) : null
+        const x = v.values || [], [k, E] = x, L = k && E, q = x[0] || null, S = x[1] || null, O = {
+          startDate: q instanceof Date ? q.toISOString().slice(0, 10) : null,
+          endDate: q instanceof Date ? q.toISOString().slice(0, 10) : null
         }, D = {
           startDate: S instanceof Date ? S.toISOString().slice(0, 10) : null,
           endDate: S instanceof Date ? S.toISOString().slice(0, 10) : null
@@ -1080,15 +1080,15 @@ const $n = {
           { key: "custom", label: "Custom" }
         ], _ = (R) => {
           if (R === "anytime") {
-            $.setFieldValue(`${T}.values`, []), $.setFieldValue(`${T}.range`, "anytime");
+            T.setFieldValue(`${z}.values`, []), T.setFieldValue(`${z}.range`, "anytime");
             return;
           }
           if (R === "custom") {
-            $.setFieldValue(`${T}.range`, "custom");
+            T.setFieldValue(`${z}.range`, "custom");
             return;
           }
           const [Y, W] = On(R);
-          $.setFieldValue(`${T}.values`, Y && W ? [Y, W] : []), $.setFieldValue(`${T}.range`, R);
+          T.setFieldValue(`${z}.values`, Y && W ? [Y, W] : []), T.setFieldValue(`${z}.range`, R);
         };
         return /* @__PURE__ */ n("div", { className: "filter-panel-content", children: [
           /* @__PURE__ */ n("div", { className: "filter-operator-group", children: [
@@ -1096,20 +1096,20 @@ const $n = {
             /* @__PURE__ */ e(
               "select",
               {
-                value: g.operator,
-                onChange: (R) => $.setFieldValue(`${T}.operator`, R.target.value),
+                value: v.operator,
+                onChange: (R) => T.setFieldValue(`${z}.operator`, R.target.value),
                 className: "filter-select",
-                children: v.operators.map((R) => /* @__PURE__ */ e("option", { value: R, children: R === "in" ? "Is" : "Is not" }, R))
+                children: f.operators.map((R) => /* @__PURE__ */ e("option", { value: R, children: R === "in" ? "Is" : "Is not" }, R))
               }
             ),
-            M && /* @__PURE__ */ e(
+            L && /* @__PURE__ */ e(
               "button",
               {
                 type: "button",
                 onClick: () => {
-                  $.setFieldValue(
-                    T,
-                    m[T]
+                  T.setFieldValue(
+                    z,
+                    m[z]
                   );
                 },
                 className: "filter-clear-selection-button",
@@ -1118,7 +1118,7 @@ const $n = {
             )
           ] }),
           /* @__PURE__ */ e("div", { className: "pb-0", children: /* @__PURE__ */ e("div", { className: "space-y-3", children: P.map((R) => {
-            const Y = g.range === R.key || R.key === "anytime" && (!Array.isArray(g.values) || g.values.length === 0);
+            const Y = v.range === R.key || R.key === "anytime" && (!Array.isArray(v.values) || v.values.length === 0);
             return /* @__PURE__ */ n(
               "label",
               {
@@ -1128,7 +1128,7 @@ const $n = {
                     "input",
                     {
                       type: "radio",
-                      name: `preset-${T}`,
+                      name: `preset-${z}`,
                       checked: Y,
                       onChange: () => _(R.key),
                       className: "h-4 w-4"
@@ -1152,8 +1152,8 @@ const $n = {
                   useRange: !1,
                   value: O,
                   onChange: (R) => {
-                    const Y = R?.startDate ? Be(new Date(R.startDate)) : null, W = y[1] || null;
-                    Y && ($.setFieldValue(`${T}.values`, [Y, W]), $.setFieldValue(`${T}.range`, "custom"));
+                    const Y = R?.startDate ? Be(new Date(R.startDate)) : null, W = x[1] || null;
+                    Y && (T.setFieldValue(`${z}.values`, [Y, W]), T.setFieldValue(`${z}.range`, "custom"));
                   },
                   inputClassName: "w-full rounded-xl border border-[#767676] px-4 py-2 text-sm font-normal text-[#101112] focus:border-violet-500 focus:outline-none focus:ring-1 focus:ring-violet-500",
                   primaryColor: "violet",
@@ -1176,8 +1176,8 @@ const $n = {
                   useRange: !1,
                   value: D,
                   onChange: (R) => {
-                    const Y = R?.startDate ? je(new Date(R.startDate)) : null, W = y[0] || null;
-                    Y && ($.setFieldValue(`${T}.values`, [W, Y]), $.setFieldValue(`${T}.range`, "custom"));
+                    const Y = R?.startDate ? je(new Date(R.startDate)) : null, W = x[0] || null;
+                    Y && (T.setFieldValue(`${z}.values`, [W, Y]), T.setFieldValue(`${z}.range`, "custom"));
                   },
                   inputClassName: "w-full rounded-xl border border-[#767676] px-4 py-2 text-sm font-normal text-[#101112] focus:border-violet-500 focus:outline-none focus:ring-1 focus:ring-violet-500",
                   primaryColor: "violet",
@@ -1190,7 +1190,7 @@ const $n = {
                 }
               )
             ] }),
-            U && S && U > S && /* @__PURE__ */ e("div", { className: "text-red-500 text-xs mt-2", children: "End date must be after start date" })
+            q && S && q > S && /* @__PURE__ */ e("div", { className: "text-red-500 text-xs mt-2", children: "End date must be after start date" })
           ] })
         ] });
       default:
@@ -1234,22 +1234,22 @@ const $n = {
               }
             )
           ] }),
-          /* @__PURE__ */ n("form", { onSubmit: $.handleSubmit, className: "filter-form", children: [
+          /* @__PURE__ */ n("form", { onSubmit: T.handleSubmit, className: "filter-form", children: [
             /* @__PURE__ */ e("div", { className: "filter-content-wrapper", children: /* @__PURE__ */ n(
               Vr,
               {
                 vertical: !0,
-                onChange: V,
+                onChange: U,
                 style: {
                   display: "flex",
                   flexGrow: 1
                 },
                 children: [
-                  /* @__PURE__ */ e(_r, { className: "filter-tabs-list", children: l.map((T) => /* @__PURE__ */ n(se, { className: "filter-tab-item", children: [
+                  /* @__PURE__ */ e(_r, { className: "filter-tabs-list", children: l.map((z) => /* @__PURE__ */ n(re, { className: "filter-tab-item", children: [
                     /* @__PURE__ */ e("div", { className: "filter-selection-horizontal-indicator" }),
                     /* @__PURE__ */ n("div", { className: "filter-lbl-indicator-wrapper", children: [
-                      T.label,
-                      A[T.key] && /* @__PURE__ */ e(
+                      z.label,
+                      F[z.key] && /* @__PURE__ */ e(
                         "span",
                         {
                           className: "filter-active-indicator",
@@ -1257,9 +1257,9 @@ const $n = {
                         }
                       )
                     ] })
-                  ] }, T.key)) }),
-                  /* @__PURE__ */ e(Ur, { className: "filter-tabs-panels", children: l.map((T) => /* @__PURE__ */ e(
-                    se.Panel,
+                  ] }, z.key)) }),
+                  /* @__PURE__ */ e(Ur, { className: "filter-tabs-panels", children: l.map((z) => /* @__PURE__ */ e(
+                    re.Panel,
                     {
                       className: "filter-tab-panel",
                       children: /* @__PURE__ */ e(
@@ -1269,12 +1269,12 @@ const $n = {
                           animate: { opacity: 1, x: 0 },
                           transition: { duration: 0.3 },
                           className: "h-full",
-                          children: q(T.key)
+                          children: B(z.key)
                         },
-                        T.key
+                        z.key
                       )
                     },
-                    T.key
+                    z.key
                   )) })
                 ]
               }
@@ -1293,12 +1293,12 @@ const $n = {
                 "button",
                 {
                   type: "submit",
-                  disabled: !$.dirty || I,
+                  disabled: !T.dirty || I,
                   className: "filter-button apply",
                   children: [
                     "Apply Filters",
                     " ",
-                    E > 0 ? `(${E})` : ""
+                    A > 0 ? `(${A})` : ""
                   ]
                 }
               )
@@ -1372,10 +1372,10 @@ const $n = {
   // 'info', 'warning', 'delete'
   loading: u = !1,
   buttonProps: p = {},
-  size: b
+  size: g
   // Add size prop
 }) => {
-  const f = Rt[o] || Rt.info, r = f.icon, w = () => {
+  const b = Rt[o] || Rt.info, r = b.icon, y = () => {
     a({ primary: !0, secondary: !1 });
   }, d = () => {
     a({ primary: !1, secondary: !0 });
@@ -1404,9 +1404,9 @@ const $n = {
         leave: "ease-in duration-200",
         leaveFrom: "opacity-100 scale-100",
         leaveTo: "opacity-0 scale-95",
-        children: /* @__PURE__ */ n(Ee, { className: b === "large" ? "modal-panel modal-panel--large" : "modal-panel", children: [
+        children: /* @__PURE__ */ n(Ee, { className: g === "large" ? "modal-panel modal-panel--large" : "modal-panel", children: [
           /* @__PURE__ */ n("div", { className: "modal-content-wrapper", children: [
-            /* @__PURE__ */ e("div", { className: `modal-icon-container ${f.iconClass}`, children: /* @__PURE__ */ e(r, { size: 24, "aria-hidden": "true" }) }),
+            /* @__PURE__ */ e("div", { className: `modal-icon-container ${b.iconClass}`, children: /* @__PURE__ */ e(r, { size: 24, "aria-hidden": "true" }) }),
             /* @__PURE__ */ n("div", { className: "modal-text-content", children: [
               /* @__PURE__ */ e(at, { as: "h3", className: "modal-title", children: s }),
               /* @__PURE__ */ e("div", { className: "modal-description", children: i })
@@ -1424,7 +1424,7 @@ const $n = {
             l && /* @__PURE__ */ e(
               ee,
               {
-                onClick: w,
+                onClick: y,
                 label: l,
                 ...p
               }
@@ -1442,12 +1442,12 @@ const $n = {
   onItemsPerPageChange: l,
   itemsPerPageOptions: m = [10, 15, 20]
 }) => {
-  const o = Math.ceil(a / s), [u, p] = L(t);
+  const o = Math.ceil(a / s), [u, p] = M(t);
   Z(() => {
     p(t);
   }, [t]);
-  const b = Math.min((t - 1) * s + 1, a), f = Math.min(t * s, a), r = (w) => {
-    w.preventDefault();
+  const g = Math.min((t - 1) * s + 1, a), b = Math.min(t * s, a), r = (y) => {
+    y.preventDefault();
     let d = parseInt(u, 10);
     isNaN(d) || d < 1 ? d = 1 : d > o && (d = o), p(d), d !== t && i(d);
   };
@@ -1460,14 +1460,14 @@ const $n = {
           id: "items-per-page",
           className: "pagination-select",
           value: s,
-          onChange: (w) => l(Number(w.target.value)),
-          children: m.map((w) => /* @__PURE__ */ e("option", { value: w, children: w }, w))
+          onChange: (y) => l(Number(y.target.value)),
+          children: m.map((y) => /* @__PURE__ */ e("option", { value: y, children: y }, y))
         }
       ),
       /* @__PURE__ */ n("span", { className: "pagination-info", children: [
-        b,
+        g,
         "-",
-        f,
+        b,
         " of ",
         a,
         " items"
@@ -1500,7 +1500,7 @@ const $n = {
             type: "number",
             className: "page-input",
             value: u,
-            onChange: (w) => p(w.target.value),
+            onChange: (y) => p(y.target.value),
             onBlur: r,
             "aria-label": `Current page, Page ${t}`
           }
@@ -1586,20 +1586,20 @@ const $n = {
   customClass: m = "",
   ...o
 }) => {
-  const [u, p] = L(t);
+  const [u, p] = M(t);
   Z(() => {
     p(t);
   }, [t]);
-  const b = ae(
+  const g = ne(
     en((r) => {
       a?.(r);
     }, s),
     [s, a]
   );
-  Z(() => (u !== t && b(u), () => {
-    b.cancel();
-  }), [u, b, t]);
-  const f = (r) => {
+  Z(() => (u !== t && g(u), () => {
+    g.cancel();
+  }), [u, g, t]);
+  const b = (r) => {
     p(r.target.value);
   };
   return /* @__PURE__ */ n("div", { className: `search-bar-wrapper ${m}`, children: [
@@ -1614,7 +1614,7 @@ const $n = {
         type: "search",
         name: "search",
         value: u,
-        onChange: f,
+        onChange: b,
         ...o
       }
     )
@@ -1633,9 +1633,9 @@ const $n = {
   // From RHF's <Controller>
   showSearch: p = !0
 }) => {
-  const [b, f] = L(""), r = b === "" ? i : i.filter(
-    (d) => d.label.toLowerCase().includes(b.toLowerCase())
-  ), w = i.find((d) => a?.id ? d.id === a.id : d.id === a || d.value === a);
+  const [g, b] = M(""), r = g === "" ? i : i.filter(
+    (d) => d.label.toLowerCase().includes(g.toLowerCase())
+  ), y = i.find((d) => a?.id ? d.id === a.id : d.id === a || d.value === a);
   return /* @__PURE__ */ e(K, { value: a, onChange: s, disabled: m, children: /* @__PURE__ */ n("div", { className: "select-wrapper", ref: u, children: [
     t && /* @__PURE__ */ e("label", { className: "select-label", children: t }),
     /* @__PURE__ */ n("div", { className: "select-button-container", children: [
@@ -1646,7 +1646,7 @@ const $n = {
             "select-button--error": !!o
           }),
           children: [
-            /* @__PURE__ */ e("span", { className: "select-value-display", children: w ? w.label : /* @__PURE__ */ e("span", { className: "placeholder", children: l }) }),
+            /* @__PURE__ */ e("span", { className: "select-value-display", children: y ? y.label : /* @__PURE__ */ e("span", { className: "placeholder", children: l }) }),
             /* @__PURE__ */ e(Ht, { className: "select-chevron", "aria-hidden": "true" })
           ]
         }
@@ -1661,12 +1661,12 @@ const $n = {
             p && /* @__PURE__ */ e("div", { className: "search-input-wrapper", children: /* @__PURE__ */ e(
               be,
               {
-                value: b,
-                onDebouncedChange: f,
+                value: g,
+                onDebouncedChange: b,
                 placeholder: "Search..."
               }
             ) }),
-            /* @__PURE__ */ e("div", { className: "select-options-list", children: r.length === 0 && b !== "" ? /* @__PURE__ */ e("div", { className: "no-results", children: "No results found." }) : r.map((d) => /* @__PURE__ */ e(
+            /* @__PURE__ */ e("div", { className: "select-options-list", children: r.length === 0 && g !== "" ? /* @__PURE__ */ e("div", { className: "no-results", children: "No results found." }) : r.map((d) => /* @__PURE__ */ e(
               Yr,
               {
                 className: ({ active: h }) => `select-option ${h ? "active" : ""}`,
@@ -1700,7 +1700,7 @@ const $n = {
     o && /* @__PURE__ */ e("p", { className: "select-error-message", children: o })
   ] }) });
 }, Ln = () => {
-  const [t, a] = L(window.location.pathname);
+  const [t, a] = M(window.location.pathname);
   return Z(() => {
     const s = () => {
       a(window.location.pathname);
@@ -1715,18 +1715,18 @@ const $n = {
       return s;
   return null;
 }, fa = ({ item: t, isCollapsed: a, level: s = 0 }) => {
-  const { pathname: i } = Ln(), l = t.href || t.url || t.path, [m, o] = L(!1), u = t.icon;
+  const { pathname: i } = Ln(), l = t.href || t.url || t.path, [m, o] = M(!1), u = t.icon;
   Z(() => {
     xt([t], i) && o(!0);
   }, [t, i]);
-  const p = i === l, b = !p && !!xt([t], i), f = (r) => {
+  const p = i === l, g = !p && !!xt([t], i), b = (r) => {
     r.preventDefault(), o(!m);
   };
   return /* @__PURE__ */ n(
     "div",
     {
       className: H("nav-item-container", {
-        "nav-item-container--parent-active": b,
+        "nav-item-container--parent-active": g,
         [`nav-item-container--level-${s}`]: s > 0
       }),
       children: [
@@ -1748,7 +1748,7 @@ const $n = {
                 "button",
                 {
                   className: "nav-chevron-button",
-                  onClick: f,
+                  onClick: b,
                   "aria-expanded": m,
                   "aria-label": m ? "Collapse menu" : "Expand menu",
                   children: /* @__PURE__ */ e(
@@ -1905,16 +1905,16 @@ const $n = {
   // ✅ New prop to control visibility
   ...u
 }) => {
-  const p = a || u.name, [b, f] = L(
+  const p = a || u.name, [g, b] = M(
     u.value?.length || u.defaultValue?.length || 0
   ), r = (d) => {
-    f(d.target.value.length), u.onChange && u.onChange(d);
-  }, w = m - b;
+    b(d.target.value.length), u.onChange && u.onChange(d);
+  }, y = m - g;
   return /* @__PURE__ */ n("div", { className: `textarea-wrapper ${i || ""}`, children: [
     /* @__PURE__ */ n("div", { className: "textarea-header", children: [
       t && /* @__PURE__ */ e("label", { htmlFor: p, className: "textarea-label", children: t }),
       o && m && /* @__PURE__ */ n("span", { className: "char-counter", children: [
-        w,
+        y,
         " characters remaining"
       ] })
     ] }),
@@ -1972,9 +1972,9 @@ const $n = {
   // For external styling of the tooltip itself
   ...o
 }) => {
-  const u = re.useId();
+  const u = se.useId();
   return /* @__PURE__ */ n(te, { children: [
-    re.cloneElement(t, { "data-tooltip-id": u }),
+    se.cloneElement(t, { "data-tooltip-id": u }),
     /* @__PURE__ */ e(
       Ka,
       {
@@ -2010,15 +2010,15 @@ const $n = {
   title: o,
   description: u,
   showProgress: p = !0,
-  closeOnOverlayClick: b = !0
+  closeOnOverlayClick: g = !0
 }) => {
-  const f = s[i], r = Object.keys(s), w = r.indexOf(i), d = (w + 1) / r.length * 100, h = w > 0 && m.onBack;
+  const b = s[i], r = Object.keys(s), y = r.indexOf(i), d = (y + 1) / r.length * 100, h = y > 0 && m.onBack;
   return /* @__PURE__ */ e(he, { show: t, as: Q, children: /* @__PURE__ */ n(
     ye,
     {
       as: "div",
       className: "wizard-dialog",
-      onClose: b ? a : () => {
+      onClose: g ? a : () => {
       },
       children: [
         /* @__PURE__ */ e(
@@ -2099,7 +2099,7 @@ const $n = {
                       },
                       className: "wizard-step-motion-wrapper",
                       style: { overflowX: "hidden" },
-                      children: f && /* @__PURE__ */ e(f, { ...m })
+                      children: b && /* @__PURE__ */ e(b, { ...m })
                     },
                     i
                   )
@@ -2130,11 +2130,11 @@ const $n = {
   // Renamed for clarity, expecting a component type e.g., CheckCircle
   disabled: u = !1,
   size: p = "small",
-  label: b,
-  children: f,
+  label: g,
+  children: b,
   // ✅ Add children to the props list
   onClick: r,
-  ...w
+  ...y
 }) => {
   const d = u, h = H(
     "btn-base",
@@ -2153,7 +2153,7 @@ const $n = {
       onClick: r,
       title: i,
       "aria-label": i,
-      ...w,
+      ...y,
       children: o && /* @__PURE__ */ e(o, { size: p === "large" ? 20 : 16 })
     }
   );
@@ -2468,41 +2468,41 @@ function Hn({
     // timeout: 20000,
   });
   s.interceptors.response.use(
-    (b) => b?.data ?? {
-      message: b?.statusText || "Request succeeded"
+    (g) => g?.data ?? {
+      message: g?.statusText || "Request succeeded"
     },
-    (b) => {
-      const f = Xn(b), r = f.status;
-      return t && (r === 401 || r === 403) && (window.location.href.includes("/login") || (window.historyPath = window.location.pathname, localStorage.clear(), sessionStorage.clear(), window.location.href = "/login")), Promise.reject(f);
+    (g) => {
+      const b = Xn(g), r = b.status;
+      return t && (r === 401 || r === 403) && (window.location.href.includes("/login") || (window.historyPath = window.location.pathname, localStorage.clear(), sessionStorage.clear(), window.location.href = "/login")), Promise.reject(b);
     }
   );
-  function i({ open: b = !1, customHeader: f = {} } = {}) {
-    if (b) {
-      const { Authorization: r, ...w } = It();
+  function i({ open: g = !1, customHeader: b = {} } = {}) {
+    if (g) {
+      const { Authorization: r, ...y } = It();
       return {
-        headers: { ...w, ...a, ...f }
+        headers: { ...y, ...a, ...b }
       };
     }
-    return { headers: { ...It(), ...f } };
+    return { headers: { ...It(), ...b } };
   }
-  async function l(b, f, r = !1, w = {}) {
-    return s.get(b, {
-      params: f,
-      ...i({ open: r, customHeader: w })
+  async function l(g, b, r = !1, y = {}) {
+    return s.get(g, {
+      params: b,
+      ...i({ open: r, customHeader: y })
     });
   }
-  async function m(b, f, r = !1, w = {}) {
-    const d = { ...i({ open: r, customHeader: w }) };
-    return f !== void 0 && (d.data = f), s.delete(b, d);
+  async function m(g, b, r = !1, y = {}) {
+    const d = { ...i({ open: r, customHeader: y }) };
+    return b !== void 0 && (d.data = b), s.delete(g, d);
   }
-  async function o(b, f = {}, r = !1, w = {}) {
-    return s.post(b, f, i({ open: r, customHeader: w }));
+  async function o(g, b = {}, r = !1, y = {}) {
+    return s.post(g, b, i({ open: r, customHeader: y }));
   }
-  async function u(b, f = {}, r = !1, w = {}) {
-    return s.put(b, f, i({ open: r, customHeader: w }));
+  async function u(g, b = {}, r = !1, y = {}) {
+    return s.put(g, b, i({ open: r, customHeader: y }));
   }
-  async function p(b, f = {}, r = !1, w = {}) {
-    return s.patch(b, f, i({ open: r, customHeader: w }));
+  async function p(g, b = {}, r = !1, y = {}) {
+    return s.patch(g, b, i({ open: r, customHeader: y }));
   }
   return {
     instance: s,
@@ -2600,7 +2600,7 @@ const Re = Hn(), Ve = Re.axiosGet, Qn = Re.axiosDelete, _e = Re.axiosPost, Zn =
     return es(i);
   }
 }, Ct = (t, a) => {
-  const [s, i] = L(t);
+  const [s, i] = M(t);
   return Z(
     () => {
       const l = sn(() => {
@@ -2636,15 +2636,15 @@ const Re = Hn(), Ve = Re.axiosGet, Qn = Re.axiosDelete, _e = Re.axiosPost, Zn =
       className: "flex items-center justify-between p-3 border border-gray-300 rounded-lg hover:bg-gray-50 hover:cursor-pointer transition-colors duration-150",
       children: [
         /* @__PURE__ */ n("div", { className: "flex items-center gap-3 overflow-hidden", children: [
-          /* @__PURE__ */ e("div", { className: "flex items-center", children: l.map((b, f) => /* @__PURE__ */ e(
+          /* @__PURE__ */ e("div", { className: "flex items-center", children: l.map((g, b) => /* @__PURE__ */ e(
             "img",
             {
-              src: b.avatarUrl || `https://avatar.vercel.sh/${b.name}.svg?text=${b?.name?.charAt(0) || "U"}`,
-              alt: b.name,
-              className: `w-10 h-10 rounded-full border-2 border-white ${f > 0 ? "-ml-4" : ""}`,
-              style: { zIndex: f }
+              src: g.avatarUrl || `https://avatar.vercel.sh/${g.name}.svg?text=${g?.name?.charAt(0) || "U"}`,
+              alt: g.name,
+              className: `w-10 h-10 rounded-full border-2 border-white ${b > 0 ? "-ml-4" : ""}`,
+              style: { zIndex: b }
             },
-            b.id || f
+            g.id || b
           )) }),
           /* @__PURE__ */ e("p", { className: "text-sm font-medium text-gray-800 truncate", children: p })
         ] }),
@@ -2672,37 +2672,37 @@ const Re = Hn(), Ve = Re.axiosGet, Qn = Re.axiosDelete, _e = Re.axiosPost, Zn =
   },
   isChanged: u = !1
 }) => {
-  const [p, b] = L(Pt[0]), [f, r] = L(""), w = Ct(f, 400), [d, h] = L([]), [z, $] = L(/* @__PURE__ */ new Set()), [A, E] = L(!1), [I, j] = L(Lt[0]), {
-    control: V,
+  const [p, g] = M(Pt[0]), [b, r] = M(""), y = Ct(b, 400), [d, h] = M([]), [$, T] = M(/* @__PURE__ */ new Set()), [F, A] = M(!1), [I, V] = M(Lt[0]), {
+    control: U,
     handleSubmit: G,
-    watch: q,
-    formState: { errors: T, isSubmitting: v }
+    watch: B,
+    formState: { errors: z, isSubmitting: f }
   } = lr({
     defaultValues: { pendingInvites: [] },
     resolver: cr(as)
-  }), { fields: g, append: x, remove: C, update: N } = ir({
-    control: V,
+  }), { fields: v, append: w, remove: C, update: N } = ir({
+    control: U,
     name: "pendingInvites"
-  }), y = q("pendingInvites");
+  }), x = B("pendingInvites");
   Z(() => {
-    w.length > 1 ? (E(!0), Kn(p.name, w).then((D) => {
+    y.length > 1 ? (A(!0), Kn(p.name, y).then((D) => {
       h(D);
-    }).catch((D) => console.error("Search failed:", D)).finally(() => E(!1))) : (h([]), $(/* @__PURE__ */ new Set()));
-  }, [w, p]);
+    }).catch((D) => console.error("Search failed:", D)).finally(() => A(!1))) : (h([]), T(/* @__PURE__ */ new Set()));
+  }, [y, p]);
   const k = (D) => {
-    $((P) => {
+    T((P) => {
       const _ = new Set(P);
       return _.has(D) ? _.delete(D) : _.add(D), _;
     });
-  }, F = () => {
-    d.filter((D) => z.has(D.id)).forEach((D) => {
-      g.find((P) => P.id === D.id) || x({ ...D, permission: I.name });
-    }), $(/* @__PURE__ */ new Set()), r("");
-  }, M = (D) => {
-    j(D), g.forEach(
-      (P, _) => N(_, { ...g[_], permission: D.name })
+  }, E = () => {
+    d.filter((D) => $.has(D.id)).forEach((D) => {
+      v.find((P) => P.id === D.id) || w({ ...D, permission: I.name });
+    }), T(/* @__PURE__ */ new Set()), r("");
+  }, L = (D) => {
+    V(D), v.forEach(
+      (P, _) => N(_, { ...v[_], permission: D.name })
     );
-  }, U = async (D) => {
+  }, q = async (D) => {
     try {
       if (l === de.DRIVE) {
         const P = D.pendingInvites.map((R) => ({
@@ -2747,7 +2747,7 @@ const Re = Hn(), Ve = Re.axiosGet, Qn = Re.axiosDelete, _e = Re.axiosPost, Zn =
       throw console.error("Failed to submit invites:", P), P;
     }
   }, S = (D) => {
-    const P = i[p.code].find((_) => _.name === D.name && _.permission !== "remove") || y.find((_) => _.name === D.name);
+    const P = i[p.code].find((_) => _.name === D.name && _.permission !== "remove") || x.find((_) => _.name === D.name);
     return P ? `${P.permission}` : "";
   }, O = () => {
     switch (l) {
@@ -2761,7 +2761,7 @@ const Re = Hn(), Ve = Re.axiosGet, Qn = Re.axiosDelete, _e = Re.axiosPost, Zn =
         return "Add User, Groups or Roles test";
     }
   };
-  return ue(() => (console.log("InviteFlow - isChanged:", u, "pendingInvites.length:", y.length), y.length === 0 && !u), [y.length, u]), /* @__PURE__ */ n("div", { className: "flex flex-col h-full bg-white", children: [
+  return ue(() => (console.log("InviteFlow - isChanged:", u, "pendingInvites.length:", x.length), x.length === 0 && !u), [x.length, u]), /* @__PURE__ */ n("div", { className: "flex flex-col h-full bg-white", children: [
     /* @__PURE__ */ n("header", { className: "flex items-center justify-between p-4 border-b border-gray-300 flex-shrink-0", children: [
       /* @__PURE__ */ e(ye.Title, { className: " text-gray-900 !mb-0 text-lg font-semibold", children: O() }),
       /* @__PURE__ */ n("div", { className: "flex items-center gap-4", children: [
@@ -2790,7 +2790,7 @@ const Re = Hn(), Ve = Re.axiosGet, Qn = Re.axiosDelete, _e = Re.axiosPost, Zn =
         }
       ),
       /* @__PURE__ */ n("div", { className: "relative grid grid-cols-3 gap-2 items-start", children: [
-        /* @__PURE__ */ e("div", { className: "col-span-1", children: /* @__PURE__ */ e(K, { value: p, onChange: b, children: /* @__PURE__ */ n("div", { className: "relative", children: [
+        /* @__PURE__ */ e("div", { className: "col-span-1", children: /* @__PURE__ */ e(K, { value: p, onChange: g, children: /* @__PURE__ */ n("div", { className: "relative", children: [
           /* @__PURE__ */ n(K.Button, { className: "relative w-full border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left hover:cursor-pointer focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm", children: [
             /* @__PURE__ */ n("span", { className: "flex items-center", children: [
               /* @__PURE__ */ e(p.icon, { className: "h-5 w-5 text-gray-400 mr-2" }),
@@ -2839,10 +2839,10 @@ const Re = Hn(), Ve = Re.axiosGet, Qn = Re.axiosDelete, _e = Re.axiosPost, Zn =
           {
             placeholder: `Search by ${p.name.toLowerCase()}...`,
             onDebouncedChange: (D) => r(D),
-            value: f
+            value: b
           }
         ) }),
-        /* @__PURE__ */ e(Ce, { children: (d?.length > 0 || A) && /* @__PURE__ */ e(
+        /* @__PURE__ */ e(Ce, { children: (d?.length > 0 || F) && /* @__PURE__ */ e(
           le.div,
           {
             initial: { opacity: 0, y: -10 },
@@ -2850,7 +2850,7 @@ const Re = Hn(), Ve = Re.axiosGet, Qn = Re.axiosDelete, _e = Re.axiosPost, Zn =
             exit: { opacity: 0, y: -10 },
             transition: { duration: 0.2 },
             className: "absolute top-full mt-2 w-full col-span-3 bg-white border border-gray-300 rounded-lg shadow-lg z-10",
-            children: A ? /* @__PURE__ */ e("div", { className: "p-4 text-center text-gray-500", children: "Loading..." }) : /* @__PURE__ */ n(te, { children: [
+            children: F ? /* @__PURE__ */ e("div", { className: "p-4 text-center text-gray-500", children: "Loading..." }) : /* @__PURE__ */ n(te, { children: [
               /* @__PURE__ */ e("div", { className: "max-h-60 overflow-y-auto p-2 space-y-1", children: d.map((D) => {
                 const P = S(D);
                 return /* @__PURE__ */ n(
@@ -2863,7 +2863,7 @@ const Re = Hn(), Ve = Re.axiosGet, Qn = Re.axiosDelete, _e = Re.axiosPost, Zn =
                         "input",
                         {
                           type: "checkbox",
-                          checked: z.has(D.id),
+                          checked: $.has(D.id),
                           readOnly: !0,
                           className: "h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500",
                           disabled: !!P
@@ -2899,8 +2899,8 @@ const Re = Hn(), Ve = Re.axiosGet, Qn = Re.axiosDelete, _e = Re.axiosPost, Zn =
                 /* @__PURE__ */ e(
                   "button",
                   {
-                    onClick: F,
-                    disabled: z.size === 0,
+                    onClick: E,
+                    disabled: $.size === 0,
                     className: "px-3 py-1 text-sm text-white bg-blue-600 rounded-md hover:bg-blue-700 disabled:bg-blue-300 disabled:cursor-not-allowed hover:cursor-pointer",
                     children: "Add"
                   }
@@ -2910,7 +2910,7 @@ const Re = Hn(), Ve = Re.axiosGet, Qn = Re.axiosDelete, _e = Re.axiosPost, Zn =
           }
         ) })
       ] }),
-      /* @__PURE__ */ e(Ce, { children: g.length > 0 && /* @__PURE__ */ n(
+      /* @__PURE__ */ e(Ce, { children: v.length > 0 && /* @__PURE__ */ n(
         le.div,
         {
           initial: { opacity: 0, y: 20 },
@@ -2920,14 +2920,14 @@ const Re = Hn(), Ve = Re.axiosGet, Qn = Re.axiosDelete, _e = Re.axiosPost, Zn =
             /* @__PURE__ */ n("div", { className: "flex justify-between items-center", children: [
               /* @__PURE__ */ n("div", { className: "font-semibold text-gray-800", children: [
                 "Pending Invites (",
-                g.length,
+                v.length,
                 ")"
               ] }),
               l === de.DRIVE && /* @__PURE__ */ e(
                 K,
                 {
                   value: I,
-                  onChange: M,
+                  onChange: L,
                   children: /* @__PURE__ */ n("div", { className: "relative", children: [
                     /* @__PURE__ */ n(K.Button, { className: "relative w-full border border-gray-300 bg-white rounded-md shadow-sm pl-3 pr-10 py-2 text-left hover:cursor-pointer focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm", children: [
                       /* @__PURE__ */ n("span", { className: "flex items-center", children: [
@@ -2985,7 +2985,7 @@ const Re = Hn(), Ve = Re.axiosGet, Qn = Re.axiosDelete, _e = Re.axiosPost, Zn =
                 }
               )
             ] }),
-            /* @__PURE__ */ e("div", { className: "space-y-2", children: /* @__PURE__ */ e(Ce, { children: g.map((D, P) => /* @__PURE__ */ n(
+            /* @__PURE__ */ e("div", { className: "space-y-2", children: /* @__PURE__ */ e(Ce, { children: v.map((D, P) => /* @__PURE__ */ n(
               le.div,
               {
                 layout: !0,
@@ -3029,9 +3029,9 @@ const Re = Hn(), Ve = Re.axiosGet, Qn = Re.axiosDelete, _e = Re.axiosPost, Zn =
     ] }),
     /* @__PURE__ */ e("footer", { className: "p-4 border-t border-gray-300 flex-shrink-0", children: /* @__PURE__ */ n("div", { className: "flex justify-between items-center", children: [
       /* @__PURE__ */ n("p", { className: "text-sm text-gray-600", children: [
-        y.length,
+        x.length,
         " invitation",
-        y.length !== 1 ? "s" : "",
+        x.length !== 1 ? "s" : "",
         " selected"
       ] }),
       /* @__PURE__ */ n("div", { className: "flex gap-2", children: [
@@ -3046,10 +3046,10 @@ const Re = Hn(), Ve = Re.axiosGet, Qn = Re.axiosDelete, _e = Re.axiosPost, Zn =
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: () => G(U)(),
-            disabled: v || y.length === 0 && !u,
+            onClick: () => G(q)(),
+            disabled: f || x.length === 0 && !u,
             className: "px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-700 hover:cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:bg-blue-300 disabled:cursor-not-allowed",
-            children: v ? "Inviting..." : l === de.DRIVE ? "Send Invites" : "Add"
+            children: f ? "Inviting..." : l === de.DRIVE ? "Send Invites" : "Add"
           }
         )
       ] })
@@ -3060,27 +3060,27 @@ const Re = Hn(), Ve = Re.axiosGet, Qn = Re.axiosDelete, _e = Re.axiosPost, Zn =
   { name: "Can manage", icon: ea, value: "edit" },
   { name: "Remove", icon: dr, isDestructive: !0, value: "remove" }
 ], ns = ({ item: t, allowedPermissions: a, onPermissionChange: s }) => {
-  const [i, l] = L(!1), { refs: m, floatingStyles: o, context: u } = la({
+  const [i, l] = M(!1), { refs: m, floatingStyles: o, context: u } = la({
     open: i,
     onOpenChange: l,
     middleware: [ia(8), oa(), ca({ padding: 8 })],
     whileElementsMounted: da,
     placement: "bottom-end"
-  }), p = tn(u), b = an(u), { getReferenceProps: f, getFloatingProps: r } = rn([
+  }), p = tn(u), g = an(u), { getReferenceProps: b, getFloatingProps: r } = rn([
     p,
-    b
-  ]), w = dt.find((h) => h.name === t.permission || h.value === t.permission) || dt[0];
+    g
+  ]), y = dt.find((h) => h.name === t.permission || h.value === t.permission) || dt[0];
   return (
     // FIX: The <Listbox> component now wraps both the button and the portal.
     // This provides the necessary context for both children.
-    /* @__PURE__ */ n(K, { value: w, onChange: (h) => {
+    /* @__PURE__ */ n(K, { value: y, onChange: (h) => {
       s(h), l(!1);
     }, children: [
       /* @__PURE__ */ n(
         K.Button,
         {
           ref: m.setReference,
-          ...f(),
+          ...b(),
           className: "relative min-w-[120px] text-left text-sm p-2 border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-opacity-75 hover:cursor-pointer",
           children: [
             /* @__PURE__ */ e("span", { className: "block truncate", children: t.permission }),
@@ -3111,24 +3111,24 @@ const Re = Hn(), Ve = Re.axiosGet, Qn = Re.axiosDelete, _e = Re.axiosPost, Zn =
                 K.Option,
                 {
                   className: ({
-                    active: z
+                    active: $
                   }) => `relative select-none py-2 pl-10 pr-4 hover:cursor-pointer
-                                            ${z ? "bg-blue-100 text-blue-900" : "text-gray-900"}
-                                            ${h.isDestructive && z ? "bg-red-100 text-red-900" : ""}
-                                            ${h.isDestructive && !z ? "text-red-600" : ""}`,
+                                            ${$ ? "bg-blue-100 text-blue-900" : "text-gray-900"}
+                                            ${h.isDestructive && $ ? "bg-red-100 text-red-900" : ""}
+                                            ${h.isDestructive && !$ ? "text-red-600" : ""}`,
                   value: h,
-                  children: ({ selected: z }) => /* @__PURE__ */ n(te, { children: [
+                  children: ({ selected: $ }) => /* @__PURE__ */ n(te, { children: [
                     /* @__PURE__ */ n(
                       "span",
                       {
-                        className: `flex items-center gap-2 truncate ${z ? "font-medium" : "font-normal"}`,
+                        className: `flex items-center gap-2 truncate ${$ ? "font-medium" : "font-normal"}`,
                         children: [
                           /* @__PURE__ */ e(h.icon, { className: "h-5 w-5", "aria-hidden": "true" }),
                           h.name
                         ]
                       }
                     ),
-                    z && /* @__PURE__ */ e("span", { className: "absolute inset-y-0 left-0 flex items-center pl-3 text-blue-600", children: /* @__PURE__ */ e(ht, { className: "h-5 w-5", "aria-hidden": "true" }) })
+                    $ && /* @__PURE__ */ e("span", { className: "absolute inset-y-0 left-0 flex items-center pl-3 text-blue-600", children: /* @__PURE__ */ e(ht, { className: "h-5 w-5", "aria-hidden": "true" }) })
                   ] })
                 },
                 h.name
@@ -3148,32 +3148,32 @@ const Re = Hn(), Ve = Re.axiosGet, Qn = Re.axiosDelete, _e = Re.axiosPost, Zn =
   existingShares: l,
   allowedPermissions: m
 }) => {
-  const [o, u] = L(l), [p, b] = L(0), [f, r] = L(""), w = Ct(f, 300), d = {
+  const [o, u] = M(l), [p, g] = M(0), [b, r] = M(""), y = Ct(b, 300), d = {
     users: o.users.filter(
-      (E) => E.name.toLowerCase().includes(w.toLowerCase())
+      (A) => A.name.toLowerCase().includes(y.toLowerCase())
     ),
     groups: o.groups.filter(
-      (E) => E.name.toLowerCase().includes(w.toLowerCase())
+      (A) => A.name.toLowerCase().includes(y.toLowerCase())
     ),
     roles: o.roles.filter(
-      (E) => E.name.toLowerCase().includes(w.toLowerCase())
+      (A) => A.name.toLowerCase().includes(y.toLowerCase())
     )
-  }, h = async (E, I, j, V) => {
+  }, h = async (A, I, V, U) => {
     const G = I.value;
-    u((q) => ({
-      ...q,
-      [j]: q[j].map(
-        (T) => T.id === E.id ? { ...T, permission: G } : T
+    u((B) => ({
+      ...B,
+      [V]: B[V].map(
+        (z) => z.id === A.id ? { ...z, permission: G } : z
       )
     }));
-  }, z = () => {
-    const E = {
+  }, $ = () => {
+    const A = {
       users: o.users.filter((I) => I.permission !== "remove"),
       groups: o.groups.filter((I) => I.permission !== "remove"),
       roles: o.roles.filter((I) => I.permission !== "remove")
     };
-    a(E);
-  }, $ = ["users", "groups", "roles"], A = ["Users", "Groups", "Roles"];
+    a(A);
+  }, T = ["users", "groups", "roles"], F = ["Users", "Groups", "Roles"];
   return (
     // The main structure remains the same...
     /* @__PURE__ */ n("div", { className: "flex flex-col h-full bg-gray-50", children: [
@@ -3200,26 +3200,26 @@ const Re = Hn(), Ve = Re.axiosGet, Qn = Re.axiosDelete, _e = Re.axiosPost, Zn =
         )
       ] }),
       /* @__PURE__ */ n("div", { className: "flex flex-col flex-grow", children: [
-        /* @__PURE__ */ n(se.Group, { selectedIndex: p, onChange: b, children: [
+        /* @__PURE__ */ n(re.Group, { selectedIndex: p, onChange: g, children: [
           /* @__PURE__ */ n("div", { className: "p-4 bg-white border-b border-gray-300", children: [
-            /* @__PURE__ */ e(se.List, { className: "flex space-x-1 bg-gray-100 p-1 rounded-lg", children: A.map((E) => /* @__PURE__ */ e(
-              se,
+            /* @__PURE__ */ e(re.List, { className: "flex space-x-1 bg-gray-100 p-1 rounded-lg", children: F.map((A) => /* @__PURE__ */ e(
+              re,
               {
                 className: ({
                   selected: I
                 }) => `w-full py-2 text-sm font-medium leading-5 rounded-md
                                        focus:outline-none focus:ring-2 ring-offset-2 ring-offset-blue-400 ring-white ring-opacity-60
                                        ${I ? "bg-white shadow text-blue-700" : "text-gray-600 hover:bg-white/[0.6]"}`,
-                children: E
+                children: A
               },
-              E
+              A
             )) }),
             /* @__PURE__ */ e("div", { className: "mt-4", children: /* @__PURE__ */ e(
               be,
               {
                 onDebouncedChange: r,
-                value: f,
-                placeholder: `Search in ${A[p]}...`
+                value: b,
+                placeholder: `Search in ${F[p]}...`
               }
             ) })
           ] }),
@@ -3230,11 +3230,11 @@ const Re = Hn(), Ve = Re.axiosGet, Qn = Re.axiosDelete, _e = Re.axiosPost, Zn =
               animate: { y: 0, opacity: 1 },
               exit: { y: -10, opacity: 0 },
               transition: { duration: 0.2 },
-              children: /* @__PURE__ */ e(se.Panels, { as: Q, children: $.map((E) => /* @__PURE__ */ e(
-                se.Panel,
+              children: /* @__PURE__ */ e(re.Panels, { as: Q, children: T.map((A) => /* @__PURE__ */ e(
+                re.Panel,
                 {
                   className: "space-y-3 focus:outline-none",
-                  children: /* @__PURE__ */ e(Ce, { children: d[E].length > 0 ? d[E].map((I) => /* @__PURE__ */ n(
+                  children: /* @__PURE__ */ e(Ce, { children: d[A].length > 0 ? d[A].map((I) => /* @__PURE__ */ n(
                     le.div,
                     {
                       layout: !0,
@@ -3258,12 +3258,12 @@ const Re = Hn(), Ve = Re.axiosGet, Qn = Re.axiosDelete, _e = Re.axiosPost, Zn =
                           ),
                           /* @__PURE__ */ n("div", { className: "overflow-hidden", children: [
                             /* @__PURE__ */ e("p", { className: "font-medium text-gray-900 truncate", children: I.name }),
-                            E !== "users" && /* @__PURE__ */ e(
+                            A !== "users" && /* @__PURE__ */ e(
                               "button",
                               {
                                 onClick: () => i({
                                   id: I.id,
-                                  type: E,
+                                  type: A,
                                   name: I.name
                                 }),
                                 className: "text-sm text-blue-600 hover:underline hover:cursor-pointer",
@@ -3277,10 +3277,10 @@ const Re = Hn(), Ve = Re.axiosGet, Qn = Re.axiosDelete, _e = Re.axiosPost, Zn =
                           {
                             item: I,
                             allowedPermissions: m,
-                            onPermissionChange: (j) => h(
+                            onPermissionChange: (V) => h(
                               I,
-                              j,
-                              E
+                              V,
+                              A
                             )
                           }
                         )
@@ -3299,16 +3299,16 @@ const Re = Hn(), Ve = Re.axiosGet, Qn = Re.axiosDelete, _e = Re.axiosPost, Zn =
                           /* @__PURE__ */ e(Zt, { className: "h-12 w-12 text-gray-400" }),
                           /* @__PURE__ */ n("h3", { className: "mt-2 text-sm font-medium text-gray-900", children: [
                             "No ",
-                            A[p],
+                            F[p],
                             " Found"
                           ] }),
-                          /* @__PURE__ */ e("p", { className: "mt-1 text-sm text-gray-500", children: f ? `No results for "${f}"` : `There are no ${A[p].toLowerCase()} with access.` })
+                          /* @__PURE__ */ e("p", { className: "mt-1 text-sm text-gray-500", children: b ? `No results for "${b}"` : `There are no ${F[p].toLowerCase()} with access.` })
                         ]
                       }
                     )
                   ) })
                 },
-                E
+                A
               )) })
             },
             p
@@ -3317,7 +3317,7 @@ const Re = Hn(), Ve = Re.axiosGet, Qn = Re.axiosDelete, _e = Re.axiosPost, Zn =
         /* @__PURE__ */ e("div", { className: "p-4 bg-white border-t border-gray-300 flex justify-end", children: /* @__PURE__ */ e(
           "button",
           {
-            onClick: z,
+            onClick: $,
             className: "px-4 py-2 bg-blue-600 text-white rounded-md shadow hover:bg-blue-700",
             children: "Update"
           }
@@ -3338,9 +3338,9 @@ const Re = Hn(), Ve = Re.axiosGet, Qn = Re.axiosDelete, _e = Re.axiosPost, Zn =
   onClose: s,
   members: i
 }) => {
-  const [l, m] = L(!0), [o, u] = L(""), p = Ct(o, 300), b = i.filter(
+  const [l, m] = M(!0), [o, u] = M(""), p = Ct(o, 300), g = i.filter(
     (d) => d.name.toLowerCase().includes(p.toLowerCase())
-  ), f = {
+  ), b = {
     hidden: { opacity: 0 },
     visible: {
       opacity: 1,
@@ -3352,10 +3352,10 @@ const Re = Hn(), Ve = Re.axiosGet, Qn = Re.axiosDelete, _e = Re.axiosPost, Zn =
     hidden: { y: 20, opacity: 0 },
     visible: { y: 0, opacity: 1 },
     exit: { opacity: 0, x: -20 }
-  }, w = () => l ? (
+  }, y = () => l ? (
     // Show 5 skeleton items while loading
     /* @__PURE__ */ e("div", { children: Array.from({ length: 5 }).map((d, h) => /* @__PURE__ */ e(ls, {}, h)) })
-  ) : b.length === 0 ? /* @__PURE__ */ n(
+  ) : g.length === 0 ? /* @__PURE__ */ n(
     le.div,
     {
       initial: { opacity: 0, scale: 0.95 },
@@ -3370,11 +3370,11 @@ const Re = Hn(), Ve = Re.axiosGet, Qn = Re.axiosDelete, _e = Re.axiosPost, Zn =
   ) : /* @__PURE__ */ e(
     le.ul,
     {
-      variants: f,
+      variants: b,
       initial: "hidden",
       animate: "visible",
       className: "divide-y divide-gray-200",
-      children: /* @__PURE__ */ e(Ce, { children: b.map((d) => /* @__PURE__ */ n(
+      children: /* @__PURE__ */ e(Ce, { children: g.map((d) => /* @__PURE__ */ n(
         le.li,
         {
           layout: !0,
@@ -3436,7 +3436,7 @@ const Re = Hn(), Ve = Re.axiosGet, Qn = Re.axiosDelete, _e = Re.axiosPost, Zn =
         placeholder: "Search members..."
       }
     ) }),
-    /* @__PURE__ */ e("div", { className: "flex-grow overflow-y-auto", children: w() })
+    /* @__PURE__ */ e("div", { className: "flex-grow overflow-y-auto", children: y() })
   ] });
 }, fe = {
   INVITE: "invite",
@@ -3459,31 +3459,31 @@ const Re = Hn(), Ve = Re.axiosGet, Qn = Re.axiosDelete, _e = Re.axiosPost, Zn =
   allowedPermissions: u = [],
   ...p
 }) => {
-  const [b, f] = L(fe.INVITE), [r, w] = L(t), [d, h] = L(null), [z, $] = L(!1), [A, E] = L([]), [I, j] = L(fe.MANAGE), V = () => {
-    f(fe.INVITE), h(null), m();
+  const [g, b] = M(fe.INVITE), [r, y] = M(t), [d, h] = M(null), [$, T] = M(!1), [F, A] = M([]), [I, V] = M(fe.MANAGE), U = () => {
+    b(fe.INVITE), h(null), m();
   }, G = () => {
-    f(fe.MANAGE);
-  }, q = async ({ id: g, name: x, type: C }) => {
+    b(fe.MANAGE);
+  }, B = async ({ id: v, name: w, type: C }) => {
     if (C === "groups") {
       try {
-        const N = await Ve(`${Xe.getMembersForGroup(x)}`);
+        const N = await Ve(`${Xe.getMembersForGroup(w)}`);
       } catch (N) {
         console.log("Error searching entities:", N);
       }
-      E(resp);
+      A(resp);
     }
-    h({ id: g, type: C, name: x }), j(b), f(fe.MEMBERS);
-  }, T = (g) => {
-    console.log("changedExistingShares", g), w(g);
-    const x = ct.mapValues(t, (y) => y.map((k) => ({ id: k.id, permission: k.permission })).sort((k, F) => k.id - F.id)), C = ct.mapValues(g, (y) => y.map((k) => ({ id: k.id, permission: k.permission })).sort((k, F) => k.id - F.id));
-    console.log("Existing data:", x), console.log("Changed data:", C);
-    const N = !ct.isEqual(x, C);
-    console.log("hasPermissionChanged:", N), $(N), f(b === fe.MEMBERS ? I : fe.INVITE);
+    h({ id: v, type: C, name: w }), V(g), b(fe.MEMBERS);
+  }, z = (v) => {
+    console.log("changedExistingShares", v), y(v);
+    const w = ct.mapValues(t, (x) => x.map((k) => ({ id: k.id, permission: k.permission })).sort((k, E) => k.id - E.id)), C = ct.mapValues(v, (x) => x.map((k) => ({ id: k.id, permission: k.permission })).sort((k, E) => k.id - E.id));
+    console.log("Existing data:", w), console.log("Changed data:", C);
+    const N = !ct.isEqual(w, C);
+    console.log("hasPermissionChanged:", N), T(N), b(g === fe.MEMBERS ? I : fe.INVITE);
   };
-  return /* @__PURE__ */ e(he, { appear: !0, show: a, as: Q, children: /* @__PURE__ */ n(ye, { as: "div", className: "relative z-50", onClose: V, children: [
+  return /* @__PURE__ */ e(he, { appear: !0, show: a, as: Q, children: /* @__PURE__ */ n(ye, { as: "div", className: "relative z-50", onClose: U, children: [
     /* @__PURE__ */ e("div", { className: "filter-modal-overlay", "aria-hidden": "true" }),
     /* @__PURE__ */ e("div", { className: "filter-modal-container", children: /* @__PURE__ */ e("div", { className: "filter-modal-positioner", children: /* @__PURE__ */ e(Ee, { className: "filter-modal-panel", style: { background: "white" }, children: (() => {
-      switch (b) {
+      switch (g) {
         case fe.MANAGE:
           return /* @__PURE__ */ e(
             le.div,
@@ -3497,9 +3497,9 @@ const Re = Hn(), Ve = Re.axiosGet, Qn = Re.axiosDelete, _e = Re.axiosPost, Zn =
                 ss,
                 {
                   entity: i,
-                  onBack: T,
-                  onClose: V,
-                  onOpenMembers: q,
+                  onBack: z,
+                  onClose: U,
+                  onOpenMembers: B,
                   existingShares: r,
                   calledBy: l,
                   allowedPermissions: u
@@ -3521,11 +3521,11 @@ const Re = Hn(), Ve = Re.axiosGet, Qn = Re.axiosDelete, _e = Re.axiosPost, Zn =
                 is,
                 {
                   entity: d,
-                  onBack: T,
-                  onClose: V,
+                  onBack: z,
+                  onClose: U,
                   calledBy: l,
                   existingShares: r,
-                  members: A
+                  members: F
                 }
               )
             },
@@ -3545,14 +3545,14 @@ const Re = Hn(), Ve = Re.axiosGet, Qn = Re.axiosDelete, _e = Re.axiosPost, Zn =
                 {
                   entity: i,
                   onManage: G,
-                  onClose: V,
+                  onClose: U,
                   existingShares: r,
                   calledBy: l,
                   showExistingShares: o,
-                  onFinalSubmit: (g) => {
-                    s(g, r);
+                  onFinalSubmit: (v) => {
+                    s(v, r);
                   },
-                  isChanged: z
+                  isChanged: $
                 }
               )
             },
@@ -3578,34 +3578,34 @@ function nt({
   displayLimit: u = 3,
   selectionLimit: p = -1,
   // NEW: search behavior
-  searchMode: b = "client",
+  searchMode: g = "client",
   // "client" | "server"
-  onSearch: f,
+  onSearch: b,
   // (query: string) => void (required if searchMode==="server")
   serverLoading: r = !1,
-  minSearchChars: w = 2,
+  minSearchChars: y = 2,
   // NEW: mappers (id/label keys)
-  getOptionId: d = (z) => String(z.id),
-  getOptionLabel: h = (z) => z.name
+  getOptionId: d = ($) => String($.id),
+  getOptionLabel: h = ($) => $.name
 }) {
-  const z = Qe(), $ = Qe(), [A, E] = L(""), I = xe(""), j = ue(() => {
-    const g = /* @__PURE__ */ new Map();
-    for (const x of a) g.set(d(x), x);
-    return g;
-  }, [a, d]), V = ue(() => Array.isArray(s) ? s.map((g) => g && typeof g == "object" ? j.get(d(g)) || null : j.get(String(g))).filter(Boolean) : [], [s, j, d]), G = ue(() => {
-    if (!A) return a;
-    const g = A.toLowerCase();
-    return a.filter((x) => h(x).toLowerCase().includes(g));
-  }, [a, A, h]);
+  const $ = Qe(), T = Qe(), [F, A] = M(""), I = xe(""), V = ue(() => {
+    const v = /* @__PURE__ */ new Map();
+    for (const w of a) v.set(d(w), w);
+    return v;
+  }, [a, d]), U = ue(() => Array.isArray(s) ? s.map((v) => v && typeof v == "object" ? V.get(d(v)) || null : V.get(String(v))).filter(Boolean) : [], [s, V, d]), G = ue(() => {
+    if (!F) return a;
+    const v = F.toLowerCase();
+    return a.filter((w) => h(w).toLowerCase().includes(v));
+  }, [a, F, h]);
   Z(() => {
-    b === "server" && A.length >= w && A !== I.current && (I.current = A, f && f(A));
-  }, [A, b, w, f]);
-  const q = b === "client" ? G : a, T = () => {
-    if (!V.length)
+    g === "server" && F.length >= y && F !== I.current && (I.current = F, b && b(F));
+  }, [F, g, y, b]);
+  const B = g === "client" ? G : a, z = () => {
+    if (!U.length)
       return /* @__PURE__ */ e("span", { className: "text-gray-500", children: m });
-    const g = V.slice(0, u), x = V.length - u;
+    const v = U.slice(0, u), w = U.length - u;
     return /* @__PURE__ */ n("div", { className: "flex flex-wrap gap-2", children: [
-      g.map((C) => /* @__PURE__ */ e(
+      v.map((C) => /* @__PURE__ */ e(
         "span",
         {
           className: "px-2 py-1 text-xs font-medium text-white bg-gray-800 rounded-full",
@@ -3613,21 +3613,21 @@ function nt({
         },
         d(C)
       )),
-      x > 0 && /* @__PURE__ */ n("span", { className: "px-2 py-1 text-xs font-medium text-gray-600 bg-gray-200 rounded-full", children: [
+      w > 0 && /* @__PURE__ */ n("span", { className: "px-2 py-1 text-xs font-medium text-gray-600 bg-gray-200 rounded-full", children: [
         "+",
-        x,
+        w,
         " more"
       ] })
     ] });
   };
-  return /* @__PURE__ */ e(K, { value: V, onChange: (g) => {
-    const x = Array.from(new Set(g.map((C) => d(C))));
-    p !== -1 && x.length > p || i(x);
-  }, multiple: !0, by: "id", children: ({ open: g }) => /* @__PURE__ */ n("div", { children: [
+  return /* @__PURE__ */ e(K, { value: U, onChange: (v) => {
+    const w = Array.from(new Set(v.map((C) => d(C))));
+    p !== -1 && w.length > p || i(w);
+  }, multiple: !0, by: "id", children: ({ open: v }) => /* @__PURE__ */ n("div", { children: [
     /* @__PURE__ */ e(
       K.Label,
       {
-        id: z,
+        id: $,
         className: "block text-sm font-medium leading-6 text-gray-900",
         children: t
       }
@@ -3636,16 +3636,16 @@ function nt({
       /* @__PURE__ */ n(
         K.Button,
         {
-          "aria-labelledby": z,
+          "aria-labelledby": $,
           "aria-invalid": !!o,
-          "aria-describedby": o ? $ : void 0,
+          "aria-describedby": o ? T : void 0,
           onBlur: l,
           className: Ge(
             "relative w-full min-h-[38px] cursor-default rounded-md bg-white py-1.5 pl-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset focus:outline-none focus:ring-2 focus:ring-gray-600 sm:text-sm sm:leading-6",
             o ? "ring-red-500" : "ring-gray-300"
           ),
           children: [
-            /* @__PURE__ */ e("span", { className: "block truncate", children: T() }),
+            /* @__PURE__ */ e("span", { className: "block truncate", children: z() }),
             /* @__PURE__ */ e("span", { className: "absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none", children: /* @__PURE__ */ e(Ht, { className: "w-5 h-5 text-gray-400", "aria-hidden": "true" }) })
           ]
         }
@@ -3654,7 +3654,7 @@ function nt({
         he,
         {
           as: Q,
-          show: g,
+          show: v,
           leave: "transition ease-in duration-100",
           leaveFrom: "opacity-100",
           leaveTo: "opacity-0",
@@ -3662,39 +3662,39 @@ function nt({
             /* @__PURE__ */ e("div", { className: "p-2 sticky top-0 bg-white z-20 shadow-sm", children: /* @__PURE__ */ e(
               be,
               {
-                value: A,
-                onDebouncedChange: E,
-                placeholder: b === "server" ? `Search (min ${w})…` : "Search options…"
+                value: F,
+                onDebouncedChange: A,
+                placeholder: g === "server" ? `Search (min ${y})…` : "Search options…"
               }
             ) }),
-            b === "server" && r && /* @__PURE__ */ e("div", { className: "py-2 px-3 text-gray-500", children: "Loading…" }),
-            q.length === 0 && !r ? /* @__PURE__ */ e("div", { className: "py-2 px-3 text-gray-500", children: b === "server" ? A.length < w ? `Type at least ${w} characters to search.` : "No results." : "No options found." }) : q.map((x) => {
-              const C = d(x), N = h(x), y = V.some((F) => d(F) === C), k = p !== -1 && V.length >= p && !y;
+            g === "server" && r && /* @__PURE__ */ e("div", { className: "py-2 px-3 text-gray-500", children: "Loading…" }),
+            B.length === 0 && !r ? /* @__PURE__ */ e("div", { className: "py-2 px-3 text-gray-500", children: g === "server" ? F.length < y ? `Type at least ${y} characters to search.` : "No results." : "No options found." }) : B.map((w) => {
+              const C = d(w), N = h(w), x = U.some((E) => d(E) === C), k = p !== -1 && U.length >= p && !x;
               return /* @__PURE__ */ e(
                 K.Option,
                 {
-                  value: x,
+                  value: w,
                   disabled: k,
-                  className: ({ active: F }) => Ge(
-                    k ? " text-gray-400  bg-white  cursor-not-allowed" : F ? " bg-gray-200  text-gray-900" : " text-gray-900",
+                  className: ({ active: E }) => Ge(
+                    k ? " text-gray-400  bg-white  cursor-not-allowed" : E ? " bg-gray-200  text-gray-900" : " text-gray-900",
                     " relative  cursor-default  select-none  py-2  pl-3  pr-9"
                   ),
-                  children: ({ selected: F, active: M }) => /* @__PURE__ */ n(te, { children: [
+                  children: ({ selected: E, active: L }) => /* @__PURE__ */ n(te, { children: [
                     /* @__PURE__ */ e(
                       "span",
                       {
                         className: Ge(
-                          F ? "font-semibold" : "font-normal",
+                          E ? "font-semibold" : "font-normal",
                           "block truncate"
                         ),
                         children: N
                       }
                     ),
-                    F && /* @__PURE__ */ e(
+                    E && /* @__PURE__ */ e(
                       "span",
                       {
                         className: Ge(
-                          M ? " text-gray-900" : " text-gray-600",
+                          L ? " text-gray-900" : " text-gray-600",
                           " absolute  inset-y-0  right-0  flex  items-center  pr-4"
                         ),
                         children: /* @__PURE__ */ e(tt, { className: "w-5 h-5", "aria-hidden": "true" })
@@ -3708,7 +3708,7 @@ function nt({
           ] })
         }
       ),
-      o && /* @__PURE__ */ e("p", { id: $, className: "mt-1 text-sm text-red-600", children: o })
+      o && /* @__PURE__ */ e("p", { id: T, className: "mt-1 text-sm text-red-600", children: o })
     ] })
   ] }) });
 }
@@ -3764,10 +3764,10 @@ const Wl = ({
   secondaryAction: o = { onCancel: null, label: "Cancel" },
   dialogPanelClass: u = ""
 }) => {
-  const p = (f) => {
-    f.target === f.currentTarget && a(!1);
-  }, b = (f) => {
-    f.stopPropagation();
+  const p = (b) => {
+    b.target === b.currentTarget && a(!1);
+  }, g = (b) => {
+    b.stopPropagation();
   };
   return /* @__PURE__ */ n(
     ye,
@@ -3787,7 +3787,7 @@ const Wl = ({
           Ee,
           {
             className: `${u} relative bg-white align-middle w-full lg:w-[36rem] mx-5 lg:mx-0 transform overflow-hidden rounded-2xl text-left shadow-xl lg:min-w-[36rem] md:min-w-96 transition-all`,
-            onClick: b,
+            onClick: g,
             children: [
               /* @__PURE__ */ n("div", { className: "flex justify-between items-center border-b border-gray-200 p-6 flex-shrink-0", children: [
                 i?.customHeader && i.customHeader,
@@ -3798,7 +3798,7 @@ const Wl = ({
                 "div",
                 {
                   className: "px-5 mb-5",
-                  onClick: b,
+                  onClick: g,
                   children: s
                 }
               ),
@@ -3862,14 +3862,14 @@ function ds({
   onDelete: u,
   renderActions: p,
   // optional override
-  dragId: b,
-  dropId: f,
+  dragId: g,
+  dropId: b,
   indent: r = 24
 }) {
-  const { setNodeRef: w, isOver: d } = ur({ id: f }), { attributes: h, listeners: z, setNodeRef: $, transform: A, isDragging: E } = hr({ id: b }), I = A ? { transform: `translate3d(${Math.round(A.x)}px, ${Math.round(A.y)}px, 0)` } : void 0, [j, V] = L(!1), [G, q] = L(t.name), T = () => {
-    const g = G.trim();
-    V(!1), g && g !== t.name ? o?.(t, g) : q(t.name);
-  }, v = ue(() => /* @__PURE__ */ e(
+  const { setNodeRef: y, isOver: d } = ur({ id: b }), { attributes: h, listeners: $, setNodeRef: T, transform: F, isDragging: A } = hr({ id: g }), I = F ? { transform: `translate3d(${Math.round(F.x)}px, ${Math.round(F.y)}px, 0)` } : void 0, [V, U] = M(!1), [G, B] = M(t.name), z = () => {
+    const v = G.trim();
+    U(!1), v && v !== t.name ? o?.(t, v) : B(t.name);
+  }, f = ue(() => /* @__PURE__ */ e(
     _n,
     {
       options: [
@@ -3877,42 +3877,42 @@ function ds({
         { action: "rename", label: "Rename" },
         { action: "delete", label: "Delete" }
       ],
-      onSelect: (x) => {
-        x.action === "create" ? m?.(t) : x.action === "rename" ? V(!0) : x.action === "delete" && u?.(t);
+      onSelect: (w) => {
+        w.action === "create" ? m?.(t) : w.action === "rename" ? U(!0) : w.action === "delete" && u?.(t);
       }
     }
   ), [t, m, u]);
   return /* @__PURE__ */ n(
     "div",
     {
-      ref: w,
-      className: `tv-row ${d ? "tv-drop-over" : ""} ${E ? "dragging" : ""}`,
+      ref: y,
+      className: `tv-row ${d ? "tv-drop-over" : ""} ${A ? "dragging" : ""}`,
       style: { ...I, paddingLeft: 8 + a * r },
-      onClick: (g) => {
-        g.target.closest(".tv-toggle") || g.target.tagName === "INPUT" || l?.(t);
+      onClick: (v) => {
+        v.target.closest(".tv-toggle") || v.target.tagName === "INPUT" || l?.(t);
       },
       children: [
         /* @__PURE__ */ e("button", { className: "tv-toggle", onClick: i, "aria-label": "toggle", children: t.children?.length ? s ? /* @__PURE__ */ e(wt, { size: 16 }) : /* @__PURE__ */ e(ve, { size: 16 }) : /* @__PURE__ */ e("span", { className: "tv-spacer" }) }),
         /* @__PURE__ */ e(Me, { size: 16, className: "tv-folder-ic" }),
-        /* @__PURE__ */ e("div", { className: "tv-name", ref: $, children: j ? /* @__PURE__ */ e(
+        /* @__PURE__ */ e("div", { className: "tv-name", ref: T, children: V ? /* @__PURE__ */ e(
           "input",
           {
             className: "tv-input",
             value: G,
-            onChange: (g) => q(g.target.value),
-            onBlur: T,
-            onKeyDown: (g) => {
-              g.key === "Enter" && T(), g.key === "Escape" && (V(!1), q(t.name));
+            onChange: (v) => B(v.target.value),
+            onBlur: z,
+            onKeyDown: (v) => {
+              v.key === "Enter" && z(), v.key === "Escape" && (U(!1), B(t.name));
             },
             autoFocus: !0
           }
-        ) : /* @__PURE__ */ e("span", { onDoubleClick: () => V(!0), children: t.name }) }),
-        /* @__PURE__ */ e(cs, { listeners: z, attributes: h }),
+        ) : /* @__PURE__ */ e("span", { onDoubleClick: () => U(!0), children: t.name }) }),
+        /* @__PURE__ */ e(cs, { listeners: $, attributes: h }),
         /* @__PURE__ */ e("div", { className: "tv-actions", children: p ? p(t, {
           onCreateChild: () => m?.(t),
-          onRename: () => V(!0),
+          onRename: () => U(!0),
           onDelete: () => u?.(t)
-        }) : v })
+        }) : f })
       ]
     }
   );
@@ -3939,14 +3939,14 @@ function gs(t, { rootId: a, getId: s, getParent: i, getName: l }) {
 function bs(t, { rootId: a, getId: s, getName: i }) {
   const l = /* @__PURE__ */ new Map();
   function m(u, p) {
-    const b = s(u), f = {
+    const g = s(u), b = {
       ...u,
-      id: b,
+      id: g,
       name: i(u),
       parentId: p || a,
-      children: (u.children || []).map((r) => m(r, b))
+      children: (u.children || []).map((r) => m(r, g))
     };
-    return l.set(b, f), f;
+    return l.set(g, b), b;
   }
   return { roots: t.map((u) => m(u, null)), byId: l };
 }
@@ -4000,104 +4000,104 @@ function Jl({
   onSelect: o,
   onCreateRoot: u,
   onCreateChild: p,
-  onRename: b,
-  onDelete: f,
+  onRename: g,
+  onDelete: b,
   onMove: r,
-  renderActions: w,
+  renderActions: y,
   disableMoveToRoot: d = !1,
   // ← allow root moves by default now
   indentUnit: h = 24
 }) {
-  const { roots: z } = ue(() => ps(t) ? bs(t, { rootId: a, getId: i, getName: m }) : gs(
+  const { roots: $ } = ue(() => ps(t) ? bs(t, { rootId: a, getId: i, getName: m }) : gs(
     t.map((k) => ({ ...k })),
     { rootId: a, getId: i, getParent: l, getName: m }
-  ), [t, a, i, l, m]), [$, A] = L({}), E = ae((k) => {
-    const F = {};
-    return (function M(U) {
-      U.forEach((S) => {
-        F[S.id] = !0, S.children?.length && M(S.children);
+  ), [t, a, i, l, m]), [T, F] = M({}), A = ne((k) => {
+    const E = {};
+    return (function L(q) {
+      q.forEach((S) => {
+        E[S.id] = !0, S.children?.length && L(S.children);
       });
-    })(k), F;
+    })(k), E;
   }, []);
-  re.useEffect(() => {
-    A(E(z));
-  }, [z, E]);
-  const I = ae(
-    (k) => A((F) => ({ ...F, [k]: !F[k] })),
+  se.useEffect(() => {
+    F(A($));
+  }, [$, A]);
+  const I = ne(
+    (k) => F((E) => ({ ...E, [k]: !E[k] })),
     []
-  ), [j, V] = L(() => Le(z));
-  re.useEffect(() => V(Le(z)), [z]);
+  ), [V, U] = M(() => Le($));
+  se.useEffect(() => U(Le($)), [$]);
   const G = pr(
     gr(yr, { activationConstraint: { delay: 250, tolerance: 5 } })
-  ), q = xe(null), [T, v] = L(null), g = xe(0), x = () => {
+  ), B = xe(null), [z, f] = M(null), v = xe(0), w = () => {
   }, C = ({ delta: k }) => {
-    g.current = k?.x ?? 0;
-  }, N = ae(
-    ({ active: k, over: F }) => {
-      const M = g.current;
-      if (g.current = 0, v(null), !k || !F) return;
-      const U = String(k.id).replace(/^drag-/, ""), S = String(F.id).replace(/^drop-/, "");
-      if (!U || !S || U === S) return;
+    v.current = k?.x ?? 0;
+  }, N = ne(
+    ({ active: k, over: E }) => {
+      const L = v.current;
+      if (v.current = 0, f(null), !k || !E) return;
+      const q = String(k.id).replace(/^drag-/, ""), S = String(E.id).replace(/^drop-/, "");
+      if (!q || !S || q === S) return;
       let O = S;
-      const D = Math.max(0, Math.floor(-M / h));
+      const D = Math.max(0, Math.floor(-L / h));
       if (D > 0) {
         let W = S;
         for (let pe = 0; pe < D; pe++) {
-          const B = Ta(j, W, null);
-          if (!B) break;
-          if (!B.parentId) {
+          const j = Ta(V, W, null);
+          if (!j) break;
+          if (!j.parentId) {
             O = a;
             break;
           }
-          O = B.parentId, W = B.parentId;
+          O = j.parentId, W = j.parentId;
         }
       }
       if (d && O === a) {
-        V(Le(z));
+        U(Le($));
         return;
       }
-      const P = Le(j), { newRoots: _, removed: R } = fs(P, U);
+      const P = Le(V), { newRoots: _, removed: R } = fs(P, q);
       if (!R) return;
       const Y = xs(_, O, R);
-      V(Y), r?.({ sourceId: U, destParentId: O, newTree: Y });
+      U(Y), r?.({ sourceId: q, destParentId: O, newTree: Y });
     },
-    [j, z, a, d, h, r]
-  ), y = ae(
-    (k, F = 0) => k.map((M) => /* @__PURE__ */ n(re.Fragment, { children: [
+    [V, $, a, d, h, r]
+  ), x = ne(
+    (k, E = 0) => k.map((L) => /* @__PURE__ */ n(se.Fragment, { children: [
       /* @__PURE__ */ e(
         ds,
         {
-          node: M,
-          depth: F,
-          expanded: !!$[M.id],
-          onToggle: () => I(M.id),
+          node: L,
+          depth: E,
+          expanded: !!T[L.id],
+          onToggle: () => I(L.id),
           onSelect: o,
           onCreateChild: p,
-          onRename: b,
-          onDelete: f,
-          renderActions: w,
-          dragId: `drag-${M.id}`,
-          dropId: `drop-${M.id}`,
+          onRename: g,
+          onDelete: b,
+          renderActions: y,
+          dragId: `drag-${L.id}`,
+          dropId: `drop-${L.id}`,
           indent: h
         }
       ),
-      $[M.id] && M.children?.length > 0 ? y(M.children, F + 1) : null
-    ] }, M.id)),
-    [$, h, p, f, b, o, w, I]
+      T[L.id] && L.children?.length > 0 ? x(L.children, E + 1) : null
+    ] }, L.id)),
+    [T, h, p, b, g, o, y, I]
   );
-  return re.useMemo(() => {
-    if (!T) return null;
-    const k = String(T).replace(/^drag-/, "");
-    function F(M) {
-      for (const U of M) {
-        if (U.id === k) return U;
-        const S = U.children?.length ? F(U.children) : null;
+  return se.useMemo(() => {
+    if (!z) return null;
+    const k = String(z).replace(/^drag-/, "");
+    function E(L) {
+      for (const q of L) {
+        if (q.id === k) return q;
+        const S = q.children?.length ? E(q.children) : null;
         if (S) return S;
       }
       return null;
     }
-    return F(j);
-  }, [T, j]), /* @__PURE__ */ n("div", { className: "tv", children: [
+    return E(V);
+  }, [z, V]), /* @__PURE__ */ n("div", { className: "tv", children: [
     s !== !1 && /* @__PURE__ */ n("div", { className: "tv-header", children: [
       /* @__PURE__ */ e("div", { className: "tv-title", children: s }),
       /* @__PURE__ */ e("button", { className: "tv-btn", onClick: u, children: "+ New folder" })
@@ -4112,11 +4112,11 @@ function Jl({
       {
         collisionDetection: xr,
         sensors: G,
-        onDragStart: x,
+        onDragStart: w,
         onDragMove: C,
         onDragEnd: N,
         modifiers: [fr],
-        children: /* @__PURE__ */ e("div", { ref: q, className: "tv-list", children: y(j, 0) })
+        children: /* @__PURE__ */ e("div", { ref: B, className: "tv-list", children: x(V, 0) })
       }
     )
   ] });
@@ -4135,21 +4135,21 @@ const Xl = ({
   ...u
   // Pass remaining props to Tab.Group
 }) => {
-  const p = s === "vertical", b = (w) => ke(
+  const p = s === "vertical", g = (y) => ke(
     "py-2 -mb-px text-sm font-medium focus:outline-none border-b-2",
-    w ? "border-primaryX text-textX" : "border-transparent text-slate-600 hover:text-indigo-700"
-  ), f = (w) => ke(
+    y ? "border-primaryX text-textX" : "border-transparent text-slate-600 hover:text-indigo-700"
+  ), b = (y) => ke(
     "text-left text-sm rounded-md px-2 py-1.5 focus:outline-none",
-    w ? "bg-primaryX text-white" : "text-textX hover:bg-lightgray-100 hover:text-primaryX"
-  ), r = ({ selected: w }) => o ? typeof o == "function" ? o(w) : o : p ? f(w) : b(w);
-  return /* @__PURE__ */ e(se.Group, { vertical: p, ...u, children: p ? /* @__PURE__ */ n("div", { className: ke("flex gap-4", i), children: [
-    /* @__PURE__ */ e(se.List, { className: ke("w-[150px] flex flex-col gap-1 border-r border-gray-300 pr-2", l), children: t.map((w) => /* @__PURE__ */ e(se, { className: r, children: w.label }, w.key)) }),
-    /* @__PURE__ */ e(se.Panels, { unmount: !a, className: ke("flex-1", m), children: t.map((w) => /* @__PURE__ */ e(se.Panel, { className: "focus:outline-none", children: /* @__PURE__ */ e("div", { className: "[overflow-anchor:none]", children: w.content }) }, w.key)) })
+    y ? "bg-primaryX text-white" : "text-textX hover:bg-lightgray-100 hover:text-primaryX"
+  ), r = ({ selected: y }) => o ? typeof o == "function" ? o(y) : o : p ? b(y) : g(y);
+  return /* @__PURE__ */ e(re.Group, { vertical: p, ...u, children: p ? /* @__PURE__ */ n("div", { className: ke("flex gap-4", i), children: [
+    /* @__PURE__ */ e(re.List, { className: ke("w-[150px] flex flex-col gap-1 border-r border-gray-300 pr-2", l), children: t.map((y) => /* @__PURE__ */ e(re, { className: r, children: y.label }, y.key)) }),
+    /* @__PURE__ */ e(re.Panels, { unmount: !a, className: ke("flex-1", m), children: t.map((y) => /* @__PURE__ */ e(re.Panel, { className: "focus:outline-none", children: /* @__PURE__ */ e("div", { className: "[overflow-anchor:none]", children: y.content }) }, y.key)) })
   ] }) : (
     // mostly this part is used :  horizontal
     /* @__PURE__ */ n(te, { children: [
-      /* @__PURE__ */ e(se.List, { className: ke("flex gap-6 border rounded-t-2xl px-1.5 border-gray-300 mb-3 ", l), children: t.map((w) => /* @__PURE__ */ e(se, { className: r, children: w.label }, w.key)) }),
-      /* @__PURE__ */ e(se.Panels, { unmount: !a, className: ke("mt-2", m), children: t.map((w) => /* @__PURE__ */ e(se.Panel, { className: "focus:outline-none", children: /* @__PURE__ */ e("div", { className: "[overflow-anchor:none]", children: w.content }) }, w.key)) })
+      /* @__PURE__ */ e(re.List, { className: ke("flex gap-6 border rounded-t-2xl px-1.5 border-gray-300 mb-3 ", l), children: t.map((y) => /* @__PURE__ */ e(re, { className: r, children: y.label }, y.key)) }),
+      /* @__PURE__ */ e(re.Panels, { unmount: !a, className: ke("mt-2", m), children: t.map((y) => /* @__PURE__ */ e(re.Panel, { className: "focus:outline-none", children: /* @__PURE__ */ e("div", { className: "[overflow-anchor:none]", children: y.content }) }, y.key)) })
     ] })
   ) });
 };
@@ -4159,7 +4159,7 @@ function Hl(t, a = "YYYY-MM-DD HH:mm:ss") {
 c.string;
 function ys({ item: t, data: a, updateHandler: s, validationErrors: i = {} }) {
   console.log(t);
-  const [l, m] = re.useState(t), [o, u] = re.useState(() => {
+  const [l, m] = se.useState(t), [o, u] = se.useState(() => {
     const r = a && a[t.key] || {};
     return console.log("Initial Section data for", t.key, r), r;
   }), p = xe(a);
@@ -4170,30 +4170,30 @@ function ys({ item: t, data: a, updateHandler: s, validationErrors: i = {} }) {
       console.log("Updated Section data for", t.key, r), u(r);
     }
   }, [a, t.key]), console.log("Section data", o);
-  const b = xe(o);
+  const g = xe(o);
   Z(() => {
-    b.current !== o && s && typeof s == "function" && (b.current = o, s(l.key, o));
+    g.current !== o && s && typeof s == "function" && (g.current = o, s(l.key, o));
   }, [l.key, o, s]);
-  const f = (r) => {
+  const b = (r) => {
     if (!r.dependsOn) return !0;
-    const { field: w, value: d, operator: h = "equals" } = r.dependsOn, z = o[w];
+    const { field: y, value: d, operator: h = "equals" } = r.dependsOn, $ = o[y];
     switch (h) {
       case "equals":
-        return z === d;
+        return $ === d;
       case "notEquals":
-        return z !== d;
+        return $ !== d;
       case "contains":
-        return Array.isArray(z) && z.includes(d);
+        return Array.isArray($) && $.includes(d);
       case "notContains":
-        return !Array.isArray(z) || !z.includes(d);
+        return !Array.isArray($) || !$.includes(d);
       case "greaterThan":
-        return Number(z) > Number(d);
+        return Number($) > Number(d);
       case "lessThan":
-        return Number(z) < Number(d);
+        return Number($) < Number(d);
       case "isEmpty":
-        return !z || Array.isArray(z) && z.length === 0;
+        return !$ || Array.isArray($) && $.length === 0;
       case "isNotEmpty":
-        return z && (!Array.isArray(z) || z.length > 0);
+        return $ && (!Array.isArray($) || $.length > 0);
       default:
         return !0;
     }
@@ -4211,7 +4211,7 @@ function ys({ item: t, data: a, updateHandler: s, validationErrors: i = {} }) {
       }
     ),
     /* @__PURE__ */ e("p", { style: { fontSize: "14px", marginBottom: "10px" }, children: l.description }),
-    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: l.fields.map((r, w) => f(r) && /* @__PURE__ */ n("div", { style: { marginBottom: "10px" }, children: [
+    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: l.fields.map((r, y) => b(r) && /* @__PURE__ */ n("div", { style: { marginBottom: "10px" }, children: [
       /* @__PURE__ */ n(
         "label",
         {
@@ -4411,7 +4411,6 @@ function ys({ item: t, data: a, updateHandler: s, validationErrors: i = {} }) {
               const h = { ...o, [r.key]: d };
               u(h), s && s(l.key, h);
             },
-            label: r.placeholder || r.label,
             disabled: r.disabled ? r.disabled : !1
           }
         ),
@@ -4474,8 +4473,8 @@ function ys({ item: t, data: a, updateHandler: s, validationErrors: i = {} }) {
               value: d.value,
               checked: o[r.key] === d.value,
               onChange: (h) => {
-                const z = { ...o, [r.key]: h.target.value };
-                u(z), s && s(l.key, z);
+                const $ = { ...o, [r.key]: h.target.value };
+                u($), s && s(l.key, $);
               },
               disabled: r.disabled
             }
@@ -4592,8 +4591,8 @@ function ys({ item: t, data: a, updateHandler: s, validationErrors: i = {} }) {
             type: "file",
             name: r.key,
             onChange: (d) => {
-              const h = d.target.files[0], z = { ...o, [r.key]: h ? h.name : "" };
-              u(z), s && s(l.key, z);
+              const h = d.target.files[0], $ = { ...o, [r.key]: h ? h.name : "" };
+              u($), s && s(l.key, $);
             },
             accept: r.accept,
             className: `w-full ${i[l.key]?.[r.key] ? "border-red-500" : ""}`
@@ -4632,407 +4631,407 @@ function ys({ item: t, data: a, updateHandler: s, validationErrors: i = {} }) {
           children: r.info
         }
       )
-    ] }, w)) })
+    ] }, y)) })
   ] }) });
 }
 const vs = ({ children: t }) => /* @__PURE__ */ e("div", { className: "flex -space-x-2", children: t });
 function ws({ item: t, data: a, updateHandler: s, validationErrors: i = {} }) {
   console.log(`[DynamicConfig/DataTableRenderer] Component loaded for section: ${t.key}`);
-  const [l, m] = L(t), [o, u] = L(null), [p, b] = L(null);
+  const [l, m] = M(t), [o, u] = M(null), [p, g] = M(null);
   console.log(`[DataTableRenderer] ${l.key} - Received props:`, { item: t, initialData: a });
-  const [f, r] = L(() => {
-    const v = a && a[l.key] || [], g = v.length > 0 ? v : [{ id: 0 }];
-    return console.log(`[DataTableRenderer] ${l.key} - Initial data:`, g), g;
-  }), w = xe(a);
+  const [b, r] = M(() => {
+    const f = a && a[l.key] || [], v = f.length > 0 ? f : [{ id: 0 }];
+    return console.log(`[DataTableRenderer] ${l.key} - Initial data:`, v), v;
+  }), y = xe(a);
   Z(() => {
-    if (console.log(`[DataTableRenderer] ${l.key} - Checking for initialData changes`), console.log(`[DataTableRenderer] ${l.key} - Previous:`, w.current), console.log(`[DataTableRenderer] ${l.key} - Current:`, a), w.current !== a) {
-      w.current = a;
-      const v = a && a[l.key] || [], g = v.length > 0 ? v : [{ id: 0 }];
-      console.log(`[DataTableRenderer] ${l.key} - Setting new data:`, g), r(g);
+    if (console.log(`[DataTableRenderer] ${l.key} - Checking for initialData changes`), console.log(`[DataTableRenderer] ${l.key} - Previous:`, y.current), console.log(`[DataTableRenderer] ${l.key} - Current:`, a), y.current !== a) {
+      y.current = a;
+      const f = a && a[l.key] || [], v = f.length > 0 ? f : [{ id: 0 }];
+      console.log(`[DataTableRenderer] ${l.key} - Setting new data:`, v), r(v);
     }
   }, [a, l.key]);
-  const d = xe(f), h = xe(null);
+  const d = xe(b), h = xe(null);
   Z(() => {
-    d.current !== f && s && typeof s == "function" && (d.current = f, h.current && clearTimeout(h.current), h.current = setTimeout(() => {
-      s(l.key, f);
+    d.current !== b && s && typeof s == "function" && (d.current = b, h.current && clearTimeout(h.current), h.current = setTimeout(() => {
+      s(l.key, b);
     }, 300));
-  }, [l.key, f, s]), Z(() => () => {
+  }, [l.key, b, s]), Z(() => () => {
     h.current && clearTimeout(h.current);
   }, []);
-  const z = (v) => {
-    const g = (N, y) => {
-      console.log("[DataTableRenderer] updateFieldValue called with:", { rowIndex: N, value: y, type: typeof y }), r((k) => {
-        const F = [...k];
-        return F[N][v.key] = y, F;
+  const $ = (f) => {
+    const v = (N, x) => {
+      console.log("[DataTableRenderer] updateFieldValue called with:", { rowIndex: N, value: x, type: typeof x }), r((k) => {
+        const E = [...k];
+        return E[N][f.key] = x, E;
       });
-    }, x = (N) => i[l.key]?.[N]?.[v.key], C = (N) => {
-      const y = x(N);
-      return y ? /* @__PURE__ */ e("div", { className: "text-red-500 text-xs mt-1", children: y }) : null;
+    }, w = (N) => i[l.key]?.[N]?.[f.key], C = (N) => {
+      const x = w(N);
+      return x ? /* @__PURE__ */ e("div", { className: "text-red-500 text-xs mt-1", children: x }) : null;
     };
-    switch (v.fieldtype) {
+    switch (f.fieldtype) {
       case "text":
-        return (N, y) => /* @__PURE__ */ n("div", { children: [
+        return (N, x) => /* @__PURE__ */ n("div", { children: [
           /* @__PURE__ */ e(
             X,
             {
-              value: N[v.key] || "",
-              onChange: (k) => g(y, k.target.value),
-              placeholder: v.placeholder || `Enter ${v.label}`,
-              required: v.required,
-              className: `w-full ${x(y) ? "border-red-500" : ""}`
+              value: N[f.key] || "",
+              onChange: (k) => v(x, k.target.value),
+              placeholder: f.placeholder || `Enter ${f.label}`,
+              required: f.required,
+              className: `w-full ${w(x) ? "border-red-500" : ""}`
             }
           ),
-          C(y)
+          C(x)
         ] });
       case "textarea":
-        return (N, y) => /* @__PURE__ */ n("div", { children: [
+        return (N, x) => /* @__PURE__ */ n("div", { children: [
           /* @__PURE__ */ e(
             ya,
             {
-              value: N[v.key] || "",
-              onChange: (k) => g(y, k.target.value),
-              placeholder: v.placeholder || `Enter ${v.label}`,
-              required: v.required,
-              className: `w-full ${x(y) ? "border-red-500" : ""}`,
+              value: N[f.key] || "",
+              onChange: (k) => v(x, k.target.value),
+              placeholder: f.placeholder || `Enter ${f.label}`,
+              required: f.required,
+              className: `w-full ${w(x) ? "border-red-500" : ""}`,
               rows: 3
             }
           ),
-          C(y)
+          C(x)
         ] });
       case "number":
-        return (N, y) => /* @__PURE__ */ n("div", { children: [
+        return (N, x) => /* @__PURE__ */ n("div", { children: [
           /* @__PURE__ */ e(
             X,
             {
               type: "number",
-              value: N[v.key] || "",
-              onChange: (k) => g(y, k.target.value),
-              placeholder: v.placeholder || `Enter ${v.label}`,
-              required: v.required,
-              className: `w-full ${x(y) ? "border-red-500" : ""}`
+              value: N[f.key] || "",
+              onChange: (k) => v(x, k.target.value),
+              placeholder: f.placeholder || `Enter ${f.label}`,
+              required: f.required,
+              className: `w-full ${w(x) ? "border-red-500" : ""}`
             }
           ),
-          C(y)
+          C(x)
         ] });
       case "email":
-        return (N, y) => /* @__PURE__ */ n("div", { children: [
+        return (N, x) => /* @__PURE__ */ n("div", { children: [
           /* @__PURE__ */ e(
             X,
             {
               type: "email",
-              value: N[v.key] || "",
-              onChange: (k) => g(y, k.target.value),
-              placeholder: v.placeholder || "Enter email address",
-              required: v.required,
-              className: `w-full ${x(y) ? "border-red-500" : ""}`
+              value: N[f.key] || "",
+              onChange: (k) => v(x, k.target.value),
+              placeholder: f.placeholder || "Enter email address",
+              required: f.required,
+              className: `w-full ${w(x) ? "border-red-500" : ""}`
             }
           ),
-          C(y)
+          C(x)
         ] });
       case "url":
-        return (N, y) => /* @__PURE__ */ n("div", { children: [
+        return (N, x) => /* @__PURE__ */ n("div", { children: [
           /* @__PURE__ */ e(
             X,
             {
               type: "url",
-              value: N[v.key] || "",
-              onChange: (k) => g(y, k.target.value),
-              placeholder: v.placeholder || "Enter URL",
-              required: v.required,
-              className: `w-full ${x(y) ? "border-red-500" : ""}`
+              value: N[f.key] || "",
+              onChange: (k) => v(x, k.target.value),
+              placeholder: f.placeholder || "Enter URL",
+              required: f.required,
+              className: `w-full ${w(x) ? "border-red-500" : ""}`
             }
           ),
-          C(y)
+          C(x)
         ] });
       case "password":
-        return (N, y) => /* @__PURE__ */ n("div", { children: [
+        return (N, x) => /* @__PURE__ */ n("div", { children: [
           /* @__PURE__ */ e(
             X,
             {
               type: "password",
-              value: N[v.key] || "",
-              onChange: (k) => g(y, k.target.value),
-              placeholder: v.placeholder || "Enter password",
-              required: v.required,
-              className: `w-full ${x(y) ? "border-red-500" : ""}`
+              value: N[f.key] || "",
+              onChange: (k) => v(x, k.target.value),
+              placeholder: f.placeholder || "Enter password",
+              required: f.required,
+              className: `w-full ${w(x) ? "border-red-500" : ""}`
             }
           ),
-          C(y)
+          C(x)
         ] });
       case "select":
       case "dropdown":
-        return (N, y) => /* @__PURE__ */ n("div", { children: [
+        return (N, x) => /* @__PURE__ */ n("div", { children: [
           /* @__PURE__ */ e(
             ft,
             {
-              value: N[v.key] || "",
-              onChange: (k) => g(y, k),
-              options: v.options || [],
-              placeholder: v.placeholder || `Select ${v.label}`,
-              required: v.required,
-              className: `w-full ${x(y) ? "border-red-500" : ""}`
+              value: N[f.key] || "",
+              onChange: (k) => v(x, k),
+              options: f.options || [],
+              placeholder: f.placeholder || `Select ${f.label}`,
+              required: f.required,
+              className: `w-full ${w(x) ? "border-red-500" : ""}`
             }
           ),
-          C(y)
+          C(x)
         ] });
       case "selectDynamic":
-        return (N, y) => {
+        return (N, x) => {
           const k = () => {
-            if (v.optionsFrom && a) {
-              const { config: F, valueField: M, labelField: U } = v.optionsFrom, S = a[F] || [];
+            if (f.optionsFrom && a) {
+              const { config: E, valueField: L, labelField: q } = f.optionsFrom, S = a[E] || [];
               if (Array.isArray(S))
                 return S.map((O) => ({
-                  id: O[M] || "",
-                  value: O[M] || "",
-                  label: O[U] || ""
+                  id: O[L] || "",
+                  value: O[L] || "",
+                  label: O[q] || ""
                 }));
             }
-            return v.options || [];
+            return f.options || [];
           };
           return /* @__PURE__ */ n("div", { children: [
             /* @__PURE__ */ e(
               ft,
               {
-                index: y,
-                value: N[v.key] || "",
-                onChange: (F) => g(y, F),
+                index: x,
+                value: N[f.key] || "",
+                onChange: (E) => v(x, E),
                 options: k(),
-                placeholder: v.placeholder || `Select ${v.label}`,
-                required: v.required,
-                className: `w-full ${x(y) ? "border-red-500" : ""}`
+                placeholder: f.placeholder || `Select ${f.label}`,
+                required: f.required,
+                className: `w-full ${w(x) ? "border-red-500" : ""}`
               },
               Math.random()
             ),
-            C(y)
+            C(x)
           ] });
         };
       case "multiselect":
-        return (N, y) => {
-          const k = N[v.key] || [];
+        return (N, x) => {
+          const k = N[f.key] || [];
           return /* @__PURE__ */ e(
             nt,
             {
               selectedItems: k,
-              onSelectionChange: (F) => g(y, F),
-              options: v.options || [],
-              placeholder: v.placeholder || `Select ${v.label}`,
+              onSelectionChange: (E) => v(x, E),
+              options: f.options || [],
+              placeholder: f.placeholder || `Select ${f.label}`,
               className: "w-full"
             }
           );
         };
       case "checkbox":
       case "boolean":
-        return (N, y) => /* @__PURE__ */ e(
+        return (N, x) => /* @__PURE__ */ e(
           ma,
           {
-            checked: !!N[v.key],
-            onChange: (k) => g(y, k),
-            label: v.placeholder || v.label,
+            checked: !!N[f.key],
+            onChange: (k) => v(x, k),
+            label: f.placeholder || f.label,
             className: "w-full"
           }
         );
       case "toggle":
       case "switch":
-        return (N, y) => /* @__PURE__ */ e(
+        return (N, x) => /* @__PURE__ */ e(
           va,
           {
-            isOn: !!N[v.key],
-            onToggle: (k) => g(y, k),
-            label: v.placeholder || v.label,
+            isOn: !!N[f.key],
+            onToggle: (k) => v(x, k),
+            label: f.placeholder || f.label,
             className: "w-full"
           }
         );
       case "date":
-        return (N, y) => /* @__PURE__ */ e(
+        return (N, x) => /* @__PURE__ */ e(
           ga,
           {
-            selectedDate: N[v.key] ? new Date(N[v.key]) : null,
-            onDateChange: (k) => g(y, k ? k.toISOString().split("T")[0] : ""),
-            placeholder: v.placeholder || "Select date",
+            selectedDate: N[f.key] ? new Date(N[f.key]) : null,
+            onDateChange: (k) => v(x, k ? k.toISOString().split("T")[0] : ""),
+            placeholder: f.placeholder || "Select date",
             className: "w-full"
           }
         );
       case "datetime":
-        return (N, y) => /* @__PURE__ */ e(
+        return (N, x) => /* @__PURE__ */ e(
           X,
           {
             type: "datetime-local",
-            value: N[v.key] || "",
-            onChange: (k) => g(y, k.target.value),
-            placeholder: v.placeholder || "Select date and time",
-            required: v.required,
+            value: N[f.key] || "",
+            onChange: (k) => v(x, k.target.value),
+            placeholder: f.placeholder || "Select date and time",
+            required: f.required,
             className: "w-full"
           }
         );
       case "time":
-        return (N, y) => /* @__PURE__ */ e(
+        return (N, x) => /* @__PURE__ */ e(
           X,
           {
             type: "time",
-            value: N[v.key] || "",
-            onChange: (k) => g(y, k.target.value),
-            placeholder: v.placeholder || "Select time",
-            required: v.required,
+            value: N[f.key] || "",
+            onChange: (k) => v(x, k.target.value),
+            placeholder: f.placeholder || "Select time",
+            required: f.required,
             className: "w-full"
           }
         );
       case "radio":
-        return (N, y) => /* @__PURE__ */ e(
+        return (N, x) => /* @__PURE__ */ e(
           ba,
           {
-            selectedValue: N[v.key] || "",
-            onValueChange: (k) => g(y, k),
-            options: v.options || [],
+            selectedValue: N[f.key] || "",
+            onValueChange: (k) => v(x, k),
+            options: f.options || [],
             className: "w-full"
           }
         );
       case "search":
-        return (N, y) => /* @__PURE__ */ e(
+        return (N, x) => /* @__PURE__ */ e(
           be,
           {
-            value: N[v.key] || "",
-            onChange: (k) => g(y, k),
-            placeholder: v.placeholder || `Search ${v.label}`,
+            value: N[f.key] || "",
+            onChange: (k) => v(x, k),
+            placeholder: f.placeholder || `Search ${f.label}`,
             className: "w-full"
           }
         );
       case "audience":
-        return (N, y) => {
-          const k = N[v.key] || { users: [], groups: [], roles: [] }, F = [
+        return (N, x) => {
+          const k = N[f.key] || { users: [], groups: [], roles: [] }, E = [
             ...k.users || [],
             ...k.groups || [],
             ...k.roles || []
           ];
           return /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ e(vs, { children: F.length > 0 ? F.slice(0, 3).map((M, U) => /* @__PURE__ */ e(
+            /* @__PURE__ */ e(vs, { children: E.length > 0 ? E.slice(0, 3).map((L, q) => /* @__PURE__ */ e(
               ze,
               {
                 size: "small",
-                name: M.name || M.displayName || M.id,
-                src: M.avatarUrl
+                name: L.name || L.displayName || L.id,
+                src: L.avatarUrl
               },
-              U
+              q
             )) : null }),
             /* @__PURE__ */ e(
               "button",
               {
                 className: "text-blue-600 font-semibold hover:text-blue-800",
                 onClick: () => {
-                  b(v.key), u(y);
+                  g(f.key), u(x);
                 },
-                children: F.length > 0 ? "Edit" : "Assign"
+                children: E.length > 0 ? "Edit" : "Assign"
               }
             )
           ] });
         };
       case "color":
-        return (N, y) => /* @__PURE__ */ e(
+        return (N, x) => /* @__PURE__ */ e(
           X,
           {
             type: "color",
-            value: N[v.key] || "#000000",
-            onChange: (k) => g(y, k.target.value),
+            value: N[f.key] || "#000000",
+            onChange: (k) => v(x, k.target.value),
             className: "w-full h-10"
           }
         );
       case "range":
-        return (N, y) => /* @__PURE__ */ n("div", { className: "w-full", children: [
+        return (N, x) => /* @__PURE__ */ n("div", { className: "w-full", children: [
           /* @__PURE__ */ e(
             X,
             {
               type: "range",
-              value: N[v.key] || v.min || 0,
-              onChange: (k) => g(y, k.target.value),
-              min: v.min || 0,
-              max: v.max || 100,
-              step: v.step || 1,
+              value: N[f.key] || f.min || 0,
+              onChange: (k) => v(x, k.target.value),
+              min: f.min || 0,
+              max: f.max || 100,
+              step: f.step || 1,
               className: "w-full"
             }
           ),
-          /* @__PURE__ */ e("span", { className: "text-sm text-gray-500", children: N[v.key] || v.min || 0 })
+          /* @__PURE__ */ e("span", { className: "text-sm text-gray-500", children: N[f.key] || f.min || 0 })
         ] });
       case "file":
-        return (N, y) => /* @__PURE__ */ e(
+        return (N, x) => /* @__PURE__ */ e(
           X,
           {
             type: "file",
             onChange: (k) => {
-              const F = k.target.files[0];
-              g(y, F ? F.name : "");
+              const E = k.target.files[0];
+              v(x, E ? E.name : "");
             },
-            accept: v.accept,
+            accept: f.accept,
             className: "w-full"
           }
         );
       case "hidden":
-        return (N, y) => /* @__PURE__ */ e(
+        return (N, x) => /* @__PURE__ */ e(
           X,
           {
             type: "hidden",
-            value: N[v.key] || "",
-            onChange: (k) => g(y, k.target.value)
+            value: N[f.key] || "",
+            onChange: (k) => v(x, k.target.value)
           }
         );
       // Default fallback for unknown field types
       default:
-        return (N, y) => /* @__PURE__ */ n("div", { children: [
+        return (N, x) => /* @__PURE__ */ n("div", { children: [
           /* @__PURE__ */ e(
             X,
             {
-              value: N[v.key] || "",
-              onChange: (k) => g(y, k.target.value),
-              placeholder: v.placeholder || `Enter ${v.label}`,
-              required: v.required,
-              className: `w-full ${x(y) ? "border-red-500" : ""}`
+              value: N[f.key] || "",
+              onChange: (k) => v(x, k.target.value),
+              placeholder: f.placeholder || `Enter ${f.label}`,
+              required: f.required,
+              className: `w-full ${w(x) ? "border-red-500" : ""}`
             }
           ),
-          C(y)
+          C(x)
         ] });
     }
-  }, $ = ae(() => {
-    console.log("[DataTableRenderer] Adding blank row"), r((v) => {
-      console.log("[DataTableRenderer] Current data before add:", v);
-      const g = {
-        id: v.length
+  }, T = ne(() => {
+    console.log("[DataTableRenderer] Adding blank row"), r((f) => {
+      console.log("[DataTableRenderer] Current data before add:", f);
+      const v = {
+        id: f.length
         // Assign next available ID
       };
       l.fields.forEach((C) => {
-        C.fieldtype === "audience" ? g[C.key] = { users: [], groups: [], roles: [] } : g[C.key] = C.default || "";
-      }), console.log("[DataTableRenderer] New blank row:", g);
-      const x = [...v, g];
-      return console.log("[DataTableRenderer] Updated data:", x), x;
+        C.fieldtype === "audience" ? v[C.key] = { users: [], groups: [], roles: [] } : v[C.key] = C.default || "";
+      }), console.log("[DataTableRenderer] New blank row:", v);
+      const w = [...f, v];
+      return console.log("[DataTableRenderer] Updated data:", w), w;
     });
-  }, [l.fields]), A = ae((v) => {
-    r((g) => {
-      if (g.length <= 1)
-        return g;
-      const x = [...g];
-      return x.splice(v, 1), x;
+  }, [l.fields]), F = ne((f) => {
+    r((v) => {
+      if (v.length <= 1)
+        return v;
+      const w = [...v];
+      return w.splice(f, 1), w;
     });
-  }, []), [E, I] = L(null), j = ae((v, g) => {
-    I(g), v.dataTransfer.effectAllowed = "move", v.dataTransfer.setData("text/html", "");
-  }, []), V = ae((v) => {
-    v.preventDefault(), v.dataTransfer.dropEffect = "move";
-  }, []), G = ae((v, g) => {
-    v.preventDefault(), !(E === null || E === g) && (r((x) => {
-      const C = [...x], N = C[E];
-      return C.splice(E, 1), C.splice(g, 0, N), C;
+  }, []), [A, I] = M(null), V = ne((f, v) => {
+    I(v), f.dataTransfer.effectAllowed = "move", f.dataTransfer.setData("text/html", "");
+  }, []), U = ne((f) => {
+    f.preventDefault(), f.dataTransfer.dropEffect = "move";
+  }, []), G = ne((f, v) => {
+    f.preventDefault(), !(A === null || A === v) && (r((w) => {
+      const C = [...w], N = C[A];
+      return C.splice(A, 1), C.splice(v, 0, N), C;
     }), I(null));
-  }, [E]), q = ae(() => {
+  }, [A]), B = ne(() => {
     I(null);
-  }, []), T = ae((v) => {
-    console.log("[DataTableRenderer] handleAddAudience called with:", v), r((g) => {
-      const x = [...g];
-      if (o !== null && p && x[o]) {
-        const C = v.pendingInvites || [], N = C.filter((F) => F.type === "User"), y = C.filter((F) => F.type === "Group"), k = C.filter((F) => F.type === "Role");
-        x[o][p] = {
-          users: [...x[o][p]?.users || [], ...N],
-          groups: [...x[o][p]?.groups || [], ...y],
-          roles: [...x[o][p]?.roles || [], ...k]
-        }, console.log("[DataTableRenderer] Updated audience data:", x[o][p]);
+  }, []), z = ne((f) => {
+    console.log("[DataTableRenderer] handleAddAudience called with:", f), r((v) => {
+      const w = [...v];
+      if (o !== null && p && w[o]) {
+        const C = f.pendingInvites || [], N = C.filter((E) => E.type === "User"), x = C.filter((E) => E.type === "Group"), k = C.filter((E) => E.type === "Role");
+        w[o][p] = {
+          users: [...w[o][p]?.users || [], ...N],
+          groups: [...w[o][p]?.groups || [], ...x],
+          roles: [...w[o][p]?.roles || [], ...k]
+        }, console.log("[DataTableRenderer] Updated audience data:", w[o][p]);
       }
-      return x;
-    }), u(null), b(null);
+      return w;
+    }), u(null), g(null);
   }, [o, p]);
   return /* @__PURE__ */ n("div", { children: [
     /* @__PURE__ */ n("div", { style: { marginBottom: "20px" }, children: [
@@ -5042,7 +5041,7 @@ function ws({ item: t, data: a, updateHandler: s, validationErrors: i = {} }) {
           "button",
           {
             className: "btn btn-primary text-white px-6 py-2 rounded-2xl cursor-pointer hover:bg-gray-800",
-            onClick: $,
+            onClick: T,
             children: "Add"
           }
         )
@@ -5052,32 +5051,32 @@ function ws({ item: t, data: a, updateHandler: s, validationErrors: i = {} }) {
     /* @__PURE__ */ e("div", { className: "overflow-x-auto", children: /* @__PURE__ */ n("table", { className: "min-w-full bg-white border border-gray-300", style: { marginBottom: "20px" }, children: [
       /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ n("tr", { className: "bg-gray-50", children: [
         /* @__PURE__ */ e("th", { className: "px-4 py-2 w-10" }),
-        l.fields.map((v, g) => /* @__PURE__ */ e(
+        l.fields.map((f, v) => /* @__PURE__ */ e(
           "th",
           {
             className: "px-4 py-2 text-left text-sm font-medium text-gray-700",
-            children: v.label || v.key
+            children: f.label || f.key
           },
-          g
+          v
         )),
         /* @__PURE__ */ e("th", { className: "px-4 py-2 w-16" })
       ] }) }),
-      /* @__PURE__ */ e("tbody", { children: f.map((v, g) => /* @__PURE__ */ n(
+      /* @__PURE__ */ e("tbody", { children: b.map((f, v) => /* @__PURE__ */ n(
         "tr",
         {
-          className: `hover:bg-gray-50 ${E === g ? "opacity-50" : ""}`,
+          className: `hover:bg-gray-50 ${A === v ? "opacity-50" : ""}`,
           draggable: !0,
-          onDragStart: (x) => j(x, g),
-          onDragOver: V,
-          onDrop: (x) => G(x, g),
-          onDragEnd: q,
+          onDragStart: (w) => V(w, v),
+          onDragOver: U,
+          onDrop: (w) => G(w, v),
+          onDragEnd: B,
           children: [
             /* @__PURE__ */ e("td", { className: "px-4 py-2 ", children: /* @__PURE__ */ e("div", { className: "cursor-move text-gray-400 hover:text-gray-600", children: /* @__PURE__ */ e(Nt, { size: 16 }) }) }),
-            l.fields.map((x, C) => /* @__PURE__ */ e("td", { className: "px-4 py-2 ", children: z(x)(v, g) }, C)),
+            l.fields.map((w, C) => /* @__PURE__ */ e("td", { className: "px-4 py-2 ", children: $(w)(f, v) }, C)),
             /* @__PURE__ */ e("td", { className: "px-4 py-2 ", children: /* @__PURE__ */ e(
               "button",
               {
-                onClick: () => A(g),
+                onClick: () => F(v),
                 className: "text-red-500 hover:text-red-700",
                 title: "Delete row",
                 children: /* @__PURE__ */ e(vr, { size: 16 })
@@ -5085,24 +5084,24 @@ function ws({ item: t, data: a, updateHandler: s, validationErrors: i = {} }) {
             ) })
           ]
         },
-        g
+        v
       )) })
     ] }) }),
     o !== null && (() => {
-      const v = f[o] && f[o][p] ? {
-        users: f[o][p].users || [],
-        groups: f[o][p].groups || [],
-        roles: f[o][p].roles || []
+      const f = b[o] && b[o][p] ? {
+        users: b[o][p].users || [],
+        groups: b[o][p].groups || [],
+        roles: b[o][p].roles || []
       } : { users: [], groups: [], roles: [] };
-      return console.log("[DataTableRenderer] Opening modal with existing data:", v), console.log("[DataTableRenderer] Row data:", f[o]), console.log("[DataTableRenderer] Field name:", p), /* @__PURE__ */ e(
+      return console.log("[DataTableRenderer] Opening modal with existing data:", f), console.log("[DataTableRenderer] Row data:", b[o]), console.log("[DataTableRenderer] Field name:", p), /* @__PURE__ */ e(
         os,
         {
           isOpen: !0,
           onClose: () => {
-            u(null), b(null);
+            u(null), g(null);
           },
-          onFinalSubmit: T,
-          existingShares: v,
+          onFinalSubmit: z,
+          existingShares: f,
           allowedPermissions: ["view", "remove"]
         }
       );
@@ -5176,7 +5175,7 @@ const Mt = () => {
   initialData: p = null
   // Add prop for initial demo data
 }) => {
-  const [b, f] = L(null), [r, w] = L(""), [d, h] = L(() => Array.isArray(p) ? p : []), [z, $] = L(null), [A, E] = L(null), [I, j] = L(""), V = async () => {
+  const [g, b] = M(null), [r, y] = M(""), [d, h] = M(() => Array.isArray(p) ? p : []), [$, T] = M(null), [F, A] = M(null), [I, V] = M(""), U = async () => {
     try {
       const S = await Ve(t.collectionList);
       if (S) {
@@ -5191,14 +5190,14 @@ const Mt = () => {
     }
   };
   Z(() => {
-    (!p || p.length === 0) && V();
+    (!p || p.length === 0) && U();
   }, [p]), Z(() => {
     Array.isArray(p) && h(p);
   }, [p]);
   const G = (S) => {
-    m && (f(S.id), w(S.categoryName || ""));
-  }, q = () => {
-    if (!l || b !== null) return;
+    m && (b(S.id), y(S.categoryName || ""));
+  }, B = () => {
+    if (!l || g !== null) return;
     const S = `temp-${Date.now()}`;
     h((O) => [
       ...O,
@@ -5209,15 +5208,15 @@ const Mt = () => {
         order: (O.at(-1)?.order ?? 0) + 1,
         _temp: !0
       }
-    ]), f(S), w("");
-  }, T = () => {
-    b != null && (h((S) => {
-      const O = S.find((P) => P.id === b), D = O && O._temp ? S.filter((P) => P.id !== b) : S;
+    ]), b(S), y("");
+  }, z = () => {
+    g != null && (h((S) => {
+      const O = S.find((P) => P.id === g), D = O && O._temp ? S.filter((P) => P.id !== g) : S;
       return s?.(D), D;
-    }), f(null), w(""));
-  }, v = async () => {
-    if (b == null || !r.trim()) return;
-    const S = typeof b == "string" && b.startsWith("temp-");
+    }), b(null), y(""));
+  }, f = async () => {
+    if (g == null || !r.trim()) return;
+    const S = typeof g == "string" && g.startsWith("temp-");
     try {
       if (S) {
         const O = await _e(t.collectionCreate, {
@@ -5225,32 +5224,32 @@ const Mt = () => {
           order: (Array.isArray(d) && d.length > 0 ? d.at(-1)?.order ?? 0 : 0) + 1
         });
         O && (h((D) => {
-          const P = D.map((_) => _.id === b ? O : _);
+          const P = D.map((_) => _.id === g ? O : _);
           return s?.(P), P;
         }), De.success("Collection created successfully"));
       } else {
         const O = await Zn(
-          `${t.collectionUpdate}/${b}?newName=${r.trim()}`
+          `${t.collectionUpdate}/${g}?newName=${r.trim()}`
         );
         h((D) => {
           const P = D.map(
-            (_) => _.id === b ? O && O.id ? { ..._, ...O } : { ..._, categoryName: r.trim() } : _
+            (_) => _.id === g ? O && O.id ? { ..._, ...O } : { ..._, categoryName: r.trim() } : _
           );
           return s?.(P), P;
         }), me.success("Collection updated successfully");
       }
-      f(null), w("");
+      b(null), y("");
     } catch (O) {
       console.log(O), me.error("Failed to save collection");
     }
-  }, g = async (S) => {
+  }, v = async (S) => {
     if (o)
       try {
-        await Qn(`${t.collectionUpdate}/${S.id}`) && (me.success("Deleted successfully", { autoClose: 3e3 }), V());
+        await Qn(`${t.collectionUpdate}/${S.id}`) && (me.success("Deleted successfully", { autoClose: 3e3 }), U());
       } catch (O) {
         console.log(O), me.error("Failed to delete collection");
       }
-  }, x = (S, O, D) => {
+  }, w = (S, O, D) => {
     if (!u || !O || !D || O === D) return S;
     const P = S.findIndex((W) => W.id === O), _ = S.findIndex((W) => W.id === D);
     if (P === -1 || _ === -1) return S;
@@ -5268,21 +5267,21 @@ const Mt = () => {
       console.log(D), me.error("Failed to save order", { autoClose: 2500 });
     }
   }, N = (S, O) => {
-    u && (S.dataTransfer.effectAllowed = "move", S.dataTransfer.setData("text/plain", String(O)), $(O));
-  }, y = (S) => {
-    z && S !== A && E(S);
+    u && (S.dataTransfer.effectAllowed = "move", S.dataTransfer.setData("text/plain", String(O)), T(O));
+  }, x = (S) => {
+    $ && S !== F && A(S);
   }, k = (S) => {
     S.preventDefault();
-  }, F = async (S, O) => {
+  }, E = async (S, O) => {
     S.preventDefault();
     const D = S.dataTransfer.getData("text/plain");
     D && (h((P) => {
-      const _ = x(P, D, O);
+      const _ = w(P, D, O);
       return console.log("Reordered", _), C(_), s?.(_), _;
-    }), $(null), E(null));
-  }, M = () => {
-    $(null), E(null);
-  }, U = Array.isArray(d) ? d.filter(
+    }), T(null), A(null));
+  }, L = () => {
+    T(null), A(null);
+  }, q = Array.isArray(d) ? d.filter(
     (S) => S.categoryName?.toLowerCase().includes(I.toLowerCase())
   ) : [];
   return /* @__PURE__ */ n("div", { className: `manage-collection-list ${a}`, children: [
@@ -5291,7 +5290,7 @@ const Mt = () => {
         be,
         {
           value: I,
-          onDebouncedChange: j,
+          onDebouncedChange: V,
           placeholder: "Search Collection",
           customClass: "mr-4 searchmanagecollection"
         }
@@ -5301,23 +5300,23 @@ const Mt = () => {
         {
           className: [
             "px-4 py-3 bg-black text-white rounded-2xl ml-4",
-            b !== null ? "opacity-60 cursor-not-allowed" : "cursor-pointer"
+            g !== null ? "opacity-60 cursor-not-allowed" : "cursor-pointer"
           ].join(" "),
-          onClick: q,
-          disabled: b !== null,
+          onClick: B,
+          disabled: g !== null,
           children: "Add a Collection"
         }
       )
     ] }) }),
-    /* @__PURE__ */ e("div", { className: "mt-5 flex flex-col", children: U.map((S) => {
-      const O = b === S.id, D = S?.links?.length ?? 0, P = z === S.id, _ = A === S.id && z !== S.id;
+    /* @__PURE__ */ e("div", { className: "mt-5 flex flex-col", children: q.map((S) => {
+      const O = g === S.id, D = S?.links?.length ?? 0, P = $ === S.id, _ = F === S.id && $ !== S.id;
       return /* @__PURE__ */ e(
         "div",
         {
-          onDragEnter: () => y(S.id),
+          onDragEnter: () => x(S.id),
           onDragOver: k,
-          onDrop: (R) => F(R, S.id),
-          onDragEnd: M,
+          onDrop: (R) => E(R, S.id),
+          onDragEnd: L,
           className: [
             "flex items-center justify-between p-3 border rounded-2xl mb-3",
             "border-gray-300",
@@ -5332,9 +5331,9 @@ const Mt = () => {
                 className: "flex-1 h-10 px-3 max-w-[200px] border border-gray-300 rounded-2xl outline-none focus:ring-2 focus:ring-gray-800/20",
                 value: r,
                 placeholder: S._temp ? "New collection name" : "Edit collection name",
-                onChange: (R) => w(R.target.value),
+                onChange: (R) => y(R.target.value),
                 onKeyDown: (R) => {
-                  R.key === "Enter" && v(), R.key === "Escape" && T();
+                  R.key === "Enter" && f(), R.key === "Escape" && z();
                 },
                 autoFocus: !0
               }
@@ -5344,7 +5343,7 @@ const Mt = () => {
                 "button",
                 {
                   className: "cursor-pointer border border-gray-300 p-2 rounded-2xl",
-                  onClick: T,
+                  onClick: z,
                   "aria-label": "Cancel edit",
                   children: /* @__PURE__ */ e(ge, { color: "#767676" })
                 }
@@ -5356,7 +5355,7 @@ const Mt = () => {
                     "border p-2 rounded-2xl",
                     r.trim() ? "cursor-pointer border-gray-300" : "cursor-not-allowed border-gray-200"
                   ].join(" "),
-                  onClick: v,
+                  onClick: f,
                   "aria-label": "Save",
                   disabled: !r.trim(),
                   title: r.trim() ? "Save" : "Name required",
@@ -5395,7 +5394,7 @@ const Mt = () => {
                 {
                   className: D === 0 && !S.protected ? "cursor-pointer" : "cursor-not-allowed",
                   title: D === 0 && !S.protected ? "Delete" : "Cannot delete this collection",
-                  onClick: D === 0 ? () => g(S) : null,
+                  onClick: D === 0 ? () => v(S) : null,
                   children: /* @__PURE__ */ e(Ke, { color: D === 0 ? "#767676" : "#C2C2C2" })
                 }
               )
@@ -5414,10 +5413,10 @@ const Mt = () => {
     initialData: o = null,
     showSearch: u = !0,
     allowAdd: p = !0,
-    allowEdit: b = !0,
-    allowDelete: f = !0,
+    allowEdit: g = !0,
+    allowDelete: b = !0,
     allowReorder: r = !0,
-    className: w = ""
+    className: y = ""
   } = t, d = a?.[t.key] || o || [], h = Array.isArray(d) ? d : [];
   return /* @__PURE__ */ n("div", { className: "dynamic-config-manage-collection-list", children: [
     (i || l) && /* @__PURE__ */ n("div", { className: "mb-4", children: [
@@ -5429,14 +5428,14 @@ const Mt = () => {
       {
         endpoints: m,
         initialData: h,
-        className: w,
-        onCollectionChange: ($) => {
-          s && s(t.key, $);
+        className: y,
+        onCollectionChange: (T) => {
+          s && s(t.key, T);
         },
         showSearch: u,
         allowAdd: p,
-        allowEdit: b,
-        allowDelete: f,
+        allowEdit: g,
+        allowDelete: b,
         allowReorder: r
       }
     )
@@ -5464,176 +5463,176 @@ function Ss({
   onCancel: i,
   onSave: l
 }) {
-  const [m, o] = re.useState(a), [u, p] = re.useState(null), [b, f] = L(!1), [r, w] = L(!1), [d, h] = L({}), z = `${Se()}/unifyedxappmodulemanagement/api/v1/appmanager/${t}/configuration`, $ = z, [A, E] = L(1), I = (x) => {
+  const [m, o] = se.useState(a), [u, p] = se.useState(null), [g, b] = M(!1), [r, y] = M(!1), [d, h] = M({}), $ = `${Se()}/unifyedxappmodulemanagement/api/v1/appmanager/${t}/configuration`, T = $, [F, A] = M(1), I = (w) => {
     if (!a || !a.configuration)
-      return x;
-    const C = {}, N = x?.configuration || {};
-    return a.configuration.forEach((y) => {
-      if (y.key && y.type === "datatable") {
-        const F = (N[y.key] || []).map((M, U) => {
-          const S = { id: M.id || 0 };
-          return y.fields && y.fields.forEach((O) => {
+      return w;
+    const C = {}, N = w?.configuration || {};
+    return a.configuration.forEach((x) => {
+      if (x.key && x.type === "datatable") {
+        const E = (N[x.key] || []).map((L, q) => {
+          const S = { id: L.id || 0 };
+          return x.fields && x.fields.forEach((O) => {
             if (O.fieldtype === "audience") {
               let D = { users: [], groups: [], roles: [] };
-              M[O.key] && (Array.isArray(M[O.key]) ? D = { users: [], groups: [], roles: [] } : typeof M[O.key] == "object" && (D = {
-                users: M[O.key].users || [],
-                groups: M[O.key].groups || [],
-                roles: M[O.key].roles || []
+              L[O.key] && (Array.isArray(L[O.key]) ? D = { users: [], groups: [], roles: [] } : typeof L[O.key] == "object" && (D = {
+                users: L[O.key].users || [],
+                groups: L[O.key].groups || [],
+                roles: L[O.key].roles || []
               })), S[O.key] = D;
             } else
-              S[O.key] = M[O.key] || O.default || "";
+              S[O.key] = L[O.key] || O.default || "";
           }), S;
         });
-        if (F.length === 0) {
-          const M = { id: 0 };
-          y.fields && y.fields.forEach((U) => {
-            U.fieldtype === "audience" ? M[U.key] = { users: [], groups: [], roles: [] } : M[U.key] = U.default || "";
-          }), F.push(M);
+        if (E.length === 0) {
+          const L = { id: 0 };
+          x.fields && x.fields.forEach((q) => {
+            q.fieldtype === "audience" ? L[q.key] = { users: [], groups: [], roles: [] } : L[q.key] = q.default || "";
+          }), E.push(L);
         }
-        C[y.key] = F;
-      } else y.key && (C[y.key] = N[y.key] || {});
+        C[x.key] = E;
+      } else x.key && (C[x.key] = N[x.key] || {});
     }), C;
-  }, j = () => {
+  }, V = () => {
     if (a && a.configuration) {
-      const x = {};
+      const w = {};
       a.configuration.forEach((C) => {
         if (C.key)
           if (C.type === "datatable") {
             const N = { id: 0 };
-            C.fields && C.fields.forEach((y) => {
-              y.fieldtype === "audience" ? N[y.key] = { users: [], groups: [], roles: [] } : N[y.key] = y.default || "";
-            }), x[C.key] = [N];
+            C.fields && C.fields.forEach((x) => {
+              x.fieldtype === "audience" ? N[x.key] = { users: [], groups: [], roles: [] } : N[x.key] = x.default || "";
+            }), w[C.key] = [N];
           } else if (C.type === "section") {
             const N = {};
-            C.fields && Array.isArray(C.fields) && C.fields.forEach((y) => {
-              y.key && (N[y.key] = y.default || "");
-            }), x[C.key] = N;
+            C.fields && Array.isArray(C.fields) && C.fields.forEach((x) => {
+              x.key && (N[x.key] = x.default || "");
+            }), w[C.key] = N;
           } else
-            x[C.key] = {};
-      }), p(x);
+            w[C.key] = {};
+      }), p(w);
     }
   };
   Z(() => {
     if (s) {
-      f(!1);
+      b(!1);
       return;
     }
-    const x = async () => {
+    const w = async () => {
       try {
-        f(!0);
-        let C = await Ve(z);
+        b(!0);
+        let C = await Ve($);
         if (C) {
           const N = I(C);
           p(N);
         } else
-          j();
+          V();
       } catch (C) {
         console.error("Error fetching configuration:", C);
         let N = "Failed to load configuration";
         if (C.response) {
-          const y = C.response.status, k = C.response.data?.message || C.response.data?.error;
-          y === 400 ? N = k || "Invalid request. Please check the application ID." : y === 401 ? N = "You are not authorized to access this configuration." : y === 403 ? N = "Access denied. You don't have permission to view this configuration." : y === 404 ? N = "Configuration not found. It may not exist yet or the application ID is incorrect." : y >= 500 ? N = k || "Server error. Please try again later." : N = k || `Failed to load configuration (Error ${y})`;
+          const x = C.response.status, k = C.response.data?.message || C.response.data?.error;
+          x === 400 ? N = k || "Invalid request. Please check the application ID." : x === 401 ? N = "You are not authorized to access this configuration." : x === 403 ? N = "Access denied. You don't have permission to view this configuration." : x === 404 ? N = "Configuration not found. It may not exist yet or the application ID is incorrect." : x >= 500 ? N = k || "Server error. Please try again later." : N = k || `Failed to load configuration (Error ${x})`;
         } else C.request ? N = "Network error. Please check your connection and try again." : N = C.message || "An unexpected error occurred while loading configuration.";
-        De.error(N), j();
+        De.error(N), V();
       } finally {
-        f(!1);
+        b(!1);
       }
     };
-    a && (o(a), t ? x() : j());
-  }, [a, A, t, s]);
-  const V = (x, C) => {
+    a && (o(a), t ? w() : V());
+  }, [a, F, t, s]);
+  const U = (w, C) => {
     p((N) => ({
       ...N,
-      [x]: C
+      [w]: C
     })), h((N) => {
-      const y = { ...N };
-      return y[x] && delete y[x], y;
+      const x = { ...N };
+      return x[w] && delete x[w], x;
     });
   }, G = () => {
-    const x = {};
+    const w = {};
     return !m || !u || m.configuration.forEach((C) => {
       if (C.type === "section")
         C.fields.forEach((N) => {
           if (N.required) {
-            const y = u[C.key]?.[N.key];
-            (!y || typeof y == "string" && y.trim() === "") && (x[C.key] || (x[C.key] = {}), x[C.key][N.key] = `${N.label} is required`);
+            const x = u[C.key]?.[N.key];
+            (!x || typeof x == "string" && x.trim() === "") && (w[C.key] || (w[C.key] = {}), w[C.key][N.key] = `${N.label} is required`);
           }
         });
       else if (C.type === "datatable") {
         const N = u[C.key];
-        Array.isArray(N) && N.forEach((y, k) => {
-          C.fields.forEach((F) => {
-            if (F.required) {
-              const M = y[F.key];
-              (!M || typeof M == "string" && M.trim() === "") && (x[C.key] || (x[C.key] = {}), x[C.key][k] || (x[C.key][k] = {}), x[C.key][k][F.key] = `${F.label} is required`);
+        Array.isArray(N) && N.forEach((x, k) => {
+          C.fields.forEach((E) => {
+            if (E.required) {
+              const L = x[E.key];
+              (!L || typeof L == "string" && L.trim() === "") && (w[C.key] || (w[C.key] = {}), w[C.key][k] || (w[C.key][k] = {}), w[C.key][k][E.key] = `${E.label} is required`);
             }
           });
         });
       }
-    }), x;
-  }, q = (x) => Object.keys(x).length > 0, T = () => {
-    const x = G();
-    if (h(x), q(x)) {
+    }), w;
+  }, B = (w) => Object.keys(w).length > 0, z = () => {
+    const w = G();
+    if (h(w), B(w)) {
       let N = [];
-      Object.keys(x).forEach((y) => {
-        typeof x[y] == "object" && Object.keys(x[y]).forEach((k) => {
-          typeof x[y][k] == "object" ? Object.keys(x[y][k]).forEach((F) => {
-            N.push(`${y} row ${parseInt(k) + 1}: ${x[y][k][F]}`);
-          }) : N.push(`${y}: ${x[y][k]}`);
+      Object.keys(w).forEach((x) => {
+        typeof w[x] == "object" && Object.keys(w[x]).forEach((k) => {
+          typeof w[x][k] == "object" ? Object.keys(w[x][k]).forEach((E) => {
+            N.push(`${x} row ${parseInt(k) + 1}: ${w[x][k][E]}`);
+          }) : N.push(`${x}: ${w[x][k]}`);
         });
       });
       return;
     }
     (async () => {
       try {
-        w(!0);
+        y(!0);
         const N = {};
         u && Object.keys(u).forEach((k) => {
-          const F = a?.configuration?.find(
-            (M) => M.key === k && M.type === "datatable"
+          const E = a?.configuration?.find(
+            (L) => L.key === k && L.type === "datatable"
           );
-          F && Array.isArray(u[k]) ? N[k] = u[k].map((M) => {
-            const U = { id: M.id || 0 };
-            return F.fields && F.fields.forEach((S) => {
+          E && Array.isArray(u[k]) ? N[k] = u[k].map((L) => {
+            const q = { id: L.id || 0 };
+            return E.fields && E.fields.forEach((S) => {
               if (S.fieldtype === "audience") {
                 let O = { users: [], groups: [], roles: [] };
-                M[S.key] && typeof M[S.key] == "object" && !Array.isArray(M[S.key]) && (O = {
-                  users: M[S.key].users || [],
-                  groups: M[S.key].groups || [],
-                  roles: M[S.key].roles || []
-                }), U[S.key] = O;
+                L[S.key] && typeof L[S.key] == "object" && !Array.isArray(L[S.key]) && (O = {
+                  users: L[S.key].users || [],
+                  groups: L[S.key].groups || [],
+                  roles: L[S.key].roles || []
+                }), q[S.key] = O;
               } else
-                U[S.key] = M[S.key] || "";
-            }), U;
+                q[S.key] = L[S.key] || "";
+            }), q;
           }) : N[k] = u[k];
         });
-        let y = await _e($, N);
-        if (console.log(), y && y.status != "fail") {
+        let x = await _e(T, N);
+        if (console.log(), x && x.status != "fail") {
           h({});
-          const k = y.message || "Configuration has been saved successfully";
+          const k = x.message || "Configuration has been saved successfully";
           De.success(k), l && typeof l == "function" && l(u);
         } else
-          throw De.error(y?.message || "Failed to save configuration"), new Error("No response received from server");
+          throw De.error(x?.message || "Failed to save configuration"), new Error("No response received from server");
       } catch (N) {
         console.error("Error saving configuration:", N), De.error(N?.message || "Failed to save configuration");
       } finally {
-        w(!1);
+        y(!1);
       }
     })();
-  }, v = () => {
+  }, f = () => {
     if (i) {
       i();
       return;
     }
     d && Object.keys(d).length > 0 && !window.confirm(
       "You have validation errors that will be lost. Are you sure you want to cancel?"
-    ) || (h({}), p(null), E((C) => C + 1), De.info("Configuration changes cancelled"));
+    ) || (h({}), p(null), A((C) => C + 1), De.info("Configuration changes cancelled"));
   };
   if (!m?.configuration && !a?.configuration)
     return /* @__PURE__ */ e("div", { className: "min-h-screen flex items-center justify-center", children: /* @__PURE__ */ e("div", { className: "text-gray-500", children: "No configuration available" }) });
-  const g = a?.configuration || m?.configuration;
+  const v = a?.configuration || m?.configuration;
   return Z(() => {
-    s && a ? (!u || Object.keys(u).length === 0) && j() : s && !a && j();
+    s && a ? (!u || Object.keys(u).length === 0) && V() : s && !a && V();
   }, [s, a]), /* @__PURE__ */ n("div", { children: [
     /* @__PURE__ */ n(
       "div",
@@ -5641,16 +5640,16 @@ function Ss({
         className: "dynamic-config bg-white w-full h-[calc(100vh-350px)] overflow-y-auto",
         style: { padding: "0px 20px 0px 0px" },
         children: [
-          b && /* @__PURE__ */ e("div", { className: "flex justify-center items-center h-64", children: /* @__PURE__ */ e(xa, { size: "large" }) }),
-          !b && g?.map((x, C) => {
-            const N = zs(x.type);
+          g && /* @__PURE__ */ e("div", { className: "flex justify-center items-center h-64", children: /* @__PURE__ */ e(xa, { size: "large" }) }),
+          !g && v?.map((w, C) => {
+            const N = zs(w.type);
             if (N && N !== "UnknownType")
               return /* @__PURE__ */ e(
                 N,
                 {
-                  item: x,
+                  item: w,
                   data: u,
-                  updateHandler: V,
+                  updateHandler: U,
                   validationErrors: d
                 },
                 C
@@ -5664,7 +5663,7 @@ function Ss({
         ee,
         {
           category: "secondary",
-          onClick: v,
+          onClick: f,
           label: "Cancel",
           disabled: r
         }
@@ -5673,7 +5672,7 @@ function Ss({
         ee,
         {
           category: "primary",
-          onClick: T,
+          onClick: z,
           disabled: r,
           label: r ? "Saving..." : "Apply",
           type: "submit"
@@ -5687,32 +5686,32 @@ const Ql = ({
   appid: a = "Configuration-Page",
   disableApi: s = !1
 }) => {
-  const [i, l] = L(0), [m, o] = L(!1), [u, p] = L(a), {
-    pageHeader: b = {},
-    appletHeader: f = {},
-    breadcrumb: r = [],
-    overview: w = {},
-    configuration: d = []
-  } = t, h = d.map((g) => {
-    if (g.type === "section" && g.fields) {
-      const x = [...g.fields], C = x.findIndex((N) => N.key === "appkey");
-      if (C !== -1) {
-        const N = x[C];
-        if (x[C] = {
-          ...N,
+  const [i, l] = M(0), [m, o] = M(!1), {
+    pageHeader: u = {},
+    appletHeader: p = {},
+    breadcrumb: g = [],
+    overview: b = {},
+    configuration: r = []
+  } = t, y = r.map((B) => {
+    if (B.type === "section" && B.fields) {
+      const z = [...B.fields], f = z.findIndex((v) => v.key === "appkey");
+      if (f !== -1) {
+        const v = z[f];
+        if (z[f] = {
+          ...v,
           default: a,
           value: a,
           disabled: !0,
           placeholder: a
-        }, x.some((k) => k.key === "displayname")) {
-          const k = x.findIndex((F) => F.key === "displayname");
-          x[k] = {
-            ...x[k],
-            default: a,
-            value: a
+        }, z.some((C) => C.key === "displayname")) {
+          const C = z.findIndex((x) => x.key === "displayname"), N = z[C] || {};
+          z[C] = {
+            ...N,
+            default: N.default || N.value || a,
+            placeholder: N.placeholder || "Enter display name"
           };
         } else {
-          const k = {
+          const C = {
             key: "displayname",
             label: "Display Name",
             fieldtype: "text",
@@ -5721,52 +5720,44 @@ const Ql = ({
             placeholder: "Enter display name",
             required: !1
           };
-          x.splice(C + 1, 0, k);
+          z.splice(f + 1, 0, C);
         }
       }
       return {
-        ...g,
-        fields: x
+        ...B,
+        fields: z
       };
     }
-    return g;
-  }), z = {
+    return B;
+  }), d = {
     heading: "App Details",
     subHeading: "View app details and customize configurations to align with institutional requirements.",
     isLeftArrow: !0,
     onBackClick: () => window.history.back(),
-    ...b
-  }, $ = r.map((g) => ({
-    label: g.text,
-    href: g.href || "#"
-  })), A = ae(() => {
+    ...u
+  }, h = g.map((B) => ({
+    label: B.text,
+    href: B.href || "#"
+  })), $ = ne(() => {
     console.log("handleCancelRequest called - showing modal"), o(!0);
-  }, []), E = ae((g) => {
-    o(!1), g.primary ? (console.log("User confirmed cancel - navigating back"), window.history.back()) : console.log("User cancelled the cancel action - modal closed, data preserved");
-  }, []), I = () => {
-    for (const g of h)
-      if (g.type === "section" && g.fields) {
-        const x = g.fields.find((C) => C.key === "displayname");
-        if (x)
-          return x.default || x.value || a;
-      }
-    return a;
-  };
-  re.useEffect(() => {
-    p(I());
-  }, [h]);
-  const j = ae((g) => {
-    console.log("Config saved with data:", g), Object.keys(g).forEach((x) => {
-      const C = g[x];
-      console.log(`Checking section ${x}:`, C), C && C.displayname && (console.log("Found displayname:", C.displayname), p(C.displayname));
-    });
-  }, []), V = {
+  }, []), T = ne((B) => {
+    o(!1), B.primary ? (console.log("User confirmed cancel - navigating back"), window.history.back()) : console.log("User cancelled the cancel action - modal closed, data preserved");
+  }, []), F = (() => {
+    if (Array.isArray(r)) {
+      for (const B of r)
+        if (B && B.fields) {
+          const z = B.fields.find((f) => f && f.key === "displayname");
+          if (z) return z.default ?? z.value ?? a;
+        }
+    }
+    return p.heading || a;
+  })(), A = {
     subHeading: "Application configuration and details",
     tags: [],
-    ...f,
-    heading: u
-    // Ensure displayname always overrides config heading
-  }, G = {
+    ...p,
+    heading: F
+    // Use resolvedDisplayName only
+  }, I = {
     about: "This application provides comprehensive functionality for your organization.",
     images: {
       desktop: "https://via.placeholder.com/600x400?text=Desktop+View",
@@ -5783,25 +5774,25 @@ const Ql = ({
         description: "Description of feature 2"
       }
     ],
-    ...w
-  }, q = [
-    { label: "Overview", content: v(G) },
-    { label: "Configuration", content: /* @__PURE__ */ e(Ss, { appid: a, configdata: { configuration: h }, disableApi: s, onCancel: A, onSave: j }) }
+    ...b
+  }, V = [
+    { label: "Overview", content: G(I) },
+    { label: "Configuration", content: /* @__PURE__ */ e(Ss, { appid: a, configdata: { configuration: y }, disableApi: s, onCancel: $, onSave: handleConfigChange }) }
   ];
-  function T(g) {
-    return g ? g.includes("<svg") ? /* @__PURE__ */ e("div", { dangerouslySetInnerHTML: { __html: g } }) : g : "📱";
+  function U(B) {
+    return B ? B.includes("<svg") ? /* @__PURE__ */ e("div", { dangerouslySetInnerHTML: { __html: B } }) : B : "📱";
   }
-  function v(g) {
+  function G(B) {
     return /* @__PURE__ */ n("div", { className: "bg-white rounded-2xl p-1", children: [
       /* @__PURE__ */ n("section", { className: "mb-8", children: [
         /* @__PURE__ */ e("h2", { className: "text-xl font-semibold mb-2", children: "About" }),
-        /* @__PURE__ */ e("p", { className: "text-gray-700 text-base", children: g.about })
+        /* @__PURE__ */ e("p", { className: "text-gray-700 text-base", children: B.about })
       ] }),
       /* @__PURE__ */ n("section", { className: "flex flex-row gap-6 justify-center items-center mb-8", children: [
         /* @__PURE__ */ e(
           "img",
           {
-            src: g.images.desktop,
+            src: B.images.desktop,
             alt: "Desktop View",
             className: "rounded-xl border border-gray-200 w-[340px] h-[220px] object-cover"
           }
@@ -5809,7 +5800,7 @@ const Ql = ({
         /* @__PURE__ */ e(
           "img",
           {
-            src: g.images.mobile1,
+            src: B.images.mobile1,
             alt: "Mobile View 1",
             className: "rounded-2xl border border-gray-200 w-[120px] h-[220px] object-cover"
           }
@@ -5817,7 +5808,7 @@ const Ql = ({
         /* @__PURE__ */ e(
           "img",
           {
-            src: g.images.mobile2,
+            src: B.images.mobile2,
             alt: "Mobile View 2",
             className: "rounded-2xl border border-gray-200 w-[120px] h-[220px] object-cover"
           }
@@ -5825,11 +5816,11 @@ const Ql = ({
       ] }),
       /* @__PURE__ */ n("section", { children: [
         /* @__PURE__ */ e("h3", { className: "text-lg font-semibold mb-4", children: "Key Features" }),
-        /* @__PURE__ */ e("ul", { className: "space-y-3", children: g.features.map((x, C) => /* @__PURE__ */ n("li", { children: [
-          /* @__PURE__ */ e("span", { className: "font-semibold", children: x.title }),
+        /* @__PURE__ */ e("ul", { className: "space-y-3", children: B.features.map((z, f) => /* @__PURE__ */ n("li", { children: [
+          /* @__PURE__ */ e("span", { className: "font-semibold", children: z.title }),
           /* @__PURE__ */ e("br", {}),
-          /* @__PURE__ */ e("span", { className: "text-gray-700", children: x.description })
-        ] }, C)) })
+          /* @__PURE__ */ e("span", { className: "text-gray-700", children: z.description })
+        ] }, f)) })
       ] })
     ] });
   }
@@ -5837,45 +5828,45 @@ const Ql = ({
     /* @__PURE__ */ e(
       Vn,
       {
-        heading: z.heading,
-        subHeading: $.length > 0 ? void 0 : z.subHeading,
-        breadcrumbItems: $,
-        isLeftArrow: z.isLeftArrow,
-        onBackClick: z.onBackClick
+        heading: d.heading,
+        subHeading: h.length > 0 ? void 0 : d.subHeading,
+        breadcrumbItems: h,
+        isLeftArrow: d.isLeftArrow,
+        onBackClick: d.onBackClick
       }
     ),
     /* @__PURE__ */ n("div", { className: "bg-[#ffffff] border border-[#eef2f6] rounded-[12px] px-6 py-5 flex gap-4 items-start mb-4 shadow-sm", children: [
-      /* @__PURE__ */ e("div", { className: "icon w-[72px] h-[72px] rounded-full flex items-center justify-center bg-[#F5F5F6] text-[#1C274C] font-bold text-[18px]", children: T(V.icon) }),
+      /* @__PURE__ */ e("div", { className: "icon w-[72px] h-[72px] rounded-full flex items-center justify-center bg-[#F5F5F6] text-[#1C274C] font-bold text-[18px]", children: U(A.icon) }),
       /* @__PURE__ */ n("div", { className: "flex flex-col min-w-0", children: [
-        /* @__PURE__ */ e("h2", { className: "text-[24px] font-semibold m-0 leading-tight truncate", children: V.heading }),
-        /* @__PURE__ */ e("p", { className: "text-[13px] text-[#101112] mt-1 mb-0 max-w-[800px] leading-normal", children: V.subHeading }),
-        /* @__PURE__ */ e("div", { className: "mt-2 flex flex-wrap gap-2", children: V.tags && V.tags.map((g, x) => /* @__PURE__ */ e(
+        /* @__PURE__ */ e("h2", { className: "text-[24px] font-semibold m-0 leading-tight truncate", children: A.heading }),
+        /* @__PURE__ */ e("p", { className: "text-[13px] text-[#101112] mt-1 mb-0 max-w-[800px] leading-normal", children: A.subHeading }),
+        /* @__PURE__ */ e("div", { className: "mt-2 flex flex-wrap gap-2", children: A.tags && A.tags.map((B, z) => /* @__PURE__ */ e(
           "span",
           {
             className: "pill inline-block px-[10px] py-[6px] rounded-[14px] text-[11px] border border-[#e6e9ee] text-[#767676] font-semibold mt-1",
-            children: g
+            children: B
           },
-          x
+          z
         )) })
       ] })
     ] }),
     /* @__PURE__ */ n("div", { className: "bg-white border border-gray-300 rounded-2xl w-full mt-5 ", children: [
-      /* @__PURE__ */ e("div", { className: "border-b border-gray-200", children: /* @__PURE__ */ e("nav", { className: "flex space-x-8", "aria-label": "Tabs", children: q.map((g, x) => /* @__PURE__ */ e(
+      /* @__PURE__ */ e("div", { className: "border-b border-gray-200", children: /* @__PURE__ */ e("nav", { className: "flex space-x-8", "aria-label": "Tabs", children: V.map((B, z) => /* @__PURE__ */ e(
         "button",
         {
-          onClick: () => l(x),
-          className: `${i === x ? "border-black text-black" : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"} whitespace-nowrap py-3 px-6 border-b-2 font-medium text-sm transition-colors duration-200`,
-          children: g.label
+          onClick: () => l(z),
+          className: `${i === z ? "border-black text-black" : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"} whitespace-nowrap py-3 px-6 border-b-2 font-medium text-sm transition-colors duration-200`,
+          children: B.label
         },
-        x
+        z
       )) }) }),
-      /* @__PURE__ */ e("div", { className: "p-8 h-full overflow-y-auto", children: q[i].content })
+      /* @__PURE__ */ e("div", { className: "p-8 h-full overflow-y-auto", children: V[i].content })
     ] }),
     /* @__PURE__ */ e(
       Pn,
       {
         isOpen: m,
-        onClose: E,
+        onClose: T,
         variant: "warning",
         title: "Are you sure you want to cancel?",
         primaryButtonText: "Proceed",
@@ -5924,66 +5915,66 @@ const Kl = ({
   addBtnText: u = "Add",
   // Feature toggles
   showSearch: p = !0,
-  showColumnChooser: b = !0,
-  showFilter: f = !1,
+  showColumnChooser: g = !0,
+  showFilter: b = !1,
   showPrint: r = !1,
-  showExcel: w = !1,
+  showExcel: y = !1,
   showPdf: d = !1,
   showRefresh: h = !1,
-  showAdd: z = !1,
+  showAdd: $ = !1,
   // Additional props
-  searchPlaceholder: $ = "Search...",
-  handleRefreshClick: A = () => {
+  searchPlaceholder: T = "Search...",
+  handleRefreshClick: F = () => {
   },
-  handleSearchChange: E = () => {
+  handleSearchChange: A = () => {
   },
   // Optional: override export file names
   excelFileName: I,
-  pdfFileName: j
+  pdfFileName: V
 }) => {
-  const V = () => l?.current || i?.current, [G, q] = re.useState(""), T = (t || "export").toString().trim() || "export", v = `${I || T}.xlsx`, g = `${j || T}.pdf`, x = (y, k, F) => Math.max(k, Math.min(y, F)), C = ae(
-    (y) => {
-      const k = V();
+  const U = () => l?.current || i?.current, [G, B] = se.useState(""), z = (t || "export").toString().trim() || "export", f = `${I || z}.xlsx`, v = `${V || z}.pdf`, w = (x, k, E) => Math.max(k, Math.min(x, E)), C = ne(
+    (x) => {
+      const k = U();
       if (console.log("openColumnChooserNear", k), !!k?.openColumnChooser) {
-        if (typeof window > "u" || !y?.currentTarget) {
+        if (typeof window > "u" || !x?.currentTarget) {
           k.openColumnChooser();
           return;
         }
         try {
-          const F = y.currentTarget.getBoundingClientRect(), M = F.left + window.scrollX, U = F.bottom + window.scrollY;
-          let S = M - 120, O = U - 120;
+          const E = x.currentTarget.getBoundingClientRect(), L = E.left + window.scrollX, q = E.bottom + window.scrollY;
+          let S = L - 120, O = q - 120;
           const D = window.innerWidth, P = window.innerHeight;
-          S = x(S, window.scrollX + 8, window.scrollX + D - 340), O = x(O, window.scrollY, window.scrollY + P - 120), console.log("openColumnChooserNear", S, O), k.openColumnChooser(S, O);
-        } catch (F) {
-          console.log("coloumn choose error", F);
+          S = w(S, window.scrollX + 8, window.scrollX + D - 340), O = w(O, window.scrollY, window.scrollY + P - 120), console.log("openColumnChooserNear", S, O), k.openColumnChooser(S, O);
+        } catch (E) {
+          console.log("coloumn choose error", E);
         }
       }
     },
     []
     // no external deps; reads ref at call time
-  ), N = ae(
-    (y, k) => {
-      const F = V();
-      if (F)
-        switch (y) {
+  ), N = ne(
+    (x, k) => {
+      const E = U();
+      if (E)
+        switch (x) {
           case "ColumnChooser":
-            b && (console.log("openColumnChooser", k), k ? C(k) : F.openColumnChooser?.()), console.log("openColumnChooser out", k);
+            g && (console.log("openColumnChooser", k), k ? C(k) : E.openColumnChooser?.()), console.log("openColumnChooser out", k);
             break;
           case "Print":
-            r && F.print?.();
+            r && E.print?.();
             break;
           case "Excel":
-            w && F.excelExport?.({ fileName: v });
+            y && E.excelExport?.({ fileName: f });
             break;
           case "Pdf":
-            d && F.pdfExport?.({ fileName: g });
+            d && E.pdfExport?.({ fileName: v });
             break;
           case "Refresh":
-            h && A();
+            h && F();
             break;
         }
     },
-    [b, r, w, d, h, v, g, A, C]
+    [g, r, y, d, h, f, v, F, C]
   );
   return /* @__PURE__ */ n("div", { className: "flex items-center flex-wrap justify-between w-full px-4 py-2 bg-white border border-gray-200 rounded-t-2xl mb-0", children: [
     /* @__PURE__ */ n("div", { className: "flex flex-col", children: [
@@ -5998,27 +5989,27 @@ const Kl = ({
       p && /* @__PURE__ */ e("div", { className: "relative", children: /* @__PURE__ */ e(
         be,
         {
-          placeholder: $,
+          placeholder: T,
           value: G,
-          onDebouncedChange: (y) => {
-            q(y), E(y);
+          onDebouncedChange: (x) => {
+            B(x), A(x);
           }
         }
       ) }),
       /* @__PURE__ */ n("div", { className: "flex gap-3", children: [
         /* @__PURE__ */ n("div", { className: "flex items-center gap-1.5", children: [
-          b && /* @__PURE__ */ e(
+          g && /* @__PURE__ */ e(
             ee,
             {
               icon: Nr,
-              onClick: (y) => N("ColumnChooser", y),
+              onClick: (x) => N("ColumnChooser", x),
               size: "small",
               ariaLabel: "Column Chooser",
               category: "secondary",
               title: "Choose Columns"
             }
           ),
-          f && /* @__PURE__ */ e(
+          b && /* @__PURE__ */ e(
             ee,
             {
               icon: kr,
@@ -6040,7 +6031,7 @@ const Kl = ({
               title: "Print Grid"
             }
           ),
-          w && /* @__PURE__ */ e(
+          y && /* @__PURE__ */ e(
             ee,
             {
               icon: zr,
@@ -6048,7 +6039,7 @@ const Kl = ({
               ariaLabel: "Excel Download",
               size: "small",
               category: "secondary",
-              title: `Export Excel (${v})`
+              title: `Export Excel (${f})`
             }
           ),
           d && /* @__PURE__ */ e(
@@ -6059,7 +6050,7 @@ const Kl = ({
               ariaLabel: "PDF Download",
               size: "small",
               category: "secondary",
-              title: `Export PDF (${g})`
+              title: `Export PDF (${v})`
             }
           ),
           h && /* @__PURE__ */ e(
@@ -6074,7 +6065,7 @@ const Kl = ({
             }
           )
         ] }),
-        z && m && /* @__PURE__ */ e(
+        $ && m && /* @__PURE__ */ e(
           ee,
           {
             label: u,
@@ -6101,68 +6092,68 @@ function ei(t) {
     allowSorting: o = !0,
     allowFiltering: u = !1,
     allowGrouping: p = !1,
-    allowReordering: b = !0,
-    allowResizing: f = !0,
+    allowReordering: g = !0,
+    allowResizing: b = !0,
     allowExcelExport: r = !1,
-    allowPdfExport: w = !1,
+    allowPdfExport: y = !1,
     showColumnChooser: d = !1,
     enableSearchApi: h = !1,
-    height: z = "600",
-    selectionSettings: $ = { type: "Multiple", mode: "Row" },
-    enableCheckbox: A = !1,
-    columns: E = [],
+    height: $ = "600",
+    selectionSettings: T = { type: "Multiple", mode: "Row" },
+    enableCheckbox: F = !1,
+    columns: A = [],
     onGridStateChange: I,
-    onRowSelected: j,
-    onRowDeselected: V,
+    onRowSelected: V,
+    onRowDeselected: U,
     onRowDoubleClick: G,
-    apiRef: q,
-    gridProps: T = {}
-  } = t, v = xe(null), {
-    pageSettings: g,
-    sortSettings: x,
+    apiRef: B,
+    gridProps: z = {}
+  } = t, f = xe(null), {
+    pageSettings: v,
+    sortSettings: w,
     ...C
-  } = T || {}, [N, y] = re.useState(g?.page || 1), [k, F] = re.useState(x?.pageSize || 20), [M, U] = re.useState(x?.sortKey || "updatedDate"), [S, O] = re.useState(x?.direction || "Descending"), D = ue(() => {
-    const B = [cn];
-    return o && B.push(dn), u && B.push(mn), p && B.push(un), h && B.push(hn), r && B.push(pn), w && B.push(gn), d && B.push(bn), f && B.push(fn), b && B.push(xn), B.push(yn), B;
-  }, [o, u, p, h, r, w, d, f, b]), P = ue(() => {
-    const B = () => v.current, ne = (J, we) => {
+  } = z || {}, [N, x] = se.useState(v?.page || 1), [k, E] = se.useState(w?.pageSize || 20), [L, q] = se.useState(w?.sortKey || "updatedDate"), [S, O] = se.useState(w?.direction || "Descending"), D = ue(() => {
+    const j = [cn];
+    return o && j.push(dn), u && j.push(mn), p && j.push(un), h && j.push(hn), r && j.push(pn), y && j.push(gn), d && j.push(bn), b && j.push(fn), g && j.push(xn), j.push(yn), j;
+  }, [o, u, p, h, r, y, d, b, g]), P = ue(() => {
+    const j = () => f.current, ae = (J, we) => {
       !we && process.env.NODE_ENV !== "production" && console.warn(`[CustomDataGrid] ${J} requested but related service/feature is disabled.`);
     };
     return {
-      getInstance: () => B(),
-      refresh: () => B()?.refresh?.(),
-      getSelectedRecords: () => B()?.getSelectedRecords?.() ?? [],
-      clearSelection: () => B()?.clearSelection?.(),
-      selectRow: (J) => B()?.selectRow?.(J),
-      selectRows: (J) => B()?.selectRows?.(J),
+      getInstance: () => j(),
+      refresh: () => j()?.refresh?.(),
+      getSelectedRecords: () => j()?.getSelectedRecords?.() ?? [],
+      clearSelection: () => j()?.clearSelection?.(),
+      selectRow: (J) => j()?.selectRow?.(J),
+      selectRows: (J) => j()?.selectRows?.(J),
       search: (J) => {
-        ne("search()", h), B()?.search?.(J);
+        ae("search()", h), j()?.search?.(J);
       },
-      print: () => B()?.print?.(),
+      print: () => j()?.print?.(),
       excelExport: (J) => {
-        ne("excelExport()", r), B()?.excelExport?.(J);
+        ae("excelExport()", r), j()?.excelExport?.(J);
       },
       pdfExport: (J) => {
-        ne("pdfExport()", w), B()?.pdfExport?.(J);
+        ae("pdfExport()", y), j()?.pdfExport?.(J);
       },
       openColumnChooser: (J, we) => {
-        ne("openColumnChooser()", d), B()?.columnChooserModule?.openColumnChooser?.(J, we);
+        ae("openColumnChooser()", d), j()?.columnChooserModule?.openColumnChooser?.(J, we);
       }
     };
   }, []);
   Z(() => {
-    q && (q.current = P);
-  }, [q, P]), Z(() => () => {
-    q && (q.current = null);
+    B && (B.current = P);
+  }, [B, P]), Z(() => () => {
+    B && (B.current = null);
   }, []);
-  const _ = (B) => {
-    const ne = String(B || "");
-    return ne === "Ascending" || ne === "Descending" ? ne : ne.toLowerCase() === "ascending" ? "Ascending" : "Descending";
-  }, R = (B) => {
-    const ne = v.current, J = B?.requestType, we = J === "paging" ? "paging" : J === "sorting" ? "sorting" : J === "searching" ? "searching" : J === "filtering" ? "filtering" : J === "grouping" ? "grouping" : J === "reorder" ? "reorder" : J === "columnstate" ? "columnstate" : "other", Ie = B?.pageSize ?? ne?.pageSettings?.pageSize ?? k, Ue = B?.currentPage ?? ne?.pageSettings?.currentPage ?? l, st = B?.columnName && B?.direction ? [{ field: B.columnName, dir: _(B.direction) }] : (ne?.sortSettings?.columns || []).map((Oe) => ({
+  const _ = (j) => {
+    const ae = String(j || "");
+    return ae === "Ascending" || ae === "Descending" ? ae : ae.toLowerCase() === "ascending" ? "Ascending" : "Descending";
+  }, R = (j) => {
+    const ae = f.current, J = j?.requestType, we = J === "paging" ? "paging" : J === "sorting" ? "sorting" : J === "searching" ? "searching" : J === "filtering" ? "filtering" : J === "grouping" ? "grouping" : J === "reorder" ? "reorder" : J === "columnstate" ? "columnstate" : "other", Ie = j?.pageSize ?? ae?.pageSettings?.pageSize ?? k, Ue = j?.currentPage ?? ae?.pageSettings?.currentPage ?? l, st = j?.columnName && j?.direction ? [{ field: j.columnName, dir: _(j.direction) }] : (ae?.sortSettings?.columns || []).map((Oe) => ({
       field: Oe.field,
       dir: _(Oe.direction ?? Oe.dir)
-    })), lt = B?.searchString ?? "", it = B?.columns ?? ne?.filterSettings?.columns ?? [];
+    })), lt = j?.searchString ?? "", it = j?.columns ?? ae?.filterSettings?.columns ?? [];
     return {
       reason: we,
       page: { index: Ue, size: Ie, skip: (Ue - 1) * Ie, take: Ie },
@@ -6170,17 +6161,17 @@ function ei(t) {
       // [{ field, dir: 'Ascending'|'Descending' }]
       search: lt,
       filters: it,
-      rawEvent: B
+      rawEvent: j
     };
-  }, Y = (B) => {
+  }, Y = (j) => {
     setTimeout(() => {
-      v?.current?.hideSpinner();
-    }, 1e3), B.requestType === "paging" && (y(B.currentPage), F(B.pageSize)), B.requestType === "sorting" && (U(B.columnName || "updatedDate"), O(B.direction === "Ascending" ? "ASC" : "DESC")), I && I(R(B), B);
-  }, W = (B) => {
-    typeof G == "function" && G(B?.rowData, B);
+      f?.current?.hideSpinner();
+    }, 1e3), j.requestType === "paging" && (x(j.currentPage), E(j.pageSize)), j.requestType === "sorting" && (q(j.columnName || "updatedDate"), O(j.direction === "Ascending" ? "ASC" : "DESC")), I && I(R(j), j);
+  }, W = (j) => {
+    typeof G == "function" && G(j?.rowData, j);
   }, pe = () => {
-    const B = [];
-    return A && B.push(/* @__PURE__ */ e(Dt, { type: "checkbox", width: "50" }, "__checkbox__")), E.forEach((ne, J) => {
+    const j = [];
+    return F && j.push(/* @__PURE__ */ e(Dt, { type: "checkbox", width: "50" }, "__checkbox__")), A.forEach((ae, J) => {
       const {
         field: we,
         headerText: Ie,
@@ -6198,8 +6189,8 @@ function ei(t) {
         maxWidth: ja,
         customAttributes: Va,
         ..._a
-      } = ne || {};
-      B.push(
+      } = ae || {};
+      j.push(
         /* @__PURE__ */ e(
           Dt,
           {
@@ -6223,34 +6214,34 @@ function ei(t) {
           we || `col-${J}`
         )
       );
-    }), B;
+    }), j;
   };
   return /* @__PURE__ */ n(
     vn,
     {
       id: i,
-      ref: v,
+      ref: f,
       dataSource: {
         result: a,
         count: s
       },
-      height: z,
+      height: $,
       allowPaging: m,
       allowSorting: o,
       allowFiltering: u,
       allowGrouping: p,
-      allowReordering: b,
-      allowResizing: f,
+      allowReordering: g,
+      allowResizing: b,
       showColumnChooser: d,
-      selectionSettings: $,
-      pageSettings: { pageSize: 10, pageSizes: g?.pageSizes ?? [20, 40, 60, 80, 100] },
-      sortSettings: x ?? {
-        columns: [{ field: M, direction: _(S) }],
+      selectionSettings: T,
+      pageSettings: { pageSize: 10, pageSizes: v?.pageSizes ?? [20, 40, 60, 80, 100] },
+      sortSettings: w ?? {
+        columns: [{ field: L, direction: _(S) }],
         allowUnsort: !1
       },
       actionBegin: Y,
-      rowSelected: j,
-      rowDeselected: V,
+      rowSelected: V,
+      rowDeselected: U,
       recordDoubleClick: W,
       ...C,
       children: [
@@ -6294,10 +6285,10 @@ function ie({
   details: o = {},
   ...u
 }) {
-  const p = Qe(), b = Ds(u, m), f = (w) => {
+  const p = Qe(), g = Ds(u, m), b = (y) => {
     l?.({
-      key: b,
-      checked: w.target.checked,
+      key: g,
+      checked: y.target.checked,
       details: o,
       props: u
     });
@@ -6314,7 +6305,7 @@ function ie({
             id: p,
             type: "checkbox",
             className: "h-4 w-4 rounded border-zinc-300 focus:ring-[var(--primaryColor)]",
-            onChange: f,
+            onChange: b,
             "aria-label": "Select card"
           }
         ) }),
@@ -6341,11 +6332,11 @@ function $s({
   group: o = "Global",
   moreGroupsLabel: u = "+ 5 more",
   author: p = "Judith Black",
-  timeLabel: b = "Just now",
-  imageUrl: f = "https://images.unsplash.com/photo-1469980098053-382eb10ba017?q=80&w=1200&auto=format&fit=crop",
+  timeLabel: g = "Just now",
+  imageUrl: b = "https://images.unsplash.com/photo-1469980098053-382eb10ba017?q=80&w=1200&auto=format&fit=crop",
   description: r = "Columbia University is a prestigious Ivy League institution located in the heart of New York City.",
   // spread remaining props (_id, instanceId, etc.)
-  ...w
+  ...y
 }) {
   const d = oe(t), h = ce[d];
   return /* @__PURE__ */ n(
@@ -6357,7 +6348,7 @@ function $s({
       onSelect: i,
       identity: l,
       details: { type: "activity", title: m, group: o, author: p },
-      ...w,
+      ...y,
       children: [
         /* @__PURE__ */ e("div", { className: "flex items-start justify-between", children: /* @__PURE__ */ e("h3", { className: `font-semibold text-zinc-900 dark:text-zinc-100 ${h.title} ml-3`, children: m }) }),
         /* @__PURE__ */ n("div", { className: `text-zinc-500 dark:text-zinc-400 ${h.meta}`, children: [
@@ -6375,13 +6366,13 @@ function $s({
             )
           ] }) : null,
           /* @__PURE__ */ e("span", { "aria-hidden": "true", className: "px-2", children: "•" }),
-          /* @__PURE__ */ e("span", { children: b })
+          /* @__PURE__ */ e("span", { children: g })
         ] }),
         /* @__PURE__ */ n("div", { className: "mt-2 flex items-center gap-3", children: [
           /* @__PURE__ */ e(ze, { name: "John", size: "medium" }),
           /* @__PURE__ */ n("div", { className: "leading-tight", children: [
             /* @__PURE__ */ e("div", { className: "text-sm font-medium text-zinc-800 dark:text-zinc-100", children: p }),
-            /* @__PURE__ */ e("div", { className: `text-zinc-500 dark:text-zinc-400 ${h.meta}`, children: b })
+            /* @__PURE__ */ e("div", { className: `text-zinc-500 dark:text-zinc-400 ${h.meta}`, children: g })
           ] })
         ] }),
         /* @__PURE__ */ n("p", { className: "mt-2 text-zinc-700 dark:text-zinc-300", children: [
@@ -6399,7 +6390,7 @@ function $s({
           "div",
           {
             className: `mt-3 overflow-hidden rounded-lg border border-zinc-200 dark:border-zinc-800 ${h.media}`,
-            children: /* @__PURE__ */ e("img", { src: f, alt: "", className: "h-full w-full object-cover" })
+            children: /* @__PURE__ */ e("img", { src: b, alt: "", className: "h-full w-full object-cover" })
           }
         ),
         /* @__PURE__ */ e("div", { className: "mt-3 w-full flex justify-center", children: /* @__PURE__ */ e(
@@ -6466,11 +6457,11 @@ function Rs({
   // spread for identity (_id/instanceId/etc)
   ...p
 }) {
-  const b = oe(t), f = ce[b], r = Es[b], w = (d) => `px-1 pb-2 text-sm font-medium ${d === o ? "text-zinc-900 dark:text-zinc-100 border-b-2" : "text-zinc-500 dark:text-zinc-400"}`;
+  const g = oe(t), b = ce[g], r = Es[g], y = (d) => `px-1 pb-2 text-sm font-medium ${d === o ? "text-zinc-900 dark:text-zinc-100 border-b-2" : "text-zinc-500 dark:text-zinc-400"}`;
   return /* @__PURE__ */ n(
     ie,
     {
-      className: `flex flex-col ${f.card} ${r.wrap}`,
+      className: `flex flex-col ${b.card} ${r.wrap}`,
       showCheckbox: a,
       checkboxPosition: s,
       onSelect: i,
@@ -6479,7 +6470,7 @@ function Rs({
       ...p,
       children: [
         /* @__PURE__ */ n("div", { className: "flex items-start justify-between", children: [
-          /* @__PURE__ */ e("h3", { className: `font-semibold text-zinc-900 dark:text-zinc-100 ${f.title}`, children: m }),
+          /* @__PURE__ */ e("h3", { className: `font-semibold text-zinc-900 dark:text-zinc-100 ${b.title}`, children: m }),
           /* @__PURE__ */ e(
             "span",
             {
@@ -6493,14 +6484,14 @@ function Rs({
           /* @__PURE__ */ e(
             "span",
             {
-              className: `${w("joined")} ${o === "joined" ? "border-[var(--primaryColor)]" : "border-transparent"}`,
+              className: `${y("joined")} ${o === "joined" ? "border-[var(--primaryColor)]" : "border-transparent"}`,
               children: "Joined"
             }
           ),
           /* @__PURE__ */ e(
             "span",
             {
-              className: `${w("suggested")} ${o === "suggested" ? "border-[var(--primaryColor)]" : "border-transparent"}`,
+              className: `${y("suggested")} ${o === "suggested" ? "border-[var(--primaryColor)]" : "border-transparent"}`,
               children: "Suggested"
             }
           )
@@ -6650,11 +6641,11 @@ function Ps({
   // spread for identity fields: _id / id / instanceId etc.
   ...u
 }) {
-  const p = oe(t), b = ce[p], f = Os[p];
+  const p = oe(t), g = ce[p], b = Os[p];
   return /* @__PURE__ */ n(
     ie,
     {
-      className: `flex flex-col ${b.card} ${f.wrap || ""}`,
+      className: `flex flex-col ${g.card} ${b.wrap || ""}`,
       showCheckbox: a,
       checkboxPosition: s,
       onSelect: i,
@@ -6663,17 +6654,17 @@ function Ps({
       ...u,
       children: [
         /* @__PURE__ */ n("div", { className: "flex items-start justify-between", children: [
-          /* @__PURE__ */ e("h3", { className: `font-semibold text-zinc-900 dark:text-zinc-100 ${b.title}`, children: m }),
+          /* @__PURE__ */ e("h3", { className: `font-semibold text-zinc-900 dark:text-zinc-100 ${g.title}`, children: m }),
           /* @__PURE__ */ e("span", { className: "text-sm text-indigo-700 cursor-default select-none", children: "View All" })
         ] }),
         p === "lg" ? (
           // Large: 3-up grid of image cards
-          /* @__PURE__ */ e("div", { className: `mt-4 ${f.grid}`, children: o.slice(0, 3).map((r) => /* @__PURE__ */ n("article", { children: [
-            /* @__PURE__ */ e("img", { src: r.thumb, alt: "", className: f.cardImg }),
-            /* @__PURE__ */ e("h4", { className: `mt-3 ${f.title} text-zinc-900 dark:text-zinc-100`, children: r.title }),
-            /* @__PURE__ */ e("div", { className: `mt-1 text-zinc-500 dark:text-zinc-400 ${f.date}`, children: r.date }),
+          /* @__PURE__ */ e("div", { className: `mt-4 ${b.grid}`, children: o.slice(0, 3).map((r) => /* @__PURE__ */ n("article", { children: [
+            /* @__PURE__ */ e("img", { src: r.thumb, alt: "", className: b.cardImg }),
+            /* @__PURE__ */ e("h4", { className: `mt-3 ${b.title} text-zinc-900 dark:text-zinc-100`, children: r.title }),
+            /* @__PURE__ */ e("div", { className: `mt-1 text-zinc-500 dark:text-zinc-400 ${b.date}`, children: r.date }),
             /* @__PURE__ */ e("div", { className: "mt-2", children: /* @__PURE__ */ e(jt, { label: r.tag }) }),
-            /* @__PURE__ */ n("p", { className: `mt-2 ${f.excerpt}`, children: [
+            /* @__PURE__ */ n("p", { className: `mt-2 ${b.excerpt}`, children: [
               r.excerpt,
               " ",
               /* @__PURE__ */ e("span", { className: "underline decoration-dotted text-indigo-700 cursor-default", children: "View more" })
@@ -6686,12 +6677,12 @@ function Ps({
             {
               className: "flex items-start gap-3 rounded-xl border border-zinc-200 dark:border-zinc-800 p-2",
               children: [
-                /* @__PURE__ */ e("div", { className: `overflow-hidden rounded-lg ${f.itemThumb} flex-shrink-0`, children: /* @__PURE__ */ e("img", { src: r.thumb, alt: "", className: "h-full w-full object-cover" }) }),
+                /* @__PURE__ */ e("div", { className: `overflow-hidden rounded-lg ${b.itemThumb} flex-shrink-0`, children: /* @__PURE__ */ e("img", { src: r.thumb, alt: "", className: "h-full w-full object-cover" }) }),
                 /* @__PURE__ */ n("div", { className: "min-w-0 flex-1", children: [
-                  /* @__PURE__ */ e("h4", { className: `${f.title} text-zinc-900 dark:text-zinc-100 line-clamp-2`, children: r.title }),
-                  /* @__PURE__ */ e("div", { className: `mt-1 text-zinc-500 dark:text-zinc-400 ${f.date}`, children: r.date }),
+                  /* @__PURE__ */ e("h4", { className: `${b.title} text-zinc-900 dark:text-zinc-100 line-clamp-2`, children: r.title }),
+                  /* @__PURE__ */ e("div", { className: `mt-1 text-zinc-500 dark:text-zinc-400 ${b.date}`, children: r.date }),
                   /* @__PURE__ */ e("div", { className: "mt-1", children: /* @__PURE__ */ e(jt, { label: r.tag }) }),
-                  f.excerpt !== "hidden" && /* @__PURE__ */ n("p", { className: `mt-2 ${f.excerpt}`, children: [
+                  b.excerpt !== "hidden" && /* @__PURE__ */ n("p", { className: `mt-2 ${b.excerpt}`, children: [
                     r.excerpt,
                     " ",
                     /* @__PURE__ */ e("span", { className: "underline decoration-dotted text-indigo-700 cursor-default", children: "View more" })
@@ -6766,29 +6757,29 @@ function Vs({
   filters: u = Ls,
   activeFilter: p = "All",
   // NEW: iframe controls
-  mapQuery: b = "Florida",
-  zoom: f = 12,
+  mapQuery: g = "Florida",
+  zoom: b = 12,
   mapUrl: r,
   // optional full embed URL override
-  ...w
+  ...y
 }) {
-  const d = oe(t), h = ce[d], z = Ms[d], $ = r || js(b, f);
+  const d = oe(t), h = ce[d], $ = Ms[d], T = r || js(g, b);
   return /* @__PURE__ */ e(
     ie,
     {
-      className: `flex flex-col ${h.card} ${z.wrap}`,
+      className: `flex flex-col ${h.card} ${$.wrap}`,
       showCheckbox: a,
       checkboxPosition: s,
       onSelect: i,
       identity: l,
-      details: { type: "campus-map", title: m, campusName: o, activeFilter: p, mapQuery: b, zoom: f },
-      ...w,
-      children: /* @__PURE__ */ n("div", { className: `relative mt-3 overflow-hidden rounded-2xl border border-zinc-200 dark:border-zinc-800 ${z.mapH}`, children: [
+      details: { type: "campus-map", title: m, campusName: o, activeFilter: p, mapQuery: g, zoom: b },
+      ...y,
+      children: /* @__PURE__ */ n("div", { className: `relative mt-3 overflow-hidden rounded-2xl border border-zinc-200 dark:border-zinc-800 ${$.mapH}`, children: [
         /* @__PURE__ */ e(
           "iframe",
           {
             title: "Google Map",
-            src: $,
+            src: T,
             className: "h-full w-full",
             style: { border: 0 },
             loading: "lazy",
@@ -6797,7 +6788,7 @@ function Vs({
           }
         ),
         /* @__PURE__ */ n("div", { className: "absolute left-4 right-4 top-3 flex items-center justify-between pointer-events-none", children: [
-          /* @__PURE__ */ n("div", { className: `flex items-center rounded-full bg-white dark:bg-zinc-900 shadow border border-zinc-200 dark:border-zinc-700 ${z.campusPill}`, children: [
+          /* @__PURE__ */ n("div", { className: `flex items-center rounded-full bg-white dark:bg-zinc-900 shadow border border-zinc-200 dark:border-zinc-700 ${$.campusPill}`, children: [
             /* @__PURE__ */ e("span", { className: "truncate max-w-[60vw]", children: o }),
             /* @__PURE__ */ e("span", { className: "ml-2 text-zinc-400", children: "▾" })
           ] }),
@@ -6806,8 +6797,8 @@ function Vs({
             /* @__PURE__ */ e("div", { className: "h-8 w-8 rounded-full bg-white/90 border border-zinc-300 flex items-center justify-center", children: "›" })
           ] })
         ] }),
-        /* @__PURE__ */ e("div", { className: "absolute left-4 right-4 top-14 md:top-12 pointer-events-none mt-2", children: /* @__PURE__ */ e("div", { className: `flex ${z.chipGap} overflow-x-auto scrollbar-none`, children: u.map((A) => /* @__PURE__ */ e(Bs, { label: A, active: A === p, size: d }, A)) }) }),
-        /* @__PURE__ */ e("div", { className: "absolute left-4 right-4 top-28 md:top-24 pointer-events-none", children: /* @__PURE__ */ n("div", { className: `flex items-center rounded-full bg-white dark:bg-zinc-900 shadow border border-zinc-200 dark:border-zinc-700 px-4 ${z.searchH}`, children: [
+        /* @__PURE__ */ e("div", { className: "absolute left-4 right-4 top-14 md:top-12 pointer-events-none mt-2", children: /* @__PURE__ */ e("div", { className: `flex ${$.chipGap} overflow-x-auto scrollbar-none`, children: u.map((F) => /* @__PURE__ */ e(Bs, { label: F, active: F === p, size: d }, F)) }) }),
+        /* @__PURE__ */ e("div", { className: "absolute left-4 right-4 top-28 md:top-24 pointer-events-none", children: /* @__PURE__ */ n("div", { className: `flex items-center rounded-full bg-white dark:bg-zinc-900 shadow border border-zinc-200 dark:border-zinc-700 px-4 ${$.searchH}`, children: [
           /* @__PURE__ */ e("svg", { width: "18", height: "18", viewBox: "0 0 24 24", "aria-hidden": "true", className: "opacity-60", children: /* @__PURE__ */ e("path", { fill: "currentColor", d: "M15.5 14h-.79l-.28-.27a6.471 6.471 0 001.48-4.23C15.91 6.01 13.4 3.5 10.45 3.5S5 6.01 5 9.5 7.5 15.5 10.45 15.5c1.61 0 3.09-.59 4.23-1.48l.27.28v.79l4.25 4.25c.41.41 1.07.41 1.48 0s.41-1.07 0-1.48L15.5 14Zm-5.05 0C8.01 14 6 11.99 6 9.5S8.01 5 10.45 5s4.45 2.01 4.45 4.5-2.01 4.5-4.45 4.5Z" }) }),
           /* @__PURE__ */ e("span", { className: "ml-2 text-zinc-500 dark:text-zinc-400", children: "Search places" })
         ] }) })
@@ -6978,13 +6969,13 @@ function Ys({
   selectedIndex: u = 0,
   ...p
 }) {
-  const [b, f] = L(u), r = oe(t), w = ce[r], d = Us[r], h = o[b] || o[0], z = (A, E) => {
-    f(E), i?.(A);
-  }, $ = r === "lg";
+  const [g, b] = M(u), r = oe(t), y = ce[r], d = Us[r], h = o[g] || o[0], $ = (F, A) => {
+    b(A), i?.(F);
+  }, T = r === "lg";
   return /* @__PURE__ */ n(
     ie,
     {
-      className: `flex flex-col ${w.card} ${d.wrap}`,
+      className: `flex flex-col ${y.card} ${d.wrap}`,
       showCheckbox: a,
       checkboxPosition: s,
       onSelect: i,
@@ -6993,38 +6984,38 @@ function Ys({
       ...p,
       children: [
         /* @__PURE__ */ n("div", { className: "flex items-center justify-between mb-4", children: [
-          /* @__PURE__ */ e("h3", { className: `font-semibold text-zinc-900 dark:text-zinc-100 ${w.title}`, children: m }),
+          /* @__PURE__ */ e("h3", { className: `font-semibold text-zinc-900 dark:text-zinc-100 ${y.title}`, children: m }),
           /* @__PURE__ */ e("button", { className: "text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 text-sm font-medium transition-colors duration-200", children: "View All" })
         ] }),
-        $ ? (
+        T ? (
           // Large: Two-column layout
           /* @__PURE__ */ n("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [
-            /* @__PURE__ */ e("div", { className: "space-y-1", children: o.map((A, E) => /* @__PURE__ */ e(
+            /* @__PURE__ */ e("div", { className: "space-y-1", children: o.map((F, A) => /* @__PURE__ */ e(
               Vt,
               {
-                ev: A,
+                ev: F,
                 sizeMeta: d,
-                isSelected: E === b,
-                onClick: (I) => z(I, E)
+                isSelected: A === g,
+                onClick: (I) => $(I, A)
               },
-              A._id || A.id || E
+              F._id || F.id || A
             )) }),
             /* @__PURE__ */ e(Gs, { ev: h, sizeMeta: d })
           ] })
         ) : (
           // Small/Medium: Simple list only
-          /* @__PURE__ */ e("div", { className: "space-y-1", children: o.map((A, E) => /* @__PURE__ */ e(
+          /* @__PURE__ */ e("div", { className: "space-y-1", children: o.map((F, A) => /* @__PURE__ */ e(
             Vt,
             {
-              ev: A,
+              ev: F,
               sizeMeta: d,
-              isSelected: E === b,
-              onClick: (I) => z(I, E)
+              isSelected: A === g,
+              onClick: (I) => $(I, A)
             },
-            A._id || A.id || E
+            F._id || F.id || A
           )) })
         ),
-        !$ && /* @__PURE__ */ e("div", { className: "mt-4 pt-3 border-t border-zinc-200 dark:border-zinc-800", children: /* @__PURE__ */ e("button", { className: "w-full text-center text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 text-sm font-medium transition-colors duration-200", children: "View All" }) })
+        !T && /* @__PURE__ */ e("div", { className: "mt-4 pt-3 border-t border-zinc-200 dark:border-zinc-800", children: /* @__PURE__ */ e("button", { className: "w-full text-center text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 text-sm font-medium transition-colors duration-200", children: "View All" }) })
       ]
     }
   );
@@ -7192,42 +7183,42 @@ function Hs({
   emails: o = Ws,
   selectedIndex: u = 0,
   onStar: p,
-  onPin: b,
-  ...f
+  onPin: g,
+  ...b
 }) {
-  const [r, w] = L(u), d = oe(t), h = ce[d], z = Js[d], $ = (I, j) => {
-    w(j), i?.(I);
+  const [r, y] = M(u), d = oe(t), h = ce[d], $ = Js[d], T = (I, V) => {
+    y(V), i?.(I);
+  }, F = (I) => {
+    const V = { ...I, starred: !I.starred };
+    p?.(V);
   }, A = (I) => {
-    const j = { ...I, starred: !I.starred };
-    p?.(j);
-  }, E = (I) => {
-    const j = { ...I, pinned: !I.pinned };
-    b?.(j);
+    const V = { ...I, pinned: !I.pinned };
+    g?.(V);
   };
   return /* @__PURE__ */ n(
     ie,
     {
-      className: `flex flex-col ${h.card} ${z.wrap}`,
+      className: `flex flex-col ${h.card} ${$.wrap}`,
       showCheckbox: a,
       checkboxPosition: s,
       onSelect: i,
       identity: l,
       details: { type: "emails", title: m, count: o?.length ?? 0 },
-      ...f,
+      ...b,
       children: [
         /* @__PURE__ */ e("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ e("h3", { className: `font-semibold text-zinc-900 dark:text-zinc-100 ${h.title}`, children: m }) }),
         /* @__PURE__ */ e(be, { placeholder: "Type to search..." }),
-        /* @__PURE__ */ e("div", { className: "space-y-0", children: o.map((I, j) => /* @__PURE__ */ e(
+        /* @__PURE__ */ e("div", { className: "space-y-0", children: o.map((I, V) => /* @__PURE__ */ e(
           Xs,
           {
             email: I,
-            sizeMeta: z,
-            isSelected: j === r,
-            onClick: (V) => $(V, j),
-            onStar: A,
-            onPin: E
+            sizeMeta: $,
+            isSelected: V === r,
+            onClick: (U) => T(U, V),
+            onStar: F,
+            onPin: A
           },
-          I._id || I.id || j
+          I._id || I.id || V
         )) }),
         /* @__PURE__ */ e("div", { className: "mt-4 pt-3 border-t border-zinc-200 dark:border-zinc-800", children: /* @__PURE__ */ e("button", { className: "w-full text-center text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 text-sm font-medium transition-colors duration-200", children: "View All" }) })
       ]
@@ -7447,13 +7438,13 @@ function tl({
   selectedIndex: u = 0,
   ...p
 }) {
-  const [b, f] = L(u), r = oe(t), w = ce[r], d = Zs[r], h = (A, E) => {
-    f(E), i?.(A);
-  }, z = o[b] || o[0], $ = d.layout === "split";
+  const [g, b] = M(u), r = oe(t), y = ce[r], d = Zs[r], h = (F, A) => {
+    b(A), i?.(F);
+  }, $ = o[g] || o[0], T = d.layout === "split";
   return /* @__PURE__ */ n(
     ie,
     {
-      className: `flex flex-col ${w.card} ${d.wrap}`,
+      className: `flex flex-col ${y.card} ${d.wrap}`,
       showCheckbox: a,
       checkboxPosition: s,
       onSelect: i,
@@ -7461,37 +7452,37 @@ function tl({
       details: { type: "directory", title: m, count: o?.length ?? 0 },
       ...p,
       children: [
-        /* @__PURE__ */ e("div", { className: "flex items-center justify-between mb-4", children: /* @__PURE__ */ e("h3", { className: `font-semibold text-zinc-900 dark:text-zinc-100 ${w.title}`, children: m }) }),
+        /* @__PURE__ */ e("div", { className: "flex items-center justify-between mb-4", children: /* @__PURE__ */ e("h3", { className: `font-semibold text-zinc-900 dark:text-zinc-100 ${y.title}`, children: m }) }),
         /* @__PURE__ */ e(el, { sizeMeta: d }),
-        $ ? /* @__PURE__ */ n("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6 min-h-0", children: [
-          /* @__PURE__ */ e("div", { className: "space-y-3", children: o.map((A, E) => /* @__PURE__ */ e(
+        T ? /* @__PURE__ */ n("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6 min-h-0", children: [
+          /* @__PURE__ */ e("div", { className: "space-y-3", children: o.map((F, A) => /* @__PURE__ */ e(
             _t,
             {
-              contact: A,
+              contact: F,
               sizeMeta: d,
-              isSelected: E === b,
-              onClick: (I) => h(I, E)
+              isSelected: A === g,
+              onClick: (I) => h(I, A)
             },
-            A._id || A.id || E
+            F._id || F.id || A
           )) }),
           /* @__PURE__ */ e(
             Ks,
             {
-              contact: z,
+              contact: $,
               sizeMeta: d
             }
           )
         ] }) : (
           // Single column layout for small screens
-          /* @__PURE__ */ e("div", { className: "space-y-3", children: o.map((A, E) => /* @__PURE__ */ e(
+          /* @__PURE__ */ e("div", { className: "space-y-3", children: o.map((F, A) => /* @__PURE__ */ e(
             _t,
             {
-              contact: A,
+              contact: F,
               sizeMeta: d,
-              isSelected: E === b,
-              onClick: (I) => h(I, E)
+              isSelected: A === g,
+              onClick: (I) => h(I, A)
             },
-            A._id || A.id || E
+            F._id || F.id || A
           )) })
         ),
         /* @__PURE__ */ e("div", { className: "mt-4 pt-3 border-t border-zinc-200 dark:border-zinc-800", children: /* @__PURE__ */ e("button", { className: "w-full text-center text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 text-sm font-medium transition-colors duration-200", children: "View All" }) })
@@ -7580,8 +7571,8 @@ function nl({
   termLabel: o = "Spring 2024",
   balance: u = 3e3,
   totalCharges: p = 4440,
-  totalPayments: b = 1568,
-  transactions: f = [
+  totalPayments: g = 1568,
+  transactions: b = [
     {
       id: "t1",
       date: "February 16, 2025",
@@ -7599,7 +7590,7 @@ function nl({
   ],
   ...r
 }) {
-  const w = oe(t), d = ce[w], h = rl[w];
+  const y = oe(t), d = ce[y], h = rl[y];
   return /* @__PURE__ */ n(
     ie,
     {
@@ -7608,7 +7599,7 @@ function nl({
       checkboxPosition: s,
       onSelect: i,
       identity: l,
-      details: { type: "account-summary", termLabel: o, balance: u, totalCharges: p, totalPayments: b },
+      details: { type: "account-summary", termLabel: o, balance: u, totalCharges: p, totalPayments: g },
       ...r,
       children: [
         /* @__PURE__ */ n("div", { className: "flex items-center justify-between", children: [
@@ -7629,7 +7620,7 @@ function nl({
               ] }),
               /* @__PURE__ */ n("div", { children: [
                 /* @__PURE__ */ e("div", { className: "text-sm text-zinc-600 dark:text-zinc-400", children: "Total Payments" }),
-                /* @__PURE__ */ e("div", { className: "mt-1 font-semibold text-green-600", children: $e(b) })
+                /* @__PURE__ */ e("div", { className: "mt-1 font-semibold text-green-600", children: $e(g) })
               ] })
             ] })
           ] }),
@@ -7641,19 +7632,19 @@ function nl({
               ] }),
               /* @__PURE__ */ n("div", { children: [
                 /* @__PURE__ */ e("div", { className: "text-sm text-zinc-600 dark:text-zinc-400", children: "Total Payments" }),
-                /* @__PURE__ */ e("div", { className: "mt-1 font-semibold text-green-600", children: $e(b) })
+                /* @__PURE__ */ e("div", { className: "mt-1 font-semibold text-green-600", children: $e(g) })
               ] })
             ] }),
-            /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: f.slice(0, 2).map((z, $) => /* @__PURE__ */ e(
+            /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: b.slice(0, 2).map(($, T) => /* @__PURE__ */ e(
               al,
               {
-                side: $ === 0 ? "left" : "right",
-                date: z.date,
-                title: z.title,
-                amount: z.amount,
-                kind: z.kind
+                side: T === 0 ? "left" : "right",
+                date: $.date,
+                title: $.title,
+                amount: $.amount,
+                kind: $.kind
               },
-              z.id || $
+              $.id || T
             )) })
           ] })
         ] }),
@@ -7772,7 +7763,7 @@ function ll({
   term: o = "Fall 2025",
   ...u
 }) {
-  const [p, b] = L("vacation"), [f, r] = L(!1), w = oe(t), d = ce[w], h = sl[w], z = We.find(($) => $.id === p) || We[0];
+  const [p, g] = M("vacation"), [b, r] = M(!1), y = oe(t), d = ce[y], h = sl[y], $ = We.find((T) => T.id === p) || We[0];
   return /* @__PURE__ */ n(
     ie,
     {
@@ -7798,38 +7789,38 @@ function ll({
               "button",
               {
                 className: "flex items-center gap-1 p-2 text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-md transition-colors duration-200",
-                onClick: () => r(!f),
+                onClick: () => r(!b),
                 children: /* @__PURE__ */ e(na, { className: "h-4 w-4" })
               }
             ),
-            f && /* @__PURE__ */ n("div", { className: "absolute right-0 top-full mt-1 w-48 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-md shadow-lg z-10 py-1", children: [
+            b && /* @__PURE__ */ n("div", { className: "absolute right-0 top-full mt-1 w-48 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-md shadow-lg z-10 py-1", children: [
               /* @__PURE__ */ e("button", { className: "w-full px-4 py-2 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 text-left", children: "Download Pay Stub" }),
               /* @__PURE__ */ e("button", { className: "w-full px-4 py-2 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 text-left", children: "View Leave History" })
             ] })
           ] })
         ] }),
-        h.showTabs && /* @__PURE__ */ e("div", { className: "flex border-b border-zinc-200 dark:border-zinc-800", children: We.map(($) => /* @__PURE__ */ e(
+        h.showTabs && /* @__PURE__ */ e("div", { className: "flex border-b border-zinc-200 dark:border-zinc-800", children: We.map((T) => /* @__PURE__ */ e(
           "button",
           {
-            className: `flex-1 py-2 px-4 text-center ${h.tab} font-medium border-b-2 transition-colors duration-200 ${p === $.id ? "border-blue-500 text-blue-600 dark:text-blue-400" : "border-transparent text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100"}`,
-            onClick: () => b($.id),
-            children: $.name.split(" ")[0]
+            className: `flex-1 py-2 px-4 text-center ${h.tab} font-medium border-b-2 transition-colors duration-200 ${p === T.id ? "border-blue-500 text-blue-600 dark:text-blue-400" : "border-transparent text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100"}`,
+            onClick: () => g(T.id),
+            children: T.name.split(" ")[0]
           },
-          $.id
+          T.id
         )) }),
         /* @__PURE__ */ e("div", { className: "space-y-4 mb-6", children: h.showAllLeave ? (
           // LG: Show all leave types
-          We.map(($) => /* @__PURE__ */ e(Ut, { leave: $, sizeMeta: h }, $.id))
+          We.map((T) => /* @__PURE__ */ e(Ut, { leave: T, sizeMeta: h }, T.id))
         ) : h.showSingleLeave ? (
           // MD: Show active tab leave type
-          /* @__PURE__ */ e(Ut, { leave: z, sizeMeta: h })
+          /* @__PURE__ */ e(Ut, { leave: $, sizeMeta: h })
         ) : (
           // SM: Show only available hours
           /* @__PURE__ */ e("div", { className: "bg-white dark:bg-zinc-900 rounded-lg border border-zinc-200 dark:border-zinc-800 p-4", children: /* @__PURE__ */ n("div", { className: "flex items-center gap-3 mb-3", children: [
             /* @__PURE__ */ e(Fe, { className: "h-5 w-5 text-blue-600 dark:text-blue-400" }),
             /* @__PURE__ */ n("div", { children: [
               /* @__PURE__ */ e("div", { className: `font-medium text-zinc-900 dark:text-zinc-100 ${h.table}`, children: "Available Leave" }),
-              /* @__PURE__ */ e("div", { className: `text-zinc-600 dark:text-zinc-400 ${h.table}`, children: z.available })
+              /* @__PURE__ */ e("div", { className: `text-zinc-600 dark:text-zinc-400 ${h.table}`, children: $.available })
             ] })
           ] }) })
         ) }),
@@ -7963,11 +7954,11 @@ function dl({
   subtitle: o = "Drive Shared",
   ...u
 }) {
-  const [p, b] = L(!1), f = oe(t), r = ce[f], w = cl[f];
+  const [p, g] = M(!1), b = oe(t), r = ce[b], y = cl[b];
   return /* @__PURE__ */ n(
     ie,
     {
-      className: `flex flex-col ${r.card} ${w.wrap}`,
+      className: `flex flex-col ${r.card} ${y.wrap}`,
       showCheckbox: a,
       checkboxPosition: s,
       onSelect: i,
@@ -7977,7 +7968,7 @@ function dl({
       children: [
         /* @__PURE__ */ n("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ n("div", { children: [
-            /* @__PURE__ */ e("h3", { className: `text-zinc-900 dark:text-zinc-100 ${w.title} mb-1`, children: m }),
+            /* @__PURE__ */ e("h3", { className: `text-zinc-900 dark:text-zinc-100 ${y.title} mb-1`, children: m }),
             /* @__PURE__ */ e("div", { className: "text-zinc-600 dark:text-zinc-400 text-sm", children: o })
           ] }),
           /* @__PURE__ */ n("div", { className: "relative", children: [
@@ -7985,7 +7976,7 @@ function dl({
               "button",
               {
                 className: "flex items-center gap-1 p-2 text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-md transition-colors duration-200",
-                onClick: () => b(!p),
+                onClick: () => g(!p),
                 children: /* @__PURE__ */ e(Qt, { className: "h-4 w-4" })
               }
             ),
@@ -8001,21 +7992,21 @@ function dl({
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ e("div", { className: `grid ${w.gridCols} gap-3 `, children: il.map((d) => /* @__PURE__ */ e(
+        /* @__PURE__ */ e("div", { className: `grid ${y.gridCols} gap-3 `, children: il.map((d) => /* @__PURE__ */ e(
           qt,
           {
             item: d,
-            sizeMeta: w
+            sizeMeta: y
           },
           d.id
         )) }),
-        w.showRecent && /* @__PURE__ */ n("div", { className: "", children: [
-          /* @__PURE__ */ e("h4", { className: `font-semibold text-zinc-900 dark:text-zinc-100 mb-3 ${w.item}`, children: "Recent Files" }),
+        y.showRecent && /* @__PURE__ */ n("div", { className: "", children: [
+          /* @__PURE__ */ e("h4", { className: `font-semibold text-zinc-900 dark:text-zinc-100 mb-3 ${y.item}`, children: "Recent Files" }),
           /* @__PURE__ */ e("div", { className: "space-y-2", children: ol.map((d) => /* @__PURE__ */ e(
             qt,
             {
               item: d,
-              sizeMeta: w,
+              sizeMeta: y,
               showDate: !0
             },
             d.id
@@ -8155,7 +8146,7 @@ const ml = [
   }
 };
 function pl({ alert: t, sizeMeta: a, onDismiss: s, onMarkRead: i }) {
-  const [l, m] = L(!1), o = Ra(t.type), u = hl(t.type);
+  const [l, m] = M(!1), o = Ra(t.type), u = hl(t.type);
   return l ? null : /* @__PURE__ */ n("div", { className: `relative rounded-lg border-l-4 p-4 transition-all duration-200 ${o.bg} ${o.border} ${t.read ? "border-l-2 opacity-80" : "border-l-4"}`, style: { borderLeftColor: o.accent }, children: [
     /* @__PURE__ */ e(
       "button",
@@ -8179,7 +8170,7 @@ function pl({ alert: t, sizeMeta: a, onDismiss: s, onMarkRead: i }) {
   ] });
 }
 function gl({ alert: t, onDismiss: a }) {
-  const [s, i] = L(!1), l = Ra("banner"), m = () => {
+  const [s, i] = M(!1), l = Ra("banner"), m = () => {
     i(!0), a?.(t);
   };
   return s ? null : /* @__PURE__ */ e("div", { className: `rounded-lg border p-4  ${l.bg} ${l.border} relative`, children: /* @__PURE__ */ n("div", { className: "flex items-start gap-3", children: [
@@ -8209,36 +8200,36 @@ function bl({
   showBanner: u = !0,
   ...p
 }) {
-  const [b, f] = L(o), r = oe(t), w = ce[r], d = ul[r], h = (A) => {
-    f((E) => E.filter((I) => I.id !== A.id));
-  }, z = b.find((A) => A.type === "banner"), $ = b.filter((A) => A.type !== "banner");
+  const [g, b] = M(o), r = oe(t), y = ce[r], d = ul[r], h = (F) => {
+    b((A) => A.filter((I) => I.id !== F.id));
+  }, $ = g.find((F) => F.type === "banner"), T = g.filter((F) => F.type !== "banner");
   return /* @__PURE__ */ n(
     ie,
     {
-      className: `flex flex-col ${w.card} ${d.wrap}`,
+      className: `flex flex-col ${y.card} ${d.wrap}`,
       showCheckbox: a,
       checkboxPosition: s,
       onSelect: i,
       identity: l,
-      details: { type: "alerts", title: m, count: b.length },
+      details: { type: "alerts", title: m, count: g.length },
       ...p,
       children: [
-        /* @__PURE__ */ e("div", { className: "flex items-center justify-between ", children: /* @__PURE__ */ e("h3", { className: `font-semibold text-zinc-900 dark:text-zinc-100 ${w.title}`, children: m }) }),
-        u && z && t !== "sm" && /* @__PURE__ */ e(
+        /* @__PURE__ */ e("div", { className: "flex items-center justify-between ", children: /* @__PURE__ */ e("h3", { className: `font-semibold text-zinc-900 dark:text-zinc-100 ${y.title}`, children: m }) }),
+        u && $ && t !== "sm" && /* @__PURE__ */ e(
           gl,
           {
-            alert: z,
+            alert: $,
             onDismiss: h
           }
         ),
-        /* @__PURE__ */ e("div", { className: "space-y-0.5", children: $.slice(0, 3).map((A) => /* @__PURE__ */ e(
+        /* @__PURE__ */ e("div", { className: "space-y-0.5", children: T.slice(0, 3).map((F) => /* @__PURE__ */ e(
           pl,
           {
-            alert: A,
+            alert: F,
             sizeMeta: d,
             onDismiss: h
           },
-          A.id
+          F.id
         )) }),
         /* @__PURE__ */ e("button", { className: "w-full py-3 px-4 border border-zinc-300 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-800 font-medium rounded-lg transition-colors duration-200", children: "View All" })
       ]
@@ -8343,7 +8334,7 @@ const fl = [
   }
 };
 function yl({ video: t, sizeMeta: a }) {
-  const [s, i] = L(!1);
+  const [s, i] = M(!1);
   return /* @__PURE__ */ n("div", { className: "group cursor-pointer", children: [
     /* @__PURE__ */ n("div", { className: `relative ${a.thumbnailHeight} rounded-lg overflow-hidden  bg-zinc-200 dark:bg-zinc-800`, children: [
       /* @__PURE__ */ e(
@@ -8385,11 +8376,11 @@ function vl({
   videos: o = fl,
   ...u
 }) {
-  const [p, b] = L(!1), f = oe(t), r = ce[f], w = xl[f];
+  const [p, g] = M(!1), b = oe(t), r = ce[b], y = xl[b];
   return /* @__PURE__ */ n(
     ie,
     {
-      className: `flex flex-col ${r.card} ${w.wrap}`,
+      className: `flex flex-col ${r.card} ${y.wrap}`,
       showCheckbox: a,
       checkboxPosition: s,
       onSelect: i,
@@ -8404,7 +8395,7 @@ function vl({
               "button",
               {
                 className: "flex items-center gap-1 px-3 py-1.5 text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 border border-zinc-300 dark:border-zinc-600 rounded-md transition-colors duration-200",
-                onClick: () => b(!p),
+                onClick: () => g(!p),
                 children: [
                   "Filter",
                   /* @__PURE__ */ e(ve, { className: "h-4 w-4 transform rotate-90" })
@@ -8419,11 +8410,11 @@ function vl({
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ e("div", { className: `grid ${w.gridCols} gap-4 `, children: o.slice(0, w.gridCols === "grid-cols-3" ? 6 : 4).map((d) => /* @__PURE__ */ e(
+        /* @__PURE__ */ e("div", { className: `grid ${y.gridCols} gap-4 `, children: o.slice(0, y.gridCols === "grid-cols-3" ? 6 : 4).map((d) => /* @__PURE__ */ e(
           yl,
           {
             video: d,
-            sizeMeta: w
+            sizeMeta: y
           },
           d.id
         )) }),