.

.
.
.
.
.
.
.
.

website/package.json

@@ -9,7 +9,11 @@
     "@deck.gl/core": "^8.9.36",
     "@deck.gl/layers": "^8.9.36",
     "@deck.gl/react": "^8.9.36",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "@mui/material": "^5.0.0",
+    "@mui/styles": "^6.4.1",
+    "@tanstack/react-query": "^4.0.5",
     "@turf/turf": "^7.2.0",
     "@types/cors": "^2.8.17",
     "@types/d3": "^7.4.3",
@@ -31,7 +35,6 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-feather": "^2.0.10",
-    "@tanstack/react-query": "^4.0.5",
     "swiss-maps": "^4.5.0",
     "topojson": "^3.0.2",
     "typescript": "^5.7.3",

website/src/components/Examples/Examples.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
-import * as MUI from "@material-ui/core";
+import * as MUI from "@mui/material";
+import { makeStyles } from '@mui/styles';
 
 /**
  * The underlying DOM element which is rendered by this component.
@@ -78,7 +79,7 @@ function Examples(props: Props, ref: any) {
   );
 }
 
-const useStyles = MUI.makeStyles(
+const useStyles = makeStyles(
   (theme) => ({
     root: {
       padding: theme.spacing(15, 3),

website/src/components/Footer/Footer.tsx

@@ -1,7 +1,8 @@
 import * as React from "react";
-import * as MUI from "@material-ui/core";
+import * as MUI from "@mui/material";
 import * as colors from "src/theme/colors";
 import * as Icons from "@/icons";
+import { makeStyles } from '@mui/styles';
 
 /**
  * The underlying DOM element which is rendered by this component.
@@ -70,7 +71,7 @@ function Footer(props: Props, ref: any) {
   );
 }
 
-const useStyles = MUI.makeStyles(
+const useStyles = makeStyles(
   (theme) => ({
     root: {
       padding: theme.spacing(5, 7.5),

website/src/components/Generator/Generator.tsx

@@ -6,7 +6,8 @@ import { Provider, State } from "./context";
 import Export from "./internal/Export";
 import Panel from "./internal/Panel";
 import Stats from "./internal/Stats";
-import * as MUI from "@material-ui/core";
+import * as MUI from "@mui/material";
+import { makeStyles } from '@mui/styles';
 
 /**
  * The underlying DOM element which is rendered by this component.
@@ -44,7 +45,7 @@ function Generator(props: Props, ref: any) {
   );
 }
 
-const useStyles = MUI.makeStyles(
+const useStyles = makeStyles(
   (theme) => ({
     root: {
       backgroundColor: "#F9F9F9",

website/src/components/Generator/internal/Export.tsx

@@ -1,9 +1,10 @@
-import * as MUI from "@material-ui/core";
+import * as MUI from "@mui/material";
 import * as React from "react";
 import { Download } from "react-feather";
 import { downloadUrl } from "src/shared";
 import { useContext } from "../context";
 import { domDataUrlDownload } from "../domain/dom";
+import { makeStyles } from '@mui/styles';
 
 /**
  * The underlying DOM element which is rendered by this component.
@@ -69,7 +70,7 @@ function Export(props: Props) {
   );
 }
 
-const useStyles = MUI.makeStyles(
+const useStyles = makeStyles(
   (theme) => ({
     root: {
       position: "sticky",

website/src/components/Generator/internal/Panel.tsx

@@ -1,11 +1,12 @@
-import * as MUI from "@material-ui/core";
+import * as MUI from "@mui/material";
 import * as React from "react";
 import {
   SupportedColorSchema,
   SUPPORTED_COLOR_LIST
 } from "src/domain/color-schema";
 import { useContext } from "../context";
 import ShapeOption from "./ShapeOption";
+import { makeStyles } from '@mui/styles';
 
 /**
  * The underlying DOM element which is rendered by this component.
@@ -229,7 +230,7 @@ function Panel(props: Props) {
   );
 }
 
-const useStyles = MUI.makeStyles(
+const useStyles = makeStyles(
   (theme) => ({
     root: {
       padding: theme.spacing(5),

website/src/components/Generator/internal/Preview.tsx

@@ -1,7 +1,7 @@
 import { MapController } from "@deck.gl/core";
 import { GeoJsonLayer } from "@deck.gl/layers";
 import DeckGL from "@deck.gl/react";
-import * as MUI from "@material-ui/core";
+import * as MUI from "@mui/material";
 import clsx from "clsx";
 import * as d3 from "d3";
 import * as React from "react";
@@ -10,6 +10,7 @@ import { useImmer } from "use-immer";
 import { useContext, Value } from "../context";
 import { CH_BBOX, constrainZoom, LINE_COLOR } from "../domain/deck-gl";
 import { useGeoData } from "src/domain/geodata";
+import { makeStyles } from '@mui/styles';
 
 interface Props {}
 
@@ -257,7 +258,7 @@ export const Preview = React.forwardRef(({}: Props, deckRef: any) => {
   );
 });
 
-const useStyles = MUI.makeStyles(
+const useStyles = makeStyles(
   (theme) => ({
     root: {
       zIndex: 1,

website/src/components/Generator/internal/ShapeOption.tsx

@@ -1,8 +1,9 @@
-import * as MUI from "@material-ui/core";
+import * as MUI from "@mui/material";
 import * as React from "react";
 import { Shape } from "src/shared";
 import * as colors from "src/theme/colors";
 import { useContext } from "../context";
+import { makeStyles } from '@mui/styles';
 
 export default function ShapeOption({
   shape,
@@ -53,7 +54,7 @@ export default function ShapeOption({
   );
 }
 
-const useStyles = MUI.makeStyles(
+const useStyles = makeStyles(
   (theme) => ({
     root: {
       margin: theme.spacing(0, -1),

website/src/components/Generator/internal/Stats.tsx

@@ -1,9 +1,10 @@
-import * as MUI from "@material-ui/core";
+import * as MUI from "@mui/material";
 import * as React from "react";
 import { downloadUrl } from "src/shared";
 import { useImmer } from "use-immer";
 import { useContext } from "../context";
 import { useQuery } from "@tanstack/react-query";
+import { makeStyles } from '@mui/styles';
 
 /**
  * The underlying DOM element which is rendered by this component.
@@ -68,7 +69,7 @@ function Stats(props: Props) {
   );
 }
 
-const useStyles = MUI.makeStyles(
+const useStyles = makeStyles(
   (theme) => ({
     root: {
       position: "absolute",

website/src/components/GitHub/GitHub.tsx

@@ -1,7 +1,8 @@
 import * as React from "react";
-import * as MUI from "@material-ui/core";
+import * as MUI from "@mui/material";
 import * as colors from "src/theme/colors";
 import { GitHub as IcGitHub } from "react-feather";
+import { makeStyles } from '@mui/styles';
 
 /**
  * The underlying DOM element which is rendered by this component.
@@ -34,7 +35,7 @@ function GitHub(props: Props, ref: any) {
   );
 }
 
-const useStyles = MUI.makeStyles(
+const useStyles = makeStyles(
   (theme) => ({
     root: {
       backgroundColor: colors.palette.purple[100],

website/src/components/Header/Header.tsx

@@ -1,6 +1,7 @@
-import * as MUI from "@material-ui/core";
+import * as MUI from "@mui/material";
 import Link from "next/link";
 import * as React from "react";
+import { makeStyles } from '@mui/styles';
 
 /**
  * The underlying DOM element which is rendered by this component.
@@ -69,7 +70,7 @@ function Header(props: Props, ref: any) {
   );
 }
 
-const useStyles = MUI.makeStyles(
+const useStyles = makeStyles(
   (theme) => ({
     root: {
       position: "relative",

website/src/pages/_document.tsx

@@ -1,5 +1,5 @@
 import { generateClassName } from "@/theme";
-import { ServerStyleSheets } from "@material-ui/core/styles";
+import { ServerStyleSheets } from "@mui/styles";
 import Document, {
   DocumentContext,
   Head,

website/src/pages/docs/index.tsx

@@ -1,9 +1,10 @@
 import { domCopyText } from "@/components/Generator/domain/dom";
 import LayoutDefault from "@/components/Layout/LayoutDefault";
-import * as MUI from "@material-ui/core";
+import * as MUI from "@mui/material";
 import { GetServerSideProps } from "next";
 import { Copy, Download } from "react-feather";
 import { downloadUrl } from "src/shared";
+import { makeStyles } from '@mui/styles';
 
 type Props = { host: string };
 
@@ -181,7 +182,7 @@ export default function Page(props: Props) {
   );
 }
 
-const useStyles = MUI.makeStyles((theme) => ({
+const useStyles = makeStyles((theme) => ({
   root: {},
   container: {
     padding: "50px 60px",

website/src/pages/mutations.tsx

@@ -9,7 +9,7 @@ import {
   ListItemText,
   TextField,
   Typography,
-} from "@material-ui/core";
+} from "@mui/material";
 import dynamic from "next/dynamic";
 import { groupBy } from "fp-ts/lib/NonEmptyArray";
 import { GeoDataFeature, useGeoData } from "src/domain/geodata";
@@ -31,7 +31,7 @@ const MutationsMinimap = dynamic(
   () => import("../components/Mutations/Minimap"),
   {
     ssr: false,
-  }
+  },
 );
 
 const INITIAL_VIEW_STATE = {
@@ -223,7 +223,7 @@ export default function Page() {
         <Box
           display="grid"
           gridTemplateColumns="1fr 1fr"
-          gridColumnGap="1rem"
+          columnGap="1rem"
           height="100%"
         >
           <div>

website/src/theme/options.ts

@@ -1,10 +1,8 @@
-import { createTheme } from "@material-ui/core";
-import createPalette from "@material-ui/core/styles/createPalette";
-import createTypography, {
-  FontStyleOptions,
-} from "@material-ui/core/styles/createTypography";
+import { createTheme } from "@mui/material";
 import shadows from "./shadows";
 import * as colors from "./colors";
+import createTypography, { FontStyleOptions } from "@mui/material/styles/createTypography";
+import createPalette from "@mui/material/styles/createPalette";
 
 const t = createTheme({});
 

website/src/theme/provider.tsx

@@ -1,10 +1,11 @@
-import * as MUI from "@material-ui/core";
-import { createTheme } from "@material-ui/core";
+import * as MUI from "@mui/material";
+import { createTheme } from "@mui/material";
 import * as React from "react";
 import createGenerateClassName from "./createGenerateClassName";
 import options from "./options";
+import { StylesProvider } from "@mui/styles";
 
-declare module "@material-ui/core/styles/createTypography" {
+declare module "@mui/material/styles/createTypography" {
   interface TypographyOptions {
     display1: TypographyStyle;
     display2: TypographyStyle;
@@ -20,11 +21,17 @@ export const generateClassName = createGenerateClassName();
 
 export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
   return (
-    <MUI.StylesProvider generateClassName={generateClassName}>
+    <StylesProvider generateClassName={generateClassName}>
       <MUI.ThemeProvider theme={theme}>
         <MUI.CssBaseline />
         {children}
       </MUI.ThemeProvider>
-    </MUI.StylesProvider>
+    </StylesProvider>
   );
 };
+
+import { Theme, TypographyStyle } from "@mui/material/styles";
+
+declare module "@mui/styles" {
+  interface DefaultTheme extends Theme {}
+}