@mui/material 5.13.1 → 5.13.2

package/node/Autocomplete/Autocomplete.js

@@ -11,6 +11,8 @@ Object.defineProperty(exports, "createFilterOptions", {
   }
 });
 exports.default = void 0;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -34,6 +36,7 @@ var _autocompleteClasses = _interopRequireWildcard(require("./autocompleteClasse
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 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"];
 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); }
 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 useUtilityClasses = ownerState => {
@@ -96,7 +99,7 @@ const AutocompleteRoot = (0, _styled.default)('div', {
   }
 })(({
   ownerState
-}) => ({
+}) => (0, _extends2.default)({
   [`&.${_autocompleteClasses.default.focused} .${_autocompleteClasses.default.clearIndicator}`]: {
     visibility: 'visible'
   },
@@ -105,18 +108,17 @@ const AutocompleteRoot = (0, _styled.default)('div', {
     [`&:hover .${_autocompleteClasses.default.clearIndicator}`]: {
       visibility: 'visible'
     }
-  },
-  ...(ownerState.fullWidth && {
-    width: '100%'
-  }),
-  [`& .${_autocompleteClasses.default.tag}`]: {
+  }
+}, ownerState.fullWidth && {
+  width: '100%'
+}, {
+  [`& .${_autocompleteClasses.default.tag}`]: (0, _extends2.default)({
     margin: 3,
-    maxWidth: 'calc(100% - 6px)',
-    ...(ownerState.size === 'small' && {
-      margin: 2,
-      maxWidth: 'calc(100% - 4px)'
-    })
-  },
+    maxWidth: 'calc(100% - 6px)'
+  }, ownerState.size === 'small' && {
+    margin: 2,
+    maxWidth: 'calc(100% - 4px)'
+  }),
   [`& .${_autocompleteClasses.default.inputRoot}`]: {
     flexWrap: 'wrap',
     [`.${_autocompleteClasses.default.hasPopupIcon}&, .${_autocompleteClasses.default.hasClearIcon}&`]: {
@@ -205,14 +207,13 @@ const AutocompleteRoot = (0, _styled.default)('div', {
       paddingBottom: 9
     }
   },
-  [`& .${_autocompleteClasses.default.input}`]: {
+  [`& .${_autocompleteClasses.default.input}`]: (0, _extends2.default)({
     flexGrow: 1,
     textOverflow: 'ellipsis',
-    opacity: 0,
-    ...(ownerState.inputFocused && {
-      opacity: 1
-    })
-  }
+    opacity: 0
+  }, ownerState.inputFocused && {
+    opacity: 1
+  })
 }));
 const AutocompleteEndAdornment = (0, _styled.default)('div', {
   name: 'MuiAutocomplete',
@@ -239,18 +240,14 @@ const AutocompletePopupIndicator = (0, _styled.default)(_IconButton.default, {
   slot: 'PopupIndicator',
   overridesResolver: ({
     ownerState
-  }, styles) => ({
-    ...styles.popupIndicator,
-    ...(ownerState.popupOpen && styles.popupIndicatorOpen)
-  })
+  }, styles) => (0, _extends2.default)({}, styles.popupIndicator, ownerState.popupOpen && styles.popupIndicatorOpen)
 })(({
   ownerState
-}) => ({
+}) => (0, _extends2.default)({
   padding: 2,
-  marginRight: -2,
-  ...(ownerState.popupOpen && {
-    transform: 'rotate(180deg)'
-  })
+  marginRight: -2
+}, ownerState.popupOpen && {
+  transform: 'rotate(180deg)'
 }));
 const AutocompletePopper = (0, _styled.default)(_Popper.default, {
   name: 'MuiAutocomplete',
@@ -266,11 +263,10 @@ const AutocompletePopper = (0, _styled.default)(_Popper.default, {
 })(({
   theme,
   ownerState
-}) => ({
-  zIndex: (theme.vars || theme).zIndex.modal,
-  ...(ownerState.disablePortal && {
-    position: 'absolute'
-  })
+}) => (0, _extends2.default)({
+  zIndex: (theme.vars || theme).zIndex.modal
+}, ownerState.disablePortal && {
+  position: 'absolute'
 }));
 const AutocompletePaper = (0, _styled.default)(_Paper.default, {
   name: 'MuiAutocomplete',
@@ -278,8 +274,7 @@ const AutocompletePaper = (0, _styled.default)(_Paper.default, {
   overridesResolver: (props, styles) => styles.paper
 })(({
   theme
-}) => ({
-  ...theme.typography.body1,
+}) => (0, _extends2.default)({}, theme.typography.body1, {
   overflow: 'auto'
 }));
 const AutocompleteLoading = (0, _styled.default)('div', {
@@ -389,74 +384,61 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   });
   /* eslint-disable @typescript-eslint/no-unused-vars */
   const {
-    autoComplete = false,
-    autoHighlight = false,
-    autoSelect = false,
-    blurOnSelect = false,
-    ChipProps,
-    className,
-    clearIcon = _ClearIcon || (_ClearIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {
-      fontSize: "small"
-    })),
-    clearOnBlur = !props.freeSolo,
-    clearOnEscape = false,
-    clearText = 'Clear',
-    closeText = 'Close',
-    componentsProps = {},
-    defaultValue = props.multiple ? [] : null,
-    disableClearable = false,
-    disableCloseOnSelect = false,
-    disabled = false,
-    disabledItemsFocusable = false,
-    disableListWrap = false,
-    disablePortal = false,
-    filterOptions,
-    filterSelectedOptions = false,
-    forcePopupIcon = 'auto',
-    freeSolo = false,
-    fullWidth = false,
-    getLimitTagsText = more => `+${more}`,
-    getOptionDisabled,
-    getOptionLabel = option => {
-      var _option$label;
-      return (_option$label = option.label) != null ? _option$label : option;
-    },
-    isOptionEqualToValue,
-    groupBy,
-    handleHomeEndKeys = !props.freeSolo,
-    id: idProp,
-    includeInputInList = false,
-    inputValue: inputValueProp,
-    limitTags = -1,
-    ListboxComponent = 'ul',
-    ListboxProps,
-    loading = false,
-    loadingText = 'Loading…',
-    multiple = false,
-    noOptionsText = 'No options',
-    onChange,
-    onClose,
-    onHighlightChange,
-    onInputChange,
-    onOpen,
-    open,
-    openOnFocus = false,
-    openText = 'Open',
-    options,
-    PaperComponent = _Paper.default,
-    PopperComponent = _Popper.default,
-    popupIcon = _ArrowDropDownIcon || (_ArrowDropDownIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowDropDown.default, {})),
-    readOnly = false,
-    renderGroup: renderGroupProp,
-    renderInput,
-    renderOption: renderOptionProp,
-    renderTags,
-    selectOnFocus = !props.freeSolo,
-    size = 'medium',
-    slotProps = {},
-    value: valueProp,
-    ...other
-  } = props;
+      autoComplete = false,
+      autoHighlight = false,
+      autoSelect = false,
+      blurOnSelect = false,
+      ChipProps,
+      className,
+      clearIcon = _ClearIcon || (_ClearIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {
+        fontSize: "small"
+      })),
+      clearOnBlur = !props.freeSolo,
+      clearOnEscape = false,
+      clearText = 'Clear',
+      closeText = 'Close',
+      componentsProps = {},
+      defaultValue = props.multiple ? [] : null,
+      disableClearable = false,
+      disableCloseOnSelect = false,
+      disabled = false,
+      disabledItemsFocusable = false,
+      disableListWrap = false,
+      disablePortal = false,
+      filterSelectedOptions = false,
+      forcePopupIcon = 'auto',
+      freeSolo = false,
+      fullWidth = false,
+      getLimitTagsText = more => `+${more}`,
+      getOptionLabel = option => {
+        var _option$label;
+        return (_option$label = option.label) != null ? _option$label : option;
+      },
+      groupBy,
+      handleHomeEndKeys = !props.freeSolo,
+      includeInputInList = false,
+      limitTags = -1,
+      ListboxComponent = 'ul',
+      ListboxProps,
+      loading = false,
+      loadingText = 'Loading…',
+      multiple = false,
+      noOptionsText = 'No options',
+      openOnFocus = false,
+      openText = 'Open',
+      PaperComponent = _Paper.default,
+      PopperComponent = _Popper.default,
+      popupIcon = _ArrowDropDownIcon || (_ArrowDropDownIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowDropDown.default, {})),
+      readOnly = false,
+      renderGroup: renderGroupProp,
+      renderInput,
+      renderOption: renderOptionProp,
+      renderTags,
+      selectOnFocus = !props.freeSolo,
+      size = 'medium',
+      slotProps = {}
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   /* eslint-enable @typescript-eslint/no-unused-vars */
 
   const {
@@ -479,10 +461,9 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     setAnchorEl,
     inputValue,
     groupedOptions
-  } = (0, _base.useAutocomplete)({
-    ...props,
+  } = (0, _base.useAutocomplete)((0, _extends2.default)({}, props, {
     componentName: 'Autocomplete'
-  });
+  }));
   const hasClearIcon = !disableClearable && !disabled && dirty && !readOnly;
   const hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;
   const {
@@ -490,8 +471,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   } = getInputProps();
 
   // If you modify this, make sure to keep the `AutocompleteOwnerState` type in sync.
-  const ownerState = {
-    ...props,
+  const ownerState = (0, _extends2.default)({}, props, {
     disablePortal,
     expanded,
     focused,
@@ -501,26 +481,23 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     inputFocused: focusedTag === -1,
     popupOpen,
     size
-  };
+  });
   const classes = useUtilityClasses(ownerState);
   let startAdornment;
   if (multiple && value.length > 0) {
-    const getCustomizedTagProps = params => ({
+    const getCustomizedTagProps = params => (0, _extends2.default)({
       className: classes.tag,
-      disabled,
-      ...getTagProps(params)
-    });
+      disabled
+    }, getTagProps(params));
     if (renderTags) {
       startAdornment = renderTags(value, getCustomizedTagProps, ownerState);
     } else {
-      startAdornment = value.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+      startAdornment = value.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, (0, _extends2.default)({
         label: getOptionLabel(option),
-        size: size,
-        ...getCustomizedTagProps({
-          index
-        }),
-        ...ChipProps
-      }));
+        size: size
+      }, getCustomizedTagProps({
+        index
+      }), ChipProps)));
     }
   }
   if (limitTags > -1 && Array.isArray(startAdornment)) {
@@ -546,20 +523,18 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     })]
   }, params.key);
   const renderGroup = renderGroupProp || defaultRenderGroup;
