From cecfb52afe59e4e9599fe7a82a56dd8326983409 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Mon, 3 Aug 2026 13:13:57 +0000
Subject: [PATCH 1/4] refactor(site): demui template editor dialogs and
 create-template inputs

Migrate remaining MUI usage in template create/editor flows to shared shadcn components (`FormField`, `Input`, `Textarea`, `Checkbox`, `RadioGroup`, `Link`).

Also drops `disablePortal` on the publish-version help popover so it is no longer clipped by the dialog overflow.
---
 .../TemplateExampleCard.tsx                   | 13 +--
 .../CreateTemplatePage/TemplateUpload.tsx     |  9 +-
 .../CreateTemplatePage/VariableInput.tsx      | 44 +++++-----
 .../TemplateScheduleAutostart.tsx             |  5 +-
 .../TemplateVersionEditorPage/FileDialog.tsx  | 40 +++++----
 .../ProvisionerTagsPopover.tsx                | 15 +---
 .../PublishTemplateVersionDialog.tsx          | 84 +++++++++++--------
 .../pages/TemplatesPage/EmptyTemplates.tsx    |  4 +-
 8 files changed, 115 insertions(+), 99 deletions(-)

diff --git a/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx b/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx
index b401f71ff9514..2ad2d00a54bcb 100644
--- a/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx
+++ b/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx
@@ -1,9 +1,9 @@
-import Link from "@mui/material/Link";
 import type { FC, HTMLAttributes } from "react";
 import { Link as RouterLink } from "react-router";
 import type { TemplateExample } from "#/api/typesGenerated";
 import { Button } from "#/components/Button/Button";
 import { ExternalImage } from "#/components/ExternalImage/ExternalImage";
+import { Link } from "#/components/Link/Link";
 import { Pill } from "#/components/Pill/Pill";
 import { cn } from "#/utils/cn";
 
