@mui/material 5.10.10 → 5.10.11

package/Tooltip/tooltipClasses.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.getTooltipUtilityClass = getTooltipUtilityClass;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getTooltipUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiTooltip', slot);
+  return (0, _generateUtilityClass.default)('MuiTooltip', slot);
 }
 
-const tooltipClasses = (0, _base.generateUtilityClasses)('MuiTooltip', ['popper', 'popperInteractive', 'popperArrow', 'popperClose', 'tooltip', 'tooltipArrow', 'touch', 'tooltipPlacementLeft', 'tooltipPlacementRight', 'tooltipPlacementTop', 'tooltipPlacementBottom', 'arrow']);
+const tooltipClasses = (0, _utils.unstable_generateUtilityClasses)('MuiTooltip', ['popper', 'popperInteractive', 'popperArrow', 'popperClose', 'tooltip', 'tooltipArrow', 'touch', 'tooltipPlacementLeft', 'tooltipPlacementRight', 'tooltipPlacementTop', 'tooltipPlacementBottom', 'arrow']);
 var _default = tooltipClasses;
 exports.default = _default;

package/Typography/typographyClasses.d.ts

@@ -1,50 +1,50 @@
-export interface TypographyClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `variant="body2"`. */
-    body2: string;
-    /** Styles applied to the root element if `variant="body1"`. */
-    body1: string;
-    /** Styles applied to the root element if `variant="caption"`. */
-    caption: string;
-    /** Styles applied to the root element if `variant="button"`. */
-    button: string;
-    /** Styles applied to the root element if `variant="h1"`. */
-    h1: string;
-    /** Styles applied to the root element if `variant="h2"`. */
-    h2: string;
-    /** Styles applied to the root element if `variant="h3"`. */
-    h3: string;
-    /** Styles applied to the root element if `variant="h4"`. */
-    h4: string;
-    /** Styles applied to the root element if `variant="h5"`. */
-    h5: string;
-    /** Styles applied to the root element if `variant="h6"`. */
-    h6: string;
-    /** Styles applied to the root element if `variant="subtitle1"`. */
-    subtitle1: string;
-    /** Styles applied to the root element if `variant="subtitle2"`. */
-    subtitle2: string;
-    /** Styles applied to the root element if `variant="overline"`. */
-    overline: string;
-    /** Styles applied to the root element if `variant="inherit"`. */
-    inherit: string;
-    /** Styles applied to the root element if `align="left"`. */
-    alignLeft: string;
-    /** Styles applied to the root element if `align="center"`. */
-    alignCenter: string;
-    /** Styles applied to the root element if `align="right"`. */
-    alignRight: string;
-    /** Styles applied to the root element if `align="justify"`. */
-    alignJustify: string;
-    /** Styles applied to the root element if `nowrap={true}`. */
-    noWrap: string;
-    /** Styles applied to the root element if `gutterBottom={true}`. */
-    gutterBottom: string;
-    /** Styles applied to the root element if `paragraph={true}`. */
-    paragraph: string;
-}
-export declare type TypographyClassKey = keyof TypographyClasses;
-export declare function getTypographyUtilityClass(slot: string): string;
-declare const typographyClasses: TypographyClasses;
-export default typographyClasses;
+export interface TypographyClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `variant="body2"`. */
+    body2: string;
+    /** Styles applied to the root element if `variant="body1"`. */
+    body1: string;
+    /** Styles applied to the root element if `variant="caption"`. */
+    caption: string;
+    /** Styles applied to the root element if `variant="button"`. */
+    button: string;
+    /** Styles applied to the root element if `variant="h1"`. */
+    h1: string;
+    /** Styles applied to the root element if `variant="h2"`. */
+    h2: string;
+    /** Styles applied to the root element if `variant="h3"`. */
+    h3: string;
+    /** Styles applied to the root element if `variant="h4"`. */
+    h4: string;
+    /** Styles applied to the root element if `variant="h5"`. */
+    h5: string;
+    /** Styles applied to the root element if `variant="h6"`. */
+    h6: string;
+    /** Styles applied to the root element if `variant="subtitle1"`. */
+    subtitle1: string;
+    /** Styles applied to the root element if `variant="subtitle2"`. */
+    subtitle2: string;
+    /** Styles applied to the root element if `variant="overline"`. */
+    overline: string;
+    /** Styles applied to the root element if `variant="inherit"`. */
+    inherit: string;
+    /** Styles applied to the root element if `align="left"`. */
+    alignLeft: string;
+    /** Styles applied to the root element if `align="center"`. */
+    alignCenter: string;
+    /** Styles applied to the root element if `align="right"`. */
+    alignRight: string;
+    /** Styles applied to the root element if `align="justify"`. */
+    alignJustify: string;
+    /** Styles applied to the root element if `nowrap={true}`. */
+    noWrap: string;
+    /** Styles applied to the root element if `gutterBottom={true}`. */
+    gutterBottom: string;
+    /** Styles applied to the root element if `paragraph={true}`. */
+    paragraph: string;
+}
+export declare type TypographyClassKey = keyof TypographyClasses;
+export declare function getTypographyUtilityClass(slot: string): string;
+declare const typographyClasses: TypographyClasses;
+export default typographyClasses;

