@mui/material 5.10.12 → 5.10.14

package/esm/styles/CssVarsProvider.js

@@ -3,13 +3,10 @@ import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/sy
 import experimental_extendTheme from './experimental_extendTheme';
 import createTypography from './createTypography';
 import excludeVariablesFromRoot from './excludeVariablesFromRoot';
-
 const shouldSkipGeneratingVar = keys => {
   var _keys$;
-
   return !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/) || keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));
 };
-
 const defaultTheme = experimental_extendTheme();
 const {
   CssVarsProvider,
@@ -28,7 +25,6 @@ const {
     const newTheme = _extends({}, theme, {
       typography: createTypography(theme.palette, theme.typography)
     });
-
     return newTheme;
   },
   shouldSkipGeneratingVar,

package/esm/styles/adaptV4Theme.js

@@ -1,28 +1,26 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
-      _excluded2 = ["type", "mode"];
+  _excluded2 = ["type", "mode"];
 import { createBreakpoints, createSpacing } from '@mui/system';
 export default function adaptV4Theme(inputTheme) {
   if (process.env.NODE_ENV !== 'production') {
     console.warn(['MUI: adaptV4Theme() is deprecated.', 'Follow the upgrade guide on https://mui.com/r/migration-v4#theme.'].join('\n'));
   }
-
   const {
-    defaultProps = {},
-    mixins = {},
-    overrides = {},
-    palette = {},
-    props = {},
-    styleOverrides = {}
-  } = inputTheme,
-        other = _objectWithoutPropertiesLoose(inputTheme, _excluded);
-
+      defaultProps = {},
+      mixins = {},
+      overrides = {},
+      palette = {},
+      props = {},
+      styleOverrides = {}
+    } = inputTheme,
+    other = _objectWithoutPropertiesLoose(inputTheme, _excluded);
   const theme = _extends({}, other, {
     components: {}
-  }); // default props
-
+  });
 
+  // default props
   Object.keys(defaultProps).forEach(component => {
     const componentValue = theme.components[component] || {};
     componentValue.defaultProps = defaultProps[component];
@@ -32,8 +30,9 @@ export default function adaptV4Theme(inputTheme) {
     const componentValue = theme.components[component] || {};
     componentValue.defaultProps = props[component];
     theme.components[component] = componentValue;
-  }); // CSS overrides
+  });
 
+  // CSS overrides
   Object.keys(styleOverrides).forEach(component => {
     const componentValue = theme.components[component] || {};
     componentValue.styleOverrides = styleOverrides[component];
@@ -43,10 +42,12 @@ export default function adaptV4Theme(inputTheme) {
     const componentValue = theme.components[component] || {};
     componentValue.styleOverrides = overrides[component];
     theme.components[component] = componentValue;
-  }); // theme.spacing
+  });
 
-  theme.spacing = createSpacing(inputTheme.spacing); // theme.mixins.gutters
+  // theme.spacing
+  theme.spacing = createSpacing(inputTheme.spacing);
 
+  // theme.mixins.gutters
   const breakpoints = createBreakpoints(inputTheme.breakpoints || {});
   const spacing = theme.spacing;
   theme.mixins = _extends({
@@ -62,13 +63,11 @@ export default function adaptV4Theme(inputTheme) {
       });
     }
   }, mixins);
