@starasia/admin 1.4.5 → 1.4.6

package/dist/index.es.js

@@ -1,16 +1,16 @@
 export * from "@starasia/alert";
-import { Badges as SA } from "@starasia/badges";
+import { Badges as DA } from "@starasia/badges";
 export * from "@starasia/badges";
-import { Box as C } from "@starasia/box";
+import { Box as a } from "@starasia/box";
 export * from "@starasia/box";
 import { Button as O } from "@starasia/button";
 export * from "@starasia/button";
 export * from "@starasia/card";
 import { StarasiaDate as ne } from "@starasia/date";
 export * from "@starasia/date";
-import { Dialog as DA, DialogTitle as dA, DialogBody as IA, DialogFooter as GA } from "@starasia/dialog";
+import { Dialog as IA, DialogTitle as dA, DialogBody as kA, DialogFooter as GA } from "@starasia/dialog";
 export * from "@starasia/dialog";
-import { Drawer as fe } from "@starasia/drawer";
+import { Drawer as be } from "@starasia/drawer";
 export * from "@starasia/drawer";
 import { Dropdown as OA } from "@starasia/dropdown";
 export * from "@starasia/dropdown";
@@ -20,17 +20,17 @@ import { searchParamsToObject as YA } from "@starasia/http";
 export * from "@starasia/http";
 import { Input as pA } from "@starasia/input";
 export * from "@starasia/input";
-import { Menu as ce, MenuButton as xA, MenuLists as ge, MenuHeading as Se, MenuBody as se, MenuFooter as be } from "@starasia/menu";
+import { Menu as ce, MenuButton as fA, MenuLists as ge, MenuHeading as Le, MenuBody as se, MenuFooter as Ge } from "@starasia/menu";
 export * from "@starasia/menu";
-import { Pagination as Le } from "@starasia/pagination";
+import { Pagination as Oe } from "@starasia/pagination";
 export * from "@starasia/pagination";
 export * from "@starasia/storage";
-import { Tr as hA, Td as BA, Table as ae, Thead as Ge, Th as VA, Tbody as Oe } from "@starasia/table";
+import { Tr as hA, Td as BA, Table as ae, Thead as Ye, Th as VA, Tbody as pe } from "@starasia/table";
 export * from "@starasia/table";
 export * from "@starasia/tabs";
-import { Textarea as Ye } from "@starasia/textarea";
+import { Textarea as je } from "@starasia/textarea";
 export * from "@starasia/textarea";
-import { useTheme as pe, ThemeProvider as XA, useRadius as je, useColor as WA } from "@starasia/theme";
+import { useTheme as Fe, ThemeProvider as XA, useRadius as Ne, useColor as WA } from "@starasia/theme";
 export * from "@starasia/theme";
 export * from "@starasia/toast";
 import { Toggle as Ce } from "@starasia/toggle";
@@ -39,7 +39,7 @@ import { Tooltip as rA } from "@starasia/tooltip";
 export * from "@starasia/tooltip";
 import { Checkbox as bA } from "@starasia/checkbox";
 export * from "@starasia/checkbox";
-import { Radio as Fe } from "@starasia/radio";
+import { Radio as ze } from "@starasia/radio";
 export * from "@starasia/radio";
 import { Text as Q } from "@starasia/text";
 export * from "@starasia/text";
@@ -54,11 +54,11 @@ export * from "@starasia/story-record";
 import { Skeleton as sA } from "@starasia/skeleton";
 export * from "@starasia/skeleton";
 import { jsx as A, jsxs as g, Fragment as U } from "react/jsx-runtime";
-import aA, { createContext as Be, useState as b, useContext as we, useCallback as uA, useMemo as cA, memo as _, useEffect as W, useRef as iA, useLayoutEffect as qA, isValidElement as de, forwardRef as RA, Children as Ne, useImperativeHandle as ze } from "react";
+import aA, { createContext as Be, useState as L, useContext as we, useCallback as uA, useMemo as cA, memo as _, useEffect as R, useRef as iA, useLayoutEffect as qA, isValidElement as de, forwardRef as RA, Children as Ke, useImperativeHandle as Ze } from "react";
 import "@starasia/css/dist/style.css";
