@mui/material 5.15.5 → 5.15.7

package/Collapse/Collapse.js

@@ -7,7 +7,7 @@ import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
-import { elementTypeAcceptingRef } from '@mui/utils';
+import { elementTypeAcceptingRef, unstable_useTimeout as useTimeout } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
@@ -123,17 +123,12 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
   });
   const classes = useUtilityClasses(ownerState);
   const theme = useTheme();
-  const timer = React.useRef();
+  const timer = useTimeout();
   const wrapperRef = React.useRef(null);
   const autoTransitionDuration = React.useRef();
   const collapsedSize = typeof collapsedSizeProp === 'number' ? `${collapsedSizeProp}px` : collapsedSizeProp;
   const isHorizontal = orientation === 'horizontal';
   const size = isHorizontal ? 'width' : 'height';
-  React.useEffect(() => {
-    return () => {
-      clearTimeout(timer.current);
-    };
-  }, []);
   const nodeRef = React.useRef(null);
   const handleRef = useForkRef(ref, nodeRef);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
@@ -230,7 +225,7 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
   });
   const handleAddEndListener = next => {
     if (timeout === 'auto') {
-      timer.current = setTimeout(next, autoTransitionDuration.current || 0);
+      timer.start(autoTransitionDuration.current || 0, next);
     }
     if (addEndListener) {
       // Old call signature before `react-transition-group` implemented `nodeRef`

package/Grow/Grow.js

@@ -5,7 +5,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { elementAcceptingRef } from '@mui/utils';
+import { elementAcceptingRef, unstable_useTimeout as useTimeout } from '@mui/utils';
 import { Transition } from 'react-transition-group';
 import useTheme from '../styles/useTheme';
 import { getTransitionProps, reflow } from '../transitions/utils';
@@ -55,7 +55,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       TransitionComponent = Transition
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const timer = React.useRef();
+  const timer = useTimeout();
   const autoTimeout = React.useRef();
   const theme = useTheme();
   const nodeRef = React.useRef(null);
@@ -144,18 +144,13 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
   const handleExited = normalizedTransitionCallback(onExited);
   const handleAddEndListener = next => {
     if (timeout === 'auto') {
-      timer.current = setTimeout(next, autoTimeout.current || 0);
+      timer.start(autoTimeout.current || 0, next);
     }
     if (addEndListener) {
       // Old call signature before `react-transition-group` implemented `nodeRef`
       addEndListener(nodeRef.current, next);
     }
   };
-  React.useEffect(() => {
-    return () => {
-      clearTimeout(timer.current);
-    };
-  }, []);
   return /*#__PURE__*/_jsx(TransitionComponent, _extends({
     appear: appear,
     in: inProp,

package/PaginationItem/PaginationItem.js

@@ -38,7 +38,7 @@ const useUtilityClasses = ownerState => {
     variant
   } = ownerState;
   const slots = {
-    root: ['root', `size${capitalize(size)}`, variant, shape, color !== 'standard' && `${variant}${capitalize(color)}`, disabled && 'disabled', selected && 'selected', {
+    root: ['root', `size${capitalize(size)}`, variant, shape, color !== 'standard' && `color${capitalize(color)}`, color !== 'standard' && `${variant}${capitalize(color)}`, disabled && 'disabled', selected && 'selected', {
       page: 'page',
       first: 'firstLast',
       last: 'firstLast',

package/PaginationItem/paginationItemClasses.d.ts

@@ -9,15 +9,27 @@ export interface PaginationItemClasses {
     sizeLarge: string;
     /** Styles applied to the root element if `variant="text"`. */
     text: string;
-    /** Styles applied to the root element if `variant="text"` and `color="primary"`. */
+    /** Styles applied to the root element if `variant="text"` and `color="primary"`.
+     *  @deprecated Combine the [.MuiPaginationItem-text](/material-ui/api/pagination-item/#pagination-item-classes-text)
+     *  and [.MuiPaginationItem-colorPrimary](/material-ui/api/pagination-item/#pagination-item-classes-colorPrimary) classes instead.
+     */
     textPrimary: string;
-    /** Styles applied to the root element if `variant="text"` and `color="secondary"`. */
+    /** Styles applied to the root element if `variant="text"` and `color="secondary"`.
+     *  @deprecated Combine the [.MuiPaginationItem-text](/material-ui/api/pagination-item/#pagination-item-classes-text)
+     *  and [.MuiPaginationItem-colorSecondary](/material-ui/api/pagination-item/#pagination-item-classes-colorSecondary) classes instead.
+     */
     textSecondary: string;
     /** Styles applied to the root element if `variant="outlined"`. */
     outlined: string;
-    /** Styles applied to the root element if `variant="outlined"` and `color="primary"`. */
+    /** Styles applied to the root element if `variant="outlined"` and `color="primary"`.
+     * @deprecated Combine the [.MuiPaginationItem-outlined](/material-ui/api/pagination-item/#pagination-item-classes-outlined)
+     * and [.MuiPaginationItem-colorPrimary](/material-ui/api/pagination-item/#pagination-item-classes-colorPrimary) classes instead.
+     */
     outlinedPrimary: string;
-    /** Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */
+    /** Styles applied to the root element if `variant="outlined"` and `color="secondary"`.
+     * @deprecated Combine the [.MuiPaginationItem-outlined](/material-ui/api/pagination-item/#pagination-item-classes-outlined)
+     * and [.MuiPaginationItem-colorSecondary](/material-ui/api/pagination-item/#pagination-item-classes-colorSecondary) classes instead.
+     */
     outlinedSecondary: string;
     /** Styles applied to the root element if `rounded="true"`. */
     rounded: string;
@@ -35,6 +47,10 @@ export interface PaginationItemClasses {
     selected: string;
     /** Styles applied to the icon to display. */
     icon: string;
+    /** Styles applied to the root element if `color="primary"`. */
+    colorPrimary: string;
+    /** Styles applied to the root element if `color="secondary"`. */
+    colorSecondary: string;
 }
 export type PaginationItemClassKey = keyof PaginationItemClasses;
 export declare function getPaginationItemUtilityClass(slot: string): string;

package/PaginationItem/paginationItemClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getPaginationItemUtilityClass(slot) {
   return generateUtilityClass('MuiPaginationItem', slot);
 }
-const paginationItemClasses = generateUtilityClasses('MuiPaginationItem', ['root', 'page', 'sizeSmall', 'sizeLarge', 'text', 'textPrimary', 'textSecondary', 'outlined', 'outlinedPrimary', 'outlinedSecondary', 'rounded', 'ellipsis', 'firstLast', 'previousNext', 'focusVisible', 'disabled', 'selected', 'icon']);
+const paginationItemClasses = generateUtilityClasses('MuiPaginationItem', ['root', 'page', 'sizeSmall', 'sizeLarge', 'text', 'textPrimary', 'textSecondary', 'outlined', 'outlinedPrimary', 'outlinedSecondary', 'rounded', 'ellipsis', 'firstLast', 'previousNext', 'focusVisible', 'disabled', 'selected', 'icon', 'colorPrimary', 'colorSecondary']);
 export default paginationItemClasses;

package/README.md

@@ -1,11 +1,11 @@
 <!-- markdownlint-disable-next-line -->
 <p align="center">
-  <a href="https://mui.com/material-ui/" rel="noopener" target="_blank"><img width="150" height="133" src="https://mui.com/static/logo.svg" alt="Material UI logo"></a>
+  <a href="https://mui.com/material-ui/" rel="noopener" target="_blank"><img width="150" height="133" src="https://mui.com/static/logo.svg" alt="Material UI logo"></a>
 </p>
 
-<h1 align="center">Material UI</h1>
+<h1 align="center">Material UI</h1>
 
-Material UI is an open-source React component library that implements Google's [Material Design](https://m2.material.io/design/introduction/). It's comprehensive and can be used in production out of the box.
+Material UI is an open-source React component library that implements Google's [Material Design](https://m2.material.io/design/introduction/). It's comprehensive and can be used in production out of the box.
 
 ## Installation
 
@@ -26,13 +26,13 @@ Use the "material-ui" tag on Stack Overflow to make it easier for the community
 
 ## Examples
 
-Our documentation features [a collection of example projects using Material UI](https://mui.com/material-ui/getting-started/example-projects/).
+Our documentation features [a collection of example projects using Material UI](https://mui.com/material-ui/getting-started/example-projects/).
 
 ## Contributing
 
 Read the [contributing guide](/CONTRIBUTING.md) to learn about our development process, how to propose bug fixes and improvements, and how to build and test your changes.
 
-Contributing to Material UI is about more than just issues and pull requests!
+Contributing to Material UI is about more than just issues and pull requests!
 There are many other ways to [support MUI](https://mui.com/material-ui/getting-started/faq/#mui-is-awesome-how-can-i-support-the-project) beyond contributing to the code base.
 
 ## Changelog

package/Rating/Rating.js

@@ -75,6 +75,7 @@ const RatingRoot = styled('span', {
   color: '#faaf00',
   cursor: 'pointer',
   textAlign: 'left',
+  width: 'min-content',
   WebkitTapHighlightColor: 'transparent',
   [`&.${ratingClasses.disabled}`]: {
     opacity: (theme.vars || theme).palette.action.disabledOpacity,

package/Rating/index.js

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

package/Select/Select.js

@@ -122,7 +122,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
       }, inputProps, {
         classes: inputProps ? deepmerge(restOfClasses, inputProps.classes) : restOfClasses
       }, input ? input.props.inputProps : {})
-    }, multiple && native && variant === 'outlined' ? {
+    }, (multiple && native || displayEmpty) && variant === 'outlined' ? {
       notched: true
     } : {}, {
       ref: inputComponentRef,

package/SpeedDial/SpeedDial.js

@@ -10,7 +10,7 @@ import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
-import { clamp } from '@mui/utils';
+import { clamp, unstable_useTimeout as useTimeout } from '@mui/utils';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import useTheme from '../styles/useTheme';
@@ -163,12 +163,7 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
     direction
   });
   const classes = useUtilityClasses(ownerState);
-  const eventTimer = React.useRef();
-  React.useEffect(() => {
-    return () => {
-      clearTimeout(eventTimer.current);
-    };
-  }, []);
+  const eventTimer = useTimeout();
 
   /**
    * an index in actions.current
@@ -252,9 +247,9 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
     if (event.type === 'blur' && onBlur) {
       onBlur(event);
     }
-    clearTimeout(eventTimer.current);
+    eventTimer.clear();
     if (event.type === 'blur') {
-      eventTimer.current = setTimeout(() => {
+      eventTimer.start(0, () => {
         setOpenState(false);
         if (onClose) {
           onClose(event, 'blur');
@@ -271,7 +266,7 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
     if (FabProps.onClick) {
       FabProps.onClick(event);
     }
-    clearTimeout(eventTimer.current);
+    eventTimer.clear();
     if (open) {
       setOpenState(false);
       if (onClose) {
@@ -295,10 +290,10 @@ const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref)
     // When moving the focus between two items,
     // a chain if blur and focus event is triggered.
     // We only handle the last event.
-    clearTimeout(eventTimer.current);
+    eventTimer.clear();
     if (!open) {
       // Wait for a future focus or click event
-      eventTimer.current = setTimeout(() => {
+      eventTimer.start(0, () => {
         setOpenState(true);
         if (onOpen) {
           const eventMap = {

package/TablePagination/TablePagination.d.ts

@@ -114,7 +114,7 @@ export interface TablePaginationOwnProps extends TablePaginationBaseProps {
    * Use -1 for the value with a custom label to show all the rows.
    * @default [10, 25, 50, 100]
    */
-  rowsPerPageOptions?: Array<number | { value: number; label: string }>;
+  rowsPerPageOptions?: ReadonlyArray<number | { value: number; label: string }>;
   /**
    * Props applied to the rows per page [`Select`](/material-ui/api/select/) element.
    *

package/Toolbar/index.js

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

package/Tooltip/Tooltip.js

@@ -6,7 +6,7 @@ const _excluded = ["arrow", "children", "classes", "components", "componentsProp
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { elementAcceptingRef } from '@mui/utils';
+import { elementAcceptingRef, unstable_useTimeout as useTimeout, unstable_Timeout as Timeout } from '@mui/utils';
 import { unstable_composeClasses as composeClasses, appendOwnerState } from '@mui/base';
 import { alpha } from '@mui/system';
 import styled from '../styles/styled';
@@ -194,14 +194,14 @@ const TooltipArrow = styled('span', {
   }
 }));
 let hystersisOpen = false;
-let hystersisTimer = null;
+const hystersisTimer = new Timeout();
 let cursorPosition = {
   x: 0,
   y: 0
 };
 export function testReset() {
   hystersisOpen = false;
-  clearTimeout(hystersisTimer);
+  hystersisTimer.clear();
 }
 function composeEventHandler(handler, eventHandler) {
   return event => {
@@ -260,10 +260,10 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   const [arrowRef, setArrowRef] = React.useState(null);
   const ignoreNonTouchEvents = React.useRef(false);
   const disableInteractive = disableInteractiveProp || followCursor;
-  const closeTimer = React.useRef();
-  const enterTimer = React.useRef();
-  const leaveTimer = React.useRef();
-  const touchTimer = React.useRef();
+  const closeTimer = useTimeout();
+  const enterTimer = useTimeout();
+  const leaveTimer = useTimeout();
+  const touchTimer = useTimeout();
   const [openState, setOpenState] = useControlled({
     controlled: openProp,
     default: false,
@@ -286,23 +286,16 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   }
   const id = useId(idProp);
   const prevUserSelect = React.useRef();
-  const stopTouchInteraction = React.useCallback(() => {
+  const stopTouchInteraction = useEventCallback(() => {
     if (prevUserSelect.current !== undefined) {
       document.body.style.WebkitUserSelect = prevUserSelect.current;
       prevUserSelect.current = undefined;
     }
-    clearTimeout(touchTimer.current);
-  }, []);
-  React.useEffect(() => {
-    return () => {
-      clearTimeout(closeTimer.current);
-      clearTimeout(enterTimer.current);
-      clearTimeout(leaveTimer.current);
-      stopTouchInteraction();
-    };
-  }, [stopTouchInteraction]);
+    touchTimer.clear();
+  });
+  React.useEffect(() => stopTouchInteraction, [stopTouchInteraction]);
   const handleOpen = event => {
-    clearTimeout(hystersisTimer);
+    hystersisTimer.clear();
     hystersisOpen = true;
 
     // The mouseover event will trigger for every nested element in the tooltip.
@@ -318,18 +311,16 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
    * @param {React.SyntheticEvent | Event} event
    */
   event => {
-    clearTimeout(hystersisTimer);
-    hystersisTimer = setTimeout(() => {
+    hystersisTimer.start(800 + leaveDelay, () => {
       hystersisOpen = false;
-    }, 800 + leaveDelay);
+    });
     setOpenState(false);
     if (onClose && open) {
       onClose(event);
     }
-    clearTimeout(closeTimer.current);
-    closeTimer.current = setTimeout(() => {
+    closeTimer.start(theme.transitions.duration.shortest, () => {
       ignoreNonTouchEvents.current = false;
-    }, theme.transitions.duration.shortest);
+    });
   });
   const handleEnter = event => {
     if (ignoreNonTouchEvents.current && event.type !== 'touchstart') {
@@ -342,22 +333,21 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     if (childNode) {
       childNode.removeAttribute('title');
     }
-    clearTimeout(enterTimer.current);
-    clearTimeout(leaveTimer.current);
+    enterTimer.clear();
+    leaveTimer.clear();
     if (enterDelay || hystersisOpen && enterNextDelay) {
-      enterTimer.current = setTimeout(() => {
+      enterTimer.start(hystersisOpen ? enterNextDelay : enterDelay, () => {
         handleOpen(event);
-      }, hystersisOpen ? enterNextDelay : enterDelay);
+      });
     } else {
       handleOpen(event);
     }
   };
   const handleLeave = event => {
-    clearTimeout(enterTimer.current);
-    clearTimeout(leaveTimer.current);
-    leaveTimer.current = setTimeout(() => {
+    enterTimer.clear();
+    leaveTimer.start(leaveDelay, () => {
       handleClose(event);
-    }, leaveDelay);
+    });
   };
   const {
     isFocusVisibleRef,
@@ -399,26 +389,25 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   const handleMouseLeave = handleLeave;
   const handleTouchStart = event => {
     detectTouchStart(event);
-    clearTimeout(leaveTimer.current);
-    clearTimeout(closeTimer.current);
+    leaveTimer.clear();
+    closeTimer.clear();
     stopTouchInteraction();
     prevUserSelect.current = document.body.style.WebkitUserSelect;
     // Prevent iOS text selection on long-tap.
     document.body.style.WebkitUserSelect = 'none';
-    touchTimer.current = setTimeout(() => {
+    touchTimer.start(enterTouchDelay, () => {
       document.body.style.WebkitUserSelect = prevUserSelect.current;
       handleEnter(event);
-    }, enterTouchDelay);
+    });
   };
   const handleTouchEnd = event => {
     if (children.props.onTouchEnd) {
       children.props.onTouchEnd(event);
     }
     stopTouchInteraction();
-    clearTimeout(leaveTimer.current);
-    leaveTimer.current = setTimeout(() => {
+    leaveTimer.start(leaveTouchDelay, () => {
       handleClose(event);
-    }, leaveTouchDelay);
+    });
   };
   React.useEffect(() => {
     if (!open) {

package/index.js

@@ -1,12 +1,10 @@
 /**
- * @mui/material v5.15.5
+ * @mui/material v5.15.7
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-'use client';
-
 /* eslint-disable import/export */
 import * as colors from './colors';
 export { colors };

package/legacy/Accordion/index.js

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

package/legacy/AccordionActions/index.js

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

package/legacy/AccordionDetails/index.js

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

package/legacy/AccordionSummary/index.js

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

package/legacy/Avatar/Avatar.js

@@ -30,9 +30,8 @@ var AvatarRoot = styled('div', {
     return [styles.root, styles[ownerState.variant], ownerState.colorDefault && styles.colorDefault];
   }
 })(function (_ref) {
-  var theme = _ref.theme,
-    ownerState = _ref.ownerState;
-  return _extends({
+  var theme = _ref.theme;
+  return {
     position: 'relative',
     display: 'flex',
     alignItems: 'center',
@@ -45,18 +44,36 @@ var AvatarRoot = styled('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 && _extends({
-    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',
+    variants: [{
+      props: {
+        variant: 'rounded'
+      },
+      style: {
+        borderRadius: (theme.vars || theme).shape.borderRadius
+      }
+    }, {
+      props: {
+        variant: 'square'
+      },
+      style: {
+        borderRadius: 0
+      }
+    }, {
+      props: {
+        colorDefault: true
+      },
+      style: _extends({
+        color: (theme.vars || theme).palette.background.default
+      }, theme.vars ? {
+        backgroundColor: theme.vars.palette.Avatar.defaultBg
+      } : _extends({
+        backgroundColor: theme.palette.grey[400]
+      }, theme.applyStyles('dark', {
+        backgroundColor: theme.palette.grey[600]
+      })))
+    }]
+  };
 });
 var AvatarImg = styled('img', {
   name: 'MuiAvatar',
@@ -165,7 +182,7 @@ var Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
       ownerState: ownerState,
       className: classes.img
     }, imgProps));
-  } else if (childrenProp != null) {
+  } else if (childrenProp != null && childrenProp !== '' && typeof childrenProp !== 'boolean') {
     children = childrenProp;
   } else if (hasImg && alt) {
     children = alt[0];

package/legacy/AvatarGroup/AvatarGroup.js

@@ -34,33 +34,18 @@ var AvatarGroupRoot = styled('div', {
     return _extends(_defineProperty({}, "& .".concat(avatarGroupClasses.avatar), styles.avatar), styles.root);
   }
 })(function (_ref) {
-  var theme = _ref.theme;
+  var theme = _ref.theme,
+    ownerState = _ref.ownerState;
+  var marginValue = ownerState.spacing && SPACINGS[ownerState.spacing] !== undefined ? SPACINGS[ownerState.spacing] : -ownerState.spacing;
   return _defineProperty(_defineProperty(_defineProperty({}, "& .".concat(avatarClasses.root), {
     border: "2px solid ".concat((theme.vars || theme).palette.background.default),
     boxSizing: 'content-box',
-    marginLeft: -8,
+    marginLeft: marginValue != null ? marginValue : -8,
     '&:last-child': {
       marginLeft: 0
     }
   }), "display", 'flex'), "flexDirection", 'row-reverse');
 });
-var AvatarGroupAvatar = styled(Avatar, {
-  name: 'MuiAvatarGroup',
-  slot: 'Avatar',
-  overridesResolver: function overridesResolver(props, styles) {
-    return styles.avatar;
-  }
-})(function (_ref3) {
-  var theme = _ref3.theme;
-  return {
-    border: "2px solid ".concat((theme.vars || theme).palette.background.default),
-    boxSizing: 'content-box',
-    marginLeft: -8,
-    '&:last-child': {
-      marginLeft: 0
-    }
-  };
-});
 var AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, ref) {
   var _slotProps$additional;
   var props = useThemeProps({
@@ -108,7 +93,6 @@ var AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, re
   var maxAvatars = Math.min(children.length, clampedMax - 1);
   var extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
   var extraAvatarsElement = renderSurplus ? renderSurplus(extraAvatars) : "+".concat(extraAvatars);
-  var marginLeft = spacing && SPACINGS[spacing] !== undefined ? SPACINGS[spacing] : -spacing;
   var additionalAvatarSlotProps = (_slotProps$additional = slotProps.additionalAvatar) != null ? _slotProps$additional : componentsProps.additionalAvatar;
   return /*#__PURE__*/_jsxs(AvatarGroupRoot, _extends({
     as: component,
@@ -116,23 +100,14 @@ var AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, re
     className: clsx(classes.root, className),
     ref: ref
   }, other, {
-    children: [extraAvatars ? /*#__PURE__*/_jsx(AvatarGroupAvatar, _extends({
-      ownerState: ownerState,
+    children: [extraAvatars ? /*#__PURE__*/_jsx(Avatar, _extends({
       variant: variant
     }, additionalAvatarSlotProps, {
       className: clsx(classes.avatar, additionalAvatarSlotProps == null ? void 0 : additionalAvatarSlotProps.className),
-      style: _extends({
-        marginLeft: marginLeft
-      }, additionalAvatarSlotProps == null ? void 0 : additionalAvatarSlotProps.style),
       children: extraAvatarsElement
-    })) : null, children.slice(0, maxAvatars).reverse().map(function (child, index) {
+    })) : null, children.slice(0, maxAvatars).reverse().map(function (child) {
       return /*#__PURE__*/React.cloneElement(child, {
         className: clsx(child.props.className, classes.avatar),
-        style: _extends({
-          // Consistent with "&:last-child" styling for the default spacing,
-          // we do not apply custom marginLeft spacing on the last child
-          marginLeft: index === maxAvatars - 1 ? undefined : marginLeft
-        }, child.props.style),
         variant: child.props.variant || variant
       });
     })]

package/legacy/Badge/Badge.js

@@ -11,14 +11,14 @@ import { usePreviousProps } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import { useBadge } from '@mui/base/useBadge';
 import { useSlotProps } from '@mui/base';
-import { styled } from '../zero-styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import capitalize from '../utils/capitalize';
 import badgeClasses, { getBadgeUtilityClass } from './badgeClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var RADIUS_STANDARD = 10;
 var RADIUS_DOT = 4;
+var useThemeProps = createUseThemeProps('MuiBadge');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var color = ownerState.color,
     anchorOrigin = ownerState.anchorOrigin,