@m4l/styles 6.4.0 → 6.4.1

package/theme/overrides/MUIComponents/Paper.js

@@ -0,0 +1,71 @@
+function r(o) {
+  return {
+    MuiPaper: {
+      defaultProps: {
+        elevation: 0
+      },
+      variants: [
+        {
+          props: { variant: "outlined" },
+          style: { borderColor: o.vars.palette?.border.default }
+        }
+      ],
+      styleOverrides: {
+        root: {
+          backgroundImage: "none",
+          backgroundColor: o.vars.palette.background.default,
+          borderRadius: "2px",
+          /* Stack */
+          "& .MuiStack-root .MuiMenuItem-root": {
+            color: o.vars.palette.text.primary,
+            transition: "all .5s",
+            borderRadius: "4px",
+            ...o.colorSchemes.finalTheme.typography.action
+          },
+          "& .MuiStack-root .MuiMenuItem-root:hover": {
+            color: o.vars.palette.primary?.hover,
+            transition: "all .5s",
+            backgroundColor: o.vars.palette.primary.opacity
+          },
+          "& .MuiStack-root .MuiMenuItem-root.Mui-selected": {
+            color: o.vars.palette.primary.focusActive,
+            transition: "all .5s",
+            backgroundColor: o.vars.palette.primary.opacity
+          },
+          "& .MuiStack-root .MuiMenuItem-root:focus": {
+            color: o.vars.palette.primary.focusActive,
+            transition: "all .5s",
+            backgroundColor: o.vars.palette.background.default,
+            boxShadow: `0 0 0 1px ${o.vars.palette.primary.focusActive}`
+          },
+          /* Autocomplete Listbox */
+          "& .MuiAutocomplete-listbox .MuiAutocomplete-option": {
+            color: o.vars.palette.text.primary,
+            transition: "all .5s",
+            borderRadius: "4px",
+            ...o.colorSchemes.finalTheme.typography.action
+          },
+          "& .MuiAutocomplete-listbox .MuiAutocomplete-option:hover": {
+            color: o.vars.palette.primary?.hover,
+            transition: "all .5s",
+            backgroundColor: o.vars.palette.primary.opacity
+          },
+          "& .MuiAutocomplete-listbox .MuiAutocomplete-option.Mui-selected": {
+            color: o.vars.palette.primary.focusActive,
+            transition: "all .5s",
+            backgroundColor: o.vars.palette.primary.opacity
+          },
+          "& .MuiAutocomplete-listbox .MuiAutocomplete-option:active": {
+            color: o.vars.palette.primary.focusActive,
+            transition: "all .5s",
+            backgroundColor: o.vars.palette.background.default,
+            boxShadow: `0 0 0 1px ${o.vars.palette.primary.focusActive}`
+          }
+        }
+      }
+    }
+  };
+}
+export {
+  r as P
+};

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

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

package/theme/overrides/MUIComponents/Popover.js

@@ -0,0 +1,12 @@
+function r(e) {
+  return {
+    MuiPopover: {
+      styleOverrides: {
+        paper: {}
+      }
+    }
+  };
+}
+export {
+  r as P
+};

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

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

package/theme/overrides/MUIComponents/Progress.js

@@ -0,0 +1,25 @@
+function e(r) {
+  const o = r.colorSchemes.finalTheme.palette.mode === "light";
+  return {
+    MuiLinearProgress: {
+      styleOverrides: {
+        root: {
+          borderRadius: 4,
+          overflow: "hidden"
+        },
+        bar: {
+          borderRadius: 4
+        },
+        colorPrimary: {
+          backgroundColor: r.vars.palette.primary[o ? "light" : "dark"]
+        },
+        buffer: {
+          backgroundColor: "transparent"
+        }
+      }
+    }
+  };
+}
+export {
+  e as P
+};

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

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

package/theme/overrides/MUIComponents/Radio.js

