@mui/material 5.8.3 → 5.8.6

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.8.3
+/** @license MUI v5.8.6
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -1330,32 +1330,6 @@
   var reactIs_5 = reactIs.Memo;
   reactIs.isValidElementType;
 
-  /**
-   * Copyright 2015, Yahoo! Inc.
-   * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
-   */
-  var REACT_STATICS = {
-    childContextTypes: true,
-    contextType: true,
-    contextTypes: true,
-    defaultProps: true,
-    displayName: true,
-    getDefaultProps: true,
-    getDerivedStateFromError: true,
-    getDerivedStateFromProps: true,
-    mixins: true,
-    propTypes: true,
-    type: true
-  };
-  var KNOWN_STATICS = {
-    name: true,
-    length: true,
-    prototype: true,
-    caller: true,
-    callee: true,
-    arguments: true,
-    arity: true
-  };
   var FORWARD_REF_STATICS = {
     '$$typeof': true,
     render: true,
@@ -1375,61 +1349,6 @@
   TYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS;
   TYPE_STATICS[reactIs.Memo] = MEMO_STATICS;
 
-  function getStatics(component) {
-    // React v16.11 and below
-    if (reactIs.isMemo(component)) {
-      return MEMO_STATICS;
-    } // React v16.12 and above
-
-
-    return TYPE_STATICS[component['$$typeof']] || REACT_STATICS;
-  }
-
-  var defineProperty = Object.defineProperty;
-  var getOwnPropertyNames = Object.getOwnPropertyNames;
-  var getOwnPropertySymbols$1 = Object.getOwnPropertySymbols;
-  var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
-  var getPrototypeOf = Object.getPrototypeOf;
-  var objectPrototype = Object.prototype;
-  function hoistNonReactStatics(targetComponent, sourceComponent, blacklist) {
-    if (typeof sourceComponent !== 'string') {
-      // don't hoist over string (html) components
-      if (objectPrototype) {
-        var inheritedComponent = getPrototypeOf(sourceComponent);
-
-        if (inheritedComponent && inheritedComponent !== objectPrototype) {
-          hoistNonReactStatics(targetComponent, inheritedComponent, blacklist);
-        }
-      }
-
-      var keys = getOwnPropertyNames(sourceComponent);
-
-      if (getOwnPropertySymbols$1) {
-        keys = keys.concat(getOwnPropertySymbols$1(sourceComponent));
-      }
-
-      var targetStatics = getStatics(targetComponent);
-      var sourceStatics = getStatics(sourceComponent);
-
-      for (var i = 0; i < keys.length; ++i) {
-        var key = keys[i];
-
-        if (!KNOWN_STATICS[key] && !(blacklist && blacklist[key]) && !(sourceStatics && sourceStatics[key]) && !(targetStatics && targetStatics[key])) {
-          var descriptor = getOwnPropertyDescriptor(sourceComponent, key);
-
-          try {
-            // Avoid failures from read-only properties
-            defineProperty(targetComponent, key, descriptor);
-          } catch (e) {}
-        }
-      }
-    }
-
-    return targetComponent;
-  }
-
-  var hoistNonReactStatics_cjs = hoistNonReactStatics;
-
   var isBrowser$4 = typeof document !== 'undefined';
   function getRegisteredStyles(registered, registeredStyles, classNames) {
     var rawClassName = '';
@@ -4705,7 +4624,7 @@
     injectFirst: PropTypes.bool
   } ;
 
-  function isEmpty$3(obj) {
+  function isEmpty$4(obj) {
     return obj === undefined || obj === null || Object.keys(obj).length === 0;
   }
 
@@ -4714,7 +4633,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
     });
@@ -4793,7 +4712,7 @@
 
     if (element == null || // When server-side rendering React doesn't warn either.
     // This is not an accurate check for SSR.
-    // This is only in place for emotion compat.
+    // This is only in place for Emotion compat.
     // TODO: Revisit once https://github.com/facebook/react/issues/20047 is resolved.
     typeof window === 'undefined') {
       return null;
@@ -5545,7 +5464,12 @@
     return requiredInteger(props, propName, ...other);
   }
 
+  function validatorNoop() {
+    return null;
+  }
+
   validator.isRequired = requiredInteger;
