@mui/system 6.0.0-alpha.1 → 6.0.0-alpha.4

package/modern/cssVars/prepareTypographyVars.js

@@ -0,0 +1,11 @@
+export default function prepareTypographyVars(typography) {
+  const vars = {};
+  const entries = Object.entries(typography);
+  entries.forEach(entry => {
+    const [key, value] = entry;
+    if (typeof value === 'object') {
+      vars[key] = `${value.fontStyle ? `${value.fontStyle} ` : ''}${value.fontVariant ? `${value.fontVariant} ` : ''}${value.fontWeight ? `${value.fontWeight} ` : ''}${value.fontStretch ? `${value.fontStretch} ` : ''}${value.fontSize || ''}${value.lineHeight ? `/${value.lineHeight} ` : ''}${value.fontFamily || ''}`;
+    }
+  });
+  return vars;
+}

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v6.0.0-alpha.1
+ * @mui/system v6.0.0-alpha.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -11,6 +11,7 @@ export { default as GlobalStyles } from './GlobalStyles';
 export { default as borders } from './borders';
 export * from './borders';
 export { default as breakpoints } from './breakpoints';
+export { default as cssContainerQueries } from './cssContainerQueries';
 export { handleBreakpoints, mergeBreakpointsInOrder, resolveBreakpointValues as unstable_resolveBreakpointValues } from './breakpoints';
 export { default as compose } from './compose';
 export { default as display } from './display';

package/modern/styleFunctionSx/defaultSxConfig.js

@@ -267,6 +267,9 @@ const defaultSxConfig = {
   },
   boxSizing: {},
   // typography
+  font: {
+    themeKey: 'font'
+  },
   fontFamily: {
     themeKey: 'typography'
   },

package/modern/styleFunctionSx/styleFunctionSx.js

@@ -2,6 +2,7 @@ import capitalize from '@mui/utils/capitalize';
 import merge from '../merge';
 import { getPath, getStyleValue as getValue } from '../style';
 import { handleBreakpoints, createEmptyBreakpointObject, removeUnusedBreakpoints } from '../breakpoints';
+import { sortContainerQueries } from '../cssContainerQueries';
 import defaultSxConfig from './defaultSxConfig';
 function objectsHaveSameKeys(...objects) {
   const allKeys = objects.reduce((keys, object) => keys.concat(Object.keys(object)), []);
@@ -115,7 +116,7 @@ export function unstable_createStyleFunctionSx() {
           }
         }
       });
-      return removeUnusedBreakpoints(breakpointsKeys, css);
+      return sortContainerQueries(theme, removeUnusedBreakpoints(breakpointsKeys, css));
     }
     return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
   }

package/node/breakpoints/breakpoints.js

@@ -16,6 +16,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
 var _merge = _interopRequireDefault(require("../merge"));