package/Typography/typographyClasses.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.getTypographyUtilityClass = getTypographyUtilityClass;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getTypographyUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiTypography', slot);
+  return (0, _generateUtilityClass.default)('MuiTypography', slot);
 }
 
-const typographyClasses = (0, _base.generateUtilityClasses)('MuiTypography', ['root', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'inherit', 'button', 'caption', 'overline', 'alignLeft', 'alignRight', 'alignCenter', 'alignJustify', 'noWrap', 'gutterBottom', 'paragraph']);
+const typographyClasses = (0, _utils.unstable_generateUtilityClasses)('MuiTypography', ['root', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'inherit', 'button', 'caption', 'overline', 'alignLeft', 'alignRight', 'alignCenter', 'alignJustify', 'noWrap', 'gutterBottom', 'paragraph']);
 var _default = typographyClasses;
 exports.default = _default;

package/Unstable_Grid2/Grid2.d.ts

@@ -1,4 +1,4 @@
-import { OverridableComponent } from '@mui/types';
-import { Grid2TypeMap } from './Grid2Props';
-declare const Grid2: OverridableComponent<Grid2TypeMap<{}, "div">>;
-export default Grid2;
+import { OverridableComponent } from '@mui/types';
+import { Grid2TypeMap } from './Grid2Props';
+declare const Grid2: OverridableComponent<Grid2TypeMap<{}, "div">>;
+export default Grid2;

package/Unstable_Grid2/Grid2Props.d.ts

@@ -1,15 +1,15 @@
-import React from 'react';
-import { OverrideProps } from '@mui/types';
-import { SxProps, SystemProps } from '@mui/system';
-import { GridBaseProps } from '@mui/system/Unstable_Grid';
-import { Theme } from '../styles';
-export declare type Grid2Slot = 'root';
-export interface Grid2TypeMap<P = {}, D extends React.ElementType = 'div'> {
-    props: P & GridBaseProps & {
-        sx?: SxProps<Theme>;
-    } & SystemProps<Theme>;
-    defaultComponent: D;
-}
-export declare type Grid2Props<D extends React.ElementType = Grid2TypeMap['defaultComponent'], P = {
-    component?: React.ElementType;
-}> = OverrideProps<Grid2TypeMap<P, D>, D>;
+import React from 'react';
+import { OverrideProps } from '@mui/types';
+import { SxProps, SystemProps } from '@mui/system';
+import { GridBaseProps } from '@mui/system/Unstable_Grid';
+import { Theme } from '../styles';
+export declare type Grid2Slot = 'root';
+export interface Grid2TypeMap<P = {}, D extends React.ElementType = 'div'> {
+    props: P & GridBaseProps & {
+        sx?: SxProps<Theme>;
+    } & SystemProps<Theme>;
+    defaultComponent: D;
+}
+export declare type Grid2Props<D extends React.ElementType = Grid2TypeMap['defaultComponent'], P = {
+    component?: React.ElementType;
+}> = OverrideProps<Grid2TypeMap<P, D>, D>;

