@mui/system 5.8.5 → 5.9.0

package/legacy/cssVars/createCssVarsProvider.js

@@ -12,7 +12,6 @@ import cssVarsParser from './cssVarsParser';
 import ThemeProvider from '../ThemeProvider';
 import systemGetInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
 import useCurrentColorScheme from './useCurrentColorScheme';
-import createGetCssVar from './createGetCssVar';
 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}';
@@ -32,9 +31,7 @@ export default function createCssVarsProvider(options) {
       designSystemTransitionOnChange = _options$disableTrans === void 0 ? false : _options$disableTrans,
       _options$enableColorS = options.enableColorScheme,
       designSystemEnableColorScheme = _options$enableColorS === void 0 ? true : _options$enableColorS,
-      _options$prefix = options.prefix,
-      designSystemPrefix = _options$prefix === void 0 ? '' : _options$prefix,
-      shouldSkipGeneratingVar = options.shouldSkipGeneratingVar,
+      designSystemShouldSkipGeneratingVar = options.shouldSkipGeneratingVar,
       resolveTheme = options.resolveTheme;
 
   if (!defaultTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !defaultTheme.colorSchemes[designSystemColorScheme] || _typeof(designSystemColorScheme) === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || _typeof(designSystemColorScheme) === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.dark]) {
@@ -57,8 +54,6 @@ export default function createCssVarsProvider(options) {
     var children = _ref.children,
         _ref$theme = _ref.theme,
         themeProp = _ref$theme === void 0 ? defaultTheme : _ref$theme,
-        _ref$prefix = _ref.prefix,
-        prefix = _ref$prefix === void 0 ? designSystemPrefix : _ref$prefix,
         _ref$modeStorageKey = _ref.modeStorageKey,
         modeStorageKey = _ref$modeStorageKey === void 0 ? defaultModeStorageKey : _ref$modeStorageKey,
         _ref$colorSchemeStora = _ref.colorSchemeStorageKey,
@@ -80,14 +75,17 @@ export default function createCssVarsProvider(options) {
         _ref$colorSchemeNode = _ref.colorSchemeNode,
         colorSchemeNode = _ref$colorSchemeNode === void 0 ? typeof document === 'undefined' ? undefined : document.documentElement : _ref$colorSchemeNode,
         _ref$colorSchemeSelec = _ref.colorSchemeSelector,
-        colorSchemeSelector = _ref$colorSchemeSelec === void 0 ? ':root' : _ref$colorSchemeSelec;
+        colorSchemeSelector = _ref$colorSchemeSelec === void 0 ? ':root' : _ref$colorSchemeSelec,
+        _ref$shouldSkipGenera = _ref.shouldSkipGeneratingVar,
+        shouldSkipGeneratingVar = _ref$shouldSkipGenera === void 0 ? designSystemShouldSkipGeneratingVar : _ref$shouldSkipGenera;
     var hasMounted = React.useRef(false);
 
     var _themeProp$colorSchem = themeProp.colorSchemes,
         colorSchemes = _themeProp$colorSchem === void 0 ? {} : _themeProp$colorSchem,
         _themeProp$components = themeProp.components,
         components = _themeProp$components === void 0 ? {} : _themeProp$components,
-        restThemeProp = _objectWithoutProperties(themeProp, ["colorSchemes", "components"]);
+        cssVarPrefix = themeProp.cssVarPrefix,
+        restThemeProp = _objectWithoutProperties(themeProp, ["colorSchemes", "components", "cssVarPrefix"]);
 
     var allColorSchemes = Object.keys(colorSchemes);
     var defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
@@ -127,8 +125,7 @@ export default function createCssVarsProvider(options) {
     var theme = restThemeProp;
 
     var _cssVarsParser = cssVarsParser(theme, {
-      prefix: prefix,
-      basePrefix: designSystemPrefix,
+      prefix: cssVarPrefix,
       shouldSkipGeneratingVar: shouldSkipGeneratingVar
     }),
         rootCss = _cssVarsParser.css,
@@ -138,9 +135,8 @@ export default function createCssVarsProvider(options) {
     theme = _extends({}, parsedTheme, {
       components: components,
       colorSchemes: colorSchemes,
-      prefix: prefix,
+      cssVarPrefix: cssVarPrefix,
       vars: rootVars,
-      getCssVar: createGetCssVar(prefix),
       getColorSchemeSelector: function getColorSchemeSelector(targetColorScheme) {
         return "[".concat(attribute, "=\"").concat(targetColorScheme, "\"] &");
       }
@@ -153,8 +149,7 @@ export default function createCssVarsProvider(options) {
           scheme = _ref3[1];
 
       var _cssVarsParser2 = cssVarsParser(scheme, {
-        prefix: prefix,
-        basePrefix: designSystemPrefix,
+        prefix: cssVarPrefix,
         shouldSkipGeneratingVar: shouldSkipGeneratingVar
       }),
           css = _cssVarsParser2.css,
@@ -322,9 +317,9 @@ export default function createCssVarsProvider(options) {
     modeStorageKey: PropTypes.string,
 
     /**
-     * CSS variable prefix.
+     * A function to determine if the key, value should be attached as CSS Variable
      */
-    prefix: PropTypes.string,
+    shouldSkipGeneratingVar: PropTypes.func,
 
     /**
      * The window that attaches the 'storage' event listener
@@ -342,7 +337,8 @@ export default function createCssVarsProvider(options) {
     return systemGetInitColorSchemeScript(_extends({
       attribute: defaultAttribute,
       colorSchemeStorageKey: defaultColorSchemeStorageKey,
-      modeStorageKey: defaultModeStorageKey
+      modeStorageKey: defaultModeStorageKey,
+      enableColorScheme: designSystemEnableColorScheme
     }, params));
   };
 

package/legacy/cssVars/createGetCssVar.js

@@ -27,11 +27,11 @@ export default function createGetCssVar() {
 
 
   var getCssVar = function getCssVar(field) {
-    for (var _len2 = arguments.length, vars = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-      vars[_key2 - 1] = arguments[_key2];
+    for (var _len2 = arguments.length, fallbacks = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+      fallbacks[_key2 - 1] = arguments[_key2];
     }
 
-    return "var(--".concat(prefix ? "".concat(prefix, "-") : '').concat(field).concat(appendVar.apply(void 0, vars), ")");
+    return "var(--".concat(prefix ? "".concat(prefix, "-") : '').concat(field).concat(appendVar.apply(void 0, fallbacks), ")");
   };
 
   return getCssVar;

package/legacy/cssVars/cssVarsParser.js

@@ -103,13 +103,9 @@ var getCssValue = function getCssValue(keys, value) {
  * @param {Object} theme
  * @param {{
  *  prefix?: string,
- *  basePrefix?: string,
  *  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
  * }} options.
- *  `basePrefix`: defined by design system.
- *  `prefix`: defined by application
- *
- *   the CSS variable value will be adjusted based on the provided `basePrefix` & `prefix` which can be found in `parsedTheme`.
+ *  `prefix`: The prefix of the generated CSS variables. This function does not change the value.
  *
  * @returns {{ css: Object, vars: Object, parsedTheme: typeof theme }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme), and `parsedTheme` is the cloned version of theme.
  *
@@ -120,17 +116,15 @@ var getCssValue = function getCssValue(keys, value) {
  *   palette: { primary: { 500: 'var(--color)' } }
  * }, { prefix: 'foo' })
  *
- * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--foo-color)' }
- * console.log(vars) // { fontSize: '--foo-fontSize', lineHeight: '--foo-lineHeight', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
- * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--foo-color)' } } }
+ * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
+ * console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
+ * console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--color)' } } }
  */
 
 
 export default function cssVarsParser(theme, options) {
   var _ref3 = options || {},
       prefix = _ref3.prefix,
-      _ref3$basePrefix = _ref3.basePrefix,
-      basePrefix = _ref3$basePrefix === void 0 ? '' : _ref3$basePrefix,
       shouldSkipGeneratingVar = _ref3.shouldSkipGeneratingVar;
 
   var css = {};
@@ -138,16 +132,6 @@ export default function cssVarsParser(theme, options) {
   var parsedTheme = {};
   walkObjectDeep(theme, function (keys, value, arrayKeys) {
     if (typeof value === 'string' || typeof value === 'number') {
-      if (typeof value === 'string' && value.match(/var\(\s*--/)) {
-        // for CSS variable, apply prefix or remove basePrefix from the variable
-        if (!basePrefix && prefix) {
-          value = value.replace(/var\(\s*--/g, "var(--".concat(prefix, "-"));
-        } else {
-          value = prefix ? value.replace(new RegExp("var\\(\\s*--".concat(basePrefix), 'g'), "var(--".concat(prefix)) // removing spaces
-          : value.replace(new RegExp("var\\(\\s*--".concat(basePrefix, "-"), 'g'), 'var(--');
-        }
-      }
-
       if (!shouldSkipGeneratingVar || shouldSkipGeneratingVar && !shouldSkipGeneratingVar(keys, value)) {
         // only create css & var if `shouldSkipGeneratingVar` return false
         var cssVar = "--".concat(prefix ? "".concat(prefix, "-") : '').concat(keys.join('-'));

package/legacy/cssVars/getInitColorSchemeScript.js

@@ -5,6 +5,8 @@ export var DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
 export var DEFAULT_ATTRIBUTE = 'data-color-scheme';
 export default function getInitColorSchemeScript(options) {
   var _ref = options || {},
+      _ref$enableColorSchem = _ref.enableColorScheme,
+      enableColorScheme = _ref$enableColorSchem === void 0 ? true : _ref$enableColorSchem,
       _ref$enableSystem = _ref.enableSystem,
       enableSystem = _ref$enableSystem === void 0 ? false : _ref$enableSystem,
       _ref$defaultLightColo = _ref.defaultLightColorScheme,
@@ -23,7 +25,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          ").concat(colorSchemeNode, ".setAttribute('").concat(attribute, "', colorScheme);\n        }\n      } catch (e) {} })();")
+      __html: "(function() { try {\n        var mode = localStorage.getItem('".concat(modeStorageKey, "');\n        var cssColorScheme = mode;\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            cssColorScheme = 'dark';\n            colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-dark') || '").concat(defaultDarkColorScheme, "';\n          } else {\n            cssColorScheme = 'light';\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          ").concat(colorSchemeNode, ".setAttribute('").concat(attribute, "', colorScheme);\n        }\n        if (").concat(enableColorScheme, " && !!cssColorScheme) {\n          ").concat(colorSchemeNode, ".style.setProperty('color-scheme', cssColorScheme);\n        }\n      } catch (e) {} })();")
     }
   });
 }

package/legacy/cssVars/index.js

@@ -1 +1,2 @@
-export { default } from './createCssVarsProvider';
+export { default } from './createCssVarsProvider';
+export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';

package/legacy/cssVars/useCurrentColorScheme.js

@@ -161,7 +161,7 @@ export default function useCurrentColorScheme(options) {
     if (state.mode === 'system') {
       setState(function (currentState) {
         return _extends({}, currentState, {
-          systemMode: e.matches ? 'dark' : 'light'
+          systemMode: e != null && e.matches ? 'dark' : 'light'
         });
       });
     }

package/legacy/getThemeValue.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import borders from './borders';
 import display from './display';
 import flexbox from './flexbox';
-import grid from './grid';
+import grid from './cssGrid';
 import positions from './positions';
 import palette from './palette';
 import shadows from './shadows';

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.8.5
+/** @license MUI v5.9.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -12,8 +12,8 @@ export { default as compose } from './compose';
 export { default as display } from './display';
 export { default as flexbox } from './flexbox';
 export * from './flexbox';
-export { default as grid } from './grid';
-export * from './grid';
+export { default as grid } from './cssGrid';
+export * from './cssGrid';
 export { default as palette } from './palette';
 export * from './palette';
 export { default as positions } from './positions';
@@ -45,6 +45,12 @@ export * from './colorManipulator';
 export { default as ThemeProvider } from './ThemeProvider';
 export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider';
 export { default as unstable_createGetCssVar } from './cssVars/createGetCssVar';
+/** ----------------- */
+
+/** Layout components */
+
 export { default as createContainer } from './Container/createContainer';
 export { default as Container } from './Container';
-export * from './Container';
+export * from './Container';
+export { default as Unstable_Grid } from './Unstable_Grid/Grid';
+export * from './Unstable_Grid';

package/modern/Unstable_Grid/Grid.js

@@ -0,0 +1,179 @@
+import PropTypes from 'prop-types';
+import createGrid from './createGrid';
+/**
+ *
+ * Demos:
+ *
+ * - [Grid (Material UI)](https://mui.com/material-ui/react-grid/)
+ *
+ * API:
+ *
+ * - [Grid API](https://mui.com/system/api/grid/)
+ */
+
+const Grid = createGrid();
+process.env.NODE_ENV !== "production" ? Grid.propTypes
+/* remove-proptypes */
+= {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+
+  /**
+   * The number of columns.
+   * @default 12
+   */
+  columns: PropTypes
+  /* @typescript-to-proptypes-ignore */
+  .oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number, PropTypes.object]),
+
+  /**
+   * Defines the horizontal space between the type `item` components.
+   * It overrides the value of the `spacing` prop.
+   */
+  columnSpacing: PropTypes
+  /* @typescript-to-proptypes-ignore */
+  .oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+
+  /**
+   * If `true`, the component will have the flex *container* behavior.
+   * You should be wrapping *items* with a *container*.
+   * @default false
+   */
+  container: PropTypes.bool,
+
+  /**
+   * Defines the `flex-direction` style property.
+   * It is applied for all screen sizes.
+   * @default 'row'
+   */
+  direction: PropTypes
+  /* @typescript-to-proptypes-ignore */
+  .oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
+
+  /**
+   * If a number, it sets the number of columns the grid item uses.
+   * It can't be greater than the total number of columns of the container (12 by default).
+   * If 'auto', the grid item's width matches its content.
+   * If false, the prop is ignored.
+   * If true, the grid item's width grows to use the space available in the grid container.
+   * The value is applied for the `lg` breakpoint and wider screens if not overridden.
+   * @default false
+   */
+  lg: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
+  /**
+   * If a number, it sets the margin-left equals to the number of columns the grid item uses.
+   * If 'auto', the grid item push itself to the right-end of the container.
+   * The value is applied for the `lg` breakpoint and wider screens if not overridden.
+   */
+  lgOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
+
+  /**
+   * If a number, it sets the number of columns the grid item uses.
+   * It can't be greater than the total number of columns of the container (12 by default).
+   * If 'auto', the grid item's width matches its content.
+   * If false, the prop is ignored.
+   * If true, the grid item's width grows to use the space available in the grid container.
+   * The value is applied for the `md` breakpoint and wider screens if not overridden.
+   * @default false
+   */
+  md: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
+  /**
+   * If a number, it sets the margin-left equals to the number of columns the grid item uses.
+   * If 'auto', the grid item push itself to the right-end of the container.
+   * The value is applied for the `md` breakpoint and wider screens if not overridden.
+   */
+  mdOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
+
+  /**
+   * Defines the vertical space between the type `item` components.
+   * It overrides the value of the `spacing` prop.
+   */
+  rowSpacing: PropTypes
+  /* @typescript-to-proptypes-ignore */
+  .oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+
+  /**
+   * If a number, it sets the number of columns the grid item uses.
+   * It can't be greater than the total number of columns of the container (12 by default).
+   * If 'auto', the grid item's width matches its content.
+   * If false, the prop is ignored.
+   * If true, the grid item's width grows to use the space available in the grid container.
+   * The value is applied for the `sm` breakpoint and wider screens if not overridden.
+   * @default false
+   */
+  sm: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
+  /**
+   * If a number, it sets the margin-left equals to the number of columns the grid item uses.
+   * If 'auto', the grid item push itself to the right-end of the container.
+   * The value is applied for the `sm` breakpoint and wider screens if not overridden.
+   */
+  smOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
+
+  /**
+   * Defines the space between the type `item` components.
+   * It can only be used on a type `container` component.
+   * @default 0
+   */
+  spacing: PropTypes
+  /* @typescript-to-proptypes-ignore */
+  .oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+
+  /**
+   * @ignore
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+
+  /**
+   * Defines the `flex-wrap` style property.
+   * It's applied for all screen sizes.
+   * @default 'wrap'
+   */
+  wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
+
+  /**
+   * If a number, it sets the number of columns the grid item uses.
+   * It can't be greater than the total number of columns of the container (12 by default).
+   * If 'auto', the grid item's width matches its content.
+   * If false, the prop is ignored.
+   * If true, the grid item's width grows to use the space available in the grid container.
+   * The value is applied for the `xl` breakpoint and wider screens if not overridden.
+   * @default false
+   */
+  xl: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
+  /**
+   * If a number, it sets the margin-left equals to the number of columns the grid item uses.
+   * If 'auto', the grid item push itself to the right-end of the container.
+   * The value is applied for the `xl` breakpoint and wider screens if not overridden.
+   */
+  xlOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
+
+  /**
+   * If a number, it sets the number of columns the grid item uses.
+   * It can't be greater than the total number of columns of the container (12 by default).
+   * If 'auto', the grid item's width matches its content.
+   * If false, the prop is ignored.
+   * If true, the grid item's width grows to use the space available in the grid container.
+   * The value is applied for all the screen sizes with the lowest priority.
+   * @default false
+   */
+  xs: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
+  /**
+   * If a number, it sets the margin-left equals to the number of columns the grid item uses.
+   * If 'auto', the grid item push itself to the right-end of the container.
+   * The value is applied for the `xs` breakpoint and wider screens if not overridden.
+   */
+  xsOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
+} : void 0;
+export default Grid;

package/modern/Unstable_Grid/GridProps.js

@@ -0,0 +1 @@
+export {};

package/modern/Unstable_Grid/createGrid.js

@@ -0,0 +1,150 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className", "columns", "container", "component", "direction", "wrap", "spacing", "rowSpacing", "columnSpacing"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses, unstable_generateUtilityClass as generateUtilityClass } from '@mui/utils';
+import systemStyled from '../styled';
+import useThemePropsSystem from '../useThemeProps';
+import useTheme from '../useTheme';
+import { extendSxProp } from '../styleFunctionSx';
+import createTheme from '../createTheme';
+import { generateGridStyles, generateGridSizeStyles, generateGridColumnsStyles, generateGridColumnSpacingStyles, generateGridRowSpacingStyles, generateGridDirectionStyles, generateGridOffsetStyles, generateSizeClassNames, generateSpacingClassNames } from './gridGenerator';
+import { jsx as _jsx } from "react/jsx-runtime";
+const defaultTheme = createTheme(); // widening Theme to any so that the consumer can own the theme structure.
+
+const defaultCreateStyledComponent = systemStyled('div', {
+  name: 'MuiGrid',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+});
+
+function useThemePropsDefault(props) {
+  return useThemePropsSystem({
+    props,
+    name: 'MuiGrid',
+    defaultTheme
+  });
+}
+
+export default function createGrid(options = {}) {
+  const {
+    // This will allow adding custom styled fn (for example for custom sx style function)
+    createStyledComponent = defaultCreateStyledComponent,
+    useThemeProps = useThemePropsDefault,
+    componentName = 'MuiGrid'
+  } = options;
+  const NestedContext = /*#__PURE__*/React.createContext(false);
+
+  const useUtilityClasses = (ownerState, theme) => {
+    const {
+      container,
+      direction,
+      spacing,
+      wrap,
+      gridSize
+    } = ownerState;
+    const slots = {
+      root: ['root', container && 'container', direction !== 'row' && `direction-xs-${String(direction)}`, wrap !== 'wrap' && `wrap-xs-${String(wrap)}`, ...generateSizeClassNames(gridSize), ...(container ? generateSpacingClassNames(spacing, theme.breakpoints.keys[0]) : [])]
+    };
+    return composeClasses(slots, slot => generateUtilityClass(componentName, slot), {});
+  };
+
+  const GridRoot = createStyledComponent(generateGridColumnsStyles, generateGridColumnSpacingStyles, generateGridRowSpacingStyles, generateGridSizeStyles, generateGridDirectionStyles, generateGridStyles, generateGridOffsetStyles);
+  const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
+    const theme = useTheme();
+    const themeProps = useThemeProps(inProps);
+    const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
+
+    const nested = React.useContext(NestedContext);
+
+    const {
+      className,
+      columns: columnsProp = 12,
+      container = false,
+      component = 'div',
+      direction = 'row',
+      wrap = 'wrap',
+      spacing: spacingProp = 0,
+      rowSpacing: rowSpacingProp = spacingProp,
+      columnSpacing: columnSpacingProp = spacingProp
+    } = props,
+          rest = _objectWithoutPropertiesLoose(props, _excluded); // collect breakpoints related props because they can be custom from the theme.
+
+
+    const gridSize = {};
+    const gridOffset = {};
+    const other = {};
+    Object.entries(rest).forEach(([key, val]) => {
+      if (theme.breakpoints.values[key] !== undefined) {
+        gridSize[key] = val;
+      } else if (theme.breakpoints.values[key.replace('Offset', '')] !== undefined) {
+        gridOffset[key.replace('Offset', '')] = val;
+      } else {
+        other[key] = val;
+      }
+    });
+    const columns = inProps.columns ?? (nested ? undefined : columnsProp);
+    const spacing = inProps.spacing ?? (nested ? undefined : spacingProp);
+    const rowSpacing = inProps.rowSpacing ?? inProps.spacing ?? (nested ? undefined : rowSpacingProp);
+    const columnSpacing = inProps.columnSpacing ?? inProps.spacing ?? (nested ? undefined : columnSpacingProp);
+
+    const ownerState = _extends({}, props, {
+      nested,
+      columns,
+      container,
+      direction,
+      wrap,
+      spacing,
+      rowSpacing,
+      columnSpacing,
+      gridSize,
+      gridOffset
+    });
+
+    const classes = useUtilityClasses(ownerState, theme);
+
+    let result = /*#__PURE__*/_jsx(GridRoot, _extends({
+      ref: ref,
+      as: component,
+      ownerState: ownerState,
+      className: clsx(classes.root, className)
+    }, other));
+
+    if (!nested) {
+      result = /*#__PURE__*/_jsx(NestedContext.Provider, {
+        value: true,
+        children: result
+      });
+    }
+
+    return result;
+  });
+  process.env.NODE_ENV !== "production" ? Grid.propTypes
+  /* remove-proptypes */
+  = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    columns: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number, PropTypes.object]),
+    columnSpacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+    component: PropTypes.elementType,
+    container: PropTypes.bool,
+    direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
+    lg: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+    lgOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
+    md: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+    mdOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
+    rowSpacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+    sm: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+    smOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
+    spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+    wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
+    xl: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+    xlOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
+    xs: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+    xsOffset: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
+  } : void 0;
+  return Grid;
+}

package/modern/Unstable_Grid/gridClasses.js

@@ -0,0 +1,14 @@
+import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+export function getGridUtilityClass(slot) {
+  return generateUtilityClass('MuiGrid', slot);
+}
+const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+const DIRECTIONS = ['column-reverse', 'column', 'row-reverse', 'row'];
+const WRAPS = ['nowrap', 'wrap-reverse', 'wrap'];
+const GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+const gridClasses = generateUtilityClasses('MuiGrid', ['root', 'container', 'item', // spacings
+...SPACINGS.map(spacing => `spacing-xs-${spacing}`), // direction values
+...DIRECTIONS.map(direction => `direction-xs-${direction}`), // wrap values
+...WRAPS.map(wrap => `wrap-xs-${wrap}`), // grid sizes for all breakpoints
+...GRID_SIZES.map(size => `grid-xs-${size}`), ...GRID_SIZES.map(size => `grid-sm-${size}`), ...GRID_SIZES.map(size => `grid-md-${size}`), ...GRID_SIZES.map(size => `grid-lg-${size}`), ...GRID_SIZES.map(size => `grid-xl-${size}`)]);
+export default gridClasses;