@mui/system 6.0.0-alpha.0 → 6.0.0-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "6.0.0-alpha.0",
+  "version": "6.0.0-alpha.3",
   "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.",
@@ -26,14 +26,14 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/runtime": "^7.23.9",
+    "@babel/runtime": "^7.24.4",
     "clsx": "^2.1.0",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
-    "@mui/utils": "^5.15.14",
-    "@mui/private-theming": "^5.15.14",
+    "@mui/private-theming": "^6.0.0-alpha.3",
+    "@mui/styled-engine": "^6.0.0-alpha.3",
     "@mui/types": "^7.2.14",
-    "@mui/styled-engine": "^6.0.0-alpha.0"
+    "@mui/utils": "^6.0.0-alpha.3"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

package/spacing/spacing.js

@@ -43,25 +43,29 @@ export const marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'm
 export const paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd'];
 const spacingKeys = [...marginKeys, ...paddingKeys];
 export function createUnaryUnit(theme, themeKey, defaultValue, propName) {
-  const themeSpacing = getPath(theme, themeKey, false) ?? defaultValue;
-  if (typeof themeSpacing === 'number') {
-    return abs => {
-      if (typeof abs === 'string') {
-        return abs;
+  const themeSpacing = getPath(theme, themeKey, true) ?? defaultValue;
+  if (typeof themeSpacing === 'number' || typeof themeSpacing === 'string') {
+    return val => {
+      if (typeof val === 'string') {
+        return val;
       }
       if (process.env.NODE_ENV !== 'production') {
-        if (typeof abs !== 'number') {
-          console.error(`MUI: Expected ${propName} argument to be a number or a string, got ${abs}.`);
+        if (typeof val !== 'number') {
+          console.error(`MUI: Expected ${propName} argument to be a number or a string, got ${val}.`);
         }
       }
-      return themeSpacing * abs;
+      if (typeof themeSpacing === 'string') {
+        return `calc(${val} * ${themeSpacing})`;
+      }
+      return themeSpacing * val;
     };
   }
   if (Array.isArray(themeSpacing)) {
-    return abs => {
-      if (typeof abs === 'string') {
-        return abs;
+    return val => {
+      if (typeof val === 'string') {
+        return val;
       }
+      const abs = Math.abs(val);
       if (process.env.NODE_ENV !== 'production') {
         if (!Number.isInteger(abs)) {
           console.error([`MUI: The \`theme.${themeKey}\` array type cannot be combined with non integer values.` + `You should either use an integer value that can be used as index, or define the \`theme.${themeKey}\` as a number.`].join('\n'));
@@ -69,7 +73,14 @@ export function createUnaryUnit(theme, themeKey, defaultValue, propName) {
           console.error([`MUI: The value provided (${abs}) overflows.`, `The supported values are: ${JSON.stringify(themeSpacing)}.`, `${abs} > ${themeSpacing.length - 1}, you need to add the missing values.`].join('\n'));
         }
       }
-      return themeSpacing[abs];
+      const transformed = themeSpacing[abs];
+      if (val >= 0) {
+        return transformed;
+      }
+      if (typeof transformed === 'number') {
+        return -transformed;
+      }
+      return `-${transformed}`;
     };
   }
   if (typeof themeSpacing === 'function') {
@@ -87,15 +98,7 @@ export function getValue(transformer, propValue) {
   if (typeof propValue === 'string' || propValue == null) {
     return propValue;
   }
-  const abs = Math.abs(propValue);
-  const transformed = transformer(abs);
-  if (propValue >= 0) {
-    return transformed;
-  }
-  if (typeof transformed === 'number') {
-    return -transformed;
-  }
-  return `-${transformed}`;
+  return transformer(propValue);
 }
 export function getStyleFromPropValue(cssProperties, transformer) {
   return propValue => cssProperties.reduce((acc, cssProperty) => {

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';

package/legacy/GlobalStyles/GlobalStyles.js

@@ -1,37 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { GlobalStyles as MuiGlobalStyles } from '@mui/styled-engine';
-import useTheme from '../useTheme';
-import { jsx as _jsx } from "react/jsx-runtime";
-function GlobalStyles(_ref) {
-  var styles = _ref.styles,
-    themeId = _ref.themeId,
-    _ref$defaultTheme = _ref.defaultTheme,
-    defaultTheme = _ref$defaultTheme === void 0 ? {} : _ref$defaultTheme;
-  var upperTheme = useTheme(defaultTheme);
-  var globalStyles = typeof styles === 'function' ? styles(themeId ? upperTheme[themeId] || upperTheme : upperTheme) : styles;
-  return /*#__PURE__*/_jsx(MuiGlobalStyles, {
-    styles: globalStyles
-  });
-}
-process.env.NODE_ENV !== "production" ? GlobalStyles.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
-   */
-  defaultTheme: PropTypes.object,
-  /**
-   * @ignore
-   */
-  styles: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.array, PropTypes.func, PropTypes.number, PropTypes.object, PropTypes.string, PropTypes.bool]),
-  /**
-   * @ignore
-   */
-  themeId: PropTypes.string
-} : void 0;
-export default GlobalStyles;

package/legacy/GlobalStyles/index.js

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

package/legacy/RtlProvider/index.js

@@ -1,22 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { jsx as _jsx } from "react/jsx-runtime";
-var RtlContext = /*#__PURE__*/React.createContext();
-function RtlProvider(_ref) {
-  var value = _ref.value,
-    props = _objectWithoutProperties(_ref, ["value"]);
-  return /*#__PURE__*/_jsx(RtlContext.Provider, _extends({
-    value: value != null ? value : true
-  }, props));
-}
-process.env.NODE_ENV !== "production" ? RtlProvider.propTypes = {
-  children: PropTypes.node,
-  value: PropTypes.bool
-} : void 0;
-export var useRtl = function useRtl() {
-  var value = React.useContext(RtlContext);
-  return value != null ? value : false;
-};
-export default RtlProvider;

package/legacy/Stack/Stack.js

@@ -1,62 +0,0 @@
-'use client';
-
-import PropTypes from 'prop-types';
-import createStack from './createStack';
-/**
- *
- * Demos:
- *
- * - [Stack (Joy UI)](https://mui.com/joy-ui/react-stack/)
- * - [Stack (Material UI)](https://mui.com/material-ui/react-stack/)
- * - [Stack (MUI System)](https://mui.com/system/react-stack/)
- *
- * API:
- *
- * - [Stack API](https://mui.com/system/api/stack/)
- */
-var Stack = createStack();
-process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * The content of the component.
-   */
-  children: PropTypes.node,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.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]),
-  /**
-   * Add an element between each child.
-   */
-  divider: PropTypes.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]),
-  /**
-   * 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]),
-  /**
-   * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
-   *
-   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
-   * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
-   *
-   * To enable this flag globally, follow the theme's default props configuration.
-   * @default false
-   */
-  useFlexGap: PropTypes.bool
-} : void 0;
-export default Stack;

package/legacy/Stack/StackProps.js

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