mui · alexfauquette · Jul 6, 2023 · Jul 5, 2023 · Jul 5, 2023 · Jul 5, 2023
diff --git a/benchmark/browser/README.md b/benchmark/browser/README.md
@@ -2,7 +2,7 @@
 
 This project is used when running the following command:
 
-```sh
+```bash
 yarn browser
 ```
 

diff --git a/docs/README.md b/docs/README.md
@@ -4,7 +4,7 @@ This is the documentation website of MUI X.
 
 To start the docs site in development mode, from the project root, run:
 
-```sh
+```bash
 yarn && yarn docs:dev
 ```
 

diff --git a/docs/data/charts/overview/overview.md b/docs/data/charts/overview/overview.md
@@ -31,12 +31,17 @@ To modify the styling of charts you can rely on all the MUI styling tools, such
 
 To install this library, run
 
-```sh
+<codeblock storageKey="package-manager">
+```bash npm
 npm install @mui/x-charts
-// or
+```
+
+```bash yarn
 yarn add @mui/x-charts
 ```
 
+</codeblock>
+
 ## Display charts
 
 Charts can be rendered in two ways.

diff --git a/docs/data/data-grid/getting-started/getting-started.md b/docs/data/data-grid/getting-started/getting-started.md
@@ -11,14 +11,17 @@ Using your favorite package manager, install `@mui/x-data-grid-pro` or `@mui/x-d
 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:
 
-```sh
-// with npm
+<codeblock storageKey="package-manager">
+```bash npm
 npm install @mui/material @emotion/react @emotion/styled
