@mui/material 5.10.13 → 5.10.15

package/styles/createTypography.js

@@ -1,67 +1,55 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = createTypography;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-
 var _utils = require("@mui/utils");
-
 const _excluded = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
-
 function round(value) {
   return Math.round(value * 1e5) / 1e5;
 }
-
 const caseAllCaps = {
   textTransform: 'uppercase'
 };
 const defaultFontFamily = '"Roboto", "Helvetica", "Arial", sans-serif';
+
 /**
  * @see @link{https://m2.material.io/design/typography/the-type-system.html}
  * @see @link{https://m2.material.io/design/typography/understanding-typography.html}
  */
-
 function createTypography(palette, typography) {
   const _ref = typeof typography === 'function' ? typography(palette) : typography,
-        {
-    fontFamily = defaultFontFamily,
-    // The default font size of the Material Specification.
-    fontSize = 14,
-    // px
-    fontWeightLight = 300,
-    fontWeightRegular = 400,
-    fontWeightMedium = 500,
-    fontWeightBold = 700,
-    // Tell MUI what's the font-size on the html element.
-    // 16px is the default font-size used by browsers.
-    htmlFontSize = 16,
-    // Apply the CSS properties to all the variants.
-    allVariants,
-    pxToRem: pxToRem2
-  } = _ref,
-        other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
-
+    {
+      fontFamily = defaultFontFamily,
+      // The default font size of the Material Specification.
+      fontSize = 14,
+      // px
+      fontWeightLight = 300,
+      fontWeightRegular = 400,
+      fontWeightMedium = 500,
+      fontWeightBold = 700,
+      // Tell MUI what's the font-size on the html element.
+      // 16px is the default font-size used by browsers.
+      htmlFontSize = 16,
+      // Apply the CSS properties to all the variants.
+      allVariants,
+      pxToRem: pxToRem2
+    } = _ref,
+    other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   if (process.env.NODE_ENV !== 'production') {
     if (typeof fontSize !== 'number') {
       console.error('MUI: `fontSize` is required to be a number.');
     }
-
     if (typeof htmlFontSize !== 'number') {
       console.error('MUI: `htmlFontSize` is required to be a number.');
     }
   }
-
   const coef = fontSize / 14;
-
   const pxToRem = pxToRem2 || (size => `${size / htmlFontSize * coef}rem`);
-
   const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => (0, _extends2.default)({
     fontFamily,
     fontWeight,
@@ -71,7 +59,6 @@ function createTypography(palette, typography) {
   }, fontFamily === defaultFontFamily ? {
     letterSpacing: `${round(letterSpacing / size)}em`
   } : {}, casing, allVariants);
-
   const variants = {
     h1: buildVariant(fontWeightLight, 96, 1.167, -1.5),
     h2: buildVariant(fontWeightLight, 60, 1.2, -0.5),
@@ -98,6 +85,5 @@ function createTypography(palette, typography) {
     fontWeightBold
   }, variants), other, {
     clone: false // No need to clone deep
-
   });
 }

package/styles/cssUtils.js

@@ -10,47 +10,45 @@ exports.getUnit = getUnit;
 exports.isUnitless = isUnitless;
 exports.responsiveProperty = responsiveProperty;
 exports.toUnitless = toUnitless;
-
 function isUnitless(value) {
   return String(parseFloat(value)).length === String(value).length;
-} // Ported from Compass
+}
+
+// Ported from Compass
 // https://github.com/Compass/compass/blob/master/core/stylesheets/compass/typography/_units.scss
 // Emulate the sass function "unit"
-
-
 function getUnit(input) {
   return String(input).match(/[\d.\-+]*\s*(.*)/)[1] || '';
-} // Emulate the sass function "unitless"
-
+}
 
+// Emulate the sass function "unitless"
 function toUnitless(length) {
   return parseFloat(length);
-} // Convert any CSS <length> or <percentage> value to any another.
-// From https://github.com/KyleAMathews/convert-css-length
-
+}
 
