@mui/material 5.8.0 → 5.8.1

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.8.0
+/** @license MUI v5.8.1
  *
  * 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 => {
@@ -8111,7 +8111,8 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         vars: rootVars,
         getCssVar: createGetCssVar(prefix)
       });
-      const styleSheet = {};
+      const defaultColorSchemeStyleSheet = {};
+      const otherColorSchemesStyleSheet = {};
       Object.entries(colorSchemes).forEach(([key, scheme]) => {
         const {
           css,
@@ -8147,9 +8148,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 +8217,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
@@ -8860,7 +8863,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' });
@@ -13909,6 +13912,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         newValue
       } = getFingerNewValue({
         finger,
+        move: true,
         values
       });
       setActive(-1);
@@ -14201,7 +14205,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 +14269,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;
@@ -14814,8 +14818,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 +15696,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 +15908,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 +15968,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);
         }
       });
     });
@@ -15816,9 +16008,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 +16078,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 +16095,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 +17230,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 +17333,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 +17634,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 +18375,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 +18396,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 +18421,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 +18464,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(() => {
@@ -19619,6 +19645,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, {
@@ -29407,7 +29434,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.
@@ -34797,7 +34826,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 +34909,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 +35880,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 +39068,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 +39078,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 +40474,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 +41418,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,
@@ -49476,7 +49507,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 +49567,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': {