@mui/material 5.15.14 → 6.0.0-alpha.0

package/legacy/SvgIcon/SvgIcon.js

@@ -10,8 +10,7 @@ import capitalize from '../utils/capitalize';
 import useThemeProps from '../styles/useThemeProps';
 import styled from '../styles/styled';
 import { getSvgIconUtilityClass } from './svgIconClasses';
-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 useUtilityClasses = function useUtilityClasses(ownerState) {
   var color = ownerState.color,
     fontSize = ownerState.fontSize,

package/legacy/SwipeableDrawer/SwipeableDrawer.js

@@ -20,8 +20,7 @@ import SwipeArea from './SwipeArea';
 
 // This value is closed to what browsers are using internally to
 // trigger a native scroll.
-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 UNCERTAINTY_THRESHOLD = 3; // px
 
 // This is the part of the drawer displayed on touch start.

package/legacy/Switch/Switch.js

@@ -16,8 +16,7 @@ import capitalize from '../utils/capitalize';
 import SwitchBase from '../internal/SwitchBase';
 import { styled, createUseThemeProps } from '../zero-styled';
 import switchClasses, { getSwitchUtilityClass } from './switchClasses';
-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('MuiSwitch');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,

package/legacy/TablePagination/TablePagination.js

@@ -21,9 +21,8 @@ import Toolbar from '../Toolbar';
 import TablePaginationActions from './TablePaginationActions';
 import useId from '../utils/useId';
 import tablePaginationClasses, { getTablePaginationUtilityClass } from './tablePaginationClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 var TablePaginationRoot = styled(TableCell, {
   name: 'MuiTablePagination',
   slot: 'Root',

package/legacy/TablePagination/TablePaginationActions.js

@@ -14,8 +14,7 @@ import FirstPageIconDefault from '../internal/svg-icons/FirstPage';
 /**
  * @ignore - internal component.
  */
-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 TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePaginationActions(props, ref) {
   var _slots$firstButton, _slots$lastButton, _slots$nextButton, _slots$previousButton, _slots$firstButtonIco, _slots$lastButtonIcon, _slots$nextButtonIcon, _slots$previousButton2;
   var backIconButtonProps = props.backIconButtonProps,

package/legacy/TableSortLabel/TableSortLabel.js

@@ -13,8 +13,7 @@ import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import capitalize from '../utils/capitalize';
 import tableSortLabelClasses, { getTableSortLabelUtilityClass } from './tableSortLabelClasses';
-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 useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     direction = ownerState.direction,

package/legacy/Tabs/Tabs.js

@@ -23,8 +23,7 @@ import useEventCallback from '../utils/useEventCallback';
 import tabsClasses, { getTabsUtilityClass } from './tabsClasses';
 import ownerDocument from '../utils/ownerDocument';
 import ownerWindow from '../utils/ownerWindow';
-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 nextItem = function nextItem(list, item) {
   if (list === item) {
     return list.firstChild;

package/legacy/TextField/TextField.js

@@ -18,8 +18,7 @@ import FormControl from '../FormControl';
 import FormHelperText from '../FormHelperText';
 import Select from '../Select';
 import { getTextFieldUtilityClass } from './textFieldClasses';
-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 variantComponent = {
   standard: Input,
   filled: FilledInput,

package/legacy/Tooltip/Tooltip.js

@@ -25,8 +25,7 @@ import useId from '../utils/useId';
 import useIsFocusVisible from '../utils/useIsFocusVisible';
 import useControlled from '../utils/useControlled';
 import tooltipClasses, { getTooltipUtilityClass } from './tooltipClasses';
-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";
 function round(value) {
   return Math.round(value * 1e5) / 1e5;
 }

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.15.14
+ * @mui/material v6.0.0-alpha.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/internal/SwitchBase.js

@@ -14,8 +14,7 @@ import useControlled from '../utils/useControlled';
 import useFormControl from '../FormControl/useFormControl';
 import ButtonBase from '../ButtonBase';
 import { getSwitchBaseUtilityClass } from './switchBaseClasses';
-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 useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     checked = ownerState.checked,

package/legacy/styles/CssVarsProvider.js

@@ -8,7 +8,6 @@ import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/sy
 import styleFunctionSx from '@mui/system/styleFunctionSx';
 import experimental_extendTheme from './experimental_extendTheme';
 import createTypography from './createTypography';
-import excludeVariablesFromRoot from './excludeVariablesFromRoot';
 import THEME_ID from './identifier';
 var defaultTheme = experimental_extendTheme();
 var _createCssVarsProvide = createCssVarsProvider({
@@ -32,8 +31,7 @@ var _createCssVarsProvide = createCssVarsProvider({
         });
       };
       return newTheme;
-    },
-    excludeVariablesFromRoot: excludeVariablesFromRoot
+    }
   }),
   CssVarsProvider = _createCssVarsProvide.CssVarsProvider,
   useColorScheme = _createCssVarsProvide.useColorScheme,

package/legacy/styles/createGetSelector.js

@@ -0,0 +1,21 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import excludeVariablesFromRoot from './excludeVariablesFromRoot';
+export default (function (theme) {
+  return function (colorScheme, css) {
+    if (theme.defaultColorScheme === colorScheme) {
+      if (colorScheme === 'dark') {
+        var excludedVariables = {};
+        excludeVariablesFromRoot(theme.cssVarPrefix).forEach(function (cssVar) {
+          excludedVariables[cssVar] = css[cssVar];
+          delete css[cssVar];
+        });
+        return _defineProperty(_defineProperty({}, "[".concat(theme.attribute, "=\"").concat(String(colorScheme), "\"]"), excludedVariables), theme.colorSchemeSelector, css);
+      }
+      return "".concat(theme.colorSchemeSelector, ", [").concat(theme.attribute, "=\"").concat(String(colorScheme), "\"]");
+    }
+    if (colorScheme) {
+      return "[".concat(theme.attribute, "=\"").concat(String(colorScheme), "\"]");
+    }
+    return theme.colorSchemeSelector;
+  };
+});

package/legacy/styles/experimental_extendTheme.js

@@ -1,3 +1,4 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
@@ -9,6 +10,7 @@ import { private_safeColorChannel as safeColorChannel, private_safeAlpha as safe
 import defaultShouldSkipGeneratingVar from './shouldSkipGeneratingVar';
 import createThemeWithoutVars from './createTheme';
 import getOverlayAlpha from './getOverlayAlpha';
+import defaultGetSelector from './createGetSelector';
 var defaultDarkOverlays = _toConsumableArray(Array(25)).map(function (_, index) {
   if (index === 0) {
     return undefined;
@@ -62,7 +64,8 @@ export default function extendTheme() {
     cssVarPrefix = _options$cssVarPrefix === void 0 ? 'mui' : _options$cssVarPrefix,
     _options$shouldSkipGe = options.shouldSkipGeneratingVar,
     shouldSkipGeneratingVar = _options$shouldSkipGe === void 0 ? defaultShouldSkipGeneratingVar : _options$shouldSkipGe,
-    input = _objectWithoutProperties(options, ["colorSchemes", "cssVarPrefix", "shouldSkipGeneratingVar"]);
+    getSelector = options.getSelector,
+    input = _objectWithoutProperties(options, ["colorSchemes", "cssVarPrefix", "shouldSkipGeneratingVar", "getSelector"]);
   var getCssVar = createGetCssVar(cssVarPrefix);
   var _createThemeWithoutVa = createThemeWithoutVars(_extends({}, input, colorSchemesInput.light && {
       palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
@@ -75,7 +78,9 @@ export default function extendTheme() {
       }, (_colorSchemesInput$da = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da.palette)
     }),
     darkPalette = _createThemeWithoutVa2.palette;
-  var theme = _extends({}, muiTheme, {
+  var theme = _extends({
+    defaultColorScheme: 'light'
+  }, muiTheme, {
     cssVarPrefix: cssVarPrefix,
     getCssVar: getCssVar,
     colorSchemes: _extends({}, colorSchemesInput, {
@@ -317,13 +322,27 @@ export default function extendTheme() {
   }, theme);
   var parserConfig = {
     prefix: cssVarPrefix,
-    shouldSkipGeneratingVar: shouldSkipGeneratingVar
+    shouldSkipGeneratingVar: shouldSkipGeneratingVar,
+    getSelector: getSelector || defaultGetSelector(theme)
   };
   var _prepareCssVars = prepareCssVars(theme, parserConfig),
-    themeVars = _prepareCssVars.vars,
-    generateCssVars = _prepareCssVars.generateCssVars;
-  theme.vars = themeVars;
-  theme.generateCssVars = generateCssVars;
+    vars = _prepareCssVars.vars,
+    generateThemeVars = _prepareCssVars.generateThemeVars,
+    generateStyleSheets = _prepareCssVars.generateStyleSheets;
+  theme.attribute = 'data-mui-color-scheme';
+  theme.colorSchemeSelector = ':root';
+  theme.vars = vars;
+  Object.entries(theme.colorSchemes[theme.defaultColorScheme]).forEach(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    theme[key] = value;
+  });
+  theme.generateThemeVars = generateThemeVars;
+  theme.generateStyleSheets = generateStyleSheets;
+  theme.getColorSchemeSelector = function (colorScheme) {
+    return "[".concat(theme.attribute, "=\"").concat(colorScheme, "\"] &");
+  };
   theme.shouldSkipGeneratingVar = shouldSkipGeneratingVar;
   theme.unstable_sxConfig = _extends({}, defaultSxConfig, input == null ? void 0 : input.unstable_sxConfig);
   theme.unstable_sx = function sx(props) {

package/modern/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/modern/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/modern/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/modern/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 => {
@@ -597,7 +596,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     }))
   }));
   let autocompletePopper = null;
-  if (!loading && groupedOptions.length > 0) {
+  if (groupedOptions.length > 0) {
     autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/_jsx(AutocompleteListbox, _extends({
       as: ListboxComponent,
       className: classes.listbox,

package/modern/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,23 +35,19 @@ 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 ?? -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) {
   const props = useThemeProps({
     props: inProps,
@@ -96,6 +91,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
   const extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
   const extraAvatarsElement = renderSurplus ? renderSurplus(extraAvatars) : `+${extraAvatars}`;
   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,6 +102,9 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
       variant: variant
     }, additionalAvatarSlotProps, {
       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, {
@@ -181,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/modern/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,10 +42,16 @@ 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) {
   const props = useThemeProps({
     props: inProps,
@@ -56,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);
@@ -71,17 +76,34 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
     invisible
   });
   const classes = useUtilityClasses(ownerState);
-  const rootSlotProps = 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: slots.root ?? components.Root ?? component,
-      className: clsx(classes.root, className, rootSlotProps?.className),
-      ownerState: _extends({}, ownerState, rootSlotProps?.ownerState),
+    }, rootProps, {
       classes: classes,
       ref: ref,
       children: children
@@ -144,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.
@@ -172,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,
   /**

package/modern/Badge/Badge.js

@@ -13,8 +13,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";
 const RADIUS_STANDARD = 10;
 const RADIUS_DOT = 4;
 const useThemeProps = createUseThemeProps('MuiBadge');

package/modern/BottomNavigation/BottomNavigation.js

@@ -8,10 +8,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";
+const useThemeProps = createUseThemeProps('MuiBottomNavigation');
 const useUtilityClasses = ownerState => {
   const {
     classes

package/modern/BottomNavigationAction/BottomNavigationAction.js

@@ -1,19 +1,18 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["className", "icon", "label", "onChange", "onClick", "selected", "showLabel", "value"];
 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 ButtonBase from '../ButtonBase';
 import unsupportedProp from '../utils/unsupportedProp';
 import bottomNavigationActionClasses, { getBottomNavigationActionUtilityClass } from './bottomNavigationActionClasses';
-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('MuiBottomNavigationAction');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -36,9 +35,8 @@ const BottomNavigationActionRoot = styled(ButtonBase, {
     return [styles.root, !ownerState.showLabel && !ownerState.selected && styles.iconOnly];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   transition: theme.transitions.create(['color', 'padding-top'], {
     duration: theme.transitions.duration.short
   }),
@@ -47,36 +45,54 @@ const BottomNavigationActionRoot = styled(ButtonBase, {
   maxWidth: 168,
   color: (theme.vars || theme).palette.text.secondary,
   flexDirection: 'column',
-  flex: '1'
-}, !ownerState.showLabel && !ownerState.selected && {
-  paddingTop: 14
-}, !ownerState.showLabel && !ownerState.selected && !ownerState.label && {
-  paddingTop: 0
-}, {
+  flex: '1',
   [`&.${bottomNavigationActionClasses.selected}`]: {
     color: (theme.vars || theme).palette.primary.main
-  }
+  },
+  variants: [{
+    props: ({
+      showLabel,
+      selected
+    }) => !showLabel && !selected,
+    style: {
+      paddingTop: 14
+    }
+  }, {
+    props: ({
+      showLabel,
+      selected,
+      label
+    }) => !showLabel && !selected && !label,
+    style: {
+      paddingTop: 0
+    }
+  }]
 }));
 const BottomNavigationActionLabel = styled('span', {
   name: 'MuiBottomNavigationAction',
   slot: 'Label',
   overridesResolver: (props, styles) => styles.label
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   fontFamily: theme.typography.fontFamily,
   fontSize: theme.typography.pxToRem(12),
   opacity: 1,
   transition: 'font-size 0.2s, opacity 0.2s',
-  transitionDelay: '0.1s'
-}, !ownerState.showLabel && !ownerState.selected && {
-  opacity: 0,
-  transitionDelay: '0s'
-}, {
+  transitionDelay: '0.1s',
   [`&.${bottomNavigationActionClasses.selected}`]: {
     fontSize: theme.typography.pxToRem(14)
-  }
+  },
+  variants: [{
+    props: ({
+      showLabel,
+      selected
+    }) => !showLabel && !selected,
+    style: {
+      opacity: 0,
+      transitionDelay: '0s'
+    }
+  }]
 }));
 const BottomNavigationAction = /*#__PURE__*/React.forwardRef(function BottomNavigationAction(inProps, ref) {
   const props = useThemeProps({