@m4l/styles 6.4.0 → 6.4.1

package/theme/overrides/MUIComponents/CssBaseline.js

@@ -0,0 +1,46 @@
+function i(e) {
+  return {
+    MuiCssBaseline: {
+      styleOverrides: {
+        "*": {
+          margin: 0,
+          padding: 0,
+          boxSizing: "border-box"
+        },
+        html: {
+          width: "100%",
+          height: "100%",
+          WebkitOverflowScrolling: "touch"
+        },
+        body: {
+          width: "100%",
+          height: "100%"
+        },
+        "#root": {
+          width: "100%",
+          height: "100%"
+        },
+        input: {
+          "&[type=number]": {
+            MozAppearance: "textfield",
+            "&::-webkit-outer-spin-button": {
+              margin: 0,
+              WebkitAppearance: "none"
+            },
+            "&::-webkit-inner-spin-button": {
+              margin: 0,
+              WebkitAppearance: "none"
+            }
+          }
+        },
+        img: {
+          display: "block",
+          maxWidth: "100%"
+        }
+      }
+    }
+  };
+}
+export {
+  i as C
+};

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

@@ -0,0 +1,14 @@
+import { SvgIconProps } from '@mui/material';
+export declare function CloseIcon(props: SvgIconProps): import("react").JSX.Element;
+export declare function StarIcon(props: SvgIconProps): import("react").JSX.Element;
+export declare function InfoIcon(props: SvgIconProps): import("react").JSX.Element;
+export declare function WarningIcon(props: SvgIconProps): import("react").JSX.Element;
+export declare function SuccessIcon(props: SvgIconProps): import("react").JSX.Element;
+export declare function ErrorIcon(props: SvgIconProps): import("react").JSX.Element;
+export declare function CheckboxIcon(props: SvgIconProps): import("react").JSX.Element;
+export declare function CheckboxCheckedIcon(props: SvgIconProps): import("react").JSX.Element;
+export declare function CheckboxIndeterminateIcon(props: SvgIconProps): import("react").JSX.Element;
+export declare function InputSelectIcon(props: SvgIconProps): import("react").JSX.Element;
+export declare function TreeViewCollapseIcon(props: SvgIconProps): import("react").JSX.Element;
+export declare function TreeViewExpandIcon(props: SvgIconProps): import("react").JSX.Element;
+export declare function TreeViewEndIcon(props: SvgIconProps): import("react").JSX.Element;

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

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

package/theme/overrides/MUIComponents/DataGrid.js

@@ -0,0 +1,100 @@
+function o(r) {
+  return {
+    MuiDataGrid: {
+      styleOverrides: {
+        root: {
+          borderRadius: 0,
+          border: "1px solid transparent",
+          "& .MuiTablePagination-root": {
+            borderTop: 0
+          },
+          "& .MuiDataGrid-toolbarContainer": {
+            padding: r.spacing(2),
+            backgroundColor: r.vars.palette.background.surface,
+            "& .MuiButton-root": {
+              marginRight: r.spacing(1.5),
+              color: r.vars.palette.text.primary,
+              "&:hover": {
+                backgroundColor: r.vars.palette.action.hover
+              }
+            }
+          },
+          "& .MuiDataGrid-cell, .MuiDataGrid-columnsContainer": {
+            borderBottom: `1px solid ${r.vars.palette.divider}`
+          },
+          "& .MuiDataGrid-columnSeparator": {
+            color: r.vars.palette.divider
+          },
+          '& .MuiDataGrid-columnHeader[data-field="__check__"]': {
+            padding: 0
+          }
+        }
+      }
+    },
+    MuiGridMenu: {
+      styleOverrides: {
+        root: {
+          "& .MuiDataGrid-gridMenuList": {
+            boxShadow: r.customShadows?.z4,
+            borderRadius: r.shape.borderRadius
+          },
+          "& .MuiMenuItem-root": {
+            ...r.colorSchemes.finalTheme.typography.body
+          }
+        }
+      }
+    },
+    MuiGridFilterForm: {
+      styleOverrides: {
+        root: {
+          padding: r.spacing(1.5, 0),
+          "& .MuiFormControl-root": {
+            margin: r.spacing(0, 0.5)
+          },
+          "& .MuiInput-root": {
+            marginTop: r.spacing(3),
+            "&::before, &::after": {
+              display: "none"
+            },
+            "& .MuiNativeSelect-select, .MuiInput-input": {
+              ...r.colorSchemes.finalTheme.typography.body,
+              padding: r.spacing(0.75, 1),
+              borderRadius: r.shape.borderRadius,
+              backgroundColor: r.vars.palette.background.surface
+            },
+            "& .MuiSvgIcon-root": {
+              right: 4
+            }
+          }
+        }
+      }
+    },
+    MuiGridPanelFooter: {
+      styleOverrides: {
+        root: {
+          padding: r.spacing(2),
+          justifyContent: "flex-end",
+          "& .MuiButton-root": {
+            "&:first-of-type": {
+              marginRight: r.spacing(1.5),
+              color: r.vars.palette.text.primary,
+              "&:hover": {
+                backgroundColor: r.vars.palette.action.hover
+              }
+            },
+            "&:last-of-type": {
+              color: r.vars.palette.common.white,
+              backgroundColor: r.vars.palette.primary.main,
+              "&:hover": {
+                backgroundColor: r.vars.palette.primary.dark
+              }
+            }
+          }
+        }
+      }
+    }
+  };
+}
+export {
+  o as D
+};

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

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