-  const defaultRenderOption = (props2, option) => /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-    ...props2,
+  const defaultRenderOption = (props2, option) => /*#__PURE__*/(0, _jsxRuntime.jsx)("li", (0, _extends2.default)({}, props2, {
     children: getOptionLabel(option)
-  });
+  }));
   const renderOption = renderOptionProp || defaultRenderOption;
   const renderListOption = (option, index) => {
     const optionProps = getOptionProps({
       option,
       index
     });
-    return renderOption({
-      ...optionProps,
+    return renderOption((0, _extends2.default)({}, optionProps, {
       className: classes.option
-    }, option, {
+    }), option, {
       selected: optionProps['aria-selected'],
       index,
       inputValue
@@ -570,18 +545,18 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   const popperSlotProps = (_slotProps$popper = slotProps.popper) != null ? _slotProps$popper : componentsProps.popper;
   const popupIndicatorSlotProps = (_slotProps$popupIndic = slotProps.popupIndicator) != null ? _slotProps$popupIndic : componentsProps.popupIndicator;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteRoot, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteRoot, (0, _extends2.default)({
       ref: ref,
       className: (0, _clsx.default)(classes.root, className),
-      ownerState: ownerState,
-      ...getRootProps(other),
+      ownerState: ownerState
+    }, getRootProps(other), {
       children: renderInput({
         id,
         disabled,
         fullWidth: true,
         size: size === 'small' ? 'small' : undefined,
         InputLabelProps: getInputLabelProps(),
-        InputProps: {
+        InputProps: (0, _extends2.default)({
           ref: setAnchorEl,
           className: classes.inputRoot,
           startAdornment,
@@ -589,40 +564,36 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
             if (event.target === event.currentTarget) {
               handleInputMouseDown(event);
             }
-          },
-          ...((hasClearIcon || hasPopupIcon) && {
-            endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsxs)(AutocompleteEndAdornment, {
-              className: classes.endAdornment,
-              ownerState: ownerState,
-              children: [hasClearIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteClearIndicator, {
-                ...getClearProps(),
-                "aria-label": clearText,
-                title: clearText,
-                ownerState: ownerState,
-                ...clearIndicatorSlotProps,
-                className: (0, _clsx.default)(classes.clearIndicator, clearIndicatorSlotProps == null ? void 0 : clearIndicatorSlotProps.className),
-                children: clearIcon
-              }) : null, hasPopupIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompletePopupIndicator, {
-                ...getPopupIndicatorProps(),
-                disabled: disabled,
-                "aria-label": popupOpen ? closeText : openText,
-                title: popupOpen ? closeText : openText,
-                ownerState: ownerState,
-                ...popupIndicatorSlotProps,
-                className: (0, _clsx.default)(classes.popupIndicator, popupIndicatorSlotProps == null ? void 0 : popupIndicatorSlotProps.className),
-                children: popupIcon
-              }) : null]
-            })
+          }
+        }, (hasClearIcon || hasPopupIcon) && {
+          endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsxs)(AutocompleteEndAdornment, {
+            className: classes.endAdornment,
+            ownerState: ownerState,
+            children: [hasClearIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteClearIndicator, (0, _extends2.default)({}, getClearProps(), {
+              "aria-label": clearText,
+              title: clearText,
+              ownerState: ownerState
+            }, clearIndicatorSlotProps, {
+              className: (0, _clsx.default)(classes.clearIndicator, clearIndicatorSlotProps == null ? void 0 : clearIndicatorSlotProps.className),
+              children: clearIcon
+            })) : null, hasPopupIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompletePopupIndicator, (0, _extends2.default)({}, getPopupIndicatorProps(), {
+              disabled: disabled,
+              "aria-label": popupOpen ? closeText : openText,
+              title: popupOpen ? closeText : openText,
+              ownerState: ownerState
+            }, popupIndicatorSlotProps, {
+              className: (0, _clsx.default)(classes.popupIndicator, popupIndicatorSlotProps == null ? void 0 : popupIndicatorSlotProps.className),
+              children: popupIcon
+            })) : null]
           })
-        },
-        inputProps: {
+        }),
+        inputProps: (0, _extends2.default)({
           className: classes.input,
           disabled,
-          readOnly,
-          ...getInputProps()
-        }
+          readOnly
+        }, getInputProps())
       })
-    }), anchorEl ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompletePopper, {
+    })), anchorEl ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompletePopper, (0, _extends2.default)({
       as: PopperComponent,
       disablePortal: disablePortal,
       style: {
@@ -631,13 +602,13 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       ownerState: ownerState,
       role: "presentation",
       anchorEl: anchorEl,
-      open: popupOpen,
-      ...popperSlotProps,
+      open: popupOpen
+    }, popperSlotProps, {
       className: (0, _clsx.default)(classes.popper, popperSlotProps == null ? void 0 : popperSlotProps.className),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(AutocompletePaper, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(AutocompletePaper, (0, _extends2.default)({
         ownerState: ownerState,
-        as: PaperComponent,
-        ...paperSlotProps,
+        as: PaperComponent
+      }, paperSlotProps, {
         className: (0, _clsx.default)(classes.paper, paperSlotProps == null ? void 0 : paperSlotProps.className),
         children: [loading && groupedOptions.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteLoading, {
           className: classes.loading,
@@ -652,12 +623,11 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
             event.preventDefault();
           },
           children: noOptionsText
-        }) : null, groupedOptions.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteListbox, {
+        }) : null, groupedOptions.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteListbox, (0, _extends2.default)({
           as: ListboxComponent,
           className: classes.listbox,
-          ownerState: ownerState,
-          ...getListboxProps(),
-          ...ListboxProps,
+          ownerState: ownerState
+        }, getListboxProps(), ListboxProps, {
           children: groupedOptions.map((option, index) => {
             if (groupBy) {
               return renderGroup({
@@ -668,9 +638,9 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
             }
             return renderListOption(option, index);
           })
-        }) : null]
-      })
-    }) : null]
+        })) : null]
+      }))
+    })) : null]
   });
 });
 process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptypes */ = {

package/node/Avatar/Avatar.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -14,6 +16,7 @@ var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _Person = _interopRequireDefault(require("../internal/svg-icons/Person"));
 var _avatarClasses = require("./avatarClasses");
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["alt", "children", "className", "component", "imgProps", "sizes", "src", "srcSet", "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); }
 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 useUtilityClasses = ownerState => {
@@ -41,7 +44,7 @@ const AvatarRoot = (0, _styled.default)('div', {
 })(({
   theme,
   ownerState
-}) => ({
+}) => (0, _extends2.default)({
   position: 'relative',
   display: 'flex',
   alignItems: 'center',
@@ -54,22 +57,18 @@ const AvatarRoot = (0, _styled.default)('div', {
   lineHeight: 1,
   borderRadius: '50%',
   overflow: 'hidden',
-  userSelect: 'none',
-  ...(ownerState.variant === 'rounded' && {
-    borderRadius: (theme.vars || theme).shape.borderRadius
-  }),
-  ...(ownerState.variant === 'square' && {
-    borderRadius: 0
-  }),
-  ...(ownerState.colorDefault && {
-    color: (theme.vars || theme).palette.background.default,
-    ...(theme.vars ? {
-      backgroundColor: theme.vars.palette.Avatar.defaultBg
-    } : {
-      backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]
-    })
-  })
-}));
+  userSelect: 'none'
+}, ownerState.variant === 'rounded' && {
+  borderRadius: (theme.vars || theme).shape.borderRadius
+}, ownerState.variant === 'square' && {
+  borderRadius: 0
+}, ownerState.colorDefault && (0, _extends2.default)({
+  color: (theme.vars || theme).palette.background.default
+}, theme.vars ? {
+  backgroundColor: theme.vars.palette.Avatar.defaultBg
+} : {
+  backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]
+})));
 const AvatarImg = (0, _styled.default)('img', {
   name: 'MuiAvatar',
   slot: 'Img',
@@ -137,44 +136,41 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
     name: 'MuiAvatar'
   });
   const {
-    alt,
-    children: childrenProp,
-    className,
-    component = 'div',
-    imgProps,
-    sizes,
-    src,
-    srcSet,
-    variant = 'circular',
-    ...other
-  } = props;
+      alt,
+      children: childrenProp,
+      className,
+      component = 'div',
+      imgProps,
+      sizes,
+      src,
+      srcSet,
+      variant = 'circular'
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   let children = null;
 
   // Use a hook instead of onError on the img element to support server-side rendering.