@@ -53,11 +53,14 @@ export const TemplateExampleCard: FC<TemplateExampleCardProps> = ({
 				<span className="block text-[13px] leading-[1.6] text-content-secondary">
 					{example.description}{" "}
 					<Link
-						component={RouterLink}
-						to={`/starter-templates/${example.id}`}
-						className="inline-block text-[13px] mt-1"
+						href={`/starter-templates/${example.id}`}
+						className="inline-block text-[13px] mt-1 p-0"
+						asChild
+						showExternalIcon={false}
 					>
-						Read more
+						<RouterLink to={`/starter-templates/${example.id}`}>
+							Read more
+						</RouterLink>
 					</Link>
 				</span>
 			</div>
diff --git a/site/src/pages/CreateTemplatePage/TemplateUpload.tsx b/site/src/pages/CreateTemplatePage/TemplateUpload.tsx
index e5a9e67f2df57..1a0882c4c401a 100644
--- a/site/src/pages/CreateTemplatePage/TemplateUpload.tsx
+++ b/site/src/pages/CreateTemplatePage/TemplateUpload.tsx
@@ -1,7 +1,7 @@
-import Link from "@mui/material/Link";
 import type { FC } from "react";
 import { Link as RouterLink } from "react-router";
 import { FileUpload } from "#/components/FileUpload/FileUpload";
+import { Link } from "#/components/Link/Link";
 
 export interface TemplateUploadProps {
 	isUploading: boolean;
@@ -20,14 +20,15 @@ export const TemplateUpload: FC<TemplateUploadProps> = ({
 		<>
 			The template has to be a .tar or .zip file. You can also use our{" "}
 			<Link
-				component={RouterLink}
-				to="/starter-templates"
 				// Prevent trigger the upload
 				onClick={(e) => {
 					e.stopPropagation();
 				}}
+				asChild
+				showExternalIcon={false}
+				className="p-0"
 			>
-				starter templates
+				<RouterLink to="/starter-templates">starter templates</RouterLink>
 			</Link>{" "}
 			to get started with Coder.
 		</>
diff --git a/site/src/pages/CreateTemplatePage/VariableInput.tsx b/site/src/pages/CreateTemplatePage/VariableInput.tsx
index 3d2e4c1070cbb..b5ed2ae05ca83 100644
--- a/site/src/pages/CreateTemplatePage/VariableInput.tsx
+++ b/site/src/pages/CreateTemplatePage/VariableInput.tsx
@@ -1,9 +1,8 @@
-import FormControlLabel from "@mui/material/FormControlLabel";
-import Radio from "@mui/material/Radio";
-import RadioGroup from "@mui/material/RadioGroup";
-import TextField from "@mui/material/TextField";
 import type { FC } from "react";
 import type { TemplateVersionVariable } from "#/api/typesGenerated";
+import { Input } from "#/components/Input/Input";
+import { Label } from "#/components/Label/Label";
+import { RadioGroup, RadioGroupItem } from "#/components/RadioGroup/RadioGroup";
 
 const isBoolean = (variable: TemplateVersionVariable) => {
 	return variable.type === "bool";
@@ -62,35 +61,36 @@ const VariableField: FC<VariableInputProps> = ({
 	defaultValue,
 }) => {
 	if (isBoolean(variable)) {
+		const trueId = `${variable.name}-true`;
+		const falseId = `${variable.name}-false`;
+
 		return (
 			<RadioGroup
 				id={variable.name}
 				defaultValue={variable.default_value}
-				onChange={(event) => {
-					onChange(event.target.value);
-				}}
+				disabled={disabled}
+				onValueChange={onChange}
 			>
-				<FormControlLabel
-					disabled={disabled}
-					value="true"
-					control={<Radio size="small" />}
-					label="True"
-				/>
-				<FormControlLabel
-					disabled={disabled}
-					value="false"
-					control={<Radio size="small" />}
-					label="False"
-				/>
+				<div className="flex items-center gap-2">
+					<RadioGroupItem id={trueId} value="true" />
+					<Label htmlFor={trueId} className="font-normal cursor-pointer">
+						True
+					</Label>
+				</div>
+				<div className="flex items-center gap-2">
+					<RadioGroupItem id={falseId} value="false" />
+					<Label htmlFor={falseId} className="font-normal cursor-pointer">
+						False
+					</Label>
+				</div>
 			</RadioGroup>
 		);
 	}
 
 	return (
-		<TextField
+		<Input
 			autoComplete="off"
 			id={variable.name}
-			size="small"
 			disabled={disabled}
 			placeholder={variable.sensitive ? "" : variable.default_value}
 			required={variable.required}
@@ -105,7 +105,7 @@ const VariableField: FC<VariableInputProps> = ({
 					? "number"
 					: variable.sensitive
 						? "password"
-						: "string"
+						: "text"
 			}
 		/>
 	);
diff --git a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleAutostart.tsx b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleAutostart.tsx
index fdff2130f9346..e6558478e0dcf 100644
--- a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleAutostart.tsx
+++ b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleAutostart.tsx
@@ -1,4 +1,3 @@
-import FormHelperText from "@mui/material/FormHelperText";
 import type { FC } from "react";
 import { Button } from "#/components/Button/Button";
 import {
@@ -54,9 +53,9 @@ export const TemplateScheduleAutostart: FC<TemplateScheduleAutostartProps> = ({
 					</Button>
 				))}
 			</div>
-			<FormHelperText>
+			<div className="text-xs text-content-secondary">
 				<AutostartHelperText allowed={enabled} days={value} />
-			</FormHelperText>
+			</div>
 		</div>
 	);
 };
diff --git a/site/src/pages/TemplateVersionEditorPage/FileDialog.tsx b/site/src/pages/TemplateVersionEditorPage/FileDialog.tsx
index ef0d5ec17c944..a00fd1750e722 100644
--- a/site/src/pages/TemplateVersionEditorPage/FileDialog.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/FileDialog.tsx
@@ -1,6 +1,6 @@
-import TextField from "@mui/material/TextField";
 import { type ChangeEvent, type FC, useState } from "react";
 import { ConfirmDialog } from "#/components/Dialog/ConfirmDialog/ConfirmDialog";
+import { FormField } from "#/components/FormField/FormField";
 import { type FileTree, isFolder, validatePath } from "#/utils/filetree";
 
 interface CreateFileDialogProps {
@@ -63,22 +63,25 @@ export const CreateFileDialog: FC<CreateFileDialogProps> = ({
 						Specify the path to a file to be created. This path can contain
 						slashes too.
 					</p>
-					<TextField
+					<FormField
 						autoFocus
 						onKeyDown={(event) => {
 							if (event.key === "Enter") {
 								handleConfirm();
 							}
 						}}
-						error={Boolean(error)}
-						helperText={error}
-						name="file-path"
+						field={{
+							name: "file-path",
+							id: "file-path",
+							value: pathValue,
+							onChange: handleChange,
+							onBlur: () => {},
+							error: Boolean(error),
+							helperText: error,
+						}}
+						label="File Path"
 						autoComplete="off"
-						id="file-path"
 						placeholder="example.tf"
-						value={pathValue}
-						onChange={handleChange}
-						label="File Path"
 					/>
 				</div>
 			}
@@ -184,22 +187,25 @@ export const RenameFileDialog: FC<RenameFileDialogProps> = ({
 						Rename <strong>{filename}</strong> to something else. This path can
 						contain slashes too!
 					</p>
-					<TextField
+					<FormField
 						autoFocus
 						onKeyDown={(event) => {
 							if (event.key === "Enter") {
 								handleConfirm();
 							}
 						}}
-						error={Boolean(error)}
-						helperText={error}
-						name="file-path"
+						field={{
+							name: "file-path",
+							id: "file-path",
+							value: pathValue,
+							onChange: handleChange,
+							onBlur: () => {},
+							error: Boolean(error),
+							helperText: error,
+						}}
+						label="File Path"
 						autoComplete="off"
-						id="file-path"
 						placeholder={filename}
-						value={pathValue}
-						onChange={handleChange}
-						label="File Path"
 					/>
 				</div>
 			}
diff --git a/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx b/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx
index a10dca47b9812..d6925e93a323f 100644
--- a/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx
@@ -1,10 +1,9 @@
-import Link from "@mui/material/Link";
-import useTheme from "@mui/system/useTheme";
 import type { FC } from "react";
 import type { ProvisionerDaemon } from "#/api/typesGenerated";
 import { ChevronDownIcon } from "#/components/AnimatedIcons/ChevronDown";
 import { FormSection, VerticalForm } from "#/components/Form/Form";
 import { TopbarButton } from "#/components/FullPageLayout/Topbar";
+import { Link } from "#/components/Link/Link";
 import {
 	Popover,
 	PopoverContent,
@@ -22,8 +21,6 @@ export const ProvisionerTagsPopover: FC<ProvisionerTagsPopoverProps> = ({
 	tags,
 	onTagsChange,
 }) => {
-	const theme = useTheme();
-
 	return (
 		<Popover>
 			<PopoverTrigger asChild>
@@ -36,13 +33,7 @@ export const ProvisionerTagsPopover: FC<ProvisionerTagsPopoverProps> = ({
 				align="end"
 				className="w-[300px] bg-surface-secondary border-surface-quaternary"
 			>
-				<div
-					css={{
-						color: theme.palette.text.secondary,
-						padding: 20,
-						borderBottom: `1px solid ${theme.palette.divider}`,
-					}}
-				>
+				<div className="text-content-secondary p-5">
 					<VerticalForm>
 						<FormSection
 							classes={{
@@ -60,6 +51,8 @@ export const ProvisionerTagsPopover: FC<ProvisionerTagsPopoverProps> = ({
 										href={docs("/admin/provisioners")}
 										target="_blank"
 										rel="noreferrer"
+										className="p-0"
+										showExternalIcon={false}
 									>
 										Learn more...
 									</Link>
diff --git a/site/src/pages/TemplateVersionEditorPage/PublishTemplateVersionDialog.tsx b/site/src/pages/TemplateVersionEditorPage/PublishTemplateVersionDialog.tsx
index b496eee234c87..1f2473d08ae0a 100644
--- a/site/src/pages/TemplateVersionEditorPage/PublishTemplateVersionDialog.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/PublishTemplateVersionDialog.tsx
@@ -1,12 +1,11 @@
-import Checkbox from "@mui/material/Checkbox";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import TextField from "@mui/material/TextField";
 import { useFormik } from "formik";
 import type { FC } from "react";
 import * as Yup from "yup";
 import { EnterpriseBadge } from "#/components/Badges/Badges";
+import { Checkbox } from "#/components/Checkbox/Checkbox";
 import { ConfirmDialog } from "#/components/Dialog/ConfirmDialog/ConfirmDialog";
 import { FormFields } from "#/components/Form/Form";
+import { FormField } from "#/components/FormField/FormField";
 import {
 	HelpPopover,
 	HelpPopoverContent,
@@ -16,7 +15,10 @@ import {
 	HelpPopoverText,
 	HelpPopoverTitle,
 } from "#/components/HelpPopover/HelpPopover";
+import { Label } from "#/components/Label/Label";
+import { Textarea } from "#/components/Textarea/Textarea";
 import type { PublishVersionData } from "#/pages/TemplateVersionEditorPage/types";
+import { cn } from "#/utils/cn";
 import { docs } from "#/utils/docs";
 import { getFormHelpers } from "#/utils/formUtils";
 
@@ -53,6 +55,7 @@ export const PublishTemplateVersionDialog: FC<
 		onSubmit: onConfirm,
 	});
 	const getFieldHelpers = getFormHelpers(form, publishingError);
+	const messageField = getFieldHelpers("message");
 	const handleClose = () => {
 		form.resetForm();
 		onClose();
@@ -76,48 +79,57 @@ export const PublishTemplateVersionDialog: FC<
 					<div className="flex flex-col gap-4">
 						<p>You are about to publish a new version of this template.</p>
 						<FormFields>
-							<TextField
-								{...getFieldHelpers("name")}
+							<FormField
+								field={getFieldHelpers("name")}
 								label="Version name"
 								autoFocus
 								disabled={isPublishing}
 							/>
 
-							<TextField
-								{...getFieldHelpers("message")}
-								label="Message"
-								placeholder="Write a short message about the changes you made..."
-								disabled={isPublishing}
-								multiline
-								rows={5}
-							/>
-
-							<div className="flex flex-row gap-4">
-								<FormControlLabel
-									label="Promote to active version"
-									control={
-										<Checkbox
-											size="small"
-											checked={form.values.isActiveVersion}
-											onChange={async (e) => {
-												await form.setFieldValue(
-													"isActiveVersion",
-													e.target.checked,
-												);
-											}}
-											name="isActiveVersion"
-										/>
-									}
+							<div className="flex flex-col gap-2">
+								<Label htmlFor={messageField.id}>Message</Label>
+								<Textarea
+									id={messageField.id}
+									name={messageField.name}
+									value={messageField.value ?? ""}
+									onChange={messageField.onChange}
+									onBlur={messageField.onBlur}
+									placeholder="Write a short message about the changes you made..."
+									disabled={isPublishing}
+									rows={5}
+									aria-invalid={messageField.error}
+									className={cn(
+										messageField.error && "border-border-destructive",
+									)}
 								/>
+								{messageField.error && (
+									<span className="text-xs text-content-destructive">
+										{messageField.helperText}
+									</span>
+								)}
+							</div>
+
+							<div className="flex flex-row items-center gap-4">
+								<div className="flex items-center gap-2">
+									<Checkbox
+										id="isActiveVersion"
+										checked={form.values.isActiveVersion}
+										onCheckedChange={(checked) => {
+											void form.setFieldValue(
+												"isActiveVersion",
+												Boolean(checked),
+											);
+										}}
+										name="isActiveVersion"
+									/>
+									<Label htmlFor="isActiveVersion" className="cursor-pointer">
+										Promote to active version
+									</Label>
+								</div>
 
 								<HelpPopover>
 									<HelpPopoverIconTrigger />
-
-									{/**
-									 * 2025-09-03 - Without disablePortal, the tooltip will render under the dialog;
-									 * this prop may not need to be set when we switch away from MuiDialog
-									 */}
-									<HelpPopoverContent disablePortal>
+									<HelpPopoverContent>
 										<HelpPopoverTitle>Active versions</HelpPopoverTitle>
 										<HelpPopoverText>
 											Templates can enforce that the active version be used for
diff --git a/site/src/pages/TemplatesPage/EmptyTemplates.tsx b/site/src/pages/TemplatesPage/EmptyTemplates.tsx
index a3d1848e203db..c8680ad404bbf 100644
--- a/site/src/pages/TemplatesPage/EmptyTemplates.tsx
+++ b/site/src/pages/TemplatesPage/EmptyTemplates.tsx
@@ -1,9 +1,9 @@
-import Link from "@mui/material/Link";
 import type { FC } from "react";
 import { Link as RouterLink } from "react-router";
 import type { TemplateExample } from "#/api/typesGenerated";
 import { Button } from "#/components/Button/Button";
 import { CodeExample } from "#/components/CodeExample/CodeExample";
+import { Link } from "#/components/Link/Link";
 import { TableEmpty } from "#/components/TableEmpty/TableEmpty";
 import { TemplateExampleCard } from "#/modules/templates/TemplateExampleCard/TemplateExampleCard";
 import { docs } from "#/utils/docs";
@@ -64,6 +64,8 @@ export const EmptyTemplates: FC<EmptyTemplatesProps> = ({
 							href={docs("/admin/templates/creating-templates")}
 							target="_blank"
 							rel="noreferrer"
+							showExternalIcon={false}
+							className="p-0 text-xs"
 						>
 							create your own
 						</Link>

From a3f36fded6986c39b732592480bbd341db847820 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Mon, 3 Aug 2026 14:12:49 +0000
Subject: [PATCH 2/4] fix: remove duplicate href

---
 .../templates/TemplateExampleCard/TemplateExampleCard.tsx        | 1 -
 1 file changed, 1 deletion(-)

diff --git a/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx b/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx
index 2ad2d00a54bcb..2c7ede309f97a 100644
--- a/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx
+++ b/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx
@@ -53,7 +53,6 @@ export const TemplateExampleCard: FC<TemplateExampleCardProps> = ({
 				<span className="block text-[13px] leading-[1.6] text-content-secondary">
 					{example.description}{" "}
 					<Link
-						href={`/starter-templates/${example.id}`}
 						className="inline-block text-[13px] mt-1 p-0"
 						asChild
 						showExternalIcon={false}

From 8e2b2909d36ac441de87bf9dda819b6d873c649c Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 4 Aug 2026 00:33:59 +1000
Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=A4=96=20refactor(site):=20associate?=
 =?UTF-8?q?=20publish=20message=20error=20and=20add=20help=20popover=20sto?=
 =?UTF-8?q?ry?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../PublishTemplateVersionDialog.tsx          |  9 ++++++++-
 .../TemplateVersionEditor.stories.tsx         | 19 ++++++++++++++++++-
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/site/src/pages/TemplateVersionEditorPage/PublishTemplateVersionDialog.tsx b/site/src/pages/TemplateVersionEditorPage/PublishTemplateVersionDialog.tsx
index 1f2473d08ae0a..15b7b8b353bea 100644
--- a/site/src/pages/TemplateVersionEditorPage/PublishTemplateVersionDialog.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/PublishTemplateVersionDialog.tsx
@@ -56,6 +56,7 @@ export const PublishTemplateVersionDialog: FC<
 	});
 	const getFieldHelpers = getFormHelpers(form, publishingError);
 	const messageField = getFieldHelpers("message");
+	const messageErrorId = `${messageField.id}-error`;
 	const handleClose = () => {
 		form.resetForm();
 		onClose();
@@ -98,12 +99,18 @@ export const PublishTemplateVersionDialog: FC<
 									disabled={isPublishing}
 									rows={5}
 									aria-invalid={messageField.error}
+									aria-describedby={
+										messageField.error ? messageErrorId : undefined
+									}
 									className={cn(
 										messageField.error && "border-border-destructive",
 									)}
 								/>
 								{messageField.error && (
-									<span className="text-xs text-content-destructive">
+									<span
+										id={messageErrorId}
+										className="text-xs text-content-destructive"
+									>
 										{messageField.helperText}
 									</span>
 								)}
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx
index 9107b6a9495f7..3004762e9c71d 100644
--- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { action } from "storybook/actions";
+import { expect, userEvent, within } from "storybook/test";
 import {
 	MockFailedProvisionerJob,
 	MockRunningProvisionerJob,
@@ -156,12 +157,28 @@ export const WithError = {
 	},
 };
 
-export const PublishDialog = {
+export const PublishDialog: Story = {
 	args: {
 		isAskingPublishParameters: true,
 	},
 };
 
+export const PublishDialogActiveVersionHelp: Story = {
+	args: {
+		isAskingPublishParameters: true,
+	},
+	play: async ({ canvasElement }) => {
+		// The dialog and popover are portaled, so query against the document body.
+		const body = within(canvasElement.ownerDocument.body);
+		const trigger = await body.findByRole("button", { name: "More info" });
+		await userEvent.click(trigger);
+		await expect(await body.findByText("Active versions")).toBeInTheDocument();
+		await expect(
+			body.getByRole("link", { name: "Review the documentation" }),
+		).toBeInTheDocument();
+	},
+};
+
 export const Published = {
 	args: {
 		publishedVersion: MockTemplateVersion,

From fce7714fc9c5e41d55128ceeef02e2c7b11c4e28 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Mon, 3 Aug 2026 14:41:51 +0000
Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=A4=96=20chore(site):=20drop=20unused?=
 =?UTF-8?q?=20@mui/system=20dependency?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/package.json   | 1 -
 site/pnpm-lock.yaml | 3 ---
 2 files changed, 4 deletions(-)

diff --git a/site/package.json b/site/package.json
index 06e1bc04f6d5c..1573aad5b70c1 100644
--- a/site/package.json
+++ b/site/package.json
@@ -56,7 +56,6 @@
 		"@lexical/utils": "0.48.0",
 		"@monaco-editor/react": "4.7.0",
 		"@mui/material": "5.18.0",
-		"@mui/system": "5.18.0",
 		"@novnc/novnc": "^1.5.0",
 		"@pierre/diffs": "1.2.7",
 		"@pierre/trees": "1.0.0-beta.4",
diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
index 05e9d781263f1..adaad85617e5f 100644
--- a/site/pnpm-lock.yaml
+++ b/site/pnpm-lock.yaml
@@ -89,9 +89,6 @@ importers:
       '@mui/material':
         specifier: 5.18.0
         version: 5.18.0(@emotion/react@11.14.0(@types/react@19.2.17)(react@19.2.8))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.17)(react@19.2.8))(@types/react@19.2.17)(react@19.2.8))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@mui/system':
-        specifier: 5.18.0
-        version: 5.18.0(@emotion/react@11.14.0(@types/react@19.2.17)(react@19.2.8))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.17)(react@19.2.8))(@types/react@19.2.17)(react@19.2.8))(@types/react@19.2.17)(react@19.2.8)
       '@novnc/novnc':
         specifier: ^1.5.0
         version: 1.5.0