@mui/material 5.2.8 → 5.4.1

package/node/ImageList/ImageList.js

@@ -190,7 +190,9 @@ process.env.NODE_ENV !== "production" ? ImageList.propTypes
    * The variant to use.
    * @default 'standard'
    */
-  variant: _propTypes.default.oneOf(['masonry', 'quilted', 'standard', 'woven'])
+  variant: _propTypes.default
+  /* @typescript-to-proptypes-ignore */
+  .oneOfType([_propTypes.default.oneOf(['masonry', 'quilted', 'standard', 'woven']), _propTypes.default.string])
 } : void 0;
 var _default = ImageList;
 exports.default = _default;

package/node/InputAdornment/InputAdornment.js

@@ -35,6 +35,8 @@ var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _span;
+
 const _excluded = ["children", "className", "component", "disablePointerEvents", "disableTypography", "position", "variant"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -144,17 +146,11 @@ const InputAdornment = /*#__PURE__*/React.forwardRef(function InputAdornment(inP
         children: children
       }) : /*#__PURE__*/(0, _jsxRuntime.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 */
-        (0, _jsxRuntime.jsx)("span", {
+        _span || (_span = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "notranslate",
-          dangerouslySetInnerHTML: {
-            __html: '​'
-          }
-        }) : null, children]
+          children: "\u200B"
+        })) : null, children]
       })
     }))
   });

package/node/Modal/Modal.js

@@ -250,7 +250,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.default.bool,

package/node/OutlinedInput/NotchedOutline.js