+```
 
-// with yarn
+```bash yarn
 yarn add @mui/material @emotion/react @emotion/styled
 ```
 
+</codeblock>
+
 <!-- #react-peer-version -->
 
 Please note that [react](https://www.npmjs.com/package/react) and [react-dom](https://www.npmjs.com/package/react-dom) are peer dependencies too:
@@ -34,14 +37,16 @@ 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:
 
-```sh
-// with npm
+<codeblock storageKey="package-manager">
+```bash npm
 npm install @mui/styled-engine-sc styled-components
 
-// with yarn
+```bash yarn
 yarn add @mui/styled-engine-sc styled-components
 ```
 
+</codeblock>
+
 Take a look at the [Styled engine guide](/material-ui/guides/styled-engine/) for more information about how to configure `styled-components` as the style engine.
 
 ## Quickstart

diff --git a/docs/data/date-pickers/adapters-locale/adapters-locale.md b/docs/data/date-pickers/adapters-locale/adapters-locale.md
@@ -1,4 +1,5 @@
 ---
+productId: x-date-pickers
 title: Date and Time pickers - Date localization
 components: LocalizationProvider
 githubLabel: 'component: pickers'

diff --git a/docs/data/date-pickers/base-concepts/base-concepts.md b/docs/data/date-pickers/base-concepts/base-concepts.md
@@ -1,4 +1,5 @@
 ---
+productId: x-date-pickers
 title: Date and Time Picker - Base concepts
 packageName: '@mui/x-date-pickers'
 githubLabel: 'component: pickers'

diff --git a/docs/data/date-pickers/calendar-systems/calendar-systems.md b/docs/data/date-pickers/calendar-systems/calendar-systems.md
@@ -1,4 +1,5 @@
 ---
+productId: x-date-pickers
 title: Date and Time pickers - Calendar systems
 components: LocalizationProvider
 githubLabel: 'component: pickers'

diff --git a/docs/data/date-pickers/custom-components/custom-components.md b/docs/data/date-pickers/custom-components/custom-components.md
@@ -1,4 +1,5 @@
 ---
+productId: x-date-pickers
 title: Date and Time pickers - Custom subcomponents
 components: DateTimePickerTabs
 ---

diff --git a/docs/data/date-pickers/custom-field/custom-field.md b/docs/data/date-pickers/custom-field/custom-field.md
@@ -1,4 +1,5 @@
 ---
+productId: x-date-pickers
 title: Date and Time pickers - Custom field
 githubLabel: 'component: pickers'
 packageName: '@mui/x-date-pickers'

diff --git a/docs/data/date-pickers/custom-layout/custom-layout.md b/docs/data/date-pickers/custom-layout/custom-layout.md
@@ -1,4 +1,5 @@
 ---
+productId: x-date-pickers
 title: Date and Time pickers - Custom layout
 components: PickersActionBar, PickersLayout
 githubLabel: 'component: pickers'

diff --git a/docs/data/date-pickers/date-calendar/date-calendar.md b/docs/data/date-pickers/date-calendar/date-calendar.md
@@ -1,4 +1,5 @@
 ---
+productId: x-date-pickers
 title: React Date Calendar component
 components: DateCalendar, MonthCalendar, YearCalendar, PickersDay, DayCalendarSkeleton
 githubLabel: 'component: DatePicker'

diff --git a/docs/data/date-pickers/date-field/date-field.md b/docs/data/date-pickers/date-field/date-field.md
@@ -1,4 +1,5 @@
 ---
+productId: x-date-pickers
 title: React Date Field component
 components: DateField
 githubLabel: 'component: pickers'

diff --git a/docs/data/date-pickers/date-picker/date-picker.md b/docs/data/date-pickers/date-picker/date-picker.md
@@ -1,4 +1,5 @@
 ---
+productId: x-date-pickers
 title: React Date Picker component
 components: DatePicker, DesktopDatePicker, MobileDatePicker, StaticDatePicker
 githubLabel: 'component: DatePicker'

diff --git a/docs/data/date-pickers/date-range-calendar/date-range-calendar.md b/docs/data/date-pickers/date-range-calendar/date-range-calendar.md
@@ -1,4 +1,5 @@
 ---
+productId: x-date-pickers
 title: React Date Range Calendar component
 components: DateRangeCalendar
 githubLabel: 'component: DateRangePicker'

diff --git a/docs/data/date-pickers/date-range-field/date-range-field.md b/docs/data/date-pickers/date-range-field/date-range-field.md
@@ -1,4 +1,5 @@
 ---
+productId: x-date-pickers
 title: React Date Range Field components
 components: MultiInputDateRangeField, SingleInputDateRangeField
 githubLabel: 'component: pickers'

diff --git a/docs/data/date-pickers/date-range-picker/date-range-picker.md b/docs/data/date-pickers/date-range-picker/date-range-picker.md
@@ -1,4 +1,5 @@
 ---
+productId: x-date-pickers
 title: React Date Range Picker component
 components: DateRangePicker, DesktopDateRangePicker, MobileDateRangePicker, StaticDateRangePicker, DateRangeCalendar, DateRangePickerDay
 githubLabel: 'component: DateRangePicker'

diff --git a/docs/data/date-pickers/date-time-field/date-time-field.md b/docs/data/date-pickers/date-time-field/date-time-field.md
@@ -1,4 +1,5 @@
 ---
+productId: x-date-pickers
 title: React Date Field component
 components: DateTimeField
 githubLabel: 'component: pickers'

diff --git a/docs/data/date-pickers/date-time-picker/date-time-picker.md b/docs/data/date-pickers/date-time-picker/date-time-picker.md
@@ -1,4 +1,5 @@
 ---
+productId: x-date-pickers
 title: React Date Time Picker component
 components: DateTimePicker, DesktopDateTimePicker, MobileDateTimePicker, StaticDateTimePicker
 githubLabel: 'component: DateTimePicker'

diff --git a/docs/data/date-pickers/date-time-range-field/date-time-range-field.md b/docs/data/date-pickers/date-time-range-field/date-time-range-field.md
@@ -1,4 +1,5 @@
 ---
+productId: x-date-pickers
 title: React Date Time Range Field components
 components: MultiInputDateTimeRangeField, SingleInputDateTimeRangeField
 githubLabel: 'component: pickers'

diff --git a/docs/data/date-pickers/date-time-range-picker/date-time-range-picker.md b/docs/data/date-pickers/date-time-range-picker/date-time-range-picker.md
@@ -1,4 +1,5 @@
 ---
+productId: x-date-pickers
 title: React Date Time Range Picker component
 githubLabel: 'component: DateTimeRangePicker'
 packageName: '@mui/x-date-pickers-pro'

diff --git a/docs/data/date-pickers/digital-clock/digital-clock.md b/docs/data/date-pickers/digital-clock/digital-clock.md
@@ -1,4 +1,5 @@
 ---
+productId: x-date-pickers
 title: React Digital Clock component
 components: DigitalClock, MultiSectionDigitalClock
 githubLabel: 'component: TimePicker'

diff --git a/docs/data/date-pickers/fields/fields.md b/docs/data/date-pickers/fields/fields.md
@@ -1,4 +1,5 @@
 ---
+productId: x-date-pickers
 title: React Date Fields components
 components: DateField, TimeField, DateTimeField, MultiInputDateRangeField, SingleInputDateRangeField, MultiInputTimeRangeField, SingleInputTimeRangeField, MultiInputDateTimeRangeField, SingleInputDateTimeRangeField
 githubLabel: 'component: pickers'

diff --git a/docs/data/date-pickers/getting-started/getting-started.md b/docs/data/date-pickers/getting-started/getting-started.md
@@ -1,4 +1,5 @@
 ---
+productId: x-date-pickers
 title: Date and Time Picker - Getting started
 packageName: '@mui/x-date-pickers'
 githubLabel: 'component: pickers'
@@ -27,13 +28,14 @@ take a look at the [dedicated section](/x/react-date-pickers/#date-library)
 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:
 
-```sh
-// with npm
+<codeblock storageKey="package-manager">
+```bash npm
 npm install @mui/material @emotion/react @emotion/styled
-
-// with yarn
+```
+```bash yarn
 yarn add @mui/material @emotion/react @emotion/styled
 ```
