@m4l/styles 0.0.48 → 1.0.0

package/theme/overrides/M4LExtendedComponents/{index.fbdb0818.js → index.21814c8d.js}

@@ -1,17 +1,20 @@
 import { alpha as t } from "@mui/material/styles";
-import { alpha as e } from "@mui/system";
-import { P as r } from "../../palette.0590e8a6.js";
-const p = (o) => ({
+import { alpha as r } from "@mui/system";
+import "../../defaultThemeOptions.0976e58a.js";
+import "../../shadows.e0c009ff.js";
+import { P as e } from "../../palette.287635f2.js";
+import "../../typography.2a9a38a6.js";
+import "@mui/material";
+const c = (o) => ({
   M4LDynamicFilter: {
     styleOverrides: {
       "&.M4LDynamicFilter-root": {
         borderRadius: "4px",
-        background: o.palette.background.default,
+        background: o.vars.palette.background.default,
         padding: "0px",
         border: "1px solid",
-        borderColor: o.palette.state.borderPrimary,
-        minHeight: "32px",
-        height: "32px",
+        borderColor: o.vars.palette.state.borderPrimary,
+        height: "fit-content",
         [o.breakpoints.down("sm")]: {
           minHeight: "auto",
           height: "auto"
@@ -20,13 +23,14 @@ const p = (o) => ({
           "& .M4LDynamicFilter-containerFistRow": {
             "& .M4LDynamicFilter-containerClearFilter": {
               borderLeft: "1px solid",
-              borderColor: o.palette.state.borderPrimary
+              borderColor: o.vars.palette.state.borderPrimary
             }
           },
           "& .M4LDynamicFilter-wrapperApplyedFilters": {
             display: "flex",
             borderTop: "1px solid ",
-            borderColor: o.palette.state.borderSecondary
+            borderColor: o.vars.palette.state.borderSecondary,
+            height: "fit-content"
           }
         },
         "&.M4LDynamicFilter-isEmpty": {
@@ -57,7 +61,7 @@ const p = (o) => ({
             width: "100%",
             alignItems: "center",
             maxWidth: "100%",
-            color: o.palette.text.secondary,
+            color: o.vars.palette.text.secondary,
             border: "1px solid",
             borderColor: "transparent",
             [o.breakpoints.down("sm")]: {
@@ -67,7 +71,7 @@ const p = (o) => ({
           }
         },
         "&.M4LDynamicFilter-isInvalid": {
-          borderColor: o.palette.state.error.normal
+          borderColor: o.vars.palette.state.error.normal
         },
         "& .M4LDynamicFilter-containerClearFilter": {
           display: "flex",
@@ -79,9 +83,9 @@ const p = (o) => ({
           borderTopRightRadius: "4px",
           borderBottomRightRadius: "4px",
           borderLeft: "1px solid",
-          borderColor: o.palette.state.borderPrimary,
+          borderColor: o.vars.palette.state.borderPrimary,
           "& .M4LIconButton-root .M4LDynamicFilter-filterButton": {
-            background: o.palette.state.focus
+            background: o.vars.palette.state.focus
           }
         },
         "& .M4LDynamicFilter-containerInputFilter": {
@@ -96,36 +100,36 @@ const p = (o) => ({
           borderTopLeftRadius: "4px",
           borderBottomLeftRadius: "4px",
           borderRight: "1px solid",
-          borderColor: o.palette.state.borderPrimary,
+          borderColor: o.vars.palette.state.borderPrimary,
           "& > input": {
-            background: o.palette.background.default,
-            ...o.typography.body,
-            color: o.palette.text.secondary,
+            background: o.vars.palette.background.default,
+            ...o.colorSchemes.finalTheme.typography.body,
+            color: o.vars.palette.text.secondary,
             border: "1px solid",
             borderColor: "transparent",
             padding: "4px 8px",
             width: "100%",
             height: "100%",
             "&::placeholder": {
-              color: o.palette.text.secondary
+              color: o.vars.palette.text.secondary
             },
             "&:focus-visible": {
-              color: o.palette.text.secondary,
+              color: o.vars.palette.text.secondary,
               border: "1px solid",
-              borderColor: o.palette.state.active12,
-              background: o.palette.state.active12,
+              borderColor: o.vars.palette.state.active12,
+              background: o.vars.palette.state.active12,
               BorderRadius: "2px",
               outline: "none!important"
             },
             "&:hover": {
-              borderColor: o.palette.state.toneOp,
-              background: o.palette.state.hoverDefault
+              borderColor: o.vars.palette.state?.toneOp,
+              background: o.vars.palette.state.hoverDefault
             }
           }
         },
         "& .M4LDynamicFilter-wrapperApplyedFilters": {
           borderLeft: "none",
-          height: "30px",
+          height: "fit-content",
           margin: "0px",
           padding: "0px 4px",
           [o.breakpoints.down("sm")]: {
@@ -136,7 +140,9 @@ const p = (o) => ({
         "& .M4LDynamicFilter-containerApplyedFilters": {
           padding: "2px",
           gap: "4px",
-          height: "100%",
+          height: "fit-content",
+          display: "flex",
+          flexWrap: "wrap",
           [o.breakpoints.down("sm")]: {
             padding: "0px"
           }
@@ -147,17 +153,17 @@ const p = (o) => ({
           display: "flex",
           alignItems: "center",
           borderRadius: "4px",
-          background: o.palette.state.default,
-          color: o.palette.text.secondary,
-          ...o.typography.body,
+          background: o.vars.palette.state.default,
+          color: o.vars.palette.text.secondary,
+          ...o.colorSchemes.finalTheme.typography.body,
           [o.breakpoints.down("sm")]: {
             height: "fit-content"
           },
           "& .css-5ca9fi": {
-            ...o.typography.body
+            ...o.colorSchemes.finalTheme.typography.body
           },
           "& .css-1wytxsy": {
-            ...o.typography.body
+            ...o.colorSchemes.finalTheme.typography.body
           }
         }
       }
@@ -177,16 +183,16 @@ const p = (o) => ({
             paddingRight: "4px",
             borderRadius: "4px",
             "& .M4LDynamicFilter-classespopoverLabelMemuItem": {
-              ...o.typography.body,
-              color: o.palette.text.primary
+              ...o.colorSchemes.finalTheme.typography.body,
+              color: o.vars.palette.text.primary
             },
             "& .M4LDynamicFilter-popoverMenuFieldsItem:hover": {
-              ...o.typography.body,
-              color: o.palette.state.hover,
-              background: o.palette.state.default,
+              ...o.colorSchemes.finalTheme.typography.body,
+              color: o.vars.palette.state.hover,
+              background: o.vars.palette.state.default,
               borderRadius: "4px",
               padding: "4px 12px 4px 8px",
-              boxShadow: o.customShadows.z2
+              boxShadow: o.customShadows?.z2
             }
           },
           [o.breakpoints.down("md")]: {
@@ -206,7 +212,7 @@ const p = (o) => ({
           minWidth: "220px",
           maxWidth: "100%",
           minHeight: "auto",
-          boxShadow: o.customShadows.z3,
+          boxShadow: o.customShadows?.z2,
           "& .M4LPopover-arrowStyle": {
             background: "none"
           },
@@ -217,7 +223,7 @@ const p = (o) => ({
             maxWidth: "420px",
             height: "fit-content",
             "& .M4LDynamicFilter-popoverFilterHeader": {
-              background: o.palette.state.default,
+              background: o.vars.palette.state.default,
               display: "flex",
               gap: "8px",
               padding: "4px 4px 4px 8px",
@@ -229,8 +235,8 @@ const p = (o) => ({
                 "& .M4LIcon-icon": {}
               },
               "& .MuiTypography-root": {
-                ...o.typography.paragraphDens,
-                color: o.palette.text.primary,
+                ...o.colorSchemes.finalTheme.typography.paragraphDens,
+                color: o.vars.palette.text.primary,
                 "& .MuiTypography-root": {}
               }
             },
@@ -269,8 +275,8 @@ const p = (o) => ({
                   "& .M4LIcon-icon": {}
                 },
                 "& .MuiTypography-root": {
-                  ...o.typography.paragraphDens,
-                  color: o.palette.text.primary,
+                  ...o.colorSchemes.finalTheme.typography.paragraphDens,
+                  color: o.vars.palette.text.primary,
                   "& .MuiTypography-root": {}
                 }
               },
@@ -304,7 +310,7 @@ const p = (o) => ({
       }
     }
   }
-}), d = (o) => ({
+}), x = (o) => ({
   M4LIcon: {
     styleOverrides: {
       ["&.M4LIcon-root"]: {
@@ -314,7 +320,7 @@ const p = (o) => ({
         width: "fit-content",
         transition: "transform 0.5s ease-in-out",
         ".M4LIcon-icon": {
-          backgroundColor: o.palette.text.primary
+          backgroundColor: o.vars.palette.text.primary
         },
         ".M4LIcon-sizeExtraSmall": {
           width: "14px",
@@ -348,12 +354,12 @@ const p = (o) => ({
         },
         ".M4LIcon-variantSkeleton": {
           borderRadius: "4px",
-          backgroundColor: o.palette.state?.skeleton.default
+          backgroundColor: o.vars.palette.state?.skeleton.default
         }
       }
     }
   }
-}), l = (o) => ({
+}), g = (o) => ({
   M4LIconButton: {
     styleOverrides: {
       ["&.M4LIconButton-root"]: {
@@ -365,12 +371,12 @@ const p = (o) => ({
         transition: "all .3s ease",
         "& .M4LIcon-root .M4LIcon-icon": {
           transition: "all .3s ease",
-          backgroundColor: o.palette.text.primary
+          backgroundColor: o.vars.palette.text.primary
         },
         "&::before": {
           boxSizing: "content-box",
           border: "1px solid",
-          borderColor: o.palette.state?.focus,
+          borderColor: o.vars.palette.state?.focus,
           borderRadius: "4px",
           position: "absolute",
           transition: "all .3s ease"
@@ -397,24 +403,24 @@ const p = (o) => ({
           padding: "0px"
         },
         "&.M4LIconButton-variantPrimary:not(&.M4LIconButton-isDisabled)": {
-          backgroundColor: o.palette.state?.default,
+          backgroundColor: o.vars.palette.state?.default,
           "&:hover": {
-            backgroundColor: o.palette.state?.hover,
+            backgroundColor: o.vars.palette.state?.hover,
             "& .M4LIcon-icon": {
-              backgroundColor: o.palette.patronus?.marbleLight[10]
+              backgroundColor: o.vars.palette.patronus?.marbleLight[10]
             }
           },
           "&:active": {
-            backgroundColor: o.palette.state?.active,
+            backgroundColor: o.vars.palette.state?.active,
             transition: "background-color .5s ease",
             "& .M4LIcon-icon": {
-              backgroundColor: o.palette.patronus?.marbleLight[10]
+              backgroundColor: o.vars.palette.patronus?.marbleLight[10]
             }
           },
           "&.M4LIconButton-isFocus": {
-            backgroundColor: o.palette.state?.active,
+            backgroundColor: o.vars.palette.state?.active,
             "& .M4LIcon-icon": {
-              backgroundColor: o.palette.patronus?.marbleLight[10]
+              backgroundColor: o.vars.palette.patronus?.marbleLight[10]
             },
             "&::before": {
               content: "''"
@@ -422,29 +428,29 @@ const p = (o) => ({
           }
         },
         "&.M4LIconButton-variantSecondary:not(&.M4LIconButton-isDisabled)": {
-          borderColor: o.palette.state.borderDens,
+          borderColor: o.vars.palette.state.borderDens,
           "& .M4LIcon-icon": {
-            backgroundColor: o.palette.text.primary
+            backgroundColor: o.vars.palette.text.primary
           },
           "&:hover": {
             border: "1px solid",
-            borderColor: o.palette.state?.focus,
+            borderColor: o.vars.palette.state?.focus,
             "& .M4LIcon-icon": {
-              backgroundColor: o.palette.state?.focus
+              backgroundColor: o.vars.palette.state?.focus
             }
           },
           "&:active": {
             border: "1px solid",
-            borderColor: o.palette.state?.active,
+            borderColor: o.vars.palette.state?.active,
             "& .M4LIcon-icon": {
-              backgroundColor: o.palette.state?.active
+              backgroundColor: o.vars.palette.state?.active
             }
           },
           "&.M4LIconButton-isFocus": {
             border: "1px solid",
-            borderColor: o.palette.state?.active,
+            borderColor: o.vars.palette.state?.active,
             "& .M4LIcon-icon": {
-              backgroundColor: o.palette.state?.active
+              backgroundColor: o.vars.palette.state?.active
             },
             "&::before": {
               content: "''"
@@ -453,29 +459,29 @@ const p = (o) => ({
         },
         "&.M4LIconButton-variantLine:not(&.M4LIconButton-isDisabled)": {
           "&:hover": {
-            backgroundColor: o.palette.state?.active12,
+            backgroundColor: o.vars.palette.state?.active12,
             "& .M4LIcon-icon": {
-              backgroundColor: o.palette.state?.focus
+              backgroundColor: o.vars.palette.state?.focus
             }
           },
           "&:active": {
             backgroundColor: "transparent",
             "& .M4LIcon-icon": {
-              backgroundColor: o.palette.state?.active
+              backgroundColor: o.vars.palette.state?.active
             }
           },
           "&.M4LIconButton-isFocus": {
             backgroundColor: "transparent",
             border: "1px solid",
-            borderColor: o.palette.state?.focus,
+            borderColor: o.vars.palette.state?.focus,
             "& .M4LIcon-icon": {
-              backgroundColor: o.palette.state?.active
+              backgroundColor: o.vars.palette.state?.active
             }
           }
         },
         "&.M4LIconButton-isDisabled": {
           "& .M4LIcon-icon": {
-            backgroundColor: o.palette.text.disabled
+            backgroundColor: o.vars.palette.text.disabled
           }
         },
         "&.M4LIconButton-root .MuiSkeleton-root": {
@@ -488,7 +494,7 @@ const p = (o) => ({
       }
     }
   }
-}), s = (o) => ({
+}), u = (o) => ({
   M4LanguagePopover: {
     styleOverrides: {
       ["&.M4LanguagePopover-root"]: {
@@ -509,7 +515,7 @@ const p = (o) => ({
       }
     }
   }
-}), c = (o) => ({
+}), b = (o) => ({
   M4LImageButton: {
     styleOverrides: {
       ["&.M4LImageButton-root"]: {
@@ -545,12 +551,12 @@ const p = (o) => ({
           borderRadius: "4px"
         },
         ".MuiButtonBase-root:hover": {
-          backgroundColor: o.palette.state?.active12
+          backgroundColor: o.vars.palette.state?.active12
         },
         ".MuiButtonBase-root:focus": {
-          backgroundColor: o.palette.state?.active12,
+          backgroundColor: o.vars.palette.state?.active12,
           border: "1px solid",
-          borderColor: o.palette.state?.focus
+          borderColor: o.vars.palette.state?.focus
         },
         [o.breakpoints.down("md")]: {
           ".MuiButtonBase-root": {
@@ -563,7 +569,7 @@ const p = (o) => ({
       }
     }
   }
-}), g = (o) => ({
+}), M = (o) => ({
   M4LImage: {
     styleOverrides: {
       ["&.M4LImage-root"]: {
@@ -574,7 +580,7 @@ const p = (o) => ({
       }
     }
   }
-}), x = (o) => ({
+}), v = (o) => ({
   M4LPopover: {
     styleOverrides: {
       "&.M4LPopover-root": {
@@ -583,10 +589,10 @@ const p = (o) => ({
         width: "100%",
         height: "100%",
         ".MuiPaper-root": {
-          background: o.palette.background.default,
+          background: o.vars.palette.background.default,
           borderRadius: "6px",
           padding: "8px",
-          boxShadow: o.customShadows.z4,
+          boxShadow: o.vars.customShadows.z4,
           width: "auto",
           zIndex: "10000",
           "& .MuiButtonBase-root": {
@@ -609,8 +615,8 @@ const p = (o) => ({
             gap: "4px"
           },
           "& .M4LanguagePopover-labelItem": {
-            ...o.typography.body,
-            color: o.palette.text.secondary,
+            ...o.colorSchemes.finalTheme.typography.body,
+            color: o.vars.palette.text.secondary,
             borderRadius: "4px",
             margin: "0"
           },
@@ -622,14 +628,14 @@ const p = (o) => ({
             justifyContent: "normal !important"
           },
           "& .MuiButtonBase-root:hover": {
-            backgroundColor: o.palette.state?.active12,
+            backgroundColor: o.vars.palette.state?.active12,
             borderRadius: "4px",
             padding: "4px"
           },
           "& .MuiButtonBase-root.Mui-selected": {
-            backgroundColor: o.palette.state?.active12,
+            backgroundColor: o.vars.palette.state?.active12,
             "& .M4LanguagePopover-labelItem": {
-              color: o.palette.state?.active
+              color: o.vars.palette.state?.active
             }
           }
         },
@@ -665,30 +671,30 @@ const p = (o) => ({
       }
     }
   }
-}), u = (o) => ({
+}), L = (o) => ({
   M4LErrorLabel: {
     styleOverrides: {
       ["&.M4LHelperText-root"]: {
         "&.M4LHelperText-variantInfo .MuiTypography-root": {
-          color: o.palette.info.main
+          color: o.vars.palette.info.main
         },
         "&.M4LHelperText-variantSuccess .MuiTypography-root": {
-          color: o.palette.success.main
+          color: o.vars.palette.success.main
         },
         "&.M4LHelperText-variantWarning .MuiTypography-root": {
-          color: o.palette.warning.main
+          color: o.vars.palette.warning.main
         },
         "&.M4LHelperText-variantError .MuiTypography-root": {
-          color: o.palette.error.main
+          color: o.vars.palette.error.main
         }
       }
     }
   }
-}), b = (o) => ({
+}), y = (o) => ({
   M4LTypography: {
     styleOverrides: {
       ["&.M4LTypography-root"]: {
-        color: o.palette.text.primary,
+        color: o.vars.palette.text.primary,
         display: "inline",
         "& .MuiTypography-root": {
           margin: "unset"
@@ -696,7 +702,7 @@ const p = (o) => ({
       }
     }
   }
-}), M = (o) => ({
+}), h = (o) => ({
   M4LButton: {
     styleOverrides: {
       "&.M4LButton-root": {
@@ -704,7 +710,7 @@ const p = (o) => ({
         width: "fit-content",
         display: "flex",
         justifyContent: "center",
-        ...o.typography.action,
+        ...o.colorSchemes.finalTheme.typography.action,
         minHeight: "24px",
         borderRadius: "4px",
         [o.breakpoints.down("md")]: {
@@ -722,7 +728,7 @@ const p = (o) => ({
           transition: "all .5s ease",
           borderRadius: "4px",
           border: "1px solid transparent",
-          ...o.typography.action,
+          ...o.colorSchemes.finalTheme.typography.action,
           backgroundColor: "#fff0",
           height: "100% !important",
           "&:hover, &:focus": {
@@ -738,7 +744,7 @@ const p = (o) => ({
           "&::before": {
             inset: "0",
             border: "1px solid",
-            borderColor: o.palette.state?.focus,
+            borderColor: o.vars.palette.state?.focus,
             borderRadius: "4px",
             transform: "scale(1.07, 1.36)",
             position: "absolute",
@@ -747,41 +753,41 @@ const p = (o) => ({
         },
         "&.M4LButton-isDisabled": {
           "& .MuiButtonBase-root": {
-            color: `${o.palette.text.disabled}!important`,
+            color: `${o.vars.palette.text.disabled}!important`,
             "& .M4LIcon-icon": {
-              backgroundColor: `${o.palette.text.disabled}!important`
+              backgroundColor: `${o.vars.palette.text.disabled}!important`
             }
           },
           "&.M4LButton-variantContained": {
-            color: o.palette.text.disabled,
-            backgroundColor: o.palette.state.default,
+            color: o.vars.palette.text.disabled,
+            backgroundColor: o.vars.palette.state.default,
             border: "1px solid",
-            borderColor: o.palette.state.borderDisable,
+            borderColor: o.vars.palette.state.borderDisable,
             "& .M4LIcon-icon": {
-              backgroundColor: o.palette.text.disabled
+              backgroundColor: o.vars.palette.text.disabled
             },
             "&:hover": {
-              backgroundColor: o.palette.state?.default,
-              color: o.palette.text.disabled,
+              backgroundColor: o.vars.palette.state?.default,
+              color: o.vars.palette.text.disabled,
               "& .M4LIcon-icon": {
-                backgroundColor: o.palette.text.disabled,
-                color: o.palette.text.disabled
+                backgroundColor: o.vars.palette.text.disabled,
+                color: o.vars.palette.text.disabled
               }
             },
             "&:active": {
-              backgroundColor: o.palette.state?.active,
-              color: o.palette.text.primary,
+              backgroundColor: o.vars.palette.state?.active,
+              color: o.vars.palette.text.primary,
               "& .M4LIcon-icon": {
-                backgroundColor: o.palette.text.disabled,
-                color: o.palette.text.disabled
+                backgroundColor: o.vars.palette.text.disabled,
+                color: o.vars.palette.text.disabled
               }
             },
             "&.Mui-focusVisible": {
-              backgroundColor: o.palette.state?.default,
-              color: o.palette.text.disabled,
+              backgroundColor: o.vars.palette.state?.default,
+              color: o.vars.palette.text.disabled,
               "& .M4LIcon-icon": {
-                backgroundColor: o.palette.text.disabled,
-                color: o.palette.text.disabled
+                backgroundColor: o.vars.palette.text.disabled,
+                color: o.vars.palette.text.disabled
               },
               "&::before": {
                 content: "none"
@@ -810,25 +816,25 @@ const p = (o) => ({
           }
         },
         "&.M4LButton-variantContained": {
-          backgroundColor: o.palette.state?.active,
-          color: o.palette.patronus?.marbleLight[10],
+          backgroundColor: o.vars.palette.state?.active,
+          color: o.vars.palette.patronus?.marbleLight[10],
           boxShadow: o.customShadows?.z1,
           position: "relative",
           "& .M4LIcon-icon": {
-            backgroundColor: o.palette.patronus?.marbleLight[10]
+            backgroundColor: o.vars.palette.patronus?.marbleLight[10]
           },
           "&:hover": {
-            backgroundColor: o.palette.state?.hover,
-            color: o.palette.patronus?.marbleLight[10],
+            backgroundColor: o.vars.palette.state?.hover,
+            color: o.vars.palette.patronus?.marbleLight[10],
             "& .M4LIcon-icon": {
-              backgroundColor: o.palette.patronus?.marbleLight[10]
+              backgroundColor: o.vars.palette.patronus?.marbleLight[10]
             }
           },
           "&.Mui-focusVisible": {
-            backgroundColor: o.palette.state?.active,
-            color: o.palette.patronus?.marbleLight[10],
+            backgroundColor: o.vars.palette.state?.active,
+            color: o.vars.palette.patronus?.marbleLight[10],
             "& .M4LIcon-icon": {
-              backgroundColor: o.palette.patronus?.marbleLight[10]
+              backgroundColor: o.vars.palette.patronus?.marbleLight[10]
             },
             "&::before": {
               content: "''"
@@ -838,33 +844,33 @@ const p = (o) => ({
         "&.M4LButton-variantOutlined": {
           "& .MuiButtonBase-root": {
             border: "1px solid",
-            borderColor: o.palette.state.borderDens,
-            color: o.palette.text.primary,
+            borderColor: o.vars.palette.state.borderDens,
+            color: o.vars.palette.text.primary,
             "& .M4LIcon-icon": {
-              backgroundColor: o.palette.text.primary
+              backgroundColor: o.vars.palette.text.primary
             },
             "&:hover": {
-              borderColor: o.palette.state?.hover,
-              color: o.palette.state?.hover,
-              backgroundColor: o.palette.state?.active12,
+              borderColor: o.vars.palette.state?.hover,
+              color: o.vars.palette.state?.hover,
+              backgroundColor: o.vars.palette.state?.active12,
               "& .M4LIcon-icon": {
-                backgroundColor: o.palette.state?.hover
+                backgroundColor: o.vars.palette.state?.hover
               }
             },
             "&:active": {
-              borderColor: o.palette.state?.active,
-              color: o.palette.state?.active,
+              borderColor: o.vars.palette.state?.active,
+              color: o.vars.palette.state?.active,
               backgroundColor: "transparent",
               "& .M4LIcon-icon": {
-                backgroundColor: o.palette.state?.active
+                backgroundColor: o.vars.palette.state?.active
               }
             },
             "&.Mui-focusVisible": {
-              borderColor: o.palette.state?.active,
-              color: o.palette.state?.active,
+              borderColor: o.vars.palette.state?.active,
+              color: o.vars.palette.state?.active,
               backgroundColor: "transparent",
               "& .M4LIcon-icon": {
-                backgroundColor: o.palette.state?.active
+                backgroundColor: o.vars.palette.state?.active
               },
               "&::before": {
                 content: "''"
@@ -874,29 +880,29 @@ const p = (o) => ({
         },
         "&.M4LButton-variantText": {
           "& .MuiButtonBase-root": {
-            color: o.palette.text.primary,
+            color: o.vars.palette.text.primary,
             "& .M4LIcon-icon": {
-              backgroundColor: o.palette.text.primary
+              backgroundColor: o.vars.palette.text.primary
             },
             "&:hover": {
-              backgroundColor: o.palette.state?.active12,
-              color: o.palette.state?.hover,
+              backgroundColor: o.vars.palette.state?.active12,
+              color: o.vars.palette.state?.hover,
               "& .M4LIcon-icon": {
-                backgroundColor: o.palette.state?.hover
+                backgroundColor: o.vars.palette.state?.hover
               }
             },
             "&:active": {
               backgroundColor: "transparent",
-              color: o.palette.state?.active,
+              color: o.vars.palette.state?.active,
               "& .M4LIcon-icon": {
-                backgroundColor: o.palette.state?.active
+                backgroundColor: o.vars.palette.state?.active
               }
             },
             "&.Mui-focusVisible": {
               backgroundColor: "transparent",
-              color: o.palette.state?.active,
+              color: o.vars.palette.state?.active,
               "& .M4LIcon-icon": {
-                backgroundColor: o.palette.state?.active
+                backgroundColor: o.vars.palette.state?.active
               },
               "&:before": {
                 content: "''"
@@ -905,21 +911,21 @@ const p = (o) => ({
           }
         },
         "&.M4LButton-colorError": {
-          backgroundColor: `${o.palette.state.error.normal}`,
+          backgroundColor: `${o.vars.palette.state.error.normal}`,
           "&:hover": {
-            backgroundColor: `${o.palette.state.error.hover}`
+            backgroundColor: `${o.vars.palette.state.error.hover}`
           }
         },
         "&.M4LButton-colorWarning": {
-          backgroundColor: `${o.palette.state.warning.normal}`,
+          backgroundColor: `${o.vars.palette.state.warning.normal}`,
           "&:hover": {
-            backgroundColor: `${o.palette.state.warning.hover}`
+            backgroundColor: `${o.vars.palette.state.warning.hover}`
           }
         },
         "&.M4LButton-colorSuccess": {
-          backgroundColor: `${o.palette.state.success.normal}`,
+          backgroundColor: `${o.vars.palette.state.success.normal}`,
           "&:hover": {
-            backgroundColor: `${o.palette.state.success.hover}`
+            backgroundColor: `${o.vars.palette.state.success.hover}`
           }
         },
         "&.M4LButton-togglePressed .MuiButtonBase-root": {
@@ -929,18 +935,18 @@ const p = (o) => ({
       }
     }
   }
-}), L = (o) => ({
+}), f = (o) => ({
   M4LNavLink: {
     styleOverrides: {
       ["&.M4LNavLink-root"]: {
         "& .M4LTypography-root": {
-          color: o.palette.state.active
+          color: o.vars.palette.state.active
         },
         "&: hover": {
           "& .M4LTypography-root": {
-            color: o.palette.state?.hover,
+            color: o.vars.palette.state?.hover,
             textDecoration: "underline",
-            textDecorationColor: o.palette.state?.hover
+            textDecorationColor: o.vars.palette.state?.hover
           }
         },
         "& > a": {
@@ -949,7 +955,7 @@ const p = (o) => ({
       }
     }
   }
-}), y = (o) => ({
+}), w = (o) => ({
   M4LSideBar: {
     styleOverrides: {
       "&.M4LSideBar-root": {
@@ -968,7 +974,7 @@ const p = (o) => ({
               display: "flex",
               width: "100%",
               height: "100%",
-              boxShadow: o.customShadows.z2,
+              boxShadow: o.vars.customShadows?.z2,
               transition: "all 0.3s",
               "& .M4LSideBar-containerContentGroupsFooter": {
                 flexGrow: "1",
@@ -977,32 +983,24 @@ const p = (o) => ({
                 height: "100%",
                 position: "relative",
                 borderRight: "1px solid",
-                borderColor: o.palette.state.borderPrimary,
-                backgroundColor: o.palette.background.default,
+                borderColor: o.vars.palette.state.borderPrimary,
+                backgroundColor: o.vars.palette.background.default,
                 "& .M4LSideBar-contentGroups": {
+                  padding: "32px 12px",
                   "& .M4LSideBar-wrapperGroup": {
-                    overflow: "hidden",
-                    padding: "10px",
-                    borderTop: "unset",
+                    overflow: "visible",
+                    padding: "8px",
+                    borderTop: "1px solid",
                     borderBottom: "1px solid",
-                    borderColor: o.palette.state.borderSecondary,
-                    height: "100%",
+                    borderColor: o.vars.palette.state.borderSecondary,
+                    height: "fit-content",
                     width: "100%",
-                    flex: "1",
-                    "& .M4LSideBar-itemListMainRootContainer": {
-                      display: "flex",
-                      flexDirection: "column",
-                      width: "100%",
-                      height: "auto",
-                      overflow: "hidden"
-                    },
                     "& .M4LSideBar-navItemRootContent": {
                       overflow: "hidden",
                       height: "36px",
                       padding: "0px 8px",
                       display: "flex",
-                      alignItems: "center",
-                      position: "relative"
+                      alignItems: "center"
                     }
                   }
                 },
@@ -1010,7 +1008,7 @@ const p = (o) => ({
                   display: "flex",
                   padding: "10px 5px",
                   borderTop: "1px solid",
-                  borderColor: o.palette.state.borderDisable,
+                  borderColor: o.vars.palette.state.borderDisable,
                   justifyContent: "center",
                   gap: "24px",
                   alignItems: "center",
@@ -1039,7 +1037,7 @@ const p = (o) => ({
       },
       "&.M4LSideBar-root.M4LSideBar-variantDefault": {
         height: "100%",
-        background: o.palette.background.default,
+        background: o.vars.palette.background.default,
         position: "relative",
         "& .M4LIconButton-sizeSmall": {
           width: "20px",
@@ -1063,9 +1061,9 @@ const p = (o) => ({
           top: "16px",
           right: "-8px",
           borderRadius: "4px",
-          backgroundColor: `${o.palette.background.default}!important`,
+          backgroundColor: `${o.vars.palette.background.default}!important`,
           transition: "all 0.3s",
-          boxShadow: o.customShadows.z1,
+          boxShadow: o.vars.customShadows.z1,
           zIndex: "1"
         },
         "&:not(.M4LSideBar-collapsed) .M4LSideBar-collapseButton": {
@@ -1075,7 +1073,7 @@ const p = (o) => ({
         "& .M4LSideBar-subItemActive": {
           padding: "0px",
           "& .M4LIcon-icon": {
-            backgroundColor: `${o.palette.state.focus}!important`
+            backgroundColor: `${o.vars.palette.state.focus}!important`
           }
         },
         "&.M4LSideBar-collapsed": {
@@ -1166,7 +1164,7 @@ const p = (o) => ({
                     overflow: "hidden",
                     textOverflow: "ellipsis",
                     textWrap: "nowrap",
-                    ...o.typography.paragraphDens,
+                    ...o.colorSchemes.finalTheme.typography.paragraphDens,
                     textTransform: "capitalize",
                     fontWeight: "700"
                   }
@@ -1184,7 +1182,7 @@ const p = (o) => ({
                   backgroundColor: "transparent",
                   borderRadius: "4px",
                   "&:hover": {
-                    background: o.palette.state.default,
+                    background: o.vars.palette.state.default,
                     cursor: "pointer"
                   }
                 },
@@ -1192,12 +1190,15 @@ const p = (o) => ({
                   borderRadius: "4px",
                   height: "auto",
                   "& .M4LSideBar-navItemMainRoot": {
-                    background: o.palette.state.active12,
+                    background: o.vars.palette.state.active12,
                     border: "1px solid",
-                    borderColor: o.palette.state.active12,
+                    borderColor: o.vars.palette.state.active12,
                     boxShadow: o.shadows[1],
                     "&:hover": {
-                      background: t(o.palette.state.active || "#fff", 0.24),
+                      background: t(
+                        o.colorSchemes.finalTheme.palette.state.active || "#fff",
+                        0.24
+                      ),
                       cursor: "pointer"
                     }
                   },
@@ -1205,32 +1206,32 @@ const p = (o) => ({
                     "& .M4LSideBar-navItemRootContentIconTypo": {
                       alignItems: "center",
                       "& .M4LIcon-icon": {
-                        backgroundColor: o.palette.state.focus
+                        backgroundColor: o.vars.palette.state.focus
                       },
                       "& .M4LTypography-root": {
                         "& .MuiTypography-root": {
-                          color: o.palette.state.focus
+                          color: o.vars.palette.state.focus
                         }
                       },
                       "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
-                        backgroundColor: o.palette.state.focus
+                        backgroundColor: o.vars.palette.state.focus
                       }
                     },
                     "& .M4LSideBar-arrowIconRoot": {
                       "& .M4LIcon-root": {
                         "& .M4LIcon-icon": {
-                          backgroundColor: o.palette.state.focus
+                          backgroundColor: o.vars.palette.state.focus
                         }
                       }
                     },
                     "&::before": {
                       content: '""',
                       width: "3px",
-                      height: "100%",
-                      top: "0",
-                      bottom: "0",
-                      right: "0px",
-                      backgroundColor: o.palette.state.focus,
+                      height: "50%",
+                      top: "25%",
+                      bottom: "25%",
+                      left: "0px",
+                      backgroundColor: o.vars.palette.state.focus,
                       borderRadius: "0px 4px 4px 0px",
                       position: "absolute"
                     }
@@ -1246,7 +1247,7 @@ const p = (o) => ({
                     gap: "8px",
                     width: "100%",
                     "& .M4LIcon-icon": {
-                      backgroundColor: o.palette.text.secondary,
+                      backgroundColor: o.vars.palette.text.secondary,
                       width: "18px",
                       height: "18px"
                     },
@@ -1255,8 +1256,8 @@ const p = (o) => ({
                       flexGrow: "1",
                       overflow: "hidden",
                       "& .MuiTypography-root": {
-                        ...o.typography.paragraph,
-                        color: o.palette.text.primary,
+                        ...o.colorSchemes.finalTheme.typography.paragraph,
+                        color: o.vars.palette.text.primary,
                         textWrap: "nowrap",
                         textOverflow: "ellipsis",
                         display: "block",
@@ -1264,13 +1265,13 @@ const p = (o) => ({
                       }
                     },
                     "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
-                      backgroundColor: o.palette.text.primary
+                      backgroundColor: o.vars.palette.text.primary
                     }
                   },
                   "& .M4LSideBar-arrowIconRoot": {
                     "& .M4LIcon-root": {
                       "& .M4LIcon-icon": {
-                        background: o.palette.text.primary
+                        background: o.vars.palette.text.primary
                       }
                     }
                   }
@@ -1288,15 +1289,15 @@ const p = (o) => ({
                     borderRadius: "4px",
                     gap: "8px",
                     "&.M4LSideBar-subItemCollapseActive": {
-                      backgroundColor: o.palette.state.active12,
+                      backgroundColor: o.vars.palette.state.active12,
                       gap: "8px",
                       border: "1px solid",
-                      borderColor: o.palette.state.active12,
+                      borderColor: o.vars.palette.state.active12,
                       "& .MuiButtonBase-root": {
                         padding: "0px",
                         "& .M4LIcon-root": {
                           "& .M4LIcon-icon": {
-                            backgroundColor: o.palette.state.focus
+                            backgroundColor: o.vars.palette.state.focus
                           }
                         }
                       }
@@ -1314,12 +1315,12 @@ const p = (o) => ({
                       "& .M4LSideBar-navSubItemContentBullet": {
                         height: "14px",
                         borderRadius: "4px",
-                        backgroundColor: o.palette.state.focus,
+                        backgroundColor: o.vars.palette.state.focus,
                         gap: "8px"
                       }
                     },
                     "&:hover": {
-                      background: o.palette.state.default,
+                      background: o.vars.palette.state.default,
                       padding: "0 8px"
                     }
                   },
@@ -1330,14 +1331,14 @@ const p = (o) => ({
                       minWidth: "5px",
                       minHeight: "5px",
                       borderRadius: "50%",
-                      backgroundColor: o.palette.text.primary
+                      backgroundColor: o.vars.palette.text.primary
                     },
                     "& .M4LTypography-root": {
                       display: "flex",
                       width: "100%",
                       "& .MuiTypography-root": {
-                        ...o.typography.paragraph,
-                        color: o.palette.text.primary,
+                        ...o.colorSchemes.finalTheme.typography.paragraph,
+                        color: o.vars.palette.text.primary,
                         with: "100%",
                         overflow: "hidden",
                         textOverflow: "ellipsis",
@@ -1346,9 +1347,9 @@ const p = (o) => ({
                     },
                     "&.M4LSideBar-subItemActive.M4LSideBar-navSubItemContentRoot": {
                       "& .M4LTypography-root": {
-                        color: o.palette.state.focus,
+                        color: o.vars.palette.state.focus,
                         "& .MuiTypography-root": {
-                          color: o.palette.state.focus
+                          color: o.vars.palette.state.focus
                         }
                       }
                     }
@@ -1360,7 +1361,7 @@ const p = (o) => ({
               }
             },
             "& .M4LIcon-root .M4LIcon-icon": {
-              backgroundColor: o.palette.text.primary
+              backgroundColor: o.vars.palette.text.primary
             }
           },
           "& .M4LSideBar-footer": {
@@ -1379,7 +1380,7 @@ const p = (o) => ({
       "&.M4LSideBar-root.M4LSideBar-variantComercial": {
         "& .M4LSideBar-subItemActive": {
           "& .M4LIcon-icon": {
-            backgroundColor: `${o.palette.state.focus}!important`
+            backgroundColor: `${o.vars.palette.state.focus}!important`
           }
         },
         "&.M4LSideBar-collapsed": {
@@ -1479,40 +1480,43 @@ const p = (o) => ({
                   backgroundColor: "transparent",
                   borderRadius: "4px",
                   "&:hover": {
-                    background: o.palette.state.default,
+                    background: o.vars.palette.state.default,
                     cursor: "pointer"
                   }
                 },
                 "&.M4LSideBar-itemMainActive": {
-                  background: o.palette.state.active12,
+                  background: o.vars.palette.state.active12,
                   borderRadius: "4px",
                   border: "1px solid",
-                  borderColor: o.palette.state.borderDisable,
+                  borderColor: o.vars.palette.state.borderDisable,
                   "& .M4LSideBar-navItemMainRoot": {
-                    background: o.palette.state.active12,
+                    background: o.vars.palette.state.active12,
                     "&:hover": {
-                      background: t(o.palette.state.active || "#fff", 0.24),
+                      background: t(
+                        o.colorSchemes.finalTheme.palette.state.active || "#fff",
+                        0.24
+                      ),
                       cursor: "pointer"
                     }
                   },
                   "& .M4LSideBar-navItemRootContent": {
                     "& .M4LSideBar-navItemRootContentIconTypo": {
                       "& .M4LIcon-icon": {
-                        backgroundColor: o.palette.state.focus
+                        backgroundColor: o.vars.palette.state.focus
                       },
                       "& .M4LTypography-root": {
                         "& .MuiTypography-root": {
-                          color: o.palette.state.focus
+                          color: o.vars.palette.state.focus
                         }
                       },
                       "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
-                        backgroundColor: o.palette.state.focus
+                        backgroundColor: o.vars.palette.state.focus
                       }
                     },
                     "& .M4LSideBar-arrowIconRoot": {
                       "& .M4LIcon-root": {
                         "& .M4LIcon-icon": {
-                          backgroundColor: o.palette.state.focus
+                          backgroundColor: o.vars.palette.state.focus
                         }
                       }
                     },
@@ -1522,7 +1526,7 @@ const p = (o) => ({
                       top: "0px",
                       bottom: "0px",
                       right: "0px",
-                      backgroundColor: o.palette.state.focus,
+                      backgroundColor: o.vars.palette.state.focus,
                       borderRadius: "4px 0px 0px 4px",
                       position: "absolute"
                     }
@@ -1539,7 +1543,7 @@ const p = (o) => ({
                     gap: "8px",
                     width: "100%",
                     "& .M4LIcon-icon": {
-                      backgroundColor: o.palette.text.primary,
+                      backgroundColor: o.vars.palette.text.primary,
                       width: "18px",
                       height: "18px"
                     },
@@ -1548,8 +1552,8 @@ const p = (o) => ({
                       flexGrow: "1",
                       overflow: "hidden",
                       "& .MuiTypography-root": {
-                        ...o.typography.paragraph,
-                        color: o.palette.text.primary,
+                        ...o.colorSchemes.finalTheme.typography.paragraph,
+                        color: o.vars.palette.text.primary,
                         textWrap: "nowrap",
                         textOverflow: "ellipsis",
                         display: "block",
@@ -1557,13 +1561,13 @@ const p = (o) => ({
                       }
                     },
                     "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
-                      backgroundColor: o.palette.text.primary
+                      backgroundColor: o.vars.palette.text.primary
                     }
                   },
                   "& .M4LSideBar-arrowIconRoot": {
                     "& .M4LIcon-root": {
                       "& .M4LIcon-icon": {
-                        background: o.palette.text.primary
+                        background: o.vars.palette.text.primary
                       }
                     }
                   }
@@ -1580,14 +1584,14 @@ const p = (o) => ({
                     borderRadius: "4px",
                     gap: "8px",
                     "&.M4LSideBar-subItemCollapseActive": {
-                      backgroundColor: o.palette.state.active12,
+                      backgroundColor: o.vars.palette.state.active12,
                       gap: "8px",
                       "& .MuiButtonBase-root": {
                         paddingLeft: "0",
                         padding: "0px",
                         "& .M4LIcon-root": {
                           "& .M4LIcon-icon": {
-                            backgroundColor: o.palette.state.focus
+                            backgroundColor: o.vars.palette.state.focus
                           }
                         }
                       }
@@ -1598,20 +1602,20 @@ const p = (o) => ({
                         padding: "0px",
                         "& .M4LIcon-root": {
                           "& .M4LIcon-icon": {
-                            backgroundColor: `${o.palette.state.focus}!important`
+                            backgroundColor: `${o.vars.palette.state.focus}!important`
                           }
                         }
                       },
                       "& .M4LSideBar-navSubItemContentBullet": {
                         height: "14px",
                         borderRadius: "4px",
-                        backgroundColor: o.palette.state.focus,
+                        backgroundColor: o.vars.palette.state.focus,
                         gap: "8px"
                       }
                     },
                     "&:hover": {
                       padding: "0 8px",
-                      background: o.palette.state.default
+                      background: o.vars.palette.state.default
                     }
                   },
                   "& .M4LSideBar-navSubItemContentRoot": {
@@ -1622,14 +1626,14 @@ const p = (o) => ({
                       minWidth: "5px",
                       minHeight: "5px",
                       borderRadius: "50%",
-                      backgroundColor: o.palette.text.primary
+                      backgroundColor: o.vars.palette.text.primary
                     },
                     "& .M4LTypography-root": {
                       display: "flex",
                       width: "100%",
                       "& .MuiTypography-root": {
-                        ...o.typography.paragraph,
-                        color: o.palette.text.primary,
+                        ...o.colorSchemes.finalTheme.typography.paragraph,
+                        color: o.vars.palette.text.primary,
                         with: "100%",
                         overflow: "hidden",
                         textOverflow: "ellipsis",
@@ -1644,7 +1648,7 @@ const p = (o) => ({
               }
             },
             "& .M4LIcon-root .M4LIcon-icon": {
-              backgroundColor: o.palette.text.primary
+              backgroundColor: o.vars.palette.text.primary
             }
           },
           "& .M4LSideBar-footer": {
@@ -1671,7 +1675,7 @@ const p = (o) => ({
       "&.M4LSideBar-popover.M4LSideBar-variantDefault": {
         "& .M4LSideBar-subItemActive": {
           "& .M4LIcon-icon": {
-            backgroundColor: `${o.palette.state.focus}!important`
+            backgroundColor: `${o.vars.palette.state.focus}!important`
           }
         },
         "& .M4LSideBar-navListSubItemRoot": {
@@ -1683,14 +1687,14 @@ const p = (o) => ({
             height: "fit-content",
             borderRadius: "4px",
             "&.M4LSideBar-subItemCollapseActive": {
-              backgroundColor: o.palette.state.active12
+              backgroundColor: o.vars.palette.state.active12
             },
             "& .M4LTypography-root": {
               display: "flex",
               width: "100%",
               "& .MuiTypography-root": {
-                ...o.typography.paragraph,
-                color: o.palette.text.secondary,
+                ...o.colorSchemes.finalTheme.typography.paragraph,
+                color: o.vars.palette.text.secondary,
                 with: "100%",
                 overflow: "hidden",
                 textOverflow: "ellipsis",
@@ -1704,7 +1708,7 @@ const p = (o) => ({
                     padding: "0px",
                     "& .M4LIcon-root": {
                       "& .M4LIcon-icon": {
-                        backgroundColor: o.palette.state.focus
+                        backgroundColor: o.vars.palette.state.focus
                       }
                     }
                   }
@@ -1717,25 +1721,25 @@ const p = (o) => ({
                 padding: "0px",
                 "& .M4LIcon-root": {
                   "& .M4LIcon-icon": {
-                    backgroundColor: `${o.palette.state.focus}!important`
+                    backgroundColor: `${o.vars.palette.state.focus}!important`
                   }
                 }
               },
               "& .M4LSideBar-navSubItemContentBullet": {
                 height: "14px",
                 borderRadius: "10px",
-                backgroundColor: o.palette.state.focus
+                backgroundColor: o.vars.palette.state.focus
               }
             },
             "& .M4LSideBar-navSubItemContentBullet": {
               minWidth: "5px",
               minHeight: "5px",
               borderRadius: "50%",
-              backgroundColor: o.palette.text.primary
+              backgroundColor: o.vars.palette.text.primary
             },
             "&:hover": {
               padding: "0 8px",
-              background: o.palette.state.default
+              background: o.vars.palette.state.default
             }
           }
         }
@@ -1743,7 +1747,7 @@ const p = (o) => ({
       "&.M4LSideBar-popover.M4LSideBar-variantComercial": {
         "& .M4LSideBar-subItemActive": {
           "& .M4LIcon-icon": {
-            backgroundColor: `${o.palette.state.focus}!important`
+            backgroundColor: `${o.vars.palette.state.focus}!important`
           }
         },
         "& .M4LSideBar-navListSubItemRoot": {
@@ -1755,15 +1759,15 @@ const p = (o) => ({
             height: "fit-content",
             borderRadius: "4px",
             "&.M4LSideBar-subItemCollapseActive": {
-              backgroundColor: o.palette.state.active12,
+              backgroundColor: o.vars.palette.state.active12,
               Text: "iufbivecf"
             },
             "& .M4LTypography-root": {
               display: "flex",
               width: "100%",
               "& .MuiTypography-root": {
-                ...o.typography.paragraph,
-                color: o.palette.text.secondary,
+                ...o.colorSchemes.finalTheme.typography.paragraph,
+                color: o.vars.palette.text.secondary,
                 with: "100%",
                 overflow: "hidden",
                 textOverflow: "ellipsis",
@@ -1777,7 +1781,7 @@ const p = (o) => ({
                     padding: "0px",
                     "& .M4LIcon-root": {
                       "& .M4LIcon-icon": {
-                        backgroundColor: o.palette.state.focus
+                        backgroundColor: o.vars.palette.state.focus
                       }
                     }
                   }
@@ -1790,25 +1794,25 @@ const p = (o) => ({
                 padding: "0px",
                 "& .M4LIcon-root": {
                   "& .M4LIcon-icon": {
-                    backgroundColor: `${o.palette.state.focus}!important`
+                    backgroundColor: `${o.vars.palette.state.focus}!important`
                   }
                 }
               },
               "& .M4LSideBar-navSubItemContentBullet": {
                 height: "14px",
                 borderRadius: "10px",
-                backgroundColor: o.palette.state.focus
+                backgroundColor: o.vars.palette.state.focus
               }
             },
             "& .M4LSideBar-navSubItemContentBullet": {
               minWidth: "5px",
               minHeight: "5px",
               borderRadius: "50%",
-              backgroundColor: o.palette.text.primary
+              backgroundColor: o.vars.palette.text.primary
             },
             "&:hover": {
               padding: "0 8px",
-              background: o.palette.state.default
+              background: o.vars.palette.state.default
             }
           }
         }
@@ -1821,11 +1825,11 @@ const p = (o) => ({
         "&.M4LSideBar-variantDefault": {
           "& .M4LSideBar-subItemActive": {
             "& .M4LIcon-icon": {
-              backgroundColor: `${o.palette.state.focus}!important`
+              backgroundColor: `${o.vars.palette.state.focus}!important`
             },
             "& .M4LTypography-root": {
               "& .MuiTypography-root": {
-                color: `${o.palette.state.focus}!important`
+                color: `${o.vars.palette.state.focus}!important`
               }
             }
           },
@@ -1861,8 +1865,8 @@ const p = (o) => ({
                 },
                 "& .M4LImage-root": {
                   position: "relative",
-                  background: o.palette.background.default,
-                  boxShadow: o.customShadows.z2,
+                  background: o.vars.palette.background.default,
+                  boxShadow: o.vars.customShadows?.z2,
                   padding: "6px",
                   borderRadius: "6px",
                   minWidth: "50px !important",
@@ -1895,7 +1899,7 @@ const p = (o) => ({
                       overflow: "hidden",
                       textOverflow: "ellipsis",
                       textWrap: "nowrap",
-                      ...o.typography.paragraphDens,
+                      ...o.colorSchemes.finalTheme.typography.paragraphDens,
                       textTransform: "capitalize"
                     }
                   }
@@ -1905,25 +1909,29 @@ const p = (o) => ({
                   borderRadius: "4px 0px 0px 4px",
                   justifyContent: "flex-start",
                   flexDirection: "column",
-                  marginBottom: "4px",
+                  paddingBottom: "4px",
                   gap: "0px",
                   height: "auto",
                   "& .M4LSideBar-navItemMainRoot": {
                     backgroundColor: "transparent",
                     borderRadius: "4px",
                     "&:hover": {
-                      background: o.palette.state.default,
+                      background: o.vars.palette.state.default,
                       cursor: "pointer"
                     }
                   },
                   "&.M4LSideBar-itemMainActive": {
                     borderRadius: "4px",
-                    background: o.palette.state.active12,
+                    background: o.vars.palette.state.active12,
                     border: "1px solid",
-                    borderColor: o.palette.state.active12,
+                    borderColor: o.vars.palette.state.active12,
                     "& .M4LSideBar-navItemMainRoot": {
+                      background: o.vars.palette.state.active,
                       "&:hover": {
-                        background: t(o.palette.state.active || "#fff", 0.24),
+                        background: t(
+                          o.colorSchemes.finalTheme.palette.state.active || "#fff",
+                          0.24
+                        ),
                         cursor: "pointer"
                       }
                     },
@@ -1931,21 +1939,21 @@ const p = (o) => ({
                       "& .M4LSideBar-navItemRootContentIconTypo": {
                         alignItems: "center",
                         "& .M4LIcon-icon": {
-                          backgroundColor: o.palette.state.focus
+                          backgroundColor: o.vars.palette.state.focus
                         },
                         "& .M4LTypography-root": {
                           "& .MuiTypography-root": {
-                            color: o.palette.state.focus
+                            color: o.vars.palette.state.focus
                           }
                         },
                         "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
-                          backgroundColor: o.palette.state.focus
+                          backgroundColor: o.vars.palette.state.focus
                         }
                       },
                       "& .M4LSideBar-arrowIconRoot": {
                         "& .M4LIcon-root": {
                           "& .M4LIcon-icon": {
-                            backgroundColor: o.palette.state.focus
+                            backgroundColor: o.vars.palette.state.focus
                           }
                         }
                       },
@@ -1955,7 +1963,7 @@ const p = (o) => ({
                         top: "0px",
                         bottom: "0px",
                         left: "0px",
-                        backgroundColor: o.palette.state.focus,
+                        backgroundColor: o.vars.palette.state.focus,
                         borderRadius: "4px 0px 0px 4px",
                         position: "absolute"
                       }
@@ -1972,7 +1980,7 @@ const p = (o) => ({
                       gap: "8px",
                       width: "100%",
                       "& .M4LIcon-icon": {
-                        backgroundColor: o.palette.text.primary,
+                        backgroundColor: o.vars.palette.text.primary,
                         width: "18px",
                         height: "18px"
                       },
@@ -1981,8 +1989,8 @@ const p = (o) => ({
                         flexGrow: "1",
                         overflow: "hidden",
                         "& .MuiTypography-root": {
-                          ...o.typography.paragraph,
-                          color: o.palette.text.primary,
+                          ...o.colorSchemes.finalTheme.typography.paragraph,
+                          color: o.vars.palette.text.primary,
                           textWrap: "nowrap",
                           textOverflow: "ellipsis",
                           display: "block",
@@ -1990,13 +1998,13 @@ const p = (o) => ({
                         }
                       },
                       "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
-                        backgroundColor: o.palette.text.primary
+                        backgroundColor: o.vars.palette.text.primary
                       }
                     },
                     "& .M4LSideBar-arrowIconRoot": {
                       "& .M4LIcon-root": {
                         "& .M4LIcon-icon": {
-                          background: o.palette.text.primary
+                          background: o.vars.palette.text.primary
                         }
                       }
                     }
@@ -2014,14 +2022,14 @@ const p = (o) => ({
                       gap: "8px",
                       padding: "0px",
                       "&.M4LSideBar-subItemCollapseActive": {
-                        backgroundColor: o.palette.state.active12,
+                        backgroundColor: o.vars.palette.state.active12,
                         gap: "8px",
                         padding: "0px",
                         "& .MuiButtonBase-root": {
                           padding: "0px",
                           "& .M4LIcon-root": {
                             "& .M4LIcon-icon": {
-                              backgroundColor: o.palette.state.focus
+                              backgroundColor: o.vars.palette.state.focus
                             }
                           }
                         }
@@ -2031,20 +2039,20 @@ const p = (o) => ({
                           padding: "0px",
                           "& .M4LIcon-root": {
                             "& .M4LIcon-icon": {
-                              backgroundColor: `${o.palette.state.focus}!important`
+                              backgroundColor: `${o.vars.palette.state.focus}!important`
                             }
                           }
                         },
                         "& .M4LSideBar-navSubItemContentBullet": {
                           height: "14px",
                           borderRadius: "4px",
-                          backgroundColor: o.palette.state.focus,
+                          backgroundColor: o.vars.palette.state.focus,
                           gap: "8px"
                         }
                       },
                       "&:hover": {
                         padding: "0 8px",
-                        background: o.palette.state.default
+                        background: o.vars.palette.state.default
                       }
                     },
                     "& .M4LSideBar-navSubItemContentRoot": {
@@ -2063,14 +2071,14 @@ const p = (o) => ({
                         minWidth: "5px",
                         minHeight: "5px",
                         borderRadius: "50%",
-                        backgroundColor: o.palette.text.primary
+                        backgroundColor: o.vars.palette.text.primary
                       },
                       "& .M4LTypography-root": {
                         display: "flex",
                         width: "100%",
                         "& .MuiTypography-root": {
-                          ...o.typography.paragraph,
-                          color: o.palette.text.primary,
+                          ...o.colorSchemes.finalTheme.typography.paragraph,
+                          color: o.vars.palette.text.primary,
                           with: "100%",
                           overflow: "hidden",
                           textOverflow: "ellipsis",
@@ -2085,7 +2093,7 @@ const p = (o) => ({
                 }
               },
               "& .M4LIcon-root .M4LIcon-icon": {
-                backgroundColor: o.palette.text.primary
+                backgroundColor: o.vars.palette.text.primary
               }
             },
             "& .M4LSideBar-footer": {
@@ -2184,19 +2192,22 @@ const p = (o) => ({
                     backgroundColor: "transparent",
                     borderRadius: "4px",
                     "&:hover": {
-                      background: o.palette.state.default,
+                      background: o.vars.palette.state.default,
                       cursor: "pointer"
                     }
                   },
                   "&.M4LSideBar-itemMainActive": {
                     borderRadius: "4px",
-                    background: o.palette.state.active12,
+                    background: o.vars.palette.state.active12,
                     border: "1px solid",
-                    borderColor: o.palette.state.active12,
+                    borderColor: o.vars.palette.state.active12,
                     "& .M4LSideBar-navItemMainRoot": {
-                      background: o.palette.state.active12,
+                      background: o.vars.palette.state.active12,
                       "&:hover": {
-                        background: t(o.palette.state.active || "#fff", 0.24),
+                        background: t(
+                          o.colorSchemes.finalTheme.palette.state.active || "#fff",
+                          0.24
+                        ),
                         cursor: "pointer"
                       }
                     },
@@ -2204,21 +2215,21 @@ const p = (o) => ({
                       "& .M4LSideBar-navItemRootContentIconTypo": {
                         fontSize: "14px !important",
                         "& .M4LIcon-icon": {
-                          backgroundColor: o.palette.state.focus
+                          backgroundColor: o.vars.palette.state.focus
                         },
                         "& .M4LTypography-root": {
                           "& .MuiTypography-root": {
-                            color: o.palette.state.focus
+                            color: o.vars.palette.state.focus
                           }
                         },
                         "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
-                          backgroundColor: o.palette.state.focus
+                          backgroundColor: o.vars.palette.state.focus
                         }
                       },
                       "& .M4LSideBar-arrowIconRoot": {
                         "& .M4LIcon-root": {
                           "& .M4LIcon-icon": {
-                            backgroundColor: o.palette.state.focus
+                            backgroundColor: o.vars.palette.state.focus
                           }
                         }
                       },
@@ -2228,7 +2239,7 @@ const p = (o) => ({
                         top: "0px",
                         bottom: "0px",
                         right: "0px",
-                        backgroundColor: o.palette.state.focus,
+                        backgroundColor: o.vars.palette.state.focus,
                         borderRadius: "4px 0px 0px 4px",
                         position: "absolute"
                       }
@@ -2245,7 +2256,7 @@ const p = (o) => ({
                       gap: "8px",
                       width: "100%",
                       "& .M4LIcon-icon": {
-                        backgroundColor: o.palette.text.primary,
+                        backgroundColor: o.vars.palette.text.primary,
                         width: "18px",
                         height: "18px"
                       },
@@ -2254,8 +2265,8 @@ const p = (o) => ({
                         flexGrow: "1",
                         overflow: "hidden",
                         "& .MuiTypography-root": {
-                          ...o.typography.paragraph,
-                          color: o.palette.text.primary,
+                          ...o.colorSchemes.finalTheme.typography.paragraph,
+                          color: o.vars.palette.text.primary,
                           textWrap: "nowrap",
                           textOverflow: "ellipsis",
                           display: "block",
@@ -2264,13 +2275,13 @@ const p = (o) => ({
                         }
                       },
                       "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
-                        backgroundColor: o.palette.text.primary
+                        backgroundColor: o.vars.palette.text.primary
                       }
                     },
                     "& .M4LSideBar-arrowIconRoot": {
                       "& .M4LIcon-root": {
                         "& .M4LIcon-icon": {
-                          background: o.palette.text.primary
+                          background: o.vars.palette.text.primary
                         }
                       }
                     }
@@ -2288,13 +2299,13 @@ const p = (o) => ({
                       gap: "8px",
                       padding: "0px",
                       "&.M4LSideBar-subItemCollapseActive": {
-                        backgroundColor: o.palette.state.active12,
+                        backgroundColor: o.vars.palette.state.active12,
                         gap: "8px",
                         "& .MuiButtonBase-root": {
                           padding: "0px",
                           "& .M4LIcon-root": {
                             "& .M4LIcon-icon": {
-                              backgroundColor: o.palette.state.focus
+                              backgroundColor: o.vars.palette.state.focus
                             }
                           }
                         }
@@ -2304,20 +2315,20 @@ const p = (o) => ({
                           padding: "0px",
                           "& .M4LIcon-root": {
                             "& .M4LIcon-icon": {
-                              backgroundColor: `${o.palette.state.focus}!important`
+                              backgroundColor: `${o.vars.palette.state.focus}!important`
                             }
                           }
                         },
                         "& .M4LSideBar-navSubItemContentBullet": {
                           height: "14px",
                           borderRadius: "4px",
-                          backgroundColor: o.palette.state.focus,
+                          backgroundColor: o.vars.palette.state.focus,
                           gap: "8px"
                         }
                       },
                       "&:hover": {
                         padding: "0 8px",
-                        background: o.palette.state.default
+                        background: o.vars.palette.state.default
                       }
                     },
                     "& .M4LSideBar-navSubItemContentRoot": {
@@ -2328,14 +2339,14 @@ const p = (o) => ({
                         minWidth: "5px",
                         minHeight: "5px",
                         borderRadius: "50%",
-                        backgroundColor: o.palette.text.primary
+                        backgroundColor: o.vars.palette.text.primary
                       },
                       "& .M4LTypography-root": {
                         display: "flex",
                         width: "100%",
                         "& .MuiTypography-root": {
-                          ...o.typography.paragraph,
-                          color: o.palette.text.primary,
+                          ...o.colorSchemes.finalTheme.typography.paragraph,
+                          color: o.vars.palette.text.primary,
                           with: "100%",
                           overflow: "hidden",
                           textOverflow: "ellipsis",
@@ -2350,7 +2361,7 @@ const p = (o) => ({
                     "&.M4LSideBar-drawer.M4LSideBar-variantComercial": {
                       "& .M4LSideBar-subItemActive": {
                         "& .M4LIcon-icon": {
-                          backgroundColor: `${o.palette.state.focus}!important`
+                          backgroundColor: `${o.vars.palette.state.focus}!important`
                         }
                       },
                       "& .M4LSideBar-contentMobile": {
@@ -2384,8 +2395,8 @@ const p = (o) => ({
                             },
                             "& .M4LImage-root": {
                               position: "relative",
-                              background: o.palette.background.default,
-                              boxShadow: o.customShadows.z2,
+                              background: o.vars.palette.background.default,
+                              boxShadow: o.vars.customShadows?.z2,
                               padding: "6px",
                               borderRadius: "6px",
                               minWidth: "50px !important",
@@ -2431,40 +2442,43 @@ const p = (o) => ({
                                 backgroundColor: "transparent",
                                 borderRadius: "4px",
                                 "&:hover": {
-                                  background: o.palette.state.default,
+                                  background: o.vars.palette.state.default,
                                   cursor: "pointer"
                                 }
                               },
                               "&.M4LSideBar-itemMainActive": {
                                 borderRadius: "4px",
-                                background: o.palette.state.active12,
+                                background: o.vars.palette.state.active12,
                                 border: "1px solid",
-                                borderColor: o.palette.state.active12,
+                                borderColor: o.vars.palette.state.active12,
                                 "& .M4LSideBar-navItemMainRoot": {
-                                  background: o.palette.state.active12,
+                                  background: o.vars.palette.state.active12,
                                   "&:hover": {
-                                    background: t(o.palette.state.active || "#fff", 0.24),
+                                    background: t(
+                                      o.colorSchemes.finalTheme.palette.state.active || "#fff",
+                                      0.24
+                                    ),
                                     cursor: "pointer"
                                   }
                                 },
                                 "& .M4LSideBar-navItemRootContent": {
                                   "& .M4LSideBar-navItemRootContentIconTypo": {
                                     "& .M4LIcon-icon": {
-                                      backgroundColor: o.palette.state.focus
+                                      backgroundColor: o.vars.palette.state.focus
                                     },
                                     "& .M4LTypography-root": {
                                       "& .MuiTypography-root": {
-                                        color: o.palette.state.focus
+                                        color: o.vars.palette.state.focus
                                       }
                                     },
                                     "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
-                                      backgroundColor: o.palette.state.focus
+                                      backgroundColor: o.vars.palette.state.focus
                                     }
                                   },
                                   "& .M4LSideBar-arrowIconRoot": {
                                     "& .M4LIcon-root": {
                                       "& .M4LIcon-icon": {
-                                        backgroundColor: o.palette.state.focus
+                                        backgroundColor: o.vars.palette.state.focus
                                       }
                                     }
                                   },
@@ -2474,7 +2488,7 @@ const p = (o) => ({
                                     top: "0px",
                                     bottom: "0px",
                                     right: "0px",
-                                    backgroundColor: o.palette.state.focus,
+                                    backgroundColor: o.vars.palette.state.focus,
                                     borderRadius: "4px 0px 0px 4px",
                                     position: "absolute"
                                   }
@@ -2491,7 +2505,7 @@ const p = (o) => ({
                                   gap: "8px",
                                   width: "100%",
                                   "& .M4LIcon-icon": {
-                                    backgroundColor: o.palette.text.primary,
+                                    backgroundColor: o.vars.palette.text.primary,
                                     width: "18px",
                                     height: "18px"
                                   },
@@ -2500,8 +2514,8 @@ const p = (o) => ({
                                     flexGrow: "1",
                                     overflow: "hidden",
                                     "& .MuiTypography-root": {
-                                      ...o.typography.paragraph,
-                                      color: o.palette.text.primary,
+                                      ...o.colorSchemes.finalTheme.typography.paragraph,
+                                      color: o.vars.palette.text.primary,
                                       textWrap: "nowrap",
                                       textOverflow: "ellipsis",
                                       display: "block",
@@ -2509,13 +2523,13 @@ const p = (o) => ({
                                     }
                                   },
                                   "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
-                                    backgroundColor: o.palette.text.primary
+                                    backgroundColor: o.vars.palette.text.primary
                                   }
                                 },
                                 "& .M4LSideBar-arrowIconRoot": {
                                   "& .M4LIcon-root": {
                                     "& .M4LIcon-icon": {
-                                      background: o.palette.text.primary
+                                      background: o.vars.palette.text.primary
                                     }
                                   }
                                 }
@@ -2533,13 +2547,13 @@ const p = (o) => ({
                                   gap: "8px",
                                   padding: "0px",
                                   "&.M4LSideBar-subItemCollapseActive": {
-                                    backgroundColor: o.palette.state.active12,
+                                    backgroundColor: o.vars.palette.state.active12,
                                     gap: "8px",
                                     "& .MuiButtonBase-root": {
                                       padding: "0px",
                                       "& .M4LIcon-root": {
                                         "& .M4LIcon-icon": {
-                                          backgroundColor: o.palette.state.focus
+                                          backgroundColor: o.vars.palette.state.focus
                                         }
                                       }
                                     }
@@ -2549,19 +2563,19 @@ const p = (o) => ({
                                       padding: "0px",
                                       "& .M4LIcon-root": {
                                         "& .M4LIcon-icon": {
-                                          backgroundColor: `${o.palette.state.focus}!important`
+                                          backgroundColor: `${o.vars.palette.state.focus}!important`
                                         }
                                       }
                                     },
                                     "& .M4LSideBar-navSubItemContentBullet": {
                                       height: "14px",
                                       borderRadius: "4px",
-                                      backgroundColor: o.palette.state.focus,
+                                      backgroundColor: o.vars.palette.state.focus,
                                       gap: "8px"
                                     }
                                   },
                                   "&:hover": {
-                                    background: o.palette.state.default,
+                                    background: o.vars.palette.state.default,
                                     padding: "0 8px"
                                   }
                                 },
@@ -2573,14 +2587,14 @@ const p = (o) => ({
                                     minWidth: "5px",
                                     minHeight: "5px",
                                     borderRadius: "50%",
-                                    backgroundColor: o.palette.text.primary
+                                    backgroundColor: o.vars.palette.text.primary
                                   },
                                   "& .M4LTypography-root": {
                                     display: "flex",
                                     width: "100%",
                                     "& .MuiTypography-root": {
-                                      ...o.typography.paragraph,
-                                      color: o.palette.text.primary,
+                                      ...o.colorSchemes.finalTheme.typography.paragraph,
+                                      color: o.colorSchemes.finalTheme.palette.text.primary,
                                       with: "100%",
                                       overflow: "hidden",
                                       textOverflow: "ellipsis",
@@ -2595,7 +2609,7 @@ const p = (o) => ({
                             }
                           },
                           "& .M4LIcon-root .M4LIcon-icon": {
-                            backgroundColor: o.palette.text.primary
+                            backgroundColor: o.vars.palette.text.primary
                           }
                         },
                         "& .M4LSideBar-footer": {
@@ -2619,7 +2633,7 @@ const p = (o) => ({
                 }
               },
               "& .M4LIcon-root .M4LIcon-icon": {
-                backgroundColor: o.palette.text.primary
+                backgroundColor: o.vars.palette.text.primary
               }
             },
             "& .M4LSideBar-footer": {
@@ -2642,7 +2656,7 @@ const p = (o) => ({
       }
     }
   }
-}), f = (o) => ({
+}), m = (o) => ({
   M4LAreasAdmin: {
     styleOverrides: {
       "&.M4LAreasAdmin-root": {
@@ -2658,7 +2672,7 @@ const p = (o) => ({
         gap: "8px",
         borderRight: "1px solid",
         borderLeft: "1px solid",
-        borderColor: o.palette.state.borderDisable,
+        borderColor: o.vars.palette.state.borderDisable,
         [o.breakpoints.down("sm")]: {
           paddingRight: "0px",
           width: "100%",
@@ -2687,12 +2701,12 @@ const p = (o) => ({
           },
           "&.M4LAreasAdmin-isFocus": {
             border: "1px solid",
-            borderColor: o.palette.primary.main,
+            borderColor: o.vars.palette.primary.main,
             gap: "0px"
           },
           [o.breakpoints.down("sm")]: {
             height: "auto",
-            background: o.palette.background.default,
+            background: o.vars.palette.background.default,
             width: "100%",
             maxWidth: "100%",
             paddingRight: "0px",
@@ -2703,12 +2717,12 @@ const p = (o) => ({
             width: "8px",
             maxWidth: "12px",
             height: "6px",
-            background: o.palette.state.default,
+            background: o.vars.palette.state.default,
             position: "absolute",
             zIndex: "10000"
           },
           "*::-webkit-scrollbar-thumb": {
-            background: o.palette.text.disabled,
+            background: o.vars.palette.text.disabled,
             position: "absolute",
             borderRadius: "4px",
             zIndex: "10000"
@@ -2720,15 +2734,15 @@ const p = (o) => ({
             width: "100%",
             overflow: "auto",
             height: "36px",
-            borderColor: o.palette.state.hoverDefault,
+            borderColor: o.vars.palette.state.hoverDefault,
             [o.breakpoints.down("sm")]: {
               background: "none",
               borderRight: "none",
               paddingLeft: "0px"
             },
             "& .M4LAreasAdmin-areaIconLayer": {
-              background: o.palette.background.neutral,
-              boxShadow: o.customShadows.z2,
+              background: o.vars.palette.background.neutral,
+              boxShadow: o.vars.customShadows.z2,
               display: "flex",
               justifyContent: "center",
               width: "36px",
@@ -2787,7 +2801,7 @@ const p = (o) => ({
                 "& .M4LAreasAdmin-areaChipMobileRoot": {
                   width: "100%",
                   border: "0",
-                  background: o.palette.background.default,
+                  background: o.vars.palette.background.default,
                   "& .M4LAreasAdmin-areaChipRoot": {
                     width: "100%",
                     paddingLeft: "8px",
@@ -2797,7 +2811,7 @@ const p = (o) => ({
                     overflow: "hidden",
                     textOverflow: "ellipsis",
                     gap: "4px",
-                    background: o.palette.background.default,
+                    background: o.vars.palette.background.default,
                     "& .M4LAreasAdmin-areaChipRoot": {
                       width: "100%"
                     }
@@ -2812,25 +2826,33 @@ const p = (o) => ({
                 maxWidth: "100%",
                 cursor: "pointer",
                 "&:hover": {
-                  background: o.palette.state.hoverDefault
+                  background: o.vars.palette.state.hoverDefault
                 },
                 [o.breakpoints.down("sm")]: {
                   background: "none",
                   border: "none",
                   boxShadow: "none",
                   width: "100%"
+                },
+                "& .M4LAreasAdmin-areaChipEditButton": {
+                  "& .M4LIcon-icon": {
+                    width: "12px",
+                    height: "12px",
+                    minWidth: "12px",
+                    minHeight: "12px"
+                  }
                 }
               },
               "& .M4LAreasAdmin-areaChipMobileRoot": {
                 display: "flex",
                 overflow: "hidden",
                 width: "100%",
-                backgroundColor: o.palette.state.default,
+                backgroundColor: o.vars.palette.state.default,
                 borderTop: "1.5px solid",
-                borderColor: o.palette.state.borderTop,
+                borderColor: o.vars.palette.state.borderTop,
                 borderRadius: "4px",
                 [o.breakpoints.down("sm")]: {
-                  backgroundColor: o.palette.background.default,
+                  backgroundColor: o.vars.palette.background.default,
                   width: "100%"
                 },
                 "& .M4LAreasAdmin-areaChipRoot ": {
@@ -2855,11 +2877,11 @@ const p = (o) => ({
                 display: "flex",
                 width: "fit-content",
                 borderLeft: "1px solid",
-                borderColor: o.palette.divider,
+                borderColor: o.vars.palette.divider,
                 borderRadius: "0px 0px 0px 0px",
-                boxShadow: o.customShadows.z2,
-                ...o.typography.body,
-                color: o.palette.text.primary,
+                boxShadow: o.vars.customShadows.z2,
+                ...o.colorSchemes.finalTheme.typography.body,
+                color: o.vars.palette.text.primary,
                 [o.breakpoints.down("sm")]: {
                   boxShadow: "none"
                 },
@@ -2867,7 +2889,7 @@ const p = (o) => ({
                   background: "transparent",
                   backgroundColor: "transparent",
                   "&:hover": {
-                    background: o.palette.state.active12
+                    background: o.vars.palette.state.active12
                   },
                   "& .M4LIcon-icon": {}
                 }
@@ -2879,7 +2901,7 @@ const p = (o) => ({
               },
               "& .M4LAreasAdmin-areaChipRoot": {
                 display: "flex",
-                background: o.palette.state.default,
+                background: o.vars.palette.state.default,
                 borderRadius: "4px 4px 4px 4px",
                 minHeight: "24px",
                 width: "fit-content",
@@ -2893,18 +2915,19 @@ const p = (o) => ({
                   boxShadow: "none"
                 },
                 "&.M4LAreasAdmin-selected": {
-                  background: o.palette.state.active,
-                  ...o.typography.body,
-                  color: o.palette.text.primary,
+                  background: o.vars.palette.state.active,
+                  ...o.colorSchemes.finalTheme.typography.body,
+                  color: o.vars.palette.text.primary,
                   height: "22px",
+                  transition: "all 0.5s ease",
                   "&:hover": {
-                    background: o.palette.state.hover
+                    background: o.vars.palette.state.hover
                   },
                   [o.breakpoints.down("sm")]: {
                     height: "auto",
                     background: "none",
                     "&:hover": {
-                      background: o.palette.state.hoverDefault
+                      background: o.vars.palette.state.hoverDefault
                     }
                   },
                   "& .M4LAreasAdmin-areaChipTitle": {
@@ -2916,8 +2939,8 @@ const p = (o) => ({
                     justifyContent: "center",
                     display: "flex",
                     alignItems: "center",
-                    color: o.palette.patronus?.marbleLight[10],
-                    ...o.typography.action,
+                    color: o.vars.palette.patronus?.marbleLight[10],
+                    ...o.colorSchemes.finalTheme.typography.body,
                     [o.breakpoints.down("sm")]: {
                       display: "inline",
                       fontSize: "14px",
@@ -2925,20 +2948,20 @@ const p = (o) => ({
                       overflow: "hidden",
                       whiteSpace: "nowrap",
                       flex: "1",
-                      color: o.palette.text.primary
+                      color: o.vars.palette.text.primary
                     }
                   },
                   "& .M4LIconButton-root": {
                     "&:hover": {
-                      background: o.palette.state.active
+                      background: o.vars.palette.state.active
                     },
                     [o.breakpoints.down("sm")]: {
-                      color: o.palette.text.primary
+                      color: o.vars.palette.text.primary
                     },
                     "& .M4LIcon-icon": {
-                      backgroundColor: `${o.palette.patronus?.marbleLight[10]}`,
+                      backgroundColor: `${o.vars.palette.patronus?.marbleLight[10]}`,
                       [o.breakpoints.down("sm")]: {
-                        color: o.palette.text.primary
+                        color: o.vars.palette.text.primary
                       }
                     }
                   }
@@ -2952,8 +2975,8 @@ const p = (o) => ({
                   justifyContent: "center",
                   display: "flex",
                   alignItems: "center",
-                  color: o.palette.text.secondary,
-                  ...o.typography.action
+                  color: o.vars.palette.text.secondary,
+                  ...o.colorSchemes.finalTheme.typography.body
                 },
                 "& .M4LAreasAdmin-areaContainerChipEditButton": {
                   display: "flex",
@@ -2965,12 +2988,12 @@ const p = (o) => ({
                   width: "20px",
                   height: "20px",
                   [o.breakpoints.down("sm")]: {
-                    color: o.palette.text.primary
+                    color: o.vars.palette.text.primary
                   },
                   "&.M4LIconButton-variantPrimary": {
-                    background: o.palette.state.active,
+                    background: o.vars.palette.state.active,
                     [o.breakpoints.down("sm")]: {
-                      color: o.palette.text.primary
+                      color: o.vars.palette.text.primary
                     }
                   }
                 }
@@ -2983,17 +3006,17 @@ const p = (o) => ({
               width: "100%",
               height: "28px",
               borderLeft: "1px solid",
-              borderColor: o.palette.state.borderSecondary,
+              borderColor: o.vars.palette.state.borderSecondary,
               borderRadius: "0px"
             }
           },
           "& .M4LAreasAdmin-areasAddButton": {
             flexGrow: "2",
-            background: o.palette.state.default
+            background: o.vars.palette.state.default
           },
           "&.M4LAreasAdmin-isMobile": {
             overflow: "hidden",
-            boxShadow: o.customShadows.z1,
+            boxShadow: o.vars.customShadows.z1,
             width: "100%",
             "& .M4LAreasAdmin-areaContainerChips": {
               width: "100%",
@@ -3074,12 +3097,12 @@ const p = (o) => ({
       }
     }
   }
-}), h = (o) => ({
+}), C = (o) => ({
   M4LAreasViewer: {
     styleOverrides: {
       "&.M4LAreasViewer-root": {
         test: "root",
-        background: o.palette.background.background,
+        background: o.vars.palette.background.background,
         "& .M4LGridLayout-gridItemRoot.M4LGridLayout-colapsed-40 .M4LAreasViewer-windowHeader": {
           minHeight: "38px",
           height: "38px"
@@ -3117,9 +3140,9 @@ const p = (o) => ({
             }
           },
           "& .M4LAreasViewer-windowRoot": {
-            background: o.palette.background.neutral,
+            background: o.vars.palette.background.neutral,
             border: "1.5px solid",
-            borderColor: o.palette.state.borderPrimary,
+            borderColor: o.vars.palette.state.borderPrimary,
             borderRadius: "4px",
             display: "flex",
             "&:not(.M4LAreasViewer-loading)": {
@@ -3132,7 +3155,7 @@ const p = (o) => ({
             },
             "&.react-colapsed": {
               border: "1px solid",
-              borderColor: o.palette.state.borderPrimary
+              borderColor: o.vars.palette.state.borderPrimary
             },
             "& .M4LAreasViewer-windowRootContainer": {
               display: "flex",
@@ -3145,7 +3168,7 @@ const p = (o) => ({
               display: "flex",
               flexDirection: "column",
               padding: "6px 4px 6px 8px",
-              boxShadow: o.customShadows.z1,
+              boxShadow: o.vars.customShadows.z1,
               "& .M4LAreasViewer-windowHeaderContent": {
                 display: "flex",
                 width: "100%",
@@ -3153,7 +3176,7 @@ const p = (o) => ({
                 alignItems: "center",
                 "& .M4LIcon-root": {
                   "& .M4LIcon-icon": {
-                    background: o.palette.text.secondary
+                    background: o.vars.palette.text.secondary
                   }
                 },
                 "& .M4LAreasViewer-windowHeaderTitle": {
@@ -3168,22 +3191,23 @@ const p = (o) => ({
                     overflow: "hidden",
                     textOverflow: "ellipsis",
                     width: "100%",
-                    color: o.palette.text.secondary
+                    fontSize: "16px",
+                    color: o.vars.palette.text.secondary
                   }
                 },
                 "& .M4LAreasViewer-windowHeaderCancelHandle": {
                   "& .M4LIconButton-icon": {
                     "& .MuiButtonBase-root": {
                       "& .M4LIcon-icon": {
-                        background: o.palette.text.secondary
+                        background: o.vars.palette.text.secondary
                       }
                     }
                   }
                 }
               },
               "& .M4LTypography-root .MuiTypography-root": {
-                ...o.typography.paragraphDens,
-                color: o.palette.text.primary,
+                ...o.colorSchemes.finalTheme.typography.paragraphDens,
+                color: o.vars.palette.text.primary,
                 overflow: "visible"
               }
             },
@@ -3197,8 +3221,8 @@ const p = (o) => ({
               maxHeight: "fit-content",
               zIndex: "1000",
               gap: "2px",
-              background: o.palette.background.default,
-              boxShadow: o.customShadows.z3,
+              background: o.vars.palette.background.default,
+              boxShadow: o.customShadows?.z2,
               "& .M4LAreasViewer-windowToastiesContainerTostys": {
                 boxSizing: "border-box",
                 overflow: "auto",
@@ -3207,11 +3231,11 @@ const p = (o) => ({
                 width: "100%",
                 maxHeight: "128px",
                 "& .M4LAreasViewer-windowToastyContainer": {
-                  background: o.palette.patronus?.middleYellow[10],
+                  background: o.vars.palette.patronus?.middleYellow[10],
                   borderRadius: "4px",
                   padding: "0px 0px 0px 0px",
                   width: "100%",
-                  boxShadow: o.customShadows.z2,
+                  boxShadow: o.customShadows?.z2,
                   gap: "4px",
                   position: "relative",
                   "& .M4LAreasViewer-windowToastyButtonsContainer": {
@@ -3225,85 +3249,85 @@ const p = (o) => ({
                     display: "flex",
                     alignItems: "center",
                     padding: "8px",
-                    ...o.typography.body,
-                    color: o.palette.patronus?.onyx[60],
+                    ...o.colorSchemes.finalTheme.typography.body,
+                    color: o.vars.palette.patronus?.onyx[60],
                     position: "relative",
                     "& .MuiLinearProgress-root": {
                       position: "absolute",
                       width: "100%",
                       top: "0px",
                       left: "0px",
-                      background: o.palette.state.active12,
+                      background: o.vars.palette.state.active12,
                       "& .MuiLinearProgress-bar1Determinate .MuiLinearProgress-barColorPrimary": {
                         transform: "translateX(100%)"
                       }
                     }
                   },
                   "&.M4LAreasViewer-error": {
-                    background: o.palette.patronus?.desertBeige[10],
+                    background: o.vars.palette.patronus?.desertBeige[10],
                     "& .M4LAreasViewer-windowToastyButtonsContainer": {
-                      background: o.palette.error.main,
+                      background: o.vars.palette.error.main,
                       "& .M4LIcon-icon": {
-                        backgroundColor: o.palette.patronus?.marbleLight[40]
+                        backgroundColor: o.vars.palette.patronus?.marbleLight[40]
                       },
                       "& .M4LAreasViewer-pinIn": {
-                        background: o.palette.state.error.hover,
-                        boxShadow: o.customShadows.z1,
+                        background: o.vars.palette.state.error.hover,
+                        boxShadow: o.vars.customShadows.z1,
                         border: "none"
                       },
                       "& .M4LIconButton-root:hover": {
-                        background: o.palette.state.error.hover
+                        background: o.vars.palette.state.error.hover
                       }
                     }
                   },
                   "&.M4LAreasViewer-info": {
-                    background: o.palette.patronus?.crayonBlue[10],
+                    background: o.vars.palette.patronus?.crayonBlue[10],
                     "& .M4LAreasViewer-windowToastyButtonsContainer": {
-                      background: o.palette.info.main,
+                      background: o.vars.palette.info.main,
                       "& .M4LIcon-icon": {
-                        backgroundColor: o.palette.patronus?.marbleLight[40]
+                        backgroundColor: o.vars.palette.patronus?.marbleLight[40]
                       },
                       "& .M4LAreasViewer-pinIn": {
-                        background: o.palette.state.info.hover,
-                        boxShadow: o.customShadows.z1,
+                        background: o.vars.palette.state.info.hover,
+                        boxShadow: o.vars.customShadows.z1,
                         border: "none"
                       },
                       "& .M4LIconButton-root:hover": {
-                        background: o.palette.state.info.hover
+                        background: o.vars.palette.state.info.hover
                       }
                     }
                   },
                   "&.M4LAreasViewer-warning": {
-                    background: o.palette.patronus?.middleYellow[10],
+                    background: o.vars.palette.patronus?.middleYellow[10],
                     "& .M4LAreasViewer-windowToastyButtonsContainer": {
-                      background: o.palette.warning.main,
+                      background: o.vars.palette.warning.main,
                       "& .M4LIcon-icon": {
-                        backgroundColor: o.palette.patronus?.onyx[50]
+                        backgroundColor: o.vars.palette.patronus?.onyx[50]
                       },
                       "& .M4LAreasViewer-pinIn": {
-                        background: o.palette.state.warning.hover,
-                        boxShadow: o.customShadows.z1,
+                        background: o.vars.palette.state.warning.hover,
+                        boxShadow: o.vars.customShadows.z1,
                         border: "none"
                       },
                       "& .M4LIconButton-root:hover": {
-                        background: o.palette.state.warning.hover
+                        background: o.vars.palette.state.warning.hover
                       }
                     }
                   },
                   "&.M4LAreasViewer-success ": {
-                    background: o.palette.patronus?.acidGreen[10],
+                    background: o.vars.palette.patronus?.acidGreen[10],
                     "& .M4LAreasViewer-windowToastyButtonsContainer": {
-                      background: o.palette.success.main,
+                      background: o.vars.palette.success.main,
                       "& .M4LIcon-icon": {
-                        backgroundColor: o.palette.patronus?.onyx[50]
+                        backgroundColor: o.vars.palette.patronus?.onyx[50]
                       },
                       "& .M4LAreasViewer-pinIn": {
-                        background: o.palette.state.success.hover,
-                        boxShadow: o.customShadows.z1,
+                        background: o.vars.palette.state.success.hover,
+                        boxShadow: o.vars.customShadows.z1,
                         border: "none"
                       },
                       "& .M4LIconButton-root:hover": {
-                        background: o.palette.state.success.hover
+                        background: o.vars.palette.state.success.hover
                       }
                     }
                   }
@@ -3312,7 +3336,7 @@ const p = (o) => ({
             },
             "& .M4LAreasViewer-windowContent": {
               padding: "16px",
-              background: o.palette.background.default,
+              background: o.vars.palette.background.default,
               display: "flex",
               flexDirection: "column",
               alignItems: "center",
@@ -3321,7 +3345,7 @@ const p = (o) => ({
               flex: "1",
               overflow: "hidden",
               [o.breakpoints.up("sm")]: {
-                padding: "16px"
+                padding: "12px"
               },
               "& .M4LAreasViewer-containerComponent": {
                 display: "flex",
@@ -3346,20 +3370,20 @@ const p = (o) => ({
                 alignItems: "center",
                 padding: "0 16px",
                 "& .MuiLinearProgress-root": {
-                  background: e(o.palette.state.active, 0.3)
+                  background: r(o.colorSchemes.finalTheme.palette.state.active, 0.3)
                 }
               }
             },
             "&.M4LAreasViewer-selectedWindow": {
               border: "1.5px solid",
-              borderColor: o.palette.state.lineTheme,
-              boxShadow: o.customShadows.z3,
+              borderColor: o.vars.palette.state.lineTheme,
+              boxShadow: o.customShadows?.z2,
               backdropFilter: "blur(100px)",
-              background: o.palette.background.default,
+              background: o.vars.palette.background.default,
               "& .M4LAreasViewer-windowHeader": {
                 display: "flex",
                 flexDirection: "column",
-                background: o.palette.state.active12,
+                background: o.vars.palette.state.active12,
                 gap: "4px",
                 alignItems: "center",
                 position: "relative",
@@ -3370,34 +3394,34 @@ const p = (o) => ({
                 "& .M4LAreasViewer-windowHeaderContent": {
                   "& .M4LIcon-root": {
                     "& .M4LIcon-icon": {
-                      background: o.palette.state.focus
+                      background: o.vars.palette.state.focus
                     }
                   },
                   "& .M4LAreasViewer-windowHeaderCancelHandle": {
                     "& .M4LIcon-root": {
                       "& .M4LIcon-icon": {
-                        background: o.palette.text.primary
+                        background: o.vars.palette.text.primary
                       }
                     }
                   }
                 },
                 "& .M4LTypography-root .MuiTypography-root": {
-                  ...o.typography.paragraphDens,
-                  color: o.palette.state.focus
+                  ...o.colorSchemes.finalTheme.typography.paragraphDens,
+                  color: o.vars.palette.state.focus
                 },
                 "& .MuiButtonBase-root": {
                   "& .M4LIcon-icon": {
-                    backgroundColor: o.palette.text.primary
+                    backgroundColor: o.vars.palette.text.primary
                   }
                 },
                 "& .Mui-disabled": {
                   "& .M4LIcon-icon": {
-                    backgroundColor: o.palette.text.disabled
+                    backgroundColor: o.vars.palette.text.disabled
                   }
                 },
                 "& .MuiButtonBase-root:hover": {
                   "& .M4LIcon-icon": {
-                    backgroundColor: o.palette.state.hover
+                    backgroundColor: o.vars.palette.state.hover
                   }
                 }
               }
@@ -3405,7 +3429,7 @@ const p = (o) => ({
           },
           "&.M4LGridLayout-root .M4LGridLayout-maximizeMe": {
             border: "1.5px solid",
-            borderColor: o.palette.state.borderPrimary,
+            borderColor: o.vars.palette.state.borderPrimary,
             borderRadius: "4px",
             "& .M4LAreasViewer-windowContent": {
               padding: "16px"
@@ -3419,41 +3443,41 @@ const p = (o) => ({
           },
           "&.M4LGridLayout-colapsed ": {
             "& .M4LAreasViewer-windowRoot": {
-              borderColor: o.palette.state.hoverDefault,
-              boxShadow: o.customShadows.z1
+              borderColor: o.vars.palette.state.hoverDefault,
+              boxShadow: o.vars.customShadows.z1
             }
           },
           "&.react-draggable": {
-            background: o.palette.state.active12
+            background: o.vars.palette.state.active12
           },
           "& .M4LAreasViewer-windowPopupRoot": {
-            boxShadow: o.customShadows.z3,
+            boxShadow: o.customShadows?.z2,
             border: "none",
-            background: o.palette.background.default,
+            background: o.vars.palette.background.default,
             borderRadius: "4px",
             backdropFilter: "blur(8px)",
             "& .M4LIcon-root.custom-handle": {
               "& .M4LIcon-icon": {
-                backgroundColor: o.palette.state.skeleton.default,
+                backgroundColor: o.vars.palette.state.skeleton.default,
                 width: "11px",
                 height: "11px",
                 minWidth: "11px",
                 minHeight: "11px",
-                boxShadow: o.customShadows.z1,
+                boxShadow: o.vars.customShadows.z1,
                 border: "1px solid",
-                borderColor: o.palette.opacity.cool[24]
+                borderColor: o.vars.palette.opacity.cool[24]
               }
             },
             "& .M4LAreasViewer-windowRootContainer": {
-              background: o.palette.background.default,
+              background: o.vars.palette.background.default,
               borderRadius: "4px",
               border: "1.5px solid",
-              borderColor: o.palette.state.borderPrimary,
+              borderColor: o.vars.palette.state.borderPrimary,
               "& .M4LAreasViewer-windowHeader": {
                 boxShadow: "none",
                 borderTopLeftRadius: "4px",
                 borderTopRightRadius: "4px",
-                background: o.palette.background.header,
+                background: o.vars.palette.background.header,
                 border: "none",
                 "& .M4LIcon-root": {
                   "& .M4LIcon-icon": {
@@ -3461,25 +3485,25 @@ const p = (o) => ({
                     height: "18px",
                     minWidth: "18px",
                     minHeight: "18px",
-                    backgroundColor: o.palette.text.secondary
+                    backgroundColor: o.vars.palette.text.secondary
                   }
                 },
                 "& .M4LTypography-root .MuiTypography-root": {
-                  ...o.typography.paragraphDens,
-                  color: o.palette.text.secondary,
+                  ...o.colorSchemes.finalTheme.typography.paragraphDens,
+                  color: o.vars.palette.text.secondary,
                   overflow: "visible"
                 }
               },
               "& .M4LAreasViewer-windowContent": {
-                background: o.palette.background.neutral,
-                padding: "24px"
+                background: o.vars.palette.background.neutral,
+                padding: "12px"
               }
             },
             "& .M4LAreasViewer-windowRoot": {
               padding: "4px",
-              background: o.palette.background.default,
+              background: o.vars.palette.background.default,
               borderRadius: "4px",
-              borderColor: o.palette.state.hoverDefault,
+              borderColor: o.vars.palette.state.hoverDefault,
               "&:not(.M4LAreasViewer-loading)": {
                 "& .M4LinearProgressIndeterminate-root": {
                   opacity: 0
@@ -3489,23 +3513,23 @@ const p = (o) => ({
                 backgroundColor: "transparent"
               },
               "&.M4LAreasViewer-selectedWindow": {
-                borderColor: o.palette.state.active12,
-                background: o.palette.state.active12,
-                boxShadow: o.customShadows.z4,
+                borderColor: o.vars.palette.state.active12,
+                background: o.vars.palette.state.active12,
+                boxShadow: o.vars.customShadows.z4,
                 padding: "4px",
                 "& .M4LAreasViewer-windowRootContainer": {
                   "& .M4LAreasViewer-windowHeader": {
-                    background: o.palette.state.default,
+                    background: o.vars.palette.state.default,
                     borderRadius: "4px",
-                    boxShadow: o.customShadows.z1,
+                    boxShadow: o.vars.customShadows.z1,
                     "& .M4LIcon-root": {
                       "& .M4LIcon-icon": {
-                        backgroundColor: o.palette.text.primary
+                        backgroundColor: o.vars.palette.text.primary
                       }
                     },
                     "& .M4LTypography-root .MuiTypography-root": {
-                      ...o.typography.paragraph,
-                      color: o.palette.text.primary,
+                      ...o.colorSchemes.finalTheme.typography.paragraph,
+                      color: o.vars.palette.text.primary,
                       overflow: "visible"
                     }
                   }
@@ -3514,27 +3538,27 @@ const p = (o) => ({
             },
             "&.M4LAreasViewer-selectedWindow": {
               border: "none",
-              background: o.palette.state.active12,
-              boxShadow: o.customShadows.z4,
+              background: o.vars.palette.state.active12,
+              boxShadow: o.vars.customShadows.z4,
               [o.breakpoints.down("sm")]: {
                 padding: "0"
               },
               "& .M4LAreasViewer-windowRootContainer": {
-                boxShadow: o.customShadows.z2,
+                boxShadow: o.customShadows?.z2,
                 border: "1.5px solid",
-                borderColor: e(o.palette.state.active, 0.5),
+                borderColor: r(o.colorSchemes.finalTheme.palette.state.active, 0.5),
                 "& .M4LAreasViewer-windowHeader": {
-                  background: o.palette.state.active12,
+                  background: o.vars.palette.state.active12,
                   borderTopLeftRadius: "4px",
                   borderTopRightRadius: "4px",
                   "& .M4LIcon-root": {
                     "& .M4LIcon-icon": {
-                      backgroundColor: o.palette.text.primary
+                      backgroundColor: o.vars.palette.text.primary
                     }
                   },
                   "& .M4LTypography-root .MuiTypography-root": {
-                    ...o.typography.paragraphDens,
-                    color: o.palette.text.primary,
+                    ...o.colorSchemes.finalTheme.typography.paragraphDens,
+                    color: o.vars.palette.text.primary,
                     overflow: "visible"
                   }
                 }
@@ -3543,22 +3567,22 @@ const p = (o) => ({
           }
         },
         "& .M4LAreasViewer-panelWindowsRoot": {
-          background: o.palette.background.neutral,
+          background: o.vars.palette.background.neutral,
           display: "flex",
           alignItems: "center",
           padding: "8px",
           gap: "8px",
           borderLeft: "1.5px solid",
-          borderColor: o.palette.state.borderPrimary,
+          borderColor: o.vars.palette.state.borderPrimary,
           "& .M4LAreasViewer-panelWindowsButtonContainer": {
             borderRadius: "2px",
-            boxShadow: o.customShadows.z1,
+            boxShadow: o.vars.customShadows.z1,
             "&.M4LAreasViewer-selected": {
-              background: o.palette.state.active,
+              background: o.vars.palette.state.active,
               "& .M4LIconButton-root": {
                 "& .M4LIcon-root": {
                   "& .M4LIcon-icon": {
-                    backgroundColor: o.palette.primary.contrastText
+                    backgroundColor: o.vars.palette.primary.contrastText
                   }
                 }
               }
@@ -3572,13 +3596,13 @@ const p = (o) => ({
     styleOverrides: {
       "&.M4LAreasViewer-windowModalRoot .M4LAreasViewer-windowRoot": {
         borderRadius: "4px",
-        boxShadow: o.customShadows.z4,
-        background: o.palette.background.default,
+        boxShadow: o.vars.customShadows.z4,
+        background: o.vars.palette.background.default,
         border: "2px solid",
-        borderColor: o.palette.state.borderDens,
+        borderColor: o.vars.palette.state.borderDens,
         "& .M4LAreasViewer-windowContent": {
           borderRadius: "4px",
-          background: o.palette.background.default
+          background: o.vars.palette.background.default
         },
         "& .M4LAreasViewer-windowHeaderTitle": {
           display: "flex",
@@ -3591,7 +3615,8 @@ const p = (o) => ({
             whiteSpace: "nowrap",
             overflow: "hidden",
             textOverflow: "ellipsis",
-            width: "100%"
+            width: "100%",
+            fontSize: "16px"
           }
         },
         "& .M4LAreasViewer-areasLoadingErrorRoot": {
@@ -3620,28 +3645,28 @@ const p = (o) => ({
               " .M4LIcon-icon": {
                 width: "100px",
                 height: "100px",
-                backgroundColor: o.palette.state.skeleton.default
+                backgroundColor: o.vars.palette.state.skeleton.default
               }
             },
             "& .M4LAreasViewer-areasLoadingErrorTitle": {
-              ...o.typography.h3,
-              color: o.palette.text.primary,
+              ...o.colorSchemes.finalTheme.typography.h3,
+              color: o.vars.palette.text.primary,
               [o.breakpoints.down("sm")]: {
-                ...o.typography.h5
+                ...o.colorSchemes.finalTheme.typography.h5
               }
             },
             "& .M4LAreasViewer-areasLoadingErrorDescription": {
-              ...o.typography.subtitle,
-              color: o.palette.text.secondary
+              ...o.colorSchemes.finalTheme.typography.subtitle,
+              color: o.vars.palette.text.secondary
             },
             "& .M4LAreasViewer-areasLoadingErrorDivider": {
               width: "208px",
               height: "1px",
-              background: o.palette.state.skeleton.default
+              background: o.vars.palette.state.skeleton.default
             },
             "& .MuiTypography-paragraph": {
-              ...o.typography.body,
-              color: o.palette.text.primary
+              ...o.colorSchemes.finalTheme.typography.body,
+              color: o.vars.palette.text.primary
             },
             "& .MuiButtonBase-root": {
               marginTop: "4px"
@@ -3649,7 +3674,7 @@ const p = (o) => ({
           }
         },
         "& .MuiBackdrop-root": {
-          background: e(`${o.palette.patronus?.onyx[60]}`, 0.8)
+          background: r(`${o.colorSchemes.finalTheme.palette.patronus?.onyx[60]}`, 0.8)
         },
         "&:not(.M4LAreasViewer-loading)": {
           "& .M4LinearProgressIndeterminate-root": {
@@ -3663,9 +3688,9 @@ const p = (o) => ({
           display: "flex",
           flexDirection: "column",
           height: "100%",
-          background: o.palette.background.default,
+          background: o.vars.palette.background.default,
           borderRadius: "4px",
-          boxShadow: o.customShadows.z4,
+          boxShadow: o.vars.customShadows.z4,
           overflow: "hidden",
           "& .M4LAreasViewer-windowHeader": {
             cursor: "all-scroll",
@@ -3674,7 +3699,7 @@ const p = (o) => ({
             padding: "6px 4px 6px 8px",
             borderRadius: "4px",
             border: "none",
-            background: o.palette.state.active12,
+            background: o.vars.palette.state.active12,
             height: "28px",
             minHeight: "28px",
             [o.breakpoints.down("md")]: {
@@ -3682,8 +3707,8 @@ const p = (o) => ({
               minHeight: "36px"
             },
             "& .M4LTypography-root .MuiTypography-root": {
-              ...o.typography.paragraph,
-              color: o.palette.text.primary,
+              ...o.colorSchemes.finalTheme.typography.paragraph,
+              color: o.vars.palette.text.primary,
               overflow: "hidden"
             },
             "& .M4LAreasViewer-windowHeaderContent": {
@@ -3694,7 +3719,7 @@ const p = (o) => ({
           },
           "& .M4LAreasViewer-windowContent": {
             padding: "12px",
-            background: o.palette.background.default,
+            background: o.vars.palette.background.default,
             borderRadius: "4px",
             display: "flex",
             flexDirection: "column",
@@ -3723,19 +3748,19 @@ const p = (o) => ({
       },
       "& .M4LIcon-root.custom-handle": {
         "& .M4LIcon-icon": {
-          backgroundColor: o.palette.state.skeleton.default,
+          backgroundColor: o.vars.palette.state.skeleton.default,
           width: "11px",
           height: "11px",
           minWidth: "11px",
           minHeight: "11px",
-          boxShadow: o.customShadows.z2,
+          boxShadow: o.customShadows?.z2,
           border: "1px solid",
-          borderColor: o.palette.state.hoverDefault
+          borderColor: o.vars.palette.state.hoverDefault
         }
       }
     }
   }
-}), w = (o) => ({
+}), S = (o) => ({
   M4LAppBar: {
     styleOverrides: {
       "&.M4LAppBar-root": {
@@ -3747,9 +3772,9 @@ const p = (o) => ({
         height: "52px",
         alignItems: "center",
         padding: "8px 16px",
-        background: o.palette.background.default,
+        background: o.vars.palette.background.default,
         borderBottom: "1.5px solid",
-        borderColor: o.palette.state.borderPrimary,
+        borderColor: o.vars.palette.state.borderPrimary,
         justifyContent: "space-between",
         gap: "40px",
         [o.breakpoints.down("sm")]: {
@@ -3785,16 +3810,16 @@ const p = (o) => ({
           minHeight: "36px",
           alignItems: "center",
           borderRadius: "4px",
-          borderColor: o.palette.state.default,
+          borderColor: o.vars.palette.state.default,
           justifyContent: "space-between",
           "& .M4LAppBar-iconMenuToggle": {
-            background: o.palette.state.default,
+            background: o.vars.palette.state.default,
             width: "36px",
             height: "36px",
             minWidth: "36px",
             minHeight: "36px",
             [o.breakpoints.down("sm")]: {
-              background: o.palette.state.default,
+              background: o.vars.palette.state.default,
               width: "36px",
               height: "36px",
               minWidth: "36px",
@@ -3826,14 +3851,6 @@ const p = (o) => ({
             borderRadius: "6px",
             gap: "8px"
           },
-          "& .M4LanguagePopover-root": {
-            "& .M4LImageButton-root": {
-              "& .MuiButtonBase-root": {
-                width: "28px",
-                height: "28px"
-              }
-            }
-          },
           "& .M4LAvatar-root": {
             width: "28px",
             height: "28px",
@@ -3858,29 +3875,46 @@ const p = (o) => ({
       }
     }
   }
-}), v = (o) => ({
+}), k = (o) => ({
   M4LAvatar: {
     styleOverrides: {
       "&.M4LAvatar-root": {
+        padding: "0px !important",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "36px !important",
+        height: "36px !important",
         "& .MuiAvatar-root": {
-          width: "36px",
-          height: "36px",
+          width: "28px !important",
+          height: "28px !important",
           borderRadius: "4px",
-          padding: "4px",
-          background: r.blazeOrange[50],
-          color: r.marbleLight[30],
-          boxShadow: o.customShadows.z1,
-          ...o.typography.subtitle,
-          [o.breakpoints.down("sm")]: {
-            width: "36px",
-            height: "36px"
+          background: e.blazeOrange[50],
+          color: e.marbleLight[30],
+          boxShadow: o.vars.customShadows.z1,
+          ...o.typography.subtitle
+        },
+        [o.breakpoints.up("md")]: {
+          width: "28px !important",
+          height: "28px !important",
+          "& .MuiAvatar-root": {
+            width: "20px !important",
+            height: "20px !important"
+          }
+        },
+        [o.breakpoints.down("sm")]: {
+          width: "36px !important",
+          height: "36px !important",
+          "& .MuiAvatar-root": {
+            width: "28px !important",
+            height: "28px !important"
           }
         },
         test: "root"
       }
     }
   }
-}), C = (o) => ({
+}), B = (o) => ({
   M4LAccountPopover: {
     styleOverrides: {
       "&.M4LAccountPopover-root": {
@@ -3902,8 +3936,8 @@ const p = (o) => ({
         gap: "4px",
         padding: "12px",
         borderRadius: "6px",
-        boxShadow: o.customShadows.z3,
-        background: o.palette.background.default,
+        boxShadow: o.customShadows?.z2,
+        background: o.vars.palette.background.default,
         "& .M4LAccountPopover-containerUserInfo": {
           display: "flex",
           flexDirection: "column",
@@ -3918,8 +3952,8 @@ const p = (o) => ({
               minHeight: "16px"
             },
             "& .M4LAccountPopover-labelUserName": {
-              color: o.palette.text.primary,
-              ...o.typography.bodyDens,
+              color: o.vars.palette.text.primary,
+              ...o.colorSchemes.finalTheme.typography.bodyDens,
               width: "100%",
               minHeight: "20px",
               display: "flex",
@@ -3936,8 +3970,8 @@ const p = (o) => ({
               minHeight: "16px"
             },
             "& .M4LAccountPopover-labelUserEmail": {
-              color: o.palette.text.primary,
-              ...o.typography.body,
+              color: o.vars.palette.text.primary,
+              ...o.colorSchemes.finalTheme.typography.body,
               width: "100%",
               minHeight: "20px",
               display: "flex",
@@ -3955,8 +3989,8 @@ const p = (o) => ({
             minHeight: "16px"
           },
           "& .M4LAccountPopover-labelVersion": {
-            color: o.palette.text.secondary,
-            ...o.typography.body,
+            color: o.vars.palette.text.secondary,
+            ...o.colorSchemes.finalTheme.typography.body,
             width: "100%",
             minHeight: "20px",
             display: "flex",
@@ -3966,7 +4000,7 @@ const p = (o) => ({
         "& .M4LAccountPopover-containerMenuItems": {
           borderTop: "1.5px solid",
           borderBottom: "1.5px solid",
-          borderColor: o.palette.state.default,
+          borderColor: o.vars.palette.state.default,
           padding: "2px 4px",
           display: "flex",
           flexDirection: "column",
@@ -3984,15 +4018,15 @@ const p = (o) => ({
             borderRadius: "4px",
             cursor: "pointer",
             "&:hover": {
-              background: o.palette.state.default
+              background: o.vars.palette.state.default
             },
             "& .M4LIcon-root": {
               minWidth: "16px",
               minHeight: "16px"
             },
             "& .M4LAccountPopover-menuItem": {
-              color: o.palette.text.primary,
-              ...o.typography.body,
+              color: o.vars.palette.text.primary,
+              ...o.colorSchemes.finalTheme.typography.body,
               borderRadius: "4px",
               width: "100%",
               minHeight: "20px",
@@ -4011,15 +4045,15 @@ const p = (o) => ({
           alignItems: "center",
           cursor: "pointer",
           "&:hover": {
-            background: o.palette.state.default
+            background: o.vars.palette.state.default
           },
           "& .M4LIcon-root": {
             minWidth: "16px",
             minHeight: "16px"
           },
           "& .M4LAccountPopover-logOut": {
-            color: o.palette.text.primary,
-            ...o.typography.body,
+            color: o.vars.palette.text.primary,
+            ...o.colorSchemes.finalTheme.typography.body,
             borderRadius: "4px",
             width: "100%",
             minHeight: "20px",
@@ -4096,7 +4130,7 @@ const p = (o) => ({
               minHeight: "36px",
               alignItems: "center",
               "&:hover": {
-                background: o.palette.state.default
+                background: o.vars.palette.state.default
               },
               "& .M4LIcon-root": {
                 minWidth: "20px",
@@ -4119,7 +4153,7 @@ const p = (o) => ({
             minHeight: "36px",
             alignItems: "center",
             "&:hover": {
-              background: o.palette.state.default
+              background: o.vars.palette.state.default
             },
             "& .M4LIcon-root": {
               minWidth: "20px",
@@ -4159,7 +4193,7 @@ const p = (o) => ({
       }
     }
   }
-}), m = (o) => ({
+}), I = (o) => ({
   M4LModuleLayout: {
     styleOverrides: {
       "&.M4LModuleLayout-root": {
@@ -4176,7 +4210,7 @@ const p = (o) => ({
       }
     }
   }
-}), k = (o) => ({
+}), T = (o) => ({
   M4LMasterDetailLayout: {
     styleOverrides: {
       "&.M4LMasterDetailLayout-root": {
@@ -4189,7 +4223,7 @@ const p = (o) => ({
           width: "100%",
           height: "100%",
           boxShadow: "none",
-          background: o.palette.background.default,
+          background: o.vars.palette.background.default,
           border: "0px",
           borderColor: "transparent",
           borderRadius: "4px",
@@ -4199,17 +4233,17 @@ const p = (o) => ({
           }
         },
         "& .M4LSplitLayout-secondPart": {
-          background: o.palette.background.default,
+          background: o.vars.palette.background.default,
           borderRadius: "4px"
         },
         "& .layout-pane-primary": {
-          background: o.palette.background.default,
+          background: o.vars.palette.background.default,
           borderRadius: "4px"
         }
       }
     }
   }
-}), B = (o) => ({
+}), R = (o) => ({
   M4LSplitLayout: {
     styleOverrides: {
       "&.M4LSplitLayout-root": {
@@ -4231,7 +4265,6 @@ const p = (o) => ({
           width: "100%",
           height: "100%",
           "& .M4LStack-root": {
-            gap: "8px",
             overflow: "hidden"
           }
         },
@@ -4274,7 +4307,7 @@ const p = (o) => ({
           width: "4px",
           top: "calc(50% - 22.5px)",
           position: "absolute",
-          background: o.palette.state.active,
+          background: o.vars.palette.state.active,
           borderRadius: "1px",
           margin: "1px 0px"
         },
@@ -4299,12 +4332,12 @@ const p = (o) => ({
           height: "4px !important",
           left: "calc(50% - 22.5px)",
           top: "unset",
-          background: o.palette.state.active,
+          background: o.vars.palette.state.active,
           borderRadius: "2px",
           zIndex: "1"
         },
         "& .splitter-layout > .layout-splitter:hover:before, .splitter-layout.layout-changing >  .layout-splitter:before": {
-          background: o.palette.state.hover
+          background: o.vars.palette.state.hover
         },
         "& .splitter-layout.splitter-layout-vertical": {
           flexDirection: "column",
@@ -4315,7 +4348,7 @@ const p = (o) => ({
             left: "0",
             right: "0",
             position: "absolute",
-            background: o.palette.state.borderPrimary
+            background: o.vars.palette.state.borderPrimary
           }
         },
         "& .splitter-layout:not(.splitter-layout-vertical)": {
@@ -4325,13 +4358,13 @@ const p = (o) => ({
             top: "0",
             bottom: "0",
             position: "absolute",
-            background: o.palette.state.borderPrimary
+            background: o.vars.palette.state.borderPrimary
           }
         }
       }
     }
   }
-}), I = (o) => ({
+}), A = (o) => ({
   M4LCommonActions: {
     styleOverrides: {
       "&.M4LCommonActions-root": {
@@ -4344,7 +4377,7 @@ const p = (o) => ({
       }
     }
   }
-}), S = (o) => ({
+}), D = (o) => ({
   M4LinearProgressIndeterminate: {
     styleOverrides: {
       "&.M4LinearProgressIndeterminate-root": {
@@ -4391,14 +4424,14 @@ const p = (o) => ({
           right: "100%",
           bottom: "0",
           left: "0",
-          backgroundColor: o.palette.state.focus,
+          backgroundColor: o.vars.palette.state.focus,
           width: "0",
           animation: "borealisBar 2s linear infinite"
         }
       }
     }
   }
-}), R = (o) => ({
+}), P = (o) => ({
   M4LPropertyValue: {
     styleOverrides: {
       "&.M4LPropertyValue-root": {
@@ -4409,7 +4442,7 @@ const p = (o) => ({
         minHeight: "23px",
         flexDirection: "column",
         borderBottom: "1px solid",
-        borderColor: o.palette.state.borderDisable,
+        borderColor: o.vars.palette.state.borderDisable,
         "&.M4LPropertyValue-isMobile": {
           gridTemplateColumns: "1fr!important",
           minHeight: "24px"
@@ -4426,8 +4459,8 @@ const p = (o) => ({
           maxWidth: "100%",
           width: "100% !important",
           minHeight: "24px",
-          ...o.typography.body,
-          color: o.palette.text.secondary,
+          ...o.colorSchemes.finalTheme.typography.body,
+          color: o.vars.palette.text.secondary,
           fontWeight: "400 !important",
           display: "flex",
           alignItems: "center",
@@ -4437,8 +4470,8 @@ const p = (o) => ({
           overflow: "hidden",
           overflowWrap: "break-word",
           "& .M4LTypography-root": {
-            ...o.typography.body,
-            color: o.palette.text.secondary,
+            ...o.colorSchemes.finalTheme.typography.body,
+            color: o.vars.palette.text.secondary,
             fontWeight: "400 !important"
           }
         },
@@ -4446,8 +4479,8 @@ const p = (o) => ({
           maxWidth: "100%",
           width: "100%",
           minHeight: "24px",
-          ...o.typography.body,
-          color: o.palette.text.primary,
+          ...o.colorSchemes.finalTheme.typography.body,
+          color: o.vars.palette.text.primary,
           overflow: "hidden",
           textOverflow: "ellipsis",
           position: "relative",
@@ -4456,8 +4489,8 @@ const p = (o) => ({
           overflowWrap: "break-word",
           justifyContent: "center",
           "& .M4LTypography-root": {
-            ...o.typography.body,
-            color: o.palette.text.primary
+            ...o.colorSchemes.finalTheme.typography.body,
+            color: o.vars.palette.text.primary
           },
           "& .M4LRHFTextField-root.M4LRHFTextField-sizeSmall": {
             "& .MuiFormControl-root": {
@@ -4500,15 +4533,16 @@ const p = (o) => ({
       }
     }
   }
-}), T = (o) => ({
+}), H = (o) => ({
   M4LTab: {
     styleOverrides: {
       "&.M4LTab-root": {
         width: "fit-content",
-        background: o.palette.background.header,
+        background: o.vars.palette.background.header,
         borderRadius: "4px 4px 0 0",
+        zIndex: "3",
         "& .MuiButtonBase-root": {
-          background: o.palette.background.header,
+          background: o.vars.palette.background.header,
           height: "32px",
           display: "flex",
           flexDirection: "row",
@@ -4518,25 +4552,35 @@ const p = (o) => ({
           minHeight: "fit-content",
           minWidth: "fit-content",
           gap: "8px",
-          ...o.typography.body,
-          color: o.palette.text.primary,
+          ...o.colorSchemes.finalTheme.typography.body,
+          color: o.vars.palette.text.primary,
           lineHeight: "none",
           borderRadius: "4px 4px 0 0",
           "& .M4LIcon-root": {
             marginBottom: "0"
+          },
+          [o.breakpoints.down("md")]: {
+            height: "44px",
+            minHeight: "fit-content"
           }
         },
+        "& .MuiTab-root": {
+          borderBottom: `1px solid ${o.vars.palette.state.borderSecondary}`
+        },
         "& .MuiButtonBase-root:hover": {
-          color: o.palette.state.hover,
+          color: o.vars.palette.state.hover,
           "& .M4LIcon-icon": {
-            backgroundColor: o.palette.state.hover
+            backgroundColor: o.vars.palette.state.hover
           }
         },
         "& .Mui-selected": {
-          background: o.palette.background.default,
-          border: "0px",
-          ...o.typography.bodyDens,
-          color: o.palette.text.primary,
+          background: o.vars.palette.background.default,
+          borderTop: `1px solid ${o.vars.palette.state.borderSecondary}`,
+          borderLeft: `1px solid ${o.vars.palette.state.borderSecondary}`,
+          borderRight: `1px solid ${o.vars.palette.state.borderSecondary}`,
+          borderBottom: `1px solid ${o.vars.palette.background.default}`,
+          ...o.colorSchemes.finalTheme.typography.bodyDens,
+          color: o.vars.palette.text.primary,
           lineHeight: "none",
           "&::before": {
             content: '""',
@@ -4544,7 +4588,7 @@ const p = (o) => ({
             height: "2px",
             left: "1.5px",
             top: "0px",
-            backgroundColor: o.palette.state.active,
+            backgroundColor: o.vars.palette.state.active,
             borderRadius: "2px 2px 0px 0px",
             position: "absolute"
           }
@@ -4552,27 +4596,27 @@ const p = (o) => ({
       }
     }
   }
-}), A = (o) => ({
+}), F = (o) => ({
   M4LAccordion: {
     styleOverrides: {
       "&.M4LAccordion-root": {
         width: "100%",
-        background: o.palette.background.default,
+        background: o.vars.palette.background.default,
         borderRadius: "4px",
         "& .M4LTypography-root": {
           padding: "4px 8px",
           display: "flex",
           alignItems: "center",
           "& .MuiTypography-root": {
-            ...o.typography.bodyDens,
-            color: o.palette.text.primary
+            ...o.colorSchemes.finalTheme.typography.bodyDens,
+            color: o.vars.palette.text.primary
           }
         },
         "& .MuiPaper-root": {
           marginBottom: "0px",
           borderRadius: "4px",
           border: "1px solid",
-          borderColor: o.palette.state.borderPrimary,
+          borderColor: o.vars.palette.state.borderPrimary,
           "& .MuiCollapse-root": {
             padding: "8px",
             "& .MuiCollapse-wrapper": {
@@ -4607,20 +4651,20 @@ const p = (o) => ({
               }
             },
             "& .Mui-expanded": {
-              background: o.palette.state.active12,
+              background: o.vars.palette.state.active12,
               height: "28px",
               minHeight: "28px",
               "& .MuiButtonBase-root": {
                 "&.MuiAccordionSummary-content": {
                   borderRadius: "0 0 0 0 !important",
-                  background: o.palette.state.active12,
+                  background: o.vars.palette.state.active12,
                   height: "28px",
                   minHeight: "28px"
                 },
                 "& .M4LTypography-root": {
                   "& .MuiTypography-root": {
-                    ...o.typography.bodyDens,
-                    color: o.palette.text?.primary
+                    ...o.colorSchemes.finalTheme.typography.bodyDens,
+                    color: o.vars.palette.text?.primary
                   }
                 },
                 "& .MuiAccordionSummary-expandIconWrapper": {
@@ -4646,17 +4690,17 @@ const p = (o) => ({
               minHeight: "28px",
               padding: "0",
               "&:hover": {
-                background: o.palette.state?.hoverDefault
+                background: o.vars.palette.state?.hoverDefault
               }
             },
             "& .MuiCollapse-root": {
-              background: o.palette.background.default,
-              borderColor: o.palette.state.borderPrimary,
+              background: o.vars.palette.background.default,
+              borderColor: o.vars.palette.state.borderPrimary,
               borderRadius: "0px 0px 4px 4px",
               padding: "8px",
               "&.MuiButtonBase-root": {
                 padding: "4px 8px !important",
-                background: o.palette.background.neutral
+                background: o.vars.palette.background.neutral
               },
               "& .M4LAccordion-content": {
                 display: "flex !important",
@@ -4693,7 +4737,7 @@ const p = (o) => ({
       }
     }
   }
-}), D = (o) => ({
+}), W = (o) => ({
   M4LRHFormProvider: {
     styleOverrides: {
       "&.M4LRHFormProvider-root": {
@@ -4708,12 +4752,12 @@ const p = (o) => ({
       }
     }
   }
-}), P = (o) => ({
+}), z = (o) => ({
   M4LPeriod: {
     styleOverrides: {
       "&.M4LPeriod-root": {
         border: "solid 1px",
-        borderColor: o.palette.state.borderPrimary,
+        borderColor: o.vars.palette.state.borderPrimary,
         display: "flex",
         width: "100%",
         height: "auto",
@@ -4734,11 +4778,11 @@ const p = (o) => ({
             borderRight: "1px solid",
             display: "flex",
             alignItems: "center",
-            borderColor: o.palette.state.borderPrimary,
+            borderColor: o.vars.palette.state.borderPrimary,
             [o.breakpoints.down("md")]: {
               borderRight: "0",
               borderBottom: "1px solid",
-              borderColor: o.palette.state.borderPrimary
+              borderColor: o.vars.palette.state.borderPrimary
             }
           },
           "& .M4LPeriod-skeletonFieldSecondary": {
@@ -4749,20 +4793,20 @@ const p = (o) => ({
           }
         },
         "&:hover": {
-          borderColor: o.palette.state.hover
+          borderColor: o.vars.palette.state.hover
         },
         "&.M4LPeriod-isFocus": {
-          borderColor: o.palette.state.active
+          borderColor: o.vars.palette.state.active
         },
         "& .MuiAutocomplete-root": {
           width: "100%",
           borderRadius: 0,
           borderRight: "1px solid",
-          borderColor: o.palette.state.borderPrimary,
+          borderColor: o.vars.palette.state.borderPrimary,
           [o.breakpoints.down("md")]: {
             borderRight: 0,
             borderBottom: "1px solid",
-            borderColor: o.palette.state.borderPrimary
+            borderColor: o.vars.palette.state.borderPrimary
           },
           "& .MuiInput-root": {
             backgroundColor: "transparent"
@@ -4816,7 +4860,7 @@ const p = (o) => ({
           height: "100% !important",
           padding: "0px 0px 0px 8px",
           borderRight: "1px solid",
-          borderColor: o.palette.state.borderPrimary
+          borderColor: o.vars.palette.state.borderPrimary
         },
         "& .M4LPeriod-containerDateValue": {
           display: "flex",
@@ -4824,63 +4868,63 @@ const p = (o) => ({
           padding: "0px 0px 0px 8px"
         },
         "&.M4LPeriod-stateError": {
-          borderColor: o.palette.state.error.normal,
-          boxShadow: o.customShadows.z2,
+          borderColor: o.vars.palette.state.error.normal,
+          boxShadow: o.customShadows?.z2,
           "&.M4LPeriod-stateError:hover": {
-            borderColor: o.palette.state.error.normal,
+            borderColor: o.vars.palette.state.error.normal,
             background: "transparent",
-            boxShadow: o.customShadows.z2
+            boxShadow: o.customShadows?.z2
           },
           "& .MuiTextField-root:hover": {
             width: "100%",
             background: "transparent",
             "& .MuiInputBase-root:hover": {
-              background: o.palette.error.opacity,
+              background: o.vars.palette.error.opacity,
               height: "100%"
             }
           }
         },
         "&.M4LPeriod-stateWarning": {
-          borderColor: o.palette.state.warning.normal,
-          boxShadow: o.customShadows.z2,
+          borderColor: o.vars.palette.state.warning.normal,
+          boxShadow: o.customShadows?.z2,
           "&.M4LPeriod-stateWarning:hover": {
-            borderColor: o.palette.state.warning.normal,
-            boxShadow: o.customShadows.z2,
+            borderColor: o.vars.palette.state.warning.normal,
+            boxShadow: o.customShadows?.z2,
             background: "transparent",
             "& .MuiTextField-root:hover": {
               background: "transparent",
               "& .MuiInputBase-root:hover": {
-                background: o.palette.warning.opacity
+                background: o.vars.palette.warning.opacity
               }
             }
           }
         },
         "&.M4LPeriod-stateSuccess": {
-          borderColor: o.palette.state.success.normal,
-          boxShadow: o.customShadows.z2,
+          borderColor: o.vars.palette.state.success.normal,
+          boxShadow: o.customShadows?.z2,
           "&.M4LPeriod-stateSuccess:hover": {
-            borderColor: o.palette.state.success.normal,
-            boxShadow: o.customShadows.z2,
+            borderColor: o.vars.palette.state.success.normal,
+            boxShadow: o.customShadows?.z2,
             background: "transparent",
             "& .MuiTextField-root:hover": {
               background: "transparent",
               "& .MuiInputBase-root:hover": {
-                background: o.palette.success.opacity
+                background: o.vars.palette.success.opacity
               }
             }
           }
         },
         "&.M4LPeriod-stateInfo": {
-          borderColor: o.palette.state.info.normal,
-          boxShadow: o.customShadows.z2,
+          borderColor: o.vars.palette.state.info.normal,
+          boxShadow: o.customShadows?.z2,
           "&.M4LPeriod-stateInfo:hover": {
-            borderColor: o.palette.state.info.normal,
+            borderColor: o.vars.palette.state.info.normal,
             background: "transparent",
-            boxShadow: o.customShadows.z2,
+            boxShadow: o.customShadows?.z2,
             "& .MuiTextField-root:hover": {
               background: "transparent",
               "& .MuiInputBase-root:hover": {
-                background: o.palette.info.opacity
+                background: o.vars.palette.info.opacity
               }
             }
           }
@@ -4888,7 +4932,7 @@ const p = (o) => ({
       }
     }
   }
-}), F = (o) => ({
+}), V = (o) => ({
   M4LModalDialog: {
     styleOverrides: {
       "&.M4LModal-root": {
@@ -4908,8 +4952,8 @@ const p = (o) => ({
             height: "100%",
             overflow: "hidden",
             width: "100%",
-            background: o.palette.background.default,
-            boxShadow: o.customShadows.z3,
+            background: o.vars.palette.background.default,
+            boxShadow: o.customShadows?.z2,
             borderRadius: "4px",
             "& .M4LCommonActions-root": {
               padding: "16px 0 0 0",
@@ -4946,12 +4990,12 @@ const p = (o) => ({
                   width: "100px"
                 },
                 "& .MuiTypography-subtitle": {
-                  ...o.typography.subtitleDens,
-                  color: o.palette.text.primary
+                  ...o.colorSchemes.finalTheme.typography.subtitleDens,
+                  color: o.vars.palette.text.primary
                 },
                 "& .M4LModal-messageContainer": {
-                  ...o.typography.body,
-                  color: o.palette.text.secondary,
+                  ...o.colorSchemes.finalTheme.typography.body,
+                  color: o.vars.palette.text.secondary,
                   textAlign: "center"
                 }
               }
@@ -4970,7 +5014,7 @@ const p = (o) => ({
                 justifyContent: "center"
               },
               "& .M4LModal-titleHeader": {
-                ...o.typography.paragraphDens,
+                ...o.colorSchemes.finalTheme.typography.paragraphDens,
                 width: "100%",
                 whiteSpace: "nowrap",
                 textOverflow: "ellipsis",
@@ -4987,7 +5031,6 @@ const p = (o) => ({
               flex: "1",
               overflow: "hidden",
               "& .M4LStack-root": {
-                gap: "8px",
                 overflow: "hidden"
               }
             }
@@ -5006,24 +5049,24 @@ const p = (o) => ({
         margin: "0px",
         maxWidth: "unset",
         maxHeight: "unset",
-        background: o.palette.state.active12,
+        background: o.vars.palette.state.active12,
         border: "2px solid",
-        borderColor: o.palette.state.borderPrimary,
-        boxShadow: o.customShadows.z4,
+        borderColor: o.vars.palette.state.borderPrimary,
+        boxShadow: o.vars.customShadows.z4,
         width: "auto",
         height: "auto"
       }
     }
   }
-}), H = (o) => ({
+}), O = (o) => ({
   M4LPaperForm: {
     styleOverrides: {
       "&.M4LPaperForm-root": {
         padding: "0",
         borderRadius: "4px",
-        background: o.palette.background.default,
+        background: o.vars.palette.background.default,
         border: "1px solid",
-        borderColor: o.palette.state.borderSecondary,
+        borderColor: o.vars.palette.state.borderSecondary,
         width: "100%",
         height: "auto",
         "&.M4LPaperForm-isForm .M4LPaperForm-content": {
@@ -5036,15 +5079,15 @@ const p = (o) => ({
           padding: "2px 4px 2px 8px",
           margin: "0px",
           borderRadius: "4px",
-          background: o.palette.background.header,
+          background: o.vars.palette.background.header,
           borderBottom: "none",
           [o.breakpoints.down("md")]: {
             height: "36px",
             minHeight: "36px"
           },
           "& .M4LPaperForm-iconTitleContainer": {
-            ...o.typography.bodyDens,
-            color: o.palette.text.primary,
+            ...o.colorSchemes.finalTheme.typography.bodyDens,
+            color: o.vars.palette.text.primary,
             display: "flex",
             gap: "8px",
             "& .M4LPaperForm-iconHeaderContainer": {
@@ -5058,13 +5101,13 @@ const p = (o) => ({
           height: "fit-content",
           width: "100%",
           padding: "12px",
-          color: o.palette.text.primary,
-          ...o.typography.body
+          color: o.vars.palette.text.primary,
+          ...o.colorSchemes.finalTheme.typography.body
         }
       }
     }
   }
-}), W = (o) => ({
+}), j = (o) => ({
   M4LTooltip: {
     styleOverrides: {
       "&.M4LTooltip-root": {
@@ -5072,20 +5115,20 @@ const p = (o) => ({
         "& .MuiTooltip-tooltip": {
           display: "flex",
           alignItems: "center",
-          background: o.palette.info.main,
+          background: o.vars.palette.info.main,
           borderRadius: "4px",
-          boxShadow: o.customShadows.z3,
+          boxShadow: o.customShadows?.z2,
           padding: "4px 8px",
           height: "fit-content",
           minHeight: "24px",
           width: "fit-content",
-          color: r.marbleLight[30],
-          ...o.typography.body
+          color: e.marbleLight[30],
+          ...o.colorSchemes.finalTheme.typography.body
         }
       }
     }
   }
-}), z = (o) => ({
+}), G = (o) => ({
   M4LBadge: {
     styleOverrides: {
       "&.M4LBadge-root": {
@@ -5105,26 +5148,26 @@ const p = (o) => ({
             paddingLeft: "7px",
             borderRadius: "4px",
             border: "1px solid",
-            borderColor: o.palette.background.default,
-            backgroundColor: o.palette.state.error.normal,
+            borderColor: o.vars.palette.background.default,
+            backgroundColor: o.vars.palette.state.error.normal,
             height: "16px",
             top: "14%",
             right: "16%",
-            color: o.palette.patronus?.marbleLight[30]
+            color: o.vars.palette.patronus?.marbleLight[30]
           }
         }
       }
     }
   }
-}), V = (o) => ({
+}), N = (o) => (console.log("Test media query", o.typography.body), {
   M4LDataGrid: {
     styleOverrides: {
       "&.M4LDataGrid-root": {
-        background: o.palette.background.default,
+        background: o.vars.palette.background.default,
         boxShadow: "unset",
         borderRadius: "4px",
         border: "1px solid",
-        borderColor: o.palette.state.borderPrimary,
+        borderColor: o.vars.palette.state.borderPrimary,
         display: "flex",
         position: "relative",
         flexDirection: "column",
@@ -5145,7 +5188,7 @@ const p = (o) => ({
           }
         },
         "& .M4LDataGrid-actions": {
-          ...o.typography.body,
+          ...o.colorSchemes.finalTheme.typography.body,
           left: "0px",
           right: "0px",
           top: "0px",
@@ -5157,7 +5200,7 @@ const p = (o) => ({
           borderRadius: "4px",
           alignItems: "center",
           justifyContent: "space-between",
-          background: o.palette.background.default,
+          background: o.vars.palette.background.default,
           position: "absolute",
           gap: "8px",
           ["@container main (max-width: 600px)"]: {
@@ -5169,7 +5212,7 @@ const p = (o) => ({
             gap: "8px",
             marginLeft: "12px",
             "& .M4LIconButton-root": {
-              background: o.palette.background.default
+              background: o.vars.palette.background.default
             }
           },
           "& .M4LDataGrid-rowsCount": {
@@ -5177,8 +5220,8 @@ const p = (o) => ({
             gap: "8px",
             alignItems: "center",
             "& .M4LDataGrid-rowsCountLabel": {
-              ...o.typography.body,
-              color: o.palette.text.primary,
+              ...o.colorSchemes.finalTheme.typography.body,
+              color: o.vars.palette.text.primary,
               height: "100%"
             },
             "& .M4LDataGrid-rowsCountValue": {
@@ -5186,7 +5229,7 @@ const p = (o) => ({
               paddingBottom: "2px",
               paddingLeft: "4px",
               paddingRight: "6px",
-              background: o.palette.background.default,
+              background: o.vars.palette.background.default,
               borderRadius: "4px"
             }
           },
@@ -5208,8 +5251,8 @@ const p = (o) => ({
           padding: "0 4px",
           borderRadius: "4px",
           border: "none",
-          boxshadow: o.customShadows.z2,
-          background: o.palette.background.default,
+          boxshadow: o.customShadows?.z2,
+          background: o.vars.palette.background.default,
           ["@container main (max-width: 600px)"]: {
             top: "44px"
           },
@@ -5220,7 +5263,7 @@ const p = (o) => ({
             borderRadius: "4px 0px",
             "& .rdg ": {
               border: "none",
-              background: o.palette.background.default,
+              background: o.vars.palette.background.default,
               gridColumnGap: "0px",
               gridRowGap: "0px",
               userSelect: "initial",
@@ -5229,16 +5272,16 @@ const p = (o) => ({
               overflow: "auto",
               padding: "0px",
               "--rdg-grid-inline-size": "0px",
-              "--rdg-header-background-color": o.palette.background.header,
+              "--rdg-header-background-color": o.vars.palette.background.header,
               "--rdg-row-selected-background-color": "#D9E9FC",
               "--rdg-row-hover-background-color": "#D9E9FC",
-              "--rdg-background-color": o.palette.background.default,
-              "--rdg-selection-color": o.palette.state.lineTheme,
-              "--row-selected-hover-background-color": (o.palette.mode === "light", o.palette.state.toneOp),
-              "--rdg-checkbox-color": o.palette.primary.main,
+              "--rdg-background-color": o.vars.palette.background.default,
+              "--rdg-selection-color": o.vars.palette.state.lineTheme,
+              "--row-selected-hover-background-color": (o.colorSchemes.finalTheme.palette.mode === "light", o.vars.palette.state?.toneOp),
+              "--rdg-checkbox-color": o.vars.palette.primary.main,
               "--rdg-checkbox-focus-color": t(
-                o.palette.primary.main,
-                o.palette.action.selectedOpacity
+                o.colorSchemes.finalTheme.palette.primary.main,
+                o.colorSchemes.finalTheme.palette.action.selectedOpacity
               ),
               "--rdg-border-color": "none",
               "&:last-child .rdg-cell": {
@@ -5246,7 +5289,7 @@ const p = (o) => ({
                 borderBottom: "1px solid",
                 borderLeft: "0.5px solid",
                 borderRight: "0.5px solid",
-                borderColor: o.palette.state.borderDisable
+                borderColor: o.vars.palette.state.borderDisable
               }
             },
             '& [role="columnheader"]': {
@@ -5255,21 +5298,21 @@ const p = (o) => ({
             },
             "& .rdg-row": {
               '&[aria-selected="false"] .rdg-cell': {
-                backgroundColor: o.palette.background.default,
+                backgroundColor: o.vars.palette.background.default,
                 borderLeft: "0.5px solid",
-                borderColor: o.palette.state.borderDisable
+                borderColor: o.vars.palette.state.borderDisable
               },
               "&:nth-of-type(odd)": {
                 "& .rdg-cell": {
-                  backgroundColor: o.palette.background.default
+                  backgroundColor: o.vars.palette.background.default
                 }
               },
               '&[aria-selected="true"] .rdg-cell': {
-                backgroundColor: o.palette.state.toneOp
+                backgroundColor: o.vars.palette.state?.toneOp
               },
               "&:hover": {
                 "& .rdg-cell": {
-                  backgroundColor: `${o.palette.state.gridHover}!important`,
+                  backgroundColor: `${o.vars.palette.state.gridHover}!important`,
                   transition: "background-color 0.1s linear"
                 }
               },
@@ -5279,8 +5322,8 @@ const p = (o) => ({
               transition: "background-color 0.1s linear",
               borderBottom: "0px solid transparent",
               borderRight: "0.5px solid transparent",
-              borderColor: o.palette.background.background,
-              color: o.palette.text.secondary,
+              borderColor: o.vars.palette.background.background,
+              color: o.vars.palette.text.secondary,
               display: "inline",
               justifyContent: "center",
               alignItems: "center",
@@ -5288,7 +5331,7 @@ const p = (o) => ({
               gridTemplateColumns: "auto",
               "& .rdg-text-editor": {
                 textAlign: "inherit",
-                color: o.palette.text.secondary,
+                color: o.vars.palette.text.secondary,
                 padding: "0 8px",
                 lineHeight: "var(--rdg-row-height)!important",
                 border: "0",
@@ -5296,8 +5339,8 @@ const p = (o) => ({
                 borderBottom: "1px solid",
                 borderLeft: "0.5px solid",
                 borderRight: "0.5px solid",
-                borderColor: `${o.palette.state.borderDisable}!important`,
-                ...o.typography.body
+                borderColor: `${o.vars.palette.state.borderDisable}!important`,
+                ...o.colorSchemes.finalTheme.typography.body
               },
               "&.rdg-cell-frozen": {
                 display: "flex",
@@ -5307,7 +5350,7 @@ const p = (o) => ({
               },
               "&:after": {
                 content: '""',
-                borderRight: `0px solid ${o.palette.divider}`,
+                borderRight: `0px solid ${o.vars.palette.divider}`,
                 position: "absolute",
                 right: "0px",
                 height: "100%"
@@ -5317,11 +5360,11 @@ const p = (o) => ({
               }
             },
             '& .rdg-cell[role="gridcell"]': {
-              ...o.typography.body,
+              ...o.colorSchemes.finalTheme.typography.body,
               lineHeight: "var(--rdg-row-height)!important"
             },
             '& .rdg-cell[role="columnheader"] .rdg-header-sort-name': {
-              ...o.typography.bodyDens,
+              ...o.colorSchemes.finalTheme.typography.bodyDens,
               lineHeight: "var(--rdg-row-height)!important",
               height: "28px",
               display: "flex",
@@ -5329,15 +5372,15 @@ const p = (o) => ({
               alignItems: "center"
             },
             '& .rdg-cell[role="columnheader"] [draggable="true"]': {
-              ...o.typography.bodyDens,
+              ...o.colorSchemes.finalTheme.typography.bodyDens,
               lineHeight: "var(--rdg-row-height)!important"
             },
             "& [aria-selected=true]": {
-              backgroundColor: o.palette.state.toneOp,
-              color: o.palette.text.primary,
+              backgroundColor: o.vars.palette.state?.toneOp,
+              color: o.vars.palette.text.primary,
               outline: "1px solid",
               outlineOffset: "-1px",
-              outlineColor: o.palette.state.lineTheme
+              outlineColor: o.vars.palette.state.lineTheme
             },
             "& .rdg-cell.rdg-cell-align-left": {
               textAlign: "start",
@@ -5357,26 +5400,26 @@ const p = (o) => ({
             },
             "& .rdg-row :last-child:after": {
               borderRight: "0px solid",
-              borderColor: o.palette.background.neutral
+              borderColor: o.vars.palette.background.neutral
             },
             "& .rdg-header-row": {
-              backgroundColor: o.palette.background.header
+              backgroundColor: o.vars.palette.background.header
             },
             "& .rdg-header-row .rdg-cell": {
               fontFamily: o.typography.body,
               fontWeight: o.typography.body,
               fontSize: o.typography.body,
-              color: o.palette.text.primary,
+              color: o.vars.palette.text.primary,
               borderRight: "0.5px solid !important",
               boxShadow: "none",
               gridTemplateColumns: "auto",
               borderBottom: "0.5px solid !important",
-              borderColor: `${o.palette.state.borderDisable}!important`,
+              borderColor: `${o.vars.palette.state.borderDisable}!important`,
               '& [draggable="true"]': {
                 fontSize: o.typography.body
               },
               "&.rdg-cell-frozen-last": {
-                borderColor: o.palette.background.default,
+                borderColor: o.vars.palette.background.default,
                 boxShadow: "var(--rdg-frozen-cell-box-shadow)",
                 "&:after": {}
               },
@@ -5406,7 +5449,7 @@ const p = (o) => ({
               width: "100%",
               flexGrow: "1",
               alignItems: "center",
-              color: o.palette.text.primary
+              color: o.vars.palette.text.primary
             }
           }
         },
@@ -5458,7 +5501,7 @@ const p = (o) => ({
       }
     }
   }
-}), O = (o) => ({
+}), E = (o) => ({
   M4LPager: {
     styleOverrides: {
       "&.M4LPager-root": {
@@ -5476,7 +5519,7 @@ const p = (o) => ({
           alignItems: "center",
           gap: "2px",
           width: "fit-content",
-          background: o.palette.background.default,
+          background: o.vars.palette.background.default,
           borderRadius: "4px",
           margin: "auto",
           [o.breakpoints.down("sm")]: {
@@ -5503,8 +5546,8 @@ const p = (o) => ({
           alignItems: "center",
           "& .M4LPager-select": {
             "& .MuiSelect-select": {
-              ...o.typography.body,
-              color: o.palette.text.primary
+              ...o.colorSchemes.finalTheme.typography.body,
+              color: o.vars.palette.text.primary
             },
             "& .MuiSelect-icon": {
               right: "0",
@@ -5519,11 +5562,11 @@ const p = (o) => ({
         "& .MuiInputBase-root": {
           padding: "4px 2px 4px 6px",
           borderRadius: "4px",
-          background: o.palette.background.default,
+          background: o.vars.palette.background.default,
           overflow: "hidden",
           minWidth: "fit-content",
           "& .MuiSvgIcon-root": {
-            background: o.palette.background.default
+            background: o.vars.palette.background.default
           }
         },
         "& .M4LPager-skeletonRoot": {
@@ -5558,14 +5601,14 @@ const p = (o) => ({
       "&.M4LPager-selectMenuPopover": {
         "& .MuiList-root": {
           "& .MuiMenuItem-root": {
-            ...o.typography.body,
-            color: o.palette.text.primary
+            ...o.colorSchemes.finalTheme.typography.body,
+            color: o.vars.palette.text.primary
           }
         }
       }
     }
   }
-}), j = (o) => ({
+}), $ = (o) => ({
   M4LCheckBox: {
     styleOverrides: {
       "&.M4LCheckBox-root": {
@@ -5580,8 +5623,8 @@ const p = (o) => ({
           height: "36px"
         },
         "& .MuiTypography-root": {
-          color: o.palette.text.primary,
-          ...o.typography.body
+          color: o.vars.palette.text.primary,
+          ...o.colorSchemes.finalTheme.typography.body
         },
         "&.M4LCheckBox-small ": {
           "& .MuiButtonBase-root": {
@@ -5611,24 +5654,24 @@ const p = (o) => ({
           borderRadius: "4px"
         },
         "& .MuiButtonBase-root:hover": {
-          backgroundColor: o.palette.state?.active12,
+          backgroundColor: o.vars.palette.state?.active12,
           borderRadius: "4px"
         },
         "& .Mui-focusVisible": {
           border: "1px solid",
-          borderColor: o.palette.state?.focus
+          borderColor: o.vars.palette.state?.focus
         },
         "& .MuiButtonBase-root:hover .MuiSvgIcon-root": {
-          fill: o.palette.state?.hover
+          fill: o.vars.palette.state?.hover
         },
         "& .M4LCheckBox-checkTypography .MuiTypography-root": {
-          ...o.typography.body
+          ...o.colorSchemes.finalTheme.typography.body
         },
         "& .M4LCheckBox-stateDisabled .MuiSvgIcon-root": {
-          fill: o.palette.state?.default
+          fill: o.vars.palette.state?.default
         },
         "& .M4LCheckBox-stateDisabled .MuiTypography-root": {
-          color: o.palette.text.disabled
+          color: o.vars.palette.text.disabled
         },
         "& .MuiButtonBase-root .Mui-focusVisible:focus-visible": {
           outline: "#fff00"
@@ -5636,7 +5679,7 @@ const p = (o) => ({
       }
     }
   }
-}), G = (o) => ({
+}), _ = (o) => ({
   M4LStack: {
     styleOverrides: {
       "&.M4LStack-root": {
@@ -5649,7 +5692,7 @@ const p = (o) => ({
       }
     }
   }
-}), N = (o) => ({
+}), U = (o) => ({
   M4LTabs: {
     styleOverrides: {
       "&.M4LTabs-root": {
@@ -5658,19 +5701,20 @@ const p = (o) => ({
         position: "relative",
         minHeight: "32px",
         borderRadius: "4px 4px 0 0",
+        zIndex: "2",
         "& .MuiTabs-indicator": {
           display: "none"
         },
         "& .MuiButtonBase-root": {
-          background: o.palette.background.background,
+          background: o.vars.palette.background.background,
           borderRadius: "4px 4px 0 0",
           "& .MuiSvgIcon-root": {
-            color: o.palette.text.primary
+            color: o.vars.palette.text.primary
           }
         },
         "& .MuiButtonBase-root:hover": {
           "& .MuiSvgIcon-root": {
-            color: o.palette.state.active
+            color: o.vars.palette.state.active
           }
         },
         "& .MuiTabs-scroller": {
@@ -5678,8 +5722,7 @@ const p = (o) => ({
           "& .MuiTabs-flexContainer": {
             padding: "0px",
             backgroundColor: "transparent",
-            background: o.palette.background.header,
-            width: "fit-content",
+            width: "100%",
             borderRadius: "4px 4px 0 0"
           }
         },
@@ -5689,7 +5732,7 @@ const p = (o) => ({
       }
     }
   }
-}), E = (o) => ({
+}), q = (o) => ({
   M4LNoItemSelected: {
     styleOverrides: {
       "&.M4LNoItemSelected-root": {
@@ -5709,7 +5752,7 @@ const p = (o) => ({
       }
     }
   }
-}), $ = (o) => ({
+}), Y = (o) => ({
   M4LScrollBar: {
     styleOverrides: {
       "&.M4LScrollBar-root": {
@@ -5734,17 +5777,17 @@ const p = (o) => ({
           position: "relative"
         },
         "& .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before": {
-          background: o.palette.state.scrollBar,
+          background: o.vars.palette.state.scrollBar,
           borderRadius: "2px"
         },
         "& .simplebar-track.simplebar-vertical .simplebar-scrollbar:before": {
-          background: o.palette.state.scrollBar,
+          background: o.vars.palette.state.scrollBar,
           borderRadius: "2px"
         }
       }
     }
   }
-}), _ = (o) => ({
+}), X = (o) => ({
   M4LGridLayout: {
     styleOverrides: {
       "&.M4LGridLayout-root": {
@@ -5752,34 +5795,45 @@ const p = (o) => ({
       }
     }
   }
-}), U = (o) => ({
+}), J = (o) => ({
   M4LTabContent: {
     styleOverrides: {
       "&.M4LTabContent-root": {
-        padding: "0px",
+        padding: "12px",
         display: "flex",
         overflow: "hidden",
         height: "100%",
         flexDirection: "column",
         gap: "8px",
-        background: o.palette.background.default,
-        borderRadius: "0 0 4px 4px",
+        background: o.vars.palette.background.default,
+        borderRadius: "0 4px 4px 4px",
         position: "relative",
         flex: 1,
+        borderTop: "1px solid",
+        borderLeft: "1px solid",
+        borderRight: "1px solid",
+        borderBottom: "1px solid",
+        borderColor: o.vars.palette.state.borderSecondary,
+        boxSizing: "border-box",
+        zIndex: "1",
+        top: "-1px",
+        "& .M4LStack-root": {
+          gap: "8px !important"
+        },
         "&.M4LTabContent-root > div": {
           gap: "8px"
         }
       }
     }
   }
-}), Y = (o) => ({
+}), K = (o) => ({
   M4LMenuActions: {
     styleOverrides: {
       "&.M4LMenuActions-root": {
         "& .MuiPaper-root": {
           display: "flex",
           flexDirection: "column",
-          background: o.palette.background.default,
+          background: o.vars.palette.background.default,
           gap: "8px",
           "& .MuiButtonBase-root": {
             display: "flex",
@@ -5798,15 +5852,15 @@ const p = (o) => ({
           }
         },
         "& .M4LMenuActions-itemDelete": {
-          color: o.palette.state.error.normal,
+          color: o.vars.palette.state.error.normal,
           "& .M4LIcon-root .M4LIcon-icon": {
-            backgroundColor: o.palette.state.error.normal
+            backgroundColor: o.vars.palette.state.error.normal
           }
         }
       }
     }
   }
-}), q = (o) => ({
+}), Q = (o) => ({
   M4LPrintingSystem: {
     styleOverrides: {
       "&.M4LPrintingSystem-root": {
@@ -5845,17 +5899,17 @@ const p = (o) => ({
         "& .M4LPrintingSystem-textBoxNodeRoot": {
           height: "auto",
           "&.M4LPrintingSystem-textBoxNodeVariant-h1": {
-            ...o.typography.h1,
+            ...o.colorSchemes.finalTheme.typography.h1,
             fontSize: "18px!important"
           },
           "&.M4LPrintingSystem-textBoxNodeVariant-h3": {
-            ...o.typography.subtitle
+            ...o.colorSchemes.finalTheme.typography.subtitle
           },
           "&.M4LPrintingSystem-textBoxNodeVariant-body": {
-            ...o.typography.body
+            ...o.colorSchemes.finalTheme.typography.body
           },
           "&.M4LPrintingSystem-textBoxNodeVariant-action": {
-            ...o.typography.action,
+            ...o.colorSchemes.finalTheme.typography.action,
             fontSize: "10px!important"
           }
         },
@@ -5872,12 +5926,12 @@ const p = (o) => ({
             border: "2px",
             backgroundColor: "#F0F2F2",
             "& .M4LPrintingSystem-paperNodeTitle": {
-              ...o.typography.subtitleDens,
+              ...o.colorSchemes.finalTheme.typography.subtitleDens,
               fontSize: "12px!important",
               color: "#364040"
             },
             "& .M4LPrintingSystem-paperNodeTitleSecondary": {
-              ...o.typography.subtitleDens,
+              ...o.colorSchemes.finalTheme.typography.subtitleDens,
               fontSize: "12px!important",
               paddingLeft: "10px",
               marginLeft: "10px",
@@ -5914,13 +5968,13 @@ const p = (o) => ({
             }
           },
           "& .M4LPrintingSystem-propertyValueNodeTitle": {
-            ...o.typography.body,
+            ...o.colorSchemes.finalTheme.typography.body,
             color: "#323B3B",
             borderBottom: "1px solid",
             borderColor: "#323B3B"
           },
           "& .M4LPrintingSystem-propertyValueNodeContent": {
-            ...o.typography.body,
+            ...o.colorSchemes.finalTheme.typography.body,
             width: "100%",
             borderBottom: "1px solid",
             borderColor: "#E9EBEB"
@@ -5948,7 +6002,7 @@ const p = (o) => ({
             borderRadius: "2px",
             backgroundColor: "#E1E9EA",
             flex: "1",
-            ...o.typography.bodyDens,
+            ...o.colorSchemes.finalTheme.typography.bodyDens,
             color: "#364040",
             "&:first-of-type": {
               borderTopLeftRadius: "10px"
@@ -5965,7 +6019,7 @@ const p = (o) => ({
             minHeight: "30px",
             height: "auto",
             flex: "1",
-            ...o.typography.body,
+            ...o.colorSchemes.finalTheme.typography.body,
             color: "#364040"
           },
           "& .M4LPrintingSystem-gridNodeTr": {
@@ -5988,24 +6042,24 @@ const p = (o) => ({
       }
     }
   }
-}), X = (o) => ({
+}), Z = (o) => ({
   M4LFormatter: {
     styleOverrides: {
       "&.M4LFormatter-root": {
         "& .M4LFormatter-booleanFormatterIcon": {
           "& .M4LIcon-icon": {
-            backgroundColor: o.palette.text.secondary
+            backgroundColor: o.vars.palette.text.secondary
           },
           "&.M4LFormatter-booleanFormatterCheck": {
             "& .M4LIcon-icon": {
-              backgroundColor: o.palette.state.active
+              backgroundColor: o.vars.palette.state.active
             }
           }
         }
       }
     }
   }
-}), J = (o) => ({
+}), oo = (o) => ({
   M4LoadingError: {
     styleOverrides: {
       "&.M4LoadingError-root": {
@@ -6033,38 +6087,38 @@ const p = (o) => ({
             " .M4LIcon-icon": {
               width: "100px",
               height: "100px",
-              backgroundColor: o.palette.state.skeleton.default
+              backgroundColor: o.vars.palette.state.skeleton.default
             }
           },
           "& .M4LoadingError-titleDescription": {
             textAlign: "center"
           },
           "& .M4LoadingError-loadingErrorTitle": {
-            ...o.typography.h5,
-            color: o.palette.text.primary,
+            ...o.colorSchemes.finalTheme.typography.h5,
+            color: o.vars.palette.text.primary,
             [o.breakpoints.down("sm")]: {
-              ...o.typography.h5
+              ...o.colorSchemes.finalTheme.typography.h5
             }
           },
           "& .M4LoadingError-loadingErrorDescription": {
-            ...o.typography.paragraphDens,
-            color: o.palette.text.secondary
+            ...o.colorSchemes.finalTheme.typography.paragraphDens,
+            color: o.vars.palette.text.secondary
           },
           "& .M4LoadingError-loadingErrorDivider": {
             width: "208px",
             height: "1px",
-            background: o.palette.state.borderPrimary
+            background: o.vars.palette.state.borderPrimary
           },
           "& .MuiTypography-paragraph": {
-            ...o.typography.paragraph,
-            color: o.palette.text.primary
+            ...o.colorSchemes.finalTheme.typography.paragraph,
+            color: o.vars.palette.text.primary
           },
           "& .MuiButtonBase-root": {}
         }
       }
     }
   }
-}), K = (o) => ({
+}), to = (o) => ({
   M4LMFLoader: {
     styleOverrides: {
       "&.M4LMFLoader-root": {
@@ -6083,7 +6137,7 @@ const p = (o) => ({
       }
     }
   }
-}), Q = (o) => ({
+}), ro = (o) => ({
   M4LLoadingButton: {
     styleOverrides: {
       "&.M4LLoadingButton-root": {
@@ -6102,7 +6156,7 @@ const p = (o) => ({
           }
         },
         "& .MuiCircularProgress-root": {
-          color: `${o.palette.text.primary}!important`
+          color: `${o.vars.palette.text.primary}!important`
         },
         "& .M4LLoadingButton-skeleton ": {
           height: "100%!important",
@@ -6115,7 +6169,7 @@ const p = (o) => ({
           transition: "all .5s ease",
           borderRadius: "4px",
           border: "1px solid transparent",
-          ...o.typography.action,
+          ...o.colorSchemes.finalTheme.typography.action,
           "& .M4LIcon-icon": {
             transition: "all .5s ease"
           },
@@ -6125,7 +6179,7 @@ const p = (o) => ({
           "&::before": {
             inset: "0",
             border: "1px solid",
-            borderColor: o.palette.state?.focus,
+            borderColor: o.vars.palette.state?.focus,
             borderRadius: "4px",
             transform: "scale(1.07, 1.36)",
             position: "absolute",
@@ -6134,39 +6188,39 @@ const p = (o) => ({
         },
         "&.M4LLoadingButton-isDisabled": {
           "& .MuiButtonBase-root": {
-            color: `${o.palette.text.disabled}!important`,
+            color: `${o.vars.palette.text.disabled}!important`,
             "& .M4LIcon-icon": {
-              backgroundColor: `${o.palette.text.disabled}!important`
+              backgroundColor: `${o.vars.palette.text.disabled}!important`
             }
           },
           "&.M4LLoadingButton-variantContained": {
             "& .MuiButtonBase-root": {
-              color: o.palette.text.disabled,
+              color: o.vars.palette.text.disabled,
               "& .M4LIcon-icon": {
-                backgroundColor: o.palette.text.disabled
+                backgroundColor: o.vars.palette.text.disabled
               },
               "&:hover": {
-                backgroundColor: o.palette.state?.default,
-                color: o.palette.text.disabled,
+                backgroundColor: o.vars.palette.state?.default,
+                color: o.vars.palette.text.disabled,
                 "& .M4LIcon-icon": {
-                  backgroundColor: o.palette.text.disabled,
-                  color: o.palette.text.disabled
+                  backgroundColor: o.vars.palette.text.disabled,
+                  color: o.vars.palette.text.disabled
                 }
               },
               "&:active": {
-                backgroundColor: o.palette.state?.default,
-                color: o.palette.text.disabled,
+                backgroundColor: o.vars.palette.state?.default,
+                color: o.vars.palette.text.disabled,
                 "& .M4LIcon-icon": {
-                  backgroundColor: o.palette.text.disabled,
-                  color: o.palette.text.disabled
+                  backgroundColor: o.vars.palette.text.disabled,
+                  color: o.vars.palette.text.disabled
                 }
               },
               "&.Mui-focusVisible": {
-                backgroundColor: o.palette.state?.default,
-                color: o.palette.text.disabled,
+                backgroundColor: o.vars.palette.state?.default,
+                color: o.vars.palette.text.disabled,
                 "& .M4LIcon-icon": {
-                  backgroundColor: o.palette.text.disabled,
-                  color: o.palette.text.disabled
+                  backgroundColor: o.vars.palette.text.disabled,
+                  color: o.vars.palette.text.disabled
                 },
                 "&::before": {
                   content: "none"
@@ -6199,12 +6253,12 @@ const p = (o) => ({
           },
           "& .M4LTypography-root": {
             "& .MuiTypography-root": {
-              color: o.palette.patronus?.marbleLight[30]
+              color: o.vars.palette.patronus?.marbleLight[30]
             }
           },
           "& .MuiButtonBase-root": {
-            backgroundColor: o.palette.state?.active,
-            color: o.palette.patronus?.marbleLight[10],
+            backgroundColor: o.vars.palette.state?.active,
+            color: o.vars.palette.patronus?.marbleLight[10],
             boxShadow: o.customShadows?.primary,
             position: "relative",
             "& .M4LTypography-root": {
@@ -6213,29 +6267,29 @@ const p = (o) => ({
               }
             },
             "& .M4LIcon-icon": {
-              backgroundColor: o.palette.text.secondary
+              backgroundColor: o.vars.palette.text.secondary
             },
             "&:hover": {
-              backgroundColor: o.palette.state?.hover,
+              backgroundColor: o.vars.palette.state?.hover,
               "& .M4LIcon-icon": {
-                backgroundColor: o.palette.patronus?.marbleLight[10]
+                backgroundColor: o.vars.palette.patronus?.marbleLight[10]
               },
               "& .MuiTypography-root": {
                 color: "#fff"
               }
             },
             "&:active": {
-              backgroundColor: o.palette.state?.active,
-              color: o.palette.patronus?.marbleLight[10],
+              backgroundColor: o.vars.palette.state?.active,
+              color: o.vars.palette.patronus?.marbleLight[10],
               "& .M4LIcon-icon": {
-                backgroundColor: o.palette.patronus?.marbleLight[10]
+                backgroundColor: o.vars.palette.patronus?.marbleLight[10]
               }
             },
             "&.Mui-focusVisible": {
-              backgroundColor: o.palette.state?.active,
-              color: o.palette.patronus?.marbleLight[10],
+              backgroundColor: o.vars.palette.state?.active,
+              color: o.vars.palette.patronus?.marbleLight[10],
               "& .M4LIcon-icon": {
-                backgroundColor: o.palette.patronus?.marbleLight[10]
+                backgroundColor: o.vars.palette.patronus?.marbleLight[10]
               },
               "&::before": {
                 content: "''"
@@ -6246,33 +6300,33 @@ const p = (o) => ({
         "&.M4LLoadingButton-variantOutlined": {
           "& .MuiButtonBase-root": {
             border: "1px solid",
-            borderColor: o.palette.text.secondary,
-            color: o.palette.text.secondary,
+            borderColor: o.vars.palette.text.secondary,
+            color: o.vars.palette.text.secondary,
             "& .M4LIcon-icon": {
-              backgroundColor: o.palette.text.secondary
+              backgroundColor: o.vars.palette.text.secondary
             },
             "&:hover": {
-              borderColor: o.palette.state?.hover,
-              color: o.palette.state?.hover,
-              backgroundColor: o.palette.state?.active12,
+              borderColor: o.vars.palette.state?.hover,
+              color: o.vars.palette.state?.hover,
+              backgroundColor: o.vars.palette.state?.active12,
               "& .M4LIcon-icon": {
-                backgroundColor: o.palette.state?.hover
+                backgroundColor: o.vars.palette.state?.hover
               }
             },
             "&:active": {
-              borderColor: o.palette.state?.active,
-              color: o.palette.state?.active,
+              borderColor: o.vars.palette.state?.active,
+              color: o.vars.palette.state?.active,
               backgroundColor: "transparent",
               "& .M4LIcon-icon": {
-                backgroundColor: o.palette.state?.active
+                backgroundColor: o.vars.palette.state?.active
               }
             },
             "&.Mui-focusVisible": {
-              borderColor: o.palette.state?.active,
-              color: o.palette.state?.active,
+              borderColor: o.vars.palette.state?.active,
+              color: o.vars.palette.state?.active,
               backgroundColor: "transparent",
               "& .M4LIcon-icon": {
-                backgroundColor: o.palette.state?.active
+                backgroundColor: o.vars.palette.state?.active
               },
               "&::before": {
                 content: "''"
@@ -6282,29 +6336,29 @@ const p = (o) => ({
         },
         "&.M4LLoadingButton-variantText": {
           "& .MuiButtonBase-root": {
-            color: o.palette.text.secondary,
+            color: o.vars.palette.text.secondary,
             "& .M4LIcon-icon": {
-              backgroundColor: o.palette.text.secondary
+              backgroundColor: o.vars.palette.text.secondary
             },
             "&:hover": {
-              backgroundColor: o.palette.state?.active12,
-              color: o.palette.state?.hover,
+              backgroundColor: o.vars.palette.state?.active12,
+              color: o.vars.palette.state?.hover,
               "& .M4LIcon-icon": {
-                backgroundColor: o.palette.state?.hover
+                backgroundColor: o.vars.palette.state?.hover
               }
             },
             "&:active": {
               backgroundColor: "transparent",
-              color: o.palette.state?.active,
+              color: o.vars.palette.state?.active,
               "& .M4LIcon-icon": {
-                backgroundColor: o.palette.state?.active
+                backgroundColor: o.vars.palette.state?.active
               }
             },
             "&.Mui-focusVisible": {
               backgroundColor: "transparent",
-              color: o.palette.state?.active,
+              color: o.vars.palette.state?.active,
               "& .M4LIcon-icon": {
-                backgroundColor: o.palette.state?.active
+                backgroundColor: o.vars.palette.state?.active
               },
               "&:before": {
                 content: "''"
@@ -6315,7 +6369,7 @@ const p = (o) => ({
       }
     }
   }
-}), Z = (o) => ({
+}), eo = (o) => ({
   M4LToastContainer: {
     styleOverrides: {
       "&.M4LToastContainer-root": {
@@ -6330,8 +6384,8 @@ const p = (o) => ({
             "& .Toastify__toast": {
               padding: "8px",
               marginBottom: "0px",
-              backgroundColor: o.palette.background.default,
-              boxShadow: o.customShadows.z3,
+              backgroundColor: o.vars.palette.background.default,
+              boxShadow: o.customShadows?.z2,
               minHeight: "54px !important",
               "& .Toastify__toast-body": {
                 margin: "0px",
@@ -6352,39 +6406,39 @@ const p = (o) => ({
                     borderRadius: "2px"
                   },
                   "& .M4LToastContainer-toastMessageInfo": {
-                    ...o.typography.bodyDens,
-                    color: o.palette.text.primary
+                    ...o.colorSchemes.finalTheme.typography.bodyDens,
+                    color: o.vars.palette.text.primary
                   }
                 }
               },
               "& .Toastify__close-button": {
                 margin: "auto auto",
                 "& > svg": {
-                  fill: o.palette.text.primary
+                  fill: o.vars.palette.text.primary
                 }
               },
               "&.Toastify__toast--info": {
                 "& .Toastify__toast-body": {
                   "& .M4LToastContainer-toastMessageContainer": {
                     "& .M4LToastContainer-toastMessageIcon": {
-                      background: `${o.palette.state.info.normal} !important`
+                      background: `${o.vars.palette.state.info.normal} !important`
                     }
                   }
                 }
               },
               "&.Toastify__toast--success": {
                 "& .M4LToastContainer-toastMessageIcon": {
-                  background: `${o.palette.state.success.normal} !important`
+                  background: `${o.vars.palette.state.success.normal} !important`
                 }
               },
               "&.Toastify__toast--warning": {
                 "& .M4LToastContainer-toastMessageIcon": {
-                  background: `${o.palette.state.warning.normal} !important`
+                  background: `${o.vars.palette.state.warning.normal} !important`
                 }
               },
               "&.Toastify__toast--error": {
                 "& .M4LToastContainer-toastMessageIcon": {
-                  background: `${o.palette.state.error.normal} !important`
+                  background: `${o.vars.palette.state.error.normal} !important`
                 }
               }
             }
@@ -6393,7 +6447,7 @@ const p = (o) => ({
       }
     }
   }
-}), oo = (o) => ({
+}), ao = (o) => ({
   M4LPDFViewer: {
     styleOverrides: {
       "&.M4LPDFViewer-root": {
@@ -6408,7 +6462,7 @@ const p = (o) => ({
       }
     }
   }
-}), to = (o) => ({
+}), io = (o) => ({
   M4LTopBar: {
     styleOverrides: {
       "&.M4LTopBar-root": {
@@ -6433,25 +6487,25 @@ const p = (o) => ({
             "& .M4LTopBar-ContainerAccordionCase1": {
               "& .M4LIcon-root": {
                 "& .M4LIcon-icon": {
-                  backgroundColor: o.palette.primary.main
+                  backgroundColor: o.vars.palette.primary.main
                 }
               },
               "& .MuiButtonBase-root": {
-                color: o.palette.primary.main
+                color: o.vars.palette.primary.main
               }
             },
             "& .M4LTopBar-ContainerAccordion": {
               "& .M4LIcon-root": {
                 "& .M4LIcon-icon": {
-                  backgroundColor: o.palette.primary.main
+                  backgroundColor: o.vars.palette.primary.main
                 }
               },
               "& .MuiButtonBase-root": {
-                color: o.palette.primary.main
+                color: o.vars.palette.primary.main
               }
             },
             "& .MuiButtonBase-root": {
-              color: o.palette.primary.main
+              color: o.vars.palette.primary.main
             }
           }
         }
@@ -6464,14 +6518,14 @@ const p = (o) => ({
         "& .M4LTopBar-ItemSelect": {
           "&.M4LTopBar-IsActive": {
             "& .MuiButtonBase-root": {
-              color: o.palette.primary.main
+              color: o.vars.palette.primary.main
             }
           }
         }
       }
     }
   }
-}), eo = (o) => ({
+}), no = (o) => ({
   M4LAppBarCommercial: {
     styleOverrides: {
       "&.M4LAppBarCommercial-root": {
@@ -6481,7 +6535,7 @@ const p = (o) => ({
         alignItems: "center",
         padding: "8px 80px",
         minHeight: "80px",
-        backgroundColor: o.palette.background.default,
+        backgroundColor: o.vars.palette.background.default,
         position: "fixed",
         zIndex: "100",
         borderBottom: "1px solid rgba(9, 30, 66, 0.10)",
@@ -6492,7 +6546,7 @@ const p = (o) => ({
       }
     }
   }
-}), ro = (o) => ({
+}), po = (o) => ({
   M4LSectionCommercial: {
     styleOverrides: {
       "&.M4LSectionCommercial-root": {
@@ -6511,7 +6565,7 @@ const p = (o) => ({
       }
     }
   }
-}), ao = (o) => ({
+}), lo = (o) => ({
   M4LHamburgerMenuCommercial: {
     styleOverrides: {
       "&.M4LHamburgerMenuCommercial-root": {
@@ -6521,7 +6575,7 @@ const p = (o) => ({
       }
     }
   }
-}), io = (o) => ({
+}), so = (o) => ({
   M4LFieldLabel: {
     styleOverrides: {
       "&.M4LFieldLabel-root": {
@@ -6532,13 +6586,13 @@ const p = (o) => ({
         "& .M4LFieldLabel-mandatory": {
           marginLeft: "2px",
           "& .MuiTypography-root": {
-            color: o.palette.text.secondary
+            color: o.vars.palette.text.secondary
           }
         },
         "& .M4LFieldLabel-tooltip": {
           marginLeft: "6px",
           "& .M4LIcon-root .M4LIcon-icon": {
-            backgroundColor: o.palette.info.main
+            backgroundColor: o.vars.palette.info.main
           }
         }
       }
@@ -6546,57 +6600,57 @@ const p = (o) => ({
   }
 });
 export {
-  T as A,
-  A as B,
-  P as C,
-  F as D,
-  H as E,
-  W as F,
-  O as G,
-  j as H,
-  G as I,
-  N as J,
-  E as K,
-  $ as L,
-  Q as M,
-  _ as N,
-  U as O,
-  Y as P,
-  q as Q,
-  X as R,
-  J as S,
-  K as T,
-  Z as U,
-  oo as V,
-  to as W,
-  eo as X,
-  ro as Y,
-  ao as Z,
-  io as _,
-  p as a,
-  D as b,
-  d as c,
-  l as d,
-  s as e,
-  c as f,
-  L as g,
-  g as h,
-  z as i,
-  x as j,
-  V as k,
-  u as l,
-  b as m,
-  M as n,
-  y as o,
-  w as p,
-  f as q,
-  h as r,
-  v as s,
-  C as t,
-  m as u,
-  k as v,
-  B as w,
-  I as x,
-  S as y,
-  R as z
+  H as A,
+  F as B,
+  z as C,
+  V as D,
+  O as E,
+  j as F,
+  E as G,
+  $ as H,
+  _ as I,
+  U as J,
+  q as K,
+  Y as L,
+  ro as M,
+  X as N,
+  J as O,
+  K as P,
+  Q,
+  Z as R,
+  oo as S,
+  to as T,
+  eo as U,
+  ao as V,
+  io as W,
+  no as X,
+  po as Y,
+  lo as Z,
+  so as _,
+  c as a,
+  W as b,
+  x as c,
+  g as d,
+  u as e,
+  b as f,
+  f as g,
+  M as h,
+  G as i,
+  v as j,
+  N as k,
+  L as l,
+  y as m,
+  h as n,
+  w as o,
+  S as p,
+  m as q,
+  C as r,
+  k as s,
+  B as t,
+  I as u,
+  T as v,
+  R as w,
+  A as x,
+  D as y,
+  P as z
 };