@mui/material 5.8.2 → 5.8.5

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.8.2
+/** @license MUI v5.8.5
  *
  * 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 = '';
@@ -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;
@@ -5762,9 +5681,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 +6389,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 +6455,7 @@
   styleFunctionSx.filterProps = ['sx'];
   var defaultStyleFunctionSx = styleFunctionSx;
 
-  const _excluded$2l = ["sx"];
+  const _excluded$2m = ["sx"];
 
   const splitProps = props => {
     const result = {
@@ -6555,7 +6476,7 @@
     const {
       sx: inSx
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2l);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2m);
 
     const {
       systemProps,
@@ -6634,7 +6555,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 +6591,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 +6683,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 +6692,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 +6814,7 @@
     return useTheme$2(defaultTheme);
   }
 
-  const _excluded$2i = ["className", "component"];
+  const _excluded$2j = ["className", "component"];
   function createBox(options = {}) {
     const {
       defaultTheme,
@@ -6910,7 +6831,7 @@
         className,
         component = 'div'
       } = _extendSxProp,
-            other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$2i);
+            other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$2j);
 
       return /*#__PURE__*/jsxRuntime_1(BoxRoot, _extends({
         as: component,
@@ -6922,7 +6843,7 @@
     return Box;
   }
 
-  const _excluded$2h = ["variant"];
+  const _excluded$2i = ["variant"];
 
   function isEmpty$2(string) {
     return string.length === 0;
@@ -6938,7 +6859,7 @@
     const {
       variant
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2h);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2i);
 
     let classKey = variant || '';
     Object.keys(other).sort().forEach(key => {
@@ -6951,7 +6872,7 @@
     return classKey;
   }
 
-  const _excluded$2g = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
+  const _excluded$2h = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
         _excluded2$c = ["theme"],
         _excluded3$1 = ["theme"];
 
@@ -7034,7 +6955,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 +6984,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
@@ -7122,7 +7043,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
@@ -7243,7 +7164,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 +7216,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 +7227,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
    */
@@ -7711,9 +7632,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     };
   }
 
-  const DEFAULT_MODE_STORAGE_KEY = 'mui-mode';
-  const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'mui-color-scheme';
-  const DEFAULT_ATTRIBUTE = 'data-mui-color-scheme';
+  const DEFAULT_MODE_STORAGE_KEY = 'mode';
+  const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
+  const DEFAULT_ATTRIBUTE = 'data-color-scheme';
   function getInitColorSchemeScript$1(options) {
     const {
       enableSystem = false,
@@ -8005,11 +7926,14 @@ 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 {
       theme: defaultTheme = {},
+      attribute: defaultAttribute = DEFAULT_ATTRIBUTE,
+      modeStorageKey: defaultModeStorageKey = DEFAULT_MODE_STORAGE_KEY,
+      colorSchemeStorageKey: defaultColorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
       defaultMode: desisgnSystemMode = 'light',
       defaultColorScheme: designSystemColorScheme,
       disableTransitionOnChange: designSystemTransitionOnChange = false,
@@ -8039,9 +7963,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       children,
       theme: themeProp = defaultTheme,
       prefix = designSystemPrefix,
-      modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
-      colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
-      attribute = DEFAULT_ATTRIBUTE,
+      modeStorageKey = defaultModeStorageKey,
+      colorSchemeStorageKey = defaultColorSchemeStorageKey,
+      attribute = defaultAttribute,
       defaultMode = desisgnSystemMode,
       defaultColorScheme = designSystemColorScheme,
       disableTransitionOnChange = designSystemTransitionOnChange,
@@ -8057,7 +7981,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;
@@ -8300,14 +8224,21 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
        */
       theme: PropTypes.object
     } ;
+
+    const getInitColorSchemeScript = params => getInitColorSchemeScript$1(_extends({
+      attribute: defaultAttribute,
+      colorSchemeStorageKey: defaultColorSchemeStorageKey,
+      modeStorageKey: defaultModeStorageKey
+    }, params));
+
     return {
       CssVarsProvider,
       useColorScheme,
-      getInitColorSchemeScript: getInitColorSchemeScript$1
+      getInitColorSchemeScript
     };
   }
 
-  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',
@@ -8409,7 +8340,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,
@@ -8449,7 +8380,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) {
     {
@@ -8464,7 +8395,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: {}
@@ -8554,6 +8485,154 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     });
   }
 
