[docs] Bump pnpm priority as a package manager (#13894)

docs/data/charts/getting-started/getting-started.md

@@ -19,29 +19,33 @@ Run one of the following commands to add the MUI X Charts to your project:
 npm install @mui/x-charts
 ```
 
-```bash yarn
-yarn add @mui/x-charts
-```
-
 ```bash pnpm
 pnpm add @mui/x-charts
 ```
 
+```bash yarn
+yarn add @mui/x-charts
+```
+
 </codeblock>
 
 The Charts package has a peer dependency on `@mui/material`.
 If you are not already using it in your project, you can install it with:
 
 <codeblock storageKey="package-manager">
+
 ```bash npm
 npm install @mui/material @emotion/react @emotion/styled
 ```
-```bash yarn
-yarn add @mui/material @emotion/react @emotion/styled
-```
+
 ```bash pnpm
 pnpm add @mui/material @emotion/react @emotion/styled
 ```
+
+```bash yarn
+yarn add @mui/material @emotion/react @emotion/styled
+```
+
 </codeblock>
 
 <!-- #react-peer-version -->
@@ -64,14 +68,14 @@ Material UI is using [Emotion](https://emotion.sh/docs/introduction) as a styli
 npm install @mui/styled-engine-sc styled-components
 ```
 
-```bash yarn
-yarn add @mui/styled-engine-sc styled-components
-```
-
 ```bash pnpm
 pnpm add @mui/styled-engine-sc styled-components
 ```
 
+```bash yarn
+yarn add @mui/styled-engine-sc styled-components
+```
+
 </codeblock>
 
 Take a look at the [Styled engine guide](/material-ui/integrations/styled-components/) for more information about how to configure `styled-components` as the style engine.

docs/data/data-grid/getting-started/getting-started.md

@@ -14,18 +14,19 @@ The Data Grid package has a peer dependency on `@mui/material`.
 If you are not already using it in your project, you can install it with:
 
 <codeblock storageKey="package-manager">
+
 ```bash npm
 npm install @mui/material @emotion/react @emotion/styled
 ```
 
-```bash yarn
-yarn add @mui/material @emotion/react @emotion/styled
-```
-
 ```bash pnpm
 pnpm add @mui/material @emotion/react @emotion/styled
 ```
 
+```bash yarn
+yarn add @mui/material @emotion/react @emotion/styled
+```
+
 </codeblock>
 
 <!-- #react-peer-version -->
@@ -44,18 +45,19 @@ Please note that [react](https://www.npmjs.com/package/react) and [react-dom](ht
 Material UI is using [Emotion](https://emotion.sh/docs/introduction) as a styling engine by default. If you want to use [`styled-components`](https://styled-components.com/) instead, run:
 
 <codeblock storageKey="package-manager">
+
 ```bash npm
 npm install @mui/styled-engine-sc styled-components
 ```
 
-```bash yarn
-yarn add @mui/styled-engine-sc styled-components
-```
-
 ```bash pnpm
 pnpm add @mui/styled-engine-sc styled-components
 ```
 
+```bash yarn
+yarn add @mui/styled-engine-sc styled-components
+```
+
 </codeblock>
 
 :::info

docs/data/date-pickers/getting-started/getting-started.md

@@ -31,15 +31,19 @@ The Date and Time Pickers package has a peer dependency on `@mui/material`.
 If you are not already using it in your project, you can install it with:
 
 <codeblock storageKey="package-manager">
+
 ```bash npm
 npm install @mui/material @emotion/react @emotion/styled
 ```
-```bash yarn
-yarn add @mui/material @emotion/react @emotion/styled
-```
+
 ```bash pnpm
 pnpm add @mui/material @emotion/react @emotion/styled
 ```
+
+```bash yarn
+yarn add @mui/material @emotion/react @emotion/styled
+```
+
 </codeblock>
 
 <!-- #react-peer-version -->
@@ -58,18 +62,19 @@ Please note that [react](https://www.npmjs.com/package/react) and [react-dom](ht
 Material UI is using [Emotion](https://emotion.sh/docs/introduction) as a styling engine by default. If you want to use [`styled-components`](https://styled-components.com/) instead, run:
 
 <codeblock storageKey="package-manager">
+
 ```bash npm
 npm install @mui/styled-engine-sc styled-components
 ```
 
-```bash yarn
-yarn add @mui/styled-engine-sc styled-components
-```
-
 ```bash pnpm
 pnpm add @mui/styled-engine-sc styled-components
 ```
 
+```bash yarn
+yarn add @mui/styled-engine-sc styled-components
+```
+
 </codeblock>
 
 Take a look at the [Styled engine guide](/material-ui/integrations/styled-components/) for more information about how to configure `styled-components` as the style engine.

docs/data/migration/migration-pickers-lab/migration-pickers-lab.md

@@ -32,18 +32,19 @@ If you already have a license for `@mui/x-data-grid-pro`, you can use the same o
 #### Community plan
 
 <codeblock storageKey="package-manager">
+
 ```bash npm
 npm install @mui/x-date-pickers
 ```
 
-```bash yarn
-yarn add @mui/x-date-pickers
-```
-
 ```bash pnpm
 pnpm add @mui/x-date-pickers
 ```
 
+```bash yarn
+yarn add @mui/x-date-pickers
+```
+
 </codeblock>
 
 #### Pro plan
@@ -54,14 +55,14 @@ pnpm add @mui/x-date-pickers
 npm install @mui/x-date-pickers-pro @mui/x-license-pro
 ```
 
-```bash yarn
-yarn add @mui/x-date-pickers-pro @mui/x-license-pro
-```
-
 ```bash pnpm
 pnpm add @mui/x-date-pickers-pro @mui/x-license-pro
 ```
 
+```bash yarn
+yarn add @mui/x-date-pickers-pro @mui/x-license-pro
+```
+
 </codeblock>
 
 When you purchase a commercial license, you'll receive a license key by email.

docs/data/migration/migration-tree-view-lab/migration-tree-view-lab.md

@@ -18,18 +18,19 @@ This migration is about the npm packages used, it **does not** affect the behavi
 ### 1. Install MUI X package
 
 <codeblock storageKey="package-manager">
+
 ```bash npm
 npm install @mui/x-tree-view
 ```
 
-```bash yarn
-yarn add @mui/x-tree-view
-```
-
 ```bash pnpm
 pnpm add @mui/x-tree-view
 ```
 
+```bash yarn
+yarn add @mui/x-tree-view
+```
+
 </codeblock>
 
 ### 2. Run the code mod

docs/data/tree-view/getting-started/getting-started.md

@@ -18,33 +18,38 @@ Using your favorite package manager, install `@mui/x-tree-view`:
 <!-- #default-branch-switch -->
 
 <codeblock storageKey="package-manager">
+
 ```bash npm
 npm install @mui/x-tree-view
 ```
 
-```bash yarn
-yarn add @mui/x-tree-view
-```
-
 ```bash pnpm
 pnpm add @mui/x-tree-view
 ```
 
+```bash yarn
+yarn add @mui/x-tree-view
+```
+
 </codeblock>
 
 The Tree View package has a peer dependency on `@mui/material`.
 If you are not already using it in your project, you can install it with:
 
 <codeblock storageKey="package-manager">
+
 ```bash npm
 npm install @mui/material @emotion/react @emotion/styled
 ```
-```bash yarn
-yarn add @mui/material @emotion/react @emotion/styled
-```
+
 ```bash pnpm
 pnpm add @mui/material @emotion/react @emotion/styled
 ```
+
+```bash yarn
+yarn add @mui/material @emotion/react @emotion/styled
+```
+
 </codeblock>
 
 <!-- #react-peer-version -->

docs/src/modules/components/InstallationInstructions.tsx

@@ -6,8 +6,8 @@ import ToggleOptions from './ToggleOptions';
 
 const defaultPackageManagers: Record<string, string> = {
   npm: 'npm install',
-  yarn: 'yarn add',
   pnpm: 'pnpm add',
+  yarn: 'yarn add',
 };
 
 export default function InstallationInstructions(props: {