@mui/material 5.10.10 → 5.10.12

package/Accordion/accordionClasses.js

@@ -1,17 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getAccordionUtilityClass = getAccordionUtilityClass;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getAccordionUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiAccordion', slot);
+  return (0, _generateUtilityClass.default)('MuiAccordion', slot);
 }
 
-const accordionClasses = (0, _base.generateUtilityClasses)('MuiAccordion', ['root', 'rounded', 'expanded', 'disabled', 'gutters', 'region']);
+const accordionClasses = (0, _utils.unstable_generateUtilityClasses)('MuiAccordion', ['root', 'rounded', 'expanded', 'disabled', 'gutters', 'region']);
 var _default = accordionClasses;
 exports.default = _default;

package/AccordionActions/accordionActionsClasses.js

@@ -1,17 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getAccordionActionsUtilityClass = getAccordionActionsUtilityClass;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getAccordionActionsUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiAccordionActions', slot);
+  return (0, _generateUtilityClass.default)('MuiAccordionActions', slot);
 }
 
-const accordionActionsClasses = (0, _base.generateUtilityClasses)('MuiAccordionActions', ['root', 'spacing']);
+const accordionActionsClasses = (0, _utils.unstable_generateUtilityClasses)('MuiAccordionActions', ['root', 'spacing']);
 var _default = accordionActionsClasses;
 exports.default = _default;

package/AccordionDetails/accordionDetailsClasses.js

@@ -1,17 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getAccordionDetailsUtilityClass = getAccordionDetailsUtilityClass;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getAccordionDetailsUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiAccordionDetails', slot);
+  return (0, _generateUtilityClass.default)('MuiAccordionDetails', slot);
 }
 
-const accordionDetailsClasses = (0, _base.generateUtilityClasses)('MuiAccordionDetails', ['root']);
+const accordionDetailsClasses = (0, _utils.unstable_generateUtilityClasses)('MuiAccordionDetails', ['root']);
 var _default = accordionDetailsClasses;
 exports.default = _default;

package/AccordionSummary/accordionSummaryClasses.js

@@ -1,17 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getAccordionSummaryUtilityClass = getAccordionSummaryUtilityClass;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getAccordionSummaryUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiAccordionSummary', slot);
+  return (0, _generateUtilityClass.default)('MuiAccordionSummary', slot);
 }
 
-const accordionSummaryClasses = (0, _base.generateUtilityClasses)('MuiAccordionSummary', ['root', 'expanded', 'focusVisible', 'disabled', 'gutters', 'contentGutters', 'content', 'expandIconWrapper']);
+const accordionSummaryClasses = (0, _utils.unstable_generateUtilityClasses)('MuiAccordionSummary', ['root', 'expanded', 'focusVisible', 'disabled', 'gutters', 'contentGutters', 'content', 'expandIconWrapper']);
 var _default = accordionSummaryClasses;
 exports.default = _default;

package/Alert/Alert.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { OverridableStringUnion } from '@mui/types';
 import { SxProps } from '@mui/system';
-import { InternalStandardProps as StandardProps, Theme } from '..';
+import { IconButtonProps, InternalStandardProps as StandardProps, SvgIconProps, Theme } from '..';
 import { PaperProps } from '../Paper';
 import { AlertClasses } from './alertClasses';
 
