From cbf7538c89cdd3f5cbe46bbbfd689b5b70e20997 Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijeshb42@gmail.com>
Date: Tue, 2 Jul 2024 14:43:36 +0530
Subject: [PATCH 01/23] [pigment-css] A new package that is a wrapper over
 Pigment CSS

At the moment, it only re-exports stuff from Pigment CSS. But as the
Pigment core APIs change, it'll server as the normalizing library that
still provides the same API even if Pigment has any breaking change.
---
 packages/mui-material-pigment-css/README.md   |  3 +
 .../mui-material-pigment-css/package.json     | 66 +++++++++++++++++++
 .../mui-material-pigment-css/src/Container.ts |  3 +
 packages/mui-material-pigment-css/src/Grid.ts |  3 +
 .../mui-material-pigment-css/src/Hidden.ts    |  3 +
 .../src/RtlProvider.ts                        |  1 +
 .../mui-material-pigment-css/src/Stack.ts     |  3 +
 .../mui-material-pigment-css/src/index.ts     |  1 +
 .../mui-material-pigment-css/src/styles.css   |  3 +
 .../mui-material-pigment-css/src/theme.ts     |  1 +
 packages/mui-material-pigment-css/styles.css  |  3 +
 .../tsconfig.build.json                       | 13 ++++
 .../mui-material-pigment-css/tsconfig.json    |  8 +++
 pnpm-lock.yaml                                | 10 +++
 14 files changed, 121 insertions(+)
 create mode 100644 packages/mui-material-pigment-css/README.md
 create mode 100644 packages/mui-material-pigment-css/package.json
 create mode 100644 packages/mui-material-pigment-css/src/Container.ts
 create mode 100644 packages/mui-material-pigment-css/src/Grid.ts
 create mode 100644 packages/mui-material-pigment-css/src/Hidden.ts
 create mode 100644 packages/mui-material-pigment-css/src/RtlProvider.ts
 create mode 100644 packages/mui-material-pigment-css/src/Stack.ts
 create mode 100644 packages/mui-material-pigment-css/src/index.ts
 create mode 100644 packages/mui-material-pigment-css/src/styles.css
 create mode 100644 packages/mui-material-pigment-css/src/theme.ts
 create mode 100644 packages/mui-material-pigment-css/styles.css
 create mode 100644 packages/mui-material-pigment-css/tsconfig.build.json
 create mode 100644 packages/mui-material-pigment-css/tsconfig.json

diff --git a/packages/mui-material-pigment-css/README.md b/packages/mui-material-pigment-css/README.md
new file mode 100644
index 00000000000000..517bb4911e2048
--- /dev/null
+++ b/packages/mui-material-pigment-css/README.md
@@ -0,0 +1,3 @@
+# Material Pigment CSS
+
+A wrapper over Pigment CSS that provides similar theming and styling APIs as @mui/system.
diff --git a/packages/mui-material-pigment-css/package.json b/packages/mui-material-pigment-css/package.json
new file mode 100644
index 00000000000000..ab8ac58d1b6888
--- /dev/null
+++ b/packages/mui-material-pigment-css/package.json
@@ -0,0 +1,66 @@
+{
+  "name": "@mui/material-pigment-css",
+  "version": "6.0.0-alpha.13",
+  "private": true,
+  "author": "MUI Team",
+  "description": "A wrapper over Pigment CSS that provides the same styled and theming APIs as Material UI.",
+  "main": "./src/index.ts",
+  "keywords": [
+    "react",
+    "mui",
+    "material-ui",
+    "css-in-js",
+    "zero-runtime"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mui/material-ui.git",
+    "directory": "packages/mui-pigment-css"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/mui/material-ui/issues"
+  },
+  "homepage": "https://mui.com/material-ui/",
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/mui-org"
+  },
+  "scripts": {
+    "build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files",
+    "build:modern": "node ../../scripts/build.mjs modern",
+    "build:node": "node ../../scripts/build.mjs node",
+    "build:stable": "node ../../scripts/build.mjs stable",
+    "build:copy-files": "node ../../scripts/copyFiles.mjs styles.css",
+    "build:types": "node ../../scripts/buildTypes.mjs",
+    "prebuild": "rimraf build tsconfig.build.tsbuildinfo",
+    "release": "pnpm build && pnpm publish",
+    "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-material/**/*.test.{js,ts,tsx}'",
+    "typescript": "tsc -p tsconfig.json",
+    "typescript:module-augmentation": "node scripts/testModuleAugmentation.js"
+  },
+  "dependencies": {
+    "@pigment-css/react": "^0.0.16"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public",
+    "directory": "build"
+  },
+  "wyw-in-js": {
+    "tags": {
+      "styled": "@pigment-css/react/exports/styled",
+      "sx": "@pigment-css/react/exports/sx",
+      "keyframes": "@pigment-css/react/exports/keyframes",
+      "generateAtomics": "@pigment-css/react/exports/generateAtomics",
+      "css": "@pigment-css/react/exports/css",
+      "createUseThemeProps": "@pigment-css/react/exports/createUseThemeProps",
+      "internal_createExtendSxProp": "@pigment-css/react/exports/internal_createExtendSxProp",
+      "globalCss": "@pigment-css/react/exports/globalCss",
+      "useTheme": "@pigment-css/react/exports/useTheme"
+    }
+  },
+  "engines": {
+    "node": ">=12.0.0"
+  }
+}
diff --git a/packages/mui-material-pigment-css/src/Container.ts b/packages/mui-material-pigment-css/src/Container.ts
new file mode 100644
index 00000000000000..77971a8841820b
--- /dev/null
+++ b/packages/mui-material-pigment-css/src/Container.ts
@@ -0,0 +1,3 @@
+import Container from '@pigment-css/react/Container';
+
+export default Container;
diff --git a/packages/mui-material-pigment-css/src/Grid.ts b/packages/mui-material-pigment-css/src/Grid.ts
new file mode 100644
index 00000000000000..af545bf3f67b0b
--- /dev/null
+++ b/packages/mui-material-pigment-css/src/Grid.ts
@@ -0,0 +1,3 @@
+import Grid from '@pigment-css/react/Grid';
+
+export default Grid;
diff --git a/packages/mui-material-pigment-css/src/Hidden.ts b/packages/mui-material-pigment-css/src/Hidden.ts
new file mode 100644
index 00000000000000..8659f3a468dd53
--- /dev/null
+++ b/packages/mui-material-pigment-css/src/Hidden.ts
@@ -0,0 +1,3 @@
+import Hidden from '@pigment-css/react/Hidden';
+
+export default Hidden;
diff --git a/packages/mui-material-pigment-css/src/RtlProvider.ts b/packages/mui-material-pigment-css/src/RtlProvider.ts
new file mode 100644
index 00000000000000..b82c0eb89d48a6
--- /dev/null
+++ b/packages/mui-material-pigment-css/src/RtlProvider.ts
@@ -0,0 +1 @@
+export * from '@pigment-css/react/RtlProvider';
diff --git a/packages/mui-material-pigment-css/src/Stack.ts b/packages/mui-material-pigment-css/src/Stack.ts
new file mode 100644
index 00000000000000..d1d770f8fac2ca
--- /dev/null
+++ b/packages/mui-material-pigment-css/src/Stack.ts
@@ -0,0 +1,3 @@
+import Stack from '@pigment-css/react/Stack';
+
+export default Stack;
diff --git a/packages/mui-material-pigment-css/src/index.ts b/packages/mui-material-pigment-css/src/index.ts
new file mode 100644
index 00000000000000..e2ba63ac6e2d8d
--- /dev/null
+++ b/packages/mui-material-pigment-css/src/index.ts
@@ -0,0 +1 @@
+export * from '@pigment-css/react';
diff --git a/packages/mui-material-pigment-css/src/styles.css b/packages/mui-material-pigment-css/src/styles.css
new file mode 100644
index 00000000000000..d27283bddcbe05
--- /dev/null
+++ b/packages/mui-material-pigment-css/src/styles.css
@@ -0,0 +1,3 @@
+/**
+ * Placeholder file for generated theme
+ */
diff --git a/packages/mui-material-pigment-css/src/theme.ts b/packages/mui-material-pigment-css/src/theme.ts
new file mode 100644
index 00000000000000..e9acc9a5bde4d6
--- /dev/null
+++ b/packages/mui-material-pigment-css/src/theme.ts
@@ -0,0 +1 @@
+export * from '@pigment-css/react/theme';
diff --git a/packages/mui-material-pigment-css/styles.css b/packages/mui-material-pigment-css/styles.css
new file mode 100644
index 00000000000000..d27283bddcbe05
--- /dev/null
+++ b/packages/mui-material-pigment-css/styles.css
@@ -0,0 +1,3 @@
+/**
+ * Placeholder file for generated theme
+ */
diff --git a/packages/mui-material-pigment-css/tsconfig.build.json b/packages/mui-material-pigment-css/tsconfig.build.json
new file mode 100644
index 00000000000000..3b9cd66ac9420a
--- /dev/null
+++ b/packages/mui-material-pigment-css/tsconfig.build.json
@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "declaration": true,
+    "noEmit": false,
+    "emitDeclarationOnly": true,
+    "outDir": "build",
+    "rootDir": "./src"
+  },
+  "include": ["./src/**/*.ts*"],
+  "exclude": ["src/**/*.spec.ts*", "src/**/*.test.ts*"]
+}
diff --git a/packages/mui-material-pigment-css/tsconfig.json b/packages/mui-material-pigment-css/tsconfig.json
new file mode 100644
index 00000000000000..89e05b4ec34dd7
--- /dev/null
+++ b/packages/mui-material-pigment-css/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "moduleResolution": "NodeNext",
+    "module": "NodeNext"
+  },
+  "include": ["src/**/*", "test/**/*"]
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e07385e01535ec..687e225b5659d4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -396,6 +396,9 @@ importers:
       '@mui/material':
         specifier: workspace:^
         version: link:../../packages/mui-material/build
+      '@mui/material-pigment-css':
+        specifier: workspace:^
+        version: link:../../packages/mui-material-pigment-css/build
       '@mui/system':
         specifier: workspace:^
         version: link:../../packages/mui-system/build
@@ -1827,6 +1830,13 @@ importers:
         version: 18.3.1
     publishDirectory: build
 
+  packages/mui-material-pigment-css:
+    dependencies:
+      '@pigment-css/react':
+        specifier: ^0.0.16
+        version: 0.0.16(@types/react@18.2.55)(react@18.2.0)
+    publishDirectory: build
+
   packages/mui-private-theming:
     dependencies:
       '@babel/runtime':

From 69aa126b235125023a3bcae763d6d34145470f73 Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijeshb42@gmail.com>
Date: Tue, 2 Jul 2024 14:44:50 +0530
Subject: [PATCH 02/23] Modify demo apps to use @mui/material-pigment-css

---
 apps/pigment-css-next-app/src/app/box/page.tsx       |  2 +-
 apps/pigment-css-next-app/src/app/layout.tsx         |  2 +-
 .../src/app/material-ui/layout.tsx                   |  2 +-
 .../src/app/material-ui/page.tsx                     |  9 ++++-----
 .../src/app/material-ui/react-grid/page.tsx          |  2 +-
 .../src/app/material-ui/react-stack/page.tsx         |  2 +-
 apps/pigment-css-next-app/src/app/page.tsx           |  2 +-
 apps/pigment-css-next-app/src/augment.d.ts           |  4 ++--
 apps/pigment-css-next-app/src/components/Box.jsx     |  2 +-
 apps/pigment-css-vite-app/package.json               |  1 +
 apps/pigment-css-vite-app/src/Box.jsx                |  2 +-
 apps/pigment-css-vite-app/src/Layout.tsx             |  2 +-
 apps/pigment-css-vite-app/src/Slider/ZeroSlider.tsx  |  2 +-
 apps/pigment-css-vite-app/src/augment.ts             |  4 ++--
 apps/pigment-css-vite-app/src/component.tsx          |  2 +-
 .../src/components/ErrorBoundaryFallback.tsx         |  2 +-
 apps/pigment-css-vite-app/src/extend-zero.ts         |  2 +-
 apps/pigment-css-vite-app/src/main.tsx               | 10 ++++------
 .../src/pages/material-ui/index.tsx                  | 12 +++++-------
 19 files changed, 31 insertions(+), 35 deletions(-)

diff --git a/apps/pigment-css-next-app/src/app/box/page.tsx b/apps/pigment-css-next-app/src/app/box/page.tsx
index 877b36e5a39275..a24e0ae14f19b9 100644
--- a/apps/pigment-css-next-app/src/app/box/page.tsx
+++ b/apps/pigment-css-next-app/src/app/box/page.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable material-ui/no-empty-box */
 
-import { styled } from '@pigment-css/react';
+import { styled } from '@mui/material-pigment-css';
 import * as React from 'react';
 import { Box as MuiBox } from '../../components/Box';
 
diff --git a/apps/pigment-css-next-app/src/app/layout.tsx b/apps/pigment-css-next-app/src/app/layout.tsx
index b232ba291a9f28..5176558a488967 100644
--- a/apps/pigment-css-next-app/src/app/layout.tsx
+++ b/apps/pigment-css-next-app/src/app/layout.tsx
@@ -2,7 +2,7 @@ import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
 import { ThemeProvider } from '@mui/material/styles';
-import '@pigment-css/react/styles.css';
+import '@mui/material-pigment-css/styles.css';
 import theme from './theme';
 
 import './globals.css';
