@mui/material 5.15.1 → 5.15.2

package/legacy/TableFooter/tableFooterClasses.js

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

package/legacy/TableHead/tableHeadClasses.js

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

package/legacy/TablePagination/tablePaginationClasses.js

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

package/legacy/TableRow/tableRowClasses.js

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

package/legacy/TableSortLabel/tableSortLabelClasses.js

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

package/legacy/Tabs/tabsClasses.js

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

package/legacy/TextField/textFieldClasses.js

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

package/legacy/ToggleButton/toggleButtonClasses.js

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

package/legacy/ToggleButtonGroup/toggleButtonGroupClasses.js

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

package/legacy/Toolbar/toolbarClasses.js

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

package/legacy/Tooltip/tooltipClasses.js

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

package/legacy/Typography/typographyClasses.js

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

package/legacy/Unstable_Grid2/grid2Classes.js

@@ -1,6 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-import generateUtilityClass from '../generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getGrid2UtilityClass(slot) {
   return generateUtilityClass('MuiGrid2', slot);
 }

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.15.1
+ * @mui/material v5.15.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/internal/switchBaseClasses.js

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

package/legacy/styles/createPalette.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
+import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 import { deepmerge } from '@mui/utils';
 import { darken, getContrastRatio, lighten } from '@mui/system';
 import common from '../colors/common';

package/legacy/styles/createTheme.js

@@ -1,10 +1,10 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
+import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 import { deepmerge } from '@mui/utils';
 import { createTheme as systemCreateTheme, unstable_defaultSxConfig as defaultSxConfig, unstable_styleFunctionSx as styleFunctionSx } from '@mui/system';
-import generateUtilityClass from '../generateUtilityClass';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import createMixins from './createMixins';
 import createPalette from './createPalette';
 import createTypography from './createTypography';

package/legacy/styles/index.js

@@ -1,6 +1,6 @@
 'use client';
 
-import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
+import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 export { default as THEME_ID } from './identifier';
 export { default as adaptV4Theme } from './adaptV4Theme';
 export { hexToRgb, rgbToHex, hslToRgb, decomposeColor, recomposeColor, getContrastRatio, getLuminance, emphasize, alpha, darken, lighten, css, keyframes } from '@mui/system';

package/legacy/styles/makeStyles.js

@@ -1,4 +1,4 @@
-import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
+import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 export default function makeStyles() {
   throw new Error(process.env.NODE_ENV !== "production" ? "MUI: makeStyles is no longer exported from @mui/material/styles.\nYou have to import it from @mui/styles.\nSee https://mui.com/r/migration-v4/#mui-material-styles for more details." : _formatMuiErrorMessage(14));
 }

package/legacy/styles/responsiveFontSizes.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
+import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 import { isUnitless, convertLength, responsiveProperty, alignProperty, fontGrid } from './cssUtils';
 export default function responsiveFontSizes(themeInput) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

package/legacy/styles/withStyles.js

@@ -1,4 +1,4 @@
-import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
+import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 export default function withStyles() {
   throw new Error(process.env.NODE_ENV !== "production" ? "MUI: withStyles is no longer exported from @mui/material/styles.\nYou have to import it from @mui/styles.\nSee https://mui.com/r/migration-v4/#mui-material-styles for more details." : _formatMuiErrorMessage(15));
 }

package/legacy/styles/withTheme.js

@@ -1,4 +1,4 @@
-import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
+import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 export default function withTheme() {
   throw new Error(process.env.NODE_ENV !== "production" ? "MUI: withTheme is no longer exported from @mui/material/styles.\nYou have to import it from @mui/styles.\nSee https://mui.com/r/migration-v4/#mui-material-styles for more details." : _formatMuiErrorMessage(16));
 }

package/modern/Accordion/Accordion.js

