@mui/material 5.8.0 → 5.8.3

package/legacy/ButtonBase/TouchRipple.js

@@ -133,12 +133,12 @@ var TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps, re
         _options$fakeElement = options.fakeElement,
         fakeElement = _options$fakeElement === void 0 ? false : _options$fakeElement;
 
-    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;
     }
 
@@ -154,7 +154,7 @@ var TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps, re
     var rippleY;
     var 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 {
@@ -179,7 +179,7 @@ var TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps, re
     } // 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
@@ -222,7 +222,7 @@ var TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps, re
     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(function () {

package/legacy/Checkbox/Checkbox.js

@@ -43,19 +43,19 @@ var CheckboxRoot = styled(SwitchBase, {
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
   return _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(".concat(ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette.primary.mainChannel, " / ").concat(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'
       }
     }
   }, ownerState.color !== 'default' && (_ref2 = {}, _defineProperty(_ref2, "&.".concat(checkboxClasses.checked, ", &.").concat(checkboxClasses.indeterminate), {
-    color: theme.palette[ownerState.color].main
+    color: (theme.vars || theme).palette[ownerState.color].main
   }), _defineProperty(_ref2, "&.".concat(checkboxClasses.disabled), {
-    color: theme.palette.action.disabled
+    color: (theme.vars || theme).palette.action.disabled
   }), _ref2));
 });
 

package/legacy/Fab/Fab.js

