From 509cdaf0a79a391f79a9b8feabf7d7fc104f3361 Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijesh42@gmail.com>
Date: Fri, 22 Nov 2024 12:25:29 +0530
Subject: [PATCH 1/2] [pigment-css] Make @pigment-css/react as peer dep

This change helps in module resolution across different package
managers, especially pnpm, which expects the imports to be from direct
dependencies.
During sx prop transform, pigment-css plugin adds -

```js
import { sx } from '@pigment-css/react';
```

which would throw an error when using pnpm since @pigment-css/react was
not a direct dependency of the user's application.
---
 .../migration/upgrade-to-v6/migrating-to-pigment-css.md     | 6 +++---
 packages/mui-material-pigment-css/package.json              | 6 ++++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/docs/data/material/migration/upgrade-to-v6/migrating-to-pigment-css.md b/docs/data/material/migration/upgrade-to-v6/migrating-to-pigment-css.md
index 4783bfd4f7a8fa..0b4789c482af56 100644
--- a/docs/data/material/migration/upgrade-to-v6/migrating-to-pigment-css.md
+++ b/docs/data/material/migration/upgrade-to-v6/migrating-to-pigment-css.md
@@ -31,15 +31,15 @@ First, install the Material UI wrapper package for Pigment CSS:
 <codeblock storageKey="package-manager">
 
 ```bash npm
-npm install @mui/material-pigment-css
+npm install @mui/material-pigment-css @pigment-css/react
 ```
 
 ```bash pnpm
-pnpm add @mui/material-pigment-css
+pnpm add @mui/material-pigment-css @pigment-css/react
 ```
 
 ```bash yarn
-yarn add @mui/material-pigment-css
+yarn add @mui/material-pigment-css @pigment-css/react
 ```
 
 </codeblock>
diff --git a/packages/mui-material-pigment-css/package.json b/packages/mui-material-pigment-css/package.json
index d6613142a7f76f..7d2fd6cd52485b 100644
--- a/packages/mui-material-pigment-css/package.json
+++ b/packages/mui-material-pigment-css/package.json
@@ -40,8 +40,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@mui/system": "workspace:*",
-    "@pigment-css/react": "0.0.27"
+    "@mui/system": "workspace:*"
+  },
+  "peerDependencies": {
+    "@pigment-css/react": "^0.0.27"
   },
   "sideEffects": false,
   "publishConfig": {

From 75df459fd2224ab07672f2bdeb6174214c5cd108 Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijesh42@gmail.com>
Date: Fri, 22 Nov 2024 12:29:58 +0530
Subject: [PATCH 2/2] Update material-pigment-css usage examples

---
 examples/material-ui-pigment-css-nextjs-ts/package.json | 1 +
 examples/material-ui-pigment-css-vite-ts/package.json   | 1 +
 2 files changed, 2 insertions(+)

diff --git a/examples/material-ui-pigment-css-nextjs-ts/package.json b/examples/material-ui-pigment-css-nextjs-ts/package.json
index e1e5929ece8d83..f1b6103ef7a9d1 100644
--- a/examples/material-ui-pigment-css-nextjs-ts/package.json
+++ b/examples/material-ui-pigment-css-nextjs-ts/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@mui/material": "latest",
     "@mui/material-pigment-css": "latest",
+    "@pigment-css/react": "latest",
     "next": "latest",
     "react": "latest",
     "react-dom": "latest"
diff --git a/examples/material-ui-pigment-css-vite-ts/package.json b/examples/material-ui-pigment-css-vite-ts/package.json
index a44124f0d952e0..fe853d4f5d03a3 100644
--- a/examples/material-ui-pigment-css-vite-ts/package.json
+++ b/examples/material-ui-pigment-css-vite-ts/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@mui/material": "latest",
     "@mui/material-pigment-css": "latest",
+    "@pigment-css/react": "latest",
     "react": "latest",
     "react-dom": "latest"
   },