@@ -54,7 +54,7 @@ const AccordionRoot = styled(Paper, {
     transition: theme.transitions.create(['margin'], transition),
     overflowAnchor: 'none',
     // Keep the same scrolling position
-    '&:before': {
+    '&::before': {
       position: 'absolute',
       left: 0,
       top: -1,
@@ -66,12 +66,12 @@ const AccordionRoot = styled(Paper, {
       transition: theme.transitions.create(['opacity', 'background-color'], transition)
     },
     '&:first-of-type': {
-      '&:before': {
+      '&::before': {
         display: 'none'
       }
     },
     [`&.${accordionClasses.expanded}`]: {
-      '&:before': {
+      '&::before': {
         opacity: 0
       },
       '&:first-of-type': {
@@ -81,7 +81,7 @@ const AccordionRoot = styled(Paper, {
         marginBottom: 0
       },
       '& + &': {
-        '&:before': {
+        '&::before': {
           display: 'none'
         }
       }

package/modern/Accordion/accordionClasses.js

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

package/modern/AccordionActions/accordionActionsClasses.js

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

package/modern/AccordionDetails/accordionDetailsClasses.js

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

package/modern/AccordionSummary/accordionSummaryClasses.js

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

package/modern/Alert/alertClasses.js

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

package/modern/AlertTitle/alertTitleClasses.js

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

package/modern/AppBar/appBarClasses.js

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

package/modern/Autocomplete/autocompleteClasses.js

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

package/modern/Avatar/avatarClasses.js

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

package/modern/AvatarGroup/avatarGroupClasses.js

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

package/modern/Backdrop/backdropClasses.js

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

package/modern/Badge/Badge.js

@@ -1,7 +1,7 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["anchorOrigin", "className", "classes", "component", "components", "componentsProps", "children", "overlap", "color", "invisible", "max", "badgeContent", "slots", "slotProps", "showZero", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -54,9 +54,8 @@ const BadgeBadge = styled('span', {
     return [styles.badge, styles[ownerState.variant], styles[`anchorOrigin${capitalize(ownerState.anchorOrigin.vertical)}${capitalize(ownerState.anchorOrigin.horizontal)}${capitalize(ownerState.overlap)}`], ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`], ownerState.invisible && styles.invisible];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   display: 'flex',
   flexDirection: 'row',
   flexWrap: 'wrap',
@@ -78,84 +77,140 @@ const BadgeBadge = styled('span', {
   transition: theme.transitions.create('transform', {
     easing: theme.transitions.easing.easeInOut,
     duration: theme.transitions.duration.enteringScreen
-  })
-}, ownerState.color !== 'default' && {
-  backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
-  color: (theme.vars || theme).palette[ownerState.color].contrastText
-}, ownerState.variant === 'dot' && {
-  borderRadius: RADIUS_DOT,
-  height: RADIUS_DOT * 2,
-  minWidth: RADIUS_DOT * 2,
-  padding: 0
-}, ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'rectangular' && {
-  top: 0,
-  right: 0,
-  transform: 'scale(1) translate(50%, -50%)',
-  transformOrigin: '100% 0%',
-  [`&.${badgeClasses.invisible}`]: {
-    transform: 'scale(0) translate(50%, -50%)'
-  }
-}, ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'rectangular' && {
-  bottom: 0,
-  right: 0,
-  transform: 'scale(1) translate(50%, 50%)',
-  transformOrigin: '100% 100%',
-  [`&.${badgeClasses.invisible}`]: {
-    transform: 'scale(0) translate(50%, 50%)'
-  }
-}, ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'rectangular' && {
-  top: 0,
-  left: 0,
-  transform: 'scale(1) translate(-50%, -50%)',
-  transformOrigin: '0% 0%',
-  [`&.${badgeClasses.invisible}`]: {
-    transform: 'scale(0) translate(-50%, -50%)'
-  }
-}, ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'rectangular' && {
-  bottom: 0,
-  left: 0,
-  transform: 'scale(1) translate(-50%, 50%)',
-  transformOrigin: '0% 100%',
-  [`&.${badgeClasses.invisible}`]: {
-    transform: 'scale(0) translate(-50%, 50%)'
-  }
-}, ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'circular' && {
-  top: '14%',
-  right: '14%',
-  transform: 'scale(1) translate(50%, -50%)',
-  transformOrigin: '100% 0%',
-  [`&.${badgeClasses.invisible}`]: {
-    transform: 'scale(0) translate(50%, -50%)'
-  }
-}, ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'circular' && {
-  bottom: '14%',
-  right: '14%',
-  transform: 'scale(1) translate(50%, 50%)',
-  transformOrigin: '100% 100%',
-  [`&.${badgeClasses.invisible}`]: {
-    transform: 'scale(0) translate(50%, 50%)'
-  }
-}, ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'circular' && {
-  top: '14%',
-  left: '14%',
-  transform: 'scale(1) translate(-50%, -50%)',
-  transformOrigin: '0% 0%',
-  [`&.${badgeClasses.invisible}`]: {
-    transform: 'scale(0) translate(-50%, -50%)'
-  }
-}, ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'circular' && {
-  bottom: '14%',
-  left: '14%',
-  transform: 'scale(1) translate(-50%, 50%)',
-  transformOrigin: '0% 100%',
-  [`&.${badgeClasses.invisible}`]: {
-    transform: 'scale(0) translate(-50%, 50%)'
-  }
-}, ownerState.invisible && {
-  transition: theme.transitions.create('transform', {
-    easing: theme.transitions.easing.easeInOut,
-    duration: theme.transitions.duration.leavingScreen
-  })
+  }),
+  variants: [...Object.keys((theme.vars ?? theme).palette).filter(key => (theme.vars ?? theme).palette[key].main && (theme.vars ?? theme).palette[key].contrastText).map(color => ({
+    props: {
+      color
+    },
+    style: {
+      backgroundColor: (theme.vars || theme).palette[color].main,
+      color: (theme.vars || theme).palette[color].contrastText
+    }
+  })), {
+    props: {
+      variant: 'dot'
+    },
+    style: {
+      borderRadius: RADIUS_DOT,
+      height: RADIUS_DOT * 2,
+      minWidth: RADIUS_DOT * 2,
+      padding: 0
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'rectangular',
+    style: {
+      top: 0,
+      right: 0,
+      transform: 'scale(1) translate(50%, -50%)',
+      transformOrigin: '100% 0%',
+      [`&.${badgeClasses.invisible}`]: {
+        transform: 'scale(0) translate(50%, -50%)'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'rectangular',
+    style: {
+      bottom: 0,
+      right: 0,
+      transform: 'scale(1) translate(50%, 50%)',
+      transformOrigin: '100% 100%',
+      [`&.${badgeClasses.invisible}`]: {
+        transform: 'scale(0) translate(50%, 50%)'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'rectangular',
+    style: {
+      top: 0,
+      left: 0,
+      transform: 'scale(1) translate(-50%, -50%)',
+      transformOrigin: '0% 0%',
+      [`&.${badgeClasses.invisible}`]: {
+        transform: 'scale(0) translate(-50%, -50%)'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'rectangular',
+    style: {
+      bottom: 0,
+      left: 0,
+      transform: 'scale(1) translate(-50%, 50%)',
+      transformOrigin: '0% 100%',
+      [`&.${badgeClasses.invisible}`]: {
+        transform: 'scale(0) translate(-50%, 50%)'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'circular',
+    style: {
+      top: '14%',
+      right: '14%',
+      transform: 'scale(1) translate(50%, -50%)',
+      transformOrigin: '100% 0%',
+      [`&.${badgeClasses.invisible}`]: {
+        transform: 'scale(0) translate(50%, -50%)'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'circular',
+    style: {
+      bottom: '14%',
+      right: '14%',
+      transform: 'scale(1) translate(50%, 50%)',
+      transformOrigin: '100% 100%',
+      [`&.${badgeClasses.invisible}`]: {
+        transform: 'scale(0) translate(50%, 50%)'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'circular',
+    style: {
+      top: '14%',
+      left: '14%',
+      transform: 'scale(1) translate(-50%, -50%)',
+      transformOrigin: '0% 0%',
+      [`&.${badgeClasses.invisible}`]: {
+        transform: 'scale(0) translate(-50%, -50%)'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'circular',
+    style: {
+      bottom: '14%',
+      left: '14%',
+      transform: 'scale(1) translate(-50%, 50%)',
+      transformOrigin: '0% 100%',
+      [`&.${badgeClasses.invisible}`]: {
+        transform: 'scale(0) translate(-50%, 50%)'
+      }
+    }
+  }, {
+    props: {
+      invisible: true
+    },
+    style: {
+      transition: theme.transitions.create('transform', {
+        easing: theme.transitions.easing.easeInOut,
+        duration: theme.transitions.duration.leavingScreen
+      })
+    }
+  }]
 }));
 const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   const props = useThemeProps({

package/modern/Badge/badgeClasses.js

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

package/modern/BottomNavigation/bottomNavigationClasses.js

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

package/modern/BottomNavigationAction/bottomNavigationActionClasses.js

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

package/modern/Box/boxClasses.js

@@ -1,3 +1,3 @@
-import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 const boxClasses = generateUtilityClasses('MuiBox', ['root']);
 export default boxClasses;