From 2645f39aa600cc2745b991a7db812077e614cf64 Mon Sep 17 00:00:00 2001
From: Ilya Molostov <29124424+IAluI@users.noreply.github.com>
Date: Tue, 20 Aug 2024 16:43:12 +0700
Subject: [PATCH 1/3] edit "How to use components selector API"

- add @mui/material to @emotion/babel-plugin config
- add note about @emotion/babel-plugin and babel-plugin-direct-import order

Signed-off-by: Ilya Molostov <29124424+IAluI@users.noreply.github.com>
---
 docs/data/system/styled/styled.md | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/docs/data/system/styled/styled.md b/docs/data/system/styled/styled.md
index cac8b41080267f..1828943bbe23ac 100644
--- a/docs/data/system/styled/styled.md
+++ b/docs/data/system/styled/styled.md
@@ -280,6 +280,12 @@ module.exports = {
               styledBaseImport: ["@mui/system", "styled"]
             }
           },
+          "@mui/material": {
+            "styled": {
+              "canonicalImport": ["@emotion/styled", "default"],
+              "styledBaseImport": ["@mui/material", "styled"]
+            }
+          },
           "@mui/material/styles": {
             styled: {
               canonicalImport: ["@emotion/styled", "default"],
@@ -294,4 +300,8 @@ module.exports = {
 
 ```
 
+:::info
+Note: if [`babel-plugin-direct-import`](https://github.com/avocadowastaken/babel-plugin-direct-import) used, it must be after `@emotion/babel-plugin`.
+:::
+
 Now you should be able to use components as your selectors!

From 0048e088c820626c9120771162b1a13d219e8fbe Mon Sep 17 00:00:00 2001
From: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
Date: Tue, 10 Sep 2024 11:04:30 +0530
Subject: [PATCH 2/3] remove unnecessary double quotes

---
 docs/data/system/styled/styled.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/data/system/styled/styled.md b/docs/data/system/styled/styled.md
index 1828943bbe23ac..1f49428a0a39e8 100644
--- a/docs/data/system/styled/styled.md
+++ b/docs/data/system/styled/styled.md
@@ -281,9 +281,9 @@ module.exports = {
             }
           },
           "@mui/material": {
-            "styled": {
-              "canonicalImport": ["@emotion/styled", "default"],
-              "styledBaseImport": ["@mui/material", "styled"]
+            styled: {
+              canonicalImport: ["@emotion/styled", "default"],
+              styledBaseImport: ["@mui/material", "styled"]
             }
           },
           "@mui/material/styles": {

From cae58db25dddb65685880637f08ac975556b1504 Mon Sep 17 00:00:00 2001
From: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
Date: Tue, 10 Sep 2024 11:08:55 +0530
Subject: [PATCH 3/3] Improve note

---
 docs/data/system/styled/styled.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/data/system/styled/styled.md b/docs/data/system/styled/styled.md
index 1f49428a0a39e8..87520005039660 100644
--- a/docs/data/system/styled/styled.md
+++ b/docs/data/system/styled/styled.md
@@ -301,7 +301,7 @@ module.exports = {
 ```
 
 :::info
-Note: if [`babel-plugin-direct-import`](https://github.com/avocadowastaken/babel-plugin-direct-import) used, it must be after `@emotion/babel-plugin`.
+Note: If you use [`babel-plugin-direct-import`](https://github.com/avocadowastaken/babel-plugin-direct-import), place it after `@emotion/babel-plugin` in the Babel config.
 :::
 
 Now you should be able to use components as your selectors!