+// Convert any CSS <length> or <percentage> value to any another.
+// From https://github.com/KyleAMathews/convert-css-length
 function convertLength(baseFontSize) {
   return (length, toUnit) => {
-    const fromUnit = getUnit(length); // Optimize for cases where `from` and `to` units are accidentally the same.
+    const fromUnit = getUnit(length);
 
+    // Optimize for cases where `from` and `to` units are accidentally the same.
     if (fromUnit === toUnit) {
       return length;
-    } // Convert input length to pixels.
-
+    }
 
+    // Convert input length to pixels.
     let pxLength = toUnitless(length);
-
     if (fromUnit !== 'px') {
       if (fromUnit === 'em') {
         pxLength = toUnitless(length) * toUnitless(baseFontSize);
       } else if (fromUnit === 'rem') {
         pxLength = toUnitless(length) * toUnitless(baseFontSize);
       }
-    } // Convert length in pixels to the output unit
-
+    }
 
+    // Convert length in pixels to the output unit
     let outputLength = pxLength;
-
     if (toUnit !== 'px') {
       if (toUnit === 'em') {
         outputLength = pxLength / toUnitless(baseFontSize);
@@ -60,11 +58,9 @@ function convertLength(baseFontSize) {
         return length;
       }
     }
-
     return parseFloat(outputLength.toFixed(5)) + toUnit;
   };
 }
