diff --git a/packages/mui-joy/src/CircularProgress/CircularProgress.tsx b/packages/mui-joy/src/CircularProgress/CircularProgress.tsx
index 828476b316d2d8..60b207845ca0be 100644
--- a/packages/mui-joy/src/CircularProgress/CircularProgress.tsx
+++ b/packages/mui-joy/src/CircularProgress/CircularProgress.tsx
@@ -16,7 +16,7 @@ import {
   CircularProgressProps,
   CircularProgressTypeMap,
 } from './CircularProgressProps';
-import cssVars from './CircularProgressCssVars';
+import circularProgressCssVars from './CircularProgressCssVars';
 
 const circulate = keyframes({
   '0%': {
@@ -48,7 +48,7 @@ const useUtilityClasses = (ownerState: CircularProgressOwnerState) => {
 };
 
 function getThickness(slot: 'track' | 'progress', defaultValue: string) {
-  return `var(${cssVars[`${slot}Thickness`]}, var(${cssVars.thickness}, ${defaultValue}))`;
+  return `var(${circularProgressCssVars[`${slot}Thickness`]}, var(${circularProgressCssVars.thickness}, ${defaultValue}))`;
 }
 
 const CircularProgressRoot = styled('span', {
@@ -62,33 +62,33 @@ const CircularProgressRoot = styled('span', {
     // integration with icon
     '--Icon-fontSize': 'calc(0.4 * var(--_root-size))',
     // public variables
-    [cssVars.trackColor]: backgroundColor,
-    [cssVars.progressColor]: color,
-    [cssVars.percent]: ownerState.value, // 0 - 100
-    [cssVars.linecap]: 'round',
+    [circularProgressCssVars.trackColor]: backgroundColor,
+    [circularProgressCssVars.progressColor]: color,
+    [circularProgressCssVars.percent]: ownerState.value, // 0 - 100
+    [circularProgressCssVars.linecap]: 'round',
     ...(ownerState.size === 'sm' && {
-      '--_root-size': `var(${cssVars.size}, 24px)`, // use --_root-size to let other components overrides via --CircularProgress-size
+      '--_root-size': `var(${circularProgressCssVars.size}, 24px)`, // use --_root-size to let other components overrides via --CircularProgress-size
       '--_track-thickness': getThickness('track', '3px'),
       '--_progress-thickness': getThickness('progress', '3px'),
     }),
     ...(ownerState.instanceSize === 'sm' && {
-      [cssVars.size]: '24px',
+      [circularProgressCssVars.size]: '24px',
     }),
     ...(ownerState.size === 'md' && {
       '--_track-thickness': getThickness('track', '6px'),
       '--_progress-thickness': getThickness('progress', '6px'),
-      '--_root-size': `var(${cssVars.size}, 40px)`,
+      '--_root-size': `var(${circularProgressCssVars.size}, 40px)`,
     }),
     ...(ownerState.instanceSize === 'md' && {
-      [cssVars.size]: '40px',
+      [circularProgressCssVars.size]: '40px',
     }),
     ...(ownerState.size === 'lg' && {
       '--_track-thickness': getThickness('track', '8px'),
       '--_progress-thickness': getThickness('progress', '8px'),
-      '--_root-size': `var(${cssVars.size}, 64px)`,
+      '--_root-size': `var(${circularProgressCssVars.size}, 64px)`,
     }),
     ...(ownerState.instanceSize === 'lg' && {
-      [cssVars.size]: '64px',
+      [circularProgressCssVars.size]: '64px',
     }),
     ...(ownerState.thickness && {
       '--_track-thickness': `${ownerState.thickness}px`,
@@ -101,7 +101,7 @@ const CircularProgressRoot = styled('span', {
     width: 'var(--_root-size)',
     height: 'var(--_root-size)',
     borderRadius: 'var(--_root-size)',
-    margin: `var(${cssVars.margin})`,
+    margin: `var(${circularProgressCssVars.margin})`,
     boxSizing: 'border-box',
     display: 'inline-flex',
     justifyContent: 'center',
@@ -157,7 +157,7 @@ const CircularProgressTrack = styled('circle', {
   r: 'calc(var(--_inner-size) / 2 - var(--_track-thickness) / 2 + min(0px, var(--_thickness-diff) / 2))',
   fill: 'transparent',
   strokeWidth: 'var(--_track-thickness)',
-  stroke: `var(${cssVars.trackColor}})`,
+  stroke: `var(${circularProgressCssVars.trackColor}})`,
 });
 
 const CircularProgressProgress = styled('circle', {
@@ -174,17 +174,17 @@ const CircularProgressProgress = styled('circle', {
     r: 'var(--_progress-radius)',
     fill: 'transparent',
     strokeWidth: 'var(--_progress-thickness)',
-    stroke: `var(${cssVars.progressColor})`,
-    strokeLinecap: `var(${cssVars.linecap}, round)` as 'round', // can't use CSS variable directly, need to cast type.
+    stroke: `var(${circularProgressCssVars.progressColor})`,
+    strokeLinecap: `var(${circularProgressCssVars.linecap}, round)` as 'round', // can't use CSS variable directly, need to cast type.
     strokeDasharray: 'var(--_progress-length)',
-    strokeDashoffset: `calc(var(--_progress-length) - var(${cssVars.percent}) * var(--_progress-length) / 100)`,
+    strokeDashoffset: `calc(var(--_progress-length) - var(${circularProgressCssVars.percent}) * var(--_progress-length) / 100)`,
     transformOrigin: 'center',
     transform: 'rotate(-90deg)', // to initially appear at the top-center of the circle.
   },
   ({ ownerState }) =>
     !ownerState.determinate &&
     css`
-      animation: var(${cssVars.circulation}, 0.8s linear 0s infinite normal none running)
+      animation: var(${circularProgressCssVars.circulation}, 0.8s linear 0s infinite normal none running)
         ${circulate};
     `,
 );
@@ -253,7 +253,7 @@ const CircularProgress = React.forwardRef(function CircularProgress(inProps, ref
         // Setting this CSS variable via inline-style
         // prevents the generation of new CSS every time
         // `value` prop updates
-        [cssVars.percent]: value,
+        [circularProgressCssVars.percent]: value,
       },
       ...(value &&
         determinate && {
diff --git a/packages/mui-joy/src/CircularProgress/CircularProgressCssVars.ts b/packages/mui-joy/src/CircularProgress/CircularProgressCssVars.ts
index 420a29037b6151..6838efdf5b0c2d 100644
--- a/packages/mui-joy/src/CircularProgress/CircularProgressCssVars.ts
+++ b/packages/mui-joy/src/CircularProgress/CircularProgressCssVars.ts
@@ -1,6 +1,6 @@
 import { CssVarsValuesType } from '../utils/CssVarsType';
 
-const cssVars = {
+const circularProgressCssVars = {
   thickness: '--CircularProgress-thickness',
   trackThickness: '--CircularProgress-trackThickness',
   progressThickness: '--CircularProgress-progressThickness',
@@ -14,8 +14,8 @@ const cssVars = {
 } as const;
 
 export type CircularProgressCssVarsType = CssVarsValuesType<
-  keyof typeof cssVars,
+  keyof typeof circularProgressCssVars,
   'CircularProgress'
 >;
 
-export default cssVars;
+export default circularProgressCssVars;