mui · samuelsycamore · Apr 28, 2023 · Apr 19, 2023 · Apr 19, 2023 · Apr 27, 2023
diff --git a/docs/.link-check-errors.txt b/docs/.link-check-errors.txt
@@ -1,6 +1,4 @@
 Broken links found by `yarn docs:link-check` that exist:
 
-- https://mui.com/base/react-portal/components-api/#portal
 - https://mui.com/blog/material-ui-v4-is-out/#premium-themes-store-✨
-- https://mui.com/material-ui/guides/minimizing-bundle-size/#legacy-bundle
 - https://mui.com/size-snapshot
diff --git a/docs/data/joy/components/aspect-ratio/aspect-ratio.md b/docs/data/joy/components/aspect-ratio/aspect-ratio.md
@@ -14,7 +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 MUI does not plan to implement it until browser compatibility increases to at least 94%.
+A [native CSS `aspect-ratio` property](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) does exist, but MUI 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)
 :::

diff --git a/docs/data/joy/components/css-baseline/css-baseline.md b/docs/data/joy/components/css-baseline/css-baseline.md
@@ -33,7 +33,7 @@ export default function MyApp() {
 
 ## Scoping on children
 
-However, you might be progressively migrating a website to MUI, using a global reset might not be an option.
+However, you might be progressively migrating a website to Joy UI, using a global reset might not be an option.
 It's possible to apply the baseline only to the children by using the `ScopedCssBaseline` component.
 
 ```jsx

diff --git a/docs/data/material/components/box/box.md b/docs/data/material/components/box/box.md
@@ -24,7 +24,7 @@ In addition, the `sx` prop allows you to specify any other CSS rules you may nee
 
 {{"demo": "BoxSx.js", "defaultCodeOpen": true }}
 
-## Overriding MUI components
+## Overriding Material UI components
 
 The Box component wraps your component.
 It creates a new DOM element, a `<div>` that by default can be changed with the `component` prop.
@@ -38,7 +38,7 @@ For instance, you can change the margin this way.
 However, sometimes you have to target the underlying DOM element.
 As an example, you may want to change the border of the Button.
 The Button component defines its own styles. CSS inheritance doesn't help.
-To workaround the problem, you can use the [`sx`](/system/getting-started/the-sx-prop/) prop directly on the child if it is a MUI component.
+To workaround the problem, you can use the [`sx`](/system/getting-started/the-sx-prop/) prop directly on the child if it is a Material UI component.
 
 ```diff
 -<Box sx={{ border: '1px dashed grey' }}>
@@ -47,7 +47,7 @@ To workaround the problem, you can use the [`sx`](/system/getting-started/the-sx
 +<Button sx={{ border: '1px dashed grey' }}>Save</Button>
 ```
 
-For non-MUI components, use the `component` prop.
+For non-Material UI components, use the `component` prop.
 
 ```diff
 -<Box sx={{ border: '1px dashed grey' }}>

diff --git a/docs/data/material/components/css-baseline/css-baseline.md b/docs/data/material/components/css-baseline/css-baseline.md
@@ -30,7 +30,7 @@ export default function MyApp() {
 
 ## Scoping on children
 
-However, you might be progressively migrating a website to MUI, using a global reset might not be an option.
+However, you might be progressively migrating a website to Material UI, using a global reset might not be an option.
 It's possible to apply the baseline only to the children by using the `ScopedCssBaseline` component.
 
 ```jsx

diff --git a/docs/data/material/components/icons/icons.md b/docs/data/material/components/icons/icons.md
@@ -8,9 +8,9 @@ materialDesign: https://m2.material.io/design/iconography/system-icons.html
 
 # Icons
 
-<p class="description">Guidance and suggestions for using icons with MUI.</p>
+<p class="description">Guidance and suggestions for using icons with Material UI.</p>
 
-MUI provides icons support in three ways:
+Material UI provides icon support in three ways:
 
 1. Standardized [Material Icons](#material-svg-icons) exported as React components (SVG icons).
 1. With the [SvgIcon](#svgicon) component, a React wrapper for custom SVG icons.
@@ -36,7 +36,7 @@ Or **yarn**:
 yarn add @mui/icons-material
 ```
 
-These components use the MUI `SvgIcon` component to render the SVG path for each icon, and so have a peer-dependency on `@mui/material`.
+These components use the Material UI `SvgIcon` component to render the SVG path for each icon, and so have a peer-dependency on `@mui/material`.
 
 If you aren't already using Material UI in your project, you can add it following the [installation guide](/material-ui/getting-started/installation/).
 
@@ -94,7 +94,7 @@ If you need a custom SVG icon (not available in the [Material Icons](/material-u
 This component extends the native `<svg>` element:
 
 - It comes with built-in accessibility.
-- SVG elements should be scaled for a 24x24px viewport so that the resulting icon can be used as is, or included as a child for other MUI components that use icons.
+- SVG elements should be scaled for a 24x24px viewport so that the resulting icon can be used as is, or included as a child for other Material UI components that use icons.
   This can be customized with the `viewBox` attribute.
   To inherit the `viewBox` value from the original image, the `inheritViewBox` prop can be used.
 - By default, the component inherits the current color. Optionally, you can apply one of the theme colors using the `color` prop.

diff --git a/docs/data/material/components/text-fields/text-fields.md b/docs/data/material/components/text-fields/text-fields.md
@@ -306,9 +306,9 @@ In order for the text field to be accessible, **the input should be linked to th
 For more advanced use cases, you might be able to take advantage of:
 
 - [react-hook-form](https://react-hook-form.com/): React hook for form validation.
-- [react-hook-form-mui](https://github.com/dohomi/react-hook-form-mui): MUI and react-hook-form combined.
-- [formik-material-ui](https://github.com/stackworx/formik-mui): Bindings for using MUI with [formik](https://formik.org/).
-- [redux-form-material-ui](https://github.com/erikras/redux-form-material-ui): Bindings for using MUI with [Redux Form](https://redux-form.com/).
-- [mui-rff](https://github.com/lookfirst/mui-rff): Bindings for using MUI with [React Final Form](https://final-form.org/react).
+- [react-hook-form-mui](https://github.com/dohomi/react-hook-form-mui): Material UI and react-hook-form combined.
+- [formik-material-ui](https://github.com/stackworx/formik-mui): Bindings for using Material UI with [formik](https://formik.org/).
+- [redux-form-material-ui](https://github.com/erikras/redux-form-material-ui): Bindings for using Material UI with [Redux Form](https://redux-form.com/).
+- [mui-rff](https://github.com/lookfirst/mui-rff): Bindings for using Material UI with [React Final Form](https://final-form.org/react).
 - [@ui-schema/ds-material](https://www.npmjs.com/package/@ui-schema/ds-material) Bindings for using Material UI with [UI Schema](https://github.com/ui-schema/ui-schema). JSON Schema compatible.
 - [@data-driven-forms/mui-component-mapper](https://www.data-driven-forms.org/provided-mappers/mui-component-mapper): Bindings for using Material UI with [Data Driven Forms](https://github.com/data-driven-forms/react-forms).
diff --git a/docs/data/material/components/tooltips/tooltips.md b/docs/data/material/components/tooltips/tooltips.md
@@ -129,7 +129,7 @@ In order to work with Safari, you need at least one display block or flex item b
 {{"demo": "DisabledTooltips.js"}}
 
 :::warning
-If you're not wrapping a MUI component that inherits from `ButtonBase`, for instance, a native `<button>` element, you should also add the CSS property _pointer-events: none;_ to your element when disabled:
+If you're not wrapping a Material UI component that inherits from `ButtonBase`, for instance, a native `<button>` element, you should also add the CSS property _pointer-events: none;_ to your element when disabled:
 :::
 
 ```jsx

diff --git a/docs/data/material/components/transitions/transitions.md b/docs/data/material/components/transitions/transitions.md
@@ -9,7 +9,7 @@ githubLabel: 'component: transitions'
 
 <p class="description">Transitions help to make a UI expressive and easy to use.</p>
 
-MUI provides transitions that can be used to introduce some basic [motion](https://m2.material.io/design/motion/) to your applications.
+Material UI provides transitions that can be used to introduce some basic [motion](https://m2.material.io/design/motion/) to your applications.
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
@@ -66,7 +66,7 @@ This example also demonstrates how to delay the enter transition.
 
 ## Child requirement
 
-- **Forward the style**: To better support server rendering, MUI provides a `style` prop to the children of some transition components (Fade, Grow, Zoom, Slide).
+- **Forward the style**: To better support server rendering, Material UI provides a `style` prop to the children of some transition components (Fade, Grow, Zoom, Slide).
   The `style` prop must be applied to the DOM for the animation to work as expected.
 - **Forward the ref**: The transition components require the first child element to forward its ref to the DOM node. For more details about ref, check out [Caveat with refs](/material-ui/guides/composition/#caveat-with-refs)
 - **Single element**: The transition components require only one child element (`React.Fragment` is not allowed).
@@ -101,7 +101,7 @@ As components are added or removed, the `in` prop is toggled automatically by `T
 
 ## TransitionComponent prop
 
-Some MUI components use these transitions internally. These accept a `TransitionComponent` prop to customize the default transition.
+Some Material UI components use these transitions internally. These accept a `TransitionComponent` prop to customize the default transition.
 You can use any of the above components or your own.
 It should respect the following conditions:
 

diff --git a/docs/data/material/components/typography/typography.md b/docs/data/material/components/typography/typography.md
@@ -17,7 +17,7 @@ A [typographic scale](https://m2.material.io/design/typography/#type-scale) has
 
 ## General
 
-The _Roboto_ font will **not** be automatically loaded by MUI.
+The _Roboto_ font will **not** be automatically loaded by Material UI.
 You are responsible for loading any fonts used in your application.
 Roboto Font has a few easy ways to get started. For more advanced configuration, check out
 [the theme customization section](/material-ui/customization/typography/).
@@ -57,7 +57,7 @@ import '@fontsource/roboto/700.css';
 For more info check out [Fontsource](https://github.com/fontsource/fontsource).
 
 Fontsource can be configured to load specific subsets, weights and styles.
-MUI default typography configuration only relies on 300, 400, 500, and 700 font weights.
+Material UI default typography configuration only relies on 300, 400, 500, and 700 font weights.
 
 ## Component
 

diff --git a/docs/data/material/components/use-media-query/use-media-query.md b/docs/data/material/components/use-media-query/use-media-query.md
@@ -26,9 +26,9 @@ The media query string can be any valid CSS media query, e.g. [`'(prefers-color-
 
 ⚠️ You can't use `'print'` per browsers limitation, e.g. [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=774398).
 
-## Using MUI's breakpoint helpers
+## Using Material UI's breakpoint helpers
 
-You can use MUI's [breakpoint helpers](/material-ui/customization/breakpoints/) as follows:
+You can use Material UI's [breakpoint helpers](/material-ui/customization/breakpoints/) as follows:
 
 ```jsx
 import { useTheme } from '@mui/material/styles';

diff --git a/docs/data/material/customization/breakpoints/breakpoints.md b/docs/data/material/customization/breakpoints/breakpoints.md
@@ -3,7 +3,7 @@
 <p class="description">API that enables the use of breakpoints in a wide variety of contexts.</p>
 
 For optimal user experience, Material Design interfaces need to be able to adapt their layout at various breakpoints.
-MUI uses a **simplified** implementation of the original [specification](https://m2.material.io/design/layout/responsive-layout-grid.html#breakpoints).
+Material UI uses a **simplified** implementation of the original [specification](https://m2.material.io/design/layout/responsive-layout-grid.html#breakpoints).
 
 The breakpoints are used internally in various components to make them responsive,
 but you can also take advantage of them

diff --git a/docs/data/material/customization/color/color.md b/docs/data/material/customization/color/color.md
@@ -71,7 +71,7 @@ If you are using the default primary and / or secondary shades then by providing
 
 ### Tools by the community
 
-- [mui-theme-creator](https://zenoo.github.io/mui-theme-creator/): A tool to help design and customize themes for the MUI component library. Includes basic site templates to show various components and how they are affected by the theme
+- [mui-theme-creator](https://zenoo.github.io/mui-theme-creator/): A tool to help design and customize themes for the Material UI component library. Includes basic site templates to show various components and how they are affected by the theme
 - [Material palette generator](https://m2.material.io/inline-tools/color/): The Material palette generator can be used to generate a palette for any color you input.
 
 ## 2014 Material Design color palettes
@@ -80,7 +80,7 @@ These color palettes, originally created by Material Design in 2014, are compris
 
 ### Important Terms
 
-- **Palette**: A palette is a collection of colors, i.e. hues and their shades. MUI provides all colors from the Material Design guidelines.
+- **Palette**: A palette is a collection of colors, i.e. hues and their shades. Material UI provides all colors from the Material Design guidelines.
   [This color palette](#color-palette) has been designed with colors that work harmoniously with each other.
 - **Hue & Shade**: A single color within the palette is made up of a hue such as "red", and shade, such as "500".
   "red 50" is the lightest shade of red (_pink!_), while "red 900" is the darkest.

diff --git a/docs/data/material/customization/density/density.md b/docs/data/material/customization/density/density.md
@@ -1,6 +1,6 @@
 # Density
 
-<p class="description">How to apply density to MUI components.</p>
+<p class="description">How to apply density to Material UI components.</p>
 
 ## Applying density
 
@@ -35,7 +35,7 @@ The following components have props applying higher density:
 ## Explore theme density
 
 This tool allows you to apply density via spacing and component props. You can browse
-around and see how this applies to the overall feel of MUI components.
+around and see how this applies to the overall feel of Material UI components.
 
 If you enable high density a custom theme is applied to the docs. This theme is only
 for demonstration purposes. You _should not_ apply this theme to your whole application

diff --git a/docs/data/material/customization/spacing/spacing.md b/docs/data/material/customization/spacing/spacing.md
@@ -2,7 +2,7 @@
 
 <p class="description">Use the theme.spacing() helper to create consistent spacing between the elements of your UI.</p>
 
-MUI uses [a recommended 8px scaling factor](https://m2.material.io/design/layout/understanding-layout.html) by default.
+Material UI uses [a recommended 8px scaling factor](https://m2.material.io/design/layout/understanding-layout.html) by default.
 
 ```js
 const theme = createTheme();

diff --git a/docs/data/material/customization/theming/theming.md b/docs/data/material/customization/theming/theming.md
@@ -1,6 +1,6 @@
 # Theming
 
-<p class="description">Customize MUI with your theme. You can change the colors, the typography and much more.</p>
+<p class="description">Customize Material UI with your theme. You can change the colors, the typography and much more.</p>
 
 The theme specifies the color of the components, darkness of the surfaces, level of shadow, appropriate opacity of ink elements, etc.
 
@@ -11,14 +11,14 @@ To promote greater consistency between apps, light and dark theme types are avai
 ## Theme provider
 
 If you wish to customize the theme, you need to use the `ThemeProvider` component in order to inject a theme into your application.
-However, this is optional; MUI components come with a default theme.
+However, this is optional; Material UI components come with a default theme.
 
 `ThemeProvider` relies on the [context feature of React](https://react.dev/learn/passing-data-deeply-with-context) to pass the theme down to the components, so you need to make sure that `ThemeProvider` is a parent of the components you are trying to customize.
 You can learn more about this in [the API section](#themeprovider).
 
 ## Theme configuration variables
 
-Changing the theme configuration variables is the most effective way to match MUI to your needs.
+Changing the theme configuration variables is the most effective way to match Material UI to your needs.
 The following sections cover the most important theme variables:
 
 - [`.palette`](/material-ui/customization/palette/)
@@ -33,7 +33,7 @@ You can check out the [default theme section](/material-ui/customization/default
 
 ### Custom variables
 
-When using MUI's theme with [MUI System](/system/getting-started/overview/) or [any other styling solution](/material-ui/guides/interoperability/), it can be convenient to add additional variables to the theme so you can use them everywhere.
+When using Material UI's theme with [MUI System](/system/getting-started/overview/) or [any other styling solution](/material-ui/guides/interoperability/), it can be convenient to add additional variables to the theme so you can use them everywhere.
 For instance:
 
 ```jsx
@@ -80,7 +80,7 @@ declare module '@mui/material/styles' {
 
 The community has built great tools to build a theme:
 
-- [mui-theme-creator](https://zenoo.github.io/mui-theme-creator/): A tool to help design and customize themes for the MUI component library. Includes basic site templates to show various components and how they are affected by the theme
+- [mui-theme-creator](https://zenoo.github.io/mui-theme-creator/): A tool to help design and customize themes for the Material UI component library. Includes basic site templates to show various components and how they are affected by the theme
 - [Material palette generator](https://m2.material.io/inline-tools/color/): The Material palette generator can be used to generate a palette for any color you input.
 
 ## Accessing the theme in a component

diff --git a/docs/data/material/customization/transitions/transitions.md b/docs/data/material/customization/transitions/transitions.md
@@ -1,6 +1,6 @@
 # Transitions
 
-<p class="description">The theme key enables you to customize the durations and easings of the various transitions used across MUI components, and offers a utility for creating custom transitions.</p>
+<p class="description">The theme key enables you to customize the durations and easings of the various transitions used across Material UI components, and offers a utility for creating custom transitions.</p>
 
 ## API
 
@@ -87,4 +87,4 @@ const theme = createTheme({
 
 ## References
 
-Check out the [Transitions](/material-ui/transitions/) page to explore the transition components that are included with MUI.
+Check out the [Transitions](/material-ui/transitions/) page to explore the transition components that are included with Material UI.
diff --git a/docs/data/material/customization/typography/typography.md b/docs/data/material/customization/typography/typography.md
@@ -84,13 +84,13 @@ Note that if you want to add additional `@font-face` declarations, you need to u
 
 ## Font size
 
-MUI uses `rem` units for the font size.
+Material UI uses `rem` units for the font size.
 The browser `<html>` element default font size is `16px`, but browsers have an option to change this value,
 so `rem` units allow us to accommodate the user's settings, resulting in a better accessibility support.
 Users change font size settings for all kinds of reasons, from poor eyesight to choosing optimum settings
 for devices that can be vastly different in size and viewing distance.
 
-To change the font-size of MUI you can provide a `fontSize` property.
+To change the font-size of Material UI you can provide a `fontSize` property.
 The default value is `14px`.
 
 ```js
@@ -163,13 +163,13 @@ Changing the font size can harm accessibility ♿️. Most browsers agree on the
 :::
 
 The `theme.typography.htmlFontSize` property is provided for this use case,
-which tells MUI what the font-size on the `<html>` element is.
+which tells Material UI what the font-size on the `<html>` element is.
 This is used to adjust the `rem` value so the calculated font-size always match the specification.
 
 ```js
 const theme = createTheme({
   typography: {
-    // Tell MUI what's the font-size on the html element is.
+    // Tell Material UI what the font-size on the html element is.
     htmlFontSize: 10,
   },
 });

diff --git a/docs/data/material/customization/z-index/z-index.md b/docs/data/material/customization/z-index/z-index.md
@@ -2,7 +2,7 @@
 
 <p class="description">z-index is the CSS property that helps control layout by providing a third axis to arrange content.</p>
 
-Several MUI components utilize `z-index`, employing a default z-index scale in MUI
+Several Material UI components utilize `z-index`, employing a default z-index scale
 that has been designed to properly layer drawers, modals, snackbars, tooltips, and more.
 
 The `z-index` values start at an arbitrary number, high and specific enough to ideally avoid conflicts: