@mui/material 6.4.10 → 6.4.12

package/OutlinedInput/OutlinedInput.js

@@ -14,6 +14,7 @@ import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFil
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import outlinedInputClasses, { getOutlinedInputUtilityClass } from "./outlinedInputClasses.js";
 import InputBase, { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseInput } from "../InputBase/InputBase.js";
+import useSlot from "../utils/useSlot.js";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -178,7 +179,6 @@ const OutlinedInputInput = styled(InputBaseInput, {
   }]
 })));
 const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps, ref) {
-  var _React$Fragment;
   const props = useDefaultProps({
     props: inProps,
     name: 'MuiOutlinedInput'
@@ -191,6 +191,7 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
     multiline = false,
     notched,
     slots = {},
+    slotProps = {},
     type = 'text',
     ...other
   } = props;
@@ -216,17 +217,29 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
   };
   const RootSlot = slots.root ?? components.Root ?? OutlinedInputRoot;
   const InputSlot = slots.input ?? components.Input ?? OutlinedInputInput;
+  const [NotchedSlot, notchedProps] = useSlot('notchedOutline', {
+    elementType: NotchedOutlineRoot,
+    className: classes.notchedOutline,
+    shouldForwardComponentProp: true,
+    ownerState,
+    externalForwardedProps: {
+      slots,
+      slotProps
+    },
+    additionalProps: {
+      label: label != null && label !== '' && fcs.required ? /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [label, "\u2009", '*']
+      }) : label
+    }
+  });
   return /*#__PURE__*/_jsx(InputBase, {
     slots: {
       root: RootSlot,
       input: InputSlot
     },
-    renderSuffix: state => /*#__PURE__*/_jsx(NotchedOutlineRoot, {
-      ownerState: ownerState,
-      className: classes.notchedOutline,
-      label: label != null && label !== '' && fcs.required ? _React$Fragment || (_React$Fragment = /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [label, "\u2009", '*']
-      })) : label,
+    slotProps: slotProps,
+    renderSuffix: state => /*#__PURE__*/_jsx(NotchedSlot, {
+      ...notchedProps,
       notched: typeof notched !== 'undefined' ? notched : Boolean(state.startAdornment || state.filled || state.focused)
     }),
     fullWidth: fullWidth,
@@ -377,15 +390,22 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes /* remove-propty
    * Number of rows to display when multiline option is set to true.
    */
   rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    input: PropTypes.object,
+    notchedOutline: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.object
+  }),
   /**
    * The components used for each slot inside.
-   *
-   * This prop is an alias for the `components` prop, which will be deprecated in the future.
-   *
    * @default {}
    */
   slots: PropTypes.shape({
     input: PropTypes.elementType,
+    notchedOutline: PropTypes.elementType,
     root: PropTypes.elementType
   }),
   /**

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.4.10
+ * @mui/material v6.4.12
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/AvatarGroup/AvatarGroup.js

@@ -93,7 +93,14 @@ 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 marginValue = ownerState.spacing && SPACINGS[ownerState.spacing] !== undefined ? SPACINGS[ownerState.spacing] : -ownerState.spacing || -8;
+  let marginValue;
+  if (ownerState.spacing && SPACINGS[ownerState.spacing] !== undefined) {
+    marginValue = SPACINGS[ownerState.spacing];
+  } else if (ownerState.spacing === 0) {
+    marginValue = 0;
+  } else {
+    marginValue = -ownerState.spacing || SPACINGS.medium;
+  }
   const externalForwardedProps = {
     slots,
     slotProps: {
@@ -118,7 +125,8 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
     ref: ref,
     ...other,
     style: {
-      '--AvatarGroup-spacing': marginValue ? `${marginValue}px` : undefined,
+      '--AvatarGroup-spacing': `${marginValue}px`,
+      // marginValue is always defined
       ...other.style
     },
     children: [extraAvatars ? /*#__PURE__*/_jsx(SurplusSlot, {

package/modern/Badge/Badge.js

@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import usePreviousProps from '@mui/utils/usePreviousProps';
 import composeClasses from '@mui/utils/composeClasses';
-import useSlotProps from '@mui/utils/useSlotProps';
 import useBadge from "./useBadge.js";
 import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
@@ -13,6 +12,7 @@ import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFil
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import capitalize from "../utils/capitalize.js";
 import badgeClasses, { getBadgeUtilityClass } from "./badgeClasses.js";
+import useSlot from "../utils/useSlot.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const RADIUS_STANDARD = 10;
 const RADIUS_DOT = 4;
@@ -282,26 +282,34 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   const classes = useUtilityClasses(ownerState);
 
   // support both `slots` and `components` for backward compatibility
-  const RootSlot = slots?.root ?? components.Root ?? BadgeRoot;
-  const BadgeSlot = slots?.badge ?? components.Badge ?? BadgeBadge;
-  const rootSlotProps = slotProps?.root ?? componentsProps.root;
-  const badgeSlotProps = slotProps?.badge ?? componentsProps.badge;
-  const rootProps = useSlotProps({
-    elementType: RootSlot,
-    externalSlotProps: rootSlotProps,
-    externalForwardedProps: other,
-    additionalProps: {
-      ref,
-      as: component
+  const externalForwardedProps = {
+    slots: {
+      root: slots?.root ?? components.Root,
+      badge: slots?.badge ?? components.Badge
+    },
+    slotProps: {
+      root: slotProps?.root ?? componentsProps.root,
+      badge: slotProps?.badge ?? componentsProps.badge
+    }
+  };
+  const [RootSlot, rootProps] = useSlot('root', {
+    elementType: BadgeRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
     },
     ownerState,
-    className: clsx(rootSlotProps?.className, classes.root, className)
+    className: clsx(classes.root, className),
+    ref,
+    additionalProps: {
+      as: component
+    }
   });
-  const badgeProps = useSlotProps({
-    elementType: BadgeSlot,
-    externalSlotProps: badgeSlotProps,
+  const [BadgeSlot, badgeProps] = useSlot('badge', {
+    elementType: BadgeBadge,
+    externalForwardedProps,
     ownerState,
-    className: clsx(classes.badge, badgeSlotProps?.className)
+    className: classes.badge
   });
   return /*#__PURE__*/_jsxs(RootSlot, {
     ...rootProps,
@@ -399,7 +407,7 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes /* remove-proptypes */ =
    */
   showZero: PropTypes.bool,
   /**
-   * The props used for each slot inside the Badge.
+   * The props used for each slot inside.
    * @default {}
    */
   slotProps: PropTypes.shape({
@@ -407,8 +415,7 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes /* remove-proptypes */ =
     root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
   }),
   /**
-   * The components used for each slot inside the Badge.
-   * Either a string to use a HTML element or a component.
+   * The components used for each slot inside.
    * @default {}
    */
   slots: PropTypes.shape({

package/modern/BottomNavigationAction/BottomNavigationAction.js

@@ -10,6 +10,7 @@ import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import ButtonBase from "../ButtonBase/index.js";
 import unsupportedProp from "../utils/unsupportedProp.js";
 import bottomNavigationActionClasses, { getBottomNavigationActionUtilityClass } from "./bottomNavigationActionClasses.js";
+import useSlot from "../utils/useSlot.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -107,6 +108,8 @@ const BottomNavigationAction = /*#__PURE__*/React.forwardRef(function BottomNavi
     selected,
     showLabel,
     value,
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
   const ownerState = props;
@@ -119,16 +122,41 @@ const BottomNavigationAction = /*#__PURE__*/React.forwardRef(function BottomNavi
       onClick(event);
     }
   };
-  return /*#__PURE__*/_jsxs(BottomNavigationActionRoot, {
-    ref: ref,
+  const externalForwardedProps = {
+    slots,
+    slotProps
+  };
+  const [RootSlot, rootProps] = useSlot('root', {
+    elementType: BottomNavigationActionRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
+    },
+    shouldForwardComponentProp: true,
+    ownerState,
+    ref,
     className: clsx(classes.root, className),
-    focusRipple: true,
-    onClick: handleChange,
-    ownerState: ownerState,
-    ...other,
-    children: [icon, /*#__PURE__*/_jsx(BottomNavigationActionLabel, {
-      className: classes.label,
-      ownerState: ownerState,
+    additionalProps: {
+      focusRipple: true
+    },
+    getSlotProps: handlers => ({
+      ...handlers,
+      onClick: event => {
+        handlers.onClick?.(event);
+        handleChange(event);
+      }
+    })
+  });
+  const [LabelSlot, labelProps] = useSlot('label', {
+    elementType: BottomNavigationActionLabel,
+    externalForwardedProps,
+    ownerState,
+    className: classes.label
+  });
+  return /*#__PURE__*/_jsxs(RootSlot, {
+    ...rootProps,
+    children: [icon, /*#__PURE__*/_jsx(LabelSlot, {
+      ...labelProps,
       children: label
     })]
   });
@@ -175,6 +203,22 @@ process.env.NODE_ENV !== "production" ? BottomNavigationAction.propTypes /* remo
    * The prop defaults to the value (`false`) inherited from the parent BottomNavigation component.
    */
   showLabel: PropTypes.bool,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    label: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    label: PropTypes.elementType,
+    root: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/CardActionArea/CardActionArea.js

@@ -9,6 +9,7 @@ import memoTheme from "../utils/memoTheme.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import cardActionAreaClasses, { getCardActionAreaUtilityClass } from "./cardActionAreaClasses.js";
 import ButtonBase from "../ButtonBase/index.js";
+import useSlot from "../utils/useSlot.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -72,19 +73,41 @@ const CardActionArea = /*#__PURE__*/React.forwardRef(function CardActionArea(inP
     children,
     className,
     focusVisibleClassName,
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsxs(CardActionAreaRoot, {
+  const externalForwardedProps = {
+    slots,
+    slotProps
+  };
+  const [RootSlot, rootProps] = useSlot('root', {
+    elementType: CardActionAreaRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
+    },
+    shouldForwardComponentProp: true,
+    ownerState,
+    ref,
     className: clsx(classes.root, className),
-    focusVisibleClassName: clsx(focusVisibleClassName, classes.focusVisible),
-    ref: ref,
-    ownerState: ownerState,
-    ...other,
-    children: [children, /*#__PURE__*/_jsx(CardActionAreaFocusHighlight, {
-      className: classes.focusHighlight,
-      ownerState: ownerState
+    additionalProps: {
+      focusVisibleClassName: clsx(focusVisibleClassName, classes.focusVisible)
+    }
+  });
+  const [FocusHighlightSlot, focusHighlightProps] = useSlot('focusHighlight', {
+    elementType: CardActionAreaFocusHighlight,
+    externalForwardedProps,
+    ownerState,
+    ref,
+    className: classes.focusHighlight
+  });
+  return /*#__PURE__*/_jsxs(RootSlot, {
+    ...rootProps,
+    children: [children, /*#__PURE__*/_jsx(FocusHighlightSlot, {
+      ...focusHighlightProps
     })]
   });
 });
@@ -109,6 +132,22 @@ process.env.NODE_ENV !== "production" ? CardActionArea.propTypes /* remove-propt
    * @ignore
    */
   focusVisibleClassName: PropTypes.string,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    focusHighlight: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    focusHighlight: PropTypes.elementType,
+    root: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/OutlinedInput/OutlinedInput.js

@@ -14,6 +14,7 @@ import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFil
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import outlinedInputClasses, { getOutlinedInputUtilityClass } from "./outlinedInputClasses.js";
 import InputBase, { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseInput } from "../InputBase/InputBase.js";
+import useSlot from "../utils/useSlot.js";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -178,7 +179,6 @@ const OutlinedInputInput = styled(InputBaseInput, {
   }]
 })));
 const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps, ref) {
-  var _React$Fragment;
   const props = useDefaultProps({
     props: inProps,
     name: 'MuiOutlinedInput'
@@ -191,6 +191,7 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
     multiline = false,
     notched,
     slots = {},
+    slotProps = {},
     type = 'text',
     ...other
   } = props;
@@ -216,17 +217,29 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
   };
   const RootSlot = slots.root ?? components.Root ?? OutlinedInputRoot;
   const InputSlot = slots.input ?? components.Input ?? OutlinedInputInput;
+  const [NotchedSlot, notchedProps] = useSlot('notchedOutline', {
+    elementType: NotchedOutlineRoot,
+    className: classes.notchedOutline,
+    shouldForwardComponentProp: true,
+    ownerState,
+    externalForwardedProps: {
+      slots,
+      slotProps
+    },
+    additionalProps: {
+      label: label != null && label !== '' && fcs.required ? /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [label, "\u2009", '*']
+      }) : label
+    }
+  });
   return /*#__PURE__*/_jsx(InputBase, {
     slots: {
       root: RootSlot,
       input: InputSlot
     },
-    renderSuffix: state => /*#__PURE__*/_jsx(NotchedOutlineRoot, {
-      ownerState: ownerState,
-      className: classes.notchedOutline,
-      label: label != null && label !== '' && fcs.required ? _React$Fragment || (_React$Fragment = /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [label, "\u2009", '*']
-      })) : label,
+    slotProps: slotProps,
+    renderSuffix: state => /*#__PURE__*/_jsx(NotchedSlot, {
+      ...notchedProps,
       notched: typeof notched !== 'undefined' ? notched : Boolean(state.startAdornment || state.filled || state.focused)
     }),
     fullWidth: fullWidth,
@@ -377,15 +390,22 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes /* remove-propty
    * Number of rows to display when multiline option is set to true.
    */
   rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    input: PropTypes.object,
+    notchedOutline: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.object
+  }),
   /**
    * The components used for each slot inside.
-   *
-   * This prop is an alias for the `components` prop, which will be deprecated in the future.
-   *
    * @default {}
    */
   slots: PropTypes.shape({
     input: PropTypes.elementType,
+    notchedOutline: PropTypes.elementType,
     root: PropTypes.elementType
   }),
   /**

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.4.10
+ * @mui/material v6.4.12
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/styles/ThemeProvider.js

@@ -9,27 +9,27 @@ export default function ThemeProvider({
   theme,
   ...props
 }) {
-  if (typeof theme === 'function') {
-    return /*#__PURE__*/_jsx(ThemeProviderNoVars, {
-      theme: theme,
-      ...props
-    });
-  }
-  const muiTheme = THEME_ID in theme ? theme[THEME_ID] : theme;
-  if (!('colorSchemes' in muiTheme)) {
-    if (!('vars' in muiTheme)) {
-      // For non-CSS variables themes, set `vars` to null to prevent theme inheritance from the upper theme.
-      // The example use case is the docs demo that uses ThemeProvider to customize the theme while the upper theme is using CSS variables.
-      return /*#__PURE__*/_jsx(ThemeProviderNoVars, {
-        theme: {
+  const noVarsTheme = React.useMemo(() => {
+    if (typeof theme === 'function') {
+      return theme;
+    }
+    const muiTheme = THEME_ID in theme ? theme[THEME_ID] : theme;
+    if (!('colorSchemes' in muiTheme)) {
+      if (!('vars' in muiTheme)) {
+        // For non-CSS variables themes, set `vars` to null to prevent theme inheritance from the upper theme.
+        // The example use case is the docs demo that uses ThemeProvider to customize the theme while the upper theme is using CSS variables.
+        return {
           ...theme,
           vars: null
-        },
-        ...props
-      });
+        };
+      }
+      return theme;
     }
+    return null;
+  }, [theme]);
+  if (noVarsTheme) {
     return /*#__PURE__*/_jsx(ThemeProviderNoVars, {
-      theme: theme,
+      theme: noVarsTheme,
       ...props
     });
   }

package/modern/version/index.js

@@ -1,6 +1,6 @@
-export const version = "6.4.10";
+export const version = "6.4.12";
 export const major = Number("6");
 export const minor = Number("4");
-export const patch = Number("10");
+export const patch = Number("12");
 export const prerelease = undefined;
 export default version;

package/node/AvatarGroup/AvatarGroup.js

@@ -100,7 +100,14 @@ 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 marginValue = ownerState.spacing && SPACINGS[ownerState.spacing] !== undefined ? SPACINGS[ownerState.spacing] : -ownerState.spacing || -8;
+  let marginValue;
+  if (ownerState.spacing && SPACINGS[ownerState.spacing] !== undefined) {
+    marginValue = SPACINGS[ownerState.spacing];
+  } else if (ownerState.spacing === 0) {
+    marginValue = 0;
+  } else {
+    marginValue = -ownerState.spacing || SPACINGS.medium;
+  }
   const externalForwardedProps = {
     slots,
     slotProps: {
@@ -125,7 +132,8 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
     ref: ref,
     ...other,
     style: {
-      '--AvatarGroup-spacing': marginValue ? `${marginValue}px` : undefined,
+      '--AvatarGroup-spacing': `${marginValue}px`,
+      // marginValue is always defined
       ...other.style
     },
     children: [extraAvatars ? /*#__PURE__*/(0, _jsxRuntime.jsx)(SurplusSlot, {

package/node/Badge/Badge.js

@@ -12,7 +12,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _usePreviousProps = _interopRequireDefault(require("@mui/utils/usePreviousProps"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _useBadge = _interopRequireDefault(require("./useBadge"));
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
@@ -20,6 +19,7 @@ var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/c
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _badgeClasses = _interopRequireWildcard(require("./badgeClasses"));
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
 const RADIUS_STANDARD = 10;
 const RADIUS_DOT = 4;
@@ -289,26 +289,34 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   const classes = useUtilityClasses(ownerState);
 
   // support both `slots` and `components` for backward compatibility
-  const RootSlot = slots?.root ?? components.Root ?? BadgeRoot;
-  const BadgeSlot = slots?.badge ?? components.Badge ?? BadgeBadge;
-  const rootSlotProps = slotProps?.root ?? componentsProps.root;
-  const badgeSlotProps = slotProps?.badge ?? componentsProps.badge;
-  const rootProps = (0, _useSlotProps.default)({
-    elementType: RootSlot,
-    externalSlotProps: rootSlotProps,
-    externalForwardedProps: other,
-    additionalProps: {
-      ref,
-      as: component
+  const externalForwardedProps = {
+    slots: {
+      root: slots?.root ?? components.Root,
+      badge: slots?.badge ?? components.Badge
+    },
+    slotProps: {
+      root: slotProps?.root ?? componentsProps.root,
+      badge: slotProps?.badge ?? componentsProps.badge
+    }
+  };
+  const [RootSlot, rootProps] = (0, _useSlot.default)('root', {
+    elementType: BadgeRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
     },
     ownerState,
-    className: (0, _clsx.default)(rootSlotProps?.className, classes.root, className)
+    className: (0, _clsx.default)(classes.root, className),
+    ref,
+    additionalProps: {
+      as: component
+    }
   });
-  const badgeProps = (0, _useSlotProps.default)({
-    elementType: BadgeSlot,
-    externalSlotProps: badgeSlotProps,
+  const [BadgeSlot, badgeProps] = (0, _useSlot.default)('badge', {
+    elementType: BadgeBadge,
+    externalForwardedProps,
     ownerState,
-    className: (0, _clsx.default)(classes.badge, badgeSlotProps?.className)
+    className: classes.badge
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, {
     ...rootProps,
@@ -406,7 +414,7 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes /* remove-proptypes */ =
    */
   showZero: _propTypes.default.bool,
   /**
-   * The props used for each slot inside the Badge.
+   * The props used for each slot inside.
    * @default {}
    */
   slotProps: _propTypes.default.shape({
@@ -414,8 +422,7 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes /* remove-proptypes */ =
     root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
   }),
   /**
-   * The components used for each slot inside the Badge.
-   * Either a string to use a HTML element or a component.
+   * The components used for each slot inside.
    * @default {}
    */
   slots: _propTypes.default.shape({