@@ -0,0 +1,20 @@
+function o(i) {
+  return {
+    MuiRadio: {
+      styleOverrides: {
+        root: {
+          padding: i.spacing(1),
+          svg: {
+            fontSize: 24,
+            "&[font-size=small]": {
+              fontSize: 20
+            }
+          }
+        }
+      }
+    }
+  };
+}
+export {
+  o as R
+};

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

@@ -0,0 +1,31 @@
+import { Theme, CssVarsTheme } from '@mui/material/styles';
+export default function Rating(theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme): {
+    MuiRating: {
+        defaultProps: {
+            emptyIcon: import("react").JSX.Element;
+            icon: import("react").JSX.Element;
+        };
+        styleOverrides: {
+            root: {
+                '&.Mui-disabled': {
+                    opacity: number;
+                };
+            };
+            iconEmpty: {
+                color: string;
+            };
+            sizeSmall: {
+                '& svg': {
+                    width: number;
+                    height: number;
+                };
+            };
+            sizeLarge: {
+                '& svg': {
+                    width: number;
+                    height: number;
+                };
+            };
+        };
+    };
+};

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

@@ -0,0 +1,8 @@
+import { InputSelectIcon } from './CustomIcons';
+export default function Select(): {
+    MuiSelect: {
+        defaultProps: {
+            IconComponent: typeof InputSelectIcon;
+        };
+    };
+};

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

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

package/theme/overrides/MUIComponents/Skeleton.js

@@ -0,0 +1,17 @@
+function o(e) {
+  return {
+    MuiSkeleton: {
+      defaultProps: {
+        animation: "wave"
+      },
+      styleOverrides: {
+        root: {
+          backgroundColor: e.vars.palette.divider
+        }
+      }
+    }
+  };
+}
+export {
+  o as S
+};

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

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

package/theme/overrides/MUIComponents/Slider.js

@@ -0,0 +1,28 @@
+function a(e) {
+  const l = e.colorSchemes.finalTheme.palette.mode === "light";
+  return {
+    MuiSlider: {
+      defaultProps: {
+        size: "small"
+      },
+      styleOverrides: {
+        root: {
+          "&.Mui-disabled": {
+            color: e.vars.palette.action.disabled
+          }
+        },
+        markLabel: {
+          fontSize: 13,
+          color: e.vars.palette.text.disabled
+        },
+        valueLabel: {
+          borderRadius: 8,
+          backgroundColor: e.vars.palette.grey[l ? 800 : 700]
+        }
+      }
+    }
+  };
+}
+export {
+  a as S
+};

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

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

package/theme/overrides/MUIComponents/Stepper.js

@@ -0,0 +1,14 @@
+function r(e) {
+  return {
+    MuiStepConnector: {
+      styleOverrides: {
+        line: {
+          borderColor: e.vars.palette.divider
+        }
+      }
+    }
+  };
+}
+export {
+  r as S
+};

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

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

package/theme/overrides/MUIComponents/SvgIcon.js

@@ -0,0 +1,21 @@
+function i(e) {
+  return {
+    MuiSvgIcon: {
+      styleOverrides: {
+        fontSizeSmall: {
+          width: 20,
+          height: 20,
+          fontSize: "inherit"
+        },
+        fontSizeLarge: {
+          width: 32,
+          height: 32,
+          fontSize: "inherit"
+        }
+      }
+    }
+  };
+}
+export {
+  i as S
+};

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

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

package/theme/overrides/MUIComponents/Switch.js

