Update frontend dependencies

virtweb_frontend/src/widgets/forms/EditSection.tsx

@@ -1,5 +1,6 @@
-import { Grid, Paper, Typography } from "@mui/material";
+import { Paper, Typography } from "@mui/material";
 import React, { PropsWithChildren } from "react";
+import Grid from "@mui/material/Grid2";
 
 export function EditSection(
   p: {
@@ -9,7 +10,7 @@ export function EditSection(
   } & PropsWithChildren
 ): React.ReactElement {
   return (
-    <Grid item sm={12} md={p.fullWidth ? 12 : 6}>
+    <Grid size={{ sm: 12, md: p.fullWidth ? 12 : 6 }}>
       <Paper style={{ margin: "10px", padding: "10px" }}>
         {(p.title || p.actions) && (
           <span

virtweb_frontend/src/widgets/forms/NetDHCPHostReservations.tsx

@@ -4,7 +4,6 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import {
   Avatar,
   Button,
-  Grid,
   IconButton,
   ListItem,
   ListItemAvatar,
@@ -19,6 +18,7 @@ import { useConfirm } from "../../hooks/providers/ConfirmDialogProvider";
 import { IPInput } from "./IPInput";
 import { MACInput } from "./MACInput";
 import { TextInput } from "./TextInput";
+import Grid from "@mui/material/Grid2";
 
 export function NetDHCPHostReservations(p: {
   editable: boolean;
@@ -39,7 +39,7 @@ export function NetDHCPHostReservations(p: {
     <>
       <Grid container>
         {p.dhcp.hosts.map((h, num) => (
-          <Grid key={num} sm={12} md={6} item style={{ padding: "10px" }}>
+          <Grid key={num} size={{ sm: 12, md: 6 }} style={{ padding: "10px" }}>
             <HostReservationWidget
               key={num}
               {...p}

virtweb_frontend/src/widgets/forms/NetNatConfiguration.tsx

@@ -5,11 +5,11 @@ import {
   Card,
   CardActions,
   CardContent,
-  Grid,
   IconButton,
   Tooltip,
   Typography,
 } from "@mui/material";
+import Grid from "@mui/material/Grid2";
 import React, { PropsWithChildren } from "react";
 import { NatEntry } from "../../api/NetworksApi";
 import { ServerApi } from "../../api/ServerApi";
@@ -295,7 +295,7 @@ function NATEntryProp(
   p: PropsWithChildren<{ label?: string }>
 ): React.ReactElement {
   return (
-    <Grid item sm={12} md={6} style={{ padding: "20px" }}>
+    <Grid size={{ sm: 12, md: 6 }} style={{ padding: "20px" }}>
       {p.label && (
         <Typography variant="h6" style={{ marginBottom: "10px" }}>
           {p.label}

virtweb_frontend/src/widgets/forms/VMNetworksList.tsx

@@ -4,13 +4,13 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import {
   Avatar,
   Button,
-  Grid,
   IconButton,
   ListItem,
   ListItemAvatar,
   ListItemText,
   Tooltip,
 } from "@mui/material";
+import Grid from "@mui/material/Grid2";
 import { NWFilter } from "../../api/NWFilterApi";
 import { NetworkInfo } from "../../api/NetworksApi";
 import { ServerApi } from "../../api/ServerApi";