diff --git a/apps/pigment-css-next-app/src/app/material-ui/layout.tsx b/apps/pigment-css-next-app/src/app/material-ui/layout.tsx
index 0ee7bd13e9ec99..27ed6e7bf7faa2 100644
--- a/apps/pigment-css-next-app/src/app/material-ui/layout.tsx
+++ b/apps/pigment-css-next-app/src/app/material-ui/layout.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { styled } from '@pigment-css/react';
+import { styled } from '@mui/material-pigment-css';
 
 const Main = styled('div')(({ theme }) => ({
   display: 'flex',
diff --git a/apps/pigment-css-next-app/src/app/material-ui/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/page.tsx
index bcea6b4568eaef..7484ff290c0c98 100644
--- a/apps/pigment-css-next-app/src/app/material-ui/page.tsx
+++ b/apps/pigment-css-next-app/src/app/material-ui/page.tsx
@@ -3,8 +3,7 @@ import * as React from 'react';
 import Link from 'next/link';
 import fs from 'fs/promises';
 import path from 'path';
-import { css } from '@pigment-css/react';
-import Box from '@pigment-css/react/Box';
+import { css } from '@mui/material-pigment-css';
 
 export default async function MaterialUIPage() {
   const rootPaths = await fs.readdir(path.join(process.cwd(), `src/app/material-ui`));
@@ -12,8 +11,8 @@ export default async function MaterialUIPage() {
     <div>
       <h1>Material UI Components</h1>
       <nav>
-        <Box
-          as="ul"
+        <ul
+          // @ts-ignore
           sx={{
             margin: 0,
             marginBlock: '1rem',
@@ -39,7 +38,7 @@ export default async function MaterialUIPage() {
                 </Link>
               </li>
             ))}
-        </Box>
+        </ul>
       </nav>
     </div>
   );
diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-grid/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-grid/page.tsx
index 95d73163427a61..682738ce066e60 100644
--- a/apps/pigment-css-next-app/src/app/material-ui/react-grid/page.tsx
+++ b/apps/pigment-css-next-app/src/app/material-ui/react-grid/page.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
 import Grid from '@mui/material/PigmentGrid';
-import { styled } from '@pigment-css/react';
+import { styled } from '@mui/material-pigment-css';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',
diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-stack/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-stack/page.tsx
index 4c541461688a3f..5f8510e05c4ac8 100644
--- a/apps/pigment-css-next-app/src/app/material-ui/react-stack/page.tsx
+++ b/apps/pigment-css-next-app/src/app/material-ui/react-stack/page.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import Divider from '@mui/material/Divider';
 import Paper from '@mui/material/Paper';
 import Stack from '@mui/material/PigmentStack';
-import { styled } from '@pigment-css/react';
+import { styled } from '@mui/material-pigment-css';
 
 const Item = styled(Paper)(({ theme }) => ({
   backgroundColor: '#fff',
diff --git a/apps/pigment-css-next-app/src/app/page.tsx b/apps/pigment-css-next-app/src/app/page.tsx
index 9b5daea6b2749e..12dbb97694bd55 100644
--- a/apps/pigment-css-next-app/src/app/page.tsx
+++ b/apps/pigment-css-next-app/src/app/page.tsx
@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import { styled, css } from '@pigment-css/react';
+import { styled, css } from '@mui/material-pigment-css';
 import PigmentStack from '@mui/material/PigmentStack';
 import PigmentContainer from '@mui/material/PigmentContainer';
 import PigmentHidden from '@mui/material/PigmentHidden';
diff --git a/apps/pigment-css-next-app/src/augment.d.ts b/apps/pigment-css-next-app/src/augment.d.ts
index 6e98d66132560d..73a6ca903dfda4 100644
--- a/apps/pigment-css-next-app/src/augment.d.ts
+++ b/apps/pigment-css-next-app/src/augment.d.ts
@@ -1,6 +1,6 @@
-import type { ExtendTheme } from '@pigment-css/react';
+import type { ExtendTheme } from '@mui/material-pigment-css';
 
-declare module '@pigment-css/react/theme' {
+declare module '@mui/material-pigment-css/theme' {
   interface ThemeTokens {
     'max-width': string;
     'border-radius': string;
diff --git a/apps/pigment-css-next-app/src/components/Box.jsx b/apps/pigment-css-next-app/src/components/Box.jsx
index 930ee1bdf985ed..53342471939563 100644
--- a/apps/pigment-css-next-app/src/components/Box.jsx
+++ b/apps/pigment-css-next-app/src/components/Box.jsx
@@ -1,4 +1,4 @@
-import { generateAtomics } from '@pigment-css/react';
+import { generateAtomics } from '@mui/material-pigment-css';
 
 const atomics = generateAtomics(({ theme }) => ({
   conditions: Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
diff --git a/apps/pigment-css-vite-app/package.json b/apps/pigment-css-vite-app/package.json
index 84e39df71db8ed..5f36a8b418c765 100644
--- a/apps/pigment-css-vite-app/package.json
+++ b/apps/pigment-css-vite-app/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@pigment-css/react": "^0.0.16",
+    "@mui/material-pigment-css": "workspace:^",
     "@mui/utils": "workspace:^",
     "@mui/base": "workspace:^",
     "@mui/icons-material": "workspace:^",
diff --git a/apps/pigment-css-vite-app/src/Box.jsx b/apps/pigment-css-vite-app/src/Box.jsx
index 930ee1bdf985ed..53342471939563 100644
--- a/apps/pigment-css-vite-app/src/Box.jsx
+++ b/apps/pigment-css-vite-app/src/Box.jsx
@@ -1,4 +1,4 @@
-import { generateAtomics } from '@pigment-css/react';
+import { generateAtomics } from '@mui/material-pigment-css';
 
 const atomics = generateAtomics(({ theme }) => ({
   conditions: Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
diff --git a/apps/pigment-css-vite-app/src/Layout.tsx b/apps/pigment-css-vite-app/src/Layout.tsx
index 321dcacf08c933..164e90e4c59420 100644
--- a/apps/pigment-css-vite-app/src/Layout.tsx
+++ b/apps/pigment-css-vite-app/src/Layout.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { styled } from '@pigment-css/react';
+import { styled } from '@mui/material-pigment-css';
 
 const Main = styled.main(({ theme }) => ({
   display: 'flex',
diff --git a/apps/pigment-css-vite-app/src/Slider/ZeroSlider.tsx b/apps/pigment-css-vite-app/src/Slider/ZeroSlider.tsx
index 9d05cf3a262d24..e7f8b23b07411a 100644
--- a/apps/pigment-css-vite-app/src/Slider/ZeroSlider.tsx
+++ b/apps/pigment-css-vite-app/src/Slider/ZeroSlider.tsx
@@ -8,7 +8,7 @@ import {
   getSliderUtilityClass,
 } from '@mui/material/Slider';
 import { isHostComponent, useSlotProps } from '@mui/base/utils';
-import { styled } from '@pigment-css/react';
+import { styled } from '@mui/material-pigment-css';
 import { capitalize } from '@mui/material/utils';
 import { SliderValueLabel } from '@mui/material/Slider';
 import { useSlider, valueToPercent } from '@mui/base/useSlider';
diff --git a/apps/pigment-css-vite-app/src/augment.ts b/apps/pigment-css-vite-app/src/augment.ts
index b1de2899db0e28..a0cfd6027b8422 100644
--- a/apps/pigment-css-vite-app/src/augment.ts
+++ b/apps/pigment-css-vite-app/src/augment.ts
@@ -1,7 +1,7 @@
 import type { extendTheme } from '@mui/material/styles';
-import '@pigment-css/react/theme';
+import '@mui/material-pigment-css';
 
-declare module '@pigment-css/react/theme' {
+declare module '@mui/material-pigment-css/theme' {
   export interface ThemeArgs {
     theme: ReturnType<typeof extendTheme> & {
       applyDarkStyles<T>(obj: T): Record<string, T>;
diff --git a/apps/pigment-css-vite-app/src/component.tsx b/apps/pigment-css-vite-app/src/component.tsx
index a6c1861c3c115f..9fc708e543b784 100644
--- a/apps/pigment-css-vite-app/src/component.tsx
+++ b/apps/pigment-css-vite-app/src/component.tsx
@@ -1,4 +1,4 @@
-import { styled } from '@pigment-css/react';
+import { styled } from '@mui/material-pigment-css';
 
 export function Component() {
   return null;
diff --git a/apps/pigment-css-vite-app/src/components/ErrorBoundaryFallback.tsx b/apps/pigment-css-vite-app/src/components/ErrorBoundaryFallback.tsx
index 74a73000ed37bc..ad853f31d9945b 100644
--- a/apps/pigment-css-vite-app/src/components/ErrorBoundaryFallback.tsx
+++ b/apps/pigment-css-vite-app/src/components/ErrorBoundaryFallback.tsx
@@ -1,4 +1,4 @@
-import { css } from '@pigment-css/react';
+import { css } from '@mui/material-pigment-css';
 import Alert from '@mui/material/Alert';
 import { FallbackProps } from 'react-error-boundary';
 
diff --git a/apps/pigment-css-vite-app/src/extend-zero.ts b/apps/pigment-css-vite-app/src/extend-zero.ts
index ea1689cc1f65af..dd830327f2696c 100644
--- a/apps/pigment-css-vite-app/src/extend-zero.ts
+++ b/apps/pigment-css-vite-app/src/extend-zero.ts
@@ -1,6 +1,6 @@
 import type { extendTheme } from '@mui/material/styles';
 
-declare module '@pigment-css/react/theme' {
+declare module '@mui/material-pigment-css/theme' {
   interface ThemeArgs {
     theme: ReturnType<typeof extendTheme> & {
       applyDarkStyles<T>(obj: T): Record<string, T>;
diff --git a/apps/pigment-css-vite-app/src/main.tsx b/apps/pigment-css-vite-app/src/main.tsx
index 15e708be89b719..3bb21302e7a0cd 100644
--- a/apps/pigment-css-vite-app/src/main.tsx
+++ b/apps/pigment-css-vite-app/src/main.tsx
@@ -4,11 +4,10 @@ import { BrowserRouter as Router, useLocation, useRoutes } from 'react-router-do
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import CircularProgress from '@mui/material/CircularProgress';
 import CssBaseline from '@mui/material/CssBaseline';
-import { css } from '@pigment-css/react';
-import Box from '@pigment-css/react/Box';
+import { css } from '@mui/material-pigment-css';
 import { ErrorBoundary } from 'react-error-boundary';
 import routes from '~react-pages';
-import '@pigment-css/react/styles.css';
+import '@mui/material-pigment-css/styles.css';
 import { ErrorBoundaryFallback } from './components/ErrorBoundaryFallback';
 
 function App() {
@@ -17,8 +16,7 @@ function App() {
     <ErrorBoundary key={location.pathname} FallbackComponent={ErrorBoundaryFallback}>
       <React.Suspense
         fallback={
-          <Box
-            as="div"
+          <div
             className={css`
               width: 100vw;
               height: 100vh;
@@ -28,7 +26,7 @@ function App() {
             `}
           >
             <CircularProgress size={100} variant="indeterminate" />
-          </Box>
+          </div>
         }
       >
         {useRoutes(routes)}
diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/index.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/index.tsx
index 9e7fadd4922b39..128467d5c2addd 100644
--- a/apps/pigment-css-vite-app/src/pages/material-ui/index.tsx
+++ b/apps/pigment-css-vite-app/src/pages/material-ui/index.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useLocation, matchRoutes, Link } from 'react-router-dom';
-import Box from '@pigment-css/react/Box';
 import routes from '~react-pages';
 import Layout from '../../Layout';
 
@@ -17,8 +16,8 @@ export default function MaterialIndex() {
       <div>
         <h1>Material UI Components</h1>
         <nav>
-          <Box
-            as="ul"
+          <ul
+            // @ts-ignore
             sx={{
               margin: 0,
               marginBlock: '1rem',
@@ -33,8 +32,7 @@ export default function MaterialIndex() {
               .filter((item) => !!item.path)
               .map((item) => (
                 <li key={item.path}>
-                  <Box
-                    as={Link}
+                  <Link
                     to={`/material-ui/${item.path}`}
                     sx={{
                       textDecoration: 'underline',
@@ -42,10 +40,10 @@ export default function MaterialIndex() {
                     }}
                   >
                     {item.path}
-                  </Box>
+                  </Link>
                 </li>
               ))}
-          </Box>
+          </ul>
         </nav>
       </div>
     </Layout>

From da0ee4ae4c7789c6a21cabda3da21551f6cebe70 Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijeshb42@gmail.com>
Date: Mon, 8 Jul 2024 12:32:14 +0530
Subject: [PATCH 03/23] Testing changes

---
 apps/local-ui-lib/.eslintrc                   |   6 -
 apps/local-ui-lib/index.d.ts                  |   9 -
 apps/local-ui-lib/index.js                    |  30 --
 apps/local-ui-lib/package.json                |   8 -
 apps/local-ui-lib/tsconfig.json               |   3 -
 apps/pigment-css-next-app/next.config.js      |  30 +-
 apps/pigment-css-next-app/package.json        |   5 +-
 apps/pigment-css-vite-app/package.json        |   4 +-
 apps/pigment-css-vite-app/vite.config.ts      |  15 +-
 package.json                                  |   6 +-
 packages/mui-lab/package.json                 |   4 +
 packages/mui-material-pigment-css/README.md   |   4 +-
 .../mui-material-pigment-css/package.json     |   2 +-
 packages/mui-material-pigment-css/src/Box.ts  |   3 +
 .../tsconfig.build.json                       |   4 +-
 .../mui-material-pigment-css/tsconfig.json    |   4 -
 packages/mui-material/package.json            |   4 +-
 .../src/PigmentContainer/PigmentContainer.tsx |   2 +-
 .../src/PigmentGrid/PigmentGrid.tsx           |   2 +-
 .../src/PigmentStack/PigmentStack.tsx         |   2 +-
 packages/mui-material/tsconfig.build.json     |   4 +-
 pnpm-lock.yaml                                | 401 ++++++++++++------
 22 files changed, 303 insertions(+), 249 deletions(-)
 delete mode 100644 apps/local-ui-lib/.eslintrc
 delete mode 100644 apps/local-ui-lib/index.d.ts
 delete mode 100644 apps/local-ui-lib/index.js
 delete mode 100644 apps/local-ui-lib/package.json
 delete mode 100644 apps/local-ui-lib/tsconfig.json
 create mode 100644 packages/mui-material-pigment-css/src/Box.ts

diff --git a/apps/local-ui-lib/.eslintrc b/apps/local-ui-lib/.eslintrc
deleted file mode 100644
index 9a6f8e3481197e..00000000000000
--- a/apps/local-ui-lib/.eslintrc
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "rules": {
-    "import/prefer-default-export": "off",
-    "import/no-unresolved": "off"
-  }
-}
diff --git a/apps/local-ui-lib/index.d.ts b/apps/local-ui-lib/index.d.ts
deleted file mode 100644
index 3f926bfe3bb446..00000000000000
--- a/apps/local-ui-lib/index.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import * as React from 'react';
-
-export const bounceAnim: string;
-export const Button: React.ComponentType<
-  React.JSX.IntrinsicElements['button'] & {
-    isRed?: boolean;
-    sx?: unknown;
-  }
->;
diff --git a/apps/local-ui-lib/index.js b/apps/local-ui-lib/index.js
deleted file mode 100644
index 21893b8348b4ac..00000000000000
--- a/apps/local-ui-lib/index.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { keyframes, styled } from '@pigment-css/react';
-
-export const bounceAnim = keyframes({
-  'from, 20%, 53%, 80%, to': {
-    transform: 'translate3d(0,0,0)',
-  },
-  '40%, 43%': {
-    transform: 'translate3d(0, -30px, 0)',
-  },
-  '70%': {
-    transform: 'translate3d(0, -15px, 0)',
-  },
-  '90%': {
-    transform: 'translate3d(0,-4px,0)',
-  },
-});
-
-export const Button = styled('button', {
-  name: 'MuiButton',
-  slot: 'Root',
-})(
-  () => ({
-    fontFamily: 'sans-serif',
-  }),
-  {
-    fontFamily: 'sans-serif',
-    color: (props) => (props.isRed ? 'primary.main' : 'secondary.main'),
-    '--css-variable': (props) => (props.isRed ? 'palette.primary.main' : 'palette.secondary.main'),
-  },
-);
diff --git a/apps/local-ui-lib/package.json b/apps/local-ui-lib/package.json
deleted file mode 100644
index 66f3077adca4dc..00000000000000
--- a/apps/local-ui-lib/package.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "name": "local-ui-lib",
-  "version": "0.0.1",
-  "private": true,
-  "dependencies": {
-    "@pigment-css/react": "^0.0.16"
-  }
-}
diff --git a/apps/local-ui-lib/tsconfig.json b/apps/local-ui-lib/tsconfig.json
deleted file mode 100644
index 4082f16a5d91ce..00000000000000
--- a/apps/local-ui-lib/tsconfig.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "../../tsconfig.json"
-}
diff --git a/apps/pigment-css-next-app/next.config.js b/apps/pigment-css-next-app/next.config.js
index f60594696977b2..c89553ec65d92d 100644
--- a/apps/pigment-css-next-app/next.config.js
+++ b/apps/pigment-css-next-app/next.config.js
@@ -97,44 +97,16 @@ theme.getColorSchemeSelector = (colorScheme) => {
 };
 theme.toRuntimeSource = stringifyTheme;
 
-function innerNoop() {
-  return null;
-}
-function outerNoop() {
-  return innerNoop;
-}
-
 /**
  * @type {PigmentOptions}
  */
 const pigmentOptions = {
   theme,
-  transformLibraries: ['local-ui-lib'],
   sourceMap: true,
   displayName: true,
-  overrideContext: (context) => {
-    if (!context.$RefreshSig$) {
-      context.$RefreshSig$ = outerNoop;
-    }
-    return {
-      ...context,
-      require: (id) => {
-        if (id === '@mui/styled-engine' || id === '@mui/styled-engine-sc') {
-          return {
-            __esModule: true,
-            default: () => () => () => null,
-            internal_processStyles: () => {},
-            keyframes: () => '',
-            css: () => '',
-          };
-        }
-        return context.require(id);
-      },
-    };
-  },
 };
 
-/** @type {import('next').NextConfig} */
+/** @type {import('@pigment-css/nextjs-plugin').NextConfig} */
 const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true,
diff --git a/apps/pigment-css-next-app/package.json b/apps/pigment-css-next-app/package.json
index 0a1813697500fc..962be22184822b 100644
--- a/apps/pigment-css-next-app/package.json
+++ b/apps/pigment-css-next-app/package.json
@@ -9,7 +9,7 @@
     "clean": "rimraf .next"
   },
   "dependencies": {
-    "@pigment-css/react": "^0.0.16",
+    "@mui/material-pigment-css": "workspace:^",
     "@mui/utils": "workspace:^",
     "@mui/base": "workspace:^",
     "@mui/icons-material": "workspace:^",
@@ -18,13 +18,12 @@
     "@mui/material-nextjs": "workspace:^",
     "@mui/system": "workspace:^",
     "@emotion/cache": "latest",
-    "local-ui-lib": "workspace:^",
     "next": "latest",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@pigment-css/nextjs-plugin": "^0.0.16",
+    "@pigment-css/nextjs-plugin": "https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/nextjs-plugin",
     "@types/node": "^20.5.7",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
diff --git a/apps/pigment-css-vite-app/package.json b/apps/pigment-css-vite-app/package.json
index 5f36a8b418c765..7750ad4745c8d4 100644
--- a/apps/pigment-css-vite-app/package.json
+++ b/apps/pigment-css-vite-app/package.json
@@ -9,7 +9,6 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@pigment-css/react": "^0.0.16",
     "@mui/material-pigment-css": "workspace:^",
     "@mui/utils": "workspace:^",
     "@mui/base": "workspace:^",
@@ -18,7 +17,6 @@
     "@mui/material": "workspace:^",
     "@mui/system": "workspace:^",
     "clsx": "^2.1.1",
-    "local-ui-lib": "workspace:^",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
@@ -28,7 +26,7 @@
   "devDependencies": {
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@pigment-css/vite-plugin": "^0.0.16",
+    "@pigment-css/vite-plugin": "https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/vite-plugin",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
diff --git a/apps/pigment-css-vite-app/vite.config.ts b/apps/pigment-css-vite-app/vite.config.ts
index c58f13101e834f..7790a37d8020cc 100644
--- a/apps/pigment-css-vite-app/vite.config.ts
+++ b/apps/pigment-css-vite-app/vite.config.ts
@@ -3,7 +3,7 @@ import { defineConfig, splitVendorChunkPlugin } from 'vite';
 import reactPlugin from '@vitejs/plugin-react';
 import Pages from 'vite-plugin-pages';
 import { pigment } from '@pigment-css/vite-plugin';
-import { extendTheme } from '@mui/material/styles';
+import { extendTheme, stringifyTheme } from '@mui/material/styles';
 
 const theme = extendTheme({
   getSelector: function getSelector(colorScheme, css) {
@@ -20,6 +20,8 @@ const theme = extendTheme({
 theme.getColorSchemeSelector = (colorScheme) => {
   return `@media (prefers-color-scheme: ${colorScheme})`;
 };
+// @ts-ignore
+theme.toRuntimeSource = stringifyTheme;
 
 export default defineConfig({
   plugins: [
@@ -39,7 +41,7 @@ export default defineConfig({
     }),
     pigment({
       theme,
-      transformLibraries: ['local-ui-lib', '@mui/material'],
+      transformLibraries: ['@mui/material'],
       sourceMap: true,
       displayName: true,
     }),
@@ -52,15 +54,6 @@ export default defineConfig({
         find: /^@mui\/icons-material\/(.*)/,
         replacement: '@mui/icons-material/esm/$1',
       },
-      {
-        find: /^@pigment-css\/react$/,
-        // There is a weird issue on the CI where Vite/Rollup isn't able to resolve
-        // the path for pigment-css/react in this monodrep. This is a temporary workaround. It does not
-        // affect local development or end-user projects.
-        replacement: path.resolve(
-          path.join(process.cwd(), 'node_modules/@pigment-css/react/build/index.mjs'),
-        ),
-      },
     ],
   },
 });
diff --git a/package.json b/package.json
index 688e9c5e1c327a..ec9a06bcf840e5 100644
--- a/package.json
+++ b/package.json
@@ -208,7 +208,11 @@
     "@types/node": "^18.19.39",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
-    "cross-fetch": "^4.0.0"
+    "cross-fetch": "^4.0.0",
+    "@pigment-css/react": "https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/react",
+    "@pigment-css/unplugin": "https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/unplugin",
+    "@pigment-css/nextjs-plugin": "https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/nextjs-plugin",
+    "@pigment-css/vite-plugin": "https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/vite-plugin"
   },
   "nyc": {
     "include": [
diff --git a/packages/mui-lab/package.json b/packages/mui-lab/package.json
index 7b2483285e8918..e5f6e31d8eddf5 100644
--- a/packages/mui-lab/package.json
+++ b/packages/mui-lab/package.json
@@ -65,6 +65,7 @@
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
     "@mui/material": "workspace:^",
+    "@mui/material-pigment-css": "workspace:^",
     "@types/react": "^17.0.0 || ^18.0.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
@@ -78,6 +79,9 @@
     },
     "@emotion/styled": {
       "optional": true
+    },
+    "@mui/material-pigment-css": {
+      "optional": true
     }
   },
   "sideEffects": false,
diff --git a/packages/mui-material-pigment-css/README.md b/packages/mui-material-pigment-css/README.md
index 517bb4911e2048..e03ce34808d028 100644
--- a/packages/mui-material-pigment-css/README.md
+++ b/packages/mui-material-pigment-css/README.md
@@ -1,3 +1,3 @@
-# Material Pigment CSS
+# Material Pigment CSS
 
-A wrapper over Pigment CSS that provides similar theming and styling APIs as @mui/system.
+A wrapper over Pigment CSS that provides similar theming and styling APIs as @mui/system.
diff --git a/packages/mui-material-pigment-css/package.json b/packages/mui-material-pigment-css/package.json
index ab8ac58d1b6888..9365ecfed6452b 100644
--- a/packages/mui-material-pigment-css/package.json
+++ b/packages/mui-material-pigment-css/package.json
@@ -40,7 +40,7 @@
     "typescript:module-augmentation": "node scripts/testModuleAugmentation.js"
   },
   "dependencies": {
-    "@pigment-css/react": "^0.0.16"
+    "@pigment-css/react": "https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/react"
   },
   "sideEffects": false,
   "publishConfig": {
diff --git a/packages/mui-material-pigment-css/src/Box.ts b/packages/mui-material-pigment-css/src/Box.ts
new file mode 100644
index 00000000000000..2fefcd93bf64a3
--- /dev/null
+++ b/packages/mui-material-pigment-css/src/Box.ts
@@ -0,0 +1,3 @@
+import Box from '@pigment-css/react/Box';
+
+export default Box;
diff --git a/packages/mui-material-pigment-css/tsconfig.build.json b/packages/mui-material-pigment-css/tsconfig.build.json
index 3b9cd66ac9420a..a8f9c5462f0dc7 100644
--- a/packages/mui-material-pigment-css/tsconfig.build.json
+++ b/packages/mui-material-pigment-css/tsconfig.build.json
@@ -6,7 +6,9 @@
     "noEmit": false,
     "emitDeclarationOnly": true,
     "outDir": "build",
-    "rootDir": "./src"
+    "rootDir": "./src",
+    "moduleResolution": "NodeNext",
+    "module": "NodeNext"
   },
   "include": ["./src/**/*.ts*"],
   "exclude": ["src/**/*.spec.ts*", "src/**/*.test.ts*"]
diff --git a/packages/mui-material-pigment-css/tsconfig.json b/packages/mui-material-pigment-css/tsconfig.json
index 89e05b4ec34dd7..ee756997748e1c 100644
--- a/packages/mui-material-pigment-css/tsconfig.json
+++ b/packages/mui-material-pigment-css/tsconfig.json
@@ -1,8 +1,4 @@
 {
   "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "moduleResolution": "NodeNext",
-    "module": "NodeNext"
-  },
   "include": ["src/**/*", "test/**/*"]
 }
diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json
index 68d47eb7dd6e0c..bf4f5ed81b2652 100644
--- a/packages/mui-material/package.json
+++ b/packages/mui-material/package.json
@@ -78,7 +78,7 @@
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
-    "@pigment-css/react": "^0.0.16",
+    "@mui/material-pigment-css": "workspace:^",
     "@types/react": "^17.0.0 || ^18.0.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
@@ -93,7 +93,7 @@
     "@emotion/styled": {
       "optional": true
     },
-    "@pigment-css/react": {
+    "@mui/material-pigment-css": {
       "optional": true
     }
   },
diff --git a/packages/mui-material/src/PigmentContainer/PigmentContainer.tsx b/packages/mui-material/src/PigmentContainer/PigmentContainer.tsx
index 2753a263b034b1..b67c711c83892f 100644
--- a/packages/mui-material/src/PigmentContainer/PigmentContainer.tsx
+++ b/packages/mui-material/src/PigmentContainer/PigmentContainer.tsx
@@ -99,7 +99,7 @@ const PigmentContainer = React.forwardRef(function PigmentContainer(
       disableGutters={disableGutters}
       fixed={fixed}
       maxWidth={maxWidth}
-      {...props}
+      {...(props as any)}
       // @ts-ignore
       ref={ref}
     />
diff --git a/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx b/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx
index fad246bc48cb0f..8a843075597bcd 100644
--- a/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx
+++ b/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx
@@ -156,7 +156,7 @@ const PigmentGrid = React.forwardRef(function PigmentGrid(props, ref) {
 
   const classes = useUtilityClasses(props);
 
-  return <Grid ref={ref} className={clsx(classes.root, className)} {...other} />;
+  return <Grid ref={ref} className={clsx(classes.root, className)} {...(other as any)} />;
 }) as OverridableComponent<GridTypeMap>;
 
 PigmentGrid.propTypes /* remove-proptypes */ = {
diff --git a/packages/mui-material/src/PigmentStack/PigmentStack.tsx b/packages/mui-material/src/PigmentStack/PigmentStack.tsx
index fcf8ee052300d3..a54f7b9f977501 100644
--- a/packages/mui-material/src/PigmentStack/PigmentStack.tsx
+++ b/packages/mui-material/src/PigmentStack/PigmentStack.tsx
@@ -71,7 +71,7 @@ const useUtilityClasses = () => {
  */
 const PigmentStack = React.forwardRef(function PigmentStack({ className, ...props }, ref) {
   const classes = useUtilityClasses();
-  return <Stack ref={ref} className={clsx(classes.root, className)} {...props} />;
+  return <Stack ref={ref} className={clsx(classes.root, className)} {...(props as any)} />;
 }) as OverridableComponent<PigmentStackTypeMap>;
 
 PigmentStack.propTypes /* remove-proptypes */ = {
diff --git a/packages/mui-material/tsconfig.build.json b/packages/mui-material/tsconfig.build.json
index 92aea03c9be6b9..423ff69a10d7be 100644
--- a/packages/mui-material/tsconfig.build.json
+++ b/packages/mui-material/tsconfig.build.json
@@ -8,7 +8,9 @@
     "noEmit": false,
     "emitDeclarationOnly": true,
     "outDir": "build",
-    "rootDir": "./src"
+    "rootDir": "./src",
+    "moduleResolution": "Node16",
+    "module": "Node16"
   },
   "include": ["./src/**/*.ts*"],
   "exclude": ["src/**/*.spec.ts*", "src/**/*.test.ts*"],
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 687e225b5659d4..7bce8dc62a72c5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,10 @@ overrides:
   '@types/react': 18.3.3
   '@types/react-dom': 18.3.0
   cross-fetch: ^4.0.0
+  '@pigment-css/react': https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/react
+  '@pigment-css/unplugin': https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/unplugin
+  '@pigment-css/nextjs-plugin': https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/nextjs-plugin
+  '@pigment-css/vite-plugin': https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/vite-plugin
 
 importers:
 
@@ -102,8 +106,8 @@ importers:
         specifier: ^20.1.1
         version: 20.1.1
       '@pigment-css/react':
-        specifier: ^0.0.16
-        version: 0.0.16(@types/react@18.3.3)(react@18.3.1)
+        specifier: https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/react
+        version: https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/react(@types/react@18.3.3)(react@18.3.1)
       '@playwright/test':
         specifier: 1.45.1
         version: 1.45.1
@@ -259,7 +263,7 @@ importers:
         version: 10.6.0
       nx:
         specifier: ^19.4.1
-        version: 19.4.1
+        version: 19.4.2
       nyc:
         specifier: ^17.0.0
         version: 17.0.0
@@ -280,7 +284,7 @@ importers:
         version: 0.11.10
       rimraf:
         specifier: ^5.0.8
-        version: 5.0.8
+        version: 5.0.9
       serve:
         specifier: ^14.2.3
         version: 14.2.3
@@ -315,12 +319,6 @@ importers:
         specifier: ^17.7.2
         version: 17.7.2
 
-  apps/local-ui-lib:
-    dependencies:
-      '@pigment-css/react':
-        specifier: ^0.0.16
-        version: 0.0.16(@types/react@18.3.3)(react@18.3.1)
-
   apps/pigment-css-next-app:
     dependencies:
       '@emotion/cache':
@@ -341,18 +339,15 @@ importers:
       '@mui/material-nextjs':
         specifier: workspace:^
         version: link:../../packages/mui-material-nextjs/build
+      '@mui/material-pigment-css':
+        specifier: workspace:^
+        version: link:../../packages/mui-material-pigment-css/build
       '@mui/system':
         specifier: workspace:^
         version: link:../../packages/mui-system/build
       '@mui/utils':
         specifier: workspace:^
         version: link:../../packages/mui-utils/build
-      '@pigment-css/react':
-        specifier: ^0.0.16
-        version: 0.0.16(@types/react@18.3.3)(react@18.3.1)
-      local-ui-lib:
-        specifier: workspace:^
-        version: link:../local-ui-lib
       next:
         specifier: latest
         version: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -364,8 +359,8 @@ importers:
         version: 18.3.1(react@18.3.1)
     devDependencies:
       '@pigment-css/nextjs-plugin':
-        specifier: ^0.0.16
-        version: 0.0.16(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
+        specifier: https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/nextjs-plugin
+        version: https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/nextjs-plugin(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
       '@types/node':
         specifier: ^18.19.39
         version: 18.19.39
@@ -405,15 +400,9 @@ importers:
       '@mui/utils':
         specifier: workspace:^
         version: link:../../packages/mui-utils/build
-      '@pigment-css/react':
-        specifier: ^0.0.16
-        version: 0.0.16(@types/react@18.3.3)(react@18.3.1)
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
-      local-ui-lib:
-        specifier: workspace:^
-        version: link:../local-ui-lib
       react:
         specifier: ^18.3.1
         version: 18.3.1
@@ -437,8 +426,8 @@ importers:
         specifier: ^7.24.7
         version: 7.24.7(@babel/core@7.24.7)
       '@pigment-css/vite-plugin':
-        specifier: ^0.0.16
-        version: 0.0.16(@types/react@18.3.3)(react@18.3.1)(vite@5.3.2(@types/node@18.19.39)(terser@5.29.2))
+        specifier: https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/vite-plugin
+        version: https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/vite-plugin(@types/react@18.3.3)(react@18.3.1)(vite@5.3.2(@types/node@18.19.39)(terser@5.29.2))
       '@types/react':
         specifier: 18.3.3
         version: 18.3.3
@@ -804,7 +793,7 @@ importers:
         version: 1.8.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       rimraf:
         specifier: ^5.0.8
-        version: 5.0.8
+        version: 5.0.9
       styled-components:
         specifier: ^6.1.11
         version: 6.1.11(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -901,7 +890,7 @@ importers:
     dependencies:
       rimraf:
         specifier: ^5.0.8
-        version: 5.0.8
+        version: 5.0.9
       typescript:
         specifier: ^5.4.5
         version: 5.4.5
@@ -974,7 +963,7 @@ importers:
         version: 3.3.2
       rimraf:
         specifier: ^5.0.8
-        version: 5.0.8
+        version: 5.0.9
 
   packages-internal/test-utils:
     dependencies:
@@ -995,13 +984,13 @@ importers:
         version: 11.11.0
       '@emotion/react':
         specifier: ^11.11.4
-        version: 11.11.4(@types/react@18.3.3)(react@18.3.1)
+        version: 11.11.4(@types/react@18.3.3)(react@18.2.0)
       '@testing-library/dom':
         specifier: ^10.3.1
         version: 10.3.1
       '@testing-library/react':
         specifier: ^16.0.0
-        version: 16.0.0(@testing-library/dom@10.3.1)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 16.0.0(@testing-library/dom@10.3.1)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       chai:
         specifier: ^4.4.1
         version: 4.4.1
@@ -1034,10 +1023,10 @@ importers:
         version: 15.8.1
       react:
         specifier: ^18.2.0
-        version: 18.3.1
+        version: 18.2.0
       react-dom:
         specifier: ^18.2.0
-        version: 18.3.1(react@18.3.1)
+        version: 18.2.0(react@18.2.0)
       sinon:
         specifier: ^16.1.3
         version: 16.1.3
@@ -1216,7 +1205,7 @@ importers:
     optionalDependencies:
       aws-sdk:
         specifier: ^2.1655.0
-        version: 2.1655.0
+        version: 2.1656.0
     devDependencies:
       claudia:
         specifier: ^5.14.1
@@ -1254,7 +1243,7 @@ importers:
         version: 7.24.7
       '@mui/utils':
         specifier: ^5.0.0
-        version: 5.16.0(@types/react@18.3.3)(react@18.3.1)
+        version: 5.15.20(@types/react@18.3.3)(react@18.3.1)
       babel-plugin-macros:
         specifier: ^3.1.0
         version: 3.1.0
@@ -1406,7 +1395,7 @@ importers:
         version: link:../markdown
       '@mui/system':
         specifier: ^5.0.0
-        version: 5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
+        version: 5.15.20(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
       chai:
         specifier: ^4.4.1
         version: 4.4.1
@@ -1537,7 +1526,7 @@ importers:
         version: 18.3.1
       rimraf:
         specifier: ^5.0.8
-        version: 5.0.8
+        version: 5.0.9
       shx:
         specifier: ^0.3.4
         version: 0.3.4
@@ -1640,6 +1629,9 @@ importers:
       '@mui/base':
         specifier: workspace:*
         version: link:../mui-base/build
+      '@mui/material-pigment-css':
+        specifier: workspace:^
+        version: link:../mui-material-pigment-css/build
       '@mui/system':
         specifier: workspace:*
         version: link:../mui-system/build
@@ -1708,6 +1700,9 @@ importers:
       '@mui/core-downloads-tracker':
         specifier: workspace:^
         version: link:../mui-core-downloads-tracker/build
+      '@mui/material-pigment-css':
+        specifier: workspace:^
+        version: link:../mui-material-pigment-css/build
       '@mui/system':
         specifier: workspace:*
         version: link:../mui-system/build
@@ -1717,9 +1712,6 @@ importers:
       '@mui/utils':
         specifier: workspace:*
         version: link:../mui-utils/build
-      '@pigment-css/react':
-        specifier: ^0.0.16
-        version: 0.0.16(@types/react@18.3.3)(react@18.3.1)
       '@types/react-transition-group':
         specifier: ^4.4.10
         version: 4.4.10
@@ -1833,8 +1825,8 @@ importers:
   packages/mui-material-pigment-css:
     dependencies:
       '@pigment-css/react':
-        specifier: ^0.0.16
-        version: 0.0.16(@types/react@18.2.55)(react@18.2.0)
+        specifier: https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/react
+        version: https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/react(@types/react@18.3.3)(react@18.3.1)
     publishDirectory: build
 
   packages/mui-private-theming:
@@ -3870,6 +3862,16 @@ packages:
       '@types/react':
         optional: true
 
+  '@mui/private-theming@5.15.20':
+    resolution: {integrity: sha512-BK8F94AIqSrnaPYXf2KAOjGZJgWfvqAVQ2gVR3EryvQFtuBnG6RwodxrCvd3B48VuMy6Wsk897+lQMUxJyk+6g==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@types/react': 18.3.3
+      react: ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@mui/private-theming@5.16.0':
     resolution: {integrity: sha512-sYpubkO1MZOnxNyVOClrPNOTs0MfuRVVnAvCeMaOaXt6GimgQbnUcshYv2pSr6PFj+Mqzdff/FYOBceK8u5QgA==}
     engines: {node: '>=12.0.0'}
@@ -3916,6 +3918,22 @@ packages:
       '@emotion/styled':
         optional: true
 
+  '@mui/system@5.15.20':
+    resolution: {integrity: sha512-LoMq4IlAAhxzL2VNUDBTQxAb4chnBe8JvRINVNDiMtHE2PiPOoHlhOPutSxEbaL5mkECPVWSv6p8JEV+uykwIA==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@emotion/react': ^11.5.0
+      '@emotion/styled': ^11.3.0
+      '@types/react': 18.3.3
+      react: ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@emotion/react':
+        optional: true
+      '@emotion/styled':
+        optional: true
+      '@types/react':
+        optional: true
+
   '@mui/system@5.16.0':
     resolution: {integrity: sha512-9YbkC2m3+pNumAvubYv+ijLtog6puJ0fJ6rYfzfLCM47pWrw3m+30nXNM8zMgDaKL6vpfWJcCXm+LPaWBpy7sw==}
     engines: {node: '>=12.0.0'}
@@ -3956,6 +3974,16 @@ packages:
       '@types/react':
         optional: true
 
+  '@mui/utils@5.15.20':
+    resolution: {integrity: sha512-mAbYx0sovrnpAu1zHc3MDIhPqL8RPVC5W5xcO1b7PiSCJPtckIZmBkp8hefamAvUiAV8gpfMOM6Zb+eSisbI2A==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@types/react': 18.3.3
+      react: ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@mui/utils@5.16.0':
     resolution: {integrity: sha512-kLLi5J1xY+mwtUlMb8Ubdxf4qFAA1+U7WPBvjM/qQ4CIwLCohNb0sHo1oYPufjSIH/Z9+dhVxD7dJlfGjd1AVA==}
     engines: {node: '>=12.0.0'}
@@ -4322,8 +4350,8 @@ packages:
   '@nrwl/devkit@17.2.8':
     resolution: {integrity: sha512-l2dFy5LkWqSA45s6pee6CoqJeluH+sjRdVnAAQfjLHRNSx6mFAKblyzq5h1f4P0EUCVVVqLs+kVqmNx5zxYqvw==}
 
-  '@nrwl/tao@19.4.1':
-    resolution: {integrity: sha512-4PHs6Ja8PkWkIrg8ViB47j+dR2fDn51vtQTWL33n4q5hqZ65rvsMHNch4UsC52XUSv55IZnJwcYlxhAx/vXk3g==}
+  '@nrwl/tao@19.4.2':
+    resolution: {integrity: sha512-bRCRWWqR86ckji7tK4xRl9czB2WSZG4qSGqvttQMmxCvQc+njnG/QhnoGXYueaz2xr5Z1z7RJWNEqTYEAILh5Q==}
     hasBin: true
 
   '@nx/devkit@17.2.8':
@@ -4331,62 +4359,62 @@ packages:
     peerDependencies:
       nx: '>= 16 <= 18'
 
-  '@nx/nx-darwin-arm64@19.4.1':
-    resolution: {integrity: sha512-WfNRFpMoBB5Ayzvwqfy+anEUgqOZLnLctGG1qwMhCOqczcPUtuTrAjRilMYZ7RrT0cvw0da8dTkpkAsAURS7Ig==}
+  '@nx/nx-darwin-arm64@19.4.2':
+    resolution: {integrity: sha512-yy0ik+MYli6lg9khgb0/NJIjMr2re2fpE7hl/MhaHWZmTH9PUmzz6vWpx74O3tnz93oT/9ENXFLBagQuj9hjww==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
 
-  '@nx/nx-darwin-x64@19.4.1':
-    resolution: {integrity: sha512-p8/lJZLeqAFjCyINrQUvlUvG2GkWN0IlqRm7NknNFXisFDwzcT6u12GR96hPbl+6eVBOtldYhwlufF4tZQDJiw==}
+  '@nx/nx-darwin-x64@19.4.2':
+    resolution: {integrity: sha512-UEZw7qzvWyOe0B5SvvrN4I2irq8FGlf1V6ut0ajL0vDbLR2IiiF6EYiM36ewpJmx5XspjhbLxEyQJn1TUMUm4w==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
 
-  '@nx/nx-freebsd-x64@19.4.1':
-    resolution: {integrity: sha512-qi/tRWKuFS6wpYbAD/s0SBqh/2pNXNg+ytxmon3czYPuUrIiMfmXGxtz922P6YUSOWtL2N6Q9UI6vqZwS+g9/A==}
+  '@nx/nx-freebsd-x64@19.4.2':
+    resolution: {integrity: sha512-kAB73FAe3Ae50XnZ+DrCFjbbqHJoTF2ZJVYiHdtRfAefEqsrFltM3Py2/qeeSp1Pxtri3sp4yeEui8WGV2ArWA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [freebsd]
 
-  '@nx/nx-linux-arm-gnueabihf@19.4.1':
-    resolution: {integrity: sha512-AIowQrN14ucZnBr4Syo2oDGYLqjuJHSGgY/ur6mPoxH02ghGAd68Mc1swX8elGRgBcGc251s05H8MjyPQVsT3A==}
+  '@nx/nx-linux-arm-gnueabihf@19.4.2':
+    resolution: {integrity: sha512-24cHzxYB/cxlvX8I/cYZIp88TNgCrl4srMeUzqV5bHuDKVYjA1BL/gzP/pRmsdOSq+ggAKxzXhgCG3nwStUvdw==}
     engines: {node: '>= 10'}
     cpu: [arm]
     os: [linux]
 
-  '@nx/nx-linux-arm64-gnu@19.4.1':
-    resolution: {integrity: sha512-TG/GfX7olq8bINKLOfamikHJWchYapcJheHj7aUZo951X96s6jYpbeZjwGrVesTJ2fO6EYlS7T1sJIqMoSMxaw==}
+  '@nx/nx-linux-arm64-gnu@19.4.2':
+    resolution: {integrity: sha512-6gbBak/bL4vEV2aoTFc7VaeWYF+ossJ0YOqx+hwLpv9SSt6e3yIJrqf7SiwdKq0lcoPeHq3DO06+bRzNLZxVTQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@nx/nx-linux-arm64-musl@19.4.1':
-    resolution: {integrity: sha512-GBBKbERw0baa4JKTbQi8LAERI6C5n3Scrk76pmzCn0HW5GxaQygr61kg6H6C7Duy+w+3D7vwMxCk2wPbUOTuOA==}
+  '@nx/nx-linux-arm64-musl@19.4.2':
+    resolution: {integrity: sha512-JKc3Bw84jWbOhlqXGBIH9/qz3kzTwpKfsIqtar8K8Gd5/UFJS8GLEdy0mXsnoeFrA1DuYJJ0PWxoHkAa1MYLxg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@nx/nx-linux-x64-gnu@19.4.1':
-    resolution: {integrity: sha512-zaHHFM75hLVfMEBR8U7X8xiND1HNQJxybItuoBpnXHVRfKJwp1quByqArnaKKCzsvLvO5HdoXIA80ToJNmDkBQ==}
+  '@nx/nx-linux-x64-gnu@19.4.2':
+    resolution: {integrity: sha512-hyf0cDZ3rAM8WERZ/M82v1rnf6oO1X+xwYq363Qx04SufU+Knto7xHGndLNkx2i18+UtCoEr4ZhDYrIb8ZWHww==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@nx/nx-linux-x64-musl@19.4.1':
-    resolution: {integrity: sha512-ygfqznUMoXnrI23U12VwkxOqG4C7sV85YaF7fWDIMuszxYU7KtrVAQ5YG0LNW5KNa1JCgKkjL9YszEiNJxK47Q==}
+  '@nx/nx-linux-x64-musl@19.4.2':
+    resolution: {integrity: sha512-XbKut3RTb04FNA0diDhO/OM8DgqaWaaXhyybRocfhITxH+mPQBZPUs/NM3xeQCrzlGjwrBYxt+Y9Ep8Ftgd/MA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@nx/nx-win32-arm64-msvc@19.4.1':
-    resolution: {integrity: sha512-tOpjieJ7XqbhvgQX9xcKTu/nWvj+w9tL0j6NlpP5Gkq1LiGUuXG2EWvOEGS5CsyAtT/tncLo2OJUx//Ah+dEtw==}
+  '@nx/nx-win32-arm64-msvc@19.4.2':
+    resolution: {integrity: sha512-VMOQ44KlndtAKE6JaXSQqrAdHBEqbJSJP4EKrBREn8HyVyr6LAfAG3Pj93ZPMvQC47uheisBcDwitxEY/Mhs1Q==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
 
-  '@nx/nx-win32-x64-msvc@19.4.1':
-    resolution: {integrity: sha512-u9h7nrIplf79A6Yhzk1ZlNNlHrhuKrDaGMyhpTx3QaLEiRp0Kl3haMrnYmPlpRFNDwWXWDKzwiTWZtQoo2JoaA==}
+  '@nx/nx-win32-x64-msvc@19.4.2':
+    resolution: {integrity: sha512-FOK4XVanWZYM4cLS9uAx8Xg4BpPRdo0z/jt8gVto8BwgoBPIJuytGhnTVyDNgB+nRJf8K3fz7RFcZm5jup/krg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
@@ -4550,21 +4578,25 @@ packages:
     resolution: {integrity: sha512-I/s6F7yKUDdtMsoBWXJe8Qz40Tui5vsuKCWJEWVL+5q9sSWRzzx6v2KeNsOBEwd94j0eWkpWCH4yB6rZg9Mf0w==}
     engines: {node: '>=8.0.0'}
 
-  '@pigment-css/nextjs-plugin@0.0.16':
-    resolution: {integrity: sha512-uwOgM6txECakseZkCOtILPgO0wlDl6wCcsvYl9jWDoeoQOAzLHsO0YSuEJmdirOeGjRGlqxjUcpxa9YfuiUSBQ==}
+  '@pigment-css/nextjs-plugin@https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/nextjs-plugin':
+    resolution: {tarball: https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/nextjs-plugin}
+    version: 0.0.16
     peerDependencies:
       next: ^12.0.0 || ^13.0.0 || ^14.0.0
 
-  '@pigment-css/react@0.0.16':
-    resolution: {integrity: sha512-hi4Qd5ZRgxR82VPv2ilHTimf9Aspir40B05rcmtKSWbVCNLakk5/uxLOgSuf1xDSxhXv5Q5ZVXTEdAaLCZjwzw==}
+  '@pigment-css/react@https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/react':
+    resolution: {tarball: https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/react}
+    version: 0.0.16
     peerDependencies:
       react: ^17.0.0 || ^18.0.0
 
-  '@pigment-css/unplugin@0.0.16':
-    resolution: {integrity: sha512-T+mE5p4IaSF1WXMm+0Qct4njD2FijByN73L67/7863ZQw5Cmi3ZH6zJNrJGk0gkEcDcDxq4RNUlYA1jM1q5shA==}
+  '@pigment-css/unplugin@https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/unplugin':
+    resolution: {tarball: https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/unplugin}
+    version: 0.0.16
 
-  '@pigment-css/vite-plugin@0.0.16':
-    resolution: {integrity: sha512-9rrF9YArCrvTbBvlEt0/9XWllYZJiJICn3O0VeUJ2JGKAtng37MXbtSIsi1q4eFmAUMKWTW2AFz3YyQPqeTMsg==}
+  '@pigment-css/vite-plugin@https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/vite-plugin':
+    resolution: {tarball: https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/vite-plugin}
+    version: 0.0.16
     peerDependencies:
       vite: ^4.0.0 || ^5.0.0
 
@@ -5771,8 +5803,8 @@ packages:
     resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
     engines: {node: '>= 0.4'}
 
-  aws-sdk@2.1655.0:
-    resolution: {integrity: sha512-Tec0/ZHK8ES6NvAEJhgEm3znyoPb4QUuyQZ2RdvbNTbpJDbeeDuu4BaCAR5HbEVXREVk1/8OBDMsWW1B5lkcww==}
+  aws-sdk@2.1656.0:
+    resolution: {integrity: sha512-KhMRUSeIJNDMuL5PEwyQ5JPF477qDNCb3gHHTqb49IVTtpIYZnPdJgOrDb4nbFHEeoW1x9hKrkRJ4ZL1KTEmJA==}
     engines: {node: '>= 10.0.0'}
 
   axe-core@4.7.2:
@@ -6800,6 +6832,10 @@ packages:
     resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
+  diff@5.1.0:
+    resolution: {integrity: sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==}
+    engines: {node: '>=0.3.1'}
+
   diff@5.2.0:
     resolution: {integrity: sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==}
     engines: {node: '>=0.3.1'}
@@ -9162,6 +9198,10 @@ packages:
   minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
 
+  minimatch@5.1.0:
+    resolution: {integrity: sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==}
+    engines: {node: '>=10'}
+
   minimatch@5.1.6:
     resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
     engines: {node: '>=10'}
@@ -9491,8 +9531,8 @@ packages:
   nwsapi@2.2.7:
     resolution: {integrity: sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==}
 
-  nx@19.4.1:
-    resolution: {integrity: sha512-II+Ix/z6i1E2/3DinwnYKWlM0g3bO/1bcQkwhpaPee5GwHejBYdxlQ2B9uxwqRMYgpF5tFJr/0Q8WsBQybuSJw==}
+  nx@19.4.2:
+    resolution: {integrity: sha512-h4NMoy9uvSHuM+kyioZXb5G4hfBZ7E4a5dswG2RPe3g/GcY9wdpkUMd/EJJ0cHQwv36kRZOMCflhounYCd7OeA==}
     hasBin: true
     peerDependencies:
       '@swc-node/register': ^1.8.0
@@ -10302,6 +10342,11 @@ packages:
     engines: {node: '>=8.10.0'}
     hasBin: true
 
+  react-dom@18.2.0:
+    resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
+    peerDependencies:
+      react: ^18.2.0
+
   react-dom@18.3.1:
     resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
     peerDependencies:
@@ -10497,6 +10542,10 @@ packages:
   react-zdog@1.2.2:
     resolution: {integrity: sha512-Ix7ALha91aOEwiHuxumCeYbARS5XNpc/w0v145oGkM6poF/CvhKJwzLhM5sEZbtrghMA+psAhOJkCTzJoseicA==}
 
+  react@18.2.0:
+    resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
+    engines: {node: '>=0.10.0'}
+
   react@18.3.1:
     resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
     engines: {node: '>=0.10.0'}
@@ -10756,9 +10805,9 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
 
-  rimraf@5.0.8:
-    resolution: {integrity: sha512-XSh0V2/yNhDEi8HwdIefD8MLgs4LQXPag/nEJWs3YUc3Upn+UHa1GyIkEg9xSSNt7HnkO5FjTvmcRzgf+8UZuw==}
-    engines: {node: '>=18'}
+  rimraf@5.0.9:
+    resolution: {integrity: sha512-3i7b8OcswU6CpU8Ej89quJD4O98id7TtVM5U4Mybh84zQXdrFmDLouWBEEaD/QfO3gDDfH+AGFCGsR7kngzQnA==}
+    engines: {node: 14 >=14.20 || 16 >=16.20 || >=18}
     hasBin: true
 
   robust-predicates@3.0.2:
@@ -10819,6 +10868,9 @@ packages:
   scheduler@0.21.0:
     resolution: {integrity: sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==}
 
+  scheduler@0.23.0:
+    resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
+
   scheduler@0.23.2:
     resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
 
@@ -13514,6 +13566,22 @@ snapshots:
 
   '@emotion/memoize@0.8.1': {}
 
+  '@emotion/react@11.11.4(@types/react@18.3.3)(react@18.2.0)':
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@emotion/babel-plugin': 11.11.0
+      '@emotion/cache': 11.11.0
+      '@emotion/serialize': 1.1.4
+      '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.2.0)
+      '@emotion/utils': 1.2.1
+      '@emotion/weak-memoize': 0.3.1
+      hoist-non-react-statics: 3.3.2
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.3.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -13566,6 +13634,10 @@ snapshots:
 
   '@emotion/unitless@0.8.1': {}
 
+  '@emotion/use-insertion-effect-with-fallbacks@1.0.1(react@18.2.0)':
+    dependencies:
+      react: 18.2.0
+
   '@emotion/use-insertion-effect-with-fallbacks@1.0.1(react@18.3.1)':
     dependencies:
       react: 18.3.1
@@ -13927,7 +13999,7 @@ snapshots:
       '@npmcli/arborist': 7.5.3
       '@npmcli/package-json': 5.2.0
       '@npmcli/run-script': 8.1.0
-      '@nx/devkit': 17.2.8(nx@19.4.1)
+      '@nx/devkit': 17.2.8(nx@19.4.2)
       '@octokit/plugin-enterprise-rest': 6.0.1
       '@octokit/rest': 19.0.11(encoding@0.1.13)
       aproba: 2.0.0
@@ -13966,7 +14038,7 @@ snapshots:
       npm-package-arg: 11.0.2
       npm-packlist: 8.0.2
       npm-registry-fetch: 17.1.0
-      nx: 19.4.1
+      nx: 19.4.2
       p-map: 4.0.0
       p-map-series: 2.1.0
       p-queue: 6.6.2
@@ -14008,7 +14080,7 @@ snapshots:
       '@babel/runtime': 7.24.7
       '@floating-ui/react-dom': 2.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/types': 7.2.14(@types/react@18.3.3)
-      '@mui/utils': 5.16.0(@types/react@18.3.3)(react@18.3.1)
+      '@mui/utils': 5.15.20(@types/react@18.3.3)(react@18.3.1)
       '@popperjs/core': 2.11.8
       clsx: 2.1.1
       prop-types: 15.8.1
@@ -14022,7 +14094,7 @@ snapshots:
       '@babel/runtime': 7.24.7
       '@floating-ui/react-dom': 2.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/types': 7.2.14(@types/react@18.3.3)
-      '@mui/utils': 5.16.0(@types/react@18.3.3)(react@18.3.1)
+      '@mui/utils': 5.15.20(@types/react@18.3.3)(react@18.3.1)
       '@popperjs/core': 2.11.8
       clsx: 2.1.1
       prop-types: 15.8.1
@@ -14052,9 +14124,9 @@ snapshots:
       '@babel/runtime': 7.24.7
       '@mui/base': 5.0.0-beta.31(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/core-downloads-tracker': 5.15.14
-      '@mui/system': 5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
+      '@mui/system': 5.15.20(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
       '@mui/types': 7.2.14(@types/react@18.3.3)
-      '@mui/utils': 5.16.0(@types/react@18.3.3)(react@18.3.1)
+      '@mui/utils': 5.15.20(@types/react@18.3.3)(react@18.3.1)
       clsx: 2.1.1
       prop-types: 15.8.1
       react: 18.3.1
@@ -14069,9 +14141,9 @@ snapshots:
       '@babel/runtime': 7.24.7
       '@mui/base': 5.0.0-beta.31(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/core-downloads-tracker': 5.15.14
-      '@mui/system': 5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
+      '@mui/system': 5.15.20(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
       '@mui/types': 7.2.14(@types/react@18.3.3)
-      '@mui/utils': 5.16.0(@types/react@18.3.3)(react@18.3.1)
+      '@mui/utils': 5.15.20(@types/react@18.3.3)(react@18.3.1)
       '@types/react-transition-group': 4.4.10
       clsx: 2.1.1
       csstype: 3.1.3
@@ -14085,6 +14157,15 @@ snapshots:
       '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
       '@types/react': 18.3.3
 
+  '@mui/private-theming@5.15.20(@types/react@18.3.3)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@mui/utils': 5.15.20(@types/react@18.3.3)(react@18.3.1)
+      prop-types: 15.8.1
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.3
+
   '@mui/private-theming@5.16.0(@types/react@18.3.3)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -14125,6 +14206,22 @@ snapshots:
       '@emotion/react': 11.11.4(@types/react@18.3.3)(react@18.3.1)
       '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
 
+  '@mui/system@5.15.20(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@mui/private-theming': 5.15.20(@types/react@18.3.3)(react@18.3.1)
+      '@mui/styled-engine': 5.15.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)
+      '@mui/types': 7.2.14(@types/react@18.3.3)
+      '@mui/utils': 5.15.20(@types/react@18.3.3)(react@18.3.1)
+      clsx: 2.1.1
+      csstype: 3.1.3
+      prop-types: 15.8.1
+      react: 18.3.1
+    optionalDependencies:
+      '@emotion/react': 11.11.4(@types/react@18.3.3)(react@18.3.1)
+      '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
+      '@types/react': 18.3.3
+
   '@mui/system@5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -14161,6 +14258,16 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.3
 
+  '@mui/utils@5.15.20(@types/react@18.3.3)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@types/prop-types': 15.7.12
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-is: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.3
+
   '@mui/utils@5.16.0(@types/react@18.3.3)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -14577,60 +14684,60 @@ snapshots:
       - bluebird
       - supports-color
 
-  '@nrwl/devkit@17.2.8(nx@19.4.1)':
+  '@nrwl/devkit@17.2.8(nx@19.4.2)':
     dependencies:
-      '@nx/devkit': 17.2.8(nx@19.4.1)
+      '@nx/devkit': 17.2.8(nx@19.4.2)
     transitivePeerDependencies:
       - nx
 
-  '@nrwl/tao@19.4.1':
+  '@nrwl/tao@19.4.2':
     dependencies:
-      nx: 19.4.1
+      nx: 19.4.2
       tslib: 2.6.2
     transitivePeerDependencies:
       - '@swc-node/register'
       - '@swc/core'
       - debug
 
-  '@nx/devkit@17.2.8(nx@19.4.1)':
+  '@nx/devkit@17.2.8(nx@19.4.2)':
     dependencies:
-      '@nrwl/devkit': 17.2.8(nx@19.4.1)
+      '@nrwl/devkit': 17.2.8(nx@19.4.2)
       ejs: 3.1.8
       enquirer: 2.3.6
       ignore: 5.3.1
-      nx: 19.4.1
+      nx: 19.4.2
       semver: 7.5.3
       tmp: 0.2.3
       tslib: 2.6.2
 
-  '@nx/nx-darwin-arm64@19.4.1':
+  '@nx/nx-darwin-arm64@19.4.2':
     optional: true
 
-  '@nx/nx-darwin-x64@19.4.1':
+  '@nx/nx-darwin-x64@19.4.2':
     optional: true
 
-  '@nx/nx-freebsd-x64@19.4.1':
+  '@nx/nx-freebsd-x64@19.4.2':
     optional: true
 
-  '@nx/nx-linux-arm-gnueabihf@19.4.1':
+  '@nx/nx-linux-arm-gnueabihf@19.4.2':
     optional: true
 
-  '@nx/nx-linux-arm64-gnu@19.4.1':
+  '@nx/nx-linux-arm64-gnu@19.4.2':
     optional: true
 
-  '@nx/nx-linux-arm64-musl@19.4.1':
+  '@nx/nx-linux-arm64-musl@19.4.2':
     optional: true
 
-  '@nx/nx-linux-x64-gnu@19.4.1':
+  '@nx/nx-linux-x64-gnu@19.4.2':
     optional: true
 
-  '@nx/nx-linux-x64-musl@19.4.1':
+  '@nx/nx-linux-x64-musl@19.4.2':
     optional: true
 
-  '@nx/nx-win32-arm64-msvc@19.4.1':
+  '@nx/nx-win32-arm64-msvc@19.4.2':
     optional: true
 
-  '@nx/nx-win32-x64-msvc@19.4.1':
+  '@nx/nx-win32-x64-msvc@19.4.2':
     optional: true
 
   '@octokit/auth-token@2.5.0':
@@ -14867,16 +14974,16 @@ snapshots:
   '@opentelemetry/api@1.8.0':
     optional: true
 
-  '@pigment-css/nextjs-plugin@0.0.16(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
+  '@pigment-css/nextjs-plugin@https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/nextjs-plugin(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@pigment-css/unplugin': 0.0.16(@types/react@18.3.3)(react@18.3.1)
+      '@pigment-css/unplugin': https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/unplugin(@types/react@18.3.3)(react@18.3.1)
       next: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
     transitivePeerDependencies:
       - '@types/react'
       - react
       - supports-color
 
-  '@pigment-css/react@0.0.16(@types/react@18.3.3)(react@18.3.1)':
+  '@pigment-css/react@https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/react(@types/react@18.3.3)(react@18.3.1)':
     dependencies:
       '@babel/core': 7.24.7
       '@babel/helper-module-imports': 7.24.7
@@ -14904,10 +15011,10 @@ snapshots:
       - '@types/react'
       - supports-color
 
-  '@pigment-css/unplugin@0.0.16(@types/react@18.3.3)(react@18.3.1)':
+  '@pigment-css/unplugin@https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/unplugin(@types/react@18.3.3)(react@18.3.1)':
     dependencies:
       '@babel/core': 7.24.7
-      '@pigment-css/react': 0.0.16(@types/react@18.3.3)(react@18.3.1)
+      '@pigment-css/react': https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/react(@types/react@18.3.3)(react@18.3.1)
       '@wyw-in-js/shared': 0.5.3
       '@wyw-in-js/transform': 0.5.3
       babel-plugin-define-var: 0.1.0
@@ -14917,11 +15024,11 @@ snapshots:
       - react
       - supports-color
 
-  '@pigment-css/vite-plugin@0.0.16(@types/react@18.3.3)(react@18.3.1)(vite@5.3.2(@types/node@18.19.39)(terser@5.29.2))':
+  '@pigment-css/vite-plugin@https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/vite-plugin(@types/react@18.3.3)(react@18.3.1)(vite@5.3.2(@types/node@18.19.39)(terser@5.29.2))':
     dependencies:
       '@babel/core': 7.24.7
       '@babel/preset-typescript': 7.24.7(@babel/core@7.24.7)
-      '@pigment-css/react': 0.0.16(@types/react@18.3.3)(react@18.3.1)
+      '@pigment-css/react': https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/react(@types/react@18.3.3)(react@18.3.1)
       '@wyw-in-js/shared': 0.5.3
       '@wyw-in-js/transform': 0.5.3
       babel-plugin-define-var: 0.1.0
@@ -15574,6 +15681,16 @@ snapshots:
       lz-string: 1.5.0
       pretty-format: 27.5.1
 
+  '@testing-library/react@16.0.0(@testing-library/dom@10.3.1)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@babel/runtime': 7.24.7
+      '@testing-library/dom': 10.3.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
   '@testing-library/react@16.0.0(@testing-library/dom@10.3.1)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -16517,7 +16634,7 @@ snapshots:
     dependencies:
       possible-typed-array-names: 1.0.0
 
-  aws-sdk@2.1655.0:
+  aws-sdk@2.1656.0:
     dependencies:
       buffer: 4.9.2
       events: 1.1.1
@@ -16992,7 +17109,7 @@ snapshots:
   claudia@5.14.1:
     dependencies:
       archiver: 3.1.1
-      aws-sdk: 2.1655.0
+      aws-sdk: 2.1656.0
       fs-extra: 6.0.1
       glob: 7.2.3
       gunzip-maybe: 1.4.2
@@ -17690,6 +17807,8 @@ snapshots:
 
   diff-sequences@29.6.3: {}
 
+  diff@5.1.0: {}
+
   diff@5.2.0: {}
 
   dir-glob@3.0.1:
@@ -18500,7 +18619,7 @@ snapshots:
 
   filelist@1.0.4:
     dependencies:
-      minimatch: 5.1.6
+      minimatch: 5.1.0
 
   fill-range@7.1.1:
     dependencies:
@@ -20089,7 +20208,7 @@ snapshots:
       '@npmcli/arborist': 7.5.3
       '@npmcli/package-json': 5.2.0
       '@npmcli/run-script': 8.1.0
-      '@nx/devkit': 17.2.8(nx@19.4.1)
+      '@nx/devkit': 17.2.8(nx@19.4.2)
       '@octokit/plugin-enterprise-rest': 6.0.1
       '@octokit/rest': 19.0.11(encoding@0.1.13)
       aproba: 2.0.0
@@ -20134,7 +20253,7 @@ snapshots:
       npm-package-arg: 11.0.2
       npm-packlist: 8.0.2
       npm-registry-fetch: 17.1.0
-      nx: 19.4.1
+      nx: 19.4.2
       p-map: 4.0.0
       p-map-series: 2.1.0
       p-pipe: 3.1.0
@@ -20772,6 +20891,10 @@ snapshots:
     dependencies:
       brace-expansion: 1.1.11
 
+  minimatch@5.1.0:
+    dependencies:
+      brace-expansion: 2.0.1
+
   minimatch@5.1.6:
     dependencies:
       brace-expansion: 2.0.1
@@ -21149,9 +21272,9 @@ snapshots:
 
   nwsapi@2.2.7: {}
 
-  nx@19.4.1:
+  nx@19.4.2:
     dependencies:
-      '@nrwl/tao': 19.4.1
+      '@nrwl/tao': 19.4.2
       '@yarnpkg/lockfile': 1.1.0
       '@yarnpkg/parsers': 3.0.0-rc.46
       '@zkochan/js-yaml': 0.0.7
@@ -21186,16 +21309,16 @@ snapshots:
       yargs: 17.7.2
       yargs-parser: 21.1.1
     optionalDependencies:
-      '@nx/nx-darwin-arm64': 19.4.1
-      '@nx/nx-darwin-x64': 19.4.1
-      '@nx/nx-freebsd-x64': 19.4.1
-      '@nx/nx-linux-arm-gnueabihf': 19.4.1
-      '@nx/nx-linux-arm64-gnu': 19.4.1
-      '@nx/nx-linux-arm64-musl': 19.4.1
-      '@nx/nx-linux-x64-gnu': 19.4.1
-      '@nx/nx-linux-x64-musl': 19.4.1
-      '@nx/nx-win32-arm64-msvc': 19.4.1
-      '@nx/nx-win32-x64-msvc': 19.4.1
+      '@nx/nx-darwin-arm64': 19.4.2
+      '@nx/nx-darwin-x64': 19.4.2
+      '@nx/nx-freebsd-x64': 19.4.2
+      '@nx/nx-linux-arm-gnueabihf': 19.4.2
+      '@nx/nx-linux-arm64-gnu': 19.4.2
+      '@nx/nx-linux-arm64-musl': 19.4.2
+      '@nx/nx-linux-x64-gnu': 19.4.2
+      '@nx/nx-linux-x64-musl': 19.4.2
+      '@nx/nx-win32-arm64-msvc': 19.4.2
+      '@nx/nx-win32-x64-msvc': 19.4.2
     transitivePeerDependencies:
       - debug
 
@@ -21692,7 +21815,7 @@ snapshots:
       dependency-graph: 0.11.0
       fs-extra: 11.2.0
       get-stdin: 9.0.0
-      globby: 14.0.2
+      globby: 14.0.1
       picocolors: 1.0.1
       postcss: 8.4.39
       postcss-load-config: 5.1.0(jiti@1.21.0)(postcss@8.4.39)(tsx@4.15.7)
@@ -22025,6 +22148,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  react-dom@18.2.0(react@18.2.0):
+    dependencies:
+      loose-envify: 1.4.0
+      react: 18.2.0
+      scheduler: 0.23.0
+
   react-dom@18.3.1(react@18.3.1):
     dependencies:
       loose-envify: 1.4.0
@@ -22292,6 +22421,10 @@ snapshots:
       react-dom: 18.3.1(react@18.3.1)
       resize-observer-polyfill: 1.5.1
 
+  react@18.2.0:
+    dependencies:
+      loose-envify: 1.4.0
+
   react@18.3.1:
     dependencies:
       loose-envify: 1.4.0
@@ -22377,7 +22510,7 @@ snapshots:
 
   readdir-glob@1.1.2:
     dependencies:
-      minimatch: 5.1.6
+      minimatch: 5.1.0
 
   readdirp@3.6.0:
     dependencies:
@@ -22588,7 +22721,7 @@ snapshots:
     dependencies:
       glob: 9.3.5
 
-  rimraf@5.0.8:
+  rimraf@5.0.9:
     dependencies:
       glob: 10.3.10
 
@@ -22664,6 +22797,10 @@ snapshots:
     dependencies:
       loose-envify: 1.4.0
 
+  scheduler@0.23.0:
+    dependencies:
+      loose-envify: 1.4.0
+
   scheduler@0.23.2:
     dependencies:
       loose-envify: 1.4.0
@@ -22869,7 +23006,7 @@ snapshots:
       '@sinonjs/commons': 3.0.0
       '@sinonjs/fake-timers': 10.3.0
       '@sinonjs/samsam': 8.0.0
-      diff: 5.2.0
+      diff: 5.1.0
       nise: 5.1.4
       supports-color: 7.2.0
 

From 65edeb725e34efc1881139d8fd7bbdf605ab005b Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Tue, 9 Jul 2024 13:36:00 +0700
Subject: [PATCH 04/23] create submodules

---
 .../src/{Box.ts => Box/MaterialPigmentBox.ts}                   | 0
 packages/mui-material-pigment-css/src/Box/index.ts              | 1 +
 .../src/{Container.ts => Container/MaterialPigmentContainer.ts} | 0
 packages/mui-material-pigment-css/src/Container/index.ts        | 1 +
 .../src/{Grid.ts => Grid/MaterialPigmentGrid.ts}                | 0
 packages/mui-material-pigment-css/src/Grid/index.ts             | 1 +
 .../src/{Hidden.ts => Hidden/MaterialPigmentHidden.ts}          | 0
 packages/mui-material-pigment-css/src/Hidden/index.ts           | 1 +
 .../MaterialPigmentRtlProvider.ts}                              | 0
 packages/mui-material-pigment-css/src/RtlProvider/index.ts      | 1 +
 .../src/{Stack.ts => Stack/MaterialPigmentStack.ts}             | 0
 packages/mui-material-pigment-css/src/Stack/index.ts            | 1 +
 packages/mui-material/src/PigmentStack/PigmentStack.tsx         | 2 +-
 13 files changed, 7 insertions(+), 1 deletion(-)
 rename packages/mui-material-pigment-css/src/{Box.ts => Box/MaterialPigmentBox.ts} (100%)
 create mode 100644 packages/mui-material-pigment-css/src/Box/index.ts
 rename packages/mui-material-pigment-css/src/{Container.ts => Container/MaterialPigmentContainer.ts} (100%)
 create mode 100644 packages/mui-material-pigment-css/src/Container/index.ts
 rename packages/mui-material-pigment-css/src/{Grid.ts => Grid/MaterialPigmentGrid.ts} (100%)
 create mode 100644 packages/mui-material-pigment-css/src/Grid/index.ts
 rename packages/mui-material-pigment-css/src/{Hidden.ts => Hidden/MaterialPigmentHidden.ts} (100%)
 create mode 100644 packages/mui-material-pigment-css/src/Hidden/index.ts
 rename packages/mui-material-pigment-css/src/{RtlProvider.ts => RtlProvider/MaterialPigmentRtlProvider.ts} (100%)
 create mode 100644 packages/mui-material-pigment-css/src/RtlProvider/index.ts
 rename packages/mui-material-pigment-css/src/{Stack.ts => Stack/MaterialPigmentStack.ts} (100%)
 create mode 100644 packages/mui-material-pigment-css/src/Stack/index.ts

diff --git a/packages/mui-material-pigment-css/src/Box.ts b/packages/mui-material-pigment-css/src/Box/MaterialPigmentBox.ts
similarity index 100%
rename from packages/mui-material-pigment-css/src/Box.ts
rename to packages/mui-material-pigment-css/src/Box/MaterialPigmentBox.ts
diff --git a/packages/mui-material-pigment-css/src/Box/index.ts b/packages/mui-material-pigment-css/src/Box/index.ts
new file mode 100644
index 00000000000000..588cbfc6ad104c
--- /dev/null
+++ b/packages/mui-material-pigment-css/src/Box/index.ts
@@ -0,0 +1 @@
+export { default } from './MaterialPigmentBox';
diff --git a/packages/mui-material-pigment-css/src/Container.ts b/packages/mui-material-pigment-css/src/Container/MaterialPigmentContainer.ts
similarity index 100%
rename from packages/mui-material-pigment-css/src/Container.ts
rename to packages/mui-material-pigment-css/src/Container/MaterialPigmentContainer.ts
diff --git a/packages/mui-material-pigment-css/src/Container/index.ts b/packages/mui-material-pigment-css/src/Container/index.ts
new file mode 100644
index 00000000000000..bb6c4c3cfdc56c
--- /dev/null
+++ b/packages/mui-material-pigment-css/src/Container/index.ts
@@ -0,0 +1 @@
+export { default } from './MaterialPigmentContainer';
diff --git a/packages/mui-material-pigment-css/src/Grid.ts b/packages/mui-material-pigment-css/src/Grid/MaterialPigmentGrid.ts
similarity index 100%
rename from packages/mui-material-pigment-css/src/Grid.ts
rename to packages/mui-material-pigment-css/src/Grid/MaterialPigmentGrid.ts
diff --git a/packages/mui-material-pigment-css/src/Grid/index.ts b/packages/mui-material-pigment-css/src/Grid/index.ts
new file mode 100644
index 00000000000000..54c890c4d77f07
--- /dev/null
+++ b/packages/mui-material-pigment-css/src/Grid/index.ts
@@ -0,0 +1 @@
+export { default } from './MaterialPigmentGrid';
diff --git a/packages/mui-material-pigment-css/src/Hidden.ts b/packages/mui-material-pigment-css/src/Hidden/MaterialPigmentHidden.ts
similarity index 100%
rename from packages/mui-material-pigment-css/src/Hidden.ts
rename to packages/mui-material-pigment-css/src/Hidden/MaterialPigmentHidden.ts
diff --git a/packages/mui-material-pigment-css/src/Hidden/index.ts b/packages/mui-material-pigment-css/src/Hidden/index.ts
new file mode 100644
index 00000000000000..f88dc388a18bd2
--- /dev/null
+++ b/packages/mui-material-pigment-css/src/Hidden/index.ts
@@ -0,0 +1 @@
+export { default } from './MaterialPigmentHidden';
diff --git a/packages/mui-material-pigment-css/src/RtlProvider.ts b/packages/mui-material-pigment-css/src/RtlProvider/MaterialPigmentRtlProvider.ts
similarity index 100%
rename from packages/mui-material-pigment-css/src/RtlProvider.ts
rename to packages/mui-material-pigment-css/src/RtlProvider/MaterialPigmentRtlProvider.ts
diff --git a/packages/mui-material-pigment-css/src/RtlProvider/index.ts b/packages/mui-material-pigment-css/src/RtlProvider/index.ts
new file mode 100644
index 00000000000000..eb7a4569724bc2
--- /dev/null
+++ b/packages/mui-material-pigment-css/src/RtlProvider/index.ts
@@ -0,0 +1 @@
+export * from './MaterialPigmentRtlProvider';
diff --git a/packages/mui-material-pigment-css/src/Stack.ts b/packages/mui-material-pigment-css/src/Stack/MaterialPigmentStack.ts
similarity index 100%
rename from packages/mui-material-pigment-css/src/Stack.ts
rename to packages/mui-material-pigment-css/src/Stack/MaterialPigmentStack.ts
diff --git a/packages/mui-material-pigment-css/src/Stack/index.ts b/packages/mui-material-pigment-css/src/Stack/index.ts
new file mode 100644
index 00000000000000..e703b1b73e8fe1
--- /dev/null
+++ b/packages/mui-material-pigment-css/src/Stack/index.ts
@@ -0,0 +1 @@
+export { default } from './MaterialPigmentStack';
diff --git a/packages/mui-material/src/PigmentStack/PigmentStack.tsx b/packages/mui-material/src/PigmentStack/PigmentStack.tsx
index a54f7b9f977501..04d90fbe52ca69 100644
--- a/packages/mui-material/src/PigmentStack/PigmentStack.tsx
+++ b/packages/mui-material/src/PigmentStack/PigmentStack.tsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { OverridableComponent, OverrideProps } from '@mui/types';
 // @ts-ignore
-import Stack from '@pigment-css/react/Stack';
+import Stack from '@mui/material-pigment-css/Stack';
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { SxProps } from '@mui/system';

From 33eb3e7732def28c3c43229370427bcf0aa23236 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Tue, 9 Jul 2024 13:38:18 +0700
Subject: [PATCH 05/23] use mui/material-pigment-css components

---
 packages/mui-material/src/PigmentContainer/PigmentContainer.tsx | 2 +-
 packages/mui-material/src/PigmentGrid/PigmentGrid.tsx           | 2 +-
 packages/mui-material/src/PigmentHidden/PigmentHidden.tsx       | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/mui-material/src/PigmentContainer/PigmentContainer.tsx b/packages/mui-material/src/PigmentContainer/PigmentContainer.tsx
index b67c711c83892f..7e79204a424a49 100644
--- a/packages/mui-material/src/PigmentContainer/PigmentContainer.tsx
+++ b/packages/mui-material/src/PigmentContainer/PigmentContainer.tsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { OverridableComponent, OverrideProps } from '@mui/types';
 // @ts-ignore
-import Container from '@pigment-css/react/Container';
+import Container from '@mui/material-pigment-css/Container';
 import capitalize from '@mui/utils/capitalize';
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
diff --git a/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx b/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx
index 8a843075597bcd..a34e4586c60efe 100644
--- a/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx
+++ b/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { OverridableComponent, OverrideProps } from '@mui/types';
 import { SxProps } from '@mui/system';
 // @ts-ignore
-import Grid from '@pigment-css/react/Grid';
+import Grid from '@mui/material-pigment-css/Grid';
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import {
diff --git a/packages/mui-material/src/PigmentHidden/PigmentHidden.tsx b/packages/mui-material/src/PigmentHidden/PigmentHidden.tsx
index 7f33f5fc3abe5a..99fb1a3972dccd 100644
--- a/packages/mui-material/src/PigmentHidden/PigmentHidden.tsx
+++ b/packages/mui-material/src/PigmentHidden/PigmentHidden.tsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { Breakpoint } from '@mui/system';
 // @ts-ignore
-import Hidden from '@pigment-css/react/Hidden';
+import Hidden from '@mui/material-pigment-css/Hidden';
 import capitalize from '@mui/utils/capitalize';
 import composeClasses from '@mui/utils/composeClasses';
 import HiddenJs from '../Hidden/HiddenJs';

From 6ac9e5edc9e77d2271b7e4ab9899ade16c21a155 Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijeshb42@gmail.com>
Date: Tue, 9 Jul 2024 12:23:09 +0530
Subject: [PATCH 06/23] Dedupe

---
 apps/pigment-css-next-app/package.json        |   2 +-
 .../src/app/material-ui/page.tsx              |   4 +-
 apps/pigment-css-vite-app/package.json        |   4 +-
 package.json                                  |   8 +-
 .../mui-material-pigment-css/package.json     |   2 +-
 packages/mui-material/package.json            |  13 +
 pnpm-lock.yaml                                | 233 ++++--------------
 7 files changed, 74 insertions(+), 192 deletions(-)

diff --git a/apps/pigment-css-next-app/package.json b/apps/pigment-css-next-app/package.json
index 962be22184822b..afd2334d01f530 100644
--- a/apps/pigment-css-next-app/package.json
+++ b/apps/pigment-css-next-app/package.json
@@ -23,7 +23,7 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@pigment-css/nextjs-plugin": "https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/nextjs-plugin",
+    "@pigment-css/nextjs-plugin": "https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/nextjs-plugin",
     "@types/node": "^20.5.7",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
diff --git a/apps/pigment-css-next-app/src/app/material-ui/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/page.tsx
index 7484ff290c0c98..bbb5577a19929d 100644
--- a/apps/pigment-css-next-app/src/app/material-ui/page.tsx
+++ b/apps/pigment-css-next-app/src/app/material-ui/page.tsx
@@ -6,7 +6,9 @@ import path from 'path';
 import { css } from '@mui/material-pigment-css';
 
 export default async function MaterialUIPage() {
-  const rootPaths = await fs.readdir(path.join(process.cwd(), `src/app/material-ui`));
+  const rootPaths = (await fs.readdir(path.join(process.cwd(), `src/app/material-ui`))).filter(
+    (path) => !path.startsWith('.'),
+  );
   return (
     <div>
       <h1>Material UI Components</h1>
diff --git a/apps/pigment-css-vite-app/package.json b/apps/pigment-css-vite-app/package.json
index 7750ad4745c8d4..1da1b18745fbd3 100644
--- a/apps/pigment-css-vite-app/package.json
+++ b/apps/pigment-css-vite-app/package.json
@@ -9,6 +9,8 @@
     "build": "vite build"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
     "@mui/material-pigment-css": "workspace:^",
     "@mui/utils": "workspace:^",
     "@mui/base": "workspace:^",
@@ -26,7 +28,7 @@
   "devDependencies": {
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@pigment-css/vite-plugin": "https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/vite-plugin",
+    "@pigment-css/vite-plugin": "https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/vite-plugin",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
diff --git a/package.json b/package.json
index ec9a06bcf840e5..191b80910bc051 100644
--- a/package.json
+++ b/package.json
@@ -209,10 +209,10 @@
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "cross-fetch": "^4.0.0",
-    "@pigment-css/react": "https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/react",
-    "@pigment-css/unplugin": "https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/unplugin",
-    "@pigment-css/nextjs-plugin": "https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/nextjs-plugin",
-    "@pigment-css/vite-plugin": "https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/vite-plugin"
+    "@pigment-css/react": "https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/react",
+    "@pigment-css/unplugin": "https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/unplugin",
+    "@pigment-css/nextjs-plugin": "https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/nextjs-plugin",
+    "@pigment-css/vite-plugin": "https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/vite-plugin"
   },
   "nyc": {
     "include": [
diff --git a/packages/mui-material-pigment-css/package.json b/packages/mui-material-pigment-css/package.json
index 9365ecfed6452b..5ea9e138567cdd 100644
--- a/packages/mui-material-pigment-css/package.json
+++ b/packages/mui-material-pigment-css/package.json
@@ -40,7 +40,7 @@
     "typescript:module-augmentation": "node scripts/testModuleAugmentation.js"
   },
   "dependencies": {
-    "@pigment-css/react": "https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/react"
+    "@pigment-css/react": "https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/react"
   },
   "sideEffects": false,
   "publishConfig": {
diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json
index bf4f5ed81b2652..567371b577747a 100644
--- a/packages/mui-material/package.json
+++ b/packages/mui-material/package.json
@@ -104,5 +104,18 @@
   },
   "engines": {
     "node": ">=12.0.0"
+  },
+  "pigment-css": {
+    "vite": {
+      "include": [
+        "prop-types",
+        "react-is",
+        "hoist-non-react-statics",
+        "react",
+        "react-dom",
+        "@emotion/react",
+        "@emotion/styled"
+      ]
+    }
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7bce8dc62a72c5..1f5ccfa1d8d2c8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,10 +20,10 @@ overrides:
   '@types/react': 18.3.3
   '@types/react-dom': 18.3.0
   cross-fetch: ^4.0.0
-  '@pigment-css/react': https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/react
-  '@pigment-css/unplugin': https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/unplugin
-  '@pigment-css/nextjs-plugin': https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/nextjs-plugin
-  '@pigment-css/vite-plugin': https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/vite-plugin
+  '@pigment-css/react': https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/react
+  '@pigment-css/unplugin': https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/unplugin
+  '@pigment-css/nextjs-plugin': https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/nextjs-plugin
+  '@pigment-css/vite-plugin': https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/vite-plugin
 
 importers:
 
@@ -106,8 +106,8 @@ importers:
         specifier: ^20.1.1
         version: 20.1.1
       '@pigment-css/react':
-        specifier: https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/react
-        version: https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/react(@types/react@18.3.3)(react@18.3.1)
+        specifier: https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/react
+        version: https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/react(@types/react@18.3.3)(react@18.3.1)
       '@playwright/test':
         specifier: 1.45.1
         version: 1.45.1
@@ -359,8 +359,8 @@ importers:
         version: 18.3.1(react@18.3.1)
     devDependencies:
       '@pigment-css/nextjs-plugin':
-        specifier: https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/nextjs-plugin
-        version: https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/nextjs-plugin(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
+        specifier: https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/nextjs-plugin
+        version: https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/nextjs-plugin(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
       '@types/node':
         specifier: ^18.19.39
         version: 18.19.39
@@ -379,6 +379,12 @@ importers:
 
   apps/pigment-css-vite-app:
     dependencies:
+      '@emotion/react':
+        specifier: ^11.11.4
+        version: 11.11.4(@types/react@18.3.3)(react@18.3.1)
+      '@emotion/styled':
+        specifier: ^11.11.5
+        version: 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
       '@mui/base':
         specifier: workspace:^
         version: link:../../packages/mui-base/build
@@ -426,8 +432,8 @@ importers:
         specifier: ^7.24.7
         version: 7.24.7(@babel/core@7.24.7)
       '@pigment-css/vite-plugin':
-        specifier: https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/vite-plugin
-        version: https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/vite-plugin(@types/react@18.3.3)(react@18.3.1)(vite@5.3.2(@types/node@18.19.39)(terser@5.29.2))
+        specifier: https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/vite-plugin
+        version: https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/vite-plugin(@types/react@18.3.3)(react@18.3.1)(vite@5.3.2(@types/node@18.19.39)(terser@5.29.2))
       '@types/react':
         specifier: 18.3.3
         version: 18.3.3
@@ -984,13 +990,13 @@ importers:
         version: 11.11.0
       '@emotion/react':
         specifier: ^11.11.4
-        version: 11.11.4(@types/react@18.3.3)(react@18.2.0)
+        version: 11.11.4(@types/react@18.3.3)(react@18.3.1)
       '@testing-library/dom':
         specifier: ^10.3.1
         version: 10.3.1
       '@testing-library/react':
         specifier: ^16.0.0
-        version: 16.0.0(@testing-library/dom@10.3.1)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 16.0.0(@testing-library/dom@10.3.1)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       chai:
         specifier: ^4.4.1
         version: 4.4.1
@@ -1023,10 +1029,10 @@ importers:
         version: 15.8.1
       react:
         specifier: ^18.2.0
-        version: 18.2.0
+        version: 18.3.1
       react-dom:
         specifier: ^18.2.0
-        version: 18.2.0(react@18.2.0)
+        version: 18.3.1(react@18.3.1)
       sinon:
         specifier: ^16.1.3
         version: 16.1.3
@@ -1243,7 +1249,7 @@ importers:
         version: 7.24.7
       '@mui/utils':
         specifier: ^5.0.0
-        version: 5.15.20(@types/react@18.3.3)(react@18.3.1)
+        version: 5.16.0(@types/react@18.3.3)(react@18.3.1)
       babel-plugin-macros:
         specifier: ^3.1.0
         version: 3.1.0
@@ -1395,7 +1401,7 @@ importers:
         version: link:../markdown
       '@mui/system':
         specifier: ^5.0.0
-        version: 5.15.20(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
+        version: 5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
       chai:
         specifier: ^4.4.1
         version: 4.4.1
@@ -1825,8 +1831,8 @@ importers:
   packages/mui-material-pigment-css:
     dependencies:
       '@pigment-css/react':
-        specifier: https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/react
-        version: https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/react(@types/react@18.3.3)(react@18.3.1)
+        specifier: https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/react
+        version: https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/react(@types/react@18.3.3)(react@18.3.1)
     publishDirectory: build
 
   packages/mui-private-theming:
@@ -3862,16 +3868,6 @@ packages:
       '@types/react':
         optional: true
 
-  '@mui/private-theming@5.15.20':
-    resolution: {integrity: sha512-BK8F94AIqSrnaPYXf2KAOjGZJgWfvqAVQ2gVR3EryvQFtuBnG6RwodxrCvd3B48VuMy6Wsk897+lQMUxJyk+6g==}
-    engines: {node: '>=12.0.0'}
-    peerDependencies:
-      '@types/react': 18.3.3
-      react: ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   '@mui/private-theming@5.16.0':
     resolution: {integrity: sha512-sYpubkO1MZOnxNyVOClrPNOTs0MfuRVVnAvCeMaOaXt6GimgQbnUcshYv2pSr6PFj+Mqzdff/FYOBceK8u5QgA==}
     engines: {node: '>=12.0.0'}
@@ -3918,22 +3914,6 @@ packages:
       '@emotion/styled':
         optional: true
 
-  '@mui/system@5.15.20':
-    resolution: {integrity: sha512-LoMq4IlAAhxzL2VNUDBTQxAb4chnBe8JvRINVNDiMtHE2PiPOoHlhOPutSxEbaL5mkECPVWSv6p8JEV+uykwIA==}
-    engines: {node: '>=12.0.0'}
-    peerDependencies:
-      '@emotion/react': ^11.5.0
-      '@emotion/styled': ^11.3.0
-      '@types/react': 18.3.3
-      react: ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@emotion/react':
-        optional: true
-      '@emotion/styled':
-        optional: true
-      '@types/react':
-        optional: true
-
   '@mui/system@5.16.0':
     resolution: {integrity: sha512-9YbkC2m3+pNumAvubYv+ijLtog6puJ0fJ6rYfzfLCM47pWrw3m+30nXNM8zMgDaKL6vpfWJcCXm+LPaWBpy7sw==}
     engines: {node: '>=12.0.0'}
@@ -3974,16 +3954,6 @@ packages:
       '@types/react':
         optional: true
 
-  '@mui/utils@5.15.20':
-    resolution: {integrity: sha512-mAbYx0sovrnpAu1zHc3MDIhPqL8RPVC5W5xcO1b7PiSCJPtckIZmBkp8hefamAvUiAV8gpfMOM6Zb+eSisbI2A==}
-    engines: {node: '>=12.0.0'}
-    peerDependencies:
-      '@types/react': 18.3.3
-      react: ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   '@mui/utils@5.16.0':
     resolution: {integrity: sha512-kLLi5J1xY+mwtUlMb8Ubdxf4qFAA1+U7WPBvjM/qQ4CIwLCohNb0sHo1oYPufjSIH/Z9+dhVxD7dJlfGjd1AVA==}
     engines: {node: '>=12.0.0'}
@@ -4578,24 +4548,24 @@ packages:
     resolution: {integrity: sha512-I/s6F7yKUDdtMsoBWXJe8Qz40Tui5vsuKCWJEWVL+5q9sSWRzzx6v2KeNsOBEwd94j0eWkpWCH4yB6rZg9Mf0w==}
     engines: {node: '>=8.0.0'}
 
-  '@pigment-css/nextjs-plugin@https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/nextjs-plugin':
-    resolution: {tarball: https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/nextjs-plugin}
+  '@pigment-css/nextjs-plugin@https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/nextjs-plugin':
+    resolution: {tarball: https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/nextjs-plugin}
     version: 0.0.16
     peerDependencies:
       next: ^12.0.0 || ^13.0.0 || ^14.0.0
 
-  '@pigment-css/react@https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/react':
-    resolution: {tarball: https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/react}
+  '@pigment-css/react@https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/react':
+    resolution: {tarball: https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/react}
     version: 0.0.16
     peerDependencies:
       react: ^17.0.0 || ^18.0.0
 
-  '@pigment-css/unplugin@https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/unplugin':
-    resolution: {tarball: https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/unplugin}
+  '@pigment-css/unplugin@https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/unplugin':
+    resolution: {tarball: https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/unplugin}
     version: 0.0.16
 
-  '@pigment-css/vite-plugin@https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/vite-plugin':
-    resolution: {tarball: https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/vite-plugin}
+  '@pigment-css/vite-plugin@https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/vite-plugin':
+    resolution: {tarball: https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/vite-plugin}
     version: 0.0.16
     peerDependencies:
       vite: ^4.0.0 || ^5.0.0
@@ -6832,10 +6802,6 @@ packages:
     resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  diff@5.1.0:
-    resolution: {integrity: sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==}
-    engines: {node: '>=0.3.1'}
-
   diff@5.2.0:
     resolution: {integrity: sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==}
     engines: {node: '>=0.3.1'}
@@ -9198,10 +9164,6 @@ packages:
   minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
 
-  minimatch@5.1.0:
-    resolution: {integrity: sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==}
-    engines: {node: '>=10'}
-
   minimatch@5.1.6:
     resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
     engines: {node: '>=10'}
@@ -10342,11 +10304,6 @@ packages:
     engines: {node: '>=8.10.0'}
     hasBin: true
 
-  react-dom@18.2.0:
-    resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
-    peerDependencies:
-      react: ^18.2.0
-
   react-dom@18.3.1:
     resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
     peerDependencies:
@@ -10542,10 +10499,6 @@ packages:
   react-zdog@1.2.2:
     resolution: {integrity: sha512-Ix7ALha91aOEwiHuxumCeYbARS5XNpc/w0v145oGkM6poF/CvhKJwzLhM5sEZbtrghMA+psAhOJkCTzJoseicA==}
 
-  react@18.2.0:
-    resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
-    engines: {node: '>=0.10.0'}
-
   react@18.3.1:
     resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
     engines: {node: '>=0.10.0'}
@@ -10868,9 +10821,6 @@ packages:
   scheduler@0.21.0:
     resolution: {integrity: sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==}
 
-  scheduler@0.23.0:
-    resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
-
   scheduler@0.23.2:
     resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
 
@@ -13566,22 +13516,6 @@ snapshots:
 
   '@emotion/memoize@0.8.1': {}
 
-  '@emotion/react@11.11.4(@types/react@18.3.3)(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@emotion/babel-plugin': 11.11.0
-      '@emotion/cache': 11.11.0
-      '@emotion/serialize': 1.1.4
-      '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.2.0)
-      '@emotion/utils': 1.2.1
-      '@emotion/weak-memoize': 0.3.1
-      hoist-non-react-statics: 3.3.2
-      react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.3.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -13634,10 +13568,6 @@ snapshots:
 
   '@emotion/unitless@0.8.1': {}
 
-  '@emotion/use-insertion-effect-with-fallbacks@1.0.1(react@18.2.0)':
-    dependencies:
-      react: 18.2.0
-
   '@emotion/use-insertion-effect-with-fallbacks@1.0.1(react@18.3.1)':
     dependencies:
       react: 18.3.1
@@ -14080,7 +14010,7 @@ snapshots:
       '@babel/runtime': 7.24.7
       '@floating-ui/react-dom': 2.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/types': 7.2.14(@types/react@18.3.3)
-      '@mui/utils': 5.15.20(@types/react@18.3.3)(react@18.3.1)
+      '@mui/utils': 5.16.0(@types/react@18.3.3)(react@18.3.1)
       '@popperjs/core': 2.11.8
       clsx: 2.1.1
       prop-types: 15.8.1
@@ -14094,7 +14024,7 @@ snapshots:
       '@babel/runtime': 7.24.7
       '@floating-ui/react-dom': 2.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/types': 7.2.14(@types/react@18.3.3)
-      '@mui/utils': 5.15.20(@types/react@18.3.3)(react@18.3.1)
+      '@mui/utils': 5.16.0(@types/react@18.3.3)(react@18.3.1)
       '@popperjs/core': 2.11.8
       clsx: 2.1.1
       prop-types: 15.8.1
@@ -14124,9 +14054,9 @@ snapshots:
       '@babel/runtime': 7.24.7
       '@mui/base': 5.0.0-beta.31(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/core-downloads-tracker': 5.15.14
-      '@mui/system': 5.15.20(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
+      '@mui/system': 5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
       '@mui/types': 7.2.14(@types/react@18.3.3)
-      '@mui/utils': 5.15.20(@types/react@18.3.3)(react@18.3.1)
+      '@mui/utils': 5.16.0(@types/react@18.3.3)(react@18.3.1)
       clsx: 2.1.1
       prop-types: 15.8.1
       react: 18.3.1
@@ -14141,9 +14071,9 @@ snapshots:
       '@babel/runtime': 7.24.7
       '@mui/base': 5.0.0-beta.31(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mui/core-downloads-tracker': 5.15.14
-      '@mui/system': 5.15.20(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
+      '@mui/system': 5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
       '@mui/types': 7.2.14(@types/react@18.3.3)
-      '@mui/utils': 5.15.20(@types/react@18.3.3)(react@18.3.1)
+      '@mui/utils': 5.16.0(@types/react@18.3.3)(react@18.3.1)
       '@types/react-transition-group': 4.4.10
       clsx: 2.1.1
       csstype: 3.1.3
@@ -14157,15 +14087,6 @@ snapshots:
       '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
       '@types/react': 18.3.3
 
-  '@mui/private-theming@5.15.20(@types/react@18.3.3)(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@mui/utils': 5.15.20(@types/react@18.3.3)(react@18.3.1)
-      prop-types: 15.8.1
-      react: 18.3.1
-    optionalDependencies:
-      '@types/react': 18.3.3
-
   '@mui/private-theming@5.16.0(@types/react@18.3.3)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -14206,22 +14127,6 @@ snapshots:
       '@emotion/react': 11.11.4(@types/react@18.3.3)(react@18.3.1)
       '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
 
-  '@mui/system@5.15.20(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@mui/private-theming': 5.15.20(@types/react@18.3.3)(react@18.3.1)
-      '@mui/styled-engine': 5.15.14(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)
-      '@mui/types': 7.2.14(@types/react@18.3.3)
-      '@mui/utils': 5.15.20(@types/react@18.3.3)(react@18.3.1)
-      clsx: 2.1.1
-      csstype: 3.1.3
-      prop-types: 15.8.1
-      react: 18.3.1
-    optionalDependencies:
-      '@emotion/react': 11.11.4(@types/react@18.3.3)(react@18.3.1)
-      '@emotion/styled': 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
-      '@types/react': 18.3.3
-
   '@mui/system@5.16.0(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -14258,16 +14163,6 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.3
 
-  '@mui/utils@5.15.20(@types/react@18.3.3)(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@types/prop-types': 15.7.12
-      prop-types: 15.8.1
-      react: 18.3.1
-      react-is: 18.3.1
-    optionalDependencies:
-      '@types/react': 18.3.3
-
   '@mui/utils@5.16.0(@types/react@18.3.3)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -14974,16 +14869,16 @@ snapshots:
   '@opentelemetry/api@1.8.0':
     optional: true
 
-  '@pigment-css/nextjs-plugin@https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/nextjs-plugin(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
+  '@pigment-css/nextjs-plugin@https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/nextjs-plugin(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@pigment-css/unplugin': https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/unplugin(@types/react@18.3.3)(react@18.3.1)
+      '@pigment-css/unplugin': https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/unplugin(@types/react@18.3.3)(react@18.3.1)
       next: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
     transitivePeerDependencies:
       - '@types/react'
       - react
       - supports-color
 
-  '@pigment-css/react@https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/react(@types/react@18.3.3)(react@18.3.1)':
+  '@pigment-css/react@https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/react(@types/react@18.3.3)(react@18.3.1)':
     dependencies:
       '@babel/core': 7.24.7
       '@babel/helper-module-imports': 7.24.7
@@ -15011,10 +14906,10 @@ snapshots:
       - '@types/react'
       - supports-color
 
-  '@pigment-css/unplugin@https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/unplugin(@types/react@18.3.3)(react@18.3.1)':
+  '@pigment-css/unplugin@https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/unplugin(@types/react@18.3.3)(react@18.3.1)':
     dependencies:
       '@babel/core': 7.24.7
-      '@pigment-css/react': https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/react(@types/react@18.3.3)(react@18.3.1)
+      '@pigment-css/react': https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/react(@types/react@18.3.3)(react@18.3.1)
       '@wyw-in-js/shared': 0.5.3
       '@wyw-in-js/transform': 0.5.3
       babel-plugin-define-var: 0.1.0
@@ -15024,11 +14919,11 @@ snapshots:
       - react
       - supports-color
 
-  '@pigment-css/vite-plugin@https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/vite-plugin(@types/react@18.3.3)(react@18.3.1)(vite@5.3.2(@types/node@18.19.39)(terser@5.29.2))':
+  '@pigment-css/vite-plugin@https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/vite-plugin(@types/react@18.3.3)(react@18.3.1)(vite@5.3.2(@types/node@18.19.39)(terser@5.29.2))':
     dependencies:
       '@babel/core': 7.24.7
       '@babel/preset-typescript': 7.24.7(@babel/core@7.24.7)
-      '@pigment-css/react': https://pkg.csb.dev/mui/pigment-css/commit/747b907d/@pigment-css/react(@types/react@18.3.3)(react@18.3.1)
+      '@pigment-css/react': https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/react(@types/react@18.3.3)(react@18.3.1)
       '@wyw-in-js/shared': 0.5.3
       '@wyw-in-js/transform': 0.5.3
       babel-plugin-define-var: 0.1.0
@@ -15681,16 +15576,6 @@ snapshots:
       lz-string: 1.5.0
       pretty-format: 27.5.1
 
-  '@testing-library/react@16.0.0(@testing-library/dom@10.3.1)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@testing-library/dom': 10.3.1
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.3.3
-      '@types/react-dom': 18.3.0
-
   '@testing-library/react@16.0.0(@testing-library/dom@10.3.1)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -17807,8 +17692,6 @@ snapshots:
 
   diff-sequences@29.6.3: {}
 
-  diff@5.1.0: {}
-
   diff@5.2.0: {}
 
   dir-glob@3.0.1:
@@ -18619,7 +18502,7 @@ snapshots:
 
   filelist@1.0.4:
     dependencies:
-      minimatch: 5.1.0
+      minimatch: 5.1.6
 
   fill-range@7.1.1:
     dependencies:
@@ -20891,10 +20774,6 @@ snapshots:
     dependencies:
       brace-expansion: 1.1.11
 
-  minimatch@5.1.0:
-    dependencies:
-      brace-expansion: 2.0.1
-
   minimatch@5.1.6:
     dependencies:
       brace-expansion: 2.0.1
@@ -21815,7 +21694,7 @@ snapshots:
       dependency-graph: 0.11.0
       fs-extra: 11.2.0
       get-stdin: 9.0.0
-      globby: 14.0.1
+      globby: 14.0.2
       picocolors: 1.0.1
       postcss: 8.4.39
       postcss-load-config: 5.1.0(jiti@1.21.0)(postcss@8.4.39)(tsx@4.15.7)
@@ -22148,12 +22027,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  react-dom@18.2.0(react@18.2.0):
-    dependencies:
-      loose-envify: 1.4.0
-      react: 18.2.0
-      scheduler: 0.23.0
-
   react-dom@18.3.1(react@18.3.1):
     dependencies:
       loose-envify: 1.4.0
@@ -22421,10 +22294,6 @@ snapshots:
       react-dom: 18.3.1(react@18.3.1)
       resize-observer-polyfill: 1.5.1
 
-  react@18.2.0:
-    dependencies:
-      loose-envify: 1.4.0
-
   react@18.3.1:
     dependencies:
       loose-envify: 1.4.0
@@ -22510,7 +22379,7 @@ snapshots:
 
   readdir-glob@1.1.2:
     dependencies:
-      minimatch: 5.1.0
+      minimatch: 5.1.6
 
   readdirp@3.6.0:
     dependencies:
@@ -22797,10 +22666,6 @@ snapshots:
     dependencies:
       loose-envify: 1.4.0
 
-  scheduler@0.23.0:
-    dependencies:
-      loose-envify: 1.4.0
-
   scheduler@0.23.2:
     dependencies:
       loose-envify: 1.4.0
@@ -23006,7 +22871,7 @@ snapshots:
       '@sinonjs/commons': 3.0.0
       '@sinonjs/fake-timers': 10.3.0
       '@sinonjs/samsam': 8.0.0
-      diff: 5.1.0
+      diff: 5.2.0
       nise: 5.1.4
       supports-color: 7.2.0
 

From 498dbb49b14eb0157bd3926bc7d91b100ce63620 Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijeshb42@gmail.com>
Date: Tue, 9 Jul 2024 15:58:39 +0530
Subject: [PATCH 07/23] Lint fix

---
 apps/pigment-css-next-app/.eslintrc                          | 5 +++--
 apps/pigment-css-next-app/src/app/material-ui/page.tsx       | 3 +--
 apps/pigment-css-vite-app/.eslintrc                          | 5 +++--
 apps/pigment-css-vite-app/vite.config.ts                     | 1 -
 packages/mui-material-pigment-css/package.json               | 1 +
 .../src/RtlProvider/MaterialPigmentRtlProvider.ts            | 4 +++-
 pnpm-lock.yaml                                               | 3 +++
 7 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/apps/pigment-css-next-app/.eslintrc b/apps/pigment-css-next-app/.eslintrc
index 327cf67d7ce21a..73d03ea1064762 100644
--- a/apps/pigment-css-next-app/.eslintrc
+++ b/apps/pigment-css-next-app/.eslintrc
@@ -3,6 +3,7 @@
   "rules": {
     "import/prefer-default-export": "off",
     "import/extensions": "off",
-    "import/no-unresolved": "off"
-  }
+    "import/no-unresolved": "off",
+    "react/no-unknown-property": ["error", { "ignore": ["sx"] }],
+  },
 }
diff --git a/apps/pigment-css-next-app/src/app/material-ui/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/page.tsx
index bbb5577a19929d..8d346b5bd4d800 100644
--- a/apps/pigment-css-next-app/src/app/material-ui/page.tsx
+++ b/apps/pigment-css-next-app/src/app/material-ui/page.tsx
@@ -7,14 +7,13 @@ import { css } from '@mui/material-pigment-css';
 
 export default async function MaterialUIPage() {
   const rootPaths = (await fs.readdir(path.join(process.cwd(), `src/app/material-ui`))).filter(
-    (path) => !path.startsWith('.'),
+    (p) => !p.startsWith('.'),
   );
   return (
     <div>
       <h1>Material UI Components</h1>
       <nav>
         <ul
-          // @ts-ignore
           sx={{
             margin: 0,
             marginBlock: '1rem',
diff --git a/apps/pigment-css-vite-app/.eslintrc b/apps/pigment-css-vite-app/.eslintrc
index 6a8ae0c6d72517..00755ca39b075b 100644
--- a/apps/pigment-css-vite-app/.eslintrc
+++ b/apps/pigment-css-vite-app/.eslintrc
@@ -1,6 +1,7 @@
 {
   "rules": {
     "import/prefer-default-export": "off",
-    "react/react-in-jsx-scope": "off"
-  }
+    "react/react-in-jsx-scope": "off",
+    "react/no-unknown-property": ["error", { "ignore": ["sx"] }],
+  },
 }
diff --git a/apps/pigment-css-vite-app/vite.config.ts b/apps/pigment-css-vite-app/vite.config.ts
index 7790a37d8020cc..5a9f05fff40f85 100644
--- a/apps/pigment-css-vite-app/vite.config.ts
+++ b/apps/pigment-css-vite-app/vite.config.ts
@@ -1,4 +1,3 @@
-import * as path from 'node:path';
 import { defineConfig, splitVendorChunkPlugin } from 'vite';
 import reactPlugin from '@vitejs/plugin-react';
 import Pages from 'vite-plugin-pages';
diff --git a/packages/mui-material-pigment-css/package.json b/packages/mui-material-pigment-css/package.json
index 5ea9e138567cdd..f6ca0a3e2f426d 100644
--- a/packages/mui-material-pigment-css/package.json
+++ b/packages/mui-material-pigment-css/package.json
@@ -40,6 +40,7 @@
     "typescript:module-augmentation": "node scripts/testModuleAugmentation.js"
   },
   "dependencies": {
+    "@mui/system": "workspace:^",
     "@pigment-css/react": "https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/react"
   },
   "sideEffects": false,
diff --git a/packages/mui-material-pigment-css/src/RtlProvider/MaterialPigmentRtlProvider.ts b/packages/mui-material-pigment-css/src/RtlProvider/MaterialPigmentRtlProvider.ts
index b82c0eb89d48a6..414accd84a8c00 100644
--- a/packages/mui-material-pigment-css/src/RtlProvider/MaterialPigmentRtlProvider.ts
+++ b/packages/mui-material-pigment-css/src/RtlProvider/MaterialPigmentRtlProvider.ts
@@ -1 +1,3 @@
-export * from '@pigment-css/react/RtlProvider';
+'use client';
+
+export * from '@mui/system/RtlProvider';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1f5ccfa1d8d2c8..def7150811ab2a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1830,6 +1830,9 @@ importers:
 
   packages/mui-material-pigment-css:
     dependencies:
+      '@mui/system':
+        specifier: workspace:^
+        version: link:../mui-system/build
       '@pigment-css/react':
         specifier: https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/react
         version: https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/react(@types/react@18.3.3)(react@18.3.1)

From aa1ee3d23d4ca8413ce13f94c54f76d0a8f133fd Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijeshb42@gmail.com>
Date: Tue, 9 Jul 2024 16:05:09 +0530
Subject: [PATCH 08/23] Fix module resolution

---
 packages/mui-material-pigment-css/tsconfig.build.json | 4 +---
 packages/mui-material-pigment-css/tsconfig.json       | 4 ++++
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/mui-material-pigment-css/tsconfig.build.json b/packages/mui-material-pigment-css/tsconfig.build.json
index a8f9c5462f0dc7..3b9cd66ac9420a 100644
--- a/packages/mui-material-pigment-css/tsconfig.build.json
+++ b/packages/mui-material-pigment-css/tsconfig.build.json
@@ -6,9 +6,7 @@
     "noEmit": false,
     "emitDeclarationOnly": true,
     "outDir": "build",
-    "rootDir": "./src",
-    "moduleResolution": "NodeNext",
-    "module": "NodeNext"
+    "rootDir": "./src"
   },
   "include": ["./src/**/*.ts*"],
   "exclude": ["src/**/*.spec.ts*", "src/**/*.test.ts*"]
diff --git a/packages/mui-material-pigment-css/tsconfig.json b/packages/mui-material-pigment-css/tsconfig.json
index ee756997748e1c..8c3fdb3a1a701f 100644
--- a/packages/mui-material-pigment-css/tsconfig.json
+++ b/packages/mui-material-pigment-css/tsconfig.json
@@ -1,4 +1,8 @@
 {
   "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext"
+  },
   "include": ["src/**/*", "test/**/*"]
 }

From 5f169efad9e9fcbdbf1bdbc4018ec32153a2e686 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Wed, 10 Jul 2024 10:27:37 +0700
Subject: [PATCH 09/23] add pigment css migration

---
 .../migrating-to-pigment-css.md               | 524 ++++++++++++++++++
 .../migrating-to-v6/migrating-to-v6.md        |   4 +-
 docs/data/material/pages.ts                   |   4 +
 .../migration/migrating-to-pigment-css.js     |   7 +
 docs/translations/translations.json           |   1 +
 5 files changed, 537 insertions(+), 3 deletions(-)
 create mode 100644 docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md
 create mode 100644 docs/pages/material-ui/migration/migrating-to-pigment-css.js

diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md b/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md
new file mode 100644
index 00000000000000..9f4efc8174375b
--- /dev/null
+++ b/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md
@@ -0,0 +1,524 @@
+# Migrating to Pigment CSS
+
+<p class="description">This guide helps you integrate Pigment CSS with Material UI v6.</p>
+
+Before going through this guide, make sure you have [migrated to Material UI v6](/material-ui/migration/migrating-to-v6/).
+
+## Introduction
+
+The default styling engine of Material UI v6 is [Emotion](https://emotion.sh/docs/introduction). It lets you write styles in a CSS-in-JS fashion, which is great for dynamic styles that depend on states and props. However, it has some performance drawbacks when it comes to frequent re-renders because the style recalculation happens on the client side. It also does not fully support [React Server Components](https://react.dev/reference/rsc/server-components), a new rendering paradigm that renders components ahead of time on the server.
+
+Pigment CSS aims to solve these problems while keeping the same developer experience of writing styles in a CSS-in-JS fashion. It can work alongside Emotion to ease the migration process, but it is recommended to fully migrate to Pigment CSS in the end.
+
+## Supported frameworks
+
+Pigment CSS can be used with one of the following frameworks:
+
+- [Next.js App Router](https://nextjs.org/docs/app/) with Webpack 5 (Turbo is not supported yet)
+- [Vite](https://vitejs.dev/)
+
+## Installation
+
+First, install the adapter package:
+
+<codeblock storageKey="package-manager">
+
+```bash npm
+npm install @mui/material-pigment-css
+```
+
+```bash yarn
+yarn add @mui/material-pigment-css
+```
+
+```bash pnpm
+pnpm add @mui/material-pigment-css
+```
+
+</codeblock>
+
+Then, follow the instructions based on your framework:
+
+### Next.js
+
+Install the Next.js plugin as a dev dependency:
+
+<codeblock storageKey="package-manager">
+
+```bash npm
+npm install --save-dev @pigment-css/nextjs-plugin
+```
+
+```bash yarn
+yarn add -D @pigment-css/nextjs-plugin
+```
+
+```bash pnpm
+pnpm add -D @pigment-css/nextjs-plugin
+```
+
+</codeblock>
+
+Then, open Next.js config file and add the plugin:
+
+<codeblock>
+
+```js next.config.mjs
+import { withPigment } from '@pigment-css/nextjs-plugin';
+
+const nextConfig = {
+  // ...Your nextjs config.
+};
+
+/**
+ * @type {import('@pigment-css/nextjs-plugin').PigmentOptions}
+ */
+const pigmentConfig = {}; // we will refer to this later
+
+export default withPigment(nextConfig, pigmentConfig);
+```
+
+```js next.config.js
+const { withPigment } = require('@pigment-css/nextjs-plugin');
+
+const nextConfig = {
+  // ...Your nextjs config.
+};
+
+/**
+ * @type {import('@pigment-css/nextjs-plugin').PigmentOptions}
+ */
+const pigmentConfig = {}; // we will refer to this later
+
+module.exports = withPigment(nextConfig, pigmentConfig);
+```
+
+</codeblock>
+
+Finally, import the stylesheet at the top of the layout file.
+
+```js title="app/layout.(js|tsx)"
+import '@pigment-css/react/styles.css';
+```
+
+### Vite
+
+Install the Vite plugin as a dev dependency:
+
+<codeblock storageKey="package-manager">
+
+```bash npm
+npm install --save-dev @pigment-css/vite-plugin
+```
+
+```bash yarn
+yarn add -D @pigment-css/vite-plugin
+```
+
+```bash pnpm
+pnpm add -D @pigment-css/vite-plugin
+```
+
+</codeblock>
+
+Next, open vite config file, usually named `vite.config.js`, and add the plugin:
+
+```js
+import { defineConfig } from 'vite';
+import { pigment } from '@pigment-css/vite-plugin';
+
+const pigmentConfig = {}; // we will refer to this later
+
+export default defineConfig({
+  plugins: [
+    pigment(pigmentConfig),
+    // ... Your other plugins.
+  ],
+});
+```
+
+Finally, add the Pigment CSS stylesheet to the top of the main file.
+
+```js title="src/main.(js|tsx)"
+import '@pigment-css/react/styles.css';
+```
+
+## Configuring the theme
+
+Integrating Pigment CSS with Material UI requires you to configure the theme to the plugin.
+Add the following code to your [Next.js](#nextjs) or [Vite](#vite) config file:
+
+```diff
++ import { extendTheme, stringifyTheme } from '@mui/material';
+
++ const customTheme = extendTheme();
++ customTheme.toRuntimeSource = stringifyTheme;
+
++ const pigmentConfig = {
++   theme: customTheme,
++ };
+```
+
+If you don't have a custom theme, you are ready to go. Start a development server by running:
+
+<codeblock storageKey="package-manager">
+
+```bash npm
+npm run dev
+```
+
+```bash yarn
+yarn dev
+```
+
+```bash pnpm
+pnpm dev
+```
+
+</codeblock>
+
+Open the browser and navigate to the localhost URL, you should see the app running with Pigment CSS.
+
+## 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.
+
+If you come from Material UI v5, using Pigment CSS will be a paradigm shift in terms of writing styles.
+Since Pigment CSS is a build-time extraction tool, it does not support dynamic styles that depend on runtime variables. For example, Pigment CSS will throw an error for styles that depend on a state like the one below:
+
+```js
+import Card from '@mui/material/Card';
+
+function App() {
+  const [color, setColor] = useState('#000000');
+  return (
+    <Card
+      sx={{
+        color, // ❌ Pigment CSS cannot extract this style.
+      }}
+    />
+  );
+}
+```
+
+We recommend reading the rest of the guide below to learn about the new styling paradigm and patterns for creating dynamic styles.
+
+## Migrating custom theme
+
+### Removing owner state
+
+Since Pigment CSS is a build-time extraction tool, it does not support owner state through callbacks. Here is an example that will throw an error at build time:
+
+```js
+const theme = extendTheme({
+  components: {
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          color: ({ ownerState }) => ({
+            // ❌ Pigment CSS cannot extract this style.
+            ...(ownerState.variant === 'outlined' && {
+              borderWidth: 3,
+            }),
+          }),
+        },
+      },
+    },
+  },
+});
+```
+
+Run the following codemod to remove the owner state from the theme:
+
+```bash
+npx @mui/codemod@next v6.0.0/theme-v6 next.config.mjs
+```
+
+There are cases where the codemod is not able to remove the owner state. In such cases, you have to manually replace the owner state with `variants`.
+
+#### Dynamic color based on palette
+
+If you have a dynamic color based on the theme palette, you can use the `variants` property to define the styles for each palette.
+
+<codeblock>
+
+```js before
+const theme = extendTheme({
+  components: {
+    MuiCard: {
+      styleOverrides: {
+        root: ({ theme, ownerState }) => ({
+          color: theme.palette[ownerState.palette]?.main,
+        }),
+      },
+    },
+  },
+});
+```
+
+```js after
+const theme = extendTheme({
+  components: {
+    MuiCard: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          variants: [
+            ...Object.entries(theme.palette)
+              .filter(([, palette]) => palette && palette.main)
+              .map(([palette, { main }]) => ({
+                props: { palette },
+                style: {
+                  color: main,
+                },
+              })),
+          ],
+        }),
+      },
+    },
+  },
+});
+```
+
+</codeblock>
+
+### Default props provider
+
+Use `DefaultPropsProvider` in your main application file and move all the component default props to it:
+
+<codeblock>
+
+```diff next.config|vite.config
+ import { extendTheme } from '@mui/material';
+
+ const customTheme = extendTheme({
+   // ...other tokens.
+   components: {
+     MuiButtonBase: {
+-      defaultProps: {
+-        disableRipple: true,
+-      },
+     },
+     MuiSelect: {
+-      defaultProps: {
+-        IconComponent: DropdownIcon,
+-      },
+     }
+   }
+ });
+```
+
+```diff App.tsx
++ import DefaultPropsProvider from '@mui/material/DefaultPropsProvider';
+
+  function App() {
+    return (
++     <DefaultPropsProvider value={{
++       MuiButtonBase: {
++         disableRipple: true,
++       },
++       MuiSelect: {
++         IconComponent: DropdownIcon,
++       },
++     }}>
+        {/* Your app */}
++     </DefaultPropsProvider>
+    );
+  }
+```
+
+</codeblock>
+
+## Migrating dynamic styles
+
+### sx prop
+
+Run the following codemod:
+
+```bash
+npx @mui/codemod@next v6.0.0/sx-prop path/to/folder
+```
+
+The scenarios below are not covered by the codemod, so you have to manually update them:
+
+<!-- Add manual case -->
+
+#### Dynamic values
+
+If a value depends on a variable, you need to move it to a CSS variable inside inline styles.
+
+<codeblock>
+
+```js before
+<div>
+  {items.map((item, index) => (
+    <Box
+      key={index}
+      sx={{
+        borderRadius: '50%',
+        width: `max(${6 - index}px, 3px)`,
+        height: `max(${6 - index}px, 3px)`,
+        bgcolor: index === 0 ? 'primary.solidBg' : 'background.level3',
+      }}
+    />
+  ))}
+</div>
+```
+
+```js after
+<div>
+  {items.map((item, index) => (
+    <Box
+      key={index}
+      sx={{
+        borderRadius: '50%',
+        width: `max(6px - var(--offset), 3px)`,
+        height: `max(6px - var(--offset), 3px)`,
+        bgcolor: index === 0 ? 'primary.solidBg' : 'background.level3',
+      }}
+      style={{
+        '--offset': `${index}px`,
+      }}
+    />
+  ))}
+</div>
+```
+
+</codeblock>
+
+### styled
+
+If you have custom components that are using `styled` from `@mui/material/styles`, change the import source to `@mui/material-pigment-css`:
+
+```diff
+- import { styled } from '@mui/material/styles';
++ import { styled } from '@mui/material-pigment-css';
+```
+
+Then, run the following codemod:
+
+```bash
+npx @mui/codemod@next v6.0.0/styled path/to/folder
+```
+
+The scenarios below are not covered by the codemod, so you have to manually update them:
+
+#### Dynamic styles based on props
+
+If you have dynamic styles based on props, you need to move them to CSS variables. You will need to create a wrapper component to set the inline style with the CSS variables.
+
+<codeblock>
+
+```js before
+const FlashCode = styled('div')(
+  ({ theme, startLine = 0, endLine = startLine, lineHeight = '0.75rem' }) => ({
+    top: `calc(${lineHeight} * 1.5 * ${startLine})`,
+    height: `calc(${lineHeight} * 1.5 * ${endLine - startLine + 1})`,
+    ...theme.typography.caption,
+  }),
+);
+
+export default FlashCode;
+```
+
+```js after
+const FlashCodeRoot = styled('div')(({ theme }) => ({
+  top: `calc(var(--Flashcode-lineHeight) * 1.5 * var(--Flashcode-startLine))`,
+  height: `calc(var(--Flashcode-lineHeight) * 1.5 * (var(--Flashcode-endLine) - var(--Flashcode-startLine) + 1))`,
+  ...theme.typography.caption,
+}));
+
+const FlashCode = React.forwardRef(function FlashCode(props, ref) {
+  const {
+    children,
+    startLine = 0,
+    endLine = startLine,
+    lineHeight = '0.75rem',
+    ...other
+  } = props;
+
+  return (
+    <FlashCodeRoot
+      ref={ref}
+      {...other}
+      style={{
+        '--Flashcode-lineHeight': lineHeight,
+        '--Flashcode-startLine': startLine,
+        '--Flashcode-endLine': endLine,
+        ...other.style,
+      }}
+    >
+      {children}
+    </FlashCodeRoot>
+  );
+});
+
+export default FlashCode;
+```
+
+</codeblock>
+
+## Migrating layout components
+
+To use layout components that are compatible with Pigment CSS, replace the following components with those from the adapter package:
+
+```diff
+- import Container from '@mui/material/Container';
++ import Container from '@mui/material-pigment-css/Container';
+
+- import Grid from '@mui/material/Grid';
++ import Grid from '@mui/material-pigment-css/Grid';
+
+- import Stack from '@mui/material/Stack';
++ import Stack from '@mui/material-pigment-css/Stack';
+
+- import Hidden from '@mui/material/Hidden';
++ import Hidden from '@mui/material-pigment-css/Hidden';
+```
+
+## Migrating Box component
+
+Choose one of the following approaches:
+
+### Continue using Box component
+
+Replace the `Box` component with the one from the adapter package:
+
+```diff
+- import Box from '@mui/material/Box';
++ import Box from '@mui/material-pigment-css/Box';
+```
+
+### Replace Box with HTML element
+
+Pigment CSS can extract the `sx` prop from any JSX element, so there is no need to use the Box component.
+
+```diff
+- import Box from '@mui/material/Box';
+
+ function CustomCard() {
+   return (
+-    <Box sx={{ display: 'flex' }}>
+-      <Box component="img" src="..." sx={{ width: 24, height: 24 }}>
+-      ...
+-    </Box>
++    <div style={{ display: 'flex' }}>
++      <img src="..." style={{ width: 24, height: 24 }}>
++      ...
++    </div>
+   )
+ }
+```
+
+For **TypeScript** users, you need to extend the `HTMLAttributes` interface to support the `sx` prop. Add the following code to a file that is included in your `tsconfig.json`:
+
+```ts
+import type { Theme, SxProps } from '@mui/material/styles';
+
+declare global {
+  namespace React {
+    interface HTMLAttributes<T> {
+      sx?: SxProps<Theme>;
+    }
+  }
+}
+```
diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
index de404b9a6cbcee..afbbdd0571e9a5 100644
--- a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
+++ b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
@@ -347,6 +347,4 @@ This reduces the API surface and lets you define variants in other slots of the
 
 ## Pigment CSS integration (optional)
 
-:::info
-⏳ This section is under construction
-:::
+Check out the [Pigment CSS migration page](/material-ui/migration/migrating-to-pigment-css/) to learn how to integrate it into your project.
diff --git a/docs/data/material/pages.ts b/docs/data/material/pages.ts
index 37711a12ab4cb2..907d10ee47cfac 100644
--- a/docs/data/material/pages.ts
+++ b/docs/data/material/pages.ts
@@ -283,6 +283,10 @@ const pages: MuiPage[] = [
             pathname: '/material-ui/migration/migration-css-theme-variables',
             title: 'Migrating to CSS theme variables',
           },
+          {
+            pathname: '/material-ui/migration/migrating-to-pigment-css',
+            title: 'Migrating to Pigment CSS',
+          },
         ],
       },
       {
diff --git a/docs/pages/material-ui/migration/migrating-to-pigment-css.js b/docs/pages/material-ui/migration/migrating-to-pigment-css.js
new file mode 100644
index 00000000000000..96725a1d9b5e82
--- /dev/null
+++ b/docs/pages/material-ui/migration/migrating-to-pigment-css.js
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import * as pageProps from 'docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md?muiMarkdown';
+
+export default function Page() {
+  return <MarkdownDocs {...pageProps} />;
+}
diff --git a/docs/translations/translations.json b/docs/translations/translations.json
index 20c0fa939afd37..f1dd6c1724591a 100644
--- a/docs/translations/translations.json
+++ b/docs/translations/translations.json
@@ -265,6 +265,7 @@
     "/material-ui/migration/migrating-to-v6": "Migrating to v6: getting started",
     "/material-ui/migration/migrating-from-deprecated-apis": "Migrating from deprecated APIs",
     "/material-ui/migration/migration-css-theme-variables": "Migrating to CSS theme variables",
+    "/material-ui/migration/migrating-to-pigment-css": "Migrating to Pigment CSS",
     "Upgrade to v5": "Upgrade to v5",
     "/material-ui/migration/migration-v4": "Migrating to v5: getting started",
     "/material-ui/migration/v5-style-changes": "Breaking changes: style and theme",

From a3f9cb4e9490bee919882296a7a57ab7c5e24a4a Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Wed, 10 Jul 2024 10:29:30 +0700
Subject: [PATCH 10/23] fix package name

---
 .../migration/migrating-to-v6/migrating-to-pigment-css.md     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md b/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md
index 9f4efc8174375b..cdf81f985a5c42 100644
--- a/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md
+++ b/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md
@@ -98,7 +98,7 @@ module.exports = withPigment(nextConfig, pigmentConfig);
 Finally, import the stylesheet at the top of the layout file.
 
 ```js title="app/layout.(js|tsx)"
-import '@pigment-css/react/styles.css';
+import '@mui/material-pigment-css/styles.css';
 ```
 
 ### Vite
@@ -140,7 +140,7 @@ export default defineConfig({
 Finally, add the Pigment CSS stylesheet to the top of the main file.
 
 ```js title="src/main.(js|tsx)"
-import '@pigment-css/react/styles.css';
+import '@mui/material-pigment-css/styles.css';
 ```
 
 ## Configuring the theme

From 8ab22a1c30e6ae40f6a9054e5a7d51d4d7c77c7a Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijeshb42@gmail.com>
Date: Wed, 10 Jul 2024 09:51:59 +0530
Subject: [PATCH 11/23] Update TS types in app for sx prop

---
 apps/pigment-css-next-app/src/augment.d.ts    | 68 +++++++++++--------
 apps/pigment-css-vite-app/src/augment.ts      | 19 +++++-
 .../src/pages/material-ui/index.tsx           |  1 -
 3 files changed, 57 insertions(+), 31 deletions(-)

diff --git a/apps/pigment-css-next-app/src/augment.d.ts b/apps/pigment-css-next-app/src/augment.d.ts
index 73a6ca903dfda4..62e7bf8f80960c 100644
--- a/apps/pigment-css-next-app/src/augment.d.ts
+++ b/apps/pigment-css-next-app/src/augment.d.ts
@@ -1,34 +1,48 @@
 import type { ExtendTheme } from '@mui/material-pigment-css';
 
+interface ThemeTokens {
+  'max-width': string;
+  'border-radius': string;
+  'font-mono': string;
+  'foreground-rgb': string;
+  'background-start-rgb': string;
+  'background-end-rgb': string;
+  'primary-glow': string;
+  'secondary-glow': string;
+  title: {
+    'start-rgb': string;
+    'end-rgb': string;
+    border: string;
+  };
+  callout: {
+    rgb: string;
+    'border-rgb': string;
+  };
+  card: {
+    rgb: string;
+    'border-rgb': string;
+  };
+}
+
+type CustomTheme = ExtendTheme<{
+  colorScheme: 'light' | 'dark';
+  tokens: ThemeTokens;
+}>;
+
 declare module '@mui/material-pigment-css/theme' {
-  interface ThemeTokens {
-    'max-width': string;
-    'border-radius': string;
-    'font-mono': string;
-    'foreground-rgb': string;
-    'background-start-rgb': string;
-    'background-end-rgb': string;
-    'primary-glow': string;
-    'secondary-glow': string;
-    title: {
-      'start-rgb': string;
-      'end-rgb': string;
-      border: string;
-    };
-    callout: {
-      rgb: string;
-      'border-rgb': string;
-    };
-    card: {
-      rgb: string;
-      'border-rgb': string;
-    };
+  interface ThemeArgs {
+    theme: CustomTheme;
   }
+}
 
-  interface ThemeArgs {
-    theme: ExtendTheme<{
-      colorScheme: 'light' | 'dark';
-      tokens: ThemeTokens;
-    }>;
+declare global {
+  namespace React {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    interface HTMLAttributes<T> {
+      sx?:
+        | React.CSSProperties
+        | ((theme: CustomTheme) => React.CSSProperties)
+        | ReadonlyArray<React.CSSProperties | ((theme: CustomTheme) => React.CSSProperties)>;
+    }
   }
 }
diff --git a/apps/pigment-css-vite-app/src/augment.ts b/apps/pigment-css-vite-app/src/augment.ts
index a0cfd6027b8422..4f2987941f6d5a 100644
--- a/apps/pigment-css-vite-app/src/augment.ts
+++ b/apps/pigment-css-vite-app/src/augment.ts
@@ -1,11 +1,12 @@
 import type { extendTheme } from '@mui/material/styles';
 import '@mui/material-pigment-css';
 
+type CustomTheme = ReturnType<typeof extendTheme> & {
+  applyDarkStyles<T>(obj: T): Record<string, T>;
+};
 declare module '@mui/material-pigment-css/theme' {
   export interface ThemeArgs {
-    theme: ReturnType<typeof extendTheme> & {
-      applyDarkStyles<T>(obj: T): Record<string, T>;
-    };
+    theme: CustomTheme;
   }
 }
 
@@ -17,3 +18,15 @@ declare module '@mui/material' {
     mainChannel: string;
   }
 }
+
+declare global {
+  namespace React {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    interface HTMLAttributes<T> {
+      sx?:
+        | React.CSSProperties
+        | ((theme: CustomTheme) => React.CSSProperties)
+        | ReadonlyArray<React.CSSProperties | ((theme: CustomTheme) => React.CSSProperties)>;
+    }
+  }
+}
diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/index.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/index.tsx
index 128467d5c2addd..148a484483c5a5 100644
--- a/apps/pigment-css-vite-app/src/pages/material-ui/index.tsx
+++ b/apps/pigment-css-vite-app/src/pages/material-ui/index.tsx
@@ -17,7 +17,6 @@ export default function MaterialIndex() {
         <h1>Material UI Components</h1>
         <nav>
           <ul
-            // @ts-ignore
             sx={{
               margin: 0,
               marginBlock: '1rem',

From e6ceaffffac1fb35357cfccaeeee112ad6361489 Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijeshb42@gmail.com>
Date: Wed, 10 Jul 2024 09:52:40 +0530
Subject: [PATCH 12/23] Remove unwanted package name in metadata

---
 packages/mui-material/package.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json
index 567371b577747a..65a85e602eab1b 100644
--- a/packages/mui-material/package.json
+++ b/packages/mui-material/package.json
@@ -113,8 +113,7 @@
         "hoist-non-react-statics",
         "react",
         "react-dom",
-        "@emotion/react",
-        "@emotion/styled"
+        "@emotion/react"
       ]
     }
   }

From a2e16da8d7b982e6b1759e043327138c9b0b4932 Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijeshb42@gmail.com>
Date: Wed, 10 Jul 2024 12:50:49 +0530
Subject: [PATCH 13/23] Update Pigment to latest published version

---
 apps/pigment-css-next-app/package.json        |  2 +-
 apps/pigment-css-vite-app/package.json        |  4 +-
 package.json                                  |  8 +--
 .../mui-material-pigment-css/package.json     |  2 +-
 pnpm-lock.yaml                                | 64 ++++++++-----------
 5 files changed, 34 insertions(+), 46 deletions(-)

diff --git a/apps/pigment-css-next-app/package.json b/apps/pigment-css-next-app/package.json
index afd2334d01f530..369d3e801853d0 100644
--- a/apps/pigment-css-next-app/package.json
+++ b/apps/pigment-css-next-app/package.json
@@ -23,7 +23,7 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@pigment-css/nextjs-plugin": "https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/nextjs-plugin",
+    "@pigment-css/nextjs-plugin": "0.0.17",
     "@types/node": "^20.5.7",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
diff --git a/apps/pigment-css-vite-app/package.json b/apps/pigment-css-vite-app/package.json
index 1da1b18745fbd3..0bbfc9d7a5956e 100644
--- a/apps/pigment-css-vite-app/package.json
+++ b/apps/pigment-css-vite-app/package.json
@@ -9,8 +9,6 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
     "@mui/material-pigment-css": "workspace:^",
     "@mui/utils": "workspace:^",
     "@mui/base": "workspace:^",
@@ -28,7 +26,7 @@
   "devDependencies": {
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@pigment-css/vite-plugin": "https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/vite-plugin",
+    "@pigment-css/vite-plugin": "0.0.17",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
diff --git a/package.json b/package.json
index 191b80910bc051..9dd5fb61ade40a 100644
--- a/package.json
+++ b/package.json
@@ -209,10 +209,10 @@
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "cross-fetch": "^4.0.0",
-    "@pigment-css/react": "https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/react",
-    "@pigment-css/unplugin": "https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/unplugin",
-    "@pigment-css/nextjs-plugin": "https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/nextjs-plugin",
-    "@pigment-css/vite-plugin": "https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/vite-plugin"
+    "@pigment-css/react": "0.0.17",
+    "@pigment-css/unplugin": "0.0.17",
+    "@pigment-css/nextjs-plugin": "0.0.17",
+    "@pigment-css/vite-plugin": "0.0.17"
   },
   "nyc": {
     "include": [
diff --git a/packages/mui-material-pigment-css/package.json b/packages/mui-material-pigment-css/package.json
index f6ca0a3e2f426d..0910c3bcd654b0 100644
--- a/packages/mui-material-pigment-css/package.json
+++ b/packages/mui-material-pigment-css/package.json
@@ -41,7 +41,7 @@
   },
   "dependencies": {
     "@mui/system": "workspace:^",
-    "@pigment-css/react": "https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/react"
+    "@pigment-css/react": "0.0.17"
   },
   "sideEffects": false,
   "publishConfig": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index def7150811ab2a..61fe5f08a85725 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,10 +20,10 @@ overrides:
   '@types/react': 18.3.3
   '@types/react-dom': 18.3.0
   cross-fetch: ^4.0.0
-  '@pigment-css/react': https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/react
-  '@pigment-css/unplugin': https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/unplugin
-  '@pigment-css/nextjs-plugin': https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/nextjs-plugin
-  '@pigment-css/vite-plugin': https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/vite-plugin
+  '@pigment-css/react': 0.0.17
+  '@pigment-css/unplugin': 0.0.17
+  '@pigment-css/nextjs-plugin': 0.0.17
+  '@pigment-css/vite-plugin': 0.0.17
 
 importers:
 
@@ -106,8 +106,8 @@ importers:
         specifier: ^20.1.1
         version: 20.1.1
       '@pigment-css/react':
-        specifier: https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/react
-        version: https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/react(@types/react@18.3.3)(react@18.3.1)
+        specifier: 0.0.17
+        version: 0.0.17(@types/react@18.3.3)(react@18.3.1)
       '@playwright/test':
         specifier: 1.45.1
         version: 1.45.1
@@ -359,8 +359,8 @@ importers:
         version: 18.3.1(react@18.3.1)
     devDependencies:
       '@pigment-css/nextjs-plugin':
-        specifier: https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/nextjs-plugin
-        version: https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/nextjs-plugin(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
+        specifier: 0.0.17
+        version: 0.0.17(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
       '@types/node':
         specifier: ^18.19.39
         version: 18.19.39
@@ -379,12 +379,6 @@ importers:
 
   apps/pigment-css-vite-app:
     dependencies:
-      '@emotion/react':
-        specifier: ^11.11.4
-        version: 11.11.4(@types/react@18.3.3)(react@18.3.1)
-      '@emotion/styled':
-        specifier: ^11.11.5
-        version: 11.11.5(@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
       '@mui/base':
         specifier: workspace:^
         version: link:../../packages/mui-base/build
@@ -432,8 +426,8 @@ importers:
         specifier: ^7.24.7
         version: 7.24.7(@babel/core@7.24.7)
       '@pigment-css/vite-plugin':
-        specifier: https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/vite-plugin
-        version: https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/vite-plugin(@types/react@18.3.3)(react@18.3.1)(vite@5.3.2(@types/node@18.19.39)(terser@5.29.2))
+        specifier: 0.0.17
+        version: 0.0.17(@types/react@18.3.3)(react@18.3.1)(vite@5.3.2(@types/node@18.19.39)(terser@5.29.2))
       '@types/react':
         specifier: 18.3.3
         version: 18.3.3
@@ -1834,8 +1828,8 @@ importers:
         specifier: workspace:^
         version: link:../mui-system/build
       '@pigment-css/react':
-        specifier: https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/react
-        version: https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/react(@types/react@18.3.3)(react@18.3.1)
+        specifier: 0.0.17
+        version: 0.0.17(@types/react@18.3.3)(react@18.3.1)
     publishDirectory: build
 
   packages/mui-private-theming:
@@ -4551,25 +4545,21 @@ packages:
     resolution: {integrity: sha512-I/s6F7yKUDdtMsoBWXJe8Qz40Tui5vsuKCWJEWVL+5q9sSWRzzx6v2KeNsOBEwd94j0eWkpWCH4yB6rZg9Mf0w==}
     engines: {node: '>=8.0.0'}
 
-  '@pigment-css/nextjs-plugin@https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/nextjs-plugin':
-    resolution: {tarball: https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/nextjs-plugin}
-    version: 0.0.16
+  '@pigment-css/nextjs-plugin@0.0.17':
+    resolution: {integrity: sha512-8bnCwjAzJ0eygleO0VGx9/LDPTmGO7kZGK8fDZ6LALy5WJfuT+9hPeqj+6C+9bDpMpIaAEDOhTgyi2CzfolPSg==}
     peerDependencies:
       next: ^12.0.0 || ^13.0.0 || ^14.0.0
 
-  '@pigment-css/react@https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/react':
-    resolution: {tarball: https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/react}
-    version: 0.0.16
+  '@pigment-css/react@0.0.17':
+    resolution: {integrity: sha512-JxniKznqi1taW2X1YWwVYJWwBbHLB2guMQ0cbb1lMSN17Cj8kg1sZgqTjxi33pyb7YWZLo1y/EDybBfAgUKoWA==}
     peerDependencies:
       react: ^17.0.0 || ^18.0.0
 
-  '@pigment-css/unplugin@https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/unplugin':
-    resolution: {tarball: https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/unplugin}
-    version: 0.0.16
+  '@pigment-css/unplugin@0.0.17':
+    resolution: {integrity: sha512-ClbEWkbUSRsje/mswztVTZkgBzzp3wPFRhkbCivpRrZHMRe2B7mqyc+sPePeC4kX0jR9azxnCIEZGbT0gR1NuA==}
 
-  '@pigment-css/vite-plugin@https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/vite-plugin':
-    resolution: {tarball: https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/vite-plugin}
-    version: 0.0.16
+  '@pigment-css/vite-plugin@0.0.17':
+    resolution: {integrity: sha512-IlmX9UpIg+rBFOrFlp/5DifBBNon1zW3CNsRfyc0OrHfZej7re9mEc0dlFQtFCosRl6hexS1EBGRWLACV+997A==}
     peerDependencies:
       vite: ^4.0.0 || ^5.0.0
 
@@ -14872,16 +14862,16 @@ snapshots:
   '@opentelemetry/api@1.8.0':
     optional: true
 
-  '@pigment-css/nextjs-plugin@https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/nextjs-plugin(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
+  '@pigment-css/nextjs-plugin@0.0.17(@types/react@18.3.3)(next@14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@pigment-css/unplugin': https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/unplugin(@types/react@18.3.3)(react@18.3.1)
+      '@pigment-css/unplugin': 0.0.17(@types/react@18.3.3)(react@18.3.1)
       next: 14.2.4(@babel/core@7.24.7)(@opentelemetry/api@1.8.0)(@playwright/test@1.45.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
     transitivePeerDependencies:
       - '@types/react'
       - react
       - supports-color
 
-  '@pigment-css/react@https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/react(@types/react@18.3.3)(react@18.3.1)':
+  '@pigment-css/react@0.0.17(@types/react@18.3.3)(react@18.3.1)':
     dependencies:
       '@babel/core': 7.24.7
       '@babel/helper-module-imports': 7.24.7
@@ -14909,10 +14899,10 @@ snapshots:
       - '@types/react'
       - supports-color
 
-  '@pigment-css/unplugin@https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/unplugin(@types/react@18.3.3)(react@18.3.1)':
+  '@pigment-css/unplugin@0.0.17(@types/react@18.3.3)(react@18.3.1)':
     dependencies:
       '@babel/core': 7.24.7
-      '@pigment-css/react': https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/react(@types/react@18.3.3)(react@18.3.1)
+      '@pigment-css/react': 0.0.17(@types/react@18.3.3)(react@18.3.1)
       '@wyw-in-js/shared': 0.5.3
       '@wyw-in-js/transform': 0.5.3
       babel-plugin-define-var: 0.1.0
@@ -14922,11 +14912,11 @@ snapshots:
       - react
       - supports-color
 
-  '@pigment-css/vite-plugin@https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/vite-plugin(@types/react@18.3.3)(react@18.3.1)(vite@5.3.2(@types/node@18.19.39)(terser@5.29.2))':
+  '@pigment-css/vite-plugin@0.0.17(@types/react@18.3.3)(react@18.3.1)(vite@5.3.2(@types/node@18.19.39)(terser@5.29.2))':
     dependencies:
       '@babel/core': 7.24.7
       '@babel/preset-typescript': 7.24.7(@babel/core@7.24.7)
-      '@pigment-css/react': https://pkg.csb.dev/mui/pigment-css/commit/e96284a9/@pigment-css/react(@types/react@18.3.3)(react@18.3.1)
+      '@pigment-css/react': 0.0.17(@types/react@18.3.3)(react@18.3.1)
       '@wyw-in-js/shared': 0.5.3
       '@wyw-in-js/transform': 0.5.3
       babel-plugin-define-var: 0.1.0

From 9688bf51872d376c052d91ab233ff4884a827748 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Wed, 10 Jul 2024 15:28:28 +0700
Subject: [PATCH 14/23] follow naming convention

---
 .../src/Box/{MaterialPigmentBox.ts => Box.ts}                   | 0
 packages/mui-material-pigment-css/src/Box/index.ts              | 2 +-
 .../src/Container/{MaterialPigmentContainer.ts => Container.ts} | 0
 packages/mui-material-pigment-css/src/Container/index.ts        | 2 +-
 .../src/Grid/{MaterialPigmentGrid.ts => Grid.ts}                | 0
 packages/mui-material-pigment-css/src/Grid/index.ts             | 2 +-
 .../src/Hidden/{MaterialPigmentHidden.ts => Hidden.ts}          | 0
 packages/mui-material-pigment-css/src/Hidden/index.ts           | 2 +-
 .../{MaterialPigmentRtlProvider.ts => RtlProvider.ts}           | 0
 packages/mui-material-pigment-css/src/RtlProvider/index.ts      | 2 +-
 .../src/Stack/{MaterialPigmentStack.ts => Stack.ts}             | 0
 packages/mui-material-pigment-css/src/Stack/index.ts            | 2 +-
 12 files changed, 6 insertions(+), 6 deletions(-)
 rename packages/mui-material-pigment-css/src/Box/{MaterialPigmentBox.ts => Box.ts} (100%)
 rename packages/mui-material-pigment-css/src/Container/{MaterialPigmentContainer.ts => Container.ts} (100%)
 rename packages/mui-material-pigment-css/src/Grid/{MaterialPigmentGrid.ts => Grid.ts} (100%)
 rename packages/mui-material-pigment-css/src/Hidden/{MaterialPigmentHidden.ts => Hidden.ts} (100%)
 rename packages/mui-material-pigment-css/src/RtlProvider/{MaterialPigmentRtlProvider.ts => RtlProvider.ts} (100%)
 rename packages/mui-material-pigment-css/src/Stack/{MaterialPigmentStack.ts => Stack.ts} (100%)

diff --git a/packages/mui-material-pigment-css/src/Box/MaterialPigmentBox.ts b/packages/mui-material-pigment-css/src/Box/Box.ts
similarity index 100%
rename from packages/mui-material-pigment-css/src/Box/MaterialPigmentBox.ts
rename to packages/mui-material-pigment-css/src/Box/Box.ts
diff --git a/packages/mui-material-pigment-css/src/Box/index.ts b/packages/mui-material-pigment-css/src/Box/index.ts
index 588cbfc6ad104c..a3e93ac53516a6 100644
--- a/packages/mui-material-pigment-css/src/Box/index.ts
+++ b/packages/mui-material-pigment-css/src/Box/index.ts
@@ -1 +1 @@
-export { default } from './MaterialPigmentBox';
+export { default } from './Box';
diff --git a/packages/mui-material-pigment-css/src/Container/MaterialPigmentContainer.ts b/packages/mui-material-pigment-css/src/Container/Container.ts
similarity index 100%
rename from packages/mui-material-pigment-css/src/Container/MaterialPigmentContainer.ts
rename to packages/mui-material-pigment-css/src/Container/Container.ts
diff --git a/packages/mui-material-pigment-css/src/Container/index.ts b/packages/mui-material-pigment-css/src/Container/index.ts
index bb6c4c3cfdc56c..a147b67a64f42c 100644
--- a/packages/mui-material-pigment-css/src/Container/index.ts
+++ b/packages/mui-material-pigment-css/src/Container/index.ts
@@ -1 +1 @@
-export { default } from './MaterialPigmentContainer';
+export { default } from './Container';
diff --git a/packages/mui-material-pigment-css/src/Grid/MaterialPigmentGrid.ts b/packages/mui-material-pigment-css/src/Grid/Grid.ts
similarity index 100%
rename from packages/mui-material-pigment-css/src/Grid/MaterialPigmentGrid.ts
rename to packages/mui-material-pigment-css/src/Grid/Grid.ts
diff --git a/packages/mui-material-pigment-css/src/Grid/index.ts b/packages/mui-material-pigment-css/src/Grid/index.ts
index 54c890c4d77f07..3d919c9acb4394 100644
--- a/packages/mui-material-pigment-css/src/Grid/index.ts
+++ b/packages/mui-material-pigment-css/src/Grid/index.ts
@@ -1 +1 @@
-export { default } from './MaterialPigmentGrid';
+export { default } from './Grid';
diff --git a/packages/mui-material-pigment-css/src/Hidden/MaterialPigmentHidden.ts b/packages/mui-material-pigment-css/src/Hidden/Hidden.ts
similarity index 100%
rename from packages/mui-material-pigment-css/src/Hidden/MaterialPigmentHidden.ts
rename to packages/mui-material-pigment-css/src/Hidden/Hidden.ts
diff --git a/packages/mui-material-pigment-css/src/Hidden/index.ts b/packages/mui-material-pigment-css/src/Hidden/index.ts
index f88dc388a18bd2..b786254d40f3d3 100644
--- a/packages/mui-material-pigment-css/src/Hidden/index.ts
+++ b/packages/mui-material-pigment-css/src/Hidden/index.ts
@@ -1 +1 @@
-export { default } from './MaterialPigmentHidden';
+export { default } from './Hidden';
diff --git a/packages/mui-material-pigment-css/src/RtlProvider/MaterialPigmentRtlProvider.ts b/packages/mui-material-pigment-css/src/RtlProvider/RtlProvider.ts
similarity index 100%
rename from packages/mui-material-pigment-css/src/RtlProvider/MaterialPigmentRtlProvider.ts
rename to packages/mui-material-pigment-css/src/RtlProvider/RtlProvider.ts
diff --git a/packages/mui-material-pigment-css/src/RtlProvider/index.ts b/packages/mui-material-pigment-css/src/RtlProvider/index.ts
index eb7a4569724bc2..7a7b9546cf906f 100644
--- a/packages/mui-material-pigment-css/src/RtlProvider/index.ts
+++ b/packages/mui-material-pigment-css/src/RtlProvider/index.ts
@@ -1 +1 @@
-export * from './MaterialPigmentRtlProvider';
+export * from './RtlProvider';
diff --git a/packages/mui-material-pigment-css/src/Stack/MaterialPigmentStack.ts b/packages/mui-material-pigment-css/src/Stack/Stack.ts
similarity index 100%
rename from packages/mui-material-pigment-css/src/Stack/MaterialPigmentStack.ts
rename to packages/mui-material-pigment-css/src/Stack/Stack.ts
diff --git a/packages/mui-material-pigment-css/src/Stack/index.ts b/packages/mui-material-pigment-css/src/Stack/index.ts
index e703b1b73e8fe1..129ee566c9f837 100644
--- a/packages/mui-material-pigment-css/src/Stack/index.ts
+++ b/packages/mui-material-pigment-css/src/Stack/index.ts
@@ -1 +1 @@
-export { default } from './MaterialPigmentStack';
+export { default } from './Stack';

From 4c96f59a817770e750d6e02f96894c96841dd1ce Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Wed, 10 Jul 2024 15:31:32 +0700
Subject: [PATCH 15/23] add toRuntimeSource to extendTheme

---
 apps/pigment-css-next-app/next.config.js                     | 3 +--
 apps/pigment-css-vite-app/vite.config.ts                     | 4 +---
 .../migration/migrating-to-v6/migrating-to-pigment-css.md    | 5 +----
 packages/mui-material/src/styles/extendTheme.js              | 2 ++
 4 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/apps/pigment-css-next-app/next.config.js b/apps/pigment-css-next-app/next.config.js
index c89553ec65d92d..6f71bd85cbf8fe 100644
--- a/apps/pigment-css-next-app/next.config.js
+++ b/apps/pigment-css-next-app/next.config.js
@@ -1,7 +1,7 @@
 /* eslint-env node */
 // eslint-ignore-next-line import/no-unresolved
 const { withPigment } = require('@pigment-css/nextjs-plugin');
-const { extendTheme, stringifyTheme } = require('@mui/material/styles');
+const { extendTheme } = require('@mui/material/styles');
 
 /**
  * @typedef {import('@pigment-css/nextjs-plugin').PigmentOptions} PigmentOptions
@@ -95,7 +95,6 @@ const theme = extendTheme({
 theme.getColorSchemeSelector = (colorScheme) => {
   return `@media (prefers-color-scheme: ${colorScheme})`;
 };
-theme.toRuntimeSource = stringifyTheme;
 
 /**
  * @type {PigmentOptions}
diff --git a/apps/pigment-css-vite-app/vite.config.ts b/apps/pigment-css-vite-app/vite.config.ts
index 5a9f05fff40f85..4b00635a94362b 100644
--- a/apps/pigment-css-vite-app/vite.config.ts
+++ b/apps/pigment-css-vite-app/vite.config.ts
@@ -2,7 +2,7 @@ import { defineConfig, splitVendorChunkPlugin } from 'vite';
 import reactPlugin from '@vitejs/plugin-react';
 import Pages from 'vite-plugin-pages';
 import { pigment } from '@pigment-css/vite-plugin';
-import { extendTheme, stringifyTheme } from '@mui/material/styles';
+import { extendTheme } from '@mui/material/styles';
 
 const theme = extendTheme({
   getSelector: function getSelector(colorScheme, css) {
@@ -19,8 +19,6 @@ const theme = extendTheme({
 theme.getColorSchemeSelector = (colorScheme) => {
   return `@media (prefers-color-scheme: ${colorScheme})`;
 };
-// @ts-ignore
-theme.toRuntimeSource = stringifyTheme;
 
 export default defineConfig({
   plugins: [
diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md b/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md
index cdf81f985a5c42..c0fceb0c2a5eb5 100644
--- a/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md
+++ b/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md
@@ -151,11 +151,8 @@ Add the following code to your [Next.js](#nextjs) or [Vite](#vite) config file:
 ```diff
 + import { extendTheme, stringifyTheme } from '@mui/material';
 
-+ const customTheme = extendTheme();
-+ customTheme.toRuntimeSource = stringifyTheme;
-
 + const pigmentConfig = {
-+   theme: customTheme,
++   theme: extendTheme(),
 + };
 ```
 
diff --git a/packages/mui-material/src/styles/extendTheme.js b/packages/mui-material/src/styles/extendTheme.js
index 8dea1c19f7ef61..8d73518104d592 100644
--- a/packages/mui-material/src/styles/extendTheme.js
+++ b/packages/mui-material/src/styles/extendTheme.js
@@ -19,6 +19,7 @@ import defaultShouldSkipGeneratingVar from './shouldSkipGeneratingVar';
 import createThemeWithoutVars from './createTheme';
 import getOverlayAlpha from './getOverlayAlpha';
 import defaultGetSelector from './createGetSelector';
+import stringifyTheme from './stringifyTheme';
 
 const defaultDarkOverlays = [...Array(25)].map((_, index) => {
   if (index === 0) {
@@ -447,6 +448,7 @@ export default function extendTheme(options = {}, ...args) {
       theme: this,
     });
   };
+  theme.toRuntimeSource = stringifyTheme; // for Pigment CSS integration
 
   return theme;
 }

From 723668cc5e2f1265364f269a019bebffb83ba1c7 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Wed, 10 Jul 2024 15:36:20 +0700
Subject: [PATCH 16/23] update content

---
 .../migrating-to-pigment-css.md               | 29 ++++++++++++++++---
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md b/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md
index c0fceb0c2a5eb5..d10d0a8dbba3ed 100644
--- a/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md
+++ b/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md
@@ -97,8 +97,21 @@ module.exports = withPigment(nextConfig, pigmentConfig);
 
 Finally, import the stylesheet at the top of the layout file.
 
-```js title="app/layout.(js|tsx)"
-import '@mui/material-pigment-css/styles.css';
+```diff title="app/layout.(js|tsx)"
+ import type { Metadata } from 'next';
+ import { Inter } from 'next/font/google';
+
++ import '@mui/material-pigment-css/styles.css';
+
+ export default function RootLayout(props) {
+   return (
+     <html lang="en">
+       <body className={`${inter.className}`}>
+         {props.children}
+       </body>
+     </html>
+   );
+ }
 ```
 
 ### Vite
@@ -139,8 +152,16 @@ export default defineConfig({
 
 Finally, add the Pigment CSS stylesheet to the top of the main file.
 
-```js title="src/main.(js|tsx)"
-import '@mui/material-pigment-css/styles.css';
+```diff title="src/main.(js|tsx)"
+ import * as React from 'react';
++ import '@mui/material-pigment-css/styles.css';
+ import App from './App';
+
+ ReactDOM.createRoot(document.getElementById('root')).render(
+   <React.StrictMode>
+     <App />
+   </React.StrictMode>,
+ );
 ```
 
 ## Configuring the theme

From d46ce789a40ab49aff81004f91bc2f81c364d88f Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijeshb42@gmail.com>
Date: Wed, 10 Jul 2024 14:40:46 +0530
Subject: [PATCH 17/23] Fix export

---
 packages/mui-material/src/styles/stringifyTheme.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mui-material/src/styles/stringifyTheme.ts b/packages/mui-material/src/styles/stringifyTheme.ts
index 1b56359482fa3d..f4a64269af7f9b 100644
--- a/packages/mui-material/src/styles/stringifyTheme.ts
+++ b/packages/mui-material/src/styles/stringifyTheme.ts
@@ -31,7 +31,7 @@ function isSerializable(val: any) {
  * });
  * ```
  */
-export function stringifyTheme(baseTheme: Record<string, any> = {}) {
+export default function stringifyTheme(baseTheme: Record<string, any> = {}) {
   const serializableTheme: Record<string, any> = { ...baseTheme };
 
   function serializeTheme(object: Record<string, any>) {

From 2052eecaa3c6cefa412050a5a5ca293d656926fe Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijeshb42@gmail.com>
Date: Wed, 10 Jul 2024 14:47:18 +0530
Subject: [PATCH 18/23] Change module resolution to bundler

---
 apps/pigment-css-vite-app/src/augment.ts        | 6 +++---
 packages/mui-material-pigment-css/tsconfig.json | 3 +--
 packages/mui-material/tsconfig.build.json       | 4 +---
 packages/mui-material/tsconfig.json             | 3 +++
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/pigment-css-vite-app/src/augment.ts b/apps/pigment-css-vite-app/src/augment.ts
index 4f2987941f6d5a..6b26bb3b5bd5d9 100644
--- a/apps/pigment-css-vite-app/src/augment.ts
+++ b/apps/pigment-css-vite-app/src/augment.ts
@@ -1,11 +1,11 @@
 import type { extendTheme } from '@mui/material/styles';
-import '@mui/material-pigment-css';
+import '@pigment-css/react/theme';
 
 type CustomTheme = ReturnType<typeof extendTheme> & {
   applyDarkStyles<T>(obj: T): Record<string, T>;
 };
-declare module '@mui/material-pigment-css/theme' {
-  export interface ThemeArgs {
+declare module '@pigment-css/react/theme' {
+  interface ThemeArgs {
     theme: CustomTheme;
   }
 }
diff --git a/packages/mui-material-pigment-css/tsconfig.json b/packages/mui-material-pigment-css/tsconfig.json
index 8c3fdb3a1a701f..2fe6f82794abb7 100644
--- a/packages/mui-material-pigment-css/tsconfig.json
+++ b/packages/mui-material-pigment-css/tsconfig.json
@@ -1,8 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext"
+    "moduleResolution": "Bundler"
   },
   "include": ["src/**/*", "test/**/*"]
 }
diff --git a/packages/mui-material/tsconfig.build.json b/packages/mui-material/tsconfig.build.json
index 423ff69a10d7be..92aea03c9be6b9 100644
--- a/packages/mui-material/tsconfig.build.json
+++ b/packages/mui-material/tsconfig.build.json
@@ -8,9 +8,7 @@
     "noEmit": false,
     "emitDeclarationOnly": true,
     "outDir": "build",
-    "rootDir": "./src",
-    "moduleResolution": "Node16",
-    "module": "Node16"
+    "rootDir": "./src"
   },
   "include": ["./src/**/*.ts*"],
   "exclude": ["src/**/*.spec.ts*", "src/**/*.test.ts*"],
diff --git a/packages/mui-material/tsconfig.json b/packages/mui-material/tsconfig.json
index cb183f93333562..2ff522dab0f21f 100644
--- a/packages/mui-material/tsconfig.json
+++ b/packages/mui-material/tsconfig.json
@@ -1,5 +1,8 @@
 {
   "extends": "../../tsconfig.json",
   "include": ["src/**/*", "test/**/*"],
+  "compilerOptions": {
+    "moduleResolution": "Bundler"
+  },
   "exclude": ["test/typescript/moduleAugmentation", "src/types/OverridableComponentAugmentation.ts"]
 }

From 973ff452e973a9b2bfa626017ba2f69ef977ac3c Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Wed, 10 Jul 2024 16:27:10 +0700
Subject: [PATCH 19/23] fix non-breaking space

---
 .../migrating-to-pigment-css.md               | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md b/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md
index d10d0a8dbba3ed..cf60e30b00747b 100644
--- a/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md
+++ b/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md
@@ -1,18 +1,18 @@
 # Migrating to Pigment CSS
 
-<p class="description">This guide helps you integrate Pigment CSS with Material UI v6.</p>
+<p class="description">This guide helps you integrate Pigment CSS with Material UI v6.</p>
 
 Before going through this guide, make sure you have [migrated to Material UI v6](/material-ui/migration/migrating-to-v6/).
 
 ## Introduction
 
-The default styling engine of Material UI v6 is [Emotion](https://emotion.sh/docs/introduction). It lets you write styles in a CSS-in-JS fashion, which is great for dynamic styles that depend on states and props. However, it has some performance drawbacks when it comes to frequent re-renders because the style recalculation happens on the client side. It also does not fully support [React Server Components](https://react.dev/reference/rsc/server-components), a new rendering paradigm that renders components ahead of time on the server.
+The default styling engine of Material UI v6 is [Emotion](https://emotion.sh/docs/introduction). It lets you write styles in a CSS-in-JS fashion, which is great for dynamic styles that depend on states and props. However, it has some performance drawbacks when it comes to frequent re-renders because the style recalculation happens on the client side. It also does not fully support [React Server Components](https://react.dev/reference/rsc/server-components), a new rendering paradigm that renders components ahead of time on the server.
 
-Pigment CSS aims to solve these problems while keeping the same developer experience of writing styles in a CSS-in-JS fashion. It can work alongside Emotion to ease the migration process, but it is recommended to fully migrate to Pigment CSS in the end.
+Pigment CSS aims to solve these problems while keeping the same developer experience of writing styles in a CSS-in-JS fashion. It can work alongside Emotion to ease the migration process, but it is recommended to fully migrate to Pigment CSS in the end.
 
 ## Supported frameworks
 
-Pigment CSS can be used with one of the following frameworks:
+Pigment CSS can be used with one of the following frameworks:
 
 - [Next.js App Router](https://nextjs.org/docs/app/) with Webpack 5 (Turbo is not supported yet)
 - [Vite](https://vitejs.dev/)
@@ -150,7 +150,7 @@ export default defineConfig({
 });
 ```
 
-Finally, add the Pigment CSS stylesheet to the top of the main file.
+Finally, add the Pigment CSS stylesheet to the top of the main file.
 
 ```diff title="src/main.(js|tsx)"
  import * as React from 'react';
@@ -166,7 +166,7 @@ Finally, add the Pigment CSS stylesheet to the top of the main file.
 
 ## Configuring the theme
 
-Integrating Pigment CSS with Material UI requires you to configure the theme to the plugin.
+Integrating Pigment CSS with Material UI requires you to configure the theme to the plugin.
 Add the following code to your [Next.js](#nextjs) or [Vite](#vite) config file:
 
 ```diff
@@ -195,14 +195,14 @@ pnpm dev
 
 </codeblock>
 
-Open the browser and navigate to the localhost URL, you should see the app running with Pigment CSS.
+Open the browser and navigate to the localhost URL, you should see the app running with Pigment CSS.
 
 ## 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.
+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.
 
-If you come from Material UI v5, using Pigment CSS will be a paradigm shift in terms of writing styles.
-Since Pigment CSS is a build-time extraction tool, it does not support dynamic styles that depend on runtime variables. For example, Pigment CSS will throw an error for styles that depend on a state like the one below:
+If you come from Material UI v5, using Pigment CSS will be a paradigm shift in terms of writing styles.
+Since Pigment CSS is a build-time extraction tool, it does not support dynamic styles that depend on runtime variables. For example, Pigment CSS will throw an error for styles that depend on a state like the one below:
 
 ```js
 import Card from '@mui/material/Card';
@@ -212,7 +212,7 @@ function App() {
   return (
     <Card
       sx={{
-        color, // ❌ Pigment CSS cannot extract this style.
+        color, // ❌ Pigment CSS cannot extract this style.
       }}
     />
   );
@@ -225,7 +225,7 @@ We recommend reading the rest of the guide below to learn about the new styling
 
 ### Removing owner state
 
-Since Pigment CSS is a build-time extraction tool, it does not support owner state through callbacks. Here is an example that will throw an error at build time:
+Since Pigment CSS is a build-time extraction tool, it does not support owner state through callbacks. Here is an example that will throw an error at build time:
 
 ```js
 const theme = extendTheme({
@@ -477,7 +477,7 @@ export default FlashCode;
 
 ## Migrating layout components
 
-To use layout components that are compatible with Pigment CSS, replace the following components with those from the adapter package:
+To use layout components that are compatible with Pigment CSS, replace the following components with those from the adapter package:
 
 ```diff
 - import Container from '@mui/material/Container';
@@ -508,7 +508,7 @@ Replace the `Box` component with the one from the adapter package:
 
 ### Replace Box with HTML element
 
-Pigment CSS can extract the `sx` prop from any JSX element, so there is no need to use the Box component.
+Pigment CSS can extract the `sx` prop from any JSX element, so there is no need to use the Box component.
 
 ```diff
 - import Box from '@mui/material/Box';

From 475621cc999ce20783d9995a371cf9dbe8773086 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Wed, 10 Jul 2024 17:19:01 +0700
Subject: [PATCH 20/23] update content

---
 .../migrating-to-pigment-css.md               | 122 +++++++++++++++++-
 1 file changed, 116 insertions(+), 6 deletions(-)

diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md b/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md
index cf60e30b00747b..6a785b6728f9d2 100644
--- a/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md
+++ b/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md
@@ -6,9 +6,10 @@ Before going through this guide, make sure you have [migrated to Material UI v6
 
 ## Introduction
 
-The default styling engine of Material UI v6 is [Emotion](https://emotion.sh/docs/introduction). It lets you write styles in a CSS-in-JS fashion, which is great for dynamic styles that depend on states and props. However, it has some performance drawbacks when it comes to frequent re-renders because the style recalculation happens on the client side. It also does not fully support [React Server Components](https://react.dev/reference/rsc/server-components), a new rendering paradigm that renders components ahead of time on the server.
+The default styling engine of Material UI v6 is [Emotion](https://emotion.sh/docs/introduction). It lets you write styles in a CSS-in-JS fashion, which is great for dynamic styles that depend on states and props. However, it has some performance drawbacks when it comes to frequent re-renders because the style recalculation happens on the client-side. It also does not fully support [React Server Components](https://react.dev/reference/rsc/server-components), a new rendering paradigm that renders components ahead of time on the server.
 
-Pigment CSS aims to solve these problems while keeping the same developer experience of writing styles in a CSS-in-JS fashion. It can work alongside Emotion to ease the migration process, but it is recommended to fully migrate to Pigment CSS in the end.
+Pigment CSS aims to solve these problems while keeping the same developer experience of writing styles in a CSS-in-JS fashion.
+It can work alongside Emotion to ease the migration process, but it is recommended to fully migrate to Pigment CSS in the end.
 
 ## Supported frameworks
 
@@ -19,7 +20,7 @@ Pigment CSS can be used with one of the following frameworks:
 
 ## Installation
 
-First, install the adapter package:
+First, install the Material UI wrapper package for Pigment CSS:
 
 <codeblock storageKey="package-manager">
 
@@ -202,7 +203,8 @@ Open the browser and navigate to the localhost URL, you should see the app runni
 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.
 
 If you come from Material UI v5, using Pigment CSS will be a paradigm shift in terms of writing styles.
-Since Pigment CSS is a build-time extraction tool, it does not support dynamic styles that depend on runtime variables. For example, Pigment CSS will throw an error for styles that depend on a state like the one below:
+Since Pigment CSS is a build-time extraction tool, it does not support dynamic styles that depend on runtime variables.
+For example, Pigment CSS will throw an error for styles that depend on a state like the one below:
 
 ```js
 import Card from '@mui/material/Card';
@@ -403,6 +405,30 @@ If a value depends on a variable, you need to move it to a CSS variable inside i
 
 </codeblock>
 
+#### Custom components
+
+With Pigment CSS, any JSX element can accept the `sx` prop so it is **no** longer needed to pass down the `sx` prop to Material UI components.
+
+```diff
+ import ButtonBase from '@mui/material/ButtonBase';
+
+ function ActiveButton({ sx, ...props }) {
+   return (
+     <ButtonBase
+       sx={[
+         {
+           '&:active': {
+             opacity: 0.5,
+           },
+         },
+-        ...Array.isArray(sx) ? sx : [sx],
+       ]}
+       {...props}
+     />
+   );
+ }
+```
+
 ### styled
 
 If you have custom components that are using `styled` from `@mui/material/styles`, change the import source to `@mui/material-pigment-css`:
@@ -493,11 +519,16 @@ To use layout components that are compatible with Pigment CSS, replace the foll
 + import Hidden from '@mui/material-pigment-css/Hidden';
 ```
 
+:::info
+`Grid` component from `@mui/material-pigment-css/Grid` has a different behavior compared to the default `Grid` component.
+It uses CSS `gap` instead of `margin` for spacing between items.
+:::
+
 ## Migrating Box component
 
 Choose one of the following approaches:
 
-### Continue using Box component
+### Continue using Box
 
 Replace the `Box` component with the one from the adapter package:
 
@@ -506,7 +537,7 @@ Replace the `Box` component with the one from the adapter package:
 + import Box from '@mui/material-pigment-css/Box';
 ```
 
-### Replace Box with HTML element
+### Use HTML element
 
 Pigment CSS can extract the `sx` prop from any JSX element, so there is no need to use the Box component.
 
@@ -540,3 +571,82 @@ declare global {
   }
 }
 ```
+
+## Migrate useTheme hook
+
+If you are using the `useTheme` hook, replace the import source:
+
+```diff
+- import { useTheme } from '@mui/material/styles';
++ import { useTheme } from '@mui/material-pigment-css';
+```
+
+:::info
+For Next.js App Router, `useTheme` hook only works with React Client Components.
+You need to add `'use client'` directive to the component that uses the hook.
+:::
+
+## Right-to-left support
+
+Update the config file with the following code to enable right-to-left support:
+
+```diff
+ const pigmentConfig = {
+   theme: extendTheme(),
++  css: {
++    // Specify your default CSS authoring direction
++    defaultDirection: 'ltr',
++    // Generate CSS for the opposite of the `defaultDirection`
++    // This is set to `false` by default
++    generateForBothDir: true,
++  },
+ }
+```
+
+### Migrating from theme direction
+
+If you are using the `theme.direction` in your component, wrap your application with `RtlProvider` and use the `useRtl` hook to get the direction instead:
+
+<codeblock>
+
+```diff app.tsx
++ import RtlProvider from '@mui/material-pigment-css/RtlProvider';
+
+ function App() {
++  const [rtl, setRtl] = React.useState(false);
+   return (
++    <RtlProvider value={rtl}>
+       {/* Your app */}
++    </RtlProvider>
+   )
+ }
+```
+
+```diff component.tsx
+- import { useTheme } from '@mui/material/styles';
++ import { useRtl } from '@mui/material-pigment-css/RtlProvider';
+
+ function App() {
+-  const theme = useTheme();
++  const isRtl = useRtl();
+
+   return (
+     <Box sx={{ display: 'flex', alignItems: 'center', pl: 1, pb: 1 }}>
+       <IconButton aria-label="previous">
+-        {theme.direction === 'rtl' ? <SkipNextIcon /> : <SkipPreviousIcon />}
++        {isRtl ? <SkipNextIcon /> : <SkipPreviousIcon />}
+       </IconButton>
+       <IconButton aria-label="play/pause">
+         <PlayArrowIcon sx={{ height: 38, width: 38 }} />
+       </IconButton>
+       <IconButton aria-label="next">
+-        {theme.direction === 'rtl' ? <SkipPreviousIcon /> : <SkipNextIcon />}
++        {isRtl ? <SkipPreviousIcon /> : <SkipNextIcon />}
+       </IconButton>
+     </Box>
+   );
+ }
+
+```
+
+</codeblock>

From bb385589c1292242c6275ee2e9dd621e79563d34 Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijeshb42@gmail.com>
Date: Wed, 10 Jul 2024 16:18:05 +0530
Subject: [PATCH 21/23] Convert stringifyTheme to named export

---
 packages/mui-material/src/styles/extendTheme.js    | 2 +-
 packages/mui-material/src/styles/stringifyTheme.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mui-material/src/styles/extendTheme.js b/packages/mui-material/src/styles/extendTheme.js
index 8d73518104d592..96511b8d9a6d9a 100644
--- a/packages/mui-material/src/styles/extendTheme.js
+++ b/packages/mui-material/src/styles/extendTheme.js
@@ -19,7 +19,7 @@ import defaultShouldSkipGeneratingVar from './shouldSkipGeneratingVar';
 import createThemeWithoutVars from './createTheme';
 import getOverlayAlpha from './getOverlayAlpha';
 import defaultGetSelector from './createGetSelector';
-import stringifyTheme from './stringifyTheme';
+import { stringifyTheme } from './stringifyTheme';
 
 const defaultDarkOverlays = [...Array(25)].map((_, index) => {
   if (index === 0) {
diff --git a/packages/mui-material/src/styles/stringifyTheme.ts b/packages/mui-material/src/styles/stringifyTheme.ts
index f4a64269af7f9b..1b56359482fa3d 100644
--- a/packages/mui-material/src/styles/stringifyTheme.ts
+++ b/packages/mui-material/src/styles/stringifyTheme.ts
@@ -31,7 +31,7 @@ function isSerializable(val: any) {
  * });
  * ```
  */
-export default function stringifyTheme(baseTheme: Record<string, any> = {}) {
+export function stringifyTheme(baseTheme: Record<string, any> = {}) {
   const serializableTheme: Record<string, any> = { ...baseTheme };
 
   function serializeTheme(object: Record<string, any>) {

From 71f0e588c23f446842b49249fe8ea0c4b2c6c0c4 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Wed, 10 Jul 2024 17:54:35 +0700
Subject: [PATCH 22/23] remove stringify export

---
 packages/mui-material/src/styles/index.d.ts | 2 --
 packages/mui-material/src/styles/index.js   | 2 --
 2 files changed, 4 deletions(-)

diff --git a/packages/mui-material/src/styles/index.d.ts b/packages/mui-material/src/styles/index.d.ts
index 41de04ee482916..ebbe6ab89a9e76 100644
--- a/packages/mui-material/src/styles/index.d.ts
+++ b/packages/mui-material/src/styles/index.d.ts
@@ -101,8 +101,6 @@ export * from './CssVarsProvider';
 
 export { default as extendTheme } from './extendTheme';
 
-export * from './stringifyTheme';
-
 export type {
   ColorSchemeOverrides,
   SupportedColorScheme,
diff --git a/packages/mui-material/src/styles/index.js b/packages/mui-material/src/styles/index.js
index 1ec3a951a0aeff..a6169843ff0c62 100644
--- a/packages/mui-material/src/styles/index.js
+++ b/packages/mui-material/src/styles/index.js
@@ -50,8 +50,6 @@ export { default as experimental_extendTheme } from './experimental_extendTheme'
 export { default as getOverlayAlpha } from './getOverlayAlpha';
 export { default as shouldSkipGeneratingVar } from './shouldSkipGeneratingVar';
 
-export * from './stringifyTheme';
-
 // Private methods for creating parts of the theme
 export { default as private_createTypography } from './createTypography';
 export { default as private_createMixins } from './createMixins';

From 4cf738302c4d272c8dc5804a62295bfed49a0553 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Wed, 10 Jul 2024 19:06:35 +0700
Subject: [PATCH 23/23] fix non-breaking space

---
 .../migration/migrating-to-v6/migrating-to-pigment-css.md       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md b/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md
index 6a785b6728f9d2..2386e677fa7482 100644
--- a/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md
+++ b/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md
@@ -407,7 +407,7 @@ If a value depends on a variable, you need to move it to a CSS variable inside i
 
 #### Custom components
 
-With Pigment CSS, any JSX element can accept the `sx` prop so it is **no** longer needed to pass down the `sx` prop to Material UI components.
+With Pigment CSS, any JSX element can accept the `sx` prop so it is **no** longer needed to pass down the `sx` prop to Material UI components.
 
 ```diff
  import ButtonBase from '@mui/material/ButtonBase';