@mui/material 5.6.4 → 5.8.1

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.6.4
+/** @license MUI v5.8.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -4724,7 +4724,7 @@
     styles: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.func])
   } ;
 
-  function styled$2(tag, options) {
+  function styled$3(tag, options) {
     const stylesFactory = emStyled(tag, options);
 
     {
@@ -5565,6 +5565,74 @@
     return output;
   }
 
+  function composeClasses(slots, getUtilityClass, classes) {
+    const output = {};
+    Object.keys(slots).forEach( // `Objet.keys(slots)` can't be wider than `T` because we infer `T` from `slots`.
+    // @ts-expect-error https://github.com/microsoft/TypeScript/pull/12253#issuecomment-263132208
+    slot => {
+      output[slot] = slots[slot].reduce((acc, key) => {
+        if (key) {
+          if (classes && classes[key]) {
+            acc.push(classes[key]);
+          }
+
+          acc.push(getUtilityClass(key));
+        }
+
+        return acc;
+      }, []).join(' ');
+    });
+    return output;
+  }
+
+  const defaultGenerator = componentName => componentName;
+
+  const createClassNameGenerator = () => {
+    let generate = defaultGenerator;
+    return {
+      configure(generator) {
+        generate = generator;
+      },
+
+      generate(componentName) {
+        return generate(componentName);
+      },
+
+      reset() {
+        generate = defaultGenerator;
+      }
+
+    };
+  };
+
+  const ClassNameGenerator = createClassNameGenerator();
+  var ClassNameGenerator$1 = ClassNameGenerator;
+
+  const globalStateClassesMapping = {
+    active: 'Mui-active',
+    checked: 'Mui-checked',
+    completed: 'Mui-completed',
+    disabled: 'Mui-disabled',
+    error: 'Mui-error',
+    expanded: 'Mui-expanded',
+    focused: 'Mui-focused',
+    focusVisible: 'Mui-focusVisible',
+    required: 'Mui-required',
+    selected: 'Mui-selected'
+  };
+  function generateUtilityClass(componentName, slot) {
+    const globalStateClass = globalStateClassesMapping[slot];
+    return globalStateClass || `${ClassNameGenerator$1.generate(componentName)}-${slot}`;
+  }
+
+  function generateUtilityClasses(componentName, slots) {
+    const result = {};
+    slots.forEach(slot => {
+      result[slot] = generateUtilityClass(componentName, slot);
+    });
+    return result;
+  }
+
   function merge(acc, item) {
     if (!item) {
       return acc;
@@ -5703,13 +5771,13 @@
     }, {});
   }
 
-  function getPath(obj, path) {
+  function getPath(obj, path, checkVars = true) {
     if (!path || typeof path !== 'string') {
       return null;
     } // Check if CSS variables are used
 
 
-    if (obj && obj.vars) {
+    if (obj && obj.vars && checkVars) {
       const val = `vars.${path}`.split('.').reduce((acc, item) => acc && acc[item] ? acc[item] : null, obj);
 
       if (val != null) {
@@ -5864,7 +5932,7 @@
   function createUnaryUnit(theme, themeKey, defaultValue, propName) {
     var _getPath;
 
-    const themeSpacing = (_getPath = getPath(theme, themeKey)) != null ? _getPath : defaultValue;
+    const themeSpacing = (_getPath = getPath(theme, themeKey, false)) != null ? _getPath : defaultValue;
 
     if (typeof themeSpacing === 'number') {
       return abs => {
@@ -6696,7 +6764,7 @@
 
   const _excluded$2j = ["breakpoints", "palette", "spacing", "shape"];
 
-  function createTheme$2(options = {}, ...args) {
+  function createTheme$1(options = {}, ...args) {
     const {
       breakpoints: breakpointsInput = {},
       palette: paletteInput = {},
@@ -6819,7 +6887,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);
@@ -6833,7 +6901,7 @@
       generateClassName,
       styleFunctionSx = defaultStyleFunctionSx
     } = options;
-    const BoxRoot = styled$2('div')(styleFunctionSx);
+    const BoxRoot = styled$3('div')(styleFunctionSx);
     const Box = /*#__PURE__*/React__namespace.forwardRef(function Box(inProps, ref) {
       const theme = useTheme$1(defaultTheme);
 
@@ -6945,7 +7013,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);
@@ -6988,7 +7056,7 @@
         shouldForwardPropOption = slotShouldForwardProp;
       }
 
-      const defaultStyledResolver = styled$2(tag, _extends({
+      const defaultStyledResolver = styled$3(tag, _extends({
         shouldForwardProp: shouldForwardPropOption,
         label
       }, options));
@@ -7099,6 +7167,9 @@
     };
   }
 
+  const styled$2 = createStyled();
+  var systemStyled = styled$2;
+
   function getThemeProps(params) {
     const {
       theme,
@@ -7645,12 +7716,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
@@ -7674,7 +7746,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) {} })();`
       }
@@ -7743,7 +7815,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(() => {
@@ -7760,6 +7833,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);
         }
@@ -7772,7 +7849,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 => {
@@ -7799,7 +7876,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 => {
@@ -7824,7 +7901,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, {
@@ -7886,9 +7963,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,
@@ -7958,11 +8040,16 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       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 hasMounted = React__namespace.useRef(false);
 
@@ -7988,7 +8075,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         defaultLightColorScheme,
         defaultDarkColorScheme,
         modeStorageKey,
-        defaultMode
+        colorSchemeStorageKey,
+        defaultMode,
+        storageWindow
       });
 
       const resolvedColorScheme = (() => {
@@ -8022,7 +8111,8 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         vars: rootVars,
         getCssVar: createGetCssVar(prefix)
       });
-      const styleSheet = {};
+      const defaultColorSchemeStyleSheet = {};
+      const otherColorSchemesStyleSheet = {};
       Object.entries(colorSchemes).forEach(([key, scheme]) => {
         const {
           css,
@@ -8058,54 +8148,54 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         })();
 
         if (key === resolvedDefaultColorScheme) {
-          styleSheet[':root'] = css;
+          defaultColorSchemeStyleSheet[colorSchemeSelector] = css;
         } else {
-          styleSheet[`[${attribute}="${key}"]`] = css;
+          otherColorSchemesStyleSheet[`${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 () => {
@@ -8124,10 +8214,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
+          styles: defaultColorSchemeStyleSheet
+        }), /*#__PURE__*/jsxRuntime_1(GlobalStyles$1, {
+          styles: otherColorSchemesStyleSheet
         }), /*#__PURE__*/jsxRuntime_1(ThemeProvider, {
           theme: resolveTheme ? resolveTheme(theme) : theme,
           children: children
@@ -8146,6 +8238,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.
        */
@@ -8161,6 +8268,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
        */
@@ -8176,6 +8288,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.
        */
@@ -8188,7 +8306,149 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     };
   }
 
-  const _excluded$2e = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
+  const _excluded$2e = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
+  const defaultTheme$4 = createTheme$1();
+  const defaultCreateStyledComponent = systemStyled('div', {
+    name: 'MuiContainer',
+    slot: 'Root',
+    overridesResolver: (props, styles) => {
+      const {
+        ownerState
+      } = props;
+      return [styles.root, styles[`maxWidth${capitalize(String(ownerState.maxWidth))}`], ownerState.fixed && styles.fixed, ownerState.disableGutters && styles.disableGutters];
+    }
+  });
+
+  const useThemePropsDefault = inProps => useThemeProps$1({
+    props: inProps,
+    name: 'MuiContainer',
+    defaultTheme: defaultTheme$4
+  });
+
+  const useUtilityClasses$1P = (ownerState, componentName) => {
+    const getContainerUtilityClass = slot => {
+      return generateUtilityClass(componentName, slot);
+    };
+
+    const {
+      classes,
+      fixed,
+      disableGutters,
+      maxWidth
+    } = ownerState;
+    const slots = {
+      root: ['root', maxWidth && `maxWidth${capitalize(String(maxWidth))}`, fixed && 'fixed', disableGutters && 'disableGutters']
+    };
+    return composeClasses(slots, getContainerUtilityClass, classes);
+  };
+
+  function createContainer(options = {}) {
+    const {
+      // This will allow adding custom styled fn (for example for custom sx style function)
+      createStyledComponent = defaultCreateStyledComponent,
+      useThemeProps = useThemePropsDefault,
+      componentName = 'MuiContainer'
+    } = options;
+    const ContainerRoot = createStyledComponent(({
+      theme,
+      ownerState
+    }) => _extends({
+      width: '100%',
+      marginLeft: 'auto',
+      boxSizing: 'border-box',
+      marginRight: 'auto',
+      display: 'block'
+    }, !ownerState.disableGutters && {
+      paddingLeft: theme.spacing(2),
+      paddingRight: theme.spacing(2),
+      // @ts-ignore module augmentation fails if custom breakpoints are used
+      [theme.breakpoints.up('sm')]: {
+        paddingLeft: theme.spacing(3),
+        paddingRight: theme.spacing(3)
+      }
+    }), ({
+      theme,
+      ownerState
+    }) => ownerState.fixed && Object.keys(theme.breakpoints.values).reduce((acc, breakpointValueKey) => {
+      const breakpoint = breakpointValueKey;
+      const value = theme.breakpoints.values[breakpoint];
+
+      if (value !== 0) {
+        // @ts-ignore
+        acc[theme.breakpoints.up(breakpoint)] = {
+          maxWidth: `${value}${theme.breakpoints.unit}`
+        };
+      }
+
+      return acc;
+    }, {}), ({
+      theme,
+      ownerState
+    }) => _extends({}, ownerState.maxWidth === 'xs' && {
+      // @ts-ignore module augmentation fails if custom breakpoints are used
+      [theme.breakpoints.up('xs')]: {
+        // @ts-ignore module augmentation fails if custom breakpoints are used
+        maxWidth: Math.max(theme.breakpoints.values.xs, 444)
+      }
+    }, ownerState.maxWidth && // @ts-ignore module augmentation fails if custom breakpoints are used
+    ownerState.maxWidth !== 'xs' && {
+      // @ts-ignore module augmentation fails if custom breakpoints are used
+      [theme.breakpoints.up(ownerState.maxWidth)]: {
+        // @ts-ignore module augmentation fails if custom breakpoints are used
+        maxWidth: `${theme.breakpoints.values[ownerState.maxWidth]}${theme.breakpoints.unit}`
+      }
+    }));
+    const Container = /*#__PURE__*/React__namespace.forwardRef(function Container(inProps, ref) {
+      const props = useThemeProps(inProps);
+
+      const {
+        className,
+        component = 'div',
+        disableGutters = false,
+        fixed = false,
+        maxWidth = 'lg'
+      } = props,
+            other = _objectWithoutPropertiesLoose(props, _excluded$2e);
+
+      const ownerState = _extends({}, props, {
+        component,
+        disableGutters,
+        fixed,
+        maxWidth
+      }); // @ts-ignore module augmentation fails if custom breakpoints are used
+
+
+      const classes = useUtilityClasses$1P(ownerState, componentName);
+      return (
+        /*#__PURE__*/
+        // @ts-ignore theme is injected by the styled util
+        jsxRuntime_1(ContainerRoot, _extends({
+          as: component // @ts-ignore module augmentation fails if custom breakpoints are used
+          ,
+          ownerState: ownerState,
+          className: clsx(classes.root, className),
+          ref: ref
+        }, other))
+      );
+    });
+    Container.propTypes
+    /* remove-proptypes */
+    = {
+      children: PropTypes.node,
+      classes: PropTypes.object,
+      className: PropTypes.string,
+      component: PropTypes.elementType,
+      disableGutters: PropTypes.bool,
+      fixed: PropTypes.bool,
+      maxWidth: PropTypes
+      /* @typescript-to-proptypes-ignore */
+      .oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), PropTypes.string]),
+      sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+    } ;
+    return Container;
+  }
+
+  const _excluded$2d = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
         _excluded2$b = ["type", "mode"];
   function adaptV4Theme(inputTheme) {
     {
@@ -8203,7 +8463,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       props = {},
       styleOverrides = {}
     } = inputTheme,
-          other = _objectWithoutPropertiesLoose(inputTheme, _excluded$2e);
+          other = _objectWithoutPropertiesLoose(inputTheme, _excluded$2d);
 
     const theme = _extends({}, other, {
       components: {}
@@ -8603,7 +8863,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       if (reason === 'keyboard') {
         option.classList.add('Mui-focusVisible');
       } // Scroll active descendant into view.
-      // Logic copied from https://www.w3.org/TR/wai-aria-practices/examples/listbox/js/listbox.js
+      // Logic copied from https://www.w3.org/WAI/ARIA/apg/example-index/combobox/js/select-only.js
       //
       // Consider this API instead once it has a better browser support:
       // .scrollIntoView({ scrollMode: 'if-needed', block: 'nearest' });
@@ -8809,7 +9069,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;
         }
@@ -8893,7 +9153,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) {
@@ -9328,26 +9591,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     };
   }
 
