diff --git a/src/app/package.json b/src/app/package.json
index 4fbaa2e9e..dfab79635 100644
--- a/src/app/package.json
+++ b/src/app/package.json
@@ -7,6 +7,10 @@
   "license": "Apache-2.0",
   "browser": "lib.browser",
   "dependencies": {
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
+    "@mui/icons-material": "^5.0.0",
+    "@mui/material": "^5.0.0",
     "@system-dynamics/core": "^1.0.0",
     "@system-dynamics/diagram": "^1.0.0",
     "@system-dynamics/engine2": "^2.0.0"
diff --git a/src/diagram/AuxIcon.tsx b/src/diagram/AuxIcon.tsx
index faa007740..4e496c6e6 100644
--- a/src/diagram/AuxIcon.tsx
+++ b/src/diagram/AuxIcon.tsx
@@ -4,7 +4,7 @@
 
 import * as React from 'react';
 
-import SvgIcon from '@mui/material/SvgIcon';
+import SvgIcon from './components/SvgIcon';
 
 import styles from './AuxIcon.module.css';
 
@@ -19,5 +19,3 @@ export const AuxIcon: React.FunctionComponent = (props) => {
 };
 
 AuxIcon.displayName = 'Variable';
-
-(AuxIcon as any).muiName = 'AuxIcon';
diff --git a/src/diagram/Editor.module.css b/src/diagram/Editor.module.css
index f7db5d461..12768c59b 100644
--- a/src/diagram/Editor.module.css
+++ b/src/diagram/Editor.module.css
@@ -18,6 +18,19 @@
   width: 240px;
   margin-top: 12px;
   margin-left: 12px;
+  border-radius: 4px;
+  background: #fff;
+  box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
+}
+
+.snapshotCardContent {
+  padding: 16px;
+}
+
+.snapshotCardActions {
+  display: flex;
+  align-items: center;
+  padding: 8px;
 }
 
 .snapshotImg {
@@ -51,6 +64,9 @@
   right: 8px;
   height: 48px;
   width: 359px;
+  border-radius: 4px;
+  background: #fff;
+  box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
 }
 
 @media (min-width: 900px) and (max-width: 1199.95px) {
@@ -114,6 +130,3 @@
   background-color: var(--color-secondary);
 }
 
-:global(.MuiAutocomplete-option[data-focus="true"]) {
-  background: #ADD8E6;
-}
diff --git a/src/diagram/Editor.tsx b/src/diagram/Editor.tsx
index f1cd8c27b..2c7fa89f9 100644
--- a/src/diagram/Editor.tsx
+++ b/src/diagram/Editor.tsx
@@ -7,21 +7,13 @@ import * as React from 'react';
 import { List, Map, Set, Stack } from 'immutable';
 
 import clsx from 'clsx';
-import IconButton from '@mui/material/IconButton';
-import TextField from '@mui/material/TextField';
-import Autocomplete from '@mui/material/Autocomplete';
-import Paper from '@mui/material/Paper';
-import Snackbar from '@mui/material/Snackbar';
-import ClearIcon from '@mui/icons-material/Clear';
-import EditIcon from '@mui/icons-material/Edit';
-import MenuIcon from '@mui/icons-material/Menu';
-import SpeedDial, { CloseReason } from '@mui/material/SpeedDial';
-import SpeedDialAction from '@mui/material/SpeedDialAction';
-import SpeedDialIcon from '@mui/material/SpeedDialIcon';
-import { Card } from '@mui/material';
-import Button from '@mui/material/Button';
-import CardActions from '@mui/material/CardActions';
-import CardContent from '@mui/material/CardContent';
+import IconButton from './components/IconButton';
+import TextField from './components/TextField';
+import Autocomplete from './components/Autocomplete';
+import Snackbar from './components/Snackbar';
+import { ClearIcon, EditIcon, MenuIcon } from './components/icons';
+import SpeedDial, { CloseReason, SpeedDialAction, SpeedDialIcon } from './components/SpeedDial';
+import Button from './components/Button';
 import { canonicalize } from '@system-dynamics/core/canonicalize';
 
 import { Project as Engine2Project, SimlinErrorKind, SimlinUnitErrorKind } from '@system-dynamics/engine2';
@@ -416,17 +408,22 @@ export class Editor extends React.PureComponent<EditorProps, EditorState> {
     }));
   }
 
-  handleDialClick = (_event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+  handleDialClick = (_event: React.MouseEvent<HTMLButtonElement>) => {
     this.setState({
       dialOpen: !this.state.dialOpen,
       selectedTool: this.state.dialOpen ? undefined : this.state.selectedTool,
     });
   };
 
-  handleDialClose = (e: React.SyntheticEvent<{}>, reason: CloseReason) => {
+  handleDialClose = (e: React.SyntheticEvent, reason: CloseReason) => {
     if (reason === 'mouseLeave' || reason === 'blur') {
       return;
     }
+    // When an action is clicked, close the dial but keep the selected tool
+    if (reason === 'actionClick') {
+      this.setState({ dialOpen: false });
+      return;
+    }
     this.setState({
       dialOpen: false,
       selectedTool: undefined,
@@ -1681,7 +1678,7 @@ export class Editor extends React.PureComponent<EditorProps, EditorState> {
     const status = this.state.status;
 
     return (
-      <Paper className={styles.searchBar} elevation={2}>
+      <div className={styles.searchBar}>
         <IconButton
           className={styles.menuButton}
           color="inherit"
@@ -1709,7 +1706,7 @@ export class Editor extends React.PureComponent<EditorProps, EditorState> {
         </div>
         <div className={styles.divider} />
         <Status status={status} onClick={this.handleStatusClick} />
-      </Paper>
+      </div>
     );
   }
 
@@ -2045,7 +2042,7 @@ export class Editor extends React.PureComponent<EditorProps, EditorState> {
     this.setState({ selectedTool: undefined });
   };
 
-  handleSelectStock = (e: React.MouseEvent<HTMLDivElement>) => {
+  handleSelectStock = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
     this.setState({
@@ -2053,7 +2050,7 @@ export class Editor extends React.PureComponent<EditorProps, EditorState> {
     });
   };
 
-  handleSelectFlow = (e: React.MouseEvent<HTMLDivElement>) => {
+  handleSelectFlow = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
     this.setState({
@@ -2061,7 +2058,7 @@ export class Editor extends React.PureComponent<EditorProps, EditorState> {
     });
   };
 
-  handleSelectAux = (e: React.MouseEvent<HTMLDivElement>) => {
+  handleSelectAux = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
     this.setState({
@@ -2069,7 +2066,7 @@ export class Editor extends React.PureComponent<EditorProps, EditorState> {
     });
   };
 
-  handleSelectLink = (e: React.MouseEvent<HTMLDivElement>) => {
+  handleSelectLink = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
     this.setState({
@@ -2363,16 +2360,16 @@ export class Editor extends React.PureComponent<EditorProps, EditorState> {
     }
 
     return (
-      <Card className={styles.snapshotCard} elevation={2}>
-        <CardContent>
+      <div className={styles.snapshotCard}>
+        <div className={styles.snapshotCardContent}>
           <img src={URL.createObjectURL(snapshotBlob)} className={styles.snapshotImg} alt="diagram snapshot" />
-        </CardContent>
-        <CardActions>
+        </div>
+        <div className={styles.snapshotCardActions}>
           <Button size="small" color="primary" onClick={this.handleClearSnapshot}>
             Close
           </Button>
-        </CardActions>
-      </Card>
+        </div>
+      </div>
     );
   }
 
diff --git a/src/diagram/ErrorDetails.module.css b/src/diagram/ErrorDetails.module.css
index 26387a439..c87bbcf27 100644
--- a/src/diagram/ErrorDetails.module.css
+++ b/src/diagram/ErrorDetails.module.css
@@ -1,5 +1,8 @@
 .card {
   width: 359px;
+  border-radius: 4px;
+  background: #fff;
+  box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
 }
 
 @media (min-width: 900px) and (max-width: 1199.95px) {
@@ -15,6 +18,7 @@
 }
 
 .inner {
+  padding: 16px;
   padding-top: 72px;
 }
 
diff --git a/src/diagram/ErrorDetails.tsx b/src/diagram/ErrorDetails.tsx
index 364250f9d..0e02a532a 100644
--- a/src/diagram/ErrorDetails.tsx
+++ b/src/diagram/ErrorDetails.tsx
@@ -5,7 +5,6 @@
 import * as React from 'react';
 
 import { List, Map } from 'immutable';
-import { Card, CardContent, Typography } from '@mui/material';
 
 import { SimError, ModelError, EquationError, ErrorCode, UnitError } from '@system-dynamics/core/datamodel';
 import { errorCodeDescription } from '@system-dynamics/engine2';
@@ -32,7 +31,7 @@ export class ErrorDetails extends React.PureComponent<ErrorDetailsProps> {
       )
     ) {
       errors.push(
-        <Typography className={styles.list}>simulation error: {errorCodeDescription(simError.code)}</Typography>,
+        <div className={styles.list}>simulation error: {errorCodeDescription(simError.code)}</div>,
       );
     }
     if (!modelErrors.isEmpty()) {
@@ -42,19 +41,19 @@ export class ErrorDetails extends React.PureComponent<ErrorDetailsProps> {
         }
         const details = err.details;
         errors.push(
-          <Typography className={styles.list}>
+          <div className={styles.list}>
             model error: {errorCodeDescription(err.code)}
             {details ? `: ${details}` : undefined}
-          </Typography>,
+          </div>,
         );
       }
     }
     for (const [ident, errs] of varErrors) {
       for (const err of errs) {
         errors.push(
-          <Typography className={styles.list}>
+          <div className={styles.list}>
             variable "{ident}" error: {errorCodeDescription(err.code)}
-          </Typography>,
+          </div>,
         );
       }
     }
@@ -62,20 +61,20 @@ export class ErrorDetails extends React.PureComponent<ErrorDetailsProps> {
       for (const err of errs) {
         const details = err.details;
         errors.push(
-          <Typography className={styles.list}>
+          <div className={styles.list}>
             variable "{ident}" unit error: {errorCodeDescription(err.code)}
             {details ? `: ${details}` : undefined}
-          </Typography>,
+          </div>,
         );
       }
     }
 
     return (
-      <Card className={styles.card} elevation={1}>
-        <CardContent className={styles.inner}>
-          {errors.length > 0 ? errors : <Typography className={styles.yay}>Your model is error free!</Typography>}
-        </CardContent>
-      </Card>
+      <div className={styles.card}>
+        <div className={styles.inner}>
+          {errors.length > 0 ? errors : <div className={styles.yay}>Your model is error free!</div>}
+        </div>
+      </div>
     );
   }
 }
diff --git a/src/diagram/ErrorToast.tsx b/src/diagram/ErrorToast.tsx
index b2d55d767..5f3df7d56 100644
--- a/src/diagram/ErrorToast.tsx
+++ b/src/diagram/ErrorToast.tsx
@@ -5,13 +5,9 @@
 import * as React from 'react';
 
 import clsx from 'clsx';
-import IconButton from '@mui/material/IconButton';
-import SnackbarContent from '@mui/material/SnackbarContent';
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import CloseIcon from '@mui/icons-material/Close';
-import ErrorIcon from '@mui/icons-material/Error';
-import InfoIcon from '@mui/icons-material/Info';
-import WarningIcon from '@mui/icons-material/Warning';
+import IconButton from './components/IconButton';
+import { SnackbarContent } from './components/Snackbar';
+import { CheckCircleIcon, CloseIcon, ErrorIcon, InfoIcon, WarningIcon } from './components/icons';
 
 import styles from './ErrorToast.module.css';
 
diff --git a/src/diagram/FlowIcon.tsx b/src/diagram/FlowIcon.tsx
index 734674a80..e560e2067 100644
--- a/src/diagram/FlowIcon.tsx
+++ b/src/diagram/FlowIcon.tsx
@@ -4,7 +4,7 @@
 
 import * as React from 'react';
 
-import SvgIcon from '@mui/material/SvgIcon';
+import SvgIcon from './components/SvgIcon';
 
 import styles from './FlowIcon.module.css';
 
@@ -27,5 +27,3 @@ export class FlowIcon extends React.PureComponent {
     );
   }
 }
-
-(FlowIcon as any).muiName = 'FlowIcon';
diff --git a/src/diagram/LinkIcon.tsx b/src/diagram/LinkIcon.tsx
index 37482377c..e1d19b9e4 100644
--- a/src/diagram/LinkIcon.tsx
+++ b/src/diagram/LinkIcon.tsx
@@ -4,7 +4,7 @@
 
 import * as React from 'react';
 
-import SvgIcon from '@mui/material/SvgIcon';
+import SvgIcon from './components/SvgIcon';
 
 import styles from './LinkIcon.module.css';
 
@@ -28,5 +28,3 @@ export class LinkIcon extends React.PureComponent {
     );
   }
 }
-
-(LinkIcon as any).muiName = 'LinkIcon';
diff --git a/src/diagram/LookupEditor.module.css b/src/diagram/LookupEditor.module.css
index ca3b581b0..cd0a9e6e8 100644
--- a/src/diagram/LookupEditor.module.css
+++ b/src/diagram/LookupEditor.module.css
@@ -34,3 +34,13 @@
 .buttonRight {
   float: right;
 }
+
+.cardContent {
+  padding: 16px;
+}
+
+.cardActions {
+  display: flex;
+  align-items: center;
+  padding: 8px;
+}
diff --git a/src/diagram/LookupEditor.tsx b/src/diagram/LookupEditor.tsx
index 55ef6f64f..515c8d0ef 100644
--- a/src/diagram/LookupEditor.tsx
+++ b/src/diagram/LookupEditor.tsx
@@ -5,7 +5,8 @@
 import * as React from 'react';
 
 import { List } from 'immutable';
-import { Button, CardActions, CardContent, TextField } from '@mui/material';
+import Button from './components/Button';
+import TextField from './components/TextField';
 
 import { defined } from '@system-dynamics/core/common';
 import {
@@ -359,7 +360,7 @@ export class LookupEditor extends React.PureComponent<LookupEditorProps, LookupE
 
     return (
       <div>
-        <CardContent>
+        <div className={styles.cardContent}>
           <TextField
             className={styles.yAxisMax}
             error={yScaleError}
@@ -415,8 +416,8 @@ export class LookupEditor extends React.PureComponent<LookupEditorProps, LookupE
             type="number"
             margin="normal"
           />
-        </CardContent>
-        <CardActions>
+        </div>
+        <div className={styles.cardActions}>
           <Button size="small" color="secondary" onClick={this.handleLookupRemove} className={styles.buttonLeft}>
             Remove
           </Button>
@@ -428,7 +429,7 @@ export class LookupEditor extends React.PureComponent<LookupEditorProps, LookupE
               Save
             </Button>
           </div>
-        </CardActions>
+        </div>
       </div>
     );
   }
diff --git a/src/diagram/ModelPropertiesDrawer.tsx b/src/diagram/ModelPropertiesDrawer.tsx
index f1579ea3c..3056c306c 100644
--- a/src/diagram/ModelPropertiesDrawer.tsx
+++ b/src/diagram/ModelPropertiesDrawer.tsx
@@ -5,20 +5,16 @@
 import * as React from 'react';
 
 import { Link } from 'wouter';
-import Button from '@mui/material/Button';
-import IconButton from '@mui/material/IconButton';
-import SwipeableDrawer from '@mui/material/SwipeableDrawer';
-import TextField from '@mui/material/TextField';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import ClearIcon from '@mui/icons-material/Clear';
-import CloudDownloadIcon from '@mui/icons-material/CloudDownload';
+import Button from './components/Button';
+import IconButton from './components/IconButton';
+import Drawer from './components/Drawer';
+import TextField from './components/TextField';
+import { ArrowBackIcon, ClearIcon, CloudDownloadIcon } from './components/icons';
 
 import { ModelIcon } from './ModelIcon';
 
 import styles from './ModelPropertiesDrawer.module.css';
 
-const iOS = typeof navigator !== undefined && /iPad|iPhone|iPod/.test(navigator.userAgent);
-
 interface ModelPropertiesDrawerProps {
   modelName: string;
   open: boolean;
@@ -46,9 +42,7 @@ export class ModelPropertiesDrawer extends React.PureComponent<ModelPropertiesDr
   render() {
     const { modelName, open } = this.props;
     return (
-      <SwipeableDrawer
-        disableBackdropTransition={false}
-        disableDiscovery={iOS}
+      <Drawer
         open={open}
         onOpen={this.handleOpen}
         onClose={this.handleClose}
@@ -118,7 +112,7 @@ export class ModelPropertiesDrawer extends React.PureComponent<ModelPropertiesDr
             </Button>
           </div>
         </div>
-      </SwipeableDrawer>
+      </Drawer>
     );
   }
 }
diff --git a/src/diagram/Snapshotter.module.css b/src/diagram/Snapshotter.module.css
index a3459fe63..067d14c98 100644
--- a/src/diagram/Snapshotter.module.css
+++ b/src/diagram/Snapshotter.module.css
@@ -1,6 +1,11 @@
 .card {
+  display: flex;
+  align-items: center;
   height: 40px;
   margin-right: var(--spacing-1);
+  border-radius: 4px;
+  background: #fff;
+  box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
 }
 
 .button {
diff --git a/src/diagram/Snapshotter.tsx b/src/diagram/Snapshotter.tsx
index 1a67eea2c..f74bee3c3 100644
--- a/src/diagram/Snapshotter.tsx
+++ b/src/diagram/Snapshotter.tsx
@@ -4,9 +4,8 @@
 
 import * as React from 'react';
 
-import IconButton from '@mui/material/IconButton';
-import Paper from '@mui/material/Paper';
-import PhotoCamera from '@mui/icons-material/PhotoCamera';
+import IconButton from './components/IconButton';
+import { PhotoCameraIcon } from './components/icons';
 
 import styles from './Snapshotter.module.css';
 
@@ -21,11 +20,11 @@ export class Snapshotter extends React.PureComponent<SnapshotterProps> {
 
   render() {
     return (
-      <Paper className={styles.card} elevation={2}>
+      <div className={styles.card}>
         <IconButton className={styles.button} aria-label="Snapshot" onClick={this.handleSnapshot}>
-          <PhotoCamera />
+          <PhotoCameraIcon />
         </IconButton>
-      </Paper>
+      </div>
     );
   }
 }
diff --git a/src/diagram/StockIcon.tsx b/src/diagram/StockIcon.tsx
index a4a06a675..cd8c1d781 100644
--- a/src/diagram/StockIcon.tsx
+++ b/src/diagram/StockIcon.tsx
@@ -4,7 +4,7 @@
 
 import * as React from 'react';
 
-import SvgIcon from '@mui/material/SvgIcon';
+import SvgIcon from './components/SvgIcon';
 
 import styles from './StockIcon.module.css';
 
@@ -19,5 +19,3 @@ export const StockIcon: React.FunctionComponent = (props) => {
 };
 
 StockIcon.displayName = 'Stock';
-
-(StockIcon as any).muiName = 'StockIcon';
diff --git a/src/diagram/UndoRedoBar.module.css b/src/diagram/UndoRedoBar.module.css
index 19092d7c3..72c9f28df 100644
--- a/src/diagram/UndoRedoBar.module.css
+++ b/src/diagram/UndoRedoBar.module.css
@@ -1,6 +1,11 @@
 .card {
+  display: flex;
+  align-items: center;
   height: 40px;
   margin-right: var(--spacing-1);
+  border-radius: 4px;
+  background: #fff;
+  box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
 }
 
 .divider {
diff --git a/src/diagram/UndoRedoBar.tsx b/src/diagram/UndoRedoBar.tsx
index 2e00a83de..518dc3196 100644
--- a/src/diagram/UndoRedoBar.tsx
+++ b/src/diagram/UndoRedoBar.tsx
@@ -4,10 +4,8 @@
 
 import * as React from 'react';
 
-import IconButton from '@mui/material/IconButton';
-import Paper from '@mui/material/Paper';
-import RedoIcon from '@mui/icons-material/Redo';
-import UndoIcon from '@mui/icons-material/Undo';
+import IconButton from './components/IconButton';
+import { RedoIcon, UndoIcon } from './components/icons';
 
 import styles from './UndoRedoBar.module.css';
 
@@ -30,7 +28,7 @@ export class UndoRedoBar extends React.PureComponent<UndoRedoBarProps> {
     const { undoEnabled, redoEnabled } = this.props;
 
     return (
-      <Paper className={styles.card} elevation={2}>
+      <div className={styles.card}>
         <IconButton disabled={!undoEnabled} aria-label="Undo" onClick={this.handleUndo}>
           <UndoIcon />
         </IconButton>
@@ -38,7 +36,7 @@ export class UndoRedoBar extends React.PureComponent<UndoRedoBarProps> {
         <IconButton disabled={!redoEnabled} aria-label="Redo" onClick={this.handleRedo}>
           <RedoIcon />
         </IconButton>
-      </Paper>
+      </div>
     );
   }
 }
diff --git a/src/diagram/VariableDetails.module.css b/src/diagram/VariableDetails.module.css
index 5f6e88340..452899669 100644
--- a/src/diagram/VariableDetails.module.css
+++ b/src/diagram/VariableDetails.module.css
@@ -2,6 +2,9 @@
   width: 359px;
   max-height: calc(100vh - 18px);
   overflow-y: auto;
+  border-radius: 4px;
+  background: #fff;
+  box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
   scrollbar-gutter: stable;
 }
 
@@ -103,3 +106,13 @@
 .errorList {
   color: #cc0000;
 }
+
+.cardContent {
+  padding: 16px;
+}
+
+.cardActions {
+  display: flex;
+  align-items: center;
+  padding: 8px;
+}
diff --git a/src/diagram/VariableDetails.tsx b/src/diagram/VariableDetails.tsx
index 4826a33af..faf54a7e2 100644
--- a/src/diagram/VariableDetails.tsx
+++ b/src/diagram/VariableDetails.tsx
@@ -9,7 +9,8 @@ import { LineChart, ChartSeries } from './LineChart';
 import { createEditor, Descendant, Text, Transforms } from 'slate';
 import { withHistory } from 'slate-history';
 import { Editable, ReactEditor, RenderLeafProps, Slate, withReact } from 'slate-react';
-import { Button, Card, CardActions, CardContent, Tab, Tabs, Typography } from '@mui/material';
+import Button from './components/Button';
+import { Tabs, Tab } from './components/Tabs';
 import katex from 'katex';
 import { brewer } from 'chroma-js';
 
@@ -194,7 +195,7 @@ export class VariableDetails extends React.PureComponent<VariableDetailsProps, V
     return value.toFixed(3);
   };
 
-  handleTabChange = (event: React.ChangeEvent<{}>, newValue: number) => {
+  handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
     this.props.onActiveTabChange(newValue);
   };
 
@@ -269,7 +270,7 @@ export class VariableDetails extends React.PureComponent<VariableDetailsProps, V
       if (errors) {
         errors.forEach((error) => {
           errorList.push(
-            <Typography className={styles.errorList}>error: {errorCodeDescription(error.code)}</Typography>,
+            <div className={styles.errorList}>error: {errorCodeDescription(error.code)}</div>,
           );
         });
       }
@@ -277,10 +278,10 @@ export class VariableDetails extends React.PureComponent<VariableDetailsProps, V
         unitErrors.forEach((error) => {
           const details = error.details;
           errorList.push(
-            <Typography className={styles.errorList}>
+            <div className={styles.errorList}>
               unit error: {errorCodeDescription(error.code)}
               {details ? `: ${details}` : undefined}
-            </Typography>,
+            </div>,
           );
         });
       }
@@ -324,7 +325,7 @@ export class VariableDetails extends React.PureComponent<VariableDetailsProps, V
     }
 
     return (
-      <CardContent>
+      <div className={styles.cardContent}>
         {showPreview ? (
           <div
             className={styles.eqnPreview}
@@ -386,7 +387,7 @@ export class VariableDetails extends React.PureComponent<VariableDetailsProps, V
           />
         </Slate>
 
-        <CardActions>
+        <div className={styles.cardActions}>
           <Button size="small" color="secondary" onClick={this.handleVariableDelete} className={styles.buttonLeft}>
             Delete
           </Button>
@@ -398,12 +399,12 @@ export class VariableDetails extends React.PureComponent<VariableDetailsProps, V
               Save
             </Button>
           </div>
-        </CardActions>
+        </div>
 
         <hr />
         <br />
         {chartOrErrors}
-      </CardContent>
+      </div>
     );
   }
 
@@ -427,8 +428,8 @@ export class VariableDetails extends React.PureComponent<VariableDetailsProps, V
     const computeOffset = (): number => {
       // Utility: map KaTeX glyph to ASCII char
       const mapGlyphToAscii = (ch: string): string => {
-        if (ch === '·' || ch === '×' || ch === '⋅') return '*';
-        if (ch === '−') return '-';
+        if (ch === '\u00b7' || ch === '\u00d7' || ch === '\u22c5') return '*';
+        if (ch === '\u2212') return '-';
         return ch;
       };
 
@@ -790,7 +791,7 @@ export class VariableDetails extends React.PureComponent<VariableDetailsProps, V
       table = <LookupEditor variable={variable} onLookupChange={this.handleLookupChange} />;
     } else {
       table = (
-        <CardContent>
+        <div className={styles.cardContent}>
           <Button
             variant="contained"
             color="secondary"
@@ -804,7 +805,7 @@ export class VariableDetails extends React.PureComponent<VariableDetailsProps, V
             A lookup table is a non-linear function indexed by the variable{"'"}s equation. You edit the function by
             dragging your mouse or finger across the graph.
           </i>
-        </CardContent>
+        </div>
       );
     }
 
@@ -819,7 +820,7 @@ export class VariableDetails extends React.PureComponent<VariableDetailsProps, V
     const lookupTab = viewElement instanceof StockViewElement ? undefined : <Tab label="Lookup Function" />;
 
     return (
-      <Card className={styles.card} elevation={1}>
+      <div className={styles.card}>
         <Tabs
           className={styles.inner}
           variant="fullWidth"
@@ -834,7 +835,7 @@ export class VariableDetails extends React.PureComponent<VariableDetailsProps, V
         </Tabs>
 
         {content}
-      </Card>
+      </div>
     );
   }
 }
