[docs] Update pnpm order, move to second

docs/data/base/getting-started/quickstart/quickstart.md

@@ -22,14 +22,14 @@ The `next` tag is used to download the latest <b>pre-release</b>, v6 version. Re
 npm install @mui/base@next
 ```
 
-```bash yarn
-yarn add @mui/base@next
-```
-
 ```bash pnpm
 pnpm add @mui/base@next
 ```
 
+```bash yarn
+yarn add @mui/base@next
+```
+
 </codeblock>
 
 ### Peer dependencies

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

@@ -68,14 +68,14 @@ Install the [`stylis-plugin-rtl`](https://github.com/styled-components/stylis-pl
 npm install stylis stylis-plugin-rtl
 ```
 
-```bash yarn
-yarn add stylis stylis-plugin-rtl
-```
-
 ```bash pnpm
 pnpm add stylis stylis-plugin-rtl
 ```
 
+```bash yarn
+yarn add stylis stylis-plugin-rtl
+```
+
 </codeblock>
 
 #### With Emotion

docs/data/joy/getting-started/installation/installation.md

@@ -13,18 +13,19 @@ The `next` tag is used to download the latest <b>pre-release</b>, v6 version. Re
 <!-- #default-branch-switch -->
 
 <codeblock storageKey="package-manager">
+
 ```bash npm
 npm install @mui/joy@next @emotion/react @emotion/styled
 ```
 
-```bash yarn
-yarn add @mui/joy@next @emotion/react @emotion/styled
-```
-
 ```bash pnpm
 pnpm add @mui/joy@next @emotion/react @emotion/styled
 ```
 
+```bash yarn
+yarn add @mui/joy@next @emotion/react @emotion/styled
+```
+
 </codeblock>
 
 ### Peer dependencies
