From b8b1e0d08ceab826a3e11b18a3b4b6e6b5c17206 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Tue, 22 Nov 2022 02:11:01 -0500
Subject: [PATCH] [docs] Fix a couple documentation errors (#35217)

---
 .../joy/components/autocomplete/Playground.js     | 15 +++++++++++----
 docs/data/joy/components/divider/divider.md       |  2 +-
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/docs/data/joy/components/autocomplete/Playground.js b/docs/data/joy/components/autocomplete/Playground.js
index 2fc136eb690ba3..7ddf59304b82c3 100644
--- a/docs/data/joy/components/autocomplete/Playground.js
+++ b/docs/data/joy/components/autocomplete/Playground.js
@@ -32,9 +32,17 @@ export default function Playground() {
           position: 'sticky',
           top: 'var(--MuiDocs-header-height)',
           zIndex: 2,
-          border: '1px solid rgba(62, 80, 96, 0.3)',
+          border: '1px solid',
+          borderColor: (theme) =>
+            theme.palette.mode === 'dark'
+              ? 'rgba(62, 80, 96, 0.3)'
+              : theme.palette.neutral[100],
+
           borderRadius: 'xs',
-          background: 'rgba(0,30,60, 0.95)',
+          background: (theme) =>
+            theme.palette.mode === 'dark'
+              ? 'rgba(0,30,60, 0.95)'
+              : theme.palette.primary[50],
         }}
       >
         <FormControl sx={{ width: 300, mx: 'auto' }}>
@@ -46,7 +54,7 @@ export default function Playground() {
           />
         </FormControl>
         <Divider sx={{ mt: 4, mb: 2 }} />
-        <Box sx={{ display: 'flex', alignItems: 'baseline' }}>
+        <Box sx={{ display: 'flex', alignItems: 'baseline', mb: 2 }}>
           <Typography
             id="flags-playground"
             level="body3"
@@ -71,7 +79,6 @@ export default function Playground() {
             </Link>
           )}
         </Box>
-        <Divider sx={{ my: 2 }} />
       </Box>
       <Box sx={{ minWidth: 0, flexBasis: 300, flexGrow: 1 }}>
         <List
diff --git a/docs/data/joy/components/divider/divider.md b/docs/data/joy/components/divider/divider.md
index dfd5a051079b84..12edb9eb326773 100644
--- a/docs/data/joy/components/divider/divider.md
+++ b/docs/data/joy/components/divider/divider.md
@@ -21,7 +21,7 @@ Dividers separate content into clear groups.
 After [installation](/joy-ui/getting-started/installation/), you can start building with this component using the following basic elements:
 
 ```jsx
-import Avatar from '@mui/joy/Divider';
+import Divider from '@mui/joy/Divider';
 
 export default function MyApp() {
   return <Divider />;