@mui/material 5.8.4 → 5.8.7

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.8.4
+/** @license MUI v5.8.7
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -560,6 +560,7 @@
   }
 
   var StyleSheet = /*#__PURE__*/function () {
+    // Using Node instead of HTMLElement since container may be a ShadowRoot
     function StyleSheet(options) {
       var _this = this;
 
@@ -918,8 +919,7 @@
       }
     }
 
-    var inserted = {}; // $FlowFixMe
-
+    var inserted = {};
     var container;
     var nodesToHydrate = [];
 
@@ -1574,6 +1574,8 @@
     };
   }
 
+  var noComponentSelectorMessage = 'Component selectors can only be used in conjunction with ' + '@emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware ' + 'compiler transform.';
+
   function handleInterpolation(mergedProps, registered, interpolation) {
     if (interpolation == null) {
       return '';
@@ -1581,7 +1583,7 @@
 
     if (interpolation.__emotion_styles !== undefined) {
       if (interpolation.toString() === 'NO_COMPONENT_SELECTOR') {
-        throw new Error('Component selectors can only be used in conjunction with @emotion/babel-plugin.');
+        throw new Error(noComponentSelectorMessage);
       }
 
       return interpolation;
@@ -1691,7 +1693,7 @@
           }
         } else {
           if (_key === 'NO_COMPONENT_SELECTOR' && "development" !== 'production') {
-            throw new Error('Component selectors can only be used in conjunction with @emotion/babel-plugin.');
+            throw new Error(noComponentSelectorMessage);
           }
 
           if (Array.isArray(value) && typeof value[0] === 'string' && (registered == null || registered[value[0]] === undefined)) {
@@ -1961,7 +1963,7 @@
 
   var pkg = {
   	name: "@emotion/react",
-  	version: "11.9.0",
+  	version: "11.9.3",
   	main: "dist/emotion-react.cjs.js",
   	module: "dist/emotion-react.esm.js",
   	browser: {
@@ -1989,8 +1991,8 @@
   	dependencies: {
   		"@babel/runtime": "^7.13.10",
   		"@emotion/babel-plugin": "^11.7.1",
-  		"@emotion/cache": "^11.7.1",
-  		"@emotion/serialize": "^1.0.3",
+  		"@emotion/cache": "^11.9.3",
+  		"@emotion/serialize": "^1.0.4",
   		"@emotion/utils": "^1.1.0",
   		"@emotion/weak-memoize": "^0.2.5",
   		"hoist-non-react-statics": "^3.3.1"
@@ -2009,12 +2011,11 @@
   	},
   	devDependencies: {
   		"@babel/core": "^7.13.10",
+  		"@definitelytyped/dtslint": "0.0.112",
   		"@emotion/css": "11.9.0",
   		"@emotion/css-prettifier": "1.0.1",
   		"@emotion/server": "11.4.0",
-  		"@emotion/styled": "11.8.1",
-  		"@types/react": "^16.9.11",
-  		dtslint: "^4.2.1",
+  		"@emotion/styled": "11.9.3",
   		"html-tag-names": "^1.1.2",
   		react: "16.14.0",
   		"svg-tag-names": "^1.1.1",
@@ -4624,7 +4625,7 @@
     injectFirst: PropTypes.bool
   } ;
 
-  function isEmpty$3(obj) {
+  function isEmpty$4(obj) {
     return obj === undefined || obj === null || Object.keys(obj).length === 0;
   }
 
@@ -4633,7 +4634,7 @@
       styles,
       defaultTheme = {}
     } = props;
-    const globalStyles = typeof styles === 'function' ? themeInput => styles(isEmpty$3(themeInput) ? defaultTheme : themeInput) : styles;
+    const globalStyles = typeof styles === 'function' ? themeInput => styles(isEmpty$4(themeInput) ? defaultTheme : themeInput) : styles;
     return /*#__PURE__*/jsxRuntime_1(Global, {
       styles: globalStyles
     });
@@ -5464,7 +5465,12 @@
     return requiredInteger(props, propName, ...other);
   }
 
+  function validatorNoop() {
+    return null;
+  }
+
   validator.isRequired = requiredInteger;
+  validatorNoop.isRequired = validatorNoop;
   var integerPropType = validator;
 
   /**
@@ -5528,26 +5534,26 @@
   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) {
+    active: 'active',
+    checked: 'checked',
+    completed: 'completed',
+    disabled: 'disabled',
+    error: 'error',
+    expanded: 'expanded',
+    focused: 'focused',
+    focusVisible: 'focusVisible',
+    required: 'required',
+    selected: 'selected'
+  };
+  function generateUtilityClass(componentName, slot, globalStatePrefix = 'Mui') {
     const globalStateClass = globalStateClassesMapping[slot];
-    return globalStateClass || `${ClassNameGenerator$1.generate(componentName)}-${slot}`;
+    return globalStateClass ? `${globalStatePrefix}-${globalStateClass}` : `${ClassNameGenerator$1.generate(componentName)}-${slot}`;
   }
 
-  function generateUtilityClasses(componentName, slots) {
+  function generateUtilityClasses(componentName, slots, globalStatePrefix = 'Mui') {
     const result = {};
     slots.forEach(slot => {
-      result[slot] = generateUtilityClass(componentName, slot);
+      result[slot] = generateUtilityClass(componentName, slot, globalStatePrefix);
     });
     return result;
   }
@@ -6455,7 +6461,7 @@
   styleFunctionSx.filterProps = ['sx'];
   var defaultStyleFunctionSx = styleFunctionSx;
 
-  const _excluded$2l = ["sx"];
+  const _excluded$2m = ["sx"];
 
   const splitProps = props => {
     const result = {
@@ -6476,7 +6482,7 @@
     const {
       sx: inSx
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2l);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2m);
 
     const {
       systemProps,
@@ -6542,7 +6548,7 @@
   	return str;
   }
 
-  function clsx () {
+  function clsx() {
   	var i=0, tmp, x, str='';
   	while (i < arguments.length) {
   		if (tmp = arguments[i++]) {
@@ -6555,7 +6561,7 @@
   	return str;
   }
 
-  const _excluded$2k = ["values", "unit", "step"];
+  const _excluded$2l = ["values", "unit", "step"];
 
   const sortBreakpointsValues = values => {
     const breakpointsAsArray = Object.keys(values).map(key => ({
@@ -6591,7 +6597,7 @@
       unit = 'px',
       step = 5
     } = breakpoints,
-          other = _objectWithoutPropertiesLoose(breakpoints, _excluded$2k);
+          other = _objectWithoutPropertiesLoose(breakpoints, _excluded$2l);
 
     const sortedValues = sortBreakpointsValues(values);
     const keys = Object.keys(sortedValues);
@@ -6683,7 +6689,7 @@
     return spacing;
   }
 
-  const _excluded$2j = ["breakpoints", "palette", "spacing", "shape"];
+  const _excluded$2k = ["breakpoints", "palette", "spacing", "shape"];
 
   function createTheme$1(options = {}, ...args) {
     const {
@@ -6692,7 +6698,7 @@
       spacing: spacingInput,
       shape: shapeInput = {}
     } = options,
-          other = _objectWithoutPropertiesLoose(options, _excluded$2j);
+          other = _objectWithoutPropertiesLoose(options, _excluded$2k);
 
     const breakpoints = createBreakpoints(breakpointsInput);
     const spacing = createSpacing(spacingInput);
@@ -6814,7 +6820,7 @@
     return useTheme$2(defaultTheme);
   }
 
-  const _excluded$2i = ["className", "component"];
+  const _excluded$2j = ["className", "component"];
   function createBox(options = {}) {
     const {
       defaultTheme,
@@ -6831,7 +6837,7 @@
         className,
         component = 'div'
       } = _extendSxProp,
-            other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$2i);
+            other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$2j);
 
       return /*#__PURE__*/jsxRuntime_1(BoxRoot, _extends({
         as: component,
@@ -6843,9 +6849,9 @@
     return Box;
   }
 
-  const _excluded$2h = ["variant"];
+  const _excluded$2i = ["variant"];
 
-  function isEmpty$2(string) {
+  function isEmpty$3(string) {
     return string.length === 0;
   }
   /**
@@ -6859,24 +6865,24 @@
     const {
       variant
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2h);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2i);
 
     let classKey = variant || '';
     Object.keys(other).sort().forEach(key => {
       if (key === 'color') {
-        classKey += isEmpty$2(classKey) ? props[key] : capitalize(props[key]);
+        classKey += isEmpty$3(classKey) ? props[key] : capitalize(props[key]);
       } else {
-        classKey += `${isEmpty$2(classKey) ? key : capitalize(key)}${capitalize(props[key].toString())}`;
+        classKey += `${isEmpty$3(classKey) ? key : capitalize(key)}${capitalize(props[key].toString())}`;
       }
     });
     return classKey;
   }
 
-  const _excluded$2g = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
+  const _excluded$2h = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
         _excluded2$c = ["theme"],
         _excluded3$1 = ["theme"];
 
-  function isEmpty$1(obj) {
+  function isEmpty$2(obj) {
     return Object.keys(obj).length === 0;
   }
 
@@ -6955,7 +6961,7 @@
         skipSx: inputSkipSx,
         overridesResolver
       } = inputOptions,
-            options = _objectWithoutPropertiesLoose(inputOptions, _excluded$2g); // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
+            options = _objectWithoutPropertiesLoose(inputOptions, _excluded$2h); // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
 
 
       const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver : componentSlot && componentSlot !== 'Root' || false;
@@ -6995,7 +7001,7 @@
                 other = _objectWithoutPropertiesLoose(_ref, _excluded2$c);
 
             return stylesArg(_extends({
-              theme: isEmpty$1(themeInput) ? defaultTheme : themeInput
+              theme: isEmpty$2(themeInput) ? defaultTheme : themeInput
             }, other));
           } : stylesArg;
         }) : [];
@@ -7003,7 +7009,7 @@
 
         if (componentName && overridesResolver) {
           expressionsWithDefaultTheme.push(props => {
-            const theme = isEmpty$1(props.theme) ? defaultTheme : props.theme;
+            const theme = isEmpty$2(props.theme) ? defaultTheme : props.theme;
             const styleOverrides = getStyleOverrides(componentName, theme);
 
             if (styleOverrides) {
@@ -7022,14 +7028,14 @@
 
         if (componentName && !skipVariantsResolver) {
           expressionsWithDefaultTheme.push(props => {
-            const theme = isEmpty$1(props.theme) ? defaultTheme : props.theme;
+            const theme = isEmpty$2(props.theme) ? defaultTheme : props.theme;
             return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
           });
         }
 
         if (!skipSx) {
           expressionsWithDefaultTheme.push(props => {
-            const theme = isEmpty$1(props.theme) ? defaultTheme : props.theme;
+            const theme = isEmpty$2(props.theme) ? defaultTheme : props.theme;
             return styleFunctionSx(_extends({}, props, {
               theme
             }));
@@ -7056,7 +7062,7 @@
                 other = _objectWithoutPropertiesLoose(_ref2, _excluded3$1);
 
             return styleArg(_extends({
-              theme: isEmpty$1(themeInput) ? defaultTheme : themeInput
+              theme: isEmpty$2(themeInput) ? defaultTheme : themeInput
             }, other));
           };
         }
@@ -7568,13 +7574,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
    * @param {Object} theme
    * @param {{
    *  prefix?: string,
-   *  basePrefix?: string,
    *  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
    * }} options.
-   *  `basePrefix`: defined by design system.
-   *  `prefix`: defined by application
-   *
-   *   the CSS variable value will be adjusted based on the provided `basePrefix` & `prefix` which can be found in `parsedTheme`.
+   *  `prefix`: The prefix of the generated CSS variables. This function does not change the value.
    *
    * @returns {{ css: Object, vars: Object, parsedTheme: typeof theme }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme), and `parsedTheme` is the cloned version of theme.
    *
@@ -7585,16 +7587,15 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
    *   palette: { primary: { 500: 'var(--color)' } }
    * }, { prefix: 'foo' })
    *
-   * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--foo-color)' }
-   * console.log(vars) // { fontSize: '--foo-fontSize', lineHeight: '--foo-lineHeight', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
-   * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--foo-color)' } } }
+   * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
+   * console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
+   * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--color)' } } }
    */
 
 
   function cssVarsParser(theme, options) {
     const {
       prefix,
-      basePrefix = '',
       shouldSkipGeneratingVar
     } = options || {};
     const css = {};
@@ -7602,16 +7603,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const parsedTheme = {};
     walkObjectDeep(theme, (keys, value, arrayKeys) => {
       if (typeof value === 'string' || typeof value === 'number') {
-        if (typeof value === 'string' && value.match(/var\(\s*--/)) {
-          // for CSS variable, apply prefix or remove basePrefix from the variable
-          if (!basePrefix && prefix) {
-            value = value.replace(/var\(\s*--/g, `var(--${prefix}-`);
-          } else {
-            value = prefix ? value.replace(new RegExp(`var\\(\\s*--${basePrefix}`, 'g'), `var(--${prefix}`) // removing spaces
-            : value.replace(new RegExp(`var\\(\\s*--${basePrefix}-`, 'g'), 'var(--');
-          }
-        }
-
         if (!shouldSkipGeneratingVar || shouldSkipGeneratingVar && !shouldSkipGeneratingVar(keys, value)) {
           // only create css & var if `shouldSkipGeneratingVar` return false
           const cssVar = `--${prefix ? `${prefix}-` : ''}${keys.join('-')}`;
@@ -7637,6 +7628,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   const DEFAULT_ATTRIBUTE = 'data-color-scheme';
   function getInitColorSchemeScript$1(options) {
     const {
+      enableColorScheme = true,
       enableSystem = false,
       defaultLightColorScheme = 'light',
       defaultDarkColorScheme = 'dark',
@@ -7650,13 +7642,16 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       dangerouslySetInnerHTML: {
         __html: `(function() { try {
         var mode = localStorage.getItem('${modeStorageKey}');
+        var cssColorScheme = mode;
         var colorScheme = '';
         if (mode === 'system' || (!mode && !!${enableSystem})) {
           // handle system mode
           var mql = window.matchMedia('(prefers-color-scheme: dark)');
           if (mql.matches) {
+            cssColorScheme = 'dark';
             colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
           } else {
+            cssColorScheme = 'light';
             colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
           }
         }
@@ -7669,6 +7664,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         if (colorScheme) {
           ${colorSchemeNode}.setAttribute('${attribute}', colorScheme);
         }
+        if (${enableColorScheme} && !!cssColorScheme) {
+          ${colorSchemeNode}.style.setProperty('color-scheme', cssColorScheme);
+        }
       } catch (e) {} })();`
       }
     });
@@ -7899,34 +7897,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     });
   }
 
-  /**
-   * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
-   * and they does not need to remember the prefix (defined once).
-   */
-  function createGetCssVar(prefix = '') {
-    function appendVar(...vars) {
-      if (!vars.length) {
-        return '';
-      }
-
-      const value = vars[0];
-
-      if (typeof value === 'string' && !value.match(/(#|\(|\)|(-?(\d*\.)?\d+)(px|em|%|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc))/)) {
-        return `, var(--${prefix ? `${prefix}-` : ''}${value}${appendVar(...vars.slice(1))})`;
-      }
-
-      return `, ${value}`;
-    } // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
-
-
-    const getCssVar = (field, ...vars) => {
-      return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...vars)})`;
-    };
-
-    return getCssVar;
-  }
-
-  const _excluded$2f = ["colorSchemes", "components"];
+  const _excluded$2g = ["colorSchemes", "components", "cssVarPrefix"];
   const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
   function createCssVarsProvider(options) {
     const {
@@ -7938,8 +7909,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       defaultColorScheme: designSystemColorScheme,
       disableTransitionOnChange: designSystemTransitionOnChange = false,
       enableColorScheme: designSystemEnableColorScheme = true,
-      prefix: designSystemPrefix = '',
-      shouldSkipGeneratingVar,
+      shouldSkipGeneratingVar: designSystemShouldSkipGeneratingVar,
       resolveTheme
     } = options;
 
@@ -7962,7 +7932,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     function CssVarsProvider({
       children,
       theme: themeProp = defaultTheme,
-      prefix = designSystemPrefix,
       modeStorageKey = defaultModeStorageKey,
       colorSchemeStorageKey = defaultColorSchemeStorageKey,
       attribute = defaultAttribute,
@@ -7973,15 +7942,17 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       storageWindow = typeof window === 'undefined' ? undefined : window,
       documentNode = typeof document === 'undefined' ? undefined : document,
       colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
-      colorSchemeSelector = ':root'
+      colorSchemeSelector = ':root',
+      shouldSkipGeneratingVar = designSystemShouldSkipGeneratingVar
     }) {
       const hasMounted = React__namespace.useRef(false);
 
       const {
         colorSchemes = {},
-        components = {}
+        components = {},
+        cssVarPrefix
       } = themeProp,
-            restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded$2f);
+            restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded$2g);
 
       const allColorSchemes = Object.keys(colorSchemes);
       const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
@@ -8024,16 +7995,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         vars: rootVars,
         parsedTheme
       } = cssVarsParser(theme, {
-        prefix,
-        basePrefix: designSystemPrefix,
+        prefix: cssVarPrefix,
         shouldSkipGeneratingVar
       });
       theme = _extends({}, parsedTheme, {
         components,
         colorSchemes,
-        prefix,
+        cssVarPrefix,
         vars: rootVars,
-        getCssVar: createGetCssVar(prefix),
         getColorSchemeSelector: targetColorScheme => `[${attribute}="${targetColorScheme}"] &`
       });
       const defaultColorSchemeStyleSheet = {};
@@ -8044,8 +8013,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           vars,
           parsedTheme: parsedScheme
         } = cssVarsParser(scheme, {
-          prefix,
-          basePrefix: designSystemPrefix,
+          prefix: cssVarPrefix,
           shouldSkipGeneratingVar
         });
         theme.vars = deepmerge(theme.vars, vars);
@@ -8209,9 +8177,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       modeStorageKey: PropTypes.string,
 
       /**
-       * CSS variable prefix.
+       * A function to determine if the key, value should be attached as CSS Variable
        */
-      prefix: PropTypes.string,
+      shouldSkipGeneratingVar: PropTypes.func,
 
       /**
        * The window that attaches the 'storage' event listener
@@ -8228,7 +8196,8 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const getInitColorSchemeScript = params => getInitColorSchemeScript$1(_extends({
       attribute: defaultAttribute,
       colorSchemeStorageKey: defaultColorSchemeStorageKey,
-      modeStorageKey: defaultModeStorageKey
+      modeStorageKey: defaultModeStorageKey,
+      enableColorScheme: designSystemEnableColorScheme
     }, params));
 
     return {
@@ -8238,7 +8207,34 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     };
   }
 
-  const _excluded$2e = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
+  /**
+   * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
+   * and they does not need to remember the prefix (defined once).
+   */
+  function createGetCssVar$1(prefix = '') {
+    function appendVar(...vars) {
+      if (!vars.length) {
+        return '';
+      }
+
+      const value = vars[0];
+
+      if (typeof value === 'string' && !value.match(/(#|\(|\)|(-?(\d*\.)?\d+)(px|em|%|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc))/)) {
+        return `, var(--${prefix ? `${prefix}-` : ''}${value}${appendVar(...vars.slice(1))})`;
+      }
+
+      return `, ${value}`;
+    } // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
+
+
+    const getCssVar = (field, ...fallbacks) => {
+      return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...fallbacks)})`;
+    };
+
+    return getCssVar;
+  }
+
+  const _excluded$2f = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
   const defaultTheme$4 = createTheme$1();
   const defaultCreateStyledComponent = systemStyled('div', {
     name: 'MuiContainer',
@@ -8340,7 +8336,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         fixed = false,
         maxWidth = 'lg'
       } = props,
-            other = _objectWithoutPropertiesLoose(props, _excluded$2e);
+            other = _objectWithoutPropertiesLoose(props, _excluded$2f);
 
       const ownerState = _extends({}, props, {
         component,
@@ -8380,7 +8376,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return Container;
   }
 
-  const _excluded$2d = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
+  const _excluded$2e = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
         _excluded2$b = ["type", "mode"];
   function adaptV4Theme(inputTheme) {
     {
@@ -8395,7 +8391,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       props = {},
       styleOverrides = {}
     } = inputTheme,
-          other = _objectWithoutPropertiesLoose(inputTheme, _excluded$2d);
+          other = _objectWithoutPropertiesLoose(inputTheme, _excluded$2e);
 
     const theme = _extends({}, other, {
       components: {}
@@ -8467,24 +8463,179 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return typeof element === 'string';
   }
 
+  /**
+   * Type of the ownerState based on the type of an element it applies to.
+   * This resolves to the provided OwnerState for React components and `undefined` for host components.
+   * Falls back to `OwnerState | undefined` when the exact type can't be determined in development time.
+   */
+
   /**
    * Appends the ownerState object to the props, merging with the existing one if necessary.
    *
-   * @param elementType Type of the element that owns the `existingProps`. If the element is a DOM node, `ownerState` are not applied.
-   * @param existingProps Props of the element.
+   * @param elementType Type of the element that owns the `existingProps`. If the element is a DOM node, `ownerState` is not applied.
+   * @param otherProps Props of the element.
    * @param ownerState
    */
-
-  function appendOwnerState(elementType, existingProps = {}, ownerState) {
+  function appendOwnerState(elementType, otherProps = {}, ownerState) {
     if (isHostComponent(elementType)) {
-      return existingProps;
+      return otherProps;
     }
 
-    return _extends({}, existingProps, {
-      ownerState: _extends({}, existingProps.ownerState, ownerState)
+    return _extends({}, otherProps, {
+      ownerState: _extends({}, otherProps.ownerState, ownerState)
     });
   }
 
+  /**
+   * Extracts event handlers from a given object.
+   * A prop is considered an event handler if it is a function and its name starts with `on`.
+   *
+   * @param object An object to extract event handlers from.
+   * @param excludeKeys An array of keys to exclude from the returned object.
+   */
+  function extractEventHandlers(object, excludeKeys = []) {
+    if (object === undefined) {
+      return {};
+    }
+
+    const result = {};
+    Object.keys(object).filter(prop => prop.match(/^on[A-Z]/) && typeof object[prop] === 'function' && !excludeKeys.includes(prop)).forEach(prop => {
+      result[prop] = object[prop];
+    });
+    return result;
+  }
+
+  /**
+   * If `componentProps` is a function, calls it with the provided `ownerState`.
+   * Otherwise, just returns `componentProps`.
+   */
+  function resolveComponentProps(componentProps, ownerState) {
+    if (typeof componentProps === 'function') {
+      return componentProps(ownerState);
+    }
+
+    return componentProps;
+  }
+
+  /**
+   * Removes event handlers from the given object.
+   * A field is considered an event handler if it is a function with a name beginning with `on`.
+   *
+   * @param object Object to remove event handlers from.
+   * @returns Object with event handlers removed.
+   */
+  function omitEventHandlers(object) {
+    if (object === undefined) {
+      return {};
+    }
+
+    const result = {};
+    Object.keys(object).filter(prop => !(prop.match(/^on[A-Z]/) && typeof object[prop] === 'function')).forEach(prop => {
+      result[prop] = object[prop];
+    });
+    return result;
+  }
+
+  /**
+   * Merges the slot component internal props (usually coming from a hook)
+   * with the externally provided ones.
+   *
+   * The merge order is (the latter overrides the former):
+   * 1. The internal props (specified as a getter function to work with get*Props hook result)
+   * 2. Additional props (specified internally on an unstyled component)
+   * 3. External props specified on the owner component. These should only be used on a root slot.
+   * 4. External props specified in the `componentsProps.*` prop.
+   * 5. The `className` prop - combined from all the above.
+   * @param parameters
+   * @returns
+   */
+  function mergeSlotProps(parameters) {
+    const {
+      getSlotProps,
+      additionalProps,
+      externalSlotProps,
+      externalForwardedProps,
+      className
+    } = parameters;
+
+    if (!getSlotProps) {
+      // The simpler case - getSlotProps is not defined, so no internal event handlers are defined,
+      // so we can simply merge all the props without having to worry about extracting event handlers.
+      const joinedClasses = clsx(externalForwardedProps == null ? void 0 : externalForwardedProps.className, externalSlotProps == null ? void 0 : externalSlotProps.className, className, additionalProps == null ? void 0 : additionalProps.className);
+
+      const mergedStyle = _extends({}, additionalProps == null ? void 0 : additionalProps.style, externalForwardedProps == null ? void 0 : externalForwardedProps.style, externalSlotProps == null ? void 0 : externalSlotProps.style);
+
+      const props = _extends({}, additionalProps, externalForwardedProps, externalSlotProps);
+
+      if (joinedClasses.length > 0) {
+        props.className = joinedClasses;
+      }
+
+      if (Object.keys(mergedStyle).length > 0) {
+        props.style = mergedStyle;
+      }
+
+      return {
+        props,
+        internalRef: undefined
+      };
+    } // In this case, getSlotProps is responsible for calling the external event handlers.
+    // We don't need to include them in the merged props because of this.
+
+
+    const eventHandlers = extractEventHandlers(_extends({}, externalForwardedProps, externalSlotProps));
+    const componentsPropsWithoutEventHandlers = omitEventHandlers(externalSlotProps);
+    const otherPropsWithoutEventHandlers = omitEventHandlers(externalForwardedProps);
+    const internalSlotProps = getSlotProps(eventHandlers);
+    const joinedClasses = clsx(externalForwardedProps == null ? void 0 : externalForwardedProps.className, externalSlotProps == null ? void 0 : externalSlotProps.className, className, additionalProps == null ? void 0 : additionalProps.className, internalSlotProps == null ? void 0 : internalSlotProps.className);
+
+    const mergedStyle = _extends({}, internalSlotProps == null ? void 0 : internalSlotProps.style, additionalProps == null ? void 0 : additionalProps.style, externalForwardedProps == null ? void 0 : externalForwardedProps.style, externalSlotProps == null ? void 0 : externalSlotProps.style);
+
+    const props = _extends({}, internalSlotProps, additionalProps, otherPropsWithoutEventHandlers, componentsPropsWithoutEventHandlers);
+
+    if (joinedClasses.length > 0) {
+      props.className = joinedClasses;
+    }
+
+    if (Object.keys(mergedStyle).length > 0) {
+      props.style = mergedStyle;
+    }
+
+    return {
+      props,
+      internalRef: internalSlotProps.ref
+    };
+  }
+
+  const _excluded$2d = ["elementType", "externalSlotProps", "ownerState"];
+
+  /**
+   * Builds the props to be passed into the slot of an unstyled component.
+   * It merges the internal props of the component with the ones supplied by the user, allowing to customize the behavior.
+   * If the slot component is not a host component, it also merges in the `ownerState`.
+   *
+   * @param parameters.getSlotProps - A function that returns the props to be passed to the slot component.
+   */
+  function useSlotProps(parameters) {
+    var _parameters$additiona;
+
+    const {
+      elementType,
+      externalSlotProps,
+      ownerState
+    } = parameters,
+          rest = _objectWithoutPropertiesLoose(parameters, _excluded$2d);
+
+    const resolvedComponentsProps = resolveComponentProps(externalSlotProps, ownerState);
+    const merged = mergeSlotProps(_extends({}, rest, {
+      externalSlotProps: resolvedComponentsProps
+    }));
+    const props = appendOwnerState(elementType, _extends({}, merged.props, {
+      ref: useForkRef(merged.internalRef, useForkRef(resolvedComponentsProps == null ? void 0 : resolvedComponentsProps.ref, (_parameters$additiona = parameters.additionalProps) == null ? void 0 : _parameters$additiona.ref))
+    }), ownerState);
+    return props;
+  }
+
   // Give up on IE11 support for this feature
 
   function stripDiacritics(string) {
@@ -8550,13 +8701,13 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       autoHighlight = false,
       autoSelect = false,
       blurOnSelect = false,
-      disabled: disabledProp,
       clearOnBlur = !props.freeSolo,
       clearOnEscape = false,
       componentName = 'useAutocomplete',
       defaultValue = props.multiple ? [] : null,
       disableClearable = false,
       disableCloseOnSelect = false,
+      disabled: disabledProp,
       disabledItemsFocusable = false,
       disableListWrap = false,
       filterOptions = defaultFilterOptions,
@@ -8568,12 +8719,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
         return (_option$label = option.label) != null ? _option$label : option;
       },
-      isOptionEqualToValue = (option, value) => option === value,
       groupBy,
       handleHomeEndKeys = !props.freeSolo,
       id: idProp,
       includeInputInList = false,
       inputValue: inputValueProp,
+      isOptionEqualToValue = (option, value) => option === value,
       multiple = false,
       onChange,
       onClose,
@@ -9558,7 +9709,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   }
   generateUtilityClasses('BaseBadge', ['root', 'badge', 'invisible']);
 
-  const _excluded$2c = ["badgeContent", "component", "children", "className", "components", "componentsProps", "invisible", "max", "showZero"];
+  const _excluded$2c = ["badgeContent", "component", "children", "components", "componentsProps", "invisible", "max", "showZero"];
 
   const useUtilityClasses$1O = ownerState => {
     const {
@@ -9583,12 +9734,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
 
   const BadgeUnstyled = /*#__PURE__*/React__namespace.forwardRef(function BadgeUnstyled(props, ref) {
-    var _componentsProps$root, _componentsProps$badg;
-
     const {
       component,
       children,
-      className,
       components = {},
       componentsProps = {},
       max: maxProp = 99,
@@ -9614,14 +9762,23 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
     const classes = useUtilityClasses$1O(ownerState);
     const Root = component || components.Root || 'span';
-    const rootProps = appendOwnerState(Root, _extends({}, other, componentsProps.root, {
-      ref,
-      className: clsx(classes.root, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.className, className)
-    }), ownerState);
+    const rootProps = useSlotProps({
+      elementType: Root,
+      externalSlotProps: componentsProps.root,
+      externalForwardedProps: other,
+      additionalProps: {
+        ref
+      },
+      ownerState,
+      className: classes.root
+    });
     const Badge = components.Badge || 'span';
-    const badgeProps = appendOwnerState(Badge, _extends({}, componentsProps.badge, {
-      className: clsx(classes.badge, (_componentsProps$badg = componentsProps.badge) == null ? void 0 : _componentsProps$badg.className)
-    }), ownerState);
+    const badgeProps = useSlotProps({
+      elementType: Badge,
+      externalSlotProps: componentsProps.badge,
+      ownerState,
+      className: classes.badge
+    });
     return /*#__PURE__*/jsxRuntime_2(Root, _extends({}, rootProps, {
       children: [children, /*#__PURE__*/jsxRuntime_1(Badge, _extends({}, badgeProps, {
         children: displayValue
@@ -9646,11 +9803,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
      */
     children: PropTypes.node,
 
-    /**
-     * @ignore
-     */
-    className: PropTypes.string,
-
     /**
      * The component used for the root node.
      * Either a string to use a HTML element or a component.
@@ -9672,8 +9824,8 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
      * @default {}
      */
     componentsProps: PropTypes.shape({
-      badge: PropTypes.object,
-      root: PropTypes.object
+      badge: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
     }),
 
     /**
@@ -12359,15 +12511,22 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           });
           element.style.paddingRight = `${getPaddingRight(element) + scrollbarSize}px`;
         });
-      } // Improve Gatsby support
-      // https://css-tricks.com/snippets/css/force-vertical-scrollbar/
+      }
 
+      let scrollContainer;
 
-      const parent = container.parentElement;
-      const containerWindow = ownerWindow(container);
-      const scrollContainer = (parent == null ? void 0 : parent.nodeName) === 'HTML' && containerWindow.getComputedStyle(parent).overflowY === 'scroll' ? parent : container; // Block the scroll even if no scrollbar is visible to account for mobile keyboard
+      if (container.parentNode instanceof DocumentFragment) {
+        scrollContainer = ownerDocument(container).body;
+      } else {
+        // Improve Gatsby support
+        // https://css-tricks.com/snippets/css/force-vertical-scrollbar/
+        const parent = container.parentElement;
+        const containerWindow = ownerWindow(container);
+        scrollContainer = (parent == null ? void 0 : parent.nodeName) === 'HTML' && containerWindow.getComputedStyle(parent).overflowY === 'scroll' ? parent : container;
+      } // Block the scroll even if no scrollbar is visible to account for mobile keyboard
       // screensize shrink.
 
+
       restoreStyle.push({
         value: scrollContainer.style.overflow,
         property: 'overflow',
@@ -12875,7 +13034,7 @@ 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$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 _excluded$2a = ["children", "classes", "className", "closeAfterTransition", "component", "components", "componentsProps", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited"];
 
   const useUtilityClasses$1N = ownerState => {
     const {
@@ -12915,11 +13074,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
    */
 
   const ModalUnstyled = /*#__PURE__*/React__namespace.forwardRef(function ModalUnstyled(props, ref) {
-    var _props$ariaHidden;
+    var _props$ariaHidden, _componentsProps$root;
 
     const {
-      BackdropComponent,
-      BackdropProps,
       children,
       classes: classesProp,
       className,
@@ -12945,7 +13102,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       open,
 
       /* eslint-disable react/prop-types */
-      theme,
       onTransitionEnter,
       onTransitionExited
     } = props,
@@ -13105,26 +13261,25 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     }
 
     const Root = components.Root || component;
-    const rootProps = componentsProps.root || {};
+    const rootProps = appendOwnerState(Root, _extends({
+      role: 'presentation'
+    }, other, componentsProps.root, {
+      ref: handleRef,
+      onKeyDown: handleKeyDown,
+      className: clsx(classes.root, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.className, className)
+    }), ownerState);
+    const BackdropComponent = components.Backdrop;
+    const backdropProps = appendOwnerState(BackdropComponent, _extends({
+      'aria-hidden': true,
+      open,
+      onClick: handleBackdropClick
+    }, componentsProps.backdrop), ownerState);
     return /*#__PURE__*/jsxRuntime_1(Portal$1, {
       ref: handlePortalRef,
       container: container,
       disablePortal: disablePortal,
-      children: /*#__PURE__*/jsxRuntime_2(Root, _extends({
-        role: "presentation"
-      }, rootProps, !isHostComponent(Root) && {
-        as: component,
-        ownerState: _extends({}, ownerState, rootProps.ownerState),
-        theme
-      }, other, {
-        ref: handleRef,
-        onKeyDown: handleKeyDown,
-        className: clsx(classes.root, rootProps.className, className),
-        children: [!hideBackdrop && BackdropComponent ? /*#__PURE__*/jsxRuntime_1(BackdropComponent, _extends({
-          "aria-hidden": true,
-          open: open,
-          onClick: handleBackdropClick
-        }, BackdropProps)) : null, /*#__PURE__*/jsxRuntime_1(TrapFocus, {
+      children: /*#__PURE__*/jsxRuntime_2(Root, _extends({}, rootProps, {
+        children: [!hideBackdrop && BackdropComponent ? /*#__PURE__*/jsxRuntime_1(BackdropComponent, _extends({}, backdropProps)) : null, /*#__PURE__*/jsxRuntime_1(TrapFocus, {
           disableEnforceFocus: disableEnforceFocus,
           disableAutoFocus: disableAutoFocus,
           disableRestoreFocus: disableRestoreFocus,
@@ -13143,16 +13298,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     // |     To update them edit the d.ts file and run "yarn proptypes"     |
     // ----------------------------------------------------------------------
 
-    /**
-     * A backdrop component. This prop enables custom backdrop rendering.
-     */
-    BackdropComponent: PropTypes.elementType,
-
-    /**
-     * Props applied to the backdrop element.
-     */
-    BackdropProps: PropTypes.object,
-
     /**
      * A single child content element.
      */
@@ -13186,6 +13331,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
      * @default {}
      */
     components: PropTypes.shape({
+      Backdrop: PropTypes.elementType,
       Root: PropTypes.elementType
     }),
 
@@ -13194,6 +13340,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
      * @default {}
      */
     componentsProps: PropTypes.shape({
+      backdrop: PropTypes.object,
       root: PropTypes.object
     }),
 
@@ -13635,7 +13782,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       onFocus: handleFocusVisible,
       ref: focusVisibleRef
     } = useIsFocusVisible();
-    const [focusVisible, setFocusVisible] = React__namespace.useState(-1);
+    const [focusedThumbIndex, setFocusedThumbIndex] = React__namespace.useState(-1);
     const sliderRef = React__namespace.useRef();
     const handleFocusRef = useForkRef(focusVisibleRef, sliderRef);
     const handleRef = useForkRef(ref, handleFocusRef);
@@ -13647,7 +13794,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       handleFocusVisible(event);
 
       if (isFocusVisibleRef.current === true) {
-        setFocusVisible(index);
+        setFocusedThumbIndex(index);
       }
 
       setOpen(index);
@@ -13660,7 +13807,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       handleBlurVisible(event);
 
       if (isFocusVisibleRef.current === false) {
-        setFocusVisible(-1);
+        setFocusedThumbIndex(-1);
       }
 
       setOpen(-1);
@@ -13683,8 +13830,8 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       setActive(-1);
     }
 
-    if (disabled && focusVisible !== -1) {
-      setFocusVisible(-1);
+    if (disabled && focusedThumbIndex !== -1) {
+      setFocusedThumbIndex(-1);
     }
 
     const createHandleHiddenInputChange = otherHandlers => event => {
@@ -13733,7 +13880,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       }
 
       setValueState(newValue);
-      setFocusVisible(index);
+      setFocusedThumbIndex(index);
 
       if (handleChange) {
         handleChange(event, newValue, index);
@@ -14044,13 +14191,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         onMouseOver: createHandleMouseOver(otherHandlers || {}),
         onMouseLeave: createHandleMouseLeave(otherHandlers || {})
       };
-
-      const mergedEventHandlers = _extends({}, otherHandlers, ownEventHandlers);
-
-      return _extends({}, mergedEventHandlers);
+      return _extends({}, otherHandlers, ownEventHandlers);
     };
 
     const getHiddenInputProps = (otherHandlers = {}) => {
+      var _parameters$step;
+
       const ownEventHandlers = {
         onChange: createHandleHiddenInputChange(otherHandlers || {}),
         onFocus: createHandleHiddenInputFocus(otherHandlers || {}),
@@ -14069,7 +14215,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         type: 'range',
         min: parameters.min,
         max: parameters.max,
-        step: parameters.step,
+        step: (_parameters$step = parameters.step) != null ? _parameters$step : undefined,
         disabled
       }, mergedEventHandlers, {
         style: _extends({}, visuallyHidden$1, {
@@ -14083,14 +14229,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
     return {
       active,
-      axis,
+      axis: axis,
       axisProps,
       dragging,
-      focusVisible,
+      focusedThumbIndex,
       getHiddenInputProps,
       getRootProps,
       getThumbProps,
-      marks,
+      marks: marks,
       open,
       range,
       trackLeap,
@@ -14099,7 +14245,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     };
   }
 
-  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 _excluded$29 = ["aria-label", "aria-valuetext", "className", "component", "classes", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "orientation", "scale", "step", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat", "isRtl", "components", "componentsProps"];
 
   const Identity = x => x;
 
@@ -14149,7 +14295,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       marks: marksProp = false,
       max = 100,
       min = 0,
-      onMouseDown,
       orientation = 'horizontal',
       scale = Identity,
       step = 1,
@@ -14188,7 +14333,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       active,
       axis,
       range,
-      focusVisible,
+      focusedThumbIndex,
       dragging,
       marks,
       values,
@@ -14199,37 +14344,69 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     }));
     ownerState.marked = marks.length > 0 && marks.some(mark => mark.label);
     ownerState.dragging = dragging;
+    ownerState.focusedThumbIndex = focusedThumbIndex;
+    const classes = useUtilityClasses$1M(ownerState);
     const Root = (_ref = component != null ? component : components.Root) != null ? _ref : 'span';
-    const rootProps = appendOwnerState(Root, _extends({}, other, componentsProps.root), ownerState);
+    const rootProps = useSlotProps({
+      elementType: Root,
+      getSlotProps: getRootProps,
+      externalSlotProps: componentsProps.root,
+      externalForwardedProps: other,
+      ownerState,
+      className: [classes.root, className]
+    });
     const Rail = (_components$Rail = components.Rail) != null ? _components$Rail : 'span';
-    const railProps = appendOwnerState(Rail, componentsProps.rail, ownerState);
+    const railProps = useSlotProps({
+      elementType: Rail,
+      externalSlotProps: componentsProps.rail,
+      ownerState,
+      className: classes.rail
+    });
     const Track = (_components$Track = components.Track) != null ? _components$Track : 'span';
-    const trackProps = appendOwnerState(Track, componentsProps.track, ownerState);
-
-    const trackStyle = _extends({}, axisProps[axis].offset(trackOffset), axisProps[axis].leap(trackLeap));
-
+    const trackProps = useSlotProps({
+      elementType: Track,
+      externalSlotProps: componentsProps.track,
+      additionalProps: {
+        style: _extends({}, axisProps[axis].offset(trackOffset), axisProps[axis].leap(trackLeap))
+      },
+      ownerState,
+      className: classes.track
+    });
     const Thumb = (_components$Thumb = components.Thumb) != null ? _components$Thumb : 'span';
-    const thumbProps = appendOwnerState(Thumb, componentsProps.thumb, ownerState);
+    const thumbProps = useSlotProps({
+      elementType: Thumb,
+      getSlotProps: getThumbProps,
+      externalSlotProps: componentsProps.thumb,
+      ownerState
+    });
     const ValueLabel = (_components$ValueLabe = components.ValueLabel) != null ? _components$ValueLabe : SliderValueLabelUnstyled;
-    const valueLabelProps = appendOwnerState(ValueLabel, componentsProps.valueLabel, ownerState);
+    const valueLabelProps = useSlotProps({
+      elementType: ValueLabel,
+      externalSlotProps: componentsProps.valueLabel,
+      ownerState
+    });
     const Mark = (_components$Mark = components.Mark) != null ? _components$Mark : 'span';
-    const markProps = appendOwnerState(Mark, componentsProps.mark, ownerState);
+    const markProps = useSlotProps({
+      elementType: Mark,
+      externalSlotProps: componentsProps.mark,
+      ownerState,
+      className: classes.mark
+    });
     const MarkLabel = (_components$MarkLabel = components.MarkLabel) != null ? _components$MarkLabel : 'span';
-    const markLabelProps = appendOwnerState(MarkLabel, componentsProps.markLabel, ownerState);
+    const markLabelProps = useSlotProps({
+      elementType: MarkLabel,
+      externalSlotProps: componentsProps.markLabel,
+      ownerState
+    });
     const Input = components.Input || 'input';
-    const inputProps = appendOwnerState(Input, componentsProps.input, ownerState);
-    const hiddenInputProps = getHiddenInputProps();
-    const classes = useUtilityClasses$1M(ownerState);
-    return /*#__PURE__*/jsxRuntime_2(Root, _extends({}, rootProps, getRootProps({
-      onMouseDown
-    }), {
-      className: clsx(classes.root, rootProps.className, className),
-      children: [/*#__PURE__*/jsxRuntime_1(Rail, _extends({}, railProps, {
-        className: clsx(classes.rail, railProps.className)
-      })), /*#__PURE__*/jsxRuntime_1(Track, _extends({}, trackProps, {
-        className: clsx(classes.track, trackProps.className),
-        style: _extends({}, trackStyle, trackProps.style)
-      })), marks.filter(mark => mark.value >= min && mark.value <= max).map((mark, index) => {
+    const inputProps = useSlotProps({
+      elementType: Input,
+      getSlotProps: getHiddenInputProps,
+      externalSlotProps: componentsProps.input,
+      ownerState
+    });
+    return /*#__PURE__*/jsxRuntime_2(Root, _extends({}, rootProps, {
+      children: [/*#__PURE__*/jsxRuntime_1(Rail, _extends({}, railProps)), /*#__PURE__*/jsxRuntime_1(Track, _extends({}, trackProps)), 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;
@@ -14247,7 +14424,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
             markActive
           }, {
             style: _extends({}, style, markProps.style),
-            className: clsx(classes.mark, markProps.className, markActive && classes.markActive)
+            className: clsx(markProps.className, markActive && classes.markActive)
           })), mark.label != null ? /*#__PURE__*/jsxRuntime_1(MarkLabel, _extends({
             "aria-hidden": true,
             "data-index": index
@@ -14274,23 +14451,20 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           }, valueLabelProps, {
             className: clsx(classes.valueLabel, valueLabelProps.className),
             children: /*#__PURE__*/jsxRuntime_1(Thumb, _extends({
-              "data-index": index
-            }, thumbProps, getThumbProps(), {
-              className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusVisible === index && classes.focusVisible),
+              "data-index": index,
+              "data-focusvisible": focusedThumbIndex === index
+            }, thumbProps, {
+              className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
               style: _extends({}, style, {
                 pointerEvents: disableSwap && active !== index ? 'none' : undefined
               }, thumbProps.style),
-              children: /*#__PURE__*/jsxRuntime_1(Input, _extends({}, hiddenInputProps, {
+              children: /*#__PURE__*/jsxRuntime_1(Input, _extends({
                 "data-index": index,
                 "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
                 "aria-valuenow": scale(value),
                 "aria-valuetext": getAriaValueText ? getAriaValueText(scale(value), index) : ariaValuetext,
                 value: values[index]
-              }, !isHostComponent(Input) && {
-                ownerState: _extends({}, ownerState, inputProps.ownerState)
-              }, inputProps, {
-                style: _extends({}, hiddenInputProps.style, inputProps.style)
-              }))
+              }, inputProps))
             }))
           }))
         }, index);
@@ -14378,14 +14552,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
      * @default {}
      */
     componentsProps: PropTypes.shape({
-      input: PropTypes.object,
-      mark: PropTypes.object,
-      markLabel: PropTypes.object,
-      rail: PropTypes.object,
-      root: PropTypes.object,
-      thumb: PropTypes.object,
-      track: PropTypes.object,
-      valueLabel: PropTypes.shape({
+      input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      mark: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      markLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      rail: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      thumb: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      track: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      valueLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
         children: PropTypes.element,
         className: PropTypes.string,
         components: PropTypes.shape({
@@ -14395,7 +14569,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         style: PropTypes.object,
         value: PropTypes.number,
         valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on'])
-      })
+      })])
     }),
 
     /**
@@ -14487,11 +14661,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
      */
     onChangeCommitted: PropTypes.func,
 
-    /**
-     * @ignore
-     */
-    onMouseDown: PropTypes.func,
-
     /**
      * The component orientation.
      * @default 'horizontal'
@@ -14579,6 +14748,11 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       transform: 'translateZ(0)'
     }
   };
+
+  function isEmpty$1(obj) {
+    return obj === undefined || obj === null || Object.keys(obj).length === 0;
+  }
+
   const TextareaAutosize = /*#__PURE__*/React__namespace.forwardRef(function TextareaAutosize(props, ref) {
     const {
       onChange,
@@ -14597,13 +14771,13 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const shadowRef = React__namespace.useRef(null);
     const renders = React__namespace.useRef(0);
     const [state, setState] = React__namespace.useState({});
-    const syncHeight = React__namespace.useCallback(() => {
+    const getUpdatedState = React__namespace.useCallback(() => {
       const input = inputRef.current;
       const containerWindow = ownerWindow(input);
       const computedStyle = containerWindow.getComputedStyle(input); // If input's width is shrunk and it's not visible, don't sync height.
 
       if (computedStyle.width === '0px') {
-        return;
+        return {};
       }
 
       const inputShallow = shadowRef.current;
@@ -14640,30 +14814,77 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
       const outerHeightStyle = outerHeight + (boxSizing === 'border-box' ? padding + border : 0);
       const overflow = Math.abs(outerHeight - innerHeight) <= 1;
-      setState(prevState => {
-        // Need a large enough difference to update the height.
-        // This prevents infinite rendering loop.
-        if (renders.current < 20 && (outerHeightStyle > 0 && Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1 || prevState.overflow !== overflow)) {
-          renders.current += 1;
-          return {
-            overflow,
-            outerHeightStyle
-          };
-        }
+      return {
+        outerHeightStyle,
+        overflow
+      };
+    }, [maxRows, minRows, props.placeholder]);
 
-        {
-          if (renders.current === 20) {
-            console.error(['MUI: Too many re-renders. The layout is unstable.', 'TextareaAutosize limits the number of renders to prevent an infinite loop.'].join('\n'));
-          }
+    const updateState = (prevState, newState) => {
+      const {
+        outerHeightStyle,
+        overflow
+      } = newState; // Need a large enough difference to update the height.
+      // This prevents infinite rendering loop.
+
+      if (renders.current < 20 && (outerHeightStyle > 0 && Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1 || prevState.overflow !== overflow)) {
+        renders.current += 1;
+        return {
+          overflow,
+          outerHeightStyle
+        };
+      }
+
+      {
+        if (renders.current === 20) {
+          console.error(['MUI: Too many re-renders. The layout is unstable.', 'TextareaAutosize limits the number of renders to prevent an infinite loop.'].join('\n'));
         }
+      }
 
-        return prevState;
+      return prevState;
+    };
+
+    const syncHeight = React__namespace.useCallback(() => {
+      const newState = getUpdatedState();
+
+      if (isEmpty$1(newState)) {
+        return;
+      }
+
+      setState(prevState => {
+        return updateState(prevState, newState);
       });
-    }, [maxRows, minRows, props.placeholder]);
+    }, [getUpdatedState]);
+
+    const syncHeightWithFlushSycn = () => {
+      const newState = getUpdatedState();
+
+      if (isEmpty$1(newState)) {
+        return;
+      } // In React 18, state updates in a ResizeObserver's callback are happening after the paint which causes flickering
+      // when doing some visual updates in it. Using flushSync ensures that the dom will be painted after the states updates happen
+      // Related issue - https://github.com/facebook/react/issues/24331
+
+
+      ReactDOM.flushSync(() => {
+        setState(prevState => {
+          return updateState(prevState, newState);
+        });
+      });
+    };
+
     React__namespace.useEffect(() => {
       const handleResize = debounce$1(() => {
-        renders.current = 0;
-        syncHeight();
+        renders.current = 0; // If the TextareaAutosize component is replaced by Suspense with a fallback, the last
+        // ResizeObserver's handler that runs because of the change in the layout is trying to
+        // access a dom node that is no longer there (as the fallback component is being shown instead).
+        // See https://github.com/mui/material-ui/issues/32640
+        // TODO: Add tests that will ensure the component is not failing when
+        // replaced by Suspense with a fallback, once React is updated to version 18
+
+        if (inputRef.current) {
+          syncHeightWithFlushSycn();
+        }
       });
       const containerWindow = ownerWindow(inputRef.current);
       containerWindow.addEventListener('resize', handleResize);
@@ -14682,7 +14903,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           resizeObserver.disconnect();
         }
       };
-    }, [syncHeight]);
+    });
     useEnhancedEffect$1(() => {
       syncHeight();
     });
@@ -15826,7 +16047,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   } ;
   var Paper$1 = Paper;
 
-  const _excluded$22 = ["colorSchemes"],
+  const _excluded$22 = ["colorSchemes", "cssVarPrefix"],
         _excluded2$9 = ["palette"];
   const defaultDarkOverlays = [...Array(25)].map((_, index) => {
     if (index === 0) {
@@ -15836,14 +16057,31 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const overlay = getOverlayAlpha(index);
     return `linear-gradient(rgba(255 255 255 / ${overlay}), rgba(255 255 255 / ${overlay}))`;
   });
+
+  function assignNode(obj, keys) {
+    keys.forEach(k => {
+      if (!obj[k]) {
+        obj[k] = {};
+      }
+    });
+  }
+
+  function setColor(obj, key, defaultValue) {
+    obj[key] = obj[key] || defaultValue;
+  }
+
+  const createGetCssVar = (cssVarPrefix = 'mui') => createGetCssVar$1(cssVarPrefix);
   function extendTheme(options = {}, ...args) {
     var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$li3, _colorSchemesInput$da2, _colorSchemesInput$da3;
 
     const {
-      colorSchemes: colorSchemesInput = {}
+      colorSchemes: colorSchemesInput = {},
+      cssVarPrefix = 'mui'
     } = options,
           input = _objectWithoutPropertiesLoose(options, _excluded$22);
 
+    const getCssVar = createGetCssVar(cssVarPrefix);
+
     const _createThemeWithoutVa = createTheme(_extends({}, input, colorSchemesInput.light && {
       palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
     })),
@@ -15861,20 +16099,26 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
 
     let theme = _extends({}, muiTheme, {
+      cssVarPrefix,
+      getCssVar,
       colorSchemes: _extends({}, colorSchemesInput, {
         light: _extends({}, colorSchemesInput.light, {
           palette: lightPalette,
           opacity: _extends({
-            placeholder: 0.42,
-            inputTouchBottomLine: 0.42
+            inputPlaceholder: 0.42,
+            inputUnderline: 0.42,
+            switchTrackDisabled: 0.12,
+            switchTrack: 0.38
           }, (_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
+            inputPlaceholder: 0.5,
+            inputUnderline: 0.7,
+            switchTrackDisabled: 0.2,
+            switchTrack: 0.3
           }, (_colorSchemesInput$da2 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da2.opacity),
           overlays: ((_colorSchemesInput$da3 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da3.overlays) || defaultDarkOverlays
         })
@@ -15884,23 +16128,142 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     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';
+      if (key === 'light') {
+        setColor(palette.common, 'background', '#fff');
+        setColor(palette.common, 'onBackground', '#000');
+      } else {
+        setColor(palette.common, 'background', '#000');
+        setColor(palette.common, 'onBackground', '#fff');
+      } // assign component variables
+
+
+      assignNode(palette, ['Alert', 'AppBar', 'Avatar', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
+
+      if (key === 'light') {
+        setColor(palette.Alert, 'errorColor', darken(palette.error.light, 0.6));
+        setColor(palette.Alert, 'infoColor', darken(palette.info.light, 0.6));
+        setColor(palette.Alert, 'successColor', darken(palette.success.light, 0.6));
+        setColor(palette.Alert, 'warningColor', darken(palette.warning.light, 0.6));
+        setColor(palette.Alert, 'errorFilledBg', getCssVar('palette-error-main'));
+        setColor(palette.Alert, 'infoFilledBg', getCssVar('palette-info-main'));
+        setColor(palette.Alert, 'successFilledBg', getCssVar('palette-success-main'));
+        setColor(palette.Alert, 'warningFilledBg', getCssVar('palette-warning-main'));
+        setColor(palette.Alert, 'errorFilledColor', lightPalette.getContrastText(palette.error.main));
+        setColor(palette.Alert, 'infoFilledColor', lightPalette.getContrastText(palette.info.main));
+        setColor(palette.Alert, 'successFilledColor', lightPalette.getContrastText(palette.success.main));
+        setColor(palette.Alert, 'warningFilledColor', lightPalette.getContrastText(palette.warning.main));
+        setColor(palette.Alert, 'errorStandardBg', lighten(palette.error.light, 0.9));
+        setColor(palette.Alert, 'infoStandardBg', lighten(palette.info.light, 0.9));
+        setColor(palette.Alert, 'successStandardBg', lighten(palette.success.light, 0.9));
+        setColor(palette.Alert, 'warningStandardBg', lighten(palette.warning.light, 0.9));
+        setColor(palette.Alert, 'errorIconColor', getCssVar('palette-error-light'));
+        setColor(palette.Alert, 'infoIconColor', getCssVar('palette-info-light'));
+        setColor(palette.Alert, 'successIconColor', getCssVar('palette-success-light'));
+        setColor(palette.Alert, 'warningIconColor', getCssVar('palette-warning-light'));
+        setColor(palette.AppBar, 'defaultBg', getCssVar('palette-grey-100'));
+        setColor(palette.Avatar, 'defaultBg', getCssVar('palette-grey-400'));
+        setColor(palette.Chip, 'defaultBorder', getCssVar('palette-grey-400'));
+        setColor(palette.Chip, 'defaultAvatarColor', getCssVar('palette-grey-700'));
+        setColor(palette.Chip, 'defaultIconColor', getCssVar('palette-grey-700'));
+        setColor(palette.FilledInput, 'bg', 'rgba(0, 0, 0, 0.06)');
+        setColor(palette.FilledInput, 'hoverBg', 'rgba(0, 0, 0, 0.09)');
+        setColor(palette.FilledInput, 'disabledBg', 'rgba(0, 0, 0, 0.12)');
+        setColor(palette.LinearProgress, 'primaryBg', lighten(palette.primary.main, 0.62));
+        setColor(palette.LinearProgress, 'secondaryBg', lighten(palette.secondary.main, 0.62));
+        setColor(palette.LinearProgress, 'errorBg', lighten(palette.error.main, 0.62));
+        setColor(palette.LinearProgress, 'infoBg', lighten(palette.info.main, 0.62));
+        setColor(palette.LinearProgress, 'successBg', lighten(palette.success.main, 0.62));
+        setColor(palette.LinearProgress, 'warningBg', lighten(palette.warning.main, 0.62));
+        setColor(palette.Skeleton, 'bg', `rgba(${getCssVar('palette-text-primaryChannel')} / 0.11)`);
+        setColor(palette.Slider, 'primaryTrack', lighten(palette.primary.main, 0.62));
+        setColor(palette.Slider, 'secondaryTrack', lighten(palette.secondary.main, 0.62));
+        setColor(palette.Slider, 'errorTrack', lighten(palette.error.main, 0.62));
+        setColor(palette.Slider, 'infoTrack', lighten(palette.info.main, 0.62));
+        setColor(palette.Slider, 'successTrack', lighten(palette.success.main, 0.62));
+        setColor(palette.Slider, 'warningTrack', lighten(palette.warning.main, 0.62));
+        const snackbarContentBackground = emphasize(palette.background.default, 0.8);
+        setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
+        setColor(palette.SnackbarContent, 'color', lightPalette.getContrastText(snackbarContentBackground));
+        setColor(palette.SpeedDialAction, 'fabHoverBg', emphasize(palette.background.paper, 0.15));
+        setColor(palette.StepConnector, 'border', getCssVar('palette-grey-400'));
+        setColor(palette.StepContent, 'border', getCssVar('palette-grey-400'));
+        setColor(palette.Switch, 'defaultColor', getCssVar('palette-common-white'));
+        setColor(palette.Switch, 'defaultDisabledColor', getCssVar('palette-grey-100'));
+        setColor(palette.Switch, 'primaryDisabledColor', lighten(palette.primary.main, 0.62));
+        setColor(palette.Switch, 'secondaryDisabledColor', lighten(palette.secondary.main, 0.62));
+        setColor(palette.Switch, 'errorDisabledColor', lighten(palette.error.main, 0.62));
+        setColor(palette.Switch, 'infoDisabledColor', lighten(palette.info.main, 0.62));
+        setColor(palette.Switch, 'successDisabledColor', lighten(palette.success.main, 0.62));
+        setColor(palette.Switch, 'warningDisabledColor', lighten(palette.warning.main, 0.62));
+        setColor(palette.TableCell, 'border', lighten(alpha(palette.divider, 1), 0.88));
+        setColor(palette.Tooltip, 'bg', alpha(palette.grey[700], 0.92));
       } else {
-        palette.common.background = palette.common.background || '#fff';
-        palette.common.onBackground = palette.common.onBackground || '#000';
+        setColor(palette.Alert, 'errorColor', lighten(palette.error.light, 0.6));
+        setColor(palette.Alert, 'infoColor', lighten(palette.info.light, 0.6));
+        setColor(palette.Alert, 'successColor', lighten(palette.success.light, 0.6));
+        setColor(palette.Alert, 'warningColor', lighten(palette.warning.light, 0.6));
+        setColor(palette.Alert, 'errorFilledBg', getCssVar('palette-error-dark'));
+        setColor(palette.Alert, 'infoFilledBg', getCssVar('palette-info-dark'));
+        setColor(palette.Alert, 'successFilledBg', getCssVar('palette-success-dark'));
+        setColor(palette.Alert, 'warningFilledBg', getCssVar('palette-warning-dark'));
+        setColor(palette.Alert, 'errorFilledColor', darkPalette.getContrastText(palette.error.dark));
+        setColor(palette.Alert, 'infoFilledColor', darkPalette.getContrastText(palette.info.dark));
+        setColor(palette.Alert, 'successFilledColor', darkPalette.getContrastText(palette.success.dark));
+        setColor(palette.Alert, 'warningFilledColor', darkPalette.getContrastText(palette.warning.dark));
+        setColor(palette.Alert, 'errorStandardBg', darken(palette.error.light, 0.9));
+        setColor(palette.Alert, 'infoStandardBg', darken(palette.info.light, 0.9));
+        setColor(palette.Alert, 'successStandardBg', darken(palette.success.light, 0.9));
+        setColor(palette.Alert, 'warningStandardBg', darken(palette.warning.light, 0.9));
+        setColor(palette.Alert, 'errorIconColor', getCssVar('palette-error-main'));
+        setColor(palette.Alert, 'infoIconColor', getCssVar('palette-info-main'));
+        setColor(palette.Alert, 'successIconColor', getCssVar('palette-success-main'));
+        setColor(palette.Alert, 'warningIconColor', getCssVar('palette-warning-main'));
+        setColor(palette.AppBar, 'defaultBg', getCssVar('palette-grey-900'));
+        setColor(palette.AppBar, 'darkBg', getCssVar('palette-background-paper')); // specific for dark mode
+
+        setColor(palette.AppBar, 'darkColor', getCssVar('palette-text-primary')); // specific for dark mode
+
+        setColor(palette.Avatar, 'defaultBg', getCssVar('palette-grey-600'));
+        setColor(palette.Chip, 'defaultBorder', getCssVar('palette-grey-700'));
+        setColor(palette.Chip, 'defaultAvatarColor', getCssVar('palette-grey-300'));
+        setColor(palette.Chip, 'defaultIconColor', getCssVar('palette-grey-300'));
+        setColor(palette.FilledInput, 'bg', 'rgba(255, 255, 255, 0.09)');
+        setColor(palette.FilledInput, 'hoverBg', 'rgba(255, 255, 255, 0.13)');
+        setColor(palette.FilledInput, 'disabledBg', 'rgba(255, 255, 255, 0.12)');
+        setColor(palette.LinearProgress, 'primaryBg', darken(palette.primary.main, 0.5));
+        setColor(palette.LinearProgress, 'secondaryBg', darken(palette.secondary.main, 0.5));
+        setColor(palette.LinearProgress, 'errorBg', darken(palette.error.main, 0.5));
+        setColor(palette.LinearProgress, 'infoBg', darken(palette.info.main, 0.5));
+        setColor(palette.LinearProgress, 'successBg', darken(palette.success.main, 0.5));
+        setColor(palette.LinearProgress, 'warningBg', darken(palette.warning.main, 0.5));
+        setColor(palette.Skeleton, 'bg', `rgba(${getCssVar('palette-text-primaryChannel')} / 0.13)`);
+        setColor(palette.Slider, 'primaryTrack', darken(palette.primary.main, 0.5));
+        setColor(palette.Slider, 'secondaryTrack', darken(palette.secondary.main, 0.5));
+        setColor(palette.Slider, 'errorTrack', darken(palette.error.main, 0.5));
+        setColor(palette.Slider, 'infoTrack', darken(palette.info.main, 0.5));
+        setColor(palette.Slider, 'successTrack', darken(palette.success.main, 0.5));
+        setColor(palette.Slider, 'warningTrack', darken(palette.warning.main, 0.5));
+        const snackbarContentBackground = emphasize(palette.background.default, 0.98);
+        setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
+        setColor(palette.SnackbarContent, 'color', darkPalette.getContrastText(snackbarContentBackground));
+        setColor(palette.SpeedDialAction, 'fabHoverBg', emphasize(palette.background.paper, 0.15));
+        setColor(palette.StepConnector, 'border', getCssVar('palette-grey-600'));
+        setColor(palette.StepContent, 'border', getCssVar('palette-grey-600'));
+        setColor(palette.Switch, 'defaultColor', getCssVar('palette-grey-300'));
+        setColor(palette.Switch, 'defaultDisabledColor', getCssVar('palette-grey-600'));
+        setColor(palette.Switch, 'primaryDisabledColor', darken(palette.primary.main, 0.55));
+        setColor(palette.Switch, 'secondaryDisabledColor', darken(palette.secondary.main, 0.55));
+        setColor(palette.Switch, 'errorDisabledColor', darken(palette.error.main, 0.55));
+        setColor(palette.Switch, 'infoDisabledColor', darken(palette.info.main, 0.55));
+        setColor(palette.Switch, 'successDisabledColor', darken(palette.success.main, 0.55));
+        setColor(palette.Switch, 'warningDisabledColor', darken(palette.warning.main, 0.55));
+        setColor(palette.TableCell, 'border', darken(alpha(palette.divider, 1), 0.68));
+        setColor(palette.Tooltip, 'bg', alpha(palette.grey[700], 0.92));
       }
 
       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];
-      }
-
+      palette.dividerChannel = colorChannel(palette.divider);
       Object.keys(palette).forEach(color => {
         const colors = palette[color]; // Color palettes: primary, secondary, error, info, success, and warning
 
@@ -15927,21 +16290,31 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
         if (colors.secondary) {
           palette[color].secondaryChannel = colorChannel(colors.secondary);
-        } // Action colors: action.activeChannel
+        } // Action colors: action.active, action.selected
 
 
         if (colors.active) {
           palette[color].activeChannel = colorChannel(colors.active);
         }
+
+        if (colors.selected) {
+          palette[color].selectedChannel = colorChannel(colors.selected);
+        }
       });
     });
     theme = args.reduce((acc, argument) => deepmerge(acc, argument), theme);
     return theme;
   }
 
+  const shouldSkipGeneratingVar = keys => {
+    var _keys$;
+
+    return !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/) || keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));
+  };
+
   const defaultTheme$1 = extendTheme();
   const {
-    CssVarsProvider: Experimental_CssVarsProvider,
+    CssVarsProvider,
     useColorScheme,
     getInitColorSchemeScript
   } = createCssVarsProvider({
@@ -15953,7 +16326,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       light: 'light',
       dark: 'dark'
     },
-    prefix: 'md',
     resolveTheme: theme => {
       const newTheme = _extends({}, theme, {
         typography: createTypography(theme.palette, theme.typography)
@@ -15961,7 +16333,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
       return newTheme;
     },
-    shouldSkipGeneratingVar: keys => !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/)
+    shouldSkipGeneratingVar
   });
 
   function getSvgIconUtilityClass(slot) {
@@ -19503,22 +19875,30 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       display: 'flex',
       padding: '6px 16px'
     }, color && ownerState.variant === 'standard' && {
-      color: getColor(theme.palette[color].light, 0.6),
-      backgroundColor: getBackgroundColor(theme.palette[color].light, 0.9),
-      [`& .${alertClasses$1.icon}`]: {
+      color: theme.vars ? theme.vars.palette.Alert[`${color}Color`] : getColor(theme.palette[color].light, 0.6),
+      backgroundColor: theme.vars ? theme.vars.palette.Alert[`${color}StandardBg`] : getBackgroundColor(theme.palette[color].light, 0.9),
+      [`& .${alertClasses$1.icon}`]: theme.vars ? {
+        color: theme.vars.palette.Alert[`${color}IconColor`]
+      } : {
         color: theme.palette.mode === 'dark' ? theme.palette[color].main : theme.palette[color].light
       }
     }, color && ownerState.variant === 'outlined' && {
-      color: getColor(theme.palette[color].light, 0.6),
-      border: `1px solid ${theme.palette[color].light}`,
-      [`& .${alertClasses$1.icon}`]: {
+      color: theme.vars ? theme.vars.palette.Alert[`${color}Color`] : getColor(theme.palette[color].light, 0.6),
+      border: `1px solid ${(theme.vars || theme).palette[color].light}`,
+      [`& .${alertClasses$1.icon}`]: theme.vars ? {
+        color: theme.vars.palette.Alert[`${color}IconColor`]
+      } : {
         color: theme.palette.mode === 'dark' ? theme.palette[color].main : theme.palette[color].light
       }
-    }, color && ownerState.variant === 'filled' && {
-      color: '#fff',
-      fontWeight: theme.typography.fontWeightMedium,
-      backgroundColor: theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main
-    });
+    }, color && ownerState.variant === 'filled' && _extends({
+      fontWeight: theme.typography.fontWeightMedium
+    }, theme.vars ? {
+      color: theme.vars.palette.Alert[`${color}FilledColor`],
+      backgroundColor: theme.vars.palette.Alert[`${color}FilledBg`]
+    } : {
+      backgroundColor: theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main,
+      color: theme.palette.getContrastText(theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main)
+    }));
   });
   const AlertIcon = styled$1('div', {
     name: 'MuiAlert',
@@ -20037,7 +20417,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       root: ['root', `color${capitalize(color)}`, `position${capitalize(position)}`]
     };
     return composeClasses(slots, getAppBarUtilityClass, classes);
-  };
+  }; // var2 is the fallback.
+  // Ex. var1: 'var(--a)', var2: 'var(--b)'; return: 'var(--a, var(--b))'
+
+
+  const joinVars = (var1, var2) => `${var1 == null ? void 0 : var1.replace(')', '')}, ${var2})`;
 
   const AppBarRoot = styled$1(Paper$1, {
     name: 'MuiAppBar',
@@ -20062,7 +20446,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       flexShrink: 0
     }, ownerState.position === 'fixed' && {
       position: 'fixed',
-      zIndex: theme.zIndex.appBar,
+      zIndex: (theme.vars || theme).zIndex.appBar,
       top: 0,
       left: 'auto',
       right: 0,
@@ -20072,14 +20456,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }
     }, ownerState.position === 'absolute' && {
       position: 'absolute',
-      zIndex: theme.zIndex.appBar,
+      zIndex: (theme.vars || theme).zIndex.appBar,
       top: 0,
       left: 'auto',
       right: 0
     }, ownerState.position === 'sticky' && {
       // ⚠️ sticky is not supported by IE11.
       position: 'sticky',
-      zIndex: theme.zIndex.appBar,
+      zIndex: (theme.vars || theme).zIndex.appBar,
       top: 0,
       left: 'auto',
       right: 0
@@ -20087,7 +20471,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       position: 'static'
     }, ownerState.position === 'relative' && {
       position: 'relative'
-    }, ownerState.color === 'default' && {
+    }, !theme.vars && _extends({}, ownerState.color === 'default' && {
       backgroundColor: backgroundColorDefault,
       color: theme.palette.getContrastText(backgroundColorDefault)
     }, ownerState.color && ownerState.color !== 'default' && ownerState.color !== 'inherit' && ownerState.color !== 'transparent' && {
@@ -20103,6 +20487,19 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       color: 'inherit'
     }, theme.palette.mode === 'dark' && {
       backgroundImage: 'none'
+    })), theme.vars && _extends({}, ownerState.color === 'default' && {
+      '--AppBar-background': ownerState.enableColorOnDark ? theme.vars.palette.AppBar.defaultBg : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette.AppBar.defaultBg),
+      '--AppBar-color': ownerState.enableColorOnDark ? theme.vars.palette.text.primary : joinVars(theme.vars.palette.AppBar.darkColor, theme.vars.palette.text.primary)
+    }, ownerState.color && !ownerState.color.match(/^(default|inherit|transparent)$/) && {
+      '--AppBar-background': ownerState.enableColorOnDark ? theme.vars.palette[ownerState.color].main : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette[ownerState.color].main),
+      '--AppBar-color': ownerState.enableColorOnDark ? theme.vars.palette[ownerState.color].contrastText : joinVars(theme.vars.palette.AppBar.darkColor, theme.vars.palette[ownerState.color].contrastText)
+    }, {
+      backgroundColor: 'var(--AppBar-background)',
+      color: ownerState.color === 'inherit' ? 'inherit' : 'var(--AppBar-color)'
+    }, ownerState.color === 'transparent' && {
+      backgroundImage: 'none',
+      backgroundColor: 'transparent',
+      color: 'inherit'
     }));
   });
   const AppBar = /*#__PURE__*/React__namespace.forwardRef(function AppBar(inProps, ref) {
@@ -20552,6 +20949,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     ownerState
   }) => {
     const deleteIconColor = alpha(theme.palette.text.primary, 0.26);
+    const textColor = theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300];
     return _extends({
       maxWidth: '100%',
       fontFamily: theme.typography.fontFamily,
@@ -20560,8 +20958,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       alignItems: 'center',
       justifyContent: 'center',
       height: 32,
-      color: theme.palette.text.primary,
-      backgroundColor: theme.palette.action.selected,
+      color: (theme.vars || theme).palette.text.primary,
+      backgroundColor: (theme.vars || theme).palette.action.selected,
       borderRadius: 32 / 2,
       whiteSpace: 'nowrap',
       transition: theme.transitions.create(['background-color', 'box-shadow']),
@@ -20577,7 +20975,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       verticalAlign: 'middle',
       boxSizing: 'border-box',
       [`&.${chipClasses$1.disabled}`]: {
-        opacity: theme.palette.action.disabledOpacity,
+        opacity: (theme.vars || theme).palette.action.disabledOpacity,
         pointerEvents: 'none'
       },
       [`& .${chipClasses$1.avatar}`]: {
@@ -20585,16 +20983,16 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         marginRight: -6,
         width: 24,
         height: 24,
-        color: theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300],
+        color: theme.vars ? theme.vars.palette.Chip.defaultAvatarColor : textColor,
         fontSize: theme.typography.pxToRem(12)
       },
       [`& .${chipClasses$1.avatarColorPrimary}`]: {
-        color: theme.palette.primary.contrastText,
-        backgroundColor: theme.palette.primary.dark
+        color: (theme.vars || theme).palette.primary.contrastText,
+        backgroundColor: (theme.vars || theme).palette.primary.dark
       },
       [`& .${chipClasses$1.avatarColorSecondary}`]: {
-        color: theme.palette.secondary.contrastText,
-        backgroundColor: theme.palette.secondary.dark
+        color: (theme.vars || theme).palette.secondary.contrastText,
+        backgroundColor: (theme.vars || theme).palette.secondary.dark
       },
       [`& .${chipClasses$1.avatarSmall}`]: {
         marginLeft: 4,
@@ -20604,7 +21002,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         fontSize: theme.typography.pxToRem(10)
       },
       [`& .${chipClasses$1.icon}`]: _extends({
-        color: theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300],
+        color: theme.vars ? theme.vars.palette.Chip.defaultIconColor : textColor,
         marginLeft: 5,
         marginRight: -6
       }, ownerState.size === 'small' && {
@@ -20616,35 +21014,35 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }),
       [`& .${chipClasses$1.deleteIcon}`]: _extends({
         WebkitTapHighlightColor: 'transparent',
-        color: deleteIconColor,
+        color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.26)` : deleteIconColor,
         fontSize: 22,
         cursor: 'pointer',
         margin: '0 5px 0 -6px',
         '&:hover': {
-          color: alpha(deleteIconColor, 0.4)
+          color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)` : alpha(deleteIconColor, 0.4)
         }
       }, ownerState.size === 'small' && {
         fontSize: 16,
         marginRight: 4,
         marginLeft: -4
       }, ownerState.color !== 'default' && {
-        color: alpha(theme.palette[ownerState.color].contrastText, 0.7),
+        color: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].contrastTextChannel} / 0.7)` : alpha(theme.palette[ownerState.color].contrastText, 0.7),
         '&:hover, &:active': {
-          color: theme.palette[ownerState.color].contrastText
+          color: (theme.vars || theme).palette[ownerState.color].contrastText
         }
       })
     }, ownerState.size === 'small' && {
       height: 24
     }, ownerState.color !== 'default' && {
-      backgroundColor: theme.palette[ownerState.color].main,
-      color: theme.palette[ownerState.color].contrastText
+      backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
+      color: (theme.vars || theme).palette[ownerState.color].contrastText
     }, ownerState.onDelete && {
       [`&.${chipClasses$1.focusVisible}`]: {
-        backgroundColor: alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity + theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
       }
     }, ownerState.onDelete && ownerState.color !== 'default' && {
       [`&.${chipClasses$1.focusVisible}`]: {
-        backgroundColor: theme.palette[ownerState.color].dark
+        backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
       }
     });
   }, ({
@@ -20655,29 +21053,29 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     WebkitTapHighlightColor: 'transparent',
     cursor: 'pointer',
     '&:hover': {
-      backgroundColor: alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity + theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
     },
     [`&.${chipClasses$1.focusVisible}`]: {
-      backgroundColor: alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity + theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
     },
     '&:active': {
-      boxShadow: theme.shadows[1]
+      boxShadow: (theme.vars || theme).shadows[1]
     }
   }, ownerState.clickable && ownerState.color !== 'default' && {
     [`&:hover, &.${chipClasses$1.focusVisible}`]: {
-      backgroundColor: theme.palette[ownerState.color].dark
+      backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
     }
   }), ({
     theme,
     ownerState
   }) => _extends({}, ownerState.variant === 'outlined' && {
     backgroundColor: 'transparent',
-    border: `1px solid ${theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700]}`,
+    border: theme.vars ? `1px solid ${theme.vars.palette.Chip.defaultBorder}` : `1px solid ${theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700]}`,
     [`&.${chipClasses$1.clickable}:hover`]: {
-      backgroundColor: theme.palette.action.hover
+      backgroundColor: (theme.vars || theme).palette.action.hover
     },
     [`&.${chipClasses$1.focusVisible}`]: {
-      backgroundColor: theme.palette.action.focus
+      backgroundColor: (theme.vars || theme).palette.action.focus
     },
     [`& .${chipClasses$1.avatar}`]: {
       marginLeft: 4
@@ -20698,18 +21096,18 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       marginRight: 3
     }
   }, ownerState.variant === 'outlined' && ownerState.color !== 'default' && {
-    color: theme.palette[ownerState.color].main,
-    border: `1px solid ${alpha(theme.palette[ownerState.color].main, 0.7)}`,
+    color: (theme.vars || theme).palette[ownerState.color].main,
+    border: `1px solid ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.7)` : alpha(theme.palette[ownerState.color].main, 0.7)}`,
     [`&.${chipClasses$1.clickable}: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)
     },
     [`&.${chipClasses$1.focusVisible}`]: {
-      backgroundColor: alpha(theme.palette[ownerState.color].main, theme.palette.action.focusOpacity)
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.focusOpacity)
     },
     [`& .${chipClasses$1.deleteIcon}`]: {
-      color: alpha(theme.palette[ownerState.color].main, 0.7),
+      color: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.7)` : alpha(theme.palette[ownerState.color].main, 0.7),
       '&:hover, &:active': {
-        color: theme.palette[ownerState.color].main
+        color: (theme.vars || theme).palette[ownerState.color].main
       }
     }
   }));
@@ -21173,7 +21571,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const placeholder = _extends({
       color: 'currentColor'
     }, theme.vars ? {
-      opacity: theme.vars.opacity.placeholder
+      opacity: theme.vars.opacity.inputPlaceholder
     } : {
       opacity: light ? 0.42 : 0.5
     }, {
@@ -21186,7 +21584,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       opacity: '0 !important'
     };
     const placeholderVisible = theme.vars ? {
-      opacity: theme.vars.opacity.placeholder
+      opacity: theme.vars.opacity.inputPlaceholder
     } : {
       opacity: light ? 0.42 : 0.5
     };
@@ -22179,7 +22577,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }
   });
   const Autocomplete = /*#__PURE__*/React__namespace.forwardRef(function Autocomplete(inProps, ref) {
-    var _componentsProps$clea, _componentsProps$pape;
+    var _componentsProps$clea, _componentsProps$popu, _componentsProps$popp, _componentsProps$pape;
 
     const props = useThemeProps({
       props: inProps,
@@ -22380,8 +22778,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
                 disabled: disabled,
                 "aria-label": popupOpen ? closeText : openText,
                 title: popupOpen ? closeText : openText,
-                className: clsx(classes.popupIndicator),
-                ownerState: ownerState,
+                ownerState: ownerState
+              }, componentsProps.popupIndicator, {
+                className: clsx(classes.popupIndicator, (_componentsProps$popu = componentsProps.popupIndicator) == null ? void 0 : _componentsProps$popu.className),
                 children: popupIcon
               })) : null]
             })
@@ -22392,9 +22791,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
             readOnly
           }, getInputProps())
         })
-      })), popupOpen && anchorEl ? /*#__PURE__*/jsxRuntime_1(AutocompletePopper, {
+      })), popupOpen && anchorEl ? /*#__PURE__*/jsxRuntime_1(AutocompletePopper, _extends({
         as: PopperComponent,
-        className: clsx(classes.popper),
         disablePortal: disablePortal,
         style: {
           width: anchorEl ? anchorEl.clientWidth : null
@@ -22402,7 +22800,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         ownerState: ownerState,
         role: "presentation",
         anchorEl: anchorEl,
-        open: true,
+        open: true
+      }, componentsProps.popper, {
+        className: clsx(classes.popper, (_componentsProps$popp = componentsProps.popper) == null ? void 0 : _componentsProps$popp.className),
         children: /*#__PURE__*/jsxRuntime_2(AutocompletePaper, _extends({
           ownerState: ownerState,
           as: PaperComponent
@@ -22439,7 +22839,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
             })
           })) : null]
         }))
-      }) : null]
+      })) : null]
     });
   });
   Autocomplete.propTypes
@@ -22541,7 +22941,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     componentsProps: PropTypes.shape({
       clearIndicator: PropTypes.object,
-      paper: PropTypes.object
+      paper: PropTypes.object,
+      popper: PropTypes.object,
+      popupIndicator: PropTypes.object
     }),
 
     /**
@@ -22963,13 +23365,16 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     overflow: 'hidden',
     userSelect: 'none'
   }, ownerState.variant === 'rounded' && {
-    borderRadius: theme.shape.borderRadius
+    borderRadius: (theme.vars || theme).shape.borderRadius
   }, ownerState.variant === 'square' && {
     borderRadius: 0
-  }, ownerState.colorDefault && {
-    color: theme.palette.background.default,
+  }, ownerState.colorDefault && _extends({
+    color: (theme.vars || theme).palette.background.default
+  }, theme.vars ? {
+    backgroundColor: theme.vars.palette.Avatar.defaultBg
+  } : {
     backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]
-  }));
+  })));
   const AvatarImg = styled$1('img', {
     name: 'MuiAvatar',
     slot: 'Img',
@@ -24080,8 +24485,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * @default {}
      */
     componentsProps: PropTypes.shape({
-      badge: PropTypes.object,
-      root: PropTypes.object
+      badge: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
     }),
 
     /**
@@ -27219,7 +27624,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     };
   }
 
-  const _excluded$1t = ["BackdropComponent", "closeAfterTransition", "children", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted"];
+  const _excluded$1t = ["BackdropComponent", "BackdropProps", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "theme"];
   const modalClasses = modalUnstyledClasses$1;
 
   const extendUtilityClasses$1 = ownerState => {
@@ -27272,7 +27677,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
    */
 
   const Modal = /*#__PURE__*/React__namespace.forwardRef(function Modal(inProps, ref) {
-    var _componentsProps$root;
+    var _ref, _components$Root;
 
     const props = useThemeProps({
       name: 'MuiModal',
@@ -27281,8 +27686,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     const {
       BackdropComponent = ModalBackdrop,
+      BackdropProps,
       closeAfterTransition = false,
       children,
+      component,
       components = {},
       componentsProps = {},
       disableAutoFocus = false,
@@ -27292,7 +27699,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       disableRestoreFocus = false,
       disableScrollLock = false,
       hideBackdrop = false,
-      keepMounted = false
+      keepMounted = false,
+      // eslint-disable-next-line react/prop-types
+      theme
     } = props,
           other = _objectWithoutPropertiesLoose(props, _excluded$1t);
 
@@ -27314,16 +27723,19 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
 
     const classes = extendUtilityClasses$1(ownerState);
+    const Root = (_ref = (_components$Root = components.Root) != null ? _components$Root : component) != null ? _ref : ModalRoot;
     return /*#__PURE__*/jsxRuntime_1(ModalUnstyled$1, _extends({
       components: _extends({
-        Root: ModalRoot
+        Root,
+        Backdrop: BackdropComponent
       }, components),
       componentsProps: {
-        root: _extends({}, componentsProps.root, (!components.Root || !isHostComponent(components.Root)) && {
-          ownerState: _extends({}, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState)
-        })
+        root: _extends({}, componentsProps.root, !isHostComponent(Root) && {
+          as: component,
+          theme
+        }),
+        backdrop: _extends({}, BackdropProps, componentsProps.backdrop)
       },
-      BackdropComponent: BackdropComponent,
       onTransitionEnter: () => setExited(false),
       onTransitionExited: () => setExited(true),
       ref: ref
@@ -27343,6 +27755,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     /**
      * A backdrop component. This prop enables custom backdrop rendering.
+     * @deprecated Use `components.Backdrop` instead.
      * @default styled(Backdrop, {
      *   name: 'MuiModal',
      *   slot: 'Backdrop',
@@ -27357,6 +27770,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     /**
      * Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element.
+     * @deprecated Use `componentsProps.backdrop` instead.
      */
     BackdropProps: PropTypes.object,
 
@@ -27376,12 +27790,19 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     closeAfterTransition: PropTypes.bool,
 
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component: PropTypes.elementType,
+
     /**
      * The components used for each slot inside the Modal.
      * Either a string to use a HTML element or a component.
      * @default {}
      */
     components: PropTypes.shape({
+      Backdrop: PropTypes.elementType,
       Root: PropTypes.elementType
     }),
 
@@ -27390,6 +27811,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * @default {}
      */
     componentsProps: PropTypes.shape({
+      backdrop: PropTypes.object,
       root: PropTypes.object
     }),
 
@@ -27613,7 +28035,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         maxWidth: 'calc(100% - 64px)'
       }
     }
-  }, ownerState.maxWidth !== 'xs' && {
+  }, ownerState.maxWidth && ownerState.maxWidth !== 'xs' && {
     maxWidth: `${theme.breakpoints.values[ownerState.maxWidth]}${theme.breakpoints.unit}`,
     [`&.${dialogClasses$1.paperScrollBody}`]: {
       [theme.breakpoints.down(theme.breakpoints.values[ownerState.maxWidth] + 32 * 2)]: {
@@ -27714,12 +28136,16 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }, [ariaLabelledby]);
     return /*#__PURE__*/jsxRuntime_1(DialogRoot, _extends({
       className: clsx(classes.root, className),
-      BackdropProps: _extends({
-        transitionDuration,
-        as: BackdropComponent
-      }, BackdropProps),
       closeAfterTransition: true,
-      BackdropComponent: DialogBackdrop,
+      components: {
+        Backdrop: DialogBackdrop
+      },
+      componentsProps: {
+        backdrop: _extends({
+          transitionDuration,
+          as: BackdropComponent
+        }, BackdropProps)
+      },
       disableEscapeKeyDown: disableEscapeKeyDown,
       onClose: onClose,
       open: open,
@@ -27775,6 +28201,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     /**
      * A backdrop component. This prop enables custom backdrop rendering.
+     * @deprecated Use `components.Backdrop` instead.
      * @default styled(Backdrop, {
      *   name: 'MuiModal',
      *   slot: 'Backdrop',
@@ -29489,36 +29916,38 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme,
     ownerState
   }) => {
-    var _theme$palette;
+    var _palette;
 
     const light = theme.palette.mode === 'light';
     const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
     const backgroundColor = light ? 'rgba(0, 0, 0, 0.06)' : 'rgba(255, 255, 255, 0.09)';
+    const hoverBackground = light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.13)';
+    const disabledBackground = light ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)';
     return _extends({
       position: 'relative',
-      backgroundColor,
-      borderTopLeftRadius: theme.shape.borderRadius,
-      borderTopRightRadius: theme.shape.borderRadius,
+      backgroundColor: theme.vars ? theme.vars.palette.FilledInput.bg : backgroundColor,
+      borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
+      borderTopRightRadius: (theme.vars || theme).shape.borderRadius,
       transition: theme.transitions.create('background-color', {
         duration: theme.transitions.duration.shorter,
         easing: theme.transitions.easing.easeOut
       }),
       '&:hover': {
-        backgroundColor: light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.13)',
+        backgroundColor: theme.vars ? theme.vars.palette.FilledInput.hoverBg : hoverBackground,
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
-          backgroundColor
+          backgroundColor: theme.vars ? theme.vars.palette.FilledInput.bg : backgroundColor
         }
       },
       [`&.${filledInputClasses$1.focused}`]: {
-        backgroundColor
+        backgroundColor: theme.vars ? theme.vars.palette.FilledInput.bg : backgroundColor
       },
       [`&.${filledInputClasses$1.disabled}`]: {
-        backgroundColor: light ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)'
+        backgroundColor: theme.vars ? theme.vars.palette.FilledInput.disabledBg : disabledBackground
       }
     }, !ownerState.disableUnderline && {
       '&:after': {
-        borderBottom: `2px solid ${(_theme$palette = theme.palette[ownerState.color || 'primary']) == null ? void 0 : _theme$palette.main}`,
+        borderBottom: `2px solid ${(_palette = (theme.vars || theme).palette[ownerState.color || 'primary']) == null ? void 0 : _palette.main}`,
         left: 0,
         bottom: 0,
         // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
@@ -29539,12 +29968,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         transform: 'scaleX(1) translateX(0)'
       },
       [`&.${filledInputClasses$1.error}:after`]: {
-        borderBottomColor: theme.palette.error.main,
+        borderBottomColor: (theme.vars || theme).palette.error.main,
         transform: 'scaleX(1)' // error is always underlined in red
 
       },
       '&:before': {
-        borderBottom: `1px solid ${bottomLineColor}`,
+        borderBottom: `1px solid ${theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})` : bottomLineColor}`,
         left: 0,
         bottom: 0,
         // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
@@ -29558,7 +29987,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
       },
       [`&:hover:not(.${filledInputClasses$1.disabled}):before`]: {
-        borderBottom: `1px solid ${theme.palette.text.primary}`
+        borderBottom: `1px solid ${(theme.vars || theme).palette.text.primary}`
       },
       [`&.${filledInputClasses$1.disabled}:before`]: {
         borderBottomStyle: 'dotted'
@@ -29588,7 +30017,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     paddingTop: 25,
     paddingRight: 12,
     paddingBottom: 8,
-    paddingLeft: 12,
+    paddingLeft: 12
+  }, !theme.vars && {
     '&:-webkit-autofill': {
       WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset',
       WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff',
@@ -29596,6 +30026,18 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       borderTopLeftRadius: 'inherit',
       borderTopRightRadius: 'inherit'
     }
+  }, theme.vars && {
+    '&:-webkit-autofill': {
+      borderTopLeftRadius: 'inherit',
+      borderTopRightRadius: 'inherit'
+    },
+    [theme.getColorSchemeSelector('dark')]: {
+      '&:-webkit-autofill': {
+        WebkitBoxShadow: '0 0 0 100px #266798 inset',
+        WebkitTextFillColor: '#fff',
+        caretColor: '#fff'
+      }
+    }
   }, ownerState.size === 'small' && {
     paddingTop: 21,
     paddingBottom: 4
@@ -33238,7 +33680,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     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})`;
+      bottomLineColor = `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})`;
     }
 
     return _extends({
@@ -34034,6 +34476,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       return 'currentColor';
     }
 
+    if (theme.vars) {
+      return theme.vars.palette.LinearProgress[`${color}Bg`];
+    }
+
     return theme.palette.mode === 'light' ? lighten(theme.palette[color].main, 0.62) : darken(theme.palette[color].main, 0.5);
   };
 
@@ -34126,7 +34572,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     top: 0,
     transition: 'transform 0.2s linear',
     transformOrigin: 'left',
-    backgroundColor: ownerState.color === 'inherit' ? 'currentColor' : theme.palette[ownerState.color].main
+    backgroundColor: ownerState.color === 'inherit' ? 'currentColor' : (theme.vars || theme).palette[ownerState.color].main
   }, ownerState.variant === 'determinate' && {
     transition: `transform .${TRANSITION_DURATION}s linear`
   }, ownerState.variant === 'buffer' && {
@@ -34159,7 +34605,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     transition: 'transform 0.2s linear',
     transformOrigin: 'left'
   }, ownerState.variant !== 'buffer' && {
-    backgroundColor: ownerState.color === 'inherit' ? 'currentColor' : theme.palette[ownerState.color].main
+    backgroundColor: ownerState.color === 'inherit' ? 'currentColor' : (theme.vars || theme).palette[ownerState.color].main
   }, ownerState.color === 'inherit' && {
     opacity: 0.3
   }, ownerState.variant === 'buffer' && {
@@ -37917,25 +38363,25 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
     return _extends({
       position: 'relative',
-      borderRadius: theme.shape.borderRadius,
+      borderRadius: (theme.vars || theme).shape.borderRadius,
       [`&:hover .${outlinedInputClasses$1.notchedOutline}`]: {
-        borderColor: theme.palette.text.primary
+        borderColor: (theme.vars || theme).palette.text.primary
       },
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         [`&:hover .${outlinedInputClasses$1.notchedOutline}`]: {
-          borderColor
+          borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
         }
       },
       [`&.${outlinedInputClasses$1.focused} .${outlinedInputClasses$1.notchedOutline}`]: {
-        borderColor: theme.palette[ownerState.color].main,
+        borderColor: (theme.vars || theme).palette[ownerState.color].main,
         borderWidth: 2
       },
       [`&.${outlinedInputClasses$1.error} .${outlinedInputClasses$1.notchedOutline}`]: {
-        borderColor: theme.palette.error.main
+        borderColor: (theme.vars || theme).palette.error.main
       },
       [`&.${outlinedInputClasses$1.disabled} .${outlinedInputClasses$1.notchedOutline}`]: {
-        borderColor: theme.palette.action.disabled
+        borderColor: (theme.vars || theme).palette.action.disabled
       }
     }, ownerState.startAdornment && {
       paddingLeft: 14
@@ -37953,9 +38399,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     overridesResolver: (props, styles) => styles.notchedOutline
   })(({
     theme
-  }) => ({
-    borderColor: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'
-  }));
+  }) => {
+    const borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
+    return {
+      borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
+    };
+  });
   const OutlinedInputInput = styled$1(InputBaseComponent, {
     name: 'MuiOutlinedInput',
     slot: 'Input',
@@ -37964,13 +38413,25 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme,
     ownerState
   }) => _extends({
-    padding: '16.5px 14px',
+    padding: '16.5px 14px'
+  }, !theme.vars && {
     '&:-webkit-autofill': {
       WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset',
       WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff',
       caretColor: theme.palette.mode === 'light' ? null : '#fff',
       borderRadius: 'inherit'
     }
+  }, theme.vars && {
+    '&:-webkit-autofill': {
+      borderRadius: 'inherit'
+    },
+    [theme.getColorSchemeSelector('dark')]: {
+      '&:-webkit-autofill': {
+        WebkitBoxShadow: '0 0 0 100px #266798 inset',
+        WebkitTextFillColor: '#fff',
+        caretColor: '#fff'
+      }
+    }
   }, ownerState.size === 'small' && {
     padding: '8.5px 14px'
   }, ownerState.multiline && {
@@ -38006,12 +38467,27 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       muiFormControl,
       states: ['required']
     });
+
+    const ownerState = _extends({}, props, {
+      color: fcs.color || 'primary',
+      disabled: fcs.disabled,
+      error: fcs.error,
+      focused: fcs.focused,
+      formControl: muiFormControl,
+      fullWidth,
+      hiddenLabel: fcs.hiddenLabel,
+      multiline,
+      size: fcs.size,
+      type
+    });
+
     return /*#__PURE__*/jsxRuntime_1(InputBase$1, _extends({
       components: _extends({
         Root: OutlinedInputRoot,
         Input: OutlinedInputInput
       }, components),
       renderSuffix: state => /*#__PURE__*/jsxRuntime_1(NotchedOutlineRoot, {
+        ownerState: ownerState,
         className: classes.notchedOutline,
         label: label != null && label !== '' && fcs.required ? _React$Fragment || (_React$Fragment = /*#__PURE__*/jsxRuntime_2(React__namespace.Fragment, {
           children: [label, "\xA0", '*']
@@ -41214,7 +41690,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * If the value is an object it must have reference equality with the option in order to be selected.
      * If the value is not an object, the string representation must match with the string representation of the option in order to be selected.
      */
-    value: PropTypes.any,
+    value: PropTypes.oneOfType([PropTypes.oneOf(['']), PropTypes.any]),
 
     /**
      * The variant to use.
@@ -41299,7 +41775,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return _extends({
       display: 'block',
       // Create a "on paper" color with sufficient contrast retaining the color
-      backgroundColor: alpha(theme.palette.text.primary, theme.palette.mode === 'light' ? 0.11 : 0.13),
+      backgroundColor: theme.vars ? theme.vars.palette.Skeleton.bg : alpha(theme.palette.text.primary, theme.palette.mode === 'light' ? 0.11 : 0.13),
       height: '1.2em'
     }, ownerState.variant === 'text' && {
       marginTop: 0,
@@ -41338,7 +41814,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
       &::after {
         animation: ${0} 1.6s linear 0.5s infinite;
-        background: linear-gradient(90deg, transparent, ${0}, transparent);
+        background: linear-gradient(
+          90deg,
+          transparent,
+          ${0},
+          transparent
+        );
         content: '';
         position: absolute;
         transform: translateX(-100%); /* Avoid flash during server-side hydration */
@@ -41347,7 +41828,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         right: 0;
         top: 0;
       }
-    `), waveKeyframe, theme.palette.action.hover));
+    `), waveKeyframe, (theme.vars || theme).palette.action.hover));
   const Skeleton = /*#__PURE__*/React__namespace.forwardRef(function Skeleton(inProps, ref) {
     const props = useThemeProps({
       props: inProps,
@@ -41474,7 +41955,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     position: 'relative',
     cursor: 'pointer',
     touchAction: 'none',
-    color: theme.palette[ownerState.color].main,
+    color: (theme.vars || theme).palette[ownerState.color].main,
     WebkitTapHighlightColor: 'transparent'
   }, ownerState.orientation === 'horizontal' && _extends({
     height: 4,
@@ -41509,7 +41990,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     [`&.${sliderClasses.disabled}`]: {
       pointerEvents: 'none',
       cursor: 'default',
-      color: theme.palette.grey[400]
+      color: (theme.vars || theme).palette.grey[400]
     },
     [`&.${sliderClasses.dragging}`]: {
       [`& .${sliderClasses.thumb}, & .${sliderClasses.track}`]: {
@@ -41600,8 +42081,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }, ownerState.track === false && {
       display: 'none'
     }, ownerState.track === 'inverted' && {
-      backgroundColor: color,
-      borderColor: color
+      backgroundColor: theme.vars ? theme.vars.palette.Slider[`${ownerState.color}Track`] : color,
+      borderColor: theme.vars ? theme.vars.palette.Slider[`${ownerState.color}Track`] : color
     });
   });
   SliderTrack.propTypes
@@ -41659,7 +42140,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       borderRadius: 'inherit',
       width: '100%',
       height: '100%',
-      boxShadow: theme.shadows[2]
+      boxShadow: (theme.vars || theme).shadows[2]
     }, ownerState.size === 'small' && {
       boxShadow: 'none'
     }),
@@ -41675,13 +42156,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       transform: 'translate(-50%, -50%)'
     },
     [`&:hover, &.${sliderClasses.focusVisible}`]: {
-      boxShadow: `0px 0px 0px 8px ${alpha(theme.palette[ownerState.color].main, 0.16)}`,
+      boxShadow: `0px 0px 0px 8px ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.16)` : alpha(theme.palette[ownerState.color].main, 0.16)}`,
       '@media (hover: none)': {
         boxShadow: 'none'
       }
     },
     [`&.${sliderClasses.active}`]: {
-      boxShadow: `0px 0px 0px 14px ${alpha(theme.palette[ownerState.color].main, 0.16)}`
+      boxShadow: `0px 0px 0px 14px ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.16)` : alpha(theme.palette[ownerState.color].main, 0.16)}`
     },
     [`&.${sliderClasses.disabled}`]: {
       '&:hover': {
@@ -41723,9 +42204,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     transformOrigin: 'bottom center',
     transform: 'translateY(-100%) scale(0)',
     position: 'absolute',
-    backgroundColor: theme.palette.grey[600],
+    backgroundColor: (theme.vars || theme).palette.grey[600],
     borderRadius: 2,
-    color: theme.palette.common.white,
+    color: (theme.vars || theme).palette.common.white,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -41794,7 +42275,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     left: '50%',
     transform: 'translate(-50%, 1px)'
   }, markActive && {
-    backgroundColor: theme.palette.background.paper,
+    backgroundColor: (theme.vars || theme).palette.background.paper,
     opacity: 0.8
   }));
   SliderMark.propTypes
@@ -41820,7 +42301,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     ownerState,
     markLabelActive
   }) => _extends({}, theme.typography.body2, {
-    color: theme.palette.text.secondary,
+    color: (theme.vars || theme).palette.text.secondary,
     position: 'absolute',
     whiteSpace: 'nowrap'
   }, ownerState.orientation === 'horizontal' && {
@@ -41836,7 +42317,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       left: 44
     }
   }, markLabelActive && {
-    color: theme.palette.text.primary
+    color: (theme.vars || theme).palette.text.primary
   }));
   SliderMarkLabel.propTypes
   /* remove-proptypes */
@@ -42012,14 +42493,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * @default {}
      */
     componentsProps: PropTypes.shape({
-      input: PropTypes.object,
-      mark: PropTypes.object,
-      markLabel: PropTypes.object,
-      rail: PropTypes.object,
-      root: PropTypes.object,
-      thumb: PropTypes.object,
-      track: PropTypes.object,
-      valueLabel: PropTypes.shape({
+      input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      mark: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      markLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      rail: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      thumb: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      track: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      valueLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
         children: PropTypes.element,
         className: PropTypes.string,
         components: PropTypes.shape({
@@ -42029,7 +42510,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         style: PropTypes.object,
         value: PropTypes.number,
         valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on'])
-      })
+      })])
     }),
 
     /**
@@ -42230,13 +42711,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const emphasis = theme.palette.mode === 'light' ? 0.8 : 0.98;
     const backgroundColor = emphasize(theme.palette.background.default, emphasis);
     return _extends({}, theme.typography.body2, {
-      color: theme.palette.getContrastText(backgroundColor),
-      backgroundColor,
+      color: theme.vars ? theme.vars.palette.SnackbarContent.color : theme.palette.getContrastText(backgroundColor),
+      backgroundColor: theme.vars ? theme.vars.palette.SnackbarContent.bg : backgroundColor,
       display: 'flex',
       alignItems: 'center',
       flexWrap: 'wrap',
       padding: '6px 16px',
-      borderRadius: theme.shape.borderRadius,
+      borderRadius: (theme.vars || theme).shape.borderRadius,
       flexGrow: 1,
       [theme.breakpoints.up('sm')]: {
         flexGrow: 'initial',
@@ -43657,7 +44138,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme,
     ownerState
   }) => _extends({
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.grey.darkChannel} / 0.92)` : alpha(theme.palette.grey[700], 0.92),
+    backgroundColor: theme.vars ? theme.vars.palette.Tooltip.bg : alpha(theme.palette.grey[700], 0.92),
     borderRadius: (theme.vars || theme).shape.borderRadius,
     color: (theme.vars || theme).palette.common.white,
     fontFamily: theme.typography.fontFamily,
@@ -44401,10 +44882,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     ownerState
   }) => _extends({
     margin: 8,
-    color: theme.palette.text.secondary,
-    backgroundColor: theme.palette.background.paper,
+    color: (theme.vars || theme).palette.text.secondary,
+    backgroundColor: (theme.vars || theme).palette.background.paper,
     '&:hover': {
-      backgroundColor: emphasize(theme.palette.background.paper, 0.15)
+      backgroundColor: theme.vars ? theme.vars.palette.SpeedDialAction.fabHoverBg : emphasize(theme.palette.background.paper, 0.15)
     },
     transition: `${theme.transitions.create('transform', {
     duration: theme.transitions.duration.shorter
@@ -44457,10 +44938,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }) => _extends({
     position: 'absolute'
   }, theme.typography.body1, {
-    backgroundColor: theme.palette.background.paper,
-    borderRadius: theme.shape.borderRadius,
-    boxShadow: theme.shadows[1],
-    color: theme.palette.text.secondary,
+    backgroundColor: (theme.vars || theme).palette.background.paper,
+    borderRadius: (theme.vars || theme).shape.borderRadius,
+    boxShadow: (theme.vars || theme).shadows[1],
+    color: (theme.vars || theme).palette.text.secondary,
     padding: '4px 16px',
     wordBreak: 'keep-all'
   }));
@@ -45748,17 +46229,20 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   })(({
     ownerState,
     theme
-  }) => _extends({
-    display: 'block',
-    borderColor: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]
-  }, ownerState.orientation === 'horizontal' && {
-    borderTopStyle: 'solid',
-    borderTopWidth: 1
-  }, ownerState.orientation === 'vertical' && {
-    borderLeftStyle: 'solid',
-    borderLeftWidth: 1,
-    minHeight: 24
-  }));
+  }) => {
+    const borderColor = theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600];
+    return _extends({
+      display: 'block',
+      borderColor: theme.vars ? theme.vars.palette.StepConnector.border : borderColor
+    }, ownerState.orientation === 'horizontal' && {
+      borderTopStyle: 'solid',
+      borderTopWidth: 1
+    }, ownerState.orientation === 'vertical' && {
+      borderLeftStyle: 'solid',
+      borderLeftWidth: 1,
+      minHeight: 24
+    });
+  });
   const StepConnector = /*#__PURE__*/React__namespace.forwardRef(function StepConnector(inProps, ref) {
     const props = useThemeProps({
       props: inProps,
@@ -45863,7 +46347,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     paddingLeft: 8 + 12,
     // margin + half icon
     paddingRight: 8,
-    borderLeft: `1px solid ${theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]}`
+    borderLeft: theme.vars ? `1px solid ${theme.vars.palette.StepContent.border}` : `1px solid ${theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]}`
   }, ownerState.last && {
     borderLeft: 'none'
   }));
@@ -46917,7 +47401,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     left: 0,
     zIndex: 1,
     // Render above the focus ripple.
-    color: theme.palette.mode === 'light' ? theme.palette.common.white : theme.palette.grey[300],
+    color: theme.vars ? theme.vars.palette.Switch.defaultColor : `${theme.palette.mode === 'light' ? theme.palette.common.white : theme.palette.grey[300]}`,
     transition: theme.transitions.create(['left', 'transform'], {
       duration: theme.transitions.duration.shortest
     }),
@@ -46925,13 +47409,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       transform: 'translateX(20px)'
     },
     [`&.${switchClasses$1.disabled}`]: {
-      color: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[600]
+      color: theme.vars ? theme.vars.palette.Switch.defaultDisabledColor : `${theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[600]}`
     },
     [`&.${switchClasses$1.checked} + .${switchClasses$1.track}`]: {
       opacity: 0.5
     },
     [`&.${switchClasses$1.disabled} + .${switchClasses$1.track}`]: {
-      opacity: theme.palette.mode === 'light' ? 0.12 : 0.2
+      opacity: theme.vars ? theme.vars.opacity.switchTrackDisabled : `${theme.palette.mode === 'light' ? 0.12 : 0.2}`
     },
     [`& .${switchClasses$1.input}`]: {
       left: '-100%',
@@ -46942,7 +47426,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     ownerState
   }) => _extends({
     '&:hover': {
-      backgroundColor: alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${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'
@@ -46950,19 +47434,19 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }
   }, ownerState.color !== 'default' && {
     [`&.${switchClasses$1.checked}`]: {
-      color: theme.palette[ownerState.color].main,
+      color: (theme.vars || theme).palette[ownerState.color].main,
       '&: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),
         '@media (hover: none)': {
           backgroundColor: 'transparent'
         }
       },
       [`&.${switchClasses$1.disabled}`]: {
-        color: theme.palette.mode === 'light' ? lighten(theme.palette[ownerState.color].main, 0.62) : darken(theme.palette[ownerState.color].main, 0.55)
+        color: theme.vars ? theme.vars.palette.Switch[`${ownerState.color}DisabledColor`] : `${theme.palette.mode === 'light' ? lighten(theme.palette[ownerState.color].main, 0.62) : darken(theme.palette[ownerState.color].main, 0.55)}`
       }
     },
     [`&.${switchClasses$1.checked} + .${switchClasses$1.track}`]: {
-      backgroundColor: theme.palette[ownerState.color].main
+      backgroundColor: (theme.vars || theme).palette[ownerState.color].main
     }
   }));
   const SwitchTrack = styled$1('span', {
@@ -46979,8 +47463,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     transition: theme.transitions.create(['opacity', 'background-color'], {
       duration: theme.transitions.duration.shortest
     }),
-    backgroundColor: theme.palette.mode === 'light' ? theme.palette.common.black : theme.palette.common.white,
-    opacity: theme.palette.mode === 'light' ? 0.38 : 0.3
+    backgroundColor: theme.vars ? theme.vars.palette.common.onBackground : `${theme.palette.mode === 'light' ? theme.palette.common.black : theme.palette.common.white}`,
+    opacity: theme.vars ? theme.vars.opacity.switchTrack : `${theme.palette.mode === 'light' ? 0.38 : 0.3}`
   }));
   const SwitchThumb = styled$1('span', {
     name: 'MuiSwitch',
@@ -46989,7 +47473,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   })(({
     theme
   }) => ({
-    boxShadow: theme.shadows[1],
+    boxShadow: (theme.vars || theme).shadows[1],
     backgroundColor: 'currentColor',
     width: 20,
     height: 20,
@@ -47742,18 +48226,18 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     verticalAlign: 'inherit',
     // Workaround for a rendering bug with spanned columns in Chrome 62.0.
     // Removes the alpha (sets it to 1), and lightens or darkens the theme color.
-    borderBottom: `1px solid
+    borderBottom: theme.vars ? `1px solid ${theme.vars.palette.TableCell.border}` : `1px solid
     ${theme.palette.mode === 'light' ? lighten(alpha(theme.palette.divider, 1), 0.88) : darken(alpha(theme.palette.divider, 1), 0.68)}`,
     textAlign: 'left',
     padding: 16
   }, ownerState.variant === 'head' && {
-    color: theme.palette.text.primary,
+    color: (theme.vars || theme).palette.text.primary,
     lineHeight: theme.typography.pxToRem(24),
     fontWeight: theme.typography.fontWeightMedium
   }, ownerState.variant === 'body' && {
-    color: theme.palette.text.primary
+    color: (theme.vars || theme).palette.text.primary
   }, ownerState.variant === 'footer' && {
-    color: theme.palette.text.secondary,
+    color: (theme.vars || theme).palette.text.secondary,
     lineHeight: theme.typography.pxToRem(21),
     fontSize: theme.typography.pxToRem(12)
   }, ownerState.size === 'small' && {
@@ -47785,7 +48269,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     position: 'sticky',
     top: 0,
     zIndex: 2,
-    backgroundColor: theme.palette.background.default
+    backgroundColor: (theme.vars || theme).palette.background.default
   }));
   /**
    * The component renders a `<th>` element when the parent context is a header
@@ -49823,31 +50307,21 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       scroll(scrollValue);
     };
 
-    const getFirstVisibleTab = tabs => {
-      const containerSize = tabsRef.current[clientSize];
-      const containerStartBound = Math.round(tabsRef.current[scrollStart]);
-      const containerEndBound = Math.round(containerStartBound + containerSize);
-      const offset = vertical ? 'offsetTop' : 'offsetLeft';
-      return tabs.find(tab => {
-        const centerPoint = tab[offset] + tab[clientSize] / 2;
-        return centerPoint >= containerStartBound && centerPoint <= containerEndBound;
-      });
-    };
-
     const getScrollSize = () => {
       const containerSize = tabsRef.current[clientSize];
       let totalSize = 0;
       const children = Array.from(tabListRef.current.children);
-      const firstVisibleTab = getFirstVisibleTab(children);
-
-      if (firstVisibleTab && firstVisibleTab[clientSize] > containerSize) {
-        return firstVisibleTab[clientSize];
-      }
 
       for (let i = 0; i < children.length; i += 1) {
         const tab = children[i];
 
         if (totalSize + tab[clientSize] > containerSize) {
+          // If the first item is longer than the container size, then only scroll
+          // by the container size.
+          if (i === 0) {
+            totalSize = containerSize;
+          }
+
           break;
         }
 
@@ -49957,8 +50431,16 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     });
     React__namespace.useEffect(() => {
       const handleResize = debounce$1(() => {
-        updateIndicatorState();
-        updateScrollButtonState();
+        // If the Tabs component is replaced by Suspense with a fallback, the last
+        // ResizeObserver's handler that runs because of the change in the layout is trying to
+        // access a dom node that is no longer there (as the fallback component is being shown instead).
+        // See https://github.com/mui/material-ui/issues/33276
+        // TODO: Add tests that will ensure the component is not failing when
+        // replaced by Suspense with a fallback, once React is updated to version 18
+        if (tabsRef.current) {
+          updateIndicatorState();
+          updateScrollButtonState();
+        }
       });
       const win = ownerWindow(tabsRef.current);
       win.addEventListener('resize', handleResize);
@@ -51294,7 +51776,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.DialogTitle = DialogTitle$1;
   exports.Divider = Divider$1;
   exports.Drawer = Drawer$1;
-  exports.Experimental_CssVarsProvider = Experimental_CssVarsProvider;
+  exports.Experimental_CssVarsProvider = CssVarsProvider;
   exports.Fab = Fab$1;
   exports.Fade = Fade$1;
   exports.FilledInput = FilledInput$1;
@@ -51628,6 +52110,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.scopedCssBaselineClasses = scopedCssBaselineClasses$1;
   exports.selectClasses = selectClasses$1;
   exports.setRef = setRef;
+  exports.shouldSkipGeneratingVar = shouldSkipGeneratingVar;
   exports.skeletonClasses = skeletonClasses$1;
   exports.sliderClasses = sliderClasses;
   exports.snackbarClasses = snackbarClasses$1;