-
   const {
-    type: typeInput,
-    mode: modeInput
-  } = palette,
-        paletteRest = _objectWithoutPropertiesLoose(palette, _excluded2);
-
+      type: typeInput,
+      mode: modeInput
+    } = palette,
+    paletteRest = _objectWithoutPropertiesLoose(palette, _excluded2);
   const finalMode = modeInput || typeInput || 'light';
   theme.palette = _extends({
     // theme.palette.text.hint

package/esm/styles/createPalette.js

@@ -76,11 +76,9 @@ export const dark = {
     activatedOpacity: 0.24
   }
 };
-
 function addLightOrDark(intent, direction, shade, tonalOffset) {
   const tonalOffsetLight = tonalOffset.light || tonalOffset;
   const tonalOffsetDark = tonalOffset.dark || tonalOffset * 1.5;
-
   if (!intent[direction]) {
     if (intent.hasOwnProperty(shade)) {
       intent[direction] = intent[shade];
@@ -91,7 +89,6 @@ function addLightOrDark(intent, direction, shade, tonalOffset) {
     }
   }
 }
-
 function getDefaultPrimary(mode = 'light') {
   if (mode === 'dark') {
     return {
@@ -100,14 +97,12 @@ function getDefaultPrimary(mode = 'light') {
       dark: blue[400]
     };
   }
-
   return {
     main: blue[700],
     light: blue[400],
     dark: blue[800]
   };
 }
-
 function getDefaultSecondary(mode = 'light') {
   if (mode === 'dark') {
     return {
@@ -116,14 +111,12 @@ function getDefaultSecondary(mode = 'light') {
       dark: purple[400]
     };
   }
-
   return {
     main: purple[500],
     light: purple[300],
     dark: purple[700]
   };
 }
-
 function getDefaultError(mode = 'light') {
   if (mode === 'dark') {
     return {
@@ -132,14 +125,12 @@ function getDefaultError(mode = 'light') {
       dark: red[700]
     };
   }
-
   return {
     main: red[700],
     light: red[400],
     dark: red[800]
   };
 }
-
 function getDefaultInfo(mode = 'light') {
   if (mode === 'dark') {
     return {
@@ -148,14 +139,12 @@ function getDefaultInfo(mode = 'light') {
       dark: lightBlue[700]
     };
   }
-
   return {
     main: lightBlue[700],
     light: lightBlue[500],
     dark: lightBlue[900]
   };
 }
-
 function getDefaultSuccess(mode = 'light') {
   if (mode === 'dark') {
     return {
@@ -164,14 +153,12 @@ function getDefaultSuccess(mode = 'light') {
       dark: green[700]
     };
   }
-
   return {
     main: green[800],
     light: green[500],
     dark: green[900]
   };
 }
-
 function getDefaultWarning(mode = 'light') {
   if (mode === 'dark') {
     return {
@@ -180,7 +167,6 @@ function getDefaultWarning(mode = 'light') {
       dark: orange[700]
     };
   }
-
   return {
     main: '#ed6c02',
     // closest to orange[800] that pass 3:1.
@@ -188,38 +174,33 @@ function getDefaultWarning(mode = 'light') {
     dark: orange[900]
   };
 }
-
 export default function createPalette(palette) {
   const {
-    mode = 'light',
-    contrastThreshold = 3,
-    tonalOffset = 0.2
-  } = palette,
-        other = _objectWithoutPropertiesLoose(palette, _excluded);
-
+      mode = 'light',
+      contrastThreshold = 3,
+      tonalOffset = 0.2
+    } = palette,
+    other = _objectWithoutPropertiesLoose(palette, _excluded);
   const primary = palette.primary || getDefaultPrimary(mode);
   const secondary = palette.secondary || getDefaultSecondary(mode);
   const error = palette.error || getDefaultError(mode);
   const info = palette.info || getDefaultInfo(mode);
   const success = palette.success || getDefaultSuccess(mode);
-  const warning = palette.warning || getDefaultWarning(mode); // Use the same logic as
+  const warning = palette.warning || getDefaultWarning(mode);
+
+  // Use the same logic as
   // Bootstrap: https://github.com/twbs/bootstrap/blob/1d6e3710dd447de1a200f29e8fa521f8a0908f70/scss/_functions.scss#L59
   // and material-components-web https://github.com/material-components/material-components-web/blob/ac46b8863c4dab9fc22c4c662dc6bd1b65dd652f/packages/mdc-theme/_functions.scss#L54
-
   function getContrastText(background) {
     const contrastText = getContrastRatio(background, dark.text.primary) >= contrastThreshold ? dark.text.primary : light.text.primary;
-
     if (process.env.NODE_ENV !== 'production') {
       const contrast = getContrastRatio(background, contrastText);
-
       if (contrast < 3) {
         console.error([`MUI: The contrast ratio of ${contrast}:1 for ${contrastText} on ${background}`, 'falls below the WCAG recommended absolute minimum contrast ratio of 3:1.', 'https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast'].join('\n'));
       }
     }
-
     return contrastText;
   }
-
   const augmentColor = ({
     color,
     name,
@@ -228,16 +209,13 @@ export default function createPalette(palette) {
     darkShade = 700
   }) => {
     color = _extends({}, color);
-
     if (!color.main && color[mainShade]) {
       color.main = color[mainShade];
     }
-
     if (!color.hasOwnProperty('main')) {
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${name ? ` (${name})` : ''} provided to augmentColor(color) is invalid.
 The color object needs to have a \`main\` property or a \`${mainShade}\` property.` : _formatMuiErrorMessage(11, name ? ` (${name})` : '', mainShade));
     }
-
     if (typeof color.main !== 'string') {
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${name ? ` (${name})` : ''} provided to augmentColor(color) is invalid.
 \`color.main\` should be a string, but \`${JSON.stringify(color.main)}\` was provided instead.
@@ -254,28 +232,22 @@ const theme2 = createTheme({ palette: {
   primary: { main: green[500] },
 } });` : _formatMuiErrorMessage(12, name ? ` (${name})` : '', JSON.stringify(color.main)));
     }
-
     addLightOrDark(color, 'light', lightShade, tonalOffset);
     addLightOrDark(color, 'dark', darkShade, tonalOffset);
-
     if (!color.contrastText) {
       color.contrastText = getContrastText(color.main);
     }
-
     return color;
   };
-
   const modes = {
     dark,
     light
   };
-
   if (process.env.NODE_ENV !== 'production') {
     if (!modes[mode]) {
       console.error(`MUI: The palette mode \`${mode}\` is not supported.`);
     }
   }
-
   const paletteOutput = deepmerge(_extends({
     // A collection of common colors.
     common: _extends({}, common),

package/esm/styles/createStyles.js

@@ -1,10 +1,10 @@
-let warnedOnce = false; // To remove in v6
+let warnedOnce = false;
 
+// To remove in v6
 export default function createStyles(styles) {
   if (!warnedOnce) {
     console.warn(['MUI: createStyles from @mui/material/styles is deprecated.', 'Please use @mui/styles/createStyles'].join('\n'));
     warnedOnce = true;
   }
-
   return styles;
 }

package/esm/styles/createTheme.js

@@ -11,21 +11,18 @@ import createTypography from './createTypography';
 import shadows from './shadows';
 import createTransitions from './createTransitions';
 import zIndex from './zIndex';
-
 function createTheme(options = {}, ...args) {
   const {
-    mixins: mixinsInput = {},
-    palette: paletteInput = {},
-    transitions: transitionsInput = {},
-    typography: typographyInput = {}
-  } = options,
-        other = _objectWithoutPropertiesLoose(options, _excluded);
-
+      mixins: mixinsInput = {},
+      palette: paletteInput = {},
+      transitions: transitionsInput = {},
+      typography: typographyInput = {}
+    } = options,
+    other = _objectWithoutPropertiesLoose(options, _excluded);
   if (options.vars) {
     throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`vars\` is a private field used for CSS variables support.
 Please use another name.` : _formatMuiErrorMessage(18));
   }
-
   const palette = createPalette(paletteInput);
   const systemTheme = systemCreateTheme(options);
   let muiTheme = deepmerge(systemTheme, {
@@ -39,16 +36,14 @@ Please use another name.` : _formatMuiErrorMessage(18));
   });
   muiTheme = deepmerge(muiTheme, other);
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
-
   if (process.env.NODE_ENV !== 'production') {
     const stateClasses = ['active', 'checked', 'completed', 'disabled', 'error', 'expanded', 'focused', 'focusVisible', 'required', 'selected'];
-
     const traverse = (node, component) => {
-      let key; // eslint-disable-next-line guard-for-in, no-restricted-syntax
+      let key;
 
+      // eslint-disable-next-line guard-for-in, no-restricted-syntax
       for (key in node) {
         const child = node[key];
-
         if (stateClasses.indexOf(key) !== -1 && Object.keys(child).length > 0) {
           if (process.env.NODE_ENV !== 'production') {
             const stateClass = generateUtilityClass('', key);
@@ -57,26 +52,21 @@ Please use another name.` : _formatMuiErrorMessage(18));
                 [`&.${stateClass}`]: child
               }
             }, null, 2), '', 'https://mui.com/r/state-classes-guide'].join('\n'));
-          } // Remove the style to prevent global conflicts.
-
-
+          }
+          // Remove the style to prevent global conflicts.
           node[key] = {};
         }
       }
     };
-
     Object.keys(muiTheme.components).forEach(component => {
       const styleOverrides = muiTheme.components[component].styleOverrides;
-
       if (styleOverrides && component.indexOf('Mui') === 0) {
         traverse(styleOverrides, component);
       }
     });
   }
