@mui/system 7.0.2 → 7.1.1

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,174 @@
 # [Versions](https://mui.com/versions/)
 
+## 7.1.1
+
+<!-- generated comparing v7.1.0..master -->
+
+_May 30, 2025_
+
+A big thanks to the 15 contributors who made this release possible.
+
+### `@mui/material@7.1.1`
+
+- [Autocomplete] Fix label shrink issue when `renderValue` is used with empty array in multiple mode (#46047) @ZeeshanTamboli
+- [Autocomplete] Prevent `renderValue` from being skipped when value is 0 (#46145) @LakshitAgarwal
+- [Autocomplete] Add note in JSDoc for non-TextField components in `renderInput` (#46141) @khllbnomrn
+- [Chip] Add slots and slotProps (#46098) @sai6855
+- [Menu] Remove depreacted `MenuListProps` from demos (#46144) @sai6855
+- [TablePaginationActions] Export TablePaginationActions as new component (#46149) @sai6855
+- [SnackbarContent] Fix `square` prop not working (#46196) @0210shivam
+- [SnackbarContent] Fix error when theme value is CSS variable (#46198) @0210shivam
+
+### `@mui/codemod@7.1.1`
+
+- Add package name option (#45977) @siriwatknp
+
+### `@mui/system@7.1.1`
+
+- Skip styled component from being transformed (#46129) @siriwatknp
+- Update the type for borderRadius (#46154) @codiini
+
+### `@mui/styled-engine@7.1.1`
+
+- Fix variant props callback type to spread `ownerState` (#46187) @siriwatknp
+
+### `@mui/stylis-plugin-rtl@7.1.1`
+
+- Fix RTL does not work with CSS layer with a new package (#46230) @siriwatknp
+
+### Docs
+
+- [Dialog] Remove deprecated TransitionComponent from demo (#46185) @sai6855
+- [Grid] Remove direction `column` and `column-reverse` from the demo (#46127) @0210shivam
+- [Grid] Update grid migration guide (#46057) @sai6855
+- [templates] Fix rendering of logos in dark mode (#46221) @sai6855
+- [ToggleButtonGroup] Add spacing demo (#46058) @sai6855
+- Fix typo in dark mode docs (#46229) @ZeeshanTamboli
+- Clarify Next.js + Tailwind CSS v3 integration requirements (#46176) @chaitanyasharma1011
+- Fix GridLegacy docs order (#46135) @oliviertassinari
+- Update upgrade guide for resolution of `react-is` (#46002) @siriwatknp
+- Remove oudated scaffoldhub ad (#46090) @oliviertassinari
+- Show how to target global state classes with CSS Modules (#45992) @RubemMazzetto
+
+### Core
+
+- [code-infra] Add plugin to check for index file access (#46178) @Janpot
+- [code-infra] Bump eslint to v9 (#46222) @brijeshb42
+- [code-infra] Move packages to mui/mui-public (#46155) @Janpot
+- [code-infra] Move `chai` to peerDep (#46227) @JCQuintas
+- [code-infra] Avoid loading barrel file during type checking (#46177) @Janpot
+- [code-infra] Remove unnecessary ref from `HighlightedCode` component (#46151) @ZeeshanTamboli
+- [code-infra] Import mocha type instead of global (#46108) @JCQuintas
+- [code-infra] Dependabot also create branches (795a481) @oliviertassinari
+- [code-infra] Avoid running continuous release on forks (#46103) @Janpot
+- [code-infra] Remove checkout job altogether (#46100) @Janpot
+- [code-infra] Remove required checkout workflows in circleci (#46099) @Janpot
+- Run pnpm docs:sync-team (c8f1da5) @oliviertassinari
+- Upgrade MUI X packages to v8 (#45990) @KenanYusuf
+- Minor detail to reduce confusion (4c64b72) @oliviertassinari
+- Update security.md (#45839) @DiegoAndai
+- Apply yml convention, blank line only at top level (f273220) @oliviertassinari
+- Add comment that lab should be in alpha (#45999) @oliviertassinari
+
+All contributors of this release in alphabetical order: @0210shivam, @brijeshb42, @chaitanyasharma1011, @codiini, @DiegoAndai, @Janpot, @JCQuintas, @KenanYusuf, @khllbnomrn, @LakshitAgarwal, @oliviertassinari, @RubemMazzetto, @sai6855, @siriwatknp, @ZeeshanTamboli
+
+## 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/createStyled/createStyled.js

@@ -150,10 +150,15 @@ function createStyled(input = {}) {
       ...options
     });
     const transformStyle = style => {
-      // 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 style === 'function' && style.__emotion_real !== style) {
+      // - 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.
+      // - `style` could be a styled component from a babel plugin for component selectors, This condition
+      //   makes sure that we do not interpolate them.
+      if (style.__emotion_real === style) {
+        return style;
+      }
+      if (typeof style === 'function') {
         return function styleFunctionProcessor(props) {
           return processStyle(props, style);
         };

package/createTheme/shape.d.ts

@@ -1,5 +1,5 @@
 export interface Shape {
-  borderRadius: number;
+  borderRadius: number | string;
 }
 export type ShapeOptions = Partial<Shape>;
 declare const shape: Shape;

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/createStyled/createStyled.js

@@ -141,10 +141,15 @@ export default function createStyled(input = {}) {
       ...options
     });
     const transformStyle = style => {
-      // 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 style === 'function' && style.__emotion_real !== style) {
+      // - 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.
+      // - `style` could be a styled component from a babel plugin for component selectors, This condition
+      //   makes sure that we do not interpolate them.
+      if (style.__emotion_real === style) {
+        return style;
+      }
+      if (typeof style === 'function') {
         return function styleFunctionProcessor(props) {
           return processStyle(props, style);
         };

package/esm/createTheme/shape.d.ts

@@ -1,5 +1,5 @@
 export interface Shape {
-  borderRadius: number;
+  borderRadius: number | string;
 }
 export type ShapeOptions = Partial<Shape>;
 declare const shape: Shape;

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.1
  *
  * @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;