@mui/material 5.3.1 → 5.4.3

package/legacy/Badge/Badge.js

@@ -168,7 +168,8 @@ var Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
       overlapProp = _props$overlap === void 0 ? 'rectangular' : _props$overlap,
       _props$color = props.color,
       colorProp = _props$color === void 0 ? 'default' : _props$color,
-      invisibleProp = props.invisible,
+      _props$invisible = props.invisible,
+      invisibleProp = _props$invisible === void 0 ? false : _props$invisible,
       badgeContentProp = props.badgeContent,
       _props$showZero = props.showZero,
       showZero = _props$showZero === void 0 ? false : _props$showZero,
@@ -183,7 +184,7 @@ var Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   });
   var invisible = invisibleProp;
 
-  if (invisibleProp == null && (badgeContentProp === 0 && !showZero || badgeContentProp == null && variantProp !== 'dot')) {
+  if (invisibleProp === false && (badgeContentProp === 0 && !showZero || badgeContentProp == null && variantProp !== 'dot')) {
     invisible = true;
   }
 
@@ -303,6 +304,7 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
 
   /**
    * If `true`, the badge is invisible.
+   * @default false
    */
   invisible: PropTypes.bool,
 

package/legacy/Breadcrumbs/BreadcrumbCollapsed.js

@@ -6,9 +6,7 @@ import styled from '../styles/styled';
 import MoreHorizIcon from '../internal/svg-icons/MoreHoriz';
 import ButtonBase from '../ButtonBase';
 import { jsx as _jsx } from "react/jsx-runtime";
-var BreadcrumbCollapsedButton = styled(ButtonBase, {
-  skipSx: true
-})(function (_ref) {
+var BreadcrumbCollapsedButton = styled(ButtonBase)(function (_ref) {
   var theme = _ref.theme;
   return _extends({
     display: 'flex',

package/legacy/ButtonBase/ButtonBase.js

@@ -127,11 +127,13 @@ var ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, ref)
       _props$tabIndex = props.tabIndex,
       tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
       TouchRippleProps = props.TouchRippleProps,
+      touchRippleRef = props.touchRippleRef,
       type = props.type,
-      other = _objectWithoutProperties(props, ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "type"]);
+      other = _objectWithoutProperties(props, ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"]);
 
   var buttonRef = React.useRef(null);
   var rippleRef = React.useRef(null);
+  var handleRippleRef = useForkRef(rippleRef, touchRippleRef);
 
   var _useIsFocusVisible = useIsFocusVisible(),
       isFocusVisibleRef = _useIsFocusVisible.isFocusVisibleRef,
@@ -361,7 +363,7 @@ var ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, ref)
 
     /* TouchRipple is only needed client-side, x2 boost on the server. */
     _jsx(TouchRipple, _extends({
-      ref: rippleRef,
+      ref: handleRippleRef,
       center: centerRipple
     }, TouchRippleProps)) : null]
   }));
@@ -544,6 +546,17 @@ process.env.NODE_ENV !== "production" ? ButtonBase.propTypes
    */
   TouchRippleProps: PropTypes.object,
 
+  /**
+   * A ref that points to the `TouchRipple` element.
+   */
+  touchRippleRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      pulsate: PropTypes.func.isRequired,
+      start: PropTypes.func.isRequired,
+      stop: PropTypes.func.isRequired
+    })
+  })]),
+
   /**
    * @ignore
    */

package/legacy/ButtonBase/TouchRipple.js

