From 3947c8c69f5940e74962b15852751f6467ad8b58 Mon Sep 17 00:00:00 2001
From: danilo leal <daniloleal09@gmail.com>
Date: Tue, 4 Jan 2022 17:20:30 -0300
Subject: [PATCH 01/13] logo refinement

---
 docs/public/static/logo.svg   | 5 ++++-
 docs/src/icons/SvgMuiLogo.tsx | 6 +++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/docs/public/static/logo.svg b/docs/public/static/logo.svg
index dea1f22374461e..b284583364ddba 100644
--- a/docs/public/static/logo.svg
+++ b/docs/public/static/logo.svg
@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="36" height="32" viewBox="0 0 36 32" fill="none"><path d="M30.343 21.976a1 1 0 00.502-.864l.018-5.787a1 1 0 01.502-.864l3.137-1.802a1 1 0 011.498.867v10.521a1 1 0 01-.502.867l-11.839 6.8a1 1 0 01-.994.001l-9.291-5.314a1 1 0 01-.504-.868v-5.305c0-.006.007-.01.013-.007.005.003.012 0 .012-.007v-.006c0-.004.002-.008.006-.01l7.652-4.396c.007-.004.004-.015-.004-.015a.008.008 0 01-.008-.008l.015-5.201a1 1 0 00-1.5-.87l-5.687 3.277a1 1 0 01-.998 0L6.666 9.7a1 1 0 00-1.499.866v9.4a1 1 0 01-1.496.869l-3.166-1.81a1 1 0 01-.504-.87l.028-16.43A1 1 0 011.527.86l10.845 6.229a1 1 0 00.996 0L24.21.86a1 1 0 011.498.868v16.434a1 1 0 01-.501.867l-5.678 3.27a1 1 0 00.004 1.735l3.132 1.783a1 1 0 00.993-.002l6.685-3.839zM31 7.234a1 1 0 001.514.857l3-1.8A1 1 0 0036 5.434V1.766A1 1 0 0034.486.91l-3 1.8a1 1 0 00-.486.857v3.668z" fill="#007FFF" /></svg>
+<svg width="35" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10.992 6.412 1.504.877A1 1 0 0 0 0 1.741v15.627a2 2 0 0 0 .971 1.715l2.514 1.508A1 1 0 0 0 5 19.734v-9.01a1 1 0 0 1 1.496-.87l4.512 2.579a2 2 0 0 0 1.984 0l4.512-2.578a1 1 0 0 1 1.496.868v4.116a2 2 0 0 1-1.008 1.737l-5.236 2.992A1.5 1.5 0 0 0 12 20.87v4.06a2 2 0 0 0 .89 1.664l7.081 4.72a2 2 0 0 0 2.102.073l12.171-6.955A1.5 1.5 0 0 0 35 23.13V12.265a1 1 0 0 0-1.514-.857l-2.515 1.508A2 2 0 0 0 30 14.632v5.485a1.5 1.5 0 0 1-.771 1.312l-7.43 4.127a1.5 1.5 0 0 1-1.56-.063l-2.424-1.616a1 1 0 0 1 .04-1.69l5.174-3.104A2 2 0 0 0 24 17.368V1.74a1 1 0 0 0-1.504-.864l-9.488 5.535a2 2 0 0 1-2.016 0Z" fill="#007FFF"/>
+  <path d="M34.029 7.583 31.514 9.09A1 1 0 0 1 30 8.234V4.132a2 2 0 0 1 .971-1.715L33.486.91A1 1 0 0 1 35 1.766v4.102a2 2 0 0 1-.971 1.715Z" fill="#007FFF"/>
+</svg>
\ No newline at end of file
diff --git a/docs/src/icons/SvgMuiLogo.tsx b/docs/src/icons/SvgMuiLogo.tsx
index 5f926ed03a6169..7de5734fedc0b7 100644
--- a/docs/src/icons/SvgMuiLogo.tsx
+++ b/docs/src/icons/SvgMuiLogo.tsx
@@ -5,16 +5,16 @@ export default function SvgMuiLogo(props: RootSvgProps) {
   return (
     <RootSvg
       xmlns="http://www.w3.org/2000/svg"
-      width={36}
+      width={35}
       height={32}
-      viewBox="0 0 36 32"
+      viewBox="0 0 35 32"
       fill="none"
       {...props}
     >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M30.343 21.976a1 1 0 00.502-.864l.018-5.787a1 1 0 01.502-.864l3.137-1.802a1 1 0 011.498.867v10.521a1 1 0 01-.502.867l-11.839 6.8a1 1 0 01-.994.001l-9.291-5.314a1 1 0 01-.504-.868v-5.305c0-.006.007-.01.013-.007.005.003.012 0 .012-.007v-.006c0-.004.002-.008.006-.01l7.652-4.396c.007-.004.004-.015-.004-.015a.008.008 0 01-.008-.008l.015-5.201a1 1 0 00-1.5-.87l-5.687 3.277a1 1 0 01-.998 0L6.666 9.7a1 1 0 00-1.499.866v9.4a1 1 0 01-1.496.869l-3.166-1.81a1 1 0 01-.504-.87l.028-16.43A1 1 0 011.527.86l10.845 6.229a1 1 0 00.996 0L24.21.86a1 1 0 011.498.868v16.434a1 1 0 01-.501.867l-5.678 3.27a1 1 0 00.004 1.735l3.132 1.783a1 1 0 00.993-.002l6.685-3.839zM31 7.234a1 1 0 001.514.857l3-1.8A1 1 0 0036 5.434V1.766A1 1 0 0034.486.91l-3 1.8a1 1 0 00-.486.857v3.668z"
+        d="M10.992 6.412 1.504.877A1 1 0 0 0 0 1.741v15.627a2 2 0 0 0 .971 1.715l2.514 1.508A1 1 0 0 0 5 19.734v-9.01a1 1 0 0 1 1.496-.87l4.512 2.579a2 2 0 0 0 1.984 0l4.512-2.578a1 1 0 0 1 1.496.868v4.116a2 2 0 0 1-1.008 1.737l-5.236 2.992A1.5 1.5 0 0 0 12 20.87v4.06a2 2 0 0 0 .89 1.664l7.081 4.72a2 2 0 0 0 2.102.073l12.171-6.955A1.5 1.5 0 0 0 35 23.13V12.265a1 1 0 0 0-1.514-.857l-2.515 1.508A2 2 0 0 0 30 14.632v5.485a1.5 1.5 0 0 1-.771 1.312l-7.43 4.127a1.5 1.5 0 0 1-1.56-.063l-2.424-1.616a1 1 0 0 1 .04-1.69l5.174-3.104A2 2 0 0 0 24 17.368V1.74a1 1 0 0 0-1.504-.864l-9.488 5.535a2 2 0 0 1-2.016 0Z M34.029 7.583 31.514 9.09A1 1 0 0 1 30 8.234V4.132a2 2 0 0 1 .971-1.715L33.486.91A1 1 0 0 1 35 1.766v4.102a2 2 0 0 1-.971 1.715Z"
         fill="#007FFF"
       />
     </RootSvg>

From 5e1ea401750742c7841451b8e9ac7dca95d73bbb Mon Sep 17 00:00:00 2001
From: anon-phantom <0x01.phantom@gmail.com>
Date: Wed, 30 Aug 2023 16:25:16 +0300
Subject: [PATCH 02/13] https://github.com/mui/material-ui/issues/38682

---
 .../CircularProgressCountUp.js                | 46 +++++++++++++++++++
 .../CircularProgressCountUp.tsx               | 46 +++++++++++++++++++
 .../CircularProgressCountUp.tsx.preview       |  6 +++
 .../circular-progress/circular-progress.md    | 21 +++++++++
 4 files changed, 119 insertions(+)
 create mode 100644 docs/data/joy/components/circular-progress/CircularProgressCountUp.js
 create mode 100644 docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx
 create mode 100644 docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx.preview

diff --git a/docs/data/joy/components/circular-progress/CircularProgressCountUp.js b/docs/data/joy/components/circular-progress/CircularProgressCountUp.js
new file mode 100644
index 00000000000000..75123949a988c2
--- /dev/null
+++ b/docs/data/joy/components/circular-progress/CircularProgressCountUp.js
@@ -0,0 +1,46 @@
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import CircularProgress from '@mui/joy/CircularProgress';
+import Stack from '@mui/joy/Stack';
+import Typography from '@mui/joy/Typography';
+import * as React from 'react';
+import { useCountUp } from 'use-count-up';
+
+export default function CircularProgressDeterminate() {
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  const { value: value1 } = useCountUp({
+    isCounting: isLoading,
+    duration: 1,
+    start: 0,
+    end: 25,
+  });
+
+  const { value: value2, reset } = useCountUp({
+    isCounting: true,
+    duration: 1,
+    start: 0,
+    end: 75,
+  });
+
+  return (
+    <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
+      <Stack sx={{ gap: 2 }}>
+        <CircularProgress size="lg" determinate value={value1}>
+          <Typography>{value1}%</Typography>
+        </CircularProgress>
+        <Button size="sm" onClick={() => setIsLoading(true)}>
+          Start
+        </Button>
+      </Stack>
+      <Stack sx={{ gap: 2 }}>
+        <CircularProgress size="lg" determinate value={value2}>
+          <Typography>{value2}%</Typography>
+        </CircularProgress>
+        <Button size="sm" onClick={reset}>
+          Reset
+        </Button>
+      </Stack>
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx b/docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx
new file mode 100644
index 00000000000000..75123949a988c2
--- /dev/null
+++ b/docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx
@@ -0,0 +1,46 @@
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import CircularProgress from '@mui/joy/CircularProgress';
+import Stack from '@mui/joy/Stack';
+import Typography from '@mui/joy/Typography';
+import * as React from 'react';
+import { useCountUp } from 'use-count-up';
+
+export default function CircularProgressDeterminate() {
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  const { value: value1 } = useCountUp({
+    isCounting: isLoading,
+    duration: 1,
+    start: 0,
+    end: 25,
+  });
+
+  const { value: value2, reset } = useCountUp({
+    isCounting: true,
+    duration: 1,
+    start: 0,
+    end: 75,
+  });
+
+  return (
+    <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
+      <Stack sx={{ gap: 2 }}>
+        <CircularProgress size="lg" determinate value={value1}>
+          <Typography>{value1}%</Typography>
+        </CircularProgress>
+        <Button size="sm" onClick={() => setIsLoading(true)}>
+          Start
+        </Button>
+      </Stack>
+      <Stack sx={{ gap: 2 }}>
+        <CircularProgress size="lg" determinate value={value2}>
+          <Typography>{value2}%</Typography>
+        </CircularProgress>
+        <Button size="sm" onClick={reset}>
+          Reset
+        </Button>
+      </Stack>
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx.preview b/docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx.preview
new file mode 100644
index 00000000000000..b8a37e4ac6a4a1
--- /dev/null
+++ b/docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx.preview
@@ -0,0 +1,6 @@
+<CircularProgress size="lg" determinate value={value1}>
+  <Typography>{value1}%</Typography>
+</CircularProgress>
+<CircularProgress size="lg" determinate value={value2}>
+    <Typography>{value2}%</Typography>
+</CircularProgress>
diff --git a/docs/data/joy/components/circular-progress/circular-progress.md b/docs/data/joy/components/circular-progress/circular-progress.md
index 1e3d4e7113575d..2a48ef936299bc 100644
--- a/docs/data/joy/components/circular-progress/circular-progress.md
+++ b/docs/data/joy/components/circular-progress/circular-progress.md
@@ -68,6 +68,27 @@ The `determinate` prop lets you indicate a specified wait time.
 
 {{"demo": "CircularProgressDeterminate.js"}}
 
+### Determinate Count Up
+
+This method uses an external `use-count-up` package, to animate counting up by providing `start, end and duration` values.
+
+<codeblock storageKey="package-manager">
+```bash npm
+npm install use-count-up
+```
+
+```bash yarn
+yarn add use-count-up
+```
+
+```bash pnpm
+pnpm add use-count-up
+```
+
+</codeblock>
+
+{{"demo": "CircularProgressCountUp.js"}}
+
 ### Children
 
 By default, any children nested inside the Circular Progress will be centered.

From 2432c5f44d5746ab1c85c5f0cb9d0293bf792142 Mon Sep 17 00:00:00 2001
From: anon-phantom <0x01.phantom@gmail.com>
Date: Wed, 30 Aug 2023 17:42:53 +0300
Subject: [PATCH 03/13] following @danilo-leal suggestions

---
 .../circular-progress/circular-progress.md    | 57 +++++++------------
 1 file changed, 22 insertions(+), 35 deletions(-)

diff --git a/docs/data/joy/components/circular-progress/circular-progress.md b/docs/data/joy/components/circular-progress/circular-progress.md
index 2a48ef936299bc..2de728d91c5f00 100644
--- a/docs/data/joy/components/circular-progress/circular-progress.md
+++ b/docs/data/joy/components/circular-progress/circular-progress.md
@@ -27,7 +27,7 @@ The component's animations rely primarily on CSS to ensure that it functions eve
 ## Basics
 
 ```jsx
-import CircularProgress from '@mui/joy/CircularProgress';
+import CircularProgress from '@mui/joy/CircularProgress'
 ```
 
 The Circular Progress component provides users with updates on the status of ongoing processes such as loading an app, submitting a form, or saving updates.
@@ -68,27 +68,6 @@ The `determinate` prop lets you indicate a specified wait time.
 
 {{"demo": "CircularProgressDeterminate.js"}}
 
-### Determinate Count Up
-
-This method uses an external `use-count-up` package, to animate counting up by providing `start, end and duration` values.
-
-<codeblock storageKey="package-manager">
-```bash npm
-npm install use-count-up
-```
-
-```bash yarn
-yarn add use-count-up
-```
-
-```bash pnpm
-pnpm add use-count-up
-```
-
-</codeblock>
-
-{{"demo": "CircularProgressCountUp.js"}}
-
 ### Children
 
 By default, any children nested inside the Circular Progress will be centered.
@@ -114,6 +93,14 @@ You can use these to customize the component with both the `sx` prop and the the
 
 {{"demo": "CircularProgressVariables.js", "hideToolbar": true, "bg": "gradient"}}
 
+## Common examples
+
+### Count up feature
+
+Using the [use-count-up](https://www.npmjs.com/package/use-count-up) package, you can create a counting animation by providing `start`, `end`, and `duration` values.
+
+{{"demo": "CircularProgressCountUp.js"}}
+
 ## Accessibility
 
 Out of the box, the `aria-valuenow` attribute will indicate the current value of the progress bar only when the value is not indeterminate.
@@ -121,14 +108,14 @@ This attribute will display the value as a percentage.
 
 Here are a few tips to make sure you have an accessible circular progress component:
 
-- When creating your circular progress component, ensure sufficient color contrast between it and the background, using a minimum of [WCAG 2.0's color contrast ratio](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) of 4.5:1.
-- To define a human-readable text alternative to `aria-valuenow`, the `aria-valuetext` will show the current value in a more user-friendly way.
-  For example, downloading files might be conveyed as `aria-valuetext="8% (34 minutes) remaining`.
-- The `aria-valuemin` and `aria-valuemax` attributes are commonly used to indicate the minimum and maximum values of a range.
-  By default, these attributes are set to 0 and 100, respectively.
-  If you need to set a different minimum or maximum value for your range, you can use the these attributes to do so.
-- Use the `aria-label` or `aria-labelledby` attribute to provide an accessible name for your progress component.
-  These define the string value or identifies the element(s) that label the progress component.
+-   When creating your circular progress component, ensure sufficient color contrast between it and the background, using a minimum of [WCAG 2.0's color contrast ratio](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) of 4.5:1.
+-   To define a human-readable text alternative to `aria-valuenow`, the `aria-valuetext` will show the current value in a more user-friendly way.
+    For example, downloading files might be conveyed as `aria-valuetext="8% (34 minutes) remaining`.
+-   The `aria-valuemin` and `aria-valuemax` attributes are commonly used to indicate the minimum and maximum values of a range.
+    By default, these attributes are set to 0 and 100, respectively.
+    If you need to set a different minimum or maximum value for your range, you can use the these attributes to do so.
+-   Use the `aria-label` or `aria-labelledby` attribute to provide an accessible name for your progress component.
+    These define the string value or identifies the element(s) that label the progress component.
 
 ## Anatomy
 
@@ -136,10 +123,10 @@ The Circular Progress component is composed of a single root `<span>` with an `<
 
 ```html
 <span role="progressbar" class="MuiCircularProgress-root">
-  <svg class="MuiCircularProgress-svg">
-    <circle class="MuiCircularProgress-track"></circle>
-    <circle class="MuiCircularProgress-progress"></circle>
-  </svg>
-  <!-- children are nested here when present -->
+    <svg class="MuiCircularProgress-svg">
+        <circle class="MuiCircularProgress-track"></circle>
+        <circle class="MuiCircularProgress-progress"></circle>
+    </svg>
+    <!-- children are nested here when present -->
 </span>
 ```

From 7598189556e834aceb2b2f6b031c1cb9e3326855 Mon Sep 17 00:00:00 2001
From: anon-phantom <0x01.phantom@gmail.com>
Date: Wed, 30 Aug 2023 17:54:06 +0300
Subject: [PATCH 04/13] undo-prettier-edits

---
 .../circular-progress/circular-progress.md    | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/docs/data/joy/components/circular-progress/circular-progress.md b/docs/data/joy/components/circular-progress/circular-progress.md
index 2de728d91c5f00..e878edc22996eb 100644
--- a/docs/data/joy/components/circular-progress/circular-progress.md
+++ b/docs/data/joy/components/circular-progress/circular-progress.md
@@ -27,7 +27,7 @@ The component's animations rely primarily on CSS to ensure that it functions eve
 ## Basics
 
 ```jsx
-import CircularProgress from '@mui/joy/CircularProgress'
+import CircularProgress from '@mui/joy/CircularProgress';
 ```
 
 The Circular Progress component provides users with updates on the status of ongoing processes such as loading an app, submitting a form, or saving updates.
@@ -108,14 +108,14 @@ This attribute will display the value as a percentage.
 
 Here are a few tips to make sure you have an accessible circular progress component:
 
--   When creating your circular progress component, ensure sufficient color contrast between it and the background, using a minimum of [WCAG 2.0's color contrast ratio](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) of 4.5:1.
--   To define a human-readable text alternative to `aria-valuenow`, the `aria-valuetext` will show the current value in a more user-friendly way.
-    For example, downloading files might be conveyed as `aria-valuetext="8% (34 minutes) remaining`.
--   The `aria-valuemin` and `aria-valuemax` attributes are commonly used to indicate the minimum and maximum values of a range.
-    By default, these attributes are set to 0 and 100, respectively.
-    If you need to set a different minimum or maximum value for your range, you can use the these attributes to do so.
--   Use the `aria-label` or `aria-labelledby` attribute to provide an accessible name for your progress component.
-    These define the string value or identifies the element(s) that label the progress component.
+- When creating your circular progress component, ensure sufficient color contrast between it and the background, using a minimum of [WCAG 2.0's color contrast ratio](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) of 4.5:1.
+- To define a human-readable text alternative to `aria-valuenow`, the `aria-valuetext` will show the current value in a more user-friendly way.
+  For example, downloading files might be conveyed as `aria-valuetext="8% (34 minutes) remaining`.
+- The `aria-valuemin` and `aria-valuemax` attributes are commonly used to indicate the minimum and maximum values of a range.
+  By default, these attributes are set to 0 and 100, respectively.
+  If you need to set a different minimum or maximum value for your range, you can use the these attributes to do so.
+- Use the `aria-label` or `aria-labelledby` attribute to provide an accessible name for your progress component.
+  These define the string value or identifies the element(s) that label the progress component.
 
 ## Anatomy
 
@@ -123,10 +123,10 @@ The Circular Progress component is composed of a single root `<span>` with an `<
 
 ```html
 <span role="progressbar" class="MuiCircularProgress-root">
-    <svg class="MuiCircularProgress-svg">
-        <circle class="MuiCircularProgress-track"></circle>
-        <circle class="MuiCircularProgress-progress"></circle>
-    </svg>
-    <!-- children are nested here when present -->
+  <svg class="MuiCircularProgress-svg">
+    <circle class="MuiCircularProgress-track"></circle>
+    <circle class="MuiCircularProgress-progress"></circle>
+  </svg>
+  <!-- children are nested here when present -->
 </span>
 ```

From dbda4d5e82adfb210e1bef33710a36c4a82073bb Mon Sep 17 00:00:00 2001
From: anon-phantom <0x01.phantom@gmail.com>
Date: Thu, 31 Aug 2023 13:04:14 +0300
Subject: [PATCH 05/13] follow-@siriwatknp-review

---
 .../circular-progress/CircularProgressCountUp.js     |  2 +-
 .../circular-progress/CircularProgressCountUp.tsx    |  2 +-
 .../circular-progress/circular-progress.md           |  4 ++--
 docs/package.json                                    |  3 ++-
 yarn.lock                                            | 12 ++++++++++++
 5 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/docs/data/joy/components/circular-progress/CircularProgressCountUp.js b/docs/data/joy/components/circular-progress/CircularProgressCountUp.js
index 75123949a988c2..375ecc4e854d32 100644
--- a/docs/data/joy/components/circular-progress/CircularProgressCountUp.js
+++ b/docs/data/joy/components/circular-progress/CircularProgressCountUp.js
@@ -1,9 +1,9 @@
+import * as React from 'react';
 import Box from '@mui/joy/Box';
 import Button from '@mui/joy/Button';
 import CircularProgress from '@mui/joy/CircularProgress';
 import Stack from '@mui/joy/Stack';
 import Typography from '@mui/joy/Typography';
-import * as React from 'react';
 import { useCountUp } from 'use-count-up';
 
 export default function CircularProgressDeterminate() {
diff --git a/docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx b/docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx
index 75123949a988c2..375ecc4e854d32 100644
--- a/docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx
+++ b/docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx
@@ -1,9 +1,9 @@
+import * as React from 'react';
 import Box from '@mui/joy/Box';
 import Button from '@mui/joy/Button';
 import CircularProgress from '@mui/joy/CircularProgress';
 import Stack from '@mui/joy/Stack';
 import Typography from '@mui/joy/Typography';
-import * as React from 'react';
 import { useCountUp } from 'use-count-up';
 
 export default function CircularProgressDeterminate() {
diff --git a/docs/data/joy/components/circular-progress/circular-progress.md b/docs/data/joy/components/circular-progress/circular-progress.md
index e878edc22996eb..70fa6e62f6f420 100644
--- a/docs/data/joy/components/circular-progress/circular-progress.md
+++ b/docs/data/joy/components/circular-progress/circular-progress.md
@@ -93,9 +93,9 @@ You can use these to customize the component with both the `sx` prop and the the
 
 {{"demo": "CircularProgressVariables.js", "hideToolbar": true, "bg": "gradient"}}
 
-## Common examples
+## 3rd-party integration
 
-### Count up feature
+### use-count-up
 
 Using the [use-count-up](https://www.npmjs.com/package/use-count-up) package, you can create a counting animation by providing `start`, `end`, and `duration` values.
 
diff --git a/docs/package.json b/docs/package.json
index 99cecd9321614b..7ef6dd4563129a 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -119,7 +119,8 @@
     "stylis-plugin-rtl": "^2.1.1",
     "stylis-plugin-rtl-sc": "npm:stylis-plugin-rtl@^1.1.0",
     "webfontloader": "^1.6.28",
-    "webpack-bundle-analyzer": "^4.9.0"
+    "webpack-bundle-analyzer": "^4.9.0",
+    "use-count-up": "^3.0.1"
   },
   "devDependencies": {
     "@babel/plugin-transform-react-constant-elements": "^7.22.5",
diff --git a/yarn.lock b/yarn.lock
index 57c54152392e2f..8448b94f64bff7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16547,6 +16547,18 @@ url@0.10.3:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-count-up@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/use-count-up/-/use-count-up-3.0.1.tgz#315edf4e4be91ead94e6dd34444349d9b8c2c6c3"
+  integrity sha512-jlVsXJYje6jh+xwQaCEYrwHoB+nRyillNEmr21bhe9kw7tpRzyrSq9jQs9UOlo+8hCFkuOmjUihL3IjEK/piVg==
+  dependencies:
+    use-elapsed-time "3.0.2"
+
+use-elapsed-time@3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/use-elapsed-time/-/use-elapsed-time-3.0.2.tgz#ef22bf520e60f9873fd102925a2d5cbc5d4faaf5"
+  integrity sha512-2EY9lJ5DWbAvT8wWiEp6Ztnl46DjXz2j78uhWbXaz/bg3OfpbgVucCAlcN8Bih6hTJfFTdVYX9L6ySMn5py/wQ==
+
 use-sync-external-store@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"

From 026da55b9fd9ec9046dafa90688596ef12feb11a Mon Sep 17 00:00:00 2001
From: anon-phantom <0x01.phantom@gmail.com>
Date: Thu, 31 Aug 2023 13:34:29 +0300
Subject: [PATCH 06/13] fix-function-name

---
 .../joy/components/circular-progress/CircularProgressCountUp.js | 2 +-
 .../components/circular-progress/CircularProgressCountUp.tsx    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/data/joy/components/circular-progress/CircularProgressCountUp.js b/docs/data/joy/components/circular-progress/CircularProgressCountUp.js
index 375ecc4e854d32..f3a42cb2a028f0 100644
--- a/docs/data/joy/components/circular-progress/CircularProgressCountUp.js
+++ b/docs/data/joy/components/circular-progress/CircularProgressCountUp.js
@@ -6,7 +6,7 @@ import Stack from '@mui/joy/Stack';
 import Typography from '@mui/joy/Typography';
 import { useCountUp } from 'use-count-up';
 
-export default function CircularProgressDeterminate() {
+export default function CircularProgressCountUp() {
   const [isLoading, setIsLoading] = React.useState(false);
 
   const { value: value1 } = useCountUp({
diff --git a/docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx b/docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx
index 375ecc4e854d32..f3a42cb2a028f0 100644
--- a/docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx
+++ b/docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx
@@ -6,7 +6,7 @@ import Stack from '@mui/joy/Stack';
 import Typography from '@mui/joy/Typography';
 import { useCountUp } from 'use-count-up';
 
-export default function CircularProgressDeterminate() {
+export default function CircularProgressCountUp() {
   const [isLoading, setIsLoading] = React.useState(false);
 
   const { value: value1 } = useCountUp({

From 3e2df8f74852cfe7eb667da9234149799f8459e7 Mon Sep 17 00:00:00 2001
From: zanivan <victorzanivan@gmail.com>
Date: Fri, 1 Sep 2023 11:34:52 -0300
Subject: [PATCH 07/13] Reorder doc page

---
 .../circular-progress/circular-progress.md       | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/data/joy/components/circular-progress/circular-progress.md b/docs/data/joy/components/circular-progress/circular-progress.md
index 70fa6e62f6f420..1c003342bd7b72 100644
--- a/docs/data/joy/components/circular-progress/circular-progress.md
+++ b/docs/data/joy/components/circular-progress/circular-progress.md
@@ -93,14 +93,6 @@ You can use these to customize the component with both the `sx` prop and the the
 
 {{"demo": "CircularProgressVariables.js", "hideToolbar": true, "bg": "gradient"}}
 
-## 3rd-party integration
-
-### use-count-up
-
-Using the [use-count-up](https://www.npmjs.com/package/use-count-up) package, you can create a counting animation by providing `start`, `end`, and `duration` values.
-
-{{"demo": "CircularProgressCountUp.js"}}
-
 ## Accessibility
 
 Out of the box, the `aria-valuenow` attribute will indicate the current value of the progress bar only when the value is not indeterminate.
@@ -117,6 +109,14 @@ Here are a few tips to make sure you have an accessible circular progress compon
 - Use the `aria-label` or `aria-labelledby` attribute to provide an accessible name for your progress component.
   These define the string value or identifies the element(s) that label the progress component.
 
+## Common examples
+
+### 3rd-party integration
+
+Using the [use-count-up](https://www.npmjs.com/package/use-count-up) package, you can create a counting animation by providing `start`, `end`, and `duration` values.
+
+{{"demo": "CircularProgressCountUp.js"}}
+
 ## Anatomy
 
 The Circular Progress component is composed of a single root `<span>` with an `<svg>` component that wraps around two `<circle>`.

From 0afea82ab7b02650fe6c4d643855efbdf45eeebb Mon Sep 17 00:00:00 2001
From: zanivan <victorzanivan@gmail.com>
Date: Fri, 1 Sep 2023 11:35:05 -0300
Subject: [PATCH 08/13] Visual and UX tweaks to the demo

---
 .../CircularProgressCountUp.tsx               | 33 +++++++++++++++----
 1 file changed, 27 insertions(+), 6 deletions(-)

diff --git a/docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx b/docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx
index f3a42cb2a028f0..2860736e28a67b 100644
--- a/docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx
+++ b/docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx
@@ -8,12 +8,17 @@ import { useCountUp } from 'use-count-up';
 
 export default function CircularProgressCountUp() {
   const [isLoading, setIsLoading] = React.useState(false);
+  const [buttonLabel, setButtonLabel] = React.useState('Start'); // Track button label
 
-  const { value: value1 } = useCountUp({
+  const { value: value1, reset: resetValue1 } = useCountUp({
     isCounting: isLoading,
     duration: 1,
     start: 0,
     end: 25,
+    onEnd: () => {
+      setIsLoading(false);
+      setButtonLabel('Reset'); // Change the button label when loading is complete
+    },
   });
 
   const { value: value2, reset } = useCountUp({
@@ -23,22 +28,38 @@ export default function CircularProgressCountUp() {
     end: 75,
   });
 
+  const handleButtonClick = () => {
+    if (isLoading) {
+      setIsLoading(false);
+      setButtonLabel('Start');
+      resetValue1(); // Reset the value
+    } else {
+      setIsLoading(true);
+      setButtonLabel('Reset');
+    }
+  };
+
   return (
-    <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
+    <Box sx={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
       <Stack sx={{ gap: 2 }}>
         <CircularProgress size="lg" determinate value={value1}>
           <Typography>{value1}%</Typography>
         </CircularProgress>
-        <Button size="sm" onClick={() => setIsLoading(true)}>
-          Start
+        <Button
+          size="sm"
+          variant="outlined"
+          color="neutral"
+          onClick={handleButtonClick} // Use a single click handler
+        >
+          {buttonLabel}
         </Button>
       </Stack>
       <Stack sx={{ gap: 2 }}>
         <CircularProgress size="lg" determinate value={value2}>
           <Typography>{value2}%</Typography>
         </CircularProgress>
-        <Button size="sm" onClick={reset}>
-          Reset
+        <Button size="sm" variant="outlined" color="neutral" onClick={reset}>
+          Reload
         </Button>
       </Stack>
     </Box>

From 5082859c3bec94f3f1da55786e77b9b1096e658f Mon Sep 17 00:00:00 2001
From: zanivan <victorzanivan@gmail.com>
Date: Fri, 1 Sep 2023 11:36:53 -0300
Subject: [PATCH 09/13] Run yarn docs:typescript:formatted

---
 .../CircularProgressCountUp.js                | 33 +++++++++++++++----
 1 file changed, 27 insertions(+), 6 deletions(-)

diff --git a/docs/data/joy/components/circular-progress/CircularProgressCountUp.js b/docs/data/joy/components/circular-progress/CircularProgressCountUp.js
index f3a42cb2a028f0..2860736e28a67b 100644
--- a/docs/data/joy/components/circular-progress/CircularProgressCountUp.js
+++ b/docs/data/joy/components/circular-progress/CircularProgressCountUp.js
@@ -8,12 +8,17 @@ import { useCountUp } from 'use-count-up';
 
 export default function CircularProgressCountUp() {
   const [isLoading, setIsLoading] = React.useState(false);
+  const [buttonLabel, setButtonLabel] = React.useState('Start'); // Track button label
 
-  const { value: value1 } = useCountUp({
+  const { value: value1, reset: resetValue1 } = useCountUp({
     isCounting: isLoading,
     duration: 1,
     start: 0,
     end: 25,
+    onEnd: () => {
+      setIsLoading(false);
+      setButtonLabel('Reset'); // Change the button label when loading is complete
+    },
   });
 
   const { value: value2, reset } = useCountUp({
@@ -23,22 +28,38 @@ export default function CircularProgressCountUp() {
     end: 75,
   });
 
+  const handleButtonClick = () => {
+    if (isLoading) {
+      setIsLoading(false);
+      setButtonLabel('Start');
+      resetValue1(); // Reset the value
+    } else {
+      setIsLoading(true);
+      setButtonLabel('Reset');
+    }
+  };
+
   return (
-    <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
+    <Box sx={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
       <Stack sx={{ gap: 2 }}>
         <CircularProgress size="lg" determinate value={value1}>
           <Typography>{value1}%</Typography>
         </CircularProgress>
-        <Button size="sm" onClick={() => setIsLoading(true)}>
-          Start
+        <Button
+          size="sm"
+          variant="outlined"
+          color="neutral"
+          onClick={handleButtonClick} // Use a single click handler
+        >
+          {buttonLabel}
         </Button>
       </Stack>
       <Stack sx={{ gap: 2 }}>
         <CircularProgress size="lg" determinate value={value2}>
           <Typography>{value2}%</Typography>
         </CircularProgress>
-        <Button size="sm" onClick={reset}>
-          Reset
+        <Button size="sm" variant="outlined" color="neutral" onClick={reset}>
+          Reload
         </Button>
       </Stack>
     </Box>

From c6365807ee2c96ff0857a7a4f0ac13dabb307551 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Mon, 11 Sep 2023 11:17:08 -0300
Subject: [PATCH 10/13] format documentation

---
 .../circular-progress/circular-progress.md       | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/data/joy/components/circular-progress/circular-progress.md b/docs/data/joy/components/circular-progress/circular-progress.md
index 1c003342bd7b72..a764b83defe3d6 100644
--- a/docs/data/joy/components/circular-progress/circular-progress.md
+++ b/docs/data/joy/components/circular-progress/circular-progress.md
@@ -86,6 +86,14 @@ The size of the Circular Progress is controlled by a button, an icon button, or
 
 {{"demo": "CircularProgressButton.js"}}
 
+## Third-party integrations
+
+### use-count-up
+
+Use the `useCountUp` hook from the [use-count-up](https://www.npmjs.com/package/use-count-up) package to create a counting animation by providing `start`, `end`, and `duration` values.
+
+{{"demo": "CircularProgressCountUp.js"}}
+
 ## CSS variables playground
 
 Play around with all the CSS variables available on the component to see how the design changes.
@@ -109,14 +117,6 @@ Here are a few tips to make sure you have an accessible circular progress compon
 - Use the `aria-label` or `aria-labelledby` attribute to provide an accessible name for your progress component.
   These define the string value or identifies the element(s) that label the progress component.
 
-## Common examples
-
-### 3rd-party integration
-
-Using the [use-count-up](https://www.npmjs.com/package/use-count-up) package, you can create a counting animation by providing `start`, `end`, and `duration` values.
-
-{{"demo": "CircularProgressCountUp.js"}}
-
 ## Anatomy
 
 The Circular Progress component is composed of a single root `<span>` with an `<svg>` component that wraps around two `<circle>`.

From cee919582d431faeeb0bf3ff44eeca9c3f32c907 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Mon, 11 Sep 2023 11:21:03 -0300
Subject: [PATCH 11/13] demos simplifications

---
 .../circular-progress/CircularProgressCountUp.js    | 13 ++++++-------
 .../circular-progress/CircularProgressCountUp.tsx   | 13 ++++++-------
 .../CircularProgressCountUp.tsx.preview             |  6 ------
 3 files changed, 12 insertions(+), 20 deletions(-)
 delete mode 100644 docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx.preview

diff --git a/docs/data/joy/components/circular-progress/CircularProgressCountUp.js b/docs/data/joy/components/circular-progress/CircularProgressCountUp.js
index 2860736e28a67b..25a5f86facdfae 100644
--- a/docs/data/joy/components/circular-progress/CircularProgressCountUp.js
+++ b/docs/data/joy/components/circular-progress/CircularProgressCountUp.js
@@ -1,9 +1,8 @@
 import * as React from 'react';
-import Box from '@mui/joy/Box';
-import Button from '@mui/joy/Button';
-import CircularProgress from '@mui/joy/CircularProgress';
 import Stack from '@mui/joy/Stack';
+import Button from '@mui/joy/Button';
 import Typography from '@mui/joy/Typography';
+import CircularProgress from '@mui/joy/CircularProgress';
 import { useCountUp } from 'use-count-up';
 
 export default function CircularProgressCountUp() {
@@ -40,8 +39,8 @@ export default function CircularProgressCountUp() {
   };
 
   return (
-    <Box sx={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
-      <Stack sx={{ gap: 2 }}>
+    <Stack direction="row" alignItems="center" flexWrap="wrap" spacing={8}>
+      <Stack spacing={2}>
         <CircularProgress size="lg" determinate value={value1}>
           <Typography>{value1}%</Typography>
         </CircularProgress>
@@ -54,7 +53,7 @@ export default function CircularProgressCountUp() {
           {buttonLabel}
         </Button>
       </Stack>
-      <Stack sx={{ gap: 2 }}>
+      <Stack spacing={2}>
         <CircularProgress size="lg" determinate value={value2}>
           <Typography>{value2}%</Typography>
         </CircularProgress>
@@ -62,6 +61,6 @@ export default function CircularProgressCountUp() {
           Reload
         </Button>
       </Stack>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx b/docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx
index 2860736e28a67b..25a5f86facdfae 100644
--- a/docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx
+++ b/docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx
@@ -1,9 +1,8 @@
 import * as React from 'react';
-import Box from '@mui/joy/Box';
-import Button from '@mui/joy/Button';
-import CircularProgress from '@mui/joy/CircularProgress';
 import Stack from '@mui/joy/Stack';
+import Button from '@mui/joy/Button';
 import Typography from '@mui/joy/Typography';
+import CircularProgress from '@mui/joy/CircularProgress';
 import { useCountUp } from 'use-count-up';
 
 export default function CircularProgressCountUp() {
@@ -40,8 +39,8 @@ export default function CircularProgressCountUp() {
   };
 
   return (
-    <Box sx={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
-      <Stack sx={{ gap: 2 }}>
+    <Stack direction="row" alignItems="center" flexWrap="wrap" spacing={8}>
+      <Stack spacing={2}>
         <CircularProgress size="lg" determinate value={value1}>
           <Typography>{value1}%</Typography>
         </CircularProgress>
@@ -54,7 +53,7 @@ export default function CircularProgressCountUp() {
           {buttonLabel}
         </Button>
       </Stack>
-      <Stack sx={{ gap: 2 }}>
+      <Stack spacing={2}>
         <CircularProgress size="lg" determinate value={value2}>
           <Typography>{value2}%</Typography>
         </CircularProgress>
@@ -62,6 +61,6 @@ export default function CircularProgressCountUp() {
           Reload
         </Button>
       </Stack>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx.preview b/docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx.preview
deleted file mode 100644
index b8a37e4ac6a4a1..00000000000000
--- a/docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx.preview
+++ /dev/null
@@ -1,6 +0,0 @@
-<CircularProgress size="lg" determinate value={value1}>
-  <Typography>{value1}%</Typography>
-</CircularProgress>
-<CircularProgress size="lg" determinate value={value2}>
-    <Typography>{value2}%</Typography>
-</CircularProgress>

From cabde8f92a0d01b803dc7af8229b5e8474b10b65 Mon Sep 17 00:00:00 2001
From: Phantom X <71615064+anon-phantom@users.noreply.github.com>
Date: Tue, 12 Sep 2023 15:27:06 +0300
Subject: [PATCH 12/13] undo remote-tracking branch 'origin/master' into
 pr/38739

---
 docs/public/static/logo.svg       | 5 ++++-
 docs/src/icons/SvgMuiLogomark.tsx | 6 +++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/docs/public/static/logo.svg b/docs/public/static/logo.svg
index 5cb3a1e389ce63..b284583364ddba 100644
--- a/docs/public/static/logo.svg
+++ b/docs/public/static/logo.svg
@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="36" height="32" viewBox="0 0 36 32" fill="none"><path d="M30.343 21.976a1 1 0 00.502-.864l.018-5.787a1 1 0 01.502-.864l3.137-1.802a1 1 0 011.498.867v10.521a1 1 0 01-.502.867l-11.839 6.8a1 1 0 01-.994.001l-9.291-5.314a1 1 0 01-.504-.868v-5.305c0-.006.007-.01.013-.007.005.003.012 0 .012-.007v-.006c0-.004.002-.008.006-.01l7.652-4.396c.007-.004.004-.015-.004-.015a.008.008 0 01-.008-.008l.015-5.201a1 1 0 00-1.5-.87l-5.687 3.277a1 1 0 01-.998 0L6.666 9.7a1 1 0 00-1.499.866v9.4a1 1 0 01-1.496.869l-3.166-1.81a1 1 0 01-.504-.87l.028-16.43A1 1 0 011.527.86l10.845 6.229a1 1 0 00.996 0L24.21.86a1 1 0 011.498.868v16.434a1 1 0 01-.501.867l-5.678 3.27a1 1 0 00.004 1.735l3.132 1.783a1 1 0 00.993-.002l6.685-3.839zM31 7.234a1 1 0 001.514.857l3-1.8A1 1 0 0036 5.434V1.766A1 1 0 0034.486.91l-3 1.8a1 1 0 00-.486.857v3.668z" fill="#007FFF" /></svg>
\ No newline at end of file
+<svg width="35" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10.992 6.412 1.504.877A1 1 0 0 0 0 1.741v15.627a2 2 0 0 0 .971 1.715l2.514 1.508A1 1 0 0 0 5 19.734v-9.01a1 1 0 0 1 1.496-.87l4.512 2.579a2 2 0 0 0 1.984 0l4.512-2.578a1 1 0 0 1 1.496.868v4.116a2 2 0 0 1-1.008 1.737l-5.236 2.992A1.5 1.5 0 0 0 12 20.87v4.06a2 2 0 0 0 .89 1.664l7.081 4.72a2 2 0 0 0 2.102.073l12.171-6.955A1.5 1.5 0 0 0 35 23.13V12.265a1 1 0 0 0-1.514-.857l-2.515 1.508A2 2 0 0 0 30 14.632v5.485a1.5 1.5 0 0 1-.771 1.312l-7.43 4.127a1.5 1.5 0 0 1-1.56-.063l-2.424-1.616a1 1 0 0 1 .04-1.69l5.174-3.104A2 2 0 0 0 24 17.368V1.74a1 1 0 0 0-1.504-.864l-9.488 5.535a2 2 0 0 1-2.016 0Z" fill="#007FFF"/>
+  <path d="M34.029 7.583 31.514 9.09A1 1 0 0 1 30 8.234V4.132a2 2 0 0 1 .971-1.715L33.486.91A1 1 0 0 1 35 1.766v4.102a2 2 0 0 1-.971 1.715Z" fill="#007FFF"/>
+</svg>
\ No newline at end of file
diff --git a/docs/src/icons/SvgMuiLogomark.tsx b/docs/src/icons/SvgMuiLogomark.tsx
index 11fedda4e46f42..79b7d107026a87 100644
--- a/docs/src/icons/SvgMuiLogomark.tsx
+++ b/docs/src/icons/SvgMuiLogomark.tsx
@@ -5,16 +5,16 @@ export default function SvgMuiLogomark(props: RootSvgProps) {
   return (
     <RootSvg
       xmlns="http://www.w3.org/2000/svg"
-      width={36}
+      width={35}
       height={32}
-      viewBox="0 0 36 32"
+      viewBox="0 0 35 32"
       fill="none"
       {...props}
     >
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M30.343 21.976a1 1 0 00.502-.864l.018-5.787a1 1 0 01.502-.864l3.137-1.802a1 1 0 011.498.867v10.521a1 1 0 01-.502.867l-11.839 6.8a1 1 0 01-.994.001l-9.291-5.314a1 1 0 01-.504-.868v-5.305c0-.006.007-.01.013-.007.005.003.012 0 .012-.007v-.006c0-.004.002-.008.006-.01l7.652-4.396c.007-.004.004-.015-.004-.015a.008.008 0 01-.008-.008l.015-5.201a1 1 0 00-1.5-.87l-5.687 3.277a1 1 0 01-.998 0L6.666 9.7a1 1 0 00-1.499.866v9.4a1 1 0 01-1.496.869l-3.166-1.81a1 1 0 01-.504-.87l.028-16.43A1 1 0 011.527.86l10.845 6.229a1 1 0 00.996 0L24.21.86a1 1 0 011.498.868v16.434a1 1 0 01-.501.867l-5.678 3.27a1 1 0 00.004 1.735l3.132 1.783a1 1 0 00.993-.002l6.685-3.839zM31 7.234a1 1 0 001.514.857l3-1.8A1 1 0 0036 5.434V1.766A1 1 0 0034.486.91l-3 1.8a1 1 0 00-.486.857v3.668z"
+        d="M10.992 6.412 1.504.877A1 1 0 0 0 0 1.741v15.627a2 2 0 0 0 .971 1.715l2.514 1.508A1 1 0 0 0 5 19.734v-9.01a1 1 0 0 1 1.496-.87l4.512 2.579a2 2 0 0 0 1.984 0l4.512-2.578a1 1 0 0 1 1.496.868v4.116a2 2 0 0 1-1.008 1.737l-5.236 2.992A1.5 1.5 0 0 0 12 20.87v4.06a2 2 0 0 0 .89 1.664l7.081 4.72a2 2 0 0 0 2.102.073l12.171-6.955A1.5 1.5 0 0 0 35 23.13V12.265a1 1 0 0 0-1.514-.857l-2.515 1.508A2 2 0 0 0 30 14.632v5.485a1.5 1.5 0 0 1-.771 1.312l-7.43 4.127a1.5 1.5 0 0 1-1.56-.063l-2.424-1.616a1 1 0 0 1 .04-1.69l5.174-3.104A2 2 0 0 0 24 17.368V1.74a1 1 0 0 0-1.504-.864l-9.488 5.535a2 2 0 0 1-2.016 0Z M34.029 7.583 31.514 9.09A1 1 0 0 1 30 8.234V4.132a2 2 0 0 1 .971-1.715L33.486.91A1 1 0 0 1 35 1.766v4.102a2 2 0 0 1-.971 1.715Z"
         fill="#007FFF"
       />
     </RootSvg>

From 683699c987e9de502deed0fcd158f09f0a4c31b4 Mon Sep 17 00:00:00 2001
From: Phantom X <71615064+anon-phantom@users.noreply.github.com>
Date: Tue, 12 Sep 2023 15:38:32 +0300
Subject: [PATCH 13/13] undo-logo-refinement

---
 .../circular-progress/CircularProgressCountUp.js | 13 ++++++-------
 .../CircularProgressCountUp.tsx                  | 13 ++++++-------
 .../CircularProgressCountUp.tsx.preview          |  6 ------
 .../circular-progress/circular-progress.md       | 16 ++++++++--------
 4 files changed, 20 insertions(+), 28 deletions(-)
 delete mode 100644 docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx.preview

diff --git a/docs/data/joy/components/circular-progress/CircularProgressCountUp.js b/docs/data/joy/components/circular-progress/CircularProgressCountUp.js
index 2860736e28a67b..25a5f86facdfae 100644
--- a/docs/data/joy/components/circular-progress/CircularProgressCountUp.js
+++ b/docs/data/joy/components/circular-progress/CircularProgressCountUp.js
@@ -1,9 +1,8 @@
 import * as React from 'react';
-import Box from '@mui/joy/Box';
-import Button from '@mui/joy/Button';
-import CircularProgress from '@mui/joy/CircularProgress';
 import Stack from '@mui/joy/Stack';
+import Button from '@mui/joy/Button';
 import Typography from '@mui/joy/Typography';
+import CircularProgress from '@mui/joy/CircularProgress';
 import { useCountUp } from 'use-count-up';
 
 export default function CircularProgressCountUp() {
@@ -40,8 +39,8 @@ export default function CircularProgressCountUp() {
   };
 
   return (
-    <Box sx={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
-      <Stack sx={{ gap: 2 }}>
+    <Stack direction="row" alignItems="center" flexWrap="wrap" spacing={8}>
+      <Stack spacing={2}>
         <CircularProgress size="lg" determinate value={value1}>
           <Typography>{value1}%</Typography>
         </CircularProgress>
@@ -54,7 +53,7 @@ export default function CircularProgressCountUp() {
           {buttonLabel}
         </Button>
       </Stack>
-      <Stack sx={{ gap: 2 }}>
+      <Stack spacing={2}>
         <CircularProgress size="lg" determinate value={value2}>
           <Typography>{value2}%</Typography>
         </CircularProgress>
@@ -62,6 +61,6 @@ export default function CircularProgressCountUp() {
           Reload
         </Button>
       </Stack>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx b/docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx
index 2860736e28a67b..25a5f86facdfae 100644
--- a/docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx
+++ b/docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx
@@ -1,9 +1,8 @@
 import * as React from 'react';
-import Box from '@mui/joy/Box';
-import Button from '@mui/joy/Button';
-import CircularProgress from '@mui/joy/CircularProgress';
 import Stack from '@mui/joy/Stack';
+import Button from '@mui/joy/Button';
 import Typography from '@mui/joy/Typography';
+import CircularProgress from '@mui/joy/CircularProgress';
 import { useCountUp } from 'use-count-up';
 
 export default function CircularProgressCountUp() {
@@ -40,8 +39,8 @@ export default function CircularProgressCountUp() {
   };
 
   return (
-    <Box sx={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
-      <Stack sx={{ gap: 2 }}>
+    <Stack direction="row" alignItems="center" flexWrap="wrap" spacing={8}>
+      <Stack spacing={2}>
         <CircularProgress size="lg" determinate value={value1}>
           <Typography>{value1}%</Typography>
         </CircularProgress>
@@ -54,7 +53,7 @@ export default function CircularProgressCountUp() {
           {buttonLabel}
         </Button>
       </Stack>
-      <Stack sx={{ gap: 2 }}>
+      <Stack spacing={2}>
         <CircularProgress size="lg" determinate value={value2}>
           <Typography>{value2}%</Typography>
         </CircularProgress>
@@ -62,6 +61,6 @@ export default function CircularProgressCountUp() {
           Reload
         </Button>
       </Stack>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx.preview b/docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx.preview
deleted file mode 100644
index b8a37e4ac6a4a1..00000000000000
--- a/docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx.preview
+++ /dev/null
@@ -1,6 +0,0 @@
-<CircularProgress size="lg" determinate value={value1}>
-  <Typography>{value1}%</Typography>
-</CircularProgress>
-<CircularProgress size="lg" determinate value={value2}>
-    <Typography>{value2}%</Typography>
-</CircularProgress>
diff --git a/docs/data/joy/components/circular-progress/circular-progress.md b/docs/data/joy/components/circular-progress/circular-progress.md
index 1c003342bd7b72..a764b83defe3d6 100644
--- a/docs/data/joy/components/circular-progress/circular-progress.md
+++ b/docs/data/joy/components/circular-progress/circular-progress.md
@@ -86,6 +86,14 @@ The size of the Circular Progress is controlled by a button, an icon button, or
 
 {{"demo": "CircularProgressButton.js"}}
 
+## Third-party integrations
+
+### use-count-up
+
+Use the `useCountUp` hook from the [use-count-up](https://www.npmjs.com/package/use-count-up) package to create a counting animation by providing `start`, `end`, and `duration` values.
+
+{{"demo": "CircularProgressCountUp.js"}}
+
 ## CSS variables playground
 
 Play around with all the CSS variables available on the component to see how the design changes.
@@ -109,14 +117,6 @@ Here are a few tips to make sure you have an accessible circular progress compon
 - Use the `aria-label` or `aria-labelledby` attribute to provide an accessible name for your progress component.
   These define the string value or identifies the element(s) that label the progress component.
 
-## Common examples
-
-### 3rd-party integration
-
-Using the [use-count-up](https://www.npmjs.com/package/use-count-up) package, you can create a counting animation by providing `start`, `end`, and `duration` values.
-
-{{"demo": "CircularProgressCountUp.js"}}
-
 ## Anatomy
 
 The Circular Progress component is composed of a single root `<span>` with an `<svg>` component that wraps around two `<circle>`.