@mui/material 5.15.13 → 6.0.0-alpha.0

package/node/internal/svg-icons/RadioButtonUnchecked.js

@@ -10,7 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _createSvgIcon = _interopRequireDefault(require("../../utils/createSvgIcon"));
 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 && Object.prototype.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 _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; }
 /**
  * @ignore - internal component.
  */

package/node/internal/svg-icons/ReportProblemOutlined.js

@@ -10,7 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _createSvgIcon = _interopRequireDefault(require("../../utils/createSvgIcon"));
 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 && Object.prototype.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 _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; }
 /**
  * @ignore - internal component.
  */

package/node/internal/svg-icons/Star.js

@@ -10,7 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _createSvgIcon = _interopRequireDefault(require("../../utils/createSvgIcon"));
 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 && Object.prototype.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 _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; }
 /**
  * @ignore - internal component.
  */

package/node/internal/svg-icons/StarBorder.js

@@ -10,7 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _createSvgIcon = _interopRequireDefault(require("../../utils/createSvgIcon"));
 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 && Object.prototype.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 _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; }
 /**
  * @ignore - internal component.
  */

package/node/internal/svg-icons/SuccessOutlined.js

@@ -10,7 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _createSvgIcon = _interopRequireDefault(require("../../utils/createSvgIcon"));
 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 && Object.prototype.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 _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; }
 /**
  * @ignore - internal component.
  */

package/node/internal/svg-icons/Warning.js

@@ -10,7 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _createSvgIcon = _interopRequireDefault(require("../../utils/createSvgIcon"));
 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 && Object.prototype.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 _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; }
 /**
  * @ignore - internal component.
  */

package/node/styles/CssVarsProvider.js

@@ -14,7 +14,6 @@ var _system = require("@mui/system");
 var _styleFunctionSx = _interopRequireDefault(require("@mui/system/styleFunctionSx"));
 var _experimental_extendTheme = _interopRequireDefault(require("./experimental_extendTheme"));
 var _createTypography = _interopRequireDefault(require("./createTypography"));
-var _excludeVariablesFromRoot = _interopRequireDefault(require("./excludeVariablesFromRoot"));
 var _identifier = _interopRequireDefault(require("./identifier"));
 const defaultTheme = (0, _experimental_extendTheme.default)();
 const {
@@ -42,8 +41,7 @@ const {
       });
     };
     return newTheme;
-  },
-  excludeVariablesFromRoot: _excludeVariablesFromRoot.default
+  }
 });
 exports.getInitColorSchemeScript = getInitColorSchemeScript;
 exports.useColorScheme = useColorScheme;

package/node/styles/ThemeProvider.js

