@starasia/admin 1.3.3 → 1.3.5

package/dist/index.es.js

@@ -3,29 +3,29 @@ import { Badges as VA } from "@starasia/badges";
 export * from "@starasia/badges";
 import { Box as a } from "@starasia/box";
 export * from "@starasia/box";
-import { Button as O } from "@starasia/button";
+import { Button as b } from "@starasia/button";
 export * from "@starasia/button";
 export * from "@starasia/card";
 import { StarasiaDate as XA } from "@starasia/date";
 export * from "@starasia/date";
-import { Dialog as dA, DialogBody as hA, DialogTitle as wA, DialogFooter as yA } from "@starasia/dialog";
+import { Dialog as hA, DialogBody as DA, DialogTitle as wA, DialogFooter as fA } from "@starasia/dialog";
 export * from "@starasia/dialog";
 import { Drawer as ce } from "@starasia/drawer";
 export * from "@starasia/drawer";
-import { Dropdown as xA } from "@starasia/dropdown";
+import { Dropdown as SA } from "@starasia/dropdown";
 export * from "@starasia/dropdown";
-import { useMediaQuery as X, useConfirmation as $A } from "@starasia/hooks";
+import { useMediaQuery as $, useConfirmation as $A } from "@starasia/hooks";
 export * from "@starasia/hooks";
-import { searchParamsToObject as DA } from "@starasia/http";
+import { searchParamsToObject as IA } from "@starasia/http";
 export * from "@starasia/http";
-import { Input as IA } from "@starasia/input";
+import { Input as uA } from "@starasia/input";
 export * from "@starasia/input";
 import { Menu as ge, MenuButton as se, MenuLists as ae, MenuBody as Ce } from "@starasia/menu";
 export * from "@starasia/menu";
 import { Pagination as Be } from "@starasia/pagination";
 export * from "@starasia/pagination";
 export * from "@starasia/storage";
-import { Tr as QA, Td as CA, Table as _A, Thead as we, Th as qA, Tbody as Qe } from "@starasia/table";
+import { Tr as dA, Td as CA, Table as _A, Thead as we, Th as qA, Tbody as Qe } from "@starasia/table";
 export * from "@starasia/table";
 export * from "@starasia/tabs";
 import { Textarea as de } from "@starasia/textarea";
@@ -35,9 +35,9 @@ export * from "@starasia/theme";
 export * from "@starasia/toast";
 import { Toggle as Ae } from "@starasia/toggle";
 export * from "@starasia/toggle";
-import { Tooltip as rA } from "@starasia/tooltip";
+import { Tooltip as oA } from "@starasia/tooltip";
 export * from "@starasia/tooltip";
-import { Checkbox as NA } from "@starasia/checkbox";
+import { Checkbox as xA } from "@starasia/checkbox";
 export * from "@starasia/checkbox";
 import { Radio as Ie } from "@starasia/radio";
 export * from "@starasia/radio";
@@ -51,12 +51,12 @@ export * from "@starasia/progress";
 export * from "@starasia/stepper";
 export * from "@starasia/accordion";
 export * from "@starasia/story-record";
-import { Skeleton as lA } from "@starasia/skeleton";
+import { Skeleton as cA } from "@starasia/skeleton";
 export * from "@starasia/skeleton";
 import { jsx as A, jsxs as s, Fragment as U } from "react/jsx-runtime";
-import gA, { createContext as ue, useState as b, useContext as ke, memo as _, useRef as eA, useEffect as W, useLayoutEffect as FA, useMemo as cA, isValidElement as ee, forwardRef as ZA, useCallback as HA, Children as Ee, useImperativeHandle as Me } from "react";
+import sA, { createContext as ue, useState as O, useContext as ke, memo as AA, useRef as iA, useEffect as W, useLayoutEffect as FA, useMemo as gA, isValidElement as ee, forwardRef as ZA, useCallback as HA, Children as Ee, useImperativeHandle as Me } from "react";
 import "@starasia/css/dist/style.css";
