fix : bump packages versions

src/sections/analysis/panelBody/analysisTab/accuracies.tsx

@@ -1,4 +1,4 @@
-import { Grid, Typography } from "@mui/material";
+import { Grid2 as Grid, Typography } from "@mui/material";
 import { useAtomValue } from "jotai";
 import { gameEvalAtom } from "../../states";
 
@@ -9,12 +9,11 @@ export default function Accuracies() {
 
   return (
     <Grid
-      item
       container
-      xs={12}
       justifyContent="center"
       alignItems="center"
       columnGap={{ xs: "8vw", md: 10 }}
+      size={12}
     >
       <Typography
         align="center"

src/sections/analysis/panelBody/analysisTab/index.tsx

@@ -1,4 +1,9 @@
-import { Grid, GridProps, List, Typography } from "@mui/material";
+import {
+  Grid2 as Grid,
+  Grid2Props as GridProps,
+  List,
+  Typography,
+} from "@mui/material";
 import { useAtomValue } from "jotai";
 import {
   boardAtom,
@@ -39,9 +44,8 @@ export default function AnalysisTab(props: GridProps) {
 
   return (
     <Grid
-      item
       container
-      xs={12}
+      size={12}
       justifyContent="center"
       alignItems="start"
       height="100%"
@@ -60,14 +64,14 @@ export default function AnalysisTab(props: GridProps) {
       <Opening />
 
       {isGameOver && (
-        <Grid item xs={12}>
+        <Grid size={12}>
           <Typography align="center" fontSize="0.9rem">
             Game is over
           </Typography>
         </Grid>
       )}
 
-      <Grid item container xs={12} justifyContent="center" alignItems="center">
+      <Grid container justifyContent="center" alignItems="center" size={12}>
         <List sx={{ maxWidth: "95%", padding: 0 }}>
           {!board.isCheckmate() &&
             engineLines.map((line) => (

src/sections/analysis/panelBody/analysisTab/moveInfo.tsx

@@ -1,4 +1,4 @@
-import { Grid, Typography } from "@mui/material";
+import { Grid2 as Grid, Typography } from "@mui/material";
 import { useAtomValue } from "jotai";
 import { boardAtom, currentPositionAtom } from "../../states";
 import { useMemo } from "react";
@@ -36,7 +36,7 @@ export default function MoveInfo() {
       : `${bestMoveSan} was the best move`;
 
   return (
-    <Grid item container columnGap={5} xs={12} justifyContent="center">
+    <Grid container columnGap={5} justifyContent="center" size={12}>
       {moveLabel && (
         <Typography align="center" fontSize="0.9rem">
           {moveLabel}

src/sections/analysis/panelBody/analysisTab/opening.tsx

@@ -1,5 +1,5 @@
 import { useCurrentPosition } from "../../hooks/useCurrentPosition";
-import { Grid, Typography } from "@mui/material";
+import { Grid2 as Grid, Typography } from "@mui/material";
 
 export default function Opening() {
   const position = useCurrentPosition();
@@ -8,7 +8,7 @@ export default function Opening() {
   if (!opening) return null;
 
   return (
-    <Grid item xs={12}>
+    <Grid size={12}>
       <Typography align="center" fontSize="0.9rem">
         {opening}
       </Typography>

src/sections/analysis/panelBody/classificationTab/index.tsx

@@ -1,4 +1,4 @@
-import { Grid, GridProps } from "@mui/material";
+import { Grid2 as Grid, Grid2Props as GridProps } from "@mui/material";
 import MovesPanel from "./movesPanel";
 import MovesClassificationsRecap from "./movesClassificationsRecap";
 
@@ -6,7 +6,6 @@ export default function ClassificationTab(props: GridProps) {
   return (
     <Grid
       container
-      item
       justifyContent="center"
       alignItems="start"
       height="100%"

src/sections/analysis/panelBody/classificationTab/movesClassificationsRecap/classificationRow.tsx

@@ -1,5 +1,5 @@
 import { Color, MoveClassification } from "@/types/enums";
-import { Grid, Typography } from "@mui/material";
+import { Grid2 as Grid, Typography } from "@mui/material";
 import { useAtomValue } from "jotai";
 import { boardAtom, gameAtom, gameEvalAtom } from "../../../states";
 import { useMemo } from "react";
@@ -71,16 +71,14 @@ export default function ClassificationRow({ classification }: Props) {
   return (
     <Grid
       container
-      item
       justifyContent="space-evenly"
       alignItems="center"
-      xs={12}
       wrap="nowrap"
       color={moveClassificationColors[classification]}
+      size={12}
     >
       <Grid
         container
-        item
         justifyContent="center"
         alignItems="center"
         width={"3rem"}
@@ -93,7 +91,6 @@ export default function ClassificationRow({ classification }: Props) {
 
       <Grid
         container
-        item
         justifyContent="start"
         alignItems="center"
         width={"7rem"}
@@ -118,7 +115,6 @@ export default function ClassificationRow({ classification }: Props) {
 
       <Grid
         container
-        item
         justifyContent="center"
         alignItems="center"
         width={"3rem"}

src/sections/analysis/panelBody/classificationTab/movesClassificationsRecap/index.tsx

@@ -1,5 +1,5 @@
 import { usePlayersNames } from "@/hooks/usePlayerNames";
-import { Grid, Typography } from "@mui/material";
+import { Grid2 as Grid, Typography } from "@mui/material";
 import { gameAtom, gameEvalAtom } from "../../../states";
 import { MoveClassification } from "@/types/enums";
 import ClassificationRow from "./classificationRow";
@@ -14,21 +14,19 @@ export default function MovesClassificationsRecap() {
   return (
     <Grid
       container
-      item
       justifyContent="center"
       alignItems="center"
       rowGap={1}
-      xs={6}
       sx={{ scrollbarWidth: "thin", overflowY: "auto" }}
       maxHeight="100%"
+      size={6}
     >
       <Grid
-        item
         container
         alignItems="center"
         justifyContent="space-evenly"
         wrap="nowrap"
-        xs={12}
+        size={12}
       >
         <Typography width="12rem" align="center" noWrap fontSize="0.9rem">
           {whiteName}

src/sections/analysis/panelBody/classificationTab/movesPanel/index.tsx

@@ -1,4 +1,4 @@
-import { Grid } from "@mui/material";
+import { Grid2 as Grid } from "@mui/material";
 import MovesLine from "./movesLine";
 import { useMemo } from "react";
 import { useAtomValue } from "jotai";
@@ -40,13 +40,12 @@ export default function MovesPanel() {
   return (
     <Grid
       container
-      item
       justifyContent="center"
       alignItems="start"
       gap={0.8}
       sx={{ scrollbarWidth: "thin", overflowY: "auto" }}
       maxHeight="100%"
-      xs={6}
+      size={6}
       id="moves-panel"
     >
       {gameMoves?.map((moves, idx) => (

src/sections/analysis/panelBody/classificationTab/movesPanel/moveItem.tsx

@@ -1,5 +1,5 @@
 import { MoveClassification } from "@/types/enums";
-import { Grid, Typography } from "@mui/material";
+import { Grid2 as Grid, Typography } from "@mui/material";
 import Image from "next/image";
 import { useAtomValue } from "jotai";
 import { boardAtom, currentPositionAtom, gameAtom } from "../../../states";
@@ -40,7 +40,6 @@ export default function MoveItem({ san, moveClassification, moveIdx }: Props) {
 
   return (
     <Grid
-      item
       container
       justifyContent="center"
       alignItems="center"

src/sections/analysis/panelBody/classificationTab/movesPanel/movesLine.tsx

@@ -1,5 +1,5 @@
 import { MoveClassification } from "@/types/enums";
-import { Grid, Typography } from "@mui/material";
+import { Grid2 as Grid, Typography } from "@mui/material";
 import MoveItem from "./moveItem";
 
 interface Props {
@@ -11,11 +11,10 @@ export default function MovesLine({ moves, moveNb }: Props) {
   return (
     <Grid
       container
-      item
       justifyContent="space-evenly"
       alignItems="center"
-      xs={12}
       wrap="nowrap"
+      size={12}
     >
       <Typography width="2rem" fontSize="0.9rem">
         {moveNb}.

src/sections/analysis/panelBody/graphTab/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Grid, GridProps } from "@mui/material";
+import { Box, Grid2 as Grid, Grid2Props as GridProps } from "@mui/material";
 import { useAtomValue } from "jotai";
 import {
   Area,
@@ -35,7 +35,6 @@ export default function GraphTab(props: GridProps) {
   return (
     <Grid
       container
-      item
       justifyContent="center"
       alignItems="start"
       height="100%"