@m4l/styles 0.0.0

package/index.js

@@ -0,0 +1,1721 @@
+import { alpha as t } from "@mui/material/styles";
+import { pxToRem as n, responsiveFontSizes as d, getColorPresets as k } from "@m4l/graphics";
+import { alpha as M } from "@mui/material";
+const $ = "Public Sans, sans-serif", C = {
+  fontFamily: $,
+  fontWeightRegular: 400,
+  fontWeightMedium: 600,
+  fontWeightBold: 700,
+  h1: {
+    fontWeight: 700,
+    lineHeight: 80 / 64,
+    fontSize: n(40),
+    letterSpacing: 2,
+    ...d({ sm: 52, md: 58, lg: 64 })
+  },
+  h2: {
+    fontWeight: 700,
+    lineHeight: 64 / 48,
+    fontSize: n(32),
+    ...d({ sm: 40, md: 44, lg: 48 })
+  },
+  h3: {
+    fontWeight: 700,
+    lineHeight: 1.5,
+    fontSize: n(24),
+    ...d({ sm: 26, md: 30, lg: 32 })
+  },
+  h4: {
+    fontWeight: 700,
+    lineHeight: 1.5,
+    fontSize: n(20),
+    ...d({ sm: 20, md: 24, lg: 24 })
+  },
+  h5: {
+    fontWeight: 700,
+    lineHeight: 1.5,
+    fontSize: n(18),
+    ...d({ sm: 19, md: 20, lg: 20 })
+  },
+  h6: {
+    fontWeight: 700,
+    lineHeight: 28 / 18,
+    fontSize: n(17),
+    ...d({ sm: 18, md: 18, lg: 18 })
+  },
+  subtitle1: {
+    fontWeight: 600,
+    lineHeight: 1.5,
+    fontSize: n(14)
+  },
+  subtitle2: {
+    fontWeight: 600,
+    lineHeight: 1.5,
+    fontSize: n(12)
+  },
+  body0: {
+    lineHeight: 1.5,
+    fontWeight: 400,
+    fontSize: n(16)
+  },
+  body1: {
+    lineHeight: 1.5,
+    fontWeight: 400,
+    fontSize: n(14)
+  },
+  body2: {
+    lineHeight: 1.5,
+    fontWeight: 400,
+    fontSize: n(12)
+  },
+  caption: {
+    lineHeight: 1.5,
+    fontSize: n(11)
+  },
+  overline: {
+    fontWeight: 700,
+    lineHeight: 1.5,
+    fontSize: n(12),
+    textTransform: "uppercase"
+  },
+  button: {
+    fontWeight: 700,
+    lineHeight: 24 / 14,
+    fontSize: n(14),
+    textTransform: "capitalize"
+  }
+};
+function l(o, r) {
+  return `linear-gradient(to bottom, ${o}, ${r})`;
+}
+const c = {
+  lighter: "#C8FACD",
+  light: "#5BE584",
+  main: "#00AB55",
+  dark: "#007B55",
+  darker: "#005249"
+}, S = {
+  lighter: "#D6E4FF",
+  light: "#84A9FF",
+  main: "#3366FF",
+  dark: "#1939B7",
+  darker: "#091A7A"
+}, g = {
+  lighter: "#D0F2FF",
+  light: "#74CAFF",
+  main: "#1890FF",
+  dark: "#0C53B7",
+  darker: "#04297A"
+}, x = {
+  lighter: "#E9FCD4",
+  light: "#AAF27F",
+  main: "#54D62C",
+  dark: "#229A16",
+  darker: "#08660D"
+}, b = {
+  lighter: "#FFF7CD",
+  light: "#FFE16A",
+  main: "#FFC107",
+  dark: "#B78103",
+  darker: "#7A4F01"
+}, y = {
+  lighter: "#FFE7D9",
+  light: "#FFA48D",
+  main: "#FF4842",
+  dark: "#B72136",
+  darker: "#7A0C2E"
+}, e = {
+  0: "#FFFFFF",
+  100: "#F9FAFB",
+  200: "#F4F6F8",
+  300: "#DFE3E8",
+  400: "#C4CDD5",
+  500: "#919EAB",
+  600: "#637381",
+  700: "#454F5B",
+  800: "#212B36",
+  900: "#161C24",
+  5008: t("#919EAB", 0.08),
+  50012: t("#919EAB", 0.12),
+  50016: t("#919EAB", 0.16),
+  50024: t("#919EAB", 0.24),
+  50032: t("#919EAB", 0.32),
+  50048: t("#919EAB", 0.48),
+  50056: t("#919EAB", 0.56),
+  50080: t("#919EAB", 0.8)
+}, w = {
+  primary: l(c.light, c.main),
+  info: l(g.light, g.main),
+  success: l(x.light, x.main),
+  warning: l(b.light, b.main),
+  error: l(y.light, y.main)
+}, B = {
+  violet: ["#826AF9", "#9E86FF", "#D0AEFF", "#F7D2FF"],
+  blue: ["#2D99FF", "#83CFFF", "#A5F3FF", "#CCFAFF"],
+  green: ["#2CD9C5", "#60F1C8", "#A4F7CC", "#C0F2DC"],
+  yellow: ["#FFE700", "#FFEF5A", "#FFF7AE", "#FFF3D6"],
+  red: ["#FF6C40", "#FF8F6D", "#FFBD98", "#FFF2D4"]
+}, u = {
+  common: { black: "#000", white: "#fff" },
+  primary: { ...c, contrastText: "#fff" },
+  secondary: { ...S, contrastText: "#fff" },
+  info: { ...g, contrastText: "#fff" },
+  success: { ...x, contrastText: e[800] },
+  warning: { ...b, contrastText: e[800] },
+  error: { ...y, contrastText: "#fff" },
+  grey: e,
+  gradients: w,
+  chart: B,
+  divider: e[50024],
+  action: {
+    hover: e[5008],
+    selected: e[50016],
+    disabled: e[50080],
+    disabledBackground: e[50024],
+    focus: e[50024],
+    hoverOpacity: 0.08,
+    disabledOpacity: 0.48
+  }
+}, p = {
+  light: {
+    ...u,
+    mode: "light",
+    text: { primary: e[800], secondary: e[700], disabled: e[500] },
+    background: {
+      paper: "#fff",
+      default: "#fff",
+      neutral: e[200],
+      autocomplete: e[100],
+      header: "#F6F7F9"
+    },
+    action: { active: e[600], ...u.action },
+    grid: { sectionHeader: "#F6F7F9", divider: "#EDEFF2", rowHover: "#FAFBFC" }
+  },
+  dark: {
+    ...u,
+    mode: "dark",
+    text: { primary: "#fff", secondary: e[500], disabled: e[600] },
+    background: {
+      paper: e[800],
+      default: e[900],
+      neutral: e[50016],
+      autocomplete: e[800],
+      header: "#29313A"
+    },
+    action: { active: e[500], ...u.action },
+    grid: { sectionHeader: "#29313A", divider: "#3E464F", rowHover: "#1F262F" }
+  }
+}, h = p.light.grey[500], F = "#000000", f = (o) => {
+  const r = t(o, 0.2), i = t(o, 0.14), a = t(o, 0.12);
+  return [
+    "none",
+    `0px 2px 1px -1px ${r},0px 1px 1px 0px ${i},0px 1px 3px 0px ${a}`,
+    `0px 3px 1px -2px ${r},0px 2px 2px 0px ${i},0px 1px 5px 0px ${a}`,
+    `0px 3px 3px -2px ${r},0px 3px 4px 0px ${i},0px 1px 8px 0px ${a}`,
+    `0px 2px 4px -1px ${r},0px 4px 5px 0px ${i},0px 1px 10px 0px ${a}`,
+    `0px 3px 5px -1px ${r},0px 5px 8px 0px ${i},0px 1px 14px 0px ${a}`,
+    `0px 3px 5px -1px ${r},0px 6px 10px 0px ${i},0px 1px 18px 0px ${a}`,
+    `0px 4px 5px -2px ${r},0px 7px 10px 1px ${i},0px 2px 16px 1px ${a}`,
+    `0px 5px 5px -3px ${r},0px 8px 10px 1px ${i},0px 3px 14px 2px ${a}`,
+    `0px 5px 6px -3px ${r},0px 9px 12px 1px ${i},0px 3px 16px 2px ${a}`,
+    `0px 6px 6px -3px ${r},0px 10px 14px 1px ${i},0px 4px 18px 3px ${a}`,
+    `0px 6px 7px -4px ${r},0px 11px 15px 1px ${i},0px 4px 20px 3px ${a}`,
+    `0px 7px 8px -4px ${r},0px 12px 17px 2px ${i},0px 5px 22px 4px ${a}`,
+    `0px 7px 8px -4px ${r},0px 13px 19px 2px ${i},0px 5px 24px 4px ${a}`,
+    `0px 7px 9px -4px ${r},0px 14px 21px 2px ${i},0px 5px 26px 4px ${a}`,
+    `0px 8px 9px -5px ${r},0px 15px 22px 2px ${i},0px 6px 28px 5px ${a}`,
+    `0px 8px 10px -5px ${r},0px 16px 24px 2px ${i},0px 6px 30px 5px ${a}`,
+    `0px 8px 11px -5px ${r},0px 17px 26px 2px ${i},0px 6px 32px 5px ${a}`,
+    `0px 9px 11px -5px ${r},0px 18px 28px 2px ${i},0px 7px 34px 6px ${a}`,
+    `0px 9px 12px -6px ${r},0px 19px 29px 2px ${i},0px 7px 36px 6px ${a}`,
+    `0px 10px 13px -6px ${r},0px 20px 31px 3px ${i},0px 8px 38px 7px ${a}`,
+    `0px 10px 13px -6px ${r},0px 21px 33px 3px ${i},0px 8px 40px 7px ${a}`,
+    `0px 10px 14px -6px ${r},0px 22px 35px 3px ${i},0px 8px 42px 7px ${a}`,
+    `0px 11px 14px -7px ${r},0px 23px 36px 3px ${i},0px 9px 44px 8px ${a}`,
+    `0px 11px 15px -7px ${r},0px 24px 38px 3px ${i},0px 9px 46px 8px ${a}`
+  ];
+}, v = (o) => {
+  const r = t(o, 0.16);
+  return {
+    z1: `0 1px 2px 0 ${r}`,
+    z8: `0 8px 16px 0 ${r}`,
+    z12: `0 12px 24px -4px ${r}`,
+    z16: `0 16px 32px -4px ${r}`,
+    z20: `0 20px 40px -4px ${r}`,
+    z24: `0 24px 48px 0 ${r}`,
+    primary: `0 8px 16px 0 ${t(p.light.primary.main, 0.24)}`,
+    info: `0 8px 16px 0 ${t(p.light.info.main, 0.24)}`,
+    secondary: `0 8px 16px 0 ${t(p.light.secondary.main, 0.24)}`,
+    success: `0 8px 16px 0 ${t(p.light.success.main, 0.24)}`,
+    warning: `0 8px 16px 0 ${t(p.light.warning.main, 0.24)}`,
+    error: `0 8px 16px 0 ${t(p.light.error.main, 0.24)}`,
+    card: `0 0 2px 0 ${t(o, 0.2)}, 0 12px 24px -4px ${t(o, 0.12)}`,
+    dialog: `-40px 40px 80px -8px ${t(p.light.common.black, 0.24)}`,
+    dropdown: `0 0 2px 0 ${t(o, 0.24)}, -20px 20px 40px -4px ${t(o, 0.24)}`
+  };
+}, O = {
+  light: v(h),
+  dark: v(F)
+}, L = {
+  light: f(h),
+  dark: f(F)
+}, Do = {
+  typography: C,
+  shadows: L.light,
+  customShadows: {
+    ...O.light,
+    primary: `0 8px 16px 0 ${t(k("default").main, 0.24)}`
+  },
+  palette: {
+    ...p.light,
+    primary: {
+      lighter: "#283829",
+      light: "#26372b",
+      main: "#00AB55",
+      dark: "#007B55",
+      darker: "#005249",
+      LightSelected: "#EBF9F1",
+      LightSelectedHover: "#D6F2E3",
+      DarkSelected: "#142827",
+      DarkSelectedHover: "#12342B"
+    },
+    text: { primary: e[800], secondary: e[700], disabled: e[500] },
+    secondary: {
+      main: "#34ac4e"
+    }
+  }
+};
+function R(o) {
+  return {
+    MuiAvatar: {
+      styleOverrides: {
+        colorDefault: {
+          color: o.palette.text.secondary,
+          backgroundColor: o.palette.grey[400]
+        }
+      }
+    },
+    MuiAvatarGroup: {
+      styleOverrides: {
+        avatar: {
+          fontSize: 16,
+          fontWeight: o.typography.fontWeightMedium,
+          "&:first-of-type": {
+            fontSize: 14,
+            color: o.palette.primary.main,
+            backgroundColor: o.palette.primary.lighter
+          }
+        }
+      }
+    }
+  };
+}
+function m(o) {
+  return {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          textTransform: "capitalize",
+          "&:hover": {
+            boxShadow: "none"
+          }
+        },
+        sizeLarge: {
+          height: 48
+        },
+        containedInherit: {
+          color: o.palette.grey[800],
+          boxShadow: o.customShadows.z1,
+          "&:hover": {
+            backgroundColor: o.palette.grey[400]
+          }
+        },
+        containedPrimary: {
+          boxShadow: o.customShadows.z24
+        },
+        containedSecondary: {
+          boxShadow: o.customShadows.secondary
+        },
+        containedInfo: {
+          boxShadow: o.customShadows.info
+        },
+        containedSuccess: {
+          boxShadow: o.customShadows.success
+        },
+        containedWarning: {
+          boxShadow: o.customShadows.warning
+        },
+        containedError: {
+          boxShadow: o.customShadows.error
+        },
+        outlinedInherit: {
+          border: `1px solid ${o.palette.grey[50032]}`,
+          "&:hover": {
+            backgroundColor: o.palette.action.hover
+          }
+        },
+        textInherit: {
+          "&:hover": {
+            backgroundColor: o.palette.action.hover
+          }
+        }
+      }
+    }
+  };
+}
+function T(o) {
+  return {
+    MuiIconButton: {
+      styleOverrides: {
+        root: {
+          "&.MuiIconButton-sizeSmall": {
+            height: o.spacing(3),
+            width: o.spacing(3),
+            margin: 0,
+            padding: 0,
+            " > svg": {
+              height: 20,
+              width: 20
+            },
+            "& .MuiBox-root": {
+              height: 20,
+              width: 20
+            }
+          }
+        }
+      }
+    }
+  };
+}
+function D(o) {
+  return {
+    MuiFab: {
+      defaultProps: {
+        color: "primary"
+      },
+      styleOverrides: {
+        root: {
+          boxShadow: o.customShadows.z8,
+          "&:hover": {
+            boxShadow: "none",
+            backgroundColor: o.palette.grey[400]
+          }
+        },
+        primary: {
+          boxShadow: o.customShadows.primary,
+          "&:hover": {
+            backgroundColor: o.palette.primary.dark
+          }
+        },
+        secondary: {
+          boxShadow: o.customShadows.secondary,
+          "&:hover": {
+            backgroundColor: o.palette.secondary.dark
+          }
+        },
+        extended: {
+          "& svg": {
+            marginRight: o.spacing(1)
+          }
+        }
+      }
+    }
+  };
+}
+function A(o) {
+  return {
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          position: "relative",
+          boxShadow: o.customShadows.card,
+          borderRadius: Number(o.shape.borderRadius) * 2,
+          zIndex: 0
+        }
+      }
+    },
+    MuiCardHeader: {
+      defaultProps: {
+        titleTypographyProps: { variant: "h6" },
+        subheaderTypographyProps: { variant: "body2", marginTop: o.spacing(0.5) }
+      },
+      styleOverrides: {
+        root: {
+          padding: o.spacing(3, 3, 0)
+        }
+      }
+    },
+    MuiCardContent: {
+      styleOverrides: {
+        root: {
+          padding: o.spacing(3)
+        }
+      }
+    }
+  };
+}
+function I(o) {
+  return {
+    MuiTabs: {
+      styleOverrides: {
+        root: {
+          padding: 0,
+          fontWeight: o.typography.fontWeightMedium,
+          borderTopLeftRadius: o.shape.borderRadius,
+          borderTopRightRadius: o.shape.borderRadius,
+          "&.Mui-selected": {
+            color: o.palette.text.primary
+          },
+          "&:not(:last-of-type)": {
+            marginRight: o.spacing(5)
+          },
+          "@media (min-width: 600px)": {
+            minWidth: 48
+          },
+          "& .MuiButtonBase-root": {
+            ...o.typography.subtitle2
+          }
+        },
+        labelIcon: {
+          minHeight: 48,
+          flexDirection: "row",
+          "& > *:first-of-type": {
+            marginBottom: 0,
+            marginRight: o.spacing(1)
+          }
+        },
+        wrapper: {
+          flexDirection: "row",
+          whiteSpace: "nowrap"
+        },
+        textColorInherit: {
+          opacity: 1,
+          color: o.palette.text.secondary
+        }
+      }
+    },
+    MuiTabPanel: {
+      styleOverrides: {
+        root: {
+          padding: 0
+        }
+      }
+    },
+    MuiTabScrollButton: {
+      styleOverrides: {
+        root: {
+          width: 48,
+          borderRadius: "50%"
+        }
+      }
+    }
+  };
+}
+function z(o) {
+  return {
+    MuiMenuItem: {
+      styleOverrides: {
+        root: {
+          "&.Mui-selected": {
+            backgroundColor: o.palette.action.selected,
+            "&:hover": {
+              backgroundColor: o.palette.action.hover
+            }
+          }
+        }
+      }
+    }
+  };
+}
+function P(o) {
+  return {
+    MuiLink: {
+      defaultProps: {
+        underline: "hover"
+      },
+      styleOverrides: {
+        root: {
+          "&.MuiLink-underlineHover": {
+            textDecorationColor: o.palette.primary.main
+          }
+        }
+      }
+    }
+  };
+}
+function H(o) {
+  return {
+    MuiListItemIcon: {
+      styleOverrides: {
+        root: {
+          color: "inherit",
+          minWidth: "auto",
+          marginRight: o.spacing(2)
+        }
+      }
+    },
+    MuiListItemAvatar: {
+      styleOverrides: {
+        root: {
+          minWidth: "auto",
+          marginRight: o.spacing(2)
+        }
+      }
+    },
+    MuiListItemText: {
+      styleOverrides: {
+        root: {
+          marginTop: 0,
+          marginBottom: 0
+        },
+        multiline: {
+          marginTop: 0,
+          marginBottom: 0
+        }
+      }
+    }
+  };
+}
+function E(o) {
+  return {
+    MuiTableRow: {
+      styleOverrides: {
+        root: {
+          "&.Mui-selected": {
+            backgroundColor: o.palette.action.selected,
+            "&:hover": {
+              backgroundColor: o.palette.action.hover
+            }
+          }
+        }
+      }
+    },
+    MuiTableCell: {
+      styleOverrides: {
+        root: {
+          borderBottom: "none"
+        },
+        head: {
+          color: o.palette.text.secondary,
+          backgroundColor: o.palette.background.neutral,
+          "&:first-of-type": {
+            paddingLeft: o.spacing(3),
+            borderTopLeftRadius: o.shape.borderRadius,
+            borderBottomLeftRadius: o.shape.borderRadius,
+            boxShadow: `inset 8px 0 0 ${o.palette.background.paper}`
+          },
+          "&:last-of-type": {
+            paddingRight: o.spacing(3),
+            borderTopRightRadius: o.shape.borderRadius,
+            borderBottomRightRadius: o.shape.borderRadius,
+            boxShadow: `inset -8px 0 0 ${o.palette.background.paper}`
+          }
+        },
+        stickyHeader: {
+          backgroundColor: o.palette.background.paper,
+          backgroundImage: `linear-gradient(to bottom, ${o.palette.background.neutral} 0%, ${o.palette.background.neutral} 100%)`
+        },
+        body: {
+          "&:first-of-type": {
+            paddingLeft: o.spacing(3)
+          },
+          "&:last-of-type": {
+            paddingRight: o.spacing(3)
+          }
+        }
+      }
+    },
+    MuiTablePagination: {
+      styleOverrides: {
+        root: {
+          ...o.typography.caption
+        },
+        toolbar: {
+          "& .MuiInputBase-root": {
+            marginLeft: o.spacing(1),
+            marginRight: o.spacing(3),
+            ...o.typography.caption
+          },
+          "&.MuiToolbar-regular": {
+            minHeight: 40,
+            height: 40,
+            paddingRight: 0
+          },
+          "& .MuiTablePagination-displayedRows": {
+            ...o.typography.caption
+          }
+        },
+        selectLabel: {
+          ...o.typography.caption
+        },
+        select: {
+          paddingBottom: 4,
+          "&:focus": {
+            borderRadius: o.shape.borderRadius
+          }
+        },
+        selectIcon: {
+          width: 20,
+          height: 20
+        }
+      }
+    }
+  };
+}
+function W(o) {
+  return {
+    MuiBadge: {
+      styleOverrides: {
+        dot: {
+          width: 10,
+          height: 10,
+          borderRadius: "50%"
+        }
+      }
+    }
+  };
+}
+function G(o) {
+  return {
+    MuiPaper: {
+      defaultProps: {
+        elevation: 0
+      },
+      variants: [
+        {
+          props: { variant: "outlined" },
+          style: { borderColor: o.palette.grey[50012] }
+        }
+      ],
+      styleOverrides: {
+        root: {
+          backgroundImage: "none",
+          borderRadius: "2px"
+        }
+      }
+    }
+  };
+}
+function _(o) {
+  return {
+    MuiFormControl: {
+      styleOverrides: {
+        root: {}
+      }
+    },
+    MuiInputBase: {
+      styleOverrides: {
+        root: {
+          backgroundColor: o.palette.background.default,
+          ...o.typography.body2,
+          borderRadius: o.spacing(1),
+          "&.Mui-disabled": {
+            "& svg": { color: o.palette.text.disabled }
+          },
+          padding: "0px"
+        },
+        input: {
+          paddingLeft: "8px",
+          "&::placeholder": {
+            opacity: 1,
+            color: o.palette.text.disabled
+          }
+        }
+      }
+    },
+    MuiInput: {
+      styleOverrides: {
+        underline: {
+          "&:before": {
+            borderBottomColor: o.palette.grey[50056]
+          }
+        }
+      }
+    },
+    MuiFilledInput: {
+      styleOverrides: {
+        root: {
+          backgroundColor: o.palette.grey[50012],
+          "&:hover": {
+            backgroundColor: o.palette.grey[50016]
+          },
+          "&.Mui-focused": {
+            backgroundColor: o.palette.action.focus
+          },
+          "&.Mui-disabled": {
+            backgroundColor: o.palette.action.disabledBackground
+          }
+        },
+        underline: {
+          "&:before": {
+            borderBottomColor: o.palette.grey[50056]
+          }
+        }
+      }
+    },
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: {
+          ...o.typography.body2,
+          color: o.palette.text.primary,
+          "& > input": {
+            padding: o.spacing(1.5, 1.5)
+          },
+          "& .MuiOutlinedInput-notchedOutline": {
+            borderColor: o.palette.grey[50032],
+            fontSize: "0.875rem"
+          },
+          "&.Mui-disabled": {
+            "& .MuiOutlinedInput-notchedOutline": {
+              borderColor: o.palette.action.disabledBackground
+            }
+          },
+          "& .MuiOutlinedInput-input:-webkit-autofill": {
+            WebkitBoxShadow: `0 0 0 1000px ${o.palette.background.autofill} inset`
+          }
+        }
+      }
+    }
+  };
+}
+function N(o) {
+  return {
+    MuiInputLabel: {
+      styleOverrides: {
+        shrink: {
+          transform: "translate(14px, -9px) scale(0.75)!important"
+        },
+        outlined: {
+          transform: "translate(14px, 12px) scale(1)",
+          fontSize: 12
+        }
+      }
+    }
+  };
+}
+function Y(o) {
+  return {
+    MuiRadio: {
+      styleOverrides: {
+        root: {
+          padding: o.spacing(1),
+          svg: {
+            fontSize: 24,
+            "&[font-size=small]": {
+              fontSize: 20
+            }
+          }
+        }
+      }
+    }
+  };
+}
+function j(o) {
+  const r = o.palette.mode === "light";
+  return {
+    MuiDrawer: {
+      styleOverrides: {
+        modal: {
+          '&[role="presentation"]': {
+            "& .MuiDrawer-paperAnchorLeft": {
+              boxShadow: `8px 24px 24px 12px ${M(
+                o.palette.grey[900],
+                r ? 0.16 : 0.48
+              )}`
+            },
+            "& .MuiDrawer-paperAnchorRight": {
+              boxShadow: `-8px 24px 24px 12px ${M(
+                o.palette.grey[900],
+                r ? 0.16 : 0.48
+              )}`
+            }
+          }
+        }
+      }
+    }
+  };
+}
+function K(o) {
+  return {
+    MuiDialog: {
+      styleOverrides: {
+        paper: {
+          boxShadow: o.customShadows.dialog,
+          "&.MuiPaper-rounded": {
+            borderRadius: Number(o.shape.borderRadius) * 2
+          },
+          "&.MuiDialog-paperFullScreen": {
+            borderRadius: 0
+          },
+          "&.MuiDialog-paper .MuiDialogActions-root": {
+            padding: o.spacing(3)
+          },
+          "@media (max-width: 600px)": {
+            margin: o.spacing(2)
+          },
+          "@media (max-width: 663.95px)": {
+            "&.MuiDialog-paperWidthSm.MuiDialog-paperScrollBody": {
+              maxWidth: "100%"
+            }
+          }
+        },
+        paperFullWidth: {
+          width: "100%"
+        }
+      }
+    },
+    MuiDialogTitle: {
+      styleOverrides: {
+        root: {
+          padding: o.spacing(3, 3, 0)
+        }
+      }
+    },
+    MuiDialogContent: {
+      styleOverrides: {
+        root: {
+          borderTop: 0,
+          borderBottom: 0,
+          padding: o.spacing(3)
+        }
+      }
+    },
+    MuiDialogActions: {
+      styleOverrides: {
+        root: {
+          "& > :not(:first-of-type)": {
+            marginLeft: o.spacing(1.5)
+          }
+        }
+      }
+    }
+  };
+}
+function U(o) {
+  const r = o.palette.mode === "light";
+  return {
+    MuiSlider: {
+      defaultProps: {
+        size: "small"
+      },
+      styleOverrides: {
+        root: {
+          "&.Mui-disabled": {
+            color: o.palette.action.disabled
+          }
+        },
+        markLabel: {
+          fontSize: 13,
+          color: o.palette.text.disabled
+        },
+        valueLabel: {
+          borderRadius: 8,
+          backgroundColor: o.palette.grey[r ? 800 : 700]
+        }
+      }
+    }
+  };
+}
+function V(o) {
+  const r = o.palette.mode === "light";
+  return {
+    MuiSwitch: {
+      styleOverrides: {
+        thumb: {
+          boxShadow: o.customShadows.z1
+        },
+        track: {
+          opacity: 1,
+          backgroundColor: o.palette.grey[500]
+        },
+        switchBase: {
+          left: 0,
+          right: "auto",
+          "&:not(:.Mui-checked)": {
+            color: o.palette.grey[r ? 100 : 300]
+          },
+          "&.Mui-checked.Mui-disabled, &.Mui-disabled": {
+            color: o.palette.grey[r ? 400 : 600]
+          },
+          "&.Mui-disabled+.MuiSwitch-track": {
+            opacity: 1,
+            backgroundColor: `${o.palette.action.disabledBackground} !important`
+          }
+        }
+      }
+    }
+  };
+}
+function q(o) {
+  return {
+    MuiSvgIcon: {
+      styleOverrides: {
+        fontSizeSmall: {
+          width: 20,
+          height: 20,
+          fontSize: "inherit"
+        },
+        fontSizeLarge: {
+          width: 32,
+          height: 32,
+          fontSize: "inherit"
+        }
+      }
+    }
+  };
+}
+function J(o) {
+  const r = o.palette.mode === "light";
+  return {
+    MuiTooltip: {
+      styleOverrides: {
+        tooltip: {
+          backgroundColor: o.palette.grey[r ? 800 : 700]
+        },
+        arrow: {
+          color: o.palette.grey[r ? 800 : 700]
+        }
+      }
+    }
+  };
+}
+function Q(o) {
+  return {
+    MuiPopover: {
+      styleOverrides: {
+        paper: {
+          boxShadow: o.customShadows.dropdown,
+          borderRadius: Number(o.shape.borderRadius) * 1.5
+        }
+      }
+    }
+  };
+}
+function X(o) {
+  return {
+    MuiStepConnector: {
+      styleOverrides: {
+        line: {
+          borderColor: o.palette.divider
+        }
+      }
+    }
+  };
+}
+function Z(o) {
+  return {
+    MuiDataGrid: {
+      styleOverrides: {
+        root: {
+          borderRadius: 0,
+          border: "1px solid transparent",
+          "& .MuiTablePagination-root": {
+            borderTop: 0
+          },
+          "& .MuiDataGrid-toolbarContainer": {
+            padding: o.spacing(2),
+            backgroundColor: o.palette.background.neutral,
+            "& .MuiButton-root": {
+              marginRight: o.spacing(1.5),
+              color: o.palette.text.primary,
+              "&:hover": {
+                backgroundColor: o.palette.action.hover
+              }
+            }
+          },
+          "& .MuiDataGrid-cell, .MuiDataGrid-columnsContainer": {
+            borderBottom: `1px solid ${o.palette.divider}`
+          },
+          "& .MuiDataGrid-columnSeparator": {
+            color: o.palette.divider
+          },
+          '& .MuiDataGrid-columnHeader[data-field="__check__"]': {
+            padding: 0
+          }
+        }
+      }
+    },
+    MuiGridMenu: {
+      styleOverrides: {
+        root: {
+          "& .MuiDataGrid-gridMenuList": {
+            boxShadow: o.customShadows.z20,
+            borderRadius: o.shape.borderRadius
+          },
+          "& .MuiMenuItem-root": {
+            ...o.typography.body2
+          }
+        }
+      }
+    },
+    MuiGridFilterForm: {
+      styleOverrides: {
+        root: {
+          padding: o.spacing(1.5, 0),
+          "& .MuiFormControl-root": {
+            margin: o.spacing(0, 0.5)
+          },
+          "& .MuiInput-root": {
+            marginTop: o.spacing(3),
+            "&::before, &::after": {
+              display: "none"
+            },
+            "& .MuiNativeSelect-select, .MuiInput-input": {
+              ...o.typography.body2,
+              padding: o.spacing(0.75, 1),
+              borderRadius: o.shape.borderRadius,
+              backgroundColor: o.palette.background.neutral
+            },
+            "& .MuiSvgIcon-root": {
+              right: 4
+            }
+          }
+        }
+      }
+    },
+    MuiGridPanelFooter: {
+      styleOverrides: {
+        root: {
+          padding: o.spacing(2),
+          justifyContent: "flex-end",
+          "& .MuiButton-root": {
+            "&:first-of-type": {
+              marginRight: o.spacing(1.5),
+              color: o.palette.text.primary,
+              "&:hover": {
+                backgroundColor: o.palette.action.hover
+              }
+            },
+            "&:last-of-type": {
+              color: o.palette.common.white,
+              backgroundColor: o.palette.primary.main,
+              "&:hover": {
+                backgroundColor: o.palette.primary.dark
+              }
+            }
+          }
+        }
+      }
+    }
+  };
+}
+function oo(o) {
+  return {
+    MuiSkeleton: {
+      defaultProps: {
+        animation: "wave"
+      },
+      styleOverrides: {
+        root: {
+          backgroundColor: o.palette.divider
+        }
+      }
+    }
+  };
+}
+function ro(o) {
+  const r = t(o.palette.grey[900], 0.48), i = t(o.palette.grey[900], 1);
+  return {
+    MuiBackdrop: {
+      styleOverrides: {
+        root: {
+          background: [
+            "rgb(22,28,36)",
+            `-moz-linear-gradient(75deg, ${r} 0%, ${i} 100%)`,
+            `-webkit-linear-gradient(75deg, ${r} 0%, ${i} 100%)`,
+            `linear-gradient(75deg, ${r} 0%, ${i} 100%)`
+          ],
+          "&.MuiBackdrop-invisible": {
+            background: "transparent"
+          }
+        }
+      }
+    }
+  };
+}
+function to(o) {
+  const r = o.palette.mode === "light";
+  return {
+    MuiLinearProgress: {
+      styleOverrides: {
+        root: {
+          borderRadius: 4,
+          overflow: "hidden"
+        },
+        bar: {
+          borderRadius: 4
+        },
+        colorPrimary: {
+          backgroundColor: o.palette.primary[r ? "lighter" : "darker"]
+        },
+        buffer: {
+          backgroundColor: "transparent"
+        }
+      }
+    }
+  };
+}
+function io(o) {
+  return {
+    MuiTimelineDot: {
+      styleOverrides: {
+        root: {
+          boxShadow: "none"
+        }
+      }
+    },
+    MuiTimelineConnector: {
+      styleOverrides: {
+        root: {
+          backgroundColor: o.palette.divider
+        }
+      }
+    }
+  };
+}
+function eo(o) {
+  return {
+    MuiCheckbox: {
+      styleOverrides: {
+        root: {
+          padding: o.spacing(1),
+          oleee: "sss",
+          color: o.palette.action.active,
+          "& .Mui-checked": {
+            color: o.palette.primary.main
+          },
+          "&.Mui-checked.Mui-disabled, &.Mui-disabled": {
+            color: o.palette.action.disabled
+          }
+        }
+      }
+    }
+  };
+}
+function ao(o) {
+  return {
+    MuiAccordion: {
+      styleOverrides: {
+        root: {
+          backgroundColor: o.palette.background.default,
+          width: "100%",
+          marginTop: "0px",
+          marginBottom: o.spacing(1.5),
+          "&.Mui-expanded": {
+            marginTop: "0px",
+            marginBottom: o.spacing(1.5)
+          },
+          border: "0px solid transparent",
+          "&.Mui-disabled": {
+            backgroundColor: "transparent"
+          },
+          "&::before": {
+            content: "none"
+          }
+        }
+      }
+    },
+    MuiAccordionDetails: {
+      styleOverrides: {
+        root: {
+          padding: `0px ${o.spacing(0)}`
+        }
+      }
+    },
+    MuiAccordionSummary: {
+      styleOverrides: {
+        root: {
+          borderRadius: o.spacing(0.5),
+          height: o.spacing(4.5),
+          minHeight: o.spacing(4.5),
+          backgroundColor: o.palette.background.header,
+          paddingLeft: o.spacing(2),
+          paddingRight: o.spacing(2),
+          marginBottom: "0px",
+          "&.Mui-expanded": {
+            height: o.spacing(4.5),
+            minHeight: o.spacing(4.5),
+            borderRadius: `${o.spacing(0.5)} ${o.spacing(0.5)} 0px 0px`
+          },
+          "&.Mui-disabled": {
+            opacity: 1,
+            color: o.palette.action.disabled,
+            "& .MuiTypography-root": {
+              color: "inherit"
+            }
+          }
+        },
+        expandIconWrapper: {
+          color: o.palette.action.active,
+          height: 20,
+          width: 20,
+          alignItems: "center",
+          justifyContent: "center",
+          "& > svg": {
+            height: 12,
+            width: 12
+          }
+        },
+        content: {
+          ...o.typography.subtitle2,
+          margin: "0px",
+          "&.Mui-expanded": {
+            margin: "0px"
+          }
+        }
+      }
+    }
+  };
+}
+function no(o) {
+  return {
+    MuiTypography: {
+      styleOverrides: {
+        paragraph: {
+          marginBottom: o.spacing(2)
+        },
+        gutterBottom: {
+          marginBottom: o.spacing(1)
+        }
+      }
+    }
+  };
+}
+function po(o) {
+  return {
+    MuiPaginationItem: {
+      styleOverrides: {
+        root: {
+          "&.Mui-selected": {
+            fontWeight: o.typography.fontWeightBold
+          }
+        },
+        textPrimary: {
+          "&.Mui-selected": {
+            color: o.palette.primary.main,
+            backgroundColor: t(o.palette.primary.main, 0.08),
+            "&:hover, &.Mui-focusVisible": {
+              backgroundColor: `${t(
+                o.palette.primary.main,
+                0.24
+              )} !important`
+            }
+          }
+        },
+        outlined: {
+          border: `1px solid ${o.palette.grey[50032]}`
+        },
+        outlinedPrimary: {
+          "&.Mui-selected": {
+            backgroundColor: t(o.palette.primary.main, 0.08),
+            border: `1px solid ${t(o.palette.primary.main, 0.24)}`
+          }
+        }
+      }
+    }
+  };
+}
+function so(o) {
+  return {
+    MuiBreadcrumbs: {
+      styleOverrides: {
+        separator: {
+          marginLeft: o.spacing(2),
+          marginRight: o.spacing(2)
+        }
+      }
+    }
+  };
+}
+function lo(o) {
+  const r = (i) => ({
+    props: { variant: "contained", color: i },
+    style: { boxShadow: o.customShadows[i] }
+  });
+  return {
+    MuiButtonGroup: {
+      variants: [
+        {
+          props: { variant: "contained", color: "inherit" },
+          style: { boxShadow: o.customShadows.z8 }
+        },
+        r("primary"),
+        r("secondary"),
+        r("info"),
+        r("success"),
+        r("warning"),
+        r("error"),
+        {
+          props: { disabled: !0 },
+          style: {
+            boxShadow: "none",
+            "& .MuiButtonGroup-grouped.Mui-disabled": {
+              color: o.palette.action.disabled,
+              borderColor: `${o.palette.action.disabledBackground} !important`,
+              "&.MuiButton-contained": {
+                backgroundColor: o.palette.action.disabledBackground
+              }
+            }
+          }
+        }
+      ],
+      styleOverrides: {
+        root: {
+          "&:hover": {
+            boxShadow: "none"
+          }
+        }
+      }
+    }
+  };
+}
+function uo(o) {
+  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%"
+        }
+      }
+    }
+  };
+}
+function co(o) {
+  return {
+    MuiAutocomplete: {
+      styleOverrides: {
+        root: {
+          "& .MuiInputBase-root": {
+            padding: "0 39px 0px 0"
+          },
+          input: {
+            padding: `${o.spacing(1.5, 1.5)}!important`
+          }
+        },
+        paper: {
+          boxShadow: o.customShadows.dropdown
+        },
+        listbox: {
+          padding: o.spacing(0, 1),
+          "& .MuiAutocomplete-option": {
+            padding: o.spacing(1),
+            margin: o.spacing(1, 0),
+            borderRadius: o.shape.borderRadius
+          }
+        }
+      }
+    }
+  };
+}
+const s = (o, r) => ({
+  props: { color: r },
+  style: {
+    "&:hover": {
+      borderColor: t(o.palette[r].main, 0.48),
+      backgroundColor: t(o.palette[r].main, o.palette.action.hoverOpacity)
+    },
+    "&.Mui-selected": {
+      borderColor: t(o.palette[r].main, 0.48)
+    }
+  }
+});
+function go(o) {
+  return {
+    MuiToggleButton: {
+      variants: [
+        {
+          props: { color: "standard" },
+          style: {
+            "&.Mui-selected": {
+              backgroundColor: o.palette.action.selected
+            }
+          }
+        },
+        s(o, "primary"),
+        s(o, "secondary"),
+        s(o, "info"),
+        s(o, "success"),
+        s(o, "warning"),
+        s(o, "error")
+      ]
+    },
+    MuiToggleButtonGroup: {
+      styleOverrides: {
+        root: {
+          borderRadius: o.shape.borderRadius,
+          backgroundColor: o.palette.background.paper,
+          border: `solid 1px ${o.palette.grey[50012]}`,
+          "& .MuiToggleButton-root": {
+            margin: 4,
+            borderColor: "transparent !important",
+            borderRadius: `${o.shape.borderRadius}px !important`
+          }
+        }
+      }
+    }
+  };
+}
+function xo(o) {
+  return {
+    MuiFormControlLabel: {
+      styleOverrides: {
+        label: {
+          ...o.typography.body1
+        }
+      }
+    },
+    MuiFormHelperText: {
+      styleOverrides: {
+        root: {
+          marginTop: o.spacing(1)
+        }
+      }
+    },
+    MuiFormLabel: {
+      styleOverrides: {
+        root: {
+          color: o.palette.text.disabled
+        }
+      }
+    }
+  };
+}
+function bo(o) {
+  return {
+    MuiLoadingButton: {
+      styleOverrides: {
+        root: {
+          "&.MuiLoadingButton-root": {
+            ...o.typography.subtitle2,
+            "& .MuiCircularProgress-root": {
+              color: o.palette.primary.main
+            }
+          },
+          "&.MuiButton-text": {
+            "& .MuiLoadingButton-startIconPendingStart": {
+              marginLeft: 0
+            },
+            "& .MuiLoadingButton-endIconPendingEnd": {
+              marginRight: 0
+            }
+          }
+        }
+      }
+    }
+  };
+}
+const yo = (o) => ({
+  M4LBruceTest: {
+    styleOverrides: {}
+  }
+}), Mo = (o) => ({
+  M4LDynamicFilter: {
+    styleOverrides: {}
+  }
+}), fo = (o) => ({
+  M4LRHFTextFieldPassword: {
+    styleOverrides: {
+      ["&.M4LRHFTextFieldPassword-root"]: {
+        [".M4LRHFTextField-root .MuiTextField-root"]: {
+          border: "1px solid yellow"
+        }
+      }
+    }
+  }
+}), vo = (o) => ({
+  M4LRHFTextField: {
+    styleOverrides: {
+      ["&.M4LRHFTextField-root"]: {
+        test: "root",
+        ".MuiTextField-root": {
+          border: "1px solid purple"
+        },
+        ".MuiFormLabel-root": {
+          background: "orange"
+        }
+      }
+    }
+  }
+}), ho = (o) => ({
+  M4LIcon: {
+    styleOverrides: {
+      ["&.M4LIcon-root"]: {
+        test: "root"
+      }
+    }
+  }
+}), Fo = (o) => ({
+  M4LIconButton: {
+    styleOverrides: {
+      ["&.M4LIconButton-root"]: {
+        test: "root"
+      }
+    }
+  }
+}), ko = (o) => ({
+  M4LanguagePopover: {
+    styleOverrides: {
+      ["&.M4LanguagePopover-root"]: {
+        test: "root",
+        ".MuiIconButton-sizeMedium": {
+          border: "1px solid red"
+        }
+      }
+    }
+  }
+}), $o = (o) => ({
+  M4LImageButton: {
+    styleOverrides: {
+      ["&.M4LImageButton-root"]: {
+        test: "root"
+      }
+    }
+  }
+}), Co = (o) => ({
+  M4LImage: {
+    styleOverrides: {
+      ["&.M4LImage-root"]: {
+        test: "root"
+      }
+    }
+  }
+}), So = (o) => ({
+  M4LPopover: {
+    styleOverrides: {
+      ["&.M4LPopover-root"]: {
+        test: "root",
+        ".MuiPaper-root": {
+          background: "blue"
+        }
+      }
+    }
+  }
+}), wo = (o) => ({
+  M4LRHFCheckbox: {
+    styleOverrides: {
+      ["&.M4LRHFCheckbox-root"]: {
+        test: "root"
+      }
+    }
+  }
+}), Bo = (o) => ({
+  M4LErrorLabel: {
+    styleOverrides: {
+      ["&.M4LErrorLabel-root"]: {
+        test: "root"
+      }
+    }
+  }
+}), Oo = (o) => ({
+  M4LTypography: {
+    styleOverrides: {
+      ["&.M4LTypography-root"]: {
+        test: "root"
+      }
+    }
+  }
+}), Lo = (o) => ({
+  M4LButton: {
+    styleOverrides: {
+      ["&.M4LButton-root"]: {
+        test: "root"
+      }
+    }
+  }
+});
+function Ao(o) {
+  return Object.assign(
+    D(o),
+    I(o),
+    A(o),
+    z(o),
+    P(o),
+    _(o),
+    N(),
+    Y(o),
+    W(),
+    H(o),
+    E(o),
+    G(o),
+    V(o),
+    m(o),
+    T(o),
+    K(o),
+    R(o),
+    U(o),
+    j(o),
+    X(o),
+    J(o),
+    Q(o),
+    q(),
+    eo(o),
+    Z(o),
+    oo(o),
+    io(o),
+    ro(o),
+    to(o),
+    ao(o),
+    no(o),
+    po(o),
+    lo(o),
+    so(o),
+    uo(),
+    co(o),
+    xo(o),
+    go(o),
+    bo(o),
+    yo(),
+    Mo(),
+    vo(),
+    fo(),
+    ho(),
+    Fo(),
+    ko(),
+    $o(),
+    Co(),
+    So(),
+    wo(),
+    Bo(),
+    Oo(),
+    Lo()
+  );
+}
+export {
+  O as customShadows,
+  Do as defaultThemeOptions,
+  Ao as fnComponentsOverrides,
+  p as palette,
+  L as shadows
+};