+  validatorNoop.isRequired = validatorNoop;
   var integerPropType = validator;
 
   /**
@@ -5609,26 +5533,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;
   }
@@ -5762,9 +5686,11 @@
       if (Array.isArray(breakpointValues)) {
         acc[breakpoint] = breakpointValues[i] != null ? breakpointValues[i] : breakpointValues[previous];
         previous = i;
-      } else {
-        acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous] || breakpointValues;
+      } else if (typeof breakpointValues === 'object') {
+        acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous];
         previous = breakpoint;
+      } else {
+        acc[breakpoint] = breakpointValues;
       }
 
       return acc;
@@ -6468,7 +6394,7 @@
       } = props || {};
 
       if (!sx) {
-        return null; // emotion & styled-components will neglect null
+        return null; // Emotion & styled-components will neglect null
       }
       /*
        * Receive `sxInput` as object or callback
@@ -6534,7 +6460,7 @@
   styleFunctionSx.filterProps = ['sx'];
   var defaultStyleFunctionSx = styleFunctionSx;
 
-  const _excluded$2l = ["sx"];
+  const _excluded$2m = ["sx"];
 
   const splitProps = props => {
     const result = {
@@ -6555,7 +6481,7 @@
     const {
       sx: inSx
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2l);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2m);
 
     const {
       systemProps,
@@ -6634,7 +6560,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 => ({
@@ -6670,7 +6596,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);
@@ -6762,7 +6688,7 @@
     return spacing;
   }
 
-  const _excluded$2j = ["breakpoints", "palette", "spacing", "shape"];
+  const _excluded$2k = ["breakpoints", "palette", "spacing", "shape"];
 
   function createTheme$1(options = {}, ...args) {
     const {
@@ -6771,7 +6697,7 @@
       spacing: spacingInput,
       shape: shapeInput = {}
     } = options,
-          other = _objectWithoutPropertiesLoose(options, _excluded$2j);
+          other = _objectWithoutPropertiesLoose(options, _excluded$2k);
 
     const breakpoints = createBreakpoints(breakpointsInput);
     const spacing = createSpacing(spacingInput);
@@ -6893,7 +6819,7 @@
     return useTheme$2(defaultTheme);
   }
 
-  const _excluded$2i = ["className", "component"];
+  const _excluded$2j = ["className", "component"];
   function createBox(options = {}) {
     const {
       defaultTheme,
@@ -6910,7 +6836,7 @@
         className,
         component = 'div'
       } = _extendSxProp,
-            other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$2i);
+            other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$2j);
 
       return /*#__PURE__*/jsxRuntime_1(BoxRoot, _extends({
         as: component,
@@ -6922,9 +6848,9 @@
     return Box;
   }
 
-  const _excluded$2h = ["variant"];
+  const _excluded$2i = ["variant"];
 
-  function isEmpty$2(string) {
+  function isEmpty$3(string) {
     return string.length === 0;
   }
   /**
@@ -6938,24 +6864,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;
   }
 
@@ -7034,7 +6960,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;
@@ -7063,7 +6989,7 @@
 
       const muiStyledResolver = (styleArg, ...expressions) => {
         const expressionsWithDefaultTheme = expressions ? expressions.map(stylesArg => {
-          // On the server emotion doesn't use React.forwardRef for creating components, so the created
+          // On the server Emotion doesn't use React.forwardRef for creating components, so the created
           // component stays as a function. This condition makes sure that we do not interpolate functions
           // which are basically components used as a selectors.
           // eslint-disable-next-line no-underscore-dangle
@@ -7074,7 +7000,7 @@
                 other = _objectWithoutPropertiesLoose(_ref, _excluded2$c);
 
             return stylesArg(_extends({
-              theme: isEmpty$1(themeInput) ? defaultTheme : themeInput
+              theme: isEmpty$2(themeInput) ? defaultTheme : themeInput
             }, other));
           } : stylesArg;
         }) : [];
@@ -7082,7 +7008,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) {
@@ -7101,14 +7027,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
             }));
@@ -7122,7 +7048,7 @@
 
           transformedStyleArg = [...styleArg, ...placeholders];
           transformedStyleArg.raw = [...styleArg.raw, ...placeholders];
-        } else if (typeof styleArg === 'function' && // On the server emotion doesn't use React.forwardRef for creating components, so the created
+        } else if (typeof styleArg === 'function' && // On the server Emotion doesn't use React.forwardRef for creating components, so the created
         // component stays as a function. This condition makes sure that we do not interpolate functions
         // which are basically components used as a selectors.
         // eslint-disable-next-line no-underscore-dangle
@@ -7135,7 +7061,7 @@
                 other = _objectWithoutPropertiesLoose(_ref2, _excluded3$1);
 
             return styleArg(_extends({
-              theme: isEmpty$1(themeInput) ? defaultTheme : themeInput
+              theme: isEmpty$2(themeInput) ? defaultTheme : themeInput
             }, other));
           };
         }
@@ -7243,7 +7169,7 @@
    * Returns an object with the type and values of a color.
    *
    * Note: Does not support rgb % values.
-   * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+   * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
    * @returns {object} - A MUI color object: {type: string, values: number[]}
    */
 
@@ -7295,7 +7221,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   /**
    * Returns a channel created from the input color.
    *
-   * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+   * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
    * @returns {string} - The channel for the color, that can be used in rgba or hsla colors
    */
 
@@ -7306,7 +7232,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   /**
    * Converts a color object with type and values to a string.
    * @param {object} color - Decomposed color
-   * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla'
+   * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla', 'color'
    * @param {array} color.values - [n,n,n] or [n,n,n,n]
    * @returns {string} A CSS color string
    */
@@ -7716,6 +7642,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',
@@ -7729,13 +7656,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}';
           }
         }
