diff --git a/cypress/integration/docs.spec.ts b/cypress/integration/docs.spec.ts
index 4a7147ae..9bdf0ec2 100644
--- a/cypress/integration/docs.spec.ts
+++ b/cypress/integration/docs.spec.ts
@@ -1,4 +1,5 @@
 /// <reference types="cypress" />
+export { };
 
 describe("Documentation Viewer", () => {
   beforeEach(() => {
@@ -11,6 +12,24 @@ describe("Documentation Viewer", () => {
     cy.contains(label).should("be.visible");
   };
 
+  /**
+   * Assert that the header bar does not overlap the sidebar.
+   * Catches CSS box-model regressions (e.g. content-box vs border-box).
+   */
+  const assertNoHeaderSidebarOverlap = () => {
+    cy.get('[data-testid="sidebar"]').then(($sidebar) => {
+      const sidebarRight = $sidebar[0].getBoundingClientRect().right;
+      cy.get("header").then(($header) => {
+        const headerLeft = $header[0].getBoundingClientRect().left;
+        // eslint-disable-next-line jest/valid-expect
+        expect(headerLeft).to.be.at.least(
+          sidebarRight - 1,
+          "Header should not overlap sidebar"
+        );
+      });
+    });
+  };
+
   describe("Package Mode", () => {
     beforeEach(() => {
       // Load the package-specific json
@@ -36,6 +55,9 @@ describe("Documentation Viewer", () => {
       cy.contains(" -> string").should("be.visible");
       cy.contains("bar a/A").should("be.visible");
       cy.contains(" -> A").should("be.visible");
+
+      // Layout: header blur must not overlap the sidebar
+      assertNoHeaderSidebarOverlap();
     });
 
     it("navigates to class A", () => {
@@ -44,11 +66,12 @@ describe("Documentation Viewer", () => {
       cy.contains("bar").should("be.visible");
 
       // Click on 'A' explicitly within the Classes section.
+      // scrollIntoView first since the sidebar can overlap the link
       cy.contains("h3", "Classes")
         .parent()
         .parent()
         .within(() => {
-          cy.contains("a", /^A$/).click();
+          cy.contains("a", /^A$/).scrollIntoView().click({ force: true });
         });
       cy.contains("Class A").should("be.visible");
 
diff --git a/cypress/integration/todo.spec.ts b/cypress/integration/todo.spec.ts
index 64063d82..178b6dde 100644
--- a/cypress/integration/todo.spec.ts
+++ b/cypress/integration/todo.spec.ts
@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 /// <reference types="cypress" />
+export { };
 
 // Welcome to Cypress!
 //
diff --git a/package.json b/package.json
index 1112ab9d..a49e520b 100644
--- a/package.json
+++ b/package.json
@@ -6,8 +6,8 @@
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
     "@fontsource/roboto": "^5.0.15",
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.9.1",
+    "@mui/icons-material": "5.16.14",
+    "@mui/material": "5.16.14",
     "@reduxjs/toolkit": "^1.4.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.0.4",
@@ -27,6 +27,7 @@
     "react-router-hash-link": "^2.2.2",
     "react-scripts": "^5.0.1",
     "redux": "^4.0.5",
+    "tss-react": "^4.9.20",
     "typescript": "^4.9.5"
   },
   "scripts": {
diff --git a/src/@types/emotion.d.ts b/src/@types/emotion.d.ts
index d2d842d7..e247e9c2 100644
--- a/src/@types/emotion.d.ts
+++ b/src/@types/emotion.d.ts
@@ -2,7 +2,7 @@
 // Use of this source code is governed by an MIT-style license that can be
 // found in the LICENSE file.
 
-import { Theme as MTheme } from "@material-ui/core/styles";
+import { Theme as MTheme } from "@mui/material/styles";
 
 declare module "@emotion/react" {
   // eslint-disable-next-line @typescript-eslint/no-empty-interface
diff --git a/src/@types/theme.d.ts b/src/@types/theme.d.ts
index ad08d5d9..30e18a0d 100644
--- a/src/@types/theme.d.ts
+++ b/src/@types/theme.d.ts
@@ -2,7 +2,7 @@
 // Use of this source code is governed by an MIT-style license that can be
 // found in the LICENSE file.
 
-export declare module "@material-ui/core/styles" {
+export declare module "@mui/material/styles" {
   interface Theme {
     layout: {
       sidebarWidth: string | number;
diff --git a/src/App.tsx b/src/App.tsx
index 344aed22..75f88cc8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,18 +3,19 @@
 // found in the LICENSE file.
 
 import styled from "@emotion/styled";
-import { CircularProgress } from "@material-ui/core";
-import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
+import { CircularProgress } from "@mui/material";
+import { Theme } from "@mui/material/styles";
 import { AnyAction, ThunkDispatch } from "@reduxjs/toolkit";
 import React, { Component, useEffect } from "react";
 import { connect } from "react-redux";
 import {
-  BrowserRouter,
-  Redirect,
-  Route,
-  RouteComponentProps,
-  useLocation,
+    BrowserRouter,
+    Redirect,
+    Route,
+    RouteComponentProps,
+    useLocation,
 } from "react-router-dom";
+import { makeStyles } from "tss-react/mui";
 import { length, sideBarTheme, theme } from "./assets/theme";
 import "./assets/typography.css";
 import ErrorBoundary from "./components/ErrorPage";
@@ -24,7 +25,7 @@ import { LibraryInfoParams } from "./components/main/LibraryInfoView";
 import WelcomeFolderPage from "./components/main/WelcomeFolderPage";
 import WelcomePage from "./components/main/WelcomePage";
 import NavigationView, {
-  NavigationParams,
+    NavigationParams,
 } from "./components/navigation/NavigationView";
 import ThemeProvider from "./components/ThemeProvider";
 import ClassInfo from "./containers/main/ClassInfo";
@@ -52,39 +53,37 @@ const mapDispatchToProps = (
   };
 };
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    "@global": {
-      body: {
-        margin: 0,
-        fontFamily: "Roboto",
-      },
+const useStyles = makeStyles()((theme: Theme) => ({
+  "@global": {
+    body: {
+      margin: 0,
+      fontFamily: "Roboto",
+    },
 
-      code: {
-        fontFamily: "monospace",
-        fontSize: 14,
-      },
+    code: {
+      fontFamily: "monospace",
+      fontSize: 14,
+    },
 
-      "*": {
-        boxSizing: "border-box",
-      },
-      "a:link": {
-        color: theme.palette.primary.main,
-        textDecoration: "none",
-      },
-      "a:visited": {
-        color: theme.palette.primary.main,
-        textDecoration: "none",
-      },
-      "a:hover": {
-        textDecoration: "underline",
-      },
+    "*": {
+      boxSizing: "border-box",
+    },
+    "a:link": {
+      color: theme.palette.primary.main,
+      textDecoration: "none",
+    },
+    "a:visited": {
+      color: theme.palette.primary.main,
+      textDecoration: "none",
     },
-    appContainer: {
-      position: "relative",
+    "a:hover": {
+      textDecoration: "underline",
     },
-  })
-);
+  },
+  appContainer: {
+    position: "relative",
+  },
+}));
 
 const ContentWrapper = styled.div`
   padding-top: calc(3rem + ${({ theme }) => length(theme.layout.headerHeight)});
@@ -201,7 +200,7 @@ const FixedNavigationView = styled(NavigationView)`
 `;
 
 function AppContent(props: AppProps): JSX.Element {
-  const classes = useStyles(props);
+  const { classes } = useStyles();
 
   const { pathname } = useLocation();
 
diff --git a/src/assets/theme.ts b/src/assets/theme.ts
index 033791c2..23019239 100644
--- a/src/assets/theme.ts
+++ b/src/assets/theme.ts
@@ -2,7 +2,7 @@
 // Use of this source code is governed by an MIT-style license that can be
 // found in the LICENSE file.
 
-import { createMuiTheme } from "@material-ui/core";
+import { createTheme } from "@mui/material/styles";
 
 const layout = {
   sidebarWidth: "18rem",
@@ -10,10 +10,10 @@ const layout = {
   footerHeight: "6rem",
 };
 
-export const theme = createMuiTheme({
+export const theme = createTheme({
   layout: layout,
   palette: {
-    type: "light",
+    mode: "light",
     background: {
       paper: "#fff",
       default: "#fff",
@@ -61,10 +61,10 @@ export const theme = createMuiTheme({
   },
 });
 
-export const sideBarTheme = createMuiTheme({
+export const sideBarTheme = createTheme({
   layout: layout,
   palette: {
-    type: "dark",
+    mode: "dark",
     background: {
       paper: "#000",
       default: "#000",
diff --git a/src/components/ErrorPage.tsx b/src/components/ErrorPage.tsx
index 4cbd05e9..f16c30d1 100644
--- a/src/components/ErrorPage.tsx
+++ b/src/components/ErrorPage.tsx
@@ -2,29 +2,30 @@
 // Use of this source code is governed by an MIT-style license that can be
 // found in the LICENSE file.
 
-import {
-  createStyles,
-  Grid,
-  StyleRules,
-  Theme,
-  withStyles,
-  WithStyles,
-} from "@material-ui/core";
+import { Grid, Theme } from "@mui/material";
 import React, { ErrorInfo } from "react";
 import { Link } from "react-router-dom";
+import { makeStyles } from "tss-react/mui";
 
-const styles = (theme: Theme): StyleRules =>
-  createStyles({
-    grid: {
-      margin: theme.spacing(3),
-    },
-  });
+const useStyles = makeStyles()((theme: Theme) => ({
+  grid: {
+    margin: theme.spacing(3),
+  },
+}));
 
-interface ErrorBoundaryProps extends WithStyles<typeof styles> {
+interface ErrorBoundaryProps {
   children: React.ReactNode;
 }
 
-class ErrorBoundary extends React.Component<ErrorBoundaryProps> {
+interface ErrorBoundaryState {
+  hasError: boolean;
+}
+
+// Error boundaries must be class components
+class ErrorBoundaryInner extends React.Component<
+  ErrorBoundaryProps & { classes: Record<string, string> },
+  ErrorBoundaryState
+> {
   state = {
     hasError: false,
   };
@@ -39,7 +40,7 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps> {
       // You can render any custom fallback UI
       console.log("ERROR: In the object ");
       return (
-        <Grid item className={this.props.classes.grid}>
+        <Grid className={this.props.classes.grid}>
           <h1>Something went wrong.</h1>
           <Link to={`/#`}>Home Page</Link>
         </Grid>
@@ -50,4 +51,8 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps> {
   }
 }
 
-export default withStyles(styles)(ErrorBoundary);
+// Wrapper to inject makeStyles into the class component
+export default function ErrorBoundary(props: ErrorBoundaryProps): JSX.Element {
+  const { classes } = useStyles();
+  return <ErrorBoundaryInner classes={classes} {...props} />;
+}
diff --git a/src/components/ThemeProvider.tsx b/src/components/ThemeProvider.tsx
index eae8876d..a5cb53df 100644
--- a/src/components/ThemeProvider.tsx
+++ b/src/components/ThemeProvider.tsx
@@ -4,9 +4,9 @@
 
 import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
 import {
-  Theme,
-  ThemeProvider as MaterialThemeProvider,
-} from "@material-ui/core/styles";
+    ThemeProvider as MaterialThemeProvider,
+    Theme,
+} from "@mui/material/styles";
 import React from "react";
 
 type ThemeProviderProps = React.PropsWithChildren<{
diff --git a/src/components/doc/Functions.tsx b/src/components/doc/Functions.tsx
index 596f54db..bc1eff4e 100644
--- a/src/components/doc/Functions.tsx
+++ b/src/components/doc/Functions.tsx
@@ -2,15 +2,13 @@
 // Use of this source code is governed by an MIT-style license that can be
 // found in the LICENSE file.
 
-import { makeStyles } from "@material-ui/core";
-import { ClassNameMap } from "@material-ui/core/styles/withStyles";
-import React from "react";
+import { makeStyles } from "tss-react/mui";
 import { getFunctionId } from "../../misc/util";
 import { Function, Method, Parameter, Type } from "../../model/model";
 import DetailsList from "../general/DetailsList";
 import { TypeView } from "./Type";
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles()(() => ({
   defaultValue: { fontSize: "0.875em" },
 }));
 
@@ -25,7 +23,7 @@ export function getDescription(
   returnType?: Type,
   hideReturnTypes?: boolean,
   includeDefaultValues?: boolean,
-  classes?: ClassNameMap<"defaultValue">
+  classes?: Record<"defaultValue", string>
 ): JSX.Element {
   return (
     <>
@@ -66,7 +64,7 @@ export function getDescription(
 }
 
 export default function Functions(props: FunctionsProps): JSX.Element {
-  const classes = useStyles();
+  const { classes } = useStyles();
   return (
     <DetailsList
       title={props.title}
diff --git a/src/components/doc/Toitdocs.tsx b/src/components/doc/Toitdocs.tsx
index 8b8796b3..2f40375d 100644
--- a/src/components/doc/Toitdocs.tsx
+++ b/src/components/doc/Toitdocs.tsx
@@ -2,38 +2,38 @@
 // Use of this source code is governed by an MIT-style license that can be
 // found in the LICENSE file.
 
-import { makeStyles, Typography } from "@material-ui/core";
-import { Variant } from "@material-ui/core/styles/createTypography";
-import React from "react";
+import { Typography } from "@mui/material";
+import { Variant } from "@mui/material/styles/createTypography";
 import { HashLink } from "react-router-hash-link";
+import { makeStyles } from "tss-react/mui";
 import { urlFromLinkRef } from "../../misc/util";
 import {
-  Doc,
-  DOC_DOCREF,
-  DOC_EXPRESSION_CODE,
-  DOC_EXPRESSION_LINK,
-  DOC_EXPRESSION_TEXT,
-  DOC_STATEMENT_CODE_SECTION,
-  DOC_STATEMENT_ITEMIZED,
-  DOC_STATEMENT_PARAGRAPH,
-  DocExpression,
-  DocExpressionCode,
-  DocExpressionLink,
-  DocExpressionText,
-  DocRef,
-  DocSection,
-  DocStatement,
-  DocStatementCodeSection,
-  DocStatementItem,
-  DocStatementItemized,
-  DocStatementParagraph,
+    Doc,
+    DOC_DOCREF,
+    DOC_EXPRESSION_CODE,
+    DOC_EXPRESSION_LINK,
+    DOC_EXPRESSION_TEXT,
+    DOC_STATEMENT_CODE_SECTION,
+    DOC_STATEMENT_ITEMIZED,
+    DOC_STATEMENT_PARAGRAPH,
+    DocExpression,
+    DocExpressionCode,
+    DocExpressionLink,
+    DocExpressionText,
+    DocRef,
+    DocSection,
+    DocStatement,
+    DocStatementCodeSection,
+    DocStatementItem,
+    DocStatementItemized,
+    DocStatementParagraph,
 } from "../../model/model";
 import CodeBlock from "../general/CodeBlock";
 import ExternalLink from "../general/ExternalLink";
 
 // TODO: Pull all format and structure from old printStatements function (structure from old format: https://github.com/toitware/web-toitdocs/blob/e74e3d5478fb3fd350e28f7801d69b7f38a1d563/src/components/toitdoc_info.js#L26)
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles()((theme) => ({
   statementParagraph: { paddingBottom: theme.spacing(1) },
   sectionTitle: {
     paddingTop: theme.spacing(2),
@@ -89,7 +89,7 @@ function StatementParagraph(props: {
   statement: DocStatementParagraph;
   isHeader?: boolean;
 }): JSX.Element {
-  const classes = useStyles();
+  const { classes } = useStyles();
   return (
     <div className={props.isHeader ? "" : classes.statementParagraph}>
       {props.statement.expressions.map((expr: DocExpression, index: number) => (
@@ -100,7 +100,7 @@ function StatementParagraph(props: {
 }
 
 function ToitdocRef(props: { reference: DocRef }): JSX.Element {
-  const classes = useStyles();
+  const { classes } = useStyles();
   const url = urlFromLinkRef(props.reference.reference);
   if (!url) {
     let className: string;
@@ -155,7 +155,7 @@ function Statement(props: {
 }
 
 function Section(props: { section: DocSection }): JSX.Element {
-  const classes = useStyles();
+  const { classes } = useStyles();
   let level = props.section.level;
   if (level > 2) level = 2;
   const variant = ("h" + (props.section.level + 4)) as Variant;
diff --git a/src/components/general/DetailsList.tsx b/src/components/general/DetailsList.tsx
index aab01d9c..9bd860bc 100644
--- a/src/components/general/DetailsList.tsx
+++ b/src/components/general/DetailsList.tsx
@@ -3,10 +3,10 @@
 // found in the LICENSE file.
 
 import styled from "@emotion/styled";
-import { Divider, makeStyles, Typography } from "@material-ui/core";
-import React from "react";
+import { Divider, Typography } from "@mui/material";
 import { Link } from "react-router-dom";
 import { HashLink } from "react-router-hash-link";
+import { makeStyles } from "tss-react/mui";
 import { Doc } from "../../model/model";
 import Toitdocs from "../doc/Toitdocs";
 
@@ -24,7 +24,7 @@ interface DetailsListProps {
   }[];
 }
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles()((theme) => ({
   details: { paddingBottom: theme.spacing(3) },
   title: {
     paddingTop: theme.spacing(2),
@@ -60,7 +60,7 @@ function name(name: string, id: string, link?: string): JSX.Element {
 }
 
 export default function DetailsList(props: DetailsListProps): JSX.Element {
-  const classes = useStyles();
+  const { classes } = useStyles();
   return (
     <div className={classes.details}>
       <div className={classes.title}>
diff --git a/src/components/general/ListItemLink.tsx b/src/components/general/ListItemLink.tsx
index 15f2971f..e1a5dd3f 100644
--- a/src/components/general/ListItemLink.tsx
+++ b/src/components/general/ListItemLink.tsx
@@ -2,11 +2,11 @@
 // Use of this source code is governed by an MIT-style license that can be
 // found in the LICENSE file.
 
-import { ListItem, ListItemText, makeStyles } from "@material-ui/core";
-import React from "react";
+import { ListItem, ListItemText } from "@mui/material";
 import { Link } from "react-router-dom";
+import { makeStyles } from "tss-react/mui";
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles()(() => ({
   item: {
     paddingTop: 0,
     paddingBottom: 0,
@@ -17,9 +17,9 @@ export default function ListItemLink(props: {
   primary: string;
   to: string;
 }): JSX.Element {
-  const classes = useStyles();
+  const { classes } = useStyles();
   return (
-    <ListItem button component={Link} to={props.to} className={classes.item}>
+    <ListItem component={Link} to={props.to} className={classes.item}>
       <ListItemText primary={props.primary} />
     </ListItem>
   );
diff --git a/src/components/general/TablePanel.tsx b/src/components/general/TablePanel.tsx
index dbbc26ea..764dbf03 100644
--- a/src/components/general/TablePanel.tsx
+++ b/src/components/general/TablePanel.tsx
@@ -3,32 +3,28 @@
 // found in the LICENSE file.
 
 import {
-  Box,
-  createStyles,
-  StyleRules,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableRow,
-  Theme,
-  withStyles,
-  WithStyles,
-} from "@material-ui/core";
-import React, { Component } from "react";
+    Box,
+    Table,
+    TableBody,
+    TableCell,
+    TableContainer,
+    TableRow,
+    Theme,
+} from "@mui/material";
+import React from "react";
 import { HashLink } from "react-router-hash-link";
+import { makeStyles } from "tss-react/mui";
 import { getFunctionId } from "../../misc/util";
 import { Field, Function, Method } from "../../model/model";
 import { getDescription } from "../doc/Functions";
 import Toitdocs from "../doc/Toitdocs";
 import { TypeView } from "../doc/Type";
 
-const styles = (theme: Theme): StyleRules =>
-  createStyles({
-    methodsTable: {
-      marginTop: theme.spacing(1),
-    },
-  });
+const useStyles = makeStyles()((theme: Theme) => ({
+  methodsTable: {
+    marginTop: theme.spacing(1),
+  },
+}));
 
 interface TablePanelGenProps {
   children?: React.ReactNode;
@@ -56,7 +52,7 @@ function TablePanelGen(props: TablePanelGenProps): JSX.Element {
   );
 }
 
-interface TablePanelProps extends WithStyles<typeof styles> {
+interface TablePanelProps {
   tab: number;
   active: number;
   tabData?: (Function | Method)[];
@@ -65,77 +61,73 @@ interface TablePanelProps extends WithStyles<typeof styles> {
   ariaLabel: string;
 }
 
-class TablePanel extends Component<TablePanelProps> {
-  render(): JSX.Element {
-    const classes = this.props.classes;
-    if (this.props.tabFieldData)
-      return (
-        <TablePanelGen value={this.props.active} index={this.props.tab}>
-          <TableContainer>
-            <Table
-              size="small"
-              aria-label={this.props.ariaLabel}
-              className={classes.methodsTable}
-            >
-              <TableBody>
-                {this.props.tabFieldData.length > 0 &&
-                  this.props.tabFieldData.map((field, index) => (
-                    <TableRow key={field.name + index}>
-                      <TableCell component="th" scope="row">
-                        <HashLink to={{ hash: field.name }}>
-                          {field.name}
-                        </HashLink>{" "}
-                        / <TypeView type={field.type} />
-                      </TableCell>
-                      <TableCell component="th" scope="row">
-                        <Toitdocs value={field.toitdoc} headerOnly={true} />
-                      </TableCell>
-                    </TableRow>
-                  ))}
-              </TableBody>
-            </Table>
-          </TableContainer>
-        </TablePanelGen>
-      );
-    else if (this.props.tabData)
-      return (
-        <TablePanelGen value={this.props.active} index={this.props.tab}>
-          <TableContainer>
-            <Table
-              size="small"
-              aria-label={this.props.ariaLabel}
-              className={classes.methodsTable}
-            >
-              <TableBody>
-                {this.props.tabData.length > 0 &&
-                  this.props.tabData.map((method, index) => (
-                    <TableRow key={method.name + index}>
-                      <TableCell component="th" scope="row">
-                        <HashLink
-                          to={{
-                            hash: getFunctionId(method.name, method.shape),
-                          }}
-                        >
-                          {method.name}
-                        </HashLink>{" "}
-                        {getDescription(
-                          method.parameters,
-                          method.returnType,
-                          this.props.hideReturnTypes
-                        )}
-                      </TableCell>
-                      <TableCell component="th" scope="row">
-                        <Toitdocs value={method.toitdoc} headerOnly={true} />
-                      </TableCell>
-                    </TableRow>
-                  ))}
-              </TableBody>
-            </Table>
-          </TableContainer>
-        </TablePanelGen>
-      );
-    else return <></>;
-  }
+export default function TablePanel(props: TablePanelProps): JSX.Element {
+  const { classes } = useStyles();
+  if (props.tabFieldData)
+    return (
+      <TablePanelGen value={props.active} index={props.tab}>
+        <TableContainer>
+          <Table
+            size="small"
+            aria-label={props.ariaLabel}
+            className={classes.methodsTable}
+          >
+            <TableBody>
+              {props.tabFieldData.length > 0 &&
+                props.tabFieldData.map((field, index) => (
+                  <TableRow key={field.name + index}>
+                    <TableCell component="th" scope="row">
+                      <HashLink to={{ hash: field.name }}>
+                        {field.name}
+                      </HashLink>{" "}
+                      / <TypeView type={field.type} />
+                    </TableCell>
+                    <TableCell component="th" scope="row">
+                      <Toitdocs value={field.toitdoc} headerOnly={true} />
+                    </TableCell>
+                  </TableRow>
+                ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </TablePanelGen>
+    );
+  else if (props.tabData)
+    return (
+      <TablePanelGen value={props.active} index={props.tab}>
+        <TableContainer>
+          <Table
+            size="small"
+            aria-label={props.ariaLabel}
+            className={classes.methodsTable}
+          >
+            <TableBody>
+              {props.tabData.length > 0 &&
+                props.tabData.map((method, index) => (
+                  <TableRow key={method.name + index}>
+                    <TableCell component="th" scope="row">
+                      <HashLink
+                        to={{
+                          hash: getFunctionId(method.name, method.shape),
+                        }}
+                      >
+                        {method.name}
+                      </HashLink>{" "}
+                      {getDescription(
+                        method.parameters,
+                        method.returnType,
+                        props.hideReturnTypes
+                      )}
+                    </TableCell>
+                    <TableCell component="th" scope="row">
+                      <Toitdocs value={method.toitdoc} headerOnly={true} />
+                    </TableCell>
+                  </TableRow>
+                ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </TablePanelGen>
+    );
+  else return <></>;
 }
-
-export default withStyles(styles)(TablePanel);
diff --git a/src/components/header/HeaderBar.tsx b/src/components/header/HeaderBar.tsx
index 278b5a57..11c7a5a8 100644
--- a/src/components/header/HeaderBar.tsx
+++ b/src/components/header/HeaderBar.tsx
@@ -3,9 +3,8 @@
 // found in the LICENSE file.
 
 import styled from "@emotion/styled";
-import { AppBar } from "@material-ui/core";
-import Toolbar from "@material-ui/core/Toolbar";
-import React from "react";
+import { AppBar } from "@mui/material";
+import Toolbar from "@mui/material/Toolbar";
 import { length } from "../../assets/theme";
 import Search from "../../containers/header/Search";
 
diff --git a/src/components/header/SearchBar.tsx b/src/components/header/SearchBar.tsx
index ec1e96bf..5f2d6f31 100644
--- a/src/components/header/SearchBar.tsx
+++ b/src/components/header/SearchBar.tsx
@@ -2,35 +2,32 @@
 // Use of this source code is governed by an MIT-style license that can be
 // found in the LICENSE file.
 
+import ClearIcon from "@mui/icons-material/Clear";
+import SearchIcon from "@mui/icons-material/Search";
 import {
-  Box,
-  createStyles,
-  InputBase,
-  makeStyles,
-  Theme,
-} from "@material-ui/core";
-import ClearIcon from "@material-ui/icons/Clear";
-import SearchIcon from "@material-ui/icons/Search";
+    Box,
+    InputBase,
+    Theme,
+} from "@mui/material";
 import React, { memo } from "react";
+import { makeStyles } from "tss-react/mui";
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    search: {
-      padding: "2px 4px",
-      display: "flex",
-      alignItems: "center",
-      flex: 1,
-    },
-    input: {
-      marginLeft: theme.spacing(1),
-      flex: 1,
-    },
-    clearIcon: {
-      marginRight: theme.spacing(2),
-      cursor: "pointer",
-    },
-  })
-);
+const useStyles = makeStyles()((theme: Theme) => ({
+  search: {
+    padding: "2px 4px",
+    display: "flex",
+    alignItems: "center",
+    flex: 1,
+  },
+  input: {
+    marginLeft: theme.spacing(1),
+    flex: 1,
+  },
+  clearIcon: {
+    marginRight: theme.spacing(2),
+    cursor: "pointer",
+  },
+}));
 
 interface SearchBarProps {
   searchBy: string;
@@ -51,16 +48,13 @@ function SearchBar(props: SearchBarProps): JSX.Element {
     }
   };
 
-  const classes = useStyles();
+  const { classes } = useStyles();
 
   return (
     <>
       <Box
         className={classes.search}
-        border={1}
-        borderLeft={0}
-        borderTop={0}
-        borderRight={0}
+        sx={{ border: 1, borderLeft: 0, borderTop: 0, borderRight: 0 }}
       >
         <SearchIcon />
         <InputBase
diff --git a/src/components/header/SearchResults.tsx b/src/components/header/SearchResults.tsx
index 208d5b0f..3a71ebd1 100644
--- a/src/components/header/SearchResults.tsx
+++ b/src/components/header/SearchResults.tsx
@@ -3,25 +3,24 @@
 // found in the LICENSE file.
 
 import {
-  List,
-  ListItem,
-  makeStyles,
-  Paper,
-  Theme,
-  Typography,
-} from "@material-ui/core";
-import React from "react";
+    List,
+    ListItem,
+    Paper,
+    Theme,
+    Typography,
+} from "@mui/material";
+import { makeStyles } from "tss-react/mui";
 import {
-  Searchable,
-  SearchableClass,
-  SearchableFunction,
-  SearchableInterface,
-  SearchableLibrary,
-  SearchableMethod,
+    Searchable,
+    SearchableClass,
+    SearchableFunction,
+    SearchableInterface,
+    SearchableLibrary,
+    SearchableMethod,
 } from "../../model/search";
 import { SEARCH_BAR_WIDTH, SEARCH_RESULTS_WIDTH } from "./SearchView";
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles()((theme: Theme) => ({
   root: {
     position: "fixed",
     width: SEARCH_RESULTS_WIDTH,
@@ -51,7 +50,7 @@ interface SearchResultsProps {
 }
 
 export default function SearchResults(props: SearchResultsProps): JSX.Element {
-  const classes = useStyles();
+  const { classes } = useStyles();
 
   const results = props.results.map((item, index) => (
     <ResultItem item={item} key={"resultItem" + index} />
@@ -69,7 +68,7 @@ export default function SearchResults(props: SearchResultsProps): JSX.Element {
 }
 
 function ResultItem(props: { item: Searchable }): JSX.Element {
-  const classes = useStyles();
+  const { classes } = useStyles();
 
   let name = "";
   let from = "";
@@ -116,7 +115,6 @@ function ResultItem(props: { item: Searchable }): JSX.Element {
 
   return (
     <ListItem
-      button
       component="a"
       href={"." + props.item.url}
       className={classes.listItem}
diff --git a/src/components/header/SearchView.tsx b/src/components/header/SearchView.tsx
index 9ee1863d..539e3e1c 100644
--- a/src/components/header/SearchView.tsx
+++ b/src/components/header/SearchView.tsx
@@ -3,21 +3,19 @@
 // found in the LICENSE file.
 
 import {
-  ClickAwayListener,
-  createStyles,
-  withStyles,
-  WithStyles,
-} from "@material-ui/core";
+    ClickAwayListener,
+} from "@mui/material";
 import Fuse from "fuse.js";
 import React from "react";
+import { makeStyles } from "tss-react/mui";
 import {
-  SearchableClass,
-  SearchableFunction,
-  SearchableInterface,
-  SearchableLibrary,
-  SearchableMethod,
-  SearchableMixin,
-  SearchableModel,
+    SearchableClass,
+    SearchableFunction,
+    SearchableInterface,
+    SearchableLibrary,
+    SearchableMethod,
+    SearchableMixin,
+    SearchableModel,
 } from "../../model/search";
 import SearchBar from "./SearchBar";
 import SearchResults from "./SearchResults";
@@ -25,14 +23,14 @@ import SearchResults from "./SearchResults";
 export const SEARCH_BAR_WIDTH = 300;
 export const SEARCH_RESULTS_WIDTH = 400;
 
-const styles = createStyles({
+const useStyles = makeStyles()(() => ({
   searchBar: {
     width: SEARCH_BAR_WIDTH,
     marginLeft: "auto",
   },
-});
+}));
 
-export interface SearchProps extends WithStyles<typeof styles> {
+export interface SearchProps {
   model: SearchableModel;
 }
 
@@ -49,8 +47,9 @@ interface SearchState {
 
 let delayTimer: number;
 
-class SearchView extends React.Component<SearchProps, SearchState> {
-  state = {
+function SearchViewInner(props: SearchProps): JSX.Element {
+  const { classes } = useStyles();
+  const [state, setState] = React.useState<SearchState>({
     searchBy: "",
     libraries: [],
     classes: [],
@@ -59,9 +58,9 @@ class SearchView extends React.Component<SearchProps, SearchState> {
     functions: [],
     methods: [],
     hideResults: false,
-  };
+  });
 
-  search<T extends { name: string }>(
+  function search<T extends { name: string }>(
     searchIn: T[],
     searchBy: string
   ): Fuse.FuseResult<T>[] {
@@ -73,8 +72,8 @@ class SearchView extends React.Component<SearchProps, SearchState> {
     return new Fuse(searchIn, options).search(searchBy);
   }
 
-  onSearch = (searchString: string): void => {
-    this.setState({ searchBy: searchString });
+  const onSearch = (searchString: string): void => {
+    setState((prev) => ({ ...prev, searchBy: searchString }));
 
     clearTimeout(delayTimer);
     delayTimer = window.setTimeout(
@@ -87,28 +86,28 @@ class SearchView extends React.Component<SearchProps, SearchState> {
         let methods = [] as SearchableMethod[];
 
         if (searchString && searchString.length > 1) {
-          libraries = this.search(this.props.model.libraries, searchString).map(
+          libraries = search(props.model.libraries, searchString).map(
             (m) => m.item
           );
-          interfaces = this.search(
-            this.props.model.interfaces,
+          interfaces = search(
+            props.model.interfaces,
             searchString
           ).map((inter) => inter.item);
-          mixins = this.search(this.props.model.mixins, searchString).map(
+          mixins = search(props.model.mixins, searchString).map(
             (mixin) => mixin.item
           );
-          classes = this.search(this.props.model.classes, searchString).map(
+          classes = search(props.model.classes, searchString).map(
             (c) => c.item
           );
-          functions = this.search(this.props.model.functions, searchString).map(
+          functions = search(props.model.functions, searchString).map(
             (f) => f.item
           );
-          methods = this.search(this.props.model.methods, searchString).map(
+          methods = search(props.model.methods, searchString).map(
             (m) => m.item
           );
         }
 
-        this.setState({
+        setState({
           searchBy: searchString,
           libraries: libraries,
           interfaces: interfaces,
@@ -116,43 +115,42 @@ class SearchView extends React.Component<SearchProps, SearchState> {
           mixins: mixins,
           functions: functions,
           methods: methods,
+          hideResults: false,
         });
       },
       searchString ? 200 : 0
     );
   };
 
-  onFocus = (): void => {
-    this.setState({ hideResults: false });
+  const onFocus = (): void => {
+    setState((prev) => ({ ...prev, hideResults: false }));
   };
 
-  onClickAway = (): void => {
-    this.setState({ hideResults: true });
+  const onClickAway = (): void => {
+    setState((prev) => ({ ...prev, hideResults: true }));
   };
 
-  render(): JSX.Element {
-    return (
-      <ClickAwayListener onClickAway={this.onClickAway}>
-        <div className={this.props.classes.searchBar}>
-          <SearchBar
-            searchBy={this.state.searchBy}
-            onSearch={this.onSearch}
-            onFocus={this.onFocus}
-          />
-          <SearchResults
-            results={[
-              ...this.state.classes,
-              ...this.state.interfaces,
-              ...this.state.functions,
-              ...this.state.methods,
-              ...this.state.libraries,
-            ]}
-            hideResults={this.state.hideResults}
-          />
-        </div>
-      </ClickAwayListener>
-    );
-  }
+  return (
+    <ClickAwayListener onClickAway={onClickAway}>
+      <div className={classes.searchBar}>
+        <SearchBar
+          searchBy={state.searchBy}
+          onSearch={onSearch}
+          onFocus={onFocus}
+        />
+        <SearchResults
+          results={[
+            ...state.classes,
+            ...state.interfaces,
+            ...state.functions,
+            ...state.methods,
+            ...state.libraries,
+          ]}
+          hideResults={state.hideResults}
+        />
+      </div>
+    </ClickAwayListener>
+  );
 }
 
-export default withStyles(styles)(SearchView);
+export default SearchViewInner;
diff --git a/src/components/main/ClassInfoView.tsx b/src/components/main/ClassInfoView.tsx
index 97a0fc37..b059231e 100644
--- a/src/components/main/ClassInfoView.tsx
+++ b/src/components/main/ClassInfoView.tsx
@@ -2,15 +2,15 @@
 // Use of this source code is governed by an MIT-style license that can be
 // found in the LICENSE file.
 
-import Typography from "@material-ui/core/Typography";
+import Typography from "@mui/material/Typography";
 import React, { Component } from "react";
 import { RouteComponentProps } from "react-router-dom";
 import { classFrom, classUrlFromRef } from "../../misc/util";
 import {
-  CLASS_KIND_CLASS,
-  CLASS_KIND_INTERFACE,
-  CLASS_KIND_MIXIN,
-  Libraries,
+    CLASS_KIND_CLASS,
+    CLASS_KIND_INTERFACE,
+    CLASS_KIND_MIXIN,
+    Libraries,
 } from "../../model/model";
 import Fields from "../doc/Fields";
 import Functions from "../doc/Functions";
diff --git a/src/components/main/ClassOverview.tsx b/src/components/main/ClassOverview.tsx
index b4aaa2f9..a25ae753 100644
--- a/src/components/main/ClassOverview.tsx
+++ b/src/components/main/ClassOverview.tsx
@@ -3,42 +3,38 @@
 // found in the LICENSE file.
 
 import {
-  createStyles,
-  Divider,
-  StyleRules,
-  Tab,
-  Tabs,
-  Theme,
-  Typography,
-  withStyles,
-  WithStyles,
-} from "@material-ui/core";
-import React, { Component } from "react";
+    Divider,
+    Tab,
+    Tabs,
+    Theme,
+    Typography,
+} from "@mui/material";
+import React from "react";
+import { makeStyles } from "tss-react/mui";
 import {
-  Class,
-  CLASS_KIND_CLASS,
-  CLASS_KIND_INTERFACE,
-  CLASS_KIND_MIXIN,
+    Class,
+    CLASS_KIND_CLASS,
+    CLASS_KIND_INTERFACE,
+    CLASS_KIND_MIXIN,
 } from "../../model/model";
 import TablePanel from "../general/TablePanel";
 
-const styles = (theme: Theme): StyleRules =>
-  createStyles({
-    root: {
-      minWidth: 650,
-      paddingTop: theme.spacing(2),
-      paddingBottom: theme.spacing(8),
-    },
-    title: {
-      paddingTop: theme.spacing(2),
-      paddingBottom: theme.spacing(1),
-    },
-    hiddenTab: {
-      display: "none",
-    },
-  });
+const useStyles = makeStyles()((theme: Theme) => ({
+  root: {
+    minWidth: 650,
+    paddingTop: theme.spacing(2),
+    paddingBottom: theme.spacing(8),
+  },
+  title: {
+    paddingTop: theme.spacing(2),
+    paddingBottom: theme.spacing(1),
+  },
+  hiddenTab: {
+    display: "none",
+  },
+}));
 
-interface ClassOverviewProps extends WithStyles<typeof styles> {
+interface ClassOverviewProps {
   klass: Class;
 }
 
@@ -49,102 +45,92 @@ function a11yProps(index: number): { id: string; "aria-controls": string } {
   };
 }
 
-interface TabProps {
-  tab: number;
-}
+export default function ClassOverviewView(props: ClassOverviewProps): JSX.Element {
+  const { classes } = useStyles();
+  const klass = props.klass;
+  const [tab, setTab] = React.useState(
+    klass.constructors.length > 0
+      ? 0
+      : klass.statics.length > 0
+      ? 1
+      : klass.methods.length > 0
+      ? 2
+      : 3
+  );
 
-class ClassOverviewView extends Component<ClassOverviewProps, TabProps> {
-  constructor(props: ClassOverviewProps) {
-    super(props);
-    this.state = {
-      tab:
-        this.props.klass.constructors.length > 0
-          ? 0
-          : this.props.klass.statics.length > 0
-          ? 1
-          : this.props.klass.methods.length > 0
-          ? 2
-          : 3,
-    };
+  let kind = "";
+  if (klass.kind === CLASS_KIND_CLASS) {
+    kind = "Class";
+  } else if (klass.kind === CLASS_KIND_INTERFACE) {
+    kind = "Interface";
+  } else if (klass.kind === CLASS_KIND_MIXIN) {
+    kind = "Mixin";
+  } else {
+    throw new Error("Unknown class kind: " + klass.kind);
   }
-  render(): JSX.Element {
-    const classes = this.props.classes;
-    const klass = this.props.klass;
-    let kind = "";
-    if (klass.kind === CLASS_KIND_CLASS) {
-      kind = "Class";
-    } else if (klass.kind === CLASS_KIND_INTERFACE) {
-      kind = "Interface";
-    } else if (klass.kind === CLASS_KIND_MIXIN) {
-      kind = "Mixin";
-    } else {
-      throw new Error("Unknown class kind: " + klass.kind);
-    }
-    return (
-      <div className={classes.root}>
-        <div className={classes.title}>
-          <Typography variant="h4">{kind} summary</Typography>
-        </div>
-        <Divider />
-        <Tabs
-          value={this.state.tab}
-          aria-label="Class overview"
-          textColor="primary"
-          indicatorColor="primary"
-        >
-          <Tab
-            label="Constructors"
-            {...a11yProps(0)}
-            onClick={(): void => this.setState({ tab: 0 })}
-            className={klass.constructors.length > 0 ? "" : classes.hiddenTab}
-          />
-          <Tab
-            label="Statics"
-            {...a11yProps(1)}
-            onClick={(): void => this.setState({ tab: 1 })}
-            className={klass.statics.length > 0 ? "" : classes.hiddenTab}
-          />
-          <Tab
-            label="Methods"
-            {...a11yProps(2)}
-            onClick={(): void => this.setState({ tab: 2 })}
-            className={klass.methods.length > 0 ? "" : classes.hiddenTab}
-          />
-          <Tab
-            label="Fields"
-            {...a11yProps(3)}
-            onClick={(): void => this.setState({ tab: 3 })}
-            className={klass.fields.length > 0 ? "" : classes.hiddenTab}
-          />
-        </Tabs>
-        <TablePanel
-          tab={0}
-          active={this.state.tab}
-          tabData={klass.constructors}
-          hideReturnTypes={true}
-          ariaLabel="Constructors"
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.title}>
+        <Typography variant="h4">{kind} summary</Typography>
+      </div>
+      <Divider />
+      <Tabs
+        value={tab}
+        aria-label="Class overview"
+        textColor="primary"
+        indicatorColor="primary"
+      >
+        <Tab
+          label="Constructors"
+          {...a11yProps(0)}
+          onClick={(): void => setTab(0)}
+          className={klass.constructors.length > 0 ? "" : classes.hiddenTab}
         />
-        <TablePanel
-          tab={1}
-          active={this.state.tab}
-          tabData={klass.statics}
-          ariaLabel="Statics"
+        <Tab
+          label="Statics"
+          {...a11yProps(1)}
+          onClick={(): void => setTab(1)}
+          className={klass.statics.length > 0 ? "" : classes.hiddenTab}
         />
-        <TablePanel
-          tab={2}
-          active={this.state.tab}
-          tabData={klass.methods}
-          ariaLabel="Methods"
+        <Tab
+          label="Methods"
+          {...a11yProps(2)}
+          onClick={(): void => setTab(2)}
+          className={klass.methods.length > 0 ? "" : classes.hiddenTab}
         />
-        <TablePanel
-          tab={3}
-          active={this.state.tab}
-          tabFieldData={klass.fields}
-          ariaLabel="Fields"
+        <Tab
+          label="Fields"
+          {...a11yProps(3)}
+          onClick={(): void => setTab(3)}
+          className={klass.fields.length > 0 ? "" : classes.hiddenTab}
         />
-      </div>
-    );
-  }
+      </Tabs>
+      <TablePanel
+        tab={0}
+        active={tab}
+        tabData={klass.constructors}
+        hideReturnTypes={true}
+        ariaLabel="Constructors"
+      />
+      <TablePanel
+        tab={1}
+        active={tab}
+        tabData={klass.statics}
+        ariaLabel="Statics"
+      />
+      <TablePanel
+        tab={2}
+        active={tab}
+        tabData={klass.methods}
+        ariaLabel="Methods"
+      />
+      <TablePanel
+        tab={3}
+        active={tab}
+        tabFieldData={klass.fields}
+        ariaLabel="Fields"
+      />
+    </div>
+  );
 }
-
-export default withStyles(styles)(ClassOverviewView);
diff --git a/src/components/main/LibraryInfoView.tsx b/src/components/main/LibraryInfoView.tsx
index b5054093..d1c69b09 100644
--- a/src/components/main/LibraryInfoView.tsx
+++ b/src/components/main/LibraryInfoView.tsx
@@ -2,16 +2,10 @@
 // Use of this source code is governed by an MIT-style license that can be
 // found in the LICENSE file.
 
-import { Theme } from "@material-ui/core";
-import {
-  createStyles,
-  StyleRules,
-  WithStyles,
-  withStyles,
-} from "@material-ui/core/styles";
-import Typography from "@material-ui/core/Typography";
-import React, { Component } from "react";
+import { Theme, Typography } from "@mui/material";
+import React from "react";
 import { RouteComponentProps } from "react-router-dom";
+import { makeStyles } from "tss-react/mui";
 import { viewMode, ViewMode } from "../../App";
 import { libraryFrom } from "../../misc/util";
 import { Libraries } from "../../model/model";
@@ -21,154 +15,147 @@ import Globals from "../doc/Globals";
 import Toitdocs from "../doc/Toitdocs";
 import CodeBlock from "../general/CodeBlock";
 
-const styles = (theme: Theme): StyleRules =>
-  createStyles({
-    root: {
-      width: "100%",
-    },
-    importingText: {
-      marginBottom: theme.spacing(2),
-    },
-    heading: {
-      marginBottom: theme.spacing(3),
-    },
-  });
+const useStyles = makeStyles()((theme: Theme) => ({
+  root: {
+    width: "100%",
+  },
+  importingText: {
+    marginBottom: theme.spacing(2),
+  },
+  heading: {
+    marginBottom: theme.spacing(3),
+  },
+}));
 
 export interface LibraryInfoParams {
   libraryName: string;
 }
 
 export interface LibraryInfoProps
-  extends WithStyles<typeof styles>,
-    RouteComponentProps<LibraryInfoParams> {
+  extends RouteComponentProps<LibraryInfoParams> {
   libraries: Libraries;
 }
 
-class LibraryInfoView extends Component<LibraryInfoProps> {
-  componentDidMount(): void {
-    const hashId = this.props.location.hash.substring(1);
+export default function LibraryInfoView(props: LibraryInfoProps): JSX.Element {
+  const { classes } = useStyles();
+
+  React.useEffect(() => {
+    const hashId = props.location.hash.substring(1);
     const element = document.getElementById(hashId);
     element?.scrollIntoView(true);
-  }
-
-  render(): JSX.Element {
-    const libName = this.props.match.params.libraryName;
-    const library = libraryFrom(libName, this.props.libraries);
-    if (!library) {
-      return this.notFound(libName);
-    }
-
-    const importPath = libName.replace(/\//g, ".");
-    let isCoreExported = false;
-    let isCore = false;
-    let showImportHelp = true;
-    let isAbsoluteSDK = false;
-    let isPackage = false;
-
-    isAbsoluteSDK = libName === "@" || libName.startsWith("@");
-    isPackage = libName === ".packages" || libName.startsWith(".packages/");
-
-    switch (viewMode) {
-      case ViewMode.SDK:
-        isCoreExported = libName.startsWith("core/");
-        const unexported = /^core\/.*_impl$/;
-        if (isCoreExported && unexported.exec(libName)) {
-          isCoreExported = false;
-        }
-        isCore = libName === "core";
-        break;
-      case ViewMode.Package:
-        // Do nothing.
-        break;
-      case ViewMode.Folder:
-        showImportHelp = false;
-        break;
-    }
-
-    return (
-      <>
-        <div className={this.props.classes.heading}>
-          <Typography component="h2" variant="h2">
-            Library {library.name}
-          </Typography>
-        </div>
-        {showImportHelp && (
-          <div className={this.props.classes.importingText}>
-            {isCore || isCoreExported ? (
-              <Typography>
-                This is {isCoreExported ? "exported from" : ""} the core
-                library, which means you {isCore ? "usually" : ""} don&#39;t
-                need to import it.
-              </Typography>
-            ) : isAbsoluteSDK ? (
-              <Typography>This is the SDK branch.</Typography>
-            ) : isPackage ? (
-              <Typography>This is an imported packages branch.</Typography>
-            ) : (
-              <div>
-                <Typography>To use this library in your code:</Typography>
-                <CodeBlock code={"import " + importPath} />
-              </div>
-            )}
-          </div>
-        )}
-        {library.toitdoc && <Toitdocs value={library.toitdoc} />}
-        {Object.keys(library.interfaces).length > 0 && (
-          <Classes
-            classes={Object.values(library.interfaces)}
-            title="Interfaces"
-          />
-        )}
-        {Object.keys(library.exportedInterfaces).length > 0 && (
-          <Classes
-            classes={Object.values(library.exportedInterfaces)}
-            title="Exported interfaces"
-          />
-        )}
-        {Object.keys(library.mixins).length > 0 && (
-          <Classes classes={Object.values(library.mixins)} title="Mixins" />
-        )}
-        {Object.keys(library.exportedMixins).length > 0 && (
-          <Classes
-            classes={Object.values(library.exportedMixins)}
-            title="Exported mixins"
-          />
-        )}
-        {Object.keys(library.classes).length > 0 && (
-          <Classes classes={Object.values(library.classes)} title="Classes" />
-        )}
-        {Object.keys(library.exportedClasses).length > 0 && (
-          <Classes
-            classes={Object.values(library.exportedClasses)}
-            title="Exported classes"
-          />
-        )}
-        {library.globals.length > 0 && (
-          <Globals globals={library.globals} title="Globals" />
-        )}
-        {library.exportedGlobals.length > 0 && (
-          <Globals globals={library.exportedGlobals} title="Exported globals" />
-        )}
-        {library.functions.length > 0 && (
-          <Functions functions={library.functions} title="Functions" />
-        )}
-        {library.exportedFunctions.length > 0 && (
-          <Functions
-            functions={library.exportedFunctions}
-            title="Exported functions"
-          />
-        )}
-      </>
-    );
-  }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-  notFound(libraryName: string): JSX.Element {
+  const libName = props.match.params.libraryName;
+  const library = libraryFrom(libName, props.libraries);
+  if (!library) {
     return (
       <Typography variant="h4">
-        {"Error: Library " + libraryName + " not found"}
+        {"Error: Library " + libName + " not found"}
       </Typography>
     );
   }
-}
 
-export default withStyles(styles)(LibraryInfoView);
+  const importPath = libName.replace(/\//g, ".");
+  let isCoreExported = false;
+  let isCore = false;
+  let showImportHelp = true;
+  let isAbsoluteSDK = false;
+  let isPackage = false;
+
+  isAbsoluteSDK = libName === "@" || libName.startsWith("@");
+  isPackage = libName === ".packages" || libName.startsWith(".packages/");
+
+  switch (viewMode) {
+    case ViewMode.SDK:
+      isCoreExported = libName.startsWith("core/");
+      const unexported = /^core\/.*_impl$/;
+      if (isCoreExported && unexported.exec(libName)) {
+        isCoreExported = false;
+      }
+      isCore = libName === "core";
+      break;
+    case ViewMode.Package:
+      // Do nothing.
+      break;
+    case ViewMode.Folder:
+      showImportHelp = false;
+      break;
+  }
+
+  return (
+    <>
+      <div className={classes.heading}>
+        <Typography component="h2" variant="h2">
+          Library {library.name}
+        </Typography>
+      </div>
+      {showImportHelp && (
+        <div className={classes.importingText}>
+          {isCore || isCoreExported ? (
+            <Typography>
+              This is {isCoreExported ? "exported from" : ""} the core
+              library, which means you {isCore ? "usually" : ""} don&#39;t
+              need to import it.
+            </Typography>
+          ) : isAbsoluteSDK ? (
+            <Typography>This is the SDK branch.</Typography>
+          ) : isPackage ? (
+            <Typography>This is an imported packages branch.</Typography>
+          ) : (
+            <div>
+              <Typography>To use this library in your code:</Typography>
+              <CodeBlock code={"import " + importPath} />
+            </div>
+          )}
+        </div>
+      )}
+      {library.toitdoc && <Toitdocs value={library.toitdoc} />}
+      {Object.keys(library.interfaces).length > 0 && (
+        <Classes
+          classes={Object.values(library.interfaces)}
+          title="Interfaces"
+        />
+      )}
+      {Object.keys(library.exportedInterfaces).length > 0 && (
+        <Classes
+          classes={Object.values(library.exportedInterfaces)}
+          title="Exported interfaces"
+        />
+      )}
+      {Object.keys(library.mixins).length > 0 && (
+        <Classes classes={Object.values(library.mixins)} title="Mixins" />
+      )}
+      {Object.keys(library.exportedMixins).length > 0 && (
+        <Classes
+          classes={Object.values(library.exportedMixins)}
+          title="Exported mixins"
+        />
+      )}
+      {Object.keys(library.classes).length > 0 && (
+        <Classes classes={Object.values(library.classes)} title="Classes" />
+      )}
+      {Object.keys(library.exportedClasses).length > 0 && (
+        <Classes
+          classes={Object.values(library.exportedClasses)}
+          title="Exported classes"
+        />
+      )}
+      {library.globals.length > 0 && (
+        <Globals globals={library.globals} title="Globals" />
+      )}
+      {library.exportedGlobals.length > 0 && (
+        <Globals globals={library.exportedGlobals} title="Exported globals" />
+      )}
+      {library.functions.length > 0 && (
+        <Functions functions={library.functions} title="Functions" />
+      )}
+      {library.exportedFunctions.length > 0 && (
+        <Functions
+          functions={library.exportedFunctions}
+          title="Exported functions"
+        />
+      )}
+    </>
+  );
+}
diff --git a/src/components/main/SummaryView.tsx b/src/components/main/SummaryView.tsx
index e8d99f9b..f9556659 100644
--- a/src/components/main/SummaryView.tsx
+++ b/src/components/main/SummaryView.tsx
@@ -2,109 +2,98 @@
 // Use of this source code is governed by an MIT-style license that can be
 // found in the LICENSE file.
 
-import { Theme, Typography } from "@material-ui/core";
-import {
-  createStyles,
-  StyleRules,
-  withStyles,
-  WithStyles,
-} from "@material-ui/core/styles";
-import React from "react";
+import { Theme, Typography } from "@mui/material";
 import { Link } from "react-router-dom";
+import { makeStyles } from "tss-react/mui";
 import { libraryUrlFromRef } from "../../misc/util";
 import {
-  CATEGORY_FUNDAMENTAL,
-  CATEGORY_JUST_THERE,
-  CATEGORY_MISC,
-  Libraries,
-  Library,
+    CATEGORY_FUNDAMENTAL,
+    CATEGORY_JUST_THERE,
+    CATEGORY_MISC,
+    Libraries,
+    Library,
 } from "../../model/model";
 import Toitdocs from "../doc/Toitdocs";
 
-const styles = (theme: Theme): StyleRules =>
-  createStyles({
-    section: {
-      paddingTop: theme.spacing(2),
-      paddingBottom: theme.spacing(0.5),
-    },
-    libList: {
-      "column-count": 2,
-      "column-gap": theme.spacing(2),
-    },
-    libEntry: {
-      paddingBottom: theme.spacing(1),
-      "break-inside": "avoid-column",
-    },
-    toitdoc: {
-      paddingTop: theme.spacing(0.3),
-    },
-  });
+const useStyles = makeStyles()((theme: Theme) => ({
+  section: {
+    paddingTop: theme.spacing(2),
+    paddingBottom: theme.spacing(0.5),
+  },
+  libList: {
+    "column-count": 2,
+    "column-gap": theme.spacing(2),
+  },
+  libEntry: {
+    paddingBottom: theme.spacing(1),
+    "break-inside": "avoid-column",
+  },
+  toitdoc: {
+    paddingTop: theme.spacing(0.3),
+  },
+}));
 
-export interface SummaryViewProps extends WithStyles<typeof styles> {
+export interface SummaryViewProps {
   libraries: Libraries;
 }
 
-class SummaryView extends React.PureComponent<SummaryViewProps> {
-  render(): JSX.Element {
-    const fundamentals: Array<Library> = [];
-    const justThere: Array<Library> = [];
-    const misc: Array<Library> = [];
-    Object.values(this.props.libraries).forEach((lib) => {
-      switch (lib.category) {
-        case CATEGORY_FUNDAMENTAL:
-          fundamentals.push(lib);
-          break;
-        case CATEGORY_JUST_THERE:
-          justThere.push(lib);
-          break;
-        case CATEGORY_MISC:
-          misc.push(lib);
-          break;
-      }
-    });
-
-    const classes = this.props.classes;
-
-    const renderSection = (
-      array: Array<Library>,
-      name?: string
-    ): JSX.Element => {
-      return (
-        <div key={name}>
-          {name && (
-            <Typography variant="h4" className={classes.section}>
-              {name}
-            </Typography>
-          )}
-          <div className={classes.libList}>
-            {array.map((lib) => (
-              <div key={lib.name} className={classes.libEntry}>
-                <Link to={libraryUrlFromRef(lib.id)}>{lib.name}</Link>
-                {lib.toitdoc && (
-                  <div className={classes.toitdoc}>
-                    <Toitdocs value={lib.toitdoc} headerOnly={true} />
-                  </div>
-                )}
-              </div>
-            ))}
-          </div>
-        </div>
-      );
-    };
+export default function SummaryView(props: SummaryViewProps): JSX.Element {
+  const { classes } = useStyles();
 
-    // Shortcut if the viewer is used for non-core libraries in which
-    // case there should only be misc libraries.
-    if (fundamentals.length === 0 && justThere.length === 0) {
-      return renderSection(misc);
+  const fundamentals: Array<Library> = [];
+  const justThere: Array<Library> = [];
+  const misc: Array<Library> = [];
+  Object.values(props.libraries).forEach((lib) => {
+    switch (lib.category) {
+      case CATEGORY_FUNDAMENTAL:
+        fundamentals.push(lib);
+        break;
+      case CATEGORY_JUST_THERE:
+        justThere.push(lib);
+        break;
+      case CATEGORY_MISC:
+        misc.push(lib);
+        break;
     }
+  });
+
+  const renderSection = (
+    array: Array<Library>,
+    name?: string
+  ): JSX.Element => {
     return (
-      <>
-        {renderSection(fundamentals, "Fundamental")}
-        {renderSection(justThere, "Framework")}
-        {renderSection(misc, "Misc")}
-      </>
+      <div key={name}>
+        {name && (
+          <Typography variant="h4" className={classes.section}>
+            {name}
+          </Typography>
+        )}
+        <div className={classes.libList}>
+          {array.map((lib) => (
+            <div key={lib.name} className={classes.libEntry}>
+              <Link to={libraryUrlFromRef(lib.id)}>{lib.name}</Link>
+              {lib.toitdoc && (
+                <div className={classes.toitdoc}>
+                  <Toitdocs value={lib.toitdoc} headerOnly={true} />
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
     );
+  };
+
+  // Shortcut if the viewer is used for non-core libraries in which
+  // case there should only be misc libraries.
+  if (fundamentals.length === 0 && justThere.length === 0) {
+    return renderSection(misc);
   }
+  return (
+    <>
+      {renderSection(fundamentals, "Fundamental")}
+      {renderSection(justThere, "Framework")}
+      {renderSection(misc, "Misc")}
+    </>
+  );
 }
-
-export default withStyles(styles)(SummaryView);
diff --git a/src/components/main/WelcomeFolderPage.tsx b/src/components/main/WelcomeFolderPage.tsx
index f941703f..82db5705 100644
--- a/src/components/main/WelcomeFolderPage.tsx
+++ b/src/components/main/WelcomeFolderPage.tsx
@@ -2,44 +2,31 @@
 // Use of this source code is governed by an MIT-style license that can be
 // found in the LICENSE file.
 
-import {
-  createStyles,
-  StyleRules,
-  Theme,
-  Typography,
-  withStyles,
-  WithStyles,
-} from "@material-ui/core";
-import React from "react";
+import { Theme, Typography } from "@mui/material";
+import { makeStyles } from "tss-react/mui";
 
-const styles = (theme: Theme): StyleRules =>
-  createStyles({
-    header: {
-      paddingBottom: theme.spacing(4),
-    },
-    section: {
-      paddingBottom: theme.spacing(2),
-    },
-  });
+const useStyles = makeStyles()((theme: Theme) => ({
+  header: {
+    paddingBottom: theme.spacing(4),
+  },
+  section: {
+    paddingBottom: theme.spacing(2),
+  },
+}));
 
-type WelcomeFolderPageProps = WithStyles<typeof styles>;
-
-class WelcomeFolderPage extends React.PureComponent<WelcomeFolderPageProps> {
-  render(): JSX.Element {
-    return (
-      <>
-        <Typography variant="h3" className={this.props.classes.header}>
-          Toitdoc Viewer
-        </Typography>
-        <Typography className={this.props.classes.section}>
-          Welcome to the Toitdoc viewer.
-        </Typography>
-        <Typography className={this.props.classes.section}>
-          Select the library you want to view from the list on the left.
-        </Typography>
-      </>
-    );
-  }
+export default function WelcomeFolderPage(): JSX.Element {
+  const { classes } = useStyles();
+  return (
+    <>
+      <Typography variant="h3" className={classes.header}>
+        Toitdoc Viewer
+      </Typography>
+      <Typography className={classes.section}>
+        Welcome to the Toitdoc viewer.
+      </Typography>
+      <Typography className={classes.section}>
+        Select the library you want to view from the list on the left.
+      </Typography>
+    </>
+  );
 }
-
-export default withStyles(styles)(WelcomeFolderPage);
diff --git a/src/components/main/WelcomePage.tsx b/src/components/main/WelcomePage.tsx
index 11e0ab90..dc180c75 100644
--- a/src/components/main/WelcomePage.tsx
+++ b/src/components/main/WelcomePage.tsx
@@ -2,72 +2,59 @@
 // Use of this source code is governed by an MIT-style license that can be
 // found in the LICENSE file.
 
-import {
-  createStyles,
-  StyleRules,
-  Theme,
-  Typography,
-  withStyles,
-  WithStyles,
-} from "@material-ui/core";
-import React from "react";
+import { Theme, Typography } from "@mui/material";
+import { makeStyles } from "tss-react/mui";
 import Summary from "../../containers/main/Summary";
 import CodeBlock from "../general/CodeBlock";
 
-const styles = (theme: Theme): StyleRules =>
-  createStyles({
-    header: {
-      paddingBottom: theme.spacing(4),
-    },
-    section: {
-      paddingBottom: theme.spacing(2),
-    },
-    packages: {
-      paddingBottom: theme.spacing(1),
-    },
-  });
+const useStyles = makeStyles()((theme: Theme) => ({
+  header: {
+    paddingBottom: theme.spacing(4),
+  },
+  section: {
+    paddingBottom: theme.spacing(2),
+  },
+  packages: {
+    paddingBottom: theme.spacing(1),
+  },
+}));
 
-type WelcomePageProps = WithStyles<typeof styles>;
-
-class WelcomePage extends React.PureComponent<WelcomePageProps> {
-  render(): JSX.Element {
-    return (
-      <>
-        <Typography variant="h3" className={this.props.classes.header}>
-          Toit standard libraries
-        </Typography>
-        <Typography className={this.props.classes.section}>
-          Welcome to the standard libraries for the Toit programming language.
-          The Toit SDK contains a vast amount of libraries, ready-to use classes
-          and functionalities that allow a fast and easy use of Toit. This
-          documentation contains the structure of the Toit libraries.
+export default function WelcomePage(): JSX.Element {
+  const { classes } = useStyles();
+  return (
+    <>
+      <Typography variant="h3" className={classes.header}>
+        Toit standard libraries
+      </Typography>
+      <Typography className={classes.section}>
+        Welcome to the standard libraries for the Toit programming language.
+        The Toit SDK contains a vast amount of libraries, ready-to use classes
+        and functionalities that allow a fast and easy use of Toit. This
+        documentation contains the structure of the Toit libraries.
+      </Typography>
+      <Typography className={classes.section}>
+        Except for the <b>core</b> library, you must import a library before
+        you can use it. Here is an example of how to do it:
+      </Typography>
+      <CodeBlock
+        code={
+          "import io\n" +
+          "import encoding.json\n" +
+          "import net.tcp as net\n" +
+          "import uuid show *\n" +
+          "import fixed-point show FixedPoint"
+        }
+      />
+      <Summary />
+      <div>
+        <Typography variant="h4" className={classes.packages}>
+          Packages
         </Typography>
-        <Typography className={this.props.classes.section}>
-          Except for the <b>core</b> library, you must import a library before
-          you can use it. Here is an example of how to do it:
+        <Typography className={classes.section}>
+          Additional libraries are distributed as packages. You can find them
+          at <a href="https://pkg.toit.io/">pkg.toit.io</a>.
         </Typography>
-        <CodeBlock
-          code={
-            "import io\n" +
-            "import encoding.json\n" +
-            "import net.tcp as net\n" +
-            "import uuid show *\n" +
-            "import fixed-point show FixedPoint"
-          }
-        />
-        <Summary />
-        <div>
-          <Typography variant="h4" className={this.props.classes.packages}>
-            Packages
-          </Typography>
-          <Typography className={this.props.classes.section}>
-            Additional libraries are distributed as packages. You can find them
-            at <a href="https://pkg.toit.io/">pkg.toit.io</a>.
-          </Typography>
-        </div>
-      </>
-    );
-  }
+      </div>
+    </>
+  );
 }
-
-export default withStyles(styles)(WelcomePage);
diff --git a/src/components/navigation/LibraryNavigation.tsx b/src/components/navigation/LibraryNavigation.tsx
index 1d0a4cdb..efd90b76 100644
--- a/src/components/navigation/LibraryNavigation.tsx
+++ b/src/components/navigation/LibraryNavigation.tsx
@@ -2,23 +2,21 @@
 // Use of this source code is governed by an MIT-style license that can be
 // found in the LICENSE file.
 
-import { createStyles, Theme } from "@material-ui/core";
-import { makeStyles } from "@material-ui/core/styles";
+import { Theme } from "@mui/material/styles";
 import React from "react";
 import { Link } from "react-router-dom";
+import { makeStyles } from "tss-react/mui";
 import { libraryUrlFromRef, topLevelRefToId } from "../../misc/util";
 import { Library } from "../../model/model";
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    subLibraries: {
-      paddingLeft: theme.spacing(1),
-    },
-    openLibrary: {
-      color: `${theme.palette.primary.main} !important`,
-    },
-  })
-);
+const useStyles = makeStyles()((theme: Theme) => ({
+  subLibraries: {
+    paddingLeft: theme.spacing(1),
+  },
+  openLibrary: {
+    color: `${theme.palette.primary.main} !important`,
+  },
+}));
 
 export type LibraryNavigationProps = {
   library: Library;
@@ -29,7 +27,7 @@ const LibraryNavigation: React.FC<LibraryNavigationProps> = ({
   library,
   openLibrary,
 }: LibraryNavigationProps) => {
-  const classes = useStyles();
+  const { classes } = useStyles();
   const showSubLibraries = openLibrary?.split("/")[0] === library.name;
   const openSubLibrary = openLibrary?.split("/").slice(1).join("/");
   return (
diff --git a/src/components/navigation/NavigationView.tsx b/src/components/navigation/NavigationView.tsx
index 20613e4c..5251c0ba 100644
--- a/src/components/navigation/NavigationView.tsx
+++ b/src/components/navigation/NavigationView.tsx
@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import styled from "@emotion/styled";
-import { Typography } from "@material-ui/core";
+import { Typography } from "@mui/material";
 import React from "react";
 import { useSelector } from "react-redux";
 import { Link, RouteComponentProps } from "react-router-dom";
@@ -18,6 +18,7 @@ const Wrapper = styled.div`
   height: 100%;
   overflow-y: scroll;
   padding: 3rem;
+  box-sizing: border-box;
   a {
     color: ${({ theme }) => theme.palette.text.primary};
     text-decoration: none;
@@ -48,7 +49,7 @@ const NavigationView: React.FC<NavigationProps> = ({
   );
 
   return (
-    <Wrapper className={className}>
+    <Wrapper className={className} data-testid="sidebar">
       <Link to="/">
         <img alt="Toit" src={logo} height="32px"></img>
       </Link>
diff --git a/yarn.lock b/yarn.lock
index e8f4666f..2b02e30c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1069,7 +1069,7 @@
   dependencies:
     core-js-pure "^3.48.0"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.3", "@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.9.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.3", "@babel/runtime@^7.23.9", "@babel/runtime@^7.28.6", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.28.6"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.28.6.tgz#d267a43cb1836dc4d182cce93ae75ba954ef6d2b"
   integrity sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==
@@ -1274,7 +1274,7 @@
     source-map "^0.5.7"
     stylis "4.2.0"
 
-"@emotion/cache@^11.14.0":
+"@emotion/cache@*", "@emotion/cache@^11.13.5", "@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==
@@ -1285,11 +1285,6 @@
     "@emotion/weak-memoize" "^0.4.0"
     stylis "4.2.0"
 
-"@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/hash@^0.9.2":
   version "0.9.2"
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.2.tgz#ff9221b9f58b4dfe61e619a7788734bd63f6898b"
@@ -1321,7 +1316,7 @@
     "@emotion/weak-memoize" "^0.4.0"
     hoist-non-react-statics "^3.3.1"
 
-"@emotion/serialize@^1.3.3":
+"@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==
@@ -1359,7 +1354,7 @@
   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@^1.4.2":
+"@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==
@@ -1766,76 +1761,93 @@
   resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz#4fc56c15c580b9adb7dc3c333a134e540b44bfb1"
   integrity sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==
 
-"@material-ui/core@^4.11.0":
-  version "4.12.4"
-  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.4.tgz#4ac17488e8fcaf55eb6a7f5efb2a131e10138a73"
-  integrity sha512-tr7xekNlM9LjA6pagJmL8QCgZXaubWUwkJnoYcMKd4gw/t4XiyvnTkjdGrUVicyB2BsdaAv1tvow45bPM4sSwQ==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-    "@material-ui/styles" "^4.11.5"
-    "@material-ui/system" "^4.12.2"
-    "@material-ui/types" "5.1.0"
-    "@material-ui/utils" "^4.11.3"
-    "@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"
-
-"@material-ui/icons@^4.9.1":
-  version "4.11.3"
-  resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.11.3.tgz#b0693709f9b161ce9ccde276a770d968484ecff1"
-  integrity sha512-IKHlyx6LDh8n19vzwH5RtHIOHl9Tu90aAAxcbWME6kp4dmvODM3UvOHJeMIDzUbd4muuJKHmlNoBN+mDY4XkBA==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-
-"@material-ui/styles@^4.11.5":
-  version "4.11.5"
-  resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.5.tgz#19f84457df3aafd956ac863dbe156b1d88e2bbfb"
-  integrity sha512-o/41ot5JJiUsIETME9wVLAJrmIWL3j0R0Bj2kCOLbSfqEkKf0fmaPt+5vtblUh5eXr2S+J/8J3DaCb10+CzPGA==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-    "@emotion/hash" "^0.8.0"
-    "@material-ui/types" "5.1.0"
-    "@material-ui/utils" "^4.11.3"
-    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"
+"@mui/core-downloads-tracker@^5.16.14":
+  version "5.18.0"
+  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.18.0.tgz#85019a8704b0f63305fc5600635ee663810f2b66"
+  integrity sha512-jbhwoQ1AY200PSSOrNXmrFCaSDSJWP7qk6urkTmIirvRXDROkqe+QwcLlUiw/PrREwsIF/vm3/dAXvjlMHF0RA==
+
+"@mui/icons-material@5.16.14":
+  version "5.16.14"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.16.14.tgz#4fdecb05c15b1696f6f668fc29d549875544c892"
+  integrity sha512-heL4S+EawrP61xMXBm59QH6HODsu0gxtZi5JtnXF2r+rghzyU/3Uftlt1ij8rmJh+cFdKTQug1L9KkZB5JgpMQ==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+
+"@mui/material@5.16.14":
+  version "5.16.14"
+  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.16.14.tgz#da8a75822f039d8c1b0ab7fb4146d767c2f9248a"
+  integrity sha512-eSXQVCMKU2xc7EcTxe/X/rC9QsV2jUe8eLM3MUCPYbo6V52eCE436akRIvELq/AqZpxx2bwkq7HC0cRhLB+yaw==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@mui/core-downloads-tracker" "^5.16.14"
+    "@mui/system" "^5.16.14"
+    "@mui/types" "^7.2.15"
+    "@mui/utils" "^5.16.14"
+    "@popperjs/core" "^2.11.8"
+    "@types/react-transition-group" "^4.4.10"
+    clsx "^2.1.0"
+    csstype "^3.1.3"
+    prop-types "^15.8.1"
+    react-is "^19.0.0"
+    react-transition-group "^4.4.5"
 
-"@material-ui/system@^4.12.2":
-  version "4.12.2"
-  resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.12.2.tgz#f5c389adf3fce4146edd489bf4082d461d86aa8b"
-  integrity sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==
+"@mui/private-theming@^5.17.1":
+  version "5.17.1"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.17.1.tgz#b4b6fbece27830754ef78186e3f1307dca42f295"
+  integrity sha512-XMxU0NTYcKqdsG8LRmSoxERPXwMbp16sIXPcLVgLGII/bVNagX0xaheWAwFv8+zDK7tI3ajllkuD3GZZE++ICQ==
   dependencies:
-    "@babel/runtime" "^7.4.4"
-    "@material-ui/utils" "^4.11.3"
-    csstype "^2.5.2"
-    prop-types "^15.7.2"
+    "@babel/runtime" "^7.23.9"
+    "@mui/utils" "^5.17.1"
+    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==
+"@mui/styled-engine@^5.18.0":
+  version "5.18.0"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.18.0.tgz#914cca1385bb33ce0cde31721f529c8bd7fa301c"
+  integrity sha512-BN/vKV/O6uaQh2z5rXV+MBlVrEkwoS/TK75rFQ2mjxA7+NBo8qtTAOA4UaM0XeJfn7kh2wZ+xQw2HAx0u+TiBg==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@emotion/cache" "^11.13.5"
+    "@emotion/serialize" "^1.3.3"
+    csstype "^3.1.3"
+    prop-types "^15.8.1"
 
-"@material-ui/utils@^4.11.3":
-  version "4.11.3"
-  resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.3.tgz#232bd86c4ea81dab714f21edad70b7fdf0253942"
-  integrity sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==
+"@mui/system@^5.16.14":
+  version "5.18.0"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.18.0.tgz#e55331203a40584b26c5a855a07949ac8973bfb6"
+  integrity sha512-ojZGVcRWqWhu557cdO3pWHloIGJdzVtxs3rk0F9L+x55LsUjcMUVkEhiF7E4TMxZoF9MmIHGGs0ZX3FDLAf0Xw==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@mui/private-theming" "^5.17.1"
+    "@mui/styled-engine" "^5.18.0"
+    "@mui/types" "~7.2.15"
+    "@mui/utils" "^5.17.1"
+    clsx "^2.1.0"
+    csstype "^3.1.3"
+    prop-types "^15.8.1"
+
+"@mui/types@^7.2.15":
+  version "7.4.11"
+  resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.4.11.tgz#d9c8e028a354a52fe86cb8ffbc306faf4c090608"
+  integrity sha512-fZ2xO9D08IKOxO2oUBi1nnVKH6oJUD+64cnv4YAaFoC0E5+i1+S5AHbNqqvZlYYsbPEQ6qEVwuBqY3jl5W4G+Q==
   dependencies:
-    "@babel/runtime" "^7.4.4"
-    prop-types "^15.7.2"
-    react-is "^16.8.0 || ^17.0.0"
+    "@babel/runtime" "^7.28.6"
+
+"@mui/types@~7.2.15":
+  version "7.2.24"
+  resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.24.tgz#5eff63129d9c29d80bbf2d2e561bd0690314dec2"
+  integrity sha512-3c8tRt/CbWZ+pEg7QpSwbdxOk36EfmhbKf6AGZsD1EcLDLTSZoxxJ86FVtcjxvjuhdyBiWKSTGZFaXCnidO2kw==
+
+"@mui/utils@^5.16.14", "@mui/utils@^5.17.1":
+  version "5.17.1"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.17.1.tgz#72ba4ffa79f7bdf69d67458139390f18484b6e6b"
+  integrity sha512-jEZ8FTqInt2WzxDV8bhImWBqeQRD99c/id/fq83H0ER9tFl+sfZlaAoCdznGvbSQQ9ividMxqSV2c7cC1vBcQg==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@mui/types" "~7.2.15"
+    "@types/prop-types" "^15.7.12"
+    clsx "^2.1.1"
+    prop-types "^15.8.1"
+    react-is "^19.0.0"
 
 "@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1":
   version "5.1.1-v1"
@@ -1878,6 +1890,11 @@
     schema-utils "^4.2.0"
     source-map "^0.7.3"
 
+"@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==
+
 "@reduxjs/toolkit@^1.4.0":
   version "1.9.7"
   resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.9.7.tgz#7fc07c0b0ebec52043f8cb43510cf346405f78a6"
@@ -2391,7 +2408,7 @@
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.7.3.tgz#3e51a17e291d01d17d3fc61422015a933af7a08f"
   integrity sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==
 
-"@types/prop-types@*":
+"@types/prop-types@*", "@types/prop-types@^15.7.12":
   version "15.7.15"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.15.tgz#e6e5a86d602beaca71ce5163fadf5f95d70931c7"
   integrity sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==
@@ -2451,7 +2468,7 @@
     "@types/history" "^4.7.11"
     "@types/react" "*"
 
-"@types/react-transition-group@^4.2.0":
+"@types/react-transition-group@^4.4.10":
   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==
@@ -3758,10 +3775,10 @@ cliui@^7.0.2:
     strip-ansi "^6.0.0"
     wrap-ansi "^7.0.0"
 
-clsx@^1.0.4:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
-  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+clsx@^2.1.0, clsx@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
 
 co@^4.6.0:
   version "4.6.0"
@@ -4085,14 +4102,6 @@ css-tree@^1.1.2, css-tree@^1.1.3:
     mdn-data "2.0.14"
     source-map "^0.6.1"
 
-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"
-
 css-what@^3.2.1:
   version "3.4.2"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.4.2.tgz#ea7026fcb01777edbde52124e21f327e7ae950e4"
@@ -4191,12 +4200,7 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
-csstype@^2.5.2:
-  version "2.6.21"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.21.tgz#2efb85b7cc55c80017c66a5ad7cbd931fda3a90e"
-  integrity sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==
-
-csstype@^3.0.2, csstype@^3.2.2:
+csstype@^3.0.2, csstype@^3.1.3, csstype@^3.2.2:
   version "3.2.3"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.2.3.tgz#ec48c0f3e993e50648c86da559e2610995cf989a"
   integrity sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==
@@ -6006,11 +6010,6 @@ human-signals@^2.1.0:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
   integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
 
-hyphenate-style-name@^1.0.3:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz#1797bf50369588b47b72ca6d5e65374607cf4436"
-  integrity sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==
-
 iconv-lite@0.4.24, iconv-lite@~0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -6248,11 +6247,6 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
-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 sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g==
-
 is-installed-globally@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.4.0.tgz#9a0fd407949c30f86eb6959ef1b7994ed0b7b520"
@@ -7207,76 +7201,6 @@ jsprim@^2.0.2:
     json-schema "0.4.0"
     verror "1.10.0"
 
-jss-plugin-camel-case@^10.5.1:
-  version "10.10.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.10.0.tgz#27ea159bab67eb4837fa0260204eb7925d4daa1c"
-  integrity sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    hyphenate-style-name "^1.0.3"
-    jss "10.10.0"
-
-jss-plugin-default-unit@^10.5.1:
-  version "10.10.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.10.0.tgz#db3925cf6a07f8e1dd459549d9c8aadff9804293"
-  integrity sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    jss "10.10.0"
-
-jss-plugin-global@^10.5.1:
-  version "10.10.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.10.0.tgz#1c55d3c35821fab67a538a38918292fc9c567efd"
-  integrity sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    jss "10.10.0"
-
-jss-plugin-nested@^10.5.1:
-  version "10.10.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.10.0.tgz#db872ed8925688806e77f1fc87f6e62264513219"
-  integrity sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    jss "10.10.0"
-    tiny-warning "^1.0.2"
-
-jss-plugin-props-sort@^10.5.1:
-  version "10.10.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.10.0.tgz#67f4dd4c70830c126f4ec49b4b37ccddb680a5d7"
-  integrity sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    jss "10.10.0"
-
-jss-plugin-rule-value-function@^10.5.1:
-  version "10.10.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.10.0.tgz#7d99e3229e78a3712f78ba50ab342e881d26a24b"
-  integrity sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    jss "10.10.0"
-    tiny-warning "^1.0.2"
-
-jss-plugin-vendor-prefixer@^10.5.1:
-  version "10.10.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.10.0.tgz#c01428ef5a89f2b128ec0af87a314d0c767931c7"
-  integrity sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    css-vendor "^2.0.8"
-    jss "10.10.0"
-
-jss@10.10.0, jss@^10.5.1:
-  version "10.10.0"
-  resolved "https://registry.yarnpkg.com/jss/-/jss-10.10.0.tgz#a75cc85b0108c7ac8c7b7d296c520a3e4fbc6ccc"
-  integrity sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==
-  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", jsx-ast-utils@^3.3.5:
   version "3.3.5"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz#4766bd05a8e2a11af222becd19e15575e52a853a"
@@ -8132,11 +8056,6 @@ pkg-up@^3.1.0:
   dependencies:
     find-up "^3.0.0"
 
-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==
-
 possible-typed-array-names@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz#93e3582bc0e5426586d9d07b79ee40fc841de4ae"
@@ -8977,7 +8896,7 @@ react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0:
   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.1, react-is@^17.0.2:
+react-is@^17.0.1, react-is@^17.0.2:
   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==
@@ -8987,6 +8906,11 @@ react-is@^18.0.0, react-is@^18.3.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
   integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
 
+react-is@^19.0.0:
+  version "19.2.4"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-19.2.4.tgz#a080758243c572ccd4a63386537654298c99d135"
+  integrity sha512-W+EWGn2v0ApPKgKKCy/7s7WHXkboGcsrXE+2joLyVxkbyVQfO3MUEaUQDHoSmb8TFFrSKYa9mw64WZHNHSDzYA==
+
 react-redux@^7.2.1:
   version "7.2.9"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.9.tgz#09488fbb9416a4efe3735b7235055442b042481d"
@@ -9094,7 +9018,7 @@ react-scripts@^5.0.1:
   optionalDependencies:
     fsevents "^2.3.2"
 
-react-transition-group@^4.4.0:
+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==
@@ -10322,7 +10246,7 @@ tiny-invariant@^1.0.2:
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.3.tgz#46680b7a873a0d5d10005995eb90a70d74d60127"
   integrity sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==
 
-tiny-warning@^1.0.0, tiny-warning@^1.0.2:
+tiny-warning@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
@@ -10411,6 +10335,15 @@ tslib@^2.0.3, tslib@^2.1.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
   integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
 
+tss-react@^4.9.20:
+  version "4.9.20"
+  resolved "https://registry.yarnpkg.com/tss-react/-/tss-react-4.9.20.tgz#4fa8257183ba57729b17be88d58a6761daa6f1f4"
+  integrity sha512-+tecs5hEKZmPqNDtiq5Gx2GxjrQXbV5JuOeWkV+eOf99qiIUkE3Vcn07zNLHws06iPfH2H4t5VqoVjIdCMS7hw==
+  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"