From 54f6de176845595d23ca3c1b2b01eef37d3d97e8 Mon Sep 17 00:00:00 2001
From: Jannis Mattheis <contact@jmattheis.de>
Date: Sun, 3 Aug 2025 16:26:42 +0200
Subject: [PATCH] fix: upgrade mui

---
 ui/package.json                               |   9 +-
 ui/src/application/AddApplicationDialog.tsx   |  16 +-
 ui/src/application/Applications.tsx           |  34 +-
 .../application/UpdateApplicationDialog.tsx   |  16 +-
 ui/src/client/AddClientDialog.tsx             |  14 +-
 ui/src/client/Clients.tsx                     |  28 +-
 ui/src/client/UpdateClientDialog.tsx          |  16 +-
 ui/src/common/ConfirmDialog.tsx               |  12 +-
 ui/src/common/ConnectionErrorBanner.tsx       |   4 +-
 ui/src/common/Container.tsx                   |  33 +-
 ui/src/common/CopyableSecret.tsx              |  17 +-
 ui/src/common/DefaultPage.tsx                 |   6 +-
 ui/src/common/LastUsedCell.tsx                |   2 +-
 ui/src/common/LoadingSpinner.tsx              |   6 +-
 ui/src/common/NumberField.tsx                 |   2 +-
 ui/src/common/ScrollUpButton.tsx              |   4 +-
 ui/src/common/SettingsDialog.tsx              |  14 +-
 ui/src/layout/Header.tsx                      | 136 ++---
 ui/src/layout/Layout.tsx                      | 153 ++---
 ui/src/layout/Navigation.tsx                  | 101 ++--
 ui/src/message/Message.tsx                    | 105 ++--
 ui/src/message/Messages.tsx                   |   8 +-
 ui/src/plugin/PluginDetailView.tsx            |  12 +-
 ui/src/plugin/Plugins.tsx                     |  20 +-
 ui/src/snack/SnackBarHandler.tsx              |  13 +-
 ui/src/user/AddEditUserDialog.tsx             |  18 +-
 ui/src/user/Login.tsx                         |   8 +-
 ui/src/user/Register.tsx                      |  14 +-
 ui/src/user/Users.tsx                         |  40 +-
 ui/tsconfig.json                              |   2 -
 ui/yarn.lock                                  | 540 ++++++++++++------
 31 files changed, 784 insertions(+), 619 deletions(-)