-import { useSearchParams as jA, useNavigate as vA, useLocation as kA, Outlet as $A, Link as Ke, useParams as Qe } from "react-router";
-import Ze from "react-easy-crop";
-const He = {
+import { useSearchParams as jA, useNavigate as vA, useLocation as EA, Outlet as $A, Link as He, useParams as Qe } from "react-router";
+import Je from "react-easy-crop";
+const qe = {
   menus: [],
   menuBottom: void 0,
   logo: "",
@@ -66,8 +66,8 @@ const He = {
   userData: null,
   setUserData: () => {
   }
-}, he = Be(He), ue = () => we(he), Je = (e) => {
-  const [i, t] = b(
+}, he = Be(qe), ue = () => we(he), Te = (e) => {
+  const [i, t] = L(
     (e == null ? void 0 : e.initialUserData) || null
   );
   return {
@@ -82,8 +82,8 @@ const He = {
   },
   clearBadge: () => {
   }
-}), qe = ({ children: e }) => {
-  const [i, t] = b({}), o = uA(
+}), Ue = ({ children: e }) => {
+  const [i, t] = L({}), o = uA(
     (c) => {
       t(
         (s) => typeof c == "function" ? c(s) : c
@@ -92,27 +92,27 @@ const He = {
     []
   ), r = uA(
     (c, s) => {
-      t((a) => {
-        const d = typeof s == "function" ? s(a[c]) : s;
-        return { ...a, [c]: d };
+      t((C) => {
+        const d = typeof s == "function" ? s(C[c]) : s;
+        return { ...C, [c]: d };
       });
     },
     []
   ), n = uA((c) => {
     t((s) => {
       if (!(c in s)) return s;
-      const a = { ...s };
-      return delete a[c], a;
+      const C = { ...s };
+      return delete C[c], C;
     });
   }, []), l = cA(
     () => ({ badges: i, setBadge: r, setBadges: o, clearBadge: n }),
     [i, r, o, n]
   );
   return /* @__PURE__ */ A(De.Provider, { value: l, children: e });
-}, Te = () => we(De), _A = (e, i) => {
+}, We = () => we(De), _A = (e, i) => {
   const t = i !== void 0 ? i : e;
   return t == null ? null : typeof t == "string" || typeof t == "number" ? { value: t } : t;
-}, Ue = ({
+}, Re = ({
   router: e,
   menus: i = [],
   menuBottom: t,
@@ -121,7 +121,7 @@ const He = {
   initialUserData: n,
   theme: l
 }) => {
-  const c = Je({ initialUserData: n }), { theme: s } = pe();
+  const c = Te({ initialUserData: n }), { theme: s } = Fe();
   return /* @__PURE__ */ A(
     he.Provider,
     {
@@ -133,11 +133,11 @@ const He = {
         setUserData: c.setUserData,
         menuBottom: t
       },
-      children: /* @__PURE__ */ A(qe, { children: l ? /* @__PURE__ */ A(XA, { value: l, children: e }) : s ? /* @__PURE__ */ A(XA, { value: s, children: e }) : e })
+      children: /* @__PURE__ */ A(Ue, { children: l ? /* @__PURE__ */ A(XA, { value: l, children: e }) : s ? /* @__PURE__ */ A(XA, { value: s, children: e }) : e })
     }
   );
-}, er = _(Ue);
-function We({
+}, er = _(Re);
+function ve({
   collapsed: e = !1,
   children: i
 }) {
@@ -182,14 +182,14 @@ function Ae() {
   const i = Number(e);
   return Number.isFinite(i) ? i : null;
 }
-function Re(e) {
+function Pe(e) {
   typeof window > "u" || (e === null ? window.localStorage.removeItem(LA) : window.localStorage.setItem(LA, String(e)), window.dispatchEvent(new CustomEvent(TA, { detail: e })));
 }
 function Ie() {
-  const [e, i] = b(
+  const [e, i] = L(
     () => Ae()
   );
-  return W(() => {
+  return R(() => {
     const o = () => {
       i(Ae());
     }, r = (n) => {
@@ -199,10 +199,10 @@ function Ie() {
       window.removeEventListener(TA, o), window.removeEventListener("storage", r);
     };
   }, []), { selectedGroupId: e, setSelectedGroupId: (o) => {
-    Re(o), i(o);
+    Pe(o), i(o);
   } };
 }
-let mA = 0, CA = !1;
+let yA = 0, CA = !1;
 const ee = {
   width: "100%",
   display: "flex",
@@ -230,103 +230,103 @@ function ir({
   loadingComponent: l,
   sidebarHeaderContent: c,
   headerActions: s,
-  profileRole: a,
+  profileRole: C,
   profileMenuButtons: d,
   profileMenuItems: w,
   logoutButton: B
 }) {
-  const [k] = jA(), L = k.get("embed") === "true", h = ue(), { badges: N } = Te(), K = vA(), H = kA(), M = !X("md"), [I, R] = b(!1), [f, V] = b(!1), [$, z] = b(!1), [E, G] = b(/* @__PURE__ */ new Set()), { selectedGroupId: D, setSelectedGroupId: u } = Ie(), p = iA(null), q = iA(null);
-  W(() => {
-    const x = p.current;
-    if (!x) return;
+  const [D] = jA(), b = D.get("embed") === "true", h = ue(), { badges: F } = We(), N = vA(), Z = EA(), E = !X("md"), [I, W] = L(!1), [x, P] = L(!1), [$, K] = L(!1), [M, G] = L(/* @__PURE__ */ new Set()), { selectedGroupId: k, setSelectedGroupId: u } = Ie(), p = iA(null), q = iA(null);
+  R(() => {
+    const f = p.current;
+    if (!f) return;
     const S = () => {
-      CA || (mA = x.scrollTop);
+      CA || (yA = f.scrollTop);
     };
-    return x.addEventListener("scroll", S), () => x.removeEventListener("scroll", S);
+    return f.addEventListener("scroll", S), () => f.removeEventListener("scroll", S);
   }, []);
-  const F = () => {
-    const x = p.current;
-    x && mA > 0 && (CA = !0, x.scrollTop = mA, requestAnimationFrame(() => {
+  const z = () => {
+    const f = p.current;
+    f && yA > 0 && (CA = !0, f.scrollTop = yA, requestAnimationFrame(() => {
       CA = !1;
     }));
   };
   qA(() => {
-    CA = !0, F();
-    const x = setTimeout(() => {
+    CA = !0, z();
+    const f = setTimeout(() => {
       CA = !1;
     }, 300);
-    return () => clearTimeout(x);
+    return () => clearTimeout(f);
   }, []), qA(() => {
-    h.menus.length > 0 && (mA > 0 ? F() : requestAnimationFrame(() => {
+    h.menus.length > 0 && (yA > 0 ? z() : requestAnimationFrame(() => {
       var S;
-      const x = (S = p.current) == null ? void 0 : S.querySelector(
+      const f = (S = p.current) == null ? void 0 : S.querySelector(
         "[data-menu-active='true']"
       );
-      x && x.scrollIntoView({ block: "center", behavior: "instant" });
+      f && f.scrollIntoView({ block: "center", behavior: "instant" });
     }));
-  }, [h.menus]), W(() => {
-    CA = !0, F();
-    const x = setTimeout(F, 0), S = setTimeout(F, 50), j = setTimeout(F, 100), AA = setTimeout(F, 200), oA = setTimeout(() => {
+  }, [h.menus]), R(() => {
+    CA = !0, z();
+    const f = setTimeout(z, 0), S = setTimeout(z, 50), j = setTimeout(z, 100), AA = setTimeout(z, 200), oA = setTimeout(() => {
       CA = !1;
     }, 300);
     return () => {
-      clearTimeout(x), clearTimeout(S), clearTimeout(j), clearTimeout(AA), clearTimeout(oA);
+      clearTimeout(f), clearTimeout(S), clearTimeout(j), clearTimeout(AA), clearTimeout(oA);
     };
-  }, [H.pathname]), W(() => {
+  }, [Z.pathname]), R(() => {
     q.current && (q.current.scrollTop = 0);
-  }, [H.pathname]), W(() => {
-    M && z(!1);
-  }, [H.pathname, M]), W(() => {
-    M && V(!0);
-  }, [M]);
+  }, [Z.pathname]), R(() => {
+    E && K(!1);
+  }, [Z.pathname, E]), R(() => {
+    E && P(!0);
+  }, [E]);
   const y = () => {
-    R(!0);
+    W(!0);
   }, eA = () => {
-    R(!1);
+    W(!1);
   }, tA = () => {
-    R(!1), r();
+    W(!1), r();
   }, QA = h.menus.flatMap(
-    (x) => x.items.flatMap((S) => {
+    (f) => f.items.flatMap((S) => {
       const j = [S.to];
       return S.children && j.push(...S.children.map((AA) => AA.to)), j;
     })
-  ), lA = (x) => {
-    if (!H.pathname.startsWith(x)) return !1;
-    const S = QA.filter((j) => H.pathname.startsWith(j)).sort((j, AA) => AA.length - j.length)[0];
-    return x === S;
+  ), lA = (f) => {
+    if (!Z.pathname.startsWith(f)) return !1;
+    const S = QA.filter((j) => Z.pathname.startsWith(j)).sort((j, AA) => AA.length - j.length)[0];
+    return f === S;
   };
-  W(() => {
-    h.menus.forEach((x) => {
-      x.items.forEach((S) => {
+  R(() => {
+    h.menus.forEach((f) => {
+      f.items.forEach((S) => {
         var j;
-        (j = S.children) != null && j.some((AA) => H.pathname.startsWith(AA.to)) && G((AA) => {
+        (j = S.children) != null && j.some((AA) => Z.pathname.startsWith(AA.to)) && G((AA) => {
           const oA = new Set(AA);
           return oA.add(S.id), oA;
         });
       });
     });
-  }, [H.pathname, h.menus]);
-  const me = (x) => {
+  }, [Z.pathname, h.menus]);
+  const xe = (f) => {
     G((S) => {
       const j = new Set(S);
-      return j.has(x) ? j.delete(x) : j.add(x), j;
+      return j.has(f) ? j.delete(f) : j.add(f), j;
     });
   };
-  W(() => {
-    h.menus.length !== 0 && D !== null && !h.menus.some((x) => x.id === D) && u(null);
-  }, [h.menus, D, u]);
-  const ye = cA(() => {
-    if (D !== null)
+  R(() => {
+    h.menus.length !== 0 && k !== null && !h.menus.some((f) => f.id === k) && u(null);
+  }, [h.menus, k, u]);
+  const fe = cA(() => {
+    if (k !== null)
       return h.menus.filter(
-        (j) => j.id === D || j.parentGroupId === D
+        (j) => j.id === k || j.parentGroupId === k
       );
-    const x = h.menus.filter((j) => j.parentGroupId === void 0), S = h.menus.filter((j) => j.parentGroupId !== void 0).flatMap((j) => j.items);
-    return S.length === 0 ? x : [
-      ...x,
+    const f = h.menus.filter((j) => j.parentGroupId === void 0), S = h.menus.filter((j) => j.parentGroupId !== void 0).flatMap((j) => j.items);
+    return S.length === 0 ? f : [
+      ...f,
       { id: 18, name: "Pengaturan", items: S, parentGroupId: void 0 }
     ];
-  }, [h.menus, D]);
-  return L ? /* @__PURE__ */ A("main", { style: { height: "100vh", overflowY: "auto", backgroundColor: "#f9fafb" }, children: e || /* @__PURE__ */ A($A, {}) }) : /* @__PURE__ */ g(U, { children: [
+  }, [h.menus, k]);
+  return b ? /* @__PURE__ */ A("main", { style: { height: "100vh", overflowY: "auto", backgroundColor: "#f9fafb" }, children: e || /* @__PURE__ */ A($A, {}) }) : /* @__PURE__ */ g(U, { children: [
     /* @__PURE__ */ g(
       "div",
       {
@@ -335,11 +335,11 @@ function ir({
           height: "100vh",
           // backgroundColor: "#f9fafb",
           position: "relative",
-          "--app-sidebar-width": M ? "0px" : f ? "4rem" : "16rem",
-          "--app-footer-zindex": M && $ ? "40" : "999"
+          "--app-sidebar-width": E ? "0px" : x ? "4rem" : "16rem",
+          "--app-footer-zindex": E && $ ? "40" : "999"
         },
         children: [
-          M && /* @__PURE__ */ A(
+          E && /* @__PURE__ */ A(
             "div",
             {
               style: {
@@ -351,16 +351,16 @@ function ir({
                 pointerEvents: $ ? "auto" : "none",
                 transition: "opacity 0.3s"
               },
-              onClick: () => z(!1)
+              onClick: () => K(!1)
             }
           ),
           /* @__PURE__ */ g(
             "aside",
             {
               style: {
-                width: M ? "16rem" : f ? "4rem" : "16rem",
-                position: M ? "fixed" : "relative",
-                ...M && {
+                width: E ? "16rem" : x ? "4rem" : "16rem",
+                position: E ? "fixed" : "relative",
+                ...E && {
                   inset: 0,
                   zIndex: 50,
                   transform: $ ? "translateX(0)" : "translateX(-100%)"
@@ -370,7 +370,7 @@ function ir({
                 display: "flex",
                 flexDirection: "column",
                 transition: "all 0.3s ease-in-out",
-                flexShrink: M ? void 0 : 0
+                flexShrink: E ? void 0 : 0
               },
               children: [
                 /* @__PURE__ */ g(
@@ -407,7 +407,7 @@ function ir({
                                 }
                               }
                             ),
-                            (!f || $) && /* @__PURE__ */ A(
+                            (!x || $) && /* @__PURE__ */ A(
                               "span",
                               {
                                 style: {
@@ -422,10 +422,10 @@ function ir({
                           ]
                         }
                       ),
-                      M && /* @__PURE__ */ A(
+                      E && /* @__PURE__ */ A(
                         "button",
                         {
-                          onClick: () => z(!1),
+                          onClick: () => K(!1),
                           style: {
                             padding: "0.375rem",
                             borderRadius: "0.5rem",
@@ -458,10 +458,10 @@ function ir({
                     ]
                   }
                 ),
-                !M && /* @__PURE__ */ A(
+                !E && /* @__PURE__ */ A(
                   "button",
                   {
-                    onClick: () => V(!f),
+                    onClick: () => P(!x),
                     style: {
                       position: "absolute",
                       top: "1.5rem",
@@ -491,7 +491,7 @@ function ir({
                         stroke: "currentColor",
                         viewBox: "0 0 24 24",
                         strokeWidth: "2",
-                        children: f ? (
+                        children: x ? (
                           // Icon when collapsed (closed) - sidebar with arrow right
                           /* @__PURE__ */ g(U, { children: [
                             /* @__PURE__ */ A(
@@ -537,9 +537,9 @@ function ir({
                   }
                 ),
                 c && /* @__PURE__ */ A(
-                  We,
+                  ve,
                   {
-                    collapsed: M ? !1 : f,
+                    collapsed: E ? !1 : x,
                     children: c
                   }
                 ),
@@ -553,8 +553,8 @@ function ir({
                       paddingTop: "0.5rem",
                       paddingBottom: "0.5rem"
                     },
-                    children: ye.map((x) => /* @__PURE__ */ g("div", { style: { marginBottom: "1rem" }, children: [
-                      (!f || M) && /* @__PURE__ */ A(
+                    children: fe.map((f) => /* @__PURE__ */ g("div", { style: { marginBottom: "1rem" }, children: [
+                      (!x || E) && /* @__PURE__ */ A(
                         "div",
                         {
                           style: {
@@ -569,29 +569,29 @@ function ir({
                             letterSpacing: "0.05em",
                             transition: "opacity 0.3s"
                           },
-                          children: x.name
+                          children: f.name
                         }
                       ),
-                      /* @__PURE__ */ A("div", { style: { paddingLeft: "0.5rem", paddingRight: "0.5rem", display: "flex", flexDirection: "column", gap: "var(--starasia-ui-spacing-xs)" }, children: x.items.map((S) => {
-                        const j = S.children && S.children.length > 0, AA = E.has(S.id), oA = j ? S.children.some((P) => lA(P.to)) : lA(S.to), MA = _A(
+                      /* @__PURE__ */ A("div", { style: { paddingLeft: "0.5rem", paddingRight: "0.5rem", display: "flex", flexDirection: "column", gap: "var(--starasia-ui-spacing-xs)" }, children: f.items.map((S) => {
+                        const j = S.children && S.children.length > 0, AA = M.has(S.id), oA = j ? S.children.some((V) => lA(V.to)) : lA(S.to), mA = _A(
                           S.badge,
-                          N[S.id]
-                        ), xe = !!MA && f && !M;
+                          F[S.id]
+                        ), Se = !!mA && x && !E;
                         return /* @__PURE__ */ g("div", { "data-menu-active": oA || void 0, children: [
                           /* @__PURE__ */ g(
                             "button",
                             {
                               onClick: () => {
-                                j ? me(S.id) : K(S.to);
+                                j ? xe(S.id) : N(S.to);
                               },
                               style: {
                                 width: "100%",
                                 display: "flex",
                                 alignItems: "center",
-                                justifyContent: f && !M ? "center" : void 0,
+                                justifyContent: x && !E ? "center" : void 0,
                                 gap: "0.75rem",
-                                paddingLeft: f && !M ? "0" : "0.75rem",
-                                paddingRight: f && !M ? "0" : "0.75rem",
+                                paddingLeft: x && !E ? "0" : "0.75rem",
+                                paddingRight: x && !E ? "0" : "0.75rem",
                                 paddingTop: "0.5rem",
                                 paddingBottom: "0.5rem",
                                 borderRadius: "var(--starasia-ui-radii-md)",
@@ -602,12 +602,12 @@ function ir({
                                 // transition: "all 0.2s",
                                 cursor: "pointer"
                               },
-                              title: f && !M ? S.title : void 0,
-                              onMouseEnter: (P) => {
-                                oA || (P.currentTarget.style.backgroundColor = "#f3f4f6");
+                              title: x && !E ? S.title : void 0,
+                              onMouseEnter: (V) => {
+                                oA || (V.currentTarget.style.backgroundColor = "#f3f4f6");
                               },
-                              onMouseLeave: (P) => {
-                                oA || (P.currentTarget.style.backgroundColor = "transparent");
+                              onMouseLeave: (V) => {
+                                oA || (V.currentTarget.style.backgroundColor = "transparent");
                               },
                               children: [
                                 /* @__PURE__ */ g(
@@ -620,7 +620,7 @@ function ir({
                                     },
                                     children: [
                                       /* @__PURE__ */ A(m, { name: S.icon, size: "sm", style: { flexShrink: 0 } }),
-                                      xe && /* @__PURE__ */ A(
+                                      Se && /* @__PURE__ */ A(
                                         "span",
                                         {
                                           "aria-hidden": "true",
@@ -639,7 +639,7 @@ function ir({
                                     ]
                                   }
                                 ),
-                                (!f || M) && /* @__PURE__ */ g(U, { children: [
+                                (!x || E) && /* @__PURE__ */ g(U, { children: [
                                   /* @__PURE__ */ A(
                                     "span",
                                     {
@@ -653,11 +653,11 @@ function ir({
                                       children: S.title
                                     }
                                   ),
-                                  MA && /* @__PURE__ */ A(
-                                    SA,
+                                  mA && /* @__PURE__ */ A(
+                                    DA,
                                     {
-                                      text: String(MA.value),
-                                      variant: MA.variant ?? "info",
+                                      text: String(mA.value),
+                                      variant: mA.variant ?? "info",
                                       size: "xs",
                                       border: !0
                                     }
@@ -690,7 +690,7 @@ function ir({
                               ]
                             }
                           ),
-                          j && (!f || M) && /* @__PURE__ */ A(
+                          j && (!x || E) && /* @__PURE__ */ A(
                             "div",
                             {
                               style: {
@@ -703,15 +703,15 @@ function ir({
                                 opacity: AA ? 1 : 0,
                                 marginTop: AA ? "0.25rem" : "0px"
                               },
-                              children: S.children.map((P) => {
+                              children: S.children.map((V) => {
                                 const NA = _A(
-                                  P.badge,
-                                  N[P.id]
+                                  V.badge,
+                                  F[V.id]
                                 );
                                 return /* @__PURE__ */ g(
                                   "button",
                                   {
-                                    onClick: () => K(P.to),
+                                    onClick: () => N(V.to),
                                     style: {
                                       width: "100%",
                                       display: "flex",
@@ -723,23 +723,23 @@ function ir({
                                       paddingBottom: "0.5rem",
                                       borderRadius: "var(--starasia-ui-radii-md)",
                                       textAlign: "left",
-                                      backgroundColor: lA(P.to) ? "#FFFFFF" : "transparent",
-                                      color: lA(P.to) ? "#292A2E" : "#505258",
+                                      backgroundColor: lA(V.to) ? "#FFFFFF" : "transparent",
+                                      color: lA(V.to) ? "#292A2E" : "#505258",
                                       // transition: "all 0.2s",
                                       cursor: "pointer",
-                                      border: lA(P.to) ? "1px solid rgba(11, 18, 14, 0.1412)" : "1px solid transparent"
+                                      border: lA(V.to) ? "1px solid rgba(11, 18, 14, 0.1412)" : "1px solid transparent"
                                     },
                                     onMouseEnter: (zA) => {
-                                      lA(P.to) || (zA.currentTarget.style.backgroundColor = "#f3f4f6");
+                                      lA(V.to) || (zA.currentTarget.style.backgroundColor = "#f3f4f6");
                                     },
                                     onMouseLeave: (zA) => {
-                                      lA(P.to) || (zA.currentTarget.style.backgroundColor = "transparent");
+                                      lA(V.to) || (zA.currentTarget.style.backgroundColor = "transparent");
                                     },
                                     children: [
                                       /* @__PURE__ */ A(
                                         m,
                                         {
-                                          name: P.icon,
+                                          name: V.icon,
                                           size: "sm",
                                           style: { flexShrink: 0 }
                                         }
@@ -753,11 +753,11 @@ function ir({
                                             whiteSpace: "nowrap",
                                             flex: 1
                                           },
-                                          children: P.title
+                                          children: V.title
                                         }
                                       ),
                                       NA && /* @__PURE__ */ A(
-                                        SA,
+                                        DA,
                                         {
                                           text: String(NA.value),
                                           variant: NA.variant ?? "info",
@@ -767,14 +767,14 @@ function ir({
                                       )
                                     ]
                                   },
-                                  P.id
+                                  V.id
                                 );
                               })
                             }
                           )
                         ] }, S.id);
                       }) })
-                    ] }, x.id))
+                    ] }, f.id))
                   }
                 )
               ]
@@ -797,10 +797,10 @@ function ir({
                 },
                 children: [
                   /* @__PURE__ */ g("div", { style: { display: "flex", alignItems: "center", gap: "1rem" }, children: [
-                    M && /* @__PURE__ */ A(
+                    E && /* @__PURE__ */ A(
                       "button",
                       {
-                        onClick: () => z(!0),
+                        onClick: () => K(!0),
                         style: {
                           padding: "0.375rem",
                           borderRadius: "0.5rem",
@@ -834,7 +834,7 @@ function ir({
                   /* @__PURE__ */ g("div", { style: { display: "flex", alignItems: "center", gap: "0.75rem" }, children: [
                     s,
                     /* @__PURE__ */ g(ce, { position: "bottom-right", children: [
-                      /* @__PURE__ */ A(xA, { children: /* @__PURE__ */ g(
+                      /* @__PURE__ */ A(fA, { children: /* @__PURE__ */ g(
                         "div",
                         {
                           style: {
@@ -917,7 +917,7 @@ function ir({
                             marginTop: "16px"
                           },
                           children: [
-                            /* @__PURE__ */ A(Se, { children: /* @__PURE__ */ g(
+                            /* @__PURE__ */ A(Le, { children: /* @__PURE__ */ g(
                               "div",
                               {
                                 style: {
@@ -979,7 +979,7 @@ function ir({
                                       children: (t == null ? void 0 : t.email) || "unknown"
                                     }
                                   ),
-                                  a && /* @__PURE__ */ A(
+                                  C && /* @__PURE__ */ A(
                                     "p",
                                     {
                                       style: {
@@ -991,18 +991,18 @@ function ir({
                                         overflow: "hidden",
                                         textOverflow: "ellipsis"
                                       },
-                                      children: a
+                                      children: C
                                     }
                                   )
                                 ]
                               }
                             ) }),
                             (d && d.length > 0 || w) && /* @__PURE__ */ g(se, { children: [
-                              d == null ? void 0 : d.map((x, S) => /* @__PURE__ */ A(xA, { children: /* @__PURE__ */ g(
+                              d == null ? void 0 : d.map((f, S) => /* @__PURE__ */ A(fA, { children: /* @__PURE__ */ g(
                                 "button",
                                 {
                                   type: "button",
-                                  onClick: x.onClick,
+                                  onClick: f.onClick,
                                   style: ee,
                                   onMouseEnter: (j) => {
                                     j.currentTarget.style.backgroundColor = "#f3f4f6";
@@ -1011,14 +1011,14 @@ function ir({
                                     j.currentTarget.style.backgroundColor = "transparent";
                                   },
                                   children: [
-                                    /* @__PURE__ */ A(m, { name: x.icon, size: "md" }),
-                                    /* @__PURE__ */ A("span", { children: x.label })
+                                    /* @__PURE__ */ A(m, { name: f.icon, size: "md" }),
+                                    /* @__PURE__ */ A("span", { children: f.label })
                                   ]
                                 }
-                              ) }, `${x.label}-${S}`)),
+                              ) }, `${f.label}-${S}`)),
                               w
                             ] }),
-                            B ?? /* @__PURE__ */ A(be, { children: /* @__PURE__ */ A(xA, { children: /* @__PURE__ */ g(
+                            B ?? /* @__PURE__ */ A(Ge, { children: /* @__PURE__ */ A(fA, { children: /* @__PURE__ */ g(
                               "button",
                               {
                                 type: "button",
@@ -1028,11 +1028,11 @@ function ir({
                                   color: "var(--starasia-ui-utility-danger-default)",
                                   fontWeight: 500
                                 },
-                                onMouseEnter: (x) => {
-                                  x.currentTarget.style.backgroundColor = "#fef2f2";
+                                onMouseEnter: (f) => {
+                                  f.currentTarget.style.backgroundColor = "#fef2f2";
                                 },
-                                onMouseLeave: (x) => {
-                                  x.currentTarget.style.backgroundColor = "transparent";
+                                onMouseLeave: (f) => {
+                                  f.currentTarget.style.backgroundColor = "transparent";
                                 },
                                 children: [
                                   /* @__PURE__ */ A(
@@ -1087,17 +1087,17 @@ function ir({
         children: l
       }
     ),
-    /* @__PURE__ */ g(DA, { isShow: I, onHide: eA, children: [
+    /* @__PURE__ */ g(IA, { isShow: I, onHide: eA, children: [
       /* @__PURE__ */ A(dA, { children: "Confirmation Logout" }),
-      /* @__PURE__ */ A(IA, { children: "Are you sure you want to end the session and exit the page?" }),
-      /* @__PURE__ */ A(GA, { children: /* @__PURE__ */ A(C, { display: "flex", align: "flex-end", justify: "center", children: /* @__PURE__ */ g(T, { direction: "row", gap: "sm", align: "center", children: [
-        /* @__PURE__ */ A(C, { children: /* @__PURE__ */ A(O, { secondary: !0, onClick: eA, children: "Cancel" }) }),
-        /* @__PURE__ */ A(C, { children: /* @__PURE__ */ A(O, { primary: !0, onClick: tA, children: "Yes, Sure" }) })
+      /* @__PURE__ */ A(kA, { children: "Are you sure you want to end the session and exit the page?" }),
+      /* @__PURE__ */ A(GA, { children: /* @__PURE__ */ A(a, { display: "flex", align: "flex-end", justify: "center", children: /* @__PURE__ */ g(T, { direction: "row", gap: "sm", align: "center", children: [
+        /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(O, { secondary: !0, onClick: eA, children: "Cancel" }) }),
+        /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(O, { primary: !0, onClick: tA, children: "Yes, Sure" }) })
       ] }) }) })
     ] })
   ] });
 }
-function ve({
+function Ve({
   isShow: e,
   onHide: i,
   menus: t,
@@ -1108,7 +1108,7 @@ function ve({
     r(l), i();
   };
   return /* @__PURE__ */ A(
-    DA,
+    IA,
     {
       isShow: e,
       onHide: i,
@@ -1118,7 +1118,7 @@ function ve({
         boxShadow: "none",
         border: "none"
       },
-      children: /* @__PURE__ */ A(IA, { children: /* @__PURE__ */ g(
+      children: /* @__PURE__ */ A(kA, { children: /* @__PURE__ */ g(
         "div",
         {
           style: {
@@ -1180,8 +1180,8 @@ function ve({
               }
             ),
             t.map((l) => {
-              var a;
-              const c = o === l.id, s = ((a = l.items[0]) == null ? void 0 : a.icon) ?? "Grid";
+              var C;
+              const c = o === l.id, s = ((C = l.items[0]) == null ? void 0 : C.icon) ?? "Grid";
               return /* @__PURE__ */ g(
                 "button",
                 {
@@ -1246,13 +1246,13 @@ function tr({
   onSelect: e,
   "aria-label": i = "Pilih module"
 } = {}) {
-  const t = ue(), o = vA(), { selectedGroupId: r, setSelectedGroupId: n } = Ie(), [l, c] = b(!1), s = (a) => {
+  const t = ue(), o = vA(), { selectedGroupId: r, setSelectedGroupId: n } = Ie(), [l, c] = L(!1), s = (C) => {
     var d;
-    if (n(a), a !== null) {
-      const w = t.menus.find((k) => k.id === a), B = (d = w == null ? void 0 : w.items[0]) == null ? void 0 : d.to;
+    if (n(C), C !== null) {
+      const w = t.menus.find((D) => D.id === C), B = (d = w == null ? void 0 : w.items[0]) == null ? void 0 : d.to;
       B && o(B);
     }
-    e == null || e(a);
+    e == null || e(C);
   };
   return /* @__PURE__ */ g(U, { children: [
     /* @__PURE__ */ g("div", { style: { position: "relative" }, children: [
@@ -1273,11 +1273,11 @@ function tr({
             cursor: "pointer"
           },
           "aria-label": i,
-          onMouseEnter: (a) => {
-            a.currentTarget.style.backgroundColor = "#f9fafb";
+          onMouseEnter: (C) => {
+            C.currentTarget.style.backgroundColor = "#f9fafb";
           },
-          onMouseLeave: (a) => {
-            a.currentTarget.style.backgroundColor = "transparent";
+          onMouseLeave: (C) => {
+            C.currentTarget.style.backgroundColor = "transparent";
           },
           children: /* @__PURE__ */ A(m, { name: "GridApplication", size: "sm" })
         }
@@ -1299,11 +1299,11 @@ function tr({
       )
     ] }),
     /* @__PURE__ */ A(
-      ve,
+      Ve,
       {
         isShow: l,
         onHide: () => c(!1),
-        menus: t.menus.filter((a) => a.parentGroupId === void 0),
+        menus: t.menus.filter((C) => C.parentGroupId === void 0),
         selectedGroupId: r,
         onSelect: s
       }
@@ -1312,16 +1312,16 @@ function tr({
 }
 const rr = _(
   ({ children: e, coverImage: i, logo: t }) => {
-    const o = X("md"), r = je();
+    const o = X("md"), r = Ne();
     return /* @__PURE__ */ g(
-      C,
+      a,
       {
         direction: o ? "row" : "column",
         width: "width-screen",
         height: "height-screen",
         children: [
           /* @__PURE__ */ A(
-            C,
+            a,
             {
               direction: "row",
               padding: "spacing-12",
@@ -1342,7 +1342,7 @@ const rr = _(
                 }
               },
               children: /* @__PURE__ */ g(
-                C,
+                a,
                 {
                   style: { backgroundColor: "#fff" },
                   width: "width-fit ",
@@ -1360,7 +1360,7 @@ const rr = _(
             }
           ),
           /* @__PURE__ */ A(
-            C,
+            a,
             {
               display: "flex",
               flex: "1",
@@ -1384,7 +1384,7 @@ const rr = _(
                 }
               },
               children: /* @__PURE__ */ A(
-                C,
+                a,
                 {
                   direction: "column",
                   padding: "spacing-6",
@@ -1398,7 +1398,7 @@ const rr = _(
       }
     );
   }
-), Pe = (e, i) => {
+), Xe = (e, i) => {
   const t = [];
   if (i === 0)
     return t.push(e), t;
@@ -1407,7 +1407,7 @@ const rr = _(
     t.push(r);
   }
   return t;
-}, Ve = _(
+}, $e = _(
   ({
     value: e,
     label: i,
@@ -1432,15 +1432,15 @@ const rr = _(
         verticalAlign: n
       }),
       [r]
-    ), s = () => typeof i == "string" ? /* @__PURE__ */ A(Q, { fontWeight: "medium", color: "gray-500", children: i }) : i, a = () => typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ A(Q, { color: "text", fontWeight: "medium", children: e }) : e;
+    ), s = () => typeof i == "string" ? /* @__PURE__ */ A(Q, { fontWeight: "medium", color: "gray-500", children: i }) : i, C = () => typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ A(Q, { color: "text", fontWeight: "medium", children: e }) : e;
     return /* @__PURE__ */ g(hA, { children: [
       /* @__PURE__ */ A(BA, { style: l, width: o, children: s() }),
       t ? /* @__PURE__ */ A(BA, { style: c, width: 24, children: /* @__PURE__ */ A(Q, { fontWeight: "medium", color: "gray-500", children: ":" }) }) : null,
-      /* @__PURE__ */ A(BA, { style: l, children: a() })
+      /* @__PURE__ */ A(BA, { style: l, children: C() })
     ] });
   }
-), Xe = _(({ fields: e, separator: i, labelWidth: t }) => /* @__PURE__ */ A(ae, { children: e.map((o, r) => /* @__PURE__ */ A(
-  Ve,
+), _e = _(({ fields: e, separator: i, labelWidth: t }) => /* @__PURE__ */ A(ae, { children: e.map((o, r) => /* @__PURE__ */ A(
+  $e,
   {
     separator: i,
     labelWidth: t,
@@ -1457,7 +1457,7 @@ const rr = _(
     labelWidth: r = 150
   }) => {
     const n = cA(
-      () => Pe(o, e),
+      () => Xe(o, e),
       [o, e]
     ), l = n.length > 2, c = () => {
       switch (i) {
@@ -1474,7 +1474,7 @@ const rr = _(
       }
     };
     return /* @__PURE__ */ A(
-      C,
+      a,
       {
         gap: l ? void 0 : "lg",
         direction: "row",
@@ -1485,14 +1485,14 @@ const rr = _(
         paddingRight: "xl",
         paddingBottom: l ? "xs" : "lg",
         bg: "accent-dark-tertiary",
-        children: n.map((s, a) => /* @__PURE__ */ A(
-          C,
+        children: n.map((s, C) => /* @__PURE__ */ A(
+          a,
           {
             flex: l ? void 0 : "1",
             width: l ? c() : void 0,
             marginBottom: l ? "lg" : void 0,
             children: /* @__PURE__ */ A(
-              Xe,
+              _e,
               {
                 labelWidth: r,
                 fields: s,
@@ -1500,7 +1500,7 @@ const rr = _(
               }
             )
           },
-          a
+          C
         ))
       }
     );
@@ -1537,16 +1537,16 @@ const rr = _(
         return /* @__PURE__ */ A(O, { primary: !0, onClick: o, children: n });
     }
   };
-  return /* @__PURE__ */ g(DA, { isShow: r, onHide: t, children: [
+  return /* @__PURE__ */ g(IA, { isShow: r, onHide: t, children: [
     c(),
-    /* @__PURE__ */ A(IA, { children: /* @__PURE__ */ A(Q, { children: i }) }),
-    /* @__PURE__ */ A(GA, { children: /* @__PURE__ */ g(C, { justify: "flex-end", direction: "row", gap: "sm", children: [
+    /* @__PURE__ */ A(kA, { children: /* @__PURE__ */ A(Q, { children: i }) }),
+    /* @__PURE__ */ A(GA, { children: /* @__PURE__ */ g(a, { justify: "flex-end", direction: "row", gap: "sm", children: [
       /* @__PURE__ */ A(O, { secondary: !0, onClick: t, children: "Cancel" }),
       s()
     ] }) })
   ] });
-}, $e = ({ children: e, ...i }) => /* @__PURE__ */ A(
-  C,
+}, Ai = ({ children: e, ...i }) => /* @__PURE__ */ A(
+  a,
   {
     role: "button",
     cursor: "pointer",
@@ -1556,10 +1556,10 @@ const rr = _(
     ...i,
     children: e
   }
-), wA = _($e), _e = ({ backButton: e }) => {
-  const [i, t] = b(!1), o = (e == null ? void 0 : e.iconColor) ?? "var(--starasia-ui-color-gray-500)", r = (e == null ? void 0 : e.textColor) ?? "rgba(120, 134, 127, 1)", n = (e == null ? void 0 : e.hoverIconColor) ?? "var(--starasia-ui-color-gray-700)", l = (e == null ? void 0 : e.hoverTextColor) ?? "rgba(60, 67, 64, 1)";
+), wA = _(Ai), ei = ({ backButton: e }) => {
+  const [i, t] = L(!1), o = (e == null ? void 0 : e.iconColor) ?? "var(--starasia-ui-color-gray-500)", r = (e == null ? void 0 : e.textColor) ?? "rgba(120, 134, 127, 1)", n = (e == null ? void 0 : e.hoverIconColor) ?? "var(--starasia-ui-color-gray-700)", l = (e == null ? void 0 : e.hoverTextColor) ?? "rgba(60, 67, 64, 1)";
   return /* @__PURE__ */ g(
-    C,
+    a,
     {
       direction: "row",
       gap: "xs",
@@ -1594,7 +1594,7 @@ const rr = _(
       ]
     }
   );
-}, Ai = ({
+}, ii = ({
   backButton: e,
   title: i,
   titleTag: t,
@@ -1605,37 +1605,37 @@ const rr = _(
   containerProps: c,
   headerProps: s
 }) => {
-  const a = X("lg"), d = vA(), w = kA(), B = e == null ? void 0 : e.show, k = () => {
+  const C = X("lg"), d = vA(), w = EA(), B = e == null ? void 0 : e.show, D = () => {
     if (typeof (e == null ? void 0 : e.onClick) == "function") {
       e.onClick();
       return;
     }
     d(-1, { replace: !0 });
-  }, L = () => n ? de(n) ? n : /* @__PURE__ */ A(C, { direction: "row", gap: "lg", children: n.map(
-    ({ title: H, icon: v, buttonProps: M, onClick: I }, R) => !H && !v ? null : /* @__PURE__ */ A(
+  }, b = () => n ? de(n) ? n : /* @__PURE__ */ A(a, { direction: "row", gap: "lg", children: n.map(
+    ({ title: Z, icon: v, buttonProps: E, onClick: I }, W) => !Z && !v ? null : /* @__PURE__ */ A(
       O,
       {
-        fullWidth: !a,
+        fullWidth: !C,
         iconLeft: v ? /* @__PURE__ */ A(m, { name: v, size: "md" }) : void 0,
         onClick: I,
-        ...M,
-        children: H
+        ...E,
+        children: Z
       },
-      `action-${R}`
+      `action-${W}`
     )
   ) }) : null, h = () => {
-    const H = /* @__PURE__ */ A(_e, { backButton: e });
-    return e != null && e.navigateTo ? /* @__PURE__ */ A(C, { direction: "row", children: /* @__PURE__ */ A(
-      Ke,
+    const Z = /* @__PURE__ */ A(ei, { backButton: e });
+    return e != null && e.navigateTo ? /* @__PURE__ */ A(a, { direction: "row", children: /* @__PURE__ */ A(
+      He,
       {
         to: e.navigateTo,
         replace: !0,
         style: { textDecoration: "none" },
-        children: H
+        children: Z
       }
-    ) }) : /* @__PURE__ */ A(C, { direction: "row", children: /* @__PURE__ */ A(wA, { onClick: k, children: H }) });
-  }, N = () => /* @__PURE__ */ g(
-    C,
+    ) }) : /* @__PURE__ */ A(a, { direction: "row", children: /* @__PURE__ */ A(wA, { onClick: D, children: Z }) });
+  }, F = () => /* @__PURE__ */ g(
+    a,
     {
       gap: "xs",
       paddingTop: s == null ? void 0 : s.paddingTop,
@@ -1644,26 +1644,26 @@ const rr = _(
       children: [
         B && h(),
         /* @__PURE__ */ g(
-          C,
+          a,
           {
-            direction: a ? "row" : "column",
+            direction: C ? "row" : "column",
             gap: "lg",
             justify: "space-between",
             align: "center",
             children: [
-              typeof i == "string" ? /* @__PURE__ */ g(C, { direction: "row", gap: "lg", align: "center", children: [
+              typeof i == "string" ? /* @__PURE__ */ g(a, { direction: "row", gap: "lg", align: "center", children: [
                 /* @__PURE__ */ A(Q, { variant: "h2", fontWeight: "semibold", fontFamily: "Poppins", children: i }),
-                t && /* @__PURE__ */ A(SA, { border: !0, size: "lg", text: t, ...l })
+                t && /* @__PURE__ */ A(DA, { border: !0, size: "lg", text: t, ...l })
               ] }) : i,
-              L()
+              b()
             ]
           }
         )
       ]
     }
-  ), K = () => o;
+  ), N = () => o;
   return /* @__PURE__ */ g(
-    C,
+    a,
     {
       gap: "md",
       variant: "main",
@@ -1674,13 +1674,13 @@ const rr = _(
         animation: "pageLayoutEnter 320ms cubic-bezier(0.16, 1, 0.3, 1) backwards"
       },
       children: [
-        r && N(),
-        K()
+        r && F(),
+        N()
       ]
     },
     w.pathname
   );
-}, lr = _(Ai), ei = {
+}, lr = _(ii), ti = {
   icon: "Cross",
   title: ""
 }, FA = RA(
@@ -1691,9 +1691,9 @@ const rr = _(
     style: o,
     children: r,
     paddingHorizontal: n = !0,
-    closeButton: l = ei
+    closeButton: l = ti
   }, c) => /* @__PURE__ */ A(U, { children: /* @__PURE__ */ A(
-    fe,
+    be,
     {
       blur: !1,
       isShow: i,
@@ -1711,9 +1711,9 @@ const rr = _(
         // new style
         ...o
       },
-      children: /* @__PURE__ */ g(C, { padding: "lg", children: [
+      children: /* @__PURE__ */ g(a, { padding: "lg", children: [
         l ? /* @__PURE__ */ g(
-          C,
+          a,
           {
             direction: "row",
             align: "center",
@@ -1749,13 +1749,12 @@ const rr = _(
       ] })
     }
   ) })
-), ii = _(
+), ke = _(
   ({ children: e, borderBottom: i = !0, padding: t = !0 }) => {
     const o = X("lg");
     return /* @__PURE__ */ A(
-      C,
+      a,
       {
-        id: "asdasd",
         padding: t ? "md" : "spacing-0",
         paddingLeft: t ? o ? "lg" : "md" : "spacing-0",
         paddingRight: t ? o ? "lg" : "md" : "spacing-0",
@@ -1766,26 +1765,11 @@ const rr = _(
       }
     );
   }
-), ti = _(
-  ({ children: e, ...i }) => {
-    const t = X("lg");
-    return /* @__PURE__ */ A(
-      C,
-      {
-        padding: "md",
-        paddingLeft: t ? "lg" : "md",
-        paddingRight: t ? "lg" : "md",
-        gap: "md",
-        ...i,
-        children: e
-      }
-    );
-  }
-), ri = _(
+), Ee = _(
   ({ children: e, borderTop: i = !0, padding: t = !0 }) => {
     const o = X("lg");
     return /* @__PURE__ */ A(
-      C,
+      a,
       {
         padding: t ? "md" : "spacing-0",
         paddingLeft: t ? o ? "lg" : "md" : "spacing-0",
@@ -1797,6 +1781,21 @@ const rr = _(
       }
     );
   }
+), ri = _(
+  ({ children: e, ...i }) => {
+    const t = X("lg");
+    return /* @__PURE__ */ A(
+      a,
+      {
+        padding: "md",
+        paddingLeft: t ? "lg" : "md",
+        paddingRight: t ? "lg" : "md",
+        gap: "md",
+        ...i,
+        children: e
+      }
+    );
+  }
 ), cr = _(
   ({
     children: e,
@@ -1808,16 +1807,16 @@ const rr = _(
     actionContainer: l,
     containerProps: c,
     bodyProps: s,
-    headerProps: a = { borderBottom: !0 },
+    headerProps: C = { borderBottom: !0 },
     footerProps: d = { borderTop: !0 },
     variantTag: w = "info"
   }) => {
-    const B = X("lg"), k = () => t ? /* @__PURE__ */ g(C, { direction: "row", gap: "sm", align: "center", children: [
+    const B = X("lg"), D = () => t ? /* @__PURE__ */ g(a, { direction: "row", gap: "sm", align: "center", children: [
       /* @__PURE__ */ A(Q, { fontWeight: "medium", children: i }),
-      /* @__PURE__ */ A(SA, { border: !0, text: t, variant: w })
+      /* @__PURE__ */ A(DA, { border: !0, text: t, variant: w })
     ] }) : /* @__PURE__ */ A(Q, { fontWeight: "medium", children: i });
     return /* @__PURE__ */ g(
-      C,
+      a,
       {
         bg: "white",
         borderRadius: "rounded-xs",
@@ -1827,17 +1826,17 @@ const rr = _(
         borderColor: "border-base",
         ...c,
         children: [
-          r !== null && !!(r || i || o) ? /* @__PURE__ */ A(ii, { ...a, children: r || /* @__PURE__ */ g(
-            C,
+          r !== null && !!(r || i || o) ? /* @__PURE__ */ A(ke, { ...C, children: r || /* @__PURE__ */ g(
+            a,
             {
               direction: "row",
               justify: "space-between",
               align: "flex-start",
               gap: "lg",
               children: [
-                /* @__PURE__ */ A(C, { children: i ? k() : null }),
+                /* @__PURE__ */ A(a, { children: i ? D() : null }),
                 /* @__PURE__ */ A(
-                  C,
+                  a,
                   {
                     style: B ? { width: "100%", maxWidth: "19.313rem" } : { flex: 1 },
                     ...l,
@@ -1847,14 +1846,14 @@ const rr = _(
               ]
             }
           ) }) : null,
-          /* @__PURE__ */ A(ti, { ...s, children: e }),
-          n ? /* @__PURE__ */ A(ri, { ...d, children: n }) : null
+          /* @__PURE__ */ A(ri, { ...s, children: e }),
+          n ? /* @__PURE__ */ A(Ee, { ...d, children: n }) : null
         ]
       }
     );
   }
 ), oi = "#E6E9FB", ni = ({ children: e, onClick: i }) => {
-  const [t, o] = b("");
+  const [t, o] = L("");
   return /* @__PURE__ */ A(
     wA,
     {
@@ -1886,7 +1885,7 @@ const rr = _(
   iconProps: c,
   variant: s = "default"
 }) => {
-  const a = cA(
+  const C = cA(
     () => ({
       zIndex: 10,
       width: "150px",
@@ -1895,8 +1894,8 @@ const rr = _(
     [r]
   );
   return /* @__PURE__ */ g(ce, { position: n, style: t, children: [
-    /* @__PURE__ */ A(xA, { style: o, children: /* @__PURE__ */ A(O, { size: "sm", secondary: !0, ...l, children: /* @__PURE__ */ A(m, { name: e, ...c }) }) }),
-    /* @__PURE__ */ A(ge, { style: a, children: i.map((d, w) => s === "outline-button" ? /* @__PURE__ */ A(se, { children: /* @__PURE__ */ g(
+    /* @__PURE__ */ A(fA, { style: o, children: /* @__PURE__ */ A(O, { size: "sm", secondary: !0, ...l, children: /* @__PURE__ */ A(m, { name: e, ...c }) }) }),
+    /* @__PURE__ */ A(ge, { style: C, children: i.map((d, w) => s === "outline-button" ? /* @__PURE__ */ A(se, { children: /* @__PURE__ */ g(
       O,
       {
         size: "sm",
@@ -1922,11 +1921,11 @@ const rr = _(
       d.id || w
     )) })
   ] });
-}, gr = _(ci), ke = aA.memo(({ text: e, onClose: i }) => {
+}, gr = _(ci), Me = aA.memo(({ text: e, onClose: i }) => {
   var o, r;
   const t = WA();
   return /* @__PURE__ */ g(
-    C,
+    a,
     {
       direction: "row",
       bg: "blue-50",
@@ -1941,7 +1940,7 @@ const rr = _(
       align: "center",
       display: "flex",
       children: [
-        /* @__PURE__ */ A(C, { paddingLeft: "sm", flex: "1", children: /* @__PURE__ */ A(Q, { children: e }) }),
+        /* @__PURE__ */ A(a, { paddingLeft: "sm", flex: "1", children: /* @__PURE__ */ A(Q, { children: e }) }),
         /* @__PURE__ */ A(
           wA,
           {
@@ -1964,13 +1963,13 @@ const rr = _(
     }
   );
 }), gi = aA.memo(({ items: e = [], onClose: i }) => /* @__PURE__ */ A(
-  C,
+  a,
   {
     direction: "row",
     gap: "sm",
     flexWrap: "nowrap",
     style: { minWidth: "max-content" },
-    children: e == null ? void 0 : e.map((t, o) => t.valueText ? /* @__PURE__ */ A(ke, { text: t.valueText, onClose: () => i == null ? void 0 : i(t) }, o) : null)
+    children: e == null ? void 0 : e.map((t, o) => t.valueText ? /* @__PURE__ */ A(Me, { text: t.valueText, onClose: () => i == null ? void 0 : i(t) }, o) : null)
   }
 )), ie = (e) => JSON.stringify(e), si = (e) => {
   const i = e;
@@ -1993,17 +1992,17 @@ const rr = _(
     }
   let t = new Date(e);
   return t = typeof e != "object" ? void 0 : t, t;
-}, Ci = aA.memo(({ title: e, resetButton: i }) => /* @__PURE__ */ g(C, { direction: "row", justify: "space-between", marginBottom: "md", children: [
-  /* @__PURE__ */ A(C, { children: /* @__PURE__ */ A(Q, { fontWeight: "bold", children: e }) }),
-  /* @__PURE__ */ A(C, { children: /* @__PURE__ */ A(wA, { onClick: i == null ? void 0 : i.onClick, children: /* @__PURE__ */ A(Q, { fontWeight: "bold", color: "error", children: (i == null ? void 0 : i.label) || "Reset" }) }) })
+}, Ci = aA.memo(({ title: e, resetButton: i }) => /* @__PURE__ */ g(a, { direction: "row", justify: "space-between", marginBottom: "md", children: [
+  /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(Q, { fontWeight: "bold", children: e }) }),
+  /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(wA, { onClick: i == null ? void 0 : i.onClick, children: /* @__PURE__ */ A(Q, { fontWeight: "bold", color: "error", children: (i == null ? void 0 : i.label) || "Reset" }) }) })
 ] })), Bi = aA.memo(
   ({ value: e, options: i = [], onChange: t, multiple: o }) => {
     const r = (e == null ? void 0 : e.map((c) => c.value)) || [], n = (i == null ? void 0 : i.filter((c) => r.includes(c.value))) || [], l = (c) => {
       const s = [...n];
-      let a = [];
-      o ? a = r.includes(c.value) ? s.filter((d) => d.value !== c.value) : [...s, c] : a = [c], t == null || t(a);
+      let C = [];
+      o ? C = r.includes(c.value) ? s.filter((d) => d.value !== c.value) : [...s, c] : C = [c], t == null || t(C);
     };
-    return /* @__PURE__ */ A(C, { direction: "row", gap: "sm", flexWrap: "wrap", children: i == null ? void 0 : i.map((c, s) => /* @__PURE__ */ A(
+    return /* @__PURE__ */ A(a, { direction: "row", gap: "sm", flexWrap: "wrap", children: i == null ? void 0 : i.map((c, s) => /* @__PURE__ */ A(
       O,
       {
         ...r.includes(c.value) ? { primary: !0 } : { secondary: !0 },
@@ -2013,7 +2012,7 @@ const rr = _(
       s
     )) });
   }
-), Ee = aA.memo(
+), me = aA.memo(
   RA(
     ({
       label: e,
@@ -2025,22 +2024,22 @@ const rr = _(
       relationLabel: l,
       name: c,
       multiple: s,
-      searchable: a,
+      searchable: C,
       onSearch: d,
       value: w,
       dateFilter: B,
-      enableInputDate: k,
-      withSearchParam: L,
+      enableInputDate: D,
+      withSearchParam: b,
       // disabled,
       rangedDate: h,
-      disabled: N,
-      inputTextType: K = "text",
-      min: H,
+      disabled: F,
+      inputTextType: N = "text",
+      min: Z,
       max: v
-    }, M) => {
+    }, E) => {
       const I = r == null ? void 0 : r.length;
-      let R;
-      const f = () => {
+      let W;
+      const x = () => {
         switch (i) {
           case "dropdown":
             return /* @__PURE__ */ A(
@@ -2048,9 +2047,9 @@ const rr = _(
               {
                 onSearch: d,
                 multiSelect: s,
-                searchAble: a,
+                searchAble: C,
                 placeholder: n,
-                onChange: (z) => o == null ? void 0 : o({ value: z, name: c, type: i }),
+                onChange: (K) => o == null ? void 0 : o({ value: K, name: c, type: i }),
                 dropdownLists: t || [],
                 defaultValue: w || te()
               }
@@ -2059,12 +2058,12 @@ const rr = _(
             return /* @__PURE__ */ A(
               ne,
               {
-                input: k,
+                input: D,
                 filter: B,
-                value: ai(w || R, h),
-                onChange: (z) => o == null ? void 0 : o({ value: z, name: c, type: i }),
+                value: ai(w || W, h),
+                onChange: (K) => o == null ? void 0 : o({ value: K, name: c, type: i }),
                 rangedDate: h,
-                ref: M
+                ref: E
               }
             );
           case "select-button":
@@ -2073,7 +2072,7 @@ const rr = _(
               {
                 multiple: s,
                 value: w || te(),
-                onChange: (z) => o == null ? void 0 : o({ value: z, name: c, type: i }),
+                onChange: (K) => o == null ? void 0 : o({ value: K, name: c, type: i }),
                 options: t
               }
             );
@@ -2081,53 +2080,53 @@ const rr = _(
             return /* @__PURE__ */ A(
               pA,
               {
-                onChange: ({ target: { value: z } }) => o == null ? void 0 : o({ value: z, name: c, type: i }),
-                value: w || R,
+                onChange: ({ target: { value: K } }) => o == null ? void 0 : o({ value: K, name: c, type: i }),
+                value: w || W,
                 placeholder: n,
-                disabled: N,
-                type: K,
+                disabled: F,
+                type: N,
                 name: c,
-                ...K === "number" && { min: H, max: v },
-                ...(!K || K === "text") && {
-                  minLength: H,
+                ...N === "number" && { min: Z, max: v },
+                ...(!N || N === "text") && {
+                  minLength: Z,
                   maxLength: v
                 }
               }
             );
           case "checkbox":
-            return /* @__PURE__ */ A(C, { children: t == null ? void 0 : t.map((z) => {
-              const E = Array.isArray(w) && w.includes(z.value);
+            return /* @__PURE__ */ A(a, { children: t == null ? void 0 : t.map((K) => {
+              const M = Array.isArray(w) && w.includes(K.value);
               return /* @__PURE__ */ A(
                 bA,
                 {
-                  label: z.label,
-                  checked: E,
+                  label: K.label,
+                  checked: M,
                   sizes: "sm",
                   onChange: (G) => {
-                    const D = Array.isArray(w) ? w : [], u = G.target.checked ? [...D, z.value] : D.filter((p) => p !== z.value);
+                    const k = Array.isArray(w) ? w : [], u = G.target.checked ? [...k, K.value] : k.filter((p) => p !== K.value);
                     o == null || o({ value: u, name: c, type: i });
                   }
                 },
-                z.value
+                K.value
               );
             }) });
           default:
             return null;
         }
       };
-      return I ? /* @__PURE__ */ A(C, { marginBottom: "lg", children: r == null ? void 0 : r.map((z, E) => /* @__PURE__ */ A(
-        Ee,
+      return I ? /* @__PURE__ */ A(a, { marginBottom: "lg", children: r == null ? void 0 : r.map((K, M) => /* @__PURE__ */ A(
+        me,
         {
-          ref: M,
+          ref: E,
           onChange: o,
-          ...z,
-          withSearchParam: L
+          ...K,
+          withSearchParam: b
         },
-        E
-      )) }) : /* @__PURE__ */ g(C, { marginBottom: "sm", children: [
+        M
+      )) }) : /* @__PURE__ */ g(a, { marginBottom: "sm", children: [
         l ? /* @__PURE__ */ A(Q, { color: "text-muted", marginBottom: "sm", fontWeight: "medium", children: l }) : null,
         e ? /* @__PURE__ */ A(Q, { marginBottom: "sm", fontWeight: "medium", children: e }) : null,
-        /* @__PURE__ */ A(C, { children: f() })
+        /* @__PURE__ */ A(a, { children: x() })
       ] });
     }
   )
@@ -2141,9 +2140,9 @@ const rr = _(
     onHide: n,
     resetting: l
   }) => {
-    const [c, s] = b(!1), a = iA(null), d = ({ value: B, name: k, type: L }) => {
+    const [c, s] = L(!1), C = iA(null), d = ({ value: B, name: D, type: b }) => {
       if (o)
-        switch (L) {
+        switch (b) {
           case "date":
             si(B);
             break;
@@ -2157,7 +2156,7 @@ const rr = _(
     }, w = () => {
       s(!0), r == null || r(!0);
     };
-    return W(() => {
+    return R(() => {
       (c || l) && (s(!1), r == null || r(!1));
     }, [c, l]), /* @__PURE__ */ A(U, { children: /* @__PURE__ */ g(
       FA,
@@ -2167,19 +2166,19 @@ const rr = _(
         show: e || !1,
         onHide: n || (() => {
         }),
-        ref: a,
+        ref: C,
         children: [
           /* @__PURE__ */ A(Ci, { title: i, resetButton: { onClick: w } }),
-          c || l ? null : /* @__PURE__ */ A(C, { children: t == null ? void 0 : t.map((B, k) => /* @__PURE__ */ A(
-            Ee,
+          c || l ? null : /* @__PURE__ */ A(a, { children: t == null ? void 0 : t.map((B, D) => /* @__PURE__ */ A(
+            me,
             {
-              borderBottom: k !== t.length - 1,
+              borderBottom: D !== t.length - 1,
               onChange: d,
               withSearchParam: o,
               ...B,
-              ref: a
+              ref: C
             },
-            k
+            D
           )) })
         ]
       }
@@ -2220,7 +2219,7 @@ const rr = _(
 function sr(e) {
   return e.split(" ").map((i) => i[0]).join("").slice(0, 2).toUpperCase();
 }
-const fA = (e) => {
+const SA = (e) => {
   const i = {
     day: "2-digit",
     month: "short",
@@ -2396,18 +2395,18 @@ const xr = (e) => {
   }), t;
 }, Sr = (e) => {
   var v;
-  const i = cA(() => ({ ...Ii, ...e }), [e]), [t, o] = b(!1), [r, n] = b(!1), [l] = b(void 0), c = () => n(!0), s = () => n(!1), a = r ? s : c, d = () => {
+  const i = cA(() => ({ ...Ii, ...e }), [e]), [t, o] = L(!1), [r, n] = L(!1), [l] = L(void 0), c = () => n(!0), s = () => n(!1), C = r ? s : c, d = () => {
     o(!0);
-  }, w = (M) => {
-    o(M);
-  }, B = l ? ki(l) : void 0, k = !!(B && ((v = Object.values(B)) == null ? void 0 : v.length) > 0), L = () => B ? Object.keys(B).map((M) => {
-    var z, E, G;
-    const I = UA(M, i.fields), R = [];
-    let f = "";
-    const V = (z = I == null ? void 0 : I.childrenKey) == null ? void 0 : z.length, $ = I == null ? void 0 : I.parentKey;
-    switch (V && ((E = I == null ? void 0 : I.childrenKey) == null || E.forEach((D) => {
-      const u = UA(D, i.fields);
-      u && R.push({
+  }, w = (E) => {
+    o(E);
+  }, B = l ? ki(l) : void 0, D = !!(B && ((v = Object.values(B)) == null ? void 0 : v.length) > 0), b = () => B ? Object.keys(B).map((E) => {
+    var K, M, G;
+    const I = UA(E, i.fields), W = [];
+    let x = "";
+    const P = (K = I == null ? void 0 : I.childrenKey) == null ? void 0 : K.length, $ = I == null ? void 0 : I.parentKey;
+    switch (P && ((M = I == null ? void 0 : I.childrenKey) == null || M.forEach((k) => {
+      const u = UA(k, i.fields);
+      u && W.push({
         name: u == null ? void 0 : u.name,
         label: u == null ? void 0 : u.label,
         value: B[u == null ? void 0 : u.name]
@@ -2415,63 +2414,63 @@ const xr = (e) => {
     })), I == null ? void 0 : I.type) {
       case "dropdown":
       case "select-button":
-        const D = B[M] && typeof B[M] != "string" ? B[M] : [], u = (D == null ? void 0 : D.length) > 0 ? (G = D.map((y) => y.label)) == null ? void 0 : G.join(",") : B[M];
-        f = `${I == null ? void 0 : I.label}: ${u}`;
+        const k = B[E] && typeof B[E] != "string" ? B[E] : [], u = (k == null ? void 0 : k.length) > 0 ? (G = k.map((y) => y.label)) == null ? void 0 : G.join(",") : B[E];
+        x = `${I == null ? void 0 : I.label}: ${u}`;
         break;
       case "checkbox":
-        const q = (Array.isArray(B[M]) ? B[M] : []).map(
+        const q = (Array.isArray(B[E]) ? B[E] : []).map(
           (y) => {
             var eA, tA;
             return ((tA = (eA = I == null ? void 0 : I.options) == null ? void 0 : eA.find((QA) => QA.value === y)) == null ? void 0 : tA.label) || y;
           }
         ).join(", ");
-        f = `${I == null ? void 0 : I.label}: ${q}`;
+        x = `${I == null ? void 0 : I.label}: ${q}`;
         break;
       case "date":
         if (I.rangedDate) {
-          const y = B[M], eA = (I == null ? void 0 : I.dateValueFormatText) === "indonesian" ? fA(new Date(y == null ? void 0 : y.from)) : y == null ? void 0 : y.from, tA = (I == null ? void 0 : I.dateValueFormatText) === "indonesian" ? fA(new Date(y == null ? void 0 : y.to)) : y == null ? void 0 : y.to;
-          f = `${I == null ? void 0 : I.label}: ${eA || ""} ~ ${tA || ""}`;
+          const y = B[E], eA = (I == null ? void 0 : I.dateValueFormatText) === "indonesian" ? SA(new Date(y == null ? void 0 : y.from)) : y == null ? void 0 : y.from, tA = (I == null ? void 0 : I.dateValueFormatText) === "indonesian" ? SA(new Date(y == null ? void 0 : y.to)) : y == null ? void 0 : y.to;
+          x = `${I == null ? void 0 : I.label}: ${eA || ""} ~ ${tA || ""}`;
           break;
         }
-        const F = (I == null ? void 0 : I.dateValueFormatText) === "indonesian" ? fA(new Date(B[M])) : B[M];
-        f = `${I == null ? void 0 : I.label}: ${F || ""}`;
+        const z = (I == null ? void 0 : I.dateValueFormatText) === "indonesian" ? SA(new Date(B[E])) : B[E];
+        x = `${I == null ? void 0 : I.label}: ${z || ""}`;
         break;
       default:
-        f = `${I == null ? void 0 : I.label}: ${B[M]}`;
+        x = `${I == null ? void 0 : I.label}: ${B[E]}`;
         break;
     }
-    if (V && R.length > 0) {
-      let D = R.map((u) => {
+    if (P && W.length > 0) {
+      let k = W.map((u) => {
         var p, q;
-        return u != null && u.value && typeof u.value != "string" ? (q = (p = u == null ? void 0 : u.value) == null ? void 0 : p.map((F) => F == null ? void 0 : F.label)) == null ? void 0 : q.join(",") : u.value;
+        return u != null && u.value && typeof u.value != "string" ? (q = (p = u == null ? void 0 : u.value) == null ? void 0 : p.map((z) => z == null ? void 0 : z.label)) == null ? void 0 : q.join(",") : u.value;
       });
-      D = D.filter(
+      k = k.filter(
         (u) => typeof u < "u" && u !== "" && u !== null
-      ), D && D.length > 0 && (f = `${f} ${I.relationLabelChip || "by"} ${D}`);
+      ), k && k.length > 0 && (x = `${x} ${I.relationLabelChip || "by"} ${k}`);
     }
-    return $ && (f = ""), {
+    return $ && (x = ""), {
       name: I == null ? void 0 : I.name,
       label: I == null ? void 0 : I.label,
-      value: B[M],
-      valueText: f,
-      children: R
+      value: B[E],
+      valueText: x,
+      children: W
     };
-  }) : [], h = (M) => {
-    M != null && M.name && o(!0);
-  }, N = L();
+  }) : [], h = (E) => {
+    E != null && E.name && o(!0);
+  }, F = b();
   return {
     value: B,
     open: c,
     close: s,
-    toggle: a,
+    toggle: C,
     reset: d,
-    chips: N,
+    chips: F,
     toggleConfig: {
-      active: k,
-      onClick: a
+      active: D,
+      onClick: C
     },
     chipsConfig: {
-      items: N,
+      items: F,
       onClose: h
     },
     config: {
@@ -2486,7 +2485,7 @@ const xr = (e) => {
   Container: wi,
   Toggle: di,
   Chips: gi,
-  Chip: ke
+  Chip: Me
 }, Ei = (e) => /* @__PURE__ */ A(Q, { variant: "h1", children: e.children, ...e.props }), Mi = (e) => /* @__PURE__ */ A(Q, { variant: "h2", children: e.children, ...e.props }), mi = (e) => /* @__PURE__ */ A(Q, { variant: "h3", children: e.children, ...e.props }), yi = (e) => /* @__PURE__ */ A(Q, { variant: "h4", children: e.children, ...e.props }), xi = (e) => /* @__PURE__ */ A(Q, { variant: "h5", children: e.children, ...e.props }), fi = (e) => /* @__PURE__ */ A(Q, { variant: "h6", children: e.children, ...e.props }), Si = (e) => /* @__PURE__ */ A(Q, { variant: "sub-h1", children: e.children, ...e.props }), bi = (e) => /* @__PURE__ */ A(Q, { variant: "sub-h2", children: e.children, ...e.props }), Li = (e) => /* @__PURE__ */ A(Q, { variant: "sub-h3", children: e.children, ...e.props }), Gi = (e) => /* @__PURE__ */ A(Q, { variant: "body-1", children: e.children, ...e.props }), Oi = (e) => /* @__PURE__ */ A(Q, { variant: "body-2", children: e.children, ...e.props }), Yi = (e) => /* @__PURE__ */ A(Q, { variant: "body-3", children: e.children, ...e.props }), J = {
   H1: Ei,
   H2: Mi,
@@ -2501,7 +2500,7 @@ const xr = (e) => {
   Body2: Oi,
   Body3: Yi
 }, PA = () => {
-  const [e, i] = jA(), t = YA(e.toString()), o = Qe(), r = kA(), n = o.id;
+  const [e, i] = jA(), t = YA(e.toString()), o = Qe(), r = EA(), n = o.id;
   return {
     // query params
     setSearchParams: i,
@@ -2530,46 +2529,46 @@ const xr = (e) => {
   pageKey: s = "page"
 }) => {
   if (o) {
-    let a;
+    let C;
     switch (t) {
       case "search":
-        a = zi(e);
+        C = zi(e);
         break;
       case "dropdown":
       case "dropdown-multiple":
-        a = pi(e);
+        C = pi(e);
         break;
       case "radio":
-        a = ji(e);
+        C = ji(e);
         break;
       case "date-range":
-        a = Fi(e);
+        C = Fi(e);
         break;
       case "advanced-date-range":
-        a = Ki(e);
+        C = Ki(e);
         break;
       case "date":
-        a = Ni(e);
+        C = Ni(e);
         break;
       default:
-        a = e;
+        C = e;
         break;
     }
-    if (typeof a < "u") {
+    if (typeof C < "u") {
       const w = {
         ...n[c] && typeof n[c] == "string" ? JSON.parse(n[c]) : void 0,
-        [i]: a
+        [i]: C
       }, B = { ...n };
       l && typeof l == "string" && delete B[l], delete B[s];
-      const k = {
+      const D = {
         ...B,
         [c]: JSON.stringify(w)
-      }, L = new URLSearchParams(n).toString(), h = new URLSearchParams(
-        k
+      }, b = new URLSearchParams(n).toString(), h = new URLSearchParams(
+        D
       ).toString();
-      if (L === h)
+      if (b === h)
         return;
-      r(k);
+      r(D);
     }
   }
 }, KA = ({
@@ -2630,35 +2629,35 @@ const xr = (e) => {
   pageKey: o,
   filters: r
 }) => {
-  const { searchParams: n, setSearchParams: l, searchQueries: c } = PA(), [s, a] = b({}), d = () => {
+  const { searchParams: n, setSearchParams: l, searchQueries: c } = PA(), [s, C] = L({}), d = () => {
     n.delete(t || "filter"), l(n);
-  }, w = (B, k) => {
+  }, w = (B, D) => {
     switch (B.type) {
       case "radio": {
-        const { show: L = !0 } = B;
-        return L && /* @__PURE__ */ A(C, { children: /* @__PURE__ */ A(C, { children: B.title }) }, k);
+        const { show: b = !0 } = B;
+        return b && /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(a, { children: B.title }) }, D);
       }
       case "dropdown": {
-        const { show: L = !0 } = B;
-        return L && /* @__PURE__ */ A(C, { children: /* @__PURE__ */ A(C, { children: B.title }) }, k);
+        const { show: b = !0 } = B;
+        return b && /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(a, { children: B.title }) }, D);
       }
       case "date-range":
-        return /* @__PURE__ */ A(C, { children: /* @__PURE__ */ A(C, { children: B.title }) }, k);
+        return /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(a, { children: B.title }) }, D);
       case "date":
-        return /* @__PURE__ */ A(C, { children: /* @__PURE__ */ A(C, { children: B.title }) }, k);
+        return /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(a, { children: B.title }) }, D);
       case "dropdown-multiple": {
-        const { show: L = !0 } = B;
-        return L && /* @__PURE__ */ A(C, { children: /* @__PURE__ */ A(C, { children: B.title }) }, k);
+        const { show: b = !0 } = B;
+        return b && /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(a, { children: B.title }) }, D);
       }
       default:
         return null;
     }
   };
-  return /* @__PURE__ */ A(FA, { onHide: i, show: e || !1, children: /* @__PURE__ */ g(C, { direction: "column", gap: "md", children: [
+  return /* @__PURE__ */ A(FA, { onHide: i, show: e || !1, children: /* @__PURE__ */ g(a, { direction: "column", gap: "md", children: [
     /* @__PURE__ */ g(T, { direction: "row", justify: "space-between", align: "center", children: [
-      /* @__PURE__ */ A(C, { children: "Filter" }),
+      /* @__PURE__ */ A(a, { children: "Filter" }),
       /* @__PURE__ */ A(
-        C,
+        a,
         {
           style: { cursor: "pointer" },
           onClick: d,
@@ -2666,7 +2665,7 @@ const xr = (e) => {
         }
       )
     ] }),
-    r == null ? void 0 : r.map((B, k) => w(B, k))
+    r == null ? void 0 : r.map((B, D) => w(B, D))
   ] }) });
 }, Ji = ({
   searchKey: e = "q",
@@ -2678,17 +2677,17 @@ const xr = (e) => {
   showStatusFilter: l = !0,
   filterKey: c = "filter",
   pageKey: s = "page",
-  customWidthSearch: a,
+  customWidthSearch: C,
   handleOnReset: d,
   filterConfigs: w,
   buttonToggleProps: B,
-  position: k = "right",
-  titleSearchLabel: L = "Work Order",
+  position: D = "right",
+  titleSearchLabel: b = "Work Order",
   withTitleLabels: h = !1
 }) => {
-  const K = (B == null ? void 0 : B.isShowLabel) ?? !0, [H, v] = b(!1), [M, I] = b(0), R = () => {
+  const N = (B == null ? void 0 : B.isShowLabel) ?? !0, [Z, v] = L(!1), [E, I] = L(0), W = () => {
     I((y) => y + 1);
-  }, { searchParams: f, setSearchParams: V, getQueryParam: $ } = PA(), z = YA(f.toString()), E = Zi(e, f, c) || "", [G, D] = b(E), u = $(c), q = !!(u && !(() => {
+  }, { searchParams: x, setSearchParams: P, getQueryParam: $ } = PA(), K = YA(x.toString()), M = Zi(e, x, c) || "", [G, k] = L(M), u = $(c), q = !!(u && !(() => {
     if (u)
       try {
         const y = JSON.parse(u);
@@ -2697,19 +2696,19 @@ const xr = (e) => {
         console.error("Filter parameter is not a valid JSON:", y);
       }
     return !1;
-  })()), F = X("md");
-  return W(() => {
-    D(E);
-  }, [E]), W(() => {
-    if (G === E)
+  })()), z = X("md");
+  return R(() => {
+    k(M);
+  }, [M]), R(() => {
+    if (G === M)
       return;
     const y = window.setTimeout(() => {
       re({
         value: G,
         name: e,
         type: "search",
-        searchQueries: z,
-        setSearchParams: V,
+        searchQueries: K,
+        setSearchParams: P,
         filterKey: c,
         pageKey: s
       });
@@ -2719,10 +2718,10 @@ const xr = (e) => {
     };
   }, [
     G,
-    E,
+    M,
     e,
-    z,
-    V,
+    K,
+    P,
     c,
     s
   ]), /* @__PURE__ */ g(
@@ -2730,23 +2729,23 @@ const xr = (e) => {
     {
       gap: "md",
       style: {
-        flexDirection: F && k === "left" ? "row" : F && k === "right" ? "row-reverse" : "column"
+        flexDirection: z && D === "left" ? "row" : z && D === "right" ? "row-reverse" : "column"
       },
       align: "flex-end",
       children: [
-        q && /* @__PURE__ */ A(C, { justify: "flex-end", children: /* @__PURE__ */ A(
+        q && /* @__PURE__ */ A(a, { justify: "flex-end", children: /* @__PURE__ */ A(
           O,
           {
             onClick: () => {
-              const y = new URLSearchParams(f);
-              y.delete(c), V(y), D(""), R(), d && d();
+              const y = new URLSearchParams(x);
+              y.delete(c), P(y), k(""), W(), d && d();
             },
             secondary: !0,
             children: /* @__PURE__ */ A(Q, { color: "error", fontWeight: "semibold", children: "Reset" })
           }
         ) }),
         r == null ? void 0 : r.map(({ minWidth: y, content: eA, title: tA, onClickContainer: QA }, lA) => /* @__PURE__ */ g(
-          C,
+          a,
           {
             gap: "sm",
             onClick: QA,
@@ -2758,7 +2757,7 @@ const xr = (e) => {
               eA
             ]
           },
-          `extended-filter-${lA}-${M}`
+          `extended-filter-${lA}-${E}`
         )),
         !!(w != null && w.length) && /* @__PURE__ */ A(
           O,
@@ -2775,13 +2774,13 @@ const xr = (e) => {
                 }
               }
             ),
-            fullWidth: !F,
+            fullWidth: !z,
             onClick: () => v(!0),
-            children: K ? "Filter" : void 0
+            children: N ? "Filter" : void 0
           }
         ),
         l && /* @__PURE__ */ g(
-          C,
+          a,
           {
             gap: "sm",
             style: {
@@ -2805,20 +2804,20 @@ const xr = (e) => {
                   defaultValue: KA({
                     get: "value",
                     name: i,
-                    searchParams: f,
+                    searchParams: x,
                     filterKey: c
                   }) ? [
                     {
                       label: KA({
                         get: "value",
                         name: i,
-                        searchParams: f,
+                        searchParams: x,
                         filterKey: c
                       }) === "active" ? "Active" : "InActive",
                       value: KA({
                         get: "value",
                         name: i,
-                        searchParams: f,
+                        searchParams: x,
                         filterKey: c
                       })
                     }
@@ -2827,39 +2826,39 @@ const xr = (e) => {
                     value: y,
                     name: i,
                     type: "dropdown",
-                    searchQueries: z,
-                    setSearchParams: V,
+                    searchQueries: K,
+                    setSearchParams: P,
                     filterKey: c
                   }),
                   placeholder: h ? "All" : "All Status"
                 },
-                M
+                E
               )
             ]
           }
         ),
         n && /* @__PURE__ */ g(
-          C,
+          a,
           {
             gap: "sm",
             style: {
-              width: a && F ? a : F ? "310px" : ""
+              width: C && z ? C : z ? "310px" : ""
             },
             children: [
               h && /* @__PURE__ */ g(J.SubH3, { children: [
                 "Search for ",
-                L
+                b
               ] }),
               /* @__PURE__ */ A(
                 pA,
                 {
                   placeholder: t,
                   leftIcon: /* @__PURE__ */ A(m, { name: "Search", width: 20, height: 20 }),
-                  onChange: (y) => D(y.target.value),
+                  onChange: (y) => k(y.target.value),
                   value: G,
                   fullWidth: !0
                 },
-                M + 1 + c
+                E + 1 + c
               )
             ]
           }
@@ -2867,7 +2866,7 @@ const xr = (e) => {
         /* @__PURE__ */ A(
           Hi,
           {
-            isOpen: H,
+            isOpen: Z,
             onClose: () => v(!1),
             filterKey: c,
             filters: w,
@@ -2878,17 +2877,17 @@ const xr = (e) => {
     }
   );
 }, qi = ({ children: e, borderRadius: i }) => {
-  const t = iA(null), [o, r] = b("100vh");
-  return W(() => {
+  const t = iA(null), [o, r] = L("100vh");
+  return R(() => {
     const n = () => {
       if (t.current) {
         const l = t.current.getBoundingClientRect().top;
-        r(`calc(100vh - ${l + 16}px)`);
+        r(`calc(100vh - ${l}px)`);
       }
     };
     return n(), window.addEventListener("resize", n), () => window.removeEventListener("resize", n);
   }, []), /* @__PURE__ */ A(
-    C,
+    a,
     {
       ref: t,
       fullWidth: !0,
@@ -2910,7 +2909,7 @@ const xr = (e) => {
   showFilter: t = !0
 }) => {
   const o = X("md"), r = () => e ? de(e) ? e : /* @__PURE__ */ A(
-    C,
+    a,
     {
       style: {
         display: "flex",
@@ -2920,7 +2919,7 @@ const xr = (e) => {
         textWrap: "nowrap"
       },
       children: e.map(
-        ({ title: n, icon: l, buttonProps: c, onClick: s }, a) => !n && !l ? null : /* @__PURE__ */ A(
+        ({ title: n, icon: l, buttonProps: c, onClick: s }, C) => !n && !l ? null : /* @__PURE__ */ A(
           O,
           {
             fullWidth: !o,
@@ -2929,13 +2928,13 @@ const xr = (e) => {
             ...c,
             children: n
           },
-          `action-${a}`
+          `action-${C}`
         )
       )
     }
   ) : null;
   return /* @__PURE__ */ g(
-    C,
+    a,
     {
       style: {
         display: "flex",
@@ -2955,7 +2954,7 @@ const xr = (e) => {
       },
       children: [
         t && /* @__PURE__ */ A(Ji, { ...i }),
-        /* @__PURE__ */ A(C, { style: { display: "flex", gap: "8px", flexDirection: "row" } }),
+        /* @__PURE__ */ A(a, { style: { display: "flex", gap: "8px", flexDirection: "row" } }),
         r()
       ]
     }
@@ -2965,7 +2964,7 @@ const xr = (e) => {
   withMarginBottom: i = !0,
   withMarginTop: t = !0
 }) => /* @__PURE__ */ g(
-  C,
+  a,
   {
     style: {
       display: "flex",
@@ -2999,17 +2998,17 @@ const xr = (e) => {
   showPagination: r = !0,
   totalData: n
 }) => {
-  const { searchQueries: l, setSearchParams: c, searchParams: s } = PA(), a = s.get(t), d = (L) => {
-    c({ ...l, [i]: String(L) });
-  }, w = (L) => {
+  const { searchQueries: l, setSearchParams: c, searchParams: s } = PA(), C = s.get(t), d = (b) => {
+    c({ ...l, [i]: String(b) });
+  }, w = (b) => {
     c({
       ...l,
-      [t]: L,
+      [t]: b,
       [i]: "1"
     });
-  }, B = (e == null ? void 0 : e.rangeStart) ?? (((e == null ? void 0 : e.currentPage) || 0) > 1 ? (((e == null ? void 0 : e.currentPage) || 0) - 1) * ((e == null ? void 0 : e.perPage) || 0) + 1 : 1), k = (e == null ? void 0 : e.rangeEnd) ?? ((e == null ? void 0 : e.totalCurrentPage) !== (e == null ? void 0 : e.perPage) ? e == null ? void 0 : e.totalData : ((e == null ? void 0 : e.currentPage) || 1) * ((e == null ? void 0 : e.totalCurrentPage) || 0));
+  }, B = (e == null ? void 0 : e.rangeStart) ?? (((e == null ? void 0 : e.currentPage) || 0) > 1 ? (((e == null ? void 0 : e.currentPage) || 0) - 1) * ((e == null ? void 0 : e.perPage) || 0) + 1 : 1), D = (e == null ? void 0 : e.rangeEnd) ?? ((e == null ? void 0 : e.totalCurrentPage) !== (e == null ? void 0 : e.perPage) ? e == null ? void 0 : e.totalData : ((e == null ? void 0 : e.currentPage) || 1) * ((e == null ? void 0 : e.totalCurrentPage) || 0));
   return /* @__PURE__ */ A(
-    C,
+    a,
     {
       style: {
         display: "flex",
@@ -3025,7 +3024,7 @@ const xr = (e) => {
         flexShrink: 0
       },
       children: r ? /* @__PURE__ */ g(U, { children: [
-        /* @__PURE__ */ g(C, { style: { display: "flex", flexDirection: "row", gap: "8px", alignItems: "center" }, children: [
+        /* @__PURE__ */ g(a, { style: { display: "flex", flexDirection: "row", gap: "8px", alignItems: "center" }, children: [
           /* @__PURE__ */ A(Q, { children: "Rows Per Page: " }),
           /* @__PURE__ */ A(
             OA,
@@ -3037,16 +3036,16 @@ const xr = (e) => {
                 { label: "50", value: "50" },
                 { label: "100", value: "100" }
               ],
-              onChange: (L) => {
-                w(L[0].value);
+              onChange: (b) => {
+                w(b[0].value);
               },
-              defaultValue: a ? [{ label: `${a} per row`, value: a }] : [{ label: `${o} per row`, value: `${o}` }]
+              defaultValue: C ? [{ label: `${C} per row`, value: C }] : [{ label: `${o} per row`, value: `${o}` }]
             }
           ),
-          /* @__PURE__ */ A(Q, { children: `${B}-${k} of ${(e == null ? void 0 : e.totalData) || 0}` })
+          /* @__PURE__ */ A(Q, { children: `${B}-${D} of ${(e == null ? void 0 : e.totalData) || 0}` })
         ] }),
         /* @__PURE__ */ A(
-          Le,
+          Oe,
           {
             currentPage: e != null && e.currentPage ? Number(e == null ? void 0 : e.currentPage) : 1,
             totalCount: e != null && e.totalPage ? Number(e == null ? void 0 : e.totalPage) : 1,
@@ -3064,34 +3063,34 @@ const xr = (e) => {
     }
   );
 }, Ri = ({ filter: e, columnTitle: i }) => {
-  const [t, o] = b(!1), r = iA(null), n = iA(null), l = iA(null), [c, s] = b(""), [a, d] = b({ top: 0, left: 0 }), w = e.selectedValues, B = cA(() => c ? e.options.filter(
+  const [t, o] = L(!1), r = iA(null), n = iA(null), l = iA(null), [c, s] = L(""), [C, d] = L({ top: 0, left: 0 }), w = e.selectedValues, B = cA(() => c ? e.options.filter(
     (h) => h.label.toLowerCase().includes(c.toLowerCase())
   ) : e.options, [e.options, c]);
-  W(() => {
+  R(() => {
     if (t && n.current) {
-      const h = n.current.getBoundingClientRect(), N = 280, K = {
+      const h = n.current.getBoundingClientRect(), F = 280, N = {
         top: h.bottom + 8
       };
-      e.position === "left" || h.left + N > window.innerWidth ? K.right = window.innerWidth - h.right : K.left = h.left, d(K);
+      e.position === "left" || h.left + F > window.innerWidth ? N.right = window.innerWidth - h.right : N.left = h.left, d(N);
     }
-  }, [t, e.position]), W(() => {
+  }, [t, e.position]), R(() => {
     t && l.current ? setTimeout(() => {
       var h;
       return (h = l.current) == null ? void 0 : h.focus();
     }, 50) : s("");
-  }, [t]), W(() => {
-    const h = (N) => {
-      r.current && !r.current.contains(N.target) && n.current && !n.current.contains(N.target) && o(!1);
+  }, [t]), R(() => {
+    const h = (F) => {
+      r.current && !r.current.contains(F.target) && n.current && !n.current.contains(F.target) && o(!1);
     };
     return t && document.addEventListener("mousedown", h), () => document.removeEventListener("mousedown", h);
   }, [t]);
-  const k = (h) => {
-    const N = w.includes(h) ? w.filter((K) => K !== h) : [...w, h];
-    e.onFilterChange(N);
-  }, L = () => e.onFilterChange([]);
-  return /* @__PURE__ */ g(C, { style: { position: "relative" }, children: [
+  const D = (h) => {
+    const F = w.includes(h) ? w.filter((N) => N !== h) : [...w, h];
+    e.onFilterChange(F);
+  }, b = () => e.onFilterChange([]);
+  return /* @__PURE__ */ g(a, { style: { position: "relative" }, children: [
     /* @__PURE__ */ A(
-      C,
+      a,
       {
         ref: n,
         style: {
@@ -3101,8 +3100,8 @@ const xr = (e) => {
           cursor: "pointer"
         },
         onClick: (h) => {
-          var N;
-          h.stopPropagation(), t || (N = e.onOpen) == null || N.call(e), o((K) => !K);
+          var F;
+          h.stopPropagation(), t || (F = e.onOpen) == null || F.call(e), o((N) => !N);
         },
         children: /* @__PURE__ */ A(
           m,
@@ -3117,13 +3116,13 @@ const xr = (e) => {
       }
     ),
     t && /* @__PURE__ */ g(
-      C,
+      a,
       {
         ref: r,
         style: {
           position: "fixed",
-          top: `${a.top}px`,
-          ...a.left !== void 0 ? { left: `${a.left}px` } : { right: `${a.right}px` },
+          top: `${C.top}px`,
+          ...C.left !== void 0 ? { left: `${C.left}px` } : { right: `${C.right}px` },
           backgroundColor: "white",
           borderRadius: "4px",
           minWidth: "280px",
@@ -3136,7 +3135,7 @@ const xr = (e) => {
         },
         children: [
           /* @__PURE__ */ g(
-            C,
+            a,
             {
               style: {
                 display: "flex",
@@ -3154,14 +3153,14 @@ const xr = (e) => {
                   "Filter ",
                   i
                 ] }),
-                w.length > 0 && /* @__PURE__ */ A(C, { style: { cursor: "pointer" }, children: /* @__PURE__ */ A(
+                w.length > 0 && /* @__PURE__ */ A(a, { style: { cursor: "pointer" }, children: /* @__PURE__ */ A(
                   Q,
                   {
                     fontSize: "xs",
                     color: "primary",
                     fontWeight: "semibold",
                     onClick: (h) => {
-                      h.stopPropagation(), L();
+                      h.stopPropagation(), b();
                     },
                     children: "CLEAR"
                   }
@@ -3170,7 +3169,7 @@ const xr = (e) => {
             }
           ),
           !e.hideSearch && /* @__PURE__ */ A(
-            C,
+            a,
             {
               style: {
                 paddingLeft: "16px",
@@ -3192,7 +3191,7 @@ const xr = (e) => {
             }
           ),
           /* @__PURE__ */ A(
-            C,
+            a,
             {
               className: "ts-filter-dropdown-options",
               style: {
@@ -3202,7 +3201,7 @@ const xr = (e) => {
                 paddingRight: "8px"
               },
               children: e.isLoadingOptions ? /* @__PURE__ */ g(
-                C,
+                a,
                 {
                   style: {
                     paddingTop: "40px",
@@ -3235,8 +3234,8 @@ const xr = (e) => {
                     )
                   ]
                 }
-              ) : B.length > 0 ? /* @__PURE__ */ A(C, { style: { gap: "2px", paddingTop: "4px", paddingBottom: "4px" }, children: B.map((h) => /* @__PURE__ */ g(
-                C,
+              ) : B.length > 0 ? /* @__PURE__ */ A(a, { style: { gap: "2px", paddingTop: "4px", paddingBottom: "4px" }, children: B.map((h) => /* @__PURE__ */ g(
+                a,
                 {
                   style: {
                     display: "flex",
@@ -3252,14 +3251,14 @@ const xr = (e) => {
                     transition: "all 0.2s ease",
                     backgroundColor: w.includes(h.value) ? "rgb(var(--starasia-ui-raw-color-blue-50))" : "transparent"
                   },
-                  onClick: (N) => {
-                    N.stopPropagation(), k(h.value);
+                  onClick: (F) => {
+                    F.stopPropagation(), D(h.value);
                   },
-                  onMouseEnter: (N) => {
-                    w.includes(h.value) || (N.currentTarget.style.backgroundColor = "rgb(var(--starasia-ui-raw-color-gray-50))"), N.currentTarget.style.transform = "translateX(2px)";
+                  onMouseEnter: (F) => {
+                    w.includes(h.value) || (F.currentTarget.style.backgroundColor = "rgb(var(--starasia-ui-raw-color-gray-50))"), F.currentTarget.style.transform = "translateX(2px)";
                   },
-                  onMouseLeave: (N) => {
-                    N.currentTarget.style.backgroundColor = w.includes(h.value) ? "rgb(var(--starasia-ui-raw-color-blue-50))" : "transparent", N.currentTarget.style.transform = "translateX(0)";
+                  onMouseLeave: (F) => {
+                    F.currentTarget.style.backgroundColor = w.includes(h.value) ? "rgb(var(--starasia-ui-raw-color-blue-50))" : "transparent", F.currentTarget.style.transform = "translateX(0)";
                   },
                   children: [
                     /* @__PURE__ */ A(
@@ -3283,7 +3282,7 @@ const xr = (e) => {
                 },
                 h.value
               )) }) : /* @__PURE__ */ g(
-                C,
+                a,
                 {
                   style: {
                     paddingTop: "40px",
@@ -3317,7 +3316,7 @@ const xr = (e) => {
             }
           ),
           w.length > 0 && /* @__PURE__ */ A(
-            C,
+            a,
             {
               style: {
                 paddingTop: "8px",
@@ -3328,9 +3327,9 @@ const xr = (e) => {
                 backgroundColor: "rgb(var(--starasia-ui-raw-color-blue-50))",
                 marginTop: "auto"
               },
-              children: /* @__PURE__ */ g(C, { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "4px" }, children: [
+              children: /* @__PURE__ */ g(a, { style: { display: "flex", flexDirection: "row", alignItems: "center", gap: "4px" }, children: [
                 /* @__PURE__ */ A(
-                  C,
+                  a,
                   {
                     style: {
                       backgroundColor: "rgb(var(--starasia-ui-raw-color-primary))",
@@ -3371,7 +3370,7 @@ const xr = (e) => {
       /* @__PURE__ */ A("path", { d: e ? "M7 11V7a5 5 0 0 1 10 0v4" : "M7 11V7a5 5 0 0 1 9.9-1" })
     ]
   }
-), yA = "var(--starasia-ui-table-bg-default, #ffffff)", ZA = "var(--starasia-ui-color-gray-100)", Pi = ({
+), xA = "var(--starasia-ui-table-bg-default, #ffffff)", ZA = "var(--starasia-ui-color-gray-100)", Pi = ({
   columns: e,
   records: i,
   handleDetail: t,
@@ -3381,67 +3380,67 @@ const xr = (e) => {
   visibleHandleDelete: l,
   visibleHandleUpdate: c,
   visibleHandleDetail: s,
-  showHeadBorder: a = !0,
+  showHeadBorder: C = !0,
   scrollParentRef: d,
   frozenCount: w = 0,
   onFrozenCountChange: B,
-  customActions: k,
-  actionsOrder: L = ["detail", "update", "delete", "custom"],
+  customActions: D,
+  actionsOrder: b = ["detail", "update", "delete", "custom"],
   customEmptyState: h
 }) => {
-  const K = [t, o, r].filter((E) => E !== void 0).length, H = !!k, v = K === 3 ? H ? "178px" : "140px" : K === 2 ? H ? "140px" : "102px" : K === 1 ? H ? "112px" : "74px" : H ? "74px" : "", M = (E, G) => {
-    if (!G) return E;
-    if (typeof G == "function") return G(E);
-    if (typeof G == "string") return E[G];
-  }, [I, R] = b(!1);
-  W(() => {
+  const N = [t, o, r].filter((M) => M !== void 0).length, Z = !!D, v = N === 3 ? Z ? "178px" : "140px" : N === 2 ? Z ? "140px" : "102px" : N === 1 ? Z ? "112px" : "74px" : Z ? "74px" : "", E = (M, G) => {
+    if (!G) return M;
+    if (typeof G == "function") return G(M);
+    if (typeof G == "string") return M[G];
+  }, [I, W] = L(!1);
+  R(() => {
     if (!(d != null && d.current)) return;
-    const E = d.current;
-    R(E.scrollHeight > E.clientHeight);
+    const M = d.current;
+    W(M.scrollHeight > M.clientHeight);
   }, [i, d]);
-  const f = iA(null), [V, $] = b([]);
+  const x = iA(null), [P, $] = L([]);
   qA(() => {
-    if (!w || !f.current) {
+    if (!w || !x.current) {
       $([]);
       return;
     }
-    const E = Array.from(
-      f.current.querySelectorAll("thead tr th")
+    const M = Array.from(
+      x.current.querySelectorAll("thead tr th")
     ), G = [];
-    let D = 0;
-    E.forEach((u, p) => {
-      G[p] = D, p < w && (D += u.offsetWidth);
+    let k = 0;
+    M.forEach((u, p) => {
+      G[p] = k, p < w && (k += u.offsetWidth);
     }), $(G);
   }, [w, e, i]);
-  const z = (E) => {
-    B && B(E < w ? E : E + 1);
+  const K = (M) => {
+    B && B(M < w ? M : M + 1);
   };
-  return /* @__PURE__ */ A("div", { ref: f, children: /* @__PURE__ */ g(ae, { fullWidth: !0, children: [
+  return /* @__PURE__ */ A("div", { ref: x, children: /* @__PURE__ */ g(ae, { fullWidth: !0, children: [
     /* @__PURE__ */ A(
-      Ge,
+      Ye,
       {
         style: {
           height: "40px",
           whiteSpace: "nowrap"
         },
         children: /* @__PURE__ */ g(hA, { children: [
-          e.map((E, G) => {
+          e.map((M, G) => {
             var p;
-            const D = w > 0 && G < w, u = V[G] ?? 0;
+            const k = w > 0 && G < w, u = P[G] ?? 0;
             return /* @__PURE__ */ A(
               VA,
               {
                 style: {
                   position: "sticky",
                   top: 0,
-                  left: D ? u : void 0,
-                  zIndex: D ? 4 : 2,
+                  left: k ? u : void 0,
+                  zIndex: k ? 4 : 2,
                   paddingLeft: G === 0 ? "12px" : "",
-                  borderRight: a ? "1px solid var(--starasia-ui-utility-fill-default)" : void 0,
-                  borderBottom: a ? "1px solid var(--starasia-ui-utility-fill-default)" : void 0,
-                  width: E.width,
+                  borderRight: C ? "1px solid var(--starasia-ui-utility-fill-default)" : void 0,
+                  borderBottom: C ? "1px solid var(--starasia-ui-utility-fill-default)" : void 0,
+                  width: M.width,
                   backgroundColor: "var(--starasia-ui-table-bg-header)",
-                  textAlign: E.textAlign === "text-right" ? "right" : E.textAlign === "text-center" ? "center" : "left"
+                  textAlign: M.textAlign === "text-right" ? "right" : M.textAlign === "text-center" ? "center" : "left"
                 },
                 children: /* @__PURE__ */ g(
                   "div",
@@ -3454,19 +3453,19 @@ const xr = (e) => {
                       minWidth: 0
                     },
                     children: [
-                      /* @__PURE__ */ A("span", { style: { flex: 1, minWidth: 0 }, children: E.title || ((p = E.accessor) == null ? void 0 : p.toString()) }),
-                      E.filter && /* @__PURE__ */ A(
+                      /* @__PURE__ */ A("span", { style: { flex: 1, minWidth: 0 }, children: M.title || ((p = M.accessor) == null ? void 0 : p.toString()) }),
+                      M.filter && /* @__PURE__ */ A(
                         Ri,
                         {
-                          filter: E.filter,
-                          columnTitle: E.title
+                          filter: M.filter,
+                          columnTitle: M.title
                         }
                       ),
                       B && /* @__PURE__ */ A(
                         "button",
                         {
-                          onClick: () => z(G),
-                          title: D ? "Unfreeze column" : "Freeze column",
+                          onClick: () => K(G),
+                          title: k ? "Unfreeze column" : "Freeze column",
                           style: {
                             background: "none",
                             border: "none",
@@ -3475,11 +3474,11 @@ const xr = (e) => {
                             display: "flex",
                             alignItems: "center",
                             flexShrink: 0,
-                            color: D ? "rgb(var(--starasia-ui-raw-color-primary-600, 37 99 235))" : "rgb(var(--starasia-ui-raw-color-gray-400, 156 163 175))",
-                            opacity: D ? 1 : 0.45,
+                            color: k ? "rgb(var(--starasia-ui-raw-color-primary-600, 37 99 235))" : "rgb(var(--starasia-ui-raw-color-gray-400, 156 163 175))",
+                            opacity: k ? 1 : 0.45,
                             transition: "opacity 0.15s"
                           },
-                          children: /* @__PURE__ */ A(vi, { frozen: D })
+                          children: /* @__PURE__ */ A(vi, { frozen: k })
                         }
                       )
                     ]
@@ -3489,7 +3488,7 @@ const xr = (e) => {
               `table-head-${G}`
             );
           }),
-          t || o || r || k ? /* @__PURE__ */ A(
+          t || o || r || D ? /* @__PURE__ */ A(
             VA,
             {
               style: {
@@ -3498,20 +3497,20 @@ const xr = (e) => {
                 top: 0,
                 right: 0,
                 zIndex: 3,
-                borderBottom: a ? "1px solid var(--starasia-ui-utility-fill-default)" : void 0
+                borderBottom: C ? "1px solid var(--starasia-ui-utility-fill-default)" : void 0
               }
             }
           ) : null
         ] })
       }
     ),
-    /* @__PURE__ */ A(Oe, { children: n ? /* @__PURE__ */ A(hA, { children: /* @__PURE__ */ A(BA, { colSpan: e.length + 1, children: /* @__PURE__ */ g(C, { style: { gap: "16px" }, children: [
+    /* @__PURE__ */ A(pe, { children: n ? /* @__PURE__ */ A(hA, { children: /* @__PURE__ */ A(BA, { colSpan: e.length + 1, children: /* @__PURE__ */ g(a, { style: { gap: "16px" }, children: [
       /* @__PURE__ */ A(sA, { variant: "list" }),
       /* @__PURE__ */ A(sA, { variant: "list" }),
       /* @__PURE__ */ A(sA, { variant: "list" }),
       /* @__PURE__ */ A(sA, { variant: "list" }),
       /* @__PURE__ */ A(sA, { variant: "list" })
-    ] }) }) }) : !(i != null && i.length) && h ? /* @__PURE__ */ A(hA, { children: /* @__PURE__ */ A(BA, { colSpan: e.length + 1, children: h }) }) : i == null ? void 0 : i.map((E, G) => /* @__PURE__ */ g(
+    ] }) }) }) : !(i != null && i.length) && h ? /* @__PURE__ */ A(hA, { children: /* @__PURE__ */ A(BA, { colSpan: e.length + 1, children: h }) }) : i == null ? void 0 : i.map((M, G) => /* @__PURE__ */ g(
       hA,
       {
         style: {
@@ -3519,38 +3518,38 @@ const xr = (e) => {
           padding: 0,
           borderBottom: G === i.length - 1 && I ? void 0 : "1px solid var(--starasia-ui-utility-fill-default)"
         },
-        onMouseOver: (D) => {
-          const u = D.currentTarget;
+        onMouseOver: (k) => {
+          const u = k.currentTarget;
           u.style.backgroundColor = ZA, u.style.position = "relative", u.style.zIndex = "2", w > 0 && Array.from(u.querySelectorAll("td")).slice(0, w).forEach((q) => {
             q.style.backgroundColor = ZA;
           });
           const p = Array.from(u.querySelectorAll("td")).at(-1);
           p && p.style.position === "sticky" && (p.style.backgroundColor = ZA);
         },
-        onMouseOut: (D) => {
-          const u = D.currentTarget;
+        onMouseOut: (k) => {
+          const u = k.currentTarget;
           u.style.backgroundColor = "", u.style.position = "", u.style.zIndex = "", w > 0 && Array.from(u.querySelectorAll("td")).slice(0, w).forEach((q) => {
-            q.style.backgroundColor = yA;
+            q.style.backgroundColor = xA;
           });
           const p = Array.from(u.querySelectorAll("td")).at(-1);
-          p && p.style.position === "sticky" && (p.style.backgroundColor = yA);
+          p && p.style.position === "sticky" && (p.style.backgroundColor = xA);
         },
         children: [
-          e.map((D, u) => {
-            const p = D.render ? D.render(E, G, i) : M(E, D.accessor), q = w > 0 && u < w, F = V[u] ?? 0;
+          e.map((k, u) => {
+            const p = k.render ? k.render(M, G, i) : E(M, k.accessor), q = w > 0 && u < w, z = P[u] ?? 0;
             return /* @__PURE__ */ A(
               BA,
               {
                 style: {
                   position: q ? "sticky" : void 0,
-                  left: q ? F : void 0,
+                  left: q ? z : void 0,
                   zIndex: q ? 1 : void 0,
-                  backgroundColor: q ? yA : void 0,
+                  backgroundColor: q ? xA : void 0,
                   paddingLeft: u === 0 ? "12px" : "",
                   whiteSpace: "nowrap",
-                  borderLeft: D.showBorderLeft ? "1px solid var(--starasia-ui-utility-fill-default)" : void 0,
-                  borderRight: D.showBorderRight ? "1px solid var(--starasia-ui-utility-fill-default)" : void 0,
-                  textAlign: D.textAlign === "text-right" ? "right" : D.textAlign === "text-center" ? "center" : "left"
+                  borderLeft: k.showBorderLeft ? "1px solid var(--starasia-ui-utility-fill-default)" : void 0,
+                  borderRight: k.showBorderRight ? "1px solid var(--starasia-ui-utility-fill-default)" : void 0,
+                  textAlign: k.textAlign === "text-right" ? "right" : k.textAlign === "text-center" ? "center" : "left"
                 },
                 children: typeof p == "string" ? /* @__PURE__ */ A(
                   Q,
@@ -3559,7 +3558,7 @@ const xr = (e) => {
                       whiteSpace: "nowrap",
                       overflow: "hidden",
                       textOverflow: "ellipsis",
-                      textAlign: D.textAlign === "text-right" ? "right" : D.textAlign === "text-center" ? "center" : "left"
+                      textAlign: k.textAlign === "text-right" ? "right" : k.textAlign === "text-center" ? "center" : "left"
                     },
                     children: p
                   }
@@ -3568,43 +3567,43 @@ const xr = (e) => {
               `row-${G}-col-${u}`
             );
           }),
-          t || o || r || k ? /* @__PURE__ */ A(BA, { style: {
+          t || o || r || D ? /* @__PURE__ */ A(BA, { style: {
             width: v,
             position: "sticky",
             right: 0,
             zIndex: 1,
-            backgroundColor: yA
-          }, children: /* @__PURE__ */ A(T, { direction: "row", align: "center", justify: "center", gap: "sm", children: L.map((D) => {
+            backgroundColor: xA
+          }, children: /* @__PURE__ */ A(T, { direction: "row", align: "center", justify: "center", gap: "sm", children: b.map((k) => {
             const u = G === i.length - 1 ? "top" : "bottom";
-            return D === "detail" && t && (s == null ? void 0 : s(E)) !== !1 ? /* @__PURE__ */ A(rA, { label: "Detail", position: u, children: /* @__PURE__ */ A(
+            return k === "detail" && t && (s == null ? void 0 : s(M)) !== !1 ? /* @__PURE__ */ A(rA, { label: "Detail", position: u, children: /* @__PURE__ */ A(
               O,
               {
                 size: "xs",
                 secondary: !0,
-                onClick: () => t(E.id, E),
+                onClick: () => t(M.id, M),
                 iconLeft: /* @__PURE__ */ A(m, { name: "DocumentClean", size: "sm", style: { color: "rgb(var(--starasia-ui-raw-color-gray-600))" } })
               }
-            ) }, "detail") : D === "update" && o && (c == null ? void 0 : c(E)) !== !1 ? /* @__PURE__ */ A(rA, { label: "Update", position: u, children: /* @__PURE__ */ A(
+            ) }, "detail") : k === "update" && o && (c == null ? void 0 : c(M)) !== !1 ? /* @__PURE__ */ A(rA, { label: "Update", position: u, children: /* @__PURE__ */ A(
               O,
               {
                 size: "xs",
                 secondary: !0,
-                onClick: () => o(E),
+                onClick: () => o(M),
                 iconLeft: /* @__PURE__ */ A(m, { name: "Edit1", size: "sm", style: { color: "rgb(var(--starasia-ui-raw-color-gray-600))" } })
               }
-            ) }, "update") : D === "delete" && r && (l == null ? void 0 : l(E)) !== !1 ? /* @__PURE__ */ A(rA, { label: "Delete", position: u, children: /* @__PURE__ */ A(
+            ) }, "update") : k === "delete" && r && (l == null ? void 0 : l(M)) !== !1 ? /* @__PURE__ */ A(rA, { label: "Delete", position: u, children: /* @__PURE__ */ A(
               O,
               {
                 size: "xs",
                 secondary: !0,
-                onClick: () => r(E.id, E),
+                onClick: () => r(M.id, M),
                 iconLeft: /* @__PURE__ */ A(m, { name: "Trash1", size: "sm", style: { color: "rgb(var(--starasia-ui-raw-color-red-600))" } })
               }
-            ) }, "delete") : D === "custom" ? /* @__PURE__ */ A(aA.Fragment, { children: k == null ? void 0 : k(E) }, "custom") : null;
+            ) }, "delete") : k === "custom" ? /* @__PURE__ */ A(aA.Fragment, { children: D == null ? void 0 : D(M) }, "custom") : null;
           }) }) }) : null
         ]
       },
-      `${E}${G}`
+      `${M}${G}`
     )) })
   ] }) });
 }, Vi = ({
@@ -3614,15 +3613,15 @@ const xr = (e) => {
   footerProps: o
 }) => {
   var w;
-  const r = iA(null), [n, l] = b(
+  const r = iA(null), [n, l] = L(
     (i == null ? void 0 : i.defaultFrozenCount) ?? 0
-  ), c = (t == null ? void 0 : t.show) ?? !0, s = iA(null), a = (w = i == null ? void 0 : i.pagination) == null ? void 0 : w.totalData;
-  typeof a == "number" && (s.current = a);
-  const d = (o == null ? void 0 : o.showFooter) ?? (a === void 0 ? s.current !== 0 : a !== 0);
+  ), c = (t == null ? void 0 : t.show) ?? !0, s = iA(null), C = (w = i == null ? void 0 : i.pagination) == null ? void 0 : w.totalData;
+  typeof C == "number" && (s.current = C);
+  const d = (o == null ? void 0 : o.showFooter) ?? (C === void 0 ? s.current !== 0 : C !== 0);
   return /* @__PURE__ */ g(qi, { ...e, children: [
     c && /* @__PURE__ */ A(Ti, { ...t }),
     /* @__PURE__ */ A(
-      C,
+      a,
       {
         ref: r,
         style: {
@@ -3659,16 +3658,16 @@ function Xi(e) {
     e
   );
 }
-const jr = Xi(Vi), EA = ({
+const jr = Xi(Vi), MA = ({
   of: e,
   render: i
-}) => Ne.toArray(e == null ? void 0 : e.map((t, o, r) => i(t, o, r))), Y = ({
+}) => Ke.toArray(e == null ? void 0 : e.map((t, o, r) => i(t, o, r))), Y = ({
   condition: e,
   fallback: i,
   children: t,
   loading: o,
   isLoading: r
-}) => /* @__PURE__ */ A(U, { children: r ? o : e ? t : i }), Me = ({
+}) => /* @__PURE__ */ A(U, { children: r ? o : e ? t : i }), ye = ({
   item: e,
   handleSwitch: i,
   handleToSelectOrg: t,
@@ -3679,7 +3678,7 @@ const jr = Xi(Vi), EA = ({
 }) => {
   var c;
   return /* @__PURE__ */ g(
-    C,
+    a,
     {
       borderWidth: "border-b",
       borderStyle: "border-solid-b",
@@ -3718,7 +3717,7 @@ const jr = Xi(Vi), EA = ({
           {
             condition: !!e.role && !e.isTenant || r,
             fallback: /* @__PURE__ */ A(J.Body1, { children: e.name }),
-            children: /* @__PURE__ */ g(C, { direction: "column", gap: "sm", children: [
+            children: /* @__PURE__ */ g(a, { direction: "column", gap: "sm", children: [
               /* @__PURE__ */ A(J.Body1, { children: e.name }),
               /* @__PURE__ */ A(
                 J.Body3,
@@ -3732,7 +3731,7 @@ const jr = Xi(Vi), EA = ({
             ] })
           }
         ),
-        /* @__PURE__ */ A(Y, { condition: e.isTenant && o, children: /* @__PURE__ */ A(C, { children: /* @__PURE__ */ A(m, { name: "ChevronRight", size: "md" }) }) })
+        /* @__PURE__ */ A(Y, { condition: e.isTenant && o, children: /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(m, { name: "ChevronRight", size: "md" }) }) })
       ]
     }
   );
@@ -3746,16 +3745,16 @@ const jr = Xi(Vi), EA = ({
   showRole: l,
   isOnOrgSelect: c,
   setSelectedApp: s
-}) => r && e && e.length > 0 && /* @__PURE__ */ g(C, { marginTop: "lg", children: [
+}) => r && e && e.length > 0 && /* @__PURE__ */ g(a, { marginTop: "lg", children: [
   t && /* @__PURE__ */ A(J.H5, { children: t }),
   /* @__PURE__ */ A(
-    EA,
+    MA,
     {
       of: e,
-      render: (a) => /* @__PURE__ */ A(
-        Me,
+      render: (C) => /* @__PURE__ */ A(
+        ye,
         {
-          item: a,
+          item: C,
           showIcon: n,
           handleSwitch: i,
           handleToSelectOrg: o,
@@ -3778,31 +3777,31 @@ const jr = Xi(Vi), EA = ({
   setSelectedApp: s
 }) => {
   var d;
-  const a = le();
+  const C = le();
   return /* @__PURE__ */ g(FA, { onHide: e, show: i, closeButton: !1, children: [
     /* @__PURE__ */ g(
       wA,
       {
         paddingBlock: "lg",
-        onClick: a.show ? a.close : e,
+        onClick: C.show ? C.close : e,
         display: "flex",
         direction: "row",
         children: [
-          a.show ? /* @__PURE__ */ A(m, { name: "ChevronLeft" }) : /* @__PURE__ */ A(m, { name: "Cross" }),
+          C.show ? /* @__PURE__ */ A(m, { name: "ChevronLeft" }) : /* @__PURE__ */ A(m, { name: "Cross" }),
           /* @__PURE__ */ A(
             J.SubH3,
             {
               props: {
                 color: "gray-500"
               },
-              children: a.show && "Switch Apps"
+              children: C.show && "Switch Apps"
             }
           )
         ]
       }
     ),
-    a.show ? /* @__PURE__ */ g(U, { children: [
-      /* @__PURE__ */ A(J.H4, { children: (d = a.data) == null ? void 0 : d.name }),
+    C.show ? /* @__PURE__ */ g(U, { children: [
+      /* @__PURE__ */ A(J.H4, { children: (d = C.data) == null ? void 0 : d.name }),
       /* @__PURE__ */ A(
         J.SubH3,
         {
@@ -3817,7 +3816,7 @@ const jr = Xi(Vi), EA = ({
         {
           condition: !!(o != null && o.length),
           isLoading: c,
-          loading: /* @__PURE__ */ g(C, { marginTop: "sm", gap: "md", children: [
+          loading: /* @__PURE__ */ g(a, { marginTop: "sm", gap: "md", children: [
             /* @__PURE__ */ A(sA, { variant: "list" }),
             /* @__PURE__ */ A(sA, { variant: "list" }),
             /* @__PURE__ */ A(sA, { variant: "list" })
@@ -3831,13 +3830,13 @@ const jr = Xi(Vi), EA = ({
                   ...w,
                   id: w.id,
                   isTenant: !0,
-                  applicationKey: ((B = a.data) == null ? void 0 : B.applicationKey) || ""
+                  applicationKey: ((B = C.data) == null ? void 0 : B.applicationKey) || ""
                 };
               }),
               handleSwitch: r,
               showIcon: !1,
               showRole: !0,
-              isOnOrgSelect: a.show,
+              isOnOrgSelect: C.show,
               setSelectedApp: s
             }
           )
@@ -3867,7 +3866,7 @@ const jr = Xi(Vi), EA = ({
           dataApps: t == null ? void 0 : t.filter((w) => w.isTenant),
           handleSwitch: r,
           handleToSelectOrg: (w) => {
-            a.open(w), s(w.name), l && l(w);
+            C.open(w), s(w.name), l && l(w);
           },
           setSelectedApp: s
         }
@@ -3894,16 +3893,16 @@ const jr = Xi(Vi), EA = ({
   showRole: l,
   isOnOrgSelect: c,
   setSelectedApp: s
-}) => r && e && (e == null ? void 0 : e.length) > 0 && /* @__PURE__ */ g(C, { marginTop: "lg", children: [
+}) => r && e && (e == null ? void 0 : e.length) > 0 && /* @__PURE__ */ g(a, { marginTop: "lg", children: [
   t && /* @__PURE__ */ A(J.H5, { children: t }),
   /* @__PURE__ */ A(
-    EA,
+    MA,
     {
       of: e,
-      render: (a) => /* @__PURE__ */ A(
-        Me,
+      render: (C) => /* @__PURE__ */ A(
+        ye,
         {
-          item: a,
+          item: C,
           showIcon: n,
           handleSwitch: i,
           handleToSelectOrg: o,
@@ -3922,7 +3921,7 @@ const jr = Xi(Vi), EA = ({
   totalData: r,
   setSelectedApp: n
 }) => {
-  var c, s, a, d, w;
+  var c, s, C, d, w;
   const l = le();
   return /* @__PURE__ */ g(FA, { onHide: e, show: i, closeButton: !1, children: [
     /* @__PURE__ */ g(
@@ -3960,17 +3959,17 @@ const jr = Xi(Vi), EA = ({
       /* @__PURE__ */ A(
         Y,
         {
-          condition: !!((a = (s = l.data) == null ? void 0 : s.organizations) != null && a.length),
+          condition: !!((C = (s = l.data) == null ? void 0 : s.organizations) != null && C.length),
           children: /* @__PURE__ */ A(
             JA,
             {
               dataApps: (w = (d = l.data) == null ? void 0 : d.organizations) == null ? void 0 : w.map((B) => {
-                var k;
+                var D;
                 return {
                   ...B,
                   id: B.id,
                   isTenant: !0,
-                  applicationKey: ((k = l.data) == null ? void 0 : k.applicationKey) || ""
+                  applicationKey: ((D = l.data) == null ? void 0 : D.applicationKey) || ""
                 };
               }),
               handleSwitch: o,
@@ -4033,16 +4032,16 @@ const jr = Xi(Vi), EA = ({
   variant: l = "single-api",
   isLoading: c
 }) => {
-  const [s, a] = b(!1), [d, w] = b("");
+  const [s, C] = L(!1), [d, w] = L("");
   return /* @__PURE__ */ g(U, { children: [
     /* @__PURE__ */ g(
-      C,
+      a,
       {
         cursor: "pointer",
         direction: "row",
         gap: "sm",
         align: "center",
-        onClick: () => a((B) => !B),
+        onClick: () => C((B) => !B),
         style: {
           position: "relative"
         },
@@ -4064,7 +4063,7 @@ const jr = Xi(Vi), EA = ({
             }
           ),
           /* @__PURE__ */ A(
-            C,
+            a,
             {
               style: {
                 position: "absolute",
@@ -4090,7 +4089,7 @@ const jr = Xi(Vi), EA = ({
           $i,
           {
             show: s,
-            onHide: () => a((B) => !B),
+            onHide: () => C((B) => !B),
             dataApps: i,
             totalData: e,
             handleSwitch: o,
@@ -4104,7 +4103,7 @@ const jr = Xi(Vi), EA = ({
           _i,
           {
             show: s,
-            onHide: () => a((B) => !B),
+            onHide: () => C((B) => !B),
             dataApps: i,
             totalData: e,
             handleSwitch: o,
@@ -4114,7 +4113,7 @@ const jr = Xi(Vi), EA = ({
       }
     ),
     c && /* @__PURE__ */ A(
-      C,
+      a,
       {
         style: {
           position: "fixed",
@@ -4129,7 +4128,7 @@ const jr = Xi(Vi), EA = ({
           alignItems: "center"
         },
         children: /* @__PURE__ */ g(
-          C,
+          a,
           {
             style: {
               textAlign: "center"
@@ -4163,7 +4162,7 @@ const jr = Xi(Vi), EA = ({
       }
     )
   ] });
-}, Z = (e) => /* @__PURE__ */ A(
+}, H = (e) => /* @__PURE__ */ A(
   Q,
   {
     ...e,
@@ -4180,10 +4179,10 @@ const jr = Xi(Vi), EA = ({
   fullWidth: o = !1,
   ...r
 }) => {
-  var c, s, a;
+  var c, s, C;
   const n = r.hideMessageError || !1, l = i === "horizontal" ? e === "sm" ? 342 : e === "lg" ? 400 : 342 : void 0;
   return /* @__PURE__ */ g(
-    C,
+    a,
     {
       gap: i === "horizontal" ? "spacing-96" : "sm",
       direction: i === "horizontal" ? "row" : "column",
@@ -4194,32 +4193,32 @@ const jr = Xi(Vi), EA = ({
           {
             condition: !!r.inputProps.required,
             fallback: /* @__PURE__ */ g(
-              C,
+              a,
               {
                 direction: "column",
                 customMaxWidth: l,
                 fullWidth: o,
                 children: [
-                  /* @__PURE__ */ A(Z, { children: r.title }),
+                  /* @__PURE__ */ A(H, { children: r.title }),
                   /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: r.description })
                 ]
               }
             ),
             children: /* @__PURE__ */ g(
-              C,
+              a,
               {
                 direction: "column",
                 customMaxWidth: l,
                 fullWidth: o,
                 children: [
                   /* @__PURE__ */ g(T, { direction: "row", gap: "xs", align: "center", children: [
-                    /* @__PURE__ */ A(Z, { fontSize: e, children: r.title }),
-                    /* @__PURE__ */ A(Z, { color: "error", fontSize: e, children: t }),
+                    /* @__PURE__ */ A(H, { fontSize: e, children: r.title }),
+                    /* @__PURE__ */ A(H, { color: "error", fontSize: e, children: t }),
                     /* @__PURE__ */ A(Y, { condition: !!((c = r.tooltip) != null && c.label), children: /* @__PURE__ */ A(
                       rA,
                       {
                         label: (s = r.tooltip) == null ? void 0 : s.label,
-                        arrowPosition: (a = r.tooltip) == null ? void 0 : a.arrowPosition,
+                        arrowPosition: (C = r.tooltip) == null ? void 0 : C.arrowPosition,
                         ...r.tooltip,
                         children: /* @__PURE__ */ A(
                           m,
@@ -4241,7 +4240,7 @@ const jr = Xi(Vi), EA = ({
             )
           }
         ),
-        /* @__PURE__ */ g(C, { gap: "xs", fullWidth: r.inputProps.fullWidth || !1, children: [
+        /* @__PURE__ */ g(a, { gap: "xs", fullWidth: r.inputProps.fullWidth || !1, children: [
           /* @__PURE__ */ A(
             pA,
             {
@@ -4265,10 +4264,10 @@ const jr = Xi(Vi), EA = ({
   fullWidth: o = !1,
   ...r
 }) => {
-  var c, s, a;
+  var c, s, C;
   const n = r.hideMessageError || !1, l = i === "horizontal" ? e === "sm" ? 342 : e === "lg" ? 400 : 342 : void 0;
   return /* @__PURE__ */ g(
-    C,
+    a,
     {
       gap: i === "horizontal" ? "spacing-96" : "sm",
       direction: i === "horizontal" ? "row" : "column",
@@ -4279,32 +4278,32 @@ const jr = Xi(Vi), EA = ({
           {
             condition: !!r.inputProps.required,
             fallback: /* @__PURE__ */ g(
-              C,
+              a,
               {
                 direction: "column",
                 customMaxWidth: l,
                 fullWidth: o,
                 children: [
-                  /* @__PURE__ */ A(Z, { children: r.title }),
+                  /* @__PURE__ */ A(H, { children: r.title }),
                   /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: r.description })
                 ]
               }
             ),
             children: /* @__PURE__ */ g(
-              C,
+              a,
               {
                 direction: "column",
                 customMaxWidth: l,
                 fullWidth: o,
                 children: [
                   /* @__PURE__ */ g(T, { direction: "row", gap: "xs", align: "center", children: [
-                    /* @__PURE__ */ A(Z, { fontSize: e, children: r.title }),
-                    /* @__PURE__ */ A(Z, { color: "error", fontSize: e, children: t }),
+                    /* @__PURE__ */ A(H, { fontSize: e, children: r.title }),
+                    /* @__PURE__ */ A(H, { color: "error", fontSize: e, children: t }),
                     /* @__PURE__ */ A(Y, { condition: !!((c = r.tooltip) != null && c.label), children: /* @__PURE__ */ A(
                       rA,
                       {
                         label: (s = r.tooltip) == null ? void 0 : s.label,
-                        arrowPosition: (a = r.tooltip) == null ? void 0 : a.arrowPosition,
+                        arrowPosition: (C = r.tooltip) == null ? void 0 : C.arrowPosition,
                         ...r.tooltip,
                         children: /* @__PURE__ */ A(
                           m,
@@ -4326,9 +4325,9 @@ const jr = Xi(Vi), EA = ({
             )
           }
         ),
-        /* @__PURE__ */ g(C, { gap: "xs", fullWidth: r.inputProps.fullWidth || !1, children: [
+        /* @__PURE__ */ g(a, { gap: "xs", fullWidth: r.inputProps.fullWidth || !1, children: [
           /* @__PURE__ */ A(
-            C,
+            a,
             {
               style: {
                 width: r.inputProps.fullWidth ? "100%" : i === "horizontal" && r.customWidth ? r.customWidth : i === "horizontal" ? "343px" : ""
@@ -4351,7 +4350,7 @@ const jr = Xi(Vi), EA = ({
   );
 }, tt = (e, i) => typeof e == "string" && e || i === "error" ? "var(--starasia-ui-color-error)" : "var(--starasia-ui-text-disable)", rt = (e) => {
   var c;
-  const [i, t] = b(!1), o = (s) => {
+  const [i, t] = L(!1), o = (s) => {
     s.preventDefault(), s.stopPropagation();
   }, r = (s) => {
     s.preventDefault(), s.stopPropagation(), s.dataTransfer && e.handleOnFileChange(s.dataTransfer.files.item(0));
@@ -4361,7 +4360,7 @@ const jr = Xi(Vi), EA = ({
     s.preventDefault(), t(!1);
   };
   return /* @__PURE__ */ g(
-    C,
+    a,
     {
       width: "width-full",
       paddingInline: "md",
@@ -4434,7 +4433,7 @@ function nt(e) {
 const lt = (e) => {
   var i, t;
   return /* @__PURE__ */ g(
-    C,
+    a,
     {
       width: "width-full",
       paddingInline: "md",
@@ -4492,7 +4491,7 @@ const lt = (e) => {
                   style: {
                     textWrap: "nowrap"
                   },
-                  children: e.fileDate ? e.fileDate : fA(/* @__PURE__ */ new Date())
+                  children: e.fileDate ? e.fileDate : SA(/* @__PURE__ */ new Date())
                 }
               )
             ] })
@@ -4545,7 +4544,7 @@ const lt = (e) => {
       }
     ),
     /* @__PURE__ */ g(
-      C,
+      a,
       {
         fullWidth: !0,
         style: { minHeight: "69px" },
@@ -4590,10 +4589,10 @@ const lt = (e) => {
   fullWidth: o = !1,
   ...r
 }) => {
-  var c, s, a;
+  var c, s, C;
   const n = r.hideMessageError || !1, l = i === "horizontal" ? e === "sm" ? 342 : e === "lg" ? 400 : 342 : void 0;
   return /* @__PURE__ */ g(
-    C,
+    a,
     {
       gap: i === "horizontal" ? "spacing-96" : "sm",
       direction: i === "horizontal" ? "row" : "column",
@@ -4604,32 +4603,32 @@ const lt = (e) => {
           {
             condition: !!r.inputProps.required,
             fallback: /* @__PURE__ */ g(
-              C,
+              a,
               {
                 direction: "column",
                 customMaxWidth: l,
                 fullWidth: o,
                 children: [
-                  /* @__PURE__ */ A(Z, { children: r.title }),
+                  /* @__PURE__ */ A(H, { children: r.title }),
                   /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: r.description })
                 ]
               }
             ),
             children: /* @__PURE__ */ g(
-              C,
+              a,
               {
                 direction: "column",
                 customMaxWidth: l,
                 fullWidth: o,
                 children: [
                   /* @__PURE__ */ g(T, { direction: "row", gap: "xs", align: "center", children: [
-                    /* @__PURE__ */ A(Z, { fontSize: e, children: r.title }),
-                    /* @__PURE__ */ A(Z, { color: "error", fontSize: e, children: t }),
+                    /* @__PURE__ */ A(H, { fontSize: e, children: r.title }),
+                    /* @__PURE__ */ A(H, { color: "error", fontSize: e, children: t }),
                     /* @__PURE__ */ A(Y, { condition: !!((c = r.tooltip) != null && c.label), children: /* @__PURE__ */ A(
                       rA,
                       {
                         label: (s = r.tooltip) == null ? void 0 : s.label,
-                        arrowPosition: (a = r.tooltip) == null ? void 0 : a.arrowPosition,
+                        arrowPosition: (C = r.tooltip) == null ? void 0 : C.arrowPosition,
                         ...r.tooltip,
                         children: /* @__PURE__ */ A(
                           m,
@@ -4672,10 +4671,10 @@ const lt = (e) => {
   required: r = !1,
   ...n
 }) => {
-  var s, a, d, w;
+  var s, C, d, w;
   const l = n.hideMessageError || !1, c = i === "horizontal" ? e === "sm" ? 342 : e === "lg" ? 400 : 342 : void 0;
   return /* @__PURE__ */ g(
-    C,
+    a,
     {
       gap: i === "horizontal" || i === "horizontal-inline" ? "spacing-96" : "sm",
       direction: i === "horizontal" || i === "horizontal-inline" ? "row" : "column",
@@ -4686,31 +4685,31 @@ const lt = (e) => {
           {
             condition: !!r,
             fallback: /* @__PURE__ */ g(
-              C,
+              a,
               {
                 direction: "column",
                 customMaxWidth: c,
                 fullWidth: o,
                 children: [
-                  /* @__PURE__ */ A(Z, { children: n.title }),
+                  /* @__PURE__ */ A(H, { children: n.title }),
                   /* @__PURE__ */ A(J.Body3, { props: { color: "gray-500" }, children: n.description })
                 ]
               }
             ),
             children: /* @__PURE__ */ g(
-              C,
+              a,
               {
                 direction: "column",
                 customMaxWidth: c,
                 fullWidth: o,
                 children: [
                   /* @__PURE__ */ g(T, { direction: "row", gap: "xs", align: "center", children: [
-                    /* @__PURE__ */ A(Z, { fontSize: e, children: n.title }),
-                    /* @__PURE__ */ A(Z, { color: "error", fontSize: e, children: t }),
+                    /* @__PURE__ */ A(H, { fontSize: e, children: n.title }),
+                    /* @__PURE__ */ A(H, { color: "error", fontSize: e, children: t }),
                     /* @__PURE__ */ A(Y, { condition: !!((s = n.tooltip) != null && s.label), children: /* @__PURE__ */ A(
                       rA,
                       {
-                        label: (a = n.tooltip) == null ? void 0 : a.label,
+                        label: (C = n.tooltip) == null ? void 0 : C.label,
                         arrowPosition: (d = n.tooltip) == null ? void 0 : d.arrowPosition,
                         ...n.tooltip,
                         children: /* @__PURE__ */ A(
@@ -4734,20 +4733,20 @@ const lt = (e) => {
           }
         ),
         /* @__PURE__ */ A(
-          C,
+          a,
           {
             gap: i === "horizontal-inline" ? "xl" : "md",
             direction: i === "horizontal-inline" ? "row" : "column",
             align: "flex-start",
             children: /* @__PURE__ */ A(
-              EA,
+              MA,
               {
                 of: (w = n.checkBoxesList) == null ? void 0 : w.map((B) => ({
                   ...B,
                   isChecked: n.checkBoxesAreChecked.includes(B.id)
                 })),
                 render: (B) => B.renderBadge ? /* @__PURE__ */ g(
-                  C,
+                  a,
                   {
                     direction: "row",
                     justify: "space-between",
@@ -4760,7 +4759,7 @@ const lt = (e) => {
                           name: B.name,
                           value: B.id,
                           checked: B.isChecked,
-                          onChange: (k) => n.onChecked(k.target.value, B),
+                          onChange: (D) => n.onChecked(D.target.value, B),
                           label: B.name,
                           description: B.description
                         }
@@ -4774,7 +4773,7 @@ const lt = (e) => {
                     name: B.name,
                     value: B.id,
                     checked: B.isChecked,
-                    onChange: (k) => n.onChecked(k.target.value, B),
+                    onChange: (D) => n.onChecked(D.target.value, B),
                     label: B.name,
                     description: B.description
                   }
@@ -4796,40 +4795,40 @@ const lt = (e) => {
   var n;
   const r = e === "horizontal-inline" || e === "horizontal-block" ? i === "sm" ? 342 : i === "lg" ? 400 : 342 : void 0;
   return /* @__PURE__ */ g(
-    C,
+    a,
     {
       gap: e === "horizontal-inline" || e === "horizontal-block" ? "spacing-96" : "sm",
       direction: e === "horizontal-inline" || e === "horizontal-block" ? "row" : "column",
       children: [
         /* @__PURE__ */ A(Y, { condition: !!o.description || !!o.title, children: /* @__PURE__ */ g(
-          C,
+          a,
           {
             direction: "column",
             customMaxWidth: r,
             fullWidth: t,
             children: [
-              o.title && /* @__PURE__ */ A(Z, { children: o.title }),
+              o.title && /* @__PURE__ */ A(H, { children: o.title }),
               /* @__PURE__ */ A(Y, { condition: !!o.description, children: /* @__PURE__ */ A(Q, { color: "gray-500", children: o.description }) })
             ]
           }
         ) }),
         /* @__PURE__ */ A(
-          C,
+          a,
           {
             gap: "sm",
             direction: e === "horizontal" || e === "horizontal-inline" ? "row" : "column",
             align: "flex-start",
             flexWrap: "wrap",
             children: /* @__PURE__ */ A(
-              EA,
+              MA,
               {
                 of: (n = o.radioList) == null ? void 0 : n.map((l) => ({
                   ...l,
                   isChecked: o.radioIsChecked === l.id
                 })),
-                render: ({ value: l, id: c, isChecked: s, subInput: a, label: d, description: w }) => /* @__PURE__ */ g(C, { gap: "xs", customMaxWidth: r, children: [
+                render: ({ value: l, id: c, isChecked: s, subInput: C, label: d, description: w }) => /* @__PURE__ */ g(a, { gap: "xs", customMaxWidth: r, children: [
                   /* @__PURE__ */ A(
-                    Fe,
+                    ze,
                     {
                       id: `${c.toString()}-${l}`,
                       name: o.groupName || d,
@@ -4855,7 +4854,7 @@ const lt = (e) => {
                       children: w
                     }
                   ),
-                  a
+                  C
                 ] })
               }
             )
@@ -4872,10 +4871,10 @@ const lt = (e) => {
   fullWidth: o = !1,
   ...r
 }) => {
-  var c, s, a;
+  var c, s, C;
   const n = r.hideMessageError || !1, l = i === "horizontal" ? e === "sm" ? 342 : e === "lg" ? 400 : 342 : void 0;
   return /* @__PURE__ */ g(
-    C,
+    a,
     {
       gap: i === "horizontal" ? "spacing-96" : "sm",
       direction: i === "horizontal" ? "row" : "column",
@@ -4886,32 +4885,32 @@ const lt = (e) => {
           {
             condition: !!r.inputProps.required,
             fallback: /* @__PURE__ */ g(
-              C,
+              a,
               {
                 direction: "column",
                 customMaxWidth: l,
                 fullWidth: o,
                 children: [
-                  /* @__PURE__ */ A(Z, { children: r.title }),
+                  /* @__PURE__ */ A(H, { children: r.title }),
                   /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: r.description })
                 ]
               }
             ),
             children: /* @__PURE__ */ g(
-              C,
+              a,
               {
                 direction: "column",
                 customMaxWidth: l,
                 fullWidth: o,
                 children: [
                   /* @__PURE__ */ g(T, { direction: "row", gap: "xs", align: "center", children: [
-                    /* @__PURE__ */ A(Z, { fontSize: e, children: r.title }),
-                    /* @__PURE__ */ A(Z, { color: "error", fontSize: e, children: t }),
+                    /* @__PURE__ */ A(H, { fontSize: e, children: r.title }),
+                    /* @__PURE__ */ A(H, { color: "error", fontSize: e, children: t }),
                     /* @__PURE__ */ A(Y, { condition: !!((c = r.tooltip) != null && c.label), children: /* @__PURE__ */ A(
                       rA,
                       {
                         label: (s = r.tooltip) == null ? void 0 : s.label,
-                        arrowPosition: (a = r.tooltip) == null ? void 0 : a.arrowPosition,
+                        arrowPosition: (C = r.tooltip) == null ? void 0 : C.arrowPosition,
                         ...r.tooltip,
                         children: /* @__PURE__ */ A(
                           m,
@@ -4935,7 +4934,7 @@ const lt = (e) => {
         ),
         /* @__PURE__ */ g(T, { gap: "xs", children: [
           /* @__PURE__ */ A(
-            Ye,
+            je,
             {
               ref: r.inputRef,
               size: e,
@@ -4956,10 +4955,10 @@ const lt = (e) => {
   fullWidth: r = !1,
   ...n
 }) => {
-  var c, s, a;
+  var c, s, C;
   const l = i === "horizontal" ? e === "sm" ? 342 : e === "lg" ? 400 : 342 : void 0;
   return /* @__PURE__ */ g(
-    C,
+    a,
     {
       gap: i === "horizontal" ? "spacing-96" : "sm",
       direction: i === "horizontal" ? "row" : "column",
@@ -4970,32 +4969,32 @@ const lt = (e) => {
           {
             condition: o,
             fallback: /* @__PURE__ */ g(
-              C,
+              a,
               {
                 direction: "column",
                 customMaxWidth: l,
                 fullWidth: r,
                 children: [
-                  /* @__PURE__ */ A(Z, { children: n.title }),
+                  /* @__PURE__ */ A(H, { children: n.title }),
                   /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: n.titleDescription })
                 ]
               }
             ),
             children: /* @__PURE__ */ g(
-              C,
+              a,
               {
                 direction: "column",
                 customMaxWidth: l,
                 fullWidth: r,
                 children: [
                   /* @__PURE__ */ g(T, { direction: "row", gap: "xs", align: "center", children: [
-                    /* @__PURE__ */ A(Z, { fontSize: e, children: n.title }),
-                    /* @__PURE__ */ A(Z, { color: "error", fontSize: e, children: t }),
+                    /* @__PURE__ */ A(H, { fontSize: e, children: n.title }),
+                    /* @__PURE__ */ A(H, { color: "error", fontSize: e, children: t }),
                     /* @__PURE__ */ A(Y, { condition: !!((c = n.tooltip) != null && c.label), children: /* @__PURE__ */ A(
                       rA,
                       {
                         label: (s = n.tooltip) == null ? void 0 : s.label,
-                        arrowPosition: (a = n.tooltip) == null ? void 0 : a.arrowPosition,
+                        arrowPosition: (C = n.tooltip) == null ? void 0 : C.arrowPosition,
                         ...n.tooltip,
                         children: /* @__PURE__ */ A(
                           m,
@@ -5036,16 +5035,16 @@ const lt = (e) => {
   ...t
 }) => {
   const o = WA(), r = (l) => {
-    var s, a, d, w, B, k;
+    var s, C, d, w, B, D;
     if (!l) return;
-    const c = t.disabled ? "var(--starasia-ui-text-color-primary-disable)" : e === "secondary" ? "var(--starasia-ui-text-color-secondary)" : e === "secondary-danger" ? (a = (s = o == null ? void 0 : o.computed) == null ? void 0 : s.red) == null ? void 0 : a[600] : e === "secondary-primary" ? (w = (d = o == null ? void 0 : o.computed) == null ? void 0 : d.blue) == null ? void 0 : w[700] : (k = (B = o == null ? void 0 : o.computed) == null ? void 0 : B.gray) == null ? void 0 : k[50];
+    const c = t.disabled ? "var(--starasia-ui-text-color-primary-disable)" : e === "secondary" ? "var(--starasia-ui-text-color-secondary)" : e === "secondary-danger" ? (C = (s = o == null ? void 0 : o.computed) == null ? void 0 : s.red) == null ? void 0 : C[600] : e === "secondary-primary" ? (w = (d = o == null ? void 0 : o.computed) == null ? void 0 : d.blue) == null ? void 0 : w[700] : (D = (B = o == null ? void 0 : o.computed) == null ? void 0 : B.gray) == null ? void 0 : D[50];
     return /* @__PURE__ */ A(m, { name: l, size: i, style: { color: c } });
   }, n = () => {
-    var c, s, a, d;
+    var c, s, C, d;
     if (e !== "secondary-danger" && e !== "secondary-primary")
       return t.title;
     const l = {
-      color: t.disabled ? "var(--starasia-ui-text-color-primary-disable)" : e === "secondary-danger" ? (s = (c = o == null ? void 0 : o.computed) == null ? void 0 : c.red) == null ? void 0 : s[600] : (d = (a = o == null ? void 0 : o.computed) == null ? void 0 : a.blue) == null ? void 0 : d[700]
+      color: t.disabled ? "var(--starasia-ui-text-color-primary-disable)" : e === "secondary-danger" ? (s = (c = o == null ? void 0 : o.computed) == null ? void 0 : c.red) == null ? void 0 : s[600] : (d = (C = o == null ? void 0 : o.computed) == null ? void 0 : C.blue) == null ? void 0 : d[700]
     };
     switch (i) {
       case "xs":
@@ -5090,10 +5089,10 @@ const lt = (e) => {
   fullWidth: o = !1,
   ...r
 }) => {
-  var c, s, a;
+  var c, s, C;
   const n = r.hideMessageError || !1, l = i === "horizontal" ? e === "sm" ? 342 : e === "lg" ? 400 : 342 : void 0;
   return /* @__PURE__ */ g(
-    C,
+    a,
     {
       gap: i === "horizontal" ? "spacing-96" : "sm",
       direction: i === "horizontal" ? "row" : "column",
@@ -5104,32 +5103,32 @@ const lt = (e) => {
           {
             condition: !!r.inputProps.required,
             fallback: /* @__PURE__ */ g(
-              C,
+              a,
               {
                 direction: "column",
                 customMaxWidth: l,
                 fullWidth: o,
                 children: [
-                  /* @__PURE__ */ A(Z, { children: r.title }),
+                  /* @__PURE__ */ A(H, { children: r.title }),
                   /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: r.description })
                 ]
               }
             ),
             children: /* @__PURE__ */ g(
-              C,
+              a,
               {
                 direction: "column",
                 customMaxWidth: l,
                 fullWidth: o,
                 children: [
                   /* @__PURE__ */ g(T, { direction: "row", gap: "xs", align: "center", children: [
-                    /* @__PURE__ */ A(Z, { fontSize: e, children: r.title }),
-                    /* @__PURE__ */ A(Z, { color: "error", fontSize: e, children: t }),
+                    /* @__PURE__ */ A(H, { fontSize: e, children: r.title }),
+                    /* @__PURE__ */ A(H, { color: "error", fontSize: e, children: t }),
                     /* @__PURE__ */ A(Y, { condition: !!((c = r.tooltip) != null && c.label), children: /* @__PURE__ */ A(
                       rA,
                       {
                         label: (s = r.tooltip) == null ? void 0 : s.label,
-                        arrowPosition: (a = r.tooltip) == null ? void 0 : a.arrowPosition,
+                        arrowPosition: (C = r.tooltip) == null ? void 0 : C.arrowPosition,
                         ...r.tooltip,
                         children: /* @__PURE__ */ A(
                           m,
@@ -5153,7 +5152,7 @@ const lt = (e) => {
         ),
         /* @__PURE__ */ g(T, { gap: "xs", children: [
           /* @__PURE__ */ A(
-            C,
+            a,
             {
               style: {
                 width: i === "horizontal" && r.customWidth ? r.customWidth : i === "horizontal" ? "343px" : ""
@@ -5221,52 +5220,52 @@ const oe = {
     aspect: l = "1:1",
     containerProps: c,
     maxFileSize: s = 2,
-    onError: a
+    onError: C
   }, d) => {
-    const w = X("md"), [B, k] = b(!1), [L, h] = b(null), [N, K] = b(!1), [H, v] = b({ x: 0, y: 0 }), [M, I] = b(1), [R, f] = b(null);
-    W(() => {
+    const w = X("md"), [B, D] = L(!1), [b, h] = L(null), [F, N] = L(!1), [Z, v] = L({ x: 0, y: 0 }), [E, I] = L(1), [W, x] = L(null);
+    R(() => {
       i === null && r(null);
     }, [i]);
-    const V = uA(
-      (F, y) => {
-        f(y);
+    const P = uA(
+      (z, y) => {
+        x(y);
       },
       []
-    ), $ = (F) => {
+    ), $ = (z) => {
       var tA;
-      const y = (tA = F.target.files) == null ? void 0 : tA[0];
+      const y = (tA = z.target.files) == null ? void 0 : tA[0];
       if (!y) return;
       const eA = new FileReader();
       eA.onload = () => {
-        h(eA.result), K(!0);
+        h(eA.result), N(!0);
       }, eA.readAsDataURL(y);
-    }, z = async () => {
-      if (!(!L || !R))
+    }, K = async () => {
+      if (!(!b || !W))
         try {
-          const F = await ht(L, R);
-          if (s && F.size > s * 1024 * 1024) {
-            a == null || a(`Ukuran file maksimal ${s}MB`);
+          const z = await ht(b, W);
+          if (s && z.size > s * 1024 * 1024) {
+            C == null || C(`Ukuran file maksimal ${s}MB`);
             return;
           }
-          e == null || e(F);
-          const y = URL.createObjectURL(F);
-          r(y, F), K(!1);
+          e == null || e(z);
+          const y = URL.createObjectURL(z);
+          r(y, z), N(!1);
         } catch {
-          a == null || a("Gagal memproses gambar");
+          C == null || C("Gagal memproses gambar");
         }
-    }, E = iA(null), G = () => {
-      E.current && E.current.click();
+    }, M = iA(null), G = () => {
+      M.current && M.current.click();
     };
-    ze(d, () => ({
+    Ze(d, () => ({
       openFileDialog: () => {
-        var F;
-        (F = E.current) == null || F.click();
+        var z;
+        (z = M.current) == null || z.click();
       }
     }));
-    const D = parseInt(n, 10), u = oe[l];
+    const k = parseInt(n, 10), u = oe[l];
     let p, q;
-    return u >= 1 ? (q = D, p = D * u) : (p = D, q = D / u), /* @__PURE__ */ g(
-      C,
+    return u >= 1 ? (q = k, p = k * u) : (p = k, q = k / u), /* @__PURE__ */ g(
+      a,
       {
         display: "flex",
         position: "relative",
@@ -5284,8 +5283,8 @@ const oe = {
           aspectRatio: u,
           flexShrink: 0
         },
-        onMouseEnter: () => k(!0),
-        onMouseLeave: () => k(!1),
+        onMouseEnter: () => D(!0),
+        onMouseLeave: () => D(!1),
         children: [
           o || i ? /* @__PURE__ */ A(
             "img",
@@ -5299,7 +5298,7 @@ const oe = {
               }
             }
           ) : /* @__PURE__ */ A(
-            C,
+            a,
             {
               display: "flex",
               direction: "column",
@@ -5320,7 +5319,7 @@ const oe = {
             }
           ),
           /* @__PURE__ */ g(
-            C,
+            a,
             {
               position: "absolute",
               display: "flex",
@@ -5338,7 +5337,7 @@ const oe = {
                 /* @__PURE__ */ A(
                   "input",
                   {
-                    ref: E,
+                    ref: M,
                     type: "file",
                     accept: "image/*",
                     onChange: $,
@@ -5346,7 +5345,7 @@ const oe = {
                     style: { display: "none" }
                   }
                 ),
-                /* @__PURE__ */ g(C, { display: "flex", align: "center", gap: "spacing-2", direction: "row", children: [
+                /* @__PURE__ */ g(a, { display: "flex", align: "center", gap: "spacing-2", direction: "row", children: [
                   /* @__PURE__ */ A(
                     m,
                     {
@@ -5368,7 +5367,7 @@ const oe = {
             }
           ),
           t && /* @__PURE__ */ A(
-            C,
+            a,
             {
               position: "absolute",
               display: "flex",
@@ -5380,7 +5379,7 @@ const oe = {
                 backgroundColor: "rgba(255, 255, 255, 0.7)"
               },
               children: /* @__PURE__ */ A(
-                C,
+                a,
                 {
                   borderRadius: "rounded-full",
                   style: {
@@ -5395,16 +5394,16 @@ const oe = {
             }
           ),
           /* @__PURE__ */ g(
-            DA,
+            IA,
             {
-              isShow: N,
-              onHide: () => K(!1),
+              isShow: F,
+              onHide: () => N(!1),
               style: {
                 minWidth: w ? l === "1:1" ? "20rem" : p * 2 : "100%"
               },
               children: [
-                /* @__PURE__ */ A(IA, { children: /* @__PURE__ */ A(
-                  C,
+                /* @__PURE__ */ A(kA, { children: /* @__PURE__ */ A(
+                  a,
                   {
                     position: "relative",
                     style: {
@@ -5412,16 +5411,16 @@ const oe = {
                       height: "20rem",
                       backgroundColor: "gray-100"
                     },
-                    children: L && /* @__PURE__ */ A(
-                      Ze,
+                    children: b && /* @__PURE__ */ A(
+                      Je,
                       {
-                        image: L,
-                        crop: H,
-                        zoom: M,
+                        image: b,
+                        crop: Z,
+                        zoom: E,
                         aspect: l ? oe[l] : void 0,
                         onCropChange: v,
                         onZoomChange: I,
-                        onCropComplete: V,
+                        onCropComplete: P,
                         objectFit: "contain",
                         minZoom: 0.5,
                         restrictPosition: !1
@@ -5429,9 +5428,9 @@ const oe = {
                     )
                   }
                 ) }),
-                /* @__PURE__ */ A(GA, { children: /* @__PURE__ */ g(C, { justify: "flex-end", direction: "row", gap: "sm", children: [
-                  /* @__PURE__ */ A(O, { size: "xs", secondary: !0, onClick: () => K(!1), children: "Cancel" }),
-                  /* @__PURE__ */ A(O, { size: "xs", primary: !0, onClick: z, children: "Crop" })
+                /* @__PURE__ */ A(GA, { children: /* @__PURE__ */ g(a, { justify: "flex-end", direction: "row", gap: "sm", children: [
+                  /* @__PURE__ */ A(O, { size: "xs", secondary: !0, onClick: () => N(!1), children: "Cancel" }),
+                  /* @__PURE__ */ A(O, { size: "xs", primary: !0, onClick: K, children: "Crop" })
                 ] }) })
               ]
             }
@@ -5448,10 +5447,10 @@ const oe = {
   required: r = !1,
   ...n
 }) => {
-  var s, a, d;
+  var s, C, d;
   const l = n.hideMessageError || !1, c = i === "horizontal" ? e === "sm" ? 342 : e === "lg" ? 400 : 342 : void 0;
   return /* @__PURE__ */ g(
-    C,
+    a,
     {
       gap: i === "horizontal" ? "spacing-96" : "sm",
       direction: i === "horizontal" ? "row" : "column",
@@ -5462,31 +5461,31 @@ const oe = {
           {
             condition: !!r,
             fallback: /* @__PURE__ */ g(
-              C,
+              a,
               {
                 direction: "column",
                 customMaxWidth: c,
                 fullWidth: o,
                 children: [
-                  /* @__PURE__ */ A(Z, { children: n.title }),
+                  /* @__PURE__ */ A(H, { children: n.title }),
                   /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: n.description })
                 ]
               }
             ),
             children: /* @__PURE__ */ g(
-              C,
+              a,
               {
                 direction: "column",
                 customMaxWidth: c,
                 fullWidth: o,
                 children: [
                   /* @__PURE__ */ g(T, { direction: "row", gap: "xs", align: "center", children: [
-                    /* @__PURE__ */ A(Z, { fontSize: e, children: n.title }),
-                    /* @__PURE__ */ A(Z, { color: "error", fontSize: e, children: t }),
+                    /* @__PURE__ */ A(H, { fontSize: e, children: n.title }),
+                    /* @__PURE__ */ A(H, { color: "error", fontSize: e, children: t }),
                     /* @__PURE__ */ A(Y, { condition: !!((s = n.tooltip) != null && s.label), children: /* @__PURE__ */ A(
                       rA,
                       {
-                        label: (a = n.tooltip) == null ? void 0 : a.label,
+                        label: (C = n.tooltip) == null ? void 0 : C.label,
                         arrowPosition: (d = n.tooltip) == null ? void 0 : d.arrowPosition,
                         ...n.tooltip,
                         children: /* @__PURE__ */ A(
@@ -5526,7 +5525,7 @@ const oe = {
   var l, c, s;
   const n = i === "horizontal" ? e === "sm" ? 342 : e === "lg" ? 400 : 342 : void 0;
   return /* @__PURE__ */ g(
-    C,
+    a,
     {
       gap: i === "horizontal" ? "spacing-96" : "sm",
       direction: i === "horizontal" ? "row" : "column",
@@ -5537,27 +5536,27 @@ const oe = {
           {
             condition: !!r.inputProps.required,
             fallback: /* @__PURE__ */ g(
-              C,
+              a,
               {
                 direction: "column",
                 customMaxWidth: n,
                 fullWidth: o,
                 children: [
-                  /* @__PURE__ */ A(Z, { children: r.title }),
+                  /* @__PURE__ */ A(H, { children: r.title }),
                   /* @__PURE__ */ A(Q, { fontSize: e, color: "gray-500", children: r.description })
                 ]
               }
             ),
             children: /* @__PURE__ */ g(
-              C,
+              a,
               {
                 direction: "column",
                 customMaxWidth: n,
                 fullWidth: o,
                 children: [
                   /* @__PURE__ */ g(T, { direction: "row", gap: "xs", align: "center", children: [
-                    /* @__PURE__ */ A(Z, { fontSize: e, children: r.title }),
-                    /* @__PURE__ */ A(Z, { color: "error", fontSize: e, children: t }),
+                    /* @__PURE__ */ A(H, { fontSize: e, children: r.title }),
+                    /* @__PURE__ */ A(H, { color: "error", fontSize: e, children: t }),
                     /* @__PURE__ */ A(Y, { condition: !!((l = r.tooltip) != null && l.label), children: /* @__PURE__ */ A(
                       rA,
                       {
@@ -5597,17 +5596,17 @@ const oe = {
   disabled: n = !1
 }) => {
   var d;
-  const [l, c] = b([]);
-  W(() => {
+  const [l, c] = L([]);
+  R(() => {
     e && c([...e.map((w) => ({ id: w.id, isActive: w.isActive }))]);
   }, [e]);
-  const s = (d = l.find((w) => w.id === i)) == null ? void 0 : d.isActive, a = uA(() => {
+  const s = (d = l.find((w) => w.id === i)) == null ? void 0 : d.isActive, C = uA(() => {
     c(
       (w) => w.map((B) => B.id === i ? { ...B, isActive: !B.isActive } : B)
     ), t && t(!s);
   }, [i, t, s]);
   return /* @__PURE__ */ A(
-    C,
+    a,
     {
       direction: "row",
       gap: "md",
@@ -5619,7 +5618,7 @@ const oe = {
         {
           disabled: n,
           checked: s,
-          onChange: a,
+          onChange: C,
           label: s ? "Active" : "Inactive"
         }
       )
@@ -5639,15 +5638,15 @@ const oe = {
   InputImgFile: Dt,
   Custom: It
 }, kt = ({ customBottom: e }) => {
-  const [i, t] = b(!1), o = () => {
+  const [i, t] = L(!1), o = () => {
     window.scrollY > window.screenY ? t(!0) : t(!1);
   }, r = () => {
     window.scrollTo({ top: 0, behavior: "smooth" });
   };
-  return W(() => (window.addEventListener("scroll", o), () => {
+  return R(() => (window.addEventListener("scroll", o), () => {
     window.removeEventListener("scroll", o);
   }), []), /* @__PURE__ */ A(
-    C,
+    a,
     {
       style: {
         position: "fixed",
@@ -5655,7 +5654,7 @@ const oe = {
         right: 0
       },
       children: /* @__PURE__ */ A(
-        C,
+        a,
         {
           position: "absolute",
           style: {
@@ -5691,7 +5690,7 @@ const oe = {
 }, Kr = ({ pageLayout: e, children: i }) => {
   const t = X("lg");
   return /* @__PURE__ */ g(
-    C,
+    a,
     {
       display: "block",
       direction: "row",
@@ -5703,7 +5702,7 @@ const oe = {
       children: [
         e,
         /* @__PURE__ */ A(
-          C,
+          a,
           {
             show: "desktop",
             variant: "aside",
@@ -5732,8 +5731,8 @@ const oe = {
   withScrollToTopButton: i = !1,
   scrollToTopButtonProps: t,
   containerProps: o
-}) => /* @__PURE__ */ A(C, { position: "absolute", width: "width-full", style: { zIndex: "var(--app-footer-zindex, 999)" }, children: /* @__PURE__ */ g(
-  C,
+}) => /* @__PURE__ */ A(a, { position: "absolute", width: "width-full", style: { zIndex: "var(--app-footer-zindex, 999)" }, children: /* @__PURE__ */ g(
+  a,
   {
     position: "fixed",
     bottom: "bottom-0",
@@ -5763,14 +5762,14 @@ const oe = {
       e
     ]
   }
-) }), Hr = ({ fields: e }) => /* @__PURE__ */ A(C, { display: "flex", direction: "column", gap: "lg", children: /* @__PURE__ */ A(
-  EA,
+) }), Hr = ({ fields: e }) => /* @__PURE__ */ A(a, { display: "flex", direction: "column", gap: "lg", children: /* @__PURE__ */ A(
+  MA,
   {
     of: e,
     render: (i, t) => /* @__PURE__ */ A(Et, { ...i }, t)
   }
-) }), Et = ({ title: e, value: i, icon: t }) => /* @__PURE__ */ g(C, { display: "flex", direction: "column", gap: "sm", children: [
-  t ? /* @__PURE__ */ g(C, { display: "flex", direction: "row", align: "center", gap: "xs", children: [
+) }), Et = ({ title: e, value: i, icon: t }) => /* @__PURE__ */ g(a, { display: "flex", direction: "column", gap: "sm", children: [
+  t ? /* @__PURE__ */ g(a, { display: "flex", direction: "row", align: "center", gap: "xs", children: [
     /* @__PURE__ */ A(m, { name: t, color: "var(--starasia-ui-color-gray-300)" }),
     /* @__PURE__ */ A(Q, { color: "gray-500", variant: "sub-h3", children: e })
   ] }) : /* @__PURE__ */ A(Q, { color: "gray-500", variant: "sub-h3", children: e }),
@@ -5929,7 +5928,7 @@ const Jr = ({
   showButton: l = !0,
   customHeight: c,
   childrenButton: s,
-  customIcon: a
+  customIcon: C
 }) => {
   const d = () => {
     switch (o) {
@@ -5953,7 +5952,7 @@ const Jr = ({
     }
   };
   return /* @__PURE__ */ g(
-    C,
+    a,
     {
       height: "height-full",
       display: "flex",
@@ -5964,8 +5963,8 @@ const Jr = ({
       marginBlock: "auto",
       customHeight: c,
       children: [
-        a || /* @__PURE__ */ A(Mt, {}),
-        /* @__PURE__ */ A(C, { children: i.map((w, B) => /* @__PURE__ */ A(
+        C || /* @__PURE__ */ A(Mt, {}),
+        /* @__PURE__ */ A(a, { children: i.map((w, B) => /* @__PURE__ */ A(
           J.Body1,
           {
             props: {
@@ -6187,7 +6186,7 @@ function mt({ width: e, height: i }) {
 function qr({ onClick: e }) {
   const i = X("md");
   return /* @__PURE__ */ g(
-    C,
+    a,
     {
       height: "height-screen",
       fullWidth: !0,
@@ -6438,7 +6437,7 @@ function yt({ width: e, height: i }) {
 function Tr({ onClick: e }) {
   const i = X("md");
   return /* @__PURE__ */ g(
-    C,
+    a,
     {
       height: "height-screen",
       fullWidth: !0,
@@ -7129,7 +7128,7 @@ function xt({ width: e, height: i }) {
 function Ur({ onClick: e }) {
   const i = X("md");
   return /* @__PURE__ */ g(
-    C,
+    a,
     {
       height: "height-screen",
       fullWidth: !0,
@@ -7167,7 +7166,7 @@ const Wr = (e) => {
   var t, o, r, n, l;
   const i = X("md");
   return /* @__PURE__ */ g(
-    DA,
+    IA,
     {
       isShow: e.isShow,
       onHide: e.onHide,
@@ -7180,16 +7179,16 @@ const Wr = (e) => {
       },
       children: [
         /* @__PURE__ */ A(dA, { ...e.dialogTitleProps, children: typeof e.title == "string" ? /* @__PURE__ */ A(Q, { fontSize: "lg", fontWeight: "medium", children: e.title }) : e.title }),
-        /* @__PURE__ */ A(IA, { children: typeof e.description == "string" ? /* @__PURE__ */ A(Q, { fontSize: "md", lineHeight: "leading-6", color: "tertiary", children: e.description }) : e.description }),
+        /* @__PURE__ */ A(kA, { children: typeof e.description == "string" ? /* @__PURE__ */ A(Q, { fontSize: "md", lineHeight: "leading-6", color: "tertiary", children: e.description }) : e.description }),
         /* @__PURE__ */ A(GA, { children: /* @__PURE__ */ A(
-          C,
+          a,
           {
             display: "flex",
             direction: ((t = e.containerConfirmBtnProps) == null ? void 0 : t.direction) || "row",
             justify: ((o = e.containerConfirmBtnProps) == null ? void 0 : o.justify) || "flex-end",
             ...e.containerConfirmBtnProps,
             children: /* @__PURE__ */ g(
-              C,
+              a,
               {
                 display: "flex",
                 direction: ((r = e.wrapperConfirmBtnProps) == null ? void 0 : r.direction) || "row",
@@ -7199,7 +7198,7 @@ const Wr = (e) => {
                 children: [
                   e.onCancel && /* @__PURE__ */ A(O, { secondary: !0, onClick: e.onCancel, size: "md", fullWidth: !0, children: e.titleCancelBtn || "Cancel" }),
                   /* @__PURE__ */ A(
-                    C,
+                    a,
                     {
                       fullWidth: !0,
                       style: {
@@ -7233,31 +7232,79 @@ const Wr = (e) => {
     minHeight: t,
     customHeight: o,
     paddingInline: r = "spacing-0",
-    paddingBlock: n = "spacing-0"
+    paddingBlock: n = "spacing-0",
+    header: l,
+    footer: c,
+    title: s,
+    titleTag: C,
+    action: d,
+    actionContainer: w,
+    containerProps: B,
+    bodyProps: D,
+    headerProps: b = { borderBottom: !0 },
+    footerProps: h = { borderTop: !0 },
+    variantTag: F = "info"
   }) => {
-    const l = iA(null), [c, s] = b("100vh");
-    return W(() => {
-      const a = () => {
-        if (l.current) {
-          const d = l.current.getBoundingClientRect().top;
-          s(`calc(100vh - ${d}px)`);
+    const N = iA(null), [Z, v] = L("100vh");
+    R(() => {
+      const x = () => {
+        if (N.current) {
+          const P = N.current.getBoundingClientRect().top;
+          v(`calc(100vh - ${P}px)`);
         }
       };
-      return a(), window.addEventListener("resize", a), () => window.removeEventListener("resize", a);
-    }, []), /* @__PURE__ */ A(
-      C,
+      return x(), window.addEventListener("resize", x), () => window.removeEventListener("resize", x);
+    }, []);
+    const E = () => C ? /* @__PURE__ */ g(a, { direction: "row", gap: "sm", align: "center", children: [
+      /* @__PURE__ */ A(Q, { fontWeight: "medium", children: s }),
+      /* @__PURE__ */ A(DA, { border: !0, text: C, variant: F })
+    ] }) : /* @__PURE__ */ A(Q, { fontWeight: "medium", children: s }), I = () => l || /* @__PURE__ */ g(
+      a,
+      {
+        direction: "row",
+        justify: "space-between",
+        align: "flex-start",
+        gap: "lg",
+        children: [
+          /* @__PURE__ */ A(a, { children: s ? E() : null }),
+          /* @__PURE__ */ A(a, { ...w, children: d ?? null })
+        ]
+      }
+    ), W = !!(l || s || d);
+    return /* @__PURE__ */ g(
+      a,
       {
-        ref: l,
+        ref: N,
         height: i,
         customMinHeight: t,
         customHeight: o,
         paddingBlock: n,
         paddingInline: r,
         bg: "white",
+        direction: "column",
+        ...B,
         style: {
-          minHeight: c
+          display: "flex",
+          minHeight: Z,
+          ...(B == null ? void 0 : B.style) ?? {}
         },
-        children: e
+        children: [
+          l !== null && W ? /* @__PURE__ */ A(ke, { ...b, children: I() }) : null,
+          /* @__PURE__ */ A(
+            a,
+            {
+              padding: "spacing-0",
+              ...D,
+              style: {
+                flex: 1,
+                overflow: "auto",
+                ...(D == null ? void 0 : D.style) ?? {}
+              },
+              children: e
+            }
+          ),
+          c ? /* @__PURE__ */ A(Ee, { ...h, children: c }) : null
+        ]
       }
     );
   }
@@ -7279,24 +7326,24 @@ function Pr({
   menuConfig: i,
   formatTitle: t
 }) {
-  const o = kA();
-  W(() => {
+  const o = EA();
+  R(() => {
     let r = null, n = null;
     for (const s of i) {
-      const a = s.items.find((d) => d.to ? d.to === "/" ? o.pathname === "/" : !!(d.to === o.pathname || o.pathname.startsWith(d.to + "/")) : !1);
-      if (a) {
-        r = a, n = s;
+      const C = s.items.find((d) => d.to ? d.to === "/" ? o.pathname === "/" : !!(d.to === o.pathname || o.pathname.startsWith(d.to + "/")) : !1);
+      if (C) {
+        r = C, n = s;
         break;
       }
     }
     const l = [];
     r != null && r.title && l.push(r.title), n != null && n.name && l.push(n.name.toTitleCase());
-    const c = (s, a) => s.length > 0 ? `${s.join(" - ")} | ${a}` : a;
+    const c = (s, C) => s.length > 0 ? `${s.join(" - ")} | ${C}` : C;
     document.title = (t || c)(l, e);
   }, [o.pathname]);
 }
 const Vr = () => {
-  const [e, i] = jA(), t = YA(e.toString()), o = Qe(), r = kA(), n = o.id;
+  const [e, i] = jA(), t = YA(e.toString()), o = Qe(), r = EA(), n = o.id;
   return {
     // query params
     setSearchParams: i,
@@ -7318,17 +7365,17 @@ function Xr(e) {
   var o, r;
   const i = e.decodedAccessToken;
   return cA(() => {
-    var s, a;
-    const n = ((a = (s = i == null ? void 0 : i.access) == null ? void 0 : s.role) == null ? void 0 : a.code) ?? "", l = Object.keys(e.role).reduce(
+    var s, C;
+    const n = ((C = (s = i == null ? void 0 : i.access) == null ? void 0 : s.role) == null ? void 0 : C.code) ?? "", l = Object.keys(e.role).reduce(
       (d, w) => {
-        const B = `is${w.toLowerCase().replace(/(^\w|_\w)/g, (k) => k.replace("_", "").toUpperCase())}`;
+        const B = `is${w.toLowerCase().replace(/(^\w|_\w)/g, (D) => D.replace("_", "").toUpperCase())}`;
         return { ...d, [B]: !1 };
       },
       {}
     );
     return {
       ...Object.keys(e.role).reduce((d, w) => {
-        const B = `is${w.toLowerCase().replace(/(^\w|_\w)/g, (k) => k.replace("_", "").toUpperCase())}`;
+        const B = `is${w.toLowerCase().replace(/(^\w|_\w)/g, (D) => D.replace("_", "").toUpperCase())}`;
         return {
           ...d,
           [B]: n === e.role[w]
@@ -7344,7 +7391,7 @@ export {
   br as AdvanceFilter,
   Ji as AdvanceFilterBar,
   er as App,
-  Ue as AppComponent,
+  Re as AppComponent,
   he as AppContext,
   ir as AppLayout,
   Kr as AsideBar,
@@ -7353,7 +7400,7 @@ export {
   Wr as ConfirmationDialog,
   Pi as DataTable,
   Y as DecisionWrapper,
-  EA as EachUtils,
+  MA as EachUtils,
   Jr as EmptyStatePage,
   Hi as FilterDrawer,
   Zr as FloatingFooter,
@@ -7365,16 +7412,18 @@ export {
   ut as InputImage,
   nr as ModalDialog,
   tr as ModuleSwitcher,
-  ve as ModuleSwitcherModal,
+  Ve as ModuleSwitcherModal,
   qr as NotFoundPage,
   lr as PageLayout,
   wA as Pressable,
   FA as RightDrawer,
   kt as ScrollToTopButton,
   cr as Section,
+  Ee as SectionFooter,
+  ke as SectionHeader,
   Ur as ServerErrorPage,
-  qe as SidebarBadgesProvider,
-  We as SidebarHeaderSlot,
+  Ue as SidebarBadgesProvider,
+  ve as SidebarHeaderSlot,
   Fr as SwitchApps,
   Wi as TableFooter,
   Ti as TableHeader,
@@ -7387,7 +7436,7 @@ export {
   dr as cssVars,
   ur as formHasChanged,
   wr as formatDate,
-  fA as formatDateToIndonesian,
+  SA as formatDateToIndonesian,
   Cr as formatRupiah,
   Yr as getDateFilterValue,
   Or as getDateRangeFilterValue,
@@ -7417,12 +7466,12 @@ export {
   hr as textWidth,
   Sr as useAdvanceFilter,
   ue as useApp,
-  Je as useAppState,
+  Te as useAppState,
   Xr as useAuthRole,
   Pr as useDynamicTitle,
   Ie as useModuleSelection,
   PA as useRouteInfo,
   Vr as useRouteParams,
-  Te as useSidebarBadges,
+  We as useSidebarBadges,
   vr as useTabState
 };