+var _cssContainerQueries = require("../cssContainerQueries");
 // The breakpoint **start** at this value.
 // For instance with the first breakpoint xs: [xs, sm[.
 const values = exports.values = {
@@ -35,6 +36,17 @@ const defaultBreakpoints = {
   keys: ['xs', 'sm', 'md', 'lg', 'xl'],
   up: key => `@media (min-width:${values[key]}px)`
 };
+const defaultContainerQueries = {
+  containerQueries: containerName => ({
+    up: key => {
+      let result = typeof key === 'number' ? key : values[key] || key;
+      if (typeof result === 'number') {
+        result = `${result}px`;
+      }
+      return containerName ? `@container ${containerName} (min-width:${result})` : `@container (min-width:${result})`;
+    }
+  })
+};
 function handleBreakpoints(props, propValue, styleFromPropValue) {
   const theme = props.theme || {};
   if (Array.isArray(propValue)) {
@@ -47,8 +59,14 @@ function handleBreakpoints(props, propValue, styleFromPropValue) {
   if (typeof propValue === 'object') {
     const themeBreakpoints = theme.breakpoints || defaultBreakpoints;
     return Object.keys(propValue).reduce((acc, breakpoint) => {
+      if ((0, _cssContainerQueries.isCqShorthand)(themeBreakpoints.keys, breakpoint)) {
+        const containerKey = (0, _cssContainerQueries.getContainerQuery)(theme.containerQueries ? theme : defaultContainerQueries, breakpoint);
+        if (containerKey) {
+          acc[containerKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
+        }
+      }
       // key is breakpoint
-      if (Object.keys(themeBreakpoints.values || values).indexOf(breakpoint) !== -1) {
+      else if (Object.keys(themeBreakpoints.values || values).indexOf(breakpoint) !== -1) {
         const mediaKey = themeBreakpoints.up(breakpoint);
         acc[mediaKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
       } else {

package/node/createTheme/createTheme.js

@@ -9,6 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
 var _createBreakpoints = _interopRequireDefault(require("./createBreakpoints"));
+var _cssContainerQueries = _interopRequireDefault(require("../cssContainerQueries"));
 var _shape = _interopRequireDefault(require("./shape"));
 var _createSpacing = _interopRequireDefault(require("./createSpacing"));
 var _styleFunctionSx = _interopRequireDefault(require("../styleFunctionSx/styleFunctionSx"));
@@ -36,6 +37,7 @@ function createTheme(options = {}, ...args) {
     spacing,
     shape: (0, _extends2.default)({}, _shape.default, shapeInput)
   }, other);
+  muiTheme = (0, _cssContainerQueries.default)(muiTheme);
   muiTheme.applyStyles = _applyStyles.default;
   muiTheme = args.reduce((acc, argument) => (0, _deepmerge.default)(acc, argument), muiTheme);
   muiTheme.unstable_sxConfig = (0, _extends2.default)({}, _defaultSxConfig.default, other == null ? void 0 : other.unstable_sxConfig);

package/node/cssContainerQueries/cssContainerQueries.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = cssContainerQueries;
+exports.getContainerQuery = getContainerQuery;
+exports.isCqShorthand = isCqShorthand;
+exports.sortContainerQueries = sortContainerQueries;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _formatMuiErrorMessage2 = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
+/**
+ * For using in `sx` prop to sort the breakpoint from low to high.
+ * Note: this function does not work and will not support multiple units.
+ *       e.g. input: { '@container (min-width:300px)': '1rem', '@container (min-width:40rem)': '2rem' }
+ *            output: { '@container (min-width:40rem)': '2rem', '@container (min-width:300px)': '1rem' } // since 40 < 300 eventhough 40rem > 300px
+ */
+function sortContainerQueries(theme, css) {
+  if (!theme.containerQueries) {
+    return css;
+  }
+  const sorted = Object.keys(css).filter(key => key.startsWith('@container')).sort((a, b) => {
+    var _a$match, _b$match;
+    const regex = /min-width:\s*([0-9.]+)/;
+    return +(((_a$match = a.match(regex)) == null ? void 0 : _a$match[1]) || 0) - +(((_b$match = b.match(regex)) == null ? void 0 : _b$match[1]) || 0);
+  });
+  if (!sorted.length) {
+    return css;
+  }
+  return sorted.reduce((acc, key) => {
+    const value = css[key];
+    delete acc[key];
+    acc[key] = value;
+    return acc;
+  }, (0, _extends2.default)({}, css));
+}
+function isCqShorthand(breakpointKeys, value) {
+  return value.startsWith('@') && (breakpointKeys.some(key => value.startsWith(`@${key}`)) || !!value.match(/^@\d/));
+}
+function getContainerQuery(theme, shorthand) {
+  const matches = shorthand.match(/^@([^/]+)\/?(.+)?$/);
+  if (!matches) {
+    if (process.env.NODE_ENV !== 'production') {
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The provided shorthand ${`(${shorthand})`} is invalid. The format should be \`@<breakpoint | number>\` or \`@<breakpoint | number>/<container>\`.
+For example, \`@sm\` or \`@600\` or \`@40rem/sidebar\`.` : (0, _formatMuiErrorMessage2.default)(21, `(${shorthand})`));
+    }
+    return null;
+  }
+  const [, containerQuery, containerName] = matches;
+  const value = Number.isNaN(+containerQuery) ? containerQuery : +containerQuery;
+  return theme.containerQueries(containerName).up(value);
+}
+function cssContainerQueries(themeInput) {
+  const toContainerQuery = (mediaQuery, name) => mediaQuery.replace('@media', name ? `@container ${name}` : '@container');
+  function attachCq(node, name) {
+    node.up = (...args) => toContainerQuery(themeInput.breakpoints.up(...args), name);
+    node.down = (...args) => toContainerQuery(themeInput.breakpoints.down(...args), name);
+    node.between = (...args) => toContainerQuery(themeInput.breakpoints.between(...args), name);
+    node.only = (...args) => toContainerQuery(themeInput.breakpoints.only(...args), name);
+    node.not = (...args) => {
+      const result = toContainerQuery(themeInput.breakpoints.not(...args), name);
+      if (result.includes('not all and')) {
+        // `@container` does not work with `not all and`, so need to invert the logic
+        return result.replace('not all and ', '').replace('min-width:', 'width<').replace('max-width:', 'width>');
+      }
+      return result;
+    };
+  }
+  const node = {};
+  const containerQueries = name => {
+    attachCq(node, name);
+    return node;
+  };
+  attachCq(containerQueries);
+  return (0, _extends2.default)({}, themeInput, {
+    containerQueries
+  });
+}

package/node/cssContainerQueries/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _cssContainerQueries.default;
+  }
+});
+Object.defineProperty(exports, "getContainerQuery", {
+  enumerable: true,
+  get: function () {
+    return _cssContainerQueries.getContainerQuery;
+  }
+});
+Object.defineProperty(exports, "isCqShorthand", {
+  enumerable: true,
+  get: function () {
+    return _cssContainerQueries.isCqShorthand;
+  }
+});
+Object.defineProperty(exports, "sortContainerQueries", {
+  enumerable: true,
+  get: function () {
+    return _cssContainerQueries.sortContainerQueries;
+  }
+});
+var _cssContainerQueries = _interopRequireWildcard(require("./cssContainerQueries"));
+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/node/cssVars/index.js

@@ -29,7 +29,14 @@ Object.defineProperty(exports, "prepareCssVars", {
     return _prepareCssVars.default;
   }
 });
+Object.defineProperty(exports, "prepareTypographyVars", {
+  enumerable: true,
+  get: function () {
+    return _prepareTypographyVars.default;
+  }
+});
 var _createCssVarsProvider = _interopRequireDefault(require("./createCssVarsProvider"));
 var _getInitColorSchemeScript = _interopRequireDefault(require("./getInitColorSchemeScript"));
 var _prepareCssVars = _interopRequireDefault(require("./prepareCssVars"));
+var _prepareTypographyVars = _interopRequireDefault(require("./prepareTypographyVars"));
 var _createCssVarsTheme = _interopRequireDefault(require("./createCssVarsTheme"));

package/node/cssVars/prepareTypographyVars.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = prepareTypographyVars;
+function prepareTypographyVars(typography) {
+  const vars = {};
+  const entries = Object.entries(typography);
+  entries.forEach(entry => {
+    const [key, value] = entry;
+    if (typeof value === 'object') {
+      vars[key] = `${value.fontStyle ? `${value.fontStyle} ` : ''}${value.fontVariant ? `${value.fontVariant} ` : ''}${value.fontWeight ? `${value.fontWeight} ` : ''}${value.fontStretch ? `${value.fontStretch} ` : ''}${value.fontSize || ''}${value.lineHeight ? `/${value.lineHeight} ` : ''}${value.fontFamily || ''}`;
+    }
+  });
+  return vars;
+}

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v6.0.0-alpha.1
+ * @mui/system v6.0.0-alpha.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -22,6 +22,7 @@ var _exportNames = {
   handleBreakpoints: true,
   mergeBreakpointsInOrder: true,
   unstable_resolveBreakpointValues: true,
+  cssContainerQueries: true,
   compose: true,
   display: true,
   flexbox: true,
@@ -174,6 +175,12 @@ Object.defineProperty(exports, "css", {
     return _styledEngine.css;
   }
 });
+Object.defineProperty(exports, "cssContainerQueries", {
+  enumerable: true,
+  get: function () {
+    return _cssContainerQueries.default;
+  }
+});
 Object.defineProperty(exports, "display", {
   enumerable: true,
   get: function () {
@@ -395,6 +402,7 @@ Object.keys(_borders).forEach(function (key) {
   });
 });
 var _breakpoints = _interopRequireWildcard(require("./breakpoints"));
+var _cssContainerQueries = _interopRequireDefault(require("./cssContainerQueries"));
 var _compose = _interopRequireDefault(require("./compose"));
 var _display = _interopRequireDefault(require("./display"));
 var _flexbox = _interopRequireWildcard(require("./flexbox"));

package/node/styleFunctionSx/defaultSxConfig.js

@@ -273,6 +273,9 @@ const defaultSxConfig = {
   },
   boxSizing: {},
   // typography
+  font: {
+    themeKey: 'font'
+  },
   fontFamily: {
     themeKey: 'typography'
   },

package/node/styleFunctionSx/styleFunctionSx.js

@@ -10,6 +10,7 @@ var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
 var _merge = _interopRequireDefault(require("../merge"));
 var _style = require("../style");
 var _breakpoints = require("../breakpoints");
+var _cssContainerQueries = require("../cssContainerQueries");
 var _defaultSxConfig = _interopRequireDefault(require("./defaultSxConfig"));
 function objectsHaveSameKeys(...objects) {
   const allKeys = objects.reduce((keys, object) => keys.concat(Object.keys(object)), []);
@@ -124,7 +125,7 @@ function unstable_createStyleFunctionSx() {
           }
         }
       });
-      return (0, _breakpoints.removeUnusedBreakpoints)(breakpointsKeys, css);
+      return (0, _cssContainerQueries.sortContainerQueries)(theme, (0, _breakpoints.removeUnusedBreakpoints)(breakpointsKeys, css));
     }
     return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "6.0.0-alpha.1",
+  "version": "6.0.0-alpha.4",
   "private": false,
   "author": "MUI Team",
   "description": "MUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.",
@@ -30,10 +30,10 @@
     "clsx": "^2.1.0",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
-    "@mui/private-theming": "^6.0.0-alpha.1",
-    "@mui/styled-engine": "^6.0.0-alpha.1",
-    "@mui/utils": "^6.0.0-alpha.1",
-    "@mui/types": "^7.2.14"
+    "@mui/utils": "^6.0.0-alpha.3",
+    "@mui/private-theming": "^6.0.0-alpha.3",
+    "@mui/types": "^7.2.14",
+    "@mui/styled-engine": "^6.0.0-alpha.3"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

package/styleFunctionSx/defaultSxConfig.js

@@ -267,6 +267,9 @@ const defaultSxConfig = {
   },
   boxSizing: {},
   // typography
+  font: {
+    themeKey: 'font'
+  },
   fontFamily: {
     themeKey: 'typography'
   },

package/styleFunctionSx/styleFunctionSx.js

@@ -2,6 +2,7 @@ import capitalize from '@mui/utils/capitalize';
 import merge from '../merge';
 import { getPath, getStyleValue as getValue } from '../style';
 import { handleBreakpoints, createEmptyBreakpointObject, removeUnusedBreakpoints } from '../breakpoints';
+import { sortContainerQueries } from '../cssContainerQueries';
 import defaultSxConfig from './defaultSxConfig';
 function objectsHaveSameKeys(...objects) {
   const allKeys = objects.reduce((keys, object) => keys.concat(Object.keys(object)), []);
@@ -115,7 +116,7 @@ export function unstable_createStyleFunctionSx() {
           }
         }
       });
-      return removeUnusedBreakpoints(breakpointsKeys, css);
+      return sortContainerQueries(theme, removeUnusedBreakpoints(breakpointsKeys, css));
     }
     return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
   }

