@mui/material 6.0.0-alpha.11 → 6.0.0-alpha.13

package/modern/Autocomplete/Autocomplete.js

@@ -20,12 +20,12 @@ 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 { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import autocompleteClasses, { getAutocompleteUtilityClass } from './autocompleteClasses';
 import capitalize from '../utils/capitalize';
 import useSlot from '../utils/useSlot';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiAutocomplete');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -403,7 +403,7 @@ const AutocompleteGroupUl = styled('ul', {
 });
 export { createFilterOptions };
 const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiAutocomplete'
   });

package/modern/Avatar/Avatar.js

@@ -4,12 +4,12 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 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,
@@ -141,7 +141,7 @@ function useLoaded({
   return loaded;
 }
 const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiAvatar'
   });

package/modern/AvatarGroup/AvatarGroup.js

@@ -6,7 +6,8 @@ import { isFragment } from 'react-is';
 import clsx from 'clsx';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import Avatar, { avatarClasses } from '../Avatar';
 import avatarGroupClasses, { getAvatarGroupUtilityClass } from './avatarGroupClasses';
 import useSlot from '../utils/useSlot';
@@ -15,7 +16,6 @@ const SPACINGS = {
   small: -16,
   medium: -8
 };
-const useThemeProps = createUseThemeProps('MuiAlert');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -48,7 +48,7 @@ const AvatarGroupRoot = styled('div', {
   }
 }));
 const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiAvatarGroup'
   });

package/modern/Backdrop/Backdrop.js

@@ -4,12 +4,12 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 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,
@@ -50,7 +50,7 @@ const BackdropRoot = styled('div', {
   }]
 });
 const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiBackdrop'
   });

package/modern/Badge/Badge.js

@@ -7,13 +7,13 @@ import usePreviousProps from '@mui/utils/usePreviousProps';
 import composeClasses from '@mui/utils/composeClasses';
 import { useBadge } from '@mui/base/useBadge';
 import { useSlotProps } from '@mui/base/utils';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import capitalize from '../utils/capitalize';
 import badgeClasses, { getBadgeUtilityClass } from './badgeClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const RADIUS_STANDARD = 10;
 const RADIUS_DOT = 4;
-const useThemeProps = createUseThemeProps('MuiBadge');
 const useUtilityClasses = ownerState => {
   const {
     color,
@@ -209,7 +209,7 @@ const BadgeBadge = styled('span', {
   }]
 }));
 const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiBadge'
   });

package/modern/BottomNavigation/BottomNavigation.js

@@ -5,10 +5,10 @@ import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import { getBottomNavigationUtilityClass } from './bottomNavigationClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiBottomNavigation');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -31,7 +31,7 @@ const BottomNavigationRoot = styled('div', {
   backgroundColor: (theme.vars || theme).palette.background.paper
 }));
 const BottomNavigation = /*#__PURE__*/React.forwardRef(function BottomNavigation(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiBottomNavigation'
   });

package/modern/BottomNavigationAction/BottomNavigationAction.js

@@ -4,12 +4,12 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import ButtonBase from '../ButtonBase';
 import unsupportedProp from '../utils/unsupportedProp';
 import bottomNavigationActionClasses, { getBottomNavigationActionUtilityClass } from './bottomNavigationActionClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiBottomNavigationAction');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -92,7 +92,7 @@ const BottomNavigationActionLabel = styled('span', {
   }]
 }));
 const BottomNavigationAction = /*#__PURE__*/React.forwardRef(function BottomNavigationAction(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiBottomNavigationAction'
   });

package/modern/Breadcrumbs/Breadcrumbs.js

@@ -7,12 +7,12 @@ import clsx from 'clsx';
 import integerPropType from '@mui/utils/integerPropType';
 import { useSlotProps } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import Typography from '../Typography';
 import BreadcrumbCollapsed from './BreadcrumbCollapsed';
 import breadcrumbsClasses, { getBreadcrumbsUtilityClass } from './breadcrumbsClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiBreadcrumbs');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -72,7 +72,7 @@ function insertSeparators(items, className, separator, ownerState) {
   }, []);
 }
 const Breadcrumbs = /*#__PURE__*/React.forwardRef(function Breadcrumbs(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiBreadcrumbs'
   });

