@mui/system 7.0.2 → 7.1.0

package/Box/Box.d.ts

@@ -2,37 +2,18 @@ import * as React from 'react';
 import { OverridableComponent, OverrideProps } from '@mui/types';
 import { Theme as SystemTheme } from "../createTheme/index.js";
 import { SxProps, AllSystemCSSProperties, ResponsiveStyleValue, OverwriteCSSProperties, AliasesCSSProperties } from "../styleFunctionSx/index.js";
-export type PropsFor<SomeStyleFunction> = SomeStyleFunction extends StyleFunction<infer Props> ? Props : never;
-export type StyleFunction<Props> = (props: Props) => any;
-export type SimpleStyleFunction<PropKey extends keyof any> = StyleFunction<Partial<Record<PropKey, any>>> & {
-  filterProps: string[];
-};
-
-// borders.js
-export declare const borders: SimpleStyleFunction<'border' | 'borderTop' | 'borderRight' | 'borderBottom' | 'borderLeft' | 'borderColor' | 'borderRadius'>;
-export declare const display: SimpleStyleFunction<'display' | 'displayPrint' | 'overflow' | 'textOverflow' | 'visibility' | 'whiteSpace'>;
-export declare const flexbox: SimpleStyleFunction<'flexBasis' | 'flexDirection' | 'flexWrap' | 'justifyContent' | 'alignItems' | 'alignContent' | 'order' | 'flex' | 'flexGrow' | 'flexShrink' | 'alignSelf' | 'justifyItems' | 'justifySelf'>;
-export declare const grid: SimpleStyleFunction<'gap' | 'columnGap' | 'rowGap' | 'gridColumn' | 'gridRow' | 'gridAutoFlow' | 'gridAutoColumns' | 'gridAutoRows' | 'gridTemplateColumns' | 'gridTemplateRows' | 'gridTemplateAreas' | 'gridArea'>;
-export declare const palette: SimpleStyleFunction<'bgcolor' | 'color'>;
-export declare const positions: SimpleStyleFunction<'zIndex' | 'position' | 'top' | 'right' | 'bottom' | 'left'>;
-export declare const shadows: SimpleStyleFunction<'boxShadow'>;
-export declare const sizing: SimpleStyleFunction<'width' | 'maxWidth' | 'minWidth' | 'height' | 'maxHeight' | 'minHeight' | 'sizeWidth' | 'sizeHeight' | 'boxSizing'>;
-export declare const spacing: SimpleStyleFunction<'m' | 'mt' | 'mr' | 'mb' | 'ml' | 'mx' | 'my' | 'p' | 'pt' | 'pr' | 'pb' | 'pl' | 'px' | 'py' | 'margin' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft' | 'marginX' | 'marginY' | 'marginInline' | 'marginInlineStart' | 'marginInlineEnd' | 'marginBlock' | 'marginBlockStart' | 'marginBlockEnd' | 'padding' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft' | 'paddingX' | 'paddingY' | 'paddingInline' | 'paddingInlineStart' | 'paddingInlineEnd' | 'paddingBlock' | 'paddingBlockStart' | 'paddingBlockEnd'>;
-export declare const typography: SimpleStyleFunction<'typography' | 'fontFamily' | 'fontSize' | 'fontStyle' | 'fontWeight' | 'letterSpacing' | 'lineHeight' | 'textAlign' | 'textTransform'>;
-
-// compose.js
-/**
- * given a list of StyleFunction return the intersection of the props each individual
- * StyleFunction requires.
- *
- * If `firstFn` requires { color: string } and `secondFn` requires { spacing: number }
- * their composed function requires { color: string, spacing: number }
- */
-type ComposedArg<T> = T extends Array<(arg: infer P) => any> ? P : never;
-type ComposedOwnerState<T> = ComposedArg<T>;
-export type ComposedStyleFunction<T extends Array<StyleFunction<any>>> = StyleFunction<ComposedOwnerState<T>> & {
-  filterProps: string[];
-};
+import { PropsFor } from "../style/index.js";
+import { ComposedStyleFunction } from "../compose/index.js";
+import borders from "../borders/index.js";
+import display from "../display/index.js";
+import flexbox from "../flexbox/index.js";
+import grid from "../cssGrid/index.js";
+import palette from "../palette/index.js";
+import positions from "../positions/index.js";
+import shadows from "../shadows/index.js";
+import sizing from "../sizing/index.js";
+import spacing from "../spacing/index.js";
+import typography from "../typography/index.js";
 export interface CustomSystemProps extends AliasesCSSProperties, OverwriteCSSProperties {}
 export type SimpleSystemKeys = keyof PropsFor<ComposedStyleFunction<[typeof borders, typeof display, typeof flexbox, typeof grid, typeof palette, typeof positions, typeof shadows, typeof sizing, typeof spacing, typeof typography]>>;
 

