@argusoft/medplat-core 1.0.18 → 1.0.19

package/dist/{AddMenuConfiguration-QWfpcnuP.js → AddMenuConfiguration-DsnY0Rws.js}

@@ -1,29 +1,29 @@
 import { jsxs as p, jsx as e, Fragment as Ze } from "react/jsx-runtime";
-import { execute as ve } from "@/common/services/QueryBuilder";
+import { execute as Ie } from "@/common/services/QueryBuilder";
 import { showToast as ie } from "@/common/toaster/toaster";
-import { useDroppable as nt, DndContext as Nt, useDraggable as Mt, DragOverlay as an, rectIntersection as At, closestCenter as sn } from "@dnd-kit/core";
-import { SortableContext as De, verticalListSortingStrategy as Ue, arrayMove as Pe, useSortable as rt } from "@dnd-kit/sortable";
-import { Box as U, Typography as S, FormControl as Ve, InputLabel as ln, Select as cn, MenuItem as Tt, Tooltip as dn, Paper as xe, IconButton as un, Divider as ot, Button as Ge, Switch as Ot, TextField as Qe, InputAdornment as pn, Accordion as Ye, AccordionSummary as Je, AccordionDetails as Xe, Grid2 as fn, Autocomplete as mn } from "@mui/material";
-import v from "@mui/material/Grid2";
+import { useDroppable as rt, DndContext as Nt, useDraggable as Mt, DragOverlay as ir, rectIntersection as At, closestCenter as ar } from "@dnd-kit/core";
+import { SortableContext as De, verticalListSortingStrategy as Ue, arrayMove as Pe, useSortable as nt } from "@dnd-kit/sortable";
+import { Box as U, Typography as v, FormControl as Ve, InputLabel as sr, Select as lr, MenuItem as Tt, Tooltip as cr, Paper as xe, IconButton as dr, Divider as ot, Button as Ge, Switch as Ot, TextField as Qe, InputAdornment as ur, Accordion as Ye, AccordionSummary as Je, AccordionDetails as Xe, Grid2 as pr, Autocomplete as mr } from "@mui/material";
+import I from "@mui/material/Grid2";
 import { Grid as ye, Box as N } from "@mui/system";
-import K, { createContext as hn, useState as k, useCallback as Re, useMemo as Fe, useEffect as Ke } from "react";
-import { useForm as gn } from "react-hook-form";
-import { useSelector as xn } from "react-redux";
-import { useLocation as yn, useNavigate as bn } from "react-router";
-import Sn from "@/views/custom-components/CustomDropdown";
-import m from "prop-types";
-import { FontAwesomeIcon as W } from "@fortawesome/react-fontawesome";
-import { faWifi as Cn, faSignal as In, faBatteryFull as vn, faLocationDot as Rn, faRotate as wn, faBell as En, faCircleUser as An, faChevronDown as _t, faMagnifyingGlass as kt, faTimes as Tn, faTrashCan as On } from "@fortawesome/free-solid-svg-icons";
-import Nn from "@/assets/img/home.svg";
-import Mn from "@/assets/img/programs.svg";
-import _n from "@/assets/img/analytics.svg";
-import kn from "@/assets/img/family-management.svg";
-import { CSS as Fn } from "@dnd-kit/utilities";
+import K, { createContext as hr, useState as _, useCallback as Re, useMemo as Fe, useEffect as Ke } from "react";
+import { useForm as gr } from "react-hook-form";
+import { useSelector as fr } from "react-redux";
+import { useLocation as xr, useNavigate as yr } from "react-router";
+import br from "@/views/custom-components/CustomDropdown";
+import h from "prop-types";
+import { FontAwesomeIcon as z } from "@fortawesome/react-fontawesome";
+import { faWifi as vr, faSignal as Sr, faBatteryFull as Cr, faLocationDot as Ir, faRotate as Rr, faBell as wr, faCircleUser as Er, faChevronDown as kt, faMagnifyingGlass as _t, faTimes as Ar, faTrashCan as Tr } from "@fortawesome/free-solid-svg-icons";
+import Or from "@/assets/img/home.svg";
+import Nr from "@/assets/img/programs.svg";
+import Mr from "@/assets/img/analytics.svg";
+import kr from "@/assets/img/family-management.svg";
+import { CSS as _r } from "@dnd-kit/utilities";
 import X from "@/common/fontAwesomeIcons/FontAwesomeIcons";