-  function composeClasses(slots, getUtilityClass, classes) {
-    const output = {};
-    Object.keys(slots).forEach( // `Objet.keys(slots)` can't be wider than `T` because we infer `T` from `slots`.
-    // @ts-expect-error https://github.com/microsoft/TypeScript/pull/12253#issuecomment-263132208
-    slot => {
-      output[slot] = slots[slot].reduce((acc, key) => {
-        if (key) {
-          if (classes && classes[key]) {
-            acc.push(classes[key]);
-          }
-
-          acc.push(getUtilityClass(key));
-        }
-
-        return acc;
-      }, []).join(' ');
-    });
-    return output;
-  }
-
   function useBadge(props) {
     const {
       badgeContent: badgeContentProp,
@@ -9378,62 +9621,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     };
   }
 
-  const defaultGenerator = componentName => componentName;
-
-  const createClassNameGenerator = () => {
-    let generate = defaultGenerator;
-    return {
-      configure(generator) {
-        generate = generator;
-      },
-
-      generate(componentName) {
-        return generate(componentName);
-      },
-
-      reset() {
-        generate = defaultGenerator;
-      }
-
-    };
-  };
-
-  const ClassNameGenerator = createClassNameGenerator();
-  var ClassNameGenerator$1 = ClassNameGenerator;
-
-  const globalStateClassesMapping = {
-    active: 'Mui-active',
-    checked: 'Mui-checked',
-    completed: 'Mui-completed',
-    disabled: 'Mui-disabled',
-    error: 'Mui-error',
-    expanded: 'Mui-expanded',
-    focused: 'Mui-focused',
-    focusVisible: 'Mui-focusVisible',
-    required: 'Mui-required',
-    selected: 'Mui-selected'
-  };
-  function generateUtilityClass(componentName, slot) {
-    const globalStateClass = globalStateClassesMapping[slot];
-    return globalStateClass || `${ClassNameGenerator$1.generate(componentName)}-${slot}`;
-  }
-
-  function generateUtilityClasses(componentName, slots) {
-    const result = {};
-    slots.forEach(slot => {
-      result[slot] = generateUtilityClass(componentName, slot);
-    });
-    return result;
-  }
-
   function getBadgeUnstyledUtilityClass(slot) {
     return generateUtilityClass('BaseBadge', slot);
   }
   generateUtilityClasses('BaseBadge', ['root', 'badge', 'invisible']);
 
-  const _excluded$2d = ["badgeContent", "component", "children", "className", "components", "componentsProps", "invisible", "max", "showZero"];
+  const _excluded$2c = ["badgeContent", "component", "children", "className", "components", "componentsProps", "invisible", "max", "showZero"];
 
-  const useUtilityClasses$1P = ownerState => {
+  const useUtilityClasses$1O = ownerState => {
     const {
       invisible
     } = ownerState;
@@ -9454,7 +9649,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       max: maxProp = 99,
       showZero = false
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2d);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2c);
 
     const {
       badgeContent,
@@ -9472,7 +9667,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       showZero
     });
 
-    const classes = useUtilityClasses$1P(ownerState);
+    const classes = useUtilityClasses$1O(ownerState);
     const Root = component || components.Root || 'span';
     const rootProps = appendOwnerState(Root, _extends({}, other, componentsProps.root), ownerState);
     const Badge = components.Badge || 'span';
@@ -9721,7 +9916,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.
@@ -11786,7 +11981,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
   var Portal$1 = Portal;
 
-  const _excluded$2c = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "ownerState", "placement", "popperOptions", "popperRef", "TransitionProps"],
+  const _excluded$2b = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "ownerState", "placement", "popperOptions", "popperRef", "TransitionProps"],
         _excluded2$a = ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition"];
 
   function flipPlacement(placement, direction) {
@@ -11832,7 +12027,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       popperRef: popperRefProp,
       TransitionProps
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2c);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2b);
 
     const tooltipRef = React__namespace.useRef(null);
     const ownRef = useForkRef(tooltipRef, ref);
@@ -12722,9 +12917,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   const modalUnstyledClasses = generateUtilityClasses('MuiModal', ['root', 'hidden']);
   var modalUnstyledClasses$1 = modalUnstyledClasses;
 
-  const _excluded$2b = ["BackdropComponent", "BackdropProps", "children", "classes", "className", "closeAfterTransition", "component", "components", "componentsProps", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "theme", "onTransitionEnter", "onTransitionExited"];
+  const _excluded$2a = ["BackdropComponent", "BackdropProps", "children", "classes", "className", "closeAfterTransition", "component", "components", "componentsProps", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "theme", "onTransitionEnter", "onTransitionExited"];
 
-  const useUtilityClasses$1O = ownerState => {
+  const useUtilityClasses$1N = ownerState => {
     const {
       open,
       exited,
@@ -12794,7 +12989,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       onTransitionEnter,
       onTransitionExited
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2b);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2a);
 
     const [exited, setExited] = React__namespace.useState(true);
     const modal = React__namespace.useRef({});
@@ -12871,7 +13066,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       keepMounted
     });
 
-    const classes = useUtilityClasses$1O(ownerState);
+    const classes = useUtilityClasses$1N(ownerState);
 
     if (!keepMounted && !open && (!hasTransition || exited)) {
       return null;
@@ -13717,6 +13912,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         newValue
       } = getFingerNewValue({
         finger,
+        move: true,
         values
       });
       setActive(-1);
@@ -13943,11 +14139,11 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     };
   }
 
