npm - @m4l/styles - Versions diffs - 3.2.3 → 6.0.0 - Mend

@m4l/styles 3.2.3 → 6.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

package/index.js +20 -20
package/package.json +1 -1
package/theme/defaultThemeOptions-DVY68pts.js +125 -0
package/theme/defaultThemeOptions.d.ts +2 -1
package/theme/index.d.ts +1 -1
package/theme/overrides/M4LExtendedComponents/{index-C4PXddLa.js → index-BO_x8lkT.js} +256 -255
package/theme/overrides/M4LRHFComponents/{index-BRZVeOM5.js → index-Dv4h8DSV.js} +34 -34
package/theme/overrides/MUIComponents/Avatar.d.ts +1 -1
package/theme/overrides/MUIComponents/Input.d.ts +1 -1
package/theme/overrides/MUIComponents/Progress.d.ts +1 -1
package/theme/overrides/MUIComponents/ToggleButton.d.ts +2 -2
package/theme/overrides/MUIComponents/{index-XoLdmZP6.js → index-DrBJTI1s.js} +61 -62
package/theme/overrides/{index-B9xZa27y.js → index-BOMUIneQ.js} +15 -15
package/theme/palette/baseOpacityColors.d.ts +3 -0
package/theme/palette/defaultColors.d.ts +14 -0
package/theme/palette/index.d.ts +0 -1
package/theme/palette/presetColors.d.ts +18 -4
package/theme/palette/semanticColors.d.ts +16 -0
package/theme/palette-voCQl3kP.js +792 -0
package/theme/{shadows-GTYqExFA.js → shadows-Cek_1mpN.js} +1 -1
package/types/augmentations.d.ts +160 -155
package/types/types.d.ts +72 -31
package/utils/{getColorPresets-CXZaM9oS.js → getColorPresets-DgmrCj5l.js} +1 -1
package/utils/getColorPresets.d.ts +4 -4
package/utils/getColorState.d.ts +2 -2
package/utils/getPaletteByPreset.d.ts +127 -0
package/utils/index.d.ts +1 -0
package/vite-env.d.ts +3 -3
package/theme/defaultThemeOptions-BlJvKCE6.js +0 -24
package/theme/palette/palette.d.ts +0 -6
package/theme/palette/stateColors.d.ts +0 -2
package/theme/palette-DM0gXxA2.js +0 -584