@@ -0,0 +1,33 @@
+function o(t) {
+  const a = t.colorSchemes.finalTheme.palette.mode === "light";
+  return {
+    MuiSwitch: {
+      styleOverrides: {
+        thumb: {
+          boxShadow: t.customShadows?.z1
+        },
+        track: {
+          opacity: 1,
+          backgroundColor: t.vars.palette.grey[500]
+        },
+        switchBase: {
+          left: 0,
+          right: "auto",
+          "&:not(:.Mui-checked)": {
+            color: t.vars.palette.grey[a ? 100 : 300]
+          },
+          "&.Mui-checked.Mui-disabled, &.Mui-disabled": {
+            color: t.vars.palette.grey[a ? 400 : 600]
+          },
+          "&.Mui-disabled+.MuiSwitch-track": {
+            opacity: 1,
+            backgroundColor: `${t.vars.palette.action.disabledBackground} !important`
+          }
+        }
+      }
+    }
+  };
+}
+export {
+  o as S
+};

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

@@ -1,5 +1,5 @@
 import { Theme, CssVarsTheme } from '@mui/material/styles';
-export default function Table(theme: Omit<Theme, "palette" | "applyStyles"> & CssVarsTheme): {
+export default function Table(theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme): {
     MuiTableRow: {
         styleOverrides: {
             root: {
@@ -51,7 +51,7 @@ export default function Table(theme: Omit<Theme, "palette" | "applyStyles"> & Cs
         styleOverrides: {
             root: {
                 [x: string]: unknown;
-                '@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;
@@ -427,7 +427,7 @@ export default function Table(theme: Omit<Theme, "palette" | "applyStyles"> & Cs
                 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;
@@ -880,7 +880,7 @@ export default function Table(theme: Omit<Theme, "palette" | "applyStyles"> & Cs
             };
             toolbar: {
                 '& .MuiInputBase-root': {
-                    '@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;
@@ -1256,7 +1256,7 @@ export default function Table(theme: Omit<Theme, "palette" | "applyStyles"> & Cs
                     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;
@@ -1714,7 +1714,7 @@ export default function Table(theme: Omit<Theme, "palette" | "applyStyles"> & Cs
                 };
                 '& .MuiTablePagination-displayedRows': {
                     [x: string]: unknown;
-                    '@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;
@@ -2090,7 +2090,7 @@ export default function Table(theme: Omit<Theme, "palette" | "applyStyles"> & Cs
                     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;
@@ -2544,7 +2544,7 @@ export default function Table(theme: Omit<Theme, "palette" | "applyStyles"> & Cs
             };
             selectLabel: {
                 [x: string]: unknown;
-                '@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;
@@ -2920,7 +2920,7 @@ export default function Table(theme: Omit<Theme, "palette" | "applyStyles"> & Cs
                 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/Table.js

@@ -0,0 +1,89 @@
+function o(a) {
+  return {
+    MuiTableRow: {
+      styleOverrides: {
+        root: {
+          "&.Mui-selected": {
+            backgroundColor: a.vars.palette.action.selected,
+            "&:hover": {
+              backgroundColor: a.vars.palette.action.hover
+            }
+          }
+        }
+      }
+    },
+    MuiTableCell: {
+      styleOverrides: {
+        root: {
+          borderBottom: "none"
+        },
+        head: {
+          color: a.vars.palette.text.secondary,
+          backgroundColor: a.vars.palette.background.surface,
+          "&:first-of-type": {
+            paddingLeft: a.spacing(3),
+            borderTopLeftRadius: a.shape.borderRadius,
+            borderBottomLeftRadius: a.shape.borderRadius,
+            boxShadow: `inset 8px 0 0 ${a.vars.palette.background.paper}`
+          },
+          "&:last-of-type": {
+            paddingRight: a.spacing(3),
+            borderTopRightRadius: a.shape.borderRadius,
+            borderBottomRightRadius: a.shape.borderRadius,
+            boxShadow: `inset -8px 0 0 ${a.vars.palette.background.paper}`
+          }
+        },
+        stickyHeader: {
+          backgroundColor: a.vars.palette.background.paper,
+          backgroundImage: `linear-gradient(to bottom, ${a.vars.palette.background.surface} 0%, ${a.vars.palette.background.surface} 100%)`
+        },
+        body: {
+          "&:first-of-type": {
+            paddingLeft: a.spacing(3)
+          },
+          "&:last-of-type": {
+            paddingRight: a.spacing(3)
+          }
+        }
+      }
+    },
+    MuiTablePagination: {
+      styleOverrides: {
+        root: {
+          ...a.colorSchemes.finalTheme.typography.caption
+        },
+        toolbar: {
+          "& .MuiInputBase-root": {
+            marginLeft: a.spacing(1),
+            marginRight: a.spacing(3),
+            ...a.colorSchemes.finalTheme.typography.caption
+          },
+          "&.MuiToolbar-regular": {
+            minHeight: 40,
+            height: 40,
+            paddingRight: 0
+          },
+          "& .MuiTablePagination-displayedRows": {
+            ...a.colorSchemes.finalTheme.typography.caption
+          }
+        },
+        selectLabel: {
+          ...a.colorSchemes.finalTheme.typography.caption
+        },
+        select: {
+          paddingBottom: 4,
+          "&:focus": {
+            borderRadius: a.shape.borderRadius
+          }
+        },
+        selectIcon: {
+          width: 20,
+          height: 20
+        }
+      }
+    }
+  };
+}
+export {
+  o as T
+};

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

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

package/theme/overrides/MUIComponents/Timeline.js

@@ -0,0 +1,21 @@
+function o(e) {
+  return {
+    MuiTimelineDot: {
+      styleOverrides: {
+        root: {
+          boxShadow: "none"
+        }
+      }
+    },
+    MuiTimelineConnector: {
+      styleOverrides: {
+        root: {
+          backgroundColor: e.vars.palette.divider
+        }
+      }
+    }
+  };
+}
+export {
+  o as T
+};

package/theme/overrides/MUIComponents/ToggleButton.js

@@ -0,0 +1,54 @@
+import { alpha as e } from "@mui/material/styles";
+const o = (r, a) => ({
+  props: { color: a },
+  style: {
+    "&:hover": {
+      borderColor: e(r.colorSchemes.finalTheme.palette[a].main, 0.48),
+      backgroundColor: e(
+        r.colorSchemes.finalTheme.palette[a].main,
+        r.vars.palette.action.hoverOpacity
+      )
+    },
+    "&.Mui-selected": {
+      borderColor: e(r.colorSchemes.finalTheme.palette[a].main, 0.48)
+    }
+  }
+});
+function s(r) {
+  return {
+    MuiToggleButton: {
+      variants: [
+        {
+          props: { color: "standard" },
+          style: {
+            "&.Mui-selected": {
+              backgroundColor: r.vars.palette.action.selected
+            }
+          }
+        },
+        o(r, "primary"),
+        o(r, "info"),
+        o(r, "success"),
+        o(r, "warning"),
+        o(r, "error")
+      ]
+    },
+    MuiToggleButtonGroup: {
+      styleOverrides: {
+        root: {
+          borderRadius: r.shape.borderRadius,
+          backgroundColor: r.vars.palette.background.paper,
+          border: `solid 1px ${r.vars.palette?.border.default}`,
+          "& .MuiToggleButton-root": {
+            margin: 4,
+            borderColor: "transparent !important",
+            borderRadius: `${r.shape.borderRadius}px !important`
+          }
+        }
+      }
+    }
+  };
+}
+export {
+  s as T
+};

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

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

package/theme/overrides/MUIComponents/Tooltip.js

@@ -0,0 +1,18 @@
+function t(o) {
+  const r = o.colorSchemes.finalTheme.palette.mode === "light";
+  return {
+    MuiTooltip: {
+      styleOverrides: {
+        tooltip: {
+          backgroundColor: o.vars.palette.grey[r ? 800 : 700]
+        },
+        arrow: {
+          color: o.vars.palette.grey[r ? 800 : 700]
+        }
+      }
+    }
+  };
+}
+export {
+  t as T
+};