@@ -19,6 +19,8 @@ var _styled = _interopRequireDefault(require("../styles/styled"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _span;
+
 const _excluded = ["children", "classes", "className", "label", "notched"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -41,14 +43,12 @@ const NotchedOutlineRoot = (0, _styled.default)('fieldset')({
   overflow: 'hidden',
   minWidth: '0%'
 });
-const NotchedOutlineLegend = (0, _styled.default)('legend', {
-  skipSx: true
-})(({
+const NotchedOutlineLegend = (0, _styled.default)('legend')(({
   ownerState,
   theme
 }) => (0, _extends2.default)({
   float: 'unset'
-}, ownerState.label === undefined && {
+}, !ownerState.withLabel && {
   padding: 0,
   lineHeight: '11px',
   // sync with `height` in `legend` styles
@@ -56,7 +56,7 @@ const NotchedOutlineLegend = (0, _styled.default)('legend', {
     duration: 150,
     easing: theme.transitions.easing.easeOut
   })
-}, ownerState.label !== undefined && (0, _extends2.default)({
+}, ownerState.withLabel && (0, _extends2.default)({
   display: 'block',
   // Fix conflict with normalize.css and sanitize.css
   width: 'auto',
@@ -96,9 +96,10 @@ function NotchedOutline(props) {
     notched
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const withLabel = label != null && label !== '';
   const ownerState = (0, _extends2.default)({}, props, {
     notched,
-    label
+    withLabel
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(NotchedOutlineRoot, (0, _extends2.default)({
     "aria-hidden": true,
@@ -107,18 +108,13 @@ function NotchedOutline(props) {
   }, other, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(NotchedOutlineLegend, {
       ownerState: ownerState,
-      children: label ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: withLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         children: label
-      }) :
-      /*#__PURE__*/
-      // notranslate needed while Google Translate will not fix zero-width space issue
-      // eslint-disable-next-line react/no-danger
-      (0, _jsxRuntime.jsx)("span", {
+      }) : // notranslate needed while Google Translate will not fix zero-width space issue
+      _span || (_span = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: "notranslate",
-        dangerouslySetInnerHTML: {
-          __html: '​'
-        }
-      })
+        children: "\u200B"
+      }))
     })
   }));
 }

package/node/OutlinedInput/OutlinedInput.js

@@ -160,7 +160,7 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
     }, components),
     renderSuffix: state => /*#__PURE__*/(0, _jsxRuntime.jsx)(NotchedOutlineRoot, {
       className: classes.notchedOutline,
-      label: label && fcs.required ? _React$Fragment || (_React$Fragment = /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      label: label != null && label !== '' && fcs.required ? _React$Fragment || (_React$Fragment = /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
         children: [label, "\xA0", '*']
       })) : label,
       notched: typeof notched !== 'undefined' ? notched : Boolean(state.startAdornment || state.filled || state.focused)

package/node/Radio/RadioButtonIcon.js

@@ -29,15 +29,11 @@ const RadioButtonIconRoot = (0, _styled.default)('span')({
   position: 'relative',
   display: 'flex'
 });
-const RadioButtonIconBackground = (0, _styled.default)(_RadioButtonUnchecked.default, {
-  skipSx: true
-})({
+const RadioButtonIconBackground = (0, _styled.default)(_RadioButtonUnchecked.default)({
   // Scale applied to prevent dot misalignment in Safari
   transform: 'scale(1)'
 });
-const RadioButtonIconDot = (0, _styled.default)(_RadioButtonChecked.default, {
-  skipSx: true
-})(({
+const RadioButtonIconDot = (0, _styled.default)(_RadioButtonChecked.default)(({
   theme,
   ownerState
 }) => (0, _extends2.default)({

package/node/Rating/Rating.js

@@ -426,7 +426,7 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
 
   const handleChange = event => {
     let 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;

package/node/Select/Select.js

@@ -43,7 +43,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var _Input, _FilledInput;
 
-const _excluded = ["autoWidth", "children", "classes", "className", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"];
+const _excluded = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -66,6 +66,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
     children,
     classes: classesProp = {},
     className,
+    defaultOpen = false,
     displayEmpty = false,
     IconComponent = _ArrowDropDown.default,
     id,
@@ -119,6 +120,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
       id
     } : {
       autoWidth,
+      defaultOpen,
       displayEmpty,
       labelId,
       MenuProps,
@@ -173,6 +175,13 @@ process.env.NODE_ENV !== "production" ? Select.propTypes
    */
   className: _propTypes.default.string,
 
+  /**
+   * If `true`, the component is initially open. Use when the component open state is not controlled (i.e. the `open` prop is not defined).
+   * You can only use it when the `native` prop is `false` (default).
+   * @default false
+   */
+  defaultOpen: _propTypes.default.bool,
+
   /**
    * The default value. Use when the component is not controlled.
    */

package/node/Select/SelectInput.js

@@ -43,7 +43,9 @@ var _selectClasses = _interopRequireWildcard(require("./selectClasses"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultValue", "disabled", "displayEmpty", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"];
+var _span;
+
+const _excluded = ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultOpen", "defaultValue", "disabled", "displayEmpty", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -143,6 +145,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     autoWidth,
     children,
     className,
+    defaultOpen,
     defaultValue,
     disabled,
     displayEmpty,
@@ -171,6 +174,11 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     default: defaultValue,
     name: 'Select'
   });
+  const [openState, setOpenState] = (0, _useControlled.default)({
+    controlled: openProp,
+    default: defaultOpen,
+    name: 'Select'
+  });
   const inputRef = React.useRef(null);
   const displayRef = React.useRef(null);
   const [displayNode, setDisplayNode] = React.useState(null);
@@ -178,7 +186,6 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     current: isOpenControlled
   } = React.useRef(openProp != null);
   const [menuMinWidthState, setMenuMinWidthState] = React.useState();
-  const [openState, setOpenState] = React.useState(false);
   const handleRef = (0, _useForkRef.default)(ref, inputRefProp);
   const handleDisplayRef = React.useCallback(node => {
     displayRef.current = node;
@@ -193,13 +200,27 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     },
     node: inputRef.current,
     value
-  }), [value]);
+  }), [value]); // Resize menu on `defaultOpen` automatic toggle.
+
+  React.useEffect(() => {
+    if (defaultOpen && openState && displayNode && !isOpenControlled) {
+      setMenuMinWidthState(autoWidth ? null : displayNode.clientWidth);
+      displayRef.current.focus();
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [displayNode, autoWidth]); // `isOpenControlled` is ignored because the component should never switch between controlled and uncontrolled modes.
+  // `defaultOpen` and `openState` are ignored to avoid unnecessary callbacks.
+
   React.useEffect(() => {
     if (autoFocus) {
       displayRef.current.focus();
     }
   }, [autoFocus]);
   React.useEffect(() => {
+    if (!labelId) {
+      return undefined;
+    }
+
     const label = (0, _ownerDocument.default)(displayRef.current).getElementById(labelId);
 
     if (label) {
@@ -296,7 +317,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       if (onChange) {
         // Redefine target to allow name and value to be read.
         // This allows seamless integration with the most popular form libraries.
-        // https://github.com/mui-org/material-ui/issues/13485#issuecomment-676048492
+        // https://github.com/mui/material-ui/issues/13485#issuecomment-676048492
         // Clone the event to not override `target` of the original event.
         const nativeEvent = event.nativeEvent || event;
         const clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
@@ -329,7 +350,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     }
   };
 
-  const open = displayNode !== null && (isOpenControlled ? openProp : openState);
+  const open = displayNode !== null && openState;
 
   const handleBlur = event => {
     // if open event.stopImmediatePropagation
@@ -494,16 +515,11 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       className: (0, _clsx.default)(classes.select, className, SelectDisplayProps.className) // The id is required for proper a11y
       ,
       id: buttonId,
-      children: isEmpty(display) ?
-      /*#__PURE__*/
-      // notranslate needed while Google Translate will not fix zero-width space issue
-      // eslint-disable-next-line react/no-danger
-      (0, _jsxRuntime.jsx)("span", {
+      children: isEmpty(display) ? // notranslate needed while Google Translate will not fix zero-width space issue
+      _span || (_span = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: "notranslate",
-        dangerouslySetInnerHTML: {
-          __html: '​'
-        }
-      }) : display
+        children: "\u200B"
+      })) : display
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectNativeInput, (0, _extends2.default)({
       value: Array.isArray(value) ? value.join(',') : value,
       name: name,
@@ -586,6 +602,12 @@ process.env.NODE_ENV !== "production" ? SelectInput.propTypes = {
    */
   className: _propTypes.default.string,
 
+  /**
+   * If `true`, the component is toggled on mount. Use when the component open state is not controlled.
+   * You can only use it when the `native` prop is `false` (default).
+   */
+  defaultOpen: _propTypes.default.bool,
+
   /**
    * The default value. Use when the component is not controlled.
    */

package/node/Slider/Slider.js

@@ -31,11 +31,13 @@ var _styled = _interopRequireWildcard(require("../styles/styled"));
 
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 
+var _shouldSpreadAdditionalProps = _interopRequireDefault(require("../utils/shouldSpreadAdditionalProps"));
+
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["components", "componentsProps", "color", "size"];
+const _excluded = ["component", "components", "componentsProps", "color", "size"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -110,6 +112,19 @@ const SliderRoot = (0, _styled.default)('span', {
   }
 }));
 exports.SliderRoot = SliderRoot;
+process.env.NODE_ENV !== "production" ? SliderRoot.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"     |
+  // ----------------------------------------------------------------------
+
+  /**
+   * @ignore
+   */
+  children: _propTypes.default.node
+} : void 0;
 const SliderRail = (0, _styled.default)('span', {
   name: 'MuiSlider',
   slot: 'Rail',
@@ -136,6 +151,19 @@ const SliderRail = (0, _styled.default)('span', {
   opacity: 1
 }));
 exports.SliderRail = SliderRail;
+process.env.NODE_ENV !== "production" ? SliderRail.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"     |
+  // ----------------------------------------------------------------------
+
+  /**
+   * @ignore
+   */
+  children: _propTypes.default.node
+} : void 0;
 const SliderTrack = (0, _styled.default)('span', {
   name: 'MuiSlider',
   slot: 'Track',
@@ -173,6 +201,19 @@ const SliderTrack = (0, _styled.default)('span', {
   });
 });
 exports.SliderTrack = SliderTrack;
+process.env.NODE_ENV !== "production" ? SliderTrack.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"     |
+  // ----------------------------------------------------------------------
+
+  /**
+   * @ignore
+   */
+  children: _propTypes.default.node
+} : void 0;
 const SliderThumb = (0, _styled.default)('span', {
   name: 'MuiSlider',
   slot: 'Thumb',
@@ -246,6 +287,19 @@ const SliderThumb = (0, _styled.default)('span', {
   }
 }));
 exports.SliderThumb = SliderThumb;
+process.env.NODE_ENV !== "production" ? SliderThumb.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"     |
+  // ----------------------------------------------------------------------
+
+  /**
+   * @ignore
+   */
+  children: _propTypes.default.node
+} : void 0;
 const SliderValueLabel = (0, _styled.default)(_SliderUnstyled.SliderValueLabelUnstyled, {
   name: 'MuiSlider',
   slot: 'ValueLabel',
@@ -291,6 +345,19 @@ const SliderValueLabel = (0, _styled.default)(_SliderUnstyled.SliderValueLabelUn
   }
 }));
 exports.SliderValueLabel = SliderValueLabel;
+process.env.NODE_ENV !== "production" ? SliderValueLabel.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"     |
+  // ----------------------------------------------------------------------
+
+  /**
+   * @ignore
+   */
+  children: _propTypes.default.node
+} : void 0;
 const SliderMark = (0, _styled.default)('span', {
   name: 'MuiSlider',
   slot: 'Mark',
@@ -317,6 +384,19 @@ const SliderMark = (0, _styled.default)('span', {
   opacity: 0.8
 }));
 exports.SliderMark = SliderMark;
+process.env.NODE_ENV !== "production" ? SliderMark.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"     |
+  // ----------------------------------------------------------------------
+
+  /**
+   * @ignore
+   */
+  children: _propTypes.default.node
+} : void 0;
 const SliderMarkLabel = (0, _styled.default)('span', {
   name: 'MuiSlider',
   slot: 'MarkLabel',
@@ -346,7 +426,9 @@ const SliderMarkLabel = (0, _styled.default)('span', {
   color: theme.palette.text.primary
 }));
 exports.SliderMarkLabel = SliderMarkLabel;
-SliderRoot.propTypes = {
+process.env.NODE_ENV !== "production" ? SliderMarkLabel.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"     |
@@ -355,40 +437,8 @@ SliderRoot.propTypes = {
   /**
    * @ignore
    */
-  children: _propTypes.default.node,
-
-  /**
-   * @ignore
-   */
-  ownerState: _propTypes.default.shape({
-    'aria-label': _propTypes.default.string,
-    'aria-labelledby': _propTypes.default.string,
-    'aria-valuetext': _propTypes.default.string,
-    classes: _propTypes.default.object,
-    color: _propTypes.default.oneOf(['primary', 'secondary']),
-    defaultValue: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.number), _propTypes.default.number]),
-    disabled: _propTypes.default.bool,
-    getAriaLabel: _propTypes.default.func,
-    getAriaValueText: _propTypes.default.func,
-    isRtl: _propTypes.default.bool,
-    marks: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.shape({
-      label: _propTypes.default.node,
-      value: _propTypes.default.number.isRequired
-    })), _propTypes.default.bool]),
-    max: _propTypes.default.number,
-    min: _propTypes.default.number,
-    name: _propTypes.default.string,
-    onChange: _propTypes.default.func,
-    onChangeCommitted: _propTypes.default.func,
-    orientation: _propTypes.default.oneOf(['horizontal', 'vertical']),
-    scale: _propTypes.default.func,
-    step: _propTypes.default.number,
-    track: _propTypes.default.oneOf(['inverted', 'normal', false]),
-    value: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.number), _propTypes.default.number]),
-    valueLabelDisplay: _propTypes.default.oneOf(['auto', 'off', 'on']),
-    valueLabelFormat: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string])
-  })
-};
+  children: _propTypes.default.node
+} : void 0;
 
 const extendUtilityClasses = ownerState => {
   const {
@@ -402,20 +452,18 @@ const extendUtilityClasses = ownerState => {
   });
 };
 
