From b3f41d12fe4b0db49cc9ae63da73ac30f499ec20 Mon Sep 17 00:00:00 2001
From: Chris Morin <longhumansbiz@gmail.com>
Date: Fri, 22 Sep 2023 09:37:02 -0300
Subject: [PATCH] badge demos renamed

---
 .../base/components/badge/AccessibleBadges.js    |  8 ++++----
 .../base/components/badge/AccessibleBadges.tsx   |  8 ++++----
 .../badge/AccessibleBadges.tsx.preview           |  4 ++--
 docs/data/base/components/badge/BadgeMax.js      | 16 ++++++++--------
 docs/data/base/components/badge/BadgeMax.tsx     | 16 ++++++++--------
 .../base/components/badge/BadgeMax.tsx.preview   | 12 ++++++------
 .../base/components/badge/BadgeVisibility.js     | 12 ++++++------
 .../base/components/badge/BadgeVisibility.tsx    | 12 ++++++------
 docs/data/base/components/badge/ShowZeroBadge.js | 12 ++++++------
 .../data/base/components/badge/ShowZeroBadge.tsx | 12 ++++++------
 .../components/badge/ShowZeroBadge.tsx.preview   |  8 ++++----
 .../badge/UnstyledBadge/system/index.js          |  8 ++++----
 .../badge/UnstyledBadge/system/index.tsx         |  8 ++++----
 .../badge/UnstyledBadge/system/index.tsx.preview |  4 ++--
 .../UnstyledBadgeIntroduction/system/index.js    |  8 ++++----
 .../UnstyledBadgeIntroduction/system/index.tsx   |  8 ++++----
 .../system/index.tsx.preview                     |  4 ++--
 17 files changed, 80 insertions(+), 80 deletions(-)