+  /**
+   * 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;
+  }
+
+  /**
+   * 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 {};
+    }
+
+    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 props = _extends({}, additionalProps, externalForwardedProps, externalSlotProps, {
+        className: joinedClasses
+      });
+
+      if (joinedClasses.length === 0) {
+        delete props.className;
+      }
+
+      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 props = _extends({}, internalSlotProps, additionalProps, otherPropsWithoutEventHandlers, componentsPropsWithoutEventHandlers, {
+      className: joinedClasses
+    });
+
+    if (joinedClasses.length === 0) {
+      delete props.className;
+    }
+
+    return {
+      props,
+      internalRef: internalSlotProps.ref
+    };
+  }
+
+  /**
+   * 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;
+  }
+
+  const _excluded$2d = ["elementType", "externalSlotProps", "ownerState"];
+
+  /**
+   * Builds the props to be passed into the slot of an unstyled component.
+   * It merges the internal props of the component with the ones supplied by the user, allowing to customize the behavior.
+   * If the slot component is not a host component, it also merges in the `ownerState`.
+   *
+   * @param parameters.getSlotProps - A function that returns the props to be passed to the slot component.
+   */
+  function useSlotProps(parameters) {
+    var _parameters$additiona;
+
+    const {
+      elementType,
+      externalSlotProps,
+      ownerState
+    } = parameters,
+          rest = _objectWithoutPropertiesLoose(parameters, _excluded$2d);
+
+    const resolvedComponentsProps = resolveComponentProps(externalSlotProps, ownerState);
+    const merged = mergeSlotProps(_extends({}, rest, {
+      externalSlotProps: resolvedComponentsProps
+    }));
+    const props = appendOwnerState(elementType, _extends({}, merged.props, {
+      ref: useForkRef(merged.internalRef, useForkRef(resolvedComponentsProps == null ? void 0 : resolvedComponentsProps.ref, (_parameters$additiona = parameters.additionalProps) == null ? void 0 : _parameters$additiona.ref))
+    }), ownerState);
+    return props;
+  }
+
   // Give up on IE11 support for this feature
 
   function stripDiacritics(string) {
@@ -9627,7 +9706,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 {
@@ -9652,12 +9731,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,
@@ -9683,14 +9759,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
@@ -9715,11 +9800,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.
@@ -9741,8 +9821,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])
     }),
 
     /**
@@ -12368,11 +12448,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);
       }
     });
@@ -12524,7 +12616,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) {
@@ -12544,7 +12636,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);
@@ -12932,7 +13024,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 {
@@ -12972,9 +13064,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,
@@ -13000,7 +13092,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       open,
 
       /* eslint-disable react/prop-types */
-      theme,
       onTransitionEnter,
       onTransitionExited
     } = props,
@@ -13012,6 +13103,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);
 
@@ -13048,12 +13140,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();
@@ -13159,26 +13251,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,
@@ -13197,16 +13288,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.
      */
@@ -13240,6 +13321,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
      * @default {}
      */
     components: PropTypes.shape({
+      Backdrop: PropTypes.elementType,
       Root: PropTypes.elementType
     }),
 
@@ -13248,6 +13330,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
      * @default {}
      */
     componentsProps: PropTypes.shape({
+      backdrop: PropTypes.object,
       root: PropTypes.object
     }),
 
@@ -13450,7 +13533,6 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       })]
     }));
   }
-
   SliderValueLabelUnstyled.propTypes = {
     children: PropTypes.element.isRequired,
     className: PropTypes.string,
@@ -14138,14 +14220,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
     return {
       active,
-      axis,
+      axis: axis,
       axisProps,
       dragging,
       focusVisible,
       getHiddenInputProps,
       getRootProps,
       getThumbProps,
-      marks,
+      marks: marks,
       open,
       range,
       trackLeap,
@@ -14441,12 +14523,14 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       thumb: PropTypes.object,
       track: PropTypes.object,
       valueLabel: 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'])
       })
     }),