@@ -7748,6 +7678,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) {} })();`
       }
     });
@@ -8005,7 +7938,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return getCssVar;
   }
 
-  const _excluded$2f = ["colorSchemes", "components"];
+  const _excluded$2g = ["colorSchemes", "components"];
   const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
   function createCssVarsProvider(options) {
     const {
@@ -8060,7 +7993,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         colorSchemes = {},
         components = {}
       } = themeProp,
-            restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded$2f);
+            restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded$2g);
 
       const allColorSchemes = Object.keys(colorSchemes);
       const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
@@ -8307,7 +8240,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 {
@@ -8317,7 +8251,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     };
   }
 
-  const _excluded$2e = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
+  const _excluded$2f = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
   const defaultTheme$4 = createTheme$1();
   const defaultCreateStyledComponent = systemStyled('div', {
     name: 'MuiContainer',
@@ -8419,7 +8353,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,
@@ -8459,7 +8393,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) {
     {
@@ -8474,7 +8408,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: {}
@@ -8546,22 +8480,183 @@ 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({}, 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;
+  }
+
+  /**
+   * Creates a type that is T with removed properties that are functions with names beginning with `on`.
+   * Note that it does not exactly follow the logic of `omitEventHandlers` as it also removes fields where
+   * `on` is followed by a non-letter character,
+   */
+
+  /**
+   * 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 {};
     }
 
-    return _extends({}, existingProps, {
-      ownerState: _extends({}, existingProps.ownerState, ownerState)
+    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
@@ -9637,7 +9732,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 {
@@ -9662,12 +9757,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,
@@ -9693,14 +9785,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
@@ -9725,11 +9826,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.
@@ -9751,8 +9847,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])
     }),
 
     /**
@@ -12378,11 +12474,23 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return parseInt(ownerWindow(element).getComputedStyle(element).paddingRight, 10) || 0;
   }
 
+  function isAriaHiddenForbiddenOnElement(element) {
+    // The forbidden HTML tags are the ones from ARIA specification that
+    // can be children of body and can't have aria-hidden attribute.
+    // cf. https://www.w3.org/TR/html-aria/#docconformance
+    const forbiddenTagNames = ['TEMPLATE', 'SCRIPT', 'STYLE', 'LINK', 'MAP', 'META', 'NOSCRIPT', 'PICTURE', 'COL', 'COLGROUP', 'PARAM', 'SLOT', 'SOURCE', 'TRACK'];
+    const isForbiddenTagName = forbiddenTagNames.indexOf(element.tagName) !== -1;
+    const isInputHidden = element.tagName === 'INPUT' && element.getAttribute('type') === 'hidden';
+    return isForbiddenTagName || isInputHidden;
+  }
+
   function ariaHiddenSiblings(container, mountElement, currentElement, elementsToExclude = [], show) {
     const blacklist = [mountElement, currentElement, ...elementsToExclude];
-    const blacklistTagNames = ['TEMPLATE', 'SCRIPT', 'STYLE'];
     [].forEach.call(container.children, element => {
-      if (blacklist.indexOf(element) === -1 && blacklistTagNames.indexOf(element.tagName) === -1) {
+      const isNotExcludedElement = blacklist.indexOf(element) === -1;
+      const isNotForbiddenElement = !isAriaHiddenForbiddenOnElement(element);
+
+      if (isNotExcludedElement && isNotForbiddenElement) {
         ariaHidden(element, show);
       }
     });
@@ -12426,15 +12534,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',
@@ -12534,7 +12649,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       }
     }
 
-    remove(modal) {
+    remove(modal, ariaHiddenState = true) {
       const modalIndex = this.modals.indexOf(modal);
 
       if (modalIndex === -1) {
@@ -12554,7 +12669,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
         if (modal.modalRef) {
           // In case the modal wasn't in the DOM yet.
-          ariaHidden(modal.modalRef, true);
+          ariaHidden(modal.modalRef, ariaHiddenState);
         }
 
         ariaHiddenSiblings(containerInfo.container, modal.mount, modal.modalRef, containerInfo.hiddenSiblings, false);
@@ -12942,7 +13057,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 {
@@ -12982,9 +13097,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, _componentsProps$root;
+
     const {
-      BackdropComponent,
-      BackdropProps,
       children,
       classes: classesProp,
       className,
@@ -13010,7 +13125,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       open,
 
       /* eslint-disable react/prop-types */
-      theme,
       onTransitionEnter,
       onTransitionExited
     } = props,
@@ -13022,6 +13136,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const modalRef = React__namespace.useRef(null);
     const handleRef = useForkRef(modalRef, ref);
     const hasTransition = getHasTransition(props);
+    const ariaHiddenProp = (_props$ariaHidden = props['aria-hidden']) != null ? _props$ariaHidden : true;
 
     const getDoc = () => ownerDocument(mountNodeRef.current);
 
@@ -13058,12 +13173,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       if (open && isTopModal()) {
         handleMounted();
       } else {
-        ariaHidden(modalRef.current, true);
+        ariaHidden(modalRef.current, ariaHiddenProp);
       }
     });
     const handleClose = React__namespace.useCallback(() => {
-      manager.remove(getModal());
-    }, [manager]);
+      manager.remove(getModal(), ariaHiddenProp);
+    }, [manager, ariaHiddenProp]);
     React__namespace.useEffect(() => {
       return () => {
         handleClose();
@@ -13169,26 +13284,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,
@@ -13207,16 +13321,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.
      */
@@ -13250,6 +13354,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
      * @default {}
      */
     components: PropTypes.shape({
+      Backdrop: PropTypes.elementType,
       Root: PropTypes.elementType
     }),
 
@@ -13258,6 +13363,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
      * @default {}
      */
     componentsProps: PropTypes.shape({
+      backdrop: PropTypes.object,
       root: PropTypes.object
     }),
 
@@ -13460,7 +13566,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       })]
     }));
   }
-
   SliderValueLabelUnstyled.propTypes = {
     children: PropTypes.element.isRequired,
     className: PropTypes.string,
@@ -13700,7 +13805,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);
@@ -13712,7 +13817,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);
@@ -13725,7 +13830,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);
@@ -13748,8 +13853,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 => {
@@ -13798,7 +13903,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);
@@ -14109,13 +14214,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 || {}),
@@ -14134,7 +14238,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, {
@@ -14148,14 +14252,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,
@@ -14164,7 +14268,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;
 
@@ -14214,7 +14318,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,
@@ -14253,7 +14356,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       active,
       axis,
       range,
-      focusVisible,
+      focusedThumbIndex,
       dragging,
       marks,
       values,
@@ -14264,37 +14367,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;
@@ -14312,7 +14447,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
@@ -14339,23 +14474,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);
@@ -14443,22 +14575,24 @@ 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({
           Root: PropTypes.elementType
         }),
+        open: PropTypes.bool,
         style: PropTypes.object,
-        value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
+        value: PropTypes.number,
         valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on'])
-      })
+      })])
     }),
 
     /**
@@ -14550,11 +14684,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'
@@ -14642,6 +14771,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,
@@ -14660,13 +14794,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;
@@ -14703,30 +14837,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);
@@ -14745,7 +14926,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
           resizeObserver.disconnect();
         }
       };
-    }, [syncHeight]);
+    });
     useEnhancedEffect$1(() => {
       syncHeight();
     });
@@ -15899,6 +16080,19 @@ 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;
+  }
+
   function extendTheme(options = {}, ...args) {
     var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$li3, _colorSchemesInput$da2, _colorSchemesInput$da3;
 
@@ -15928,16 +16122,20 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         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
         })
@@ -15947,23 +16145,138 @@ 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', 'var(--mui-palette-error-main)');
+        setColor(palette.Alert, 'infoFilledBg', 'var(--mui-palette-info-main)');
+        setColor(palette.Alert, 'successFilledBg', 'var(--mui-palette-success-main)');
+        setColor(palette.Alert, 'warningFilledBg', 'var(--mui-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', 'var(--mui-palette-error-light)');
+        setColor(palette.Alert, 'infoIconColor', 'var(--mui-palette-info-light)');
+        setColor(palette.Alert, 'successIconColor', 'var(--mui-palette-success-light)');
+        setColor(palette.Alert, 'warningIconColor', 'var(--mui-palette-warning-light)');
+        setColor(palette.AppBar, 'defaultBg', 'var(--mui-palette-grey-100)');
+        setColor(palette.Avatar, 'defaultBg', 'var(--mui-palette-grey-400)');
+        setColor(palette.Chip, 'defaultBorder', 'var(--mui-palette-grey-400)');
+        setColor(palette.Chip, 'defaultAvatarColor', 'var(--mui-palette-grey-700)');
+        setColor(palette.Chip, 'defaultIconColor', 'var(--mui-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(var(--mui-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));
+        setColor(palette.SnackbarContent, 'bg', emphasize(palette.background.default, 0.8));
+        setColor(palette.SpeedDialAction, 'fabHoverBg', emphasize(palette.background.paper, 0.15));
+        setColor(palette.StepConnector, 'border', 'var(--mui-palette-grey-400)');
+        setColor(palette.StepContent, 'border', 'var(--mui-palette-grey-400)');
+        setColor(palette.Switch, 'defaultColor', 'var(--mui-palette-common-white)');
+        setColor(palette.Switch, 'defaultDisabledColor', 'var(--mui-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', 'var(--mui-palette-error-dark)');
+        setColor(palette.Alert, 'infoFilledBg', 'var(--mui-palette-info-dark)');
+        setColor(palette.Alert, 'successFilledBg', 'var(--mui-palette-success-dark)');
+        setColor(palette.Alert, 'warningFilledBg', 'var(--mui-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', 'var(--mui-palette-error-main)');
+        setColor(palette.Alert, 'infoIconColor', 'var(--mui-palette-info-main)');
+        setColor(palette.Alert, 'successIconColor', 'var(--mui-palette-success-main)');
+        setColor(palette.Alert, 'warningIconColor', 'var(--mui-palette-warning-main)');
+        setColor(palette.AppBar, 'defaultBg', 'var(--mui-palette-grey-900)');
+        setColor(palette.AppBar, 'darkBg', 'var(--mui-palette-background-paper)'); // specific for dark mode
+
+        setColor(palette.AppBar, 'darkColor', 'var(--mui-palette-text-primary)'); // specific for dark mode
+
+        setColor(palette.Avatar, 'defaultBg', 'var(--mui-palette-grey-600)');
+        setColor(palette.Chip, 'defaultBorder', 'var(--mui-palette-grey-700)');
+        setColor(palette.Chip, 'defaultAvatarColor', 'var(--mui-palette-grey-300)');
+        setColor(palette.Chip, 'defaultIconColor', 'var(--mui-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(var(--mui-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));
+        setColor(palette.SnackbarContent, 'bg', emphasize(palette.background.default, 0.98));
+        setColor(palette.SpeedDialAction, 'fabHoverBg', emphasize(palette.background.paper, 0.15));
+        setColor(palette.StepConnector, 'border', 'var(--mui-palette-grey-600)');
+        setColor(palette.StepContent, 'border', 'var(--mui-palette-grey-600)');
+        setColor(palette.Switch, 'defaultColor', 'var(--mui-palette-grey-300)');
+        setColor(palette.Switch, 'defaultDisabledColor', 'var(--mui-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
 
@@ -15990,12 +16303,16 @@ 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);
@@ -16016,7 +16333,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       light: 'light',
       dark: 'dark'
     },
-    prefix: 'md',
+    prefix: 'mui',
     resolveTheme: theme => {
       const newTheme = _extends({}, theme, {
         typography: createTypography(theme.palette, theme.typography)
@@ -16024,7 +16341,11 @@ 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: keys => {
+      var _keys$;
+
+      return !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/) || keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));
+    }
   });
 
   function getSvgIconUtilityClass(slot) {
@@ -19566,22 +19887,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',
@@ -20100,7 +20429,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',
@@ -20125,7 +20458,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,
@@ -20135,14 +20468,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
@@ -20150,7 +20483,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' && {
@@ -20166,6 +20499,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) {
@@ -20615,6 +20961,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,
@@ -20623,8 +20970,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']),
@@ -20640,7 +20987,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}`]: {
@@ -20648,16 +20995,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,
@@ -20667,7 +21014,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' && {
@@ -20679,35 +21026,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
       }
     });
   }, ({
@@ -20718,29 +21065,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
@@ -20761,18 +21108,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
       }
     }
   }));