diff --git a/docs/data/base/components/badge/AccessibleBadges.js b/docs/data/base/components/badge/AccessibleBadges.js
index cfca9428e4a6e3..1e431d641b59d0 100644
--- a/docs/data/base/components/badge/AccessibleBadges.js
+++ b/docs/data/base/components/badge/AccessibleBadges.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
-import { Badge, badgeClasses } from '@mui/base/Badge';
+import { Badge as BaseBadge, badgeClasses } from '@mui/base/Badge';
 import MailIcon from '@mui/icons-material/Mail';
 
 function notificationsLabel(count) {
@@ -16,9 +16,9 @@ function notificationsLabel(count) {
 export default function AccessibleBadges() {
   return (
     <div aria-label={notificationsLabel(100)}>
-      <StyledBadge badgeContent={100}>
+      <Badge badgeContent={100}>
         <MailIcon />
-      </StyledBadge>
+      </Badge>
     </div>
   );
 }
@@ -31,7 +31,7 @@ const grey = {
   900: '#24292f',
 };
 
-const StyledBadge = styled(Badge)(
+const Badge = styled(BaseBadge)(
   ({ theme }) => `
   box-sizing: border-box;
   margin: 0;
diff --git a/docs/data/base/components/badge/AccessibleBadges.tsx b/docs/data/base/components/badge/AccessibleBadges.tsx
index 151ef75b977c8f..b13dbbcba41b08 100644
--- a/docs/data/base/components/badge/AccessibleBadges.tsx
+++ b/docs/data/base/components/badge/AccessibleBadges.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
-import { Badge, badgeClasses } from '@mui/base/Badge';
+import { Badge as BaseBadge, badgeClasses } from '@mui/base/Badge';
 import MailIcon from '@mui/icons-material/Mail';
 
 function notificationsLabel(count: number) {
@@ -16,9 +16,9 @@ function notificationsLabel(count: number) {
 export default function AccessibleBadges() {
   return (
     <div aria-label={notificationsLabel(100)}>
-      <StyledBadge badgeContent={100}>
+      <Badge badgeContent={100}>
         <MailIcon />
-      </StyledBadge>
+      </Badge>
     </div>
   );
 }
@@ -31,7 +31,7 @@ const grey = {
   900: '#24292f',
 };
 
-const StyledBadge = styled(Badge)(
+const Badge = styled(BaseBadge)(
   ({ theme }) => `
   box-sizing: border-box;
   margin: 0;
diff --git a/docs/data/base/components/badge/AccessibleBadges.tsx.preview b/docs/data/base/components/badge/AccessibleBadges.tsx.preview
index 913677ab3cf8fa..9fde77197a5cea 100644
--- a/docs/data/base/components/badge/AccessibleBadges.tsx.preview
+++ b/docs/data/base/components/badge/AccessibleBadges.tsx.preview
@@ -1,3 +1,3 @@
-<StyledBadge badgeContent={100}>
+<Badge badgeContent={100}>
   <MailIcon />
-</StyledBadge>
\ No newline at end of file
+</Badge>
\ No newline at end of file
diff --git a/docs/data/base/components/badge/BadgeMax.js b/docs/data/base/components/badge/BadgeMax.js
index 0e00288246b31a..3b26a5cbebc549 100644
--- a/docs/data/base/components/badge/BadgeMax.js
+++ b/docs/data/base/components/badge/BadgeMax.js
@@ -1,21 +1,21 @@
 import * as React from 'react';
 import Stack from '@mui/material/Stack';
 import { styled } from '@mui/system';
-import { Badge, badgeClasses } from '@mui/base/Badge';
+import { Badge as BaseBadge, badgeClasses } from '@mui/base/Badge';
 import MailIcon from '@mui/icons-material/Mail';
 
 export default function BadgeMax() {
   return (
     <Stack spacing={4} direction="row">
-      <StyledBadge badgeContent={99}>
+      <Badge badgeContent={99}>
         <MailIcon />
-      </StyledBadge>
-      <StyledBadge badgeContent={100}>
+      </Badge>
+      <Badge badgeContent={100}>
         <MailIcon />
-      </StyledBadge>
-      <StyledBadge badgeContent={1000} max={999}>
+      </Badge>
+      <Badge badgeContent={1000} max={999}>
         <MailIcon />
-      </StyledBadge>
+      </Badge>
     </Stack>
   );
 }
@@ -28,7 +28,7 @@ const grey = {
   900: '#24292f',
 };
 
-const StyledBadge = styled(Badge)(
+const Badge = styled(BaseBadge)(
   ({ theme }) => `
   box-sizing: border-box;
   margin: 0;
diff --git a/docs/data/base/components/badge/BadgeMax.tsx b/docs/data/base/components/badge/BadgeMax.tsx
index 0e00288246b31a..3b26a5cbebc549 100644
--- a/docs/data/base/components/badge/BadgeMax.tsx
+++ b/docs/data/base/components/badge/BadgeMax.tsx
@@ -1,21 +1,21 @@
 import * as React from 'react';
 import Stack from '@mui/material/Stack';
 import { styled } from '@mui/system';
-import { Badge, badgeClasses } from '@mui/base/Badge';
+import { Badge as BaseBadge, badgeClasses } from '@mui/base/Badge';
 import MailIcon from '@mui/icons-material/Mail';
 
 export default function BadgeMax() {
   return (
     <Stack spacing={4} direction="row">
-      <StyledBadge badgeContent={99}>
+      <Badge badgeContent={99}>
         <MailIcon />
-      </StyledBadge>
-      <StyledBadge badgeContent={100}>
+      </Badge>
+      <Badge badgeContent={100}>
         <MailIcon />
-      </StyledBadge>
-      <StyledBadge badgeContent={1000} max={999}>
+      </Badge>
+      <Badge badgeContent={1000} max={999}>
         <MailIcon />
-      </StyledBadge>
+      </Badge>
     </Stack>
   );
 }
@@ -28,7 +28,7 @@ const grey = {
   900: '#24292f',
 };
 
-const StyledBadge = styled(Badge)(
+const Badge = styled(BaseBadge)(
   ({ theme }) => `
   box-sizing: border-box;
   margin: 0;
diff --git a/docs/data/base/components/badge/BadgeMax.tsx.preview b/docs/data/base/components/badge/BadgeMax.tsx.preview
index daa7a8d89513a3..a95263effaf285 100644
--- a/docs/data/base/components/badge/BadgeMax.tsx.preview
+++ b/docs/data/base/components/badge/BadgeMax.tsx.preview
@@ -1,9 +1,9 @@
-<StyledBadge badgeContent={99}>
+<Badge badgeContent={99}>
   <MailIcon />
-</StyledBadge>
-<StyledBadge badgeContent={100}>
+</Badge>
+<Badge badgeContent={100}>
   <MailIcon />
-</StyledBadge>
-<StyledBadge badgeContent={1000} max={999}>
+</Badge>
+<Badge badgeContent={1000} max={999}>
   <MailIcon />
-</StyledBadge>
\ No newline at end of file
+</Badge>
\ No newline at end of file
diff --git a/docs/data/base/components/badge/BadgeVisibility.js b/docs/data/base/components/badge/BadgeVisibility.js
index c9bd9ce045219c..270e118fe342a2 100644
--- a/docs/data/base/components/badge/BadgeVisibility.js
+++ b/docs/data/base/components/badge/BadgeVisibility.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import { styled } from '@mui/system';
-import { Badge, badgeClasses } from '@mui/base/Badge';
+import { Badge as BaseBadge, badgeClasses } from '@mui/base/Badge';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import Button from '@mui/material/Button';
 import AddIcon from '@mui/icons-material/Add';
@@ -33,9 +33,9 @@ export default function BadgeVisibility() {
       }}
     >
       <div>
-        <StyledBadge badgeContent={count}>
+        <Badge badgeContent={count}>
           <MailIcon />
-        </StyledBadge>
+        </Badge>
         <ButtonGroup>
           <Button
             aria-label="reduce"
@@ -56,9 +56,9 @@ export default function BadgeVisibility() {
         </ButtonGroup>
       </div>
       <div>
-        <StyledBadge badgeContent={count} invisible={invisible}>
+        <Badge badgeContent={count} invisible={invisible}>
           <MailIcon />
-        </StyledBadge>
+        </Badge>
         <FormControlLabel
           sx={{ color: 'text.primary' }}
           control={<Switch checked={!invisible} onChange={handleBadgeVisibility} />}
@@ -77,7 +77,7 @@ const grey = {
   900: '#24292f',
 };
 
-const StyledBadge = styled(Badge)(
+const Badge = styled(BaseBadge)(
   ({ theme }) => `
   box-sizing: border-box;
   margin: 0;
diff --git a/docs/data/base/components/badge/BadgeVisibility.tsx b/docs/data/base/components/badge/BadgeVisibility.tsx
index c9bd9ce045219c..270e118fe342a2 100644
--- a/docs/data/base/components/badge/BadgeVisibility.tsx
+++ b/docs/data/base/components/badge/BadgeVisibility.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import { styled } from '@mui/system';
-import { Badge, badgeClasses } from '@mui/base/Badge';
+import { Badge as BaseBadge, badgeClasses } from '@mui/base/Badge';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import Button from '@mui/material/Button';
 import AddIcon from '@mui/icons-material/Add';
@@ -33,9 +33,9 @@ export default function BadgeVisibility() {
       }}
     >
       <div>
-        <StyledBadge badgeContent={count}>
+        <Badge badgeContent={count}>
           <MailIcon />
-        </StyledBadge>
+        </Badge>
         <ButtonGroup>
           <Button
             aria-label="reduce"
@@ -56,9 +56,9 @@ export default function BadgeVisibility() {
         </ButtonGroup>
       </div>
       <div>
-        <StyledBadge badgeContent={count} invisible={invisible}>
+        <Badge badgeContent={count} invisible={invisible}>
           <MailIcon />
-        </StyledBadge>
+        </Badge>
         <FormControlLabel
           sx={{ color: 'text.primary' }}
           control={<Switch checked={!invisible} onChange={handleBadgeVisibility} />}
@@ -77,7 +77,7 @@ const grey = {
   900: '#24292f',
 };
 
-const StyledBadge = styled(Badge)(
+const Badge = styled(BaseBadge)(
   ({ theme }) => `
   box-sizing: border-box;
   margin: 0;
diff --git a/docs/data/base/components/badge/ShowZeroBadge.js b/docs/data/base/components/badge/ShowZeroBadge.js
index 324ae1d2e4b9f9..b819eab31d7829 100644
--- a/docs/data/base/components/badge/ShowZeroBadge.js
+++ b/docs/data/base/components/badge/ShowZeroBadge.js
@@ -1,18 +1,18 @@
 import * as React from 'react';
 import Stack from '@mui/material/Stack';
 import { styled } from '@mui/system';
-import { Badge, badgeClasses } from '@mui/base/Badge';
+import { Badge as BaseBadge, badgeClasses } from '@mui/base/Badge';
 import MailIcon from '@mui/icons-material/Mail';
 
 export default function ShowZeroBadge() {
   return (
     <Stack spacing={4} direction="row">
-      <StyledBadge badgeContent={0}>
+      <Badge badgeContent={0}>
         <MailIcon />
-      </StyledBadge>
-      <StyledBadge badgeContent={0} showZero>
+      </Badge>
+      <Badge badgeContent={0} showZero>
         <MailIcon />
-      </StyledBadge>
+      </Badge>
     </Stack>
   );
 }
@@ -26,7 +26,7 @@ const grey = {
   900: '#24292f',
 };
 
-const StyledBadge = styled(Badge)(
+const Badge = styled(BaseBadge)(
   ({ theme }) => `
   box-sizing: border-box;
   margin: 0;
diff --git a/docs/data/base/components/badge/ShowZeroBadge.tsx b/docs/data/base/components/badge/ShowZeroBadge.tsx
index 324ae1d2e4b9f9..b819eab31d7829 100644
--- a/docs/data/base/components/badge/ShowZeroBadge.tsx
+++ b/docs/data/base/components/badge/ShowZeroBadge.tsx
@@ -1,18 +1,18 @@
 import * as React from 'react';
 import Stack from '@mui/material/Stack';
 import { styled } from '@mui/system';
-import { Badge, badgeClasses } from '@mui/base/Badge';
+import { Badge as BaseBadge, badgeClasses } from '@mui/base/Badge';
 import MailIcon from '@mui/icons-material/Mail';
 
 export default function ShowZeroBadge() {
   return (
     <Stack spacing={4} direction="row">
-      <StyledBadge badgeContent={0}>
+      <Badge badgeContent={0}>
         <MailIcon />
-      </StyledBadge>
-      <StyledBadge badgeContent={0} showZero>
+      </Badge>
+      <Badge badgeContent={0} showZero>
         <MailIcon />
-      </StyledBadge>
+      </Badge>
     </Stack>
   );
 }
@@ -26,7 +26,7 @@ const grey = {
   900: '#24292f',
 };
 
-const StyledBadge = styled(Badge)(
+const Badge = styled(BaseBadge)(
   ({ theme }) => `
   box-sizing: border-box;
   margin: 0;
diff --git a/docs/data/base/components/badge/ShowZeroBadge.tsx.preview b/docs/data/base/components/badge/ShowZeroBadge.tsx.preview
index f2e6348da43c34..18283159fede3b 100644
--- a/docs/data/base/components/badge/ShowZeroBadge.tsx.preview
+++ b/docs/data/base/components/badge/ShowZeroBadge.tsx.preview
@@ -1,6 +1,6 @@
-<StyledBadge badgeContent={0}>
+<Badge badgeContent={0}>
   <MailIcon />
-</StyledBadge>
-<StyledBadge badgeContent={0} showZero>
+</Badge>
+<Badge badgeContent={0} showZero>
   <MailIcon />
-</StyledBadge>
\ No newline at end of file
+</Badge>
\ No newline at end of file
diff --git a/docs/data/base/components/badge/UnstyledBadge/system/index.js b/docs/data/base/components/badge/UnstyledBadge/system/index.js
index 9444b19da8c047..3653b946975f63 100644
--- a/docs/data/base/components/badge/UnstyledBadge/system/index.js
+++ b/docs/data/base/components/badge/UnstyledBadge/system/index.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled, Box } from '@mui/system';
-import { Badge, badgeClasses } from '@mui/base/Badge';
+import { Badge as BaseBadge, badgeClasses } from '@mui/base/Badge';
 
 function BadgeContent() {
   return (
@@ -21,9 +21,9 @@ function BadgeContent() {
 
 export default function UnstyledBadge() {
   return (
-    <StyledBadge badgeContent={5}>
+    <Badge badgeContent={5}>
       <BadgeContent />
-    </StyledBadge>
+    </Badge>
   );
 }
 
@@ -37,7 +37,7 @@ const grey = {
   900: '#24292f',
 };
 
-const StyledBadge = styled(Badge)(
+const Badge = styled(BaseBadge)(
   ({ theme }) => `
   box-sizing: border-box;
   margin: 0;
diff --git a/docs/data/base/components/badge/UnstyledBadge/system/index.tsx b/docs/data/base/components/badge/UnstyledBadge/system/index.tsx
index 9444b19da8c047..3653b946975f63 100644
--- a/docs/data/base/components/badge/UnstyledBadge/system/index.tsx
+++ b/docs/data/base/components/badge/UnstyledBadge/system/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled, Box } from '@mui/system';
-import { Badge, badgeClasses } from '@mui/base/Badge';
+import { Badge as BaseBadge, badgeClasses } from '@mui/base/Badge';
 
 function BadgeContent() {
   return (
@@ -21,9 +21,9 @@ function BadgeContent() {
 
 export default function UnstyledBadge() {
   return (
-    <StyledBadge badgeContent={5}>
+    <Badge badgeContent={5}>
       <BadgeContent />
-    </StyledBadge>
+    </Badge>
   );
 }
 
@@ -37,7 +37,7 @@ const grey = {
   900: '#24292f',
 };
 
-const StyledBadge = styled(Badge)(
+const Badge = styled(BaseBadge)(
   ({ theme }) => `
   box-sizing: border-box;
   margin: 0;
diff --git a/docs/data/base/components/badge/UnstyledBadge/system/index.tsx.preview b/docs/data/base/components/badge/UnstyledBadge/system/index.tsx.preview
index 0f52f923d64e43..35b7141ca197c0 100644
--- a/docs/data/base/components/badge/UnstyledBadge/system/index.tsx.preview
+++ b/docs/data/base/components/badge/UnstyledBadge/system/index.tsx.preview
@@ -1,3 +1,3 @@
-<StyledBadge badgeContent={5}>
+<Badge badgeContent={5}>
   <BadgeContent />
-</StyledBadge>
\ No newline at end of file
+</Badge>
\ No newline at end of file
diff --git a/docs/data/base/components/badge/UnstyledBadgeIntroduction/system/index.js b/docs/data/base/components/badge/UnstyledBadgeIntroduction/system/index.js
index 6f117fa8300f22..0831def7fe05e0 100644
--- a/docs/data/base/components/badge/UnstyledBadgeIntroduction/system/index.js
+++ b/docs/data/base/components/badge/UnstyledBadgeIntroduction/system/index.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled, Box } from '@mui/system';
-import { Badge, badgeClasses } from '@mui/base/Badge';
+import { Badge as BaseBadge, badgeClasses } from '@mui/base/Badge';
 
 const blue = {
   100: '#DAECFF',
@@ -32,13 +32,13 @@ function BadgeContent() {
 
 export default function UnstyledBadgeIntroduction() {
   return (
-    <StyledBadge badgeContent={5}>
+    <Badge badgeContent={5}>
       <BadgeContent />
-    </StyledBadge>
+    </Badge>
   );
 }
 
-const StyledBadge = styled(Badge)(
+const Badge = styled(BaseBadge)(
   ({ theme }) => `
   box-sizing: border-box;
   margin: 0;
diff --git a/docs/data/base/components/badge/UnstyledBadgeIntroduction/system/index.tsx b/docs/data/base/components/badge/UnstyledBadgeIntroduction/system/index.tsx
index 6f117fa8300f22..0831def7fe05e0 100644
--- a/docs/data/base/components/badge/UnstyledBadgeIntroduction/system/index.tsx
+++ b/docs/data/base/components/badge/UnstyledBadgeIntroduction/system/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled, Box } from '@mui/system';
-import { Badge, badgeClasses } from '@mui/base/Badge';
+import { Badge as BaseBadge, badgeClasses } from '@mui/base/Badge';
 
 const blue = {
   100: '#DAECFF',
@@ -32,13 +32,13 @@ function BadgeContent() {
 
 export default function UnstyledBadgeIntroduction() {
   return (
-    <StyledBadge badgeContent={5}>
+    <Badge badgeContent={5}>
       <BadgeContent />
-    </StyledBadge>
+    </Badge>
   );
 }
 
-const StyledBadge = styled(Badge)(
+const Badge = styled(BaseBadge)(
   ({ theme }) => `
   box-sizing: border-box;
   margin: 0;
diff --git a/docs/data/base/components/badge/UnstyledBadgeIntroduction/system/index.tsx.preview b/docs/data/base/components/badge/UnstyledBadgeIntroduction/system/index.tsx.preview
index 0f52f923d64e43..35b7141ca197c0 100644
--- a/docs/data/base/components/badge/UnstyledBadgeIntroduction/system/index.tsx.preview
+++ b/docs/data/base/components/badge/UnstyledBadgeIntroduction/system/index.tsx.preview
@@ -1,3 +1,3 @@
-<StyledBadge badgeContent={5}>
+<Badge badgeContent={5}>
   <BadgeContent />
-</StyledBadge>
\ No newline at end of file
+</Badge>
\ No newline at end of file