@mui/material 5.15.15 → 6.0.0-alpha.1

package/Accordion/Accordion.js

@@ -16,8 +16,7 @@ import AccordionContext from './AccordionContext';
 import useControlled from '../utils/useControlled';
 import useSlot from '../utils/useSlot';
 import accordionClasses, { getAccordionUtilityClass } from './accordionClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useThemeProps = createUseThemeProps('MuiAccordion');
 const useUtilityClasses = ownerState => {
   const {

package/AccordionSummary/AccordionSummary.js

@@ -11,8 +11,7 @@ import { styled, createUseThemeProps } from '../zero-styled';
 import ButtonBase from '../ButtonBase';
 import AccordionContext from '../Accordion/AccordionContext';
 import accordionSummaryClasses, { getAccordionSummaryUtilityClass } from './accordionSummaryClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useThemeProps = createUseThemeProps('MuiAccordionSummary');
 const useUtilityClasses = ownerState => {
   const {

package/Alert/Alert.js

@@ -19,8 +19,7 @@ import ReportProblemOutlinedIcon from '../internal/svg-icons/ReportProblemOutlin
 import ErrorOutlineIcon from '../internal/svg-icons/ErrorOutline';
 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";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useThemeProps = createUseThemeProps('MuiAlert');
 const useUtilityClasses = ownerState => {
   const {

package/AppBar/AppBar.js

@@ -7,12 +7,12 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import capitalize from '../utils/capitalize';
 import Paper from '../Paper';
 import { getAppBarUtilityClass } from './appBarClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiAppBar');
 const useUtilityClasses = ownerState => {
   const {
     color,
@@ -27,7 +27,7 @@ const useUtilityClasses = ownerState => {
 
 // var2 is the fallback.
 // Ex. var1: 'var(--a)', var2: 'var(--b)'; return: 'var(--a, var(--b))'
-const joinVars = (var1, var2) => var1 ? `${var1 == null ? void 0 : var1.replace(')', '')}, ${var2})` : var2;
+const joinVars = (var1, var2) => var1 ? `${var1?.replace(')', '')}, ${var2})` : var2;
 const AppBarRoot = styled(Paper, {
   name: 'MuiAppBar',
   slot: 'Root',
@@ -38,75 +38,125 @@ const AppBarRoot = styled(Paper, {
     return [styles.root, styles[`position${capitalize(ownerState.position)}`], styles[`color${capitalize(ownerState.color)}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => {
-  const backgroundColorDefault = theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900];
-  return _extends({
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%',
-    boxSizing: 'border-box',
-    // Prevent padding issue with the Modal and fixed positioned AppBar.
-    flexShrink: 0
-  }, ownerState.position === 'fixed' && {
-    position: 'fixed',
-    zIndex: (theme.vars || theme).zIndex.appBar,
-    top: 0,
-    left: 'auto',
-    right: 0,
-    '@media print': {
-      // Prevent the app bar to be visible on each printed page.
+  theme
+}) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+  boxSizing: 'border-box',
+  // Prevent padding issue with the Modal and fixed positioned AppBar.
+  flexShrink: 0,
+  variants: [{
+    props: {
+      position: 'fixed'
+    },
+    style: {
+      position: 'fixed',
+      zIndex: (theme.vars || theme).zIndex.appBar,
+      top: 0,
+      left: 'auto',
+      right: 0,
+      '@media print': {
+        // Prevent the app bar to be visible on each printed page.
+        position: 'absolute'
+      }
+    }
+  }, {
+    props: {
       position: 'absolute'
+    },
+    style: {
+      position: 'absolute',
+      zIndex: (theme.vars || theme).zIndex.appBar,
+      top: 0,
+      left: 'auto',
+      right: 0
     }
-  }, ownerState.position === 'absolute' && {
-    position: 'absolute',
-    zIndex: (theme.vars || theme).zIndex.appBar,
-    top: 0,
-    left: 'auto',
-    right: 0
-  }, ownerState.position === 'sticky' && {
-    // ⚠️ sticky is not supported by IE11.
-    position: 'sticky',
-    zIndex: (theme.vars || theme).zIndex.appBar,
-    top: 0,
-    left: 'auto',
-    right: 0
-  }, ownerState.position === 'static' && {
-    position: 'static'
-  }, ownerState.position === 'relative' && {
-    position: 'relative'
-  }, !theme.vars && _extends({}, ownerState.color === 'default' && {
-    backgroundColor: backgroundColorDefault,
-    color: theme.palette.getContrastText(backgroundColorDefault)
-  }, ownerState.color && ownerState.color !== 'default' && ownerState.color !== 'inherit' && ownerState.color !== 'transparent' && {
-    backgroundColor: theme.palette[ownerState.color].main,
-    color: theme.palette[ownerState.color].contrastText
-  }, ownerState.color === 'inherit' && {
-    color: 'inherit'
-  }, theme.palette.mode === 'dark' && !ownerState.enableColorOnDark && {
-    backgroundColor: null,
-    color: null
-  }, ownerState.color === 'transparent' && _extends({
-    backgroundColor: 'transparent',
-    color: 'inherit'
-  }, theme.palette.mode === 'dark' && {
-    backgroundImage: 'none'
-  })), theme.vars && _extends({}, ownerState.color === 'default' && {
-    '--AppBar-background': ownerState.enableColorOnDark ? theme.vars.palette.AppBar.defaultBg : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette.AppBar.defaultBg),
-    '--AppBar-color': ownerState.enableColorOnDark ? theme.vars.palette.text.primary : joinVars(theme.vars.palette.AppBar.darkColor, theme.vars.palette.text.primary)
-  }, ownerState.color && !ownerState.color.match(/^(default|inherit|transparent)$/) && {
-    '--AppBar-background': ownerState.enableColorOnDark ? theme.vars.palette[ownerState.color].main : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette[ownerState.color].main),
-    '--AppBar-color': ownerState.enableColorOnDark ? theme.vars.palette[ownerState.color].contrastText : joinVars(theme.vars.palette.AppBar.darkColor, theme.vars.palette[ownerState.color].contrastText)
   }, {
-    backgroundColor: 'var(--AppBar-background)',
-    color: ownerState.color === 'inherit' ? 'inherit' : 'var(--AppBar-color)'
-  }, ownerState.color === 'transparent' && {
-    backgroundImage: 'none',
-    backgroundColor: 'transparent',
-    color: 'inherit'
-  }));
-});
+    props: {
+      position: 'sticky'
+    },
+    style: {
+      // ⚠️ sticky is not supported by IE11.
+      position: 'sticky',
+      zIndex: (theme.vars || theme).zIndex.appBar,
+      top: 0,
+      left: 'auto',
+      right: 0
+    }
+  }, {
+    props: {
+      position: 'static'
+    },
+    style: {
+      position: 'static'
+    }
+  }, {
+    props: {
+      position: 'relative'
+    },
+    style: {
+      position: 'relative'
+    }
+  }, {
+    props: {
+      color: 'inherit'
+    },
+    style: {
+      '--AppBar-color': 'inherit'
+    }
+  }, {
+    props: {
+      color: 'default'
+    },
+    style: _extends({
+      '--AppBar-background': theme.vars ? theme.vars.palette.AppBar.defaultBg : theme.palette.grey[100],
+      '--AppBar-color': theme.vars ? theme.vars.palette.text.primary : theme.palette.getContrastText(theme.palette.grey[100])
+    }, theme.applyStyles('dark', {
+      '--AppBar-background': theme.vars ? theme.vars.palette.AppBar.defaultBg : theme.palette.grey[900],
+      '--AppBar-color': theme.vars ? theme.vars.palette.text.primary : theme.palette.getContrastText(theme.palette.grey[900])
+    }))
+  }, ...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: {
+      '--AppBar-background': (theme.vars ?? theme).palette[color].main,
+      '--AppBar-color': (theme.vars ?? theme).palette[color].contrastText
+    }
+  })), {
+    props: {
+      enableColorOnDark: true
+    },
+    style: {
+      backgroundColor: 'var(--AppBar-background)',
+      color: 'var(--AppBar-color)'
+    }
+  }, {
+    props: {
+      enableColorOnDark: false
+    },
+    style: _extends({
+      backgroundColor: 'var(--AppBar-background)',
+      color: 'var(--AppBar-color)'
+    }, theme.applyStyles('dark', {
+      backgroundColor: theme.vars ? joinVars(theme.vars.palette.AppBar.darkBg, 'var(--AppBar-background)') : null,
+      color: theme.vars ? joinVars(theme.vars.palette.AppBar.darkColor, 'var(--AppBar-color)') : null
+    }))
+  }, {
+    props: {
+      color: 'transparent'
+    },
+    style: _extends({
+      '--AppBar-background': 'transparent',
+      '--AppBar-color': 'inherit',
+      backgroundColor: 'var(--AppBar-background)',
+      color: 'var(--AppBar-color)'
+    }, theme.applyStyles('dark', {
+      backgroundImage: 'none'
+    }))
+  }]
+}));
 const AppBar = /*#__PURE__*/React.forwardRef(function AppBar(inProps, ref) {
   const props = useThemeProps({
     props: inProps,

package/Autocomplete/Autocomplete.js

@@ -28,8 +28,7 @@ import { styled, createUseThemeProps } from '../zero-styled';
 import autocompleteClasses, { getAutocompleteUtilityClass } from './autocompleteClasses';
 import capitalize from '../utils/capitalize';
 import useForkRef from '../utils/useForkRef';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 const useThemeProps = createUseThemeProps('MuiAutocomplete');
 const useUtilityClasses = ownerState => {
@@ -397,7 +396,6 @@ const AutocompleteGroupUl = styled('ul', {
 });
 export { createFilterOptions };
 const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps, ref) {
-  var _slotProps$clearIndic, _slotProps$paper, _slotProps$popper, _slotProps$popupIndic;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiAutocomplete'
@@ -489,17 +487,14 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   } = getInputProps();
   const {
     ref: externalListboxRef
-  } = ListboxProps != null ? ListboxProps : {};
+  } = ListboxProps ?? {};
   const _getListboxProps = getListboxProps(),
     {
       ref: listboxRef
     } = _getListboxProps,
     otherListboxProps = _objectWithoutPropertiesLoose(_getListboxProps, _excluded2);
   const combinedListboxRef = useForkRef(listboxRef, externalListboxRef);
-  const defaultGetOptionLabel = option => {
-    var _option$label;
-    return (_option$label = option.label) != null ? _option$label : option;
-  };
+  const defaultGetOptionLabel = option => option.label ?? option;
   const getOptionLabel = getOptionLabelProp || defaultGetOptionLabel;
 
   // If you modify this, make sure to keep the `AutocompleteOwnerState` type in sync.
@@ -576,10 +571,10 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       inputValue
     }, ownerState);
   };
-  const clearIndicatorSlotProps = (_slotProps$clearIndic = slotProps.clearIndicator) != null ? _slotProps$clearIndic : componentsProps.clearIndicator;
-  const paperSlotProps = (_slotProps$paper = slotProps.paper) != null ? _slotProps$paper : componentsProps.paper;
-  const popperSlotProps = (_slotProps$popper = slotProps.popper) != null ? _slotProps$popper : componentsProps.popper;
-  const popupIndicatorSlotProps = (_slotProps$popupIndic = slotProps.popupIndicator) != null ? _slotProps$popupIndic : componentsProps.popupIndicator;
+  const clearIndicatorSlotProps = slotProps.clearIndicator ?? componentsProps.clearIndicator;
+  const paperSlotProps = slotProps.paper ?? componentsProps.paper;
+  const popperSlotProps = slotProps.popper ?? componentsProps.popper;
+  const popupIndicatorSlotProps = slotProps.popupIndicator ?? componentsProps.popupIndicator;
   const renderAutocompletePopperChildren = children => /*#__PURE__*/_jsx(AutocompletePopper, _extends({
     as: PopperComponent,
     disablePortal: disablePortal,
@@ -591,12 +586,12 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     anchorEl: anchorEl,
     open: popupOpen
   }, popperSlotProps, {
-    className: clsx(classes.popper, popperSlotProps == null ? void 0 : popperSlotProps.className),
+    className: clsx(classes.popper, popperSlotProps?.className),
     children: /*#__PURE__*/_jsx(AutocompletePaper, _extends({
       ownerState: ownerState,
       as: PaperComponent
     }, paperSlotProps, {
-      className: clsx(classes.paper, paperSlotProps == null ? void 0 : paperSlotProps.className),
+      className: clsx(classes.paper, paperSlotProps?.className),
       children: children
     }))
   }));
@@ -667,7 +662,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
               title: clearText,
               ownerState: ownerState
             }, clearIndicatorSlotProps, {
-              className: clsx(classes.clearIndicator, clearIndicatorSlotProps == null ? void 0 : clearIndicatorSlotProps.className),
+              className: clsx(classes.clearIndicator, clearIndicatorSlotProps?.className),
               children: clearIcon
             })) : null, hasPopupIcon ? /*#__PURE__*/_jsx(AutocompletePopupIndicator, _extends({}, getPopupIndicatorProps(), {
               disabled: disabled,
@@ -675,7 +670,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
               title: popupOpen ? closeText : openText,
               ownerState: ownerState
             }, popupIndicatorSlotProps, {
-              className: clsx(classes.popupIndicator, popupIndicatorSlotProps == null ? void 0 : popupIndicatorSlotProps.className),
+              className: clsx(classes.popupIndicator, popupIndicatorSlotProps?.className),
               children: popupIcon
             })) : null]
           })

package/AvatarGroup/AvatarGroup.js

@@ -9,16 +9,15 @@ import { isFragment } from 'react-is';
 import clsx from 'clsx';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import Avatar, { avatarClasses } from '../Avatar';
 import avatarGroupClasses, { getAvatarGroupUtilityClass } from './avatarGroupClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SPACINGS = {
   small: -16,
-  medium: null
+  medium: -8
 };
+const useThemeProps = createUseThemeProps('MuiAlert');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -36,25 +35,20 @@ const AvatarGroupRoot = styled('div', {
     [`& .${avatarGroupClasses.avatar}`]: styles.avatar
   }, styles.root)
 })(({
-  theme,
-  ownerState
-}) => {
-  const marginValue = ownerState.spacing && SPACINGS[ownerState.spacing] !== undefined ? SPACINGS[ownerState.spacing] : -ownerState.spacing;
-  return {
-    [`& .${avatarClasses.root}`]: {
-      border: `2px solid ${(theme.vars || theme).palette.background.default}`,
-      boxSizing: 'content-box',
-      marginLeft: marginValue != null ? marginValue : -8,
-      '&:last-child': {
-        marginLeft: 0
-      }
-    },
-    display: 'flex',
-    flexDirection: 'row-reverse'
-  };
-});
+  theme
+}) => ({
+  display: 'flex',
+  flexDirection: 'row-reverse',
+  [`& .${avatarClasses.root}`]: {
+    border: `2px solid ${(theme.vars || theme).palette.background.default}`,
+    boxSizing: 'content-box',
+    marginLeft: 'var(--AvatarGroup-spacing, -8px)',
+    '&:last-child': {
+      marginLeft: 0
+    }
+  }
+}));
 const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, ref) {
-  var _slotProps$additional;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiAvatarGroup'
@@ -96,7 +90,8 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
   const maxAvatars = Math.min(children.length, clampedMax - 1);
   const extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
   const extraAvatarsElement = renderSurplus ? renderSurplus(extraAvatars) : `+${extraAvatars}`;
-  const additionalAvatarSlotProps = (_slotProps$additional = slotProps.additionalAvatar) != null ? _slotProps$additional : componentsProps.additionalAvatar;
+  const additionalAvatarSlotProps = slotProps.additionalAvatar ?? componentsProps.additionalAvatar;
+  const marginValue = ownerState.spacing && SPACINGS[ownerState.spacing] !== undefined ? SPACINGS[ownerState.spacing] : -ownerState.spacing || -8;
   return /*#__PURE__*/_jsxs(AvatarGroupRoot, _extends({
     as: component,
     ownerState: ownerState,
@@ -106,7 +101,10 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
     children: [extraAvatars ? /*#__PURE__*/_jsx(Avatar, _extends({
       variant: variant
     }, additionalAvatarSlotProps, {
-      className: clsx(classes.avatar, additionalAvatarSlotProps == null ? void 0 : additionalAvatarSlotProps.className),
+      className: clsx(classes.avatar, additionalAvatarSlotProps?.className),
+      style: _extends({
+        '--AvatarRoot-spacing': marginValue ? `${marginValue}px` : undefined
+      }, other.style),
       children: extraAvatarsElement
     })) : null, children.slice(0, maxAvatars).reverse().map(child => {
       return /*#__PURE__*/React.cloneElement(child, {
@@ -182,6 +180,10 @@ process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes /* remove-proptype
    * @default 'medium'
    */
   spacing: PropTypes.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.number]),
+  /**
+   * @ignore
+   */
+  style: PropTypes.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/Backdrop/Backdrop.d.ts

@@ -5,10 +5,46 @@ import { TransitionProps } from '../transitions/transition';
 import { Theme } from '../styles';
 import { BackdropClasses } from './backdropClasses';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
+export interface BackdropSlots {
+  /**
+   * The component that renders the root.
+   * @default 'div'
+   */
+  root?: React.ElementType;
+  /**
+   * The component that renders the transition.
+   * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * @default Fade
+   */
+  transition?: React.JSXElementConstructor<
+    TransitionProps & { children: React.ReactElement<any, any> }
+  >;
+}
 export interface BackdropComponentsPropsOverrides {}
 
-export interface BackdropOwnProps extends Partial<Omit<FadeProps, 'children'>> {
+export interface BackdropTransitionSlotPropsOverrides {}
+
+export type BackdropSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  BackdropSlots,
+  {
+    root: SlotProps<
+      React.ElementType<HTMLDivElement>,
+      BackdropComponentsPropsOverrides,
+      BackdropOwnerState
+    >;
+    transition: SlotProps<
+      React.JSXElementConstructor<TransitionProps>,
+      BackdropTransitionSlotPropsOverrides,
+      BackdropOwnerState
+    >;
+  }
+>;
+
+export interface BackdropOwnProps
+  extends Partial<Omit<FadeProps, 'children'>>,
+    BackdropSlotsAndSlotProps {
   /**
    * The content of the component.
    */
@@ -50,27 +86,6 @@ export interface BackdropOwnProps extends Partial<Omit<FadeProps, 'children'>> {
    * If `true`, the component is shown.
    */
   open: boolean;
-  /**
-   * 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?: {
-    root?: React.HTMLAttributes<HTMLDivElement> & BackdropComponentsPropsOverrides;
-  };
-  /**
-   * 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?: {
-    root?: React.ElementType;
-  };
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -84,6 +99,7 @@ export interface BackdropOwnProps extends Partial<Omit<FadeProps, 'children'>> {
    * The component used for the transition.
    * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
    * @default Fade
+   * @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   TransitionComponent?: React.JSXElementConstructor<
     TransitionProps & {
@@ -124,4 +140,6 @@ export type BackdropProps<
   component?: React.ElementType;
 };
 
+export interface BackdropOwnerState extends BackdropProps {}
+
 export default Backdrop;

package/Backdrop/Backdrop.js

@@ -1,17 +1,18 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["children", "className", "component", "invisible", "open", "components", "componentsProps", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
+import useSlot from '../utils/useSlot';
 import Fade from '../Fade';
 import { getBackdropUtilityClass } from './backdropClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiBackdrop');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -31,9 +32,7 @@ const BackdropRoot = styled('div', {
     } = props;
     return [styles.root, ownerState.invisible && styles.invisible];
   }
-})(({
-  ownerState
-}) => _extends({
+})({
   position: 'fixed',
   display: 'flex',
   alignItems: 'center',
@@ -43,12 +42,17 @@ const BackdropRoot = styled('div', {
   top: 0,
   left: 0,
   backgroundColor: 'rgba(0, 0, 0, 0.5)',
-  WebkitTapHighlightColor: 'transparent'
-}, ownerState.invisible && {
-  backgroundColor: 'transparent'
-}));
+  WebkitTapHighlightColor: 'transparent',
+  variants: [{
+    props: {
+      invisible: true
+    },
+    style: {
+      backgroundColor: 'transparent'
+    }
+  }]
+});
 const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
-  var _slotProps$root, _ref, _slots$root;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiBackdrop'
@@ -57,13 +61,13 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
       children,
       className,
       component = 'div',
-      components = {},
-      componentsProps = {},
       invisible = false,
       open,
+      components = {},
+      componentsProps = {},
       slotProps = {},
       slots = {},
-      TransitionComponent = Fade,
+      TransitionComponent: TransitionComponentProp,
       transitionDuration
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
@@ -72,17 +76,34 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
     invisible
   });
   const classes = useUtilityClasses(ownerState);
-  const rootSlotProps = (_slotProps$root = slotProps.root) != null ? _slotProps$root : componentsProps.root;
-  return /*#__PURE__*/_jsx(TransitionComponent, _extends({
+  const backwardCompatibleSlots = _extends({
+    transition: TransitionComponentProp,
+    root: components.Root
+  }, slots);
+  const backwardCompatibleSlotProps = _extends({}, componentsProps, slotProps);
+  const externalForwardedProps = {
+    slots: backwardCompatibleSlots,
+    slotProps: backwardCompatibleSlotProps
+  };
+  const [RootSlot, rootProps] = useSlot('root', {
+    elementType: BackdropRoot,
+    externalForwardedProps,
+    className: clsx(classes.root, className),
+    ownerState
+  });
+  const [TransitionSlot, transitionProps] = useSlot('transition', {
+    elementType: Fade,
+    externalForwardedProps,
+    ownerState
+  });
+  delete transitionProps.ownerState;
+  return /*#__PURE__*/_jsx(TransitionSlot, _extends({
     in: open,
     timeout: transitionDuration
-  }, other, {
-    children: /*#__PURE__*/_jsx(BackdropRoot, _extends({
+  }, other, transitionProps, {
+    children: /*#__PURE__*/_jsx(RootSlot, _extends({
       "aria-hidden": true
-    }, rootSlotProps, {
-      as: (_ref = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref : component,
-      className: clsx(classes.root, className, rootSlotProps == null ? void 0 : rootSlotProps.className),
-      ownerState: _extends({}, ownerState, rootSlotProps == null ? void 0 : rootSlotProps.ownerState),
+    }, rootProps, {
       classes: classes,
       ref: ref,
       children: children
@@ -145,25 +166,20 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes /* remove-proptypes *
    */
   open: PropTypes.bool.isRequired,
   /**
-   * 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({
-    root: PropTypes.object
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    transition: 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({
-    root: PropTypes.elementType
+    root: PropTypes.elementType,
+    transition: PropTypes.elementType
   }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
@@ -173,6 +189,7 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes /* remove-proptypes *
    * The component used for the transition.
    * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
    * @default Fade
+   * @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   TransitionComponent: PropTypes.elementType,
   /**