@m4l/styles 3.2.2 → 6.0.0

package/theme/overrides/M4LRHFComponents/{index.7d702163.js → index-Dv4h8DSV.js}

@@ -12,11 +12,13 @@ const a = (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": {
@@ -60,7 +62,7 @@ const a = (o) => ({
           "& .MuiOutlinedInput-notchedOutline": {
             border: "1.3px solid",
             padding: "4px",
-            borderColor: o.vars.palette.border.primary,
+            borderColor: o.vars.palette?.border.default,
             borderRadius: "4px",
             inset: "0px",
             transition: "all .3s ease",
@@ -69,6 +71,7 @@ const a = (o) => ({
             }
           }
         },
+        /* State hover */
         "&:hover": {
           "& .M4LRHFTextField-label": {
             color: o.vars.palette.primary?.hover
@@ -79,7 +82,7 @@ const a = (o) => ({
               o.colorSchemes.finalTheme.palette.primary.main,
               0.32
             )}`,
-            background: o.vars.palette.primary.activeOpacity
+            background: o.vars.palette.primary.opacity
           },
           "& .MuiInputBase-input": {
             color: o.vars.palette.text.primary
@@ -88,27 +91,29 @@ const a = (o) => ({
             backgroundColor: o.vars.palette.primary?.hover
           }
         },
+        /* State focus and active */
         "&.M4LRHFTextField-isFocus": {
           "& .M4LRHFTextField-label": {
-            color: o.vars.palette.primary?.active
+            color: o.vars.palette.primary.focusActive
           },
           "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
             transition: "all .1s ease",
             border: "2px solid",
-            borderColor: o.vars.palette.primary?.active,
+            borderColor: o.vars.palette.primary.focusActive,
             boxShadow: `0px 1px 8px ${t(
               o.colorSchemes.finalTheme.palette.primary.main,
               0.32
             )}`,
-            background: o.vars.palette.primary?.activeOpacity
+            background: o.vars.palette.primary.opacity
           },
           "& .MuiInputBase-input": {
             color: o.vars.palette.text.primary
           },
           "& .M4LIcon-icon": {
-            backgroundColor: o.vars.palette.primary?.active
+            backgroundColor: o.vars.palette.primary.focusActive
           }
         },
+        /* State error */
         "&.M4LRHFTextField-variantError": {
           "& .M4LRHFTextField-label": {
             color: o.vars.palette.error.main
@@ -116,7 +121,7 @@ const a = (o) => ({
           "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
             border: "1px solid",
             borderColor: o.vars.palette.error.main,
-            background: o.vars.palette.error.activeOpacity
+            background: o.vars.palette.error.opacity
           },
           "& .MuiInputBase-input": {
             color: o.vars.palette.text.primary
@@ -135,13 +140,14 @@ const a = (o) => ({
             }
           }
         },
+        /* State disabled */
         "&.M4LRHFTextField-isDisabled": {
           "& .M4LRHFTextField-label": {
             color: o.vars.palette.text.disabled
           },
           "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
             border: "1px solid",
-            borderColor: o.vars.palette.border.secondary,
+            borderColor: o.vars.palette?.border.secondary,
             backgroundColor: o.vars.palette.background?.default,
             boxShadow: "none"
           },
@@ -152,6 +158,7 @@ const a = (o) => ({
             backgroundColor: o.vars.palette.text.disabled
           }
         },
+        /* Sizes */
         "&.M4LRHFTextField-sizeSmall": {
           "& .MuiInputBase-input, & .MuiOutlinedInput-notchedOutline, & .M4LRHFTextField-skeleton": {
             height: "24px",
@@ -202,6 +209,7 @@ const a = (o) => ({
           color: o.vars.palette.text.primary,
           ...o.colorSchemes.finalTheme.typography.body
         },
+        /* caso small */
         ".M4LRHFCheckbox-small .MuiButtonBase-root": {
           width: "20px",
           height: "20px"
@@ -210,6 +218,7 @@ const a = (o) => ({
           width: "16px",
           height: "16px"
         },
+        /* caso medium */
         ".M4LRHFCheckbox-medium .MuiButtonBase-root": {
           width: "24px",
           height: "24px"
@@ -222,21 +231,23 @@ const a = (o) => ({
           borderRadius: "4px"
         },
         ".MuiButtonBase-root:hover": {
-          backgroundColor: o.vars.palette.primary?.activeOpacity
+          backgroundColor: o.vars.palette.primary.opacity
         },
         ".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
         },
+        /* caso general */
         ".M4LRHFCheckbox-checkTypography .MuiTypography-root": {
           ...o.colorSchemes.finalTheme.typography.body
         },
         ".M4LRHFCheckbox-stateDisabled .MuiSvgIcon-root": {
           fill: o.vars.palette.background?.default
         },
+        /* selector del caso focus por tab */
         ".MuiButtonBase-root .Mui-focusVisible:focus-visible": {
           outline: "#FFF00"
         }
@@ -253,6 +264,7 @@ const a = (o) => ({
         width: "100%",
         gap: "2px",
         outline: "unset",
+        // Variant
         "&.M4LRHFAutocomplete-multiple": {
           "& .MuiAutocomplete-inputRoot": {
             display: "flex",
@@ -276,28 +288,52 @@ const a = (o) => ({
             }
           }
         },
+        /* General properties */
         "& .MuiAutocomplete-root": {
           height: "100%",
           "& .MuiFormControl-root": {
             height: "100%",
             "& .MuiInputBase-root": {
-              borderColor: o.vars.palette.border.primary,
+              borderColor: o.vars.palette?.border.default,
               position: "relative",
               height: "100%",
               "& .MuiInputBase-input": {
+                /* Selector del elemento html input */
                 boxSizing: "border-box",
                 color: o.vars.palette.text.secondary,
                 backgroundColor: "transparent",
                 height: "100%",
                 padding: "0 16px 0 8px",
                 ...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.default,
+                                                         borderRadius: '4px',
+                                                         inset: '0px',
+                                                         transition: 'all .3s ease',
+                
+                                                         '& legend': {
+                                                             display: 'none'
+                                                            },
+                
+                                                        } */
               },
               "& .M4LRHFAutocomplete-containerRefreshDown": {
                 display: "flex",
                 width: "auto",
                 "& .M4LRHFAutocomplete-iconLeft": {
                   borderLeft: "1px solid",
-                  borderColor: o.vars.palette.border.primary
+                  borderColor: o.vars.palette?.border.default
                 }
               },
               "& .M4LRHFAutocomplete-iconDown": {},
@@ -311,6 +347,7 @@ const a = (o) => ({
             }
           }
         },
+        /* Skeleton general properties*/
         "& .M4LRHFAutocomplete-skeletonRoot": {
           display: "flex",
           flexDirection: "column",
@@ -346,7 +383,9 @@ const a = (o) => ({
         "& .MuiAutocomplete-root .MuiInputBase-root": {
           padding: "0p 8px",
           height: "100%"
+          //revisar
         },
+        /* State hover */
         "&:hover": {
           "& .M4LRHFAutocomplete-label": {
             color: o.vars.palette.text.secondary
@@ -365,15 +404,16 @@ const a = (o) => ({
             backgroundColor: o.vars.palette.primary?.hover
           }
         },
+        /* State focus and active */
         "&.M4LRHFAutocomplete-isFocus": {
           "& .M4LRHFAutocomplete-label": {
-            color: o.vars.palette.primary?.active
+            color: o.vars.palette.primary.focusActive
           },
           "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
             transition: "all .1s ease",
-            background: o.vars.palette.primary.activeOpacity,
+            background: o.vars.palette.primary.opacity,
             border: "2px solid",
-            borderColor: o.vars.palette.primary?.active,
+            borderColor: o.vars.palette.primary.focusActive,
             boxShadow: `0px 1px 8px ${e(
               o.colorSchemes.finalTheme.palette.primary.main,
               0.32
@@ -383,9 +423,10 @@ const a = (o) => ({
             color: o.vars.palette.text.primary
           },
           "& .M4LIcon-icon": {
-            backgroundColor: o.vars.palette.primary?.active
+            backgroundColor: o.vars.palette.primary.focusActive
           }
         },
+        /* State error */
         "&.M4LRHFAutocomplete-variantError": {
           "& .M4LRHFAutocomplete-label": {
             color: o.vars.palette.error.main
@@ -411,13 +452,14 @@ const a = (o) => ({
             }
           }
         },
+        /* State disabled */
         "&.M4LRHFAutocomplete-isDisabled": {
           "& .M4LRHFAutocomplete-label": {
             color: o.vars.palette.text.disabled
           },
           "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
             border: "1px solid",
-            borderColor: o.vars.palette.border.disabled,
+            borderColor: o.vars.palette?.border.disabled,
             backgroundColor: o.vars.palette.background?.default,
             boxShadow: "none"
           },
@@ -428,9 +470,9 @@ const a = (o) => ({
             backgroundColor: o.vars.palette.text.disabled
           }
         },
+        /* Sizes */
         "&.M4LRHFAutocomplete-sizeSmall": {
-          [`& .M4LRHFAutocomplete-skeleton,
-                          & .MuiAutocomplete-root`]: {
+          "& .M4LRHFAutocomplete-skeleton,\n                          & .MuiAutocomplete-root": {
             "& .M4LImage-root": {
               width: "24px",
               height: "24px",
@@ -441,8 +483,7 @@ const a = (o) => ({
           }
         },
         "&.M4LRHFAutocomplete-sizeMedium": {
-          [`& .M4LRHFAutocomplete-skeleton,
-                          & .MuiAutocomplete-root`]: {
+          "& .M4LRHFAutocomplete-skeleton,\n                          & .MuiAutocomplete-root": {
             "& .M4LImage-root": {
               width: "28px",
               height: "28px",
@@ -452,6 +493,7 @@ const a = (o) => ({
             minHeight: "36px"
           }
         },
+        // variant image defined
         "&.M4LRHFAutocomplete-imageWidthDefined": {
           "& .M4LImage-root": {
             "& .M4LImage-img": {
@@ -459,13 +501,17 @@ const a = (o) => ({
             }
           }
         }
+        // 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",
@@ -484,23 +530,28 @@ const a = (o) => ({
             }
           }
         },
+        // Estilos generales para withImage
         "& .M4LRHFAutocomplete-withImage": {
           display: "flex",
           gap: "8px",
+          // Estados por evento de usuario
           "&:hover": {
             color: o.vars.palette.text.primary,
-            backgroundColor: o.vars.palette.primary.activeOpacity
+            backgroundColor: o.vars.palette.primary.opacity
           },
           "& .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",
@@ -516,12 +567,15 @@ const a = (o) => ({
             }
           }
         },
+        // 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",
@@ -536,6 +590,7 @@ const a = (o) => ({
             }
           }
         },
+        // variación de ancho de imagen definido
         "&.M4LRHFAutocomplete-imageWidthDefined": {
           "& .M4LImage-img": {
             minWidth: "24px",
@@ -546,7 +601,7 @@ const a = (o) => ({
           boxShadow: o.customShadows?.z2,
           "& .MuiAutocomplete-listbox .MuiAutocomplete-option:hover": {
             color: o.vars.palette.text.primary,
-            backgroundColor: o.vars.palette.primary.activeOpacity
+            backgroundColor: o.vars.palette.primary.opacity
           }
         }
       }
@@ -556,6 +611,7 @@ const a = (o) => ({
     styleOverrides: {
       "&.M4LRHFAutocomplete-sizeSmall": {
         height: "18px",
+        // important debido a que MUI agrega media queries directamente al elemento.
         minHeight: "18px !important",
         "& .MuiChip-deleteIcon": {
           fontSize: "16px"
@@ -566,6 +622,7 @@ const a = (o) => ({
       },
       "&.M4LRHFAutocomplete-sizeMedium": {
         height: "24px",
+        // important debido a que MUI agrega media queries directamente al elemento.
         minHeight: "24px !important",
         "& .MuiChip-deleteIcon": {
           fontSize: "20px"
@@ -576,7 +633,7 @@ const a = (o) => ({
       }
     }
   }
-}), d = (o) => ({
+}), u = (o) => ({
   M4LRHFAutocompleteAsync: {
     styleOverrides: {
       "&.M4LRHFAutocompleteAsync-root": {
@@ -585,7 +642,7 @@ const a = (o) => ({
       }
     }
   }
-}), u = (o) => ({
+}), d = (o) => ({
   M4LRHFDateTime: {
     styleOverrides: {
       "&.M4LRHFDateTime-root": {
@@ -631,6 +688,7 @@ const a = (o) => ({
             height: "36px"
           }
         },
+        /* General properties */
         "& .MuiFormControl-root": {
           "& .MuiInputBase-root": {
             padding: "0 4px 0 0",
@@ -685,6 +743,7 @@ const a = (o) => ({
             }
           }
         },
+        /* State hover */
         "&:hover": {
           "& .M4LTypography-root": {
             color: o.vars.palette.primary?.hover
@@ -699,22 +758,24 @@ const a = (o) => ({
             backgroundColor: o.vars.palette.primary?.hover
           }
         },
+        /* State focus and active */
         "&.M4LRHFDateTime-isFocus": {
           "& .M4LTypography-root": {
-            color: o.vars.palette.primary.active
+            color: o.vars.palette.primary.focusActive
           },
           "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
             transition: "all .1s ease",
             border: "2px solid",
-            borderColor: o.vars.palette.primary?.active
+            borderColor: o.vars.palette.primary.focusActive
           },
           "& .MuiInputBase-input": {
             color: o.vars.palette.text.primary
           },
           "& .M4LIcon-icon": {
-            backgroundColor: o.vars.palette.primary?.active
+            backgroundColor: o.vars.palette.primary.focusActive
           }
         },
+        /* State error */
         "&.M4LRHFTextField-variantError": {
           "& .M4LRHFTextField-label": {
             color: o.vars.palette.error.main
@@ -740,6 +801,7 @@ const a = (o) => ({
             }
           }
         },
+        /* State disabled */
         "&.M4LRHFTextField-isDisabled": {
           "& .M4LRHFTextField-label": {
             color: o.vars.palette.text.disabled
@@ -789,15 +851,15 @@ const a = (o) => ({
             inset: "0",
             alignItems: "center",
             justifyContent: "center",
-            background: o.vars.palette.background.main,
+            background: o.vars.palette.background.surface,
             "& > *": {
               width: "100%",
               height: "100%"
             },
             "&:hover": {
-              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,
               cursor: "pointer",
               "& .placeholder": {
                 zIndex: 9
@@ -836,6 +898,7 @@ const a = (o) => ({
                 gap: "0",
                 position: "relative",
                 overflow: "hidden",
+                // Icono de carga
                 "& .M4LRHFUploadImage-containerBodyImage": {
                   display: "flex",
                   justifyContent: "center",
@@ -885,6 +948,7 @@ const a = (o) => ({
             }
           }
         },
+        // Skeleton
         "& .M4LRHFUploadImage-skeleton": {
           maskPosition: "center!important",
           maskRepeat: "no-repeat!important",
@@ -896,6 +960,7 @@ const a = (o) => ({
           WebkitMask: "url('data:image/svg+xml;base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDcwIDcwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA3MCA3MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM2MzczODE7fQo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NSw4LjdjMS40LTEuNSwzLjQtMi4zLDUuNC0yLjNzMy45LDAuOCw1LjQsMi4zczIuNCwzLjUsMi41LDUuN2MwLDIuMi0wLjksNC4yLTIuNCw1LjdzLTMuNSwyLjMtNS41LDIuMgoJCWMtMi4xLDAuMS00LTAuNy01LjUtMi4yYy0xLjQtMS41LTIuMy0zLjUtMi40LTUuN0M0Mi42LDEyLjIsNDMuNSwxMC4yLDQ1LDguN3oiLz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02OC40LDYyLjFjLTAuMywwLjUtMC43LDAuOC0xLjIsMS4xcy0xLDAuNC0xLjYsMC40SDQuM2MtMC42LDAtMS4xLTAuMS0xLjYtMC40cy0wLjktMC42LTEuMi0xLjEKCQljLTAuMi0wLjUtMC40LTEtMC40LTEuNXMwLjEtMS4xLDAuNC0xLjVsMjMtMzYuNGMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNHMwLjksMC42LDEuMiwxLjEKCQlsMTEuNSwxOC4yYzAuMiwwLjMsMC41LDAuNSwwLjgsMC43czAuNiwwLjMsMSwwLjNjMC4zLDAsMC43LTAuMSwxLTAuM3MwLjYtMC40LDAuOC0wLjdsMy4xLTQuOWMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMQoJCXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNGMwLjUsMC4zLDAuOSwwLjYsMS4yLDEuMWwxNC42LDIzLjFjMC4zLDAuNSwwLjMsMSwwLjMsMS41UzY4LjcsNjEuNyw2OC40LDYyLjF6Ii8+CjwvZz4KPC9zdmc+Cg==')"
         }
       },
+      // Imagen cargada
       "&.M4LRHFUploadImage-hasFile": {
         "& .M4LRHFUploadImage-placeHolder": {
           opacity: "0",
@@ -915,6 +980,7 @@ const a = (o) => ({
           "&:hover": {
             opacity: 1
           },
+          // Comportamiento Hover imagen cargada
           "& .M4LRHFUploadImage-containerUploadBoddy": {
             "& .M4LRHFUploadImage-containerBodyImage": {
               opacity: "0"
@@ -983,12 +1049,18 @@ const a = (o) => ({
           gap: "4px",
           padding: "2px",
           border: "1.5px solid",
-          borderColor: o.vars.palette.border.primary,
+          borderColor: o.vars.palette?.border.default,
           borderRadius: "4px",
           width: "fit-content",
           "& .M4LRHFColorPicker-boxColor": {
             cursor: "pointer"
           },
+          /* '& .M4LIcon-root': {
+                          minHeight: '18px',
+                          minWidth: '18px',
+                          cursor: 'pointer',
+                          borderRadius: '4px',
+                      }, */
           "& .M4LIcon-root:hover": {
             background: o.vars.palette.background.hover
           }
@@ -1003,7 +1075,7 @@ const a = (o) => ({
           background: o.vars.palette.background.default,
           padding: "8px",
           border: "1px solid",
-          borderColor: o.vars.palette.border.secondary,
+          borderColor: o.vars.palette?.border.secondary,
           borderRadius: "4px",
           boxShadow: o.vars.customShadows.z4,
           test: "root",
@@ -1022,7 +1094,7 @@ const a = (o) => ({
               flexDirection: "column",
               gap: "8px",
               border: "1px solid",
-              borderColor: o.vars.palette.border.secondary,
+              borderColor: o.vars.palette?.border.secondary,
               borderRadius: "4px",
               backgroundColor: o.vars.palette.background.default,
               "& :nth-of-type(-n + 1)": {
@@ -1043,7 +1115,7 @@ const a = (o) => ({
                       display: "flex",
                       textAlign: "center !important",
                       border: "1px solid",
-                      borderColor: o.vars.palette.border.primary,
+                      borderColor: o.vars.palette?.border.default,
                       borderRadius: "2px",
                       background: "transparent",
                       minHeight: "24px",
@@ -1076,8 +1148,8 @@ export {
   l as M,
   a,
   p as b,
-  d as c,
-  u as d,
+  u as c,
+  d,
   s as e,
   c as f,
   n as g,

package/theme/overrides/MUIComponents/Avatar.d.ts

@@ -18,7 +18,7 @@ export default function Avatar(theme: Omit<Theme, 'palette' | 'applyStyles'> & C
                 '&:first-of-type': {
                     fontSize: number;
                     color: string;
-                    backgroundColor: string | undefined;
+                    backgroundColor: string;
                 };
             };
         };

package/theme/overrides/MUIComponents/Input.d.ts

@@ -1,5 +1,5 @@
 import { Theme, CssVarsTheme } from '@mui/material/styles';
-export default function Input(theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme): {
+export default function c(theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme): {
     MuiFormControl: {
         styleOverrides: {
             root: {

package/theme/overrides/MUIComponents/Progress.d.ts

@@ -10,7 +10,7 @@ export default function Progress(theme: Omit<Theme, "palette" | "applyStyles"> &
                 borderRadius: number;
             };
             colorPrimary: {
-                backgroundColor: string | undefined;
+                backgroundColor: string;
             };
             buffer: {
                 backgroundColor: string;

package/theme/overrides/MUIComponents/ToggleButton.d.ts

@@ -1,10 +1,10 @@
 import { Theme, CssVarsTheme } from '@mui/material/styles';
-import { ColorSchema } from '../../../types';
+import { ComponentPalletColor } from '../../../types';
 export default function ToggleButton(theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme): {
     MuiToggleButton: {
         variants: ({
             props: {
-                color: ColorSchema;
+                color: ComponentPalletColor;
             };
             style: {
                 '&:hover': {