@@ -21236,7 +21583,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
     }, {
@@ -21249,7 +21596,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
     };
@@ -23026,13 +23373,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',
@@ -24143,8 +24493,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])
     }),
 
     /**
@@ -24827,7 +25177,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   function getButtonUtilityClass(slot) {
     return generateUtilityClass('MuiButton', slot);
   }
-  const buttonClasses = generateUtilityClasses('MuiButton', ['root', 'text', 'textInherit', 'textPrimary', 'textSecondary', 'outlined', 'outlinedInherit', 'outlinedPrimary', 'outlinedSecondary', 'contained', 'containedInherit', 'containedPrimary', 'containedSecondary', 'disableElevation', 'focusVisible', 'disabled', 'colorInherit', 'textSizeSmall', 'textSizeMedium', 'textSizeLarge', 'outlinedSizeSmall', 'outlinedSizeMedium', 'outlinedSizeLarge', 'containedSizeSmall', 'containedSizeMedium', 'containedSizeLarge', 'sizeMedium', 'sizeSmall', 'sizeLarge', 'fullWidth', 'startIcon', 'endIcon', 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge']);
+  const buttonClasses = generateUtilityClasses('MuiButton', ['root', 'text', 'textInherit', 'textPrimary', 'textSecondary', 'textSuccess', 'textError', 'textInfo', 'textWarning', 'outlined', 'outlinedInherit', 'outlinedPrimary', 'outlinedSecondary', 'outlinedSuccess', 'outlinedError', 'outlinedInfo', 'outlinedWarning', 'contained', 'containedInherit', 'containedPrimary', 'containedSecondary', 'containedSuccess', 'containedError', 'containedInfo', 'containedWarning', 'disableElevation', 'focusVisible', 'disabled', 'colorInherit', 'textSizeSmall', 'textSizeMedium', 'textSizeLarge', 'outlinedSizeSmall', 'outlinedSizeMedium', 'outlinedSizeLarge', 'containedSizeSmall', 'containedSizeMedium', 'containedSizeLarge', 'sizeMedium', 'sizeSmall', 'sizeLarge', 'fullWidth', 'startIcon', 'endIcon', 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge']);
   var buttonClasses$1 = buttonClasses;
 
   /**
@@ -27282,7 +27632,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 => {
@@ -27335,7 +27685,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',
@@ -27344,8 +27694,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,
@@ -27355,7 +27707,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);
 
@@ -27377,16 +27731,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
@@ -27406,6 +27763,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',
@@ -27420,6 +27778,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,
 
@@ -27439,12 +27798,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
     }),
 
@@ -27453,6 +27819,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * @default {}
      */
     componentsProps: PropTypes.shape({
+      backdrop: PropTypes.object,
       root: PropTypes.object
     }),
 