-
   return muiTheme;
 }
-
 let warnedOnce = false;
 export function createMuiTheme(...args) {
   if (process.env.NODE_ENV !== 'production') {
@@ -85,7 +75,6 @@ export function createMuiTheme(...args) {
       console.error(['MUI: the createMuiTheme function was renamed to createTheme.', '', "You should use `import { createTheme } from '@mui/material/styles'`"].join('\n'));
     }
   }
-
   return createTheme(...args);
 }
 export default createTheme;

package/esm/styles/createTransitions.js

@@ -13,9 +13,10 @@ export const easing = {
   easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
   // The sharp curve is used by objects that may return to the screen at any time.
   sharp: 'cubic-bezier(0.4, 0, 0.6, 1)'
-}; // Follow https://m2.material.io/guidelines/motion/duration-easing.html#duration-easing-common-durations
-// to learn when use what timing
+};
 
+// Follow https://m2.material.io/guidelines/motion/duration-easing.html#duration-easing-common-durations
+// to learn when use what timing
 export const duration = {
   shortest: 150,
   shorter: 200,
@@ -29,65 +30,51 @@ export const duration = {
   // recommended when something is leaving screen
   leavingScreen: 195
 };
-
 function formatMs(milliseconds) {
   return `${Math.round(milliseconds)}ms`;
 }
-
 function getAutoHeightDuration(height) {
   if (!height) {
     return 0;
   }
+  const constant = height / 36;
 
-  const constant = height / 36; // https://www.wolframalpha.com/input/?i=(4+%2B+15+*+(x+%2F+36+)+**+0.25+%2B+(x+%2F+36)+%2F+5)+*+10
-
+  // https://www.wolframalpha.com/input/?i=(4+%2B+15+*+(x+%2F+36+)+**+0.25+%2B+(x+%2F+36)+%2F+5)+*+10
   return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);
 }