+</codeblock>
 
 <!-- #react-peer-version -->
 
@@ -50,14 +52,17 @@ 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:
 
-```sh
-// with npm
+<codeblock storageKey="package-manager">
+```bash npm
 npm install @mui/styled-engine-sc styled-components
+```
 
-// with yarn
+```bash yarn
 yarn add @mui/styled-engine-sc styled-components
 ```
 
+</codeblock>
+
 Take a look at the [Styled engine guide](/material-ui/guides/styled-engine/) for more information about how to configure `styled-components` as the style engine.
 
 ## Setup your date library adapter

diff --git a/docs/data/date-pickers/lifecycle/lifecycle.md b/docs/data/date-pickers/lifecycle/lifecycle.md
@@ -1,4 +1,5 @@
 ---
+productId: x-date-pickers
 title: Components lifecycle
 githubLabel: 'component: pickers'
 packageName: '@mui/x-date-pickers'

diff --git a/docs/data/date-pickers/localization/localization.md b/docs/data/date-pickers/localization/localization.md
@@ -1,4 +1,5 @@
 ---
+productId: x-date-pickers
 title: Date and Time Pickers - Component localization
 components: LocalizationProvider
 githubLabel: 'component: pickers'

diff --git a/docs/data/date-pickers/overview/overview.md b/docs/data/date-pickers/overview/overview.md
@@ -1,4 +1,5 @@
 ---
+productId: x-date-pickers
 title: Date and Time Picker React components
 packageName: '@mui/x-date-pickers'
 githubLabel: 'component: pickers'

diff --git a/docs/data/date-pickers/shortcuts/shortcuts.md b/docs/data/date-pickers/shortcuts/shortcuts.md
@@ -1,4 +1,5 @@
 ---
+productId: x-date-pickers
 title: Date and Time pickers - Shortcuts
 components: PickersShortcuts
 ---

diff --git a/docs/data/date-pickers/time-clock/time-clock.md b/docs/data/date-pickers/time-clock/time-clock.md
@@ -1,4 +1,5 @@
 ---
+productId: x-date-pickers
 title: React Time Clock component
 components: TimeClock
 githubLabel: 'component: TimePicker'

diff --git a/docs/data/date-pickers/time-field/time-field.md b/docs/data/date-pickers/time-field/time-field.md
@@ -1,4 +1,5 @@
 ---
+productId: x-date-pickers
 title: React Time Field component
 components: TimeField
 githubLabel: 'component: pickers'

diff --git a/docs/data/date-pickers/time-picker/time-picker.md b/docs/data/date-pickers/time-picker/time-picker.md
@@ -1,4 +1,5 @@
 ---
+productId: x-date-pickers
 title: React Time Picker component
 components: TimePicker, DesktopTimePicker, MobileTimePicker, StaticTimePicker
 githubLabel: 'component: TimePicker'

diff --git a/docs/data/date-pickers/time-range-field/time-range-field.md b/docs/data/date-pickers/time-range-field/time-range-field.md
@@ -1,4 +1,5 @@
 ---
+productId: x-date-pickers
 title: React Time Range Field components
 components: MultiInputTimeRangeField, SingleInputTimeRangeField
 githubLabel: 'component: pickers'

diff --git a/docs/data/date-pickers/time-range-picker/time-range-picker.md b/docs/data/date-pickers/time-range-picker/time-range-picker.md
@@ -1,4 +1,5 @@
 ---
+productId: x-date-pickers
 title: React Time Range Picker component
 githubLabel: 'component: TimeRangePicker'
 packageName: '@mui/x-date-pickers-pro'

diff --git a/docs/data/date-pickers/timezone/timezone.md b/docs/data/date-pickers/timezone/timezone.md
@@ -1,4 +1,5 @@
 ---
+productId: x-date-pickers
 title: Date and Time pickers - UTC and timezones
 components: LocalizationProvider
 githubLabel: 'component: pickers'

diff --git a/docs/data/date-pickers/validation/validation.md b/docs/data/date-pickers/validation/validation.md
@@ -1,4 +1,5 @@
 ---
+productId: x-date-pickers
 components: DatePicker, DesktopDatePicker, MobileDatePicker, StaticDatePicker, TimePicker, DesktopTimePicker, MobileTimePicker, StaticTimePicker, DateTimePicker, DesktopDateTimePicker, MobileDateTimePicker, StaticDateTimePicker, DateRangePicker, DesktopDateRangePicker, MobileDateRangePicker, StaticDateRangePicker
 githubLabel: 'component: pickers'
 packageName: '@mui/x-date-pickers'

diff --git a/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md b/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md
@@ -31,7 +31,7 @@ The `preset-safe` codemod will automatically adjust the bulk of your code to acc
 
 You can either run it on a specific file, folder, or your entire codebase when choosing the `<path>` argument.
 
-```sh
+```bash
 // Data Grid specific
 npx @mui/x-codemod v6.0.0/data-grid/preset-safe <path>
 // Target Date and Time pickers as well
@@ -495,7 +495,7 @@ To smooth the transition, data grid support both the `components` props which ar
 
 If you would like to use the new API and do not want to see deprecated prop usage, consider running `rename-components-to-slots` codemod handling the prop renaming.
 
-```sh
+```bash
 npx @mui/x-codemod v6.0.0/data-grid/rename-components-to-slots <path>
 ```
 

