@m4l/styles 2.0.4 → 3.1.0

package/theme/overrides/M4LExtendedComponents/{index-CyXBfJc_.js → index-Cf72RC_D.js}

@@ -1,7 +1,6 @@
-import { alpha as t } from "@mui/material/styles";
-import { alpha as e } from "@mui/system";
-import { P as r } from "../../palette-CR1CkF2l.js";
-const p = (o) => ({
+import { alpha as r } from "@mui/material/styles";
+import { B as t } from "../../palette-DM0gXxA2.js";
+const i = (o) => ({
   M4LIcon: {
     styleOverrides: {
       "&.M4LIcon-root": {
@@ -45,12 +44,12 @@ const p = (o) => ({
         },
         ".M4LIcon-variantSkeleton": {
           borderRadius: "4px",
-          backgroundColor: o.vars.palette.state?.skeleton.default
+          backgroundColor: o.vars.palette.skeleton?.default
         }
       }
     }
   }
-}), d = (o) => ({
+}), n = (o) => ({
   M4LIconButton: {
     styleOverrides: {
       "&.M4LIconButton-root": {
@@ -62,7 +61,7 @@ const p = (o) => ({
         transition: "all .3s ease",
         "& .M4LIcon-root .M4LIcon-icon": {
           transition: "all .3s ease",
-          //Cambiado bgPrimary temporalmente , originalmente primary 
+          //Cambiado bgPrimary temporalmente , originalmente primary
           backgroundColor: o.vars.palette.text.primary
         },
         // '& .M4LIcon-root .M4LIcon-icon': {
@@ -71,7 +70,7 @@ const p = (o) => ({
         "&::before": {
           boxSizing: "content-box",
           border: "1px solid",
-          borderColor: o.vars.palette.state?.focus,
+          borderColor: o.vars.palette.primary?.focus,
           borderRadius: "4px",
           position: "absolute",
           transition: "all .3s ease"
@@ -99,28 +98,28 @@ const p = (o) => ({
           padding: "0px"
         },
         /* '.MuiIconButton-root:hover': {
-            backgroundColor: 'transparent',
-        }, */
+                      backgroundColor: 'transparent',
+                  }, */
         /* Variant primary */
         "&.M4LIconButton-variantPrimary:not(&.M4LIconButton-isDisabled)": {
-          backgroundColor: o.vars.palette.state?.default,
+          backgroundColor: o.vars.palette.background?.default,
           "&:hover": {
-            backgroundColor: o.vars.palette.state?.hover,
+            backgroundColor: o.vars.palette.primary?.hover,
             "& .M4LIcon-icon": {
-              backgroundColor: o.vars.palette.patronus?.marbleLight[10]
+              backgroundColor: o.vars.palette.common?.white
             }
           },
           "&:active": {
-            backgroundColor: o.vars.palette.state?.active,
+            backgroundColor: o.vars.palette.primary?.active,
             transition: "background-color .5s ease",
             "& .M4LIcon-icon": {
-              backgroundColor: o.vars.palette.patronus?.marbleLight[10]
+              backgroundColor: o.vars.palette.common?.white
             }
           },
           "&.M4LIconButton-isFocus": {
-            backgroundColor: o.vars.palette.state?.active,
+            backgroundColor: o.vars.palette.primary?.active,
             "& .M4LIcon-icon": {
-              backgroundColor: o.vars.palette.patronus?.marbleLight[10]
+              backgroundColor: o.vars.palette.common?.white
             },
             "&::before": {
               content: "''"
@@ -129,29 +128,29 @@ const p = (o) => ({
         },
         /* Variant secondary */
         "&.M4LIconButton-variantSecondary:not(&.M4LIconButton-isDisabled)": {
-          borderColor: o.vars.palette.state.borderDens,
+          borderColor: o.vars.palette.border.dense,
           "& .M4LIcon-icon": {
             backgroundColor: o.vars.palette.text.primary
           },
           "&:hover": {
             border: "1px solid",
-            borderColor: o.vars.palette.state?.focus,
+            borderColor: o.vars.palette.primary?.focus,
             "& .M4LIcon-icon": {
-              backgroundColor: o.vars.palette.state?.focus
+              backgroundColor: o.vars.palette.primary?.focus
             }
           },
           "&:active": {
             border: "1px solid",
-            borderColor: o.vars.palette.state?.active,
+            borderColor: o.vars.palette.primary?.active,
             "& .M4LIcon-icon": {
-              backgroundColor: o.vars.palette.state?.active
+              backgroundColor: o.vars.palette.primary?.active
             }
           },
           "&.M4LIconButton-isFocus": {
             border: "1px solid",
-            borderColor: o.vars.palette.state?.active,
+            borderColor: o.vars.palette.primary?.active,
             "& .M4LIcon-icon": {
-              backgroundColor: o.vars.palette.state?.active
+              backgroundColor: o.vars.palette.primary?.active
             },
             "&::before": {
               content: "''"
@@ -161,23 +160,23 @@ const p = (o) => ({
         /* Variant line */
         "&.M4LIconButton-variantLine:not(&.M4LIconButton-isDisabled)": {
           "&:hover": {
-            backgroundColor: o.vars.palette.state?.active12,
+            backgroundColor: o.vars.palette.primary?.activeOpacity,
             "& .M4LIcon-icon": {
-              backgroundColor: o.vars.palette.state?.focus
+              backgroundColor: o.vars.palette.primary?.focus
             }
           },
           "&:active": {
             backgroundColor: "transparent",
             "& .M4LIcon-icon": {
-              backgroundColor: o.vars.palette.state?.active
+              backgroundColor: o.vars.palette.primary?.active
             }
           },
           "&.M4LIconButton-isFocus": {
             backgroundColor: "transparent",
             border: "1px solid",
-            borderColor: o.vars.palette.state?.focus,
+            borderColor: o.vars.palette.primary?.focus,
             "& .M4LIcon-icon": {
-              backgroundColor: o.vars.palette.state?.active
+              backgroundColor: o.vars.palette.primary?.active
             }
           }
         },
@@ -199,7 +198,7 @@ const p = (o) => ({
       }
     }
   }
-}), l = (o) => ({
+}), p = (o) => ({
   M4LanguagePopover: {
     styleOverrides: {
       "&.M4LanguagePopover-root": {
@@ -220,7 +219,7 @@ const p = (o) => ({
       }
     }
   }
-}), s = (o) => ({
+}), d = (o) => ({
   M4LImageButton: {
     styleOverrides: {
       "&.M4LImageButton-root": {
@@ -256,12 +255,12 @@ const p = (o) => ({
           borderRadius: "4px"
         },
         ".MuiButtonBase-root:hover": {
-          backgroundColor: o.vars.palette.state?.active12
+          backgroundColor: o.vars.palette.primary?.activeOpacity
         },
         ".MuiButtonBase-root:focus": {
-          backgroundColor: o.vars.palette.state?.active12,
+          backgroundColor: o.vars.palette.primary?.activeOpacity,
           border: "1px solid",
-          borderColor: o.vars.palette.state?.focus
+          borderColor: o.vars.palette.primary?.focus
         },
         [o.breakpoints.down("md")]: {
           ".MuiButtonBase-root": {
@@ -274,7 +273,7 @@ const p = (o) => ({
       }
     }
   }
-}), c = (o) => ({
+}), l = (o) => ({
   M4LImage: {
     styleOverrides: {
       "&.M4LImage-root": {
@@ -285,7 +284,7 @@ const p = (o) => ({
       }
     }
   }
-}), g = (o) => ({
+}), s = (o) => ({
   M4LPopover: {
     styleOverrides: {
       "&.M4LPopover-root": {
@@ -333,14 +332,14 @@ const p = (o) => ({
             justifyContent: "normal !important"
           },
           "& .MuiButtonBase-root:hover": {
-            backgroundColor: o.vars.palette.state?.active12,
+            backgroundColor: o.vars.palette.primary?.activeOpacity,
             borderRadius: "4px",
             padding: "4px"
           },
           "& .MuiButtonBase-root.Mui-selected": {
-            backgroundColor: o.vars.palette.state?.active12,
+            backgroundColor: o.vars.palette.primary?.activeOpacity,
             "& .M4LanguagePopover-labelItem": {
-              color: o.vars.palette.state?.active
+              color: o.vars.palette.primary?.active
             }
           }
         },
@@ -376,7 +375,7 @@ const p = (o) => ({
       }
     }
   }
-}), x = (o) => ({
+}), c = (o) => ({
   M4LErrorLabel: {
     styleOverrides: {
       "&.M4LHelperText-root": {
@@ -400,7 +399,7 @@ const p = (o) => ({
       }
     }
   }
-}), u = (o) => ({
+}), g = (o) => ({
   M4LTypography: {
     styleOverrides: {
       "&.M4LTypography-root": {
@@ -412,7 +411,7 @@ const p = (o) => ({
       }
     }
   }
-}), b = (o) => ({
+}), x = (o) => ({
   M4LButton: {
     styleOverrides: {
       "&.M4LButton-root": {
@@ -458,7 +457,7 @@ const p = (o) => ({
           "&::before": {
             inset: "0",
             border: "1px solid",
-            borderColor: o.vars.palette.state?.focus,
+            borderColor: o.vars.palette.primary.focus,
             borderRadius: "4px",
             transform: "scale(1.07, 1.36)",
             position: "absolute",
@@ -474,14 +473,14 @@ const p = (o) => ({
           },
           "&.M4LButton-variantContained": {
             color: o.vars.palette.text.disabled,
-            backgroundColor: o.vars.palette.state.default,
+            backgroundColor: o.vars.palette.background.default,
             border: "1px solid",
-            borderColor: o.vars.palette.state.borderDisable,
+            borderColor: o.vars.palette.border.disabled,
             "& .M4LIcon-icon": {
               backgroundColor: o.vars.palette.text.disabled
             },
             "&:hover": {
-              backgroundColor: o.vars.palette.state?.default,
+              backgroundColor: o.vars.palette.background?.default,
               color: o.vars.palette.text.disabled,
               "& .M4LIcon-icon": {
                 backgroundColor: o.vars.palette.text.disabled,
@@ -489,7 +488,7 @@ const p = (o) => ({
               }
             },
             "&:active": {
-              backgroundColor: o.vars.palette.state?.active,
+              backgroundColor: o.vars.palette.primary?.active,
               color: o.vars.palette.text.primary,
               "& .M4LIcon-icon": {
                 backgroundColor: o.vars.palette.text.disabled,
@@ -497,7 +496,7 @@ const p = (o) => ({
               }
             },
             "&.Mui-focusVisible": {
-              backgroundColor: o.vars.palette.state?.default,
+              backgroundColor: o.vars.palette.background?.default,
               color: o.vars.palette.text.disabled,
               "& .M4LIcon-icon": {
                 backgroundColor: o.vars.palette.text.disabled,
@@ -532,32 +531,32 @@ const p = (o) => ({
         },
         /* Variant contained */
         "&.M4LButton-variantContained": {
-          backgroundColor: o.vars.palette.state?.active,
-          color: o.vars.palette.patronus?.marbleLight[10],
+          backgroundColor: o.vars.palette.primary?.active,
+          color: o.vars.palette.common?.white,
           boxShadow: o.customShadows?.z1,
           position: "relative",
           "& .M4LIcon-icon": {
-            backgroundColor: o.vars.palette.patronus?.marbleLight[10]
+            backgroundColor: o.vars.palette.common?.white
           },
           "&:hover": {
-            backgroundColor: o.vars.palette.state?.hover,
-            color: o.vars.palette.patronus?.marbleLight[10],
+            backgroundColor: o.vars.palette.primary?.hover,
+            color: o.vars.palette.common?.white,
             "& .M4LIcon-icon": {
-              backgroundColor: o.vars.palette.patronus?.marbleLight[10]
+              backgroundColor: o.vars.palette.common?.white
             }
           },
           // '& .active': {
-          //     backgroundColor: theme.vars.palette.state?.active,
-          //     color: theme.vars.palette.patronus?.marbleLight[10],
+          //     backgroundColor: theme.vars.palette.primary?.active,
+          //     color: theme.vars.palette.common?.white,
           //     '& .M4LIcon-icon': {
-          //         backgroundColor: theme.vars.palette.patronus?.marbleLight[10],
+          //         backgroundColor: theme.vars.palette.common?.white,
           //     },
           // },
           "&.Mui-focusVisible": {
-            backgroundColor: o.vars.palette.state?.active,
-            color: o.vars.palette.patronus?.marbleLight[10],
+            backgroundColor: o.vars.palette.primary?.active,
+            color: o.vars.palette.common?.white,
             "& .M4LIcon-icon": {
-              backgroundColor: o.vars.palette.patronus?.marbleLight[10]
+              backgroundColor: o.vars.palette.common?.white
             },
             "&::before": {
               content: "''"
@@ -568,33 +567,33 @@ const p = (o) => ({
         "&.M4LButton-variantOutlined": {
           "& .MuiButtonBase-root": {
             border: "1px solid",
-            borderColor: o.vars.palette.state.borderDens,
+            borderColor: o.vars.palette.border.dense,
             color: o.vars.palette.text.primary,
             "& .M4LIcon-icon": {
               backgroundColor: o.vars.palette.text.primary
             },
             "&:hover": {
-              borderColor: o.vars.palette.state?.hover,
-              color: o.vars.palette.state?.hover,
-              backgroundColor: o.vars.palette.state?.active12,
+              borderColor: o.vars.palette.primary?.hover,
+              color: o.vars.palette.primary?.hover,
+              backgroundColor: o.vars.palette.primary?.activeOpacity,
               "& .M4LIcon-icon": {
-                backgroundColor: o.vars.palette.state?.hover
+                backgroundColor: o.vars.palette.primary?.hover
               }
             },
             "&:active": {
-              borderColor: o.vars.palette.state?.active,
-              color: o.vars.palette.state?.active,
+              borderColor: o.vars.palette.primary?.active,
+              color: o.vars.palette.primary?.active,
               backgroundColor: "transparent",
               "& .M4LIcon-icon": {
-                backgroundColor: o.vars.palette.state?.active
+                backgroundColor: o.vars.palette.primary?.active
               }
             },
             "&.Mui-focusVisible": {
-              borderColor: o.vars.palette.state?.active,
-              color: o.vars.palette.state?.active,
+              borderColor: o.vars.palette.primary?.active,
+              color: o.vars.palette.primary?.active,
               backgroundColor: "transparent",
               "& .M4LIcon-icon": {
-                backgroundColor: o.vars.palette.state?.active
+                backgroundColor: o.vars.palette.primary?.active
               },
               "&::before": {
                 content: "''"
@@ -610,24 +609,24 @@ const p = (o) => ({
               backgroundColor: o.vars.palette.text.primary
             },
             "&:hover": {
-              backgroundColor: o.vars.palette.state?.active12,
-              color: o.vars.palette.state?.hover,
+              backgroundColor: o.vars.palette.primary?.activeOpacity,
+              color: o.vars.palette.primary?.hover,
               "& .M4LIcon-icon": {
-                backgroundColor: o.vars.palette.state?.hover
+                backgroundColor: o.vars.palette.primary?.hover
               }
             },
             "&:active": {
               backgroundColor: "transparent",
-              color: o.vars.palette.state?.active,
+              color: o.vars.palette.primary?.active,
               "& .M4LIcon-icon": {
-                backgroundColor: o.vars.palette.state?.active
+                backgroundColor: o.vars.palette.primary?.active
               }
             },
             "&.Mui-focusVisible": {
               backgroundColor: "transparent",
-              color: o.vars.palette.state?.active,
+              color: o.vars.palette.primary?.active,
               "& .M4LIcon-icon": {
-                backgroundColor: o.vars.palette.state?.active
+                backgroundColor: o.vars.palette.primary?.active
               },
               "&:before": {
                 content: "''"
@@ -638,23 +637,23 @@ const p = (o) => ({
         // Condiciones semánticas
         // Error
         "&.M4LButton-colorError": {
-          backgroundColor: `${o.vars.palette.state.error.normal}`,
+          backgroundColor: `${o.vars.palette.error.main}`,
           "&:hover": {
-            backgroundColor: `${o.vars.palette.state.error.hover}`
+            backgroundColor: `${o.vars.palette.error.hover}`
           }
         },
         // Warning
         "&.M4LButton-colorWarning": {
-          backgroundColor: `${o.vars.palette.state.warning.normal}`,
+          backgroundColor: `${o.vars.palette.warning.main}`,
           "&:hover": {
-            backgroundColor: `${o.vars.palette.state.warning.hover}`
+            backgroundColor: `${o.vars.palette.warning.hover}`
           }
         },
         // Success
         "&.M4LButton-colorSuccess": {
-          backgroundColor: `${o.vars.palette.state.success.normal}`,
+          backgroundColor: `${o.vars.palette.success.main}`,
           "&:hover": {
-            backgroundColor: `${o.vars.palette.state.success.hover}`
+            backgroundColor: `${o.vars.palette.success.hover}`
           }
         },
         //TODO: Para cambiar
@@ -665,18 +664,18 @@ const p = (o) => ({
       }
     }
   }
-}), M = (o) => ({
+}), u = (o) => ({
   M4LNavLink: {
     styleOverrides: {
       "&.M4LNavLink-root": {
         "& .M4LTypography-root": {
-          color: o.vars.palette.state.active
+          color: o.vars.palette.primary.active
         },
         "&: hover": {
           "& .M4LTypography-root": {
-            color: o.vars.palette.state?.hover,
+            color: o.vars.palette.primary?.hover,
             textDecoration: "underline",
-            textDecorationColor: o.vars.palette.state?.hover
+            textDecorationColor: o.vars.palette.primary?.hover
           }
         },
         "& > a": {
@@ -685,7 +684,7 @@ const p = (o) => ({
       }
     }
   }
-}), L = (o) => ({
+}), b = (o) => ({
   M4LSideBar: {
     styleOverrides: {
       /* Estilos y funcionamiento general  */
@@ -722,7 +721,7 @@ const p = (o) => ({
                 height: "100%",
                 position: "relative",
                 borderRight: "1px solid",
-                borderColor: o.vars.palette.state.borderPrimary,
+                borderColor: o.vars.palette.border.primary,
                 backgroundColor: o.vars.palette.background.default,
                 "& .M4LSideBar-contentGroups": {
                   padding: "32px 12px",
@@ -731,7 +730,7 @@ const p = (o) => ({
                     padding: "8px",
                     borderTop: "1px solid",
                     borderBottom: "1px solid",
-                    borderColor: o.vars.palette.state.borderSecondary,
+                    borderColor: o.vars.palette.border.secondary,
                     height: "fit-content",
                     width: "100%",
                     "& .M4LSideBar-navItemRootContent": {
@@ -747,7 +746,7 @@ const p = (o) => ({
                   display: "flex",
                   padding: "10px 5px",
                   borderTop: "1px solid",
-                  borderColor: o.vars.palette.state.borderDisable,
+                  borderColor: o.vars.palette.border.disabled,
                   justifyContent: "center",
                   gap: "24px",
                   alignItems: "center",
@@ -805,10 +804,6 @@ const p = (o) => ({
           transition: "all 0.3s",
           boxShadow: o.vars.customShadows.z1,
           zIndex: "1"
-          /*  '&:hover': {
-                           backgroundColor: theme.vars.palette.background.background,
-                           transition: 'all 0.3s',
-                       } */
         },
         /* Condición para ocultar el botón de colapsar en estado expandido. */
         "&:not(.M4LSideBar-collapsed) .M4LSideBar-collapseButton": {
@@ -818,7 +813,7 @@ const p = (o) => ({
         "& .M4LSideBar-subItemActive": {
           padding: "0px",
           "& .M4LIcon-icon": {
-            backgroundColor: `${o.vars.palette.state.focus}!important`
+            backgroundColor: `${o.vars.palette.primary.focus} !important`
           }
         },
         "&.M4LSideBar-collapsed": {
@@ -928,7 +923,7 @@ const p = (o) => ({
                   backgroundColor: "transparent",
                   borderRadius: "4px",
                   "&:hover": {
-                    background: o.vars.palette.state.default,
+                    background: o.vars.palette.background.hover,
                     cursor: "pointer"
                   }
                 },
@@ -937,13 +932,13 @@ const p = (o) => ({
                   height: "auto",
                   overflow: "hidden",
                   "& .M4LSideBar-navItemMainRoot": {
-                    background: o.vars.palette.state.active12,
+                    background: o.vars.palette.primary.activeOpacity,
                     border: "1px solid",
-                    borderColor: o.vars.palette.state.active12,
+                    borderColor: o.vars.palette.primary.activeOpacity,
                     boxShadow: o.shadows[1],
                     "&:hover": {
-                      background: t(
-                        o.colorSchemes.finalTheme.palette.state.active || "#fff",
+                      background: r(
+                        o.colorSchemes.finalTheme.palette.primary.active || "#fff",
                         0.24
                       ),
                       // Validar implementación desde la creación del tema.
@@ -954,21 +949,21 @@ const p = (o) => ({
                     "& .M4LSideBar-navItemRootContentIconTypo": {
                       alignItems: "center",
                       "& .M4LIcon-icon": {
-                        backgroundColor: o.vars.palette.state.focus
+                        backgroundColor: o.vars.palette.primary.focus
                       },
                       "& .M4LTypography-root": {
                         "& .MuiTypography-root": {
-                          color: o.vars.palette.state.focus
+                          color: o.vars.palette.primary.focus
                         }
                       },
                       "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
-                        backgroundColor: o.vars.palette.state.focus
+                        backgroundColor: o.vars.palette.primary.focus
                       }
                     },
                     "& .M4LSideBar-arrowIconRoot": {
                       "& .M4LIcon-root": {
                         "& .M4LIcon-icon": {
-                          backgroundColor: o.vars.palette.state.focus
+                          backgroundColor: o.vars.palette.primary.focus
                         }
                       }
                     },
@@ -980,7 +975,7 @@ const p = (o) => ({
                       top: "25%",
                       bottom: "25%",
                       left: "0px",
-                      backgroundColor: o.vars.palette.state.focus,
+                      backgroundColor: o.vars.palette.primary.focus,
                       borderRadius: "0px 4px 4px 0px",
                       position: "absolute"
                     }
@@ -1038,15 +1033,15 @@ const p = (o) => ({
                     borderRadius: "4px",
                     gap: "8px",
                     "&.M4LSideBar-subItemCollapseActive": {
-                      backgroundColor: o.vars.palette.state.active12,
+                      backgroundColor: o.vars.palette.primary.activeOpacity,
                       gap: "8px",
                       border: "1px solid",
-                      borderColor: o.vars.palette.state.active12,
+                      borderColor: o.vars.palette.primary.activeOpacity,
                       "& .MuiButtonBase-root": {
                         padding: "0px",
                         "& .M4LIcon-root": {
                           "& .M4LIcon-icon": {
-                            backgroundColor: o.vars.palette.state.focus
+                            backgroundColor: o.vars.palette.primary.focus
                           }
                         }
                       }
@@ -1064,12 +1059,12 @@ const p = (o) => ({
                       "& .M4LSideBar-navSubItemContentBullet": {
                         height: "14px",
                         borderRadius: "4px",
-                        backgroundColor: o.vars.palette.state.focus,
+                        backgroundColor: o.vars.palette.primary.focus,
                         gap: "8px"
                       }
                     },
                     "&:hover": {
-                      background: o.vars.palette.state.default,
+                      background: o.vars.palette.background.default,
                       // Validar implementación desde la creación del tema.
                       padding: "0 8px"
                     }
@@ -1098,9 +1093,9 @@ const p = (o) => ({
                     },
                     "&.M4LSideBar-subItemActive.M4LSideBar-navSubItemContentRoot": {
                       "& .M4LTypography-root": {
-                        color: o.vars.palette.state.focus,
+                        color: o.vars.palette.primary.focus,
                         "& .MuiTypography-root": {
-                          color: o.vars.palette.state.focus
+                          color: o.vars.palette.primary.focus
                         }
                       }
                     }
@@ -1132,7 +1127,7 @@ const p = (o) => ({
         //boxShadow: theme.customShadows?.z2,
         "& .M4LSideBar-subItemActive": {
           "& .M4LIcon-icon": {
-            backgroundColor: `${o.vars.palette.state.focus}!important`
+            backgroundColor: `${o.vars.palette.primary.focus} !important`
           }
         },
         "&.M4LSideBar-collapsed": {
@@ -1232,20 +1227,20 @@ const p = (o) => ({
                   backgroundColor: "transparent",
                   borderRadius: "4px",
                   "&:hover": {
-                    background: o.vars.palette.state.default,
+                    background: o.vars.palette.background.hover,
                     cursor: "pointer"
                   }
                 },
                 "&.M4LSideBar-itemMainActive": {
-                  background: o.vars.palette.state.active12,
+                  background: o.vars.palette.primary.activeOpacity,
                   borderRadius: "4px",
                   border: "1px solid",
-                  borderColor: o.vars.palette.state.borderDisable,
+                  borderColor: o.vars.palette.border.disabled,
                   "& .M4LSideBar-navItemMainRoot": {
-                    background: o.vars.palette.state.active12,
+                    background: o.vars.palette.primary.activeOpacity,
                     "&:hover": {
-                      background: t(
-                        o.colorSchemes.finalTheme.palette.state.active || "#fff",
+                      background: r(
+                        o.colorSchemes.finalTheme.palette.primary.active || "#fff",
                         0.24
                       ),
                       // Validar implementación desde la creación del tema.
@@ -1255,21 +1250,21 @@ const p = (o) => ({
                   "& .M4LSideBar-navItemRootContent": {
                     "& .M4LSideBar-navItemRootContentIconTypo": {
                       "& .M4LIcon-icon": {
-                        backgroundColor: o.vars.palette.state.focus
+                        backgroundColor: o.vars.palette.primary.focus
                       },
                       "& .M4LTypography-root": {
                         "& .MuiTypography-root": {
-                          color: o.vars.palette.state.focus
+                          color: o.vars.palette.primary.focus
                         }
                       },
                       "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
-                        backgroundColor: o.vars.palette.state.focus
+                        backgroundColor: o.vars.palette.primary.focus
                       }
                     },
                     "& .M4LSideBar-arrowIconRoot": {
                       "& .M4LIcon-root": {
                         "& .M4LIcon-icon": {
-                          backgroundColor: o.vars.palette.state.focus
+                          backgroundColor: o.vars.palette.primary.focus
                         }
                       }
                     },
@@ -1279,7 +1274,7 @@ const p = (o) => ({
                       top: "0px",
                       bottom: "0px",
                       right: "0px",
-                      backgroundColor: o.vars.palette.state.focus,
+                      backgroundColor: o.vars.palette.primary.focus,
                       borderRadius: "4px 0px 0px 4px",
                       position: "absolute"
                     }
@@ -1337,14 +1332,14 @@ const p = (o) => ({
                     borderRadius: "4px",
                     gap: "8px",
                     "&.M4LSideBar-subItemCollapseActive": {
-                      backgroundColor: o.vars.palette.state.active12,
+                      backgroundColor: o.vars.palette.primary.activeOpacity,
                       gap: "8px",
                       "& .MuiButtonBase-root": {
                         paddingLeft: "0",
                         padding: "0px",
                         "& .M4LIcon-root": {
                           "& .M4LIcon-icon": {
-                            backgroundColor: o.vars.palette.state.focus
+                            backgroundColor: o.vars.palette.primary.focus
                           }
                         }
                       }
@@ -1355,20 +1350,20 @@ const p = (o) => ({
                         padding: "0px",
                         "& .M4LIcon-root": {
                           "& .M4LIcon-icon": {
-                            backgroundColor: `${o.vars.palette.state.focus}!important`
+                            backgroundColor: `${o.vars.palette.primary.focus} !important`
                           }
                         }
                       },
                       "& .M4LSideBar-navSubItemContentBullet": {
                         height: "14px",
                         borderRadius: "4px",
-                        backgroundColor: o.vars.palette.state.focus,
+                        backgroundColor: o.vars.palette.primary.focus,
                         gap: "8px"
                       }
                     },
                     "&:hover": {
                       padding: "0 8px",
-                      background: o.vars.palette.state.default
+                      background: o.vars.palette.background.default
                       // Validar implementación desde la creación del tema.
                     }
                   },
@@ -1429,7 +1424,7 @@ const p = (o) => ({
       "&.M4LSideBar-popover.M4LSideBar-variantDefault": {
         "& .M4LSideBar-subItemActive": {
           "& .M4LIcon-icon": {
-            backgroundColor: `${o.vars.palette.state.focus}!important`
+            backgroundColor: `${o.vars.palette.primary.focus} !important`
           }
         },
         "& .M4LSideBar-navListSubItemRoot": {
@@ -1441,7 +1436,7 @@ const p = (o) => ({
             height: "fit-content",
             borderRadius: "4px",
             "&.M4LSideBar-subItemCollapseActive": {
-              backgroundColor: o.vars.palette.state.active12
+              backgroundColor: o.vars.palette.primary.activeOpacity
             },
             "& .M4LTypography-root": {
               display: "flex",
@@ -1463,7 +1458,7 @@ const p = (o) => ({
                     padding: "0px",
                     "& .M4LIcon-root": {
                       "& .M4LIcon-icon": {
-                        backgroundColor: o.vars.palette.state.focus
+                        backgroundColor: o.vars.palette.primary.focus
                       }
                     }
                   }
@@ -1476,14 +1471,14 @@ const p = (o) => ({
                 padding: "0px",
                 "& .M4LIcon-root": {
                   "& .M4LIcon-icon": {
-                    backgroundColor: `${o.vars.palette.state.focus}!important`
+                    backgroundColor: `${o.vars.palette.primary.focus} !important`
                   }
                 }
               },
               "& .M4LSideBar-navSubItemContentBullet": {
                 height: "14px",
                 borderRadius: "10px",
-                backgroundColor: o.vars.palette.state.focus
+                backgroundColor: o.vars.palette.primary.focus
               }
             },
             "& .M4LSideBar-navSubItemContentBullet": {
@@ -1494,7 +1489,7 @@ const p = (o) => ({
             },
             "&:hover": {
               padding: "0 8px",
-              background: o.vars.palette.state.default
+              background: o.vars.palette.background.default
               // Validar implementación desde la creación del tema.
             }
           }
@@ -1503,7 +1498,7 @@ const p = (o) => ({
       "&.M4LSideBar-popover.M4LSideBar-variantComercial": {
         "& .M4LSideBar-subItemActive": {
           "& .M4LIcon-icon": {
-            backgroundColor: `${o.vars.palette.state.focus}!important`
+            backgroundColor: `${o.vars.palette.primary.focus} !important`
           }
         },
         "& .M4LSideBar-navListSubItemRoot": {
@@ -1515,7 +1510,7 @@ const p = (o) => ({
             height: "fit-content",
             borderRadius: "4px",
             "&.M4LSideBar-subItemCollapseActive": {
-              backgroundColor: o.vars.palette.state.active12,
+              backgroundColor: o.vars.palette.primary.activeOpacity,
               Text: "iufbivecf"
             },
             "& .M4LTypography-root": {
@@ -1538,7 +1533,7 @@ const p = (o) => ({
                     padding: "0px",
                     "& .M4LIcon-root": {
                       "& .M4LIcon-icon": {
-                        backgroundColor: o.vars.palette.state.focus
+                        backgroundColor: o.vars.palette.primary.focus
                       }
                     }
                   }
@@ -1551,14 +1546,14 @@ const p = (o) => ({
                 padding: "0px",
                 "& .M4LIcon-root": {
                   "& .M4LIcon-icon": {
-                    backgroundColor: `${o.vars.palette.state.focus}!important`
+                    backgroundColor: `${o.vars.palette.primary.focus} !important`
                   }
                 }
               },
               "& .M4LSideBar-navSubItemContentBullet": {
                 height: "14px",
                 borderRadius: "10px",
-                backgroundColor: o.vars.palette.state.focus
+                backgroundColor: o.vars.palette.primary.focus
               }
             },
             "& .M4LSideBar-navSubItemContentBullet": {
@@ -1569,7 +1564,7 @@ const p = (o) => ({
             },
             "&:hover": {
               padding: "0 8px",
-              background: o.vars.palette.state.default
+              background: o.vars.palette.background.default
               // Validar implementación desde la creación del tema.
             }
           }
@@ -1584,11 +1579,11 @@ const p = (o) => ({
         "&.M4LSideBar-variantDefault": {
           "& .M4LSideBar-subItemActive": {
             "& .M4LIcon-icon": {
-              backgroundColor: `${o.vars.palette.state.focus}!important`
+              backgroundColor: `${o.vars.palette.primary.focus} !important`
             },
             "& .M4LTypography-root": {
               "& .MuiTypography-root": {
-                color: `${o.vars.palette.state.focus}!important`
+                color: `${o.vars.palette.primary.focus} !important`
               }
             }
           },
@@ -1675,20 +1670,20 @@ const p = (o) => ({
                     backgroundColor: "transparent",
                     borderRadius: "4px",
                     "&:hover": {
-                      background: o.vars.palette.state.default,
+                      background: o.vars.palette.background.hover,
                       cursor: "pointer"
                     }
                   },
                   "&.M4LSideBar-itemMainActive": {
                     borderRadius: "4px",
-                    background: o.vars.palette.state.active12,
+                    background: o.vars.palette.primary.activeOpacity,
                     border: "1px solid",
-                    borderColor: o.vars.palette.state.active12,
+                    borderColor: o.vars.palette.primary.activeOpacity,
                     "& .M4LSideBar-navItemMainRoot": {
-                      background: o.vars.palette.state.active,
+                      background: o.vars.palette.primary.active,
                       "&:hover": {
-                        background: t(
-                          o.colorSchemes.finalTheme.palette.state.active || "#fff",
+                        background: r(
+                          o.colorSchemes.finalTheme.palette.primary.active || "#fff",
                           0.24
                         ),
                         // Validar implementación desde la creación del tema.
@@ -1699,21 +1694,21 @@ const p = (o) => ({
                       "& .M4LSideBar-navItemRootContentIconTypo": {
                         alignItems: "center",
                         "& .M4LIcon-icon": {
-                          backgroundColor: o.vars.palette.state.focus
+                          backgroundColor: o.vars.palette.primary.focus
                         },
                         "& .M4LTypography-root": {
                           "& .MuiTypography-root": {
-                            color: o.vars.palette.state.focus
+                            color: o.vars.palette.primary.focus
                           }
                         },
                         "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
-                          backgroundColor: o.vars.palette.state.focus
+                          backgroundColor: o.vars.palette.primary.focus
                         }
                       },
                       "& .M4LSideBar-arrowIconRoot": {
                         "& .M4LIcon-root": {
                           "& .M4LIcon-icon": {
-                            backgroundColor: o.vars.palette.state.focus
+                            backgroundColor: o.vars.palette.primary.focus
                           }
                         }
                       },
@@ -1723,7 +1718,7 @@ const p = (o) => ({
                         top: "0px",
                         bottom: "0px",
                         left: "0px",
-                        backgroundColor: o.vars.palette.state.focus,
+                        backgroundColor: o.vars.palette.primary.focus,
                         borderRadius: "4px 0px 0px 4px",
                         position: "absolute"
                       }
@@ -1782,14 +1777,14 @@ const p = (o) => ({
                       gap: "8px",
                       padding: "0px",
                       "&.M4LSideBar-subItemCollapseActive": {
-                        backgroundColor: o.vars.palette.state.active12,
+                        backgroundColor: o.vars.palette.primary.activeOpacity,
                         gap: "8px",
                         padding: "0px",
                         "& .MuiButtonBase-root": {
                           padding: "0px",
                           "& .M4LIcon-root": {
                             "& .M4LIcon-icon": {
-                              backgroundColor: o.vars.palette.state.focus
+                              backgroundColor: o.vars.palette.primary.focus
                             }
                           }
                         }
@@ -1799,20 +1794,20 @@ const p = (o) => ({
                           padding: "0px",
                           "& .M4LIcon-root": {
                             "& .M4LIcon-icon": {
-                              backgroundColor: `${o.vars.palette.state.focus}!important`
+                              backgroundColor: `${o.vars.palette.primary.focus} !important`
                             }
                           }
                         },
                         "& .M4LSideBar-navSubItemContentBullet": {
                           height: "14px",
                           borderRadius: "4px",
-                          backgroundColor: o.vars.palette.state.focus,
+                          backgroundColor: o.vars.palette.primary.focus,
                           gap: "8px"
                         }
                       },
                       "&:hover": {
                         padding: "0 8px",
-                        background: o.vars.palette.state.default
+                        background: o.vars.palette.background.default
                         // Validar implementación desde la creación del tema.
                       }
                     },
@@ -1958,20 +1953,20 @@ const p = (o) => ({
                     backgroundColor: "transparent",
                     borderRadius: "4px",
                     "&:hover": {
-                      background: o.vars.palette.state.default,
+                      background: o.vars.palette.background.hover,
                       cursor: "pointer"
                     }
                   },
                   "&.M4LSideBar-itemMainActive": {
                     borderRadius: "4px",
-                    background: o.vars.palette.state.active12,
+                    background: o.vars.palette.primary.activeOpacity,
                     border: "1px solid",
-                    borderColor: o.vars.palette.state.active12,
+                    borderColor: o.vars.palette.primary.activeOpacity,
                     "& .M4LSideBar-navItemMainRoot": {
-                      background: o.vars.palette.state.active12,
+                      background: o.vars.palette.primary.activeOpacity,
                       "&:hover": {
-                        background: t(
-                          o.colorSchemes.finalTheme.palette.state.active || "#fff",
+                        background: r(
+                          o.colorSchemes.finalTheme.palette.primary.active || "#fff",
                           0.24
                         ),
                         // Validar implementación desde la creación del tema.
@@ -1982,21 +1977,21 @@ const p = (o) => ({
                       "& .M4LSideBar-navItemRootContentIconTypo": {
                         fontSize: "14px !important",
                         "& .M4LIcon-icon": {
-                          backgroundColor: o.vars.palette.state.focus
+                          backgroundColor: o.vars.palette.primary.focus
                         },
                         "& .M4LTypography-root": {
                           "& .MuiTypography-root": {
-                            color: o.vars.palette.state.focus
+                            color: o.vars.palette.primary.focus
                           }
                         },
                         "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
-                          backgroundColor: o.vars.palette.state.focus
+                          backgroundColor: o.vars.palette.primary.focus
                         }
                       },
                       "& .M4LSideBar-arrowIconRoot": {
                         "& .M4LIcon-root": {
                           "& .M4LIcon-icon": {
-                            backgroundColor: o.vars.palette.state.focus
+                            backgroundColor: o.vars.palette.primary.focus
                           }
                         }
                       },
@@ -2006,7 +2001,7 @@ const p = (o) => ({
                         top: "0px",
                         bottom: "0px",
                         right: "0px",
-                        backgroundColor: o.vars.palette.state.focus,
+                        backgroundColor: o.vars.palette.primary.focus,
                         borderRadius: "4px 0px 0px 4px",
                         position: "absolute"
                       }
@@ -2066,13 +2061,13 @@ const p = (o) => ({
                       gap: "8px",
                       padding: "0px",
                       "&.M4LSideBar-subItemCollapseActive": {
-                        backgroundColor: o.vars.palette.state.active12,
+                        backgroundColor: o.vars.palette.primary.activeOpacity,
                         gap: "8px",
                         "& .MuiButtonBase-root": {
                           padding: "0px",
                           "& .M4LIcon-root": {
                             "& .M4LIcon-icon": {
-                              backgroundColor: o.vars.palette.state.focus
+                              backgroundColor: o.vars.palette.primary.focus
                             }
                           }
                         }
@@ -2082,20 +2077,20 @@ const p = (o) => ({
                           padding: "0px",
                           "& .M4LIcon-root": {
                             "& .M4LIcon-icon": {
-                              backgroundColor: `${o.vars.palette.state.focus}!important`
+                              backgroundColor: `${o.vars.palette.primary.focus}!important`
                             }
                           }
                         },
                         "& .M4LSideBar-navSubItemContentBullet": {
                           height: "14px",
                           borderRadius: "4px",
-                          backgroundColor: o.vars.palette.state.focus,
+                          backgroundColor: o.vars.palette.primary.focus,
                           gap: "8px"
                         }
                       },
                       "&:hover": {
                         padding: "0 8px",
-                        background: o.vars.palette.state.default
+                        background: o.vars.palette.background.default
                         // Validar implementación desde la creación del tema.
                       }
                     },
@@ -2128,15 +2123,15 @@ const p = (o) => ({
                     marginLeft: "18px",
                     "&.M4LSideBar-drawer.M4LSideBar-variantComercial": {
                       /* '& .MuiBackdrop-root': {
-                                                                  '& .MuiModal-backdrop': {
+                                                                          '& .MuiModal-backdrop': {
                       
-                                                                      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                                                                              backgroundColor: 'rgba(0, 0, 0, 0.5)',
                       
-                                                                  }
-                                                              }, */
+                                                                          }
+                                                                      }, */
                       "& .M4LSideBar-subItemActive": {
                         "& .M4LIcon-icon": {
-                          backgroundColor: `${o.vars.palette.state.focus}!important`
+                          backgroundColor: `${o.vars.palette.primary.focus} !important`
                         }
                       },
                       "& .M4LSideBar-contentMobile": {
@@ -2217,20 +2212,20 @@ const p = (o) => ({
                                 backgroundColor: "transparent",
                                 borderRadius: "4px",
                                 "&:hover": {
-                                  background: o.vars.palette.state.default,
+                                  background: o.vars.palette.background.hover,
                                   cursor: "pointer"
                                 }
                               },
                               "&.M4LSideBar-itemMainActive": {
                                 borderRadius: "4px",
-                                background: o.vars.palette.state.active12,
+                                background: o.vars.palette.primary.activeOpacity,
                                 border: "1px solid",
-                                borderColor: o.vars.palette.state.active12,
+                                borderColor: o.vars.palette.primary.activeOpacity,
                                 "& .M4LSideBar-navItemMainRoot": {
-                                  background: o.vars.palette.state.active12,
+                                  background: o.vars.palette.primary.activeOpacity,
                                   "&:hover": {
-                                    background: t(
-                                      o.colorSchemes.finalTheme.palette.state.active || "#fff",
+                                    background: r(
+                                      o.colorSchemes.finalTheme.palette.primary.active || "#fff",
                                       0.24
                                     ),
                                     // Validar implementación desde la creación del tema.
@@ -2240,21 +2235,21 @@ const p = (o) => ({
                                 "& .M4LSideBar-navItemRootContent": {
                                   "& .M4LSideBar-navItemRootContentIconTypo": {
                                     "& .M4LIcon-icon": {
-                                      backgroundColor: o.vars.palette.state.focus
+                                      backgroundColor: o.vars.palette.primary.focus
                                     },
                                     "& .M4LTypography-root": {
                                       "& .MuiTypography-root": {
-                                        color: o.vars.palette.state.focus
+                                        color: o.vars.palette.primary.focus
                                       }
                                     },
                                     "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
-                                      backgroundColor: o.vars.palette.state.focus
+                                      backgroundColor: o.vars.palette.primary.focus
                                     }
                                   },
                                   "& .M4LSideBar-arrowIconRoot": {
                                     "& .M4LIcon-root": {
                                       "& .M4LIcon-icon": {
-                                        backgroundColor: o.vars.palette.state.focus
+                                        backgroundColor: o.vars.palette.primary.focus
                                       }
                                     }
                                   },
@@ -2264,7 +2259,7 @@ const p = (o) => ({
                                     top: "0px",
                                     bottom: "0px",
                                     right: "0px",
-                                    backgroundColor: o.vars.palette.state.focus,
+                                    backgroundColor: o.vars.palette.primary.focus,
                                     borderRadius: "4px 0px 0px 4px",
                                     position: "absolute"
                                   }
@@ -2323,13 +2318,13 @@ const p = (o) => ({
                                   gap: "8px",
                                   padding: "0px",
                                   "&.M4LSideBar-subItemCollapseActive": {
-                                    backgroundColor: o.vars.palette.state.active12,
+                                    backgroundColor: o.vars.palette.primary.activeOpacity,
                                     gap: "8px",
                                     "& .MuiButtonBase-root": {
                                       padding: "0px",
                                       "& .M4LIcon-root": {
                                         "& .M4LIcon-icon": {
-                                          backgroundColor: o.vars.palette.state.focus
+                                          backgroundColor: o.vars.palette.primary.focus
                                         }
                                       }
                                     }
@@ -2339,19 +2334,19 @@ const p = (o) => ({
                                       padding: "0px",
                                       "& .M4LIcon-root": {
                                         "& .M4LIcon-icon": {
-                                          backgroundColor: `${o.vars.palette.state.focus}!important`
+                                          backgroundColor: `${o.vars.palette.primary.focus} !important`
                                         }
                                       }
                                     },
                                     "& .M4LSideBar-navSubItemContentBullet": {
                                       height: "14px",
                                       borderRadius: "4px",
-                                      backgroundColor: o.vars.palette.state.focus,
+                                      backgroundColor: o.vars.palette.primary.focus,
                                       gap: "8px"
                                     }
                                   },
                                   "&:hover": {
-                                    background: o.vars.palette.state.default,
+                                    background: o.vars.palette.background.default,
                                     // Validar implementación desde la creación del tema.
                                     padding: "0 8px"
                                   }
@@ -2433,7 +2428,7 @@ const p = (o) => ({
       }
     }
   }
-}), v = (o) => ({
+}), M = (o) => ({
   M4LAreasAdmin: {
     styleOverrides: {
       "&.M4LAreasAdmin-root": {
@@ -2451,7 +2446,7 @@ const p = (o) => ({
         gap: "8px",
         borderRight: "1px solid",
         borderLeft: "1px solid",
-        borderColor: o.vars.palette.state.borderDisable,
+        borderColor: o.vars.palette.border.disabled,
         [o.breakpoints.down("sm")]: {
           //boxShadow: theme.colorSchemes.finalTheme.customShadows.z1,
           paddingRight: "0px",
@@ -2488,7 +2483,6 @@ const p = (o) => ({
           [o.breakpoints.down("sm")]: {
             height: "auto",
             background: o.vars.palette.background.default,
-            //boxShadow: theme.colorSchemes.finalTheme.customShadows.z2,
             width: "100%",
             maxWidth: "100%",
             paddingRight: "0px",
@@ -2499,7 +2493,7 @@ const p = (o) => ({
             width: "8px",
             maxWidth: "12px",
             height: "6px",
-            background: o.vars.palette.state.default,
+            background: o.vars.palette.background.surface,
             position: "absolute",
             zIndex: "10000"
           },
@@ -2515,17 +2509,16 @@ const p = (o) => ({
             display: "flex",
             flexDirection: "row",
             width: "100%",
-            //maxWidth: '100%',
             overflow: "auto",
             height: "36px",
-            borderColor: o.vars.palette.state.hoverDefault,
+            borderColor: o.vars.palette.border.default,
             [o.breakpoints.down("sm")]: {
               background: "none",
               borderRight: "none",
               paddingLeft: "0px"
             },
             "& .M4LAreasAdmin-areaIconLayer": {
-              background: o.vars.palette.background.neutral,
+              background: o.vars.palette.background.main,
               boxShadow: o.vars.customShadows.z2,
               display: "flex",
               justifyContent: "center",
@@ -2572,9 +2565,9 @@ const p = (o) => ({
                   }
                 },
                 /*'& .simplebar-mask .simplebar-offset ': {
-                    display: 'flex',
-                    alignItems: 'center',
-                },*/
+                                      display: 'flex',
+                                      alignItems: 'center',
+                                  },*/
                 "& .M4LAreasAdmin-areaContentChips": {
                   display: "flex",
                   width: "fit-content",
@@ -2636,8 +2629,8 @@ const p = (o) => ({
                                                   },
                                               },*/
               /*'& .simplebar-content-wrapper': {
-                  width: 'fit-content',
-              },*/
+                                  width: 'fit-content',
+                              },*/
               "& .M4LAreasAdmin-areaChipRoot ": {
                 margin: "0px",
                 borderRadius: "4px",
@@ -2646,7 +2639,7 @@ const p = (o) => ({
                 maxWidth: "100%",
                 cursor: "pointer",
                 "&:hover": {
-                  background: o.vars.palette.state.hoverDefault
+                  background: o.vars.palette.background.hover
                 },
                 [o.breakpoints.down("sm")]: {
                   background: "none",
@@ -2663,21 +2656,21 @@ const p = (o) => ({
                   }
                 }
                 /*'& .M4LAreasAdmin-areaChipEditButton': {
-                    transition: 'all ease 0.3s',
-                    opacity: '0',
-                },
-                '&:hover .M4LAreasAdmin-areaChipEditButton': {
-                    transition: 'all ease 0.3s',
-                    opacity: '1',
-                },*/
+                                      transition: 'all ease 0.3s',
+                                      opacity: '0',
+                                  },
+                                  '&:hover .M4LAreasAdmin-areaChipEditButton': {
+                                      transition: 'all ease 0.3s',
+                                      opacity: '1',
+                                  },*/
               },
               "& .M4LAreasAdmin-areaChipMobileRoot": {
                 display: "flex",
                 overflow: "hidden",
                 width: "100%",
-                backgroundColor: o.vars.palette.state.default,
+                backgroundColor: o.vars.palette.background.surface,
                 borderTop: "1.5px solid",
-                borderColor: o.vars.palette.state.borderTop,
+                borderColor: o.vars.palette.border.default,
                 borderRadius: "4px",
                 [o.breakpoints.down("sm")]: {
                   backgroundColor: o.vars.palette.background.default,
@@ -2718,7 +2711,7 @@ const p = (o) => ({
                   backgroundColor: "transparent",
                   //height: '100%',
                   "&:hover": {
-                    background: o.vars.palette.state.active12
+                    background: o.vars.palette.primary.activeOpacity
                   },
                   "& .M4LIcon-icon": {
                     //backgroundColor:
@@ -2730,13 +2723,9 @@ const p = (o) => ({
                 alignItems: "center",
                 height: "100%"
               },
-              /*'& .simplebar-content': {
-                  display: 'flex',
-                  alignItems: 'center',
-              },*/
               "& .M4LAreasAdmin-areaChipRoot": {
                 display: "flex",
-                background: o.vars.palette.state.default,
+                background: o.vars.palette.background.surface,
                 borderRadius: "4px 4px 4px 4px",
                 minHeight: "24px",
                 width: "fit-content",
@@ -2749,23 +2738,20 @@ const p = (o) => ({
                   borderColor: "none",
                   boxShadow: "none"
                 },
-                /* [theme.breakpoints.down('sm')]: {
-                    height: 'auto',
-                },*/
                 "&.M4LAreasAdmin-selected": {
-                  background: o.vars.palette.state.active,
+                  background: o.vars.palette.primary.active,
                   ...o.colorSchemes.finalTheme.typography.body,
                   color: o.vars.palette.text.primary,
                   height: "22px",
                   transition: "all 0.5s ease",
                   "&:hover": {
-                    background: o.vars.palette.state.hover
+                    background: o.vars.palette.primary.hover
                   },
                   [o.breakpoints.down("sm")]: {
                     height: "auto",
                     background: "none",
                     "&:hover": {
-                      background: o.vars.palette.state.hoverDefault
+                      background: o.vars.palette.background.hover
                     }
                   },
                   "& .M4LAreasAdmin-areaChipTitle": {
@@ -2777,7 +2763,7 @@ const p = (o) => ({
                     justifyContent: "center",
                     display: "flex",
                     alignItems: "center",
-                    color: o.vars.palette.patronus?.marbleLight[10],
+                    color: o.vars.palette.common.white,
                     ...o.colorSchemes.finalTheme.typography.body,
                     [o.breakpoints.down("sm")]: {
                       display: "inline",
@@ -2791,13 +2777,13 @@ const p = (o) => ({
                   },
                   "& .M4LIconButton-root": {
                     "&:hover": {
-                      background: o.vars.palette.state.active
+                      background: o.vars.palette.primary.active
                     },
                     [o.breakpoints.down("sm")]: {
                       color: o.vars.palette.text.primary
                     },
                     "& .M4LIcon-icon": {
-                      backgroundColor: `${o.vars.palette.patronus?.marbleLight[10]}`,
+                      backgroundColor: `${o.vars.palette.common.white}`,
                       [o.breakpoints.down("sm")]: {
                         color: o.vars.palette.text.primary
                       }
@@ -2829,7 +2815,7 @@ const p = (o) => ({
                     color: o.vars.palette.text.primary
                   },
                   "&.M4LIconButton-variantPrimary": {
-                    background: o.vars.palette.state.active,
+                    background: o.vars.palette.primary.active,
                     [o.breakpoints.down("sm")]: {
                       color: o.vars.palette.text.primary
                     }
@@ -2844,19 +2830,13 @@ const p = (o) => ({
               width: "100%",
               height: "28px",
               borderLeft: "1px solid",
-              borderColor: o.vars.palette.state.borderSecondary,
+              borderColor: o.vars.palette.border.secondary,
               borderRadius: "0px"
             }
           },
           "& .M4LAreasAdmin-areasAddButton": {
             flexGrow: "2",
-            background: o.vars.palette.state.default
-            /*'& .M4LIcon-icon': {
-                backgroundColor: `${theme.vars.palette.patronus?.marbleLight[10]}`,
-                [theme.breakpoints.down('sm')]: {
-                    color: theme.vars.palette.text.primary,
-                },
-            },*/
+            background: o.vars.palette.background.surface
           },
           "&.M4LAreasAdmin-isMobile": {
             overflow: "hidden",
@@ -2942,12 +2922,12 @@ const p = (o) => ({
       }
     }
   }
-}), h = (o) => ({
+}), y = (o) => ({
   M4LAreasViewer: {
     styleOverrides: {
       "&.M4LAreasViewer-root": {
         test: "root",
-        background: o.vars.palette.background.background,
+        background: o.vars.palette.background.bold,
         "& .M4LGridLayout-gridItemRoot.M4LGridLayout-colapsed-40 .M4LAreasViewer-windowHeader": {
           minHeight: "38px",
           height: "38px"
@@ -2985,9 +2965,9 @@ const p = (o) => ({
             }
           },
           "& .M4LAreasViewer-windowRoot": {
-            background: o.vars.palette.background.neutral,
+            background: o.vars.palette.background.main,
             border: "1.5px solid",
-            borderColor: o.vars.palette.state.borderPrimary,
+            borderColor: o.vars.palette.border.primary,
             borderRadius: "4px",
             display: "flex",
             "&:not(.M4LAreasViewer-loading)": {
@@ -3000,7 +2980,7 @@ const p = (o) => ({
             },
             "&.react-colapsed": {
               border: "1px solid",
-              borderColor: o.vars.palette.state.borderPrimary
+              borderColor: o.vars.palette.border.primary
             },
             "& .M4LAreasViewer-windowRootContainer": {
               display: "flex",
@@ -3098,21 +3078,21 @@ const p = (o) => ({
                 alignItems: "center",
                 padding: "0 16px",
                 "& .MuiLinearProgress-root": {
-                  background: `rgba(${o.colorSchemes.finalTheme.palette.state.active} / 0.3)`
+                  background: `rgba(${o.colorSchemes.finalTheme.palette.primary.active} / 0.3)`
                 }
               }
             },
             // Area seleccionada
             "&.M4LAreasViewer-selectedWindow": {
               border: "1.5px solid",
-              borderColor: o.vars.palette.state.lineTheme,
+              borderColor: o.vars.palette.border.selected,
               boxShadow: o.customShadows?.z2,
               backdropFilter: "blur(100px)",
               background: o.vars.palette.background.default,
               "& .M4LAreasViewer-windowHeader": {
                 display: "flex",
                 flexDirection: "column",
-                background: o.vars.palette.state.active12,
+                background: o.vars.palette.primary.activeOpacity,
                 gap: "4px",
                 alignItems: "center",
                 position: "relative",
@@ -3123,7 +3103,7 @@ const p = (o) => ({
                 "& .M4LAreasViewer-windowHeaderContent": {
                   "& .M4LIcon-root": {
                     "& .M4LIcon-icon": {
-                      background: o.vars.palette.state.focus
+                      background: o.vars.palette.primary.focus
                     }
                   },
                   "& .M4LAreasViewer-windowHeaderCancelHandle": {
@@ -3136,7 +3116,7 @@ const p = (o) => ({
                 },
                 "& .M4LTypography-root .MuiTypography-root": {
                   ...o.colorSchemes.finalTheme.typography.paragraphDens,
-                  color: o.vars.palette.state.focus
+                  color: o.vars.palette.primary.focus
                 },
                 "& .MuiButtonBase-root": {
                   "& .M4LIcon-icon": {
@@ -3150,7 +3130,7 @@ const p = (o) => ({
                 },
                 "& .MuiButtonBase-root:hover": {
                   "& .M4LIcon-icon": {
-                    backgroundColor: o.vars.palette.state.hover
+                    backgroundColor: o.vars.palette.primary.hover
                   }
                 }
               }
@@ -3158,7 +3138,7 @@ const p = (o) => ({
           },
           "&.M4LGridLayout-root .M4LGridLayout-maximizeMe": {
             border: "1.5px solid",
-            borderColor: o.vars.palette.state.borderPrimary,
+            borderColor: o.vars.palette.border.primary,
             borderRadius: "4px",
             "& .M4LAreasViewer-windowContent": {
               padding: "16px"
@@ -3172,12 +3152,12 @@ const p = (o) => ({
           },
           "&.M4LGridLayout-colapsed ": {
             "& .M4LAreasViewer-windowRoot": {
-              borderColor: o.vars.palette.state.hoverDefault,
+              borderColor: o.vars.palette.border.default,
               boxShadow: o.vars.customShadows.z1
             }
           },
           "&.react-draggable": {
-            background: o.vars.palette.state.active12
+            background: o.vars.palette.primary.activeOpacity
           },
           "& .M4LAreasViewer-windowPopupRoot": {
             boxShadow: o.customShadows?.z2,
@@ -3187,32 +3167,27 @@ const p = (o) => ({
             backdropFilter: "blur(8px)",
             "& .M4LIcon-root.custom-handle": {
               "& .M4LIcon-icon": {
-                backgroundColor: o.vars.palette.state.skeleton.default,
+                backgroundColor: o.vars.palette.skeleton.default,
                 width: "11px",
                 height: "11px",
                 minWidth: "11px",
                 minHeight: "11px",
                 boxShadow: o.vars.customShadows.z1,
                 border: "1px solid",
-                borderColor: o.vars.palette.opacity.cool[24]
+                borderColor: o.vars.palette.grey[50016]
               }
             },
             "& .M4LAreasViewer-windowRootContainer": {
               background: o.vars.palette.background.default,
               borderRadius: "4px",
               border: "1.5px solid",
-              borderColor: o.vars.palette.state.borderPrimary,
+              borderColor: o.vars.palette.border.primary,
               "& .M4LAreasViewer-windowHeader": {
                 boxShadow: "none",
                 borderTopLeftRadius: "4px",
                 borderTopRightRadius: "4px",
                 background: o.vars.palette.background.header,
                 border: "none",
-                //height: '28px',
-                //minHeight: '28px',
-                //[theme.breakpoints.down('md')]: {
-                //    minHeight: '36px',
-                //},
                 "& .M4LIcon-root": {
                   "& .M4LIcon-icon": {
                     width: "18px",
@@ -3229,7 +3204,7 @@ const p = (o) => ({
                 }
               },
               "& .M4LAreasViewer-windowContent": {
-                background: o.vars.palette.background.neutral,
+                background: o.vars.palette.background.main,
                 padding: "12px"
               }
             },
@@ -3237,7 +3212,7 @@ const p = (o) => ({
               padding: "4px",
               background: o.vars.palette.background.default,
               borderRadius: "4px",
-              borderColor: o.vars.palette.state.hoverDefault,
+              borderColor: o.vars.palette.border.default,
               "&:not(.M4LAreasViewer-loading)": {
                 "& .M4LinearProgressIndeterminate-root": {
                   opacity: 0
@@ -3247,13 +3222,13 @@ const p = (o) => ({
                 backgroundColor: "transparent"
               },
               "&.M4LAreasViewer-selectedWindow": {
-                borderColor: o.vars.palette.state.active12,
-                background: o.vars.palette.state.active12,
+                borderColor: o.vars.palette.primary.activeOpacity,
+                background: o.vars.palette.primary.activeOpacity,
                 boxShadow: o.vars.customShadows.z4,
                 padding: "4px",
                 "& .M4LAreasViewer-windowRootContainer": {
                   "& .M4LAreasViewer-windowHeader": {
-                    background: o.vars.palette.state.default,
+                    background: o.vars.palette.background.surface,
                     borderRadius: "4px",
                     boxShadow: o.vars.customShadows.z1,
                     "& .M4LIcon-root": {
@@ -3272,7 +3247,7 @@ const p = (o) => ({
             },
             "&.M4LAreasViewer-selectedWindow": {
               border: "none",
-              background: o.vars.palette.state.active12,
+              background: o.vars.palette.primary.activeOpacity,
               boxShadow: o.vars.customShadows.z4,
               [o.breakpoints.down("sm")]: {
                 padding: "0"
@@ -3280,9 +3255,9 @@ const p = (o) => ({
               "& .M4LAreasViewer-windowRootContainer": {
                 boxShadow: o.customShadows?.z2,
                 border: "1.5px solid",
-                borderColor: `rgba(${o.colorSchemes.finalTheme.palette.state.active} / 0.5)`,
+                borderColor: `rgba(${o.colorSchemes.finalTheme.palette.primary.active} / 0.5)`,
                 "& .M4LAreasViewer-windowHeader": {
-                  background: o.vars.palette.state.active12,
+                  background: o.vars.palette.primary.activeOpacity,
                   borderTopLeftRadius: "4px",
                   borderTopRightRadius: "4px",
                   "& .M4LIcon-root": {
@@ -3301,18 +3276,18 @@ const p = (o) => ({
           }
         },
         "& .M4LAreasViewer-panelWindowsRoot": {
-          background: o.vars.palette.background.neutral,
+          background: o.vars.palette.background.main,
           display: "flex",
           alignItems: "center",
           padding: "8px",
           gap: "8px",
           borderLeft: "1.5px solid",
-          borderColor: o.vars.palette.state.borderPrimary,
+          borderColor: o.vars.palette.border.primary,
           "& .M4LAreasViewer-panelWindowsButtonContainer": {
             borderRadius: "2px",
             boxShadow: o.vars.customShadows.z1,
             "&.M4LAreasViewer-selected": {
-              background: o.vars.palette.state.active,
+              background: o.vars.palette.primary.main,
               "& .M4LIconButton-root": {
                 "& .M4LIcon-root": {
                   "& .M4LIcon-icon": {
@@ -3325,7 +3300,7 @@ const p = (o) => ({
           "& .M4LAreasViewer-panelWindowsSeparator": {
             width: "100%",
             border: "0.5px solid",
-            borderColor: o.vars.palette.state.borderPrimary
+            borderColor: o.vars.palette.border.primary
           }
         }
       }
@@ -3339,7 +3314,7 @@ const p = (o) => ({
         boxShadow: o.vars.customShadows.z4,
         background: o.vars.palette.background.default,
         border: "2px solid",
-        borderColor: o.vars.palette.state.borderDens,
+        borderColor: o.vars.palette.border.dense,
         "& .M4LAreasViewer-windowContent": {
           borderRadius: "4px",
           background: o.vars.palette.background.default
@@ -3388,7 +3363,7 @@ const p = (o) => ({
               " .M4LIcon-icon": {
                 width: "100px",
                 height: "100px",
-                backgroundColor: o.vars.palette.state.skeleton.default
+                backgroundColor: o.vars.palette.skeleton.default
               }
             },
             // Título
@@ -3408,7 +3383,7 @@ const p = (o) => ({
             "& .M4LAreasViewer-areasLoadingErrorDivider": {
               width: "208px",
               height: "1px",
-              background: o.vars.palette.state.skeleton.default
+              background: o.vars.palette.skeleton.default
             },
             // pasos de acción
             "& .MuiTypography-paragraph": {
@@ -3421,7 +3396,7 @@ const p = (o) => ({
           }
         },
         "& .MuiBackdrop-root": {
-          background: e(`${o.colorSchemes.finalTheme.palette.patronus?.onyx[60]}`, 0.8)
+          background: o.vars.palette.background.backdrop
         },
         "&:not(.M4LAreasViewer-loading)": {
           "& .M4LinearProgressIndeterminate-root": {
@@ -3446,7 +3421,7 @@ const p = (o) => ({
             padding: "6px 4px 6px 8px",
             borderRadius: "4px",
             border: "none",
-            background: o.vars.palette.state.active12,
+            background: o.vars.palette.primary.activeOpacity,
             height: "28px",
             minHeight: "28px",
             [o.breakpoints.down("md")]: {
@@ -3495,19 +3470,19 @@ const p = (o) => ({
       },
       "& .M4LIcon-root.custom-handle": {
         "& .M4LIcon-icon": {
-          backgroundColor: o.vars.palette.state.skeleton.default,
+          backgroundColor: o.vars.palette.skeleton.default,
           width: "11px",
           height: "11px",
           minWidth: "11px",
           minHeight: "11px",
           boxShadow: o.customShadows?.z2,
           border: "1px solid",
-          borderColor: o.vars.palette.state.hoverDefault
+          borderColor: o.vars.palette.border.default
         }
       }
     }
   }
-}), y = (o) => ({
+}), v = (o) => ({
   M4LAppBar: {
     styleOverrides: {
       "&.M4LAppBar-root": {
@@ -3521,7 +3496,7 @@ const p = (o) => ({
         padding: "8px 16px",
         background: o.vars.palette.background.default,
         borderBottom: "1.5px solid",
-        borderColor: o.vars.palette.state.borderPrimary,
+        borderColor: o.vars.palette.border.primary,
         justifyContent: "space-between",
         gap: "40px",
         [o.breakpoints.down("sm")]: {
@@ -3550,29 +3525,22 @@ const p = (o) => ({
         },
         "& .M4LAppBar-containerIconMenuToggle": {
           display: "flex",
-          alingItems: "center",
           width: "36px",
           height: "36px",
           minWidth: "36px",
           minHeight: "36px",
           alignItems: "center",
           borderRadius: "4px",
-          borderColor: o.vars.palette.state.default,
+          borderColor: o.vars.palette.border.default,
           justifyContent: "space-between",
           "& .M4LAppBar-iconMenuToggle": {
-            background: o.vars.palette.state.default,
-            //boxShadow: theme.colorSchemes.finalTheme.customShadows.z1,
-            //borderTop: "1px solid",
-            //borderColor: theme.vars.palette.state.default,
+            background: o.vars.palette.background.surface,
             width: "36px",
             height: "36px",
             minWidth: "36px",
             minHeight: "36px",
             [o.breakpoints.down("sm")]: {
-              background: o.vars.palette.state.default,
-              //boxShadow: theme.colorSchemes.finalTheme.customShadows.z1,
-              //borderTop: "1px solid",
-              //borderColor: theme.vars.palette.state.default,
+              background: o.vars.palette.background.surface,
               width: "36px",
               height: "36px",
               minWidth: "36px",
@@ -3628,7 +3596,7 @@ const p = (o) => ({
       }
     }
   }
-}), f = (o) => ({
+}), L = (o) => ({
   M4LAvatar: {
     styleOverrides: {
       "&.M4LAvatar-root": {
@@ -3643,8 +3611,8 @@ const p = (o) => ({
           height: "28px !important",
           borderRadius: "4px",
           //padding: '4px',
-          background: r.blazeOrange[50],
-          color: r.marbleLight[30],
+          background: t.blazeOrange[50],
+          color: t.marbleLight[30],
           boxShadow: o.vars.customShadows.z1,
           ...o.typography.subtitle
         },
@@ -3669,7 +3637,7 @@ const p = (o) => ({
       }
     }
   }
-}), w = (o) => ({
+}), h = (o) => ({
   M4LAccountPopover: {
     styleOverrides: {
       "&.M4LAccountPopover-root": {
@@ -3755,7 +3723,7 @@ const p = (o) => ({
         "& .M4LAccountPopover-containerMenuItems": {
           borderTop: "1.5px solid",
           borderBottom: "1.5px solid",
-          borderColor: o.vars.palette.state.default,
+          borderColor: o.vars.palette.border.default,
           padding: "2px 4px",
           display: "flex",
           flexDirection: "column",
@@ -3773,7 +3741,7 @@ const p = (o) => ({
             borderRadius: "4px",
             cursor: "pointer",
             "&:hover": {
-              background: o.vars.palette.state.default
+              background: o.vars.palette.background.surface
             },
             "& .M4LIcon-root": {
               minWidth: "16px",
@@ -3800,7 +3768,7 @@ const p = (o) => ({
           alignItems: "center",
           cursor: "pointer",
           "&:hover": {
-            background: o.vars.palette.state.default
+            background: o.vars.palette.background.surface
           },
           "& .M4LIcon-root": {
             minWidth: "16px",
@@ -3885,7 +3853,7 @@ const p = (o) => ({
               minHeight: "36px",
               alignItems: "center",
               "&:hover": {
-                background: o.vars.palette.state.default
+                background: o.vars.palette.background.surface
               },
               "& .M4LIcon-root": {
                 minWidth: "20px",
@@ -3908,7 +3876,7 @@ const p = (o) => ({
             minHeight: "36px",
             alignItems: "center",
             "&:hover": {
-              background: o.vars.palette.state.default
+              background: o.vars.palette.background.surface
             },
             "& .M4LIcon-root": {
               minWidth: "20px",
@@ -3948,7 +3916,7 @@ const p = (o) => ({
       }
     }
   }
-}), m = (o) => ({
+}), f = (o) => ({
   M4LModuleLayout: {
     styleOverrides: {
       "&.M4LModuleLayout-root": {
@@ -3965,7 +3933,7 @@ const p = (o) => ({
       }
     }
   }
-}), C = (o) => ({
+}), m = (o) => ({
   M4LMasterDetailLayout: {
     styleOverrides: {
       "&.M4LMasterDetailLayout-root": {
@@ -3999,7 +3967,7 @@ const p = (o) => ({
       }
     }
   }
-}), k = (o) => ({
+}), w = (o) => ({
   M4LSplitLayout: {
     styleOverrides: {
       "&.M4LSplitLayout-root": {
@@ -4071,7 +4039,7 @@ const p = (o) => ({
           width: "4px",
           top: "calc(50% - 22.5px)",
           position: "absolute",
-          background: o.vars.palette.state.active,
+          background: o.vars.palette.primary.active,
           borderRadius: "1px",
           margin: "1px 0px"
         },
@@ -4100,14 +4068,14 @@ const p = (o) => ({
           height: "4px !important",
           left: "calc(50% - 22.5px)",
           top: "unset",
-          background: o.vars.palette.state.active,
+          background: o.vars.palette.primary.active,
           borderRadius: "2px",
           zIndex: "1"
         },
         // Color del hover y el arrastrando del splitter
         "& .splitter-layout > .layout-splitter:hover:before, .splitter-layout.layout-changing >  .layout-splitter:before": {
           // barra interna vertical
-          background: o.vars.palette.state.hover
+          background: o.vars.palette.primary.hover
         },
         // Dirección flex cuando es vertical
         "& .splitter-layout.splitter-layout-vertical": {
@@ -4120,7 +4088,7 @@ const p = (o) => ({
             right: "0",
             /* top: 'calc(50% - 6px)', */
             position: "absolute",
-            background: o.vars.palette.state.borderPrimary
+            background: o.vars.palette.border.primary
           }
         },
         "& .splitter-layout:not(.splitter-layout-vertical)": {
@@ -4130,14 +4098,14 @@ const p = (o) => ({
             top: "0",
             bottom: "0",
             position: "absolute",
-            background: o.vars.palette.state.borderPrimary
+            background: o.vars.palette.border.primary
           }
         }
-        // Borde gris cuando esta en over y es vertical                  
+        // Borde gris cuando esta en over y es vertical
       }
     }
   }
-}), S = (o) => ({
+}), k = (o) => ({
   M4LCommonActions: {
     styleOverrides: {
       "&.M4LCommonActions-root": {
@@ -4150,7 +4118,7 @@ const p = (o) => ({
       }
     }
   }
-}), B = (o) => ({
+}), C = (o) => ({
   M4LinearProgressIndeterminate: {
     styleOverrides: {
       "&.M4LinearProgressIndeterminate-root": {
@@ -4197,14 +4165,14 @@ const p = (o) => ({
           right: "100%",
           bottom: "0",
           left: "0",
-          backgroundColor: o.vars.palette.state.focus,
+          backgroundColor: o.vars.palette.primary.focus,
           width: "0",
           animation: "borealisBar 2s linear infinite"
         }
       }
     }
   }
-}), I = (o) => ({
+}), S = (o) => ({
   M4LPropertyValue: {
     styleOverrides: {
       "&.M4LPropertyValue-root": {
@@ -4216,7 +4184,7 @@ const p = (o) => ({
         //height: '24px',
         flexDirection: "column",
         borderBottom: "1px solid",
-        borderColor: o.vars.palette.state.borderDisable,
+        borderColor: o.vars.palette.border.disabled,
         // Condición de visualización de vista móvil.
         "&.M4LPropertyValue-isMobile": {
           gridTemplateColumns: "1fr!important",
@@ -4277,7 +4245,7 @@ const p = (o) => ({
                 //borderRadius: '0',
                 //background: 'transparent',
                 "& .MuiOutlinedInput-notchedOutline": {
-                  //border: '0',                                                                               
+                  //border: '0',
                   //borderRadius: '0',
                 }
               }
@@ -4289,7 +4257,7 @@ const p = (o) => ({
                 //borderRadius: '0',
                 //background: 'transparent',
                 "& .MuiOutlinedInput-notchedOutline": {
-                  //border: '0',                                        
+                  //border: '0',
                   //borderRadius: '0',
                 }
               }
@@ -4323,7 +4291,7 @@ const p = (o) => ({
       }
     }
   }
-}), T = (o) => ({
+}), B = (o) => ({
   M4LTab: {
     styleOverrides: {
       "&.M4LTab-root": {
@@ -4355,21 +4323,21 @@ const p = (o) => ({
           }
         },
         "& .MuiTab-root": {
-          borderBottom: `1px solid ${o.vars.palette.state.borderSecondary}`
+          borderBottom: `1px solid ${o.vars.palette.border.secondary}`
         },
         // estado hover
         "& .MuiButtonBase-root:hover": {
-          color: o.vars.palette.state.hover,
+          color: o.vars.palette.primary.hover,
           "& .M4LIcon-icon": {
-            backgroundColor: o.vars.palette.state.hover
+            backgroundColor: o.vars.palette.primary.hover
           }
         },
         // estado selected
         "& .Mui-selected": {
           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}`,
+          borderTop: `1px solid ${o.vars.palette.border.secondary}`,
+          borderLeft: `1px solid ${o.vars.palette.border.secondary}`,
+          borderRight: `1px solid ${o.vars.palette.border.secondary}`,
           borderBottom: `1px solid ${o.vars.palette.background.default}`,
           ...o.colorSchemes.finalTheme.typography.bodyDens,
           color: o.vars.palette.text.primary,
@@ -4380,7 +4348,7 @@ const p = (o) => ({
             height: "2px",
             left: "1.5px",
             top: "0px",
-            backgroundColor: o.vars.palette.state.active,
+            backgroundColor: o.vars.palette.primary.active,
             borderRadius: "2px 2px 0px 0px",
             position: "absolute"
           }
@@ -4388,7 +4356,7 @@ const p = (o) => ({
       }
     }
   }
-}), R = (o) => ({
+}), I = (o) => ({
   M4LAccordion: {
     styleOverrides: {
       "&.M4LAccordion-root": {
@@ -4408,7 +4376,7 @@ const p = (o) => ({
           marginBottom: "0px",
           borderRadius: "4px",
           border: "1px solid",
-          borderColor: o.vars.palette.state.borderPrimary,
+          borderColor: o.vars.palette.border.primary,
           "& .MuiCollapse-root": {
             padding: "8px",
             "& .MuiCollapse-wrapper": {
@@ -4443,13 +4411,13 @@ const p = (o) => ({
               }
             },
             "& .Mui-expanded": {
-              background: o.vars.palette.state.active12,
+              background: o.vars.palette.primary.activeOpacity,
               height: "28px",
               minHeight: "28px",
               "& .MuiButtonBase-root": {
                 "&.MuiAccordionSummary-content": {
                   borderRadius: "0 0 0 0 !important",
-                  background: o.vars.palette.state.active12,
+                  background: o.vars.palette.primary.activeOpacity,
                   height: "28px",
                   minHeight: "28px"
                 },
@@ -4482,17 +4450,17 @@ const p = (o) => ({
               minHeight: "28px",
               padding: "0",
               "&:hover": {
-                background: o.vars.palette.state?.hoverDefault
+                background: o.vars.palette.background.hover
               }
             },
             "& .MuiCollapse-root": {
               background: o.vars.palette.background.default,
-              borderColor: o.vars.palette.state.borderPrimary,
+              borderColor: o.vars.palette.border.primary,
               borderRadius: "0px 0px 4px 4px",
               padding: "8px",
               "&.MuiButtonBase-root": {
                 padding: "4px 8px !important",
-                background: o.vars.palette.background.neutral
+                background: o.vars.palette.background.main
               },
               "& .M4LAccordion-content": {
                 display: "flex !important",
@@ -4529,7 +4497,7 @@ const p = (o) => ({
       }
     }
   }
-}), A = (o) => ({
+}), T = (o) => ({
   M4LRHFormProvider: {
     styleOverrides: {
       "&.M4LRHFormProvider-root": {
@@ -4544,12 +4512,12 @@ const p = (o) => ({
       }
     }
   }
-}), P = (o) => ({
+}), R = (o) => ({
   M4LPeriod: {
     styleOverrides: {
       "&.M4LPeriod-root": {
         border: "solid 1px",
-        borderColor: o.vars.palette.state.borderPrimary,
+        borderColor: o.vars.palette.border.primary,
         display: "flex",
         width: "100%",
         height: "auto",
@@ -4570,11 +4538,11 @@ const p = (o) => ({
             borderRight: "1px solid",
             display: "flex",
             alignItems: "center",
-            borderColor: o.vars.palette.state.borderPrimary,
+            borderColor: o.vars.palette.border.primary,
             [o.breakpoints.down("md")]: {
               borderRight: "0",
               borderBottom: "1px solid",
-              borderColor: o.vars.palette.state.borderPrimary
+              borderColor: o.vars.palette.border.primary
             }
           },
           "& .M4LPeriod-skeletonFieldSecondary": {
@@ -4585,20 +4553,20 @@ const p = (o) => ({
           }
         },
         "&:hover": {
-          borderColor: o.vars.palette.state.hover
+          borderColor: o.vars.palette.primary.hover
         },
         "&.M4LPeriod-isFocus": {
-          borderColor: o.vars.palette.state.active
+          borderColor: o.vars.palette.primary.active
         },
         "& .MuiAutocomplete-root": {
           width: "100%",
           borderRadius: 0,
           borderRight: "1px solid",
-          borderColor: o.vars.palette.state.borderPrimary,
+          borderColor: o.vars.palette.border.primary,
           [o.breakpoints.down("md")]: {
             borderRight: 0,
             borderBottom: "1px solid",
-            borderColor: o.vars.palette.state.borderPrimary
+            borderColor: o.vars.palette.border.primary
           },
           "& .MuiInput-root": {
             backgroundColor: "transparent"
@@ -4652,7 +4620,7 @@ const p = (o) => ({
           height: "100% !important",
           padding: "0px 0px 0px 8px",
           borderRight: "1px solid",
-          borderColor: o.vars.palette.state.borderPrimary
+          borderColor: o.vars.palette.border.primary
         },
         "& .M4LPeriod-containerDateValue": {
           display: "flex",
@@ -4660,10 +4628,10 @@ const p = (o) => ({
           padding: "0px 0px 0px 8px"
         },
         "&.M4LPeriod-stateError": {
-          borderColor: o.vars.palette.state.error.normal,
+          borderColor: o.vars.palette.error.main,
           boxShadow: o.customShadows?.z2,
           "&.M4LPeriod-stateError:hover": {
-            borderColor: o.vars.palette.state.error.normal,
+            borderColor: o.vars.palette.error.main,
             background: "transparent",
             boxShadow: o.customShadows?.z2
           },
@@ -4671,52 +4639,52 @@ const p = (o) => ({
             width: "100%",
             background: "transparent",
             "& .MuiInputBase-root:hover": {
-              background: o.vars.palette.error.opacity,
+              background: o.vars.palette.error.activeOpacity,
               height: "100%"
             }
           }
         },
         "&.M4LPeriod-stateWarning": {
-          borderColor: o.vars.palette.state.warning.normal,
+          borderColor: o.vars.palette.warning.main,
           boxShadow: o.customShadows?.z2,
           "&.M4LPeriod-stateWarning:hover": {
-            borderColor: o.vars.palette.state.warning.normal,
+            borderColor: o.vars.palette.warning.main,
             boxShadow: o.customShadows?.z2,
             background: "transparent",
             "& .MuiTextField-root:hover": {
               background: "transparent",
               "& .MuiInputBase-root:hover": {
-                background: o.vars.palette.warning.opacity
+                background: o.vars.palette.warning.activeOpacity
               }
             }
           }
         },
         "&.M4LPeriod-stateSuccess": {
-          borderColor: o.vars.palette.state.success.normal,
+          borderColor: o.vars.palette.success.main,
           boxShadow: o.customShadows?.z2,
           "&.M4LPeriod-stateSuccess:hover": {
-            borderColor: o.vars.palette.state.success.normal,
+            borderColor: o.vars.palette.success.main,
             boxShadow: o.customShadows?.z2,
             background: "transparent",
             "& .MuiTextField-root:hover": {
               background: "transparent",
               "& .MuiInputBase-root:hover": {
-                background: o.vars.palette.success.opacity
+                background: o.vars.palette.success.activeOpacity
               }
             }
           }
         },
         "&.M4LPeriod-stateInfo": {
-          borderColor: o.vars.palette.state.info.normal,
+          borderColor: o.vars.palette.info.main,
           boxShadow: o.customShadows?.z2,
           "&.M4LPeriod-stateInfo:hover": {
-            borderColor: o.vars.palette.state.info.normal,
+            borderColor: o.vars.palette.info.main,
             background: "transparent",
             boxShadow: o.customShadows?.z2,
             "& .MuiTextField-root:hover": {
               background: "transparent",
               "& .MuiInputBase-root:hover": {
-                background: o.vars.palette.info.opacity
+                background: o.vars.palette.info.main
               }
             }
           }
@@ -4724,7 +4692,7 @@ const p = (o) => ({
       }
     }
   }
-}), D = (o) => ({
+}), A = (o) => ({
   M4LModalDialog: {
     styleOverrides: {
       "&.M4LModal-root": {
@@ -4863,16 +4831,16 @@ const p = (o) => ({
         margin: "0px",
         maxWidth: "unset",
         maxHeight: "unset",
-        background: o.vars.palette.state.active12,
+        background: o.vars.palette.primary.activeOpacity,
         border: "2px solid",
-        borderColor: o.vars.palette.state.borderPrimary,
+        borderColor: o.vars.palette.border.primary,
         boxShadow: o.vars.customShadows.z4,
         width: "auto",
         height: "auto"
       }
     }
   }
-}), H = (o) => ({
+}), P = (o) => ({
   M4LPaperForm: {
     styleOverrides: {
       "&.M4LPaperForm-root": {
@@ -4880,7 +4848,7 @@ const p = (o) => ({
         borderRadius: "4px",
         background: o.vars.palette.background.default,
         border: "1px solid",
-        borderColor: o.vars.palette.state.borderSecondary,
+        borderColor: o.vars.palette.border.secondary,
         width: "100%",
         height: "auto",
         // variante isForm
@@ -4901,7 +4869,7 @@ const p = (o) => ({
             height: "36px",
             minHeight: "36px"
           },
-          //Title paperForm 
+          //Title paperForm
           "& .M4LPaperForm-iconTitleContainer": {
             ...o.colorSchemes.finalTheme.typography.bodyDens,
             color: o.vars.palette.text.primary,
@@ -4926,7 +4894,7 @@ const p = (o) => ({
       }
     }
   }
-}), W = (o) => ({
+}), O = (o) => ({
   M4LTooltip: {
     styleOverrides: {
       "&.M4LTooltip-root": {
@@ -4941,13 +4909,13 @@ const p = (o) => ({
           height: "fit-content",
           minHeight: "24px",
           width: "fit-content",
-          color: r.marbleLight[30],
+          color: t.marbleLight[30],
           ...o.colorSchemes.finalTheme.typography.body
         }
       }
     }
   }
-}), O = (o) => ({
+}), D = (o) => ({
   M4LBadge: {
     styleOverrides: {
       "&.M4LBadge-root": {
@@ -4968,17 +4936,17 @@ const p = (o) => ({
             borderRadius: "4px",
             border: "1px solid",
             borderColor: o.vars.palette.background.default,
-            backgroundColor: o.vars.palette.state.error.normal,
+            backgroundColor: o.vars.palette.error.main,
             height: "16px",
             top: "14%",
             right: "16%",
-            color: o.vars.palette.patronus?.marbleLight[30]
+            color: o.vars.palette.grey[200]
           }
         }
       }
     }
   }
-}), z = (o) => (console.log("Test media query", o.typography.body), {
+}), H = (o) => ({
   M4LDataGrid: {
     styleOverrides: {
       "&.M4LDataGrid-root": {
@@ -4986,7 +4954,7 @@ const p = (o) => ({
         boxShadow: "unset",
         borderRadius: "4px",
         border: "1px solid",
-        borderColor: o.vars.palette.state.borderPrimary,
+        borderColor: o.vars.palette.border.primary,
         display: "flex",
         position: "relative",
         flexDirection: "column",
@@ -5044,15 +5012,6 @@ const p = (o) => ({
               background: o.vars.palette.background.default
             }
           },
-          /*'& .M4LPager-root': {
-                          '& .M4LPager-labelRowsPerPageContainer': {
-                              '& .MuiTypography-root': {
-                                  '&.MuiTypography-body': {
-                                      textOverflow: 'ellipsis',
-                                  },
-                              },
-                          },
-                      },*/
           "& .M4LDataGrid-rowsCount": {
             display: "flex",
             gap: "8px",
@@ -5120,10 +5079,10 @@ const p = (o) => ({
               "--rdg-row-selected-background-color": "#D9E9FC",
               "--rdg-row-hover-background-color": "#D9E9FC",
               "--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-selection-color": o.vars.palette.border.selected,
+              "--row-selected-hover-background-color": o.vars.palette.primary.toneOpacity,
               "--rdg-checkbox-color": o.vars.palette.primary.main,
-              "--rdg-checkbox-focus-color": t(
+              "--rdg-checkbox-focus-color": r(
                 o.colorSchemes.finalTheme.palette.primary.main,
                 o.colorSchemes.finalTheme.palette.action.selectedOpacity
               ),
@@ -5136,7 +5095,7 @@ const p = (o) => ({
                 borderBottom: "1px solid",
                 borderLeft: "0.5px solid",
                 borderRight: "0.5px solid",
-                borderColor: o.vars.palette.state.borderDisable
+                borderColor: o.vars.palette.border.disabled
               }
             },
             '& [role="columnheader"]': {
@@ -5147,7 +5106,7 @@ const p = (o) => ({
               '&[aria-selected="false"] .rdg-cell': {
                 backgroundColor: o.vars.palette.background.default,
                 borderLeft: "0.5px solid",
-                borderColor: o.vars.palette.state.borderDisable
+                borderColor: o.vars.palette.border.disabled
               },
               "&:nth-of-type(odd)": {
                 "& .rdg-cell": {
@@ -5155,14 +5114,14 @@ const p = (o) => ({
                 }
               },
               '&[aria-selected="true"] .rdg-cell': {
-                backgroundColor: o.vars.palette.state?.toneOp
+                backgroundColor: o.vars.palette.primary?.toneOpacity
               },
               "&:hover": {
                 "& .rdg-cell": {
-                  backgroundColor: `${o.vars.palette.state.gridHover}!important`,
+                  backgroundColor: `${o.vars.palette.general.gridHover} !important`,
                   transition: "background-color 0.1s linear"
                 }
-                /* backgroundColor: theme.vars.palette.state.active12, */
+                /* backgroundColor: theme.vars.palette.primary.activeOpacity, */
               },
               backgroundColor: "transparent"
             },
@@ -5170,7 +5129,7 @@ const p = (o) => ({
               transition: "background-color 0.1s linear",
               borderBottom: "0px solid transparent",
               borderRight: "0.5px solid transparent",
-              borderColor: o.vars.palette.background.background,
+              borderColor: o.vars.palette.background.bold,
               color: o.vars.palette.text.secondary,
               display: "inline",
               justifyContent: "center",
@@ -5187,7 +5146,7 @@ const p = (o) => ({
                 borderBottom: "1px solid",
                 borderLeft: "0.5px solid",
                 borderRight: "0.5px solid",
-                borderColor: `${o.vars.palette.state.borderDisable}!important`,
+                borderColor: `${o.vars.palette.border.disabled} !important`,
                 ...o.colorSchemes.finalTheme.typography.body
               },
               "&.rdg-cell-frozen": {
@@ -5227,12 +5186,12 @@ const p = (o) => ({
               lineHeight: "var(--rdg-row-height)!important"
             },
             "& [aria-selected=true]": {
-              backgroundColor: o.vars.palette.state?.toneOp,
+              backgroundColor: o.vars.palette.primary?.toneOpacity,
               color: o.vars.palette.text.primary,
               //cambia el color del contorno de cada celda selecionada
               outline: "1px solid",
               outlineOffset: "-1px",
-              outlineColor: o.vars.palette.state.lineTheme
+              outlineColor: o.vars.palette.border.selected
             },
             // Alineaciones
             "& .rdg-cell.rdg-cell-align-left": {
@@ -5255,7 +5214,7 @@ const p = (o) => ({
             // Estilado de la ultima celda (Quitar la linea divisora derecha)
             "& .rdg-row :last-child:after": {
               borderRight: "0px solid",
-              borderColor: o.vars.palette.background.neutral
+              borderColor: o.vars.palette.background.main
             },
             "& .rdg-header-row": {
               backgroundColor: o.vars.palette.background.header
@@ -5270,7 +5229,7 @@ const p = (o) => ({
               boxShadow: "none",
               gridTemplateColumns: "auto",
               borderBottom: "0.5px solid !important",
-              borderColor: `${o.vars.palette.state.borderDisable}!important`,
+              borderColor: `${o.vars.palette.border.disabled} !important`,
               '& [draggable="true"]': {
                 fontSize: o.typography.body
               },
@@ -5280,7 +5239,7 @@ const p = (o) => ({
                 boxShadow: "var(--rdg-frozen-cell-box-shadow)",
                 "&:after": {
                   //borderRight: `1.5px solid`,
-                  //borderColor: theme.vars.palette.background.neutral,
+                  //borderColor: theme.vars.palette.background.main,
                 }
               },
               "& .rdg-header-sort-cell": {
@@ -5374,7 +5333,7 @@ const p = (o) => ({
       }
     }
   }
-}), V = (o) => ({
+}), W = (o) => ({
   M4LPager: {
     styleOverrides: {
       "&.M4LPager-root": {
@@ -5482,7 +5441,7 @@ const p = (o) => ({
       }
     }
   }
-}), G = (o) => ({
+}), z = (o) => ({
   M4LCheckBox: {
     styleOverrides: {
       "&.M4LCheckBox-root": {
@@ -5534,22 +5493,22 @@ const p = (o) => ({
           }
         },
         "& .MuiButtonBase-root:hover": {
-          backgroundColor: o.vars.palette.state?.active12,
+          backgroundColor: o.vars.palette.primary?.activeOpacity,
           borderRadius: "4px"
         },
         "& .Mui-focusVisible": {
           border: "1px solid",
-          borderColor: o.vars.palette.state?.focus
+          borderColor: o.vars.palette.primary?.focus
         },
         "& .MuiButtonBase-root:hover .MuiSvgIcon-root": {
-          fill: o.vars.palette.state?.hover
+          fill: o.vars.palette.primary?.hover
         },
         /* caso general */
         "& .M4LCheckBox-checkTypography .MuiTypography-root": {
           ...o.colorSchemes.finalTheme.typography.body
         },
         "& .M4LCheckBox-stateDisabled .MuiSvgIcon-root": {
-          fill: o.vars.palette.state?.default
+          fill: o.vars.palette.background?.default
         },
         "& .M4LCheckBox-stateDisabled .MuiTypography-root": {
           color: o.vars.palette.text.disabled
@@ -5561,7 +5520,7 @@ const p = (o) => ({
       }
     }
   }
-}), F = (o) => ({
+}), V = (o) => ({
   M4LStack: {
     styleOverrides: {
       "&.M4LStack-root": {
@@ -5574,7 +5533,7 @@ const p = (o) => ({
       }
     }
   }
-}), j = (o) => ({
+}), G = (o) => ({
   M4LTabs: {
     styleOverrides: {
       "&.M4LTabs-root": {
@@ -5588,7 +5547,7 @@ const p = (o) => ({
           display: "none"
         },
         "& .MuiButtonBase-root": {
-          background: o.vars.palette.background.background,
+          background: o.vars.palette.background.bold,
           borderRadius: "4px 4px 0 0",
           "& .MuiSvgIcon-root": {
             color: o.vars.palette.text.primary
@@ -5596,7 +5555,7 @@ const p = (o) => ({
         },
         "& .MuiButtonBase-root:hover": {
           "& .MuiSvgIcon-root": {
-            color: o.vars.palette.state.active
+            color: o.vars.palette.primary.active
           }
         },
         "& .MuiTabs-scroller": {
@@ -5614,7 +5573,7 @@ const p = (o) => ({
       }
     }
   }
-}), N = (o) => ({
+}), F = (o) => ({
   M4LNoItemSelected: {
     styleOverrides: {
       "&.M4LNoItemSelected-root": {
@@ -5634,7 +5593,7 @@ const p = (o) => ({
       }
     }
   }
-}), E = (o) => ({
+}), j = (o) => ({
   M4LScrollBar: {
     styleOverrides: {
       "&.M4LScrollBar-root": {
@@ -5659,17 +5618,17 @@ const p = (o) => ({
           position: "relative"
         },
         "& .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before": {
-          background: o.vars.palette.state.scrollBar,
+          background: o.vars.palette.general.scrollBar,
           borderRadius: "2px"
         },
         "& .simplebar-track.simplebar-vertical .simplebar-scrollbar:before": {
-          background: o.vars.palette.state.scrollBar,
+          background: o.vars.palette.general.scrollBar,
           borderRadius: "2px"
         }
       }
     }
   }
-}), $ = (o) => ({
+}), N = (o) => ({
   M4LGridLayout: {
     styleOverrides: {
       "&.M4LGridLayout-root": {
@@ -5677,7 +5636,7 @@ const p = (o) => ({
       }
     }
   }
-}), U = (o) => ({
+}), E = (o) => ({
   M4LTabContent: {
     styleOverrides: {
       "&.M4LTabContent-root": {
@@ -5695,7 +5654,7 @@ const p = (o) => ({
         borderLeft: "1px solid",
         borderRight: "1px solid",
         borderBottom: "1px solid",
-        borderColor: o.vars.palette.state.borderSecondary,
+        borderColor: o.vars.palette.border.secondary,
         boxSizing: "border-box",
         zIndex: "1",
         top: "-1px",
@@ -5708,7 +5667,7 @@ const p = (o) => ({
       }
     }
   }
-}), _ = (o) => ({
+}), $ = (o) => ({
   M4LMenuActions: {
     styleOverrides: {
       "&.M4LMenuActions-root": {
@@ -5734,15 +5693,15 @@ const p = (o) => ({
           }
         },
         "& .M4LMenuActions-itemDelete": {
-          color: o.vars.palette.state.error.normal,
+          color: o.vars.palette.error.main,
           "& .M4LIcon-root .M4LIcon-icon": {
-            backgroundColor: o.vars.palette.state.error.normal
+            backgroundColor: o.vars.palette.error.main
           }
         }
       }
     }
   }
-}), q = (o) => ({
+}), U = (o) => ({
   M4LPrintingSystem: {
     styleOverrides: {
       "&.M4LPrintingSystem-root": {
@@ -5924,7 +5883,7 @@ const p = (o) => ({
       }
     }
   }
-}), J = (o) => ({
+}), _ = (o) => ({
   M4LFormatter: {
     styleOverrides: {
       "&.M4LFormatter-root": {
@@ -5934,14 +5893,14 @@ const p = (o) => ({
           },
           "&.M4LFormatter-booleanFormatterCheck": {
             "& .M4LIcon-icon": {
-              backgroundColor: o.vars.palette.state.active
+              backgroundColor: o.vars.palette.primary.active
             }
           }
         }
       }
     }
   }
-}), K = (o) => ({
+}), q = (o) => ({
   M4LoadingError: {
     styleOverrides: {
       "&.M4LoadingError-root": {
@@ -5971,7 +5930,7 @@ const p = (o) => ({
             " .M4LIcon-icon": {
               width: "100px",
               height: "100px",
-              backgroundColor: o.vars.palette.state.skeleton.default
+              backgroundColor: o.vars.palette.skeleton.default
             }
           },
           "& .M4LoadingError-titleDescription": {
@@ -5994,7 +5953,7 @@ const p = (o) => ({
           "& .M4LoadingError-loadingErrorDivider": {
             width: "208px",
             height: "1px",
-            background: o.vars.palette.state.borderPrimary
+            background: o.vars.palette.border.primary
           },
           // pasos de acción
           "& .MuiTypography-paragraph": {
@@ -6008,7 +5967,7 @@ const p = (o) => ({
       }
     }
   }
-}), Q = (o) => ({
+}), J = (o) => ({
   M4LMFLoader: {
     styleOverrides: {
       "&.M4LMFLoader-root": {
@@ -6027,7 +5986,7 @@ const p = (o) => ({
       }
     }
   }
-}), X = (o) => ({
+}), K = (o) => ({
   M4LLoadingButton: {
     styleOverrides: {
       "&.M4LLoadingButton-root": {
@@ -6050,10 +6009,6 @@ const p = (o) => ({
         "& .MuiCircularProgress-root": {
           color: `${o.vars.palette.text.primary}!important`
         },
-        /* '& .MuiTypography-root': {
-            color: '#fff',
-            transition: 'all .5s ease',
-        }, */
         "& .M4LLoadingButton-skeleton ": {
           height: "100%!important",
           borderRadius: "4px"
@@ -6075,7 +6030,7 @@ const p = (o) => ({
           "&::before": {
             inset: "0",
             border: "1px solid",
-            borderColor: o.vars.palette.state?.focus,
+            borderColor: o.vars.palette.primary?.focus,
             borderRadius: "4px",
             transform: "scale(1.07, 1.36)",
             position: "absolute",
@@ -6097,7 +6052,7 @@ const p = (o) => ({
                 backgroundColor: o.vars.palette.text.disabled
               },
               "&:hover": {
-                backgroundColor: o.vars.palette.state?.default,
+                backgroundColor: o.vars.palette.background?.default,
                 color: o.vars.palette.text.disabled,
                 "& .M4LIcon-icon": {
                   backgroundColor: o.vars.palette.text.disabled,
@@ -6105,7 +6060,7 @@ const p = (o) => ({
                 }
               },
               "&:active": {
-                backgroundColor: o.vars.palette.state?.default,
+                backgroundColor: o.vars.palette.background?.default,
                 color: o.vars.palette.text.disabled,
                 "& .M4LIcon-icon": {
                   backgroundColor: o.vars.palette.text.disabled,
@@ -6113,7 +6068,7 @@ const p = (o) => ({
                 }
               },
               "&.Mui-focusVisible": {
-                backgroundColor: o.vars.palette.state?.default,
+                backgroundColor: o.vars.palette.background?.default,
                 color: o.vars.palette.text.disabled,
                 "& .M4LIcon-icon": {
                   backgroundColor: o.vars.palette.text.disabled,
@@ -6152,12 +6107,12 @@ const p = (o) => ({
           },
           "& .M4LTypography-root": {
             "& .MuiTypography-root": {
-              color: o.vars.palette.patronus?.marbleLight[30]
+              color: o.vars.palette.text?.primary
             }
           },
           "& .MuiButtonBase-root": {
-            backgroundColor: o.vars.palette.state?.active,
-            color: o.vars.palette.patronus?.marbleLight[10],
+            backgroundColor: o.vars.palette.primary?.active,
+            color: o.vars.palette.common?.white,
             boxShadow: o.customShadows?.primary,
             position: "relative",
             "& .M4LTypography-root": {
@@ -6169,26 +6124,26 @@ const p = (o) => ({
               backgroundColor: o.vars.palette.text.secondary
             },
             "&:hover": {
-              backgroundColor: o.vars.palette.state?.hover,
+              backgroundColor: o.vars.palette.primary?.hover,
               "& .M4LIcon-icon": {
-                backgroundColor: o.vars.palette.patronus?.marbleLight[10]
+                backgroundColor: o.vars.palette.common?.white
               },
               "& .MuiTypography-root": {
                 color: "#fff"
               }
             },
             "&:active": {
-              backgroundColor: o.vars.palette.state?.active,
-              color: o.vars.palette.patronus?.marbleLight[10],
+              backgroundColor: o.vars.palette.primary?.active,
+              color: o.vars.palette.common?.white,
               "& .M4LIcon-icon": {
-                backgroundColor: o.vars.palette.patronus?.marbleLight[10]
+                backgroundColor: o.vars.palette.common?.white
               }
             },
             "&.Mui-focusVisible": {
-              backgroundColor: o.vars.palette.state?.active,
-              color: o.vars.palette.patronus?.marbleLight[10],
+              backgroundColor: o.vars.palette.primary?.active,
+              color: o.vars.palette.common?.white,
               "& .M4LIcon-icon": {
-                backgroundColor: o.vars.palette.patronus?.marbleLight[10]
+                backgroundColor: o.vars.palette.common?.white
               },
               "&::before": {
                 content: "''"
@@ -6206,27 +6161,27 @@ const p = (o) => ({
               backgroundColor: o.vars.palette.text.secondary
             },
             "&:hover": {
-              borderColor: o.vars.palette.state?.hover,
-              color: o.vars.palette.state?.hover,
-              backgroundColor: o.vars.palette.state?.active12,
+              borderColor: o.vars.palette.primary?.hover,
+              color: o.vars.palette.primary?.hover,
+              backgroundColor: o.vars.palette.primary?.activeOpacity,
               "& .M4LIcon-icon": {
-                backgroundColor: o.vars.palette.state?.hover
+                backgroundColor: o.vars.palette.primary?.hover
               }
             },
             "&:active": {
-              borderColor: o.vars.palette.state?.active,
-              color: o.vars.palette.state?.active,
+              borderColor: o.vars.palette.primary?.active,
+              color: o.vars.palette.primary?.active,
               backgroundColor: "transparent",
               "& .M4LIcon-icon": {
-                backgroundColor: o.vars.palette.state?.active
+                backgroundColor: o.vars.palette.primary?.active
               }
             },
             "&.Mui-focusVisible": {
-              borderColor: o.vars.palette.state?.active,
-              color: o.vars.palette.state?.active,
+              borderColor: o.vars.palette.primary?.active,
+              color: o.vars.palette.primary?.active,
               backgroundColor: "transparent",
               "& .M4LIcon-icon": {
-                backgroundColor: o.vars.palette.state?.active
+                backgroundColor: o.vars.palette.primary?.active
               },
               "&::before": {
                 content: "''"
@@ -6242,24 +6197,24 @@ const p = (o) => ({
               backgroundColor: o.vars.palette.text.secondary
             },
             "&:hover": {
-              backgroundColor: o.vars.palette.state?.active12,
-              color: o.vars.palette.state?.hover,
+              backgroundColor: o.vars.palette.primary?.activeOpacity,
+              color: o.vars.palette.primary?.hover,
               "& .M4LIcon-icon": {
-                backgroundColor: o.vars.palette.state?.hover
+                backgroundColor: o.vars.palette.primary?.hover
               }
             },
             "&:active": {
               backgroundColor: "transparent",
-              color: o.vars.palette.state?.active,
+              color: o.vars.palette.primary?.active,
               "& .M4LIcon-icon": {
-                backgroundColor: o.vars.palette.state?.active
+                backgroundColor: o.vars.palette.primary?.active
               }
             },
             "&.Mui-focusVisible": {
               backgroundColor: "transparent",
-              color: o.vars.palette.state?.active,
+              color: o.vars.palette.primary?.active,
               "& .M4LIcon-icon": {
-                backgroundColor: o.vars.palette.state?.active
+                backgroundColor: o.vars.palette.primary?.active
               },
               "&:before": {
                 content: "''"
@@ -6270,7 +6225,7 @@ const p = (o) => ({
       }
     }
   }
-}), Y = (o) => ({
+}), Q = (o) => ({
   M4LPDFViewer: {
     styleOverrides: {
       "&.M4LPDFViewer-root": {
@@ -6285,7 +6240,7 @@ const p = (o) => ({
       }
     }
   }
-}), Z = (o) => ({
+}), X = (o) => ({
   M4LTopBar: {
     styleOverrides: {
       "&.M4LTopBar-root": {
@@ -6352,7 +6307,7 @@ const p = (o) => ({
       }
     }
   }
-}), oo = (o) => ({
+}), Y = (o) => ({
   M4LAppBarCommercial: {
     styleOverrides: {
       "&.M4LAppBarCommercial-root": {
@@ -6373,7 +6328,7 @@ const p = (o) => ({
       }
     }
   }
-}), to = (o) => ({
+}), Z = (o) => ({
   M4LSectionCommercial: {
     styleOverrides: {
       "&.M4LSectionCommercial-root": {
@@ -6392,7 +6347,7 @@ const p = (o) => ({
       }
     }
   }
-}), ro = (o) => ({
+}), oo = (o) => ({
   M4LHamburgerMenuCommercial: {
     styleOverrides: {
       "&.M4LHamburgerMenuCommercial-root": {
@@ -6402,7 +6357,7 @@ const p = (o) => ({
       }
     }
   }
-}), eo = (o) => ({
+}), ro = (o) => ({
   M4LFieldLabel: {
     styleOverrides: {
       "&.M4LFieldLabel-root": {
@@ -6425,7 +6380,7 @@ const p = (o) => ({
       }
     }
   }
-}), ao = (o) => ({
+}), to = (o) => ({
   M4LMap: {
     styleOverrides: {
       "&.M4LMap-root": {
@@ -6632,9 +6587,9 @@ const p = (o) => ({
           lineHeight: "30px"
         },
         "& .xxxxx": {
-          color: o.vars.palette.state.error.normal,
+          color: o.vars.palette.error.main,
           "& .M4LIcon-root .M4LIcon-icon": {
-            backgroundColor: o.vars.palette.state.error.normal
+            backgroundColor: o.vars.palette.error.main
           }
         },
         "& .leaflet-control-scale-line": {
@@ -6704,7 +6659,7 @@ const p = (o) => ({
       }
     }
   }
-}), io = (o) => ({
+}), eo = (o) => ({
   M4LMapGpsTools: {
     styleOverrides: {
       "&.M4LMapGpsTools-gpsToolsRoot": {
@@ -6764,57 +6719,57 @@ const p = (o) => ({
   }
 });
 export {
-  R as A,
-  P as B,
-  D as C,
-  H as D,
-  W as E,
-  V as F,
-  G,
-  F as H,
-  j as I,
-  N as J,
-  E as K,
-  $ as L,
-  X as M,
-  U as N,
-  _ as O,
-  q as P,
-  J as Q,
-  K as R,
-  Q as S,
-  Y as T,
-  Z as U,
-  oo as V,
-  to as W,
-  ro as X,
-  eo as Y,
-  io as Z,
-  ao as _,
-  A as a,
-  p as b,
-  d as c,
-  l as d,
-  s as e,
-  M as f,
-  c as g,
-  O as h,
-  g as i,
-  z as j,
-  x as k,
-  u as l,
-  b as m,
-  L as n,
-  y as o,
-  v as p,
-  h as q,
-  f as r,
-  w as s,
-  m as t,
-  C as u,
-  k as v,
-  S as w,
-  B as x,
-  I as y,
-  T as z
+  I as A,
+  R as B,
+  A as C,
+  P as D,
+  O as E,
+  W as F,
+  z as G,
+  V as H,
+  G as I,
+  F as J,
+  j as K,
+  N as L,
+  K as M,
+  E as N,
+  $ as O,
+  U as P,
+  _ as Q,
+  q as R,
+  J as S,
+  Q as T,
+  X as U,
+  Y as V,
+  Z as W,
+  oo as X,
+  ro as Y,
+  eo as Z,
+  to as _,
+  T as a,
+  i as b,
+  n as c,
+  p as d,
+  d as e,
+  u as f,
+  l as g,
+  D as h,
+  s as i,
+  H as j,
+  c as k,
+  g as l,
+  x as m,
+  b as n,
+  v as o,
+  M as p,
+  y as q,
+  L as r,
+  h as s,
+  f as t,
+  m as u,
+  w as v,
+  k as w,
+  C as x,
+  S as y,
+  B as z
 };