@@ -27676,7 +28043,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)]: {
@@ -27777,12 +28144,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,
@@ -27838,6 +28209,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',
@@ -29552,36 +29924,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
@@ -29602,12 +29976,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
@@ -29621,7 +29995,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'
@@ -29651,7 +30025,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',
@@ -29659,6 +30034,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
@@ -30968,7 +31355,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   ...GRID_SIZES.map(size => `grid-xs-${size}`), ...GRID_SIZES.map(size => `grid-sm-${size}`), ...GRID_SIZES.map(size => `grid-md-${size}`), ...GRID_SIZES.map(size => `grid-lg-${size}`), ...GRID_SIZES.map(size => `grid-xl-${size}`)]);
   var gridClasses$1 = gridClasses;
 
-  const _excluded$1d = ["className", "columns", "columnSpacing", "component", "container", "direction", "item", "lg", "md", "rowSpacing", "sm", "spacing", "wrap", "xl", "xs", "zeroMinWidth"];
+  const _excluded$1d = ["className", "columns", "columnSpacing", "component", "container", "direction", "item", "rowSpacing", "spacing", "wrap", "zeroMinWidth"];
 
   function getOffset(val) {
     const parse = parseFloat(val);
@@ -31148,26 +31535,27 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     return styles;
   }
-  function resolveSpacingClasses(spacing, container, styles = {}) {
-    // in case of grid item or undefined/null or `spacing` <= 0
-    if (!container || !spacing || spacing <= 0) {
+  function resolveSpacingStyles(spacing, breakpoints, styles = {}) {
+    // undefined/null or `spacing` <= 0
+    if (!spacing || spacing <= 0) {
       return [];
     } // in case of string/number `spacing`
 
 
     if (typeof spacing === 'string' && !Number.isNaN(Number(spacing)) || typeof spacing === 'number') {
-      return [styles[`spacing-xs-${String(spacing)}`] || `spacing-xs-${String(spacing)}`];
+      return [styles[`spacing-xs-${String(spacing)}`]];
     } // in case of object `spacing`
 
 
-    const {
-      xs,
-      sm,
-      md,
-      lg,
-      xl
-    } = spacing;
-    return [Number(xs) > 0 && (styles[`spacing-xs-${String(xs)}`] || `spacing-xs-${String(xs)}`), Number(sm) > 0 && (styles[`spacing-sm-${String(sm)}`] || `spacing-sm-${String(sm)}`), Number(md) > 0 && (styles[`spacing-md-${String(md)}`] || `spacing-md-${String(md)}`), Number(lg) > 0 && (styles[`spacing-lg-${String(lg)}`] || `spacing-lg-${String(lg)}`), Number(xl) > 0 && (styles[`spacing-xl-${String(xl)}`] || `spacing-xl-${String(xl)}`)];
+    const spacingStyles = [];
+    breakpoints.forEach(breakpoint => {
+      const value = spacing[breakpoint];
+
+      if (Number(value) > 0) {
+        spacingStyles.push(styles[`spacing-${breakpoint}-${String(value)}`]);
+      }
+    });
+    return spacingStyles;
   } // Default CSS values
   // flex: '0 1 auto',
   // flexDirection: 'row',
@@ -31179,20 +31567,33 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     name: 'MuiGrid',
     slot: 'Root',
     overridesResolver: (props, styles) => {
+      const {
+        ownerState
+      } = props;
       const {
         container,
         direction,
         item,
-        lg,
-        md,
-        sm,
         spacing,
         wrap,
-        xl,
-        xs,
-        zeroMinWidth
-      } = props.ownerState;
-      return [styles.root, container && styles.container, item && styles.item, zeroMinWidth && styles.zeroMinWidth, ...resolveSpacingClasses(spacing, container, styles), direction !== 'row' && styles[`direction-xs-${String(direction)}`], wrap !== 'wrap' && styles[`wrap-xs-${String(wrap)}`], xs !== false && styles[`grid-xs-${String(xs)}`], sm !== false && styles[`grid-sm-${String(sm)}`], md !== false && styles[`grid-md-${String(md)}`], lg !== false && styles[`grid-lg-${String(lg)}`], xl !== false && styles[`grid-xl-${String(xl)}`]];
+        zeroMinWidth,
+        breakpoints
+      } = ownerState;
+      let spacingStyles = []; // in case of grid item
+
+      if (container) {
+        spacingStyles = resolveSpacingStyles(spacing, breakpoints, styles);
+      }
+
+      const breakpointsStyles = [];
+      breakpoints.forEach(breakpoint => {
+        const value = ownerState[breakpoint];
+
+        if (value) {
+          breakpointsStyles.push(styles[`grid-${breakpoint}-${String(value)}`]);
+        }
+      });
+      return [styles.root, container && styles.container, item && styles.item, zeroMinWidth && styles.zeroMinWidth, ...spacingStyles, direction !== 'row' && styles[`direction-xs-${String(direction)}`], wrap !== 'wrap' && styles[`wrap-xs-${String(wrap)}`], ...breakpointsStyles];
     }
   })(({
     ownerState
@@ -31210,6 +31611,29 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }, ownerState.wrap !== 'wrap' && {
     flexWrap: ownerState.wrap
   }), generateDirection, generateRowGap, generateColumnGap, generateGrid);