package/CHANGELOG.md

@@ -1,5 +1,102 @@
 # [Versions](https://mui.com/versions/)
 
+## 7.1.0
+
+<!-- generated comparing v7.0.2..master -->
+
+_May 6, 2025_
+
+A big thanks to the 21 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎉 Material UI now works with **Tailwind CSS v4**! Check out the [setup guide](https://mui.com/material-ui/integrations/tailwindcss/tailwindcss-v4/).
+
+### `@mui/material@7.1.0`
+
+- [InputBase] Text cursor jumps several lines up when inserting text fragment with new line at the end (#45246) @yermartee
+- [OutlinedInput] Add missing `notchedOutline` slot (#45917) @siriwatknp
+- [Snackbar] Skip default `onClickAway` behavior when `defaultMuiPrevented` is provided (#45629) @sai6855
+- [Avatar] Fix img slot types and add missing slots (#45483) @siriwatknp
+- [Badge] Replace useSlotProps with useSlot hook (#45871) @sai6855
+- [BottomNavigationAction] Add slots and slotProps (#45776) @sai6855
+- [CardActionArea] Add slots and slotProps (#45866) @sai6855
+- [useMediaQuery] Add warning and docs for using `useMediaQuery('print')` (#44790) @good-jinu
+- Remove unnecessary clsx usages (#46084) @sai6855
+- Corrected generic type definition in `SelectChangeEvent` (#45941) @SuyashShukla0007
+- Fix theme object changes between renders (#45863) @siriwatknp
+
+### `@mui/material-nextjs@7.1.0`
+
+- Add option to enable CSS layers for pages router (#45596) @siriwatknp
+- Do not wrap `@layer` order rules in App Router (#45864) @Nayeem-XTREME
+
+### `@mui/system@7.1.0`
+
+- Fix `@mui/system` types organization (#45860) @Janpot
+
+### `@mui/styled-engine@7.1.0`
+
+- Infer `ownerState` from props in `styled` (#46083) @siriwatknp
+- Fix style overrides variants type (#45478) @siriwatknp
+
+### Docs
+
+- [Avatar] Add avatar upload demo (#45986) @Demianeen
+- [Dialog] Remove deprecated props usage in demos (#45923) @sai6855
+- [Menu] Update `paper` slot JSDoc default from `Paper` to `PopoverPaper` (#45722) @andreachiera
+- [examples] Remove create-react-app usages (#45426) @CodeLeom
+- Add `AccordionSummary` to the v5 breaking change migration (#45947) @siriwatknp
+- Update CSS variable usage in migration guide for Pigment CSS (#46033) @sai6855
+- Fix docs API dark mode color (#46086) @alexfauquette
+- Add a guide for extending Material UI classes in Tailwind CSS (#46039) @siriwatknp
+- Add `InitColorSchemeScript` docs and API (#45927) @siriwatknp
+- Add Tailwind CSS v4 integration guide (#45906) @siriwatknp
+- Fix 301 links to the system v6 (#45931) @oliviertassinari
+- Add notification for MUI X v8 announcement (#45942) @joserodolfofreitas
+- Fix som 301 redirections (ae84b35) @oliviertassinari
+- Fix some 301 redirections (057384e) @oliviertassinari
+- Fix logo is not centered on small screens (#45920) @crabsim
+- Fix line break typo (a2a62d5) @oliviertassinari
+- Fix markdown typo in templates.md (#45914) @scyzoryck
+- Add Next.js App Router guide for custom classnames (#45852) @siriwatknp
+
+### Core
+
+- [code-infra] Give a stable name to dev tool app (3889ded) @oliviertassinari
+- [code-infra] Normalize author package in org (8135638) @oliviertassinari
+- [code-infra] Correct some manually curated .d.ts files (#46054) @Janpot
+- [code-infra] Align deps versions (#46048) @Janpot
+- [code-infra] Fix dynamic import in imports resolver (#46046) @Janpot
+- [code-infra] Eliminate `@mui/utils` deep imports (#46004) @Janpot
+- [code-infra] Expand renovate.json for react types (#45935) @Janpot
+- [code-infra] Make Argos upload script reusable (#45883) @Janpot
+- [code-infra] Disallow redundant window prefixes for globals (#45880) @Janpot
+- [code-infra] Remove type generation of modern build (#45912) @Janpot
+- [code-infra] Clean up bundle size checker (#45622) @Janpot
+- [code-infra] Fix `StrictMode` effects not being called twice in React 19 tests (#45812) @bernardobelchior
+- [code-infra] Convert `@mui/utils` to typescript (#45671) @Janpot
+- [docs-infra] Improve export into sandbox package.json (#46044) @oliviertassinari
+- [docs-infra] Update feedback Node.js to v22 (#46064) @oliviertassinari
+- [docs-infra] Normalize netlify.toml in org (b101d5c) @oliviertassinari
+- [docs-infra] Uniformize Vale between repositories (0f79796) @oliviertassinari
+- [docs-infra] Fix Vale no longer working (#46029) @oliviertassinari
+- [docs-infra] Remove demo styling switch (#45926) @Janpot
+- [docs-infra] StackBlitz WebContainer demos (#45924) @Janpot
+- [docs-infra] Fix feedback management (#45872) @alexfauquette
+- [test] Replace `playwright` with `@playwright/test` (#45998) @ZeeshanTamboli
+- Fix internal version duplication (#46051) @oliviertassinari
+- Avoid the need for `@mui/material/themeCssVarsAugmentation` (#46053) @Janpot
+- Add security label to dependabot PRs (0a5c027) @oliviertassinari
+- Remove unecessary versions (#46034) @oliviertassinari
+- Remove redundant overrides resolver (#45970) @romgrk
+- Fix duplicate branch reference (#45915) @oliviertassinari
+- Fix outdated <link rel="shortcut icon" (#45916) @oliviertassinari
+- Fix redirection chains (#45930) @oliviertassinari
+- Run pnpm docs:sync-team (beee09f) @oliviertassinari
+- Add `pkg.pr.new` publishing (#42984) @Aslemammad
+- Remove @mui/base from the master branch (#45857) @mnajdova
+
+All contributors of this release in alphabetical order: @alexfauquette, @andreachiera, @Aslemammad, @bernardobelchior, @CodeLeom, @crabsim, @Demianeen, @good-jinu, @Janpot, @joserodolfofreitas, @mnajdova, @Nayeem-XTREME, @oliviertassinari, @renovate[bot], @romgrk, @sai6855, @scyzoryck, @siriwatknp, @SuyashShukla0007, @yermartee, @ZeeshanTamboli
+
 ## 7.0.2
 
 _Apr 9, 2025_

package/Grid/createGrid.js

@@ -26,8 +26,7 @@ const defaultTheme = (0, _createTheme.default)();
 // widening Theme to any so that the consumer can own the theme structure.
 const defaultCreateStyledComponent = (0, _styled.default)('div', {
   name: 'MuiGrid',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 });
 function useThemePropsDefault(props) {
   return (0, _useThemeProps.default)({

package/InitColorSchemeScript/InitColorSchemeScript.js

@@ -39,7 +39,7 @@ function InitColorSchemeScript(options) {
     setter += `${colorSchemeNode}.classList.remove('${selector}'.replace('%s', light), '${selector}'.replace('%s', dark));
       ${colorSchemeNode}.classList.add('${selector}'.replace('%s', colorScheme));`;
   }
-  const matches = attribute.match(/\[([^\]]+)\]/); // case [data-color-scheme=%s] or [data-color-scheme]
+  const matches = attribute.match(/\[([^\]]+)\]/); // case [data-color-scheme='%s'] or [data-color-scheme]
   if (matches) {
     const [attr, value] = matches[1].split('=');
     if (!value) {

package/Stack/createStack.js

@@ -25,8 +25,7 @@ const defaultTheme = (0, _createTheme.default)();
 // widening Theme to any so that the consumer can own the theme structure.
 const defaultCreateStyledComponent = (0, _styled.default)('div', {
   name: 'MuiStack',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 });
 function useThemePropsDefault(props) {
   return (0, _useThemeProps.default)({

package/borders/borders.d.ts

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

package/breakpoints/breakpoints.d.ts

@@ -2,7 +2,7 @@ import { CSSObject } from '@mui/styled-engine';
 import { Breakpoints } from "../createBreakpoints/createBreakpoints.js";
 import type { Breakpoint } from "../createTheme/index.js";
 import { ResponsiveStyleValue } from "../styleFunctionSx/index.js";
-import { StyleFunction } from "../Box/index.js";
+import { StyleFunction } from "../style/index.js";
 export interface ResolveBreakpointValuesOptions<T> {
   values: ResponsiveStyleValue<T>;
   breakpoints?: Breakpoints['values'];

package/compose/compose.d.ts

@@ -1,2 +1,15 @@
-import { ComposedStyleFunction, StyleFunction } from "../Box/index.js";
+import { StyleFunction } from "../style/index.js";
+
+/**
+ * given a list of StyleFunction return the intersection of the props each individual
+ * StyleFunction requires.
+ *
+ * If `firstFn` requires { color: string } and `secondFn` requires { spacing: number }
+ * their composed function requires { color: string, spacing: number }
+ */
+type ComposedArg<T> = T extends Array<(arg: infer P) => any> ? P : never;
+type ComposedOwnerState<T> = ComposedArg<T>;
+export type ComposedStyleFunction<T extends Array<StyleFunction<any>>> = StyleFunction<ComposedOwnerState<T>> & {
+  filterProps: string[];
+};
 export default function compose<T extends Array<StyleFunction<any>>>(...args: T): ComposedStyleFunction<T>;

package/compose/index.d.ts

@@ -1 +1 @@
-export { default } from "./compose.js";
+export { default, type ComposedStyleFunction } from "./compose.js";

package/cssGrid/cssGrid.d.ts

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

package/display/display.d.ts

@@ -1,3 +1,4 @@
-import { PropsFor, display } from "../Box/index.js";
+import { PropsFor, SimpleStyleFunction } from "../style/index.js";
+declare const display: SimpleStyleFunction<'display' | 'displayPrint' | 'overflow' | 'textOverflow' | 'visibility' | 'whiteSpace'>;
 export type DisplayProps = PropsFor<typeof display>;
 export default display;

package/esm/Box/Box.d.ts

@@ -2,37 +2,18 @@ import * as React from 'react';
 import { OverridableComponent, OverrideProps } from '@mui/types';
 import { Theme as SystemTheme } from "../createTheme/index.js";
 import { SxProps, AllSystemCSSProperties, ResponsiveStyleValue, OverwriteCSSProperties, AliasesCSSProperties } from "../styleFunctionSx/index.js";
-export type PropsFor<SomeStyleFunction> = SomeStyleFunction extends StyleFunction<infer Props> ? Props : never;
-export type StyleFunction<Props> = (props: Props) => any;
-export type SimpleStyleFunction<PropKey extends keyof any> = StyleFunction<Partial<Record<PropKey, any>>> & {
-  filterProps: string[];
-};
-
-// borders.js
-export declare const borders: SimpleStyleFunction<'border' | 'borderTop' | 'borderRight' | 'borderBottom' | 'borderLeft' | 'borderColor' | 'borderRadius'>;
-export declare const display: SimpleStyleFunction<'display' | 'displayPrint' | 'overflow' | 'textOverflow' | 'visibility' | 'whiteSpace'>;
-export declare const flexbox: SimpleStyleFunction<'flexBasis' | 'flexDirection' | 'flexWrap' | 'justifyContent' | 'alignItems' | 'alignContent' | 'order' | 'flex' | 'flexGrow' | 'flexShrink' | 'alignSelf' | 'justifyItems' | 'justifySelf'>;
-export declare const grid: SimpleStyleFunction<'gap' | 'columnGap' | 'rowGap' | 'gridColumn' | 'gridRow' | 'gridAutoFlow' | 'gridAutoColumns' | 'gridAutoRows' | 'gridTemplateColumns' | 'gridTemplateRows' | 'gridTemplateAreas' | 'gridArea'>;
-export declare const palette: SimpleStyleFunction<'bgcolor' | 'color'>;
-export declare const positions: SimpleStyleFunction<'zIndex' | 'position' | 'top' | 'right' | 'bottom' | 'left'>;
-export declare const shadows: SimpleStyleFunction<'boxShadow'>;
-export declare const sizing: SimpleStyleFunction<'width' | 'maxWidth' | 'minWidth' | 'height' | 'maxHeight' | 'minHeight' | 'sizeWidth' | 'sizeHeight' | 'boxSizing'>;
-export declare const spacing: SimpleStyleFunction<'m' | 'mt' | 'mr' | 'mb' | 'ml' | 'mx' | 'my' | 'p' | 'pt' | 'pr' | 'pb' | 'pl' | 'px' | 'py' | 'margin' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft' | 'marginX' | 'marginY' | 'marginInline' | 'marginInlineStart' | 'marginInlineEnd' | 'marginBlock' | 'marginBlockStart' | 'marginBlockEnd' | 'padding' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft' | 'paddingX' | 'paddingY' | 'paddingInline' | 'paddingInlineStart' | 'paddingInlineEnd' | 'paddingBlock' | 'paddingBlockStart' | 'paddingBlockEnd'>;
-export declare const typography: SimpleStyleFunction<'typography' | 'fontFamily' | 'fontSize' | 'fontStyle' | 'fontWeight' | 'letterSpacing' | 'lineHeight' | 'textAlign' | 'textTransform'>;
-
-// compose.js
-/**
- * given a list of StyleFunction return the intersection of the props each individual
- * StyleFunction requires.
- *
- * If `firstFn` requires { color: string } and `secondFn` requires { spacing: number }
- * their composed function requires { color: string, spacing: number }
- */
-type ComposedArg<T> = T extends Array<(arg: infer P) => any> ? P : never;
-type ComposedOwnerState<T> = ComposedArg<T>;
-export type ComposedStyleFunction<T extends Array<StyleFunction<any>>> = StyleFunction<ComposedOwnerState<T>> & {
-  filterProps: string[];
-};
+import { PropsFor } from "../style/index.js";
+import { ComposedStyleFunction } from "../compose/index.js";
+import borders from "../borders/index.js";
+import display from "../display/index.js";
+import flexbox from "../flexbox/index.js";
+import grid from "../cssGrid/index.js";
+import palette from "../palette/index.js";
+import positions from "../positions/index.js";
+import shadows from "../shadows/index.js";
+import sizing from "../sizing/index.js";
+import spacing from "../spacing/index.js";
+import typography from "../typography/index.js";
 export interface CustomSystemProps extends AliasesCSSProperties, OverwriteCSSProperties {}
 export type SimpleSystemKeys = keyof PropsFor<ComposedStyleFunction<[typeof borders, typeof display, typeof flexbox, typeof grid, typeof palette, typeof positions, typeof shadows, typeof sizing, typeof spacing, typeof typography]>>;
 

package/esm/Grid/createGrid.js

@@ -19,8 +19,7 @@ const defaultTheme = createTheme();
 // widening Theme to any so that the consumer can own the theme structure.
 const defaultCreateStyledComponent = systemStyled('div', {
   name: 'MuiGrid',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 });
 function useThemePropsDefault(props) {
   return useThemePropsSystem({

package/esm/InitColorSchemeScript/InitColorSchemeScript.js

@@ -30,7 +30,7 @@ export default function InitColorSchemeScript(options) {
     setter += `${colorSchemeNode}.classList.remove('${selector}'.replace('%s', light), '${selector}'.replace('%s', dark));
       ${colorSchemeNode}.classList.add('${selector}'.replace('%s', colorScheme));`;
   }
-  const matches = attribute.match(/\[([^\]]+)\]/); // case [data-color-scheme=%s] or [data-color-scheme]
+  const matches = attribute.match(/\[([^\]]+)\]/); // case [data-color-scheme='%s'] or [data-color-scheme]
   if (matches) {
     const [attr, value] = matches[1].split('=');
     if (!value) {

package/esm/Stack/createStack.js

@@ -17,8 +17,7 @@ const defaultTheme = createTheme();
 // widening Theme to any so that the consumer can own the theme structure.
 const defaultCreateStyledComponent = systemStyled('div', {
   name: 'MuiStack',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 });
 function useThemePropsDefault(props) {
   return useThemePropsSystem({

package/esm/borders/borders.d.ts

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

package/esm/breakpoints/breakpoints.d.ts

@@ -2,7 +2,7 @@ import { CSSObject } from '@mui/styled-engine';
 import { Breakpoints } from "../createBreakpoints/createBreakpoints.js";
 import type { Breakpoint } from "../createTheme/index.js";
 import { ResponsiveStyleValue } from "../styleFunctionSx/index.js";
-import { StyleFunction } from "../Box/index.js";
+import { StyleFunction } from "../style/index.js";
 export interface ResolveBreakpointValuesOptions<T> {
   values: ResponsiveStyleValue<T>;
   breakpoints?: Breakpoints['values'];

package/esm/compose/compose.d.ts

@@ -1,2 +1,15 @@
-import { ComposedStyleFunction, StyleFunction } from "../Box/index.js";
+import { StyleFunction } from "../style/index.js";
+
+/**
+ * given a list of StyleFunction return the intersection of the props each individual
+ * StyleFunction requires.
+ *
+ * If `firstFn` requires { color: string } and `secondFn` requires { spacing: number }
+ * their composed function requires { color: string, spacing: number }
+ */
+type ComposedArg<T> = T extends Array<(arg: infer P) => any> ? P : never;
+type ComposedOwnerState<T> = ComposedArg<T>;
+export type ComposedStyleFunction<T extends Array<StyleFunction<any>>> = StyleFunction<ComposedOwnerState<T>> & {
+  filterProps: string[];
+};
 export default function compose<T extends Array<StyleFunction<any>>>(...args: T): ComposedStyleFunction<T>;

package/esm/compose/index.d.ts

@@ -1 +1 @@
-export { default } from "./compose.js";
+export { default, type ComposedStyleFunction } from "./compose.js";

package/esm/cssGrid/cssGrid.d.ts

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

package/esm/display/display.d.ts

@@ -1,3 +1,4 @@
-import { PropsFor, display } from "../Box/index.js";
+import { PropsFor, SimpleStyleFunction } from "../style/index.js";
+declare const display: SimpleStyleFunction<'display' | 'displayPrint' | 'overflow' | 'textOverflow' | 'visibility' | 'whiteSpace'>;
 export type DisplayProps = PropsFor<typeof display>;
 export default display;

package/esm/flexbox/flexbox.d.ts

@@ -1,3 +1,17 @@
-import { PropsFor, flexbox } from "../Box/index.js";
+import { PropsFor, SimpleStyleFunction } from "../style/index.js";
+export const flexBasis: SimpleStyleFunction<'flexBasis'>;
+export const flexDirection: SimpleStyleFunction<'flexDirection'>;
+export const flexWrap: SimpleStyleFunction<'flexWrap'>;
+export const justifyContent: SimpleStyleFunction<'justifyContent'>;
+export const alignItems: SimpleStyleFunction<'alignItems'>;
+export const alignContent: SimpleStyleFunction<'alignContent'>;
+export const order: SimpleStyleFunction<'order'>;
+export const flex: SimpleStyleFunction<'flex'>;
+export const flexGrow: SimpleStyleFunction<'flexGrow'>;
+export const flexShrink: SimpleStyleFunction<'flexShrink'>;
+export const alignSelf: SimpleStyleFunction<'alignSelf'>;
+export const justifyItems: SimpleStyleFunction<'justifyItems'>;
+export const justifySelf: SimpleStyleFunction<'justifySelf'>;
+declare const flexbox: SimpleStyleFunction<'flexBasis' | 'flexDirection' | 'flexWrap' | 'justifyContent' | 'alignItems' | 'alignContent' | 'order' | 'flex' | 'flexGrow' | 'flexShrink' | 'alignSelf' | 'justifyItems' | 'justifySelf'>;
 export type FlexboxProps = PropsFor<typeof flexbox>;
 export default flexbox;

package/esm/index.d.ts

@@ -1,17 +1,26 @@
 // disable automatic export
 export {};
 export * from "./borders/index.js";
+export { default as borders } from "./borders/index.js";
 export { default as breakpoints, handleBreakpoints, mergeBreakpointsInOrder } from "./breakpoints/index.js";
 export { default as cssContainerQueries, type CssContainerQueries } from "./cssContainerQueries/index.js";
 export { default as compose } from "./compose/index.js";
 export * from "./display/index.js";
+export { default as display } from "./display/index.js";
 export * from "./flexbox/index.js";
+export { default as flexbox } from "./flexbox/index.js";
 export * from "./cssGrid/index.js";
+export { default as grid } from "./cssGrid/index.js";
 export * from "./palette/index.js";
+export { default as palette } from "./palette/index.js";
 export * from "./positions/index.js";
+export { default as positions } from "./positions/index.js";
 export * from "./shadows/index.js";
+export { default as shadows } from "./shadows/index.js";
 export * from "./sizing/index.js";
+export { default as sizing } from "./sizing/index.js";
 export * from "./typography/index.js";
+export { default as typography } from "./typography/index.js";
 export { default as unstable_getThemeValue } from "./getThemeValue/index.js";
 
 /**
@@ -29,6 +38,7 @@ 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 spacing } 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,5 +1,5 @@
 /**
- * @mui/system v7.0.2
+ * @mui/system v7.1.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/palette/palette.d.ts

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

package/esm/positions/positions.d.ts

@@ -1,3 +1,4 @@
-import { PropsFor, positions } from "../Box/index.js";
+import { PropsFor, SimpleStyleFunction } from "../style/index.js";
+declare const positions: SimpleStyleFunction<'zIndex' | 'position' | 'top' | 'right' | 'bottom' | 'left'>;
 export type PositionsProps = PropsFor<typeof positions>;
 export default positions;

package/esm/shadows/shadows.d.ts

@@ -1,3 +1,4 @@
-import { PropsFor, shadows } from "../Box/index.js";
+import { PropsFor, SimpleStyleFunction } from "../style/index.js";
+declare const shadows: SimpleStyleFunction<'boxShadow'>;
 export type ShadowsProps = PropsFor<typeof shadows>;
 export default shadows;

package/esm/sizing/sizing.d.ts

@@ -1,4 +1,4 @@
-import { PropsFor, SimpleStyleFunction, sizing } from "../Box/index.js";
+import { PropsFor, SimpleStyleFunction } from "../style/index.js";
 export const width: SimpleStyleFunction<'width'>;
 export const maxWidth: SimpleStyleFunction<'maxWidth'>;
 export const minWidth: SimpleStyleFunction<'minWidth'>;
@@ -8,5 +8,6 @@ export const minHeight: SimpleStyleFunction<'minHeight'>;
 export const sizeWidth: SimpleStyleFunction<'sizeWidth'>;
 export const sizeHeight: SimpleStyleFunction<'sizeHeight'>;
 export const boxSizing: SimpleStyleFunction<'boxSizing'>;
+declare const sizing: SimpleStyleFunction<'width' | 'maxWidth' | 'minWidth' | 'height' | 'maxHeight' | 'minHeight' | 'sizeWidth' | 'sizeHeight' | 'boxSizing'>;
 export type SizingProps = PropsFor<typeof sizing>;
 export default sizing;

package/esm/spacing/spacing.d.ts

@@ -1,4 +1,4 @@
-import { SimpleStyleFunction, spacing, PropsFor } from "../Box/index.js";
+import { SimpleStyleFunction, PropsFor } from "../style/index.js";
 export type SpacingValueType = string | number | null | undefined;
 export type SpacingProps = PropsFor<typeof spacing>;
 export function createUnarySpacing<Spacing>(theme: {
@@ -14,6 +14,7 @@ export function createUnaryUnit<Spacing>(theme: {
 export const margin: SimpleStyleFunction<'m' | 'mt' | 'mr' | 'mb' | 'ml' | 'mx' | 'my' | 'margin' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft' | 'marginX' | 'marginY' | 'marginInline' | 'marginInlineStart' | 'marginInlineEnd' | 'marginBlock' | 'marginBlockStart' | 'marginBlockEnd'>;
 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'>;
+declare const spacing: SimpleStyleFunction<'m' | 'mt' | 'mr' | 'mb' | 'ml' | 'mx' | 'my' | 'p' | 'pt' | 'pr' | 'pb' | 'pl' | 'px' | 'py' | 'margin' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft' | 'marginX' | 'marginY' | 'marginInline' | 'marginInlineStart' | 'marginInlineEnd' | 'marginBlock' | 'marginBlockStart' | 'marginBlockEnd' | '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 default spacing;

package/esm/style/style.d.ts

@@ -1,5 +1,9 @@
 import { CSSObject } from '@mui/styled-engine';
-import { StyleFunction } from "../Box/index.js";
+export type PropsFor<SomeStyleFunction> = SomeStyleFunction extends StyleFunction<infer Props> ? Props : never;
+export type StyleFunction<Props> = (props: Props) => any;
+export type SimpleStyleFunction<PropKey extends keyof any> = StyleFunction<Partial<Record<PropKey, any>>> & {
+  filterProps: string[];
+};
 export type TransformFunction = (cssValue: unknown, userValue: unknown) => number | string | React.CSSProperties | CSSObject;
 export interface StyleOptions<PropKey> {
   cssProperty?: PropKey | keyof React.CSSProperties | false;

package/esm/styleFunctionSx/defaultSxConfig.d.ts

@@ -1,5 +1,4 @@
-import { StyleFunction } from "../Box/index.js";
-import { TransformFunction } from "../style/index.js";
+import { StyleFunction, TransformFunction } from "../style/index.js";
 type SimpleStyleFunction<PropKey extends keyof any> = StyleFunction<Partial<Record<PropKey, any>>>;
 export interface SxConfigRecord {
   cssProperty?: keyof React.CSSProperties | false;

package/esm/typography/typography.d.ts

@@ -1,4 +1,4 @@
-import { PropsFor, SimpleStyleFunction, typography } from "../Box/index.js";
+import { PropsFor, SimpleStyleFunction } from "../style/index.js";
 export const typographyVariant: SimpleStyleFunction<'typography'>;
 export const fontFamily: SimpleStyleFunction<'fontFamily'>;
 export const fontSize: SimpleStyleFunction<'fontSize'>;
@@ -8,5 +8,6 @@ export const letterSpacing: SimpleStyleFunction<'letterSpacing'>;
 export const lineHeight: SimpleStyleFunction<'lineHeight'>;
 export const textAlign: SimpleStyleFunction<'textAlign'>;
 export const textTransform: SimpleStyleFunction<'textTransform'>;
+declare const typography: SimpleStyleFunction<'typography' | 'fontFamily' | 'fontSize' | 'fontStyle' | 'fontWeight' | 'letterSpacing' | 'lineHeight' | 'textAlign' | 'textTransform'>;
 export type TypographyProps = PropsFor<typeof typography>;
 export default typography;

package/esm/useMediaQuery/useMediaQuery.js

@@ -102,6 +102,9 @@ export function unstable_createUseMediaQuery(params = {}) {
     }
     let query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;
     query = query.replace(/^@media( ?)/m, '');
+    if (query.includes('print')) {
+      console.warn([`MUI: You have provided a \`print\` query to the \`useMediaQuery\` hook.`, 'Using the print media query to modify print styles can lead to unexpected results.', 'Consider using the `displayPrint` field in the `sx` prop instead.', 'More information about `displayPrint` on our docs: https://mui.com/system/display/#display-in-print.'].join('\n'));
+    }
     const useMediaQueryImplementation = maybeReactUseSyncExternalStore !== undefined ? useMediaQueryNew : useMediaQueryOld;
     const match = useMediaQueryImplementation(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr);
     if (process.env.NODE_ENV !== 'production') {

package/esm/version/index.js

@@ -1,6 +1,6 @@
-export const version = "7.0.2";
+export const version = "7.1.0";
 export const major = Number("7");
-export const minor = Number("0");
-export const patch = Number("2");
+export const minor = Number("1");
+export const patch = Number("0");
 export const prerelease = undefined;
 export default version;

package/flexbox/flexbox.d.ts

@@ -1,3 +1,17 @@
-import { PropsFor, flexbox } from "../Box/index.js";
+import { PropsFor, SimpleStyleFunction } from "../style/index.js";
+export const flexBasis: SimpleStyleFunction<'flexBasis'>;
+export const flexDirection: SimpleStyleFunction<'flexDirection'>;
+export const flexWrap: SimpleStyleFunction<'flexWrap'>;
+export const justifyContent: SimpleStyleFunction<'justifyContent'>;
+export const alignItems: SimpleStyleFunction<'alignItems'>;
+export const alignContent: SimpleStyleFunction<'alignContent'>;
+export const order: SimpleStyleFunction<'order'>;
+export const flex: SimpleStyleFunction<'flex'>;
+export const flexGrow: SimpleStyleFunction<'flexGrow'>;
+export const flexShrink: SimpleStyleFunction<'flexShrink'>;
+export const alignSelf: SimpleStyleFunction<'alignSelf'>;
+export const justifyItems: SimpleStyleFunction<'justifyItems'>;
+export const justifySelf: SimpleStyleFunction<'justifySelf'>;
+declare const flexbox: SimpleStyleFunction<'flexBasis' | 'flexDirection' | 'flexWrap' | 'justifyContent' | 'alignItems' | 'alignContent' | 'order' | 'flex' | 'flexGrow' | 'flexShrink' | 'alignSelf' | 'justifyItems' | 'justifySelf'>;
 export type FlexboxProps = PropsFor<typeof flexbox>;
 export default flexbox;