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

package/node/Card/Card.js

@@ -12,12 +12,12 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _Paper = _interopRequireDefault(require("../Paper"));
 var _cardClasses = require("./cardClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiCard');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -35,7 +35,7 @@ const CardRoot = (0, _zeroStyled.styled)(_Paper.default, {
   overflow: 'hidden'
 });
 const Card = /*#__PURE__*/React.forwardRef(function Card(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiCard'
   });

package/node/CardActionArea/CardActionArea.js

@@ -11,12 +11,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _cardActionAreaClasses = _interopRequireWildcard(require("./cardActionAreaClasses"));
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiCardActionArea');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -71,7 +71,7 @@ const CardActionAreaFocusHighlight = (0, _zeroStyled.styled)('span', {
   })
 }));
 const CardActionArea = /*#__PURE__*/React.forwardRef(function CardActionArea(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiCardActionArea'
   });

package/node/CardActions/CardActions.js

@@ -11,11 +11,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _cardActionsClasses = require("./cardActionsClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiCardActions');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -51,7 +51,7 @@ const CardActionsRoot = (0, _zeroStyled.styled)('div', {
   }]
 });
 const CardActions = /*#__PURE__*/React.forwardRef(function CardActions(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiCardActions'
   });

package/node/CardContent/CardContent.js

@@ -11,11 +11,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _cardContentClasses = require("./cardContentClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiCardContent');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -36,7 +36,7 @@ const CardContentRoot = (0, _zeroStyled.styled)('div', {
   }
 });
 const CardContent = /*#__PURE__*/React.forwardRef(function CardContent(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiCardContent'
   });

package/node/CardHeader/CardHeader.js

@@ -12,11 +12,11 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _Typography = _interopRequireDefault(require("../Typography"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _cardHeaderClasses = _interopRequireWildcard(require("./cardHeaderClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiCardHeader');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -72,7 +72,7 @@ const CardHeaderContent = (0, _zeroStyled.styled)('div', {
   flex: '1 1 auto'
 });
 const CardHeader = /*#__PURE__*/React.forwardRef(function CardHeader(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiCardHeader'
   });

package/node/CardMedia/CardMedia.js

@@ -12,11 +12,11 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _cardMediaClasses = require("./cardMediaClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiCardMedia');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -65,7 +65,7 @@ const CardMediaRoot = (0, _zeroStyled.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 = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiCardMedia'
   });

package/node/Checkbox/Checkbox.js

@@ -20,10 +20,10 @@ var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _checkboxClasses = _interopRequireWildcard(require("./checkboxClasses"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiCheckbox');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -107,7 +107,7 @@ const defaultIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckBoxOutlineBlank.defa
 const defaultIndeterminateIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_IndeterminateCheckBox.default, {});
 const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
   var _icon$props$fontSize, _indeterminateIcon$pr;
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiCheckbox'
   });

package/node/Chip/Chip.js