-
 export default function createTransitions(inputTransitions) {
   const mergedEasing = _extends({}, easing, inputTransitions.easing);
-
   const mergedDuration = _extends({}, duration, inputTransitions.duration);
-
   const create = (props = ['all'], options = {}) => {
     const {
-      duration: durationOption = mergedDuration.standard,
-      easing: easingOption = mergedEasing.easeInOut,
-      delay = 0
-    } = options,
-          other = _objectWithoutPropertiesLoose(options, _excluded);
-
+        duration: durationOption = mergedDuration.standard,
+        easing: easingOption = mergedEasing.easeInOut,
+        delay = 0
+      } = options,
+      other = _objectWithoutPropertiesLoose(options, _excluded);
     if (process.env.NODE_ENV !== 'production') {
-      const isString = value => typeof value === 'string'; // IE11 support, replace with Number.isNaN
+      const isString = value => typeof value === 'string';
+      // IE11 support, replace with Number.isNaN
       // eslint-disable-next-line no-restricted-globals
-
-
       const isNumber = value => !isNaN(parseFloat(value));
-
       if (!isString(props) && !Array.isArray(props)) {
         console.error('MUI: Argument "props" must be a string or Array.');
       }
-
       if (!isNumber(durationOption) && !isString(durationOption)) {
         console.error(`MUI: Argument "duration" must be a number or a string but found ${durationOption}.`);
       }
-
       if (!isString(easingOption)) {
         console.error('MUI: Argument "easing" must be a string.');
       }
-
       if (!isNumber(delay) && !isString(delay)) {
         console.error('MUI: Argument "delay" must be a number or a string.');
       }
-
       if (Object.keys(other).length !== 0) {
         console.error(`MUI: Unrecognized argument(s) [${Object.keys(other).join(',')}].`);
       }
     }
-
     return (Array.isArray(props) ? props : [props]).map(animatedProp => `${animatedProp} ${typeof durationOption === 'string' ? durationOption : formatMs(durationOption)} ${easingOption} ${typeof delay === 'string' ? delay : formatMs(delay)}`).join(',');
   };
-
   return _extends({
     getAutoHeightDuration,
     create

package/esm/styles/createTypography.js

@@ -2,54 +2,47 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
 import { deepmerge } from '@mui/utils';
-
 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}
  */
-
 export default 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 = _objectWithoutPropertiesLoose(_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 = _objectWithoutPropertiesLoose(_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) => _extends({
     fontFamily,
     fontWeight,
@@ -59,7 +52,6 @@ export default 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),
@@ -86,6 +78,5 @@ export default function createTypography(palette, typography) {
     fontWeightBold
   }, variants), other, {
     clone: false // No need to clone deep
-
   });
 }

package/esm/styles/cssUtils.js

@@ -1,40 +1,42 @@
 export 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"
-
 export function getUnit(input) {
   return String(input).match(/[\d.\-+]*\s*(.*)/)[1] || '';
-} // Emulate the sass function "unitless"
+}
 
+// Emulate the sass function "unitless"
 export 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
 export 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);
@@ -44,7 +46,6 @@ export function convertLength(baseFontSize) {
         return length;
       }
     }
-
     return parseFloat(outputLength.toFixed(5)) + toUnit;
   };
 }
@@ -55,10 +56,11 @@ export 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
-
 export function fontGrid({
   lineHeight,
   pixels,
@@ -66,6 +68,7 @@ export function fontGrid({
 }) {
   return pixels / (lineHeight * htmlFontSize);
 }
+
 /**
  * generate a responsive version of a given CSS property
  * @example
@@ -97,7 +100,6 @@ export function fontGrid({
  * @param {number} [params.alignStep] - Round scaled value to fall under this grid
  * @returns {Object} responsive styles for {params.cssProperty}
  */
-
 export function responsiveProperty({
   cssProperty,
   min,
@@ -112,11 +114,9 @@ export 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/esm/styles/excludeVariablesFromRoot.js

@@ -2,5 +2,4 @@
  * @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`];
-
 export default excludeVariablesFromRoot;