From 374324dca140c27e4f018eb8ab813ece0cceeea1 Mon Sep 17 00:00:00 2001
From: Albert Yu <albert@albertyu.co>
Date: Fri, 28 Jul 2023 18:49:10 +0800
Subject: [PATCH] Update UseAutocomplete demos

---
 .../autocomplete/UseAutocomplete/css/index.js | 328 +++++++++++++++++
 .../UseAutocomplete/css/index.tsx             | 330 ++++++++++++++++++
 .../system/index.js}                          |   8 +-
 .../system/index.tsx}                         |   8 +-
 .../system/index.tsx.preview}                 |   0
 .../UseAutocomplete/tailwind/index.js         | 196 +++++++++++
 .../UseAutocomplete/tailwind/index.tsx        | 198 +++++++++++
 .../components/autocomplete/autocomplete.md   |   2 +-
 8 files changed, 1063 insertions(+), 7 deletions(-)
 create mode 100644 docs/data/base/components/autocomplete/UseAutocomplete/css/index.js
 create mode 100644 docs/data/base/components/autocomplete/UseAutocomplete/css/index.tsx
 rename docs/data/base/components/autocomplete/{UseAutocomplete.js => UseAutocomplete/system/index.js} (98%)
 rename docs/data/base/components/autocomplete/{UseAutocomplete.tsx => UseAutocomplete/system/index.tsx} (98%)
 rename docs/data/base/components/autocomplete/{UseAutocomplete.tsx.preview => UseAutocomplete/system/index.tsx.preview} (100%)
 create mode 100644 docs/data/base/components/autocomplete/UseAutocomplete/tailwind/index.js
 create mode 100644 docs/data/base/components/autocomplete/UseAutocomplete/tailwind/index.tsx

