@mui/system 6.1.1 → 6.1.3

package/Grid/gridGenerator.js

@@ -1,39 +1,24 @@
-import { traverseBreakpoints } from "./traverseBreakpoints.js";
-function appendLevel(level) {
-  if (!level) {
-    return '';
-  }
-  return `Level${level}`;
-}
-function isNestedContainer(ownerState) {
-  return ownerState.unstable_level > 0 && ownerState.container;
-}
-function createGetSelfSpacing(ownerState) {
-  return function getSelfSpacing(axis) {
-    return `var(--Grid-${axis}Spacing${appendLevel(ownerState.unstable_level)})`;
-  };
-}
-function createGetParentSpacing(ownerState) {
-  return function getParentSpacing(axis) {
-    if (ownerState.unstable_level === 0) {
-      return `var(--Grid-${axis}Spacing)`;
-    }
-    return `var(--Grid-${axis}Spacing${appendLevel(ownerState.unstable_level - 1)})`;
-  };
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateSpacingClassNames = exports.generateSizeClassNames = exports.generateGridStyles = exports.generateGridSizeStyles = exports.generateGridRowSpacingStyles = exports.generateGridOffsetStyles = exports.generateGridDirectionStyles = exports.generateGridColumnsStyles = exports.generateGridColumnSpacingStyles = exports.generateDirectionClasses = void 0;
+var _traverseBreakpoints = require("./traverseBreakpoints");
+function getSelfSpacingVar(axis) {
+  return `--Grid-${axis}Spacing`;
 }
-function getParentColumns(ownerState) {
-  if (ownerState.unstable_level === 0) {
-    return `var(--Grid-columns)`;
-  }
-  return `var(--Grid-columns${appendLevel(ownerState.unstable_level - 1)})`;
+function getParentSpacingVar(axis) {
+  return `--Grid-parent-${axis}Spacing`;
 }
-export const generateGridSizeStyles = ({
+const selfColumnsVar = '--Grid-columns';
+const parentColumnsVar = '--Grid-parent-columns';
+const generateGridSizeStyles = ({
   theme,
   ownerState
 }) => {
-  const getParentSpacing = createGetParentSpacing(ownerState);
   const styles = {};
-  traverseBreakpoints(theme.breakpoints, ownerState.size, (appendStyle, value) => {
+  (0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.size, (appendStyle, value) => {
     let style = {};
     if (value === 'grow') {
       style = {
@@ -55,20 +40,20 @@ export const generateGridSizeStyles = ({
       style = {
         flexGrow: 0,
         flexBasis: 'auto',
-        width: `calc(100% * ${value} / ${getParentColumns(ownerState)} - (${getParentColumns(ownerState)} - ${value}) * (${getParentSpacing('column')} / ${getParentColumns(ownerState)}))`
+        width: `calc(100% * ${value} / var(${parentColumnsVar}) - (var(${parentColumnsVar}) - ${value}) * (var(${getParentSpacingVar('column')}) / var(${parentColumnsVar})))`
       };
     }
     appendStyle(styles, style);
   });
   return styles;
 };
-export const generateGridOffsetStyles = ({
+exports.generateGridSizeStyles = generateGridSizeStyles;
+const generateGridOffsetStyles = ({
   theme,
   ownerState
 }) => {
-  const getParentSpacing = createGetParentSpacing(ownerState);
   const styles = {};
-  traverseBreakpoints(theme.breakpoints, ownerState.offset, (appendStyle, value) => {
+  (0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.offset, (appendStyle, value) => {
     let style = {};
     if (value === 'auto') {
       style = {
@@ -77,73 +62,77 @@ export const generateGridOffsetStyles = ({
     }
     if (typeof value === 'number') {
       style = {
-        marginLeft: value === 0 ? '0px' : `calc(100% * ${value} / ${getParentColumns(ownerState)} + ${getParentSpacing('column')} * ${value} / ${getParentColumns(ownerState)})`
+        marginLeft: value === 0 ? '0px' : `calc(100% * ${value} / var(${parentColumnsVar}) + var(${getParentSpacingVar('column')}) * ${value} / var(${parentColumnsVar}))`
       };
     }
     appendStyle(styles, style);
   });
   return styles;
 };
-export const generateGridColumnsStyles = ({
+exports.generateGridOffsetStyles = generateGridOffsetStyles;
+const generateGridColumnsStyles = ({
   theme,
   ownerState
 }) => {
   if (!ownerState.container) {
     return {};
   }
-  const styles = isNestedContainer(ownerState) ? {
-    [`--Grid-columns${appendLevel(ownerState.unstable_level)}`]: getParentColumns(ownerState)
-  } : {
-    '--Grid-columns': 12
+  const styles = {
+    [selfColumnsVar]: 12
   };
-  traverseBreakpoints(theme.breakpoints, ownerState.columns, (appendStyle, value) => {
+  (0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.columns, (appendStyle, value) => {
+    const columns = value ?? 12;
     appendStyle(styles, {
-      [`--Grid-columns${appendLevel(ownerState.unstable_level)}`]: value
+      [selfColumnsVar]: columns,
+      '> *': {
+        [parentColumnsVar]: columns
+      }
     });
   });
   return styles;
 };
-export const generateGridRowSpacingStyles = ({
+exports.generateGridColumnsStyles = generateGridColumnsStyles;
+const generateGridRowSpacingStyles = ({
   theme,
   ownerState
 }) => {
   if (!ownerState.container) {
     return {};
   }
-  const getParentSpacing = createGetParentSpacing(ownerState);
-  const styles = isNestedContainer(ownerState) ? {
-    // Set the default spacing as its parent spacing.
-    // It will be overridden if spacing props are provided
-    [`--Grid-rowSpacing${appendLevel(ownerState.unstable_level)}`]: getParentSpacing('row')
-  } : {};
-  traverseBreakpoints(theme.breakpoints, ownerState.rowSpacing, (appendStyle, value) => {
+  const styles = {};
+  (0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.rowSpacing, (appendStyle, value) => {
+    const spacing = typeof value === 'string' ? value : theme.spacing?.(value);
     appendStyle(styles, {
-      [`--Grid-rowSpacing${appendLevel(ownerState.unstable_level)}`]: typeof value === 'string' ? value : theme.spacing?.(value)
+      [getSelfSpacingVar('row')]: spacing,
+      '> *': {
+        [getParentSpacingVar('row')]: spacing
+      }
     });
   });
   return styles;
 };
-export const generateGridColumnSpacingStyles = ({
+exports.generateGridRowSpacingStyles = generateGridRowSpacingStyles;
+const generateGridColumnSpacingStyles = ({
   theme,
   ownerState
 }) => {
   if (!ownerState.container) {
     return {};
   }
-  const getParentSpacing = createGetParentSpacing(ownerState);
-  const styles = isNestedContainer(ownerState) ? {
-    // Set the default spacing as its parent spacing.
-    // It will be overridden if spacing props are provided
-    [`--Grid-columnSpacing${appendLevel(ownerState.unstable_level)}`]: getParentSpacing('column')
-  } : {};
-  traverseBreakpoints(theme.breakpoints, ownerState.columnSpacing, (appendStyle, value) => {
+  const styles = {};
+  (0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.columnSpacing, (appendStyle, value) => {
+    const spacing = typeof value === 'string' ? value : theme.spacing?.(value);
     appendStyle(styles, {
-      [`--Grid-columnSpacing${appendLevel(ownerState.unstable_level)}`]: typeof value === 'string' ? value : theme.spacing?.(value)
+      [getSelfSpacingVar('column')]: spacing,
+      '> *': {
+        [getParentSpacingVar('column')]: spacing
+      }
     });
   });
   return styles;
 };
-export const generateGridDirectionStyles = ({
+exports.generateGridColumnSpacingStyles = generateGridColumnSpacingStyles;
+const generateGridDirectionStyles = ({
   theme,
   ownerState
 }) => {
@@ -151,17 +140,17 @@ export const generateGridDirectionStyles = ({
     return {};
   }
   const styles = {};
-  traverseBreakpoints(theme.breakpoints, ownerState.direction, (appendStyle, value) => {
+  (0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.direction, (appendStyle, value) => {
     appendStyle(styles, {
       flexDirection: value
     });
   });
   return styles;
 };
-export const generateGridStyles = ({
+exports.generateGridDirectionStyles = generateGridDirectionStyles;
+const generateGridStyles = ({
   ownerState
 }) => {
-  const getSelfSpacing = createGetSelfSpacing(ownerState);
   return {
     minWidth: 0,
     boxSizing: 'border-box',
@@ -171,11 +160,12 @@ export const generateGridStyles = ({
       ...(ownerState.wrap && ownerState.wrap !== 'wrap' && {
         flexWrap: ownerState.wrap
       }),
-      gap: `${getSelfSpacing('row')} ${getSelfSpacing('column')}`
+      gap: `var(${getSelfSpacingVar('row')}) var(${getSelfSpacingVar('column')})`
     })
   };
 };
-export const generateSizeClassNames = size => {
+exports.generateGridStyles = generateGridStyles;
+const generateSizeClassNames = size => {
   const classNames = [];
   Object.entries(size).forEach(([key, value]) => {
     if (value !== false && value !== undefined) {
@@ -184,7 +174,8 @@ export const generateSizeClassNames = size => {
   });
   return classNames;
 };
-export const generateSpacingClassNames = (spacing, smallestBreakpoint = 'xs') => {
+exports.generateSizeClassNames = generateSizeClassNames;
+const generateSpacingClassNames = (spacing, smallestBreakpoint = 'xs') => {
   function isValidSpacing(val) {
     if (val === undefined) {
       return false;
@@ -205,7 +196,8 @@ export const generateSpacingClassNames = (spacing, smallestBreakpoint = 'xs') =>
   }
   return [];
 };
-export const generateDirectionClasses = direction => {
+exports.generateSpacingClassNames = generateSpacingClassNames;
+const generateDirectionClasses = direction => {
   if (direction === undefined) {
     return [];
   }
@@ -213,4 +205,5 @@ export const generateDirectionClasses = direction => {
     return Object.entries(direction).map(([key, value]) => `direction-${key}-${value}`);
   }
   return [`direction-xs-${String(direction)}`];
-};
+};
+exports.generateDirectionClasses = generateDirectionClasses;

package/Grid/index.js

@@ -1,6 +1,63 @@
-export { default } from "./Grid.js";
-export { default as createGrid } from "./createGrid.js";
-export * from "./GridProps.js";
-export { default as gridClasses } from "./gridClasses.js";
-export * from "./gridClasses.js";
-export { traverseBreakpoints as unstable_traverseBreakpoints } from "./traverseBreakpoints.js";
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  createGrid: true,
+  gridClasses: true,
+  unstable_traverseBreakpoints: true
+};
+Object.defineProperty(exports, "createGrid", {
+  enumerable: true,
+  get: function () {
+    return _createGrid.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Grid.default;
+  }
+});
+Object.defineProperty(exports, "gridClasses", {
+  enumerable: true,
+  get: function () {
+    return _gridClasses.default;
+  }
+});
+Object.defineProperty(exports, "unstable_traverseBreakpoints", {
+  enumerable: true,
+  get: function () {
+    return _traverseBreakpoints.traverseBreakpoints;
+  }
+});
+var _Grid = _interopRequireDefault(require("./Grid"));
+var _createGrid = _interopRequireDefault(require("./createGrid"));
+var _GridProps = require("./GridProps");
+Object.keys(_GridProps).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _GridProps[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridProps[key];
+    }
+  });
+});
+var _gridClasses = _interopRequireWildcard(require("./gridClasses"));
+Object.keys(_gridClasses).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _gridClasses[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridClasses[key];
+    }
+  });
+});
+var _traverseBreakpoints = require("./traverseBreakpoints");

package/Grid/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/Grid/index.js",
+  "module": "../esm/Grid/index.js",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/Grid/traverseBreakpoints.js

@@ -1,5 +1,12 @@
-export const filterBreakpointKeys = (breakpointsKeys, responsiveKeys) => breakpointsKeys.filter(key => responsiveKeys.includes(key));
-export const traverseBreakpoints = (breakpoints, responsive, iterator) => {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.traverseBreakpoints = exports.filterBreakpointKeys = void 0;
+const filterBreakpointKeys = (breakpointsKeys, responsiveKeys) => breakpointsKeys.filter(key => responsiveKeys.includes(key));
+exports.filterBreakpointKeys = filterBreakpointKeys;
+const traverseBreakpoints = (breakpoints, responsive, iterator) => {
   const smallestBreakpoint = breakpoints.keys[0]; // the keys is sorted from smallest to largest by `createBreakpoints`.
 
   if (Array.isArray(responsive)) {
@@ -39,4 +46,5 @@ export const traverseBreakpoints = (breakpoints, responsive, iterator) => {
       Object.assign(responsiveStyles, style);
     }, responsive);
   }
-};
+};
+exports.traverseBreakpoints = traverseBreakpoints;

package/InitColorSchemeScript/InitColorSchemeScript.js

@@ -1,12 +1,21 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_MODE_STORAGE_KEY = exports.DEFAULT_COLOR_SCHEME_STORAGE_KEY = exports.DEFAULT_ATTRIBUTE = void 0;
+exports.default = InitColorSchemeScript;
+var React = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Split this component for RSC import
  */
-import * as React from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
-export const DEFAULT_MODE_STORAGE_KEY = 'mode';
-export const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
-export const DEFAULT_ATTRIBUTE = 'data-color-scheme';
-export default function InitColorSchemeScript(options) {
+
+const DEFAULT_MODE_STORAGE_KEY = exports.DEFAULT_MODE_STORAGE_KEY = 'mode';
+const DEFAULT_COLOR_SCHEME_STORAGE_KEY = exports.DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
+const DEFAULT_ATTRIBUTE = exports.DEFAULT_ATTRIBUTE = 'data-color-scheme';
+function InitColorSchemeScript(options) {
   const {
     defaultLightColorScheme = 'light',
     defaultDarkColorScheme = 'dark',
@@ -41,7 +50,7 @@ export default function InitColorSchemeScript(options) {
   } else {
     setter += `${colorSchemeNode}.setAttribute('${attribute}', colorScheme);`;
   }
-  return /*#__PURE__*/_jsx("script", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("script", {
     suppressHydrationWarning: true,
     nonce: typeof window === 'undefined' ? nonce : ''
     // eslint-disable-next-line react/no-danger

package/InitColorSchemeScript/index.js

@@ -1 +1,13 @@
-export { default } from "./InitColorSchemeScript.js";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _InitColorSchemeScript.default;
+  }
+});
+var _InitColorSchemeScript = _interopRequireDefault(require("./InitColorSchemeScript"));

package/InitColorSchemeScript/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/InitColorSchemeScript/index.js",
+  "module": "../esm/InitColorSchemeScript/index.js",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/RtlProvider/index.js

@@ -1,22 +1,31 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { jsx as _jsx } from "react/jsx-runtime";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRtl = exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _jsxRuntime = require("react/jsx-runtime");
 const RtlContext = /*#__PURE__*/React.createContext();
 function RtlProvider({
   value,
   ...props
 }) {
-  return /*#__PURE__*/_jsx(RtlContext.Provider, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RtlContext.Provider, {
     value: value ?? true,
     ...props
   });
 }
 process.env.NODE_ENV !== "production" ? RtlProvider.propTypes = {
-  children: PropTypes.node,
-  value: PropTypes.bool
+  children: _propTypes.default.node,
+  value: _propTypes.default.bool
 } : void 0;
-export const useRtl = () => {
+const useRtl = () => {
   const value = React.useContext(RtlContext);
   return value ?? false;
 };
-export default RtlProvider;
+exports.useRtl = useRtl;
+var _default = exports.default = RtlProvider;

package/RtlProvider/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/RtlProvider/index.js",
+  "module": "../esm/RtlProvider/index.js",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/Stack/Stack.js

@@ -1,7 +1,13 @@
+"use strict";
 'use client';
 
-import PropTypes from 'prop-types';
-import createStack from "./createStack.js";
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _createStack = _interopRequireDefault(require("./createStack"));
 /**
  *
  * Demos:
@@ -14,7 +20,7 @@ import createStack from "./createStack.js";
  *
  * - [Stack API](https://mui.com/system/api/stack/)
  */
-const Stack = createStack();
+const Stack = (0, _createStack.default)();
 process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
@@ -23,31 +29,31 @@ process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ =
   /**
    * The content of the component.
    */
-  children: PropTypes.node,
+  children: _propTypes.default.node,
   /**
    * 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,
   /**
    * Defines the `flex-direction` style property.
    * It is applied for all screen sizes.
    * @default 'column'
    */
-  direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
+  direction: _propTypes.default.oneOfType([_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), _propTypes.default.arrayOf(_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), _propTypes.default.object]),
   /**
    * Add an element between each child.
    */
-  divider: PropTypes.node,
+  divider: _propTypes.default.node,
   /**
    * Defines the space between immediate children.
    * @default 0
    */
-  spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+  spacing: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.string]),
   /**
    * The system prop, which 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]),
   /**
    * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
    *
@@ -57,6 +63,6 @@ process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ =
    * To enable this flag globally, follow the theme's default props configuration.
    * @default false
    */
-  useFlexGap: PropTypes.bool
+  useFlexGap: _propTypes.default.bool
 } : void 0;
-export default Stack;
+var _default = exports.default = Stack;

package/Stack/StackProps.js

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