@mui/system 5.15.13 → 6.0.0-alpha.0

package/modern/cssVars/prepareCssVars.js

@@ -1,16 +1,21 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["colorSchemes", "components", "defaultColorScheme"];
+const _excluded = ["getSelector"],
+  _excluded2 = ["colorSchemes", "components", "defaultColorScheme"];
 import deepmerge from '@mui/utils/deepmerge';
 import cssVarsParser from './cssVarsParser';
-function prepareCssVars(theme, parserConfig) {
+function prepareCssVars(theme, _ref = {}) {
+  let {
+      getSelector
+    } = _ref,
+    parserConfig = _objectWithoutPropertiesLoose(_ref, _excluded);
   // @ts-ignore - ignore components do not exist
   const {
       colorSchemes = {},
       defaultColorScheme = 'light'
     } = theme,
-    otherTheme = _objectWithoutPropertiesLoose(theme, _excluded);
+    otherTheme = _objectWithoutPropertiesLoose(theme, _excluded2);
   const {
     vars: rootVars,
     css: rootCss,
@@ -19,7 +24,7 @@ function prepareCssVars(theme, parserConfig) {
   let themeVars = rootVarsWithDefaults;
   const colorSchemesMap = {};
   const {
-      [defaultColorScheme]: light
+      [defaultColorScheme]: defaultScheme
     } = colorSchemes,
     otherColorSchemes = _objectWithoutPropertiesLoose(colorSchemes, [defaultColorScheme].map(_toPropertyKey));
   Object.entries(otherColorSchemes || {}).forEach(([key, scheme]) => {
@@ -34,38 +39,61 @@ function prepareCssVars(theme, parserConfig) {
       vars
     };
   });
-  if (light) {
+  if (defaultScheme) {
     // default color scheme vars should be merged last to set as default
     const {
       css,
       vars,
       varsWithDefaults
-    } = cssVarsParser(light, parserConfig);
+    } = cssVarsParser(defaultScheme, parserConfig);
     themeVars = deepmerge(themeVars, varsWithDefaults);
     colorSchemesMap[defaultColorScheme] = {
       css,
       vars
     };
   }
-  const generateCssVars = colorScheme => {
-    if (!colorScheme) {
-      const css = _extends({}, rootCss);
-      return {
-        css,
-        vars: rootVars,
-        selector: parserConfig?.getSelector?.(colorScheme, css) || ':root'
-      };
+  const generateThemeVars = () => {
+    let vars = _extends({}, rootVars);
+    Object.entries(colorSchemesMap).forEach(([, {
+      vars: schemeVars
+    }]) => {
+      vars = deepmerge(vars, schemeVars);
+    });
+    return vars;
+  };
+  const generateStyleSheets = () => {
+    const stylesheets = [];
+    const colorScheme = theme.defaultColorScheme || 'light';
+    function insertStyleSheet(selector, css) {
+      if (Object.keys(css).length) {
+        stylesheets.push(typeof selector === 'string' ? {
+          [selector]: _extends({}, css)
+        } : selector);
+      }
     }
-    const css = _extends({}, colorSchemesMap[colorScheme].css);
-    return {
-      css,
-      vars: colorSchemesMap[colorScheme].vars,
-      selector: parserConfig?.getSelector?.(colorScheme, css) || ':root'
-    };
+    insertStyleSheet(getSelector?.(undefined, _extends({}, rootCss)) || ':root', rootCss);
+    const {
+        [colorScheme]: defaultSchemeVal
+      } = colorSchemesMap,
+      rest = _objectWithoutPropertiesLoose(colorSchemesMap, [colorScheme].map(_toPropertyKey));
+    if (defaultSchemeVal) {
+      // default color scheme has to come before other color schemes
+      const {
+        css
+      } = defaultSchemeVal;
+      insertStyleSheet(getSelector?.(colorScheme, _extends({}, css)) || `[${theme.attribute || 'data-color-scheme'}="${colorScheme}"]`, css);
+    }
+    Object.entries(rest).forEach(([key, {
+      css
+    }]) => {
+      insertStyleSheet(getSelector?.(key, _extends({}, css)) || `[${theme.attribute || 'data-color-scheme'}="${key}"]`, css);
+    });
+    return stylesheets;
   };
   return {
     vars: themeVars,
-    generateCssVars
+    generateThemeVars,
+    generateStyleSheets
   };
 }
 export default prepareCssVars;

package/modern/cssVars/useCurrentColorScheme.js

@@ -78,7 +78,7 @@ export default function useCurrentColorScheme(options) {
         // do nothing if mode does not change
         return currentState;
       }
-      const newMode = !mode ? defaultMode : mode;
+      const newMode = mode ?? defaultMode;
       try {
         localStorage.setItem(modeStorageKey, newMode);
       } catch (e) {
@@ -159,11 +159,19 @@ export default function useCurrentColorScheme(options) {
       });
     }
   }, [joinedColorSchemes, colorSchemeStorageKey, defaultLightColorScheme, defaultDarkColorScheme]);
-  const handleMediaQuery = React.useCallback(e => {
+  const handleMediaQuery = React.useCallback(event => {
     if (state.mode === 'system') {
-      setState(currentState => _extends({}, currentState, {
-        systemMode: e?.matches ? 'dark' : 'light'
-      }));
+      setState(currentState => {
+        const systemMode = event?.matches ? 'dark' : 'light';
+
+        // Early exit, nothing changed.
+        if (currentState.systemMode === systemMode) {
+          return currentState;
+        }
+        return _extends({}, currentState, {
+          systemMode
+        });
+      });
     }
   }, [state.mode]);
 
@@ -179,34 +187,38 @@ export default function useCurrentColorScheme(options) {
     // Intentionally use deprecated listener methods to support iOS & old browsers
     media.addListener(handler);
     handler(media);
-    return () => media.removeListener(handler);
+    return () => {
+      media.removeListener(handler);
+    };
   }, []);
 
   // Handle when localStorage has changed
   React.useEffect(() => {
-    const handleStorage = event => {
-      const value = event.newValue;
-      if (typeof event.key === 'string' && event.key.startsWith(colorSchemeStorageKey) && (!value || joinedColorSchemes.match(value))) {
-        // If the key is deleted, value will be null then reset color scheme to the default one.
-        if (event.key.endsWith('light')) {
-          setColorScheme({
-            light: value
-          });
+    if (storageWindow) {
+      const handleStorage = event => {
+        const value = event.newValue;
+        if (typeof event.key === 'string' && event.key.startsWith(colorSchemeStorageKey) && (!value || joinedColorSchemes.match(value))) {
+          // If the key is deleted, value will be null then reset color scheme to the default one.
+          if (event.key.endsWith('light')) {
+            setColorScheme({
+              light: value
+            });
+          }
+          if (event.key.endsWith('dark')) {
+            setColorScheme({
+              dark: value
+            });
+          }
         }
-        if (event.key.endsWith('dark')) {
-          setColorScheme({
-            dark: value
-          });
+        if (event.key === modeStorageKey && (!value || ['light', 'dark', 'system'].includes(value))) {
+          setMode(value || defaultMode);
         }
-      }
-      if (event.key === modeStorageKey && (!value || ['light', 'dark', 'system'].includes(value))) {
-        setMode(value || defaultMode);
-      }
-    };
-    if (storageWindow) {
+      };
       // For syncing color-scheme changes between iframes
       storageWindow.addEventListener('storage', handleStorage);
-      return () => storageWindow.removeEventListener('storage', handleStorage);
+      return () => {
+        storageWindow.removeEventListener('storage', handleStorage);
+      };
     }
     return undefined;
   }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow]);

package/modern/{display.js → display/display.js}

@@ -1,5 +1,5 @@
-import style from './style';
-import compose from './compose';
+import style from '../style';
+import compose from '../compose';
 export const displayPrint = style({
   prop: 'displayPrint',
   cssProperty: false,

package/modern/display/index.js

@@ -0,0 +1,4 @@
+'use client';
+
+export { default } from './display';
+export * from './display';

package/{esm → modern/flexbox}/flexbox.js

@@ -1,5 +1,5 @@
-import style from './style';
-import compose from './compose';
+import style from '../style';
+import compose from '../compose';
 export const flexBasis = style({
   prop: 'flexBasis'
 });

package/modern/flexbox/index.js

@@ -0,0 +1,4 @@
+'use client';
+
+export { default } from './flexbox';
+export * from './flexbox';

package/modern/{getThemeValue.js → getThemeValue/getThemeValue.js}

@@ -1,13 +1,13 @@
-import borders from './borders';
-import display from './display';
-import flexbox from './flexbox';
-import grid from './cssGrid';
-import positions from './positions';
-import palette from './palette';
-import shadows from './shadows';
-import sizing from './sizing';
-import spacing from './spacing';
-import typography from './typography';
+import borders from '../borders';
+import display from '../display';
+import flexbox from '../flexbox';
+import grid from '../cssGrid';
+import positions from '../positions';
+import palette from '../palette';
+import shadows from '../shadows';
+import sizing from '../sizing';
+import spacing from '../spacing';
+import typography from '../typography';
 const filterPropsMapping = {
   borders: borders.filterProps,
   display: display.filterProps,

package/modern/getThemeValue/index.js

@@ -0,0 +1,4 @@
+'use client';
+
+export { default } from './getThemeValue';
+export * from './getThemeValue';

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v5.15.13
+ * @mui/system v6.0.0-alpha.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/memoize/index.js

@@ -0,0 +1,3 @@
+'use client';
+
+export { default } from './memoize';

package/modern/merge/index.js

@@ -0,0 +1,3 @@
+'use client';
+
+export { default } from './merge';

package/modern/palette/index.js

@@ -0,0 +1,4 @@
+'use client';
+
+export { default } from './palette';
+export * from './palette';

package/{esm → modern/palette}/palette.js

@@ -1,5 +1,5 @@
-import style from './style';
-import compose from './compose';
+import style from '../style';
+import compose from '../compose';
 export function paletteTransform(value, userValue) {
   if (userValue === 'grey') {
     return userValue;

package/modern/positions/index.js

@@ -0,0 +1,4 @@
+'use client';
+
+export { default } from './positions';
+export * from './positions';

package/modern/{positions.js → positions/positions.js}

@@ -1,5 +1,5 @@
-import style from './style';
-import compose from './compose';
+import style from '../style';
+import compose from '../compose';
 export const position = style({
   prop: 'position'
 });

package/modern/propsToClassKey/index.js

@@ -0,0 +1,3 @@
+'use client';
+
+export { default } from './propsToClassKey';

package/modern/responsivePropType/index.js

@@ -0,0 +1,3 @@
+'use client';
+
+export { default } from './responsivePropType';

package/modern/shadows/index.js

@@ -0,0 +1,3 @@
+'use client';
+
+export { default } from './shadows';

package/{esm → modern/shadows}/shadows.js

@@ -1,4 +1,4 @@
-import style from './style';
+import style from '../style';
 const boxShadow = style({
   prop: 'boxShadow',
   themeKey: 'shadows'

package/modern/sizing/index.js

@@ -0,0 +1,4 @@
+'use client';
+
+export { default } from './sizing';
+export * from './sizing';

package/modern/{sizing.js → sizing/sizing.js}

@@ -1,6 +1,6 @@
-import style from './style';
-import compose from './compose';
-import { handleBreakpoints, values as breakpointsValues } from './breakpoints';
+import style from '../style';
+import compose from '../compose';
+import { handleBreakpoints, values as breakpointsValues } from '../breakpoints';
 export function sizingTransform(value) {
   return value <= 1 && value !== 0 ? `${value * 100}%` : value;
 }

package/modern/spacing/index.js

@@ -0,0 +1,4 @@
+'use client';
+
+export { default } from './spacing';
+export * from './spacing';

package/modern/{spacing.js → spacing/spacing.js}

@@ -1,8 +1,8 @@
-import responsivePropType from './responsivePropType';
-import { handleBreakpoints } from './breakpoints';
-import { getPath } from './style';
-import merge from './merge';
-import memoize from './memoize';
+import responsivePropType from '../responsivePropType';
+import { handleBreakpoints } from '../breakpoints';
+import { getPath } from '../style';
+import merge from '../merge';
+import memoize from '../memoize';
 const properties = {
   m: 'margin',
   p: 'padding'

package/modern/style/index.js

@@ -0,0 +1,4 @@
+'use client';
+
+export { default } from './style';
+export * from './style';

package/modern/{style.js → style/style.js}

@@ -1,6 +1,6 @@
 import capitalize from '@mui/utils/capitalize';
-import responsivePropType from './responsivePropType';
-import { handleBreakpoints } from './breakpoints';
+import responsivePropType from '../responsivePropType';
+import { handleBreakpoints } from '../breakpoints';
 export function getPath(obj, path, checkVars = true) {
   if (!path || typeof path !== 'string') {
     return null;

package/modern/styled/index.js

@@ -0,0 +1,3 @@
+'use client';
+
+export { default } from './styled';

package/modern/styled/styled.js

@@ -0,0 +1,3 @@
+import createStyled from '../createStyled';
+const styled = createStyled();
+export default styled;

package/modern/typography/index.js

@@ -0,0 +1,4 @@
+'use client';
+
+export { default } from './typography';
+export * from './typography';

package/modern/{typography.js → typography/typography.js}

@@ -1,5 +1,5 @@
-import style from './style';
-import compose from './compose';
+import style from '../style';
+import compose from '../compose';
 export const fontFamily = style({
   prop: 'fontFamily',
   themeKey: 'typography'

package/modern/useTheme/index.js

@@ -0,0 +1,4 @@
+'use client';
+
+export { default } from './useTheme';
+export * from './useTheme';

package/{esm → modern/useTheme}/useTheme.js

@@ -1,7 +1,7 @@
 'use client';
 
-import createTheme from './createTheme';
-import useThemeWithoutDefault from './useThemeWithoutDefault';
+import createTheme from '../createTheme';
+import useThemeWithoutDefault from '../useThemeWithoutDefault';
 export const systemDefaultTheme = createTheme();
 function useTheme(defaultTheme = systemDefaultTheme) {
   return useThemeWithoutDefault(defaultTheme);

package/modern/useThemeWithoutDefault/index.js

@@ -0,0 +1,3 @@
+'use client';
+
+export { default } from './useThemeWithoutDefault';

package/node/Box/Box.js

@@ -0,0 +1,36 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ClassNameGenerator = _interopRequireDefault(require("@mui/utils/ClassNameGenerator"));
+var _createBox = _interopRequireDefault(require("../createBox"));
+var _boxClasses = _interopRequireDefault(require("./boxClasses"));
+const Box = (0, _createBox.default)({
+  defaultClassName: _boxClasses.default.root,
+  generateClassName: _ClassNameGenerator.default.generate
+});
+process.env.NODE_ENV !== "production" ? Box.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: _propTypes.default.node,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: _propTypes.default.elementType,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+} : void 0;
+var _default = exports.default = Box;

package/node/Box/boxClasses.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 _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+const boxClasses = (0, _generateUtilityClasses.default)('MuiBox', ['root']);
+var _default = exports.default = boxClasses;

package/node/Box/index.js

@@ -0,0 +1,37 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  boxClasses: true
+};
+Object.defineProperty(exports, "boxClasses", {
+  enumerable: true,
+  get: function () {
+    return _boxClasses.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Box.default;
+  }
+});
+var _Box = _interopRequireDefault(require("./Box"));
+var _boxClasses = _interopRequireWildcard(require("./boxClasses"));
+Object.keys(_boxClasses).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _boxClasses[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _boxClasses[key];
+    }
+  });
+});
+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/{esm → node}/Container/Container.js

@@ -1,8 +1,13 @@
+"use strict";
 'use client';
 
-import PropTypes from 'prop-types';
-import createContainer from './createContainer';
-
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _createContainer = _interopRequireDefault(require("./createContainer"));
 /**
  *
  * Demos:
@@ -14,7 +19,7 @@ import createContainer from './createContainer';
  *
  * - [Container API](https://mui.com/system/api/container/)
  */
-const Container = createContainer();
+const Container = (0, _createContainer.default)();
 process.env.NODE_ENV !== "production" ? Container.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
@@ -23,21 +28,21 @@ process.env.NODE_ENV !== "production" ? Container.propTypes /* remove-proptypes
   /**
    * @ignore
    */
-  children: PropTypes.node,
+  children: _propTypes.default.node,
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: PropTypes.object,
+  classes: _propTypes.default.object,
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
-  component: PropTypes.elementType,
+  component: _propTypes.default.elementType,
   /**
    * If `true`, the left and right padding is removed.
    * @default false
    */
-  disableGutters: PropTypes.bool,
+  disableGutters: _propTypes.default.bool,
   /**
    * Set the max-width to match the min-width of the current breakpoint.
    * This is useful if you'd prefer to design for a fixed set of sizes
@@ -45,17 +50,17 @@ process.env.NODE_ENV !== "production" ? Container.propTypes /* remove-proptypes
    * It's fluid by default.
    * @default false
    */
-  fixed: PropTypes.bool,
+  fixed: _propTypes.default.bool,
   /**
    * Determine the max-width of the container.
    * The container width grows with the size of the screen.
    * Set to `false` to disable `maxWidth`.
    * @default 'lg'
    */
-  maxWidth: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), PropTypes.string]),
+  maxWidth: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), _propTypes.default.string]),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;
-export default Container;
+var _default = exports.default = Container;

package/node/Container/ContainerProps.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/Container/containerClasses.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.getContainerUtilityClass = getContainerUtilityClass;
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+function getContainerUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiContainer', slot);
+}
+const containerClasses = (0, _generateUtilityClasses.default)('MuiContainer', ['root', 'disableGutters', 'fixed', 'maxWidthXs', 'maxWidthSm', 'maxWidthMd', 'maxWidthLg', 'maxWidthXl']);
+var _default = exports.default = containerClasses;