@mui/system 9.0.0-alpha.0 → 9.0.0-alpha.1

package/{esm/Box/Box.d.ts → Box/Box.d.mts}

@@ -1,19 +1,19 @@
 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";
-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";
+import { Theme as SystemTheme } from "../createTheme/index.mjs";
+import { SxProps, AllSystemCSSProperties, ResponsiveStyleValue, OverwriteCSSProperties, AliasesCSSProperties } from "../styleFunctionSx/index.mjs";
+import { PropsFor } from "../style/index.mjs";
+import { ComposedStyleFunction } from "../compose/index.mjs";
+import borders from "../borders/index.mjs";
+import display from "../display/index.mjs";
+import flexbox from "../flexbox/index.mjs";
+import grid from "../cssGrid/index.mjs";
+import palette from "../palette/index.mjs";
+import positions from "../positions/index.mjs";
+import shadows from "../shadows/index.mjs";
+import sizing from "../sizing/index.mjs";
+import spacing from "../spacing/index.mjs";
+import typography from "../typography/index.mjs";
 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]>>;
 
@@ -23,11 +23,11 @@ type StandardSystemKeys = Extract<SimpleSystemKeys, keyof AllSystemCSSProperties
 export type SystemProps<Theme extends object = {}> = { [K in StandardSystemKeys]?: ResponsiveStyleValue<AllSystemCSSProperties[K]> | ((theme: Theme) => ResponsiveStyleValue<AllSystemCSSProperties[K]>) };
 export interface BoxOwnProps<Theme extends object = SystemTheme> extends SystemProps<Theme> {
   children?: React.ReactNode;
-  ref?: React.Ref<unknown>;
+  ref?: React.Ref<unknown> | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
 }
 export interface BoxTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div', Theme extends object = SystemTheme> {
   props: AdditionalProps & BoxOwnProps<Theme>;
@@ -48,6 +48,6 @@ export interface BoxTypeMap<AdditionalProps = {}, RootComponent extends React.El
  */
 declare const Box: OverridableComponent<BoxTypeMap>;
 export type BoxProps<RootComponent extends React.ElementType = BoxTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<BoxTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
-  component?: React.ElementType;
+  component?: React.ElementType | undefined;
 };
 export default Box;

package/Box/Box.d.ts

@@ -23,11 +23,11 @@ type StandardSystemKeys = Extract<SimpleSystemKeys, keyof AllSystemCSSProperties
 export type SystemProps<Theme extends object = {}> = { [K in StandardSystemKeys]?: ResponsiveStyleValue<AllSystemCSSProperties[K]> | ((theme: Theme) => ResponsiveStyleValue<AllSystemCSSProperties[K]>) };
 export interface BoxOwnProps<Theme extends object = SystemTheme> extends SystemProps<Theme> {
   children?: React.ReactNode;
-  ref?: React.Ref<unknown>;
+  ref?: React.Ref<unknown> | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
 }
 export interface BoxTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div', Theme extends object = SystemTheme> {
   props: AdditionalProps & BoxOwnProps<Theme>;
@@ -48,6 +48,6 @@ export interface BoxTypeMap<AdditionalProps = {}, RootComponent extends React.El
  */
 declare const Box: OverridableComponent<BoxTypeMap>;
 export type BoxProps<RootComponent extends React.ElementType = BoxTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<BoxTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
-  component?: React.ElementType;
+  component?: React.ElementType | undefined;
 };
 export default Box;

package/{esm/Box/Box.js → Box/Box.mjs}

@@ -2,8 +2,8 @@
 
 import PropTypes from 'prop-types';
 import ClassNameGenerator from '@mui/utils/ClassNameGenerator';
