init project

docs/data/joy/components/accordion/AccordionBasic.js

@@ -0,0 +1,32 @@
+import AccordionGroup from '@mui/joy/AccordionGroup';
+import Accordion from '@mui/joy/Accordion';
+import AccordionDetails from '@mui/joy/AccordionDetails';
+import AccordionSummary from '@mui/joy/AccordionSummary';
+
+export default function AccordionBasic() {
+  return (
+    <AccordionGroup sx={{ maxWidth: 400 }}>
+      <Accordion>
+        <AccordionSummary>First accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary>Second accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary>Third accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+    </AccordionGroup>
+  );
+}

docs/data/joy/components/accordion/AccordionBasic.tsx

@@ -0,0 +1,32 @@
+import AccordionGroup from '@mui/joy/AccordionGroup';
+import Accordion from '@mui/joy/Accordion';
+import AccordionDetails from '@mui/joy/AccordionDetails';
+import AccordionSummary from '@mui/joy/AccordionSummary';
+
+export default function AccordionBasic() {
+  return (
+    <AccordionGroup sx={{ maxWidth: 400 }}>
+      <Accordion>
+        <AccordionSummary>First accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary>Second accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary>Third accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+    </AccordionGroup>
+  );
+}

docs/data/joy/components/accordion/AccordionControlled.js

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import AccordionGroup from '@mui/joy/AccordionGroup';
+import Accordion from '@mui/joy/Accordion';
+import AccordionDetails from '@mui/joy/AccordionDetails';
+import AccordionSummary from '@mui/joy/AccordionSummary';
+
+export default function AccordionControlled() {
+  const [index, setIndex] = React.useState(0);
+  return (
+    <AccordionGroup sx={{ maxWidth: 400 }}>
+      <Accordion
+        expanded={index === 0}
+        onChange={(event, expanded) => {
+          setIndex(expanded ? 0 : null);
+        }}
+      >
+        <AccordionSummary>First accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion
+        expanded={index === 1}
+        onChange={(event, expanded) => {
+          setIndex(expanded ? 1 : null);
+        }}
+      >
+        <AccordionSummary>Second accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion
+        expanded={index === 2}
+        onChange={(event, expanded) => {
+          setIndex(expanded ? 2 : null);
+        }}
+      >
+        <AccordionSummary>Third accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+    </AccordionGroup>
+  );
+}

docs/data/joy/components/accordion/AccordionControlled.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import AccordionGroup from '@mui/joy/AccordionGroup';
+import Accordion from '@mui/joy/Accordion';
+import AccordionDetails from '@mui/joy/AccordionDetails';
+import AccordionSummary from '@mui/joy/AccordionSummary';
+
+export default function AccordionControlled() {
+  const [index, setIndex] = React.useState<number | null>(0);
+  return (
+    <AccordionGroup sx={{ maxWidth: 400 }}>
+      <Accordion
+        expanded={index === 0}
+        onChange={(event, expanded) => {
+          setIndex(expanded ? 0 : null);
+        }}
+      >
+        <AccordionSummary>First accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion
+        expanded={index === 1}
+        onChange={(event, expanded) => {
+          setIndex(expanded ? 1 : null);
+        }}
+      >
+        <AccordionSummary>Second accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion
+        expanded={index === 2}
+        onChange={(event, expanded) => {
+          setIndex(expanded ? 2 : null);
+        }}
+      >
+        <AccordionSummary>Third accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+    </AccordionGroup>
+  );
+}

docs/data/joy/components/accordion/AccordionDepthPanel.js

@@ -0,0 +1,52 @@
+import AccordionGroup from '@mui/joy/AccordionGroup';
+import Accordion from '@mui/joy/Accordion';
+import AccordionDetails, {
+  accordionDetailsClasses,
+} from '@mui/joy/AccordionDetails';
+import AccordionSummary, {
+  accordionSummaryClasses,
+} from '@mui/joy/AccordionSummary';
+
+export default function AccordionDepthPanel() {
+  return (
+    <AccordionGroup
+      variant="outlined"
+      transition="0.2s"
+      sx={(theme) => ({
+        maxWidth: 400,
+        borderRadius: 'lg',
+        [`& .${accordionSummaryClasses.button}:hover`]: {
+          bgcolor: 'transparent',
+        },
+        [`& .${accordionDetailsClasses.content}`]: {
+          boxShadow: `inset 0 1px ${theme.vars.palette.divider}`,
+          [`&.${accordionDetailsClasses.expanded}`]: {
+            paddingBlock: '0.75rem',
+          },
+        },
+      })}
+    >
+      <Accordion defaultExpanded>
+        <AccordionSummary>First accordion</AccordionSummary>
+        <AccordionDetails variant="soft">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary>Second accordion</AccordionSummary>
+        <AccordionDetails variant="soft">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary>Third accordion</AccordionSummary>
+        <AccordionDetails variant="soft">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+    </AccordionGroup>
+  );
+}

docs/data/joy/components/accordion/AccordionDepthPanel.tsx

@@ -0,0 +1,52 @@
+import AccordionGroup from '@mui/joy/AccordionGroup';
+import Accordion from '@mui/joy/Accordion';
+import AccordionDetails, {
+  accordionDetailsClasses,
+} from '@mui/joy/AccordionDetails';
+import AccordionSummary, {
+  accordionSummaryClasses,
+} from '@mui/joy/AccordionSummary';
+
+export default function AccordionDepthPanel() {
+  return (
+    <AccordionGroup
+      variant="outlined"
+      transition="0.2s"
+      sx={(theme) => ({
+        maxWidth: 400,
+        borderRadius: 'lg',
+        [`& .${accordionSummaryClasses.button}:hover`]: {
+          bgcolor: 'transparent',
+        },
+        [`& .${accordionDetailsClasses.content}`]: {
+          boxShadow: `inset 0 1px ${theme.vars.palette.divider}`,
+          [`&.${accordionDetailsClasses.expanded}`]: {
+            paddingBlock: '0.75rem',
+          },
+        },
+      })}
+    >
+      <Accordion defaultExpanded>
+        <AccordionSummary>First accordion</AccordionSummary>
+        <AccordionDetails variant="soft">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary>Second accordion</AccordionSummary>
+        <AccordionDetails variant="soft">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary>Third accordion</AccordionSummary>
+        <AccordionDetails variant="soft">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+    </AccordionGroup>
+  );
+}

docs/data/joy/components/accordion/AccordionDisabled.js

@@ -0,0 +1,32 @@
+import AccordionGroup from '@mui/joy/AccordionGroup';
+import Accordion from '@mui/joy/Accordion';
+import AccordionDetails from '@mui/joy/AccordionDetails';
+import AccordionSummary from '@mui/joy/AccordionSummary';
+
+export default function AccordionDisabled() {
+  return (
+    <AccordionGroup sx={{ maxWidth: 400 }}>
+      <Accordion disabled>
+        <AccordionSummary>First accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion disabled>
+        <AccordionSummary>Second accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion expanded disabled>
+        <AccordionSummary>Third accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+    </AccordionGroup>
+  );
+}

docs/data/joy/components/accordion/AccordionDisabled.tsx

@@ -0,0 +1,32 @@
+import AccordionGroup from '@mui/joy/AccordionGroup';
+import Accordion from '@mui/joy/Accordion';
+import AccordionDetails from '@mui/joy/AccordionDetails';
+import AccordionSummary from '@mui/joy/AccordionSummary';
+
+export default function AccordionDisabled() {
+  return (
+    <AccordionGroup sx={{ maxWidth: 400 }}>
+      <Accordion disabled>
+        <AccordionSummary>First accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion disabled>
+        <AccordionSummary>Second accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion expanded disabled>
+        <AccordionSummary>Third accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+    </AccordionGroup>
+  );
+}

docs/data/joy/components/accordion/AccordionFilter.js

@@ -0,0 +1,153 @@
+import AccordionGroup from '@mui/joy/AccordionGroup';
+import Accordion from '@mui/joy/Accordion';
+import AccordionDetails, {
+  accordionDetailsClasses,
+} from '@mui/joy/AccordionDetails';
+import AccordionSummary, {
+  accordionSummaryClasses,
+} from '@mui/joy/AccordionSummary';
+import Switch from '@mui/joy/Switch';
+import Stack from '@mui/joy/Stack';
+import Typography from '@mui/joy/Typography';
+import Avatar from '@mui/joy/Avatar';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import ListItemContent from '@mui/joy/ListItemContent';
+
+import AirplanemodeActiveRoundedIcon from '@mui/icons-material/AirplanemodeActiveRounded';
+import WifiRoundedIcon from '@mui/icons-material/WifiRounded';
+import BluetoothRoundedIcon from '@mui/icons-material/BluetoothRounded';
+import TapAndPlayRoundedIcon from '@mui/icons-material/TapAndPlayRounded';
+import EditNotificationsRoundedIcon from '@mui/icons-material/EditNotificationsRounded';
+import AdUnitsRoundedIcon from '@mui/icons-material/AdUnitsRounded';
+import MessageRoundedIcon from '@mui/icons-material/MessageRounded';
+import EmailRoundedIcon from '@mui/icons-material/EmailRounded';
+import AccessibilityNewRoundedIcon from '@mui/icons-material/AccessibilityNewRounded';
+import ZoomInRoundedIcon from '@mui/icons-material/ZoomInRounded';
+import SpatialTrackingRoundedIcon from '@mui/icons-material/SpatialTrackingRounded';
+import SettingsVoiceRoundedIcon from '@mui/icons-material/SettingsVoiceRounded';
+
+export default function AccordionFilter() {
+  return (
+    <AccordionGroup
+      variant="plain"
+      transition="0.2s"
+      sx={{
+        maxWidth: 400,
+        borderRadius: 'md',
+        [`& .${accordionDetailsClasses.content}.${accordionDetailsClasses.expanded}`]:
+          {
+            paddingBlock: '1rem',
+          },
+        [`& .${accordionSummaryClasses.button}`]: {
+          paddingBlock: '1rem',
+        },
+      }}
+    >
+      <Accordion>
+        <AccordionSummary>
+          <Avatar color="primary">
+            <TapAndPlayRoundedIcon />
+          </Avatar>
+          <ListItemContent>
+            <Typography level="title-md">Connections</Typography>
+            <Typography level="body-sm">
+              Activate or deactivate your connections
+            </Typography>
+          </ListItemContent>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Stack spacing={1.5}>
+            <FormControl orientation="horizontal" sx={{ gap: 1 }}>
+              <AirplanemodeActiveRoundedIcon fontSize="xl2" sx={{ mx: 1 }} />
+              <FormLabel>Airplane Mode</FormLabel>
+              <Switch size="sm" />
+            </FormControl>
+
+            <FormControl orientation="horizontal" sx={{ gap: 1 }}>
+              <WifiRoundedIcon fontSize="xl2" sx={{ mx: 1 }} />
+              <FormLabel>Wi-Fi</FormLabel>
+              <Switch size="sm" />
+            </FormControl>
+
+            <FormControl orientation="horizontal" sx={{ gap: 1 }}>
+              <BluetoothRoundedIcon fontSize="xl2" sx={{ mx: 1 }} />
+              <FormLabel>Bluetooth</FormLabel>
+              <Switch size="sm" />
+            </FormControl>
+          </Stack>
+        </AccordionDetails>
+      </Accordion>
+
+      <Accordion>
+        <AccordionSummary>
+          <Avatar color="success">
+            <EditNotificationsRoundedIcon />
+          </Avatar>
+          <ListItemContent>
+            <Typography level="title-md">Notifications</Typography>
+            <Typography level="body-sm">
+              Enable or disable your notifications
+            </Typography>
+          </ListItemContent>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Stack spacing={1.5}>
+            <FormControl orientation="horizontal" sx={{ gap: 1 }}>
+              <EmailRoundedIcon fontSize="xl2" sx={{ mx: 1 }} />
+              <FormLabel>E-mail</FormLabel>
+              <Switch size="sm" />
+            </FormControl>
+
+            <FormControl orientation="horizontal" sx={{ gap: 1 }}>
+              <MessageRoundedIcon fontSize="xl2" sx={{ mx: 1 }} />
+              <FormLabel>Messages</FormLabel>
+              <Switch size="sm" />
+            </FormControl>
+
+            <FormControl orientation="horizontal" sx={{ gap: 1 }}>
+              <AdUnitsRoundedIcon fontSize="xl2" sx={{ mx: 1 }} />
+              <FormLabel>Push</FormLabel>
+              <Switch size="sm" />
+            </FormControl>
+          </Stack>
+        </AccordionDetails>
+      </Accordion>
+
+      <Accordion>
+        <AccordionSummary>
+          <Avatar color="danger">
+            <AccessibilityNewRoundedIcon />
+          </Avatar>
+          <ListItemContent>
+            <Typography level="title-md">Accessibility</Typography>
+            <Typography level="body-sm">
+              Toggle your accessibility settings
+            </Typography>
+          </ListItemContent>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Stack spacing={1.5}>
+            <FormControl orientation="horizontal" sx={{ gap: 1 }}>
+              <ZoomInRoundedIcon fontSize="xl2" sx={{ mx: 1 }} />
+              <FormLabel>Zoom</FormLabel>
+              <Switch size="sm" />
+            </FormControl>
+
+            <FormControl orientation="horizontal" sx={{ gap: 1 }}>
+              <SpatialTrackingRoundedIcon fontSize="xl2" sx={{ mx: 1 }} />
+              <FormLabel>Audio Descriptions</FormLabel>
+              <Switch size="sm" />
+            </FormControl>
+
+            <FormControl orientation="horizontal" sx={{ gap: 1 }}>
+              <SettingsVoiceRoundedIcon fontSize="xl2" sx={{ mx: 1 }} />
+              <FormLabel>Voice Control</FormLabel>
+              <Switch size="sm" />
+            </FormControl>
+          </Stack>
+        </AccordionDetails>
+      </Accordion>
+    </AccordionGroup>
+  );
+}

docs/data/joy/components/accordion/AccordionFilter.tsx

@@ -0,0 +1,153 @@
+import AccordionGroup from '@mui/joy/AccordionGroup';
+import Accordion from '@mui/joy/Accordion';
+import AccordionDetails, {
+  accordionDetailsClasses,
+} from '@mui/joy/AccordionDetails';
+import AccordionSummary, {
+  accordionSummaryClasses,
+} from '@mui/joy/AccordionSummary';
+import Switch from '@mui/joy/Switch';
+import Stack from '@mui/joy/Stack';
+import Typography from '@mui/joy/Typography';
+import Avatar from '@mui/joy/Avatar';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import ListItemContent from '@mui/joy/ListItemContent';
+
+import AirplanemodeActiveRoundedIcon from '@mui/icons-material/AirplanemodeActiveRounded';
+import WifiRoundedIcon from '@mui/icons-material/WifiRounded';
+import BluetoothRoundedIcon from '@mui/icons-material/BluetoothRounded';
+import TapAndPlayRoundedIcon from '@mui/icons-material/TapAndPlayRounded';
+import EditNotificationsRoundedIcon from '@mui/icons-material/EditNotificationsRounded';
+import AdUnitsRoundedIcon from '@mui/icons-material/AdUnitsRounded';
+import MessageRoundedIcon from '@mui/icons-material/MessageRounded';
+import EmailRoundedIcon from '@mui/icons-material/EmailRounded';
+import AccessibilityNewRoundedIcon from '@mui/icons-material/AccessibilityNewRounded';
+import ZoomInRoundedIcon from '@mui/icons-material/ZoomInRounded';
+import SpatialTrackingRoundedIcon from '@mui/icons-material/SpatialTrackingRounded';
+import SettingsVoiceRoundedIcon from '@mui/icons-material/SettingsVoiceRounded';
+
+export default function AccordionFilter() {
+  return (
+    <AccordionGroup
+      variant="plain"
+      transition="0.2s"
+      sx={{
+        maxWidth: 400,
+        borderRadius: 'md',
+        [`& .${accordionDetailsClasses.content}.${accordionDetailsClasses.expanded}`]:
+          {
+            paddingBlock: '1rem',
+          },
+        [`& .${accordionSummaryClasses.button}`]: {
+          paddingBlock: '1rem',
+        },
+      }}
+    >
+      <Accordion>
+        <AccordionSummary>
+          <Avatar color="primary">
+            <TapAndPlayRoundedIcon />
+          </Avatar>
+          <ListItemContent>
+            <Typography level="title-md">Connections</Typography>
+            <Typography level="body-sm">
+              Activate or deactivate your connections
+            </Typography>
+          </ListItemContent>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Stack spacing={1.5}>
+            <FormControl orientation="horizontal" sx={{ gap: 1 }}>
+              <AirplanemodeActiveRoundedIcon fontSize="xl2" sx={{ mx: 1 }} />
+              <FormLabel>Airplane Mode</FormLabel>
+              <Switch size="sm" />
+            </FormControl>
+
+            <FormControl orientation="horizontal" sx={{ gap: 1 }}>
+              <WifiRoundedIcon fontSize="xl2" sx={{ mx: 1 }} />
+              <FormLabel>Wi-Fi</FormLabel>
+              <Switch size="sm" />
+            </FormControl>
+
+            <FormControl orientation="horizontal" sx={{ gap: 1 }}>
+              <BluetoothRoundedIcon fontSize="xl2" sx={{ mx: 1 }} />
+              <FormLabel>Bluetooth</FormLabel>
+              <Switch size="sm" />
+            </FormControl>
+          </Stack>
+        </AccordionDetails>
+      </Accordion>
+
+      <Accordion>
+        <AccordionSummary>
+          <Avatar color="success">
+            <EditNotificationsRoundedIcon />
+          </Avatar>
+          <ListItemContent>
+            <Typography level="title-md">Notifications</Typography>
+            <Typography level="body-sm">
+              Enable or disable your notifications
+            </Typography>
+          </ListItemContent>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Stack spacing={1.5}>
+            <FormControl orientation="horizontal" sx={{ gap: 1 }}>
+              <EmailRoundedIcon fontSize="xl2" sx={{ mx: 1 }} />
+              <FormLabel>E-mail</FormLabel>
+              <Switch size="sm" />
+            </FormControl>
+
+            <FormControl orientation="horizontal" sx={{ gap: 1 }}>
+              <MessageRoundedIcon fontSize="xl2" sx={{ mx: 1 }} />
+              <FormLabel>Messages</FormLabel>
+              <Switch size="sm" />
+            </FormControl>
+
+            <FormControl orientation="horizontal" sx={{ gap: 1 }}>
+              <AdUnitsRoundedIcon fontSize="xl2" sx={{ mx: 1 }} />
+              <FormLabel>Push</FormLabel>
+              <Switch size="sm" />
+            </FormControl>
+          </Stack>
+        </AccordionDetails>
+      </Accordion>
+
+      <Accordion>
+        <AccordionSummary>
+          <Avatar color="danger">
+            <AccessibilityNewRoundedIcon />
+          </Avatar>
+          <ListItemContent>
+            <Typography level="title-md">Accessibility</Typography>
+            <Typography level="body-sm">
+              Toggle your accessibility settings
+            </Typography>
+          </ListItemContent>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Stack spacing={1.5}>
+            <FormControl orientation="horizontal" sx={{ gap: 1 }}>
+              <ZoomInRoundedIcon fontSize="xl2" sx={{ mx: 1 }} />
+              <FormLabel>Zoom</FormLabel>
+              <Switch size="sm" />
+            </FormControl>
+
+            <FormControl orientation="horizontal" sx={{ gap: 1 }}>
+              <SpatialTrackingRoundedIcon fontSize="xl2" sx={{ mx: 1 }} />
+              <FormLabel>Audio Descriptions</FormLabel>
+              <Switch size="sm" />
+            </FormControl>
+
+            <FormControl orientation="horizontal" sx={{ gap: 1 }}>
+              <SettingsVoiceRoundedIcon fontSize="xl2" sx={{ mx: 1 }} />
+              <FormLabel>Voice Control</FormLabel>
+              <Switch size="sm" />
+            </FormControl>
+          </Stack>
+        </AccordionDetails>
+      </Accordion>
+    </AccordionGroup>
+  );
+}

docs/data/joy/components/accordion/AccordionIndicator.js

@@ -0,0 +1,45 @@
+import AccordionGroup from '@mui/joy/AccordionGroup';
+import Accordion from '@mui/joy/Accordion';
+import AccordionDetails from '@mui/joy/AccordionDetails';
+import AccordionSummary, {
+  accordionSummaryClasses,
+} from '@mui/joy/AccordionSummary';
+import AddIcon from '@mui/icons-material/Add';
+
+export default function AccordionIndicator() {
+  return (
+    <AccordionGroup
+      sx={{
+        maxWidth: 400,
+        [`& .${accordionSummaryClasses.indicator}`]: {
+          transition: '0.2s',
+        },
+        [`& [aria-expanded="true"] .${accordionSummaryClasses.indicator}`]: {
+          transform: 'rotate(45deg)',
+        },
+      }}
+    >
+      <Accordion>
+        <AccordionSummary indicator={<AddIcon />}>First accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary indicator={<AddIcon />}>Second accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary indicator={<AddIcon />}>Third accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+    </AccordionGroup>
+  );
+}

docs/data/joy/components/accordion/AccordionIndicator.tsx

@@ -0,0 +1,45 @@
+import AccordionGroup from '@mui/joy/AccordionGroup';
+import Accordion from '@mui/joy/Accordion';
+import AccordionDetails from '@mui/joy/AccordionDetails';
+import AccordionSummary, {
+  accordionSummaryClasses,
+} from '@mui/joy/AccordionSummary';
+import AddIcon from '@mui/icons-material/Add';
+
+export default function AccordionIndicator() {
+  return (
+    <AccordionGroup
+      sx={{
+        maxWidth: 400,
+        [`& .${accordionSummaryClasses.indicator}`]: {
+          transition: '0.2s',
+        },
+        [`& [aria-expanded="true"] .${accordionSummaryClasses.indicator}`]: {
+          transform: 'rotate(45deg)',
+        },
+      }}
+    >
+      <Accordion>
+        <AccordionSummary indicator={<AddIcon />}>First accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary indicator={<AddIcon />}>Second accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary indicator={<AddIcon />}>Third accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+    </AccordionGroup>
+  );
+}

docs/data/joy/components/accordion/AccordionNoDivider.js

@@ -0,0 +1,32 @@
+import AccordionGroup from '@mui/joy/AccordionGroup';
+import Accordion from '@mui/joy/Accordion';
+import AccordionDetails from '@mui/joy/AccordionDetails';
+import AccordionSummary from '@mui/joy/AccordionSummary';
+
+export default function AccordionNoDivider() {
+  return (
+    <AccordionGroup disableDivider sx={{ maxWidth: 400 }}>
+      <Accordion>
+        <AccordionSummary>First accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary>Second accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary>Third accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+    </AccordionGroup>
+  );
+}

docs/data/joy/components/accordion/AccordionNoDivider.tsx

@@ -0,0 +1,32 @@
+import AccordionGroup from '@mui/joy/AccordionGroup';
+import Accordion from '@mui/joy/Accordion';
+import AccordionDetails from '@mui/joy/AccordionDetails';
+import AccordionSummary from '@mui/joy/AccordionSummary';
+
+export default function AccordionNoDivider() {
+  return (
+    <AccordionGroup disableDivider sx={{ maxWidth: 400 }}>
+      <Accordion>
+        <AccordionSummary>First accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary>Second accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary>Third accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+    </AccordionGroup>
+  );
+}

docs/data/joy/components/accordion/AccordionSizes.js

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import AccordionGroup from '@mui/joy/AccordionGroup';
+import Accordion from '@mui/joy/Accordion';
+import AccordionDetails from '@mui/joy/AccordionDetails';
+import AccordionSummary from '@mui/joy/AccordionSummary';
+import Button from '@mui/joy/Button';
+import ToggleButtonGroup from '@mui/joy/ToggleButtonGroup';
+import Stack from '@mui/joy/Stack';
+
+export default function AccordionSizes() {
+  const [size, setSize] = React.useState('md');
+  return (
+    <Stack spacing={2} sx={{ maxWidth: 400, flex: 1 }}>
+      <ToggleButtonGroup
+        size="sm"
+        buttonFlex={1}
+        value={size}
+        onChange={(event, newValue) => setSize(newValue || size)}
+      >
+        <Button value="sm">Small</Button>
+        <Button value="md">Medium</Button>
+        <Button value="lg">Large</Button>
+      </ToggleButtonGroup>
+      <AccordionGroup size={size}>
+        <Accordion>
+          <AccordionSummary>First accordion</AccordionSummary>
+          <AccordionDetails>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+            tempor incididunt ut labore et dolore magna aliqua.
+          </AccordionDetails>
+        </Accordion>
+        <Accordion>
+          <AccordionSummary>Second accordion</AccordionSummary>
+          <AccordionDetails>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+            tempor incididunt ut labore et dolore magna aliqua.
+          </AccordionDetails>
+        </Accordion>
+        <Accordion>
+          <AccordionSummary>Third accordion</AccordionSummary>
+          <AccordionDetails>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+            tempor incididunt ut labore et dolore magna aliqua.
+          </AccordionDetails>
+        </Accordion>
+      </AccordionGroup>
+    </Stack>
+  );
+}

docs/data/joy/components/accordion/AccordionSizes.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import AccordionGroup, { AccordionGroupProps } from '@mui/joy/AccordionGroup';
+import Accordion from '@mui/joy/Accordion';
+import AccordionDetails from '@mui/joy/AccordionDetails';
+import AccordionSummary from '@mui/joy/AccordionSummary';
+import Button from '@mui/joy/Button';
+import ToggleButtonGroup from '@mui/joy/ToggleButtonGroup';
+import Stack from '@mui/joy/Stack';
+
+export default function AccordionSizes() {
+  const [size, setSize] = React.useState<AccordionGroupProps['size']>('md');
+  return (
+    <Stack spacing={2} sx={{ maxWidth: 400, flex: 1 }}>
+      <ToggleButtonGroup
+        size="sm"
+        buttonFlex={1}
+        value={size}
+        onChange={(event, newValue) => setSize(newValue || size)}
+      >
+        <Button value="sm">Small</Button>
+        <Button value="md">Medium</Button>
+        <Button value="lg">Large</Button>
+      </ToggleButtonGroup>
+      <AccordionGroup size={size}>
+        <Accordion>
+          <AccordionSummary>First accordion</AccordionSummary>
+          <AccordionDetails>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+            tempor incididunt ut labore et dolore magna aliqua.
+          </AccordionDetails>
+        </Accordion>
+        <Accordion>
+          <AccordionSummary>Second accordion</AccordionSummary>
+          <AccordionDetails>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+            tempor incididunt ut labore et dolore magna aliqua.
+          </AccordionDetails>
+        </Accordion>
+        <Accordion>
+          <AccordionSummary>Third accordion</AccordionSummary>
+          <AccordionDetails>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+            tempor incididunt ut labore et dolore magna aliqua.
+          </AccordionDetails>
+        </Accordion>
+      </AccordionGroup>
+    </Stack>
+  );
+}

docs/data/joy/components/accordion/AccordionStylingExpansion.js

@@ -0,0 +1,56 @@
+import AccordionGroup from '@mui/joy/AccordionGroup';
+import Accordion, { accordionClasses } from '@mui/joy/Accordion';
+import AccordionDetails from '@mui/joy/AccordionDetails';
+import AccordionSummary from '@mui/joy/AccordionSummary';
+
+export default function AccordionStylingExpansion() {
+  return (
+    <AccordionGroup
+      sx={(theme) => ({
+        maxWidth: 400,
+        [`& .${accordionClasses.root}`]: {
+          marginTop: '0.5rem',
+          transition: '0.2s ease',
+          '& button:not([aria-expanded="true"])': {
+            transition: '0.2s ease',
+            paddingBottom: '0.625rem',
+          },
+          '& button:hover': {
+            background: 'transparent',
+          },
+        },
+        [`& .${accordionClasses.root}.${accordionClasses.expanded}`]: {
+          bgcolor: 'background.level1',
+          borderRadius: 'md',
+          borderBottom: '1px solid',
+          borderColor: 'background.level2',
+        },
+        '& [aria-expanded="true"]': {
+          boxShadow: `inset 0 -1px 0 ${theme.vars.palette.divider}`,
+        },
+      })}
+    >
+      <Accordion>
+        <AccordionSummary>First accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary>Second accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary>Third accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+    </AccordionGroup>
+  );
+}

docs/data/joy/components/accordion/AccordionStylingExpansion.tsx

@@ -0,0 +1,56 @@
+import AccordionGroup from '@mui/joy/AccordionGroup';
+import Accordion, { accordionClasses } from '@mui/joy/Accordion';
+import AccordionDetails from '@mui/joy/AccordionDetails';
+import AccordionSummary from '@mui/joy/AccordionSummary';
+
+export default function AccordionStylingExpansion() {
+  return (
+    <AccordionGroup
+      sx={(theme) => ({
+        maxWidth: 400,
+        [`& .${accordionClasses.root}`]: {
+          marginTop: '0.5rem',
+          transition: '0.2s ease',
+          '& button:not([aria-expanded="true"])': {
+            transition: '0.2s ease',
+            paddingBottom: '0.625rem',
+          },
+          '& button:hover': {
+            background: 'transparent',
+          },
+        },
+        [`& .${accordionClasses.root}.${accordionClasses.expanded}`]: {
+          bgcolor: 'background.level1',
+          borderRadius: 'md',
+          borderBottom: '1px solid',
+          borderColor: 'background.level2',
+        },
+        '& [aria-expanded="true"]': {
+          boxShadow: `inset 0 -1px 0 ${theme.vars.palette.divider}`,
+        },
+      })}
+    >
+      <Accordion>
+        <AccordionSummary>First accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary>Second accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary>Third accordion</AccordionSummary>
+        <AccordionDetails>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua.
+        </AccordionDetails>
+      </Accordion>
+    </AccordionGroup>
+  );
+}

docs/data/joy/components/accordion/AccordionTransition.js

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import AccordionGroup from '@mui/joy/AccordionGroup';
+import Accordion from '@mui/joy/Accordion';
+import AccordionDetails from '@mui/joy/AccordionDetails';
+import AccordionSummary from '@mui/joy/AccordionSummary';
+import RadioGroup from '@mui/joy/RadioGroup';
+import Radio from '@mui/joy/Radio';
+import Stack from '@mui/joy/Stack';
+import Typography from '@mui/joy/Typography';
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
+import { BrandingProvider } from '@mui/docs/branding';
+
+export default function AccordionTransition() {
+  const [transition, setTransition] = React.useState('0.2s ease');
+  return (
+    <Stack spacing={2} sx={{ alignItems: 'center', flex: 1 }}>
+      <RadioGroup
+        orientation="horizontal"
+        value={transition}
+        onChange={(event) => {
+          setTransition(event.target.value);
+        }}
+      >
+        <Radio value="0.2s ease" label="Easing" />
+        <Radio value="mix" label="Mix" />
+      </RadioGroup>
+      <AccordionGroup
+        transition={
+          transition === 'mix'
+            ? {
+                initial: '0.3s ease-out',
+                expanded: '0.2s ease',
+              }
+            : transition
+        }
+        sx={{ maxWidth: 400 }}
+      >
+        <Accordion>
+          <AccordionSummary>📖 How to animate the panel?</AccordionSummary>
+          <AccordionDetails>
+            <Typography>
+              The AccordionGroup supports the <code>transition</code> prop to
+              customize the animation of the panel. You can provide a <b>string</b>{' '}
+              value or an <b>object</b> to fine tune the animation at the initial and
+              expanded states.
+            </Typography>
+          </AccordionDetails>
+        </Accordion>
+        <Accordion>
+          <AccordionSummary>🤔 Does it work with dynamic height?</AccordionSummary>
+          <AccordionDetails>
+            <Typography>
+              Absolutely yes! an by the way, it is <b>pure CSS</b>.
+            </Typography>
+          </AccordionDetails>
+        </Accordion>
+        <Accordion>
+          <AccordionSummary>🪄 What kind of magic this is?</AccordionSummary>
+          <AccordionDetails>
+            <Typography>
+              The panel is a <b>CSS Grid</b> which can be transitioned by the{' '}
+              <code>grid-template-rows</code> property.
+            </Typography>
+          </AccordionDetails>
+        </Accordion>
+      </AccordionGroup>
+      <Box sx={{ width: '100%' }}>
+        <BrandingProvider>
+          <HighlightedCode
+            code={`<AccordionGroup transition=${
+              transition === 'mix'
+                ? `{{
+  initial: "0.3s ease-out",
+  expanded: "0.2s ease",
+}}`
+                : `"${transition}"`
+            }>`}
+            language="jsx"
+          />
+        </BrandingProvider>
+      </Box>
+    </Stack>
+  );
+}

docs/data/joy/components/accordion/AccordionUsage.js