package/Unstable_Grid2/grid2Classes.d.ts

@@ -1,5 +1,5 @@
-import { GridClasses } from '@mui/system/Unstable_Grid';
-export declare type Grid2ClassKey = keyof GridClasses;
-export declare function getGrid2UtilityClass(slot: string): string;
-declare const grid2Classes: GridClasses;
-export default grid2Classes;
+import { GridClasses } from '@mui/system/Unstable_Grid';
+export declare type Grid2ClassKey = keyof GridClasses;
+export declare function getGrid2UtilityClass(slot: string): string;
+declare const grid2Classes: GridClasses;
+export default grid2Classes;

package/Unstable_Grid2/grid2Classes.js

@@ -1,22 +1,26 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getGrid2UtilityClass = getGrid2UtilityClass;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getGrid2UtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiGrid2', slot);
+  return (0, _generateUtilityClass.default)('MuiGrid2', slot);
 }
 
 const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 const DIRECTIONS = ['column-reverse', 'column', 'row-reverse', 'row'];
 const WRAPS = ['nowrap', 'wrap-reverse', 'wrap'];
 const GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
-const grid2Classes = (0, _base.generateUtilityClasses)('MuiGrid2', ['root', 'container', 'item', 'zeroMinWidth', // spacings
+const grid2Classes = (0, _utils.unstable_generateUtilityClasses)('MuiGrid2', ['root', 'container', 'item', 'zeroMinWidth', // spacings
 ...SPACINGS.map(spacing => `spacing-xs-${spacing}`), // direction values
 ...DIRECTIONS.map(direction => `direction-xs-${direction}`), // wrap values
 ...WRAPS.map(wrap => `wrap-xs-${wrap}`), // grid sizes for all breakpoints

package/Unstable_Grid2/index.d.ts

@@ -1,4 +1,4 @@
-export { default } from './Grid2';
-export * from './Grid2Props';
-export { default as grid2Classes } from './grid2Classes';
-export * from './grid2Classes';
+export { default } from './Grid2';
+export * from './Grid2Props';
+export { default as grid2Classes } from './grid2Classes';
+export * from './grid2Classes';

package/className/index.d.ts

@@ -1 +1 @@
-export { unstable_ClassNameGenerator } from '@mui/utils';
+export { unstable_ClassNameGenerator } from '@mui/utils';

package/darkScrollbar/index.d.ts

@@ -1,28 +1,28 @@
-export default function darkScrollbar(options?: {
-    track: string;
-    thumb: string;
-    active: string;
-}): {
-    scrollbarColor: string;
-    '&::-webkit-scrollbar, & *::-webkit-scrollbar': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb': {
-        borderRadius: number;
-        backgroundColor: string;
-        minHeight: number;
-        border: string;
-    };
-    '&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner': {
-        backgroundColor: string;
-    };
-};
+export default function darkScrollbar(options?: {
+    track: string;
+    thumb: string;
+    active: string;
+}): {
+    scrollbarColor: string;
+    '&::-webkit-scrollbar, & *::-webkit-scrollbar': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb': {
+        borderRadius: number;
+        backgroundColor: string;
+        minHeight: number;
+        border: string;
+    };
+    '&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner': {
+        backgroundColor: string;
+    };
+};

package/esm/Accordion/accordionClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getAccordionUtilityClass(slot) {
   return generateUtilityClass('MuiAccordion', slot);
 }

package/esm/AccordionActions/accordionActionsClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getAccordionActionsUtilityClass(slot) {
   return generateUtilityClass('MuiAccordionActions', slot);
 }

package/esm/AccordionDetails/accordionDetailsClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getAccordionDetailsUtilityClass(slot) {
   return generateUtilityClass('MuiAccordionDetails', slot);
 }

package/esm/AccordionSummary/accordionSummaryClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getAccordionSummaryUtilityClass(slot) {
   return generateUtilityClass('MuiAccordionSummary', slot);
 }

package/esm/Alert/Alert.js

@@ -1,9 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-
-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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -131,6 +128,8 @@ const defaultIconMapping = {
   })
 };
 const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
