@mui/material 7.0.0-alpha.2 → 7.0.0-beta.1

package/esm/Select/SelectInput.js

@@ -500,16 +500,16 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
         horizontal: 'center'
       },
       ...MenuProps,
-      MenuListProps: {
-        'aria-labelledby': labelId,
-        role: 'listbox',
-        'aria-multiselectable': multiple ? 'true' : undefined,
-        disableListWrap: true,
-        id: listboxId,
-        ...MenuProps.MenuListProps
-      },
       slotProps: {
         ...MenuProps.slotProps,
+        list: {
+          'aria-labelledby': labelId,
+          role: 'listbox',
+          'aria-multiselectable': multiple ? 'true' : undefined,
+          disableListWrap: true,
+          id: listboxId,
+          ...MenuProps.MenuListProps
+        },
         paper: {
           ...paperProps,
           style: {

package/esm/StepButton/StepButton.d.ts

@@ -4,11 +4,6 @@ import { ButtonBaseTypeMap, ExtendButtonBase, ExtendButtonBaseTypeMap } from "..
 import { OverrideProps } from "../OverridableComponent/index.js";
 import { Theme } from "../styles/index.js";
 import { StepButtonClasses } from "./stepButtonClasses.js";
-
-/**
- * @deprecated use `StepButtonProps['icon']` instead.
- */
-export type StepButtonIcon = React.ReactNode;
 export interface StepButtonOwnProps {
   /**
    * Can be a `StepLabel` or a node to place inside `StepLabel` as children.

package/esm/index.d.ts

@@ -147,10 +147,10 @@ export { default as FormHelperText } from "./FormHelperText/index.js";
 export * from "./FormHelperText/index.js";
 export { default as FormLabel } from "./FormLabel/index.js";
 export * from "./FormLabel/index.js";
+export { default as GridLegacy } from "./GridLegacy/index.js";
+export { GridLegacyProps, GridLegacyTypeMap } from "./GridLegacy/index.js";
 export { default as Grid } from "./Grid/index.js";
-export { GridProps, GridTypeMap } from "./Grid/index.js";
-export { default as Grid2 } from "./Grid2/index.js";
-export * from "./Grid2/index.js";
+export * from "./Grid/index.js";
 export { default as Grow } from "./Grow/index.js";
 export * from "./Grow/index.js";
 export { default as Icon } from "./Icon/index.js";
@@ -316,11 +316,6 @@ export * from "./useAutocomplete/index.js";
 export { default as GlobalStyles } from "./GlobalStyles/index.js";
 export * from "./GlobalStyles/index.js";
 export * from "./version/index.js";
-
-/**
- * @deprecated will be removed in v5.beta, please use StyledEngineProvider from @mui/material/styles instead
- */
-export { StyledEngineProvider } from "./styles/index.js";
 export { unstable_composeClasses } from '@mui/utils';
 export { default as generateUtilityClass } from "./generateUtilityClass/index.js";
 export * from "./generateUtilityClass/index.js";

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v7.0.0-alpha.2
+ * @mui/material v7.0.0-beta.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -108,9 +108,9 @@ export { default as FormHelperText } from "./FormHelperText/index.js";
 export * from "./FormHelperText/index.js";
 export { default as FormLabel } from "./FormLabel/index.js";
 export * from "./FormLabel/index.js";
+export { default as GridLegacy } from "./GridLegacy/index.js";
 export { default as Grid } from "./Grid/index.js";
-export { default as Grid2 } from "./Grid2/index.js";
-export * from "./Grid2/index.js";
+export * from "./Grid/index.js";
 export { default as Grow } from "./Grow/index.js";
 export * from "./Grow/index.js";
 export { default as Icon } from "./Icon/index.js";

package/esm/styles/components.d.ts

@@ -222,16 +222,16 @@ export interface Components<Theme = unknown> {
     styleOverrides?: ComponentsOverrides<Theme>['MuiFormLabel'];
     variants?: ComponentsVariants<Theme>['MuiFormLabel'];
   };
+  MuiGridLegacy?: {
+    defaultProps?: ComponentsProps['MuiGridLegacy'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiGridLegacy'];
+    variants?: ComponentsVariants<Theme>['MuiGridLegacy'];
+  };
   MuiGrid?: {
     defaultProps?: ComponentsProps['MuiGrid'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiGrid'];
     variants?: ComponentsVariants<Theme>['MuiGrid'];
   };
-  MuiGrid2?: {
-    defaultProps?: ComponentsProps['MuiGrid2'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiGrid2'];
-    variants?: ComponentsVariants<Theme>['MuiGrid2'];
-  };
   MuiImageList?: {
     defaultProps?: ComponentsProps['MuiImageList'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiImageList'];

package/esm/styles/createTheme.d.ts

@@ -1,6 +1,5 @@
 import { CssVarsThemeOptions } from "./createThemeWithVars.js";
 import { Theme, ThemeOptions } from "./createThemeNoVars.js";
-export { createMuiTheme } from "./createThemeNoVars.js";
 export type { ThemeOptions, Theme, CssThemeVariables } from "./createThemeNoVars.js";
 /**
  * Generate a theme base on the options received.

package/esm/styles/createTheme.js

@@ -1,7 +1,6 @@
 import createPalette from "./createPalette.js";
 import createThemeWithVars from "./createThemeWithVars.js";
 import createThemeNoVars from "./createThemeNoVars.js";
-export { createMuiTheme } from "./createThemeNoVars.js";
 // eslint-disable-next-line consistent-return
 function attachColorScheme(theme, scheme, colorScheme) {
   if (!theme.colorSchemes) {

package/esm/styles/createThemeNoVars.d.ts

@@ -61,12 +61,6 @@ export interface Theme extends BaseTheme, CssVarsProperties {
   unstable_sxConfig: SxConfig;
 }
 
-/**
- * @deprecated
- * Use `import { createTheme } from '@mui/material/styles'` instead.
- */
-export function createMuiTheme(options?: ThemeOptions, ...args: object[]): Theme;
-
 /**
  * Generate a theme base on the options received.
  * @param options Takes an incomplete theme object and adds the missing parts.

package/esm/styles/createThemeNoVars.js

@@ -21,8 +21,13 @@ function createThemeNoVars(options = {}, ...args) {
     shape: shapeInput,
     ...other
   } = options;
-  if (options.vars) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: `vars` is a private field used for CSS variables support.\n' + 'Please use another name.' : _formatMuiErrorMessage(20));
+  if (options.vars &&
+  // The error should throw only for the root theme creation because user is not allowed to use a custom node `vars`.
+  // `generateThemeVars` is the closest identifier for checking that the `options` is a result of `createTheme` with CSS variables so that user can create new theme for nested ThemeProvider.
+  options.generateThemeVars === undefined) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: `vars` is a private field used for CSS variables support.\n' +
+    // #host-reference
+    'Please use another name or follow the [docs](https://mui.com/material-ui/customization/css-theme-variables/usage/) to enable the feature.' : _formatMuiErrorMessage(20));
   }
   const palette = createPalette(paletteInput);
   const systemTheme = systemCreateTheme(options);
@@ -83,14 +88,4 @@ function createThemeNoVars(options = {}, ...args) {
 
   return muiTheme;
 }
-let warnedOnce = false;
-export function createMuiTheme(...args) {
-  if (process.env.NODE_ENV !== 'production') {
-    if (!warnedOnce) {
-      warnedOnce = true;
-      console.error(['MUI: the createMuiTheme function was renamed to createTheme.', '', "You should use `import { createTheme } from '@mui/material/styles'`"].join('\n'));
-    }
-  }
-  return createThemeNoVars(...args);
-}
 export default createThemeNoVars;

package/esm/styles/index.d.ts

@@ -1,5 +1,5 @@
 export { default as THEME_ID } from "./identifier.js";
-export { default as createTheme, default as unstable_createMuiStrictModeTheme, createMuiTheme, ThemeOptions, Theme, CssThemeVariables } from "./createTheme.js";
+export { default as createTheme, default as unstable_createMuiStrictModeTheme, ThemeOptions, Theme, CssThemeVariables } from "./createTheme.js";
 export { default as adaptV4Theme, DeprecatedThemeOptions } from "./adaptV4Theme.js";
 export { Shadows } from "./shadows.js";
 export { ZIndex } from "./zIndex.js";
@@ -21,10 +21,6 @@ export { default as useTheme } from "./useTheme.js";
 export { default as useThemeProps } from "./useThemeProps.js";
 export * from "./useThemeProps.js";
 export { default as styled } from "./styled.js";
-/**
- * @deprecated will be removed in v5.beta, please use styled from @mui/material/styles instead
- */
-export { default as experimentalStyled } from "./styled.js";
 export { default as ThemeProvider } from "./ThemeProvider.js";
 export { ComponentsProps, ComponentsPropsList } from "./props.js";
 export { ComponentsVariants } from "./variants.js";

package/esm/styles/index.js

@@ -8,7 +8,7 @@ export { unstable_createBreakpoints } from '@mui/system/createBreakpoints';
 export function experimental_sx() {
   throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: The `experimental_sx` has been moved to `theme.unstable_sx`.' + 'For more details, see https://github.com/mui/material-ui/pull/35150.' : _formatMuiErrorMessage(19));
 }
-export { default as createTheme, createMuiTheme } from "./createTheme.js";
+export { default as createTheme } from "./createTheme.js";
 export { default as unstable_createMuiStrictModeTheme } from "./createMuiStrictModeTheme.js";
 export { default as createStyles } from "./createStyles.js";
 export { getUnit as unstable_getUnit, toUnitless as unstable_toUnitless } from "./cssUtils.js";
@@ -18,7 +18,6 @@ export { default as createColorScheme } from "./createColorScheme.js";
 export { default as useTheme } from "./useTheme.js";
 export { default as useThemeProps } from "./useThemeProps.js";
 export { default as styled } from "./styled.js";
-export { default as experimentalStyled } from "./styled.js";
 export { default as ThemeProvider } from "./ThemeProvider.js";
 export { StyledEngineProvider } from '@mui/system';
 // The legacy utilities from @mui/styles

package/esm/styles/overrides.d.ts

@@ -44,8 +44,8 @@ import { FormControlLabelClassKey } from "../FormControlLabel/index.js";
 import { FormGroupClassKey } from "../FormGroup/index.js";
 import { FormHelperTextClassKey } from "../FormHelperText/index.js";
 import { FormLabelClassKey } from "../FormLabel/index.js";
+import { GridLegacyClassKey } from "../GridLegacy/index.js";
 import { GridClassKey } from "../Grid/index.js";
-import { Grid2ClassKey } from "../Grid2/index.js";
 import { IconButtonClassKey } from "../IconButton/index.js";
 import { IconClassKey } from "../Icon/index.js";
 import { ImageListClassKey } from "../ImageList/index.js";
@@ -168,8 +168,8 @@ export interface ComponentNameToClassKey {
   MuiFormGroup: FormGroupClassKey;
   MuiFormHelperText: FormHelperTextClassKey;
   MuiFormLabel: FormLabelClassKey;
+  MuiGridLegacy: GridLegacyClassKey;
   MuiGrid: GridClassKey;
-  MuiGrid2: Grid2ClassKey;
   MuiIcon: IconClassKey;
   MuiIconButton: IconButtonClassKey;
   MuiImageList: ImageListClassKey;

package/esm/styles/props.d.ts

@@ -42,8 +42,8 @@ import { FormControlProps } from "../FormControl/index.js";
 import { FormGroupProps } from "../FormGroup/index.js";
 import { FormHelperTextProps } from "../FormHelperText/index.js";
 import { FormLabelProps } from "../FormLabel/index.js";
+import { GridLegacyProps } from "../GridLegacy/index.js";
 import { GridProps } from "../Grid/index.js";
-import { Grid2Props } from "../Grid2/index.js";
 import { IconButtonProps } from "../IconButton/index.js";
 import { IconProps } from "../Icon/index.js";
 import { ImageListProps } from "../ImageList/index.js";
@@ -163,8 +163,8 @@ export interface ComponentsPropsList {
   MuiFormGroup: FormGroupProps;
   MuiFormHelperText: FormHelperTextProps;
   MuiFormLabel: FormLabelProps;
+  MuiGridLegacy: GridLegacyProps;
   MuiGrid: GridProps;
-  MuiGrid2: Grid2Props;
   MuiImageList: ImageListProps;
   MuiImageListItem: ImageListItemProps;
   MuiImageListItemBar: ImageListItemBarProps;

package/esm/utils/createSvgIcon.d.ts

@@ -1,2 +1,2 @@
-import SvgIcon from '@mui/material/SvgIcon';
+import SvgIcon from "../SvgIcon/index.js";
 export default function createSvgIcon(path: React.ReactNode, displayName: string): typeof SvgIcon;

package/esm/utils/createSvgIcon.js

@@ -10,7 +10,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export default function createSvgIcon(path, displayName) {
   function Component(props, ref) {
     return /*#__PURE__*/_jsx(SvgIcon, {
-      "data-testid": `${displayName}Icon`,
+      "data-testid": process.env.NODE_ENV !== 'production' ? `${displayName}Icon` : undefined,
       ref: ref,
       ...props,
       children: path

package/esm/version/index.js

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

package/index.d.ts

@@ -147,10 +147,10 @@ export { default as FormHelperText } from "./FormHelperText/index.js";
 export * from "./FormHelperText/index.js";
 export { default as FormLabel } from "./FormLabel/index.js";
 export * from "./FormLabel/index.js";
+export { default as GridLegacy } from "./GridLegacy/index.js";
+export { GridLegacyProps, GridLegacyTypeMap } from "./GridLegacy/index.js";
 export { default as Grid } from "./Grid/index.js";
-export { GridProps, GridTypeMap } from "./Grid/index.js";
-export { default as Grid2 } from "./Grid2/index.js";
-export * from "./Grid2/index.js";
+export * from "./Grid/index.js";
 export { default as Grow } from "./Grow/index.js";
 export * from "./Grow/index.js";
 export { default as Icon } from "./Icon/index.js";
@@ -316,11 +316,6 @@ export * from "./useAutocomplete/index.js";
 export { default as GlobalStyles } from "./GlobalStyles/index.js";
 export * from "./GlobalStyles/index.js";
 export * from "./version/index.js";
-
-/**
- * @deprecated will be removed in v5.beta, please use StyledEngineProvider from @mui/material/styles instead
- */
-export { StyledEngineProvider } from "./styles/index.js";
 export { unstable_composeClasses } from '@mui/utils';
 export { default as generateUtilityClass } from "./generateUtilityClass/index.js";
 export * from "./generateUtilityClass/index.js";

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v7.0.0-alpha.2
+ * @mui/material v7.0.0-beta.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -62,8 +62,8 @@ var _exportNames = {
   FormGroup: true,
   FormHelperText: true,
   FormLabel: true,
+  GridLegacy: true,
   Grid: true,
-  Grid2: true,
   Grow: true,
   Icon: true,
   IconButton: true,
@@ -446,10 +446,10 @@ Object.defineProperty(exports, "Grid", {
     return _Grid.default;
   }
 });
-Object.defineProperty(exports, "Grid2", {
+Object.defineProperty(exports, "GridLegacy", {
   enumerable: true,
   get: function () {
-    return _Grid2.default;
+    return _GridLegacy.default;
   }
 });
 Object.defineProperty(exports, "Grow", {
@@ -1577,16 +1577,16 @@ Object.keys(_FormLabel).forEach(function (key) {
     }
   });
 });
-var _Grid = _interopRequireDefault(require("./Grid"));
-var _Grid2 = _interopRequireWildcard(require("./Grid2"));
-Object.keys(_Grid2).forEach(function (key) {
+var _GridLegacy = _interopRequireDefault(require("./GridLegacy"));
+var _Grid = _interopRequireWildcard(require("./Grid"));
+Object.keys(_Grid).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Grid2[key]) return;
+  if (key in exports && exports[key] === _Grid[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _Grid2[key];
+      return _Grid[key];
     }
   });
 });

package/modern/Dialog/Dialog.d.ts

@@ -111,11 +111,6 @@ export interface DialogProps extends Omit<StandardProps<ModalProps, 'children'>,
    * @default 'sm'
    */
   maxWidth?: Breakpoint | false;
-  /**
-   * Callback fired when the backdrop is clicked.
-   * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
-   */
-  onBackdropClick?: ModalProps['onBackdropClick'];
   /**
    * Callback fired when the component requests to be closed.
    *

package/modern/Dialog/Dialog.js

@@ -212,7 +212,6 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
     fullScreen = false,
     fullWidth = false,
     maxWidth = 'sm',
-    onBackdropClick,
     onClick,
     onClose,
     open,
@@ -251,9 +250,6 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
       return;
     }
     backdropClick.current = null;
-    if (onBackdropClick) {
-      onBackdropClick(event);
-    }
     if (onClose) {
       onClose(event, 'backdropClick');
     }
@@ -430,11 +426,6 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes /* remove-proptypes */
    * @default 'sm'
    */
   maxWidth: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), PropTypes.string]),
-  /**
-   * Callback fired when the backdrop is clicked.
-   * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
-   */
-  onBackdropClick: PropTypes.func,
   /**
    * @ignore
    */

package/modern/Grid/Grid.d.ts

@@ -1,77 +1,17 @@
-import * as React from 'react';
-import { ResponsiveStyleValue, SxProps, SystemProps, Breakpoint, BreakpointOverrides } from '@mui/system';
-import { IfEquals } from '@mui/types';
-import { Theme } from "../styles/index.js";
-import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
-import { GridClasses } from "./gridClasses.js";
+import { SxProps, SystemProps } from '@mui/system';
+import { OverridableComponent, OverrideProps } from '@mui/types';
+import { Theme, Breakpoint } from "../styles/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;
 export type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
-export type GridSize = 'auto' | number;
-export interface RegularBreakpoints {
-  /**
-   * If a number, it sets the number of columns the grid item uses.
-   * It can't be greater than the total number of columns of the container (12 by default).
-   * If 'auto', the grid item's width matches its content.
-   * If false, the prop is ignored.
-   * If true, the grid item's width grows to use the space available in the grid container.
-   * The value is applied for the `lg` breakpoint and wider screens if not overridden.
-   * @default false
-   */
-  lg?: boolean | GridSize;
-  /**
-   * If a number, it sets the number of columns the grid item uses.
-   * It can't be greater than the total number of columns of the container (12 by default).
-   * If 'auto', the grid item's width matches its content.
-   * If false, the prop is ignored.
-   * If true, the grid item's width grows to use the space available in the grid container.
-   * The value is applied for the `md` breakpoint and wider screens if not overridden.
-   * @default false
-   */
-  md?: boolean | GridSize;
-  /**
-   * If a number, it sets the number of columns the grid item uses.
-   * It can't be greater than the total number of columns of the container (12 by default).
-   * If 'auto', the grid item's width matches its content.
-   * If false, the prop is ignored.
-   * If true, the grid item's width grows to use the space available in the grid container.
-   * The value is applied for the `sm` breakpoint and wider screens if not overridden.
-   * @default false
-   */
-  sm?: boolean | GridSize;
-  /**
-   * If a number, it sets the number of columns the grid item uses.
-   * It can't be greater than the total number of columns of the container (12 by default).
-   * If 'auto', the grid item's width matches its content.
-   * If false, the prop is ignored.
-   * If true, the grid item's width grows to use the space available in the grid container.
-   * The value is applied for the `xl` breakpoint and wider screens if not overridden.
-   * @default false
-   */
-  xl?: boolean | GridSize;
-  /**
-   * If a number, it sets the number of columns the grid item uses.
-   * It can't be greater than the total number of columns of the container (12 by default).
-   * If 'auto', the grid item's width matches its content.
-   * If false, the prop is ignored.
-   * If true, the grid item's width grows to use the space available in the grid container.
-   * The value is applied for all the screen sizes with the lowest priority.
-   * @default false
-   */
-  xs?: boolean | GridSize;
-}
-type CustomBreakpoints = Partial<Record<Breakpoint, boolean | GridSize>>;
-interface BreakpointOverridesEmpty {}
-type Breakpoints = IfEquals<BreakpointOverrides, BreakpointOverridesEmpty, RegularBreakpoints, CustomBreakpoints>;
-export interface GridOwnProps extends SystemProps<Theme>, Breakpoints {
+export type GridSize = 'auto' | 'grow' | number | false;
+export type GridOffset = 'auto' | number;
+export interface GridBaseProps {
   /**
    * The content of the component.
    */
   children?: React.ReactNode;
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes?: Partial<GridClasses>;
   /**
    * The number of columns.
    * @default 12
@@ -95,48 +35,68 @@ export interface GridOwnProps extends SystemProps<Theme>, Breakpoints {
    */
   direction?: ResponsiveStyleValue<GridDirection>;
   /**
-   * If `true`, the component will have the flex *item* behavior.
-   * You should be wrapping *items* with a *container*.
-   * @default false
-   */
-  item?: boolean;
+   * Defines the offset value for the type `item` components.
+   */
+  offset?: ResponsiveStyleValue<GridOffset>;
+  /**
+   * @internal
+   * The level of the grid starts from `0` and increases when the grid nests
+   * inside another grid. Nesting is defined as a container Grid being a direct
+   * child of a container Grid.
+   *
+   * ```js
+   * <Grid container> // level 0
+   *   <Grid container> // level 1
+   *     <Grid container> // level 2
+   * ```
+   *
+   * Only consecutive grid is considered nesting. A grid container will start at
+   * `0` if there are non-Grid container element above it.
+   *
+   * ```js
+   * <Grid container> // level 0
+   *   <div>
+   *     <Grid container> // level 0
+   * ```
+   *
+   * ```js
+   * <Grid container> // level 0
+   *   <Grid>
+   *     <Grid container> // level 0
+   * ```
+   */
+  unstable_level?: number;
   /**
    * Defines the vertical space between the type `item` components.
    * It overrides the value of the `spacing` prop.
    */
   rowSpacing?: ResponsiveStyleValue<GridSpacing>;
+  /**
+   * Defines the size of the the type `item` components.
+   */
+  size?: ResponsiveStyleValue<GridSize>;
   /**
    * Defines the space between the type `item` components.
    * It can only be used on a type `container` component.
    * @default 0
    */
-  spacing?: ResponsiveStyleValue<GridSpacing>;
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx?: SxProps<Theme>;
+  spacing?: ResponsiveStyleValue<GridSpacing> | undefined;
   /**
    * Defines the `flex-wrap` style property.
    * It's applied for all screen sizes.
    * @default 'wrap'
    */
   wrap?: GridWrap;
-  /**
-   * If `true`, it sets `min-width: 0` on the item.
-   * Refer to the limitations section of the documentation to better understand the use case.
-   * @default false
-   */
-  zeroMinWidth?: boolean;
 }
-
-/**
- * @deprecated Use the [`Grid2`](https://mui.com/material-ui/react-grid2/) component instead.
- */
-export interface GridTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> {
-  props: AdditionalProps & GridOwnProps;
-  defaultComponent: RootComponent;
+export interface GridTypeMap<P = {}, D extends React.ElementType = 'div'> {
+  props: P & GridBaseProps & {
+    sx?: SxProps<Theme>;
+  } & SystemProps<Theme>;
+  defaultComponent: D;
 }
-
+export type GridProps<D extends React.ElementType = GridTypeMap['defaultComponent'], P = {
+  component?: React.ElementType;
+}> = OverrideProps<GridTypeMap<P, D>, D>;
 /**
  *
  * Demos:
@@ -146,15 +106,6 @@ export interface GridTypeMap<AdditionalProps = {}, RootComponent extends React.E
  * API:
  *
  * - [Grid API](https://next.mui.com/material-ui/api/grid/)
- *
- * @deprecated Use the [`Grid2`](https://mui.com/material-ui/react-grid2/) component instead.
  */
 declare const Grid: OverridableComponent<GridTypeMap>;
-
-/**
- * @deprecated Use the [`Grid2`](https://mui.com/material-ui/react-grid2/) component instead.
- */
-export type GridProps<RootComponent extends React.ElementType = GridTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<GridTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
-  component?: React.ElementType;
-};
 export default Grid;