package/theme/overrides/M4LExtendedComponents/{index-C4PXddLa.js → index-BO_x8lkT.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { alpha as r } from "@mui/material/styles";
-import { B as t } from "../../palette-DM0gXxA2.js";
+import { B as t } from "../../palette-voCQl3kP.js";
 const i = (o) => ({
   M4LIcon: {
     styleOverrides: {
@@ -70,7 +70,7 @@ const i = (o) => ({
         "&::before": {
           boxSizing: "content-box",
           border: "1px solid",
-          borderColor: o.vars.palette.primary?.focus,
+          borderColor: o.vars.palette.primary.focusActive,
           borderRadius: "4px",
           position: "absolute",
           transition: "all .3s ease"
@@ -110,14 +110,14 @@ const i = (o) => ({
             }
           },
           "&:active": {
-            backgroundColor: o.vars.palette.primary?.active,
+            backgroundColor: o.vars.palette.primary.focusActive,
             transition: "background-color .5s ease",
             "& .M4LIcon-icon": {
               backgroundColor: o.vars.palette.common?.white
             }
           },
           "&.M4LIconButton-isFocus": {
-            backgroundColor: o.vars.palette.primary?.active,
+            backgroundColor: o.vars.palette.primary.focusActive,
             "& .M4LIcon-icon": {
               backgroundColor: o.vars.palette.common?.white
             },
@@ -128,29 +128,29 @@ const i = (o) => ({
         },
         /* Variant secondary */
         "&.M4LIconButton-variantSecondary:not(&.M4LIconButton-isDisabled)": {
-          borderColor: o.vars.palette.border.dense,
+          borderColor: o.vars.palette?.border.disabled,
           "& .M4LIcon-icon": {
             backgroundColor: o.vars.palette.text.primary
           },
           "&:hover": {
             border: "1px solid",
-            borderColor: o.vars.palette.primary?.focus,
+            borderColor: o.vars.palette.primary.focusActive,
             "& .M4LIcon-icon": {
-              backgroundColor: o.vars.palette.primary?.focus
+              backgroundColor: o.vars.palette.primary.focusActive
             }
           },
           "&:active": {
             border: "1px solid",
-            borderColor: o.vars.palette.primary?.active,
+            borderColor: o.vars.palette.primary.focusActive,
             "& .M4LIcon-icon": {
-              backgroundColor: o.vars.palette.primary?.active
+              backgroundColor: o.vars.palette.primary.focusActive
             }
           },
           "&.M4LIconButton-isFocus": {
             border: "1px solid",
-            borderColor: o.vars.palette.primary?.active,
+            borderColor: o.vars.palette.primary.focusActive,
             "& .M4LIcon-icon": {
-              backgroundColor: o.vars.palette.primary?.active
+              backgroundColor: o.vars.palette.primary.focusActive
             },
             "&::before": {
               content: "''"
@@ -160,23 +160,23 @@ const i = (o) => ({
         /* Variant line */
         "&.M4LIconButton-variantLine:not(&.M4LIconButton-isDisabled)": {
           "&:hover": {
-            backgroundColor: o.vars.palette.primary?.activeOpacity,
+            backgroundColor: o.vars.palette.primary.opacity,
             "& .M4LIcon-icon": {
-              backgroundColor: o.vars.palette.primary?.focus
+              backgroundColor: o.vars.palette.primary.focusActive
             }
           },
           "&:active": {
             backgroundColor: "transparent",
             "& .M4LIcon-icon": {
-              backgroundColor: o.vars.palette.primary?.active
+              backgroundColor: o.vars.palette.primary.focusActive
             }
           },
           "&.M4LIconButton-isFocus": {
             backgroundColor: "transparent",
             border: "1px solid",
-            borderColor: o.vars.palette.primary?.focus,
+            borderColor: o.vars.palette.primary.focusActive,
             "& .M4LIcon-icon": {
-              backgroundColor: o.vars.palette.primary?.active
+              backgroundColor: o.vars.palette.primary.focusActive
             }
           }
         },
@@ -255,12 +255,12 @@ const i = (o) => ({
           borderRadius: "4px"
         },
         ".MuiButtonBase-root:hover": {
-          backgroundColor: o.vars.palette.primary?.activeOpacity
+          backgroundColor: o.vars.palette.primary.opacity
         },
         ".MuiButtonBase-root:focus": {
-          backgroundColor: o.vars.palette.primary?.activeOpacity,
+          backgroundColor: o.vars.palette.primary.opacity,
           border: "1px solid",
-          borderColor: o.vars.palette.primary?.focus
+          borderColor: o.vars.palette.primary.focusActive
         },
         [o.breakpoints.down("md")]: {
           ".MuiButtonBase-root": {
@@ -332,14 +332,14 @@ const i = (o) => ({
             justifyContent: "normal !important"
           },
           "& .MuiButtonBase-root:hover": {
-            backgroundColor: o.vars.palette.primary?.activeOpacity,
+            backgroundColor: o.vars.palette.primary.opacity,
             borderRadius: "4px",
             padding: "4px"
           },
           "& .MuiButtonBase-root.Mui-selected": {
-            backgroundColor: o.vars.palette.primary?.activeOpacity,
+            backgroundColor: o.vars.palette.primary.opacity,
             "& .M4LanguagePopover-labelItem": {
-              color: o.vars.palette.primary?.active
+              color: o.vars.palette.primary.focusActive
             }
           }
         },
@@ -399,7 +399,7 @@ const i = (o) => ({
       }
     }
   }
-}), g = (o) => ({
+}), u = (o) => ({
   M4LTypography: {
     styleOverrides: {
       "&.M4LTypography-root": {
@@ -411,7 +411,7 @@ const i = (o) => ({
       }
     }
   }
-}), x = (o) => ({
+}), g = (o) => ({
   M4LButton: {
     styleOverrides: {
       "&.M4LButton-root": {
@@ -457,7 +457,7 @@ const i = (o) => ({
           "&::before": {
             inset: "0",
             border: "1px solid",
-            borderColor: o.vars.palette.primary.focus,
+            borderColor: o.vars.palette.primary.focusVisible,
             borderRadius: "4px",
             transform: "scale(1.07, 1.36)",
             position: "absolute",
@@ -475,7 +475,7 @@ const i = (o) => ({
             color: o.vars.palette.text.disabled,
             backgroundColor: o.vars.palette.background.default,
             border: "1px solid",
-            borderColor: o.vars.palette.border.disabled,
+            borderColor: o.vars.palette?.border.disabled,
             "& .M4LIcon-icon": {
               backgroundColor: o.vars.palette.text.disabled
             },
@@ -488,7 +488,7 @@ const i = (o) => ({
               }
             },
             "&:active": {
-              backgroundColor: o.vars.palette.primary?.active,
+              backgroundColor: o.vars.palette.primary.focusActive,
               color: o.vars.palette.text.primary,
               "& .M4LIcon-icon": {
                 backgroundColor: o.vars.palette.text.disabled,
@@ -531,7 +531,7 @@ const i = (o) => ({
         },
         /* Variant contained */
         "&.M4LButton-variantContained": {
-          backgroundColor: o.vars.palette.primary?.active,
+          backgroundColor: o.vars.palette.primary.focusActive,
           color: o.vars.palette.common?.white,
           boxShadow: o.customShadows?.z1,
           position: "relative",
@@ -553,7 +553,7 @@ const i = (o) => ({
           //     },
           // },
           "&.Mui-focusVisible": {
-            backgroundColor: o.vars.palette.primary?.active,
+            backgroundColor: o.vars.palette.primary.focusActive,
             color: o.vars.palette.common?.white,
             "& .M4LIcon-icon": {
               backgroundColor: o.vars.palette.common?.white
@@ -567,7 +567,7 @@ const i = (o) => ({
         "&.M4LButton-variantOutlined": {
           "& .MuiButtonBase-root": {
             border: "1px solid",
-            borderColor: o.vars.palette.border.dense,
+            borderColor: o.vars.palette?.border.disabled,
             color: o.vars.palette.text.primary,
             "& .M4LIcon-icon": {
               backgroundColor: o.vars.palette.text.primary
@@ -575,25 +575,25 @@ const i = (o) => ({
             "&:hover": {
               borderColor: o.vars.palette.primary?.hover,
               color: o.vars.palette.primary?.hover,
-              backgroundColor: o.vars.palette.primary?.activeOpacity,
+              backgroundColor: o.vars.palette.primary.opacity,
               "& .M4LIcon-icon": {
                 backgroundColor: o.vars.palette.primary?.hover
               }
             },
             "&:active": {
-              borderColor: o.vars.palette.primary?.active,
-              color: o.vars.palette.primary?.active,
+              borderColor: o.vars.palette.primary.focusActive,
+              color: o.vars.palette.primary.focusActive,
               backgroundColor: "transparent",
               "& .M4LIcon-icon": {
-                backgroundColor: o.vars.palette.primary?.active
+                backgroundColor: o.vars.palette.primary.focusActive
               }
             },
             "&.Mui-focusVisible": {
-              borderColor: o.vars.palette.primary?.active,
-              color: o.vars.palette.primary?.active,
+              borderColor: o.vars.palette.primary.focusActive,
+              color: o.vars.palette.primary.focusActive,
               backgroundColor: "transparent",
               "& .M4LIcon-icon": {
-                backgroundColor: o.vars.palette.primary?.active
+                backgroundColor: o.vars.palette.primary.focusActive
               },
               "&::before": {
                 content: "''"
@@ -609,7 +609,7 @@ const i = (o) => ({
               backgroundColor: o.vars.palette.text.primary
             },
             "&:hover": {
-              backgroundColor: o.vars.palette.primary?.activeOpacity,
+              backgroundColor: o.vars.palette.primary.opacity,
               color: o.vars.palette.primary?.hover,
               "& .M4LIcon-icon": {
                 backgroundColor: o.vars.palette.primary?.hover
@@ -617,16 +617,16 @@ const i = (o) => ({
             },
             "&:active": {
               backgroundColor: "transparent",
-              color: o.vars.palette.primary?.active,
+              color: o.vars.palette.primary.focusActive,
               "& .M4LIcon-icon": {
-                backgroundColor: o.vars.palette.primary?.active
+                backgroundColor: o.vars.palette.primary.focusActive
               }
             },
             "&.Mui-focusVisible": {
               backgroundColor: "transparent",
-              color: o.vars.palette.primary?.active,
+              color: o.vars.palette.primary.focusActive,
               "& .M4LIcon-icon": {
-                backgroundColor: o.vars.palette.primary?.active
+                backgroundColor: o.vars.palette.primary.focusActive
               },
               "&:before": {
                 content: "''"
@@ -664,12 +664,12 @@ const i = (o) => ({
       }
     }
   }
-}), u = (o) => ({
+}), x = (o) => ({
   M4LNavLink: {
     styleOverrides: {
       "&.M4LNavLink-root": {
         "& .M4LTypography-root": {
-          color: o.vars.palette.primary.active
+          color: o.vars.palette.primary.focusActive
         },
         "&: hover": {
           "& .M4LTypography-root": {
@@ -721,7 +721,7 @@ const i = (o) => ({
                 height: "100%",
                 position: "relative",
                 borderRight: "1px solid",
-                borderColor: o.vars.palette.border.primary,
+                borderColor: o.vars.palette?.border.default,
                 backgroundColor: o.vars.palette.background.default,
                 "& .M4LSideBar-contentGroups": {
                   padding: "32px 12px",
@@ -730,7 +730,7 @@ const i = (o) => ({
                     padding: "8px",
                     borderTop: "1px solid",
                     borderBottom: "1px solid",
-                    borderColor: o.vars.palette.border.secondary,
+                    borderColor: o.vars.palette?.border.secondary,
                     height: "fit-content",
                     width: "100%",
                     "& .M4LSideBar-navItemRootContent": {
@@ -746,7 +746,7 @@ const i = (o) => ({
                   display: "flex",
                   padding: "10px 5px",
                   borderTop: "1px solid",
-                  borderColor: o.vars.palette.border.disabled,
+                  borderColor: o.vars.palette?.border.disabled,
                   justifyContent: "center",
                   gap: "24px",
                   alignItems: "center",
@@ -813,7 +813,7 @@ const i = (o) => ({
         "& .M4LSideBar-subItemActive": {
           padding: "0px",
           "& .M4LIcon-icon": {
-            backgroundColor: `${o.vars.palette.primary.focus} !important`
+            backgroundColor: `${o.vars.palette.primary.focusVisible} !important`
           }
         },
         "&.M4LSideBar-collapsed": {
@@ -932,13 +932,13 @@ const i = (o) => ({
                   height: "auto",
                   overflow: "hidden",
                   "& .M4LSideBar-navItemMainRoot": {
-                    background: o.vars.palette.primary.activeOpacity,
+                    background: o.vars.palette.primary.opacity,
                     border: "1px solid",
-                    borderColor: o.vars.palette.primary.activeOpacity,
+                    borderColor: o.vars.palette.primary.opacity,
                     boxShadow: o.shadows[1],
                     "&:hover": {
                       background: r(
-                        o.colorSchemes.finalTheme.palette.primary.active || "#fff",
+                        o.colorSchemes.finalTheme.palette.primary.focusActive || "#fff",
                         0.24
                       ),
                       // Validar implementación desde la creación del tema.
@@ -949,21 +949,21 @@ const i = (o) => ({
                     "& .M4LSideBar-navItemRootContentIconTypo": {
                       alignItems: "center",
                       "& .M4LIcon-icon": {
-                        backgroundColor: o.vars.palette.primary.focus
+                        backgroundColor: o.vars.palette.primary.focusVisible
                       },
                       "& .M4LTypography-root": {
                         "& .MuiTypography-root": {
-                          color: o.vars.palette.primary.focus
+                          color: o.vars.palette.primary.focusVisible
                         }
                       },
                       "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
-                        backgroundColor: o.vars.palette.primary.focus
+                        backgroundColor: o.vars.palette.primary.focusVisible
                       }
                     },
                     "& .M4LSideBar-arrowIconRoot": {
                       "& .M4LIcon-root": {
                         "& .M4LIcon-icon": {
-                          backgroundColor: o.vars.palette.primary.focus
+                          backgroundColor: o.vars.palette.primary.focusVisible
                         }
                       }
                     },
@@ -975,7 +975,7 @@ const i = (o) => ({
                       top: "25%",
                       bottom: "25%",
                       left: "0px",
-                      backgroundColor: o.vars.palette.primary.focus,
+                      backgroundColor: o.vars.palette.primary.focusVisible,
                       borderRadius: "0px 4px 4px 0px",
                       position: "absolute"
                     }
@@ -1033,15 +1033,15 @@ const i = (o) => ({
                     borderRadius: "4px",
                     gap: "8px",
                     "&.M4LSideBar-subItemCollapseActive": {
-                      backgroundColor: o.vars.palette.primary.activeOpacity,
+                      backgroundColor: o.vars.palette.primary.opacity,
                       gap: "8px",
                       border: "1px solid",
-                      borderColor: o.vars.palette.primary.activeOpacity,
+                      borderColor: o.vars.palette.primary.opacity,
                       "& .MuiButtonBase-root": {
                         padding: "0px",
                         "& .M4LIcon-root": {
                           "& .M4LIcon-icon": {
-                            backgroundColor: o.vars.palette.primary.focus
+                            backgroundColor: o.vars.palette.primary.focusVisible
                           }
                         }
                       }
@@ -1059,7 +1059,7 @@ const i = (o) => ({
                       "& .M4LSideBar-navSubItemContentBullet": {
                         height: "14px",
                         borderRadius: "4px",
-                        backgroundColor: o.vars.palette.primary.focus,
+                        backgroundColor: o.vars.palette.primary.focusVisible,
                         gap: "8px"
                       }
                     },
@@ -1093,9 +1093,9 @@ const i = (o) => ({
                     },
                     "&.M4LSideBar-subItemActive.M4LSideBar-navSubItemContentRoot": {
                       "& .M4LTypography-root": {
-                        color: o.vars.palette.primary.focus,
+                        color: o.vars.palette.primary.focusVisible,
                         "& .MuiTypography-root": {
-                          color: o.vars.palette.primary.focus
+                          color: o.vars.palette.primary.focusVisible
                         }
                       }
                     }
@@ -1127,7 +1127,7 @@ const i = (o) => ({
         //boxShadow: theme.customShadows?.z2,
         "& .M4LSideBar-subItemActive": {
           "& .M4LIcon-icon": {
-            backgroundColor: `${o.vars.palette.primary.focus} !important`
+            backgroundColor: `${o.vars.palette.primary.focusVisible} !important`
           }
         },
         "&.M4LSideBar-collapsed": {
@@ -1232,15 +1232,15 @@ const i = (o) => ({
                   }
                 },
                 "&.M4LSideBar-itemMainActive": {
-                  background: o.vars.palette.primary.activeOpacity,
+                  background: o.vars.palette.primary.opacity,
                   borderRadius: "4px",
                   border: "1px solid",
-                  borderColor: o.vars.palette.border.disabled,
+                  borderColor: o.vars.palette?.border.disabled,
                   "& .M4LSideBar-navItemMainRoot": {
-                    background: o.vars.palette.primary.activeOpacity,
+                    background: o.vars.palette.primary.opacity,
                     "&:hover": {
                       background: r(
-                        o.colorSchemes.finalTheme.palette.primary.active || "#fff",
+                        o.colorSchemes.finalTheme.palette.primary.focusActive || "#fff",
                         0.24
                       ),
                       // Validar implementación desde la creación del tema.
@@ -1250,21 +1250,21 @@ const i = (o) => ({
                   "& .M4LSideBar-navItemRootContent": {
                     "& .M4LSideBar-navItemRootContentIconTypo": {
                       "& .M4LIcon-icon": {
-                        backgroundColor: o.vars.palette.primary.focus
+                        backgroundColor: o.vars.palette.primary.focusVisible
                       },
                       "& .M4LTypography-root": {
                         "& .MuiTypography-root": {
-                          color: o.vars.palette.primary.focus
+                          color: o.vars.palette.primary.focusVisible
                         }
                       },
                       "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
-                        backgroundColor: o.vars.palette.primary.focus
+                        backgroundColor: o.vars.palette.primary.focusVisible
                       }
                     },
                     "& .M4LSideBar-arrowIconRoot": {
                       "& .M4LIcon-root": {
                         "& .M4LIcon-icon": {
-                          backgroundColor: o.vars.palette.primary.focus
+                          backgroundColor: o.vars.palette.primary.focusVisible
                         }
                       }
                     },
@@ -1274,7 +1274,7 @@ const i = (o) => ({
                       top: "0px",
                       bottom: "0px",
                       right: "0px",
-                      backgroundColor: o.vars.palette.primary.focus,
+                      backgroundColor: o.vars.palette.primary.focusVisible,
                       borderRadius: "4px 0px 0px 4px",
                       position: "absolute"
                     }
@@ -1332,14 +1332,14 @@ const i = (o) => ({
                     borderRadius: "4px",
                     gap: "8px",
                     "&.M4LSideBar-subItemCollapseActive": {
-                      backgroundColor: o.vars.palette.primary.activeOpacity,
+                      backgroundColor: o.vars.palette.primary.opacity,
                       gap: "8px",
                       "& .MuiButtonBase-root": {
                         paddingLeft: "0",
                         padding: "0px",
                         "& .M4LIcon-root": {
                           "& .M4LIcon-icon": {
-                            backgroundColor: o.vars.palette.primary.focus
+                            backgroundColor: o.vars.palette.primary.focusVisible
                           }
                         }
                       }
@@ -1350,14 +1350,14 @@ const i = (o) => ({
                         padding: "0px",
                         "& .M4LIcon-root": {
                           "& .M4LIcon-icon": {
-                            backgroundColor: `${o.vars.palette.primary.focus} !important`
+                            backgroundColor: `${o.vars.palette.primary.focusVisible} !important`
                           }
                         }
                       },
                       "& .M4LSideBar-navSubItemContentBullet": {
                         height: "14px",
                         borderRadius: "4px",
-                        backgroundColor: o.vars.palette.primary.focus,
+                        backgroundColor: o.vars.palette.primary.focusVisible,
                         gap: "8px"
                       }
                     },
@@ -1424,7 +1424,7 @@ const i = (o) => ({
       "&.M4LSideBar-popover.M4LSideBar-variantDefault": {
         "& .M4LSideBar-subItemActive": {
           "& .M4LIcon-icon": {
-            backgroundColor: `${o.vars.palette.primary.focus} !important`
+            backgroundColor: `${o.vars.palette.primary.focusVisible} !important`
           }
         },
         "& .M4LSideBar-navListSubItemRoot": {
@@ -1436,7 +1436,7 @@ const i = (o) => ({
             height: "fit-content",
             borderRadius: "4px",
             "&.M4LSideBar-subItemCollapseActive": {
-              backgroundColor: o.vars.palette.primary.activeOpacity
+              backgroundColor: o.vars.palette.primary.opacity
             },
             "& .M4LTypography-root": {
               display: "flex",
@@ -1458,7 +1458,7 @@ const i = (o) => ({
                     padding: "0px",
                     "& .M4LIcon-root": {
                       "& .M4LIcon-icon": {
-                        backgroundColor: o.vars.palette.primary.focus
+                        backgroundColor: o.vars.palette.primary.focusVisible
                       }
                     }
                   }
@@ -1471,14 +1471,14 @@ const i = (o) => ({
                 padding: "0px",
                 "& .M4LIcon-root": {
                   "& .M4LIcon-icon": {
-                    backgroundColor: `${o.vars.palette.primary.focus} !important`
+                    backgroundColor: `${o.vars.palette.primary.focusVisible} !important`
                   }
                 }
               },
               "& .M4LSideBar-navSubItemContentBullet": {
                 height: "14px",
                 borderRadius: "10px",
-                backgroundColor: o.vars.palette.primary.focus
+                backgroundColor: o.vars.palette.primary.focusVisible
               }
             },
             "& .M4LSideBar-navSubItemContentBullet": {
@@ -1498,7 +1498,7 @@ const i = (o) => ({
       "&.M4LSideBar-popover.M4LSideBar-variantComercial": {
         "& .M4LSideBar-subItemActive": {
           "& .M4LIcon-icon": {
-            backgroundColor: `${o.vars.palette.primary.focus} !important`
+            backgroundColor: `${o.vars.palette.primary.focusVisible} !important`
           }
         },
         "& .M4LSideBar-navListSubItemRoot": {
@@ -1510,7 +1510,7 @@ const i = (o) => ({
             height: "fit-content",
             borderRadius: "4px",
             "&.M4LSideBar-subItemCollapseActive": {
-              backgroundColor: o.vars.palette.primary.activeOpacity,
+              backgroundColor: o.vars.palette.primary.opacity,
               Text: "iufbivecf"
             },
             "& .M4LTypography-root": {
@@ -1533,7 +1533,7 @@ const i = (o) => ({
                     padding: "0px",
                     "& .M4LIcon-root": {
                       "& .M4LIcon-icon": {
-                        backgroundColor: o.vars.palette.primary.focus
+                        backgroundColor: o.vars.palette.primary.focusVisible
                       }
                     }
                   }
@@ -1546,14 +1546,14 @@ const i = (o) => ({
                 padding: "0px",
                 "& .M4LIcon-root": {
                   "& .M4LIcon-icon": {
-                    backgroundColor: `${o.vars.palette.primary.focus} !important`
+                    backgroundColor: `${o.vars.palette.primary.focusVisible} !important`
                   }
                 }
               },
               "& .M4LSideBar-navSubItemContentBullet": {
                 height: "14px",
                 borderRadius: "10px",
-                backgroundColor: o.vars.palette.primary.focus
+                backgroundColor: o.vars.palette.primary.focusVisible
               }
             },
             "& .M4LSideBar-navSubItemContentBullet": {
@@ -1579,11 +1579,11 @@ const i = (o) => ({
         "&.M4LSideBar-variantDefault": {
           "& .M4LSideBar-subItemActive": {
             "& .M4LIcon-icon": {
-              backgroundColor: `${o.vars.palette.primary.focus} !important`
+              backgroundColor: `${o.vars.palette.primary.focusVisible} !important`
             },
             "& .M4LTypography-root": {
               "& .MuiTypography-root": {
-                color: `${o.vars.palette.primary.focus} !important`
+                color: `${o.vars.palette.primary.focusVisible} !important`
               }
             }
           },
@@ -1676,14 +1676,14 @@ const i = (o) => ({
                   },
                   "&.M4LSideBar-itemMainActive": {
                     borderRadius: "4px",
-                    background: o.vars.palette.primary.activeOpacity,
+                    background: o.vars.palette.primary.opacity,
                     border: "1px solid",
-                    borderColor: o.vars.palette.primary.activeOpacity,
+                    borderColor: o.vars.palette.primary.opacity,
                     "& .M4LSideBar-navItemMainRoot": {
-                      background: o.vars.palette.primary.active,
+                      background: o.vars.palette.primary.focusActive,
                       "&:hover": {
                         background: r(
-                          o.colorSchemes.finalTheme.palette.primary.active || "#fff",
+                          o.colorSchemes.finalTheme.palette.primary.focusActive || "#fff",
                           0.24
                         ),
                         // Validar implementación desde la creación del tema.
@@ -1694,21 +1694,21 @@ const i = (o) => ({
                       "& .M4LSideBar-navItemRootContentIconTypo": {
                         alignItems: "center",
                         "& .M4LIcon-icon": {
-                          backgroundColor: o.vars.palette.primary.focus
+                          backgroundColor: o.vars.palette.primary.focusVisible
                         },
                         "& .M4LTypography-root": {
                           "& .MuiTypography-root": {
-                            color: o.vars.palette.primary.focus
+                            color: o.vars.palette.primary.focusVisible
                           }
                         },
                         "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
-                          backgroundColor: o.vars.palette.primary.focus
+                          backgroundColor: o.vars.palette.primary.focusVisible
                         }
                       },
                       "& .M4LSideBar-arrowIconRoot": {
                         "& .M4LIcon-root": {
                           "& .M4LIcon-icon": {
-                            backgroundColor: o.vars.palette.primary.focus
+                            backgroundColor: o.vars.palette.primary.focusVisible
                           }
                         }
                       },
@@ -1718,7 +1718,7 @@ const i = (o) => ({
                         top: "0px",
                         bottom: "0px",
                         left: "0px",
-                        backgroundColor: o.vars.palette.primary.focus,
+                        backgroundColor: o.vars.palette.primary.focusVisible,
                         borderRadius: "4px 0px 0px 4px",
                         position: "absolute"
                       }
@@ -1777,14 +1777,14 @@ const i = (o) => ({
                       gap: "8px",
                       padding: "0px",
                       "&.M4LSideBar-subItemCollapseActive": {
-                        backgroundColor: o.vars.palette.primary.activeOpacity,
+                        backgroundColor: o.vars.palette.primary.opacity,
                         gap: "8px",
                         padding: "0px",
                         "& .MuiButtonBase-root": {
                           padding: "0px",
                           "& .M4LIcon-root": {
                             "& .M4LIcon-icon": {
-                              backgroundColor: o.vars.palette.primary.focus
+                              backgroundColor: o.vars.palette.primary.focusVisible
                             }
                           }
                         }
@@ -1794,14 +1794,14 @@ const i = (o) => ({
                           padding: "0px",
                           "& .M4LIcon-root": {
                             "& .M4LIcon-icon": {
-                              backgroundColor: `${o.vars.palette.primary.focus} !important`
+                              backgroundColor: `${o.vars.palette.primary.focusVisible} !important`
                             }
                           }
                         },
                         "& .M4LSideBar-navSubItemContentBullet": {
                           height: "14px",
                           borderRadius: "4px",
-                          backgroundColor: o.vars.palette.primary.focus,
+                          backgroundColor: o.vars.palette.primary.focusVisible,
                           gap: "8px"
                         }
                       },
@@ -1959,14 +1959,14 @@ const i = (o) => ({
                   },
                   "&.M4LSideBar-itemMainActive": {
                     borderRadius: "4px",
-                    background: o.vars.palette.primary.activeOpacity,
+                    background: o.vars.palette.primary.opacity,
                     border: "1px solid",
-                    borderColor: o.vars.palette.primary.activeOpacity,
+                    borderColor: o.vars.palette.primary.opacity,
                     "& .M4LSideBar-navItemMainRoot": {
-                      background: o.vars.palette.primary.activeOpacity,
+                      background: o.vars.palette.primary.opacity,
                       "&:hover": {
                         background: r(
-                          o.colorSchemes.finalTheme.palette.primary.active || "#fff",
+                          o.colorSchemes.finalTheme.palette.primary.focusActive || "#fff",
                           0.24
                         ),
                         // Validar implementación desde la creación del tema.
@@ -1977,21 +1977,21 @@ const i = (o) => ({
                       "& .M4LSideBar-navItemRootContentIconTypo": {
                         fontSize: "14px !important",
                         "& .M4LIcon-icon": {
-                          backgroundColor: o.vars.palette.primary.focus
+                          backgroundColor: o.vars.palette.primary.focusVisible
                         },
                         "& .M4LTypography-root": {
                           "& .MuiTypography-root": {
-                            color: o.vars.palette.primary.focus
+                            color: o.vars.palette.primary.focusVisible
                           }
                         },
                         "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
-                          backgroundColor: o.vars.palette.primary.focus
+                          backgroundColor: o.vars.palette.primary.focusVisible
                         }
                       },
                       "& .M4LSideBar-arrowIconRoot": {
                         "& .M4LIcon-root": {
                           "& .M4LIcon-icon": {
-                            backgroundColor: o.vars.palette.primary.focus
+                            backgroundColor: o.vars.palette.primary.focusVisible
                           }
                         }
                       },
@@ -2001,7 +2001,7 @@ const i = (o) => ({
                         top: "0px",
                         bottom: "0px",
                         right: "0px",
-                        backgroundColor: o.vars.palette.primary.focus,
+                        backgroundColor: o.vars.palette.primary.focusVisible,
                         borderRadius: "4px 0px 0px 4px",
                         position: "absolute"
                       }
@@ -2061,13 +2061,13 @@ const i = (o) => ({
                       gap: "8px",
                       padding: "0px",
                       "&.M4LSideBar-subItemCollapseActive": {
-                        backgroundColor: o.vars.palette.primary.activeOpacity,
+                        backgroundColor: o.vars.palette.primary.opacity,
                         gap: "8px",
                         "& .MuiButtonBase-root": {
                           padding: "0px",
                           "& .M4LIcon-root": {
                             "& .M4LIcon-icon": {
-                              backgroundColor: o.vars.palette.primary.focus
+                              backgroundColor: o.vars.palette.primary.focusVisible
                             }
                           }
                         }
@@ -2077,14 +2077,14 @@ const i = (o) => ({
                           padding: "0px",
                           "& .M4LIcon-root": {
                             "& .M4LIcon-icon": {
-                              backgroundColor: `${o.vars.palette.primary.focus}!important`
+                              backgroundColor: `${o.vars.palette.primary.focusVisible}!important`
                             }
                           }
                         },
                         "& .M4LSideBar-navSubItemContentBullet": {
                           height: "14px",
                           borderRadius: "4px",
-                          backgroundColor: o.vars.palette.primary.focus,
+                          backgroundColor: o.vars.palette.primary.focusVisible,
                           gap: "8px"
                         }
                       },
@@ -2131,7 +2131,7 @@ const i = (o) => ({
                                                                       }, */
                       "& .M4LSideBar-subItemActive": {
                         "& .M4LIcon-icon": {
-                          backgroundColor: `${o.vars.palette.primary.focus} !important`
+                          backgroundColor: `${o.vars.palette.primary.focusVisible} !important`
                         }
                       },
                       "& .M4LSideBar-contentMobile": {
@@ -2218,14 +2218,14 @@ const i = (o) => ({
                               },
                               "&.M4LSideBar-itemMainActive": {
                                 borderRadius: "4px",
-                                background: o.vars.palette.primary.activeOpacity,
+                                background: o.vars.palette.primary.opacity,
                                 border: "1px solid",
-                                borderColor: o.vars.palette.primary.activeOpacity,
+                                borderColor: o.vars.palette.primary.opacity,
                                 "& .M4LSideBar-navItemMainRoot": {
-                                  background: o.vars.palette.primary.activeOpacity,
+                                  background: o.vars.palette.primary.opacity,
                                   "&:hover": {
                                     background: r(
-                                      o.colorSchemes.finalTheme.palette.primary.active || "#fff",
+                                      o.colorSchemes.finalTheme.palette.primary.focusActive || "#fff",
                                       0.24
                                     ),
                                     // Validar implementación desde la creación del tema.
@@ -2235,21 +2235,21 @@ const i = (o) => ({
                                 "& .M4LSideBar-navItemRootContent": {
                                   "& .M4LSideBar-navItemRootContentIconTypo": {
                                     "& .M4LIcon-icon": {
-                                      backgroundColor: o.vars.palette.primary.focus
+                                      backgroundColor: o.vars.palette.primary.focusVisible
                                     },
                                     "& .M4LTypography-root": {
                                       "& .MuiTypography-root": {
-                                        color: o.vars.palette.primary.focus
+                                        color: o.vars.palette.primary.focusVisible
                                       }
                                     },
                                     "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
-                                      backgroundColor: o.vars.palette.primary.focus
+                                      backgroundColor: o.vars.palette.primary.focusVisible
                                     }
                                   },
                                   "& .M4LSideBar-arrowIconRoot": {
                                     "& .M4LIcon-root": {
                                       "& .M4LIcon-icon": {
-                                        backgroundColor: o.vars.palette.primary.focus
+                                        backgroundColor: o.vars.palette.primary.focusVisible
                                       }
                                     }
                                   },
@@ -2259,7 +2259,7 @@ const i = (o) => ({
                                     top: "0px",
                                     bottom: "0px",
                                     right: "0px",
-                                    backgroundColor: o.vars.palette.primary.focus,
+                                    backgroundColor: o.vars.palette.primary.focusVisible,
                                     borderRadius: "4px 0px 0px 4px",
                                     position: "absolute"
                                   }
@@ -2318,13 +2318,13 @@ const i = (o) => ({
                                   gap: "8px",
                                   padding: "0px",
                                   "&.M4LSideBar-subItemCollapseActive": {
-                                    backgroundColor: o.vars.palette.primary.activeOpacity,
+                                    backgroundColor: o.vars.palette.primary.opacity,
                                     gap: "8px",
                                     "& .MuiButtonBase-root": {
                                       padding: "0px",
                                       "& .M4LIcon-root": {
                                         "& .M4LIcon-icon": {
-                                          backgroundColor: o.vars.palette.primary.focus
+                                          backgroundColor: o.vars.palette.primary.focusVisible
                                         }
                                       }
                                     }
@@ -2334,14 +2334,14 @@ const i = (o) => ({
                                       padding: "0px",
                                       "& .M4LIcon-root": {
                                         "& .M4LIcon-icon": {
-                                          backgroundColor: `${o.vars.palette.primary.focus} !important`
+                                          backgroundColor: `${o.vars.palette.primary.focusVisible} !important`
                                         }
                                       }
                                     },
                                     "& .M4LSideBar-navSubItemContentBullet": {
                                       height: "14px",
                                       borderRadius: "4px",
-                                      backgroundColor: o.vars.palette.primary.focus,
+                                      backgroundColor: o.vars.palette.primary.focusVisible,
                                       gap: "8px"
                                     }
                                   },
@@ -2446,7 +2446,7 @@ const i = (o) => ({
         gap: "8px",
         borderRight: "1px solid",
         borderLeft: "1px solid",
-        borderColor: o.vars.palette.border.disabled,
+        borderColor: o.vars.palette?.border.disabled,
         [o.breakpoints.down("sm")]: {
           //boxShadow: theme.colorSchemes.finalTheme.customShadows.z1,
           paddingRight: "0px",
@@ -2511,14 +2511,14 @@ const i = (o) => ({
             width: "100%",
             overflow: "auto",
             height: "36px",
-            borderColor: o.vars.palette.border.default,
+            borderColor: o.vars.palette?.border.default,
             [o.breakpoints.down("sm")]: {
               background: "none",
               borderRight: "none",
               paddingLeft: "0px"
             },
             "& .M4LAreasAdmin-areaIconLayer": {
-              background: o.vars.palette.background.main,
+              background: o.vars.palette.background.surface,
               boxShadow: o.vars.customShadows.z2,
               display: "flex",
               justifyContent: "center",
@@ -2670,7 +2670,7 @@ const i = (o) => ({
                 width: "100%",
                 backgroundColor: o.vars.palette.background.surface,
                 borderTop: "1.5px solid",
-                borderColor: o.vars.palette.border.default,
+                borderColor: o.vars.palette?.border.default,
                 borderRadius: "4px",
                 [o.breakpoints.down("sm")]: {
                   backgroundColor: o.vars.palette.background.default,
@@ -2711,7 +2711,7 @@ const i = (o) => ({
                   backgroundColor: "transparent",
                   //height: '100%',
                   "&:hover": {
-                    background: o.vars.palette.primary.activeOpacity
+                    background: o.vars.palette.primary.opacity
                   },
                   "& .M4LIcon-icon": {
                     //backgroundColor:
@@ -2739,7 +2739,7 @@ const i = (o) => ({
                   boxShadow: "none"
                 },
                 "&.M4LAreasAdmin-selected": {
-                  background: o.vars.palette.primary.active,
+                  background: o.vars.palette.primary.focusActive,
                   ...o.colorSchemes.finalTheme.typography.body,
                   color: o.vars.palette.text.primary,
                   height: "22px",
@@ -2777,7 +2777,7 @@ const i = (o) => ({
                   },
                   "& .M4LIconButton-root": {
                     "&:hover": {
-                      background: o.vars.palette.primary.active
+                      background: o.vars.palette.primary.focusActive
                     },
                     [o.breakpoints.down("sm")]: {
                       color: o.vars.palette.text.primary
@@ -2815,7 +2815,7 @@ const i = (o) => ({
                     color: o.vars.palette.text.primary
                   },
                   "&.M4LIconButton-variantPrimary": {
-                    background: o.vars.palette.primary.active,
+                    background: o.vars.palette.primary.focusActive,
                     [o.breakpoints.down("sm")]: {
                       color: o.vars.palette.text.primary
                     }
@@ -2830,7 +2830,7 @@ const i = (o) => ({
               width: "100%",
               height: "28px",
               borderLeft: "1px solid",
-              borderColor: o.vars.palette.border.secondary,
+              borderColor: o.vars.palette?.border.secondary,
               borderRadius: "0px"
             }
           },
@@ -2927,7 +2927,7 @@ const i = (o) => ({
     styleOverrides: {
       "&.M4LAreasViewer-root": {
         test: "root",
-        background: o.vars.palette.background.bold,
+        background: o.vars.palette.background.neutral,
         "& .M4LGridLayout-gridItemRoot.M4LGridLayout-colapsed-40 .M4LAreasViewer-windowHeader": {
           minHeight: "38px",
           height: "38px"
@@ -2965,9 +2965,9 @@ const i = (o) => ({
             }
           },
           "& .M4LAreasViewer-windowRoot": {
-            background: o.vars.palette.background.main,
+            background: o.vars.palette.background.surface,
             border: "1.5px solid",
-            borderColor: o.vars.palette.border.primary,
+            borderColor: o.vars.palette?.border.default,
             borderRadius: "4px",
             display: "flex",
             "&:not(.M4LAreasViewer-loading)": {
@@ -2980,7 +2980,7 @@ const i = (o) => ({
             // },
             "&.react-colapsed": {
               border: "1px solid",
-              borderColor: o.vars.palette.border.primary
+              borderColor: o.vars.palette?.border.default
             },
             "& .M4LAreasViewer-windowRootContainer": {
               display: "flex",
@@ -3078,21 +3078,21 @@ const i = (o) => ({
                 alignItems: "center",
                 padding: "0 16px",
                 "& .MuiLinearProgress-root": {
-                  background: `rgba(${o.colorSchemes.finalTheme.palette.primary.active} / 0.3)`
+                  background: `rgba(${o.colorSchemes.finalTheme.palette.primary.focusActive} / 0.3)`
                 }
               }
             },
             // Area seleccionada
             "&.M4LAreasViewer-selectedWindow": {
               border: "1.5px solid",
-              borderColor: o.vars.palette.border.selected,
+              borderColor: o.vars.palette.primary.focusVisible,
               boxShadow: o.customShadows?.z2,
               backdropFilter: "blur(100px)",
               background: o.vars.palette.background.default,
               "& .M4LAreasViewer-windowHeader": {
                 display: "flex",
                 flexDirection: "column",
-                background: o.vars.palette.primary.activeOpacity,
+                background: o.vars.palette.primary.opacity,
                 gap: "4px",
                 alignItems: "center",
                 position: "relative",
@@ -3103,7 +3103,7 @@ const i = (o) => ({
                 "& .M4LAreasViewer-windowHeaderContent": {
                   "& .M4LIcon-root": {
                     "& .M4LIcon-icon": {
-                      background: o.vars.palette.primary.focus
+                      background: o.vars.palette.primary.focusVisible
                     }
                   },
                   "& .M4LAreasViewer-windowHeaderCancelHandle": {
@@ -3116,7 +3116,7 @@ const i = (o) => ({
                 },
                 "& .M4LTypography-root .MuiTypography-root": {
                   ...o.colorSchemes.finalTheme.typography.paragraphDens,
-                  color: o.vars.palette.primary.focus
+                  color: o.vars.palette.primary.focusVisible
                 },
                 "& .MuiButtonBase-root": {
                   "& .M4LIcon-icon": {
@@ -3138,7 +3138,7 @@ const i = (o) => ({
           },
           "&.M4LGridLayout-root .M4LGridLayout-maximizeMe": {
             border: "1.5px solid",
-            borderColor: o.vars.palette.border.primary,
+            borderColor: o.vars.palette?.border.default,
             borderRadius: "4px",
             "& .M4LAreasViewer-windowContent": {
               padding: "16px"
@@ -3152,12 +3152,12 @@ const i = (o) => ({
           },
           "&.M4LGridLayout-colapsed ": {
             "& .M4LAreasViewer-windowRoot": {
-              borderColor: o.vars.palette.border.default,
+              borderColor: o.vars.palette?.border.default,
               boxShadow: o.vars.customShadows.z1
             }
           },
           "&.react-draggable": {
-            background: o.vars.palette.primary.activeOpacity
+            background: o.vars.palette.primary.opacity
           },
           "& .M4LAreasViewer-windowPopupRoot": {
             boxShadow: o.customShadows?.z2,
@@ -3181,12 +3181,12 @@ const i = (o) => ({
               background: o.vars.palette.background.default,
               borderRadius: "4px",
               border: "1.5px solid",
-              borderColor: o.vars.palette.border.primary,
+              borderColor: o.vars.palette?.border.default,
               "& .M4LAreasViewer-windowHeader": {
                 boxShadow: "none",
                 borderTopLeftRadius: "4px",
                 borderTopRightRadius: "4px",
-                background: o.vars.palette.background.header,
+                background: o.vars.palette.primary.opacity,
                 border: "none",
                 "& .M4LIcon-root": {
                   "& .M4LIcon-icon": {
@@ -3204,7 +3204,7 @@ const i = (o) => ({
                 }
               },
               "& .M4LAreasViewer-windowContent": {
-                background: o.vars.palette.background.main,
+                background: o.vars.palette.background.surface,
                 padding: "12px"
               }
             },
@@ -3212,7 +3212,7 @@ const i = (o) => ({
               padding: "4px",
               background: o.vars.palette.background.default,
               borderRadius: "4px",
-              borderColor: o.vars.palette.border.default,
+              borderColor: o.vars.palette?.border.default,
               "&:not(.M4LAreasViewer-loading)": {
                 "& .M4LinearProgressIndeterminate-root": {
                   opacity: 0
@@ -3222,8 +3222,8 @@ const i = (o) => ({
                 backgroundColor: "transparent"
               },
               "&.M4LAreasViewer-selectedWindow": {
-                borderColor: o.vars.palette.primary.activeOpacity,
-                background: o.vars.palette.primary.activeOpacity,
+                borderColor: o.vars.palette.primary.opacity,
+                background: o.vars.palette.primary.opacity,
                 boxShadow: o.vars.customShadows.z4,
                 padding: "4px",
                 "& .M4LAreasViewer-windowRootContainer": {
@@ -3247,7 +3247,7 @@ const i = (o) => ({
             },
             "&.M4LAreasViewer-selectedWindow": {
               border: "none",
-              background: o.vars.palette.primary.activeOpacity,
+              background: o.vars.palette.primary.opacity,
               boxShadow: o.vars.customShadows.z4,
               [o.breakpoints.down("sm")]: {
                 padding: "0"
@@ -3255,9 +3255,9 @@ const i = (o) => ({
               "& .M4LAreasViewer-windowRootContainer": {
                 boxShadow: o.customShadows?.z2,
                 border: "1.5px solid",
-                borderColor: `rgba(${o.colorSchemes.finalTheme.palette.primary.active} / 0.5)`,
+                borderColor: `rgba(${o.colorSchemes.finalTheme.palette.primary.focusActive} / 0.5)`,
                 "& .M4LAreasViewer-windowHeader": {
-                  background: o.vars.palette.primary.activeOpacity,
+                  background: o.vars.palette.primary.opacity,
                   borderTopLeftRadius: "4px",
                   borderTopRightRadius: "4px",
                   "& .M4LIcon-root": {
@@ -3276,13 +3276,13 @@ const i = (o) => ({
           }
         },
         "& .M4LAreasViewer-panelWindowsRoot": {
-          background: o.vars.palette.background.main,
+          background: o.vars.palette.background.surface,
           display: "flex",
           alignItems: "center",
           padding: "8px",
           gap: "8px",
           borderLeft: "1.5px solid",
-          borderColor: o.vars.palette.border.primary,
+          borderColor: o.vars.palette?.border.default,
           "& .M4LAreasViewer-panelWindowsButtonContainer": {
             borderRadius: "2px",
             boxShadow: o.vars.customShadows.z1,
@@ -3300,7 +3300,7 @@ const i = (o) => ({
           "& .M4LAreasViewer-panelWindowsSeparator": {
             width: "100%",
             border: "0.5px solid",
-            borderColor: o.vars.palette.border.primary
+            borderColor: o.vars.palette?.border.default
           }
         }
       }
@@ -3314,7 +3314,7 @@ const i = (o) => ({
         boxShadow: o.vars.customShadows.z4,
         background: o.vars.palette.background.default,
         border: "2px solid",
-        borderColor: o.vars.palette.border.dense,
+        borderColor: o.vars.palette?.border.disabled,
         "& .M4LAreasViewer-windowContent": {
           borderRadius: "4px",
           background: o.vars.palette.background.default
@@ -3396,7 +3396,8 @@ const i = (o) => ({
           }
         },
         "& .MuiBackdrop-root": {
-          background: o.vars.palette.background.backdrop
+          background: "#00000094"
+          // todo definir token
         },
         "&:not(.M4LAreasViewer-loading)": {
           "& .M4LinearProgressIndeterminate-root": {
@@ -3421,7 +3422,7 @@ const i = (o) => ({
             padding: "6px 4px 6px 8px",
             borderRadius: "4px",
             border: "none",
-            background: o.vars.palette.primary.activeOpacity,
+            background: o.vars.palette.primary.opacity,
             height: "28px",
             minHeight: "28px",
             [o.breakpoints.down("md")]: {
@@ -3477,12 +3478,12 @@ const i = (o) => ({
           minHeight: "11px",
           boxShadow: o.customShadows?.z2,
           border: "1px solid",
-          borderColor: o.vars.palette.border.default
+          borderColor: o.vars.palette?.border.default
         }
       }
     }
   }
-}), v = (o) => ({
+}), L = (o) => ({
   M4LAppBar: {
     styleOverrides: {
       "&.M4LAppBar-root": {
@@ -3496,7 +3497,7 @@ const i = (o) => ({
         padding: "8px 16px",
         background: o.vars.palette.background.default,
         borderBottom: "1.5px solid",
-        borderColor: o.vars.palette.border.primary,
+        borderColor: o.vars.palette?.border.default,
         justifyContent: "space-between",
         gap: "40px",
         [o.breakpoints.down("sm")]: {
@@ -3531,7 +3532,7 @@ const i = (o) => ({
           minHeight: "36px",
           alignItems: "center",
           borderRadius: "4px",
-          borderColor: o.vars.palette.border.default,
+          borderColor: o.vars.palette?.border.default,
           justifyContent: "space-between",
           "& .M4LAppBar-iconMenuToggle": {
             background: o.vars.palette.background.surface,
@@ -3596,7 +3597,7 @@ const i = (o) => ({
       }
     }
   }
-}), L = (o) => ({
+}), f = (o) => ({
   M4LAvatar: {
     styleOverrides: {
       "&.M4LAvatar-root": {
@@ -3637,7 +3638,7 @@ const i = (o) => ({
       }
     }
   }
-}), h = (o) => ({
+}), v = (o) => ({
   M4LAccountPopover: {
     styleOverrides: {
       "&.M4LAccountPopover-root": {
@@ -3723,7 +3724,7 @@ const i = (o) => ({
         "& .M4LAccountPopover-containerMenuItems": {
           borderTop: "1.5px solid",
           borderBottom: "1.5px solid",
-          borderColor: o.vars.palette.border.default,
+          borderColor: o.vars.palette?.border.default,
           padding: "2px 4px",
           display: "flex",
           flexDirection: "column",
@@ -3916,7 +3917,7 @@ const i = (o) => ({
       }
     }
   }
-}), f = (o) => ({
+}), h = (o) => ({
   M4LModuleLayout: {
     styleOverrides: {
       "&.M4LModuleLayout-root": {
@@ -4039,7 +4040,7 @@ const i = (o) => ({
           width: "4px",
           top: "calc(50% - 22.5px)",
           position: "absolute",
-          background: o.vars.palette.primary.active,
+          background: o.vars.palette.primary.focusActive,
           borderRadius: "1px",
           margin: "1px 0px"
         },
@@ -4068,7 +4069,7 @@ const i = (o) => ({
           height: "4px !important",
           left: "calc(50% - 22.5px)",
           top: "unset",
-          background: o.vars.palette.primary.active,
+          background: o.vars.palette.primary.focusActive,
           borderRadius: "2px",
           zIndex: "1"
         },
@@ -4088,7 +4089,7 @@ const i = (o) => ({
             right: "0",
             /* top: 'calc(50% - 6px)', */
             position: "absolute",
-            background: o.vars.palette.border.primary
+            background: o.vars.palette?.border.default
           }
         },
         "& .splitter-layout:not(.splitter-layout-vertical)": {
@@ -4098,7 +4099,7 @@ const i = (o) => ({
             top: "0",
             bottom: "0",
             position: "absolute",
-            background: o.vars.palette.border.primary
+            background: o.vars.palette?.border.default
           }
         }
         // Borde gris cuando esta en over y es vertical
@@ -4165,7 +4166,7 @@ const i = (o) => ({
           right: "100%",
           bottom: "0",
           left: "0",
-          backgroundColor: o.vars.palette.primary.focus,
+          backgroundColor: o.vars.palette.primary.focusVisible,
           width: "0",
           animation: "borealisBar 2s linear infinite"
         }
@@ -4184,7 +4185,7 @@ const i = (o) => ({
         //height: '24px',
         flexDirection: "column",
         borderBottom: "1px solid",
-        borderColor: o.vars.palette.border.disabled,
+        borderColor: o.vars.palette?.border.disabled,
         // Condición de visualización de vista móvil.
         "&.M4LPropertyValue-isMobile": {
           gridTemplateColumns: "1fr!important",
@@ -4296,11 +4297,11 @@ const i = (o) => ({
     styleOverrides: {
       "&.M4LTab-root": {
         width: "fit-content",
-        background: o.vars.palette.background.header,
+        background: o.vars.palette.primary.opacity,
         borderRadius: "4px 4px 0 0",
         zIndex: "3",
         "& .MuiButtonBase-root": {
-          background: o.vars.palette.background.header,
+          background: o.vars.palette.primary.opacity,
           height: "32px",
           display: "flex",
           flexDirection: "row",
@@ -4323,7 +4324,7 @@ const i = (o) => ({
           }
         },
         "& .MuiTab-root": {
-          borderBottom: `1px solid ${o.vars.palette.border.secondary}`
+          borderBottom: `1px solid ${o.vars.palette?.border.secondary}`
         },
         // estado hover
         "& .MuiButtonBase-root:hover": {
@@ -4335,9 +4336,9 @@ const i = (o) => ({
         // estado selected
         "& .Mui-selected": {
           background: o.vars.palette.background.default,
-          borderTop: `1px solid ${o.vars.palette.border.secondary}`,
-          borderLeft: `1px solid ${o.vars.palette.border.secondary}`,
-          borderRight: `1px solid ${o.vars.palette.border.secondary}`,
+          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,
@@ -4348,7 +4349,7 @@ const i = (o) => ({
             height: "2px",
             left: "1.5px",
             top: "0px",
-            backgroundColor: o.vars.palette.primary.active,
+            backgroundColor: o.vars.palette.primary.focusActive,
             borderRadius: "2px 2px 0px 0px",
             position: "absolute"
           }
@@ -4376,7 +4377,7 @@ const i = (o) => ({
           marginBottom: "0px",
           borderRadius: "4px",
           border: "1px solid",
-          borderColor: o.vars.palette.border.primary,
+          borderColor: o.vars.palette?.border.default,
           "& .MuiCollapse-root": {
             padding: "8px",
             "& .MuiCollapse-wrapper": {
@@ -4411,13 +4412,13 @@ const i = (o) => ({
               }
             },
             "& .Mui-expanded": {
-              background: o.vars.palette.primary.activeOpacity,
+              background: o.vars.palette.primary.opacity,
               height: "28px",
               minHeight: "28px",
               "& .MuiButtonBase-root": {
                 "&.MuiAccordionSummary-content": {
                   borderRadius: "0 0 0 0 !important",
-                  background: o.vars.palette.primary.activeOpacity,
+                  background: o.vars.palette.primary.opacity,
                   height: "28px",
                   minHeight: "28px"
                 },
@@ -4455,12 +4456,12 @@ const i = (o) => ({
             },
             "& .MuiCollapse-root": {
               background: o.vars.palette.background.default,
-              borderColor: o.vars.palette.border.primary,
+              borderColor: o.vars.palette?.border.default,
               borderRadius: "0px 0px 4px 4px",
               padding: "8px",
               "&.MuiButtonBase-root": {
                 padding: "4px 8px !important",
-                background: o.vars.palette.background.main
+                background: o.vars.palette.background.surface
               },
               "& .M4LAccordion-content": {
                 display: "flex !important",
@@ -4517,7 +4518,7 @@ const i = (o) => ({
     styleOverrides: {
       "&.M4LPeriod-root": {
         border: "solid 1px",
-        borderColor: o.vars.palette.border.primary,
+        borderColor: o.vars.palette?.border.default,
         display: "flex",
         width: "100%",
         height: "auto",
@@ -4538,11 +4539,11 @@ const i = (o) => ({
             borderRight: "1px solid",
             display: "flex",
             alignItems: "center",
-            borderColor: o.vars.palette.border.primary,
+            borderColor: o.vars.palette?.border.default,
             [o.breakpoints.down("md")]: {
               borderRight: "0",
               borderBottom: "1px solid",
-              borderColor: o.vars.palette.border.primary
+              borderColor: o.vars.palette?.border.default
             }
           },
           "& .M4LPeriod-skeletonFieldSecondary": {
@@ -4556,17 +4557,17 @@ const i = (o) => ({
           borderColor: o.vars.palette.primary.hover
         },
         "&.M4LPeriod-isFocus": {
-          borderColor: o.vars.palette.primary.active
+          borderColor: o.vars.palette.primary.focusActive
         },
         "& .MuiAutocomplete-root": {
           width: "100%",
           borderRadius: 0,
           borderRight: "1px solid",
-          borderColor: o.vars.palette.border.primary,
+          borderColor: o.vars.palette?.border.default,
           [o.breakpoints.down("md")]: {
             borderRight: 0,
             borderBottom: "1px solid",
-            borderColor: o.vars.palette.border.primary
+            borderColor: o.vars.palette?.border.default
           },
           "& .MuiInput-root": {
             backgroundColor: "transparent"
@@ -4620,7 +4621,7 @@ const i = (o) => ({
           height: "100% !important",
           padding: "0px 0px 0px 8px",
           borderRight: "1px solid",
-          borderColor: o.vars.palette.border.primary
+          borderColor: o.vars.palette?.border.default
         },
         "& .M4LPeriod-containerDateValue": {
           display: "flex",
@@ -4639,7 +4640,7 @@ const i = (o) => ({
             width: "100%",
             background: "transparent",
             "& .MuiInputBase-root:hover": {
-              background: o.vars.palette.error.activeOpacity,
+              background: o.vars.palette.error.opacity,
               height: "100%"
             }
           }
@@ -4654,7 +4655,7 @@ const i = (o) => ({
             "& .MuiTextField-root:hover": {
               background: "transparent",
               "& .MuiInputBase-root:hover": {
-                background: o.vars.palette.warning.activeOpacity
+                background: o.vars.palette.warning.opacity
               }
             }
           }
@@ -4669,7 +4670,7 @@ const i = (o) => ({
             "& .MuiTextField-root:hover": {
               background: "transparent",
               "& .MuiInputBase-root:hover": {
-                background: o.vars.palette.success.activeOpacity
+                background: o.vars.palette.success.opacity
               }
             }
           }
@@ -4831,9 +4832,9 @@ const i = (o) => ({
         margin: "0px",
         maxWidth: "unset",
         maxHeight: "unset",
-        background: o.vars.palette.primary.activeOpacity,
+        background: o.vars.palette.primary.opacity,
         border: "2px solid",
-        borderColor: o.vars.palette.border.primary,
+        borderColor: o.vars.palette?.border.default,
         boxShadow: o.vars.customShadows.z4,
         width: "auto",
         height: "auto"
@@ -4848,7 +4849,7 @@ const i = (o) => ({
         borderRadius: "4px",
         background: o.vars.palette.background.default,
         border: "1px solid",
-        borderColor: o.vars.palette.border.secondary,
+        borderColor: o.vars.palette?.border.secondary,
         width: "100%",
         height: "auto",
         // variante isForm
@@ -4863,7 +4864,7 @@ const i = (o) => ({
           padding: "2px 4px 2px 8px",
           margin: "0px",
           borderRadius: "4px",
-          background: o.vars.palette.background.header,
+          background: o.vars.palette.primary.opacity,
           borderBottom: "none",
           [o.breakpoints.down("md")]: {
             height: "36px",
@@ -4894,7 +4895,7 @@ const i = (o) => ({
       }
     }
   }
-}), O = (o) => ({
+}), D = (o) => ({
   M4LTooltip: {
     styleOverrides: {
       "&.M4LTooltip-root": {
@@ -4915,7 +4916,7 @@ const i = (o) => ({
       }
     }
   }
-}), D = (o) => ({
+}), V = (o) => ({
   M4LBadge: {
     styleOverrides: {
       "&.M4LBadge-root": {
@@ -4954,7 +4955,7 @@ const i = (o) => ({
         boxShadow: "unset",
         borderRadius: "4px",
         border: "1px solid",
-        borderColor: o.vars.palette.border.primary,
+        borderColor: o.vars.palette?.border.default,
         display: "flex",
         position: "relative",
         flexDirection: "column",
@@ -5075,11 +5076,11 @@ const i = (o) => ({
               overflow: "auto",
               padding: "0px",
               "--rdg-grid-inline-size": "0px",
-              "--rdg-header-background-color": o.vars.palette.background.header,
+              "--rdg-header-background-color": o.vars.palette.primary.opacity,
               "--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.border.selected,
+              "--rdg-selection-color": o.vars.palette.primary.focusVisible,
               "--row-selected-hover-background-color": o.vars.palette.primary.toneOpacity,
               "--rdg-checkbox-color": o.vars.palette.primary.main,
               "--rdg-checkbox-focus-color": r(
@@ -5095,7 +5096,7 @@ const i = (o) => ({
                 borderBottom: "1px solid",
                 borderLeft: "0.5px solid",
                 borderRight: "0.5px solid",
-                borderColor: o.vars.palette.border.disabled
+                borderColor: o.vars.palette?.border.disabled
               }
             },
             '& [role="columnheader"]': {
@@ -5106,7 +5107,7 @@ const i = (o) => ({
               '&[aria-selected="false"] .rdg-cell': {
                 backgroundColor: o.vars.palette.background.default,
                 borderLeft: "0.5px solid",
-                borderColor: o.vars.palette.border.disabled
+                borderColor: o.vars.palette?.border.disabled
               },
               "&:nth-of-type(odd)": {
                 "& .rdg-cell": {
@@ -5121,7 +5122,7 @@ const i = (o) => ({
                   backgroundColor: `${o.vars.palette.general.gridHover} !important`,
                   transition: "background-color 0.1s linear"
                 }
-                /* backgroundColor: theme.vars.palette.primary.activeOpacity, */
+                /* backgroundColor: theme.vars.palette.primary.primaryOpacity, */
               },
               backgroundColor: "transparent"
             },
@@ -5129,7 +5130,7 @@ const i = (o) => ({
               transition: "background-color 0.1s linear",
               borderBottom: "0px solid transparent",
               borderRight: "0.5px solid transparent",
-              borderColor: o.vars.palette.background.bold,
+              borderColor: o.vars.palette.background.neutral,
               color: o.vars.palette.text.secondary,
               display: "inline",
               justifyContent: "center",
@@ -5146,7 +5147,7 @@ const i = (o) => ({
                 borderBottom: "1px solid",
                 borderLeft: "0.5px solid",
                 borderRight: "0.5px solid",
-                borderColor: `${o.vars.palette.border.disabled} !important`,
+                borderColor: `${o.vars.palette?.border.disabled} !important`,
                 ...o.colorSchemes.finalTheme.typography.body
               },
               "&.rdg-cell-frozen": {
@@ -5191,7 +5192,7 @@ const i = (o) => ({
               //cambia el color del contorno de cada celda selecionada
               outline: "1px solid",
               outlineOffset: "-1px",
-              outlineColor: o.vars.palette.border.selected
+              outlineColor: o.vars.palette.primary.focusVisible
             },
             // Alineaciones
             "& .rdg-cell.rdg-cell-align-left": {
@@ -5214,10 +5215,10 @@ const i = (o) => ({
             // Estilado de la ultima celda (Quitar la linea divisora derecha)
             "& .rdg-row :last-child:after": {
               borderRight: "0px solid",
-              borderColor: o.vars.palette.background.main
+              borderColor: o.vars.palette.background.surface
             },
             "& .rdg-header-row": {
-              backgroundColor: o.vars.palette.background.header
+              backgroundColor: o.vars.palette.primary.opacity
             },
             // Estilado de celdas de la cabecera
             "& .rdg-header-row .rdg-cell": {
@@ -5229,7 +5230,7 @@ const i = (o) => ({
               boxShadow: "none",
               gridTemplateColumns: "auto",
               borderBottom: "0.5px solid !important",
-              borderColor: `${o.vars.palette.border.disabled} !important`,
+              borderColor: `${o.vars.palette?.border.disabled} !important`,
               '& [draggable="true"]': {
                 fontSize: o.typography.body
               },
@@ -5239,7 +5240,7 @@ const i = (o) => ({
                 boxShadow: "var(--rdg-frozen-cell-box-shadow)",
                 "&:after": {
                   //borderRight: `1.5px solid`,
-                  //borderColor: theme.vars.palette.background.main,
+                  //borderColor: theme.vars.palette.background.surface,
                 }
               },
               "& .rdg-header-sort-cell": {
@@ -5441,7 +5442,7 @@ const i = (o) => ({
       }
     }
   }
-}), z = (o) => ({
+}), O = (o) => ({
   M4LCheckBox: {
     styleOverrides: {
       "&.M4LCheckBox-root": {
@@ -5493,12 +5494,12 @@ const i = (o) => ({
           }
         },
         "& .MuiButtonBase-root:hover": {
-          backgroundColor: o.vars.palette.primary?.activeOpacity,
+          backgroundColor: o.vars.palette.primary.opacity,
           borderRadius: "4px"
         },
         "& .Mui-focusVisible": {
           border: "1px solid",
-          borderColor: o.vars.palette.primary?.focus
+          borderColor: o.vars.palette.primary.focusActive
         },
         "& .MuiButtonBase-root:hover .MuiSvgIcon-root": {
           fill: o.vars.palette.primary?.hover
@@ -5520,7 +5521,7 @@ const i = (o) => ({
       }
     }
   }
-}), V = (o) => ({
+}), z = (o) => ({
   M4LStack: {
     styleOverrides: {
       "&.M4LStack-root": {
@@ -5547,7 +5548,7 @@ const i = (o) => ({
           display: "none"
         },
         "& .MuiButtonBase-root": {
-          background: o.vars.palette.background.bold,
+          background: o.vars.palette.background.neutral,
           borderRadius: "4px 4px 0 0",
           "& .MuiSvgIcon-root": {
             color: o.vars.palette.text.primary
@@ -5555,7 +5556,7 @@ const i = (o) => ({
         },
         "& .MuiButtonBase-root:hover": {
           "& .MuiSvgIcon-root": {
-            color: o.vars.palette.primary.active
+            color: o.vars.palette.primary.focusActive
           }
         },
         "& .MuiTabs-scroller": {
@@ -5651,7 +5652,7 @@ const i = (o) => ({
         borderLeft: "1px solid",
         borderRight: "1px solid",
         borderBottom: "1px solid",
-        borderColor: o.vars.palette.border.secondary,
+        borderColor: o.vars.palette?.border.secondary,
         boxSizing: "border-box",
         zIndex: "1",
         top: "-1px",
@@ -5890,7 +5891,7 @@ const i = (o) => ({
           },
           "&.M4LFormatter-booleanFormatterCheck": {
             "& .M4LIcon-icon": {
-              backgroundColor: o.vars.palette.primary.active
+              backgroundColor: o.vars.palette.primary.focusActive
             }
           }
         }
@@ -5950,7 +5951,7 @@ const i = (o) => ({
           "& .M4LoadingError-loadingErrorDivider": {
             width: "208px",
             height: "1px",
-            background: o.vars.palette.border.primary
+            background: o.vars.palette?.border.default
           },
           // pasos de acción
           "& .MuiTypography-paragraph": {
@@ -6027,7 +6028,7 @@ const i = (o) => ({
           "&::before": {
             inset: "0",
             border: "1px solid",
-            borderColor: o.vars.palette.primary?.focus,
+            borderColor: o.vars.palette.primary.focusActive,
             borderRadius: "4px",
             transform: "scale(1.07, 1.36)",
             position: "absolute",
@@ -6108,7 +6109,7 @@ const i = (o) => ({
             }
           },
           "& .MuiButtonBase-root": {
-            backgroundColor: o.vars.palette.primary?.active,
+            backgroundColor: o.vars.palette.primary.focusActive,
             color: o.vars.palette.common?.white,
             boxShadow: o.customShadows?.primary,
             position: "relative",
@@ -6130,14 +6131,14 @@ const i = (o) => ({
               }
             },
             "&:active": {
-              backgroundColor: o.vars.palette.primary?.active,
+              backgroundColor: o.vars.palette.primary.focusActive,
               color: o.vars.palette.common?.white,
               "& .M4LIcon-icon": {
                 backgroundColor: o.vars.palette.common?.white
               }
             },
             "&.Mui-focusVisible": {
-              backgroundColor: o.vars.palette.primary?.active,
+              backgroundColor: o.vars.palette.primary.focusActive,
               color: o.vars.palette.common?.white,
               "& .M4LIcon-icon": {
                 backgroundColor: o.vars.palette.common?.white
@@ -6160,25 +6161,25 @@ const i = (o) => ({
             "&:hover": {
               borderColor: o.vars.palette.primary?.hover,
               color: o.vars.palette.primary?.hover,
-              backgroundColor: o.vars.palette.primary?.activeOpacity,
+              backgroundColor: o.vars.palette.primary.opacity,
               "& .M4LIcon-icon": {
                 backgroundColor: o.vars.palette.primary?.hover
               }
             },
             "&:active": {
-              borderColor: o.vars.palette.primary?.active,
-              color: o.vars.palette.primary?.active,
+              borderColor: o.vars.palette.primary.focusActive,
+              color: o.vars.palette.primary.focusActive,
               backgroundColor: "transparent",
               "& .M4LIcon-icon": {
-                backgroundColor: o.vars.palette.primary?.active
+                backgroundColor: o.vars.palette.primary.focusActive
               }
             },
             "&.Mui-focusVisible": {
-              borderColor: o.vars.palette.primary?.active,
-              color: o.vars.palette.primary?.active,
+              borderColor: o.vars.palette.primary.focusActive,
+              color: o.vars.palette.primary.focusActive,
               backgroundColor: "transparent",
               "& .M4LIcon-icon": {
-                backgroundColor: o.vars.palette.primary?.active
+                backgroundColor: o.vars.palette.primary.focusActive
               },
               "&::before": {
                 content: "''"
@@ -6194,7 +6195,7 @@ const i = (o) => ({
               backgroundColor: o.vars.palette.text.secondary
             },
             "&:hover": {
-              backgroundColor: o.vars.palette.primary?.activeOpacity,
+              backgroundColor: o.vars.palette.primary.opacity,
               color: o.vars.palette.primary?.hover,
               "& .M4LIcon-icon": {
                 backgroundColor: o.vars.palette.primary?.hover
@@ -6202,16 +6203,16 @@ const i = (o) => ({
             },
             "&:active": {
               backgroundColor: "transparent",
-              color: o.vars.palette.primary?.active,
+              color: o.vars.palette.primary.focusActive,
               "& .M4LIcon-icon": {
-                backgroundColor: o.vars.palette.primary?.active
+                backgroundColor: o.vars.palette.primary.focusActive
               }
             },
             "&.Mui-focusVisible": {
               backgroundColor: "transparent",
-              color: o.vars.palette.primary?.active,
+              color: o.vars.palette.primary.focusActive,
               "& .M4LIcon-icon": {
-                backgroundColor: o.vars.palette.primary?.active
+                backgroundColor: o.vars.palette.primary.focusActive
               },
               "&:before": {
                 content: "''"
@@ -6720,10 +6721,10 @@ export {
   R as B,
   A as C,
   P as D,
-  O as E,
+  D as E,
   W as F,
-  z as G,
-  V as H,
+  O as G,
+  z as H,
   G as I,
   F as J,
   j as K,
@@ -6748,21 +6749,21 @@ export {
   n as c,
   p as d,
   d as e,
-  u as f,
+  x as f,
   l as g,
-  D as h,
+  V as h,
   s as i,
   H as j,
   c as k,
-  g as l,
-  x as m,
+  u as l,
+  g as m,
   b as n,
-  v as o,
+  L as o,
   M as p,
   y as q,
-  L as r,
-  h as s,
-  f as t,
+  f as r,
+  v as s,
+  h as t,
   m as u,
   w as v,
   k as w,