@@ -0,0 +1,142 @@
+import AccordionGroup from '@mui/joy/AccordionGroup';
+import Accordion from '@mui/joy/Accordion';
+import AccordionDetails from '@mui/joy/AccordionDetails';
+import AccordionSummary from '@mui/joy/AccordionSummary';
+import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
+
+export default function AccordionUsage() {
+  return (
+    <JoyUsageDemo
+      componentName="AccordionGroup"
+      data={[
+        {
+          propName: 'variant',
+          knob: 'radio',
+          defaultValue: 'plain',
+          options: ['plain', 'outlined', 'soft', 'solid'],
+        },
+        {
+          propName: 'color',
+          knob: 'color',
+          defaultValue: 'neutral',
+        },
+        {
+          propName: 'size',
+          knob: 'radio',
+          options: ['sm', 'md', 'lg'],
+          defaultValue: 'md',
+        },
+        {
+          propName: 'disabled',
+          knob: 'switch',
+          defaultValue: false,
+          codeBlockDisplay: false,
+        },
+        {
+          propName: 'children',
+          defaultValue: `$children`,
+        },
+      ]}
+      getCodeBlock={(code, props) =>
+        code.replace(
+          '$children',
+          `<Accordion${props.disabled ? ' disabled' : ''}${
+            props.variant === 'solid'
+              ? ` variant=${props.variant} color=${props.color}`
+              : ''
+          }>
+    <AccordionSummary${
+      props.variant === 'solid'
+        ? ` variant=${props.variant} color=${props.color}`
+        : ''
+    }>Title</AccordionSummary>
+    <AccordionDetails${
+      props.variant === 'solid'
+        ? ` variant=${props.variant} color=${props.color}`
+        : ''
+    }>Content</AccordionDetails>
+  </Accordion>`,
+        )
+      }
+      renderDemo={({ disabled, ...props }) => (
+        <AccordionGroup
+          {...props}
+          sx={{ width: 300, maxWidth: '100%', alignSelf: 'flex-start', mb: 3 }}
+        >
+          <Accordion
+            {...(props.variant === 'solid' && {
+              variant: 'solid',
+              color: props.color,
+            })}
+            disabled={disabled}
+          >
+            <AccordionSummary
+              {...(props.variant === 'solid' && {
+                variant: 'solid',
+                color: props.color,
+              })}
+            >
+              First Header
+            </AccordionSummary>
+            <AccordionDetails
+              {...(props.variant === 'solid' && {
+                variant: 'solid',
+                color: props.color,
+              })}
+            >
+              Content of the first accordion.
+            </AccordionDetails>
+          </Accordion>
+          <Accordion
+            disabled={disabled}
+            {...(props.variant === 'solid' && {
+              variant: 'solid',
+              color: props.color,
+            })}
+          >
+            <AccordionSummary
+              {...(props.variant === 'solid' && {
+                variant: 'solid',
+                color: props.color,
+              })}
+            >
+              Second Header
+            </AccordionSummary>
+            <AccordionDetails
+              {...(props.variant === 'solid' && {
+                variant: 'solid',
+                color: props.color,
+              })}
+            >
+              Content of the second accordion.
+            </AccordionDetails>
+          </Accordion>
+          <Accordion
+            disabled={disabled}
+            {...(props.variant === 'solid' && {
+              variant: 'solid',
+              color: props.color,
+            })}
+          >
+            <AccordionSummary
+              {...(props.variant === 'solid' && {
+                variant: 'solid',
+                color: props.color,
+              })}
+            >
+              Third Header
+            </AccordionSummary>
+            <AccordionDetails
+              {...(props.variant === 'solid' && {
+                variant: 'solid',
+                color: props.color,
+              })}
+            >
+              Content of the third accordion.
+            </AccordionDetails>
+          </Accordion>
+        </AccordionGroup>
+      )}
+    />
+  );
+}

docs/data/joy/components/accordion/accordion.md

@@ -0,0 +1,118 @@
+---
+productId: joy-ui
+title: React Accordion component
+components: Accordion, AccordionDetails, AccordionGroup, AccordionSummary
+githubLabel: 'scope: accordion'
+waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
+---
+
+# Accordion
+
+<p class="description">Accordions let users show and hide sections of related content on a page.</p>
+
+{{"component": "@mui/docs/ComponentLinkHeader"}}
+
+## Introduction
+
+Joy UI provides four accordion-related components:
+
+- [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"}}
+
+## Basics
+
+```jsx
+import Accordion from '@mui/joy/Accordion';
+import AccordionDetails from '@mui/joy/AccordionDetails';
+import AccordionGroup from '@mui/joy/AccordionGroup';
+import AccordionSummary from '@mui/joy/AccordionSummary';
+```
+
+{{"demo": "AccordionBasic.js"}}
+
+## Customization
+
+### Sizes
+
+The AccordionGroup component comes in three sizes: `sm`, `md` (default), and `lg`.
+
+{{"demo": "AccordionSizes.js"}}
+
+:::info
+To learn how to add custom sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes).
+:::
+
+### Controlled accordion
+
+Use the `expanded` prop to control the expansion state of the accordion and listen to the expansion event via `onChange` prop.
+
+{{"demo": "AccordionControlled.js"}}
+
+### Disabled
+
+Use the `disabled` prop to disable the accordion trigger.
+
+{{"demo": "AccordionDisabled.js"}}
+
+:::info
+Note: the `disabled` prop only disables the accordion trigger, not the accordion content.
+:::
+
+### Removing divider
+
+Use `disableDivider` prop on the Accordion Group component to hide the divider between accordions.
+
+{{"demo": "AccordionNoDivider.js"}}
+
+:::info
+**Good to know**: the reason that ListDivider can be used is because the accordion family reuses styles from the [List](/joy-ui/react-list/) family.
+:::
+
+### Animating the expansion
+
+Use `transition` prop to animate the expansion. The value can be a **string** if you want the transition to be the same for initial and expanded states, or an **object** if you want to customize the transition for each state.
+
+The object value can contain the following keys:
+
+- `initial`: the transition when the accordion is closed
+- `expanded`: the transition when the accordion is open
+
+{{"demo": "AccordionTransition.js", "hideToolbar": true}}
+
+### Indicator
+
+Use `indicator` prop to customize the indicator of the accordion.
+
+{{"demo": "AccordionIndicator.js"}}
+
+### Styling on expansion
+
+Use `sx` prop on the AccordionGroup to style all the accordions at once.
+
+{{"demo": "AccordionStylingExpansion.js"}}
+
+## Common examples
+
+### Depth panel
+
+This example shows how to customize the accordion to create lines and depth to make it look more realistic.
+
+{{"demo": "AccordionDepthPanel.js"}}
+
+### User settings
+
+This example shows how to customize the accordion and craft diverse compositions using additional components.
+
+{{"demo": "AccordionFilter.js"}}
+
+## Accessibility
+
+The built-in accessibility of the accordion follows [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/).
+
+- The accordion summary has a root slot (`div`) that can be changed, for example using `h3`, based on the hierarchy of the accordion.
+- The accordion summary contains a button with `aria-expanded` and `aria-controls` attributes.
+- The accordion details contains a div with `role="region"` and `aria-labelledby` attributes.

docs/data/joy/components/alert/AlertBasic.js

@@ -0,0 +1,10 @@
+import Box from '@mui/joy/Box';
+import Alert from '@mui/joy/Alert';
+
+export default function AlertBasic() {
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Alert>This is a basic Alert.</Alert>
+    </Box>
+  );
+}

docs/data/joy/components/alert/AlertBasic.tsx

@@ -0,0 +1,10 @@
+import Box from '@mui/joy/Box';
+import Alert from '@mui/joy/Alert';
+
+export default function AlertBasic() {
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Alert>This is a basic Alert.</Alert>
+    </Box>
+  );
+}

docs/data/joy/components/alert/AlertBasic.tsx.preview

@@ -0,0 +1 @@
+<Alert>This is a basic Alert.</Alert>

docs/data/joy/components/alert/AlertColors.js

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import Alert from '@mui/joy/Alert';
+import Stack from '@mui/joy/Stack';
+import Box from '@mui/joy/Box';
+import Radio from '@mui/joy/Radio';
+import RadioGroup from '@mui/joy/RadioGroup';
+import Sheet from '@mui/joy/Sheet';
+
+import Typography from '@mui/joy/Typography';
+
+export default function AlertColors() {
+  const [variant, setVariant] = React.useState('solid');
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '100%',
+      }}
+    >
+      <Stack spacing={1} sx={{ width: '100%', maxWidth: 400 }}>
+        <Alert variant={variant} color="primary">
+          Primary
+        </Alert>
+        <Alert variant={variant} color="neutral">
+          Neutral
+        </Alert>
+        <Alert variant={variant} color="danger">
+          Danger
+        </Alert>
+        <Alert variant={variant} color="success">
+          Success
+        </Alert>
+        <Alert variant={variant} color="warning">
+          Warning
+        </Alert>
+      </Stack>
+      <Sheet sx={{ pl: 4, ml: 3, borderLeft: '1px solid', borderColor: 'divider' }}>
+        <Typography
+          level="body-sm"
+          id="variant-label"
+          textColor="text.primary"
+          sx={{ fontWeight: 'xl', mb: 1 }}
+        >
+          Variant:
+        </Typography>
+        <RadioGroup
+          size="sm"
+          aria-labelledby="variant-label"
+          name="variant"
+          value={variant}
+          onChange={(event) => setVariant(event.target.value)}
+        >
+          <Radio label="Solid" value="solid" />
+          <Radio label="Soft" value="soft" />
+          <Radio label="Outlined" value="outlined" />
+          <Radio label="Plain" value="plain" />
+        </RadioGroup>
+      </Sheet>
+    </Box>
+  );
+}

docs/data/joy/components/alert/AlertColors.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import Alert from '@mui/joy/Alert';
+import Stack from '@mui/joy/Stack';
+import Box from '@mui/joy/Box';
+import Radio from '@mui/joy/Radio';
+import RadioGroup from '@mui/joy/RadioGroup';
+import Sheet from '@mui/joy/Sheet';
+import { VariantProp } from '@mui/joy/styles';
+import Typography from '@mui/joy/Typography';
+
+export default function AlertColors() {
+  const [variant, setVariant] = React.useState<VariantProp>('solid');
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '100%',
+      }}
+    >
+      <Stack spacing={1} sx={{ width: '100%', maxWidth: 400 }}>
+        <Alert variant={variant} color="primary">
+          Primary
+        </Alert>
+        <Alert variant={variant} color="neutral">
+          Neutral
+        </Alert>
+        <Alert variant={variant} color="danger">
+          Danger
+        </Alert>
+        <Alert variant={variant} color="success">
+          Success
+        </Alert>
+        <Alert variant={variant} color="warning">
+          Warning
+        </Alert>
+      </Stack>
+      <Sheet sx={{ pl: 4, ml: 3, borderLeft: '1px solid', borderColor: 'divider' }}>
+        <Typography
+          level="body-sm"
+          id="variant-label"
+          textColor="text.primary"
+          sx={{ fontWeight: 'xl', mb: 1 }}
+        >
+          Variant:
+        </Typography>
+        <RadioGroup
+          size="sm"
+          aria-labelledby="variant-label"
+          name="variant"
+          value={variant}
+          onChange={(event) => setVariant(event.target.value as VariantProp)}
+        >
+          <Radio label="Solid" value="solid" />
+          <Radio label="Soft" value="soft" />
+          <Radio label="Outlined" value="outlined" />
+          <Radio label="Plain" value="plain" />
+        </RadioGroup>
+      </Sheet>
+    </Box>
+  );
+}

docs/data/joy/components/alert/AlertInvertedColors.js

@@ -0,0 +1,97 @@
+import Alert from '@mui/joy/Alert';
+import AspectRatio from '@mui/joy/AspectRatio';
+import IconButton from '@mui/joy/IconButton';
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import CircularProgress from '@mui/joy/CircularProgress';
+import LinearProgress from '@mui/joy/LinearProgress';
+import Stack from '@mui/joy/Stack';
+import Typography from '@mui/joy/Typography';
+import Check from '@mui/icons-material/Check';
+import Close from '@mui/icons-material/Close';
+import Warning from '@mui/icons-material/Warning';
+
+export default function AlertInvertedColors() {
+  return (
+    <Stack spacing={2} sx={{ maxWidth: 400 }}>
+      <Alert
+        size="lg"
+        color="success"
+        variant="solid"
+        invertedColors
+        startDecorator={
+          <AspectRatio
+            variant="solid"
+            ratio="1"
+            sx={{
+              minWidth: 40,
+              borderRadius: '50%',
+              boxShadow: '0 2px 12px 0 rgb(0 0 0/0.2)',
+            }}
+          >
+            <div>
+              <Check fontSize="xl2" />
+            </div>
+          </AspectRatio>
+        }
+        endDecorator={
+          <IconButton
+            variant="plain"
+            sx={{
+              '--IconButton-size': '32px',
+              transform: 'translate(0.5rem, -0.5rem)',
+            }}
+          >
+            <Close />
+          </IconButton>
+        }
+        sx={{ alignItems: 'flex-start', overflow: 'hidden' }}
+      >
+        <div>
+          <Typography level="title-lg">Success</Typography>
+          <Typography level="body-sm">
+            Success is walking from failure to failure with no loss of enthusiasm.
+          </Typography>
+        </div>
+        <LinearProgress
+          variant="solid"
+          color="success"
+          value={40}
+          sx={{
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            borderRadius: 0,
+          }}
+        />
+      </Alert>
+      <Alert
+        variant="soft"
+        color="danger"
+        invertedColors
+        startDecorator={
+          <CircularProgress size="lg" color="danger">
+            <Warning />
+          </CircularProgress>
+        }
+        sx={{ alignItems: 'flex-start', gap: '1rem' }}
+      >
+        <Box sx={{ flex: 1 }}>
+          <Typography level="title-md">Lost connection</Typography>
+          <Typography level="body-md">
+            Please verify your network connection and try again.
+          </Typography>
+          <Box sx={{ mt: 2, display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
+            <Button variant="outlined" size="sm">
+              Open network settings
+            </Button>
+            <Button variant="solid" size="sm">
+              Try again
+            </Button>
+          </Box>
+        </Box>
+      </Alert>
+    </Stack>
+  );
+}

docs/data/joy/components/alert/AlertInvertedColors.tsx

@@ -0,0 +1,97 @@
+import Alert from '@mui/joy/Alert';
+import AspectRatio from '@mui/joy/AspectRatio';
+import IconButton from '@mui/joy/IconButton';
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import CircularProgress from '@mui/joy/CircularProgress';
+import LinearProgress from '@mui/joy/LinearProgress';
+import Stack from '@mui/joy/Stack';
+import Typography from '@mui/joy/Typography';
+import Check from '@mui/icons-material/Check';
+import Close from '@mui/icons-material/Close';
+import Warning from '@mui/icons-material/Warning';
+
+export default function AlertInvertedColors() {
+  return (
+    <Stack spacing={2} sx={{ maxWidth: 400 }}>
+      <Alert
+        size="lg"
+        color="success"
+        variant="solid"
+        invertedColors
+        startDecorator={
+          <AspectRatio
+            variant="solid"
+            ratio="1"
+            sx={{
+              minWidth: 40,
+              borderRadius: '50%',
+              boxShadow: '0 2px 12px 0 rgb(0 0 0/0.2)',
+            }}
+          >
+            <div>
+              <Check fontSize="xl2" />
+            </div>
+          </AspectRatio>
+        }
+        endDecorator={
+          <IconButton
+            variant="plain"
+            sx={{
+              '--IconButton-size': '32px',
+              transform: 'translate(0.5rem, -0.5rem)',
+            }}
+          >
+            <Close />
+          </IconButton>
+        }
+        sx={{ alignItems: 'flex-start', overflow: 'hidden' }}
+      >
+        <div>
+          <Typography level="title-lg">Success</Typography>
+          <Typography level="body-sm">
+            Success is walking from failure to failure with no loss of enthusiasm.
+          </Typography>
+        </div>
+        <LinearProgress
+          variant="solid"
+          color="success"
+          value={40}
+          sx={{
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            borderRadius: 0,
+          }}
+        />
+      </Alert>
+      <Alert
+        variant="soft"
+        color="danger"
+        invertedColors
+        startDecorator={
+          <CircularProgress size="lg" color="danger">
+            <Warning />
+          </CircularProgress>
+        }
+        sx={{ alignItems: 'flex-start', gap: '1rem' }}
+      >
+        <Box sx={{ flex: 1 }}>
+          <Typography level="title-md">Lost connection</Typography>
+          <Typography level="body-md">
+            Please verify your network connection and try again.
+          </Typography>
+          <Box sx={{ mt: 2, display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
+            <Button variant="outlined" size="sm">
+              Open network settings
+            </Button>
+            <Button variant="solid" size="sm">
+              Try again
+            </Button>
+          </Box>
+        </Box>
+      </Alert>
+    </Stack>
+  );
+}

docs/data/joy/components/alert/AlertSizes.js

@@ -0,0 +1,12 @@
+import Box from '@mui/joy/Box';
+import Alert from '@mui/joy/Alert';
+
+export default function AlertSizes() {
+  return (
+    <Box sx={{ display: 'flex', gap: 2, width: '100%', flexDirection: 'column' }}>
+      <Alert size="sm">This is a small Alert.</Alert>
+      <Alert size="md">This is a medium Alert.</Alert>
+      <Alert size="lg">This is a large Alert.</Alert>
+    </Box>
+  );
+}

docs/data/joy/components/alert/AlertSizes.tsx

@@ -0,0 +1,12 @@
+import Box from '@mui/joy/Box';
+import Alert from '@mui/joy/Alert';
+
+export default function AlertSizes() {
+  return (
+    <Box sx={{ display: 'flex', gap: 2, width: '100%', flexDirection: 'column' }}>
+      <Alert size="sm">This is a small Alert.</Alert>
+      <Alert size="md">This is a medium Alert.</Alert>
+      <Alert size="lg">This is a large Alert.</Alert>
+    </Box>
+  );
+}

docs/data/joy/components/alert/AlertSizes.tsx.preview

@@ -0,0 +1,3 @@
+<Alert size="sm">This is a small Alert.</Alert>
+<Alert size="md">This is a medium Alert.</Alert>
+<Alert size="lg">This is a large Alert.</Alert>

docs/data/joy/components/alert/AlertUsage.js

@@ -0,0 +1,32 @@
+import Alert from '@mui/joy/Alert';
+import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
+
+export default function AlertUsage() {
+  return (
+    <JoyUsageDemo
+      componentName="Alert"
+      data={[
+        {
+          propName: 'variant',
+          knob: 'radio',
+          defaultValue: 'soft',
+          options: ['plain', 'outlined', 'soft', 'solid'],
+        },
+        {
+          propName: 'color',
+          knob: 'color',
+          defaultValue: 'neutral',
+        },
+        {
+          propName: 'size',
+          knob: 'radio',
+          options: ['sm', 'md', 'lg'],
+          defaultValue: 'md',
+        },
+      ]}
+      renderDemo={(props) => (
+        <Alert {...props}>This is a Joy UI Alert — check it out!</Alert>
+      )}
+    />
+  );
+}

docs/data/joy/components/alert/AlertVariants.js

@@ -0,0 +1,13 @@
+import Box from '@mui/joy/Box';
+import Alert from '@mui/joy/Alert';
+
+export default function AlertVariants() {
+  return (
+    <Box sx={{ display: 'flex', gap: 2, width: '100%', flexDirection: 'column' }}>
+      <Alert variant="solid">This is an Alert using the solid variant.</Alert>
+      <Alert variant="soft">This is an Alert using the soft variant.</Alert>
+      <Alert variant="outlined">This is an Alert using the outlined variant.</Alert>
+      <Alert variant="plain">This is an Alert using the plain variant.</Alert>
+    </Box>
+  );
+}

docs/data/joy/components/alert/AlertVariants.tsx

@@ -0,0 +1,13 @@
+import Box from '@mui/joy/Box';
+import Alert from '@mui/joy/Alert';
+
+export default function AlertVariants() {
+  return (
+    <Box sx={{ display: 'flex', gap: 2, width: '100%', flexDirection: 'column' }}>
+      <Alert variant="solid">This is an Alert using the solid variant.</Alert>
+      <Alert variant="soft">This is an Alert using the soft variant.</Alert>
+      <Alert variant="outlined">This is an Alert using the outlined variant.</Alert>
+      <Alert variant="plain">This is an Alert using the plain variant.</Alert>
+    </Box>
+  );
+}

docs/data/joy/components/alert/AlertVariants.tsx.preview

@@ -0,0 +1,4 @@
+<Alert variant="solid">This is an Alert using the solid variant.</Alert>
+<Alert variant="soft">This is an Alert using the soft variant.</Alert>
+<Alert variant="outlined">This is an Alert using the outlined variant.</Alert>
+<Alert variant="plain">This is an Alert using the plain variant.</Alert>

docs/data/joy/components/alert/AlertVariousStates.js

@@ -0,0 +1,45 @@
+import InfoIcon from '@mui/icons-material/Info';
+import WarningIcon from '@mui/icons-material/Warning';
+import ReportIcon from '@mui/icons-material/Report';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Alert from '@mui/joy/Alert';
+import IconButton from '@mui/joy/IconButton';
+import Typography from '@mui/joy/Typography';
+
+export default function AlertVariousStates() {
+  const items = [
+    { title: 'Success', color: 'success', icon: <CheckCircleIcon /> },
+    { title: 'Warning', color: 'warning', icon: <WarningIcon /> },
+    { title: 'Error', color: 'danger', icon: <ReportIcon /> },
+    { title: 'Neutral', color: 'neutral', icon: <InfoIcon /> },
+  ];
+
+  return (
+    <Box sx={{ display: 'flex', gap: 2, width: '100%', flexDirection: 'column' }}>
+      {items.map(({ title, color, icon }) => (
+        <Alert
+          key={title}
+          sx={{ alignItems: 'flex-start' }}
+          startDecorator={icon}
+          variant="soft"
+          color={color}
+          endDecorator={
+            <IconButton variant="soft" color={color}>
+              <CloseRoundedIcon />
+            </IconButton>
+          }
+        >
+          <div>
+            <div>{title}</div>
+            <Typography level="body-sm" color={color}>
+              This is a time-sensitive {title} Alert.
+            </Typography>
+          </div>
+        </Alert>
+      ))}
+    </Box>
+  );
+}

docs/data/joy/components/alert/AlertVariousStates.tsx

@@ -0,0 +1,49 @@
+import InfoIcon from '@mui/icons-material/Info';
+import WarningIcon from '@mui/icons-material/Warning';
+import ReportIcon from '@mui/icons-material/Report';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Alert from '@mui/joy/Alert';
+import IconButton from '@mui/joy/IconButton';
+import Typography from '@mui/joy/Typography';
+import { ColorPaletteProp } from '@mui/joy/styles';
+
+export default function AlertVariousStates() {
+  const items: {
+    title: string;
+    color: ColorPaletteProp;
+    icon: React.ReactElement<any>;
+  }[] = [
+    { title: 'Success', color: 'success', icon: <CheckCircleIcon /> },
+    { title: 'Warning', color: 'warning', icon: <WarningIcon /> },
+    { title: 'Error', color: 'danger', icon: <ReportIcon /> },
+    { title: 'Neutral', color: 'neutral', icon: <InfoIcon /> },
+  ];
+  return (
+    <Box sx={{ display: 'flex', gap: 2, width: '100%', flexDirection: 'column' }}>
+      {items.map(({ title, color, icon }) => (
+        <Alert
+          key={title}
+          sx={{ alignItems: 'flex-start' }}
+          startDecorator={icon}
+          variant="soft"
+          color={color}
+          endDecorator={
+            <IconButton variant="soft" color={color}>
+              <CloseRoundedIcon />
+            </IconButton>
+          }
+        >
+          <div>
+            <div>{title}</div>
+            <Typography level="body-sm" color={color}>
+              This is a time-sensitive {title} Alert.
+            </Typography>
+          </div>
+        </Alert>
+      ))}
+    </Box>
+  );
+}

docs/data/joy/components/alert/AlertWithDangerState.js

@@ -0,0 +1,66 @@
+import WarningIcon from '@mui/icons-material/Warning';
+import CloseIcon from '@mui/icons-material/Close';
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Alert from '@mui/joy/Alert';
+import IconButton from '@mui/joy/IconButton';
+import Button from '@mui/joy/Button';
+
+export default function AlertWithDangerState() {
+  return (
+    <Box sx={{ display: 'flex', gap: 2, width: '100%', flexDirection: 'column' }}>
+      <Alert
+        startDecorator={<WarningIcon />}
+        variant="soft"
+        color="danger"
+        endDecorator={
+          <React.Fragment>
+            <Button variant="soft" color="danger" sx={{ mr: 1 }}>
+              Undo
+            </Button>
+            <IconButton variant="soft" size="sm" color="danger">
+              <CloseIcon />
+            </IconButton>
+          </React.Fragment>
+        }
+      >
+        This file was successfully deleted
+      </Alert>
+      <Alert
+        startDecorator={<WarningIcon />}
+        variant="solid"
+        color="danger"
+        endDecorator={
+          <React.Fragment>
+            <Button variant="solid" color="danger" sx={{ mr: 1 }}>
+              Undo
+            </Button>
+            <IconButton variant="solid" size="sm" color="danger">
+              <CloseIcon />
+            </IconButton>
+          </React.Fragment>
+        }
+      >
+        This file was successfully deleted
+      </Alert>
+
+      <Alert
+        startDecorator={<WarningIcon />}
+        variant="outlined"
+        color="danger"
+        endDecorator={
+          <React.Fragment>
+            <Button variant="plain" color="danger" sx={{ mr: 1 }}>
+              Undo
+            </Button>
+            <IconButton variant="soft" size="sm" color="danger">
+              <CloseIcon />
+            </IconButton>
+          </React.Fragment>
+        }
+      >
+        This file was successfully deleted
+      </Alert>
+    </Box>
+  );
+}

docs/data/joy/components/alert/AlertWithDangerState.tsx

@@ -0,0 +1,66 @@
+import WarningIcon from '@mui/icons-material/Warning';
+import CloseIcon from '@mui/icons-material/Close';
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Alert from '@mui/joy/Alert';
+import IconButton from '@mui/joy/IconButton';
+import Button from '@mui/joy/Button';
+
+export default function AlertWithDangerState() {
+  return (
+    <Box sx={{ display: 'flex', gap: 2, width: '100%', flexDirection: 'column' }}>
+      <Alert
+        startDecorator={<WarningIcon />}
+        variant="soft"
+        color="danger"
+        endDecorator={
+          <React.Fragment>
+            <Button variant="soft" color="danger" sx={{ mr: 1 }}>
+              Undo
+            </Button>
+            <IconButton variant="soft" size="sm" color="danger">
+              <CloseIcon />
+            </IconButton>
+          </React.Fragment>
+        }
+      >
+        This file was successfully deleted
+      </Alert>
+      <Alert
+        startDecorator={<WarningIcon />}
+        variant="solid"
+        color="danger"
+        endDecorator={
+          <React.Fragment>
+            <Button variant="solid" color="danger" sx={{ mr: 1 }}>
+              Undo
+            </Button>
+            <IconButton variant="solid" size="sm" color="danger">
+              <CloseIcon />
+            </IconButton>
+          </React.Fragment>
+        }
+      >
+        This file was successfully deleted
+      </Alert>
+
+      <Alert
+        startDecorator={<WarningIcon />}
+        variant="outlined"
+        color="danger"
+        endDecorator={
+          <React.Fragment>
+            <Button variant="plain" color="danger" sx={{ mr: 1 }}>
+              Undo
+            </Button>
+            <IconButton variant="soft" size="sm" color="danger">
+              <CloseIcon />
+            </IconButton>
+          </React.Fragment>
+        }
+      >
+        This file was successfully deleted
+      </Alert>
+    </Box>
+  );
+}

docs/data/joy/components/alert/AlertWithDecorators.js

@@ -0,0 +1,38 @@
+import Alert from '@mui/joy/Alert';
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import IconButton from '@mui/joy/IconButton';
+import PlaylistAddCheckCircleRoundedIcon from '@mui/icons-material/PlaylistAddCheckCircleRounded';
+import AccountCircleRoundedIcon from '@mui/icons-material/AccountCircleRounded';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+
+export default function AlertWithDecorators() {
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, width: '100%' }}>
+      <Alert
+        variant="soft"
+        color="success"
+        startDecorator={<PlaylistAddCheckCircleRoundedIcon />}
+        endDecorator={
+          <Button size="sm" variant="solid" color="success">
+            Close
+          </Button>
+        }
+      >
+        Your message was sent successfully.
+      </Alert>
+      <Alert
+        variant="outlined"
+        color="neutral"
+        startDecorator={<AccountCircleRoundedIcon />}
+        endDecorator={
+          <IconButton variant="plain" size="sm" color="neutral">
+            <CloseRoundedIcon />
+          </IconButton>
+        }
+      >
+        Your account was updated.
+      </Alert>
+    </Box>
+  );
+}

docs/data/joy/components/alert/AlertWithDecorators.tsx

@@ -0,0 +1,38 @@
+import Alert from '@mui/joy/Alert';
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import IconButton from '@mui/joy/IconButton';
+import PlaylistAddCheckCircleRoundedIcon from '@mui/icons-material/PlaylistAddCheckCircleRounded';
+import AccountCircleRoundedIcon from '@mui/icons-material/AccountCircleRounded';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+
+export default function AlertWithDecorators() {
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, width: '100%' }}>
+      <Alert
+        variant="soft"
+        color="success"
+        startDecorator={<PlaylistAddCheckCircleRoundedIcon />}
+        endDecorator={
+          <Button size="sm" variant="solid" color="success">
+            Close
+          </Button>
+        }
+      >
+        Your message was sent successfully.
+      </Alert>
+      <Alert
+        variant="outlined"
+        color="neutral"
+        startDecorator={<AccountCircleRoundedIcon />}
+        endDecorator={
+          <IconButton variant="plain" size="sm" color="neutral">
+            <CloseRoundedIcon />
+          </IconButton>
+        }
+      >
+        Your account was updated.
+      </Alert>
+    </Box>
+  );
+}

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

@@ -0,0 +1,107 @@
+---
+productId: joy-ui
+title: React Alert component
+components: Alert
+githubLabel: 'scope: alert'
+waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/alert/
+---
+
+# Alert
+
+<p class="description">Alerts display brief messages for the user without interrupting their use of the app.</p>
+
+{{"component": "@mui/docs/ComponentLinkHeader"}}
+
+## Introduction
+
+The Alert component can be used to provide important and potentially time-sensitive information in a way that does not interfere with the user's tasks. (Source: [ARIA APG](https://www.w3.org/WAI/ARIA/apg/patterns/alert/).)
+
+{{"demo": "AlertUsage.js", "hideToolbar": true, "bg": "gradient"}}
+
+:::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](/joy-ui/react-modal/) if you need the behavior of a dialog.
+:::
+
+## Basics
+
+```jsx
+import Alert from '@mui/joy/Alert';
+```
+
+The Alert component wraps around its content, and stretches to fill its enclosing container, as shown below:
+
+{{"demo": "AlertBasic.js"}}
+
+## Customization
+
+### Variants
+
+The Alert component supports Joy UI's four [global variants](/joy-ui/main-features/global-variants/): `solid`, `soft` (default), `outlined`, and `plain`.
+
+{{"demo": "AlertVariants.js"}}
+
+:::info
+To learn how to add your own variants, check out [Themed components—Extend variants](/joy-ui/customization/themed-components/#extend-variants).
+Note that you lose the global variants when you add custom variants.
+:::
+
+### Sizes
+
+The Alert component comes in three sizes: `sm`, `md` (default), and `lg`:
+
+{{"demo": "AlertSizes.js"}}
+
+:::info
+To learn how to add custom sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes).
+:::
+
+### Colors
+
+Every palette included in the theme is available via the `color` prop.
+The demo below shows how the values for the `color` prop are affected by the global variants:
+
+{{"demo": "AlertColors.js"}}
+
+### Decorators
+
+Use the `startDecorator` and `endDecorator` props to append actions and icons to either side of the Alert:
+
+{{"demo": "AlertWithDecorators.js"}}
+
+### Inverted colors
+
+The Alert component supports Joy UI's [color inversion](/joy-ui/main-features/color-inversion/) by using `invertedColors` prop.
+
+{{"demo": "AlertInvertedColors.js"}}
+
+## Common examples
+
+### Various states
+
+{{"demo": "AlertVariousStates.js"}}
+
+### Danger alerts
+
+{{"demo": "AlertWithDangerState.js"}}
+
+## Accessibility
+
+Here are some factors to consider to ensure that your Alert is accessible:
+
+- Because alerts are not intended to interfere with the use of the app, your Alert component should _never_ affect the keyboard focus.
+- If an alert contains an action, that action must have a `tabindex` of `0` so it can be reached by keyboard-only users.
+- Essential alerts should not disappear automatically—[timed interactions](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-no-exceptions.html) can make your app inaccessible to users who need extra time to understand or locate the alert.
+- Alerts that occur too frequently can [inhibit the usability](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-postponed.html) of your app.
+- Dynamically rendered alerts are announced by screen readers; alerts that are already present on the page when it loads are _not_ announced.
+- Color does not add meaning to the UI for users who require assistive technology. You must ensure that any information conveyed through color is also denoted in other ways, such as within the text of the alert itself, or with additional hidden text that's read by screen readers.
+
+## Anatomy
+
+The Alert component is composed of a single root `<div>` element with its `role` set to `alert`:
+
+```html
+<div role="alert" class="MuiAlert-root">
+  <!-- Alert contents -->
+</div>
+```

docs/data/joy/components/aspect-ratio/BasicRatio.js

@@ -0,0 +1,12 @@
+import AspectRatio from '@mui/joy/AspectRatio';
+import Typography from '@mui/joy/Typography';
+
+export default function BasicRatio() {
+  return (
+    <AspectRatio sx={{ width: 300 }}>
+      <Typography level="h2" component="div">
+        16/9
+      </Typography>
+    </AspectRatio>
+  );
+}

