@mui/material 5.6.2 → 5.7.0

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.6.2
+/** @license MUI v5.7.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -5717,7 +5717,13 @@
       }
     }
 
-    return path.split('.').reduce((acc, item) => acc && acc[item] ? acc[item] : null, obj);
+    return path.split('.').reduce((acc, item) => {
+      if (acc && acc[item] != null) {
+        return acc[item];
+      }
+
+      return null;
+    }, obj);
   }
 
   function getValue$1(themeMapping, transform, propValueFinal, userValue = propValueFinal) {
@@ -5856,7 +5862,9 @@
   const paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd'];
   const spacingKeys = [...marginKeys, ...paddingKeys];
   function createUnaryUnit(theme, themeKey, defaultValue, propName) {
-    const themeSpacing = getPath(theme, themeKey) || defaultValue;
+    var _getPath;
+
+    const themeSpacing = (_getPath = getPath(theme, themeKey)) != null ? _getPath : defaultValue;
 
     if (typeof themeSpacing === 'number') {
       return abs => {
@@ -6688,7 +6696,7 @@
 
   const _excluded$2j = ["breakpoints", "palette", "spacing", "shape"];
 
-  function createTheme$2(options = {}, ...args) {
+  function createTheme$1(options = {}, ...args) {
     const {
       breakpoints: breakpointsInput = {},
       palette: paletteInput = {},
@@ -6811,7 +6819,7 @@
     return !contextTheme || isObjectEmpty(contextTheme) ? defaultTheme : contextTheme;
   }
 
-  const systemDefaultTheme$1 = createTheme$2();
+  const systemDefaultTheme$1 = createTheme$1();
 
   function useTheme$1(defaultTheme = systemDefaultTheme$1) {
     return useTheme$2(defaultTheme);
@@ -6843,30 +6851,6 @@
         theme: theme
       }, other));
     });
-    Box.propTypes
-    /* remove-proptypes */
-    = {
-      // ----------------------------- Warning --------------------------------
-      // | These PropTypes are generated from the TypeScript type definitions |
-      // |     To update them edit the d.ts file and run "yarn proptypes"     |
-      // ----------------------------------------------------------------------
-
-      /**
-       * @ignore
-       */
-      children: PropTypes.node,
-
-      /**
-       * The component used for the root node.
-       * Either a string to use a HTML element or a component.
-       */
-      component: PropTypes.elementType,
-
-      /**
-       * @ignore
-       */
-      sx: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.func])
-    } ;
     return Box;
   }
 
@@ -6900,8 +6884,8 @@
   }
 
   const _excluded$2g = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