package/theme/overrides/MUIComponents/Drawer.js

@@ -0,0 +1,44 @@
+import { alpha as o } from "@mui/material";
+function t(e) {
+  const r = e.colorSchemes.finalTheme.palette.mode === "light";
+  return {
+    MuiDrawer: {
+      styleOverrides: {
+        root: {
+          "&.M4LSideBar-drawer": {
+            test: "root",
+            "& .MuiPaper-root": {
+              background: e.vars.palette.background.surface,
+              display: "flex",
+              flexDirection: "row"
+            }
+            /*  "& .MuiPaper-root": {
+                                borderRadius: "4px",
+                                backgroundColor: theme.vars.palette.primary.primaryOpacity,
+                                padding: "8px",
+                            }, */
+          }
+        },
+        modal: {
+          '&[role="presentation"]': {
+            "& .MuiDrawer-paperAnchorLeft": {
+              boxShadow: `8px 24px 24px 12px ${o(
+                e.colorSchemes.finalTheme.palette.grey[900],
+                r ? 0.16 : 0.48
+              )}`
+            },
+            "& .MuiDrawer-paperAnchorRight": {
+              boxShadow: `-8px 24px 24px 12px ${o(
+                e.colorSchemes.finalTheme.palette.grey[900],
+                r ? 0.16 : 0.48
+              )}`
+            }
+          }
+        }
+      }
+    }
+  };
+}
+export {
+  t as D
+};

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

@@ -1,5 +1,5 @@
 import { Theme, CssVarsTheme } from '@mui/material/styles';
