@mui/material 5.14.17 → 5.14.19

package/legacy/InputBase/InputBase.js

@@ -84,7 +84,6 @@ export var InputBaseComponent = styled('input', {
   slot: 'Input',
   overridesResolver: inputOverridesResolver
 })(function (_ref2) {
-  var _extends3;
   var theme = _ref2.theme,
     ownerState = _ref2.ownerState;
   var light = theme.palette.mode === 'light';
@@ -107,7 +106,7 @@ export var InputBaseComponent = styled('input', {
   } : {
     opacity: light ? 0.42 : 0.5
   };
-  return _extends((_extends3 = {
+  return _extends(_defineProperty(_defineProperty(_defineProperty({
     font: 'inherit',
     letterSpacing: 'inherit',
     color: 'currentColor',
@@ -145,7 +144,7 @@ export var InputBaseComponent = styled('input', {
       // Remove the padding when type=search.
       WebkitAppearance: 'none'
     }
-  }, _defineProperty(_extends3, "label[data-shrink=false] + .".concat(inputBaseClasses.formControl, " &"), {
+  }, "label[data-shrink=false] + .".concat(inputBaseClasses.formControl, " &"), {
     '&::-webkit-input-placeholder': placeholderHidden,
     '&::-moz-placeholder': placeholderHidden,
     // Firefox 19+
@@ -159,14 +158,14 @@ export var InputBaseComponent = styled('input', {
     '&:focus:-ms-input-placeholder': placeholderVisible,
     // IE11
     '&:focus::-ms-input-placeholder': placeholderVisible // Edge
-  }), _defineProperty(_extends3, "&.".concat(inputBaseClasses.disabled), {
+  }), "&.".concat(inputBaseClasses.disabled), {
     opacity: 1,
     // Reset iOS opacity
     WebkitTextFillColor: (theme.vars || theme).palette.text.disabled // Fix opacity Safari bug
-  }), _defineProperty(_extends3, '&:-webkit-autofill', {
+  }), '&:-webkit-autofill', {
     animationDuration: '5000s',
     animationName: 'mui-auto-fill'
-  }), _extends3), ownerState.size === 'small' && {
+  }), ownerState.size === 'small' && {
     paddingTop: 1
   }, ownerState.multiline && {
     height: 'auto',

package/legacy/InputLabel/InputLabel.js

@@ -101,7 +101,11 @@ var InputLabelRoot = styled(FormLabel, {
     // but it feels a better when it bleeds a bit on the left, so 32px.
     maxWidth: 'calc(133% - 32px)',
     transform: 'translate(14px, -9px) scale(0.75)'
-  }));
+  }), ownerState.variant === 'standard' && {
+    '&:not(label) + div': {
+      marginTop: 16
+    }
+  });
 });
 var InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, ref) {
   var props = useThemeProps({

package/legacy/ListItem/ListItem.js

@@ -47,7 +47,6 @@ export var ListItemRoot = styled('div', {
   slot: 'Root',
   overridesResolver: overridesResolver
 })(function (_ref) {
-  var _extends2;
   var theme = _ref.theme,
     ownerState = _ref.ownerState;
   return _extends({
@@ -74,15 +73,15 @@ export var ListItemRoot = styled('div', {
     paddingRight: 48
   }), !!ownerState.secondaryAction && _defineProperty({}, "& > .".concat(listItemButtonClasses.root), {
     paddingRight: 48
-  }), (_extends2 = {}, _defineProperty(_extends2, "&.".concat(listItemClasses.focusVisible), {
+  }), _defineProperty(_defineProperty(_defineProperty({}, "&.".concat(listItemClasses.focusVisible), {
     backgroundColor: (theme.vars || theme).palette.action.focus
-  }), _defineProperty(_extends2, "&.".concat(listItemClasses.selected), _defineProperty({
+  }), "&.".concat(listItemClasses.selected), _defineProperty({
     backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
   }, "&.".concat(listItemClasses.focusVisible), {
     backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.focusOpacity, "))") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
-  })), _defineProperty(_extends2, "&.".concat(listItemClasses.disabled), {
+  })), "&.".concat(listItemClasses.disabled), {
     opacity: (theme.vars || theme).palette.action.disabledOpacity
-  }), _extends2), ownerState.alignItems === 'flex-start' && {
+  }), ownerState.alignItems === 'flex-start' && {
     alignItems: 'flex-start'
   }, ownerState.divider && {
     borderBottom: "1px solid ".concat((theme.vars || theme).palette.divider),

package/legacy/ListItemButton/ListItemButton.js

@@ -42,10 +42,9 @@ var ListItemButtonRoot = styled(ButtonBase, {
   slot: 'Root',
   overridesResolver: overridesResolver
 })(function (_ref) {
-  var _extends2;
   var theme = _ref.theme,
     ownerState = _ref.ownerState;
-  return _extends((_extends2 = {
+  return _extends(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
     display: 'flex',
     flexGrow: 1,
     justifyContent: 'flex-start',
@@ -68,21 +67,21 @@ var ListItemButtonRoot = styled(ButtonBase, {
         backgroundColor: 'transparent'
       }
     }
-  }, _defineProperty(_extends2, "&.".concat(listItemButtonClasses.selected), _defineProperty({
+  }, "&.".concat(listItemButtonClasses.selected), _defineProperty({
     backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
   }, "&.".concat(listItemButtonClasses.focusVisible), {
     backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.focusOpacity, "))") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
-  })), _defineProperty(_extends2, "&.".concat(listItemButtonClasses.selected, ":hover"), {
+  })), "&.".concat(listItemButtonClasses.selected, ":hover"), {
     backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.hoverOpacity, "))") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
     }
-  }), _defineProperty(_extends2, "&.".concat(listItemButtonClasses.focusVisible), {
+  }), "&.".concat(listItemButtonClasses.focusVisible), {
     backgroundColor: (theme.vars || theme).palette.action.focus
-  }), _defineProperty(_extends2, "&.".concat(listItemButtonClasses.disabled), {
+  }), "&.".concat(listItemButtonClasses.disabled), {
     opacity: (theme.vars || theme).palette.action.disabledOpacity
-  }), _extends2), ownerState.divider && {
+  }), ownerState.divider && {
     borderBottom: "1px solid ".concat((theme.vars || theme).palette.divider),
     backgroundClip: 'padding-box'
   }, ownerState.alignItems === 'flex-start' && {

package/legacy/MenuItem/MenuItem.js

@@ -44,7 +44,6 @@ var MenuItemRoot = styled(ButtonBase, {
   slot: 'Root',
   overridesResolver: overridesResolver
 })(function (_ref) {
-  var _extends2;
   var theme = _ref.theme,
     ownerState = _ref.ownerState;
   return _extends({}, theme.typography.body1, {
@@ -64,7 +63,7 @@ var MenuItemRoot = styled(ButtonBase, {
   }, ownerState.divider && {
     borderBottom: "1px solid ".concat((theme.vars || theme).palette.divider),
     backgroundClip: 'padding-box'
-  }, (_extends2 = {
+  }, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
     '&:hover': {
       textDecoration: 'none',
       backgroundColor: (theme.vars || theme).palette.action.hover,
@@ -73,33 +72,33 @@ var MenuItemRoot = styled(ButtonBase, {
         backgroundColor: 'transparent'
       }
     }
-  }, _defineProperty(_extends2, "&.".concat(menuItemClasses.selected), _defineProperty({
+  }, "&.".concat(menuItemClasses.selected), _defineProperty({
     backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
   }, "&.".concat(menuItemClasses.focusVisible), {
     backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.focusOpacity, "))") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
-  })), _defineProperty(_extends2, "&.".concat(menuItemClasses.selected, ":hover"), {
+  })), "&.".concat(menuItemClasses.selected, ":hover"), {
     backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.hoverOpacity, "))") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
     }
-  }), _defineProperty(_extends2, "&.".concat(menuItemClasses.focusVisible), {
+  }), "&.".concat(menuItemClasses.focusVisible), {
     backgroundColor: (theme.vars || theme).palette.action.focus
-  }), _defineProperty(_extends2, "&.".concat(menuItemClasses.disabled), {
+  }), "&.".concat(menuItemClasses.disabled), {
     opacity: (theme.vars || theme).palette.action.disabledOpacity
-  }), _defineProperty(_extends2, "& + .".concat(dividerClasses.root), {
+  }), "& + .".concat(dividerClasses.root), {
     marginTop: theme.spacing(1),
     marginBottom: theme.spacing(1)
-  }), _defineProperty(_extends2, "& + .".concat(dividerClasses.inset), {
+  }), "& + .".concat(dividerClasses.inset), {
     marginLeft: 52
-  }), _defineProperty(_extends2, "& .".concat(listItemTextClasses.root), {
+  }), "& .".concat(listItemTextClasses.root), {
     marginTop: 0,
     marginBottom: 0
-  }), _defineProperty(_extends2, "& .".concat(listItemTextClasses.inset), {
+  }), "& .".concat(listItemTextClasses.inset), {
     paddingLeft: 36
-  }), _defineProperty(_extends2, "& .".concat(listItemIconClasses.root), {
+  }), "& .".concat(listItemIconClasses.root), {
     minWidth: 36
-  }), _extends2), !ownerState.dense && _defineProperty({}, theme.breakpoints.up('sm'), {
+  }), !ownerState.dense && _defineProperty({}, theme.breakpoints.up('sm'), {
     minHeight: 'auto'
   }), ownerState.dense && _extends({
     minHeight: 32,

package/legacy/Modal/Modal.js

@@ -284,6 +284,9 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes /* remove-proptypes */ =
    * An HTML element or function that returns one.
    * The `container` will have the portal children appended to it.
    *
+   * You can also provide a callback, which is called in a React layout effect.
+   * This lets you set the container from a ref, and also makes server-side rendering possible.
+   *
    * By default, it uses the body of the top-level document object,
    * so it's simply `document.body` most of the time.
    */

package/legacy/NativeSelect/NativeSelectInput.js

@@ -27,10 +27,9 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   return composeClasses(slots, getNativeSelectUtilityClasses, classes);
 };
 export var nativeSelectSelectStyles = function nativeSelectSelectStyles(_ref) {
-  var _extends2;
   var ownerState = _ref.ownerState,
     theme = _ref.theme;
-  return _extends((_extends2 = {
+  return _extends(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
     MozAppearance: 'none',
     // Reset
     WebkitAppearance: 'none',
@@ -53,16 +52,16 @@ export var nativeSelectSelectStyles = function nativeSelectSelectStyles(_ref) {
     '&::-ms-expand': {
       display: 'none'
     }
-  }, _defineProperty(_extends2, "&.".concat(nativeSelectClasses.disabled), {
+  }, "&.".concat(nativeSelectClasses.disabled), {
     cursor: 'default'
-  }), _defineProperty(_extends2, '&[multiple]', {
+  }), '&[multiple]', {
     height: 'auto'
-  }), _defineProperty(_extends2, '&:not([multiple]) option, &:not([multiple]) optgroup', {
+  }), '&:not([multiple]) option, &:not([multiple]) optgroup', {
     backgroundColor: (theme.vars || theme).palette.background.paper
-  }), _defineProperty(_extends2, '&&&', {
+  }), '&&&', {
     paddingRight: 24,
     minWidth: 16 // So it doesn't collapse.
-  }), _extends2), ownerState.variant === 'filled' && {
+  }), ownerState.variant === 'filled' && {
     '&&&': {
       paddingRight: 32
     }

package/legacy/OutlinedInput/OutlinedInput.js

@@ -34,25 +34,24 @@ var OutlinedInputRoot = styled(InputBaseRoot, {
   slot: 'Root',
   overridesResolver: inputBaseRootOverridesResolver
 })(function (_ref) {
-  var _extends2;
   var theme = _ref.theme,
     ownerState = _ref.ownerState;
   var borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
-  return _extends((_extends2 = {
+  return _extends(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
     position: 'relative',
     borderRadius: (theme.vars || theme).shape.borderRadius
-  }, _defineProperty(_extends2, "&:hover .".concat(outlinedInputClasses.notchedOutline), {
+  }, "&:hover .".concat(outlinedInputClasses.notchedOutline), {
     borderColor: (theme.vars || theme).palette.text.primary
-  }), _defineProperty(_extends2, '@media (hover: none)', _defineProperty({}, "&:hover .".concat(outlinedInputClasses.notchedOutline), {
+  }), '@media (hover: none)', _defineProperty({}, "&:hover .".concat(outlinedInputClasses.notchedOutline), {
     borderColor: theme.vars ? "rgba(".concat(theme.vars.palette.common.onBackgroundChannel, " / 0.23)") : borderColor
-  })), _defineProperty(_extends2, "&.".concat(outlinedInputClasses.focused, " .").concat(outlinedInputClasses.notchedOutline), {
+  })), "&.".concat(outlinedInputClasses.focused, " .").concat(outlinedInputClasses.notchedOutline), {
     borderColor: (theme.vars || theme).palette[ownerState.color].main,
     borderWidth: 2
-  }), _defineProperty(_extends2, "&.".concat(outlinedInputClasses.error, " .").concat(outlinedInputClasses.notchedOutline), {
+  }), "&.".concat(outlinedInputClasses.error, " .").concat(outlinedInputClasses.notchedOutline), {
     borderColor: (theme.vars || theme).palette.error.main
-  }), _defineProperty(_extends2, "&.".concat(outlinedInputClasses.disabled, " .").concat(outlinedInputClasses.notchedOutline), {
+  }), "&.".concat(outlinedInputClasses.disabled, " .").concat(outlinedInputClasses.notchedOutline), {
     borderColor: (theme.vars || theme).palette.action.disabled
-  }), _extends2), ownerState.startAdornment && {
+  }), ownerState.startAdornment && {
     paddingLeft: 14
   }, ownerState.endAdornment && {
     paddingRight: 14

package/legacy/PaginationItem/PaginationItem.js

@@ -82,10 +82,9 @@ var PaginationItemPage = styled(ButtonBase, {
   slot: 'Root',
   overridesResolver: overridesResolver
 })(function (_ref2) {
-  var _$concat, _extends3;
   var theme = _ref2.theme,
     ownerState = _ref2.ownerState;
-  return _extends({}, theme.typography.body2, (_extends3 = {
+  return _extends({}, theme.typography.body2, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
     borderRadius: 32 / 2,
     textAlign: 'center',
     boxSizing: 'border-box',
@@ -94,19 +93,19 @@ var PaginationItemPage = styled(ButtonBase, {
     padding: '0 6px',
     margin: '0 3px',
     color: (theme.vars || theme).palette.text.primary
-  }, _defineProperty(_extends3, "&.".concat(paginationItemClasses.focusVisible), {
+  }, "&.".concat(paginationItemClasses.focusVisible), {
     backgroundColor: (theme.vars || theme).palette.action.focus
-  }), _defineProperty(_extends3, "&.".concat(paginationItemClasses.disabled), {
+  }), "&.".concat(paginationItemClasses.disabled), {
     opacity: (theme.vars || theme).palette.action.disabledOpacity
-  }), _defineProperty(_extends3, "transition", theme.transitions.create(['color', 'background-color'], {
+  }), "transition", theme.transitions.create(['color', 'background-color'], {
     duration: theme.transitions.duration.short
-  })), _defineProperty(_extends3, '&:hover', {
+  })), '&:hover', {
     backgroundColor: (theme.vars || theme).palette.action.hover,
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       backgroundColor: 'transparent'
     }
-  }), _defineProperty(_extends3, "&.".concat(paginationItemClasses.selected), (_$concat = {
+  }), "&.".concat(paginationItemClasses.selected), _defineProperty(_defineProperty({
     backgroundColor: (theme.vars || theme).palette.action.selected,
     '&:hover': {
       backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.action.selectedChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.hoverOpacity, "))") : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
@@ -115,13 +114,13 @@ var PaginationItemPage = styled(ButtonBase, {
         backgroundColor: (theme.vars || theme).palette.action.selected
       }
     }
-  }, _defineProperty(_$concat, "&.".concat(paginationItemClasses.focusVisible), {
+  }, "&.".concat(paginationItemClasses.focusVisible), {
     backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.action.selectedChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.focusOpacity, "))") : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
-  }), _defineProperty(_$concat, "&.".concat(paginationItemClasses.disabled), {
+  }), "&.".concat(paginationItemClasses.disabled), {
     opacity: 1,
     color: (theme.vars || theme).palette.action.disabled,
     backgroundColor: (theme.vars || theme).palette.action.selected
-  }), _$concat)), _extends3), ownerState.size === 'small' && {
+  })), ownerState.size === 'small' && {
     minWidth: 26,
     height: 26,
     borderRadius: 26 / 2,

package/legacy/Popper/Popper.js

@@ -116,6 +116,9 @@ process.env.NODE_ENV !== "production" ? Popper.propTypes /* remove-proptypes */
    * An HTML element or function that returns one.
    * The `container` will have the portal children appended to it.
    *
+   * You can also provide a callback, which is called in a React layout effect.
+   * This lets you set the container from a ref, and also makes server-side rendering possible.
+   *
    * By default, it uses the body of the top-level document object,
    * so it's simply `document.body` most of the time.
    */

package/legacy/Rating/Rating.js

@@ -68,10 +68,9 @@ var RatingRoot = styled('span', {
     return [_defineProperty({}, "& .".concat(ratingClasses.visuallyHidden), styles.visuallyHidden), styles.root, styles["size".concat(capitalize(ownerState.size))], ownerState.readOnly && styles.readOnly];
   }
 })(function (_ref2) {
-  var _extends2;
   var theme = _ref2.theme,
     ownerState = _ref2.ownerState;
-  return _extends((_extends2 = {
+  return _extends(_defineProperty(_defineProperty(_defineProperty({
     display: 'inline-flex',
     // Required to position the pristine input absolutely
     position: 'relative',
@@ -80,12 +79,12 @@ var RatingRoot = styled('span', {
     cursor: 'pointer',
     textAlign: 'left',
     WebkitTapHighlightColor: 'transparent'
-  }, _defineProperty(_extends2, "&.".concat(ratingClasses.disabled), {
+  }, "&.".concat(ratingClasses.disabled), {
     opacity: (theme.vars || theme).palette.action.disabledOpacity,
     pointerEvents: 'none'
-  }), _defineProperty(_extends2, "&.".concat(ratingClasses.focusVisible, " .").concat(ratingClasses.iconActive), {
+  }), "&.".concat(ratingClasses.focusVisible, " .").concat(ratingClasses.iconActive), {
     outline: '1px solid #999'
-  }), _defineProperty(_extends2, "& .".concat(ratingClasses.visuallyHidden), visuallyHidden), _extends2), ownerState.size === 'small' && {
+  }), "& .".concat(ratingClasses.visuallyHidden), visuallyHidden), ownerState.size === 'small' && {
     fontSize: theme.typography.pxToRem(18)
   }, ownerState.size === 'large' && {
     fontSize: theme.typography.pxToRem(30)
@@ -346,14 +345,13 @@ var Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
     var rootNode = rootRef.current;
     var _rootNode$getBounding = rootNode.getBoundingClientRect(),
       right = _rootNode$getBounding.right,
-      left = _rootNode$getBounding.left;
-    var _rootNode$firstChild$ = rootNode.firstChild.getBoundingClientRect(),
-      width = _rootNode$firstChild$.width;
+      left = _rootNode$getBounding.left,
+      containerWidth = _rootNode$getBounding.width;
     var percent;
     if (theme.direction === 'rtl') {
-      percent = (right - event.clientX) / (width * max);
+      percent = (right - event.clientX) / containerWidth;
     } else {
-      percent = (event.clientX - left) / (width * max);
+      percent = (event.clientX - left) / containerWidth;
     }
     var newHover = roundValueToPrecision(max * percent + precision / 2, precision);
     newHover = clamp(newHover, precision, max);

package/legacy/Select/SelectInput.js

@@ -446,6 +446,7 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
   var classes = useUtilityClasses(ownerState);
   var paperProps = _extends({}, MenuProps.PaperProps, (_MenuProps$slotProps = MenuProps.slotProps) == null ? void 0 : _MenuProps$slotProps.paper);
   var listboxId = useId();
+  var hiddenInputId = useId();
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(SelectSelect, _extends({
       ref: handleDisplayRef,
@@ -476,7 +477,7 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
     })), /*#__PURE__*/_jsx(SelectNativeInput, _extends({
       "aria-invalid": error,
       value: Array.isArray(value) ? value.join(',') : value,
-      name: name,
+      name: name != null ? name : hiddenInputId,
       ref: inputRef,
       "aria-hidden": true,
       onChange: handleChange,

package/legacy/Slider/Slider.js

@@ -30,7 +30,6 @@ export var SliderRoot = styled('span', {
     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;
   var theme = _ref.theme,
     ownerState = _ref.ownerState;
   return _extends({
@@ -68,17 +67,17 @@ export var SliderRoot = styled('span', {
     width: 2
   }, ownerState.marked && {
     marginRight: 44
-  }), (_extends2 = {
+  }), _defineProperty(_defineProperty({
     '@media print': {
       colorAdjust: 'exact'
     }
-  }, _defineProperty(_extends2, "&.".concat(sliderClasses.disabled), {
+  }, "&.".concat(sliderClasses.disabled), {
     pointerEvents: 'none',
     cursor: 'default',
     color: (theme.vars || theme).palette.grey[400]
-  }), _defineProperty(_extends2, "&.".concat(sliderClasses.dragging), _defineProperty({}, "& .".concat(sliderClasses.thumb, ", & .").concat(sliderClasses.track), {
+  }), "&.".concat(sliderClasses.dragging), _defineProperty({}, "& .".concat(sliderClasses.thumb, ", & .").concat(sliderClasses.track), {
     transition: 'none'
-  })), _extends2));
+  })));
 });
 export var SliderRail = styled('span', {
   name: 'MuiSlider',
@@ -154,7 +153,6 @@ export var SliderThumb = styled('span', {
     return [styles.thumb, styles["thumbColor".concat(capitalize(ownerState.color))], ownerState.size !== 'medium' && styles["thumbSize".concat(capitalize(ownerState.size))]];
   }
 })(function (_ref4) {
-  var _extends3;
   var theme = _ref4.theme,
     ownerState = _ref4.ownerState;
   return _extends({
@@ -180,7 +178,7 @@ export var SliderThumb = styled('span', {
   }, ownerState.orientation === 'vertical' && {
     left: '50%',
     transform: 'translate(-50%, 50%)'
-  }, (_extends3 = {
+  }, _defineProperty(_defineProperty(_defineProperty({
     '&:before': _extends({
       position: 'absolute',
       content: '""',
@@ -202,18 +200,18 @@ export var SliderThumb = styled('span', {
       left: '50%',
       transform: 'translate(-50%, -50%)'
     }
-  }, _defineProperty(_extends3, "&:hover, &.".concat(sliderClasses.focusVisible), {
+  }, "&:hover, &.".concat(sliderClasses.focusVisible), {
     boxShadow: "0px 0px 0px 8px ".concat(theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / 0.16)") : alpha(theme.palette[ownerState.color].main, 0.16)),
     '@media (hover: none)': {
       boxShadow: 'none'
     }
-  }), _defineProperty(_extends3, "&.".concat(sliderClasses.active), {
+  }), "&.".concat(sliderClasses.active), {
     boxShadow: "0px 0px 0px 14px ".concat(theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / 0.16)") : alpha(theme.palette[ownerState.color].main, 0.16))
-  }), _defineProperty(_extends3, "&.".concat(sliderClasses.disabled), {
+  }), "&.".concat(sliderClasses.disabled), {
     '&:hover': {
       boxShadow: 'none'
     }
-  }), _extends3));
+  }));
 });
 export var SliderValueLabel = styled(BaseSliderValueLabel, {
   name: 'MuiSlider',
@@ -222,12 +220,11 @@ export var SliderValueLabel = styled(BaseSliderValueLabel, {
     return styles.valueLabel;
   }
 })(function (_ref5) {
-  var _extends4;
   var theme = _ref5.theme,
     ownerState = _ref5.ownerState;
-  return _extends((_extends4 = {}, _defineProperty(_extends4, "&.".concat(sliderClasses.valueLabelOpen), {
+  return _extends(_defineProperty(_defineProperty(_defineProperty({}, "&.".concat(sliderClasses.valueLabelOpen), {
     transform: "".concat(ownerState.orientation === 'vertical' ? 'translateY(-50%)' : 'translateY(-100%)', " scale(1)")
-  }), _defineProperty(_extends4, "zIndex", 1), _defineProperty(_extends4, "whiteSpace", 'nowrap'), _extends4), theme.typography.body2, {
+  }), "zIndex", 1), "whiteSpace", 'nowrap'), theme.typography.body2, {
     fontWeight: 500,
     transition: theme.transitions.create(['transform'], {
       duration: theme.transitions.duration.shortest

package/legacy/SpeedDialIcon/SpeedDialIcon.js

@@ -32,12 +32,11 @@ var SpeedDialIconRoot = styled('span', {
     return [_defineProperty({}, "& .".concat(speedDialIconClasses.icon), styles.icon), _defineProperty({}, "& .".concat(speedDialIconClasses.icon), ownerState.open && styles.iconOpen), _defineProperty({}, "& .".concat(speedDialIconClasses.icon), ownerState.open && ownerState.openIcon && styles.iconWithOpenIconOpen), _defineProperty({}, "& .".concat(speedDialIconClasses.openIcon), styles.openIcon), _defineProperty({}, "& .".concat(speedDialIconClasses.openIcon), ownerState.open && styles.openIconOpen), styles.root];
   }
 })(function (_ref6) {
-  var _ref7;
   var theme = _ref6.theme,
     ownerState = _ref6.ownerState;
-  return _ref7 = {
+  return _defineProperty(_defineProperty({
     height: 24
-  }, _defineProperty(_ref7, "& .".concat(speedDialIconClasses.icon), _extends({
+  }, "& .".concat(speedDialIconClasses.icon), _extends({
     transition: theme.transitions.create(['transform', 'opacity'], {
       duration: theme.transitions.duration.short
     })
@@ -45,7 +44,7 @@ var SpeedDialIconRoot = styled('span', {
     transform: 'rotate(45deg)'
   }, ownerState.openIcon && {
     opacity: 0
-  }))), _defineProperty(_ref7, "& .".concat(speedDialIconClasses.openIcon), _extends({
+  }))), "& .".concat(speedDialIconClasses.openIcon), _extends({
     position: 'absolute',
     transition: theme.transitions.create(['transform', 'opacity'], {
       duration: theme.transitions.duration.short
@@ -55,7 +54,7 @@ var SpeedDialIconRoot = styled('span', {
   }, ownerState.open && {
     transform: 'rotate(0deg)',
     opacity: 1
-  })), _ref7;
+  }));
 });
 var SpeedDialIcon = /*#__PURE__*/React.forwardRef(function SpeedDialIcon(inProps, ref) {
   var props = useThemeProps({

package/legacy/StepButton/StepButton.js

@@ -70,7 +70,7 @@ var StepButton = /*#__PURE__*/React.forwardRef(function StepButton(inProps, ref)
     icon: icon,
     optional: optional
   };
-  var child = isMuiElement(children, ['StepLabel']) ? /*#__PURE__*/React.cloneElement(children, childProps) : /*#__PURE__*/_jsx(StepLabel, _extends({}, childProps, {
+  var child = isMuiElement(children, ['StepLabel']) ? ( /*#__PURE__*/React.cloneElement(children, childProps)) : /*#__PURE__*/_jsx(StepLabel, _extends({}, childProps, {
     children: children
   }));
   return /*#__PURE__*/_jsx(StepButtonRoot, _extends({

package/legacy/StepIcon/StepIcon.js

@@ -34,21 +34,20 @@ var StepIconRoot = styled(SvgIcon, {
     return styles.root;
   }
 })(function (_ref) {
-  var _ref2;
   var theme = _ref.theme;
-  return _ref2 = {
+  return _defineProperty(_defineProperty(_defineProperty({
     display: 'block',
     transition: theme.transitions.create('color', {
       duration: theme.transitions.duration.shortest
     }),
     color: (theme.vars || theme).palette.text.disabled
-  }, _defineProperty(_ref2, "&.".concat(stepIconClasses.completed), {
+  }, "&.".concat(stepIconClasses.completed), {
     color: (theme.vars || theme).palette.primary.main
-  }), _defineProperty(_ref2, "&.".concat(stepIconClasses.active), {
+  }), "&.".concat(stepIconClasses.active), {
     color: (theme.vars || theme).palette.primary.main
-  }), _defineProperty(_ref2, "&.".concat(stepIconClasses.error), {
+  }), "&.".concat(stepIconClasses.error), {
     color: (theme.vars || theme).palette.error.main
-  }), _ref2;
+  });
 });
 var StepIconText = styled('text', {
   name: 'MuiStepIcon',

package/legacy/StepLabel/StepLabel.js

@@ -39,16 +39,15 @@ var StepLabelRoot = styled('span', {
     return [styles.root, styles[ownerState.orientation]];
   }
 })(function (_ref) {
-  var _extends2;
   var ownerState = _ref.ownerState;
-  return _extends((_extends2 = {
+  return _extends(_defineProperty(_defineProperty({
     display: 'flex',
     alignItems: 'center'
-  }, _defineProperty(_extends2, "&.".concat(stepLabelClasses.alternativeLabel), {
+  }, "&.".concat(stepLabelClasses.alternativeLabel), {
     flexDirection: 'column'
-  }), _defineProperty(_extends2, "&.".concat(stepLabelClasses.disabled), {
+  }), "&.".concat(stepLabelClasses.disabled), {
     cursor: 'default'
-  }), _extends2), ownerState.orientation === 'vertical' && {
+  }), ownerState.orientation === 'vertical' && {
     textAlign: 'left',
     padding: '8px 0'
   });
@@ -60,24 +59,23 @@ var StepLabelLabel = styled('span', {
     return styles.label;
   }
 })(function (_ref2) {
-  var _extends3;
   var theme = _ref2.theme;
-  return _extends({}, theme.typography.body2, (_extends3 = {
+  return _extends({}, theme.typography.body2, _defineProperty(_defineProperty(_defineProperty(_defineProperty({
     display: 'block',
     transition: theme.transitions.create('color', {
       duration: theme.transitions.duration.shortest
     })
-  }, _defineProperty(_extends3, "&.".concat(stepLabelClasses.active), {
+  }, "&.".concat(stepLabelClasses.active), {
     color: (theme.vars || theme).palette.text.primary,
     fontWeight: 500
-  }), _defineProperty(_extends3, "&.".concat(stepLabelClasses.completed), {
+  }), "&.".concat(stepLabelClasses.completed), {
     color: (theme.vars || theme).palette.text.primary,
     fontWeight: 500
-  }), _defineProperty(_extends3, "&.".concat(stepLabelClasses.alternativeLabel), {
+  }), "&.".concat(stepLabelClasses.alternativeLabel), {
     marginTop: 16
-  }), _defineProperty(_extends3, "&.".concat(stepLabelClasses.error), {
+  }), "&.".concat(stepLabelClasses.error), {
     color: (theme.vars || theme).palette.error.main
-  }), _extends3));
+  }));
 });
 var StepLabelIconContainer = styled('span', {
   name: 'MuiStepLabel',