[mui-plugin-rtl] fix RTL does not work with CSS layer with a new package (#46230)

Author: siriwatknp

docs/data/joy/customization/right-to-left/RtlDemo.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import rtlPlugin from 'stylis-plugin-rtl';
+import rtlPlugin from '@mui/stylis-plugin-rtl';
 import { prefixer } from 'stylis';
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';

docs/data/joy/customization/right-to-left/RtlDemo.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import rtlPlugin from 'stylis-plugin-rtl';
+import rtlPlugin from '@mui/stylis-plugin-rtl';
 import { prefixer } from 'stylis';
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';

docs/data/joy/customization/right-to-left/RtlOptOut.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { prefixer } from 'stylis';
-import rtlPlugin from 'stylis-plugin-rtl';
+import rtlPlugin from '@mui/stylis-plugin-rtl';
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import { styled } from '@mui/joy/styles';

docs/data/joy/customization/right-to-left/RtlOptOut.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { prefixer } from 'stylis';
-import rtlPlugin from 'stylis-plugin-rtl';
+import rtlPlugin from '@mui/stylis-plugin-rtl';
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import { styled } from '@mui/joy/styles';

docs/data/joy/customization/right-to-left/right-to-left.md

@@ -60,33 +60,33 @@ const theme = extendTheme({
 
 ### 3. Configure RTL style plugin
 
-Install the [`stylis-plugin-rtl`](https://github.com/styled-components/stylis-plugin-rtl) using one of the commands below:
+Install the `@mui/stylis-plugin-rtl` using one of the commands below:
 
 <codeblock storageKey="package-manager">
 
 ```bash npm
-npm install stylis stylis-plugin-rtl
+npm install stylis @mui/stylis-plugin-rtl
 ```
 
 ```bash pnpm
-pnpm add stylis stylis-plugin-rtl
+pnpm add stylis @mui/stylis-plugin-rtl
 ```
 
 ```bash yarn
-yarn add stylis stylis-plugin-rtl
+yarn add stylis @mui/stylis-plugin-rtl
 ```
 
 </codeblock>
 
 #### With Emotion
 
-If you're using Emotion, use the [CacheProvider](https://emotion.sh/docs/cache-provider) to create a new cache instance that uses `rtlPlugin` from `stylis-plugin-rtl` and add that to the top of your application tree:
+If you're using Emotion, use the [CacheProvider](https://emotion.sh/docs/cache-provider) to create a new cache instance that uses `rtlPlugin` from `@mui/stylis-plugin-rtl` and add that to the top of your application tree:
 
 ```jsx
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import { prefixer } from 'stylis';
-import rtlPlugin from 'stylis-plugin-rtl';
+import rtlPlugin from '@mui/stylis-plugin-rtl';
 
 // Create rtl cache
 const cacheRtl = createCache({
@@ -105,7 +105,7 @@ If you're using styled-components, use the [StyleSheetManager](https://styled-co
 
 ```jsx
 import { StyleSheetManager } from 'styled-components';
-import rtlPlugin from 'stylis-plugin-rtl';
+import rtlPlugin from '@mui/stylis-plugin-rtl';
 
 function Rtl(props) {
   return (

docs/data/material/customization/right-to-left/RtlDemo.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import TextField from '@mui/material/TextField';
-import rtlPlugin from 'stylis-plugin-rtl';
+import rtlPlugin from '@mui/stylis-plugin-rtl';
 import { prefixer } from 'stylis';
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';

docs/data/material/customization/right-to-left/RtlDemo.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createTheme, ThemeProvider, Theme } from '@mui/material/styles';
 import TextField from '@mui/material/TextField';
-import rtlPlugin from 'stylis-plugin-rtl';
+import rtlPlugin from '@mui/stylis-plugin-rtl';
 import { prefixer } from 'stylis';
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';

docs/data/material/customization/right-to-left/RtlOptOut.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { prefixer } from 'stylis';
-import rtlPlugin from 'stylis-plugin-rtl';
+import rtlPlugin from '@mui/stylis-plugin-rtl';
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import { styled } from '@mui/material/styles';

docs/data/material/customization/right-to-left/RtlOptOut.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { prefixer } from 'stylis';
-import rtlPlugin from 'stylis-plugin-rtl';
+import rtlPlugin from '@mui/stylis-plugin-rtl';
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import { styled } from '@mui/material/styles';

docs/data/material/customization/right-to-left/right-to-left.md

@@ -60,33 +60,33 @@ const theme = createTheme({
 
 ### 3. Configure RTL style plugin
 
-Install the [`stylis-plugin-rtl`](https://github.com/styled-components/stylis-plugin-rtl) using one of the commands below:
+Install the `@mui/stylis-plugin-rtl` using one of the commands below:
 
 <codeblock storageKey="package-manager">
 
 ```bash npm
-npm install stylis stylis-plugin-rtl
+npm install stylis @mui/stylis-plugin-rtl
 ```
 
 ```bash pnpm
-pnpm add stylis stylis-plugin-rtl
+pnpm add stylis @mui/stylis-plugin-rtl
 ```
 
 ```bash yarn
-yarn add stylis stylis-plugin-rtl
+yarn add stylis @mui/stylis-plugin-rtl
 ```
 
 </codeblock>
 
 #### With Emotion
 
-If you're using Emotion, use the [CacheProvider](https://emotion.sh/docs/cache-provider) to create a new cache instance that uses `rtlPlugin` from `stylis-plugin-rtl` and add that to the top of your application tree:
+If you're using Emotion, use the [CacheProvider](https://emotion.sh/docs/cache-provider) to create a new cache instance that uses `rtlPlugin` from `@mui/stylis-plugin-rtl` and add that to the top of your application tree:
 
 ```jsx
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import { prefixer } from 'stylis';
-import rtlPlugin from 'stylis-plugin-rtl';
+import rtlPlugin from '@mui/stylis-plugin-rtl';
 
 // Create rtl cache
 const rtlCache = createCache({
@@ -105,7 +105,7 @@ If you're using styled-components, use the [StyleSheetManager](https://styled-co
 
 ```jsx
 import { StyleSheetManager } from 'styled-components';
-import rtlPlugin from 'stylis-plugin-rtl';
+import rtlPlugin from '@mui/stylis-plugin-rtl';
 
 function Rtl(props) {
   return (