diff --git a/src/diagram/ZoomBar.module.css b/src/diagram/ZoomBar.module.css
index 9fd6b033f..bf7de76a3 100644
--- a/src/diagram/ZoomBar.module.css
+++ b/src/diagram/ZoomBar.module.css
@@ -1,6 +1,11 @@
 .card {
+  display: flex;
+  align-items: center;
   height: 40px;
   margin-right: var(--spacing-1);
+  border-radius: 4px;
+  background: #fff;
+  box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
 }
 
 .divider1 {
diff --git a/src/diagram/ZoomBar.tsx b/src/diagram/ZoomBar.tsx
index 5372392ee..fa4838641 100644
--- a/src/diagram/ZoomBar.tsx
+++ b/src/diagram/ZoomBar.tsx
@@ -4,11 +4,8 @@
 
 import * as React from 'react';
 
-import clsx from 'clsx';
-import IconButton from '@mui/material/IconButton';
-import Paper from '@mui/material/Paper';
-import AddIcon from '@mui/icons-material/Add';
-import RemoveIcon from '@mui/icons-material/Remove';
+import IconButton from './components/IconButton';
+import { AddIcon, RemoveIcon } from './components/icons';
 
 import styles from './ZoomBar.module.css';
 
@@ -24,9 +21,9 @@ function snapToZoom(zoom: number): number {
   });
 }
 
