@mui/material 5.8.4 → 5.8.5

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.8.4
+/** @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.
@@ -6455,7 +6455,7 @@
   styleFunctionSx.filterProps = ['sx'];
   var defaultStyleFunctionSx = styleFunctionSx;
 
-  const _excluded$2l = ["sx"];
+  const _excluded$2m = ["sx"];
 
   const splitProps = props => {
     const result = {
@@ -6476,7 +6476,7 @@
     const {
       sx: inSx
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$2l);
+          other = _objectWithoutPropertiesLoose(props, _excluded$2m);
 
     const {
       systemProps,
@@ -6555,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 => ({
@@ -6591,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);
@@ -6683,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 {
@@ -6692,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);
@@ -6814,7 +6814,7 @@
     return useTheme$2(defaultTheme);
   }
 
-  const _excluded$2i = ["className", "component"];
+  const _excluded$2j = ["className", "component"];
   function createBox(options = {}) {
     const {
       defaultTheme,
@@ -6831,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,
@@ -6843,7 +6843,7 @@
     return Box;
   }
 
-  const _excluded$2h = ["variant"];
+  const _excluded$2i = ["variant"];
 
   function isEmpty$2(string) {
     return string.length === 0;
@@ -6859,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 => {
@@ -6872,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"];
 
@@ -6955,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;
@@ -7926,7 +7926,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return getCssVar;
   }
 
-  const _excluded$2f = ["colorSchemes", "components"];
+  const _excluded$2g = ["colorSchemes", "components"];
   const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
   function createCssVarsProvider(options) {
     const {
@@ -7981,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;
@@ -8238,7 +8238,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     };
   }
 
-  const _excluded$2e = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
+  const _excluded$2f = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
   const defaultTheme$4 = createTheme$1();
   const defaultCreateStyledComponent = systemStyled('div', {
     name: 'MuiContainer',
@@ -8340,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,
@@ -8380,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) {
     {
@@ -8395,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: {}
@@ -8485,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) {
@@ -9558,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 {
@@ -9583,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,
@@ -9614,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
@@ -9646,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.
@@ -9672,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])
     }),
 
     /**
@@ -12875,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 {
@@ -12915,11 +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;
+    var _props$ariaHidden, _componentsProps$root;
 
     const {
-      BackdropComponent,
-      BackdropProps,
       children,
       classes: classesProp,
       className,
@@ -12945,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,
@@ -13105,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,
@@ -13143,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.
      */
@@ -13186,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
     }),
 
@@ -13194,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
     }),
 
@@ -14083,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,
@@ -15836,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;
 
@@ -15865,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
         })
@@ -15884,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
 
@@ -15927,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);
@@ -15953,7 +16186,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       light: 'light',
       dark: 'dark'
     },
-    prefix: 'md',
+    prefix: 'mui',
     resolveTheme: theme => {
       const newTheme = _extends({}, theme, {
         typography: createTypography(theme.palette, theme.typography)
@@ -20037,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',
@@ -20062,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,
@@ -20072,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
@@ -20087,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' && {
@@ -20103,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) {
@@ -20552,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,
@@ -20560,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']),
@@ -20577,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}`]: {
@@ -20585,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,
@@ -20604,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' && {
@@ -20616,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
       }
     });
   }, ({
@@ -20655,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
@@ -20698,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
       }
     }
   }));
@@ -21173,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
     }, {
@@ -21186,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
     };
@@ -22963,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',
@@ -24080,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])
     }),
 
     /**
@@ -27219,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 => {
@@ -27272,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',
@@ -27281,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,
@@ -27292,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);
 
@@ -27314,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
@@ -27343,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',
@@ -27357,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,
 
@@ -27376,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
     }),
 
@@ -27390,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
     }),
 
@@ -27613,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)]: {
@@ -27714,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,
@@ -27775,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',
@@ -29489,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
@@ -29539,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
@@ -29558,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'
@@ -29588,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',
@@ -29596,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
@@ -34034,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);
   };
 
@@ -34126,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' && {
@@ -34159,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' && {
@@ -37917,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
@@ -37953,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',
@@ -37964,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 && {
@@ -41299,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,
@@ -41338,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 */
@@ -41347,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,
@@ -41474,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,
@@ -41509,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}`]: {
@@ -41600,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
@@ -41659,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'
     }),
@@ -41675,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': {
@@ -41723,9 +42038,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     transformOrigin: 'bottom center',
     transform: 'translateY(-100%) scale(0)',
     position: 'absolute',
-    backgroundColor: theme.palette.grey[600],
+    backgroundColor: (theme.vars || theme).palette.grey[600],
     borderRadius: 2,
-    color: theme.palette.common.white,
+    color: (theme.vars || theme).palette.common.white,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -41794,7 +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
@@ -41820,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' && {
@@ -41836,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 */
@@ -42230,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',
@@ -43657,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,
@@ -44401,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
@@ -44457,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'
   }));
@@ -45748,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,
@@ -45863,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'
   }));
@@ -46917,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
     }),
@@ -46925,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%',
@@ -46942,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'
@@ -46950,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', {
@@ -46979,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',
@@ -46989,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,
@@ -47742,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' && {
@@ -47785,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
@@ -49823,31 +50141,21 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       scroll(scrollValue);
     };
 
-    const getFirstVisibleTab = tabs => {
-      const containerSize = tabsRef.current[clientSize];
-      const containerStartBound = Math.round(tabsRef.current[scrollStart]);
-      const containerEndBound = Math.round(containerStartBound + containerSize);
-      const offset = vertical ? 'offsetTop' : 'offsetLeft';
-      return tabs.find(tab => {
-        const centerPoint = tab[offset] + tab[clientSize] / 2;
-        return centerPoint >= containerStartBound && centerPoint <= containerEndBound;
-      });
-    };
-
     const getScrollSize = () => {
       const containerSize = tabsRef.current[clientSize];
       let totalSize = 0;
       const children = Array.from(tabListRef.current.children);
-      const firstVisibleTab = getFirstVisibleTab(children);
-
-      if (firstVisibleTab && firstVisibleTab[clientSize] > containerSize) {
-        return firstVisibleTab[clientSize];
-      }
 
       for (let i = 0; i < children.length; i += 1) {
         const tab = children[i];
 
         if (totalSize + tab[clientSize] > containerSize) {
+          // If the first item is longer than the container size, then only scroll
+          // by the container size.
+          if (i === 0) {
+            totalSize = containerSize;
+          }
+
           break;
         }