+  function resolveSpacingClasses(spacing, breakpoints) {
+    // undefined/null or `spacing` <= 0
+    if (!spacing || spacing <= 0) {
+      return [];
+    } // in case of string/number `spacing`
+
+
+    if (typeof spacing === 'string' && !Number.isNaN(Number(spacing)) || typeof spacing === 'number') {
+      return [`spacing-xs-${String(spacing)}`];
+    } // in case of object `spacing`
+
+
+    const classes = [];
+    breakpoints.forEach(breakpoint => {
+      const value = spacing[breakpoint];
+
+      if (Number(value) > 0) {
+        const className = `spacing-${breakpoint}-${String(value)}`;
+        classes.push(className);
+      }
+    });
+    return classes;
+  }
 
   const useUtilityClasses$_ = ownerState => {
     const {
@@ -31217,17 +31641,27 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       container,
       direction,
       item,
-      lg,
-      md,
-      sm,
       spacing,
       wrap,
-      xl,
-      xs,
-      zeroMinWidth
+      zeroMinWidth,
+      breakpoints
     } = ownerState;
+    let spacingClasses = []; // in case of grid item
+
+    if (container) {
+      spacingClasses = resolveSpacingClasses(spacing, breakpoints);
+    }
+
+    const breakpointsClasses = [];
+    breakpoints.forEach(breakpoint => {
+      const value = ownerState[breakpoint];
+
+      if (value) {
+        breakpointsClasses.push(`grid-${breakpoint}-${String(value)}`);
+      }
+    });
     const slots = {
-      root: ['root', container && 'container', item && 'item', zeroMinWidth && 'zeroMinWidth', ...resolveSpacingClasses(spacing, container), direction !== 'row' && `direction-xs-${String(direction)}`, wrap !== 'wrap' && `wrap-xs-${String(wrap)}`, xs !== false && `grid-xs-${String(xs)}`, sm !== false && `grid-sm-${String(sm)}`, md !== false && `grid-md-${String(md)}`, lg !== false && `grid-lg-${String(lg)}`, xl !== false && `grid-xl-${String(xl)}`]
+      root: ['root', container && 'container', item && 'item', zeroMinWidth && 'zeroMinWidth', ...spacingClasses, direction !== 'row' && `direction-xs-${String(direction)}`, wrap !== 'wrap' && `wrap-xs-${String(wrap)}`, ...breakpointsClasses]
     };
     return composeClasses(slots, getGridUtilityClass, classes);
   };