-
 function alignProperty({
   size,
   grid
@@ -72,11 +68,11 @@ function alignProperty({
   const sizeBelow = size - size % grid;
   const sizeAbove = sizeBelow + grid;
   return size - sizeBelow < sizeAbove - size ? sizeBelow : sizeAbove;
-} // fontGrid finds a minimal grid (in rem) for the fontSize values so that the
+}
+
+// fontGrid finds a minimal grid (in rem) for the fontSize values so that the
 // lineHeight falls under a x pixels grid, 4px in the case of Material Design,
 // without changing the relative line height
-
-
 function fontGrid({
   lineHeight,
   pixels,
@@ -84,6 +80,7 @@ function fontGrid({
 }) {
   return pixels / (lineHeight * htmlFontSize);
 }
+
 /**
  * generate a responsive version of a given CSS property
  * @example
@@ -115,8 +112,6 @@ function fontGrid({
  * @param {number} [params.alignStep] - Round scaled value to fall under this grid
  * @returns {Object} responsive styles for {params.cssProperty}
  */
-
-
 function responsiveProperty({
   cssProperty,
   min,
@@ -131,11 +126,9 @@ function responsiveProperty({
   const factor = (max - min) / breakpoints[breakpoints.length - 1];
   breakpoints.forEach(breakpoint => {
     let value = min + factor * breakpoint;
-
     if (transform !== null) {
       value = transform(value);
     }
-
     output[`@media (min-width:${breakpoint}px)`] = {
       [cssProperty]: `${Math.round(value * 10000) / 10000}${unit}`
     };

package/styles/defaultTheme.js

@@ -1,14 +1,11 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _createTheme = _interopRequireDefault(require("./createTheme"));
-
 const defaultTheme = (0, _createTheme.default)();
 var _default = defaultTheme;
 exports.default = _default;

package/styles/excludeVariablesFromRoot.js

@@ -4,11 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /**
  * @internal These variables should not appear in the :root stylesheet when the `defaultMode="dark"`
  */
 const excludeVariablesFromRoot = cssVarPrefix => [...[...Array(24)].map((_, index) => `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}overlays-${index + 1}`), `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}palette-AppBar-darkBg`, `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}palette-AppBar-darkColor`];
-
 var _default = excludeVariablesFromRoot;
 exports.default = _default;

package/styles/experimental_extendTheme.d.ts

@@ -34,6 +34,8 @@ export type SupportedColorScheme = DefaultColorScheme | ExtendedColorScheme;
 export interface Opacity {
   inputPlaceholder: number;
   inputUnderline: number;
+  switchTrackDisabled: number;
+  switchTrack: number;
 }
 
 export type Overlays = [
@@ -64,6 +66,10 @@ export type Overlays = [
   string | undefined,
 ];
 
+export interface PaletteBackgroundChannel {
+  defaultChannel: string;
+}
+
 export interface PaletteCommonChannel {
   background: string;
   backgroundChannel: string;
@@ -194,6 +200,7 @@ export interface PaletteTooltip {
 // The Palette should be sync with `../themeCssVarsAugmentation/index.d.ts`
 export interface ColorSystemOptions {
   palette?: PaletteOptions & {
+    background?: Partial<PaletteBackgroundChannel>;
     common?: Partial<PaletteCommonChannel>;
     primary?: Partial<PaletteColorChannel>;
     secondary?: Partial<PaletteColorChannel>;
@@ -233,6 +240,7 @@ export interface CssVarsPalette {
   success: PaletteColorChannel;
   warning: PaletteColorChannel;
   text: PaletteTextChannel;
+  background: PaletteBackgroundChannel;
   dividerChannel: string;
   action: PaletteActionChannel;
   Alert: PaletteAlert;
@@ -383,6 +391,16 @@ export interface CssVarsTheme extends ColorSystem {
   vars: ThemeVars;
   getCssVar: (field: ThemeCssVar, ...vars: ThemeCssVar[]) => string;
   getColorSchemeSelector: (colorScheme: SupportedColorScheme) => string;
+
+  // Default theme tokens
+  spacing: Theme['spacing'];
+  breakpints: Theme['breakpoints'];
+  shape: Theme['shape'];
+  typography: Theme['typography'];
+  transitions: Theme['transitions'];
+  shadows: Theme['shadows'];
+  mixins: Theme['mixins'];
+  zIndex: Theme['zIndex'];
 }
 
 /**

package/styles/experimental_extendTheme.js

@@ -1,36 +1,26 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createGetCssVar = void 0;
 exports.default = extendTheme;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-
 var _utils = require("@mui/utils");
-
 var _system = require("@mui/system");
-
 var _createTheme = _interopRequireDefault(require("./createTheme"));
-
-var _Paper = require("../Paper/Paper");
-
+var _getOverlayAlpha = _interopRequireDefault(require("./getOverlayAlpha"));
 const _excluded = ["colorSchemes", "cssVarPrefix"],
-      _excluded2 = ["palette"];
+  _excluded2 = ["palette"];
 const defaultDarkOverlays = [...Array(25)].map((_, index) => {
   if (index === 0) {
     return undefined;
   }
-
-  const overlay = (0, _Paper.getOverlayAlpha)(index);
+  const overlay = (0, _getOverlayAlpha.default)(index);
   return `linear-gradient(rgba(255 255 255 / ${overlay}), rgba(255 255 255 / ${overlay}))`;
 });
-
 function assignNode(obj, keys) {
   keys.forEach(k => {
     if (!obj[k]) {
@@ -38,33 +28,26 @@ function assignNode(obj, keys) {
     }
   });
 }
-
 function setColor(obj, key, defaultValue) {
   obj[key] = obj[key] || defaultValue;
 }
-
 const createGetCssVar = (cssVarPrefix = 'mui') => (0, _system.unstable_createGetCssVar)(cssVarPrefix);
-
 exports.createGetCssVar = createGetCssVar;
-
 function extendTheme(options = {}, ...args) {
   var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$li3, _colorSchemesInput$da2, _colorSchemesInput$da3;
-
   const {
-    colorSchemes: colorSchemesInput = {},
-    cssVarPrefix = 'mui'
-  } = options,
-        input = (0, _objectWithoutPropertiesLoose2.default)(options, _excluded);
+      colorSchemes: colorSchemesInput = {},
+      cssVarPrefix = 'mui'
+    } = options,
+    input = (0, _objectWithoutPropertiesLoose2.default)(options, _excluded);
   const getCssVar = createGetCssVar(cssVarPrefix);
-
   const _createThemeWithoutVa = (0, _createTheme.default)((0, _extends2.default)({}, input, colorSchemesInput.light && {
-    palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
-  })),
-        {
-    palette: lightPalette
-  } = _createThemeWithoutVa,
-        muiTheme = (0, _objectWithoutPropertiesLoose2.default)(_createThemeWithoutVa, _excluded2);
-
+      palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
+    })),
+    {
+      palette: lightPalette
+    } = _createThemeWithoutVa,
+    muiTheme = (0, _objectWithoutPropertiesLoose2.default)(_createThemeWithoutVa, _excluded2);
   const {
     palette: darkPalette
   } = (0, _createTheme.default)({
@@ -99,19 +82,19 @@ function extendTheme(options = {}, ...args) {
     })
   });
   Object.keys(theme.colorSchemes).forEach(key => {
-    const palette = theme.colorSchemes[key].palette; // attach black & white channels to common node
+    const palette = theme.colorSchemes[key].palette;
 
+    // attach black & white channels to common node
     if (key === 'light') {
       setColor(palette.common, 'background', '#fff');
       setColor(palette.common, 'onBackground', '#000');
     } else {
       setColor(palette.common, 'background', '#000');
       setColor(palette.common, 'onBackground', '#fff');
-    } // assign component variables
-
+    }
 
+    // assign component variables
     assignNode(palette, ['Alert', 'AppBar', 'Avatar', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
-
     if (key === 'light') {
       setColor(palette.Alert, 'errorColor', (0, _system.darken)(palette.error.light, 0.6));
       setColor(palette.Alert, 'infoColor', (0, _system.darken)(palette.info.light, 0.6));
@@ -193,9 +176,7 @@ function extendTheme(options = {}, ...args) {
       setColor(palette.Alert, 'warningIconColor', getCssVar('palette-warning-main'));
       setColor(palette.AppBar, 'defaultBg', getCssVar('palette-grey-900'));
       setColor(palette.AppBar, 'darkBg', getCssVar('palette-background-paper')); // specific for dark mode
-
       setColor(palette.AppBar, 'darkColor', getCssVar('palette-text-primary')); // specific for dark mode
-
       setColor(palette.Avatar, 'defaultBg', getCssVar('palette-grey-600'));
       setColor(palette.Chip, 'defaultBorder', getCssVar('palette-grey-700'));
       setColor(palette.Chip, 'defaultAvatarColor', getCssVar('palette-grey-300'));
@@ -233,43 +214,40 @@ function extendTheme(options = {}, ...args) {
       setColor(palette.TableCell, 'border', (0, _system.darken)((0, _system.alpha)(palette.divider, 1), 0.68));
       setColor(palette.Tooltip, 'bg', (0, _system.alpha)(palette.grey[700], 0.92));
     }
+    palette.background.defaultChannel = (0, _system.colorChannel)(palette.background.default); // MUI X - DataGrid needs this token.
 
     palette.common.backgroundChannel = (0, _system.colorChannel)(palette.common.background);
     palette.common.onBackgroundChannel = (0, _system.colorChannel)(palette.common.onBackground);
     palette.dividerChannel = (0, _system.colorChannel)(palette.divider);
     Object.keys(palette).forEach(color => {
-      const colors = palette[color]; // Color palettes: primary, secondary, error, info, success, and warning
+      const colors = palette[color];
 
+      // Color palettes: primary, secondary, error, info, success, and warning
       if (colors.main) {
         palette[color].mainChannel = (0, _system.colorChannel)(colors.main);
       }
-
       if (colors.light) {
         palette[color].lightChannel = (0, _system.colorChannel)(colors.light);
       }
-
       if (colors.dark) {
         palette[color].darkChannel = (0, _system.colorChannel)(colors.dark);
       }
-
       if (colors.contrastText) {
         palette[color].contrastTextChannel = (0, _system.colorChannel)(colors.contrastText);
-      } // Text colors: text.primary, text.secondary
-
+      }
 
+      // Text colors: text.primary, text.secondary
       if (colors.primary) {
         palette[color].primaryChannel = (0, _system.colorChannel)(colors.primary);
       }
-
       if (colors.secondary) {
         palette[color].secondaryChannel = (0, _system.colorChannel)(colors.secondary);
-      } // Action colors: action.active, action.selected
-
+      }
 
+      // Action colors: action.active, action.selected
       if (colors.active) {
         palette[color].activeChannel = (0, _system.colorChannel)(colors.active);
       }
-
       if (colors.selected) {
         palette[color].selectedChannel = (0, _system.colorChannel)(colors.selected);
       }

package/styles/getOverlayAlpha.d.ts

@@ -0,0 +1,2 @@
+declare const getOverlayAlpha: (elevation: number) => string;
+export default getOverlayAlpha;

package/styles/getOverlayAlpha.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// Inspired by https://github.com/material-components/material-components-ios/blob/bca36107405594d5b7b16265a5b0ed698f85a5ee/components/Elevation/src/UIColor%2BMaterialElevation.m#L61
+const getOverlayAlpha = elevation => {
+  let alphaValue;
+  if (elevation < 1) {
+    alphaValue = 5.11916 * elevation ** 2;
+  } else {
+    alphaValue = 4.5 * Math.log(elevation + 1) + 2;
+  }
+  return (alphaValue / 100).toFixed(2);
+};
+var _default = getOverlayAlpha;
+exports.default = _default;

package/styles/index.d.ts

@@ -128,4 +128,10 @@ export type {
   ThemeVars,
   ThemeCssVar,
   ThemeCssVarOverrides,
+  ColorSystemOptions,
 } from './experimental_extendTheme';
+export { default as getOverlayAlpha } from './getOverlayAlpha';
+
+// Private methods for creating parts of the theme
+export { default as private_createTypography } from './createTypography';
+export { default as private_excludeVariablesFromRoot } from './excludeVariablesFromRoot';

package/styles/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -39,7 +38,10 @@ var _exportNames = {
   makeStyles: true,
   withStyles: true,
   withTheme: true,
-  experimental_extendTheme: true
+  experimental_extendTheme: true,
+  getOverlayAlpha: true,
+  private_createTypography: true,
+  private_excludeVariablesFromRoot: true
 };
 Object.defineProperty(exports, "StyledEngineProvider", {
   enumerable: true,
@@ -149,6 +151,12 @@ Object.defineProperty(exports, "getLuminance", {
     return _system.getLuminance;
   }
 });
+Object.defineProperty(exports, "getOverlayAlpha", {
+  enumerable: true,
+  get: function () {
+    return _getOverlayAlpha.default;
+  }
+});
 Object.defineProperty(exports, "hexToRgb", {
   enumerable: true,
   get: function () {
@@ -179,6 +187,18 @@ Object.defineProperty(exports, "makeStyles", {
     return _makeStyles.default;
   }
 });
+Object.defineProperty(exports, "private_createTypography", {
+  enumerable: true,
+  get: function () {
+    return _createTypography.default;
+  }
+});
+Object.defineProperty(exports, "private_excludeVariablesFromRoot", {
+  enumerable: true,
+  get: function () {
+    return _excludeVariablesFromRoot.default;
+  }
+});
 Object.defineProperty(exports, "recomposeColor", {
   enumerable: true,
   get: function () {
@@ -245,39 +265,22 @@ Object.defineProperty(exports, "withTheme", {
     return _withTheme.default;
   }
 });
-
 var _adaptV4Theme = _interopRequireDefault(require("./adaptV4Theme"));
-
 var _system = require("@mui/system");
-
 var _createTheme = _interopRequireWildcard(require("./createTheme"));
-
 var _createMuiStrictModeTheme = _interopRequireDefault(require("./createMuiStrictModeTheme"));
-
 var _createStyles = _interopRequireDefault(require("./createStyles"));
-
 var _cssUtils = require("./cssUtils");
-
 var _responsiveFontSizes = _interopRequireDefault(require("./responsiveFontSizes"));
-
 var _createTransitions = require("./createTransitions");
-
 var _useTheme = _interopRequireDefault(require("./useTheme"));
-
 var _useThemeProps = _interopRequireDefault(require("./useThemeProps"));
-
 var _styled = _interopRequireDefault(require("./styled"));
-
 var _ThemeProvider = _interopRequireDefault(require("./ThemeProvider"));
-
 var _makeStyles = _interopRequireDefault(require("./makeStyles"));
-
 var _withStyles = _interopRequireDefault(require("./withStyles"));
-
 var _withTheme = _interopRequireDefault(require("./withTheme"));
-
 var _CssVarsProvider = require("./CssVarsProvider");
-
 Object.keys(_CssVarsProvider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -289,9 +292,9 @@ Object.keys(_CssVarsProvider).forEach(function (key) {
     }
   });
 });
-
 var _experimental_extendTheme = _interopRequireDefault(require("./experimental_extendTheme"));
-
+var _getOverlayAlpha = _interopRequireDefault(require("./getOverlayAlpha"));
+var _createTypography = _interopRequireDefault(require("./createTypography"));
+var _excludeVariablesFromRoot = _interopRequireDefault(require("./excludeVariablesFromRoot"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/styles/makeStyles.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = makeStyles;
-
 var _utils = require("@mui/utils");
-
 function makeStyles() {
   throw new Error(process.env.NODE_ENV !== "production" ? `MUI: makeStyles is no longer exported from @mui/material/styles.
 You have to import it from @mui/styles.