refactor: Migrate to MUI System styled

package.json

@@ -63,6 +63,10 @@
     }
   },
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/material": "^6.4.2",
+    "@mui/system": "^6.4.2",
     "@mui/utils": "^6.1.6",
     "ai": "^4.0.13",
     "classnames": "^2.5.1",
@@ -73,12 +77,8 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.0.0",
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
     "@faker-js/faker": "^9.0.0",
     "@jest/environment": "^29.7.0",
-    "@mui/material": "^6.1.6",
-    "@mui/system": "^6.1.6",
     "@remixicon/react": "^4.2.0",
     "@storybook/addon-actions": "^8.4.7",
     "@storybook/addon-essentials": "^8.4.7",
@@ -99,6 +99,7 @@
     "@testing-library/user-event": "14.6.1",
     "@types/jest": "^29.5.14",
     "@types/lodash": "^4.17.13",
+    "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^8.13.0",
     "@typescript-eslint/typescript-estree": "^8.13.0",
@@ -134,10 +135,6 @@
     "vite": "^6.0.7"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
-    "@mui/material": "^6.1.6",
-    "@mui/system": "^6.1.6",
     "@remixicon/react": "^4.2.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"

src/components/AiChat/AiChat.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react"
 import { AiChat } from "./AiChat"
 import type { AiChatProps } from "./types"
 import { mockJson, mockStreaming } from "./story-utils"
-import styled from "@emotion/styled"
+import { styled } from "@mui/material/styles"
 import { fn } from "@storybook/test"
 
 const TEST_API_STREAMING = "http://localhost:4567/streaming"
@@ -22,7 +22,7 @@ const STARTERS = [
   { content: "I am curious about AI applications for business" },
 ]
 
-const Container = styled.div({
+const Container = styled("div")({
   width: "100%",
   height: "500px",
 })

src/components/AiChat/AiChat.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import styled from "@emotion/styled"
+import { styled } from "@mui/material/styles"
 import Skeleton from "@mui/material/Skeleton"
 import { Input } from "../Input/Input"
 import { ActionButton } from "../Button/ActionButton"
@@ -29,7 +29,7 @@ const classes = {
   input: "MitAiChat--input",
 }
 
-const ChatContainer = styled.div({
+const ChatContainer = styled("div")({
   width: "100%",
   height: "100%",
   display: "flex",
@@ -49,7 +49,7 @@ const MessagesContainer = styled(ScrollSnap)(({ theme }) => ({
   borderStyle: "solid",
   borderWidth: "0 1px",
 }))
-const MessageRow = styled.div<{
+const MessageRow = styled("div")<{
   reverse?: boolean
 }>({
   display: "flex",
@@ -63,7 +63,7 @@ const MessageRow = styled.div<{
   },
   position: "relative",
 })
-const Avatar = styled.div(({ theme }) => ({
+const Avatar = styled("div")(({ theme }) => ({
   flexShrink: 0,
   borderRadius: "50%",
   backgroundColor: theme.custom.colors.white,
@@ -88,7 +88,7 @@ const Avatar = styled.div(({ theme }) => ({
     right: "16px",
   },
 }))
-const Message = styled.div(({ theme }) => ({
+const Message = styled("div")(({ theme }) => ({
   border: `1px solid ${theme.custom.colors.silverGrayLight}`,
   backgroundColor: theme.custom.colors.white,
   padding: "12px",
@@ -116,14 +116,14 @@ const Message = styled.div(({ theme }) => ({
   },
 }))
 
-const StarterContainer = styled.div({
+const StarterContainer = styled("div")({
   alignSelf: "flex-end",
   alignItems: "end",
   display: "flex",
   flexDirection: "column",
   gap: "12px",
 })
-const Starter = styled.button(({ theme }) => ({
+const Starter = styled("button")(({ theme }) => ({
   border: `1px solid ${theme.custom.colors.silverGrayLight}`,
   backgroundColor: theme.custom.colors.white,
   padding: "8px 16px",
@@ -148,7 +148,7 @@ const ActionButtonStyled = styled(ActionButton)(({ theme }) => ({
   },
 }))
 
-const DotsContainer = styled.span(({ theme }) => ({
+const DotsContainer = styled("span")(({ theme }) => ({
   display: "inline-flex",
   gap: "4px",
   ".MuiSkeleton-root": {

src/components/Button/ActionButton.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import styled from "@emotion/styled"
+import { styled } from "@mui/material/styles"
 import { pxToRem } from "../ThemeProvider/typography"
 import {
   ButtonRoot,
@@ -13,33 +13,32 @@ import type { LinkAdapterPropsOverrides } from "../LinkAdapter/LinkAdapter"
 type ActionButtonStyleProps = Omit<ButtonStyleProps, "startIcon" | "endIcon">
 type ActionButtonProps = ActionButtonStyleProps & React.ComponentProps<"button">
 
-const actionStyles = (size: ButtonSize) => {
-  return {
-    minWidth: "auto",
-    padding: 0,
-    height: {
-      small: "32px",
-      medium: "40px",
-      large: "48px",
-    }[size],
-    width: {
-      small: "32px",
-      medium: "40px",
-      large: "48px",
-    }[size],
-    "& svg, & .MuiSvgIcon-root": {
-      width: "1em",
-      height: "1em",
-      fontSize: pxToRem(
-        {
-          small: 20,
-          medium: 24,
-          large: 32,
-        }[size],
-      ),
-    },
-  }
-}
+const actionStyles = (size: ButtonSize) => ({
+  minWidth: "auto",
+  padding: 0,
+  height: {
+    small: "32px",
+    medium: "40px",
+    large: "48px",
+  }[size],
+  width: {
+    small: "32px",
+    medium: "40px",
+    large: "48px",
+  }[size],
+  "& svg, & .MuiSvgIcon-root": {
+    width: "1em",
+    height: "1em",
+    fontSize: pxToRem(
+      {
+        small: 20,
+        medium: 24,
+        large: 32,
+      }[size],
+    ),
+  },
+})
+
 /**
  * A button that should contain a remixicon icon and nothing else.
  * See [ActionButton docs](https://mitodl.github.io/smoot-design/?path=/docs/smoot-design-actionbutton--docs).
@@ -58,7 +57,9 @@ const ActionButton = styled(
   return [
     actionStyles(size),
     responsive && {
-      [theme.breakpoints.down("sm")]: actionStyles(RESPONSIVE_SIZES[size]),
+      [theme.breakpoints.down("sm")]: actionStyles(
+        RESPONSIVE_SIZES[size as ButtonSize],
+      ),
     },
   ]
 })