@mui/material 5.15.5 → 5.15.7

package/legacy/ButtonBase/TouchRipple.js

@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
 import { TransitionGroup } from 'react-transition-group';
 import clsx from 'clsx';
 import { keyframes } from '@mui/system';
+import { unstable_useTimeout as useTimeout } from '@mui/utils';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import Ripple from './Ripple';
@@ -86,18 +87,11 @@ var TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps, re
   var ignoringMouseDown = React.useRef(false);
   // We use a timer in order to only show the ripples for touch "click" like events.
   // We don't want to display the ripple for touch scroll events.
-  var startTimer = React.useRef(0);
+  var startTimer = useTimeout();
 
   // This is the hook called once the previous timeout is ready.
   var startTimerCommit = React.useRef(null);
   var container = React.useRef(null);
-  React.useEffect(function () {
-    return function () {
-      if (startTimer.current) {
-        clearTimeout(startTimer.current);
-      }
-    };
-  }, []);
   var startCommit = React.useCallback(function (params) {
     var pulsate = params.pulsate,
       rippleX = params.rippleX,
@@ -193,12 +187,13 @@ var TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps, re
           });
         };
         // Delay the execution of the ripple effect.
-        startTimer.current = setTimeout(function () {
+        // We have to make a tradeoff with this delay value.
+        startTimer.start(DELAY_RIPPLE, function () {
           if (startTimerCommit.current) {
             startTimerCommit.current();
             startTimerCommit.current = null;
           }
-        }, DELAY_RIPPLE); // We have to make a tradeoff with this value.
+        });
       }
     } else {
       startCommit({
@@ -209,21 +204,21 @@ var TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps, re
         cb: cb
       });
     }
-  }, [centerProp, startCommit]);
+  }, [centerProp, startCommit, startTimer]);
   var pulsate = React.useCallback(function () {
     start({}, {
       pulsate: true
     });
   }, [start]);
   var stop = React.useCallback(function (event, cb) {
-    clearTimeout(startTimer.current);
+    startTimer.clear();
 
     // The touch interaction occurs too quickly.
     // We still want to show ripple effect.
     if ((event == null ? void 0 : event.type) === 'touchend' && startTimerCommit.current) {
       startTimerCommit.current();
       startTimerCommit.current = null;
-      startTimer.current = setTimeout(function () {
+      startTimer.start(0, function () {
         stop(event, cb);
       });
       return;
@@ -236,7 +231,7 @@ var TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps, re
       return oldRipples;
     });
     rippleCallback.current = cb;
-  }, []);
+  }, [startTimer]);
   React.useImperativeHandle(ref, function () {
     return {
       pulsate: pulsate,

package/legacy/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';
@@ -127,17 +127,12 @@ var Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
   });
   var classes = useUtilityClasses(ownerState);
   var theme = useTheme();
-  var timer = React.useRef();
+  var timer = useTimeout();
   var wrapperRef = React.useRef(null);
   var autoTransitionDuration = React.useRef();
   var collapsedSize = typeof collapsedSizeProp === 'number' ? "".concat(collapsedSizeProp, "px") : collapsedSizeProp;
   var isHorizontal = orientation === 'horizontal';
   var size = isHorizontal ? 'width' : 'height';
-  React.useEffect(function () {
-    return function () {
-      clearTimeout(timer.current);
-    };
-  }, []);
   var nodeRef = React.useRef(null);
   var handleRef = useForkRef(ref, nodeRef);
   var normalizedTransitionCallback = function normalizedTransitionCallback(callback) {
@@ -236,7 +231,7 @@ var Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
   });
   var handleAddEndListener = function 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/legacy/Grow/Grow.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 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';
