@m4l/styles 6.4.0 → 6.4.1

package/theme/overrides/M4LExtendedComponents/M4LoadingButton.js

@@ -0,0 +1,243 @@
+const r = (o) => ({
+  M4LLoadingButton: {
+    styleOverrides: {
+      "&.M4LLoadingButton-root": {
+        /* Root properties */
+        width: "auto",
+        display: "flex",
+        justifyContent: "center",
+        height: "24px",
+        minHeight: "24px",
+        [o.breakpoints.down("md")]: {
+          height: "36px",
+          minHeight: "36px"
+        },
+        /* General properties */
+        "& .MuiButtonBase-root.MuiLoadingButton-loading": {
+          "& .M4LTypography-root": {
+            opacity: "0"
+          }
+        },
+        "& .MuiCircularProgress-root": {
+          color: `${o.vars.palette.text.primary}!important`
+        },
+        "& .M4LLoadingButton-skeleton ": {
+          height: "100%!important",
+          borderRadius: "4px"
+        },
+        "& .MuiButtonBase-root": {
+          display: "flex",
+          textTransform: "none",
+          gap: "8px",
+          transition: "all .5s ease",
+          borderRadius: "4px",
+          border: "1px solid transparent",
+          ...o.colorSchemes.finalTheme.typography.action,
+          "& .M4LIcon-icon": {
+            transition: "all .5s ease"
+          },
+          "& .MuiButton-startIcon, & .MuiButton-endIcon": {
+            margin: "0px"
+          },
+          "&::before": {
+            inset: "0",
+            border: "1px solid",
+            borderColor: o.vars.palette.primary.focusActive,
+            borderRadius: "4px",
+            transform: "scale(1.07, 1.36)",
+            position: "absolute",
+            boxSizing: "border-box"
+          }
+        },
+        "&.M4LLoadingButton-isDisabled": {
+          "& .MuiButtonBase-root": {
+            color: `${o.vars.palette.text.disabled}!important`,
+            "& .M4LIcon-icon": {
+              backgroundColor: `${o.vars.palette.text.disabled}!important`
+            }
+          },
+          // Disabled condición de variante contained
+          "&.M4LLoadingButton-variantContained": {
+            "& .MuiButtonBase-root": {
+              color: o.vars.palette.text.disabled,
+              "& .M4LIcon-icon": {
+                backgroundColor: o.vars.palette.text.disabled
+              },
+              "&:hover": {
+                backgroundColor: o.vars.palette.background?.default,
+                color: o.vars.palette.text.disabled,
+                "& .M4LIcon-icon": {
+                  backgroundColor: o.vars.palette.text.disabled,
+                  color: o.vars.palette.text.disabled
+                }
+              },
+              "&:active": {
+                backgroundColor: o.vars.palette.background?.default,
+                color: o.vars.palette.text.disabled,
+                "& .M4LIcon-icon": {
+                  backgroundColor: o.vars.palette.text.disabled,
+                  color: o.vars.palette.text.disabled
+                }
+              },
+              "&.Mui-focusVisible": {
+                backgroundColor: o.vars.palette.background?.default,
+                color: o.vars.palette.text.disabled,
+                "& .M4LIcon-icon": {
+                  backgroundColor: o.vars.palette.text.disabled,
+                  color: o.vars.palette.text.disabled
+                },
+                "&::before": {
+                  content: "none"
+                }
+              }
+            }
+          }
+        },
+        /* Sizes */
+        "&.M4LLoadingButton-sizeSmall": {
+          height: "24px",
+          "& .MuiButtonBase-root": {
+            padding: "4px 12px"
+          },
+          "&.M4LLoadingButton-skeleton": {
+            height: "24px"
+          }
+        },
+        "&.M4LLoadingButton-sizeMedium": {
+          height: "38px",
+          "& .MuiButtonBase-root": {
+            padding: "8px 16px"
+          },
+          "&.M4LLoadingButton-skeleton": {
+            height: "38px"
+          }
+        },
+        /* Variant contained */
+        "&.M4LLoadingButton-variantContained": {
+          "& .MuiCircularProgress-root": {
+            color: "#fff!important"
+          },
+          "& .M4LTypography-root": {
+            "& .MuiTypography-root": {
+              color: o.vars.palette.text?.primary
+            }
+          },
+          "& .MuiButtonBase-root": {
+            backgroundColor: o.vars.palette.primary.focusActive,
+            color: o.vars.palette.common?.white,
+            boxShadow: o.customShadows?.primary,
+            position: "relative",
+            "& .M4LTypography-root": {
+              "MuiTypography-root": {
+                color: "#fff"
+              }
+            },
+            "& .M4LIcon-icon": {
+              backgroundColor: o.vars.palette.text.secondary
+            },
+            "&:hover": {
+              backgroundColor: o.vars.palette.primary?.hover,
+              "& .M4LIcon-icon": {
+                backgroundColor: o.vars.palette.common?.white
+              },
+              "& .MuiTypography-root": {
+                color: "#fff"
+              }
+            },
+            "&: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.focusActive,
+              color: o.vars.palette.common?.white,
+              "& .M4LIcon-icon": {
+                backgroundColor: o.vars.palette.common?.white
+              },
+              "&::before": {
+                content: "''"
+              }
+            }
+          }
+        },
+        /* Variant outlined */
+        "&.M4LLoadingButton-variantOutlined": {
+          "& .MuiButtonBase-root": {
+            border: "1px solid",
+            borderColor: o.vars.palette.text.secondary,
+            color: o.vars.palette.text.secondary,
+            "& .M4LIcon-icon": {
+              backgroundColor: o.vars.palette.text.secondary
+            },
+            "&:hover": {
+              borderColor: o.vars.palette.primary?.hover,
+              color: o.vars.palette.primary?.hover,
+              backgroundColor: o.vars.palette.primary.opacity,
+              "& .M4LIcon-icon": {
+                backgroundColor: o.vars.palette.primary?.hover
+              }
+            },
+            "&:active": {
+              borderColor: o.vars.palette.primary.focusActive,
+              color: o.vars.palette.primary.focusActive,
+              backgroundColor: "transparent",
+              "& .M4LIcon-icon": {
+                backgroundColor: o.vars.palette.primary.focusActive
+              }
+            },
+            "&.Mui-focusVisible": {
+              borderColor: o.vars.palette.primary.focusActive,
+              color: o.vars.palette.primary.focusActive,
+              backgroundColor: "transparent",
+              "& .M4LIcon-icon": {
+                backgroundColor: o.vars.palette.primary.focusActive
+              },
+              "&::before": {
+                content: "''"
+              }
+            }
+          }
+        },
+        /* Variant text */
+        "&.M4LLoadingButton-variantText": {
+          "& .MuiButtonBase-root": {
+            color: o.vars.palette.text.secondary,
+            "& .M4LIcon-icon": {
+              backgroundColor: o.vars.palette.text.secondary
+            },
+            "&:hover": {
+              backgroundColor: o.vars.palette.primary.opacity,
+              color: o.vars.palette.primary?.hover,
+              "& .M4LIcon-icon": {
+                backgroundColor: o.vars.palette.primary?.hover
+              }
+            },
+            "&:active": {
+              backgroundColor: "transparent",
+              color: o.vars.palette.primary.focusActive,
+              "& .M4LIcon-icon": {
+                backgroundColor: o.vars.palette.primary.focusActive
+              }
+            },
+            "&.Mui-focusVisible": {
+              backgroundColor: "transparent",
+              color: o.vars.palette.primary.focusActive,
+              "& .M4LIcon-icon": {
+                backgroundColor: o.vars.palette.primary.focusActive
+              },
+              "&:before": {
+                content: "''"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+});
+export {
+  r as M
+};

package/theme/overrides/M4LExtendedComponents/M4LoadingError.d.ts

@@ -1,5 +1,5 @@
 import { Theme, CssVarsTheme } from '@mui/material/styles';
-export declare const M4LoadingError: (theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme) => {
+export declare const M4LoadingError: (theme: Omit<Theme, "palette" | "applyStyles"> & CssVarsTheme) => {
     M4LoadingError: {
         styleOverrides: {
             '&.M4LoadingError-root': {
@@ -36,7 +36,7 @@ export declare const M4LoadingError: (theme: Omit<Theme, 'palette' | 'applyStyle
                     '& .M4LoadingError-loadingErrorTitle': {
                         [x: string]: unknown;
                         color: string;
-                        '@font-face'?: import("@mui/material/styles/createTypography").Fontface | import("@mui/material/styles/createTypography").Fontface[] | undefined;
+                        '@font-face'?: import('@mui/material/styles/createTypography').Fontface | import('@mui/material/styles/createTypography').Fontface[];
                         accentColor?: import("csstype").Property.AccentColor | undefined;
                         alignContent?: import("csstype").Property.AlignContent | undefined;
                         alignItems?: import("csstype").Property.AlignItems | undefined;
@@ -411,7 +411,7 @@ export declare const M4LoadingError: (theme: Omit<Theme, 'palette' | 'applyStyle
                         writingMode?: import("csstype").Property.WritingMode | undefined;
                         zIndex?: import("csstype").Property.ZIndex | undefined;
                         zoom?: import("csstype").Property.Zoom | undefined;
-                        all?: import("csstype").Globals | undefined;
+                        all?: import("csstype").Property.All | undefined;
                         animation?: import("csstype").Property.Animation<string & {}> | undefined;
                         animationRange?: import("csstype").Property.AnimationRange<string | number> | undefined;
                         background?: import("csstype").Property.Background<string | number> | undefined;

package/theme/overrides/M4LExtendedComponents/M4LoadingError.js

@@ -0,0 +1,71 @@
+const o = (r) => ({
+  M4LoadingError: {
+    styleOverrides: {
+      "&.M4LoadingError-root": {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        position: "relative",
+        inset: "0",
+        overflow: "hidden",
+        width: "100%",
+        height: "100%",
+        "& .M4LoadingError-loadingError": {
+          display: "flex",
+          padding: "12px",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+          gap: "12px",
+          position: "absolute",
+          inset: "0",
+          // Contenedor de ilustracion
+          "& .M4LIcon-root": {
+            display: "flex",
+            padding: "12px",
+            // Ilustración
+            " .M4LIcon-icon": {
+              width: "100px",
+              height: "100px",
+              backgroundColor: r.vars.palette.skeleton.default
+            }
+          },
+          "& .M4LoadingError-titleDescription": {
+            textAlign: "center"
+          },
+          // Título
+          "& .M4LoadingError-loadingErrorTitle": {
+            ...r.colorSchemes.finalTheme.typography.h5,
+            color: r.vars.palette.text.primary,
+            [r.breakpoints.down("sm")]: {
+              ...r.colorSchemes.finalTheme.typography.h5
+            }
+          },
+          // Subtítulo (explicaciòn de resultado)
+          "& .M4LoadingError-loadingErrorDescription": {
+            ...r.colorSchemes.finalTheme.typography.paragraphDens,
+            color: r.vars.palette.text.secondary
+          },
+          // Linea divisora
+          "& .M4LoadingError-loadingErrorDivider": {
+            width: "208px",
+            height: "1px",
+            background: r.vars.palette?.border.default
+          },
+          // pasos de acción
+          "& .MuiTypography-paragraph": {
+            ...r.colorSchemes.finalTheme.typography.paragraph,
+            color: r.vars.palette.text.primary
+          },
+          "& .MuiButtonBase-root": {
+            //marginTop: '4px',
+          }
+        }
+      }
+    }
+  }
+});
+export {
+  o as M
+};

package/theme/overrides/M4LRHFComponents/M4LRHFAutocomplete.d.ts

@@ -1,5 +1,5 @@
 import { Theme, CssVarsTheme } from '@mui/material/styles';
-export declare const M4LRHFAutocomplete: (theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme) => {
+export declare const M4LRHFAutocomplete: (theme: Omit<Theme, "palette" | "applyStyles"> & CssVarsTheme) => {
     M4LRHFAutocomplete: {
         styleOverrides: {
             '&.M4LRHFAutocomplete-root': {