@@ -33,6 +33,23 @@ export interface AlertProps extends StandardProps<PaperProps, 'variant'> {
    * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
    */
   color?: OverridableStringUnion<AlertColor, AlertPropsColorOverrides>;
+  /**
+   * The components used for each slot inside the Alert.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  components?: {
+    CloseButton?: React.ElementType;
+    CloseIcon?: React.ElementType;
+  };
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  componentsProps?: {
+    closeButton?: IconButtonProps;
+    closeIcon?: SvgIconProps;
+  };
   /**
    * The severity of the alert. This defines the color and icon used.
    * @default 'success'

package/Alert/Alert.js

@@ -45,9 +45,7 @@ var _Close = _interopRequireDefault(require("../internal/svg-icons/Close"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _CloseIcon;
-
-const _excluded = ["action", "children", "className", "closeText", "color", "icon", "iconMapping", "onClose", "role", "severity", "variant"];
+const _excluded = ["action", "children", "className", "closeText", "color", "components", "componentsProps", "icon", "iconMapping", "onClose", "role", "severity", "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); }
 
@@ -161,6 +159,8 @@ const defaultIconMapping = {
   })
 };
 const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
+  var _components$CloseButt, _components$CloseIcon;
+
   const props = (0, _useThemeProps.default)({
     props: inProps,
     name: 'MuiAlert'
@@ -171,6 +171,8 @@ const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
     className,
     closeText = 'Close',
     color,
+    components = {},
+    componentsProps = {},
     icon,
     iconMapping = defaultIconMapping,
     onClose,
@@ -185,6 +187,8 @@ const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
     variant
   });
   const classes = useUtilityClasses(ownerState);
+  const AlertCloseButton = (_components$CloseButt = components.CloseButton) != null ? _components$CloseButt : _IconButton.default;
+  const AlertCloseIcon = (_components$CloseIcon = components.CloseIcon) != null ? _components$CloseIcon : _Close.default;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(AlertRoot, (0, _extends2.default)({
     role: role,
     elevation: 0,
@@ -207,16 +211,17 @@ const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
     }) : null, action == null && onClose ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AlertAction, {
       ownerState: ownerState,
       className: classes.action,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AlertCloseButton, (0, _extends2.default)({
         size: "small",
         "aria-label": closeText,
         title: closeText,
         color: "inherit",
-        onClick: onClose,
-        children: _CloseIcon || (_CloseIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {
+        onClick: onClose
+      }, componentsProps.closeButton, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AlertCloseIcon, (0, _extends2.default)({
           fontSize: "small"
-        }))
-      })
+        }, componentsProps.closeIcon))
+      }))
     }) : null]
   }));
 });
@@ -265,6 +270,25 @@ process.env.NODE_ENV !== "production" ? Alert.propTypes
   /* @typescript-to-proptypes-ignore */
   .oneOfType([_propTypes.default.oneOf(['error', 'info', 'success', 'warning']), _propTypes.default.string]),
 
+  /**
+   * The components used for each slot inside the Alert.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  components: _propTypes.default.shape({
+    CloseButton: _propTypes.default.elementType,
+    CloseIcon: _propTypes.default.elementType
+  }),
+
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  componentsProps: _propTypes.default.shape({
+    closeButton: _propTypes.default.object,
+    closeIcon: _propTypes.default.object
+  }),
+
   /**
    * Override the icon displayed before the children.
    * Unless provided, the icon is mapped to the value of the `severity` prop.

package/Alert/alertClasses.js

@@ -1,17 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getAlertUtilityClass = getAlertUtilityClass;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getAlertUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiAlert', slot);
+  return (0, _generateUtilityClass.default)('MuiAlert', slot);
 }
 
-const alertClasses = (0, _base.generateUtilityClasses)('MuiAlert', ['root', 'action', 'icon', 'message', 'filled', 'filledSuccess', 'filledInfo', 'filledWarning', 'filledError', 'outlined', 'outlinedSuccess', 'outlinedInfo', 'outlinedWarning', 'outlinedError', 'standard', 'standardSuccess', 'standardInfo', 'standardWarning', 'standardError']);
+const alertClasses = (0, _utils.unstable_generateUtilityClasses)('MuiAlert', ['root', 'action', 'icon', 'message', 'filled', 'filledSuccess', 'filledInfo', 'filledWarning', 'filledError', 'outlined', 'outlinedSuccess', 'outlinedInfo', 'outlinedWarning', 'outlinedError', 'standard', 'standardSuccess', 'standardInfo', 'standardWarning', 'standardError']);
 var _default = alertClasses;
 exports.default = _default;

package/AlertTitle/alertTitleClasses.js

@@ -1,17 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getAlertTitleUtilityClass = getAlertTitleUtilityClass;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getAlertTitleUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiAlertTitle', slot);
+  return (0, _generateUtilityClass.default)('MuiAlertTitle', slot);
 }
 
-const alertTitleClasses = (0, _base.generateUtilityClasses)('MuiAlertTitle', ['root']);
+const alertTitleClasses = (0, _utils.unstable_generateUtilityClasses)('MuiAlertTitle', ['root']);
 var _default = alertTitleClasses;
 exports.default = _default;

package/AppBar/AppBar.d.ts

@@ -46,7 +46,7 @@ export interface AppBarTypeMap<P = {}, D extends React.ElementType = 'header'> {
  *
  * Demos:
  *
- * - [App bar](https://mui.com/material-ui/react-app-bar/)
+ * - [App Bar](https://mui.com/material-ui/react-app-bar/)
  *
  * API:
  *

package/AppBar/appBarClasses.js

@@ -1,17 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getAppBarUtilityClass = getAppBarUtilityClass;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getAppBarUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiAppBar', slot);
+  return (0, _generateUtilityClass.default)('MuiAppBar', slot);
 }
 
-const appBarClasses = (0, _base.generateUtilityClasses)('MuiAppBar', ['root', 'positionFixed', 'positionAbsolute', 'positionSticky', 'positionStatic', 'positionRelative', 'colorDefault', 'colorPrimary', 'colorSecondary', 'colorInherit', 'colorTransparent']);
+const appBarClasses = (0, _utils.unstable_generateUtilityClasses)('MuiAppBar', ['root', 'positionFixed', 'positionAbsolute', 'positionSticky', 'positionStatic', 'positionRelative', 'colorDefault', 'colorPrimary', 'colorSecondary', 'colorInherit', 'colorTransparent']);
 var _default = appBarClasses;
 exports.default = _default;

package/Autocomplete/autocompleteClasses.js

@@ -1,17 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getAutocompleteUtilityClass = getAutocompleteUtilityClass;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getAutocompleteUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiAutocomplete', slot);
+  return (0, _generateUtilityClass.default)('MuiAutocomplete', slot);
 }
 
-const autocompleteClasses = (0, _base.generateUtilityClasses)('MuiAutocomplete', ['root', 'fullWidth', 'focused', 'focusVisible', 'tag', 'tagSizeSmall', 'tagSizeMedium', 'hasPopupIcon', 'hasClearIcon', 'inputRoot', 'input', 'inputFocused', 'endAdornment', 'clearIndicator', 'popupIndicator', 'popupIndicatorOpen', 'popper', 'popperDisablePortal', 'paper', 'listbox', 'loading', 'noOptions', 'option', 'groupLabel', 'groupUl']);
+const autocompleteClasses = (0, _utils.unstable_generateUtilityClasses)('MuiAutocomplete', ['root', 'fullWidth', 'focused', 'focusVisible', 'tag', 'tagSizeSmall', 'tagSizeMedium', 'hasPopupIcon', 'hasClearIcon', 'inputRoot', 'input', 'inputFocused', 'endAdornment', 'clearIndicator', 'popupIndicator', 'popupIndicatorOpen', 'popper', 'popperDisablePortal', 'paper', 'listbox', 'loading', 'noOptions', 'option', 'groupLabel', 'groupUl']);
 var _default = autocompleteClasses;
 exports.default = _default;

package/Avatar/avatarClasses.js

@@ -1,17 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getAvatarUtilityClass = getAvatarUtilityClass;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getAvatarUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiAvatar', slot);
+  return (0, _generateUtilityClass.default)('MuiAvatar', slot);
 }
 
-const avatarClasses = (0, _base.generateUtilityClasses)('MuiAvatar', ['root', 'colorDefault', 'circular', 'rounded', 'square', 'img', 'fallback']);
+const avatarClasses = (0, _utils.unstable_generateUtilityClasses)('MuiAvatar', ['root', 'colorDefault', 'circular', 'rounded', 'square', 'img', 'fallback']);
 var _default = avatarClasses;
 exports.default = _default;

package/AvatarGroup/avatarGroupClasses.js

@@ -1,17 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getAvatarGroupUtilityClass = getAvatarGroupUtilityClass;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getAvatarGroupUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiAvatarGroup', slot);
+  return (0, _generateUtilityClass.default)('MuiAvatarGroup', slot);
 }
 
-const avatarGroupClasses = (0, _base.generateUtilityClasses)('MuiAvatarGroup', ['root', 'avatar']);
+const avatarGroupClasses = (0, _utils.unstable_generateUtilityClasses)('MuiAvatarGroup', ['root', 'avatar']);
 var _default = avatarGroupClasses;
 exports.default = _default;

package/Backdrop/backdropClasses.js

@@ -1,17 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getBackdropUtilityClass = getBackdropUtilityClass;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getBackdropUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiBackdrop', slot);
+  return (0, _generateUtilityClass.default)('MuiBackdrop', slot);
 }
 
-const backdropClasses = (0, _base.generateUtilityClasses)('MuiBackdrop', ['root', 'invisible']);
+const backdropClasses = (0, _utils.unstable_generateUtilityClasses)('MuiBackdrop', ['root', 'invisible']);
 var _default = backdropClasses;
 exports.default = _default;

package/Badge/Badge.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { OverridableStringUnion } from '@mui/types';
-import { ExtendBadgeUnstyledTypeMap } from '@mui/base/BadgeUnstyled';
+import { BadgeUnstyledTypeMap, ExtendBadgeUnstyledTypeMap } from '@mui/base/BadgeUnstyled';
 import { Theme } from '../styles';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { BadgeClasses } from './badgeClasses';
@@ -46,6 +46,20 @@ export type BadgeTypeMap<
       'primary' | 'secondary' | 'default' | 'error' | 'info' | 'success' | 'warning',
       BadgePropsColorOverrides
     >;
+    /**
+     * The props used for each slot inside the Badge.
+     * @default {}
+     */
+    componentsProps?: BadgeUnstyledTypeMap['props']['slotProps'];
+    /**
+     * The components used for each slot inside the Badge.
+     * Either a string to use a HTML element or a component.
+     * @default {}
+     */
+    components?: {
+      Root?: React.ElementType;
+      Badge?: React.ElementType;
+    };
     /**
      * Wrapped shape the badge should overlap.
      * @default 'rectangular'
@@ -64,8 +78,8 @@ export type BadgeTypeMap<
   defaultComponent: D;
 }>;
 
-type BadgeRootProps = NonNullable<BadgeTypeMap['props']['componentsProps']>['root'];
-type BadgeBadgeProps = NonNullable<BadgeTypeMap['props']['componentsProps']>['badge'];
+type BadgeRootProps = NonNullable<BadgeTypeMap['props']['slotProps']>['root'];
+type BadgeBadgeProps = NonNullable<BadgeTypeMap['props']['slotProps']>['badge'];
 
 export declare const BadgeRoot: React.FC<BadgeRootProps>;
 export declare const BadgeMark: React.FC<BadgeBadgeProps>;

package/Badge/Badge.js

@@ -35,7 +35,7 @@ var _badgeClasses = _interopRequireWildcard(require("./badgeClasses"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["anchorOrigin", "className", "component", "components", "componentsProps", "overlap", "color", "invisible", "max", "badgeContent", "showZero", "variant"];
+const _excluded = ["anchorOrigin", "className", "component", "components", "componentsProps", "overlap", "color", "invisible", "max", "badgeContent", "slots", "slotProps", "showZero", "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); }
 
@@ -185,7 +185,7 @@ const BadgeBadge = (0, _styled.default)('span', {
   })
 }));
 const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
-  var _componentsProps$root, _componentsProps$root2, _componentsProps$badg, _componentsProps$badg2;
+  var _ref, _slots$root, _ref2, _slots$badge, _slotProps$root, _slotProps$badge;
 
   const props = (0, _useThemeProps.default)({
     props: inProps,
@@ -205,6 +205,8 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
     invisible: invisibleProp = false,
     max,
     badgeContent: badgeContentProp,
+    slots,
+    slotProps,
     showZero = false,
     variant: variantProp = 'standard'
   } = props,
@@ -239,33 +241,38 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
 
   if (variant !== 'dot') {
     displayValue = badgeContentProp && Number(badgeContentProp) > max ? `${max}+` : badgeContentProp;
-  }
+  } // support both `slots` and `components` for backward compatibility
+
 
+  const RootSlot = (_ref = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref : BadgeRoot;
+  const BadgeSlot = (_ref2 = (_slots$badge = slots == null ? void 0 : slots.badge) != null ? _slots$badge : components.Badge) != null ? _ref2 : BadgeBadge;
+  const rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
+  const badgeSlotProps = (_slotProps$badge = slotProps == null ? void 0 : slotProps.badge) != null ? _slotProps$badge : componentsProps.badge;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BadgeUnstyled.default, (0, _extends2.default)({
     invisible: invisibleProp,
     badgeContent: displayValue,
     showZero: showZero,
     max: max
   }, other, {
-    components: (0, _extends2.default)({
-      Root: BadgeRoot,
-      Badge: BadgeBadge
-    }, components),
-    className: (0, _clsx.default)((_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.className, classes.root, className),
-    componentsProps: {
-      root: (0, _extends2.default)({}, componentsProps.root, (0, _shouldSpreadAdditionalProps.default)(components.Root) && {
+    slots: {
+      root: RootSlot,
+      badge: BadgeSlot
+    },
+    className: (0, _clsx.default)(rootSlotProps == null ? void 0 : rootSlotProps.className, classes.root, className),
+    slotProps: {
+      root: (0, _extends2.default)({}, rootSlotProps, (0, _shouldSpreadAdditionalProps.default)(RootSlot) && {
         as: component,
-        ownerState: (0, _extends2.default)({}, (_componentsProps$root2 = componentsProps.root) == null ? void 0 : _componentsProps$root2.ownerState, {
+        ownerState: (0, _extends2.default)({}, rootSlotProps == null ? void 0 : rootSlotProps.ownerState, {
           anchorOrigin,
           color,
           overlap,
           variant
         })
       }),
-      badge: (0, _extends2.default)({}, componentsProps.badge, {
-        className: (0, _clsx.default)(classes.badge, (_componentsProps$badg = componentsProps.badge) == null ? void 0 : _componentsProps$badg.className)
-      }, (0, _shouldSpreadAdditionalProps.default)(components.Badge) && {
-        ownerState: (0, _extends2.default)({}, (_componentsProps$badg2 = componentsProps.badge) == null ? void 0 : _componentsProps$badg2.ownerState, {
+      badge: (0, _extends2.default)({}, badgeSlotProps, {
+        className: (0, _clsx.default)(classes.badge, badgeSlotProps == null ? void 0 : badgeSlotProps.className)
+      }, (0, _shouldSpreadAdditionalProps.default)(BadgeSlot) && {
+        ownerState: (0, _extends2.default)({}, badgeSlotProps == null ? void 0 : badgeSlotProps.ownerState, {
           anchorOrigin,
           color,
           overlap,
@@ -375,6 +382,25 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
    */
   showZero: _propTypes.default.bool,
 
+  /**
+   * The props used for each slot inside the Badge.
+   * @default {}
+   */
+  slotProps: _propTypes.default.shape({
+    badge: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    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.
+   * @default {}
+   */
+  slots: _propTypes.default.shape({
+    badge: _propTypes.default.elementType,
+    root: _propTypes.default.elementType
+  }),
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/Badge/badgeClasses.js

@@ -8,15 +8,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 exports.getBadgeUtilityClass = getBadgeUtilityClass;
 
-var _generateUtilityClasses = _interopRequireDefault(require("@mui/base/generateUtilityClasses"));
+var _utils = require("@mui/utils");
 
-var _generateUtilityClass = _interopRequireDefault(require("@mui/base/generateUtilityClass"));
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getBadgeUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiBadge', slot);
 }
 
-const badgeClasses = (0, _generateUtilityClasses.default)('MuiBadge', ['root', 'badge', 'dot', 'standard', 'anchorOriginTopRight', 'anchorOriginBottomRight', 'anchorOriginTopLeft', 'anchorOriginBottomLeft', 'invisible', 'colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'overlapRectangular', 'overlapCircular', // TODO: v6 remove the overlap value from these class keys
+const badgeClasses = (0, _utils.unstable_generateUtilityClasses)('MuiBadge', ['root', 'badge', 'dot', 'standard', 'anchorOriginTopRight', 'anchorOriginBottomRight', 'anchorOriginTopLeft', 'anchorOriginBottomLeft', 'invisible', 'colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'overlapRectangular', 'overlapCircular', // TODO: v6 remove the overlap value from these class keys
 'anchorOriginTopLeftCircular', 'anchorOriginTopLeftRectangular', 'anchorOriginTopRightCircular', 'anchorOriginTopRightRectangular', 'anchorOriginBottomLeftCircular', 'anchorOriginBottomLeftRectangular', 'anchorOriginBottomRightCircular', 'anchorOriginBottomRightRectangular']);
 var _default = badgeClasses;
 exports.default = _default;

package/BottomNavigation/BottomNavigation.d.ts

@@ -42,7 +42,7 @@ export interface BottomNavigationTypeMap<P = {}, D extends React.ElementType = '
  *
  * Demos:
  *
- * - [Bottom navigation](https://mui.com/material-ui/react-bottom-navigation/)
+ * - [Bottom Navigation](https://mui.com/material-ui/react-bottom-navigation/)
  *
  * API:
  *

package/BottomNavigation/bottomNavigationClasses.js

@@ -1,17 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getBottomNavigationUtilityClass = getBottomNavigationUtilityClass;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getBottomNavigationUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiBottomNavigation', slot);
+  return (0, _generateUtilityClass.default)('MuiBottomNavigation', slot);
 }
 
-const bottomNavigationClasses = (0, _base.generateUtilityClasses)('MuiBottomNavigation', ['root']);
+const bottomNavigationClasses = (0, _utils.unstable_generateUtilityClasses)('MuiBottomNavigation', ['root']);
 var _default = bottomNavigationClasses;
 exports.default = _default;

package/BottomNavigationAction/BottomNavigationAction.d.ts

@@ -51,7 +51,7 @@ export type BottomNavigationActionTypeMap<
  *
  * Demos:
  *
- * - [Bottom navigation](https://mui.com/material-ui/react-bottom-navigation/)
+ * - [Bottom Navigation](https://mui.com/material-ui/react-bottom-navigation/)
  *
  * API:
  *