add alert page

apps/zero-runtime-next-app/next.config.js

@@ -83,6 +83,7 @@ const theme = extendTheme({
   },
 });
 
+theme.palette = theme.colorSchemes.light;
 theme.getColorSchemeSelector = (key) => {
   return `[data-mui-color-scheme="${key}"]`;
 };
@@ -97,6 +98,7 @@ const zeroPluginOptions = {
   transformLibraries: ['local-ui-lib'],
   sourceMap: true,
   displayName: true,
+  transformSx: false,
 };
 
 /** @type {import('next').NextConfig} */

apps/zero-runtime-next-app/src/app/alert/page.tsx

@@ -0,0 +1,27 @@
+import { styled } from '@mui/zero-runtime';
+import BasicAlerts from '../../../../../docs/data/material/components/alert/BasicAlerts';
+
+const Main = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '16px',
+  marginInline: 'auto',
+  maxWidth: '900px',
+  paddingBlock: '16px',
+  [theme.breakpoints.up('sm')]: {
+    paddingInline: '24px',
+  },
+  [theme.breakpoints.up('lg')]: {
+    paddingInline: '60px',
+  },
+}));
+
+export default function MaterialUILayout() {
+  return (
+    <Main>
+      <h1>Material-UI</h1>
+      <p>This is an example app using Material-UI.</p>
+      <BasicAlerts />
+    </Main>
+  );
+}

apps/zero-runtime-next-app/src/augment.d.ts

@@ -1,4 +1,6 @@
 import type { ExtendTheme } from '@mui/zero-runtime';
+import type { Theme } from '@mui/material/styles';
+import type {} from '@mui/material/themeCssVarsAugmentation';
 
 declare module '@mui/zero-runtime/theme' {
   interface ThemeTokens {
@@ -29,6 +31,7 @@ declare module '@mui/zero-runtime/theme' {
     theme: ExtendTheme<{
       colorScheme: 'light' | 'dark';
       tokens: ThemeTokens;
-    }>;
+    }> &
+      Theme;
   }
 }