Merge branch 'master' into refactor-async-demo

README.md

@@ -77,6 +77,12 @@ via [Open Collective](https://opencollective.com/mui-org) or via [Patreon](http
   <a href="https://megafamous.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://mui.com/static/sponsors/megafamous.png" alt="megafamous.com" title="MegaFamous: Buy Instagram followers and likes." loading="lazy" /></a>
   <a href="https://www.dialmycalls.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://images.opencollective.com/dialmycalls/f5ae9ab/avatar/288.png" alt="dialmycalls.com" title="DialMyCalls: Send text messages, calls, and emails." loading="lazy" /></a>
   <a href="https://goread.io/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://images.opencollective.com/goread_io/eb6337d/logo/288.png" alt="goread.io" title="Goread.io: Instagram followers, likes, views, and comments." loading="lazy" /></a>
+  <a href="https://copycopter.ai/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://images.opencollective.com/copycopterai/e167216/logo/288.png" alt="copycopter.ai" title="CopyCopter: Turn prompts into videos at ultra speed." loading="lazy" /></a>
+</p>
+
+<p>
+  <a href="https://buzzoid.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank" style="margin-right:8px;" ><img height="24" width="26" src="https://images.opencollective.com/buzzoidz/d23d9bb/logo/24.png" srcset="https://images.opencollective.com/buzzoidz/d23d9bb/logo/72.png 3x" alt="buzzoid.com" title="Buzzoid: Instant delivery Instagram followers." loading="lazy" style="margin-right:8px;" />Buzzoid</a>
+  <a href="https://twicsy.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank" style="margin-right:8px;" ><img height="24" width="27" src="https://images.opencollective.com/twicsy/7af290f/logo/24.png" alt="twicsy.com" title="Twicsy: Instant delivery Instagram followers." style="margin-right:8px;" loading="lazy" />Twicsy</a>
 </p>
 
 Gold sponsors are those who have pledged \$500/month or more to MUI.

apps/pigment-css-next-app/src/app/material-ui/react-grid/page.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';

apps/pigment-css-next-app/src/app/material-ui/react-stack/page.tsx

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import Divider from '@mui/material/Divider';
 import Paper from '@mui/material/Paper';

docs/data/base/components/transitions/transitions.md

@@ -68,7 +68,7 @@ See the examples below.
 
 ### Material UI (React Transition Group)
 
-You can use any of the [transitions from Material UI](https://mui.com/material-ui/transitions/), or custom transitions built with React Transition Group, using an adapter shown in the following demo.
+You can use any of the [transitions from Material UI](/material-ui/transitions/), or custom transitions built with React Transition Group, using an adapter shown in the following demo.
 
 {{"demo": "ReactTransitionGroup.js"}}
 

docs/data/joy/components/alert/alert.md

@@ -20,7 +20,7 @@ The Alert component can be used to provide important and potentially time-sensit
 
 :::info
 Alerts should not be confused with alert _dialogs_ ([ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/)), which _are_ intended to interrupt the user to obtain a response.
-Use the Joy UI [Modal](https://mui.com/joy-ui/react-modal/) if you need the behavior of a dialog.
+Use the Joy UI [Modal](/joy-ui/react-modal/) if you need the behavior of a dialog.
 :::
 
 ## Basics

docs/data/joy/components/css-baseline/css-baseline.md

@@ -135,7 +135,7 @@ function App() {
 
 ### ScopedCssBaseline
 
-You can customize it using the [themed components](https://mui.com/joy-ui/customization/themed-components/) approach. The component identifier is `JoyScopedCssBaseline` which contains only the `root` slot.
+You can customize it using the [themed components](/joy-ui/customization/themed-components/) approach. The component identifier is `JoyScopedCssBaseline` which contains only the `root` slot.
 
 ```js
 import { CssVarsProvider, extendTheme } from '@mui/joy/styles';

docs/data/joy/components/radio-button/radio-button.md

@@ -150,7 +150,7 @@ This example demonstrates the composition of the components, and was inspired by
 
 ### Alignment buttons
 
-This example uses icons as labels for a group of Radio buttons to recreate the form and function of [Toggle Buttons](https://mui.com/material-ui/react-toggle-button/).
+This example uses icons as labels for a group of Radio buttons to recreate the form and function of [Toggle Buttons](/material-ui/react-toggle-button/).
 In this case, you must provide an `aria-label` to the input slot for users who rely on screen readers.
 
 {{"demo": "ExampleAlignmentButtons.js"}}

docs/data/material/components/alert/alert.md

@@ -29,7 +29,7 @@ This component is no longer documented in the [Material Design guidelines](https
 
 A key trait of the alert pattern is that [it should not interrupt the user's experience](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) of the app.
 Alerts should not be confused with alert _dialogs_ ([ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/)), which _are_ intended to interrupt the user to obtain a response.
-Use the Material UI [Dialog](https://mui.com/material-ui/react-dialog/) component if you need this behavior.
+Use the Material UI [Dialog](/material-ui/react-dialog/) component if you need this behavior.
 
 ## Basics
 

docs/data/material/components/autocomplete/GitHubLabel.js

@@ -80,7 +80,7 @@ const StyledInput = styled(InputBase)(({ theme }) => ({
   borderBottom: `1px solid ${'#30363d'}`,
   '& input': {
     borderRadius: 4,
-    backgroundColor: '#0d1117',
+    backgroundColor: '#fff',
     border: `1px solid ${'#30363d'}`,
     padding: 8,
     transition: theme.transitions.create(['border-color', 'box-shadow']),
@@ -94,7 +94,7 @@ const StyledInput = styled(InputBase)(({ theme }) => ({
       }),
     },
     ...theme.applyStyles('dark', {
-      backgroundColor: '#fff',
+      backgroundColor: '#0d1117',
       border: `1px solid ${'#eaecef'}`,
     }),
   },

docs/data/material/components/autocomplete/GitHubLabel.tsx

@@ -84,7 +84,7 @@ const StyledInput = styled(InputBase)(({ theme }) => ({
   borderBottom: `1px solid ${'#30363d'}`,
   '& input': {
     borderRadius: 4,
-    backgroundColor: '#0d1117',
+    backgroundColor: '#fff',
     border: `1px solid ${'#30363d'}`,
     padding: 8,
     transition: theme.transitions.create(['border-color', 'box-shadow']),
@@ -98,7 +98,7 @@ const StyledInput = styled(InputBase)(({ theme }) => ({
       }),
     },
     ...theme.applyStyles('dark', {
-      backgroundColor: '#fff',
+      backgroundColor: '#0d1117',
       border: `1px solid ${'#eaecef'}`,
     }),
   },

docs/data/material/components/dialogs/dialogs.md

@@ -27,7 +27,7 @@ Dialogs are implemented using a collection of related components:
 - Dialog Actions: an optional container for a Dialog's Buttons.
 - Dialog Content: an optional container for displaying the Dialog's content.
 - Dialog Content Text: a wrapper for text inside of `<DialogContent />`.
-- Slide: optional [Transition](https://mui.com/material-ui/transitions/#slide) used to slide the Dialog in from the edge of the screen.
+- Slide: optional [Transition](/material-ui/transitions/#slide) used to slide the Dialog in from the edge of the screen.
 
 {{"demo": "SimpleDialogDemo.js"}}
 

docs/data/material/components/rating/rating.md

@@ -59,7 +59,7 @@ The accessibility of this component relies on:
 - A radio group with its fields visually hidden.
   It contains six radio buttons, one for each star, and another for 0 stars that is checked by default. Be sure to provide a value for the `name` prop that is unique to the parent form.
 - Labels for the radio buttons containing actual text ("1 Star", "2 Stars", …).
-  Be sure to provide a suitable function to the `getLabelText` prop when the page is in a language other than English. You can use the [included locales](https://mui.com/material-ui/guides/localization/), or provide your own.
+  Be sure to provide a suitable function to the `getLabelText` prop when the page is in a language other than English. You can use the [included locales](/material-ui/guides/localization/), or provide your own.
 - A visually distinct appearance for the rating icons.
   By default, the rating component uses both a difference of color and shape (filled and empty icons) to indicate the value. In the event that you are using color as the only means to indicate the value, the information should also be also displayed as text, as in this demo. This is important to match [success Criterion 1.4.1](https://www.w3.org/TR/WCAG21/#use-of-color) of WCAG2.1.
 

docs/data/material/design-resources/material-ui-for-figma/material-ui-for-figma.md

@@ -86,7 +86,7 @@ The video below shows how to add new columns by copying cells directly on the ma
 You can export theme tokens and component customizations to code using [the Sync plugin for Figma](/material-ui/design-resources/material-ui-sync/).
 The Design Kit has been built to be as close to the React components as possible, making it for a fluid integration with code.
 
-Learn more about the Material UI theme structure by visiting the [Theming](https://mui.com/material-ui/customization/theming/) and [Default theme viewer](https://mui.com/material-ui/customization/theming/) pages.
+Learn more about the Material UI theme structure by visiting the [Theming](/material-ui/customization/theming/) and [Default theme viewer](/material-ui/customization/theming/) pages.
 
 ## Using new design kit versions
 

docs/data/material/discover-more/backers/backers.md

@@ -28,15 +28,16 @@ via [Open Collective](https://opencollective.com/mui-org) or via [the for-profi
   <a data-ga-event-category="sponsor" data-ga-event-action="docs-backers" data-ga-event-label="megafamous.com" href="https://megafamous.com/?utm_source=MUI&utm_medium=referral&utm_content=backers" rel="noopener sponsored" target="_blank" class="remove-link-arrow" style="margin-right: 16px;"><img height="96" width="96" src="/static/sponsors/megafamous.png" alt="megafamous.com" title="MegaFamous: Buy Instagram followers and likes." loading="lazy" /></a>
   <a data-ga-event-category="sponsor" data-ga-event-action="docs-backers" data-ga-event-label="dialmycalls.com" href="https://www.dialmycalls.com/?utm_source=MUI&utm_medium=referral&utm_content=backers" rel="noopener sponsored" target="_blank" class="remove-link-arrow" style="margin-right: 16px;"><img height="96" width="96" src="https://images.opencollective.com/dialmycalls/f5ae9ab/avatar/96.png" srcset="https://images.opencollective.com/dialmycalls/f5ae9ab/avatar/288.png 3x" alt="dialmycalls.com" title="DialMyCalls: Send text messages, calls, and emails." loading="lazy" /></a>
   <a data-ga-event-category="sponsor" data-ga-event-action="docs-backers" data-ga-event-label="goread.io" href="https://goread.io/?utm_source=MUI&utm_medium=referral&utm_content=backers" rel="noopener sponsored" target="_blank" class="remove-link-arrow" style="margin-right: 16px; display:flex;"><img height="110" width="96" src="https://images.opencollective.com/goread_io/eb6337d/logo/96.png" srcset="https://images.opencollective.com/goread_io/eb6337d/logo/288.png 3x" alt="goread.io" title="Goread.io: Instagram followers, likes, views, and comments." loading="lazy" /></a>
+  <a data-ga-event-category="sponsor" data-ga-event-action="docs-backers" data-ga-event-label="copycopter.ai" href="https://copycopter.ai/?utm_source=MUI&utm_medium=referral&utm_content=backers" rel="noopener sponsored" target="_blank" class="remove-link-arrow" style="margin-right: 16px; display:flex;"><img height="96" width="96" src="https://images.opencollective.com/copycopterai/e167216/logo/96.png" srcset="https://images.opencollective.com/copycopterai/e167216/logo/288.png 3x" alt="copycopter.ai" title="CopyCopter: Turn prompts into videos at ultra speed." loading="lazy" /></a>
 </p>
 
 <!--
 List gold sponsors that regular sponsors could feel uncomfortable being listed next to.
 For example, it could be because the service breaks another service's Terms of service and hence is a moral minefield.
 -->
 <p style="display: flex; justify-content: start; align-items: center; flex-wrap: wrap;">
-  <a data-ga-event-category="sponsor" data-ga-event-action="docs-backers" data-ga-event-label="buzzoid.com" href="https://buzzoid.com/" rel="noopener sponsored" target="_blank" class="remove-link-arrow" style="margin-right: 16px; display:flex;"><img height="24" width="24" src="https://images.opencollective.com/buzzoidz/d23d9bb/logo/24.png" srcset="https://images.opencollective.com/buzzoidz/d23d9bb/logo/72.png 3x" alt="buzzoid.com" title="Buzzoid: Instant delivery Instagram followers." loading="lazy" style="margin-right:8px;" />Buzzoid</a>
-  <a data-ga-event-category="sponsor" data-ga-event-action="docs-backers" data-ga-event-label="twicsy.com" href="https://twicsy.com/" rel="noopener sponsored" target="_blank" class="remove-link-arrow" style="margin-right: 16px; display:flex;"><img height="24" width="24" src="/static/sponsors/twicsy-square.svg" alt="twicsy.com" title="Twicsy: Instant delivery Instagram followers." loading="lazy" style="margin-right:8px;" />Twicsy</a>
+  <a data-ga-event-category="sponsor" data-ga-event-action="docs-backers" data-ga-event-label="buzzoid.com" href="https://buzzoid.com/?utm_source=MUI&utm_medium=referral&utm_content=backers" rel="noopener sponsored" target="_blank" class="remove-link-arrow" style="margin-right: 16px; display:flex;"><img height="24" width="26" src="https://images.opencollective.com/buzzoidz/d23d9bb/logo/24.png" srcset="https://images.opencollective.com/buzzoidz/d23d9bb/logo/72.png 3x" alt="buzzoid.com" title="Buzzoid: Instant delivery Instagram followers." loading="lazy" style="margin-right:8px;" />Buzzoid</a>
+  <a data-ga-event-category="sponsor" data-ga-event-action="docs-backers" data-ga-event-label="twicsy.com" href="https://twicsy.com/?utm_source=MUI&utm_medium=referral&utm_content=backers" rel="noopener sponsored" target="_blank" class="remove-link-arrow" style="margin-right: 16px; display:flex;"><img height="24" width="26" src="https://images.opencollective.com/twicsy/7af290f/logo/24.png" srcset="https://images.opencollective.com/twicsy/7af290f/logo/72.png 3x" alt="twicsy.com" title="Twicsy: Instant delivery Instagram followers." loading="lazy" style="margin-right:8px;" />Twicsy</a>
 </p>
 
 Gold sponsors are those who've pledged \$500/month or more to the MUI organization. [Tier benefits](#gold).

docs/data/material/migration/migration-v3/migration-v3.md

@@ -171,7 +171,7 @@ yarn add @material-ui/styles
   +  spacing: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]),
   ```
 
-  Going forward, you can use the theme to implement [a custom Grid spacing transformation function](https://mui.com/system/spacing/#transformation).
+  Going forward, you can use the theme to implement [a custom Grid spacing transformation function](/system/spacing/#transformation).
 
 - [Container] Moved from `@material-ui/lab` to `@material-ui/core`.
 

docs/data/system/experimental-api/css-theme-variables/css-theme-variables.md

@@ -12,7 +12,7 @@ If this is your first time encountering CSS variables, you should check out [the
 
 CSS theme variable support is a new feature in MUI System added in [`v5.0.5`](https://github.com/mui/material-ui/releases/tag/v5.0.5) as an experimental export. It tells the underlying Material UI, Joy UI or even custom UI library components to use the generated CSS theme variables instead of raw values. This provides significant improvements in developer experience related to theming and customization.
 With these variables, you can inject a theme into your app's stylesheet _at build time_ to apply the user's selected settings before the whole app is rendered.
-Learn more about the [advantages](https://mui.com/material-ui/customization/css-theme-variables/overview/#advantages) and [trade-offs](https://mui.com/material-ui/customization/css-theme-variables/overview/#trade-offs) of using CSS theme variables.
+Learn more about the [advantages](/material-ui/customization/css-theme-variables/overview/#advantages) and [trade-offs](/material-ui/customization/css-theme-variables/overview/#trade-offs) of using CSS theme variables.
 
 ### Advantages
 
@@ -40,7 +40,7 @@ The comparison described in the table above may not be applicable to large and c
 ## Usage
 
 The CSS variables API usage is exposed as a higher order function called `unstable_createCssVarsProvider` which can be called to create a theme provider and other utilities to share the theme config throughout your app. This is a very low-level function and has a lot of moving parts.
-If you're using [Material UI](https://mui.com/material-ui/customization/css-theme-variables/overview/) or [Joy UI](https://mui.com/joy-ui/customization/using-css-variables/), they expose their own `CssVarsProvider` component that you can use directly without configuring your theme.
+If you're using [Material UI](/material-ui/customization/css-theme-variables/overview/) or [Joy UI](/joy-ui/customization/using-css-variables/), they expose their own `CssVarsProvider` component that you can use directly without configuring your theme.
 
 We'll first define a minimal theme palette for light and dark modes.
 
@@ -185,8 +185,9 @@ Now, the Button's `backgroundColor`, `borderColor` and text `color` values will
 ### Demo
 
 {{"demo": "CreateCssVarsProvider.js"}}
-For framework- or language-specific setup instructions, see [CSS theme variables—Usage—Server-side rendering](https://mui.com/material-ui/customization/css-theme-variables/usage/#server-side-rendering).
-For framework or language specific setup, see [this](https://mui.com/material-ui/customization/css-theme-variables/usage/#server-side-rendering)
+
+For framework- or language-specific setup instructions, see [CSS theme variables—Usage—Server-side rendering](/material-ui/customization/css-theme-variables/usage/).
+For framework or language specific setup, see [this](/material-ui/customization/css-theme-variables/usage/)
 
 See the complete usage of `createCssVarsProvider` in [Material UI](https://github.com/mui/material-ui/blob/master/packages/mui-material/src/styles/CssVarsProvider.tsx) and [Joy UI](https://github.com/mui/material-ui/blob/master/packages/mui-joy/src/styles/CssVarsProvider.tsx).
 

docs/package.json

@@ -81,7 +81,7 @@
     "lz-string": "^1.5.0",
     "markdown-to-jsx": "^7.4.7",
     "material-ui-popup-state": "^5.1.2",
-    "next": "^14.2.7",
+    "next": "^14.2.8",
     "notistack": "3.0.1",
     "nprogress": "^0.2.0",
     "postcss": "^8.4.44",

docs/pages/base-ui/react-autocomplete/[docsTab]/index.js

@@ -23,7 +23,7 @@ export const getStaticPaths = () => {
 
 export const getStaticProps = () => {
   const useAutocompleteApiReq = require.context(
-    'docs/translations/api-docs/use-autocomplete',
+    'docs/translations/api-docs-base/use-autocomplete',
     false,
     /use-autocomplete.*.json$/,
   );

docs/pages/base-ui/react-badge/[docsTab]/index.js

@@ -31,7 +31,7 @@ export const getStaticProps = () => {
   const BadgeApiDescriptions = mapApiPageTranslations(BadgeApiReq);
 
   const useBadgeApiReq = require.context(
-    'docs/translations/api-docs/use-badge',
+    'docs/translations/api-docs-base/use-badge',
     false,
     /use-badge.*.json$/,
   );

docs/pages/base-ui/react-button/[docsTab]/index.js

@@ -31,7 +31,7 @@ export const getStaticProps = () => {
   const ButtonApiDescriptions = mapApiPageTranslations(ButtonApiReq);
 
   const useButtonApiReq = require.context(
-    'docs/translations/api-docs/use-button',
+    'docs/translations/api-docs-base/use-button',
     false,
     /use-button.*.json$/,
   );

docs/pages/base-ui/react-form-control/[docsTab]/index.js

@@ -31,7 +31,7 @@ export const getStaticProps = () => {
   const FormControlApiDescriptions = mapApiPageTranslations(FormControlApiReq);
 
   const useFormControlContextApiReq = require.context(
-    'docs/translations/api-docs/use-form-control-context',
+    'docs/translations/api-docs-base/use-form-control-context',
     false,
     /use-form-control-context.*.json$/,
   );

docs/pages/base-ui/react-input/[docsTab]/index.js

@@ -31,7 +31,7 @@ export const getStaticProps = () => {
   const InputApiDescriptions = mapApiPageTranslations(InputApiReq);
 
   const useInputApiReq = require.context(
-    'docs/translations/api-docs/use-input',
+    'docs/translations/api-docs-base/use-input',
     false,
     /use-input.*.json$/,
   );