@mui/system 5.2.2 → 5.2.6

package/esm/cssVars/createCssVarsProvider.js

@@ -7,15 +7,20 @@ const _excluded = ["colorSchemes"],
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GlobalStyles } from '@mui/styled-engine';
-import { deepmerge } from '@mui/utils';
+import { deepmerge, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import createSpacing from '../createTheme/createSpacing';
+import createBreakpoints from '../createTheme/createBreakpoints';
 import cssVarsParser from './cssVarsParser';
 import ThemeProvider from '../ThemeProvider';
 import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
 import useCurrentColorScheme from './useCurrentColorScheme';
+import createGetThemeVar from './createGetThemeVar';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
 export default function createCssVarsProvider(options) {
+  var _baseTheme$breakpoint;
+
   const {
     theme: baseTheme = {},
     defaultMode: desisgnSystemMode = 'light',
@@ -25,6 +30,8 @@ export default function createCssVarsProvider(options) {
     prefix: designSystemPrefix = '',
     shouldSkipGeneratingVar
   } = options;
+  const systemSpacing = createSpacing(baseTheme.spacing);
+  const systemBreakpoints = createBreakpoints((_baseTheme$breakpoint = baseTheme.breakpoints) != null ? _baseTheme$breakpoint : {});
 
   if (!baseTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !baseTheme.colorSchemes[designSystemColorScheme] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.dark]) {
     console.error(`MUI: \`${designSystemColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
@@ -51,17 +58,21 @@ export default function createCssVarsProvider(options) {
     defaultMode = desisgnSystemMode,
     defaultColorScheme = designSystemColorScheme
   }) {
+    // make sure that baseTheme is always independent of each <CssVarsProvider /> call.
+    // JSON.parse(JSON.stringify(...)) is okay to be used as long as the baseTheme is a plain object.
+    const clonedBaseTheme = React.useMemo(() => JSON.parse(JSON.stringify(baseTheme)), []);
+
     const {
       colorSchemes: baseColorSchemes = {}
-    } = baseTheme,
-          restBaseTheme = _objectWithoutPropertiesLoose(baseTheme, _excluded);
+    } = clonedBaseTheme,
+          restBaseTheme = _objectWithoutPropertiesLoose(clonedBaseTheme, _excluded);
 
     const {
       colorSchemes: colorSchemesProp = {}
     } = themeProp,
           restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded2);
 
-    const hasMounted = React.useRef(null); // eslint-disable-next-line prefer-const
+    const hasMounted = React.useRef(false); // eslint-disable-next-line prefer-const
 
     let _deepmerge = deepmerge(restBaseTheme, restThemeProp),
         {
@@ -114,7 +125,10 @@ export default function createCssVarsProvider(options) {
     mergedTheme = _extends({}, mergedTheme, colorSchemes[resolvedColorScheme], {
       components,
       colorSchemes,
-      vars: rootVars
+      vars: rootVars,
+      spacing: themeProp.spacing ? createSpacing(themeProp.spacing) : systemSpacing,
+      breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints,
+      getThemeVar: createGetThemeVar(prefix)
     });
     const styleSheet = {};
     Object.entries(colorSchemes).forEach(([key, scheme]) => {
@@ -148,10 +162,11 @@ export default function createCssVarsProvider(options) {
     });
     React.useEffect(() => {
       if (colorScheme) {
-        document.body.setAttribute(attribute, colorScheme);
+        // attaches attribute to <html> because the css variables are attached to :root (html)
+        document.documentElement.setAttribute(attribute, colorScheme);
       }
     }, [colorScheme, attribute]);
-    React.useEffect(() => {
+    useEnhancedEffect(() => {
       if (!mode || !enableColorScheme) {
         return undefined;
       }
@@ -190,6 +205,9 @@ export default function createCssVarsProvider(options) {
     }, [colorScheme]);
     React.useEffect(() => {
       hasMounted.current = true;
+      return () => {
+        hasMounted.current = false;
+      };
     }, []);
     return /*#__PURE__*/_jsxs(ColorSchemeContext.Provider, {
       value: {

package/esm/cssVars/createGetThemeVar.js

@@ -0,0 +1,15 @@
+export default function createGetThemeVar(prefix = '') {
+  function appendVar(...vars) {
+    if (!vars.length) {
+      return '';
+    }
+
+    return `, var(--${prefix ? `${prefix}-` : ''}${vars[0]}${appendVar(...vars.slice(1))})`;
+  }
+
+  const getThemeVar = (field, ...vars) => {
+    return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...vars)})`;
+  };
+
+  return getThemeVar;
+}

package/esm/cssVars/cssVarsParser.js

@@ -1,5 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-
 /**
  * This function create an object from keys, value and then assign to target
  *
@@ -45,14 +43,16 @@ export const assignNestedKeys = (obj, keys, value) => {
  * // ['palette', 'primary', 'main'] '#000000'
  */
 
-export const walkObjectDeep = (obj, callback) => {
+export const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
   function recurse(object, parentKeys = []) {
     Object.entries(object).forEach(([key, value]) => {
-      if (value !== undefined && value !== null) {
-        if (typeof value === 'object' && Object.keys(value).length > 0) {
-          recurse(value, [...parentKeys, key]);
-        } else {
-          callback([...parentKeys, key], value, object);
+      if (!shouldSkipPaths || shouldSkipPaths && !shouldSkipPaths([...parentKeys, key])) {
+        if (value !== undefined && value !== null) {
+          if (typeof value === 'object' && Object.keys(value).length > 0) {
+            recurse(value, [...parentKeys, key]);
+          } else {
+            callback([...parentKeys, key], value, object);
+          }
         }
       }
     });
@@ -102,10 +102,6 @@ const getCssValue = (keys, value) => {
 
 
 export default function cssVarsParser(theme, options) {
-  const clonedTheme = _extends({}, theme);
-
-  delete clonedTheme.vars; // remove 'vars' from the structure
-
   const {
     prefix,
     basePrefix = '',
@@ -113,13 +109,18 @@ export default function cssVarsParser(theme, options) {
   } = options || {};
   const css = {};
   const vars = {};
-  walkObjectDeep(clonedTheme, (keys, val, scope) => {
+  walkObjectDeep(theme, (keys, val, scope) => {
     if (typeof val === 'string' || typeof val === 'number') {
       let value = val;
 
       if (typeof value === 'string' && value.startsWith('var')) {
         // replace the value of the `scope` object with the prefix or remove basePrefix from the value
-        value = prefix ? value.replace(basePrefix, prefix) : value.replace(`${basePrefix}-`, ''); // scope is the deepest object in the tree, keys is the theme path keys
+        if (!basePrefix && prefix) {
+          value = value.replace(/var\(--/g, `var(--${prefix}-`);
+        } else {
+          value = prefix ? value.replace(new RegExp(basePrefix, 'g'), prefix) : value.replace(new RegExp(`${basePrefix}-`, 'g'), '');
+        } // scope is the deepest object in the tree, keys is the theme path keys
+
 
         scope[keys.slice(-1)[0]] = value;
       }
@@ -133,7 +134,8 @@ export default function cssVarsParser(theme, options) {
         assignNestedKeys(vars, keys, `var(${cssVar})`);
       }
     }
-  });
+  }, keys => keys[0] === 'vars' // skip 'vars/*' paths
+  );
   return {
     css,
     vars

package/esm/cssVars/getInitColorSchemeScript.js

@@ -34,7 +34,7 @@ export default function getInitColorSchemeScript(options) {
           colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
         }
         if (colorScheme) {
-          document.body.setAttribute('${attribute}', colorScheme);
+          document.documentElement.setAttribute('${attribute}', colorScheme);
         }
       } catch (e) {} })();`
     }

package/esm/index.js

@@ -38,4 +38,5 @@ export { default as useTheme } from './useTheme';
 export { default as useThemeWithoutDefault } from './useThemeWithoutDefault';
 export * from './colorManipulator';
 export { default as ThemeProvider } from './ThemeProvider';
-export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider';
+export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider';
+export { default as unstable_createGetThemeVar } from './cssVars/createGetThemeVar';

package/esm/useThemeProps/getThemeProps.js

@@ -1,6 +1,4 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-
-/* eslint-disable no-restricted-syntax */
+import { internal_resolveProps as resolveProps } from '@mui/utils';
 export default function getThemeProps(params) {
   const {
     theme,
@@ -12,18 +10,5 @@ export default function getThemeProps(params) {
     return props;
   }
 
-  const output = _extends({}, props); // Resolve default props, code borrow from React source.
-  // https://github.com/facebook/react/blob/15a8f031838a553e41c0b66eb1bcf1da8448104d/packages/react/src/ReactElement.js#L221
-
-
-  const defaultProps = theme.components[name].defaultProps;
-  let propName;
-
-  for (propName in defaultProps) {
-    if (output[propName] === undefined) {
-      output[propName] = defaultProps[propName];
-    }
-  }
-
-  return output;
+  return resolveProps(theme.components[name].defaultProps, props);
 }

package/index.d.ts

@@ -161,4 +161,5 @@ export { default as ThemeProvider } from './ThemeProvider';
 export * from './ThemeProvider';
 
 export { default as unstable_createCssVarsProvider } from './cssVars';
+export { default as unstable_createGetThemeVar } from './cssVars/createGetThemeVar';
 export * from './cssVars';

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.2.2
+/** @license MUI v5.2.6
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -49,7 +49,8 @@ var _exportNames = {
   useTheme: true,
   useThemeWithoutDefault: true,
   ThemeProvider: true,
-  unstable_createCssVarsProvider: true
+  unstable_createCssVarsProvider: true,
+  unstable_createGetThemeVar: true
 };
 Object.defineProperty(exports, "Box", {
   enumerable: true,
@@ -243,6 +244,12 @@ Object.defineProperty(exports, "unstable_createCssVarsProvider", {
     return _createCssVarsProvider.default;
   }
 });
+Object.defineProperty(exports, "unstable_createGetThemeVar", {
+  enumerable: true,
+  get: function () {
+    return _createGetThemeVar.default;
+  }
+});
 Object.defineProperty(exports, "unstable_extendSxProp", {
   enumerable: true,
   get: function () {
@@ -468,6 +475,8 @@ var _ThemeProvider = _interopRequireDefault(require("./ThemeProvider"));
 
 var _createCssVarsProvider = _interopRequireDefault(require("./cssVars/createCssVarsProvider"));
 
+var _createGetThemeVar = _interopRequireDefault(require("./cssVars/createGetThemeVar"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/legacy/createTheme/createBreakpoints.js

@@ -49,6 +49,21 @@ export default function createBreakpoints(breakpoints) {
     return up(key);
   }
 
+  function not(key) {
+    // handle first and last key separately, for better readability
+    var keyIndex = keys.indexOf(key);
+
+    if (keyIndex === 0) {
+      return up(keys[1]);
+    }
+
+    if (keyIndex === keys.length - 1) {
+      return down(keys[keyIndex]);
+    }
+
+    return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
+  }
+
   return _extends({
     keys: keys,
     values: values,
@@ -56,6 +71,7 @@ export default function createBreakpoints(breakpoints) {
     down: down,
     between: between,
     only: only,
+    not: not,
     unit: unit
   }, other);
 }

package/legacy/cssVars/createCssVarsProvider.js

@@ -6,15 +6,20 @@ import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GlobalStyles } from '@mui/styled-engine';
-import { deepmerge } from '@mui/utils';
+import { deepmerge, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import createSpacing from '../createTheme/createSpacing';
+import createBreakpoints from '../createTheme/createBreakpoints';
 import cssVarsParser from './cssVarsParser';
 import ThemeProvider from '../ThemeProvider';
 import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
 import useCurrentColorScheme from './useCurrentColorScheme';
+import createGetThemeVar from './createGetThemeVar';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
 export default function createCssVarsProvider(options) {
+  var _baseTheme$breakpoint;
+
   var _options$theme = options.theme,
       baseTheme = _options$theme === void 0 ? {} : _options$theme,
       _options$defaultMode = options.defaultMode,
@@ -27,6 +32,8 @@ export default function createCssVarsProvider(options) {
       _options$prefix = options.prefix,
       designSystemPrefix = _options$prefix === void 0 ? '' : _options$prefix,
       shouldSkipGeneratingVar = options.shouldSkipGeneratingVar;
+  var systemSpacing = createSpacing(baseTheme.spacing);
+  var systemBreakpoints = createBreakpoints((_baseTheme$breakpoint = baseTheme.breakpoints) != null ? _baseTheme$breakpoint : {});
 
   if (!baseTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !baseTheme.colorSchemes[designSystemColorScheme] || _typeof(designSystemColorScheme) === 'object' && !baseTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || _typeof(designSystemColorScheme) === 'object' && !baseTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.dark]) {
     console.error("MUI: `".concat(designSystemColorScheme, "` does not exist in `theme.colorSchemes`."));
@@ -58,16 +65,21 @@ export default function createCssVarsProvider(options) {
         defaultMode = _ref$defaultMode === void 0 ? desisgnSystemMode : _ref$defaultMode,
         _ref$defaultColorSche = _ref.defaultColorScheme,
         defaultColorScheme = _ref$defaultColorSche === void 0 ? designSystemColorScheme : _ref$defaultColorSche;
+    // make sure that baseTheme is always independent of each <CssVarsProvider /> call.
+    // JSON.parse(JSON.stringify(...)) is okay to be used as long as the baseTheme is a plain object.
+    var clonedBaseTheme = React.useMemo(function () {
+      return JSON.parse(JSON.stringify(baseTheme));
+    }, []);
 
-    var _baseTheme$colorSchem = baseTheme.colorSchemes,
-        baseColorSchemes = _baseTheme$colorSchem === void 0 ? {} : _baseTheme$colorSchem,
-        restBaseTheme = _objectWithoutProperties(baseTheme, ["colorSchemes"]);
+    var _clonedBaseTheme$colo = clonedBaseTheme.colorSchemes,
+        baseColorSchemes = _clonedBaseTheme$colo === void 0 ? {} : _clonedBaseTheme$colo,
+        restBaseTheme = _objectWithoutProperties(clonedBaseTheme, ["colorSchemes"]);
 
     var _themeProp$colorSchem = themeProp.colorSchemes,
         colorSchemesProp = _themeProp$colorSchem === void 0 ? {} : _themeProp$colorSchem,
         restThemeProp = _objectWithoutProperties(themeProp, ["colorSchemes"]);
 
-    var hasMounted = React.useRef(null); // eslint-disable-next-line prefer-const
+    var hasMounted = React.useRef(false); // eslint-disable-next-line prefer-const
 
     var _deepmerge = deepmerge(restBaseTheme, restThemeProp),
         _deepmerge$components = _deepmerge.components,
@@ -119,7 +131,10 @@ export default function createCssVarsProvider(options) {
     mergedTheme = _extends({}, mergedTheme, colorSchemes[resolvedColorScheme], {
       components: components,
       colorSchemes: colorSchemes,
-      vars: rootVars
+      vars: rootVars,
+      spacing: themeProp.spacing ? createSpacing(themeProp.spacing) : systemSpacing,
+      breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints,
+      getThemeVar: createGetThemeVar(prefix)
     });
     var styleSheet = {};
     Object.entries(colorSchemes).forEach(function (_ref2) {
@@ -157,10 +172,11 @@ export default function createCssVarsProvider(options) {
     });
     React.useEffect(function () {
       if (colorScheme) {
-        document.body.setAttribute(attribute, colorScheme);
+        // attaches attribute to <html> because the css variables are attached to :root (html)
+        document.documentElement.setAttribute(attribute, colorScheme);
       }
     }, [colorScheme, attribute]);
-    React.useEffect(function () {
+    useEnhancedEffect(function () {
       if (!mode || !enableColorScheme) {
         return undefined;
       }
@@ -201,6 +217,9 @@ export default function createCssVarsProvider(options) {
     }, [colorScheme]);
     React.useEffect(function () {
       hasMounted.current = true;
+      return function () {
+        hasMounted.current = false;
+      };
     }, []);
     return /*#__PURE__*/_jsxs(ColorSchemeContext.Provider, {
       value: {

package/legacy/cssVars/createGetThemeVar.js

@@ -0,0 +1,26 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+export default function createGetThemeVar() {
+  var prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+
+  function appendVar() {
+    for (var _len = arguments.length, vars = new Array(_len), _key = 0; _key < _len; _key++) {
+      vars[_key] = arguments[_key];
+    }
+
+    if (!vars.length) {
+      return '';
+    }
+
+    return ", var(--".concat(prefix ? "".concat(prefix, "-") : '').concat(vars[0]).concat(appendVar.apply(void 0, _toConsumableArray(vars.slice(1))), ")");
+  }
+
+  var getThemeVar = function getThemeVar(field) {
+    for (var _len2 = arguments.length, vars = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+      vars[_key2 - 1] = arguments[_key2];
+    }
+
+    return "var(--".concat(prefix ? "".concat(prefix, "-") : '').concat(field).concat(appendVar.apply(void 0, vars), ")");
+  };
+
+  return getThemeVar;
+}

package/legacy/cssVars/cssVarsParser.js

@@ -49,7 +49,7 @@ export var assignNestedKeys = function assignNestedKeys(obj, keys, value) {
  * // ['palette', 'primary', 'main'] '#000000'
  */
 
-export var walkObjectDeep = function walkObjectDeep(obj, callback) {
+export var walkObjectDeep = function walkObjectDeep(obj, callback, shouldSkipPaths) {
   function recurse(object) {
     var parentKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
     Object.entries(object).forEach(function (_ref) {
@@ -57,11 +57,13 @@ export var walkObjectDeep = function walkObjectDeep(obj, callback) {
           key = _ref2[0],
           value = _ref2[1];
 
-      if (value !== undefined && value !== null) {
-        if (_typeof(value) === 'object' && Object.keys(value).length > 0) {
-          recurse(value, [].concat(_toConsumableArray(parentKeys), [key]));
-        } else {
-          callback([].concat(_toConsumableArray(parentKeys), [key]), value, object);
+      if (!shouldSkipPaths || shouldSkipPaths && !shouldSkipPaths([].concat(_toConsumableArray(parentKeys), [key]))) {
+        if (value !== undefined && value !== null) {
+          if (_typeof(value) === 'object' && Object.keys(value).length > 0) {
+            recurse(value, [].concat(_toConsumableArray(parentKeys), [key]));
+          } else {
+            callback([].concat(_toConsumableArray(parentKeys), [key]), value, object);
+          }
         }
       }
     });
@@ -113,10 +115,6 @@ var getCssValue = function getCssValue(keys, value) {
 
 
 export default function cssVarsParser(theme, options) {
-  var clonedTheme = _extends({}, theme);
-
-  delete clonedTheme.vars; // remove 'vars' from the structure
-
   var _ref3 = options || {},
       prefix = _ref3.prefix,
       _ref3$basePrefix = _ref3.basePrefix,
@@ -125,13 +123,18 @@ export default function cssVarsParser(theme, options) {
 
   var css = {};
   var vars = {};
-  walkObjectDeep(clonedTheme, function (keys, val, scope) {
+  walkObjectDeep(theme, function (keys, val, scope) {
     if (typeof val === 'string' || typeof val === 'number') {
       var _value = val;
 
       if (typeof _value === 'string' && _value.startsWith('var')) {
         // replace the value of the `scope` object with the prefix or remove basePrefix from the value
-        _value = prefix ? _value.replace(basePrefix, prefix) : _value.replace("".concat(basePrefix, "-"), ''); // scope is the deepest object in the tree, keys is the theme path keys
+        if (!basePrefix && prefix) {
+          _value = _value.replace(/var\(--/g, "var(--".concat(prefix, "-"));
+        } else {
+          _value = prefix ? _value.replace(new RegExp(basePrefix, 'g'), prefix) : _value.replace(new RegExp("".concat(basePrefix, "-"), 'g'), '');
+        } // scope is the deepest object in the tree, keys is the theme path keys
+
 
         scope[keys.slice(-1)[0]] = _value;
       }
@@ -145,7 +148,10 @@ export default function cssVarsParser(theme, options) {
         assignNestedKeys(vars, keys, "var(".concat(cssVar, ")"));
       }
     }
-  });
+  }, function (keys) {
+    return keys[0] === 'vars';
+  } // skip 'vars/*' paths
+  );
   return {
     css: css,
     vars: vars

package/legacy/cssVars/getInitColorSchemeScript.js

@@ -20,7 +20,7 @@ export default function getInitColorSchemeScript(options) {
   return /*#__PURE__*/_jsx("script", {
     // eslint-disable-next-line react/no-danger
     dangerouslySetInnerHTML: {
-      __html: "(function() { try {\n        var mode = localStorage.getItem('".concat(modeStorageKey, "');\n        var colorScheme = '';\n        if (mode === 'system' || (!mode && !!").concat(enableSystem, ")) {\n          // handle system mode\n          var mql = window.matchMedia('(prefers-color-scheme: dark)');\n          if (mql.matches) {\n            colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-dark') || '").concat(defaultDarkColorScheme, "';\n          } else {\n            colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-light') || '").concat(defaultLightColorScheme, "';\n          }\n        }\n        if (mode === 'light') {\n          colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-light') || '").concat(defaultLightColorScheme, "';\n        }\n        if (mode === 'dark') {\n          colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-dark') || '").concat(defaultDarkColorScheme, "';\n        }\n        if (colorScheme) {\n          document.body.setAttribute('").concat(attribute, "', colorScheme);\n        }\n      } catch (e) {} })();")
+      __html: "(function() { try {\n        var mode = localStorage.getItem('".concat(modeStorageKey, "');\n        var colorScheme = '';\n        if (mode === 'system' || (!mode && !!").concat(enableSystem, ")) {\n          // handle system mode\n          var mql = window.matchMedia('(prefers-color-scheme: dark)');\n          if (mql.matches) {\n            colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-dark') || '").concat(defaultDarkColorScheme, "';\n          } else {\n            colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-light') || '").concat(defaultLightColorScheme, "';\n          }\n        }\n        if (mode === 'light') {\n          colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-light') || '").concat(defaultLightColorScheme, "';\n        }\n        if (mode === 'dark') {\n          colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-dark') || '").concat(defaultDarkColorScheme, "';\n        }\n        if (colorScheme) {\n          document.documentElement.setAttribute('").concat(attribute, "', colorScheme);\n        }\n      } catch (e) {} })();")
     }
   });
 }

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.2.2
+/** @license MUI v5.2.6
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -43,4 +43,5 @@ export { default as useTheme } from './useTheme';
 export { default as useThemeWithoutDefault } from './useThemeWithoutDefault';
 export * from './colorManipulator';
 export { default as ThemeProvider } from './ThemeProvider';
-export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider';
+export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider';
+export { default as unstable_createGetThemeVar } from './cssVars/createGetThemeVar';

package/legacy/useThemeProps/getThemeProps.js

@@ -1,6 +1,4 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-
-/* eslint-disable no-restricted-syntax */
+import { internal_resolveProps as resolveProps } from '@mui/utils';
 export default function getThemeProps(params) {
   var theme = params.theme,
       name = params.name,
@@ -10,18 +8,5 @@ export default function getThemeProps(params) {
     return props;
   }
 
-  var output = _extends({}, props); // Resolve default props, code borrow from React source.
-  // https://github.com/facebook/react/blob/15a8f031838a553e41c0b66eb1bcf1da8448104d/packages/react/src/ReactElement.js#L221
-
-
-  var defaultProps = theme.components[name].defaultProps;
-  var propName;
-
-  for (propName in defaultProps) {
-    if (output[propName] === undefined) {
-      output[propName] = defaultProps[propName];
-    }
-  }
-
-  return output;
+  return resolveProps(theme.components[name].defaultProps, props);
 }

package/modern/createTheme/createBreakpoints.js

@@ -51,6 +51,21 @@ export default function createBreakpoints(breakpoints) {
     return up(key);
   }
 
+  function not(key) {
+    // handle first and last key separately, for better readability
+    const keyIndex = keys.indexOf(key);
+
+    if (keyIndex === 0) {
+      return up(keys[1]);
+    }
+
+    if (keyIndex === keys.length - 1) {
+      return down(keys[keyIndex]);
+    }
+
+    return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
+  }
+
   return _extends({
     keys,
     values,
@@ -58,6 +73,7 @@ export default function createBreakpoints(breakpoints) {
     down,
     between,
     only,
+    not,
     unit
   }, other);
 }