@mui/material 6.0.0-alpha.9 → 6.0.0-beta.1

package/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/Checkbox/Checkbox.d.ts

@@ -107,12 +107,12 @@ export interface CheckboxProps
  *
  * Demos:
  *
- * - [Checkbox](https://mui.com/material-ui/react-checkbox/)
- * - [Transfer List](https://mui.com/material-ui/react-transfer-list/)
+ * - [Checkbox](https://next.mui.com/material-ui/react-checkbox/)
+ * - [Transfer List](https://next.mui.com/material-ui/react-transfer-list/)
  *
  * API:
  *
- * - [Checkbox API](https://mui.com/material-ui/api/checkbox/)
- * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
+ * - [Checkbox API](https://next.mui.com/material-ui/api/checkbox/)
+ * - inherits [ButtonBase API](https://next.mui.com/material-ui/api/button-base/)
  */
 export default function Checkbox(props: CheckboxProps): React.JSX.Element;

package/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/Chip/Chip.d.ts

@@ -15,7 +15,7 @@ export interface ChipOwnProps {
   /**
    * The Avatar element to display.
    */
-  avatar?: React.ReactElement<any>;
+  avatar?: React.ReactElement<unknown>;
   /**
    * This prop isn't supported.
    * Use the `component` prop if you need to change the children structure.
@@ -47,7 +47,7 @@ export interface ChipOwnProps {
   /**
    * Override the default delete icon element. Shown only if `onDelete` is set.
    */
-  deleteIcon?: React.ReactElement<any>;
+  deleteIcon?: React.ReactElement<unknown>;
   /**
    * If `true`, the component is disabled.
    * @default false
@@ -56,7 +56,7 @@ export interface ChipOwnProps {
   /**
    * Icon element.
    */
-  icon?: React.ReactElement<any>;
+  icon?: React.ReactElement<unknown>;
   /**
    * The content of the component.
    */
@@ -105,11 +105,11 @@ export interface ChipTypeMap<
  *
  * Demos:
  *
- * - [Chip](https://mui.com/material-ui/react-chip/)
+ * - [Chip](https://next.mui.com/material-ui/react-chip/)
  *
  * API:
  *
- * - [Chip API](https://mui.com/material-ui/api/chip/)
+ * - [Chip API](https://next.mui.com/material-ui/api/chip/)
  */
 declare const Chip: OverridableComponent<ChipTypeMap>;
 

package/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'
   });
@@ -396,8 +396,6 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
     if (event.currentTarget === event.target) {
       if (onDelete && isDeleteKeyboardEvent(event)) {
         onDelete(event);
-      } else if (event.key === 'Escape' && chipRef.current) {
-        chipRef.current.blur();
       }
     }
     if (onKeyUp) {

package/CircularProgress/CircularProgress.d.ts

@@ -67,10 +67,10 @@ export interface CircularProgressProps
  *
  * Demos:
  *
- * - [Progress](https://mui.com/material-ui/react-progress/)
+ * - [Progress](https://next.mui.com/material-ui/react-progress/)
  *
  * API:
  *
- * - [CircularProgress API](https://mui.com/material-ui/api/circular-progress/)
+ * - [CircularProgress API](https://next.mui.com/material-ui/api/circular-progress/)
  */
 export default function CircularProgress(props: CircularProgressProps): React.JSX.Element;

package/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/ClickAwayListener/ClickAwayListener.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+type ClickAwayMouseEventHandler = 'onClick' | 'onMouseDown' | 'onMouseUp' | 'onPointerDown' | 'onPointerUp';
+type ClickAwayTouchEventHandler = 'onTouchStart' | 'onTouchEnd';
+export interface ClickAwayListenerProps {
+    /**
+     * The wrapped element.
+     */
+    children: React.ReactElement<any>;
+    /**
+     * If `true`, the React tree is ignored and only the DOM tree is considered.
+     * This prop changes how portaled elements are handled.
+     * @default false
+     */
+    disableReactTree?: boolean;
+    /**
+     * The mouse event to listen to. You can disable the listener by providing `false`.
+     * @default 'onClick'
+     */
+    mouseEvent?: ClickAwayMouseEventHandler | false;
+    /**
+     * Callback fired when a "click away" event is detected.
+     */
+    onClickAway: (event: MouseEvent | TouchEvent) => void;
+    /**
+     * The touch event to listen to. You can disable the listener by providing `false`.
+     * @default 'onTouchEnd'
+     */
+    touchEvent?: ClickAwayTouchEventHandler | false;
+}
+/**
+ * Listen for click events that occur somewhere in the document, outside of the element itself.
+ * For instance, if you need to hide a menu when people click anywhere else on your page.
+ *
+ * Demos:
+ *
+ * - [Click-Away Listener](https://next.mui.com/material-ui/react-click-away-listener/)
+ * - [Menu](https://next.mui.com/material-ui/react-menu/)
+ *
+ * API:
+ *
+ * - [ClickAwayListener API](https://next.mui.com/material-ui/api/click-away-listener/)
+ */
+declare function ClickAwayListener(props: ClickAwayListenerProps): React.JSX.Element;
+declare namespace ClickAwayListener {
+    var propTypes: any;
+}
+export { ClickAwayListener };

package/ClickAwayListener/ClickAwayListener.js

@@ -0,0 +1,178 @@
+'use client';
+
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { elementAcceptingRef, exactProp, unstable_ownerDocument as ownerDocument, unstable_useForkRef as useForkRef, unstable_useEventCallback as useEventCallback } from '@mui/utils';
+
+// TODO: return `EventHandlerName extends `on${infer EventName}` ? Lowercase<EventName> : never` once generatePropTypes runs with TS 4.1
+import { jsx as _jsx } from "react/jsx-runtime";
+function mapEventPropToEvent(eventProp) {
+  return eventProp.substring(2).toLowerCase();
+}
+function clickedRootScrollbar(event, doc) {
+  return doc.documentElement.clientWidth < event.clientX || doc.documentElement.clientHeight < event.clientY;
+}
+/**
+ * Listen for click events that occur somewhere in the document, outside of the element itself.
+ * For instance, if you need to hide a menu when people click anywhere else on your page.
+ *
+ * Demos:
+ *
+ * - [Click-Away Listener](https://next.mui.com/material-ui/react-click-away-listener/)
+ * - [Menu](https://next.mui.com/material-ui/react-menu/)
+ *
+ * API:
+ *
+ * - [ClickAwayListener API](https://next.mui.com/material-ui/api/click-away-listener/)
+ */
+function ClickAwayListener(props) {
+  const {
+    children,
+    disableReactTree = false,
+    mouseEvent = 'onClick',
+    onClickAway,
+    touchEvent = 'onTouchEnd'
+  } = props;
+  const movedRef = React.useRef(false);
+  const nodeRef = React.useRef(null);
+  const activatedRef = React.useRef(false);
+  const syntheticEventRef = React.useRef(false);
+  React.useEffect(() => {
+    // Ensure that this component is not "activated" synchronously.
+    // https://github.com/facebook/react/issues/20074
+    setTimeout(() => {
+      activatedRef.current = true;
+    }, 0);
+    return () => {
+      activatedRef.current = false;
+    };
+  }, []);
+  const handleRef = useForkRef(
+  // @ts-expect-error TODO upstream fix
+  children.ref, nodeRef);
+
+  // The handler doesn't take event.defaultPrevented into account:
+  //
+  // event.preventDefault() is meant to stop default behaviors like
+  // clicking a checkbox to check it, hitting a button to submit a form,
+  // and hitting left arrow to move the cursor in a text input etc.
+  // Only special HTML elements have these default behaviors.
+  const handleClickAway = useEventCallback(event => {
+    // Given developers can stop the propagation of the synthetic event,
+    // we can only be confident with a positive value.
+    const insideReactTree = syntheticEventRef.current;
+    syntheticEventRef.current = false;
+    const doc = ownerDocument(nodeRef.current);
+
+    // 1. IE11 support, which trigger the handleClickAway even after the unbind
+    // 2. The child might render null.
+    // 3. Behave like a blur listener.
+    if (!activatedRef.current || !nodeRef.current || 'clientX' in event && clickedRootScrollbar(event, doc)) {
+      return;
+    }
+
+    // Do not act if user performed touchmove
+    if (movedRef.current) {
+      movedRef.current = false;
+      return;
+    }
+    let insideDOM;
+
+    // If not enough, can use https://github.com/DieterHolvoet/event-propagation-path/blob/master/propagationPath.js
+    if (event.composedPath) {
+      insideDOM = event.composedPath().indexOf(nodeRef.current) > -1;
+    } else {
+      insideDOM = !doc.documentElement.contains(
+      // @ts-expect-error returns `false` as intended when not dispatched from a Node
+      event.target) || nodeRef.current.contains(
+      // @ts-expect-error returns `false` as intended when not dispatched from a Node
+      event.target);
+    }
+    if (!insideDOM && (disableReactTree || !insideReactTree)) {
+      onClickAway(event);
+    }
+  });
+
+  // Keep track of mouse/touch events that bubbled up through the portal.
+  const createHandleSynthetic = handlerName => event => {
+    syntheticEventRef.current = true;
+    const childrenPropsHandler = children.props[handlerName];
+    if (childrenPropsHandler) {
+      childrenPropsHandler(event);
+    }
+  };
+  const childrenProps = {
+    ref: handleRef
+  };
+  if (touchEvent !== false) {
+    childrenProps[touchEvent] = createHandleSynthetic(touchEvent);
+  }
+  React.useEffect(() => {
+    if (touchEvent !== false) {
+      const mappedTouchEvent = mapEventPropToEvent(touchEvent);
+      const doc = ownerDocument(nodeRef.current);
+      const handleTouchMove = () => {
+        movedRef.current = true;
+      };
+      doc.addEventListener(mappedTouchEvent, handleClickAway);
+      doc.addEventListener('touchmove', handleTouchMove);
+      return () => {
+        doc.removeEventListener(mappedTouchEvent, handleClickAway);
+        doc.removeEventListener('touchmove', handleTouchMove);
+      };
+    }
+    return undefined;
+  }, [handleClickAway, touchEvent]);
+  if (mouseEvent !== false) {
+    childrenProps[mouseEvent] = createHandleSynthetic(mouseEvent);
+  }
+  React.useEffect(() => {
+    if (mouseEvent !== false) {
+      const mappedMouseEvent = mapEventPropToEvent(mouseEvent);
+      const doc = ownerDocument(nodeRef.current);
+      doc.addEventListener(mappedMouseEvent, handleClickAway);
+      return () => {
+        doc.removeEventListener(mappedMouseEvent, handleClickAway);
+      };
+    }
+    return undefined;
+  }, [handleClickAway, mouseEvent]);
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: /*#__PURE__*/React.cloneElement(children, childrenProps)
+  });
+}
+process.env.NODE_ENV !== "production" ? ClickAwayListener.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The wrapped element.
+   */
+  children: elementAcceptingRef.isRequired,
+  /**
+   * If `true`, the React tree is ignored and only the DOM tree is considered.
+   * This prop changes how portaled elements are handled.
+   * @default false
+   */
+  disableReactTree: PropTypes.bool,
+  /**
+   * The mouse event to listen to. You can disable the listener by providing `false`.
+   * @default 'onClick'
+   */
+  mouseEvent: PropTypes.oneOf(['onClick', 'onMouseDown', 'onMouseUp', 'onPointerDown', 'onPointerUp', false]),
+  /**
+   * Callback fired when a "click away" event is detected.
+   */
+  onClickAway: PropTypes.func.isRequired,
+  /**
+   * The touch event to listen to. You can disable the listener by providing `false`.
+   * @default 'onTouchEnd'
+   */
+  touchEvent: PropTypes.oneOf(['onTouchEnd', 'onTouchStart', false])
+} : void 0;
+if (process.env.NODE_ENV !== 'production') {
+  // eslint-disable-next-line
+  ClickAwayListener['propTypes' + ''] = exactProp(ClickAwayListener.propTypes);
+}
+export { ClickAwayListener };

package/ClickAwayListener/index.d.ts

@@ -1,2 +1,2 @@
-export { ClickAwayListener as default } from '@mui/base/ClickAwayListener';
-export type { ClickAwayListenerProps } from '@mui/base/ClickAwayListener';
+export { ClickAwayListener as default } from './ClickAwayListener';
+export type { ClickAwayListenerProps } from './ClickAwayListener';

package/ClickAwayListener/index.js

@@ -1 +1 @@
-export { ClickAwayListener as default } from '@mui/base/ClickAwayListener';
+export { ClickAwayListener as default } from './ClickAwayListener';

package/Collapse/Collapse.d.ts

@@ -54,18 +54,18 @@ export interface CollapseProps extends StandardProps<TransitionProps, 'timeout'>
 
 /**
  * The Collapse transition is used by the
- * [Vertical Stepper](https://mui.com/material-ui/react-stepper/#vertical-stepper) StepContent component.
+ * [Vertical Stepper](https://next.mui.com/material-ui/react-stepper/#vertical-stepper) StepContent component.
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  *
  * Demos:
  *
- * - [Card](https://mui.com/material-ui/react-card/)
- * - [Lists](https://mui.com/material-ui/react-list/)
- * - [Transitions](https://mui.com/material-ui/transitions/)
+ * - [Card](https://next.mui.com/material-ui/react-card/)
+ * - [Lists](https://next.mui.com/material-ui/react-list/)
+ * - [Transitions](https://next.mui.com/material-ui/transitions/)
  *
  * API:
  *
- * - [Collapse API](https://mui.com/material-ui/api/collapse/)
+ * - [Collapse API](https://next.mui.com/material-ui/api/collapse/)
  * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition/#Transition-props)
  */
 

package/Collapse/Collapse.js

@@ -7,14 +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 } from '../zero-styled';
+import { styled, useTheme } from '../zero-styled';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import { duration } from '../styles/createTransitions';
 import { getTransitionProps } from '../transitions/utils';
-import useTheme from '../styles/useTheme';
 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,
@@ -119,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/Container/Container.d.ts

@@ -47,11 +47,11 @@ export interface ContainerTypeMap<
  *
  * Demos:
  *
- * - [Container](https://mui.com/material-ui/react-container/)
+ * - [Container](https://next.mui.com/material-ui/react-container/)
  *
  * API:
  *
- * - [Container API](https://mui.com/material-ui/api/container/)
+ * - [Container API](https://next.mui.com/material-ui/api/container/)
  */
 declare const Container: OverridableComponent<ContainerTypeMap>;
 

package/CssBaseline/CssBaseline.d.ts

@@ -20,10 +20,10 @@ export interface CssBaselineProps extends StyledComponentProps<never> {
  *
  * Demos:
  *
- * - [CSS Baseline](https://mui.com/material-ui/react-css-baseline/)
+ * - [CSS Baseline](https://next.mui.com/material-ui/react-css-baseline/)
  *
  * API:
  *
- * - [CssBaseline API](https://mui.com/material-ui/api/css-baseline/)
+ * - [CssBaseline API](https://next.mui.com/material-ui/api/css-baseline/)
  */
 export default function CssBaseline(props: CssBaselineProps): React.JSX.Element;

package/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]
   });
 }

package/DefaultPropsProvider/DefaultPropsProvider.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { ComponentsPropsList } from '../styles/props';
+declare function DefaultPropsProvider(props: React.PropsWithChildren<{
+    value: {
+        [P in keyof ComponentsPropsList]?: Partial<ComponentsPropsList[P]>;
+    };
+}>): React.JSX.Element;
+declare namespace DefaultPropsProvider {
+    var propTypes: any;
+}
+export default DefaultPropsProvider;
+export declare function useDefaultProps<Props extends Record<string, any>>(params: {
+    props: Props;
+    name: string;
+}): Props;

package/DefaultPropsProvider/DefaultPropsProvider.js

@@ -0,0 +1,29 @@
+'use client';
+
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import SystemDefaultPropsProvider, { useDefaultProps as useSystemDefaultProps } from '@mui/system/DefaultPropsProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+function DefaultPropsProvider(props) {
+  return /*#__PURE__*/_jsx(SystemDefaultPropsProvider, {
+    ...props
+  });
+}
+process.env.NODE_ENV !== "production" ? DefaultPropsProvider.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * @ignore
+   */
+  value: PropTypes.object.isRequired
+} : void 0;
+export default DefaultPropsProvider;
+export function useDefaultProps(params) {
+  return useSystemDefaultProps(params);
+}

package/DefaultPropsProvider/index.d.ts

@@ -0,0 +1 @@
+export { default, useDefaultProps } from './DefaultPropsProvider';

package/DefaultPropsProvider/index.js

@@ -0,0 +1 @@
+export { default, useDefaultProps } from './DefaultPropsProvider';

package/DefaultPropsProvider/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/DefaultPropsProvider/index.js",
+  "types": "./index.d.ts"
+}