@mui/material 5.8.0 → 5.8.3

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.8.0
+/** @license MUI v5.8.3
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -5771,13 +5771,13 @@
     }, {});
   }
 
-  function getPath(obj, path) {
+  function getPath(obj, path, checkVars = true) {
     if (!path || typeof path !== 'string') {
       return null;
     } // Check if CSS variables are used
 
 
-    if (obj && obj.vars) {
+    if (obj && obj.vars && checkVars) {
       const val = `vars.${path}`.split('.').reduce((acc, item) => acc && acc[item] ? acc[item] : null, obj);
 
       if (val != null) {
@@ -5932,7 +5932,7 @@
   function createUnaryUnit(theme, themeKey, defaultValue, propName) {
     var _getPath;
 
-    const themeSpacing = (_getPath = getPath(theme, themeKey)) != null ? _getPath : defaultValue;
+    const themeSpacing = (_getPath = getPath(theme, themeKey, false)) != null ? _getPath : defaultValue;
 
     if (typeof themeSpacing === 'number') {
       return abs => {
@@ -7711,9 +7711,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,
@@ -8010,6 +8010,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   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 +8042,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,
@@ -8109,9 +8112,11 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         colorSchemes,
         prefix,
         vars: rootVars,
-        getCssVar: createGetCssVar(prefix)
+        getCssVar: createGetCssVar(prefix),
+        getColorSchemeSelector: targetColorScheme => `[${attribute}="${targetColorScheme}"] &`
       });
-      const styleSheet = {};
+      const defaultColorSchemeStyleSheet = {};
+      const otherColorSchemesStyleSheet = {};
       Object.entries(colorSchemes).forEach(([key, scheme]) => {
         const {
           css,
@@ -8147,9 +8152,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         })();
 
         if (key === resolvedDefaultColorScheme) {
-          styleSheet[colorSchemeSelector] = css;
+          defaultColorSchemeStyleSheet[colorSchemeSelector] = css;
         } else {
-          styleSheet[`${colorSchemeSelector === ':root' ? '' : colorSchemeSelector}[${attribute}="${key}"]`] = css;
+          otherColorSchemesStyleSheet[`${colorSchemeSelector === ':root' ? '' : colorSchemeSelector}[${attribute}="${key}"]`] = css;
         }
       });
       React__namespace.useEffect(() => {
@@ -8216,7 +8221,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
             [colorSchemeSelector]: rootCss
           }
         }), /*#__PURE__*/jsxRuntime_1(GlobalStyles$1, {
-          styles: styleSheet
+          styles: defaultColorSchemeStyleSheet
+        }), /*#__PURE__*/jsxRuntime_1(GlobalStyles$1, {
+          styles: otherColorSchemesStyleSheet
         }), /*#__PURE__*/jsxRuntime_1(ThemeProvider, {
           theme: resolveTheme ? resolveTheme(theme) : theme,
           children: children
@@ -8296,10 +8303,17 @@ 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
     };
   }
 
@@ -8860,7 +8874,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       if (reason === 'keyboard') {
         option.classList.add('Mui-focusVisible');
       } // Scroll active descendant into view.
-      // Logic copied from https://www.w3.org/TR/wai-aria-practices/examples/listbox/js/listbox.js
+      // Logic copied from https://www.w3.org/WAI/ARIA/apg/example-index/combobox/js/select-only.js
       //
       // Consider this API instead once it has a better browser support:
       // .scrollIntoView({ scrollMode: 'if-needed', block: 'nearest' });
@@ -9588,13 +9602,13 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     };
   }
 
