@starasia/admin 1.4.0 → 1.4.1

package/dist/index.es.js

@@ -10,17 +10,17 @@ import { StarasiaDate as te } from "@starasia/date";
 export * from "@starasia/date";
 import { Dialog as hA, DialogTitle as dA, DialogBody as DA, DialogFooter as LA } from "@starasia/dialog";
 export * from "@starasia/dialog";
-import { Drawer as ue } from "@starasia/drawer";
+import { Drawer as Ie } from "@starasia/drawer";
 export * from "@starasia/drawer";
 import { Dropdown as bA } from "@starasia/dropdown";
 export * from "@starasia/dropdown";
-import { useMediaQuery as V, useConfirmation as re } from "@starasia/hooks";
+import { useMediaQuery as X, useConfirmation as re } from "@starasia/hooks";
 export * from "@starasia/hooks";
-import { searchParamsToObject as uA } 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 oe, MenuButton as yA, MenuLists as ne, MenuHeading as Ie, MenuBody as le, MenuFooter as ke } from "@starasia/menu";
+import { Menu as oe, MenuButton as yA, MenuLists as ne, MenuHeading as ue, MenuBody as le, MenuFooter as ke } from "@starasia/menu";
 export * from "@starasia/menu";
 import { Pagination as Ee } from "@starasia/pagination";
 export * from "@starasia/pagination";