@@ -31237,6 +31671,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       props: inProps,
       name: 'MuiGrid'
     });
+    const {
+      breakpoints
+    } = useTheme();
     const props = extendSxProp(themeProps);
 
     const {
@@ -31247,14 +31684,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       container = false,
       direction = 'row',
       item = false,
-      lg = false,
-      md = false,
       rowSpacing: rowSpacingProp,
-      sm = false,
       spacing = 0,
       wrap = 'wrap',
-      xl = false,
-      xs = false,
       zeroMinWidth = false
     } = props,
           other = _objectWithoutPropertiesLoose(props, _excluded$1d);
@@ -31264,21 +31696,29 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const columnsContext = React__namespace.useContext(GridContext$1); // columns set with default breakpoint unit of 12
 
     const columns = container ? columnsProp || 12 : columnsContext;
+    const breakpointsValues = {};
+
+    const otherFiltered = _extends({}, other);
+
+    breakpoints.keys.forEach(breakpoint => {
+      if (other[breakpoint] != null) {
+        breakpointsValues[breakpoint] = other[breakpoint];
+        delete otherFiltered[breakpoint];
+      }
+    });
 
     const ownerState = _extends({}, props, {
       columns,
       container,
       direction,
       item,
-      lg,
-      md,
-      sm,
       rowSpacing,
       columnSpacing,
       wrap,
-      xl,
-      xs,
-      zeroMinWidth
+      zeroMinWidth,
+      spacing
+    }, breakpointsValues, {
+      breakpoints: breakpoints.keys
     });
 
     const classes = useUtilityClasses$_(ownerState);
@@ -31289,7 +31729,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         className: clsx(classes.root, className),
         as: component,
         ref: ref
-      }, other))
+      }, otherFiltered))
     });
   });
   Grid.propTypes
@@ -31478,10 +31918,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   /*
    TODO v6: remove
    Conditionally apply a workaround for the CSS transition bug in Safari 15.4 / WebKit browsers.
-   Remove this workaround once the WebKit bug fix is released.
    */
 