package/modern/Button/Button.js

@@ -7,14 +7,14 @@ import resolveProps from '@mui/utils/resolveProps';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
 import rootShouldForwardProp from '../styles/rootShouldForwardProp';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import ButtonBase from '../ButtonBase';
 import capitalize from '../utils/capitalize';
 import buttonClasses, { getButtonUtilityClass } from './buttonClasses';
 import ButtonGroupContext from '../ButtonGroup/ButtonGroupContext';
 import ButtonGroupButtonContext from '../ButtonGroup/ButtonGroupButtonContext';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiButton');
 const useUtilityClasses = ownerState => {
   const {
     color,
@@ -313,7 +313,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
   const contextProps = React.useContext(ButtonGroupContext);
   const buttonGroupButtonContextPositionClassName = React.useContext(ButtonGroupButtonContext);
   const resolvedProps = resolveProps(contextProps, inProps);
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: resolvedProps,
     name: 'MuiButton'
   });

package/modern/ButtonBase/ButtonBase.js

@@ -6,14 +6,14 @@ import clsx from 'clsx';
 import refType from '@mui/utils/refType';
 import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import useForkRef from '../utils/useForkRef';
 import useEventCallback from '../utils/useEventCallback';
 import useIsFocusVisible from '../utils/useIsFocusVisible';
 import TouchRipple from './TouchRipple';
 import buttonBaseClasses, { getButtonBaseUtilityClass } from './buttonBaseClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiButtonBase');
 const useUtilityClasses = ownerState => {
   const {
     disabled,
@@ -80,7 +80,7 @@ export const ButtonBaseRoot = styled('button', {
  * It contains a load of style reset and some focus/ripple logic.
  */
 const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiButtonBase'
   });

package/modern/ButtonBase/TouchRipple.js

@@ -5,11 +5,11 @@ import PropTypes from 'prop-types';
 import { TransitionGroup } from 'react-transition-group';
 import clsx from 'clsx';
 import useTimeout from '@mui/utils/useTimeout';
-import { keyframes, styled, createUseThemeProps } from '../zero-styled';
+import { keyframes, styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import Ripple from './Ripple';
 import touchRippleClasses from './touchRippleClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiTouchRipple');
 const DURATION = 550;
 export const DELAY_RIPPLE = 80;
 const enterKeyframe = keyframes`
@@ -124,7 +124,7 @@ export const TouchRippleRipple = styled(Ripple, {
  * TODO v5: Make private
  */
 const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiTouchRipple'
   });

package/modern/ButtonGroup/ButtonGroup.js

@@ -7,12 +7,12 @@ import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
 import getValidReactChildren from '@mui/utils/getValidReactChildren';
 import capitalize from '../utils/capitalize';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import buttonGroupClasses, { getButtonGroupUtilityClass } from './buttonGroupClasses';
 import ButtonGroupContext from './ButtonGroupContext';
 import ButtonGroupButtonContext from './ButtonGroupButtonContext';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiButtonGroup');
 const overridesResolver = (props, styles) => {
   const {
     ownerState
@@ -232,7 +232,7 @@ const ButtonGroupRoot = styled('div', {
   }
 }));
 const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiButtonGroup'
   });

package/modern/Card/Card.js

@@ -5,11 +5,11 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import Paper from '../Paper';
 import { getCardUtilityClass } from './cardClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiCard');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -27,7 +27,7 @@ const CardRoot = styled(Paper, {
   overflow: 'hidden'
 });
 const Card = /*#__PURE__*/React.forwardRef(function Card(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiCard'
   });

package/modern/CardActionArea/CardActionArea.js

@@ -4,11 +4,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import cardActionAreaClasses, { getCardActionAreaUtilityClass } from './cardActionAreaClasses';
 import ButtonBase from '../ButtonBase';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiCardActionArea');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -63,7 +63,7 @@ const CardActionAreaFocusHighlight = styled('span', {
   })
 }));
 const CardActionArea = /*#__PURE__*/React.forwardRef(function CardActionArea(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiCardActionArea'
   });

package/modern/CardActions/CardActions.js

@@ -4,10 +4,10 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import { getCardActionsUtilityClass } from './cardActionsClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiCardActions');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -43,7 +43,7 @@ const CardActionsRoot = styled('div', {
   }]
 });
 const CardActions = /*#__PURE__*/React.forwardRef(function CardActions(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiCardActions'
   });

package/modern/CardContent/CardContent.js

@@ -4,10 +4,10 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import { getCardContentUtilityClass } from './cardContentClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiCardContent');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -28,7 +28,7 @@ const CardContentRoot = styled('div', {
   }
 });
 const CardContent = /*#__PURE__*/React.forwardRef(function CardContent(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiCardContent'
   });

package/modern/CardHeader/CardHeader.js

@@ -5,10 +5,10 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import Typography from '../Typography';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import cardHeaderClasses, { getCardHeaderUtilityClass } from './cardHeaderClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiCardHeader');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -64,7 +64,7 @@ const CardHeaderContent = styled('div', {
   flex: '1 1 auto'
 });
 const CardHeader = /*#__PURE__*/React.forwardRef(function CardHeader(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiCardHeader'
   });

package/modern/CardMedia/CardMedia.js

@@ -5,10 +5,10 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import { getCardMediaUtilityClass } from './cardMediaClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiCardMedia');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -57,7 +57,7 @@ const CardMediaRoot = styled('div', {
 const MEDIA_COMPONENTS = ['video', 'audio', 'picture', 'iframe', 'img'];
 const IMAGE_COMPONENTS = ['picture', 'img'];
 const CardMedia = /*#__PURE__*/React.forwardRef(function CardMedia(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiCardMedia'
   });

package/modern/Checkbox/Checkbox.js

@@ -13,9 +13,9 @@ import IndeterminateCheckBoxIcon from '../internal/svg-icons/IndeterminateCheckB
 import capitalize from '../utils/capitalize';
 import rootShouldForwardProp from '../styles/rootShouldForwardProp';
 import checkboxClasses, { getCheckboxUtilityClass } from './checkboxClasses';
-import { createUseThemeProps, styled } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiCheckbox');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -98,7 +98,7 @@ const defaultCheckedIcon = /*#__PURE__*/_jsx(CheckBoxIcon, {});
 const defaultIcon = /*#__PURE__*/_jsx(CheckBoxOutlineBlankIcon, {});
 const defaultIndeterminateIcon = /*#__PURE__*/_jsx(IndeterminateCheckBoxIcon, {});
 const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiCheckbox'
   });

package/modern/Chip/Chip.js

@@ -10,10 +10,10 @@ import useForkRef from '../utils/useForkRef';
 import unsupportedProp from '../utils/unsupportedProp';
 import capitalize from '../utils/capitalize';
 import ButtonBase from '../ButtonBase';
-import { styled, createUseThemeProps } from '../zero-styled';
+import { styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import chipClasses, { getChipUtilityClass } from './chipClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiChip');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -346,7 +346,7 @@ function isDeleteKeyboardEvent(keyboardEvent) {
  * Chips represent complex entities in small blocks, such as a contact.
  */
 const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiChip'
   });

package/modern/CircularProgress/CircularProgress.js

@@ -5,11 +5,11 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
-import { keyframes, css, createUseThemeProps, styled } from '../zero-styled';
+import { keyframes, css, styled } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import capitalize from '../utils/capitalize';
 import { getCircularProgressUtilityClass } from './circularProgressClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiCircularProgress');
 const SIZE = 44;
 const circularRotateKeyframe = keyframes`
   0% {
@@ -151,7 +151,7 @@ const CircularProgressCircle = styled('circle', {
  * attribute to `true` on that region until it has finished loading.
  */
 const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiCircularProgress'
   });

package/modern/Collapse/Collapse.js

@@ -7,13 +7,13 @@ import { Transition } from 'react-transition-group';
 import useTimeout from '@mui/utils/useTimeout';
 import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps, useTheme } from '../zero-styled';
+import { styled, useTheme } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import { duration } from '../styles/createTransitions';
 import { getTransitionProps } from '../transitions/utils';
 import { useForkRef } from '../utils';
 import { getCollapseUtilityClass } from './collapseClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiCollapse');
 const useUtilityClasses = ownerState => {
   const {
     orientation,
@@ -118,7 +118,7 @@ const CollapseWrapperInner = styled('div', {
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiCollapse'
   });

package/modern/CssBaseline/CssBaseline.js

@@ -2,9 +2,12 @@
 
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import useThemeProps from '../styles/useThemeProps';
-import GlobalStyles from '../GlobalStyles';
+import { globalCss } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
+
+// to determine if the global styles are static or dynamic
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const isDynamicSupport = typeof globalCss({}) === 'function';
 export const html = (theme, enableColorScheme) => ({
   WebkitFontSmoothing: 'antialiased',
   // Antialiasing.
@@ -33,9 +36,20 @@ export const styles = (theme, enableColorScheme = false) => {
   const colorSchemeStyles = {};
   if (enableColorScheme && theme.colorSchemes) {
     Object.entries(theme.colorSchemes).forEach(([key, scheme]) => {
-      colorSchemeStyles[theme.getColorSchemeSelector(key).replace(/\s*&/, '')] = {
-        colorScheme: scheme.palette?.mode
-      };
+      const selector = theme.getColorSchemeSelector(key);
+      if (selector.startsWith('@')) {
+        // for @media (prefers-color-scheme), we need to target :root
+        colorSchemeStyles[selector] = {
+          ':root': {
+            colorScheme: scheme.palette?.mode
+          }
+        };
+      } else {
+        // else, it's likely that the selector already target an element with a class or data attribute
+        colorSchemeStyles[selector.replace(/\s*&/, '')] = {
+          colorScheme: scheme.palette?.mode
+        };
+      }
     });
   }
   let defaultStyles = {
@@ -65,11 +79,50 @@ export const styles = (theme, enableColorScheme = false) => {
   return defaultStyles;
 };
 
+// `ecs` stands for enableColorScheme. This is internal logic to make it work with Pigment CSS, so shorter is better.
+const SELECTOR = 'mui-ecs';
+const staticStyles = theme => {
+  const result = styles(theme, false);
+  const baseStyles = Array.isArray(result) ? result[0] : result;
+  if (!theme.vars && baseStyles) {
+    baseStyles.html[`:root:has(${SELECTOR})`] = {
+      colorScheme: theme.palette.mode
+    };
+  }
+  if (theme.colorSchemes) {
+    Object.entries(theme.colorSchemes).forEach(([key, scheme]) => {
+      const selector = theme.getColorSchemeSelector(key);
+      if (selector.startsWith('@')) {
+        // for @media (prefers-color-scheme), we need to target :root
+        baseStyles[selector] = {
+          [`:root:not(:has(.${SELECTOR}))`]: {
+            colorScheme: scheme.palette?.mode
+          }
+        };
+      } else {
+        // else, it's likely that the selector already target an element with a class or data attribute
+        baseStyles[selector.replace(/\s*&/, '')] = {
+          [`&:not(:has(.${SELECTOR}))`]: {
+            colorScheme: scheme.palette?.mode
+          }
+        };
+      }
+    });
+  }
+  return result;
+};
+const GlobalStyles = globalCss(isDynamicSupport ? ({
+  theme,
+  enableColorScheme
+}) => styles(theme, enableColorScheme) : ({
+  theme
+}) => staticStyles(theme));
+
 /**
  * Kickstart an elegant, consistent, and simple baseline to build upon.
  */
 function CssBaseline(inProps) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiCssBaseline'
   });
@@ -78,8 +131,13 @@ function CssBaseline(inProps) {
     enableColorScheme = false
   } = props;
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx(GlobalStyles, {
-      styles: theme => styles(theme, enableColorScheme)
+    children: [isDynamicSupport && /*#__PURE__*/_jsx(GlobalStyles, {
+      enableColorScheme: enableColorScheme
+    }), !isDynamicSupport && !enableColorScheme && /*#__PURE__*/_jsx("span", {
+      className: SELECTOR,
+      style: {
+        display: 'none'
+      }
     }), children]
   });
 }