new react-openapi

src/Home.tsx

@@ -236,7 +236,7 @@ export default function Home() {
 
         <Grid container spacing={3}>
           {features.map((f) => (
-            <Grid key={f.title} size={{ xs: 12, sm: 6, md: 3 }}>
+            <Grid key={f.title} item xs={12} sm={6} md={3}>
               <FeatureCard {...f} />
             </Grid>
           ))}

src/shared-theme/AppTheme.tsx

@@ -63,8 +63,8 @@ export default function AppTheme({
   );
 
   const theme = React.useMemo(
-    () =>
-      createTheme({
+    () => {
+      const base = createTheme({
         ...getDesignTokens(mode),
         semantic,
 
@@ -75,7 +75,11 @@ export default function AppTheme({
           ...navigationCustomizations,
           ...surfacesCustomizations,
         },
-      }),
+      });
+      (base as any).applyStyles = (m: "light" | "dark", styles: any) =>
+        base.palette.mode === m ? styles : {};
+      return base;
+    },
     [mode, semantic]
   );
 

src/shared-theme/customizations/navigation.tsx

@@ -4,7 +4,6 @@ import { SvgIconProps } from '@mui/material/SvgIcon';
 import { buttonBaseClasses } from '@mui/material/ButtonBase';
 import { dividerClasses } from '@mui/material/Divider';
 import { menuItemClasses } from '@mui/material/MenuItem';
-import { selectClasses } from '@mui/material/Select';
 import { tabClasses } from '@mui/material/Tab';
 import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
 import { gray, brand } from '../themePrimitives';
@@ -73,7 +72,7 @@ export const navigationCustomizations: Components<Theme> = {
           backgroundColor: (theme.vars || theme).palette.background.paper,
           boxShadow: 'none',
         },
-        [`&.${selectClasses.focused}`]: {
+        '&.Mui-focused': {
           outlineOffset: 0,
           borderColor: gray[400],
         },
@@ -91,7 +90,7 @@ export const navigationCustomizations: Components<Theme> = {
             backgroundColor: (theme.vars || theme).palette.background.paper,
             boxShadow: 'none',
           },
-          [`&.${selectClasses.focused}`]: {
+          '&.Mui-focused': {
             outlineOffset: 0,
             borderColor: 'hsl(210, 55%, 55%)',
           },

src/shared-theme/theme-augment.d.ts

@@ -0,0 +1,11 @@
+import "@mui/material/styles";
+
+declare module "@mui/material/styles" {
+  interface Theme {
+    vars?: Record<string, any>;
+    applyStyles<T>(mode: "light" | "dark", styles: T): T | {};
+  }
+  interface ThemeOptions {
+    vars?: Record<string, any>;
+  }
+}

src/shared-theme/themePrimitives.ts

@@ -1,4 +1,5 @@
-import { createTheme, alpha, PaletteMode, Shadows } from '@mui/material/styles';
+import { createTheme, alpha, Shadows } from '@mui/material/styles';
+import type { PaletteMode } from '@mui/material';
 
 declare module '@mui/material/Paper' {
   interface PaperPropsVariantOverrides {