-const shouldSpreadOwnerState = Component => {
-  return !Component || !(0, _base.isHostComponent)(Component);
-};
-
-const Slider = /*#__PURE__*/React.forwardRef(function Slider(sliderProps, ref) {
+const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   var _componentsProps$root, _componentsProps$thum, _componentsProps$trac, _componentsProps$valu;
 
   const props = (0, _useThemeProps.default)({
-    props: sliderProps,
+    props: inputProps,
     name: 'MuiSlider'
   });
   const theme = (0, _useTheme.default)();
   const isRtl = theme.direction === 'rtl';
   const {
+    // eslint-disable-next-line react/prop-types
+    component = 'span',
     components = {},
     componentsProps = {},
     color = 'primary',
@@ -439,25 +487,26 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(sliderProps, ref) {
       MarkLabel: SliderMarkLabel
     }, components),
     componentsProps: (0, _extends2.default)({}, componentsProps, {
-      root: (0, _extends2.default)({}, componentsProps.root, shouldSpreadOwnerState(components.Root) && {
+      root: (0, _extends2.default)({}, componentsProps.root, (0, _shouldSpreadAdditionalProps.default)(components.Root) && {
+        as: component,
         ownerState: (0, _extends2.default)({}, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState, {
           color,
           size
         })
       }),
-      thumb: (0, _extends2.default)({}, componentsProps.thumb, shouldSpreadOwnerState(components.Thumb) && {
+      thumb: (0, _extends2.default)({}, componentsProps.thumb, (0, _shouldSpreadAdditionalProps.default)(components.Thumb) && {
         ownerState: (0, _extends2.default)({}, (_componentsProps$thum = componentsProps.thumb) == null ? void 0 : _componentsProps$thum.ownerState, {
           color,
           size
         })
       }),
-      track: (0, _extends2.default)({}, componentsProps.track, shouldSpreadOwnerState(components.Track) && {
+      track: (0, _extends2.default)({}, componentsProps.track, (0, _shouldSpreadAdditionalProps.default)(components.Track) && {
         ownerState: (0, _extends2.default)({}, (_componentsProps$trac = componentsProps.track) == null ? void 0 : _componentsProps$trac.ownerState, {
           color,
           size
         })
       }),
-      valueLabel: (0, _extends2.default)({}, componentsProps.valueLabel, shouldSpreadOwnerState(components.ValueLabel) && {
+      valueLabel: (0, _extends2.default)({}, componentsProps.valueLabel, (0, _shouldSpreadAdditionalProps.default)(components.ValueLabel) && {
         ownerState: (0, _extends2.default)({}, (_componentsProps$valu = componentsProps.valueLabel) == null ? void 0 : _componentsProps$valu.ownerState, {
           color,
           size
@@ -669,7 +718,9 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
    * The size of the slider.
    * @default 'medium'
    */
-  size: _propTypes.default.oneOf(['small', 'medium']),
+  size: _propTypes.default
+  /* @typescript-to-proptypes-ignore */
+  .oneOfType([_propTypes.default.oneOf(['small', 'medium']), _propTypes.default.string]),
 
   /**
    * The granularity with which the slider can step through values. (A "discrete" slider.)

package/node/Snackbar/Snackbar.js

@@ -315,7 +315,10 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       ownerState: ownerState,
-      ref: ref
+      ref: ref // ClickAwayListener adds an `onClick` prop which results in the alert not being announced.
+      // See https://github.com/mui-org/material-ui/issues/29080
+      ,
+      role: "presentation"
     }, other, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, (0, _extends2.default)({
         appear: true,

package/node/SvgIcon/SvgIcon.js

@@ -60,7 +60,7 @@ const SvgIconRoot = (0, _styled.default)('svg', {
   theme,
   ownerState
 }) => {
-  var _theme$palette$ownerS, _theme$palette$ownerS2;
+  var _theme$transitions, _theme$transitions$cr, _theme$transitions2, _theme$transitions2$d, _theme$typography, _theme$typography$pxT, _theme$typography2, _theme$typography2$px, _theme$typography3, _theme$typography3$px, _theme$palette$ownerS, _theme$palette, _theme$palette$ownerS2, _theme$palette2, _theme$palette2$actio, _theme$palette3, _theme$palette3$actio;
 
   return {
     userSelect: 'none',
@@ -69,19 +69,19 @@ const SvgIconRoot = (0, _styled.default)('svg', {
     display: 'inline-block',
     fill: 'currentColor',
     flexShrink: 0,
-    transition: theme.transitions.create('fill', {
-      duration: theme.transitions.duration.shorter
+    transition: (_theme$transitions = theme.transitions) == null ? void 0 : (_theme$transitions$cr = _theme$transitions.create) == null ? void 0 : _theme$transitions$cr.call(_theme$transitions, 'fill', {
+      duration: (_theme$transitions2 = theme.transitions) == null ? void 0 : (_theme$transitions2$d = _theme$transitions2.duration) == null ? void 0 : _theme$transitions2$d.shorter
     }),
     fontSize: {
       inherit: 'inherit',
-      small: theme.typography.pxToRem(20),
-      medium: theme.typography.pxToRem(24),
-      large: theme.typography.pxToRem(35)
+      small: ((_theme$typography = theme.typography) == null ? void 0 : (_theme$typography$pxT = _theme$typography.pxToRem) == null ? void 0 : _theme$typography$pxT.call(_theme$typography, 20)) || '1.25rem',
+      medium: ((_theme$typography2 = theme.typography) == null ? void 0 : (_theme$typography2$px = _theme$typography2.pxToRem) == null ? void 0 : _theme$typography2$px.call(_theme$typography2, 24)) || '1.5rem',
+      large: ((_theme$typography3 = theme.typography) == null ? void 0 : (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875'
     }[ownerState.fontSize],
     // TODO v5 deprecate, v6 remove for sx
-    color: (_theme$palette$ownerS = (_theme$palette$ownerS2 = theme.palette[ownerState.color]) == null ? void 0 : _theme$palette$ownerS2.main) != null ? _theme$palette$ownerS : {
-      action: theme.palette.action.active,
-      disabled: theme.palette.action.disabled,
+    color: (_theme$palette$ownerS = (_theme$palette = theme.palette) == null ? void 0 : (_theme$palette$ownerS2 = _theme$palette[ownerState.color]) == null ? void 0 : _theme$palette$ownerS2.main) != null ? _theme$palette$ownerS : {
+      action: (_theme$palette2 = theme.palette) == null ? void 0 : (_theme$palette2$actio = _theme$palette2.action) == null ? void 0 : _theme$palette2$actio.active,
+      disabled: (_theme$palette3 = theme.palette) == null ? void 0 : (_theme$palette3$actio = _theme$palette3.action) == null ? void 0 : _theme$palette3$actio.disabled,
       inherit: undefined
     }[ownerState.color]
   };

package/node/SwipeableDrawer/SwipeArea.js

@@ -31,9 +31,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const SwipeAreaRoot = (0, _styled.default)('div', {
-  skipSx: true
-})(({
+const SwipeAreaRoot = (0, _styled.default)('div')(({
   theme,
   ownerState
 }) => (0, _extends2.default)({

package/node/TextField/TextField.js

@@ -217,7 +217,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
     variant: variant,
     ownerState: ownerState
   }, other, {
-    children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, (0, _extends2.default)({
+    children: [label != null && label !== '' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, (0, _extends2.default)({
       htmlFor: id,
       id: inputLabelId
     }, InputLabelProps, {