@mui/material 5.15.13 → 6.0.0-alpha.0

package/legacy/Alert/Alert.js

@@ -21,8 +21,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";
 var useThemeProps = createUseThemeProps('MuiAlert');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var variant = ownerState.variant,

package/legacy/Autocomplete/Autocomplete.js

@@ -3,7 +3,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _ClearIcon, _ArrowDropDownIcon;
+var _styled, _ClearIcon, _ArrowDropDownIcon;
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -23,14 +23,13 @@ import outlinedInputClasses from '../OutlinedInput/outlinedInputClasses';
 import filledInputClasses from '../FilledInput/filledInputClasses';
 import ClearIcon from '../internal/svg-icons/Close';
 import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+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";
+var useThemeProps = createUseThemeProps('MuiAutocomplete');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     disablePortal = ownerState.disablePortal,
@@ -73,89 +72,100 @@ var AutocompleteRoot = styled('div', {
       size = ownerState.size;
     return [_defineProperty({}, "& .".concat(autocompleteClasses.tag), styles.tag), _defineProperty({}, "& .".concat(autocompleteClasses.tag), styles["tagSize".concat(capitalize(size))]), _defineProperty({}, "& .".concat(autocompleteClasses.inputRoot), styles.inputRoot), _defineProperty({}, "& .".concat(autocompleteClasses.input), styles.input), _defineProperty({}, "& .".concat(autocompleteClasses.input), inputFocused && styles.inputFocused), styles.root, fullWidth && styles.fullWidth, hasPopupIcon && styles.hasPopupIcon, hasClearIcon && styles.hasClearIcon];
   }
-})(function (_ref6) {
-  var _extends3;
-  var ownerState = _ref6.ownerState;
-  return _extends(_defineProperty(_defineProperty({}, "&.".concat(autocompleteClasses.focused, " .").concat(autocompleteClasses.clearIndicator), {
-    visibility: 'visible'
-  }), '@media (pointer: fine)', _defineProperty({}, "&:hover .".concat(autocompleteClasses.clearIndicator), {
-    visibility: 'visible'
-  })), ownerState.fullWidth && {
+})((_styled = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_styled, "&.".concat(autocompleteClasses.focused, " .").concat(autocompleteClasses.clearIndicator), {
+  visibility: 'visible'
+}), '@media (pointer: fine)', _defineProperty({}, "&:hover .".concat(autocompleteClasses.clearIndicator), {
+  visibility: 'visible'
+})), "& .".concat(autocompleteClasses.tag), {
+  margin: 3,
+  maxWidth: 'calc(100% - 6px)'
+}), "& .".concat(autocompleteClasses.inputRoot), _defineProperty(_defineProperty(_defineProperty({
+  flexWrap: 'wrap'
+}, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
+  paddingRight: 26 + 4
+}), ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
+  paddingRight: 52 + 4
+}), "& .".concat(autocompleteClasses.input), {
+  width: 0,
+  minWidth: 30
+})), "& .".concat(inputClasses.root), {
+  paddingBottom: 1,
+  '& .MuiInput-input': {
+    padding: '4px 4px 4px 0px'
+  }
+}), "& .".concat(inputClasses.root, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({}, "& .".concat(inputClasses.input), {
+  padding: '2px 4px 3px 0'
+})), "& .".concat(outlinedInputClasses.root), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
+  padding: 9
+}, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
+  paddingRight: 26 + 4 + 9
+}), ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
+  paddingRight: 52 + 4 + 9
+}), "& .".concat(autocompleteClasses.input), {
+  padding: '7.5px 4px 7.5px 5px'
+}), "& .".concat(autocompleteClasses.endAdornment), {
+  right: 9
+})), "& .".concat(outlinedInputClasses.root, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({
+  // Don't specify paddingRight, as it overrides the default value set when there is only
+  // one of the popup or clear icon as the specificity is equal so the latter one wins
+  paddingTop: 6,
+  paddingBottom: 6,
+  paddingLeft: 6
+}, "& .".concat(autocompleteClasses.input), {
+  padding: '2.5px 4px 2.5px 8px'
+})), "& .".concat(filledInputClasses.root), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
+  paddingTop: 19,
+  paddingLeft: 8
+}, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
+  paddingRight: 26 + 4 + 9
+}), ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
+  paddingRight: 52 + 4 + 9
+}), "& .".concat(filledInputClasses.input), {
+  padding: '7px 4px'
+}), "& .".concat(autocompleteClasses.endAdornment), {
+  right: 9
+})), "& .".concat(filledInputClasses.root, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({
+  paddingBottom: 1
+}, "& .".concat(filledInputClasses.input), {
+  padding: '2.5px 4px'
+})), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_styled, "& .".concat(inputBaseClasses.hiddenLabel), {
+  paddingTop: 8
+}), "& .".concat(filledInputClasses.root, ".").concat(inputBaseClasses.hiddenLabel), _defineProperty({
+  paddingTop: 0,
+  paddingBottom: 0
+}, "& .".concat(autocompleteClasses.input), {
+  paddingTop: 16,
+  paddingBottom: 17
+})), "& .".concat(filledInputClasses.root, ".").concat(inputBaseClasses.hiddenLabel, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({}, "& .".concat(autocompleteClasses.input), {
+  paddingTop: 8,
+  paddingBottom: 9
+})), "& .".concat(autocompleteClasses.input), {
+  flexGrow: 1,
+  textOverflow: 'ellipsis',
+  opacity: 0
+}), "variants", [{
+  props: {
+    fullWidth: true
+  },
+  style: {
     width: '100%'
-  }, (_extends3 = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_extends3, "& .".concat(autocompleteClasses.tag), _extends({
-    margin: 3,
-    maxWidth: 'calc(100% - 6px)'
-  }, ownerState.size === 'small' && {
+  }
+}, {
+  props: {
+    size: 'small'
+  },
+  style: _defineProperty({}, "& .".concat(autocompleteClasses.tag), {
     margin: 2,
     maxWidth: 'calc(100% - 4px)'
-  })), "& .".concat(autocompleteClasses.inputRoot), _defineProperty(_defineProperty(_defineProperty({
-    flexWrap: 'wrap'
-  }, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
-    paddingRight: 26 + 4
-  }), ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
-    paddingRight: 52 + 4
-  }), "& .".concat(autocompleteClasses.input), {
-    width: 0,
-    minWidth: 30
-  })), "& .".concat(inputClasses.root), {
-    paddingBottom: 1,
-    '& .MuiInput-input': {
-      padding: '4px 4px 4px 0px'
-    }
-  }), "& .".concat(inputClasses.root, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({}, "& .".concat(inputClasses.input), {
-    padding: '2px 4px 3px 0'
-  })), "& .".concat(outlinedInputClasses.root), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
-    padding: 9
-  }, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
-    paddingRight: 26 + 4 + 9
-  }), ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
-    paddingRight: 52 + 4 + 9
-  }), "& .".concat(autocompleteClasses.input), {
-    padding: '7.5px 4px 7.5px 5px'
-  }), "& .".concat(autocompleteClasses.endAdornment), {
-    right: 9
-  })), "& .".concat(outlinedInputClasses.root, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({
-    // Don't specify paddingRight, as it overrides the default value set when there is only
-    // one of the popup or clear icon as the specificity is equal so the latter one wins
-    paddingTop: 6,
-    paddingBottom: 6,
-    paddingLeft: 6
-  }, "& .".concat(autocompleteClasses.input), {
-    padding: '2.5px 4px 2.5px 8px'
-  })), "& .".concat(filledInputClasses.root), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
-    paddingTop: 19,
-    paddingLeft: 8
-  }, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
-    paddingRight: 26 + 4 + 9
-  }), ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
-    paddingRight: 52 + 4 + 9
-  }), "& .".concat(filledInputClasses.input), {
-    padding: '7px 4px'
-  }), "& .".concat(autocompleteClasses.endAdornment), {
-    right: 9
-  })), "& .".concat(filledInputClasses.root, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({
-    paddingBottom: 1
-  }, "& .".concat(filledInputClasses.input), {
-    padding: '2.5px 4px'
-  })), "& .".concat(inputBaseClasses.hiddenLabel), {
-    paddingTop: 8
-  }), "& .".concat(filledInputClasses.root, ".").concat(inputBaseClasses.hiddenLabel), _defineProperty({
-    paddingTop: 0,
-    paddingBottom: 0
-  }, "& .".concat(autocompleteClasses.input), {
-    paddingTop: 16,
-    paddingBottom: 17
-  })), _defineProperty(_defineProperty(_extends3, "& .".concat(filledInputClasses.root, ".").concat(inputBaseClasses.hiddenLabel, ".").concat(inputBaseClasses.sizeSmall), _defineProperty({}, "& .".concat(autocompleteClasses.input), {
-    paddingTop: 8,
-    paddingBottom: 9
-  })), "& .".concat(autocompleteClasses.input), _extends({
-    flexGrow: 1,
-    textOverflow: 'ellipsis',
-    opacity: 0
-  }, ownerState.inputFocused && {
+  })
+}, {
+  props: {
+    inputFocused: true
+  },
+  style: _defineProperty({}, "& .".concat(autocompleteClasses.input), {
     opacity: 1
-  }))));
-});
+  })
+}])));
 var AutocompleteEndAdornment = styled('div', {
   name: 'MuiAutocomplete',
   slot: 'EndAdornment',
@@ -183,18 +193,21 @@ var AutocompleteClearIndicator = styled(IconButton, {
 var AutocompletePopupIndicator = styled(IconButton, {
   name: 'MuiAutocomplete',
   slot: 'PopupIndicator',
-  overridesResolver: function overridesResolver(_ref7, styles) {
-    var ownerState = _ref7.ownerState;
+  overridesResolver: function overridesResolver(_ref6, styles) {
+    var ownerState = _ref6.ownerState;
     return _extends({}, styles.popupIndicator, ownerState.popupOpen && styles.popupIndicatorOpen);
   }
-})(function (_ref8) {
-  var ownerState = _ref8.ownerState;
-  return _extends({
-    padding: 2,
-    marginRight: -2
-  }, ownerState.popupOpen && {
-    transform: 'rotate(180deg)'
-  });
+})({
+  padding: 2,
+  marginRight: -2,
+  variants: [{
+    props: {
+      popupOpen: true
+    },
+    style: {
+      transform: 'rotate(180deg)'
+    }
+  }]
 });
 var AutocompletePopper = styled(Popper, {
   name: 'MuiAutocomplete',
@@ -203,14 +216,19 @@ var AutocompletePopper = styled(Popper, {
     var ownerState = props.ownerState;
     return [_defineProperty({}, "& .".concat(autocompleteClasses.option), styles.option), styles.popper, ownerState.disablePortal && styles.popperDisablePortal];
   }
-})(function (_ref10) {
-  var theme = _ref10.theme,
-    ownerState = _ref10.ownerState;
-  return _extends({
-    zIndex: (theme.vars || theme).zIndex.modal
-  }, ownerState.disablePortal && {
-    position: 'absolute'
-  });
+})(function (_ref8) {
+  var theme = _ref8.theme;
+  return {
+    zIndex: (theme.vars || theme).zIndex.modal,
+    variants: [{
+      props: {
+        disablePortal: true
+      },
+      style: {
+        position: 'absolute'
+      }
+    }]
+  };
 });
 var AutocompletePaper = styled(Paper, {
   name: 'MuiAutocomplete',
@@ -218,8 +236,8 @@ var AutocompletePaper = styled(Paper, {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.paper;
   }
-})(function (_ref11) {
-  var theme = _ref11.theme;
+})(function (_ref9) {
+  var theme = _ref9.theme;
   return _extends({}, theme.typography.body1, {
     overflow: 'auto'
   });
@@ -230,8 +248,8 @@ var AutocompleteLoading = styled('div', {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.loading;
   }
-})(function (_ref12) {
-  var theme = _ref12.theme;
+})(function (_ref10) {
+  var theme = _ref10.theme;
   return {
     color: (theme.vars || theme).palette.text.secondary,
     padding: '14px 16px'
@@ -243,8 +261,8 @@ var AutocompleteNoOptions = styled('div', {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.noOptions;
   }
-})(function (_ref13) {
-  var theme = _ref13.theme;
+})(function (_ref11) {
+  var theme = _ref11.theme;
   return {
     color: (theme.vars || theme).palette.text.secondary,
     padding: '14px 16px'
@@ -256,8 +274,8 @@ var AutocompleteListbox = styled('div', {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.listbox;
   }
-})(function (_ref14) {
-  var theme = _ref14.theme;
+})(function (_ref12) {
+  var theme = _ref12.theme;
   return _defineProperty({
     listStyle: 'none',
     margin: 0,
@@ -310,8 +328,8 @@ var AutocompleteGroupLabel = styled(ListSubheader, {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.groupLabel;
   }
-})(function (_ref16) {
-  var theme = _ref16.theme;
+})(function (_ref14) {
+  var theme = _ref14.theme;
   return {
     backgroundColor: (theme.vars || theme).palette.background.paper,
     top: -8
@@ -470,8 +488,8 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
   var hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;
   var _getInputProps = getInputProps(),
     handleInputMouseDown = _getInputProps.onMouseDown;
-  var _ref17 = ListboxProps != null ? ListboxProps : {},
-    externalListboxRef = _ref17.ref;
+  var _ref15 = ListboxProps != null ? ListboxProps : {},
+    externalListboxRef = _ref15.ref;
   var _getListboxProps = getListboxProps(),
     listboxRef = _getListboxProps.ref,
     otherListboxProps = _objectWithoutProperties(_getListboxProps, ["ref"]);
@@ -589,7 +607,7 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
     }));
   };
   var autocompletePopper = null;
-  if (!loading && groupedOptions.length > 0) {
+  if (groupedOptions.length > 0) {
     autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/_jsx(AutocompleteListbox, _extends({
       as: ListboxComponent,
       className: classes.listbox,
@@ -928,7 +946,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
   ListboxProps: PropTypes.object,
   /**
    * If `true`, the component is in a loading state.
-   * This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, e.g. `options` are empty).
+   * This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, for example `options` are empty).
    * @default false
    */
   loading: PropTypes.bool,

package/legacy/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";
 var SPACINGS = {
   small: -16,
-  medium: null
+  medium: -8
 };
+var useThemeProps = createUseThemeProps('MuiAlert');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
   var slots = {
@@ -34,17 +33,18 @@ var AvatarGroupRoot = styled('div', {
     return _extends(_defineProperty({}, "& .".concat(avatarGroupClasses.avatar), styles.avatar), styles.root);
   }
 })(function (_ref) {
-  var theme = _ref.theme,
-    ownerState = _ref.ownerState;
-  var marginValue = ownerState.spacing && SPACINGS[ownerState.spacing] !== undefined ? SPACINGS[ownerState.spacing] : -ownerState.spacing;
-  return _defineProperty(_defineProperty(_defineProperty({}, "& .".concat(avatarClasses.root), {
+  var theme = _ref.theme;
+  return _defineProperty({
+    display: 'flex',
+    flexDirection: 'row-reverse'
+  }, "& .".concat(avatarClasses.root), {
     border: "2px solid ".concat((theme.vars || theme).palette.background.default),
     boxSizing: 'content-box',
-    marginLeft: marginValue != null ? marginValue : -8,
+    marginLeft: 'var(--AvatarGroup-spacing, -8px)',
     '&:last-child': {
       marginLeft: 0
     }
-  }), "display", 'flex'), "flexDirection", 'row-reverse');
+  });
 });
 var AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, ref) {
   var _slotProps$additional;
@@ -94,6 +94,7 @@ var AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, re
   var extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
   var extraAvatarsElement = renderSurplus ? renderSurplus(extraAvatars) : "+".concat(extraAvatars);
   var additionalAvatarSlotProps = (_slotProps$additional = slotProps.additionalAvatar) != null ? _slotProps$additional : componentsProps.additionalAvatar;
+  var marginValue = ownerState.spacing && SPACINGS[ownerState.spacing] !== undefined ? SPACINGS[ownerState.spacing] : -ownerState.spacing || -8;
   return /*#__PURE__*/_jsxs(AvatarGroupRoot, _extends({
     as: component,
     ownerState: ownerState,
@@ -104,6 +105,9 @@ var AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, re
       variant: variant
     }, additionalAvatarSlotProps, {
       className: clsx(classes.avatar, additionalAvatarSlotProps == null ? void 0 : additionalAvatarSlotProps.className),
+      style: _extends({
+        '--AvatarRoot-spacing': marginValue ? "".concat(marginValue, "px") : undefined
+      }, other.style),
       children: extraAvatarsElement
     })) : null, children.slice(0, maxAvatars).reverse().map(function (child) {
       return /*#__PURE__*/React.cloneElement(child, {
@@ -179,6 +183,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/legacy/Backdrop/Backdrop.js

@@ -1,16 +1,18 @@
 'use client';
 
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 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";
+var useThemeProps = createUseThemeProps('MuiBackdrop');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     invisible = ownerState.invisible;
@@ -26,25 +28,27 @@ var BackdropRoot = styled('div', {
     var ownerState = props.ownerState;
     return [styles.root, ownerState.invisible && styles.invisible];
   }
-})(function (_ref) {
-  var ownerState = _ref.ownerState;
-  return _extends({
-    position: 'fixed',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    right: 0,
-    bottom: 0,
-    top: 0,
-    left: 0,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    WebkitTapHighlightColor: 'transparent'
-  }, ownerState.invisible && {
-    backgroundColor: 'transparent'
-  });
+})({
+  position: 'fixed',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  right: 0,
+  bottom: 0,
+  top: 0,
+  left: 0,
+  backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  WebkitTapHighlightColor: 'transparent',
+  variants: [{
+    props: {
+      invisible: true
+    },
+    style: {
+      backgroundColor: 'transparent'
+    }
+  }]
 });
 var Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
-  var _slotProps$root, _ref2, _slots$root;
   var props = useThemeProps({
     props: inProps,
     name: 'MuiBackdrop'
@@ -53,37 +57,59 @@ var Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
     className = props.className,
     _props$component = props.component,
     component = _props$component === void 0 ? 'div' : _props$component,
+    _props$invisible = props.invisible,
+    invisible = _props$invisible === void 0 ? false : _props$invisible,
+    open = props.open,
     _props$components = props.components,
     components = _props$components === void 0 ? {} : _props$components,
     _props$componentsProp = props.componentsProps,
     componentsProps = _props$componentsProp === void 0 ? {} : _props$componentsProp,
-    _props$invisible = props.invisible,
-    invisible = _props$invisible === void 0 ? false : _props$invisible,
-    open = props.open,
     _props$slotProps = props.slotProps,
     slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
     _props$slots = props.slots,
     slots = _props$slots === void 0 ? {} : _props$slots,
-    _props$TransitionComp = props.TransitionComponent,
-    TransitionComponent = _props$TransitionComp === void 0 ? Fade : _props$TransitionComp,
+    TransitionComponentProp = props.TransitionComponent,
     transitionDuration = props.transitionDuration,
-    other = _objectWithoutProperties(props, ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"]);
+    other = _objectWithoutProperties(props, ["children", "className", "component", "invisible", "open", "components", "componentsProps", "slotProps", "slots", "TransitionComponent", "transitionDuration"]);
   var ownerState = _extends({}, props, {
     component: component,
     invisible: invisible
   });
   var classes = useUtilityClasses(ownerState);
-  var rootSlotProps = (_slotProps$root = slotProps.root) != null ? _slotProps$root : componentsProps.root;
-  return /*#__PURE__*/_jsx(TransitionComponent, _extends({
+  var backwardCompatibleSlots = _extends({
+    transition: TransitionComponentProp,
+    root: components.Root
+  }, slots);
+  var backwardCompatibleSlotProps = _extends({}, componentsProps, slotProps);
+  var externalForwardedProps = {
+    slots: backwardCompatibleSlots,
+    slotProps: backwardCompatibleSlotProps
+  };
+  var _useSlot = useSlot('root', {
+      elementType: BackdropRoot,
+      externalForwardedProps: externalForwardedProps,
+      className: clsx(classes.root, className),
+      ownerState: ownerState
+    }),
+    _useSlot2 = _slicedToArray(_useSlot, 2),
+    RootSlot = _useSlot2[0],
+    rootProps = _useSlot2[1];
+  var _useSlot3 = useSlot('transition', {
+      elementType: Fade,
+      externalForwardedProps: externalForwardedProps,
+      ownerState: ownerState
+    }),
+    _useSlot4 = _slicedToArray(_useSlot3, 2),
+    TransitionSlot = _useSlot4[0],
+    transitionProps = _useSlot4[1];
+  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: (_ref2 = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref2 : 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
@@ -146,25 +172,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.
@@ -174,6 +195,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,
   /**

package/legacy/Badge/Badge.js

@@ -14,8 +14,7 @@ import { useSlotProps } from '@mui/base/utils';
 import { styled, createUseThemeProps } from '../zero-styled';
 import capitalize from '../utils/capitalize';
 import badgeClasses, { getBadgeUtilityClass } from './badgeClasses';
-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";
 var RADIUS_STANDARD = 10;
 var RADIUS_DOT = 4;
 var useThemeProps = createUseThemeProps('MuiBadge');

package/legacy/BottomNavigation/BottomNavigation.js

@@ -7,10 +7,10 @@ import { isFragment } from 'react-is';
 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 { getBottomNavigationUtilityClass } from './bottomNavigationClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiBottomNavigation');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
   var slots = {