-  const _excluded$2a = ["aria-label", "aria-valuetext", "className", "component", "classes", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "onMouseDown", "orientation", "scale", "step", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat", "isRtl", "components", "componentsProps"];
+  const _excluded$29 = ["aria-label", "aria-valuetext", "className", "component", "classes", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "onMouseDown", "orientation", "scale", "step", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat", "isRtl", "components", "componentsProps"];
 
   const Identity = x => x;
 
-  const useUtilityClasses$1N = ownerState => {
+  const useUtilityClasses$1M = ownerState => {
     const {
       disabled,
       dragging,
@@ -14004,12 +14200,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       components = {},
       componentsProps = {}
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2a); // all props with defaults
+          other = _objectWithoutPropertiesLoose(props, _excluded$29); // all props with defaults
     // consider extracting to hook an reusing the lint rule for the varints
 
 
     const ownerState = _extends({}, props, {
-      mark: marksProp,
+      marks: marksProp,
       classes: classesProp,
       disabled,
       isRtl,
@@ -14063,7 +14259,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const Input = components.Input || 'input';
     const inputProps = appendOwnerState(Input, componentsProps.input, ownerState);
     const hiddenInputProps = getHiddenInputProps();
-    const classes = useUtilityClasses$1N(ownerState);
+    const classes = useUtilityClasses$1M(ownerState);
     return /*#__PURE__*/jsxRuntime_2(Root, _extends({}, rootProps, getRootProps({
       onMouseDown
     }), {
@@ -14073,7 +14269,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       })), /*#__PURE__*/jsxRuntime_1(Track, _extends({}, trackProps, {
         className: clsx(classes.track, trackProps.className),
         style: _extends({}, trackStyle, trackProps.style)
-      })), marks.map((mark, index) => {
+      })), marks.filter(mark => mark.value >= min && mark.value <= max).map((mark, index) => {
         const percent = valueToPercent(mark.value, min, max);
         const style = axisProps[axis].offset(percent);
         let markActive;
@@ -14403,7 +14599,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   } ;
   var SliderUnstyled$1 = SliderUnstyled;
 
-  const _excluded$29 = ["onChange", "maxRows", "minRows", "style", "value"];
+  const _excluded$28 = ["onChange", "maxRows", "minRows", "style", "value"];
 
   function getStyleValue(computedStyle, property) {
     return parseInt(computedStyle[property], 10) || 0;
@@ -14432,7 +14628,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       style,
       value
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$29);
+          other = _objectWithoutPropertiesLoose(props, _excluded$28);
 
     const {
       current: isControlled
@@ -14618,12 +14814,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   } ;
   var TextareaAutosize$1 = TextareaAutosize;
 
-  function createMixins(breakpoints, spacing, mixins) {
+  function createMixins(breakpoints, mixins) {
     return _extends({
       toolbar: {
         minHeight: 56,
-        [`${breakpoints.up('xs')} and (orientation: landscape)`]: {
-          minHeight: 48
+        [breakpoints.up('xs')]: {
+          '@media (orientation: landscape)': {
+            minHeight: 48
+          }
         },
         [breakpoints.up('sm')]: {
           minHeight: 64
@@ -14632,7 +14830,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     }, mixins);
   }
 
-  const _excluded$28 = ["mode", "contrastThreshold", "tonalOffset"];
+  const _excluded$27 = ["mode", "contrastThreshold", "tonalOffset"];
   const light = {
     // The colors used to style the text.
     text: {
@@ -14816,7 +15014,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       contrastThreshold = 3,
       tonalOffset = 0.2
     } = palette,
-          other = _objectWithoutPropertiesLoose(palette, _excluded$28);
+          other = _objectWithoutPropertiesLoose(palette, _excluded$27);
 
     const primary = palette.primary || getDefaultPrimary(mode);
     const secondary = palette.secondary || getDefaultSecondary(mode);
@@ -14899,7 +15097,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.
@@ -14952,7 +15151,7 @@ const theme2 = createTheme({ palette: {
     return paletteOutput;
   }
 
-  const _excluded$27 = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
+  const _excluded$26 = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
 
   function round$1(value) {
     return Math.round(value * 1e5) / 1e5;
@@ -14985,7 +15184,7 @@ const theme2 = createTheme({ palette: {
       allVariants,
       pxToRem: pxToRem2
     } = _ref,
-          other = _objectWithoutPropertiesLoose(_ref, _excluded$27);
+          other = _objectWithoutPropertiesLoose(_ref, _excluded$26);
 
     {
       if (typeof fontSize !== 'number') {
@@ -15053,7 +15252,7 @@ const theme2 = createTheme({ palette: {
   const shadows = ['none', createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)];
   var shadows$1 = shadows;
 
-  const _excluded$26 = ["duration", "easing", "delay"];
+  const _excluded$25 = ["duration", "easing", "delay"];
   // Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
   // to learn the context in which each easing should be used.
   const easing = {
@@ -15108,7 +15307,7 @@ const theme2 = createTheme({ palette: {
         easing: easingOption = mergedEasing.easeInOut,
         delay = 0
       } = options,
-            other = _objectWithoutPropertiesLoose(options, _excluded$26);
+            other = _objectWithoutPropertiesLoose(options, _excluded$25);
 
       {
         const isString = value => typeof value === 'string'; // IE11 support, replace with Number.isNaN
@@ -15164,21 +15363,21 @@ const theme2 = createTheme({ palette: {
   };
   var zIndex$1 = zIndex;
 
-  const _excluded$25 = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
+  const _excluded$24 = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 
-  function createTheme$1(options = {}, ...args) {
+  function createTheme(options = {}, ...args) {
     const {
       mixins: mixinsInput = {},
       palette: paletteInput = {},
       transitions: transitionsInput = {},
       typography: typographyInput = {}
     } = options,
-          other = _objectWithoutPropertiesLoose(options, _excluded$25);
+          other = _objectWithoutPropertiesLoose(options, _excluded$24);
 
     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),
+      mixins: createMixins(systemTheme.breakpoints, mixinsInput),
       palette,
       // Don't use [...shadows] until you've verified its transpiled code is not invoking the iterator protocol.
       shadows: shadows$1.slice(),
@@ -15235,11 +15434,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);
   }
@@ -15446,7 +15645,7 @@ Use unitless line heights instead.` );
     return theme;
   }
 
-  const defaultTheme$2 = createTheme$1();
+  const defaultTheme$2 = createTheme();
   var defaultTheme$3 = defaultTheme$2;
 
   function useTheme() {
@@ -15497,52 +15696,254 @@ 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"],
-        _excluded2$9 = ["palette"];
-  const defaultOpacity = {
-    active: 0.54,
-    hover: 0.04,
-    selected: 0.08,
-    disabled: 0.26,
-    focus: 0.12
+  function getPaperUtilityClass(slot) {
+    return generateUtilityClass('MuiPaper', slot);
+  }
+  const paperClasses = generateUtilityClasses('MuiPaper', ['root', 'rounded', 'outlined', 'elevation', 'elevation0', 'elevation1', 'elevation2', 'elevation3', 'elevation4', 'elevation5', 'elevation6', 'elevation7', 'elevation8', 'elevation9', 'elevation10', 'elevation11', 'elevation12', 'elevation13', 'elevation14', 'elevation15', 'elevation16', 'elevation17', 'elevation18', 'elevation19', 'elevation20', 'elevation21', 'elevation22', 'elevation23', 'elevation24']);
+  var paperClasses$1 = paperClasses;
+
+  const _excluded$23 = ["className", "component", "elevation", "square", "variant"];
+  const getOverlayAlpha = elevation => {
+    let alphaValue;
+
+    if (elevation < 1) {
+      alphaValue = 5.11916 * elevation ** 2;
+    } else {
+      alphaValue = 4.5 * Math.log(elevation + 1) + 2;
+    }
+
+    return (alphaValue / 100).toFixed(2);
   };
 
-  function createTheme(options = {}, ...args) {
-    var _colorSchemesInput$li, _colorSchemesInput$da;
+  const useUtilityClasses$1L = ownerState => {
+    const {
+      square,
+      elevation,
+      variant,
+      classes
+    } = ownerState;
+    const slots = {
+      root: ['root', variant, !square && 'rounded', variant === 'elevation' && `elevation${elevation}`]
+    };
+    return composeClasses(slots, getPaperUtilityClass, classes);
+  };
+
+  const PaperRoot = styled$1('div', {
+    name: 'MuiPaper',
+    slot: 'Root',
+    overridesResolver: (props, styles) => {
+      const {
+        ownerState
+      } = props;
+      return [styles.root, styles[ownerState.variant], !ownerState.square && styles.rounded, ownerState.variant === 'elevation' && styles[`elevation${ownerState.elevation}`]];
+    }
+  })(({
+    theme,
+    ownerState
+  }) => {
+    var _theme$vars$overlays;
+
+    return _extends({
+      backgroundColor: (theme.vars || theme).palette.background.paper,
+      color: (theme.vars || theme).palette.text.primary,
+      transition: theme.transitions.create('box-shadow')
+    }, !ownerState.square && {
+      borderRadius: theme.shape.borderRadius
+    }, ownerState.variant === 'outlined' && {
+      border: `1px solid ${(theme.vars || theme).palette.divider}`
+    }, ownerState.variant === 'elevation' && _extends({
+      boxShadow: (theme.vars || theme).shadows[ownerState.elevation]
+    }, !theme.vars && theme.palette.mode === 'dark' && {
+      backgroundImage: `linear-gradient(${alpha('#fff', getOverlayAlpha(ownerState.elevation))}, ${alpha('#fff', getOverlayAlpha(ownerState.elevation))})`
+    }, theme.vars && {
+      backgroundImage: (_theme$vars$overlays = theme.vars.overlays) == null ? void 0 : _theme$vars$overlays[ownerState.elevation]
+    }));
+  });
+  const Paper = /*#__PURE__*/React__namespace.forwardRef(function Paper(inProps, ref) {
+    const props = useThemeProps({
+      props: inProps,
+      name: 'MuiPaper'
+    });
 
     const {
-      colorSchemes: colorSchemesInput = {},
-      opacity: opacityInput = {}
-    } = options,
-          input = _objectWithoutPropertiesLoose(options, _excluded$24); // eslint-disable-next-line prefer-const
+      className,
+      component = 'div',
+      elevation = 1,
+      square = false,
+      variant = 'elevation'
+    } = props,
+          other = _objectWithoutPropertiesLoose(props, _excluded$23);
+
+    const ownerState = _extends({}, props, {
+      component,
+      elevation,
+      square,
+      variant
+    });
+
+    const classes = useUtilityClasses$1L(ownerState);
+
+    {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const theme = useTheme();
+
+      if (theme.shadows[elevation] === undefined) {
+        console.error([`MUI: The elevation provided <Paper elevation={${elevation}}> is not available in the theme.`, `Please make sure that \`theme.shadows[${elevation}]\` is defined.`].join('\n'));
+      }
+    }
+
+    return /*#__PURE__*/jsxRuntime_1(PaperRoot, _extends({
+      as: component,
+      ownerState: ownerState,
+      className: clsx(classes.root, className),
+      ref: ref
+    }, other));
+  });
+  Paper.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"     |
+    // ----------------------------------------------------------------------
+
+    /**
+     * The content of the component.
+     */
+    children: PropTypes.node,
+
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes: PropTypes.object,
+
+    /**
+     * @ignore
+     */
+    className: PropTypes.string,
+
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component: PropTypes.elementType,
+
+    /**
+     * Shadow depth, corresponds to `dp` in the spec.
+     * It accepts values between 0 and 24 inclusive.
+     * @default 1
+     */
+    elevation: chainPropTypes(integerPropType, props => {
+      const {
+        elevation,
+        variant
+      } = props;
+
+      if (elevation > 0 && variant === 'outlined') {
+        return new Error(`MUI: Combining \`elevation={${elevation}}\` with \`variant="${variant}"\` has no effect. Either use \`elevation={0}\` or use a different \`variant\`.`);
+      }
+
+      return null;
+    }),
+
+    /**
+     * If `true`, rounded corners are disabled.
+     * @default false
+     */
+    square: PropTypes.bool,
+
+    /**
+     * 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]),
+
+    /**
+     * The variant to use.
+     * @default 'elevation'
+     */
+    variant: PropTypes
+    /* @typescript-to-proptypes-ignore */
+    .oneOfType([PropTypes.oneOf(['elevation', 'outlined']), PropTypes.string])
+  } ;
+  var Paper$1 = Paper;
+
+  const _excluded$22 = ["colorSchemes"],
+        _excluded2$9 = ["palette"];
+  const defaultDarkOverlays = [...Array(25)].map((_, index) => {
+    if (index === 0) {
+      return undefined;
+    }
+
+    const overlay = getOverlayAlpha(index);
+    return `linear-gradient(rgba(255 255 255 / ${overlay}), rgba(255 255 255 / ${overlay}))`;
+  });
+  function extendTheme(options = {}, ...args) {
+    var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$li3, _colorSchemesInput$da2, _colorSchemesInput$da3;
 
+    const {
+      colorSchemes: colorSchemesInput = {}
+    } = options,
+          input = _objectWithoutPropertiesLoose(options, _excluded$22);
 
-    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),
+          overlays: ((_colorSchemesInput$li3 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li3.overlays) || []
+        }),
+        dark: _extends({}, colorSchemesInput.dark, {
+          palette: darkPalette,
+          opacity: _extends({
+            placeholder: 0.5,
+            inputTouchBottomLine: 0.7
+          }, (_colorSchemesInput$da2 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da2.opacity),
+          overlays: ((_colorSchemesInput$da3 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da3.overlays) || defaultDarkOverlays
+        })
+      })
+    });
+
+    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);
@@ -15556,32 +15957,30 @@ 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);
         }
 
         if (colors.secondary) {
           palette[color].secondaryChannel = colorChannel(colors.secondary);
-        }
+        } // Action colors: action.activeChannel
+
 
-        if (colors.disabled) {
-          palette[color].disabledChannel = colorChannel(colors.disabled);
+        if (colors.active) {
+          palette[color].activeChannel = colorChannel(colors.active);
         }
       });
-      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,
@@ -15609,9 +16008,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const svgIconClasses = generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
   var svgIconClasses$1 = svgIconClasses;
 
-  const _excluded$23 = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
+  const _excluded$21 = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
 
-  const useUtilityClasses$1M = ownerState => {
+  const useUtilityClasses$1K = ownerState => {
     const {
       color,
       fontSize,
@@ -15636,7 +16035,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',
@@ -15655,9 +16054,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]
     };
@@ -15679,7 +16078,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       titleAccess,
       viewBox = '0 0 24 24'
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$23);
+          other = _objectWithoutPropertiesLoose(props, _excluded$21);
 
     const ownerState = _extends({}, props, {
       color,
@@ -15696,7 +16095,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       more.viewBox = viewBox;
     }
 
-    const classes = useUtilityClasses$1M(ownerState);
+    const classes = useUtilityClasses$1K(ownerState);
     return /*#__PURE__*/jsxRuntime_2(SvgIconRoot, _extends({
       as: component,
       className: clsx(classes.root, className),
@@ -16831,9 +17230,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const collapseClasses = generateUtilityClasses('MuiCollapse', ['root', 'horizontal', 'vertical', 'entered', 'hidden', 'wrapper', 'wrapperInner']);
   var collapseClasses$1 = collapseClasses;
 
-  const _excluded$22 = ["addEndListener", "children", "className", "collapsedSize", "component", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "orientation", "style", "timeout", "TransitionComponent"];
+  const _excluded$20 = ["addEndListener", "children", "className", "collapsedSize", "component", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "orientation", "style", "timeout", "TransitionComponent"];
 
-  const useUtilityClasses$1L = ownerState => {
+  const useUtilityClasses$1J = ownerState => {
     const {
       orientation,
       classes
@@ -16934,14 +17333,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       // eslint-disable-next-line react/prop-types
       TransitionComponent = Transition$1
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$22);
+          other = _objectWithoutPropertiesLoose(props, _excluded$20);
 
     const ownerState = _extends({}, props, {
       orientation,
       collapsedSize: collapsedSizeProp
     });
 
-    const classes = useUtilityClasses$1L(ownerState);
+    const classes = useUtilityClasses$1J(ownerState);
     const theme = useTheme();
     const timer = React__namespace.useRef();
     const wrapperRef = React__namespace.useRef(null);
@@ -17235,172 +17634,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   Collapse.muiSupportAuto = true;
   var Collapse$1 = Collapse;
 
-  function getPaperUtilityClass(slot) {
-    return generateUtilityClass('MuiPaper', slot);
-  }
-  const paperClasses = generateUtilityClasses('MuiPaper', ['root', 'rounded', 'outlined', 'elevation', 'elevation0', 'elevation1', 'elevation2', 'elevation3', 'elevation4', 'elevation5', 'elevation6', 'elevation7', 'elevation8', 'elevation9', 'elevation10', 'elevation11', 'elevation12', 'elevation13', 'elevation14', 'elevation15', 'elevation16', 'elevation17', 'elevation18', 'elevation19', 'elevation20', 'elevation21', 'elevation22', 'elevation23', 'elevation24']);
-  var paperClasses$1 = paperClasses;
-
-  const _excluded$21 = ["className", "component", "elevation", "square", "variant"];
-
-  const getOverlayAlpha = elevation => {
-    let alphaValue;
-
-    if (elevation < 1) {
-      alphaValue = 5.11916 * elevation ** 2;
-    } else {
-      alphaValue = 4.5 * Math.log(elevation + 1) + 2;
-    }
-
-    return (alphaValue / 100).toFixed(2);
-  };
-
-  const useUtilityClasses$1K = ownerState => {
-    const {
-      square,
-      elevation,
-      variant,
-      classes
-    } = ownerState;
-    const slots = {
-      root: ['root', variant, !square && 'rounded', variant === 'elevation' && `elevation${elevation}`]
-    };
-    return composeClasses(slots, getPaperUtilityClass, classes);
-  };
-
-  const PaperRoot = styled$1('div', {
-    name: 'MuiPaper',
-    slot: 'Root',
-    overridesResolver: (props, styles) => {
-      const {
-        ownerState
-      } = props;
-      return [styles.root, styles[ownerState.variant], !ownerState.square && styles.rounded, ownerState.variant === 'elevation' && styles[`elevation${ownerState.elevation}`]];
-    }
-  })(({
-    theme,
-    ownerState
-  }) => _extends({
-    backgroundColor: theme.palette.background.paper,
-    color: theme.palette.text.primary,
-    transition: theme.transitions.create('box-shadow')
-  }, !ownerState.square && {
-    borderRadius: theme.shape.borderRadius
-  }, ownerState.variant === 'outlined' && {
-    border: `1px solid ${theme.palette.divider}`
-  }, ownerState.variant === 'elevation' && _extends({
-    boxShadow: theme.shadows[ownerState.elevation]
-  }, theme.palette.mode === 'dark' && {
-    backgroundImage: `linear-gradient(${alpha('#fff', getOverlayAlpha(ownerState.elevation))}, ${alpha('#fff', getOverlayAlpha(ownerState.elevation))})`
-  })));
-  const Paper = /*#__PURE__*/React__namespace.forwardRef(function Paper(inProps, ref) {
-    const props = useThemeProps({
-      props: inProps,
-      name: 'MuiPaper'
-    });
-
-    const {
-      className,
-      component = 'div',
-      elevation = 1,
-      square = false,
-      variant = 'elevation'
-    } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$21);
-
-    const ownerState = _extends({}, props, {
-      component,
-      elevation,
-      square,
-      variant
-    });
-
-    const classes = useUtilityClasses$1K(ownerState);
-
-    {
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      const theme = useTheme();
-
-      if (theme.shadows[elevation] === undefined) {
-        console.error([`MUI: The elevation provided <Paper elevation={${elevation}}> is not available in the theme.`, `Please make sure that \`theme.shadows[${elevation}]\` is defined.`].join('\n'));
-      }
-    }
-
-    return /*#__PURE__*/jsxRuntime_1(PaperRoot, _extends({
-      as: component,
-      ownerState: ownerState,
-      className: clsx(classes.root, className),
-      ref: ref
-    }, other));
-  });
-  Paper.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"     |
-    // ----------------------------------------------------------------------
-
-    /**
-     * The content of the component.
-     */
-    children: PropTypes.node,
-
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes: PropTypes.object,
-
-    /**
-     * @ignore
-     */
-    className: PropTypes.string,
-
-    /**
-     * The component used for the root node.
-     * Either a string to use a HTML element or a component.
-     */
-    component: PropTypes.elementType,
-
-    /**
-     * Shadow depth, corresponds to `dp` in the spec.
-     * It accepts values between 0 and 24 inclusive.
-     * @default 1
-     */
-    elevation: chainPropTypes(integerPropType, props => {
-      const {
-        elevation,
-        variant
-      } = props;
-
-      if (elevation > 0 && variant === 'outlined') {
-        return new Error(`MUI: Combining \`elevation={${elevation}}\` with \`variant="${variant}"\` has no effect. Either use \`elevation={0}\` or use a different \`variant\`.`);
-      }
-
-      return null;
-    }),
-
-    /**
-     * If `true`, rounded corners are disabled.
-     * @default false
-     */
-    square: PropTypes.bool,
-
-    /**
-     * 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]),
-
-    /**
-     * The variant to use.
-     * @default 'elevation'
-     */
-    variant: PropTypes
-    /* @typescript-to-proptypes-ignore */
-    .oneOfType([PropTypes.oneOf(['elevation', 'outlined']), PropTypes.string])
-  } ;
-  var Paper$1 = Paper;
-
   /**
    * @ignore - internal component.
    * @type {React.Context<{} | {expanded: boolean, disabled: boolean, toggle: () => void}>}
@@ -17420,9 +17653,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const accordionClasses = generateUtilityClasses('MuiAccordion', ['root', 'rounded', 'expanded', 'disabled', 'gutters', 'region']);
   var accordionClasses$1 = accordionClasses;
 
-  const _excluded$20 = ["children", "className", "defaultExpanded", "disabled", "disableGutters", "expanded", "onChange", "square", "TransitionComponent", "TransitionProps"];
+  const _excluded$1$ = ["children", "className", "defaultExpanded", "disabled", "disableGutters", "expanded", "onChange", "square", "TransitionComponent", "TransitionProps"];
 
-  const useUtilityClasses$1J = ownerState => {
+  const useUtilityClasses$1I = ownerState => {
     const {
       classes,
       square,
@@ -17536,7 +17769,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       TransitionComponent = Collapse$1,
       TransitionProps
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$20);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1$);
 
     const [expanded, setExpandedState] = useControlled({
       controlled: expandedProp,
@@ -17566,7 +17799,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       expanded
     });
 
-    const classes = useUtilityClasses$1J(ownerState);
+    const classes = useUtilityClasses$1I(ownerState);
     return /*#__PURE__*/jsxRuntime_2(AccordionRoot, _extends({
       className: clsx(classes.root, className),
       ref: ref,
@@ -17689,9 +17922,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const accordionActionsClasses = generateUtilityClasses('MuiAccordionActions', ['root', 'spacing']);
   var accordionActionsClasses$1 = accordionActionsClasses;
 
-  const _excluded$1$ = ["className", "disableSpacing"];
+  const _excluded$1_ = ["className", "disableSpacing"];
 
-  const useUtilityClasses$1I = ownerState => {
+  const useUtilityClasses$1H = ownerState => {
     const {
       classes,
       disableSpacing
@@ -17733,13 +17966,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       className,
       disableSpacing = false
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1$);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1_);
 
     const ownerState = _extends({}, props, {
       disableSpacing
     });
 
-    const classes = useUtilityClasses$1I(ownerState);
+    const classes = useUtilityClasses$1H(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AccordionActionsRoot, _extends({
       className: clsx(classes.root, className),
       ref: ref,
@@ -17788,9 +18021,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const accordionDetailsClasses = generateUtilityClasses('MuiAccordionDetails', ['root']);
   var accordionDetailsClasses$1 = accordionDetailsClasses;
 
-  const _excluded$1_ = ["className"];
+  const _excluded$1Z = ["className"];
 
-  const useUtilityClasses$1H = ownerState => {
+  const useUtilityClasses$1G = ownerState => {
     const {
       classes
     } = ownerState;
@@ -17818,10 +18051,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const {
       className
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1_);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1Z);
 
     const ownerState = props;
-    const classes = useUtilityClasses$1H(ownerState);
+    const classes = useUtilityClasses$1G(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AccordionDetailsRoot, _extends({
       className: clsx(classes.root, className),
       ref: ref,
@@ -17954,7 +18187,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const touchRippleClasses = generateUtilityClasses('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);
   var touchRippleClasses$1 = touchRippleClasses;
 
-  const _excluded$1Z = ["center", "classes", "className"];
+  const _excluded$1Y = ["center", "classes", "className"];
 
   let _$3 = t => t,
       _t$3,
@@ -18084,7 +18317,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       classes = {},
       className
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1Z);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1Y);
 
     const [ripples, setRipples] = React__namespace.useState([]);
     const nextKey = React__namespace.useRef(0);
@@ -18142,12 +18375,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
       } = options;
 
-      if (event.type === 'mousedown' && ignoringMouseDown.current) {
+      if ((event == null ? void 0 : event.type) === 'mousedown' && ignoringMouseDown.current) {
         ignoringMouseDown.current = false;
         return;
       }
 
-      if (event.type === 'touchstart') {
+      if ((event == null ? void 0 : event.type) === 'touchstart') {
         ignoringMouseDown.current = true;
       }
 
@@ -18163,7 +18396,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       let rippleY;
       let rippleSize;
 
-      if (center || event.clientX === 0 && event.clientY === 0 || !event.clientX && !event.touches) {
+      if (center || event === undefined || event.clientX === 0 && event.clientY === 0 || !event.clientX && !event.touches) {
         rippleX = Math.round(rect.width / 2);
         rippleY = Math.round(rect.height / 2);
       } else {
@@ -18188,7 +18421,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       } // Touche devices
 
 
-      if (event.touches) {
+      if (event != null && event.touches) {
         // check that this isn't another touchstart due to multitouch
         // otherwise we will only clear a single timer when unmounting while two
         // are running
@@ -18231,7 +18464,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       clearTimeout(startTimer.current); // The touch interaction occurs too quickly.
       // We still want to show ripple effect.
 
-      if (event.type === 'touchend' && startTimerCommit.current) {
+      if ((event == null ? void 0 : event.type) === 'touchend' && startTimerCommit.current) {
         startTimerCommit.current();
         startTimerCommit.current = null;
         startTimer.current = setTimeout(() => {
@@ -18292,9 +18525,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
   var buttonBaseClasses$1 = buttonBaseClasses;
 
-  const _excluded$1Y = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
+  const _excluded$1X = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
 
-  const useUtilityClasses$1G = ownerState => {
+  const useUtilityClasses$1F = ownerState => {
     const {
       disabled,
       focusVisible,
@@ -18399,7 +18632,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       touchRippleRef,
       type
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1Y);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1X);
 
     const buttonRef = React__namespace.useRef(null);
     const rippleRef = React__namespace.useRef(null);
@@ -18596,7 +18829,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       focusVisible
     });
 
-    const classes = useUtilityClasses$1G(ownerState);
+    const classes = useUtilityClasses$1F(ownerState);
     return /*#__PURE__*/jsxRuntime_2(ButtonBaseRoot, _extends({
       as: ComponentProp,
       className: clsx(classes.root, className),
@@ -18830,9 +19063,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const accordionSummaryClasses = generateUtilityClasses('MuiAccordionSummary', ['root', 'expanded', 'focusVisible', 'disabled', 'gutters', 'contentGutters', 'content', 'expandIconWrapper']);
   var accordionSummaryClasses$1 = accordionSummaryClasses;
 
-  const _excluded$1X = ["children", "className", "expandIcon", "focusVisibleClassName", "onClick"];
+  const _excluded$1W = ["children", "className", "expandIcon", "focusVisibleClassName", "onClick"];
 
-  const useUtilityClasses$1F = ownerState => {
+  const useUtilityClasses$1E = ownerState => {
     const {
       classes,
       expanded,
@@ -18928,7 +19161,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       focusVisibleClassName,
       onClick
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1X);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1W);
 
     const {
       disabled = false,
@@ -18953,7 +19186,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       disableGutters
     });
 
-    const classes = useUtilityClasses$1F(ownerState);
+    const classes = useUtilityClasses$1E(ownerState);
     return /*#__PURE__*/jsxRuntime_2(AccordionSummaryRoot, _extends({
       focusRipple: false,
       disableRipple: true,
@@ -19039,9 +19272,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const iconButtonClasses = generateUtilityClasses('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
   var iconButtonClasses$1 = iconButtonClasses;
 
-  const _excluded$1W = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
+  const _excluded$1V = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
 
-  const useUtilityClasses$1E = ownerState => {
+  const useUtilityClasses$1D = ownerState => {
     const {
       classes,
       disabled,
@@ -19075,13 +19308,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'
@@ -19097,10 +19330,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'
@@ -19115,7 +19348,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
     }
   }));
   /**
@@ -19138,7 +19371,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       disableFocusRipple = false,
       size = 'medium'
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1W);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1V);
 
     const ownerState = _extends({}, props, {
       edge,
@@ -19148,7 +19381,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       size
     });
 
-    const classes = useUtilityClasses$1E(ownerState);
+    const classes = useUtilityClasses$1D(ownerState);
     return /*#__PURE__*/jsxRuntime_1(IconButtonRoot, _extends({
       className: clsx(classes.root, className),
       centerRipple: true,
@@ -19269,9 +19502,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   var _CloseIcon;
 
-  const _excluded$1V = ["action", "children", "className", "closeText", "color", "icon", "iconMapping", "onClose", "role", "severity", "variant"];
+  const _excluded$1U = ["action", "children", "className", "closeText", "color", "icon", "iconMapping", "onClose", "role", "severity", "variant"];
 
-  const useUtilityClasses$1D = ownerState => {
+  const useUtilityClasses$1C = ownerState => {
     const {
       variant,
       color,
@@ -19387,7 +19620,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       severity = 'success',
       variant = 'standard'
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1V);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1U);
 
     const ownerState = _extends({}, props, {
       color,
@@ -19395,7 +19628,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1D(ownerState);
+    const classes = useUtilityClasses$1C(ownerState);
     return /*#__PURE__*/jsxRuntime_2(AlertRoot, _extends({
       role: role,
       elevation: 0,
@@ -19412,6 +19645,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         className: classes.message,
         children: children
       }), action != null ? /*#__PURE__*/jsxRuntime_1(AlertAction, {
+        ownerState: ownerState,
         className: classes.action,
         children: action
       }) : null, action == null && onClose ? /*#__PURE__*/jsxRuntime_1(AlertAction, {
@@ -19535,9 +19769,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const typographyClasses = generateUtilityClasses('MuiTypography', ['root', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'inherit', 'button', 'caption', 'overline', 'alignLeft', 'alignRight', 'alignCenter', 'alignJustify', 'noWrap', 'gutterBottom', 'paragraph']);
   var typographyClasses$1 = typographyClasses;
 
-  const _excluded$1U = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
+  const _excluded$1T = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
 
-  const useUtilityClasses$1C = ownerState => {
+  const useUtilityClasses$1B = ownerState => {
     const {
       align,
       gutterBottom,
@@ -19623,7 +19857,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant = 'body1',
       variantMapping = defaultVariantMapping
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1U);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1T);
 
     const ownerState = _extends({}, props, {
       align,
@@ -19638,7 +19872,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
 
     const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
-    const classes = useUtilityClasses$1C(ownerState);
+    const classes = useUtilityClasses$1B(ownerState);
     return /*#__PURE__*/jsxRuntime_1(TypographyRoot, _extends({
       as: Component,
       ref: ref,
@@ -19746,9 +19980,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const alertTitleClasses = generateUtilityClasses('MuiAlertTitle', ['root']);
   var alertTitleClasses$1 = alertTitleClasses;
 
-  const _excluded$1T = ["className"];
+  const _excluded$1S = ["className"];
 
-  const useUtilityClasses$1B = ownerState => {
+  const useUtilityClasses$1A = ownerState => {
     const {
       classes
     } = ownerState;
@@ -19779,10 +20013,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const {
       className
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1T);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1S);
 
     const ownerState = props;
-    const classes = useUtilityClasses$1B(ownerState);
+    const classes = useUtilityClasses$1A(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AlertTitleRoot, _extends({
       gutterBottom: true,
       component: "div",
@@ -19827,9 +20061,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const appBarClasses = generateUtilityClasses('MuiAppBar', ['root', 'positionFixed', 'positionAbsolute', 'positionSticky', 'positionStatic', 'positionRelative', 'colorDefault', 'colorPrimary', 'colorSecondary', 'colorInherit', 'colorTransparent']);
   var appBarClasses$1 = appBarClasses;
 
-  const _excluded$1S = ["className", "color", "enableColorOnDark", "position"];
+  const _excluded$1R = ["className", "color", "enableColorOnDark", "position"];
 
-  const useUtilityClasses$1A = ownerState => {
+  const useUtilityClasses$1z = ownerState => {
     const {
       color,
       position,
@@ -19919,7 +20153,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       enableColorOnDark = false,
       position = 'fixed'
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1S);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1R);
 
     const ownerState = _extends({}, props, {
       color,
@@ -19927,7 +20161,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       enableColorOnDark
     });
 
-    const classes = useUtilityClasses$1A(ownerState);
+    const classes = useUtilityClasses$1z(ownerState);
     return /*#__PURE__*/jsxRuntime_1(AppBarRoot, _extends({
       square: true,
       component: "header",
@@ -20138,9 +20372,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const listSubheaderClasses = generateUtilityClasses('MuiListSubheader', ['root', 'colorPrimary', 'colorInherit', 'gutters', 'inset', 'sticky']);
   var listSubheaderClasses$1 = listSubheaderClasses;
 
-  const _excluded$1R = ["className", "color", "component", "disableGutters", "disableSticky", "inset"];
+  const _excluded$1Q = ["className", "color", "component", "disableGutters", "disableSticky", "inset"];
 
-  const useUtilityClasses$1z = ownerState => {
+  const useUtilityClasses$1y = ownerState => {
     const {
       classes,
       color,
@@ -20170,12 +20404,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 && {
@@ -20187,7 +20421,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({
@@ -20203,7 +20437,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       disableSticky = false,
       inset = false
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1R);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1Q);
 
     const ownerState = _extends({}, props, {
       color,
@@ -20213,7 +20447,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       inset
     });
 
-    const classes = useUtilityClasses$1z(ownerState);
+    const classes = useUtilityClasses$1y(ownerState);
     return /*#__PURE__*/jsxRuntime_1(ListSubheaderRoot, _extends({
       as: component,
       className: clsx(classes.root, className),
@@ -20291,9 +20525,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const chipClasses = generateUtilityClasses('MuiChip', ['root', 'sizeSmall', 'sizeMedium', 'colorPrimary', 'colorSecondary', 'disabled', 'clickable', 'clickableColorPrimary', 'clickableColorSecondary', 'deletable', 'deletableColorPrimary', 'deletableColorSecondary', 'outlined', 'filled', 'outlinedPrimary', 'outlinedSecondary', 'avatar', 'avatarSmall', 'avatarMedium', 'avatarColorPrimary', 'avatarColorSecondary', 'icon', 'iconSmall', 'iconMedium', 'iconColorPrimary', 'iconColorSecondary', 'label', 'labelSmall', 'labelMedium', 'deleteIcon', 'deleteIconSmall', 'deleteIconMedium', 'deleteIconColorPrimary', 'deleteIconColorSecondary', 'deleteIconOutlinedColorPrimary', 'deleteIconOutlinedColorSecondary', 'focusVisible']);
   var chipClasses$1 = chipClasses;
 
-  const _excluded$1Q = ["avatar", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyDown", "onKeyUp", "size", "variant"];
+  const _excluded$1P = ["avatar", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyDown", "onKeyUp", "size", "variant"];
 
-  const useUtilityClasses$1y = ownerState => {
+  const useUtilityClasses$1x = ownerState => {
     const {
       classes,
       disabled,
@@ -20571,7 +20805,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       size = 'medium',
       variant = 'filled'
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1Q);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1P);
 
     const chipRef = React__namespace.useRef(null);
     const handleRef = useForkRef(chipRef, ref);
@@ -20627,7 +20861,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1y(ownerState);
+    const classes = useUtilityClasses$1x(ownerState);
     const moreProps = component === ButtonBase$1 ? _extends({
       component: ComponentProp || 'div',
       focusVisibleClassName: classes.focusVisible
@@ -20897,7 +21131,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const inputBaseClasses = generateUtilityClasses('MuiInputBase', ['root', 'formControl', 'focused', 'disabled', 'adornedStart', 'adornedEnd', 'error', 'sizeSmall', 'multiline', 'colorSecondary', 'fullWidth', 'hiddenLabel', 'input', 'inputSizeSmall', 'inputMultiline', 'inputTypeSearch', 'inputAdornedStart', 'inputAdornedEnd', 'inputHiddenLabel']);
   var inputBaseClasses$1 = inputBaseClasses;
 
-  const _excluded$1P = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "startAdornment", "type", "value"];
+  const _excluded$1O = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "startAdornment", "type", "value"];
   const rootOverridesResolver = (props, styles) => {
     const {
       ownerState
@@ -20911,7 +21145,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return [styles.input, ownerState.size === 'small' && styles.inputSizeSmall, ownerState.multiline && styles.inputMultiline, ownerState.type === 'search' && styles.inputTypeSearch, ownerState.startAdornment && styles.inputAdornedStart, ownerState.endAdornment && styles.inputAdornedEnd, ownerState.hiddenLabel && styles.inputHiddenLabel];
   };
 
-  const useUtilityClasses$1x = ownerState => {
+  const useUtilityClasses$1w = ownerState => {
     const {
       classes,
       color,
@@ -20942,7 +21176,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',
@@ -20952,7 +21186,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({
@@ -20971,17 +21205,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({
@@ -21042,7 +21284,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': {
@@ -21123,7 +21365,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       type = 'text',
       value: valueProp
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1P);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1O);
 
     const value = inputPropsProp.value != null ? inputPropsProp.value : valueProp;
     const {
@@ -21323,7 +21565,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       type
     });
 
-    const classes = useUtilityClasses$1x(ownerState);
+    const classes = useUtilityClasses$1w(ownerState);
     const Root = components.Root || InputBaseRoot;
     const rootProps = componentsProps.root || {};
     const Input = components.Input || InputBaseComponent;
@@ -21651,9 +21893,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   var _ClearIcon, _ArrowDropDownIcon;
 
-  const _excluded$1O = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "value"];
+  const _excluded$1N = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "value"];
 
-  const useUtilityClasses$1w = ownerState => {
+  const useUtilityClasses$1v = ownerState => {
     const {
       classes,
       disablePortal,
@@ -21861,7 +22103,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'
   }));
@@ -21881,7 +22123,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', {
@@ -21891,7 +22133,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', {
@@ -21924,30 +22166,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)
         }
       }
     }
@@ -21959,7 +22201,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', {
@@ -22036,7 +22278,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       selectOnFocus = !props.freeSolo,
       size = 'medium'
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1O);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1N);
     /* eslint-enable @typescript-eslint/no-unused-vars */
 
 
@@ -22063,7 +22305,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       componentName: 'Autocomplete'
     }));
     const hasClearIcon = !disableClearable && !disabled && dirty && !readOnly;
-    const hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;
+    const hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false; // If you modify this, make sure to keep the `AutocompleteOwnerState` type in sync.
 
     const ownerState = _extends({}, props, {
       disablePortal,
@@ -22076,7 +22318,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       size
     });
 
-    const classes = useUtilityClasses$1w(ownerState);
+    const classes = useUtilityClasses$1v(ownerState);
     let startAdornment;
 
     if (multiple && value.length > 0) {
@@ -22086,7 +22328,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }, getTagProps(params));
 
       if (renderTags) {
-        startAdornment = renderTags(value, getCustomizedTagProps);
+        startAdornment = renderTags(value, getCustomizedTagProps, ownerState);
       } else {
         startAdornment = value.map((option, index) => /*#__PURE__*/jsxRuntime_1(Chip$1, _extends({
           label: getOptionLabel(option),
@@ -22155,10 +22397,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,
@@ -22178,7 +22421,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
                 children: popupIcon
               })) : null]
             })
-          },
+          }),
           inputProps: _extends({
             className: clsx(classes.input),
             disabled,
@@ -22662,6 +22905,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      *
      * @param {T[]} value The `value` provided to the component.
      * @param {function} getTagProps A tag props getter.
+     * @param {object} ownerState The state of the Autocomplete component.
      * @returns {ReactNode}
      */
     renderTags: PropTypes.func,
@@ -22712,9 +22956,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const avatarClasses = generateUtilityClasses('MuiAvatar', ['root', 'colorDefault', 'circular', 'rounded', 'square', 'img', 'fallback']);
   var avatarClasses$1 = avatarClasses;
 
-  const _excluded$1N = ["alt", "children", "className", "component", "imgProps", "sizes", "src", "srcSet", "variant"];
+  const _excluded$1M = ["alt", "children", "className", "component", "imgProps", "sizes", "src", "srcSet", "variant"];
 
-  const useUtilityClasses$1v = ownerState => {
+  const useUtilityClasses$1u = ownerState => {
     const {
       classes,
       variant,
@@ -22850,7 +23094,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       srcSet,
       variant = 'circular'
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1N);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1M);
 
     let children = null; // Use a hook instead of onError on the img element to support server-side rendering.
 
@@ -22867,7 +23111,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1v(ownerState);
+    const classes = useUtilityClasses$1u(ownerState);
 
     if (hasImgNotFailing) {
       children = /*#__PURE__*/jsxRuntime_1(AvatarImg, _extends({
@@ -22976,13 +23220,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const avatarGroupClasses = generateUtilityClasses('MuiAvatarGroup', ['root', 'avatar']);
   var avatarGroupClasses$1 = avatarGroupClasses;
 
-  const _excluded$1M = ["children", "className", "componentsProps", "max", "spacing", "total", "variant"];
+  const _excluded$1L = ["children", "className", "componentsProps", "max", "spacing", "total", "variant"];
   const SPACINGS$1 = {
     small: -16,
     medium: null
   };
 
-  const useUtilityClasses$1u = ownerState => {
+  const useUtilityClasses$1t = ownerState => {
     const {
       classes
     } = ownerState;
@@ -23044,7 +23288,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       total,
       variant = 'circular'
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1M);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1L);
 
     let clampedMax = max < 2 ? 2 : max;
 
@@ -23054,7 +23298,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1u(ownerState);
+    const classes = useUtilityClasses$1t(ownerState);
     const children = React__namespace.Children.toArray(childrenProp).filter(child => {
       {
         if (reactIs_2(child)) {
@@ -23171,7 +23415,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   } ;
   var AvatarGroup$1 = AvatarGroup;
 
-  const _excluded$1L = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
+  const _excluded$1K = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
   const styles$4 = {
     entering: {
       opacity: 1
@@ -23209,7 +23453,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       // eslint-disable-next-line react/prop-types
       TransitionComponent = Transition$1
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1L);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1K);
     const nodeRef = React__namespace.useRef(null);
     const foreignRef = useForkRef(children.ref, ref);
     const handleRef = useForkRef(nodeRef, foreignRef);
@@ -23392,9 +23636,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const backdropClasses = generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
   var backdropClasses$1 = backdropClasses;
 
-  const _excluded$1K = ["children", "component", "components", "componentsProps", "className", "invisible", "open", "transitionDuration", "TransitionComponent"];
+  const _excluded$1J = ["children", "component", "components", "componentsProps", "className", "invisible", "open", "transitionDuration", "TransitionComponent"];
 
-  const useUtilityClasses$1t = ownerState => {
+  const useUtilityClasses$1s = ownerState => {
     const {
       classes,
       invisible
@@ -23450,14 +23694,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       // eslint-disable-next-line react/prop-types
       TransitionComponent = Fade$1
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1K);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1J);
 
     const ownerState = _extends({}, props, {
       component,
       invisible
     });
 
-    const classes = useUtilityClasses$1t(ownerState);
+    const classes = useUtilityClasses$1s(ownerState);
     return /*#__PURE__*/jsxRuntime_1(TransitionComponent, _extends({
       in: open,
       timeout: transitionDuration
@@ -23561,11 +23805,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   'anchorOriginTopLeftCircular', 'anchorOriginTopLeftRectangular', 'anchorOriginTopRightCircular', 'anchorOriginTopRightRectangular', 'anchorOriginBottomLeftCircular', 'anchorOriginBottomLeftRectangular', 'anchorOriginBottomRightCircular', 'anchorOriginBottomRightRectangular']);
   var badgeClasses$1 = badgeClasses;
 
-  const _excluded$1J = ["anchorOrigin", "className", "component", "components", "componentsProps", "overlap", "color", "invisible", "max", "badgeContent", "showZero", "variant"];
+  const _excluded$1I = ["anchorOrigin", "className", "component", "components", "componentsProps", "overlap", "color", "invisible", "max", "badgeContent", "showZero", "variant"];
   const RADIUS_STANDARD = 10;
   const RADIUS_DOT = 4;
 
-  const useUtilityClasses$1s = ownerState => {
+  const useUtilityClasses$1r = ownerState => {
     const {
       color,
       anchorOrigin,
@@ -23730,7 +23974,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       showZero = false,
       variant: variantProp = 'standard'
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1J);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1I);
 
     const prevProps = usePreviousProps$1({
       anchorOrigin: anchorOriginProp,
@@ -23759,7 +24003,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1s(ownerState);
+    const classes = useUtilityClasses$1r(ownerState);
     let displayValue;
 
     if (variant !== 'dot') {
@@ -23921,9 +24165,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const bottomNavigationClasses = generateUtilityClasses('MuiBottomNavigation', ['root']);
   var bottomNavigationClasses$1 = bottomNavigationClasses;
 
-  const _excluded$1I = ["children", "className", "component", "onChange", "showLabels", "value"];
+  const _excluded$1H = ["children", "className", "component", "onChange", "showLabels", "value"];
 
-  const useUtilityClasses$1r = ownerState => {
+  const useUtilityClasses$1q = ownerState => {
     const {
       classes
     } = ownerState;
@@ -23959,14 +24203,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       showLabels = false,
       value
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1I);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1H);
 
     const ownerState = _extends({}, props, {
       component,
       showLabels
     });
 
-    const classes = useUtilityClasses$1r(ownerState);
+    const classes = useUtilityClasses$1q(ownerState);
     return /*#__PURE__*/jsxRuntime_1(BottomNavigationRoot, _extends({
       as: component,
       className: clsx(classes.root, className),
@@ -24056,9 +24300,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const bottomNavigationActionClasses = generateUtilityClasses('MuiBottomNavigationAction', ['root', 'iconOnly', 'selected', 'label']);
   var bottomNavigationActionClasses$1 = bottomNavigationActionClasses;
 
-  const _excluded$1H = ["className", "icon", "label", "onChange", "onClick", "selected", "showLabel", "value"];
+  const _excluded$1G = ["className", "icon", "label", "onChange", "onClick", "selected", "showLabel", "value"];
 
-  const useUtilityClasses$1q = ownerState => {
+  const useUtilityClasses$1p = ownerState => {
     const {
       classes,
       showLabel,
@@ -24137,10 +24381,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       onClick,
       value
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1H);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1G);
 
     const ownerState = props;
-    const classes = useUtilityClasses$1q(ownerState);
+    const classes = useUtilityClasses$1p(ownerState);
 
     const handleChange = event => {
       if (onChange) {
@@ -24231,7 +24475,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   } ;
   var BottomNavigationAction$1 = BottomNavigationAction;
 
-  const defaultTheme = createTheme$1();
+  const defaultTheme = createTheme();
   const Box = createBox({
     defaultTheme,
     defaultClassName: 'MuiBox-root',
@@ -24329,9 +24573,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const breadcrumbsClasses = generateUtilityClasses('MuiBreadcrumbs', ['root', 'ol', 'li', 'separator']);
   var breadcrumbsClasses$1 = breadcrumbsClasses;
 
-  const _excluded$1G = ["children", "className", "component", "expandText", "itemsAfterCollapse", "itemsBeforeCollapse", "maxItems", "separator"];
+  const _excluded$1F = ["children", "className", "component", "expandText", "itemsAfterCollapse", "itemsBeforeCollapse", "maxItems", "separator"];
 
-  const useUtilityClasses$1p = ownerState => {
+  const useUtilityClasses$1o = ownerState => {
     const {
       classes
     } = ownerState;
@@ -24409,7 +24653,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       maxItems = 8,
       separator = '/'
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1G);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1F);
 
     const [expanded, setExpanded] = React__namespace.useState(false);
 
@@ -24423,7 +24667,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       separator
     });
 
-    const classes = useUtilityClasses$1p(ownerState);
+    const classes = useUtilityClasses$1o(ownerState);
     const listRef = React__namespace.useRef(null);
 
     const renderItemsBeforeAndAfter = allItems => {
@@ -24570,9 +24814,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
   var ButtonGroupContext$1 = ButtonGroupContext;
 
-  const _excluded$1F = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
+  const _excluded$1E = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
 
-  const useUtilityClasses$1o = ownerState => {
+  const useUtilityClasses$1n = ownerState => {
     const {
       color,
       disableElevation,
@@ -24800,7 +25044,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       type,
       variant = 'text'
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1F);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1E);
 
     const ownerState = _extends({}, props, {
       color,
@@ -24814,7 +25058,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1o(ownerState);
+    const classes = useUtilityClasses$1n(ownerState);
 
     const startIcon = startIconProp && /*#__PURE__*/jsxRuntime_1(ButtonStartIcon, {
       className: classes.startIcon,
@@ -24970,7 +25214,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const buttonGroupClasses = generateUtilityClasses('MuiButtonGroup', ['root', 'contained', 'outlined', 'text', 'disableElevation', 'disabled', 'fullWidth', 'vertical', 'grouped', 'groupedHorizontal', 'groupedVertical', 'groupedText', 'groupedTextHorizontal', 'groupedTextVertical', 'groupedTextPrimary', 'groupedTextSecondary', 'groupedOutlined', 'groupedOutlinedHorizontal', 'groupedOutlinedVertical', 'groupedOutlinedPrimary', 'groupedOutlinedSecondary', 'groupedContained', 'groupedContainedHorizontal', 'groupedContainedVertical', 'groupedContainedPrimary', 'groupedContainedSecondary']);
   var buttonGroupClasses$1 = buttonGroupClasses;
 
-  const _excluded$1E = ["children", "className", "color", "component", "disabled", "disableElevation", "disableFocusRipple", "disableRipple", "fullWidth", "orientation", "size", "variant"];
+  const _excluded$1D = ["children", "className", "color", "component", "disabled", "disableElevation", "disableFocusRipple", "disableRipple", "fullWidth", "orientation", "size", "variant"];
 
   const overridesResolver$6 = (props, styles) => {
     const {
@@ -24989,7 +25233,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }, styles.root, styles[ownerState.variant], ownerState.disableElevation === true && styles.disableElevation, ownerState.fullWidth && styles.fullWidth, ownerState.orientation === 'vertical' && styles.vertical];
   };
 
-  const useUtilityClasses$1n = ownerState => {
+  const useUtilityClasses$1m = ownerState => {
     const {
       classes,
       color,
@@ -25015,9 +25259,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 && {
@@ -25045,27 +25289,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'
@@ -25100,7 +25344,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       size = 'medium',
       variant = 'outlined'
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1E);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1D);
 
     const ownerState = _extends({}, props, {
       color,
@@ -25115,7 +25359,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1n(ownerState);
+    const classes = useUtilityClasses$1m(ownerState);
     const context = React__namespace.useMemo(() => ({
       className: classes.grouped,
       color,
@@ -25245,9 +25489,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const cardClasses = generateUtilityClasses('MuiCard', ['root']);
   var cardClasses$1 = cardClasses;
 
-  const _excluded$1D = ["className", "raised"];
+  const _excluded$1C = ["className", "raised"];
 
-  const useUtilityClasses$1m = ownerState => {
+  const useUtilityClasses$1l = ownerState => {
     const {
       classes
     } = ownerState;
@@ -25276,13 +25520,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       className,
       raised = false
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1D);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1C);
 
     const ownerState = _extends({}, props, {
       raised
     });
 
-    const classes = useUtilityClasses$1m(ownerState);
+    const classes = useUtilityClasses$1l(ownerState);
     return /*#__PURE__*/jsxRuntime_1(CardRoot, _extends({
       className: clsx(classes.root, className),
       elevation: raised ? 8 : undefined,
@@ -25338,9 +25582,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const cardActionAreaClasses = generateUtilityClasses('MuiCardActionArea', ['root', 'focusVisible', 'focusHighlight']);
   var cardActionAreaClasses$1 = cardActionAreaClasses;
 
-  const _excluded$1C = ["children", "className", "focusVisibleClassName"];
+  const _excluded$1B = ["children", "className", "focusVisibleClassName"];
 
-  const useUtilityClasses$1l = ownerState => {
+  const useUtilityClasses$1k = ownerState => {
     const {
       classes
     } = ownerState;
@@ -25362,13 +25606,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', {
@@ -25403,10 +25647,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       className,
       focusVisibleClassName
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1C);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1B);
 
     const ownerState = props;
-    const classes = useUtilityClasses$1l(ownerState);
+    const classes = useUtilityClasses$1k(ownerState);
     return /*#__PURE__*/jsxRuntime_2(CardActionAreaRoot, _extends({
       className: clsx(classes.root, className),
       focusVisibleClassName: clsx(focusVisibleClassName, classes.focusVisible),
@@ -25460,9 +25704,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const cardActionsClasses = generateUtilityClasses('MuiCardActions', ['root', 'spacing']);
   var cardActionsClasses$1 = cardActionsClasses;
 
-  const _excluded$1B = ["disableSpacing", "className"];
+  const _excluded$1A = ["disableSpacing", "className"];
 
-  const useUtilityClasses$1k = ownerState => {
+  const useUtilityClasses$1j = ownerState => {
     const {
       classes,
       disableSpacing
@@ -25503,13 +25747,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       disableSpacing = false,
       className
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1B);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1A);
 
     const ownerState = _extends({}, props, {
       disableSpacing
     });
 
-    const classes = useUtilityClasses$1k(ownerState);
+    const classes = useUtilityClasses$1j(ownerState);
     return /*#__PURE__*/jsxRuntime_1(CardActionsRoot, _extends({
       className: clsx(classes.root, className),
       ownerState: ownerState,
@@ -25558,9 +25802,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const cardContentClasses = generateUtilityClasses('MuiCardContent', ['root']);
   var cardContentClasses$1 = cardContentClasses;
 
-  const _excluded$1A = ["className", "component"];
+  const _excluded$1z = ["className", "component"];
 
-  const useUtilityClasses$1j = ownerState => {
+  const useUtilityClasses$1i = ownerState => {
     const {
       classes
     } = ownerState;
@@ -25592,13 +25836,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       className,
       component = 'div'
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1A);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1z);
 
     const ownerState = _extends({}, props, {
       component
     });
 
-    const classes = useUtilityClasses$1j(ownerState);
+    const classes = useUtilityClasses$1i(ownerState);
     return /*#__PURE__*/jsxRuntime_1(CardContentRoot, _extends({
       as: component,
       className: clsx(classes.root, className),
@@ -25648,9 +25892,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const cardHeaderClasses = generateUtilityClasses('MuiCardHeader', ['root', 'avatar', 'action', 'content', 'title', 'subheader']);
   var cardHeaderClasses$1 = cardHeaderClasses;
 
-  const _excluded$1z = ["action", "avatar", "className", "component", "disableTypography", "subheader", "subheaderTypographyProps", "title", "titleTypographyProps"];
+  const _excluded$1y = ["action", "avatar", "className", "component", "disableTypography", "subheader", "subheaderTypographyProps", "title", "titleTypographyProps"];
 
-  const useUtilityClasses$1i = ownerState => {
+  const useUtilityClasses$1h = ownerState => {
     const {
       classes
     } = ownerState;
@@ -25721,14 +25965,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       title: titleProp,
       titleTypographyProps
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1z);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1y);
 
     const ownerState = _extends({}, props, {
       component,
       disableTypography
     });
 
-    const classes = useUtilityClasses$1i(ownerState);
+    const classes = useUtilityClasses$1h(ownerState);
     let title = titleProp;
 
     if (title != null && title.type !== Typography$1 && !disableTypography) {
@@ -25862,9 +26106,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const cardMediaClasses = generateUtilityClasses('MuiCardMedia', ['root', 'media', 'img']);
   var cardMediaClasses$1 = cardMediaClasses;
 
-  const _excluded$1y = ["children", "className", "component", "image", "src", "style"];
+  const _excluded$1x = ["children", "className", "component", "image", "src", "style"];
 
-  const useUtilityClasses$1h = ownerState => {
+  const useUtilityClasses$1g = ownerState => {
     const {
       classes,
       isMediaComponent,
@@ -25918,7 +26162,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       src,
       style
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1y);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1x);
 
     const isMediaComponent = MEDIA_COMPONENTS.indexOf(component) !== -1;
     const composedStyle = !isMediaComponent && image ? _extends({
@@ -25931,7 +26175,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       isImageComponent: IMAGE_COMPONENTS.indexOf(component) !== -1
     });
 
-    const classes = useUtilityClasses$1h(ownerState);
+    const classes = useUtilityClasses$1g(ownerState);
     return /*#__PURE__*/jsxRuntime_1(CardMediaRoot, _extends({
       className: clsx(classes.root, className),
       as: component,
@@ -26010,9 +26254,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }
   generateUtilityClasses('PrivateSwitchBase', ['root', 'checked', 'disabled', 'input', 'edgeStart', 'edgeEnd']);
 
-  const _excluded$1x = ["autoFocus", "checked", "checkedIcon", "className", "defaultChecked", "disabled", "disableFocusRipple", "edge", "icon", "id", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "readOnly", "required", "tabIndex", "type", "value"];
+  const _excluded$1w = ["autoFocus", "checked", "checkedIcon", "className", "defaultChecked", "disabled", "disableFocusRipple", "edge", "icon", "id", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "readOnly", "required", "tabIndex", "type", "value"];
 
-  const useUtilityClasses$1g = ownerState => {
+  const useUtilityClasses$1f = ownerState => {
     const {
       classes,
       checked,
@@ -26076,7 +26320,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       type,
       value
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1x);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1w);
 
     const [checked, setCheckedState] = useControlled({
       controlled: checkedProp,
@@ -26138,7 +26382,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       edge
     });
 
-    const classes = useUtilityClasses$1g(ownerState);
+    const classes = useUtilityClasses$1f(ownerState);
     return /*#__PURE__*/jsxRuntime_2(SwitchBaseRoot, _extends({
       component: "span",
       className: clsx(classes.root, className),
@@ -26320,9 +26564,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const checkboxClasses = generateUtilityClasses('MuiCheckbox', ['root', 'checked', 'disabled', 'indeterminate', 'colorPrimary', 'colorSecondary']);
   var checkboxClasses$1 = checkboxClasses;
 
-  const _excluded$1w = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size"];
+  const _excluded$1v = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size"];
 
-  const useUtilityClasses$1f = ownerState => {
+  const useUtilityClasses$1e = ownerState => {
     const {
       classes,
       indeterminate,
@@ -26390,7 +26634,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       inputProps,
       size = 'medium'
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1w);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1v);
 
     const icon = indeterminate ? indeterminateIconProp : iconProp;
     const indeterminateIcon = indeterminate ? indeterminateIconProp : checkedIcon;
@@ -26401,7 +26645,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       size
     });
 
-    const classes = useUtilityClasses$1f(ownerState);
+    const classes = useUtilityClasses$1e(ownerState);
     return /*#__PURE__*/jsxRuntime_1(CheckboxRoot, _extends({
       type: "checkbox",
       inputProps: _extends({
@@ -26545,7 +26789,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const circularProgressClasses = generateUtilityClasses('MuiCircularProgress', ['root', 'determinate', 'indeterminate', 'colorPrimary', 'colorSecondary', 'svg', 'circle', 'circleDeterminate', 'circleIndeterminate', 'circleDisableShrink']);
   var circularProgressClasses$1 = circularProgressClasses;
 
-  const _excluded$1v = ["className", "color", "disableShrink", "size", "style", "thickness", "value", "variant"];
+  const _excluded$1u = ["className", "color", "disableShrink", "size", "style", "thickness", "value", "variant"];
 
   let _$2 = t => t,
       _t$2,
@@ -26579,7 +26823,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }
 `));
 
-  const useUtilityClasses$1e = ownerState => {
+  const useUtilityClasses$1d = ownerState => {
     const {
       classes,
       variant,
@@ -26675,7 +26919,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       value = 0,
       variant = 'indeterminate'
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1v);
+          other = _objectWithoutPropertiesLoose(props, _excluded$1u);
 
     const ownerState = _extends({}, props, {
       color,
@@ -26686,7 +26930,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       variant
     });
 
-    const classes = useUtilityClasses$1e(ownerState);
+    const classes = useUtilityClasses$1d(ownerState);
     const circleStyle = {};
     const rootStyle = {};
     const rootProps = {};
@@ -26807,106 +27051,21 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   } ;
   var CircularProgress$1 = CircularProgress;
 
-  function getContainerUtilityClass(slot) {
-    return generateUtilityClass('MuiContainer', slot);
-  }
-  const containerClasses = generateUtilityClasses('MuiContainer', ['root', 'disableGutters', 'fixed', 'maxWidthXs', 'maxWidthSm', 'maxWidthMd', 'maxWidthLg', 'maxWidthXl']);
-  var containerClasses$1 = containerClasses;
-
-  const _excluded$1u = ["className", "component", "disableGutters", "fixed", "maxWidth"];
-
-  const useUtilityClasses$1d = ownerState => {
-    const {
-      classes,
-      fixed,
-      disableGutters,
-      maxWidth
-    } = ownerState;
-    const slots = {
-      root: ['root', maxWidth && `maxWidth${capitalize(String(maxWidth))}`, fixed && 'fixed', disableGutters && 'disableGutters']
-    };
-    return composeClasses(slots, getContainerUtilityClass, classes);
-  };
-
-  const ContainerRoot = styled$1('div', {
-    name: 'MuiContainer',
-    slot: 'Root',
-    overridesResolver: (props, styles) => {
-      const {
-        ownerState
-      } = props;
-      return [styles.root, styles[`maxWidth${capitalize(String(ownerState.maxWidth))}`], ownerState.fixed && styles.fixed, ownerState.disableGutters && styles.disableGutters];
-    }
-  })(({
-    theme,
-    ownerState
-  }) => _extends({
-    width: '100%',
-    marginLeft: 'auto',
-    boxSizing: 'border-box',
-    marginRight: 'auto',
-    display: 'block'
-  }, !ownerState.disableGutters && {
-    paddingLeft: theme.spacing(2),
-    paddingRight: theme.spacing(2),
-    [theme.breakpoints.up('sm')]: {
-      paddingLeft: theme.spacing(3),
-      paddingRight: theme.spacing(3)
-    }
-  }), ({
-    theme,
-    ownerState
-  }) => ownerState.fixed && Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
-    const value = theme.breakpoints.values[breakpoint];
-
-    if (value !== 0) {
-      acc[theme.breakpoints.up(breakpoint)] = {
-        maxWidth: `${value}${theme.breakpoints.unit}`
-      };
-    }
-
-    return acc;
-  }, {}), ({
-    theme,
-    ownerState
-  }) => _extends({}, ownerState.maxWidth === 'xs' && {
-    [theme.breakpoints.up('xs')]: {
-      maxWidth: Math.max(theme.breakpoints.values.xs, 444)
-    }
-  }, ownerState.maxWidth && ownerState.maxWidth !== 'xs' && {
-    [theme.breakpoints.up(ownerState.maxWidth)]: {
-      maxWidth: `${theme.breakpoints.values[ownerState.maxWidth]}${theme.breakpoints.unit}`
-    }
-  }));
-  const Container = /*#__PURE__*/React__namespace.forwardRef(function Container(inProps, ref) {
-    const props = useThemeProps({
+  const Container = createContainer({
+    createStyledComponent: styled$1('div', {
+      name: 'MuiContainer',
+      slot: 'Root',
+      overridesResolver: (props, styles) => {
+        const {
+          ownerState
+        } = props;
+        return [styles.root, styles[`maxWidth${capitalize(String(ownerState.maxWidth))}`], ownerState.fixed && styles.fixed, ownerState.disableGutters && styles.disableGutters];
+      }
+    }),
+    useThemeProps: inProps => useThemeProps({
       props: inProps,
       name: 'MuiContainer'
-    });
-
-    const {
-      className,
-      component = 'div',
-      disableGutters = false,
-      fixed = false,
-      maxWidth = 'lg'
-    } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$1u);
-
-    const ownerState = _extends({}, props, {
-      component,
-      disableGutters,
-      fixed,
-      maxWidth
-    });
-
-    const classes = useUtilityClasses$1d(ownerState);
-    return /*#__PURE__*/jsxRuntime_1(ContainerRoot, _extends({
-      as: component,
-      ownerState: ownerState,
-      className: clsx(classes.root, className),
-      ref: ref
-    }, other));
+    })
   });
   Container.propTypes
   /* remove-proptypes */
@@ -26926,11 +27085,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     classes: PropTypes.object,
 
-    /**
-     * @ignore
-     */
-    className: PropTypes.string,
-
     /**
      * The component used for the root node.
      * Either a string to use a HTML element or a component.
@@ -26969,6 +27123,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   } ;
   var Container$1 = Container;
 
+  function getContainerUtilityClass(slot) {
+    return generateUtilityClass('MuiContainer', slot);
+  }
+  const containerClasses = generateUtilityClasses('MuiContainer', ['root', 'disableGutters', 'fixed', 'maxWidthXs', 'maxWidthSm', 'maxWidthMd', 'maxWidthLg', 'maxWidthXl']);
+  var containerClasses$1 = containerClasses;
+
   const html = (theme, enableColorScheme) => _extends({
     WebkitFontSmoothing: 'antialiased',
     // Antialiasing.
@@ -26983,12 +27143,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) => {
@@ -27008,7 +27168,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
         }
       })
     };
@@ -27116,7 +27276,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,
@@ -27929,8 +28089,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
@@ -28189,7 +28349,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',
@@ -28197,7 +28357,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' && {
@@ -28224,7 +28384,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%)'
@@ -28239,7 +28399,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%)'
     }
   }), ({
@@ -28803,7 +28963,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,
@@ -28832,7 +28992,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
@@ -28860,13 +29020,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',
@@ -29126,77 +29286,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
       }
     }
   }));
@@ -29270,7 +29434,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'default'
      */
-    color: PropTypes.oneOf(['default', 'error', 'info', 'inherit', 'primary', 'secondary', 'success', 'warning']),
+    color: PropTypes
+    /* @typescript-to-proptypes-ignore */
+    .oneOfType([PropTypes.oneOf(['default', 'error', 'info', 'inherit', 'primary', 'secondary', 'success', 'warning']), PropTypes.string]),
 
     /**
      * The component used for the root node.
@@ -30117,7 +30283,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
       }
     }
   }));
@@ -30432,7 +30598,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,
@@ -30440,10 +30606,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
@@ -30608,19 +30774,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', {
@@ -30631,7 +30797,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) {
@@ -32320,14 +32486,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]
   }));
@@ -32864,7 +33030,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',
@@ -33053,7 +33219,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 && {
@@ -33062,7 +33233,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
@@ -33083,7 +33254,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
 
       },
@@ -33102,7 +33273,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}`
@@ -33398,7 +33569,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})`]: {
@@ -34209,7 +34380,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'
@@ -34228,7 +34398,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,
@@ -34263,9 +34432,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,
@@ -34283,8 +34450,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));
   });
@@ -34572,33 +34739,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'
@@ -34659,7 +34826,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       value: childContext,
       children: /*#__PURE__*/jsxRuntime_1(ListItemButtonRoot, _extends({
         ref: handleRef,
-        component: component,
+        href: other.href || other.to,
+        component: (other.href || other.to) && component === 'div' ? 'a' : component,
         focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
         ownerState: ownerState
       }, other, {
@@ -34741,6 +34909,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     focusVisibleClassName: PropTypes.string,
 
+    /**
+     * @ignore
+     */
+    href: PropTypes.string,
+
     /**
      * Use to apply selected styling.
      * @default false
@@ -34915,21 +35088,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', {
@@ -34937,17 +35110,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 && {
@@ -35380,7 +35553,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' && {
@@ -35707,7 +35880,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return false;
   }
   /**
-   * A permanently displayed menu following https://www.w3.org/TR/wai-aria-practices/#menubutton.
+   * A permanently displayed menu following https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/.
    * It's exposed to help customization of the [`Menu`](/material-ui/api/menu/) component if you
    * use it separately you need to move focus into the component manually. Once
    * the focus is placed inside the component it is fully keyboard accessible.
@@ -36760,35 +36933,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),
@@ -37012,20 +37185,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',
@@ -37055,13 +37228,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',
@@ -38186,10 +38359,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,
@@ -38217,39 +38390,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' && {
@@ -38265,49 +38438,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
       }
     })
   }));
@@ -38895,9 +39068,9 @@ 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,
     '&:hover': {
-      backgroundColor: alpha(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? `rgba(${ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent'
@@ -38905,11 +39078,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }
   }, ownerState.color !== 'default' && {
     [`&.${radioClasses$1.checked}`]: {
-      color: theme.palette[ownerState.color].main
+      color: (theme.vars || theme).palette[ownerState.color].main
     }
   }, {
     [`&.${radioClasses$1.disabled}`]: {
-      color: theme.palette.action.disabled
+      color: (theme.vars || theme).palette.action.disabled
     }
   }));
 
@@ -39279,7 +39452,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}`]: {
@@ -39332,7 +39505,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',
@@ -40301,8 +40474,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     const handleKeyDown = event => {
       if (!readOnly) {
-        const validKeys = [' ', 'ArrowUp', 'ArrowDown', // The native select doesn't respond to enter on MacOS, but it's recommended by
-        // https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html
+        const validKeys = [' ', 'ArrowUp', 'ArrowDown', // The native select doesn't respond to enter on macOS, but it's recommended by
+        // https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
         'Enter'];
 
         if (validKeys.indexOf(event.key) !== -1) {
@@ -41245,11 +41418,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       const {
         ownerState
       } = props;
-      const marks = ownerState.marksProp === true && ownerState.step !== null ? [...Array(Math.floor((ownerState.max - ownerState.min) / ownerState.step) + 1)].map((_, index) => ({
-        value: ownerState.min + ownerState.step * index
-      })) : ownerState.marksProp || [];
-      const marked = marks.length > 0 && marks.some(mark => mark.label);
-      return [styles.root, styles[`color${capitalize(ownerState.color)}`], ownerState.size !== 'medium' && styles[`size${capitalize(ownerState.size)}`], marked && styles.marked, ownerState.orientation === 'vertical' && styles.vertical, ownerState.track === 'inverted' && styles.trackInverted, ownerState.track === false && styles.trackFalse];
+      return [styles.root, styles[`color${capitalize(ownerState.color)}`], ownerState.size !== 'medium' && styles[`size${capitalize(ownerState.size)}`], ownerState.marked && styles.marked, ownerState.orientation === 'vertical' && styles.vertical, ownerState.track === 'inverted' && styles.trackInverted, ownerState.track === false && styles.trackFalse];
     }
   })(({
     theme,
@@ -42156,7 +42325,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,
@@ -42852,7 +43021,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'
@@ -43382,7 +43551,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'
@@ -43443,9 +43612,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),
@@ -43511,7 +43680,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',
@@ -44715,15 +44884,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;
 
   /**
@@ -44962,15 +45138,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', {
@@ -44980,7 +45156,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
   }));
@@ -45161,11 +45337,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}`]: {
@@ -45173,7 +45349,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', {
@@ -45197,7 +45373,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({
@@ -47012,23 +47188,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,
@@ -47270,7 +47446,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'
     })
@@ -48257,7 +48433,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': {
@@ -48688,12 +48864,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)
       }
     }
   }));
@@ -48827,19 +49003,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
       }
     }
   }));
@@ -49331,7 +49507,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     overflowX: 'hidden',
     width: '100%'
   }, ownerState.hideScrollbar && {
-    // Hide dimensionless scrollbar on MacOS
+    // Hide dimensionless scrollbar on macOS
     scrollbarWidth: 'none',
     // Firefox
     '&::-webkit-scrollbar': {
@@ -49377,9 +49553,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,
@@ -49391,7 +49567,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   })({
     overflowX: 'auto',
     overflowY: 'hidden',
-    // Hide dimensionless scrollbar on MacOS
+    // Hide dimensionless scrollbar on macOS
     scrollbarWidth: 'none',
     // Firefox
     '&::-webkit-scrollbar': {
@@ -50490,35 +50666,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)
           }
         }
       }
@@ -50746,7 +50929,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 && {
@@ -51126,6 +51309,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;
@@ -51189,7 +51373,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;
@@ -51207,7 +51391,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;
@@ -51436,6 +51620,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;