-  const isWebKit154 = typeof navigator !== 'undefined' && /^((?!chrome|android).)*(safari|mobile)/i.test(navigator.userAgent) && /(os |version\/)15(.|_)[4-9]/i.test(navigator.userAgent);
+  const isWebKit154 = typeof navigator !== 'undefined' && /^((?!chrome|android).)*(safari|mobile)/i.test(navigator.userAgent) && /(os |version\/)15(.|_)4/i.test(navigator.userAgent);
   /**
    * The Grow transition is used by the [Tooltip](/material-ui/react-tooltip/) and
    * [Popover](/material-ui/react-popover/) components.
@@ -31963,7 +32402,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       WithWidth.displayName = `WithWidth(${getDisplayName(Component)})`;
     }
 
-    hoistNonReactStatics_cjs(WithWidth, Component);
     return WithWidth;
   };
 
@@ -33250,7 +33688,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({
@@ -34046,6 +34484,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);
   };
 
@@ -34138,7 +34580,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' && {
@@ -34171,7 +34613,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' && {
@@ -34331,7 +34773,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const linkClasses = generateUtilityClasses('MuiLink', ['root', 'underlineNone', 'underlineHover', 'underlineAlways', 'button', 'focusVisible']);
   var linkClasses$1 = linkClasses;
 
-  const _excluded$10 = ["className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant", "sx"];
   const colorTransformations = {
     primary: 'primary.main',
     textPrimary: 'text.primary',
@@ -34344,6 +34785,25 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return colorTransformations[color] || color;
   };
 
+  const getTextDecoration = ({
+    theme,
+    ownerState
+  }) => {
+    const transformedColor = transformDeprecatedColors(ownerState.color);
+    const color = getPath(theme, `palette.${transformedColor}`, false) || ownerState.color;
+    const channelColor = getPath(theme, `palette.${transformedColor}Channel`);
+
+    if ('vars' in theme && channelColor) {
+      return `rgba(${channelColor} / 0.4)`;
+    }
+
+    return alpha(color, 0.4);
+  };
+
+  var getTextDecoration$1 = getTextDecoration;
+
+  const _excluded$10 = ["className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant", "sx"];
+
   const useUtilityClasses$Q = ownerState => {
     const {
       classes,
@@ -34370,7 +34830,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme,
     ownerState
   }) => {
-    const color = getPath(theme, `palette.${transformDeprecatedColors(ownerState.color)}`) || ownerState.color;
     return _extends({}, ownerState.underline === 'none' && {
       textDecoration: 'none'
     }, ownerState.underline === 'hover' && {
@@ -34378,13 +34837,18 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       '&:hover': {
         textDecoration: 'underline'
       }
-    }, ownerState.underline === 'always' && {
-      textDecoration: 'underline',
-      textDecorationColor: color !== 'inherit' ? alpha(color, 0.4) : undefined,
+    }, ownerState.underline === 'always' && _extends({
+      textDecoration: 'underline'
+    }, ownerState.color !== 'inherit' && {
+      textDecorationColor: getTextDecoration$1({
+        theme,
+        ownerState
+      })
+    }, {
       '&:hover': {
         textDecorationColor: 'inherit'
       }
-    }, ownerState.component === 'button' && {
+    }), ownerState.component === 'button' && {
       position: 'relative',
       WebkitTapHighlightColor: 'transparent',
       backgroundColor: 'transparent',
@@ -37907,25 +38371,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
@@ -37943,9 +38407,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',
@@ -37954,13 +38421,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 && {
@@ -37996,12 +38475,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", '*']
@@ -41289,7 +41783,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,
@@ -41328,7 +41822,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 */
@@ -41337,7 +41836,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,
@@ -41464,7 +41963,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,
@@ -41499,7 +41998,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}`]: {
@@ -41590,8 +42089,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
@@ -41649,7 +42148,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'
     }),
@@ -41665,13 +42164,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': {
@@ -41713,9 +42212,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',
@@ -41784,7 +42283,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
@@ -41810,7 +42309,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' && {
@@ -41826,7 +42325,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 */
@@ -42002,22 +42501,24 @@ 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({
           Root: PropTypes.elementType
         }),
+        open: PropTypes.bool,
         style: PropTypes.object,
-        value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
+        value: PropTypes.number,
         valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on'])
-      })
+      })])
     }),
 
     /**
@@ -42218,13 +42719,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.text.primary : 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',
@@ -42361,16 +42862,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme,
     ownerState
   }) => {
-    const center = _extends({}, !ownerState.isRtl && {
+    const center = {
       left: '50%',
       right: 'auto',
       transform: 'translateX(-50%)'
-    }, ownerState.isRtl && {
-      right: '50%',
-      left: 'auto',
-      transform: 'translateX(50%)'
-    });
-
+    };
     return _extends({
       zIndex: (theme.vars || theme).zIndex.snackbar,
       position: 'fixed',
@@ -42392,19 +42888,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         top: 24
       } : {
         bottom: 24
-      }, ownerState.anchorOrigin.horizontal === 'center' && center, ownerState.anchorOrigin.horizontal === 'left' && _extends({}, !ownerState.isRtl && {
+      }, ownerState.anchorOrigin.horizontal === 'center' && center, ownerState.anchorOrigin.horizontal === 'left' && {
         left: 24,
         right: 'auto'
-      }, ownerState.isRtl && {
-        right: 24,
-        left: 'auto'
-      }), ownerState.anchorOrigin.horizontal === 'right' && _extends({}, !ownerState.isRtl && {
+      }, ownerState.anchorOrigin.horizontal === 'right' && {
         right: 24,
         left: 'auto'
-      }, ownerState.isRtl && {
-        left: 24,
-        right: 'auto'
-      }))
+      })
     });
   });
   const Snackbar = /*#__PURE__*/React__namespace.forwardRef(function Snackbar(inProps, ref) {
@@ -42451,14 +42941,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$z),
           other = _objectWithoutPropertiesLoose(props, _excluded2$2);
 
-    const isRtl = theme.direction === 'rtl';
-
     const ownerState = _extends({}, props, {
       anchorOrigin: {
         vertical,
         horizontal
-      },
-      isRtl
+      }
     });
 
     const classes = useUtilityClasses$s(ownerState);
@@ -43659,7 +44146,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,
@@ -44403,10 +44890,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
@@ -44459,10 +44946,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'
   }));
@@ -44820,7 +45307,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     if (ownerState.spacing) {
       const transformer = createUnarySpacing(theme);
       const base = Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
-        if (ownerState.spacing[breakpoint] != null || ownerState.direction[breakpoint] != null) {
+        if (typeof ownerState.spacing === 'object' && ownerState.spacing[breakpoint] != null || typeof ownerState.direction === 'object' && ownerState.direction[breakpoint] != null) {
           acc[breakpoint] = true;
         }
 
@@ -45263,8 +45750,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         })), /*#__PURE__*/jsxRuntime_1(StepIconText, {
           className: classes.text,
           x: "12",
-          y: "16",
+          y: "12",
           textAnchor: "middle",
+          dominantBaseline: "central",
           ownerState: ownerState,
           children: icon
         })]
@@ -45749,17 +46237,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,
@@ -45864,7 +46355,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'
   }));
@@ -46918,7 +47409,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
     }),
@@ -46926,13 +47417,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%',
@@ -46943,7 +47434,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'
@@ -46951,19 +47442,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', {
@@ -46980,8 +47471,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',
@@ -46990,7 +47481,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,
@@ -47743,18 +48234,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' && {
@@ -47786,7 +48277,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
@@ -49833,6 +50324,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         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;
         }
 
@@ -49942,8 +50439,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);
@@ -51520,6 +52025,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.getMobileStepperUtilityClass = getMobileStepperUtilityClass;
   exports.getModalUtilityClass = getModalUtilityClass;
   exports.getNativeSelectUtilityClasses = getNativeSelectUtilityClasses;
+  exports.getOffsetLeft = getOffsetLeft;
+  exports.getOffsetTop = getOffsetTop;
   exports.getOutlinedInputUtilityClass = getOutlinedInputUtilityClass;
   exports.getPaginationItemUtilityClass = getPaginationItemUtilityClass;
   exports.getPaginationUtilityClass = getPaginationUtilityClass;