-  const loaded = useLoaded({
-    ...imgProps,
+  const loaded = useLoaded((0, _extends2.default)({}, imgProps, {
     src,
     srcSet
-  });
+  }));
   const hasImg = src || srcSet;
   const hasImgNotFailing = hasImg && loaded !== 'error';
-  const ownerState = {
-    ...props,
+  const ownerState = (0, _extends2.default)({}, props, {
     colorDefault: !hasImgNotFailing,
     component,
     variant
-  };
+  });
   const classes = useUtilityClasses(ownerState);
   if (hasImgNotFailing) {
-    children = /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarImg, {
+    children = /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarImg, (0, _extends2.default)({
       alt: alt,
       src: src,
       srcSet: srcSet,
       sizes: sizes,
       ownerState: ownerState,
-      className: classes.img,
-      ...imgProps
-    });
+      className: classes.img
+    }, imgProps));
   } else if (childrenProp != null) {
     children = childrenProp;
   } else if (hasImg && alt) {
@@ -185,14 +181,14 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
       className: classes.fallback
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarRoot, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarRoot, (0, _extends2.default)({
     as: component,
     ownerState: ownerState,
     className: (0, _clsx.default)(classes.root, className),
-    ref: ref,
-    ...other,
+    ref: ref
+  }, other, {
     children: children
-  });
+  }));
 });
 process.env.NODE_ENV !== "production" ? Avatar.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------