@mui/material 5.15.10 → 5.15.12

package/Toolbar/Toolbar.js

@@ -6,7 +6,7 @@ const _excluded = ["className", "component", "disableGutters", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
+import composeClasses from '@mui/utils/composeClasses';
 import useThemeProps from '../styles/useThemeProps';
 import styled from '../styles/styled';
 import { getToolbarUtilityClass } from './toolbarClasses';

package/Tooltip/Tooltip.d.ts

@@ -210,7 +210,7 @@ export interface TooltipProps extends StandardProps<React.HTMLAttributes<HTMLDiv
   >;
   /**
    * Props applied to the transition element.
-   * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
+   * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
    */
   TransitionProps?: TransitionProps;
 }

package/Tooltip/Tooltip.js

@@ -6,9 +6,11 @@ const _excluded = ["arrow", "children", "classes", "components", "componentsProp
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { elementAcceptingRef, unstable_useTimeout as useTimeout, unstable_Timeout as Timeout } from '@mui/utils';
-import { unstable_composeClasses as composeClasses, appendOwnerState } from '@mui/base';
-import { alpha } from '@mui/system';
+import useTimeout, { Timeout } from '@mui/utils/useTimeout';
+import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
+import { appendOwnerState } from '@mui/base/utils';
+import composeClasses from '@mui/utils/composeClasses';
+import { alpha } from '@mui/system/colorManipulator';
 import styled from '../styles/styled';
 import useTheme from '../styles/useTheme';
 import useThemeProps from '../styles/useThemeProps';
@@ -322,7 +324,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       ignoreNonTouchEvents.current = false;
     });
   });
-  const handleEnter = event => {
+  const handleMouseOver = event => {
     if (ignoreNonTouchEvents.current && event.type !== 'touchstart') {
       return;
     }
@@ -343,7 +345,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       handleOpen(event);
     }
   };
