chore(site): Upgrade to MUI v5 (#7437)

site/src/components/Stack/Stack.stories.tsx

@@ -1,4 +1,4 @@
-import TextField from "@material-ui/core/TextField"
+import TextField from "@mui/material/TextField"
 import { Story } from "@storybook/react"
 import { Stack, StackProps } from "./Stack"
 
@@ -9,25 +9,9 @@ export default {
 
 const Template: Story<StackProps> = (args: StackProps) => (
   <Stack {...args}>
-    <TextField
-      autoFocus
-      autoComplete="name"
-      fullWidth
-      label="Name"
-      variant="outlined"
-    />
-    <TextField
-      autoComplete="email"
-      fullWidth
-      label="Email"
-      variant="outlined"
-    />
-    <TextField
-      autoComplete="username"
-      fullWidth
-      label="Username"
-      variant="outlined"
-    />
+    <TextField autoFocus autoComplete="name" fullWidth label="Name" />
+    <TextField autoComplete="email" fullWidth label="Email" />
+    <TextField autoComplete="username" fullWidth label="Username" />
   </Stack>
 )
 

site/src/components/Stack/Stack.tsx

@@ -1,5 +1,5 @@
-import { makeStyles } from "@material-ui/core/styles"
-import { CSSProperties } from "@material-ui/core/styles/withStyles"
+import { makeStyles } from "@mui/styles"
+import { CSSProperties } from "@mui/styles/withStyles"
 import { FC } from "react"
 import { ReactNode } from "react-markdown/lib/react-markdown"
 import { combineClasses } from "../../utils/combineClasses"
@@ -28,7 +28,7 @@ const useStyles = makeStyles((theme) => ({
     flexWrap: ({ wrap }: StyleProps) => wrap,
     maxWidth: ({ maxWidth }: StyleProps) => maxWidth,
 
-    [theme.breakpoints.down("sm")]: {
+    [theme.breakpoints.down("md")]: {
       width: "100%",
     },
   },