@@ -17,11 +17,11 @@ var _unsupportedProp = _interopRequireDefault(require("../utils/unsupportedProp"
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _chipClasses = _interopRequireWildcard(require("./chipClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiChip');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -354,7 +354,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 = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiChip'
   });
@@ -404,8 +404,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/node/CircularProgress/CircularProgress.js

@@ -12,12 +12,12 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _circularProgressClasses = require("./circularProgressClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiCircularProgress');
 const SIZE = 44;
 const circularRotateKeyframe = (0, _zeroStyled.keyframes)`
   0% {
@@ -159,7 +159,7 @@ const CircularProgressCircle = (0, _zeroStyled.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 = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiCircularProgress'
   });

package/node/Collapse/Collapse.js

@@ -14,15 +14,14 @@ var _useTimeout = _interopRequireDefault(require("@mui/utils/useTimeout"));
 var _elementTypeAcceptingRef = _interopRequireDefault(require("@mui/utils/elementTypeAcceptingRef"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _createTransitions = require("../styles/createTransitions");
 var _utils = require("../transitions/utils");
-var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _utils2 = require("../utils");
 var _collapseClasses = require("./collapseClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiCollapse');
 const useUtilityClasses = ownerState => {
   const {
     orientation,
@@ -127,7 +126,7 @@ const CollapseWrapperInner = (0, _zeroStyled.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 = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiCollapse'
   });
@@ -158,7 +157,7 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
     collapsedSize: collapsedSizeProp
   };
   const classes = useUtilityClasses(ownerState);
-  const theme = (0, _useTheme.default)();
+  const theme = (0, _zeroStyled.useTheme)();
   const timer = (0, _useTimeout.default)();
   const wrapperRef = React.useRef(null);
   const autoTransitionDuration = React.useRef();

package/node/CssBaseline/CssBaseline.js

@@ -8,11 +8,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.styles = exports.html = exports.default = exports.body = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-var _GlobalStyles = _interopRequireDefault(require("../GlobalStyles"));
+var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// to determine if the global styles are static or dynamic
+const isDynamicSupport = typeof (0, _zeroStyled.globalCss)({}) === 'function';
 const html = (theme, enableColorScheme) => ({
   WebkitFontSmoothing: 'antialiased',
   // Antialiasing.
@@ -44,10 +46,22 @@ const styles = (theme, enableColorScheme = false) => {
   const colorSchemeStyles = {};
   if (enableColorScheme && theme.colorSchemes) {
     Object.entries(theme.colorSchemes).forEach(([key, scheme]) => {
-      var _scheme$palette;
-      colorSchemeStyles[theme.getColorSchemeSelector(key).replace(/\s*&/, '')] = {
-        colorScheme: (_scheme$palette = scheme.palette) == null ? void 0 : _scheme$palette.mode
-      };
+      const selector = theme.getColorSchemeSelector(key);
+      if (selector.startsWith('@')) {
+        var _scheme$palette;
+        // for @media (prefers-color-scheme), we need to target :root
+        colorSchemeStyles[selector] = {
+          ':root': {
+            colorScheme: (_scheme$palette = scheme.palette) == null ? void 0 : _scheme$palette.mode
+          }
+        };
+      } else {
+        var _scheme$palette2;
+        // else, it's likely that the selector already target an element with a class or data attribute
+        colorSchemeStyles[selector.replace(/\s*&/, '')] = {
+          colorScheme: (_scheme$palette2 = scheme.palette) == null ? void 0 : _scheme$palette2.mode
+        };
+      }
     });
   }
   let defaultStyles = {
@@ -77,12 +91,53 @@ 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.
+exports.styles = styles;
+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('@')) {
+        var _scheme$palette3;
+        // for @media (prefers-color-scheme), we need to target :root
+        baseStyles[selector] = {
+          [`:root:not(:has(.${SELECTOR}))`]: {
+            colorScheme: (_scheme$palette3 = scheme.palette) == null ? void 0 : _scheme$palette3.mode
+          }
+        };
+      } else {
+        var _scheme$palette4;
+        // 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$palette4 = scheme.palette) == null ? void 0 : _scheme$palette4.mode
+          }
+        };
+      }
+    });
+  }
+  return result;
+};
+const GlobalStyles = (0, _zeroStyled.globalCss)(isDynamicSupport ? ({
+  theme,
+  enableColorScheme
+}) => styles(theme, enableColorScheme) : ({
+  theme
+}) => staticStyles(theme));
+
 /**
  * Kickstart an elegant, consistent, and simple baseline to build upon.
  */
-exports.styles = styles;
 function CssBaseline(inProps) {
-  const props = (0, _useThemeProps.default)({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiCssBaseline'
   });
@@ -91,8 +146,13 @@ function CssBaseline(inProps) {
     enableColorScheme = false
   } = props;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GlobalStyles.default, {
-      styles: theme => styles(theme, enableColorScheme)
+    children: [isDynamicSupport && /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStyles, {
+      enableColorScheme: enableColorScheme
+    }), !isDynamicSupport && !enableColorScheme && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: SELECTOR,
+      style: {
+        display: 'none'
+      }
     }), children]
   });
 }

package/node/DefaultPropsProvider/DefaultPropsProvider.js

@@ -0,0 +1,38 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.useDefaultProps = useDefaultProps;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _DefaultPropsProvider = _interopRequireWildcard(require("@mui/system/DefaultPropsProvider"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function DefaultPropsProvider(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DefaultPropsProvider.default, {
+    ...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.default.node,
+  /**
+   * @ignore
+   */
+  value: _propTypes.default.object.isRequired
+} : void 0;
+var _default = exports.default = DefaultPropsProvider;
+function useDefaultProps(params) {
+  return (0, _DefaultPropsProvider.useDefaultProps)(params);
+}

package/node/DefaultPropsProvider/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _DefaultPropsProvider.default;
+  }
+});
+Object.defineProperty(exports, "useDefaultProps", {
+  enumerable: true,
+  get: function () {
+    return _DefaultPropsProvider.useDefaultProps;
+  }
+});
+var _DefaultPropsProvider = _interopRequireWildcard(require("./DefaultPropsProvider"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/node/Dialog/Dialog.js

@@ -18,12 +18,11 @@ var _Paper = _interopRequireDefault(require("../Paper"));
 var _dialogClasses = _interopRequireWildcard(require("./dialogClasses"));
 var _DialogContext = _interopRequireDefault(require("./DialogContext"));
 var _Backdrop = _interopRequireDefault(require("../Backdrop"));
-var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiDialog');
 const DialogBackdrop = (0, _zeroStyled.styled)(_Backdrop.default, {
   name: 'MuiDialog',
   slot: 'Backdrop',
@@ -114,8 +113,6 @@ const DialogPaper = (0, _zeroStyled.styled)(_Paper.default, {
 }) => ({
   margin: 32,
   position: 'relative',
-  overflowY: 'auto',
-  // Fix IE11 issue, to remove at some point.
   '@media print': {
     overflowY: 'visible',
     boxShadow: 'none'
@@ -136,7 +133,7 @@ const DialogPaper = (0, _zeroStyled.styled)(_Paper.default, {
     style: {
       display: 'inline-block',
       verticalAlign: 'middle',
-      textAlign: 'left' // 'initial' doesn't work on IE11
+      textAlign: 'initial'
     }
   }, {
     props: ({
@@ -199,11 +196,11 @@ const DialogPaper = (0, _zeroStyled.styled)(_Paper.default, {
  * Dialogs are overlaid modal paper based components with a backdrop.
  */
 const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiDialog'
   });
-  const theme = (0, _useTheme.default)();
+  const theme = (0, _zeroStyled.useTheme)();
   const defaultTransitionDuration = {
     enter: theme.transitions.duration.enteringScreen,
     exit: theme.transitions.duration.leavingScreen

package/node/DialogActions/DialogActions.js

@@ -11,11 +11,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _dialogActionsClasses = require("./dialogActionsClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiDialogActions');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -53,7 +53,7 @@ const DialogActionsRoot = (0, _zeroStyled.styled)('div', {
   }]
 });
 const DialogActions = /*#__PURE__*/React.forwardRef(function DialogActions(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiDialogActions'
   });

package/node/DialogContent/DialogContent.js

@@ -11,12 +11,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _dialogContentClasses = require("./dialogContentClasses");
 var _dialogTitleClasses = _interopRequireDefault(require("../DialogTitle/dialogTitleClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiDialogContent');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -65,7 +65,7 @@ const DialogContentRoot = (0, _zeroStyled.styled)('div', {
   }]
 }));
 const DialogContent = /*#__PURE__*/React.forwardRef(function DialogContent(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiDialogContent'
   });

package/node/DialogContentText/DialogContentText.js

@@ -12,12 +12,12 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _Typography = _interopRequireDefault(require("../Typography"));
 var _dialogContentTextClasses = require("./dialogContentTextClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiDialogContentText');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -39,7 +39,7 @@ const DialogContentTextRoot = (0, _zeroStyled.styled)(_Typography.default, {
   overridesResolver: (props, styles) => styles.root
 })({});
 const DialogContentText = /*#__PURE__*/React.forwardRef(function DialogContentText(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiDialogContentText'
   });

package/node/DialogTitle/DialogTitle.js

@@ -12,12 +12,12 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _Typography = _interopRequireDefault(require("../Typography"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _dialogTitleClasses = require("./dialogTitleClasses");
 var _DialogContext = _interopRequireDefault(require("../Dialog/DialogContext"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiDialogTitle');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -36,7 +36,7 @@ const DialogTitleRoot = (0, _zeroStyled.styled)(_Typography.default, {
   flex: '0 0 auto'
 });
 const DialogTitle = /*#__PURE__*/React.forwardRef(function DialogTitle(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiDialogTitle'
   });

package/node/Divider/Divider.js

@@ -12,11 +12,11 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _colorManipulator = require("@mui/system/colorManipulator");
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _dividerClasses = require("./dividerClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiDivider');
 const useUtilityClasses = ownerState => {
   const {
     absolute,
@@ -199,7 +199,7 @@ const DividerWrapper = (0, _zeroStyled.styled)('span', {
   }]
 }));
 const Divider = /*#__PURE__*/React.forwardRef(function Divider(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiDivider'
   });