@@ -15889,6 +15973,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;
 
@@ -15918,16 +16015,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,
+            inputTouchBottomLine: 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,
+            inputTouchBottomLine: 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
         })
@@ -15937,23 +16038,98 @@ 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, ['AppBar', 'Avatar', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
+
+      if (key === '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.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
 
@@ -15980,12 +16156,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);
@@ -15999,11 +16179,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     getInitColorSchemeScript
   } = createCssVarsProvider({
     theme: defaultTheme$1,
+    attribute: 'data-mui-color-scheme',
+    modeStorageKey: 'mui-mode',
+    colorSchemeStorageKey: 'mui-color-scheme',
     defaultColorScheme: {
       light: 'light',
       dark: 'dark'
     },
-    prefix: 'md',
+    prefix: 'mui',
     resolveTheme: theme => {
       const newTheme = _extends({}, theme, {
         typography: createTypography(theme.palette, theme.typography)
@@ -19586,7 +19769,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     slot: 'Message',
     overridesResolver: (props, styles) => styles.message
   })({
-    padding: '8px 0'
+    padding: '8px 0',
+    minWidth: 0,
+    overflow: 'auto'
   });
   const AlertAction = styled$1('div', {
     name: 'MuiAlert',
@@ -20085,7 +20270,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',
@@ -20110,7 +20299,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,
@@ -20120,14 +20309,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
@@ -20135,7 +20324,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' && {
@@ -20151,6 +20340,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) {
@@ -20600,6 +20802,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,
@@ -20608,8 +20811,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']),
@@ -20625,7 +20828,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}`]: {
@@ -20633,16 +20836,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,
@@ -20652,7 +20855,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' && {
@@ -20664,35 +20867,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
       }
     });
   }, ({
@@ -20703,29 +20906,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
@@ -20746,18 +20949,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
       }
     }
   }));
@@ -21221,7 +21424,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
     }, {
@@ -21234,7 +21437,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
     };
@@ -23011,13 +23214,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',
@@ -24128,8 +24334,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])
     }),
 
     /**
@@ -24812,7 +25018,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;
 
   /**
@@ -26605,10 +26811,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme,
     ownerState
   }) => _extends({
-    color: theme.palette.text.secondary
+    color: (theme.vars || theme).palette.text.secondary
   }, !ownerState.disableRipple && {
     '&:hover': {
-      backgroundColor: alpha(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? `rgba(${ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent'
@@ -26616,10 +26822,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }
   }, ownerState.color !== 'default' && {
     [`&.${checkboxClasses$1.checked}, &.${checkboxClasses$1.indeterminate}`]: {
-      color: theme.palette[ownerState.color].main
+      color: (theme.vars || theme).palette[ownerState.color].main
     },
     [`&.${checkboxClasses$1.disabled}`]: {
-      color: theme.palette.action.disabled
+      color: (theme.vars || theme).palette.action.disabled
     }
   }));
 
@@ -27267,7 +27473,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 => {
@@ -27320,7 +27526,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',
@@ -27329,8 +27535,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,
@@ -27340,7 +27548,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);
 
@@ -27362,16 +27572,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
@@ -27391,6 +27604,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',
@@ -27405,6 +27619,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,
 
@@ -27424,12 +27639,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
     }),
 
@@ -27438,6 +27660,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * @default {}
      */
     componentsProps: PropTypes.shape({
+      backdrop: PropTypes.object,
       root: PropTypes.object
     }),
 
@@ -27661,7 +27884,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)]: {
@@ -27762,12 +27985,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,
@@ -27823,6 +28050,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',
@@ -29537,36 +29765,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
@@ -29587,12 +29817,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.inputTouchBottomLine})` : bottomLineColor}`,
         left: 0,
         bottom: 0,
         // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
@@ -29606,7 +29836,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'
@@ -29636,7 +29866,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',
@@ -29644,6 +29875,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
@@ -30953,7 +31196,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);
@@ -31133,26 +31376,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',
@@ -31164,20 +31408,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
@@ -31195,6 +31452,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 {
@@ -31202,17 +31482,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);
   };
