@mui/material 5.14.18 → 5.14.20

package/legacy/Switch/Switch.js

@@ -42,7 +42,6 @@ var SwitchRoot = styled('span', {
     return [styles.root, ownerState.edge && styles["edge".concat(capitalize(ownerState.edge))], styles["size".concat(capitalize(ownerState.size))]];
   }
 })(function (_ref) {
-  var _ref2;
   var ownerState = _ref.ownerState;
   return _extends({
     display: 'inline-flex',
@@ -64,18 +63,18 @@ var SwitchRoot = styled('span', {
     marginLeft: -8
   }, ownerState.edge === 'end' && {
     marginRight: -8
-  }, ownerState.size === 'small' && (_ref2 = {
+  }, ownerState.size === 'small' && _defineProperty(_defineProperty({
     width: 40,
     height: 24,
     padding: 7
-  }, _defineProperty(_ref2, "& .".concat(switchClasses.thumb), {
+  }, "& .".concat(switchClasses.thumb), {
     width: 16,
     height: 16
-  }), _defineProperty(_ref2, "& .".concat(switchClasses.switchBase), _defineProperty({
+  }), "& .".concat(switchClasses.switchBase), _defineProperty({
     padding: 4
   }, "&.".concat(switchClasses.checked), {
     transform: 'translateX(16px)'
-  })), _ref2));
+  })));
 });
 var SwitchSwitchBase = styled(SwitchBase, {
   name: 'MuiSwitch',
@@ -85,9 +84,8 @@ var SwitchSwitchBase = styled(SwitchBase, {
     return [styles.switchBase, _defineProperty({}, "& .".concat(switchClasses.input), styles.input), ownerState.color !== 'default' && styles["color".concat(capitalize(ownerState.color))]];
   }
 })(function (_ref4) {
-  var _ref5;
   var theme = _ref4.theme;
-  return _ref5 = {
+  return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
     position: 'absolute',
     top: 0,
     left: 0,
@@ -97,20 +95,19 @@ var SwitchSwitchBase = styled(SwitchBase, {
     transition: theme.transitions.create(['left', 'transform'], {
       duration: theme.transitions.duration.shortest
     })
-  }, _defineProperty(_ref5, "&.".concat(switchClasses.checked), {
+  }, "&.".concat(switchClasses.checked), {
     transform: 'translateX(20px)'
-  }), _defineProperty(_ref5, "&.".concat(switchClasses.disabled), {
+  }), "&.".concat(switchClasses.disabled), {
     color: theme.vars ? theme.vars.palette.Switch.defaultDisabledColor : "".concat(theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[600])
-  }), _defineProperty(_ref5, "&.".concat(switchClasses.checked, " + .").concat(switchClasses.track), {
+  }), "&.".concat(switchClasses.checked, " + .").concat(switchClasses.track), {
     opacity: 0.5
-  }), _defineProperty(_ref5, "&.".concat(switchClasses.disabled, " + .").concat(switchClasses.track), {
+  }), "&.".concat(switchClasses.disabled, " + .").concat(switchClasses.track), {
     opacity: theme.vars ? theme.vars.opacity.switchTrackDisabled : "".concat(theme.palette.mode === 'light' ? 0.12 : 0.2)
-  }), _defineProperty(_ref5, "& .".concat(switchClasses.input), {
+  }), "& .".concat(switchClasses.input), {
     left: '-100%',
     width: '300%'
-  }), _ref5;
+  });
 }, function (_ref6) {
-  var _ref7;
   var theme = _ref6.theme,
     ownerState = _ref6.ownerState;
   return _extends({
@@ -121,7 +118,7 @@ var SwitchSwitchBase = styled(SwitchBase, {
         backgroundColor: 'transparent'
       }
     }
-  }, ownerState.color !== 'default' && (_ref7 = {}, _defineProperty(_ref7, "&.".concat(switchClasses.checked), _defineProperty({
+  }, ownerState.color !== 'default' && _defineProperty(_defineProperty({}, "&.".concat(switchClasses.checked), _defineProperty({
     color: (theme.vars || theme).palette[ownerState.color].main,
     '&:hover': {
       backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
@@ -131,9 +128,9 @@ var SwitchSwitchBase = styled(SwitchBase, {
     }
   }, "&.".concat(switchClasses.disabled), {
     color: theme.vars ? theme.vars.palette.Switch["".concat(ownerState.color, "DisabledColor")] : "".concat(theme.palette.mode === 'light' ? lighten(theme.palette[ownerState.color].main, 0.62) : darken(theme.palette[ownerState.color].main, 0.55))
-  })), _defineProperty(_ref7, "&.".concat(switchClasses.checked, " + .").concat(switchClasses.track), {
+  })), "&.".concat(switchClasses.checked, " + .").concat(switchClasses.track), {
     backgroundColor: (theme.vars || theme).palette[ownerState.color].main
-  }), _ref7));
+  }));
 });
 var SwitchTrack = styled('span', {
   name: 'MuiSwitch',

package/legacy/Tab/Tab.js

@@ -37,7 +37,6 @@ var TabRoot = styled(ButtonBase, {
     return [styles.root, ownerState.label && ownerState.icon && styles.labelIcon, styles["textColor".concat(capitalize(ownerState.textColor))], ownerState.fullWidth && styles.fullWidth, ownerState.wrapped && styles.wrapped];
   }
 })(function (_ref) {
-  var _ref3, _ref4, _ref5;
   var theme = _ref.theme,
     ownerState = _ref.ownerState;
   return _extends({}, theme.typography.button, {
@@ -66,26 +65,26 @@ var TabRoot = styled(ButtonBase, {
     marginRight: theme.spacing(1)
   }, ownerState.iconPosition === 'end' && {
     marginLeft: theme.spacing(1)
-  })), ownerState.textColor === 'inherit' && (_ref3 = {
+  })), ownerState.textColor === 'inherit' && _defineProperty(_defineProperty({
     color: 'inherit',
     opacity: 0.6
-  }, _defineProperty(_ref3, "&.".concat(tabClasses.selected), {
+  }, "&.".concat(tabClasses.selected), {
     opacity: 1
-  }), _defineProperty(_ref3, "&.".concat(tabClasses.disabled), {
+  }), "&.".concat(tabClasses.disabled), {
     opacity: (theme.vars || theme).palette.action.disabledOpacity
-  }), _ref3), ownerState.textColor === 'primary' && (_ref4 = {
+  }), ownerState.textColor === 'primary' && _defineProperty(_defineProperty({
     color: (theme.vars || theme).palette.text.secondary
-  }, _defineProperty(_ref4, "&.".concat(tabClasses.selected), {
+  }, "&.".concat(tabClasses.selected), {
     color: (theme.vars || theme).palette.primary.main
-  }), _defineProperty(_ref4, "&.".concat(tabClasses.disabled), {
+  }), "&.".concat(tabClasses.disabled), {
     color: (theme.vars || theme).palette.text.disabled
-  }), _ref4), ownerState.textColor === 'secondary' && (_ref5 = {
+  }), ownerState.textColor === 'secondary' && _defineProperty(_defineProperty({
     color: (theme.vars || theme).palette.text.secondary
-  }, _defineProperty(_ref5, "&.".concat(tabClasses.selected), {
+  }, "&.".concat(tabClasses.selected), {
     color: (theme.vars || theme).palette.secondary.main
-  }), _defineProperty(_ref5, "&.".concat(tabClasses.disabled), {
+  }), "&.".concat(tabClasses.disabled), {
     color: (theme.vars || theme).palette.text.disabled
-  }), _ref5), ownerState.fullWidth && {
+  }), ownerState.fullWidth && {
     flexShrink: 1,
     flexGrow: 1,
     flexBasis: 0,

package/legacy/TablePagination/TablePagination.js

@@ -47,20 +47,19 @@ var TablePaginationToolbar = styled(Toolbar, {
     return _extends(_defineProperty({}, "& .".concat(tablePaginationClasses.actions), styles.actions), styles.toolbar);
   }
 })(function (_ref2) {
-  var _ref3;
   var theme = _ref2.theme;
-  return _ref3 = {
+  return _defineProperty(_defineProperty(_defineProperty({
     minHeight: 52,
     paddingRight: 2
-  }, _defineProperty(_ref3, "".concat(theme.breakpoints.up('xs'), " and (orientation: landscape)"), {
+  }, "".concat(theme.breakpoints.up('xs'), " and (orientation: landscape)"), {
     minHeight: 52
-  }), _defineProperty(_ref3, theme.breakpoints.up('sm'), {
+  }), theme.breakpoints.up('sm'), {
     minHeight: 52,
     paddingRight: 2
-  }), _defineProperty(_ref3, "& .".concat(tablePaginationClasses.actions), {
+  }), "& .".concat(tablePaginationClasses.actions), {
     flexShrink: 0,
     marginLeft: 20
-  }), _ref3;
+  });
 });
 var TablePaginationSpacer = styled('div', {
   name: 'MuiTablePagination',
@@ -87,8 +86,7 @@ var TablePaginationSelect = styled(Select, {
   name: 'MuiTablePagination',
   slot: 'Select',
   overridesResolver: function overridesResolver(props, styles) {
-    var _extends3;
-    return _extends((_extends3 = {}, _defineProperty(_extends3, "& .".concat(tablePaginationClasses.selectIcon), styles.selectIcon), _defineProperty(_extends3, "& .".concat(tablePaginationClasses.select), styles.select), _extends3), styles.input, styles.selectRoot);
+    return _extends(_defineProperty(_defineProperty({}, "& .".concat(tablePaginationClasses.selectIcon), styles.selectIcon), "& .".concat(tablePaginationClasses.select), styles.select), styles.input, styles.selectRoot);
   }
 })(_defineProperty({
   color: 'inherit',

package/legacy/TableRow/TableRow.js

@@ -32,22 +32,21 @@ var TableRowRoot = styled('tr', {
     return [styles.root, ownerState.head && styles.head, ownerState.footer && styles.footer];
   }
 })(function (_ref) {
-  var _ref2;
   var theme = _ref.theme;
-  return _ref2 = {
+  return _defineProperty(_defineProperty({
     color: 'inherit',
     display: 'table-row',
     verticalAlign: 'middle',
     // We disable the focus ring for mouse, touch and keyboard users.
     outline: 0
-  }, _defineProperty(_ref2, "&.".concat(tableRowClasses.hover, ":hover"), {
+  }, "&.".concat(tableRowClasses.hover, ":hover"), {
     backgroundColor: (theme.vars || theme).palette.action.hover
-  }), _defineProperty(_ref2, "&.".concat(tableRowClasses.selected), {
+  }), "&.".concat(tableRowClasses.selected), {
     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),
     '&: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)
     }
-  }), _ref2;
+  });
 });
 var defaultComponent = 'tr';
 /**

package/legacy/Tabs/Tabs.js

@@ -347,7 +347,6 @@ var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     };
   };
   var updateIndicatorState = useEventCallback(function () {
-    var _newIndicatorStyle;
     var _getTabsMeta = getTabsMeta(),
       tabsMeta = _getTabsMeta.tabsMeta,
       tabMeta = _getTabsMeta.tabMeta;
@@ -365,7 +364,7 @@ var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         startValue = (isRtl ? -1 : 1) * (tabMeta[startIndicator] - tabsMeta[startIndicator] + correction);
       }
     }
-    var newIndicatorStyle = (_newIndicatorStyle = {}, _defineProperty(_newIndicatorStyle, startIndicator, startValue), _defineProperty(_newIndicatorStyle, size, tabMeta ? tabMeta[size] : 0), _newIndicatorStyle);
+    var newIndicatorStyle = _defineProperty(_defineProperty({}, startIndicator, startValue), size, tabMeta ? tabMeta[size] : 0);
 
     // IE11 support, replace with Number.isNaN
     // eslint-disable-next-line no-restricted-globals

package/legacy/ToggleButton/ToggleButton.js

@@ -35,7 +35,6 @@ var ToggleButtonRoot = styled(ButtonBase, {
     return [styles.root, styles["size".concat(capitalize(ownerState.size))]];
   }
 })(function (_ref) {
-  var _extends2;
   var theme = _ref.theme,
     ownerState = _ref.ownerState;
   var selectedColor = ownerState.color === 'standard' ? theme.palette.text.primary : theme.palette[ownerState.color].main;
@@ -51,17 +50,17 @@ var ToggleButtonRoot = styled(ButtonBase, {
     color: (theme.vars || theme).palette.action.active
   }, ownerState.fullWidth && {
     width: '100%'
-  }, (_extends2 = {}, _defineProperty(_extends2, "&.".concat(toggleButtonClasses.disabled), {
+  }, _defineProperty(_defineProperty(_defineProperty({}, "&.".concat(toggleButtonClasses.disabled), {
     color: (theme.vars || theme).palette.action.disabled,
     border: "1px solid ".concat((theme.vars || theme).palette.action.disabledBackground)
-  }), _defineProperty(_extends2, '&:hover', {
+  }), '&:hover', {
     textDecoration: 'none',
     // Reset on mouse devices
     backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.text.primaryChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
     '@media (hover: none)': {
       backgroundColor: 'transparent'
     }
-  }), _defineProperty(_extends2, "&.".concat(toggleButtonClasses.selected), {
+  }), "&.".concat(toggleButtonClasses.selected), {
     color: selectedColor,
     backgroundColor: theme.vars ? "rgba(".concat(selectedColorChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(selectedColor, theme.palette.action.selectedOpacity),
     '&:hover': {
@@ -71,7 +70,7 @@ var ToggleButtonRoot = styled(ButtonBase, {
         backgroundColor: theme.vars ? "rgba(".concat(selectedColorChannel, " / ").concat(theme.vars.palette.action.selectedOpacity, ")") : alpha(selectedColor, theme.palette.action.selectedOpacity)
       }
     }
-  }), _extends2), ownerState.size === 'small' && {
+  }), ownerState.size === 'small' && {
     padding: 7,
     fontSize: theme.typography.pxToRem(13)
   }, ownerState.size === 'large' && {

package/legacy/Tooltip/Tooltip.js

@@ -48,7 +48,6 @@ var TooltipPopper = styled(Popper, {
     return [styles.popper, !ownerState.disableInteractive && styles.popperInteractive, ownerState.arrow && styles.popperArrow, !ownerState.open && styles.popperClose];
   }
 })(function (_ref) {
-  var _ref2;
   var theme = _ref.theme,
     ownerState = _ref.ownerState,
     open = _ref.open;
@@ -59,19 +58,19 @@ var TooltipPopper = styled(Popper, {
     pointerEvents: 'auto'
   }, !open && {
     pointerEvents: 'none'
-  }, ownerState.arrow && (_ref2 = {}, _defineProperty(_ref2, "&[data-popper-placement*=\"bottom\"] .".concat(tooltipClasses.arrow), {
+  }, ownerState.arrow && _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "&[data-popper-placement*=\"bottom\"] .".concat(tooltipClasses.arrow), {
     top: 0,
     marginTop: '-0.71em',
     '&::before': {
       transformOrigin: '0 100%'
     }
-  }), _defineProperty(_ref2, "&[data-popper-placement*=\"top\"] .".concat(tooltipClasses.arrow), {
+  }), "&[data-popper-placement*=\"top\"] .".concat(tooltipClasses.arrow), {
     bottom: 0,
     marginBottom: '-0.71em',
     '&::before': {
       transformOrigin: '100% 0'
     }
-  }), _defineProperty(_ref2, "&[data-popper-placement*=\"right\"] .".concat(tooltipClasses.arrow), _extends({}, !ownerState.isRtl ? {
+  }), "&[data-popper-placement*=\"right\"] .".concat(tooltipClasses.arrow), _extends({}, !ownerState.isRtl ? {
     left: 0,
     marginLeft: '-0.71em'
   } : {
@@ -83,7 +82,7 @@ var TooltipPopper = styled(Popper, {
     '&::before': {
       transformOrigin: '100% 100%'
     }
-  })), _defineProperty(_ref2, "&[data-popper-placement*=\"left\"] .".concat(tooltipClasses.arrow), _extends({}, !ownerState.isRtl ? {
+  })), "&[data-popper-placement*=\"left\"] .".concat(tooltipClasses.arrow), _extends({}, !ownerState.isRtl ? {
     right: 0,
     marginRight: '-0.71em'
   } : {
@@ -95,7 +94,7 @@ var TooltipPopper = styled(Popper, {
     '&::before': {
       transformOrigin: '0 0'
     }
-  })), _ref2));
+  })));
 });
 var TooltipTooltip = styled('div', {
   name: 'MuiTooltip',
@@ -105,7 +104,6 @@ var TooltipTooltip = styled('div', {
     return [styles.tooltip, ownerState.touch && styles.touch, ownerState.arrow && styles.tooltipArrow, styles["tooltipPlacement".concat(capitalize(ownerState.placement.split('-')[0]))]];
   }
 })(function (_ref3) {
-  var _extends2;
   var theme = _ref3.theme,
     ownerState = _ref3.ownerState;
   return _extends({
@@ -127,7 +125,7 @@ var TooltipTooltip = styled('div', {
     fontSize: theme.typography.pxToRem(14),
     lineHeight: "".concat(round(16 / 14), "em"),
     fontWeight: theme.typography.fontWeightRegular
-  }, (_extends2 = {}, _defineProperty(_extends2, ".".concat(tooltipClasses.popper, "[data-popper-placement*=\"left\"] &"), _extends({
+  }, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(tooltipClasses.popper, "[data-popper-placement*=\"left\"] &"), _extends({
     transformOrigin: 'right center'
   }, !ownerState.isRtl ? _extends({
     marginRight: '14px'
@@ -137,7 +135,7 @@ var TooltipTooltip = styled('div', {
     marginLeft: '14px'
   }, ownerState.touch && {
     marginLeft: '24px'
-  }))), _defineProperty(_extends2, ".".concat(tooltipClasses.popper, "[data-popper-placement*=\"right\"] &"), _extends({
+  }))), ".".concat(tooltipClasses.popper, "[data-popper-placement*=\"right\"] &"), _extends({
     transformOrigin: 'left center'
   }, !ownerState.isRtl ? _extends({
     marginLeft: '14px'
@@ -147,17 +145,17 @@ var TooltipTooltip = styled('div', {
     marginRight: '14px'
   }, ownerState.touch && {
     marginRight: '24px'
-  }))), _defineProperty(_extends2, ".".concat(tooltipClasses.popper, "[data-popper-placement*=\"top\"] &"), _extends({
+  }))), ".".concat(tooltipClasses.popper, "[data-popper-placement*=\"top\"] &"), _extends({
     transformOrigin: 'center bottom',
     marginBottom: '14px'
   }, ownerState.touch && {
     marginBottom: '24px'
-  })), _defineProperty(_extends2, ".".concat(tooltipClasses.popper, "[data-popper-placement*=\"bottom\"] &"), _extends({
+  })), ".".concat(tooltipClasses.popper, "[data-popper-placement*=\"bottom\"] &"), _extends({
     transformOrigin: 'center top',
     marginTop: '14px'
   }, ownerState.touch && {
     marginTop: '24px'
-  })), _extends2));
+  })));
 });
 var TooltipArrow = styled('span', {
   name: 'MuiTooltip',

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.14.18
+ * @mui/material v5.14.20
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/styles/createMixins.js

@@ -1,16 +1,15 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
 export default function createMixins(breakpoints, mixins) {
-  var _toolbar;
   return _extends({
-    toolbar: (_toolbar = {
+    toolbar: _defineProperty(_defineProperty({
       minHeight: 56
-    }, _defineProperty(_toolbar, breakpoints.up('xs'), {
+    }, breakpoints.up('xs'), {
       '@media (orientation: landscape)': {
         minHeight: 48
       }
-    }), _defineProperty(_toolbar, breakpoints.up('sm'), {
+    }), breakpoints.up('sm'), {
       minHeight: 64
-    }), _toolbar)
+    })
   }, mixins);
 }

package/modern/Autocomplete/Autocomplete.js

@@ -3,7 +3,7 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 var _ClearIcon, _ArrowDropDownIcon;
-const _excluded = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "slotProps", "value"],
+const _excluded = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionKey", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "slotProps", "value"],
   _excluded2 = ["ref"],
   _excluded3 = ["key"];
 import * as React from 'react';
@@ -826,6 +826,14 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * @returns {boolean}
    */
   getOptionDisabled: PropTypes.func,
+  /**
+   * Used to determine the key for a given option.
+   * This can be useful when the labels of options are not unique (since labels are used as keys by default).
+   *
+   * @param {Value} option The option to get the key for.
+   * @returns {string | number}
+   */
+  getOptionKey: PropTypes.func,
   /**
    * Used to determine the string value for a given option.
    * It's used to fill the input (and the list box options if `renderOption` is not provided).

package/modern/Box/Box.js

@@ -5,11 +5,12 @@ import PropTypes from 'prop-types';
 import { unstable_ClassNameGenerator as ClassNameGenerator } from '../className';
 import { createTheme } from '../styles';
 import THEME_ID from '../styles/identifier';
+import boxClasses from './boxClasses';
 const defaultTheme = createTheme();
 const Box = createBox({
   themeId: THEME_ID,
   defaultTheme,
-  defaultClassName: 'MuiBox-root',
+  defaultClassName: boxClasses.root,
   generateClassName: ClassNameGenerator.generate
 });
 process.env.NODE_ENV !== "production" ? Box.propTypes /* remove-proptypes */ = {

package/modern/Box/boxClasses.js

@@ -0,0 +1,3 @@
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+const boxClasses = generateUtilityClasses('MuiBox', ['root']);
+export default boxClasses;

package/modern/Box/index.js

@@ -1,3 +1,5 @@
 'use client';
 
-export { default } from './Box';
+export { default } from './Box';
+export { default as boxClasses } from './boxClasses';
+export * from './boxClasses';

package/modern/Chip/Chip.js

@@ -358,10 +358,10 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
   }) : {};
   let deleteIcon = null;
   if (onDelete) {
-    deleteIcon = deleteIconProp && /*#__PURE__*/React.isValidElement(deleteIconProp) ? /*#__PURE__*/React.cloneElement(deleteIconProp, {
+    deleteIcon = deleteIconProp && /*#__PURE__*/React.isValidElement(deleteIconProp) ? ( /*#__PURE__*/React.cloneElement(deleteIconProp, {
       className: clsx(deleteIconProp.props.className, classes.deleteIcon),
       onClick: handleDeleteIconClick
-    }) : /*#__PURE__*/_jsx(CancelIcon, {
+    })) : /*#__PURE__*/_jsx(CancelIcon, {
       className: clsx(classes.deleteIcon),
       onClick: handleDeleteIconClick
     });

package/modern/FilledInput/FilledInput.js

@@ -213,7 +213,7 @@ const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps,
       ownerState
     }
   };
-  const componentsProps = slotProps ?? componentsPropsProp ? deepmerge(slotProps ?? componentsPropsProp, filledInputComponentsProps) : filledInputComponentsProps;
+  const componentsProps = slotProps ?? componentsPropsProp ? deepmerge(filledInputComponentsProps, slotProps ?? componentsPropsProp) : filledInputComponentsProps;
   const RootSlot = slots.root ?? components.Root ?? FilledInputRoot;
   const InputSlot = slots.input ?? components.Input ?? FilledInputInput;
   return /*#__PURE__*/_jsx(InputBase, _extends({

package/modern/InputAdornment/InputAdornment.js

@@ -114,10 +114,10 @@ const InputAdornment = /*#__PURE__*/React.forwardRef(function InputAdornment(inP
         color: "text.secondary",
         children: children
       }) : /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [position === 'start' ? /* notranslate needed while Google Translate will not fix zero-width space issue */_span || (_span = /*#__PURE__*/_jsx("span", {
+        children: [position === 'start' ? ( /* notranslate needed while Google Translate will not fix zero-width space issue */_span || (_span = /*#__PURE__*/_jsx("span", {
           className: "notranslate",
           children: "\u200B"
-        })) : null, children]
+        }))) : null, children]
       })
     }))
   });