@@ -22,8 +22,7 @@ var exitKeyframe = keyframes(_templateObject2 || (_templateObject2 = _taggedTemp
 var pulsateKeyframe = keyframes(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  0% {\n    transform: scale(1);\n  }\n\n  50% {\n    transform: scale(0.92);\n  }\n\n  100% {\n    transform: scale(1);\n  }\n"])));
 export var TouchRippleRoot = styled('span', {
   name: 'MuiTouchRipple',
-  slot: 'Root',
-  skipSx: true
+  slot: 'Root'
 })({
   overflow: 'hidden',
   pointerEvents: 'none',

package/legacy/Dialog/Dialog.js

@@ -9,13 +9,13 @@ import { unstable_useId as useId } from '@mui/utils';
 import capitalize from '../utils/capitalize';
 import Modal from '../Modal';
 import Fade from '../Fade';
-import { duration } from '../styles/createTransitions';
 import Paper from '../Paper';
 import useThemeProps from '../styles/useThemeProps';
 import styled from '../styles/styled';
 import dialogClasses, { getDialogUtilityClass } from './dialogClasses';
 import DialogContext from './DialogContext';
 import Backdrop from '../Backdrop';
+import useTheme from '../styles/useTheme';
 import { jsx as _jsx } from "react/jsx-runtime";
 var DialogBackdrop = styled(Backdrop, {
   name: 'MuiDialog',
@@ -139,10 +139,6 @@ var DialogPaper = styled(Paper, {
     maxWidth: '100%'
   }));
 });
-var defaultTransitionDuration = {
-  enter: duration.enteringScreen,
-  exit: duration.leavingScreen
-};
 /**
  * Dialogs are overlaid modal paper based components with a backdrop.
  */
@@ -152,6 +148,11 @@ var Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
     props: inProps,
     name: 'MuiDialog'
   });
+  var theme = useTheme();
+  var defaultTransitionDuration = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen
+  };
 
   var ariaDescribedby = props['aria-describedby'],
       ariaLabelledbyProp = props['aria-labelledby'],
@@ -399,7 +400,10 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
-   * @default { enter: duration.enteringScreen, exit: duration.leavingScreen }
+   * @default {
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
+   * }
    */
   transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
     appear: PropTypes.number,

package/legacy/Drawer/Drawer.js

@@ -9,7 +9,6 @@ import Modal from '../Modal';
 import Slide from '../Slide';
 import Paper from '../Paper';
 import capitalize from '../utils/capitalize';
-import { duration } from '../styles/createTransitions';
 import useTheme from '../styles/useTheme';
 import useThemeProps from '../styles/useThemeProps';
 import styled, { rootShouldForwardProp } from '../styles/styled';
@@ -118,10 +117,6 @@ export function isHorizontal(anchor) {
 export function getAnchor(theme, anchor) {
   return theme.direction === 'rtl' && isHorizontal(anchor) ? oppositeDirection[anchor] : anchor;
 }
-var defaultTransitionDuration = {
-  enter: duration.enteringScreen,
-  exit: duration.leavingScreen
-};
 /**
  * The props of the [Modal](/api/modal/) component are available
  * when `variant="temporary"` is set.
@@ -132,6 +127,11 @@ var Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
     props: inProps,
     name: 'MuiDrawer'
   });
+  var theme = useTheme();
+  var defaultTransitionDuration = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen
+  };
   var _props$anchor = props.anchor,
       anchorProp = _props$anchor === void 0 ? 'left' : _props$anchor,
       BackdropProps = props.BackdropProps,
@@ -158,12 +158,11 @@ var Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
       transitionDuration = _props$transitionDura === void 0 ? defaultTransitionDuration : _props$transitionDura,
       _props$variant = props.variant,
       variant = _props$variant === void 0 ? 'temporary' : _props$variant,
-      other = _objectWithoutProperties(props, ["anchor", "BackdropProps", "children", "className", "elevation", "hideBackdrop", "ModalProps", "onClose", "open", "PaperProps", "SlideProps", "TransitionComponent", "transitionDuration", "variant"]);
-
-  var theme = useTheme(); // Let's assume that the Drawer will always be rendered on user space.
+      other = _objectWithoutProperties(props, ["anchor", "BackdropProps", "children", "className", "elevation", "hideBackdrop", "ModalProps", "onClose", "open", "PaperProps", "SlideProps", "TransitionComponent", "transitionDuration", "variant"]); // Let's assume that the Drawer will always be rendered on user space.
   // We use this state is order to skip the appear transition during the
   // initial mount of the component.
 
+
   var mounted = React.useRef(false);
   React.useEffect(function () {
     mounted.current = true;
@@ -317,7 +316,10 @@ process.env.NODE_ENV !== "production" ? Drawer.propTypes
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
-   * @default { enter: duration.enteringScreen, exit: duration.leavingScreen }
+   * @default {
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
+   * }
    */
   transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
     appear: PropTypes.number,

package/legacy/Fab/Fab.js

@@ -18,7 +18,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
       classes = ownerState.classes,
       size = ownerState.size;
   var slots = {
-    root: ['root', variant, "size".concat(capitalize(size)), color === 'inherit' && 'colorInherit', color === 'primary' && 'primary', color === 'secondary' && 'secondary']
+    root: ['root', variant, "size".concat(capitalize(size)), color === 'inherit' ? 'colorInherit' : color]
   };
   return composeClasses(slots, getFabUtilityClass, classes);
 };
@@ -28,7 +28,7 @@ var FabRoot = styled(ButtonBase, {
   slot: 'Root',
   overridesResolver: function overridesResolver(props, styles) {
     var ownerState = props.ownerState;
-    return [styles.root, styles[ownerState.variant], styles["size".concat(capitalize(ownerState.size))], ownerState.color === 'inherit' && styles.colorInherit, ownerState.color === 'primary' && styles.primary, ownerState.color === 'secondary' && styles.secondary];
+    return [styles.root, styles[ownerState.variant], styles["size".concat(capitalize(ownerState.size))], ownerState.color === 'inherit' && styles.colorInherit, styles[capitalize(ownerState.size)], styles[ownerState.color]];
   }
 })(function (_ref) {
   var _extends2;
@@ -96,24 +96,14 @@ var FabRoot = styled(ButtonBase, {
 }, function (_ref2) {
   var theme = _ref2.theme,
       ownerState = _ref2.ownerState;
-  return _extends({}, ownerState.color === 'primary' && {
-    color: theme.palette.primary.contrastText,
-    backgroundColor: theme.palette.primary.main,
+  return _extends({}, ownerState.color !== 'inherit' && ownerState.color !== 'default' && theme.palette[ownerState.color] != null && {
+    color: theme.palette[ownerState.color].contrastText,
+    backgroundColor: theme.palette[ownerState.color].main,
     '&:hover': {
-      backgroundColor: theme.palette.primary.dark,
+      backgroundColor: theme.palette[ownerState.color].dark,
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
-        backgroundColor: theme.palette.primary.main
-      }
-    }
-  }, ownerState.color === 'secondary' && {
-    color: theme.palette.secondary.contrastText,
-    backgroundColor: theme.palette.secondary.main,
-    '&:hover': {
-      backgroundColor: theme.palette.secondary.dark,
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: theme.palette.secondary.main
+        backgroundColor: theme.palette[ownerState.color].main
       }
     }
   });
@@ -190,9 +180,7 @@ process.env.NODE_ENV !== "production" ? Fab.propTypes
    * The color of the component. It supports those theme colors that make sense for this component.
    * @default 'default'
    */
-  color: PropTypes
-  /* @typescript-to-proptypes-ignore */
-  .oneOfType([PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary']), PropTypes.string]),
+  color: PropTypes.oneOf(['default', 'error', 'info', 'inherit', 'primary', 'secondary', 'success', 'warning']),
 
   /**
    * The component used for the root node.

package/legacy/Fab/fabClasses.js

@@ -2,5 +2,5 @@ import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
 export function getFabUtilityClass(slot) {
   return generateUtilityClass('MuiFab', slot);
 }
-var fabClasses = generateUtilityClasses('MuiFab', ['root', 'primary', 'secondary', 'extended', 'circular', 'focusVisible', 'disabled', 'colorInherit', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
+var fabClasses = generateUtilityClasses('MuiFab', ['root', 'primary', 'secondary', 'extended', 'circular', 'focusVisible', 'disabled', 'colorInherit', 'sizeSmall', 'sizeMedium', 'sizeLarge', 'info', 'error', 'warning', 'success']);
 export default fabClasses;

package/legacy/Fade/Fade.js

@@ -4,7 +4,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
 import { elementAcceptingRef } from '@mui/utils';
-import { duration } from '../styles/createTransitions';
 import useTheme from '../styles/useTheme';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import useForkRef from '../utils/useForkRef';
@@ -17,16 +16,18 @@ var styles = {
     opacity: 1
   }
 };
-var defaultTimeout = {
-  enter: duration.enteringScreen,
-  exit: duration.leavingScreen
-};
 /**
  * The Fade transition is used by the [Modal](/components/modal/) component.
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 
 var Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
+  var theme = useTheme();
+  var defaultTimeout = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen
+  };
+
   var addEndListener = props.addEndListener,
       _props$appear = props.appear,
       appear = _props$appear === void 0 ? true : _props$appear,
@@ -46,7 +47,6 @@ var Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
       TransitionComponent = _props$TransitionComp === void 0 ? Transition : _props$TransitionComp,
       other = _objectWithoutProperties(props, ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"]);
 
-  var theme = useTheme();
   var enableStrictModeCompat = true;
   var nodeRef = React.useRef(null);
   var foreignRef = useForkRef(_children.ref, ref);
@@ -214,8 +214,8 @@ process.env.NODE_ENV !== "production" ? Fade.propTypes
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
    * @default {
-   *   enter: duration.enteringScreen,
-   *   exit: duration.leavingScreen,
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
    * }
    */
   timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({

package/legacy/FormControlLabel/FormControlLabel.js

@@ -12,15 +12,17 @@ import capitalize from '../utils/capitalize';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import formControlLabelClasses, { getFormControlLabelUtilityClasses } from './formControlLabelClasses';
+import formControlState from '../FormControl/formControlState';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
       disabled = ownerState.disabled,
-      labelPlacement = ownerState.labelPlacement;
+      labelPlacement = ownerState.labelPlacement,
+      error = ownerState.error;
   var slots = {
-    root: ['root', disabled && 'disabled', "labelPlacement".concat(capitalize(labelPlacement))],
+    root: ['root', disabled && 'disabled', "labelPlacement".concat(capitalize(labelPlacement)), error && 'error'],
     label: ['label', disabled && 'disabled']
   };
   return composeClasses(slots, getFormControlLabelUtilityClasses, classes);
@@ -108,11 +110,17 @@ var FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel(i
       controlProps[key] = props[key];
     }
   });
+  var fcs = formControlState({
+    props: props,
+    muiFormControl: muiFormControl,
+    states: ['error']
+  });
 
   var ownerState = _extends({}, props, {
     disabled: disabled,
     label: label,
-    labelPlacement: labelPlacement
+    labelPlacement: labelPlacement,
+    error: fcs.error
   });
 
   var classes = useUtilityClasses(ownerState);

package/legacy/FormControlLabel/formControlLabelClasses.js

@@ -2,5 +2,5 @@ import { generateUtilityClasses, generateUtilityClass } from '@mui/base';
 export function getFormControlLabelUtilityClasses(slot) {
   return generateUtilityClass('MuiFormControlLabel', slot);
 }
-var formControlLabelClasses = generateUtilityClasses('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label']);
+var formControlLabelClasses = generateUtilityClasses('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label', 'error']);
 export default formControlLabelClasses;

package/legacy/FormGroup/FormGroup.js

@@ -7,13 +7,16 @@ import { unstable_composeClasses as composeClasses } from '@mui/base';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import { getFormGroupUtilityClass } from './formGroupClasses';
+import useFormControl from '../FormControl/useFormControl';
+import formControlState from '../FormControl/formControlState';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
-      row = ownerState.row;
+      row = ownerState.row,
+      error = ownerState.error;
   var slots = {
-    root: ['root', row && 'row']
+    root: ['root', row && 'row', error && 'error']
   };
   return composeClasses(slots, getFormGroupUtilityClass, classes);
 };
@@ -52,8 +55,16 @@ var FormGroup = /*#__PURE__*/React.forwardRef(function FormGroup(inProps, ref) {
       row = _props$row === void 0 ? false : _props$row,
       other = _objectWithoutProperties(props, ["className", "row"]);
 
+  var muiFormControl = useFormControl();
+  var fcs = formControlState({
+    props: props,
+    muiFormControl: muiFormControl,
+    states: ['error']
+  });
+
   var ownerState = _extends({}, props, {
-    row: row
+    row: row,
+    error: fcs.error
   });
 
   var classes = useUtilityClasses(ownerState);

package/legacy/FormGroup/formGroupClasses.js

@@ -2,5 +2,5 @@ import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
 export function getFormGroupUtilityClass(slot) {
   return generateUtilityClass('MuiFormGroup', slot);
 }
-var formGroupClasses = generateUtilityClasses('MuiFormGroup', ['root', 'row']);
+var formGroupClasses = generateUtilityClasses('MuiFormGroup', ['root', 'row', 'error']);
 export default formGroupClasses;

package/legacy/FormHelperText/FormHelperText.js

@@ -1,6 +1,9 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
+
+var _span;
+
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -104,16 +107,11 @@ var FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inPro
     className: clsx(classes.root, className),
     ref: ref
   }, other, {
-    children: children === ' ' ?
-    /*#__PURE__*/
-    // notranslate needed while Google Translate will not fix zero-width space issue
-    // eslint-disable-next-line react/no-danger
-    _jsx("span", {
+    children: children === ' ' ? // notranslate needed while Google Translate will not fix zero-width space issue
+    _span || (_span = /*#__PURE__*/_jsx("span", {
       className: "notranslate",
-      dangerouslySetInnerHTML: {
-        __html: '​'
-      }
-    }) : children
+      children: "\u200B"
+    })) : children
   }));
 });
 process.env.NODE_ENV !== "production" ? FormHelperText.propTypes

package/legacy/Grid/Grid.js

@@ -251,10 +251,8 @@ var GridRoot = styled('div', {
 
   }, ownerState.zeroMinWidth && {
     minWidth: 0
-  }, ownerState.wrap === 'nowrap' && {
-    flexWrap: 'nowrap'
-  }, ownerState.wrap === 'reverse' && {
-    flexWrap: 'wrap-reverse'
+  }, ownerState.wrap !== 'wrap' && {
+    flexWrap: ownerState.wrap
   });
 }, generateDirection, generateRowGap, generateColumnGap, generateGrid);
 

