From f9cf33c498df67febf6fdba461e58b719b5017bd Mon Sep 17 00:00:00 2001
From: Michael Smith <throwawayclover@gmail.com>
Date: Fri, 15 Aug 2025 05:40:43 +0000
Subject: [PATCH 01/13] chore: update TimelineDateRow

---
 .../components/Timeline/TimelineDateRow.tsx   | 20 ++-----------------
 1 file changed, 2 insertions(+), 18 deletions(-)

diff --git a/site/src/components/Timeline/TimelineDateRow.tsx b/site/src/components/Timeline/TimelineDateRow.tsx
index 3425b06abe05a..9fcfef2802bb0 100644
--- a/site/src/components/Timeline/TimelineDateRow.tsx
+++ b/site/src/components/Timeline/TimelineDateRow.tsx
@@ -1,4 +1,3 @@
-import { css, useTheme } from "@emotion/react";
 import TableCell from "@mui/material/TableCell";
 import TableRow from "@mui/material/TableRow";
 import type { FC } from "react";
@@ -9,25 +8,10 @@ export interface TimelineDateRow {
 }
 
 export const TimelineDateRow: FC<TimelineDateRow> = ({ date }) => {
-	const theme = useTheme();
-
 	return (
-		<TableRow
-			css={css`
-        &:not(:first-of-type) td {
-          border-top: 1px solid ${theme.palette.divider};
-        }
-      `}
-		>
+		<TableRow className="[&:not:first-of-type_td]:border-t [&:not:first-of-type_td]:border-solid">
 			<TableCell
-				css={{
-					padding: "8px 32px !important",
-					background: `${theme.palette.background.paper} !important`,
-					fontSize: 12,
-					position: "relative",
-					color: theme.palette.text.secondary,
-					textTransform: "capitalize",
-				}}
+				className="px-2! py-8! text-xs relative text-content-secondary bg-surface-secondary capitalize"
 				title={date.toLocaleDateString()}
 			>
 				{createDisplayDate(date)}

From 4dcbe001da541b000c89d740b66e0992ccb7a713 Mon Sep 17 00:00:00 2001
From: Michael Smith <throwawayclover@gmail.com>
Date: Fri, 15 Aug 2025 06:15:12 +0000
Subject: [PATCH 02/13] chore: convert TimelineEntry

---
 site/src/@types/react.d.ts                    |  7 +++
 .../MultiSelectCombobox.tsx                   |  2 +-
 .../src/components/Timeline/TimelineEntry.tsx | 50 ++++---------------
 3 files changed, 19 insertions(+), 40 deletions(-)
 create mode 100644 site/src/@types/react.d.ts

diff --git a/site/src/@types/react.d.ts b/site/src/@types/react.d.ts
new file mode 100644
index 0000000000000..28df1fe213146
--- /dev/null
+++ b/site/src/@types/react.d.ts
@@ -0,0 +1,7 @@
+declare module "react" {
+	interface CSSProperties {
+		[key: `--${string}`]: string | number;
+	}
+}
+
+export {};
diff --git a/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx b/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx
index 8ff83f2a4583a..7b61dd379dcb6 100644
--- a/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx
+++ b/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx
@@ -496,7 +496,7 @@ export const MultiSelectCombobox = forwardRef<
 									<Badge
 										key={option.value}
 										className={cn(
-											"data-[disabled]:bg-content-disabled data-[disabled]:text-surface-tertiarydata-[disabled]:hover:bg-content-disabled",
+											"data-[disabled]:bg-content-disabled data-[disabled]:text-surface-tertiary data-[disabled]:hover:bg-content-disabled",
 											"data-[fixed]:bg-content-disabled data-[fixed]:text-surface-tertiary data-[fixed]:hover:bg-surface-secondary",
 											badgeClassName,
 										)}
diff --git a/site/src/components/Timeline/TimelineEntry.tsx b/site/src/components/Timeline/TimelineEntry.tsx
index 73cdc19295b97..e32f19926fc4a 100644
--- a/site/src/components/Timeline/TimelineEntry.tsx
+++ b/site/src/components/Timeline/TimelineEntry.tsx
@@ -1,57 +1,29 @@
-import type { Interpolation } from "@emotion/react";
 import TableRow, { type TableRowProps } from "@mui/material/TableRow";
 import { forwardRef } from "react";
-import type { Theme } from "theme";
+import { cn } from "utils/cn";
 
-interface TimelineEntryProps extends TableRowProps {
+interface TimelineEntryProps extends Omit<TableRowProps, "style"> {
 	clickable?: boolean;
 }
 
 export const TimelineEntry = forwardRef<
 	HTMLTableRowElement,
 	TimelineEntryProps
->(function TimelineEntry({ children, clickable = true, ...props }, ref) {
+>(({ children, clickable = true, className, ...props }, ref) => {
 	return (
 		<TableRow
 			ref={ref}
-			css={[styles.row, clickable ? styles.clickable : null]}
 			{...props}
+			style={{ "--side-padding": "32px", "--line-width": "2px" }}
+			className={cn(
+				"focus:-outline-offset-1 focus:outline-2 focus:outline-border focus:outline-solid",
+				"[&_td]:relative [&_td]:overflow-hidden",
+				"[&_td:before]:absolute [&_td:before]:block [&_td:before]:h-full [&_td:before]:bg-border [&_td:before]:content-[''] [&_td:before]:w-[--line-width] [&_td:before]:left-[calc((var(--side-padding)+var(--avatar-default)/2)-var(--line-width)/2)]",
+				clickable && "cursor-pointer hover:bg-surface-secondary",
+				className,
+			)}
 		>
 			{children}
 		</TableRow>
 	);
 });
-
-const styles = {
-	row: (theme) => ({
-		"--side-padding": "32px",
-		"&:focus": {
-			outlineStyle: "solid",
-			outlineOffset: -1,
-			outlineWidth: 2,
-			outlineColor: theme.palette.primary.main,
-		},
-		"& td": {
-			position: "relative",
-			overflow: "hidden",
-		},
-		"& td:before": {
-			"--line-width": "2px",
-			position: "absolute",
-			left: "calc((var(--side-padding) + var(--avatar-default)/2) - var(--line-width) / 2)",
-			display: "block",
-			content: "''",
-			height: "100%",
-			width: "var(--line-width)",
-			background: theme.palette.divider,
-		},
-	}),
-
-	clickable: (theme) => ({
-		cursor: "pointer",
-
-		"&:hover": {
-			backgroundColor: theme.palette.action.hover,
-		},
-	}),
-} satisfies Record<string, Interpolation<Theme>>;

From f8dad466875297cfcfa771611d5f1d12efc34b91 Mon Sep 17 00:00:00 2001
From: Michael Smith <throwawayclover@gmail.com>
Date: Fri, 15 Aug 2025 06:18:29 +0000
Subject: [PATCH 03/13] refactor: convert TableToolbar

---
 .../components/TableToolbar/TableToolbar.tsx   | 18 +++---------------
 1 file changed, 3 insertions(+), 15 deletions(-)

diff --git a/site/src/components/TableToolbar/TableToolbar.tsx b/site/src/components/TableToolbar/TableToolbar.tsx
index 4ec9f2d8ff67e..26e0ea81b563c 100644
--- a/site/src/components/TableToolbar/TableToolbar.tsx
+++ b/site/src/components/TableToolbar/TableToolbar.tsx
@@ -3,20 +3,8 @@ import type { FC, PropsWithChildren } from "react";
 
 export const TableToolbar: FC<PropsWithChildren> = ({ children }) => {
 	return (
-		<div
-			css={(theme) => ({
-				fontSize: 13,
-				marginBottom: "8px",
-				marginTop: 0,
-				height: "36px", // The size of a small button
-				color: theme.palette.text.secondary,
-				display: "flex",
-				alignItems: "center",
-				"& strong": {
-					color: theme.palette.text.primary,
-				},
-			})}
-		>
+		// The height is meant to match the size of a small button
+		<div className="text-[13px] mb-2 mt-0 h-9 flex items-center [&_strong]:text-content-primary text-content-secondary">
 			{children}
 		</div>
 	);
@@ -42,7 +30,7 @@ export const PaginationStatus: FC<PaginationStatusProps> = (props) => {
 
 	if (isLoading) {
 		return (
-			<div css={{ height: 24, display: "flex", alignItems: "center" }}>
+			<div className="h-6 flex items-center">
 				<Skeleton variant="text" width={160} height={16} />
 			</div>
 		);

From 1d71eb8a6b8242f503ac0f67585526ac4d8b0ea1 Mon Sep 17 00:00:00 2001
From: Michael Smith <throwawayclover@gmail.com>
Date: Fri, 15 Aug 2025 06:24:20 +0000
Subject: [PATCH 04/13] chore: convert more

---
 site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx | 5 ++---
 site/src/components/TableEmpty/TableEmpty.tsx               | 2 +-
 site/src/components/TableLoader/TableLoader.tsx             | 2 +-
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx b/site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx
index 160eaf1f8118d..3d575bb945983 100644
--- a/site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx
+++ b/site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx
@@ -44,9 +44,8 @@ export const SyntaxHighlighter: FC<SyntaxHighlighterProps> = ({
 	return (
 		<div
 			data-chromatic="ignore"
-			css={{
-				padding: "8px 0",
-				height: "100%",
+			className="px-2 py-0 h-full"
+			style={{
 				backgroundColor: theme.monaco.colors["editor.background"],
 			}}
 		>
diff --git a/site/src/components/TableEmpty/TableEmpty.tsx b/site/src/components/TableEmpty/TableEmpty.tsx
index 554ba84baa3ce..d75e496ff2d2c 100644
--- a/site/src/components/TableEmpty/TableEmpty.tsx
+++ b/site/src/components/TableEmpty/TableEmpty.tsx
@@ -11,7 +11,7 @@ type TableEmptyProps = EmptyStateProps;
 export const TableEmpty: FC<TableEmptyProps> = (props) => {
 	return (
 		<TableRow>
-			<TableCell colSpan={999} css={{ padding: "0 !important" }}>
+			<TableCell colSpan={999} className="!p-0">
 				<EmptyState {...props} />
 			</TableCell>
 		</TableRow>
diff --git a/site/src/components/TableLoader/TableLoader.tsx b/site/src/components/TableLoader/TableLoader.tsx
index 3efaa8bb19ca0..9bafdff557792 100644
--- a/site/src/components/TableLoader/TableLoader.tsx
+++ b/site/src/components/TableLoader/TableLoader.tsx
@@ -6,7 +6,7 @@ import { Loader } from "../Loader/Loader";
 export const TableLoader: FC = () => {
 	return (
 		<TableRow>
-			<TableCell colSpan={999} css={{ textAlign: "center", height: 160 }}>
+			<TableCell colSpan={999} className="h-40 text-center">
 				<Loader />
 			</TableCell>
 		</TableRow>

From 58423d282d6fa6bbe3d0465b8bb6fc72f85c2c31 Mon Sep 17 00:00:00 2001
From: Michael Smith <throwawayclover@gmail.com>
Date: Fri, 15 Aug 2025 06:35:02 +0000
Subject: [PATCH 05/13] chore: convert most of Stats

---
 site/src/components/Stats/Stats.tsx | 70 ++++++-----------------------
 1 file changed, 14 insertions(+), 56 deletions(-)

diff --git a/site/src/components/Stats/Stats.tsx b/site/src/components/Stats/Stats.tsx
index 89717250686b7..73e35c5ff8b46 100644
--- a/site/src/components/Stats/Stats.tsx
+++ b/site/src/components/Stats/Stats.tsx
@@ -6,7 +6,11 @@ export const Stats: FC<HTMLAttributes<HTMLDivElement>> = ({
 	...attrs
 }) => {
 	return (
-		<div css={styles.stats} {...attrs}>
+		<div
+			className="block p-4 rounded-md border-border m-0 flex-wrap text-content-secondary md:flex md:py-0"
+			css={styles.stats}
+			{...attrs}
+		>
 			{children}
 		</div>
 	);
@@ -19,65 +23,19 @@ interface StatsItemProps extends HTMLAttributes<HTMLDivElement> {
 
 export const StatsItem: FC<StatsItemProps> = ({ label, value, ...attrs }) => {
 	return (
-		<div css={styles.statItem} {...attrs}>
-			<span css={styles.statsLabel}>{label}:</span>
-			<span css={styles.statsValue}>{value}</span>
+		<div className="py-3.5 px-4 flex items-baseline gap-2 md:p-2" {...attrs}>
+			<span className="block break-words">{label}:</span>
+			<span className="mt-0.5 flex break-words text-content-primary items-center [&_a]:text-content-primary no-underline font-semibold [&_a]:hover:underline">
+				{value}
+			</span>
 		</div>
 	);
 };
 
 const styles = {
-	stats: (theme) => ({
-		...(theme.typography.body2 as CSSObject),
-		paddingLeft: 16,
-		paddingRight: 16,
-		borderRadius: 8,
-		border: `1px solid ${theme.palette.divider}`,
-		display: "flex",
-		alignItems: "center",
-		color: theme.palette.text.secondary,
-		margin: "0px",
-		flexWrap: "wrap",
-
-		[theme.breakpoints.down("md")]: {
-			display: "block",
-			padding: 16,
-		},
-	}),
-
-	statItem: (theme) => ({
-		padding: 14,
-		paddingLeft: 16,
-		paddingRight: 16,
-		display: "flex",
-		alignItems: "baseline",
-		gap: 8,
-
-		[theme.breakpoints.down("md")]: {
-			padding: 8,
-		},
-	}),
-
-	statsLabel: {
-		display: "block",
-		wordWrap: "break-word",
+	stats: (theme) => {
+		const value = theme.typography.body2;
+		console.log(value);
+		return value as CSSObject;
 	},
-
-	statsValue: (theme) => ({
-		marginTop: 2,
-		display: "flex",
-		wordWrap: "break-word",
-		color: theme.palette.text.primary,
-		alignItems: "center",
-
-		"& a": {
-			color: theme.palette.text.primary,
-			textDecoration: "none",
-			fontWeight: 600,
-
-			"&:hover": {
-				textDecoration: "underline",
-			},
-		},
-	}),
 } satisfies Record<string, Interpolation<Theme>>;

From 4f07d6b5d7d0e6d87b5c4b4306d86b3f05c931da Mon Sep 17 00:00:00 2001
From: Michael Smith <throwawayclover@gmail.com>
Date: Fri, 15 Aug 2025 06:42:38 +0000
Subject: [PATCH 06/13] chore: convert StackLabel

---
 site/src/components/StackLabel/StackLabel.tsx | 16 ++--------------
 1 file changed, 2 insertions(+), 14 deletions(-)

diff --git a/site/src/components/StackLabel/StackLabel.tsx b/site/src/components/StackLabel/StackLabel.tsx
index 1c9b4ee0c8339..1292eab57dce0 100644
--- a/site/src/components/StackLabel/StackLabel.tsx
+++ b/site/src/components/StackLabel/StackLabel.tsx
@@ -10,25 +10,13 @@ import type { ComponentProps, FC } from "react";
  */
 
 export const StackLabel: FC<ComponentProps<typeof Stack>> = (props) => {
-	return (
-		<Stack
-			spacing={0.5}
-			css={{ paddingLeft: 12, fontWeight: 500 }}
-			{...props}
-		/>
-	);
+	return <Stack spacing={0.5} className="pl-3 font-medium" {...props} />;
 };
 
 export const StackLabelHelperText: FC<FormHelperTextProps> = (props) => {
 	return (
 		<FormHelperText
-			css={(theme) => ({
-				marginTop: 0,
-
-				"& strong": {
-					color: theme.palette.text.primary,
-				},
-			})}
+			className="m-0 [&_strong]:text-content-primary"
 			{...props}
 		/>
 	);

From 77be908d9bcd73b7cb941c50af3d4a054f650969 Mon Sep 17 00:00:00 2001
From: Michael Smith <throwawayclover@gmail.com>
Date: Fri, 15 Aug 2025 06:45:45 +0000
Subject: [PATCH 07/13] refactor: clean up Spinner

---
 site/src/components/Spinner/Spinner.tsx | 44 +++++++++++--------------
 1 file changed, 20 insertions(+), 24 deletions(-)

diff --git a/site/src/components/Spinner/Spinner.tsx b/site/src/components/Spinner/Spinner.tsx
index 024b5ded4efed..b612f87155759 100644
--- a/site/src/components/Spinner/Spinner.tsx
+++ b/site/src/components/Spinner/Spinner.tsx
@@ -9,7 +9,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import type { ReactNode } from "react";
 import { cn } from "utils/cn";
 
-const leaves = 8;
+const leaves = Array.from({ length: 8 }).map((_, i) => i);
 
 const spinnerVariants = cva("", {
 	variants: {
@@ -49,29 +49,25 @@ export function Spinner({
 			{...props}
 		>
 			<title>Loading spinner</title>
-			{[...Array(leaves)].map((_, i) => {
-				const rotation = i * (360 / leaves);
-
-				return (
-					<rect
-						key={i}
-						x="10.9"
-						y="2"
-						width="2"
-						height="5.5"
-						rx="1"
-						// 0.8 = leaves * 0.1
-						className={
-							isChromatic() ? "" : "animate-[loading_0.8s_ease-in-out_infinite]"
-						}
-						style={{
-							transform: `rotate(${rotation}deg)`,
-							transformOrigin: "center",
-							animationDelay: `${-i * 0.1}s`,
-						}}
-					/>
-				);
-			})}
+			{leaves.map((leaf) => (
+				<rect
+					key={leaf}
+					x="10.9"
+					y="2"
+					width="2"
+					height="5.5"
+					rx="1"
+					// 0.8 = leaves * 0.1
+					className={
+						isChromatic() ? "" : "animate-[loading_0.8s_ease-in-out_infinite]"
+					}
+					style={{
+						transform: `rotate(${leaf * (360 / leaves.length)}deg)`,
+						transformOrigin: "center",
+						animationDelay: `${-leaf * 0.1}s`,
+					}}
+				/>
+			))}
 		</svg>
 	);
 }

From b8e71387d4bc44e0efa51099983c7cb34a5b3796 Mon Sep 17 00:00:00 2001
From: Michael Smith <throwawayclover@gmail.com>
Date: Fri, 15 Aug 2025 06:50:35 +0000
Subject: [PATCH 08/13] refactor: clean up SignInLayout

---
 .../components/SignInLayout/SignInLayout.tsx  | 41 +++----------------
 1 file changed, 6 insertions(+), 35 deletions(-)

diff --git a/site/src/components/SignInLayout/SignInLayout.tsx b/site/src/components/SignInLayout/SignInLayout.tsx
index c557fd3b4c797..e63e28e1a5cdd 100644
--- a/site/src/components/SignInLayout/SignInLayout.tsx
+++ b/site/src/components/SignInLayout/SignInLayout.tsx
@@ -1,45 +1,16 @@
-import type { Interpolation, Theme } from "@emotion/react";
 import type { FC, PropsWithChildren } from "react";
 
 export const SignInLayout: FC<PropsWithChildren> = ({ children }) => {
 	return (
-		<div css={styles.container}>
-			<div css={styles.content}>
-				<div css={styles.signIn}>{children}</div>
-				<div css={styles.copyright}>
+		<div className="grow shrink h-[100vh,-webkit-fill-available] flex justify-center items-center">
+			<div className="flex flex-col items-center">
+				<div className="w-full max-w-[384px] flex flex-col items-center">
+					{children}
+				</div>
+				<div className="text-xs text-content-secondary mt-6">
 					{"\u00a9"} {new Date().getFullYear()} Coder Technologies, Inc.
 				</div>
 			</div>
 		</div>
 	);
 };
-
-const styles = {
-	container: {
-		flex: 1,
-		// Fallback to 100vh
-		height: ["100vh", "-webkit-fill-available"],
-		display: "flex",
-		justifyContent: "center",
-		alignItems: "center",
-	},
-
-	content: {
-		display: "flex",
-		flexDirection: "column",
-		alignItems: "center",
-	},
-
-	signIn: {
-		maxWidth: 385,
-		display: "flex",
-		flexDirection: "column",
-		alignItems: "center",
-	},
-
-	copyright: (theme) => ({
-		fontSize: 12,
-		color: theme.palette.text.secondary,
-		marginTop: 24,
-	}),
-} satisfies Record<string, Interpolation<Theme>>;

From a5e07079f57bf3682bd2386fd388f11950b8bbe8 Mon Sep 17 00:00:00 2001
From: Michael Smith <throwawayclover@gmail.com>
Date: Fri, 15 Aug 2025 06:57:08 +0000
Subject: [PATCH 09/13] refactor: convert SelectMenu

---
 site/src/components/SelectMenu/SelectMenu.tsx | 33 ++-----------------
 1 file changed, 3 insertions(+), 30 deletions(-)

diff --git a/site/src/components/SelectMenu/SelectMenu.tsx b/site/src/components/SelectMenu/SelectMenu.tsx
index d81f8c665c482..9efd7cca378b5 100644
--- a/site/src/components/SelectMenu/SelectMenu.tsx
+++ b/site/src/components/SelectMenu/SelectMenu.tsx
@@ -21,8 +21,6 @@ import {
 	useMemo,
 } from "react";
 
-const SIDE_PADDING = 16;
-
 export const SelectMenu = Popover;
 
 export const SelectMenuTrigger = PopoverTrigger;
@@ -54,22 +52,7 @@ export const SelectMenuSearch: FC<SearchFieldProps> = (props) => {
 		<SearchField
 			fullWidth
 			size="medium"
-			css={(theme) => ({
-				borderBottom: `1px solid ${theme.palette.divider}`,
-				"& input": {
-					fontSize: 14,
-				},
-				"& fieldset": {
-					border: 0,
-					borderRadius: 0,
-				},
-				"& .MuiInputBase-root": {
-					padding: `12px ${SIDE_PADDING}px`,
-				},
-				"& .MuiInputAdornment-positionStart": {
-					marginRight: SIDE_PADDING,
-				},
-			})}
+			className="border-solid border-b-px [&_input]:font-sm [&_fieldset]:border-none [&_fieldset]:rounded-none [&.MuiInputBase-root]:py-3 [&.MuiInputBase-root]:px-4 [&.MuiInputAdornment-positionStart]:mr-4"
 			{...props}
 			inputProps={{ autoFocus: true, ...props.inputProps }}
 		/>
@@ -112,19 +95,9 @@ export const SelectMenuIcon: FC<HTMLProps<HTMLDivElement>> = (props) => {
 
 export const SelectMenuItem: FC<MenuItemProps> = (props) => {
 	return (
-		<MenuItem
-			css={{
-				fontSize: 14,
-				gap: 0,
-				lineHeight: 1,
-				padding: `12px ${SIDE_PADDING}px`,
-			}}
-			{...props}
-		>
+		<MenuItem className="text-sm gap-0 leading-none py-3 px-4" {...props}>
 			{props.children}
-			{props.selected && (
-				<CheckIcon className="size-icon-xs" css={{ marginLeft: "auto" }} />
-			)}
+			{props.selected && <CheckIcon className="size-icon-xs ml-auto" />}
 		</MenuItem>
 	);
 };

From 0d406fab02c3434646dd6db448f39a3e3dfe4432 Mon Sep 17 00:00:00 2001
From: Michael Smith <throwawayclover@gmail.com>
Date: Fri, 15 Aug 2025 07:01:34 +0000
Subject: [PATCH 10/13] refactor: SearchField

---
 .../components/SearchField/SearchField.tsx    | 33 ++++---------------
 1 file changed, 6 insertions(+), 27 deletions(-)

diff --git a/site/src/components/SearchField/SearchField.tsx b/site/src/components/SearchField/SearchField.tsx
index 90a2499615c37..b67d36af08457 100644
--- a/site/src/components/SearchField/SearchField.tsx
+++ b/site/src/components/SearchField/SearchField.tsx
@@ -1,11 +1,9 @@
-import { useTheme } from "@emotion/react";
 import IconButton from "@mui/material/IconButton";
 import InputAdornment from "@mui/material/InputAdornment";
 import TextField, { type TextFieldProps } from "@mui/material/TextField";
 import Tooltip from "@mui/material/Tooltip";
-import visuallyHidden from "@mui/utils/visuallyHidden";
 import { SearchIcon, XIcon } from "lucide-react";
-import { type FC, useEffect, useRef } from "react";
+import type { FC } from "react";
 
 export type SearchFieldProps = Omit<TextFieldProps, "onChange"> & {
 	onChange: (query: string) => void;
@@ -19,46 +17,27 @@ export const SearchField: FC<SearchFieldProps> = ({
 	InputProps,
 	...textFieldProps
 }) => {
-	const theme = useTheme();
-	const inputRef = useRef<HTMLInputElement>(null);
-
-	useEffect(() => {
-		if (autoFocus) {
-			inputRef.current?.focus();
-		}
-	});
-
 	return (
 		<TextField
+			autoFocus={autoFocus}
 			// Specifying `minWidth` so that the text box can't shrink so much
 			// that it becomes un-clickable as we add more filter controls
-			css={{ minWidth: "280px" }}
+			className="min-w-[280px]"
 			size="small"
 			value={value}
 			onChange={(e) => onChange(e.target.value)}
-			inputRef={inputRef}
 			InputProps={{
 				startAdornment: (
 					<InputAdornment position="start">
-						<SearchIcon
-							className="size-icon-xs"
-							css={{
-								color: theme.palette.text.secondary,
-							}}
-						/>
+						<SearchIcon className="size-icon-xs text-content-secondary" />
 					</InputAdornment>
 				),
 				endAdornment: value !== "" && (
 					<InputAdornment position="end">
 						<Tooltip title="Clear search">
-							<IconButton
-								size="small"
-								onClick={() => {
-									onChange("");
-								}}
-							>
+							<IconButton size="small" onClick={() => onChange("")}>
 								<XIcon className="size-icon-xs" />
-								<span css={{ ...visuallyHidden }}>Clear search</span>
+								<span className="sr-only">Clear search</span>
 							</IconButton>
 						</Tooltip>
 					</InputAdornment>

From c56216319745f3f176863400134b2116ab983fa2 Mon Sep 17 00:00:00 2001
From: Michael Smith <throwawayclover@gmail.com>
Date: Fri, 15 Aug 2025 07:04:12 +0000
Subject: [PATCH 11/13] chore: delete Search

---
 site/src/components/Search/Search.stories.tsx |  26 ----
 site/src/components/Search/Search.tsx         | 117 ------------------
 2 files changed, 143 deletions(-)
 delete mode 100644 site/src/components/Search/Search.stories.tsx
 delete mode 100644 site/src/components/Search/Search.tsx

diff --git a/site/src/components/Search/Search.stories.tsx b/site/src/components/Search/Search.stories.tsx
deleted file mode 100644
index b923a2895273e..0000000000000
--- a/site/src/components/Search/Search.stories.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Search, SearchInput } from "./Search";
-
-const meta: Meta<typeof SearchInput> = {
-	title: "components/Search",
-	component: SearchInput,
-	decorators: [
-		(Story) => (
-			<Search>
-				<Story />
-			</Search>
-		),
-	],
-};
-
-export default meta;
-type Story = StoryObj<typeof SearchInput>;
-
-export const Example: Story = {};
-
-export const WithPlaceholder: Story = {
-	args: {
-		label: "uwu",
-		placeholder: "uwu",
-	},
-};
diff --git a/site/src/components/Search/Search.tsx b/site/src/components/Search/Search.tsx
deleted file mode 100644
index 7fecd57df2bf9..0000000000000
--- a/site/src/components/Search/Search.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import type { Interpolation, Theme } from "@emotion/react";
-// biome-ignore lint/style/noRestrictedImports: use it to have the component prop
-import Box, { type BoxProps } from "@mui/material/Box";
-import visuallyHidden from "@mui/utils/visuallyHidden";
-import { SearchIcon } from "lucide-react";
-import type { FC, HTMLAttributes, InputHTMLAttributes, Ref } from "react";
-
-interface SearchProps extends Omit<BoxProps, "ref"> {
-	$$ref?: Ref<unknown>;
-}
-
-/**
- * A container component meant for `SearchInput`
- *
- * ```
- * <Search>
- *   <SearchInput />
- * </Search>
- * ```
- */
-export const Search: FC<SearchProps> = ({ children, $$ref, ...boxProps }) => {
-	return (
-		<Box ref={$$ref} {...boxProps} css={SearchStyles.container}>
-			<SearchIcon className="size-icon-xs" css={SearchStyles.icon} />
-			{children}
-		</Box>
-	);
-};
-
-const SearchStyles = {
-	container: (theme) => ({
-		display: "flex",
-		alignItems: "center",
-		paddingLeft: 16,
-		height: 40,
-		borderBottom: `1px solid ${theme.palette.divider}`,
-	}),
-
-	icon: (theme) => ({
-		fontSize: 14,
-		color: theme.palette.text.secondary,
-	}),
-} satisfies Record<string, Interpolation<Theme>>;
-
-type SearchInputProps = InputHTMLAttributes<HTMLInputElement> & {
-	label?: string;
-	$$ref?: Ref<HTMLInputElement>;
-};
-
-export const SearchInput: FC<SearchInputProps> = ({
-	label,
-	$$ref,
-	...inputProps
-}) => {
-	return (
-		<>
-			<label css={{ ...visuallyHidden }} htmlFor={inputProps.id}>
-				{label}
-			</label>
-			<input
-				ref={$$ref}
-				tabIndex={-1}
-				type="text"
-				placeholder="Search..."
-				css={SearchInputStyles.input}
-				{...inputProps}
-			/>
-		</>
-	);
-};
-
-const SearchInputStyles = {
-	input: (theme) => ({
-		color: "inherit",
-		height: "100%",
-		border: 0,
-		background: "none",
-		flex: 1,
-		marginLeft: 16,
-		outline: 0,
-		"&::placeholder": {
-			color: theme.palette.text.secondary,
-		},
-	}),
-} satisfies Record<string, Interpolation<Theme>>;
-
-export const SearchEmpty: FC<HTMLAttributes<HTMLDivElement>> = ({
-	children = "Not found",
-	...props
-}) => {
-	return (
-		<div css={SearchEmptyStyles.empty} {...props}>
-			{children}
-		</div>
-	);
-};
-
-const SearchEmptyStyles = {
-	empty: (theme) => ({
-		fontSize: 13,
-		color: theme.palette.text.secondary,
-		textAlign: "center",
-		paddingTop: 8,
-		paddingBottom: 8,
-	}),
-} satisfies Record<string, Interpolation<Theme>>;
-
-/**
- * Reusable styles for consumers of the base components
- */
-export const searchStyles = {
-	content: {
-		width: 320,
-		padding: 0,
-		borderRadius: 4,
-	},
-} satisfies Record<string, Interpolation<Theme>>;

From 0386e5913271b3bdf99b9b6eb0a5bbb27bec9a6b Mon Sep 17 00:00:00 2001
From: Michael Smith <throwawayclover@gmail.com>
Date: Fri, 15 Aug 2025 07:07:35 +0000
Subject: [PATCH 12/13] fix: add files back

---
 site/src/components/Search/Search.stories.tsx |  26 ++++
 site/src/components/Search/Search.tsx         | 118 ++++++++++++++++++
 2 files changed, 144 insertions(+)
 create mode 100644 site/src/components/Search/Search.stories.tsx
 create mode 100644 site/src/components/Search/Search.tsx

diff --git a/site/src/components/Search/Search.stories.tsx b/site/src/components/Search/Search.stories.tsx
new file mode 100644
index 0000000000000..b923a2895273e
--- /dev/null
+++ b/site/src/components/Search/Search.stories.tsx
@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Search, SearchInput } from "./Search";
+
+const meta: Meta<typeof SearchInput> = {
+	title: "components/Search",
+	component: SearchInput,
+	decorators: [
+		(Story) => (
+			<Search>
+				<Story />
+			</Search>
+		),
+	],
+};
+
+export default meta;
+type Story = StoryObj<typeof SearchInput>;
+
+export const Example: Story = {};
+
+export const WithPlaceholder: Story = {
+	args: {
+		label: "uwu",
+		placeholder: "uwu",
+	},
+};
diff --git a/site/src/components/Search/Search.tsx b/site/src/components/Search/Search.tsx
new file mode 100644
index 0000000000000..f81c0629279f6
--- /dev/null
+++ b/site/src/components/Search/Search.tsx
@@ -0,0 +1,118 @@
+// biome-ignore lint/style/noRestrictedImports: use it to have the component prop
+import type { Interpolation } from "@emotion/react";
+import type { Theme } from "@mui/material";
+import Box, { type BoxProps } from "@mui/material/Box";
+import visuallyHidden from "@mui/utils/visuallyHidden";
+import { SearchIcon } from "lucide-react";
+import type { FC, HTMLAttributes, InputHTMLAttributes, Ref } from "react";
+
+interface SearchProps extends Omit<BoxProps, "ref"> {
+	$$ref?: Ref<unknown>;
+}
+
+/**
+ * A container component meant for `SearchInput`
+ *
+ * ```
+ * <Search>
+ *   <SearchInput />
+ * </Search>
+ * ```
+ */
+export const Search: FC<SearchProps> = ({ children, $$ref, ...boxProps }) => {
+	return (
+		<Box ref={$$ref} {...boxProps} css={SearchStyles.container}>
+			<SearchIcon className="size-icon-xs" css={SearchStyles.icon} />
+			{children}
+		</Box>
+	);
+};
+
+const SearchStyles = {
+	container: (theme) => ({
+		display: "flex",
+		alignItems: "center",
+		paddingLeft: 16,
+		height: 40,
+		borderBottom: `1px solid ${theme.palette.divider}`,
+	}),
+
+	icon: (theme) => ({
+		fontSize: 14,
+		color: theme.palette.text.secondary,
+	}),
+} satisfies Record<string, Interpolation<Theme>>;
+
+type SearchInputProps = InputHTMLAttributes<HTMLInputElement> & {
+	label?: string;
+	$$ref?: Ref<HTMLInputElement>;
+};
+
+export const SearchInput: FC<SearchInputProps> = ({
+	label,
+	$$ref,
+	...inputProps
+}) => {
+	return (
+		<>
+			<label css={{ ...visuallyHidden }} htmlFor={inputProps.id}>
+				{label}
+			</label>
+			<input
+				ref={$$ref}
+				tabIndex={-1}
+				type="text"
+				placeholder="Search..."
+				css={SearchInputStyles.input}
+				{...inputProps}
+			/>
+		</>
+	);
+};
+
+const SearchInputStyles = {
+	input: (theme) => ({
+		color: "inherit",
+		height: "100%",
+		border: 0,
+		background: "none",
+		flex: 1,
+		marginLeft: 16,
+		outline: 0,
+		"&::placeholder": {
+			color: theme.palette.text.secondary,
+		},
+	}),
+} satisfies Record<string, Interpolation<Theme>>;
+
+export const SearchEmpty: FC<HTMLAttributes<HTMLDivElement>> = ({
+	children = "Not found",
+	...props
+}) => {
+	return (
+		<div css={SearchEmptyStyles.empty} {...props}>
+			{children}
+		</div>
+	);
+};
+
+const SearchEmptyStyles = {
+	empty: (theme) => ({
+		fontSize: 13,
+		color: theme.palette.text.secondary,
+		textAlign: "center",
+		paddingTop: 8,
+		paddingBottom: 8,
+	}),
+} satisfies Record<string, Interpolation<Theme>>;
+
+/**
+ * Reusable styles for consumers of the base components
+ */
+export const searchStyles = {
+	content: {
+		width: 320,
+		padding: 0,
+		borderRadius: 4,
+	},
+} satisfies Record<string, Interpolation<Theme>>;

From d3e41aff8f313bd4f8661d0a02f3bc1c5af51158 Mon Sep 17 00:00:00 2001
From: Michael Smith <throwawayclover@gmail.com>
Date: Fri, 15 Aug 2025 07:18:18 +0000
Subject: [PATCH 13/13] refactor: Search

---
 site/src/components/Search/Search.tsx | 99 +++++++++++++--------------
 1 file changed, 46 insertions(+), 53 deletions(-)

diff --git a/site/src/components/Search/Search.tsx b/site/src/components/Search/Search.tsx
index f81c0629279f6..07a88ae7cec70 100644
--- a/site/src/components/Search/Search.tsx
+++ b/site/src/components/Search/Search.tsx
@@ -1,13 +1,18 @@
 // biome-ignore lint/style/noRestrictedImports: use it to have the component prop
 import type { Interpolation } from "@emotion/react";
 import type { Theme } from "@mui/material";
-import Box, { type BoxProps } from "@mui/material/Box";
-import visuallyHidden from "@mui/utils/visuallyHidden";
 import { SearchIcon } from "lucide-react";
-import type { FC, HTMLAttributes, InputHTMLAttributes, Ref } from "react";
+import {
+	type FC,
+	type HTMLAttributes,
+	type InputHTMLAttributes,
+	type Ref,
+	useId,
+} from "react";
+import { cn } from "utils/cn";
 
-interface SearchProps extends Omit<BoxProps, "ref"> {
-	$$ref?: Ref<unknown>;
+interface SearchProps extends Omit<HTMLAttributes<HTMLDivElement>, "ref"> {
+	$$ref?: Ref<HTMLDivElement>;
 }
 
 /**
@@ -19,93 +24,81 @@ interface SearchProps extends Omit<BoxProps, "ref"> {
  * </Search>
  * ```
  */
-export const Search: FC<SearchProps> = ({ children, $$ref, ...boxProps }) => {
+export const Search: FC<SearchProps> = ({
+	children,
+	$$ref,
+	className,
+	...boxProps
+}) => {
 	return (
-		<Box ref={$$ref} {...boxProps} css={SearchStyles.container}>
-			<SearchIcon className="size-icon-xs" css={SearchStyles.icon} />
+		<div
+			ref={$$ref}
+			{...boxProps}
+			className={cn(
+				"flex items-center pl-4 h-10 border-b border-solid",
+				className,
+			)}
+		>
+			<SearchIcon className="size-icon-xs text-content-secondary" />
 			{children}
-		</Box>
+		</div>
 	);
 };
 
-const SearchStyles = {
-	container: (theme) => ({
-		display: "flex",
-		alignItems: "center",
-		paddingLeft: 16,
-		height: 40,
-		borderBottom: `1px solid ${theme.palette.divider}`,
-	}),
-
-	icon: (theme) => ({
-		fontSize: 14,
-		color: theme.palette.text.secondary,
-	}),
-} satisfies Record<string, Interpolation<Theme>>;
-
 type SearchInputProps = InputHTMLAttributes<HTMLInputElement> & {
 	label?: string;
 	$$ref?: Ref<HTMLInputElement>;
 };
 
 export const SearchInput: FC<SearchInputProps> = ({
-	label,
 	$$ref,
+	id,
+	label,
+	className,
 	...inputProps
 }) => {
+	const hookId = useId();
+	const inputId = id || `${hookId}-input`;
+
 	return (
 		<>
-			<label css={{ ...visuallyHidden }} htmlFor={inputProps.id}>
+			<label className="sr-only" htmlFor={inputId}>
 				{label}
 			</label>
 			<input
 				ref={$$ref}
+				id={inputId}
 				tabIndex={-1}
 				type="text"
 				placeholder="Search..."
-				css={SearchInputStyles.input}
 				{...inputProps}
+				className={cn(
+					"text-inherit h-full border-none bg-transparent grow shrink ml-4 outline-none placeholder:text-content-secondary",
+					className,
+				)}
 			/>
 		</>
 	);
 };
 
-const SearchInputStyles = {
-	input: (theme) => ({
-		color: "inherit",
-		height: "100%",
-		border: 0,
-		background: "none",
-		flex: 1,
-		marginLeft: 16,
-		outline: 0,
-		"&::placeholder": {
-			color: theme.palette.text.secondary,
-		},
-	}),
-} satisfies Record<string, Interpolation<Theme>>;
-
 export const SearchEmpty: FC<HTMLAttributes<HTMLDivElement>> = ({
 	children = "Not found",
+	className,
 	...props
 }) => {
 	return (
-		<div css={SearchEmptyStyles.empty} {...props}>
+		<div
+			{...props}
+			className={cn(
+				"text-[13px] text-content-secondary items-center py-2",
+				className,
+			)}
+		>
 			{children}
 		</div>
 	);
 };
 
-const SearchEmptyStyles = {
-	empty: (theme) => ({
-		fontSize: 13,
-		color: theme.palette.text.secondary,
-		textAlign: "center",
-		paddingTop: 8,
-		paddingBottom: 8,
-	}),
-} satisfies Record<string, Interpolation<Theme>>;
-
 /**
  * Reusable styles for consumers of the base components
  */

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/19370.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/19370.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/19370.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/19370.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>