[material-ui][Grid] Rename to GridLegacy

benchmark/browser/scenarios/grid-material-ui/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 
 export default function GridMaterialUI() {
   return (

docs/data/joy/components/tooltip/PositionedTooltips.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/joy/Box';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 import Button from '@mui/joy/Button';
 import Tooltip from '@mui/joy/Tooltip';
 

docs/data/joy/components/tooltip/PositionedTooltips.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/joy/Box';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 import Button from '@mui/joy/Button';
 import Tooltip from '@mui/joy/Tooltip';
 

docs/data/material/components/chips/ChipsPlayground.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 import FormControl from '@mui/material/FormControl';
 import FormLabel from '@mui/material/FormLabel';
 import FormControlLabel from '@mui/material/FormControlLabel';

docs/data/material/components/grid/AutoGrid.js → docs/data/material/components/grid-legacy/AutoGrid.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

docs/data/material/components/grid/AutoGrid.tsx → docs/data/material/components/grid-legacy/AutoGrid.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

docs/data/material/components/grid/AutoGridNoWrap.js → docs/data/material/components/grid-legacy/AutoGridNoWrap.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
 

docs/data/material/components/grid/AutoGridNoWrap.tsx → docs/data/material/components/grid-legacy/AutoGridNoWrap.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
 

docs/data/material/components/grid/BasicGrid.js → docs/data/material/components/grid-legacy/BasicGrid.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

docs/data/material/components/grid/BasicGrid.tsx → docs/data/material/components/grid-legacy/BasicGrid.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

docs/data/material/components/grid/ColumnsGrid.js → docs/data/material/components/grid-legacy/ColumnsGrid.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

docs/data/material/components/grid/ColumnsGrid.tsx → docs/data/material/components/grid-legacy/ColumnsGrid.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

docs/data/material/components/grid/ComplexGrid.js → docs/data/material/components/grid-legacy/ComplexGrid.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import ButtonBase from '@mui/material/ButtonBase';

docs/data/material/components/grid/ComplexGrid.tsx → docs/data/material/components/grid-legacy/ComplexGrid.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import ButtonBase from '@mui/material/ButtonBase';

docs/data/material/components/grid/FullWidthGrid.js → docs/data/material/components/grid-legacy/FullWidthGrid.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

docs/data/material/components/grid/FullWidthGrid.tsx → docs/data/material/components/grid-legacy/FullWidthGrid.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

docs/data/material/components/grid/InteractiveGrid.js → docs/data/material/components/grid-legacy/InteractiveGrid.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 import FormControl from '@mui/material/FormControl';
 import FormLabel from '@mui/material/FormLabel';
 import FormControlLabel from '@mui/material/FormControlLabel';

docs/data/material/components/grid/InteractiveGrid.tsx → docs/data/material/components/grid-legacy/InteractiveGrid.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Grid, { GridDirection } from '@mui/material/Grid';
+import Grid, { GridLegacyDirection } from '@mui/material/GridLegacy';
 import FormControl from '@mui/material/FormControl';
 import FormLabel from '@mui/material/FormLabel';
 import FormControlLabel from '@mui/material/FormControlLabel';
@@ -24,7 +24,7 @@ type GridJustification =
   | 'space-evenly';
 
 export default function InteractiveGrid() {
-  const [direction, setDirection] = React.useState<GridDirection>('row');
+  const [direction, setDirection] = React.useState<GridLegacyDirection>('row');
   const [justifyContent, setJustifyContent] =
     React.useState<GridJustification>('center');
   const [alignItems, setAlignItems] = React.useState<GridItemsAlignment>('center');
@@ -83,7 +83,8 @@ export default function InteractiveGrid() {
                   value={direction}
                   onChange={(event) => {
                     setDirection(
-                      (event.target as HTMLInputElement).value as GridDirection,
+                      (event.target as HTMLInputElement)
+                        .value as GridLegacyDirection,
                     );
                   }}
                 >

docs/data/material/components/grid/NestedGrid.js → docs/data/material/components/grid-legacy/NestedGrid.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

docs/data/material/components/grid/NestedGrid.tsx → docs/data/material/components/grid-legacy/NestedGrid.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

docs/data/material/components/grid/ResponsiveGrid.js → docs/data/material/components/grid-legacy/ResponsiveGrid.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { experimentalStyled as styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

docs/data/material/components/grid/ResponsiveGrid.tsx → docs/data/material/components/grid-legacy/ResponsiveGrid.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { experimentalStyled as styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

docs/data/material/components/grid/RowAndColumnSpacing.js → docs/data/material/components/grid-legacy/RowAndColumnSpacing.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 import Paper from '@mui/material/Paper';
 import Box from '@mui/material/Box';
 

docs/data/material/components/grid/RowAndColumnSpacing.tsx → docs/data/material/components/grid-legacy/RowAndColumnSpacing.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 import Paper from '@mui/material/Paper';
 import Box from '@mui/material/Box';
 

docs/data/material/components/grid/SpacingGrid.js → docs/data/material/components/grid-legacy/SpacingGrid.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 import FormLabel from '@mui/material/FormLabel';
 import FormControl from '@mui/material/FormControl';
 import FormControlLabel from '@mui/material/FormControlLabel';

docs/data/material/components/grid/SpacingGrid.tsx → docs/data/material/components/grid-legacy/SpacingGrid.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 import FormLabel from '@mui/material/FormLabel';
 import FormControl from '@mui/material/FormControl';
 import FormControlLabel from '@mui/material/FormControlLabel';

docs/data/material/components/grid/VariableWidthGrid.js → docs/data/material/components/grid-legacy/VariableWidthGrid.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

docs/data/material/components/grid/VariableWidthGrid.tsx → docs/data/material/components/grid-legacy/VariableWidthGrid.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',

docs/data/material/components/grid/grid.md → docs/data/material/components/grid-legacy/grid-legacy.md

@@ -1,13 +1,13 @@
 ---
 productId: material-ui
-title: React Grid component
-components: Grid
+title: React GridLegacy component
+components: GridLegacy
 githubLabel: 'component: Grid'
 materialDesign: https://m2.material.io/design/layout/understanding-layout.html
-githubSource: packages/mui-material/src/Grid
+githubSource: packages/mui-material/src/GridLegacy
 ---
 
-# Grid
+# GridLegacy
 
 <p class="description">The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.</p>
 
@@ -17,18 +17,18 @@ Material Design's responsive UI is based on a 12-column grid layout.
 {{"component": "@mui/docs/ComponentLinkHeader", "design": false}}
 
 :::warning
-The `Grid` component shouldn't be confused with a data grid; it is closer to a layout grid. For a data grid head to [the `DataGrid` component](/x/react-data-grid/).
+The `GridLegacy` component shouldn't be confused with a data grid; it is closer to a layout grid. For a data grid head to [the `DataGrid` component](/x/react-data-grid/).
 :::
 
 :::warning
-The Grid component has been deprecated.
+The `GridLegacy` component has been deprecated.
 Please use [Grid2](/material-ui/react-grid2/) instead.
 See the [Grid2 upgrade guide](/material-ui/migration/upgrade-to-grid-v2/) for more details.
 :::
 
 ## How it works
 
-The grid system is implemented with the `Grid` component:
+The grid system is implemented with the `GridLegacy` component:
 
 - It uses [CSS's Flexible Box module](https://www.w3.org/TR/css-flexbox-1/) for high flexibility.
 - There are two types of layout: _containers_ and _items_.
@@ -187,11 +187,11 @@ In practice, you can set the `zeroMinWidth` prop:
 The `xs`, `sm`, `md`, `lg`, and `xl` props are **not supported** within `direction="column"` and `direction="column-reverse"` containers.
 
 They define the number of grids the component will use for a given breakpoint. They are intended to control **width** using `flex-basis` in `row` containers but they will impact height in `column` containers.
-If used, these props may have undesirable effects on the height of the `Grid` item elements.
+If used, these props may have undesirable effects on the height of the `GridLegacy` item elements.
 
 ## CSS Grid Layout
 
-The `Grid` component is using CSS flexbox internally.
+The `GridLegacy` component is using CSS flexbox internally.
 But as seen below, you can easily use [MUI System](/system/grid/) and CSS Grid to layout your pages.
 
 {{"demo": "CSSGrid.js", "bg": true}}

docs/data/material/components/icons/SvgMaterialIcons.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 import Typography from '@mui/material/Typography';
 import DeleteIcon from '@mui/icons-material/Delete';
 import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';

docs/data/material/components/icons/SvgMaterialIcons.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 import Typography from '@mui/material/Typography';
 import DeleteIcon from '@mui/icons-material/Delete';
 import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';

docs/data/material/components/lists/InteractiveList.js

@@ -11,7 +11,7 @@ import IconButton from '@mui/material/IconButton';
 import FormGroup from '@mui/material/FormGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 import Typography from '@mui/material/Typography';
 import FolderIcon from '@mui/icons-material/Folder';
 import DeleteIcon from '@mui/icons-material/Delete';

docs/data/material/components/lists/InteractiveList.tsx

@@ -11,7 +11,7 @@ import IconButton from '@mui/material/IconButton';
 import FormGroup from '@mui/material/FormGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 import Typography from '@mui/material/Typography';
 import FolderIcon from '@mui/icons-material/Folder';
 import DeleteIcon from '@mui/icons-material/Delete';

docs/data/material/components/material-icons/SearchIcons.js

@@ -5,7 +5,7 @@ import copy from 'clipboard-copy';
 import InputBase from '@mui/material/InputBase';
 import Typography from '@mui/material/Typography';
 import PropTypes from 'prop-types';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';

docs/data/material/components/paper/Elevation.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 import Paper from '@mui/material/Paper';
 import Box from '@mui/material/Box';
 import { createTheme, ThemeProvider, styled } from '@mui/material/styles';

docs/data/material/components/paper/Elevation.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 import Paper from '@mui/material/Paper';
 import Box from '@mui/material/Box';
 import { createTheme, ThemeProvider, styled } from '@mui/material/styles';

docs/data/material/components/popover/AnchorPlayground.js

@@ -4,7 +4,7 @@ import FormLabel from '@mui/material/FormLabel';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import RadioGroup from '@mui/material/RadioGroup';
 import Radio from '@mui/material/Radio';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 import { green } from '@mui/material/colors';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';

docs/data/material/components/popper/PositionedPopper.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Box from '@mui/material/Box';
 import Popper from '@mui/material/Popper';
 import Typography from '@mui/material/Typography';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 import Button from '@mui/material/Button';
 import Fade from '@mui/material/Fade';
 import Paper from '@mui/material/Paper';

docs/data/material/components/popper/PositionedPopper.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Box from '@mui/material/Box';
 import Popper, { PopperPlacementType } from '@mui/material/Popper';
 import Typography from '@mui/material/Typography';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 import Button from '@mui/material/Button';
 import Fade from '@mui/material/Fade';
 import Paper from '@mui/material/Paper';

docs/data/material/components/popper/ScrollPlayground.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import FormControlLabel from '@mui/material/FormControlLabel';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/GridLegacy';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';