-import { generateUUID as ge } from "@/utils/UUIDgenerator";
-import Pn from "@/views/custom-components/CustomConfirmationModal";
-import './AddMenuConfiguration.css';const Gn = hn(), Dn = ({ id: o, children: c, componentType: d }) => {
-  const { attributes: b, listeners: E, setNodeRef: u, isDragging: y } = rt({
+import { generateUUID as fe } from "@/utils/UUIDgenerator";
+import Fr from "@/views/custom-components/CustomConfirmationModal";
+import './AddMenuConfiguration.css';const Pr = hr(), Gr = ({ id: o, children: c, componentType: d }) => {
+  const { attributes: b, listeners: E, setNodeRef: u, isDragging: y } = nt({
     id: o,
     data: { sortable: !0, type: d }
   }), R = {
@@ -34,7 +34,7 @@ import './AddMenuConfiguration.css';const Gn = hn(), Dn = ({ id: o, children: c,
     style: { ...c.props.style, ...R },
     dnd: { listeners: E, attributes: b }
   });
-}, Un = ({ id: o, children: c, componentType: d }) => {
+}, Dr = ({ id: o, children: c, componentType: d }) => {
   const { attributes: b, listeners: E, setNodeRef: u, isDragging: y } = Mt({
     id: o,
     data: {
@@ -51,7 +51,7 @@ import './AddMenuConfiguration.css';const Gn = hn(), Dn = ({ id: o, children: c,
     ...b
   });
 }, Ft = ({ id: o, children: c, sectionId: d, featureName: b }) => {
-  const { attributes: E, listeners: u, setNodeRef: y, isDragging: R } = rt({
+  const { attributes: E, listeners: u, setNodeRef: y, isDragging: R } = nt({
     id: o,
     data: {
       sortable: !0,
@@ -83,7 +83,7 @@ import './AddMenuConfiguration.css';const Gn = hn(), Dn = ({ id: o, children: c,
       p: 1.5,
       border: "1px solid #ccc",
       borderRadius: "8px",
-      backgroundColor: "#fff",
+      backgroundColor: "var(--color-background2)",
       display: "flex",
       alignItems: "center",
       mt: 1,
@@ -92,16 +92,16 @@ import './AddMenuConfiguration.css';const Gn = hn(), Dn = ({ id: o, children: c,
     },
     ...b,
     children: [
-      /* @__PURE__ */ e(W, { icon: kt, style: { marginRight: "8px", color: "#888" } }),
-      /* @__PURE__ */ e(S, { variant: "body2", color: "textSecondary", sx: { flexGrow: 1 }, children: "Search..." })
+      /* @__PURE__ */ e(z, { icon: _t, style: { marginRight: "8px", color: "#888" } }),
+      /* @__PURE__ */ e(v, { variant: "body2", color: "textSecondary", sx: { flexGrow: 1 }, children: "Search..." })
     ]
   }
 ));
 it.displayName = "MobileSearchBar";
 it.propTypes = {
-  id: m.any,
-  style: m.any,
-  handleSectionClick: m.any
+  id: h.any,
+  style: h.any,
+  handleSectionClick: h.any
 };
 const at = K.forwardRef(
   ({
@@ -120,9 +120,9 @@ const at = K.forwardRef(
       A.preventDefault(), b(o);
     }, M = (A) => {
       A.stopPropagation();
-    }, ne = (A, j) => {
+    }, re = (A, j) => {
       A.preventDefault(), A.stopPropagation(), R && R(A, j);
-    }, { setNodeRef: ae, isOver: ue } = nt({
+    }, { setNodeRef: ae, isOver: ue } = rt({
       id: `section-drop-zone-${o}`,
       data: {
         type: "SECTION_DROP_ZONE",
@@ -143,7 +143,7 @@ const at = K.forwardRef(
           alignItems: "flex-start",
           justifyContent: "flex-start",
           p: 1,
-          border: ue ? "1px dashed #073149" : "0.1px solid #A9BCCD",
+          border: ue ? "1px dashed var(--color-tableHeader)" : "0.1px solid #A9BCCD",
           cursor: "pointer",
           backgroundColor: "#e6f0ff",
           borderRadius: "14px",
@@ -161,7 +161,7 @@ const at = K.forwardRef(
                 width: "100%",
                 mb: 0.5
               },
-              children: /* @__PURE__ */ e(S, { variant: "body2", sx: { fontWeight: "bold", color: "#073149", flexGrow: 1 }, children: d || `Section ${c + 1}` })
+              children: /* @__PURE__ */ e(v, { variant: "body2", sx: { fontWeight: "bold", color: "var(--color-text)", flexGrow: 1 }, children: d || `Section ${c + 1}` })
             }
           ),
           /* @__PURE__ */ e(
@@ -171,7 +171,7 @@ const at = K.forwardRef(
               sx: {
                 width: "100%",
                 minHeight: "40px",
-                border: `${ue ? "1px dashed #073149" : ""}`,
+                border: `${ue ? "1px dashed var(--color-tableHeader)" : ""}`,
                 borderRadius: "4px",
                 textAlign: "center",
                 display: "flex",
@@ -205,7 +205,7 @@ const at = K.forwardRef(
                           U,
                           {
                             onClick: (P) => A.type === "FEATURE" && M(P),
-                            onContextMenu: (P) => A.type === "GROUP" && ne(P, A),
+                            onContextMenu: (P) => A.type === "GROUP" && re(P, A),
                             sx: {
                               display: "flex",
                               flexDirection: "column",
@@ -218,7 +218,7 @@ const at = K.forwardRef(
                               minWidth: 0,
                               overflow: "hidden",
                               "&:hover": {
-                                backgroundColor: "#f5f5f5"
+                                backgroundColor: "var(--color-gray4)"
                               }
                             },
                             children: [
@@ -227,7 +227,7 @@ const at = K.forwardRef(
                                 y
                               ),
                               /* @__PURE__ */ e(
-                                S,
+                                v,
                                 {
                                   variant: "body2",
                                   sx: {
@@ -236,7 +236,7 @@ const at = K.forwardRef(
                                     lineHeight: 1.2,
                                     width: "100%",
                                     fontSize: "0.7rem",
-                                    color: "#073149",
+                                    color: "var(--color-text)",
                                     fontWeight: "bold",
                                     letterSpacing: 0.2,
                                     whiteSpace: "normal",
@@ -247,12 +247,12 @@ const at = K.forwardRef(
                                 }
                               ),
                               j && /* @__PURE__ */ e(U, { sx: { ml: 0.5, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ e(
-                                W,
+                                z,
                                 {
-                                  icon: _t,
+                                  icon: kt,
                                   sx: {
                                     fontSize: "0.7rem",
-                                    color: "#073149",
+                                    color: "var(--color-text)",
                                     transition: "transform 0.2s",
                                     transform: be ? "rotate(180deg)" : "rotate(0deg)"
                                   }
@@ -266,7 +266,7 @@ const at = K.forwardRef(
                   },
                   A.instanceId
                 );
-              }) }) }) : /* @__PURE__ */ e(S, { variant: "caption", color: "textSecondary", children: ue ? "Drop Feature Here" : "Drag features here later." })
+              }) }) }) : /* @__PURE__ */ e(v, { variant: "caption", color: "textSecondary", children: ue ? "Drop Feature Here" : "Drag features here later." })
             }
           )
         ]
@@ -276,21 +276,21 @@ const at = K.forwardRef(
 );
 at.displayName = "MobileSection";
 at.propTypes = {
-  id: m.any,
-  arrayIndex: m.any,
-  sectionTitle: m.any,
-  handleSectionClick: m.any,
-  dnd: m.any,
-  sectionFeatures: m.any,
-  SvgIconBox: m.any,
-  onGroupClick: m.any,
-  activeGroupId: m.any
+  id: h.any,
+  arrayIndex: h.any,
+  sectionTitle: h.any,
+  handleSectionClick: h.any,
+  dnd: h.any,
+  sectionFeatures: h.any,
+  SvgIconBox: h.any,
+  onGroupClick: h.any,
+  activeGroupId: h.any
 };
 const Pt = ({ feature: o, SvgIconBox: c, handleFeatureClick: d }) => {
-  const { attributes: b, listeners: E, setNodeRef: u, transform: y, transition: R, isDragging: F } = rt({
+  const { attributes: b, listeners: E, setNodeRef: u, transform: y, transition: R, isDragging: F } = nt({
     id: o.uuid || o.id
   }), Q = {
-    transform: Fn.Transform.toString(y),
+    transform: _r.Transform.toString(y),
     transition: R,
     zIndex: F ? 2e3 : 1,
     opacity: F ? 0.8 : 1,
@@ -332,15 +332,15 @@ const Pt = ({ feature: o, SvgIconBox: c, handleFeatureClick: d }) => {
             overflow: "hidden",
             borderRadius: "8px",
             "&:hover": {
-              backgroundColor: "#f5f5f5"
+              backgroundColor: "var(--color-gray4)"
             }
           },
           children: [
             /* @__PURE__ */ e(U, { sx: { mt: 0.5, mb: 0.5, display: "flex", alignItems: "center" }, children: ((T, te) => {
               let M = null;
               if (typeof T == "object" && T !== null ? T.type === "svg" && typeof T.content == "string" ? M = T.content : typeof T.svg == "string" && (M = T.svg) : typeof T == "string" ? M = T : typeof o.icon == "object" && o.icon !== null && (M = o.icon.content || o.icon.svg), typeof M == "string" && M.includes("<svg")) {
-                const ne = M.match(/<svg[\s\S]*<\/svg>/i);
-                ne && (M = ne[0]);
+                const re = M.match(/<svg[\s\S]*<\/svg>/i);
+                re && (M = re[0]);
               }
               return M ? /* @__PURE__ */ e(U, { sx: { height: "24px", width: "24px", display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ e(te, { svg: M }) }) : /* @__PURE__ */ e(
                 U,
@@ -351,7 +351,7 @@ const Pt = ({ feature: o, SvgIconBox: c, handleFeatureClick: d }) => {
                     display: "flex",
                     justifyContent: "center",
                     alignItems: "center",
-                    color: "#b0bec5",
+                    color: "var(--color-gray3)",
                     border: "1px solid",
                     borderRadius: "4px",
                     fontSize: "0.8rem"
@@ -361,7 +361,7 @@ const Pt = ({ feature: o, SvgIconBox: c, handleFeatureClick: d }) => {
               );
             })(o.icon, c) }),
             /* @__PURE__ */ e(
-              S,
+              v,
               {
                 variant: "body2",
                 sx: {
@@ -370,7 +370,7 @@ const Pt = ({ feature: o, SvgIconBox: c, handleFeatureClick: d }) => {
                   lineHeight: 1.2,
                   width: "100%",
                   fontSize: "0.7rem",
-                  color: "#073149",
+                  color: "var(--color-text)",
                   fontWeight: "bold",
                   letterSpacing: 0.2,
                   whiteSpace: "normal",
@@ -388,9 +388,9 @@ const Pt = ({ feature: o, SvgIconBox: c, handleFeatureClick: d }) => {
   );
 };
 Pt.propTypes = {
-  feature: m.any,
-  SvgIconBox: m.any,
-  handleFeatureClick: m.any
+  feature: h.any,
+  SvgIconBox: h.any,
+  handleFeatureClick: h.any
 };
 function Gt({
   tabStatus: o,
@@ -407,41 +407,41 @@ function Gt({
   setCurrentLayoutComponents: de,
   programFeatures: T
 }) {
-  const te = "mobile-content", M = u === "programs" ? "PROGRAMS_ROOT_DROP_ZONE" : "LAYOUT_ROOT_DROP_ZONE", { setNodeRef: ne, isOver: ae } = nt({
+  const te = "mobile-content", M = u === "programs" ? "PROGRAMS_ROOT_DROP_ZONE" : "LAYOUT_ROOT_DROP_ZONE", { setNodeRef: re, isOver: ae } = rt({
     id: te,
     data: {
       type: M,
       sectionId: te
     }
   }), A = [
-    { id: "home", label: "Home", icon: Nn, alt: "Home" },
-    { id: "programs", label: "Programs", icon: Mn, alt: "Programs" },
-    { id: "analytics", label: "Analytics", icon: _n, alt: "Analytics" },
-    { id: "familyManagement", label: "Family Management", icon: kn, alt: "Family Management" }
-  ].filter((f) => o[f.id]), j = c.find((f) => f.type === d.SEARCH_BAR), be = c.filter((f) => f.type === d.SECTION), [P, se] = k({
+    { id: "home", label: "Home", icon: Or, alt: "Home" },
+    { id: "programs", label: "Programs", icon: Nr, alt: "Programs" },
+    { id: "analytics", label: "Analytics", icon: Mr, alt: "Analytics" },
+    { id: "familyManagement", label: "Family Management", icon: kr, alt: "Family Management" }
+  ].filter((m) => o[m.id]), j = c.find((m) => m.type === d.SEARCH_BAR), be = c.filter((m) => m.type === d.SECTION), [P, se] = _({
     anchorEl: null,
     groupData: null
   }), $ = Re(
-    (f, G) => {
-      var H;
-      const q = f.currentTarget;
-      ((H = P.groupData) == null ? void 0 : H.instanceId) === G.instanceId ? Se() : se({
+    (m, G) => {
+      var W;
+      const q = m.currentTarget;
+      ((W = P.groupData) == null ? void 0 : W.instanceId) === G.instanceId ? ve() : se({
         anchorEl: q,
         groupData: G
       });
     },
     [P.groupData]
-  ), Se = Re(() => {
+  ), ve = Re(() => {
     se({ anchorEl: null, groupData: null });
-  }, []), Be = (f) => {
-    var H;
-    const G = f.type === "GROUP", q = G && ((H = P.groupData) == null ? void 0 : H.instanceId) === f.instanceId;
+  }, []), Be = (m) => {
+    var W;
+    const G = m.type === "GROUP", q = G && ((W = P.groupData) == null ? void 0 : W.instanceId) === m.instanceId;
     return /* @__PURE__ */ e(
       Ft,
       {
-        id: f.instanceId,
+        id: m.instanceId,
         sectionId: null,
-        featureName: f.name,
+        featureName: m.name,
         children: /* @__PURE__ */ e(
           ye,
           {
@@ -458,8 +458,8 @@ function Gt({
             children: /* @__PURE__ */ p(
               U,
               {
-                onClick: (L) => f.type === "FEATURE" && L.stopPropagation(),
-                onContextMenu: (L) => f.type === "GROUP" && $(L, f),
+                onClick: (L) => m.type === "FEATURE" && L.stopPropagation(),
+                onContextMenu: (L) => m.type === "GROUP" && $(L, m),
                 sx: {
                   display: "flex",
                   flexDirection: "column",
@@ -472,13 +472,13 @@ function Gt({
                   minWidth: 0,
                   overflow: "hidden",
                   "&:hover": {
-                    backgroundColor: "#f5f5f5"
+                    backgroundColor: "var(--color-gray4)"
                   }
                 },
                 children: [
-                  Ut(Object.prototype.hasOwnProperty.call(f, "icon") ? f.icon : null, ee),
+                  Ut(Object.prototype.hasOwnProperty.call(m, "icon") ? m.icon : null, ee),
                   /* @__PURE__ */ e(
-                    S,
+                    v,
                     {
                       variant: "body2",
                       sx: {
@@ -487,23 +487,23 @@ function Gt({
                         lineHeight: 1.2,
                         width: "100%",
                         fontSize: "0.7rem",
-                        color: "#073149",
+                        color: "var(--color-text)",
                         fontWeight: "bold",
                         letterSpacing: 0.2,
                         whiteSpace: "normal",
                         wordBreak: "break-word",
                         overflowWrap: "break-word"
                       },
-                      children: Dt(f.name)
+                      children: Dt(m.name)
                     }
                   ),
                   G && /* @__PURE__ */ e(U, { sx: { ml: 0.5, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ e(
-                    W,
+                    z,
                     {
-                      icon: _t,
+                      icon: kt,
                       sx: {
                         fontSize: "0.7rem",
-                        color: "#073149",
+                        color: "var(--color-text)",
                         transition: "transform 0.2s",
                         transform: q ? "rotate(180deg)" : "rotate(0deg)"
                       }
@@ -515,69 +515,69 @@ function Gt({
           }
         )
       },
-      f.instanceId
+      m.instanceId
     );
-  }, ze = (f) => {
-    const { active: G, over: q } = f;
+  }, He = (m) => {
+    const { active: G, over: q } = m;
     if (!q || G.id === q.id || !P.groupData)
       return;
-    const H = P.groupData.instanceId;
+    const W = P.groupData.instanceId;
     let L = null;
-    de((Ce) => Ce.map((pe) => pe.features ? {
+    de((Se) => Se.map((pe) => pe.features ? {
       ...pe,
       features: pe.features.map((B) => {
-        if (B.instanceId === H && B.type === "GROUP" && B.menus) {
-          const fe = B.menus.findIndex((Y) => (Y.uuid || Y.instanceId) === G.id), Ie = B.menus.findIndex((Y) => (Y.uuid || Y.instanceId) === q.id);
-          if (fe !== -1 && Ie !== -1) {
-            const Y = Pe(B.menus, fe, Ie);
+        if (B.instanceId === W && B.type === "GROUP" && B.menus) {
+          const me = B.menus.findIndex((Y) => (Y.uuid || Y.instanceId) === G.id), Ce = B.menus.findIndex((Y) => (Y.uuid || Y.instanceId) === q.id);
+          if (me !== -1 && Ce !== -1) {
+            const Y = Pe(B.menus, me, Ce);
             return L = { ...B, menus: Y }, L;
           }
         }
         return B;
       })
-    } : pe)), L && se((Ce) => ({
-      ...Ce,
+    } : pe)), L && se((Se) => ({
+      ...Se,
       groupData: L
     }));
   }, Ae = () => {
-    Se();
-  }, Te = (f, G) => {
-    var H;
-    const q = f.id === E;
-    return /* @__PURE__ */ e(Dn, { id: f.id, componentType: d.SECTION, isSortable: !0, children: /* @__PURE__ */ e(
+    ve();
+  }, Te = (m, G) => {
+    var W;
+    const q = m.id === E;
+    return /* @__PURE__ */ e(Gr, { id: m.id, componentType: d.SECTION, isSortable: !0, children: /* @__PURE__ */ e(
       at,
       {
-        id: f.id,
+        id: m.id,
         arrayIndex: G,
-        sectionTitle: f.title,
+        sectionTitle: m.title,
         handleSectionClick: b,
-        sectionFeatures: f.features,
+        sectionFeatures: m.features,
         isActive: q,
         SvgIconBox: ee,
         onGroupClick: $,
-        activeGroupId: (H = P.groupData) == null ? void 0 : H.instanceId
+        activeGroupId: (W = P.groupData) == null ? void 0 : W.instanceId
       }
-    ) }, f.id);
+    ) }, m.id);
   };
   return /* @__PURE__ */ p("div", { className: "mobile-screen-v2", id: "mobile-screen", children: [
     /* @__PURE__ */ p("div", { className: "status-bar-v2", children: [
       /* @__PURE__ */ e("span", { className: "time-v2", children: "12:16" }),
       /* @__PURE__ */ e("div", { className: "notch-v2" }),
       /* @__PURE__ */ p("div", { className: "right-status-icons-v2", children: [
-        /* @__PURE__ */ e("span", { "aria-label": "wifi", children: /* @__PURE__ */ e(W, { icon: Cn }) }),
-        /* @__PURE__ */ e("span", { "aria-label": "signal", children: /* @__PURE__ */ e(W, { icon: In }) }),
-        /* @__PURE__ */ e("span", { "aria-label": "battery", className: "battery-icon", children: /* @__PURE__ */ e(W, { icon: vn }) })
+        /* @__PURE__ */ e("span", { "aria-label": "wifi", children: /* @__PURE__ */ e(z, { icon: vr }) }),
+        /* @__PURE__ */ e("span", { "aria-label": "signal", children: /* @__PURE__ */ e(z, { icon: Sr }) }),
+        /* @__PURE__ */ e("span", { "aria-label": "battery", className: "battery-icon", children: /* @__PURE__ */ e(z, { icon: Cr }) })
       ] })
     ] }),
     /* @__PURE__ */ p("div", { className: "header-v2", children: [
       /* @__PURE__ */ p("div", { className: "location-v2", children: [
-        /* @__PURE__ */ e(W, { icon: Rn }),
+        /* @__PURE__ */ e(z, { icon: Ir }),
         /* @__PURE__ */ e("span", { className: "location-text-v2", children: "પાલડી-કાંકજ" })
       ] }),
       /* @__PURE__ */ p("div", { className: "header-actions-v2", children: [
-        /* @__PURE__ */ e("span", { className: "action-icon-v2 rotate-icon", role: "button", "aria-label": "refresh", children: /* @__PURE__ */ e(W, { icon: wn }) }),
-        /* @__PURE__ */ e("span", { className: "action-icon-v2 notification-outline", role: "button", "aria-label": "notifications", children: /* @__PURE__ */ e(W, { icon: En }) }),
-        /* @__PURE__ */ e("span", { className: "action-icon-v2 profile-icon", role: "button", "aria-label": "profile", children: /* @__PURE__ */ e(W, { icon: An }) })
+        /* @__PURE__ */ e("span", { className: "action-icon-v2 rotate-icon", role: "button", "aria-label": "refresh", children: /* @__PURE__ */ e(z, { icon: Rr }) }),
+        /* @__PURE__ */ e("span", { className: "action-icon-v2 notification-outline", role: "button", "aria-label": "notifications", children: /* @__PURE__ */ e(z, { icon: wr }) }),
+        /* @__PURE__ */ e("span", { className: "action-icon-v2 profile-icon", role: "button", "aria-label": "profile", children: /* @__PURE__ */ e(z, { icon: Er }) })
       ] })
     ] }),
     /* @__PURE__ */ e(
@@ -585,10 +585,10 @@ function Gt({
       {
         className: "content-v2",
         id: "mobile-content",
-        ref: u !== "familyManagement" ? ne : null,
+        ref: u !== "familyManagement" ? re : null,
         style: {
-          border: u !== "familyManagement" && ae ? "2px dashed #073149" : "none",
-          backgroundColor: u !== "familyManagement" && ae ? "#f0f4f8" : "transparent",
+          border: u !== "familyManagement" && ae ? "2px dashed var(--color-tableHeader)" : "none",
+          backgroundColor: u !== "familyManagement" && ae ? "var(--color-gray4)" : "transparent",
           minHeight: "300px",
           maxHeight: "calc(100% - 110px)",
           overflowY: "auto",
@@ -609,11 +609,11 @@ function Gt({
               height: "100%"
             },
             children: [
-              /* @__PURE__ */ e(S, { variant: "body1", sx: { mb: 2, fontWeight: "bold" }, children: "Select Form for Family Management" }),
+              /* @__PURE__ */ e(v, { variant: "body1", sx: { mb: 2, fontWeight: "bold" }, children: "Select Form for Family Management" }),
               /* @__PURE__ */ p(Ve, { fullWidth: !0, sx: { maxWidth: "90%", mb: 2 }, children: [
-                /* @__PURE__ */ e(ln, { id: "form-selector-label", children: "Form Name" }),
+                /* @__PURE__ */ e(sr, { id: "form-selector-label", children: "Form Name" }),
                 /* @__PURE__ */ p(
-                  cn,
+                  lr,
                   {
                     labelId: "form-selector-label",
                     id: "form-selector",
@@ -628,7 +628,7 @@ function Gt({
                       }
                     },
                     children: [
-                      R == null ? void 0 : R.map((f) => /* @__PURE__ */ e(Tt, { value: f.code, children: f.name }, f.code)),
+                      R == null ? void 0 : R.map((m) => /* @__PURE__ */ e(Tt, { value: m.code, children: m.name }, m.code)),
                       (R == null ? void 0 : R.length) === 0 && /* @__PURE__ */ e(Tt, { disabled: !0, children: "No Forms Available" })
                     ]
                   }
@@ -636,8 +636,8 @@ function Gt({
               ] })
             ]
           }
-        ) : u === "programs" ? /* @__PURE__ */ e(Ze, { children: T && T.length > 0 ? /* @__PURE__ */ e(De, { items: T.map((f) => f.instanceId), strategy: Ue, children: /* @__PURE__ */ e(ye, { container: !0, spacing: 1, sx: { width: "100%", m: 0 }, children: T.map((f) => Be(f)) }) }) : /* @__PURE__ */ e(S, { variant: "body2", color: "textSecondary", sx: { mt: 5, textAlign: "center" }, children: ae ? "Drop features here (Groups are not allowed)." : "Drag features directly onto the screen." }) }) : /* @__PURE__ */ p(Ze, { children: [
-          j && /* @__PURE__ */ e(Un, { id: j.id, componentType: d.SEARCH_BAR, children: /* @__PURE__ */ e(
+        ) : u === "programs" ? /* @__PURE__ */ e(Ze, { children: T && T.length > 0 ? /* @__PURE__ */ e(De, { items: T.map((m) => m.instanceId), strategy: Ue, children: /* @__PURE__ */ e(ye, { container: !0, spacing: 1, sx: { width: "100%", m: 0 }, children: T.map((m) => Be(m)) }) }) : /* @__PURE__ */ e(v, { variant: "body2", color: "textSecondary", sx: { mt: 5, textAlign: "center" }, children: ae ? "Drop features here (Groups are not allowed)." : "Drag features directly onto the screen." }) }) : /* @__PURE__ */ p(Ze, { children: [
+          j && /* @__PURE__ */ e(Dr, { id: j.id, componentType: d.SEARCH_BAR, children: /* @__PURE__ */ e(
             it,
             {
               id: j.id,
@@ -645,51 +645,51 @@ function Gt({
               handleSectionClick: b
             }
           ) }),
-          be.map((f, G) => Te(f, G)),
-          c.length === 0 && /* @__PURE__ */ e(S, { variant: "body2", color: "textSecondary", sx: { mt: 5, textAlign: "center" }, children: "Drag components here to build the layout." })
+          be.map((m, G) => Te(m, G)),
+          c.length === 0 && /* @__PURE__ */ e(v, { variant: "body2", color: "textSecondary", sx: { mt: 5, textAlign: "center" }, children: "Drag components here to build the layout." })
         ] })
       }
     ),
-    P.groupData && P.anchorEl && /* @__PURE__ */ e("div", { onPointerDown: (f) => f.stopPropagation(), children: /* @__PURE__ */ e(Nt, { onDragEnd: ze, children: /* @__PURE__ */ e(
+    P.groupData && P.anchorEl && /* @__PURE__ */ e("div", { onPointerDown: (m) => m.stopPropagation(), children: /* @__PURE__ */ e(Nt, { onDragEnd: He, children: /* @__PURE__ */ e(
       Bt,
       {
         groupData: P.groupData,
         anchorEl: P.anchorEl,
-        onClose: Se,
+        onClose: ve,
         SvgIconBox: ee,
         handleFeatureClick: Ae
       }
     ) }) }),
     /* @__PURE__ */ p("div", { className: "bottom-nav-v2", children: [
-      /* @__PURE__ */ e("div", { className: "nav-bar-v2", children: A.map((f) => /* @__PURE__ */ e(dn, { title: f.label, placement: "bottom", arrow: !0, children: /* @__PURE__ */ e(
+      /* @__PURE__ */ e("div", { className: "nav-bar-v2", children: A.map((m) => /* @__PURE__ */ e(cr, { title: m.label, placement: "bottom", arrow: !0, children: /* @__PURE__ */ e(
         "div",
         {
-          className: `nav-item-v2 ${u === f.id ? "active-v2" : ""}`,
+          className: `nav-item-v2 ${u === m.id ? "active-v2" : ""}`,
           role: "button",
-          "aria-label": f.label,
-          onClick: () => y(f.id),
-          children: /* @__PURE__ */ e("img", { src: f.icon, alt: f.alt })
+          "aria-label": m.label,
+          onClick: () => y(m.id),
+          children: /* @__PURE__ */ e("img", { src: m.icon, alt: m.alt })
         },
-        f.id
-      ) }, f.id)) }),
+        m.id
+      ) }, m.id)) }),
       /* @__PURE__ */ e("div", { className: "home-indicator-v2" })
     ] })
   ] });
 }
 Gt.propTypes = {
-  tabStatus: m.any.isRequired,
-  layoutComponents: m.any,
-  componentTypes: m.any,
-  handleSectionClick: m.any,
-  activeElementId: m.any,
-  activeTabId: m.any,
-  handleTabSwitch: m.any,
-  formList: m.any,
-  selectedForm: m.any,
-  onFormSelect: m.any,
-  SvgIconBox: m.any,
-  setCurrentLayoutComponents: m.any,
-  programFeatures: m.any
+  tabStatus: h.any.isRequired,
+  layoutComponents: h.any,
+  componentTypes: h.any,
+  handleSectionClick: h.any,
+  activeElementId: h.any,
+  activeTabId: h.any,
+  handleTabSwitch: h.any,
+  formList: h.any,
+  selectedForm: h.any,
+  onFormSelect: h.any,
+  SvgIconBox: h.any,
+  setCurrentLayoutComponents: h.any,
+  programFeatures: h.any
 };
 const Dt = (o) => {
   const c = o.split(" ");
@@ -720,7 +720,7 @@ const Dt = (o) => {
     {
       sx: {
         fontSize: "1.2rem",
-        color: "#b0bec5",
+        color: "var(--color-gray3)",
         border: "1px solid",
         borderRadius: "50%",
         height: "36px",
@@ -749,7 +749,7 @@ const Dt = (o) => {
         p: 2,
         borderRadius: "12px",
         boxShadow: "0 8px 30px rgba(0,0,0,0.25)",
-        backgroundColor: "#f9f9f9",
+        backgroundColor: "var(--color-gray4)",
         zIndex: 1500,
         maxHeight: "400px",
         overflowY: "auto",
@@ -757,8 +757,8 @@ const Dt = (o) => {
       },
       children: [
         /* @__PURE__ */ p(U, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1 }, children: [
-          /* @__PURE__ */ e(S, { variant: "h6", sx: { color: "#073149", fontWeight: "bold", fontSize: "1rem" }, children: o.name }),
-          /* @__PURE__ */ e(un, { onClick: d, size: "small", sx: { color: "#073149", p: 0.5 }, children: /* @__PURE__ */ e(W, { icon: Tn }) })
+          /* @__PURE__ */ e(v, { variant: "h6", sx: { color: "var(--color-text)", fontWeight: "bold", fontSize: "1rem" }, children: o.name }),
+          /* @__PURE__ */ e(dr, { onClick: d, size: "small", sx: { color: "var(--color-text)", p: 0.5 }, children: /* @__PURE__ */ e(z, { icon: Ar }) })
         ] }),
         /* @__PURE__ */ e(ot, {}),
         u.length > 0 ? /* @__PURE__ */ e(De, { items: u.map((R) => R.uuid || R.instanceId), strategy: Ue, children: /* @__PURE__ */ e(ye, { container: !0, spacing: 1, children: u.map((R) => /* @__PURE__ */ e(
@@ -769,21 +769,21 @@ const Dt = (o) => {
             handleFeatureClick: E
           },
           R.uuid || R.instanceId
-        )) }) }) : /* @__PURE__ */ e(S, { variant: "body2", color: "textSecondary", sx: { fontStyle: "italic", p: 1 }, children: "This menu is empty." })
+        )) }) }) : /* @__PURE__ */ e(v, { variant: "body2", color: "textSecondary", sx: { fontStyle: "italic", p: 1 }, children: "This menu is empty." })
       ]
     }
   );
 };
 Bt.propTypes = {
-  groupData: m.any,
-  anchorEl: m.any,
-  onClose: m.any,
-  SvgIconBox: m.any,
-  handleFeatureClick: m.any
+  groupData: h.any,
+  anchorEl: h.any,
+  onClose: h.any,
+  SvgIconBox: h.any,
+  handleFeatureClick: h.any
 };
-function cr() {
-  var ht, gt;
-  const o = yn(), c = o.state, d = Fe(() => new URLSearchParams(o.search), [o.search]), b = bn(), [E, u] = k([]), [y, R] = k(!1), [F, Q] = k([]), [ee, de] = k([]), [T, te] = k({}), [M, ne] = k([]), [ae, ue] = k(!0), [A, j] = k(!0), [be, P] = k(!1), { user: se } = xn((t) => t.Authenticate), $ = gn({
+function cn() {
+  var gt, ft;
+  const o = xr(), c = o.state, d = Fe(() => new URLSearchParams(o.search), [o.search]), b = yr(), [E, u] = _([]), [y, R] = _(!1), [F, Q] = _([]), [ee, de] = _([]), [T, te] = _({}), [M, re] = _([]), [ae, ue] = _(!0), [A, j] = _(!0), [be, P] = _(!1), { user: se } = fr((t) => t.Authenticate), $ = gr({
     defaultValues: {
       role: "",
       isAttendanceRequired: !1
@@ -791,18 +791,18 @@ function cr() {
     mode: "onChange"
   });
   Ke(() => {
-    (async () => (await ze(), await Se(), await Be(), d.get("id") && (c != null && c.mobileMenuList) ? (R(!0), $.setValue("role", c.roleId), await Ae(c.roleId)) : R(!1)))();
+    (async () => (await He(), await ve(), await Be(), d.get("id") && (c != null && c.mobileMenuList) ? (R(!0), $.setValue("role", c.roleId), await Ae(c.roleId)) : R(!1)))();
   }, []), Ke(() => {
     var t;
     if (Object.keys(T).length > 0 && d.get("id") && (c != null && c.mobileMenuList)) {
-      const { appConfiguration: n, tabStatus: r, selectedForm: a, isAttendanceRequired: i } = q(
+      const { appConfiguration: r, tabStatus: n, selectedForm: a, isAttendanceRequired: i } = q(
         (t = c == null ? void 0 : c.mobileMenuList) == null ? void 0 : t.configJson
       );
-      J(n), Ie(r), ct(a), $.setValue("isAttendanceRequired", i);
+      J(r), Ce(n), ct(a), $.setValue("isAttendanceRequired", i);
     }
   }, [T]);
-  const Se = async () => {
-    const r = (await ve({
+  const ve = async () => {
+    const n = (await Ie({
       code: "medplat_form_get_all_form_details",
       parameters: {}
     })).data.result.map((a, i) => ({
@@ -811,16 +811,16 @@ function cr() {
       code: a.form_code,
       uuid: a.uuid || `temp-uuid-${i}`
     }));
-    Q(r);
+    Q(n);
   }, Be = async () => {
-    const n = (await ve({
+    const r = (await Ie({
       code: "get_all_mobile_query",
       parameters: {}
     })).data.result;
-    de(n);
-  }, ze = async () => {
+    de(r);
+  }, He = async () => {
     try {
-      const t = (await ve({
+      const t = (await Ie({
         code: "RETRIEVE_MENU_CONFIG_ROLE_V2"
       })).data;
       t.result && u(t.result);
@@ -833,46 +833,46 @@ function cr() {
   }, Ae = async (t) => {
     if (t)
       try {
-        const n = (await ve({
+        const r = (await Ie({
           code: "fetch_linked_menus_by_role_id",
           parameters: {
             id: t
           }
         })).data;
-        n.result && H(n.result);
-      } catch (n) {
+        r.result && W(r.result);
+      } catch (r) {
         ie({
-          message: n,
+          message: r,
           type: "error"
         });
       }
-  }, Te = (t, n, r) => {
-    const a = n[t];
+  }, Te = (t, r, n) => {
+    const a = r[t];
     if (a) return a;
-    const i = r.find((s) => s.type === "GROUP" && s.id === t);
+    const i = n.find((s) => s.type === "GROUP" && s.id === t);
     return i || null;
-  }, f = (t, n, r, a) => {
-    const i = Te(t.id, r, a);
+  }, m = (t, r, n, a) => {
+    const i = Te(t.id, n, a);
     if (!i) return null;
-    const s = ge();
+    const s = fe();
     if (i.type === "GROUP") {
-      const l = t.menus.map((C) => {
-        const Z = Te(C.id, r, a);
+      const l = t.menus.map((S) => {
+        const Z = Te(S.id, n, a);
         return Z ? {
           ...Z,
-          uuid: ge(),
+          uuid: fe(),
           isGroupMember: !0,
           groupId: t.id
         } : null;
-      }).filter((C) => C !== null);
+      }).filter((S) => S !== null);
       return l.length === 0 ? null : {
         ...i,
         id: s,
-        instanceId: `${n}_GROUP_${s}`,
+        instanceId: `${r}_GROUP_${s}`,
         menus: l
       };
     } else if (i.type === "FEATURE") {
-      const l = n === "PROGRAMS_ROOT" ? n : `${n}_${i.id}`;
+      const l = r === "PROGRAMS_ROOT" ? r : `${r}_${i.id}`;
       return {
         ...i,
         id: i.id,
@@ -881,57 +881,57 @@ function cr() {
       };
     }
     return null;
-  }, G = (t, n, r, a) => {
+  }, G = (t, r, n, a) => {
     if (!t || !Array.isArray(t)) return [];
     if (t.every((i) => i.id && !i.type && !i.features)) {
-      const i = n === "programs" ? "PROGRAMS_ROOT" : n;
-      return t.map((s) => f(s, i, r, a)).filter((s) => s !== null);
+      const i = r === "programs" ? "PROGRAMS_ROOT" : r;
+      return t.map((s) => m(s, i, n, a)).filter((s) => s !== null);
     }
     return t.map((i) => {
-      const s = ge();
+      const s = fe();
       if (i.type === "SEARCH_BAR")
         return { ...i, id: s };
       if (i.type === "SECTION") {
-        const l = `comp-${s}`, C = i.features.map((Z) => f(Z, l, r, a)).filter((Z) => Z !== null);
-        return { type: i.type, title: i.title, id: l, features: C };
+        const l = `comp-${s}`, S = i.features.map((Z) => m(Z, l, n, a)).filter((Z) => Z !== null);
+        return { type: i.type, title: i.title, id: l, features: S };
       }
       return null;
     }).filter((i) => i !== null);
   }, q = (t) => {
     var s;
-    const n = {}, r = {};
+    const r = {}, n = {};
     let a = null;
     const i = ((s = t == null ? void 0 : t.isAttendanceRequired) == null ? void 0 : s.value) || !1;
     for (const l in t) {
-      const C = t[l];
-      if (r[l] = C.active, C.active)
-        if (l === "home" && C.layout)
-          n[l] = G(C.layout, l, T, M);
-        else if (l === "programs" && (C != null && C.features)) {
-          const Z = G(C.features, l, T, M);
-          n[l] = {
+      const S = t[l];
+      if (n[l] = S.active, S.active)
+        if (l === "home" && S.layout)
+          r[l] = G(S.layout, l, T, M);
+        else if (l === "programs" && (S != null && S.features)) {
+          const Z = G(S.features, l, T, M);
+          r[l] = {
             features: Z
           };
-        } else C != null && C.features ? n[l] = G(C == null ? void 0 : C.features, l, T, M) : l === "familyManagement" && C.formCode && (a = {
-          formName: `Form for ${C.formCode}`,
-          code: C.formCode,
-          formUuid: ge()
+        } else S != null && S.features ? r[l] = G(S == null ? void 0 : S.features, l, T, M) : l === "familyManagement" && S.formCode && (a = {
+          formName: `Form for ${S.formCode}`,
+          code: S.formCode,
+          formUuid: fe()
         });
       else
-        l === "programs" ? n[l] = { features: [] } : n[l] = [];
+        l === "programs" ? r[l] = { features: [] } : r[l] = [];
     }
     return {
-      appConfiguration: n,
-      tabStatus: r,
+      appConfiguration: r,
+      tabStatus: n,
       selectedForm: a,
       isAttendanceRequired: i
     };
-  }, H = (t) => {
-    const n = [], r = {};
+  }, W = (t) => {
+    const r = [], n = {};
     t.forEach((a) => {
       const s = JSON.parse(a.menus || "[]").map((l) => {
-        const C = {
-          uuid: ge(),
+        const S = {
+          uuid: fe(),
           id: l.id ? parseInt(l.id) : null,
           name: l.name || "",
           icon: l.icon || "",
@@ -939,21 +939,21 @@ function cr() {
           isGroupMember: a.id != null,
           groupId: a.id || null
         };
-        return r[C.id] = C, C;
+        return n[S.id] = S, S;
       });
-      a.id != null ? n.push({
-        uuid: ge(),
+      a.id != null ? r.push({
+        uuid: fe(),
         id: a.id,
         name: a.name,
         icon: a.icon || "",
         type: "GROUP",
         menus: s
-      }) : n.push(...s);
-    }), te(r), ne(n);
+      }) : r.push(...s);
+    }), te(n), re(r);
   }, L = (t) => {
-    var n, r;
+    var r, n;
     if (t.type === "GROUP") {
-      const a = (r = (n = t.menus) == null ? void 0 : n[0]) == null ? void 0 : r.groupId;
+      const a = (n = (r = t.menus) == null ? void 0 : r[0]) == null ? void 0 : n.groupId;
       return a ? {
         id: a,
         menus: t.menus.map((i) => ({
@@ -965,54 +965,54 @@ function cr() {
         id: t.id
       };
     return null;
-  }, Ce = (t) => !t || !Array.isArray(t) ? [] : t.map((n) => {
-    if (n.type === "SEARCH_BAR")
+  }, Se = (t) => !t || !Array.isArray(t) ? [] : t.map((r) => {
+    if (r.type === "SEARCH_BAR")
       return {
-        type: n.type,
-        queryName: n.queryName
+        type: r.type,
+        queryName: r.queryName
       };
-    if (n.type === "SECTION") {
-      const r = n == null ? void 0 : n.features.map(L).filter((a) => a !== null);
+    if (r.type === "SECTION") {
+      const n = r == null ? void 0 : r.features.map(L).filter((a) => a !== null);
       return {
-        type: n.type,
-        title: n.title,
-        features: r
+        type: r.type,
+        title: r.title,
+        features: n
       };
     }
     return null;
-  }).filter((n) => n !== null), lt = () => {
+  }).filter((r) => r !== null), lt = () => {
     const t = {
       isAttendanceRequired: { value: $.getValues("isAttendanceRequired") }
     };
-    return B.forEach((n) => {
+    return B.forEach((r) => {
       var s;
-      const r = n.id, a = fe[r], i = {
+      const n = r.id, a = me[n], i = {
         active: a
       };
       if (a) {
-        if (r === "familyManagement" && We)
-          i.formCode = We.code;
-        else if (r === "home") {
-          const l = he[r] || [];
-          i.layout = Ce(l);
-        } else if (r === "programs") {
-          const l = ((s = he[r]) == null ? void 0 : s.features) || [];
-          l.length > 0 && (i.features = l.map(L).filter((C) => C !== null));
-        } else if (r !== "analytics") {
-          const l = he[r] || [];
-          Array.isArray(l) && (i.features = l.map(L).filter((C) => C !== null));
+        if (n === "familyManagement" && ze)
+          i.formCode = ze.code;
+        else if (n === "home") {
+          const l = ge[n] || [];
+          i.layout = Se(l);
+        } else if (n === "programs") {
+          const l = ((s = ge[n]) == null ? void 0 : s.features) || [];
+          l.length > 0 && (i.features = l.map(L).filter((S) => S !== null));
+        } else if (n !== "analytics") {
+          const l = ge[n] || [];
+          Array.isArray(l) && (i.features = l.map(L).filter((S) => S !== null));
         }
       }
-      t[r] = i;
+      t[n] = i;
     }), t;
   }, pe = async (t) => {
-    const n = lt(), r = JSON.stringify(n), a = {
+    const r = lt(), n = JSON.stringify(r), a = {
       roleId: t.role,
       userId: se == null ? void 0 : se.id,
-      config_json: r
+      config_json: n
     };
     try {
-      (await ve({
+      (await Ie({
         code: "save_mobile_menu_role_relation",
         parameters: a
       })).data.result && (ie({
@@ -1030,22 +1030,22 @@ function cr() {
     { id: "programs", name: "Programs" },
     { id: "analytics", name: "Analytics" },
     { id: "familyManagement", name: "Family Management" }
-  ], [fe, Ie] = k({
+  ], [me, Ce] = _({
     home: !0,
     programs: !0,
     analytics: !0,
     familyManagement: !0
   }), Y = (t) => {
-    Ie((n) => {
-      const r = {
-        ...n,
-        [t]: !n[t]
+    Ce((r) => {
+      const n = {
+        ...r,
+        [t]: !r[t]
       };
-      if (t === z && !r[t]) {
-        const i = B.find((s) => s.id !== t && r[s.id] === !0);
-        i ? Oe(i.id) : r.home ? Oe("home") : Oe(B[0].id);
+      if (t === H && !n[t]) {
+        const i = B.find((s) => s.id !== t && n[s.id] === !0);
+        i ? Oe(i.id) : n.home ? Oe("home") : Oe(B[0].id);
       }
-      return r;
+      return n;
     });
   }, w = {
     SEARCH_BAR: "SEARCH_BAR",
@@ -1053,197 +1053,197 @@ function cr() {
     FEATURE: "FEATURE",
     SECTION_DROP_ZONE: "SECTION_DROP_ZONE",
     GROUP: "GROUP"
-  }, [We, ct] = k(null), Ht = (t) => {
-    const n = t.target.value, r = F.find((a) => a.code === n);
-    ct(r);
-  }, [me, He] = k(null), [dt, ut] = k(null), [z, Oe] = k("home"), [he, J] = k(() => {
+  }, [ze, ct] = _(null), Wt = (t) => {
+    const r = t.target.value, n = F.find((a) => a.code === r);
+    ct(n);
+  }, [he, We] = _(null), [dt, ut] = _(null), [H, Oe] = _("home"), [ge, J] = _(() => {
     const t = {};
-    return B.forEach((n) => {
-      t[n.id] = [];
+    return B.forEach((r) => {
+      t[r.id] = [];
     }), t;
-  }), [Le, Lt] = k(""), [jt, $t] = k(null), le = ((ht = he.programs) == null ? void 0 : ht.features) || [], qt = (t) => {
-    $t((n) => n === t ? null : t);
-  }, pt = he[z], re = Array.isArray(pt) ? pt : [], je = Fe(() => {
+  }), [Le, Lt] = _(""), [jt, $t] = _(null), le = ((gt = ge.programs) == null ? void 0 : gt.features) || [], qt = (t) => {
+    $t((r) => r === t ? null : t);
+  }, pt = ge[H], ne = Array.isArray(pt) ? pt : [], je = Fe(() => {
     const t = Le.toLowerCase();
-    return M.map((n) => {
-      if (n.type === "GROUP") {
-        const r = n.menus.filter((a) => a.name.toLowerCase().includes(t));
-        return n.name.toLowerCase().includes(t) || r.length > 0 ? { ...n, menus: r } : null;
+    return M.map((r) => {
+      if (r.type === "GROUP") {
+        const n = r.menus.filter((a) => a.name.toLowerCase().includes(t));
+        return r.name.toLowerCase().includes(t) || n.length > 0 ? { ...r, menus: n } : null;
       }
-      return n.name.toLowerCase().includes(t) ? n : null;
+      return r.name.toLowerCase().includes(t) ? r : null;
     }).filter(Boolean);
   }, [M, Le]), { separatedGroups: Ne, separatedFeatures: Me } = Fe(() => {
-    const t = je.filter((r) => r.type === "GROUP"), n = je.filter((r) => r.type !== "GROUP");
-    return { separatedGroups: t, separatedFeatures: n };
+    const t = je.filter((n) => n.type === "GROUP"), r = je.filter((n) => n.type !== "GROUP");
+    return { separatedGroups: t, separatedFeatures: r };
   }, [je]), oe = Re(
     (t) => {
-      J((n) => ({
-        ...n,
-        [z]: typeof t == "function" ? t(n[z] || []) : t
+      J((r) => ({
+        ...r,
+        [H]: typeof t == "function" ? t(r[H] || []) : t
       }));
     },
-    [z]
+    [H]
   ), Zt = Re((t) => {
     Oe(t);
-  }, []), Vt = (t, n, r) => {
-    oe((a) => a.map((i) => i.id === t ? { ...i, [n]: r } : i));
+  }, []), Vt = (t, r, n) => {
+    oe((a) => a.map((i) => i.id === t ? { ...i, [r]: n } : i));
   }, Qt = (t) => {
-    He(t.active.id);
+    We(t.active.id);
   }, Yt = Re(
     (t) => {
-      var C, Z, xt, yt, bt, St, Ct, It, vt, Rt, wt, Et;
-      const { active: n, over: r } = t;
-      if (!n || !n.data.current) {
-        He(null);
+      var S, Z, xt, yt, bt, vt, St, Ct, It, Rt, wt, Et;
+      const { active: r, over: n } = t;
+      if (!r || !r.data.current) {
+        We(null);
         return;
       }
-      const a = (C = r == null ? void 0 : r.data.current) == null ? void 0 : C.type, i = (Z = r == null ? void 0 : r.data.current) == null ? void 0 : Z.sectionId, s = (xt = n.data.current) == null ? void 0 : xt.sectionId, l = (yt = n.data.current) == null ? void 0 : yt.type;
-      if (He(null), !r && z === "programs" && l === w.FEATURE) {
-        const g = n.data.current.data;
-        if (!g) return;
-        J((h) => {
-          const x = h.programs || {}, I = (x == null ? void 0 : x.features) || [], O = {
-            id: g.id,
-            name: g.name,
-            instanceId: `PROGRAMS_ROOT_${g.id}_${crypto.randomUUID()}`,
+      const a = (S = n == null ? void 0 : n.data.current) == null ? void 0 : S.type, i = (Z = n == null ? void 0 : n.data.current) == null ? void 0 : Z.sectionId, s = (xt = r.data.current) == null ? void 0 : xt.sectionId, l = (yt = r.data.current) == null ? void 0 : yt.type;
+      if (We(null), !n && H === "programs" && l === w.FEATURE) {
+        const f = r.data.current.data;
+        if (!f) return;
+        J((g) => {
+          const x = g.programs || {}, C = (x == null ? void 0 : x.features) || [], O = {
+            id: f.id,
+            name: f.name,
+            instanceId: `PROGRAMS_ROOT_${f.id}_${crypto.randomUUID()}`,
             type: "FEATURE",
             icon: {
-              id: `svg-icon-${g.id}`,
-              content: g.icon,
+              id: `svg-icon-${f.id}`,
+              content: f.icon,
               type: "svg"
             }
           };
           return {
-            ...h,
+            ...g,
             programs: {
               ...x,
-              features: [...I, O]
+              features: [...C, O]
             }
           };
         });
         return;
       }
-      if ((r == null ? void 0 : r.id) === "trash-zone") {
-        const g = n.id, h = n.data.current.sectionId;
-        l === "FEATURE_TILE" ? h ? oe(
-          (x) => x.map((I) => {
-            if (I.id === h && (I != null && I.features)) {
-              const O = I == null ? void 0 : I.features.filter((_) => _.instanceId !== g);
-              return { ...I, features: O };
+      if ((n == null ? void 0 : n.id) === "trash-zone") {
+        const f = r.id, g = r.data.current.sectionId;
+        l === "FEATURE_TILE" ? g ? oe(
+          (x) => x.map((C) => {
+            if (C.id === g && (C != null && C.features)) {
+              const O = C == null ? void 0 : C.features.filter((k) => k.instanceId !== f);
+              return { ...C, features: O };
             }
-            return I;
+            return C;
           })
-        ) : z === "programs" && J((x) => {
-          const I = x.programs || {}, _ = ((I == null ? void 0 : I.features) || []).filter((D) => D.instanceId !== g);
+        ) : H === "programs" && J((x) => {
+          const C = x.programs || {}, k = ((C == null ? void 0 : C.features) || []).filter((D) => D.instanceId !== f);
           return {
             ...x,
             programs: {
-              ...I,
-              features: _
+              ...C,
+              features: k
             }
           };
-        }) : (l === w.SECTION || l === w.SEARCH_BAR) && oe((x) => x.filter((I) => I.id !== n.id));
+        }) : (l === w.SECTION || l === w.SEARCH_BAR) && oe((x) => x.filter((C) => C.id !== r.id));
         return;
       }
       if (l === "FEATURE_TILE" && a === "FEATURE_TILE") {
-        if (!s && z === "programs") {
-          J((g) => {
-            const h = g.programs || {}, x = (h == null ? void 0 : h.features) || [], I = x.findIndex((D) => D.instanceId === n.id), O = x.findIndex((D) => D.instanceId === r.id);
-            if (I === -1 || O === -1)
-              return g;
-            const _ = Pe(x, I, O);
+        if (!s && H === "programs") {
+          J((f) => {
+            const g = f.programs || {}, x = (g == null ? void 0 : g.features) || [], C = x.findIndex((D) => D.instanceId === r.id), O = x.findIndex((D) => D.instanceId === n.id);
+            if (C === -1 || O === -1)
+              return f;
+            const k = Pe(x, C, O);
             return {
-              ...g,
+              ...f,
               programs: {
-                ...h,
-                features: _
+                ...g,
+                features: k
               }
             };
           });
           return;
         }
-        s === i && n.id !== r.id && oe(
-          (g) => g.map((h) => {
-            if (h.id === s) {
-              const x = h == null ? void 0 : h.features, I = x.findIndex((D) => D.instanceId === n.id), O = x.findIndex((D) => D.instanceId === r.id);
-              if (I === -1 || O === -1) return h;
-              const _ = Pe(x, I, O);
-              return { ...h, features: _ };
+        s === i && r.id !== n.id && oe(
+          (f) => f.map((g) => {
+            if (g.id === s) {
+              const x = g == null ? void 0 : g.features, C = x.findIndex((D) => D.instanceId === r.id), O = x.findIndex((D) => D.instanceId === n.id);
+              if (C === -1 || O === -1) return g;
+              const k = Pe(x, C, O);
+              return { ...g, features: k };
             }
-            return h;
+            return g;
           })
         );
         return;
       }
       if (l === w.GROUP && a === w.SECTION_DROP_ZONE) {
-        const g = n.data.current.data, h = (bt = r == null ? void 0 : r.data.current) == null ? void 0 : bt.sectionId;
-        g && h && J((x) => {
-          const I = x[z] || [], O = I.findIndex((ke) => ke.id === h);
+        const f = r.data.current.data, g = (bt = n == null ? void 0 : n.data.current) == null ? void 0 : bt.sectionId;
+        f && g && J((x) => {
+          const C = x[H] || [], O = C.findIndex((_e) => _e.id === g);
           if (O === -1) return x;
-          const _ = I[O], D = String(g.uuid);
-          if (_ == null ? void 0 : _.features.some((ke) => ke.type === "GROUP" && String(ke.uuid) === D))
+          const k = C[O], D = String(f.uuid);
+          if (k == null ? void 0 : k.features.some((_e) => _e.type === "GROUP" && String(_e.uuid) === D))
             return ie({
               type: "warn",
-              message: `Group ${g.name} is already in this section.`
+              message: `Group ${f.name} is already in this section.`
             }), x;
           const qe = {
-            id: g.uuid,
-            name: g.name,
-            instanceId: `${h}_GROUP_${g.uuid}_${crypto.randomUUID()}`,
+            id: f.uuid,
+            name: f.name,
+            instanceId: `${g}_GROUP_${f.uuid}_${crypto.randomUUID()}`,
             type: "GROUP",
-            menus: g.menus || [],
-            icon: g.icon
-          }, _e = {
-            ..._,
-            features: [..._.features, qe]
-          }, ce = [...I];
-          return ce[O] = _e, { ...x, [z]: ce };
+            menus: f.menus || [],
+            icon: f.icon
+          }, ke = {
+            ...k,
+            features: [...k.features, qe]
+          }, ce = [...C];
+          return ce[O] = ke, { ...x, [H]: ce };
         });
         return;
       }
       if (l === w.FEATURE && a === w.SECTION_DROP_ZONE) {
-        const g = n.data.current.data, h = (St = r == null ? void 0 : r.data.current) == null ? void 0 : St.sectionId;
-        g && h && J((x) => {
-          const I = x[z] || [], O = I.findIndex((ce) => ce.id === h);
+        const f = r.data.current.data, g = (vt = n == null ? void 0 : n.data.current) == null ? void 0 : vt.sectionId;
+        f && g && J((x) => {
+          const C = x[H] || [], O = C.findIndex((ce) => ce.id === g);
           if (O === -1) return x;
-          const _ = I[O];
-          if (_ == null ? void 0 : _.features.some((ce) => ce.id === g.id && ce.type === "FEATURE"))
+          const k = C[O];
+          if (k == null ? void 0 : k.features.some((ce) => ce.id === f.id && ce.type === "FEATURE"))
             return ie({
               type: "warn",
-              message: `Feature ${g.name} is already in this section.`
+              message: `Feature ${f.name} is already in this section.`
             }), x;
           const V = {
-            id: g.id,
-            name: g.name,
-            instanceId: `${h}_${g.id}_${crypto.randomUUID()}`,
+            id: f.id,
+            name: f.name,
+            instanceId: `${g}_${f.id}_${crypto.randomUUID()}`,
             type: "FEATURE",
             icon: {
-              id: `svg-icon-${g.id}`,
-              content: g.icon,
+              id: `svg-icon-${f.id}`,
+              content: f.icon,
               type: "svg"
             }
           }, qe = {
-            ..._,
-            features: [..._.features, V]
-          }, _e = [...I];
-          return _e[O] = qe, { ...x, [z]: _e };
+            ...k,
+            features: [...k.features, V]
+          }, ke = [...C];
+          return ke[O] = qe, { ...x, [H]: ke };
         });
         return;
       }
-      if (!((Ct = n.data.current) != null && Ct.sortable && !((It = r == null ? void 0 : r.data.current) != null && It.sortable) && (r == null ? void 0 : r.id) === "mobile-content")) {
-        if ((vt = r == null ? void 0 : r.data.current) != null && vt.sortable && ((Rt = n.data.current) == null ? void 0 : Rt.type) === w.SECTION && n.id !== r.id) {
-          oe((g) => {
-            const h = g.find((V) => V.type === w.SEARCH_BAR), x = g.filter((V) => V.type !== w.SEARCH_BAR), I = x.findIndex((V) => V.id === n.id), O = x.findIndex((V) => V.id === r.id);
-            if (I === -1 || O === -1)
-              return g;
-            let D = Pe(x, I, O);
-            return h && (D = [h, ...D]), D;
+      if (!((St = r.data.current) != null && St.sortable && !((Ct = n == null ? void 0 : n.data.current) != null && Ct.sortable) && (n == null ? void 0 : n.id) === "mobile-content")) {
+        if ((It = n == null ? void 0 : n.data.current) != null && It.sortable && ((Rt = r.data.current) == null ? void 0 : Rt.type) === w.SECTION && r.id !== n.id) {
+          oe((f) => {
+            const g = f.find((V) => V.type === w.SEARCH_BAR), x = f.filter((V) => V.type !== w.SEARCH_BAR), C = x.findIndex((V) => V.id === r.id), O = x.findIndex((V) => V.id === n.id);
+            if (C === -1 || O === -1)
+              return f;
+            let D = Pe(x, C, O);
+            return g && (D = [g, ...D]), D;
           });
           return;
         }
-        if ((r == null ? void 0 : r.id) === "mobile-content" && l) {
-          const g = (wt = r.data.current) == null ? void 0 : wt.type;
-          if (g === "PROGRAMS_ROOT_DROP_ZONE") {
+        if ((n == null ? void 0 : n.id) === "mobile-content" && l) {
+          const f = (wt = n.data.current) == null ? void 0 : wt.type;
+          if (f === "PROGRAMS_ROOT_DROP_ZONE") {
             if (l === w.GROUP) {
               ie({
                 type: "warn",
@@ -1252,8 +1252,8 @@ function cr() {
               return;
             }
             if (l === w.FEATURE) {
-              const h = n.data.current.data;
-              if (!h) return;
+              const g = r.data.current.data;
+              if (!g) return;
               J((x) => ({
                 ...x,
                 programs: {
@@ -1261,13 +1261,13 @@ function cr() {
                   features: [
                     ...x.programs.features,
                     {
-                      id: h.id,
-                      name: h.name,
-                      instanceId: `PROGRAMS_ROOT_${h.id}_${crypto.randomUUID()}`,
+                      id: g.id,
+                      name: g.name,
+                      instanceId: `PROGRAMS_ROOT_${g.id}_${crypto.randomUUID()}`,
                       type: "FEATURE",
                       icon: {
-                        id: `svg-icon-${h.id}`,
-                        content: h.icon,
+                        id: `svg-icon-${g.id}`,
+                        content: g.icon,
                         type: "svg"
                       }
                     }
@@ -1277,19 +1277,19 @@ function cr() {
               return;
             }
           }
-          if ((Et = n.data.current) != null && Et.sortable && g === "LAYOUT_ROOT_DROP_ZONE")
+          if ((Et = r.data.current) != null && Et.sortable && f === "LAYOUT_ROOT_DROP_ZONE")
             return;
-          if (g === "LAYOUT_ROOT_DROP_ZONE") {
-            oe((h) => {
+          if (f === "LAYOUT_ROOT_DROP_ZONE") {
+            oe((g) => {
               if (l === w.SEARCH_BAR)
-                return h.some((O) => O.type === w.SEARCH_BAR) ? (ie({
+                return g.some((O) => O.type === w.SEARCH_BAR) ? (ie({
                   type: "info",
                   message: "Only one Search Bar is allowed."
-                }), h) : [{
+                }), g) : [{
                   id: `comp-${Date.now()}`,
                   type: w.SEARCH_BAR,
                   queryName: "Query Name"
-                }, ...h];
+                }, ...g];
               if (l === w.SECTION) {
                 const x = {
                   id: `comp-${Date.now()}`,
@@ -1297,52 +1297,52 @@ function cr() {
                   title: "Section",
                   features: []
                 };
-                return [...h, x];
+                return [...g, x];
               }
-              return h;
+              return g;
             });
             return;
           }
         }
       }
     },
-    [oe, J, z, w]
-  ), ft = "350px", Jt = () => /* @__PURE__ */ p(
+    [oe, J, H, w]
+  ), mt = "350px", Jt = () => /* @__PURE__ */ p(
     N,
     {
       sx: {
-        width: ft,
+        width: mt,
         p: 1.5,
         border: "1px solid #ccc",
         borderRadius: "8px",
-        backgroundColor: "#fff",
+        backgroundColor: "var(--color-background2)",
         display: "flex",
         alignItems: "center",
         boxShadow: "0 1px 10px rgba(0,0,0,0.3)"
       },
       children: [
-        /* @__PURE__ */ e(W, { icon: kt, style: { marginRight: "8px", color: "#888" } }),
-        /* @__PURE__ */ e(S, { variant: "body2", color: "textSecondary", sx: { flexGrow: 1 }, children: "Search..." })
+        /* @__PURE__ */ e(z, { icon: _t, style: { marginRight: "8px", color: "#888" } }),
+        /* @__PURE__ */ e(v, { variant: "body2", color: "textSecondary", sx: { flexGrow: 1 }, children: "Search..." })
       ]
     }
   ), Xt = () => /* @__PURE__ */ e(
     N,
     {
       sx: {
-        width: ft,
+        width: mt,
         minHeight: "100px",
         backgroundColor: "#e6f0ff",
-        border: "1px dashed #073149",
+        border: "1px dashed var(--color-tableHeader)",
         borderRadius: "4px",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
         boxShadow: "0 1px 10px rgba(0,0,0,0.3)",
-        color: "#073149"
+        color: "var(--color-text)"
       },
-      children: /* @__PURE__ */ e(S, { variant: "caption", sx: { fontWeight: "bold" }, children: "Section Dragging" })
+      children: /* @__PURE__ */ e(v, { variant: "caption", sx: { fontWeight: "bold" }, children: "Section Dragging" })
     }
-  ), $e = ({ feature: t }) => /* @__PURE__ */ e(v, { item: !0, xs: 4, sm: 4, children: /* @__PURE__ */ p(
+  ), $e = ({ feature: t }) => /* @__PURE__ */ e(I, { item: !0, xs: 4, sm: 4, children: /* @__PURE__ */ p(
     N,
     {
       sx: {
@@ -1358,7 +1358,7 @@ function cr() {
       children: [
         Ee(t.icon),
         /* @__PURE__ */ e(
-          S,
+          v,
           {
             variant: "caption",
             sx: {
@@ -1375,17 +1375,17 @@ function cr() {
     }
   ) });
   $e.propTypes = {
-    feature: m.any
+    feature: h.any
   };
-  const mt = ({ feature: t }) => /* @__PURE__ */ p(
+  const ht = ({ feature: t }) => /* @__PURE__ */ p(
     N,
     {
       sx: {
         width: "fit-content",
         p: "10px",
         pl: "10px",
-        backgroundColor: "#fff",
-        border: "1px solid #e0e0e0",
+        backgroundColor: "var(--color-background2)",
+        border: "1px solid var(--color-gray3)",
         borderRadius: "4px",
         boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)",
         cursor: "grab",
@@ -1394,12 +1394,12 @@ function cr() {
         transition: "all 0.1s",
         mt: "4px",
         "&:hover": {
-          backgroundColor: "#f5f5f5",
-          borderColor: "#b0bec5"
+          backgroundColor: "var(--color-gray4)",
+          borderColor: "var(--color-gray3)"
         }
       },
       children: [
-        ((r, a) => {
+        ((n, a) => {
           const i = Ee(t.icon, "18px");
           return i && i.type === N ? K.cloneElement(i, {
             sx: {
@@ -1408,50 +1408,50 @@ function cr() {
               width: "18px",
               marginRight: "8px"
             }
-          }) : /* @__PURE__ */ e(N, { sx: { mr: "8px", display: "flex", alignItems: "center" }, children: Ee(r, a) });
+          }) : /* @__PURE__ */ e(N, { sx: { mr: "8px", display: "flex", alignItems: "center" }, children: Ee(n, a) });
         })(t.icon, "18px"),
-        /* @__PURE__ */ e(S, { variant: "body2", sx: { fontWeight: "normal", color: "#333" }, children: t == null ? void 0 : t.name })
+        /* @__PURE__ */ e(v, { variant: "body2", sx: { fontWeight: "normal", color: "#333" }, children: t == null ? void 0 : t.name })
       ]
     }
   );
-  mt.propTypes = {
-    feature: m.any
+  ht.propTypes = {
+    feature: h.any
   };
   const Kt = (t) => {
-    const r = M.flatMap((s) => s.type === w.GROUP ? [s, ...s.menus] : [s]).find((s) => (s.uuid || s.id) === t);
-    if (r) {
+    const n = M.flatMap((s) => s.type === w.GROUP ? [s, ...s.menus] : [s]).find((s) => (s.uuid || s.id) === t);
+    if (n) {
       let s;
-      return r.type ? s = r.type : r.menus ? s = w.GROUP : s = w.FEATURE, {
+      return n.type ? s = n.type : n.menus ? s = w.GROUP : s = w.FEATURE, {
         type: s,
-        data: r
+        data: n
       };
     }
     const a = le == null ? void 0 : le.find((s) => s.instanceId === t);
     if (a)
       return { type: "FEATURE_TILE", data: a };
-    const i = re.find((s) => s.id === t);
+    const i = ne.find((s) => s.id === t);
     if (i) return { type: i.type, data: i };
-    for (const s of re)
+    for (const s of ne)
       if (s != null && s.features) {
-        const l = s == null ? void 0 : s.features.find((C) => C.instanceId === t);
+        const l = s == null ? void 0 : s.features.find((S) => S.instanceId === t);
         if (l)
           return { type: "FEATURE_TILE", data: l };
       }
     return null;
-  }, en = re.find((t) => t.id === dt), tn = (t) => {
-    const n = Kt(t);
-    return n ? n.type === w.SEARCH_BAR ? /* @__PURE__ */ e(Jt, {}) : n.type === w.SECTION ? /* @__PURE__ */ e(Xt, {}) : n.type === w.FEATURE ? /* @__PURE__ */ e(mt, { feature: n.data }) : n.type === w.GROUP ? /* @__PURE__ */ e($e, { feature: n.data }) : n.type === "FEATURE_TILE" ? /* @__PURE__ */ e($e, { feature: n.data }) : null : null;
-  }, nn = Fe(() => {
-    if (!me) return !1;
-    const t = re.some((a) => a.id === me), n = re.some((a) => {
+  }, er = ne.find((t) => t.id === dt), tr = (t) => {
+    const r = Kt(t);
+    return r ? r.type === w.SEARCH_BAR ? /* @__PURE__ */ e(Jt, {}) : r.type === w.SECTION ? /* @__PURE__ */ e(Xt, {}) : r.type === w.FEATURE ? /* @__PURE__ */ e(ht, { feature: r.data }) : r.type === w.GROUP ? /* @__PURE__ */ e($e, { feature: r.data }) : r.type === "FEATURE_TILE" ? /* @__PURE__ */ e($e, { feature: r.data }) : null : null;
+  }, rr = Fe(() => {
+    if (!he) return !1;
+    const t = ne.some((a) => a.id === he), r = ne.some((a) => {
       var i;
-      return (i = a == null ? void 0 : a.features) == null ? void 0 : i.some((s) => s.instanceId === me);
-    }), r = le == null ? void 0 : le.some((a) => a.instanceId === me);
-    return t || n || r;
-  }, [me, re, le]), rn = re.filter((t) => t.type === w.SECTION).map((t) => t.id), on = (t) => {
-    var r, a;
-    const n = (a = (r = t.active) == null ? void 0 : r.data.current) == null ? void 0 : a.type;
-    if (n === w.FEATURE) {
+      return (i = a == null ? void 0 : a.features) == null ? void 0 : i.some((s) => s.instanceId === he);
+    }), n = le == null ? void 0 : le.some((a) => a.instanceId === he);
+    return t || r || n;
+  }, [he, ne, le]), nr = ne.filter((t) => t.type === w.SECTION).map((t) => t.id), or = (t) => {
+    var n, a;
+    const r = (a = (n = t.active) == null ? void 0 : n.data.current) == null ? void 0 : a.type;
+    if (r === w.FEATURE) {
       const i = t.droppableContainers.filter(
         (s) => {
           var l;
@@ -1463,7 +1463,7 @@ function cr() {
         droppableContainers: i
       });
     }
-    if (n === w.SECTION) {
+    if (r === w.SECTION) {
       const i = t.droppableContainers.filter((s) => {
         var l;
         return !(s.id === t.active.id || ((l = s.data.current) == null ? void 0 : l.type) === "SECTION_DROP_ZONE");
@@ -1473,30 +1473,30 @@ function cr() {
         droppableContainers: i
       });
     }
-    return sn(t);
+    return ar(t);
   };
   return /* @__PURE__ */ p(Ze, { children: [
-    /* @__PURE__ */ e(Gn.Provider, { children: /* @__PURE__ */ e("form", { noValidate: !0, onSubmit: $.handleSubmit(pe), children: /* @__PURE__ */ p(
+    /* @__PURE__ */ e(Pr.Provider, { children: /* @__PURE__ */ e("form", { noValidate: !0, onSubmit: $.handleSubmit(pe), children: /* @__PURE__ */ p(
       Nt,
       {
         onDragStart: Qt,
         onDragEnd: Yt,
-        collisionDetection: on,
+        collisionDetection: or,
         children: [
-          /* @__PURE__ */ p(v, { container: !0, spacing: 1, children: [
-            /* @__PURE__ */ e(v, { size: 1 }),
-            /* @__PURE__ */ e(v, { size: 6, children: /* @__PURE__ */ p(
-              v,
+          /* @__PURE__ */ p(I, { container: !0, spacing: 1, children: [
+            /* @__PURE__ */ e(I, { size: 1 }),
+            /* @__PURE__ */ e(I, { size: 6, children: /* @__PURE__ */ p(
+              I,
               {
                 sx: {
                   padding: "2px",
                   margin: "6px 0px"
                 },
                 children: [
-                  /* @__PURE__ */ p(v, { container: !0, sx: { justifyContent: "space-between" }, children: [
-                    /* @__PURE__ */ e(v, { size: 2 }),
-                    /* @__PURE__ */ e(S, { variant: "subtitle1", sx: { fontWeight: "bold", marginLeft: "5px", mb: 1 }, children: "Mobile View" }),
-                    /* @__PURE__ */ p(v, { container: !0, spacing: 1, children: [
+                  /* @__PURE__ */ p(I, { container: !0, sx: { justifyContent: "space-between" }, children: [
+                    /* @__PURE__ */ e(I, { size: 2 }),
+                    /* @__PURE__ */ e(v, { variant: "subtitle1", sx: { fontWeight: "bold", marginLeft: "5px", mb: 1 }, children: "Mobile View" }),
+                    /* @__PURE__ */ p(I, { container: !0, spacing: 1, children: [
                       /* @__PURE__ */ e(
                         Ge,
                         {
@@ -1522,41 +1522,41 @@ function cr() {
                       )
                     ] })
                   ] }),
-                  /* @__PURE__ */ e(v, { sx: { height: "100%", maxHeight: "100%", overflowY: "auto" }, children: /* @__PURE__ */ e(De, { items: rn, strategy: Ue, children: /* @__PURE__ */ e(
+                  /* @__PURE__ */ e(I, { sx: { height: "100%", maxHeight: "100%", overflowY: "auto" }, children: /* @__PURE__ */ e(De, { items: nr, strategy: Ue, children: /* @__PURE__ */ e(
                     Gt,
                     {
-                      tabStatus: fe,
-                      layoutComponents: re,
+                      tabStatus: me,
+                      layoutComponents: ne,
                       componentTypes: w,
                       handleSectionClick: ut,
                       activeElementId: dt,
-                      activeTabId: z,
+                      activeTabId: H,
                       handleTabSwitch: Zt,
                       formList: F,
-                      selectedForm: We,
-                      onFormSelect: Ht,
+                      selectedForm: ze,
+                      onFormSelect: Wt,
                       SvgIconBox: st,
                       setCurrentLayoutComponents: oe,
-                      programFeatures: ((gt = he.programs) == null ? void 0 : gt.features) || []
+                      programFeatures: ((ft = ge.programs) == null ? void 0 : ft.features) || []
                     }
                   ) }) }),
-                  /* @__PURE__ */ e(v, { container: !0, spacing: 2, justifyContent: "space-around", sx: { my: "1.25rem" }, children: B.map((t) => /* @__PURE__ */ e(v, { item: !0, xs: 12, sm: 6, md: 3, children: /* @__PURE__ */ p(v, { container: !0, alignItems: "center", justifyContent: "space-between", children: [
-                    /* @__PURE__ */ e(S, { variant: "body2", sx: { fontWeight: "bolder" }, children: t.name }),
+                  /* @__PURE__ */ e(I, { container: !0, spacing: 2, justifyContent: "space-around", sx: { my: "1.25rem" }, children: B.map((t) => /* @__PURE__ */ e(I, { item: !0, xs: 12, sm: 6, md: 3, children: /* @__PURE__ */ p(I, { container: !0, alignItems: "center", justifyContent: "space-between", children: [
+                    /* @__PURE__ */ e(v, { variant: "body2", sx: { fontWeight: "bolder" }, children: t.name }),
                     /* @__PURE__ */ e(
                       Ot,
                       {
-                        checked: fe[t.id],
+                        checked: me[t.id],
                         onChange: () => Y(t.id),
                         name: t.name,
                         sx: {
                           "& .MuiSwitch-switchBase.Mui-checked": {
-                            color: "#073149",
+                            color: "var(--color-text)",
                             "&:hover": {
                               backgroundColor: "rgba(7, 49, 73, 0.08)"
                             }
                           },
                           "& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track": {
-                            backgroundColor: "#073149",
+                            backgroundColor: "var(--color-tableHeader)",
                             opacity: 0.7
                           }
                         }
@@ -1566,24 +1566,24 @@ function cr() {
                 ]
               }
             ) }),
-            /* @__PURE__ */ e(v, { size: 1 }),
-            /* @__PURE__ */ p(v, { size: 4, children: [
-              /* @__PURE__ */ e(v, { size: 12, children: /* @__PURE__ */ p(xe, { sx: { padding: "2px", margin: "6px 0px" }, children: [
-                /* @__PURE__ */ e(v, { className: "justify-between items-center", container: !0, children: /* @__PURE__ */ e(S, { variant: "subtitle1", sx: { fontWeight: "bold", marginLeft: "5px" }, children: "Menu Relation" }) }),
-                /* @__PURE__ */ p(v, { container: !0, children: [
-                  /* @__PURE__ */ e(v, { size: 12, children: /* @__PURE__ */ p(
+            /* @__PURE__ */ e(I, { size: 1 }),
+            /* @__PURE__ */ p(I, { size: 4, children: [
+              /* @__PURE__ */ e(I, { size: 12, children: /* @__PURE__ */ p(xe, { sx: { padding: "2px", margin: "6px 0px" }, children: [
+                /* @__PURE__ */ e(I, { className: "justify-between items-center", container: !0, children: /* @__PURE__ */ e(v, { variant: "subtitle1", sx: { fontWeight: "bold", marginLeft: "5px" }, children: "Menu Relation" }) }),
+                /* @__PURE__ */ p(I, { container: !0, children: [
+                  /* @__PURE__ */ e(I, { size: 12, children: /* @__PURE__ */ p(
                     Ve,
                     {
                       variant: "outlined",
                       className: "ml-3 mb-1 flex flex-row items-center align-items w-[90%]",
                       children: [
-                        /* @__PURE__ */ p(S, { variant: "body2", children: [
+                        /* @__PURE__ */ p(v, { variant: "body2", children: [
                           "Select Role",
                           /* @__PURE__ */ e("span", { className: "text-red-500 ml-1", children: "*" }),
                           " :"
                         ] }),
                         /* @__PURE__ */ e(N, { className: "w-[60%] ms-3", children: /* @__PURE__ */ e(
-                          Sn,
+                          br,
                           {
                             control: $.control,
                             size: "small",
@@ -1603,13 +1603,13 @@ function cr() {
                       ]
                     }
                   ) }),
-                  /* @__PURE__ */ e(v, { size: 12, children: /* @__PURE__ */ p(
+                  /* @__PURE__ */ e(I, { size: 12, children: /* @__PURE__ */ p(
                     Ve,
                     {
                       variant: "standard",
                       className: "ml-3 mb-3 flex flex-row items-center align-items w-[90%]",
                       children: [
-                        /* @__PURE__ */ e(S, { variant: "body2", children: "Attendance Required? :" }),
+                        /* @__PURE__ */ e(v, { variant: "body2", children: "Attendance Required? :" }),
                         /* @__PURE__ */ e(N, { className: "w-[60%] ms-3", children: /* @__PURE__ */ e(
                           Ot,
                           {
@@ -1617,13 +1617,13 @@ function cr() {
                             onChange: (t) => $.setValue("isAttendanceRequired", t.target.checked),
                             sx: {
                               "& .MuiSwitch-switchBase.Mui-checked": {
-                                color: "#073149",
+                                color: "var(--color-text)",
                                 "&:hover": {
                                   backgroundColor: "rgba(7, 49, 73, 0.08)"
                                 }
                               },
                               "& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track": {
-                                backgroundColor: "#073149",
+                                backgroundColor: "var(--color-tableHeader)",
                                 opacity: 0.7
                               }
                             }
@@ -1634,7 +1634,7 @@ function cr() {
                   ) })
                 ] })
               ] }) }),
-              /* @__PURE__ */ e(v, { size: 12, children: /* @__PURE__ */ p(
+              /* @__PURE__ */ e(I, { size: 12, children: /* @__PURE__ */ p(
                 xe,
                 {
                   sx: {
@@ -1644,28 +1644,28 @@ function cr() {
                     transition: "height 0.3s ease-in-out"
                   },
                   children: [
-                    /* @__PURE__ */ e(S, { variant: "subtitle1", sx: { fontWeight: "bold", marginLeft: "5px", mb: 1 }, children: "Draggable Components" }),
-                    /* @__PURE__ */ p(v, { container: !0, spacing: 2, justifyContent: "space-around", sx: { p: 1 }, children: [
-                      /* @__PURE__ */ e(we, { id: "draggable-search", componentType: w.SEARCH_BAR, children: /* @__PURE__ */ e(v, { item: !0, xs: 6, sm: 4, size: 6, children: /* @__PURE__ */ p(
+                    /* @__PURE__ */ e(v, { variant: "subtitle1", sx: { fontWeight: "bold", marginLeft: "5px", mb: 1 }, children: "Draggable Components" }),
+                    /* @__PURE__ */ p(I, { container: !0, spacing: 2, justifyContent: "space-around", sx: { p: 1 }, children: [
+                      /* @__PURE__ */ e(we, { id: "draggable-search", componentType: w.SEARCH_BAR, children: /* @__PURE__ */ e(I, { item: !0, xs: 6, sm: 4, size: 6, children: /* @__PURE__ */ p(
                         N,
                         {
                           sx: {
                             width: "100%",
                             height: "50px",
                             p: "8px 10px",
-                            backgroundColor: "#f0f4f8",
-                            border: "1px solid #e0e0e0",
+                            backgroundColor: "var(--color-gray4)",
+                            border: "1px solid var(--color-gray3)",
                             borderRadius: "8px",
                             boxShadow: "0 1px 3px rgba(0, 0, 0, 0.1)",
                             cursor: "grab",
                             display: "flex",
                             alignItems: "center",
                             justifyContent: "flex-start",
-                            color: "#073149",
+                            color: "var(--color-text)",
                             transition: "all 0.2s ease-in-out",
                             "&:hover": {
                               backgroundColor: "#e0eaf1",
-                              borderColor: "#b0bec5",
+                              borderColor: "var(--color-gray3)",
                               boxShadow: "0 2px 5px rgba(0, 0, 0, 0.15)"
                             }
                           },
@@ -1677,43 +1677,43 @@ function cr() {
                                 style: { fontSize: "1.2rem", marginRight: "8px" }
                               }
                             ),
-                            /* @__PURE__ */ e(S, { variant: "body2", sx: { fontWeight: "bold", lineHeight: 1 }, children: "Search Bar" })
+                            /* @__PURE__ */ e(v, { variant: "body2", sx: { fontWeight: "bold", lineHeight: 1 }, children: "Search Bar" })
                           ]
                         }
                       ) }) }),
-                      /* @__PURE__ */ e(we, { id: "draggable-section", componentType: w.SECTION, children: /* @__PURE__ */ e(v, { item: !0, xs: 6, sm: 4, size: 6, children: /* @__PURE__ */ p(
+                      /* @__PURE__ */ e(we, { id: "draggable-section", componentType: w.SECTION, children: /* @__PURE__ */ e(I, { item: !0, xs: 6, sm: 4, size: 6, children: /* @__PURE__ */ p(
                         N,
                         {
                           sx: {
                             width: "100%",
                             height: "50px",
                             p: "8px 10px",
-                            backgroundColor: "#f0f4f8",
-                            border: "1px solid #e0e0e0",
+                            backgroundColor: "var(--color-gray4)",
+                            border: "1px solid var(--color-gray3)",
                             borderRadius: "8px",
                             boxShadow: "0 1px 3px rgba(0, 0, 0, 0.1)",
                             cursor: "grab",
                             display: "flex",
                             alignItems: "center",
                             justifyContent: "flex-start",
-                            color: "#073149",
+                            color: "var(--color-text)",
                             transition: "all 0.2s ease-in-out",
                             "&:hover": {
                               backgroundColor: "#c5e1ff",
-                              borderColor: "#073149",
+                              borderColor: "var(--color-tableHeader)",
                               boxShadow: "0 2px 5px rgba(0, 0, 0, 0.15)"
                             }
                           },
                           children: [
                             /* @__PURE__ */ e(X, { iconName: "faBox", style: { fontSize: "1.2rem", marginRight: "8px" } }),
-                            /* @__PURE__ */ e(S, { variant: "body2", sx: { fontWeight: "bold", lineHeight: 1 }, children: "Section" })
+                            /* @__PURE__ */ e(v, { variant: "body2", sx: { fontWeight: "bold", lineHeight: 1 }, children: "Section" })
                           ]
                         }
                       ) }) })
                     ] }),
-                    /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e(zt, { isDraggingSortable: nn }) }),
+                    /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e(Ht, { isDraggingSortable: rr }) }),
                     /* @__PURE__ */ e(ot, { sx: { mt: 2 } }),
-                    /* @__PURE__ */ e(v, { size: 12, children: /* @__PURE__ */ p(
+                    /* @__PURE__ */ e(I, { size: 12, children: /* @__PURE__ */ p(
                       N,
                       {
                         sx: {
@@ -1724,7 +1724,7 @@ function cr() {
                           transition: "height 0.3s ease-in-out"
                         },
                         children: [
-                          /* @__PURE__ */ e(S, { variant: "subtitle1", sx: { fontWeight: "bold", marginLeft: "5px", mb: 1 }, children: "Available Features" }),
+                          /* @__PURE__ */ e(v, { variant: "subtitle1", sx: { fontWeight: "bold", marginLeft: "5px", mb: 1 }, children: "Available Features" }),
                           /* @__PURE__ */ e(
                             Qe,
                             {
@@ -1736,7 +1736,7 @@ function cr() {
                               value: Le,
                               onChange: (t) => Lt(t.target.value),
                               InputProps: {
-                                startAdornment: /* @__PURE__ */ e(pn, { position: "start", children: /* @__PURE__ */ e(X, { iconName: "faMagnifyingGlass" }) })
+                                startAdornment: /* @__PURE__ */ e(ur, { position: "start", children: /* @__PURE__ */ e(X, { iconName: "faMagnifyingGlass" }) })
                               }
                             }
                           ),
@@ -1748,9 +1748,9 @@ function cr() {
                                 overflowY: "auto",
                                 padding: "0 8px"
                               },
-                              children: /* @__PURE__ */ p(v, { container: !0, direction: "column", spacing: 0, sx: { px: 1 }, children: [
+                              children: /* @__PURE__ */ p(I, { container: !0, direction: "column", spacing: 0, sx: { px: 1 }, children: [
                                 Ne.length > 0 && /* @__PURE__ */ e(
-                                  v,
+                                  I,
                                   {
                                     item: !0,
                                     xs: 12,
@@ -1765,7 +1765,7 @@ function cr() {
                                           boxShadow: "0 2px 4px rgba(0,0,0,0.05)",
                                           border: "1px solid #c5e1ff",
                                           borderRadius: "4px!important",
-                                          backgroundColor: "#fff"
+                                          backgroundColor: "var(--color-background2)"
                                         },
                                         expanded: ae,
                                         onChange: () => ue((t) => !t),
@@ -1782,7 +1782,7 @@ function cr() {
                                                 "& .MuiAccordionSummary-content": { margin: "0" },
                                                 p: "0 10px"
                                               },
-                                              children: /* @__PURE__ */ p(S, { variant: "subtitle2", sx: { fontWeight: "bold", color: "#3f51b5" }, children: [
+                                              children: /* @__PURE__ */ p(v, { variant: "subtitle2", sx: { fontWeight: "bold", color: "#3f51b5" }, children: [
                                                 /* @__PURE__ */ e(X, { iconName: "faLayerGroup", style: { marginRight: "6px" } }),
                                                 "Menu Groups (",
                                                 Ne.length,
@@ -1790,7 +1790,7 @@ function cr() {
                                               ] })
                                             }
                                           ),
-                                          /* @__PURE__ */ e(Xe, { sx: { p: "8px", pt: 1, backgroundColor: "#f9f9f9" }, children: /* @__PURE__ */ e(v, { container: !0, spacing: 0.5, direction: "column", children: Ne.map((t) => /* @__PURE__ */ e(
+                                          /* @__PURE__ */ e(Xe, { sx: { p: "8px", pt: 1, backgroundColor: "var(--color-gray4)" }, children: /* @__PURE__ */ e(I, { container: !0, spacing: 0.5, direction: "column", children: Ne.map((t) => /* @__PURE__ */ e(
                                             tt,
                                             {
                                               item: t,
@@ -1805,7 +1805,7 @@ function cr() {
                                     )
                                   }
                                 ),
-                                Me.length > 0 && /* @__PURE__ */ e(v, { item: !0, xs: 12, children: /* @__PURE__ */ p(
+                                Me.length > 0 && /* @__PURE__ */ e(I, { item: !0, xs: 12, children: /* @__PURE__ */ p(
                                   Ye,
                                   {
                                     sx: {
@@ -1815,7 +1815,7 @@ function cr() {
                                       border: "1px solid #c8e6c9",
                                       mb: 1,
                                       borderRadius: "4px!important",
-                                      backgroundColor: "#fff"
+                                      backgroundColor: "var(--color-background2)"
                                     },
                                     expanded: A,
                                     onChange: () => j((t) => !t),
@@ -1832,7 +1832,7 @@ function cr() {
                                             "& .MuiAccordionSummary-content": { margin: "0" },
                                             p: "0 10px"
                                           },
-                                          children: /* @__PURE__ */ p(S, { variant: "subtitle2", sx: { fontWeight: "bold", color: "#009688" }, children: [
+                                          children: /* @__PURE__ */ p(v, { variant: "subtitle2", sx: { fontWeight: "bold", color: "#009688" }, children: [
                                             /* @__PURE__ */ e(X, { iconName: "faPuzzlePiece", style: { marginRight: "6px" } }),
                                             "Standalone Features (",
                                             Me.length,
@@ -1840,7 +1840,7 @@ function cr() {
                                           ] })
                                         }
                                       ),
-                                      /* @__PURE__ */ e(Xe, { sx: { p: "8px", pt: 1, backgroundColor: "#ffffff" }, children: /* @__PURE__ */ e(v, { container: !0, spacing: 0.5, direction: "column", children: Me.map((t) => /* @__PURE__ */ e(
+                                      /* @__PURE__ */ e(Xe, { sx: { p: "8px", pt: 1, backgroundColor: "var(--color-background2)" }, children: /* @__PURE__ */ e(I, { container: !0, spacing: 0.5, direction: "column", children: Me.map((t) => /* @__PURE__ */ e(
                                         tt,
                                         {
                                           item: t,
@@ -1851,7 +1851,7 @@ function cr() {
                                     ]
                                   }
                                 ) }),
-                                Ne.length === 0 && Me.length === 0 && /* @__PURE__ */ e(S, { variant: "body2", sx: { p: 2, color: "#9e9e9e", textAlign: "center" }, children: "No groups or features match your search criteria." })
+                                Ne.length === 0 && Me.length === 0 && /* @__PURE__ */ e(v, { variant: "body2", sx: { p: 2, color: "var(--color-gray1)", textAlign: "center" }, children: "No groups or features match your search criteria." })
                               ] })
                             }
                           )
@@ -1861,10 +1861,10 @@ function cr() {
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e(v, { size: 12, sx: { mt: 1 }, children: /* @__PURE__ */ e(
-                Wt,
+              /* @__PURE__ */ e(I, { size: 12, sx: { mt: 1 }, children: /* @__PURE__ */ e(
+                zt,
                 {
-                  activeComponent: en,
+                  activeComponent: er,
                   onUpdate: Vt,
                   onDeselect: () => ut(null),
                   mobileQueries: ee
@@ -1872,12 +1872,12 @@ function cr() {
               ) })
             ] })
           ] }),
-          /* @__PURE__ */ e(an, { children: tn(me) })
+          /* @__PURE__ */ e(ir, { children: tr(he) })
         ]
       }
     ) }) }),
     /* @__PURE__ */ e(
-      Pn,
+      Fr,
       {
         open: be,
         handleClose: () => {
@@ -1909,9 +1909,9 @@ function we({ id: o, children: c, componentType: d, dragData: b = null }) {
     ...E
   });
 }
-m.node, m.number.isRequired, m.number.isRequired;
-const zt = ({ isDraggingSortable: o }) => {
-  const { setNodeRef: c, isOver: d } = nt({
+h.node, h.number.isRequired, h.number.isRequired;
+const Ht = ({ isDraggingSortable: o }) => {
+  const { setNodeRef: c, isOver: d } = rt({
     id: "trash-zone"
   });
   return o ? /* @__PURE__ */ p(
@@ -1936,29 +1936,29 @@ const zt = ({ isDraggingSortable: o }) => {
         transition: "background-color 0.2s"
       },
       children: [
-        /* @__PURE__ */ e(W, { icon: On, style: { marginRight: "10px" } }),
-        /* @__PURE__ */ e(S, { variant: "body1", children: d ? "Release to Delete" : "Drag Here to Delete" })
+        /* @__PURE__ */ e(z, { icon: Tr, style: { marginRight: "10px" } }),
+        /* @__PURE__ */ e(v, { variant: "body1", children: d ? "Release to Delete" : "Drag Here to Delete" })
       ]
     }
   ) : null;
 };
-zt.propTypes = {
-  isDraggingSortable: m.any
+Ht.propTypes = {
+  isDraggingSortable: h.any
 };
-const Wt = ({ activeComponent: o, onUpdate: c, onDeselect: d, mobileQueries: b }) => {
+const zt = ({ activeComponent: o, onUpdate: c, onDeselect: d, mobileQueries: b }) => {
   if (!o)
     return /* @__PURE__ */ p(
       xe,
       {
         sx: {
           p: 1,
-          backgroundColor: "#f5f5f5",
+          backgroundColor: "var(--color-gray4)",
           textAlign: "center"
         },
         children: [
-          /* @__PURE__ */ e(S, { variant: "subtitle1", sx: { fontWeight: "bold", mb: 1, color: "#073149" }, children: "Component Configuration" }),
+          /* @__PURE__ */ e(v, { variant: "subtitle1", sx: { fontWeight: "bold", mb: 1, color: "var(--color-text)" }, children: "Component Configuration" }),
           /* @__PURE__ */ e(ot, { sx: { mb: 1 } }),
-          /* @__PURE__ */ p(S, { variant: "body1", children: [
+          /* @__PURE__ */ p(v, { variant: "body1", children: [
             "To add or edit ",
             /* @__PURE__ */ e("b", { children: "Section Title" }),
             " or ",
@@ -1966,10 +1966,10 @@ const Wt = ({ activeComponent: o, onUpdate: c, onDeselect: d, mobileQueries: b }
             ":"
           ] }),
           /* @__PURE__ */ p(N, { sx: { display: "flex", alignItems: "center", justifyContent: "center", mb: 1 }, children: [
-            /* @__PURE__ */ e(S, { variant: "body1", color: "primary", children: "Right-Click" }),
-            /* @__PURE__ */ e(S, { variant: "body1", sx: { ml: 1 }, children: "on the selected component card" })
+            /* @__PURE__ */ e(v, { variant: "body1", color: "primary", children: "Right-Click" }),
+            /* @__PURE__ */ e(v, { variant: "body1", sx: { ml: 1 }, children: "on the selected component card" })
           ] }),
-          /* @__PURE__ */ e(S, { variant: "caption", color: "textSecondary", children: "This will open the menu to access the **Configuration Panel**." })
+          /* @__PURE__ */ e(v, { variant: "caption", color: "textSecondary", children: "This will open the menu to access the **Configuration Panel**." })
         ]
       }
     );
@@ -1977,9 +1977,9 @@ const Wt = ({ activeComponent: o, onUpdate: c, onDeselect: d, mobileQueries: b }
     const E = b.map((u) => u.code);
     if (o.type === "SEARCH_BAR")
       return /* @__PURE__ */ p(xe, { sx: { p: 2, height: "100%" }, children: [
-        /* @__PURE__ */ e(S, { variant: "h6", sx: { mb: 2 }, children: "Search Bar Configuration" }),
+        /* @__PURE__ */ e(v, { variant: "h6", sx: { mb: 2 }, children: "Search Bar Configuration" }),
         /* @__PURE__ */ e(
-          mn,
+          mr,
           {
             disablePortal: !0,
             id: "query-name-autocomplete",
@@ -1998,7 +1998,7 @@ const Wt = ({ activeComponent: o, onUpdate: c, onDeselect: d, mobileQueries: b }
       ] });
   }
   return o.type === "SECTION" ? /* @__PURE__ */ p(xe, { sx: { p: 2, height: "100%" }, children: [
-    /* @__PURE__ */ e(S, { variant: "h6", sx: { mb: 2 }, children: "Section Configuration" }),
+    /* @__PURE__ */ e(v, { variant: "h6", sx: { mb: 2 }, children: "Section Configuration" }),
     /* @__PURE__ */ e(
       Qe,
       {
@@ -2013,14 +2013,14 @@ const Wt = ({ activeComponent: o, onUpdate: c, onDeselect: d, mobileQueries: b }
     /* @__PURE__ */ e(Ge, { onClick: d, variant: "outlined", color: "gray", children: "Close" })
   ] }) : null;
 };
-Wt.propTypes = {
-  activeComponent: m.any,
-  onUpdate: m.any,
-  onDeselect: m.any,
-  mobileQueries: m.any
+zt.propTypes = {
+  activeComponent: h.any,
+  onUpdate: h.any,
+  onDeselect: h.any,
+  mobileQueries: h.any
 };
 function st({ svg: o }) {
-  const [c, d] = k("");
+  const [c, d] = _("");
   return Ke(() => {
     if (o) {
       const u = new DOMParser().parseFromString(o, "image/svg+xml").documentElement;
@@ -2033,7 +2033,7 @@ function st({ svg: o }) {
       d(R);
     }
   }, [o]), /* @__PURE__ */ e(
-    fn,
+    pr,
     {
       size: 2,
       sx: {
@@ -2048,7 +2048,7 @@ function st({ svg: o }) {
         borderRadius: "3%",
         transition: "background-color 0.3s ease",
         "&:hover": {
-          backgroundColor: "#e0e0e0",
+          backgroundColor: "var(--color-gray3)",
           cursor: "pointer"
         },
         overflow: "hidden"
@@ -2058,7 +2058,7 @@ function st({ svg: o }) {
   );
 }
 st.propTypes = {
-  svg: m.string.isRequired
+  svg: h.string.isRequired
 };
 const Ee = (o, c = "36px") => {
   let d = null;
@@ -2083,7 +2083,7 @@ const Ee = (o, c = "36px") => {
     {
       sx: {
         fontSize: "1.2rem",
-        color: "#b0bec5",
+        color: "var(--color-gray3)",
         border: "1px solid",
         borderRadius: "50%",
         height: "36px",
@@ -2103,8 +2103,8 @@ const Ee = (o, c = "36px") => {
       width: "fit-content",
       p: "10px",
       pl: c ? "20px" : "10px",
-      backgroundColor: "#fff",
-      border: "1px solid #e0e0e0",
+      backgroundColor: "var(--color-background2)",
+      border: "1px solid var(--color-gray3)",
       borderRadius: "4px",
       boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)",
       cursor: "grab",
@@ -2113,8 +2113,8 @@ const Ee = (o, c = "36px") => {
       transition: "all 0.1s",
       mt: "4px",
       "&:hover": {
-        backgroundColor: "#f5f5f5",
-        borderColor: "#b0bec5"
+        backgroundColor: "var(--color-gray4)",
+        borderColor: "var(--color-gray3)"
       }
     },
     children: [
@@ -2129,26 +2129,26 @@ const Ee = (o, c = "36px") => {
           }
         }) : /* @__PURE__ */ e(N, { sx: { mr: "8px", display: "flex", alignItems: "center" }, children: Ee(b, E) });
       })(o.icon, "18px"),
-      /* @__PURE__ */ e(S, { variant: "body2", sx: { fontWeight: "normal", color: "#333" }, children: o == null ? void 0 : o.name })
+      /* @__PURE__ */ e(v, { variant: "body2", sx: { fontWeight: "normal", color: "#333" }, children: o == null ? void 0 : o.name })
     ]
   }
 );
 et.propTypes = {
-  feature: m.any,
-  isGroupMember: m.any
+  feature: h.any,
+  isGroupMember: h.any
 };
 const tt = ({ item: o, COMPONENT_TYPES: c, activeGroupId: d, onGroupToggle: b }) => {
   const E = d === o.uuid, u = (y) => {
     y.stopPropagation();
   };
-  return o.type !== "GROUP" ? /* @__PURE__ */ e(we, { id: o.uuid, componentType: c.FEATURE, dragData: o, children: /* @__PURE__ */ e(v, { item: !0, xs: 12, children: /* @__PURE__ */ e(et, { feature: o }) }, o.id) }, o.uuid) : /* @__PURE__ */ p(
+  return o.type !== "GROUP" ? /* @__PURE__ */ e(we, { id: o.uuid, componentType: c.FEATURE, dragData: o, children: /* @__PURE__ */ e(I, { item: !0, xs: 12, children: /* @__PURE__ */ e(et, { feature: o }) }, o.id) }, o.uuid) : /* @__PURE__ */ p(
     Ye,
     {
       sx: {
         m: 0,
         "&:before": { display: "none" },
         boxShadow: "none",
-        border: "1px solid #e0e0e0",
+        border: "1px solid var(--color-gray3)",
         mb: 1,
         borderRadius: "4px!important"
       },
@@ -2165,7 +2165,7 @@ const tt = ({ item: o, COMPONENT_TYPES: c, activeGroupId: d, onGroupToggle: b })
                 iconName: "faChevronDown",
                 style: {
                   fontSize: "1rem",
-                  color: "#073149",
+                  color: "var(--color-text)",
                   transform: E ? "rotate(360deg)" : "rotate(0deg)",
                   transition: "transform 0.2s"
                 }
@@ -2195,13 +2195,13 @@ const tt = ({ item: o, COMPONENT_TYPES: c, activeGroupId: d, onGroupToggle: b })
                       onClick: (y) => y.stopPropagation(),
                       onMouseDown: (y) => y.stopPropagation(),
                       onTouchStart: (y) => y.stopPropagation(),
-                      children: /* @__PURE__ */ e(X, { iconName: "faBars", style: { fontSize: "0.8rem", color: "#073149" } })
+                      children: /* @__PURE__ */ e(X, { iconName: "faBars", style: { fontSize: "0.8rem", color: "var(--color-text)" } })
                     }
                   )
                 },
                 `drag-handle-${o.uuid}`
               ),
-              /* @__PURE__ */ p(S, { variant: "subtitle2", sx: { fontWeight: "bold", color: "#073149", flexGrow: 1 }, children: [
+              /* @__PURE__ */ p(v, { variant: "subtitle2", sx: { fontWeight: "bold", color: "var(--color-text)", flexGrow: 1 }, children: [
                 o.name,
                 " (",
                 o.menus.length,
@@ -2210,13 +2210,13 @@ const tt = ({ item: o, COMPONENT_TYPES: c, activeGroupId: d, onGroupToggle: b })
             ] })
           }
         ),
-        /* @__PURE__ */ e(Xe, { sx: { p: "8px", pt: 1, backgroundColor: "#f9f9f9" }, children: /* @__PURE__ */ e(v, { container: !0, spacing: 0.5, children: o.menus.map((y) => /* @__PURE__ */ e(
+        /* @__PURE__ */ e(Xe, { sx: { p: "8px", pt: 1, backgroundColor: "var(--color-gray4)" }, children: /* @__PURE__ */ e(I, { container: !0, spacing: 0.5, children: o.menus.map((y) => /* @__PURE__ */ e(
           we,
           {
             id: y.uuid,
             componentType: c.FEATURE,
             dragData: y,
-            children: /* @__PURE__ */ e(v, { item: !0, xs: 12, children: /* @__PURE__ */ e(et, { feature: y, isGroupMember: !0 }) }, y.id)
+            children: /* @__PURE__ */ e(I, { item: !0, xs: 12, children: /* @__PURE__ */ e(et, { feature: y, isGroupMember: !0 }) }, y.id)
           },
           y.uuid
         )) }) })
@@ -2226,12 +2226,12 @@ const tt = ({ item: o, COMPONENT_TYPES: c, activeGroupId: d, onGroupToggle: b })
   );
 };
 tt.propTypes = {
-  item: m.any,
-  COMPONENT_TYPES: m.any,
-  activeGroupId: m.any,
-  onGroupToggle: m.any
+  item: h.any,
+  COMPONENT_TYPES: h.any,
+  activeGroupId: h.any,
+  onGroupToggle: h.any
 };
 export {
-  cr as default
+  cn as default
 };
-//# sourceMappingURL=AddMenuConfiguration-QWfpcnuP.js.map
+//# sourceMappingURL=AddMenuConfiguration-DsnY0Rws.js.map