+  var _components$CloseButt, _components$CloseIcon;
+
   const props = useThemeProps({
     props: inProps,
     name: 'MuiAlert'
@@ -142,6 +141,8 @@ const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
     className,
     closeText = 'Close',
     color,
+    components = {},
+    componentsProps = {},
     icon,
     iconMapping = defaultIconMapping,
     onClose,
@@ -158,6 +159,8 @@ const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
   });
 
   const classes = useUtilityClasses(ownerState);
+  const AlertCloseButton = (_components$CloseButt = components.CloseButton) != null ? _components$CloseButt : IconButton;
+  const AlertCloseIcon = (_components$CloseIcon = components.CloseIcon) != null ? _components$CloseIcon : CloseIcon;
   return /*#__PURE__*/_jsxs(AlertRoot, _extends({
     role: role,
     elevation: 0,
@@ -180,16 +183,17 @@ const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
     }) : null, action == null && onClose ? /*#__PURE__*/_jsx(AlertAction, {
       ownerState: ownerState,
       className: classes.action,
-      children: /*#__PURE__*/_jsx(IconButton, {
+      children: /*#__PURE__*/_jsx(AlertCloseButton, _extends({
         size: "small",
         "aria-label": closeText,
         title: closeText,
         color: "inherit",
-        onClick: onClose,
-        children: _CloseIcon || (_CloseIcon = /*#__PURE__*/_jsx(CloseIcon, {
+        onClick: onClose
+      }, componentsProps.closeButton, {
+        children: /*#__PURE__*/_jsx(AlertCloseIcon, _extends({
           fontSize: "small"
-        }))
-      })
+        }, componentsProps.closeIcon))
+      }))
     }) : null]
   }));
 });
@@ -238,6 +242,25 @@ process.env.NODE_ENV !== "production" ? Alert.propTypes
   /* @typescript-to-proptypes-ignore */
   .oneOfType([PropTypes.oneOf(['error', 'info', 'success', 'warning']), PropTypes.string]),
 