@@ -66,7 +66,7 @@ const je = {
   userData: null,
   setUserData: () => {
   }
-}, Ce = Le(je), Be = () => be(Ce), Ne = (e) => {
+}, Ce = Le(je), Be = () => be(Ce), Fe = (e) => {
   const [i, r] = Y(
     (e == null ? void 0 : e.initialUserData) || null
   );
@@ -74,7 +74,7 @@ const je = {
     userData: i,
     setUserData: r
   };
-}, Fe = ({
+}, Ne = ({
   router: e,
   menus: i = [],
   menuBottom: r,
@@ -83,7 +83,7 @@ const je = {
   initialUserData: n,
   theme: l
 }) => {
-  const c = Ne({ initialUserData: n }), { theme: s } = xe();
+  const c = Fe({ initialUserData: n }), { theme: s } = xe();
   return /* @__PURE__ */ A(
     Ce.Provider,
     {
@@ -98,7 +98,7 @@ const je = {
       children: l ? /* @__PURE__ */ A(vA, { value: l, children: e }) : s ? /* @__PURE__ */ A(vA, { value: s, children: e }) : e
     }
   );
-}, Ut = AA(Fe);
+}, Ut = AA(Ne);
 function ze({
   collapsed: e = !1,
   children: i
@@ -115,7 +115,6 @@ function ze({
         position: "sticky",
         top: "4rem",
         zIndex: 1,
-        backgroundColor: "white",
         borderBottom: "1px solid #e5e7eb",
         paddingLeft: "0.5rem",
         paddingRight: "0.5rem",
@@ -198,7 +197,7 @@ function Wt({
   profileMenuItems: w,
   logoutButton: B
 }) {
-  const [I] = kA(), b = I.get("embed") === "true", h = Be(), j = UA(), S = GA(), x = !V("md"), [G, u] = Y(!1), [z, Z] = Y(!1), [R, X] = Y(!1), [H, k] = Y(/* @__PURE__ */ new Set()), { selectedGroupId: f, setSelectedGroupId: E } = we(), D = eA(null), F = eA(null);
+  const [u] = kA(), b = u.get("embed") === "true", h = Be(), j = UA(), S = GA(), x = !X("md"), [G, I] = Y(!1), [z, Z] = Y(!1), [R, $] = Y(!1), [H, k] = Y(/* @__PURE__ */ new Set()), { selectedGroupId: f, setSelectedGroupId: E } = we(), D = eA(null), N = eA(null);
   v(() => {
     const y = D.current;
     if (!y) return;
@@ -229,50 +228,50 @@ function Wt({
     }));
   }, [h.menus]), v(() => {
     CA = !0, K();
-    const y = setTimeout(K, 0), L = setTimeout(K, 50), N = setTimeout(K, 100), $ = setTimeout(K, 200), lA = setTimeout(() => {
+    const y = setTimeout(K, 0), L = setTimeout(K, 50), F = setTimeout(K, 100), _ = setTimeout(K, 200), nA = setTimeout(() => {
       CA = !1;
     }, 300);
     return () => {
-      clearTimeout(y), clearTimeout(L), clearTimeout(N), clearTimeout($), clearTimeout(lA);
+      clearTimeout(y), clearTimeout(L), clearTimeout(F), clearTimeout(_), clearTimeout(nA);
     };
   }, [S.pathname]), v(() => {
-    F.current && (F.current.scrollTop = 0);
+    N.current && (N.current.scrollTop = 0);
   }, [S.pathname]), v(() => {
-    x && X(!1);
+    x && $(!1);
   }, [S.pathname, x]), v(() => {
     x && Z(!0);
   }, [x]);
   const q = () => {
-    u(!0);
+    I(!0);
   }, m = () => {
-    u(!1);
+    I(!1);
   }, iA = () => {
-    u(!1), t();
+    I(!1), t();
   }, tA = h.menus.flatMap(
     (y) => y.items.flatMap((L) => {
-      const N = [L.to];
-      return L.children && N.push(...L.children.map(($) => $.to)), N;
+      const F = [L.to];
+      return L.children && F.push(...L.children.map((_) => _.to)), F;
     })
-  ), nA = (y) => {
+  ), oA = (y) => {
     if (!S.pathname.startsWith(y)) return !1;
-    const L = tA.filter((N) => S.pathname.startsWith(N)).sort((N, $) => $.length - N.length)[0];
+    const L = tA.filter((F) => S.pathname.startsWith(F)).sort((F, _) => _.length - F.length)[0];
     return y === L;
   };
   v(() => {
     h.menus.forEach((y) => {
       y.items.forEach((L) => {
-        var N;
-        (N = L.children) != null && N.some(($) => S.pathname.startsWith($.to)) && k(($) => {
-          const lA = new Set($);
-          return lA.add(L.id), lA;
+        var F;
+        (F = L.children) != null && F.some((_) => S.pathname.startsWith(_.to)) && k((_) => {
+          const nA = new Set(_);
+          return nA.add(L.id), nA;
         });
       });
     });
   }, [S.pathname, h.menus]);
   const YA = (y) => {
     k((L) => {
-      const N = new Set(L);
-      return N.has(y) ? N.delete(y) : N.add(y), N;
+      const F = new Set(L);
+      return F.has(y) ? F.delete(y) : F.add(y), F;
     });
   };
   v(() => {
@@ -281,9 +280,9 @@ function Wt({
   const De = sA(() => {
     if (f !== null)
       return h.menus.filter(
-        (N) => N.id === f || N.parentGroupId === f
+        (F) => F.id === f || F.parentGroupId === f
       );
-    const y = h.menus.filter((N) => N.parentGroupId === void 0), L = h.menus.filter((N) => N.parentGroupId !== void 0).flatMap((N) => N.items);
+    const y = h.menus.filter((F) => F.parentGroupId === void 0), L = h.menus.filter((F) => F.parentGroupId !== void 0).flatMap((F) => F.items);
     return L.length === 0 ? y : [
       ...y,
       { id: 18, name: "Pengaturan", items: L, parentGroupId: void 0 }
@@ -314,7 +313,7 @@ function Wt({
                 pointerEvents: R ? "auto" : "none",
                 transition: "opacity 0.3s"
               },
-              onClick: () => X(!1)
+              onClick: () => $(!1)
             }
           ),
           /* @__PURE__ */ g(
@@ -328,7 +327,7 @@ function Wt({
                   zIndex: 50,
                   transform: R ? "translateX(0)" : "translateX(-100%)"
                 },
-                backgroundColor: "white",
+                backgroundColor: "#F8F8F8",
                 borderRight: "1px solid #e5e7eb",
                 display: "flex",
                 flexDirection: "column",
@@ -388,7 +387,7 @@ function Wt({
                       x && /* @__PURE__ */ A(
                         "button",
                         {
-                          onClick: () => X(!1),
+                          onClick: () => $(!1),
                           style: {
                             padding: "0.375rem",
                             borderRadius: "0.5rem",
@@ -438,7 +437,7 @@ function Wt({
                       borderRadius: "var(--starasia-ui-radii-md)",
                       backgroundColor: "white",
                       border: "1px solid #d1d5db",
-                      boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
+                      // boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
                       cursor: "pointer",
                       color: "#374151",
                       transition: "background-color 0.2s"
@@ -536,13 +535,13 @@ function Wt({
                         }
                       ),
                       /* @__PURE__ */ A("div", { style: { paddingLeft: "0.5rem", paddingRight: "0.5rem", display: "flex", flexDirection: "column", gap: "var(--starasia-ui-spacing-xs)" }, children: y.items.map((L) => {
-                        const N = L.children && L.children.length > 0, $ = H.has(L.id), lA = N ? L.children.some((_) => nA(_.to)) : nA(L.to);
-                        return /* @__PURE__ */ g("div", { "data-menu-active": lA || void 0, children: [
+                        const F = L.children && L.children.length > 0, _ = H.has(L.id), nA = F ? L.children.some((V) => oA(V.to)) : oA(L.to);
+                        return /* @__PURE__ */ g("div", { "data-menu-active": nA || void 0, children: [
                           /* @__PURE__ */ g(
                             "button",
                             {
                               onClick: () => {
-                                N ? YA(L.id) : j(L.to);
+                                F ? YA(L.id) : j(L.to);
                               },
                               style: {
                                 width: "100%",
@@ -556,18 +555,18 @@ function Wt({
                                 paddingBottom: "0.5rem",
                                 borderRadius: "var(--starasia-ui-radii-md)",
                                 textAlign: "left",
-                                border: "none",
-                                backgroundColor: lA ? "var(--starasia-ui-brand-primary-tertiary)" : "transparent",
-                                color: lA ? "var(--starasia-ui-brand-primary-default)" : "#374151",
-                                transition: "all 0.2s",
+                                border: nA ? "1px solid rgba(11, 18, 14, 0.1412)" : "1px solid transparent",
+                                backgroundColor: nA ? "#FFFFFF" : "transparent",
+                                color: nA ? "#292A2E" : "#505258",
+                                // transition: "all 0.2s",
                                 cursor: "pointer"
                               },
                               title: z && !x ? L.title : void 0,
-                              onMouseEnter: (_) => {
-                                lA || (_.currentTarget.style.backgroundColor = "#f3f4f6");
+                              onMouseEnter: (V) => {
+                                nA || (V.currentTarget.style.backgroundColor = "#f3f4f6");
                               },
-                              onMouseLeave: (_) => {
-                                lA || (_.currentTarget.style.backgroundColor = "transparent");
+                              onMouseLeave: (V) => {
+                                nA || (V.currentTarget.style.backgroundColor = "transparent");
                               },
                               children: [
                                 /* @__PURE__ */ A(M, { name: L.icon, size: "sm", style: { flexShrink: 0 } }),
@@ -585,7 +584,7 @@ function Wt({
                                       children: L.title
                                     }
                                   ),
-                                  N && /* @__PURE__ */ A(
+                                  F && /* @__PURE__ */ A(
                                     "svg",
                                     {
                                       style: {
@@ -593,7 +592,7 @@ function Wt({
                                         height: "1rem",
                                         flexShrink: 0,
                                         transition: "transform 0.2s",
-                                        transform: $ ? "rotate(180deg)" : "rotate(0deg)"
+                                        transform: _ ? "rotate(180deg)" : "rotate(0deg)"
                                       },
                                       fill: "none",
                                       stroke: "currentColor",
@@ -613,7 +612,7 @@ function Wt({
                               ]
                             }
                           ),
-                          N && (!z || x) && /* @__PURE__ */ A(
+                          F && (!z || x) && /* @__PURE__ */ A(
                             "div",
                             {
                               style: {
@@ -622,14 +621,14 @@ function Wt({
                                 borderLeft: "1px solid #e5e7eb",
                                 overflow: "hidden",
                                 transition: "all 0.3s ease-in-out",
-                                maxHeight: $ ? `${L.children.length * 44}px` : "0px",
-                                opacity: $ ? 1 : 0,
-                                marginTop: $ ? "0.25rem" : "0px"
+                                maxHeight: _ ? `${L.children.length * 44}px` : "0px",
+                                opacity: _ ? 1 : 0,
+                                marginTop: _ ? "0.25rem" : "0px"
                               },
-                              children: L.children.map((_) => /* @__PURE__ */ g(
+                              children: L.children.map((V) => /* @__PURE__ */ g(
                                 "button",
                                 {
-                                  onClick: () => j(_.to),
+                                  onClick: () => j(V.to),
                                   style: {
                                     width: "100%",
                                     display: "flex",
@@ -641,23 +640,23 @@ function Wt({
                                     paddingBottom: "0.5rem",
                                     borderRadius: "var(--starasia-ui-radii-md)",
                                     textAlign: "left",
-                                    border: "none",
-                                    backgroundColor: nA(_.to) ? "var(--starasia-ui-brand-primary-tertiary)" : "transparent",
-                                    color: nA(_.to) ? "var(--starasia-ui-brand-primary-default)" : "#4b5563",
-                                    transition: "all 0.2s",
-                                    cursor: "pointer"
+                                    backgroundColor: oA(V.to) ? "#FFFFFF" : "transparent",
+                                    color: oA(V.to) ? "#292A2E" : "#505258",
+                                    // transition: "all 0.2s",
+                                    cursor: "pointer",
+                                    border: oA(V.to) ? "1px solid rgba(11, 18, 14, 0.1412)" : "1px solid transparent"
                                   },
                                   onMouseEnter: (pA) => {
-                                    nA(_.to) || (pA.currentTarget.style.backgroundColor = "#f3f4f6");
+                                    oA(V.to) || (pA.currentTarget.style.backgroundColor = "#f3f4f6");
                                   },
                                   onMouseLeave: (pA) => {
-                                    nA(_.to) || (pA.currentTarget.style.backgroundColor = "transparent");
+                                    oA(V.to) || (pA.currentTarget.style.backgroundColor = "transparent");
                                   },
                                   children: [
                                     /* @__PURE__ */ A(
                                       M,
                                       {
-                                        name: _.icon,
+                                        name: V.icon,
                                         size: "sm",
                                         style: { flexShrink: 0 }
                                       }
@@ -670,12 +669,12 @@ function Wt({
                                           fontWeight: "500",
                                           whiteSpace: "nowrap"
                                         },
-                                        children: _.title
+                                        children: V.title
                                       }
                                     )
                                   ]
                                 },
-                                _.id
+                                V.id
                               ))
                             }
                           )
@@ -707,7 +706,7 @@ function Wt({
                     x && /* @__PURE__ */ A(
                       "button",
                       {
-                        onClick: () => X(!0),
+                        onClick: () => $(!0),
                         style: {
                           padding: "0.375rem",
                           borderRadius: "0.5rem",
@@ -824,7 +823,7 @@ function Wt({
                             marginTop: "16px"
                           },
                           children: [
-                            /* @__PURE__ */ A(Ie, { children: /* @__PURE__ */ g(
+                            /* @__PURE__ */ A(ue, { children: /* @__PURE__ */ g(
                               "div",
                               {
                                 style: {
@@ -911,11 +910,11 @@ function Wt({
                                   type: "button",
                                   onClick: y.onClick,
                                   style: XA,
-                                  onMouseEnter: (N) => {
-                                    N.currentTarget.style.backgroundColor = "#f3f4f6";
+                                  onMouseEnter: (F) => {
+                                    F.currentTarget.style.backgroundColor = "#f3f4f6";
                                   },
-                                  onMouseLeave: (N) => {
-                                    N.currentTarget.style.backgroundColor = "transparent";
+                                  onMouseLeave: (F) => {
+                                    F.currentTarget.style.backgroundColor = "transparent";
                                   },
                                   children: [
                                     /* @__PURE__ */ A(M, { name: y.icon, size: "md" }),
@@ -967,7 +966,7 @@ function Wt({
             /* @__PURE__ */ A(
               "main",
               {
-                ref: F,
+                ref: N,
                 style: {
                   flex: 1,
                   overflowY: "auto"
@@ -1156,7 +1155,7 @@ function Rt({
   const r = Be(), o = UA(), { selectedGroupId: t, setSelectedGroupId: n } = we(), [l, c] = Y(!1), s = (C) => {
     var d;
     if (n(C), C !== null) {
-      const w = r.menus.find((I) => I.id === C), B = (d = w == null ? void 0 : w.items[0]) == null ? void 0 : d.to;
+      const w = r.menus.find((u) => u.id === C), B = (d = w == null ? void 0 : w.items[0]) == null ? void 0 : d.to;
       B && o(B);
     }
     e == null || e(C);
@@ -1219,7 +1218,7 @@ function Rt({
 }
 const vt = AA(
   ({ children: e, coverImage: i, logo: r }) => {
-    const o = V("md"), t = fe();
+    const o = X("md"), t = fe();
     return /* @__PURE__ */ g(
       a,
       {
@@ -1474,14 +1473,14 @@ const vt = AA(
   containerProps: c,
   headerProps: s
 }) => {
-  const C = V("lg"), d = UA(), w = e == null ? void 0 : e.show, B = () => {
+  const C = X("lg"), d = UA(), w = e == null ? void 0 : e.show, B = () => {
     if (typeof (e == null ? void 0 : e.onClick) == "function") {
       e.onClick();
       return;
     }
     d(-1, { replace: !0 });
-  }, I = () => n ? se(n) ? n : /* @__PURE__ */ A(a, { direction: "row", gap: "lg", children: n.map(
-    ({ title: S, icon: P, buttonProps: x, onClick: G }, u) => !S && !P ? null : /* @__PURE__ */ A(
+  }, u = () => n ? se(n) ? n : /* @__PURE__ */ A(a, { direction: "row", gap: "lg", children: n.map(
+    ({ title: S, icon: P, buttonProps: x, onClick: G }, I) => !S && !P ? null : /* @__PURE__ */ A(
       O,
       {
         fullWidth: !C,
@@ -1490,7 +1489,7 @@ const vt = AA(
         ...x,
         children: S
       },
-      `action-${u}`
+      `action-${I}`
     )
   ) }) : null, b = () => e != null && e.navigateTo ? /* @__PURE__ */ A(a, { direction: "row", children: /* @__PURE__ */ A(
     Ye,
@@ -1550,8 +1549,8 @@ const vt = AA(
     a,
     {
       gap: "sm",
-      paddingTop: (s == null ? void 0 : s.paddingTop) || "lg",
-      paddingInline: (s == null ? void 0 : s.paddingInline) || "xl",
+      paddingTop: s == null ? void 0 : s.paddingTop,
+      paddingInline: s == null ? void 0 : s.paddingInline,
       ...s,
       children: [
         w && b(),
@@ -1567,17 +1566,26 @@ const vt = AA(
                 /* @__PURE__ */ A(Q, { variant: "h2", fontWeight: "semibold", fontFamily: "Poppins", children: i }),
                 r && /* @__PURE__ */ A(ie, { border: !0, size: "lg", text: r, ...l })
               ] }) : i,
-              I()
+              u()
             ]
           }
         )
       ]
     }
   ), j = () => o;
-  return /* @__PURE__ */ g(a, { gap: "lg", variant: "main", ...c, children: [
-    t && h(),
-    j()
-  ] });
+  return /* @__PURE__ */ g(
+    a,
+    {
+      gap: "md",
+      variant: "main",
+      ...c,
+      padding: "md",
+      children: [
+        t && h(),
+        j()
+      ]
+    }
+  );
 }, Xt = AA(Ue), We = {
   icon: "Cross",
   title: ""
@@ -1591,7 +1599,7 @@ const vt = AA(
     paddingHorizontal: n = !0,
     closeButton: l = We
   }, c) => /* @__PURE__ */ A(W, { children: /* @__PURE__ */ A(
-    ue,
+    Ie,
     {
       blur: !1,
       isShow: i,
@@ -1649,7 +1657,7 @@ const vt = AA(
   ) })
 ), Re = AA(
   ({ children: e, borderBottom: i = !0, padding: r = !0 }) => {
-    const o = V("lg");
+    const o = X("lg");
     return /* @__PURE__ */ A(
       a,
       {
@@ -1665,7 +1673,7 @@ const vt = AA(
     );
   }
 ), ve = AA(({ children: e }) => {
-  const i = V("lg");
+  const i = X("lg");
   return /* @__PURE__ */ A(
     a,
     {
@@ -1690,16 +1698,16 @@ const vt = AA(
     searchHighlightPlaceholder: d = "CTRL + K",
     filterContainer: w,
     actionContainer: B,
-    headerProps: I = { borderBottom: !0 },
+    headerProps: u = { borderBottom: !0 },
     variantTag: b = "info"
   }) => {
-    const h = V("lg"), [j, S] = kA(), P = j.get(s), x = uA(j.toString()), G = TA(
+    const h = X("lg"), [j, S] = kA(), P = j.get(s), x = IA(j.toString()), G = TA(
       ({ target: { value: R } }) => {
         c && c(R), s && S({ ...x, [s]: R });
       },
       [s, c, S, x]
-    ), u = () => /* @__PURE__ */ A(
-      IA,
+    ), I = () => /* @__PURE__ */ A(
+      uA,
       {
         placeholder: C,
         highlightPlaceholder: d,
@@ -1719,7 +1727,7 @@ const vt = AA(
         borderRadius: "rounded-md",
         variant: "section",
         children: [
-          l !== null ? /* @__PURE__ */ A(Re, { ...I, children: l || /* @__PURE__ */ g(
+          l !== null ? /* @__PURE__ */ A(Re, { ...u, children: l || /* @__PURE__ */ g(
             a,
             {
               direction: "row",
@@ -1733,7 +1741,7 @@ const vt = AA(
                   {
                     style: h ? { width: "100%", maxWidth: "19.313rem" } : { flex: 1 },
                     ...B,
-                    children: o || (n ? u() : null)
+                    children: o || (n ? I() : null)
                   }
                 )
               ]
@@ -1920,7 +1928,7 @@ const vt = AA(
       onSearch: d,
       value: w,
       dateFilter: B,
-      enableInputDate: I,
+      enableInputDate: u,
       withSearchParam: b,
       // disabled,
       rangedDate: h,
@@ -1929,7 +1937,7 @@ const vt = AA(
       min: P,
       max: x
     }, G) => {
-      const u = t == null ? void 0 : t.length;
+      const I = t == null ? void 0 : t.length;
       let z;
       const Z = () => {
         switch (i) {
@@ -1950,7 +1958,7 @@ const vt = AA(
             return /* @__PURE__ */ A(
               te,
               {
-                input: I,
+                input: u,
                 filter: B,
                 value: ei(w || z, h),
                 onChange: (H) => o == null ? void 0 : o({ value: H, name: c, type: i }),
@@ -1970,7 +1978,7 @@ const vt = AA(
             );
           case "text":
             return /* @__PURE__ */ A(
-              IA,
+              uA,
               {
                 onChange: ({ target: { value: H } }) => o == null ? void 0 : o({ value: H, name: c, type: i }),
                 value: w || z,
@@ -1995,7 +2003,7 @@ const vt = AA(
                   checked: k,
                   sizes: "sm",
                   onChange: (f) => {
-                    const E = Array.isArray(w) ? w : [], D = f.target.checked ? [...E, H.value] : E.filter((F) => F !== H.value);
+                    const E = Array.isArray(w) ? w : [], D = f.target.checked ? [...E, H.value] : E.filter((N) => N !== H.value);
                     o == null || o({ value: D, name: c, type: i });
                   }
                 },
@@ -2006,7 +2014,7 @@ const vt = AA(
             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((H, k) => /* @__PURE__ */ A(
         Qe,
         {
           ref: G,
@@ -2032,7 +2040,7 @@ const vt = AA(
     onHide: n,
     resetting: l
   }) => {
-    const [c, s] = Y(!1), C = eA(null), d = ({ value: B, name: I, type: b }) => {
+    const [c, s] = Y(!1), C = eA(null), d = ({ value: B, name: u, type: b }) => {
       if (o)
         switch (b) {
           case "date":
@@ -2061,16 +2069,16 @@ const vt = AA(
         ref: C,
         children: [
           /* @__PURE__ */ A(ii, { 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(
             Qe,
             {
-              borderBottom: I !== r.length - 1,
+              borderBottom: u !== r.length - 1,
               onChange: d,
               withSearchParam: o,
               ...B,
               ref: C
             },
-            I
+            u
           )) })
         ]
       }
@@ -2165,23 +2173,23 @@ function rr(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 ni = "starasia-admin", oA = (e) => `var(--${ni}-${e})`, or = {
+const ni = "starasia-admin", lA = (e) => `var(--${ni}-${e})`, or = {
   base: {
-    borderColor: oA("base-border-color"),
-    textColor: oA("base-text-color"),
-    iconColor: oA("base-icon-color"),
-    placeholderColor: oA("base-placeholder-color")
+    borderColor: lA("base-border-color"),
+    textColor: lA("base-text-color"),
+    iconColor: lA("base-icon-color"),
+    placeholderColor: lA("base-placeholder-color")
   },
   document: {
-    bgColor: oA("document-bg-color")
+    bgColor: lA("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: lA("sidebar-bg-color"),
+    borderColor: lA("sidebar-border-color"),
+    maxWidth: lA("sidebar-max-width"),
+    width: lA("sidebar-width"),
+    collapseWidth: lA("sidebar-collapse-width"),
+    collapseV2Width: lA("sidebar-v2-collapse-width")
   }
 }, nr = 24 * 60 * 60 * 1e3, lr = (e) => {
   const i = "14px poppins", o = document.createElement("canvas").getContext("2d");
@@ -2291,58 +2299,58 @@ const Qr = (e) => {
     o(!0);
   }, w = (G) => {
     o(G);
-  }, B = l ? ai(l) : void 0, I = !!(B && ((x = Object.values(B)) == null ? void 0 : x.length) > 0), b = () => B ? Object.keys(B).map((G) => {
+  }, B = l ? ai(l) : void 0, u = !!(B && ((x = Object.values(B)) == null ? void 0 : x.length) > 0), b = () => B ? Object.keys(B).map((G) => {
     var H, k, f;
-    const u = HA(G, i.fields), z = [];
+    const I = HA(G, i.fields), z = [];
     let Z = "";
-    const R = (H = u == null ? void 0 : u.childrenKey) == null ? void 0 : H.length, X = u == null ? void 0 : u.parentKey;
-    switch (R && ((k = u == null ? void 0 : u.childrenKey) == null || k.forEach((E) => {
+    const R = (H = I == null ? void 0 : I.childrenKey) == null ? void 0 : H.length, $ = I == null ? void 0 : I.parentKey;
+    switch (R && ((k = I == null ? void 0 : I.childrenKey) == null || k.forEach((E) => {
       const D = HA(E, i.fields);
       D && z.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[G] && typeof B[G] != "string" ? B[G] : [], D = (E == null ? void 0 : E.length) > 0 ? (f = E.map((m) => m.label)) == null ? void 0 : f.join(",") : B[G];
-        Z = `${u == null ? void 0 : u.label}: ${D}`;
+        Z = `${I == null ? void 0 : I.label}: ${D}`;
         break;
       case "checkbox":
         const K = (Array.isArray(B[G]) ? B[G] : []).map(
           (m) => {
             var iA, tA;
-            return ((tA = (iA = u == null ? void 0 : u.options) == null ? void 0 : iA.find((nA) => nA.value === m)) == null ? void 0 : tA.label) || m;
+            return ((tA = (iA = I == null ? void 0 : I.options) == null ? void 0 : iA.find((oA) => oA.value === m)) == null ? void 0 : tA.label) || m;
           }
         ).join(", ");
-        Z = `${u == null ? void 0 : u.label}: ${K}`;
+        Z = `${I == null ? void 0 : I.label}: ${K}`;
         break;
       case "date":
-        if (u.rangedDate) {
-          const m = B[G], iA = (u == null ? void 0 : u.dateValueFormatText) === "indonesian" ? xA(new Date(m == null ? void 0 : m.from)) : m == null ? void 0 : m.from, tA = (u == null ? void 0 : u.dateValueFormatText) === "indonesian" ? xA(new Date(m == null ? void 0 : m.to)) : m == null ? void 0 : m.to;
-          Z = `${u == null ? void 0 : u.label}: ${iA || ""} ~ ${tA || ""}`;
+        if (I.rangedDate) {
+          const m = B[G], iA = (I == null ? void 0 : I.dateValueFormatText) === "indonesian" ? xA(new Date(m == null ? void 0 : m.from)) : m == null ? void 0 : m.from, tA = (I == null ? void 0 : I.dateValueFormatText) === "indonesian" ? xA(new Date(m == null ? void 0 : m.to)) : m == null ? void 0 : m.to;
+          Z = `${I == null ? void 0 : I.label}: ${iA || ""} ~ ${tA || ""}`;
           break;
         }
-        const q = (u == null ? void 0 : u.dateValueFormatText) === "indonesian" ? xA(new Date(B[G])) : B[G];
-        Z = `${u == null ? void 0 : u.label}: ${q || ""}`;
+        const q = (I == null ? void 0 : I.dateValueFormatText) === "indonesian" ? xA(new Date(B[G])) : B[G];
+        Z = `${I == null ? void 0 : I.label}: ${q || ""}`;
         break;
       default:
-        Z = `${u == null ? void 0 : u.label}: ${B[G]}`;
+        Z = `${I == null ? void 0 : I.label}: ${B[G]}`;
         break;
     }
     if (R && z.length > 0) {
       let E = z.map((D) => {
-        var F, K;
-        return D != null && D.value && typeof D.value != "string" ? (K = (F = D == null ? void 0 : D.value) == null ? void 0 : F.map((q) => q == null ? void 0 : q.label)) == null ? void 0 : K.join(",") : D.value;
+        var N, K;
+        return D != null && D.value && typeof D.value != "string" ? (K = (N = D == null ? void 0 : D.value) == null ? void 0 : N.map((q) => q == null ? void 0 : q.label)) == null ? void 0 : K.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 && (Z = `${Z} ${I.relationLabelChip || "by"} ${E}`);
     }
-    return X && (Z = ""), {
-      name: u == null ? void 0 : u.name,
-      label: u == null ? void 0 : u.label,
+    return $ && (Z = ""), {
+      name: I == null ? void 0 : I.name,
+      label: I == null ? void 0 : I.label,
       value: B[G],
       valueText: Z,
       children: z
@@ -2358,7 +2366,7 @@ const Qr = (e) => {
     reset: d,
     chips: j,
     toggleConfig: {
-      active: I,
+      active: u,
       onClick: C
     },
     chipsConfig: {
@@ -2373,12 +2381,12 @@ const Qr = (e) => {
       onReset: w
     }
   };
-}, ur = {
+}, Ir = {
   Container: ri,
   Toggle: oi,
   Chips: _e,
   Chip: de
-}, Ci = (e) => /* @__PURE__ */ A(Q, { variant: "h1", children: e.children, ...e.props }), Bi = (e) => /* @__PURE__ */ A(Q, { variant: "h2", children: e.children, ...e.props }), wi = (e) => /* @__PURE__ */ A(Q, { variant: "h3", children: e.children, ...e.props }), di = (e) => /* @__PURE__ */ A(Q, { variant: "h4", children: e.children, ...e.props }), Qi = (e) => /* @__PURE__ */ A(Q, { variant: "h5", children: e.children, ...e.props }), hi = (e) => /* @__PURE__ */ A(Q, { variant: "h6", children: e.children, ...e.props }), Di = (e) => /* @__PURE__ */ A(Q, { variant: "sub-h1", children: e.children, ...e.props }), ui = (e) => /* @__PURE__ */ A(Q, { variant: "sub-h2", children: e.children, ...e.props }), Ii = (e) => /* @__PURE__ */ A(Q, { variant: "sub-h3", children: e.children, ...e.props }), ki = (e) => /* @__PURE__ */ A(Q, { variant: "body-1", children: e.children, ...e.props }), Ei = (e) => /* @__PURE__ */ A(Q, { variant: "body-2", children: e.children, ...e.props }), Mi = (e) => /* @__PURE__ */ A(Q, { variant: "body-3", children: e.children, ...e.props }), T = {
+}, Ci = (e) => /* @__PURE__ */ A(Q, { variant: "h1", children: e.children, ...e.props }), Bi = (e) => /* @__PURE__ */ A(Q, { variant: "h2", children: e.children, ...e.props }), wi = (e) => /* @__PURE__ */ A(Q, { variant: "h3", children: e.children, ...e.props }), di = (e) => /* @__PURE__ */ A(Q, { variant: "h4", children: e.children, ...e.props }), Qi = (e) => /* @__PURE__ */ A(Q, { variant: "h5", children: e.children, ...e.props }), hi = (e) => /* @__PURE__ */ A(Q, { variant: "h6", children: e.children, ...e.props }), Di = (e) => /* @__PURE__ */ A(Q, { variant: "sub-h1", children: e.children, ...e.props }), Ii = (e) => /* @__PURE__ */ A(Q, { variant: "sub-h2", children: e.children, ...e.props }), ui = (e) => /* @__PURE__ */ A(Q, { variant: "sub-h3", children: e.children, ...e.props }), ki = (e) => /* @__PURE__ */ A(Q, { variant: "body-1", children: e.children, ...e.props }), Ei = (e) => /* @__PURE__ */ A(Q, { variant: "body-2", children: e.children, ...e.props }), Mi = (e) => /* @__PURE__ */ A(Q, { variant: "body-3", children: e.children, ...e.props }), T = {
   H1: Ci,
   H2: Bi,
   H3: wi,
@@ -2386,13 +2394,13 @@ const Qr = (e) => {
   H5: Qi,
   H6: hi,
   SubH1: Di,
-  SubH2: ui,
-  SubH3: Ii,
+  SubH2: Ii,
+  SubH3: ui,
   Body1: ki,
   Body2: Ei,
   Body3: Mi
 }, WA = () => {
-  const [e, i] = kA(), r = uA(e.toString()), o = ae(), t = GA(), n = o.id;
+  const [e, i] = kA(), r = IA(e.toString()), o = ae(), t = GA(), n = o.id;
   return {
     // query params
     setSearchParams: i,
@@ -2452,15 +2460,15 @@ const Qr = (e) => {
         [i]: C
       }, B = { ...n };
       l && typeof l == "string" && delete B[l], delete B[s];
-      const I = {
+      const u = {
         ...B,
         [c]: JSON.stringify(w)
       }, b = new URLSearchParams(n).toString(), h = new URLSearchParams(
-        I
+        u
       ).toString();
       if (b === h)
         return;
-      t(I);
+      t(u);
     }
   }
 }, jA = ({
@@ -2471,7 +2479,7 @@ const Qr = (e) => {
 }) => {
   const t = r.get(i) || void 0, n = t && typeof t == "string" ? JSON.parse(t) : void 0, l = n ? n[e] : void 0;
   return o === "label" && l ? JSON.parse(l)[0].label : o === "value" && l ? JSON.parse(l)[0].value : l;
-}, Ir = ({
+}, ur = ({
   name: e,
   filterKey: i = "filter",
   searchParams: r,
@@ -2523,23 +2531,23 @@ const Qr = (e) => {
 }) => {
   const { searchParams: n, setSearchParams: l, searchQueries: c } = WA(), [s, C] = Y({}), d = () => {
     n.delete(r || "filter"), l(n);
-  }, w = (B, I) => {
+  }, w = (B, u) => {
     switch (B.type) {
       case "radio": {
         const { show: b = !0 } = B;
-        return b && /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(a, { children: B.title }) }, I);
+        return b && /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(a, { children: B.title }) }, u);
       }
       case "dropdown": {
         const { show: b = !0 } = B;
-        return b && /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(a, { children: B.title }) }, I);
+        return b && /* @__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: b = !0 } = B;
-        return b && /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(a, { children: B.title }) }, I);
+        return b && /* @__PURE__ */ A(a, { children: /* @__PURE__ */ A(a, { children: B.title }) }, u);
       }
       default:
         return null;
@@ -2557,7 +2565,7 @@ const Qr = (e) => {
         }
       )
     ] }),
-    t == null ? void 0 : t.map((B, I) => w(B, I))
+    t == null ? void 0 : t.map((B, u) => w(B, u))
   ] }) });
 }, Oi = ({
   searchKey: e = "q",
@@ -2573,13 +2581,13 @@ const Qr = (e) => {
   handleOnReset: d,
   filterConfigs: w,
   buttonToggleProps: B,
-  position: I = "right",
+  position: u = "right",
   titleSearchLabel: b = "Work Order",
   withTitleLabels: h = !1
 }) => {
-  const S = (B == null ? void 0 : B.isShowLabel) ?? !0, [P, x] = Y(!1), [G, u] = Y(0), z = () => {
-    u((m) => m + 1);
-  }, { searchParams: Z, setSearchParams: R, getQueryParam: X } = WA(), H = uA(Z.toString()), k = bi(e, Z, c) || "", [f, E] = Y(k), D = X(c), K = !!(D && !(() => {
+  const S = (B == null ? void 0 : B.isShowLabel) ?? !0, [P, x] = Y(!1), [G, I] = Y(0), z = () => {
+    I((m) => m + 1);
+  }, { searchParams: Z, setSearchParams: R, getQueryParam: $ } = WA(), H = IA(Z.toString()), k = bi(e, Z, c) || "", [f, E] = Y(k), D = $(c), K = !!(D && !(() => {
     if (D)
       try {
         const m = JSON.parse(D);
@@ -2588,7 +2596,7 @@ const Qr = (e) => {
         console.error("Filter parameter is not a valid JSON:", m);
       }
     return !1;
-  })()), q = V("md");
+  })()), q = X("md");
   return v(() => {
     E(k);
   }, [k]), v(() => {
@@ -2621,7 +2629,7 @@ const Qr = (e) => {
     {
       gap: "md",
       style: {
-        flexDirection: q && I === "left" ? "row" : q && I === "right" ? "row-reverse" : "column"
+        flexDirection: q && u === "left" ? "row" : q && u === "right" ? "row-reverse" : "column"
       },
       align: "flex-end",
       children: [
@@ -2636,11 +2644,11 @@ const Qr = (e) => {
             children: /* @__PURE__ */ A(Q, { color: "error", fontWeight: "semibold", children: "Reset" })
           }
         ) }),
-        t == null ? void 0 : t.map(({ minWidth: m, content: iA, title: tA, onClickContainer: nA }, YA) => /* @__PURE__ */ g(
+        t == null ? void 0 : t.map(({ minWidth: m, content: iA, title: tA, onClickContainer: oA }, YA) => /* @__PURE__ */ g(
           a,
           {
             gap: "sm",
-            onClick: nA,
+            onClick: oA,
             style: {
               minWidth: m
             },
@@ -2742,7 +2750,7 @@ const Qr = (e) => {
                 b
               ] }),
               /* @__PURE__ */ A(
-                IA,
+                uA,
                 {
                   placeholder: r,
                   leftIcon: /* @__PURE__ */ A(M, { name: "Search", width: 20, height: 20 }),
@@ -2800,7 +2808,7 @@ const Qr = (e) => {
   advanceFilter: i,
   showFilter: r = !0
 }) => {
-  const o = V("md"), t = () => e ? se(e) ? e : /* @__PURE__ */ A(
+  const o = X("md"), t = () => e ? se(e) ? e : /* @__PURE__ */ A(
     a,
     {
       style: {
@@ -2882,7 +2890,7 @@ const Qr = (e) => {
       /* @__PURE__ */ A(T.Body1, { children: e || 0 })
     ]
   }
-), Ni = ({
+), Fi = ({
   pagination: e,
   pageKey: i = "page",
   perPageKey: r = "perPage",
@@ -2898,7 +2906,7 @@ const Qr = (e) => {
       [r]: b,
       [i]: "1"
     });
-  }, B = (e == null ? void 0 : e.rangeStart) ?? (((e == null ? void 0 : e.currentPage) || 0) > 1 ? (((e == null ? void 0 : e.currentPage) || 0) - 1) * ((e == null ? void 0 : e.perPage) || 0) + 1 : 1), 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,
     {
@@ -2934,7 +2942,7 @@ const Qr = (e) => {
               defaultValue: C ? [{ label: `${C} per row`, value: C }] : [{ label: `${o} per row`, value: `${o}` }]
             }
           ),
-          /* @__PURE__ */ A(Q, { children: `${B}-${I} of ${(e == null ? void 0 : e.totalData) || 0}` })
+          /* @__PURE__ */ A(Q, { children: `${B}-${u} of ${(e == null ? void 0 : e.totalData) || 0}` })
         ] }),
         /* @__PURE__ */ A(
           Ee,
@@ -2954,7 +2962,7 @@ const Qr = (e) => {
       )
     }
   );
-}, Fi = ({ filter: e, columnTitle: i }) => {
+}, Ni = ({ filter: e, columnTitle: i }) => {
   const [r, o] = Y(!1), t = eA(null), n = eA(null), l = eA(null), [c, s] = Y(""), [C, d] = Y({ top: 0, left: 0 }), w = e.selectedValues, B = sA(() => c ? e.options.filter(
     (h) => h.label.toLowerCase().includes(c.toLowerCase())
   ) : e.options, [e.options, c]);
@@ -2976,7 +2984,7 @@ const Qr = (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((S) => S !== h) : [...w, h];
     e.onFilterChange(j);
   }, b = () => e.onFilterChange([]);
@@ -3070,7 +3078,7 @@ const Qr = (e) => {
                 paddingBottom: "8px"
               },
               children: /* @__PURE__ */ A(
-                IA,
+                uA,
                 {
                   ref: l,
                   placeholder: `Search ${i.toLowerCase()}...`,
@@ -3144,7 +3152,7 @@ const Qr = (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)";
@@ -3262,7 +3270,7 @@ const Qr = (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)", NA = "var(--starasia-ui-color-gray-100)", Ki = ({
+), mA = "var(--starasia-ui-table-bg-default, #ffffff)", FA = "var(--starasia-ui-color-gray-100)", Ki = ({
   columns: e,
   records: i,
   handleDetail: r,
@@ -3276,33 +3284,33 @@ const Qr = (e) => {
   scrollParentRef: d,
   frozenCount: w = 0,
   onFrozenCountChange: B,
-  customActions: I,
+  customActions: u,
   actionsOrder: b = ["detail", "update", "delete", "custom"],
   customEmptyState: h
 }) => {
-  const S = [r, o, t].filter((k) => k !== void 0).length, P = !!I, x = S === 3 ? P ? "178px" : "140px" : S === 2 ? P ? "140px" : "102px" : S === 1 ? P ? "112px" : "74px" : P ? "74px" : "", G = (k, f) => {
+  const S = [r, o, t].filter((k) => k !== void 0).length, P = !!u, x = S === 3 ? P ? "178px" : "140px" : S === 2 ? P ? "140px" : "102px" : S === 1 ? P ? "112px" : "74px" : P ? "74px" : "", G = (k, f) => {
     if (!f) return k;
     if (typeof f == "function") return f(k);
     if (typeof f == "string") return k[f];
-  }, [u, z] = Y(!1);
+  }, [I, z] = Y(!1);
   v(() => {
     if (!(d != null && d.current)) return;
     const k = d.current;
     z(k.scrollHeight > k.clientHeight);
   }, [i, d]);
-  const Z = eA(null), [R, X] = Y([]);
+  const Z = eA(null), [R, $] = Y([]);
   KA(() => {
     if (!w || !Z.current) {
-      X([]);
+      $([]);
       return;
     }
     const k = Array.from(
       Z.current.querySelectorAll("thead tr th")
     ), f = [];
     let E = 0;
-    k.forEach((D, F) => {
-      f[F] = E, F < w && (E += D.offsetWidth);
-    }), X(f);
+    k.forEach((D, N) => {
+      f[N] = E, N < w && (E += D.offsetWidth);
+    }), $(f);
   }, [w, e, i]);
   const H = (k) => {
     B && B(k < w ? k : k + 1);
@@ -3317,7 +3325,7 @@ const Qr = (e) => {
         },
         children: /* @__PURE__ */ g(QA, { children: [
           e.map((k, f) => {
-            var F;
+            var N;
             const E = w > 0 && f < w, D = R[f] ?? 0;
             return /* @__PURE__ */ A(
               RA,
@@ -3345,9 +3353,9 @@ const Qr = (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 || ((N = k.accessor) == null ? void 0 : N.toString()) }),
                       k.filter && /* @__PURE__ */ A(
-                        Fi,
+                        Ni,
                         {
                           filter: k.filter,
                           columnTitle: k.title
@@ -3380,7 +3388,7 @@ const Qr = (e) => {
               `table-head-${f}`
             );
           }),
-          r || o || t || I ? /* @__PURE__ */ A(
+          r || o || t || u ? /* @__PURE__ */ A(
             RA,
             {
               style: {
@@ -3408,27 +3416,27 @@ const Qr = (e) => {
         style: {
           transition: "background-color 0.3s ease",
           padding: 0,
-          borderBottom: f === i.length - 1 && u ? void 0 : "1px solid var(--starasia-ui-utility-fill-default)"
+          borderBottom: f === i.length - 1 && I ? void 0 : "1px solid var(--starasia-ui-utility-fill-default)"
         },
         onMouseOver: (E) => {
           const D = E.currentTarget;
-          D.style.backgroundColor = NA, D.style.position = "relative", D.style.zIndex = "2", w > 0 && Array.from(D.querySelectorAll("td")).slice(0, w).forEach((K) => {
-            K.style.backgroundColor = NA;
+          D.style.backgroundColor = FA, D.style.position = "relative", D.style.zIndex = "2", w > 0 && Array.from(D.querySelectorAll("td")).slice(0, w).forEach((K) => {
+            K.style.backgroundColor = FA;
           });
-          const F = Array.from(D.querySelectorAll("td")).at(-1);
-          F && F.style.position === "sticky" && (F.style.backgroundColor = NA);
+          const N = Array.from(D.querySelectorAll("td")).at(-1);
+          N && N.style.position === "sticky" && (N.style.backgroundColor = FA);
         },
         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((K) => {
             K.style.backgroundColor = mA;
           });
-          const F = Array.from(D.querySelectorAll("td")).at(-1);
-          F && F.style.position === "sticky" && (F.style.backgroundColor = mA);
+          const N = Array.from(D.querySelectorAll("td")).at(-1);
+          N && N.style.position === "sticky" && (N.style.backgroundColor = mA);
         },
         children: [
           e.map((E, D) => {
-            const F = E.render ? E.render(k, f, i) : G(k, E.accessor), K = w > 0 && D < w, q = R[D] ?? 0;
+            const N = E.render ? E.render(k, f, i) : G(k, E.accessor), K = w > 0 && D < w, q = R[D] ?? 0;
             return /* @__PURE__ */ A(
               BA,
               {
@@ -3443,7 +3451,7 @@ const Qr = (e) => {
                   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 N == "string" ? /* @__PURE__ */ A(
                   Q,
                   {
                     style: {
@@ -3452,14 +3460,14 @@ const Qr = (e) => {
                       textOverflow: "ellipsis",
                       textAlign: E.textAlign === "text-right" ? "right" : E.textAlign === "text-center" ? "center" : "left"
                     },
-                    children: F
+                    children: N
                   }
-                ) : F
+                ) : N
               },
               `row-${f}-col-${D}`
             );
           }),
-          r || o || t || I ? /* @__PURE__ */ A(BA, { style: {
+          r || o || t || u ? /* @__PURE__ */ A(BA, { style: {
             width: x,
             position: "sticky",
             right: 0,
@@ -3491,7 +3499,7 @@ const Qr = (e) => {
                 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(aA.Fragment, { children: I == null ? void 0 : I(k) }, "custom") : null;
+            ) }, "delete") : E === "custom" ? /* @__PURE__ */ A(aA.Fragment, { children: u == null ? void 0 : u(k) }, "custom") : null;
           }) }) }) : null
         ]
       },
@@ -3533,7 +3541,7 @@ const Qr = (e) => {
       }
     ),
     d && /* @__PURE__ */ A(
-      Ni,
+      Fi,
       {
         pagination: i == null ? void 0 : i.pagination,
         pageKey: i == null ? void 0 : i.pageKey,
@@ -3627,7 +3635,7 @@ const yr = Hi(Zi), EA = ({
       ]
     }
   );
-}, FA = ({
+}, NA = ({
   dataApps: e,
   handleSwitch: i,
   title: r,
@@ -3714,7 +3722,7 @@ const yr = Hi(Zi), EA = ({
             /* @__PURE__ */ A(gA, { variant: "list" })
           ] }),
           children: /* @__PURE__ */ A(
-            FA,
+            NA,
             {
               dataApps: o == null ? void 0 : o.map((w) => {
                 var B;
@@ -3751,7 +3759,7 @@ const yr = Hi(Zi), EA = ({
         )
       ] }),
       /* @__PURE__ */ A(
-        FA,
+        NA,
         {
           title: "Organization Apps",
           show: r == null ? void 0 : r.some((w) => w.isTenant),
@@ -3764,7 +3772,7 @@ const yr = Hi(Zi), EA = ({
         }
       ),
       /* @__PURE__ */ A(
-        FA,
+        NA,
         {
           title: "Single Apps",
           show: r == null ? void 0 : r.some((w) => !w.isTenant),
@@ -3856,12 +3864,12 @@ const yr = Hi(Zi), EA = ({
             zA,
             {
               dataApps: (w = (d = l.data) == null ? void 0 : d.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,
@@ -4134,7 +4142,7 @@ const yr = Hi(Zi), EA = ({
         ),
         /* @__PURE__ */ g(a, { gap: "xs", fullWidth: t.inputProps.fullWidth || !1, children: [
           /* @__PURE__ */ A(
-            IA,
+            uA,
             {
               ref: t.inputRef,
               size: e,
@@ -4420,7 +4428,7 @@ const Xi = (e) => {
       return;
     }
     r.current && r.current.click();
-  }, t = V("md");
+  }, t = X("md");
   return /* @__PURE__ */ g(W, { children: [
     /* @__PURE__ */ A(
       "input",
@@ -4651,7 +4659,7 @@ const Xi = (e) => {
                           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
                         }
@@ -4665,7 +4673,7 @@ const Xi = (e) => {
                     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
                   }
@@ -4927,9 +4935,9 @@ const Xi = (e) => {
   ...r
 }) => {
   const o = JA(), t = (l) => {
-    var s, C, d, w, B, I;
+    var s, C, d, 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 = (s = o == null ? void 0 : o.computed) == null ? void 0 : s.red) == null ? void 0 : C[600] : e === "secondary-primary" ? (w = (d = o == null ? void 0 : o.computed) == null ? void 0 : d.blue) == null ? void 0 : w[700] : (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 = (s = o == null ? void 0 : o.computed) == null ? void 0 : s.red) == null ? void 0 : C[600] : e === "secondary-primary" ? (w = (d = o == null ? void 0 : o.computed) == null ? void 0 : d.blue) == null ? void 0 : w[700] : (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, s, C, d;
@@ -5114,7 +5122,7 @@ const ee = {
     maxFileSize: s = 2,
     onError: C
   }, d) => {
-    const w = V("md"), [B, I] = Y(!1), [b, h] = Y(null), [j, S] = Y(!1), [P, x] = Y({ x: 0, y: 0 }), [G, u] = Y(1), [z, Z] = Y(null);
+    const w = X("md"), [B, u] = Y(!1), [b, h] = Y(null), [j, S] = Y(!1), [P, x] = Y({ x: 0, y: 0 }), [G, I] = Y(1), [z, Z] = Y(null);
     v(() => {
       i === null && t(null);
     }, [i]);
@@ -5123,7 +5131,7 @@ const ee = {
         Z(m);
       },
       []
-    ), X = (q) => {
+    ), $ = (q) => {
       var tA;
       const m = (tA = q.target.files) == null ? void 0 : tA[0];
       if (!m) return;
@@ -5155,8 +5163,8 @@ const ee = {
       }
     }));
     const E = parseInt(n, 10), D = ee[l];
-    let F, K;
-    return D >= 1 ? (K = E, F = E * D) : (F = E, K = E / D), /* @__PURE__ */ g(
+    let N, K;
+    return D >= 1 ? (K = E, N = E * D) : (N = E, K = E / D), /* @__PURE__ */ g(
       a,
       {
         display: "flex",
@@ -5170,13 +5178,13 @@ const ee = {
         align: "center",
         justify: "center",
         style: {
-          width: c != null && c.fullWidth ? "100%" : `${F}px`,
+          width: c != null && c.fullWidth ? "100%" : `${N}px`,
           height: c != null && c.fullWidth ? "auto" : `${K}px`,
           aspectRatio: D,
           flexShrink: 0
         },
-        onMouseEnter: () => I(!0),
-        onMouseLeave: () => I(!1),
+        onMouseEnter: () => u(!0),
+        onMouseLeave: () => u(!1),
         children: [
           o || i ? /* @__PURE__ */ A(
             "img",
@@ -5232,7 +5240,7 @@ const ee = {
                     ref: k,
                     type: "file",
                     accept: "image/*",
-                    onChange: X,
+                    onChange: $,
                     disabled: r,
                     style: { display: "none" }
                   }
@@ -5291,7 +5299,7 @@ const ee = {
               isShow: j,
               onHide: () => S(!1),
               style: {
-                minWidth: w ? l === "1:1" ? "20rem" : F * 2 : "100%"
+                minWidth: w ? l === "1:1" ? "20rem" : N * 2 : "100%"
               },
               children: [
                 /* @__PURE__ */ A(DA, { children: /* @__PURE__ */ A(
@@ -5311,7 +5319,7 @@ const ee = {
                         zoom: G,
                         aspect: l ? ee[l] : void 0,
                         onCropChange: x,
-                        onZoomChange: u,
+                        onZoomChange: I,
                         onCropComplete: R,
                         objectFit: "contain",
                         minZoom: 0.5,
@@ -5580,7 +5588,7 @@ const ee = {
     }
   );
 }, Lr = ({ pageLayout: e, children: i }) => {
-  const r = V("lg");
+  const r = X("lg");
   return /* @__PURE__ */ g(
     a,
     {
@@ -6076,7 +6084,7 @@ function wt({ width: e, height: i }) {
   ) });
 }
 function Yr({ onClick: e }) {
-  const i = V("md");
+  const i = X("md");
   return /* @__PURE__ */ g(
     a,
     {
@@ -6327,7 +6335,7 @@ function dt({ width: e, height: i }) {
   ) });
 }
 function pr({ onClick: e }) {
-  const i = V("md");
+  const i = X("md");
   return /* @__PURE__ */ g(
     a,
     {
@@ -7018,7 +7026,7 @@ function Qt({ width: e, height: i }) {
   ) });
 }
 function jr({ onClick: e }) {
-  const i = V("md");
+  const i = X("md");
   return /* @__PURE__ */ g(
     a,
     {
@@ -7054,9 +7062,9 @@ function jr({ onClick: e }) {
     }
   );
 }
-const Nr = (e) => {
+const Fr = (e) => {
   var r, o, t, n, l;
-  const i = V("md");
+  const i = X("md");
   return /* @__PURE__ */ g(
     hA,
     {
@@ -7117,42 +7125,43 @@ const Nr = (e) => {
     },
     e.key
   );
-}, Fr = AA(
+}, Nr = AA(
   ({
     children: e,
     height: i,
     minHeight: r,
     customHeight: o,
-    paddingInline: t = "spacing-24"
+    paddingInline: t = "spacing-0",
+    paddingBlock: n = "spacing-0"
   }) => {
-    const n = eA(null), [l, c] = Y("100vh");
+    const l = eA(null), [c, s] = Y("100vh");
     return v(() => {
-      const s = () => {
-        if (n.current) {
-          const C = n.current.getBoundingClientRect().top;
-          c(`calc(100vh - ${C}px)`);
+      const C = () => {
+        if (l.current) {
+          const d = l.current.getBoundingClientRect().top;
+          s(`calc(100vh - ${d}px)`);
         }
       };
-      return s(), window.addEventListener("resize", s), () => window.removeEventListener("resize", s);
+      return C(), window.addEventListener("resize", C), () => window.removeEventListener("resize", C);
     }, []), /* @__PURE__ */ A(
       a,
       {
-        ref: n,
+        ref: l,
         height: i,
         customMinHeight: r,
         customHeight: o,
-        paddingBlock: "xl",
+        paddingBlock: n,
         paddingInline: t,
         bg: "white",
         style: {
-          minHeight: l
+          minHeight: c
         },
         children: e
       }
     );
   }
 ), zr = (e) => {
-  const { defaultTab: i = 0, paramKey: r = "tab" } = e || {}, [o, t] = kA(), n = uA(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: (s) => {
@@ -7186,7 +7195,7 @@ function Kr({
   }, [o.pathname]);
 }
 const Zr = () => {
-  const [e, i] = kA(), r = uA(e.toString()), o = ae(), t = GA(), n = o.id;
+  const [e, i] = kA(), r = IA(e.toString()), o = ae(), t = GA(), n = o.id;
   return {
     // query params
     setSearchParams: i,
@@ -7211,14 +7220,14 @@ function Hr(e) {
     var s, C;
     const n = ((C = (s = i == null ? void 0 : i.access) == null ? void 0 : s.role) == null ? void 0 : C.code) ?? "", l = Object.keys(e.role).reduce(
       (d, w) => {
-        const B = `is${w.toLowerCase().replace(/(^\w|_\w)/g, (I) => I.replace("_", "").toUpperCase())}`;
+        const B = `is${w.toLowerCase().replace(/(^\w|_\w)/g, (u) => u.replace("_", "").toUpperCase())}`;
         return { ...d, [B]: !1 };
       },
       {}
     );
     return {
       ...Object.keys(e.role).reduce((d, 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 {
           ...d,
           [B]: n === e.role[w]
@@ -7231,16 +7240,16 @@ function Hr(e) {
 }
 export {
   _t as ActionMenu,
-  ur as AdvanceFilter,
+  Ir as AdvanceFilter,
   Oi as AdvanceFilterBar,
   Ut as App,
-  Fe as AppComponent,
+  Ne as AppComponent,
   Ce as AppContext,
   Wt as AppLayout,
   Lr as AsideBar,
   vt as AuthLayout,
-  Fi as ColumnFilterDropdown,
-  Nr as ConfirmationDialog,
+  Ni as ColumnFilterDropdown,
+  Fr as ConfirmationDialog,
   Ki as DataTable,
   p as DecisionWrapper,
   EA as EachUtils,
@@ -7249,7 +7258,7 @@ export {
   br as FloatingFooter,
   pr as ForbiddenPage,
   Sr as Form,
-  Fr as FullSection,
+  Nr as FullSection,
   Pt as HorizontalField,
   $i as InputFile,
   ct as InputImage,
@@ -7265,7 +7274,7 @@ export {
   jr as ServerErrorPage,
   ze as SidebarHeaderSlot,
   xr as SwitchApps,
-  Ni as TableFooter,
+  Fi as TableFooter,
   pi as TableHeader,
   yr as TableSection,
   Yi as TableWrapper,
@@ -7281,7 +7290,7 @@ export {
   Mr as getDateFilterValue,
   Er as getDateRangeFilterValue,
   tr as getInitials,
-  Ir as getValueDropdownMultipleFilter,
+  ur as getValueDropdownMultipleFilter,
   kr as getValueRadioFilter,
   bi as getValueSearch,
   jA as getValuesFilter,
@@ -7305,7 +7314,7 @@ export {
   lr as textWidth,
   Dr as useAdvanceFilter,
   Be as useApp,
-  Ne as useAppState,
+  Fe as useAppState,
   Hr as useAuthRole,
   Kr as useDynamicTitle,
   we as useModuleSelection,