@mui/system 7.0.0-beta.3 → 7.0.0-rc.0

package/CHANGELOG.md

@@ -1,5 +1,89 @@
 # [Versions](https://mui.com/versions/)
 
+## 7.0.0-rc.0
+
+<!-- generated comparing v7.0.0-beta.4..master -->
+
+_Mar 18, 2025_
+
+A big thanks to the 4 contributors who made this release possible.
+
+### `@mui/material@7.0.0-rc.0`
+
+- [StepLabel] Add missing root slot (#45603) @sai6855
+- [Switch] Add slots and slotProps (#45595) @siriwatknp
+- [utils] Add merging function to `mergeSlotProps` utility (#45543) @siriwatknp
+
+### Core
+
+- [blog] Clarify the difference between the two Pro plans (#45266) @oliviertassinari
+- [code-infra] Allow specifying a custom error formatter module for error minifcation (#45291) @Janpot
+- [code-infra] Make `getVersionEnvVariables` reusable for other repos (#45562) @Janpot
+- [code-infra] Update peer dependency of `@mui/utils` in `@mui/docs` (#45561) @Janpot
+- Add StackBlitz template to issue template (#45504) @Janpot
+
+All contributors of this release in alphabetical order: @Janpot, @oliviertassinari, @sai6855, @siriwatknp
+
+## 7.0.0-beta.4
+
+<!-- generated comparing v7.0.0-beta.3..master -->
+
+_Mar 13, 2025_
+
+A big thanks to the 10 contributors who made this release possible.
+This release contains bug fixes 🐛 and improvements to the new package layout 🏗️.
+
+### `@mui/material@7.0.0-beta.4`
+
+- [Accordion] Add missing `root` slot (#45532) @sai6855
+- [AccordionSummary] Add slots and slotProps (#45559) @sai6855
+- [ListItemText] Add missing `root` slot (#45540) @sai6855
+- [SpeedDial] Add missing `root` slot (#45541) @sai6855
+- [Tooltip] Allow auto placement on tooltip (#45399) @Jtaks
+- [useScrollTrigger] Do nothing if target is null (#45441) @vipierozan99
+- [TextareaAutosize] Fix ResizeObserver causing infinite `selectionchange` loop (#45351) @mj12albert
+- Fix negative input for CSS variables spacing array (#45550) @siriwatknp
+- Add missing deprecations in deprecations-all file (#45505) @sai6855
+- Rename some `@mui/material/styles/createTypography` exports (#45558) @Janpot
+
+### `@mui/icons-material@7.0.0-beta.4`
+
+- Remove unused icon names from the download script (#45453) @yermartee
+
+### `@mui/system@7.0.0-beta.4`
+
+- Prevent nested non-vars theme inheritance (#45545) @siriwatknp
+- Disable theme recalculation as default behavior (#45405) @siriwatknp
+- Fix package layout inconsistencies (#45491) @DiegoAndai
+
+### `@mui/styled-engine@7.0.0-beta.4`
+
+- Add `enableCssLayer` prop to StyledEngineProvider (#45428) @siriwatknp
+
+### `@mui/types@7.3.0`
+
+- [code-infra] Fix type resolution for @mui/types (#45513) @Janpot
+
+### `@mui/utils@7.0.0-beta.4`
+
+- Fix package layout inconsistencies (#45491) @DiegoAndai
+- Use correct iri-reference homepage format (#45472) @dahiro
+
+### Docs
+
+- [Backdrop] Fix component name in migration guide (#45506) @sai6855
+- [TextField] Add HTML input section to TextField page (#45439) @siriwatknp
+
+### Core
+
+- [code-infra] Convert a few docs modules to ts (#45548) @Janpot
+- [code-infra] Remove more CJS modules from the docs (#45557) @Janpot
+- [code-infra] Remove nested imports from theme augmentation (#45514) @Janpot
+- [docs-infra] Add @ts-ignore to avoid type checking for MUI X (#45555) @siriwatknp
+- [blog] Fix author end-of-year updates (#45533) @oliviertassinari
+
+All contributors of this release in alphabetical order: @dahiro, @DiegoAndai, @Janpot, @Jtaks, @mj12albert, @oliviertassinari, @sai6855, @siriwatknp, @vipierozan99, @yermartee
+
 ## 7.0.0-beta.3
 
 <!-- generated comparing v7.0.0-beta.2..master -->

package/borders/borders.d.ts

@@ -1,4 +1,4 @@
-import { PropsFor, SimpleStyleFunction, borders } from "../Box/index.js";
+import { PropsFor, borders, SimpleStyleFunction } from "../Box/index.js";
 export const border: SimpleStyleFunction<'border'>;
 export const borderTop: SimpleStyleFunction<'borderTop'>;
 export const borderRight: SimpleStyleFunction<'borderRight'>;
@@ -10,4 +10,5 @@ export const borderRightColor: SimpleStyleFunction<'borderRightColor'>;
 export const borderBottomColor: SimpleStyleFunction<'borderBottomColor'>;
 export const borderLeftColor: SimpleStyleFunction<'borderLeftColor'>;
 export const borderRadius: SimpleStyleFunction<'borderRadius'>;
-export type BordersProps = PropsFor<typeof borders>;
+export type BordersProps = PropsFor<typeof borders>;
+export default borders;

package/colorManipulator/colorManipulator.js

@@ -22,7 +22,7 @@ exports.private_safeEmphasize = private_safeEmphasize;
 exports.private_safeLighten = private_safeLighten;
 exports.recomposeColor = recomposeColor;
 exports.rgbToHex = rgbToHex;
-var _formatMuiErrorMessage2 = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
+var _formatMuiErrorMessage = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
 var _clamp = _interopRequireDefault(require("@mui/utils/clamp"));
 /* eslint-disable @typescript-eslint/naming-convention */
 
@@ -86,7 +86,7 @@ function decomposeColor(color) {
   const marker = color.indexOf('(');
   const type = color.substring(0, marker);
   if (!['rgb', 'rgba', 'hsl', 'hsla', 'color'].includes(type)) {
-    throw new Error(process.env.NODE_ENV !== "production" ? `MUI: Unsupported \`${color}\` color.\n` + 'The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().' : (0, _formatMuiErrorMessage2.default)(9, color));
+    throw new Error(process.env.NODE_ENV !== "production" ? `MUI: Unsupported \`${color}\` color.\n` + 'The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().' : (0, _formatMuiErrorMessage.default)(9, color));
   }
   let values = color.substring(marker + 1, color.length - 1);
   let colorSpace;
@@ -97,7 +97,7 @@ function decomposeColor(color) {
       values[3] = values[3].slice(1);
     }
     if (!['srgb', 'display-p3', 'a98-rgb', 'prophoto-rgb', 'rec-2020'].includes(colorSpace)) {
-      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: unsupported \`${colorSpace}\` color space.\n` + 'The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.' : (0, _formatMuiErrorMessage2.default)(10, colorSpace));
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: unsupported \`${colorSpace}\` color space.\n` + 'The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.' : (0, _formatMuiErrorMessage.default)(10, colorSpace));
     }
   } else {
     values = values.split(',');

package/cssContainerQueries/cssContainerQueries.js

@@ -8,7 +8,7 @@ exports.default = cssContainerQueries;
 exports.getContainerQuery = getContainerQuery;
 exports.isCqShorthand = isCqShorthand;
 exports.sortContainerQueries = sortContainerQueries;
-var _formatMuiErrorMessage2 = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
+var _formatMuiErrorMessage = _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.
@@ -42,7 +42,7 @@ 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>\`.\n` + 'For example, `@sm` or `@600` or `@40rem/sidebar`.' : (0, _formatMuiErrorMessage2.default)(18, `(${shorthand})`));
+      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>\`.\n` + 'For example, `@sm` or `@600` or `@40rem/sidebar`.' : (0, _formatMuiErrorMessage.default)(18, `(${shorthand})`));
     }
     return null;
   }

package/cssGrid/cssGrid.d.ts

@@ -1,2 +1,15 @@
-import { PropsFor, grid } from "../Box/index.js";
-export type CssGridProps = PropsFor<typeof grid>;
+import { PropsFor, grid, SimpleStyleFunction } from "../Box/index.js";
+export const gap: SimpleStyleFunction<'gap'>;
+export const columnGap: SimpleStyleFunction<'columnGap'>;
+export const rowGap: SimpleStyleFunction<'rowGap'>;
+export const gridColumn: SimpleStyleFunction<'gridColumn'>;
+export const gridRow: SimpleStyleFunction<'gridRow'>;
+export const gridAutoFlow: SimpleStyleFunction<'gridAutoFlow'>;
+export const gridAutoColumns: SimpleStyleFunction<'gridAutoColumns'>;
+export const gridAutoRows: SimpleStyleFunction<'gridAutoRows'>;
+export const gridTemplateColumns: SimpleStyleFunction<'gridTemplateColumns'>;
+export const gridTemplateRows: SimpleStyleFunction<'gridTemplateRows'>;
+export const gridTemplateAreas: SimpleStyleFunction<'gridTemplateAreas'>;
+export const gridArea: SimpleStyleFunction<'gridArea'>;
+export type CssGridProps = PropsFor<typeof grid>;
+export default grid;

package/cssVars/createCssVarsProvider.d.ts

@@ -35,6 +35,12 @@ export interface CssVarsProviderConfig<ColorScheme extends string> {
    * @default false
    */
   disableTransitionOnChange?: boolean;
+  /**
+   * If `true`, theme values are recalculated when the mode changes.
+   * The `theme.colorSchemes.{mode}.*` nodes will be shallow merged to the top-level of the theme.
+   * @default false
+   */
+  forceThemeRerender?: boolean;
 }
 type Identify<I extends string | undefined, T> = I extends string ? T | { [k in I]: T } : T;
 export interface CreateCssVarsProviderResult<ColorScheme extends string, Identifier extends string | undefined = undefined> {

package/cssVars/createCssVarsProvider.js

@@ -65,6 +65,7 @@ function createCssVarsProvider(options) {
       disableNestedContext = false,
       disableStyleSheetGeneration = false,
       defaultMode: initialMode = 'system',
+      forceThemeRerender = false,
       noSsr
     } = props;
     const hasMounted = React.useRef(false);
@@ -116,10 +117,15 @@ function createCssVarsProvider(options) {
       mode = ctx.mode;
       colorScheme = ctx.colorScheme;
     }
+    if (process.env.NODE_ENV !== 'production') {
+      if (forceThemeRerender && !restThemeProp.vars) {
+        console.warn(['MUI: The `forceThemeRerender` prop should only be used with CSS theme variables.', 'Note that it will slow down the app when changing between modes, so only do this when you cannot find a better solution.'].join('\n'));
+      }
+    }
+    const calculatedColorScheme = forceThemeRerender && restThemeProp.vars ?
+    // `colorScheme` is undefined on the server and hydration phase
+    colorScheme || restThemeProp.defaultColorScheme : restThemeProp.defaultColorScheme;
     const memoTheme = React.useMemo(() => {
-      // `colorScheme` is undefined on the server and hydration phase
-      const calculatedColorScheme = colorScheme || restThemeProp.defaultColorScheme;
-
       // 2. get the `vars` object that refers to the CSS custom properties
       const themeVars = restThemeProp.generateThemeVars?.() || restThemeProp.vars;
 
@@ -154,7 +160,7 @@ function createCssVarsProvider(options) {
         }
       }
       return resolveTheme ? resolveTheme(theme) : theme;
-    }, [restThemeProp, colorScheme, components, colorSchemes, cssVarPrefix]);
+    }, [restThemeProp, calculatedColorScheme, components, colorSchemes, cssVarPrefix]);
 
     // 5. Declaring effects
     // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
@@ -292,6 +298,10 @@ function createCssVarsProvider(options) {
      * The document to attach the attribute to.
      */
     documentNode: _propTypes.default.any,
+    /**
+     * If `true`, theme values are recalculated when the mode changes.
+     */
+    forceThemeRerender: _propTypes.default.bool,
     /**
      * The key in the local storage used to store current color scheme.
      */

package/display/display.d.ts

@@ -1,2 +1,3 @@
 import { PropsFor, display } from "../Box/index.js";
-export type DisplayProps = PropsFor<typeof display>;
+export type DisplayProps = PropsFor<typeof display>;
+export default display;

package/esm/borders/borders.d.ts

@@ -1,4 +1,4 @@
-import { PropsFor, SimpleStyleFunction, borders } from "../Box/index.js";
+import { PropsFor, borders, SimpleStyleFunction } from "../Box/index.js";
 export const border: SimpleStyleFunction<'border'>;
 export const borderTop: SimpleStyleFunction<'borderTop'>;
 export const borderRight: SimpleStyleFunction<'borderRight'>;
@@ -10,4 +10,5 @@ export const borderRightColor: SimpleStyleFunction<'borderRightColor'>;
 export const borderBottomColor: SimpleStyleFunction<'borderBottomColor'>;
 export const borderLeftColor: SimpleStyleFunction<'borderLeftColor'>;
 export const borderRadius: SimpleStyleFunction<'borderRadius'>;
-export type BordersProps = PropsFor<typeof borders>;
+export type BordersProps = PropsFor<typeof borders>;
+export default borders;

package/esm/colorManipulator/colorManipulator.js

@@ -1,4 +1,4 @@
-import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
+import _formatErrorMessage from "@mui/utils/formatMuiErrorMessage";
 /* eslint-disable @typescript-eslint/naming-convention */
 import clamp from '@mui/utils/clamp';
 
@@ -62,7 +62,7 @@ export function decomposeColor(color) {
   const marker = color.indexOf('(');
   const type = color.substring(0, marker);
   if (!['rgb', 'rgba', 'hsl', 'hsla', 'color'].includes(type)) {
-    throw new Error(process.env.NODE_ENV !== "production" ? `MUI: Unsupported \`${color}\` color.\n` + 'The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().' : _formatMuiErrorMessage(9, color));
+    throw new Error(process.env.NODE_ENV !== "production" ? `MUI: Unsupported \`${color}\` color.\n` + 'The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().' : _formatErrorMessage(9, color));
   }
   let values = color.substring(marker + 1, color.length - 1);
   let colorSpace;
@@ -73,7 +73,7 @@ export function decomposeColor(color) {
       values[3] = values[3].slice(1);
     }
     if (!['srgb', 'display-p3', 'a98-rgb', 'prophoto-rgb', 'rec-2020'].includes(colorSpace)) {
-      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: unsupported \`${colorSpace}\` color space.\n` + 'The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.' : _formatMuiErrorMessage(10, colorSpace));
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: unsupported \`${colorSpace}\` color space.\n` + 'The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.' : _formatErrorMessage(10, colorSpace));
     }
   } else {
     values = values.split(',');

package/esm/cssContainerQueries/cssContainerQueries.js

@@ -1,4 +1,4 @@
-import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
+import _formatErrorMessage 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.
@@ -32,7 +32,7 @@ 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>\`.\n` + 'For example, `@sm` or `@600` or `@40rem/sidebar`.' : _formatMuiErrorMessage(18, `(${shorthand})`));
+      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>\`.\n` + 'For example, `@sm` or `@600` or `@40rem/sidebar`.' : _formatErrorMessage(18, `(${shorthand})`));
     }
     return null;
   }

package/esm/cssGrid/cssGrid.d.ts

@@ -1,2 +1,15 @@
-import { PropsFor, grid } from "../Box/index.js";
-export type CssGridProps = PropsFor<typeof grid>;
+import { PropsFor, grid, SimpleStyleFunction } from "../Box/index.js";
+export const gap: SimpleStyleFunction<'gap'>;
+export const columnGap: SimpleStyleFunction<'columnGap'>;
+export const rowGap: SimpleStyleFunction<'rowGap'>;
+export const gridColumn: SimpleStyleFunction<'gridColumn'>;
+export const gridRow: SimpleStyleFunction<'gridRow'>;
+export const gridAutoFlow: SimpleStyleFunction<'gridAutoFlow'>;
+export const gridAutoColumns: SimpleStyleFunction<'gridAutoColumns'>;
+export const gridAutoRows: SimpleStyleFunction<'gridAutoRows'>;
+export const gridTemplateColumns: SimpleStyleFunction<'gridTemplateColumns'>;
+export const gridTemplateRows: SimpleStyleFunction<'gridTemplateRows'>;
+export const gridTemplateAreas: SimpleStyleFunction<'gridTemplateAreas'>;
+export const gridArea: SimpleStyleFunction<'gridArea'>;
+export type CssGridProps = PropsFor<typeof grid>;
+export default grid;

package/esm/cssVars/createCssVarsProvider.d.ts

@@ -35,6 +35,12 @@ export interface CssVarsProviderConfig<ColorScheme extends string> {
    * @default false
    */
   disableTransitionOnChange?: boolean;
+  /**
+   * If `true`, theme values are recalculated when the mode changes.
+   * The `theme.colorSchemes.{mode}.*` nodes will be shallow merged to the top-level of the theme.
+   * @default false
+   */
+  forceThemeRerender?: boolean;
 }
 type Identify<I extends string | undefined, T> = I extends string ? T | { [k in I]: T } : T;
 export interface CreateCssVarsProviderResult<ColorScheme extends string, Identifier extends string | undefined = undefined> {

package/esm/cssVars/createCssVarsProvider.js

@@ -57,6 +57,7 @@ export default function createCssVarsProvider(options) {
       disableNestedContext = false,
       disableStyleSheetGeneration = false,
       defaultMode: initialMode = 'system',
+      forceThemeRerender = false,
       noSsr
     } = props;
     const hasMounted = React.useRef(false);
@@ -108,10 +109,15 @@ export default function createCssVarsProvider(options) {
       mode = ctx.mode;
       colorScheme = ctx.colorScheme;
     }
+    if (process.env.NODE_ENV !== 'production') {
+      if (forceThemeRerender && !restThemeProp.vars) {
+        console.warn(['MUI: The `forceThemeRerender` prop should only be used with CSS theme variables.', 'Note that it will slow down the app when changing between modes, so only do this when you cannot find a better solution.'].join('\n'));
+      }
+    }
+    const calculatedColorScheme = forceThemeRerender && restThemeProp.vars ?
+    // `colorScheme` is undefined on the server and hydration phase
+    colorScheme || restThemeProp.defaultColorScheme : restThemeProp.defaultColorScheme;
     const memoTheme = React.useMemo(() => {
-      // `colorScheme` is undefined on the server and hydration phase
-      const calculatedColorScheme = colorScheme || restThemeProp.defaultColorScheme;
-
       // 2. get the `vars` object that refers to the CSS custom properties
       const themeVars = restThemeProp.generateThemeVars?.() || restThemeProp.vars;
 
@@ -146,7 +152,7 @@ export default function createCssVarsProvider(options) {
         }
       }
       return resolveTheme ? resolveTheme(theme) : theme;
-    }, [restThemeProp, colorScheme, components, colorSchemes, cssVarPrefix]);
+    }, [restThemeProp, calculatedColorScheme, components, colorSchemes, cssVarPrefix]);
 
     // 5. Declaring effects
     // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
@@ -284,6 +290,10 @@ export default function createCssVarsProvider(options) {
      * The document to attach the attribute to.
      */
     documentNode: PropTypes.any,
+    /**
+     * If `true`, theme values are recalculated when the mode changes.
+     */
+    forceThemeRerender: PropTypes.bool,
     /**
      * The key in the local storage used to store current color scheme.
      */

package/esm/display/display.d.ts

@@ -1,2 +1,3 @@
 import { PropsFor, display } from "../Box/index.js";
-export type DisplayProps = PropsFor<typeof display>;
+export type DisplayProps = PropsFor<typeof display>;
+export default display;

package/esm/flexbox/flexbox.d.ts

@@ -1,2 +1,3 @@
 import { PropsFor, flexbox } from "../Box/index.js";
-export type FlexboxProps = PropsFor<typeof flexbox>;
+export type FlexboxProps = PropsFor<typeof flexbox>;
+export default flexbox;

package/esm/index.d.ts

@@ -27,6 +27,7 @@ export { css, keyframes, StyledEngineProvider, Interpolation, CSSInterpolation,
 export { default as GlobalStyles } from "./GlobalStyles/index.js";
 export type { GlobalStylesProps } from "./GlobalStyles/index.js";
 export * from "./style/index.js";
+export { default as style } from "./style/index.js";
 export * from "./spacing/index.js";
 export { default as unstable_styleFunctionSx, unstable_createStyleFunctionSx, extendSxProp as unstable_extendSxProp, unstable_defaultSxConfig } from "./styleFunctionSx/index.js";
 export * from "./styleFunctionSx/index.js";

package/esm/index.js

@@ -1,11 +1,11 @@
 /**
- * @mui/system v7.0.0-beta.3
+ * @mui/system v7.0.0-rc.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
+import _formatErrorMessage from "@mui/utils/formatMuiErrorMessage";
 export { css, keyframes, StyledEngineProvider } from '@mui/styled-engine';
 export { default as GlobalStyles } from "./GlobalStyles/index.js";
 export { default as borders } from "./borders/index.js";
@@ -35,7 +35,7 @@ export { default as unstable_styleFunctionSx, unstable_createStyleFunctionSx, ex
 // TODO: Remove this function in v6
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export function experimental_sx() {
-  throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: The `experimental_sx` has been moved to `theme.unstable_sx`.' + 'For more details, see https://github.com/mui/material-ui/pull/35150.' : _formatMuiErrorMessage(19));
+  throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: The `experimental_sx` has been moved to `theme.unstable_sx`.' + 'For more details, see https://github.com/mui/material-ui/pull/35150.' : _formatErrorMessage(19));
 }
 export { default as unstable_getThemeValue } from "./getThemeValue/index.js";
 export { default as Box } from "./Box/index.js";

package/esm/palette/palette.d.ts

@@ -1,4 +1,5 @@
 import { PropsFor, SimpleStyleFunction, palette } from "../Box/index.js";
 export const color: SimpleStyleFunction<'color'>;
 export const bgcolor: SimpleStyleFunction<'bgcolor'>;
-export type PaletteProps = PropsFor<typeof palette>;
+export type PaletteProps = PropsFor<typeof palette>;
+export default palette;

package/esm/positions/positions.d.ts

@@ -1,2 +1,3 @@
 import { PropsFor, positions } from "../Box/index.js";
-export type PositionsProps = PropsFor<typeof positions>;
+export type PositionsProps = PropsFor<typeof positions>;
+export default positions;

package/esm/shadows/shadows.d.ts

@@ -1,2 +1,3 @@
 import { PropsFor, shadows } from "../Box/index.js";
-export type ShadowsProps = PropsFor<typeof shadows>;
+export type ShadowsProps = PropsFor<typeof shadows>;
+export default shadows;

package/esm/sizing/sizing.d.ts

@@ -8,4 +8,5 @@ export const minHeight: SimpleStyleFunction<'minHeight'>;
 export const sizeWidth: SimpleStyleFunction<'sizeWidth'>;
 export const sizeHeight: SimpleStyleFunction<'sizeHeight'>;
 export const boxSizing: SimpleStyleFunction<'boxSizing'>;
-export type SizingProps = PropsFor<typeof sizing>;
+export type SizingProps = PropsFor<typeof sizing>;
+export default sizing;

package/esm/spacing/spacing.d.ts

@@ -15,4 +15,5 @@ export const margin: SimpleStyleFunction<'m' | 'mt' | 'mr' | 'mb' | 'ml' | 'mx'
 export type MarginProps = PropsFor<typeof margin>;
 export const padding: SimpleStyleFunction<'p' | 'pt' | 'pr' | 'pb' | 'pl' | 'px' | 'py' | 'padding' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft' | 'paddingX' | 'paddingY' | 'paddingInline' | 'paddingInlineStart' | 'paddingInlineEnd' | 'paddingBlock' | 'paddingBlockStart' | 'paddingBlockEnd'>;
 export function getValue(transformer: (prop: SpacingValueType) => SpacingValueType, propValue: SpacingValueType): SpacingValueType;
-export type PaddingProps = PropsFor<typeof padding>;
+export type PaddingProps = PropsFor<typeof padding>;
+export default spacing;

package/esm/spacing/spacing.js

@@ -55,6 +55,12 @@ export function createUnaryUnit(theme, themeKey, defaultValue, propName) {
         }
       }
       if (typeof themeSpacing === 'string') {
+        if (themeSpacing.startsWith('var(') && val === 0) {
+          return 0;
+        }
+        if (themeSpacing.startsWith('var(') && val === 1) {
+          return themeSpacing;
+        }
         return `calc(${val} * ${themeSpacing})`;
       }
       return themeSpacing * val;
@@ -80,6 +86,9 @@ export function createUnaryUnit(theme, themeKey, defaultValue, propName) {
       if (typeof transformed === 'number') {
         return -transformed;
       }
+      if (typeof transformed === 'string' && transformed.startsWith('var(')) {
+        return `calc(-1 * ${transformed})`;
+      }
       return `-${transformed}`;
     };
   }

package/esm/style/style.d.ts

@@ -10,10 +10,10 @@ export interface StyleOptions<PropKey> {
   themeKey?: string;
   transform?: TransformFunction;
 }
-export function style<PropKey extends string, Theme extends object>(options: StyleOptions<PropKey>): StyleFunction<{ [K in PropKey]?: unknown } & {
+export function getPath<T>(obj: T, path: string | undefined, checkVars?: boolean): null | unknown;
+export function getStyleValue(themeMapping: object | ((arg: any) => any), transform: TransformFunction | null, propValueFinal: unknown, userValue?: unknown): any;
+export default function style<PropKey extends string, Theme extends object>(options: StyleOptions<PropKey>): StyleFunction<{ [K in PropKey]?: unknown } & {
   theme?: Theme;
 }> & {
   filterProps: string[];
-};
-export function getPath<T>(obj: T, path: string | undefined, checkVars?: boolean): null | unknown;
-export function getStyleValue(themeMapping: object | ((arg: any) => any), transform: TransformFunction | null, propValueFinal: unknown, userValue?: unknown): any;
+};

package/esm/typography/typography.d.ts

@@ -8,4 +8,5 @@ export const letterSpacing: SimpleStyleFunction<'letterSpacing'>;
 export const lineHeight: SimpleStyleFunction<'lineHeight'>;
 export const textAlign: SimpleStyleFunction<'textAlign'>;
 export const textTransform: SimpleStyleFunction<'textTransform'>;
-export type TypographyProps = PropsFor<typeof typography>;
+export type TypographyProps = PropsFor<typeof typography>;
+export default typography;

package/esm/version/index.js

@@ -1,6 +1,6 @@
-export const version = "7.0.0-beta.3";
+export const version = "7.0.0-rc.0";
 export const major = Number("7");
 export const minor = Number("0");
 export const patch = Number("0");
-export const prerelease = "beta.3";
+export const prerelease = "rc.0";
 export default version;

package/flexbox/flexbox.d.ts

@@ -1,2 +1,3 @@
 import { PropsFor, flexbox } from "../Box/index.js";
-export type FlexboxProps = PropsFor<typeof flexbox>;
+export type FlexboxProps = PropsFor<typeof flexbox>;
+export default flexbox;

package/index.d.ts

@@ -27,6 +27,7 @@ export { css, keyframes, StyledEngineProvider, Interpolation, CSSInterpolation,
 export { default as GlobalStyles } from "./GlobalStyles/index.js";
 export type { GlobalStylesProps } from "./GlobalStyles/index.js";
 export * from "./style/index.js";
+export { default as style } from "./style/index.js";
 export * from "./spacing/index.js";
 export { default as unstable_styleFunctionSx, unstable_createStyleFunctionSx, extendSxProp as unstable_extendSxProp, unstable_defaultSxConfig } from "./styleFunctionSx/index.js";
 export * from "./styleFunctionSx/index.js";

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v7.0.0-beta.3
+ * @mui/system v7.0.0-rc.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -394,7 +394,7 @@ Object.defineProperty(exports, "useThemeWithoutDefault", {
     return _useThemeWithoutDefault.default;
   }
 });
-var _formatMuiErrorMessage2 = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
+var _formatMuiErrorMessage = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
 var _styledEngine = require("@mui/styled-engine");
 var _GlobalStyles = _interopRequireDefault(require("./GlobalStyles"));
 var _borders = _interopRequireWildcard(require("./borders"));
@@ -610,7 +610,7 @@ Object.keys(_Stack2).forEach(function (key) {
 // TODO: Remove this function in v6
 // eslint-disable-next-line @typescript-eslint/naming-convention
 function experimental_sx() {
-  throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: The `experimental_sx` has been moved to `theme.unstable_sx`.' + 'For more details, see https://github.com/mui/material-ui/pull/35150.' : (0, _formatMuiErrorMessage2.default)(19));
+  throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: The `experimental_sx` has been moved to `theme.unstable_sx`.' + 'For more details, see https://github.com/mui/material-ui/pull/35150.' : (0, _formatMuiErrorMessage.default)(19));
 }
 
 /** ----------------- */

package/modern/borders/borders.d.ts

@@ -1,4 +1,4 @@
-import { PropsFor, SimpleStyleFunction, borders } from "../Box/index.js";
+import { PropsFor, borders, SimpleStyleFunction } from "../Box/index.js";
 export const border: SimpleStyleFunction<'border'>;
 export const borderTop: SimpleStyleFunction<'borderTop'>;
 export const borderRight: SimpleStyleFunction<'borderRight'>;
@@ -10,4 +10,5 @@ export const borderRightColor: SimpleStyleFunction<'borderRightColor'>;
 export const borderBottomColor: SimpleStyleFunction<'borderBottomColor'>;
 export const borderLeftColor: SimpleStyleFunction<'borderLeftColor'>;
 export const borderRadius: SimpleStyleFunction<'borderRadius'>;
-export type BordersProps = PropsFor<typeof borders>;
+export type BordersProps = PropsFor<typeof borders>;
+export default borders;

package/modern/colorManipulator/colorManipulator.js

@@ -1,4 +1,4 @@
-import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
+import _formatErrorMessage from "@mui/utils/formatMuiErrorMessage";
 /* eslint-disable @typescript-eslint/naming-convention */
 import clamp from '@mui/utils/clamp';
 
@@ -62,7 +62,7 @@ export function decomposeColor(color) {
   const marker = color.indexOf('(');
   const type = color.substring(0, marker);
   if (!['rgb', 'rgba', 'hsl', 'hsla', 'color'].includes(type)) {
-    throw new Error(process.env.NODE_ENV !== "production" ? `MUI: Unsupported \`${color}\` color.\n` + 'The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().' : _formatMuiErrorMessage(9, color));
+    throw new Error(process.env.NODE_ENV !== "production" ? `MUI: Unsupported \`${color}\` color.\n` + 'The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().' : _formatErrorMessage(9, color));
   }
   let values = color.substring(marker + 1, color.length - 1);
   let colorSpace;
@@ -73,7 +73,7 @@ export function decomposeColor(color) {
       values[3] = values[3].slice(1);
     }
     if (!['srgb', 'display-p3', 'a98-rgb', 'prophoto-rgb', 'rec-2020'].includes(colorSpace)) {
-      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: unsupported \`${colorSpace}\` color space.\n` + 'The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.' : _formatMuiErrorMessage(10, colorSpace));
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: unsupported \`${colorSpace}\` color space.\n` + 'The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.' : _formatErrorMessage(10, colorSpace));
     }
   } else {
     values = values.split(',');

package/modern/cssContainerQueries/cssContainerQueries.js

@@ -1,4 +1,4 @@
-import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
+import _formatErrorMessage 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.
@@ -32,7 +32,7 @@ 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>\`.\n` + 'For example, `@sm` or `@600` or `@40rem/sidebar`.' : _formatMuiErrorMessage(18, `(${shorthand})`));
+      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>\`.\n` + 'For example, `@sm` or `@600` or `@40rem/sidebar`.' : _formatErrorMessage(18, `(${shorthand})`));
     }
     return null;
   }

package/modern/cssGrid/cssGrid.d.ts

@@ -1,2 +1,15 @@
-import { PropsFor, grid } from "../Box/index.js";
-export type CssGridProps = PropsFor<typeof grid>;
+import { PropsFor, grid, SimpleStyleFunction } from "../Box/index.js";
+export const gap: SimpleStyleFunction<'gap'>;
+export const columnGap: SimpleStyleFunction<'columnGap'>;
+export const rowGap: SimpleStyleFunction<'rowGap'>;
+export const gridColumn: SimpleStyleFunction<'gridColumn'>;
+export const gridRow: SimpleStyleFunction<'gridRow'>;
+export const gridAutoFlow: SimpleStyleFunction<'gridAutoFlow'>;
+export const gridAutoColumns: SimpleStyleFunction<'gridAutoColumns'>;
+export const gridAutoRows: SimpleStyleFunction<'gridAutoRows'>;
+export const gridTemplateColumns: SimpleStyleFunction<'gridTemplateColumns'>;
+export const gridTemplateRows: SimpleStyleFunction<'gridTemplateRows'>;
+export const gridTemplateAreas: SimpleStyleFunction<'gridTemplateAreas'>;
+export const gridArea: SimpleStyleFunction<'gridArea'>;
+export type CssGridProps = PropsFor<typeof grid>;
+export default grid;