package/legacy/Box/Box.js

@@ -1,30 +0,0 @@
-'use client';
-
-import PropTypes from 'prop-types';
-import ClassNameGenerator from '@mui/utils/ClassNameGenerator';
-import createBox from '../createBox';
-import boxClasses from './boxClasses';
-var Box = createBox({
-  defaultClassName: boxClasses.root,
-  generateClassName: ClassNameGenerator.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.node,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
-   * 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])
-} : void 0;
-export default Box;

package/legacy/Box/boxClasses.js

@@ -1,3 +0,0 @@
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-var boxClasses = generateUtilityClasses('MuiBox', ['root']);
-export default boxClasses;

package/legacy/Box/index.js

@@ -1,5 +0,0 @@
-'use client';
-
-export { default } from './Box';
-export { default as boxClasses } from './boxClasses';
-export * from './boxClasses';

package/legacy/Container/Container.js

@@ -1,61 +0,0 @@
-'use client';
-
-import PropTypes from 'prop-types';
-import createContainer from './createContainer';
-
-/**
- *
- * Demos:
- *
- * - [Container (Material UI)](https://mui.com/material-ui/react-container/)
- * - [Container (MUI System)](https://mui.com/system/react-container/)
- *
- * API:
- *
- * - [Container API](https://mui.com/system/api/container/)
- */
-var Container = createContainer();
-process.env.NODE_ENV !== "production" ? Container.propTypes /* remove-proptypes */ = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * @ignore
-   */
-  children: PropTypes.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
-   * If `true`, the left and right padding is removed.
-   * @default false
-   */
-  disableGutters: PropTypes.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
-   * instead of trying to accommodate a fully fluid viewport.
-   * It's fluid by default.
-   * @default false
-   */
-  fixed: PropTypes.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]),
-  /**
-   * 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])
-} : void 0;
-export default Container;

package/legacy/Container/ContainerProps.js

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

package/legacy/Container/containerClasses.js

@@ -1,7 +0,0 @@
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-export function getContainerUtilityClass(slot) {
-  return generateUtilityClass('MuiContainer', slot);
-}
-var containerClasses = generateUtilityClasses('MuiContainer', ['root', 'disableGutters', 'fixed', 'maxWidthXs', 'maxWidthSm', 'maxWidthMd', 'maxWidthLg', 'maxWidthXl']);
-export default containerClasses;

package/legacy/Container/createContainer.js

@@ -1,140 +0,0 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import composeClasses from '@mui/utils/composeClasses';
-import capitalize from '@mui/utils/capitalize';
-import useThemePropsSystem from '../useThemeProps';
-import systemStyled from '../styled';
-import createTheme from '../createTheme';
-import { jsx as _jsx } from "react/jsx-runtime";
-var defaultTheme = createTheme();
-var defaultCreateStyledComponent = systemStyled('div', {
-  name: 'MuiContainer',
-  slot: 'Root',
-  overridesResolver: function overridesResolver(props, styles) {
-    var ownerState = props.ownerState;
-    return [styles.root, styles["maxWidth".concat(capitalize(String(ownerState.maxWidth)))], ownerState.fixed && styles.fixed, ownerState.disableGutters && styles.disableGutters];
-  }
-});
-var useThemePropsDefault = function useThemePropsDefault(inProps) {
-  return useThemePropsSystem({
-    props: inProps,
-    name: 'MuiContainer',
-    defaultTheme: defaultTheme
-  });
-};
-var useUtilityClasses = function useUtilityClasses(ownerState, componentName) {
-  var getContainerUtilityClass = function getContainerUtilityClass(slot) {
-    return generateUtilityClass(componentName, slot);
-  };
-  var classes = ownerState.classes,
-    fixed = ownerState.fixed,
-    disableGutters = ownerState.disableGutters,
-    maxWidth = ownerState.maxWidth;
-  var slots = {
-    root: ['root', maxWidth && "maxWidth".concat(capitalize(String(maxWidth))), fixed && 'fixed', disableGutters && 'disableGutters']
-  };
-  return composeClasses(slots, getContainerUtilityClass, classes);
-};
-export default function createContainer() {
-  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var _options$createStyled = options.createStyledComponent,
-    createStyledComponent = _options$createStyled === void 0 ? defaultCreateStyledComponent : _options$createStyled,
-    _options$useThemeProp = options.useThemeProps,
-    useThemeProps = _options$useThemeProp === void 0 ? useThemePropsDefault : _options$useThemeProp,
-    _options$componentNam = options.componentName,
-    componentName = _options$componentNam === void 0 ? 'MuiContainer' : _options$componentNam;
-  var ContainerRoot = createStyledComponent(function (_ref) {
-    var theme = _ref.theme,
-      ownerState = _ref.ownerState;
-    return _extends({
-      width: '100%',
-      marginLeft: 'auto',
-      boxSizing: 'border-box',
-      marginRight: 'auto',
-      display: 'block'
-    }, !ownerState.disableGutters && _defineProperty({
-      paddingLeft: theme.spacing(2),
-      paddingRight: theme.spacing(2)
-    }, theme.breakpoints.up('sm'), {
-      paddingLeft: theme.spacing(3),
-      paddingRight: theme.spacing(3)
-    }));
-  }, function (_ref3) {
-    var theme = _ref3.theme,
-      ownerState = _ref3.ownerState;
-    return ownerState.fixed && Object.keys(theme.breakpoints.values).reduce(function (acc, breakpointValueKey) {
-      var breakpoint = breakpointValueKey;
-      var value = theme.breakpoints.values[breakpoint];
-      if (value !== 0) {
-        // @ts-ignore
-        acc[theme.breakpoints.up(breakpoint)] = {
-          maxWidth: "".concat(value).concat(theme.breakpoints.unit)
-        };
-      }
-      return acc;
-    }, {});
-  }, function (_ref4) {
-    var theme = _ref4.theme,
-      ownerState = _ref4.ownerState;
-    return _extends({}, ownerState.maxWidth === 'xs' && _defineProperty({}, theme.breakpoints.up('xs'), {
-      // @ts-ignore module augmentation fails if custom breakpoints are used
-      maxWidth: Math.max(theme.breakpoints.values.xs, 444)
-    }), ownerState.maxWidth &&
-    // @ts-ignore module augmentation fails if custom breakpoints are used
-    ownerState.maxWidth !== 'xs' && _defineProperty({}, theme.breakpoints.up(ownerState.maxWidth), {
-      // @ts-ignore module augmentation fails if custom breakpoints are used
-      maxWidth: "".concat(theme.breakpoints.values[ownerState.maxWidth]).concat(theme.breakpoints.unit)
-    }));
-  });
-  var Container = /*#__PURE__*/React.forwardRef(function Container(inProps, ref) {
-    var props = useThemeProps(inProps);
-    var className = props.className,
-      _props$component = props.component,
-      component = _props$component === void 0 ? 'div' : _props$component,
-      _props$disableGutters = props.disableGutters,
-      disableGutters = _props$disableGutters === void 0 ? false : _props$disableGutters,
-      _props$fixed = props.fixed,
-      fixed = _props$fixed === void 0 ? false : _props$fixed,
-      _props$maxWidth = props.maxWidth,
-      maxWidth = _props$maxWidth === void 0 ? 'lg' : _props$maxWidth,
-      classesProp = props.classes,
-      other = _objectWithoutProperties(props, ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"]);
-    var ownerState = _extends({}, props, {
-      component: component,
-      disableGutters: disableGutters,
-      fixed: fixed,
-      maxWidth: maxWidth
-    });
-
-    // @ts-ignore module augmentation fails if custom breakpoints are used
-    var classes = useUtilityClasses(ownerState, componentName);
-    return (
-      /*#__PURE__*/
-      // @ts-ignore theme is injected by the styled util
-      _jsx(ContainerRoot, _extends({
-        as: component
-        // @ts-ignore module augmentation fails if custom breakpoints are used
-        ,
-        ownerState: ownerState,
-        className: clsx(classes.root, className),
-        ref: ref
-      }, other))
-    );
-  });
-  process.env.NODE_ENV !== "production" ? Container.propTypes /* remove-proptypes */ = {
-    children: PropTypes.node,
-    classes: PropTypes.object,
-    className: PropTypes.string,
-    component: PropTypes.elementType,
-    disableGutters: PropTypes.bool,
-    fixed: PropTypes.bool,
-    maxWidth: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), PropTypes.string]),
-    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
-  } : void 0;
-  return Container;
-}

package/legacy/Container/index.js

@@ -1,5 +0,0 @@
-'use client';
-
-export { default } from './Container';
-export { default as containerClasses } from './containerClasses';
-export * from './containerClasses';