@mui/material 5.15.0 → 5.15.2

package/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/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/AccordionActions/AccordionActions.js

@@ -38,7 +38,7 @@ const AccordionActionsRoot = styled('div', {
   padding: 8,
   justifyContent: 'flex-end'
 }, !ownerState.disableSpacing && {
-  '& > :not(:first-of-type)': {
+  '& > :not(style) ~ :not(style)': {
     marginLeft: 8
   }
 }));

package/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/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/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/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/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/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/Autocomplete/Autocomplete.js

@@ -660,7 +660,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
   /**
-   * If `true`, the portion of the selected suggestion that has not been typed by the user,
+   * If `true`, the portion of the selected suggestion that the user hasn't typed,
    * known as the completion string, appears inline after the input cursor in the textbox.
    * The inline completion string is visually highlighted and has a selected state.
    * @default false
@@ -676,7 +676,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * when the Autocomplete loses focus unless the user chooses
    * a different option or changes the character string in the input.
    *
-   * When using `freeSolo` mode, the typed value will be the input value
+   * When using the `freeSolo` mode, the typed value will be the input value
    * if the Autocomplete loses focus without highlighting an option.
    * @default false
    */
@@ -711,8 +711,8 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
   /**
    * If `true`, the input's text is cleared on blur if no value is selected.
    *
-   * Set to `true` if you want to help the user enter a new value.
-   * Set to `false` if you want to help the user resume their search.
+   * Set it to `true` if you want to help the user enter a new value.
+   * Set it to `false` if you want to help the user resume their search.
    * @default !props.freeSolo
    */
   clearOnBlur: PropTypes.bool,

package/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/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/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/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/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,109 +54,170 @@ 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({
-  display: 'flex',
-  flexDirection: 'row',
-  flexWrap: 'wrap',
-  justifyContent: 'center',
-  alignContent: 'center',
-  alignItems: 'center',
-  position: 'absolute',
-  boxSizing: 'border-box',
-  fontFamily: theme.typography.fontFamily,
-  fontWeight: theme.typography.fontWeightMedium,
-  fontSize: theme.typography.pxToRem(12),
-  minWidth: RADIUS_STANDARD * 2,
-  lineHeight: 1,
-  padding: '0 6px',
-  height: RADIUS_STANDARD * 2,
-  borderRadius: RADIUS_STANDARD,
-  zIndex: 1,
-  // Render the badge on top of potential ripples.
-  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
-  })
-}));
+  theme
+}) => {
+  var _theme$vars;
+  return {
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    alignContent: 'center',
+    alignItems: 'center',
+    position: 'absolute',
+    boxSizing: 'border-box',
+    fontFamily: theme.typography.fontFamily,
+    fontWeight: theme.typography.fontWeightMedium,
+    fontSize: theme.typography.pxToRem(12),
+    minWidth: RADIUS_STANDARD * 2,
+    lineHeight: 1,
+    padding: '0 6px',
+    height: RADIUS_STANDARD * 2,
+    borderRadius: RADIUS_STANDARD,
+    zIndex: 1,
+    // Render the badge on top of potential ripples.
+    transition: theme.transitions.create('transform', {
+      easing: theme.transitions.easing.easeInOut,
+      duration: theme.transitions.duration.enteringScreen
+    }),
+    variants: [...Object.keys(((_theme$vars = theme.vars) != null ? _theme$vars : theme).palette).filter(key => {
+      var _theme$vars2, _theme$vars3;
+      return ((_theme$vars2 = theme.vars) != null ? _theme$vars2 : theme).palette[key].main && ((_theme$vars3 = theme.vars) != null ? _theme$vars3 : 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) {
   var _ref, _slots$root, _ref2, _slots$badge, _slotProps$root, _slotProps$badge;
   const props = useThemeProps({

package/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/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/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/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;

package/Breadcrumbs/breadcrumbsClasses.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 getBreadcrumbsUtilityClass(slot) {
   return generateUtilityClass('MuiBreadcrumbs', slot);
 }

package/Button/buttonClasses.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 getButtonUtilityClass(slot) {
   return generateUtilityClass('MuiButton', slot);
 }

package/ButtonBase/buttonBaseClasses.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 getButtonBaseUtilityClass(slot) {
   return generateUtilityClass('MuiButtonBase', slot);
 }

package/ButtonBase/touchRippleClasses.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 getTouchRippleUtilityClass(slot) {
   return generateUtilityClass('MuiTouchRipple', slot);
 }

package/ButtonGroup/buttonGroupClasses.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 getButtonGroupUtilityClass(slot) {
   return generateUtilityClass('MuiButtonGroup', slot);
 }