@@ -51,18 +52,19 @@ Add it to your project via [Fontsource](https://fontsource.org/), or with the Go
 Run one of the following commands to add Inter through Fontsource to your Joy UI project:
 
 <codeblock storageKey="package-manager">
+
 ```bash npm
 npm install @fontsource/inter
 ```
 
-```bash yarn
-yarn add @fontsource/inter
-```
-
 ```bash pnpm
 pnpm add @fontsource/inter
 ```
 
+```bash yarn
+yarn add @fontsource/inter
+```
+
 </codeblock>
 
 Then you can import it in your entry point like this:

docs/data/material/components/about-the-lab/about-the-lab.md

@@ -31,14 +31,14 @@ The `next` tag is used to download the latest <b>pre-release</b>, v6 version. Re
 npm install @mui/lab@next @mui/material@next
 ```
 
-```bash yarn
-yarn add @mui/lab@next @mui/material@next
-```
-
 ```bash pnpm
 pnpm add @mui/lab@next @mui/material@next
 ```
 
+```bash yarn
+yarn add @mui/lab@next @mui/material@next
+```
+
 </codeblock>
 
 Note that the lab has a peer dependency on the Material UI components.

docs/data/material/components/icons/icons.md

@@ -37,14 +37,14 @@ The `next` tag is used to download the latest <b>pre-release</b>, v6 version. Re
 npm install @mui/icons-material@next
 ```
 
-```bash yarn
-yarn add @mui/icons-material@next
-```
-
 ```bash pnpm
 pnpm add @mui/icons-material@next
 ```
 
+```bash yarn
+yarn add @mui/icons-material@next
+```
+
 </codeblock>
 
 These components use the Material UI `SvgIcon` component to render the SVG path for each icon, and so have a peer-dependency on `@mui/material`.

docs/data/material/components/material-icons/material-icons.md

@@ -30,14 +30,14 @@ The `next` tag is used to download the latest <b>pre-release</b>, v6 version. Re
 npm install @mui/icons-material@next @mui/material@next @emotion/styled @emotion/react
 ```
 
-```bash yarn
-yarn add @mui/icons-material@next @mui/material@next @emotion/styled @emotion/react
-```
-
 ```bash pnpm
 pnpm add @mui/icons-material@next @mui/material@next @emotion/styled @emotion/react
 ```
 
+```bash yarn
+yarn add @mui/icons-material@next @mui/material@next @emotion/styled @emotion/react
+```
+
 </codeblock>
 
 See the [Installation](/material-ui/getting-started/installation/) page for additional docs about how to make sure everything is set up correctly.

docs/data/material/components/typography/typography.md

@@ -24,14 +24,14 @@ Add it to your project via Fontsource, or with the Google Fonts CDN.
 npm install @fontsource/roboto
 ```
 
-```bash yarn
-yarn add @fontsource/roboto
-```
-
 ```bash pnpm
 pnpm add @fontsource/roboto
 ```
 
+```bash yarn
+yarn add @fontsource/roboto
+```
+
 </codeblock>
 
 Then you can import it in your entry point like this:

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

@@ -68,14 +68,14 @@ Install the [`stylis-plugin-rtl`](https://github.com/styled-components/stylis-pl
 npm install stylis stylis-plugin-rtl
 ```
 
-```bash yarn
-yarn add stylis stylis-plugin-rtl
-```
-
 ```bash pnpm
 pnpm add stylis stylis-plugin-rtl
 ```
 
+```bash yarn
+yarn add stylis stylis-plugin-rtl
+```
+
 </codeblock>
 
 #### With Emotion

docs/data/material/getting-started/installation/installation.md

@@ -18,14 +18,14 @@ The `next` tag is used to download the latest <b>pre-release</b>, v6 version. Re
 npm install @mui/material@next @emotion/react @emotion/styled
 ```
 
-```bash yarn
-yarn add @mui/material@next @emotion/react @emotion/styled
-```
-
 ```bash pnpm
 pnpm add @mui/material@next @emotion/react @emotion/styled
 ```
 
+```bash yarn
+yarn add @mui/material@next @emotion/react @emotion/styled
+```
+
 </codeblock>
 
 ### Peer dependencies
@@ -52,14 +52,14 @@ If you want to use [styled-components](https://styled-components.com/) instead,
 npm install @mui/material @mui/styled-engine-sc styled-components
 ```
 
-```bash yarn
-yarn add @mui/material @mui/styled-engine-sc styled-components
-```
-
 ```bash pnpm
 pnpm add @mui/material @mui/styled-engine-sc styled-components
 ```
 
+```bash yarn
+yarn add @mui/material @mui/styled-engine-sc styled-components
+```
+
 </codeblock>
 
 Next, follow the [styled-components how-to guide](/material-ui/integrations/styled-components/) to properly configure your bundler to support `@mui/styled-engine-sc`.
@@ -83,14 +83,14 @@ Add it to your project via Fontsource, or with the Google Fonts CDN.
 npm install @fontsource/roboto
 ```
 
-```bash yarn
-yarn add @fontsource/roboto
-```
-
 ```bash pnpm
 pnpm add @fontsource/roboto
 ```
 
+```bash yarn
+yarn add @fontsource/roboto
+```
+
 </codeblock>
 
 Then you can import it in your entry point like this:
@@ -130,14 +130,14 @@ You can do so with npm, or with the Google Web Fonts CDN.
 npm install @mui/icons-material
 ```
 
-```bash yarn
-yarn add @mui/icons-material
-```
-
 ```bash pnpm
 pnpm add @mui/icons-material
 ```
 
+```bash yarn
+yarn add @mui/icons-material
+```
+
 </codeblock>
 
 ### Google Web Fonts

docs/data/material/integrations/nextjs/nextjs.md

@@ -23,14 +23,14 @@ The `next` tag is used to download the latest <b>pre-release</b>, v6 version. Re
 npm install @mui/material-nextjs@next @emotion/cache
 ```
 
-```bash yarn
-yarn add @mui/material-nextjs@next @emotion/cache
-```
-
 ```bash pnpm
 pnpm add @mui/material-nextjs@next @emotion/cache
 ```
 
+```bash yarn
+yarn add @mui/material-nextjs@next @emotion/cache
+```
+
 </codeblock>
 
 ### Configuration
@@ -165,14 +165,14 @@ Then, run one of the following commands to install the dependencies:
 npm install @mui/material-nextjs @emotion/cache @emotion/server
 ```
 
-```bash yarn
-yarn add @mui/material-nextjs @emotion/cache @emotion/server
-```
-
 ```bash pnpm
 pnpm add @mui/material-nextjs @emotion/cache @emotion/server
 ```
 
+```bash yarn
+yarn add @mui/material-nextjs @emotion/cache @emotion/server
+```
+
 </codeblock>
 
 ### Configuration

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

@@ -30,14 +30,14 @@ First, install the Material UI wrapper package for Pigment CSS:
 npm install @mui/material-pigment-css
 ```
 
-```bash yarn
-yarn add @mui/material-pigment-css
-```
-
 ```bash pnpm
 pnpm add @mui/material-pigment-css
 ```
 
+```bash yarn
+yarn add @mui/material-pigment-css
+```
+
 </codeblock>
 
 Then, follow the instructions based on your framework:
@@ -52,14 +52,14 @@ Install the Next.js plugin as a dev dependency:
 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
 ```
 
+```bash yarn
+yarn add -D @pigment-css/nextjs-plugin
+```
+
 </codeblock>
 
 Then, open Next.js config file and add the plugin:
@@ -200,14 +200,14 @@ Otherwise you're now ready to start the development server:
 npm run dev
 ```
 
-```bash yarn
-yarn dev
-```
-
 ```bash pnpm
 pnpm dev
 ```
 
+```bash yarn
+yarn dev
+```
+
 </codeblock>
 
 Open the browser and navigate to the localhost URL, you should see the app running with Pigment CSS.

docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md

@@ -87,14 +87,14 @@ Use the snippet below to update your project (replace the `<version>` with the o
 npm install react@<version> react-dom@<version>
 ```
 
-```bash yarn
-yarn add react@<version> react-dom@<version>
-```
-
 ```bash pnpm
 pnpm add react@<version> react-dom@<version>
 ```
 
+```bash yarn
+yarn add react@<version> react-dom@<version>
+```
+
 </codeblock>
 
 ### Minimum TypeScript version