[system] Reexport Pigment CSS from index file

docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md

@@ -76,7 +76,9 @@ const nextConfig = {
 /**
  * @type {import('@pigment-css/nextjs-plugin').PigmentOptions}
  */
-const pigmentConfig = {}; // we will refer to this later
+const pigmentConfig = {
+  transformLibraries: ['@mui/material'],
+};
 
 export default withPigment(nextConfig, pigmentConfig);
 ```
@@ -91,7 +93,9 @@ const nextConfig = {
 /**
  * @type {import('@pigment-css/nextjs-plugin').PigmentOptions}
  */
-const pigmentConfig = {}; // we will refer to this later
+const pigmentConfig = {
+  transformLibraries: ['@mui/material'],
+};
 
 module.exports = withPigment(nextConfig, pigmentConfig);
 ```
@@ -143,7 +147,12 @@ Next, open vite config file, usually named `vite.config.js`, and add the plugin:
 import { defineConfig } from 'vite';
 import { pigment } from '@pigment-css/vite-plugin';
 
-const pigmentConfig = {}; // we will refer to this later
+/**
+ * @type {import('@pigment-css/nextjs-plugin').PigmentOptions}
+ */
+const pigmentConfig = {
+  transformLibraries: ['@mui/material'],
+};
 
 export default defineConfig({
   plugins: [
@@ -153,6 +162,10 @@ export default defineConfig({
 });
 ```
 
+:::warning
+There is an [issue with `pnpm`](https://github.com/mui/pigment-css/issues/176) that prevents the plugin from working correctly. Consider using `npm` or `yarn` instead.
+:::
+
 Finally, add the Pigment CSS stylesheet to the top of the main file.
 
 ```diff title="src/main.(js|tsx)"
@@ -173,14 +186,14 @@ Integrating Pigment CSS with Material UI requires you to configure the theme t
 Add the following code to your [Next.js](#nextjs) or [Vite](#vite) config file:
 
 ```diff
-+import { extendTheme } from '@mui/material';
++import { createTheme } from '@mui/material';
 
 +const pigmentConfig = {
-+  theme: extendTheme(),
++  theme: createTheme(…parameters if any),
 +};
 ```
 
-If you don't have a custom theme, you are ready to go. Start a development server by running:
+If you have a custom theme, follow the [theme migration](#migrating-custom-theme), otherwise you are ready to go. Start a development server by running:
 
 <codeblock storageKey="package-manager">
 
@@ -200,6 +213,35 @@ pnpm dev
 
 Open the browser and navigate to the localhost URL, you should see the app running with Pigment CSS.
 
+### Typescript
+
+If you are using TypeScript, you need to extend the Pigment CSS theme types with Material UI `Theme`.
+Add the following code to a file that is included in your `tsconfig.json`:
+
+```ts
+// e.g. App.tsx
+import { Theme } from '@mui/material/styles';
+
+declare module '@mui/material-pigment-css' {
+  interface ThemeArgs {
+    theme: Theme;
+  }
+}
+```
+
+Then, verify that the types is correctly picked up by Pigment CSS with the following code:
+
+```ts
+// e.g. App.tsx
+import { styled } from '@mui/material-pigment-css';
+
+const TestThemeTypes = styled('div')(({ theme }) => ({
+  color: theme.palette.primary.main,
+}));
+```
+
+You should see no TypeScript errors in your editor. Finally, remove the test code.
+
 ## How it works
 
 When a Pigment CSS plugin is configured through a framework bundler, it intercepts the styling APIs that Material UI uses and replaces them with those from Pigment CSS instead. Pigment CSS then extracts the styles at build time and injects them into the stylesheet.

packages/mui-material-pigment-css/src/index.ts

@@ -1 +1,2 @@
 export * from '@pigment-css/react';
+export * from '@pigment-css/react/theme';