+  /**
+   * The components used for each slot inside the Alert.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  components: PropTypes.shape({
+    CloseButton: PropTypes.elementType,
+    CloseIcon: PropTypes.elementType
+  }),
+
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  componentsProps: PropTypes.shape({
+    closeButton: PropTypes.object,
+    closeIcon: PropTypes.object
+  }),
+
   /**
    * Override the icon displayed before the children.
    * Unless provided, the icon is mapped to the value of the `severity` prop.

package/esm/Alert/alertClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getAlertUtilityClass(slot) {
   return generateUtilityClass('MuiAlert', slot);
 }

package/esm/AlertTitle/alertTitleClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getAlertTitleUtilityClass(slot) {
   return generateUtilityClass('MuiAlertTitle', slot);
 }

package/esm/AppBar/appBarClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getAppBarUtilityClass(slot) {
   return generateUtilityClass('MuiAppBar', slot);
 }

package/esm/Autocomplete/autocompleteClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getAutocompleteUtilityClass(slot) {
   return generateUtilityClass('MuiAutocomplete', slot);
 }

package/esm/Avatar/avatarClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getAvatarUtilityClass(slot) {
   return generateUtilityClass('MuiAvatar', slot);
 }

package/esm/AvatarGroup/avatarGroupClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getAvatarGroupUtilityClass(slot) {
   return generateUtilityClass('MuiAvatarGroup', slot);
 }

package/esm/Backdrop/backdropClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getBackdropUtilityClass(slot) {
   return generateUtilityClass('MuiBackdrop', slot);
 }

package/esm/Badge/Badge.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -157,7 +157,7 @@ const BadgeBadge = styled('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 = useThemeProps({
     props: inProps,
@@ -178,6 +178,8 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
     invisible: invisibleProp = false,
     max,
     badgeContent: badgeContentProp,
+    slots,
+    slotProps,
     showZero = false,
     variant: variantProp = 'standard'
   } = props,
@@ -215,33 +217,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__*/_jsx(BadgeUnstyled, _extends({
     invisible: invisibleProp,
     badgeContent: displayValue,
     showZero: showZero,
     max: max
   }, other, {
-    components: _extends({
-      Root: BadgeRoot,
-      Badge: BadgeBadge
-    }, components),
-    className: clsx((_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.className, classes.root, className),
-    componentsProps: {
-      root: _extends({}, componentsProps.root, shouldSpreadAdditionalProps(components.Root) && {
+    slots: {
+      root: RootSlot,
+      badge: BadgeSlot
+    },
+    className: clsx(rootSlotProps == null ? void 0 : rootSlotProps.className, classes.root, className),
+    slotProps: {
+      root: _extends({}, rootSlotProps, shouldSpreadAdditionalProps(RootSlot) && {
         as: component,
-        ownerState: _extends({}, (_componentsProps$root2 = componentsProps.root) == null ? void 0 : _componentsProps$root2.ownerState, {
+        ownerState: _extends({}, rootSlotProps == null ? void 0 : rootSlotProps.ownerState, {
           anchorOrigin,
           color,
           overlap,
           variant
         })
       }),
-      badge: _extends({}, componentsProps.badge, {
-        className: clsx(classes.badge, (_componentsProps$badg = componentsProps.badge) == null ? void 0 : _componentsProps$badg.className)
-      }, shouldSpreadAdditionalProps(components.Badge) && {
-        ownerState: _extends({}, (_componentsProps$badg2 = componentsProps.badge) == null ? void 0 : _componentsProps$badg2.ownerState, {
+      badge: _extends({}, badgeSlotProps, {
+        className: clsx(classes.badge, badgeSlotProps == null ? void 0 : badgeSlotProps.className)
+      }, shouldSpreadAdditionalProps(BadgeSlot) && {
+        ownerState: _extends({}, badgeSlotProps == null ? void 0 : badgeSlotProps.ownerState, {
           anchorOrigin,
           color,
           overlap,
@@ -351,6 +358,25 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
    */
   showZero: PropTypes.bool,
 
+  /**
+   * The props used for each slot inside the Badge.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    badge: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    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.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    badge: PropTypes.elementType,
+    root: PropTypes.elementType
+  }),
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/esm/Badge/badgeClasses.js

@@ -1,5 +1,5 @@
-import generateUtilityClasses from '@mui/base/generateUtilityClasses';
-import generateUtilityClass from '@mui/base/generateUtilityClass';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getBadgeUtilityClass(slot) {
   return generateUtilityClass('MuiBadge', slot);
 }

package/esm/BottomNavigation/bottomNavigationClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getBottomNavigationUtilityClass(slot) {
   return generateUtilityClass('MuiBottomNavigation', slot);
 }

package/esm/BottomNavigationAction/bottomNavigationActionClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getBottomNavigationActionUtilityClass(slot) {
   return generateUtilityClass('MuiBottomNavigationAction', slot);
 }

package/esm/Breadcrumbs/breadcrumbsClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getBreadcrumbsUtilityClass(slot) {
   return generateUtilityClass('MuiBreadcrumbs', slot);
 }

package/esm/Button/buttonClasses.js

@@ -1,4 +1,5 @@
-import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
 export function getButtonUtilityClass(slot) {
   return generateUtilityClass('MuiButton', slot);
 }