[docs][joy] Update class name prefixes in the Anatomy section (#36210)

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

@@ -94,7 +94,7 @@ Here are some factors to consider to ensure that your Alert is accessible:
 The Alert component is composed of a single root `<div>` element with its `role` set to `alert`:
 
 ```html
-<div role="alert" class="JoyAlert-root">
+<div role="alert" class="MuiAlert-root">
   <!-- Alert contents -->
 </div>
 ```

docs/data/joy/components/aspect-ratio/aspect-ratio.md

@@ -122,8 +122,8 @@ This is a simple illustration of how to use Aspect Ratio with list components:
 The Aspect Ratio component is composed of a root `<div>` with a content `<div>` nested inside; the child component is given a `data-first-child` attribute for styling purposes:
 
 ```html
-<div class="JoyAspectRatio-root">
-  <div class="JoyAspectRatio-content">
+<div class="MuiAspectRatio-root">
+  <div class="MuiAspectRatio-content">
     <some-element data-first-child>
       <!-- Aspect Ratio contents -->
     </some-element>

docs/data/joy/components/avatar/avatar.md

@@ -142,7 +142,7 @@ You can use these to customize the component with both the `sx` prop and the the
 The Avatar component is composed of a root `<div>` that may wrap around an `<svg>`, an `<img>`, or a string:
 
 ```html
-<div class="JoyAvatar-root">
+<div class="MuiAvatar-root">
   <!-- Avatar contents -->
 </div>
 ```

docs/data/joy/components/badge/badge.md

@@ -123,9 +123,9 @@ To make your Badge accessible, you must provide a full description with `aria-la
 The Badge component is composed of a root `<span>` that houses the element that the Badge is attached to, followed by a `<span>` to represent the Badge itself:
 
 ```html
-<span class="JoyBadge-root">
+<span class="MuiBadge-root">
   <!-- the element the Badge is attached to -->
-  <span class="JoyBadge-badge">
+  <span class="MuiBadge-badge">
     <!-- Badge content -->
   </span>
 </span>

docs/data/joy/components/breadcrumbs/breadcrumbs.md

@@ -114,7 +114,7 @@ The Breadcrumbs component is composed of a root `<nav>` that wraps around an `<o
       <!-- Link or Typography -->
     </li>
     <li aria-hidden="true" class="MuiBreadcrumbs-separator">/</li>
-    <li class="MuiBreadcrumbs-li css-1rqbcrs-JoyBreadcrumbs-ol">
+    <li class="MuiBreadcrumbs-li css-1rqbcrs-MuiBreadcrumbs-ol">
       <!-- Link or Typography -->
     </li>
   </ol>

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

@@ -148,7 +148,7 @@ For example, an Icon Button that displays a `<FavoriteBorder />` icon might have
 The Button component is composed of a single root `<button>` element that wraps around its contents:
 
 ```html
-<button class="JoyButton-root" type="button">
+<button class="MuiButton-root" type="button">
   <!-- Button contents -->
 </button>
 ```

docs/data/joy/components/card/card.md

@@ -145,14 +145,14 @@ Try resizing it by clicking and dragging the bottom-right corner to see how it b
 The Card component and all of its supplementary components are composed of a single root `<div>`:
 
 ```html
-<div class="JoyCard-root">
-  <div class="JoyCardCover-root">
+<div class="MuiCard-root">
+  <div class="MuiCardCover-root">
     <!-- optional Card Cover layer -->
   </div>
-  <div class="JoyCardContent-root">
+  <div class="MuiCardContent-root">
     <!-- optional Card Content layer -->
   </div>
-  <div class="JoyCardOverflow-root">
+  <div class="MuiCardOverflow-root">
     <!-- optional Card Overflow utility -->
   </div>
 </div>

docs/data/joy/components/checkbox/checkbox.md

@@ -191,13 +191,13 @@ The Checkbox component is composed of a root `<span>` that wraps the input and `
 Note that the actual `<input type="checkbox">` is doubly nested within `<span>` elements that represent the `checkbox` and `action` slots, respectively.
 
 ```html
-<span class="JoyCheckbox-root">
-  <span class="JoyCheckbox-checkbox">
-    <span class="JoyCheckbox-action">
-      <input type="checkbox" class="JoyCheckbox-input" value />
+<span class="MuiCheckbox-root">
+  <span class="MuiCheckbox-checkbox">
+    <span class="MuiCheckbox-action">
+      <input type="checkbox" class="MuiCheckbox-input" value />
     </span>
   </span>
-  <label class="JoyCheckbox-label">
+  <label class="MuiCheckbox-label">
     <!-- label text -->
   </label>
 </span>

docs/data/joy/components/grid/grid.md

@@ -151,7 +151,7 @@ Then use `justifyContent` and/or `alignItems` to adjust the position of the cont
 The Grid component is composed of a single root `<div>` element:
 
 ```html
-<div class="JoyGrid-root">
+<div class="MuiGrid-root">
   <!-- Grid contents -->
 </div>
 ```

docs/data/joy/components/input/input.md

@@ -129,7 +129,7 @@ Alternatively, you can do this manually by targeting the input slot—see [inner
 The Input component is composed of a root `<div>` with an `<input>` nested inside:
 
 ```html
-<div class="JoyInput-root">
-  <input class="JoyInput-input" />
+<div class="MuiInput-root">
+  <input class="MuiInput-input" />
 </div>
 ```

docs/data/joy/components/stack/stack.md

@@ -111,7 +111,7 @@ In order for the item to stay within the container you need to set `min-width: 0
 The Stack component is composed of a single root `<div>` element:
 
 ```html
-<div class="JoyStack-root">
+<div class="MuiStack-root">
   <!-- Stack contents -->
 </div>
 ```

docs/data/joy/components/typography/typography.md

@@ -223,9 +223,9 @@ The Typography component is composed of a single root `<p>` that's assigned the
 When one Typography component is nested within another, the nested component renders as a `<span>` (unless customized as described above).
 
 ```html
-<p class="JoyTypography-root JoyTypography-body1">
+<p class="MuiTypography-root MuiTypography-body1">
   <!-- Typography content -->
-  <span class="JoyTypography-root JoyTypography-inherit">
+  <span class="MuiTypography-root MuiTypography-inherit">
     <!-- Nested Typography content -->
   </span>
 </p>