docs/data/joy/components/aspect-ratio/BasicRatio.tsx

@@ -0,0 +1,12 @@
+import AspectRatio from '@mui/joy/AspectRatio';
+import Typography from '@mui/joy/Typography';
+
+export default function BasicRatio() {
+  return (
+    <AspectRatio sx={{ width: 300 }}>
+      <Typography level="h2" component="div">
+        16/9
+      </Typography>
+    </AspectRatio>
+  );
+}

docs/data/joy/components/aspect-ratio/BasicRatio.tsx.preview

@@ -0,0 +1,5 @@
+<AspectRatio sx={{ width: 300 }}>
+  <Typography level="h2" component="div">
+    16/9
+  </Typography>
+</AspectRatio>

docs/data/joy/components/aspect-ratio/CarouselRatio.js

@@ -0,0 +1,57 @@
+import AspectRatio from '@mui/joy/AspectRatio';
+import Box from '@mui/joy/Box';
+import Typography from '@mui/joy/Typography';
+import Card from '@mui/joy/Card';
+
+const data = [
+  {
+    src: 'https://images.unsplash.com/photo-1502657877623-f66bf489d236',
+    title: 'Night view',
+    description: '4.21M views',
+  },
+  {
+    src: 'https://images.unsplash.com/photo-1527549993586-dff825b37782',
+    title: 'Lake view',
+    description: '4.74M views',
+  },
+  {
+    src: 'https://images.unsplash.com/photo-1532614338840-ab30cf10ed36',
+    title: 'Mountain view',
+    description: '3.98M views',
+  },
+];
+
+export default function CarouselRatio() {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        gap: 1,
+        py: 1,
+        overflow: 'auto',
+        width: 343,
+        scrollSnapType: 'x mandatory',
+        '& > *': {
+          scrollSnapAlign: 'center',
+        },
+        '::-webkit-scrollbar': { display: 'none' },
+      }}
+    >
+      {data.map((item) => (
+        <Card orientation="horizontal" size="sm" key={item.title} variant="outlined">
+          <AspectRatio ratio="1" sx={{ minWidth: 60 }}>
+            <img
+              srcSet={`${item.src}?h=120&fit=crop&auto=format&dpr=2 2x`}
+              src={`${item.src}?h=120&fit=crop&auto=format`}
+              alt={item.title}
+            />
+          </AspectRatio>
+          <Box sx={{ whiteSpace: 'nowrap', mx: 1 }}>
+            <Typography level="title-md">{item.title}</Typography>
+            <Typography level="body-sm">{item.description}</Typography>
+          </Box>
+        </Card>
+      ))}
+    </Box>
+  );
+}

docs/data/joy/components/aspect-ratio/CarouselRatio.tsx

@@ -0,0 +1,57 @@
+import AspectRatio from '@mui/joy/AspectRatio';
+import Box from '@mui/joy/Box';
+import Typography from '@mui/joy/Typography';
+import Card from '@mui/joy/Card';
+
+const data = [
+  {
+    src: 'https://images.unsplash.com/photo-1502657877623-f66bf489d236',
+    title: 'Night view',
+    description: '4.21M views',
+  },
+  {
+    src: 'https://images.unsplash.com/photo-1527549993586-dff825b37782',
+    title: 'Lake view',
+    description: '4.74M views',
+  },
+  {
+    src: 'https://images.unsplash.com/photo-1532614338840-ab30cf10ed36',
+    title: 'Mountain view',
+    description: '3.98M views',
+  },
+];
+
+export default function CarouselRatio() {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        gap: 1,
+        py: 1,
+        overflow: 'auto',
+        width: 343,
+        scrollSnapType: 'x mandatory',
+        '& > *': {
+          scrollSnapAlign: 'center',
+        },
+        '::-webkit-scrollbar': { display: 'none' },
+      }}
+    >
+      {data.map((item) => (
+        <Card orientation="horizontal" size="sm" key={item.title} variant="outlined">
+          <AspectRatio ratio="1" sx={{ minWidth: 60 }}>
+            <img
+              srcSet={`${item.src}?h=120&fit=crop&auto=format&dpr=2 2x`}
+              src={`${item.src}?h=120&fit=crop&auto=format`}
+              alt={item.title}
+            />
+          </AspectRatio>
+          <Box sx={{ whiteSpace: 'nowrap', mx: 1 }}>
+            <Typography level="title-md">{item.title}</Typography>
+            <Typography level="body-sm">{item.description}</Typography>
+          </Box>
+        </Card>
+      ))}
+    </Box>
+  );
+}

docs/data/joy/components/aspect-ratio/CarouselRatio.tsx.preview

@@ -0,0 +1,15 @@
+{data.map((item) => (
+  <Card orientation="horizontal" size="sm" key={item.title} variant="outlined">
+    <AspectRatio ratio="1" sx={{ minWidth: 60 }}>
+      <img
+        srcSet={`${item.src}?h=120&fit=crop&auto=format&dpr=2 2x`}
+        src={`${item.src}?h=120&fit=crop&auto=format`}
+        alt={item.title}
+      />
+    </AspectRatio>
+    <Box sx={{ whiteSpace: 'nowrap', mx: 1 }}>
+      <Typography level="title-md">{item.title}</Typography>
+      <Typography level="body-sm">{item.description}</Typography>
+    </Box>
+  </Card>
+))}

docs/data/joy/components/aspect-ratio/CustomRatio.js

@@ -0,0 +1,16 @@
+import AspectRatio from '@mui/joy/AspectRatio';
+import Typography from '@mui/joy/Typography';
+
+export default function CustomRatio() {
+  return (
+    <AspectRatio
+      variant="outlined"
+      ratio="4/3"
+      sx={{ width: 300, bgcolor: 'background.level2', borderRadius: 'md' }}
+    >
+      <Typography level="h2" component="div">
+        4/3
+      </Typography>
+    </AspectRatio>
+  );
+}

docs/data/joy/components/aspect-ratio/CustomRatio.tsx

@@ -0,0 +1,16 @@
+import AspectRatio from '@mui/joy/AspectRatio';
+import Typography from '@mui/joy/Typography';
+
+export default function CustomRatio() {
+  return (
+    <AspectRatio
+      variant="outlined"
+      ratio="4/3"
+      sx={{ width: 300, bgcolor: 'background.level2', borderRadius: 'md' }}
+    >
+      <Typography level="h2" component="div">
+        4/3
+      </Typography>
+    </AspectRatio>
+  );
+}

docs/data/joy/components/aspect-ratio/CustomRatio.tsx.preview

@@ -0,0 +1,9 @@
+<AspectRatio
+  variant="outlined"
+  ratio="4/3"
+  sx={{ width: 300, bgcolor: 'background.level2', borderRadius: 'md' }}
+>
+  <Typography level="h2" component="div">
+    4/3
+  </Typography>
+</AspectRatio>

docs/data/joy/components/aspect-ratio/FlexAspectRatio.js

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import AspectRatio from '@mui/joy/AspectRatio';
+import Button from '@mui/joy/Button';
+import Card from '@mui/joy/Card';
+import CardContent from '@mui/joy/CardContent';
+import CardActions from '@mui/joy/CardActions';
+import Typography from '@mui/joy/Typography';
+import Stack from '@mui/joy/Stack';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import Switch from '@mui/joy/Switch';
+
+export default function FlexAspectRatio() {
+  const [flex, setFlex] = React.useState(false);
+  return (
+    <Stack spacing={2} sx={{ alignItems: 'center' }}>
+      <FormControl orientation="horizontal">
+        <FormLabel>Flex</FormLabel>
+        <Switch checked={flex} onChange={(event) => setFlex(event.target.checked)} />
+      </FormControl>
+      <Card
+        orientation="horizontal"
+        variant="outlined"
+        sx={{ boxShadow: 'none', resize: 'horizontal', overflow: 'auto' }}
+      >
+        <AspectRatio ratio="21/9" flex={flex} sx={{ flexBasis: 200 }}>
+          <Typography level="h1" component="div">
+            21 / 9
+          </Typography>
+        </AspectRatio>
+        <CardContent>
+          <Typography level="body-xs">20 APR 2023</Typography>
+          <Typography level="title-lg" component="div">
+            Widget Title
+          </Typography>
+          <Typography level="body-lg">
+            Lorem ipsum is placeholder text commonly used in the graphic.
+          </Typography>
+          <CardActions buttonFlex="none">
+            <Button variant="outlined" color="neutral" size="sm">
+              See details
+            </Button>
+            <Button variant="solid" color="neutral" size="sm">
+              Learn more
+            </Button>
+          </CardActions>
+        </CardContent>
+      </Card>
+    </Stack>
+  );
+}

docs/data/joy/components/aspect-ratio/FlexAspectRatio.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import AspectRatio from '@mui/joy/AspectRatio';
+import Button from '@mui/joy/Button';
+import Card from '@mui/joy/Card';
+import CardContent from '@mui/joy/CardContent';
+import CardActions from '@mui/joy/CardActions';
+import Typography from '@mui/joy/Typography';
+import Stack from '@mui/joy/Stack';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import Switch from '@mui/joy/Switch';
+
+export default function FlexAspectRatio() {
+  const [flex, setFlex] = React.useState(false);
+  return (
+    <Stack spacing={2} sx={{ alignItems: 'center' }}>
+      <FormControl orientation="horizontal">
+        <FormLabel>Flex</FormLabel>
+        <Switch checked={flex} onChange={(event) => setFlex(event.target.checked)} />
+      </FormControl>
+      <Card
+        orientation="horizontal"
+        variant="outlined"
+        sx={{ boxShadow: 'none', resize: 'horizontal', overflow: 'auto' }}
+      >
+        <AspectRatio ratio="21/9" flex={flex} sx={{ flexBasis: 200 }}>
+          <Typography level="h1" component="div">
+            21 / 9
+          </Typography>
+        </AspectRatio>
+        <CardContent>
+          <Typography level="body-xs">20 APR 2023</Typography>
+          <Typography level="title-lg" component="div">
+            Widget Title
+          </Typography>
+          <Typography level="body-lg">
+            Lorem ipsum is placeholder text commonly used in the graphic.
+          </Typography>
+          <CardActions buttonFlex="none">
+            <Button variant="outlined" color="neutral" size="sm">
+              See details
+            </Button>
+            <Button variant="solid" color="neutral" size="sm">
+              Learn more
+            </Button>
+          </CardActions>
+        </CardContent>
+      </Card>
+    </Stack>
+  );
+}

docs/data/joy/components/aspect-ratio/FlexRowRatio.js

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import AspectRatio from '@mui/joy/AspectRatio';
+import Box from '@mui/joy/Box';
+import Card from '@mui/joy/Card';
+import Typography from '@mui/joy/Typography';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import Input from '@mui/joy/Input';
+
+export default function FlexRowRatio() {
+  const [flexBasis, setFlexBasis] = React.useState(200);
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+      <Card
+        variant="outlined"
+        size="sm"
+        orientation="horizontal"
+        sx={{ gap: 2, minWidth: 300 }}
+      >
+        <AspectRatio
+          sx={[
+            { overflow: 'auto' },
+            flexBasis ? { flexBasis: `${flexBasis}px` } : { flexBasis: null },
+          ]}
+        >
+          <img
+            src="https://images.unsplash.com/photo-1502657877623-f66bf489d236?auto=format&fit=crop&w=800"
+            srcSet="https://images.unsplash.com/photo-1502657877623-f66bf489d236?auto=format&fit=crop&w=800&dpr=2 2x"
+            alt=""
+          />
+        </AspectRatio>
+        <div>
+          <Typography level="title-sm">Yosemite National Park</Typography>
+          <Typography level="body-sm">California, USA</Typography>
+        </div>
+      </Card>
+      <br />
+      <FormControl sx={{ mx: 'auto', width: '100%' }}>
+        <FormLabel>flexBasis</FormLabel>
+        <Input
+          variant="outlined"
+          type="number"
+          placeholder="number"
+          value={flexBasis}
+          endDecorator="px"
+          onChange={(event) => setFlexBasis(event.target.valueAsNumber)}
+        />
+      </FormControl>
+    </Box>
+  );
+}

docs/data/joy/components/aspect-ratio/FlexRowRatio.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import AspectRatio from '@mui/joy/AspectRatio';
+import Box from '@mui/joy/Box';
+import Card from '@mui/joy/Card';
+import Typography from '@mui/joy/Typography';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import Input from '@mui/joy/Input';
+
+export default function FlexRowRatio() {
+  const [flexBasis, setFlexBasis] = React.useState(200);
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+      <Card
+        variant="outlined"
+        size="sm"
+        orientation="horizontal"
+        sx={{ gap: 2, minWidth: 300 }}
+      >
+        <AspectRatio
+          sx={[
+            { overflow: 'auto' },
+            flexBasis ? { flexBasis: `${flexBasis}px` } : { flexBasis: null },
+          ]}
+        >
+          <img
+            src="https://images.unsplash.com/photo-1502657877623-f66bf489d236?auto=format&fit=crop&w=800"
+            srcSet="https://images.unsplash.com/photo-1502657877623-f66bf489d236?auto=format&fit=crop&w=800&dpr=2 2x"
+            alt=""
+          />
+        </AspectRatio>
+        <div>
+          <Typography level="title-sm">Yosemite National Park</Typography>
+          <Typography level="body-sm">California, USA</Typography>
+        </div>
+      </Card>
+      <br />
+      <FormControl sx={{ mx: 'auto', width: '100%' }}>
+        <FormLabel>flexBasis</FormLabel>
+        <Input
+          variant="outlined"
+          type="number"
+          placeholder="number"
+          value={flexBasis}
+          endDecorator="px"
+          onChange={(event) => setFlexBasis(event.target.valueAsNumber)}
+        />
+      </FormControl>
+    </Box>
+  );
+}

docs/data/joy/components/aspect-ratio/IconWrapper.js

@@ -0,0 +1,36 @@
+import AspectRatio from '@mui/joy/AspectRatio';
+import Stack from '@mui/joy/Stack';
+import Favorite from '@mui/icons-material/Favorite';
+
+export default function IconWrapper() {
+  return (
+    <Stack direction="row" spacing={2}>
+      <AspectRatio ratio="1" variant="solid" color="primary" sx={{ minWidth: 40 }}>
+        {/* an extra div is required to make the icon center */}
+        <div>
+          <Favorite />
+        </div>
+      </AspectRatio>
+      <AspectRatio
+        ratio="1"
+        variant="outlined"
+        color="success"
+        sx={{ minWidth: 40, borderRadius: 'sm' }}
+      >
+        <div>
+          <Favorite />
+        </div>
+      </AspectRatio>
+      <AspectRatio
+        ratio="1"
+        variant="soft"
+        color="danger"
+        sx={{ minWidth: 40, borderRadius: '50%' }}
+      >
+        <div>
+          <Favorite />
+        </div>
+      </AspectRatio>
+    </Stack>
+  );
+}

docs/data/joy/components/aspect-ratio/IconWrapper.tsx

@@ -0,0 +1,36 @@
+import AspectRatio from '@mui/joy/AspectRatio';
+import Stack from '@mui/joy/Stack';
+import Favorite from '@mui/icons-material/Favorite';
+
+export default function IconWrapper() {
+  return (
+    <Stack direction="row" spacing={2}>
+      <AspectRatio ratio="1" variant="solid" color="primary" sx={{ minWidth: 40 }}>
+        {/* an extra div is required to make the icon center */}
+        <div>
+          <Favorite />
+        </div>
+      </AspectRatio>
+      <AspectRatio
+        ratio="1"
+        variant="outlined"
+        color="success"
+        sx={{ minWidth: 40, borderRadius: 'sm' }}
+      >
+        <div>
+          <Favorite />
+        </div>
+      </AspectRatio>
+      <AspectRatio
+        ratio="1"
+        variant="soft"
+        color="danger"
+        sx={{ minWidth: 40, borderRadius: '50%' }}
+      >
+        <div>
+          <Favorite />
+        </div>
+      </AspectRatio>
+    </Stack>
+  );
+}

docs/data/joy/components/aspect-ratio/ListStackRatio.js

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import AspectRatio from '@mui/joy/AspectRatio';
+import Typography from '@mui/joy/Typography';
+import Card from '@mui/joy/Card';
+import List from '@mui/joy/List';
+import ListDivider from '@mui/joy/ListDivider';
+import ListItem from '@mui/joy/ListItem';
+import ListItemContent from '@mui/joy/ListItemContent';
+import ListItemButton from '@mui/joy/ListItemButton';
+
+const data = [
+  {
+    src: 'https://images.unsplash.com/photo-1502657877623-f66bf489d236',
+    title: 'Night view',
+    description: '4.21M views',
+  },
+  {
+    src: 'https://images.unsplash.com/photo-1527549993586-dff825b37782',
+    title: 'Lake view',
+    description: '4.74M views',
+  },
+  {
+    src: 'https://images.unsplash.com/photo-1532614338840-ab30cf10ed36',
+    title: 'Mountain view',
+    description: '3.98M views',
+  },
+];
+
+export default function ListStackRatio() {
+  return (
+    <Card variant="outlined" sx={{ width: 300, p: 0 }}>
+      <List sx={{ py: 'var(--ListDivider-gap)' }}>
+        {data.map((item, index) => (
+          <React.Fragment key={item.title}>
+            <ListItem>
+              <ListItemButton sx={{ gap: 2 }}>
+                <AspectRatio sx={{ flexBasis: 120 }}>
+                  <img
+                    srcSet={`${item.src}?w=120&fit=crop&auto=format&dpr=2 2x`}
+                    src={`${item.src}?w=120&fit=crop&auto=format`}
+                    alt={item.title}
+                  />
+                </AspectRatio>
+                <ListItemContent>
+                  <Typography sx={{ fontWeight: 'md' }}>{item.title}</Typography>
+                  <Typography level="body-sm">{item.description}</Typography>
+                </ListItemContent>
+              </ListItemButton>
+            </ListItem>
+            {index !== data.length - 1 && <ListDivider />}
+          </React.Fragment>
+        ))}
+      </List>
+    </Card>
+  );
+}

docs/data/joy/components/aspect-ratio/ListStackRatio.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import AspectRatio from '@mui/joy/AspectRatio';
+import Typography from '@mui/joy/Typography';
+import Card from '@mui/joy/Card';
+import List from '@mui/joy/List';
+import ListDivider from '@mui/joy/ListDivider';
+import ListItem from '@mui/joy/ListItem';
+import ListItemContent from '@mui/joy/ListItemContent';
+import ListItemButton from '@mui/joy/ListItemButton';
+
+const data = [
+  {
+    src: 'https://images.unsplash.com/photo-1502657877623-f66bf489d236',
+    title: 'Night view',
+    description: '4.21M views',
+  },
+  {
+    src: 'https://images.unsplash.com/photo-1527549993586-dff825b37782',
+    title: 'Lake view',
+    description: '4.74M views',
+  },
+  {
+    src: 'https://images.unsplash.com/photo-1532614338840-ab30cf10ed36',
+    title: 'Mountain view',
+    description: '3.98M views',
+  },
+];
+
+export default function ListStackRatio() {
+  return (
+    <Card variant="outlined" sx={{ width: 300, p: 0 }}>
+      <List sx={{ py: 'var(--ListDivider-gap)' }}>
+        {data.map((item, index) => (
+          <React.Fragment key={item.title}>
+            <ListItem>
+              <ListItemButton sx={{ gap: 2 }}>
+                <AspectRatio sx={{ flexBasis: 120 }}>
+                  <img
+                    srcSet={`${item.src}?w=120&fit=crop&auto=format&dpr=2 2x`}
+                    src={`${item.src}?w=120&fit=crop&auto=format`}
+                    alt={item.title}
+                  />
+                </AspectRatio>
+                <ListItemContent>
+                  <Typography sx={{ fontWeight: 'md' }}>{item.title}</Typography>
+                  <Typography level="body-sm">{item.description}</Typography>
+                </ListItemContent>
+              </ListItemButton>
+            </ListItem>
+            {index !== data.length - 1 && <ListDivider />}
+          </React.Fragment>
+        ))}
+      </List>
+    </Card>
+  );
+}

docs/data/joy/components/aspect-ratio/MediaRatio.js

@@ -0,0 +1,16 @@
+import AspectRatio from '@mui/joy/AspectRatio';
+import Box from '@mui/joy/Box';
+
+export default function MediaRatio() {
+  return (
+    <Box sx={{ width: 300, borderRadius: 'sm', p: 1 }}>
+      <AspectRatio objectFit="contain">
+        <img
+          src="https://images.unsplash.com/photo-1502657877623-f66bf489d236?auto=format&fit=crop&w=800"
+          srcSet="https://images.unsplash.com/photo-1502657877623-f66bf489d236?auto=format&fit=crop&w=800&dpr=2 2x"
+          alt="A beautiful landscape."
+        />
+      </AspectRatio>
+    </Box>
+  );
+}

docs/data/joy/components/aspect-ratio/MediaRatio.tsx

@@ -0,0 +1,16 @@
+import AspectRatio from '@mui/joy/AspectRatio';
+import Box from '@mui/joy/Box';
+
+export default function MediaRatio() {
+  return (
+    <Box sx={{ width: 300, borderRadius: 'sm', p: 1 }}>
+      <AspectRatio objectFit="contain">
+        <img
+          src="https://images.unsplash.com/photo-1502657877623-f66bf489d236?auto=format&fit=crop&w=800"
+          srcSet="https://images.unsplash.com/photo-1502657877623-f66bf489d236?auto=format&fit=crop&w=800&dpr=2 2x"
+          alt="A beautiful landscape."
+        />
+      </AspectRatio>
+    </Box>
+  );
+}

docs/data/joy/components/aspect-ratio/MediaRatio.tsx.preview

@@ -0,0 +1,7 @@
+<AspectRatio objectFit="contain">
+  <img
+    src="https://images.unsplash.com/photo-1502657877623-f66bf489d236?auto=format&fit=crop&w=800"
+    srcSet="https://images.unsplash.com/photo-1502657877623-f66bf489d236?auto=format&fit=crop&w=800&dpr=2 2x"
+    alt="A beautiful landscape."
+  />
+</AspectRatio>

docs/data/joy/components/aspect-ratio/MinMaxRatio.js

@@ -0,0 +1,16 @@
+import AspectRatio from '@mui/joy/AspectRatio';
+import Box from '@mui/joy/Box';
+
+export default function MinMaxRatio() {
+  return (
+    <Box sx={{ width: 300, resize: 'horizontal', overflow: 'auto', p: 1 }}>
+      <AspectRatio minHeight={120} maxHeight={200}>
+        <img
+          src="https://images.unsplash.com/photo-1502657877623-f66bf489d236?auto=format&fit=crop&w=800"
+          srcSet="https://images.unsplash.com/photo-1502657877623-f66bf489d236?auto=format&fit=crop&w=800&dpr=2 2x"
+          alt=""
+        />
+      </AspectRatio>
+    </Box>
+  );
+}

docs/data/joy/components/aspect-ratio/MinMaxRatio.tsx

@@ -0,0 +1,16 @@
+import AspectRatio from '@mui/joy/AspectRatio';
+import Box from '@mui/joy/Box';
+
+export default function MinMaxRatio() {
+  return (
+    <Box sx={{ width: 300, resize: 'horizontal', overflow: 'auto', p: 1 }}>
+      <AspectRatio minHeight={120} maxHeight={200}>
+        <img
+          src="https://images.unsplash.com/photo-1502657877623-f66bf489d236?auto=format&fit=crop&w=800"
+          srcSet="https://images.unsplash.com/photo-1502657877623-f66bf489d236?auto=format&fit=crop&w=800&dpr=2 2x"
+          alt=""
+        />
+      </AspectRatio>
+    </Box>
+  );
+}

docs/data/joy/components/aspect-ratio/MinMaxRatio.tsx.preview

@@ -0,0 +1,7 @@
+<AspectRatio minHeight={120} maxHeight={200}>
+  <img
+    src="https://images.unsplash.com/photo-1502657877623-f66bf489d236?auto=format&fit=crop&w=800"
+    srcSet="https://images.unsplash.com/photo-1502657877623-f66bf489d236?auto=format&fit=crop&w=800&dpr=2 2x"
+    alt=""
+  />
+</AspectRatio>

docs/data/joy/components/aspect-ratio/PlaceholderAspectRatio.js

@@ -0,0 +1,20 @@
+import AspectRatio from '@mui/joy/AspectRatio';
+import Card from '@mui/joy/Card';
+import Typography from '@mui/joy/Typography';
+import ImageIcon from '@mui/icons-material/Image';
+
+export default function PlaceholderAspectRatio() {
+  return (
+    <Card variant="outlined" sx={{ width: 300 }}>
+      <AspectRatio>
+        <div>
+          <ImageIcon sx={{ fontSize: '3rem', opacity: 0.2 }} />
+        </div>
+      </AspectRatio>
+      <div>
+        <Typography level="title-md">Title</Typography>
+        <Typography level="body-sm">Description of the card.</Typography>
+      </div>
+    </Card>
+  );
+}

docs/data/joy/components/aspect-ratio/PlaceholderAspectRatio.tsx

@@ -0,0 +1,20 @@
+import AspectRatio from '@mui/joy/AspectRatio';
+import Card from '@mui/joy/Card';
+import Typography from '@mui/joy/Typography';
+import ImageIcon from '@mui/icons-material/Image';
+
+export default function PlaceholderAspectRatio() {
+  return (
+    <Card variant="outlined" sx={{ width: 300 }}>
+      <AspectRatio>
+        <div>
+          <ImageIcon sx={{ fontSize: '3rem', opacity: 0.2 }} />
+        </div>
+      </AspectRatio>
+      <div>
+        <Typography level="title-md">Title</Typography>
+        <Typography level="body-sm">Description of the card.</Typography>
+      </div>
+    </Card>
+  );
+}

docs/data/joy/components/aspect-ratio/PlaceholderAspectRatio.tsx.preview

@@ -0,0 +1,11 @@
+<Card variant="outlined" sx={{ width: 300 }}>
+  <AspectRatio>
+    <div>
+      <ImageIcon sx={{ fontSize: '3rem', opacity: 0.2 }} />
+    </div>
+  </AspectRatio>
+  <div>
+    <Typography level="title-md">Title</Typography>
+    <Typography level="body-sm">Description of the card.</Typography>
+  </div>
+</Card>

docs/data/joy/components/aspect-ratio/VariantsRatio.js

@@ -0,0 +1,38 @@
+import AspectRatio from '@mui/joy/AspectRatio';
+import Grid from '@mui/joy/Grid';
+import Typography from '@mui/joy/Typography';
+
+export default function VariantsRatio() {
+  return (
+    <Grid container spacing={2} sx={{ width: '100%' }}>
+      <Grid size={{ xs: 6, md: 'grow' }}>
+        <AspectRatio variant="solid">
+          <Typography level="inherit" sx={{ fontWeight: 'lg' }}>
+            Solid
+          </Typography>
+        </AspectRatio>
+      </Grid>
+      <Grid size={{ xs: 6, md: 'grow' }}>
+        <AspectRatio variant="soft">
+          <Typography level="inherit" sx={{ fontWeight: 'lg' }}>
+            Soft
+          </Typography>
+        </AspectRatio>
+      </Grid>
+      <Grid size={{ xs: 6, md: 'grow' }}>
+        <AspectRatio variant="outlined">
+          <Typography level="inherit" sx={{ fontWeight: 'lg' }}>
+            Outlined
+          </Typography>
+        </AspectRatio>
+      </Grid>
+      <Grid size={{ xs: 6, md: 'grow' }}>
+        <AspectRatio variant="plain">
+          <Typography level="inherit" sx={{ fontWeight: 'lg' }}>
+            Plain
+          </Typography>
+        </AspectRatio>
+      </Grid>
+    </Grid>
+  );
+}

docs/data/joy/components/aspect-ratio/VariantsRatio.tsx

@@ -0,0 +1,38 @@
+import AspectRatio from '@mui/joy/AspectRatio';
+import Grid from '@mui/joy/Grid';
+import Typography from '@mui/joy/Typography';
+
+export default function VariantsRatio() {
+  return (
+    <Grid container spacing={2} sx={{ width: '100%' }}>
+      <Grid size={{ xs: 6, md: 'grow' }}>
+        <AspectRatio variant="solid">
+          <Typography level="inherit" sx={{ fontWeight: 'lg' }}>
+            Solid
+          </Typography>
+        </AspectRatio>
+      </Grid>
+      <Grid size={{ xs: 6, md: 'grow' }}>
+        <AspectRatio variant="soft">
+          <Typography level="inherit" sx={{ fontWeight: 'lg' }}>
+            Soft
+          </Typography>
+        </AspectRatio>
+      </Grid>
+      <Grid size={{ xs: 6, md: 'grow' }}>
+        <AspectRatio variant="outlined">
+          <Typography level="inherit" sx={{ fontWeight: 'lg' }}>
+            Outlined
+          </Typography>
+        </AspectRatio>
+      </Grid>
+      <Grid size={{ xs: 6, md: 'grow' }}>
+        <AspectRatio variant="plain">
+          <Typography level="inherit" sx={{ fontWeight: 'lg' }}>
+            Plain
+          </Typography>
+        </AspectRatio>
+      </Grid>
+    </Grid>
+  );
+}

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