-import { useSearchParams as uA, useNavigate as ie, useLocation as fA, Outlet as UA, Link as me, useParams as te } from "react-router";
+import { useSearchParams as kA, useNavigate as ie, useLocation as LA, Outlet as UA, Link as me, useParams as te } from "react-router";
 import ye from "react-easy-crop";
 const xe = {
   menus: [],
@@ -67,7 +67,7 @@ const xe = {
   setUserData: () => {
   }
 }, re = ue(xe), fe = () => ke(re), Se = (e) => {
-  const [i, r] = b(
+  const [i, r] = O(
     (e == null ? void 0 : e.initialUserData) || null
   );
   return {
@@ -98,7 +98,7 @@ const xe = {
       children: l ? /* @__PURE__ */ A(TA, { value: l, children: e }) : g ? /* @__PURE__ */ A(TA, { value: g, children: e }) : e
     }
   );
-}, Nt = _(Le);
+}, Nt = AA(Le);
 function Ge({
   collapsed: e = !1,
   children: i
@@ -131,7 +131,7 @@ function Ge({
     }
   ) : null;
 }
-function Oe({
+function be({
   isShow: e,
   onHide: i,
   menus: r,
@@ -142,7 +142,7 @@ function Oe({
     t(l), i();
   };
   return /* @__PURE__ */ A(
-    dA,
+    hA,
     {
       isShow: e,
       onHide: i,
@@ -152,7 +152,7 @@ function Oe({
         boxShadow: "none",
         border: "none"
       },
-      children: /* @__PURE__ */ A(hA, { children: /* @__PURE__ */ s(
+      children: /* @__PURE__ */ A(DA, { children: /* @__PURE__ */ s(
         "div",
         {
           style: {
@@ -276,7 +276,7 @@ function Oe({
     }
   );
 }
-let EA = 0, aA = !1;
+let MA = 0, aA = !1;
 function Ft({
   children: e,
   headerRight: i,
@@ -288,18 +288,18 @@ function Ft({
   sidebarHeaderContent: c,
   showModuleSwitcher: g = !0
 }) {
-  const [C] = uA(), Q = C.get("embed") === "true", w = fe(), B = ie(), I = fA(), h = !X("md"), [j, p] = b(!1), [N, R] = b(!1), [x, u] = b(!1), [P, Z] = b(/* @__PURE__ */ new Set()), [V, AA] = b(!1), [H, k] = b(null), G = eA(null), E = eA(null);
+  const [C] = kA(), Q = C.get("embed") === "true", w = fe(), B = ie(), u = LA(), h = !$("md"), [j, p] = O(!1), [F, R] = O(!1), [f, I] = O(!1), [P, K] = O(/* @__PURE__ */ new Set()), [V, eA] = O(!1), [N, k] = O(null), S = iA(null), E = iA(null);
   W(() => {
-    const m = G.current;
+    const m = S.current;
     if (!m) return;
-    const y = () => {
-      aA || (EA = m.scrollTop);
+    const x = () => {
+      aA || (MA = m.scrollTop);
     };
-    return m.addEventListener("scroll", y), () => m.removeEventListener("scroll", y);
+    return m.addEventListener("scroll", x), () => m.removeEventListener("scroll", x);
   }, []);
   const D = () => {
-    const m = G.current;
-    m && EA > 0 && (aA = !0, m.scrollTop = EA, requestAnimationFrame(() => {
+    const m = S.current;
+    m && MA > 0 && (aA = !0, m.scrollTop = MA, requestAnimationFrame(() => {
       aA = !1;
     }));
   };
@@ -310,91 +310,91 @@ function Ft({
     }, 300);
     return () => clearTimeout(m);
   }, []), FA(() => {
-    w.menus.length > 0 && (EA > 0 ? D() : requestAnimationFrame(() => {
-      var y;
-      const m = (y = G.current) == null ? void 0 : y.querySelector(
+    w.menus.length > 0 && (MA > 0 ? D() : requestAnimationFrame(() => {
+      var x;
+      const m = (x = S.current) == null ? void 0 : x.querySelector(
         "[data-menu-active='true']"
       );
       m && m.scrollIntoView({ block: "center", behavior: "instant" });
     }));
   }, [w.menus]), W(() => {
     aA = !0, D();
-    const m = setTimeout(D, 0), y = setTimeout(D, 50), S = setTimeout(D, 100), v = setTimeout(D, 200), tA = setTimeout(() => {
+    const m = setTimeout(D, 0), x = setTimeout(D, 50), L = setTimeout(D, 100), v = setTimeout(D, 200), rA = setTimeout(() => {
       aA = !1;
     }, 300);
     return () => {
-      clearTimeout(m), clearTimeout(y), clearTimeout(S), clearTimeout(v), clearTimeout(tA);
+      clearTimeout(m), clearTimeout(x), clearTimeout(L), clearTimeout(v), clearTimeout(rA);
     };
-  }, [I.pathname]), W(() => {
+  }, [u.pathname]), W(() => {
     E.current && (E.current.scrollTop = 0);
-  }, [I.pathname]), W(() => {
-    h && u(!1);
-  }, [I.pathname, h]), W(() => {
+  }, [u.pathname]), W(() => {
+    h && I(!1);
+  }, [u.pathname, h]), W(() => {
     h && R(!0);
   }, [h]);
-  const F = () => {
+  const z = () => {
     p(!0);
-  }, f = () => {
+  }, q = () => {
     p(!1);
-  }, J = () => {
+  }, H = () => {
     p(!1), t();
-  }, z = w.menus.flatMap(
-    (m) => m.items.flatMap((y) => {
-      const S = [y.to];
-      return y.children && S.push(...y.children.map((v) => v.to)), S;
+  }, y = w.menus.flatMap(
+    (m) => m.items.flatMap((x) => {
+      const L = [x.to];
+      return x.children && L.push(...x.children.map((v) => v.to)), L;
     })
-  ), iA = (m) => {
-    if (!I.pathname.startsWith(m)) return !1;
-    const y = z.filter((S) => I.pathname.startsWith(S)).sort((S, v) => v.length - S.length)[0];
-    return m === y;
+  ), X = (m) => {
+    if (!u.pathname.startsWith(m)) return !1;
+    const x = y.filter((L) => u.pathname.startsWith(L)).sort((L, v) => v.length - L.length)[0];
+    return m === x;
   };
   W(() => {
     w.menus.forEach((m) => {
-      m.items.forEach((y) => {
-        var S;
-        (S = y.children) != null && S.some((v) => I.pathname.startsWith(v.to)) && Z((v) => {
-          const tA = new Set(v);
-          return tA.add(y.id), tA;
+      m.items.forEach((x) => {
+        var L;
+        (L = x.children) != null && L.some((v) => u.pathname.startsWith(v.to)) && K((v) => {
+          const rA = new Set(v);
+          return rA.add(x.id), rA;
         });
       });
     });
-  }, [I.pathname, w.menus]);
-  const sA = (m) => {
-    Z((y) => {
-      const S = new Set(y);
-      return S.has(m) ? S.delete(m) : S.add(m), S;
+  }, [u.pathname, w.menus]);
+  const tA = (m) => {
+    K((x) => {
+      const L = new Set(x);
+      return L.has(m) ? L.delete(m) : L.add(m), L;
     });
   };
   W(() => {
     if (w.menus.length === 0) return;
     const m = localStorage.getItem("moduleSwitcherGroupId");
     if (m !== null) {
-      const y = Number(m), S = w.menus.some((v) => v.id === y);
-      k(S ? y : null);
+      const x = Number(m), L = w.menus.some((v) => v.id === x);
+      k(L ? x : null);
     }
   }, [w.menus]);
-  const LA = (m) => {
-    var y;
+  const QA = (m) => {
+    var x;
     if (k(m), m === null)
       localStorage.removeItem("moduleSwitcherGroupId");
     else {
       localStorage.setItem("moduleSwitcherGroupId", String(m));
-      const S = w.menus.find((tA) => tA.id === m), v = (y = S == null ? void 0 : S.items[0]) == null ? void 0 : y.to;
+      const L = w.menus.find((rA) => rA.id === m), v = (x = L == null ? void 0 : L.items[0]) == null ? void 0 : x.to;
       v && B(v);
     }
-  }, GA = cA(() => {
-    if (H !== null)
+  }, bA = gA(() => {
+    if (N !== null)
       return w.menus.filter(
-        (S) => S.id === H || S.parentGroupId === H
+        (L) => L.id === N || L.parentGroupId === N
       );
-    const m = w.menus.filter((S) => S.parentGroupId === void 0), y = w.menus.filter((S) => S.parentGroupId !== void 0).flatMap((S) => S.items);
-    return y.length === 0 ? m : [
+    const m = w.menus.filter((L) => L.parentGroupId === void 0), x = w.menus.filter((L) => L.parentGroupId !== void 0).flatMap((L) => L.items);
+    return x.length === 0 ? m : [
       ...m,
-      { id: 18, name: "Pengaturan", items: y, parentGroupId: void 0 }
+      { id: 18, name: "Pengaturan", items: x, parentGroupId: void 0 }
     ];
-  }, [w.menus, H]);
+  }, [w.menus, N]);
   return W(() => {
-    g || AA(!1);
+    g || eA(!1);
   }, [g]), Q ? /* @__PURE__ */ A("main", { style: { height: "100vh", overflowY: "auto", backgroundColor: "#f9fafb" }, children: e || /* @__PURE__ */ A(UA, {}) }) : /* @__PURE__ */ s(U, { children: [
     /* @__PURE__ */ s(
       "div",
@@ -404,8 +404,8 @@ function Ft({
           height: "100vh",
           // backgroundColor: "#f9fafb",
           position: "relative",
-          "--app-sidebar-width": h ? "0px" : N ? "4rem" : "16rem",
-          "--app-footer-zindex": h && x ? "40" : "999"
+          "--app-sidebar-width": h ? "0px" : F ? "4rem" : "16rem",
+          "--app-footer-zindex": h && f ? "40" : "999"
         },
         children: [
           h && /* @__PURE__ */ A(
@@ -416,23 +416,23 @@ function Ft({
                 inset: 0,
                 backgroundColor: "rgba(0, 0, 0, 0.5)",
                 zIndex: 40,
-                opacity: x ? 0.5 : 0,
-                pointerEvents: x ? "auto" : "none",
+                opacity: f ? 0.5 : 0,
+                pointerEvents: f ? "auto" : "none",
                 transition: "opacity 0.3s"
               },
-              onClick: () => u(!1)
+              onClick: () => I(!1)
             }
           ),
           /* @__PURE__ */ s(
             "aside",
             {
               style: {
-                width: h ? "16rem" : N ? "4rem" : "16rem",
+                width: h ? "16rem" : F ? "4rem" : "16rem",
                 position: h ? "fixed" : "relative",
                 ...h && {
                   inset: 0,
                   zIndex: 50,
-                  transform: x ? "translateX(0)" : "translateX(-100%)"
+                  transform: f ? "translateX(0)" : "translateX(-100%)"
                 },
                 backgroundColor: "white",
                 borderRight: "1px solid #e5e7eb",
@@ -476,7 +476,7 @@ function Ft({
                                 }
                               }
                             ),
-                            (!N || x) && /* @__PURE__ */ A(
+                            (!F || f) && /* @__PURE__ */ A(
                               "span",
                               {
                                 style: {
@@ -494,7 +494,7 @@ function Ft({
                       h && /* @__PURE__ */ A(
                         "button",
                         {
-                          onClick: () => u(!1),
+                          onClick: () => I(!1),
                           style: {
                             padding: "0.375rem",
                             borderRadius: "0.5rem",
@@ -530,7 +530,7 @@ function Ft({
                 !h && /* @__PURE__ */ A(
                   "button",
                   {
-                    onClick: () => R(!N),
+                    onClick: () => R(!F),
                     style: {
                       position: "absolute",
                       top: "1.5rem",
@@ -560,7 +560,7 @@ function Ft({
                         stroke: "currentColor",
                         viewBox: "0 0 24 24",
                         strokeWidth: "2",
-                        children: N ? (
+                        children: F ? (
                           // Icon when collapsed (closed) - sidebar with arrow right
                           /* @__PURE__ */ s(U, { children: [
                             /* @__PURE__ */ A(
@@ -608,22 +608,22 @@ function Ft({
                 c && /* @__PURE__ */ A(
                   Ge,
                   {
-                    collapsed: h ? !1 : N,
+                    collapsed: h ? !1 : F,
                     children: c
                   }
                 ),
                 /* @__PURE__ */ A(
                   "div",
                   {
-                    ref: G,
+                    ref: S,
                     style: {
                       flex: 1,
                       overflowY: "auto",
                       paddingTop: "0.5rem",
                       paddingBottom: "0.5rem"
                     },
-                    children: GA.map((m) => /* @__PURE__ */ s("div", { style: { marginBottom: "1rem" }, children: [
-                      (!N || h) && /* @__PURE__ */ A(
+                    children: bA.map((m) => /* @__PURE__ */ s("div", { style: { marginBottom: "1rem" }, children: [
+                      (!F || h) && /* @__PURE__ */ A(
                         "div",
                         {
                           style: {
@@ -641,43 +641,43 @@ function Ft({
                           children: m.name
                         }
                       ),
-                      /* @__PURE__ */ A("div", { style: { paddingLeft: "0.5rem", paddingRight: "0.5rem", display: "flex", flexDirection: "column", gap: "var(--starasia-ui-spacing-xs)" }, children: m.items.map((y) => {
-                        const S = y.children && y.children.length > 0, v = P.has(y.id), tA = S ? y.children.some(($) => iA($.to)) : iA(y.to);
-                        return /* @__PURE__ */ s("div", { "data-menu-active": tA || void 0, children: [
+                      /* @__PURE__ */ A("div", { style: { paddingLeft: "0.5rem", paddingRight: "0.5rem", display: "flex", flexDirection: "column", gap: "var(--starasia-ui-spacing-xs)" }, children: m.items.map((x) => {
+                        const L = x.children && x.children.length > 0, v = P.has(x.id), rA = L ? x.children.some((_) => X(_.to)) : X(x.to);
+                        return /* @__PURE__ */ s("div", { "data-menu-active": rA || void 0, children: [
                           /* @__PURE__ */ s(
                             "button",
                             {
                               onClick: () => {
-                                S ? sA(y.id) : B(y.to);
+                                L ? tA(x.id) : B(x.to);
                               },
                               style: {
                                 width: "100%",
                                 display: "flex",
                                 alignItems: "center",
-                                justifyContent: N && !h ? "center" : void 0,
+                                justifyContent: F && !h ? "center" : void 0,
                                 gap: "0.75rem",
-                                paddingLeft: N && !h ? "0" : "0.75rem",
-                                paddingRight: N && !h ? "0" : "0.75rem",
+                                paddingLeft: F && !h ? "0" : "0.75rem",
+                                paddingRight: F && !h ? "0" : "0.75rem",
                                 paddingTop: "0.5rem",
                                 paddingBottom: "0.5rem",
                                 borderRadius: "var(--starasia-ui-radii-md)",
                                 textAlign: "left",
                                 border: "none",
-                                backgroundColor: tA ? "var(--starasia-ui-brand-primary-tertiary)" : "transparent",
-                                color: tA ? "var(--starasia-ui-brand-primary-default)" : "#374151",
+                                backgroundColor: rA ? "var(--starasia-ui-brand-primary-tertiary)" : "transparent",
+                                color: rA ? "var(--starasia-ui-brand-primary-default)" : "#374151",
                                 transition: "all 0.2s",
                                 cursor: "pointer"
                               },
-                              title: N && !h ? y.title : void 0,
-                              onMouseEnter: ($) => {
-                                tA || ($.currentTarget.style.backgroundColor = "#f3f4f6");
+                              title: F && !h ? x.title : void 0,
+                              onMouseEnter: (_) => {
+                                rA || (_.currentTarget.style.backgroundColor = "#f3f4f6");
                               },
-                              onMouseLeave: ($) => {
-                                tA || ($.currentTarget.style.backgroundColor = "transparent");
+                              onMouseLeave: (_) => {
+                                rA || (_.currentTarget.style.backgroundColor = "transparent");
                               },
                               children: [
-                                /* @__PURE__ */ A(M, { name: y.icon, size: "sm", style: { flexShrink: 0 } }),
-                                (!N || h) && /* @__PURE__ */ s(U, { children: [
+                                /* @__PURE__ */ A(M, { name: x.icon, size: "sm", style: { flexShrink: 0 } }),
+                                (!F || h) && /* @__PURE__ */ s(U, { children: [
                                   /* @__PURE__ */ A(
                                     "span",
                                     {
@@ -688,10 +688,10 @@ function Ft({
                                         transition: "opacity 0.3s",
                                         flex: 1
                                       },
-                                      children: y.title
+                                      children: x.title
                                     }
                                   ),
-                                  S && /* @__PURE__ */ A(
+                                  L && /* @__PURE__ */ A(
                                     "svg",
                                     {
                                       style: {
@@ -719,7 +719,7 @@ function Ft({
                               ]
                             }
                           ),
-                          S && (!N || h) && /* @__PURE__ */ A(
+                          L && (!F || h) && /* @__PURE__ */ A(
                             "div",
                             {
                               style: {
@@ -728,14 +728,14 @@ function Ft({
                                 borderLeft: "1px solid #e5e7eb",
                                 overflow: "hidden",
                                 transition: "all 0.3s ease-in-out",
-                                maxHeight: v ? `${y.children.length * 44}px` : "0px",
+                                maxHeight: v ? `${x.children.length * 44}px` : "0px",
                                 opacity: v ? 1 : 0,
                                 marginTop: v ? "0.25rem" : "0px"
                               },
-                              children: y.children.map(($) => /* @__PURE__ */ s(
+                              children: x.children.map((_) => /* @__PURE__ */ s(
                                 "button",
                                 {
-                                  onClick: () => B($.to),
+                                  onClick: () => B(_.to),
                                   style: {
                                     width: "100%",
                                     display: "flex",
@@ -748,22 +748,22 @@ function Ft({
                                     borderRadius: "var(--starasia-ui-radii-md)",
                                     textAlign: "left",
                                     border: "none",
-                                    backgroundColor: iA($.to) ? "var(--starasia-ui-brand-primary-tertiary)" : "transparent",
-                                    color: iA($.to) ? "var(--starasia-ui-brand-primary-default)" : "#4b5563",
+                                    backgroundColor: X(_.to) ? "var(--starasia-ui-brand-primary-tertiary)" : "transparent",
+                                    color: X(_.to) ? "var(--starasia-ui-brand-primary-default)" : "#4b5563",
                                     transition: "all 0.2s",
                                     cursor: "pointer"
                                   },
                                   onMouseEnter: (OA) => {
-                                    iA($.to) || (OA.currentTarget.style.backgroundColor = "#f3f4f6");
+                                    X(_.to) || (OA.currentTarget.style.backgroundColor = "#f3f4f6");
                                   },
                                   onMouseLeave: (OA) => {
-                                    iA($.to) || (OA.currentTarget.style.backgroundColor = "transparent");
+                                    X(_.to) || (OA.currentTarget.style.backgroundColor = "transparent");
                                   },
                                   children: [
                                     /* @__PURE__ */ A(
                                       M,
                                       {
-                                        name: $.icon,
+                                        name: _.icon,
                                         size: "sm",
                                         style: { flexShrink: 0 }
                                       }
@@ -776,16 +776,16 @@ function Ft({
                                           fontWeight: "500",
                                           whiteSpace: "nowrap"
                                         },
-                                        children: $.title
+                                        children: _.title
                                       }
                                     )
                                   ]
                                 },
-                                $.id
+                                _.id
                               ))
                             }
                           )
-                        ] }, y.id);
+                        ] }, x.id);
                       }) })
                     ] }, m.id))
                   }
@@ -813,7 +813,7 @@ function Ft({
                     h && /* @__PURE__ */ A(
                       "button",
                       {
-                        onClick: () => u(!0),
+                        onClick: () => I(!0),
                         style: {
                           padding: "0.375rem",
                           borderRadius: "0.5rem",
@@ -849,7 +849,7 @@ function Ft({
                       /* @__PURE__ */ A(
                         "button",
                         {
-                          onClick: () => AA(!0),
+                          onClick: () => eA(!0),
                           style: {
                             display: "inline-flex",
                             alignItems: "center",
@@ -872,7 +872,7 @@ function Ft({
                           children: /* @__PURE__ */ A(M, { name: "GridApplication", size: "sm" })
                         }
                       ),
-                      H !== null && /* @__PURE__ */ A(
+                      N !== null && /* @__PURE__ */ A(
                         "span",
                         {
                           style: {
@@ -897,7 +897,7 @@ function Ft({
                           gap: "0.75rem",
                           cursor: "pointer"
                         },
-                        onClick: F,
+                        onClick: z,
                         children: [
                           /* @__PURE__ */ s("div", { style: { textAlign: "right", maxWidth: "12.5rem" }, children: [
                             /* @__PURE__ */ A(
@@ -986,28 +986,28 @@ function Ft({
       }
     ),
     g && /* @__PURE__ */ A(
-      Oe,
+      be,
       {
         isShow: V,
-        onHide: () => AA(!1),
+        onHide: () => eA(!1),
         menus: w.menus.filter((m) => m.parentGroupId === void 0),
-        selectedGroupId: H,
-        onSelect: LA
+        selectedGroupId: N,
+        onSelect: QA
       }
     ),
-    /* @__PURE__ */ s(dA, { isShow: j, onHide: f, children: [
+    /* @__PURE__ */ s(hA, { isShow: j, onHide: q, children: [
       /* @__PURE__ */ A(wA, { children: "Confirmation Logout" }),
-      /* @__PURE__ */ A(hA, { children: "Are you sure you want to end the session and exit the page?" }),
-      /* @__PURE__ */ A(yA, { children: /* @__PURE__ */ A(a, { display: "flex", align: "flex-end", justify: "center", children: /* @__PURE__ */ s(T, { direction: "row", gap: "sm", align: "center", children: [
-        /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(O, { secondary: !0, onClick: f, children: "Cancel" }) }),
-        /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(O, { primary: !0, onClick: J, children: "Yes, Sure" }) })
+      /* @__PURE__ */ A(DA, { children: "Are you sure you want to end the session and exit the page?" }),
+      /* @__PURE__ */ A(fA, { children: /* @__PURE__ */ A(a, { display: "flex", align: "flex-end", justify: "center", children: /* @__PURE__ */ s(T, { direction: "row", gap: "sm", align: "center", children: [
+        /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(b, { secondary: !0, onClick: q, children: "Cancel" }) }),
+        /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(b, { primary: !0, onClick: H, children: "Yes, Sure" }) })
       ] }) }) })
     ] })
   ] });
 }
-const zt = _(
+const zt = AA(
   ({ children: e, coverImage: i, logo: r }) => {
-    const o = X("md"), t = De();
+    const o = $("md"), t = De();
     return /* @__PURE__ */ s(
       a,
       {
@@ -1093,7 +1093,7 @@ const zt = _(
       }
     );
   }
-), be = (e, i) => {
+), Oe = (e, i) => {
   const r = [];
   if (i === 0)
     return r.push(e), r;
@@ -1102,7 +1102,7 @@ const zt = _(
     r.push(t);
   }
   return r;
-}, Ye = _(
+}, Ye = AA(
   ({
     value: e,
     label: i,
@@ -1111,14 +1111,14 @@ const zt = _(
     lastIndex: t,
     labelAlign: n = "top"
   }) => {
-    const l = cA(
+    const l = gA(
       () => ({
         padding: 0,
         paddingBottom: t ? 0 : 8,
         verticalAlign: n
       }),
       [t]
-    ), c = cA(
+    ), c = gA(
       () => ({
         padding: 0,
         paddingRight: 8,
@@ -1128,13 +1128,13 @@ const zt = _(
       }),
       [t]
     ), g = () => typeof i == "string" ? /* @__PURE__ */ A(d, { fontWeight: "medium", color: "gray-500", children: i }) : i, C = () => typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ A(d, { color: "text", fontWeight: "medium", children: e }) : e;
-    return /* @__PURE__ */ s(QA, { children: [
+    return /* @__PURE__ */ s(dA, { children: [
       /* @__PURE__ */ A(CA, { style: l, width: o, children: g() }),
       r ? /* @__PURE__ */ A(CA, { style: c, width: 24, children: /* @__PURE__ */ A(d, { fontWeight: "medium", color: "gray-500", children: ":" }) }) : null,
       /* @__PURE__ */ A(CA, { style: l, children: C() })
     ] });
   }
-), pe = _(({ fields: e, separator: i, labelWidth: r }) => /* @__PURE__ */ A(_A, { children: e.map((o, t) => /* @__PURE__ */ A(
+), pe = AA(({ fields: e, separator: i, labelWidth: r }) => /* @__PURE__ */ A(_A, { children: e.map((o, t) => /* @__PURE__ */ A(
   Ye,
   {
     separator: i,
@@ -1143,7 +1143,7 @@ const zt = _(
     ...o
   },
   `field-group-field-${t}`
-)) })), Kt = _(
+)) })), Kt = AA(
   ({
     maxRow: e = 0,
     maxColumn: i = 2,
@@ -1151,8 +1151,8 @@ const zt = _(
     fields: o = [],
     labelWidth: t = 150
   }) => {
-    const n = cA(
-      () => be(o, e),
+    const n = gA(
+      () => Oe(o, e),
       [o, e]
     ), l = n.length > 2, c = () => {
       switch (i) {
@@ -1223,20 +1223,20 @@ const zt = _(
   }, g = () => {
     switch (l) {
       case "info":
-        return /* @__PURE__ */ A(O, { primary: !0, onClick: o, children: n });
+        return /* @__PURE__ */ A(b, { primary: !0, onClick: o, children: n });
       case "danger":
-        return /* @__PURE__ */ A(O, { danger: !0, onClick: o, children: n });
+        return /* @__PURE__ */ A(b, { danger: !0, onClick: o, children: n });
       case "success":
-        return /* @__PURE__ */ A(O, { success: !0, onClick: o, children: n });
+        return /* @__PURE__ */ A(b, { success: !0, onClick: o, children: n });
       default:
-        return /* @__PURE__ */ A(O, { primary: !0, onClick: o, children: n });
+        return /* @__PURE__ */ A(b, { primary: !0, onClick: o, children: n });
     }
   };
-  return /* @__PURE__ */ s(dA, { isShow: t, onHide: r, children: [
+  return /* @__PURE__ */ s(hA, { isShow: t, onHide: r, children: [
     c(),
-    /* @__PURE__ */ A(hA, { children: /* @__PURE__ */ A(d, { children: i }) }),
-    /* @__PURE__ */ A(yA, { children: /* @__PURE__ */ s(a, { justify: "flex-end", direction: "row", gap: "sm", children: [
-      /* @__PURE__ */ A(O, { secondary: !0, onClick: r, children: "Cancel" }),
+    /* @__PURE__ */ A(DA, { children: /* @__PURE__ */ A(d, { children: i }) }),
+    /* @__PURE__ */ A(fA, { children: /* @__PURE__ */ s(a, { justify: "flex-end", direction: "row", gap: "sm", children: [
+      /* @__PURE__ */ A(b, { secondary: !0, onClick: r, children: "Cancel" }),
       g()
     ] }) })
   ] });
@@ -1251,7 +1251,7 @@ const zt = _(
     ...i,
     children: e
   }
-), BA = _(je), Ne = ({
+), BA = AA(je), Ne = ({
   backButton: e,
   title: i,
   titleTag: r,
@@ -1262,25 +1262,25 @@ const zt = _(
   containerProps: c,
   headerProps: g
 }) => {
-  const C = X("lg"), Q = ie(), w = e == null ? void 0 : e.show, B = () => {
+  const C = $("lg"), Q = ie(), w = e == null ? void 0 : e.show, B = () => {
     if (typeof (e == null ? void 0 : e.onClick) == "function") {
       e.onClick();
       return;
     }
     Q(-1, { replace: !0 });
-  }, I = () => n ? ee(n) ? n : /* @__PURE__ */ A(a, { direction: "row", gap: "lg", children: n.map(
-    ({ title: p, icon: N, buttonProps: R, onClick: x }, u) => !p && !N ? null : /* @__PURE__ */ A(
-      O,
+  }, u = () => n ? ee(n) ? n : /* @__PURE__ */ A(a, { direction: "row", gap: "lg", children: n.map(
+    ({ title: p, icon: F, buttonProps: R, onClick: f }, I) => !p && !F ? null : /* @__PURE__ */ A(
+      b,
       {
         fullWidth: !C,
-        iconLeft: N ? /* @__PURE__ */ A(M, { name: N, size: "md" }) : void 0,
-        onClick: x,
+        iconLeft: F ? /* @__PURE__ */ A(M, { name: F, size: "md" }) : void 0,
+        onClick: f,
         ...R,
         children: p
       },
-      `action-${u}`
+      `action-${I}`
     )
-  ) }) : null, L = () => e != null && e.navigateTo ? /* @__PURE__ */ A(a, { direction: "row", children: /* @__PURE__ */ A(
+  ) }) : null, G = () => e != null && e.navigateTo ? /* @__PURE__ */ A(a, { direction: "row", children: /* @__PURE__ */ A(
     me,
     {
       to: e.navigateTo,
@@ -1342,7 +1342,7 @@ const zt = _(
       paddingInline: (g == null ? void 0 : g.paddingInline) || "xl",
       ...g,
       children: [
-        w && L(),
+        w && G(),
         /* @__PURE__ */ s(
           a,
           {
@@ -1355,7 +1355,7 @@ const zt = _(
                 /* @__PURE__ */ A(d, { variant: "h2", fontWeight: "semibold", fontFamily: "Poppins", children: i }),
                 r && /* @__PURE__ */ A(VA, { border: !0, size: "lg", text: r, ...l })
               ] }) : i,
-              I()
+              u()
             ]
           }
         )
@@ -1366,10 +1366,10 @@ const zt = _(
     t && h(),
     j()
   ] });
-}, Ht = _(Ne), Fe = {
+}, Ht = AA(Ne), Fe = {
   icon: "Cross",
   title: ""
-}, SA = ZA(
+}, GA = ZA(
   ({
     onHide: e,
     show: i,
@@ -1435,9 +1435,9 @@ const zt = _(
       ] })
     }
   ) })
-), ze = _(
+), ze = AA(
   ({ children: e, borderBottom: i = !0, padding: r = !0 }) => {
-    const o = X("lg");
+    const o = $("lg");
     return /* @__PURE__ */ A(
       a,
       {
@@ -1452,8 +1452,8 @@ const zt = _(
       }
     );
   }
-), Ke = _(({ children: e }) => {
-  const i = X("lg");
+), Ke = AA(({ children: e }) => {
+  const i = $("lg");
   return /* @__PURE__ */ A(
     a,
     {
@@ -1463,7 +1463,7 @@ const zt = _(
       children: e
     }
   );
-}), Jt = _(
+}), Jt = AA(
   ({
     children: e,
     title: i,
@@ -1478,27 +1478,27 @@ const zt = _(
     searchHighlightPlaceholder: Q = "CTRL + K",
     filterContainer: w,
     actionContainer: B,
-    headerProps: I = { borderBottom: !0 },
-    variantTag: L = "info"
+    headerProps: u = { borderBottom: !0 },
+    variantTag: G = "info"
   }) => {
-    const h = X("lg"), [j, p] = uA(), N = j.get(g), R = DA(j.toString()), x = HA(
+    const h = $("lg"), [j, p] = kA(), F = j.get(g), R = IA(j.toString()), f = HA(
       ({ target: { value: V } }) => {
         c && c(V), g && p({ ...R, [g]: V });
       },
       [g, c, p, R]
-    ), u = () => /* @__PURE__ */ A(
-      IA,
+    ), I = () => /* @__PURE__ */ A(
+      uA,
       {
         placeholder: C,
         highlightPlaceholder: Q,
         leftIcon: /* @__PURE__ */ A(M, { name: "Search", width: 20, height: 20 }),
-        onChange: x,
+        onChange: f,
         style: { width: "100%" },
-        value: N || ""
+        value: F || ""
       }
     ), P = () => r ? /* @__PURE__ */ s(a, { direction: "row", gap: "sm", align: "center", children: [
       /* @__PURE__ */ A(d, { fontWeight: "medium", children: i }),
-      /* @__PURE__ */ A(VA, { border: !0, text: r, variant: L })
+      /* @__PURE__ */ A(VA, { border: !0, text: r, variant: G })
     ] }) : /* @__PURE__ */ A(d, { fontWeight: "medium", children: i });
     return /* @__PURE__ */ s(
       a,
@@ -1507,7 +1507,7 @@ const zt = _(
         borderRadius: "rounded-md",
         variant: "section",
         children: [
-          l !== null ? /* @__PURE__ */ A(ze, { ...I, children: l || /* @__PURE__ */ s(
+          l !== null ? /* @__PURE__ */ A(ze, { ...u, children: l || /* @__PURE__ */ s(
             a,
             {
               direction: "row",
@@ -1521,7 +1521,7 @@ const zt = _(
                   {
                     style: h ? { width: "100%", maxWidth: "19.313rem" } : { flex: 1 },
                     ...B,
-                    children: o || (n ? u() : null)
+                    children: o || (n ? I() : null)
                   }
                 )
               ]
@@ -1533,7 +1533,7 @@ const zt = _(
     );
   }
 ), Ze = "#E6E9FB", He = ({ children: e, onClick: i }) => {
-  const [r, o] = b("");
+  const [r, o] = O("");
   return /* @__PURE__ */ A(
     BA,
     {
@@ -1554,7 +1554,7 @@ const zt = _(
       children: e
     }
   );
-}, Je = _(He), qe = ({
+}, Je = AA(He), qe = ({
   icon: e,
   items: i = [],
   style: r,
@@ -1565,7 +1565,7 @@ const zt = _(
   iconProps: c,
   variant: g = "default"
 }) => {
-  const C = cA(
+  const C = gA(
     () => ({
       zIndex: 10,
       width: "150px",
@@ -1574,9 +1574,9 @@ const zt = _(
     [t]
   );
   return /* @__PURE__ */ s(ge, { position: n, style: r, children: [
-    /* @__PURE__ */ A(se, { style: o, children: /* @__PURE__ */ A(O, { size: "sm", secondary: !0, ...l, children: /* @__PURE__ */ A(M, { name: e, ...c }) }) }),
+    /* @__PURE__ */ A(se, { style: o, children: /* @__PURE__ */ A(b, { size: "sm", secondary: !0, ...l, children: /* @__PURE__ */ A(M, { name: e, ...c }) }) }),
     /* @__PURE__ */ A(ae, { style: C, children: i.map((Q, w) => g === "outline-button" ? /* @__PURE__ */ A(Ce, { children: /* @__PURE__ */ s(
-      O,
+      b,
       {
         size: "sm",
         secondary: !0,
@@ -1601,7 +1601,7 @@ const zt = _(
       Q.id || w
     )) })
   ] });
-}, qt = _(qe), oe = gA.memo(({ text: e, onClose: i }) => {
+}, qt = AA(qe), oe = sA.memo(({ text: e, onClose: i }) => {
   var o, t;
   const r = KA();
   return /* @__PURE__ */ s(
@@ -1642,7 +1642,7 @@ const zt = _(
       ]
     }
   );
-}), Te = gA.memo(({ items: e = [], onClose: i }) => /* @__PURE__ */ A(
+}), Te = sA.memo(({ items: e = [], onClose: i }) => /* @__PURE__ */ A(
   a,
   {
     direction: "row",
@@ -1672,10 +1672,10 @@ const zt = _(
     }
   let r = new Date(e);
   return r = typeof e != "object" ? void 0 : r, r;
-}, Re = gA.memo(({ title: e, resetButton: i }) => /* @__PURE__ */ s(a, { direction: "row", justify: "space-between", marginBottom: "md", children: [
+}, Re = sA.memo(({ title: e, resetButton: i }) => /* @__PURE__ */ s(a, { direction: "row", justify: "space-between", marginBottom: "md", children: [
   /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(d, { fontWeight: "bold", children: e }) }),
   /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(BA, { onClick: i == null ? void 0 : i.onClick, children: /* @__PURE__ */ A(d, { fontWeight: "bold", color: "error", children: (i == null ? void 0 : i.label) || "Reset" }) }) })
-] })), ve = gA.memo(
+] })), ve = sA.memo(
   ({ value: e, options: i = [], onChange: r, multiple: o }) => {
     const t = (e == null ? void 0 : e.map((c) => c.value)) || [], n = (i == null ? void 0 : i.filter((c) => t.includes(c.value))) || [], l = (c) => {
       const g = [...n];
@@ -1683,7 +1683,7 @@ const zt = _(
       o ? C = t.includes(c.value) ? g.filter((Q) => Q.value !== c.value) : [...g, c] : C = [c], r == null || r(C);
     };
     return /* @__PURE__ */ A(a, { direction: "row", gap: "sm", flexWrap: "wrap", children: i == null ? void 0 : i.map((c, g) => /* @__PURE__ */ A(
-      O,
+      b,
       {
         ...t.includes(c.value) ? { primary: !0 } : { secondary: !0 },
         onClick: () => l(c),
@@ -1692,7 +1692,7 @@ const zt = _(
       g
     )) });
   }
-), ne = gA.memo(
+), ne = sA.memo(
   ZA(
     ({
       label: e,
@@ -1708,28 +1708,28 @@ const zt = _(
       onSearch: Q,
       value: w,
       dateFilter: B,
-      enableInputDate: I,
-      withSearchParam: L,
+      enableInputDate: u,
+      withSearchParam: G,
       // disabled,
       rangedDate: h,
       disabled: j,
       inputTextType: p = "text",
-      min: N,
+      min: F,
       max: R
-    }, x) => {
-      const u = t == null ? void 0 : t.length;
+    }, f) => {
+      const I = t == null ? void 0 : t.length;
       let P;
-      const Z = () => {
+      const K = () => {
         switch (i) {
           case "dropdown":
             return /* @__PURE__ */ A(
-              xA,
+              SA,
               {
                 onSearch: Q,
                 multiSelect: g,
                 searchAble: C,
                 placeholder: n,
-                onChange: (H) => o == null ? void 0 : o({ value: H, name: c, type: i }),
+                onChange: (N) => o == null ? void 0 : o({ value: N, name: c, type: i }),
                 dropdownLists: r || [],
                 defaultValue: w || RA()
               }
@@ -1738,12 +1738,12 @@ const zt = _(
             return /* @__PURE__ */ A(
               XA,
               {
-                input: I,
+                input: u,
                 filter: B,
                 value: We(w || P, h),
-                onChange: (H) => o == null ? void 0 : o({ value: H, name: c, type: i }),
+                onChange: (N) => o == null ? void 0 : o({ value: N, name: c, type: i }),
                 rangedDate: h,
-                ref: x
+                ref: f
               }
             );
           case "select-button":
@@ -1752,48 +1752,65 @@ const zt = _(
               {
                 multiple: g,
                 value: w || RA(),
-                onChange: (H) => o == null ? void 0 : o({ value: H, name: c, type: i }),
+                onChange: (N) => o == null ? void 0 : o({ value: N, name: c, type: i }),
                 options: r
               }
             );
           case "text":
             return /* @__PURE__ */ A(
-              IA,
+              uA,
               {
-                onChange: ({ target: { value: H } }) => o == null ? void 0 : o({ value: H, name: c, type: i }),
+                onChange: ({ target: { value: N } }) => o == null ? void 0 : o({ value: N, name: c, type: i }),
                 value: w || P,
                 placeholder: n,
                 disabled: j,
                 type: p,
                 name: c,
-                ...p === "number" && { min: N, max: R },
+                ...p === "number" && { min: F, max: R },
                 ...(!p || p === "text") && {
-                  minLength: N,
+                  minLength: F,
                   maxLength: R
                 }
               }
             );
+          case "checkbox":
+            return /* @__PURE__ */ A(a, { children: r == null ? void 0 : r.map((N) => {
+              const k = Array.isArray(w) && w.includes(N.value);
+              return /* @__PURE__ */ A(
+                xA,
+                {
+                  label: N.label,
+                  checked: k,
+                  sizes: "sm",
+                  onChange: (S) => {
+                    const E = Array.isArray(w) ? w : [], D = S.target.checked ? [...E, N.value] : E.filter((z) => z !== N.value);
+                    o == null || o({ value: D, name: c, type: i });
+                  }
+                },
+                N.value
+              );
+            }) });
           default:
             return null;
         }
       };
-      return u ? /* @__PURE__ */ A(a, { marginBottom: "lg", children: t == null ? void 0 : t.map((H, k) => /* @__PURE__ */ A(
+      return I ? /* @__PURE__ */ A(a, { marginBottom: "lg", children: t == null ? void 0 : t.map((N, k) => /* @__PURE__ */ A(
         ne,
         {
-          ref: x,
+          ref: f,
           onChange: o,
-          ...H,
-          withSearchParam: L
+          ...N,
+          withSearchParam: G
         },
         k
       )) }) : /* @__PURE__ */ s(a, { marginBottom: "sm", children: [
         l ? /* @__PURE__ */ A(d, { color: "text-muted", marginBottom: "sm", fontWeight: "medium", children: l }) : null,
         e ? /* @__PURE__ */ A(d, { marginBottom: "sm", fontWeight: "medium", children: e }) : null,
-        /* @__PURE__ */ A(a, { children: Z() })
+        /* @__PURE__ */ A(a, { children: K() })
       ] });
     }
   )
-), Pe = gA.memo(
+), Pe = sA.memo(
   ({
     show: e,
     title: i,
@@ -1803,9 +1820,9 @@ const zt = _(
     onHide: n,
     resetting: l
   }) => {
-    const [c, g] = b(!1), C = eA(null), Q = ({ value: B, name: I, type: L }) => {
+    const [c, g] = O(!1), C = iA(null), Q = ({ value: B, name: u, type: G }) => {
       if (o)
-        switch (L) {
+        switch (G) {
           case "date":
             Ue(B);
             break;
@@ -1822,7 +1839,7 @@ const zt = _(
     return W(() => {
       (c || l) && (g(!1), t == null || t(!1));
     }, [c, l]), /* @__PURE__ */ A(U, { children: /* @__PURE__ */ s(
-      SA,
+      GA,
       {
         withBlur: !1,
         paddingHorizontal: !1,
@@ -1832,22 +1849,22 @@ const zt = _(
         ref: C,
         children: [
           /* @__PURE__ */ A(Re, { title: i, resetButton: { onClick: w } }),
-          c || l ? null : /* @__PURE__ */ A(a, { children: r == null ? void 0 : r.map((B, I) => /* @__PURE__ */ A(
+          c || l ? null : /* @__PURE__ */ A(a, { children: r == null ? void 0 : r.map((B, u) => /* @__PURE__ */ A(
             ne,
             {
-              borderBottom: I !== r.length - 1,
+              borderBottom: u !== r.length - 1,
               onChange: Q,
               withSearchParam: o,
               ...B,
               ref: C
             },
-            I
+            u
           )) })
         ]
       }
     ) });
   }
-), Ve = gA.memo(({ active: e, onClick: i }) => {
+), Ve = sA.memo(({ active: e, onClick: i }) => {
   var o, t;
   const r = KA();
   return /* @__PURE__ */ A(
@@ -1882,7 +1899,7 @@ const zt = _(
 function Tt(e) {
   return e.split(" ").map((i) => i[0]).join("").slice(0, 2).toUpperCase();
 }
-const mA = (e) => {
+const yA = (e) => {
   const i = {
     day: "2-digit",
     month: "short",
@@ -1936,23 +1953,23 @@ function vt(e) {
   const r = i.getFullYear(), o = String(i.getMonth() + 1).padStart(2, "0"), t = String(i.getDate()).padStart(2, "0");
   return `${r}-${o}-${t}`;
 }
-const Xe = "starasia-admin", oA = (e) => `var(--${Xe}-${e})`, Pt = {
+const Xe = "starasia-admin", nA = (e) => `var(--${Xe}-${e})`, Pt = {
   base: {
-    borderColor: oA("base-border-color"),
-    textColor: oA("base-text-color"),
-    iconColor: oA("base-icon-color"),
-    placeholderColor: oA("base-placeholder-color")
+    borderColor: nA("base-border-color"),
+    textColor: nA("base-text-color"),
+    iconColor: nA("base-icon-color"),
+    placeholderColor: nA("base-placeholder-color")
   },
   document: {
-    bgColor: oA("document-bg-color")
+    bgColor: nA("document-bg-color")
   },
   sidebar: {
-    bgColor: oA("sidebar-bg-color"),
-    borderColor: oA("sidebar-border-color"),
-    maxWidth: oA("sidebar-max-width"),
-    width: oA("sidebar-width"),
-    collapseWidth: oA("sidebar-collapse-width"),
-    collapseV2Width: oA("sidebar-v2-collapse-width")
+    bgColor: nA("sidebar-bg-color"),
+    borderColor: nA("sidebar-border-color"),
+    maxWidth: nA("sidebar-max-width"),
+    width: nA("sidebar-width"),
+    collapseWidth: nA("sidebar-collapse-width"),
+    collapseV2Width: nA("sidebar-v2-collapse-width")
   }
 }, Vt = 24 * 60 * 60 * 1e3, Xt = (e) => {
   const i = "14px poppins", o = document.createElement("canvas").getContext("2d");
@@ -2058,60 +2075,69 @@ const nr = (e) => {
   }), r;
 }, cr = (e) => {
   var R;
-  const i = cA(() => ({ ...ei, ...e }), [e]), [r, o] = b(!1), [t, n] = b(!1), [l] = b(void 0), c = () => n(!0), g = () => n(!1), C = t ? g : c, Q = () => {
+  const i = gA(() => ({ ...ei, ...e }), [e]), [r, o] = O(!1), [t, n] = O(!1), [l] = O(void 0), c = () => n(!0), g = () => n(!1), C = t ? g : c, Q = () => {
     o(!0);
-  }, w = (x) => {
-    o(x);
-  }, B = l ? ii(l) : void 0, I = !!(B && ((R = Object.values(B)) == null ? void 0 : R.length) > 0), L = () => B ? Object.keys(B).map((x) => {
-    var H, k, G;
-    const u = zA(x, i.fields), P = [];
-    let Z = "";
-    const V = (H = u == null ? void 0 : u.childrenKey) == null ? void 0 : H.length, AA = u == null ? void 0 : u.parentKey;
-    switch (V && ((k = u == null ? void 0 : u.childrenKey) == null || k.forEach((E) => {
+  }, w = (f) => {
+    o(f);
+  }, B = l ? ii(l) : void 0, u = !!(B && ((R = Object.values(B)) == null ? void 0 : R.length) > 0), G = () => B ? Object.keys(B).map((f) => {
+    var N, k, S;
+    const I = zA(f, i.fields), P = [];
+    let K = "";
+    const V = (N = I == null ? void 0 : I.childrenKey) == null ? void 0 : N.length, eA = I == null ? void 0 : I.parentKey;
+    switch (V && ((k = I == null ? void 0 : I.childrenKey) == null || k.forEach((E) => {
       const D = zA(E, i.fields);
       D && P.push({
         name: D == null ? void 0 : D.name,
         label: D == null ? void 0 : D.label,
         value: B[D == null ? void 0 : D.name]
       });
-    })), u == null ? void 0 : u.type) {
+    })), I == null ? void 0 : I.type) {
       case "dropdown":
       case "select-button":
-        const E = B[x] && typeof B[x] != "string" ? B[x] : [], D = (E == null ? void 0 : E.length) > 0 ? (G = E.map((f) => f.label)) == null ? void 0 : G.join(",") : B[x];
-        Z = `${u == null ? void 0 : u.label}: ${D}`;
+        const E = B[f] && typeof B[f] != "string" ? B[f] : [], D = (E == null ? void 0 : E.length) > 0 ? (S = E.map((y) => y.label)) == null ? void 0 : S.join(",") : B[f];
+        K = `${I == null ? void 0 : I.label}: ${D}`;
+        break;
+      case "checkbox":
+        const q = (Array.isArray(B[f]) ? B[f] : []).map(
+          (y) => {
+            var X, tA;
+            return ((tA = (X = I == null ? void 0 : I.options) == null ? void 0 : X.find((QA) => QA.value === y)) == null ? void 0 : tA.label) || y;
+          }
+        ).join(", ");
+        K = `${I == null ? void 0 : I.label}: ${q}`;
         break;
       case "date":
-        if (u.rangedDate) {
-          const f = B[x], J = (u == null ? void 0 : u.dateValueFormatText) === "indonesian" ? mA(new Date(f == null ? void 0 : f.from)) : f == null ? void 0 : f.from, z = (u == null ? void 0 : u.dateValueFormatText) === "indonesian" ? mA(new Date(f == null ? void 0 : f.to)) : f == null ? void 0 : f.to;
-          Z = `${u == null ? void 0 : u.label}: ${J || ""} ~ ${z || ""}`;
+        if (I.rangedDate) {
+          const y = B[f], X = (I == null ? void 0 : I.dateValueFormatText) === "indonesian" ? yA(new Date(y == null ? void 0 : y.from)) : y == null ? void 0 : y.from, tA = (I == null ? void 0 : I.dateValueFormatText) === "indonesian" ? yA(new Date(y == null ? void 0 : y.to)) : y == null ? void 0 : y.to;
+          K = `${I == null ? void 0 : I.label}: ${X || ""} ~ ${tA || ""}`;
           break;
         }
-        const F = (u == null ? void 0 : u.dateValueFormatText) === "indonesian" ? mA(new Date(B[x])) : B[x];
-        Z = `${u == null ? void 0 : u.label}: ${F || ""}`;
+        const H = (I == null ? void 0 : I.dateValueFormatText) === "indonesian" ? yA(new Date(B[f])) : B[f];
+        K = `${I == null ? void 0 : I.label}: ${H || ""}`;
         break;
       default:
-        Z = `${u == null ? void 0 : u.label}: ${B[x]}`;
+        K = `${I == null ? void 0 : I.label}: ${B[f]}`;
         break;
     }
     if (V && P.length > 0) {
       let E = P.map((D) => {
-        var F, f;
-        return D != null && D.value && typeof D.value != "string" ? (f = (F = D == null ? void 0 : D.value) == null ? void 0 : F.map((J) => J == null ? void 0 : J.label)) == null ? void 0 : f.join(",") : D.value;
+        var z, q;
+        return D != null && D.value && typeof D.value != "string" ? (q = (z = D == null ? void 0 : D.value) == null ? void 0 : z.map((H) => H == null ? void 0 : H.label)) == null ? void 0 : q.join(",") : D.value;
       });
       E = E.filter(
         (D) => typeof D < "u" && D !== "" && D !== null
-      ), E && E.length > 0 && (Z = `${Z} ${u.relationLabelChip || "by"} ${E}`);
+      ), E && E.length > 0 && (K = `${K} ${I.relationLabelChip || "by"} ${E}`);
     }
-    return AA && (Z = ""), {
-      name: u == null ? void 0 : u.name,
-      label: u == null ? void 0 : u.label,
-      value: B[x],
-      valueText: Z,
+    return eA && (K = ""), {
+      name: I == null ? void 0 : I.name,
+      label: I == null ? void 0 : I.label,
+      value: B[f],
+      valueText: K,
       children: P
     };
-  }) : [], h = (x) => {
-    x != null && x.name && o(!0);
-  }, j = L();
+  }) : [], h = (f) => {
+    f != null && f.name && o(!0);
+  }, j = G();
   return {
     value: B,
     open: c,
@@ -2120,7 +2146,7 @@ const nr = (e) => {
     reset: Q,
     chips: j,
     toggleConfig: {
-      active: I,
+      active: u,
       onClick: C
     },
     chipsConfig: {
@@ -2140,7 +2166,7 @@ const nr = (e) => {
   Toggle: Ve,
   Chips: Te,
   Chip: oe
-}, ti = (e) => /* @__PURE__ */ A(d, { variant: "h1", children: e.children, ...e.props }), ri = (e) => /* @__PURE__ */ A(d, { variant: "h2", children: e.children, ...e.props }), oi = (e) => /* @__PURE__ */ A(d, { variant: "h3", children: e.children, ...e.props }), ni = (e) => /* @__PURE__ */ A(d, { variant: "h4", children: e.children, ...e.props }), li = (e) => /* @__PURE__ */ A(d, { variant: "h5", children: e.children, ...e.props }), ci = (e) => /* @__PURE__ */ A(d, { variant: "h6", children: e.children, ...e.props }), gi = (e) => /* @__PURE__ */ A(d, { variant: "sub-h1", children: e.children, ...e.props }), si = (e) => /* @__PURE__ */ A(d, { variant: "sub-h2", children: e.children, ...e.props }), ai = (e) => /* @__PURE__ */ A(d, { variant: "sub-h3", children: e.children, ...e.props }), Ci = (e) => /* @__PURE__ */ A(d, { variant: "body-1", children: e.children, ...e.props }), Bi = (e) => /* @__PURE__ */ A(d, { variant: "body-2", children: e.children, ...e.props }), wi = (e) => /* @__PURE__ */ A(d, { variant: "body-3", children: e.children, ...e.props }), q = {
+}, ti = (e) => /* @__PURE__ */ A(d, { variant: "h1", children: e.children, ...e.props }), ri = (e) => /* @__PURE__ */ A(d, { variant: "h2", children: e.children, ...e.props }), oi = (e) => /* @__PURE__ */ A(d, { variant: "h3", children: e.children, ...e.props }), ni = (e) => /* @__PURE__ */ A(d, { variant: "h4", children: e.children, ...e.props }), li = (e) => /* @__PURE__ */ A(d, { variant: "h5", children: e.children, ...e.props }), ci = (e) => /* @__PURE__ */ A(d, { variant: "h6", children: e.children, ...e.props }), gi = (e) => /* @__PURE__ */ A(d, { variant: "sub-h1", children: e.children, ...e.props }), si = (e) => /* @__PURE__ */ A(d, { variant: "sub-h2", children: e.children, ...e.props }), ai = (e) => /* @__PURE__ */ A(d, { variant: "sub-h3", children: e.children, ...e.props }), Ci = (e) => /* @__PURE__ */ A(d, { variant: "body-1", children: e.children, ...e.props }), Bi = (e) => /* @__PURE__ */ A(d, { variant: "body-2", children: e.children, ...e.props }), wi = (e) => /* @__PURE__ */ A(d, { variant: "body-3", children: e.children, ...e.props }), J = {
   H1: ti,
   H2: ri,
   H3: oi,
@@ -2154,7 +2180,7 @@ const nr = (e) => {
   Body2: Bi,
   Body3: wi
 }, JA = () => {
-  const [e, i] = uA(), r = DA(e.toString()), o = te(), t = fA(), n = o.id;
+  const [e, i] = kA(), r = IA(e.toString()), o = te(), t = LA(), n = o.id;
   return {
     // query params
     setSearchParams: i,
@@ -2214,18 +2240,18 @@ const nr = (e) => {
         [i]: C
       }, B = { ...n };
       l && typeof l == "string" && delete B[l], delete B[g];
-      const I = {
+      const u = {
         ...B,
         [c]: JSON.stringify(w)
-      }, L = new URLSearchParams(n).toString(), h = new URLSearchParams(
-        I
+      }, G = new URLSearchParams(n).toString(), h = new URLSearchParams(
+        u
       ).toString();
-      if (L === h)
+      if (G === h)
         return;
-      t(I);
+      t(u);
     }
   }
-}, bA = ({
+}, YA = ({
   name: e,
   filterKey: i = "filter",
   searchParams: r,
@@ -2283,31 +2309,31 @@ const nr = (e) => {
   pageKey: o,
   filters: t
 }) => {
-  const { searchParams: n, setSearchParams: l, searchQueries: c } = JA(), [g, C] = b({}), Q = () => {
+  const { searchParams: n, setSearchParams: l, searchQueries: c } = JA(), [g, C] = O({}), Q = () => {
     n.delete(r || "filter"), l(n);
-  }, w = (B, I) => {
+  }, w = (B, u) => {
     switch (B.type) {
       case "radio": {
-        const { show: L = !0 } = B;
-        return L && /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(a, { children: B.title }) }, I);
+        const { show: G = !0 } = B;
+        return G && /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(a, { children: B.title }) }, u);
       }
       case "dropdown": {
-        const { show: L = !0 } = B;
-        return L && /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(a, { children: B.title }) }, I);
+        const { show: G = !0 } = B;
+        return G && /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(a, { children: B.title }) }, u);
       }
       case "date-range":
-        return /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(a, { children: B.title }) }, I);
+        return /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(a, { children: B.title }) }, u);
       case "date":
-        return /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(a, { children: B.title }) }, I);
+        return /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(a, { children: B.title }) }, u);
       case "dropdown-multiple": {
-        const { show: L = !0 } = B;
-        return L && /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(a, { children: B.title }) }, I);
+        const { show: G = !0 } = B;
+        return G && /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(a, { children: B.title }) }, u);
       }
       default:
         return null;
     }
   };
-  return /* @__PURE__ */ A(SA, { onHide: i, show: e || !1, children: /* @__PURE__ */ s(a, { direction: "column", gap: "md", children: [
+  return /* @__PURE__ */ A(GA, { onHide: i, show: e || !1, children: /* @__PURE__ */ s(a, { direction: "column", gap: "md", children: [
     /* @__PURE__ */ s(T, { direction: "row", justify: "space-between", align: "center", children: [
       /* @__PURE__ */ A(a, { children: "Filter" }),
       /* @__PURE__ */ A(
@@ -2319,7 +2345,7 @@ const nr = (e) => {
         }
       )
     ] }),
-    t == null ? void 0 : t.map((B, I) => w(B, I))
+    t == null ? void 0 : t.map((B, u) => w(B, u))
   ] }) });
 }, Mi = ({
   searchKey: e = "q",
@@ -2335,46 +2361,46 @@ const nr = (e) => {
   handleOnReset: Q,
   filterConfigs: w,
   buttonToggleProps: B,
-  position: I = "right",
-  titleSearchLabel: L = "Work Order",
+  position: u = "right",
+  titleSearchLabel: G = "Work Order",
   withTitleLabels: h = !1
 }) => {
-  const p = (B == null ? void 0 : B.isShowLabel) ?? !0, [N, R] = b(!1), [x, u] = b(0), P = () => {
-    u((z) => z + 1);
-  }, { searchParams: Z, setSearchParams: V, getQueryParam: AA } = JA(), H = DA(Z.toString()), k = ki(e, Z, c) || "", [G, E] = b(k), D = AA(c), f = !!(D && !(() => {
+  const p = (B == null ? void 0 : B.isShowLabel) ?? !0, [F, R] = O(!1), [f, I] = O(0), P = () => {
+    I((y) => y + 1);
+  }, { searchParams: K, setSearchParams: V, getQueryParam: eA } = JA(), N = IA(K.toString()), k = ki(e, K, c) || "", [S, E] = O(k), D = eA(c), q = !!(D && !(() => {
     if (D)
       try {
-        const z = JSON.parse(D);
-        return Object.keys(z).length === 1 && z[e] === "";
-      } catch (z) {
-        console.error("Filter parameter is not a valid JSON:", z);
+        const y = JSON.parse(D);
+        return Object.keys(y).length === 1 && y[e] === "";
+      } catch (y) {
+        console.error("Filter parameter is not a valid JSON:", y);
       }
     return !1;
-  })()), J = X("md");
+  })()), H = $("md");
   return W(() => {
     E(k);
   }, [k]), W(() => {
-    if (G === k)
+    if (S === k)
       return;
-    const z = window.setTimeout(() => {
+    const y = window.setTimeout(() => {
       vA({
-        value: G,
+        value: S,
         name: e,
         type: "search",
-        searchQueries: H,
+        searchQueries: N,
         setSearchParams: V,
         filterKey: c,
         pageKey: g
       });
     }, 350);
     return () => {
-      window.clearTimeout(z);
+      window.clearTimeout(y);
     };
   }, [
-    G,
+    S,
     k,
     e,
-    H,
+    N,
     V,
     c,
     g
@@ -2383,41 +2409,41 @@ const nr = (e) => {
     {
       gap: "md",
       style: {
-        flexDirection: J && I === "left" ? "row" : J && I === "right" ? "row-reverse" : "column"
+        flexDirection: H && u === "left" ? "row" : H && u === "right" ? "row-reverse" : "column"
       },
       align: "flex-end",
       children: [
-        f && /* @__PURE__ */ A(a, { justify: "flex-end", children: /* @__PURE__ */ A(
-          O,
+        q && /* @__PURE__ */ A(a, { justify: "flex-end", children: /* @__PURE__ */ A(
+          b,
           {
             onClick: () => {
-              const z = new URLSearchParams(Z);
-              z.delete(c), V(z), E(""), P(), Q && Q();
+              const y = new URLSearchParams(K);
+              y.delete(c), V(y), E(""), P(), Q && Q();
             },
             secondary: !0,
             children: /* @__PURE__ */ A(d, { color: "error", fontWeight: "semibold", children: "Reset" })
           }
         ) }),
-        t == null ? void 0 : t.map(({ minWidth: z, content: iA, title: sA, onClickContainer: LA }, GA) => /* @__PURE__ */ s(
+        t == null ? void 0 : t.map(({ minWidth: y, content: X, title: tA, onClickContainer: QA }, bA) => /* @__PURE__ */ s(
           a,
           {
             gap: "sm",
-            onClick: LA,
+            onClick: QA,
             style: {
-              minWidth: z
+              minWidth: y
             },
             children: [
-              sA && /* @__PURE__ */ A(q.SubH3, { children: sA }),
-              iA
+              tA && /* @__PURE__ */ A(J.SubH3, { children: tA }),
+              X
             ]
           },
-          `extended-filter-${GA}-${x}`
+          `extended-filter-${bA}-${f}`
         )),
         !!(w != null && w.length) && /* @__PURE__ */ A(
-          O,
+          b,
           {
-            primary: f,
-            secondary: !f,
+            primary: q,
+            secondary: !q,
             iconLeft: /* @__PURE__ */ A(
               M,
               {
@@ -2428,7 +2454,7 @@ const nr = (e) => {
                 }
               }
             ),
-            fullWidth: !J,
+            fullWidth: !H,
             onClick: () => R(!0),
             children: p ? "Filter" : void 0
           }
@@ -2441,9 +2467,9 @@ const nr = (e) => {
               minWidth: "126px"
             },
             children: [
-              h && /* @__PURE__ */ A(q.SubH3, { children: "Status" }),
+              h && /* @__PURE__ */ A(J.SubH3, { children: "Status" }),
               /* @__PURE__ */ A(
-                xA,
+                SA,
                 {
                   dropdownLists: [
                     {
@@ -2455,38 +2481,38 @@ const nr = (e) => {
                       value: "inactive"
                     }
                   ],
-                  defaultValue: bA({
+                  defaultValue: YA({
                     get: "value",
                     name: i,
-                    searchParams: Z,
+                    searchParams: K,
                     filterKey: c
                   }) ? [
                     {
-                      label: bA({
+                      label: YA({
                         get: "value",
                         name: i,
-                        searchParams: Z,
+                        searchParams: K,
                         filterKey: c
                       }) === "active" ? "Active" : "InActive",
-                      value: bA({
+                      value: YA({
                         get: "value",
                         name: i,
-                        searchParams: Z,
+                        searchParams: K,
                         filterKey: c
                       })
                     }
                   ] : [],
-                  onChange: (z) => vA({
-                    value: z,
+                  onChange: (y) => vA({
+                    value: y,
                     name: i,
                     type: "dropdown",
-                    searchQueries: H,
+                    searchQueries: N,
                     setSearchParams: V,
                     filterKey: c
                   }),
                   placeholder: h ? "All" : "All Status"
                 },
-                x
+                f
               )
             ]
           }
@@ -2496,23 +2522,23 @@ const nr = (e) => {
           {
             gap: "sm",
             style: {
-              width: C && J ? C : J ? "310px" : ""
+              width: C && H ? C : H ? "310px" : ""
             },
             children: [
-              h && /* @__PURE__ */ s(q.SubH3, { children: [
+              h && /* @__PURE__ */ s(J.SubH3, { children: [
                 "Search for ",
-                L
+                G
               ] }),
               /* @__PURE__ */ A(
-                IA,
+                uA,
                 {
                   placeholder: r,
                   leftIcon: /* @__PURE__ */ A(M, { name: "Search", width: 20, height: 20 }),
-                  onChange: (z) => E(z.target.value),
-                  value: G,
+                  onChange: (y) => E(y.target.value),
+                  value: S,
                   fullWidth: !0
                 },
-                x + 1 + c
+                f + 1 + c
               )
             ]
           }
@@ -2520,7 +2546,7 @@ const nr = (e) => {
         /* @__PURE__ */ A(
           Ei,
           {
-            isOpen: N,
+            isOpen: F,
             onClose: () => R(!1),
             filterKey: c,
             filters: w,
@@ -2531,7 +2557,7 @@ const nr = (e) => {
     }
   );
 }, mi = ({ children: e, borderRadius: i }) => {
-  const r = eA(null), [o, t] = b("100vh");
+  const r = iA(null), [o, t] = O("100vh");
   return W(() => {
     const n = () => {
       if (r.current) {
@@ -2562,7 +2588,7 @@ const nr = (e) => {
   advanceFilter: i,
   showFilter: r = !0
 }) => {
-  const o = X("md"), t = () => e ? ee(e) ? e : /* @__PURE__ */ A(
+  const o = $("md"), t = () => e ? ee(e) ? e : /* @__PURE__ */ A(
     a,
     {
       style: {
@@ -2574,7 +2600,7 @@ const nr = (e) => {
       },
       children: e.map(
         ({ title: n, icon: l, buttonProps: c, onClick: g }, C) => !n && !l ? null : /* @__PURE__ */ A(
-          O,
+          b,
           {
             fullWidth: !o,
             iconLeft: l ? /* @__PURE__ */ A(M, { name: l, size: "md" }) : void 0,
@@ -2630,7 +2656,7 @@ const nr = (e) => {
     },
     children: [
       /* @__PURE__ */ s(
-        q.Body1,
+        J.Body1,
         {
           props: {
             color: "gray-500"
@@ -2641,7 +2667,7 @@ const nr = (e) => {
           ]
         }
       ),
-      /* @__PURE__ */ A(q.Body1, { children: e || 0 })
+      /* @__PURE__ */ A(J.Body1, { children: e || 0 })
     ]
   }
 ), fi = ({
@@ -2652,15 +2678,15 @@ const nr = (e) => {
   showPagination: t = !0,
   totalData: n
 }) => {
-  const { searchQueries: l, setSearchParams: c, searchParams: g } = JA(), C = g.get(r), Q = (L) => {
-    c({ ...l, [i]: String(L) });
-  }, w = (L) => {
+  const { searchQueries: l, setSearchParams: c, searchParams: g } = JA(), C = g.get(r), Q = (G) => {
+    c({ ...l, [i]: String(G) });
+  }, w = (G) => {
     c({
       ...l,
-      [r]: L,
+      [r]: G,
       [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), I = (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), u = (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(
     a,
     {
@@ -2681,7 +2707,7 @@ const nr = (e) => {
         /* @__PURE__ */ s(a, { style: { display: "flex", flexDirection: "row", gap: "8px", alignItems: "center" }, children: [
           /* @__PURE__ */ A(d, { children: "Rows Per Page: " }),
           /* @__PURE__ */ A(
-            xA,
+            SA,
             {
               dropdownLists: [
                 { label: "5", value: "5" },
@@ -2690,13 +2716,13 @@ const nr = (e) => {
                 { label: "50", value: "50" },
                 { label: "100", value: "100" }
               ],
-              onChange: (L) => {
-                w(L[0].value);
+              onChange: (G) => {
+                w(G[0].value);
               },
               defaultValue: C ? [{ label: `${C} per row`, value: C }] : [{ label: `${o} per row`, value: `${o}` }]
             }
           ),
-          /* @__PURE__ */ A(d, { children: `${B}-${I} of ${(e == null ? void 0 : e.totalData) || 0}` })
+          /* @__PURE__ */ A(d, { children: `${B}-${u} of ${(e == null ? void 0 : e.totalData) || 0}` })
         ] }),
         /* @__PURE__ */ A(
           Be,
@@ -2717,7 +2743,7 @@ const nr = (e) => {
     }
   );
 }, Si = ({ filter: e, columnTitle: i }) => {
-  const [r, o] = b(!1), t = eA(null), n = eA(null), l = eA(null), [c, g] = b(""), [C, Q] = b({ top: 0, left: 0 }), w = e.selectedValues, B = cA(() => c ? e.options.filter(
+  const [r, o] = O(!1), t = iA(null), n = iA(null), l = iA(null), [c, g] = O(""), [C, Q] = O({ top: 0, left: 0 }), w = e.selectedValues, B = gA(() => c ? e.options.filter(
     (h) => h.label.toLowerCase().includes(c.toLowerCase())
   ) : e.options, [e.options, c]);
   W(() => {
@@ -2738,10 +2764,10 @@ const nr = (e) => {
     };
     return r && document.addEventListener("mousedown", h), () => document.removeEventListener("mousedown", h);
   }, [r]);
-  const I = (h) => {
+  const u = (h) => {
     const j = w.includes(h) ? w.filter((p) => p !== h) : [...w, h];
     e.onFilterChange(j);
-  }, L = () => e.onFilterChange([]);
+  }, G = () => e.onFilterChange([]);
   return /* @__PURE__ */ s(a, { style: { position: "relative" }, children: [
     /* @__PURE__ */ A(
       a,
@@ -2814,7 +2840,7 @@ const nr = (e) => {
                     color: "primary",
                     fontWeight: "semibold",
                     onClick: (h) => {
-                      h.stopPropagation(), L();
+                      h.stopPropagation(), G();
                     },
                     children: "CLEAR"
                   }
@@ -2832,7 +2858,7 @@ const nr = (e) => {
                 paddingBottom: "8px"
               },
               children: /* @__PURE__ */ A(
-                IA,
+                uA,
                 {
                   ref: l,
                   placeholder: `Search ${i.toLowerCase()}...`,
@@ -2906,7 +2932,7 @@ const nr = (e) => {
                     backgroundColor: w.includes(h.value) ? "rgb(var(--starasia-ui-raw-color-blue-50))" : "transparent"
                   },
                   onClick: (j) => {
-                    j.stopPropagation(), I(h.value);
+                    j.stopPropagation(), u(h.value);
                   },
                   onMouseEnter: (j) => {
                     w.includes(h.value) || (j.currentTarget.style.backgroundColor = "rgb(var(--starasia-ui-raw-color-gray-50))"), j.currentTarget.style.transform = "translateX(2px)";
@@ -2916,7 +2942,7 @@ const nr = (e) => {
                   },
                   children: [
                     /* @__PURE__ */ A(
-                      NA,
+                      xA,
                       {
                         checked: w.includes(h.value),
                         onChange: () => {
@@ -3024,7 +3050,7 @@ const nr = (e) => {
       /* @__PURE__ */ A("path", { d: e ? "M7 11V7a5 5 0 0 1 10 0v4" : "M7 11V7a5 5 0 0 1 9.9-1" })
     ]
   }
-), MA = "var(--starasia-ui-table-bg-default, #ffffff)", YA = "var(--starasia-ui-color-gray-100)", Gi = ({
+), mA = "var(--starasia-ui-table-bg-default, #ffffff)", pA = "var(--starasia-ui-color-gray-100)", Gi = ({
   columns: e,
   records: i,
   handleDetail: r,
@@ -3038,38 +3064,38 @@ const nr = (e) => {
   scrollParentRef: Q,
   frozenCount: w = 0,
   onFrozenCountChange: B,
-  customActions: I,
-  actionsOrder: L = ["detail", "update", "delete", "custom"],
+  customActions: u,
+  actionsOrder: G = ["detail", "update", "delete", "custom"],
   customEmptyState: h
 }) => {
-  const p = [r, o, t].filter((k) => k !== void 0).length, N = !!I, R = p === 3 ? N ? "178px" : "140px" : p === 2 ? N ? "140px" : "102px" : p === 1 ? N ? "112px" : "74px" : N ? "74px" : "", x = (k, G) => {
-    if (!G) return k;
-    if (typeof G == "function") return G(k);
-    if (typeof G == "string") return k[G];
-  }, [u, P] = b(!1);
+  const p = [r, o, t].filter((k) => k !== void 0).length, F = !!u, R = p === 3 ? F ? "178px" : "140px" : p === 2 ? F ? "140px" : "102px" : p === 1 ? F ? "112px" : "74px" : F ? "74px" : "", f = (k, S) => {
+    if (!S) return k;
+    if (typeof S == "function") return S(k);
+    if (typeof S == "string") return k[S];
+  }, [I, P] = O(!1);
   W(() => {
     if (!(Q != null && Q.current)) return;
     const k = Q.current;
     P(k.scrollHeight > k.clientHeight);
   }, [i, Q]);
-  const Z = eA(null), [V, AA] = b([]);
+  const K = iA(null), [V, eA] = O([]);
   FA(() => {
-    if (!w || !Z.current) {
-      AA([]);
+    if (!w || !K.current) {
+      eA([]);
       return;
     }
     const k = Array.from(
-      Z.current.querySelectorAll("thead tr th")
-    ), G = [];
+      K.current.querySelectorAll("thead tr th")
+    ), S = [];
     let E = 0;
-    k.forEach((D, F) => {
-      G[F] = E, F < w && (E += D.offsetWidth);
-    }), AA(G);
+    k.forEach((D, z) => {
+      S[z] = E, z < w && (E += D.offsetWidth);
+    }), eA(S);
   }, [w, e, i]);
-  const H = (k) => {
+  const N = (k) => {
     B && B(k < w ? k : k + 1);
   };
-  return /* @__PURE__ */ A("div", { ref: Z, children: /* @__PURE__ */ s(_A, { fullWidth: !0, children: [
+  return /* @__PURE__ */ A("div", { ref: K, children: /* @__PURE__ */ s(_A, { fullWidth: !0, children: [
     /* @__PURE__ */ A(
       we,
       {
@@ -3077,10 +3103,10 @@ const nr = (e) => {
           height: "40px",
           whiteSpace: "nowrap"
         },
-        children: /* @__PURE__ */ s(QA, { children: [
-          e.map((k, G) => {
-            var F;
-            const E = w > 0 && G < w, D = V[G] ?? 0;
+        children: /* @__PURE__ */ s(dA, { children: [
+          e.map((k, S) => {
+            var z;
+            const E = w > 0 && S < w, D = V[S] ?? 0;
             return /* @__PURE__ */ A(
               qA,
               {
@@ -3089,7 +3115,7 @@ const nr = (e) => {
                   top: 0,
                   left: E ? D : void 0,
                   zIndex: E ? 4 : 2,
-                  paddingLeft: G === 0 ? "12px" : "",
+                  paddingLeft: S === 0 ? "12px" : "",
                   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: k.width,
@@ -3107,7 +3133,7 @@ const nr = (e) => {
                       minWidth: 0
                     },
                     children: [
-                      /* @__PURE__ */ A("span", { style: { flex: 1, minWidth: 0 }, children: k.title || ((F = k.accessor) == null ? void 0 : F.toString()) }),
+                      /* @__PURE__ */ A("span", { style: { flex: 1, minWidth: 0 }, children: k.title || ((z = k.accessor) == null ? void 0 : z.toString()) }),
                       k.filter && /* @__PURE__ */ A(
                         Si,
                         {
@@ -3118,7 +3144,7 @@ const nr = (e) => {
                       B && /* @__PURE__ */ A(
                         "button",
                         {
-                          onClick: () => H(G),
+                          onClick: () => N(S),
                           title: E ? "Unfreeze column" : "Freeze column",
                           style: {
                             background: "none",
@@ -3139,10 +3165,10 @@ const nr = (e) => {
                   }
                 )
               },
-              `table-head-${G}`
+              `table-head-${S}`
             );
           }),
-          r || o || t || I ? /* @__PURE__ */ A(
+          r || o || t || u ? /* @__PURE__ */ A(
             qA,
             {
               style: {
@@ -3158,54 +3184,54 @@ const nr = (e) => {
         ] })
       }
     ),
-    /* @__PURE__ */ A(Qe, { children: n ? /* @__PURE__ */ A(QA, { children: /* @__PURE__ */ A(CA, { colSpan: e.length + 1, children: /* @__PURE__ */ s(a, { style: { gap: "16px" }, children: [
-      /* @__PURE__ */ A(lA, { variant: "list" }),
-      /* @__PURE__ */ A(lA, { variant: "list" }),
-      /* @__PURE__ */ A(lA, { variant: "list" }),
-      /* @__PURE__ */ A(lA, { variant: "list" }),
-      /* @__PURE__ */ A(lA, { variant: "list" })
-    ] }) }) }) : !(i != null && i.length) && h ? /* @__PURE__ */ A(QA, { children: /* @__PURE__ */ A(CA, { colSpan: e.length + 1, children: h }) }) : i == null ? void 0 : i.map((k, G) => /* @__PURE__ */ s(
-      QA,
+    /* @__PURE__ */ A(Qe, { children: n ? /* @__PURE__ */ A(dA, { children: /* @__PURE__ */ A(CA, { colSpan: e.length + 1, children: /* @__PURE__ */ s(a, { style: { gap: "16px" }, children: [
+      /* @__PURE__ */ A(cA, { variant: "list" }),
+      /* @__PURE__ */ A(cA, { variant: "list" }),
+      /* @__PURE__ */ A(cA, { variant: "list" }),
+      /* @__PURE__ */ A(cA, { variant: "list" }),
+      /* @__PURE__ */ A(cA, { variant: "list" })
+    ] }) }) }) : !(i != null && i.length) && h ? /* @__PURE__ */ A(dA, { children: /* @__PURE__ */ A(CA, { colSpan: e.length + 1, children: h }) }) : i == null ? void 0 : i.map((k, S) => /* @__PURE__ */ s(
+      dA,
       {
         style: {
           transition: "background-color 0.3s ease",
           padding: 0,
-          borderBottom: G === i.length - 1 && u ? void 0 : "1px solid var(--starasia-ui-utility-fill-default)"
+          borderBottom: S === i.length - 1 && I ? void 0 : "1px solid var(--starasia-ui-utility-fill-default)"
         },
         onMouseOver: (E) => {
           const D = E.currentTarget;
-          D.style.backgroundColor = YA, D.style.position = "relative", D.style.zIndex = "2", w > 0 && Array.from(D.querySelectorAll("td")).slice(0, w).forEach((f) => {
-            f.style.backgroundColor = YA;
+          D.style.backgroundColor = pA, D.style.position = "relative", D.style.zIndex = "2", w > 0 && Array.from(D.querySelectorAll("td")).slice(0, w).forEach((q) => {
+            q.style.backgroundColor = pA;
           });
-          const F = Array.from(D.querySelectorAll("td")).at(-1);
-          F && F.style.position === "sticky" && (F.style.backgroundColor = YA);
+          const z = Array.from(D.querySelectorAll("td")).at(-1);
+          z && z.style.position === "sticky" && (z.style.backgroundColor = pA);
         },
         onMouseOut: (E) => {
           const D = E.currentTarget;
-          D.style.backgroundColor = "", D.style.position = "", D.style.zIndex = "", w > 0 && Array.from(D.querySelectorAll("td")).slice(0, w).forEach((f) => {
-            f.style.backgroundColor = MA;
+          D.style.backgroundColor = "", D.style.position = "", D.style.zIndex = "", w > 0 && Array.from(D.querySelectorAll("td")).slice(0, w).forEach((q) => {
+            q.style.backgroundColor = mA;
           });
-          const F = Array.from(D.querySelectorAll("td")).at(-1);
-          F && F.style.position === "sticky" && (F.style.backgroundColor = MA);
+          const z = Array.from(D.querySelectorAll("td")).at(-1);
+          z && z.style.position === "sticky" && (z.style.backgroundColor = mA);
         },
         children: [
           e.map((E, D) => {
-            const F = E.render ? E.render(k, G, i) : x(k, E.accessor), f = w > 0 && D < w, J = V[D] ?? 0;
+            const z = E.render ? E.render(k, S, i) : f(k, E.accessor), q = w > 0 && D < w, H = V[D] ?? 0;
             return /* @__PURE__ */ A(
               CA,
               {
                 style: {
-                  position: f ? "sticky" : void 0,
-                  left: f ? J : void 0,
-                  zIndex: f ? 1 : void 0,
-                  backgroundColor: f ? MA : void 0,
+                  position: q ? "sticky" : void 0,
+                  left: q ? H : void 0,
+                  zIndex: q ? 1 : void 0,
+                  backgroundColor: q ? mA : void 0,
                   paddingLeft: D === 0 ? "12px" : "",
                   whiteSpace: "nowrap",
                   borderLeft: E.showBorderLeft ? "1px solid var(--starasia-ui-utility-fill-default)" : void 0,
                   borderRight: E.showBorderRight ? "1px solid var(--starasia-ui-utility-fill-default)" : void 0,
                   textAlign: E.textAlign === "text-right" ? "right" : E.textAlign === "text-center" ? "center" : "left"
                 },
-                children: typeof F == "string" ? /* @__PURE__ */ A(
+                children: typeof z == "string" ? /* @__PURE__ */ A(
                   d,
                   {
                     style: {
@@ -3214,62 +3240,62 @@ const nr = (e) => {
                       textOverflow: "ellipsis",
                       textAlign: E.textAlign === "text-right" ? "right" : E.textAlign === "text-center" ? "center" : "left"
                     },
-                    children: F
+                    children: z
                   }
-                ) : F
+                ) : z
               },
-              `row-${G}-col-${D}`
+              `row-${S}-col-${D}`
             );
           }),
-          r || o || t || I ? /* @__PURE__ */ A(CA, { style: {
+          r || o || t || u ? /* @__PURE__ */ A(CA, { style: {
             width: R,
             position: "sticky",
             right: 0,
             zIndex: 1,
-            backgroundColor: MA
-          }, children: /* @__PURE__ */ A(T, { direction: "row", align: "center", justify: "center", gap: "sm", children: L.map((E) => {
-            const D = G === i.length - 1 ? "top" : "bottom";
-            return E === "detail" && r && (g == null ? void 0 : g(k)) !== !1 ? /* @__PURE__ */ A(rA, { label: "Detail", position: D, children: /* @__PURE__ */ A(
-              O,
+            backgroundColor: mA
+          }, children: /* @__PURE__ */ A(T, { direction: "row", align: "center", justify: "center", gap: "sm", children: G.map((E) => {
+            const D = S === i.length - 1 ? "top" : "bottom";
+            return E === "detail" && r && (g == null ? void 0 : g(k)) !== !1 ? /* @__PURE__ */ A(oA, { label: "Detail", position: D, children: /* @__PURE__ */ A(
+              b,
               {
                 size: "xs",
                 secondary: !0,
                 onClick: () => r(k.id, k),
                 iconLeft: /* @__PURE__ */ A(M, { name: "DocumentClean", size: "sm", style: { color: "rgb(var(--starasia-ui-raw-color-gray-600))" } })
               }
-            ) }, "detail") : E === "update" && o && (c == null ? void 0 : c(k)) !== !1 ? /* @__PURE__ */ A(rA, { label: "Update", position: D, children: /* @__PURE__ */ A(
-              O,
+            ) }, "detail") : E === "update" && o && (c == null ? void 0 : c(k)) !== !1 ? /* @__PURE__ */ A(oA, { label: "Update", position: D, children: /* @__PURE__ */ A(
+              b,
               {
                 size: "xs",
                 secondary: !0,
                 onClick: () => o(k),
                 iconLeft: /* @__PURE__ */ A(M, { name: "Edit1", size: "sm", style: { color: "rgb(var(--starasia-ui-raw-color-gray-600))" } })
               }
-            ) }, "update") : E === "delete" && t && (l == null ? void 0 : l(k)) !== !1 ? /* @__PURE__ */ A(rA, { label: "Delete", position: D, children: /* @__PURE__ */ A(
-              O,
+            ) }, "update") : E === "delete" && t && (l == null ? void 0 : l(k)) !== !1 ? /* @__PURE__ */ A(oA, { label: "Delete", position: D, children: /* @__PURE__ */ A(
+              b,
               {
                 size: "xs",
                 secondary: !0,
                 onClick: () => t(k.id, k),
                 iconLeft: /* @__PURE__ */ A(M, { name: "Trash1", size: "sm", style: { color: "rgb(var(--starasia-ui-raw-color-red-600))" } })
               }
-            ) }, "delete") : E === "custom" ? /* @__PURE__ */ A(gA.Fragment, { children: I == null ? void 0 : I(k) }, "custom") : null;
+            ) }, "delete") : E === "custom" ? /* @__PURE__ */ A(sA.Fragment, { children: u == null ? void 0 : u(k) }, "custom") : null;
           }) }) }) : null
         ]
       },
-      `${k}${G}`
+      `${k}${S}`
     )) })
   ] }) });
-}, Oi = ({
+}, bi = ({
   wrapperProps: e,
   dataTableProps: i,
   headerProps: r,
   footerProps: o
 }) => {
   var w;
-  const t = eA(null), [n, l] = b(
+  const t = iA(null), [n, l] = O(
     (i == null ? void 0 : i.defaultFrozenCount) ?? 0
-  ), c = (r == null ? void 0 : r.show) ?? !0, g = eA(null), C = (w = i == null ? void 0 : i.pagination) == null ? void 0 : w.totalData;
+  ), c = (r == null ? void 0 : r.show) ?? !0, g = iA(null), C = (w = i == null ? void 0 : i.pagination) == null ? void 0 : w.totalData;
   typeof C == "number" && (g.current = C);
   const Q = (o == null ? void 0 : o.showFooter) ?? (C === void 0 ? g.current !== 0 : C !== 0);
   return /* @__PURE__ */ s(mi, { ...e, children: [
@@ -3307,12 +3333,12 @@ const nr = (e) => {
     )
   ] });
 };
-function bi(e) {
-  return _(
+function Oi(e) {
+  return AA(
     e
   );
 }
-const Qr = bi(Oi), kA = ({
+const Qr = Oi(bi), EA = ({
   of: e,
   render: i
 }) => Ee.toArray(e == null ? void 0 : e.map((r, o, t) => i(r, o, t))), Y = ({
@@ -3370,11 +3396,11 @@ const Qr = bi(Oi), kA = ({
           Y,
           {
             condition: !!e.role && !e.isTenant || t,
-            fallback: /* @__PURE__ */ A(q.Body1, { children: e.name }),
+            fallback: /* @__PURE__ */ A(J.Body1, { children: e.name }),
             children: /* @__PURE__ */ s(a, { direction: "column", gap: "sm", children: [
-              /* @__PURE__ */ A(q.Body1, { children: e.name }),
+              /* @__PURE__ */ A(J.Body1, { children: e.name }),
               /* @__PURE__ */ A(
-                q.Body3,
+                J.Body3,
                 {
                   props: {
                     color: "tertiary"
@@ -3389,7 +3415,7 @@ const Qr = bi(Oi), kA = ({
       ]
     }
   );
-}, pA = ({
+}, jA = ({
   dataApps: e,
   handleSwitch: i,
   title: r,
@@ -3400,9 +3426,9 @@ const Qr = bi(Oi), kA = ({
   isOnOrgSelect: c,
   setSelectedApp: g
 }) => t && e && e.length > 0 && /* @__PURE__ */ s(a, { marginTop: "lg", children: [
-  r && /* @__PURE__ */ A(q.H5, { children: r }),
+  r && /* @__PURE__ */ A(J.H5, { children: r }),
   /* @__PURE__ */ A(
-    kA,
+    EA,
     {
       of: e,
       render: (C) => /* @__PURE__ */ A(
@@ -3432,7 +3458,7 @@ const Qr = bi(Oi), kA = ({
 }) => {
   var Q;
   const C = $A();
-  return /* @__PURE__ */ s(SA, { onHide: e, show: i, closeButton: !1, children: [
+  return /* @__PURE__ */ s(GA, { onHide: e, show: i, closeButton: !1, children: [
     /* @__PURE__ */ s(
       BA,
       {
@@ -3443,7 +3469,7 @@ const Qr = bi(Oi), kA = ({
         children: [
           C.show ? /* @__PURE__ */ A(M, { name: "ChevronLeft" }) : /* @__PURE__ */ A(M, { name: "Cross" }),
           /* @__PURE__ */ A(
-            q.SubH3,
+            J.SubH3,
             {
               props: {
                 color: "gray-500"
@@ -3455,9 +3481,9 @@ const Qr = bi(Oi), kA = ({
       }
     ),
     C.show ? /* @__PURE__ */ s(U, { children: [
-      /* @__PURE__ */ A(q.H4, { children: (Q = C.data) == null ? void 0 : Q.name }),
+      /* @__PURE__ */ A(J.H4, { children: (Q = C.data) == null ? void 0 : Q.name }),
       /* @__PURE__ */ A(
-        q.SubH3,
+        J.SubH3,
         {
           props: {
             color: "gray-500"
@@ -3471,12 +3497,12 @@ const Qr = bi(Oi), kA = ({
           condition: !!(o != null && o.length),
           isLoading: c,
           loading: /* @__PURE__ */ s(a, { marginTop: "sm", gap: "md", children: [
-            /* @__PURE__ */ A(lA, { variant: "list" }),
-            /* @__PURE__ */ A(lA, { variant: "list" }),
-            /* @__PURE__ */ A(lA, { variant: "list" })
+            /* @__PURE__ */ A(cA, { variant: "list" }),
+            /* @__PURE__ */ A(cA, { variant: "list" }),
+            /* @__PURE__ */ A(cA, { variant: "list" })
           ] }),
           children: /* @__PURE__ */ A(
-            pA,
+            jA,
             {
               dataApps: o == null ? void 0 : o.map((w) => {
                 var B;
@@ -3498,9 +3524,9 @@ const Qr = bi(Oi), kA = ({
       )
     ] }) : /* @__PURE__ */ s(U, { children: [
       /* @__PURE__ */ s(T, { direction: "row", align: "center", gap: "sm", children: [
-        /* @__PURE__ */ A(q.H4, { children: "Switch Apps" }),
+        /* @__PURE__ */ A(J.H4, { children: "Switch Apps" }),
         /* @__PURE__ */ s(
-          q.SubH3,
+          J.SubH3,
           {
             props: {
               color: "gray-500"
@@ -3513,7 +3539,7 @@ const Qr = bi(Oi), kA = ({
         )
       ] }),
       /* @__PURE__ */ A(
-        pA,
+        jA,
         {
           title: "Organization Apps",
           show: r == null ? void 0 : r.some((w) => w.isTenant),
@@ -3526,7 +3552,7 @@ const Qr = bi(Oi), kA = ({
         }
       ),
       /* @__PURE__ */ A(
-        pA,
+        jA,
         {
           title: "Single Apps",
           show: r == null ? void 0 : r.some((w) => !w.isTenant),
@@ -3537,7 +3563,7 @@ const Qr = bi(Oi), kA = ({
       )
     ] })
   ] });
-}, jA = ({
+}, NA = ({
   dataApps: e,
   handleSwitch: i,
   title: r,
@@ -3548,9 +3574,9 @@ const Qr = bi(Oi), kA = ({
   isOnOrgSelect: c,
   setSelectedApp: g
 }) => t && e && (e == null ? void 0 : e.length) > 0 && /* @__PURE__ */ s(a, { marginTop: "lg", children: [
-  r && /* @__PURE__ */ A(q.H5, { children: r }),
+  r && /* @__PURE__ */ A(J.H5, { children: r }),
   /* @__PURE__ */ A(
-    kA,
+    EA,
     {
       of: e,
       render: (C) => /* @__PURE__ */ A(
@@ -3577,7 +3603,7 @@ const Qr = bi(Oi), kA = ({
 }) => {
   var c, g, C, Q, w;
   const l = $A();
-  return /* @__PURE__ */ s(SA, { onHide: e, show: i, closeButton: !1, children: [
+  return /* @__PURE__ */ s(GA, { onHide: e, show: i, closeButton: !1, children: [
     /* @__PURE__ */ s(
       BA,
       {
@@ -3588,7 +3614,7 @@ const Qr = bi(Oi), kA = ({
         children: [
           l.show ? /* @__PURE__ */ A(M, { name: "ChevronLeft" }) : /* @__PURE__ */ A(M, { name: "Cross" }),
           /* @__PURE__ */ A(
-            q.SubH3,
+            J.SubH3,
             {
               props: {
                 color: "gray-500"
@@ -3600,9 +3626,9 @@ const Qr = bi(Oi), kA = ({
       }
     ),
     l.show ? /* @__PURE__ */ s(U, { children: [
-      /* @__PURE__ */ A(q.H4, { children: (c = l.data) == null ? void 0 : c.name }),
+      /* @__PURE__ */ A(J.H4, { children: (c = l.data) == null ? void 0 : c.name }),
       /* @__PURE__ */ A(
-        q.SubH3,
+        J.SubH3,
         {
           props: {
             color: "tertiary"
@@ -3615,15 +3641,15 @@ const Qr = bi(Oi), kA = ({
         {
           condition: !!((C = (g = l.data) == null ? void 0 : g.organizations) != null && C.length),
           children: /* @__PURE__ */ A(
-            jA,
+            NA,
             {
               dataApps: (w = (Q = l.data) == null ? void 0 : Q.organizations) == null ? void 0 : w.map((B) => {
-                var I;
+                var u;
                 return {
                   ...B,
                   id: B.id,
                   isTenant: !0,
-                  applicationKey: ((I = l.data) == null ? void 0 : I.applicationKey) || ""
+                  applicationKey: ((u = l.data) == null ? void 0 : u.applicationKey) || ""
                 };
               }),
               handleSwitch: o,
@@ -3637,9 +3663,9 @@ const Qr = bi(Oi), kA = ({
       )
     ] }) : /* @__PURE__ */ s(U, { children: [
       /* @__PURE__ */ s(T, { direction: "row", align: "center", gap: "sm", children: [
-        /* @__PURE__ */ A(q.H4, { children: "Switch Apps" }),
+        /* @__PURE__ */ A(J.H4, { children: "Switch Apps" }),
         /* @__PURE__ */ s(
-          q.SubH3,
+          J.SubH3,
           {
             props: {
               color: "gray-500"
@@ -3652,7 +3678,7 @@ const Qr = bi(Oi), kA = ({
         )
       ] }),
       /* @__PURE__ */ A(
-        jA,
+        NA,
         {
           title: "Organization Apps",
           show: r == null ? void 0 : r.some((B) => B.isTenant),
@@ -3665,7 +3691,7 @@ const Qr = bi(Oi), kA = ({
         }
       ),
       /* @__PURE__ */ A(
-        jA,
+        NA,
         {
           title: "Single Apps",
           show: r == null ? void 0 : r.some((B) => !B.isTenant),
@@ -3686,7 +3712,7 @@ const Qr = bi(Oi), kA = ({
   variant: l = "single-api",
   isLoading: c
 }) => {
-  const [g, C] = b(!1), [Q, w] = b("");
+  const [g, C] = O(!1), [Q, w] = O("");
   return /* @__PURE__ */ s(U, { children: [
     /* @__PURE__ */ s(
       a,
@@ -3816,7 +3842,7 @@ const Qr = bi(Oi), kA = ({
       }
     )
   ] });
-}, K = (e) => /* @__PURE__ */ A(
+}, Z = (e) => /* @__PURE__ */ A(
   d,
   {
     ...e,
@@ -3826,7 +3852,7 @@ const Qr = bi(Oi), kA = ({
     color: e.color || "gray-700",
     children: e.children
   }
-), nA = (e) => /* @__PURE__ */ A(d, { color: "red-600", fontSize: "sm", children: e.message }), Ni = ({
+), lA = (e) => /* @__PURE__ */ A(d, { color: "red-600", fontSize: "sm", children: e.message }), Ni = ({
   size: e = "md",
   direction: i = "vertical",
   requiredTitle: r = "(Required)",
@@ -3853,7 +3879,7 @@ const Qr = bi(Oi), kA = ({
                 customMaxWidth: l,
                 fullWidth: o,
                 children: [
-                  /* @__PURE__ */ A(K, { children: t.title }),
+                  /* @__PURE__ */ A(Z, { children: t.title }),
                   /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: t.description })
                 ]
               }
@@ -3866,10 +3892,10 @@ const Qr = bi(Oi), kA = ({
                 fullWidth: o,
                 children: [
                   /* @__PURE__ */ s(T, { direction: "row", gap: "xs", align: "center", children: [
-                    /* @__PURE__ */ A(K, { fontSize: e, children: t.title }),
-                    /* @__PURE__ */ A(K, { color: "error", fontSize: e, children: r }),
+                    /* @__PURE__ */ A(Z, { fontSize: e, children: t.title }),
+                    /* @__PURE__ */ A(Z, { color: "error", fontSize: e, children: r }),
                     /* @__PURE__ */ A(Y, { condition: !!((c = t.tooltip) != null && c.label), children: /* @__PURE__ */ A(
-                      rA,
+                      oA,
                       {
                         label: (g = t.tooltip) == null ? void 0 : g.label,
                         arrowPosition: (C = t.tooltip) == null ? void 0 : C.arrowPosition,
@@ -3896,7 +3922,7 @@ const Qr = bi(Oi), kA = ({
         ),
         /* @__PURE__ */ s(a, { gap: "xs", fullWidth: t.inputProps.fullWidth || !1, children: [
           /* @__PURE__ */ A(
-            IA,
+            uA,
             {
               ref: t.inputRef,
               size: e,
@@ -3905,7 +3931,7 @@ const Qr = bi(Oi), kA = ({
               fullWidth: !0
             }
           ),
-          !n && t.errorMessage && /* @__PURE__ */ A(nA, { message: t.errorMessage }),
+          !n && t.errorMessage && /* @__PURE__ */ A(lA, { message: t.errorMessage }),
           t.inputProps.extended && t.inputProps.extended
         ] })
       ]
@@ -3938,7 +3964,7 @@ const Qr = bi(Oi), kA = ({
                 customMaxWidth: l,
                 fullWidth: o,
                 children: [
-                  /* @__PURE__ */ A(K, { children: t.title }),
+                  /* @__PURE__ */ A(Z, { children: t.title }),
                   /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: t.description })
                 ]
               }
@@ -3951,10 +3977,10 @@ const Qr = bi(Oi), kA = ({
                 fullWidth: o,
                 children: [
                   /* @__PURE__ */ s(T, { direction: "row", gap: "xs", align: "center", children: [
-                    /* @__PURE__ */ A(K, { fontSize: e, children: t.title }),
-                    /* @__PURE__ */ A(K, { color: "error", fontSize: e, children: r }),
+                    /* @__PURE__ */ A(Z, { fontSize: e, children: t.title }),
+                    /* @__PURE__ */ A(Z, { color: "error", fontSize: e, children: r }),
                     /* @__PURE__ */ A(Y, { condition: !!((c = t.tooltip) != null && c.label), children: /* @__PURE__ */ A(
-                      rA,
+                      oA,
                       {
                         label: (g = t.tooltip) == null ? void 0 : g.label,
                         arrowPosition: (C = t.tooltip) == null ? void 0 : C.arrowPosition,
@@ -3987,7 +4013,7 @@ const Qr = bi(Oi), kA = ({
                 width: t.inputProps.fullWidth ? "100%" : i === "horizontal" && t.customWidth ? t.customWidth : i === "horizontal" ? "343px" : ""
               },
               children: /* @__PURE__ */ A(
-                xA,
+                SA,
                 {
                   size: e,
                   ...t.inputProps,
@@ -3996,7 +4022,7 @@ const Qr = bi(Oi), kA = ({
               )
             }
           ),
-          !n && t.errorMessage && /* @__PURE__ */ A(nA, { message: t.errorMessage }),
+          !n && t.errorMessage && /* @__PURE__ */ A(lA, { message: t.errorMessage }),
           t.inputProps.extended && t.inputProps.extended
         ] })
       ]
@@ -4004,7 +4030,7 @@ const Qr = bi(Oi), kA = ({
   );
 }, zi = (e, i) => typeof e == "string" && e || i === "error" ? "var(--starasia-ui-color-error)" : "var(--starasia-ui-text-disable)", Ki = (e) => {
   var c;
-  const [i, r] = b(!1), o = (g) => {
+  const [i, r] = O(!1), o = (g) => {
     g.preventDefault(), g.stopPropagation();
   }, t = (g) => {
     g.preventDefault(), g.stopPropagation(), g.dataTransfer && e.handleOnFileChange(g.dataTransfer.files.item(0));
@@ -4145,14 +4171,14 @@ const Ji = (e) => {
                   style: {
                     textWrap: "nowrap"
                   },
-                  children: e.fileDate ? e.fileDate : mA(/* @__PURE__ */ new Date())
+                  children: e.fileDate ? e.fileDate : yA(/* @__PURE__ */ new Date())
                 }
               )
             ] })
           ] })
         ] }),
         /* @__PURE__ */ A(
-          O,
+          b,
           {
             size: "xs",
             secondary: !0,
@@ -4176,13 +4202,13 @@ const Ji = (e) => {
   );
 }, qi = ({ status: e = "default", ...i }) => {
   var n;
-  const r = eA(null), o = () => {
+  const r = iA(null), o = () => {
     if (i.defaultUrl) {
       window.open(i.defaultUrl);
       return;
     }
     r.current && r.current.click();
-  }, t = X("md");
+  }, t = $("md");
   return /* @__PURE__ */ s(U, { children: [
     /* @__PURE__ */ A(
       "input",
@@ -4263,7 +4289,7 @@ const Ji = (e) => {
                 customMaxWidth: l,
                 fullWidth: o,
                 children: [
-                  /* @__PURE__ */ A(K, { children: t.title }),
+                  /* @__PURE__ */ A(Z, { children: t.title }),
                   /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: t.description })
                 ]
               }
@@ -4276,10 +4302,10 @@ const Ji = (e) => {
                 fullWidth: o,
                 children: [
                   /* @__PURE__ */ s(T, { direction: "row", gap: "xs", align: "center", children: [
-                    /* @__PURE__ */ A(K, { fontSize: e, children: t.title }),
-                    /* @__PURE__ */ A(K, { color: "error", fontSize: e, children: r }),
+                    /* @__PURE__ */ A(Z, { fontSize: e, children: t.title }),
+                    /* @__PURE__ */ A(Z, { color: "error", fontSize: e, children: r }),
                     /* @__PURE__ */ A(Y, { condition: !!((c = t.tooltip) != null && c.label), children: /* @__PURE__ */ A(
-                      rA,
+                      oA,
                       {
                         label: (g = t.tooltip) == null ? void 0 : g.label,
                         arrowPosition: (C = t.tooltip) == null ? void 0 : C.arrowPosition,
@@ -4312,7 +4338,7 @@ const Ji = (e) => {
               status: t.errorMessage ? "error" : "default"
             }
           ),
-          !n && t.errorMessage && /* @__PURE__ */ A(nA, { message: t.errorMessage })
+          !n && t.errorMessage && /* @__PURE__ */ A(lA, { message: t.errorMessage })
         ] })
       ]
     }
@@ -4345,8 +4371,8 @@ const Ji = (e) => {
                 customMaxWidth: c,
                 fullWidth: o,
                 children: [
-                  /* @__PURE__ */ A(K, { children: n.title }),
-                  /* @__PURE__ */ A(q.Body3, { props: { color: "gray-500" }, children: n.description })
+                  /* @__PURE__ */ A(Z, { children: n.title }),
+                  /* @__PURE__ */ A(J.Body3, { props: { color: "gray-500" }, children: n.description })
                 ]
               }
             ),
@@ -4358,10 +4384,10 @@ const Ji = (e) => {
                 fullWidth: o,
                 children: [
                   /* @__PURE__ */ s(T, { direction: "row", gap: "xs", align: "center", children: [
-                    /* @__PURE__ */ A(K, { fontSize: e, children: n.title }),
-                    /* @__PURE__ */ A(K, { color: "error", fontSize: e, children: r }),
+                    /* @__PURE__ */ A(Z, { fontSize: e, children: n.title }),
+                    /* @__PURE__ */ A(Z, { color: "error", fontSize: e, children: r }),
                     /* @__PURE__ */ A(Y, { condition: !!((g = n.tooltip) != null && g.label), children: /* @__PURE__ */ A(
-                      rA,
+                      oA,
                       {
                         label: (C = n.tooltip) == null ? void 0 : C.label,
                         arrowPosition: (Q = n.tooltip) == null ? void 0 : Q.arrowPosition,
@@ -4393,7 +4419,7 @@ const Ji = (e) => {
             direction: i === "horizontal-inline" ? "row" : "column",
             align: "flex-start",
             children: /* @__PURE__ */ A(
-              kA,
+              EA,
               {
                 of: (w = n.checkBoxesList) == null ? void 0 : w.map((B) => ({
                   ...B,
@@ -4408,12 +4434,12 @@ const Ji = (e) => {
                     ...n.badgeContainerProps,
                     children: [
                       /* @__PURE__ */ A(
-                        NA,
+                        xA,
                         {
                           name: B.name,
                           value: B.id,
                           checked: B.isChecked,
-                          onChange: (I) => n.onChecked(I.target.value, B),
+                          onChange: (u) => n.onChecked(u.target.value, B),
                           label: B.name,
                           description: B.description
                         }
@@ -4422,12 +4448,12 @@ const Ji = (e) => {
                     ]
                   }
                 ) : /* @__PURE__ */ A(
-                  NA,
+                  xA,
                   {
                     name: B.name,
                     value: B.id,
                     checked: B.isChecked,
-                    onChange: (I) => n.onChecked(I.target.value, B),
+                    onChange: (u) => n.onChecked(u.target.value, B),
                     label: B.name,
                     description: B.description
                   }
@@ -4436,7 +4462,7 @@ const Ji = (e) => {
             )
           }
         ),
-        !l && n.errorMessage && /* @__PURE__ */ A(nA, { message: n.errorMessage })
+        !l && n.errorMessage && /* @__PURE__ */ A(lA, { message: n.errorMessage })
       ]
     }
   );
@@ -4461,7 +4487,7 @@ const Ji = (e) => {
             customMaxWidth: t,
             fullWidth: r,
             children: [
-              o.title && /* @__PURE__ */ A(K, { children: o.title }),
+              o.title && /* @__PURE__ */ A(Z, { children: o.title }),
               /* @__PURE__ */ A(Y, { condition: !!o.description, children: /* @__PURE__ */ A(d, { color: "gray-500", children: o.description }) })
             ]
           }
@@ -4474,7 +4500,7 @@ const Ji = (e) => {
             align: "flex-start",
             flexWrap: "wrap",
             children: /* @__PURE__ */ A(
-              kA,
+              EA,
               {
                 of: (n = o.radioList) == null ? void 0 : n.map((l) => ({
                   ...l,
@@ -4514,7 +4540,7 @@ const Ji = (e) => {
             )
           }
         ),
-        o.errorMessage && /* @__PURE__ */ A(nA, { message: o.errorMessage })
+        o.errorMessage && /* @__PURE__ */ A(lA, { message: o.errorMessage })
       ]
     }
   );
@@ -4545,7 +4571,7 @@ const Ji = (e) => {
                 customMaxWidth: l,
                 fullWidth: o,
                 children: [
-                  /* @__PURE__ */ A(K, { children: t.title }),
+                  /* @__PURE__ */ A(Z, { children: t.title }),
                   /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: t.description })
                 ]
               }
@@ -4558,10 +4584,10 @@ const Ji = (e) => {
                 fullWidth: o,
                 children: [
                   /* @__PURE__ */ s(T, { direction: "row", gap: "xs", align: "center", children: [
-                    /* @__PURE__ */ A(K, { fontSize: e, children: t.title }),
-                    /* @__PURE__ */ A(K, { color: "error", fontSize: e, children: r }),
+                    /* @__PURE__ */ A(Z, { fontSize: e, children: t.title }),
+                    /* @__PURE__ */ A(Z, { color: "error", fontSize: e, children: r }),
                     /* @__PURE__ */ A(Y, { condition: !!((c = t.tooltip) != null && c.label), children: /* @__PURE__ */ A(
-                      rA,
+                      oA,
                       {
                         label: (g = t.tooltip) == null ? void 0 : g.label,
                         arrowPosition: (C = t.tooltip) == null ? void 0 : C.arrowPosition,
@@ -4596,7 +4622,7 @@ const Ji = (e) => {
               status: t.errorMessage ? "error" : "default"
             }
           ),
-          !n && t.errorMessage && /* @__PURE__ */ A(nA, { message: t.errorMessage })
+          !n && t.errorMessage && /* @__PURE__ */ A(lA, { message: t.errorMessage })
         ] })
       ]
     }
@@ -4629,7 +4655,7 @@ const Ji = (e) => {
                 customMaxWidth: l,
                 fullWidth: t,
                 children: [
-                  /* @__PURE__ */ A(K, { children: n.title }),
+                  /* @__PURE__ */ A(Z, { children: n.title }),
                   /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: n.titleDescription })
                 ]
               }
@@ -4642,10 +4668,10 @@ const Ji = (e) => {
                 fullWidth: t,
                 children: [
                   /* @__PURE__ */ s(T, { direction: "row", gap: "xs", align: "center", children: [
-                    /* @__PURE__ */ A(K, { fontSize: e, children: n.title }),
-                    /* @__PURE__ */ A(K, { color: "error", fontSize: e, children: r }),
+                    /* @__PURE__ */ A(Z, { fontSize: e, children: n.title }),
+                    /* @__PURE__ */ A(Z, { color: "error", fontSize: e, children: r }),
                     /* @__PURE__ */ A(Y, { condition: !!((c = n.tooltip) != null && c.label), children: /* @__PURE__ */ A(
-                      rA,
+                      oA,
                       {
                         label: (g = n.tooltip) == null ? void 0 : g.label,
                         arrowPosition: (C = n.tooltip) == null ? void 0 : C.arrowPosition,
@@ -4679,7 +4705,7 @@ const Ji = (e) => {
             description: n.description
           }
         ),
-        n.errorMessage && /* @__PURE__ */ A(nA, { message: n.errorMessage })
+        n.errorMessage && /* @__PURE__ */ A(lA, { message: n.errorMessage })
       ]
     }
   );
@@ -4689,9 +4715,9 @@ const Ji = (e) => {
   ...r
 }) => {
   const o = KA(), t = (l) => {
-    var g, C, Q, w, B, I;
+    var g, C, Q, w, B, u;
     if (!l) return;
-    const c = r.disabled ? "var(--starasia-ui-text-color-primary-disable)" : e === "secondary" ? "var(--starasia-ui-text-color-secondary)" : e === "secondary-danger" ? (C = (g = o == null ? void 0 : o.computed) == null ? void 0 : g.red) == null ? void 0 : C[600] : e === "secondary-primary" ? (w = (Q = o == null ? void 0 : o.computed) == null ? void 0 : Q.blue) == null ? void 0 : w[700] : (I = (B = o == null ? void 0 : o.computed) == null ? void 0 : B.gray) == null ? void 0 : I[50];
+    const c = r.disabled ? "var(--starasia-ui-text-color-primary-disable)" : e === "secondary" ? "var(--starasia-ui-text-color-secondary)" : e === "secondary-danger" ? (C = (g = o == null ? void 0 : o.computed) == null ? void 0 : g.red) == null ? void 0 : C[600] : e === "secondary-primary" ? (w = (Q = o == null ? void 0 : o.computed) == null ? void 0 : Q.blue) == null ? void 0 : w[700] : (u = (B = o == null ? void 0 : o.computed) == null ? void 0 : B.gray) == null ? void 0 : u[50];
     return /* @__PURE__ */ A(M, { name: l, size: i, style: { color: c } });
   }, n = () => {
     var c, g, C, Q;
@@ -4702,18 +4728,18 @@ const Ji = (e) => {
     };
     switch (i) {
       case "xs":
-        return /* @__PURE__ */ A(q.Body2, { props: { style: l }, children: r.title });
+        return /* @__PURE__ */ A(J.Body2, { props: { style: l }, children: r.title });
       case "sm":
       case "md":
-        return /* @__PURE__ */ A(q.SubH3, { props: { style: l }, children: r.title });
+        return /* @__PURE__ */ A(J.SubH3, { props: { style: l }, children: r.title });
       case "lg":
-        return /* @__PURE__ */ A(q.SubH2, { props: { style: l }, children: r.title });
+        return /* @__PURE__ */ A(J.SubH2, { props: { style: l }, children: r.title });
       default:
         return r.title;
     }
   };
   return /* @__PURE__ */ A(
-    O,
+    b,
     {
       fullWidth: !0,
       disabled: r.disabled,
@@ -4729,7 +4755,7 @@ const Ji = (e) => {
     }
   );
 }, Vi = (e) => /* @__PURE__ */ A(
-  q.H5,
+  J.H5,
   {
     props: {
       ...e
@@ -4763,7 +4789,7 @@ const Ji = (e) => {
                 customMaxWidth: l,
                 fullWidth: o,
                 children: [
-                  /* @__PURE__ */ A(K, { children: t.title }),
+                  /* @__PURE__ */ A(Z, { children: t.title }),
                   /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: t.description })
                 ]
               }
@@ -4776,10 +4802,10 @@ const Ji = (e) => {
                 fullWidth: o,
                 children: [
                   /* @__PURE__ */ s(T, { direction: "row", gap: "xs", align: "center", children: [
-                    /* @__PURE__ */ A(K, { fontSize: e, children: t.title }),
-                    /* @__PURE__ */ A(K, { color: "error", fontSize: e, children: r }),
+                    /* @__PURE__ */ A(Z, { fontSize: e, children: t.title }),
+                    /* @__PURE__ */ A(Z, { color: "error", fontSize: e, children: r }),
                     /* @__PURE__ */ A(Y, { condition: !!((c = t.tooltip) != null && c.label), children: /* @__PURE__ */ A(
-                      rA,
+                      oA,
                       {
                         label: (g = t.tooltip) == null ? void 0 : g.label,
                         arrowPosition: (C = t.tooltip) == null ? void 0 : C.arrowPosition,
@@ -4821,7 +4847,7 @@ const Ji = (e) => {
               )
             }
           ),
-          !n && t.errorMessage && /* @__PURE__ */ A(nA, { message: t.errorMessage })
+          !n && t.errorMessage && /* @__PURE__ */ A(lA, { message: t.errorMessage })
         ] })
       ]
     }
@@ -4876,49 +4902,49 @@ const PA = {
     maxFileSize: g = 2,
     onError: C
   }, Q) => {
-    const w = X("md"), [B, I] = b(!1), [L, h] = b(null), [j, p] = b(!1), [N, R] = b({ x: 0, y: 0 }), [x, u] = b(1), [P, Z] = b(null);
+    const w = $("md"), [B, u] = O(!1), [G, h] = O(null), [j, p] = O(!1), [F, R] = O({ x: 0, y: 0 }), [f, I] = O(1), [P, K] = O(null);
     W(() => {
       i === null && t(null);
     }, [i]);
     const V = HA(
-      (J, z) => {
-        Z(z);
+      (H, y) => {
+        K(y);
       },
       []
-    ), AA = (J) => {
-      var sA;
-      const z = (sA = J.target.files) == null ? void 0 : sA[0];
-      if (!z) return;
-      const iA = new FileReader();
-      iA.onload = () => {
-        h(iA.result), p(!0);
-      }, iA.readAsDataURL(z);
-    }, H = async () => {
-      if (!(!L || !P))
+    ), eA = (H) => {
+      var tA;
+      const y = (tA = H.target.files) == null ? void 0 : tA[0];
+      if (!y) return;
+      const X = new FileReader();
+      X.onload = () => {
+        h(X.result), p(!0);
+      }, X.readAsDataURL(y);
+    }, N = async () => {
+      if (!(!G || !P))
         try {
-          const J = await $i(L, P);
-          if (g && J.size > g * 1024 * 1024) {
+          const H = await $i(G, P);
+          if (g && H.size > g * 1024 * 1024) {
             C == null || C(`Ukuran file maksimal ${g}MB`);
             return;
           }
-          e == null || e(J);
-          const z = URL.createObjectURL(J);
-          t(z, J), p(!1);
+          e == null || e(H);
+          const y = URL.createObjectURL(H);
+          t(y, H), p(!1);
         } catch {
           C == null || C("Gagal memproses gambar");
         }
-    }, k = eA(null), G = () => {
+    }, k = iA(null), S = () => {
       k.current && k.current.click();
     };
     Me(Q, () => ({
       openFileDialog: () => {
-        var J;
-        (J = k.current) == null || J.click();
+        var H;
+        (H = k.current) == null || H.click();
       }
     }));
     const E = parseInt(n, 10), D = PA[l];
-    let F, f;
-    return D >= 1 ? (f = E, F = E * D) : (F = E, f = E / D), /* @__PURE__ */ s(
+    let z, q;
+    return D >= 1 ? (q = E, z = E * D) : (z = E, q = E / D), /* @__PURE__ */ s(
       a,
       {
         display: "flex",
@@ -4932,13 +4958,13 @@ const PA = {
         align: "center",
         justify: "center",
         style: {
-          width: c != null && c.fullWidth ? "100%" : `${F}px`,
-          height: c != null && c.fullWidth ? "auto" : `${f}px`,
+          width: c != null && c.fullWidth ? "100%" : `${z}px`,
+          height: c != null && c.fullWidth ? "auto" : `${q}px`,
           aspectRatio: D,
           flexShrink: 0
         },
-        onMouseEnter: () => I(!0),
-        onMouseLeave: () => I(!1),
+        onMouseEnter: () => u(!0),
+        onMouseLeave: () => u(!1),
         children: [
           o || i ? /* @__PURE__ */ A(
             "img",
@@ -4986,7 +5012,7 @@ const PA = {
                 opacity: B ? 1 : 0,
                 transition: "opacity 0.3s ease-in-out"
               },
-              onClick: G,
+              onClick: S,
               children: [
                 /* @__PURE__ */ A(
                   "input",
@@ -4994,7 +5020,7 @@ const PA = {
                     ref: k,
                     type: "file",
                     accept: "image/*",
-                    onChange: AA,
+                    onChange: eA,
                     disabled: r,
                     style: { display: "none" }
                   }
@@ -5048,15 +5074,15 @@ const PA = {
             }
           ),
           /* @__PURE__ */ s(
-            dA,
+            hA,
             {
               isShow: j,
               onHide: () => p(!1),
               style: {
-                minWidth: w ? l === "1:1" ? "20rem" : F * 2 : "100%"
+                minWidth: w ? l === "1:1" ? "20rem" : z * 2 : "100%"
               },
               children: [
-                /* @__PURE__ */ A(hA, { children: /* @__PURE__ */ A(
+                /* @__PURE__ */ A(DA, { children: /* @__PURE__ */ A(
                   a,
                   {
                     position: "relative",
@@ -5065,15 +5091,15 @@ const PA = {
                       height: "20rem",
                       backgroundColor: "gray-100"
                     },
-                    children: L && /* @__PURE__ */ A(
+                    children: G && /* @__PURE__ */ A(
                       ye,
                       {
-                        image: L,
-                        crop: N,
-                        zoom: x,
+                        image: G,
+                        crop: F,
+                        zoom: f,
                         aspect: l ? PA[l] : void 0,
                         onCropChange: R,
-                        onZoomChange: u,
+                        onZoomChange: I,
                         onCropComplete: V,
                         objectFit: "contain",
                         minZoom: 0.5,
@@ -5082,9 +5108,9 @@ const PA = {
                     )
                   }
                 ) }),
-                /* @__PURE__ */ A(yA, { children: /* @__PURE__ */ s(a, { justify: "flex-end", direction: "row", gap: "sm", children: [
-                  /* @__PURE__ */ A(O, { size: "xs", secondary: !0, onClick: () => p(!1), children: "Cancel" }),
-                  /* @__PURE__ */ A(O, { size: "xs", primary: !0, onClick: H, children: "Crop" })
+                /* @__PURE__ */ A(fA, { children: /* @__PURE__ */ s(a, { justify: "flex-end", direction: "row", gap: "sm", children: [
+                  /* @__PURE__ */ A(b, { size: "xs", secondary: !0, onClick: () => p(!1), children: "Cancel" }),
+                  /* @__PURE__ */ A(b, { size: "xs", primary: !0, onClick: N, children: "Crop" })
                 ] }) })
               ]
             }
@@ -5121,7 +5147,7 @@ const PA = {
                 customMaxWidth: c,
                 fullWidth: o,
                 children: [
-                  /* @__PURE__ */ A(K, { children: n.title }),
+                  /* @__PURE__ */ A(Z, { children: n.title }),
                   /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: n.description })
                 ]
               }
@@ -5134,10 +5160,10 @@ const PA = {
                 fullWidth: o,
                 children: [
                   /* @__PURE__ */ s(T, { direction: "row", gap: "xs", align: "center", children: [
-                    /* @__PURE__ */ A(K, { fontSize: e, children: n.title }),
-                    /* @__PURE__ */ A(K, { color: "error", fontSize: e, children: r }),
+                    /* @__PURE__ */ A(Z, { fontSize: e, children: n.title }),
+                    /* @__PURE__ */ A(Z, { color: "error", fontSize: e, children: r }),
                     /* @__PURE__ */ A(Y, { condition: !!((g = n.tooltip) != null && g.label), children: /* @__PURE__ */ A(
-                      rA,
+                      oA,
                       {
                         label: (C = n.tooltip) == null ? void 0 : C.label,
                         arrowPosition: (Q = n.tooltip) == null ? void 0 : Q.arrowPosition,
@@ -5164,7 +5190,7 @@ const PA = {
         ),
         /* @__PURE__ */ s(T, { gap: "xs", children: [
           /* @__PURE__ */ A(_i, { ...n.inputProps }),
-          !l && n.errorMessage && /* @__PURE__ */ A(nA, { message: n.errorMessage })
+          !l && n.errorMessage && /* @__PURE__ */ A(lA, { message: n.errorMessage })
         ] })
       ]
     }
@@ -5196,7 +5222,7 @@ const PA = {
                 customMaxWidth: n,
                 fullWidth: o,
                 children: [
-                  /* @__PURE__ */ A(K, { children: t.title }),
+                  /* @__PURE__ */ A(Z, { children: t.title }),
                   /* @__PURE__ */ A(d, { fontSize: e, color: "gray-500", children: t.description })
                 ]
               }
@@ -5209,10 +5235,10 @@ const PA = {
                 fullWidth: o,
                 children: [
                   /* @__PURE__ */ s(T, { direction: "row", gap: "xs", align: "center", children: [
-                    /* @__PURE__ */ A(K, { fontSize: e, children: t.title }),
-                    /* @__PURE__ */ A(K, { color: "error", fontSize: e, children: r }),
+                    /* @__PURE__ */ A(Z, { fontSize: e, children: t.title }),
+                    /* @__PURE__ */ A(Z, { color: "error", fontSize: e, children: r }),
                     /* @__PURE__ */ A(Y, { condition: !!((l = t.tooltip) != null && l.label), children: /* @__PURE__ */ A(
-                      rA,
+                      oA,
                       {
                         label: (c = t.tooltip) == null ? void 0 : c.label,
                         arrowPosition: (g = t.tooltip) == null ? void 0 : g.arrowPosition,
@@ -5250,7 +5276,7 @@ const PA = {
   disabled: n = !1
 }) => {
   var Q;
-  const [l, c] = b([]);
+  const [l, c] = O([]);
   W(() => {
     e && c([...e.map((w) => ({ id: w.id, isActive: w.isActive }))]);
   }, [e]);
@@ -5292,7 +5318,7 @@ const PA = {
   InputImgFile: At,
   Custom: et
 }, it = ({ customBottom: e }) => {
-  const [i, r] = b(!1), o = () => {
+  const [i, r] = O(!1), o = () => {
     window.scrollY > window.screenY ? r(!0) : r(!1);
   }, t = () => {
     window.scrollTo({ top: 0, behavior: "smooth" });
@@ -5318,7 +5344,7 @@ const PA = {
             transition: "transform 0.2s ease-in-out"
           },
           children: /* @__PURE__ */ A(
-            O,
+            b,
             {
               secondary: !0,
               size: "xs",
@@ -5342,7 +5368,7 @@ const PA = {
     }
   );
 }, Ir = ({ pageLayout: e, children: i }) => {
-  const r = X("lg");
+  const r = $("lg");
   return /* @__PURE__ */ s(
     a,
     {
@@ -5417,7 +5443,7 @@ const PA = {
     ]
   }
 ) }), kr = ({ fields: e }) => /* @__PURE__ */ A(a, { display: "flex", direction: "column", gap: "lg", children: /* @__PURE__ */ A(
-  kA,
+  EA,
   {
     of: e,
     render: (i, r) => /* @__PURE__ */ A(tt, { ...i }, r)
@@ -5587,9 +5613,9 @@ const Er = ({
   const Q = () => {
     switch (o) {
       case "primary":
-        return /* @__PURE__ */ A(U, { children: n ? /* @__PURE__ */ A(O, { primary: !0, iconLeft: n, onClick: r, children: g || e }) : /* @__PURE__ */ A(O, { primary: !0, onClick: r, children: g || e }) });
+        return /* @__PURE__ */ A(U, { children: n ? /* @__PURE__ */ A(b, { primary: !0, iconLeft: n, onClick: r, children: g || e }) : /* @__PURE__ */ A(b, { primary: !0, onClick: r, children: g || e }) });
       case "secondary":
-        return /* @__PURE__ */ A(U, { children: n ? /* @__PURE__ */ A(O, { secondary: !0, iconLeft: n, onClick: r, children: t ? /* @__PURE__ */ A(
+        return /* @__PURE__ */ A(U, { children: n ? /* @__PURE__ */ A(b, { secondary: !0, iconLeft: n, onClick: r, children: t ? /* @__PURE__ */ A(
           d,
           {
             fontFamily: "Poppins",
@@ -5598,11 +5624,11 @@ const Er = ({
             style: { color: "var(--starasia-ui-utility-success-default)" },
             children: g || e
           }
-        ) : e }) : /* @__PURE__ */ A(O, { secondary: !0, onClick: r, children: g || e }) });
+        ) : e }) : /* @__PURE__ */ A(b, { secondary: !0, onClick: r, children: g || e }) });
       case "success":
-        return /* @__PURE__ */ A(U, { children: n ? /* @__PURE__ */ A(O, { success: !0, iconLeft: n, onClick: r, children: g || e }) : /* @__PURE__ */ A(O, { success: !0, onClick: r, children: g || e }) });
+        return /* @__PURE__ */ A(U, { children: n ? /* @__PURE__ */ A(b, { success: !0, iconLeft: n, onClick: r, children: g || e }) : /* @__PURE__ */ A(b, { success: !0, onClick: r, children: g || e }) });
       default:
-        return /* @__PURE__ */ A(U, { children: n ? /* @__PURE__ */ A(O, { primary: !0, iconLeft: n, onClick: r, children: g || e }) : /* @__PURE__ */ A(O, { primary: !0, onClick: r, children: g || e }) });
+        return /* @__PURE__ */ A(U, { children: n ? /* @__PURE__ */ A(b, { primary: !0, iconLeft: n, onClick: r, children: g || e }) : /* @__PURE__ */ A(b, { primary: !0, onClick: r, children: g || e }) });
     }
   };
   return /* @__PURE__ */ s(
@@ -5619,7 +5645,7 @@ const Er = ({
       children: [
         C || /* @__PURE__ */ A(rt, {}),
         /* @__PURE__ */ A(a, { children: i.map((w, B) => /* @__PURE__ */ A(
-          q.Body1,
+          J.Body1,
           {
             props: {
               align: "center",
@@ -5838,7 +5864,7 @@ function ot({ width: e, height: i }) {
   ) });
 }
 function Mr({ onClick: e }) {
-  const i = X("md");
+  const i = $("md");
   return /* @__PURE__ */ s(
     a,
     {
@@ -5868,7 +5894,7 @@ function Mr({ onClick: e }) {
             children: "Sorry, we couldn't find the page you are looking for"
           }
         ),
-        e && /* @__PURE__ */ A(O, { size: i ? "md" : "xs", onClick: e, children: "Go Back" })
+        e && /* @__PURE__ */ A(b, { size: i ? "md" : "xs", onClick: e, children: "Go Back" })
       ]
     }
   );
@@ -6089,7 +6115,7 @@ function nt({ width: e, height: i }) {
   ) });
 }
 function mr({ onClick: e }) {
-  const i = X("md");
+  const i = $("md");
   return /* @__PURE__ */ s(
     a,
     {
@@ -6102,7 +6128,7 @@ function mr({ onClick: e }) {
       children: [
         /* @__PURE__ */ A(nt, { width: i ? 600 : 300 }),
         /* @__PURE__ */ A(d, { fontWeight: "bold", fontSize: i ? "3xl" : "2xl", children: "We Are Sorry ..." }),
-        e && /* @__PURE__ */ A(O, { size: i ? "md" : "xs", onClick: e, children: "Go Back" })
+        e && /* @__PURE__ */ A(b, { size: i ? "md" : "xs", onClick: e, children: "Go Back" })
       ]
     }
   );
@@ -6780,7 +6806,7 @@ function lt({ width: e, height: i }) {
   ) });
 }
 function yr({ onClick: e }) {
-  const i = X("md");
+  const i = $("md");
   return /* @__PURE__ */ s(
     a,
     {
@@ -6811,16 +6837,16 @@ function yr({ onClick: e }) {
             children: "we are trying to fix the problem"
           }
         ),
-        e && /* @__PURE__ */ A(O, { size: i ? "md" : "xs", onClick: e, children: "Go Back" })
+        e && /* @__PURE__ */ A(b, { size: i ? "md" : "xs", onClick: e, children: "Go Back" })
       ]
     }
   );
 }
 const xr = (e) => {
   var r, o, t, n, l;
-  const i = X("md");
+  const i = $("md");
   return /* @__PURE__ */ s(
-    dA,
+    hA,
     {
       isShow: e.isShow,
       onHide: e.onHide,
@@ -6833,8 +6859,8 @@ const xr = (e) => {
       },
       children: [
         /* @__PURE__ */ A(wA, { ...e.dialogTitleProps, children: typeof e.title == "string" ? /* @__PURE__ */ A(d, { fontSize: "lg", fontWeight: "medium", children: e.title }) : e.title }),
-        /* @__PURE__ */ A(hA, { children: typeof e.description == "string" ? /* @__PURE__ */ A(d, { fontSize: "md", lineHeight: "leading-6", color: "tertiary", children: e.description }) : e.description }),
-        /* @__PURE__ */ A(yA, { children: /* @__PURE__ */ A(
+        /* @__PURE__ */ A(DA, { children: typeof e.description == "string" ? /* @__PURE__ */ A(d, { fontSize: "md", lineHeight: "leading-6", color: "tertiary", children: e.description }) : e.description }),
+        /* @__PURE__ */ A(fA, { children: /* @__PURE__ */ A(
           a,
           {
             display: "flex",
@@ -6850,7 +6876,7 @@ const xr = (e) => {
                 gap: ((l = e.wrapperConfirmBtnProps) == null ? void 0 : l.gap) || "sm",
                 ...e.wrapperConfirmBtnProps,
                 children: [
-                  e.onCancel && /* @__PURE__ */ A(O, { secondary: !0, onClick: e.onCancel, size: "md", fullWidth: !0, children: e.titleCancelBtn || "Cancel" }),
+                  e.onCancel && /* @__PURE__ */ A(b, { secondary: !0, onClick: e.onCancel, size: "md", fullWidth: !0, children: e.titleCancelBtn || "Cancel" }),
                   /* @__PURE__ */ A(
                     a,
                     {
@@ -6859,7 +6885,7 @@ const xr = (e) => {
                         textWrap: "nowrap"
                       },
                       children: /* @__PURE__ */ A(
-                        O,
+                        b,
                         {
                           ...e.buttonConfirmProps,
                           onClick: e.onConfirm,
@@ -6879,7 +6905,7 @@ const xr = (e) => {
     },
     e.key
   );
-}, fr = _(
+}, fr = AA(
   ({
     children: e,
     height: i,
@@ -6887,7 +6913,7 @@ const xr = (e) => {
     customHeight: o,
     paddingInline: t = "spacing-24"
   }) => {
-    const n = eA(null), [l, c] = b("100vh");
+    const n = iA(null), [l, c] = O("100vh");
     return W(() => {
       const g = () => {
         if (n.current) {
@@ -6914,7 +6940,7 @@ const xr = (e) => {
     );
   }
 ), Sr = (e) => {
-  const { defaultTab: i = 0, paramKey: r = "tab" } = e || {}, [o, t] = uA(), n = DA(o.toString());
+  const { defaultTab: i = 0, paramKey: r = "tab" } = e || {}, [o, t] = kA(), n = IA(o.toString());
   return {
     activeTab: n[r] ? parseInt(n[r]) : i,
     handleTabChange: (g) => {
@@ -6931,7 +6957,7 @@ function Lr({
   menuConfig: i,
   formatTitle: r
 }) {
-  const o = fA();
+  const o = LA();
   W(() => {
     let t = null, n = null;
     for (const g of i) {
@@ -6948,7 +6974,7 @@ function Lr({
   }, [o.pathname]);
 }
 const Gr = () => {
-  const [e, i] = uA(), r = DA(e.toString()), o = te(), t = fA(), n = o.id;
+  const [e, i] = kA(), r = IA(e.toString()), o = te(), t = LA(), n = o.id;
   return {
     // query params
     setSearchParams: i,
@@ -6966,21 +6992,21 @@ const Gr = () => {
     hasId: !!n
   };
 };
-function Or(e) {
+function br(e) {
   var o, t;
   const i = e.decodedAccessToken;
-  return cA(() => {
+  return gA(() => {
     var g, C;
     const n = ((C = (g = i == null ? void 0 : i.access) == null ? void 0 : g.role) == null ? void 0 : C.code) ?? "", l = Object.keys(e.role).reduce(
       (Q, w) => {
-        const B = `is${w.toLowerCase().replace(/(^\w|_\w)/g, (I) => I.replace("_", "").toUpperCase())}`;
+        const B = `is${w.toLowerCase().replace(/(^\w|_\w)/g, (u) => u.replace("_", "").toUpperCase())}`;
         return { ...Q, [B]: !1 };
       },
       {}
     );
     return {
       ...Object.keys(e.role).reduce((Q, w) => {
-        const B = `is${w.toLowerCase().replace(/(^\w|_\w)/g, (I) => I.replace("_", "").toUpperCase())}`;
+        const B = `is${w.toLowerCase().replace(/(^\w|_\w)/g, (u) => u.replace("_", "").toUpperCase())}`;
         return {
           ...Q,
           [B]: n === e.role[w]
@@ -7005,7 +7031,7 @@ export {
   xr as ConfirmationDialog,
   Gi as DataTable,
   Y as DecisionWrapper,
-  kA as EachUtils,
+  EA as EachUtils,
   Er as EmptyStatePage,
   Ei as FilterDrawer,
   ur as FloatingFooter,
@@ -7016,11 +7042,11 @@ export {
   qi as InputFile,
   _i as InputImage,
   Zt as ModalDialog,
-  Oe as ModuleSwitcherModal,
+  be as ModuleSwitcherModal,
   Mr as NotFoundPage,
   Ht as PageLayout,
   BA as Pressable,
-  SA as RightDrawer,
+  GA as RightDrawer,
   it as ScrollToTopButton,
   Jt as Section,
   yr as ServerErrorPage,
@@ -7031,13 +7057,13 @@ export {
   Qr as TableSection,
   mi as TableWrapper,
   hr as ToggleStatus,
-  q as Typography,
+  J as Typography,
   kr as VerticalField,
   Tt as createInitialFromUserName,
   Pt as cssVars,
   $t as formHasChanged,
   vt as formatDate,
-  mA as formatDateToIndonesian,
+  yA as formatDateToIndonesian,
   Wt as formatRupiah,
   Br as getDateFilterValue,
   Cr as getDateRangeFilterValue,
@@ -7045,7 +7071,7 @@ export {
   sr as getValueDropdownMultipleFilter,
   ar as getValueRadioFilter,
   ki as getValueSearch,
-  bA as getValuesFilter,
+  YA as getValuesFilter,
   vA as handleChangeFilter,
   lr as handleOnScroll,
   rr as isEmail,
@@ -7067,7 +7093,7 @@ export {
   cr as useAdvanceFilter,
   fe as useApp,
   Se as useAppState,
-  Or as useAuthRole,
+  br as useAuthRole,
   Lr as useDynamicTitle,
   JA as useRouteInfo,
   Gr as useRouteParams,