-        _excluded2$d = ["theme"],
-        _excluded3$2 = ["theme"];
+        _excluded2$c = ["theme"],
+        _excluded3$1 = ["theme"];
 
   function isEmpty$1(obj) {
     return Object.keys(obj).length === 0;
@@ -6961,7 +6945,7 @@
   function shouldForwardProp(prop) {
     return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
   }
-  const systemDefaultTheme = createTheme$2();
+  const systemDefaultTheme = createTheme$1();
 
   const lowercaseFirstLetter = string => {
     return string.charAt(0).toLowerCase() + string.slice(1);
@@ -7019,7 +7003,7 @@
             let {
               theme: themeInput
             } = _ref,
-                other = _objectWithoutPropertiesLoose(_ref, _excluded2$d);
+                other = _objectWithoutPropertiesLoose(_ref, _excluded2$c);
 
             return stylesArg(_extends({
               theme: isEmpty$1(themeInput) ? defaultTheme : themeInput
@@ -7036,7 +7020,9 @@
             if (styleOverrides) {
               const resolvedStyleOverrides = {};
               Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
-                resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(props) : slotStyle;
+                resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(_extends({}, props, {
+                  theme
+                })) : slotStyle;
               });
               return overridesResolver(props, resolvedStyleOverrides);
             }
@@ -7078,7 +7064,7 @@
             let {
               theme: themeInput
             } = _ref2,
-                other = _objectWithoutPropertiesLoose(_ref2, _excluded3$2);
+                other = _objectWithoutPropertiesLoose(_ref2, _excluded3$1);
 
             return styleArg(_extends({
               theme: isEmpty$1(themeInput) ? defaultTheme : themeInput
@@ -7477,7 +7463,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     });
   }
 
-  ThemeProvider.propTypes = {
+  ThemeProvider.propTypes
+  /* remove-proptypes */
+  = {
+    // ----------------------------- Warning --------------------------------
+    // | These PropTypes are generated from the TypeScript type definitions |
+    // |     To update them edit the d.ts file and run "yarn proptypes"     |
+    // ----------------------------------------------------------------------
+
     /**
      * Your component tree.
      */
@@ -7486,7 +7479,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     /**
      * A theme object. You can provide a function to extend the outer theme.
      */
-    theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired
+    theme: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired
   } ;
 
   {
@@ -7510,16 +7503,18 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
    * assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
    * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
    */
-  const assignNestedKeys = (obj, keys, value) => {
+  const assignNestedKeys = (obj, keys, value, arrayKeys = []) => {
     let temp = obj;
     keys.forEach((k, index) => {
       if (index === keys.length - 1) {
-        if (temp && typeof temp === 'object') {
+        if (Array.isArray(temp)) {
+          temp[Number(k)] = value;
+        } else if (temp && typeof temp === 'object') {
           temp[k] = value;
         }
       } else if (temp && typeof temp === 'object') {
         if (!temp[k]) {
-          temp[k] = {};
+          temp[k] = arrayKeys.includes(k) ? [] : {};
         }
 
         temp = temp[k];
@@ -7539,14 +7534,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
    */
 
   const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
-    function recurse(object, parentKeys = []) {
+    function recurse(object, parentKeys = [], arrayKeys = []) {
       Object.entries(object).forEach(([key, value]) => {
         if (!shouldSkipPaths || shouldSkipPaths && !shouldSkipPaths([...parentKeys, key])) {
           if (value !== undefined && value !== null) {
             if (typeof value === 'object' && Object.keys(value).length > 0) {
-              recurse(value, [...parentKeys, key]);
+              recurse(value, [...parentKeys, key], Array.isArray(value) ? [...arrayKeys, key] : arrayKeys);
             } else {
-              callback([...parentKeys, key], value, object);
+              callback([...parentKeys, key], value, arrayKeys);
             }
           }
         }
@@ -7613,7 +7608,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const css = {};
     const vars = {};
     const parsedTheme = {};
-    walkObjectDeep(theme, (keys, value) => {
+    walkObjectDeep(theme, (keys, value, arrayKeys) => {
       if (typeof value === 'string' || typeof value === 'number') {
         if (typeof value === 'string' && value.match(/var\(\s*--/)) {
           // for CSS variable, apply prefix or remove basePrefix from the variable
@@ -7631,11 +7626,11 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           Object.assign(css, {
             [cssVar]: getCssValue(keys, value)
           });
-          assignNestedKeys(vars, keys, `var(${cssVar})`);
+          assignNestedKeys(vars, keys, `var(${cssVar})`, arrayKeys);
         }
       }
 
-      assignNestedKeys(parsedTheme, keys, value);
+      assignNestedKeys(parsedTheme, keys, value, arrayKeys);
     }, keys => keys[0] === 'vars' // skip 'vars/*' paths
     );
     return {
@@ -7650,12 +7645,13 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   const DEFAULT_ATTRIBUTE = 'data-mui-color-scheme';
   function getInitColorSchemeScript$1(options) {
     const {
-      enableSystem,
+      enableSystem = false,
       defaultLightColorScheme = 'light',
       defaultDarkColorScheme = 'dark',
       modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
       colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
-      attribute = DEFAULT_ATTRIBUTE
+      attribute = DEFAULT_ATTRIBUTE,
+      colorSchemeNode = 'document.documentElement'
     } = options || {};
     return /*#__PURE__*/jsxRuntime_1("script", {
       // eslint-disable-next-line react/no-danger
@@ -7679,7 +7675,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
         }
         if (colorScheme) {
-          document.documentElement.setAttribute('${attribute}', colorScheme);
+          ${colorSchemeNode}.setAttribute('${attribute}', colorScheme);
         }
       } catch (e) {} })();`
       }
@@ -7748,7 +7744,8 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       defaultDarkColorScheme,
       supportedColorSchemes = [],
       modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
-      colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY
+      colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
+      storageWindow = typeof window === 'undefined' ? undefined : window
     } = options;
     const joinedColorSchemes = supportedColorSchemes.join(',');
     const [state, setState] = React__namespace.useState(() => {
@@ -7765,6 +7762,10 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       setState(currentState => {
         const newMode = !mode ? defaultMode : mode;
 
+        if (mode === currentState.mode) {
+          return currentState;
+        }
+
         if (typeof localStorage !== 'undefined') {
           localStorage.setItem(modeStorageKey, newMode);
         }
@@ -7777,7 +7778,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     }, [modeStorageKey, defaultMode]);
     const setColorScheme = React__namespace.useCallback(value => {
       if (!value || typeof value === 'string') {
-        if (value && !supportedColorSchemes.includes(value)) {
+        if (value && !joinedColorSchemes.includes(value)) {
           console.error(`\`${value}\` does not exist in \`theme.colorSchemes\`.`);
         } else {
           setState(currentState => {
@@ -7804,7 +7805,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
             return newState;
           });
         }
-      } else if (value.light && !supportedColorSchemes.includes(value.light) || value.dark && !supportedColorSchemes.includes(value.dark)) {
+      } else if (value.light && !joinedColorSchemes.includes(value.light) || value.dark && !joinedColorSchemes.includes(value.dark)) {
         console.error(`\`${value}\` does not exist in \`theme.colorSchemes\`.`);
       } else {
         setState(currentState => {
@@ -7829,7 +7830,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           localStorage.setItem(`${colorSchemeStorageKey}-dark`, value.dark);
         }
       }
-    }, [colorSchemeStorageKey, supportedColorSchemes, defaultLightColorScheme, defaultDarkColorScheme]);
+    }, [joinedColorSchemes, colorSchemeStorageKey, defaultLightColorScheme, defaultDarkColorScheme]);
     const handleMediaQuery = React__namespace.useCallback(e => {
       if (state.mode === 'system') {
         setState(currentState => _extends({}, currentState, {
@@ -7891,9 +7892,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         }
       };
 
-      window.addEventListener('storage', handleStorage);
-      return () => window.removeEventListener('storage', handleStorage);
-    }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode]);
+      if (storageWindow) {
+        // For syncing color-scheme changes between iframes
+        storageWindow.addEventListener('storage', handleStorage);
+        return () => storageWindow.removeEventListener('storage', handleStorage);
+      }
+
+      return undefined;
+    }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow]);
     return _extends({}, state, {
       colorScheme,
       setMode,
@@ -7928,15 +7934,11 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return getCssVar;
   }
 
-  const _excluded$2f = ["colorSchemes"],
-        _excluded2$c = ["colorSchemes"],
-        _excluded3$1 = ["components"];
+  const _excluded$2f = ["colorSchemes", "components"];
   const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
   function createCssVarsProvider(options) {
-    var _baseTheme$breakpoint;
-
     const {
-      theme: baseTheme = {},
+      theme: defaultTheme = {},
       defaultMode: desisgnSystemMode = 'light',
       defaultColorScheme: designSystemColorScheme,
       disableTransitionOnChange: designSystemTransitionOnChange = false,
@@ -7945,10 +7947,8 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       shouldSkipGeneratingVar,
       resolveTheme
     } = options;
-    const systemSpacing = createSpacing(baseTheme.spacing);
-    const systemBreakpoints = createBreakpoints((_baseTheme$breakpoint = baseTheme.breakpoints) != null ? _baseTheme$breakpoint : {});
 
-    if (!baseTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !baseTheme.colorSchemes[designSystemColorScheme] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.dark]) {
+    if (!defaultTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !defaultTheme.colorSchemes[designSystemColorScheme] || typeof designSystemColorScheme === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || typeof designSystemColorScheme === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.dark]) {
       console.error(`MUI: \`${designSystemColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
     }
 
@@ -7966,34 +7966,28 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
     function CssVarsProvider({
       children,
-      theme: themeProp = {},
+      theme: themeProp = defaultTheme,
       prefix = designSystemPrefix,
       modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
+      colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
       attribute = DEFAULT_ATTRIBUTE,
       defaultMode = desisgnSystemMode,
       defaultColorScheme = designSystemColorScheme,
       disableTransitionOnChange = designSystemTransitionOnChange,
-      enableColorScheme = designSystemEnableColorScheme
+      enableColorScheme = designSystemEnableColorScheme,
+      storageWindow = typeof window === 'undefined' ? undefined : window,
+      documentNode = typeof document === 'undefined' ? undefined : document,
+      colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
+      colorSchemeSelector = ':root'
     }) {
-      const {
-        colorSchemes: baseColorSchemes = {}
-      } = baseTheme,
-            restBaseTheme = _objectWithoutPropertiesLoose(baseTheme, _excluded$2f);
+      const hasMounted = React__namespace.useRef(false);
 
       const {
-        colorSchemes: colorSchemesProp = {}
-      } = themeProp,
-            restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded2$c);
-
-      const hasMounted = React__namespace.useRef(false); // eslint-disable-next-line prefer-const
-
-      let _deepmerge = deepmerge(restBaseTheme, restThemeProp),
-          {
+        colorSchemes = {},
         components = {}
-      } = _deepmerge,
-          mergedTheme = _objectWithoutPropertiesLoose(_deepmerge, _excluded3$1);
+      } = themeProp,
+            restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded$2f);
 
-      const colorSchemes = deepmerge(baseColorSchemes, colorSchemesProp);
       const allColorSchemes = Object.keys(colorSchemes);
       const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
       const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
@@ -8010,7 +8004,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         defaultLightColorScheme,
         defaultDarkColorScheme,
         modeStorageKey,
-        defaultMode
+        colorSchemeStorageKey,
+        defaultMode,
+        storageWindow
       });
 
       const resolvedColorScheme = (() => {
@@ -8027,22 +8023,21 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         return colorScheme;
       })();
 
+      let theme = restThemeProp;
       const {
         css: rootCss,
         vars: rootVars,
         parsedTheme
-      } = cssVarsParser(mergedTheme, {
+      } = cssVarsParser(theme, {
         prefix,
         basePrefix: designSystemPrefix,
         shouldSkipGeneratingVar
       });
-      mergedTheme = _extends({}, parsedTheme, {
+      theme = _extends({}, parsedTheme, {
         components,
         colorSchemes,
         prefix,
         vars: rootVars,
-        spacing: themeProp.spacing ? createSpacing(themeProp.spacing) : systemSpacing,
-        breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints,
         getCssVar: createGetCssVar(prefix)
       });
       const styleSheet = {};
@@ -8056,10 +8051,16 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           basePrefix: designSystemPrefix,
           shouldSkipGeneratingVar
         });
-        mergedTheme.vars = deepmerge(mergedTheme.vars, vars);
+        theme.vars = deepmerge(theme.vars, vars);
 
         if (key === resolvedColorScheme) {
-          mergedTheme = _extends({}, mergedTheme, parsedScheme);
+          theme = _extends({}, theme, parsedScheme);
+
+          if (theme.palette) {
+            // assign runtime mode & colorScheme
+            theme.palette.mode = mode;
+            theme.palette.colorScheme = resolvedColorScheme;
+          }
         }
 
         const resolvedDefaultColorScheme = (() => {
@@ -8075,54 +8076,54 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         })();
 
         if (key === resolvedDefaultColorScheme) {
-          styleSheet[':root'] = css;
+          styleSheet[colorSchemeSelector] = css;
         } else {
-          styleSheet[`[${attribute}="${key}"]`] = css;
+          styleSheet[`${colorSchemeSelector === ':root' ? '' : colorSchemeSelector}[${attribute}="${key}"]`] = css;
         }
       });
       React__namespace.useEffect(() => {
-        if (colorScheme) {
+        if (colorScheme && colorSchemeNode) {
           // attaches attribute to <html> because the css variables are attached to :root (html)
-          document.documentElement.setAttribute(attribute, colorScheme);
+          colorSchemeNode.setAttribute(attribute, colorScheme);
         }
-      }, [colorScheme, attribute]);
+      }, [colorScheme, attribute, colorSchemeNode]);
       useEnhancedEffect$1(() => {
-        if (!mode || !enableColorScheme) {
+        if (!mode || !enableColorScheme || !colorSchemeNode) {
           return undefined;
         }
 
-        const priorColorScheme = document.documentElement.style.getPropertyValue('color-scheme'); // `color-scheme` tells browser to render built-in elements according to its value: `light` or `dark`
+        const priorColorScheme = colorSchemeNode.style.getPropertyValue('color-scheme'); // `color-scheme` tells browser to render built-in elements according to its value: `light` or `dark`
 
         if (mode === 'system') {
-          document.documentElement.style.setProperty('color-scheme', systemMode);
+          colorSchemeNode.style.setProperty('color-scheme', systemMode);
         } else {
-          document.documentElement.style.setProperty('color-scheme', mode);
+          colorSchemeNode.style.setProperty('color-scheme', mode);
         }
 
         return () => {
-          document.documentElement.style.setProperty('color-scheme', priorColorScheme);
+          colorSchemeNode.style.setProperty('color-scheme', priorColorScheme);
         };
-      }, [mode, systemMode, enableColorScheme]);
+      }, [mode, systemMode, enableColorScheme, colorSchemeNode]);
       React__namespace.useEffect(() => {
         let timer;
 
-        if (disableTransitionOnChange && hasMounted.current) {
+        if (disableTransitionOnChange && hasMounted.current && documentNode) {
           // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
-          const css = document.createElement('style');
-          css.appendChild(document.createTextNode(DISABLE_CSS_TRANSITION));
-          document.head.appendChild(css); // Force browser repaint
+          const css = documentNode.createElement('style');
+          css.appendChild(documentNode.createTextNode(DISABLE_CSS_TRANSITION));
+          documentNode.head.appendChild(css); // Force browser repaint
 
-          (() => window.getComputedStyle(document.body))();
+          (() => window.getComputedStyle(documentNode.body))();
 
           timer = setTimeout(() => {
-            document.head.removeChild(css);
+            documentNode.head.removeChild(css);
           }, 1);
         }
 
         return () => {
           clearTimeout(timer);
         };
-      }, [colorScheme, disableTransitionOnChange]);
+      }, [colorScheme, disableTransitionOnChange, documentNode]);
       React__namespace.useEffect(() => {
         hasMounted.current = true;
         return () => {
@@ -8141,12 +8142,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         },
         children: [/*#__PURE__*/jsxRuntime_1(GlobalStyles$1, {
           styles: {
-            ':root': rootCss
+            [colorSchemeSelector]: rootCss
           }
         }), /*#__PURE__*/jsxRuntime_1(GlobalStyles$1, {
           styles: styleSheet
         }), /*#__PURE__*/jsxRuntime_1(ThemeProvider, {
-          theme: resolveTheme ? resolveTheme(mergedTheme) : mergedTheme,
+          theme: resolveTheme ? resolveTheme(theme) : theme,
           children: children
         })]
       });
@@ -8163,6 +8164,21 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
        */
       children: PropTypes.node,
 
+      /**
+       * The node used to attach the color-scheme attribute
+       */
+      colorSchemeNode: PropTypes.any,
+
+      /**
+       * The CSS selector for attaching the generated custom properties
+       */
+      colorSchemeSelector: PropTypes.string,
+
+      /**
+       * localStorage key used to store `colorScheme`
+       */
+      colorSchemeStorageKey: PropTypes.string,
+
       /**
        * The initial color scheme used.
        */
@@ -8178,6 +8194,11 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
        */
       disableTransitionOnChange: PropTypes.bool,
 
+      /**
+       * The document to attach the attribute to
+       */
+      documentNode: PropTypes.any,
+
       /**
        * Indicate to the browser which color scheme is used (light or dark) for rendering built-in UI
        */
@@ -8193,6 +8214,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
        */
       prefix: PropTypes.string,
 
+      /**
+       * The window that attaches the 'storage' event listener
+       * @default window
+       */
+      storageWindow: PropTypes.any,
+
       /**
        * The calculated theme object that will be passed through context.
        */
@@ -8826,7 +8853,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     };
 
     const handleValue = (event, newValue, reason, details) => {
-      if (Array.isArray(value)) {
+      if (multiple) {
         if (value.length === newValue.length && value.every((val, i) => val === newValue[i])) {
           return;
         }
@@ -8910,7 +8937,10 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         return;
       }
 
-      handleClose(event, 'toggleInput');
+      if (inputValue === '') {
+        handleClose(event, 'toggleInput');
+      }
+
       let nextTag = focusedTag;
 
       if (focusedTag === -1) {
@@ -9365,36 +9395,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return output;
   }
 
-  function useBadge(props) {
-    const {
-      badgeContent: badgeContentProp,
-      invisible: invisibleProp = false,
-      max: maxProp = 99,
-      showZero = false
-    } = props;
-    const prevProps = usePreviousProps$1({
-      badgeContent: badgeContentProp,
-      max: maxProp
-    });
-    let invisible = invisibleProp;
-
-    if (invisibleProp === false && badgeContentProp === 0 && !showZero) {
-      invisible = true;
-    }
-
-    const {
-      badgeContent,
-      max = maxProp
-    } = invisible ? prevProps : props;
-    const displayValue = badgeContent && Number(badgeContent) > max ? `${max}+` : badgeContent;
-    return {
-      badgeContent,
-      invisible,
-      max,
-      displayValue
-    };
-  }
-
   const defaultGenerator = componentName => componentName;
 
   const createClassNameGenerator = () => {
@@ -9443,6 +9443,36 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return result;
   }
 
+  function useBadge(props) {
+    const {
+      badgeContent: badgeContentProp,
+      invisible: invisibleProp = false,
+      max: maxProp = 99,
+      showZero = false
+    } = props;
+    const prevProps = usePreviousProps$1({
+      badgeContent: badgeContentProp,
+      max: maxProp
+    });
+    let invisible = invisibleProp;
+
+    if (invisibleProp === false && badgeContentProp === 0 && !showZero) {
+      invisible = true;
+    }
+
+    const {
+      badgeContent,
+      max = maxProp
+    } = invisible ? prevProps : props;
+    const displayValue = badgeContent && Number(badgeContent) > max ? `${max}+` : badgeContent;
+    return {
+      badgeContent,
+      invisible,
+      max,
+      displayValue
+    };
+  }
+
   function getBadgeUnstyledUtilityClass(slot) {
     return generateUtilityClass('BaseBadge', slot);
   }
@@ -9738,7 +9768,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
      * The mouse event to listen to. You can disable the listener by providing `false`.
      * @default 'onClick'
      */
-    mouseEvent: PropTypes.oneOf(['onClick', 'onMouseDown', 'onMouseUp', false]),
+    mouseEvent: PropTypes.oneOf(['onClick', 'onMouseDown', 'onMouseUp', 'onPointerDown', 'onPointerUp', false]),
 
     /**
      * Callback fired when a "click away" event is detected.
@@ -14916,7 +14946,8 @@ const theme2 = createTheme({ palette: {
 
     const paletteOutput = deepmerge(_extends({
       // A collection of common colors.
-      common: common$1,
+      common: _extends({}, common$1),
+      // prevent mutable object.
       // The palette mode, can be light or dark.
       mode,
       // The colors used to represent primary interface elements for a user.
@@ -15183,7 +15214,7 @@ const theme2 = createTheme({ palette: {
 
   const _excluded$25 = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 
-  function createTheme$1(options = {}, ...args) {
+  function createTheme(options = {}, ...args) {
     const {
       mixins: mixinsInput = {},
       palette: paletteInput = {},
@@ -15193,7 +15224,7 @@ const theme2 = createTheme({ palette: {
           other = _objectWithoutPropertiesLoose(options, _excluded$25);
 
     const palette = createPalette(paletteInput);
-    const systemTheme = createTheme$2(options);
+    const systemTheme = createTheme$1(options);
     let muiTheme = deepmerge(systemTheme, {
       mixins: createMixins(systemTheme.breakpoints, systemTheme.spacing, mixinsInput),
       palette,
@@ -15252,11 +15283,11 @@ const theme2 = createTheme({ palette: {
       }
     }
 
-    return createTheme$1(...args);
+    return createTheme(...args);
   }
 
   function createMuiStrictModeTheme(options, ...args) {
-    return createTheme$1(deepmerge({
+    return createTheme(deepmerge({
       unstable_strictMode: true
     }, options), ...args);
   }
@@ -15463,7 +15494,7 @@ Use unitless line heights instead.` );
     return theme;
   }
 
-  const defaultTheme$2 = createTheme$1();
+  const defaultTheme$2 = createTheme();
   var defaultTheme$3 = defaultTheme$2;
 
   function useTheme() {
@@ -15514,52 +15545,73 @@ You have to import it from @mui/styles.
 See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }
 
-  const _excluded$24 = ["colorSchemes", "opacity"],
+  const _excluded$24 = ["colorSchemes"],
         _excluded2$9 = ["palette"];
-  const defaultOpacity = {
-    active: 0.54,
-    hover: 0.04,
-    selected: 0.08,
-    disabled: 0.26,
-    focus: 0.12
-  };
-
-  function createTheme(options = {}, ...args) {
-    var _colorSchemesInput$li, _colorSchemesInput$da;
+  function extendTheme(options = {}, ...args) {
+    var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$da2;
 
     const {
-      colorSchemes: colorSchemesInput = {},
-      opacity: opacityInput = {}
+      colorSchemes: colorSchemesInput = {}
     } = options,
-          input = _objectWithoutPropertiesLoose(options, _excluded$24); // eslint-disable-next-line prefer-const
-
+          input = _objectWithoutPropertiesLoose(options, _excluded$24);
 
-    let _createThemeWithoutVa = createTheme$1(_extends({}, input, colorSchemesInput.light && {
+    const _createThemeWithoutVa = createTheme(_extends({}, input, colorSchemesInput.light && {
       palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
     })),
-        {
+          {
       palette: lightPalette
     } = _createThemeWithoutVa,
-        muiTheme = _objectWithoutPropertiesLoose(_createThemeWithoutVa, _excluded2$9);
+          muiTheme = _objectWithoutPropertiesLoose(_createThemeWithoutVa, _excluded2$9);
 
     const {
       palette: darkPalette
-    } = createTheme$1({
+    } = createTheme({
       palette: _extends({
         mode: 'dark'
       }, (_colorSchemesInput$da = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da.palette)
     });
-    colorSchemesInput.light = {
-      palette: lightPalette
-    };
-    colorSchemesInput.dark = {
-      palette: darkPalette
-    };
-    const colorSchemes = {};
-    Object.keys(colorSchemesInput).forEach(key => {
-      const palette = createPalette(colorSchemesInput[key].palette);
+
+    let theme = _extends({}, muiTheme, {
+      colorSchemes: _extends({}, colorSchemesInput, {
+        light: _extends({}, colorSchemesInput.light, {
+          palette: lightPalette,
+          opacity: _extends({
+            placeholder: 0.42,
+            inputTouchBottomLine: 0.42
+          }, (_colorSchemesInput$li2 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li2.opacity)
+        }),
+        dark: _extends({}, colorSchemesInput.dark, {
+          palette: darkPalette,
+          opacity: _extends({
+            placeholder: 0.5,
+            inputTouchBottomLine: 0.7
+          }, (_colorSchemesInput$da2 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da2.opacity)
+        })
+      })
+    });
+
+    Object.keys(theme.colorSchemes).forEach(key => {
+      const palette = theme.colorSchemes[key].palette; // attach black & white channels to common node
+
+      if (key === 'dark') {
+        palette.common.background = palette.common.background || '#000';
+        palette.common.onBackground = palette.common.onBackground || '#fff';
+      } else {
+        palette.common.background = palette.common.background || '#fff';
+        palette.common.onBackground = palette.common.onBackground || '#000';
+      }
+
+      palette.common.backgroundChannel = colorChannel(palette.common.background);
+      palette.common.onBackgroundChannel = colorChannel(palette.common.onBackground);
+      palette.dividerChannel = colorChannel(palette.divider); // special token for Tooltip
+      // TODO: consider adding `main`, and `light` to palette.grey to make it consistent.
+
+      if (!palette.grey.dark) {
+        palette.grey.dark = palette.grey[700];
+      }
+
       Object.keys(palette).forEach(color => {
-        const colors = palette[color];
+        const colors = palette[color]; // Color palettes: primary, secondary, error, info, success, and warning
 
         if (colors.main) {
           palette[color].mainChannel = colorChannel(colors.main);
@@ -15573,6 +15625,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           palette[color].darkChannel = colorChannel(colors.dark);
         }
 
+        if (colors.contrastText) {
+          palette[color].contrastTextChannel = colorChannel(colors.contrastText);
+        } // Text colors: text.primary, text.secondary
+
+
         if (colors.primary) {
           palette[color].primaryChannel = colorChannel(colors.primary);
         }
@@ -15580,25 +15637,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         if (colors.secondary) {
           palette[color].secondaryChannel = colorChannel(colors.secondary);
         }
-
-        if (colors.disabled) {
-          palette[color].disabledChannel = colorChannel(colors.disabled);
-        }
       });
-      colorSchemes[key] = {
-        palette
-      };
     });
-
-    const opacity = _extends({}, defaultOpacity, opacityInput);
-
-    muiTheme.colorSchemes = colorSchemes;
-    muiTheme.opacity = opacity;
-    muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
-    return muiTheme;
+    theme = args.reduce((acc, argument) => deepmerge(acc, argument), theme);
+    return theme;
   }
 
-  const defaultTheme$1 = createTheme();
+  const defaultTheme$1 = extendTheme();
   const {
     CssVarsProvider: Experimental_CssVarsProvider,
     useColorScheme,
@@ -15653,7 +15698,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme,
     ownerState
   }) => {
-    var _theme$transitions, _theme$transitions$cr, _theme$transitions2, _theme$transitions2$d, _theme$typography, _theme$typography$pxT, _theme$typography2, _theme$typography2$px, _theme$typography3, _theme$typography3$px, _theme$palette$ownerS, _theme$palette, _theme$palette$ownerS2, _theme$palette2, _theme$palette2$actio, _theme$palette3, _theme$palette3$actio;
+    var _theme$transitions, _theme$transitions$cr, _theme$transitions2, _theme$transitions2$d, _theme$typography, _theme$typography$pxT, _theme$typography2, _theme$typography2$px, _theme$typography3, _theme$typography3$px, _palette$ownerState$c, _palette, _palette$ownerState$c2, _palette2, _palette2$action, _palette3, _palette3$action;
 
     return {
       userSelect: 'none',
@@ -15672,9 +15717,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         large: ((_theme$typography3 = theme.typography) == null ? void 0 : (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875'
       }[ownerState.fontSize],
       // TODO v5 deprecate, v6 remove for sx
-      color: (_theme$palette$ownerS = (_theme$palette = theme.palette) == null ? void 0 : (_theme$palette$ownerS2 = _theme$palette[ownerState.color]) == null ? void 0 : _theme$palette$ownerS2.main) != null ? _theme$palette$ownerS : {
-        action: (_theme$palette2 = theme.palette) == null ? void 0 : (_theme$palette2$actio = _theme$palette2.action) == null ? void 0 : _theme$palette2$actio.active,
-        disabled: (_theme$palette3 = theme.palette) == null ? void 0 : (_theme$palette3$actio = _theme$palette3.action) == null ? void 0 : _theme$palette3$actio.disabled,
+      color: (_palette$ownerState$c = (_palette = (theme.vars || theme).palette) == null ? void 0 : (_palette$ownerState$c2 = _palette[ownerState.color]) == null ? void 0 : _palette$ownerState$c2.main) != null ? _palette$ownerState$c : {
+        action: (_palette2 = (theme.vars || theme).palette) == null ? void 0 : (_palette2$action = _palette2.action) == null ? void 0 : _palette2$action.active,
+        disabled: (_palette3 = (theme.vars || theme).palette) == null ? void 0 : (_palette3$action = _palette3.action) == null ? void 0 : _palette3$action.disabled,
         inherit: undefined
       }[ownerState.color]
     };
@@ -17484,7 +17529,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         height: 1,
         content: '""',
         opacity: 1,
-        backgroundColor: theme.palette.divider,
+        backgroundColor: (theme.vars || theme).palette.divider,
         transition: theme.transitions.create(['opacity', 'background-color'], transition)
       },
       '&:first-of-type': {
@@ -17509,7 +17554,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         }
       },
       [`&.${accordionClasses$1.disabled}`]: {
-        backgroundColor: theme.palette.action.disabledBackground
+        backgroundColor: (theme.vars || theme).palette.action.disabledBackground
       }
     };
   }, ({
@@ -17518,12 +17563,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }) => _extends({}, !ownerState.square && {
     borderRadius: 0,
     '&:first-of-type': {
-      borderTopLeftRadius: theme.shape.borderRadius,
-      borderTopRightRadius: theme.shape.borderRadius
+      borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
+      borderTopRightRadius: (theme.vars || theme).shape.borderRadius
     },
     '&:last-of-type': {
-      borderBottomLeftRadius: theme.shape.borderRadius,
-      borderBottomRightRadius: theme.shape.borderRadius,
+      borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
+      borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
       // Fix a rendering issue on Edge
       '@supports (-ms-ime-align: auto)': {
         borderBottomLeftRadius: 0,
@@ -18882,10 +18927,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       padding: theme.spacing(0, 2),
       transition: theme.transitions.create(['min-height', 'background-color'], transition),
       [`&.${accordionSummaryClasses$1.focusVisible}`]: {
-        backgroundColor: theme.palette.action.focus
+        backgroundColor: (theme.vars || theme).palette.action.focus
       },
       [`&.${accordionSummaryClasses$1.disabled}`]: {
-        opacity: theme.palette.action.disabledOpacity
+        opacity: (theme.vars || theme).palette.action.disabledOpacity
       },
       [`&:hover:not(.${accordionSummaryClasses$1.disabled})`]: {
         cursor: 'pointer'
@@ -18923,7 +18968,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme
   }) => ({
     display: 'flex',
-    color: theme.palette.action.active,
+    color: (theme.vars || theme).palette.action.active,
     transform: 'rotate(0deg)',
     transition: theme.transitions.create('transform', {
       duration: theme.transitions.duration.shortest
@@ -19092,13 +19137,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     borderRadius: '50%',
     overflow: 'visible',
     // Explicitly set the default value to solve a bug on IE11.
-    color: theme.palette.action.active,
+    color: (theme.vars || theme).palette.action.active,
     transition: theme.transitions.create('background-color', {
       duration: theme.transitions.duration.shortest
     })
   }, !ownerState.disableRipple && {
     '&:hover': {
-      backgroundColor: alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.active} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent'
@@ -19114,10 +19159,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }) => _extends({}, ownerState.color === 'inherit' && {
     color: 'inherit'
   }, ownerState.color !== 'inherit' && ownerState.color !== 'default' && _extends({
-    color: theme.palette[ownerState.color].main
+    color: (theme.vars || theme).palette[ownerState.color].main
   }, !ownerState.disableRipple && {
     '&:hover': {
-      backgroundColor: alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent'
@@ -19132,7 +19177,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }, {
     [`&.${iconButtonClasses$1.disabled}`]: {
       backgroundColor: 'transparent',
-      color: theme.palette.action.disabled
+      color: (theme.vars || theme).palette.action.disabled
     }
   }));
   /**
@@ -20187,12 +20232,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     boxSizing: 'border-box',
     lineHeight: '48px',
     listStyle: 'none',
-    color: theme.palette.text.secondary,
+    color: (theme.vars || theme).palette.text.secondary,
     fontFamily: theme.typography.fontFamily,
     fontWeight: theme.typography.fontWeightMedium,
     fontSize: theme.typography.pxToRem(14)
   }, ownerState.color === 'primary' && {
-    color: theme.palette.primary.main
+    color: (theme.vars || theme).palette.primary.main
   }, ownerState.color === 'inherit' && {
     color: 'inherit'
   }, !ownerState.disableGutters && {
@@ -20204,7 +20249,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     position: 'sticky',
     top: 0,
     zIndex: 1,
-    backgroundColor: theme.palette.background.paper
+    backgroundColor: (theme.vars || theme).palette.background.paper
   }));
   const ListSubheader = /*#__PURE__*/React__namespace.forwardRef(function ListSubheader(inProps, ref) {
     const props = useThemeProps({
@@ -20959,7 +21004,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme,
     ownerState
   }) => _extends({}, theme.typography.body1, {
-    color: theme.palette.text.primary,
+    color: (theme.vars || theme).palette.text.primary,
     lineHeight: '1.4375em',
     // 23px
     boxSizing: 'border-box',
@@ -20969,7 +21014,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     display: 'inline-flex',
     alignItems: 'center',
     [`&.${inputBaseClasses$1.disabled}`]: {
-      color: theme.palette.text.disabled,
+      color: (theme.vars || theme).palette.text.disabled,
       cursor: 'default'
     }
   }, ownerState.multiline && _extends({
@@ -20988,17 +21033,25 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     ownerState
   }) => {
     const light = theme.palette.mode === 'light';
-    const placeholder = {
-      color: 'currentColor',
-      opacity: light ? 0.42 : 0.5,
+
+    const placeholder = _extends({
+      color: 'currentColor'
+    }, theme.vars ? {
+      opacity: theme.vars.opacity.placeholder
+    } : {
+      opacity: light ? 0.42 : 0.5
+    }, {
       transition: theme.transitions.create('opacity', {
         duration: theme.transitions.duration.shorter
       })
-    };
+    });
+
     const placeholderHidden = {
       opacity: '0 !important'
     };
-    const placeholderVisible = {
+    const placeholderVisible = theme.vars ? {
+      opacity: theme.vars.opacity.placeholder
+    } : {
       opacity: light ? 0.42 : 0.5
     };
     return _extends({
@@ -21059,7 +21112,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       [`&.${inputBaseClasses$1.disabled}`]: {
         opacity: 1,
         // Reset iOS opacity
-        WebkitTextFillColor: theme.palette.text.disabled // Fix opacity Safari bug
+        WebkitTextFillColor: (theme.vars || theme).palette.text.disabled // Fix opacity Safari bug
 
       },
       '&:-webkit-autofill': {
@@ -21878,7 +21931,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme,
     ownerState
   }) => _extends({
-    zIndex: theme.zIndex.modal
+    zIndex: (theme.vars || theme).zIndex.modal
   }, ownerState.disablePortal && {
     position: 'absolute'
   }));
@@ -21898,7 +21951,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   })(({
     theme
   }) => ({
-    color: theme.palette.text.secondary,
+    color: (theme.vars || theme).palette.text.secondary,
     padding: '14px 16px'
   }));
   const AutocompleteNoOptions = styled$1('div', {
@@ -21908,7 +21961,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   })(({
     theme
   }) => ({
-    color: theme.palette.text.secondary,
+    color: (theme.vars || theme).palette.text.secondary,
     padding: '14px 16px'
   }));
   const AutocompleteListbox = styled$1('div', {
@@ -21941,30 +21994,30 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         minHeight: 'auto'
       },
       [`&.${autocompleteClasses$1.focused}`]: {
-        backgroundColor: theme.palette.action.hover,
+        backgroundColor: (theme.vars || theme).palette.action.hover,
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
           backgroundColor: 'transparent'
         }
       },
       '&[aria-disabled="true"]': {
-        opacity: theme.palette.action.disabledOpacity,
+        opacity: (theme.vars || theme).palette.action.disabledOpacity,
         pointerEvents: 'none'
       },
       [`&.${autocompleteClasses$1.focusVisible}`]: {
-        backgroundColor: theme.palette.action.focus
+        backgroundColor: (theme.vars || theme).palette.action.focus
       },
       '&[aria-selected="true"]': {
-        backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
         [`&.${autocompleteClasses$1.focused}`]: {
-          backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
           // Reset on touch devices, it doesn't add specificity
           '@media (hover: none)': {
-            backgroundColor: theme.palette.action.selected
+            backgroundColor: (theme.vars || theme).palette.action.selected
           }
         },
         [`&.${autocompleteClasses$1.focusVisible}`]: {
-          backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
         }
       }
     }
@@ -21976,7 +22029,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   })(({
     theme
   }) => ({
-    backgroundColor: theme.palette.background.paper,
+    backgroundColor: (theme.vars || theme).palette.background.paper,
     top: -8
   }));
   const AutocompleteGroupUl = styled$1('ul', {
@@ -22172,10 +22225,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           fullWidth: true,
           size: size === 'small' ? 'small' : undefined,
           InputLabelProps: getInputLabelProps(),
-          InputProps: {
+          InputProps: _extends({
             ref: setAnchorEl,
             className: classes.inputRoot,
-            startAdornment,
+            startAdornment
+          }, (hasClearIcon || hasPopupIcon) && {
             endAdornment: /*#__PURE__*/jsxRuntime_2(AutocompleteEndAdornment, {
               className: classes.endAdornment,
               ownerState: ownerState,
@@ -22195,7 +22249,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
                 children: popupIcon
               })) : null]
             })
-          },
+          }),
           inputProps: _extends({
             className: clsx(classes.input),
             disabled,
@@ -23020,7 +23074,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme
   }) => ({
     [`& .${avatarClasses$1.root}`]: {
-      border: `2px solid ${theme.palette.background.default}`,
+      border: `2px solid ${(theme.vars || theme).palette.background.default}`,
       boxSizing: 'content-box',
       marginLeft: -8,
       '&:last-child': {
@@ -23037,7 +23091,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   })(({
     theme
   }) => ({
-    border: `2px solid ${theme.palette.background.default}`,
+    border: `2px solid ${(theme.vars || theme).palette.background.default}`,
     boxSizing: 'content-box',
     marginLeft: -8,
     '&:last-child': {
@@ -23645,8 +23699,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       duration: theme.transitions.duration.enteringScreen
     })
   }, ownerState.color !== 'default' && {
-    backgroundColor: theme.palette[ownerState.color].main,
-    color: theme.palette[ownerState.color].contrastText
+    backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
+    color: (theme.vars || theme).palette[ownerState.color].contrastText
   }, ownerState.variant === 'dot' && {
     borderRadius: RADIUS_DOT,
     height: RADIUS_DOT * 2,
@@ -23960,7 +24014,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     display: 'flex',
     justifyContent: 'center',
     height: 56,
-    backgroundColor: theme.palette.background.paper
+    backgroundColor: (theme.vars || theme).palette.background.paper
   }));
   const BottomNavigation = /*#__PURE__*/React__namespace.forwardRef(function BottomNavigation(inProps, ref) {
     const props = useThemeProps({
@@ -24104,18 +24158,19 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     transition: theme.transitions.create(['color', 'padding-top'], {
       duration: theme.transitions.duration.short
     }),
-    padding: '6px 12px 8px',
+    padding: '0px 12px',
     minWidth: 80,
     maxWidth: 168,
-    color: theme.palette.text.secondary,
+    color: (theme.vars || theme).palette.text.secondary,
     flexDirection: 'column',
     flex: '1'
   }, !ownerState.showLabel && !ownerState.selected && {
-    paddingTop: 16
+    paddingTop: 14
+  }, !ownerState.showLabel && !ownerState.selected && !ownerState.label && {
+    paddingTop: 0
   }, {
     [`&.${bottomNavigationActionClasses$1.selected}`]: {
-      paddingTop: 6,
-      color: theme.palette.primary.main
+      color: (theme.vars || theme).palette.primary.main
     }
   }));
   const BottomNavigationActionLabel = styled$1('span', {
@@ -24247,16 +24302,36 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   } ;
   var BottomNavigationAction$1 = BottomNavigationAction;
 
-  const defaultTheme = createTheme$1();
-  /**
-   * @ignore - do not document.
-   */
-
+  const defaultTheme = createTheme();
   const Box = createBox({
     defaultTheme,
     defaultClassName: 'MuiBox-root',
     generateClassName: ClassNameGenerator$1.generate
   });
+  Box.propTypes
+  /* remove-proptypes */
+  = {
+    // ----------------------------- Warning --------------------------------
+    // | These PropTypes are generated from the TypeScript type definitions |
+    // |     To update them edit the d.ts file and run "yarn proptypes"     |
+    // ----------------------------------------------------------------------
+
+    /**
+     * @ignore
+     */
+    children: PropTypes.node,
+
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component: PropTypes.elementType,
+
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+  } ;
   var Box$1 = Box;
 
   var MoreHorizIcon = createSvgIcon( /*#__PURE__*/jsxRuntime_1("path", {
@@ -25011,9 +25086,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     ownerState
   }) => _extends({
     display: 'inline-flex',
-    borderRadius: theme.shape.borderRadius
+    borderRadius: (theme.vars || theme).shape.borderRadius
   }, ownerState.variant === 'contained' && {
-    boxShadow: theme.shadows[2]
+    boxShadow: (theme.vars || theme).shadows[2]
   }, ownerState.disableElevation && {
     boxShadow: 'none'
   }, ownerState.fullWidth && {
@@ -25041,27 +25116,27 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         borderBottomRightRadius: 0,
         borderBottomLeftRadius: 0
       }, ownerState.variant === 'text' && ownerState.orientation === 'horizontal' && {
-        borderRight: `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`
+        borderRight: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`
       }, ownerState.variant === 'text' && ownerState.orientation === 'vertical' && {
-        borderBottom: `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`
+        borderBottom: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`
       }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
-        borderColor: alpha(theme.palette[ownerState.color].main, 0.5)
+        borderColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : alpha(theme.palette[ownerState.color].main, 0.5)
       }, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
         borderRightColor: 'transparent'
       }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
         borderBottomColor: 'transparent'
       }, ownerState.variant === 'contained' && ownerState.orientation === 'horizontal' && {
-        borderRight: `1px solid ${theme.palette.grey[400]}`,
+        borderRight: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
         [`&.${buttonGroupClasses$1.disabled}`]: {
-          borderRight: `1px solid ${theme.palette.action.disabled}`
+          borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`
         }
       }, ownerState.variant === 'contained' && ownerState.orientation === 'vertical' && {
-        borderBottom: `1px solid ${theme.palette.grey[400]}`,
+        borderBottom: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
         [`&.${buttonGroupClasses$1.disabled}`]: {
-          borderBottom: `1px solid ${theme.palette.action.disabled}`
+          borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`
         }
       }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
-        borderColor: theme.palette[ownerState.color].dark
+        borderColor: (theme.vars || theme).palette[ownerState.color].dark
       }, {
         '&:hover': _extends({}, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
           borderRightColor: 'currentColor'
@@ -25358,13 +25433,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     textAlign: 'inherit',
     width: '100%',
     [`&:hover .${cardActionAreaClasses$1.focusHighlight}`]: {
-      opacity: theme.palette.action.hoverOpacity,
+      opacity: (theme.vars || theme).palette.action.hoverOpacity,
       '@media (hover: none)': {
         opacity: 0
       }
     },
     [`&.${cardActionAreaClasses$1.focusVisible} .${cardActionAreaClasses$1.focusHighlight}`]: {
-      opacity: theme.palette.action.focusOpacity
+      opacity: (theme.vars || theme).palette.action.focusOpacity
     }
   }));
   const CardActionAreaFocusHighlight = styled$1('span', {
@@ -26607,7 +26682,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }, ownerState.variant === 'determinate' && {
     transition: theme.transitions.create('transform')
   }, ownerState.color !== 'inherit' && {
-    color: theme.palette[ownerState.color].main
+    color: (theme.vars || theme).palette[ownerState.color].main
   }), ({
     ownerState
   }) => ownerState.variant === 'indeterminate' && css(_t3$2 || (_t3$2 = _$2`
@@ -26979,12 +27054,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     colorScheme: theme.palette.mode
   });
   const body = theme => _extends({
-    color: theme.palette.text.primary
+    color: (theme.vars || theme).palette.text.primary
   }, theme.typography.body1, {
-    backgroundColor: theme.palette.background.default,
+    backgroundColor: (theme.vars || theme).palette.background.default,
     '@media print': {
       // Save printer ink.
-      backgroundColor: theme.palette.common.white
+      backgroundColor: (theme.vars || theme).palette.common.white
     }
   });
   const styles$3 = (theme, enableColorScheme = false) => {
@@ -27004,7 +27079,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         // Add support for document.body.requestFullScreen().
         // Other elements, if background transparent, are not supported.
         '&::backdrop': {
-          backgroundColor: theme.palette.background.default
+          backgroundColor: (theme.vars || theme).palette.background.default
         }
       })
     };
@@ -27112,7 +27187,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     ownerState
   }) => _extends({
     position: 'fixed',
-    zIndex: theme.zIndex.modal,
+    zIndex: (theme.vars || theme).zIndex.modal,
     right: 0,
     bottom: 0,
     top: 0,
@@ -27925,8 +28000,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     padding: '20px 24px'
   }, ownerState.dividers ? {
     padding: '16px 24px',
-    borderTop: `1px solid ${theme.palette.divider}`,
-    borderBottom: `1px solid ${theme.palette.divider}`
+    borderTop: `1px solid ${(theme.vars || theme).palette.divider}`,
+    borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
   } : {
     [`.${dialogTitleClasses$1.root} + &`]: {
       paddingTop: 0
@@ -28185,7 +28260,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     flexShrink: 0,
     borderWidth: 0,
     borderStyle: 'solid',
-    borderColor: theme.palette.divider,
+    borderColor: (theme.vars || theme).palette.divider,
     borderBottomWidth: 'thin'
   }, ownerState.absolute && {
     position: 'absolute',
@@ -28193,7 +28268,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     left: 0,
     width: '100%'
   }, ownerState.light && {
-    borderColor: alpha(theme.palette.divider, 0.08)
+    borderColor: theme.vars ? `rgba(${theme.vars.palette.dividerChannel} / 0.08)` : alpha(theme.palette.divider, 0.08)
   }, ownerState.variant === 'inset' && {
     marginLeft: 72
   }, ownerState.variant === 'middle' && ownerState.orientation === 'horizontal' && {
@@ -28220,7 +28295,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     '&::before, &::after': {
       position: 'relative',
       width: '100%',
-      borderTop: `thin solid ${theme.palette.divider}`,
+      borderTop: `thin solid ${(theme.vars || theme).palette.divider}`,
       top: '50%',
       content: '""',
       transform: 'translateY(50%)'
@@ -28235,7 +28310,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       top: '0%',
       left: '50%',
       borderTop: 0,
-      borderLeft: `thin solid ${theme.palette.divider}`,
+      borderLeft: `thin solid ${(theme.vars || theme).palette.divider}`,
       transform: 'translateX(0%)'
     }
   }), ({
@@ -28799,7 +28874,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   })(({
     theme
   }) => ({
-    zIndex: theme.zIndex.drawer
+    zIndex: (theme.vars || theme).zIndex.drawer
   }));
   const DrawerDockedRoot = styled$1('div', {
     shouldForwardProp: rootShouldForwardProp,
@@ -28828,7 +28903,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     flexDirection: 'column',
     height: '100%',
     flex: '1 0 auto',
-    zIndex: theme.zIndex.drawer,
+    zIndex: (theme.vars || theme).zIndex.drawer,
     // Add iOS momentum scrolling for iOS < 13.0
     WebkitOverflowScrolling: 'touch',
     // temporary style
@@ -28856,13 +28931,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     height: 'auto',
     maxHeight: '100%'
   }, ownerState.anchor === 'left' && ownerState.variant !== 'temporary' && {
-    borderRight: `1px solid ${theme.palette.divider}`
+    borderRight: `1px solid ${(theme.vars || theme).palette.divider}`
   }, ownerState.anchor === 'top' && ownerState.variant !== 'temporary' && {
-    borderBottom: `1px solid ${theme.palette.divider}`
+    borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
   }, ownerState.anchor === 'right' && ownerState.variant !== 'temporary' && {
-    borderLeft: `1px solid ${theme.palette.divider}`
+    borderLeft: `1px solid ${(theme.vars || theme).palette.divider}`
   }, ownerState.anchor === 'bottom' && ownerState.variant !== 'temporary' && {
-    borderTop: `1px solid ${theme.palette.divider}`
+    borderTop: `1px solid ${(theme.vars || theme).palette.divider}`
   }));
   const oppositeDirection = {
     left: 'right',
@@ -29122,77 +29197,81 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   })(({
     theme,
     ownerState
-  }) => _extends({}, theme.typography.button, {
-    minHeight: 36,
-    transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
-      duration: theme.transitions.duration.short
-    }),
-    borderRadius: '50%',
-    padding: 0,
-    minWidth: 0,
-    width: 56,
-    height: 56,
-    zIndex: theme.zIndex.fab,
-    boxShadow: theme.shadows[6],
-    '&:active': {
-      boxShadow: theme.shadows[12]
-    },
-    color: theme.palette.getContrastText(theme.palette.grey[300]),
-    backgroundColor: theme.palette.grey[300],
-    '&:hover': {
-      backgroundColor: theme.palette.grey.A100,
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: theme.palette.grey[300]
+  }) => {
+    var _theme$palette$getCon, _theme$palette;
+
+    return _extends({}, theme.typography.button, {
+      minHeight: 36,
+      transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
+        duration: theme.transitions.duration.short
+      }),
+      borderRadius: '50%',
+      padding: 0,
+      minWidth: 0,
+      width: 56,
+      height: 56,
+      zIndex: (theme.vars || theme).zIndex.fab,
+      boxShadow: (theme.vars || theme).shadows[6],
+      '&:active': {
+        boxShadow: (theme.vars || theme).shadows[12]
       },
-      textDecoration: 'none'
-    },
-    [`&.${fabClasses$1.focusVisible}`]: {
-      boxShadow: theme.shadows[6]
-    },
-    [`&.${fabClasses$1.disabled}`]: {
-      color: theme.palette.action.disabled,
-      boxShadow: theme.shadows[0],
-      backgroundColor: theme.palette.action.disabledBackground
-    }
-  }, ownerState.size === 'small' && {
-    width: 40,
-    height: 40
-  }, ownerState.size === 'medium' && {
-    width: 48,
-    height: 48
-  }, ownerState.variant === 'extended' && {
-    borderRadius: 48 / 2,
-    padding: '0 16px',
-    width: 'auto',
-    minHeight: 'auto',
-    minWidth: 48,
-    height: 48
-  }, ownerState.variant === 'extended' && ownerState.size === 'small' && {
-    width: 'auto',
-    padding: '0 8px',
-    borderRadius: 34 / 2,
-    minWidth: 34,
-    height: 34
-  }, ownerState.variant === 'extended' && ownerState.size === 'medium' && {
-    width: 'auto',
-    padding: '0 16px',
-    borderRadius: 40 / 2,
-    minWidth: 40,
-    height: 40
-  }, ownerState.color === 'inherit' && {
-    color: 'inherit'
-  }), ({
+      color: theme.vars ? theme.vars.palette.text.primary : (_theme$palette$getCon = (_theme$palette = theme.palette).getContrastText) == null ? void 0 : _theme$palette$getCon.call(_theme$palette, theme.palette.grey[300]),
+      backgroundColor: (theme.vars || theme).palette.grey[300],
+      '&:hover': {
+        backgroundColor: (theme.vars || theme).palette.grey.A100,
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: (theme.vars || theme).palette.grey[300]
+        },
+        textDecoration: 'none'
+      },
+      [`&.${fabClasses$1.focusVisible}`]: {
+        boxShadow: (theme.vars || theme).shadows[6]
+      },
+      [`&.${fabClasses$1.disabled}`]: {
+        color: (theme.vars || theme).palette.action.disabled,
+        boxShadow: (theme.vars || theme).shadows[0],
+        backgroundColor: (theme.vars || theme).palette.action.disabledBackground
+      }
+    }, ownerState.size === 'small' && {
+      width: 40,
+      height: 40
+    }, ownerState.size === 'medium' && {
+      width: 48,
+      height: 48
+    }, ownerState.variant === 'extended' && {
+      borderRadius: 48 / 2,
+      padding: '0 16px',
+      width: 'auto',
+      minHeight: 'auto',
+      minWidth: 48,
+      height: 48
+    }, ownerState.variant === 'extended' && ownerState.size === 'small' && {
+      width: 'auto',
+      padding: '0 8px',
+      borderRadius: 34 / 2,
+      minWidth: 34,
+      height: 34
+    }, ownerState.variant === 'extended' && ownerState.size === 'medium' && {
+      width: 'auto',
+      padding: '0 16px',
+      borderRadius: 40 / 2,
+      minWidth: 40,
+      height: 40
+    }, ownerState.color === 'inherit' && {
+      color: 'inherit'
+    });
+  }, ({
     theme,
     ownerState
-  }) => _extends({}, ownerState.color !== 'inherit' && ownerState.color !== 'default' && theme.palette[ownerState.color] != null && {
-    color: theme.palette[ownerState.color].contrastText,
-    backgroundColor: theme.palette[ownerState.color].main,
+  }) => _extends({}, ownerState.color !== 'inherit' && ownerState.color !== 'default' && (theme.vars || theme).palette[ownerState.color] != null && {
+    color: (theme.vars || theme).palette[ownerState.color].contrastText,
+    backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
     '&:hover': {
-      backgroundColor: theme.palette[ownerState.color].dark,
+      backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
-        backgroundColor: theme.palette[ownerState.color].main
+        backgroundColor: (theme.vars || theme).palette[ownerState.color].main
       }
     }
   }));
@@ -29355,6 +29434,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme,
     ownerState
   }) => {
+    var _theme$palette;
+
     const light = theme.palette.mode === 'light';
     const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
     const backgroundColor = light ? 'rgba(0, 0, 0, 0.06)' : 'rgba(255, 255, 255, 0.09)';
@@ -29382,7 +29463,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }
     }, !ownerState.disableUnderline && {
       '&:after': {
-        borderBottom: `2px solid ${theme.palette[ownerState.color].main}`,
+        borderBottom: `2px solid ${(_theme$palette = theme.palette[ownerState.color || 'primary']) == null ? void 0 : _theme$palette.main}`,
         left: 0,
         bottom: 0,
         // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
@@ -30111,7 +30192,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }, {
     [`& .${formControlLabelClasses$1.label}`]: {
       [`&.${formControlLabelClasses$1.disabled}`]: {
-        color: theme.palette.text.disabled
+        color: (theme.vars || theme).palette.text.disabled
       }
     }
   }));
@@ -30426,7 +30507,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme,
     ownerState
   }) => _extends({
-    color: theme.palette.text.secondary
+    color: (theme.vars || theme).palette.text.secondary
   }, theme.typography.caption, {
     textAlign: 'left',
     marginTop: 3,
@@ -30434,10 +30515,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     marginBottom: 0,
     marginLeft: 0,
     [`&.${formHelperTextClasses$1.disabled}`]: {
-      color: theme.palette.text.disabled
+      color: (theme.vars || theme).palette.text.disabled
     },
     [`&.${formHelperTextClasses$1.error}`]: {
-      color: theme.palette.error.main
+      color: (theme.vars || theme).palette.error.main
     }
   }, ownerState.size === 'small' && {
     marginTop: 4
@@ -30602,19 +30683,19 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme,
     ownerState
   }) => _extends({
-    color: theme.palette.text.secondary
+    color: (theme.vars || theme).palette.text.secondary
   }, theme.typography.body1, {
     lineHeight: '1.4375em',
     padding: 0,
     position: 'relative',
     [`&.${formLabelClasses$1.focused}`]: {
-      color: theme.palette[ownerState.color].main
+      color: (theme.vars || theme).palette[ownerState.color].main
     },
     [`&.${formLabelClasses$1.disabled}`]: {
-      color: theme.palette.text.disabled
+      color: (theme.vars || theme).palette.text.disabled
     },
     [`&.${formLabelClasses$1.error}`]: {
-      color: theme.palette.error.main
+      color: (theme.vars || theme).palette.error.main
     }
   }));
   const AsteriskComponent = styled$1('span', {
@@ -30625,7 +30706,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme
   }) => ({
     [`&.${formLabelClasses$1.error}`]: {
-      color: theme.palette.error.main
+      color: (theme.vars || theme).palette.error.main
     }
   }));
   const FormLabel = /*#__PURE__*/React__namespace.forwardRef(function FormLabel(inProps, ref) {
@@ -32314,14 +32395,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }[ownerState.fontSize],
     // TODO v5 deprecate, v6 remove for sx
     color: {
-      primary: theme.palette.primary.main,
-      secondary: theme.palette.secondary.main,
-      info: theme.palette.info.main,
-      success: theme.palette.success.main,
-      warning: theme.palette.warning.main,
-      action: theme.palette.action.active,
-      error: theme.palette.error.main,
-      disabled: theme.palette.action.disabled,
+      primary: (theme.vars || theme).palette.primary.main,
+      secondary: (theme.vars || theme).palette.secondary.main,
+      info: (theme.vars || theme).palette.info.main,
+      success: (theme.vars || theme).palette.success.main,
+      warning: (theme.vars || theme).palette.warning.main,
+      action: (theme.vars || theme).palette.action.active,
+      error: (theme.vars || theme).palette.error.main,
+      disabled: (theme.vars || theme).palette.action.disabled,
       inherit: undefined
     }[ownerState.color]
   }));
@@ -32858,7 +32939,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return _extends({
       flexGrow: 1,
       padding: '12px 16px',
-      color: theme.palette.common.white,
+      color: (theme.vars || theme).palette.common.white,
       overflow: 'hidden'
     }, ownerState.position === 'below' && {
       padding: '6px 0 12px',
@@ -33047,7 +33128,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     ownerState
   }) => {
     const light = theme.palette.mode === 'light';
-    const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
+    let bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
+
+    if (theme.vars) {
+      bottomLineColor = `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputTouchBottomLine})`;
+    }
+
     return _extends({
       position: 'relative'
     }, ownerState.formControl && {
@@ -33056,7 +33142,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }
     }, !ownerState.disableUnderline && {
       '&:after': {
-        borderBottom: `2px solid ${theme.palette[ownerState.color].main}`,
+        borderBottom: `2px solid ${(theme.vars || theme).palette[ownerState.color].main}`,
         left: 0,
         bottom: 0,
         // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
@@ -33077,7 +33163,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         transform: 'scaleX(1) translateX(0)'
       },
       [`&.${inputClasses$1.error}:after`]: {
-        borderBottomColor: theme.palette.error.main,
+        borderBottomColor: (theme.vars || theme).palette.error.main,
         transform: 'scaleX(1)' // error is always underlined in red
 
       },
@@ -33096,7 +33182,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
       },
       [`&:hover:not(.${inputClasses$1.disabled}):before`]: {
-        borderBottom: `2px solid ${theme.palette.text.primary}`,
+        borderBottom: `2px solid ${(theme.vars || theme).palette.text.primary}`,
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
           borderBottom: `1px solid ${bottomLineColor}`
@@ -33392,7 +33478,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     maxHeight: '2em',
     alignItems: 'center',
     whiteSpace: 'nowrap',
-    color: theme.palette.action.active
+    color: (theme.vars || theme).palette.action.active
   }, ownerState.variant === 'filled' && {
     // Styles applied to the root element if `variant="filled"`.
     [`&.${inputAdornmentClasses$1.positionStart}&:not(.${inputAdornmentClasses$1.hiddenLabel})`]: {
@@ -34203,7 +34289,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
   });
   const Link = /*#__PURE__*/React__namespace.forwardRef(function Link(inProps, ref) {
-    const theme = useTheme();
     const props = useThemeProps({
       props: inProps,
       name: 'MuiLink'
@@ -34222,7 +34307,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     } = props,
           other = _objectWithoutPropertiesLoose(props, _excluded$10);
 
-    const sxColor = typeof sx === 'function' ? sx(theme).color : sx == null ? void 0 : sx.color;
     const {
       isFocusVisibleRef,
       onBlur: handleBlurVisible,
@@ -34257,9 +34341,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     };
 
     const ownerState = _extends({}, props, {
-      // It is too complex to support any types of `sx`.
-      // Need to find a better way to get rid of the color manipulation for `textDecorationColor`.
-      color: (typeof sxColor === 'function' ? sxColor(theme) : sxColor) || color,
+      color,
       component,
       focusVisible,
       underline,
@@ -34277,8 +34359,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       ref: handlerRef,
       ownerState: ownerState,
       variant: variant,
-      sx: [...(inProps.color ? [{
-        color: colorTransformations[color] || color
+      sx: [...(!Object.keys(colorTransformations).includes(color) ? [{
+        color
       }] : []), ...(Array.isArray(sx) ? sx : [sx])]
     }, other));
   });
@@ -34566,33 +34648,33 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }),
     '&:hover': {
       textDecoration: 'none',
-      backgroundColor: theme.palette.action.hover,
+      backgroundColor: (theme.vars || theme).palette.action.hover,
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent'
       }
     },
     [`&.${listItemButtonClasses$1.selected}`]: {
-      backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
       [`&.${listItemButtonClasses$1.focusVisible}`]: {
-        backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
       }
     },
     [`&.${listItemButtonClasses$1.selected}:hover`]: {
-      backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
-        backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
       }
     },
     [`&.${listItemButtonClasses$1.focusVisible}`]: {
-      backgroundColor: theme.palette.action.focus
+      backgroundColor: (theme.vars || theme).palette.action.focus
     },
     [`&.${listItemButtonClasses$1.disabled}`]: {
-      opacity: theme.palette.action.disabledOpacity
+      opacity: (theme.vars || theme).palette.action.disabledOpacity
     }
   }, ownerState.divider && {
-    borderBottom: `1px solid ${theme.palette.divider}`,
+    borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
     backgroundClip: 'padding-box'
   }, ownerState.alignItems === 'flex-start' && {
     alignItems: 'flex-start'
@@ -34909,21 +34991,21 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }
   }, {
     [`&.${listItemClasses$1.focusVisible}`]: {
-      backgroundColor: theme.palette.action.focus
+      backgroundColor: (theme.vars || theme).palette.action.focus
     },
     [`&.${listItemClasses$1.selected}`]: {
-      backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
       [`&.${listItemClasses$1.focusVisible}`]: {
-        backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
       }
     },
     [`&.${listItemClasses$1.disabled}`]: {
-      opacity: theme.palette.action.disabledOpacity
+      opacity: (theme.vars || theme).palette.action.disabledOpacity
     }
   }, ownerState.alignItems === 'flex-start' && {
     alignItems: 'flex-start'
   }, ownerState.divider && {
-    borderBottom: `1px solid ${theme.palette.divider}`,
+    borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
     backgroundClip: 'padding-box'
   }, ownerState.button && {
     transition: theme.transitions.create('background-color', {
@@ -34931,17 +35013,17 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }),
     '&:hover': {
       textDecoration: 'none',
-      backgroundColor: theme.palette.action.hover,
+      backgroundColor: (theme.vars || theme).palette.action.hover,
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent'
       }
     },
     [`&.${listItemClasses$1.selected}:hover`]: {
-      backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
-        backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
       }
     }
   }, ownerState.hasSecondaryAction && {
@@ -35374,7 +35456,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     ownerState
   }) => _extends({
     minWidth: 56,
-    color: theme.palette.action.active,
+    color: (theme.vars || theme).palette.action.active,
     flexShrink: 0,
     display: 'inline-flex'
   }, ownerState.alignItems === 'flex-start' && {
@@ -36754,35 +36836,35 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     paddingLeft: 16,
     paddingRight: 16
   }, ownerState.divider && {
-    borderBottom: `1px solid ${theme.palette.divider}`,
+    borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
     backgroundClip: 'padding-box'
   }, {
     '&:hover': {
       textDecoration: 'none',
-      backgroundColor: theme.palette.action.hover,
+      backgroundColor: (theme.vars || theme).palette.action.hover,
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent'
       }
     },
     [`&.${menuItemClasses$1.selected}`]: {
-      backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
       [`&.${menuItemClasses$1.focusVisible}`]: {
-        backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
       }
     },
     [`&.${menuItemClasses$1.selected}:hover`]: {
-      backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
-        backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
       }
     },
     [`&.${menuItemClasses$1.focusVisible}`]: {
-      backgroundColor: theme.palette.action.focus
+      backgroundColor: (theme.vars || theme).palette.action.focus
     },
     [`&.${menuItemClasses$1.disabled}`]: {
-      opacity: theme.palette.action.disabledOpacity
+      opacity: (theme.vars || theme).palette.action.disabledOpacity
     },
     [`& + .${dividerClasses$1.root}`]: {
       marginTop: theme.spacing(1),
@@ -37006,20 +37088,20 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    background: theme.palette.background.default,
+    background: (theme.vars || theme).palette.background.default,
     padding: 8
   }, ownerState.position === 'bottom' && {
     position: 'fixed',
     bottom: 0,
     left: 0,
     right: 0,
-    zIndex: theme.zIndex.mobileStepper
+    zIndex: (theme.vars || theme).zIndex.mobileStepper
   }, ownerState.position === 'top' && {
     position: 'fixed',
     top: 0,
     left: 0,
     right: 0,
-    zIndex: theme.zIndex.mobileStepper
+    zIndex: (theme.vars || theme).zIndex.mobileStepper
   }));
   const MobileStepperDots = styled$1('div', {
     name: 'MuiMobileStepper',
@@ -37049,13 +37131,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     transition: theme.transitions.create('background-color', {
       duration: theme.transitions.duration.shortest
     }),
-    backgroundColor: theme.palette.action.disabled,
+    backgroundColor: (theme.vars || theme).palette.action.disabled,
     borderRadius: '50%',
     width: 8,
     height: 8,
     margin: '0 2px'
   }, dotActive && {
-    backgroundColor: theme.palette.primary.main
+    backgroundColor: (theme.vars || theme).palette.primary.main
   })));
   const MobileStepperProgress = styled$1(LinearProgress$1, {
     name: 'MuiMobileStepper',
@@ -38180,10 +38262,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     minWidth: 32,
     padding: '0 6px',
     margin: '0 3px',
-    color: theme.palette.text.primary,
+    color: (theme.vars || theme).palette.text.primary,
     height: 'auto',
     [`&.${paginationItemClasses$1.disabled}`]: {
-      opacity: theme.palette.action.disabledOpacity
+      opacity: (theme.vars || theme).palette.action.disabledOpacity
     }
   }, ownerState.size === 'small' && {
     minWidth: 26,
@@ -38211,39 +38293,39 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     height: 32,
     padding: '0 6px',
     margin: '0 3px',
-    color: theme.palette.text.primary,
+    color: (theme.vars || theme).palette.text.primary,
     [`&.${paginationItemClasses$1.focusVisible}`]: {
-      backgroundColor: theme.palette.action.focus
+      backgroundColor: (theme.vars || theme).palette.action.focus
     },
     [`&.${paginationItemClasses$1.disabled}`]: {
-      opacity: theme.palette.action.disabledOpacity
+      opacity: (theme.vars || theme).palette.action.disabledOpacity
     },
     transition: theme.transitions.create(['color', 'background-color'], {
       duration: theme.transitions.duration.short
     }),
     '&:hover': {
-      backgroundColor: theme.palette.action.hover,
+      backgroundColor: (theme.vars || theme).palette.action.hover,
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent'
       }
     },
     [`&.${paginationItemClasses$1.selected}`]: {
-      backgroundColor: theme.palette.action.selected,
+      backgroundColor: (theme.vars || theme).palette.action.selected,
       '&:hover': {
-        backgroundColor: alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selected} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
-          backgroundColor: theme.palette.action.selected
+          backgroundColor: (theme.vars || theme).palette.action.selected
         }
       },
       [`&.${paginationItemClasses$1.focusVisible}`]: {
-        backgroundColor: alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selected} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
       },
       [`&.${paginationItemClasses$1.disabled}`]: {
         opacity: 1,
-        color: theme.palette.action.disabled,
-        backgroundColor: theme.palette.action.selected
+        color: (theme.vars || theme).palette.action.disabled,
+        backgroundColor: (theme.vars || theme).palette.action.selected
       }
     }
   }, ownerState.size === 'small' && {
@@ -38259,49 +38341,49 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     padding: '0 10px',
     fontSize: theme.typography.pxToRem(15)
   }, ownerState.shape === 'rounded' && {
-    borderRadius: theme.shape.borderRadius
+    borderRadius: (theme.vars || theme).shape.borderRadius
   }), ({
     theme,
     ownerState
   }) => _extends({}, ownerState.variant === 'text' && {
     [`&.${paginationItemClasses$1.selected}`]: _extends({}, ownerState.color !== 'standard' && {
-      color: theme.palette[ownerState.color].contrastText,
-      backgroundColor: theme.palette[ownerState.color].main,
+      color: (theme.vars || theme).palette[ownerState.color].contrastText,
+      backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
       '&:hover': {
-        backgroundColor: theme.palette[ownerState.color].dark,
+        backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
-          backgroundColor: theme.palette[ownerState.color].main
+          backgroundColor: (theme.vars || theme).palette[ownerState.color].main
         }
       },
       [`&.${paginationItemClasses$1.focusVisible}`]: {
-        backgroundColor: theme.palette[ownerState.color].dark
+        backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
       }
     }, {
       [`&.${paginationItemClasses$1.disabled}`]: {
-        color: theme.palette.action.disabled
+        color: (theme.vars || theme).palette.action.disabled
       }
     })
   }, ownerState.variant === 'outlined' && {
-    border: `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
+    border: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
     [`&.${paginationItemClasses$1.selected}`]: _extends({}, ownerState.color !== 'standard' && {
-      color: theme.palette[ownerState.color].main,
-      border: `1px solid ${alpha(theme.palette[ownerState.color].main, 0.5)}`,
-      backgroundColor: alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity),
+      color: (theme.vars || theme).palette[ownerState.color].main,
+      border: `1px solid ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : alpha(theme.palette[ownerState.color].main, 0.5)}`,
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.activatedOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity),
       '&:hover': {
-        backgroundColor: alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity),
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity),
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
           backgroundColor: 'transparent'
         }
       },
       [`&.${paginationItemClasses$1.focusVisible}`]: {
-        backgroundColor: alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity)
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity)
       }
     }, {
       [`&.${paginationItemClasses$1.disabled}`]: {
-        borderColor: theme.palette.action.disabledBackground,
-        color: theme.palette.action.disabled
+        borderColor: (theme.vars || theme).palette.action.disabledBackground,
+        color: (theme.vars || theme).palette.action.disabled
       }
     })
   }));
@@ -39273,7 +39355,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     textAlign: 'left',
     WebkitTapHighlightColor: 'transparent',
     [`&.${ratingClasses$1.disabled}`]: {
-      opacity: theme.palette.action.disabledOpacity,
+      opacity: (theme.vars || theme).palette.action.disabledOpacity,
       pointerEvents: 'none'
     },
     [`&.${ratingClasses$1.focusVisible} .${ratingClasses$1.iconActive}`]: {
@@ -39326,7 +39408,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }, ownerState.iconActive && {
     transform: 'scale(1.2)'
   }, ownerState.iconEmpty && {
-    color: theme.palette.action.disabled
+    color: (theme.vars || theme).palette.action.disabled
   }));
   const RatingDecimal = styled$1('span', {
     name: 'MuiRating',
@@ -42150,7 +42232,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
 
     return _extends({
-      zIndex: theme.zIndex.snackbar,
+      zIndex: (theme.vars || theme).zIndex.snackbar,
       position: 'fixed',
       display: 'flex',
       left: 8,
@@ -42846,7 +42928,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme,
     ownerState
   }) => _extends({
-    zIndex: theme.zIndex.speedDial,
+    zIndex: (theme.vars || theme).zIndex.speedDial,
     display: 'flex',
     alignItems: 'center',
     pointerEvents: 'none'
@@ -43376,7 +43458,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     ownerState,
     open
   }) => _extends({
-    zIndex: theme.zIndex.tooltip,
+    zIndex: (theme.vars || theme).zIndex.tooltip,
     pointerEvents: 'none'
   }, !ownerState.disableInteractive && {
     pointerEvents: 'auto'
@@ -43437,9 +43519,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme,
     ownerState
   }) => _extends({
-    backgroundColor: alpha(theme.palette.grey[700], 0.92),
-    borderRadius: theme.shape.borderRadius,
-    color: theme.palette.common.white,
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.grey.darkChannel} / 0.92)` : alpha(theme.palette.grey[700], 0.92),
+    borderRadius: (theme.vars || theme).shape.borderRadius,
+    color: (theme.vars || theme).palette.common.white,
     fontFamily: theme.typography.fontFamily,
     padding: '4px 8px',
     fontSize: theme.typography.pxToRem(11),
@@ -43505,7 +43587,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     /* = width / sqrt(2) = (length of the hypotenuse) */
     ,
     boxSizing: 'border-box',
-    color: alpha(theme.palette.grey[700], 0.9),
+    color: theme.vars ? `rgba(${theme.vars.palette.grey.darkChannel} / 0.9)` : alpha(theme.palette.grey[700], 0.9),
     '&::before': {
       content: '""',
       margin: 'auto',
@@ -44709,15 +44791,22 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   var Stack$1 = Stack;
 
   /**
-   * @ignore - internal component.
+   * Provides information about the current step in Stepper.
    */
-
   const StepperContext = /*#__PURE__*/React__namespace.createContext({});
 
   {
     StepperContext.displayName = 'StepperContext';
   }
+  /**
+   * Returns the current StepperContext or an empty object if no StepperContext
+   * has been defined in the component tree.
+   */
+
 
+  function useStepperContext() {
+    return React__namespace.useContext(StepperContext);
+  }
   var StepperContext$1 = StepperContext;
 
   /**
@@ -44956,15 +45045,15 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     transition: theme.transitions.create('color', {
       duration: theme.transitions.duration.shortest
     }),
-    color: theme.palette.text.disabled,
+    color: (theme.vars || theme).palette.text.disabled,
     [`&.${stepIconClasses$1.completed}`]: {
-      color: theme.palette.primary.main
+      color: (theme.vars || theme).palette.primary.main
     },
     [`&.${stepIconClasses$1.active}`]: {
-      color: theme.palette.primary.main
+      color: (theme.vars || theme).palette.primary.main
     },
     [`&.${stepIconClasses$1.error}`]: {
-      color: theme.palette.error.main
+      color: (theme.vars || theme).palette.error.main
     }
   }));
   const StepIconText = styled$1('text', {
@@ -44974,7 +45063,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   })(({
     theme
   }) => ({
-    fill: theme.palette.primary.contrastText,
+    fill: (theme.vars || theme).palette.primary.contrastText,
     fontSize: theme.typography.caption.fontSize,
     fontFamily: theme.typography.fontFamily
   }));
@@ -45155,11 +45244,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       duration: theme.transitions.duration.shortest
     }),
     [`&.${stepLabelClasses$1.active}`]: {
-      color: theme.palette.text.primary,
+      color: (theme.vars || theme).palette.text.primary,
       fontWeight: 500
     },
     [`&.${stepLabelClasses$1.completed}`]: {
-      color: theme.palette.text.primary,
+      color: (theme.vars || theme).palette.text.primary,
       fontWeight: 500
     },
     [`&.${stepLabelClasses$1.alternativeLabel}`]: {
@@ -45167,7 +45256,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       marginTop: 16
     },
     [`&.${stepLabelClasses$1.error}`]: {
-      color: theme.palette.error.main
+      color: (theme.vars || theme).palette.error.main
     }
   }));
   const StepLabelIconContainer = styled$1('span', {
@@ -45191,7 +45280,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme
   }) => ({
     width: '100%',
-    color: theme.palette.text.secondary
+    color: (theme.vars || theme).palette.text.secondary
   }));
   const StepLabel = /*#__PURE__*/React__namespace.forwardRef(function StepLabel(inProps, ref) {
     const props = useThemeProps({
@@ -47006,23 +47095,23 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       opacity: 1
     },
     [`&.${tabClasses$1.disabled}`]: {
-      opacity: theme.palette.action.disabledOpacity
+      opacity: (theme.vars || theme).palette.action.disabledOpacity
     }
   }, ownerState.textColor === 'primary' && {
-    color: theme.palette.text.secondary,
+    color: (theme.vars || theme).palette.text.secondary,
     [`&.${tabClasses$1.selected}`]: {
-      color: theme.palette.primary.main
+      color: (theme.vars || theme).palette.primary.main
     },
     [`&.${tabClasses$1.disabled}`]: {
-      color: theme.palette.text.disabled
+      color: (theme.vars || theme).palette.text.disabled
     }
   }, ownerState.textColor === 'secondary' && {
-    color: theme.palette.text.secondary,
+    color: (theme.vars || theme).palette.text.secondary,
     [`&.${tabClasses$1.selected}`]: {
-      color: theme.palette.secondary.main
+      color: (theme.vars || theme).palette.secondary.main
     },
     [`&.${tabClasses$1.disabled}`]: {
-      color: theme.palette.text.disabled
+      color: (theme.vars || theme).palette.text.disabled
     }
   }, ownerState.fullWidth && {
     flexShrink: 1,
@@ -47264,7 +47353,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     borderSpacing: 0,
     '& caption': _extends({}, theme.typography.body2, {
       padding: theme.spacing(2),
-      color: theme.palette.text.secondary,
+      color: (theme.vars || theme).palette.text.secondary,
       textAlign: 'left',
       captionSide: 'bottom'
     })
@@ -48251,7 +48340,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme
   }) => ({
     overflow: 'auto',
-    color: theme.palette.text.primary,
+    color: (theme.vars || theme).palette.text.primary,
     fontSize: theme.typography.pxToRem(14),
     // Increase the specificity to override TableCell.
     '&:last-child': {
@@ -48682,12 +48771,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     // We disable the focus ring for mouse, touch and keyboard users.
     outline: 0,
     [`&.${tableRowClasses$1.hover}:hover`]: {
-      backgroundColor: theme.palette.action.hover
+      backgroundColor: (theme.vars || theme).palette.action.hover
     },
     [`&.${tableRowClasses$1.selected}`]: {
-      backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
       '&:hover': {
-        backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
       }
     }
   }));
@@ -48821,19 +48910,19 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     flexDirection: 'inherit',
     alignItems: 'center',
     '&:focus': {
-      color: theme.palette.text.secondary
+      color: (theme.vars || theme).palette.text.secondary
     },
     '&:hover': {
-      color: theme.palette.text.secondary,
+      color: (theme.vars || theme).palette.text.secondary,
       [`& .${tableSortLabelClasses$1.icon}`]: {
         opacity: 0.5
       }
     },
     [`&.${tableSortLabelClasses$1.active}`]: {
-      color: theme.palette.text.primary,
+      color: (theme.vars || theme).palette.text.primary,
       [`& .${tableSortLabelClasses$1.icon}`]: {
         opacity: 1,
-        color: theme.palette.text.secondary
+        color: (theme.vars || theme).palette.text.secondary
       }
     }
   }));
@@ -49371,9 +49460,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     width: '100%',
     transition: theme.transitions.create()
   }, ownerState.indicatorColor === 'primary' && {
-    backgroundColor: theme.palette.primary.main
+    backgroundColor: (theme.vars || theme).palette.primary.main
   }, ownerState.indicatorColor === 'secondary' && {
-    backgroundColor: theme.palette.secondary.main
+    backgroundColor: (theme.vars || theme).palette.secondary.main
   }, ownerState.vertical && {
     height: '100%',
     width: 2,
@@ -50484,35 +50573,42 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme,
     ownerState
   }) => {
-    const selectedColor = ownerState.color === 'standard' ? theme.palette.text.primary : theme.palette[ownerState.color].main;
+    let selectedColor = ownerState.color === 'standard' ? theme.palette.text.primary : theme.palette[ownerState.color].main;
+    let selectedColorChannel;
+
+    if (theme.vars) {
+      selectedColor = ownerState.color === 'standard' ? theme.vars.palette.text.primary : theme.vars.palette[ownerState.color].main;
+      selectedColorChannel = ownerState.color === 'standard' ? theme.vars.palette.text.primaryChannel : theme.vars.palette[ownerState.color].mainChannel;
+    }
+
     return _extends({}, theme.typography.button, {
-      borderRadius: theme.shape.borderRadius,
+      borderRadius: (theme.vars || theme).shape.borderRadius,
       padding: 11,
-      border: `1px solid ${theme.palette.divider}`,
-      color: theme.palette.action.active
+      border: `1px solid ${(theme.vars || theme).palette.divider}`,
+      color: (theme.vars || theme).palette.action.active
     }, ownerState.fullWidth && {
       width: '100%'
     }, {
       [`&.${toggleButtonClasses$1.disabled}`]: {
-        color: theme.palette.action.disabled,
-        border: `1px solid ${theme.palette.action.disabledBackground}`
+        color: (theme.vars || theme).palette.action.disabled,
+        border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
       },
       '&:hover': {
         textDecoration: 'none',
         // Reset on mouse devices
-        backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
         '@media (hover: none)': {
           backgroundColor: 'transparent'
         }
       },
       [`&.${toggleButtonClasses$1.selected}`]: {
         color: selectedColor,
-        backgroundColor: alpha(selectedColor, theme.palette.action.selectedOpacity),
+        backgroundColor: theme.vars ? `rgba(${selectedColorChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(selectedColor, theme.palette.action.selectedOpacity),
         '&:hover': {
-          backgroundColor: alpha(selectedColor, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+          backgroundColor: theme.vars ? `rgba(${selectedColorChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(selectedColor, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
           // Reset on touch devices, it doesn't add specificity
           '@media (hover: none)': {
-            backgroundColor: alpha(selectedColor, theme.palette.action.selectedOpacity)
+            backgroundColor: theme.vars ? `rgba(${selectedColorChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(selectedColor, theme.palette.action.selectedOpacity)
           }
         }
       }
@@ -50740,7 +50836,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme
   }) => _extends({
     display: 'inline-flex',
-    borderRadius: theme.shape.borderRadius
+    borderRadius: (theme.vars || theme).shape.borderRadius
   }, ownerState.orientation === 'vertical' && {
     flexDirection: 'column'
   }, ownerState.fullWidth && {
@@ -51120,6 +51216,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.StepIcon = StepIcon$1;
   exports.StepLabel = StepLabel$1;
   exports.Stepper = Stepper$1;
+  exports.StepperContext = StepperContext$1;
   exports.StyledEngineProvider = StyledEngineProvider;
   exports.SvgIcon = SvgIcon$1;
   exports.SwipeableDrawer = SwipeableDrawer$1;
@@ -51183,7 +51280,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.createMuiTheme = createMuiTheme;
   exports.createStyles = createStyles;
   exports.createSvgIcon = createSvgIcon;
-  exports.createTheme = createTheme$1;
+  exports.createTheme = createTheme;
   exports.css = css;
   exports.darkScrollbar = darkScrollbar;
   exports.darken = darken;
@@ -51201,7 +51298,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.easing = easing;
   exports.emphasize = emphasize;
   exports.experimentalStyled = styled$1;
-  exports.experimental_extendTheme = createTheme;
+  exports.experimental_extendTheme = extendTheme;
   exports.experimental_sx = sx;
   exports.fabClasses = fabClasses$1;
   exports.filledInputClasses = filledInputClasses$1;
@@ -51430,6 +51527,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.useRadioGroup = useRadioGroup;
   exports.useScrollTrigger = useScrollTrigger;
   exports.useStepContext = useStepContext;
+  exports.useStepperContext = useStepperContext;
   exports.useTheme = useTheme;
   exports.useThemeProps = useThemeProps;
   exports.withStyles = withStyles;