@@ -183,7 +183,9 @@ process.env.NODE_ENV !== "production" ? Fab.propTypes
    * [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.

package/legacy/Grow/Grow.js

@@ -23,9 +23,10 @@ var styles = {
     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.
  */
 
 var isWebKit154 = typeof navigator !== 'undefined' && /^((?!chrome|android).)*(safari|mobile)/i.test(navigator.userAgent) && /(os |version\/)15(.|_)[4-9]/i.test(navigator.userAgent);

package/legacy/InputLabel/InputLabel.js

@@ -207,6 +207,12 @@ process.env.NODE_ENV !== "production" ? InputLabel.propTypes
    */
   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.
    */

package/legacy/ListItemButton/ListItemButton.js

@@ -151,7 +151,8 @@ var ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inPro
     value: childContext,
     children: /*#__PURE__*/_jsx(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, {
@@ -233,6 +234,11 @@ process.env.NODE_ENV !== "production" ? ListItemButton.propTypes
    */
   focusVisibleClassName: PropTypes.string,
 
+  /**
+   * @ignore
+   */
+  href: PropTypes.string,
+
   /**
    * Use to apply selected styling.
    * @default false

package/legacy/MenuList/MenuList.js

@@ -88,7 +88,7 @@ function moveFocus(list, currentFocus, disableListWrap, disabledItemsFocusable,
   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.

package/legacy/Paper/Paper.js

@@ -12,8 +12,7 @@ import useTheme from '../styles/useTheme';
 import { getPaperUtilityClass } from './paperClasses'; // Inspired by https://github.com/material-components/material-components-ios/blob/bca36107405594d5b7b16265a5b0ed698f85a5ee/components/Elevation/src/UIColor%2BMaterialElevation.m#L61
 
 import { jsx as _jsx } from "react/jsx-runtime";
-
-var getOverlayAlpha = function getOverlayAlpha(elevation) {
+export var getOverlayAlpha = function getOverlayAlpha(elevation) {
   var alphaValue;
 
   if (elevation < 1) {
@@ -44,20 +43,24 @@ var PaperRoot = styled('div', {
     return [styles.root, styles[ownerState.variant], !ownerState.square && styles.rounded, ownerState.variant === 'elevation' && styles["elevation".concat(ownerState.elevation)]];
   }
 })(function (_ref) {
+  var _theme$vars$overlays;
+
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
   return _extends({
-    backgroundColor: theme.palette.background.paper,
-    color: theme.palette.text.primary,
+    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 ".concat(theme.palette.divider)
+    border: "1px solid ".concat((theme.vars || theme).palette.divider)
   }, ownerState.variant === 'elevation' && _extends({
-    boxShadow: theme.shadows[ownerState.elevation]
-  }, theme.palette.mode === 'dark' && {
+    boxShadow: (theme.vars || theme).shadows[ownerState.elevation]
+  }, !theme.vars && theme.palette.mode === 'dark' && {
     backgroundImage: "linear-gradient(".concat(alpha('#fff', getOverlayAlpha(ownerState.elevation)), ", ").concat(alpha('#fff', getOverlayAlpha(ownerState.elevation)), ")")
+  }, theme.vars && {
+    backgroundImage: (_theme$vars$overlays = theme.vars.overlays) == null ? void 0 : _theme$vars$overlays[ownerState.elevation]
   }));
 });
 var Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {

package/legacy/Radio/Radio.js

@@ -40,18 +40,18 @@ var RadioRoot = styled(SwitchBase, {
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
   return _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(".concat(ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette[ownerState.color].mainChannel, " / ").concat(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'
       }
     }
   }, ownerState.color !== 'default' && _defineProperty({}, "&.".concat(radioClasses.checked), {
-    color: theme.palette[ownerState.color].main
+    color: (theme.vars || theme).palette[ownerState.color].main
   }), _defineProperty({}, "&.".concat(radioClasses.disabled), {
-    color: theme.palette.action.disabled
+    color: (theme.vars || theme).palette.action.disabled
   }));
 });
 

package/legacy/Select/SelectInput.js

@@ -325,8 +325,8 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
 
   var handleKeyDown = function handleKeyDown(event) {
     if (!readOnly) {
-      var 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
+      var 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) {

package/legacy/Slider/Slider.js

@@ -1,6 +1,5 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -21,15 +20,7 @@ var SliderRoot = styled('span', {
   slot: 'Root',
   overridesResolver: function overridesResolver(props, styles) {
     var ownerState = props.ownerState;
-    var marks = ownerState.marksProp === true && ownerState.step !== null ? _toConsumableArray(Array(Math.floor((ownerState.max - ownerState.min) / ownerState.step) + 1)).map(function (_, index) {
-      return {
-        value: ownerState.min + ownerState.step * index
-      };
-    }) : ownerState.marksProp || [];
-    var marked = marks.length > 0 && marks.some(function (mark) {
-      return mark.label;
-    });
-    return [styles.root, styles["color".concat(capitalize(ownerState.color))], ownerState.size !== 'medium' && styles["size".concat(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".concat(capitalize(ownerState.color))], ownerState.size !== 'medium' && styles["size".concat(capitalize(ownerState.size))], ownerState.marked && styles.marked, ownerState.orientation === 'vertical' && styles.vertical, ownerState.track === 'inverted' && styles.trackInverted, ownerState.track === false && styles.trackFalse];
   }
 })(function (_ref) {
   var _extends2;
@@ -292,7 +283,6 @@ var SliderValueLabel = styled(SliderValueLabelUnstyled, {
     transition: theme.transitions.create(['transform'], {
       duration: theme.transitions.duration.shortest
     }),
-    top: -10,
     transformOrigin: 'bottom center',
     transform: 'translateY(-100%) scale(0)',
     position: 'absolute',
@@ -303,20 +293,34 @@ var SliderValueLabel = styled(SliderValueLabelUnstyled, {
     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'
   });
 });
 process.env.NODE_ENV !== "production" ? SliderValueLabel.propTypes

package/legacy/Tabs/Tabs.js

@@ -134,7 +134,7 @@ var TabsScroller = styled('div', {
     overflowX: 'hidden',
     width: '100%'
   }, ownerState.hideScrollbar && {
-    // Hide dimensionless scrollbar on MacOS
+    // Hide dimensionless scrollbar on macOS
     scrollbarWidth: 'none',
     // Firefox
     '&::-webkit-scrollbar': {
@@ -197,7 +197,7 @@ var TabsScrollbarSize = styled(ScrollbarSize, {
 })({
   overflowX: 'auto',
   overflowY: 'hidden',
-  // Hide dimensionless scrollbar on MacOS
+  // Hide dimensionless scrollbar on macOS
   scrollbarWidth: 'none',
   // Firefox
   '&::-webkit-scrollbar': {

package/legacy/index.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.

package/legacy/styles/CssVarsProvider.js

@@ -8,6 +8,9 @@ var defaultTheme = experimental_extendTheme();
 
 var _createCssVarsProvide = createCssVarsProvider({
   theme: defaultTheme,
+  attribute: 'data-mui-color-scheme',
+  modeStorageKey: 'mui-mode',
+  colorSchemeStorageKey: 'mui-color-scheme',
   defaultColorScheme: {
     light: 'light',
     dark: 'dark'

package/legacy/styles/createMixins.js

@@ -6,8 +6,10 @@ export default function createMixins(breakpoints, mixins) {
   return _extends({
     toolbar: (_toolbar = {
       minHeight: 56
-    }, _defineProperty(_toolbar, "".concat(breakpoints.up('xs'), " and (orientation: landscape)"), {
-      minHeight: 48
+    }, _defineProperty(_toolbar, breakpoints.up('xs'), {
+      '@media (orientation: landscape)': {
+        minHeight: 48
+      }
     }), _defineProperty(_toolbar, breakpoints.up('sm'), {
       minHeight: 64
     }), _toolbar)

package/legacy/styles/experimental_extendTheme.js

@@ -1,10 +1,22 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import { deepmerge } from '@mui/utils';
 import { colorChannel } from '@mui/system';
 import createThemeWithoutVars from './createTheme';
+import { getOverlayAlpha } from '../Paper/Paper';
+
+var defaultDarkOverlays = _toConsumableArray(Array(25)).map(function (_, index) {
+  if (index === 0) {
+    return undefined;
+  }
+
+  var overlay = getOverlayAlpha(index);
+  return "linear-gradient(rgba(255 255 255 / ".concat(overlay, "), rgba(255 255 255 / ").concat(overlay, "))");
+});
+
 export default function extendTheme() {
-  var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$da2;
+  var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$li3, _colorSchemesInput$da2, _colorSchemesInput$da3;
 
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
@@ -32,14 +44,16 @@ export default function extendTheme() {
         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
       })
     })
   });
@@ -90,6 +104,11 @@ export default function extendTheme() {
 
       if (colors.secondary) {
         palette[color].secondaryChannel = colorChannel(colors.secondary);
+      } // Action colors: action.activeChannel
+
+
+      if (colors.active) {
+        palette[color].activeChannel = colorChannel(colors.active);
       }
     });
   });

package/locale/index.d.ts

@@ -1,71 +1,71 @@
-import { ComponentsPropsList } from '../styles/props';
-export interface Localization {
-    components?: {
-        MuiAlert?: {
-            defaultProps: Pick<ComponentsPropsList['MuiAlert'], 'closeText'>;
-        };
-        MuiBreadcrumbs?: {
-            defaultProps: Pick<ComponentsPropsList['MuiBreadcrumbs'], 'expandText'>;
-        };
-        MuiTablePagination?: {
-            defaultProps: Pick<ComponentsPropsList['MuiTablePagination'], 'labelRowsPerPage' | 'labelDisplayedRows' | 'getItemAriaLabel'>;
-        };
-        MuiRating?: {
-            defaultProps: Pick<ComponentsPropsList['MuiRating'], 'emptyLabelText' | 'getLabelText'>;
-        };
-        MuiAutocomplete?: {
-            defaultProps: Pick<ComponentsPropsList['MuiAutocomplete'], 'clearText' | 'closeText' | 'loadingText' | 'noOptionsText' | 'openText'>;
-        };
-        MuiPagination?: {
-            defaultProps: Pick<ComponentsPropsList['MuiPagination'], 'aria-label' | 'getItemAriaLabel'>;
-        };
-    };
-}
-export declare const amET: Localization;
-export declare const arEG: Localization;
-export declare const arSD: Localization;
-export declare const azAZ: Localization;
-export declare const bnBD: Localization;
-export declare const bgBG: Localization;
-export declare const caES: Localization;
-export declare const csCZ: Localization;
-export declare const daDK: Localization;
-export declare const deDE: Localization;
-export declare const elGR: Localization;
-export declare const enUS: Localization;
-export declare const esES: Localization;
-export declare const etEE: Localization;
-export declare const faIR: Localization;
-export declare const fiFI: Localization;
-export declare const frFR: Localization;
-export declare const heIL: Localization;
-export declare const hiIN: Localization;
-export declare const hrHR: Localization;
-export declare const huHU: Localization;
-export declare const hyAM: Localization;
-export declare const idID: Localization;
-export declare const isIS: Localization;
-export declare const itIT: Localization;
-export declare const jaJP: Localization;
-export declare const khKH: Localization;
-export declare const koKR: Localization;
-export declare const kzKZ: Localization;
-export declare const mkMK: Localization;
-export declare const nbNO: Localization;
-export declare const nlNL: Localization;
-export declare const plPL: Localization;
-export declare const ptBR: Localization;
-export declare const ptPT: Localization;
-export declare const roRO: Localization;
-export declare const srRS: Localization;
-export declare const ruRU: Localization;
-export declare const siLK: Localization;
-export declare const skSK: Localization;
-export declare const svSE: Localization;
-export declare const thTH: Localization;
-export declare const trTR: Localization;
-export declare const ukUA: Localization;
-export declare const viVN: Localization;
-export declare const zhCN: Localization;
-export declare const zhHK: Localization;
-export declare const zhTW: Localization;
+import { ComponentsPropsList } from '../styles/props';
+export interface Localization {
+    components?: {
+        MuiAlert?: {
+            defaultProps: Pick<ComponentsPropsList['MuiAlert'], 'closeText'>;
+        };
+        MuiBreadcrumbs?: {
+            defaultProps: Pick<ComponentsPropsList['MuiBreadcrumbs'], 'expandText'>;
+        };
+        MuiTablePagination?: {
+            defaultProps: Pick<ComponentsPropsList['MuiTablePagination'], 'labelRowsPerPage' | 'labelDisplayedRows' | 'getItemAriaLabel'>;
+        };
+        MuiRating?: {
+            defaultProps: Pick<ComponentsPropsList['MuiRating'], 'emptyLabelText' | 'getLabelText'>;
+        };
+        MuiAutocomplete?: {
+            defaultProps: Pick<ComponentsPropsList['MuiAutocomplete'], 'clearText' | 'closeText' | 'loadingText' | 'noOptionsText' | 'openText'>;
+        };
+        MuiPagination?: {
+            defaultProps: Pick<ComponentsPropsList['MuiPagination'], 'aria-label' | 'getItemAriaLabel'>;
+        };
+    };
+}
+export declare const amET: Localization;
+export declare const arEG: Localization;
+export declare const arSD: Localization;
+export declare const azAZ: Localization;
+export declare const bnBD: Localization;
+export declare const bgBG: Localization;
+export declare const caES: Localization;
+export declare const csCZ: Localization;
+export declare const daDK: Localization;
+export declare const deDE: Localization;
+export declare const elGR: Localization;
+export declare const enUS: Localization;
+export declare const esES: Localization;
+export declare const etEE: Localization;
+export declare const faIR: Localization;
+export declare const fiFI: Localization;
+export declare const frFR: Localization;
+export declare const heIL: Localization;
+export declare const hiIN: Localization;
+export declare const hrHR: Localization;
+export declare const huHU: Localization;
+export declare const hyAM: Localization;
+export declare const idID: Localization;
+export declare const isIS: Localization;
+export declare const itIT: Localization;
+export declare const jaJP: Localization;
+export declare const khKH: Localization;
+export declare const koKR: Localization;
+export declare const kzKZ: Localization;
+export declare const mkMK: Localization;
+export declare const nbNO: Localization;
+export declare const nlNL: Localization;
+export declare const plPL: Localization;
+export declare const ptBR: Localization;
+export declare const ptPT: Localization;
+export declare const roRO: Localization;
+export declare const srRS: Localization;
+export declare const ruRU: Localization;
+export declare const siLK: Localization;
+export declare const skSK: Localization;
+export declare const svSE: Localization;
+export declare const thTH: Localization;
+export declare const trTR: Localization;
+export declare const ukUA: Localization;
+export declare const viVN: Localization;
+export declare const zhCN: Localization;
+export declare const zhHK: Localization;
+export declare const zhTW: Localization;

package/modern/Alert/Alert.js

@@ -93,7 +93,9 @@ const AlertMessage = styled('div', {
   slot: 'Message',
   overridesResolver: (props, styles) => styles.message
 })({
-  padding: '8px 0'
+  padding: '8px 0',
+  minWidth: 0,
+  overflow: 'auto'
 });
 const AlertAction = styled('div', {
   name: 'MuiAlert',
@@ -164,6 +166,7 @@ const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
       className: classes.message,
       children: children
     }), action != null ? /*#__PURE__*/_jsx(AlertAction, {
+      ownerState: ownerState,
       className: classes.action,
       children: action
     }) : null, action == null && onClose ? /*#__PURE__*/_jsx(AlertAction, {

package/modern/ButtonBase/TouchRipple.js

@@ -192,12 +192,12 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
 
     } = options;
 
-    if (event.type === 'mousedown' && ignoringMouseDown.current) {
+    if (event?.type === 'mousedown' && ignoringMouseDown.current) {
       ignoringMouseDown.current = false;
       return;
     }
 
-    if (event.type === 'touchstart') {
+    if (event?.type === 'touchstart') {
       ignoringMouseDown.current = true;
     }
 
@@ -213,7 +213,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
     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 {
@@ -238,7 +238,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
     } // Touche devices
 
 
-    if (event.touches) {
+    if (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
@@ -281,7 +281,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
     clearTimeout(startTimer.current); // The touch interaction occurs too quickly.
     // We still want to show ripple effect.
 
-    if (event.type === 'touchend' && startTimerCommit.current) {
+    if (event?.type === 'touchend' && startTimerCommit.current) {
       startTimerCommit.current();
       startTimerCommit.current = null;
       startTimer.current = setTimeout(() => {

package/modern/Checkbox/Checkbox.js

@@ -43,10 +43,10 @@ const CheckboxRoot = styled(SwitchBase, {
   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'
@@ -54,10 +54,10 @@ const CheckboxRoot = styled(SwitchBase, {
   }
 }, ownerState.color !== 'default' && {
   [`&.${checkboxClasses.checked}, &.${checkboxClasses.indeterminate}`]: {
-    color: theme.palette[ownerState.color].main
+    color: (theme.vars || theme).palette[ownerState.color].main
   },
   [`&.${checkboxClasses.disabled}`]: {
-    color: theme.palette.action.disabled
+    color: (theme.vars || theme).palette.action.disabled
   }
 }));
 

package/modern/Fab/Fab.js

@@ -181,7 +181,9 @@ process.env.NODE_ENV !== "production" ? Fab.propTypes
    * [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.