@@ -15,7 +15,7 @@ var _identifier = _interopRequireDefault(require("./identifier"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["theme"];
 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 && Object.prototype.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 _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 ThemeProvider(_ref) {
   let {
       theme: themeInput

package/node/styles/createGetSelector.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _excludeVariablesFromRoot = _interopRequireDefault(require("./excludeVariablesFromRoot"));
+var _default = theme => (colorScheme, css) => {
+  if (theme.defaultColorScheme === colorScheme) {
+    if (colorScheme === 'dark') {
+      const excludedVariables = {};
+      (0, _excludeVariablesFromRoot.default)(theme.cssVarPrefix).forEach(cssVar => {
+        excludedVariables[cssVar] = css[cssVar];
+        delete css[cssVar];
+      });
+      return {
+        [`[${theme.attribute}="${String(colorScheme)}"]`]: excludedVariables,
+        [theme.colorSchemeSelector]: css
+      };
+    }
+    return `${theme.colorSchemeSelector}, [${theme.attribute}="${String(colorScheme)}"]`;
+  }
+  if (colorScheme) {
+    return `[${theme.attribute}="${String(colorScheme)}"]`;
+  }
+  return theme.colorSchemeSelector;
+};
+exports.default = _default;

package/node/styles/createTheme.js

@@ -21,7 +21,7 @@ var _createTransitions = _interopRequireDefault(require("./createTransitions"));
 var _zIndex = _interopRequireDefault(require("./zIndex"));
 const _excluded = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 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 && Object.prototype.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 _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 createTheme(options = {}, ...args) {
   const {
       mixins: mixinsInput = {},

package/node/styles/experimental_extendTheme.js

@@ -15,10 +15,11 @@ var _colorManipulator = require("@mui/system/colorManipulator");
 var _shouldSkipGeneratingVar = _interopRequireDefault(require("./shouldSkipGeneratingVar"));
 var _createTheme = _interopRequireDefault(require("./createTheme"));
 var _getOverlayAlpha = _interopRequireDefault(require("./getOverlayAlpha"));
-const _excluded = ["colorSchemes", "cssVarPrefix", "shouldSkipGeneratingVar"],
+var _createGetSelector = _interopRequireDefault(require("./createGetSelector"));
+const _excluded = ["colorSchemes", "cssVarPrefix", "shouldSkipGeneratingVar", "getSelector"],
   _excluded2 = ["palette"];
 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 && Object.prototype.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 _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 defaultDarkOverlays = [...Array(25)].map((_, index) => {
   if (index === 0) {
     return undefined;
@@ -48,7 +49,7 @@ function setColorChannel(obj, key) {
   if (!(`${key}Channel` in obj)) {
     // custom channel token is not provided, generate one.
     // if channel token can't be generated, show a warning.
-    obj[`${key}Channel`] = (0, _colorManipulator.private_safeColorChannel)(toRgb(obj[key]), `MUI: Can't create \`palette.${key}Channel\` because \`palette.${key}\` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` + '\n' + `To suppress this warning, you need to explicitly provide the \`palette.${key}Channel\` as a string (in rgb format, e.g. "12 12 12") or undefined if you want to remove the channel token.`);
+    obj[`${key}Channel`] = (0, _colorManipulator.private_safeColorChannel)(toRgb(obj[key]), `MUI: Can't create \`palette.${key}Channel\` because \`palette.${key}\` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` + '\n' + `To suppress this warning, you need to explicitly provide the \`palette.${key}Channel\` as a string (in rgb format, for example "12 12 12") or undefined if you want to remove the channel token.`);
   }
 }
 const silent = fn => {
@@ -66,7 +67,8 @@ function extendTheme(options = {}, ...args) {
   const {
       colorSchemes: colorSchemesInput = {},
       cssVarPrefix = 'mui',
-      shouldSkipGeneratingVar = _shouldSkipGeneratingVar.default
+      shouldSkipGeneratingVar = _shouldSkipGeneratingVar.default,
+      getSelector
     } = options,
     input = (0, _objectWithoutPropertiesLoose2.default)(options, _excluded);
   const getCssVar = createGetCssVar(cssVarPrefix);
@@ -84,7 +86,9 @@ function extendTheme(options = {}, ...args) {
       mode: 'dark'
     }, (_colorSchemesInput$da = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da.palette)
   });
-  let theme = (0, _extends2.default)({}, muiTheme, {
+  let theme = (0, _extends2.default)({
+    defaultColorScheme: 'light'
+  }, muiTheme, {
     cssVarPrefix,
     getCssVar,
     colorSchemes: (0, _extends2.default)({}, colorSchemesInput, {
@@ -301,14 +305,23 @@ function extendTheme(options = {}, ...args) {
   theme = args.reduce((acc, argument) => (0, _deepmerge.default)(acc, argument), theme);
   const parserConfig = {
     prefix: cssVarPrefix,
-    shouldSkipGeneratingVar
+    shouldSkipGeneratingVar,
+    getSelector: getSelector || (0, _createGetSelector.default)(theme)
   };
   const {
-    vars: themeVars,
-    generateCssVars
+    vars,
+    generateThemeVars,
+    generateStyleSheets
   } = (0, _system.unstable_prepareCssVars)(theme, parserConfig);
-  theme.vars = themeVars;
-  theme.generateCssVars = generateCssVars;
+  theme.attribute = 'data-mui-color-scheme';
+  theme.colorSchemeSelector = ':root';
+  theme.vars = vars;
+  Object.entries(theme.colorSchemes[theme.defaultColorScheme]).forEach(([key, value]) => {
+    theme[key] = value;
+  });
+  theme.generateThemeVars = generateThemeVars;
+  theme.generateStyleSheets = generateStyleSheets;
+  theme.getColorSchemeSelector = colorScheme => `[${theme.attribute}="${colorScheme}"] &`;
   theme.shouldSkipGeneratingVar = shouldSkipGeneratingVar;
   theme.unstable_sxConfig = (0, _extends2.default)({}, _styleFunctionSx.unstable_defaultSxConfig, input == null ? void 0 : input.unstable_sxConfig);
   theme.unstable_sx = function sx(props) {

package/node/styles/index.js

@@ -318,7 +318,7 @@ var _createTypography = _interopRequireDefault(require("./createTypography"));
 var _createMixins = _interopRequireDefault(require("./createMixins"));
 var _excludeVariablesFromRoot = _interopRequireDefault(require("./excludeVariablesFromRoot"));
 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 && Object.prototype.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 _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; }
 // TODO: Remove this function in v6.
 // eslint-disable-next-line @typescript-eslint/naming-convention
 function experimental_sx() {

package/node/styles/rootShouldForwardProp.js

@@ -0,0 +1,10 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slotShouldForwardProp = _interopRequireDefault(require("./slotShouldForwardProp"));
+const rootShouldForwardProp = prop => (0, _slotShouldForwardProp.default)(prop) && prop !== 'classes';
+var _default = exports.default = rootShouldForwardProp;

package/node/styles/slotShouldForwardProp.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// copied from @mui/system/createStyled
+function slotShouldForwardProp(prop) {
+  return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
+}
+var _default = exports.default = slotShouldForwardProp;

package/node/styles/styled.js

@@ -5,18 +5,27 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.slotShouldForwardProp = exports.rootShouldForwardProp = exports.default = void 0;
-var _createStyled = _interopRequireWildcard(require("@mui/system/createStyled"));
+exports.default = void 0;
+Object.defineProperty(exports, "rootShouldForwardProp", {
+  enumerable: true,
+  get: function () {
+    return _rootShouldForwardProp.default;
+  }
+});
+Object.defineProperty(exports, "slotShouldForwardProp", {
+  enumerable: true,
+  get: function () {
+    return _slotShouldForwardProp.default;
+  }
+});
+var _createStyled = _interopRequireDefault(require("@mui/system/createStyled"));
 var _defaultTheme = _interopRequireDefault(require("./defaultTheme"));
 var _identifier = _interopRequireDefault(require("./identifier"));
-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 && Object.prototype.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 rootShouldForwardProp = prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'classes';
-exports.rootShouldForwardProp = rootShouldForwardProp;
-const slotShouldForwardProp = exports.slotShouldForwardProp = _createStyled.shouldForwardProp;
+var _rootShouldForwardProp = _interopRequireDefault(require("./rootShouldForwardProp"));
+var _slotShouldForwardProp = _interopRequireDefault(require("./slotShouldForwardProp"));
 const styled = (0, _createStyled.default)({
   themeId: _identifier.default,
   defaultTheme: _defaultTheme.default,
-  rootShouldForwardProp
+  rootShouldForwardProp: _rootShouldForwardProp.default
 });
 var _default = exports.default = styled;

package/node/styles/useTheme.js

@@ -11,7 +11,7 @@ var _system = require("@mui/system");
 var _defaultTheme = _interopRequireDefault(require("./defaultTheme"));
 var _identifier = _interopRequireDefault(require("./identifier"));
 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 && Object.prototype.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 _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 useTheme() {
   const theme = (0, _system.useTheme)(_defaultTheme.default);
   if (process.env.NODE_ENV !== 'production') {

package/node/useAutocomplete/index.js

@@ -18,4 +18,4 @@ Object.defineProperty(exports, "default", {
 });
 var _useAutocomplete = _interopRequireWildcard(require("./useAutocomplete"));
 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 && Object.prototype.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 _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/usePagination/usePagination.js

@@ -67,7 +67,7 @@ function usePagination(props = {}) {
   endPages.length > 0 ? endPages[0] - 2 : count - 1);
 
   // Basic list of items to render
-  // e.g. itemList = ['first', 'previous', 1, 'ellipsis', 4, 5, 6, 'ellipsis', 10, 'next', 'last']
+  // for example itemList = ['first', 'previous', 1, 'ellipsis', 4, 5, 6, 'ellipsis', 10, 'next', 'last']
   const itemList = [...(showFirstButton ? ['first'] : []), ...(hidePrevButton ? [] : ['previous']), ...startPages,
   // Start ellipsis
   // eslint-disable-next-line no-nested-ternary

package/node/useScrollTrigger/useScrollTrigger.js

@@ -11,7 +11,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 const _excluded = ["getTrigger", "target"];
 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 && Object.prototype.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 _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 defaultTrigger(store, options) {
   const {
     disableHysteresis = false,

package/node/useTouchRipple/useTouchRipple.js

@@ -8,7 +8,7 @@ exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _utils = require("../utils");
 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 && Object.prototype.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 _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 useTouchRipple = props => {
   const {
     disabled,

package/node/utils/createSvgIcon.js

@@ -11,7 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _SvgIcon = _interopRequireDefault(require("../SvgIcon"));
 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 && Object.prototype.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 _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; }
 /**
  * Private module reserved for @mui packages.
  */function createSvgIcon(path, displayName) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.15.13",
+  "version": "6.0.0-alpha.0",
   "private": false,
   "author": "MUI Team",
   "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.",
@@ -34,11 +34,11 @@
     "prop-types": "^15.8.1",
     "react-is": "^18.2.0",
     "react-transition-group": "^4.4.5",
-    "@mui/base": "5.0.0-beta.39",
-    "@mui/types": "^7.2.13",
-    "@mui/system": "^5.15.13",
-    "@mui/utils": "^5.15.13",
-    "@mui/core-downloads-tracker": "^5.15.13"
+    "@mui/system": "^6.0.0-alpha.0",
+    "@mui/utils": "^5.15.14",
+    "@mui/types": "^7.2.14",
+    "@mui/base": "5.0.0-beta.41",
+    "@mui/core-downloads-tracker": "^6.0.0-alpha.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

package/styles/CssVarsProvider.js

@@ -8,7 +8,6 @@ import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/sy
 import styleFunctionSx from '@mui/system/styleFunctionSx';
 import experimental_extendTheme from './experimental_extendTheme';
 import createTypography from './createTypography';
-import excludeVariablesFromRoot from './excludeVariablesFromRoot';
 import THEME_ID from './identifier';
 const defaultTheme = experimental_extendTheme();
 const {
@@ -36,7 +35,6 @@ const {
       });
     };
     return newTheme;
-  },
-  excludeVariablesFromRoot
+  }
 });
 export { useColorScheme, getInitColorSchemeScript, CssVarsProvider as Experimental_CssVarsProvider };

package/styles/createGetSelector.d.ts

@@ -0,0 +1,10 @@
+declare const _default: <T extends {
+    attribute: string;
+    colorSchemeSelector: string;
+    colorSchemes?: Record<string, any> | undefined;
+    defaultColorScheme?: string | undefined;
+    cssVarPrefix?: string | undefined;
+}>(theme: T) => (colorScheme: keyof T['colorSchemes'] | undefined, css: Record<string, any>) => string | {
+    [x: string]: Record<string, any>;
+};
+export default _default;

package/styles/createGetSelector.js

@@ -0,0 +1,21 @@
+import excludeVariablesFromRoot from './excludeVariablesFromRoot';
+export default (theme => (colorScheme, css) => {
+  if (theme.defaultColorScheme === colorScheme) {
+    if (colorScheme === 'dark') {
+      const excludedVariables = {};
+      excludeVariablesFromRoot(theme.cssVarPrefix).forEach(cssVar => {
+        excludedVariables[cssVar] = css[cssVar];
+        delete css[cssVar];
+      });
+      return {
+        [`[${theme.attribute}="${String(colorScheme)}"]`]: excludedVariables,
+        [theme.colorSchemeSelector]: css
+      };
+    }
+    return `${theme.colorSchemeSelector}, [${theme.attribute}="${String(colorScheme)}"]`;
+  }
+  if (colorScheme) {
+    return `[${theme.attribute}="${String(colorScheme)}"]`;
+  }
+  return theme.colorSchemeSelector;
+});

package/styles/createTheme.js

@@ -67,7 +67,7 @@ Please use another name.` : _formatMuiErrorMessage(18));
       }
     });
   }
-  muiTheme.unstable_sxConfig = _extends({}, defaultSxConfig, other == null ? void 0 : other.unstable_sxConfig);
+  muiTheme.unstable_sxConfig = _extends({}, defaultSxConfig, other?.unstable_sxConfig);
   muiTheme.unstable_sx = function sx(props) {
     return styleFunctionSx({
       sx: props,

package/styles/excludeVariablesFromRoot.d.ts

@@ -1,5 +1,5 @@
 /**
  * @internal These variables should not appear in the :root stylesheet when the `defaultMode="dark"`
  */
-declare const excludeVariablesFromRoot: (cssVarPrefix: string) => string[];
+declare const excludeVariablesFromRoot: (cssVarPrefix?: string) => string[];
 export default excludeVariablesFromRoot;

package/styles/experimental_extendTheme.d.ts

@@ -289,6 +289,26 @@ export interface CssVarsThemeOptions extends Omit<ThemeOptions, 'palette' | 'com
    * Color schemes configuration
    */
   colorSchemes?: Partial<Record<SupportedColorScheme, ColorSystemOptions>>;
+  /**
+   * If provided, it will be used to create a selector for the color scheme.
+   * This is useful if you want to use class or data-* attributes to apply the color scheme.
+   *
+   * The callback receives the colorScheme with the possible values of:
+   * - undefined: the selector for tokens that are not color scheme dependent
+   * - string: the selector for the color scheme
+   *
+   * @example
+   * // class selector
+   * (colorScheme) => colorScheme !== 'light' ? `.theme-${colorScheme}` : ":root"
+   *
+   * @example
+   * // data-* attribute selector
+   * (colorScheme) => colorScheme !== 'light' ? `[data-theme="${colorScheme}"`] : ":root"
+   */
+  getSelector?: (
+    colorScheme: SupportedColorScheme | undefined,
+    css: Record<string, any>,
+  ) => string | Record<string, any>;
   /**
    * A function to determine if the key, value should be attached as CSS Variable
    * `keys` is an array that represents the object path keys.
@@ -409,10 +429,8 @@ export interface CssVarsTheme extends ColorSystem {
   vars: ThemeVars;
   getCssVar: (field: ThemeCssVar, ...vars: ThemeCssVar[]) => string;
   getColorSchemeSelector: (colorScheme: SupportedColorScheme) => string;
-  generateCssVars: (colorScheme?: SupportedColorScheme) => {
-    css: Record<string, string | number>;
-    vars: ThemeVars;
-  };
+  generateThemeVars: () => ThemeVars;
+  generateStyleSheets: () => Array<Record<string, any>>;
 
   // Default theme tokens
   spacing: Theme['spacing'];
@@ -446,4 +464,4 @@ export interface CssVarsTheme extends ColorSystem {
 export default function experimental_extendTheme(
   options?: CssVarsThemeOptions,
   ...args: object[]
-): Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme;
+): Omit<Theme, 'applyStyles'> & CssVarsTheme;