diff --git a/docs/data/base/components/autocomplete/UseAutocomplete/css/index.js b/docs/data/base/components/autocomplete/UseAutocomplete/css/index.js
new file mode 100644
index 00000000000000..67395e4cfcedec
--- /dev/null
+++ b/docs/data/base/components/autocomplete/UseAutocomplete/css/index.js
@@ -0,0 +1,328 @@
+import * as React from 'react';
+import useAutocomplete from '@mui/base/useAutocomplete';
+import { useTheme } from '@mui/system';
+
+export default function UseAutocomplete() {
+  const [value, setValue] = React.useState(null);
+
+  const {
+    getRootProps,
+    getInputLabelProps,
+    getInputProps,
+    getListboxProps,
+    getOptionProps,
+    groupedOptions,
+  } = useAutocomplete({
+    id: 'use-autocomplete-demo',
+    options: top100Films,
+    getOptionLabel: (option) => option.label,
+    value,
+    onChange: (event, newValue) => setValue(newValue),
+  });
+
+  return (
+    <React.Fragment>
+      <div className="BasicAutocomplete">
+        <label
+          {...getInputLabelProps()}
+          htmlFor="use-autocomplete-demo"
+          className="label"
+        >
+          Pick a movie:
+        </label>
+        <div {...getRootProps()} className="root">
+          <input {...getInputProps()} className="input" />
+        </div>
+        {groupedOptions.length > 0 && (
+          <ul {...getListboxProps()} className="listbox">
+            {groupedOptions.map((option, index) => (
+              <li {...getOptionProps({ option, index })} className="option">
+                {option.label}
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+      <Styles />
+    </React.Fragment>
+  );
+}
+
+const cyan = {
+  50: '#E9F8FC',
+  100: '#BDEBF4',
+  200: '#99D8E5',
+  300: '#66BACC',
+  400: '#1F94AD',
+  500: '#0D5463',
+  600: '#094855',
+  700: '#063C47',
+  800: '#043039',
+  900: '#022127',
+};
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E7EBF0',
+  200: '#E0E3E7',
+  300: '#CDD2D7',
+  400: '#B2BAC2',
+  500: '#A0AAB4',
+  600: '#6F7E8C',
+  700: '#3E5060',
+  800: '#2D3843',
+  900: '#1A2027',
+};
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+function Styles() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+
+  return (
+    <style>
+      {`
+      .BasicAutocomplete .label {
+        display: block;
+        font-family: sans-serif;
+        font-size: 14px;
+        font-weight: 500;
+        margin-bottom: 4px;
+      }
+
+      .BasicAutocomplete {
+        margin-bottom: 24px;
+      }
+
+      .BasicAutocomplete .root {
+        font-family: IBM Plex Sans, sans-serif;
+        font-weight: 400;
+        border-radius: 8px;
+        color: ${isDarkMode ? grey[300] : grey[500]};
+        background: ${isDarkMode ? grey[900] : '#fff'};
+        border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
+        box-shadow: 0px 2px 2px ${isDarkMode ? grey[900] : grey[50]};
+        display: flex;
+        gap: 5px;
+        padding-right: 5px;
+        overflow: hidden;
+        width: 320px;
+
+        &.focused {
+          border-color: ${cyan[400]};
+          box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]};
+        }
+
+        &:hover {
+          border-color: ${cyan[400]};
+        }
+
+        &:focus-visible {
+          outline: 0;
+        }
+      }
+
+      .BasicAutocomplete .input {
+        font-size: 0.875rem;
+        font-family: inherit;
+        font-weight: 400;
+        line-height: 1.5;
+        color: ${isDarkMode ? grey[300] : grey[900]};
+        background: inherit;
+        border: none;
+        border-radius: inherit;
+        padding: 8px 12px;
+        outline: 0;
+        flex: 1 0 auto;
+      }
+
+      .BasicAutocomplete .listbox {
+        font-family: IBM Plex Sans, sans-serif;
+        font-size: 0.875rem;
+        box-sizing: border-box;
+        padding: 6px;
+        margin: 12px 0;
+        max-width: 320px;
+        border-radius: 12px;
+        overflow: auto;
+        outline: 0px;
+        max-height: 300px;
+        z-index: 1;
+        position: absolute;
+        background: ${isDarkMode ? grey[900] : '#fff'};
+        border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
+        color: ${isDarkMode ? grey[300] : grey[900]};
+        box-shadow: 0px 4px 30px ${isDarkMode ? grey[900] : grey[200]};
+      }
+
+      .BasicAutocomplete .option {
+        list-style: none;
+        padding: 8px;
+        border-radius: 8px;
+        cursor: default;
+
+        &:last-of-type {
+          border-bottom: none;
+        }
+
+        &:hover {
+          cursor: pointer;
+        }
+
+        &[aria-selected=true] {
+          background-color: ${isDarkMode ? cyan[900] : cyan[100]};
+          color: ${isDarkMode ? cyan[100] : cyan[900]};
+        }
+
+        &.Mui-focused,
+        &.Mui-focusVisible {
+          background-color: ${isDarkMode ? grey[800] : grey[100]};
+          color: ${isDarkMode ? grey[300] : grey[900]};
+        }
+
+        &.Mui-focusVisible {
+          box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]};
+        }
+
+        &[aria-selected=true].Mui-focused,
+        &[aria-selected=true].Mui-focusVisible {
+          background-color: ${isDarkMode ? cyan[900] : cyan[100]};
+          color: ${isDarkMode ? cyan[100] : cyan[900]};
+        }
+      }
+      `}
+    </style>
+  );
+}
+
+// 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 },
+];
diff --git a/docs/data/base/components/autocomplete/UseAutocomplete/css/index.tsx b/docs/data/base/components/autocomplete/UseAutocomplete/css/index.tsx
new file mode 100644
index 00000000000000..5cd22de154453b
--- /dev/null
+++ b/docs/data/base/components/autocomplete/UseAutocomplete/css/index.tsx
@@ -0,0 +1,330 @@
+import * as React from 'react';
+import useAutocomplete from '@mui/base/useAutocomplete';
+import { useTheme } from '@mui/system';
+
+export default function UseAutocomplete() {
+  const [value, setValue] = React.useState<(typeof top100Films)[number] | null>(
+    null,
+  );
+
+  const {
+    getRootProps,
+    getInputLabelProps,
+    getInputProps,
+    getListboxProps,
+    getOptionProps,
+    groupedOptions,
+  } = useAutocomplete({
+    id: 'use-autocomplete-demo',
+    options: top100Films,
+    getOptionLabel: (option) => option.label,
+    value,
+    onChange: (event, newValue) => setValue(newValue),
+  });
+
+  return (
+    <React.Fragment>
+      <div className="BasicAutocomplete">
+        <label
+          {...getInputLabelProps()}
+          htmlFor="use-autocomplete-demo"
+          className="label"
+        >
+          Pick a movie:
+        </label>
+        <div {...getRootProps()} className="root">
+          <input {...getInputProps()} className="input" />
+        </div>
+        {groupedOptions.length > 0 && (
+          <ul {...getListboxProps()} className="listbox">
+            {(groupedOptions as typeof top100Films).map((option, index) => (
+              <li {...getOptionProps({ option, index })} className="option">
+                {option.label}
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+      <Styles />
+    </React.Fragment>
+  );
+}
+
+const cyan = {
+  50: '#E9F8FC',
+  100: '#BDEBF4',
+  200: '#99D8E5',
+  300: '#66BACC',
+  400: '#1F94AD',
+  500: '#0D5463',
+  600: '#094855',
+  700: '#063C47',
+  800: '#043039',
+  900: '#022127',
+};
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E7EBF0',
+  200: '#E0E3E7',
+  300: '#CDD2D7',
+  400: '#B2BAC2',
+  500: '#A0AAB4',
+  600: '#6F7E8C',
+  700: '#3E5060',
+  800: '#2D3843',
+  900: '#1A2027',
+};
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+function Styles() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+
+  return (
+    <style>
+      {`
+      .BasicAutocomplete .label {
+        display: block;
+        font-family: sans-serif;
+        font-size: 14px;
+        font-weight: 500;
+        margin-bottom: 4px;
+      }
+
+      .BasicAutocomplete {
+        margin-bottom: 24px;
+      }
+
+      .BasicAutocomplete .root {
+        font-family: IBM Plex Sans, sans-serif;
+        font-weight: 400;
+        border-radius: 8px;
+        color: ${isDarkMode ? grey[300] : grey[500]};
+        background: ${isDarkMode ? grey[900] : '#fff'};
+        border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
+        box-shadow: 0px 2px 2px ${isDarkMode ? grey[900] : grey[50]};
+        display: flex;
+        gap: 5px;
+        padding-right: 5px;
+        overflow: hidden;
+        width: 320px;
+
+        &.focused {
+          border-color: ${cyan[400]};
+          box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]};
+        }
+
+        &:hover {
+          border-color: ${cyan[400]};
+        }
+
+        &:focus-visible {
+          outline: 0;
+        }
+      }
+
+      .BasicAutocomplete .input {
+        font-size: 0.875rem;
+        font-family: inherit;
+        font-weight: 400;
+        line-height: 1.5;
+        color: ${isDarkMode ? grey[300] : grey[900]};
+        background: inherit;
+        border: none;
+        border-radius: inherit;
+        padding: 8px 12px;
+        outline: 0;
+        flex: 1 0 auto;
+      }
+
+      .BasicAutocomplete .listbox {
+        font-family: IBM Plex Sans, sans-serif;
+        font-size: 0.875rem;
+        box-sizing: border-box;
+        padding: 6px;
+        margin: 12px 0;
+        max-width: 320px;
+        border-radius: 12px;
+        overflow: auto;
+        outline: 0px;
+        max-height: 300px;
+        z-index: 1;
+        position: absolute;
+        background: ${isDarkMode ? grey[900] : '#fff'};
+        border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
+        color: ${isDarkMode ? grey[300] : grey[900]};
+        box-shadow: 0px 4px 30px ${isDarkMode ? grey[900] : grey[200]};
+      }
+
+      .BasicAutocomplete .option {
+        list-style: none;
+        padding: 8px;
+        border-radius: 8px;
+        cursor: default;
+
+        &:last-of-type {
+          border-bottom: none;
+        }
+
+        &:hover {
+          cursor: pointer;
+        }
+
+        &[aria-selected=true] {
+          background-color: ${isDarkMode ? cyan[900] : cyan[100]};
+          color: ${isDarkMode ? cyan[100] : cyan[900]};
+        }
+
+        &.Mui-focused,
+        &.Mui-focusVisible {
+          background-color: ${isDarkMode ? grey[800] : grey[100]};
+          color: ${isDarkMode ? grey[300] : grey[900]};
+        }
+
+        &.Mui-focusVisible {
+          box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]};
+        }
+
+        &[aria-selected=true].Mui-focused,
+        &[aria-selected=true].Mui-focusVisible {
+          background-color: ${isDarkMode ? cyan[900] : cyan[100]};
+          color: ${isDarkMode ? cyan[100] : cyan[900]};
+        }
+      }
+      `}
+    </style>
+  );
+}
+
+// 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 },
+];
diff --git a/docs/data/base/components/autocomplete/UseAutocomplete.js b/docs/data/base/components/autocomplete/UseAutocomplete/system/index.js
similarity index 98%
rename from docs/data/base/components/autocomplete/UseAutocomplete.js
rename to docs/data/base/components/autocomplete/UseAutocomplete/system/index.js
index 37c371caff7198..0eabcf5a2492ac 100644
--- a/docs/data/base/components/autocomplete/UseAutocomplete.js
+++ b/docs/data/base/components/autocomplete/UseAutocomplete/system/index.js
@@ -73,7 +73,7 @@ const StyledAutocompleteRoot = styled('div')(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-weight: 400;
-  border-radius: 12px;
+  border-radius: 8px;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
@@ -109,7 +109,7 @@ const StyledInput = styled('input')(
   background: inherit;
   border: none;
   border-radius: inherit;
-  padding: 12px 12px;
+  padding: 8px 12px;
   outline: 0;
   flex: 1 0 auto;
 `,
@@ -132,7 +132,9 @@ const StyledListbox = styled('ul')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
+  box-shadow: 0px 4px 6px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
+  };
   `,
 );
 
diff --git a/docs/data/base/components/autocomplete/UseAutocomplete.tsx b/docs/data/base/components/autocomplete/UseAutocomplete/system/index.tsx
similarity index 98%
rename from docs/data/base/components/autocomplete/UseAutocomplete.tsx
rename to docs/data/base/components/autocomplete/UseAutocomplete/system/index.tsx
index 9e9fab0fde4d92..d43cf94db84a71 100644
--- a/docs/data/base/components/autocomplete/UseAutocomplete.tsx
+++ b/docs/data/base/components/autocomplete/UseAutocomplete/system/index.tsx
@@ -75,7 +75,7 @@ const StyledAutocompleteRoot = styled('div')(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-weight: 400;
-  border-radius: 12px;
+  border-radius: 8px;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
@@ -111,7 +111,7 @@ const StyledInput = styled('input')(
   background: inherit;
   border: none;
   border-radius: inherit;
-  padding: 12px 12px;
+  padding: 8px 12px;
   outline: 0;
   flex: 1 0 auto;
 `,
@@ -134,7 +134,9 @@ const StyledListbox = styled('ul')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
+  box-shadow: 0px 4px 6px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
+  };
   `,
 );
 
diff --git a/docs/data/base/components/autocomplete/UseAutocomplete.tsx.preview b/docs/data/base/components/autocomplete/UseAutocomplete/system/index.tsx.preview
similarity index 100%
rename from docs/data/base/components/autocomplete/UseAutocomplete.tsx.preview
rename to docs/data/base/components/autocomplete/UseAutocomplete/system/index.tsx.preview
diff --git a/docs/data/base/components/autocomplete/UseAutocomplete/tailwind/index.js b/docs/data/base/components/autocomplete/UseAutocomplete/tailwind/index.js
new file mode 100644
index 00000000000000..95aa0ebe4e6570
--- /dev/null
+++ b/docs/data/base/components/autocomplete/UseAutocomplete/tailwind/index.js
@@ -0,0 +1,196 @@
+import * as React from 'react';
+import useAutocomplete from '@mui/base/useAutocomplete';
+import clsx from 'clsx';
+
+export default function UseAutocomplete() {
+  const [value, setValue] = React.useState(null);
+
+  const {
+    getRootProps,
+    getInputLabelProps,
+    getInputProps,
+    getListboxProps,
+    getOptionProps,
+    groupedOptions,
+    focused,
+  } = useAutocomplete({
+    id: 'use-autocomplete-demo',
+    options: top100Films,
+    getOptionLabel: (option) => option.label,
+    isOptionEqualToValue: (option, val) => option.label === val.label,
+    value,
+    onChange: (event, newValue) => setValue(newValue),
+  });
+
+  return (
+    <div style={{ marginBottom: 24 }}>
+      <label
+        {...getInputLabelProps()}
+        htmlFor="use-autocomplete-demo"
+        className="block text-sm font-medium mb-1"
+      >
+        Pick a movie:
+      </label>
+      <div className="w-80">
+        <div
+          {...getRootProps()}
+          className={clsx(
+            'flex gap-[5px] pr-[5px] overflow-hidden w-full rounded-lg bg-white dark:bg-slate-800 border border-solid border-slate-200 dark:border-slate-700 hover:border-purple-400 dark:hover:border-purple-400 focus-visible:outline-0',
+            !focused &&
+              'shadow-[0_2px_2px_transparent] shadow-slate-50 dark:shadow-slate-900',
+            focused &&
+              'border-purple-400 dark:border-purple-400 shadow-outline-purple',
+          )}
+        >
+          <input
+            {...getInputProps()}
+            className="text-sm leading-[1.5] text-slate-900 dark:text-slate-300 bg-inherit border-0 rounded-[inherit] px-3 py-2 outline-0 grow shrink-0 basis-auto"
+          />
+        </div>
+        {groupedOptions.length > 0 && (
+          <ul
+            {...getListboxProps()}
+            className="text-sm box-border p-1.5 my-3 mx-0 w-full rounded-xl overflow-auto outline-0 max-h-[300px] z-[1] bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-200 shadow shadow-slate-200 dark:shadow-slate-900"
+          >
+            {groupedOptions.map((option, index) => (
+              <li
+                {...getOptionProps({ option, index })}
+                className="list-none p-2 rounded-lg cursor-default last-of-type:border-b-0 hover:cursor-pointer aria-selected:bg-purple-100 dark:aria-selected:bg-purple-900 aria-selected:text-purple-900 dark:aria-selected:text-purple-100 ui-focused:bg-slate-100 dark:ui-focused:bg-slate-700 ui-focus-visible:bg-slate-100 dark:ui-focus-visible:bg-slate-800 ui-focused:text-slate-900 dark:ui-focused:text-slate-300 ui-focus-visible:text-slate-900 dark:ui-focus-visible:text-slate-300 ui-focus-visible:shadow-[0_0_0_3px_transparent] ui-focus-visible:shadow-purple-200 dark:ui-focus-visible:shadow-purple-500 ui-focused:aria-selected:bg-purple-100 dark:ui-focused:aria-selected:bg-purple-900 ui-focus-visible:aria-selected:bg-purple-100 dark:ui-focus-visible:aria-selected:bg-purple-900 ui-focused:aria-selected:text-purple-900 dark:ui-focused:aria-selected:text-purple-100 ui-focus-visible:aria-selected:text-purple-900 dark:ui-focus-visible:aria-selected:text-purple-100"
+              >
+                {option.label}
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// 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 },
+];
diff --git a/docs/data/base/components/autocomplete/UseAutocomplete/tailwind/index.tsx b/docs/data/base/components/autocomplete/UseAutocomplete/tailwind/index.tsx
new file mode 100644
index 00000000000000..2af5d403f9ff14
--- /dev/null
+++ b/docs/data/base/components/autocomplete/UseAutocomplete/tailwind/index.tsx
@@ -0,0 +1,198 @@
+import * as React from 'react';
+import useAutocomplete from '@mui/base/useAutocomplete';
+import clsx from 'clsx';
+
+export default function UseAutocomplete() {
+  const [value, setValue] = React.useState<(typeof top100Films)[number] | null>(
+    null,
+  );
+
+  const {
+    getRootProps,
+    getInputLabelProps,
+    getInputProps,
+    getListboxProps,
+    getOptionProps,
+    groupedOptions,
+    focused,
+  } = useAutocomplete({
+    id: 'use-autocomplete-demo',
+    options: top100Films,
+    getOptionLabel: (option) => option.label,
+    isOptionEqualToValue: (option, val) => option.label === val.label,
+    value,
+    onChange: (event, newValue) => setValue(newValue),
+  });
+
+  return (
+    <div style={{ marginBottom: 24 }}>
+      <label
+        {...getInputLabelProps()}
+        htmlFor="use-autocomplete-demo"
+        className="block text-sm font-medium mb-1"
+      >
+        Pick a movie:
+      </label>
+      <div className="w-80">
+        <div
+          {...getRootProps()}
+          className={clsx(
+            'flex gap-[5px] pr-[5px] overflow-hidden w-full rounded-lg bg-white dark:bg-slate-800 border border-solid border-slate-200 dark:border-slate-700 hover:border-purple-400 dark:hover:border-purple-400 focus-visible:outline-0',
+            !focused &&
+              'shadow-[0_2px_2px_transparent] shadow-slate-50 dark:shadow-slate-900',
+            focused &&
+              'border-purple-400 dark:border-purple-400 shadow-outline-purple',
+          )}
+        >
+          <input
+            {...getInputProps()}
+            className="text-sm leading-[1.5] text-slate-900 dark:text-slate-300 bg-inherit border-0 rounded-[inherit] px-3 py-2 outline-0 grow shrink-0 basis-auto"
+          />
+        </div>
+        {groupedOptions.length > 0 && (
+          <ul
+            {...getListboxProps()}
+            className="text-sm box-border p-1.5 my-3 mx-0 w-full rounded-xl overflow-auto outline-0 max-h-[300px] z-[1] bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-200 shadow shadow-slate-200 dark:shadow-slate-900"
+          >
+            {(groupedOptions as typeof top100Films).map((option, index) => (
+              <li
+                {...getOptionProps({ option, index })}
+                className="list-none p-2 rounded-lg cursor-default last-of-type:border-b-0 hover:cursor-pointer aria-selected:bg-purple-100 dark:aria-selected:bg-purple-900 aria-selected:text-purple-900 dark:aria-selected:text-purple-100 ui-focused:bg-slate-100 dark:ui-focused:bg-slate-700 ui-focus-visible:bg-slate-100 dark:ui-focus-visible:bg-slate-800 ui-focused:text-slate-900 dark:ui-focused:text-slate-300 ui-focus-visible:text-slate-900 dark:ui-focus-visible:text-slate-300 ui-focus-visible:shadow-[0_0_0_3px_transparent] ui-focus-visible:shadow-purple-200 dark:ui-focus-visible:shadow-purple-500 ui-focused:aria-selected:bg-purple-100 dark:ui-focused:aria-selected:bg-purple-900 ui-focus-visible:aria-selected:bg-purple-100 dark:ui-focus-visible:aria-selected:bg-purple-900 ui-focused:aria-selected:text-purple-900 dark:ui-focused:aria-selected:text-purple-100 ui-focus-visible:aria-selected:text-purple-900 dark:ui-focus-visible:aria-selected:text-purple-100"
+              >
+                {option.label}
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// 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 },
+];
diff --git a/docs/data/base/components/autocomplete/autocomplete.md b/docs/data/base/components/autocomplete/autocomplete.md
index 246b80e77b0334..0dcc1edc8721ee 100644
--- a/docs/data/base/components/autocomplete/autocomplete.md
+++ b/docs/data/base/components/autocomplete/autocomplete.md
@@ -76,7 +76,7 @@ The useAutocomplete hook requires a list of `options` to be displayed when the t
 
 The following demo shows how to create a simple combobox, apply some styling, and write the selected value to a state variable using the `onChange` prop:
 
-{{"demo": "UseAutocomplete.js"}}
+{{"demo": "UseAutocomplete"}}
 
 ## Customization