@@ -31222,6 +31512,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 {
@@ -31232,14 +31525,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);
@@ -31249,21 +31537,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);
@@ -31274,7 +31570,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
@@ -31463,10 +31759,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.
@@ -31948,7 +32243,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;
   };
 
@@ -34031,6 +34325,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);
   };
 
@@ -34123,7 +34421,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' && {
@@ -34156,7 +34454,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' && {
@@ -34316,7 +34614,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',
@@ -34329,6 +34626,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,
@@ -34355,7 +34671,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' && {
@@ -34363,13 +34678,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',
@@ -37892,25 +38212,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
@@ -37928,9 +38248,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',
@@ -37939,13 +38262,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 && {
@@ -41274,7 +41609,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,
@@ -41313,7 +41648,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 */
@@ -41322,7 +41662,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,
@@ -41449,7 +41789,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,
@@ -41484,7 +41824,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}`]: {
@@ -41575,8 +41915,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
@@ -41634,7 +41974,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'
     }),
@@ -41650,13 +41990,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': {
@@ -41695,31 +42035,44 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     transition: theme.transitions.create(['transform'], {
       duration: theme.transitions.duration.shortest
     }),
-    top: -10,
     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',
     padding: '0.25rem 0.75rem'
-  }, ownerState.size === 'small' && {
-    fontSize: theme.typography.pxToRem(12),
-    padding: '0.25rem 0.5rem'
-  }, {
+  }, ownerState.orientation === 'horizontal' && {
+    top: '-10px',
     '&:before': {
       position: 'absolute',
       content: '""',
       width: 8,
       height: 8,
+      transform: 'translate(-50%, 50%) rotate(45deg)',
+      backgroundColor: 'inherit',
       bottom: 0,
-      left: '50%',
+      left: '50%'
+    }
+  }, ownerState.orientation === 'vertical' && {
+    right: '30px',
+    top: '25px',
+    '&:before': {
+      position: 'absolute',
+      content: '""',
+      width: 8,
+      height: 8,
       transform: 'translate(-50%, 50%) rotate(45deg)',
-      backgroundColor: 'inherit'
+      backgroundColor: 'inherit',
+      right: '-20%',
+      top: '25%'
     }
+  }, ownerState.size === 'small' && {
+    fontSize: theme.typography.pxToRem(12),
+    padding: '0.25rem 0.5rem'
   }));
   SliderValueLabel.propTypes
   /* remove-proptypes */
@@ -41756,7 +42109,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
@@ -41782,7 +42135,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' && {
@@ -41798,7 +42151,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 */
@@ -41982,12 +42335,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       thumb: PropTypes.object,
       track: PropTypes.object,
       valueLabel: 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'])
       })
     }),
@@ -42190,13 +42545,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',
@@ -42333,16 +42688,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',
@@ -42364,19 +42714,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 && {
+      }, ownerState.anchorOrigin.horizontal === 'right' && {
         right: 24,
         left: 'auto'
-      }), ownerState.anchorOrigin.horizontal === 'right' && _extends({}, !ownerState.isRtl && {
-        right: 24,
-        left: 'auto'
-      }, ownerState.isRtl && {
-        left: 24,
-        right: 'auto'
-      }))
+      })
     });
   });
   const Snackbar = /*#__PURE__*/React__namespace.forwardRef(function Snackbar(inProps, ref) {
@@ -42423,14 +42767,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);
@@ -43631,7 +43972,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,
@@ -44375,10 +44716,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
@@ -44431,10 +44772,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'
   }));
@@ -44792,7 +45133,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;
         }
 
@@ -45235,8 +45576,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
         })]
@@ -45721,17 +46063,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,
@@ -45836,7 +46181,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'
   }));
@@ -46890,7 +47235,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
     }),
@@ -46898,13 +47243,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%',
@@ -46915,7 +47260,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'
@@ -46923,19 +47268,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', {
@@ -46952,8 +47297,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',
@@ -46962,7 +47307,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,
@@ -47715,18 +48060,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' && {
@@ -47758,7 +48103,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
@@ -49805,6 +50150,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;
         }
 
@@ -51492,6 +51843,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;