From 510e6d009a5df4dd306390c03a392fe0899f7cad Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sat, 27 Aug 2022 11:39:30 +0200
Subject: [PATCH] [Autocomplete] Update unstyled demo to not import Material UI
 (#34060)

---
 .../components/autocomplete/UseAutocomplete.js        | 11 +++++------
 .../components/autocomplete/UseAutocomplete.tsx       | 11 +++++------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/docs/data/material/components/autocomplete/UseAutocomplete.js b/docs/data/material/components/autocomplete/UseAutocomplete.js
index d763ad8df33fb8..f95d1e447b497e 100644
--- a/docs/data/material/components/autocomplete/UseAutocomplete.js
+++ b/docs/data/material/components/autocomplete/UseAutocomplete.js
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { useAutocomplete } from '@mui/base/AutocompleteUnstyled';
-import { styled } from '@mui/material/styles';
-import { autocompleteClasses } from '@mui/material/Autocomplete';
+import { styled } from '@mui/system';
 
 const Label = styled('label')({
   display: 'block',
@@ -9,8 +8,8 @@ const Label = styled('label')({
 
 const Input = styled('input')(({ theme }) => ({
   width: 200,
-  backgroundColor: theme.palette.background.paper,
-  color: theme.palette.getContrastText(theme.palette.background.paper),
+  backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#000',
+  color: theme.palette.mode === 'light' ? '#000' : '#fff',
 }));
 
 const Listbox = styled('ul')(({ theme }) => ({
@@ -20,11 +19,11 @@ const Listbox = styled('ul')(({ theme }) => ({
   zIndex: 1,
   position: 'absolute',
   listStyle: 'none',
-  backgroundColor: theme.palette.background.paper,
+  backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#000',
   overflow: 'auto',
   maxHeight: 200,
   border: '1px solid rgba(0,0,0,.25)',
-  [`& li.${autocompleteClasses.focused}`]: {
+  '& li.Mui-focused': {
     backgroundColor: '#4a8df6',
     color: 'white',
     cursor: 'pointer',
diff --git a/docs/data/material/components/autocomplete/UseAutocomplete.tsx b/docs/data/material/components/autocomplete/UseAutocomplete.tsx
index 30a53cdcf95b7a..08ee579fd838c8 100644
--- a/docs/data/material/components/autocomplete/UseAutocomplete.tsx
+++ b/docs/data/material/components/autocomplete/UseAutocomplete.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { useAutocomplete } from '@mui/base/AutocompleteUnstyled';
-import { styled } from '@mui/material/styles';
-import { autocompleteClasses } from '@mui/material/Autocomplete';
+import { styled } from '@mui/system';
 
 const Label = styled('label')({
   display: 'block',
@@ -9,8 +8,8 @@ const Label = styled('label')({
 
 const Input = styled('input')(({ theme }) => ({
   width: 200,
-  backgroundColor: theme.palette.background.paper,
-  color: theme.palette.getContrastText(theme.palette.background.paper),
+  backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#000',
+  color: theme.palette.mode === 'light' ? '#000' : '#fff',
 }));
 
 const Listbox = styled('ul')(({ theme }) => ({
@@ -20,11 +19,11 @@ const Listbox = styled('ul')(({ theme }) => ({
   zIndex: 1,
   position: 'absolute',
   listStyle: 'none',
-  backgroundColor: theme.palette.background.paper,
+  backgroundColor: theme.palette.mode === 'light' ? '#fff' : '#000',
   overflow: 'auto',
   maxHeight: 200,
   border: '1px solid rgba(0,0,0,.25)',
-  [`& li.${autocompleteClasses.focused}`]: {
+  '& li.Mui-focused': {
     backgroundColor: '#4a8df6',
     color: 'white',
     cursor: 'pointer',