-const ε = 0.001;
+const E = 0.001;
 function eq(a: number, b: number): boolean {
-  return Math.abs(a - b) < ε;
+  return Math.abs(a - b) < E;
 }
 
 function findNext(zoom: number, dir: 'out' | 'in'): number | undefined {
@@ -75,7 +72,7 @@ export class ZoomBar extends React.PureComponent<ZoomBarProps> {
     const zoomOutEnabled = zoom > zooms[0];
 
     return (
-      <Paper className={clsx(styles.card)} elevation={2}>
+      <div className={styles.card}>
         <IconButton
           disabled={!zoomOutEnabled}
           style={{ display: 'inline-block' }}
@@ -95,7 +92,7 @@ export class ZoomBar extends React.PureComponent<ZoomBarProps> {
         >
           <AddIcon />
         </IconButton>
-      </Paper>
+      </div>
     );
   }
 }
diff --git a/src/diagram/components/Autocomplete.module.css b/src/diagram/components/Autocomplete.module.css
new file mode 100644
index 000000000..7d9af6262
--- /dev/null
+++ b/src/diagram/components/Autocomplete.module.css
@@ -0,0 +1,30 @@
+.wrapper {
+  display: inline-flex;
+  position: relative;
+  width: 100%;
+}
+
+.listbox {
+  position: absolute;
+  z-index: 1300;
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.23);
+  border-radius: 4px;
+  box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
+  max-height: 300px;
+  overflow-y: auto;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.option {
+  padding: 6px 16px;
+  cursor: pointer;
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 1rem;
+}
+
+.optionHighlighted {
+  background: #ADD8E6;
+}
diff --git a/src/diagram/components/Autocomplete.tsx b/src/diagram/components/Autocomplete.tsx
new file mode 100644
index 000000000..e7b675a3e
--- /dev/null
+++ b/src/diagram/components/Autocomplete.tsx
@@ -0,0 +1,133 @@
+// Copyright 2025 The Simlin Authors. All rights reserved.
+// Use of this source code is governed by the Apache License,
+// Version 2.0, that can be found in the LICENSE file.
+
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+
+import { useCombobox } from 'downshift';
+import clsx from 'clsx';
+
+import styles from './Autocomplete.module.css';
+
+interface AutocompleteProps {
+  key?: string;
+  value?: string | null;
+  defaultValue?: string;
+  onChange: (event: any, newValue: string | null) => void;
+  clearOnEscape?: boolean;
+  options: string[];
+  renderInput: (params: any) => React.ReactNode;
+}
+
+function itemToString(item: string | null): string {
+  return item || '';
+}
+
+export default function Autocomplete(props: AutocompleteProps) {
+  const { value, onChange, clearOnEscape, options, renderInput } = props;
+
+  const [inputValue, setInputValue] = React.useState(value || '');
+  const wrapperRef = React.useRef<HTMLDivElement>(null);
+  const [dropdownPosition, setDropdownPosition] = React.useState<{
+    top: number;
+    left: number;
+    width: number;
+  } | null>(null);
+
+  // Sync inputValue when value prop changes externally
+  React.useEffect(() => {
+    setInputValue(value || '');
+  }, [value]);
+
+  const filteredOptions = React.useMemo(() => {
+    if (!inputValue) return options;
+    const lower = inputValue.toLowerCase();
+    return options.filter((opt) => opt.toLowerCase().includes(lower));
+  }, [options, inputValue]);
+
+  const {
+    isOpen,
+    getInputProps,
+    getMenuProps,
+    getItemProps,
+    highlightedIndex,
+  } = useCombobox({
+    items: filteredOptions,
+    itemToString,
+    inputValue,
+    selectedItem: value || null,
+    onInputValueChange: ({ inputValue: newInputValue }) => {
+      setInputValue(newInputValue || '');
+    },
+    onSelectedItemChange: ({ selectedItem }) => {
+      onChange(null, selectedItem || null);
+    },
+    stateReducer: (state, actionAndChanges) => {
+      const { type, changes } = actionAndChanges;
+      if (clearOnEscape && type === useCombobox.stateChangeTypes.InputKeyDownEscape) {
+        return {
+          ...changes,
+          selectedItem: null,
+          inputValue: '',
+        };
+      }
+      return changes;
+    },
+  });
+
+  React.useEffect(() => {
+    if (isOpen && wrapperRef.current) {
+      const rect = wrapperRef.current.getBoundingClientRect();
+      setDropdownPosition({
+        top: rect.bottom + window.scrollY,
+        left: rect.left + window.scrollX,
+        width: rect.width,
+      });
+    }
+  }, [isOpen]);
+
+  const inputProps = getInputProps();
+  const params = {
+    InputProps: {
+      disableUnderline: false,
+      ref: wrapperRef,
+    },
+    inputProps,
+  };
+
+  const menuProps = getMenuProps();
+
+  const listbox =
+    isOpen && filteredOptions.length > 0 && dropdownPosition ? (
+      <ul
+        {...menuProps}
+        className={styles.listbox}
+        style={{
+          position: 'absolute',
+          top: dropdownPosition.top,
+          left: dropdownPosition.left,
+          width: dropdownPosition.width,
+        }}
+      >
+        {filteredOptions.map((item, index) => (
+          <li
+            key={item}
+            {...getItemProps({ item, index })}
+            className={clsx(styles.option, highlightedIndex === index && styles.optionHighlighted)}
+          >
+            {item}
+          </li>
+        ))}
+      </ul>
+    ) : (
+      <ul {...menuProps} style={{ display: 'none' }} />
+    );
+
+  return (
+    <div className={styles.wrapper}>
+      {renderInput(params)}
+      {ReactDOM.createPortal(listbox, document.body)}
+    </div>
+  );
+}
diff --git a/src/diagram/components/Button.module.css b/src/diagram/components/Button.module.css
new file mode 100644
index 000000000..4003ecf47
--- /dev/null
+++ b/src/diagram/components/Button.module.css
@@ -0,0 +1,106 @@
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  box-sizing: border-box;
+  outline: 0;
+  border: 0;
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+  text-decoration: none;
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-weight: 500;
+  line-height: 1.75;
+  letter-spacing: 0.02857em;
+  text-transform: uppercase;
+  border-radius: 4px;
+  min-width: 64px;
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
+              box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1),
+              border-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
+              color 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.button:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+/* Size variants */
+.sizeSmall {
+  padding: 4px 5px;
+  font-size: 0.8125rem;
+}
+
+.sizeMedium {
+  padding: 6px 8px;
+  font-size: 0.875rem;
+}
+
+.sizeLarge {
+  padding: 8px 22px;
+  font-size: 0.9375rem;
+}
+
+/* text + primary */
+.textPrimary {
+  color: var(--color-primary);
+  background: transparent;
+}
+
+.textPrimary:hover {
+  background-color: rgba(25, 118, 210, 0.04);
+}
+
+/* text + secondary */
+.textSecondary {
+  color: var(--color-secondary);
+  background: transparent;
+}
+
+.textSecondary:hover {
+  background-color: rgba(220, 0, 78, 0.04);
+}
+
+/* contained + primary */
+.containedPrimary {
+  color: #fff;
+  background-color: var(--color-primary);
+  box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
+}
+
+.containedPrimary:hover {
+  background-color: #1565c0;
+}
+
+/* contained + secondary */
+.containedSecondary {
+  color: #fff;
+  background-color: var(--color-secondary);
+  box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
+}
+
+.containedSecondary:hover {
+  background-color: #9a0036;
+}
+
+/* disabled states */
+.disabledText {
+  color: rgba(0, 0, 0, 0.26);
+  pointer-events: none;
+}
+
+.disabledContained {
+  color: rgba(0, 0, 0, 0.26);
+  background-color: rgba(0, 0, 0, 0.12);
+  box-shadow: none;
+  pointer-events: none;
+}
+
+.startIcon {
+  display: inherit;
+  margin-right: 8px;
+  margin-left: -4px;
+}
diff --git a/src/diagram/components/Button.tsx b/src/diagram/components/Button.tsx
new file mode 100644
index 000000000..7eb0a4d9f
--- /dev/null
+++ b/src/diagram/components/Button.tsx
@@ -0,0 +1,50 @@
+// Copyright 2025 The Simlin Authors. All rights reserved.
+// Use of this source code is governed by the Apache License,
+// Version 2.0, that can be found in the LICENSE file.
+
+import * as React from 'react';
+
+import clsx from 'clsx';
+
+import styles from './Button.module.css';
+
+interface ButtonProps {
+  variant?: 'text' | 'contained';
+  color?: 'primary' | 'secondary';
+  size?: 'small' | 'medium' | 'large';
+  disabled?: boolean;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  className?: string;
+  startIcon?: React.ReactNode;
+  children?: React.ReactNode;
+}
+
+export default class Button extends React.PureComponent<ButtonProps> {
+  render() {
+    const { variant = 'text', color = 'primary', size = 'medium', disabled, onClick, className, startIcon, children } = this.props;
+
+    const sizeClass = size === 'small' ? styles.sizeSmall : size === 'large' ? styles.sizeLarge : styles.sizeMedium;
+
+    let variantColorClass: string;
+    let disabledClass: string | undefined;
+    if (variant === 'contained') {
+      variantColorClass = color === 'secondary' ? styles.containedSecondary : styles.containedPrimary;
+      disabledClass = disabled ? styles.disabledContained : undefined;
+    } else {
+      variantColorClass = color === 'secondary' ? styles.textSecondary : styles.textPrimary;
+      disabledClass = disabled ? styles.disabledText : undefined;
+    }
+
+    return (
+      <button
+        className={clsx(styles.button, sizeClass, variantColorClass, disabledClass, className)}
+        disabled={disabled}
+        onClick={onClick}
+        type="button"
+      >
+        {startIcon && <span className={styles.startIcon}>{startIcon}</span>}
+        {children}
+      </button>
+    );
+  }
+}
diff --git a/src/diagram/components/Drawer.module.css b/src/diagram/components/Drawer.module.css
new file mode 100644
index 000000000..68e3c8f63
--- /dev/null
+++ b/src/diagram/components/Drawer.module.css
@@ -0,0 +1,35 @@
+.backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1200;
+  opacity: 1;
+  transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.backdropHidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.panel {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 1200;
+  background: #fff;
+  overflow-y: auto;
+  box-shadow: 0px 8px 10px -5px rgba(0,0,0,0.2), 0px 16px 24px 2px rgba(0,0,0,0.14), 0px 6px 30px 5px rgba(0,0,0,0.12);
+  transform: translateX(0);
+  visibility: visible;
+  transition: transform 225ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.panelHidden {
+  transform: translateX(-100%);
+  visibility: hidden;
+}
diff --git a/src/diagram/components/Drawer.tsx b/src/diagram/components/Drawer.tsx
new file mode 100644
index 000000000..823798c92
--- /dev/null
+++ b/src/diagram/components/Drawer.tsx
@@ -0,0 +1,103 @@
+// Copyright 2025 The Simlin Authors. All rights reserved.
+// Use of this source code is governed by the Apache License,
+// Version 2.0, that can be found in the LICENSE file.
+
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+
+import clsx from 'clsx';
+
+import styles from './Drawer.module.css';
+
+interface DrawerProps {
+  open: boolean;
+  onOpen?: () => void;
+  onClose: () => void;
+  children?: React.ReactNode;
+}
+
+export default class Drawer extends React.PureComponent<DrawerProps> {
+  private panelRef = React.createRef<HTMLDivElement>();
+  private previousActiveElement: Element | null = null;
+
+  componentDidMount() {
+    document.addEventListener('keydown', this.handleKeyDown);
+  }
+
+  componentDidUpdate(prevProps: DrawerProps) {
+    if (this.props.open && !prevProps.open) {
+      // Drawer just opened - save current focus and focus the panel
+      this.previousActiveElement = document.activeElement;
+      this.panelRef.current?.focus();
+    } else if (!this.props.open && prevProps.open) {
+      // Drawer just closed - restore focus
+      if (this.previousActiveElement instanceof HTMLElement) {
+        this.previousActiveElement.focus();
+      }
+      this.previousActiveElement = null;
+    }
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.handleKeyDown);
+  }
+
+  handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape' && this.props.open) {
+      this.props.onClose();
+    }
+
+    // Focus trap: when Tab is pressed and drawer is open, keep focus within the panel
+    if (event.key === 'Tab' && this.props.open && this.panelRef.current) {
+      const panel = this.panelRef.current;
+      const focusableElements = panel.querySelectorAll<HTMLElement>(
+        'a, button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), [contenteditable]',
+      );
+
+      if (focusableElements.length === 0) {
+        event.preventDefault();
+        return;
+      }
+
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+
+      if (event.shiftKey && document.activeElement === firstElement) {
+        event.preventDefault();
+        lastElement.focus();
+      } else if (!event.shiftKey && document.activeElement === lastElement) {
+        event.preventDefault();
+        firstElement.focus();
+      }
+    }
+  };
+
+  handleBackdropClick = () => {
+    this.props.onClose();
+  };
+
+  render() {
+    const { open, children } = this.props;
+
+    const content = (
+      <>
+        <div
+          className={clsx(styles.backdrop, !open && styles.backdropHidden)}
+          onClick={this.handleBackdropClick}
+          aria-hidden="true"
+        />
+        <div
+          ref={this.panelRef}
+          className={clsx(styles.panel, !open && styles.panelHidden)}
+          role="dialog"
+          aria-modal="true"
+          tabIndex={-1}
+        >
+          {children}
+        </div>
+      </>
+    );
+
+    return ReactDOM.createPortal(content, document.body);
+  }
+}
diff --git a/src/diagram/components/IconButton.module.css b/src/diagram/components/IconButton.module.css
new file mode 100644
index 000000000..cece72a93
--- /dev/null
+++ b/src/diagram/components/IconButton.module.css
@@ -0,0 +1,38 @@
+.iconButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  box-sizing: border-box;
+  background-color: transparent;
+  outline: 0;
+  border: 0;
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+  text-decoration: none;
+  text-align: center;
+  padding: 8px;
+  border-radius: 50%;
+  color: rgba(0, 0, 0, 0.54);
+  font-size: 1.5rem;
+  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.iconButton:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+.iconButton:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+.colorInherit {
+  color: inherit;
+}
+
+.disabled {
+  color: rgba(0, 0, 0, 0.26);
+  pointer-events: none;
+}
diff --git a/src/diagram/components/IconButton.tsx b/src/diagram/components/IconButton.tsx
new file mode 100644
index 000000000..b125b9732
--- /dev/null
+++ b/src/diagram/components/IconButton.tsx
@@ -0,0 +1,43 @@
+// Copyright 2025 The Simlin Authors. All rights reserved.
+// Use of this source code is governed by the Apache License,
+// Version 2.0, that can be found in the LICENSE file.
+
+import * as React from 'react';
+
+import clsx from 'clsx';
+
+import styles from './IconButton.module.css';
+
+interface IconButtonProps {
+  color?: 'default' | 'inherit';
+  disabled?: boolean;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  className?: string;
+  'aria-label'?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+export default class IconButton extends React.PureComponent<IconButtonProps> {
+  render() {
+    const { color, disabled, onClick, className, style, children, ...rest } = this.props;
+
+    return (
+      <button
+        className={clsx(
+          styles.iconButton,
+          color === 'inherit' && styles.colorInherit,
+          disabled && styles.disabled,
+          className,
+        )}
+        disabled={disabled}
+        onClick={onClick}
+        style={style}
+        type="button"
+        {...rest}
+      >
+        {children}
+      </button>
+    );
+  }
+}
diff --git a/src/diagram/components/Snackbar.module.css b/src/diagram/components/Snackbar.module.css
new file mode 100644
index 000000000..1f46c7efb
--- /dev/null
+++ b/src/diagram/components/Snackbar.module.css
@@ -0,0 +1,35 @@
+.snackbar {
+  position: fixed;
+  bottom: 8px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1400;
+}
+
+.snackbarHidden {
+  display: none;
+}
+
+.snackbarContent {
+  background: #323232;
+  color: #fff;
+  border-radius: 4px;
+  padding: 6px 16px;
+  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12);
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.snackbarContentMessage {
+  padding: 8px 0;
+  flex: 1;
+}
+
+.snackbarContentAction {
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+  padding-left: 16px;
+  margin-right: -8px;
+}
diff --git a/src/diagram/components/Snackbar.tsx b/src/diagram/components/Snackbar.tsx
new file mode 100644
index 000000000..d3f81badc
--- /dev/null
+++ b/src/diagram/components/Snackbar.tsx
@@ -0,0 +1,101 @@
+// Copyright 2025 The Simlin Authors. All rights reserved.
+// Use of this source code is governed by the Apache License,
+// Version 2.0, that can be found in the LICENSE file.
+
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+
+import clsx from 'clsx';
+
+import styles from './Snackbar.module.css';
+
+interface SnackbarProps {
+  anchorOrigin?: { vertical: string; horizontal: string };
+  open: boolean;
+  autoHideDuration?: number;
+  onClose?: () => void;
+  children?: React.ReactNode;
+}
+
+export default class Snackbar extends React.PureComponent<SnackbarProps> {
+  timerHandle: ReturnType<typeof setTimeout> | undefined;
+
+  componentDidMount() {
+    // Start timer if mounted with open={true}
+    if (this.props.open) {
+      this.startTimer();
+    }
+  }
+
+  componentDidUpdate(prevProps: SnackbarProps) {
+    // Only restart timer when open or autoHideDuration changes
+    const openChanged = this.props.open !== prevProps.open;
+    const durationChanged = this.props.autoHideDuration !== prevProps.autoHideDuration;
+
+    if (openChanged || durationChanged) {
+      this.clearTimer();
+      if (this.props.open) {
+        this.startTimer();
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    this.clearTimer();
+  }
+
+  startTimer() {
+    if (this.props.autoHideDuration && this.props.onClose) {
+      this.timerHandle = setTimeout(this.props.onClose, this.props.autoHideDuration);
+    }
+  }
+
+  clearTimer() {
+    if (this.timerHandle !== undefined) {
+      window.clearTimeout(this.timerHandle);
+      this.timerHandle = undefined;
+    }
+  }
+
+  render() {
+    const { open, children } = this.props;
+
+    const content = (
+      <div className={clsx(styles.snackbar, !open && styles.snackbarHidden)}>
+        {children}
+      </div>
+    );
+
+    return ReactDOM.createPortal(content, document.body);
+  }
+}
+
+interface SnackbarContentProps {
+  className?: string;
+  message?: React.ReactNode;
+  action?: React.ReactNode;
+  'aria-describedby'?: string;
+  [key: string]: unknown;
+}
+
+export class SnackbarContent extends React.PureComponent<SnackbarContentProps> {
+  render() {
+    const { className, message, action, 'aria-describedby': ariaDescribedby, ...rest } = this.props;
+
+    // filter out non-DOM props that may be spread from parent destructuring
+    const domRest: Record<string, unknown> = {};
+    for (const [key, val] of Object.entries(rest)) {
+      if (key === 'onClose' || key === 'variant') {
+        continue;
+      }
+      domRest[key] = val;
+    }
+
+    return (
+      <div className={clsx(styles.snackbarContent, className)} aria-describedby={ariaDescribedby} {...domRest}>
+        <div className={styles.snackbarContentMessage}>{message}</div>
+        {action && <div className={styles.snackbarContentAction}>{action}</div>}
+      </div>
+    );
+  }
+}
diff --git a/src/diagram/components/SpeedDial.module.css b/src/diagram/components/SpeedDial.module.css
new file mode 100644
index 000000000..2d65c6a9e
--- /dev/null
+++ b/src/diagram/components/SpeedDial.module.css
@@ -0,0 +1,102 @@
+.speedDial {
+  display: inline-flex;
+  flex-direction: column-reverse;
+  align-items: center;
+}
+
+.speedDialHidden {
+  display: none;
+}
+
+.fab {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: var(--color-secondary);
+  color: #fff;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12);
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  outline: none;
+  z-index: 1;
+}
+
+.fab:hover {
+  background-color: #9a0036;
+}
+
+.fab:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+.actions {
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.action {
+  display: flex;
+  align-items: center;
+  margin-bottom: 4px;
+  position: relative;
+}
+
+.actionButton {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: #e0e0e0;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12);
+  transform: scale(0);
+  opacity: 0;
+  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
+              opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  outline: none;
+}
+
+.actionButtonOpen {
+  transform: scale(1);
+  opacity: 1;
+}
+
+.actionLabel {
+  position: absolute;
+  right: calc(100% + 8px);
+  white-space: nowrap;
+  background: #616161;
+  color: #fff;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 0.625rem;
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.actionLabelOpen {
+  opacity: 1;
+}
+
+.iconWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.iconWrapperOpen {
+  transform: rotate(45deg);
+}
diff --git a/src/diagram/components/SpeedDial.tsx b/src/diagram/components/SpeedDial.tsx
new file mode 100644
index 000000000..4bc5e4c29
--- /dev/null
+++ b/src/diagram/components/SpeedDial.tsx
@@ -0,0 +1,138 @@
+// Copyright 2025 The Simlin Authors. All rights reserved.
+// Use of this source code is governed by the Apache License,
+// Version 2.0, that can be found in the LICENSE file.
+
+import * as React from 'react';
+
+import clsx from 'clsx';
+
+import styles from './SpeedDial.module.css';
+
+export type CloseReason = 'toggle' | 'blur' | 'mouseLeave' | 'escapeKeyDown' | 'actionClick';
+
+interface SpeedDialProps {
+  ariaLabel: string;
+  className?: string;
+  hidden?: boolean;
+  icon: React.ReactNode;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  onClose?: (event: React.SyntheticEvent, reason: CloseReason) => void;
+  open: boolean;
+  children?: React.ReactNode;
+}
+
+export default class SpeedDial extends React.PureComponent<SpeedDialProps> {
+  handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {
+    this.props.onClose?.(event, 'mouseLeave');
+  };
+
+  handleBlur = (event: React.FocusEvent<HTMLButtonElement>) => {
+    this.props.onClose?.(event, 'blur');
+  };
+
+  handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === 'Escape') {
+      this.props.onClose?.(event, 'escapeKeyDown');
+    }
+  };
+
+  handleActionClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    this.props.onClose?.(event, 'actionClick');
+  };
+
+  render() {
+    const { ariaLabel, className, hidden, icon, onClick, open, children } = this.props;
+
+    const enrichedIcon = React.isValidElement<SpeedDialIconProps>(icon)
+      ? React.cloneElement(icon, { open })
+      : icon;
+
+    // Inject onActionClick into children so they can close the dial
+    const enrichedChildren = React.Children.map(children, (child) => {
+      if (React.isValidElement<SpeedDialActionProps>(child)) {
+        return React.cloneElement(child, {
+          _onActionClick: this.handleActionClick,
+        });
+      }
+      return child;
+    });
+
+    return (
+      <div
+        className={clsx(styles.speedDial, hidden && styles.speedDialHidden, className)}
+        onMouseLeave={this.handleMouseLeave}
+        onKeyDown={this.handleKeyDown}
+        role="presentation"
+      >
+        <button
+          className={styles.fab}
+          aria-label={ariaLabel}
+          aria-expanded={open}
+          onClick={onClick}
+          onBlur={this.handleBlur}
+          type="button"
+        >
+          {enrichedIcon}
+        </button>
+        {open && (
+          <div className={styles.actions} role="menu">
+            {enrichedChildren}
+          </div>
+        )}
+      </div>
+    );
+  }
+}
+
+interface SpeedDialActionProps {
+  icon: React.ReactNode;
+  title: string;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  className?: string;
+  /** @internal Injected by SpeedDial parent via cloneElement */
+  _onActionClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+export class SpeedDialAction extends React.PureComponent<SpeedDialActionProps> {
+  handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    const { onClick, _onActionClick } = this.props;
+
+    onClick?.(event);
+    _onActionClick?.(event);
+  };
+
+  render() {
+    const { icon, title, className } = this.props;
+    return (
+      <div className={styles.action} role="menuitem">
+        <button
+          className={clsx(styles.actionButton, styles.actionButtonOpen, className)}
+          onClick={this.handleClick}
+          aria-label={title}
+          type="button"
+        >
+          {icon}
+        </button>
+        <span className={clsx(styles.actionLabel, styles.actionLabelOpen)}>{title}</span>
+      </div>
+    );
+  }
+}
+
+interface SpeedDialIconProps {
+  icon: React.ReactNode;
+  openIcon?: React.ReactNode;
+  open?: boolean;
+}
+
+export class SpeedDialIcon extends React.PureComponent<SpeedDialIconProps> {
+  render() {
+    const { icon, openIcon, open } = this.props;
+
+    if (openIcon) {
+      return <span className={styles.iconWrapper}>{open ? openIcon : icon}</span>;
+    }
+
+    return <span className={clsx(styles.iconWrapper, open && styles.iconWrapperOpen)}>{icon}</span>;
+  }
+}
diff --git a/src/diagram/components/SvgIcon.module.css b/src/diagram/components/SvgIcon.module.css
new file mode 100644
index 000000000..9f9e15abf
--- /dev/null
+++ b/src/diagram/components/SvgIcon.module.css
@@ -0,0 +1,9 @@
+.svgIcon {
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  fill: currentColor;
+  flex-shrink: 0;
+  font-size: 1.5rem;
+  user-select: none;
+}
diff --git a/src/diagram/components/SvgIcon.tsx b/src/diagram/components/SvgIcon.tsx
new file mode 100644
index 000000000..dc9be6329
--- /dev/null
+++ b/src/diagram/components/SvgIcon.tsx
@@ -0,0 +1,32 @@
+// Copyright 2025 The Simlin Authors. All rights reserved.
+// Use of this source code is governed by the Apache License,
+// Version 2.0, that can be found in the LICENSE file.
+
+import * as React from 'react';
+
+import clsx from 'clsx';
+
+import styles from './SvgIcon.module.css';
+
+export interface SvgIconProps extends Omit<React.SVGProps<SVGSVGElement>, 'ref'> {
+  viewBox?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export default class SvgIcon extends React.PureComponent<SvgIconProps> {
+  render() {
+    const { viewBox = '0 0 24 24', className, children, ...rest } = this.props;
+    return (
+      <svg
+        className={clsx(styles.svgIcon, className)}
+        viewBox={viewBox}
+        focusable="false"
+        aria-hidden="true"
+        {...rest}
+      >
+        {children}
+      </svg>
+    );
+  }
+}
diff --git a/src/diagram/components/Tabs.module.css b/src/diagram/components/Tabs.module.css
new file mode 100644
index 000000000..8349f2a72
--- /dev/null
+++ b/src/diagram/components/Tabs.module.css
@@ -0,0 +1,43 @@
+.tabsList {
+  display: flex;
+  position: relative;
+}
+
+.tab {
+  flex: 1;
+  min-height: 48px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px 16px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.02857em;
+  color: rgba(0, 0, 0, 0.6);
+  transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  outline: none;
+  box-sizing: border-box;
+}
+
+.tab[data-state="active"] {
+  color: var(--color-primary);
+}
+
+.tab:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: -2px;
+}
+
+.indicator {
+  position: absolute;
+  bottom: 0;
+  height: 2px;
+  background: var(--color-primary);
+  transition: left 300ms cubic-bezier(0.4, 0, 0.2, 1),
+              width 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
diff --git a/src/diagram/components/Tabs.tsx b/src/diagram/components/Tabs.tsx
new file mode 100644
index 000000000..d06bb0828
--- /dev/null
+++ b/src/diagram/components/Tabs.tsx
@@ -0,0 +1,77 @@
+// Copyright 2025 The Simlin Authors. All rights reserved.
+// Use of this source code is governed by the Apache License,
+// Version 2.0, that can be found in the LICENSE file.
+
+import * as React from 'react';
+
+import * as RadixTabs from '@radix-ui/react-tabs';
+import clsx from 'clsx';
+
+import styles from './Tabs.module.css';
+
+// Context for passing tab index from parent to child
+const TabIndexContext = React.createContext<string>('0');
+
+interface TabsProps {
+  className?: string;
+  variant?: 'fullWidth';
+  value: number;
+  indicatorColor?: string;
+  textColor?: string;
+  onChange: (event: React.SyntheticEvent, newValue: number) => void;
+  'aria-label'?: string;
+  children?: React.ReactNode;
+}
+
+interface TabProps {
+  label: string;
+}
+
+export class Tab extends React.PureComponent<TabProps> {
+  static contextType = TabIndexContext;
+  declare context: React.ContextType<typeof TabIndexContext>;
+
+  render() {
+    const { label } = this.props;
+    const tabValue = this.context;
+    return (
+      <RadixTabs.Trigger value={tabValue} className={styles.tab}>
+        {label}
+      </RadixTabs.Trigger>
+    );
+  }
+}
+
+export class Tabs extends React.PureComponent<TabsProps> {
+  handleValueChange = (newValue: string) => {
+    const syntheticEvent = {} as React.SyntheticEvent;
+    this.props.onChange(syntheticEvent, Number(newValue));
+  };
+
+  render() {
+    const { className, value, children, ...rest } = this.props;
+    const ariaLabel = rest['aria-label'];
+
+    // Count children (non-null) and wrap each with context provider
+    const childArray = React.Children.toArray(children).filter(Boolean);
+    const tabCount = childArray.length;
+
+    const enrichedChildren = childArray.map((child, index) => (
+      <TabIndexContext.Provider key={index} value={String(index)}>
+        {child}
+      </TabIndexContext.Provider>
+    ));
+
+    const indicatorLeft = tabCount > 0 ? `${(value / tabCount) * 100}%` : '0%';
+    const indicatorWidth = tabCount > 0 ? `${(1 / tabCount) * 100}%` : '0%';
+
+    return (
+      <RadixTabs.Root value={String(value)} onValueChange={this.handleValueChange}>
+        <RadixTabs.List className={clsx(styles.tabsList, className)} aria-label={ariaLabel}>
+          {enrichedChildren}
+          <div className={styles.indicator} style={{ left: indicatorLeft, width: indicatorWidth }} />
+        </RadixTabs.List>
+      </RadixTabs.Root>
+    );
+  }
+}
diff --git a/src/diagram/components/TextField.module.css b/src/diagram/components/TextField.module.css
new file mode 100644
index 000000000..0202b1b6d
--- /dev/null
+++ b/src/diagram/components/TextField.module.css
@@ -0,0 +1,145 @@
+.root {
+  display: inline-flex;
+  flex-direction: column;
+  position: relative;
+  vertical-align: top;
+  box-sizing: border-box;
+}
+
+.fullWidth {
+  width: 100%;
+}
+
+.marginNormal {
+  margin-top: 16px;
+  margin-bottom: 8px;
+}
+
+/* Outlined variant */
+.outlinedWrapper {
+  position: relative;
+  border: 1px solid rgba(0, 0, 0, 0.23);
+  border-radius: 4px;
+  transition: border-color 200ms cubic-bezier(0.0, 0, 0.2, 1),
+              box-shadow 200ms cubic-bezier(0.0, 0, 0.2, 1);
+}
+
+.outlinedWrapper:hover {
+  border-color: rgba(0, 0, 0, 0.87);
+}
+
+.outlinedFocused {
+  border-color: var(--color-primary);
+  box-shadow: inset 0 0 0 1px var(--color-primary);
+}
+
+.outlinedError {
+  border-color: var(--color-error);
+  box-shadow: inset 0 0 0 1px var(--color-error);
+}
+
+.outlinedInput {
+  font: inherit;
+  padding: 16.5px 14px;
+  border: none;
+  outline: none;
+  background: transparent;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.outlinedLabel {
+  position: absolute;
+  left: 14px;
+  top: 0;
+  transform: translate(0, 16px) scale(1);
+  transform-origin: top left;
+  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1),
+              color 200ms cubic-bezier(0.0, 0, 0.2, 1);
+  color: rgba(0, 0, 0, 0.6);
+  pointer-events: none;
+  font: inherit;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.outlinedLabelShrunk {
+  transform: translate(0, -9px) scale(0.75);
+  background: #fff;
+  padding: 0 4px;
+}
+
+.outlinedLabelFocused {
+  color: var(--color-primary);
+}
+
+.outlinedLabelError {
+  color: var(--color-error);
+}
+
+/* Standard variant */
+.standardWrapper {
+  position: relative;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  transition: border-color 200ms cubic-bezier(0.0, 0, 0.2, 1),
+              box-shadow 200ms cubic-bezier(0.0, 0, 0.2, 1);
+}
+
+.standardWrapper:hover {
+  border-color: rgba(0, 0, 0, 0.87);
+}
+
+.standardFocused {
+  border-color: var(--color-primary);
+  box-shadow: inset 0 -1px 0 0 var(--color-primary);
+}
+
+.standardError {
+  border-color: var(--color-error);
+  box-shadow: inset 0 -1px 0 0 var(--color-error);
+}
+
+.standardNoUnderline {
+  border-bottom: none;
+}
+
+.standardNoUnderline:hover {
+  border-bottom: none;
+}
+
+.standardInput {
+  font: inherit;
+  padding: 4px 0 5px;
+  border: none;
+  outline: none;
+  background: transparent;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.standardLabel {
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform: translate(0, 16px) scale(1);
+  transform-origin: top left;
+  transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1),
+              color 200ms cubic-bezier(0.0, 0, 0.2, 1);
+  color: rgba(0, 0, 0, 0.6);
+  pointer-events: none;
+  font: inherit;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.standardLabelShrunk {
+  transform: translate(0, -1.5px) scale(0.75);
+}
+
+.standardLabelFocused {
+  color: var(--color-primary);
+}
+
+.standardLabelError {
+  color: var(--color-error);
+}
diff --git a/src/diagram/components/TextField.tsx b/src/diagram/components/TextField.tsx
new file mode 100644
index 000000000..aaa2b5260
--- /dev/null
+++ b/src/diagram/components/TextField.tsx
@@ -0,0 +1,176 @@
+// Copyright 2025 The Simlin Authors. All rights reserved.
+// Use of this source code is governed by the Apache License,
+// Version 2.0, that can be found in the LICENSE file.
+
+import * as React from 'react';
+
+import clsx from 'clsx';
+
+import styles from './TextField.module.css';
+
+let textFieldIdCounter = 0;
+
+interface TextFieldProps {
+  id?: string;
+  variant?: 'outlined' | 'standard';
+  label?: string;
+  value?: string | number;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  type?: string;
+  margin?: 'none' | 'normal';
+  fullWidth?: boolean;
+  error?: boolean;
+  placeholder?: string;
+  className?: string;
+  InputProps?: {
+    disableUnderline?: boolean;
+    ref?: React.Ref<HTMLDivElement>;
+  };
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+}
+
+interface TextFieldState {
+  isFocused: boolean;
+  generatedId: string;
+}
+
+export default class TextField extends React.PureComponent<TextFieldProps, TextFieldState> {
+  constructor(props: TextFieldProps) {
+    super(props);
+    this.state = {
+      isFocused: false,
+      generatedId: `textfield-${++textFieldIdCounter}`,
+    };
+  }
+
+  handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
+    this.setState({ isFocused: true });
+    // Chain with any external handler from inputProps
+    this.props.inputProps?.onFocus?.(event);
+  };
+
+  handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+    this.setState({ isFocused: false });
+    // Chain with any external handler from inputProps
+    this.props.inputProps?.onBlur?.(event);
+  };
+
+  render() {
+    const {
+      id,
+      variant = 'outlined',
+      label,
+      value,
+      onChange,
+      type,
+      margin,
+      fullWidth,
+      error,
+      placeholder,
+      className,
+      InputProps,
+      inputProps,
+      ...rest
+    } = this.props;
+    const { isFocused, generatedId } = this.state;
+
+    const inputId = id || generatedId;
+    const hasValue = value !== undefined && value !== null && value !== '';
+    const shouldShrink = isFocused || hasValue;
+
+    // Extract onFocus/onBlur from inputProps since we chain them in our handlers
+    const { onFocus: _onFocus, onBlur: _onBlur, ...restInputProps } = inputProps || {};
+
+    const rootClasses = clsx(
+      styles.root,
+      fullWidth && styles.fullWidth,
+      margin === 'normal' && styles.marginNormal,
+      className,
+    );
+
+    if (variant === 'standard') {
+      const disableUnderline = InputProps?.disableUnderline;
+      const wrapperRef = InputProps?.ref;
+
+      const wrapperClasses = clsx(
+        styles.standardWrapper,
+        disableUnderline && styles.standardNoUnderline,
+        isFocused && !disableUnderline && styles.standardFocused,
+        error && !disableUnderline && styles.standardError,
+      );
+
+      const labelClasses = label
+        ? clsx(
+            styles.standardLabel,
+            shouldShrink && styles.standardLabelShrunk,
+            isFocused && styles.standardLabelFocused,
+            error && styles.standardLabelError,
+          )
+        : undefined;
+
+      return (
+        <div className={rootClasses}>
+          <div className={wrapperClasses} ref={wrapperRef}>
+            {label && (
+              <label htmlFor={inputId} className={labelClasses}>
+                {label}
+              </label>
+            )}
+            <input
+              id={inputId}
+              className={styles.standardInput}
+              value={value}
+              onChange={onChange}
+              type={type}
+              placeholder={placeholder}
+              onFocus={this.handleFocus}
+              onBlur={this.handleBlur}
+              {...restInputProps}
+              {...rest}
+            />
+          </div>
+        </div>
+      );
+    }
+
+    // outlined variant
+    const wrapperClasses = clsx(
+      styles.outlinedWrapper,
+      isFocused && styles.outlinedFocused,
+      error && styles.outlinedError,
+    );
+
+    const labelClasses = label
+      ? clsx(
+          styles.outlinedLabel,
+          shouldShrink && styles.outlinedLabelShrunk,
+          isFocused && styles.outlinedLabelFocused,
+          error && styles.outlinedLabelError,
+        )
+      : undefined;
+
+    return (
+      <div className={rootClasses}>
+        <div className={wrapperClasses}>
+          {label && (
+            <label htmlFor={inputId} className={labelClasses}>
+              {label}
+            </label>
+          )}
+          <input
+            id={inputId}
+            className={styles.outlinedInput}
+            value={value}
+            onChange={onChange}
+            type={type}
+            placeholder={placeholder}
+            onFocus={this.handleFocus}
+            onBlur={this.handleBlur}
+            {...restInputProps}
+            {...rest}
+          />
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/diagram/components/icons.tsx b/src/diagram/components/icons.tsx
new file mode 100644
index 000000000..3342fedc9
--- /dev/null
+++ b/src/diagram/components/icons.tsx
@@ -0,0 +1,96 @@
+// Copyright 2025 The Simlin Authors. All rights reserved.
+// Use of this source code is governed by the Apache License,
+// Version 2.0, that can be found in the LICENSE file.
+
+import * as React from 'react';
+
+import SvgIcon, { type SvgIconProps } from './SvgIcon';
+
+type IconProps = SvgIconProps;
+
+export const ClearIcon = (props: IconProps) => (
+  <SvgIcon {...props}>
+    <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+  </SvgIcon>
+);
+
+export const CloseIcon = ClearIcon;
+
+export const EditIcon = (props: IconProps) => (
+  <SvgIcon {...props}>
+    <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75z" />
+  </SvgIcon>
+);
+
+export const MenuIcon = (props: IconProps) => (
+  <SvgIcon {...props}>
+    <path d="M3 18h18v-2H3zm0-5h18v-2H3zm0-7v2h18V6z" />
+  </SvgIcon>
+);
+
+export const ArrowBackIcon = (props: IconProps) => (
+  <SvgIcon {...props}>
+    <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20z" />
+  </SvgIcon>
+);
+
+export const CloudDownloadIcon = (props: IconProps) => (
+  <SvgIcon {...props}>
+    <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96M17 13l-5 5-5-5h3V9h4v4z" />
+  </SvgIcon>
+);
+
+export const RedoIcon = (props: IconProps) => (
+  <SvgIcon {...props}>
+    <path d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7z" />
+  </SvgIcon>
+);
+
+export const UndoIcon = (props: IconProps) => (
+  <SvgIcon {...props}>
+    <path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8" />
+  </SvgIcon>
+);
+
+export const AddIcon = (props: IconProps) => (
+  <SvgIcon {...props}>
+    <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z" />
+  </SvgIcon>
+);
+
+export const RemoveIcon = (props: IconProps) => (
+  <SvgIcon {...props}>
+    <path d="M19 13H5v-2h14z" />
+  </SvgIcon>
+);
+
+export const PhotoCameraIcon = (props: IconProps) => (
+  <SvgIcon {...props}>
+    <path d="M9 2 7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5" />
+    <circle cx="12" cy="12" r="3.2" />
+  </SvgIcon>
+);
+
+export const CheckCircleIcon = (props: IconProps) => (
+  <SvgIcon {...props}>
+    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8z" />
+  </SvgIcon>
+);
+
+export const ErrorIcon = (props: IconProps) => (
+  <SvgIcon {...props}>
+    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-2h2zm0-4h-2V7h2z" />
+  </SvgIcon>
+);
+
+export const InfoIcon = (props: IconProps) => (
+  <SvgIcon {...props}>
+    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z" />
+  </SvgIcon>
+);
+
+export const WarningIcon = (props: IconProps) => (
+  <SvgIcon {...props}>
+    <path d="M1 21h22L12 2zm12-3h-2v-2h2zm0-4h-2v-4h2z" />
+  </SvgIcon>
+);
diff --git a/src/diagram/package.json b/src/diagram/package.json
index 3e607d4ff..a2e90ec75 100644
--- a/src/diagram/package.json
+++ b/src/diagram/package.json
@@ -22,12 +22,12 @@
     }
   },
   "dependencies": {
-    "@emotion/react": "^11.0.0",
-    "@emotion/styled": "^11.0.0",
-    "@mui/material": "^5.0.0",
+    "@radix-ui/react-tabs": "^1.1.13",
     "@system-dynamics/core": "^1.3.5",
     "@system-dynamics/engine2": "^2.0.0",
+    "clsx": "^2.1.1",
     "chroma-js": "^3.1.2",
+    "downshift": "^9.0.13",
     "immutable": "^5.0.3",
     "js-base64": "^3.7.7",
     "katex": "^0.16.0",
@@ -43,7 +43,6 @@
     "@types/slate*/**/immutable": "5.0.3"
   },
   "devDependencies": {
-    "@mui/icons-material": "^5.0.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/chroma-js": "^2.4.4",
diff --git a/src/diagram/tests/autocomplete.test.tsx b/src/diagram/tests/autocomplete.test.tsx
new file mode 100644
index 000000000..ff4b86e14
--- /dev/null
+++ b/src/diagram/tests/autocomplete.test.tsx
@@ -0,0 +1,159 @@
+// Copyright 2025 The Simlin Authors. All rights reserved.
+// Use of this source code is governed by the Apache License,
+// Version 2.0, that can be found in the LICENSE file.
+
+import * as React from 'react';
+import { render, fireEvent, screen, waitFor, act } from '@testing-library/react';
+import Autocomplete from '../components/Autocomplete';
+
+// Simple controlled component to test Autocomplete with external value changes
+class ControlledAutocomplete extends React.Component<
+  { initialValue?: string; options: string[] },
+  { value: string | null }
+> {
+  state = { value: this.props.initialValue || null };
+
+  setValue = (newValue: string | null) => {
+    this.setState({ value: newValue });
+  };
+
+  render() {
+    return (
+      <Autocomplete
+        value={this.state.value}
+        options={this.props.options}
+        onChange={(_event, newValue) => this.setValue(newValue)}
+        renderInput={(params) => (
+          <div ref={params.InputProps.ref}>
+            <input {...params.inputProps} data-testid="autocomplete-input" />
+          </div>
+        )}
+      />
+    );
+  }
+}
+
+describe('Autocomplete', () => {
+  test('renders input element', () => {
+    render(
+      <Autocomplete
+        value={null}
+        options={['apple', 'banana', 'cherry']}
+        onChange={() => {}}
+        renderInput={(params) => (
+          <div ref={params.InputProps.ref}>
+            <input {...params.inputProps} data-testid="autocomplete-input" />
+          </div>
+        )}
+      />,
+    );
+
+    expect(screen.getByTestId('autocomplete-input')).not.toBeNull();
+  });
+
+  test('filters options based on input value', async () => {
+    render(
+      <Autocomplete
+        value={null}
+        options={['apple', 'apricot', 'banana', 'cherry']}
+        onChange={() => {}}
+        renderInput={(params) => (
+          <div ref={params.InputProps.ref}>
+            <input {...params.inputProps} data-testid="autocomplete-input" />
+          </div>
+        )}
+      />,
+    );
+
+    const input = screen.getByTestId('autocomplete-input');
+    fireEvent.change(input, { target: { value: 'ap' } });
+
+    // The listbox should be in the document (portaled to body)
+    await waitFor(() => {
+      const options = document.querySelectorAll('li');
+      expect(options.length).toBe(2);
+    });
+  });
+
+  test('syncs inputValue when value prop changes externally', async () => {
+    const ref = React.createRef<ControlledAutocomplete>();
+    render(<ControlledAutocomplete ref={ref} options={['apple', 'banana', 'cherry']} />);
+
+    const input = screen.getByTestId('autocomplete-input') as HTMLInputElement;
+    expect(input.value).toBe('');
+
+    // Programmatically change the value from outside
+    act(() => {
+      ref.current!.setValue('banana');
+    });
+
+    // The input value should sync with the new value prop
+    await waitFor(() => {
+      expect(input.value).toBe('banana');
+    });
+  });
+
+  test('inputValue syncs when value prop changes from one value to another', async () => {
+    const ref = React.createRef<ControlledAutocomplete>();
+    render(<ControlledAutocomplete ref={ref} initialValue="apple" options={['apple', 'banana', 'cherry']} />);
+
+    const input = screen.getByTestId('autocomplete-input') as HTMLInputElement;
+
+    await waitFor(() => {
+      expect(input.value).toBe('apple');
+    });
+
+    // Change to a different value
+    act(() => {
+      ref.current!.setValue('cherry');
+    });
+
+    await waitFor(() => {
+      expect(input.value).toBe('cherry');
+    });
+  });
+
+  test('inputValue clears when value prop is set to null', async () => {
+    const ref = React.createRef<ControlledAutocomplete>();
+    render(<ControlledAutocomplete ref={ref} initialValue="apple" options={['apple', 'banana', 'cherry']} />);
+
+    const input = screen.getByTestId('autocomplete-input') as HTMLInputElement;
+
+    await waitFor(() => {
+      expect(input.value).toBe('apple');
+    });
+
+    // Clear the value
+    act(() => {
+      ref.current!.setValue(null);
+    });
+
+    await waitFor(() => {
+      expect(input.value).toBe('');
+    });
+  });
+
+  test('clearOnEscape clears selection on Escape key', async () => {
+    const onChange = jest.fn();
+    render(
+      <Autocomplete
+        value="apple"
+        options={['apple', 'banana', 'cherry']}
+        onChange={onChange}
+        clearOnEscape
+        renderInput={(params) => (
+          <div ref={params.InputProps.ref}>
+            <input {...params.inputProps} data-testid="autocomplete-input" />
+          </div>
+        )}
+      />,
+    );
+
+    const input = screen.getByTestId('autocomplete-input');
+    fireEvent.keyDown(input, { key: 'Escape' });
+
+    await waitFor(() => {
+      expect(onChange).toHaveBeenCalledWith(null, null);
+    });
+  });
+});
diff --git a/src/diagram/tests/drawer.test.tsx b/src/diagram/tests/drawer.test.tsx
new file mode 100644
index 000000000..8199a39d0
--- /dev/null
+++ b/src/diagram/tests/drawer.test.tsx
@@ -0,0 +1,299 @@
+// Copyright 2025 The Simlin Authors. All rights reserved.
+// Use of this source code is governed by the Apache License,
+// Version 2.0, that can be found in the LICENSE file.
+
+import * as React from 'react';
+import { render, fireEvent, waitFor, act } from '@testing-library/react';
+import Drawer from '../components/Drawer';
+
+// Controlled wrapper for Drawer to test open/close behavior
+class ControlledDrawer extends React.Component<
+  { children?: React.ReactNode },
+  { open: boolean; closeCount: number }
+> {
+  state = { open: false, closeCount: 0 };
+
+  setOpen = (open: boolean) => {
+    this.setState({ open });
+  };
+
+  handleClose = () => {
+    this.setState((prev) => ({ open: false, closeCount: prev.closeCount + 1 }));
+  };
+
+  render() {
+    return (
+      <Drawer open={this.state.open} onClose={this.handleClose}>
+        {this.props.children}
+      </Drawer>
+    );
+  }
+}
+
+describe('Drawer', () => {
+  test('renders children when open', () => {
+    render(
+      <Drawer open={true} onClose={() => {}}>
+        <div data-testid="drawer-content">Content</div>
+      </Drawer>,
+    );
+
+    const content = document.querySelector('[data-testid="drawer-content"]');
+    expect(content).not.toBeNull();
+  });
+
+  test('renders panel even when closed (for CSS transitions)', () => {
+    render(
+      <Drawer open={false} onClose={() => {}}>
+        <div data-testid="drawer-content">Content</div>
+      </Drawer>,
+    );
+
+    // Panel is always rendered (visibility controlled by CSS)
+    const panel = document.querySelector('[role="dialog"]');
+    expect(panel).not.toBeNull();
+    // Content is present
+    const content = document.querySelector('[data-testid="drawer-content"]');
+    expect(content).not.toBeNull();
+  });
+
+  test('renders backdrop even when closed (for CSS transitions)', () => {
+    render(
+      <Drawer open={false} onClose={() => {}}>
+        <div>Content</div>
+      </Drawer>,
+    );
+
+    // Backdrop is always rendered (visibility controlled by CSS)
+    const backdrop = document.querySelector('[aria-hidden="true"]');
+    expect(backdrop).not.toBeNull();
+  });
+
+  test('calls onClose when backdrop is clicked', () => {
+    const ref = React.createRef<ControlledDrawer>();
+    render(<ControlledDrawer ref={ref}><div>Content</div></ControlledDrawer>);
+
+    // Open the drawer first
+    act(() => {
+      ref.current!.setOpen(true);
+    });
+
+    const backdrop = document.querySelector('[aria-hidden="true"]');
+    fireEvent.click(backdrop!);
+
+    expect(ref.current!.state.closeCount).toBe(1);
+    expect(ref.current!.state.open).toBe(false);
+  });
+
+  test('calls onClose when Escape key is pressed', () => {
+    const ref = React.createRef<ControlledDrawer>();
+    render(<ControlledDrawer ref={ref}><div>Content</div></ControlledDrawer>);
+
+    // Open the drawer first
+    act(() => {
+      ref.current!.setOpen(true);
+    });
+
+    fireEvent.keyDown(document, { key: 'Escape' });
+
+    expect(ref.current!.state.closeCount).toBe(1);
+    expect(ref.current!.state.open).toBe(false);
+  });
+
+  test('does not call onClose when Escape key is pressed while closed', () => {
+    const ref = React.createRef<ControlledDrawer>();
+    render(<ControlledDrawer ref={ref}><div>Content</div></ControlledDrawer>);
+
+    fireEvent.keyDown(document, { key: 'Escape' });
+
+    expect(ref.current!.state.closeCount).toBe(0);
+  });
+
+  test('focuses the panel when opened', async () => {
+    const ref = React.createRef<ControlledDrawer>();
+    render(<ControlledDrawer ref={ref}><div>Content</div></ControlledDrawer>);
+
+    act(() => {
+      ref.current!.setOpen(true);
+    });
+
+    await waitFor(() => {
+      const panel = document.querySelector('[role="dialog"]');
+      expect(document.activeElement).toBe(panel);
+    });
+  });
+
+  test('restores focus to previous element when closed', async () => {
+    // Create a button that will have focus before the drawer opens
+    const buttonRef = React.createRef<HTMLButtonElement>();
+    const ref = React.createRef<ControlledDrawer>();
+
+    render(
+      <>
+        <button ref={buttonRef}>Outside Button</button>
+        <ControlledDrawer ref={ref}><div>Content</div></ControlledDrawer>
+      </>,
+    );
+
+    // Focus the button
+    buttonRef.current!.focus();
+    expect(document.activeElement).toBe(buttonRef.current);
+
+    // Open the drawer
+    act(() => {
+      ref.current!.setOpen(true);
+    });
+
+    await waitFor(() => {
+      const panel = document.querySelector('[role="dialog"]');
+      expect(document.activeElement).toBe(panel);
+    });
+
+    // Close the drawer
+    act(() => {
+      ref.current!.setOpen(false);
+    });
+
+    await waitFor(() => {
+      expect(document.activeElement).toBe(buttonRef.current);
+    });
+  });
+});
+
+describe('Drawer focus trap', () => {
+  test('traps focus within drawer when Tab is pressed', () => {
+    render(
+      <Drawer open={true} onClose={() => {}}>
+        <button data-testid="first-btn">First</button>
+        <button data-testid="second-btn">Second</button>
+      </Drawer>,
+    );
+
+    const firstBtn = document.querySelector('[data-testid="first-btn"]') as HTMLElement;
+    const secondBtn = document.querySelector('[data-testid="second-btn"]') as HTMLElement;
+
+    // Focus the last button
+    secondBtn.focus();
+    expect(document.activeElement).toBe(secondBtn);
+
+    // Tab should wrap to first button
+    fireEvent.keyDown(document, { key: 'Tab', shiftKey: false });
+    expect(document.activeElement).toBe(firstBtn);
+  });
+
+  test('traps focus when Shift+Tab is pressed', () => {
+    render(
+      <Drawer open={true} onClose={() => {}}>
+        <button data-testid="first-btn">First</button>
+        <button data-testid="second-btn">Second</button>
+      </Drawer>,
+    );
+
+    const firstBtn = document.querySelector('[data-testid="first-btn"]') as HTMLElement;
+    const secondBtn = document.querySelector('[data-testid="second-btn"]') as HTMLElement;
+
+    // Focus the first button
+    firstBtn.focus();
+    expect(document.activeElement).toBe(firstBtn);
+
+    // Shift+Tab should wrap to last button
+    fireEvent.keyDown(document, { key: 'Tab', shiftKey: true });
+    expect(document.activeElement).toBe(secondBtn);
+  });
+
+  test('focus trap includes button elements', () => {
+    render(
+      <Drawer open={true} onClose={() => {}}>
+        <button data-testid="btn">Button</button>
+      </Drawer>,
+    );
+
+    const panel = document.querySelector('[role="dialog"]');
+    const focusable = panel!.querySelectorAll(
+      'a, button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), [contenteditable]',
+    );
+    expect(focusable.length).toBe(1);
+  });
+
+  test('focus trap includes anchor elements', () => {
+    render(
+      <Drawer open={true} onClose={() => {}}>
+        <a href="#test" data-testid="link">Link</a>
+        <a data-testid="anchor-no-href">Anchor without href</a>
+      </Drawer>,
+    );
+
+    const panel = document.querySelector('[role="dialog"]');
+    const focusable = panel!.querySelectorAll(
+      'a, button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), [contenteditable]',
+    );
+    // Both 'a' tags are matched by the 'a' selector
+    expect(focusable.length).toBe(2);
+  });
+
+  test('focus trap includes input elements', () => {
+    render(
+      <Drawer open={true} onClose={() => {}}>
+        <input type="text" data-testid="input" />
+        <select data-testid="select"><option>Option</option></select>
+        <textarea data-testid="textarea" />
+      </Drawer>,
+    );
+
+    const panel = document.querySelector('[role="dialog"]');
+    const focusable = panel!.querySelectorAll(
+      'a, button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), [contenteditable]',
+    );
+    expect(focusable.length).toBe(3);
+  });
+
+  test('focus trap includes elements with contenteditable', () => {
+    render(
+      <Drawer open={true} onClose={() => {}}>
+        <div contentEditable suppressContentEditableWarning data-testid="editable">Editable</div>
+      </Drawer>,
+    );
+
+    const panel = document.querySelector('[role="dialog"]');
+    const focusable = panel!.querySelectorAll(
+      'a, button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), [contenteditable]',
+    );
+    expect(focusable.length).toBe(1);
+  });
+
+  test('focus trap includes elements with tabindex', () => {
+    render(
+      <Drawer open={true} onClose={() => {}}>
+        <div tabIndex={0} data-testid="focusable-div">Focusable div</div>
+        <div tabIndex={-1} data-testid="not-focusable-div">Not focusable via Tab</div>
+      </Drawer>,
+    );
+
+    const panel = document.querySelector('[role="dialog"]');
+    const focusable = panel!.querySelectorAll(
+      'a, button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), [contenteditable]',
+    );
+    // Only tabIndex=0 should be included, not tabIndex=-1
+    expect(focusable.length).toBe(1);
+  });
+
+  test('focus trap prevents escape when no focusable elements', () => {
+    render(
+      <Drawer open={true} onClose={() => {}}>
+        <div>No focusable elements here</div>
+      </Drawer>,
+    );
+
+    const panel = document.querySelector('[role="dialog"]') as HTMLElement;
+    panel.focus();
+
+    // Tab should not move focus outside
+    const preventDefaultSpy = jest.fn();
+    const event = new KeyboardEvent('keydown', { key: 'Tab', bubbles: true });
+    Object.defineProperty(event, 'preventDefault', { value: preventDefaultSpy });
+
+    document.dispatchEvent(event);
+
+    expect(preventDefaultSpy).toHaveBeenCalled();
+  });
+});
diff --git a/src/diagram/tests/snackbar.test.tsx b/src/diagram/tests/snackbar.test.tsx
new file mode 100644
index 000000000..df2b59b47
--- /dev/null
+++ b/src/diagram/tests/snackbar.test.tsx
@@ -0,0 +1,314 @@
+// Copyright 2025 The Simlin Authors. All rights reserved.
+// Use of this source code is governed by the Apache License,
+// Version 2.0, that can be found in the LICENSE file.
+
+import * as React from 'react';
+import { render, act } from '@testing-library/react';
+import Snackbar, { SnackbarContent } from '../components/Snackbar';
+
+// Controlled wrapper to test open/close transitions
+class ControlledSnackbar extends React.Component<
+  { autoHideDuration?: number },
+  { open: boolean; closeCount: number }
+> {
+  state = { open: false, closeCount: 0 };
+
+  setOpen = (open: boolean) => {
+    this.setState({ open });
+  };
+
+  handleClose = () => {
+    this.setState((prev) => ({ open: false, closeCount: prev.closeCount + 1 }));
+  };
+
+  render() {
+    return (
+      <Snackbar
+        open={this.state.open}
+        autoHideDuration={this.props.autoHideDuration}
+        onClose={this.handleClose}
+      >
+        <SnackbarContent message="Test message" />
+      </Snackbar>
+    );
+  }
+}
+
+describe('Snackbar', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  test('renders children when open', () => {
+    render(
+      <Snackbar open={true}>
+        <SnackbarContent message="Test message" data-testid="snackbar-content" />
+      </Snackbar>,
+    );
+
+    const content = document.querySelector('[data-testid="snackbar-content"]');
+    expect(content).not.toBeNull();
+    expect(content!.textContent).toContain('Test message');
+  });
+
+  test('renders content even when closed (for transition purposes)', () => {
+    render(
+      <Snackbar open={false}>
+        <SnackbarContent message="Test message" data-testid="snackbar-content" />
+      </Snackbar>,
+    );
+
+    // Content is still rendered (visibility controlled by CSS)
+    const content = document.querySelector('[data-testid="snackbar-content"]');
+    expect(content).not.toBeNull();
+  });
+
+  test('starts auto-hide timer when mounted with open=true', () => {
+    const onClose = jest.fn();
+    render(
+      <Snackbar open={true} autoHideDuration={3000} onClose={onClose}>
+        <SnackbarContent message="Test message" />
+      </Snackbar>,
+    );
+
+    expect(onClose).not.toHaveBeenCalled();
+
+    act(() => {
+      jest.advanceTimersByTime(3000);
+    });
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  test('starts auto-hide timer on transition from closed to open', () => {
+    const ref = React.createRef<ControlledSnackbar>();
+    render(<ControlledSnackbar ref={ref} autoHideDuration={3000} />);
+
+    expect(ref.current!.state.closeCount).toBe(0);
+
+    // Open the snackbar
+    act(() => {
+      ref.current!.setOpen(true);
+    });
+
+    act(() => {
+      jest.advanceTimersByTime(3000);
+    });
+
+    expect(ref.current!.state.closeCount).toBe(1);
+    expect(ref.current!.state.open).toBe(false);
+  });
+
+  test('clears timer when closed before timeout', () => {
+    const ref = React.createRef<ControlledSnackbar>();
+    render(<ControlledSnackbar ref={ref} autoHideDuration={5000} />);
+
+    // Open the snackbar
+    act(() => {
+      ref.current!.setOpen(true);
+    });
+
+    // Advance part way through
+    act(() => {
+      jest.advanceTimersByTime(2000);
+    });
+
+    // Close before timeout
+    act(() => {
+      ref.current!.setOpen(false);
+    });
+
+    // Advance past original timeout
+    act(() => {
+      jest.advanceTimersByTime(5000);
+    });
+
+    // Should only have closed once (from manual close)
+    expect(ref.current!.state.closeCount).toBe(0);
+    expect(ref.current!.state.open).toBe(false);
+  });
+
+  test('handles rapid open/close cycles without race conditions', () => {
+    const ref = React.createRef<ControlledSnackbar>();
+    render(<ControlledSnackbar ref={ref} autoHideDuration={3000} />);
+
+    // Rapidly toggle open/close
+    act(() => {
+      ref.current!.setOpen(true);
+    });
+
+    act(() => {
+      jest.advanceTimersByTime(500);
+    });
+
+    act(() => {
+      ref.current!.setOpen(false);
+    });
+
+    act(() => {
+      ref.current!.setOpen(true);
+    });
+
+    act(() => {
+      jest.advanceTimersByTime(500);
+    });
+
+    act(() => {
+      ref.current!.setOpen(false);
+    });
+
+    act(() => {
+      ref.current!.setOpen(true);
+    });
+
+    // Now advance through the full timeout
+    act(() => {
+      jest.advanceTimersByTime(3000);
+    });
+
+    // Should have triggered exactly one auto-close from the final open
+    expect(ref.current!.state.closeCount).toBe(1);
+  });
+
+  test('does not reset timer on unrelated re-renders', () => {
+    // Create a wrapper that can trigger re-renders without changing open/autoHideDuration
+    class ReRenderWrapper extends React.Component<
+      Record<string, never>,
+      { counter: number; open: boolean; closeCount: number }
+    > {
+      state = { counter: 0, open: true, closeCount: 0 };
+
+      forceRerender = () => {
+        this.setState((prev) => ({ counter: prev.counter + 1 }));
+      };
+
+      handleClose = () => {
+        this.setState((prev) => ({ open: false, closeCount: prev.closeCount + 1 }));
+      };
+
+      render() {
+        return (
+          <Snackbar open={this.state.open} autoHideDuration={3000} onClose={this.handleClose}>
+            <SnackbarContent message={`Count: ${this.state.counter}`} />
+          </Snackbar>
+        );
+      }
+    }
+
+    const ref = React.createRef<ReRenderWrapper>();
+    render(<ReRenderWrapper ref={ref} />);
+
+    // Advance 1 second
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
+
+    // Trigger unrelated re-render (counter changes, but open/duration stay same)
+    act(() => {
+      ref.current!.forceRerender();
+    });
+
+    // Advance 1 more second
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
+
+    // Trigger another unrelated re-render
+    act(() => {
+      ref.current!.forceRerender();
+    });
+
+    // Advance the remaining 1 second (total 3 seconds since open)
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
+
+    // Timer should have fired because 3 seconds total elapsed
+    // If timer was reset on each re-render, it would take 5 seconds total
+    expect(ref.current!.state.closeCount).toBe(1);
+  });
+
+  test('does not start timer if no autoHideDuration', () => {
+    const onClose = jest.fn();
+    render(
+      <Snackbar open={true} onClose={onClose}>
+        <SnackbarContent message="Test message" />
+      </Snackbar>,
+    );
+
+    act(() => {
+      jest.advanceTimersByTime(10000);
+    });
+
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  test('does not start timer if no onClose callback', () => {
+    // This should not throw and should render fine
+    render(
+      <Snackbar open={true} autoHideDuration={3000}>
+        <SnackbarContent message="Test message" />
+      </Snackbar>,
+    );
+
+    act(() => {
+      jest.advanceTimersByTime(5000);
+    });
+
+    // Just verify no error is thrown
+    expect(true).toBe(true);
+  });
+});
+
+describe('SnackbarContent', () => {
+  test('renders message content', () => {
+    render(<SnackbarContent message="Hello World" data-testid="content" />);
+    const content = document.querySelector('[data-testid="content"]');
+    expect(content!.textContent).toContain('Hello World');
+  });
+
+  test('renders action content', () => {
+    render(
+      <SnackbarContent
+        message="Test"
+        action={<button data-testid="action-button">Close</button>}
+        data-testid="content"
+      />,
+    );
+    const button = document.querySelector('[data-testid="action-button"]');
+    expect(button).not.toBeNull();
+    expect(button!.textContent).toBe('Close');
+  });
+
+  test('applies custom className', () => {
+    render(<SnackbarContent message="Test" className="custom-class" data-testid="content" />);
+    const content = document.querySelector('[data-testid="content"]');
+    expect(content!.className).toContain('custom-class');
+  });
+
+  test('passes through aria-describedby', () => {
+    render(<SnackbarContent message="Test" aria-describedby="my-description" data-testid="content" />);
+    const content = document.querySelector('[data-testid="content"]');
+    expect(content!.getAttribute('aria-describedby')).toBe('my-description');
+  });
+
+  test('filters out non-DOM props like onClose and variant', () => {
+    // This should not throw a React warning about unknown DOM props
+    const props: any = {
+      message: 'Test',
+      onClose: () => {},
+      variant: 'error',
+      'data-testid': 'content',
+    };
+    render(<SnackbarContent {...props} />);
+    const content = document.querySelector('[data-testid="content"]');
+    expect(content).not.toBeNull();
+    // Verify onClose and variant are not passed to DOM
+    expect(content!.getAttribute('onClose')).toBeNull();
+    expect(content!.getAttribute('variant')).toBeNull();
+  });
+});
diff --git a/src/diagram/tests/speed-dial.test.tsx b/src/diagram/tests/speed-dial.test.tsx
new file mode 100644
index 000000000..c0694edb5
--- /dev/null
+++ b/src/diagram/tests/speed-dial.test.tsx
@@ -0,0 +1,340 @@
+// Copyright 2025 The Simlin Authors. All rights reserved.
+// Use of this source code is governed by the Apache License,
+// Version 2.0, that can be found in the LICENSE file.
+
+import * as React from 'react';
+import { render, fireEvent, screen, act } from '@testing-library/react';
+import SpeedDial, { SpeedDialAction, SpeedDialIcon, CloseReason } from '../components/SpeedDial';
+
+// Controlled wrapper for testing SpeedDial open/close behavior
+class ControlledSpeedDial extends React.Component<
+  { children?: React.ReactNode },
+  { open: boolean; lastCloseReason: CloseReason | null }
+> {
+  state = { open: false, lastCloseReason: null as CloseReason | null };
+
+  setOpen = (open: boolean) => {
+    this.setState({ open });
+  };
+
+  handleClick = () => {
+    this.setState((prev) => ({ open: !prev.open }));
+  };
+
+  handleClose = (_event: React.SyntheticEvent, reason: CloseReason) => {
+    this.setState({ open: false, lastCloseReason: reason });
+  };
+
+  render() {
+    return (
+      <SpeedDial
+        ariaLabel="Test SpeedDial"
+        open={this.state.open}
+        onClick={this.handleClick}
+        onClose={this.handleClose}
+        icon={<SpeedDialIcon icon={<span>+</span>} openIcon={<span>x</span>} />}
+      >
+        {this.props.children}
+      </SpeedDial>
+    );
+  }
+}
+
+describe('SpeedDial', () => {
+  test('renders FAB button with aria-label', () => {
+    render(
+      <SpeedDial
+        ariaLabel="Test SpeedDial"
+        open={false}
+        icon={<span>+</span>}
+      />,
+    );
+
+    const fab = screen.getByRole('button', { name: 'Test SpeedDial' });
+    expect(fab).not.toBeNull();
+  });
+
+  test('renders when hidden prop is true (visibility controlled by CSS)', () => {
+    const { container } = render(
+      <SpeedDial
+        ariaLabel="Test SpeedDial"
+        open={false}
+        hidden={true}
+        icon={<span>+</span>}
+      />,
+    );
+
+    // Element is still rendered (visibility controlled by CSS)
+    const speedDial = container.firstChild as HTMLElement;
+    expect(speedDial).not.toBeNull();
+    // FAB button is still present
+    const fab = screen.getByRole('button', { name: 'Test SpeedDial' });
+    expect(fab).not.toBeNull();
+  });
+
+  test('renders actions when open', () => {
+    render(
+      <SpeedDial
+        ariaLabel="Test SpeedDial"
+        open={true}
+        icon={<span>+</span>}
+      >
+        <SpeedDialAction icon={<span>A</span>} title="Action A" />
+        <SpeedDialAction icon={<span>B</span>} title="Action B" />
+      </SpeedDial>,
+    );
+
+    const actions = screen.getAllByRole('menuitem');
+    expect(actions.length).toBe(2);
+  });
+
+  test('does not render actions when closed', () => {
+    render(
+      <SpeedDial
+        ariaLabel="Test SpeedDial"
+        open={false}
+        icon={<span>+</span>}
+      >
+        <SpeedDialAction icon={<span>A</span>} title="Action A" />
+      </SpeedDial>,
+    );
+
+    const actions = screen.queryAllByRole('menuitem');
+    expect(actions.length).toBe(0);
+  });
+
+  test('calls onClick when FAB is clicked', () => {
+    const onClick = jest.fn();
+    render(
+      <SpeedDial
+        ariaLabel="Test SpeedDial"
+        open={false}
+        onClick={onClick}
+        icon={<span>+</span>}
+      />,
+    );
+
+    const fab = screen.getByRole('button', { name: 'Test SpeedDial' });
+    fireEvent.click(fab);
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  test('calls onClose with mouseLeave reason on mouse leave', () => {
+    const ref = React.createRef<ControlledSpeedDial>();
+    const { container } = render(<ControlledSpeedDial ref={ref} />);
+
+    act(() => {
+      ref.current!.setOpen(true);
+    });
+
+    const speedDial = container.firstChild as HTMLElement;
+    fireEvent.mouseLeave(speedDial);
+
+    expect(ref.current!.state.lastCloseReason).toBe('mouseLeave');
+  });
+
+  test('calls onClose with blur reason on FAB blur', () => {
+    const ref = React.createRef<ControlledSpeedDial>();
+    render(<ControlledSpeedDial ref={ref} />);
+
+    act(() => {
+      ref.current!.setOpen(true);
+    });
+
+    const fab = screen.getByRole('button', { name: 'Test SpeedDial' });
+    fireEvent.blur(fab);
+
+    expect(ref.current!.state.lastCloseReason).toBe('blur');
+  });
+
+  test('calls onClose with escapeKeyDown reason on Escape key', () => {
+    const ref = React.createRef<ControlledSpeedDial>();
+    const { container } = render(<ControlledSpeedDial ref={ref} />);
+
+    act(() => {
+      ref.current!.setOpen(true);
+    });
+
+    const speedDial = container.firstChild as HTMLElement;
+    fireEvent.keyDown(speedDial, { key: 'Escape' });
+
+    expect(ref.current!.state.lastCloseReason).toBe('escapeKeyDown');
+  });
+
+  test('sets aria-expanded based on open state', () => {
+    const { rerender } = render(
+      <SpeedDial
+        ariaLabel="Test SpeedDial"
+        open={false}
+        icon={<span>+</span>}
+      />,
+    );
+
+    let fab = screen.getByRole('button', { name: 'Test SpeedDial' });
+    expect(fab.getAttribute('aria-expanded')).toBe('false');
+
+    rerender(
+      <SpeedDial
+        ariaLabel="Test SpeedDial"
+        open={true}
+        icon={<span>+</span>}
+      />,
+    );
+
+    fab = screen.getByRole('button', { name: 'Test SpeedDial' });
+    expect(fab.getAttribute('aria-expanded')).toBe('true');
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(
+      <SpeedDial
+        ariaLabel="Test SpeedDial"
+        open={false}
+        icon={<span>+</span>}
+        className="custom-class"
+      />,
+    );
+
+    const speedDial = container.firstChild as HTMLElement;
+    expect(speedDial.className).toContain('custom-class');
+  });
+});
+
+describe('SpeedDialAction', () => {
+  test('renders button with icon', () => {
+    render(
+      <SpeedDial ariaLabel="Test" open={true} icon={<span>+</span>}>
+        <SpeedDialAction icon={<span data-testid="action-icon">A</span>} title="Action A" />
+      </SpeedDial>,
+    );
+
+    const icon = screen.getByTestId('action-icon');
+    expect(icon).not.toBeNull();
+  });
+
+  test('renders label with title', () => {
+    render(
+      <SpeedDial ariaLabel="Test" open={true} icon={<span>+</span>}>
+        <SpeedDialAction icon={<span>A</span>} title="Action A" />
+      </SpeedDial>,
+    );
+
+    // The title appears both as aria-label on button and in the label span
+    const button = screen.getByRole('button', { name: 'Action A' });
+    expect(button).not.toBeNull();
+  });
+
+  test('calls onClick when action button is clicked', () => {
+    const onClick = jest.fn();
+    render(
+      <SpeedDial ariaLabel="Test" open={true} icon={<span>+</span>}>
+        <SpeedDialAction icon={<span>A</span>} title="Action A" onClick={onClick} />
+      </SpeedDial>,
+    );
+
+    const button = screen.getByRole('button', { name: 'Action A' });
+    fireEvent.click(button);
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  test('closes SpeedDial when action is clicked', () => {
+    const ref = React.createRef<ControlledSpeedDial>();
+    render(
+      <ControlledSpeedDial ref={ref}>
+        <SpeedDialAction icon={<span>A</span>} title="Action A" />
+      </ControlledSpeedDial>,
+    );
+
+    act(() => {
+      ref.current!.setOpen(true);
+    });
+
+    const button = screen.getByRole('button', { name: 'Action A' });
+    fireEvent.click(button);
+
+    expect(ref.current!.state.lastCloseReason).toBe('actionClick');
+  });
+
+  test('applies custom className to action button', () => {
+    render(
+      <SpeedDial ariaLabel="Test" open={true} icon={<span>+</span>}>
+        <SpeedDialAction icon={<span>A</span>} title="Action A" className="custom-action-class" />
+      </SpeedDial>,
+    );
+
+    const button = screen.getByRole('button', { name: 'Action A' });
+    expect(button.className).toContain('custom-action-class');
+  });
+});
+
+describe('SpeedDialIcon', () => {
+  test('renders icon when closed', () => {
+    render(
+      <SpeedDial
+        ariaLabel="Test"
+        open={false}
+        icon={<SpeedDialIcon icon={<span data-testid="closed-icon">+</span>} openIcon={<span data-testid="open-icon">x</span>} />}
+      />,
+    );
+
+    expect(screen.getByTestId('closed-icon')).not.toBeNull();
+    expect(screen.queryByTestId('open-icon')).toBeNull();
+  });
+
+  test('renders openIcon when open', () => {
+    render(
+      <SpeedDial
+        ariaLabel="Test"
+        open={true}
+        icon={<SpeedDialIcon icon={<span data-testid="closed-icon">+</span>} openIcon={<span data-testid="open-icon">x</span>} />}
+      />,
+    );
+
+    expect(screen.queryByTestId('closed-icon')).toBeNull();
+    expect(screen.getByTestId('open-icon')).not.toBeNull();
+  });
+
+  test('renders icon wrapper consistently when no openIcon provided', () => {
+    const { rerender } = render(
+      <SpeedDial
+        ariaLabel="Test"
+        open={false}
+        icon={<SpeedDialIcon icon={<span data-testid="the-icon">+</span>} />}
+      />,
+    );
+
+    // Icon is present when closed
+    let icon = screen.getByTestId('the-icon');
+    expect(icon).not.toBeNull();
+
+    rerender(
+      <SpeedDial
+        ariaLabel="Test"
+        open={true}
+        icon={<SpeedDialIcon icon={<span data-testid="the-icon">+</span>} />}
+      />,
+    );
+
+    // Icon is still present when open (rotation is CSS-based)
+    icon = screen.getByTestId('the-icon');
+    expect(icon).not.toBeNull();
+  });
+
+  test('passes open prop to icon via cloneElement with type safety', () => {
+    // This tests that the type-safe cloneElement works correctly
+    const CustomIcon = ({ open }: { open?: boolean }) => (
+      <span data-testid="custom-icon" data-open={String(open)}>
+        {open ? 'Open' : 'Closed'}
+      </span>
+    );
+
+    render(
+      <SpeedDial ariaLabel="Test" open={true} icon={<CustomIcon />} />,
+    );
+
+    const icon = screen.getByTestId('custom-icon');
+    expect(icon.getAttribute('data-open')).toBe('true');
+  });
+});
diff --git a/src/diagram/tests/text-field.test.tsx b/src/diagram/tests/text-field.test.tsx
new file mode 100644
index 000000000..7796994c3
--- /dev/null
+++ b/src/diagram/tests/text-field.test.tsx
@@ -0,0 +1,125 @@
+// Copyright 2025 The Simlin Authors. All rights reserved.
+// Use of this source code is governed by the Apache License,
+// Version 2.0, that can be found in the LICENSE file.
+
+import * as React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import TextField from '../components/TextField';
+
+describe('TextField', () => {
+  test('renders input element', () => {
+    render(<TextField data-testid="text-field" />);
+    expect(screen.getByTestId('text-field')).not.toBeNull();
+  });
+
+  test('renders label when provided', () => {
+    render(<TextField label="Test Label" />);
+    expect(screen.getByText('Test Label')).not.toBeNull();
+  });
+
+  test('applies fullWidth class when fullWidth is true', () => {
+    const { container } = render(<TextField fullWidth />);
+    const root = container.firstChild as HTMLElement;
+    expect(root).not.toBeNull();
+  });
+
+  test('chains inputProps.onFocus with internal focus handler', () => {
+    const externalOnFocus = jest.fn();
+    render(
+      <TextField
+        label="Test"
+        inputProps={{ onFocus: externalOnFocus }}
+        data-testid="text-field"
+      />,
+    );
+
+    const input = screen.getByTestId('text-field');
+    fireEvent.focus(input);
+
+    // External handler should be called
+    expect(externalOnFocus).toHaveBeenCalledTimes(1);
+  });
+
+  test('chains inputProps.onBlur with internal blur handler', () => {
+    const externalOnBlur = jest.fn();
+    render(
+      <TextField
+        label="Test"
+        inputProps={{ onBlur: externalOnBlur }}
+        data-testid="text-field"
+      />,
+    );
+
+    const input = screen.getByTestId('text-field');
+    fireEvent.focus(input);
+    fireEvent.blur(input);
+
+    // External handler should be called
+    expect(externalOnBlur).toHaveBeenCalledTimes(1);
+  });
+
+  test('tracks focus state correctly when inputProps has focus handlers', () => {
+    // Use a class component wrapper to access the TextField's state via ref inspection
+    // Since we can't directly inspect isFocused state, we test the effect:
+    // The label should shrink when focused even with external handlers
+    const externalOnFocus = jest.fn();
+    const externalOnBlur = jest.fn();
+
+    render(
+      <TextField
+        label="Test Label"
+        variant="outlined"
+        inputProps={{ onFocus: externalOnFocus, onBlur: externalOnBlur }}
+        data-testid="text-field"
+      />,
+    );
+
+    const input = screen.getByTestId('text-field');
+
+    // Focus the input
+    fireEvent.focus(input);
+
+    // External handler should be called
+    expect(externalOnFocus).toHaveBeenCalledTimes(1);
+
+    // Blur the input
+    fireEvent.blur(input);
+
+    // External handler should be called
+    expect(externalOnBlur).toHaveBeenCalledTimes(1);
+  });
+
+  test('passes through other inputProps correctly', () => {
+    render(
+      <TextField
+        inputProps={{ 'data-testid': 'custom-input', maxLength: 10 }}
+      />,
+    );
+
+    const input = screen.getByTestId('custom-input');
+    expect(input.getAttribute('maxLength')).toBe('10');
+  });
+
+  test('renders standard variant correctly', () => {
+    const { container } = render(<TextField variant="standard" label="Standard Field" />);
+    // Just verify it renders without error
+    expect(container.firstChild).not.toBeNull();
+  });
+
+  test('renders outlined variant (default) correctly', () => {
+    const { container } = render(<TextField label="Outlined Field" />);
+    // Just verify it renders without error
+    expect(container.firstChild).not.toBeNull();
+  });
+
+  test('handles value changes', () => {
+    const onChange = jest.fn();
+    render(<TextField value="test" onChange={onChange} data-testid="text-field" />);
+
+    const input = screen.getByTestId('text-field') as HTMLInputElement;
+    expect(input.value).toBe('test');
+
+    fireEvent.change(input, { target: { value: 'new value' } });
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/website/docs/components/SimlinDiagram.tsx b/website/docs/components/SimlinDiagram.tsx
index 250694e32..6fe7edf2a 100644
--- a/website/docs/components/SimlinDiagram.tsx
+++ b/website/docs/components/SimlinDiagram.tsx
@@ -1,8 +1,6 @@
 import React from 'react';
 import { toUint8Array } from 'js-base64';
 import { Map, Set } from 'immutable';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
-
 import { defined, Series } from '@system-dynamics/core/common';
 import { UID, ViewElement, Project } from '@system-dynamics/core/datamodel';
 import { Point } from '@system-dynamics/diagram/drawing/common';
@@ -37,12 +35,6 @@ export default class SimlinDiagram extends React.PureComponent<{}, DiagramState>
   }
 
   render() {
-    const theme = createTheme({
-      palette: {
-        mode: 'light',
-      },
-    });
-
     const model = defined(this.state.project.models.get('main'));
 
     const renameVariable = (_oldName: string, _newName: string): void => {
@@ -87,7 +79,7 @@ export default class SimlinDiagram extends React.PureComponent<{}, DiagramState>
 
     return (
       <div style={{ height: '400px', width: '100%', border: '1px solid #e0e0e0', borderRadius: '8px', overflow: 'hidden' }}>
-        <ThemeProvider theme={theme}>{canvasElement}</ThemeProvider>
+        {canvasElement}
       </div>
     );
   }
diff --git a/website/package.json b/website/package.json
index 86a4f328a..3bbc88ebe 100644
--- a/website/package.json
+++ b/website/package.json
@@ -12,9 +12,6 @@
     "format": "find . -name '*.ts' -o -name '*.tsx' | egrep -v '/(lib(\\.(browser|module))?|importer/core|engine/core)/' | xargs prettier --write"
   },
   "devDependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
-    "@mui/material": "^7.1.2",
     "@types/react": "^19.0.0",
     "@types/react-helmet": "^6.1.0",
     "immutable": "^5.1.3",
diff --git a/yarn.lock b/yarn.lock
index 3d2906e45..0e79354b1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -256,7 +256,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.28.6"
 
-"@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.23.9", "@babel/runtime@^7.28.4", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.23.9", "@babel/runtime@^7.24.5", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
   version "7.28.6"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.28.6.tgz#d267a43cb1836dc4d182cce93ae75ba954ef6d2b"
   integrity sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==
@@ -420,7 +420,7 @@
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.9.0.tgz#745969d649977776b43fc7648c556aaa462b4102"
   integrity sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==
 
-"@emotion/react@^11.0.0", "@emotion/react@^11.14.0":
+"@emotion/react@^11.0.0":
   version "11.14.0"
   resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.14.0.tgz#cfaae35ebc67dd9ef4ea2e9acc6cd29e157dd05d"
   integrity sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==
@@ -450,7 +450,7 @@
   resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.4.0.tgz#c9299c34d248bc26e82563735f78953d2efca83c"
   integrity sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==
 
-"@emotion/styled@^11.0.0", "@emotion/styled@^11.14.0":
+"@emotion/styled@^11.0.0":
   version "11.14.1"
   resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.14.1.tgz#8c34bed2948e83e1980370305614c20955aacd1c"
   integrity sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==
@@ -1510,11 +1510,6 @@
   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/core-downloads-tracker@^7.3.7":
-  version "7.3.7"
-  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-7.3.7.tgz#99d9c60be3ce5632ec915b2c287682020ce19a99"
-  integrity sha512-8jWwS6FweMkpyRkrJooamUGe1CQfO1yJ+lM43IyUJbrhHW/ObES+6ry4vfGi8EKaldHL3t3BG1bcLcERuJPcjg==
-
 "@mui/icons-material@^5.0.0":
   version "5.18.0"
   resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.18.0.tgz#97d87f1b7bee5fa7b9ba844518631de3112c1e57"
@@ -1540,24 +1535,6 @@
     react-is "^19.0.0"
     react-transition-group "^4.4.5"
 
-"@mui/material@^7.1.2":
-  version "7.3.7"
-  resolved "https://registry.yarnpkg.com/@mui/material/-/material-7.3.7.tgz#50fc9b9f8645a4d26a48d7c5f7fa0c9876a8c679"
-  integrity sha512-6bdIxqzeOtBAj2wAsfhWCYyMKPLkRO9u/2o5yexcL0C3APqyy91iGSWgT3H7hg+zR2XgE61+WAu12wXPON8b6A==
-  dependencies:
-    "@babel/runtime" "^7.28.4"
-    "@mui/core-downloads-tracker" "^7.3.7"
-    "@mui/system" "^7.3.7"
-    "@mui/types" "^7.4.10"
-    "@mui/utils" "^7.3.7"
-    "@popperjs/core" "^2.11.8"
-    "@types/react-transition-group" "^4.4.12"
-    clsx "^2.1.1"
-    csstype "^3.2.3"
-    prop-types "^15.8.1"
-    react-is "^19.2.3"
-    react-transition-group "^4.4.5"
-
 "@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"
@@ -1567,15 +1544,6 @@
     "@mui/utils" "^5.17.1"
     prop-types "^15.8.1"
 
-"@mui/private-theming@^7.3.7":
-  version "7.3.7"
-  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-7.3.7.tgz#f5b41d573df3824fbfd10a7e6ac8de94bbcf15c5"
-  integrity sha512-w7r1+CYhG0syCAQUWAuV5zSaU2/67WA9JXUderdb7DzCIJdp/5RmJv6L85wRjgKCMsxFF0Kfn0kPgPbPgw/jdw==
-  dependencies:
-    "@babel/runtime" "^7.28.4"
-    "@mui/utils" "^7.3.7"
-    prop-types "^15.8.1"
-
 "@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"
@@ -1587,18 +1555,6 @@
     csstype "^3.1.3"
     prop-types "^15.8.1"
 
-"@mui/styled-engine@^7.3.7":
-  version "7.3.7"
-  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-7.3.7.tgz#cde5a8381e14310f293a53dd59d27ae737a305fc"
-  integrity sha512-y/QkNXv6cF6dZ5APztd/dFWfQ6LHKPx3skyYO38YhQD4+Cxd6sFAL3Z38WMSSC8LQz145Mpp3CcLrSCLKPwYAg==
-  dependencies:
-    "@babel/runtime" "^7.28.4"
-    "@emotion/cache" "^11.14.0"
-    "@emotion/serialize" "^1.3.3"
-    "@emotion/sheet" "^1.4.0"
-    csstype "^3.2.3"
-    prop-types "^15.8.1"
-
 "@mui/system@^5.18.0":
   version "5.18.0"
   resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.18.0.tgz#e55331203a40584b26c5a855a07949ac8973bfb6"
@@ -1613,27 +1569,6 @@
     csstype "^3.1.3"
     prop-types "^15.8.1"
 
-"@mui/system@^7.3.7":
-  version "7.3.7"
-  resolved "https://registry.yarnpkg.com/@mui/system/-/system-7.3.7.tgz#530932e078ba58031cd9bcc71494a544fa635a27"
-  integrity sha512-DovL3k+FBRKnhmatzUMyO5bKkhMLlQ9L7Qw5qHrre3m8zCZmE+31NDVBFfqrbrA7sq681qaEIHdkWD5nmiAjyQ==
-  dependencies:
-    "@babel/runtime" "^7.28.4"
-    "@mui/private-theming" "^7.3.7"
-    "@mui/styled-engine" "^7.3.7"
-    "@mui/types" "^7.4.10"
-    "@mui/utils" "^7.3.7"
-    clsx "^2.1.1"
-    csstype "^3.2.3"
-    prop-types "^15.8.1"
-
-"@mui/types@^7.4.10":
-  version "7.4.10"
-  resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.4.10.tgz#c80ed5850a1da7802a01c1d0153d8603ce41be10"
-  integrity sha512-0+4mSjknSu218GW3isRqoxKRTOrTLd/vHi/7UC4+wZcUrOAqD9kRk7UQRL1mcrzqRoe7s3UT6rsRpbLkW5mHpQ==
-  dependencies:
-    "@babel/runtime" "^7.28.4"
-
 "@mui/types@~7.2.15":
   version "7.2.24"
   resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.24.tgz#5eff63129d9c29d80bbf2d2e561bd0690314dec2"
@@ -1651,18 +1586,6 @@
     prop-types "^15.8.1"
     react-is "^19.0.0"
 
-"@mui/utils@^7.3.7":
-  version "7.3.7"
-  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-7.3.7.tgz#71443559a7fbd993b5b90fcb843fa26a60046f99"
-  integrity sha512-+YjnjMRnyeTkWnspzoxRdiSOgkrcpTikhNPoxOZW0APXx+urHtUoXJ9lbtCZRCA5a4dg5gSbd19alL1DvRs5fg==
-  dependencies:
-    "@babel/runtime" "^7.28.4"
-    "@mui/types" "^7.4.10"
-    "@types/prop-types" "^15.7.15"
-    clsx "^2.1.1"
-    prop-types "^15.8.1"
-    react-is "^19.2.3"
-
 "@napi-rs/wasm-runtime@1.0.7":
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/@napi-rs/wasm-runtime/-/wasm-runtime-1.0.7.tgz#dcfea99a75f06209a235f3d941e3460a51e9b14c"
@@ -1914,6 +1837,119 @@
   resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570"
   integrity sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==
 
+"@radix-ui/primitive@1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.1.3.tgz#e2dbc13bdc5e4168f4334f75832d7bdd3e2de5ba"
+  integrity sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==
+
+"@radix-ui/react-collection@1.1.7":
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.1.7.tgz#d05c25ca9ac4695cc19ba91f42f686e3ea2d9aec"
+  integrity sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-slot" "1.2.3"
+
+"@radix-ui/react-compose-refs@1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz#a2c4c47af6337048ee78ff6dc0d090b390d2bb30"
+  integrity sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==
+
+"@radix-ui/react-context@1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.1.2.tgz#61628ef269a433382c364f6f1e3788a6dc213a36"
+  integrity sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==
+
+"@radix-ui/react-direction@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.1.1.tgz#39e5a5769e676c753204b792fbe6cf508e550a14"
+  integrity sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==
+
+"@radix-ui/react-id@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.1.1.tgz#1404002e79a03fe062b7e3864aa01e24bd1471f7"
+  integrity sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==
+  dependencies:
+    "@radix-ui/react-use-layout-effect" "1.1.1"
+
+"@radix-ui/react-presence@1.1.5":
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.1.5.tgz#5d8f28ac316c32f078afce2996839250c10693db"
+  integrity sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-use-layout-effect" "1.1.1"
+
+"@radix-ui/react-primitive@2.1.3":
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz#db9b8bcff49e01be510ad79893fb0e4cda50f1bc"
+  integrity sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==
+  dependencies:
+    "@radix-ui/react-slot" "1.2.3"
+
+"@radix-ui/react-roving-focus@1.1.11":
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz#ef54384b7361afc6480dcf9907ef2fedb5080fd9"
+  integrity sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==
+  dependencies:
+    "@radix-ui/primitive" "1.1.3"
+    "@radix-ui/react-collection" "1.1.7"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-direction" "1.1.1"
+    "@radix-ui/react-id" "1.1.1"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-use-callback-ref" "1.1.1"
+    "@radix-ui/react-use-controllable-state" "1.2.2"
+
+"@radix-ui/react-slot@1.2.3":
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.2.3.tgz#502d6e354fc847d4169c3bc5f189de777f68cfe1"
+  integrity sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.2"
+
+"@radix-ui/react-tabs@^1.1.13":
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-tabs/-/react-tabs-1.1.13.tgz#3537ce379d7e7ff4eeb6b67a0973e139c2ac1f15"
+  integrity sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==
+  dependencies:
+    "@radix-ui/primitive" "1.1.3"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-direction" "1.1.1"
+    "@radix-ui/react-id" "1.1.1"
+    "@radix-ui/react-presence" "1.1.5"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-roving-focus" "1.1.11"
+    "@radix-ui/react-use-controllable-state" "1.2.2"
+
+"@radix-ui/react-use-callback-ref@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz#62a4dba8b3255fdc5cc7787faeac1c6e4cc58d40"
+  integrity sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==
+
+"@radix-ui/react-use-controllable-state@1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz#905793405de57d61a439f4afebbb17d0645f3190"
+  integrity sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==
+  dependencies:
+    "@radix-ui/react-use-effect-event" "0.0.2"
+    "@radix-ui/react-use-layout-effect" "1.1.1"
+
+"@radix-ui/react-use-effect-event@0.0.2":
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz#090cf30d00a4c7632a15548512e9152217593907"
+  integrity sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==
+  dependencies:
+    "@radix-ui/react-use-layout-effect" "1.1.1"
+
+"@radix-ui/react-use-layout-effect@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz#0c4230a9eed49d4589c967e2d9c0d9d60a23971e"
+  integrity sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==
+
 "@remix-run/router@1.23.2":
   version "1.23.2"
   resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.23.2.tgz#156c4b481c0bee22a19f7924728a67120de06971"
@@ -2724,7 +2760,7 @@
   dependencies:
     "@types/express" "*"
 
-"@types/prop-types@^15.7.12", "@types/prop-types@^15.7.15":
+"@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==
@@ -2751,7 +2787,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-transition-group@^4.4.10", "@types/react-transition-group@^4.4.12":
+"@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==
@@ -4229,7 +4265,7 @@ compression@^1.7.0:
     safe-buffer "5.2.1"
     vary "~1.1.2"
 
-compute-scroll-into-view@^3.0.2:
+compute-scroll-into-view@^3.0.2, compute-scroll-into-view@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/compute-scroll-into-view/-/compute-scroll-into-view-3.1.1.tgz#02c3386ec531fb6a9881967388e53e8564f3e9aa"
   integrity sha512-VRhuHOLoKYOy4UbilLbUzbYg93XLjv2PncJC50EuTWPA3gaja1UjBsUP/D/9/juV3vQFr6XBEzn9KCAHdUvOHw==
@@ -4490,7 +4526,7 @@ cssstyle@^4.2.1:
     "@asamuzakjp/css-color" "^3.2.0"
     rrweb-cssom "^0.8.0"
 
-csstype@^3.0.2, csstype@^3.1.3, csstype@^3.2.2, csstype@^3.2.3:
+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==
@@ -4818,6 +4854,17 @@ dot-prop@^5.2.0:
   dependencies:
     is-obj "^2.0.0"
 
+downshift@^9.0.13:
+  version "9.0.13"
+  resolved "https://registry.yarnpkg.com/downshift/-/downshift-9.0.13.tgz#ed561bb8b57c16bbf5f84064a312b4bf9c4a8150"
+  integrity sha512-fPV+K5jwEzfEAhNhprgCmpWQ23MKwKNzdbtK0QQFiw4hbFcKhMeGB+ccorfWJzmsLR5Dty+CmLDduWlIs74G/w==
+  dependencies:
+    "@babel/runtime" "^7.24.5"
+    compute-scroll-into-view "^3.1.0"
+    prop-types "^15.8.1"
+    react-is "18.2.0"
+    tslib "^2.6.2"
+
 dunder-proto@^1.0.0, dunder-proto@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/dunder-proto/-/dunder-proto-1.0.1.tgz#d7ae667e1dc83482f8b70fd0f6eefc50da30f58a"
@@ -10383,6 +10430,11 @@ react-helmet-async@^1.3.0:
     react-fast-compare "^3.2.0"
     shallowequal "^1.1.0"
 
+react-is@18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
+  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -10398,7 +10450,7 @@ 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, react-is@^19.2.3:
+react-is@^19.0.0:
   version "19.2.3"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-19.2.3.tgz#eec2feb69c7fb31f77d0b5c08c10ae1c88886b29"
   integrity sha512-qJNJfu81ByyabuG7hPFEbXqNcWSU3+eVus+KJs+0ncpGfMyYdvSmxiJxbWR65lYi1I+/0HBcliO029gc4F+PnA==
@@ -12112,7 +12164,7 @@ tsconfig-paths@^3.15.0:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
-tslib@^2.0.0, tslib@^2.0.1, tslib@^2.1.0, tslib@^2.4.0, tslib@^2.8.0:
+tslib@^2.0.0, tslib@^2.0.1, tslib@^2.1.0, tslib@^2.4.0, tslib@^2.6.2, tslib@^2.8.0:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
   integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==