package/modern/InputLabel/InputLabel.js

@@ -105,7 +105,11 @@ const 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
+  }
+}));
 const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, ref) {
   const props = useThemeProps({
     name: 'MuiInputLabel',

package/modern/Modal/Modal.js

@@ -275,6 +275,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/modern/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/modern/Select/SelectInput.js

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

package/modern/StepButton/StepButton.js

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

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.14.18
+ * @mui/material v5.14.20
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/Autocomplete/Autocomplete.js

@@ -38,7 +38,7 @@ var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _ClearIcon, _ArrowDropDownIcon;
-const _excluded = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "slotProps", "value"],
+const _excluded = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionKey", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "slotProps", "value"],
   _excluded2 = ["ref"],
   _excluded3 = ["key"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -842,6 +842,14 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * @returns {boolean}
    */
   getOptionDisabled: _propTypes.default.func,
+  /**
+   * Used to determine the key for a given option.
+   * This can be useful when the labels of options are not unique (since labels are used as keys by default).
+   *
+   * @param {Value} option The option to get the key for.
+   * @returns {string | number}
+   */
+  getOptionKey: _propTypes.default.func,
   /**
    * Used to determine the string value for a given option.
    * It's used to fill the input (and the list box options if `renderOption` is not provided).

package/node/Box/Box.js

@@ -11,11 +11,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _className = require("../className");
 var _styles = require("../styles");
 var _identifier = _interopRequireDefault(require("../styles/identifier"));
+var _boxClasses = _interopRequireDefault(require("./boxClasses"));
 const defaultTheme = (0, _styles.createTheme)();
 const Box = (0, _system.createBox)({
   themeId: _identifier.default,
   defaultTheme,
-  defaultClassName: 'MuiBox-root',
+  defaultClassName: _boxClasses.default.root,
   generateClassName: _className.unstable_ClassNameGenerator.generate
 });
 process.env.NODE_ENV !== "production" ? Box.propTypes /* remove-proptypes */ = {

package/node/Box/boxClasses.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _utils = require("@mui/utils");
+const boxClasses = (0, _utils.unstable_generateUtilityClasses)('MuiBox', ['root']);
+var _default = exports.default = boxClasses;