;
+
+Grid2.propTypes /* remove-proptypes */ = {
+ // ----------------------------- Warning --------------------------------
+ // | These PropTypes are generated from the TypeScript type definitions |
+ // | To update them edit TypeScript types and run "yarn proptypes" |
+ // ----------------------------------------------------------------------
+ /**
+ * The content of the component.
+ */
+ children: PropTypes.node,
+ /**
+ * @ignore
+ */
+ sx: PropTypes.oneOfType([
+ PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
+ PropTypes.func,
+ PropTypes.object,
+ ]),
+} as any;
+
+export default Grid2;
diff --git a/packages/mui-material/src/Unstable_Grid2/Grid2Props.ts b/packages/mui-material/src/Unstable_Grid2/Grid2Props.ts
new file mode 100644
index 00000000000000..668ce5f197a60b
--- /dev/null
+++ b/packages/mui-material/src/Unstable_Grid2/Grid2Props.ts
@@ -0,0 +1,19 @@
+import React from 'react';
+import { OverrideProps } from '@mui/types';
+import { SxProps, SystemProps } from '@mui/system';
+import { GridBaseProps } from '@mui/system/Unstable_Grid';
+import { Theme } from '../styles';
+
+export type Grid2Slot = 'root';
+
+export interface Grid2TypeMap {
+ props: P & GridBaseProps & { sx?: SxProps } & SystemProps;
+ defaultComponent: D;
+}
+
+export type Grid2Props<
+ D extends React.ElementType = Grid2TypeMap['defaultComponent'],
+ P = {
+ component?: React.ElementType;
+ },
+> = OverrideProps, D>;
diff --git a/packages/mui-material/src/Unstable_Grid2/grid2Classes.ts b/packages/mui-material/src/Unstable_Grid2/grid2Classes.ts
new file mode 100644
index 00000000000000..97437f862aa6b4
--- /dev/null
+++ b/packages/mui-material/src/Unstable_Grid2/grid2Classes.ts
@@ -0,0 +1,36 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+import { GridClasses } from '@mui/system/Unstable_Grid';
+
+export type Grid2ClassKey = keyof GridClasses;
+
+export function getGrid2UtilityClass(slot: string): string {
+ return generateUtilityClass('MuiGrid2', slot);
+}
+
+const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] as const;
+const DIRECTIONS = ['column-reverse', 'column', 'row-reverse', 'row'] as const;
+const WRAPS = ['nowrap', 'wrap-reverse', 'wrap'] as const;
+const GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] as const;
+
+const grid2Classes: GridClasses = generateUtilityClasses('MuiGrid2', [
+ 'root',
+ 'container',
+ 'item',
+ 'zeroMinWidth',
+
+ // spacings
+ ...SPACINGS.map((spacing) => `spacing-xs-${spacing}` as const),
+ // direction values
+ ...DIRECTIONS.map((direction) => `direction-xs-${direction}` as const),
+ // wrap values
+ ...WRAPS.map((wrap) => `wrap-xs-${wrap}` as const),
+
+ // grid sizes for all breakpoints
+ ...GRID_SIZES.map((size) => `grid-xs-${size}` as const),
+ ...GRID_SIZES.map((size) => `grid-sm-${size}` as const),
+ ...GRID_SIZES.map((size) => `grid-md-${size}` as const),
+ ...GRID_SIZES.map((size) => `grid-lg-${size}` as const),
+ ...GRID_SIZES.map((size) => `grid-xl-${size}` as const),
+]);
+
+export default grid2Classes;
diff --git a/packages/mui-material/src/Unstable_Grid2/index.ts b/packages/mui-material/src/Unstable_Grid2/index.ts
new file mode 100644
index 00000000000000..163e527be89b0d
--- /dev/null
+++ b/packages/mui-material/src/Unstable_Grid2/index.ts
@@ -0,0 +1,4 @@
+export { default } from './Grid2';
+export * from './Grid2Props';
+export { default as grid2Classes } from './grid2Classes';
+export * from './grid2Classes';
diff --git a/packages/mui-material/src/index.d.ts b/packages/mui-material/src/index.d.ts
index 1d085f391278bf..3d21ac2d8bbaee 100644
--- a/packages/mui-material/src/index.d.ts
+++ b/packages/mui-material/src/index.d.ts
@@ -224,6 +224,9 @@ export * from './FormLabel';
export { default as Grid } from './Grid';
export * from './Grid';
+export { default as Unstable_Grid2 } from './Unstable_Grid2';
+export * from './Unstable_Grid2';
+
export { default as Grow } from './Grow';
export * from './Grow';
diff --git a/packages/mui-material/src/index.js b/packages/mui-material/src/index.js
index 0075c7b4ee7c2b..1aaf78d619f603 100644
--- a/packages/mui-material/src/index.js
+++ b/packages/mui-material/src/index.js
@@ -153,6 +153,9 @@ export * from './FormLabel';
export { default as Grid } from './Grid';
export * from './Grid';
+export { default as Unstable_Grid2 } from './Unstable_Grid2';
+export * from './Unstable_Grid2';
+
export { default as Grow } from './Grow';
export * from './Grow';
diff --git a/packages/mui-material/src/styles/components.d.ts b/packages/mui-material/src/styles/components.d.ts
index 40f8dc28018a7c..d270c12520103a 100644
--- a/packages/mui-material/src/styles/components.d.ts
+++ b/packages/mui-material/src/styles/components.d.ts
@@ -228,6 +228,11 @@ export interface Components {
styleOverrides?: ComponentsOverrides['MuiGrid'];
variants?: ComponentsVariants['MuiGrid'];
};
+ MuiGrid2?: {
+ defaultProps?: ComponentsProps['MuiGrid2'];
+ styleOverrides?: ComponentsOverrides['MuiGrid2'];
+ variants?: ComponentsVariants['MuiGrid2'];
+ };
MuiImageList?: {
defaultProps?: ComponentsProps['MuiImageList'];
styleOverrides?: ComponentsOverrides['MuiImageList'];
diff --git a/packages/mui-material/src/styles/overrides.d.ts b/packages/mui-material/src/styles/overrides.d.ts
index 9bae49c34c19b1..927587a167786c 100644
--- a/packages/mui-material/src/styles/overrides.d.ts
+++ b/packages/mui-material/src/styles/overrides.d.ts
@@ -44,6 +44,7 @@ import { FormGroupClassKey } from '../FormGroup';
import { FormHelperTextClassKey } from '../FormHelperText';
import { FormLabelClassKey } from '../FormLabel';
import { GridClassKey } from '../Grid';
+import { Grid2Slot } from '../Unstable_Grid2';
import { IconButtonClassKey } from '../IconButton';
import { IconClassKey } from '../Icon';
import { ImageListClassKey } from '../ImageList';
@@ -181,6 +182,7 @@ export interface ComponentNameToClassKey {
MuiFormHelperText: FormHelperTextClassKey;
MuiFormLabel: FormLabelClassKey;
MuiGrid: GridClassKey;
+ MuiGrid2: Grid2Slot;
MuiIcon: IconClassKey;
MuiIconButton: IconButtonClassKey;
MuiImageList: ImageListClassKey;
diff --git a/packages/mui-material/src/styles/props.d.ts b/packages/mui-material/src/styles/props.d.ts
index 158fcbfe173802..97ae5f767cf66f 100644
--- a/packages/mui-material/src/styles/props.d.ts
+++ b/packages/mui-material/src/styles/props.d.ts
@@ -43,6 +43,7 @@ import { FormGroupProps } from '../FormGroup';
import { FormHelperTextProps } from '../FormHelperText';
import { FormLabelProps } from '../FormLabel';
import { GridProps } from '../Grid';
+import { Grid2Props } from '../Unstable_Grid2';
import { IconButtonProps } from '../IconButton';
import { IconProps } from '../Icon';
import { ImageListProps } from '../ImageList';
@@ -167,6 +168,7 @@ export interface ComponentsPropsList {
MuiFormHelperText: FormHelperTextProps;
MuiFormLabel: FormLabelProps;
MuiGrid: GridProps;
+ MuiGrid2: Grid2Props;
MuiImageList: ImageListProps;
MuiImageListItem: ImageListItemProps;
MuiImageListItemBar: ImageListItemBarProps;
diff --git a/packages/mui-system/src/Grid/Grid.test.js b/packages/mui-system/src/Unstable_Grid/Grid.test.js
similarity index 99%
rename from packages/mui-system/src/Grid/Grid.test.js
rename to packages/mui-system/src/Unstable_Grid/Grid.test.js
index c9c1b3fd5cee27..5299976d42680f 100644
--- a/packages/mui-system/src/Grid/Grid.test.js
+++ b/packages/mui-system/src/Unstable_Grid/Grid.test.js
@@ -2,7 +2,7 @@ import * as React from 'react';
import { expect } from 'chai';
import { describeConformance, createRenderer, screen } from 'test/utils';
import { ThemeProvider, createTheme } from '@mui/system';
-import Grid, { gridClasses as classes } from '@mui/system/Grid';
+import Grid, { gridClasses as classes } from '@mui/system/Unstable_Grid';
describe('System ', () => {
const { render } = createRenderer();
diff --git a/packages/mui-system/src/Grid/Grid.tsx b/packages/mui-system/src/Unstable_Grid/Grid.tsx
similarity index 100%
rename from packages/mui-system/src/Grid/Grid.tsx
rename to packages/mui-system/src/Unstable_Grid/Grid.tsx
diff --git a/packages/mui-system/src/Grid/GridProps.ts b/packages/mui-system/src/Unstable_Grid/GridProps.ts
similarity index 100%
rename from packages/mui-system/src/Grid/GridProps.ts
rename to packages/mui-system/src/Unstable_Grid/GridProps.ts
diff --git a/packages/mui-system/src/Grid/createGrid.tsx b/packages/mui-system/src/Unstable_Grid/createGrid.tsx
similarity index 97%
rename from packages/mui-system/src/Grid/createGrid.tsx
rename to packages/mui-system/src/Unstable_Grid/createGrid.tsx
index cb0bf790f54805..ce3b38eac2e4b1 100644
--- a/packages/mui-system/src/Grid/createGrid.tsx
+++ b/packages/mui-system/src/Unstable_Grid/createGrid.tsx
@@ -59,10 +59,6 @@ export default function createGrid(
const NestedContext = React.createContext(false);
- const getGridUtilityClass = (slot: string) => {
- return generateUtilityClass(componentName, slot);
- };
-
const useUtilityClasses = (ownerState: GridOwnerState, theme: typeof defaultTheme) => {
const { container, direction, spacing, wrap, gridSize } = ownerState;
@@ -77,7 +73,7 @@ export default function createGrid(
],
};
- return composeClasses(slots, getGridUtilityClass, {});
+ return composeClasses(slots, (slot) => generateUtilityClass(componentName, slot), {});
};
const GridRoot = createStyledComponent<{
diff --git a/packages/mui-system/src/Grid/gridClasses.ts b/packages/mui-system/src/Unstable_Grid/gridClasses.ts
similarity index 100%
rename from packages/mui-system/src/Grid/gridClasses.ts
rename to packages/mui-system/src/Unstable_Grid/gridClasses.ts
diff --git a/packages/mui-system/src/Grid/gridGenerator.test.js b/packages/mui-system/src/Unstable_Grid/gridGenerator.test.js
similarity index 100%
rename from packages/mui-system/src/Grid/gridGenerator.test.js
rename to packages/mui-system/src/Unstable_Grid/gridGenerator.test.js
diff --git a/packages/mui-system/src/Grid/gridGenerator.ts b/packages/mui-system/src/Unstable_Grid/gridGenerator.ts
similarity index 100%
rename from packages/mui-system/src/Grid/gridGenerator.ts
rename to packages/mui-system/src/Unstable_Grid/gridGenerator.ts
diff --git a/packages/mui-system/src/Grid/index.ts b/packages/mui-system/src/Unstable_Grid/index.ts
similarity index 100%
rename from packages/mui-system/src/Grid/index.ts
rename to packages/mui-system/src/Unstable_Grid/index.ts
diff --git a/packages/mui-system/src/index.d.ts b/packages/mui-system/src/index.d.ts
index f9fa2ea4b73b55..ddcf861551ba49 100644
--- a/packages/mui-system/src/index.d.ts
+++ b/packages/mui-system/src/index.d.ts
@@ -175,3 +175,6 @@ export * from './Container/createContainer';
export { default as Container } from './Container';
export * from './Container';
+
+export { default as Unstable_Grid } from './Unstable_Grid';
+export * from './Unstable_Grid';
diff --git a/packages/mui-system/src/index.js b/packages/mui-system/src/index.js
index 53f6a5ae7f3588..c404c373d5f970 100644
--- a/packages/mui-system/src/index.js
+++ b/packages/mui-system/src/index.js
@@ -48,6 +48,12 @@ export * from './colorManipulator';
export { default as ThemeProvider } from './ThemeProvider';
export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider';
export { default as unstable_createGetCssVar } from './cssVars/createGetCssVar';
+
+/** ----------------- */
+/** Layout components */
export { default as createContainer } from './Container/createContainer';
export { default as Container } from './Container';
export * from './Container';
+
+export { default as Unstable_Grid } from './Unstable_Grid/Grid';
+export * from './Unstable_Grid';
diff --git a/packages/mui-system/test/typescript/moduleAugmentation/gridCustomBreakpoints.spec.tsx b/packages/mui-system/test/typescript/moduleAugmentation/gridCustomBreakpoints.spec.tsx
index ac85ec388ec250..4af643c3b6fbcc 100644
--- a/packages/mui-system/test/typescript/moduleAugmentation/gridCustomBreakpoints.spec.tsx
+++ b/packages/mui-system/test/typescript/moduleAugmentation/gridCustomBreakpoints.spec.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import { createTheme, ThemeProvider } from '@mui/system';
-import Grid from '@mui/system/Grid';
+import Grid from '@mui/system/Unstable_Grid';
declare module '@mui/system' {
interface BreakpointOverrides {