diff --git a/ui/package.json b/ui/package.json
index d24a927..55f2578 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -5,8 +5,10 @@
   "homepage": ".",
   "proxy": "http://localhost:80",
   "dependencies": {
-    "@material-ui/core": "^4.11.4",
-    "@material-ui/icons": "^4.9.1",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^7.2.0",
+    "@mui/material": "^7.2.0",
     "@vitejs/plugin-react": "^4.7.0",
     "axios": "^0.21.1",
     "codemirror": "^5.61.1",
@@ -16,7 +18,7 @@
     "mobx-react": "^6.3.0",
     "mobx-utils": "^5.6.1",
     "notifyjs": "^3.0.0",
-    "react": "^16.4.2",
+    "react": "^17.0.0",
     "react-codemirror2": "^7.2.1",
     "react-dom": "^16.4.2",
     "react-infinite": "^0.13.0",
@@ -26,6 +28,7 @@
     "react-timeago": "^6.2.1",
     "remark-gfm": "^1.0.0",
     "remove-markdown": "^0.3.0",
+    "tss-react": "^4.9.19",
     "typeface-roboto": "1.1.13",
     "vite": "^7.0.6",
     "vitest": "^3.2.4"
diff --git a/ui/src/application/AddApplicationDialog.tsx b/ui/src/application/AddApplicationDialog.tsx
index b0ad8f7..f380c4c 100644
--- a/ui/src/application/AddApplicationDialog.tsx
+++ b/ui/src/application/AddApplicationDialog.tsx
@@ -1,11 +1,11 @@
-import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import TextField from '@material-ui/core/TextField';
-import Tooltip from '@material-ui/core/Tooltip';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import TextField from '@mui/material/TextField';
+import Tooltip from '@mui/material/Tooltip';
 import {NumberField} from '../common/NumberField';
 import React, {Component} from 'react';
 
diff --git a/ui/src/application/Applications.tsx b/ui/src/application/Applications.tsx
index 7f3836c..c1a8b05 100644
--- a/ui/src/application/Applications.tsx
+++ b/ui/src/application/Applications.tsx
@@ -1,18 +1,18 @@
-import Grid from '@material-ui/core/Grid';
-import IconButton from '@material-ui/core/IconButton';
-import Paper from '@material-ui/core/Paper';
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableHead from '@material-ui/core/TableHead';
-import TableRow from '@material-ui/core/TableRow';
-import Delete from '@material-ui/icons/Delete';
-import Edit from '@material-ui/icons/Edit';
-import CloudUpload from '@material-ui/icons/CloudUpload';
+import Grid from '@mui/material/Grid';
+import IconButton from '@mui/material/IconButton';
+import Paper from '@mui/material/Paper';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Delete from '@mui/icons-material/Delete';
+import Edit from '@mui/icons-material/Edit';
+import CloudUpload from '@mui/icons-material/CloudUpload';
 import React, {ChangeEvent, Component, SFC} from 'react';
 import ConfirmDialog from '../common/ConfirmDialog';
 import DefaultPage from '../common/DefaultPage';
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material/Button';
 import CopyableSecret from '../common/CopyableSecret';
 import AddApplicationDialog from './AddApplicationDialog';
 import {observer} from 'mobx-react';
@@ -58,7 +58,7 @@ class Applications extends Component<Stores<'appStore'>> {
                     </Button>
                 }
                 maxWidth={1000}>
-                <Grid item xs={12}>
+                <Grid size={{xs: 12}}>
                     <Paper elevation={6} style={{overflowX: 'auto'}}>
                         <Table id="app-table">
                             <TableHead>
@@ -175,10 +175,10 @@ const Row: SFC<IRowProps> = observer(
         fEdit,
     }) => (
         <TableRow>
-            <TableCell padding="default">
+            <TableCell padding="normal">
                 <div style={{display: 'flex'}}>
                     <img src={config.get('url') + image} alt="app logo" width="40" height="40" />
-                    <IconButton onClick={fUpload} style={{height: 40}}>
+                    <IconButton onClick={fUpload} style={{height: 40}} size="large">
                         <CloudUpload />
                     </IconButton>
                 </div>
@@ -193,12 +193,12 @@ const Row: SFC<IRowProps> = observer(
                 <LastUsedCell lastUsed={lastUsed} />
             </TableCell>
             <TableCell align="right" padding="none">
-                <IconButton onClick={fEdit} className="edit">
+                <IconButton onClick={fEdit} className="edit" size="large">
                     <Edit />
                 </IconButton>
             </TableCell>
             <TableCell align="right" padding="none">
-                <IconButton onClick={fDelete} className="delete" disabled={noDelete}>
+                <IconButton onClick={fDelete} className="delete" disabled={noDelete} size="large">
                     <Delete />
                 </IconButton>
             </TableCell>
diff --git a/ui/src/application/UpdateApplicationDialog.tsx b/ui/src/application/UpdateApplicationDialog.tsx
index d5c7e88..b1edb5b 100644
--- a/ui/src/application/UpdateApplicationDialog.tsx
+++ b/ui/src/application/UpdateApplicationDialog.tsx
@@ -1,11 +1,11 @@
-import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import TextField from '@material-ui/core/TextField';
-import Tooltip from '@material-ui/core/Tooltip';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import TextField from '@mui/material/TextField';
+import Tooltip from '@mui/material/Tooltip';
 import {NumberField} from '../common/NumberField';
 import React, {Component} from 'react';
 
diff --git a/ui/src/client/AddClientDialog.tsx b/ui/src/client/AddClientDialog.tsx
index 7324993..4f24cc3 100644
--- a/ui/src/client/AddClientDialog.tsx
+++ b/ui/src/client/AddClientDialog.tsx
@@ -1,10 +1,10 @@
-import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import TextField from '@material-ui/core/TextField';
-import Tooltip from '@material-ui/core/Tooltip';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import TextField from '@mui/material/TextField';
+import Tooltip from '@mui/material/Tooltip';
 import React, {Component} from 'react';
 
 interface IProps {
diff --git a/ui/src/client/Clients.tsx b/ui/src/client/Clients.tsx
index 190cb87..edcc10c 100644
--- a/ui/src/client/Clients.tsx
+++ b/ui/src/client/Clients.tsx
@@ -1,17 +1,17 @@
-import Grid from '@material-ui/core/Grid';
-import IconButton from '@material-ui/core/IconButton';
-import Paper from '@material-ui/core/Paper';
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableHead from '@material-ui/core/TableHead';
-import TableRow from '@material-ui/core/TableRow';
-import Delete from '@material-ui/icons/Delete';
-import Edit from '@material-ui/icons/Edit';
+import Grid from '@mui/material/Grid';
+import IconButton from '@mui/material/IconButton';
+import Paper from '@mui/material/Paper';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Delete from '@mui/icons-material/Delete';
+import Edit from '@mui/icons-material/Edit';
 import React, {Component, SFC} from 'react';
 import ConfirmDialog from '../common/ConfirmDialog';
 import DefaultPage from '../common/DefaultPage';
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material/Button';
 import AddClientDialog from './AddClientDialog';
 import UpdateDialog from './UpdateClientDialog';
 import {observer} from 'mobx-react';
@@ -53,7 +53,7 @@ class Clients extends Component<Stores<'clientStore'>> {
                         Create Client
                     </Button>
                 }>
-                <Grid item xs={12}>
+                <Grid size={{xs: 12}}>
                     <Paper elevation={6} style={{overflowX: 'auto'}}>
                         <Table id="client-table">
                             <TableHead>
@@ -127,12 +127,12 @@ const Row: SFC<IRowProps> = ({name, value, lastUsed, fEdit, fDelete}) => (
             <LastUsedCell lastUsed={lastUsed} />
         </TableCell>
         <TableCell align="right" padding="none">
-            <IconButton onClick={fEdit} className="edit">
+            <IconButton onClick={fEdit} className="edit" size="large">
                 <Edit />
             </IconButton>
         </TableCell>
         <TableCell align="right" padding="none">
-            <IconButton onClick={fDelete} className="delete">
+            <IconButton onClick={fDelete} className="delete" size="large">
                 <Delete />
             </IconButton>
         </TableCell>
diff --git a/ui/src/client/UpdateClientDialog.tsx b/ui/src/client/UpdateClientDialog.tsx
index 316c079..a8a113e 100644
--- a/ui/src/client/UpdateClientDialog.tsx
+++ b/ui/src/client/UpdateClientDialog.tsx
@@ -1,11 +1,11 @@
-import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import TextField from '@material-ui/core/TextField';
-import Tooltip from '@material-ui/core/Tooltip';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import TextField from '@mui/material/TextField';
+import Tooltip from '@mui/material/Tooltip';
 import React, {Component} from 'react';
 
 interface IProps {
diff --git a/ui/src/common/ConfirmDialog.tsx b/ui/src/common/ConfirmDialog.tsx
index fdb246e..99c506e 100644
--- a/ui/src/common/ConfirmDialog.tsx
+++ b/ui/src/common/ConfirmDialog.tsx
@@ -1,9 +1,9 @@
-import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogTitle from '@material-ui/core/DialogTitle';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
 import React from 'react';
 
 interface IProps {
diff --git a/ui/src/common/ConnectionErrorBanner.tsx b/ui/src/common/ConnectionErrorBanner.tsx
index fbcbb72..067a7ea 100644
--- a/ui/src/common/ConnectionErrorBanner.tsx
+++ b/ui/src/common/ConnectionErrorBanner.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import Button from '@material-ui/core/Button';
-import Typography from '@material-ui/core/Typography';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
 
 interface ConnectionErrorBannerProps {
     height: number;
diff --git a/ui/src/common/Container.tsx b/ui/src/common/Container.tsx
index c891b01..e0c3410 100644
--- a/ui/src/common/Container.tsx
+++ b/ui/src/common/Container.tsx
@@ -1,21 +1,26 @@
-import Paper from '@material-ui/core/Paper';
-import {withStyles, WithStyles} from '@material-ui/core/styles';
+import Paper from '@mui/material/Paper';
+import {withStyles} from 'tss-react/mui';
 import * as React from 'react';
 
-const styles = () => ({
-    paper: {
-        padding: 16,
-    },
-});
+const styles = () =>
+    ({
+        paper: {
+            padding: 16,
+        },
+    } as const);
 
-interface IProps extends WithStyles<'paper'> {
+interface IProps {
     style?: React.CSSProperties;
+    classes?: Partial<Record<keyof ReturnType<typeof styles>, string>>;
 }
 
-const Container: React.FC<IProps> = ({classes, children, style}) => (
-    <Paper elevation={6} className={classes.paper} style={style}>
-        {children}
-    </Paper>
-);
+const Container: React.FC<IProps> = ({children, style, ...props}) => {
+    const classes = withStyles.getClasses(props);
+    return (
+        <Paper elevation={6} className={classes.paper} style={style}>
+            {children}
+        </Paper>
+    );
+};
 
-export default withStyles(styles)(Container);
+export default withStyles(Container, styles);
diff --git a/ui/src/common/CopyableSecret.tsx b/ui/src/common/CopyableSecret.tsx
index 6922614..7c22af2 100644
--- a/ui/src/common/CopyableSecret.tsx
+++ b/ui/src/common/CopyableSecret.tsx
@@ -1,8 +1,8 @@
-import IconButton from '@material-ui/core/IconButton';
-import Typography from '@material-ui/core/Typography';
-import Visibility from '@material-ui/icons/Visibility';
-import Copy from '@material-ui/icons/FileCopyOutlined';
-import VisibilityOff from '@material-ui/icons/VisibilityOff';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import Visibility from '@mui/icons-material/Visibility';
+import Copy from '@mui/icons-material/FileCopyOutlined';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
 import React, {Component, CSSProperties} from 'react';
 import {Stores, inject} from '../inject';
 
@@ -23,10 +23,13 @@ class CopyableSecret extends Component<IProps & Stores<'snackManager'>, IState>
         const text = this.state.visible ? value : '•••••••••••••••';
         return (
             <div style={style}>
-                <IconButton onClick={this.copyToClipboard} title="Copy to clipboard">
+                <IconButton onClick={this.copyToClipboard} title="Copy to clipboard" size="large">
                     <Copy />
                 </IconButton>
-                <IconButton onClick={this.toggleVisibility} className="toggle-visibility">
+                <IconButton
+                    onClick={this.toggleVisibility}
+                    className="toggle-visibility"
+                    size="large">
                     {this.state.visible ? <VisibilityOff /> : <Visibility />}
                 </IconButton>
                 <Typography style={{fontFamily: 'monospace', fontSize: 16}}>{text}</Typography>
diff --git a/ui/src/common/DefaultPage.tsx b/ui/src/common/DefaultPage.tsx
index b3aed16..2b2c15f 100644
--- a/ui/src/common/DefaultPage.tsx
+++ b/ui/src/common/DefaultPage.tsx
@@ -1,5 +1,5 @@
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
 import React, {FC} from 'react';
 
 interface IProps {
@@ -11,7 +11,7 @@ interface IProps {
 const DefaultPage: FC<IProps> = ({title, rightControl, maxWidth = 700, children}) => (
     <main style={{margin: '0 auto', maxWidth}}>
         <Grid container spacing={4}>
-            <Grid item xs={12} style={{display: 'flex', flexWrap: 'wrap'}}>
+            <Grid size={{xs: 12}} style={{display: 'flex', flexWrap: 'wrap'}}>
                 <Typography variant="h4" style={{flex: 1}}>
                     {title}
                 </Typography>
diff --git a/ui/src/common/LastUsedCell.tsx b/ui/src/common/LastUsedCell.tsx
index db3be73..45d2199 100644
--- a/ui/src/common/LastUsedCell.tsx
+++ b/ui/src/common/LastUsedCell.tsx
@@ -1,4 +1,4 @@
-import {Typography} from '@material-ui/core';
+import {Typography} from '@mui/material';
 import React from 'react';
 import TimeAgo from 'react-timeago';
 
diff --git a/ui/src/common/LoadingSpinner.tsx b/ui/src/common/LoadingSpinner.tsx
index fc35a42..3a9c466 100644
--- a/ui/src/common/LoadingSpinner.tsx
+++ b/ui/src/common/LoadingSpinner.tsx
@@ -1,12 +1,12 @@
-import CircularProgress from '@material-ui/core/CircularProgress';
-import Grid from '@material-ui/core/Grid';
+import CircularProgress from '@mui/material/CircularProgress';
+import Grid from '@mui/material/Grid';
 import React from 'react';
 import DefaultPage from './DefaultPage';
 
 export default function LoadingSpinner() {
     return (
         <DefaultPage title="" maxWidth={250}>
-            <Grid item xs={12} style={{textAlign: 'center'}}>
+            <Grid size={{xs: 12}} style={{textAlign: 'center'}}>
                 <CircularProgress size={40} />
             </Grid>
         </DefaultPage>
diff --git a/ui/src/common/NumberField.tsx b/ui/src/common/NumberField.tsx
index 58952e0..6310e35 100644
--- a/ui/src/common/NumberField.tsx
+++ b/ui/src/common/NumberField.tsx
@@ -1,4 +1,4 @@
-import {TextField, TextFieldProps} from '@material-ui/core';
+import {TextField, TextFieldProps} from '@mui/material';
 import React from 'react';
 
 export interface NumberFieldProps {
diff --git a/ui/src/common/ScrollUpButton.tsx b/ui/src/common/ScrollUpButton.tsx
index e030262..1f185d4 100644
--- a/ui/src/common/ScrollUpButton.tsx
+++ b/ui/src/common/ScrollUpButton.tsx
@@ -1,5 +1,5 @@
-import Fab from '@material-ui/core/Fab';
-import KeyboardArrowUp from '@material-ui/icons/KeyboardArrowUp';
+import Fab from '@mui/material/Fab';
+import KeyboardArrowUp from '@mui/icons-material/KeyboardArrowUp';
 import React, {Component} from 'react';
 
 class ScrollUpButton extends Component {
diff --git a/ui/src/common/SettingsDialog.tsx b/ui/src/common/SettingsDialog.tsx
index c9a0464..9fd3e45 100644
--- a/ui/src/common/SettingsDialog.tsx
+++ b/ui/src/common/SettingsDialog.tsx
@@ -1,10 +1,10 @@
-import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import TextField from '@material-ui/core/TextField';
-import Tooltip from '@material-ui/core/Tooltip';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import TextField from '@mui/material/TextField';
+import Tooltip from '@mui/material/Tooltip';
 import React, {Component} from 'react';
 import {observable} from 'mobx';
 import {observer} from 'mobx-react';
diff --git a/ui/src/layout/Header.tsx b/ui/src/layout/Header.tsx
index db819a9..3c4b9b7 100644
--- a/ui/src/layout/Header.tsx
+++ b/ui/src/layout/Header.tsx
@@ -1,49 +1,51 @@
-import AppBar from '@material-ui/core/AppBar';
-import Button from '@material-ui/core/Button';
-import IconButton from '@material-ui/core/IconButton';
-import {createStyles, Theme, WithStyles, withStyles} from '@material-ui/core/styles';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
-import AccountCircle from '@material-ui/icons/AccountCircle';
-import Chat from '@material-ui/icons/Chat';
-import DevicesOther from '@material-ui/icons/DevicesOther';
-import ExitToApp from '@material-ui/icons/ExitToApp';
-import Highlight from '@material-ui/icons/Highlight';
-import GitHubIcon from '@material-ui/icons/GitHub';
-import MenuIcon from '@material-ui/icons/Menu';
-import Apps from '@material-ui/icons/Apps';
-import SupervisorAccount from '@material-ui/icons/SupervisorAccount';
+import AppBar from '@mui/material/AppBar';
+import Button, {ButtonProps} from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import {Theme} from '@mui/material/styles';
+import {withStyles} from 'tss-react/mui';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import AccountCircle from '@mui/icons-material/AccountCircle';
+import Chat from '@mui/icons-material/Chat';
+import DevicesOther from '@mui/icons-material/DevicesOther';
+import ExitToApp from '@mui/icons-material/ExitToApp';
+import Highlight from '@mui/icons-material/Highlight';
+import GitHubIcon from '@mui/icons-material/GitHub';
+import MenuIcon from '@mui/icons-material/Menu';
+import Apps from '@mui/icons-material/Apps';
+import SupervisorAccount from '@mui/icons-material/SupervisorAccount';
 import React, {Component, CSSProperties} from 'react';
 import {Link} from 'react-router-dom';
 import {observer} from 'mobx-react';
-import {Hidden, PropTypes, withWidth} from '@material-ui/core';
-import {Breakpoint} from '@material-ui/core/styles/createBreakpoints';
+import {useMediaQuery} from '@mui/material';
 
 const styles = (theme: Theme) =>
-    createStyles({
+    ({
         appBar: {
             zIndex: theme.zIndex.drawer + 1,
-            [theme.breakpoints.down('xs')]: {
+            [theme.breakpoints.down('sm')]: {
                 paddingBottom: 10,
             },
         },
         toolbar: {
             justifyContent: 'space-between',
-            [theme.breakpoints.down('xs')]: {
+            [theme.breakpoints.down('sm')]: {
                 flexWrap: 'wrap',
             },
         },
         menuButtons: {
             display: 'flex',
-            [theme.breakpoints.down('sm')]: {
+            [theme.breakpoints.down('md')]: {
                 flex: 1,
             },
             justifyContent: 'center',
-            [theme.breakpoints.down('xs')]: {
+            [theme.breakpoints.down('sm')]: {
                 flexBasis: '100%',
                 marginTop: 5,
                 order: 1,
+                height: 50,
                 justifyContent: 'space-between',
+                alignItems: 'center',
             },
         },
         title: {
@@ -60,43 +62,33 @@ const styles = (theme: Theme) =>
             color: 'inherit',
             textDecoration: 'none',
         },
-    });
+    } as const);
 
-type Styles = WithStyles<'link' | 'menuButtons' | 'toolbar' | 'titleName' | 'title' | 'appBar'>;
-
-interface IProps extends Styles {
+interface IProps {
     loggedIn: boolean;
     name: string;
     admin: boolean;
     version: string;
+    classes?: Partial<Record<keyof ReturnType<typeof styles>, string>>;
     toggleTheme: VoidFunction;
     showSettings: VoidFunction;
     logout: VoidFunction;
     style: CSSProperties;
-    width: Breakpoint;
     setNavOpen: (open: boolean) => void;
 }
 
 @observer
 class Header extends Component<IProps> {
     public render() {
-        const {
-            classes,
-            version,
-            name,
-            loggedIn,
-            admin,
-            toggleTheme,
-            logout,
-            style,
-            setNavOpen,
-            width,
-        } = this.props;
+        const {version, name, loggedIn, admin, toggleTheme, logout, style, setNavOpen} = this.props;
 
-        const position = width === 'xs' ? 'sticky' : 'fixed';
+        const classes = withStyles.getClasses(this.props);
 
         return (
-            <AppBar position={position} style={style} className={classes.appBar}>
+            <AppBar
+                sx={{position: {xs: 'sticky', sm: 'fixed'}}}
+                style={style}
+                className={classes.appBar}>
                 <Toolbar className={classes.toolbar}>
                     <div className={classes.title}>
                         <Link to="/" className={classes.link}>
@@ -112,9 +104,9 @@ class Header extends Component<IProps> {
                             </Typography>
                         </a>
                     </div>
-                    {loggedIn && this.renderButtons(name, admin, logout, width, setNavOpen)}
+                    {loggedIn && this.renderButtons(name, admin, logout, setNavOpen)}
                     <div>
-                        <IconButton onClick={toggleTheme} color="inherit">
+                        <IconButton onClick={toggleTheme} color="inherit" size="large">
                             <Highlight />
                         </IconButton>
 
@@ -123,7 +115,7 @@ class Header extends Component<IProps> {
                             className={classes.link}
                             target="_blank"
                             rel="noopener noreferrer">
-                            <IconButton color="inherit">
+                            <IconButton color="inherit" size="large">
                                 <GitHubIcon />
                             </IconButton>
                         </a>
@@ -137,56 +129,42 @@ class Header extends Component<IProps> {
         name: string,
         admin: boolean,
         logout: VoidFunction,
-        width: Breakpoint,
         setNavOpen: (open: boolean) => void
     ) {
-        const {classes, showSettings} = this.props;
+        const classes = withStyles.getClasses(this.props);
+        const {showSettings} = this.props;
         return (
             <div className={classes.menuButtons}>
-                <Hidden smUp implementation="css">
-                    <ResponsiveButton
-                        icon={<MenuIcon />}
-                        onClick={() => setNavOpen(true)}
-                        label="menu"
-                        width={width}
-                        color="inherit"
-                    />
-                </Hidden>
+                <ResponsiveButton
+                    sx={{display: {sm: 'none', xs: 'block'}}}
+                    icon={<MenuIcon />}
+                    onClick={() => setNavOpen(true)}
+                    label="menu"
+                    color="inherit"
+                />
                 {admin && (
                     <Link className={classes.link} to="/users" id="navigate-users">
                         <ResponsiveButton
                             icon={<SupervisorAccount />}
                             label="users"
-                            width={width}
                             color="inherit"
                         />
                     </Link>
                 )}
                 <Link className={classes.link} to="/applications" id="navigate-apps">
-                    <ResponsiveButton icon={<Chat />} label="apps" width={width} color="inherit" />
+                    <ResponsiveButton icon={<Chat />} label="apps" color="inherit" />
                 </Link>
                 <Link className={classes.link} to="/clients" id="navigate-clients">
-                    <ResponsiveButton
-                        icon={<DevicesOther />}
-                        label="clients"
-                        width={width}
-                        color="inherit"
-                    />
+                    <ResponsiveButton icon={<DevicesOther />} label="clients" color="inherit" />
                 </Link>
                 <Link className={classes.link} to="/plugins" id="navigate-plugins">
-                    <ResponsiveButton
-                        icon={<Apps />}
-                        label="plugins"
-                        width={width}
-                        color="inherit"
-                    />
+                    <ResponsiveButton icon={<Apps />} label="plugins" color="inherit" />
                 </Link>
                 <ResponsiveButton
                     icon={<AccountCircle />}
                     label={name}
                     onClick={showSettings}
                     id="changepw"
-                    width={width}
                     color="inherit"
                 />
                 <ResponsiveButton
@@ -194,7 +172,6 @@ class Header extends Component<IProps> {
                     label="Logout"
                     onClick={logout}
                     id="logout"
-                    width={width}
                     color="inherit"
                 />
             </div>
@@ -203,15 +180,20 @@ class Header extends Component<IProps> {
 }
 
 const ResponsiveButton: React.FC<{
-    width: Breakpoint;
-    color: PropTypes.Color;
+    color: 'inherit';
+    sx?: ButtonProps['sx'];
     label: string;
     id?: string;
     onClick?: () => void;
     icon: React.ReactNode;
-}> = ({width, icon, label, ...rest}) => {
-    if (width === 'xs' || width === 'sm') {
-        return <IconButton {...rest}>{icon}</IconButton>;
+}> = ({icon, label, ...rest}) => {
+    const matches = useMediaQuery('(max-width:1000px)');
+    if (matches) {
+        return (
+            <IconButton {...rest} size="large">
+                {icon}
+            </IconButton>
+        );
     }
     return (
         <Button startIcon={icon} {...rest}>
@@ -220,4 +202,4 @@ const ResponsiveButton: React.FC<{
     );
 };
 
-export default withWidth()(withStyles(styles, {withTheme: true})(Header));
+export default withStyles(Header, styles);
diff --git a/ui/src/layout/Layout.tsx b/ui/src/layout/Layout.tsx
index 2b03da4..fa91054 100644
--- a/ui/src/layout/Layout.tsx
+++ b/ui/src/layout/Layout.tsx
@@ -1,5 +1,6 @@
-import {createMuiTheme, MuiThemeProvider, Theme, WithStyles, withStyles} from '@material-ui/core';
-import CssBaseline from '@material-ui/core/CssBaseline';
+import {createTheme, ThemeProvider, StyledEngineProvider, Theme} from '@mui/material';
+import {withStyles} from 'tss-react/mui';
+import CssBaseline from '@mui/material/CssBaseline';
 import * as React from 'react';
 import {HashRouter, Redirect, Route, Switch} from 'react-router-dom';
 import Header from './Header';
@@ -27,7 +28,7 @@ const styles = (theme: Theme) => ({
         marginTop: 64,
         padding: theme.spacing(4),
         width: '100%',
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             marginTop: 0,
         },
     },
@@ -36,14 +37,14 @@ const styles = (theme: Theme) => ({
 const localStorageThemeKey = 'gotify-theme';
 type ThemeKey = 'dark' | 'light';
 const themeMap: Record<ThemeKey, Theme> = {
-    light: createMuiTheme({
+    light: createTheme({
         palette: {
-            type: 'light',
+            mode: 'light',
         },
     }),
-    dark: createMuiTheme({
+    dark: createTheme({
         palette: {
-            type: 'dark',
+            mode: 'dark',
         },
     }),
 };
@@ -51,10 +52,12 @@ const themeMap: Record<ThemeKey, Theme> = {
 const isThemeKey = (value: string | null): value is ThemeKey =>
     value === 'light' || value === 'dark';
 
+interface LayoutProps {
+    classes?: Partial<Record<keyof ReturnType<typeof styles>, string>>;
+}
+
 @observer
-class Layout extends React.Component<
-    WithStyles<'content'> & Stores<'currentUser' | 'snackManager'>
-> {
+class Layout extends React.Component<LayoutProps & Stores<'currentUser' | 'snackManager'>> {
     @observable
     private currentTheme: ThemeKey = 'dark';
     @observable
@@ -78,7 +81,6 @@ class Layout extends React.Component<
     public render() {
         const {showSettings, currentTheme} = this;
         const {
-            classes,
             currentUser: {
                 loggedIn,
                 authenticating,
@@ -88,75 +90,82 @@ class Layout extends React.Component<
                 connectionErrorMessage,
             },
         } = this.props;
+        const classes = withStyles.getClasses(this.props);
         const theme = themeMap[currentTheme];
         const loginRoute = () => (loggedIn ? <Redirect to="/" /> : <Login />);
         const {version} = config.get('version');
         return (
-            <MuiThemeProvider theme={theme}>
-                <HashRouter>
-                    <div>
-                        {!connectionErrorMessage ? null : (
-                            <ConnectionErrorBanner
-                                height={64}
-                                retry={() => tryReconnect()}
-                                message={connectionErrorMessage}
-                            />
-                        )}
-                        <div style={{display: 'flex', flexDirection: 'column'}}>
-                            <CssBaseline />
-                            <Header
-                                style={{top: !connectionErrorMessage ? 0 : 64}}
-                                admin={admin}
-                                name={name}
-                                version={version}
-                                loggedIn={loggedIn}
-                                toggleTheme={this.toggleTheme.bind(this)}
-                                showSettings={() => (this.showSettings = true)}
-                                logout={logout}
-                                setNavOpen={this.setNavOpen.bind(this)}
-                            />
-                            <div style={{display: 'flex'}}>
-                                <Navigation
+            <StyledEngineProvider injectFirst>
+                <ThemeProvider theme={theme}>
+                    <HashRouter>
+                        <div>
+                            {!connectionErrorMessage ? null : (
+                                <ConnectionErrorBanner
+                                    height={64}
+                                    retry={() => tryReconnect()}
+                                    message={connectionErrorMessage}
+                                />
+                            )}
+                            <div style={{display: 'flex', flexDirection: 'column'}}>
+                                <CssBaseline />
+                                <Header
+                                    style={{top: !connectionErrorMessage ? 0 : 64}}
+                                    admin={admin}
+                                    name={name}
+                                    version={version}
                                     loggedIn={loggedIn}
-                                    navOpen={this.navOpen}
+                                    toggleTheme={this.toggleTheme.bind(this)}
+                                    showSettings={() => (this.showSettings = true)}
+                                    logout={logout}
                                     setNavOpen={this.setNavOpen.bind(this)}
                                 />
-                                <main className={classes.content}>
-                                    <Switch>
-                                        {authenticating ? (
-                                            <Route path="/">
-                                                <LoadingSpinner />
-                                            </Route>
-                                        ) : null}
-                                        <Route exact path="/login" render={loginRoute} />
-                                        {loggedIn ? null : <Redirect to="/login" />}
-                                        <Route exact path="/" component={Messages} />
-                                        <Route exact path="/messages/:id" component={Messages} />
-                                        <Route
-                                            exact
-                                            path="/applications"
-                                            component={Applications}
-                                        />
-                                        <Route exact path="/clients" component={Clients} />
-                                        <Route exact path="/users" component={Users} />
-                                        <Route exact path="/plugins" component={Plugins} />
-                                        <Route
-                                            exact
-                                            path="/plugins/:id"
-                                            component={PluginDetailView}
-                                        />
-                                    </Switch>
-                                </main>
+                                <div style={{display: 'flex'}}>
+                                    <Navigation
+                                        loggedIn={loggedIn}
+                                        navOpen={this.navOpen}
+                                        setNavOpen={this.setNavOpen.bind(this)}
+                                    />
+                                    <main className={classes.content}>
+                                        <Switch>
+                                            {authenticating ? (
+                                                <Route path="/">
+                                                    <LoadingSpinner />
+                                                </Route>
+                                            ) : null}
+                                            <Route exact path="/login" render={loginRoute} />
+                                            {loggedIn ? null : <Redirect to="/login" />}
+                                            <Route exact path="/" component={Messages} />
+                                            <Route
+                                                exact
+                                                path="/messages/:id"
+                                                component={Messages}
+                                            />
+                                            <Route
+                                                exact
+                                                path="/applications"
+                                                component={Applications}
+                                            />
+                                            <Route exact path="/clients" component={Clients} />
+                                            <Route exact path="/users" component={Users} />
+                                            <Route exact path="/plugins" component={Plugins} />
+                                            <Route
+                                                exact
+                                                path="/plugins/:id"
+                                                component={PluginDetailView}
+                                            />
+                                        </Switch>
+                                    </main>
+                                </div>
+                                {showSettings && (
+                                    <SettingsDialog fClose={() => (this.showSettings = false)} />
+                                )}
+                                <ScrollUpButton />
+                                <SnackBarHandler />
                             </div>
-                            {showSettings && (
-                                <SettingsDialog fClose={() => (this.showSettings = false)} />
-                            )}
-                            <ScrollUpButton />
-                            <SnackBarHandler />
                         </div>
-                    </div>
-                </HashRouter>
-            </MuiThemeProvider>
+                    </HashRouter>
+                </ThemeProvider>
+            </StyledEngineProvider>
         );
     }
 
@@ -166,4 +175,4 @@ class Layout extends React.Component<
     }
 }
 
-export default withStyles(styles, {withTheme: true})(inject('currentUser', 'snackManager')(Layout));
+export default withStyles(inject('currentUser', 'snackManager')(Layout), styles);
diff --git a/ui/src/layout/Navigation.tsx b/ui/src/layout/Navigation.tsx
index 8eea338..973c9e2 100644
--- a/ui/src/layout/Navigation.tsx
+++ b/ui/src/layout/Navigation.tsx
@@ -1,6 +1,6 @@
-import Divider from '@material-ui/core/Divider';
-import Drawer from '@material-ui/core/Drawer';
-import {StyleRules, Theme, WithStyles, withStyles} from '@material-ui/core/styles';
+import Divider from '@mui/material/Divider';
+import Drawer from '@mui/material/Drawer';
+import {Theme} from '@mui/material/styles';
 import React, {Component} from 'react';
 import {Link} from 'react-router-dom';
 import {observer} from 'mobx-react';
@@ -8,51 +8,52 @@ import {inject, Stores} from '../inject';
 import {mayAllowPermission, requestPermission} from '../snack/browserNotification';
 import {
     Button,
-    Hidden,
     IconButton,
     Typography,
-    ListItem,
     ListItemText,
     ListItemAvatar,
     Avatar,
-} from '@material-ui/core';
-import {DrawerProps} from '@material-ui/core/Drawer/Drawer';
-import CloseIcon from '@material-ui/icons/Close';
+    ListItemButton,
+} from '@mui/material';
+import {DrawerProps} from '@mui/material/Drawer/Drawer';
+import CloseIcon from '@mui/icons-material/Close';
+import {withStyles} from 'tss-react/mui';
 
-const styles = (theme: Theme): StyleRules<'root' | 'drawerPaper' | 'toolbar' | 'link'> => ({
-    root: {
-        height: '100%',
-    },
-    drawerPaper: {
-        position: 'relative',
-        width: 250,
-        minHeight: '100%',
-        height: '100vh',
-    },
-    toolbar: theme.mixins.toolbar,
-    link: {
-        color: 'inherit',
-        textDecoration: 'none',
-    },
-});
-
-type Styles = WithStyles<'root' | 'drawerPaper' | 'toolbar' | 'link'>;
+const styles = (theme: Theme) =>
+    ({
+        root: {
+            height: '100%',
+        },
+        drawerPaper: {
+            position: 'relative',
+            width: 250,
+            minHeight: '100%',
+            height: '100vh',
+        },
+        toolbar: theme.mixins.toolbar as any,
+        link: {
+            color: 'inherit',
+            textDecoration: 'none',
+        },
+    } as const);
 
 interface IProps {
     loggedIn: boolean;
     navOpen: boolean;
+    classes?: Partial<Record<keyof ReturnType<typeof styles>, string>>;
     setNavOpen: (open: boolean) => void;
 }
 
 @observer
 class Navigation extends Component<
-    IProps & Styles & Stores<'appStore'>,
+    IProps & Stores<'appStore'>,
     {showRequestNotification: boolean}
 > {
     public state = {showRequestNotification: mayAllowPermission()};
 
     public render() {
-        const {classes, loggedIn, appStore, navOpen, setNavOpen} = this.props;
+        const {loggedIn, appStore, navOpen, setNavOpen} = this.props;
+        const classes = withStyles.getClasses(this.props);
         const {showRequestNotification} = this.state;
         const apps = appStore.getItems();
 
@@ -65,7 +66,7 @@ class Navigation extends Component<
                           className={`${classes.link} item`}
                           to={'/messages/' + app.id}
                           key={app.id}>
-                          <ListItem button>
+                          <ListItemButton>
                               <ListItemAvatar style={{minWidth: 42}}>
                                   <Avatar
                                       style={{width: 32, height: 32}}
@@ -74,17 +75,17 @@ class Navigation extends Component<
                                   />
                               </ListItemAvatar>
                               <ListItemText primary={app.name} />
-                          </ListItem>
+                          </ListItemButton>
                       </Link>
                   ));
 
         const placeholderItems = [
-            <ListItem button disabled key={-1}>
+            <ListItemButton disabled key={-1}>
                 <ListItemText primary="Some Server" />
-            </ListItem>,
-            <ListItem button disabled key={-2}>
+            </ListItemButton>,
+            <ListItemButton disabled key={-2}>
                 <ListItemText primary="A Raspberry PI" />
-            </ListItem>,
+            </ListItemButton>,
         ];
 
         return (
@@ -95,9 +96,9 @@ class Navigation extends Component<
                 id="message-navigation">
                 <div className={classes.toolbar} />
                 <Link className={classes.link} to="/" onClick={() => setNavOpen(false)}>
-                    <ListItem button disabled={!loggedIn} className="all">
+                    <ListItemButton disabled={!loggedIn} className="all">
                         <ListItemText primary="All Messages" />
-                    </ListItem>
+                    </ListItemButton>
                 </Link>
                 <Divider />
                 <div>{loggedIn ? userApps : placeholderItems}</div>
@@ -122,20 +123,20 @@ const ResponsiveDrawer: React.FC<
     DrawerProps & {navOpen: boolean; setNavOpen: (open: boolean) => void}
 > = ({navOpen, setNavOpen, children, ...rest}) => (
     <>
-        <Hidden smUp implementation="css">
-            <Drawer variant="temporary" open={navOpen} {...rest}>
-                <IconButton onClick={() => setNavOpen(false)}>
-                    <CloseIcon />
-                </IconButton>
-                {children}
-            </Drawer>
-        </Hidden>
-        <Hidden xsDown implementation="css">
-            <Drawer variant="permanent" {...rest}>
-                {children}
-            </Drawer>
-        </Hidden>
+        <Drawer
+            sx={{display: {sm: 'none', xs: 'block'}}}
+            variant="temporary"
+            open={navOpen}
+            {...rest}>
+            <IconButton onClick={() => setNavOpen(false)} size="large">
+                <CloseIcon />
+            </IconButton>
+            {children}
+        </Drawer>
+        <Drawer sx={{display: {xs: 'none', sm: 'block'}}} variant="permanent" {...rest}>
+            {children}
+        </Drawer>
     </>
 );
 
-export default withStyles(styles, {withTheme: true})(inject('appStore')(Navigation));
+export default withStyles(inject('appStore')(Navigation), styles);
diff --git a/ui/src/message/Message.tsx b/ui/src/message/Message.tsx
index 0caeda2..8841fcb 100644
--- a/ui/src/message/Message.tsx
+++ b/ui/src/message/Message.tsx
@@ -1,9 +1,9 @@
-import {Button} from '@material-ui/core';
-import IconButton from '@material-ui/core/IconButton';
-import {createStyles, Theme, withStyles, WithStyles} from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-import {ExpandLess, ExpandMore} from '@material-ui/icons';
-import Delete from '@material-ui/icons/Delete';
+import {Button, Theme} from '@mui/material';
+import IconButton from '@mui/material/IconButton';
+import {withStyles} from 'tss-react/mui';
+import Typography from '@mui/material/Typography';
+import {ExpandLess, ExpandMore} from '@mui/icons-material';
+import Delete from '@mui/icons-material/Delete';
 import React, {RefObject} from 'react';
 import TimeAgo from 'react-timeago';
 import Container from '../common/Container';
@@ -15,7 +15,7 @@ import {contentType, RenderMode} from './extras';
 const PREVIEW_LENGTH = 500;
 
 const styles = (theme: Theme) =>
-    createStyles({
+    ({
         header: {
             display: 'flex',
             flexWrap: 'wrap',
@@ -29,21 +29,20 @@ const styles = (theme: Theme) =>
             marginRight: -15,
         },
         wrapperPadding: {
-            padding: 12,
+            marginBottom: 12,
         },
         messageContentWrapper: {
-            width: '100%',
-            maxWidth: 585,
+            minWidth: 200,
         },
         image: {
             marginRight: 15,
-            [theme.breakpoints.down('sm')]: {
+            [theme.breakpoints.down('md')]: {
                 width: 32,
                 height: 32,
             },
         },
         date: {
-            [theme.breakpoints.down('sm')]: {
+            [theme.breakpoints.down('md')]: {
                 order: 1,
                 flexBasis: '100%',
                 opacity: 0.7,
@@ -75,7 +74,7 @@ const styles = (theme: Theme) =>
                 maxWidth: '100%',
             },
         },
-    });
+    } as const);
 
 interface IProps {
     title: string;
@@ -85,6 +84,7 @@ interface IProps {
     priority: number;
     fDelete: VoidFunction;
     extras?: IMessageExtras;
+    classes?: Partial<Record<keyof ReturnType<typeof styles>, string>>;
     height: (height: number) => void;
 }
 
@@ -103,12 +103,12 @@ const priorityColor = (priority: number) => {
     }
 };
 
-class Message extends React.PureComponent<IProps & WithStyles<typeof styles>, IState> {
+class Message extends React.PureComponent<IProps, IState> {
     public state = {expanded: false, isOverflowing: false};
     private node: HTMLDivElement | null = null;
     private previewRef: RefObject<HTMLDivElement>;
 
-    constructor(props: IProps & WithStyles<typeof styles>) {
+    constructor(props: IProps) {
         super(props);
         this.previewRef = React.createRef();
     }
@@ -135,18 +135,20 @@ class Message extends React.PureComponent<IProps & WithStyles<typeof styles>, IS
 
     private renderContent = () => {
         const content = this.props.content;
+        const classes = withStyles.getClasses(this.props);
 
         switch (contentType(this.props.extras)) {
             case RenderMode.Markdown:
                 return <Markdown>{content}</Markdown>;
             case RenderMode.Plain:
             default:
-                return <span className={this.props.classes.plainContent}>{content}</span>;
+                return <span className={classes.plainContent}>{content}</span>;
         }
     };
 
     public render(): React.ReactNode {
-        const {fDelete, classes, title, date, image, priority} = this.props;
+        const {fDelete, title, date, image, priority} = this.props;
+        const classes = withStyles.getClasses(this.props);
 
         return (
             <div className={`${classes.wrapperPadding} message`} ref={(ref) => (this.node = ref)}>
@@ -158,38 +160,45 @@ class Message extends React.PureComponent<IProps & WithStyles<typeof styles>, IS
                         borderLeftWidth: 6,
                         borderLeftStyle: 'solid',
                     }}>
-                    <div className={classes.imageWrapper}>
-                        {image !== null ? (
-                            <img
-                                src={config.get('url') + image}
-                                alt="app logo"
-                                width="70"
-                                height="70"
-                                className={classes.image}
-                            />
-                        ) : null}
-                    </div>
-                    <div className={classes.messageContentWrapper}>
-                        <div className={classes.header}>
-                            <Typography className={`${classes.headerTitle} title`} variant="h5">
-                                {title}
-                            </Typography>
-                            <Typography variant="body1" className={classes.date}>
-                                <TimeAgo date={date} />
-                            </Typography>
-                            <IconButton onClick={fDelete} className={`${classes.trash} delete`}>
-                                <Delete />
-                            </IconButton>
+                    <div style={{display: 'flex', width: '100%'}}>
+                        <div className={classes.imageWrapper}>
+                            {image !== null ? (
+                                <img
+                                    src={config.get('url') + image}
+                                    alt="app logo"
+                                    width="70"
+                                    height="70"
+                                    className={classes.image}
+                                />
+                            ) : null}
                         </div>
+                        <div className={classes.messageContentWrapper}>
+                            <div className={classes.header}>
+                                <Typography className={`${classes.headerTitle} title`} variant="h5">
+                                    {title}
+                                </Typography>
+                                <Typography variant="body1" className={classes.date}>
+                                    <TimeAgo date={date} />
+                                </Typography>
+                                <IconButton
+                                    onClick={fDelete}
+                                    className={`${classes.trash} delete`}
+                                    size="large">
+                                    <Delete />
+                                </IconButton>
+                            </div>
 
-                        <Typography
-                            component="div"
-                            ref={this.previewRef}
-                            className={`${classes.content} content ${
-                                this.state.isOverflowing && this.state.expanded ? 'expanded' : ''
-                            }`}>
-                            {this.renderContent()}
-                        </Typography>
+                            <Typography
+                                component="div"
+                                ref={this.previewRef}
+                                className={`${classes.content} content ${
+                                    this.state.isOverflowing && this.state.expanded
+                                        ? 'expanded'
+                                        : ''
+                                }`}>
+                                {this.renderContent()}
+                            </Typography>
+                        </div>
                     </div>
                     {this.state.isOverflowing && (
                         <Button
@@ -209,4 +218,4 @@ class Message extends React.PureComponent<IProps & WithStyles<typeof styles>, IS
     }
 }
 
-export default withStyles(styles, {withTheme: true})(Message);
+export default withStyles(Message, styles);
diff --git a/ui/src/message/Messages.tsx b/ui/src/message/Messages.tsx
index 120fe62..6486f89 100644
--- a/ui/src/message/Messages.tsx
+++ b/ui/src/message/Messages.tsx
@@ -1,9 +1,9 @@
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
 import React, {Component} from 'react';
 import {RouteComponentProps} from 'react-router';
 import DefaultPage from '../common/DefaultPage';
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material/Button';
 import Message from './Message';
 import {observer} from 'mobx-react';
 import {inject, Stores} from '../inject';
@@ -157,7 +157,7 @@ class Messages extends Component<IProps & Stores<'messagesStore' | 'appStore'>,
     }
 
     private label = (text: string) => (
-        <Grid item xs={12}>
+        <Grid size={{xs: 12}}>
             <Typography variant="caption" component="div" gutterBottom align="center">
                 {text}
             </Typography>
diff --git a/ui/src/plugin/PluginDetailView.tsx b/ui/src/plugin/PluginDetailView.tsx
index 7c83877..4349686 100644
--- a/ui/src/plugin/PluginDetailView.tsx
+++ b/ui/src/plugin/PluginDetailView.tsx
@@ -5,12 +5,12 @@ import {UnControlled as CodeMirror} from 'react-codemirror2';
 import 'codemirror/lib/codemirror.css';
 import 'codemirror/theme/material.css';
 import 'codemirror/mode/yaml/yaml';
-import Info from '@material-ui/icons/Info';
-import Build from '@material-ui/icons/Build';
-import Subject from '@material-ui/icons/Subject';
-import Refresh from '@material-ui/icons/Refresh';
-import Button from '@material-ui/core/Button';
-import Typography from '@material-ui/core/Typography';
+import Info from '@mui/icons-material/Info';
+import Build from '@mui/icons-material/Build';
+import Subject from '@mui/icons-material/Subject';
+import Refresh from '@mui/icons-material/Refresh';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
 import DefaultPage from '../common/DefaultPage';
 import * as config from '../config';
 import Container from '../common/Container';
diff --git a/ui/src/plugin/Plugins.tsx b/ui/src/plugin/Plugins.tsx
index 810253c..2535598 100644
--- a/ui/src/plugin/Plugins.tsx
+++ b/ui/src/plugin/Plugins.tsx
@@ -1,14 +1,14 @@
 import React, {Component, SFC} from 'react';
 import {Link} from 'react-router-dom';
-import Grid from '@material-ui/core/Grid';
-import Paper from '@material-ui/core/Paper';
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableHead from '@material-ui/core/TableHead';
-import TableRow from '@material-ui/core/TableRow';
-import Settings from '@material-ui/icons/Settings';
-import {Switch, Button} from '@material-ui/core';
+import Grid from '@mui/material/Grid';
+import Paper from '@mui/material/Paper';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Settings from '@mui/icons-material/Settings';
+import {Switch, Button} from '@mui/material';
 import DefaultPage from '../common/DefaultPage';
 import CopyableSecret from '../common/CopyableSecret';
 import {observer} from 'mobx-react';
@@ -26,7 +26,7 @@ class Plugins extends Component<Stores<'pluginStore'>> {
         const plugins = pluginStore.getItems();
         return (
             <DefaultPage title="Plugins" maxWidth={1000}>
-                <Grid item xs={12}>
+                <Grid size={{xs: 12}}>
                     <Paper elevation={6} style={{overflowX: 'auto'}}>
                         <Table id="plugin-table">
                             <TableHead>
diff --git a/ui/src/snack/SnackBarHandler.tsx b/ui/src/snack/SnackBarHandler.tsx
index 5d08fb9..df7d58b 100644
--- a/ui/src/snack/SnackBarHandler.tsx
+++ b/ui/src/snack/SnackBarHandler.tsx
@@ -1,6 +1,6 @@
-import IconButton from '@material-ui/core/IconButton';
-import Snackbar from '@material-ui/core/Snackbar';
-import Close from '@material-ui/icons/Close';
+import IconButton from '@mui/material/IconButton';
+import Snackbar from '@mui/material/Snackbar';
+import Close from '@mui/icons-material/Close';
 import React, {Component} from 'react';
 import {observable, reaction} from 'mobx';
 import {observer} from 'mobx-react';
@@ -35,17 +35,20 @@ class SnackBarHandler extends Component<Stores<'snackManager'>> {
                 open={this.open}
                 autoHideDuration={duration}
                 onClose={this.closeCurrentSnack}
-                onExited={this.openNextSnack}
                 message={<span id="message-id">{current}</span>}
                 action={
                     <IconButton
                         key="close"
                         aria-label="Close"
                         color="inherit"
-                        onClick={this.closeCurrentSnack}>
+                        onClick={this.closeCurrentSnack}
+                        size="large">
                         <Close />
                     </IconButton>
                 }
+                TransitionProps={{
+                    onExited: this.openNextSnack,
+                }}
             />
         );
     }
diff --git a/ui/src/user/AddEditUserDialog.tsx b/ui/src/user/AddEditUserDialog.tsx
index fdf93d8..87bf482 100644
--- a/ui/src/user/AddEditUserDialog.tsx
+++ b/ui/src/user/AddEditUserDialog.tsx
@@ -1,12 +1,12 @@
-import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Switch from '@material-ui/core/Switch';
-import TextField from '@material-ui/core/TextField';
-import Tooltip from '@material-ui/core/Tooltip';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
+import TextField from '@mui/material/TextField';
+import Tooltip from '@mui/material/Tooltip';
 import React, {ChangeEvent, Component} from 'react';
 
 interface IProps {
diff --git a/ui/src/user/Login.tsx b/ui/src/user/Login.tsx
index 1580bdb..3c767f2 100644
--- a/ui/src/user/Login.tsx
+++ b/ui/src/user/Login.tsx
@@ -1,6 +1,6 @@
-import Button from '@material-ui/core/Button';
-import Grid from '@material-ui/core/Grid';
-import TextField from '@material-ui/core/TextField';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
+import TextField from '@mui/material/TextField';
 import React, {Component, FormEvent} from 'react';
 import Container from '../common/Container';
 import DefaultPage from '../common/DefaultPage';
@@ -23,7 +23,7 @@ class Login extends Component<Stores<'currentUser'>> {
         const {username, password, registerDialog} = this;
         return (
             <DefaultPage title="Login" rightControl={this.registerButton()} maxWidth={250}>
-                <Grid item xs={12} style={{textAlign: 'center'}}>
+                <Grid size={{xs: 12}} style={{textAlign: 'center'}}>
                     <Container>
                         <form onSubmit={this.preventDefault} id="login-form">
                             <TextField
diff --git a/ui/src/user/Register.tsx b/ui/src/user/Register.tsx
index b5309f5..bd1589c 100644
--- a/ui/src/user/Register.tsx
+++ b/ui/src/user/Register.tsx
@@ -1,10 +1,10 @@
-import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import TextField from '@material-ui/core/TextField';
-import Tooltip from '@material-ui/core/Tooltip';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import TextField from '@mui/material/TextField';
+import Tooltip from '@mui/material/Tooltip';
 import React, {ChangeEvent, Component} from 'react';
 
 interface IProps {
diff --git a/ui/src/user/Users.tsx b/ui/src/user/Users.tsx
index af5f5fc..644dea9 100644
--- a/ui/src/user/Users.tsx
+++ b/ui/src/user/Users.tsx
@@ -1,31 +1,23 @@
-import Grid from '@material-ui/core/Grid';
-import IconButton from '@material-ui/core/IconButton';
-import Paper from '@material-ui/core/Paper';
-import {withStyles, WithStyles} from '@material-ui/core/styles';
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableHead from '@material-ui/core/TableHead';
-import TableRow from '@material-ui/core/TableRow';
-import Delete from '@material-ui/icons/Delete';
-import Edit from '@material-ui/icons/Edit';
+import Grid from '@mui/material/Grid';
+import IconButton from '@mui/material/IconButton';
+import Paper from '@mui/material/Paper';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Delete from '@mui/icons-material/Delete';
+import Edit from '@mui/icons-material/Edit';
 import React, {Component, SFC} from 'react';
 import ConfirmDialog from '../common/ConfirmDialog';
 import DefaultPage from '../common/DefaultPage';
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material/Button';
 import AddEditDialog from './AddEditUserDialog';
 import {observer} from 'mobx-react';
 import {observable} from 'mobx';
 import {inject, Stores} from '../inject';
 import {IUser} from '../types';
 
-const styles = () => ({
-    wrapper: {
-        margin: '0 auto',
-        maxWidth: 700,
-    },
-});
-
 interface IRowProps {
     name: string;
     admin: boolean;
@@ -38,10 +30,10 @@ const UserRow: SFC<IRowProps> = ({name, admin, fDelete, fEdit}) => (
         <TableCell>{name}</TableCell>
         <TableCell>{admin ? 'Yes' : 'No'}</TableCell>
         <TableCell align="right" padding="none">
-            <IconButton onClick={fEdit} className="edit">
+            <IconButton onClick={fEdit} className="edit" size="large">
                 <Edit />
             </IconButton>
-            <IconButton onClick={fDelete} className="delete">
+            <IconButton onClick={fDelete} className="delete" size="large">
                 <Delete />
             </IconButton>
         </TableCell>
@@ -49,7 +41,7 @@ const UserRow: SFC<IRowProps> = ({name, admin, fDelete, fEdit}) => (
 );
 
 @observer
-class Users extends Component<WithStyles<'wrapper'> & Stores<'userStore'>> {
+class Users extends Component<Stores<'userStore'>> {
     @observable
     private createDialog = false;
     @observable
@@ -79,7 +71,7 @@ class Users extends Component<WithStyles<'wrapper'> & Stores<'userStore'>> {
                         Create User
                     </Button>
                 }>
-                <Grid item xs={12}>
+                <Grid size={{xs: 12}}>
                     <Paper elevation={6} style={{overflowX: 'auto'}}>
                         <Table id="user-table">
                             <TableHead>
@@ -131,4 +123,4 @@ class Users extends Component<WithStyles<'wrapper'> & Stores<'userStore'>> {
     }
 }
 
-export default withStyles(styles)(inject('userStore')(Users));
+export default inject('userStore')(Users);
diff --git a/ui/tsconfig.json b/ui/tsconfig.json
index d2808b6..892284f 100644
--- a/ui/tsconfig.json
+++ b/ui/tsconfig.json
@@ -14,7 +14,6 @@
     "noImplicitThis": true,
     "noImplicitAny": true,
     "strictNullChecks": true,
-    "suppressImplicitAnyIndexErrors": true,
     "noUnusedLocals": true,
     "allowSyntheticDefaultImports": true,
     "experimentalDecorators": true,
@@ -25,7 +24,6 @@
     "noEmit": true,
     "module": "esnext",
     "resolveJsonModule": true,
-    "keyofStringsOnly": true,
     "noFallthroughCasesInSwitch": true
   },
   "exclude": [
diff --git a/ui/yarn.lock b/ui/yarn.lock
index fac81a5..70c5dfb 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -170,7 +170,7 @@
   dependencies:
     "@babel/types" "^7.16.0"
 
-"@babel/helper-module-imports@^7.27.1":
+"@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.27.1":
   version "7.27.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz#7ef769a323e2655e126673bb6d2d6913bbead204"
   integrity sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==
@@ -314,13 +314,18 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.27.1"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
   version "7.16.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.3.tgz#b86f0db02a04187a3c17caa77de69840165d42d5"
   integrity sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.27.6":
+  version "7.28.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.28.2.tgz#2ae5a9d51cc583bd1f5673b3bb70d6d819682473"
+  integrity sha512-KHp2IflsnGywDjBWDkR9iEqiWSpc8GIi0lgTT3mOElT0PP1tG26P4tmFI2YvAdzgq9RGyoHZQEIEdZy6Ec5xCA==
+
 "@babel/template@^7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.0.tgz#d16a35ebf4cd74e202083356fab21dd89363ddd6"
@@ -383,10 +388,112 @@
     "@babel/helper-string-parser" "^7.27.1"
     "@babel/helper-validator-identifier" "^7.27.1"
 
-"@emotion/hash@^0.8.0":
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
-  integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
+"@emotion/babel-plugin@^11.13.5":
+  version "11.13.5"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz#eab8d65dbded74e0ecfd28dc218e75607c4e7bc0"
+  integrity sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/runtime" "^7.18.3"
+    "@emotion/hash" "^0.9.2"
+    "@emotion/memoize" "^0.9.0"
+    "@emotion/serialize" "^1.3.3"
+    babel-plugin-macros "^3.1.0"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "4.2.0"
+
+"@emotion/cache@*", "@emotion/cache@^11.14.0":
+  version "11.14.0"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.14.0.tgz#ee44b26986eeb93c8be82bb92f1f7a9b21b2ed76"
+  integrity sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==
+  dependencies:
+    "@emotion/memoize" "^0.9.0"
+    "@emotion/sheet" "^1.4.0"
+    "@emotion/utils" "^1.4.2"
+    "@emotion/weak-memoize" "^0.4.0"
+    stylis "4.2.0"
+
+"@emotion/hash@^0.9.2":
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.2.tgz#ff9221b9f58b4dfe61e619a7788734bd63f6898b"
+  integrity sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==
+
+"@emotion/is-prop-valid@^1.3.0":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.3.1.tgz#8d5cf1132f836d7adbe42cf0b49df7816fc88240"
+  integrity sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==
+  dependencies:
+    "@emotion/memoize" "^0.9.0"
+
+"@emotion/memoize@^0.9.0":
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.9.0.tgz#745969d649977776b43fc7648c556aaa462b4102"
+  integrity sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==
+
+"@emotion/react@^11.14.0":
+  version "11.14.0"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.14.0.tgz#cfaae35ebc67dd9ef4ea2e9acc6cd29e157dd05d"
+  integrity sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    "@emotion/babel-plugin" "^11.13.5"
+    "@emotion/cache" "^11.14.0"
+    "@emotion/serialize" "^1.3.3"
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.2.0"
+    "@emotion/utils" "^1.4.2"
+    "@emotion/weak-memoize" "^0.4.0"
+    hoist-non-react-statics "^3.3.1"
+
+"@emotion/serialize@*", "@emotion/serialize@^1.3.3":
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.3.3.tgz#d291531005f17d704d0463a032fe679f376509e8"
+  integrity sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==
+  dependencies:
+    "@emotion/hash" "^0.9.2"
+    "@emotion/memoize" "^0.9.0"
+    "@emotion/unitless" "^0.10.0"
+    "@emotion/utils" "^1.4.2"
+    csstype "^3.0.2"
+
+"@emotion/sheet@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.4.0.tgz#c9299c34d248bc26e82563735f78953d2efca83c"
+  integrity sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==
+
+"@emotion/styled@^11.14.1":
+  version "11.14.1"
+  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.14.1.tgz#8c34bed2948e83e1980370305614c20955aacd1c"
+  integrity sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    "@emotion/babel-plugin" "^11.13.5"
+    "@emotion/is-prop-valid" "^1.3.0"
+    "@emotion/serialize" "^1.3.3"
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.2.0"
+    "@emotion/utils" "^1.4.2"
+
+"@emotion/unitless@^0.10.0":
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.10.0.tgz#2af2f7c7e5150f497bdabd848ce7b218a27cf745"
+  integrity sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==
+
+"@emotion/use-insertion-effect-with-fallbacks@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz#8a8cb77b590e09affb960f4ff1e9a89e532738bf"
+  integrity sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==
+
+"@emotion/utils@*", "@emotion/utils@^1.4.2":
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.4.2.tgz#6df6c45881fcb1c412d6688a311a98b7f59c1b52"
+  integrity sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==
+
+"@emotion/weak-memoize@^0.4.0":
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz#5e13fac887f08c44f76b0ccaf3370eb00fec9bb6"
+  integrity sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==
 
 "@esbuild/aix-ppc64@0.25.8":
   version "0.25.8"
@@ -556,76 +663,89 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
-"@material-ui/core@^4.11.4":
-  version "4.12.3"
-  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.3.tgz#80d665caf0f1f034e52355c5450c0e38b099d3ca"
-  integrity sha512-sdpgI/PL56QVsEJldwEe4FFaFTLUqN+rd7sSZiRCdx2E/C7z5yK0y/khAWVBH24tXwto7I1hCzNWfJGZIYJKnw==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-    "@material-ui/styles" "^4.11.4"
-    "@material-ui/system" "^4.12.1"
-    "@material-ui/types" "5.1.0"
-    "@material-ui/utils" "^4.11.2"
-    "@types/react-transition-group" "^4.2.0"
-    clsx "^1.0.4"
-    hoist-non-react-statics "^3.3.2"
-    popper.js "1.16.1-lts"
-    prop-types "^15.7.2"
-    react-is "^16.8.0 || ^17.0.0"
-    react-transition-group "^4.4.0"
+"@mui/core-downloads-tracker@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-7.2.0.tgz#af74715885a7686cbf50806ad36691e710b10dbc"
+  integrity sha512-d49s7kEgI5iX40xb2YPazANvo7Bx0BLg/MNRwv+7BVpZUzXj1DaVCKlQTDex3gy/0jsCb4w7AY2uH4t4AJvSog==
 
-"@material-ui/icons@^4.9.1":
-  version "4.11.2"
-  resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.11.2.tgz#b3a7353266519cd743b6461ae9fdfcb1b25eb4c5"
-  integrity sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==
+"@mui/icons-material@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-7.2.0.tgz#e01de90ecf3cdccee7f8e88e7e033df5e3f050e1"
+  integrity sha512-gRCspp3pfjHQyTmSOmYw7kUQTd9Udpdan4R8EnZvqPeoAtHnPzkvjBrBqzKaoAbbBp5bGF7BcD18zZJh4nwu0A==
   dependencies:
-    "@babel/runtime" "^7.4.4"
+    "@babel/runtime" "^7.27.6"
 
-"@material-ui/styles@^4.11.4":
-  version "4.11.4"
-  resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.4.tgz#eb9dfccfcc2d208243d986457dff025497afa00d"
-  integrity sha512-KNTIZcnj/zprG5LW0Sao7zw+yG3O35pviHzejMdcSGCdWbiO8qzRgOYL8JAxAsWBKOKYwVZxXtHWaB5T2Kvxew==
+"@mui/material@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@mui/material/-/material-7.2.0.tgz#957da3b927c67e5a36a026658ffb40c10a3b6b5f"
+  integrity sha512-NTuyFNen5Z2QY+I242MDZzXnFIVIR6ERxo7vntFi9K1wCgSwvIl0HcAO2OOydKqqKApE6omRiYhpny1ZhGuH7Q==
   dependencies:
-    "@babel/runtime" "^7.4.4"
-    "@emotion/hash" "^0.8.0"
-    "@material-ui/types" "5.1.0"
-    "@material-ui/utils" "^4.11.2"
-    clsx "^1.0.4"
-    csstype "^2.5.2"
-    hoist-non-react-statics "^3.3.2"
-    jss "^10.5.1"
-    jss-plugin-camel-case "^10.5.1"
-    jss-plugin-default-unit "^10.5.1"
-    jss-plugin-global "^10.5.1"
-    jss-plugin-nested "^10.5.1"
-    jss-plugin-props-sort "^10.5.1"
-    jss-plugin-rule-value-function "^10.5.1"
-    jss-plugin-vendor-prefixer "^10.5.1"
-    prop-types "^15.7.2"
+    "@babel/runtime" "^7.27.6"
+    "@mui/core-downloads-tracker" "^7.2.0"
+    "@mui/system" "^7.2.0"
+    "@mui/types" "^7.4.4"
+    "@mui/utils" "^7.2.0"
+    "@popperjs/core" "^2.11.8"
+    "@types/react-transition-group" "^4.4.12"
+    clsx "^2.1.1"
+    csstype "^3.1.3"
+    prop-types "^15.8.1"
+    react-is "^19.1.0"
+    react-transition-group "^4.4.5"
 
-"@material-ui/system@^4.12.1":
-  version "4.12.1"
-  resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.12.1.tgz#2dd96c243f8c0a331b2bb6d46efd7771a399707c"
-  integrity sha512-lUdzs4q9kEXZGhbN7BptyiS1rLNHe6kG9o8Y307HCvF4sQxbCgpL2qi+gUk+yI8a2DNk48gISEQxoxpgph0xIw==
+"@mui/private-theming@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-7.2.0.tgz#8d601e0949c81598da4621559181f1ac8231efc5"
+  integrity sha512-y6N1Yt3T5RMxVFnCh6+zeSWBuQdNDm5/UlM0EAYZzZR/1u+XKJWYQmbpx4e+F+1EpkYi3Nk8KhPiQDi83M3zIw==
   dependencies:
-    "@babel/runtime" "^7.4.4"
-    "@material-ui/utils" "^4.11.2"
-    csstype "^2.5.2"
-    prop-types "^15.7.2"
+    "@babel/runtime" "^7.27.6"
+    "@mui/utils" "^7.2.0"
+    prop-types "^15.8.1"
 
-"@material-ui/types@5.1.0":
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2"
-  integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==
-
-"@material-ui/utils@^4.11.2":
-  version "4.11.2"
-  resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.2.tgz#f1aefa7e7dff2ebcb97d31de51aecab1bb57540a"
-  integrity sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==
+"@mui/styled-engine@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-7.2.0.tgz#98bf5abe1f80adabd66d4f9c13ea9e4a2616908e"
+  integrity sha512-yq08xynbrNYcB1nBcW9Fn8/h/iniM3ewRguGJXPIAbHvxEF7Pz95kbEEOAAhwzxMX4okhzvHmk0DFuC5ayvgIQ==
   dependencies:
-    "@babel/runtime" "^7.4.4"
-    prop-types "^15.7.2"
-    react-is "^16.8.0 || ^17.0.0"
+    "@babel/runtime" "^7.27.6"
+    "@emotion/cache" "^11.14.0"
+    "@emotion/serialize" "^1.3.3"
+    "@emotion/sheet" "^1.4.0"
+    csstype "^3.1.3"
+    prop-types "^15.8.1"
+
+"@mui/system@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-7.2.0.tgz#b13f99cb5937912228f29175d6ea67857d626d70"
+  integrity sha512-PG7cm/WluU6RAs+gNND2R9vDwNh+ERWxPkqTaiXQJGIFAyJ+VxhyKfzpdZNk0z0XdmBxxi9KhFOpgxjehf/O0A==
+  dependencies:
+    "@babel/runtime" "^7.27.6"
+    "@mui/private-theming" "^7.2.0"
+    "@mui/styled-engine" "^7.2.0"
+    "@mui/types" "^7.4.4"
+    "@mui/utils" "^7.2.0"
+    clsx "^2.1.1"
+    csstype "^3.1.3"
+    prop-types "^15.8.1"
+
+"@mui/types@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.4.4.tgz#0c5cd56905231e27096b41d096f1c948c26bdd5d"
+  integrity sha512-p63yhbX52MO/ajXC7hDHJA5yjzJekvWD3q4YDLl1rSg+OXLczMYPvTuSuviPRCgRX8+E42RXz1D/dz9SxPSlWg==
+  dependencies:
+    "@babel/runtime" "^7.27.6"
+
+"@mui/utils@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-7.2.0.tgz#31062697b41aa8ea8ef04e3d3fadca1dec3e1de1"
+  integrity sha512-O0i1GQL6MDzhKdy9iAu5Yr0Sz1wZjROH1o3aoztuivdCXqEeQYnEjTDiRLGuFxI9zrUbTHBwobMyQH5sNtyacw==
+  dependencies:
+    "@babel/runtime" "^7.27.6"
+    "@mui/types" "^7.4.4"
+    "@types/prop-types" "^15.7.15"
+    clsx "^2.1.1"
+    prop-types "^15.8.1"
+    react-is "^19.1.0"
 
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
@@ -648,6 +768,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@popperjs/core@^2.11.8":
+  version "2.11.8"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
+  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
+
 "@rolldown/pluginutils@1.0.0-beta.27":
   version "1.0.0-beta.27"
   resolved "https://registry.yarnpkg.com/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz#47d2bf4cef6d470b22f5831b420f8964e0bf755f"
@@ -915,11 +1040,21 @@
   resolved "https://registry.yarnpkg.com/@types/notifyjs/-/notifyjs-3.0.3.tgz#b0de6a646f4dd71ae45d2c2bbac886a8a6ac86ba"
   integrity sha512-VAHDjZFypySOF1h+XzfYPsAj7/N2d1Y6VZw3/0eHVQ2uvGbSdsprgN7AyRC49pDIqu7D/6/bFGFMAt6/TO9NxA==
 
+"@types/parse-json@^4.0.0":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.2.tgz#5950e50960793055845e956c427fc2b0d70c5239"
+  integrity sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==
+
 "@types/prop-types@*":
   version "15.7.4"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
   integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
 
+"@types/prop-types@^15.7.15":
+  version "15.7.15"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.15.tgz#e6e5a86d602beaca71ce5163fadf5f95d70931c7"
+  integrity sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==
+
 "@types/puppeteer@^5.4.6":
   version "5.4.6"
   resolved "https://registry.yarnpkg.com/@types/puppeteer/-/puppeteer-5.4.6.tgz#afc438e41dcbc27ca1ba0235ea464a372db2b21c"
@@ -958,12 +1093,10 @@
     "@types/history" "*"
     "@types/react" "*"
 
-"@types/react-transition-group@^4.2.0":
-  version "4.4.4"
-  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e"
-  integrity sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==
-  dependencies:
-    "@types/react" "*"
+"@types/react-transition-group@^4.4.12":
+  version "4.4.12"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.12.tgz#b5d76568485b02a307238270bfe96cb51ee2a044"
+  integrity sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==
 
 "@types/react@*":
   version "17.0.37"
@@ -1252,6 +1385,15 @@ axios@^0.21.1:
   dependencies:
     follow-redirects "^1.14.0"
 
+babel-plugin-macros@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz#9ef6dc74deb934b4db344dc973ee851d148c50c1"
+  integrity sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    cosmiconfig "^7.0.0"
+    resolve "^1.19.0"
+
 bail@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.5.tgz#b6fa133404a392cbc1f8c4bf63f5953351e7a776"
@@ -1338,6 +1480,11 @@ call-bind@^1.0.0, call-bind@^1.0.2:
     function-bind "^1.1.1"
     get-intrinsic "^1.0.2"
 
+callsites@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
+  integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
+
 caniuse-lite@^1.0.30001280:
   version "1.0.30001284"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001284.tgz#d3653929ded898cd0c1f09a56fd8ca6952df4fca"
@@ -1410,10 +1557,10 @@ clean-regexp@^1.0.0:
   dependencies:
     escape-string-regexp "^1.0.5"
 
-clsx@^1.0.4:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
-  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+clsx@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
 
 codemirror@^5.61.1:
   version "5.64.0"
@@ -1442,6 +1589,11 @@ concat-map@0.0.1:
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
 
+convert-source-map@^1.5.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
+  integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
+
 convert-source-map@^1.7.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
@@ -1459,6 +1611,17 @@ core-js@^1.0.0:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
   integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=
 
+cosmiconfig@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6"
+  integrity sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.2.1"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.10.0"
+
 cross-fetch@3.1.5:
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.5.tgz#e1389f44d9e7ba767907f7af8454787952ab534f"
@@ -1466,24 +1629,16 @@ cross-fetch@3.1.5:
   dependencies:
     node-fetch "2.6.7"
 
-css-vendor@^2.0.8:
-  version "2.0.8"
-  resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-2.0.8.tgz#e47f91d3bd3117d49180a3c935e62e3d9f7f449d"
-  integrity sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==
-  dependencies:
-    "@babel/runtime" "^7.8.3"
-    is-in-browser "^1.0.2"
-
-csstype@^2.5.2:
-  version "2.6.19"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.19.tgz#feeb5aae89020bb389e1f63669a5ed490e391caa"
-  integrity sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ==
-
 csstype@^3.0.2:
   version "3.0.10"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5"
   integrity sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==
 
+csstype@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
+  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
+
 debug@4, debug@^4.0.0, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1:
   version "4.3.3"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.3.tgz#04266e0b70a98d4462e6e288e38259213332b664"
@@ -1964,6 +2119,11 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+find-root@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
+  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
+
 find-up@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
@@ -2009,6 +2169,11 @@ function-bind@^1.1.1:
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
   integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
 
+function-bind@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
+
 function.prototype.name@^1.1.2, function.prototype.name@^1.1.3:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.5.tgz#cce0505fe1ffb80503e6f9e46cc64e46a12a9621"
@@ -2138,6 +2303,13 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+hasown@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003"
+  integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
+  dependencies:
+    function-bind "^1.1.2"
+
 history@^4.9.0:
   version "4.10.1"
   resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
@@ -2150,7 +2322,7 @@ history@^4.9.0:
     tiny-warning "^1.0.0"
     value-equal "^1.0.1"
 
-hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.1:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -2170,11 +2342,6 @@ https-proxy-agent@5.0.1:
     agent-base "6"
     debug "4"
 
-hyphenate-style-name@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
-  integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==
-
 iconv-lite@^0.6.2:
   version "0.6.3"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
@@ -2192,6 +2359,14 @@ ignore@^5.1.4, ignore@^5.1.8:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.9.tgz#9ec1a5cbe8e1446ec60d4420060d43aa6e7382fb"
   integrity sha512-2zeMQpbKz5dhZ9IwL0gbxSW5w0NK/MSAMtNuhgIHEPmaU3vPdKPL0UdvUCXs5SS4JAwsBxysK5sFMW8ocFiVjQ==
 
+import-fresh@^3.2.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.1.tgz#9cecb56503c0ada1f2741dbbd6546e4b13b57ccf"
+  integrity sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.0.0"
+
 import-modules@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-modules/-/import-modules-2.1.0.tgz#abe7df297cb6c1f19b57246eb8b8bd9664b6d8c2"
@@ -2267,6 +2442,13 @@ is-callable@^1.1.4, is-callable@^1.2.4:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.4.tgz#47301d58dd0259407865547853df6d61fe471945"
   integrity sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==
 
+is-core-module@^2.16.0:
+  version "2.16.1"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.16.1.tgz#2a98801a849f43e2add644fbb6bc6229b19a4ef4"
+  integrity sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==
+  dependencies:
+    hasown "^2.0.2"
+
 is-core-module@^2.2.0, is-core-module@^2.8.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.0.tgz#0321336c3d0925e497fd97f5d95cb114a5ccd548"
@@ -2303,11 +2485,6 @@ is-hexadecimal@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7"
   integrity sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==
 
-is-in-browser@^1.0.2, is-in-browser@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.1.3.tgz#56ff4db683a078c6082eb95dad7dc62e1d04f835"
-  integrity sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=
-
 is-negative-zero@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.1.tgz#3de746c18dda2319241a53675908d8f766f11c24"
@@ -2442,76 +2619,6 @@ json5@^2.2.3:
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
 
-jss-plugin-camel-case@^10.5.1:
-  version "10.8.2"
-  resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.8.2.tgz#8d7f915c8115afaff8cbde08faf610ec9892fba6"
-  integrity sha512-2INyxR+1UdNuKf4v9It3tNfPvf7IPrtkiwzofeKuMd5D58/dxDJVUQYRVg/n460rTlHUfsEQx43hDrcxi9dSPA==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    hyphenate-style-name "^1.0.3"
-    jss "10.8.2"
-
-jss-plugin-default-unit@^10.5.1:
-  version "10.8.2"
-  resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.8.2.tgz#c66f12e02e0815d911b85c02c2a979ee7b4ce69a"
-  integrity sha512-UZ7cwT9NFYSG+SEy7noRU50s4zifulFdjkUNKE+u6mW7vFP960+RglWjTgMfh79G6OENZmaYnjHV/gcKV4nSxg==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    jss "10.8.2"
-
-jss-plugin-global@^10.5.1:
-  version "10.8.2"
-  resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.8.2.tgz#1a35632a693cf50113bcc5ffe6b51969df79c4ec"
-  integrity sha512-UaYMSPsYZ7s/ECGoj4KoHC2jwQd5iQ7K+FFGnCAILdQrv7hPmvM2Ydg45ThT/sH46DqktCRV2SqjRuxeBH8nRA==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    jss "10.8.2"
-
-jss-plugin-nested@^10.5.1:
-  version "10.8.2"
-  resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.8.2.tgz#79f3c7f75ea6a36ae72fe52e777035bb24d230c7"
-  integrity sha512-acRvuPJOb930fuYmhkJaa994EADpt8TxI63Iyg96C8FJ9T2xRyU5T6R1IYKRwUiqZo+2Sr7fdGzRTDD4uBZaMA==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    jss "10.8.2"
-    tiny-warning "^1.0.2"
-
-jss-plugin-props-sort@^10.5.1:
-  version "10.8.2"
-  resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.8.2.tgz#e25a7471868652c394562b6dc5433dcaea7dff6f"
-  integrity sha512-wqdcjayKRWBZnNpLUrXvsWqh+5J5YToAQ+8HNBNw0kZxVvCDwzhK2Nx6AKs7p+5/MbAh2PLgNW5Ym/ysbVAuqQ==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    jss "10.8.2"
-
-jss-plugin-rule-value-function@^10.5.1:
-  version "10.8.2"
-  resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.8.2.tgz#55354b55f1b2968a15976729968f767f02d64049"
-  integrity sha512-bW0EKAs+0HXpb6BKJhrn94IDdiWb0CnSluTkh0rGEgyzY/nmD1uV/Wf6KGlesGOZ9gmJzQy+9FFdxIUID1c9Ug==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    jss "10.8.2"
-    tiny-warning "^1.0.2"
-
-jss-plugin-vendor-prefixer@^10.5.1:
-  version "10.8.2"
-  resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.8.2.tgz#ebb4a482642f34091e454901e21176441dd5f475"
-  integrity sha512-DeGv18QsSiYLSVIEB2+l0af6OToUe0JB+trpzUxyqD2QRC/5AzzDrCrYffO5AHZ81QbffYvSN/pkfZaTWpRXlg==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    css-vendor "^2.0.8"
-    jss "10.8.2"
-
-jss@10.8.2, jss@^10.5.1:
-  version "10.8.2"
-  resolved "https://registry.yarnpkg.com/jss/-/jss-10.8.2.tgz#4b2a30b094b924629a64928236017a52c7c97505"
-  integrity sha512-FkoUNxI329CKQ9OQC8L72MBF9KPf5q8mIupAJ5twU7G7XREW7ahb+7jFfrjZ4iy1qvhx1HwIWUIvkZBDnKkEdQ==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    csstype "^3.0.2"
-    is-in-browser "^1.1.3"
-    tiny-warning "^1.0.2"
-
 "jsx-ast-utils@^2.4.1 || ^3.0.0":
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.2.1.tgz#720b97bfe7d901b927d87c3773637ae8ea48781b"
@@ -3011,6 +3118,13 @@ p-try@^2.0.0:
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
   integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
 
+parent-module@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
+  integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
+  dependencies:
+    callsites "^3.0.0"
+
 parse-entities@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-2.0.0.tgz#53c6eb5b9314a1f4ec99fa0fdf7ce01ecda0cbe8"
@@ -3048,7 +3162,7 @@ path-is-absolute@^1.0.0:
   resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
   integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
 
-path-parse@^1.0.6:
+path-parse@^1.0.6, path-parse@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
@@ -3112,11 +3226,6 @@ pluralize@^8.0.0:
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-8.0.0.tgz#1a6fa16a38d12a1901e0320fa017051c539ce3b1"
   integrity sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==
 
-popper.js@1.16.1-lts:
-  version "1.16.1-lts"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05"
-  integrity sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==
-
 postcss@^8.5.6:
   version "8.5.6"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.5.6.tgz#2825006615a619b4f62a9e7426cc120b349a8f3c"
@@ -3161,6 +3270,15 @@ prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
+prop-types@^15.8.1:
+  version "15.8.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
 property-information@^5.3.0:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.6.0.tgz#61675545fb23002f245c6540ec46077d4da3ed69"
@@ -3233,11 +3351,16 @@ react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-i
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-"react-is@^16.8.0 || ^17.0.0", react-is@^17.0.0:
+react-is@^17.0.0:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-is@^19.1.0:
+  version "19.1.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-19.1.1.tgz#038ebe313cf18e1fd1235d51c87360eb87f7c36a"
+  integrity sha512-tr41fA15Vn8p4X9ntI+yCyeGSf1TlYaY5vlTZfQmeLBrFo3psOPX6HhTDnFNL9uj3EhP0KAQ80cugCl4b4BERA==
+
 react-markdown@^6.0.2:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-6.0.3.tgz#625ec767fa321d91801129387e7d31ee0cb99254"
@@ -3316,24 +3439,23 @@ react-timeago@^6.2.1:
   resolved "https://registry.yarnpkg.com/react-timeago/-/react-timeago-6.2.1.tgz#f19716811156617ceb9c9f9a44315d85197c7fba"
   integrity sha512-b9EObWO8wy4qwfOzj+g/RQZRrPvtMv1Pz12FCdAWKWCXbDGt0rZLyiyTGEr0Lh1O8w5xa48CtRpl3LI+CtGCyw==
 
-react-transition-group@^4.4.0:
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
-  integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
+react-transition-group@^4.4.5:
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
+  integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
   dependencies:
     "@babel/runtime" "^7.5.5"
     dom-helpers "^5.0.1"
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react@^16.4.2:
-  version "16.14.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
-  integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
+react@^17.0.0:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
+  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    prop-types "^15.6.2"
 
 read-pkg-up@^7.0.1:
   version "7.0.1"
@@ -3428,6 +3550,11 @@ reserved-words@^0.1.2:
   resolved "https://registry.yarnpkg.com/reserved-words/-/reserved-words-0.1.2.tgz#00a0940f98cd501aeaaac316411d9adc52b31ab1"
   integrity sha1-AKCUD5jNUBrqqsMWQR2a3FKzGrE=
 
+resolve-from@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
+  integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
+
 resolve-pathname@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
@@ -3441,6 +3568,15 @@ resolve@^1.10.0, resolve@^1.20.0:
     is-core-module "^2.2.0"
     path-parse "^1.0.6"
 
+resolve@^1.19.0:
+  version "1.22.10"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.10.tgz#b663e83ffb09bbf2386944736baae803029b8b39"
+  integrity sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==
+  dependencies:
+    is-core-module "^2.16.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 resolve@^2.0.0-next.3:
   version "2.0.0-next.3"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.3.tgz#d41016293d4a8586a39ca5d9b5f15cbea1f55e46"
@@ -3585,7 +3721,7 @@ source-map-js@^1.2.1:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
   integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
 
-source-map@^0.5.0:
+source-map@^0.5.0, source-map@^0.5.7:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
@@ -3687,6 +3823,11 @@ style-to-object@^0.3.0:
   dependencies:
     inline-style-parser "0.1.1"
 
+stylis@4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51"
+  integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==
+
 supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -3694,6 +3835,11 @@ supports-color@^5.3.0:
   dependencies:
     has-flag "^3.0.0"
 
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
 tar-fs@2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.1.1.tgz#489a15ab85f1f0befabb370b7de4f9eb5cbe8784"
@@ -3725,7 +3871,7 @@ tiny-invariant@^1.0.2:
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.2.0.tgz#a1141f86b672a9148c72e978a19a73b9b94a15a9"
   integrity sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg==
 
-tiny-warning@^1.0.0, tiny-warning@^1.0.2, tiny-warning@^1.0.3:
+tiny-warning@^1.0.0, tiny-warning@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
@@ -3805,6 +3951,15 @@ tslib@^1.8.1, tslib@^1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
+tss-react@^4.9.19:
+  version "4.9.19"
+  resolved "https://registry.yarnpkg.com/tss-react/-/tss-react-4.9.19.tgz#01ab1e82110deacead0ed93788a30d8ca91b22b6"
+  integrity sha512-mmeec1wmLJKUpbaEfsQIOgk0ZtaVBt/oMbiWUFzCnxNm7vb6sDEA3ez/5/ll1eg74nrOcy9BjA+qEuF7nUV0bA==
+  dependencies:
+    "@emotion/cache" "*"
+    "@emotion/serialize" "*"
+    "@emotion/utils" "*"
+
 tsutils@^3.21.0:
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
@@ -4082,6 +4237,11 @@ yallist@^4.0.0:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
+yaml@^1.10.0:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
+  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
+
 yauzl@^2.10.0:
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"