package/legacy/ImageList/ImageList.js

@@ -168,6 +168,8 @@ process.env.NODE_ENV !== "production" ? ImageList.propTypes
    * The variant to use.
    * @default 'standard'
    */
-  variant: PropTypes.oneOf(['masonry', 'quilted', 'standard', 'woven'])
+  variant: PropTypes
+  /* @typescript-to-proptypes-ignore */
+  .oneOfType([PropTypes.oneOf(['masonry', 'quilted', 'standard', 'woven']), PropTypes.string])
 } : void 0;
 export default ImageList;

package/legacy/InputAdornment/InputAdornment.js

@@ -1,6 +1,9 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
+
+var _span;
+
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -116,17 +119,11 @@ var InputAdornment = /*#__PURE__*/React.forwardRef(function InputAdornment(inPro
         children: children
       }) : /*#__PURE__*/_jsxs(React.Fragment, {
         children: [position === 'start' ?
-        /*#__PURE__*/
-
         /* notranslate needed while Google Translate will not fix zero-width space issue */
-
-        /* eslint-disable-next-line react/no-danger */
-        _jsx("span", {
+        _span || (_span = /*#__PURE__*/_jsx("span", {
           className: "notranslate",
-          dangerouslySetInnerHTML: {
-            __html: '​'
-          }
-        }) : null, children]
+          children: "\u200B"
+        })) : null, children]
       })
     }))
   });