@@ -0,0 +1,141 @@
+---
+productId: joy-ui
+title: React Aspect Ratio component
+components: AspectRatio
+---
+
+# Aspect Ratio
+
+<p class="description">The Aspect Ratio component resizes its contents to match the desired ratio.</p>
+
+{{"component": "@mui/docs/ComponentLinkHeader"}}
+
+## Introduction
+
+Aspect Ratio is a wrapper component for quickly resizing content to conform to your preferred ratio of width to height.
+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/Reference/Properties/aspect-ratio) does exist, and we plan to implement it in Joy UI soon.
+:::
+
+## Basics
+
+```jsx
+import AspectRatio from '@mui/joy/AspectRatio';
+```
+
+The Aspect Ratio component wraps around the content that it resizes.
+The element to be resized must be the first direct child.
+The default ratio is `16/9`.
+
+{{"demo": "BasicRatio.js"}}
+
+## Customization
+
+### Variants
+
+The Aspect Ratio component supports Joy UI's four [global variants](/joy-ui/main-features/global-variants/): `solid`, `soft` (default), `outlined`, and `plain`.
+
+{{"demo": "VariantsRatio.js"}}
+
+:::info
+To learn how to add your own variants, check out [Themed components—Extend variants](/joy-ui/customization/themed-components/#extend-variants).
+Note that you lose the global variants when you add custom variants.
+:::
+
+### Ratio
+
+Use the `ratio` prop to change the aspect ratio, following the pattern `width/height`.
+For example, the demo below uses a ratio of `4/3`, which is a common alternative to the default `16/9`:
+
+{{"demo": "CustomRatio.js"}}
+
+:::info
+The `ratio` prop uses the [CSS `calc()`](https://developer.mozilla.org/en-US/docs/Web/CSS/calc) function under the hood.
+:::
+
+### Object fit
+
+When the content inside the Aspect Ratio component is an image or a video, you can use the `objectFit` prop to control how it's resized.
+
+This prop gives you access to all of the values associated with the CSS `object-fit` property: `cover` (default), `contain`, `fill`, `scaleDown`, `initial`, `inherit`, and `none`.
+
+{{"demo": "MediaRatio.js"}}
+
+### Media placeholder
+
+Use a `<div>`, or a [Box](/system/react-box/) component paired with an icon, as a fallback when there is no media content provided:
+
+{{"demo": "PlaceholderAspectRatio.js"}}
+
+### Minimum and maximum height
+
+Use the `minHeight` and `maxHeight` props to set the lower and upper bound for the height of the content.
+This is useful when the Aspect Ratio component wraps dynamic-width content, as shown in the demo below:
+
+{{"demo": "MinMaxRatio.js"}}
+
+## Using inside a flex row
+
+When the Aspect Ratio component is a child of a flexbox `row` container, use `flex-basis` to set the ideal width of the content:
+
+{{"demo": "FlexRowRatio.js"}}
+
+By default, the Aspect Ratio component will retain the provided aspect ratio. If you want the Aspect Ratio component to fill the vertical space, set the `flex` prop to `true`:
+
+{{"demo": "FlexAspectRatio.js"}}
+
+## Using with Next.js Image
+
+The Aspect Ratio component can be used with a [Next.js Image](https://nextjs.org/docs/app/building-your-application/optimizing/images) component as a child.
+The Image should always include the `layout="fill"` property—otherwise it requires `height` and `width` values, which would defeat the purpose of the Aspect Ratio component.
+
+```js
+import Image from 'next/image';
+import AspectRatio from '@mui/joy/AspectRatio';
+import mountains from '../public/mountains.jpg';
+
+function App() {
+  return (
+    <AspectRatio variant="outlined" ratio="1" objectFit="cover">
+      {/* only layout="fill" makes sense for using with AspectRatio */}
+      <Image alt="Mountains" src={mountains} layout="fill" placeholder="blur" />
+    </AspectRatio>
+  );
+}
+```
+
+## Using with an icon
+
+The Aspect Ratio component can be a handy tool for creating a square container for an icon.
+
+{{"demo": "IconWrapper.js"}}
+
+## Common examples
+
+### Mobile carousel
+
+In designs like this, ensure to assign a `minWidth` value to prevent the Aspect Ratio component from shrinking.
+
+{{"demo": "CarouselRatio.js"}}
+
+### List stack
+
+This is a simple illustration of how to use Aspect Ratio with list components:
+
+{{"demo": "ListStackRatio.js"}}
+
+## Anatomy
+
+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="MuiAspectRatio-root">
+  <div class="MuiAspectRatio-content">
+    <some-element data-first-child>
+      <!-- Aspect Ratio contents -->
+    </some-element>
+  </div>
+</div>
+```

docs/data/joy/components/autocomplete/Asynchronous.js

@@ -0,0 +1,122 @@
+import * as React from 'react';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import Autocomplete from '@mui/joy/Autocomplete';
+import CircularProgress from '@mui/joy/CircularProgress';
+
+function sleep(duration) {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve();
+    }, duration);
+  });
+}
+
+export default function Asynchronous() {
+  const [open, setOpen] = React.useState(false);
+  const [options, setOptions] = React.useState([]);
+  const loading = open && options.length === 0;
+
+  React.useEffect(() => {
+    let active = true;
+
+    if (!loading) {
+      return undefined;
+    }
+
+    (async () => {
+      await sleep(1e3); // For demo purposes.
+
+      if (active) {
+        setOptions([...topFilms]);
+      }
+    })();
+
+    return () => {
+      active = false;
+    };
+  }, [loading]);
+
+  React.useEffect(() => {
+    if (!open) {
+      setOptions([]);
+    }
+  }, [open]);
+
+  return (
+    <FormControl id="asynchronous-demo">
+      <FormLabel>Asynchronous</FormLabel>
+      <Autocomplete
+        sx={{ width: 300 }}
+        placeholder="Asynchronous"
+        open={open}
+        onOpen={() => {
+          setOpen(true);
+        }}
+        onClose={() => {
+          setOpen(false);
+        }}
+        isOptionEqualToValue={(option, value) => option.title === value.title}
+        getOptionLabel={(option) => option.title}
+        options={options}
+        loading={loading}
+        endDecorator={
+          loading ? (
+            <CircularProgress size="sm" sx={{ bgcolor: 'background.surface' }} />
+          ) : null
+        }
+      />
+    </FormControl>
+  );
+}
+
+// Top films as rated by IMDb users. http://www.imdb.com/chart/top
+const topFilms = [
+  { title: 'The Shawshank Redemption', year: 1994 },
+  { title: 'The Godfather', year: 1972 },
+  { title: 'The Godfather: Part II', year: 1974 },
+  { title: 'The Dark Knight', year: 2008 },
+  { title: '12 Angry Men', year: 1957 },
+  { title: "Schindler's List", year: 1993 },
+  { title: 'Pulp Fiction', year: 1994 },
+  {
+    title: 'The Lord of the Rings: The Return of the King',
+    year: 2003,
+  },
+  { title: 'The Good, the Bad and the Ugly', year: 1966 },
+  { title: 'Fight Club', year: 1999 },
+  {
+    title: 'The Lord of the Rings: The Fellowship of the Ring',
+    year: 2001,
+  },
+  {
+    title: 'Star Wars: Episode V - The Empire Strikes Back',
+    year: 1980,
+  },
+  { title: 'Forrest Gump', year: 1994 },
+  { title: 'Inception', year: 2010 },
+  {
+    title: 'The Lord of the Rings: The Two Towers',
+    year: 2002,
+  },
+  { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
+  { title: 'Goodfellas', year: 1990 },
+  { title: 'The Matrix', year: 1999 },
+  { title: 'Seven Samurai', year: 1954 },
+  {
+    title: 'Star Wars: Episode IV - A New Hope',
+    year: 1977,
+  },
+  { title: 'City of God', year: 2002 },
+  { title: 'Se7en', year: 1995 },
+  { title: 'The Silence of the Lambs', year: 1991 },
+  { title: "It's a Wonderful Life", year: 1946 },
+  { title: 'Life Is Beautiful', year: 1997 },
+  { title: 'The Usual Suspects', year: 1995 },
+  { title: 'Léon: The Professional', year: 1994 },
+  { title: 'Spirited Away', year: 2001 },
+  { title: 'Saving Private Ryan', year: 1998 },
+  { title: 'Once Upon a Time in the West', year: 1968 },
+  { title: 'American History X', year: 1998 },
+  { title: 'Interstellar', year: 2014 },
+];

docs/data/joy/components/autocomplete/Asynchronous.tsx

@@ -0,0 +1,122 @@
+import * as React from 'react';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import Autocomplete from '@mui/joy/Autocomplete';
+import CircularProgress from '@mui/joy/CircularProgress';
+
+function sleep(duration: number): Promise<void> {
+  return new Promise<void>((resolve) => {
+    setTimeout(() => {
+      resolve();
+    }, duration);
+  });
+}
+
+export default function Asynchronous() {
+  const [open, setOpen] = React.useState(false);
+  const [options, setOptions] = React.useState<typeof topFilms>([]);
+  const loading = open && options.length === 0;
+
+  React.useEffect(() => {
+    let active = true;
+
+    if (!loading) {
+      return undefined;
+    }
+
+    (async () => {
+      await sleep(1e3); // For demo purposes.
+
+      if (active) {
+        setOptions([...topFilms]);
+      }
+    })();
+
+    return () => {
+      active = false;
+    };
+  }, [loading]);
+
+  React.useEffect(() => {
+    if (!open) {
+      setOptions([]);
+    }
+  }, [open]);
+
+  return (
+    <FormControl id="asynchronous-demo">
+      <FormLabel>Asynchronous</FormLabel>
+      <Autocomplete
+        sx={{ width: 300 }}
+        placeholder="Asynchronous"
+        open={open}
+        onOpen={() => {
+          setOpen(true);
+        }}
+        onClose={() => {
+          setOpen(false);
+        }}
+        isOptionEqualToValue={(option, value) => option.title === value.title}
+        getOptionLabel={(option) => option.title}
+        options={options}
+        loading={loading}
+        endDecorator={
+          loading ? (
+            <CircularProgress size="sm" sx={{ bgcolor: 'background.surface' }} />
+          ) : null
+        }
+      />
+    </FormControl>
+  );
+}
+
+// Top films as rated by IMDb users. http://www.imdb.com/chart/top
+const topFilms = [
+  { title: 'The Shawshank Redemption', year: 1994 },
+  { title: 'The Godfather', year: 1972 },
+  { title: 'The Godfather: Part II', year: 1974 },
+  { title: 'The Dark Knight', year: 2008 },
+  { title: '12 Angry Men', year: 1957 },
+  { title: "Schindler's List", year: 1993 },
+  { title: 'Pulp Fiction', year: 1994 },
+  {
+    title: 'The Lord of the Rings: The Return of the King',
+    year: 2003,
+  },
+  { title: 'The Good, the Bad and the Ugly', year: 1966 },
+  { title: 'Fight Club', year: 1999 },
+  {
+    title: 'The Lord of the Rings: The Fellowship of the Ring',
+    year: 2001,
+  },
+  {
+    title: 'Star Wars: Episode V - The Empire Strikes Back',
+    year: 1980,
+  },
+  { title: 'Forrest Gump', year: 1994 },
+  { title: 'Inception', year: 2010 },
+  {
+    title: 'The Lord of the Rings: The Two Towers',
+    year: 2002,
+  },
+  { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
+  { title: 'Goodfellas', year: 1990 },
+  { title: 'The Matrix', year: 1999 },
+  { title: 'Seven Samurai', year: 1954 },
+  {
+    title: 'Star Wars: Episode IV - A New Hope',
+    year: 1977,
+  },
+  { title: 'City of God', year: 2002 },
+  { title: 'Se7en', year: 1995 },
+  { title: 'The Silence of the Lambs', year: 1991 },
+  { title: "It's a Wonderful Life", year: 1946 },
+  { title: 'Life Is Beautiful', year: 1997 },
+  { title: 'The Usual Suspects', year: 1995 },
+  { title: 'Léon: The Professional', year: 1994 },
+  { title: 'Spirited Away', year: 2001 },
+  { title: 'Saving Private Ryan', year: 1998 },
+  { title: 'Once Upon a Time in the West', year: 1968 },
+  { title: 'American History X', year: 1998 },
+  { title: 'Interstellar', year: 2014 },
+];

docs/data/joy/components/autocomplete/AutocompleteDecorators.js

@@ -0,0 +1,150 @@
+import Autocomplete from '@mui/joy/Autocomplete';
+import Stack from '@mui/joy/Stack';
+import LiveTv from '@mui/icons-material/LiveTv';
+
+export default function AutocompleteDecorators() {
+  return (
+    <Stack spacing={2}>
+      <Autocomplete
+        startDecorator={<LiveTv />}
+        placeholder="Decorators"
+        options={top100Films}
+      />
+      <Autocomplete
+        multiple
+        startDecorator={<LiveTv />}
+        placeholder="Decorators"
+        options={top100Films}
+        defaultValue={[top100Films[0]]}
+      />
+    </Stack>
+  );
+}
+
+// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
+const top100Films = [
+  { label: 'The Shawshank Redemption', year: 1994 },
+  { label: 'The Godfather', year: 1972 },
+  { label: 'The Godfather: Part II', year: 1974 },
+  { label: 'The Dark Knight', year: 2008 },
+  { label: '12 Angry Men', year: 1957 },
+  { label: "Schindler's List", year: 1993 },
+  { label: 'Pulp Fiction', year: 1994 },
+  {
+    label: 'The Lord of the Rings: The Return of the King',
+    year: 2003,
+  },
+  { label: 'The Good, the Bad and the Ugly', year: 1966 },
+  { label: 'Fight Club', year: 1999 },
+  {
+    label: 'The Lord of the Rings: The Fellowship of the Ring',
+    year: 2001,
+  },
+  {
+    label: 'Star Wars: Episode V - The Empire Strikes Back',
+    year: 1980,
+  },
+  { label: 'Forrest Gump', year: 1994 },
+  { label: 'Inception', year: 2010 },
+  {
+    label: 'The Lord of the Rings: The Two Towers',
+    year: 2002,
+  },
+  { label: "One Flew Over the Cuckoo's Nest", year: 1975 },
+  { label: 'Goodfellas', year: 1990 },
+  { label: 'The Matrix', year: 1999 },
+  { label: 'Seven Samurai', year: 1954 },
+  {
+    label: 'Star Wars: Episode IV - A New Hope',
+    year: 1977,
+  },
+  { label: 'City of God', year: 2002 },
+  { label: 'Se7en', year: 1995 },
+  { label: 'The Silence of the Lambs', year: 1991 },
+  { label: "It's a Wonderful Life", year: 1946 },
+  { label: 'Life Is Beautiful', year: 1997 },
+  { label: 'The Usual Suspects', year: 1995 },
+  { label: 'Léon: The Professional', year: 1994 },
+  { label: 'Spirited Away', year: 2001 },
+  { label: 'Saving Private Ryan', year: 1998 },
+  { label: 'Once Upon a Time in the West', year: 1968 },
+  { label: 'American History X', year: 1998 },
+  { label: 'Interstellar', year: 2014 },
+  { label: 'Casablanca', year: 1942 },
+  { label: 'City Lights', year: 1931 },
+  { label: 'Psycho', year: 1960 },
+  { label: 'The Green Mile', year: 1999 },
+  { label: 'The Intouchables', year: 2011 },
+  { label: 'Modern Times', year: 1936 },
+  { label: 'Raiders of the Lost Ark', year: 1981 },
+  { label: 'Rear Window', year: 1954 },
+  { label: 'The Pianist', year: 2002 },
+  { label: 'The Departed', year: 2006 },
+  { label: 'Terminator 2: Judgment Day', year: 1991 },
+  { label: 'Back to the Future', year: 1985 },
+  { label: 'Whiplash', year: 2014 },
+  { label: 'Gladiator', year: 2000 },
+  { label: 'Memento', year: 2000 },
+  { label: 'The Prestige', year: 2006 },
+  { label: 'The Lion King', year: 1994 },
+  { label: 'Apocalypse Now', year: 1979 },
+  { label: 'Alien', year: 1979 },
+  { label: 'Sunset Boulevard', year: 1950 },
+  {
+    label: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
+    year: 1964,
+  },
+  { label: 'The Great Dictator', year: 1940 },
+  { label: 'Cinema Paradiso', year: 1988 },
+  { label: 'The Lives of Others', year: 2006 },
+  { label: 'Grave of the Fireflies', year: 1988 },
+  { label: 'Paths of Glory', year: 1957 },
+  { label: 'Django Unchained', year: 2012 },
+  { label: 'The Shining', year: 1980 },
+  { label: 'WALL·E', year: 2008 },
+  { label: 'American Beauty', year: 1999 },
+  { label: 'The Dark Knight Rises', year: 2012 },
+  { label: 'Princess Mononoke', year: 1997 },
+  { label: 'Aliens', year: 1986 },
+  { label: 'Oldboy', year: 2003 },
+  { label: 'Once Upon a Time in America', year: 1984 },
+  { label: 'Witness for the Prosecution', year: 1957 },
+  { label: 'Das Boot', year: 1981 },
+  { label: 'Citizen Kane', year: 1941 },
+  { label: 'North by Northwest', year: 1959 },
+  { label: 'Vertigo', year: 1958 },
+  {
+    label: 'Star Wars: Episode VI - Return of the Jedi',
+    year: 1983,
+  },
+  { label: 'Reservoir Dogs', year: 1992 },
+  { label: 'Braveheart', year: 1995 },
+  { label: 'M', year: 1931 },
+  { label: 'Requiem for a Dream', year: 2000 },
+  { label: 'Amélie', year: 2001 },
+  { label: 'A Clockwork Orange', year: 1971 },
+  { label: 'Like Stars on Earth', year: 2007 },
+  { label: 'Taxi Driver', year: 1976 },
+  { label: 'Lawrence of Arabia', year: 1962 },
+  { label: 'Double Indemnity', year: 1944 },
+  {
+    label: 'Eternal Sunshine of the Spotless Mind',
+    year: 2004,
+  },
+  { label: 'Amadeus', year: 1984 },
+  { label: 'To Kill a Mockingbird', year: 1962 },
+  { label: 'Toy Story 3', year: 2010 },
+  { label: 'Logan', year: 2017 },
+  { label: 'Full Metal Jacket', year: 1987 },
+  { label: 'Dangal', year: 2016 },
+  { label: 'The Sting', year: 1973 },
+  { label: '2001: A Space Odyssey', year: 1968 },
+  { label: "Singin' in the Rain", year: 1952 },
+  { label: 'Toy Story', year: 1995 },
+  { label: 'Bicycle Thieves', year: 1948 },
+  { label: 'The Kid', year: 1921 },
+  { label: 'Inglourious Basterds', year: 2009 },
+  { label: 'Snatch', year: 2000 },
+  { label: '3 Idiots', year: 2009 },
+  { label: 'Monty Python and the Holy Grail', year: 1975 },
+];

docs/data/joy/components/autocomplete/AutocompleteDecorators.tsx

@@ -0,0 +1,150 @@
+import Autocomplete from '@mui/joy/Autocomplete';
+import Stack from '@mui/joy/Stack';
+import LiveTv from '@mui/icons-material/LiveTv';
+
+export default function AutocompleteDecorators() {
+  return (
+    <Stack spacing={2}>
+      <Autocomplete
+        startDecorator={<LiveTv />}
+        placeholder="Decorators"
+        options={top100Films}
+      />
+      <Autocomplete
+        multiple
+        startDecorator={<LiveTv />}
+        placeholder="Decorators"
+        options={top100Films}
+        defaultValue={[top100Films[0]]}
+      />
+    </Stack>
+  );
+}
+
+// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
+const top100Films = [
+  { label: 'The Shawshank Redemption', year: 1994 },
+  { label: 'The Godfather', year: 1972 },
+  { label: 'The Godfather: Part II', year: 1974 },
+  { label: 'The Dark Knight', year: 2008 },
+  { label: '12 Angry Men', year: 1957 },
+  { label: "Schindler's List", year: 1993 },
+  { label: 'Pulp Fiction', year: 1994 },
+  {
+    label: 'The Lord of the Rings: The Return of the King',
+    year: 2003,
+  },
+  { label: 'The Good, the Bad and the Ugly', year: 1966 },
+  { label: 'Fight Club', year: 1999 },
+  {
+    label: 'The Lord of the Rings: The Fellowship of the Ring',
+    year: 2001,
+  },
+  {
+    label: 'Star Wars: Episode V - The Empire Strikes Back',
+    year: 1980,
+  },
+  { label: 'Forrest Gump', year: 1994 },
+  { label: 'Inception', year: 2010 },
+  {
+    label: 'The Lord of the Rings: The Two Towers',
+    year: 2002,
+  },
+  { label: "One Flew Over the Cuckoo's Nest", year: 1975 },
+  { label: 'Goodfellas', year: 1990 },
+  { label: 'The Matrix', year: 1999 },
+  { label: 'Seven Samurai', year: 1954 },
+  {
+    label: 'Star Wars: Episode IV - A New Hope',
+    year: 1977,
+  },
+  { label: 'City of God', year: 2002 },
+  { label: 'Se7en', year: 1995 },
+  { label: 'The Silence of the Lambs', year: 1991 },
+  { label: "It's a Wonderful Life", year: 1946 },
+  { label: 'Life Is Beautiful', year: 1997 },
+  { label: 'The Usual Suspects', year: 1995 },
+  { label: 'Léon: The Professional', year: 1994 },
+  { label: 'Spirited Away', year: 2001 },
+  { label: 'Saving Private Ryan', year: 1998 },
+  { label: 'Once Upon a Time in the West', year: 1968 },
+  { label: 'American History X', year: 1998 },
+  { label: 'Interstellar', year: 2014 },
+  { label: 'Casablanca', year: 1942 },
+  { label: 'City Lights', year: 1931 },
+  { label: 'Psycho', year: 1960 },
+  { label: 'The Green Mile', year: 1999 },
+  { label: 'The Intouchables', year: 2011 },
+  { label: 'Modern Times', year: 1936 },
+  { label: 'Raiders of the Lost Ark', year: 1981 },
+  { label: 'Rear Window', year: 1954 },
+  { label: 'The Pianist', year: 2002 },
+  { label: 'The Departed', year: 2006 },
+  { label: 'Terminator 2: Judgment Day', year: 1991 },
+  { label: 'Back to the Future', year: 1985 },
+  { label: 'Whiplash', year: 2014 },
+  { label: 'Gladiator', year: 2000 },
+  { label: 'Memento', year: 2000 },
+  { label: 'The Prestige', year: 2006 },
+  { label: 'The Lion King', year: 1994 },
+  { label: 'Apocalypse Now', year: 1979 },
+  { label: 'Alien', year: 1979 },
+  { label: 'Sunset Boulevard', year: 1950 },
+  {
+    label: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
+    year: 1964,
+  },
+  { label: 'The Great Dictator', year: 1940 },
+  { label: 'Cinema Paradiso', year: 1988 },
+  { label: 'The Lives of Others', year: 2006 },
+  { label: 'Grave of the Fireflies', year: 1988 },
+  { label: 'Paths of Glory', year: 1957 },
+  { label: 'Django Unchained', year: 2012 },
+  { label: 'The Shining', year: 1980 },
+  { label: 'WALL·E', year: 2008 },
+  { label: 'American Beauty', year: 1999 },
+  { label: 'The Dark Knight Rises', year: 2012 },
+  { label: 'Princess Mononoke', year: 1997 },
+  { label: 'Aliens', year: 1986 },
+  { label: 'Oldboy', year: 2003 },
+  { label: 'Once Upon a Time in America', year: 1984 },
+  { label: 'Witness for the Prosecution', year: 1957 },
+  { label: 'Das Boot', year: 1981 },
+  { label: 'Citizen Kane', year: 1941 },
+  { label: 'North by Northwest', year: 1959 },
+  { label: 'Vertigo', year: 1958 },
+  {
+    label: 'Star Wars: Episode VI - Return of the Jedi',
+    year: 1983,
+  },
+  { label: 'Reservoir Dogs', year: 1992 },
+  { label: 'Braveheart', year: 1995 },
+  { label: 'M', year: 1931 },
+  { label: 'Requiem for a Dream', year: 2000 },
+  { label: 'Amélie', year: 2001 },
+  { label: 'A Clockwork Orange', year: 1971 },
+  { label: 'Like Stars on Earth', year: 2007 },
+  { label: 'Taxi Driver', year: 1976 },
+  { label: 'Lawrence of Arabia', year: 1962 },
+  { label: 'Double Indemnity', year: 1944 },
+  {
+    label: 'Eternal Sunshine of the Spotless Mind',
+    year: 2004,
+  },
+  { label: 'Amadeus', year: 1984 },
+  { label: 'To Kill a Mockingbird', year: 1962 },
+  { label: 'Toy Story 3', year: 2010 },
+  { label: 'Logan', year: 2017 },
+  { label: 'Full Metal Jacket', year: 1987 },
+  { label: 'Dangal', year: 2016 },
+  { label: 'The Sting', year: 1973 },
+  { label: '2001: A Space Odyssey', year: 1968 },
+  { label: "Singin' in the Rain", year: 1952 },
+  { label: 'Toy Story', year: 1995 },
+  { label: 'Bicycle Thieves', year: 1948 },
+  { label: 'The Kid', year: 1921 },
+  { label: 'Inglourious Basterds', year: 2009 },
+  { label: 'Snatch', year: 2000 },
+  { label: '3 Idiots', year: 2009 },
+  { label: 'Monty Python and the Holy Grail', year: 1975 },
+];

docs/data/joy/components/autocomplete/AutocompleteDecorators.tsx.preview

@@ -0,0 +1,12 @@
+<Autocomplete
+  startDecorator={<LiveTv />}
+  placeholder="Decorators"
+  options={top100Films}
+/>
+<Autocomplete
+  multiple
+  startDecorator={<LiveTv />}
+  placeholder="Decorators"
+  options={top100Films}
+  defaultValue={[top100Films[0]]}
+/>

docs/data/joy/components/autocomplete/AutocompleteError.js

@@ -0,0 +1,142 @@
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import FormHelperText from '@mui/joy/FormHelperText';
+import Autocomplete from '@mui/joy/Autocomplete';
+
+export default function AutocompleteError() {
+  return (
+    <FormControl error>
+      <FormLabel>Invalid</FormLabel>
+      <Autocomplete placeholder="Error" options={top100Films} sx={{ width: 300 }} />
+      <FormHelperText>Oops! something went wrong.</FormHelperText>
+    </FormControl>
+  );
+}
+
+// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
+const top100Films = [
+  { label: 'The Shawshank Redemption', year: 1994 },
+  { label: 'The Godfather', year: 1972 },
+  { label: 'The Godfather: Part II', year: 1974 },
+  { label: 'The Dark Knight', year: 2008 },
+  { label: '12 Angry Men', year: 1957 },
+  { label: "Schindler's List", year: 1993 },
+  { label: 'Pulp Fiction', year: 1994 },
+  {
+    label: 'The Lord of the Rings: The Return of the King',
+    year: 2003,
+  },
+  { label: 'The Good, the Bad and the Ugly', year: 1966 },
+  { label: 'Fight Club', year: 1999 },
+  {
+    label: 'The Lord of the Rings: The Fellowship of the Ring',
+    year: 2001,
+  },
+  {
+    label: 'Star Wars: Episode V - The Empire Strikes Back',
+    year: 1980,
+  },
+  { label: 'Forrest Gump', year: 1994 },
+  { label: 'Inception', year: 2010 },
+  {
+    label: 'The Lord of the Rings: The Two Towers',
+    year: 2002,
+  },
+  { label: "One Flew Over the Cuckoo's Nest", year: 1975 },
+  { label: 'Goodfellas', year: 1990 },
+  { label: 'The Matrix', year: 1999 },
+  { label: 'Seven Samurai', year: 1954 },
+  {
+    label: 'Star Wars: Episode IV - A New Hope',
+    year: 1977,
+  },
+  { label: 'City of God', year: 2002 },
+  { label: 'Se7en', year: 1995 },
+  { label: 'The Silence of the Lambs', year: 1991 },
+  { label: "It's a Wonderful Life", year: 1946 },
+  { label: 'Life Is Beautiful', year: 1997 },
+  { label: 'The Usual Suspects', year: 1995 },
+  { label: 'Léon: The Professional', year: 1994 },
+  { label: 'Spirited Away', year: 2001 },
+  { label: 'Saving Private Ryan', year: 1998 },
+  { label: 'Once Upon a Time in the West', year: 1968 },
+  { label: 'American History X', year: 1998 },
+  { label: 'Interstellar', year: 2014 },
+  { label: 'Casablanca', year: 1942 },
+  { label: 'City Lights', year: 1931 },
+  { label: 'Psycho', year: 1960 },
+  { label: 'The Green Mile', year: 1999 },
+  { label: 'The Intouchables', year: 2011 },
+  { label: 'Modern Times', year: 1936 },
+  { label: 'Raiders of the Lost Ark', year: 1981 },
+  { label: 'Rear Window', year: 1954 },
+  { label: 'The Pianist', year: 2002 },
+  { label: 'The Departed', year: 2006 },
+  { label: 'Terminator 2: Judgment Day', year: 1991 },
+  { label: 'Back to the Future', year: 1985 },
+  { label: 'Whiplash', year: 2014 },
+  { label: 'Gladiator', year: 2000 },
+  { label: 'Memento', year: 2000 },
+  { label: 'The Prestige', year: 2006 },
+  { label: 'The Lion King', year: 1994 },
+  { label: 'Apocalypse Now', year: 1979 },
+  { label: 'Alien', year: 1979 },
+  { label: 'Sunset Boulevard', year: 1950 },
+  {
+    label: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
+    year: 1964,
+  },
+  { label: 'The Great Dictator', year: 1940 },
+  { label: 'Cinema Paradiso', year: 1988 },
+  { label: 'The Lives of Others', year: 2006 },
+  { label: 'Grave of the Fireflies', year: 1988 },
+  { label: 'Paths of Glory', year: 1957 },
+  { label: 'Django Unchained', year: 2012 },
+  { label: 'The Shining', year: 1980 },
+  { label: 'WALL·E', year: 2008 },
+  { label: 'American Beauty', year: 1999 },
+  { label: 'The Dark Knight Rises', year: 2012 },
+  { label: 'Princess Mononoke', year: 1997 },
+  { label: 'Aliens', year: 1986 },
+  { label: 'Oldboy', year: 2003 },
+  { label: 'Once Upon a Time in America', year: 1984 },
+  { label: 'Witness for the Prosecution', year: 1957 },
+  { label: 'Das Boot', year: 1981 },
+  { label: 'Citizen Kane', year: 1941 },
+  { label: 'North by Northwest', year: 1959 },
+  { label: 'Vertigo', year: 1958 },
+  {
+    label: 'Star Wars: Episode VI - Return of the Jedi',
+    year: 1983,
+  },
+  { label: 'Reservoir Dogs', year: 1992 },
+  { label: 'Braveheart', year: 1995 },
+  { label: 'M', year: 1931 },
+  { label: 'Requiem for a Dream', year: 2000 },
+  { label: 'Amélie', year: 2001 },
+  { label: 'A Clockwork Orange', year: 1971 },
+  { label: 'Like Stars on Earth', year: 2007 },
+  { label: 'Taxi Driver', year: 1976 },
+  { label: 'Lawrence of Arabia', year: 1962 },
+  { label: 'Double Indemnity', year: 1944 },
+  {
+    label: 'Eternal Sunshine of the Spotless Mind',
+    year: 2004,
+  },
+  { label: 'Amadeus', year: 1984 },
+  { label: 'To Kill a Mockingbird', year: 1962 },
+  { label: 'Toy Story 3', year: 2010 },
+  { label: 'Logan', year: 2017 },
+  { label: 'Full Metal Jacket', year: 1987 },
+  { label: 'Dangal', year: 2016 },
+  { label: 'The Sting', year: 1973 },
+  { label: '2001: A Space Odyssey', year: 1968 },
+  { label: "Singin' in the Rain", year: 1952 },
+  { label: 'Toy Story', year: 1995 },
+  { label: 'Bicycle Thieves', year: 1948 },
+  { label: 'The Kid', year: 1921 },
+  { label: 'Inglourious Basterds', year: 2009 },
+  { label: 'Snatch', year: 2000 },
+  { label: '3 Idiots', year: 2009 },
+  { label: 'Monty Python and the Holy Grail', year: 1975 },
+];

docs/data/joy/components/autocomplete/AutocompleteError.tsx

@@ -0,0 +1,142 @@
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import FormHelperText from '@mui/joy/FormHelperText';
+import Autocomplete from '@mui/joy/Autocomplete';
+
+export default function AutocompleteError() {
+  return (
+    <FormControl error>
+      <FormLabel>Invalid</FormLabel>
+      <Autocomplete placeholder="Error" options={top100Films} sx={{ width: 300 }} />
+      <FormHelperText>Oops! something went wrong.</FormHelperText>
+    </FormControl>
+  );
+}
+
+// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
+const top100Films = [
+  { label: 'The Shawshank Redemption', year: 1994 },
+  { label: 'The Godfather', year: 1972 },
+  { label: 'The Godfather: Part II', year: 1974 },
+  { label: 'The Dark Knight', year: 2008 },
+  { label: '12 Angry Men', year: 1957 },
+  { label: "Schindler's List", year: 1993 },
+  { label: 'Pulp Fiction', year: 1994 },
+  {
+    label: 'The Lord of the Rings: The Return of the King',
+    year: 2003,
+  },
+  { label: 'The Good, the Bad and the Ugly', year: 1966 },
+  { label: 'Fight Club', year: 1999 },
+  {
+    label: 'The Lord of the Rings: The Fellowship of the Ring',
+    year: 2001,
+  },
+  {
+    label: 'Star Wars: Episode V - The Empire Strikes Back',
+    year: 1980,
+  },
+  { label: 'Forrest Gump', year: 1994 },
+  { label: 'Inception', year: 2010 },
+  {
+    label: 'The Lord of the Rings: The Two Towers',
+    year: 2002,
+  },
+  { label: "One Flew Over the Cuckoo's Nest", year: 1975 },
+  { label: 'Goodfellas', year: 1990 },
+  { label: 'The Matrix', year: 1999 },
+  { label: 'Seven Samurai', year: 1954 },
+  {
+    label: 'Star Wars: Episode IV - A New Hope',
+    year: 1977,
+  },
+  { label: 'City of God', year: 2002 },
+  { label: 'Se7en', year: 1995 },
+  { label: 'The Silence of the Lambs', year: 1991 },
+  { label: "It's a Wonderful Life", year: 1946 },
+  { label: 'Life Is Beautiful', year: 1997 },
+  { label: 'The Usual Suspects', year: 1995 },
+  { label: 'Léon: The Professional', year: 1994 },
+  { label: 'Spirited Away', year: 2001 },
+  { label: 'Saving Private Ryan', year: 1998 },
+  { label: 'Once Upon a Time in the West', year: 1968 },
+  { label: 'American History X', year: 1998 },
+  { label: 'Interstellar', year: 2014 },
+  { label: 'Casablanca', year: 1942 },
+  { label: 'City Lights', year: 1931 },
+  { label: 'Psycho', year: 1960 },
+  { label: 'The Green Mile', year: 1999 },
+  { label: 'The Intouchables', year: 2011 },
+  { label: 'Modern Times', year: 1936 },
+  { label: 'Raiders of the Lost Ark', year: 1981 },
+  { label: 'Rear Window', year: 1954 },
+  { label: 'The Pianist', year: 2002 },
+  { label: 'The Departed', year: 2006 },
+  { label: 'Terminator 2: Judgment Day', year: 1991 },
+  { label: 'Back to the Future', year: 1985 },
+  { label: 'Whiplash', year: 2014 },
+  { label: 'Gladiator', year: 2000 },
+  { label: 'Memento', year: 2000 },
+  { label: 'The Prestige', year: 2006 },
+  { label: 'The Lion King', year: 1994 },
+  { label: 'Apocalypse Now', year: 1979 },
+  { label: 'Alien', year: 1979 },
+  { label: 'Sunset Boulevard', year: 1950 },
+  {
+    label: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
+    year: 1964,
+  },
+  { label: 'The Great Dictator', year: 1940 },
+  { label: 'Cinema Paradiso', year: 1988 },
+  { label: 'The Lives of Others', year: 2006 },
+  { label: 'Grave of the Fireflies', year: 1988 },
+  { label: 'Paths of Glory', year: 1957 },
+  { label: 'Django Unchained', year: 2012 },
+  { label: 'The Shining', year: 1980 },
+  { label: 'WALL·E', year: 2008 },
+  { label: 'American Beauty', year: 1999 },
+  { label: 'The Dark Knight Rises', year: 2012 },
+  { label: 'Princess Mononoke', year: 1997 },
+  { label: 'Aliens', year: 1986 },
+  { label: 'Oldboy', year: 2003 },
+  { label: 'Once Upon a Time in America', year: 1984 },
+  { label: 'Witness for the Prosecution', year: 1957 },
+  { label: 'Das Boot', year: 1981 },
+  { label: 'Citizen Kane', year: 1941 },
+  { label: 'North by Northwest', year: 1959 },
+  { label: 'Vertigo', year: 1958 },
+  {
+    label: 'Star Wars: Episode VI - Return of the Jedi',
+    year: 1983,
+  },
+  { label: 'Reservoir Dogs', year: 1992 },
+  { label: 'Braveheart', year: 1995 },
+  { label: 'M', year: 1931 },
+  { label: 'Requiem for a Dream', year: 2000 },
+  { label: 'Amélie', year: 2001 },
+  { label: 'A Clockwork Orange', year: 1971 },
+  { label: 'Like Stars on Earth', year: 2007 },
+  { label: 'Taxi Driver', year: 1976 },
+  { label: 'Lawrence of Arabia', year: 1962 },
+  { label: 'Double Indemnity', year: 1944 },
+  {
+    label: 'Eternal Sunshine of the Spotless Mind',
+    year: 2004,
+  },
+  { label: 'Amadeus', year: 1984 },
+  { label: 'To Kill a Mockingbird', year: 1962 },
+  { label: 'Toy Story 3', year: 2010 },
+  { label: 'Logan', year: 2017 },
+  { label: 'Full Metal Jacket', year: 1987 },
+  { label: 'Dangal', year: 2016 },
+  { label: 'The Sting', year: 1973 },
+  { label: '2001: A Space Odyssey', year: 1968 },
+  { label: "Singin' in the Rain", year: 1952 },
+  { label: 'Toy Story', year: 1995 },
+  { label: 'Bicycle Thieves', year: 1948 },
+  { label: 'The Kid', year: 1921 },
+  { label: 'Inglourious Basterds', year: 2009 },
+  { label: 'Snatch', year: 2000 },
+  { label: '3 Idiots', year: 2009 },
+  { label: 'Monty Python and the Holy Grail', year: 1975 },
+];

docs/data/joy/components/autocomplete/AutocompleteError.tsx.preview

@@ -0,0 +1,5 @@
+<FormControl error>
+  <FormLabel>Invalid</FormLabel>
+  <Autocomplete placeholder="Error" options={top100Films} sx={{ width: 300 }} />
+  <FormHelperText>Oops! something went wrong.</FormHelperText>
+</FormControl>

docs/data/joy/components/autocomplete/AutocompleteHint.js

@@ -0,0 +1,234 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import Autocomplete from '@mui/joy/Autocomplete';
+import { Typography, styled } from '@mui/joy';
+
+const StyledDiv = styled('div')({
+  flex: 1, // stretch to fill the root slot
+  minWidth: 0, // won't push end decorator out of the autocomplete
+  display: 'flex',
+  alignItems: 'center',
+  flexWrap: 'wrap',
+  position: 'relative',
+});
+
+function Wrapper({ children, hint, ...props }) {
+  return (
+    <StyledDiv {...props}>
+      <Typography
+        sx={{
+          position: 'absolute',
+          opacity: 0.6,
+          overflow: 'hidden', // Hide overflow
+          whiteSpace: 'nowrap', // Prevent text wrapping
+          maxWidth: '100%', // Ensure the hint doesn't exceed container width
+        }}
+      >
+        {hint}
+      </Typography>
+      {children}
+    </StyledDiv>
+  );
+}
+
+Wrapper.propTypes = {
+  children: PropTypes.element.isRequired,
+  hint: PropTypes.string.isRequired,
+};
+
+export default function AutocompleteHint() {
+  const hint = React.useRef('');
+  const [inputValue, setInputValue] = React.useState('');
+  return (
+    <Autocomplete
+      onInputChange={(event, value) => {
+        if (!value) {
+          hint.current = '';
+        }
+        const matchingOption = top100Films.find((option) =>
+          option.label.startsWith(value),
+        );
+        if (value && matchingOption) {
+          hint.current = matchingOption.label;
+        } else {
+          hint.current = '';
+        }
+        setInputValue(value);
+      }}
+      onKeyDown={(event) => {
+        if (event.key === 'Tab') {
+          if (hint.current) {
+            setInputValue(hint.current);
+            event.preventDefault();
+          }
+        }
+      }}
+      onClose={() => {
+        hint.current = '';
+      }}
+      inputValue={inputValue}
+      filterOptions={(options, state) => {
+        const displayOptions = options.filter((option) =>
+          option.label
+            .toLowerCase()
+            .trim()
+            .includes(state.inputValue.toLowerCase().trim()),
+        );
+
+        const matchingOption = options.find((option) =>
+          option.label.startsWith(state.inputValue),
+        );
+        if (displayOptions.length > 0 && state.inputValue && matchingOption) {
+          hint.current = matchingOption.label;
+        } else {
+          hint.current = '';
+        }
+        return displayOptions;
+      }}
+      id="combo-box-hint-demo"
+      options={top100Films}
+      slots={{
+        wrapper: Wrapper,
+      }}
+      slotProps={{
+        wrapper: {
+          hint: hint.current,
+        },
+        input: {
+          sx: {
+            zIndex: 1,
+          },
+        },
+      }}
+      sx={{ width: 300 }}
+    />
+  );
+}
+
+// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
+const top100Films = [
+  { label: 'The Shawshank Redemption', year: 1994 },
+  { label: 'The Godfather', year: 1972 },
+  { label: 'The Godfather: Part II', year: 1974 },
+  { label: 'The Dark Knight', year: 2008 },
+  { label: '12 Angry Men', year: 1957 },
+  { label: "Schindler's List", year: 1993 },
+  { label: 'Pulp Fiction', year: 1994 },
+  {
+    label: 'The Lord of the Rings: The Return of the King',
+    year: 2003,
+  },
+  { label: 'The Good, the Bad and the Ugly', year: 1966 },
+  { label: 'Fight Club', year: 1999 },
+  {
+    label: 'The Lord of the Rings: The Fellowship of the Ring',
+    year: 2001,
+  },
+  {
+    label: 'Star Wars: Episode V - The Empire Strikes Back',
+    year: 1980,
+  },
+  { label: 'Forrest Gump', year: 1994 },
+  { label: 'Inception', year: 2010 },
+  {
+    label: 'The Lord of the Rings: The Two Towers',
+    year: 2002,
+  },
+  { label: "One Flew Over the Cuckoo's Nest", year: 1975 },
+  { label: 'Goodfellas', year: 1990 },
+  { label: 'The Matrix', year: 1999 },
+  { label: 'Seven Samurai', year: 1954 },
+  {
+    label: 'Star Wars: Episode IV - A New Hope',
+    year: 1977,
+  },
+  { label: 'City of God', year: 2002 },
+  { label: 'Se7en', year: 1995 },
+  { label: 'The Silence of the Lambs', year: 1991 },
+  { label: "It's a Wonderful Life", year: 1946 },
+  { label: 'Life Is Beautiful', year: 1997 },
+  { label: 'The Usual Suspects', year: 1995 },
+  { label: 'Léon: The Professional', year: 1994 },
+  { label: 'Spirited Away', year: 2001 },
+  { label: 'Saving Private Ryan', year: 1998 },
+  { label: 'Once Upon a Time in the West', year: 1968 },
+  { label: 'American History X', year: 1998 },
+  { label: 'Interstellar', year: 2014 },
+  { label: 'Casablanca', year: 1942 },
+  { label: 'City Lights', year: 1931 },
+  { label: 'Psycho', year: 1960 },
+  { label: 'The Green Mile', year: 1999 },
+  { label: 'The Intouchables', year: 2011 },
+  { label: 'Modern Times', year: 1936 },
+  { label: 'Raiders of the Lost Ark', year: 1981 },
+  { label: 'Rear Window', year: 1954 },
+  { label: 'The Pianist', year: 2002 },
+  { label: 'The Departed', year: 2006 },
+  { label: 'Terminator 2: Judgment Day', year: 1991 },
+  { label: 'Back to the Future', year: 1985 },
+  { label: 'Whiplash', year: 2014 },
+  { label: 'Gladiator', year: 2000 },
+  { label: 'Memento', year: 2000 },
+  { label: 'The Prestige', year: 2006 },
+  { label: 'The Lion King', year: 1994 },
+  { label: 'Apocalypse Now', year: 1979 },
+  { label: 'Alien', year: 1979 },
+  { label: 'Sunset Boulevard', year: 1950 },
+  {
+    label: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
+    year: 1964,
+  },
+  { label: 'The Great Dictator', year: 1940 },
+  { label: 'Cinema Paradiso', year: 1988 },
+  { label: 'The Lives of Others', year: 2006 },
+  { label: 'Grave of the Fireflies', year: 1988 },
+  { label: 'Paths of Glory', year: 1957 },
+  { label: 'Django Unchained', year: 2012 },
+  { label: 'The Shining', year: 1980 },
+  { label: 'WALL·E', year: 2008 },
+  { label: 'American Beauty', year: 1999 },
+  { label: 'The Dark Knight Rises', year: 2012 },
+  { label: 'Princess Mononoke', year: 1997 },
+  { label: 'Aliens', year: 1986 },
+  { label: 'Oldboy', year: 2003 },
+  { label: 'Once Upon a Time in America', year: 1984 },
+  { label: 'Witness for the Prosecution', year: 1957 },
+  { label: 'Das Boot', year: 1981 },
+  { label: 'Citizen Kane', year: 1941 },
+  { label: 'North by Northwest', year: 1959 },
+  { label: 'Vertigo', year: 1958 },
+  {
+    label: 'Star Wars: Episode VI - Return of the Jedi',
+    year: 1983,
+  },
+  { label: 'Reservoir Dogs', year: 1992 },
+  { label: 'Braveheart', year: 1995 },
+  { label: 'M', year: 1931 },
+  { label: 'Requiem for a Dream', year: 2000 },
+  { label: 'Amélie', year: 2001 },
+  { label: 'A Clockwork Orange', year: 1971 },
+  { label: 'Like Stars on Earth', year: 2007 },
+  { label: 'Taxi Driver', year: 1976 },
+  { label: 'Lawrence of Arabia', year: 1962 },
+  { label: 'Double Indemnity', year: 1944 },
+  {
+    label: 'Eternal Sunshine of the Spotless Mind',
+    year: 2004,
+  },
+  { label: 'Amadeus', year: 1984 },
+  { label: 'To Kill a Mockingbird', year: 1962 },
+  { label: 'Toy Story 3', year: 2010 },
+  { label: 'Logan', year: 2017 },
+  { label: 'Full Metal Jacket', year: 1987 },
+  { label: 'Dangal', year: 2016 },
+  { label: 'The Sting', year: 1973 },
+  { label: '2001: A Space Odyssey', year: 1968 },
+  { label: "Singin' in the Rain", year: 1952 },
+  { label: 'Toy Story', year: 1995 },
+  { label: 'Bicycle Thieves', year: 1948 },
+  { label: 'The Kid', year: 1921 },
+  { label: 'Inglourious Basterds', year: 2009 },
+  { label: 'Snatch', year: 2000 },
+  { label: '3 Idiots', year: 2009 },
+  { label: 'Monty Python and the Holy Grail', year: 1975 },
+];

docs/data/joy/components/autocomplete/AutocompleteHint.tsx

@@ -0,0 +1,233 @@
+import * as React from 'react';
+import Autocomplete from '@mui/joy/Autocomplete';
+import { Typography, styled } from '@mui/joy';
+
+const StyledDiv = styled('div')({
+  flex: 1, // stretch to fill the root slot
+  minWidth: 0, // won't push end decorator out of the autocomplete
+  display: 'flex',
+  alignItems: 'center',
+  flexWrap: 'wrap',
+  position: 'relative',
+});
+
+type WrapperProps = {
+  children: React.JSX.Element;
+  hint: string;
+};
+
+function Wrapper({ children, hint, ...props }: WrapperProps) {
+  return (
+    <StyledDiv {...props}>
+      <Typography
+        sx={{
+          position: 'absolute',
+          opacity: 0.6,
+          overflow: 'hidden', // Hide overflow
+          whiteSpace: 'nowrap', // Prevent text wrapping
+          maxWidth: '100%', // Ensure the hint doesn't exceed container width
+        }}
+      >
+        {hint}
+      </Typography>
+      {children}
+    </StyledDiv>
+  );
+}
+
+export default function AutocompleteHint() {
+  const hint = React.useRef('');
+  const [inputValue, setInputValue] = React.useState('');
+  return (
+    <Autocomplete
+      onInputChange={(event, value) => {
+        if (!value) {
+          hint.current = '';
+        }
+        const matchingOption = top100Films.find((option) =>
+          option.label.startsWith(value),
+        );
+        if (value && matchingOption) {
+          hint.current = matchingOption.label;
+        } else {
+          hint.current = '';
+        }
+        setInputValue(value);
+      }}
+      onKeyDown={(event) => {
+        if (event.key === 'Tab') {
+          if (hint.current) {
+            setInputValue(hint.current);
+            event.preventDefault();
+          }
+        }
+      }}
+      onClose={() => {
+        hint.current = '';
+      }}
+      inputValue={inputValue}
+      filterOptions={(options, state) => {
+        const displayOptions = options.filter((option) =>
+          option.label
+            .toLowerCase()
+            .trim()
+            .includes(state.inputValue.toLowerCase().trim()),
+        );
+
+        const matchingOption = options.find((option) =>
+          option.label.startsWith(state.inputValue),
+        );
+        if (displayOptions.length > 0 && state.inputValue && matchingOption) {
+          hint.current = matchingOption.label;
+        } else {
+          hint.current = '';
+        }
+        return displayOptions;
+      }}
+      id="combo-box-hint-demo"
+      options={top100Films}
+      slots={{
+        wrapper: Wrapper,
+      }}
+      slotProps={{
+        wrapper: {
+          hint: hint.current,
+        },
+        input: {
+          sx: {
+            zIndex: 1,
+          },
+        },
+      }}
+      sx={{ width: 300 }}
+    />
+  );
+}
+
+// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
+const top100Films = [
+  { label: 'The Shawshank Redemption', year: 1994 },
+  { label: 'The Godfather', year: 1972 },
+  { label: 'The Godfather: Part II', year: 1974 },
+  { label: 'The Dark Knight', year: 2008 },
+  { label: '12 Angry Men', year: 1957 },
+  { label: "Schindler's List", year: 1993 },
+  { label: 'Pulp Fiction', year: 1994 },
+  {
+    label: 'The Lord of the Rings: The Return of the King',
+    year: 2003,
+  },
+  { label: 'The Good, the Bad and the Ugly', year: 1966 },
+  { label: 'Fight Club', year: 1999 },
+  {
+    label: 'The Lord of the Rings: The Fellowship of the Ring',
+    year: 2001,
+  },
+  {
+    label: 'Star Wars: Episode V - The Empire Strikes Back',
+    year: 1980,
+  },
+  { label: 'Forrest Gump', year: 1994 },
+  { label: 'Inception', year: 2010 },
+  {
+    label: 'The Lord of the Rings: The Two Towers',
+    year: 2002,
+  },
+  { label: "One Flew Over the Cuckoo's Nest", year: 1975 },
+  { label: 'Goodfellas', year: 1990 },
+  { label: 'The Matrix', year: 1999 },
+  { label: 'Seven Samurai', year: 1954 },
+  {
+    label: 'Star Wars: Episode IV - A New Hope',
+    year: 1977,
+  },
+  { label: 'City of God', year: 2002 },
+  { label: 'Se7en', year: 1995 },
+  { label: 'The Silence of the Lambs', year: 1991 },
+  { label: "It's a Wonderful Life", year: 1946 },
+  { label: 'Life Is Beautiful', year: 1997 },
+  { label: 'The Usual Suspects', year: 1995 },
+  { label: 'Léon: The Professional', year: 1994 },
+  { label: 'Spirited Away', year: 2001 },
+  { label: 'Saving Private Ryan', year: 1998 },
+  { label: 'Once Upon a Time in the West', year: 1968 },
+  { label: 'American History X', year: 1998 },
+  { label: 'Interstellar', year: 2014 },
+  { label: 'Casablanca', year: 1942 },
+  { label: 'City Lights', year: 1931 },
+  { label: 'Psycho', year: 1960 },
+  { label: 'The Green Mile', year: 1999 },
+  { label: 'The Intouchables', year: 2011 },
+  { label: 'Modern Times', year: 1936 },
+  { label: 'Raiders of the Lost Ark', year: 1981 },
+  { label: 'Rear Window', year: 1954 },
+  { label: 'The Pianist', year: 2002 },
+  { label: 'The Departed', year: 2006 },
+  { label: 'Terminator 2: Judgment Day', year: 1991 },
+  { label: 'Back to the Future', year: 1985 },
+  { label: 'Whiplash', year: 2014 },
+  { label: 'Gladiator', year: 2000 },
+  { label: 'Memento', year: 2000 },
+  { label: 'The Prestige', year: 2006 },
+  { label: 'The Lion King', year: 1994 },
+  { label: 'Apocalypse Now', year: 1979 },
+  { label: 'Alien', year: 1979 },
+  { label: 'Sunset Boulevard', year: 1950 },
+  {
+    label: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
+    year: 1964,
+  },
+  { label: 'The Great Dictator', year: 1940 },
+  { label: 'Cinema Paradiso', year: 1988 },
+  { label: 'The Lives of Others', year: 2006 },
+  { label: 'Grave of the Fireflies', year: 1988 },
+  { label: 'Paths of Glory', year: 1957 },
+  { label: 'Django Unchained', year: 2012 },
+  { label: 'The Shining', year: 1980 },
+  { label: 'WALL·E', year: 2008 },
+  { label: 'American Beauty', year: 1999 },
+  { label: 'The Dark Knight Rises', year: 2012 },
+  { label: 'Princess Mononoke', year: 1997 },
+  { label: 'Aliens', year: 1986 },
+  { label: 'Oldboy', year: 2003 },
+  { label: 'Once Upon a Time in America', year: 1984 },
+  { label: 'Witness for the Prosecution', year: 1957 },
+  { label: 'Das Boot', year: 1981 },
+  { label: 'Citizen Kane', year: 1941 },
+  { label: 'North by Northwest', year: 1959 },
+  { label: 'Vertigo', year: 1958 },
+  {
+    label: 'Star Wars: Episode VI - Return of the Jedi',
+    year: 1983,
+  },
+  { label: 'Reservoir Dogs', year: 1992 },
+  { label: 'Braveheart', year: 1995 },
+  { label: 'M', year: 1931 },
+  { label: 'Requiem for a Dream', year: 2000 },
+  { label: 'Amélie', year: 2001 },
+  { label: 'A Clockwork Orange', year: 1971 },
+  { label: 'Like Stars on Earth', year: 2007 },
+  { label: 'Taxi Driver', year: 1976 },
+  { label: 'Lawrence of Arabia', year: 1962 },
+  { label: 'Double Indemnity', year: 1944 },
+  {
+    label: 'Eternal Sunshine of the Spotless Mind',
+    year: 2004,
+  },
+  { label: 'Amadeus', year: 1984 },
+  { label: 'To Kill a Mockingbird', year: 1962 },
+  { label: 'Toy Story 3', year: 2010 },
+  { label: 'Logan', year: 2017 },
+  { label: 'Full Metal Jacket', year: 1987 },
+  { label: 'Dangal', year: 2016 },
+  { label: 'The Sting', year: 1973 },
+  { label: '2001: A Space Odyssey', year: 1968 },
+  { label: "Singin' in the Rain", year: 1952 },
+  { label: 'Toy Story', year: 1995 },
+  { label: 'Bicycle Thieves', year: 1948 },
+  { label: 'The Kid', year: 1921 },
+  { label: 'Inglourious Basterds', year: 2009 },
+  { label: 'Snatch', year: 2000 },
+  { label: '3 Idiots', year: 2009 },
+  { label: 'Monty Python and the Holy Grail', year: 1975 },
+];

docs/data/joy/components/autocomplete/AutocompleteVariables.js

@@ -0,0 +1,218 @@
+import Autocomplete from '@mui/joy/Autocomplete';
+import Stack from '@mui/joy/Stack';
+import LiveTv from '@mui/icons-material/LiveTv';
+import JoyVariablesDemo from 'docs/src/modules/components/JoyVariablesDemo';
+
+export default function AutocompleteVariables() {
+  return (
+    <JoyVariablesDemo
+      componentName="Autocomplete"
+      data={[
+        [
+          'Input',
+          [
+            {
+              var: '--Input-minHeight',
+              defaultValue: '40px',
+            },
+            {
+              var: '--Input-radius',
+              defaultValue: '8px',
+            },
+            {
+              var: '--Input-gap',
+              defaultValue: '8px',
+            },
+            {
+              var: '--Input-paddingInline',
+              defaultValue: '12px',
+            },
+            {
+              var: '--Input-decoratorChildHeight',
+              defaultValue: '32px',
+            },
+          ],
+        ],
+        [
+          'Autocomplete',
+          [
+            {
+              var: '--Autocomplete-wrapperGap',
+              defaultValue: '3px',
+            },
+          ],
+          { defaultOpen: true },
+        ],
+        [
+          'Chip',
+          [
+            {
+              var: '--Chip-minHeight',
+              defaultValue: '32px',
+            },
+            {
+              var: '--Chip-radius',
+            },
+          ],
+          { defaultOpen: true },
+        ],
+        [
+          'Icon',
+          [
+            {
+              var: '--Icon-fontSize',
+              defaultValue: '24px',
+            },
+          ],
+          { defaultOpen: true },
+        ],
+      ]}
+      renderDemo={(sx) => (
+        <Stack spacing={2} sx={{ width: 400, maxWidth: '100%' }}>
+          <Autocomplete
+            startDecorator={<LiveTv />}
+            placeholder="Decorators"
+            options={top100Films}
+            sx={sx}
+          />
+          <Autocomplete
+            multiple
+            startDecorator={<LiveTv />}
+            placeholder="Decorators"
+            options={top100Films}
+            defaultValue={[top100Films[1], top100Films[6]]}
+            sx={sx}
+          />
+        </Stack>
+      )}
+    />
+  );
+}
+
+// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
+const top100Films = [
+  { label: 'The Shawshank Redemption', year: 1994 },
+  { label: 'The Godfather', year: 1972 },
+  { label: 'The Godfather: Part II', year: 1974 },
+  { label: 'The Dark Knight', year: 2008 },
+  { label: '12 Angry Men', year: 1957 },
+  { label: "Schindler's List", year: 1993 },
+  { label: 'Pulp Fiction', year: 1994 },
+  {
+    label: 'The Lord of the Rings: The Return of the King',
+    year: 2003,
+  },
+  { label: 'The Good, the Bad and the Ugly', year: 1966 },
+  { label: 'Fight Club', year: 1999 },
+  {
+    label: 'The Lord of the Rings: The Fellowship of the Ring',
+    year: 2001,
+  },
+  {
+    label: 'Star Wars: Episode V - The Empire Strikes Back',
+    year: 1980,
+  },
+  { label: 'Forrest Gump', year: 1994 },
+  { label: 'Inception', year: 2010 },
+  {
+    label: 'The Lord of the Rings: The Two Towers',
+    year: 2002,
+  },
+  { label: "One Flew Over the Cuckoo's Nest", year: 1975 },
+  { label: 'Goodfellas', year: 1990 },
+  { label: 'The Matrix', year: 1999 },
+  { label: 'Seven Samurai', year: 1954 },
+  {
+    label: 'Star Wars: Episode IV - A New Hope',
+    year: 1977,
+  },
+  { label: 'City of God', year: 2002 },
+  { label: 'Se7en', year: 1995 },
+  { label: 'The Silence of the Lambs', year: 1991 },
+  { label: "It's a Wonderful Life", year: 1946 },
+  { label: 'Life Is Beautiful', year: 1997 },
+  { label: 'The Usual Suspects', year: 1995 },
+  { label: 'Léon: The Professional', year: 1994 },
+  { label: 'Spirited Away', year: 2001 },
+  { label: 'Saving Private Ryan', year: 1998 },
+  { label: 'Once Upon a Time in the West', year: 1968 },
+  { label: 'American History X', year: 1998 },
+  { label: 'Interstellar', year: 2014 },
+  { label: 'Casablanca', year: 1942 },
+  { label: 'City Lights', year: 1931 },
+  { label: 'Psycho', year: 1960 },
+  { label: 'The Green Mile', year: 1999 },
+  { label: 'The Intouchables', year: 2011 },
+  { label: 'Modern Times', year: 1936 },
+  { label: 'Raiders of the Lost Ark', year: 1981 },
+  { label: 'Rear Window', year: 1954 },
+  { label: 'The Pianist', year: 2002 },
+  { label: 'The Departed', year: 2006 },
+  { label: 'Terminator 2: Judgment Day', year: 1991 },
+  { label: 'Back to the Future', year: 1985 },
+  { label: 'Whiplash', year: 2014 },
+  { label: 'Gladiator', year: 2000 },
+  { label: 'Memento', year: 2000 },
+  { label: 'The Prestige', year: 2006 },
+  { label: 'The Lion King', year: 1994 },
+  { label: 'Apocalypse Now', year: 1979 },
+  { label: 'Alien', year: 1979 },
+  { label: 'Sunset Boulevard', year: 1950 },
+  {
+    label: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
+    year: 1964,
+  },
+  { label: 'The Great Dictator', year: 1940 },
+  { label: 'Cinema Paradiso', year: 1988 },
+  { label: 'The Lives of Others', year: 2006 },
+  { label: 'Grave of the Fireflies', year: 1988 },
+  { label: 'Paths of Glory', year: 1957 },
+  { label: 'Django Unchained', year: 2012 },
+  { label: 'The Shining', year: 1980 },
+  { label: 'WALL·E', year: 2008 },
+  { label: 'American Beauty', year: 1999 },
+  { label: 'The Dark Knight Rises', year: 2012 },
+  { label: 'Princess Mononoke', year: 1997 },
+  { label: 'Aliens', year: 1986 },
+  { label: 'Oldboy', year: 2003 },
+  { label: 'Once Upon a Time in America', year: 1984 },
+  { label: 'Witness for the Prosecution', year: 1957 },
+  { label: 'Das Boot', year: 1981 },
+  { label: 'Citizen Kane', year: 1941 },
+  { label: 'North by Northwest', year: 1959 },
+  { label: 'Vertigo', year: 1958 },
+  {
+    label: 'Star Wars: Episode VI - Return of the Jedi',
+    year: 1983,
+  },
+  { label: 'Reservoir Dogs', year: 1992 },
+  { label: 'Braveheart', year: 1995 },
+  { label: 'M', year: 1931 },
+  { label: 'Requiem for a Dream', year: 2000 },
+  { label: 'Amélie', year: 2001 },
+  { label: 'A Clockwork Orange', year: 1971 },
+  { label: 'Like Stars on Earth', year: 2007 },
+  { label: 'Taxi Driver', year: 1976 },
+  { label: 'Lawrence of Arabia', year: 1962 },
+  { label: 'Double Indemnity', year: 1944 },
+  {
+    label: 'Eternal Sunshine of the Spotless Mind',
+    year: 2004,
+  },
+  { label: 'Amadeus', year: 1984 },
+  { label: 'To Kill a Mockingbird', year: 1962 },
+  { label: 'Toy Story 3', year: 2010 },
+  { label: 'Logan', year: 2017 },
+  { label: 'Full Metal Jacket', year: 1987 },
+  { label: 'Dangal', year: 2016 },
+  { label: 'The Sting', year: 1973 },
+  { label: '2001: A Space Odyssey', year: 1968 },
+  { label: "Singin' in the Rain", year: 1952 },
+  { label: 'Toy Story', year: 1995 },
+  { label: 'Bicycle Thieves', year: 1948 },
+  { label: 'The Kid', year: 1921 },
+  { label: 'Inglourious Basterds', year: 2009 },
+  { label: 'Snatch', year: 2000 },
+  { label: '3 Idiots', year: 2009 },
+  { label: 'Monty Python and the Holy Grail', year: 1975 },
+];

docs/data/joy/components/autocomplete/AutocompleteVariants.js

@@ -0,0 +1,166 @@
+import Autocomplete from '@mui/joy/Autocomplete';
+import AutocompleteOption from '@mui/joy/AutocompleteOption';
+import Stack from '@mui/joy/Stack';
+
+export default function AutocompleteVariants() {
+  return (
+    <Stack spacing={1}>
+      <Autocomplete
+        placeholder="Outlined variant (default)"
+        options={top100Films}
+        sx={{ width: 300 }}
+      />
+      <Autocomplete
+        variant="soft"
+        placeholder="Soft variant"
+        options={top100Films}
+        sx={{ width: 300 }}
+      />
+      <Autocomplete
+        variant="solid"
+        placeholder="Solid variant"
+        options={top100Films}
+        renderOption={(props, option) => (
+          <AutocompleteOption variant="solid" {...props}>
+            {option.label}
+          </AutocompleteOption>
+        )}
+        sx={{ width: 300 }}
+      />
+      <Autocomplete
+        variant="plain"
+        placeholder="Plain variant"
+        options={top100Films}
+        sx={{ width: 300 }}
+      />
+    </Stack>
+  );
+}
+
+// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
+const top100Films = [
+  { label: 'The Shawshank Redemption', year: 1994 },
+  { label: 'The Godfather', year: 1972 },
+  { label: 'The Godfather: Part II', year: 1974 },
+  { label: 'The Dark Knight', year: 2008 },
+  { label: '12 Angry Men', year: 1957 },
+  { label: "Schindler's List", year: 1993 },
+  { label: 'Pulp Fiction', year: 1994 },
+  {
+    label: 'The Lord of the Rings: The Return of the King',
+    year: 2003,
+  },
+  { label: 'The Good, the Bad and the Ugly', year: 1966 },
+  { label: 'Fight Club', year: 1999 },
+  {
+    label: 'The Lord of the Rings: The Fellowship of the Ring',
+    year: 2001,
+  },
+  {
+    label: 'Star Wars: Episode V - The Empire Strikes Back',
+    year: 1980,
+  },
+  { label: 'Forrest Gump', year: 1994 },
+  { label: 'Inception', year: 2010 },
+  {
+    label: 'The Lord of the Rings: The Two Towers',
+    year: 2002,
+  },
+  { label: "One Flew Over the Cuckoo's Nest", year: 1975 },
+  { label: 'Goodfellas', year: 1990 },
+  { label: 'The Matrix', year: 1999 },
+  { label: 'Seven Samurai', year: 1954 },
+  {
+    label: 'Star Wars: Episode IV - A New Hope',
+    year: 1977,
+  },
+  { label: 'City of God', year: 2002 },
+  { label: 'Se7en', year: 1995 },
+  { label: 'The Silence of the Lambs', year: 1991 },
+  { label: "It's a Wonderful Life", year: 1946 },
+  { label: 'Life Is Beautiful', year: 1997 },
+  { label: 'The Usual Suspects', year: 1995 },
+  { label: 'Léon: The Professional', year: 1994 },
+  { label: 'Spirited Away', year: 2001 },
+  { label: 'Saving Private Ryan', year: 1998 },
+  { label: 'Once Upon a Time in the West', year: 1968 },
+  { label: 'American History X', year: 1998 },
+  { label: 'Interstellar', year: 2014 },
+  { label: 'Casablanca', year: 1942 },
+  { label: 'City Lights', year: 1931 },
+  { label: 'Psycho', year: 1960 },
+  { label: 'The Green Mile', year: 1999 },
+  { label: 'The Intouchables', year: 2011 },
+  { label: 'Modern Times', year: 1936 },
+  { label: 'Raiders of the Lost Ark', year: 1981 },
+  { label: 'Rear Window', year: 1954 },
+  { label: 'The Pianist', year: 2002 },
+  { label: 'The Departed', year: 2006 },
+  { label: 'Terminator 2: Judgment Day', year: 1991 },
+  { label: 'Back to the Future', year: 1985 },
+  { label: 'Whiplash', year: 2014 },
+  { label: 'Gladiator', year: 2000 },
+  { label: 'Memento', year: 2000 },
+  { label: 'The Prestige', year: 2006 },
+  { label: 'The Lion King', year: 1994 },
+  { label: 'Apocalypse Now', year: 1979 },
+  { label: 'Alien', year: 1979 },
+  { label: 'Sunset Boulevard', year: 1950 },
+  {
+    label: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
+    year: 1964,
+  },
+  { label: 'The Great Dictator', year: 1940 },
+  { label: 'Cinema Paradiso', year: 1988 },
+  { label: 'The Lives of Others', year: 2006 },
+  { label: 'Grave of the Fireflies', year: 1988 },
+  { label: 'Paths of Glory', year: 1957 },
+  { label: 'Django Unchained', year: 2012 },
+  { label: 'The Shining', year: 1980 },
+  { label: 'WALL·E', year: 2008 },
+  { label: 'American Beauty', year: 1999 },
+  { label: 'The Dark Knight Rises', year: 2012 },
+  { label: 'Princess Mononoke', year: 1997 },
+  { label: 'Aliens', year: 1986 },
+  { label: 'Oldboy', year: 2003 },
+  { label: 'Once Upon a Time in America', year: 1984 },
+  { label: 'Witness for the Prosecution', year: 1957 },
+  { label: 'Das Boot', year: 1981 },
+  { label: 'Citizen Kane', year: 1941 },
+  { label: 'North by Northwest', year: 1959 },
+  { label: 'Vertigo', year: 1958 },
+  {
+    label: 'Star Wars: Episode VI - Return of the Jedi',
+    year: 1983,
+  },
+  { label: 'Reservoir Dogs', year: 1992 },
+  { label: 'Braveheart', year: 1995 },
+  { label: 'M', year: 1931 },
+  { label: 'Requiem for a Dream', year: 2000 },
+  { label: 'Amélie', year: 2001 },
+  { label: 'A Clockwork Orange', year: 1971 },
+  { label: 'Like Stars on Earth', year: 2007 },
+  { label: 'Taxi Driver', year: 1976 },
+  { label: 'Lawrence of Arabia', year: 1962 },
+  { label: 'Double Indemnity', year: 1944 },
+  {
+    label: 'Eternal Sunshine of the Spotless Mind',
+    year: 2004,
+  },
+  { label: 'Amadeus', year: 1984 },
+  { label: 'To Kill a Mockingbird', year: 1962 },
+  { label: 'Toy Story 3', year: 2010 },
+  { label: 'Logan', year: 2017 },
+  { label: 'Full Metal Jacket', year: 1987 },
+  { label: 'Dangal', year: 2016 },
+  { label: 'The Sting', year: 1973 },
+  { label: '2001: A Space Odyssey', year: 1968 },
+  { label: "Singin' in the Rain", year: 1952 },
+  { label: 'Toy Story', year: 1995 },
+  { label: 'Bicycle Thieves', year: 1948 },
+  { label: 'The Kid', year: 1921 },
+  { label: 'Inglourious Basterds', year: 2009 },
+  { label: 'Snatch', year: 2000 },
+  { label: '3 Idiots', year: 2009 },
+  { label: 'Monty Python and the Holy Grail', year: 1975 },
+];

docs/data/joy/components/autocomplete/AutocompleteVariants.tsx

@@ -0,0 +1,166 @@
+import Autocomplete from '@mui/joy/Autocomplete';
+import AutocompleteOption from '@mui/joy/AutocompleteOption';
+import Stack from '@mui/joy/Stack';
+
+export default function AutocompleteVariants() {
+  return (
+    <Stack spacing={1}>
+      <Autocomplete
+        placeholder="Outlined variant (default)"
+        options={top100Films}
+        sx={{ width: 300 }}
+      />
+      <Autocomplete
+        variant="soft"
+        placeholder="Soft variant"
+        options={top100Films}
+        sx={{ width: 300 }}
+      />
+      <Autocomplete
+        variant="solid"
+        placeholder="Solid variant"
+        options={top100Films}
+        renderOption={(props, option) => (
+          <AutocompleteOption variant="solid" {...props}>
+            {option.label}
+          </AutocompleteOption>
+        )}
+        sx={{ width: 300 }}
+      />
+      <Autocomplete
+        variant="plain"
+        placeholder="Plain variant"
+        options={top100Films}
+        sx={{ width: 300 }}
+      />
+    </Stack>
+  );
+}
+
+// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
+const top100Films = [
+  { label: 'The Shawshank Redemption', year: 1994 },
+  { label: 'The Godfather', year: 1972 },
+  { label: 'The Godfather: Part II', year: 1974 },
+  { label: 'The Dark Knight', year: 2008 },
+  { label: '12 Angry Men', year: 1957 },
+  { label: "Schindler's List", year: 1993 },
+  { label: 'Pulp Fiction', year: 1994 },
+  {
+    label: 'The Lord of the Rings: The Return of the King',
+    year: 2003,
+  },
+  { label: 'The Good, the Bad and the Ugly', year: 1966 },
+  { label: 'Fight Club', year: 1999 },
+  {
+    label: 'The Lord of the Rings: The Fellowship of the Ring',
+    year: 2001,
+  },
+  {
+    label: 'Star Wars: Episode V - The Empire Strikes Back',
+    year: 1980,
+  },
+  { label: 'Forrest Gump', year: 1994 },
+  { label: 'Inception', year: 2010 },
+  {
+    label: 'The Lord of the Rings: The Two Towers',
+    year: 2002,
+  },
+  { label: "One Flew Over the Cuckoo's Nest", year: 1975 },
+  { label: 'Goodfellas', year: 1990 },
+  { label: 'The Matrix', year: 1999 },
+  { label: 'Seven Samurai', year: 1954 },
+  {
+    label: 'Star Wars: Episode IV - A New Hope',
+    year: 1977,
+  },
+  { label: 'City of God', year: 2002 },
+  { label: 'Se7en', year: 1995 },
+  { label: 'The Silence of the Lambs', year: 1991 },
+  { label: "It's a Wonderful Life", year: 1946 },
+  { label: 'Life Is Beautiful', year: 1997 },
+  { label: 'The Usual Suspects', year: 1995 },
+  { label: 'Léon: The Professional', year: 1994 },
+  { label: 'Spirited Away', year: 2001 },
+  { label: 'Saving Private Ryan', year: 1998 },
+  { label: 'Once Upon a Time in the West', year: 1968 },
+  { label: 'American History X', year: 1998 },
+  { label: 'Interstellar', year: 2014 },
+  { label: 'Casablanca', year: 1942 },
+  { label: 'City Lights', year: 1931 },
+  { label: 'Psycho', year: 1960 },
+  { label: 'The Green Mile', year: 1999 },
+  { label: 'The Intouchables', year: 2011 },
+  { label: 'Modern Times', year: 1936 },
+  { label: 'Raiders of the Lost Ark', year: 1981 },
+  { label: 'Rear Window', year: 1954 },
+  { label: 'The Pianist', year: 2002 },
+  { label: 'The Departed', year: 2006 },
+  { label: 'Terminator 2: Judgment Day', year: 1991 },
+  { label: 'Back to the Future', year: 1985 },
+  { label: 'Whiplash', year: 2014 },
+  { label: 'Gladiator', year: 2000 },
+  { label: 'Memento', year: 2000 },
+  { label: 'The Prestige', year: 2006 },
+  { label: 'The Lion King', year: 1994 },
+  { label: 'Apocalypse Now', year: 1979 },
+  { label: 'Alien', year: 1979 },
+  { label: 'Sunset Boulevard', year: 1950 },
+  {
+    label: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
+    year: 1964,
+  },
+  { label: 'The Great Dictator', year: 1940 },
+  { label: 'Cinema Paradiso', year: 1988 },
+  { label: 'The Lives of Others', year: 2006 },
+  { label: 'Grave of the Fireflies', year: 1988 },
+  { label: 'Paths of Glory', year: 1957 },
+  { label: 'Django Unchained', year: 2012 },
+  { label: 'The Shining', year: 1980 },
+  { label: 'WALL·E', year: 2008 },
+  { label: 'American Beauty', year: 1999 },
+  { label: 'The Dark Knight Rises', year: 2012 },
+  { label: 'Princess Mononoke', year: 1997 },
+  { label: 'Aliens', year: 1986 },
+  { label: 'Oldboy', year: 2003 },
+  { label: 'Once Upon a Time in America', year: 1984 },
+  { label: 'Witness for the Prosecution', year: 1957 },
+  { label: 'Das Boot', year: 1981 },
+  { label: 'Citizen Kane', year: 1941 },
+  { label: 'North by Northwest', year: 1959 },
+  { label: 'Vertigo', year: 1958 },
+  {
+    label: 'Star Wars: Episode VI - Return of the Jedi',
+    year: 1983,
+  },
+  { label: 'Reservoir Dogs', year: 1992 },
+  { label: 'Braveheart', year: 1995 },
+  { label: 'M', year: 1931 },
+  { label: 'Requiem for a Dream', year: 2000 },
+  { label: 'Amélie', year: 2001 },
+  { label: 'A Clockwork Orange', year: 1971 },
+  { label: 'Like Stars on Earth', year: 2007 },
+  { label: 'Taxi Driver', year: 1976 },
+  { label: 'Lawrence of Arabia', year: 1962 },
+  { label: 'Double Indemnity', year: 1944 },
+  {
+    label: 'Eternal Sunshine of the Spotless Mind',
+    year: 2004,
+  },
+  { label: 'Amadeus', year: 1984 },
+  { label: 'To Kill a Mockingbird', year: 1962 },
+  { label: 'Toy Story 3', year: 2010 },
+  { label: 'Logan', year: 2017 },
+  { label: 'Full Metal Jacket', year: 1987 },
+  { label: 'Dangal', year: 2016 },
+  { label: 'The Sting', year: 1973 },
+  { label: '2001: A Space Odyssey', year: 1968 },
+  { label: "Singin' in the Rain", year: 1952 },
+  { label: 'Toy Story', year: 1995 },
+  { label: 'Bicycle Thieves', year: 1948 },
+  { label: 'The Kid', year: 1921 },
+  { label: 'Inglourious Basterds', year: 2009 },
+  { label: 'Snatch', year: 2000 },
+  { label: '3 Idiots', year: 2009 },
+  { label: 'Monty Python and the Holy Grail', year: 1975 },
+];

docs/data/joy/components/autocomplete/BasicAutocomplete.js

@@ -0,0 +1,139 @@
+import Autocomplete from '@mui/joy/Autocomplete';
+
+export default function BasicAutocomplete() {
+  return (
+    <Autocomplete
+      placeholder="Combo box"
+      options={top100Films}
+      sx={{ width: 300 }}
+    />
+  );
+}
+
+// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
+const top100Films = [
+  { label: 'The Shawshank Redemption', year: 1994 },
+  { label: 'The Godfather', year: 1972 },
+  { label: 'The Godfather: Part II', year: 1974 },
+  { label: 'The Dark Knight', year: 2008 },
+  { label: '12 Angry Men', year: 1957 },
+  { label: "Schindler's List", year: 1993 },
+  { label: 'Pulp Fiction', year: 1994 },
+  {
+    label: 'The Lord of the Rings: The Return of the King',
+    year: 2003,
+  },
+  { label: 'The Good, the Bad and the Ugly', year: 1966 },
+  { label: 'Fight Club', year: 1999 },
+  {
+    label: 'The Lord of the Rings: The Fellowship of the Ring',
+    year: 2001,
+  },
+  {
+    label: 'Star Wars: Episode V - The Empire Strikes Back',
+    year: 1980,
+  },
+  { label: 'Forrest Gump', year: 1994 },
+  { label: 'Inception', year: 2010 },
+  {
+    label: 'The Lord of the Rings: The Two Towers',
+    year: 2002,
+  },
+  { label: "One Flew Over the Cuckoo's Nest", year: 1975 },
+  { label: 'Goodfellas', year: 1990 },
+  { label: 'The Matrix', year: 1999 },
+  { label: 'Seven Samurai', year: 1954 },
+  {
+    label: 'Star Wars: Episode IV - A New Hope',
+    year: 1977,
+  },
+  { label: 'City of God', year: 2002 },
+  { label: 'Se7en', year: 1995 },
+  { label: 'The Silence of the Lambs', year: 1991 },
+  { label: "It's a Wonderful Life", year: 1946 },
+  { label: 'Life Is Beautiful', year: 1997 },
+  { label: 'The Usual Suspects', year: 1995 },
+  { label: 'Léon: The Professional', year: 1994 },
+  { label: 'Spirited Away', year: 2001 },
+  { label: 'Saving Private Ryan', year: 1998 },
+  { label: 'Once Upon a Time in the West', year: 1968 },
+  { label: 'American History X', year: 1998 },
+  { label: 'Interstellar', year: 2014 },
+  { label: 'Casablanca', year: 1942 },
+  { label: 'City Lights', year: 1931 },
+  { label: 'Psycho', year: 1960 },
+  { label: 'The Green Mile', year: 1999 },
+  { label: 'The Intouchables', year: 2011 },
+  { label: 'Modern Times', year: 1936 },
+  { label: 'Raiders of the Lost Ark', year: 1981 },
+  { label: 'Rear Window', year: 1954 },
+  { label: 'The Pianist', year: 2002 },
+  { label: 'The Departed', year: 2006 },
+  { label: 'Terminator 2: Judgment Day', year: 1991 },
+  { label: 'Back to the Future', year: 1985 },
+  { label: 'Whiplash', year: 2014 },
+  { label: 'Gladiator', year: 2000 },
+  { label: 'Memento', year: 2000 },
+  { label: 'The Prestige', year: 2006 },
+  { label: 'The Lion King', year: 1994 },
+  { label: 'Apocalypse Now', year: 1979 },
+  { label: 'Alien', year: 1979 },
+  { label: 'Sunset Boulevard', year: 1950 },
+  {
+    label: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
+    year: 1964,
+  },
+  { label: 'The Great Dictator', year: 1940 },
+  { label: 'Cinema Paradiso', year: 1988 },
+  { label: 'The Lives of Others', year: 2006 },
+  { label: 'Grave of the Fireflies', year: 1988 },
+  { label: 'Paths of Glory', year: 1957 },
+  { label: 'Django Unchained', year: 2012 },
+  { label: 'The Shining', year: 1980 },
+  { label: 'WALL·E', year: 2008 },
+  { label: 'American Beauty', year: 1999 },
+  { label: 'The Dark Knight Rises', year: 2012 },
+  { label: 'Princess Mononoke', year: 1997 },
+  { label: 'Aliens', year: 1986 },
+  { label: 'Oldboy', year: 2003 },
+  { label: 'Once Upon a Time in America', year: 1984 },
+  { label: 'Witness for the Prosecution', year: 1957 },
+  { label: 'Das Boot', year: 1981 },
+  { label: 'Citizen Kane', year: 1941 },
+  { label: 'North by Northwest', year: 1959 },
+  { label: 'Vertigo', year: 1958 },
+  {
+    label: 'Star Wars: Episode VI - Return of the Jedi',
+    year: 1983,
+  },
+  { label: 'Reservoir Dogs', year: 1992 },
+  { label: 'Braveheart', year: 1995 },
+  { label: 'M', year: 1931 },
+  { label: 'Requiem for a Dream', year: 2000 },
+  { label: 'Amélie', year: 2001 },
+  { label: 'A Clockwork Orange', year: 1971 },
+  { label: 'Like Stars on Earth', year: 2007 },
+  { label: 'Taxi Driver', year: 1976 },
+  { label: 'Lawrence of Arabia', year: 1962 },
+  { label: 'Double Indemnity', year: 1944 },
+  {
+    label: 'Eternal Sunshine of the Spotless Mind',
+    year: 2004,
+  },
+  { label: 'Amadeus', year: 1984 },
+  { label: 'To Kill a Mockingbird', year: 1962 },
+  { label: 'Toy Story 3', year: 2010 },
+  { label: 'Logan', year: 2017 },
+  { label: 'Full Metal Jacket', year: 1987 },
+  { label: 'Dangal', year: 2016 },
+  { label: 'The Sting', year: 1973 },
+  { label: '2001: A Space Odyssey', year: 1968 },
+  { label: "Singin' in the Rain", year: 1952 },
+  { label: 'Toy Story', year: 1995 },
+  { label: 'Bicycle Thieves', year: 1948 },
+  { label: 'The Kid', year: 1921 },
+  { label: 'Inglourious Basterds', year: 2009 },
+  { label: 'Snatch', year: 2000 },
+  { label: '3 Idiots', year: 2009 },
+  { label: 'Monty Python and the Holy Grail', year: 1975 },
+];

docs/data/joy/components/autocomplete/BasicAutocomplete.tsx

@@ -0,0 +1,139 @@
+import Autocomplete from '@mui/joy/Autocomplete';
+
+export default function BasicAutocomplete() {
+  return (
+    <Autocomplete
+      placeholder="Combo box"
+      options={top100Films}
+      sx={{ width: 300 }}
+    />
+  );
+}
+
+// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
+const top100Films = [
+  { label: 'The Shawshank Redemption', year: 1994 },
+  { label: 'The Godfather', year: 1972 },
+  { label: 'The Godfather: Part II', year: 1974 },
+  { label: 'The Dark Knight', year: 2008 },
+  { label: '12 Angry Men', year: 1957 },
+  { label: "Schindler's List", year: 1993 },
+  { label: 'Pulp Fiction', year: 1994 },
+  {
+    label: 'The Lord of the Rings: The Return of the King',
+    year: 2003,
+  },
+  { label: 'The Good, the Bad and the Ugly', year: 1966 },
+  { label: 'Fight Club', year: 1999 },
+  {
+    label: 'The Lord of the Rings: The Fellowship of the Ring',
+    year: 2001,
+  },
+  {
+    label: 'Star Wars: Episode V - The Empire Strikes Back',
+    year: 1980,
+  },
+  { label: 'Forrest Gump', year: 1994 },
+  { label: 'Inception', year: 2010 },
+  {
+    label: 'The Lord of the Rings: The Two Towers',
+    year: 2002,
+  },
+  { label: "One Flew Over the Cuckoo's Nest", year: 1975 },
+  { label: 'Goodfellas', year: 1990 },
+  { label: 'The Matrix', year: 1999 },
+  { label: 'Seven Samurai', year: 1954 },
+  {
+    label: 'Star Wars: Episode IV - A New Hope',
+    year: 1977,
+  },
+  { label: 'City of God', year: 2002 },
+  { label: 'Se7en', year: 1995 },
+  { label: 'The Silence of the Lambs', year: 1991 },
+  { label: "It's a Wonderful Life", year: 1946 },
+  { label: 'Life Is Beautiful', year: 1997 },
+  { label: 'The Usual Suspects', year: 1995 },
+  { label: 'Léon: The Professional', year: 1994 },
+  { label: 'Spirited Away', year: 2001 },
+  { label: 'Saving Private Ryan', year: 1998 },
+  { label: 'Once Upon a Time in the West', year: 1968 },
+  { label: 'American History X', year: 1998 },
+  { label: 'Interstellar', year: 2014 },
+  { label: 'Casablanca', year: 1942 },
+  { label: 'City Lights', year: 1931 },
+  { label: 'Psycho', year: 1960 },
+  { label: 'The Green Mile', year: 1999 },
+  { label: 'The Intouchables', year: 2011 },
+  { label: 'Modern Times', year: 1936 },
+  { label: 'Raiders of the Lost Ark', year: 1981 },
+  { label: 'Rear Window', year: 1954 },
+  { label: 'The Pianist', year: 2002 },
+  { label: 'The Departed', year: 2006 },
+  { label: 'Terminator 2: Judgment Day', year: 1991 },
+  { label: 'Back to the Future', year: 1985 },
+  { label: 'Whiplash', year: 2014 },
+  { label: 'Gladiator', year: 2000 },
+  { label: 'Memento', year: 2000 },
+  { label: 'The Prestige', year: 2006 },
+  { label: 'The Lion King', year: 1994 },
+  { label: 'Apocalypse Now', year: 1979 },
+  { label: 'Alien', year: 1979 },
+  { label: 'Sunset Boulevard', year: 1950 },
+  {
+    label: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
+    year: 1964,
+  },
+  { label: 'The Great Dictator', year: 1940 },
+  { label: 'Cinema Paradiso', year: 1988 },
+  { label: 'The Lives of Others', year: 2006 },
+  { label: 'Grave of the Fireflies', year: 1988 },
+  { label: 'Paths of Glory', year: 1957 },
+  { label: 'Django Unchained', year: 2012 },
+  { label: 'The Shining', year: 1980 },
+  { label: 'WALL·E', year: 2008 },
+  { label: 'American Beauty', year: 1999 },
+  { label: 'The Dark Knight Rises', year: 2012 },
+  { label: 'Princess Mononoke', year: 1997 },
+  { label: 'Aliens', year: 1986 },
+  { label: 'Oldboy', year: 2003 },
+  { label: 'Once Upon a Time in America', year: 1984 },
+  { label: 'Witness for the Prosecution', year: 1957 },
+  { label: 'Das Boot', year: 1981 },
+  { label: 'Citizen Kane', year: 1941 },
+  { label: 'North by Northwest', year: 1959 },
+  { label: 'Vertigo', year: 1958 },
+  {
+    label: 'Star Wars: Episode VI - Return of the Jedi',
+    year: 1983,
+  },
+  { label: 'Reservoir Dogs', year: 1992 },
+  { label: 'Braveheart', year: 1995 },
+  { label: 'M', year: 1931 },
+  { label: 'Requiem for a Dream', year: 2000 },
+  { label: 'Amélie', year: 2001 },
+  { label: 'A Clockwork Orange', year: 1971 },
+  { label: 'Like Stars on Earth', year: 2007 },
+  { label: 'Taxi Driver', year: 1976 },
+  { label: 'Lawrence of Arabia', year: 1962 },
+  { label: 'Double Indemnity', year: 1944 },
+  {
+    label: 'Eternal Sunshine of the Spotless Mind',
+    year: 2004,
+  },
+  { label: 'Amadeus', year: 1984 },
+  { label: 'To Kill a Mockingbird', year: 1962 },
+  { label: 'Toy Story 3', year: 2010 },
+  { label: 'Logan', year: 2017 },
+  { label: 'Full Metal Jacket', year: 1987 },
+  { label: 'Dangal', year: 2016 },
+  { label: 'The Sting', year: 1973 },
+  { label: '2001: A Space Odyssey', year: 1968 },
+  { label: "Singin' in the Rain", year: 1952 },
+  { label: 'Toy Story', year: 1995 },
+  { label: 'Bicycle Thieves', year: 1948 },
+  { label: 'The Kid', year: 1921 },
+  { label: 'Inglourious Basterds', year: 2009 },
+  { label: 'Snatch', year: 2000 },
+  { label: '3 Idiots', year: 2009 },
+  { label: 'Monty Python and the Holy Grail', year: 1975 },
+];

docs/data/joy/components/autocomplete/BasicAutocomplete.tsx.preview

@@ -0,0 +1,5 @@
+<Autocomplete
+  placeholder="Combo box"
+  options={top100Films}
+  sx={{ width: 300 }}
+/>

docs/data/joy/components/autocomplete/ControllableStates.js

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import Autocomplete from '@mui/joy/Autocomplete';
+import Typography from '@mui/joy/Typography';
+
+const options = ['Option 1', 'Option 2'];
+
+export default function ControllableStates() {
+  const [value, setValue] = React.useState(options[0]);
+  const [inputValue, setInputValue] = React.useState('');
+
+  return (
+    <div>
+      <Typography level="body-sm" sx={{ mb: 1 }}>
+        <code>value: </code>
+        <Typography variant="soft" sx={{ py: 0.4 }}>
+          <code>
+            <strong>{`${value !== null ? `'${value}'` : 'null'}`}</strong>
+          </code>
+        </Typography>
+      </Typography>
+      <Typography level="body-sm">
+        <code>inputValue: </code>
+        <Typography variant="soft" sx={{ py: 0.4 }}>
+          <code>
+            <strong>{`'${inputValue}'`}</strong>
+          </code>
+        </Typography>
+      </Typography>
+      <br />
+      <FormControl id="controllable-states-demo">
+        <FormLabel>Controllable</FormLabel>
+        <Autocomplete
+          placeholder="Controllable"
+          value={value}
+          onChange={(event, newValue) => {
+            setValue(newValue);
+          }}
+          inputValue={inputValue}
+          onInputChange={(event, newInputValue) => {
+            setInputValue(newInputValue);
+          }}
+          options={options}
+          sx={{ width: 300 }}
+        />
+      </FormControl>
+    </div>
+  );
+}

docs/data/joy/components/autocomplete/ControllableStates.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import Autocomplete from '@mui/joy/Autocomplete';
+import Typography from '@mui/joy/Typography';
+
+const options = ['Option 1', 'Option 2'];
+
+export default function ControllableStates() {
+  const [value, setValue] = React.useState<string | null>(options[0]);
+  const [inputValue, setInputValue] = React.useState('');
+
+  return (
+    <div>
+      <Typography level="body-sm" sx={{ mb: 1 }}>
+        <code>value: </code>
+        <Typography variant="soft" sx={{ py: 0.4 }}>
+          <code>
+            <strong>{`${value !== null ? `'${value}'` : 'null'}`}</strong>
+          </code>
+        </Typography>
+      </Typography>
+      <Typography level="body-sm">
+        <code>inputValue: </code>
+        <Typography variant="soft" sx={{ py: 0.4 }}>
+          <code>
+            <strong>{`'${inputValue}'`}</strong>
+          </code>
+        </Typography>
+      </Typography>
+      <br />
+      <FormControl id="controllable-states-demo">
+        <FormLabel>Controllable</FormLabel>
+        <Autocomplete
+          placeholder="Controllable"
+          value={value}
+          onChange={(event, newValue) => {
+            setValue(newValue);
+          }}
+          inputValue={inputValue}
+          onInputChange={(event, newInputValue) => {
+            setInputValue(newInputValue);
+          }}
+          options={options}
+          sx={{ width: 300 }}
+        />
+      </FormControl>
+    </div>
+  );
+}

docs/data/joy/components/autocomplete/CountrySelect.js

@@ -0,0 +1,467 @@
+import Autocomplete from '@mui/joy/Autocomplete';
+import AutocompleteOption from '@mui/joy/AutocompleteOption';
+import ListItemDecorator from '@mui/joy/ListItemDecorator';
+import ListItemContent from '@mui/joy/ListItemContent';
+import Typography from '@mui/joy/Typography';
+
+export default function CountrySelect() {
+  return (
+    <Autocomplete
+      placeholder="Choose a country"
+      slotProps={{
+        input: {
+          autoComplete: 'new-password', // disable autocomplete and autofill
+        },
+      }}
+      sx={{ width: 300 }}
+      options={countries}
+      autoHighlight
+      getOptionLabel={(option) => option.label}
+      renderOption={(props, option) => (
+        <AutocompleteOption {...props}>
+          <ListItemDecorator>
+            <img
+              loading="lazy"
+              width="20"
+              srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
+              src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
+              alt=""
+            />
+          </ListItemDecorator>
+          <ListItemContent sx={{ fontSize: 'sm' }}>
+            {option.label}
+            <Typography level="body-xs">
+              ({option.code}) +{option.phone}
+            </Typography>
+          </ListItemContent>
+        </AutocompleteOption>
+      )}
+    />
+  );
+}
+
+// From https://bitbucket.org/atlassian/atlaskit-mk-2/raw/4ad0e56649c3e6c973e226b7efaeb28cb240ccb0/packages/core/select/src/data/countries.js
+const countries = [
+  { code: 'AD', label: 'Andorra', phone: '376' },
+  {
+    code: 'AE',
+    label: 'United Arab Emirates',
+    phone: '971',
+  },
+  { code: 'AF', label: 'Afghanistan', phone: '93' },
+  {
+    code: 'AG',
+    label: 'Antigua and Barbuda',
+    phone: '1-268',
+  },
+  { code: 'AI', label: 'Anguilla', phone: '1-264' },
+  { code: 'AL', label: 'Albania', phone: '355' },
+  { code: 'AM', label: 'Armenia', phone: '374' },
+  { code: 'AO', label: 'Angola', phone: '244' },
+  { code: 'AQ', label: 'Antarctica', phone: '672' },
+  { code: 'AR', label: 'Argentina', phone: '54' },
+  { code: 'AS', label: 'American Samoa', phone: '1-684' },
+  { code: 'AT', label: 'Austria', phone: '43' },
+  {
+    code: 'AU',
+    label: 'Australia',
+    phone: '61',
+    suggested: true,
+  },
+  { code: 'AW', label: 'Aruba', phone: '297' },
+  { code: 'AX', label: 'Alland Islands', phone: '358' },
+  { code: 'AZ', label: 'Azerbaijan', phone: '994' },
+  {
+    code: 'BA',
+    label: 'Bosnia and Herzegovina',
+    phone: '387',
+  },
+  { code: 'BB', label: 'Barbados', phone: '1-246' },
+  { code: 'BD', label: 'Bangladesh', phone: '880' },
+  { code: 'BE', label: 'Belgium', phone: '32' },
+  { code: 'BF', label: 'Burkina Faso', phone: '226' },
+  { code: 'BG', label: 'Bulgaria', phone: '359' },
+  { code: 'BH', label: 'Bahrain', phone: '973' },
+  { code: 'BI', label: 'Burundi', phone: '257' },
+  { code: 'BJ', label: 'Benin', phone: '229' },
+  { code: 'BL', label: 'Saint Barthelemy', phone: '590' },
+  { code: 'BM', label: 'Bermuda', phone: '1-441' },
+  { code: 'BN', label: 'Brunei Darussalam', phone: '673' },
+  { code: 'BO', label: 'Bolivia', phone: '591' },
+  { code: 'BR', label: 'Brazil', phone: '55' },
+  { code: 'BS', label: 'Bahamas', phone: '1-242' },
+  { code: 'BT', label: 'Bhutan', phone: '975' },
+  { code: 'BV', label: 'Bouvet Island', phone: '47' },
+  { code: 'BW', label: 'Botswana', phone: '267' },
+  { code: 'BY', label: 'Belarus', phone: '375' },
+  { code: 'BZ', label: 'Belize', phone: '501' },
+  {
+    code: 'CA',
+    label: 'Canada',
+    phone: '1',
+    suggested: true,
+  },
+  {
+    code: 'CC',
+    label: 'Cocos (Keeling) Islands',
+    phone: '61',
+  },
+  {
+    code: 'CD',
+    label: 'Congo, Democratic Republic of the',
+    phone: '243',
+  },
+  {
+    code: 'CF',
+    label: 'Central African Republic',
+    phone: '236',
+  },
+  {
+    code: 'CG',
+    label: 'Congo, Republic of the',
+    phone: '242',
+  },
+  { code: 'CH', label: 'Switzerland', phone: '41' },
+  { code: 'CI', label: "Cote d'Ivoire", phone: '225' },
+  { code: 'CK', label: 'Cook Islands', phone: '682' },
+  { code: 'CL', label: 'Chile', phone: '56' },
+  { code: 'CM', label: 'Cameroon', phone: '237' },
+  { code: 'CN', label: 'China', phone: '86' },
+  { code: 'CO', label: 'Colombia', phone: '57' },
+  { code: 'CR', label: 'Costa Rica', phone: '506' },
+  { code: 'CU', label: 'Cuba', phone: '53' },
+  { code: 'CV', label: 'Cape Verde', phone: '238' },
+  { code: 'CW', label: 'Curacao', phone: '599' },
+  { code: 'CX', label: 'Christmas Island', phone: '61' },
+  { code: 'CY', label: 'Cyprus', phone: '357' },
+  { code: 'CZ', label: 'Czech Republic', phone: '420' },
+  {
+    code: 'DE',
+    label: 'Germany',
+    phone: '49',
+    suggested: true,
+  },
+  { code: 'DJ', label: 'Djibouti', phone: '253' },
+  { code: 'DK', label: 'Denmark', phone: '45' },
+  { code: 'DM', label: 'Dominica', phone: '1-767' },
+  {
+    code: 'DO',
+    label: 'Dominican Republic',
+    phone: '1-809',
+  },
+  { code: 'DZ', label: 'Algeria', phone: '213' },
+  { code: 'EC', label: 'Ecuador', phone: '593' },
+  { code: 'EE', label: 'Estonia', phone: '372' },
+  { code: 'EG', label: 'Egypt', phone: '20' },
+  { code: 'EH', label: 'Western Sahara', phone: '212' },
+  { code: 'ER', label: 'Eritrea', phone: '291' },
+  { code: 'ES', label: 'Spain', phone: '34' },
+  { code: 'ET', label: 'Ethiopia', phone: '251' },
+  { code: 'FI', label: 'Finland', phone: '358' },
+  { code: 'FJ', label: 'Fiji', phone: '679' },
+  {
+    code: 'FK',
+    label: 'Falkland Islands (Malvinas)',
+    phone: '500',
+  },
+  {
+    code: 'FM',
+    label: 'Micronesia, Federated States of',
+    phone: '691',
+  },
+  { code: 'FO', label: 'Faroe Islands', phone: '298' },
+  {
+    code: 'FR',
+    label: 'France',
+    phone: '33',
+    suggested: true,
+  },
+  { code: 'GA', label: 'Gabon', phone: '241' },
+  { code: 'GB', label: 'United Kingdom', phone: '44' },
+  { code: 'GD', label: 'Grenada', phone: '1-473' },
+  { code: 'GE', label: 'Georgia', phone: '995' },
+  { code: 'GF', label: 'French Guiana', phone: '594' },
+  { code: 'GG', label: 'Guernsey', phone: '44' },
+  { code: 'GH', label: 'Ghana', phone: '233' },
+  { code: 'GI', label: 'Gibraltar', phone: '350' },
+  { code: 'GL', label: 'Greenland', phone: '299' },
+  { code: 'GM', label: 'Gambia', phone: '220' },
+  { code: 'GN', label: 'Guinea', phone: '224' },
+  { code: 'GP', label: 'Guadeloupe', phone: '590' },
+  { code: 'GQ', label: 'Equatorial Guinea', phone: '240' },
+  { code: 'GR', label: 'Greece', phone: '30' },
+  {
+    code: 'GS',
+    label: 'South Georgia and the South Sandwich Islands',
+    phone: '500',
+  },
+  { code: 'GT', label: 'Guatemala', phone: '502' },
+  { code: 'GU', label: 'Guam', phone: '1-671' },
+  { code: 'GW', label: 'Guinea-Bissau', phone: '245' },
+  { code: 'GY', label: 'Guyana', phone: '592' },
+  { code: 'HK', label: 'Hong Kong', phone: '852' },
+  {
+    code: 'HM',
+    label: 'Heard Island and McDonald Islands',
+    phone: '672',
+  },
+  { code: 'HN', label: 'Honduras', phone: '504' },
+  { code: 'HR', label: 'Croatia', phone: '385' },
+  { code: 'HT', label: 'Haiti', phone: '509' },
+  { code: 'HU', label: 'Hungary', phone: '36' },
+  { code: 'ID', label: 'Indonesia', phone: '62' },
+  { code: 'IE', label: 'Ireland', phone: '353' },
+  { code: 'IL', label: 'Israel', phone: '972' },
+  { code: 'IM', label: 'Isle of Man', phone: '44' },
+  { code: 'IN', label: 'India', phone: '91' },
+  {
+    code: 'IO',
+    label: 'British Indian Ocean Territory',
+    phone: '246',
+  },
+  { code: 'IQ', label: 'Iraq', phone: '964' },
+  {
+    code: 'IR',
+    label: 'Iran, Islamic Republic of',
+    phone: '98',
+  },
+  { code: 'IS', label: 'Iceland', phone: '354' },
+  { code: 'IT', label: 'Italy', phone: '39' },
+  { code: 'JE', label: 'Jersey', phone: '44' },
+  { code: 'JM', label: 'Jamaica', phone: '1-876' },
+  { code: 'JO', label: 'Jordan', phone: '962' },
+  {
+    code: 'JP',
+    label: 'Japan',
+    phone: '81',
+    suggested: true,
+  },
+  { code: 'KE', label: 'Kenya', phone: '254' },
+  { code: 'KG', label: 'Kyrgyzstan', phone: '996' },
+  { code: 'KH', label: 'Cambodia', phone: '855' },
+  { code: 'KI', label: 'Kiribati', phone: '686' },
+  { code: 'KM', label: 'Comoros', phone: '269' },
+  {
+    code: 'KN',
+    label: 'Saint Kitts and Nevis',
+    phone: '1-869',
+  },
+  {
+    code: 'KP',
+    label: "Korea, Democratic People's Republic of",
+    phone: '850',
+  },
+  { code: 'KR', label: 'Korea, Republic of', phone: '82' },
+  { code: 'KW', label: 'Kuwait', phone: '965' },
+  { code: 'KY', label: 'Cayman Islands', phone: '1-345' },
+  { code: 'KZ', label: 'Kazakhstan', phone: '7' },
+  {
+    code: 'LA',
+    label: "Lao People's Democratic Republic",
+    phone: '856',
+  },
+  { code: 'LB', label: 'Lebanon', phone: '961' },
+  { code: 'LC', label: 'Saint Lucia', phone: '1-758' },
+  { code: 'LI', label: 'Liechtenstein', phone: '423' },
+  { code: 'LK', label: 'Sri Lanka', phone: '94' },
+  { code: 'LR', label: 'Liberia', phone: '231' },
+  { code: 'LS', label: 'Lesotho', phone: '266' },
+  { code: 'LT', label: 'Lithuania', phone: '370' },
+  { code: 'LU', label: 'Luxembourg', phone: '352' },
+  { code: 'LV', label: 'Latvia', phone: '371' },
+  { code: 'LY', label: 'Libya', phone: '218' },
+  { code: 'MA', label: 'Morocco', phone: '212' },
+  { code: 'MC', label: 'Monaco', phone: '377' },
+  {
+    code: 'MD',
+    label: 'Moldova, Republic of',
+    phone: '373',
+  },
+  { code: 'ME', label: 'Montenegro', phone: '382' },
+  {
+    code: 'MF',
+    label: 'Saint Martin (French part)',
+    phone: '590',
+  },
+  { code: 'MG', label: 'Madagascar', phone: '261' },
+  { code: 'MH', label: 'Marshall Islands', phone: '692' },
+  {
+    code: 'MK',
+    label: 'Macedonia, the Former Yugoslav Republic of',
+    phone: '389',
+  },
+  { code: 'ML', label: 'Mali', phone: '223' },
+  { code: 'MM', label: 'Myanmar', phone: '95' },
+  { code: 'MN', label: 'Mongolia', phone: '976' },
+  { code: 'MO', label: 'Macao', phone: '853' },
+  {
+    code: 'MP',
+    label: 'Northern Mariana Islands',
+    phone: '1-670',
+  },
+  { code: 'MQ', label: 'Martinique', phone: '596' },
+  { code: 'MR', label: 'Mauritania', phone: '222' },
+  { code: 'MS', label: 'Montserrat', phone: '1-664' },
+  { code: 'MT', label: 'Malta', phone: '356' },
+  { code: 'MU', label: 'Mauritius', phone: '230' },
+  { code: 'MV', label: 'Maldives', phone: '960' },
+  { code: 'MW', label: 'Malawi', phone: '265' },
+  { code: 'MX', label: 'Mexico', phone: '52' },
+  { code: 'MY', label: 'Malaysia', phone: '60' },
+  { code: 'MZ', label: 'Mozambique', phone: '258' },
+  { code: 'NA', label: 'Namibia', phone: '264' },
+  { code: 'NC', label: 'New Caledonia', phone: '687' },
+  { code: 'NE', label: 'Niger', phone: '227' },
+  { code: 'NF', label: 'Norfolk Island', phone: '672' },
+  { code: 'NG', label: 'Nigeria', phone: '234' },
+  { code: 'NI', label: 'Nicaragua', phone: '505' },
+  { code: 'NL', label: 'Netherlands', phone: '31' },
+  { code: 'NO', label: 'Norway', phone: '47' },
+  { code: 'NP', label: 'Nepal', phone: '977' },
+  { code: 'NR', label: 'Nauru', phone: '674' },
+  { code: 'NU', label: 'Niue', phone: '683' },
+  { code: 'NZ', label: 'New Zealand', phone: '64' },
+  { code: 'OM', label: 'Oman', phone: '968' },
+  { code: 'PA', label: 'Panama', phone: '507' },
+  { code: 'PE', label: 'Peru', phone: '51' },
+  { code: 'PF', label: 'French Polynesia', phone: '689' },
+  { code: 'PG', label: 'Papua New Guinea', phone: '675' },
+  { code: 'PH', label: 'Philippines', phone: '63' },
+  { code: 'PK', label: 'Pakistan', phone: '92' },
+  { code: 'PL', label: 'Poland', phone: '48' },
+  {
+    code: 'PM',
+    label: 'Saint Pierre and Miquelon',
+    phone: '508',
+  },
+  { code: 'PN', label: 'Pitcairn', phone: '870' },
+  { code: 'PR', label: 'Puerto Rico', phone: '1' },
+  {
+    code: 'PS',
+    label: 'Palestine, State of',
+    phone: '970',
+  },
+  { code: 'PT', label: 'Portugal', phone: '351' },
+  { code: 'PW', label: 'Palau', phone: '680' },
+  { code: 'PY', label: 'Paraguay', phone: '595' },
+  { code: 'QA', label: 'Qatar', phone: '974' },
+  { code: 'RE', label: 'Reunion', phone: '262' },
+  { code: 'RO', label: 'Romania', phone: '40' },
+  { code: 'RS', label: 'Serbia', phone: '381' },
+  { code: 'RU', label: 'Russian Federation', phone: '7' },
+  { code: 'RW', label: 'Rwanda', phone: '250' },
+  { code: 'SA', label: 'Saudi Arabia', phone: '966' },
+  { code: 'SB', label: 'Solomon Islands', phone: '677' },
+  { code: 'SC', label: 'Seychelles', phone: '248' },
+  { code: 'SD', label: 'Sudan', phone: '249' },
+  { code: 'SE', label: 'Sweden', phone: '46' },
+  { code: 'SG', label: 'Singapore', phone: '65' },
+  { code: 'SH', label: 'Saint Helena', phone: '290' },
+  { code: 'SI', label: 'Slovenia', phone: '386' },
+  {
+    code: 'SJ',
+    label: 'Svalbard and Jan Mayen',
+    phone: '47',
+  },
+  { code: 'SK', label: 'Slovakia', phone: '421' },
+  { code: 'SL', label: 'Sierra Leone', phone: '232' },
+  { code: 'SM', label: 'San Marino', phone: '378' },
+  { code: 'SN', label: 'Senegal', phone: '221' },
+  { code: 'SO', label: 'Somalia', phone: '252' },
+  { code: 'SR', label: 'Suriname', phone: '597' },
+  { code: 'SS', label: 'South Sudan', phone: '211' },
+  {
+    code: 'ST',
+    label: 'Sao Tome and Principe',
+    phone: '239',
+  },
+  { code: 'SV', label: 'El Salvador', phone: '503' },
+  {
+    code: 'SX',
+    label: 'Sint Maarten (Dutch part)',
+    phone: '1-721',
+  },
+  {
+    code: 'SY',
+    label: 'Syrian Arab Republic',
+    phone: '963',
+  },
+  { code: 'SZ', label: 'Swaziland', phone: '268' },
+  {
+    code: 'TC',
+    label: 'Turks and Caicos Islands',
+    phone: '1-649',
+  },
+  { code: 'TD', label: 'Chad', phone: '235' },
+  {
+    code: 'TF',
+    label: 'French Southern Territories',
+    phone: '262',
+  },
+  { code: 'TG', label: 'Togo', phone: '228' },
+  { code: 'TH', label: 'Thailand', phone: '66' },
+  { code: 'TJ', label: 'Tajikistan', phone: '992' },
+  { code: 'TK', label: 'Tokelau', phone: '690' },
+  { code: 'TL', label: 'Timor-Leste', phone: '670' },
+  { code: 'TM', label: 'Turkmenistan', phone: '993' },
+  { code: 'TN', label: 'Tunisia', phone: '216' },
+  { code: 'TO', label: 'Tonga', phone: '676' },
+  { code: 'TR', label: 'Turkey', phone: '90' },
+  {
+    code: 'TT',
+    label: 'Trinidad and Tobago',
+    phone: '1-868',
+  },
+  { code: 'TV', label: 'Tuvalu', phone: '688' },
+  {
+    code: 'TW',
+    label: 'Taiwan',
+    phone: '886',
+  },
+  {
+    code: 'TZ',
+    label: 'United Republic of Tanzania',
+    phone: '255',
+  },
+  { code: 'UA', label: 'Ukraine', phone: '380' },
+  { code: 'UG', label: 'Uganda', phone: '256' },
+  {
+    code: 'US',
+    label: 'United States',
+    phone: '1',
+    suggested: true,
+  },
+  { code: 'UY', label: 'Uruguay', phone: '598' },
+  { code: 'UZ', label: 'Uzbekistan', phone: '998' },
+  {
+    code: 'VA',
+    label: 'Holy See (Vatican City State)',
+    phone: '379',
+  },
+  {
+    code: 'VC',
+    label: 'Saint Vincent and the Grenadines',
+    phone: '1-784',
+  },
+  { code: 'VE', label: 'Venezuela', phone: '58' },
+  {
+    code: 'VG',
+    label: 'British Virgin Islands',
+    phone: '1-284',
+  },
+  {
+    code: 'VI',
+    label: 'US Virgin Islands',
+    phone: '1-340',
+  },
+  { code: 'VN', label: 'Vietnam', phone: '84' },
+  { code: 'VU', label: 'Vanuatu', phone: '678' },
+  { code: 'WF', label: 'Wallis and Futuna', phone: '681' },
+  { code: 'WS', label: 'Samoa', phone: '685' },
+  { code: 'XK', label: 'Kosovo', phone: '383' },
+  { code: 'YE', label: 'Yemen', phone: '967' },
+  { code: 'YT', label: 'Mayotte', phone: '262' },
+  { code: 'ZA', label: 'South Africa', phone: '27' },
+  { code: 'ZM', label: 'Zambia', phone: '260' },
+  { code: 'ZW', label: 'Zimbabwe', phone: '263' },
+];

docs/data/joy/components/autocomplete/CountrySelect.tsx

@@ -0,0 +1,467 @@
+import Autocomplete from '@mui/joy/Autocomplete';
+import AutocompleteOption from '@mui/joy/AutocompleteOption';
+import ListItemDecorator from '@mui/joy/ListItemDecorator';
+import ListItemContent from '@mui/joy/ListItemContent';
+import Typography from '@mui/joy/Typography';
+
+export default function CountrySelect() {
+  return (
+    <Autocomplete
+      placeholder="Choose a country"
+      slotProps={{
+        input: {
+          autoComplete: 'new-password', // disable autocomplete and autofill
+        },
+      }}
+      sx={{ width: 300 }}
+      options={countries}
+      autoHighlight
+      getOptionLabel={(option) => option.label}
+      renderOption={(props, option) => (
+        <AutocompleteOption {...props}>
+          <ListItemDecorator>
+            <img
+              loading="lazy"
+              width="20"
+              srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
+              src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
+              alt=""
+            />
+          </ListItemDecorator>
+          <ListItemContent sx={{ fontSize: 'sm' }}>
+            {option.label}
+            <Typography level="body-xs">
+              ({option.code}) +{option.phone}
+            </Typography>
+          </ListItemContent>
+        </AutocompleteOption>
+      )}
+    />
+  );
+}
+
+// From https://bitbucket.org/atlassian/atlaskit-mk-2/raw/4ad0e56649c3e6c973e226b7efaeb28cb240ccb0/packages/core/select/src/data/countries.js
+const countries = [
+  { code: 'AD', label: 'Andorra', phone: '376' },
+  {
+    code: 'AE',
+    label: 'United Arab Emirates',
+    phone: '971',
+  },
+  { code: 'AF', label: 'Afghanistan', phone: '93' },
+  {
+    code: 'AG',
+    label: 'Antigua and Barbuda',
+    phone: '1-268',
+  },
+  { code: 'AI', label: 'Anguilla', phone: '1-264' },
+  { code: 'AL', label: 'Albania', phone: '355' },
+  { code: 'AM', label: 'Armenia', phone: '374' },
+  { code: 'AO', label: 'Angola', phone: '244' },
+  { code: 'AQ', label: 'Antarctica', phone: '672' },
+  { code: 'AR', label: 'Argentina', phone: '54' },
+  { code: 'AS', label: 'American Samoa', phone: '1-684' },
+  { code: 'AT', label: 'Austria', phone: '43' },
+  {
+    code: 'AU',
+    label: 'Australia',
+    phone: '61',
+    suggested: true,
+  },
+  { code: 'AW', label: 'Aruba', phone: '297' },
+  { code: 'AX', label: 'Alland Islands', phone: '358' },
+  { code: 'AZ', label: 'Azerbaijan', phone: '994' },
+  {
+    code: 'BA',
+    label: 'Bosnia and Herzegovina',
+    phone: '387',
+  },
+  { code: 'BB', label: 'Barbados', phone: '1-246' },
+  { code: 'BD', label: 'Bangladesh', phone: '880' },
+  { code: 'BE', label: 'Belgium', phone: '32' },
+  { code: 'BF', label: 'Burkina Faso', phone: '226' },
+  { code: 'BG', label: 'Bulgaria', phone: '359' },
+  { code: 'BH', label: 'Bahrain', phone: '973' },
+  { code: 'BI', label: 'Burundi', phone: '257' },
+  { code: 'BJ', label: 'Benin', phone: '229' },
+  { code: 'BL', label: 'Saint Barthelemy', phone: '590' },
+  { code: 'BM', label: 'Bermuda', phone: '1-441' },
+  { code: 'BN', label: 'Brunei Darussalam', phone: '673' },
+  { code: 'BO', label: 'Bolivia', phone: '591' },
+  { code: 'BR', label: 'Brazil', phone: '55' },
+  { code: 'BS', label: 'Bahamas', phone: '1-242' },
+  { code: 'BT', label: 'Bhutan', phone: '975' },
+  { code: 'BV', label: 'Bouvet Island', phone: '47' },
+  { code: 'BW', label: 'Botswana', phone: '267' },
+  { code: 'BY', label: 'Belarus', phone: '375' },
+  { code: 'BZ', label: 'Belize', phone: '501' },
+  {
+    code: 'CA',
+    label: 'Canada',
+    phone: '1',
+    suggested: true,
+  },
+  {
+    code: 'CC',
+    label: 'Cocos (Keeling) Islands',
+    phone: '61',
+  },
+  {
+    code: 'CD',
+    label: 'Congo, Democratic Republic of the',
+    phone: '243',
+  },
+  {
+    code: 'CF',
+    label: 'Central African Republic',
+    phone: '236',
+  },
+  {
+    code: 'CG',
+    label: 'Congo, Republic of the',
+    phone: '242',
+  },
+  { code: 'CH', label: 'Switzerland', phone: '41' },
+  { code: 'CI', label: "Cote d'Ivoire", phone: '225' },
+  { code: 'CK', label: 'Cook Islands', phone: '682' },
+  { code: 'CL', label: 'Chile', phone: '56' },
+  { code: 'CM', label: 'Cameroon', phone: '237' },
+  { code: 'CN', label: 'China', phone: '86' },
+  { code: 'CO', label: 'Colombia', phone: '57' },
+  { code: 'CR', label: 'Costa Rica', phone: '506' },
+  { code: 'CU', label: 'Cuba', phone: '53' },
+  { code: 'CV', label: 'Cape Verde', phone: '238' },
+  { code: 'CW', label: 'Curacao', phone: '599' },
+  { code: 'CX', label: 'Christmas Island', phone: '61' },
+  { code: 'CY', label: 'Cyprus', phone: '357' },
+  { code: 'CZ', label: 'Czech Republic', phone: '420' },
+  {
+    code: 'DE',
+    label: 'Germany',
+    phone: '49',
+    suggested: true,
+  },
+  { code: 'DJ', label: 'Djibouti', phone: '253' },
+  { code: 'DK', label: 'Denmark', phone: '45' },
+  { code: 'DM', label: 'Dominica', phone: '1-767' },
+  {
+    code: 'DO',
+    label: 'Dominican Republic',
+    phone: '1-809',
+  },
+  { code: 'DZ', label: 'Algeria', phone: '213' },
+  { code: 'EC', label: 'Ecuador', phone: '593' },
+  { code: 'EE', label: 'Estonia', phone: '372' },
+  { code: 'EG', label: 'Egypt', phone: '20' },
+  { code: 'EH', label: 'Western Sahara', phone: '212' },
+  { code: 'ER', label: 'Eritrea', phone: '291' },
+  { code: 'ES', label: 'Spain', phone: '34' },
+  { code: 'ET', label: 'Ethiopia', phone: '251' },
+  { code: 'FI', label: 'Finland', phone: '358' },
+  { code: 'FJ', label: 'Fiji', phone: '679' },
+  {
+    code: 'FK',
+    label: 'Falkland Islands (Malvinas)',
+    phone: '500',
+  },
+  {
+    code: 'FM',
+    label: 'Micronesia, Federated States of',
+    phone: '691',
+  },
+  { code: 'FO', label: 'Faroe Islands', phone: '298' },
+  {
+    code: 'FR',
+    label: 'France',
+    phone: '33',
+    suggested: true,
+  },
+  { code: 'GA', label: 'Gabon', phone: '241' },
+  { code: 'GB', label: 'United Kingdom', phone: '44' },
+  { code: 'GD', label: 'Grenada', phone: '1-473' },
+  { code: 'GE', label: 'Georgia', phone: '995' },
+  { code: 'GF', label: 'French Guiana', phone: '594' },
+  { code: 'GG', label: 'Guernsey', phone: '44' },
+  { code: 'GH', label: 'Ghana', phone: '233' },
+  { code: 'GI', label: 'Gibraltar', phone: '350' },
+  { code: 'GL', label: 'Greenland', phone: '299' },
+  { code: 'GM', label: 'Gambia', phone: '220' },
+  { code: 'GN', label: 'Guinea', phone: '224' },
+  { code: 'GP', label: 'Guadeloupe', phone: '590' },
+  { code: 'GQ', label: 'Equatorial Guinea', phone: '240' },
+  { code: 'GR', label: 'Greece', phone: '30' },
+  {
+    code: 'GS',
+    label: 'South Georgia and the South Sandwich Islands',
+    phone: '500',
+  },
+  { code: 'GT', label: 'Guatemala', phone: '502' },
+  { code: 'GU', label: 'Guam', phone: '1-671' },
+  { code: 'GW', label: 'Guinea-Bissau', phone: '245' },
+  { code: 'GY', label: 'Guyana', phone: '592' },
+  { code: 'HK', label: 'Hong Kong', phone: '852' },
+  {
+    code: 'HM',
+    label: 'Heard Island and McDonald Islands',
+    phone: '672',
+  },
+  { code: 'HN', label: 'Honduras', phone: '504' },
+  { code: 'HR', label: 'Croatia', phone: '385' },
+  { code: 'HT', label: 'Haiti', phone: '509' },
+  { code: 'HU', label: 'Hungary', phone: '36' },
+  { code: 'ID', label: 'Indonesia', phone: '62' },
+  { code: 'IE', label: 'Ireland', phone: '353' },
+  { code: 'IL', label: 'Israel', phone: '972' },
+  { code: 'IM', label: 'Isle of Man', phone: '44' },
+  { code: 'IN', label: 'India', phone: '91' },
+  {
+    code: 'IO',
+    label: 'British Indian Ocean Territory',
+    phone: '246',
+  },
+  { code: 'IQ', label: 'Iraq', phone: '964' },
+  {
+    code: 'IR',
+    label: 'Iran, Islamic Republic of',
+    phone: '98',
+  },
+  { code: 'IS', label: 'Iceland', phone: '354' },
+  { code: 'IT', label: 'Italy', phone: '39' },
+  { code: 'JE', label: 'Jersey', phone: '44' },
+  { code: 'JM', label: 'Jamaica', phone: '1-876' },
+  { code: 'JO', label: 'Jordan', phone: '962' },
+  {
+    code: 'JP',
+    label: 'Japan',
+    phone: '81',
+    suggested: true,
+  },
+  { code: 'KE', label: 'Kenya', phone: '254' },
+  { code: 'KG', label: 'Kyrgyzstan', phone: '996' },
+  { code: 'KH', label: 'Cambodia', phone: '855' },
+  { code: 'KI', label: 'Kiribati', phone: '686' },
+  { code: 'KM', label: 'Comoros', phone: '269' },
+  {
+    code: 'KN',
+    label: 'Saint Kitts and Nevis',
+    phone: '1-869',
+  },
+  {
+    code: 'KP',
+    label: "Korea, Democratic People's Republic of",
+    phone: '850',
+  },
+  { code: 'KR', label: 'Korea, Republic of', phone: '82' },
+  { code: 'KW', label: 'Kuwait', phone: '965' },
+  { code: 'KY', label: 'Cayman Islands', phone: '1-345' },
+  { code: 'KZ', label: 'Kazakhstan', phone: '7' },
+  {
+    code: 'LA',
+    label: "Lao People's Democratic Republic",
+    phone: '856',
+  },
+  { code: 'LB', label: 'Lebanon', phone: '961' },
+  { code: 'LC', label: 'Saint Lucia', phone: '1-758' },
+  { code: 'LI', label: 'Liechtenstein', phone: '423' },
+  { code: 'LK', label: 'Sri Lanka', phone: '94' },
+  { code: 'LR', label: 'Liberia', phone: '231' },
+  { code: 'LS', label: 'Lesotho', phone: '266' },
+  { code: 'LT', label: 'Lithuania', phone: '370' },
+  { code: 'LU', label: 'Luxembourg', phone: '352' },
+  { code: 'LV', label: 'Latvia', phone: '371' },
+  { code: 'LY', label: 'Libya', phone: '218' },
+  { code: 'MA', label: 'Morocco', phone: '212' },
+  { code: 'MC', label: 'Monaco', phone: '377' },
+  {
+    code: 'MD',
+    label: 'Moldova, Republic of',
+    phone: '373',
+  },
+  { code: 'ME', label: 'Montenegro', phone: '382' },
+  {
+    code: 'MF',
+    label: 'Saint Martin (French part)',
+    phone: '590',
+  },
+  { code: 'MG', label: 'Madagascar', phone: '261' },
+  { code: 'MH', label: 'Marshall Islands', phone: '692' },
+  {
+    code: 'MK',
+    label: 'Macedonia, the Former Yugoslav Republic of',
+    phone: '389',
+  },
+  { code: 'ML', label: 'Mali', phone: '223' },
+  { code: 'MM', label: 'Myanmar', phone: '95' },
+  { code: 'MN', label: 'Mongolia', phone: '976' },
+  { code: 'MO', label: 'Macao', phone: '853' },
+  {
+    code: 'MP',
+    label: 'Northern Mariana Islands',
+    phone: '1-670',
+  },
+  { code: 'MQ', label: 'Martinique', phone: '596' },
+  { code: 'MR', label: 'Mauritania', phone: '222' },
+  { code: 'MS', label: 'Montserrat', phone: '1-664' },
+  { code: 'MT', label: 'Malta', phone: '356' },
+  { code: 'MU', label: 'Mauritius', phone: '230' },
+  { code: 'MV', label: 'Maldives', phone: '960' },
+  { code: 'MW', label: 'Malawi', phone: '265' },
+  { code: 'MX', label: 'Mexico', phone: '52' },
+  { code: 'MY', label: 'Malaysia', phone: '60' },
+  { code: 'MZ', label: 'Mozambique', phone: '258' },
+  { code: 'NA', label: 'Namibia', phone: '264' },
+  { code: 'NC', label: 'New Caledonia', phone: '687' },
+  { code: 'NE', label: 'Niger', phone: '227' },
+  { code: 'NF', label: 'Norfolk Island', phone: '672' },
+  { code: 'NG', label: 'Nigeria', phone: '234' },
+  { code: 'NI', label: 'Nicaragua', phone: '505' },
+  { code: 'NL', label: 'Netherlands', phone: '31' },
+  { code: 'NO', label: 'Norway', phone: '47' },
+  { code: 'NP', label: 'Nepal', phone: '977' },
+  { code: 'NR', label: 'Nauru', phone: '674' },
+  { code: 'NU', label: 'Niue', phone: '683' },
+  { code: 'NZ', label: 'New Zealand', phone: '64' },
+  { code: 'OM', label: 'Oman', phone: '968' },
+  { code: 'PA', label: 'Panama', phone: '507' },
+  { code: 'PE', label: 'Peru', phone: '51' },
+  { code: 'PF', label: 'French Polynesia', phone: '689' },
+  { code: 'PG', label: 'Papua New Guinea', phone: '675' },
+  { code: 'PH', label: 'Philippines', phone: '63' },
+  { code: 'PK', label: 'Pakistan', phone: '92' },
+  { code: 'PL', label: 'Poland', phone: '48' },
+  {
+    code: 'PM',
+    label: 'Saint Pierre and Miquelon',
+    phone: '508',
+  },
+  { code: 'PN', label: 'Pitcairn', phone: '870' },
+  { code: 'PR', label: 'Puerto Rico', phone: '1' },
+  {
+    code: 'PS',
+    label: 'Palestine, State of',
+    phone: '970',
+  },
+  { code: 'PT', label: 'Portugal', phone: '351' },
+  { code: 'PW', label: 'Palau', phone: '680' },
+  { code: 'PY', label: 'Paraguay', phone: '595' },
+  { code: 'QA', label: 'Qatar', phone: '974' },
+  { code: 'RE', label: 'Reunion', phone: '262' },
+  { code: 'RO', label: 'Romania', phone: '40' },
+  { code: 'RS', label: 'Serbia', phone: '381' },
+  { code: 'RU', label: 'Russian Federation', phone: '7' },
+  { code: 'RW', label: 'Rwanda', phone: '250' },
+  { code: 'SA', label: 'Saudi Arabia', phone: '966' },
+  { code: 'SB', label: 'Solomon Islands', phone: '677' },
+  { code: 'SC', label: 'Seychelles', phone: '248' },
+  { code: 'SD', label: 'Sudan', phone: '249' },
+  { code: 'SE', label: 'Sweden', phone: '46' },
+  { code: 'SG', label: 'Singapore', phone: '65' },
+  { code: 'SH', label: 'Saint Helena', phone: '290' },
+  { code: 'SI', label: 'Slovenia', phone: '386' },
+  {
+    code: 'SJ',
+    label: 'Svalbard and Jan Mayen',
+    phone: '47',
+  },
+  { code: 'SK', label: 'Slovakia', phone: '421' },
+  { code: 'SL', label: 'Sierra Leone', phone: '232' },
+  { code: 'SM', label: 'San Marino', phone: '378' },
+  { code: 'SN', label: 'Senegal', phone: '221' },
+  { code: 'SO', label: 'Somalia', phone: '252' },
+  { code: 'SR', label: 'Suriname', phone: '597' },
+  { code: 'SS', label: 'South Sudan', phone: '211' },
+  {
+    code: 'ST',
+    label: 'Sao Tome and Principe',
+    phone: '239',
+  },
+  { code: 'SV', label: 'El Salvador', phone: '503' },
+  {
+    code: 'SX',
+    label: 'Sint Maarten (Dutch part)',
+    phone: '1-721',
+  },
+  {
+    code: 'SY',
+    label: 'Syrian Arab Republic',
+    phone: '963',
+  },
+  { code: 'SZ', label: 'Swaziland', phone: '268' },
+  {
+    code: 'TC',
+    label: 'Turks and Caicos Islands',
+    phone: '1-649',
+  },
+  { code: 'TD', label: 'Chad', phone: '235' },
+  {
+    code: 'TF',
+    label: 'French Southern Territories',
+    phone: '262',
+  },
+  { code: 'TG', label: 'Togo', phone: '228' },
+  { code: 'TH', label: 'Thailand', phone: '66' },
+  { code: 'TJ', label: 'Tajikistan', phone: '992' },
+  { code: 'TK', label: 'Tokelau', phone: '690' },
+  { code: 'TL', label: 'Timor-Leste', phone: '670' },
+  { code: 'TM', label: 'Turkmenistan', phone: '993' },
+  { code: 'TN', label: 'Tunisia', phone: '216' },
+  { code: 'TO', label: 'Tonga', phone: '676' },
+  { code: 'TR', label: 'Turkey', phone: '90' },
+  {
+    code: 'TT',
+    label: 'Trinidad and Tobago',
+    phone: '1-868',
+  },
+  { code: 'TV', label: 'Tuvalu', phone: '688' },
+  {
+    code: 'TW',
+    label: 'Taiwan',
+    phone: '886',
+  },
+  {
+    code: 'TZ',
+    label: 'United Republic of Tanzania',
+    phone: '255',
+  },
+  { code: 'UA', label: 'Ukraine', phone: '380' },
+  { code: 'UG', label: 'Uganda', phone: '256' },
+  {
+    code: 'US',
+    label: 'United States',
+    phone: '1',
+    suggested: true,
+  },
+  { code: 'UY', label: 'Uruguay', phone: '598' },
+  { code: 'UZ', label: 'Uzbekistan', phone: '998' },
+  {
+    code: 'VA',
+    label: 'Holy See (Vatican City State)',
+    phone: '379',
+  },
+  {
+    code: 'VC',
+    label: 'Saint Vincent and the Grenadines',
+    phone: '1-784',
+  },
+  { code: 'VE', label: 'Venezuela', phone: '58' },
+  {
+    code: 'VG',
+    label: 'British Virgin Islands',
+    phone: '1-284',
+  },
+  {
+    code: 'VI',
+    label: 'US Virgin Islands',
+    phone: '1-340',
+  },
+  { code: 'VN', label: 'Vietnam', phone: '84' },
+  { code: 'VU', label: 'Vanuatu', phone: '678' },
+  { code: 'WF', label: 'Wallis and Futuna', phone: '681' },
+  { code: 'WS', label: 'Samoa', phone: '685' },
+  { code: 'XK', label: 'Kosovo', phone: '383' },
+  { code: 'YE', label: 'Yemen', phone: '967' },
+  { code: 'YT', label: 'Mayotte', phone: '262' },
+  { code: 'ZA', label: 'South Africa', phone: '27' },
+  { code: 'ZM', label: 'Zambia', phone: '260' },
+  { code: 'ZW', label: 'Zimbabwe', phone: '263' },
+];

docs/data/joy/components/autocomplete/CustomTags.js

@@ -0,0 +1,156 @@
+import Autocomplete from '@mui/joy/Autocomplete';
+import Chip from '@mui/joy/Chip';
+import Close from '@mui/icons-material/Close';
+
+export default function CustomTags() {
+  return (
+    <Autocomplete
+      multiple
+      placeholder="Favorites"
+      options={top100Films}
+      getOptionLabel={(option) => option.title}
+      defaultValue={[top100Films[13]]}
+      renderTags={(tags, getTagProps) =>
+        tags.map((item, index) => (
+          <Chip
+            variant="solid"
+            color="primary"
+            endDecorator={<Close fontSize="sm" />}
+            sx={{ minWidth: 0 }}
+            {...getTagProps({ index })}
+          >
+            {item.title}
+          </Chip>
+        ))
+      }
+    />
+  );
+}
+
+// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
+const top100Films = [
+  { title: 'The Shawshank Redemption', year: 1994 },
+  { title: 'The Godfather', year: 1972 },
+  { title: 'The Godfather: Part II', year: 1974 },
+  { title: 'The Dark Knight', year: 2008 },
+  { title: '12 Angry Men', year: 1957 },
+  { title: "Schindler's List", year: 1993 },
+  { title: 'Pulp Fiction', year: 1994 },
+  {
+    title: 'The Lord of the Rings: The Return of the King',
+    year: 2003,
+  },
+  { title: 'The Good, the Bad and the Ugly', year: 1966 },
+  { title: 'Fight Club', year: 1999 },
+  {
+    title: 'The Lord of the Rings: The Fellowship of the Ring',
+    year: 2001,
+  },
+  {
+    title: 'Star Wars: Episode V - The Empire Strikes Back',
+    year: 1980,
+  },
+  { title: 'Forrest Gump', year: 1994 },
+  { title: 'Inception', year: 2010 },
+  {
+    title: 'The Lord of the Rings: The Two Towers',
+    year: 2002,
+  },
+  { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
+  { title: 'Goodfellas', year: 1990 },
+  { title: 'The Matrix', year: 1999 },
+  { title: 'Seven Samurai', year: 1954 },
+  {
+    title: 'Star Wars: Episode IV - A New Hope',
+    year: 1977,
+  },
+  { title: 'City of God', year: 2002 },
+  { title: 'Se7en', year: 1995 },
+  { title: 'The Silence of the Lambs', year: 1991 },
+  { title: "It's a Wonderful Life", year: 1946 },
+  { title: 'Life Is Beautiful', year: 1997 },
+  { title: 'The Usual Suspects', year: 1995 },
+  { title: 'Léon: The Professional', year: 1994 },
+  { title: 'Spirited Away', year: 2001 },
+  { title: 'Saving Private Ryan', year: 1998 },
+  { title: 'Once Upon a Time in the West', year: 1968 },
+  { title: 'American History X', year: 1998 },
+  { title: 'Interstellar', year: 2014 },
+  { title: 'Casablanca', year: 1942 },
+  { title: 'City Lights', year: 1931 },
+  { title: 'Psycho', year: 1960 },
+  { title: 'The Green Mile', year: 1999 },
+  { title: 'The Intouchables', year: 2011 },
+  { title: 'Modern Times', year: 1936 },
+  { title: 'Raiders of the Lost Ark', year: 1981 },
+  { title: 'Rear Window', year: 1954 },
+  { title: 'The Pianist', year: 2002 },
+  { title: 'The Departed', year: 2006 },
+  { title: 'Terminator 2: Judgment Day', year: 1991 },
+  { title: 'Back to the Future', year: 1985 },
+  { title: 'Whiplash', year: 2014 },
+  { title: 'Gladiator', year: 2000 },
+  { title: 'Memento', year: 2000 },
+  { title: 'The Prestige', year: 2006 },
+  { title: 'The Lion King', year: 1994 },
+  { title: 'Apocalypse Now', year: 1979 },
+  { title: 'Alien', year: 1979 },
+  { title: 'Sunset Boulevard', year: 1950 },
+  {
+    title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
+    year: 1964,
+  },
+  { title: 'The Great Dictator', year: 1940 },
+  { title: 'Cinema Paradiso', year: 1988 },
+  { title: 'The Lives of Others', year: 2006 },
+  { title: 'Grave of the Fireflies', year: 1988 },
+  { title: 'Paths of Glory', year: 1957 },
+  { title: 'Django Unchained', year: 2012 },
+  { title: 'The Shining', year: 1980 },
+  { title: 'WALL·E', year: 2008 },
+  { title: 'American Beauty', year: 1999 },
+  { title: 'The Dark Knight Rises', year: 2012 },
+  { title: 'Princess Mononoke', year: 1997 },
+  { title: 'Aliens', year: 1986 },
+  { title: 'Oldboy', year: 2003 },
+  { title: 'Once Upon a Time in America', year: 1984 },
+  { title: 'Witness for the Prosecution', year: 1957 },
+  { title: 'Das Boot', year: 1981 },
+  { title: 'Citizen Kane', year: 1941 },
+  { title: 'North by Northwest', year: 1959 },
+  { title: 'Vertigo', year: 1958 },
+  {
+    title: 'Star Wars: Episode VI - Return of the Jedi',
+    year: 1983,
+  },
+  { title: 'Reservoir Dogs', year: 1992 },
+  { title: 'Braveheart', year: 1995 },
+  { title: 'M', year: 1931 },
+  { title: 'Requiem for a Dream', year: 2000 },
+  { title: 'Amélie', year: 2001 },
+  { title: 'A Clockwork Orange', year: 1971 },
+  { title: 'Like Stars on Earth', year: 2007 },
+  { title: 'Taxi Driver', year: 1976 },
+  { title: 'Lawrence of Arabia', year: 1962 },
+  { title: 'Double Indemnity', year: 1944 },
+  {
+    title: 'Eternal Sunshine of the Spotless Mind',
+    year: 2004,
+  },
+  { title: 'Amadeus', year: 1984 },
+  { title: 'To Kill a Mockingbird', year: 1962 },
+  { title: 'Toy Story 3', year: 2010 },
+  { title: 'Logan', year: 2017 },
+  { title: 'Full Metal Jacket', year: 1987 },
+  { title: 'Dangal', year: 2016 },
+  { title: 'The Sting', year: 1973 },
+  { title: '2001: A Space Odyssey', year: 1968 },
+  { title: "Singin' in the Rain", year: 1952 },
+  { title: 'Toy Story', year: 1995 },
+  { title: 'Bicycle Thieves', year: 1948 },
+  { title: 'The Kid', year: 1921 },
+  { title: 'Inglourious Basterds', year: 2009 },
+  { title: 'Snatch', year: 2000 },
+  { title: '3 Idiots', year: 2009 },
+  { title: 'Monty Python and the Holy Grail', year: 1975 },
+];

docs/data/joy/components/autocomplete/CustomTags.tsx

@@ -0,0 +1,156 @@
+import Autocomplete from '@mui/joy/Autocomplete';
+import Chip from '@mui/joy/Chip';
+import Close from '@mui/icons-material/Close';
+
+export default function CustomTags() {
+  return (
+    <Autocomplete
+      multiple
+      placeholder="Favorites"
+      options={top100Films}
+      getOptionLabel={(option) => option.title}
+      defaultValue={[top100Films[13]]}
+      renderTags={(tags, getTagProps) =>
+        tags.map((item, index) => (
+          <Chip
+            variant="solid"
+            color="primary"
+            endDecorator={<Close fontSize="sm" />}
+            sx={{ minWidth: 0 }}
+            {...getTagProps({ index })}
+          >
+            {item.title}
+          </Chip>
+        ))
+      }
+    />
+  );
+}
+
+// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
+const top100Films = [
+  { title: 'The Shawshank Redemption', year: 1994 },
+  { title: 'The Godfather', year: 1972 },
+  { title: 'The Godfather: Part II', year: 1974 },
+  { title: 'The Dark Knight', year: 2008 },
+  { title: '12 Angry Men', year: 1957 },
+  { title: "Schindler's List", year: 1993 },
+  { title: 'Pulp Fiction', year: 1994 },
+  {
+    title: 'The Lord of the Rings: The Return of the King',
+    year: 2003,
+  },
+  { title: 'The Good, the Bad and the Ugly', year: 1966 },
+  { title: 'Fight Club', year: 1999 },
+  {
+    title: 'The Lord of the Rings: The Fellowship of the Ring',
+    year: 2001,
+  },
+  {
+    title: 'Star Wars: Episode V - The Empire Strikes Back',
+    year: 1980,
+  },
+  { title: 'Forrest Gump', year: 1994 },
+  { title: 'Inception', year: 2010 },
+  {
+    title: 'The Lord of the Rings: The Two Towers',
+    year: 2002,
+  },
+  { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
+  { title: 'Goodfellas', year: 1990 },
+  { title: 'The Matrix', year: 1999 },
+  { title: 'Seven Samurai', year: 1954 },
+  {
+    title: 'Star Wars: Episode IV - A New Hope',
+    year: 1977,
+  },
+  { title: 'City of God', year: 2002 },
+  { title: 'Se7en', year: 1995 },
+  { title: 'The Silence of the Lambs', year: 1991 },
+  { title: "It's a Wonderful Life", year: 1946 },
+  { title: 'Life Is Beautiful', year: 1997 },
+  { title: 'The Usual Suspects', year: 1995 },
+  { title: 'Léon: The Professional', year: 1994 },
+  { title: 'Spirited Away', year: 2001 },
+  { title: 'Saving Private Ryan', year: 1998 },
+  { title: 'Once Upon a Time in the West', year: 1968 },
+  { title: 'American History X', year: 1998 },
+  { title: 'Interstellar', year: 2014 },
+  { title: 'Casablanca', year: 1942 },
+  { title: 'City Lights', year: 1931 },
+  { title: 'Psycho', year: 1960 },
+  { title: 'The Green Mile', year: 1999 },
+  { title: 'The Intouchables', year: 2011 },
+  { title: 'Modern Times', year: 1936 },
+  { title: 'Raiders of the Lost Ark', year: 1981 },
+  { title: 'Rear Window', year: 1954 },
+  { title: 'The Pianist', year: 2002 },
+  { title: 'The Departed', year: 2006 },
+  { title: 'Terminator 2: Judgment Day', year: 1991 },
+  { title: 'Back to the Future', year: 1985 },
+  { title: 'Whiplash', year: 2014 },
+  { title: 'Gladiator', year: 2000 },
+  { title: 'Memento', year: 2000 },
+  { title: 'The Prestige', year: 2006 },
+  { title: 'The Lion King', year: 1994 },
+  { title: 'Apocalypse Now', year: 1979 },
+  { title: 'Alien', year: 1979 },
+  { title: 'Sunset Boulevard', year: 1950 },
+  {
+    title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
+    year: 1964,
+  },
+  { title: 'The Great Dictator', year: 1940 },
+  { title: 'Cinema Paradiso', year: 1988 },
+  { title: 'The Lives of Others', year: 2006 },
+  { title: 'Grave of the Fireflies', year: 1988 },
+  { title: 'Paths of Glory', year: 1957 },
+  { title: 'Django Unchained', year: 2012 },
+  { title: 'The Shining', year: 1980 },
+  { title: 'WALL·E', year: 2008 },
+  { title: 'American Beauty', year: 1999 },
+  { title: 'The Dark Knight Rises', year: 2012 },
+  { title: 'Princess Mononoke', year: 1997 },
+  { title: 'Aliens', year: 1986 },
+  { title: 'Oldboy', year: 2003 },
+  { title: 'Once Upon a Time in America', year: 1984 },
+  { title: 'Witness for the Prosecution', year: 1957 },
+  { title: 'Das Boot', year: 1981 },
+  { title: 'Citizen Kane', year: 1941 },
+  { title: 'North by Northwest', year: 1959 },
+  { title: 'Vertigo', year: 1958 },
+  {
+    title: 'Star Wars: Episode VI - Return of the Jedi',
+    year: 1983,
+  },
+  { title: 'Reservoir Dogs', year: 1992 },
+  { title: 'Braveheart', year: 1995 },
+  { title: 'M', year: 1931 },
+  { title: 'Requiem for a Dream', year: 2000 },
+  { title: 'Amélie', year: 2001 },
+  { title: 'A Clockwork Orange', year: 1971 },
+  { title: 'Like Stars on Earth', year: 2007 },
+  { title: 'Taxi Driver', year: 1976 },
+  { title: 'Lawrence of Arabia', year: 1962 },
+  { title: 'Double Indemnity', year: 1944 },
+  {
+    title: 'Eternal Sunshine of the Spotless Mind',
+    year: 2004,
+  },
+  { title: 'Amadeus', year: 1984 },
+  { title: 'To Kill a Mockingbird', year: 1962 },
+  { title: 'Toy Story 3', year: 2010 },
+  { title: 'Logan', year: 2017 },
+  { title: 'Full Metal Jacket', year: 1987 },
+  { title: 'Dangal', year: 2016 },
+  { title: 'The Sting', year: 1973 },
+  { title: '2001: A Space Odyssey', year: 1968 },
+  { title: "Singin' in the Rain", year: 1952 },
+  { title: 'Toy Story', year: 1995 },
+  { title: 'Bicycle Thieves', year: 1948 },
+  { title: 'The Kid', year: 1921 },
+  { title: 'Inglourious Basterds', year: 2009 },
+  { title: 'Snatch', year: 2000 },
+  { title: '3 Idiots', year: 2009 },
+  { title: 'Monty Python and the Holy Grail', year: 1975 },
+];

docs/data/joy/components/autocomplete/DisabledOptions.js

@@ -0,0 +1,27 @@
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import Autocomplete from '@mui/joy/Autocomplete';
+
+export default function DisabledOptions() {
+  return (
+    <FormControl id="disabled-options-demo">
+      <FormLabel>Disabled options</FormLabel>
+      <Autocomplete
+        options={timeSlots}
+        placeholder="Disabled options"
+        getOptionDisabled={(option) =>
+          option === timeSlots[0] || option === timeSlots[2]
+        }
+        sx={{ width: 300 }}
+      />
+    </FormControl>
+  );
+}
+
+// One time slot every 30 minutes.
+const timeSlots = Array.from(new Array(24 * 2)).map(
+  (_, index) =>
+    `${index < 20 ? '0' : ''}${Math.floor(index / 2)}:${
+      index % 2 === 0 ? '00' : '30'
+    }`,
+);

docs/data/joy/components/autocomplete/DisabledOptions.tsx

@@ -0,0 +1,27 @@
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import Autocomplete from '@mui/joy/Autocomplete';
+
+export default function DisabledOptions() {
+  return (
+    <FormControl id="disabled-options-demo">
+      <FormLabel>Disabled options</FormLabel>
+      <Autocomplete
+        options={timeSlots}
+        placeholder="Disabled options"
+        getOptionDisabled={(option) =>
+          option === timeSlots[0] || option === timeSlots[2]
+        }
+        sx={{ width: 300 }}
+      />
+    </FormControl>
+  );
+}
+
+// One time slot every 30 minutes.
+const timeSlots = Array.from(new Array(24 * 2)).map(
+  (_, index) =>
+    `${index < 20 ? '0' : ''}${Math.floor(index / 2)}:${
+      index % 2 === 0 ? '00' : '30'
+    }`,
+);

docs/data/joy/components/autocomplete/DisabledOptions.tsx.preview

@@ -0,0 +1,11 @@
+<FormControl id="disabled-options-demo">
+  <FormLabel>Disabled options</FormLabel>
+  <Autocomplete
+    options={timeSlots}
+    placeholder="Disabled options"
+    getOptionDisabled={(option) =>
+      option === timeSlots[0] || option === timeSlots[2]
+    }
+    sx={{ width: 300 }}
+  />
+</FormControl>

docs/data/joy/components/autocomplete/Filter.js

@@ -0,0 +1,151 @@
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import Autocomplete, { createFilterOptions } from '@mui/joy/Autocomplete';
+
+const filterOptions = createFilterOptions({
+  matchFrom: 'start',
+  stringify: (option) => option.title,
+});
+
+export default function Filter() {
+  return (
+    <FormControl id="filter-demo">
+      <FormLabel>Custom filter</FormLabel>
+      <Autocomplete
+        placeholder="Type something"
+        options={top100Films}
+        getOptionLabel={(option) => option.title}
+        filterOptions={filterOptions}
+        sx={{ width: 300 }}
+      />
+    </FormControl>
+  );
+}
+
+// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
+const top100Films = [
+  { title: 'The Shawshank Redemption', year: 1994 },
+  { title: 'The Godfather', year: 1972 },
+  { title: 'The Godfather: Part II', year: 1974 },
+  { title: 'The Dark Knight', year: 2008 },
+  { title: '12 Angry Men', year: 1957 },
+  { title: "Schindler's List", year: 1993 },
+  { title: 'Pulp Fiction', year: 1994 },
+  {
+    title: 'The Lord of the Rings: The Return of the King',
+    year: 2003,
+  },
+  { title: 'The Good, the Bad and the Ugly', year: 1966 },
+  { title: 'Fight Club', year: 1999 },
+  {
+    title: 'The Lord of the Rings: The Fellowship of the Ring',
+    year: 2001,
+  },
+  {
+    title: 'Star Wars: Episode V - The Empire Strikes Back',
+    year: 1980,
+  },
+  { title: 'Forrest Gump', year: 1994 },
+  { title: 'Inception', year: 2010 },
+  {
+    title: 'The Lord of the Rings: The Two Towers',
+    year: 2002,
+  },
+  { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
+  { title: 'Goodfellas', year: 1990 },
+  { title: 'The Matrix', year: 1999 },
+  { title: 'Seven Samurai', year: 1954 },
+  {
+    title: 'Star Wars: Episode IV - A New Hope',
+    year: 1977,
+  },
+  { title: 'City of God', year: 2002 },
+  { title: 'Se7en', year: 1995 },
+  { title: 'The Silence of the Lambs', year: 1991 },
+  { title: "It's a Wonderful Life", year: 1946 },
+  { title: 'Life Is Beautiful', year: 1997 },
+  { title: 'The Usual Suspects', year: 1995 },
+  { title: 'Léon: The Professional', year: 1994 },
+  { title: 'Spirited Away', year: 2001 },
+  { title: 'Saving Private Ryan', year: 1998 },
+  { title: 'Once Upon a Time in the West', year: 1968 },
+  { title: 'American History X', year: 1998 },
+  { title: 'Interstellar', year: 2014 },
+  { title: 'Casablanca', year: 1942 },
+  { title: 'City Lights', year: 1931 },
+  { title: 'Psycho', year: 1960 },
+  { title: 'The Green Mile', year: 1999 },
+  { title: 'The Intouchables', year: 2011 },
+  { title: 'Modern Times', year: 1936 },
+  { title: 'Raiders of the Lost Ark', year: 1981 },
+  { title: 'Rear Window', year: 1954 },
+  { title: 'The Pianist', year: 2002 },
+  { title: 'The Departed', year: 2006 },
+  { title: 'Terminator 2: Judgment Day', year: 1991 },
+  { title: 'Back to the Future', year: 1985 },
+  { title: 'Whiplash', year: 2014 },
+  { title: 'Gladiator', year: 2000 },
+  { title: 'Memento', year: 2000 },
+  { title: 'The Prestige', year: 2006 },
+  { title: 'The Lion King', year: 1994 },
+  { title: 'Apocalypse Now', year: 1979 },
+  { title: 'Alien', year: 1979 },
+  { title: 'Sunset Boulevard', year: 1950 },
+  {
+    title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
+    year: 1964,
+  },
+  { title: 'The Great Dictator', year: 1940 },
+  { title: 'Cinema Paradiso', year: 1988 },
+  { title: 'The Lives of Others', year: 2006 },
+  { title: 'Grave of the Fireflies', year: 1988 },
+  { title: 'Paths of Glory', year: 1957 },
+  { title: 'Django Unchained', year: 2012 },
+  { title: 'The Shining', year: 1980 },
+  { title: 'WALL·E', year: 2008 },
+  { title: 'American Beauty', year: 1999 },
+  { title: 'The Dark Knight Rises', year: 2012 },
+  { title: 'Princess Mononoke', year: 1997 },
+  { title: 'Aliens', year: 1986 },
+  { title: 'Oldboy', year: 2003 },
+  { title: 'Once Upon a Time in America', year: 1984 },
+  { title: 'Witness for the Prosecution', year: 1957 },
+  { title: 'Das Boot', year: 1981 },
+  { title: 'Citizen Kane', year: 1941 },
+  { title: 'North by Northwest', year: 1959 },
+  { title: 'Vertigo', year: 1958 },
+  {
+    title: 'Star Wars: Episode VI - Return of the Jedi',
+    year: 1983,
+  },
+  { title: 'Reservoir Dogs', year: 1992 },
+  { title: 'Braveheart', year: 1995 },
+  { title: 'M', year: 1931 },
+  { title: 'Requiem for a Dream', year: 2000 },
+  { title: 'Amélie', year: 2001 },
+  { title: 'A Clockwork Orange', year: 1971 },
+  { title: 'Like Stars on Earth', year: 2007 },
+  { title: 'Taxi Driver', year: 1976 },
+  { title: 'Lawrence of Arabia', year: 1962 },
+  { title: 'Double Indemnity', year: 1944 },
+  {
+    title: 'Eternal Sunshine of the Spotless Mind',
+    year: 2004,
+  },
+  { title: 'Amadeus', year: 1984 },
+  { title: 'To Kill a Mockingbird', year: 1962 },
+  { title: 'Toy Story 3', year: 2010 },
+  { title: 'Logan', year: 2017 },
+  { title: 'Full Metal Jacket', year: 1987 },
+  { title: 'Dangal', year: 2016 },
+  { title: 'The Sting', year: 1973 },
+  { title: '2001: A Space Odyssey', year: 1968 },
+  { title: "Singin' in the Rain", year: 1952 },
+  { title: 'Toy Story', year: 1995 },
+  { title: 'Bicycle Thieves', year: 1948 },
+  { title: 'The Kid', year: 1921 },
+  { title: 'Inglourious Basterds', year: 2009 },
+  { title: 'Snatch', year: 2000 },
+  { title: '3 Idiots', year: 2009 },
+  { title: 'Monty Python and the Holy Grail', year: 1975 },
+];

docs/data/joy/components/autocomplete/Filter.tsx

@@ -0,0 +1,151 @@
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import Autocomplete, { createFilterOptions } from '@mui/joy/Autocomplete';
+
+const filterOptions = createFilterOptions({
+  matchFrom: 'start',
+  stringify: (option: { title: string }) => option.title,
+});
+
+export default function Filter() {
+  return (
+    <FormControl id="filter-demo">
+      <FormLabel>Custom filter</FormLabel>
+      <Autocomplete
+        placeholder="Type something"
+        options={top100Films}
+        getOptionLabel={(option) => option.title}
+        filterOptions={filterOptions}
+        sx={{ width: 300 }}
+      />
+    </FormControl>
+  );
+}
+
+// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
+const top100Films = [
+  { title: 'The Shawshank Redemption', year: 1994 },
+  { title: 'The Godfather', year: 1972 },
+  { title: 'The Godfather: Part II', year: 1974 },
+  { title: 'The Dark Knight', year: 2008 },
+  { title: '12 Angry Men', year: 1957 },
+  { title: "Schindler's List", year: 1993 },
+  { title: 'Pulp Fiction', year: 1994 },
+  {
+    title: 'The Lord of the Rings: The Return of the King',
+    year: 2003,
+  },
+  { title: 'The Good, the Bad and the Ugly', year: 1966 },
+  { title: 'Fight Club', year: 1999 },
+  {
+    title: 'The Lord of the Rings: The Fellowship of the Ring',
+    year: 2001,
+  },
+  {
+    title: 'Star Wars: Episode V - The Empire Strikes Back',
+    year: 1980,
+  },
+  { title: 'Forrest Gump', year: 1994 },
+  { title: 'Inception', year: 2010 },
+  {
+    title: 'The Lord of the Rings: The Two Towers',
+    year: 2002,
+  },
+  { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
+  { title: 'Goodfellas', year: 1990 },
+  { title: 'The Matrix', year: 1999 },
+  { title: 'Seven Samurai', year: 1954 },
+  {
+    title: 'Star Wars: Episode IV - A New Hope',
+    year: 1977,
+  },
+  { title: 'City of God', year: 2002 },
+  { title: 'Se7en', year: 1995 },
+  { title: 'The Silence of the Lambs', year: 1991 },
+  { title: "It's a Wonderful Life", year: 1946 },
+  { title: 'Life Is Beautiful', year: 1997 },
+  { title: 'The Usual Suspects', year: 1995 },
+  { title: 'Léon: The Professional', year: 1994 },
+  { title: 'Spirited Away', year: 2001 },
+  { title: 'Saving Private Ryan', year: 1998 },
+  { title: 'Once Upon a Time in the West', year: 1968 },
+  { title: 'American History X', year: 1998 },
+  { title: 'Interstellar', year: 2014 },
+  { title: 'Casablanca', year: 1942 },
+  { title: 'City Lights', year: 1931 },
+  { title: 'Psycho', year: 1960 },
+  { title: 'The Green Mile', year: 1999 },
+  { title: 'The Intouchables', year: 2011 },
+  { title: 'Modern Times', year: 1936 },
+  { title: 'Raiders of the Lost Ark', year: 1981 },
+  { title: 'Rear Window', year: 1954 },
+  { title: 'The Pianist', year: 2002 },
+  { title: 'The Departed', year: 2006 },
+  { title: 'Terminator 2: Judgment Day', year: 1991 },
+  { title: 'Back to the Future', year: 1985 },
+  { title: 'Whiplash', year: 2014 },
+  { title: 'Gladiator', year: 2000 },
+  { title: 'Memento', year: 2000 },
+  { title: 'The Prestige', year: 2006 },
+  { title: 'The Lion King', year: 1994 },
+  { title: 'Apocalypse Now', year: 1979 },
+  { title: 'Alien', year: 1979 },
+  { title: 'Sunset Boulevard', year: 1950 },
+  {
+    title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
+    year: 1964,
+  },
+  { title: 'The Great Dictator', year: 1940 },
+  { title: 'Cinema Paradiso', year: 1988 },
+  { title: 'The Lives of Others', year: 2006 },
+  { title: 'Grave of the Fireflies', year: 1988 },
+  { title: 'Paths of Glory', year: 1957 },
+  { title: 'Django Unchained', year: 2012 },
+  { title: 'The Shining', year: 1980 },
+  { title: 'WALL·E', year: 2008 },
+  { title: 'American Beauty', year: 1999 },
+  { title: 'The Dark Knight Rises', year: 2012 },
+  { title: 'Princess Mononoke', year: 1997 },
+  { title: 'Aliens', year: 1986 },
+  { title: 'Oldboy', year: 2003 },
+  { title: 'Once Upon a Time in America', year: 1984 },
+  { title: 'Witness for the Prosecution', year: 1957 },
+  { title: 'Das Boot', year: 1981 },
+  { title: 'Citizen Kane', year: 1941 },
+  { title: 'North by Northwest', year: 1959 },
+  { title: 'Vertigo', year: 1958 },
+  {
+    title: 'Star Wars: Episode VI - Return of the Jedi',
+    year: 1983,
+  },
+  { title: 'Reservoir Dogs', year: 1992 },
+  { title: 'Braveheart', year: 1995 },
+  { title: 'M', year: 1931 },
+  { title: 'Requiem for a Dream', year: 2000 },
+  { title: 'Amélie', year: 2001 },
+  { title: 'A Clockwork Orange', year: 1971 },
+  { title: 'Like Stars on Earth', year: 2007 },
+  { title: 'Taxi Driver', year: 1976 },
+  { title: 'Lawrence of Arabia', year: 1962 },
+  { title: 'Double Indemnity', year: 1944 },
+  {
+    title: 'Eternal Sunshine of the Spotless Mind',
+    year: 2004,
+  },
+  { title: 'Amadeus', year: 1984 },
+  { title: 'To Kill a Mockingbird', year: 1962 },
+  { title: 'Toy Story 3', year: 2010 },
+  { title: 'Logan', year: 2017 },
+  { title: 'Full Metal Jacket', year: 1987 },
+  { title: 'Dangal', year: 2016 },
+  { title: 'The Sting', year: 1973 },
+  { title: '2001: A Space Odyssey', year: 1968 },
+  { title: "Singin' in the Rain", year: 1952 },
+  { title: 'Toy Story', year: 1995 },
+  { title: 'Bicycle Thieves', year: 1948 },
+  { title: 'The Kid', year: 1921 },
+  { title: 'Inglourious Basterds', year: 2009 },
+  { title: 'Snatch', year: 2000 },
+  { title: '3 Idiots', year: 2009 },
+  { title: 'Monty Python and the Holy Grail', year: 1975 },
+];

docs/data/joy/components/autocomplete/Filter.tsx.preview

@@ -0,0 +1,10 @@
+<FormControl id="filter-demo">
+  <FormLabel>Custom filter</FormLabel>
+  <Autocomplete
+    placeholder="Type something"
+    options={top100Films}
+    getOptionLabel={(option) => option.title}
+    filterOptions={filterOptions}
+    sx={{ width: 300 }}
+  />
+</FormControl>

docs/data/joy/components/autocomplete/FixedTags.js

@@ -0,0 +1,171 @@
+import * as React from 'react';
+import Chip from '@mui/joy/Chip';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import Autocomplete from '@mui/joy/Autocomplete';
+
+export default function FixedTags() {
+  const fixedOptions = [top100Films[6]];
+  const [value, setValue] = React.useState([...fixedOptions, top100Films[13]]);
+
+  return (
+    <FormControl id="fixed-tags-demo">
+      <FormLabel>Fixed tags</FormLabel>
+      <Autocomplete
+        multiple
+        placeholder="Favorites"
+        value={value}
+        onChange={(event, newValue) => {
+          setValue([
+            ...fixedOptions,
+            ...newValue.filter((option) => !fixedOptions.includes(option)),
+          ]);
+        }}
+        options={top100Films}
+        getOptionLabel={(option) => option.title}
+        renderTags={(tagValue, getTagProps) =>
+          tagValue.map((option, index) => (
+            <Chip
+              variant="soft"
+              color="neutral"
+              sx={{ minWidth: 0 }}
+              {...getTagProps({ index })}
+              disabled={fixedOptions.includes(option)}
+            >
+              {option.title}
+            </Chip>
+          ))
+        }
+        sx={{ width: '500px' }}
+      />
+    </FormControl>
+  );
+}
+
+// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
+const top100Films = [
+  { title: 'The Shawshank Redemption', year: 1994 },
+  { title: 'The Godfather', year: 1972 },
+  { title: 'The Godfather: Part II', year: 1974 },
+  { title: 'The Dark Knight', year: 2008 },
+  { title: '12 Angry Men', year: 1957 },
+  { title: "Schindler's List", year: 1993 },
+  { title: 'Pulp Fiction', year: 1994 },
+  {
+    title: 'The Lord of the Rings: The Return of the King',
+    year: 2003,
+  },
+  { title: 'The Good, the Bad and the Ugly', year: 1966 },
+  { title: 'Fight Club', year: 1999 },
+  {
+    title: 'The Lord of the Rings: The Fellowship of the Ring',
+    year: 2001,
+  },
+  {
+    title: 'Star Wars: Episode V - The Empire Strikes Back',
+    year: 1980,
+  },
+  { title: 'Forrest Gump', year: 1994 },
+  { title: 'Inception', year: 2010 },
+  {
+    title: 'The Lord of the Rings: The Two Towers',
+    year: 2002,
+  },
+  { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
+  { title: 'Goodfellas', year: 1990 },
+  { title: 'The Matrix', year: 1999 },
+  { title: 'Seven Samurai', year: 1954 },
+  {
+    title: 'Star Wars: Episode IV - A New Hope',
+    year: 1977,
+  },
+  { title: 'City of God', year: 2002 },
+  { title: 'Se7en', year: 1995 },
+  { title: 'The Silence of the Lambs', year: 1991 },
+  { title: "It's a Wonderful Life", year: 1946 },
+  { title: 'Life Is Beautiful', year: 1997 },
+  { title: 'The Usual Suspects', year: 1995 },
+  { title: 'Léon: The Professional', year: 1994 },
+  { title: 'Spirited Away', year: 2001 },
+  { title: 'Saving Private Ryan', year: 1998 },
+  { title: 'Once Upon a Time in the West', year: 1968 },
+  { title: 'American History X', year: 1998 },
+  { title: 'Interstellar', year: 2014 },
+  { title: 'Casablanca', year: 1942 },
+  { title: 'City Lights', year: 1931 },
+  { title: 'Psycho', year: 1960 },
+  { title: 'The Green Mile', year: 1999 },
+  { title: 'The Intouchables', year: 2011 },
+  { title: 'Modern Times', year: 1936 },
+  { title: 'Raiders of the Lost Ark', year: 1981 },
+  { title: 'Rear Window', year: 1954 },
+  { title: 'The Pianist', year: 2002 },
+  { title: 'The Departed', year: 2006 },
+  { title: 'Terminator 2: Judgment Day', year: 1991 },
+  { title: 'Back to the Future', year: 1985 },
+  { title: 'Whiplash', year: 2014 },
+  { title: 'Gladiator', year: 2000 },
+  { title: 'Memento', year: 2000 },
+  { title: 'The Prestige', year: 2006 },
+  { title: 'The Lion King', year: 1994 },
+  { title: 'Apocalypse Now', year: 1979 },
+  { title: 'Alien', year: 1979 },
+  { title: 'Sunset Boulevard', year: 1950 },
+  {
+    title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
+    year: 1964,
+  },
+  { title: 'The Great Dictator', year: 1940 },
+  { title: 'Cinema Paradiso', year: 1988 },
+  { title: 'The Lives of Others', year: 2006 },
+  { title: 'Grave of the Fireflies', year: 1988 },
+  { title: 'Paths of Glory', year: 1957 },
+  { title: 'Django Unchained', year: 2012 },
+  { title: 'The Shining', year: 1980 },
+  { title: 'WALL·E', year: 2008 },
+  { title: 'American Beauty', year: 1999 },
+  { title: 'The Dark Knight Rises', year: 2012 },
+  { title: 'Princess Mononoke', year: 1997 },
+  { title: 'Aliens', year: 1986 },
+  { title: 'Oldboy', year: 2003 },
+  { title: 'Once Upon a Time in America', year: 1984 },
+  { title: 'Witness for the Prosecution', year: 1957 },
+  { title: 'Das Boot', year: 1981 },
+  { title: 'Citizen Kane', year: 1941 },
+  { title: 'North by Northwest', year: 1959 },
+  { title: 'Vertigo', year: 1958 },
+  {
+    title: 'Star Wars: Episode VI - Return of the Jedi',
+    year: 1983,
+  },
+  { title: 'Reservoir Dogs', year: 1992 },
+  { title: 'Braveheart', year: 1995 },
+  { title: 'M', year: 1931 },
+  { title: 'Requiem for a Dream', year: 2000 },
+  { title: 'Amélie', year: 2001 },
+  { title: 'A Clockwork Orange', year: 1971 },
+  { title: 'Like Stars on Earth', year: 2007 },
+  { title: 'Taxi Driver', year: 1976 },
+  { title: 'Lawrence of Arabia', year: 1962 },
+  { title: 'Double Indemnity', year: 1944 },
+  {
+    title: 'Eternal Sunshine of the Spotless Mind',
+    year: 2004,
+  },
+  { title: 'Amadeus', year: 1984 },
+  { title: 'To Kill a Mockingbird', year: 1962 },
+  { title: 'Toy Story 3', year: 2010 },
+  { title: 'Logan', year: 2017 },
+  { title: 'Full Metal Jacket', year: 1987 },
+  { title: 'Dangal', year: 2016 },
+  { title: 'The Sting', year: 1973 },
+  { title: '2001: A Space Odyssey', year: 1968 },
+  { title: "Singin' in the Rain", year: 1952 },
+  { title: 'Toy Story', year: 1995 },
+  { title: 'Bicycle Thieves', year: 1948 },
+  { title: 'The Kid', year: 1921 },
+  { title: 'Inglourious Basterds', year: 2009 },
+  { title: 'Snatch', year: 2000 },
+  { title: '3 Idiots', year: 2009 },
+  { title: 'Monty Python and the Holy Grail', year: 1975 },
+];