@m4l/styles 7.1.13 → 7.1.14-beta.4

package/theme/overrides/M4LExtendedComponents/M4LoadingButton.js

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

package/theme/overrides/M4LExtendedComponents/M4LoadingError.js

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