package/legacy/Modal/Modal.js

@@ -243,7 +243,7 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
 
   /**
    * If `true`, the modal will not restore focus to previously focused element once
-   * modal is hidden.
+   * modal is hidden or unmounted.
    * @default false
    */
   disableRestoreFocus: PropTypes.bool,

package/legacy/OutlinedInput/NotchedOutline.js

@@ -1,5 +1,8 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
+
+var _span;
+
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import styled from '../styles/styled';
@@ -20,14 +23,12 @@ var NotchedOutlineRoot = styled('fieldset')({
   overflow: 'hidden',
   minWidth: '0%'
 });
-var NotchedOutlineLegend = styled('legend', {
-  skipSx: true
-})(function (_ref) {
+var NotchedOutlineLegend = styled('legend')(function (_ref) {
   var ownerState = _ref.ownerState,
       theme = _ref.theme;
   return _extends({
     float: 'unset'
-  }, ownerState.label === undefined && {
+  }, !ownerState.withLabel && {
     padding: 0,
     lineHeight: '11px',
     // sync with `height` in `legend` styles
@@ -35,7 +36,7 @@ var NotchedOutlineLegend = styled('legend', {
       duration: 150,
       easing: theme.transitions.easing.easeOut
     })
-  }, ownerState.label !== undefined && _extends({
+  }, ownerState.withLabel && _extends({
     display: 'block',
     // Fix conflict with normalize.css and sanitize.css
     width: 'auto',
@@ -77,9 +78,11 @@ export default function NotchedOutline(props) {
       notched = props.notched,
       other = _objectWithoutProperties(props, ["children", "classes", "className", "label", "notched"]);
 
+  var withLabel = label != null && label !== '';
+
   var ownerState = _extends({}, props, {
     notched: notched,
-    label: label
+    withLabel: withLabel
   });
 
   return /*#__PURE__*/_jsx(NotchedOutlineRoot, _extends({
@@ -89,18 +92,13 @@ export default function NotchedOutline(props) {
   }, other, {
     children: /*#__PURE__*/_jsx(NotchedOutlineLegend, {
       ownerState: ownerState,
-      children: label ? /*#__PURE__*/_jsx("span", {
+      children: withLabel ? /*#__PURE__*/_jsx("span", {
         children: label
-      }) :
-      /*#__PURE__*/
-      // notranslate needed while Google Translate will not fix zero-width space issue
-      // eslint-disable-next-line react/no-danger
-      _jsx("span", {
+      }) : // notranslate needed while Google Translate will not fix zero-width space issue
+      _span || (_span = /*#__PURE__*/_jsx("span", {
         className: "notranslate",
-        dangerouslySetInnerHTML: {
-          __html: '​'
-        }
-      })
+        children: "\u200B"
+      }))
     })
   }));
 }

package/legacy/OutlinedInput/OutlinedInput.js

@@ -137,7 +137,7 @@ var OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps
     renderSuffix: function renderSuffix(state) {
       return /*#__PURE__*/_jsx(NotchedOutlineRoot, {
         className: classes.notchedOutline,
-        label: label && fcs.required ? _React$Fragment || (_React$Fragment = /*#__PURE__*/_jsxs(React.Fragment, {
+        label: label != null && label !== '' && fcs.required ? _React$Fragment || (_React$Fragment = /*#__PURE__*/_jsxs(React.Fragment, {
           children: [label, "\xA0", '*']
         })) : label,
         notched: typeof notched !== 'undefined' ? notched : Boolean(state.startAdornment || state.filled || state.focused)

package/legacy/Radio/RadioButtonIcon.js

@@ -10,15 +10,11 @@ var RadioButtonIconRoot = styled('span')({
   position: 'relative',
   display: 'flex'
 });
-var RadioButtonIconBackground = styled(RadioButtonUncheckedIcon, {
-  skipSx: true
-})({
+var RadioButtonIconBackground = styled(RadioButtonUncheckedIcon)({
   // Scale applied to prevent dot misalignment in Safari
   transform: 'scale(1)'
 });
-var RadioButtonIconDot = styled(RadioButtonCheckedIcon, {
-  skipSx: true
-})(function (_ref) {
+var RadioButtonIconDot = styled(RadioButtonCheckedIcon)(function (_ref) {
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
   return _extends({

package/legacy/Rating/Rating.js

@@ -425,7 +425,7 @@ var Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
 
   var handleChange = function handleChange(event) {
     var newValue = event.target.value === '' ? null : parseFloat(event.target.value); // Give mouse priority over keyboard
-    // Fix https://github.com/mui-org/material-ui/issues/22827
+    // Fix https://github.com/mui/material-ui/issues/22827
 
     if (hover !== -1) {
       newValue = hover;