Elonsoft · va25j · May 16, 2025
diff --git a/packages/react/src/components/Spinner/Spinner.stories.tsx b/packages/react/src/components/Spinner/Spinner.stories.tsx
@@ -33,7 +33,7 @@ export const Demo: Story = {
       <div
         style={{
           display: 'grid',
-          gap: '24px',
+          gap: '16px',
           gridAutoFlow: 'column',
           justifyContent: 'flex-start',
         }}

diff --git a/packages/react/src/components/Spinner/Spinner.types.ts b/packages/react/src/components/Spinner/Spinner.types.ts
@@ -12,7 +12,7 @@ export interface SpinnerBaseProps<T> {
 
   /**
    * Size of the spinner component.
-   * @default 40
+   * @default 32
    **/
   size?: number;
 

diff --git a/packages/react/src/components/Spinner/Spinner.utils.ts b/packages/react/src/components/Spinner/Spinner.utils.ts
@@ -22,20 +22,21 @@ export const rotateKeyframe = keyframes`
   }
 `;
 
-export const strokeArrayKeyframe = keyframes`
-  0% {
-    stroke-dasharray: 1px, 200px;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 100px, 200px;
-    stroke-dashoffset: -15px;
-  }
-  100% {
-    stroke-dasharray: 100px, 200px;
-    stroke-dashoffset: -110px;
-  }
-`;
+// TODO: maybe remove
+// export const strokeArrayKeyframe = keyframes`
+//   0% {
+//     stroke-dasharray: 1px, 200px;
+//     stroke-dashoffset: 0;
+//   }
+//   50% {
+//     stroke-dasharray: 100px, 200px;
+//     stroke-dashoffset: -15px;
+//   }
+//   100% {
+//     stroke-dasharray: 100px, 200px;
+//     stroke-dashoffset: -110px;
+//   }
+// `;
 
 export const generateStyleColorVariants = (theme: Theme) => [
   {

diff --git a/packages/react/src/components/Spinner/SpinnerDashRing/SpinnerDashRing.tsx b/packages/react/src/components/Spinner/SpinnerDashRing/SpinnerDashRing.tsx
@@ -1,3 +1,5 @@
+import { useMemo } from 'react';
+
 import { SpinnerDashRingProps } from './SpinnerDashRing.types';
 
 import clsx from 'clsx';
@@ -7,7 +9,7 @@ import { unstable_composeClasses as composeClasses } from '@mui/base';
 
 import { styled, useThemeProps } from '@mui/material/styles';
 
-import { generateStyleColorVariants, rotateKeyframe, strokeArrayKeyframe } from '../Spinner.utils';
+import { generateStyleColorVariants, rotateKeyframe } from '../Spinner.utils';
 
 type SpinnerDashRingOwnerState = {
   classes?: SpinnerDashRingProps['classes'];
@@ -35,13 +37,20 @@ const SpinnerDashRingRoot = styled('svg', {
   },
 })<{ ownerState: SpinnerDashRingOwnerState }>(({ theme }) => ({
   variants: generateStyleColorVariants(theme),
+  animation: `${rotateKeyframe} 1400ms linear infinite`,
 
-  '& > circle': {
-    stroke: 'currentColor',
+  '& > g > g foreignObject': {
+    height: '2679.16px',
+    width: '2679.16px',
+    x: '-1339.58px',
+    y: '-1339.58px',
 
-    '&:nth-of-type(2)': {
-      animation: `${strokeArrayKeyframe} 1400ms ease-in-out infinite, ${rotateKeyframe} 1400ms linear infinite`,
-      transformOrigin: 'center',
+    '& > div': {
+      width: '100%',
+      height: '100%',
+      background: `conic-gradient(from 90deg,rgba(109, 47, 255, 0) 0deg,rgba(109, 47, 255, 0) 48.7883deg,
+              rgba(109, 47, 255, 0) 60.3659deg, currentColor 240.373deg,rgba(109, 47, 255, 0) 240.411deg,
+              rgba(109, 47, 255, 0) 360deg)`,
     },
   },
 }));
@@ -50,14 +59,15 @@ export const SpinnerDashRing = (inProps: SpinnerDashRingProps) => {
   const {
     className,
     sx,
-    size = 40,
+    size = 32,
     color = 'primary',
     ...props
   } = useThemeProps({
     props: inProps,
     name: 'ESSpinnerDashRing',
   });
 
+  const id = useMemo(() => `SpinnerDashRing-${SpinnerDashRing.count++}`, []);
   const ownerState = { ...props, color };
   const classes = useUtilityClasses(ownerState);
 
@@ -68,11 +78,28 @@ export const SpinnerDashRing = (inProps: SpinnerDashRingProps) => {
       height={size}
       ownerState={ownerState}
       sx={sx}
-      viewBox="0 0 40 40"
+      viewBox="0 0 32 32"
       width={size}
     >
-      <circle cx="20" cy="20" opacity="0.3" r="18" strokeWidth="4" />
-      <circle cx="20" cy="20" r="18" strokeWidth="4" />
+      <path
+        d="M16 4C9.37258 4 4 9.37258 4 16C4 22.6274 9.37258 28 16 28C22.6274 28 28 22.6274 28 16C28 9.37258 22.6274 4 16 4ZM0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z"
+        fill="currentColor"
+        opacity="0.3"
+      />
+
+      <g clipPath={`url(#${id})`}>
+        <g transform="matrix(0 0.0142761 -0.0144 0 16.002 15.8761)">
+          <foreignObject>
+            <div />
+          </foreignObject>
+        </g>
+      </g>
+
+      <clipPath id={id}>
+        <path d="M3.8776 23C2.92101 23.5523 1.68491 23.228 1.25618 22.21C-0.116103 18.9517 -0.377619 15.3101 0.54714 11.8589C1.64543 7.76003 4.327 4.26533 8.00195 2.14359C11.6769 0.0218623 16.0442 -0.553102 20.1431 0.545186C23.5943 1.46994 26.6172 3.51719 28.7529 6.33478C29.4201 7.21506 29.0829 8.44771 28.1263 9C27.1697 9.55228 25.9582 9.2107 25.2549 8.359C23.6767 6.44794 21.5333 5.0588 19.1078 4.40889C16.0336 3.58517 12.7582 4.0164 10.002 5.6077C7.24574 7.19899 5.23456 9.82002 4.41084 12.8942C3.76093 15.3197 3.89225 17.8705 4.7582 20.1928C5.14413 21.2277 4.83418 22.4477 3.8776 23Z" />
+      </clipPath>
     </SpinnerDashRingRoot>
   );
 };
+
+SpinnerDashRing.count = 0;
diff --git a/packages/react/src/components/Spinner/SpinnerFadingBars/SpinnerFadingBars.tsx b/packages/react/src/components/Spinner/SpinnerFadingBars/SpinnerFadingBars.tsx
@@ -36,10 +36,8 @@ const SpinnerFadingBarsRoot = styled('svg', {
 })<{ ownerState: SpinnerFadingBarsOwnerState }>(({ theme }) => ({
   variants: generateStyleColorVariants(theme),
 
-  '& > rect': {
+  '& > path': {
     fill: 'currentColor',
-    height: '10px',
-    width: '4px',
 
     animation: `${opacityKeyframe} 1000ms linear infinite`,
     ...generateDelayedOpacityAnimationStyles(),
@@ -50,7 +48,7 @@ export const SpinnerFadingBars = (inProps: SpinnerFadingBarsProps) => {
   const {
     className,
     sx,
-    size = 40,
+    size = 32,
     color = 'primary',
     ...props
   } = useThemeProps({
@@ -69,17 +67,17 @@ export const SpinnerFadingBars = (inProps: SpinnerFadingBarsProps) => {
       height={size}
       ownerState={ownerState}
       sx={sx}
-      viewBox="0 0 40 40"
+      viewBox="0 0 32 32"
       width={size}
     >
-      <rect rx="2" x="18" />
-      <rect rx="2" transform="rotate(45 32.7285 4.44336)" x="32.7285" y="4.44336" />
-      <rect rx="2" transform="rotate(90 40 18)" x="40" y="18" />
-      <rect rx="2" transform="rotate(135 35.5566 32.7275)" x="35.5566" y="32.7275" />
-      <rect rx="2" transform="rotate(-180 22 40)" x="22" y="40" />
-      <rect rx="2" transform="rotate(-135 7.27148 35.5566)" x="7.27148" y="35.5566" />
-      <rect rx="2" transform="rotate(-90 0 22)" y="22" />
-      <rect rx="2" transform="rotate(-45 4.44336 7.27246)" x="4.44336" y="7.27246" />
+      <path d="M7.51578 27.3143C6.73473 28.0954 5.4684 28.0954 4.68735 27.3143C3.9063 26.5333 3.9063 25.2669 4.68735 24.4859L7.51578 21.6574C8.29682 20.8764 9.56315 20.8764 10.3442 21.6574C11.1253 22.4385 11.1253 23.7048 10.3442 24.4859L7.51578 27.3143Z" />
+      <path d="M2 18C0.895431 18 -3.91405e-08 17.1046 -8.74228e-08 16C-1.35705e-07 14.8954 0.89543 14 2 14L6 14C7.10457 14 8 14.8954 8 16C8 17.1046 7.10457 18 6 18L2 18Z" />
+      <path d="M4.6857 7.5148C3.90465 6.73375 3.90465 5.46742 4.6857 4.68637C5.46675 3.90532 6.73308 3.90532 7.51412 4.68637L10.3426 7.5148C11.1236 8.29585 11.1236 9.56218 10.3426 10.3432C9.5615 11.1243 8.29517 11.1243 7.51412 10.3432L4.6857 7.5148Z" />
+      <path d="M14 2C14 0.895431 14.8954 0 16 0C17.1046 0 18 0.895431 18 2V6C18 7.10457 17.1046 8 16 8C14.8954 8 14 7.10457 14 6V2Z" />
+      <path d="M24.4842 4.6857C25.2653 3.90465 26.5316 3.90465 27.3127 4.6857C28.0937 5.46675 28.0937 6.73308 27.3127 7.51412L24.4842 10.3426C23.7032 11.1236 22.4368 11.1236 21.6558 10.3426C20.8747 9.5615 20.8747 8.29517 21.6558 7.51412L24.4842 4.6857Z" />
+      <path d="M30 14C31.1046 14 32 14.8954 32 16C32 17.1046 31.1046 18 30 18L26 18C24.8954 18 24 17.1046 24 16C24 14.8954 24.8954 14 26 14L30 14Z" />
+      <path d="M27.3143 24.4852C28.0954 25.2662 28.0954 26.5326 27.3143 27.3136C26.5333 28.0947 25.2669 28.0947 24.4859 27.3136L21.6574 24.4852C20.8764 23.7042 20.8764 22.4378 21.6574 21.6568C22.4385 20.8757 23.7048 20.8757 24.4859 21.6568L27.3143 24.4852Z" />
+      <path d="M14 26C14 24.8954 14.8954 24 16 24C17.1046 24 18 24.8954 18 26V30C18 31.1046 17.1046 32 16 32C14.8954 32 14 31.1046 14 30V26Z" />
     </SpinnerFadingBarsRoot>
   );
 };
diff --git a/packages/react/src/components/Spinner/SpinnerFadingDots/SpinnerFadingDots.tsx b/packages/react/src/components/Spinner/SpinnerFadingDots/SpinnerFadingDots.tsx
@@ -50,7 +50,7 @@ export const SpinnerFadingDots = (inProps: SpinnerFadingDotsProps) => {
   const {
     className,
     sx,
-    size = 40,
+    size = 32,
     color = 'primary',
     ...props
   } = useThemeProps({
@@ -68,17 +68,17 @@ export const SpinnerFadingDots = (inProps: SpinnerFadingDotsProps) => {
       height={size}
       ownerState={ownerState}
       sx={sx}
-      viewBox="0 0 40 40"
+      viewBox="0 0 32 32"
       width={size}
     >
-      <circle cx="19" cy="3" r="3" />
-      <circle cx="30.3145" cy="7.68652" r="3" />
-      <circle cx="35" cy="19" r="3" />
-      <circle cx="30.3145" cy="30.3135" r="3" />
-      <circle cx="19" cy="35" r="3" />
-      <circle cx="7.68555" cy="30.3135" r="3" />
-      <circle cx="3" cy="19" r="3" />
-      <circle cx="7.68555" cy="7.68652" r="3" />
+      <circle cx="16" cy="29.5" r="2.5" />
+      <circle cx="6.49957" cy="25.5" opacity="0.125" r="2.5" />
+      <circle cx="2.49957" cy="16" opacity="0.25" r="2.5" />
+      <circle cx="6.49957" cy="6.5" opacity="0.375" r="2.5" />
+      <circle cx="16" cy="2.5" opacity="0.5" r="2.5" />
+      <circle cx="25.4996" cy="6.5" opacity="0.625" r="2.5" />
+      <circle cx="29.4996" cy="16" opacity="0.75" r="2.5" />
+      <circle cx="25.4996" cy="25.5" opacity="0.875" r="2.5" />
     </SpinnerFadingDotsRoot>
   );
 };
diff --git a/packages/react/src/components/Spinner/SpinnerFadingDoubleRing/SpinnerFadingDoubleRing.tsx b/packages/react/src/components/Spinner/SpinnerFadingDoubleRing/SpinnerFadingDoubleRing.tsx
@@ -38,21 +38,20 @@ const SpinnerFadingDoubleRingSpinnerRoot = styled('svg', {
   },
 })<{ ownerState: SpinnerFadingDoubleRingPropsOwnerState }>(({ theme }) => ({
   variants: generateStyleColorVariants(theme),
-
-  transformOrigin: 'center',
   animation: `${rotateKeyframe} 1000ms linear infinite`,
 
-  '& > foreignObject': {
+  '& > g > g foreignObject': {
+    height: '2679.16px',
+    width: '2679.16px',
+    x: '-1339.58px',
+    y: '-1339.58px',
+
     '& > div': {
       width: '100%',
       height: '100%',
-    },
-
-    '&:nth-of-type(1) > div': {
-      background: `conic-gradient(from 179deg, rgba(255, 255, 255, 0) 69%, currentColor 100%)`,
-    },
-    '&:nth-of-type(2) > div': {
-      background: `conic-gradient(from 359deg, rgba(255, 255, 255, 0) 69%, currentColor 100%)`,
+      opacity: 1,
+      background: `conic-gradient(from 90deg, currentColor 0deg,rgba(109, 47, 255, 0) 90.5269deg,
+              currentColor 209.099deg, currentColor 360deg)`,
     },
   },
 }));
@@ -61,7 +60,7 @@ export const SpinnerFadingDoubleRing = (inProps: SpinnerFadingDoubleRingProps) =
   const {
     className,
     sx,
-    size = 40,
+    size = 32,
     color = 'primary',
     ...props
   } = useThemeProps({
@@ -80,21 +79,32 @@ export const SpinnerFadingDoubleRing = (inProps: SpinnerFadingDoubleRingProps) =
       height={size}
       ownerState={ownerState}
       sx={sx}
-      viewBox="0 0 40 40"
+      viewBox="0 0 32 32"
       width={size}
     >
       <clipPath id={id}>
-        <path d="M35.5886 11.0002C36.5452 10.4479 37.7785 10.7724 38.2325 11.7794C39.3801 14.3245 39.9852 17.0889 39.9999 19.8955C40.0181 23.3707 39.1305 26.7906 37.4245 29.8183C35.7185 32.8459 33.253 35.3768 30.271 37.1615C27.8627 38.6028 25.1847 39.5173 22.4132 39.8541C21.3167 39.9874 20.4003 39.1006 20.3772 37.9962C20.354 36.8919 21.2342 35.9907 22.3271 35.8301C24.403 35.525 26.4053 34.8134 28.2169 33.7292C30.6024 32.3015 32.5748 30.2768 33.9396 27.8547C35.3044 25.4325 36.0145 22.6966 36 19.9164C35.9889 17.8052 35.5603 15.7239 34.7459 13.7902C34.3172 12.7722 34.6321 11.5525 35.5886 11.0002Z" />
+        <path d="M2.00195 16C0.897384 16 -0.0109262 15.1011 0.12679 14.0052C0.388391 11.9233 1.05783 9.90652 2.10385 8.07266C3.48132 5.65771 5.46427 3.64335 7.85729 2.22813C10.2503 0.812899 12.9708 0.0456425 15.7506 0.00197383C17.8616 -0.0311872 19.9514 0.353781 21.9018 1.12747C22.9285 1.53477 23.2786 2.76377 22.7465 3.73171C22.2144 4.69965 21.0012 5.03514 19.9584 4.67097C18.6317 4.20766 17.2289 3.97925 15.8135 4.00148C13.7286 4.03423 11.6882 4.60967 9.89346 5.67109C8.09869 6.73252 6.61147 8.24328 5.57838 10.0545C4.877 11.2841 4.40137 12.6234 4.16824 14.0092C3.98499 15.0985 3.10652 16 2.00195 16Z" />
       </clipPath>
+
       <clipPath id={`${id}s`}>
-        <path d="M4.41174 29.0002C3.45515 29.5525 2.22189 29.228 1.76786 28.221C0.620274 25.6759 0.0151645 22.9115 0.000468903 20.1049C-0.0177268 16.6297 0.869917 13.2098 2.57592 10.1821C4.28192 7.15445 6.7474 4.62357 9.72937 2.8389C12.1377 1.39757 14.8157 0.483132 17.5872 0.14629C18.6837 0.0130243 19.6001 0.899817 19.6232 2.00414C19.6464 3.10847 18.7662 4.00965 17.6733 4.17029C15.5974 4.47543 13.5951 5.18696 11.7835 6.27116C9.39796 7.69889 7.42558 9.7236 6.06077 12.1457C4.69597 14.5679 3.98586 17.3038 4.00041 20.084C4.01147 22.1952 4.44012 24.2765 5.25448 26.2102C5.68319 27.2282 5.36832 28.4479 4.41174 29.0002Z" />
+        <path d="M30.002 16C31.1065 16 32.0148 16.8989 31.8771 17.9948C31.6155 20.0767 30.9461 22.0935 29.9001 23.9273C28.5226 26.3423 26.5396 28.3566 24.1466 29.7719C21.7536 31.1871 19.0331 31.9544 16.2533 31.998C14.1423 32.0312 12.0525 31.6462 10.1021 30.8725C9.07538 30.4652 8.72527 29.2362 9.2574 28.2683C9.78953 27.3003 11.0027 26.9649 12.0456 27.329C13.3722 27.7923 14.775 28.0208 16.1904 27.9985C18.2753 27.9658 20.3157 27.3903 22.1104 26.3289C23.9052 25.2675 25.3924 23.7567 26.4255 21.9455C27.1269 20.7159 27.6025 19.3766 27.8357 17.9908C28.0189 16.9015 28.8974 16 30.002 16Z" />
       </clipPath>
-      <foreignObject clipPath={`url(#${id})`} height="40" width="40">
-        <div />
-      </foreignObject>
-      <foreignObject clipPath={`url(#${id}s)`} height="40" width="40">
-        <div />
-      </foreignObject>
+
+      <g clipPath={`url(#${id})`}>
+        <g transform="matrix(0 0.0142761 -0.0144 0 16.002 15.8761)">
+          <foreignObject>
+            <div />
+          </foreignObject>
+        </g>
+      </g>
+
+      <g clipPath={`url(#${id}s)`}>
+        <g transform="matrix(1.24805e-09 -0.0142761 0.0144 1.25889e-09 16.002 16.1239)">
+          <foreignObject>
+            <div />
+          </foreignObject>
+        </g>
+      </g>
     </SpinnerFadingDoubleRingSpinnerRoot>
   );
 };

diff --git a/packages/react/src/components/Spinner/SpinnerFadingRing/SpinnerFadingRing.tsx b/packages/react/src/components/Spinner/SpinnerFadingRing/SpinnerFadingRing.tsx
@@ -45,15 +45,15 @@ const SpinnerFadingRingRoot = styled('svg', {
   '& > foreignObject > div': {
     width: '100%',
     height: '100%',
-    background: `conic-gradient(from 187deg, rgba(255, 255, 255, 0) 17%, currentColor 100%)`,
+    background: `conic-gradient(from 190deg, rgba(255, 255, 255, 0) 17%, currentColor 100%)`,
   },
 }));
 
 export const SpinnerFadingRing = (inProps: SpinnerFadingRingProps) => {
   const {
     className,
     sx,
-    size = 40,
+    size = 32,
     color = 'primary',
     ...props
   } = useThemeProps({
@@ -72,17 +72,17 @@ export const SpinnerFadingRing = (inProps: SpinnerFadingRingProps) => {
       height={size}
       ownerState={ownerState}
       sx={sx}
-      viewBox="0 0 40 40"
+      viewBox="0 0 32 32"
       width={size}
     >
       <clipPath id={id}>
         <path
           clipRule="evenodd"
-          d="M20 4C11.1634 4 4 11.1634 4 20C4 27.5387 9.21559 33.8641 16.2376 35.5556L15.3009 39.4444C6.52338 37.33 0 29.4292 0 20C0 8.9543 8.9543 0 20 0C31.0457 0 40 8.9543 40 20C40 31.0457 31.0457 40 20 40C18.8954 40 18 39.1046 18 38C18 36.8954 18.8954 36 20 36C28.8366 36 36 28.8366 36 20C36 11.1634 28.8366 4 20 4Z"
+          d="M16 4C9.37258 4 4 9.37258 4 16C4 21.1789 7.28177 25.5964 11.8857 27.2767C12.9233 27.6554 13.4575 28.8035 13.0788 29.8412C12.7001 30.8788 11.5519 31.413 10.5143 31.0343C4.38262 28.7964 0 22.9126 0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C14.8954 32 14 31.1046 14 30C14 28.8954 14.8954 28 16 28C22.6274 28 28 22.6274 28 16C28 9.37258 22.6274 4 16 4Z"
           fillRule="evenodd"
         />
       </clipPath>
-      <foreignObject clipPath={`url(#${id})`} height="40" width="40">
+      <foreignObject clipPath={`url(#${id})`} height="32" width="32">
         <div />
       </foreignObject>
     </SpinnerFadingRingRoot>

diff --git a/packages/react/src/components/Spinner/SpinnerRing/SpinnerRing.tsx b/packages/react/src/components/Spinner/SpinnerRing/SpinnerRing.tsx
@@ -50,7 +50,7 @@ export const SpinnerRing = (inProps: SpinnerRingProps) => {
   const {
     className,
     sx,
-    size = 40,
+    size = 32,
     color = 'primary',
     ...props
   } = useThemeProps({
@@ -68,11 +68,11 @@ export const SpinnerRing = (inProps: SpinnerRingProps) => {
       height={size}
       ownerState={ownerState}
       sx={sx}
-      viewBox="0 0 40 40"
+      viewBox="0 0 32 32"
       width={size}
     >
-      <circle cx="20" cy="20" opacity="0.3" r="18" strokeWidth="4" />
-      <path d="M20 2C20 0.89543 20.8977 -0.0103805 21.9967 0.0998606C26.5677 0.558357 30.865 2.58075 34.1421 5.85786C37.4192 9.13498 39.4416 13.4323 39.9001 18.0033C40.0104 19.1023 39.1046 20 38 20C36.8954 20 36.0129 19.1011 35.8752 18.0051C35.4345 14.4972 33.8402 11.2128 31.3137 8.68629C28.7872 6.1598 25.5028 4.56551 21.9949 4.12478C20.8989 3.98709 20 3.10457 20 2Z" />
+      <circle cx="16" cy="16" opacity="0.3" r="14" strokeWidth="4" />
+      <path d="M14 2C14 0.895431 14.8954 0 16 0C18.1011 0 20.1817 0.413852 22.1229 1.21793C24.0641 2.022 25.828 3.20055 27.3137 4.68629C28.7994 6.17203 29.978 7.93586 30.7821 9.87706C31.5861 11.8183 32 13.8989 32 16C32 17.1046 31.1046 18 30 18C28.8954 18 28 17.1046 28 16C28 14.4241 27.6896 12.8637 27.0866 11.4078C26.4835 9.95189 25.5996 8.62902 24.4853 7.51472C23.371 6.40042 22.0481 5.5165 20.5922 4.91345C19.1363 4.31039 17.5759 4 16 4C14.8954 4 14 3.10457 14 2Z" />
     </SpinnerRingRoot>
   );
 };