-  const handleLeave = event => {
+  const handleMouseLeave = event => {
     enterTimer.clear();
     leaveTimer.start(leaveDelay, () => {
       handleClose(event);
@@ -362,7 +364,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     handleBlurVisible(event);
     if (isFocusVisibleRef.current === false) {
       setChildIsFocusVisible(false);
-      handleLeave(event);
+      handleMouseLeave(event);
     }
   };
   const handleFocus = event => {
@@ -375,7 +377,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     handleFocusVisible(event);
     if (isFocusVisibleRef.current === true) {
       setChildIsFocusVisible(true);
-      handleEnter(event);
+      handleMouseOver(event);
     }
   };
   const detectTouchStart = event => {
@@ -385,8 +387,6 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       childrenProps.onTouchStart(event);
     }
   };
-  const handleMouseOver = handleEnter;
-  const handleMouseLeave = handleLeave;
   const handleTouchStart = event => {
     detectTouchStart(event);
     leaveTimer.clear();
@@ -397,7 +397,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     document.body.style.WebkitUserSelect = 'none';
     touchTimer.start(enterTouchDelay, () => {
       document.body.style.WebkitUserSelect = prevUserSelect.current;
-      handleEnter(event);
+      handleMouseOver(event);
     });
   };
   const handleTouchEnd = event => {
@@ -764,7 +764,7 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes /* remove-proptypes */
   TransitionComponent: PropTypes.elementType,
   /**
    * Props applied to the transition element.
-   * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
+   * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
    */
   TransitionProps: PropTypes.object
 } : void 0;

package/Typography/Typography.js

@@ -6,8 +6,8 @@ const _excluded = ["align", "className", "component", "gutterBottom", "noWrap",
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_extendSxProp as extendSxProp } from '@mui/system';
-import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
+import { extendSxProp } from '@mui/system/styleFunctionSx';
+import composeClasses from '@mui/utils/composeClasses';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import capitalize from '../utils/capitalize';

package/Zoom/Zoom.d.ts

@@ -45,6 +45,6 @@ export interface ZoomProps extends TransitionProps {
  * API:
  *
  * - [Zoom API](https://mui.com/material-ui/api/zoom/)
- * - inherits [Transition API](http://reactcommunity.org/react-transition-group/transition/#Transition-props)
+ * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition/#Transition-props)
  */
 export default function Zoom(props: ZoomProps): JSX.Element;

package/Zoom/Zoom.js

@@ -6,7 +6,7 @@ const _excluded = ["addEndListener", "appear", "children", "easing", "in", "onEn
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
-import { elementAcceptingRef } from '@mui/utils';
+import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
 import useTheme from '../styles/useTheme';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import useForkRef from '../utils/useForkRef';

package/index.js

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

package/internal/SwitchBase.js

@@ -6,8 +6,8 @@ const _excluded = ["autoFocus", "checked", "checkedIcon", "className", "defaultC
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { refType } from '@mui/utils';
-import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
+import refType from '@mui/utils/refType';
+import composeClasses from '@mui/utils/composeClasses';
 import capitalize from '../utils/capitalize';
 import styled, { rootShouldForwardProp } from '../styles/styled';
 import useControlled from '../utils/useControlled';
@@ -182,7 +182,6 @@ process.env.NODE_ENV !== "production" ? SwitchBase.propTypes = {
   checkedIcon: PropTypes.node.isRequired,
   /**
    * Override or extend the styles applied to the component.
-   * See [CSS API](#css) below for more details.
    */
   classes: PropTypes.object,
   /**

package/legacy/Accordion/Accordion.js

@@ -9,8 +9,8 @@ import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { chainPropTypes } from '@mui/utils';
-import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
+import chainPropTypes from '@mui/utils/chainPropTypes';
+import composeClasses from '@mui/utils/composeClasses';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import Collapse from '../Collapse';
@@ -181,7 +181,6 @@ var Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref) {
     _useSlot2 = _slicedToArray(_useSlot, 2),
     TransitionSlot = _useSlot2[0],
     transitionProps = _useSlot2[1];
-  delete transitionProps.ownerState;
   return /*#__PURE__*/_jsxs(AccordionRoot, _extends({
     className: clsx(classes.root, className),
     ref: ref,
@@ -289,7 +288,7 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes /* remove-proptypes
   TransitionComponent: PropTypes.elementType,
   /**
    * Props applied to the transition element.
-   * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
+   * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
    * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   TransitionProps: PropTypes.object

package/legacy/AccordionActions/AccordionActions.js

@@ -5,7 +5,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
+import composeClasses from '@mui/utils/composeClasses';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import { getAccordionActionsUtilityClass } from './accordionActionsClasses';

package/legacy/AccordionDetails/AccordionDetails.js

@@ -5,7 +5,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
+import composeClasses from '@mui/utils/composeClasses';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import { getAccordionDetailsUtilityClass } from './accordionDetailsClasses';

package/legacy/AccordionSummary/AccordionSummary.js

@@ -6,7 +6,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
+import composeClasses from '@mui/utils/composeClasses';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import ButtonBase from '../ButtonBase';

package/legacy/Alert/Alert.js

@@ -2,14 +2,16 @@
 
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
-import { darken, lighten } from '@mui/system';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import composeClasses from '@mui/utils/composeClasses';
+import { darken, lighten } from '@mui/system/colorManipulator';
+import { styled, createUseThemeProps } from '../zero-styled';
+import useSlot from '../utils/useSlot';
 import capitalize from '../utils/capitalize';
 import Paper from '../Paper';
 import alertClasses, { getAlertUtilityClass } from './alertClasses';
@@ -21,13 +23,14 @@ import InfoOutlinedIcon from '../internal/svg-icons/InfoOutlined';
 import CloseIcon from '../internal/svg-icons/Close';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiAlert');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var variant = ownerState.variant,
     color = ownerState.color,
     severity = ownerState.severity,
     classes = ownerState.classes;
   var slots = {
-    root: ['root', "".concat(variant).concat(capitalize(color || severity)), "".concat(variant)],
+    root: ['root', "color".concat(capitalize(color || severity)), "".concat(variant).concat(capitalize(color || severity)), "".concat(variant)],
     icon: ['icon'],
     message: ['message'],
     action: ['action']
@@ -42,38 +45,79 @@ var AlertRoot = styled(Paper, {
     return [styles.root, styles[ownerState.variant], styles["".concat(ownerState.variant).concat(capitalize(ownerState.color || ownerState.severity))]];
   }
 })(function (_ref) {
-  var theme = _ref.theme,
-    ownerState = _ref.ownerState;
+  var theme = _ref.theme;
   var getColor = theme.palette.mode === 'light' ? darken : lighten;
   var getBackgroundColor = theme.palette.mode === 'light' ? lighten : darken;
-  var color = ownerState.color || ownerState.severity;
   return _extends({}, theme.typography.body2, {
     backgroundColor: 'transparent',
     display: 'flex',
-    padding: '6px 16px'
-  }, color && ownerState.variant === 'standard' && _defineProperty({
-    color: theme.vars ? theme.vars.palette.Alert["".concat(color, "Color")] : getColor(theme.palette[color].light, 0.6),
-    backgroundColor: theme.vars ? theme.vars.palette.Alert["".concat(color, "StandardBg")] : getBackgroundColor(theme.palette[color].light, 0.9)
-  }, "& .".concat(alertClasses.icon), theme.vars ? {
-    color: theme.vars.palette.Alert["".concat(color, "IconColor")]
-  } : {
-    color: theme.palette[color].main
-  }), color && ownerState.variant === 'outlined' && _defineProperty({
-    color: theme.vars ? theme.vars.palette.Alert["".concat(color, "Color")] : getColor(theme.palette[color].light, 0.6),
-    border: "1px solid ".concat((theme.vars || theme).palette[color].light)
-  }, "& .".concat(alertClasses.icon), theme.vars ? {
-    color: theme.vars.palette.Alert["".concat(color, "IconColor")]
-  } : {
-    color: theme.palette[color].main
-  }), color && ownerState.variant === 'filled' && _extends({
-    fontWeight: theme.typography.fontWeightMedium
-  }, theme.vars ? {
-    color: theme.vars.palette.Alert["".concat(color, "FilledColor")],
-    backgroundColor: theme.vars.palette.Alert["".concat(color, "FilledBg")]
-  } : {
-    backgroundColor: theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main,
-    color: theme.palette.getContrastText(theme.palette[color].main)
-  }));
+    padding: '6px 16px',
+    variants: [].concat(_toConsumableArray(Object.entries(theme.palette).filter(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+        value = _ref3[1];
+      return value.main && value.light;
+    }).map(function (_ref4) {
+      var _ref5 = _slicedToArray(_ref4, 1),
+        color = _ref5[0];
+      return {
+        props: {
+          colorSeverity: color,
+          variant: 'standard'
+        },
+        style: _defineProperty({
+          color: theme.vars ? theme.vars.palette.Alert["".concat(color, "Color")] : getColor(theme.palette[color].light, 0.6),
+          backgroundColor: theme.vars ? theme.vars.palette.Alert["".concat(color, "StandardBg")] : getBackgroundColor(theme.palette[color].light, 0.9)
+        }, "& .".concat(alertClasses.icon), theme.vars ? {
+          color: theme.vars.palette.Alert["".concat(color, "IconColor")]
+        } : {
+          color: theme.palette[color].main
+        })
+      };
+    })), _toConsumableArray(Object.entries(theme.palette).filter(function (_ref6) {
+      var _ref7 = _slicedToArray(_ref6, 2),
+        value = _ref7[1];
+      return value.main && value.light;
+    }).map(function (_ref8) {
+      var _ref9 = _slicedToArray(_ref8, 1),
+        color = _ref9[0];
+      return {
+        props: {
+          colorSeverity: color,
+          variant: 'outlined'
+        },
+        style: _defineProperty({
+          color: theme.vars ? theme.vars.palette.Alert["".concat(color, "Color")] : getColor(theme.palette[color].light, 0.6),
+          border: "1px solid ".concat((theme.vars || theme).palette[color].light)
+        }, "& .".concat(alertClasses.icon), theme.vars ? {
+          color: theme.vars.palette.Alert["".concat(color, "IconColor")]
+        } : {
+          color: theme.palette[color].main
+        })
+      };
+    })), _toConsumableArray(Object.entries(theme.palette).filter(function (_ref10) {
+      var _ref11 = _slicedToArray(_ref10, 2),
+        value = _ref11[1];
+      return value.main && value.dark;
+    }).map(function (_ref12) {
+      var _ref13 = _slicedToArray(_ref12, 1),
+        color = _ref13[0];
+      return {
+        props: {
+          colorSeverity: color,
+          variant: 'filled'
+        },
+        style: _extends({
+          fontWeight: theme.typography.fontWeightMedium
+        }, theme.vars ? {
+          color: theme.vars.palette.Alert["".concat(color, "FilledColor")],
+          backgroundColor: theme.vars.palette.Alert["".concat(color, "FilledBg")]
+        } : {
+          backgroundColor: theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main,
+          color: theme.palette.getContrastText(theme.palette[color].main)
+        })
+      };
+    })))
+  });
 });
 var AlertIcon = styled('div', {
   name: 'MuiAlert',
@@ -127,7 +171,6 @@ var defaultIconMapping = {
   })
 };
 var Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
-  var _ref4, _slots$closeButton, _ref5, _slots$closeIcon, _slotProps$closeButto, _slotProps$closeIcon;
   var props = useThemeProps({
     props: inProps,
     name: 'MuiAlert'
@@ -160,13 +203,33 @@ var Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
   var ownerState = _extends({}, props, {
     color: color,
     severity: severity,
-    variant: variant
+    variant: variant,
+    colorSeverity: color || severity
   });
   var classes = useUtilityClasses(ownerState);
-  var AlertCloseButton = (_ref4 = (_slots$closeButton = slots.closeButton) != null ? _slots$closeButton : components.CloseButton) != null ? _ref4 : IconButton;
-  var AlertCloseIcon = (_ref5 = (_slots$closeIcon = slots.closeIcon) != null ? _slots$closeIcon : components.CloseIcon) != null ? _ref5 : CloseIcon;
-  var closeButtonProps = (_slotProps$closeButto = slotProps.closeButton) != null ? _slotProps$closeButto : componentsProps.closeButton;
-  var closeIconProps = (_slotProps$closeIcon = slotProps.closeIcon) != null ? _slotProps$closeIcon : componentsProps.closeIcon;
+  var externalForwardedProps = {
+    slots: _extends({
+      closeButton: components.CloseButton,
+      closeIcon: components.CloseIcon
+    }, slots),
+    slotProps: _extends({}, componentsProps, slotProps)
+  };
+  var _useSlot = useSlot('closeButton', {
+      elementType: IconButton,
+      externalForwardedProps: externalForwardedProps,
+      ownerState: ownerState
+    }),
+    _useSlot2 = _slicedToArray(_useSlot, 2),
+    CloseButtonSlot = _useSlot2[0],
+    closeButtonProps = _useSlot2[1];
+  var _useSlot3 = useSlot('closeIcon', {
+      elementType: CloseIcon,
+      externalForwardedProps: externalForwardedProps,
+      ownerState: ownerState
+    }),
+    _useSlot4 = _slicedToArray(_useSlot3, 2),
+    CloseIconSlot = _useSlot4[0],
+    closeIconProps = _useSlot4[1];
   return /*#__PURE__*/_jsxs(AlertRoot, _extends({
     role: role,
     elevation: 0,
@@ -189,14 +252,14 @@ var Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
     }) : null, action == null && onClose ? /*#__PURE__*/_jsx(AlertAction, {
       ownerState: ownerState,
       className: classes.action,
-      children: /*#__PURE__*/_jsx(AlertCloseButton, _extends({
+      children: /*#__PURE__*/_jsx(CloseButtonSlot, _extends({
         size: "small",
         "aria-label": closeText,
         title: closeText,
         color: "inherit",
         onClick: onClose
       }, closeButtonProps, {
-        children: /*#__PURE__*/_jsx(AlertCloseIcon, _extends({
+        children: /*#__PURE__*/_jsx(CloseIconSlot, _extends({
           fontSize: "small"
         }, closeIconProps))
       }))
@@ -240,8 +303,7 @@ process.env.NODE_ENV !== "production" ? Alert.propTypes /* remove-proptypes */ =
   /**
    * The components used for each slot inside.
    *
-   * This prop is an alias for the `slots` prop.
-   * It's recommended to use the `slots` prop instead.
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    *
    * @default {}
    */
@@ -253,8 +315,7 @@ process.env.NODE_ENV !== "production" ? Alert.propTypes /* remove-proptypes */ =
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * This prop is an alias for the `slotProps` prop.
-   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    *
    * @default {}
    */
@@ -297,22 +358,15 @@ process.env.NODE_ENV !== "production" ? Alert.propTypes /* remove-proptypes */ =
    */
   severity: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['error', 'info', 'success', 'warning']), PropTypes.string]),
   /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
-   *
+   * The props used for each slot inside.
    * @default {}
    */
   slotProps: PropTypes.shape({
-    closeButton: PropTypes.object,
-    closeIcon: PropTypes.object
+    closeButton: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    closeIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
   }),
   /**
    * The components used for each slot inside.
-   *
-   * This prop is an alias for the `components` prop, which will be deprecated in the future.
-   *
    * @default {}
    */
   slots: PropTypes.shape({

package/legacy/Alert/alertClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getAlertUtilityClass(slot) {
   return generateUtilityClass('MuiAlert', slot);
 }
-var alertClasses = generateUtilityClasses('MuiAlert', ['root', 'action', 'icon', 'message', 'filled', 'filledSuccess', 'filledInfo', 'filledWarning', 'filledError', 'outlined', 'outlinedSuccess', 'outlinedInfo', 'outlinedWarning', 'outlinedError', 'standard', 'standardSuccess', 'standardInfo', 'standardWarning', 'standardError']);
+var alertClasses = generateUtilityClasses('MuiAlert', ['root', 'action', 'icon', 'message', 'filled', 'colorSuccess', 'colorInfo', 'colorWarning', 'colorError', 'filledSuccess', 'filledInfo', 'filledWarning', 'filledError', 'outlined', 'outlinedSuccess', 'outlinedInfo', 'outlinedWarning', 'outlinedError', 'standard', 'standardSuccess', 'standardInfo', 'standardWarning', 'standardError']);
 export default alertClasses;

package/legacy/AlertTitle/AlertTitle.js

@@ -5,12 +5,12 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import composeClasses from '@mui/utils/composeClasses';
+import { styled, createUseThemeProps } from '../zero-styled';
 import Typography from '../Typography';
 import { getAlertTitleUtilityClass } from './alertTitleClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiAlertTitle');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
   var slots = {

package/legacy/AppBar/AppBar.js

@@ -5,7 +5,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
+import composeClasses from '@mui/utils/composeClasses';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import capitalize from '../utils/capitalize';

package/legacy/Autocomplete/Autocomplete.js

@@ -7,9 +7,11 @@ var _ClearIcon, _ArrowDropDownIcon;
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { chainPropTypes, integerPropType } from '@mui/utils';
-import { unstable_composeClasses as composeClasses, useAutocomplete, createFilterOptions } from '@mui/base';
-import { alpha } from '@mui/system';
+import integerPropType from '@mui/utils/integerPropType';
+import chainPropTypes from '@mui/utils/chainPropTypes';
+import { useAutocomplete, createFilterOptions } from '@mui/base';
+import composeClasses from '@mui/utils/composeClasses';
+import { alpha } from '@mui/system/colorManipulator';
 import Popper from '../Popper';
 import ListSubheader from '../ListSubheader';
 import Paper from '../Paper';
@@ -164,7 +166,8 @@ var AutocompleteEndAdornment = styled('div', {
   // We use a position absolute to support wrapping tags.
   position: 'absolute',
   right: 0,
-  top: 'calc(50% - 14px)' // Center vertically
+  top: '50%',
+  transform: 'translate(0, -50%)'
 });
 var AutocompleteClearIndicator = styled(IconButton, {
   name: 'MuiAutocomplete',

package/legacy/Avatar/Avatar.js

@@ -6,13 +6,13 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import composeClasses from '@mui/utils/composeClasses';
+import { styled, createUseThemeProps } from '../zero-styled';
 import Person from '../internal/svg-icons/Person';
 import { getAvatarUtilityClass } from './avatarClasses';
 import useSlot from '../utils/useSlot';
 import { jsx as _jsx } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiAvatar');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     variant = ownerState.variant,

package/legacy/AvatarGroup/AvatarGroup.js

@@ -7,8 +7,8 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { isFragment } from 'react-is';
 import clsx from 'clsx';
-import { chainPropTypes } from '@mui/utils';
-import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
+import chainPropTypes from '@mui/utils/chainPropTypes';
+import composeClasses from '@mui/utils/composeClasses';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import Avatar, { avatarClasses } from '../Avatar';

package/legacy/Backdrop/Backdrop.js

@@ -5,7 +5,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
+import composeClasses from '@mui/utils/composeClasses';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import Fade from '../Fade';

package/legacy/Badge/Badge.js

@@ -7,10 +7,10 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { usePreviousProps } from '@mui/utils';
-import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
+import usePreviousProps from '@mui/utils/usePreviousProps';
+import composeClasses from '@mui/utils/composeClasses';
 import { useBadge } from '@mui/base/useBadge';
-import { useSlotProps } from '@mui/base';
+import { useSlotProps } from '@mui/base/utils';
 import { styled, createUseThemeProps } from '../zero-styled';
 import capitalize from '../utils/capitalize';
 import badgeClasses, { getBadgeUtilityClass } from './badgeClasses';

package/legacy/BottomNavigation/BottomNavigation.js

@@ -6,7 +6,7 @@ import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
+import composeClasses from '@mui/utils/composeClasses';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import { getBottomNavigationUtilityClass } from './bottomNavigationClasses';

package/legacy/BottomNavigationAction/BottomNavigationAction.js

@@ -6,7 +6,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
+import composeClasses from '@mui/utils/composeClasses';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import ButtonBase from '../ButtonBase';

package/legacy/Breadcrumbs/BreadcrumbCollapsed.js

@@ -4,7 +4,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { emphasize } from '@mui/system';
+import { emphasize } from '@mui/system/colorManipulator';
 import styled from '../styles/styled';
 import MoreHorizIcon from '../internal/svg-icons/MoreHoriz';
 import ButtonBase from '../ButtonBase';

package/legacy/Breadcrumbs/Breadcrumbs.js

@@ -8,8 +8,9 @@ import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { integerPropType } from '@mui/utils';
-import { unstable_composeClasses as composeClasses, useSlotProps } from '@mui/base';
+import integerPropType from '@mui/utils/integerPropType';
+import { useSlotProps } from '@mui/base/utils';
+import composeClasses from '@mui/utils/composeClasses';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import Typography from '../Typography';