diff --git a/docs/data/migration/migration-pickers-lab/migration-pickers-lab.md b/docs/data/migration/migration-pickers-lab/migration-pickers-lab.md
@@ -31,24 +31,30 @@ If you already have a license for `@mui/x-data-grid-pro`, you can use the same o
 
 #### Community Plan
 
-```sh
-// with npm
+<codeblock storageKey="package-manager">
+```bash npm
 npm install @mui/x-date-pickers
+```
 
-// with yarn
+```bash yarn
 yarn add @mui/x-date-pickers
 ```
 
+</codeblock>
+
 #### Pro Plan
 
-```sh
-// with npm
+<codeblock storageKey="package-manager">
+```bash npm
 npm install @mui/x-date-pickers-pro @mui/x-license-pro
+```
 
-// with yarn
+```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.
 You must set the license key before rendering the first component.
 
@@ -66,7 +72,7 @@ We have prepared a codemod to help you migrate your codebase.
 
 You can either run it on a specific file, folder, or your entire codebase when choosing the `<path>` argument.
 
-```sh
+```bash
 npx @mui/codemod v5.0.0/date-pickers-moved-to-x <path>
 ```
 

diff --git a/docs/data/migration/migration-pickers-v5/migration-pickers-v5.md b/docs/data/migration/migration-pickers-v5/migration-pickers-v5.md
@@ -31,7 +31,7 @@ The `preset-safe` codemod will automatically adjust the bulk of your code to acc
 
 You can either run it on a specific file, folder, or your entire codebase when choosing the `<path>` argument.
 
-```sh
+```bash
 // Date and Time Pickers specific
 npx @mui/x-codemod v6.0.0/pickers/preset-safe <path>
 // Target Data Grid as well
@@ -958,7 +958,7 @@ To smooth the transition, pickers support both the `components` props which are
 
 If you would like to use the new API and do not want to see deprecated prop usage, consider running `rename-components-to-slots` codemod handling the prop renaming.
 
-```sh
+```bash
 npx @mui/x-codemod v6.0.0/pickers/rename-components-to-slots <path>
 ```
 

diff --git a/docs/src/modules/components/InstallationInstructions.tsx b/docs/src/modules/components/InstallationInstructions.tsx
@@ -104,7 +104,7 @@ export default function InstallationInstructions(props: {
  </TextField>
  ) : null}
  </Stack>
- <HighlightedCode sx={{ width: '100%' }} code={commands.join('\n')} language="sh" />
+ <HighlightedCode sx={{ width: '100%' }} code={commands.join('\n')} language="bash" />
  </Stack>
  );
 }
diff --git a/packages/grid/x-data-grid-premium/README.md b/packages/grid/x-data-grid-premium/README.md
@@ -7,7 +7,7 @@ It's part of MUI X, an open core extension of MUI, with advanced components.
 
 Install the package in your project directory with:
 
-```sh
+```bash
 // with npm
 npm install @mui/x-data-grid-premium