@m4l/styles 2.0.3 → 3.0.0

package/theme/overrides/M4LRHFComponents/{index.38639c1b.js → index-BRZVeOM5.js}

@@ -1,6 +1,6 @@
-import { alpha as o } from "@mui/system";
+import { alpha as t } from "@mui/system";
 import { alpha as e } from "@mui/material/styles";
-const a = (t) => ({
+const a = (o) => ({
   M4LRHFTextFieldPassword: {
     styleOverrides: {
       "&.M4LRHFTextFieldPassword-root": {
@@ -8,15 +8,17 @@ const a = (t) => ({
       }
     }
   }
-}), l = (t) => ({
+}), l = (o) => ({
   M4LRHFTextField: {
     styleOverrides: {
       "&.M4LRHFTextField-root": {
+        /* Root styles */
         display: "flex",
         flexDirection: "column",
         width: "100%",
         gap: "2px",
         outline: "unset",
+        /* General properties */
         "&.M4LRHFTextField-variantText": {
           height: "auto",
           "& .MuiFormControl-root": {
@@ -36,31 +38,31 @@ const a = (t) => ({
           }
         },
         "& .M4LRHFTextField-label": {
-          color: t.vars.palette.text.secondary,
+          color: o.vars.palette.text.secondary,
           transition: "all .5s ease"
         },
         "& .MuiInputBase-root": {
           padding: "0px",
           borderRadius: "4px",
           "& .MuiInputBase-input": {
-            color: t.vars.palette.text.secondary,
+            color: o.vars.palette.text.secondary,
             padding: "4px 8px",
             backgroundColor: "transparent",
             height: "100%",
-            ...t.colorSchemes.finalTheme.typography.body
+            ...o.colorSchemes.finalTheme.typography.body
           },
           "& .MuiInputAdornment-root": {
             margin: "0px",
             padding: "0px 4px 0 0"
           },
           "& .M4LIcon-icon": {
-            backgroundColor: t.vars.palette.text.secondary,
+            backgroundColor: o.vars.palette.text.secondary,
             transition: "all .3s ease"
           },
           "& .MuiOutlinedInput-notchedOutline": {
             border: "1.3px solid",
             padding: "4px",
-            borderColor: t.vars.palette.state.borderPrimary,
+            borderColor: o.vars.palette.border.primary,
             borderRadius: "4px",
             inset: "0px",
             transition: "all .3s ease",
@@ -69,83 +71,94 @@ const a = (t) => ({
             }
           }
         },
+        /* State hover */
         "&:hover": {
           "& .M4LRHFTextField-label": {
-            color: t.vars.palette.state?.hover
+            color: o.vars.palette.primary?.hover
           },
           "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
-            borderColor: t.vars.palette.state?.hover,
-            boxShadow: `0px 1px 8px ${o(t.colorSchemes.finalTheme.palette.primary.main, 0.32)}`,
-            background: t.vars.palette.state?.active12
+            borderColor: o.vars.palette.primary?.hover,
+            boxShadow: `0px 1px 8px ${t(
+              o.colorSchemes.finalTheme.palette.primary.main,
+              0.32
+            )}`,
+            background: o.vars.palette.primary.activeOpacity
           },
           "& .MuiInputBase-input": {
-            color: t.vars.palette.text.primary
+            color: o.vars.palette.text.primary
           },
           "& .M4LIcon-icon": {
-            backgroundColor: t.vars.palette.state?.hover
+            backgroundColor: o.vars.palette.primary?.hover
           }
         },
+        /* State focus and active */
         "&.M4LRHFTextField-isFocus": {
           "& .M4LRHFTextField-label": {
-            color: t.vars.palette.state?.active
+            color: o.vars.palette.primary?.active
           },
           "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
             transition: "all .1s ease",
             border: "2px solid",
-            borderColor: t.vars.palette.state?.active,
-            boxShadow: `0px 1px 8px ${o(t.colorSchemes.finalTheme.palette.primary.main, 0.32)}`,
-            background: t.vars.palette.state?.active12
+            borderColor: o.vars.palette.primary?.active,
+            boxShadow: `0px 1px 8px ${t(
+              o.colorSchemes.finalTheme.palette.primary.main,
+              0.32
+            )}`,
+            background: o.vars.palette.primary?.activeOpacity
           },
           "& .MuiInputBase-input": {
-            color: t.vars.palette.text.primary
+            color: o.vars.palette.text.primary
           },
           "& .M4LIcon-icon": {
-            backgroundColor: t.vars.palette.state?.active
+            backgroundColor: o.vars.palette.primary?.active
           }
         },
+        /* State error */
         "&.M4LRHFTextField-variantError": {
           "& .M4LRHFTextField-label": {
-            color: t.vars.palette.state?.error.normal
+            color: o.vars.palette.error.main
           },
           "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
             border: "1px solid",
-            borderColor: t.vars.palette.state?.error.normal,
-            background: t.vars.palette.error.opacity
+            borderColor: o.vars.palette.error.main,
+            background: o.vars.palette.error.activeOpacity
           },
           "& .MuiInputBase-input": {
-            color: t.vars.palette.text.primary
+            color: o.vars.palette.text.primary
           },
           "& .M4LIcon-icon": {
-            backgroundColor: t.vars.palette.state?.error.normal
+            backgroundColor: o.vars.palette.error.main
           },
           "&:hover": {
             "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
-              boxShadow: t.customShadows?.error
+              boxShadow: o.customShadows?.error
             }
           },
           "&.M4LRHFTextField-isFocus": {
             "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
-              boxShadow: t.customShadows?.error
+              boxShadow: o.customShadows?.error
             }
           }
         },
+        /* State disabled */
         "&.M4LRHFTextField-isDisabled": {
           "& .M4LRHFTextField-label": {
-            color: t.vars.palette.text.disabled
+            color: o.vars.palette.text.disabled
           },
           "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
             border: "1px solid",
-            borderColor: t.vars.palette.state.borderSecondary,
-            backgroundColor: t.vars.palette.state?.default,
+            borderColor: o.vars.palette.border.secondary,
+            backgroundColor: o.vars.palette.background?.default,
             boxShadow: "none"
           },
           "& .MuiInputBase-input": {
-            color: t.vars.palette.text.disabled
+            color: o.vars.palette.text.disabled
           },
           "& .M4LIcon-icon": {
-            backgroundColor: t.vars.palette.text.disabled
+            backgroundColor: o.vars.palette.text.disabled
           }
         },
+        /* Sizes */
         "&.M4LRHFTextField-sizeSmall": {
           "& .MuiInputBase-input, & .MuiOutlinedInput-notchedOutline, & .M4LRHFTextField-skeleton": {
             height: "24px",
@@ -165,14 +178,14 @@ const a = (t) => ({
       }
     }
   }
-}), n = (t) => ({
+}), n = (o) => ({
   M4LRHFCheckbox: {
     styleOverrides: {
       "&.M4LRHFCheckbox-root": {
         display: "flex",
         flexDirection: "column",
         width: "100%",
-        [t.breakpoints.down("sm")]: {
+        [o.breakpoints.down("sm")]: {
           "& .M4LRHFCheckbox-checkTypography": {
             "& .M4LCheckBox-root": {
               "& .MuiButtonBase-root": {
@@ -186,16 +199,17 @@ const a = (t) => ({
         },
         ".M4LRHFCheckbox-checkTypography": {
           display: "flex",
-          gap: t.spacing(2),
-          [t.breakpoints.down("sm")]: {
-            gap: t.spacing(1),
-            ...t.colorSchemes.finalTheme.typography.paragraph
+          gap: o.spacing(2),
+          [o.breakpoints.down("sm")]: {
+            gap: o.spacing(1),
+            ...o.colorSchemes.finalTheme.typography.paragraph
           }
         },
         "& .MuiTypography-root": {
-          color: t.vars.palette.text.primary,
-          ...t.colorSchemes.finalTheme.typography.body
+          color: o.vars.palette.text.primary,
+          ...o.colorSchemes.finalTheme.typography.body
         },
+        /* caso small */
         ".M4LRHFCheckbox-small .MuiButtonBase-root": {
           width: "20px",
           height: "20px"
@@ -204,6 +218,7 @@ const a = (t) => ({
           width: "16px",
           height: "16px"
         },
+        /* caso medium */
         ".M4LRHFCheckbox-medium .MuiButtonBase-root": {
           width: "24px",
           height: "24px"
@@ -216,28 +231,30 @@ const a = (t) => ({
           borderRadius: "4px"
         },
         ".MuiButtonBase-root:hover": {
-          backgroundColor: t.vars.palette.state?.active12
+          backgroundColor: o.vars.palette.primary?.activeOpacity
         },
         ".Mui-focusVisible": {
           border: "1px solid",
-          borderColor: t.vars.palette.state?.focus
+          borderColor: o.vars.palette.primary?.focus
         },
         ".MuiButtonBase-root:hover .MuiSvgIcon-root": {
-          fill: t.vars.palette.state?.hover
+          fill: o.vars.palette.primary?.hover
         },
+        /* caso general */
         ".M4LRHFCheckbox-checkTypography .MuiTypography-root": {
-          ...t.colorSchemes.finalTheme.typography.body
+          ...o.colorSchemes.finalTheme.typography.body
         },
         ".M4LRHFCheckbox-stateDisabled .MuiSvgIcon-root": {
-          fill: t.vars.palette.state?.default
+          fill: o.vars.palette.background?.default
         },
+        /* selector del caso focus por tab */
         ".MuiButtonBase-root .Mui-focusVisible:focus-visible": {
           outline: "#FFF00"
         }
       }
     }
   }
-}), p = (t) => ({
+}), p = (o) => ({
   M4LRHFAutocomplete: {
     styleOverrides: {
       "&.M4LRHFAutocomplete-root": {
@@ -247,6 +264,7 @@ const a = (t) => ({
         width: "100%",
         gap: "2px",
         outline: "unset",
+        // Variant
         "&.M4LRHFAutocomplete-multiple": {
           "& .MuiAutocomplete-inputRoot": {
             display: "flex",
@@ -270,28 +288,52 @@ const a = (t) => ({
             }
           }
         },
+        /* General properties */
         "& .MuiAutocomplete-root": {
           height: "100%",
           "& .MuiFormControl-root": {
             height: "100%",
             "& .MuiInputBase-root": {
-              borderColor: t.vars.palette.state.borderPrimary,
+              borderColor: o.vars.palette.border.primary,
               position: "relative",
               height: "100%",
               "& .MuiInputBase-input": {
+                /* Selector del elemento html input */
                 boxSizing: "border-box",
-                color: t.vars.palette.text.secondary,
+                color: o.vars.palette.text.secondary,
                 backgroundColor: "transparent",
                 height: "100%",
                 padding: "0 16px 0 8px",
-                ...t.colorSchemes.finalTheme.typography.body
+                ...o.colorSchemes.finalTheme.typography.body
+                /*  '& .MuiInputAdornment-root': {
+                                                         margin: '0px',
+                                                         padding: '0px',
+                                                     },
+                
+                                                     '& .M4LIcon-icon': {
+                                                         backgroundColor: theme.vars.palette.text.secondary,
+                                                         transition: 'all .3s ease',
+                                                     },
+                
+                                                     '& .MuiOutlinedInput-notchedOutline': {
+                                                         border: '1px solid',
+                                                         borderColor: theme.vars.palette.border.primary,
+                                                         borderRadius: '4px',
+                                                         inset: '0px',
+                                                         transition: 'all .3s ease',
+                
+                                                         '& legend': {
+                                                             display: 'none'
+                                                            },
+                
+                                                        } */
               },
               "& .M4LRHFAutocomplete-containerRefreshDown": {
                 display: "flex",
                 width: "auto",
                 "& .M4LRHFAutocomplete-iconLeft": {
                   borderLeft: "1px solid",
-                  borderColor: t.vars.palette.state.borderPrimary
+                  borderColor: o.vars.palette.border.primary
                 }
               },
               "& .M4LRHFAutocomplete-iconDown": {},
@@ -305,6 +347,7 @@ const a = (t) => ({
             }
           }
         },
+        /* Skeleton general properties*/
         "& .M4LRHFAutocomplete-skeletonRoot": {
           display: "flex",
           flexDirection: "column",
@@ -316,7 +359,7 @@ const a = (t) => ({
             justifyContent: "space-between",
             alignItems: "center",
             border: "1px solid",
-            borderColor: t.vars.palette.divider,
+            borderColor: o.vars.palette.divider,
             borderRadius: "4px",
             padding: "0 10px",
             overflow: "hidden",
@@ -331,7 +374,7 @@ const a = (t) => ({
           padding: "0"
         },
         "& .M4LRHFAutocomplete-label": {
-          color: t.vars.palette.text.secondary,
+          color: o.vars.palette.text.secondary,
           transition: "all .3s ease"
         },
         "& .MuiAutocomplete-endAdornment": {
@@ -340,91 +383,96 @@ const a = (t) => ({
         "& .MuiAutocomplete-root .MuiInputBase-root": {
           padding: "0p 8px",
           height: "100%"
+          //revisar
         },
+        /* State hover */
         "&:hover": {
           "& .M4LRHFAutocomplete-label": {
-            color: t.vars.palette.text.secondary
+            color: o.vars.palette.text.secondary
           },
           "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
-            borderColor: t.vars.palette.state?.hover,
+            borderColor: o.vars.palette.primary?.hover,
             boxShadow: `0px 1px 8px ${e(
-              t.colorSchemes.finalTheme.palette.primary.main,
+              o.colorSchemes.finalTheme.palette.primary.main,
               0.32
             )}`
           },
           "& .MuiInputBase-input": {
-            color: t.vars.palette.text.primary
+            color: o.vars.palette.text.primary
           },
           "& .M4LIcon-icon": {
-            backgroundColor: t.vars.palette.state?.hover
+            backgroundColor: o.vars.palette.primary?.hover
           }
         },
+        /* State focus and active */
         "&.M4LRHFAutocomplete-isFocus": {
           "& .M4LRHFAutocomplete-label": {
-            color: t.vars.palette.state?.active
+            color: o.vars.palette.primary?.active
           },
           "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
             transition: "all .1s ease",
-            background: t.vars.palette.state.active12,
+            background: o.vars.palette.primary.activeOpacity,
             border: "2px solid",
-            borderColor: t.vars.palette.state?.active,
+            borderColor: o.vars.palette.primary?.active,
             boxShadow: `0px 1px 8px ${e(
-              t.colorSchemes.finalTheme.palette.primary.main,
+              o.colorSchemes.finalTheme.palette.primary.main,
               0.32
             )}`
           },
           "& .MuiInputBase-input": {
-            color: t.vars.palette.text.primary
+            color: o.vars.palette.text.primary
           },
           "& .M4LIcon-icon": {
-            backgroundColor: t.vars.palette.state?.active
+            backgroundColor: o.vars.palette.primary?.active
           }
         },
+        /* State error */
         "&.M4LRHFAutocomplete-variantError": {
           "& .M4LRHFAutocomplete-label": {
-            color: t.vars.palette.state?.error.normal
+            color: o.vars.palette.error.main
           },
           "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
             border: "1px solid",
-            borderColor: t.vars.palette.state?.error.normal
+            borderColor: o.vars.palette.error.main
           },
           "& .MuiInputBase-input": {
-            color: t.vars.palette.text.primary
+            color: o.vars.palette.text.primary
           },
           "& .M4LIcon-icon": {
-            backgroundColor: t.vars.palette.state?.error.normal
+            backgroundColor: o.vars.palette.error.main
           },
           "&:hover": {
             "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
-              boxShadow: t.customShadows?.error
+              boxShadow: o.customShadows?.error
             }
           },
           "&.M4LRHFAutocomplete-isFocus": {
             "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
-              boxShadow: t.customShadows?.error
+              boxShadow: o.customShadows?.error
             }
           }
         },
+        /* State disabled */
         "&.M4LRHFAutocomplete-isDisabled": {
           "& .M4LRHFAutocomplete-label": {
-            color: t.vars.palette.text.disabled
+            color: o.vars.palette.text.disabled
           },
           "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
             border: "1px solid",
-            borderColor: t.vars.palette.state.borderDisable,
-            backgroundColor: t.vars.palette.state?.default,
+            borderColor: o.vars.palette.border.disabled,
+            backgroundColor: o.vars.palette.background?.default,
             boxShadow: "none"
           },
           "& .MuiInputBase-input": {
-            color: t.vars.palette.text.disabled
+            color: o.vars.palette.text.disabled
           },
           "& .M4LIcon-icon": {
-            backgroundColor: t.vars.palette.text.disabled
+            backgroundColor: o.vars.palette.text.disabled
           }
         },
+        /* Sizes */
         "&.M4LRHFAutocomplete-sizeSmall": {
-          [`& .M4LRHFAutocomplete-skeleton,
-                          & .MuiAutocomplete-root`]: {
+          "& .M4LRHFAutocomplete-skeleton,\n                          & .MuiAutocomplete-root": {
             "& .M4LImage-root": {
               width: "24px",
               height: "24px",
@@ -435,8 +483,7 @@ const a = (t) => ({
           }
         },
         "&.M4LRHFAutocomplete-sizeMedium": {
-          [`& .M4LRHFAutocomplete-skeleton,
-                          & .MuiAutocomplete-root`]: {
+          "& .M4LRHFAutocomplete-skeleton,\n                          & .MuiAutocomplete-root": {
             "& .M4LImage-root": {
               width: "28px",
               height: "28px",
@@ -446,6 +493,7 @@ const a = (t) => ({
             minHeight: "36px"
           }
         },
+        // variant image defined
         "&.M4LRHFAutocomplete-imageWidthDefined": {
           "& .M4LImage-root": {
             "& .M4LImage-img": {
@@ -453,13 +501,17 @@ const a = (t) => ({
             }
           }
         }
+        // with multiple values in chips
       }
     }
   },
   M4LRHFAutocompletePopover: {
     styleOverrides: {
+      // Menu popover que se despliega luego de interactuar con el componente.
+      // Despliega la lista de opciones diponibles.
       "&.M4LRHFAutocomplete-popper": {
         zIndex: "1300",
+        // Primer contendeor del manu, se utiliza para dar espacio interno y distribuir los items.
         "& .MuiAutocomplete-listbox": {
           padding: "8px",
           display: "flex",
@@ -478,23 +530,28 @@ const a = (t) => ({
             }
           }
         },
+        // Estilos generales para withImage
         "& .M4LRHFAutocomplete-withImage": {
           display: "flex",
           gap: "8px",
+          // Estados por evento de usuario
           "&:hover": {
-            color: t.vars.palette.text.primary,
-            backgroundColor: t.vars.palette.state.active12
+            color: o.vars.palette.text.primary,
+            backgroundColor: o.vars.palette.primary.activeOpacity
           },
           "& .M4LImage-root": {
             width: "auto",
             height: "100%"
           }
         },
+        // Estilos del menu para la versión de tamaño small
         "&.M4LRHFAutocomplete-sizeSmall": {
+          // Item sin imagen
           "& .MuiAutocomplete-listbox": {
             "& .MuiAutocomplete-option": {
               minHeight: "24px"
             },
+            // Item con imagen
             "& .M4LRHFAutocomplete-withImage": {
               paddingLeft: "4px",
               height: "24px",
@@ -510,12 +567,15 @@ const a = (t) => ({
             }
           }
         },
+        // Estilos del menu para la versión de tamaño medium
         "&.M4LRHFAutocomplete-sizeMedium": {
+          // Item sin imagen
           "& .MuiAutocomplete-listbox": {
             "& .MuiAutocomplete-option": {
               height: "36px"
             }
           },
+          // Item con imagen
           "& .M4LRHFAutocomplete-withImage": {
             paddingLeft: "4px",
             height: "36px",
@@ -530,6 +590,7 @@ const a = (t) => ({
             }
           }
         },
+        // variación de ancho de imagen definido
         "&.M4LRHFAutocomplete-imageWidthDefined": {
           "& .M4LImage-img": {
             minWidth: "24px",
@@ -537,10 +598,10 @@ const a = (t) => ({
           }
         },
         "& .MuiPaper-root": {
-          boxShadow: t.customShadows?.z2,
+          boxShadow: o.customShadows?.z2,
           "& .MuiAutocomplete-listbox .MuiAutocomplete-option:hover": {
-            color: t.vars.palette.text.primary,
-            backgroundColor: t.vars.palette.state.active12
+            color: o.vars.palette.text.primary,
+            backgroundColor: o.vars.palette.primary.activeOpacity
           }
         }
       }
@@ -550,6 +611,7 @@ const a = (t) => ({
     styleOverrides: {
       "&.M4LRHFAutocomplete-sizeSmall": {
         height: "18px",
+        // important debido a que MUI agrega media queries directamente al elemento.
         minHeight: "18px !important",
         "& .MuiChip-deleteIcon": {
           fontSize: "16px"
@@ -560,6 +622,7 @@ const a = (t) => ({
       },
       "&.M4LRHFAutocomplete-sizeMedium": {
         height: "24px",
+        // important debido a que MUI agrega media queries directamente al elemento.
         minHeight: "24px !important",
         "& .MuiChip-deleteIcon": {
           fontSize: "20px"
@@ -570,7 +633,7 @@ const a = (t) => ({
       }
     }
   }
-}), s = (t) => ({
+}), d = (o) => ({
   M4LRHFAutocompleteAsync: {
     styleOverrides: {
       "&.M4LRHFAutocompleteAsync-root": {
@@ -579,7 +642,7 @@ const a = (t) => ({
       }
     }
   }
-}), d = (t) => ({
+}), u = (o) => ({
   M4LRHFDateTime: {
     styleOverrides: {
       "&.M4LRHFDateTime-root": {
@@ -594,7 +657,7 @@ const a = (t) => ({
           width: "100%",
           alignItems: "center",
           justifyContent: "space-between",
-          border: `1px solid ${t.vars.palette.divider}`,
+          border: `1px solid ${o.vars.palette.divider}`,
           paddingLeft: "12px",
           borderRadius: "2px",
           "& .MuiSkeleton-circular": {
@@ -625,6 +688,7 @@ const a = (t) => ({
             height: "36px"
           }
         },
+        /* General properties */
         "& .MuiFormControl-root": {
           "& .MuiInputBase-root": {
             padding: "0 4px 0 0",
@@ -635,17 +699,17 @@ const a = (t) => ({
           }
         },
         "& .M4LRHFTextField-label": {
-          color: t.vars.palette.text.secondary,
+          color: o.vars.palette.text.secondary,
           transition: "all .5s ease"
         },
         "& .MuiInputBase-root.MuiInputBase-formControl": {
           padding: "0px 8px 0 0",
           "& .MuiInputBase-input": {
-            color: t.vars.palette.text.secondary,
+            color: o.vars.palette.text.secondary,
             padding: "0px 12px",
             backgroundColor: "transparent",
             height: "100%",
-            ...t.colorSchemes.finalTheme.typography.body
+            ...o.colorSchemes.finalTheme.typography.body
           },
           "& .MuiInputAdornment-root": {
             margin: "0px",
@@ -664,13 +728,13 @@ const a = (t) => ({
             }
           },
           "& .M4LIcon-icon": {
-            backgroundColor: t.vars.palette.text.secondary,
+            backgroundColor: o.vars.palette.text.secondary,
             transition: "all .3s ease"
           },
           "& .MuiOutlinedInput-notchedOutline": {
             border: "1px solid",
             padding: "4px",
-            borderColor: t.vars.palette.divider,
+            borderColor: o.vars.palette.divider,
             borderRadius: "4px",
             inset: "0px",
             transition: "all .3s ease",
@@ -679,82 +743,86 @@ const a = (t) => ({
             }
           }
         },
+        /* State hover */
         "&:hover": {
           "& .M4LTypography-root": {
-            color: t.vars.palette.state?.hover
+            color: o.vars.palette.primary?.hover
           },
           "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
-            borderColor: t.vars.palette.state?.hover
+            borderColor: o.vars.palette.primary?.hover
           },
           "& .MuiInputBase-input": {
-            color: t.vars.palette.text.primary
+            color: o.vars.palette.text.primary
           },
           "& .M4LIcon-icon": {
-            backgroundColor: t.vars.palette.state?.hover
+            backgroundColor: o.vars.palette.primary?.hover
           }
         },
+        /* State focus and active */
         "&.M4LRHFDateTime-isFocus": {
           "& .M4LTypography-root": {
-            color: t.vars.palette.state.active
+            color: o.vars.palette.primary.active
           },
           "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
             transition: "all .1s ease",
             border: "2px solid",
-            borderColor: t.vars.palette.state?.active
+            borderColor: o.vars.palette.primary?.active
           },
           "& .MuiInputBase-input": {
-            color: t.vars.palette.text.primary
+            color: o.vars.palette.text.primary
           },
           "& .M4LIcon-icon": {
-            backgroundColor: t.vars.palette.state?.active
+            backgroundColor: o.vars.palette.primary?.active
           }
         },
+        /* State error */
         "&.M4LRHFTextField-variantError": {
           "& .M4LRHFTextField-label": {
-            color: t.vars.palette.state?.error.normal
+            color: o.vars.palette.error.main
           },
           "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
             border: "1px solid",
-            borderColor: t.vars.palette.state?.error.normal
+            borderColor: o.vars.palette.error.main
           },
           "& .MuiInputBase-input": {
-            color: t.vars.palette.text.primary
+            color: o.vars.palette.text.primary
           },
           "& .M4LIcon-icon": {
-            backgroundColor: t.vars.palette.state?.error.normal
+            backgroundColor: o.vars.palette.error.main
           },
           "&:hover": {
             "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
-              boxShadow: t.customShadows?.error
+              boxShadow: o.customShadows?.error
             }
           },
           "&.M4LRHFTextField-isFocus": {
             "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
-              boxShadow: t.customShadows?.error
+              boxShadow: o.customShadows?.error
             }
           }
         },
+        /* State disabled */
         "&.M4LRHFTextField-isDisabled": {
           "& .M4LRHFTextField-label": {
-            color: t.vars.palette.text.disabled
+            color: o.vars.palette.text.disabled
           },
           "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
             border: "1px solid",
-            borderColor: t.vars.palette.text.disabled,
-            backgroundColor: t.vars.palette.state?.default,
+            borderColor: o.vars.palette.text.disabled,
+            backgroundColor: o.vars.palette.background?.default,
             boxShadow: "none"
           },
           "& .MuiInputBase-input": {
-            color: t.vars.palette.text.disabled
+            color: o.vars.palette.text.disabled
           },
           "& .M4LIcon-icon": {
-            backgroundColor: t.vars.palette.text.disabled
+            backgroundColor: o.vars.palette.text.disabled
           }
         }
       }
     }
   }
-}), u = (t) => ({
+}), s = (o) => ({
   M4LRHFUploadImage: {
     styleOverrides: {
       "&.M4LRHFUploadImage-root": {
@@ -764,12 +832,12 @@ const a = (t) => ({
           width: "100%",
           height: "100%",
           minHeight: "200px",
-          minWidth: t.spacing(20),
+          minWidth: o.spacing(20),
           position: "relative",
           borderRadius: "4px",
           padding: "8px",
-          boxShadow: t.customShadows?.z2,
-          background: t.vars.palette.background.default,
+          boxShadow: o.customShadows?.z2,
+          background: o.vars.palette.background.default,
           "& .M4LRHFUploadImage-dropZoneStyle": {
             zIndex: 0,
             width: "fit-content",
@@ -783,15 +851,15 @@ const a = (t) => ({
             inset: "0",
             alignItems: "center",
             justifyContent: "center",
-            background: t.vars.palette.background.neutral,
+            background: o.vars.palette.background.main,
             "& > *": {
               width: "100%",
               height: "100%"
             },
             "&:hover": {
-              background: t.vars.palette.state.active12,
+              background: o.vars.palette.primary.activeOpacity,
               border: "1px solid",
-              borderColor: t.vars.palette.state.active12,
+              borderColor: o.vars.palette.primary.activeOpacity,
               cursor: "pointer",
               "& .placeholder": {
                 zIndex: 9
@@ -813,9 +881,9 @@ const a = (t) => ({
               width: "100%",
               height: "100%",
               overflow: "hidden",
-              transition: t.transitions.create("opacity", {
-                easing: t.transitions.easing.easeInOut,
-                duration: t.transitions.duration.shorter
+              transition: o.transitions.create("opacity", {
+                easing: o.transitions.easing.easeInOut,
+                duration: o.transitions.duration.shorter
               }),
               "&:hover": {
                 opacity: 1
@@ -830,6 +898,7 @@ const a = (t) => ({
                 gap: "0",
                 position: "relative",
                 overflow: "hidden",
+                // Icono de carga
                 "& .M4LRHFUploadImage-containerBodyImage": {
                   display: "flex",
                   justifyContent: "center",
@@ -849,24 +918,24 @@ const a = (t) => ({
                     display: "flex",
                     justifyContent: "center",
                     ".MuiTypography-subtitle": {
-                      ...t.colorSchemes.finalTheme.typography.paragraphDens,
-                      color: t.vars.palette.text.primary
+                      ...o.colorSchemes.finalTheme.typography.paragraphDens,
+                      color: o.vars.palette.text.primary
                     }
                   },
                   "& .M4LRHFUploadImage-containerDescription": {
                     display: "flex",
                     justifyContent: "center",
                     ".MuiTypography-root": {
-                      ...t.colorSchemes.finalTheme.typography.paragraph,
-                      color: t.vars.palette.text.secondary
+                      ...o.colorSchemes.finalTheme.typography.paragraph,
+                      color: o.vars.palette.text.secondary
                     }
                   },
                   "& .M4LRHFUploadImage-containerConditions": {
                     display: "flex",
                     justifyContent: "center",
                     ".MuiTypography-root": {
-                      ...t.colorSchemes.finalTheme.typography.body,
-                      color: t.vars.palette.text.secondary
+                      ...o.colorSchemes.finalTheme.typography.body,
+                      color: o.vars.palette.text.secondary
                     }
                   },
                   "& .M4LButton-root": {
@@ -879,17 +948,19 @@ const a = (t) => ({
             }
           }
         },
+        // Skeleton
         "& .M4LRHFUploadImage-skeleton": {
           maskPosition: "center!important",
           maskRepeat: "no-repeat!important",
           WebkitMaskRepeat: "no-repeat!important",
-          border: `1px dashed ${t.vars.palette.divider}`,
+          border: `1px dashed ${o.vars.palette.divider}`,
           width: "100%",
           height: "100%",
           mask: "url('data:image/svg+xml;base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDcwIDcwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA3MCA3MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM2MzczODE7fQo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NSw4LjdjMS40LTEuNSwzLjQtMi4zLDUuNC0yLjNzMy45LDAuOCw1LjQsMi4zczIuNCwzLjUsMi41LDUuN2MwLDIuMi0wLjksNC4yLTIuNCw1LjdzLTMuNSwyLjMtNS41LDIuMgoJCWMtMi4xLDAuMS00LTAuNy01LjUtMi4yYy0xLjQtMS41LTIuMy0zLjUtMi40LTUuN0M0Mi42LDEyLjIsNDMuNSwxMC4yLDQ1LDguN3oiLz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02OC40LDYyLjFjLTAuMywwLjUtMC43LDAuOC0xLjIsMS4xcy0xLDAuNC0xLjYsMC40SDQuM2MtMC42LDAtMS4xLTAuMS0xLjYtMC40cy0wLjktMC42LTEuMi0xLjEKCQljLTAuMi0wLjUtMC40LTEtMC40LTEuNXMwLjEtMS4xLDAuNC0xLjVsMjMtMzYuNGMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNHMwLjksMC42LDEuMiwxLjEKCQlsMTEuNSwxOC4yYzAuMiwwLjMsMC41LDAuNSwwLjgsMC43czAuNiwwLjMsMSwwLjNjMC4zLDAsMC43LTAuMSwxLTAuM3MwLjYtMC40LDAuOC0wLjdsMy4xLTQuOWMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMQoJCXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNGMwLjUsMC4zLDAuOSwwLjYsMS4yLDEuMWwxNC42LDIzLjFjMC4zLDAuNSwwLjMsMSwwLjMsMS41UzY4LjcsNjEuNyw2OC40LDYyLjF6Ii8+CjwvZz4KPC9zdmc+Cg==')",
           WebkitMask: "url('data:image/svg+xml;base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDcwIDcwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA3MCA3MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM2MzczODE7fQo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NSw4LjdjMS40LTEuNSwzLjQtMi4zLDUuNC0yLjNzMy45LDAuOCw1LjQsMi4zczIuNCwzLjUsMi41LDUuN2MwLDIuMi0wLjksNC4yLTIuNCw1LjdzLTMuNSwyLjMtNS41LDIuMgoJCWMtMi4xLDAuMS00LTAuNy01LjUtMi4yYy0xLjQtMS41LTIuMy0zLjUtMi40LTUuN0M0Mi42LDEyLjIsNDMuNSwxMC4yLDQ1LDguN3oiLz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02OC40LDYyLjFjLTAuMywwLjUtMC43LDAuOC0xLjIsMS4xcy0xLDAuNC0xLjYsMC40SDQuM2MtMC42LDAtMS4xLTAuMS0xLjYtMC40cy0wLjktMC42LTEuMi0xLjEKCQljLTAuMi0wLjUtMC40LTEtMC40LTEuNXMwLjEtMS4xLDAuNC0xLjVsMjMtMzYuNGMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNHMwLjksMC42LDEuMiwxLjEKCQlsMTEuNSwxOC4yYzAuMiwwLjMsMC41LDAuNSwwLjgsMC43czAuNiwwLjMsMSwwLjNjMC4zLDAsMC43LTAuMSwxLTAuM3MwLjYtMC40LDAuOC0wLjdsMy4xLTQuOWMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMQoJCXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNGMwLjUsMC4zLDAuOSwwLjYsMS4yLDEuMWwxNC42LDIzLjFjMC4zLDAuNSwwLjMsMSwwLjMsMS41UzY4LjcsNjEuNyw2OC40LDYyLjF6Ii8+CjwvZz4KPC9zdmc+Cg==')"
         }
       },
+      // Imagen cargada
       "&.M4LRHFUploadImage-hasFile": {
         "& .M4LRHFUploadImage-placeHolder": {
           opacity: "0",
@@ -902,13 +973,14 @@ const a = (t) => ({
           width: "100%",
           height: "100%",
           overflow: "hidden",
-          transition: t.transitions.create("opacity", {
-            easing: t.transitions.easing.easeInOut,
-            duration: t.transitions.duration.shorter
+          transition: o.transitions.create("opacity", {
+            easing: o.transitions.easing.easeInOut,
+            duration: o.transitions.duration.shorter
           }),
           "&:hover": {
             opacity: 1
           },
+          // Comportamiento Hover imagen cargada
           "& .M4LRHFUploadImage-containerUploadBoddy": {
             "& .M4LRHFUploadImage-containerBodyImage": {
               opacity: "0"
@@ -934,7 +1006,7 @@ const a = (t) => ({
       }
     }
   }
-}), M = (t) => ({
+}), c = (o) => ({
   M4LRHFPeriod: {
     styleOverrides: {
       "&.M4LRHFPeriod-root": {
@@ -942,7 +1014,7 @@ const a = (t) => ({
       }
     }
   }
-}), c = (t) => ({
+}), M = (o) => ({
   M4LRHFColorPicker: {
     styleOverrides: {
       "&.M4LRHFColorPicker-root": {
@@ -977,14 +1049,20 @@ const a = (t) => ({
           gap: "4px",
           padding: "2px",
           border: "1.5px solid",
-          borderColor: t.vars.palette.state.borderPrimary,
+          borderColor: o.vars.palette.border.primary,
           borderRadius: "4px",
           width: "fit-content",
           "& .M4LRHFColorPicker-boxColor": {
             cursor: "pointer"
           },
+          /* '& .M4LIcon-root': {
+                          minHeight: '18px',
+                          minWidth: '18px',
+                          cursor: 'pointer',
+                          borderRadius: '4px',
+                      }, */
           "& .M4LIcon-root:hover": {
-            background: t.vars.palette.state.hoverDefault
+            background: o.vars.palette.background.hover
           }
         }
       }
@@ -994,12 +1072,12 @@ const a = (t) => ({
     styleOverrides: {
       "&.M4LRHFColorPicker-popoverRoot": {
         "& .MuiPaper-root": {
-          background: t.vars.palette.background.default,
+          background: o.vars.palette.background.default,
           padding: "8px",
           border: "1px solid",
-          borderColor: t.vars.palette.state.borderSecondary,
+          borderColor: o.vars.palette.border.secondary,
           borderRadius: "4px",
-          boxShadow: t.vars.customShadows.z4,
+          boxShadow: o.vars.customShadows.z4,
           test: "root",
           "& .M4LRHFColorPicker-containerPicker": {
             background: "transparent",
@@ -1016,9 +1094,9 @@ const a = (t) => ({
               flexDirection: "column",
               gap: "8px",
               border: "1px solid",
-              borderColor: t.vars.palette.state.borderSecondary,
+              borderColor: o.vars.palette.border.secondary,
               borderRadius: "4px",
-              backgroundColor: t.vars.palette.background.default,
+              backgroundColor: o.vars.palette.background.default,
               "& :nth-of-type(-n + 1)": {
                 borderRadius: "4px"
               },
@@ -1029,27 +1107,27 @@ const a = (t) => ({
                   "& > div": {
                     display: "flex",
                     flexDirection: "column-reverse",
-                    ...t.colorSchemes.finalTheme.typography.body,
-                    color: t.vars.palette.text.secondary,
+                    ...o.colorSchemes.finalTheme.typography.body,
+                    color: o.vars.palette.text.secondary,
                     gap: "2px",
                     padding: "0 important",
                     "& > input": {
                       display: "flex",
                       textAlign: "center !important",
                       border: "1px solid",
-                      borderColor: t.vars.palette.state.borderPrimary,
+                      borderColor: o.vars.palette.border.primary,
                       borderRadius: "2px",
                       background: "transparent",
                       minHeight: "24px",
                       height: "24px !important",
-                      ...t.colorSchemes.finalTheme.typography.body,
-                      color: `${t.vars.palette.text.primary} !important`
+                      ...o.colorSchemes.finalTheme.typography.body,
+                      color: `${o.vars.palette.text.primary} !important`
                     },
                     "& > label": {
                       display: "flex",
                       textAlign: "left !important",
-                      ...t.colorSchemes.finalTheme.typography.body,
-                      color: `${t.vars.palette.text.secondary} !important`,
+                      ...o.colorSchemes.finalTheme.typography.body,
+                      color: `${o.vars.palette.text.secondary} !important`,
                       padding: "0 !important"
                     }
                   }
@@ -1070,10 +1148,10 @@ export {
   l as M,
   a,
   p as b,
-  s as c,
-  d,
-  u as e,
-  M as f,
+  d as c,
+  u as d,
+  s as e,
+  c as f,
   n as g,
-  c as h
+  M as h
 };