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

package/modern/Unstable_Grid/gridGenerator.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { traverseBreakpoints } from './traverseBreakpoints';
 function appendLevel(level) {
   if (!level) {
@@ -32,7 +31,7 @@ export const generateGridSizeStyles = ({
   theme,
   ownerState
 }) => {
-  const getSelfSpacing = createGetSelfSpacing(ownerState);
+  const getParentSpacing = createGetParentSpacing(ownerState);
   const styles = {};
   traverseBreakpoints(theme.breakpoints, ownerState.gridSize, (appendStyle, value) => {
     let style = {};
@@ -56,7 +55,7 @@ export const generateGridSizeStyles = ({
       style = {
         flexGrow: 0,
         flexBasis: 'auto',
-        width: `calc(100% * ${value} / ${getParentColumns(ownerState)}${isNestedContainer(ownerState) ? ` + ${getSelfSpacing('column')}` : ''})`
+        width: `calc(100% * ${value} / ${getParentColumns(ownerState)} - (${getParentColumns(ownerState)} - ${value}) * (${getParentSpacing('column')} / ${getParentColumns(ownerState)}))`
       };
     }
     appendStyle(styles, style);
@@ -67,6 +66,7 @@ export const generateGridOffsetStyles = ({
   theme,
   ownerState
 }) => {
+  const getParentSpacing = createGetParentSpacing(ownerState);
   const styles = {};
   traverseBreakpoints(theme.breakpoints, ownerState.gridOffset, (appendStyle, value) => {
     let style = {};
@@ -77,7 +77,7 @@ export const generateGridOffsetStyles = ({
     }
     if (typeof value === 'number') {
       style = {
-        marginLeft: value === 0 ? '0px' : `calc(100% * ${value} / ${getParentColumns(ownerState)})`
+        marginLeft: value === 0 ? '0px' : `calc(100% * ${value} / ${getParentColumns(ownerState)} + ${getParentSpacing('column')} * ${value} / ${getParentColumns(ownerState)})`
       };
     }
     appendStyle(styles, style);
@@ -162,24 +162,18 @@ export const generateGridStyles = ({
   ownerState
 }) => {
   const getSelfSpacing = createGetSelfSpacing(ownerState);
-  const getParentSpacing = createGetParentSpacing(ownerState);
-  return _extends({
+  return {
     minWidth: 0,
-    boxSizing: 'border-box'
-  }, ownerState.container && _extends({
-    display: 'flex',
-    flexWrap: 'wrap'
-  }, ownerState.wrap && ownerState.wrap !== 'wrap' && {
-    flexWrap: ownerState.wrap
-  }, {
-    margin: `calc(${getSelfSpacing('row')} / -2) calc(${getSelfSpacing('column')} / -2)`
-  }, ownerState.disableEqualOverflow && {
-    margin: `calc(${getSelfSpacing('row')} * -1) 0px 0px calc(${getSelfSpacing('column')} * -1)`
-  }), (!ownerState.container || isNestedContainer(ownerState)) && _extends({
-    padding: `calc(${getParentSpacing('row')} / 2) calc(${getParentSpacing('column')} / 2)`
-  }, (ownerState.disableEqualOverflow || ownerState.parentDisableEqualOverflow) && {
-    padding: `${getParentSpacing('row')} 0px 0px ${getParentSpacing('column')}`
-  }));
+    boxSizing: 'border-box',
+    ...(ownerState.container && {
+      display: 'flex',
+      flexWrap: 'wrap',
+      ...(ownerState.wrap && ownerState.wrap !== 'wrap' && {
+        flexWrap: ownerState.wrap
+      }),
+      gap: `${getSelfSpacing('row')} ${getSelfSpacing('column')}`
+    })
+  };
 };
 export const generateSizeClassNames = gridSize => {
   const classNames = [];

package/modern/breakpoints/breakpoints.js

@@ -1,7 +1,7 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import PropTypes from 'prop-types';
 import deepmerge from '@mui/utils/deepmerge';
 import merge from '../merge';
+import { isCqShorthand, getContainerQuery } from '../cssContainerQueries';
 
 // The breakpoint **start** at this value.
 // For instance with the first breakpoint xs: [xs, sm[.
@@ -22,6 +22,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})`;
+    }
+  })
+};
 export function handleBreakpoints(props, propValue, styleFromPropValue) {
   const theme = props.theme || {};
   if (Array.isArray(propValue)) {
@@ -34,8 +45,14 @@ export function handleBreakpoints(props, propValue, styleFromPropValue) {
   if (typeof propValue === 'object') {
     const themeBreakpoints = theme.breakpoints || defaultBreakpoints;
     return Object.keys(propValue).reduce((acc, breakpoint) => {
+      if (isCqShorthand(themeBreakpoints.keys, breakpoint)) {
+        const containerKey = 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 {
@@ -58,21 +75,23 @@ function breakpoints(styleFunction) {
     const extended = themeBreakpoints.keys.reduce((acc, key) => {
       if (props[key]) {
         acc = acc || {};
-        acc[themeBreakpoints.up(key)] = styleFunction(_extends({
-          theme
-        }, props[key]));
+        acc[themeBreakpoints.up(key)] = styleFunction({
+          theme,
+          ...props[key]
+        });
       }
       return acc;
     }, null);
     return merge(base, extended);
   };
-  newStyleFunction.propTypes = process.env.NODE_ENV !== 'production' ? _extends({}, styleFunction.propTypes, {
+  newStyleFunction.propTypes = process.env.NODE_ENV !== 'production' ? {
+    ...styleFunction.propTypes,
     xs: PropTypes.object,
     sm: PropTypes.object,
     md: PropTypes.object,
     lg: PropTypes.object,
     xl: PropTypes.object
-  }) : {};
+  } : {};
   newStyleFunction.filterProps = ['xs', 'sm', 'md', 'lg', 'xl', ...styleFunction.filterProps];
   return newStyleFunction;
 }

package/modern/createBox/createBox.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "component"];
 import * as React from 'react';
 import clsx from 'clsx';
 import styled from '@mui/styled-engine';
@@ -21,18 +18,18 @@ export default function createBox(options = {}) {
   })(styleFunctionSx);
   const Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
     const theme = useTheme(defaultTheme);
-    const _extendSxProp = extendSxProp(inProps),
-      {
-        className,
-        component = 'div'
-      } = _extendSxProp,
-      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded);
-    return /*#__PURE__*/_jsx(BoxRoot, _extends({
+    const {
+      className,
+      component = 'div',
+      ...other
+    } = extendSxProp(inProps);
+    return /*#__PURE__*/_jsx(BoxRoot, {
       as: component,
       ref: ref,
       className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
-      theme: themeId ? theme[themeId] || theme : theme
-    }, other));
+      theme: themeId ? theme[themeId] || theme : theme,
+      ...other
+    });
   });
   return Box;
 }

package/modern/createStyled/createStyled.js

@@ -1,8 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["ownerState"],
-  _excluded2 = ["variants"],
-  _excluded3 = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
 /* eslint-disable no-underscore-dangle */
 import styledEngineStyled, { internal_processStyles as processStyles } from '@mui/styled-engine';
 import { isPlainObject } from '@mui/utils/deepmerge';
@@ -47,31 +42,35 @@ function defaultOverridesResolver(slot) {
   }
   return (props, styles) => styles[slot];
 }
-function processStyleArg(callableStyle, _ref) {
-  let {
-      ownerState
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const resolvedStylesArg = typeof callableStyle === 'function' ? callableStyle(_extends({
-    ownerState
-  }, props)) : callableStyle;
+function processStyleArg(callableStyle, {
+  ownerState,
+  ...props
+}) {
+  const resolvedStylesArg = typeof callableStyle === 'function' ? callableStyle({
+    ownerState,
+    ...props
+  }) : callableStyle;
   if (Array.isArray(resolvedStylesArg)) {
-    return resolvedStylesArg.flatMap(resolvedStyle => processStyleArg(resolvedStyle, _extends({
-      ownerState
-    }, props)));
+    return resolvedStylesArg.flatMap(resolvedStyle => processStyleArg(resolvedStyle, {
+      ownerState,
+      ...props
+    }));
   }
+  const mergedState = {
+    ...props,
+    ...ownerState,
+    ownerState
+  };
   if (!!resolvedStylesArg && typeof resolvedStylesArg === 'object' && Array.isArray(resolvedStylesArg.variants)) {
     const {
-        variants = []
-      } = resolvedStylesArg,
-      otherStyles = _objectWithoutPropertiesLoose(resolvedStylesArg, _excluded2);
+      variants = [],
+      ...otherStyles
+    } = resolvedStylesArg;
     let result = otherStyles;
     variants.forEach(variant => {
       let isMatch = true;
       if (typeof variant.props === 'function') {
-        isMatch = variant.props(_extends({
-          ownerState
-        }, props, ownerState));
+        isMatch = variant.props(mergedState);
       } else {
         Object.keys(variant.props).forEach(key => {
           if (ownerState?.[key] !== variant.props[key] && props[key] !== variant.props[key]) {
@@ -83,9 +82,7 @@ function processStyleArg(callableStyle, _ref) {
         if (!Array.isArray(result)) {
           result = [result];
         }
-        result.push(typeof variant.style === 'function' ? variant.style(_extends({
-          ownerState
-        }, props, ownerState)) : variant.style);
+        result.push(typeof variant.style === 'function' ? variant.style(mergedState) : variant.style);
       }
     });
     return result;
@@ -100,27 +97,29 @@ export default function createStyled(input = {}) {
     slotShouldForwardProp = shouldForwardProp
   } = input;
   const systemSx = props => {
-    return styleFunctionSx(_extends({}, props, {
-      theme: resolveTheme(_extends({}, props, {
+    return styleFunctionSx({
+      ...props,
+      theme: resolveTheme({
+        ...props,
         defaultTheme,
         themeId
-      }))
-    }));
+      })
+    });
   };
   systemSx.__mui_systemSx = true;
   return (tag, inputOptions = {}) => {
     // Filter out the `sx` style function from the previous styled component to prevent unnecessary styles generated by the composite components.
     processStyles(tag, styles => styles.filter(style => !style?.__mui_systemSx));
     const {
-        name: componentName,
-        slot: componentSlot,
-        skipVariantsResolver: inputSkipVariantsResolver,
-        skipSx: inputSkipSx,
-        // TODO v6: remove `lowercaseFirstLetter()` in the next major release
-        // For more details: https://github.com/mui/material-ui/pull/37908
-        overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot))
-      } = inputOptions,
-      options = _objectWithoutPropertiesLoose(inputOptions, _excluded3);
+      name: componentName,
+      slot: componentSlot,
+      skipVariantsResolver: inputSkipVariantsResolver,
+      skipSx: inputSkipSx,
+      // TODO v6: remove `lowercaseFirstLetter()` in the next major release
+      // For more details: https://github.com/mui/material-ui/pull/37908
+      overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot)),
+      ...options
+    } = inputOptions;
 
     // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
     const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
@@ -149,22 +148,24 @@ export default function createStyled(input = {}) {
       // for string (html) tag, preserve the behavior in emotion & styled-components.
       shouldForwardPropOption = undefined;
     }
-    const defaultStyledResolver = styledEngineStyled(tag, _extends({
+    const defaultStyledResolver = styledEngineStyled(tag, {
       shouldForwardProp: shouldForwardPropOption,
-      label
-    }, options));
+      label,
+      ...options
+    });
     const transformStyleArg = stylesArg => {
       // On the server Emotion doesn't use React.forwardRef for creating components, so the created
       // component stays as a function. This condition makes sure that we do not interpolate functions
       // which are basically components used as a selectors.
       if (typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg || isPlainObject(stylesArg)) {
-        return props => processStyleArg(stylesArg, _extends({}, props, {
+        return props => processStyleArg(stylesArg, {
+          ...props,
           theme: resolveTheme({
             theme: props.theme,
             defaultTheme,
             themeId
           })
-        }));
+        });
       }
       return stylesArg;
     };
@@ -173,10 +174,11 @@ export default function createStyled(input = {}) {
       const expressionsWithDefaultTheme = expressions ? expressions.map(transformStyleArg) : [];
       if (componentName && overridesResolver) {
         expressionsWithDefaultTheme.push(props => {
-          const theme = resolveTheme(_extends({}, props, {
+          const theme = resolveTheme({
+            ...props,
             defaultTheme,
             themeId
-          }));
+          });
           if (!theme.components || !theme.components[componentName] || !theme.components[componentName].styleOverrides) {
             return null;
           }
@@ -184,25 +186,28 @@ export default function createStyled(input = {}) {
           const resolvedStyleOverrides = {};
           // TODO: v7 remove iteration and use `resolveStyleArg(styleOverrides[slot])` directly
           Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
-            resolvedStyleOverrides[slotKey] = processStyleArg(slotStyle, _extends({}, props, {
+            resolvedStyleOverrides[slotKey] = processStyleArg(slotStyle, {
+              ...props,
               theme
-            }));
+            });
           });
           return overridesResolver(props, resolvedStyleOverrides);
         });
       }
       if (componentName && !skipVariantsResolver) {
         expressionsWithDefaultTheme.push(props => {
-          const theme = resolveTheme(_extends({}, props, {
+          const theme = resolveTheme({
+            ...props,
             defaultTheme,
             themeId
-          }));
+          });
           const themeVariants = theme?.components?.[componentName]?.variants;
           return processStyleArg({
             variants: themeVariants
-          }, _extends({}, props, {
+          }, {
+            ...props,
             theme
-          }));
+          });
         });
       }
       if (!skipSx) {

package/modern/createTheme/applyStyles.js

@@ -2,7 +2,7 @@
  * A universal utility to style components with multiple color modes. Always use it from the theme object.
  * It works with:
  *  - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)
- *  - [CSS theme variables](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/)
+ *  - [CSS theme variables](https://mui.com/material-ui/customization/css-theme-variables/overview/)
  *  - Zero-runtime engine
  *
  * Tips: Use an array over object spread and place `theme.applyStyles()` last.

package/modern/createTheme/createBreakpoints.js

@@ -1,6 +1,3 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["values", "unit", "step"];
 // Sorted ASC by size. That's important.
 // It can't be configured as it's used statically for propTypes.
 export const breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
@@ -12,32 +9,33 @@ const sortBreakpointsValues = values => {
   // Sort in ascending order
   breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
   return breakpointsAsArray.reduce((acc, obj) => {
-    return _extends({}, acc, {
+    return {
+      ...acc,
       [obj.key]: obj.val
-    });
+    };
   }, {});
 };
 
 // Keep in mind that @media is inclusive by the CSS specification.
 export default function createBreakpoints(breakpoints) {
   const {
-      // The breakpoint **start** at this value.
-      // For instance with the first breakpoint xs: [xs, sm).
-      values = {
-        xs: 0,
-        // phone
-        sm: 600,
-        // tablet
-        md: 900,
-        // small laptop
-        lg: 1200,
-        // desktop
-        xl: 1536 // large screen
-      },
-      unit = 'px',
-      step = 5
-    } = breakpoints,
-    other = _objectWithoutPropertiesLoose(breakpoints, _excluded);
+    // The breakpoint **start** at this value.
+    // For instance with the first breakpoint xs: [xs, sm).
+    values = {
+      xs: 0,
+      // phone
+      sm: 600,
+      // tablet
+      md: 900,
+      // small laptop
+      lg: 1200,
+      // desktop
+      xl: 1536 // large screen
+    },
+    unit = 'px',
+    step = 5,
+    ...other
+  } = breakpoints;
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
   function up(key) {
@@ -69,7 +67,7 @@ export default function createBreakpoints(breakpoints) {
     }
     return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
   }
-  return _extends({
+  return {
     keys,
     values: sortedValues,
     up,
@@ -77,6 +75,7 @@ export default function createBreakpoints(breakpoints) {
     between,
     only,
     not,
-    unit
-  }, other);
+    unit,
+    ...other
+  };
 }

package/modern/createTheme/createTheme.js

@@ -1,8 +1,6 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["breakpoints", "palette", "spacing", "shape"];
 import deepmerge from '@mui/utils/deepmerge';
 import createBreakpoints from './createBreakpoints';
+import cssContainerQueries from '../cssContainerQueries';
 import shape from './shape';
 import createSpacing from './createSpacing';
 import styleFunctionSx from '../styleFunctionSx/styleFunctionSx';
@@ -10,12 +8,12 @@ import defaultSxConfig from '../styleFunctionSx/defaultSxConfig';
 import applyStyles from './applyStyles';
 function createTheme(options = {}, ...args) {
   const {
-      breakpoints: breakpointsInput = {},
-      palette: paletteInput = {},
-      spacing: spacingInput,
-      shape: shapeInput = {}
-    } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded);
+    breakpoints: breakpointsInput = {},
+    palette: paletteInput = {},
+    spacing: spacingInput,
+    shape: shapeInput = {},
+    ...other
+  } = options;
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
   let muiTheme = deepmerge({
@@ -23,15 +21,23 @@ function createTheme(options = {}, ...args) {
     direction: 'ltr',
     components: {},
     // Inject component definitions.
-    palette: _extends({
-      mode: 'light'
-    }, paletteInput),
+    palette: {
+      mode: 'light',
+      ...paletteInput
+    },
     spacing,
-    shape: _extends({}, shape, shapeInput)
+    shape: {
+      ...shape,
+      ...shapeInput
+    }
   }, other);
+  muiTheme = cssContainerQueries(muiTheme);
   muiTheme.applyStyles = applyStyles;
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
-  muiTheme.unstable_sxConfig = _extends({}, defaultSxConfig, other?.unstable_sxConfig);
+  muiTheme.unstable_sxConfig = {
+    ...defaultSxConfig,
+    ...other?.unstable_sxConfig
+  };
   muiTheme.unstable_sx = function sx(props) {
     return styleFunctionSx({
       sx: props,

package/modern/cssContainerQueries/cssContainerQueries.js

@@ -0,0 +1,70 @@
+import _formatMuiErrorMessage from "@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
+ */
+export function sortContainerQueries(theme, css) {
+  if (!theme.containerQueries) {
+    return css;
+  }
+  const sorted = Object.keys(css).filter(key => key.startsWith('@container')).sort((a, b) => {
+    const regex = /min-width:\s*([0-9.]+)/;
+    return +(a.match(regex)?.[1] || 0) - +(b.match(regex)?.[1] || 0);
+  });
+  if (!sorted.length) {
+    return css;
+  }
+  return sorted.reduce((acc, key) => {
+    const value = css[key];
+    delete acc[key];
+    acc[key] = value;
+    return acc;
+  }, {
+    ...css
+  });
+}
+export function isCqShorthand(breakpointKeys, value) {
+  return value === '@' || value.startsWith('@') && (breakpointKeys.some(key => value.startsWith(`@${key}`)) || !!value.match(/^@\d/));
+}
+export 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\`.` : _formatMuiErrorMessage(21, `(${shorthand})`));
+    }
+    return null;
+  }
+  const [, containerQuery, containerName] = matches;
+  const value = Number.isNaN(+containerQuery) ? containerQuery || 0 : +containerQuery;
+  return theme.containerQueries(containerName).up(value);
+}
+export default 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>').replace('and', 'or');
+      }
+      return result;
+    };
+  }
+  const node = {};
+  const containerQueries = name => {
+    attachCq(node, name);
+    return node;
+  };
+  attachCq(containerQueries);
+  return {
+    ...themeInput,
+    containerQueries
+  };
+}

package/modern/cssContainerQueries/index.js

@@ -0,0 +1,2 @@
+export { default } from './cssContainerQueries';
+export { isCqShorthand, getContainerQuery, sortContainerQueries } from './cssContainerQueries';