fix!: make mui, emotion peer deps (#40)

README.md

@@ -12,6 +12,10 @@ To trigger a release, run the "Release" github action. Using [semantic-release](
 2. Determine whether the version bump should be major, minor, or patch based on commit types. Breaking changes (e.g., `feat!: remove Button variant 'outlined'`) will result in major version bumps.
 3. Publish the package to NPM and the repository's [Github Releases](https://github.com/mitodl/smoot-design/releases).
 
+## Installation
+
+Ensure `peerDependencies` are installed as well. See [`package.json`](./package.json).
+
 ## Documentation
 
 Documentation for `smoot-design` components is available at https://mitodl.github.io/smoot-design.

package.json

@@ -60,15 +60,7 @@
     }
   },
   "dependencies": {
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
-    "@mui/base": "5.0.0-beta.68",
-    "@mui/lab": "6.0.0-beta.23",
-    "@mui/material": "^6.1.6",
-    "@mui/material-nextjs": "^6.1.6",
-    "@mui/system": "^6.1.6",
-    "@remixicon/react": "^4.2.0",
-    "@types/jest": "^29.5.14",
+    "@mui/utils": "^6.1.6",
     "ai": "^4.0.13",
     "classnames": "^2.5.1",
     "lodash": "^4.17.21",
@@ -78,8 +70,13 @@
   },
   "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",
     "@storybook/addon-interactions": "^8.4.7",
@@ -97,6 +94,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "14.6.0",
+    "@types/jest": "^29.5.14",
     "@types/lodash": "^4.17.13",
     "@types/react-dom": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^8.13.0",
@@ -132,6 +130,11 @@
     "typescript": "^5.6.3"
   },
   "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/ThemeProvider/ThemeProvider.tsx

@@ -4,11 +4,11 @@ import {
   ThemeProvider as MuiThemeProvider,
 } from "@mui/material/styles"
 import type { ThemeOptions, Theme } from "@mui/material/styles"
-import type {} from "@mui/lab/themeAugmentation"
 import * as typography from "./typography"
 import * as buttons from "./buttons"
 import * as chips from "./chips"
 import { colors } from "./colors"
+import deepmerge from "@mui/utils/deepmerge"
 
 const custom: ThemeOptions["custom"] = {
   colors,
@@ -53,13 +53,6 @@ const defaultThemeOptions: ThemeOptions = {
   components: {
     MuiButtonBase: buttons.buttonBaseComponent,
     MuiTypography: typography.component,
-    MuiTabPanel: {
-      styleOverrides: {
-        root: {
-          padding: "0px",
-        },
-      },
-    },
     MuiMenu: {
       styleOverrides: { paper: { borderRadius: "4px" } },
     },
@@ -82,16 +75,9 @@ const defaultThemeOptions: ThemeOptions = {
  * See [ThemeProvider Docs](https://mitodl.github.io/smoot-design/?path=/docs/smoot-design-themeprovider--docs#further-customized-theme-with-createtheme)
  * for more.
  */
-const createTheme = (options?: {
-  custom: Partial<ThemeOptions["custom"]>
-}): Theme =>
-  muiCreateTheme({
-    ...defaultThemeOptions,
-    custom: {
-      ...defaultThemeOptions.custom,
-      ...options?.custom,
-    },
-  })
+const createTheme = (options?: ThemeOptions): Theme => {
+  return muiCreateTheme(deepmerge(defaultThemeOptions, options))
+}
 
 const defaultTheme = createTheme()
 

src/components/ThemeProvider/breakpoints.ts

@@ -13,7 +13,6 @@ const BREAKPOINT_VALUES: ThemeOptions["breakpoints"] = {
 
 const { breakpoints } = createTheme({
   breakpoints: BREAKPOINT_VALUES,
-  // @ts-expect-error only using breakpoints
   custom: {},
 })
 

src/components/ThemeProvider/typography.ts

@@ -167,7 +167,6 @@ const component: NonNullable<ThemeOptions["components"]>["MuiTypography"] = {
 
 const { typography } = createTheme({
   typography: globalSettings,
-  // @ts-expect-error: we only care about typography from this theme
   custom: {},
 })
 

src/index.ts

@@ -3,8 +3,6 @@
 export { default as styled } from "@emotion/styled"
 export { css, Global } from "@emotion/react"
 
-export { AppRouterCacheProvider as NextJsAppRouterCacheProvider } from "@mui/material-nextjs/v15-appRouter"
-
 export {
   ThemeProvider,
   createTheme,

src/type-augmentation/theme.d.ts

@@ -54,7 +54,7 @@ declare module "@mui/material/styles" {
   }
 
   interface ThemeOptions {
-    custom: CustomTheme
+    custom?: Partial<CustomTheme>
   }
 
   interface PaletteColor {