[docs] Fix live edit not working

docs/data/base/components/select/UnstyledSelectIntroduction.js

@@ -74,37 +74,7 @@ const Button = React.forwardRef(function Button(props, ref) {
 
 Button.propTypes = {
   children: PropTypes.node,
-  ownerState: PropTypes.shape({
-    active: PropTypes.bool.isRequired,
-    autoFocus: PropTypes.bool,
-    children: PropTypes.node,
-    className: PropTypes.string,
-    defaultListboxOpen: PropTypes.bool,
-    defaultValue: PropTypes.any,
-    disabled: PropTypes.bool.isRequired,
-    focusVisible: PropTypes.bool.isRequired,
-    getOptionAsString: PropTypes.func,
-    getSerializedValue: PropTypes.func,
-    listboxId: PropTypes.string,
-    listboxOpen: PropTypes.bool,
-    multiple: PropTypes.bool,
-    name: PropTypes.string,
-    onChange: PropTypes.func,
-    onListboxOpenChange: PropTypes.func,
-    open: PropTypes.bool.isRequired,
-    renderValue: PropTypes.func,
-    slotProps: PropTypes.shape({
-      listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-      popper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-      root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    }),
-    slots: PropTypes.shape({
-      listbox: PropTypes.elementType,
-      popper: PropTypes.func,
-      root: PropTypes.elementType,
-    }),
-    value: PropTypes.any,
-  }).isRequired,
+  ownerState: PropTypes.object.isRequired,
 };
 
 const StyledButton = styled(Button, { shouldForwardProp: () => true })(
@@ -161,7 +131,9 @@ const StyledListbox = styled('ul')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
+  box-shadow: 0px 2px 6px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
+  };
   `,
 );
 

docs/data/base/components/select/select.md

@@ -62,7 +62,7 @@ The following demo shows how to create and style a Select component.
 The value(s) chosen in the Select can be posted to a server using a standard HTML form.
 When the `name` prop is set, the Select will render a hidden input with the selected value.
 
-{{"demo": "UnstyledSelectForm.js" }}
+{{"demo": "UnstyledSelectForm.js"}}
 
 Note how the second Select in the demo above renders a hidden input with the name provided as a prop.
 

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

@@ -30,7 +30,7 @@ import Card from '@mui/joy/Card';
 Card is a surface-level container for grouping related components.
 The demo below shows a typical Card that groups together Typography, Aspect Ratio, and Button components, among others:
 
-{{"demo": "BasicCard.js" }}
+{{"demo": "BasicCard.js"}}
 
 ## Customization
 
@@ -43,7 +43,7 @@ import CardOverflow from '@mui/joy/CardOverflow';
 By default, the Card component adds padding around the outer edges of its contents.
 To eliminate this white space, add the Card Overflow component inside the Card as a wrapper around the content to be expanded.
 
-{{"demo": "OverflowCard.js" }}
+{{"demo": "OverflowCard.js"}}
 
 ### Card layers
 
@@ -58,29 +58,29 @@ Use the Card Cover and Card Content components to expose multiple layers between
 Card Cover makes it possible to add images, videos, and color and gradient overlays underneath the Card Content.
 Hover your mouse on the demo below to see how the layers are stacked:
 
-{{"demo": "CardLayers3d.js" }}
+{{"demo": "CardLayers3d.js"}}
 
 #### Images and videos
 
 Use an image or a video element inside the Card Cover to display media.
 The component uses [`object-fit: cover`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) to fill the whole Card by default.
 
-{{"demo": "MediaCover.js" }}
+{{"demo": "MediaCover.js"}}
 
 #### Gradient overlay
 
 To create a gradient overlay—frequently seen when a bright image is used as a background—insert an additional Card Cover component between the image layer and the content layer.
 You can add any number of Card Covers to create more sophisticated stacked layers this way.
 
-{{"demo": "GradientCover.js" }}
+{{"demo": "GradientCover.js"}}
 
 ### Horizontal alignment
 
 Card contents are arranged in a column by default.
 For horizontal alignment, add the `orientation="horizontal"` prop to the Card.
 If present, the [Card Overflow](#expand-to-fill) component will adapt accordingly.
 
-{{"demo": "RowCard.js" }}
+{{"demo": "RowCard.js"}}
 
 ### Actions
 
@@ -95,14 +95,14 @@ Cards often include buttons at the bottom section. Use `CardActions` component a
 
 The demo below also use `buttonFlex` prop to set the ideal width of the buttons to `120px` while allowing them to shrink if necessary. To learn more about CSS flex, visit [MDN's guide](https://developer.mozilla.org/en-US/docs/Web/CSS/flex).
 
-{{"demo": "BottomActionsCard.js" }}
+{{"demo": "BottomActionsCard.js"}}
 
 #### Discrete actions
 
 By default, action elements like links and buttons sit above the surface-level interactive area of the Card.
 In some cases, you might have to adjust the z-index to bring these elements to the front—for instance, the Favorite Icon Button in the demo below needs a higher z-index in order to sit on top of its Aspect Ratio sibling:
 
-{{"demo": "MultipleInteractionCard.js" }}
+{{"demo": "MultipleInteractionCard.js"}}
 
 :::success
 You can use the CSS pseudo-class [`:focus-within`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within) to apply styles to the Card when any of its children receive focus.
@@ -118,7 +118,7 @@ This approach helps to ensure proper keyboard navigation support by applying `fo
 Learn more about this and other best practices for accessible cards in the [Inclusive Components blog](https://inclusive-components.design/cards/).
 :::
 
-{{"demo": "InteractiveCard.js" }}
+{{"demo": "InteractiveCard.js"}}
 
 ## CSS variable playground
 
@@ -136,60 +136,60 @@ This is because the variables are also used to calculate a proper radius for the
 
 ### Bio card
 
-{{"demo": "BioCard.js" }}
+{{"demo": "BioCard.js"}}
 
 ### Credit card form
 
-{{"demo": "CreditCardForm.js" }}
+{{"demo": "CreditCardForm.js"}}
 
 ### Congratulations card
 
-{{"demo": "CongratCard.js" }}
+{{"demo": "CongratCard.js"}}
 
 ### FAQ card
 
-{{"demo": "FAQCard.js" }}
+{{"demo": "FAQCard.js"}}
 
 ### License card
 
-{{"demo": "LicenseCard.js" }}
+{{"demo": "LicenseCard.js"}}
 
 ### Pricing card
 
-{{"demo": "PricingCards.js" }}
+{{"demo": "PricingCards.js"}}
 
 ### Product card
 
 This example demonstrates the automatic adjustment when a button is placed as a only child of a [CardOverflow](#expand-to-fill) component. The button will be stretched to fill the entire area of the CardOverflow and the bottom corner radius is also adjusted.
 
-{{"demo": "ProductCard.js" }}
+{{"demo": "ProductCard.js"}}
 
 ### User card
 
 Combining CSS min-width with clamp, a [horizontal card](#horizontal-alignment) can be stacked when it reaches a certain width or below.
 
 The example below shows a user card that stacks when the card's width is equal or below 500px. The drag handle is at the bottom right corner of the card.
 
-{{"demo": "UserCard.js" }}
+{{"demo": "UserCard.js"}}
 
 :::info
 Alternatively, you can use [CSS Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries) to achieve the similar result. You should check the [browser support](https://caniuse.com/css-container-queries) before using CSS Container Queries.
 :::
 
 ### Instagram post
 
-{{"demo": "InstagramPost.js" }}
+{{"demo": "InstagramPost.js"}}
 
 ### Dribbble shot
 
-{{"demo": "DribbbleShot.js" }}
+{{"demo": "DribbbleShot.js"}}
 
 ### Resizable container
 
 This demo uses a technique similar to Heydon Pickering's [Flexbox Holy Albatross](https://heydonworks.com/article/the-flexbox-holy-albatross/) to create a stretchable Card that switches between vertical and horizontal alignment when its width passes a specified threshold—without using media queries to define breakpoints.
 Try resizing it by clicking and dragging the bottom-right corner to see how it behaves.
 
-{{"demo": "ContainerResponsive.js" }}
+{{"demo": "ContainerResponsive.js"}}
 
 ## Anatomy
 

docs/data/joy/customization/approaches/approaches.md

@@ -13,7 +13,7 @@ The `sx` prop provides a superset of CSS (contains all CSS properties/selectors,
 Every Joy UI component supports it and it's a tool that allows you to quickly customize components on the spot.
 Visit [the `sx` prop documentation](/system/getting-started/the-sx-prop/) to learn more about it.
 
-{{"demo": "SxProp.js" }}
+{{"demo": "SxProp.js"}}
 
 ## Theming
 

docs/data/material/components/popover/popover.md

@@ -18,7 +18,7 @@ Things to know when using the `Popover` component:
 
 ## Basic Popover
 
-{{"demo": "BasicPopover.js" }}
+{{"demo": "BasicPopover.js"}}
 
 ## Anchor playground
 

docs/data/material/customization/how-to-customize/how-to-customize.md

@@ -23,7 +23,7 @@ To change the styles of _one single instance_ of a component, you can use one of
 The [`sx` prop](/system/getting-started/the-sx-prop/) is the best option for adding style overrides to a single instance of a component in most cases.
 It can be used with all Material UI components.
 
-{{"demo": "SxProp.js" }}
+{{"demo": "SxProp.js"}}
 
 ### Overriding nested component styles
 

docs/data/material/customization/palette/ContrastThreshold.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 import { Stack } from '@mui/system';
@@ -29,6 +30,10 @@ function ContrastShowcase({ title }) {
   );
 }
 
+ContrastShowcase.propTypes = {
+  title: PropTypes.string.isRequired,
+};
+
 export default function ContrastThreshold() {
   return (
     <Stack direction="row" gap={4}>

docs/data/material/customization/palette/ContrastThreshold.tsx

@@ -11,7 +11,8 @@ const highContrastThresholdTheme = createTheme({
   },
 });
 
-function ContrastShowcase({ title }: { title: string }) {
+function ContrastShowcase(props: { title: string }) {
+  const { title } = props;
   const theme = useTheme();
 
   return (

docs/data/material/customization/palette/ContrastThreshold.tsx.preview

@@ -0,0 +1,6 @@
+<ThemeProvider theme={defaultContrastThresholdTheme}>
+  <ContrastShowcase title="Default contrast threshold" />
+</ThemeProvider>
+<ThemeProvider theme={highContrastThresholdTheme}>
+  <ContrastShowcase title="Higher contrast threshold" />
+</ThemeProvider>

docs/data/material/customization/palette/ManuallyProvideCustomColor.js

@@ -4,6 +4,10 @@ import Button from '@mui/material/Button';
 import { Box, Stack } from '@mui/system';
 import { Typography } from '@mui/material';
 
+// Augment the palette to include an ochre color
+
+// Update the Button's color options to include an ochre option
+
 const theme = createTheme({
   palette: {
     ochre: {

docs/data/material/customization/palette/ManuallyProvidePaletteColor.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 import { Box, Stack } from '@mui/system';
@@ -46,6 +47,10 @@ function ColorShowcase({ color }) {
   );
 }
 
+ColorShowcase.propTypes = {
+  color: PropTypes.oneOf(['primary', 'secondary']).isRequired,
+};
+
 export default function ManuallyProvidePaletteColor() {
   return (
     <ThemeProvider theme={theme}>

docs/data/material/customization/palette/ManuallyProvidePaletteColor.tsx.preview

@@ -1,18 +1,6 @@
-import { createTheme } from '@mui/material/styles';
-
-const theme = createTheme({
-  palette: {
-    primary: {
-      main: '#FF5733',
-      // light: will be calculated from palette.primary.main,
-      // dark: will be calculated from palette.primary.main,
-      // contrastText: will be calculated to contrast with palette.primary.main
-    },
-    secondary: {
-      main: '#E0C2FF',
-      light: '#F5EBFF',
-      // dark: will be calculated from palette.secondary.main,
-      contrastText: '#47008F',
-    },
-  },
-});
+<ThemeProvider theme={theme}>
+  <Stack direction="row" gap={8}>
+    <ColorShowcase color="primary" />
+    <ColorShowcase color="secondary" />
+  </Stack>
+</ThemeProvider>

docs/data/material/customization/palette/TonalOffset.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
 import { blue } from '@mui/material/colors';
 import { Box, Stack } from '@mui/system';
@@ -69,6 +70,11 @@ function ColorShowcase({ title, color }) {
   );
 }
 
+ColorShowcase.propTypes = {
+  color: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+};
+
 export default function TonalOffset() {
   return (
     <Stack direction="row" gap={8}>

docs/data/material/customization/palette/TonalOffset.tsx.preview

@@ -0,0 +1,9 @@
+<ThemeProvider theme={defaultTonalOffsetTheme}>
+  <ColorShowcase title="Default tonal offset" color="primary" />
+</ThemeProvider>
+<ThemeProvider theme={higherTonalOffsetTheme}>
+  <ColorShowcase title="Higher tonal offset" color="primary" />
+</ThemeProvider>
+<ThemeProvider theme={asymmetricTonalOffsetTheme}>
+  <ColorShowcase title="Asymmetric tonal offset" color="primary" />
+</ThemeProvider>

docs/data/material/customization/palette/UsingAugmentColor.js

@@ -4,11 +4,14 @@ import Button from '@mui/material/Button';
 import { Box, Stack } from '@mui/system';
 import { Typography } from '@mui/material';
 
+// Augment the palette to include a salmon color
+
+// Update the Button's color options to include a salmon option
+
 let theme = createTheme({
   // Theme customization goes here as usual, including tonalOffset and/or
   // contrastThreshold as the augmentColor() function relies on these
 });
-
 theme = createTheme(theme, {
   // Custom colors created with augmentColor go here
   palette: {