-  function useBadge(props) {
+  function useBadge(parameters) {
     const {
       badgeContent: badgeContentProp,
       invisible: invisibleProp = false,
       max: maxProp = 99,
       showZero = false
-    } = props;
+    } = parameters;
     const prevProps = usePreviousProps$1({
       badgeContent: badgeContentProp,
       max: maxProp
@@ -9608,7 +9622,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const {
       badgeContent,
       max = maxProp
-    } = invisible ? prevProps : props;
+    } = invisible ? prevProps : parameters;
     const displayValue = badgeContent && Number(badgeContent) > max ? `${max}+` : badgeContent;
     return {
       badgeContent,
@@ -9635,8 +9649,21 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     };
     return composeClasses(slots, getBadgeUnstyledUtilityClass, undefined);
   };
+  /**
+   *
+   * Demos:
+   *
+   * - [Badge](https://mui.com/base/react-badge/)
+   *
+   * API:
+   *
+   * - [BadgeUnstyled API](https://mui.com/base/api/badge-unstyled/)
+   */
+
 
   const BadgeUnstyled = /*#__PURE__*/React__namespace.forwardRef(function BadgeUnstyled(props, ref) {
+    var _componentsProps$root, _componentsProps$badg;
+
     const {
       component,
       children,
@@ -9666,15 +9693,16 @@ 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), ownerState);
+    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 Badge = components.Badge || 'span';
-    const badgeProps = appendOwnerState(Badge, componentsProps.badge, ownerState);
+    const badgeProps = appendOwnerState(Badge, _extends({}, componentsProps.badge, {
+      className: clsx(classes.badge, (_componentsProps$badg = componentsProps.badge) == null ? void 0 : _componentsProps$badg.className)
+    }), ownerState);
     return /*#__PURE__*/jsxRuntime_2(Root, _extends({}, rootProps, {
-      ref: ref
-    }, other, {
-      className: clsx(classes.root, rootProps.className, className),
       children: [children, /*#__PURE__*/jsxRuntime_1(Badge, _extends({}, badgeProps, {
-        className: clsx(classes.badge, badgeProps.className),
         children: displayValue
       }))]
     }));
@@ -9684,7 +9712,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
   = {
     // ----------------------------- Warning --------------------------------
     // | These PropTypes are generated from the TypeScript type definitions |
-    // |     To update them edit the d.ts file and run "yarn proptypes"     |
+    // |     To update them edit TypeScript types and run "yarn proptypes"  |
     // ----------------------------------------------------------------------
 
     /**
@@ -13607,13 +13635,13 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return cachedSupportsTouchActionNone;
   }
 
-  function useSlider(props) {
+  function useSlider(parameters) {
     const {
-      ref,
       'aria-labelledby': ariaLabelledby,
       defaultValue,
-      disableSwap = false,
       disabled = false,
+      disableSwap = false,
+      isRtl = false,
       marks: marksProp = false,
       max = 100,
       min = 0,
@@ -13621,12 +13649,12 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       onChange,
       onChangeCommitted,
       orientation = 'horizontal',
+      ref,
       scale = Identity$1,
       step = 1,
       tabIndex,
-      value: valueProp,
-      isRtl = false
-    } = props;
+      value: valueProp
+    } = parameters;
     const touchId = React__namespace.useRef(); // We can't use the :active browser pseudo-classes.
     // - The active state isn't triggered when clicking on the rail.
     // - The active state isn't transferred when inversing a range slider.
@@ -13909,6 +13937,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         newValue
       } = getFingerNewValue({
         finger,
+        move: true,
         values
       });
       setActive(-1);
@@ -14048,7 +14077,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const trackOffset = valueToPercent(range ? values[0] : min, min, max);
     const trackLeap = valueToPercent(values[values.length - 1], min, max) - trackOffset;
 
-    const getRootProps = otherHandlers => {
+    const getRootProps = (otherHandlers = {}) => {
       const ownEventHandlers = {
         onMouseDown: createHandleMouseDown(otherHandlers || {})
       };
@@ -14075,7 +14104,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       setOpen(-1);
     };
 
-    const getThumbProps = otherHandlers => {
+    const getThumbProps = (otherHandlers = {}) => {
       const ownEventHandlers = {
         onMouseOver: createHandleMouseOver(otherHandlers || {}),
         onMouseLeave: createHandleMouseLeave(otherHandlers || {})
@@ -14086,7 +14115,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       return _extends({}, mergedEventHandlers);
     };
 
-    const getHiddenInputProps = otherHandlers => {
+    const getHiddenInputProps = (otherHandlers = {}) => {
       const ownEventHandlers = {
         onChange: createHandleHiddenInputChange(otherHandlers || {}),
         onFocus: createHandleHiddenInputFocus(otherHandlers || {}),
@@ -14103,9 +14132,9 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         'aria-valuemin': scale(min),
         name,
         type: 'range',
-        min: props.min,
-        max: props.max,
-        step: props.step,
+        min: parameters.min,
+        max: parameters.max,
+        step: parameters.step,
         disabled
       }, mergedEventHandlers, {
         style: _extends({}, visuallyHidden$1, {
@@ -14118,20 +14147,20 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     };
 
     return {
+      active,
       axis,
       axisProps,
-      getRootProps,
+      dragging,
+      focusVisible,
       getHiddenInputProps,
+      getRootProps,
       getThumbProps,
-      dragging,
       marks,
-      values,
-      active,
-      focusVisible,
       open,
       range,
+      trackLeap,
       trackOffset,
-      trackLeap
+      values
     };
   }
 
@@ -14201,7 +14230,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
 
     const ownerState = _extends({}, props, {
-      mark: marksProp,
+      marks: marksProp,
       classes: classesProp,
       disabled,
       isRtl,
@@ -14265,7 +14294,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       })), /*#__PURE__*/jsxRuntime_1(Track, _extends({}, trackProps, {
         className: clsx(classes.track, trackProps.className),
         style: _extends({}, trackStyle, trackProps.style)
-      })), marks.map((mark, index) => {
+      })), marks.filter(mark => mark.value >= min && mark.value <= max).map((mark, index) => {
         const percent = valueToPercent(mark.value, min, max);
         const style = axisProps[axis].offset(percent);
         let markActive;
@@ -14312,10 +14341,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
             children: /*#__PURE__*/jsxRuntime_1(Thumb, _extends({
               "data-index": index
             }, thumbProps, getThumbProps(), {
-              className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusVisible === index && classes.focusVisible)
-            }, !isHostComponent(Thumb) && {
-              ownerState: _extends({}, ownerState, thumbProps.ownerState)
-            }, {
+              className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusVisible === index && classes.focusVisible),
               style: _extends({}, style, {
                 pointerEvents: disableSwap && active !== index ? 'none' : undefined
               }, thumbProps.style),
@@ -14814,8 +14840,10 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return _extends({
       toolbar: {
         minHeight: 56,
-        [`${breakpoints.up('xs')} and (orientation: landscape)`]: {
-          minHeight: 48
+        [breakpoints.up('xs')]: {
+          '@media (orientation: landscape)': {
+            minHeight: 48
+          }
         },
         [breakpoints.up('sm')]: {
           minHeight: 64
@@ -15690,15 +15718,194 @@ You have to import it from @mui/styles.
 See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }
 
-  const _excluded$23 = ["colorSchemes"],
+  function getPaperUtilityClass(slot) {
+    return generateUtilityClass('MuiPaper', slot);
+  }
+  const paperClasses = generateUtilityClasses('MuiPaper', ['root', 'rounded', 'outlined', 'elevation', 'elevation0', 'elevation1', 'elevation2', 'elevation3', 'elevation4', 'elevation5', 'elevation6', 'elevation7', 'elevation8', 'elevation9', 'elevation10', 'elevation11', 'elevation12', 'elevation13', 'elevation14', 'elevation15', 'elevation16', 'elevation17', 'elevation18', 'elevation19', 'elevation20', 'elevation21', 'elevation22', 'elevation23', 'elevation24']);
+  var paperClasses$1 = paperClasses;
+
+  const _excluded$23 = ["className", "component", "elevation", "square", "variant"];
+  const getOverlayAlpha = elevation => {
+    let alphaValue;
+
+    if (elevation < 1) {
+      alphaValue = 5.11916 * elevation ** 2;
+    } else {
+      alphaValue = 4.5 * Math.log(elevation + 1) + 2;
+    }
+
+    return (alphaValue / 100).toFixed(2);
+  };
+
+  const useUtilityClasses$1L = ownerState => {
+    const {
+      square,
+      elevation,
+      variant,
+      classes
+    } = ownerState;
+    const slots = {
+      root: ['root', variant, !square && 'rounded', variant === 'elevation' && `elevation${elevation}`]
+    };
+    return composeClasses(slots, getPaperUtilityClass, classes);
+  };
+
+  const PaperRoot = styled$1('div', {
+    name: 'MuiPaper',
+    slot: 'Root',
+    overridesResolver: (props, styles) => {
+      const {
+        ownerState
+      } = props;
+      return [styles.root, styles[ownerState.variant], !ownerState.square && styles.rounded, ownerState.variant === 'elevation' && styles[`elevation${ownerState.elevation}`]];
+    }
+  })(({
+    theme,
+    ownerState
+  }) => {
+    var _theme$vars$overlays;
+
+    return _extends({
+      backgroundColor: (theme.vars || theme).palette.background.paper,
+      color: (theme.vars || theme).palette.text.primary,
+      transition: theme.transitions.create('box-shadow')
+    }, !ownerState.square && {
+      borderRadius: theme.shape.borderRadius
+    }, ownerState.variant === 'outlined' && {
+      border: `1px solid ${(theme.vars || theme).palette.divider}`
+    }, ownerState.variant === 'elevation' && _extends({
+      boxShadow: (theme.vars || theme).shadows[ownerState.elevation]
+    }, !theme.vars && theme.palette.mode === 'dark' && {
+      backgroundImage: `linear-gradient(${alpha('#fff', getOverlayAlpha(ownerState.elevation))}, ${alpha('#fff', getOverlayAlpha(ownerState.elevation))})`
+    }, theme.vars && {
+      backgroundImage: (_theme$vars$overlays = theme.vars.overlays) == null ? void 0 : _theme$vars$overlays[ownerState.elevation]
+    }));
+  });
+  const Paper = /*#__PURE__*/React__namespace.forwardRef(function Paper(inProps, ref) {
+    const props = useThemeProps({
+      props: inProps,
+      name: 'MuiPaper'
+    });
+
+    const {
+      className,
+      component = 'div',
+      elevation = 1,
+      square = false,
+      variant = 'elevation'
+    } = props,
+          other = _objectWithoutPropertiesLoose(props, _excluded$23);
+
+    const ownerState = _extends({}, props, {
+      component,
+      elevation,
+      square,
+      variant
+    });
+
+    const classes = useUtilityClasses$1L(ownerState);
+
+    {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const theme = useTheme();
+
+      if (theme.shadows[elevation] === undefined) {
+        console.error([`MUI: The elevation provided <Paper elevation={${elevation}}> is not available in the theme.`, `Please make sure that \`theme.shadows[${elevation}]\` is defined.`].join('\n'));
+      }
+    }
+
+    return /*#__PURE__*/jsxRuntime_1(PaperRoot, _extends({
+      as: component,
+      ownerState: ownerState,
+      className: clsx(classes.root, className),
+      ref: ref
+    }, other));
+  });
+  Paper.propTypes
+  /* remove-proptypes */
+  = {
+    // ----------------------------- Warning --------------------------------
+    // | These PropTypes are generated from the TypeScript type definitions |
+    // |     To update them edit the d.ts file and run "yarn proptypes"     |
+    // ----------------------------------------------------------------------
+
+    /**
+     * The content of the component.
+     */
+    children: PropTypes.node,
+
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes: PropTypes.object,
+
+    /**
+     * @ignore
+     */
+    className: PropTypes.string,
+
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    component: PropTypes.elementType,
+
+    /**
+     * Shadow depth, corresponds to `dp` in the spec.
+     * It accepts values between 0 and 24 inclusive.
+     * @default 1
+     */
+    elevation: chainPropTypes(integerPropType, props => {
+      const {
+        elevation,
+        variant
+      } = props;
+
+      if (elevation > 0 && variant === 'outlined') {
+        return new Error(`MUI: Combining \`elevation={${elevation}}\` with \`variant="${variant}"\` has no effect. Either use \`elevation={0}\` or use a different \`variant\`.`);
+      }
+
+      return null;
+    }),
+
+    /**
+     * If `true`, rounded corners are disabled.
+     * @default false
+     */
+    square: PropTypes.bool,
+
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+
+    /**
+     * The variant to use.
+     * @default 'elevation'
+     */
+    variant: PropTypes
+    /* @typescript-to-proptypes-ignore */
+    .oneOfType([PropTypes.oneOf(['elevation', 'outlined']), PropTypes.string])
+  } ;
+  var Paper$1 = Paper;
+
+  const _excluded$22 = ["colorSchemes"],
         _excluded2$9 = ["palette"];
+  const defaultDarkOverlays = [...Array(25)].map((_, index) => {
+    if (index === 0) {
+      return undefined;
+    }
+
+    const overlay = getOverlayAlpha(index);
+    return `linear-gradient(rgba(255 255 255 / ${overlay}), rgba(255 255 255 / ${overlay}))`;
+  });
   function extendTheme(options = {}, ...args) {
-    var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$da2;
+    var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$li3, _colorSchemesInput$da2, _colorSchemesInput$da3;
 
     const {
       colorSchemes: colorSchemesInput = {}
     } = options,
-          input = _objectWithoutPropertiesLoose(options, _excluded$23);
+          input = _objectWithoutPropertiesLoose(options, _excluded$22);
 
     const _createThemeWithoutVa = createTheme(_extends({}, input, colorSchemesInput.light && {
       palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
@@ -15723,14 +15930,16 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           opacity: _extends({
             placeholder: 0.42,
             inputTouchBottomLine: 0.42
-          }, (_colorSchemesInput$li2 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li2.opacity)
+          }, (_colorSchemesInput$li2 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li2.opacity),
+          overlays: ((_colorSchemesInput$li3 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li3.overlays) || []
         }),
         dark: _extends({}, colorSchemesInput.dark, {
           palette: darkPalette,
           opacity: _extends({
             placeholder: 0.5,
             inputTouchBottomLine: 0.7
-          }, (_colorSchemesInput$da2 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da2.opacity)
+          }, (_colorSchemesInput$da2 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da2.opacity),
+          overlays: ((_colorSchemesInput$da3 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da3.overlays) || defaultDarkOverlays
         })
       })
     });
@@ -15781,6 +15990,11 @@ 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
+
+
+        if (colors.active) {
+          palette[color].activeChannel = colorChannel(colors.active);
         }
       });
     });
@@ -15795,6 +16009,9 @@ 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'
@@ -15816,9 +16033,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const svgIconClasses = generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
   var svgIconClasses$1 = svgIconClasses;
 
-  const _excluded$22 = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
+  const _excluded$21 = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
 
-  const useUtilityClasses$1L = ownerState => {
+  const useUtilityClasses$1K = ownerState => {
     const {
       color,
       fontSize,
@@ -15886,7 +16103,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       titleAccess,
       viewBox = '0 0 24 24'
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$22);
+          other = _objectWithoutPropertiesLoose(props, _excluded$21);
 
     const ownerState = _extends({}, props, {
       color,
@@ -15903,7 +16120,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       more.viewBox = viewBox;
     }
 
-    const classes = useUtilityClasses$1L(ownerState);
+    const classes = useUtilityClasses$1K(ownerState);
     return /*#__PURE__*/jsxRuntime_2(SvgIconRoot, _extends({
       as: component,
       className: clsx(classes.root, className),
@@ -17038,9 +17255,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const collapseClasses = generateUtilityClasses('MuiCollapse', ['root', 'horizontal', 'vertical', 'entered', 'hidden', 'wrapper', 'wrapperInner']);
   var collapseClasses$1 = collapseClasses;
 
-  const _excluded$21 = ["addEndListener", "children", "className", "collapsedSize", "component", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "orientation", "style", "timeout", "TransitionComponent"];
+  const _excluded$20 = ["addEndListener", "children", "className", "collapsedSize", "component", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "orientation", "style", "timeout", "TransitionComponent"];
 
-  const useUtilityClasses$1K = ownerState => {
+  const useUtilityClasses$1J = ownerState => {
     const {
       orientation,
       classes
@@ -17141,14 +17358,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       // eslint-disable-next-line react/prop-types
       TransitionComponent = Transition$1
     } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$21);
+          other = _objectWithoutPropertiesLoose(props, _excluded$20);
 
     const ownerState = _extends({}, props, {
       orientation,
       collapsedSize: collapsedSizeProp
     });
 
-    const classes = useUtilityClasses$1K(ownerState);
+    const classes = useUtilityClasses$1J(ownerState);
     const theme = useTheme();
     const timer = React__namespace.useRef();
     const wrapperRef = React__namespace.useRef(null);
@@ -17442,172 +17659,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   Collapse.muiSupportAuto = true;
   var Collapse$1 = Collapse;
 
-  function getPaperUtilityClass(slot) {
-    return generateUtilityClass('MuiPaper', slot);
-  }
-  const paperClasses = generateUtilityClasses('MuiPaper', ['root', 'rounded', 'outlined', 'elevation', 'elevation0', 'elevation1', 'elevation2', 'elevation3', 'elevation4', 'elevation5', 'elevation6', 'elevation7', 'elevation8', 'elevation9', 'elevation10', 'elevation11', 'elevation12', 'elevation13', 'elevation14', 'elevation15', 'elevation16', 'elevation17', 'elevation18', 'elevation19', 'elevation20', 'elevation21', 'elevation22', 'elevation23', 'elevation24']);
-  var paperClasses$1 = paperClasses;
-
-  const _excluded$20 = ["className", "component", "elevation", "square", "variant"];
-
-  const getOverlayAlpha = elevation => {
-    let alphaValue;
-
-    if (elevation < 1) {
-      alphaValue = 5.11916 * elevation ** 2;
-    } else {
-      alphaValue = 4.5 * Math.log(elevation + 1) + 2;
-    }
-
-    return (alphaValue / 100).toFixed(2);
-  };
-
-  const useUtilityClasses$1J = ownerState => {
-    const {
-      square,
-      elevation,
-      variant,
-      classes
-    } = ownerState;
-    const slots = {
-      root: ['root', variant, !square && 'rounded', variant === 'elevation' && `elevation${elevation}`]
-    };
-    return composeClasses(slots, getPaperUtilityClass, classes);
-  };
-
-  const PaperRoot = styled$1('div', {
-    name: 'MuiPaper',
-    slot: 'Root',
-    overridesResolver: (props, styles) => {
-      const {
-        ownerState
-      } = props;
-      return [styles.root, styles[ownerState.variant], !ownerState.square && styles.rounded, ownerState.variant === 'elevation' && styles[`elevation${ownerState.elevation}`]];
-    }
-  })(({
-    theme,
-    ownerState
-  }) => _extends({
-    backgroundColor: theme.palette.background.paper,
-    color: theme.palette.text.primary,
-    transition: theme.transitions.create('box-shadow')
-  }, !ownerState.square && {
-    borderRadius: theme.shape.borderRadius
-  }, ownerState.variant === 'outlined' && {
-    border: `1px solid ${theme.palette.divider}`
-  }, ownerState.variant === 'elevation' && _extends({
-    boxShadow: theme.shadows[ownerState.elevation]
-  }, theme.palette.mode === 'dark' && {
-    backgroundImage: `linear-gradient(${alpha('#fff', getOverlayAlpha(ownerState.elevation))}, ${alpha('#fff', getOverlayAlpha(ownerState.elevation))})`
-  })));
-  const Paper = /*#__PURE__*/React__namespace.forwardRef(function Paper(inProps, ref) {
-    const props = useThemeProps({
-      props: inProps,
-      name: 'MuiPaper'
-    });
-
-    const {
-      className,
-      component = 'div',
-      elevation = 1,
-      square = false,
-      variant = 'elevation'
-    } = props,
-          other = _objectWithoutPropertiesLoose(props, _excluded$20);
-
-    const ownerState = _extends({}, props, {
-      component,
-      elevation,
-      square,
-      variant
-    });
-
-    const classes = useUtilityClasses$1J(ownerState);
-
-    {
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      const theme = useTheme();
-
-      if (theme.shadows[elevation] === undefined) {
-        console.error([`MUI: The elevation provided <Paper elevation={${elevation}}> is not available in the theme.`, `Please make sure that \`theme.shadows[${elevation}]\` is defined.`].join('\n'));
-      }
-    }
-
-    return /*#__PURE__*/jsxRuntime_1(PaperRoot, _extends({
-      as: component,
-      ownerState: ownerState,
-      className: clsx(classes.root, className),
-      ref: ref
-    }, other));
-  });
-  Paper.propTypes
-  /* remove-proptypes */
-  = {
-    // ----------------------------- Warning --------------------------------
-    // | These PropTypes are generated from the TypeScript type definitions |
-    // |     To update them edit the d.ts file and run "yarn proptypes"     |
-    // ----------------------------------------------------------------------
-
-    /**
-     * The content of the component.
-     */
-    children: PropTypes.node,
-
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes: PropTypes.object,
-
-    /**
-     * @ignore
-     */
-    className: PropTypes.string,
-
-    /**
-     * The component used for the root node.
-     * Either a string to use a HTML element or a component.
-     */
-    component: PropTypes.elementType,
-
-    /**
-     * Shadow depth, corresponds to `dp` in the spec.
-     * It accepts values between 0 and 24 inclusive.
-     * @default 1
-     */
-    elevation: chainPropTypes(integerPropType, props => {
-      const {
-        elevation,
-        variant
-      } = props;
-
-      if (elevation > 0 && variant === 'outlined') {
-        return new Error(`MUI: Combining \`elevation={${elevation}}\` with \`variant="${variant}"\` has no effect. Either use \`elevation={0}\` or use a different \`variant\`.`);
-      }
-
-      return null;
-    }),
-
-    /**
-     * If `true`, rounded corners are disabled.
-     * @default false
-     */
-    square: PropTypes.bool,
-
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-
-    /**
-     * The variant to use.
-     * @default 'elevation'
-     */
-    variant: PropTypes
-    /* @typescript-to-proptypes-ignore */
-    .oneOfType([PropTypes.oneOf(['elevation', 'outlined']), PropTypes.string])
-  } ;
-  var Paper$1 = Paper;
-
   /**
    * @ignore - internal component.
    * @type {React.Context<{} | {expanded: boolean, disabled: boolean, toggle: () => void}>}
@@ -18349,12 +18400,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
       } = options;
 
-      if (event.type === 'mousedown' && ignoringMouseDown.current) {
+      if ((event == null ? void 0 : event.type) === 'mousedown' && ignoringMouseDown.current) {
         ignoringMouseDown.current = false;
         return;
       }
 
-      if (event.type === 'touchstart') {
+      if ((event == null ? void 0 : event.type) === 'touchstart') {
         ignoringMouseDown.current = true;
       }
 
@@ -18370,7 +18421,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       let rippleY;
       let rippleSize;
 
-      if (center || event.clientX === 0 && event.clientY === 0 || !event.clientX && !event.touches) {
+      if (center || event === undefined || event.clientX === 0 && event.clientY === 0 || !event.clientX && !event.touches) {
         rippleX = Math.round(rect.width / 2);
         rippleY = Math.round(rect.height / 2);
       } else {
@@ -18395,7 +18446,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       } // Touche devices
 
 
-      if (event.touches) {
+      if (event != null && event.touches) {
         // check that this isn't another touchstart due to multitouch
         // otherwise we will only clear a single timer when unmounting while two
         // are running
@@ -18438,7 +18489,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       clearTimeout(startTimer.current); // The touch interaction occurs too quickly.
       // We still want to show ripple effect.
 
-      if (event.type === 'touchend' && startTimerCommit.current) {
+      if ((event == null ? void 0 : event.type) === 'touchend' && startTimerCommit.current) {
         startTimerCommit.current();
         startTimerCommit.current = null;
         startTimer.current = setTimeout(() => {
@@ -19548,7 +19599,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',
@@ -19619,6 +19672,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         className: classes.message,
         children: children
       }), action != null ? /*#__PURE__*/jsxRuntime_1(AlertAction, {
+        ownerState: ownerState,
         className: classes.action,
         children: action
       }) : null, action == null && onClose ? /*#__PURE__*/jsxRuntime_1(AlertAction, {
@@ -26566,10 +26620,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'
@@ -26577,10 +26631,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
     }
   }));
 
@@ -29407,7 +29461,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'default'
      */
-    color: PropTypes.oneOf(['default', 'error', 'info', 'inherit', 'primary', 'secondary', 'success', 'warning']),
+    color: PropTypes
+    /* @typescript-to-proptypes-ignore */
+    .oneOfType([PropTypes.oneOf(['default', 'error', 'info', 'inherit', 'primary', 'secondary', 'success', 'warning']), PropTypes.string]),
 
     /**
      * The component used for the root node.
@@ -31419,9 +31475,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       transform: 'none'
     }
   };
-  /**
-   * 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.
+  /*
+   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);
@@ -33885,6 +33942,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     shrink: PropTypes.bool,
 
+    /**
+     * The size of the component.
+     * @default 'normal'
+     */
+    size: PropTypes.oneOf(['normal', 'small']),
+
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
@@ -34797,7 +34860,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       value: childContext,
       children: /*#__PURE__*/jsxRuntime_1(ListItemButtonRoot, _extends({
         ref: handleRef,
-        component: component,
+        href: other.href || other.to,
+        component: (other.href || other.to) && component === 'div' ? 'a' : component,
         focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
         ownerState: ownerState
       }, other, {
@@ -34879,6 +34943,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      */
     focusVisibleClassName: PropTypes.string,
 
+    /**
+     * @ignore
+     */
+    href: PropTypes.string,
+
     /**
      * Use to apply selected styling.
      * @default false
@@ -35845,7 +35914,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return false;
   }
   /**
-   * A permanently displayed menu following https://www.w3.org/TR/wai-aria-practices/#menubutton.
+   * A permanently displayed menu following https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/.
    * It's exposed to help customization of the [`Menu`](/material-ui/api/menu/) component if you
    * use it separately you need to move focus into the component manually. Once
    * the focus is placed inside the component it is fully keyboard accessible.
@@ -39033,9 +39102,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     theme,
     ownerState
   }) => _extends({
-    color: theme.palette.text.secondary,
+    color: (theme.vars || theme).palette.text.secondary,
     '&:hover': {
-      backgroundColor: alpha(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? `rgba(${ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent'
@@ -39043,11 +39112,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }
   }, ownerState.color !== 'default' && {
     [`&.${radioClasses$1.checked}`]: {
-      color: theme.palette[ownerState.color].main
+      color: (theme.vars || theme).palette[ownerState.color].main
     }
   }, {
     [`&.${radioClasses$1.disabled}`]: {
-      color: theme.palette.action.disabled
+      color: (theme.vars || theme).palette.action.disabled
     }
   }));
 
@@ -40439,8 +40508,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     const handleKeyDown = event => {
       if (!readOnly) {
-        const validKeys = [' ', 'ArrowUp', 'ArrowDown', // The native select doesn't respond to enter on MacOS, but it's recommended by
-        // https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html
+        const validKeys = [' ', 'ArrowUp', 'ArrowDown', // The native select doesn't respond to enter on macOS, but it's recommended by
+        // https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
         'Enter'];
 
         if (validKeys.indexOf(event.key) !== -1) {
@@ -41383,11 +41452,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       const {
         ownerState
       } = props;
-      const marks = ownerState.marksProp === true && ownerState.step !== null ? [...Array(Math.floor((ownerState.max - ownerState.min) / ownerState.step) + 1)].map((_, index) => ({
-        value: ownerState.min + ownerState.step * index
-      })) : ownerState.marksProp || [];
-      const marked = marks.length > 0 && marks.some(mark => mark.label);
-      return [styles.root, styles[`color${capitalize(ownerState.color)}`], ownerState.size !== 'medium' && styles[`size${capitalize(ownerState.size)}`], marked && styles.marked, ownerState.orientation === 'vertical' && styles.vertical, ownerState.track === 'inverted' && styles.trackInverted, ownerState.track === false && styles.trackFalse];
+      return [styles.root, styles[`color${capitalize(ownerState.color)}`], ownerState.size !== 'medium' && styles[`size${capitalize(ownerState.size)}`], ownerState.marked && styles.marked, ownerState.orientation === 'vertical' && styles.vertical, ownerState.track === 'inverted' && styles.trackInverted, ownerState.track === false && styles.trackFalse];
     }
   })(({
     theme,
@@ -41645,7 +41710,6 @@ 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',
@@ -41656,20 +41720,34 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     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 */
@@ -49476,7 +49554,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     overflowX: 'hidden',
     width: '100%'
   }, ownerState.hideScrollbar && {
-    // Hide dimensionless scrollbar on MacOS
+    // Hide dimensionless scrollbar on macOS
     scrollbarWidth: 'none',
     // Firefox
     '&::-webkit-scrollbar': {
@@ -49536,7 +49614,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   })({
     overflowX: 'auto',
     overflowY: 'hidden',
-    // Hide dimensionless scrollbar on MacOS
+    // Hide dimensionless scrollbar on macOS
     scrollbarWidth: 'none',
     // Firefox
     '&::-webkit-scrollbar': {