-import createBox from "../createBox/index.js";
-import boxClasses from "./boxClasses.js";
+import createBox from "../createBox/index.mjs";
+import boxClasses from "./boxClasses.mjs";
 const Box = createBox({
   defaultClassName: boxClasses.root,
   generateClassName: ClassNameGenerator.generate

package/Box/index.d.mts

@@ -0,0 +1,4 @@
+export { default } from "./Box.mjs";
+export * from "./Box.mjs";
+export { default as boxClasses } from "./boxClasses.mjs";
+export * from "./boxClasses.mjs";

package/Box/index.mjs

@@ -0,0 +1,3 @@
+export { default } from "./Box.mjs";
+export { default as boxClasses } from "./boxClasses.mjs";
+export * from "./boxClasses.mjs";

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # [Versions](https://mui.com/versions/)
 
+## 9.0.0-alpha.1
+
+<!-- generated comparing v9.0.0-alpha.0..master -->
+
+_Feb 26, 2026_
+
+A big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+### @mui/material@9.0.0-alpha.1
+
+- [Autocomplete] Prevents Autocomplete menu from opening on right click (#47797) @silviuaavram
+- [Backdrop] Remove aria-hidden by default (#47798) @silviuaavram
+- [ButtonBase] Ensure that onClick propagates when non-native button is clicked (#47800) @silviuaavram
+- [Dialog][Modal] Remove `disableEscapeKeyDown` prop (#47695) @silviuaavram
+- [Grid] Remove system props support (#47846) @siriwatknp
+- [TableCell][theme] Apply `alpha` before color mixing to border bottom color when nativeColor + cssVariables is used (#47762) @ZeeshanTamboli
+- [theme] Remove MuiTouchRipple from theme component types (#47849) @siriwatknp
+- [Tooltip] Fix error is thrown when wrapping an input which is disabled while focused (#47684) @ZeeshanTamboli
+- [useAutocomplete] Improve isOptionEqualToValue value argument type (#47801) @silviuaavram
+
+### Docs
+
+- [docs] Add updated community theme resource (#47847) @PeterTYLiu
+- [docs] Few copy fixes (#47806) @pavan-sh
+- [docs] Fix IPA reader link in blog post (#47796) @pavan-sh
+- [docs] Fix JSX in Overriding component structure docs (#47799) @ZeeshanTamboli
+- [docs] Fix the keyboard navigation in GroupedMenu example (#47842) @silviuaavram
+- [docs] Fix Theme builder video (#47835) @oliviertassinari
+- [docs] Update pricing sankey as done (#47795) @alexfauquette
+- [docs][system] Update sizing docs to clarify `(0, 1]` behavior. (#47845) @matthias-ccri
+
+### Core
+
+- [blog] Blogpost for upcoming price changes for MUI X (#47748) @DanailH
+- [code-infra] Detect browser envs that don't support layout (#47813) @Janpot
+- [code-infra] Enable undefined addition to optional properties (#47750) @brijeshb42
+- [code-infra] Exclusively enable test mode in jsdom (#47812) @Janpot
+- [code-infra] Fix console.warn during test (#47802) @Janpot
+- [code-infra] Remove vale as a workspace dependency (#47860) @brijeshb42
+- [code-infra] Setup flat build for packages (#47670) @brijeshb42
+- [code-infra] Upgrade react-docgen to v8 (#47685) @JCQuintas
+- [docs-infra] Reapply Cookie Banner with Design Fixes (#47744) @dav-is
+- [internal] Remove legacy MUI Base API docs (#47804) @ZeeshanTamboli
+
+All contributors of this release in alphabetical order: @alexfauquette, @brijeshb42, @DanailH, @dav-is, @Janpot, @JCQuintas, @matthias-ccri, @oliviertassinari, @pavan-sh, @PeterTYLiu, @silviuaavram, @siriwatknp, @ZeeshanTamboli
+
 ## 9.0.0-alpha.0
 
 <!-- generated comparing v7.3.8..master -->

package/{esm/Container/Container.d.ts → Container/Container.d.mts}

@@ -9,5 +9,5 @@
  *
  * - [Container API](https://mui.com/system/api/container/)
  */
-declare const Container: import("@mui/types").OverridableComponent<import("./ContainerProps.js").ContainerTypeMap<{}, "div">>;
+declare const Container: import("@mui/types").OverridableComponent<import("./ContainerProps.mjs").ContainerTypeMap<{}, "div">>;
 export default Container;

package/{esm/Container/Container.js → Container/Container.mjs}

@@ -1,7 +1,7 @@
 'use client';
 
 import PropTypes from 'prop-types';
-import createContainer from "./createContainer.js";
+import createContainer from "./createContainer.mjs";
 
 /**
  *

package/{esm/Container/ContainerProps.d.ts → Container/ContainerProps.d.mts}

@@ -1,20 +1,20 @@
 import * as React from 'react';
 import { OverrideProps } from '@mui/types';
-import { SxProps } from "../styleFunctionSx/index.js";
-import { Theme, Breakpoint } from "../createTheme/index.js";
-import { ContainerClasses } from "./containerClasses.js";
+import { SxProps } from "../styleFunctionSx/index.mjs";
+import { Theme, Breakpoint } from "../createTheme/index.mjs";
+import { ContainerClasses } from "./containerClasses.mjs";
 export interface ContainerTypeMap<AdditionalProps = {}, DefaultComponent extends React.ElementType = 'div'> {
   props: AdditionalProps & {
     children?: React.ReactNode;
     /**
      * Override or extend the styles applied to the component.
      */
-    classes?: Partial<ContainerClasses>;
+    classes?: Partial<ContainerClasses> | undefined;
     /**
      * If `true`, the left and right padding is removed.
      * @default false
      */
-    disableGutters?: boolean;
+    disableGutters?: boolean | undefined;
     /**
      * Set the max-width to match the min-width of the current breakpoint.
      * This is useful if you'd prefer to design for a fixed set of sizes
@@ -22,18 +22,18 @@ export interface ContainerTypeMap<AdditionalProps = {}, DefaultComponent extends
      * It's fluid by default.
      * @default false
      */
-    fixed?: boolean;
+    fixed?: boolean | undefined;
     /**
      * Determine the max-width of the container.
      * The container width grows with the size of the screen.
      * Set to `false` to disable `maxWidth`.
      * @default 'lg'
      */
-    maxWidth?: Breakpoint | false;
+    maxWidth?: Breakpoint | false | undefined;
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx?: SxProps<Theme>;
+    sx?: SxProps<Theme> | undefined;
   };
   defaultComponent: DefaultComponent;
 }

package/Container/ContainerProps.d.ts

@@ -9,12 +9,12 @@ export interface ContainerTypeMap<AdditionalProps = {}, DefaultComponent extends
     /**
      * Override or extend the styles applied to the component.
      */
-    classes?: Partial<ContainerClasses>;
+    classes?: Partial<ContainerClasses> | undefined;
     /**
      * If `true`, the left and right padding is removed.
      * @default false
      */
-    disableGutters?: boolean;
+    disableGutters?: boolean | undefined;
     /**
      * Set the max-width to match the min-width of the current breakpoint.
      * This is useful if you'd prefer to design for a fixed set of sizes
@@ -22,18 +22,18 @@ export interface ContainerTypeMap<AdditionalProps = {}, DefaultComponent extends
      * It's fluid by default.
      * @default false
      */
-    fixed?: boolean;
+    fixed?: boolean | undefined;
     /**
      * Determine the max-width of the container.
      * The container width grows with the size of the screen.
      * Set to `false` to disable `maxWidth`.
      * @default 'lg'
      */
-    maxWidth?: Breakpoint | false;
+    maxWidth?: Breakpoint | false | undefined;
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
-    sx?: SxProps<Theme>;
+    sx?: SxProps<Theme> | undefined;
   };
   defaultComponent: DefaultComponent;
 }

package/{esm/Container/createContainer.d.ts → Container/createContainer.d.mts}

@@ -1,18 +1,18 @@
 import * as React from 'react';
 import { Interpolation, MUIStyledComponent as StyledComponent } from '@mui/styled-engine';
 import { OverridableComponent } from '@mui/types';
-import { ContainerProps, ContainerTypeMap } from "./ContainerProps.js";
-import { Theme as DefaultTheme } from "../createTheme/index.js";
+import { ContainerProps, ContainerTypeMap } from "./ContainerProps.mjs";
+import { Theme as DefaultTheme } from "../createTheme/index.mjs";
 interface StyleFnProps<Theme> extends ContainerProps {
   theme: Theme;
   ownerState: ContainerProps;
 }
 type RequiredThemeStructure = Pick<DefaultTheme, 'breakpoints' | 'spacing'>;
 export default function createContainer<Theme extends RequiredThemeStructure = DefaultTheme>(options?: {
-  createStyledComponent?: (...styles: Array<Interpolation<StyleFnProps<Theme>>>) => StyledComponent<ContainerProps>;
-  useThemeProps?: (inProps: ContainerProps) => ContainerProps & {
-    component?: React.ElementType;
-  };
-  componentName?: string;
+  createStyledComponent?: ((...styles: Array<Interpolation<StyleFnProps<Theme>>>) => StyledComponent<ContainerProps>) | undefined;
+  useThemeProps?: ((inProps: ContainerProps) => ContainerProps & {
+    component?: React.ElementType | undefined;
+  }) | undefined;
+  componentName?: string | undefined;
 }): OverridableComponent<ContainerTypeMap<{}, "div">>;
 export {};

package/Container/createContainer.d.ts

@@ -9,10 +9,10 @@ interface StyleFnProps<Theme> extends ContainerProps {
 }
 type RequiredThemeStructure = Pick<DefaultTheme, 'breakpoints' | 'spacing'>;
 export default function createContainer<Theme extends RequiredThemeStructure = DefaultTheme>(options?: {
-  createStyledComponent?: (...styles: Array<Interpolation<StyleFnProps<Theme>>>) => StyledComponent<ContainerProps>;
-  useThemeProps?: (inProps: ContainerProps) => ContainerProps & {
-    component?: React.ElementType;
-  };
-  componentName?: string;
+  createStyledComponent?: ((...styles: Array<Interpolation<StyleFnProps<Theme>>>) => StyledComponent<ContainerProps>) | undefined;
+  useThemeProps?: ((inProps: ContainerProps) => ContainerProps & {
+    component?: React.ElementType | undefined;
+  }) | undefined;
+  componentName?: string | undefined;
 }): OverridableComponent<ContainerTypeMap<{}, "div">>;
 export {};

package/{esm/Container/createContainer.js → Container/createContainer.mjs}

@@ -6,9 +6,9 @@ import clsx from 'clsx';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import composeClasses from '@mui/utils/composeClasses';
 import capitalize from '@mui/utils/capitalize';
-import useThemePropsSystem from "../useThemeProps/index.js";
-import systemStyled from "../styled/index.js";
-import createTheme from "../createTheme/index.js";
+import useThemePropsSystem from "../useThemeProps/index.mjs";
+import systemStyled from "../styled/index.mjs";
+import createTheme from "../createTheme/index.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const defaultTheme = createTheme();
 const defaultCreateStyledComponent = systemStyled('div', {

package/Container/index.d.mts

@@ -0,0 +1,4 @@
+export { default } from "./Container.mjs";
+export * from "./ContainerProps.mjs";
+export { default as containerClasses } from "./containerClasses.mjs";
+export * from "./containerClasses.mjs";

package/Container/index.mjs

@@ -0,0 +1,3 @@
+export { default } from "./Container.mjs";
+export { default as containerClasses } from "./containerClasses.mjs";
+export * from "./containerClasses.mjs";

package/{esm/DefaultPropsProvider/index.d.ts → DefaultPropsProvider/index.d.mts}

@@ -1 +1 @@
-export { default, useDefaultProps } from "./DefaultPropsProvider.js";
+export { default, useDefaultProps } from "./DefaultPropsProvider.mjs";

package/{esm/DefaultPropsProvider/index.js → DefaultPropsProvider/index.mjs}

@@ -1 +1 @@
-export { default, useDefaultProps } from "./DefaultPropsProvider.js";
+export { default, useDefaultProps } from "./DefaultPropsProvider.mjs";

package/{esm/GlobalStyles/GlobalStyles.d.ts → GlobalStyles/GlobalStyles.d.mts}

@@ -1,9 +1,9 @@
 import { Interpolation } from '@mui/styled-engine';
-import { Theme as SystemTheme } from "../createTheme/index.js";
+import { Theme as SystemTheme } from "../createTheme/index.mjs";
 export interface GlobalStylesProps<Theme = SystemTheme> {
   styles: Interpolation<Theme>;
-  defaultTheme?: object;
-  themeId?: string;
+  defaultTheme?: object | undefined;
+  themeId?: string | undefined;
 }
 declare function GlobalStyles<Theme = SystemTheme>({
   styles,

package/GlobalStyles/GlobalStyles.d.ts

@@ -2,8 +2,8 @@ import { Interpolation } from '@mui/styled-engine';
 import { Theme as SystemTheme } from "../createTheme/index.js";
 export interface GlobalStylesProps<Theme = SystemTheme> {
   styles: Interpolation<Theme>;
-  defaultTheme?: object;
-  themeId?: string;
+  defaultTheme?: object | undefined;
+  themeId?: string | undefined;
 }
 declare function GlobalStyles<Theme = SystemTheme>({
   styles,

package/{esm/GlobalStyles/GlobalStyles.js → GlobalStyles/GlobalStyles.mjs}

@@ -2,7 +2,7 @@
 
 import PropTypes from 'prop-types';
 import { GlobalStyles as MuiGlobalStyles, internal_serializeStyles as serializeStyles } from '@mui/styled-engine';
-import useTheme from "../useTheme/index.js";
+import useTheme from "../useTheme/index.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 function wrapGlobalLayer(styles) {
   const serialized = serializeStyles(styles);

package/GlobalStyles/index.d.mts

@@ -0,0 +1,2 @@
+export { default } from "./GlobalStyles.mjs";
+export * from "./GlobalStyles.mjs";

package/GlobalStyles/index.mjs

@@ -0,0 +1,2 @@
+export { default } from "./GlobalStyles.mjs";
+export * from "./GlobalStyles.mjs";

package/{esm/Grid/Grid.d.ts → Grid/Grid.d.mts}

@@ -9,5 +9,5 @@
  *
  * - [Grid API](https://mui.com/system/api/grid/)
  */
-declare const Grid: import("@mui/types").OverridableComponent<import("./GridProps.js").GridTypeMap<{}, "div">>;
+declare const Grid: import("@mui/types").OverridableComponent<import("./GridProps.mjs").GridTypeMap<{}, "div">>;
 export default Grid;

package/{esm/Grid/Grid.js → Grid/Grid.mjs}

@@ -1,7 +1,7 @@
 'use client';
 
 import PropTypes from 'prop-types';
-import createGrid from "./createGrid.js";
+import createGrid from "./createGrid.mjs";
 /**
  *
  * Demos:

package/{esm/Grid/GridProps.d.ts → Grid/GridProps.d.mts}

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { OverrideProps, PartiallyRequired } from '@mui/types';
-import { SxProps } from "../styleFunctionSx/index.js";
-import { Theme, Breakpoint } from "../createTheme/index.js";
-import { SystemProps } from "../Box/index.js";
+import { SxProps } from "../styleFunctionSx/index.mjs";
+import { Theme, Breakpoint } from "../createTheme/index.mjs";
 type ResponsiveStyleValue<T> = T | Array<T | null> | { [key in Breakpoint]?: T | null };
 export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
 export type GridSpacing = number | string;
@@ -18,28 +17,28 @@ export interface GridBaseProps {
    * The number of columns.
    * @default 12
    */
-  columns?: ResponsiveStyleValue<number>;
+  columns?: ResponsiveStyleValue<number> | undefined;
   /**
    * Defines the horizontal space between the type `item` components.
    * It overrides the value of the `spacing` prop.
    */
-  columnSpacing?: ResponsiveStyleValue<GridSpacing>;
+  columnSpacing?: ResponsiveStyleValue<GridSpacing> | undefined;
   /**
    * If `true`, the component will have the flex *container* behavior.
    * You should be wrapping *items* with a *container*.
    * @default false
    */
-  container?: boolean;
+  container?: boolean | undefined;
   /**
    * Defines the `flex-direction` style property.
    * It is applied for all screen sizes.
    * @default 'row'
    */
-  direction?: ResponsiveStyleValue<GridDirection>;
+  direction?: ResponsiveStyleValue<GridDirection> | undefined;
   /**
    * Defines the offset value for the type `item` components.
    */
-  offset?: ResponsiveStyleValue<GridOffset>;
+  offset?: ResponsiveStyleValue<GridOffset> | undefined;
   /**
    * @internal
    * The level of the grid starts from `0` and increases when the grid nests
@@ -67,16 +66,16 @@ export interface GridBaseProps {
    *     <Grid container> // level 0
    * ```
    */
-  unstable_level?: number;
+  unstable_level?: number | undefined;
   /**
    * Defines the vertical space between the type `item` components.
    * It overrides the value of the `spacing` prop.
    */
-  rowSpacing?: ResponsiveStyleValue<GridSpacing>;
+  rowSpacing?: ResponsiveStyleValue<GridSpacing> | undefined;
   /**
    * Defines the size of the the type `item` components.
    */
-  size?: ResponsiveStyleValue<GridSize>;
+  size?: ResponsiveStyleValue<GridSize> | undefined;
   /**
    * Defines the space between the type `item` components.
    * It can only be used on a type `container` component.
@@ -88,16 +87,16 @@ export interface GridBaseProps {
    * It's applied for all screen sizes.
    * @default 'wrap'
    */
-  wrap?: GridWrap;
+  wrap?: GridWrap | undefined;
 }
 export type GridOwnerState = PartiallyRequired<GridBaseProps, 'size' | 'offset' | 'unstable_level'>;
 export interface GridTypeMap<AdditionalProps = {}, DefaultComponent extends React.ElementType = 'div'> {
   props: AdditionalProps & GridBaseProps & {
-    sx?: SxProps<Theme>;
-  } & SystemProps<Theme>;
+    sx?: SxProps<Theme> | undefined;
+  };
   defaultComponent: DefaultComponent;
 }
 export type GridProps<RootComponent extends React.ElementType = GridTypeMap['defaultComponent'], AdditionalProps = {
-  component?: React.ElementType;
+  component?: React.ElementType | undefined;
 }> = OverrideProps<GridTypeMap<AdditionalProps, RootComponent>, RootComponent>;
 export {};

package/Grid/GridProps.d.ts

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { OverrideProps, PartiallyRequired } from '@mui/types';
 import { SxProps } from "../styleFunctionSx/index.js";
 import { Theme, Breakpoint } from "../createTheme/index.js";
-import { SystemProps } from "../Box/index.js";
 type ResponsiveStyleValue<T> = T | Array<T | null> | { [key in Breakpoint]?: T | null };
 export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
 export type GridSpacing = number | string;
@@ -18,28 +17,28 @@ export interface GridBaseProps {
    * The number of columns.
    * @default 12
    */
-  columns?: ResponsiveStyleValue<number>;
+  columns?: ResponsiveStyleValue<number> | undefined;
   /**
    * Defines the horizontal space between the type `item` components.
    * It overrides the value of the `spacing` prop.
    */
-  columnSpacing?: ResponsiveStyleValue<GridSpacing>;
+  columnSpacing?: ResponsiveStyleValue<GridSpacing> | undefined;
   /**
    * If `true`, the component will have the flex *container* behavior.
    * You should be wrapping *items* with a *container*.
    * @default false
    */
-  container?: boolean;
+  container?: boolean | undefined;
   /**
    * Defines the `flex-direction` style property.
    * It is applied for all screen sizes.
    * @default 'row'
    */
-  direction?: ResponsiveStyleValue<GridDirection>;
+  direction?: ResponsiveStyleValue<GridDirection> | undefined;
   /**
    * Defines the offset value for the type `item` components.
    */
-  offset?: ResponsiveStyleValue<GridOffset>;
+  offset?: ResponsiveStyleValue<GridOffset> | undefined;
   /**
    * @internal
    * The level of the grid starts from `0` and increases when the grid nests
@@ -67,16 +66,16 @@ export interface GridBaseProps {
    *     <Grid container> // level 0
    * ```
    */
-  unstable_level?: number;
+  unstable_level?: number | undefined;
   /**
    * Defines the vertical space between the type `item` components.
    * It overrides the value of the `spacing` prop.
    */
-  rowSpacing?: ResponsiveStyleValue<GridSpacing>;
+  rowSpacing?: ResponsiveStyleValue<GridSpacing> | undefined;
   /**
    * Defines the size of the the type `item` components.
    */
-  size?: ResponsiveStyleValue<GridSize>;
+  size?: ResponsiveStyleValue<GridSize> | undefined;
   /**
    * Defines the space between the type `item` components.
    * It can only be used on a type `container` component.
@@ -88,16 +87,16 @@ export interface GridBaseProps {
    * It's applied for all screen sizes.
    * @default 'wrap'
    */
-  wrap?: GridWrap;
+  wrap?: GridWrap | undefined;
 }
 export type GridOwnerState = PartiallyRequired<GridBaseProps, 'size' | 'offset' | 'unstable_level'>;
 export interface GridTypeMap<AdditionalProps = {}, DefaultComponent extends React.ElementType = 'div'> {
   props: AdditionalProps & GridBaseProps & {
-    sx?: SxProps<Theme>;
-  } & SystemProps<Theme>;
+    sx?: SxProps<Theme> | undefined;
+  };
   defaultComponent: DefaultComponent;
 }
 export type GridProps<RootComponent extends React.ElementType = GridTypeMap['defaultComponent'], AdditionalProps = {
-  component?: React.ElementType;
+  component?: React.ElementType | undefined;
 }> = OverrideProps<GridTypeMap<AdditionalProps, RootComponent>, RootComponent>;
 export {};

package/Grid/createGrid.d.mts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { OverridableComponent } from '@mui/types';
+import useThemeSystem from "../useTheme/index.mjs";
+import { GridTypeMap } from "./GridProps.mjs";
+declare const defaultCreateStyledComponent: import("@mui/styled-engine").CreateStyledComponent<import("../index.mjs").MUIStyledCommonProps<any>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}, any>;
+declare function useThemePropsDefault<T extends {}>(props: T): T;
+export default function createGrid(options?: {
+  createStyledComponent?: typeof defaultCreateStyledComponent | undefined;
+  useThemeProps?: typeof useThemePropsDefault | undefined;
+  useTheme?: typeof useThemeSystem | undefined;
+  componentName?: string | undefined;
+}): OverridableComponent<GridTypeMap<{}, "div">>;
+export {};

package/Grid/createGrid.d.ts

@@ -5,9 +5,9 @@ import { GridTypeMap } from "./GridProps.js";
 declare const defaultCreateStyledComponent: import("@mui/styled-engine").CreateStyledComponent<import("../index.js").MUIStyledCommonProps<any>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}, any>;
 declare function useThemePropsDefault<T extends {}>(props: T): T;
 export default function createGrid(options?: {
-  createStyledComponent?: typeof defaultCreateStyledComponent;
-  useThemeProps?: typeof useThemePropsDefault;
-  useTheme?: typeof useThemeSystem;
-  componentName?: string;
+  createStyledComponent?: typeof defaultCreateStyledComponent | undefined;
+  useThemeProps?: typeof useThemePropsDefault | undefined;
+  useTheme?: typeof useThemeSystem | undefined;
+  componentName?: string | undefined;
 }): OverridableComponent<GridTypeMap<{}, "div">>;
 export {};

package/Grid/createGrid.js

@@ -16,10 +16,8 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _styled = _interopRequireDefault(require("../styled"));
 var _useThemeProps = _interopRequireDefault(require("../useThemeProps"));
 var _useTheme = _interopRequireDefault(require("../useTheme"));
-var _styleFunctionSx = require("../styleFunctionSx");
 var _createTheme = _interopRequireDefault(require("../createTheme"));
 var _gridGenerator = require("./gridGenerator");
-var _deleteLegacyGridProps = _interopRequireDefault(require("./deleteLegacyGridProps"));
 var _jsxRuntime = require("react/jsx-runtime");
 const defaultTheme = (0, _createTheme.default)();
 
@@ -83,10 +81,7 @@ function createGrid(options = {}) {
   const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
     const theme = useTheme();
     const themeProps = useThemeProps(inProps);
-    const props = (0, _styleFunctionSx.extendSxProp)(themeProps); // `color` type conflicts with html color attribute.
-
-    // TODO v8: Remove when removing the legacy Grid component
-    (0, _deleteLegacyGridProps.default)(props, theme.breakpoints);
+    const props = themeProps;
     const {
       className,
       children,