-export default function Fab(theme: Omit<Theme, "palette" | "applyStyles"> & CssVarsTheme): {
+export default function Fab(theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme): {
     MuiFab: {
         defaultProps: {
             color: string;

package/theme/overrides/MUIComponents/Fab.js

@@ -0,0 +1,38 @@
+function r(o) {
+  return {
+    MuiFab: {
+      defaultProps: {
+        color: "primary"
+      },
+      styleOverrides: {
+        root: {
+          boxShadow: o.customShadows?.z4,
+          "&:hover": {
+            boxShadow: "none",
+            backgroundColor: o.colorSchemes.finalTheme.palette.grey[400]
+          }
+        },
+        primary: {
+          boxShadow: o.customShadows?.primary,
+          "&:hover": {
+            backgroundColor: o.vars.palette.primary.dark
+          }
+        },
+        secondary: {
+          boxShadow: o.customShadows?.secondary,
+          "&:hover": {
+            backgroundColor: o.vars.palette.secondary.dark
+          }
+        },
+        extended: {
+          "& svg": {
+            marginRight: o.spacing(1)
+          }
+        }
+      }
+    }
+  };
+}
+export {
+  r as F
+};

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

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

package/theme/overrides/MUIComponents/IconButton.js

@@ -0,0 +1,33 @@
+function i(t) {
+  return {
+    MuiIconButton: {
+      // defaultProps: {
+      //   color: theme.vars.palette.text.primary,
+      // },
+      styleOverrides: {
+        root: {
+          "&.MuiIconButton-sizeSmall": {
+            height: t.spacing(3),
+            width: t.spacing(3),
+            margin: 0,
+            padding: 0,
+            " > svg": {
+              height: 20,
+              width: 20
+            },
+            "& .MuiBox-root": {
+              height: 20,
+              width: 20
+            }
+          }
+        }
+        // colorDefault: {
+        //   color: theme.vars.palette.text.primary,
+        // }
+      }
+    }
+  };
+}
+export {
+  i as I
+};

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

@@ -22,7 +22,7 @@ export default function c(theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVar
                         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;
@@ -397,7 +397,7 @@ export default function c(theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVar
                 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;
@@ -908,7 +908,7 @@ export default function c(theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVar
                         borderColor: 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;
@@ -1283,7 +1283,7 @@ export default function c(theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVar
                 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/MUIComponents/Input.js

@@ -0,0 +1,99 @@
+function r(o) {
+  return {
+    MuiFormControl: {
+      styleOverrides: {
+        root: {
+          height: "28px",
+          [o.breakpoints.down("sm")]: {
+            height: 32,
+            minHeight: 32
+          }
+        }
+      }
+    },
+    MuiInputBase: {
+      styleOverrides: {
+        root: {
+          height: "auto",
+          backgroundColor: o.vars.palette.background?.default,
+          ...o.colorSchemes.finalTheme.typography.body2,
+          borderRadius: "2px",
+          padding: "4px",
+          paddingBottom: "0px",
+          "&.Mui-disabled": {
+            "& svg": { color: o.vars.palette.text.disabled }
+          }
+        },
+        input: {
+          padding: "0",
+          "&::placeholder": {
+            opacity: 1,
+            color: o.vars.palette.text.disabled
+          }
+        }
+      }
+    },
+    /* Style input outline */
+    MuiInput: {
+      styleOverrides: {
+        underline: {
+          "&:before": {
+            borderBottomColor: o.vars.palette?.border?.default
+          }
+        }
+      }
+    },
+    MuiFilledInput: {
+      styleOverrides: {
+        root: {
+          backgroundColor: o.vars.palette?.border?.default,
+          "&:hover": {
+            backgroundColor: o.vars.palette?.border?.default
+          },
+          "&.Mui-focused": {
+            backgroundColor: o.vars.palette.action.focus
+          },
+          "&.Mui-disabled": {
+            backgroundColor: o.vars.palette.action.disabledBackground
+          }
+        },
+        underline: {
+          "&:before": {
+            borderBottomColor: o.vars.palette?.border?.default
+          }
+        }
+      }
+    },
+    /* Estilos variante outlined */
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: {
+          ...o.colorSchemes.finalTheme.typography.body2,
+          color: o.vars.palette.text.primary,
+          "& > input": {
+            padding: o.spacing(1.5, 1.5)
+          },
+          "& .MuiOutlinedInput-notchedOutline": {
+            borderColor: o.vars.palette?.border?.default,
+            fontSize: "0.875rem",
+            height: "auto",
+            minHeight: "24px",
+            padding: "0px",
+            [o.breakpoints.down("sm")]: {
+              height: "auto",
+              minHeight: "32px"
+            }
+          },
+          "&.Mui-disabled": {
+            "& .MuiOutlinedInput-notchedOutline": {
+              borderColor: o.vars.palette.action.disabledBackground
+            }
+          }
+        }
+      }
+    }
+  };
+}
+export {
+  r as c
+};

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

@@ -1,5 +1,5 @@
 import { Theme, CssVarsTheme } from '@mui/material/styles';
-export default function InputLabel(_theme: Omit<Theme, "palette" | "applyStyles"> & CssVarsTheme): {
+export default function InputLabel(_theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme): {
     MuiInputLabel: {
         styleOverrides: {
             shrink: {

package/theme/overrides/MUIComponents/InputLabel.js

@@ -0,0 +1,18 @@
+function e(t) {
+  return {
+    MuiInputLabel: {
+      styleOverrides: {
+        shrink: {
+          transform: "translate(14px, -9px) scale(0.75)!important"
+        },
+        outlined: {
+          transform: "translate(14px, 12px) scale(1)",
+          fontSize: 12
+        }
+      }
+    }
+  };
+}
+export {
+  e as I
+};

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

@@ -1,5 +1,5 @@
 import { Theme, CssVarsTheme } from '@mui/material/styles';
-export default function Link(theme: Omit<Theme, "palette" | "applyStyles"> & CssVarsTheme): {
+export default function Link(theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme): {
     MuiLink: {
         defaultProps: {
             underline: string;

package/theme/overrides/MUIComponents/Link.js

@@ -0,0 +1,19 @@
+function r(e) {
+  return {
+    MuiLink: {
+      defaultProps: {
+        underline: "hover"
+      },
+      styleOverrides: {
+        root: {
+          "&.MuiLink-underlineHover": {
+            textDecorationColor: e.vars.palette.primary.main
+          }
+        }
+      }
+    }
+  };
+}
+export {
+  r as L
+};

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

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

package/theme/overrides/MUIComponents/List.js

@@ -0,0 +1,36 @@
+function t(i) {
+  return {
+    MuiListItemIcon: {
+      styleOverrides: {
+        root: {
+          color: "inherit",
+          minWidth: "auto",
+          marginRight: i.spacing(2)
+        }
+      }
+    },
+    MuiListItemAvatar: {
+      styleOverrides: {
+        root: {
+          minWidth: "auto",
+          marginRight: i.spacing(2)
+        }
+      }
+    },
+    MuiListItemText: {
+      styleOverrides: {
+        root: {
+          marginTop: 0,
+          marginBottom: 0
+        },
+        multiline: {
+          marginTop: 0,
+          marginBottom: 0
+        }
+      }
+    }
+  };
+}
+export {
+  t as L
+};

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

@@ -1,5 +1,5 @@
 import { Theme, CssVarsTheme } from '@mui/material/styles';
-export default function LoadingButton(theme: Omit<Theme, "palette" | "applyStyles"> & CssVarsTheme): {
+export default function LoadingButton(theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme): {
     MuiLoadingButton: {
         styleOverrides: {
             root: {
@@ -7,7 +7,7 @@ export default function LoadingButton(theme: Omit<Theme, "palette" | "applyStyle
                     '& .MuiCircularProgress-root': {
                         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;
@@ -383,7 +383,7 @@ export default function LoadingButton(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/MUIComponents/LoadingButton.js

@@ -0,0 +1,27 @@
+function o(t) {
+  return {
+    MuiLoadingButton: {
+      styleOverrides: {
+        root: {
+          "&.MuiLoadingButton-root": {
+            ...t.colorSchemes.finalTheme.typography.subtitle2,
+            "& .MuiCircularProgress-root": {
+              color: t.vars.palette.primary.main
+            }
+          },
+          "&.MuiButton-text": {
+            "& .MuiLoadingButton-startIconPendingStart": {
+              marginLeft: 0
+            },
+            "& .MuiLoadingButton-endIconPendingEnd": {
+              marginRight: 0
+            }
+          }
+        }
+      }
+    }
+  };
+}
+export {
+  o as L
+};

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

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

package/theme/overrides/MUIComponents/Menu.js

@@ -0,0 +1,20 @@
+function r(e) {
+  return {
+    MuiMenuItem: {
+      styleOverrides: {
+        root: {
+          borderRadius: "4px",
+          "&.Mui-selected": {
+            backgroundColor: e.vars.palette.action.selected,
+            "&:hover": {
+              backgroundColor: e.vars.palette.action.hover
+            }
+          }
+        }
+      }
+    }
+  };
+}
+export {
+  r as M
+};

package/theme/overrides/MUIComponents/Pagination.js

@@ -0,0 +1,38 @@
+import { alpha as e } from "@mui/material/styles";
+function a(r) {
+  return {
+    MuiPaginationItem: {
+      styleOverrides: {
+        root: {
+          "&.Mui-selected": {
+            fontWeight: r.typography.fontWeightBold
+          }
+        },
+        textPrimary: {
+          "&.Mui-selected": {
+            color: r.vars.palette.primary.main,
+            backgroundColor: e(r.colorSchemes.finalTheme.palette.primary.main, 0.08),
+            "&:hover, &.Mui-focusVisible": {
+              backgroundColor: `${e(
+                r.colorSchemes.finalTheme.palette.primary.main,
+                0.24
+              )} !important`
+            }
+          }
+        },
+        outlined: {
+          border: `1px solid ${r.vars.palette?.border.default}`
+        },
+        outlinedPrimary: {
+          "&.Mui-selected": {
+            backgroundColor: e(r.colorSchemes.finalTheme.palette.primary.main, 0.08),
+            border: `1px solid ${e(r.colorSchemes.finalTheme.palette.primary.main, 0.24)}`
+          }
+        }
+      }
+    }
+  };
+}
+export {
+  a as P
+};