@mui/material 5.15.10 → 5.15.12

package/Accordion/Accordion.d.ts

@@ -86,7 +86,7 @@ export type AccordionTypeMap<
       >;
       /**
        * 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?: TransitionProps;

package/Accordion/Accordion.js

@@ -7,8 +7,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';
@@ -174,7 +174,6 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
     },
     ownerState
   });
-  delete transitionProps.ownerState;
   return /*#__PURE__*/_jsxs(AccordionRoot, _extends({
     className: clsx(classes.root, className),
     ref: ref,
@@ -282,7 +281,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/AccordionActions/AccordionActions.js

@@ -6,7 +6,7 @@ const _excluded = ["className", "disableSpacing"];
 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/AccordionDetails/AccordionDetails.js

@@ -6,7 +6,7 @@ const _excluded = ["className"];
 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/AccordionSummary/AccordionSummary.js

@@ -6,7 +6,7 @@ const _excluded = ["children", "className", "expandIcon", "focusVisibleClassName
 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/AccordionSummary/accordionSummaryClasses.d.ts

@@ -11,7 +11,7 @@ export interface AccordionSummaryClasses {
     gutters: string;
     /**
      * Styles applied to the children wrapper element unless `disableGutters={true}`.
-     * @deprecated Combine the [.MuiAccordionSummary-gutters](/material-ui/api/accordion-summary/#AccordionSummary-classes-gutters) and [.MuiAccordionSummary-content](/material-ui/api/accordion-summary/#AccordionSummary-classes-content) classes instead.
+     * @deprecated Combine the [.MuiAccordionSummary-gutters](/material-ui/api/accordion-summary/#AccordionSummary-classes-gutters) and [.MuiAccordionSummary-content](/material-ui/api/accordion-summary/#AccordionSummary-classes-content) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
      */
     contentGutters: string;
     /** Styles applied to the children wrapper element. */

package/Alert/Alert.d.ts

@@ -4,6 +4,7 @@ import { SxProps } from '@mui/system';
 import { IconButtonProps, InternalStandardProps as StandardProps, SvgIconProps, Theme } from '..';
 import { PaperProps } from '../Paper';
 import { AlertClasses } from './alertClasses';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
 export type AlertColor = 'success' | 'info' | 'warning' | 'error';
 
@@ -11,6 +12,27 @@ export interface AlertPropsVariantOverrides {}
 
 export interface AlertPropsColorOverrides {}
 
+export interface AlertSlots {
+  /**
+   * The component that renders the close button.
+   * @default IconButton
+   */
+  closeButton?: React.ElementType;
+  /**
+   * The component that renders the close icon.
+   * @default svg
+   */
+  closeIcon?: React.ElementType;
+}
+
+export type AlertSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  AlertSlots,
+  {
+    closeButton: SlotProps<React.ElementType<IconButtonProps>, {}, AlertOwnerState>;
+    closeIcon: SlotProps<React.ElementType<SvgIconProps>, {}, AlertOwnerState>;
+  }
+>;
+
 export interface AlertProps extends StandardProps<PaperProps, 'variant'> {
   /**
    * The action to display. It renders after the message, at the end of the alert.
@@ -36,8 +58,7 @@ export interface AlertProps extends StandardProps<PaperProps, 'variant'> {
   /**
    * 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 {}
    */
@@ -49,8 +70,7 @@ export interface AlertProps extends StandardProps<PaperProps, 'variant'> {
    * 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 {}
    */
@@ -94,35 +114,14 @@ export interface AlertProps extends StandardProps<PaperProps, 'variant'> {
    * @default 'standard'
    */
   variant?: OverridableStringUnion<'standard' | 'filled' | 'outlined', AlertPropsVariantOverrides>;
-  /**
-   * 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.
-   *
-   * @default {}
-   */
-  slotProps?: {
-    closeButton?: IconButtonProps;
-    closeIcon?: SvgIconProps;
-  };
-  /**
-   * 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?: {
-    closeButton?: React.ElementType;
-    closeIcon?: React.ElementType;
-  };
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx?: SxProps<Theme>;
 }
 
+export interface AlertOwnerState extends AlertProps {}
+
 /**
  *
  * Demos:
@@ -134,4 +133,4 @@ export interface AlertProps extends StandardProps<PaperProps, 'variant'> {
  * - [Alert API](https://mui.com/material-ui/api/alert/)
  * - inherits [Paper API](https://mui.com/material-ui/api/paper/)
  */
-export default function Alert(props: AlertProps): JSX.Element;
+export default function Alert(props: AlertProps & AlertSlotsAndSlotProps): JSX.Element;

package/Alert/Alert.js

@@ -6,10 +6,10 @@ const _excluded = ["action", "children", "className", "closeText", "color", "com
 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,6 +21,7 @@ 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";
+const useThemeProps = createUseThemeProps('MuiAlert');
 const useUtilityClasses = ownerState => {
   const {
     variant,
@@ -29,7 +30,7 @@ const useUtilityClasses = ownerState => {
     classes
   } = ownerState;
   const slots = {
-    root: ['root', `${variant}${capitalize(color || severity)}`, `${variant}`],
+    root: ['root', `color${capitalize(color || severity)}`, `${variant}${capitalize(color || severity)}`, `${variant}`],
     icon: ['icon'],
     message: ['message'],
     action: ['action']
@@ -46,41 +47,58 @@ const AlertRoot = styled(Paper, {
     return [styles.root, styles[ownerState.variant], styles[`${ownerState.variant}${capitalize(ownerState.color || ownerState.severity)}`]];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => {
   const getColor = theme.palette.mode === 'light' ? darken : lighten;
   const getBackgroundColor = theme.palette.mode === 'light' ? lighten : darken;
-  const color = ownerState.color || ownerState.severity;
   return _extends({}, theme.typography.body2, {
     backgroundColor: 'transparent',
     display: 'flex',
-    padding: '6px 16px'
-  }, color && ownerState.variant === 'standard' && {
-    color: theme.vars ? theme.vars.palette.Alert[`${color}Color`] : getColor(theme.palette[color].light, 0.6),
-    backgroundColor: theme.vars ? theme.vars.palette.Alert[`${color}StandardBg`] : getBackgroundColor(theme.palette[color].light, 0.9),
-    [`& .${alertClasses.icon}`]: theme.vars ? {
-      color: theme.vars.palette.Alert[`${color}IconColor`]
-    } : {
-      color: theme.palette[color].main
-    }
-  }, color && ownerState.variant === 'outlined' && {
-    color: theme.vars ? theme.vars.palette.Alert[`${color}Color`] : getColor(theme.palette[color].light, 0.6),
-    border: `1px solid ${(theme.vars || theme).palette[color].light}`,
-    [`& .${alertClasses.icon}`]: theme.vars ? {
-      color: theme.vars.palette.Alert[`${color}IconColor`]
-    } : {
-      color: theme.palette[color].main
-    }
-  }, color && ownerState.variant === 'filled' && _extends({
-    fontWeight: theme.typography.fontWeightMedium
-  }, theme.vars ? {
-    color: theme.vars.palette.Alert[`${color}FilledColor`],
-    backgroundColor: theme.vars.palette.Alert[`${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: [...Object.entries(theme.palette).filter(([, value]) => value.main && value.light).map(([color]) => ({
+      props: {
+        colorSeverity: color,
+        variant: 'standard'
+      },
+      style: {
+        color: theme.vars ? theme.vars.palette.Alert[`${color}Color`] : getColor(theme.palette[color].light, 0.6),
+        backgroundColor: theme.vars ? theme.vars.palette.Alert[`${color}StandardBg`] : getBackgroundColor(theme.palette[color].light, 0.9),
+        [`& .${alertClasses.icon}`]: theme.vars ? {
+          color: theme.vars.palette.Alert[`${color}IconColor`]
+        } : {
+          color: theme.palette[color].main
+        }
+      }
+    })), ...Object.entries(theme.palette).filter(([, value]) => value.main && value.light).map(([color]) => ({
+      props: {
+        colorSeverity: color,
+        variant: 'outlined'
+      },
+      style: {
+        color: theme.vars ? theme.vars.palette.Alert[`${color}Color`] : getColor(theme.palette[color].light, 0.6),
+        border: `1px solid ${(theme.vars || theme).palette[color].light}`,
+        [`& .${alertClasses.icon}`]: theme.vars ? {
+          color: theme.vars.palette.Alert[`${color}IconColor`]
+        } : {
+          color: theme.palette[color].main
+        }
+      }
+    })), ...Object.entries(theme.palette).filter(([, value]) => value.main && value.dark).map(([color]) => ({
+      props: {
+        colorSeverity: color,
+        variant: 'filled'
+      },
+      style: _extends({
+        fontWeight: theme.typography.fontWeightMedium
+      }, theme.vars ? {
+        color: theme.vars.palette.Alert[`${color}FilledColor`],
+        backgroundColor: theme.vars.palette.Alert[`${color}FilledBg`]
+      } : {
+        backgroundColor: theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main,
+        color: theme.palette.getContrastText(theme.palette[color].main)
+      })
+    }))]
+  });
 });
 const AlertIcon = styled('div', {
   name: 'MuiAlert',
@@ -128,7 +146,6 @@ const defaultIconMapping = {
   })
 };
 const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
-  var _ref, _slots$closeButton, _ref2, _slots$closeIcon, _slotProps$closeButto, _slotProps$closeIcon;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiAlert'
@@ -154,13 +171,27 @@ const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
   const ownerState = _extends({}, props, {
     color,
     severity,
-    variant
+    variant,
+    colorSeverity: color || severity
   });
   const classes = useUtilityClasses(ownerState);
-  const AlertCloseButton = (_ref = (_slots$closeButton = slots.closeButton) != null ? _slots$closeButton : components.CloseButton) != null ? _ref : IconButton;
-  const AlertCloseIcon = (_ref2 = (_slots$closeIcon = slots.closeIcon) != null ? _slots$closeIcon : components.CloseIcon) != null ? _ref2 : CloseIcon;
-  const closeButtonProps = (_slotProps$closeButto = slotProps.closeButton) != null ? _slotProps$closeButto : componentsProps.closeButton;
-  const closeIconProps = (_slotProps$closeIcon = slotProps.closeIcon) != null ? _slotProps$closeIcon : componentsProps.closeIcon;
+  const externalForwardedProps = {
+    slots: _extends({
+      closeButton: components.CloseButton,
+      closeIcon: components.CloseIcon
+    }, slots),
+    slotProps: _extends({}, componentsProps, slotProps)
+  };
+  const [CloseButtonSlot, closeButtonProps] = useSlot('closeButton', {
+    elementType: IconButton,
+    externalForwardedProps,
+    ownerState
+  });
+  const [CloseIconSlot, closeIconProps] = useSlot('closeIcon', {
+    elementType: CloseIcon,
+    externalForwardedProps,
+    ownerState
+  });
   return /*#__PURE__*/_jsxs(AlertRoot, _extends({
     role: role,
     elevation: 0,
@@ -183,14 +214,14 @@ const 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))
       }))
@@ -234,8 +265,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 {}
    */
@@ -247,8 +277,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 {}
    */
@@ -291,22 +320,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/Alert/alertClasses.d.ts

@@ -7,29 +7,85 @@ export interface AlertClasses {
     outlined: string;
     /** Styles applied to the root element if `variant="standard"`. */
     standard: string;
-    /** Styles applied to the root element if `variant="standard"` and `color="success"`. */
+    /** Styles applied to the root element if `color="success"`. */
+    colorSuccess: string;
+    /** Styles applied to the root element if `color="info"`. */
+    colorInfo: string;
+    /** Styles applied to the root element if `color="warning"`. */
+    colorWarning: string;
+    /** Styles applied to the root element if `color="error"`. */
+    colorError: string;
+    /** Styles applied to the root element if `variant="standard"` and `color="success"`.
+     * @deprecated Combine the [.MuiAlert-standard](/material-ui/api/alert/#alert-classes-standard)
+     * and [.MuiAlert-colorSuccess](/material-ui/api/alert/#alert-classes-colorSuccess) classes instead.
+     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     */
     standardSuccess: string;
-    /** Styles applied to the root element if `variant="standard"` and `color="info"`. */
+    /** Styles applied to the root element if `variant="standard"` and `color="info"`.
+     * @deprecated Combine the [.MuiAlert-standard](/material-ui/api/alert/#alert-classes-standard)
+     * and [.MuiAlert-colorInfo](/material-ui/api/alert/#alert-classes-colorInfo) classes instead.
+     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     */
     standardInfo: string;
-    /** Styles applied to the root element if `variant="standard"` and `color="warning"`. */
+    /** Styles applied to the root element if `variant="standard"` and `color="warning"`.
+     * @deprecated Combine the [.MuiAlert-standard](/material-ui/api/alert/#alert-classes-standard)
+     * and [.MuiAlert-colorWarning](/material-ui/api/alert/#alert-classes-colorWarning) classes instead.
+     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     */
     standardWarning: string;
-    /** Styles applied to the root element if `variant="standard"` and `color="error"`. */
+    /** Styles applied to the root element if `variant="standard"` and `color="error"`.
+     * @deprecated Combine the [.MuiAlert-standard](/material-ui/api/alert/#alert-classes-standard)
+     * and [.MuiAlert-colorError](/material-ui/api/alert/#alert-classes-colorError) classes instead.
+     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     */
     standardError: string;
-    /** Styles applied to the root element if `variant="outlined"` and `color="success"`. */
+    /** Styles applied to the root element if `variant="outlined"` and `color="success"`.
+     * @deprecated Combine the [.MuiAlert-outlined](/material-ui/api/alert/#alert-classes-outlined)
+     * and [.MuiAlert-colorSuccess](/material-ui/api/alert/#alert-classes-colorSuccess) classes instead.
+     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     */
     outlinedSuccess: string;
-    /** Styles applied to the root element if `variant="outlined"` and `color="info"`. */
+    /** Styles applied to the root element if `variant="outlined"` and `color="info"`.
+     * @deprecated Combine the [.MuiAlert-outlined](/material-ui/api/alert/#alert-classes-outlined)
+     * and [.MuiAlert-colorInfo](/material-ui/api/alert/#alert-classes-colorInfo) classes instead.
+     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     */
     outlinedInfo: string;
-    /** Styles applied to the root element if `variant="outlined"` and `color="warning"`. */
+    /** Styles applied to the root element if `variant="outlined"` and `color="warning"`.
+     * @deprecated Combine the [.MuiAlert-outlined](/material-ui/api/alert/#alert-classes-outlined)
+     * and [.MuiAlert-colorWarning](/material-ui/api/alert/#alert-classes-colorWarning) classes instead.
+     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     */
     outlinedWarning: string;
-    /** Styles applied to the root element if `variant="outlined"` and `color="error"`. */
+    /** Styles applied to the root element if `variant="outlined"` and `color="error"`.
+     * @deprecated Combine the [.MuiAlert-outlined](/material-ui/api/alert/#alert-classes-outlined)
+     * and [.MuiAlert-colorError](/material-ui/api/alert/#alert-classes-colorError) classes instead.
+     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     */
     outlinedError: string;
-    /** Styles applied to the root element if `variant="filled"` and `color="success"`. */
+    /** Styles applied to the root element if `variant="filled"` and `color="success"`.
+     * @deprecated Combine the [.MuiAlert-filled](/material-ui/api/alert/#alert-classes-filled)
+     * and [.MuiAlert-colorSuccess](/material-ui/api/alert/#alert-classes-colorSuccess) classes instead.
+     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     */
     filledSuccess: string;
-    /** Styles applied to the root element if `variant="filled"` and `color="info"`. */
+    /** Styles applied to the root element if `variant="filled"` and `color="info"`.
+     * @deprecated Combine the [.MuiAlert-filled](/material-ui/api/alert/#alert-classes-filled)
+     * and [.MuiAlert-colorInfo](/material-ui/api/alert/#alert-classes-colorInfo) classes instead.
+     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     */
     filledInfo: string;
-    /** Styles applied to the root element if `variant="filled"` and `color="warning"`. */
+    /** Styles applied to the root element if `variant="filled"` and `color="warning"`
+     * @deprecated Combine the [.MuiAlert-filled](/material-ui/api/alert/#alert-classes-filled)
+     * and [.MuiAlert-colorWarning](/material-ui/api/alert/#alert-classes-colorWarning) classes instead.
+     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     */
     filledWarning: string;
-    /** Styles applied to the root element if `variant="filled"` and `color="error"`. */
+    /** Styles applied to the root element if `variant="filled"` and `color="error"`.
+     * @deprecated Combine the [.MuiAlert-filled](/material-ui/api/alert/#alert-classes-filled)
+     * and [.MuiAlert-colorError](/material-ui/api/alert/#alert-classes-colorError) classes instead.
+     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     */
     filledError: string;
     /** Styles applied to the icon wrapper element. */
     icon: string;

package/Alert/alertClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getAlertUtilityClass(slot) {
   return generateUtilityClass('MuiAlert', slot);
 }
-const alertClasses = generateUtilityClasses('MuiAlert', ['root', 'action', 'icon', 'message', 'filled', 'filledSuccess', 'filledInfo', 'filledWarning', 'filledError', 'outlined', 'outlinedSuccess', 'outlinedInfo', 'outlinedWarning', 'outlinedError', 'standard', 'standardSuccess', 'standardInfo', 'standardWarning', 'standardError']);
+const 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/AlertTitle/AlertTitle.js

@@ -6,12 +6,12 @@ const _excluded = ["className"];
 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";
+const useThemeProps = createUseThemeProps('MuiAlertTitle');
 const useUtilityClasses = ownerState => {
   const {
     classes

package/AppBar/AppBar.js

@@ -6,7 +6,7 @@ const _excluded = ["className", "color", "enableColorOnDark", "position"];
 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/Autocomplete/Autocomplete.js

@@ -8,9 +8,11 @@ const _excluded = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect"
 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';
@@ -214,7 +216,8 @@ const 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%)'
 });
 const AutocompleteClearIndicator = styled(IconButton, {
   name: 'MuiAutocomplete',

package/Avatar/Avatar.js

@@ -6,13 +6,13 @@ const _excluded = ["alt", "children", "className", "component", "slots", "slotPr
 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";
+const useThemeProps = createUseThemeProps('MuiAvatar');
 const useUtilityClasses = ownerState => {
   const {
     classes,

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

@@ -6,7 +6,7 @@ const _excluded = ["children", "className", "component", "components", "componen
 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/Badge/Badge.js

@@ -6,10 +6,10 @@ const _excluded = ["anchorOrigin", "className", "classes", "component", "compone
 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/BottomNavigation/BottomNavigation.js

@@ -7,7 +7,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';