@@ -54,7 +54,7 @@ var Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
     _props$TransitionComp = props.TransitionComponent,
     TransitionComponent = _props$TransitionComp === void 0 ? Transition : _props$TransitionComp,
     other = _objectWithoutProperties(props, ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"]);
-  var timer = React.useRef();
+  var timer = useTimeout();
   var autoTimeout = React.useRef();
   var theme = useTheme();
   var nodeRef = React.useRef(null);
@@ -142,18 +142,13 @@ var Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
   var handleExited = normalizedTransitionCallback(onExited);
   var handleAddEndListener = function 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(function () {
-    return function () {
-      clearTimeout(timer.current);
-    };
-  }, []);
   return /*#__PURE__*/_jsx(TransitionComponent, _extends({
     appear: appear,
     in: inProp,

package/legacy/PaginationItem/PaginationItem.js

@@ -34,7 +34,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
     type = ownerState.type,
     variant = ownerState.variant;
   var slots = {
-    root: ['root', "size".concat(capitalize(size)), variant, shape, color !== 'standard' && "".concat(variant).concat(capitalize(color)), disabled && 'disabled', selected && 'selected', {
+    root: ['root', "size".concat(capitalize(size)), variant, shape, color !== 'standard' && "color".concat(capitalize(color)), color !== 'standard' && "".concat(variant).concat(capitalize(color)), disabled && 'disabled', selected && 'selected', {
       page: 'page',
       first: 'firstLast',
       last: 'firstLast',

package/legacy/PaginationItem/paginationItemClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getPaginationItemUtilityClass(slot) {
   return generateUtilityClass('MuiPaginationItem', slot);
 }
-var paginationItemClasses = generateUtilityClasses('MuiPaginationItem', ['root', 'page', 'sizeSmall', 'sizeLarge', 'text', 'textPrimary', 'textSecondary', 'outlined', 'outlinedPrimary', 'outlinedSecondary', 'rounded', 'ellipsis', 'firstLast', 'previousNext', 'focusVisible', 'disabled', 'selected', 'icon']);
+var 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/legacy/Rating/Rating.js

@@ -69,6 +69,7 @@ var RatingRoot = styled('span', {
     color: '#faaf00',
     cursor: 'pointer',
     textAlign: 'left',
+    width: 'min-content',
     WebkitTapHighlightColor: 'transparent'
   }, "&.".concat(ratingClasses.disabled), {
     opacity: (theme.vars || theme).palette.action.disabledOpacity,

package/legacy/Rating/index.js

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

package/legacy/Select/Select.js

@@ -129,7 +129,7 @@ var 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/legacy/SpeedDial/SpeedDial.js

@@ -9,7 +9,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';
@@ -164,12 +164,7 @@ var SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref) {
     direction: direction
   });
   var classes = useUtilityClasses(ownerState);
-  var eventTimer = React.useRef();
-  React.useEffect(function () {
-    return function () {
-      clearTimeout(eventTimer.current);
-    };
-  }, []);
+  var eventTimer = useTimeout();
 
   /**
    * an index in actions.current
@@ -252,9 +247,9 @@ var 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(function () {
+      eventTimer.start(0, function () {
         setOpenState(false);
         if (onClose) {
           onClose(event, 'blur');
@@ -271,7 +266,7 @@ var 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 @@ var 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(function () {
+      eventTimer.start(0, function () {
         setOpenState(true);
         if (onOpen) {
           var eventMap = {

package/legacy/Toolbar/index.js

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

package/legacy/Tooltip/Tooltip.js

@@ -7,7 +7,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 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';
@@ -184,14 +184,14 @@ var TooltipArrow = styled('span', {
   };
 });
 var hystersisOpen = false;
-var hystersisTimer = null;
+var hystersisTimer = new Timeout();
 var cursorPosition = {
   x: 0,
   y: 0
 };
 export function testReset() {
   hystersisOpen = false;
-  clearTimeout(hystersisTimer);
+  hystersisTimer.clear();
 }
 function composeEventHandler(handler, eventHandler) {
   return function (event) {
@@ -270,10 +270,10 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     setArrowRef = _React$useState2[1];
   var ignoreNonTouchEvents = React.useRef(false);
   var disableInteractive = disableInteractiveProp || followCursor;
-  var closeTimer = React.useRef();
-  var enterTimer = React.useRef();
-  var leaveTimer = React.useRef();
-  var touchTimer = React.useRef();
+  var closeTimer = useTimeout();
+  var enterTimer = useTimeout();
+  var leaveTimer = useTimeout();
+  var touchTimer = useTimeout();
   var _useControlled = useControlled({
       controlled: openProp,
       default: false,
@@ -296,23 +296,18 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   }
   var id = useId(idProp);
   var prevUserSelect = React.useRef();
-  var stopTouchInteraction = React.useCallback(function () {
+  var stopTouchInteraction = useEventCallback(function () {
     if (prevUserSelect.current !== undefined) {
       document.body.style.WebkitUserSelect = prevUserSelect.current;
       prevUserSelect.current = undefined;
     }
-    clearTimeout(touchTimer.current);
-  }, []);
+    touchTimer.clear();
+  });
   React.useEffect(function () {
-    return function () {
-      clearTimeout(closeTimer.current);
-      clearTimeout(enterTimer.current);
-      clearTimeout(leaveTimer.current);
-      stopTouchInteraction();
-    };
+    return stopTouchInteraction;
   }, [stopTouchInteraction]);
   var handleOpen = function handleOpen(event) {
-    clearTimeout(hystersisTimer);
+    hystersisTimer.clear();
     hystersisOpen = true;
 
     // The mouseover event will trigger for every nested element in the tooltip.
@@ -328,18 +323,16 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
    * @param {React.SyntheticEvent | Event} event
    */
   function (event) {
-    clearTimeout(hystersisTimer);
-    hystersisTimer = setTimeout(function () {
+    hystersisTimer.start(800 + leaveDelay, function () {
       hystersisOpen = false;
-    }, 800 + leaveDelay);
+    });
     setOpenState(false);
     if (onClose && open) {
       onClose(event);
     }
-    clearTimeout(closeTimer.current);
-    closeTimer.current = setTimeout(function () {
+    closeTimer.start(theme.transitions.duration.shortest, function () {
       ignoreNonTouchEvents.current = false;
-    }, theme.transitions.duration.shortest);
+    });
   });
   var handleEnter = function handleEnter(event) {
     if (ignoreNonTouchEvents.current && event.type !== 'touchstart') {
@@ -352,22 +345,21 @@ var 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(function () {
+      enterTimer.start(hystersisOpen ? enterNextDelay : enterDelay, function () {
         handleOpen(event);
-      }, hystersisOpen ? enterNextDelay : enterDelay);
+      });
     } else {
       handleOpen(event);
     }
   };
   var handleLeave = function handleLeave(event) {
-    clearTimeout(enterTimer.current);
-    clearTimeout(leaveTimer.current);
-    leaveTimer.current = setTimeout(function () {
+    enterTimer.clear();
+    leaveTimer.start(leaveDelay, function () {
       handleClose(event);
-    }, leaveDelay);
+    });
   };
   var _useIsFocusVisible = useIsFocusVisible(),
     isFocusVisibleRef = _useIsFocusVisible.isFocusVisibleRef,
@@ -408,26 +400,25 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   var handleMouseLeave = handleLeave;
   var handleTouchStart = function 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(function () {
+    touchTimer.start(enterTouchDelay, function () {
       document.body.style.WebkitUserSelect = prevUserSelect.current;
       handleEnter(event);
-    }, enterTouchDelay);
+    });
   };
   var handleTouchEnd = function handleTouchEnd(event) {
     if (children.props.onTouchEnd) {
       children.props.onTouchEnd(event);
     }
     stopTouchInteraction();
-    clearTimeout(leaveTimer.current);
-    leaveTimer.current = setTimeout(function () {
+    leaveTimer.start(leaveTouchDelay, function () {
       handleClose(event);
-    }, leaveTouchDelay);
+    });
   };
   React.useEffect(function () {
     if (!open) {

package/legacy/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/zero-styled/index.js

@@ -1,2 +1,7 @@
-// eslint-disable-next-line import/prefer-default-export
-export { default as styled } from '../styles/styled';
+import useThemeProps from '../styles/useThemeProps';
+export { default as styled } from '../styles/styled';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function createUseThemeProps(name) {
+  return useThemeProps;
+}

package/modern/Accordion/index.js

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

package/modern/AccordionActions/index.js

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

package/modern/AccordionDetails/index.js

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

package/modern/AccordionSummary/index.js

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

package/modern/Avatar/Avatar.js

@@ -35,9 +35,8 @@ const AvatarRoot = styled('div', {
     return [styles.root, styles[ownerState.variant], ownerState.colorDefault && styles.colorDefault];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   position: 'relative',
   display: 'flex',
   alignItems: 'center',
@@ -50,18 +49,36 @@ const 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]
+    })))
+  }]
+}));
 const AvatarImg = styled('img', {
   name: 'MuiAvatar',
   slot: 'Img',
@@ -164,7 +181,7 @@ const 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/modern/AvatarGroup/AvatarGroup.js

@@ -36,33 +36,23 @@ const AvatarGroupRoot = styled('div', {
     [`& .${avatarGroupClasses.avatar}`]: styles.avatar
   }, styles.root)
 })(({
-  theme
-}) => ({
-  [`& .${avatarClasses.root}`]: {
-    border: `2px solid ${(theme.vars || theme).palette.background.default}`,
-    boxSizing: 'content-box',
-    marginLeft: -8,
-    '&:last-child': {
-      marginLeft: 0
-    }
-  },
-  display: 'flex',
-  flexDirection: 'row-reverse'
-}));
-const AvatarGroupAvatar = styled(Avatar, {
-  name: 'MuiAvatarGroup',
-  slot: 'Avatar',
-  overridesResolver: (props, styles) => styles.avatar
-})(({
-  theme
-}) => ({
-  border: `2px solid ${(theme.vars || theme).palette.background.default}`,
-  boxSizing: 'content-box',
-  marginLeft: -8,
-  '&:last-child': {
-    marginLeft: 0
-  }
-}));
+  theme,
+  ownerState
+}) => {
+  const marginValue = ownerState.spacing && SPACINGS[ownerState.spacing] !== undefined ? SPACINGS[ownerState.spacing] : -ownerState.spacing;
+  return {
+    [`& .${avatarClasses.root}`]: {
+      border: `2px solid ${(theme.vars || theme).palette.background.default}`,
+      boxSizing: 'content-box',
+      marginLeft: marginValue ?? -8,
+      '&:last-child': {
+        marginLeft: 0
+      }
+    },
+    display: 'flex',
+    flexDirection: 'row-reverse'
+  };
+});
 const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
@@ -105,7 +95,6 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
   const maxAvatars = Math.min(children.length, clampedMax - 1);
   const extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
   const extraAvatarsElement = renderSurplus ? renderSurplus(extraAvatars) : `+${extraAvatars}`;
-  const marginLeft = spacing && SPACINGS[spacing] !== undefined ? SPACINGS[spacing] : -spacing;
   const additionalAvatarSlotProps = slotProps.additionalAvatar ?? componentsProps.additionalAvatar;
   return /*#__PURE__*/_jsxs(AvatarGroupRoot, _extends({
     as: component,
@@ -113,23 +102,14 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
     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?.className),
-      style: _extends({
-        marginLeft
-      }, additionalAvatarSlotProps?.style),
       children: extraAvatarsElement
-    })) : null, children.slice(0, maxAvatars).reverse().map((child, index) => {
+    })) : null, children.slice(0, maxAvatars).reverse().map(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/modern/Badge/Badge.js

@@ -10,14 +10,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";
 const RADIUS_STANDARD = 10;
 const RADIUS_DOT = 4;
+const useThemeProps = createUseThemeProps('MuiBadge');
 const useUtilityClasses = ownerState => {
   const {
     color,