diff --git a/.circleci/config.yml b/.circleci/config.yml
index 6a93b0944e60b6..74998eba11ed6e 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -166,17 +166,17 @@ jobs:
echo "no changes"
fi
- run:
- name: typescript-to-proptypes
+ name: internal-scripts
command: |
# latest commit
LATEST_COMMIT=$(git rev-parse HEAD)
- # latest commit where packages/typescript-to-proptypes was changed
- FOLDER_COMMIT=$(git log -1 --format=format:%H --full-diff packages/typescript-to-proptypes)
+ # latest commit where internal-scripts was changed
+ FOLDER_COMMIT=$(git log -1 --format=format:%H --full-diff packages-internal/scripts)
if [ $FOLDER_COMMIT = $LATEST_COMMIT ]; then
echo "changes, let's run the tests"
- pnpm --filter typescript-to-proptypes test
+ pnpm --filter @mui/internal-scripts test
else
echo "no changes"
fi
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
index f81bc2357a68b9..d19d051a72b16a 100644
--- a/.codesandbox/ci.json
+++ b/.codesandbox/ci.json
@@ -3,6 +3,9 @@
"installCommand": "install:codesandbox",
"node": "18",
"packages": [
+ "packages/docs-utils",
+ "packages/markdown",
+ "packages/mui-babel-macros",
"packages/mui-base",
"packages/mui-codemod",
"packages/mui-core-downloads-tracker",
@@ -19,28 +22,37 @@
"packages/mui-system",
"packages/mui-types",
"packages/mui-utils",
- "packages/docs-utils",
- "packages/typescript-to-proptypes"
+ "packages-internal/scripts",
+ "packages/zero-runtime",
+ "packages/zero-unplugin",
+ "packages/zero-vite-plugin",
+ "packages/zero-next-plugin"
],
"publishDirectory": {
"@mui/base": "packages/mui-base/build",
"@mui/codemod": "packages/mui-codemod/build",
"@mui/core-downloads-tracker": "packages/mui-core-downloads-tracker/build",
"@mui/icons-material": "packages/mui-icons-material/build",
+ "@mui/internal-babel-macros": "packages/mui-babel-macros",
+ "@mui/internal-markdown": "packages/markdown",
+ "@mui/internal-scripts": "packages-internal/scripts",
"@mui/joy": "packages/mui-joy/build",
"@mui/lab": "packages/mui-lab/build",
"@mui/material-next": "packages/mui-material-next/build",
"@mui/material-nextjs": "packages/mui-material-nextjs/build",
"@mui/material": "packages/mui-material/build",
"@mui/private-theming": "packages/mui-private-theming/build",
- "@mui/styled-engine-sc": "packages/mui-styled-engine-sc/build",
"@mui/styled-engine": "packages/mui-styled-engine/build",
+ "@mui/styled-engine-sc": "packages/mui-styled-engine-sc/build",
"@mui/styles": "packages/mui-styles/build",
"@mui/system": "packages/mui-system/build",
"@mui/types": "packages/mui-types/build",
"@mui/utils": "packages/mui-utils/build",
"@mui-internal/docs-utils": "packages/docs-utils",
- "@mui-internal/typescript-to-proptypes": "packages/typescript-to-proptypes"
+ "@mui/zero-runtime": "packages/zero-runtime",
+ "@mui/zero-unplugin": "packages/zero-unplugin",
+ "@mui/zero-vite-plugin": "packages/zero-vite-plugin",
+ "@mui/zero-next-plugin": "packages/zero-next-plugin"
},
"sandboxes": [
"/examples/material-ui-cra-ts",
diff --git a/.eslintignore b/.eslintignore
index 859965ff105a95..d6b5b184b02ed5 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -26,7 +26,7 @@
/packages/zero-runtime/tests/fixtures/
/packages/zero-next-plugin/loader.js
# Ignore fixtures
-/packages/typescript-to-proptypes/test/*/*
+/packages-internal/scripts/typescript-to-proptypes/test/*/*
/test/bundling/fixtures/**/*.fixture.js
# just an import that reports eslint errors depending on whether the fixture (which is not checked in) exists
/test/bundling/fixtures/create-react-app/src/index.js
diff --git a/.eslintrc.js b/.eslintrc.js
index fe096a7451f376..a06ac35ae3f3ae 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -413,7 +413,7 @@ module.exports = {
},
},
{
- files: ['packages/typescript-to-proptypes/src/**/*.ts'],
+ files: ['packages-internal/scripts/typescript-to-proptypes/src/**/*.ts'],
rules: {
// Working with flags is common in TypeScript compiler
'no-bitwise': 'off',
diff --git a/.github/styles/Vocab/accept.txt b/.github/styles/Vocab/accept.txt
deleted file mode 100644
index e69de29bb2d1d6..00000000000000
diff --git a/.github/styles/Vocab/reject.txt b/.github/styles/Vocab/reject.txt
deleted file mode 100644
index e69de29bb2d1d6..00000000000000
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 6714e7b20c77d0..24255495324d9b 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -37,7 +37,7 @@ jobs:
node-version: 18
cache: 'pnpm' # https://github.com/actions/setup-node/blob/main/docs/advanced-usage.md#caching-packages-dependencies
- run: pnpm install
- - run: pnpm release:build
+ - run: pnpm build:ci
- run: pnpm release:changelog
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.github/workflows/support-stackoverflow.yml b/.github/workflows/support-stackoverflow.yml
index c9d8fa6bb0a4a1..c4c5cb41bce07e 100644
--- a/.github/workflows/support-stackoverflow.yml
+++ b/.github/workflows/support-stackoverflow.yml
@@ -22,14 +22,14 @@ jobs:
# Comment to post on issues marked as support requests. Add a link
# to a support page, or set to `false` to disable
issue-comment: |
- 👋 Thanks for using MUI Core!
+ 👋 Thanks for using our open-source projects!
We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.
- For support, please check out https://mui.com/getting-started/support/. Thanks!
+ For support with Material UI please check out https://mui.com/material-ui/getting-started/support/. Thanks!
- If you have a question on Stack Overflow, you are welcome to link to it here, it might help others.
+ If you have a question on Stack Overflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.
close-issue: true
lock-issue: false
diff --git a/.gitignore b/.gitignore
index f1ddd44449467c..1e7a18dca293e9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -39,6 +39,5 @@ package-lock.json
size-snapshot.json
docs/public/static/blog/feed/*
# vale downloaded config
-.github/styles/Google
-.github/styles/write-good
+.github/styles/
.nx/cache
diff --git a/.vale.ini b/.vale.ini
index d4d101e0960108..d1720b276aac71 100644
--- a/.vale.ini
+++ b/.vale.ini
@@ -2,20 +2,14 @@
StylesPath = .github/styles
MinAlertLevel = suggestion
-Packages = Google
+# The docs/writing-rules.zip is generated by `pnpm docs:zipRules`
+Packages = Google, docs/writing-rules.zip
[*.md]
# Ignore code injection which start with {{...
BlockIgnores = {{.*
-# Custom syle
-# BasedOnStyles = Blog
-
-Blog.ComposedWords = YES
-Blog.NamingConventions = YES
-Blog.Typos = YES
-Blog.BrandName = YES
-Blog.NoCompanyName = YES
+BasedOnStyles = writing-rules
# Google:
Google.FirstPerson = YES # Avoid first-person pronouns such as I, me, ...'.
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 50a3a15f76698f..d3e7f2c243f52e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,121 @@
# [Versions](https://mui.com/versions/)
+## v5.15.11
+
+
+
+_Feb 21, 2024_
+
+A big thanks to the 26 contributors who made this release possible.
+This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@5.15.11`
+
+- [Alert] Deprecate components and componentsProps props (#40681) @DiegoAndai
+- [Autocomplete] Caret transformation issue with font size change (#41066) @dpertsin
+- [StepLabel] Add type for StepIconComponent (#41082) @harrydigos
+- [TablePagination] Fix type error in Select props (#39137) @PaulKristoffersson
+- [Transitions] External ownerState is incorrectly forwarded to inner components (#41187) @gitstart
+- Use direct import (#40851) @siriwatknp
+
+### `@mui/material-nextjs@5.15.11`
+
+- Fix missing babel/runtime dependency in material-ui-nextjs (#41077) @siriwatknp
+
+### `@mui/system@5.15.11`
+
+- Use direct import (#40851) @siriwatknp
+- Move useMediaQuery to system (#39463) @justintoman
+- Consolidate the variants props callback arguments (#41222) @mnajdova
+- Merge props and ownerState in the variants props callback (#41219) @mnajdova
+
+### `@mui/codemod@5.15.11`
+
+- [AccordionSummary] Add contentGutters deprecation codemods (#41006) @DiegoAndai
+- [PaginationItem] Add codemod for deprecated classes (#41145) @sai6855
+
+### `@mui/utils@5.15.11`
+
+- Port `useLocalStorageState` hook from Toolpad (#41096) @Janpot
+
+### `@mui/base@5.0.0-beta.37`
+
+- [Switch] Add missing role attribute (#40907) @KirankumarAmbati
+- [TextareaAutosize] Improve implementation (#40789) @ZeeshanTamboli
+
+### `@mui/lab@5.0.0-alpha.164`
+
+- [Masonry] Ability to sort elements from left to right (#39904) @Rishi556
+
+### Docs
+
+- [base-ui] Fix focus state demo in Base UI autocomplete (#41104) @oliviertassinari
+- [base-ui] Update the Accessibility page demos design (#40995) @danilo-leal
+- [joy-ui] Fix LinearProgressWithLabel example (#41194) @khgiddon
+- [joy-ui] Fix 404 image on the docs @oliviertassinari
+- [material-ui] Add a "start now" section on the Overview page (#41137) @danilo-leal
+- [material-ui] Inform about deprecated TablePagination SelectProps usage (#41186) @gitstart
+- [material-ui] Update the Testing page's Argos link (#41170) @gregberge
+- [material-ui] Remove Masonry component and Material Design icon from the landing page template (#41080) @zanivan
+- [material-ui] Standardize all references to Material Design 3 (M3) (#40903) @samuelsycamore
+- [material-ui] Add stray fixes around a few pages (#41038) @danilo-leal
+- [material-ui][joy-ui][system] Restore and revise the Box docs (#40622) @samuelsycamore
+- [material-ui] Add simpler demo for default behavior (#40980) @zanivan
+- [system] Explain why AppRouterCacheProvider (#40909) @oliviertassinari
+- Link to react-transition group with https @oliviertassinari
+- Update broken URL hashes (#41185) @LukasTy
+- Prefer https links @oliviertassinari
+- Fix MUI Treasury link @oliviertassinari
+- Migrate the last > quotes to ::: callouts @oliviertassinari
+
+### Core
+
+- [blog] Add new product tags and stray adjustments (#41193) @danilo-leal
+- [blog] Simplify `/base-ui-2024-plans/` page (#41171) @oliviertassinari
+- [blog] Add link to Base UI API changes RFC (#41089) @michaldudak
+- [blog] Remove the "News" tag (#41208) @danilo-leal
+- [changelog] Remove @mui/system@5.15.10 (#41093) @michaldudak
+- [code-infra] Move typescript-to-proptypes to internal-scripts package (#41079) @michaldudak
+- [code-infra] Move Link to @mui/docs (#40889) @Janpot
+- [code-infra] Use `experimental.cpus` to control amount of export workers in Next.js (#41132) @Janpot
+- [code-infra] Load commonjs files in next.config.mjs with require (#41108) @Janpot
+- [code-infra] Prepare babel macros package for publishing to npm (#41178) @michaldudak
+- [code-infra] Build internal packages before publishing (#41210) @michaldudak
+- [core] Improve the release instructions (#40973) @mnajdova
+- [core] Simplify Next.js Demo Zero Runtime guide @oliviertassinari
+- [core] Fix TypeScript spelling in changelog @oliviertassinari
+- [core] Fix small detail in the autocomplete demo @oliviertassinari
+- [core] Increase node memory limit on Netlify build (#41111) @michaldudak
+- [core][Tooltip] Remove incorrect code comment (#41179) @ZeeshanTamboli
+- [core] Fix missing context display names (#41168) @oliviertassinari
+- [core][base-ui] Remove `@mui/base` dev dependency from Base UI workspace (#41216) @ZeeshanTamboli
+- [zero][demo] Fix sample next app build (#41197) @brijeshb42
+- [docs-infra] Simplify copy logic (#41167) @oliviertassinari
+- [docs-infra] New way of providing API layout config (#41106) @alexfauquette
+- [docs-infra] Reduce scrollbar width on ROC (#41148) @oliviertassinari
+- [docs-infra] Add external link arrow (#41129) @siriwatknp
+- [docs-infra] Fix external link arrow (#41181) @alexfauquette
+- [docs-infra] Flag NPM and Github as wrong spellings @oliviertassinari
+- [docs-infra] Fix display when the default props is undefined (#41114) @oliviertassinari
+- [docs-infra] Remove random layout assignment (#40862) @alexfauquette
+- [docs-infra] Add spacing and contrast improvements (#41191) @danilo-leal
+- [docs-infra] Share vale-config (#41176) @alexfauquette
+- [test] Generalize test utils (#41175) @michaldudak
+- [typescript-to-proptypes] Support using `Omit` on types with conditional properties (#41033) @flaviendelangle
+- [website] Match chart component names @oliviertassinari
+- [website] Add Marblism diamond sponsor (#41097) @rluzists1
+- [website] Add overall improvements to the Material UI page (#41075) @danilo-leal
+- [website] Fix responsive breakpoints @oliviertassinari
+- [website] Fix overloading of footer JS files @oliviertassinari
+- [website] Improve the footer's chip contrast (#41209) @danilo-leal
+- [zero] Update to latest version of wyw-in-js (#41182) @brijeshb42
+- [zero] Setup basic testing framework (#40986) @brijeshb42
+- [zero] Fix wrong CSS order by moving import to last (#41002) @siriwatknp
+- [zero] Export `extendTheme` for creating a zero-runtime theme (#40897) @siriwatknp
+- [zero] Move extendTheme to its own subpath (#41204) @brijeshb42
+
+All contributors of this release in alphabetical order: @alexfauquette, @brijeshb42, @danilo-leal, @DiegoAndai, @dpertsin, @flaviendelangle, @gitstart, @gregberge, @harrydigos, @Janpot, @justintoman, @khgiddon, @KirankumarAmbati, @LukasTy, @michaldudak, @mnajdova, @nikosgavalas, @oliviertassinari, @PaulKristoffersson, @Rishi556, @rluzists1, @sai6855, @samuelsycamore, @siriwatknp, @zanivan, @ZeeshanTamboli
+
## v5.15.10
@@ -2461,7 +2577,7 @@ A big thanks to the 25 contributors who made this release possible. Here are som
- [core] Add priority support issue template (#37671) @DanailH
- [website] Update roadmap page (#37587) @cherniavskii
- [website] Add CSP to limit iframes to self @oliviertassinari
-- [website] Link mui-x Stack Overflow in footer link (#37509) @richbustos
+- [website] Link mui-x Stack Overflow in footer link (#37509) @richbustos
All contributors of this release in alphabetical order: @abhinavkmrru, @alexfauquette, @bencevoros, @cherniavskii, @danilo-leal, @DiegoAndai, @DIWAKARKASHYAP, @flaviendelangle, @gitstart, @hbjORbj, @ivp-dev, @Janpot, @michaldudak, @mnajdova, @oliviertassinari, @Primajin, @PunitSoniME, @richbustos, @romgrk, @sai6855, @sernstberger, @siriwatknp, @SuperKXT, @vinayr, @ZeeshanTamboli
@@ -7550,7 +7666,7 @@ A big thanks to the 16 contributors who made this release possible. Here are som
- [docs] Sync translations with Crowdin (#30067) @l10nbot
- [docs] Fix link on "Custom variables" section in the Theming page #30100 @danilo-leal
- [docs] Fix justifyContent option in the Grid interactive demo (#30117) @danilo-leal
-- [docs] Add tip to help access the docs of a previous version when finding answers in Stack Overflow (#30101) @danilo-leal
+- [docs] Add tip to help access the docs of a previous version when finding answers in Stack Overflow (#30101) @danilo-leal
- [docs] Fix import example inside Unstyled Backdrop section (#30098) @TheodosiouTh
- [website] Column pinning and Tree data are out (#30136) @oliviertassinari
- [survey] Remove survey promotion items (#30122) @danilo-leal
@@ -7631,7 +7747,7 @@ A big thanks to the 25 contributors who made this release possible. Here are som
- [docs] Update nextjs-typescript-example (#29974) @huydhoang
- [docs] Add missing global state classes to API docs generator (#29945) @michaldudak
- [docs] Fix benchmarks folder link (#29981) @fourjr
-- [docs] Improve wording in Stack Overflow section of support page (#29956) @ronwarner
+- [docs] Improve wording in Stack Overflow section of support page (#29956) @ronwarner
- [docs] Remove Black Friday sale notification (#29936) @mbrookes
- [examples] Fix typos in the Remix example (#30071) @MichaelDeBoey
- [examples] Add Remix example (#29952) @mnajdova
@@ -7644,7 +7760,7 @@ A big thanks to the 25 contributors who made this release possible. Here are som
### Core
- [core] Batch small changes (#30042) @oliviertassinari
-- [core] Transition to a new Stack Overflow tag (#29967) @oliviertassinari
+- [core] Transition to a new Stack Overflow tag (#29967) @oliviertassinari
All contributors of this release in alphabetical order: @chao813, @daniel-sachs, @danilo-leal, @Domino987, @eduardomcv, @flaviendelangle, @fourjr, @genzyy, @hbjORbj, @huydhoang, @jayeclark, @jonathanrtuck, @kkorach, @l10nbot, @mbrookes, @MichaelDeBoey, @michaldudak, @mnajdova, @oliviertassinari, @ronwarner, @Semigradsky, @siriwatknp, @tasugi, @ThewBear, @ZeeshanTamboli
@@ -8920,7 +9036,7 @@ A big thanks to the 15 contributors who made this release possible. Here are som
- [website] Add spicefactory as gold sponsor @oliviertassinari
- [website] Homepage rebranding (#27488) @siriwatknp
- [website] Add Flavien to team and about pages (#27575) @flaviendelangle
-- [website] Add Ryan to Community contributors for Stack Overflow contributions (#27529) @ryancogswell
+- [website] Add Ryan to Community contributors for Stack Overflow contributions (#27529) @ryancogswell
- [website] Add references section to home (#27444) @siriwatknp
### Core
@@ -11335,7 +11451,7 @@ A big thanks to the 30 contributors who made this release possible. Here are som
#### Breaking changes
- [types] Rename the exported `Omit` type in `@material-ui/types`. (#24795) @petyosi
- The module is now called `DistributiveOmit`. The change removes the confusion with the built-in `Omit` helper introduced in TypeScript v3.5. The built-in `Omit`, while similar, is non-distributive. This leads to differences when applied to union types. [See this Stack Overflow answer for further details](https://stackoverflow.com/a/57103940/1009797).
+ The module is now called `DistributiveOmit`. The change removes the confusion with the built-in `Omit` helper introduced in TypeScript v3.5. The built-in `Omit`, while similar, is non-distributive. This leads to differences when applied to union types. [See this Stack Overflow answer for further details](https://stackoverflow.com/a/57103940/1009797).
```diff
-import { Omit } from '@material-ui/types';
diff --git a/babel.config.js b/babel.config.js
index f04e19b097f92f..41c75df442e2f2 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -22,7 +22,7 @@ module.exports = function getBabelConfig(api) {
`./packages/mui-icons-material/lib${useESModules ? '/esm' : ''}`,
),
'@mui/lab': resolveAliasPath('./packages/mui-lab/src'),
- '@mui/markdown': resolveAliasPath('./packages/markdown'),
+ '@mui/internal-markdown': resolveAliasPath('./packages/markdown'),
'@mui/styled-engine': resolveAliasPath('./packages/mui-styled-engine/src'),
'@mui/styled-engine-sc': resolveAliasPath('./packages/mui-styled-engine-sc/src'),
'@mui/styles': resolveAliasPath('./packages/mui-styles/src'),
@@ -138,7 +138,6 @@ module.exports = function getBabelConfig(api) {
alias: {
...defaultAlias,
modules: './modules',
- 'typescript-to-proptypes': './packages/typescript-to-proptypes/src',
},
root: ['./'],
},
diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.js b/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.js
index 5baf2c8e1d29f0..588d75658c9695 100644
--- a/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.js
+++ b/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.js
@@ -309,18 +309,18 @@ function Styles() {
color: ${isDarkMode ? cyan[100] : cyan[900]};
}
- &.base--focused,
- &.base--focusVisible {
+ &.Mui-focused,
+ &.Mui-focusVisible {
background-color: ${isDarkMode ? grey[800] : grey[100]};
color: ${isDarkMode ? grey[300] : grey[900]};
}
- &.base--focusVisible {
+ &.Mui-focusVisible {
box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]};
}
- &[aria-selected=true].base--focused,
- &[aria-selected=true].base--focusVisible {
+ &[aria-selected=true].Mui-focused,
+ &[aria-selected=true].Mui-focusVisible {
background-color: ${isDarkMode ? cyan[900] : cyan[100]};
color: ${isDarkMode ? cyan[100] : cyan[900]};
}
diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.tsx b/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.tsx
index 76f41d578983b9..35183255be945e 100644
--- a/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.tsx
+++ b/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.tsx
@@ -283,18 +283,18 @@ function Styles() {
color: ${isDarkMode ? cyan[100] : cyan[900]};
}
- &.base--focused,
- &.base--focusVisible {
+ &.Mui-focused,
+ &.Mui-focusVisible {
background-color: ${isDarkMode ? grey[800] : grey[100]};
color: ${isDarkMode ? grey[300] : grey[900]};
}
- &.base--focusVisible {
+ &.Mui-focusVisible {
box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]};
}
- &[aria-selected=true].base--focused,
- &[aria-selected=true].base--focusVisible {
+ &[aria-selected=true].Mui-focused,
+ &[aria-selected=true].Mui-focusVisible {
background-color: ${isDarkMode ? cyan[900] : cyan[100]};
color: ${isDarkMode ? cyan[100] : cyan[900]};
}
diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js b/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js
index c38910d1fdaa7d..851e5555d194c3 100644
--- a/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js
+++ b/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js
@@ -237,18 +237,18 @@ const StyledOption = styled('li')(
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
- &.base--focused,
- &.base--focusVisible {
+ &.Mui-focused,
+ &.Mui-focusVisible {
background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
}
- &.base--focusVisible {
+ &.Mui-focusVisible {
box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
}
- &[aria-selected=true].base--focused,
- &[aria-selected=true].base--focusVisible {
+ &[aria-selected=true].Mui-focused,
+ &[aria-selected=true].Mui-focusVisible {
background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.tsx b/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.tsx
index dcf69e4e056e30..31414d16949692 100644
--- a/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.tsx
+++ b/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.tsx
@@ -220,18 +220,18 @@ const StyledOption = styled('li')(
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
- &.base--focused,
- &.base--focusVisible {
+ &.Mui-focused,
+ &.Mui-focusVisible {
background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
}
- &.base--focusVisible {
+ &.Mui-focusVisible {
box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
}
- &[aria-selected=true].base--focused,
- &[aria-selected=true].base--focusVisible {
+ &[aria-selected=true].Mui-focused,
+ &[aria-selected=true].Mui-focusVisible {
background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
diff --git a/docs/data/base/components/autocomplete/ControlledStates.js b/docs/data/base/components/autocomplete/ControlledStates.js
index 4df012ced60112..feaaf24ecc9d2c 100644
--- a/docs/data/base/components/autocomplete/ControlledStates.js
+++ b/docs/data/base/components/autocomplete/ControlledStates.js
@@ -171,18 +171,18 @@ const Option = styled('li')(
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
- &.base--focused,
- &.base--focusVisible {
+ &.Mui-focused,
+ &.Mui-focusVisible {
background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
}
- &.base--focusVisible {
+ &.Mui-focusVisible {
box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
}
- &[aria-selected=true].base--focused,
- &[aria-selected=true].base--focusVisible {
+ &[aria-selected=true].Mui-focused,
+ &[aria-selected=true].Mui-focusVisible {
background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
diff --git a/docs/data/base/components/autocomplete/ControlledStates.tsx b/docs/data/base/components/autocomplete/ControlledStates.tsx
index 7ff8f47074e93a..2e241a1142f73a 100644
--- a/docs/data/base/components/autocomplete/ControlledStates.tsx
+++ b/docs/data/base/components/autocomplete/ControlledStates.tsx
@@ -171,18 +171,18 @@ const Option = styled('li')(
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
- &.base--focused,
- &.base--focusVisible {
+ &.Mui-focused,
+ &.Mui-focusVisible {
background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
}
- &.base--focusVisible {
+ &.Mui-focusVisible {
box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
}
- &[aria-selected=true].base--focused,
- &[aria-selected=true].base--focusVisible {
+ &[aria-selected=true].Mui-focused,
+ &[aria-selected=true].Mui-focusVisible {
background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
diff --git a/docs/data/base/components/autocomplete/UseAutocomplete.js b/docs/data/base/components/autocomplete/UseAutocomplete.js
index a65f993e7ff87f..710c7ac50c3271 100644
--- a/docs/data/base/components/autocomplete/UseAutocomplete.js
+++ b/docs/data/base/components/autocomplete/UseAutocomplete.js
@@ -160,18 +160,18 @@ const Option = styled('li')(
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
- &.base--focused,
- &.base--focusVisible {
+ &.Mui-focused,
+ &.Mui-focusVisible {
background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
}
- &.base--focusVisible {
+ &.Mui-focusVisible {
box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
}
- &[aria-selected=true].base--focused,
- &[aria-selected=true].base--focusVisible {
+ &[aria-selected=true].Mui-focused,
+ &[aria-selected=true].Mui-focusVisible {
background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
diff --git a/docs/data/base/components/autocomplete/UseAutocomplete.tsx b/docs/data/base/components/autocomplete/UseAutocomplete.tsx
index 3c66fda3c3028c..6f038a7051c7b3 100644
--- a/docs/data/base/components/autocomplete/UseAutocomplete.tsx
+++ b/docs/data/base/components/autocomplete/UseAutocomplete.tsx
@@ -162,18 +162,18 @@ const Option = styled('li')(
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
- &.base--focused,
- &.base--focusVisible {
+ &.Mui-focused,
+ &.Mui-focusVisible {
background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
}
- &.base--focusVisible {
+ &.Mui-focusVisible {
box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
}
- &[aria-selected=true].base--focused,
- &[aria-selected=true].base--focusVisible {
+ &[aria-selected=true].Mui-focused,
+ &[aria-selected=true].Mui-focusVisible {
background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
diff --git a/docs/data/base/components/autocomplete/UseAutocompletePopper.js b/docs/data/base/components/autocomplete/UseAutocompletePopper.js
index 9c7375bd47c9a8..12ebf73cc66855 100644
--- a/docs/data/base/components/autocomplete/UseAutocompletePopper.js
+++ b/docs/data/base/components/autocomplete/UseAutocompletePopper.js
@@ -184,18 +184,18 @@ const Option = styled('li')(
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
- &.base--focused,
- &.base--focusVisible {
+ &.Mui-focused,
+ &.Mui-focusVisible {
background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
}
- &.base--focusVisible {
+ &.Mui-focusVisible {
box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
}
- &[aria-selected=true].base--focused,
- &[aria-selected=true].base--focusVisible {
+ &[aria-selected=true].Mui-focused,
+ &[aria-selected=true].Mui-focusVisible {
background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
diff --git a/docs/data/base/components/autocomplete/UseAutocompletePopper.tsx b/docs/data/base/components/autocomplete/UseAutocompletePopper.tsx
index db8d4dfbe52884..74c6e775557fea 100644
--- a/docs/data/base/components/autocomplete/UseAutocompletePopper.tsx
+++ b/docs/data/base/components/autocomplete/UseAutocompletePopper.tsx
@@ -192,18 +192,18 @@ const Option = styled('li')(
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
- &.base--focused,
- &.base--focusVisible {
+ &.Mui-focused,
+ &.Mui-focusVisible {
background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
}
- &.base--focusVisible {
+ &.Mui-focusVisible {
box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
}
- &[aria-selected=true].base--focused,
- &[aria-selected=true].base--focusVisible {
+ &[aria-selected=true].Mui-focused,
+ &[aria-selected=true].Mui-focusVisible {
background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
diff --git a/docs/data/base/getting-started/support/support.md b/docs/data/base/getting-started/support/support.md
index 20ab84f10ce8fe..68e91bdf0a8683 100644
--- a/docs/data/base/getting-started/support/support.md
+++ b/docs/data/base/getting-started/support/support.md
@@ -39,9 +39,9 @@ You have a few possible options to provide it:
- You can use a starter React template to build a reproduction case with [JavaScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react) or [TypeScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react-ts).
-## Stack Overflow
+## Stack Overflow
-We use Stack Overflow for how-to questions. Answers are crowdsourced from expert developers in the Base UI community as well as Base UI maintainers.
+We use Stack Overflow for how-to questions. Answers are crowdsourced from expert developers in the Base UI community as well as Base UI maintainers.
You can search through existing questions and answers to see if someone has asked a similar question using the [base-ui tags](https://stackoverflow.com/questions/tagged/base-ui):
@@ -84,7 +84,7 @@ Our tools are used by thousands of developers and teams all around the world, ma
You can join Discord to engage in lively discussions, share your projects, and interact with developers just like you from all around the world. We'd love for you to join us!
:::warning
-How-to questions are not accepted on Discord, they should be asked on [Stack Overflow](#stack-overflow).
+How-to questions are not accepted on Discord, they should be asked on [Stack Overflow](#stack-overflow).
:::
## Custom work
diff --git a/docs/data/joy/components/accordion/accordion.md b/docs/data/joy/components/accordion/accordion.md
index 0987a2c763a105..73b129676291ca 100644
--- a/docs/data/joy/components/accordion/accordion.md
+++ b/docs/data/joy/components/accordion/accordion.md
@@ -14,10 +14,10 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
Joy UI provides four accordion-related components:
-- [`AccordionGroup`](#basic-usage): A container that groups multiple accordions. It **does not** control the state of each accordion.
-- [`Accordion`](#basic-usage): A component that contains the expansion logic and send to AccordionSummary and AccordionDetails.
-- [`AccordionSummary`](#basic-usage): A header of the accordion which contain a button that triggers the expansion.
-- [`AccordionDetails`](#basic-usage): A wrapper for the accordion details.
+- [Accordion Group](#basic-usage) - a container that groups multiple accordions. It **does not** control the state of each accordion.
+- [Accordion](#basic-usage) - a component that contains the expansion logic and send to AccordionSummary and AccordionDetails.
+- [Accordion Summary](#basic-usage) - a header of the accordion which contain a button that triggers the expansion.
+- [Accordion Details](#basic-usage) - a wrapper for the accordion details.
{{"demo": "AccordionUsage.js", "hideToolbar": true, "bg": "gradient"}}
diff --git a/docs/data/joy/components/aspect-ratio/aspect-ratio.md b/docs/data/joy/components/aspect-ratio/aspect-ratio.md
index 1f33d0043ae438..96e0eb8d7a0012 100644
--- a/docs/data/joy/components/aspect-ratio/aspect-ratio.md
+++ b/docs/data/joy/components/aspect-ratio/aspect-ratio.md
@@ -14,9 +14,7 @@ Aspect Ratio is a wrapper component for quickly resizing content to conform to y
Media content like images can be stretched, resized, and cropped based on the CSS `object-fit` property.
:::info
-A [native CSS `aspect-ratio` property](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) does exist, but we does not plan to implement it in Joy UI until browser compatibility increases to at least 94%.
-As of Q4 2022, compatibility is at 90%.
-Source: [Can I use…](https://caniuse.com/?search=aspect-ratio)
+A [native CSS `aspect-ratio` property](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) does exist, and we plan to implement it in Joy UI soon.
:::
## Basics
@@ -116,9 +114,7 @@ The Aspect Ratio component can be a handy tool for creating a square container f
### Mobile carousel
-:::warning
-In designs like this, make sure to assign a `minWidth` value to prevent the Aspect Ratio component from shrinking.
-:::
+In designs like this, ensure to assign a `minWidth` value to prevent the Aspect Ratio component from shrinking.
{{"demo": "CarouselRatio.js"}}
diff --git a/docs/data/joy/components/box/BoxBasic.js b/docs/data/joy/components/box/BoxBasic.js
new file mode 100644
index 00000000000000..e51c2b8df68ab3
--- /dev/null
+++ b/docs/data/joy/components/box/BoxBasic.js
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+
+export default function BoxBasic() {
+ return (
+
+ This Box renders as an HTML section element.
+
+ );
+}
diff --git a/docs/data/joy/components/box/BoxBasic.tsx b/docs/data/joy/components/box/BoxBasic.tsx
new file mode 100644
index 00000000000000..e51c2b8df68ab3
--- /dev/null
+++ b/docs/data/joy/components/box/BoxBasic.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+
+export default function BoxBasic() {
+ return (
+
+ This Box renders as an HTML section element.
+
+ );
+}
diff --git a/docs/data/joy/components/box/BoxBasic.tsx.preview b/docs/data/joy/components/box/BoxBasic.tsx.preview
new file mode 100644
index 00000000000000..d22b5b82187b80
--- /dev/null
+++ b/docs/data/joy/components/box/BoxBasic.tsx.preview
@@ -0,0 +1,2 @@
+
+ This Box renders as an HTML section element.
diff --git a/docs/data/joy/components/box/BoxSx.js b/docs/data/joy/components/box/BoxSx.js
new file mode 100644
index 00000000000000..cb9b66f14d6a7e
--- /dev/null
+++ b/docs/data/joy/components/box/BoxSx.js
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Box, ThemeProvider } from '@mui/joy';
+
+export default function BoxSx() {
+ return (
+
+
+
+ );
+}
diff --git a/docs/data/joy/components/box/BoxSx.tsx b/docs/data/joy/components/box/BoxSx.tsx
new file mode 100644
index 00000000000000..cb9b66f14d6a7e
--- /dev/null
+++ b/docs/data/joy/components/box/BoxSx.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Box, ThemeProvider } from '@mui/joy';
+
+export default function BoxSx() {
+ return (
+
+
+
+ );
+}
diff --git a/docs/data/joy/components/box/BoxSystemProps.js b/docs/data/joy/components/box/BoxSystemProps.js
new file mode 100644
index 00000000000000..df4076cc72d285
--- /dev/null
+++ b/docs/data/joy/components/box/BoxSystemProps.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+
+export default function BoxSystemProps() {
+ return (
+
+ This Box uses MUI System props for quick customization.
+
+ );
+}
diff --git a/docs/data/joy/components/box/BoxSystemProps.tsx b/docs/data/joy/components/box/BoxSystemProps.tsx
new file mode 100644
index 00000000000000..df4076cc72d285
--- /dev/null
+++ b/docs/data/joy/components/box/BoxSystemProps.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+
+export default function BoxSystemProps() {
+ return (
+
+ This Box uses MUI System props for quick customization.
+
+ );
+}
diff --git a/docs/data/joy/components/box/BoxSystemProps.tsx.preview b/docs/data/joy/components/box/BoxSystemProps.tsx.preview
new file mode 100644
index 00000000000000..b0decb0904b5a3
--- /dev/null
+++ b/docs/data/joy/components/box/BoxSystemProps.tsx.preview
@@ -0,0 +1,2 @@
+
+ This Box uses MUI System props for quick customization.
diff --git a/docs/data/joy/components/box/box.md b/docs/data/joy/components/box/box.md
index 599fb5832322ce..0194851a2698bf 100644
--- a/docs/data/joy/components/box/box.md
+++ b/docs/data/joy/components/box/box.md
@@ -5,13 +5,57 @@ components: Box
githubLabel: 'component: Box'
---
+
+
# Box
The Box component is a generic, theme-aware container with access to CSS utilities from MUI System.
-:::warning
-Please refer to the [Box](/system/react-box/) component page in the MUI System docs for demos and details on usage.
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
+## Introduction
+
+The Box component is a generic container for grouping other components.
+It's a fundamental building block when working with Joy UI—you can think of it as a `
` with extra built-in features, like access to your app's theme and the [`sx` prop](/system/getting-started/the-sx-prop/).
+
+### Usage
+
+The Box component differs from other containers available in Joy UI in that its usage is intended to be multipurpose and open-ended, just like a `
`.
+Components like [Stack](/joy-ui/react-stack/) and [Sheet](/joy-ui/react-sheet/), by contrast, feature usage-specific props that make them ideal for certain use cases: Stack for one-dimensional layouts, and Sheet for surfaces that need access to Joy UI's global variants.
+
+## Basics
+
+```jsx
+import Box from '@mui/joy/Box';
+```
+
+The Box component renders as a `
` by default, but you can swap in any other valid HTML tag or React component using the `component` prop.
+The demo below replaces the `
` with a `` element:
+
+{{"demo": "BoxBasic.js", "defaultCodeOpen": true }}
+
+## Customization
+
+### With MUI System props
+
+As a CSS utility component, the Box supports all [MUI System properties](/system/properties/).
+You can use them as props directly on the component.
+
+{{"demo": "BoxSystemProps.js", "defaultCodeOpen": true }}
+
+### With the sx prop
+
+Use the [`sx` prop](/system/getting-started/the-sx-prop/) to quickly customize any Box instance using a superset of CSS that has access to all the style functions and theme-aware properties exposed in the MUI System package.
+The demo below shows how to apply colors from the theme using this prop:
+
+{{"demo": "BoxSx.js", "defaultCodeOpen": true }}
+
+## Anatomy
+
+The Box component is composed of a single root `
` element:
-The Box component is a part of the standalone [MUI System](/system/getting-started/) utility library.
-It is re-exported from `@mui/joy` for your convenience.
-:::
+```html
+
+
+
+```
diff --git a/docs/data/joy/components/breadcrumbs/breadcrumbs.md b/docs/data/joy/components/breadcrumbs/breadcrumbs.md
index fc0d593cac82d4..f1ed8756bd9cd8 100644
--- a/docs/data/joy/components/breadcrumbs/breadcrumbs.md
+++ b/docs/data/joy/components/breadcrumbs/breadcrumbs.md
@@ -93,11 +93,9 @@ As an alternative to the behavior of the condensed demo above, consider adding a
## Accessibility
-(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/)
-
Be sure to add an informative `aria-label` description to the Breadcrumbs component.
-The following features are included to optimize the component's baseline accessibility:
+The following features, which follows [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/), are included to optimize the component's baseline accessibility:
- The set of links is structured using an ordered list (``).
- Visual separators between links are hidden with `aria-hidden` to prevent screen readers from announcing them.
diff --git a/docs/data/joy/components/card/CardUsage.js b/docs/data/joy/components/card/CardUsage.js
index e2876a32355570..15df5a0fc7c603 100644
--- a/docs/data/joy/components/card/CardUsage.js
+++ b/docs/data/joy/components/card/CardUsage.js
@@ -66,10 +66,12 @@ export default function CardUsage() {
{"Yosemite National Park is in California's Sierra Nevada mountains."}
-
diff --git a/docs/data/joy/components/grid/grid.md b/docs/data/joy/components/grid/grid.md
index c50d0f23af10d3..ff29fb560ae99f 100644
--- a/docs/data/joy/components/grid/grid.md
+++ b/docs/data/joy/components/grid/grid.md
@@ -14,7 +14,7 @@ githubLabel: 'component: Grid'
The Grid component, based on a 12-column grid layout, creates visual consistency between layouts while allowing flexibility across a wide variety of designs.
:::warning
-The `Grid` component shouldn't be confused with a data grid; it is closer to a layout grid. For a data grid head to the [`DataGrid`](/x/react-data-grid/) component.
+The `Grid` component shouldn't be confused with a data grid; it is closer to a layout grid. For a data grid head to the [MUI X Data Grid`](/x/react-data-grid/) component.
:::
## Basics
diff --git a/docs/data/joy/components/input/DebouncedInput.js b/docs/data/joy/components/input/DebouncedInput.js
index 0e754c0d7a67fb..7955a340238075 100644
--- a/docs/data/joy/components/input/DebouncedInput.js
+++ b/docs/data/joy/components/input/DebouncedInput.js
@@ -10,11 +10,8 @@ function DebounceInput(props) {
const timerRef = React.useRef();
const handleChange = (event) => {
- if (timerRef.current) {
- clearTimeout(timerRef.current);
- }
-
- timerRef.current = window.setTimeout(() => {
+ clearTimeout(timerRef.current);
+ timerRef.current = setTimeout(() => {
handleDebounce(event.target.value);
}, debounceTimeout);
};
diff --git a/docs/data/joy/components/input/DebouncedInput.tsx b/docs/data/joy/components/input/DebouncedInput.tsx
index ed4db9dc6a53ad..927d37954daedf 100644
--- a/docs/data/joy/components/input/DebouncedInput.tsx
+++ b/docs/data/joy/components/input/DebouncedInput.tsx
@@ -11,14 +11,11 @@ type DebounceProps = {
function DebounceInput(props: InputProps & DebounceProps) {
const { handleDebounce, debounceTimeout, ...rest } = props;
- const timerRef = React.useRef();
+ const timerRef = React.useRef>();
const handleChange = (event: React.ChangeEvent) => {
- if (timerRef.current) {
- clearTimeout(timerRef.current);
- }
-
- timerRef.current = window.setTimeout(() => {
+ clearTimeout(timerRef.current);
+ timerRef.current = setTimeout(() => {
handleDebounce(event.target.value);
}, debounceTimeout);
};
diff --git a/docs/data/joy/components/linear-progress/LinearProgressWithLabel.js b/docs/data/joy/components/linear-progress/LinearProgressWithLabel.js
index 1ea4e6fb393cae..19cd19aadc50d9 100644
--- a/docs/data/joy/components/linear-progress/LinearProgressWithLabel.js
+++ b/docs/data/joy/components/linear-progress/LinearProgressWithLabel.js
@@ -1,6 +1,7 @@
import * as React from 'react';
import LinearProgress from '@mui/joy/LinearProgress';
import Typography from '@mui/joy/Typography';
+import Box from '@mui/joy/Box';
export default function LinearProgressWithLabel() {
const [progress, setProgress] = React.useState(0);
@@ -16,28 +17,35 @@ export default function LinearProgressWithLabel() {
}, []);
return (
-
-
- LOADING… {`${Math.round(progress)}%`}
-
-
+
+ LOADING… {`${Math.round(progress)}%`}
+
+
+
);
}
diff --git a/docs/data/joy/components/linear-progress/LinearProgressWithLabel.tsx b/docs/data/joy/components/linear-progress/LinearProgressWithLabel.tsx
index 1ea4e6fb393cae..19cd19aadc50d9 100644
--- a/docs/data/joy/components/linear-progress/LinearProgressWithLabel.tsx
+++ b/docs/data/joy/components/linear-progress/LinearProgressWithLabel.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import LinearProgress from '@mui/joy/LinearProgress';
import Typography from '@mui/joy/Typography';
+import Box from '@mui/joy/Box';
export default function LinearProgressWithLabel() {
const [progress, setProgress] = React.useState(0);
@@ -16,28 +17,35 @@ export default function LinearProgressWithLabel() {
}, []);
return (
-
-
- LOADING… {`${Math.round(progress)}%`}
-
-
+
+ LOADING… {`${Math.round(progress)}%`}
+
+
+
);
}
diff --git a/docs/data/joy/components/link/link.md b/docs/data/joy/components/link/link.md
index d404662baab1b9..a8672826060777 100644
--- a/docs/data/joy/components/link/link.md
+++ b/docs/data/joy/components/link/link.md
@@ -149,7 +149,7 @@ When using `target="_blank"` with links to pages on another site, the [Google Ch
## Accessibility
-Here are a few tips for ensuring an accessible link component, based on [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/link/).
+Here are a few tips for ensuring an accessible link component, based on [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/link/).
- **Copywriting:** Avoid generic words as calls to action, such as "click here" or "go to".
Instead, use [descriptive text](https://developers.google.com/web/tools/lighthouse/audits/descriptive-link-text) to inform the user about what they'll find when they click the link.
diff --git a/docs/data/joy/components/menu/menu.md b/docs/data/joy/components/menu/menu.md
index 4b091c9202a29b..b44966169d7825 100644
--- a/docs/data/joy/components/menu/menu.md
+++ b/docs/data/joy/components/menu/menu.md
@@ -15,11 +15,11 @@ unstyled: /base-ui/react-menu/
Joy UI provides five menu-related components:
-- `MenuButton`: A button that opens a menu. It reuses the styles from [`Button`](/joy-ui/react-button/).
-- `Menu`: A listbox popup for wrapping the menu items which reuses the styles from [`List`](/joy-ui/react-list/).
-- `MenuItem`: A menu item which reuses the styles from [`ListItemButton`](/joy-ui/react-list/).
-- `MenuList`: A standalone listbox for composition usage. It also reuses the styles from [`List`](/joy-ui/react-list/).
-- `Dropdown`: The outermost component that wires a button with a menu. It only provides a context and does not render anything.
+- Menu Button - a button that opens a menu. It reuses the styles from [`Button`](/joy-ui/react-button/).
+- Menu - a listbox popup for wrapping the menu items which reuses the styles from [`List`](/joy-ui/react-list/).
+- Menu Item - a menu item which reuses the styles from [`ListItemButton`](/joy-ui/react-list/).
+- Menu List - a standalone listbox for composition usage. It also reuses the styles from [`List`](/joy-ui/react-list/).
+- Dropdown - the outermost component that wires a button with a menu. It only provides a context and does not render anything.
{{"demo": "MenuUsage.js", "hideToolbar": true, "bg": "gradient"}}
diff --git a/docs/data/joy/components/modal/modal.md b/docs/data/joy/components/modal/modal.md
index 94560bf5c922d8..b145842ca90c1b 100644
--- a/docs/data/joy/components/modal/modal.md
+++ b/docs/data/joy/components/modal/modal.md
@@ -246,7 +246,7 @@ See the [WAI-ARIA guide on the Dialog (Modal) pattern](https://www.w3.org/WAI/AR
```
-- Follow the [WAI-ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/) to help you set the initial focus on the most relevant element based on the content of the modal.
+- Follow the [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/) to help you set the initial focus on the most relevant element based on the content of the modal.
:::warning
A modal window can sit on top of either the parent application, or another modal window.
_All_ windows under the topmost modal are **inert**, meaning the user cannot interact with them.
diff --git a/docs/data/joy/components/radio-button/radio-button.md b/docs/data/joy/components/radio-button/radio-button.md
index 56ed05d6a188e8..d7972e23051c14 100644
--- a/docs/data/joy/components/radio-button/radio-button.md
+++ b/docs/data/joy/components/radio-button/radio-button.md
@@ -191,7 +191,7 @@ Here are a few tips to make sure you have an accessible Radio button component:
/>
```
-Visit the [WAI-ARIA documentation](https://www.w3.org/WAI/ARIA/apg/patterns/radio/) for more details.
+Visit the [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/radio/) for more details.
## Anatomy
diff --git a/docs/data/joy/components/tabs/tabs.md b/docs/data/joy/components/tabs/tabs.md
index 9291094b3a32bc..9fee006ed211d1 100644
--- a/docs/data/joy/components/tabs/tabs.md
+++ b/docs/data/joy/components/tabs/tabs.md
@@ -161,7 +161,7 @@ In this example, each Tab is painted with a color from the theme when selected.
## Accessibility
-To ensure proper accessibility, the [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/#wai-aria-roles-states-and-properties-22) recommends associating a label with the Tabs component.
+To ensure proper accessibility, the [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/#wai-aria-roles-states-and-properties-22) recommends associating a label with the Tabs component.
There are two options to accomplish this:
### Using the id attribute
diff --git a/docs/data/joy/components/tooltip/tooltip.md b/docs/data/joy/components/tooltip/tooltip.md
index 35b1b2d9a428d5..4350e40a1523d3 100644
--- a/docs/data/joy/components/tooltip/tooltip.md
+++ b/docs/data/joy/components/tooltip/tooltip.md
@@ -70,7 +70,7 @@ The `title` prop can receive a custom React element.
## Accessibility
-(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/)
+Here are a few tips for ensuring an accessible link component, based on [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/):
By default, the tooltip only labels its child element.
This is notably different from `title` which can either label **or** describe its child depending on whether the child already has a label.
diff --git a/docs/data/joy/customization/approaches/approaches.md b/docs/data/joy/customization/approaches/approaches.md
index 23777ad18198ff..3213f051c90ee5 100644
--- a/docs/data/joy/customization/approaches/approaches.md
+++ b/docs/data/joy/customization/approaches/approaches.md
@@ -2,11 +2,11 @@
Learn which approach is recommended, depending on the situation, to customize Joy UI components.
-- For customizing only a specific instance of a given component, [_use the `sx` prop_](#sx-prop).
+- For customizing only a specific instance of a given component, [_use the `sx` prop_](#the-sx-prop).
- To ensure every instance of a given component looks the same across you app, [_use theming_](#theming).
- To create something that Joy UI doesn't support out of the box but still has design consistency, create a [_reusable component_](#reusable-component) that uses Joy UI's theme design tokens.
-## `sx` prop
+## The sx prop
The `sx` prop provides a superset of CSS (contains all CSS properties/selectors, in addition to custom ones) that maps values directly from the theme, depending on the CSS property used.
diff --git a/docs/data/joy/customization/theme-colors/theme-colors.md b/docs/data/joy/customization/theme-colors/theme-colors.md
index 9d04307832c2dc..6c46b2fec74994 100644
--- a/docs/data/joy/customization/theme-colors/theme-colors.md
+++ b/docs/data/joy/customization/theme-colors/theme-colors.md
@@ -132,7 +132,7 @@ declare module '@mui/joy/styles' {
Adding custom tokens increases your stylesheet's bundle size, and adds an extra set of maintenance costs to your app.
These tradeoffs mean that adding new tokens is usually only worthwhile when you know that they'll be used by many components.
-As an alternative, consider using [the `sx` prop](/joy-ui/customization/approaches/#sx-prop) for one-off customizations.
+As an alternative, consider using [the `sx` prop](/joy-ui/customization/approaches/#the-sx-prop) for one-off customizations.
:::
### Adding new palettes
@@ -254,26 +254,4 @@ This removes them from the `theme` object and prevents the corresponding CSS var
For example, all default global variant color tokens comes with styles for the `:active` pseudo class.
Here's how you'd remove it from the solid variant.
-```jsx
-// ⚠️ If the value is `undefined`, it should be `undefined` for all color schemes.
-const theme = extendTheme({
- colorSchemes: {
- light: {
- palette: {
- primary: {
- solidActiveBg: undefined,
- },
- },
- },
- dark: {
- palette: {
- primary: {
- solidActiveBg: undefined,
- },
- },
- },
- },
-});
-```
-
-{{"demo": "RemoveActiveTokens.js"}}
+{{"demo": "RemoveActiveTokens.js", "defaultCodeOpen": true}}
diff --git a/docs/data/joy/getting-started/support/support.md b/docs/data/joy/getting-started/support/support.md
index b8bb49deb475b5..09c5049750f2bc 100644
--- a/docs/data/joy/getting-started/support/support.md
+++ b/docs/data/joy/getting-started/support/support.md
@@ -27,21 +27,26 @@ We require bug reports to be accompanied by a **minimal reproduction**.
It significantly increases the odds of fixing the problem.
You have a few possible options to provide it:
-- You can browse the documentation, find an example close to your use case, and then open it in a live editor:
-
-
-
-
-
-
-
-
+#### Use the live editors
-- You can use a starter React template to build a reproduction case with [JavaScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react) or [TypeScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react-ts).
+You can browse the documentation, find an example close to your use case, and then open it in a live editor:
-## Stack Overflow
+
+
+
+
+
+
+
+
-We use Stack Overflow for how-to questions. Answers are crowdsourced from expert developers in the Joy UI community as well as Joy UI maintainers.
+#### Use starter templates
+
+You can use a starter React template to build a reproduction case with [JavaScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react) or [TypeScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react-ts).
+
+## Stack Overflow
+
+We use Stack Overflow for how-to questions. Answers are crowdsourced from expert developers in the Joy UI community as well as Joy UI maintainers.
You can search through existing questions and answers to see if someone has asked a similar question using the [joy-ui tags](https://stackoverflow.com/questions/tagged/joy-ui):
@@ -84,7 +89,7 @@ Our tools are used by thousands of developers and teams all around the world, ma
You can join Discord to engage in lively discussions, share your projects, and interact with developers just like you from all around the world. We'd love for you to join us!
:::warning
-How-to questions are not accepted on Discord, they should be asked on [Stack Overflow](#stack-overflow).
+How-to questions are not accepted on Discord, they should be asked on [Stack Overflow](#stack-overflow).
:::
## Custom work
diff --git a/docs/data/joy/integrations/material-ui/material-ui.md b/docs/data/joy/integrations/material-ui/material-ui.md
index 432a599743f157..955424df5ea55a 100644
--- a/docs/data/joy/integrations/material-ui/material-ui.md
+++ b/docs/data/joy/integrations/material-ui/material-ui.md
@@ -18,7 +18,7 @@ Additionally, keep these in mind when using them together:
- Both of them use [MUI System](/system/getting-started/) as their style engine, which uses React context for theming.
- Theme scoping must be done on one of the libraries.
-## Prerequisite
+### Prerequisites
- Have `@mui/material` and `@mui/joy` installed in your project.
- The version of both libraries must be [v5.12.0](https://github.com/mui/material-ui/releases/tag/v5.12.0) or higher.
diff --git a/docs/data/joy/pages.ts b/docs/data/joy/pages.ts
index d7b83a16585e6c..d18ded364dd1a6 100644
--- a/docs/data/joy/pages.ts
+++ b/docs/data/joy/pages.ts
@@ -47,7 +47,6 @@ const pages: readonly MuiPage[] = [
{
pathname: '/joy-ui/react-toggle-button-group',
title: 'Toggle Button Group',
- newFeature: true,
},
],
},
@@ -74,15 +73,15 @@ const pages: readonly MuiPage[] = [
{ pathname: '/joy-ui/react-circular-progress', title: 'Circular Progress' },
{ pathname: '/joy-ui/react-linear-progress', title: 'Linear Progress' },
{ pathname: '/joy-ui/react-modal' },
- { pathname: '/joy-ui/react-skeleton', newFeature: true },
- { pathname: '/joy-ui/react-snackbar', newFeature: true },
+ { pathname: '/joy-ui/react-skeleton' },
+ { pathname: '/joy-ui/react-snackbar' },
],
},
{
pathname: '/joy-ui/components/surfaces',
subheader: 'surfaces',
children: [
- { pathname: '/joy-ui/react-accordion', newFeature: true },
+ { pathname: '/joy-ui/react-accordion' },
{ pathname: '/joy-ui/react-card' },
{ pathname: '/joy-ui/react-sheet' },
],
@@ -92,10 +91,10 @@ const pages: readonly MuiPage[] = [
subheader: 'navigation',
children: [
{ pathname: '/joy-ui/react-breadcrumbs' },
- { pathname: '/joy-ui/react-drawer', newFeature: true },
+ { pathname: '/joy-ui/react-drawer' },
{ pathname: '/joy-ui/react-link' },
{ pathname: '/joy-ui/react-menu' },
- { pathname: '/joy-ui/react-stepper', newFeature: true },
+ { pathname: '/joy-ui/react-stepper' },
{ pathname: '/joy-ui/react-tabs' },
],
},
diff --git a/docs/data/material/components/box/BoxBasic.js b/docs/data/material/components/box/BoxBasic.js
new file mode 100644
index 00000000000000..6f93223d92cd53
--- /dev/null
+++ b/docs/data/material/components/box/BoxBasic.js
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+
+export default function BoxBasic() {
+ return (
+
+ This Box renders as an HTML section element.
+
+ );
+}
diff --git a/docs/data/material/components/box/BoxBasic.tsx b/docs/data/material/components/box/BoxBasic.tsx
new file mode 100644
index 00000000000000..6f93223d92cd53
--- /dev/null
+++ b/docs/data/material/components/box/BoxBasic.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+
+export default function BoxBasic() {
+ return (
+
+ This Box renders as an HTML section element.
+
+ );
+}
diff --git a/docs/data/material/components/box/BoxBasic.tsx.preview b/docs/data/material/components/box/BoxBasic.tsx.preview
new file mode 100644
index 00000000000000..d22b5b82187b80
--- /dev/null
+++ b/docs/data/material/components/box/BoxBasic.tsx.preview
@@ -0,0 +1,2 @@
+
+ This Box renders as an HTML section element.
diff --git a/docs/data/material/components/box/BoxComponent.js b/docs/data/material/components/box/BoxComponent.js
deleted file mode 100644
index 5376e3c004a69a..00000000000000
--- a/docs/data/material/components/box/BoxComponent.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-
-export default function BoxComponent() {
- return (
-
- Save
-
- );
-}
diff --git a/docs/data/material/components/box/BoxComponent.tsx b/docs/data/material/components/box/BoxComponent.tsx
deleted file mode 100644
index 5376e3c004a69a..00000000000000
--- a/docs/data/material/components/box/BoxComponent.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-
-export default function BoxComponent() {
- return (
-
- Save
-
- );
-}
diff --git a/docs/data/material/components/box/BoxComponent.tsx.preview b/docs/data/material/components/box/BoxComponent.tsx.preview
deleted file mode 100644
index 43eef49d466ae8..00000000000000
--- a/docs/data/material/components/box/BoxComponent.tsx.preview
+++ /dev/null
@@ -1 +0,0 @@
-Save
\ No newline at end of file
diff --git a/docs/data/material/components/box/BoxSx.js b/docs/data/material/components/box/BoxSx.js
index 66080ed99ef7d9..490d11833351b8 100644
--- a/docs/data/material/components/box/BoxSx.js
+++ b/docs/data/material/components/box/BoxSx.js
@@ -1,18 +1,29 @@
import * as React from 'react';
-import Box from '@mui/material/Box';
+import { Box, ThemeProvider } from '@mui/material';
export default function BoxSx() {
return (
-
+ >
+
+
);
}
diff --git a/docs/data/material/components/box/BoxSx.tsx b/docs/data/material/components/box/BoxSx.tsx
index 66080ed99ef7d9..490d11833351b8 100644
--- a/docs/data/material/components/box/BoxSx.tsx
+++ b/docs/data/material/components/box/BoxSx.tsx
@@ -1,18 +1,29 @@
import * as React from 'react';
-import Box from '@mui/material/Box';
+import { Box, ThemeProvider } from '@mui/material';
export default function BoxSx() {
return (
-
+ >
+
+
);
}
diff --git a/docs/data/material/components/box/BoxSx.tsx.preview b/docs/data/material/components/box/BoxSx.tsx.preview
deleted file mode 100644
index 88ed3ecbb91e7d..00000000000000
--- a/docs/data/material/components/box/BoxSx.tsx.preview
+++ /dev/null
@@ -1,11 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/data/material/components/box/BoxSystemProps.js b/docs/data/material/components/box/BoxSystemProps.js
new file mode 100644
index 00000000000000..73fcd2bcf4d596
--- /dev/null
+++ b/docs/data/material/components/box/BoxSystemProps.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+
+export default function BoxSystemProps() {
+ return (
+
+ This Box uses MUI System props for quick customization.
+
+ );
+}
diff --git a/docs/data/material/components/box/BoxSystemProps.tsx b/docs/data/material/components/box/BoxSystemProps.tsx
new file mode 100644
index 00000000000000..73fcd2bcf4d596
--- /dev/null
+++ b/docs/data/material/components/box/BoxSystemProps.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+
+export default function BoxSystemProps() {
+ return (
+
+ This Box uses MUI System props for quick customization.
+
+ );
+}
diff --git a/docs/data/material/components/box/BoxSystemProps.tsx.preview b/docs/data/material/components/box/BoxSystemProps.tsx.preview
new file mode 100644
index 00000000000000..b0decb0904b5a3
--- /dev/null
+++ b/docs/data/material/components/box/BoxSystemProps.tsx.preview
@@ -0,0 +1,2 @@
+
+ This Box uses MUI System props for quick customization.
diff --git a/docs/data/material/components/box/box.md b/docs/data/material/components/box/box.md
index 8a0d4906f7483a..144c14bee4a1d5 100644
--- a/docs/data/material/components/box/box.md
+++ b/docs/data/material/components/box/box.md
@@ -5,13 +5,57 @@ components: Box
githubLabel: 'component: Box'
---
+
+
# Box
The Box component is a generic, theme-aware container with access to CSS utilities from MUI System.
-:::warning
-Please refer to the [Box](/system/react-box/) component page in the MUI System docs for demos and details on usage.
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
+## Introduction
+
+The Box component is a generic container for grouping other components.
+It's a fundamental building block when working with Material UI—you can think of it as a `
` with extra built-in features, like access to your app's theme and the [`sx` prop](/system/getting-started/the-sx-prop/).
+
+### Usage
+
+The Box component differs from other containers available in Material UI in that its usage is intended to be multipurpose and open-ended, just like a `
`.
+Components like [Container](/material-ui/react-container/), [Stack](/material-ui/react-stack/) and [Paper](/material-ui/react-paper/), by contrast, feature usage-specific props that make them ideal for certain use cases: Container for main layout orientation, Stack for one-dimensional layouts, and Paper for elevated surfaces.
+
+## Basics
+
+```jsx
+import Box from '@mui/material/Box';
+```
+
+The Box component renders as a `
` by default, but you can swap in any other valid HTML tag or React component using the `component` prop.
+The demo below replaces the `
` with a `` element:
+
+{{"demo": "BoxBasic.js", "defaultCodeOpen": true }}
+
+## Customization
+
+### With MUI System props
+
+As a CSS utility component, the Box supports all [MUI System properties](/system/properties/).
+You can use them as props directly on the component.
+
+{{"demo": "BoxSystemProps.js", "defaultCodeOpen": true }}
+
+### With the sx prop
+
+Use the [`sx` prop](/system/getting-started/the-sx-prop/) to quickly customize any Box instance using a superset of CSS that has access to all the style functions and theme-aware properties exposed in the MUI System package.
+The demo below shows how to apply colors from the theme using this prop:
+
+{{"demo": "BoxSx.js", "defaultCodeOpen": true }}
+
+## Anatomy
+
+The Box component is composed of a single root `
` element:
-The Box component is a part of the standalone [MUI System](/system/getting-started/) utility library.
-It is re-exported from `@mui/material` for your convenience.
-:::
+```html
+
+
+
+```
diff --git a/docs/data/material/components/progress/CircularIntegration.js b/docs/data/material/components/progress/CircularIntegration.js
index c077a18947a126..1c885b355996da 100644
--- a/docs/data/material/components/progress/CircularIntegration.js
+++ b/docs/data/material/components/progress/CircularIntegration.js
@@ -31,7 +31,7 @@ export default function CircularIntegration() {
if (!loading) {
setSuccess(false);
setLoading(true);
- timer.current = window.setTimeout(() => {
+ timer.current = setTimeout(() => {
setSuccess(true);
setLoading(false);
}, 2000);
diff --git a/docs/data/material/components/progress/CircularIntegration.tsx b/docs/data/material/components/progress/CircularIntegration.tsx
index 0400d3a8066a20..c32a5957a42fb8 100644
--- a/docs/data/material/components/progress/CircularIntegration.tsx
+++ b/docs/data/material/components/progress/CircularIntegration.tsx
@@ -10,7 +10,7 @@ import SaveIcon from '@mui/icons-material/Save';
export default function CircularIntegration() {
const [loading, setLoading] = React.useState(false);
const [success, setSuccess] = React.useState(false);
- const timer = React.useRef();
+ const timer = React.useRef>();
const buttonSx = {
...(success && {
@@ -31,7 +31,7 @@ export default function CircularIntegration() {
if (!loading) {
setSuccess(false);
setLoading(true);
- timer.current = window.setTimeout(() => {
+ timer.current = setTimeout(() => {
setSuccess(true);
setLoading(false);
}, 2000);
diff --git a/docs/data/material/components/progress/DelayingAppearance.js b/docs/data/material/components/progress/DelayingAppearance.js
index feff1c6659b7e4..df2b050772e529 100644
--- a/docs/data/material/components/progress/DelayingAppearance.js
+++ b/docs/data/material/components/progress/DelayingAppearance.js
@@ -32,7 +32,7 @@ export default function DelayingAppearance() {
}
setQuery('progress');
- timerRef.current = window.setTimeout(() => {
+ timerRef.current = setTimeout(() => {
setQuery('success');
}, 2000);
};
diff --git a/docs/data/material/components/progress/DelayingAppearance.tsx b/docs/data/material/components/progress/DelayingAppearance.tsx
index c7ef8f7f90feaa..a6784fd2d359d8 100644
--- a/docs/data/material/components/progress/DelayingAppearance.tsx
+++ b/docs/data/material/components/progress/DelayingAppearance.tsx
@@ -8,7 +8,7 @@ import Typography from '@mui/material/Typography';
export default function DelayingAppearance() {
const [loading, setLoading] = React.useState(false);
const [query, setQuery] = React.useState('idle');
- const timerRef = React.useRef();
+ const timerRef = React.useRef>();
React.useEffect(
() => () => {
@@ -32,7 +32,7 @@ export default function DelayingAppearance() {
}
setQuery('progress');
- timerRef.current = window.setTimeout(() => {
+ timerRef.current = setTimeout(() => {
setQuery('success');
}, 2000);
};
diff --git a/docs/data/material/customization/color/color.md b/docs/data/material/customization/color/color.md
index 31927855df38e3..43733e40fbac28 100644
--- a/docs/data/material/customization/color/color.md
+++ b/docs/data/material/customization/color/color.md
@@ -11,7 +11,7 @@ The Material Design [color system](https://m2.material.io/design/color/) can be
The Material Design team has also built an awesome palette configuration tool: [material.io/resources/color/](https://m2.material.io/inline-tools/color/).
This can help you create a color palette for your UI, as well as measure the accessibility level of any color combination.
-
+
diff --git a/docs/data/material/discover-more/backers/backers.md b/docs/data/material/discover-more/backers/backers.md
index 311c97d56f0715..fcbc9a4025059c 100644
--- a/docs/data/material/discover-more/backers/backers.md
+++ b/docs/data/material/discover-more/backers/backers.md
@@ -8,9 +8,9 @@ Sponsorship increases the rate of bug fixes, documentation improvements, and fea
## Diamond sponsors
-
-
-
+
+
+
Diamond sponsors are those who've pledged \$1,500/month or more to the MUI organization. [Tier benefits](#diamond).
@@ -20,14 +20,14 @@ Diamond sponsors are those who've pledged \$1,500/month or more to the MUI organ
via [Open Collective](https://opencollective.com/mui-org) or via [the for-profit](https://www.patreon.com/oliviertassinari)
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
Gold sponsors are those who've pledged \$500/month or more to the MUI organization. [Tier benefits](#gold).
diff --git a/docs/data/material/getting-started/faq/faq.md b/docs/data/material/getting-started/faq/faq.md
index 9a2ef51aa355f0..b756cafbf70a9b 100644
--- a/docs/data/material/getting-started/faq/faq.md
+++ b/docs/data/material/getting-started/faq/faq.md
@@ -12,7 +12,7 @@ There are many ways to support us:
Follow us on [X](https://twitter.com/MUI_hq), like and retweet the important news. Or just talk about us with your friends.
- **Give us feedback**. Tell us what is going well or where there is improvement opportunities. Please upvote (👍) the issues that you are the most interested in seeing solved.
- **Help new users**. You can answer questions on
- [Stack Overflow](https://stackoverflow.com/questions/tagged/material-ui).
+ [Stack Overflow](https://stackoverflow.com/questions/tagged/material-ui).
- **Make changes happen**.
- Edit the documentation. At the bottom of every page, you can find an "Edit this page" button.
- Report bugs or missing features by [creating an issue](https://github.com/mui/material-ui/issues/new).
diff --git a/docs/data/material/getting-started/overview/overview.md b/docs/data/material/getting-started/overview/overview.md
index 7d9b74cde97f91..810cb82a8e5484 100644
--- a/docs/data/material/getting-started/overview/overview.md
+++ b/docs/data/material/getting-started/overview/overview.md
@@ -29,7 +29,7 @@ You can follow [this GitHub issue](https://github.com/mui/material-ui/issues/293
The [design kits](https://mui.com/design-kits/) streamline your workflow and boost consistency between designers and developers.
- **Trusted by thousands of organizations:** Material UI has the largest UI community in the React ecosystem.
It's almost as old as React itself—its history stretches back to 2014—and we're in this for the long haul.
- You can count on the community's support for years to come (e.g. [Stack Overflow](https://insights.stackoverflow.com/trends?tags=material-ui)).
+ You can count on the community's support for years to come (e.g. [Stack Overflow](https://insights.stackoverflow.com/trends?tags=material-ui)).
### Material UI vs. Base UI
diff --git a/docs/data/material/getting-started/support/support.md b/docs/data/material/getting-started/support/support.md
index 3f51f864f0dc35..6a9c7c672270d9 100644
--- a/docs/data/material/getting-started/support/support.md
+++ b/docs/data/material/getting-started/support/support.md
@@ -39,9 +39,9 @@ You have a few possible options to provide it:
- You can use a starter React template to build a reproduction case with [JavaScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react) or [TypeScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react-ts).
-## Stack Overflow
+## Stack Overflow
-We use Stack Overflow for how-to questions. Answers are crowdsourced from expert developers in the Material UI community as well as Material UI maintainers.
+We use Stack Overflow for how-to questions. Answers are crowdsourced from expert developers in the Material UI community as well as Material UI maintainers.
You can search through existing questions and answers to see if someone has asked a similar question using the [material-ui tags](https://stackoverflow.com/questions/tagged/material-ui):
@@ -89,7 +89,7 @@ Our tools are used by thousands of developers and teams all around the world, ma
You can join Discord to engage in lively discussions, share your projects, and interact with developers just like you from all around the world. We'd love for you to join us!
:::warning
-How-to questions are not accepted on Discord, they should be asked on [Stack Overflow](#stack-overflow).
+How-to questions are not accepted on Discord, they should be asked on [Stack Overflow](#stack-overflow).
:::
## Custom work
diff --git a/docs/data/material/getting-started/templates/dashboard/README.md b/docs/data/material/getting-started/templates/dashboard/README.md
index 4c192830b381e6..3415051ae20be5 100644
--- a/docs/data/material/getting-started/templates/dashboard/README.md
+++ b/docs/data/material/getting-started/templates/dashboard/README.md
@@ -5,7 +5,7 @@
1. Copy the files into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples).
-2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react, recharts.
+2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react, @mui/x-charts.
3. Import and use the `Dashboard` component.
## Demo
diff --git a/docs/data/material/integrations/nextjs/nextjs.md b/docs/data/material/integrations/nextjs/nextjs.md
index 329b68dccacd6e..044877d094ce95 100644
--- a/docs/data/material/integrations/nextjs/nextjs.md
+++ b/docs/data/material/integrations/nextjs/nextjs.md
@@ -48,6 +48,13 @@ Inside `app/layout.tsx`, import the `AppRouterCacheProvider` and wrap all elemen
}
```
+:::info
+The `AppRouterCacheProvider` component is responsible for collecting the CSS generated by MUI System on the server, as Next.js is streaming chunks of the .html page to the client.
+
+While it's not required to use the `AppRouterCacheProvider` component, it's recommended to use it to ensure that the styles are appended to the `` and not rendering in the ``.
+See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153 for why it's better.
+:::
+
#### Custom cache (optional)
Use the `options` prop to override the default [cache options](https://emotion.sh/docs/@emotion/cache#options)—for example, the code snippet below shows how to change the CSS key to `css` (the default is `mui`):
@@ -218,6 +225,13 @@ Then, inside `pages/_app.tsx`, import the `AppCacheProvider` component and rende
}
```
+:::info
+The `AppCacheProvider` component is responsible for collecting the CSS generated by MUI System on the server, as Next.js is rendering the .html page to the client.
+
+While it's not required to use the `AppCacheProvider` component, it's recommended to use it to ensure that the styles are appended to the `` and not rendering in the ``.
+See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153 for why it's better.
+:::
+
#### Custom cache (optional)
To use a custom [Emotion cache](https://emotion.sh/docs/@emotion/cache), pass it to the `emotionCache` property in `_document.tsx`:
diff --git a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
index 903eb619001eac..a6c761d92ddf4b 100644
--- a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
+++ b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
@@ -92,10 +92,11 @@ Bear in mind that the `.MuiAccordionSummary-gutters` class is applied to the com
## Alert
-Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#alert-props) below to migrate the code as described in the following sections:
+Use the [alert-props](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#alert-props) and [alert-classes](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#alert-classes) codemods below to migrate the code as described in the following sections:
```bash
npx @mui/codemod@latest deprecations/alert-props
+npx @mui/codemod@latest deprecations/alert-classes
```
### components
@@ -120,6 +121,98 @@ The Alert's `componentsProps` was deprecated in favor of `slotProps`:
/>
```
+### Composed CSS classes
+
+The CSS classes that composed the `severity` (or `variant`) and `color` prop values were removed.
+
+Here's how to migrate:
+
+```diff
+-.MuiAlert-standardSuccess
++.MuiAlert-standard.MuiAlert-colorSuccess
+-.MuiAlert-standardInfo
++.MuiAlert-standard.MuiAlert-colorInfo
+-.MuiAlert-standardWarning
++.MuiAlert-standard.MuiAlert-colorWarning
+-.MuiAlert-standardError
++.MuiAlert-standard.MuiAlert-colorError
+-.MuiAlert-outlinedSuccess
++.MuiAlert-outlined.MuiAlert-colorSuccess
+-.MuiAlert-outlinedInfo
++.MuiAlert-outlined.MuiAlert-colorInfo
+-.MuiAlert-outlinedWarning
++.MuiAlert-outlined.MuiAlert-colorWarning
+-.MuiAlert-outlinedError
++.MuiAlert-outlined.MuiAlert-colorError
+-.MuiAlert-filledSuccess
++.MuiAlert-filled.MuiAlert-colorSuccess
+-.MuiAlert-filledInfo
++.MuiAlert-filled.MuiAlert-colorInfo
+-.MuiAlert-filledWarning
++.MuiAlert-filled.MuiAlert-colorWarning
+-.MuiAlert-filledError
++.MuiAlert-filled.MuiAlert-colorError
+```
+
+```diff
+ import { alertClasses } from '@mui/material/PaginationItem';
+
+ MuiPaginationItem: {
+ styleOverrides: {
+ root: {
+- [`&.${alertClasses.standardSuccess}`]: {
++ [`&.${alertClasses.standard}.${alertClasses.colorSuccess}`]: {
+ color: 'red',
+ },
+- [`&.${alertClasses.standardInfo}`]: {
++ [`&.${alertClasses.standard}.${alertClasses.colorInfo}`]: {
+ color: 'red',
+ },
+- [`&.${alertClasses.standardWarning}`]: {
++ [`&.${alertClasses.standard}.${alertClasses.colorWarning}`]: {
+ color: 'red',
+ },
+- [`&.${alertClasses.standardError}`]: {
++ [`&.${alertClasses.standard}.${alertClasses.colorError}`]: {
+ color: 'red',
+ },
+- [`&.${alertClasses.outlinedSuccess}`]: {
++ [`&.${alertClasses.outlined}.${alertClasses.colorSuccess}`]: {
+ color: 'red',
+ },
+- [`&.${alertClasses.outlinedInfo}`]: {
++ [`&.${alertClasses.outlined}.${alertClasses.colorInfo}`]: {
+ color: 'red',
+ },
+- [`&.${alertClasses.outlinedWarning}`]: {
++ [`&.${alertClasses.outlined}.${alertClasses.colorWarning}`]: {
+ color: 'red',
+ },
+- [`&.${alertClasses.outlinedError}`]: {
++ [`&.${alertClasses.outlined}.${alertClasses.colorError}`]: {
+ color: 'red',
+ },
+- [`&.${alertClasses.filledSuccess}`]: {
++ [`&.${alertClasses.filled}.${alertClasses.colorSuccess}`]: {
+ color: 'red',
+ },
+- [`&.${alertClasses.filledInfo}`]: {
++ [`&.${alertClasses.filled}.${alertClasses.colorInfo}`]: {
+ color: 'red',
+ },
+- [`&.${alertClasses.filledWarning}`]: {
++ [`&.${alertClasses.filled}.${alertClasses.colorWarning}`]: {
+ color: 'red',
+ },
+- [`&.${alertClasses.filledError}`]: {
++ [`&.${alertClasses.filled}.${alertClasses.colorError}`]: {
+ color: 'red',
+ },
+ },
+ },
+ },
+```
+
## Avatar
Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#avatar-props) below to migrate the code as described in the following sections:
@@ -146,6 +239,424 @@ The Avatar's `imgProps` was deprecated in favor of `slotProps.img`:
/>;
```
+## Button
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#button-classes) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@latest deprecations/button-classes
+```
+
+### Composed CSS classes
+
+The CSS classes composing the `variant` and `color` prop values, as well as those composing the `variant` and `size` prop values, along with the `icon` size CSS classes, have been removed.
+
+Here's how to migrate:
+
+```diff
+-.MuiButton-textInherit
++.MuiButton-text.MuiButton-colorInherit
+-.MuiButton-textPrimary
++.MuiButton-text.MuiButton-colorPrimary
+-.MuiButton-textSecondary
++.MuiButton-text.MuiButton-colorSecondary
+-.MuiButton-textSuccess
++.MuiButton-text.MuiButton-colorSuccess
+-.MuiButton-textError
++.MuiButton-text.MuiButton-colorError
+-.MuiButton-textInfo
++.MuiButton-text.MuiButton-colorInfo
+-.MuiButton-textWarning
++.MuiButton-text.MuiButton-colorWarning
+-.MuiButton-outlinedInherit
++.MuiButton-outlined.MuiButton-colorInherit
+-.MuiButton-outlinedPrimary
++.MuiButton-outlined.MuiButton-colorPrimary
+-.MuiButton-outlinedSecondary
++.MuiButton-outlined.MuiButton-colorSecondary
+-.MuiButton-outlinedSuccess
++.MuiButton-outlined.MuiButton-colorSuccess
+-.MuiButton-outlinedError
++.MuiButton-outlined.MuiButton-colorError
+-.MuiButton-outlinedInfo
++.MuiButton-outlined.MuiButton-colorInfo
+-.MuiButton-outlinedWarning
++.MuiButton-outlined.MuiButton-colorWarning
+-.MuiButton-containedInherit
++.MuiButton-contained.MuiButton-colorInherit
+-.MuiButton-containedPrimary
++.MuiButton-contained.MuiButton-colorPrimary
+-.MuiButton-containedSecondary
++.MuiButton-contained.MuiButton-colorSecondary
+-.MuiButton-containedSuccess
++.MuiButton-contained.MuiButton-colorSuccess
+-.MuiButton-containedError
++.MuiButton-contained.MuiButton-colorError
+-.MuiButton-containedInfo
++.MuiButton-contained.MuiButton-colorInfo
+-.MuiButton-containedWarning
++.MuiButton-contained.MuiButton-colorWarning
+-.MuiButton-textSizeSmall
++.MuiButton-text.MuiButton-sizeSmall
+-.MuiButton-textSizeMedium
++.MuiButton-text.MuiButton-sizeMedium
+-.MuiButton-textSizeLarge
++.MuiButton-text.MuiButton-sizeLarge
+-.MuiButton-outlinedSizeSmall
++.MuiButton-outlined.MuiButton-sizeSmall
+-.MuiButton-outlinedSizeMedium
++.MuiButton-outlined.MuiButton-sizeMedium
+-.MuiButton-outlinedSizeLarge
++.MuiButton-outlined.MuiButton-sizeLarge
+-.MuiButton-containedSizeSmall
++.MuiButton-contained.MuiButton-sizeSmall
+-.MuiButton-containedSizeMedium
++.MuiButton-contained.MuiButton-sizeMedium
+-.MuiButton-containedSizeLarge
++.MuiButton-contained.MuiButton-sizeLarge
+-.MuiButton-root .MuiButton-iconSizeSmall
++.MuiButton-root.MuiButton-sizeSmall > .MuiButton-icon
+-.MuiButton-root .MuiButton-iconSizeMedium
++.MuiButton-root.MuiButton-sizeMedium > .MuiButton-icon
+-.MuiButton-root .MuiButton-iconSizeLarge
++.MuiButton-root.MuiButton-sizeLarge > .MuiButton-icon
+```
+
+```diff
+ import { buttonClasses } from '@mui/material/Button';
+
+ MuiButton: {
+ styleOverrides: {
+ root: {
+- [`&.${buttonClasses.textInherit}`]: {
++ [`&.${buttonClasses.text}.${buttonClasses.colorInherit}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.textPrimary}`]: {
++ [`&.${buttonClasses.text}.${buttonClasses.colorPrimary}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.textSecondary}`]: {
++ [`&.${buttonClasses.text}.${buttonClasses.colorSecondary}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.textSuccess}`]: {
++ [`&.${buttonClasses.text}.${buttonClasses.colorSuccess}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.textError}`]: {
++ [`&.${buttonClasses.text}.${buttonClasses.colorError}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.textInfo}`]: {
++ [`&.${buttonClasses.text}.${buttonClasses.colorInfo}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.textWarning}`]: {
++ [`&.${buttonClasses.text}.${buttonClasses.colorWarning}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.outlinedInherit}`]: {
++ [`&.${buttonClasses.outlined}.${buttonClasses.colorInherit}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.outlinedPrimary}`]: {
++ [`&.${buttonClasses.outlined}.${buttonClasses.colorPrimary}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.outlinedSecondary}`]: {
++ [`&.${buttonClasses.outlined}.${buttonClasses.colorSecondary}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.outlinedSuccess}`]: {
++ [`&.${buttonClasses.outlined}.${buttonClasses.colorSuccess}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.outlinedError}`]: {
++ [`&.${buttonClasses.outlined}.${buttonClasses.colorError}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.outlinedInfo}`]: {
++ [`&.${buttonClasses.outlined}.${buttonClasses.colorInfo}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.outlinedWarning}`]: {
++ [`&.${buttonClasses.outlined}.${buttonClasses.colorWarning}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.containedInherit}`]: {
++ [`&.${buttonClasses.contained}.${buttonClasses.colorInherit}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.containedPrimary}`]: {
++ [`&.${buttonClasses.contained}.${buttonClasses.colorPrimary}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.containedSecondary}`]: {
++ [`&.${buttonClasses.contained}.${buttonClasses.colorSecondary}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.containedSuccess}`]: {
++ [`&.${buttonClasses.contained}.${buttonClasses.colorSuccess}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.containedError}`]: {
++ [`&.${buttonClasses.contained}.${buttonClasses.colorError}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.containedInfo}`]: {
++ [`&.${buttonClasses.contained}.${buttonClasses.colorInfo}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.containedWarning}`]: {
++ [`&.${buttonClasses.contained}.${buttonClasses.colorWarning}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.containedSizeSmall}`]: {
++ [`&.${buttonClasses.contained}.${buttonClasses.sizeSmall}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.containedSizeMedium}`]: {
++ [`&.${buttonClasses.contained}.${buttonClasses.sizeMedium}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.containedSizeLarge}`]: {
++ [`&.${buttonClasses.contained}.${buttonClasses.sizeLarge}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.textSizeSmall}`]: {
++ [`&.${buttonClasses.text}.${buttonClasses.sizeSmall}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.textSizeMedium}`]: {
++ [`&.${buttonClasses.text}.${buttonClasses.sizeMedium}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.textSizeLarge}`]: {
++ [`&.${buttonClasses.text}.${buttonClasses.sizeLarge}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.outlinedSizeSmall}`]: {
++ [`&.${buttonClasses.outlined}.${buttonClasses.sizeSmall}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.outlinedSizeMedium}`]: {
++ [`&.${buttonClasses.outlined}.${buttonClasses.sizeMedium}`]: {
+ color: 'red',
+ },
+- [`&.${buttonClasses.outlinedSizeLarge}`]: {
++ [`&.${buttonClasses.outlined}.${buttonClasses.sizeLarge}`]: {
+ color: 'red',
+ },
+- [`& .${buttonClasses.iconSizeSmall}`]: {
++ [`&.${buttonClasses.sizeSmall} > .${buttonClasses.icon}`]: {
+ color: 'red',
+ },
+- [`& .${buttonClasses.iconSizeMedium}`]: {
++ [`&.${buttonClasses.sizeMedium} > .${buttonClasses.icon}`]: {
+ color: 'red',
+ },
+- [`& .${buttonClasses.iconSizeLarge}`]: {
++ [`&.${buttonClasses.sizeLarge} > .${buttonClasses.icon}`]: {
+ color: 'red',
+ },
+ },
+ },
+ },
+```
+
+## Chip
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#chip-classes) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@latest deprecations/chip-classes
+```
+
+### Composed CSS classes
+
+The CSS classes that composed the following props were deprecated:
+
+- `variant` | `clickable` | `deletable` and `color`
+- `avatar` and `color` | `size`
+- `icon` and `color` | `size`
+- `deleteIcon` and `color` | `size`
+- `label` and `size`
+
+Here's how to migrate:
+
+```diff
+-.MuiChip-clickableColorPrimary
++.MuiChip-clickable.MuiChip-colorPrimary
+-.MuiChip-clickableColorSecondary
++.MuiChip-clickable.MuiChip-colorSecondary
+-.MuiChip-deletableColorPrimary
++.MuiChip-deletable.MuiChip-colorPrimary
+-.MuiChip-deletableColorSecondary
++.MuiChip-deletable.MuiChip-colorSecondary
+-.MuiChip-outlinedPrimary
++.MuiChip-outlined.MuiChip-colorPrimary
+-.MuiChip-outlinedSecondary
++.MuiChip-outlined.MuiChip-colorSecondary
+-.MuiChip-filledPrimary
++.MuiChip-filled.MuiChip-colorPrimary
+-.MuiChip-filledSecondary
++.MuiChip-filled.MuiChip-colorSecondary
+-.MuiChip-root .MuiChip-avatarSmall
++.MuiChip-root.MuiChip-sizeSmall > .MuiChip-avatar
+-.MuiChip-root .MuiChip-avatarMedium
++.MuiChip-root.MuiChip-sizeMedium > .MuiChip-avatar
+-.MuiChip-root .MuiChip-avatarColorPrimary
++.MuiChip-root.MuiChip-colorPrimary > .MuiChip-avatar
+-.MuiChip-root .MuiChip-avatarColorSecondary
++.MuiChip-root.MuiChip-colorSecondary > .MuiChip-avatar
+-.MuiChip-root .MuiChip-iconSmall
++.MuiChip-root.MuiChip-sizeSmall > .MuiChip-icon
+-.MuiChip-root .MuiChip-iconMedium
++.MuiChip-root.MuiChip-sizeMedium > .MuiChip-icon
+-.MuiChip-root .MuiChip-iconColorPrimary
++.MuiChip-root.MuiChip-colorPrimary > .MuiChip-icon
+-.MuiChip-root .MuiChip-iconColorSecondary
++.MuiChip-root.MuiChip-colorSecondary > .MuiChip-icon
+-.MuiChip-root .MuiChip-labelSmall
++.MuiChip-root.MuiChip-sizeSmall > .MuiChip-label
+-.MuiChip-root .MuiChip-labelMedium
++.MuiChip-root.MuiChip-sizeMedium > .MuiChip-label
+-.MuiChip-root .MuiChip-deleteIconSmall
++.MuiChip-root.MuiChip-sizeSmall > .MuiChip-deleteIcon
+-.MuiChip-root .MuiChip-deleteIconMedium
++.MuiChip-root.MuiChip-sizeMedium > .MuiChip-deleteIcon
+-.MuiChip-root .MuiChip-deleteIconColorPrimary
++.MuiChip-root.MuiChip-colorPrimary > .MuiChip-deleteIcon
+-.MuiChip-root .MuiChip-deleteIconColorSecondary
++.MuiChip-root.MuiChip-colorSecondary > .MuiChip-deleteIcon
+-.MuiChip-root .MuiChip-deleteIconOutlinedColorPrimary
++.MuiChip-root.MuiChip-outlined.MuiChip-colorPrimary > .MuiChip-deleteIcon
+-.MuiChip-root .MuiChip-deleteIconOutlinedColorSecondary
++.MuiChip-root.MuiChip-outlined.MuiChip-colorSecondary > .MuiChip-deleteIcon
+-.MuiChip-root .MuiChip-deleteIconFilledColorPrimary
++.MuiChip-root.MuiChip-filled.MuiChip-colorPrimary > .MuiChip-deleteIcon
+-.MuiChip-root .MuiChip-deleteIconFilledColorSecondary
++.MuiChip-root.MuiChip-filled.MuiChip-colorSecondary > .MuiChip-deleteIcon
+```
+
+```diff
+
+ import { chipClasses } from '@mui/material/Chip';
+
+ MuiChip: {
+ styleOverrides: {
+ root: {
+- [`&.${chipClasses.clickableColorPrimary}`]: {
++ [`&.${chipClasses.clickable}.${chipClasses.colorPrimary}`]: {
+ color: 'red',
+ },
+- [`&.${chipClasses.clickableColorSecondary}`]: {
++ [`&.${chipClasses.clickable}.${chipClasses.colorSecondary}`]: {
+ color: 'red',
+ },
+- [`&.${chipClasses.deletableColorPrimary}`]: {
++ [`&.${chipClasses.deletable}.${chipClasses.colorPrimary}`]: {
+ color: 'red',
+ },
+- [`&.${chipClasses.deletableColorSecondary}`]: {
++ [`&.${chipClasses.deletable}.${chipClasses.colorSecondary}`]: {
+ color: 'red',
+ },
+- [`&.${chipClasses.outlinedPrimary}`]: {
++ [`&.${chipClasses.outlined}.${chipClasses.colorPrimary}`]: {
+ color: 'red',
+ },
+- [`&.${chipClasses.outlinedSecondary}`]: {
++ [`&.${chipClasses.outlined}.${chipClasses.colorSecondary}`]: {
+ color: 'red',
+ },
+- [`&.${chipClasses.filledPrimary}`]: {
++ [`&.${chipClasses.filled}.${chipClasses.colorPrimary}`]: {
+ color: 'red',
+ },
+- [`&.${chipClasses.filledSecondary}`]: {
++ [`&.${chipClasses.filled}.${chipClasses.colorSecondary}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.avatarSmall}`]: {
++ [`&.${chipClasses.sizeSmall} > .${chipClasses.avatar}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.avatarMedium}`]: {
++ [`&.${chipClasses.sizeMedium} > .${chipClasses.avatar}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.avatarColorPrimary}`]: {
++ [`&.${chipClasses.colorPrimary} > .${chipClasses.avatar}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.avatarColorSecondary}`]: {
++ [`&.${chipClasses.colorSecondary} > .${chipClasses.avatar}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.iconSmall}`]: {
++ [`&.${chipClasses.sizeSmall} > .${chipClasses.icon}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.iconMedium}`]: {
++ [`&.${chipClasses.sizeMedium} > .${chipClasses.icon}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.iconColorPrimary}`]: {
++ [`&.${chipClasses.colorPrimary} > .${chipClasses.icon}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.iconColorSecondary}`]: {
++ [`&.${chipClasses.colorSecondary} > .${chipClasses.icon}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.labelSmall}`]: {
++ [`&.${chipClasses.sizeSmall} > .${chipClasses.label}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.labelMedium}`]: {
++ [`&.${chipClasses.sizeMedium} > .${chipClasses.label}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.deleteIconSmall}`]: {
++ [`&.${chipClasses.sizeSmall} > .${chipClasses.deleteIcon}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.deleteIconMedium}`]: {
++ [`&.${chipClasses.sizeMedium} > .${chipClasses.deleteIcon}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.deleteIconColorPrimary}`]: {
++ [`&.${chipClasses.colorPrimary} > .${chipClasses.deleteIcon}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.deleteIconColorSecondary}`]: {
++ [`&.${chipClasses.colorSecondary} > .${chipClasses.deleteIcon}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.deleteIconOutlinedColorPrimary}`]: {
++ [`&.${chipClasses.outlined}.${chipClasses.colorPrimary} > .${chipClasses.deleteIcon}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.deleteIconOutlinedColorSecondary}`]: {
++ [`&.${chipClasses.outlined}.${chipClasses.colorSecondary} > .${chipClasses.deleteIcon}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.deleteIconFilledColorPrimary}`]: {
++ [`&.${chipClasses.filled}.${chipClasses.colorPrimary} > .${chipClasses.deleteIcon}`]: {
+ color: 'red',
+ },
+- [`& .${chipClasses.deleteIconFilledColorSecondary}`]: {
++ [`&.${chipClasses.filled}.${chipClasses.colorSecondary} > .${chipClasses.deleteIcon}`]: {
+ color: 'red',
+ },
+ },
+ },
+ },
+
+```
+
## Divider
Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#divider-props) below to migrate the code as described in the following sections:
@@ -164,3 +675,85 @@ The Divider's `light` prop was deprecated, Use `sx={{ opacity : "0.6" }}` (or an
+ sx={{ opacity : "0.6" }}
/>
```
+
+## PaginationItem
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#pagination-item-classes) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@latest deprecations/pagination-item-classes
+```
+
+### Composed CSS classes
+
+The CSS classes that composed the `variant` and `color` prop values were removed.
+
+Here's how to migrate:
+
+```diff
+-.MuiPaginationItem-textPrimary
++.MuiPaginationItem-text.MuiPaginationItem-colorPrimary
+-.MuiPaginationItem-outlinedPrimary
++.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary
+-.MuiPaginationItem-textSecondary
++.MuiPaginationItem-text.MuiPaginationItem-colorSecondary
+-.MuiPaginationItem-outlinedSecondary
++.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary
+```
+
+```diff
+ import { paginationItemClasses } from '@mui/material/PaginationItem';
+
+ MuiPaginationItem: {
+ styleOverrides: {
+ root: {
+- [`&.${paginationItemClasses.textPrimary}`]: {
++ [`&.${paginationItemClasses.text}.${paginationItemClasses.colorPrimary}`]: {
+ color: 'red',
+ },
+- [`&.${paginationItemClasses.outlinedPrimary}`]: {
++ [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorPrimary}`]: {
+ color: 'red',
+ },
+- [`&.${paginationItemClasses.textSecondary}`]: {
++ [`&.${paginationItemClasses.text}.${paginationItemClasses.colorSecondary}`]: {
+ color: 'red',
+ },
+- [`&.${paginationItemClasses.outlinedSecondary}`]: {
++ [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorSecondary}`]: {
+ color: 'red',
+ },
+ },
+ },
+ },
+```
+
+## Slider
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#slider-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@latest deprecations/slider-props
+```
+
+### components
+
+The Slider's `components` was deprecated in favor of `slots`:
+
+```diff
+
+```
+
+### componentsProps
+
+The Slider's `componentsProps` was deprecated in favor of `slotProps`:
+
+```diff
+
+```
diff --git a/docs/data/material/migration/migration-v4/v5-component-changes.md b/docs/data/material/migration/migration-v4/v5-component-changes.md
index 97f46e29442aae..33267341076f13 100644
--- a/docs/data/material/migration/migration-v4/v5-component-changes.md
+++ b/docs/data/material/migration/migration-v4/v5-component-changes.md
@@ -2008,7 +2008,7 @@ This change removes the confusion with the built-in `Omit` helper introduced in
The built-in `Omit`, while similar, is non-distributive.
This leads to differences when applied to union types.
-[See this Stack Overflow answer for further details](https://stackoverflow.com/questions/57103834/typescript-omit-a-property-from-all-interfaces-in-a-union-but-keep-the-union-s/57103940#57103940).
+[See this Stack Overflow answer for further details](https://stackoverflow.com/questions/57103834/typescript-omit-a-property-from-all-interfaces-in-a-union-but-keep-the-union-s/57103940#57103940).
```diff
-import { Omit } from '@mui/types';
diff --git a/docs/data/system/components/box/BoxBasic.js b/docs/data/system/components/box/BoxBasic.js
index e05af05a8dce35..1ba8f5832c523b 100644
--- a/docs/data/system/components/box/BoxBasic.js
+++ b/docs/data/system/components/box/BoxBasic.js
@@ -4,7 +4,7 @@ import Box from '@mui/system/Box';
export default function BoxBasic() {
return (
- This is a section container
+ This Box renders as an HTML section element.
);
}
diff --git a/docs/data/system/components/box/BoxBasic.tsx b/docs/data/system/components/box/BoxBasic.tsx
index e05af05a8dce35..1ba8f5832c523b 100644
--- a/docs/data/system/components/box/BoxBasic.tsx
+++ b/docs/data/system/components/box/BoxBasic.tsx
@@ -4,7 +4,7 @@ import Box from '@mui/system/Box';
export default function BoxBasic() {
return (
- This is a section container
+ This Box renders as an HTML section element.
);
}
diff --git a/docs/data/system/components/box/BoxBasic.tsx.preview b/docs/data/system/components/box/BoxBasic.tsx.preview
index 3f47facef29add..d22b5b82187b80 100644
--- a/docs/data/system/components/box/BoxBasic.tsx.preview
+++ b/docs/data/system/components/box/BoxBasic.tsx.preview
@@ -1,2 +1,2 @@
- This is a section container
+ This Box renders as an HTML section element.
diff --git a/docs/data/system/components/box/BoxComponent.js b/docs/data/system/components/box/BoxComponent.js
deleted file mode 100644
index 28a050a35091af..00000000000000
--- a/docs/data/system/components/box/BoxComponent.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from 'react';
-import { Box } from '@mui/system';
-import Button from '@mui/material/Button';
-
-export default function BoxComponent() {
- return (
-
- Save
-
- );
-}
diff --git a/docs/data/system/components/box/BoxComponent.tsx b/docs/data/system/components/box/BoxComponent.tsx
deleted file mode 100644
index 28a050a35091af..00000000000000
--- a/docs/data/system/components/box/BoxComponent.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from 'react';
-import { Box } from '@mui/system';
-import Button from '@mui/material/Button';
-
-export default function BoxComponent() {
- return (
-
- Save
-
- );
-}
diff --git a/docs/data/system/components/box/BoxComponent.tsx.preview b/docs/data/system/components/box/BoxComponent.tsx.preview
deleted file mode 100644
index 43eef49d466ae8..00000000000000
--- a/docs/data/system/components/box/BoxComponent.tsx.preview
+++ /dev/null
@@ -1 +0,0 @@
-Save
\ No newline at end of file
diff --git a/docs/data/system/components/box/BoxSystemProps.js b/docs/data/system/components/box/BoxSystemProps.js
new file mode 100644
index 00000000000000..966f9739d26db8
--- /dev/null
+++ b/docs/data/system/components/box/BoxSystemProps.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import Box from '@mui/system/Box';
+
+export default function BoxSystemProps() {
+ return (
+
+ This Box uses MUI System props for quick customization.
+
+ );
+}
diff --git a/docs/data/system/components/box/BoxSystemProps.tsx b/docs/data/system/components/box/BoxSystemProps.tsx
new file mode 100644
index 00000000000000..966f9739d26db8
--- /dev/null
+++ b/docs/data/system/components/box/BoxSystemProps.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import Box from '@mui/system/Box';
+
+export default function BoxSystemProps() {
+ return (
+
+ This Box uses MUI System props for quick customization.
+
+ );
+}
diff --git a/docs/data/system/components/box/BoxSystemProps.tsx.preview b/docs/data/system/components/box/BoxSystemProps.tsx.preview
new file mode 100644
index 00000000000000..b0decb0904b5a3
--- /dev/null
+++ b/docs/data/system/components/box/BoxSystemProps.tsx.preview
@@ -0,0 +1,2 @@
+
+ This Box uses MUI System props for quick customization.
diff --git a/docs/data/system/components/box/box.md b/docs/data/system/components/box/box.md
index 80524e44cb81c9..f68753b0f644dc 100644
--- a/docs/data/system/components/box/box.md
+++ b/docs/data/system/components/box/box.md
@@ -5,6 +5,8 @@ components: Box
githubLabel: 'component: Box'
---
+
+
# Box
The Box component is a generic, theme-aware container with access to CSS utilities from MUI System.
@@ -14,7 +16,12 @@ githubLabel: 'component: Box'
## Introduction
The Box component is a generic container for grouping other components.
-It's a fundamental building block—you can think of it as a `
` with special features (like access to your app's theme and the [`sx` prop](/system/getting-started/the-sx-prop/)).
+It's a fundamental building block when working with MUI System—you can think of it as a `
` with extra built-in features, like access to your app's theme and the [`sx` prop](/system/getting-started/the-sx-prop/).
+
+### Usage
+
+The Box component differs from other containers available in MUI System in that its usage is intended to be multipurpose and open-ended, just like a `
`.
+Components like [Container](/system/react-container/) and [Stack](/system/react-stack/), by contrast, feature usage-specific props that make them ideal for certain use cases: Container for main layout orientation, and Stack for one-dimensional layouts.
## Basics
@@ -27,28 +34,23 @@ The demo below replaces the `
` with a `` element:
{{"demo": "BoxBasic.js", "defaultCodeOpen": true }}
-:::info
-The Box component differs from other containers available in Material UI and Joy UI because it's intended to be multipurpose—components like [Stack](/material-ui/react-stack/) and [Paper](/material-ui/react-paper/), by contrast, feature usage-specific props that make them ideal for certain use cases.
-:::
+## Customization
-## Component
+### With MUI System props
-### Using the sx prop
+As a CSS utility component, the Box supports all [MUI System properties](/system/properties/).
+You can use them as props directly on the component.
-Use the [`sx` prop](/system/getting-started/the-sx-prop/) to quickly customize any Box instance using a superset of CSS with access to all the style functions and theme-aware properties exposed in the MUI System package.
+{{"demo": "BoxSystemProps.js", "defaultCodeOpen": true }}
-{{"demo": "BoxSx.js", "defaultCodeOpen": true }}
-
-### System props
+### With the sx prop
-As a CSS utility component, the Box supports all [MUI System properties](/system/properties/).
-You can use them as prop directly on the component.
+Use the [`sx` prop](/system/getting-started/the-sx-prop/) to quickly customize any Box instance using a superset of CSS that has access to all the style functions and theme-aware properties exposed in the MUI System package.
+The demo below shows how to apply colors from the theme using this prop:
-```jsx
-
-```
+{{"demo": "BoxSx.js", "defaultCodeOpen": true }}
-## Create your own Box component
+### Create your own Box
Use the `createBox()` utility to create your version of the Box component.
This is useful if you need to expose your container to a theme that's different from the default theme of the library you're working with:
@@ -64,3 +66,13 @@ const Box = createBox({ defaultTheme });
export default Box;
```
+
+## Anatomy
+
+The Box component is composed of a single root `
` element:
+
+```html
+
+
+
+```
diff --git a/docs/data/system/getting-started/support/support.md b/docs/data/system/getting-started/support/support.md
index a44a0cee1b98e8..34c5cf75dd4268 100644
--- a/docs/data/system/getting-started/support/support.md
+++ b/docs/data/system/getting-started/support/support.md
@@ -39,9 +39,9 @@ You have a few possible options to provide it:
- You can use a starter React template to build a reproduction case with [JavaScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react) or [TypeScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react-ts).
-## Stack Overflow
+## Stack Overflow
-We use Stack Overflow for how-to questions. Answers are crowdsourced from expert developers in the MUI System community as well as MUI System maintainers.
+We use Stack Overflow for how-to questions. Answers are crowdsourced from expert developers in the MUI System community as well as MUI System maintainers.
You can search through existing questions and answers to see if someone has asked a similar question using the [mui-system tags](https://stackoverflow.com/questions/tagged/material-ui):
@@ -84,7 +84,7 @@ Our tools are used by thousands of developers and teams all around the world, ma
You can join Discord to engage in lively discussions, share your projects, and interact with developers just like you from all around the world. We'd love for you to join us!
:::warning
-How-to questions are not accepted on Discord, they should be asked on [Stack Overflow](#stack-overflow).
+How-to questions are not accepted on Discord, they should be asked on [Stack Overflow](#stack-overflow).
:::
## Custom work
diff --git a/docs/lib/sourcing.ts b/docs/lib/sourcing.ts
index bfc99888323a0d..3c3678f9810ea4 100644
--- a/docs/lib/sourcing.ts
+++ b/docs/lib/sourcing.ts
@@ -1,6 +1,6 @@
import fs from 'fs';
import path from 'path';
-import { getHeaders } from '@mui/markdown';
+import { getHeaders } from '@mui/internal-markdown';
const blogDir = path.join(process.cwd(), 'pages/blog');
@@ -33,13 +33,16 @@ export function getBlogPost(filePath: string): BlogPost {
// Avoid typos in the blog markdown pages.
// https://www.notion.so/mui-org/Blog-247ec2bff5fa46e799ef06a693c94917
const ALLOWED_TAGS = [
- 'MUI Core',
- 'MUI X',
- 'News',
'Company',
'Developer Survey',
+ 'Guide',
'Product',
+ // Product tags
+ 'Material UI',
'Base UI',
+ 'Joy UI',
+ 'MUI X',
+ 'MUI System',
];
export const getAllBlogPosts = () => {
diff --git a/docs/next.config.mjs b/docs/next.config.mjs
index 87531b1a2cf1c8..a0ec4b89d6df8c 100644
--- a/docs/next.config.mjs
+++ b/docs/next.config.mjs
@@ -129,14 +129,33 @@ export default withDocsInfra({
test: /\.md$/,
oneOf: [
{
- resourceQuery: /@mui\/markdown/,
+ resourceQuery: /muiMarkdown/,
use: [
options.defaultLoaders.babel,
{
- loader: require.resolve('@mui/markdown/loader'),
+ loader: require.resolve('@mui/internal-markdown/loader'),
options: {
+ workspaceRoot,
ignoreLanguagePages: LANGUAGES_IGNORE_PAGES,
languagesInProgress: LANGUAGES_IN_PROGRESS,
+ packages: [
+ {
+ productId: 'material-ui',
+ paths: [
+ path.join(workspaceRoot, 'packages/mui-base/src'),
+ path.join(workspaceRoot, 'packages/mui-lab/src'),
+ path.join(workspaceRoot, 'packages/mui-material/src'),
+ ],
+ },
+ {
+ productId: 'base-ui',
+ paths: [path.join(workspaceRoot, 'packages/mui-base/src')],
+ },
+ {
+ productId: 'joy-ui',
+ paths: [path.join(workspaceRoot, 'packages/mui-joy/src')],
+ },
+ ],
env: {
SOURCE_CODE_REPO: options.config.env.SOURCE_CODE_REPO,
LIB_VERSION: options.config.env.LIB_VERSION,
diff --git a/docs/package.json b/docs/package.json
index afb328227c1b4c..e74f4b0ea4ba69 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -36,7 +36,7 @@
"@mui/icons-material": "workspace:^",
"@mui/joy": "workspace:*",
"@mui/lab": "workspace:*",
- "@mui/markdown": "workspace:^",
+ "@mui/internal-markdown": "workspace:^",
"@mui/material": "workspace:^",
"@mui/material-next": "workspace:*",
"@mui/styled-engine": "workspace:^",
@@ -116,9 +116,9 @@
"devDependencies": {
"@babel/plugin-transform-react-constant-elements": "^7.23.3",
"@babel/preset-typescript": "^7.23.3",
+ "@mui/internal-scripts": "workspace:^",
"@mui-internal/docs-utils": "workspace:^",
"@mui-internal/test-utils": "workspace:^",
- "@mui-internal/typescript-to-proptypes": "workspace:^",
"@types/autosuggest-highlight": "^3.2.3",
"@types/chai": "^4.3.11",
"@types/css-mediaquery": "^0.1.4",
diff --git a/docs/pages/base-ui/all-components/index.js b/docs/pages/base-ui/all-components/index.js
index eb5cdf8793bdeb..3501384eead7ca 100644
--- a/docs/pages/base-ui/all-components/index.js
+++ b/docs/pages/base-ui/all-components/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/all-components/all-components.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/all-components/all-components.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/base-ui/getting-started/accessibility.js b/docs/pages/base-ui/getting-started/accessibility.js
index 0a2db71b65440b..7138755efc7808 100644
--- a/docs/pages/base-ui/getting-started/accessibility.js
+++ b/docs/pages/base-ui/getting-started/accessibility.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/getting-started/accessibility/accessibility.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/getting-started/accessibility/accessibility.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/base-ui/getting-started/customization.js b/docs/pages/base-ui/getting-started/customization.js
index e957153883b78c..6451d0899daf37 100644
--- a/docs/pages/base-ui/getting-started/customization.js
+++ b/docs/pages/base-ui/getting-started/customization.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/getting-started/customization/customization.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/getting-started/customization/customization.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/base-ui/getting-started/index.js b/docs/pages/base-ui/getting-started/index.js
index b58ce6dc8e7d57..c5a42645269d1d 100644
--- a/docs/pages/base-ui/getting-started/index.js
+++ b/docs/pages/base-ui/getting-started/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/getting-started/overview/overview.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/getting-started/overview/overview.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/base-ui/getting-started/quickstart.js b/docs/pages/base-ui/getting-started/quickstart.js
index 29e78f295ddea7..e4a25f73c3244d 100644
--- a/docs/pages/base-ui/getting-started/quickstart.js
+++ b/docs/pages/base-ui/getting-started/quickstart.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/getting-started/quickstart/quickstart.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/getting-started/quickstart/quickstart.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/base-ui/getting-started/support.js b/docs/pages/base-ui/getting-started/support.js
index 3189b282ae4013..dbcfa1cb3f0bf7 100644
--- a/docs/pages/base-ui/getting-started/support.js
+++ b/docs/pages/base-ui/getting-started/support.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import * as pageProps from 'docs/data/base/getting-started/support/support.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/getting-started/support/support.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/base-ui/getting-started/usage.js b/docs/pages/base-ui/getting-started/usage.js
index 0d69b588149af9..3fc034304a3417 100644
--- a/docs/pages/base-ui/getting-started/usage.js
+++ b/docs/pages/base-ui/getting-started/usage.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/getting-started/usage/usage.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/getting-started/usage/usage.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/base-ui/guides/next-js-app-router.js b/docs/pages/base-ui/guides/next-js-app-router.js
index f014e355697f53..72307b47e5d7ae 100644
--- a/docs/pages/base-ui/guides/next-js-app-router.js
+++ b/docs/pages/base-ui/guides/next-js-app-router.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import * as pageProps from 'docs/data/base/guides/next-js-app-router/next-js-app-router.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/guides/next-js-app-router/next-js-app-router.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/base-ui/guides/overriding-component-structure.js b/docs/pages/base-ui/guides/overriding-component-structure.js
index 5a1ea2d8c934f1..766aeb9de1994e 100644
--- a/docs/pages/base-ui/guides/overriding-component-structure.js
+++ b/docs/pages/base-ui/guides/overriding-component-structure.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import * as pageProps from 'docs/data/base/guides/overriding-component-structure/overriding-component-structure.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/guides/overriding-component-structure/overriding-component-structure.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/base-ui/guides/working-with-tailwind-css.js b/docs/pages/base-ui/guides/working-with-tailwind-css.js
index 3ba1ff812fc256..3d5bdaa5774359 100644
--- a/docs/pages/base-ui/guides/working-with-tailwind-css.js
+++ b/docs/pages/base-ui/guides/working-with-tailwind-css.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import * as pageProps from 'docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/base-ui/react-accordion/index.js b/docs/pages/base-ui/react-accordion/index.js
index 44817b268be5a8..1e772125a466a2 100644
--- a/docs/pages/base-ui/react-accordion/index.js
+++ b/docs/pages/base-ui/react-accordion/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/accordion/accordion.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/accordion/accordion.md?muiMarkdown';
export default function Page(props) {
const { userLanguage, ...other } = props;
diff --git a/docs/pages/base-ui/react-autocomplete/[docsTab]/index.js b/docs/pages/base-ui/react-autocomplete/[docsTab]/index.js
index 5d72f2cf4dbb19..d3e8626fa47a26 100644
--- a/docs/pages/base-ui/react-autocomplete/[docsTab]/index.js
+++ b/docs/pages/base-ui/react-autocomplete/[docsTab]/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/autocomplete/autocomplete.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/autocomplete/autocomplete.md?muiMarkdown';
import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
import useAutocompleteApiJsonPageContent from '../../api/use-autocomplete.json';
diff --git a/docs/pages/base-ui/react-autocomplete/index.js b/docs/pages/base-ui/react-autocomplete/index.js
index aa57822e6fb34f..5e36d082f953f3 100644
--- a/docs/pages/base-ui/react-autocomplete/index.js
+++ b/docs/pages/base-ui/react-autocomplete/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/autocomplete/autocomplete.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/autocomplete/autocomplete.md?muiMarkdown';
export default function Page(props) {
const { userLanguage, ...other } = props;
diff --git a/docs/pages/base-ui/react-badge/[docsTab]/index.js b/docs/pages/base-ui/react-badge/[docsTab]/index.js
index 188233bdcb5e14..df9fd7343aa9b5 100644
--- a/docs/pages/base-ui/react-badge/[docsTab]/index.js
+++ b/docs/pages/base-ui/react-badge/[docsTab]/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/badge/badge.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/badge/badge.md?muiMarkdown';
import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
import BadgeApiJsonPageContent from '../../api/badge.json';
import useBadgeApiJsonPageContent from '../../api/use-badge.json';
diff --git a/docs/pages/base-ui/react-badge/index.js b/docs/pages/base-ui/react-badge/index.js
index 86e8818d3f63cd..f070a8d7d4a7a8 100644
--- a/docs/pages/base-ui/react-badge/index.js
+++ b/docs/pages/base-ui/react-badge/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/badge/badge.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/badge/badge.md?muiMarkdown';
export default function Page(props) {
const { userLanguage, ...other } = props;
diff --git a/docs/pages/base-ui/react-button/[docsTab]/index.js b/docs/pages/base-ui/react-button/[docsTab]/index.js
index 9c7643f592dbd5..5cbf74aa5b341b 100644
--- a/docs/pages/base-ui/react-button/[docsTab]/index.js
+++ b/docs/pages/base-ui/react-button/[docsTab]/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/button/button.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/button/button.md?muiMarkdown';
import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
import ButtonApiJsonPageContent from '../../api/button.json';
import useButtonApiJsonPageContent from '../../api/use-button.json';
diff --git a/docs/pages/base-ui/react-button/index.js b/docs/pages/base-ui/react-button/index.js
index f2c13c1dcdd1a8..7560897ad96c06 100644
--- a/docs/pages/base-ui/react-button/index.js
+++ b/docs/pages/base-ui/react-button/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/button/button.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/button/button.md?muiMarkdown';
export default function Page(props) {
const { userLanguage, ...other } = props;
diff --git a/docs/pages/base-ui/react-checkbox/index.js b/docs/pages/base-ui/react-checkbox/index.js
index a1743d1ff0d64d..d6a46c6d45793c 100644
--- a/docs/pages/base-ui/react-checkbox/index.js
+++ b/docs/pages/base-ui/react-checkbox/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/checkbox/checkbox.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/checkbox/checkbox.md?muiMarkdown';
export default function Page(props) {
const { userLanguage, ...other } = props;
diff --git a/docs/pages/base-ui/react-click-away-listener/[docsTab]/index.js b/docs/pages/base-ui/react-click-away-listener/[docsTab]/index.js
index d46d140e106527..88af6003c2b282 100644
--- a/docs/pages/base-ui/react-click-away-listener/[docsTab]/index.js
+++ b/docs/pages/base-ui/react-click-away-listener/[docsTab]/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/click-away-listener/click-away-listener.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/click-away-listener/click-away-listener.md?muiMarkdown';
import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
import ClickAwayListenerApiJsonPageContent from '../../api/click-away-listener.json';
diff --git a/docs/pages/base-ui/react-click-away-listener/index.js b/docs/pages/base-ui/react-click-away-listener/index.js
index 6162e98c7289ef..8d12adea2775a4 100644
--- a/docs/pages/base-ui/react-click-away-listener/index.js
+++ b/docs/pages/base-ui/react-click-away-listener/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/click-away-listener/click-away-listener.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/click-away-listener/click-away-listener.md?muiMarkdown';
export default function Page(props) {
const { userLanguage, ...other } = props;
diff --git a/docs/pages/base-ui/react-drawer/index.js b/docs/pages/base-ui/react-drawer/index.js
index 6fb9242afc0d76..4cc332594d6d2c 100644
--- a/docs/pages/base-ui/react-drawer/index.js
+++ b/docs/pages/base-ui/react-drawer/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/drawer/drawer.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/drawer/drawer.md?muiMarkdown';
export default function Page(props) {
const { userLanguage, ...other } = props;
diff --git a/docs/pages/base-ui/react-focus-trap/[docsTab]/index.js b/docs/pages/base-ui/react-focus-trap/[docsTab]/index.js
index 03927e42da7038..2d0060ce723be8 100644
--- a/docs/pages/base-ui/react-focus-trap/[docsTab]/index.js
+++ b/docs/pages/base-ui/react-focus-trap/[docsTab]/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/focus-trap/focus-trap.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/focus-trap/focus-trap.md?muiMarkdown';
import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
import FocusTrapApiJsonPageContent from '../../api/focus-trap.json';
diff --git a/docs/pages/base-ui/react-focus-trap/index.js b/docs/pages/base-ui/react-focus-trap/index.js
index 3ba028dd0d3c95..1181c1aa97d16f 100644
--- a/docs/pages/base-ui/react-focus-trap/index.js
+++ b/docs/pages/base-ui/react-focus-trap/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/focus-trap/focus-trap.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/focus-trap/focus-trap.md?muiMarkdown';
export default function Page(props) {
const { userLanguage, ...other } = props;
diff --git a/docs/pages/base-ui/react-form-control/[docsTab]/index.js b/docs/pages/base-ui/react-form-control/[docsTab]/index.js
index 8dd14863c6129f..f48d57b151b636 100644
--- a/docs/pages/base-ui/react-form-control/[docsTab]/index.js
+++ b/docs/pages/base-ui/react-form-control/[docsTab]/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/form-control/form-control.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/form-control/form-control.md?muiMarkdown';
import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
import FormControlApiJsonPageContent from '../../api/form-control.json';
import useFormControlContextApiJsonPageContent from '../../api/use-form-control-context.json';
diff --git a/docs/pages/base-ui/react-form-control/index.js b/docs/pages/base-ui/react-form-control/index.js
index 399bf6b0e75211..0a228949f2cd17 100644
--- a/docs/pages/base-ui/react-form-control/index.js
+++ b/docs/pages/base-ui/react-form-control/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/form-control/form-control.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/form-control/form-control.md?muiMarkdown';
export default function Page(props) {
const { userLanguage, ...other } = props;
diff --git a/docs/pages/base-ui/react-input/[docsTab]/index.js b/docs/pages/base-ui/react-input/[docsTab]/index.js
index 2e3080620db1ee..58c194b16044a6 100644
--- a/docs/pages/base-ui/react-input/[docsTab]/index.js
+++ b/docs/pages/base-ui/react-input/[docsTab]/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/input/input.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/input/input.md?muiMarkdown';
import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
import InputApiJsonPageContent from '../../api/input.json';
import useInputApiJsonPageContent from '../../api/use-input.json';
diff --git a/docs/pages/base-ui/react-input/index.js b/docs/pages/base-ui/react-input/index.js
index dac996ce0bc1b4..b854b1989512d2 100644
--- a/docs/pages/base-ui/react-input/index.js
+++ b/docs/pages/base-ui/react-input/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/input/input.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/input/input.md?muiMarkdown';
export default function Page(props) {
const { userLanguage, ...other } = props;
diff --git a/docs/pages/base-ui/react-menu/[docsTab]/index.js b/docs/pages/base-ui/react-menu/[docsTab]/index.js
index 113726f945b35e..8acbf119aa346d 100644
--- a/docs/pages/base-ui/react-menu/[docsTab]/index.js
+++ b/docs/pages/base-ui/react-menu/[docsTab]/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/menu/menu.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/menu/menu.md?muiMarkdown';
import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
import DropdownApiJsonPageContent from '../../api/dropdown.json';
import MenuApiJsonPageContent from '../../api/menu.json';
diff --git a/docs/pages/base-ui/react-menu/index.js b/docs/pages/base-ui/react-menu/index.js
index 812223cec6e5f2..965a415cf25182 100644
--- a/docs/pages/base-ui/react-menu/index.js
+++ b/docs/pages/base-ui/react-menu/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/menu/menu.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/menu/menu.md?muiMarkdown';
export default function Page(props) {
const { userLanguage, ...other } = props;
diff --git a/docs/pages/base-ui/react-modal/[docsTab]/index.js b/docs/pages/base-ui/react-modal/[docsTab]/index.js
index ca7f56b6b4c6c4..c85815b52de2b5 100644
--- a/docs/pages/base-ui/react-modal/[docsTab]/index.js
+++ b/docs/pages/base-ui/react-modal/[docsTab]/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/modal/modal.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/modal/modal.md?muiMarkdown';
import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
import ModalApiJsonPageContent from '../../api/modal.json';
import useModalApiJsonPageContent from '../../api/use-modal.json';
diff --git a/docs/pages/base-ui/react-modal/index.js b/docs/pages/base-ui/react-modal/index.js
index 96cc897997dcdb..646520b7a50fff 100644
--- a/docs/pages/base-ui/react-modal/index.js
+++ b/docs/pages/base-ui/react-modal/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/modal/modal.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/modal/modal.md?muiMarkdown';
export default function Page(props) {
const { userLanguage, ...other } = props;
diff --git a/docs/pages/base-ui/react-no-ssr/[docsTab]/index.js b/docs/pages/base-ui/react-no-ssr/[docsTab]/index.js
index a629d120ee401b..ec5d0195d03752 100644
--- a/docs/pages/base-ui/react-no-ssr/[docsTab]/index.js
+++ b/docs/pages/base-ui/react-no-ssr/[docsTab]/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/no-ssr/no-ssr.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/no-ssr/no-ssr.md?muiMarkdown';
import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
import NoSsrApiJsonPageContent from '../../api/no-ssr.json';
diff --git a/docs/pages/base-ui/react-no-ssr/index.js b/docs/pages/base-ui/react-no-ssr/index.js
index 2302a384230566..69dfc8432a4d4b 100644
--- a/docs/pages/base-ui/react-no-ssr/index.js
+++ b/docs/pages/base-ui/react-no-ssr/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/no-ssr/no-ssr.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/no-ssr/no-ssr.md?muiMarkdown';
export default function Page(props) {
const { userLanguage, ...other } = props;
diff --git a/docs/pages/base-ui/react-number-input/[docsTab]/index.js b/docs/pages/base-ui/react-number-input/[docsTab]/index.js
index 389fe3c553f5fb..97e7a38d94d7a5 100644
--- a/docs/pages/base-ui/react-number-input/[docsTab]/index.js
+++ b/docs/pages/base-ui/react-number-input/[docsTab]/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/number-input/number-input.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/number-input/number-input.md?muiMarkdown';
import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
import NumberInputApiJsonPageContent from '../../api/number-input.json';
import useNumberInputApiJsonPageContent from '../../api/use-number-input.json';
diff --git a/docs/pages/base-ui/react-number-input/index.js b/docs/pages/base-ui/react-number-input/index.js
index 124fb94411844c..3956d8ffcc5a94 100644
--- a/docs/pages/base-ui/react-number-input/index.js
+++ b/docs/pages/base-ui/react-number-input/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/number-input/number-input.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/number-input/number-input.md?muiMarkdown';
export default function Page(props) {
const { userLanguage, ...other } = props;
diff --git a/docs/pages/base-ui/react-pagination/index.js b/docs/pages/base-ui/react-pagination/index.js
index 6802aa65bdba1c..a11ac346a60676 100644
--- a/docs/pages/base-ui/react-pagination/index.js
+++ b/docs/pages/base-ui/react-pagination/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/pagination/pagination.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/pagination/pagination.md?muiMarkdown';
export default function Page(props) {
const { userLanguage, ...other } = props;
diff --git a/docs/pages/base-ui/react-popper/[docsTab]/index.js b/docs/pages/base-ui/react-popper/[docsTab]/index.js
index 6148a95ea187ee..2e3c0be4d8a848 100644
--- a/docs/pages/base-ui/react-popper/[docsTab]/index.js
+++ b/docs/pages/base-ui/react-popper/[docsTab]/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/popper/popper.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/popper/popper.md?muiMarkdown';
import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
import PopperApiJsonPageContent from '../../api/popper.json';
diff --git a/docs/pages/base-ui/react-popper/index.js b/docs/pages/base-ui/react-popper/index.js
index 8a8319d9ecc240..7e95fbe91b5d70 100644
--- a/docs/pages/base-ui/react-popper/index.js
+++ b/docs/pages/base-ui/react-popper/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/popper/popper.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/popper/popper.md?muiMarkdown';
export default function Page(props) {
const { userLanguage, ...other } = props;
diff --git a/docs/pages/base-ui/react-popup/[docsTab]/index.js b/docs/pages/base-ui/react-popup/[docsTab]/index.js
index ca1a4dd034f095..c3d91d7429cf8f 100644
--- a/docs/pages/base-ui/react-popup/[docsTab]/index.js
+++ b/docs/pages/base-ui/react-popup/[docsTab]/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/popup/popup.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/popup/popup.md?muiMarkdown';
import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
import PopupApiJsonPageContent from '../../api/popup.json';
diff --git a/docs/pages/base-ui/react-popup/index.js b/docs/pages/base-ui/react-popup/index.js
index 28af2fb75d4437..f55b122641b0a9 100644
--- a/docs/pages/base-ui/react-popup/index.js
+++ b/docs/pages/base-ui/react-popup/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/popup/popup.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/popup/popup.md?muiMarkdown';
export default function Page(props) {
const { userLanguage, ...other } = props;
diff --git a/docs/pages/base-ui/react-portal/[docsTab]/index.js b/docs/pages/base-ui/react-portal/[docsTab]/index.js
index aa838d01a0c8ae..d63609efe83c00 100644
--- a/docs/pages/base-ui/react-portal/[docsTab]/index.js
+++ b/docs/pages/base-ui/react-portal/[docsTab]/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/portal/portal.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/portal/portal.md?muiMarkdown';
import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
import PortalApiJsonPageContent from '../../api/portal.json';
diff --git a/docs/pages/base-ui/react-portal/index.js b/docs/pages/base-ui/react-portal/index.js
index c8e566aa79b891..92d17f5ba595a4 100644
--- a/docs/pages/base-ui/react-portal/index.js
+++ b/docs/pages/base-ui/react-portal/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/portal/portal.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/portal/portal.md?muiMarkdown';
export default function Page(props) {
const { userLanguage, ...other } = props;
diff --git a/docs/pages/base-ui/react-radio-group/index.js b/docs/pages/base-ui/react-radio-group/index.js
index 79f977b2ab7f4f..fb0cece6ec17ac 100644
--- a/docs/pages/base-ui/react-radio-group/index.js
+++ b/docs/pages/base-ui/react-radio-group/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/radio-group/radio-group.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/radio-group/radio-group.md?muiMarkdown';
export default function Page(props) {
const { userLanguage, ...other } = props;
diff --git a/docs/pages/base-ui/react-rating/index.js b/docs/pages/base-ui/react-rating/index.js
index fe97e0880eeb74..79060a31ff4199 100644
--- a/docs/pages/base-ui/react-rating/index.js
+++ b/docs/pages/base-ui/react-rating/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/rating/rating.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/rating/rating.md?muiMarkdown';
export default function Page(props) {
const { userLanguage, ...other } = props;
diff --git a/docs/pages/base-ui/react-select/[docsTab]/index.js b/docs/pages/base-ui/react-select/[docsTab]/index.js
index 6d76c73f1b194d..c5ed80442efb96 100644
--- a/docs/pages/base-ui/react-select/[docsTab]/index.js
+++ b/docs/pages/base-ui/react-select/[docsTab]/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/select/select.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/select/select.md?muiMarkdown';
import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
import OptionApiJsonPageContent from '../../api/option.json';
import OptionGroupApiJsonPageContent from '../../api/option-group.json';
diff --git a/docs/pages/base-ui/react-select/index.js b/docs/pages/base-ui/react-select/index.js
index 4dfc1a86b53cbc..84cbbea62d3af3 100644
--- a/docs/pages/base-ui/react-select/index.js
+++ b/docs/pages/base-ui/react-select/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/select/select.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/select/select.md?muiMarkdown';
export default function Page(props) {
const { userLanguage, ...other } = props;
diff --git a/docs/pages/base-ui/react-slider/[docsTab]/index.js b/docs/pages/base-ui/react-slider/[docsTab]/index.js
index 0eec7cf1c76f36..dc0b6028f3dae0 100644
--- a/docs/pages/base-ui/react-slider/[docsTab]/index.js
+++ b/docs/pages/base-ui/react-slider/[docsTab]/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/slider/slider.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/slider/slider.md?muiMarkdown';
import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
import SliderApiJsonPageContent from '../../api/slider.json';
import useSliderApiJsonPageContent from '../../api/use-slider.json';
diff --git a/docs/pages/base-ui/react-slider/index.js b/docs/pages/base-ui/react-slider/index.js
index 317fe79096011a..9a6b5613580a07 100644
--- a/docs/pages/base-ui/react-slider/index.js
+++ b/docs/pages/base-ui/react-slider/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/slider/slider.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/slider/slider.md?muiMarkdown';
export default function Page(props) {
const { userLanguage, ...other } = props;
diff --git a/docs/pages/base-ui/react-snackbar/[docsTab]/index.js b/docs/pages/base-ui/react-snackbar/[docsTab]/index.js
index c776c5e051136e..736bc1e0f05b57 100644
--- a/docs/pages/base-ui/react-snackbar/[docsTab]/index.js
+++ b/docs/pages/base-ui/react-snackbar/[docsTab]/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/snackbar/snackbar.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/snackbar/snackbar.md?muiMarkdown';
import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
import SnackbarApiJsonPageContent from '../../api/snackbar.json';
import useSnackbarApiJsonPageContent from '../../api/use-snackbar.json';
diff --git a/docs/pages/base-ui/react-snackbar/index.js b/docs/pages/base-ui/react-snackbar/index.js
index f5273de09bf459..f943880033e3d5 100644
--- a/docs/pages/base-ui/react-snackbar/index.js
+++ b/docs/pages/base-ui/react-snackbar/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/snackbar/snackbar.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/snackbar/snackbar.md?muiMarkdown';
export default function Page(props) {
const { userLanguage, ...other } = props;
diff --git a/docs/pages/base-ui/react-switch/[docsTab]/index.js b/docs/pages/base-ui/react-switch/[docsTab]/index.js
index 8756fb8249b3d4..d420993cb30449 100644
--- a/docs/pages/base-ui/react-switch/[docsTab]/index.js
+++ b/docs/pages/base-ui/react-switch/[docsTab]/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/switch/switch.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/switch/switch.md?muiMarkdown';
import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
import SwitchApiJsonPageContent from '../../api/switch.json';
import useSwitchApiJsonPageContent from '../../api/use-switch.json';
diff --git a/docs/pages/base-ui/react-switch/index.js b/docs/pages/base-ui/react-switch/index.js
index 5d2ec1bbeabe68..0c1441bca1c6c7 100644
--- a/docs/pages/base-ui/react-switch/index.js
+++ b/docs/pages/base-ui/react-switch/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/switch/switch.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/switch/switch.md?muiMarkdown';
export default function Page(props) {
const { userLanguage, ...other } = props;
diff --git a/docs/pages/base-ui/react-table-pagination/[docsTab]/index.js b/docs/pages/base-ui/react-table-pagination/[docsTab]/index.js
index 00032832e78fa6..4598c06a89ccad 100644
--- a/docs/pages/base-ui/react-table-pagination/[docsTab]/index.js
+++ b/docs/pages/base-ui/react-table-pagination/[docsTab]/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/table-pagination/table-pagination.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/table-pagination/table-pagination.md?muiMarkdown';
import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
import TablePaginationApiJsonPageContent from '../../api/table-pagination.json';
diff --git a/docs/pages/base-ui/react-table-pagination/index.js b/docs/pages/base-ui/react-table-pagination/index.js
index 228317b3fb96f4..550c368f88dfae 100644
--- a/docs/pages/base-ui/react-table-pagination/index.js
+++ b/docs/pages/base-ui/react-table-pagination/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/table-pagination/table-pagination.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/table-pagination/table-pagination.md?muiMarkdown';
export default function Page(props) {
const { userLanguage, ...other } = props;
diff --git a/docs/pages/base-ui/react-tabs/[docsTab]/index.js b/docs/pages/base-ui/react-tabs/[docsTab]/index.js
index 6f7020450b338f..6d6713e668c05b 100644
--- a/docs/pages/base-ui/react-tabs/[docsTab]/index.js
+++ b/docs/pages/base-ui/react-tabs/[docsTab]/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/tabs/tabs.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/tabs/tabs.md?muiMarkdown';
import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
import TabApiJsonPageContent from '../../api/tab.json';
import TabPanelApiJsonPageContent from '../../api/tab-panel.json';
diff --git a/docs/pages/base-ui/react-tabs/index.js b/docs/pages/base-ui/react-tabs/index.js
index 4ba36d6200aa94..09f551b94827ec 100644
--- a/docs/pages/base-ui/react-tabs/index.js
+++ b/docs/pages/base-ui/react-tabs/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/tabs/tabs.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/tabs/tabs.md?muiMarkdown';
export default function Page(props) {
const { userLanguage, ...other } = props;
diff --git a/docs/pages/base-ui/react-textarea-autosize/[docsTab]/index.js b/docs/pages/base-ui/react-textarea-autosize/[docsTab]/index.js
index 1bfce7a176e5b6..97ca211815fee6 100644
--- a/docs/pages/base-ui/react-textarea-autosize/[docsTab]/index.js
+++ b/docs/pages/base-ui/react-textarea-autosize/[docsTab]/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/textarea-autosize/textarea-autosize.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/textarea-autosize/textarea-autosize.md?muiMarkdown';
import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
import TextareaAutosizeApiJsonPageContent from '../../api/textarea-autosize.json';
diff --git a/docs/pages/base-ui/react-textarea-autosize/index.js b/docs/pages/base-ui/react-textarea-autosize/index.js
index 27cc912d0c6290..92ae1710f5649a 100644
--- a/docs/pages/base-ui/react-textarea-autosize/index.js
+++ b/docs/pages/base-ui/react-textarea-autosize/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/textarea-autosize/textarea-autosize.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/textarea-autosize/textarea-autosize.md?muiMarkdown';
export default function Page(props) {
const { userLanguage, ...other } = props;
diff --git a/docs/pages/base-ui/react-toggle-button-group/index.js b/docs/pages/base-ui/react-toggle-button-group/index.js
index 76f96fe04395aa..80735eb90bf9d3 100644
--- a/docs/pages/base-ui/react-toggle-button-group/index.js
+++ b/docs/pages/base-ui/react-toggle-button-group/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/toggle-button-group/toggle-button-group.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/toggle-button-group/toggle-button-group.md?muiMarkdown';
export default function Page(props) {
const { userLanguage, ...other } = props;
diff --git a/docs/pages/base-ui/react-tooltip/index.js b/docs/pages/base-ui/react-tooltip/index.js
index 16217c806fdbde..7cba12f175194b 100644
--- a/docs/pages/base-ui/react-tooltip/index.js
+++ b/docs/pages/base-ui/react-tooltip/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/tooltip/tooltip.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/tooltip/tooltip.md?muiMarkdown';
export default function Page(props) {
const { userLanguage, ...other } = props;
diff --git a/docs/pages/base-ui/react-transitions/[docsTab]/index.js b/docs/pages/base-ui/react-transitions/[docsTab]/index.js
index e4221081c824d6..e3b33ceafd3ef9 100644
--- a/docs/pages/base-ui/react-transitions/[docsTab]/index.js
+++ b/docs/pages/base-ui/react-transitions/[docsTab]/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/transitions/transitions.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/transitions/transitions.md?muiMarkdown';
import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
import CssAnimationApiJsonPageContent from '../../api/css-animation.json';
import CssTransitionApiJsonPageContent from '../../api/css-transition.json';
diff --git a/docs/pages/base-ui/react-transitions/index.js b/docs/pages/base-ui/react-transitions/index.js
index e54e35fedb79c8..5d10b66d6e70a5 100644
--- a/docs/pages/base-ui/react-transitions/index.js
+++ b/docs/pages/base-ui/react-transitions/index.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
import AppFrame from 'docs/src/modules/components/AppFrame';
-import * as pageProps from 'docs/data/base/components/transitions/transitions.md?@mui/markdown';
+import * as pageProps from 'docs/data/base/components/transitions/transitions.md?muiMarkdown';
export default function Page(props) {
const { userLanguage, ...other } = props;
diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx
index 43cb1ccd3ca02d..9c60ca4e74421c 100644
--- a/docs/pages/blog.tsx
+++ b/docs/pages/blog.tsx
@@ -28,6 +28,7 @@ import HeroEnd from 'docs/src/components/home/HeroEnd';
import { Link } from '@mui/docs/Link';
import generateRssFeed from 'docs/scripts/generateRSSFeed';
import Section from 'docs/src/layouts/Section';
+import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
import { getAllBlogPosts, BlogPost } from 'docs/lib/sourcing';
export const getStaticProps = () => {
@@ -41,7 +42,7 @@ export const getStaticProps = () => {
function PostPreview(props: BlogPost) {
return (
-
+
{props.tags.map((tag) => (
({
+ height: 22,
fontWeight: 'medium',
- fontSize: theme.typography.pxToRem(12),
+ fontSize: theme.typography.pxToRem(13),
+ '& .MuiChip-label': {
+ px: '6px',
+ },
...theme.applyDarkStyles({
color: (theme.vars || theme).palette.grey[200],
}),
@@ -254,91 +259,71 @@ export default function Blog(props: InferGetStaticPropsType
- ({
- background: `linear-gradient(180deg, #FFF 50%,
- ${(theme.vars || theme).palette.primary[50]} 100%)
- `,
- ...theme.applyDarkStyles({
- background: `linear-gradient(180deg, ${
- (theme.vars || theme).palette.primaryDark[900]
- } 50%,
- ${alpha(theme.palette.primary[800], 0.2)} 100%)
- `,
- }),
- })}
- >
-
-
- Blog
-
-
- The latest about MUI
-
-
- {[firstPost, secondPost].map((post) => (
-
+
+ Stay in the loop with
+ the latest about MUI's products
+
+ }
+ />
+
+ {[firstPost, secondPost].map((post) => (
+
- theme.applyDarkStyles({
- boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.4)',
- }),
- ]}
- >
- {post.image && (
-
- )}
-
-
- ))}
-
-
-
+ },
+ (theme) =>
+ theme.applyDarkStyles({
+ boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.4)',
+ }),
+ ]}
+ >
+ {post.image && (
+
+ )}
+
+
+ ))}
+
+
@@ -430,12 +415,12 @@ export default function Blog(props: InferGetStaticPropsType
-
-
+
+
Want to hear more from us?
- Stay on the loop about everything MUI-related through our social media:
+ Get up to date with everything MUI-related through our social media:
svg': { mr: 1 } }}>
diff --git a/docs/pages/blog/2019-developer-survey-results.js b/docs/pages/blog/2019-developer-survey-results.js
index 88dd0965500096..fe5d623ad6bd09 100644
--- a/docs/pages/blog/2019-developer-survey-results.js
+++ b/docs/pages/blog/2019-developer-survey-results.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './2019-developer-survey-results.md?@mui/markdown';
+import { docs } from './2019-developer-survey-results.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/2019.js b/docs/pages/blog/2019.js
index ddd78b798bc2ea..58c78f54c1b2b3 100644
--- a/docs/pages/blog/2019.js
+++ b/docs/pages/blog/2019.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './2019.md?@mui/markdown';
+import { docs } from './2019.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/2020-developer-survey-results.js b/docs/pages/blog/2020-developer-survey-results.js
index 61dbe4b6c18f9f..89972c75572f87 100644
--- a/docs/pages/blog/2020-developer-survey-results.js
+++ b/docs/pages/blog/2020-developer-survey-results.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './2020-developer-survey-results.md?@mui/markdown';
+import { docs } from './2020-developer-survey-results.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/2020-introducing-sketch.js b/docs/pages/blog/2020-introducing-sketch.js
index 0980c84524e3c9..58871495a8eebb 100644
--- a/docs/pages/blog/2020-introducing-sketch.js
+++ b/docs/pages/blog/2020-introducing-sketch.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './2020-introducing-sketch.md?@mui/markdown';
+import { docs } from './2020-introducing-sketch.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/2020-introducing-sketch.md b/docs/pages/blog/2020-introducing-sketch.md
index 943274d5c8b8e9..731b1ee9549a67 100644
--- a/docs/pages/blog/2020-introducing-sketch.md
+++ b/docs/pages/blog/2020-introducing-sketch.md
@@ -3,7 +3,7 @@ title: Introducing Material UI for Sketch
description: Today, we're excited to announce the introduction of official Sketch symbols for Material UI.
date: 2020-03-30T00:00:00.000Z
authors: ['oliviertassinari']
-tags: ['News']
+tags: ['Material UI', 'Product']
card: true
---
@@ -23,7 +23,7 @@ This new product brings you one step closer to this long term goal. It enables d
### Frequent requests
Over the last few months, we have seen a growing number of designers asking for these Sketch symbols.
-For instance, there is a [Stack Overflow question](https://stackoverflow.com/questions/38834629/material-ui-sketch-files) with over 4,000 views. It has been a common request on X: [one](https://twitter.com/TimoMajerski/status/1144503789619224578), [two](https://twitter.com/jonminori/status/1141121330156310528), [three](https://twitter.com/ProfessorXavior/status/1196522875706056705), [etc](https://twitter.com/JeffreyKaine/status/1133435042259120132).
+For instance, there is a [Stack Overflow question](https://stackoverflow.com/questions/38834629/material-ui-sketch-files) with over 4,000 views. It has been a common request on X: [one](https://twitter.com/TimoMajerski/status/1144503789619224578), [two](https://twitter.com/jonminori/status/1141121330156310528), [three](https://twitter.com/ProfessorXavior/status/1196522875706056705), [etc](https://twitter.com/JeffreyKaine/status/1133435042259120132).
### No great alternatives
diff --git a/docs/pages/blog/2020-q1-update.js b/docs/pages/blog/2020-q1-update.js
index ea5bc3b3327823..c6407621e44167 100644
--- a/docs/pages/blog/2020-q1-update.js
+++ b/docs/pages/blog/2020-q1-update.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './2020-q1-update.md?@mui/markdown';
+import { docs } from './2020-q1-update.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/2020-q2-update.js b/docs/pages/blog/2020-q2-update.js
index a80a723f738af9..2b9fe04380eed4 100644
--- a/docs/pages/blog/2020-q2-update.js
+++ b/docs/pages/blog/2020-q2-update.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './2020-q2-update.md?@mui/markdown';
+import { docs } from './2020-q2-update.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/2020-q3-update.js b/docs/pages/blog/2020-q3-update.js
index 7ef626f91188e4..82012ab3d8ff1e 100644
--- a/docs/pages/blog/2020-q3-update.js
+++ b/docs/pages/blog/2020-q3-update.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './2020-q3-update.md?@mui/markdown';
+import { docs } from './2020-q3-update.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/2020.js b/docs/pages/blog/2020.js
index d44b4904e98c31..efdb2d101ef289 100644
--- a/docs/pages/blog/2020.js
+++ b/docs/pages/blog/2020.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './2020.md?@mui/markdown';
+import { docs } from './2020.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/2021-developer-survey-results.js b/docs/pages/blog/2021-developer-survey-results.js
index 85d9faf93cc0b2..6f87b24b67acfe 100644
--- a/docs/pages/blog/2021-developer-survey-results.js
+++ b/docs/pages/blog/2021-developer-survey-results.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './2021-developer-survey-results.md?@mui/markdown';
+import { docs } from './2021-developer-survey-results.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/2021-developer-survey-results.md b/docs/pages/blog/2021-developer-survey-results.md
index 99ee1c1eb3fa6c..d7c6bf180b33ba 100644
--- a/docs/pages/blog/2021-developer-survey-results.md
+++ b/docs/pages/blog/2021-developer-survey-results.md
@@ -151,7 +151,7 @@ And what has decreased:
### Please rate how much you agree or disagree with the following statements
-
+
1534 out of 1589 answered.
diff --git a/docs/pages/blog/2021-q1-update.js b/docs/pages/blog/2021-q1-update.js
index 6ed19c06da619c..fd97f7e345842b 100644
--- a/docs/pages/blog/2021-q1-update.js
+++ b/docs/pages/blog/2021-q1-update.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './2021-q1-update.md?@mui/markdown';
+import { docs } from './2021-q1-update.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/2021-q1-update.md b/docs/pages/blog/2021-q1-update.md
index 9e3a5458d2ab30..299b77649072b3 100644
--- a/docs/pages/blog/2021-q1-update.md
+++ b/docs/pages/blog/2021-q1-update.md
@@ -176,7 +176,7 @@ This Handbook is the single **source of truth**. It's meant to be updated by any
- 📦 From 6.4M to 8.6M downloads per month on npm.
It seems that React keeps taking market share in the frontend ecosystem;
it's growing faster than Vue or Angular.
- Most indicators point to it: [Stack Overflow questions](https://insights.stackoverflow.com/trends?tags=vue.js%2Creactjs%2Cangular), [stars](https://bestofjs.org/projects?sort=monthly), [downloads](https://npm-stat.com/charts.html?package=react-dom,@angular/core,vue), [Traffic on the documentation](https://www.similarweb.com/website/reactjs.org/?competitors=vuejs.org).
+ Most indicators point to it: [Stack Overflow questions](https://insights.stackoverflow.com/trends?tags=vue.js%2Creactjs%2Cangular), [stars](https://bestofjs.org/projects?sort=monthly), [downloads](https://npm-stat.com/charts.html?package=react-dom,@angular/core,vue), [Traffic on the documentation](https://www.similarweb.com/website/reactjs.org/?competitors=vuejs.org).
Our strategy to focus on React only seems to be paying off.
- ⭐️ From 63.8k to 67.2k stars, leave us yours [🌟](https://github.com/mui/material-ui).
diff --git a/docs/pages/blog/2021-q2-update.js b/docs/pages/blog/2021-q2-update.js
index 5afab0a64d20c5..7c5e2751324c90 100644
--- a/docs/pages/blog/2021-q2-update.js
+++ b/docs/pages/blog/2021-q2-update.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './2021-q2-update.md?@mui/markdown';
+import { docs } from './2021-q2-update.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/2021-q3-update.js b/docs/pages/blog/2021-q3-update.js
index bda0af306eb624..b54079b7438b71 100644
--- a/docs/pages/blog/2021-q3-update.js
+++ b/docs/pages/blog/2021-q3-update.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './2021-q3-update.md?@mui/markdown';
+import { docs } from './2021-q3-update.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/2021.js b/docs/pages/blog/2021.js
index 34fc37df30f5dc..35caa8a6fe512b 100644
--- a/docs/pages/blog/2021.js
+++ b/docs/pages/blog/2021.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './2021.md?@mui/markdown';
+import { docs } from './2021.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/2022-tenerife-retreat.js b/docs/pages/blog/2022-tenerife-retreat.js
index 7e62d9f4a56c1c..225fc8d1a13a3b 100644
--- a/docs/pages/blog/2022-tenerife-retreat.js
+++ b/docs/pages/blog/2022-tenerife-retreat.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './2022-tenerife-retreat.md?@mui/markdown';
+import { docs } from './2022-tenerife-retreat.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/2023-chamonix-retreat.js b/docs/pages/blog/2023-chamonix-retreat.js
index 3df94dcef3360e..0b5bcb5b121ffd 100644
--- a/docs/pages/blog/2023-chamonix-retreat.js
+++ b/docs/pages/blog/2023-chamonix-retreat.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './2023-chamonix-retreat.md?@mui/markdown';
+import { docs } from './2023-chamonix-retreat.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/2023-material-ui-v6-and-beyond.js b/docs/pages/blog/2023-material-ui-v6-and-beyond.js
index 0aedcf6775cd75..aa35778d73eba0 100644
--- a/docs/pages/blog/2023-material-ui-v6-and-beyond.js
+++ b/docs/pages/blog/2023-material-ui-v6-and-beyond.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './2023-material-ui-v6-and-beyond.md?@mui/markdown';
+import { docs } from './2023-material-ui-v6-and-beyond.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/2023-material-ui-v6-and-beyond.md b/docs/pages/blog/2023-material-ui-v6-and-beyond.md
index 4b2c5ef484c2b1..f4af0f6cc4dff4 100644
--- a/docs/pages/blog/2023-material-ui-v6-and-beyond.md
+++ b/docs/pages/blog/2023-material-ui-v6-and-beyond.md
@@ -4,7 +4,7 @@ description: We're tightening up the Material UI release schedule and shipping
date: 2023-12-23T00:00:00.000Z
authors: ['mnajdova']
card: true
-tags: ['MUI Core', 'News']
+tags: ['Material UI', 'Product']
---
As we approach the end of 2023, we've had our heads down working on some very exciting projects for the future of Material UI in the next year.
diff --git a/docs/pages/blog/2023-mui-values.js b/docs/pages/blog/2023-mui-values.js
index f3ac9c68dd4704..02817124960530 100644
--- a/docs/pages/blog/2023-mui-values.js
+++ b/docs/pages/blog/2023-mui-values.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './2023-mui-values.md?@mui/markdown';
+import { docs } from './2023-mui-values.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/2023-phuket-retreat.js b/docs/pages/blog/2023-phuket-retreat.js
index c99f660d27e825..8e88918fd41ec6 100644
--- a/docs/pages/blog/2023-phuket-retreat.js
+++ b/docs/pages/blog/2023-phuket-retreat.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './2023-phuket-retreat.md?@mui/markdown';
+import { docs } from './2023-phuket-retreat.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/2023-toolpad-beta-announcement.js b/docs/pages/blog/2023-toolpad-beta-announcement.js
index fd6293009b9733..7d899c220088a4 100644
--- a/docs/pages/blog/2023-toolpad-beta-announcement.js
+++ b/docs/pages/blog/2023-toolpad-beta-announcement.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './2023-toolpad-beta-announcement.md?@mui/markdown';
+import { docs } from './2023-toolpad-beta-announcement.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/2023-toolpad-beta-announcement.md b/docs/pages/blog/2023-toolpad-beta-announcement.md
index d515838d9c2103..cb0522038237f4 100644
--- a/docs/pages/blog/2023-toolpad-beta-announcement.md
+++ b/docs/pages/blog/2023-toolpad-beta-announcement.md
@@ -4,7 +4,7 @@ description: Assemble admin panels and internal tools faster than ever before wi
date: 2023-07-24T00:00:00.000Z
authors: ['prakhargupta']
card: true
-tags: ['Product', 'News']
+tags: ['Product']
---
It's been over a year since we released the first version of Toolpad. Today, we're excited to take the next step on that journey with the release of Toolpad Beta. If you aren't familiar with Toolpad yet, it's an admin panel builder catering to the internal tooling needs of an organization, designed for developers who want to build a functional application quickly. It harnesses the speed of a UI builder for the front-end and closely integrates into your back-end. If this excites you, then read on!
diff --git a/docs/pages/blog/aggregation-functions.js b/docs/pages/blog/aggregation-functions.js
index 886992bcf5794c..19a980a76d5158 100644
--- a/docs/pages/blog/aggregation-functions.js
+++ b/docs/pages/blog/aggregation-functions.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './aggregation-functions.md?@mui/markdown';
+import { docs } from './aggregation-functions.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/aggregation-functions.md b/docs/pages/blog/aggregation-functions.md
index 54d8bd1a552425..68ddfb0d169974 100644
--- a/docs/pages/blog/aggregation-functions.md
+++ b/docs/pages/blog/aggregation-functions.md
@@ -3,7 +3,7 @@ title: Aggregate data like in Excel, but easier!
description: Aggregation functions and summary rows are now available in the MUI X Premium Data Grid.
date: 2022-08-01T00:00:00.000Z
authors: ['josefreitas', 'flaviendelangle', 'cherniavskii']
-tags: ['MUI X', 'News']
+tags: ['MUI X', 'Product']
card: true
---
diff --git a/docs/pages/blog/april-2019-update.js b/docs/pages/blog/april-2019-update.js
index 1b86516fcc54aa..6e8ae8aad46a19 100644
--- a/docs/pages/blog/april-2019-update.js
+++ b/docs/pages/blog/april-2019-update.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './april-2019-update.md?@mui/markdown';
+import { docs } from './april-2019-update.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/august-2019-update.js b/docs/pages/blog/august-2019-update.js
index 6d4dfb53bc182b..75fec6715a09f6 100644
--- a/docs/pages/blog/august-2019-update.js
+++ b/docs/pages/blog/august-2019-update.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './august-2019-update.md?@mui/markdown';
+import { docs } from './august-2019-update.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/base-ui-2024-plans.js b/docs/pages/blog/base-ui-2024-plans.js
index 8308c06b8f3ca3..14608375caddc6 100644
--- a/docs/pages/blog/base-ui-2024-plans.js
+++ b/docs/pages/blog/base-ui-2024-plans.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import * as pageProps from './base-ui-2024-plans.md?@mui/markdown';
+import { docs } from './base-ui-2024-plans.md?muiMarkdown';
export default function Page() {
- return ;
+ return ;
}
diff --git a/docs/pages/blog/benny-joo-joining.js b/docs/pages/blog/benny-joo-joining.js
index 46fad4ac41562a..626624151c94c9 100644
--- a/docs/pages/blog/benny-joo-joining.js
+++ b/docs/pages/blog/benny-joo-joining.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './benny-joo-joining.md?@mui/markdown';
+import { docs } from './benny-joo-joining.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/build-layouts-faster-with-grid-v2.js b/docs/pages/blog/build-layouts-faster-with-grid-v2.js
index 7c328724ac0226..64caa18325bdeb 100644
--- a/docs/pages/blog/build-layouts-faster-with-grid-v2.js
+++ b/docs/pages/blog/build-layouts-faster-with-grid-v2.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './build-layouts-faster-with-grid-v2.md?@mui/markdown';
+import { docs } from './build-layouts-faster-with-grid-v2.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/build-layouts-faster-with-grid-v2.md b/docs/pages/blog/build-layouts-faster-with-grid-v2.md
index f0054aacf1180c..b40ad11e25f25f 100644
--- a/docs/pages/blog/build-layouts-faster-with-grid-v2.md
+++ b/docs/pages/blog/build-layouts-faster-with-grid-v2.md
@@ -3,7 +3,7 @@ title: Build layouts faster with the new Grid component
description: The new Grid v2 features simplified logic, support for offsetting and nested grids, and more.
date: 2022-08-20T00:00:00.000Z
authors: ['siriwatknp']
-tags: ['MUI Core', 'News']
+tags: ['Material UI', 'Guide']
card: true
---
diff --git a/docs/pages/blog/callback-support-in-style-overrides.js b/docs/pages/blog/callback-support-in-style-overrides.js
index d4410a841d3bd7..2a9ef7273c5f21 100644
--- a/docs/pages/blog/callback-support-in-style-overrides.js
+++ b/docs/pages/blog/callback-support-in-style-overrides.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './callback-support-in-style-overrides.md?@mui/markdown';
+import { docs } from './callback-support-in-style-overrides.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/callback-support-in-style-overrides.md b/docs/pages/blog/callback-support-in-style-overrides.md
index 98517a55ce5e69..1af851aff3e328 100644
--- a/docs/pages/blog/callback-support-in-style-overrides.md
+++ b/docs/pages/blog/callback-support-in-style-overrides.md
@@ -3,7 +3,7 @@ title: Introducing callback support in style overrides
description: We're excited to introduce callback support for global theme overrides in this minor version update!
date: 2022-01-31T00:00:00.000Z
authors: ['siriwatknp']
-tags: ['MUI Core', 'News']
+tags: ['Material UI', 'Product']
card: true
---
diff --git a/docs/pages/blog/danail-hadjiatanasov-joining.js b/docs/pages/blog/danail-hadjiatanasov-joining.js
index 44e90d7f2a7c86..d4cbeaa405a4bf 100644
--- a/docs/pages/blog/danail-hadjiatanasov-joining.js
+++ b/docs/pages/blog/danail-hadjiatanasov-joining.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './danail-hadjiatanasov-joining.md?@mui/markdown';
+import { docs } from './danail-hadjiatanasov-joining.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/danilo-leal-joining.js b/docs/pages/blog/danilo-leal-joining.js
index 8fefd0aed3b45e..54ae20ca78a2a4 100644
--- a/docs/pages/blog/danilo-leal-joining.js
+++ b/docs/pages/blog/danilo-leal-joining.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './danilo-leal-joining.md?@mui/markdown';
+import { docs } from './danilo-leal-joining.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/date-pickers-stable-v5.js b/docs/pages/blog/date-pickers-stable-v5.js
index 746baf511a3a4d..8affdff1600c59 100644
--- a/docs/pages/blog/date-pickers-stable-v5.js
+++ b/docs/pages/blog/date-pickers-stable-v5.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './date-pickers-stable-v5.md?@mui/markdown';
+import { docs } from './date-pickers-stable-v5.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/date-pickers-stable-v5.md b/docs/pages/blog/date-pickers-stable-v5.md
index 3babfd4056920c..306637c250c28c 100644
--- a/docs/pages/blog/date-pickers-stable-v5.md
+++ b/docs/pages/blog/date-pickers-stable-v5.md
@@ -3,7 +3,7 @@ title: The MUI X Date and Time Pickers get a stable v5 release
description: Migrate to the latest version for improved DX, customizability, and API consistency.
date: 2022-09-19T00:00:00.000Z
authors: ['alexfauquette', 'josefreitas']
-tags: ['MUI X', 'News']
+tags: ['MUI X', 'Product']
card: true
---
diff --git a/docs/pages/blog/december-2019-update.js b/docs/pages/blog/december-2019-update.js
index eeabf8c1c29dba..44a488d9723052 100644
--- a/docs/pages/blog/december-2019-update.js
+++ b/docs/pages/blog/december-2019-update.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './december-2019-update.md?@mui/markdown';
+import { docs } from './december-2019-update.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/discord-announcement.js b/docs/pages/blog/discord-announcement.js
index ed8f5cf7669435..1fe7197fa91278 100644
--- a/docs/pages/blog/discord-announcement.js
+++ b/docs/pages/blog/discord-announcement.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './discord-announcement.md?@mui/markdown';
+import { docs } from './discord-announcement.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/discord-announcement.md b/docs/pages/blog/discord-announcement.md
index 018f60303e5748..4a58bb279a84c7 100644
--- a/docs/pages/blog/discord-announcement.md
+++ b/docs/pages/blog/discord-announcement.md
@@ -3,14 +3,14 @@ title: 'MUI is now on Discord!'
description: Come join our community to engage in lively discussions, share your projects, and interact with the MUI team.
date: 2023-08-02T00:00:00.000Z
authors: ['richbustos']
-tags: ['News']
+tags: ['Company']
card: true
---
This year, one of our highest priorities has been to create a central hub for the MUI community.
-Up until now, our community has been scattered across discussions and interactions on [X](https://twitter.com/MUI_hq), [LinkedIn](https://linkedin.com/company/mui), [GitHub](https://github.com/mui), and [Stack Overflow](https://stackoverflow.com/questions/tagged/material-ui).
+Up until now, our community has been scattered across discussions and interactions on [X](https://twitter.com/MUI_hq), [LinkedIn](https://linkedin.com/company/mui), [GitHub](https://github.com/mui), and [Stack Overflow](https://stackoverflow.com/questions/tagged/material-ui).
That's why we've officially launched our [Discord Server](https://mui.com/r/discord/)—and we'd love for you to be a part of our community!
diff --git a/docs/pages/blog/docs-restructure-2022.js b/docs/pages/blog/docs-restructure-2022.js
index 75b4dad5bb69db..33c0378c424688 100644
--- a/docs/pages/blog/docs-restructure-2022.js
+++ b/docs/pages/blog/docs-restructure-2022.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './docs-restructure-2022.md?@mui/markdown';
+import { docs } from './docs-restructure-2022.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/docs-restructure-2022.md b/docs/pages/blog/docs-restructure-2022.md
index f474381253b029..6fe7e34853094e 100644
--- a/docs/pages/blog/docs-restructure-2022.md
+++ b/docs/pages/blog/docs-restructure-2022.md
@@ -3,7 +3,7 @@ title: 'Our docs just got a major upgrade—here's what that means for you'
description: Each of MUI's products now has its own dedicated documentation, making it easier than ever to find exactly what you need.
date: 2022-04-06T00:00:00.000Z
authors: ['danilo-leal']
-tags: ['News', 'Product']
+tags: ['Product']
card: true
---
diff --git a/docs/pages/blog/first-look-at-joy.js b/docs/pages/blog/first-look-at-joy.js
index b1553d8435498d..d3bc5d214612d7 100644
--- a/docs/pages/blog/first-look-at-joy.js
+++ b/docs/pages/blog/first-look-at-joy.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './first-look-at-joy.md?@mui/markdown';
+import { docs } from './first-look-at-joy.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/first-look-at-joy.md b/docs/pages/blog/first-look-at-joy.md
index 51c1d589da195f..9063380116df5a 100644
--- a/docs/pages/blog/first-look-at-joy.md
+++ b/docs/pages/blog/first-look-at-joy.md
@@ -3,7 +3,7 @@ title: First look at Joy UI 🥳
description: A sneak peek at MUI's new starting point for your design system.
date: 2022-06-08T00:00:00.000Z
authors: ['danilo-leal', 'siriwatknp']
-tags: ['News', 'MUI Core']
+tags: ['Joy UI', 'Product']
card: true
---
diff --git a/docs/pages/blog/introducing-base-ui.js b/docs/pages/blog/introducing-base-ui.js
index 005707bbb8846d..2bea4c618dea0b 100644
--- a/docs/pages/blog/introducing-base-ui.js
+++ b/docs/pages/blog/introducing-base-ui.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './introducing-base-ui.md?@mui/markdown';
+import { docs } from './introducing-base-ui.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/introducing-the-row-grouping-feature.js b/docs/pages/blog/introducing-the-row-grouping-feature.js
index 614562b92470a5..74301e65aef8e1 100644
--- a/docs/pages/blog/introducing-the-row-grouping-feature.js
+++ b/docs/pages/blog/introducing-the-row-grouping-feature.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './introducing-the-row-grouping-feature.md?@mui/markdown';
+import { docs } from './introducing-the-row-grouping-feature.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/introducing-the-row-grouping-feature.md b/docs/pages/blog/introducing-the-row-grouping-feature.md
index 007074f02fe547..817909ca6361e9 100644
--- a/docs/pages/blog/introducing-the-row-grouping-feature.md
+++ b/docs/pages/blog/introducing-the-row-grouping-feature.md
@@ -3,7 +3,7 @@ title: Give your users more freedom with Data Grid row grouping
description: The new row grouping feature gives your users more customization options for organizing their data.
date: 2022-01-20T00:00:00.000Z
authors: ['alexfauquette']
-tags: ['MUI X', 'News']
+tags: ['MUI X', 'Product']
card: true
---
diff --git a/docs/pages/blog/july-2019-update.js b/docs/pages/blog/july-2019-update.js
index b56bd585f39884..cc01f9c65562d8 100644
--- a/docs/pages/blog/july-2019-update.js
+++ b/docs/pages/blog/july-2019-update.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './july-2019-update.md?@mui/markdown';
+import { docs } from './july-2019-update.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/june-2019-update.js b/docs/pages/blog/june-2019-update.js
index ee4b1e1cd76a12..890f7e8e08a6fb 100644
--- a/docs/pages/blog/june-2019-update.js
+++ b/docs/pages/blog/june-2019-update.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './june-2019-update.md?@mui/markdown';
+import { docs } from './june-2019-update.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/lab-date-pickers-to-mui-x.js b/docs/pages/blog/lab-date-pickers-to-mui-x.js
index 835f0e6084c499..f98f7805b66102 100644
--- a/docs/pages/blog/lab-date-pickers-to-mui-x.js
+++ b/docs/pages/blog/lab-date-pickers-to-mui-x.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './lab-date-pickers-to-mui-x.md?@mui/markdown';
+import { docs } from './lab-date-pickers-to-mui-x.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/lab-date-pickers-to-mui-x.md b/docs/pages/blog/lab-date-pickers-to-mui-x.md
index dee347748cea3d..9d7ddc8dfacb24 100644
--- a/docs/pages/blog/lab-date-pickers-to-mui-x.md
+++ b/docs/pages/blog/lab-date-pickers-to-mui-x.md
@@ -3,7 +3,7 @@ title: Date and Time Pickers are moving to MUI X
description: Migrate to the new package to start building with our powerful Date and Time Pickers, now part of MUI X. Previously released MIT components will stay MIT.
date: 2022-04-03T00:00:00.000Z
authors: ['flaviendelangle']
-tags: ['MUI X', 'News']
+tags: ['MUI X', 'Product']
card: true
---
diff --git a/docs/pages/blog/lab-tree-view-to-mui-x.js b/docs/pages/blog/lab-tree-view-to-mui-x.js
index a2caf6fad2b240..e4117847ac23c3 100644
--- a/docs/pages/blog/lab-tree-view-to-mui-x.js
+++ b/docs/pages/blog/lab-tree-view-to-mui-x.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './lab-tree-view-to-mui-x.md?@mui/markdown';
+import { docs } from './lab-tree-view-to-mui-x.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/lab-tree-view-to-mui-x.md b/docs/pages/blog/lab-tree-view-to-mui-x.md
index 010768c3a6afaf..7a35a33f599044 100644
--- a/docs/pages/blog/lab-tree-view-to-mui-x.md
+++ b/docs/pages/blog/lab-tree-view-to-mui-x.md
@@ -3,7 +3,7 @@ title: The Tree View is moving to MUI X
description: Migrate to the new package to start building with our powerful Tree View, now part of MUI X. Previously released MIT components will stay MIT.
date: 2023-08-21T00:00:00.000Z
authors: ['flaviendelangle']
-tags: ['MUI X', 'News']
+tags: ['MUI X', 'Product']
card: true
---
diff --git a/docs/pages/blog/making-customizable-components.js b/docs/pages/blog/making-customizable-components.js
index afb3a0ddaaf6ac..0f85c1055cf425 100644
--- a/docs/pages/blog/making-customizable-components.js
+++ b/docs/pages/blog/making-customizable-components.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './making-customizable-components.md?@mui/markdown';
+import { docs } from './making-customizable-components.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/making-customizable-components.md b/docs/pages/blog/making-customizable-components.md
index c29fb1e9ff92fa..da4c429a93a9d3 100644
--- a/docs/pages/blog/making-customizable-components.md
+++ b/docs/pages/blog/making-customizable-components.md
@@ -3,11 +3,11 @@ title: Strategies for building customizable components
description: Explore the tradeoffs between different customization techniques, and how we landed on our strategy at MUI.
date: 2022-08-22T00:00:00.000Z
authors: ['alexfauquette']
-tags: ['MUI X', 'MUI Core']
+tags: ['MUI X', 'Material UI', 'Guide']
card: true
---
-MUI's components are used by hundreds of thousands of developers worldwide, encompassing the full range of implementation from minor side projects to massive company websites.
+Material UI's components are used by hundreds of thousands of developers worldwide, encompassing the full range of implementation from minor side projects to massive company websites.
This variety of users presents a dilemma for us as maintainers: hobbyists working on side projects want fully built components that work right out of the box, so they can focus on the application logic; many larger companies, by contrast, want to be able to fully customize components to respect their brand design.
@@ -64,7 +64,7 @@ you can play around with it in [CodeSandbox](https://codesandbox.io/p/sandbox/fa
Maybe you don't want to spend your time switching between CSS and JavaScript files, or writing long, cluttered stylesheets.
To avoid these problems you can integrate styles directly into your JS code. 🎉
-Because the level of customization varies across projects, MUI's components can be customized in several different ways.
+Because the level of customization varies across projects, Material UI's components can be customized in several different ways.
For more information on this topic, check out the [Material UI customization documentation](https://mui.com/material-ui/customization/how-to-customize/).
## Logic modification
@@ -136,7 +136,7 @@ If your main priority is to get up and running quickly, then this may not be a v
#### Subdivide your components
Another approach I like is to provide subcomponents.
-This is what we do for MUI Core components such as the [Menu](https://mui.com/material-ui/react-menu/).
+This is what we do for Material UI components such as the [Menu](https://mui.com/material-ui/react-menu/).
This is also the approach used by [react-admin](https://marmelab.com/react-admin/) to provide a customizable administration interface.
Here is their quick start example:
@@ -303,7 +303,7 @@ For example, a grid can exist without its filter panel, or without its toolbar.
In our last two annual [Developer Surveys](/blog/2021-developer-survey-results/), our users made it clear that customization is always a top priority when choosing a UI library.
-Thanks to the slot strategy and the introduction of supplementary tools like [MUI System's `sx` prop](https://mui.com/system/getting-started/the-sx-prop/), it has never been easier to customize MUI's components to suit your specific needs.
+Thanks to the slot strategy and the introduction of supplementary tools like [MUI System's `sx` prop](https://mui.com/system/getting-started/the-sx-prop/), it has never been easier to customize Material UI's components to suit your specific needs.
[Material UI](https://mui.com/material-ui/getting-started/) and [Joy UI](https://mui.com/joy-ui/getting-started/) are designed to be both beautiful and flexible right out of the box, while [Base UI](https://mui.com/base-ui/getting-started/) gives you the most freedom to implement your own custom styling solution.
[MUI X](https://mui.com/x/introduction/) is comprised of fully featured complex components like the `DataGrid` which—as we've seen—can still be customized in many ways with minimal friction.
diff --git a/docs/pages/blog/march-2019-update.js b/docs/pages/blog/march-2019-update.js
index ff1debb02ddcca..febbc11c9f18bd 100644
--- a/docs/pages/blog/march-2019-update.js
+++ b/docs/pages/blog/march-2019-update.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './march-2019-update.md?@mui/markdown';
+import { docs } from './march-2019-update.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/marija-najdova-joining.js b/docs/pages/blog/marija-najdova-joining.js
index ca5212a5f736d6..6c5df493795835 100644
--- a/docs/pages/blog/marija-najdova-joining.js
+++ b/docs/pages/blog/marija-najdova-joining.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './marija-najdova-joining.md?@mui/markdown';
+import { docs } from './marija-najdova-joining.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/material-ui-is-now-mui.js b/docs/pages/blog/material-ui-is-now-mui.js
index da631003aabc92..30e85aea2267f7 100644
--- a/docs/pages/blog/material-ui-is-now-mui.js
+++ b/docs/pages/blog/material-ui-is-now-mui.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './material-ui-is-now-mui.md?@mui/markdown';
+import { docs } from './material-ui-is-now-mui.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/material-ui-is-now-mui.md b/docs/pages/blog/material-ui-is-now-mui.md
index 2f563799c5e52d..b956024eae46cd 100644
--- a/docs/pages/blog/material-ui-is-now-mui.md
+++ b/docs/pages/blog/material-ui-is-now-mui.md
@@ -3,7 +3,7 @@ title: Material-UI is now Material UI!
description: Starting today, we are evolving our brand identity. We are clarifying the difference between our company and our products.
date: 2021-09-16T00:00:00.000Z
authors: ['oliviertassinari', 'danilo-leal', 'mbrookes']
-tags: ['Company']
+tags: ['Material UI']
card: true
---
diff --git a/docs/pages/blog/material-ui-v1-is-out.js b/docs/pages/blog/material-ui-v1-is-out.js
index 2068df7f6d27d1..3e0ea9db643fa6 100644
--- a/docs/pages/blog/material-ui-v1-is-out.js
+++ b/docs/pages/blog/material-ui-v1-is-out.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './material-ui-v1-is-out.md?@mui/markdown';
+import { docs } from './material-ui-v1-is-out.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/material-ui-v1-is-out.md b/docs/pages/blog/material-ui-v1-is-out.md
index 4b02fc81e6d97a..d88daf681f8ec3 100644
--- a/docs/pages/blog/material-ui-v1-is-out.md
+++ b/docs/pages/blog/material-ui-v1-is-out.md
@@ -3,7 +3,7 @@ title: Material UI v1 is out 🎉
description: It has taken us two years to do it, but Material UI v1 has finally arrived!
date: 2018-05-18T00:00:00.000Z
authors: ['oliviertassinari', 'mbrookes']
-tags: ['Company']
+tags: ['Material UI', 'Product']
card: true
---
diff --git a/docs/pages/blog/material-ui-v4-is-out.js b/docs/pages/blog/material-ui-v4-is-out.js
index 52b149946fe9c5..fb74874a1c1002 100644
--- a/docs/pages/blog/material-ui-v4-is-out.js
+++ b/docs/pages/blog/material-ui-v4-is-out.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './material-ui-v4-is-out.md?@mui/markdown';
+import { docs } from './material-ui-v4-is-out.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/material-ui-v4-is-out.md b/docs/pages/blog/material-ui-v4-is-out.md
index 808270d53f911a..db433c50987ad0 100644
--- a/docs/pages/blog/material-ui-v4-is-out.md
+++ b/docs/pages/blog/material-ui-v4-is-out.md
@@ -3,7 +3,7 @@ title: Material UI v4 is out 🎉
description: Material UI v4 has finally arrived. We are so excited about this release, as it defines better foundations for the UI components.
date: 2019-05-23T00:00:00.000Z
authors: ['oliviertassinari', 'mbrookes', 'eps1lon']
-tags: ['Company']
+tags: ['Material UI', 'Product']
card: true
---
diff --git a/docs/pages/blog/matheus-wichman-joining.js b/docs/pages/blog/matheus-wichman-joining.js
index 3d178dfcb74bef..1160b94db4245d 100644
--- a/docs/pages/blog/matheus-wichman-joining.js
+++ b/docs/pages/blog/matheus-wichman-joining.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './matheus-wichman-joining.md?@mui/markdown';
+import { docs } from './matheus-wichman-joining.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/may-2019-update.js b/docs/pages/blog/may-2019-update.js
index 77adc649c6c225..23f45318cbfc40 100644
--- a/docs/pages/blog/may-2019-update.js
+++ b/docs/pages/blog/may-2019-update.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './may-2019-update.md?@mui/markdown';
+import { docs } from './may-2019-update.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/michal-dudak-joining.js b/docs/pages/blog/michal-dudak-joining.js
index a747343a2ee5fb..9a3f9481da9001 100644
--- a/docs/pages/blog/michal-dudak-joining.js
+++ b/docs/pages/blog/michal-dudak-joining.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './michal-dudak-joining.md?@mui/markdown';
+import { docs } from './michal-dudak-joining.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/mui-core-v5-migration-update.js b/docs/pages/blog/mui-core-v5-migration-update.js
index 1fccf9b5f55d52..57730cb0a21a3e 100644
--- a/docs/pages/blog/mui-core-v5-migration-update.js
+++ b/docs/pages/blog/mui-core-v5-migration-update.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './mui-core-v5-migration-update.md?@mui/markdown';
+import { docs } from './mui-core-v5-migration-update.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/mui-core-v5-migration-update.md b/docs/pages/blog/mui-core-v5-migration-update.md
index bf3601b7ff7c1c..04a9be054133ad 100644
--- a/docs/pages/blog/mui-core-v5-migration-update.md
+++ b/docs/pages/blog/mui-core-v5-migration-update.md
@@ -4,7 +4,7 @@ description: We have completely revamped our Migration guide to reduce friction
date: 2022-06-20T00:00:00.000Z
authors: ['samuelsycamore']
card: true
-tags: ['MUI Core']
+tags: ['Material UI']
---
Are you still using Material UI v4 in 2022?
diff --git a/docs/pages/blog/mui-core-v5.js b/docs/pages/blog/mui-core-v5.js
index 58964ba574b46e..25b650d512607d 100644
--- a/docs/pages/blog/mui-core-v5.js
+++ b/docs/pages/blog/mui-core-v5.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './mui-core-v5.md?@mui/markdown';
+import { docs } from './mui-core-v5.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/mui-core-v5.md b/docs/pages/blog/mui-core-v5.md
index fb7ce664886981..0a03f8293c3f1f 100644
--- a/docs/pages/blog/mui-core-v5.md
+++ b/docs/pages/blog/mui-core-v5.md
@@ -13,7 +13,7 @@ authors:
'mbrookes',
]
card: true
-tags: ['News']
+tags: ['Product', 'Material UI']
---
After over 400 days of development and over 40 canary releases, we are excited to introduce [MUI Core v5.0.0](https://github.com/mui/material-ui/releases/tag/v5.0.0)!
diff --git a/docs/pages/blog/mui-next-js-app-router.js b/docs/pages/blog/mui-next-js-app-router.js
index 9770faddcd6876..3abb16c25c80e6 100644
--- a/docs/pages/blog/mui-next-js-app-router.js
+++ b/docs/pages/blog/mui-next-js-app-router.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './mui-next-js-app-router.md?@mui/markdown';
+import { docs } from './mui-next-js-app-router.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/mui-next-js-app-router.md b/docs/pages/blog/mui-next-js-app-router.md
index d3ad4e7178dbcb..1268561ad33d1f 100644
--- a/docs/pages/blog/mui-next-js-app-router.md
+++ b/docs/pages/blog/mui-next-js-app-router.md
@@ -4,7 +4,7 @@ description: Material UI, Base UI, and Joy UI are now compatible with the App
date: 2023-07-18T00:00:00.000Z
authors: ['samuelsycamore']
card: true
-tags: ['News']
+tags: ['Product']
---
With [v5.14.0](https://github.com/mui/material-ui/releases/tag/v5.14.0), MUI's Core component libraries—Material UI, Base UI, and Joy UI—are now compatible with the Next.js App Router. 🚀
diff --git a/docs/pages/blog/mui-product-comparison.js b/docs/pages/blog/mui-product-comparison.js
index 3a66bc758c35c3..08fbe6e500ae75 100644
--- a/docs/pages/blog/mui-product-comparison.js
+++ b/docs/pages/blog/mui-product-comparison.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './mui-product-comparison.md?@mui/markdown';
+import { docs } from './mui-product-comparison.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/mui-x-end-v6-features.js b/docs/pages/blog/mui-x-end-v6-features.js
index d66835102eeb45..c33ca544f5ad16 100644
--- a/docs/pages/blog/mui-x-end-v6-features.js
+++ b/docs/pages/blog/mui-x-end-v6-features.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
-import { docs } from './mui-x-end-v6-features.md?@mui/markdown';
+import { docs } from './mui-x-end-v6-features.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/blog/mui-x-end-v6-features.md b/docs/pages/blog/mui-x-end-v6-features.md
index 7579e0b6595ee2..29c3acd6ad8d57 100644
--- a/docs/pages/blog/mui-x-end-v6-features.md
+++ b/docs/pages/blog/mui-x-end-v6-features.md
@@ -4,7 +4,7 @@ description: New components, polished features, better performance and more.
date: 2023-11-13T00:00:00.000Z
authors: ['josefreitas']
card: true
-tags: ['MUI X', 'News']
+tags: ['MUI X', 'Product']
---