fix : bump packages versions

src/components/LinearProgressBar.tsx

@@ -1,5 +1,5 @@
 import {
-  Grid,
+  Grid2 as Grid,
   LinearProgress,
   LinearProgressProps,
   Typography,
@@ -12,21 +12,20 @@ const LinearProgressBar = (
   if (props.value === 0) return null;
 
   return (
-    <Grid item container alignItems="center" justifyContent="center" xs={12}>
+    <Grid container alignItems="center" justifyContent="center" size={12}>
       <Typography variant="caption" align="center">
         {props.label}
       </Typography>
       <Grid
-        item
         container
-        xs={12}
         width="90%"
         alignItems="center"
         justifyContent="center"
         wrap="nowrap"
         columnGap={2}
+        size={12}
       >
-        <Grid item sx={{ width: "100%" }}>
+        <Grid sx={{ width: "100%" }}>
           <LinearProgress
             variant="determinate"
             {...props}
@@ -46,7 +45,7 @@ const LinearProgressBar = (
             })}
           />
         </Grid>
-        <Grid item>
+        <Grid>
           <Typography variant="body2" color="text.secondary">{`${Math.round(
             props.value
           )}%`}</Typography>

src/components/board/capturedPieces.tsx

@@ -1,6 +1,6 @@
 import { getCapturedPieces, getMaterialDifference } from "@/lib/chess";
 import { Color } from "@/types/enums";
-import { Grid, Typography } from "@mui/material";
+import { Grid2 as Grid, Typography } from "@mui/material";
 import { Chess } from "chess.js";
 import { PrimitiveAtom, useAtomValue } from "jotai";
 import { CSSProperties, useMemo } from "react";
@@ -25,7 +25,7 @@ export default function CapturedPieces({ gameAtom, color }: Props) {
   }, [game, color]);
 
   return (
-    <Grid item container alignItems="end" xs="auto" columnGap={0.6}>
+    <Grid container alignItems="end" columnGap={0.6} size="auto">
       {cssProps.map((cssProp, i) => (
         <span
           key={i}

src/components/board/evaluationBar.tsx

@@ -1,4 +1,4 @@
-import { Box, Grid, Typography } from "@mui/material";
+import { Box, Grid2 as Grid, Typography } from "@mui/material";
 import { PrimitiveAtom, atom, useAtomValue } from "jotai";
 import { useEffect, useState } from "react";
 import { getEvaluationBarValue } from "@/lib/chess";
@@ -32,7 +32,6 @@ export default function EvaluationBar({
 
   return (
     <Grid
-      item
       container
       justifyContent="center"
       alignItems="center"

src/components/board/index.tsx

@@ -1,4 +1,4 @@
-import { Grid, Typography } from "@mui/material";
+import { Grid2 as Grid, Typography } from "@mui/material";
 import { Chessboard } from "react-chessboard";
 import { PrimitiveAtom, atom, useAtomValue, useSetAtom } from "jotai";
 import {
@@ -220,7 +220,6 @@ export default function Board({
 
   return (
     <Grid
-      item
       container
       justifyContent="center"
       alignItems="center"
@@ -236,21 +235,19 @@ export default function Board({
       )}
 
       <Grid
-        item
         container
         rowGap={1}
         justifyContent="center"
         alignItems="center"
         paddingLeft={showEvaluationBar ? 2 : 0}
-        xs
+        size="grow"
       >
         <Grid
-          item
           container
-          xs={12}
           justifyContent="center"
           alignItems="center"
           columnGap={2}
+          size={12}
         >
           <Typography>
             {boardOrientation === Color.White ? blackPlayer : whitePlayer}
@@ -263,12 +260,11 @@ export default function Board({
         </Grid>
 
         <Grid
-          item
           container
           justifyContent="center"
           alignItems="center"
           ref={boardRef}
-          xs={12}
+          size={12}
         >
           <Chessboard
             id={`${boardId}-${canPlay}`}
@@ -296,12 +292,11 @@ export default function Board({
         </Grid>
 
         <Grid
-          item
           container
-          xs={12}
           justifyContent="center"
           alignItems="center"
           columnGap={2}
+          size={12}
         >
           <Typography>
             {boardOrientation === Color.White ? whitePlayer : blackPlayer}

src/components/slider.tsx

@@ -1,4 +1,4 @@
-import { Grid, Slider as MuiSlider, Typography } from "@mui/material";
+import { Grid2 as Grid, Slider as MuiSlider, Typography } from "@mui/material";
 
 interface Props {
   value: number;
@@ -6,7 +6,7 @@ interface Props {
   min: number;
   max: number;
   label: string;
-  xs?: number;
+  size?: number;
   marksFilter?: number;
 }
 
@@ -16,16 +16,15 @@ export default function Slider({
   label,
   value,
   setValue,
-  xs,
+  size,
   marksFilter = 1,
 }: Props) {
   return (
     <Grid
-      item
       container
-      xs={xs ?? 11}
       justifyContent="center"
       alignItems="center"
+      size={size ?? 11}
     >
       <Typography id={`input-${label}`} textAlign="left" width="100%">
         {label}