@coinbase/cds-web 8.59.0 → 8.60.0

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.60.0 (3/29/2026 PST)
+
+#### 🚀 Updates
+
+- Add indeterminate ProgressCircle. [[#501](https://github.com/coinbase/cds/pull/501)]
+
 ## 8.59.0 (3/27/2026 PST)
 
 #### 🚀 Updates

package/dts/buttons/Button.d.ts

@@ -7,6 +7,9 @@ import type {
 } from '@coinbase/cds-common/types';
 import type { Polymorphic } from '../core/polymorphism';
 import { type PressableBaseProps } from '../system/Pressable';
+/** @deprecated Use progressCircleSize instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export declare const spinnerHeight = 2.5;
 export declare const buttonDefaultElement = 'button';
 export type ButtonDefaultElement = typeof buttonDefaultElement;
@@ -23,6 +26,10 @@ export type ButtonBaseProps = Polymorphic.ExtendableProps<
       disabled?: boolean;
       /** Mark the button as loading and display a spinner. */
       loading?: boolean;
+      /** Size of the loading progress circle in px.
+       * @default 24
+       */
+      progressCircleSize?: number;
       /** Mark the background and border as transparent until interacted with. */
       transparent?: boolean;
       /** Change to block and expand to 100% of parent width. */

package/dts/buttons/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/buttons/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,KAAK,EACV,aAAa,EACb,QAAQ,EACR,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAGpC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAIxD,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAOzE,eAAO,MAAM,aAAa,MAAM,CAAC;AA8FjC,eAAO,MAAM,oBAAoB,WAAW,CAAC;AAE7C,MAAM,MAAM,oBAAoB,GAAG,OAAO,oBAAoB,CAAC;AAE/D,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC,eAAe,CACvD,kBAAkB,EAClB,WAAW,GACT,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GAAG;IACrD;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wDAAwD;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,yBAAyB;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iDAAiD;IACjD,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,uCAAuC;IACvC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uBAAuB;IACvB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB,qCAAqC;IACrC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CACJ,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,IAAI,WAAW,CAAC,KAAK,CAChF,WAAW,EACX,eAAe,CAChB,CAAC;AAEF,KAAK,eAAe,GAAG,CAAC,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,oBAAoB,EACnF,KAAK,EAAE,WAAW,CAAC,WAAW,CAAC,KAC5B,WAAW,CAAC,WAAW,CAAC,GAC3B,WAAW,CAAC,UAAU,CAAC;AAEzB,eAAO,MAAM,MAAM,EAAE,eAqIpB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/buttons/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,KAAK,EACV,aAAa,EACb,QAAQ,EACR,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAGpC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGxD,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAQzE;;GAEG;AACH,eAAO,MAAM,aAAa,MAAM,CAAC;AAuFjC,eAAO,MAAM,oBAAoB,WAAW,CAAC;AAE7C,MAAM,MAAM,oBAAoB,GAAG,OAAO,oBAAoB,CAAC;AAE/D,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC,eAAe,CACvD,kBAAkB,EAClB,WAAW,GACT,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GAAG;IACrD;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wDAAwD;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,2EAA2E;IAC3E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,yBAAyB;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iDAAiD;IACjD,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,uCAAuC;IACvC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uBAAuB;IACvB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB,qCAAqC;IACrC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CACJ,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,IAAI,WAAW,CAAC,KAAK,CAChF,WAAW,EACX,eAAe,CAChB,CAAC;AAEF,KAAK,eAAe,GAAG,CAAC,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,oBAAoB,EACnF,KAAK,EAAE,WAAW,CAAC,WAAW,CAAC,KAC5B,WAAW,CAAC,WAAW,CAAC,GAC3B,WAAW,CAAC,UAAU,CAAC;AAEzB,eAAO,MAAM,MAAM,EAAE,eA4IpB,CAAC"}

package/dts/buttons/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/buttons/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAGxF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAKxD,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAEzE,OAAO,EAAE,KAAK,eAAe,EAAiB,MAAM,UAAU,CAAC;AAW/D,eAAO,MAAM,wBAAwB,WAAW,CAAC;AAEjD,MAAM,MAAM,wBAAwB,GAAG,OAAO,wBAAwB,CAAC;AAEvE,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAAC,eAAe,CAC3D,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,EACpC,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC,GAAG;IACxE,6CAA6C;IAC7C,IAAI,EAAE,QAAQ,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B,CACF,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,IAAI,WAAW,CAAC,KAAK,CACpF,WAAW,EACX,mBAAmB,CACpB,CAAC;AAEF,KAAK,mBAAmB,GAAG,CAAC,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,wBAAwB,EAC3F,KAAK,EAAE,eAAe,CAAC,WAAW,CAAC,KAChC,WAAW,CAAC,WAAW,CAAC,GAC3B,WAAW,CAAC,UAAU,CAAC;AAgBzB,eAAO,MAAM,UAAU,EAAE,mBA+FxB,CAAC"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/buttons/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAGxF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAIxD,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAGzE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAIhD,eAAO,MAAM,wBAAwB,WAAW,CAAC;AAEjD,MAAM,MAAM,wBAAwB,GAAG,OAAO,wBAAwB,CAAC;AAEvE,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAAC,eAAe,CAC3D,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,EACpC,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC,GAAG;IACxE,6CAA6C;IAC7C,IAAI,EAAE,QAAQ,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B,CACF,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,IAAI,WAAW,CAAC,KAAK,CACpF,WAAW,EACX,mBAAmB,CACpB,CAAC;AAEF,KAAK,mBAAmB,GAAG,CAAC,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,wBAAwB,EAC3F,KAAK,EAAE,eAAe,CAAC,WAAW,CAAC,KAChC,WAAW,CAAC,WAAW,CAAC,GAC3B,WAAW,CAAC,UAAU,CAAC;AAgBzB,eAAO,MAAM,UAAU,EAAE,mBAyFxB,CAAC"}

package/dts/loaders/Spinner.d.ts

@@ -7,6 +7,10 @@ export type SpinnerBaseProps = {
   size: number;
 };
 export type SpinnerProps = SpinnerBaseProps & BoxProps<BoxDefaultElement>;
+/**
+ * @deprecated Use indeterminate ProgressCircle component instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export declare const Spinner: React.MemoExoticComponent<
   ({
     color,

package/dts/loaders/Spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/loaders/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAI7C,OAAO,EAAO,KAAK,iBAAiB,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAI3E,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;AAgC1E,eAAO,MAAM,OAAO,sGASf,YAAY,6CAwBhB,CAAC"}
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/loaders/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAI7C,OAAO,EAAO,KAAK,iBAAiB,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAI3E,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;AAgC1E;;;GAGG;AACH,eAAO,MAAM,OAAO,sGASf,YAAY,6CAwBhB,CAAC"}

package/dts/visualizations/DefaultProgressCircleContent.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 import type { ProgressCircleContentProps } from './ProgressCircle';
-export declare const DefaultProgressCircleContent: React.MemoExoticComponent<
+export declare const DefaultProgressCircleContent: import('react').MemoExoticComponent<
   ({
     progress,
     disableAnimateOnMount,

package/dts/visualizations/DefaultProgressCircleContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultProgressCircleContent.d.ts","sourceRoot":"","sources":["../../src/visualizations/DefaultProgressCircleContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAGnE,eAAO,MAAM,4BAA4B,oFAMpC,0BAA0B,6CAU9B,CAAC"}
+{"version":3,"file":"DefaultProgressCircleContent.d.ts","sourceRoot":"","sources":["../../src/visualizations/DefaultProgressCircleContent.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAGnE,eAAO,MAAM,4BAA4B,8FAMpC,0BAA0B,6CAU9B,CAAC"}

package/dts/visualizations/ProgressBar.d.ts

@@ -6,7 +6,7 @@ export type ProgressBaseProps = SharedProps &
   Pick<HintMotionBaseProps, 'disableAnimateOnMount'> &
   Pick<SharedAccessibilityProps, 'accessibilityLabel'> & {
     /** Number between 0-1 representing the progress percentage */
-    progress: number;
+    progress?: number;
     /** Toggle used to change thickness of progress visualization
      * @default normal
      * */
@@ -53,7 +53,7 @@ export declare const ProgressBar: React.MemoExoticComponent<
       Pick<HintMotionBaseProps, 'disableAnimateOnMount'> &
       Pick<SharedAccessibilityProps, 'accessibilityLabel'> & {
         /** Number between 0-1 representing the progress percentage */
-        progress: number;
+        progress?: number;
         /** Toggle used to change thickness of progress visualization
          * @default normal
          * */

package/dts/visualizations/ProgressBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,wBAAwB,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAOhG,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAI3D,MAAM,MAAM,iBAAiB,GAAG,WAAW,GACzC,IAAI,CAAC,mBAAmB,EAAE,uBAAuB,CAAC,GAClD,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GAAG;IACrD,8DAA8D;IAC9D,QAAQ,EAAE,MAAM,CAAC;IACjB;;SAEK;IACL,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC;AAEJ,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,GAAG;IACjD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,4BAA4B;QAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAChC,CAAC;IACF,8EAA8E;IAC9E,UAAU,CAAC,EAAE;QACX,mBAAmB;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,4BAA4B;QAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH,CAAC;AAQF,eAAO,MAAM,WAAW;IAlDpB,8DAA8D;cACpD,MAAM;IAChB;;SAEK;aACI,MAAM;IACf;;OAEG;eACQ,OAAO;IAClB;;;OAGG;YACK,SAAS,CAAC,KAAK;IACvB;;OAEG;qBACc,MAAM,IAAI;IAC3B;;OAEG;uBACgB,MAAM,IAAI;;YAIvB,KAAK,CAAC,aAAa;gBACf,MAAM;IAClB,yEAAyE;aAChE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,4BAA4B;QAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAChC;IACD,8EAA8E;iBACjE;QACX,mBAAmB;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,4BAA4B;QAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB;yCA2FF,CAAC"}
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,wBAAwB,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAOhG,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAI3D,MAAM,MAAM,iBAAiB,GAAG,WAAW,GACzC,IAAI,CAAC,mBAAmB,EAAE,uBAAuB,CAAC,GAClD,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GAAG;IACrD,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;SAEK;IACL,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC;AAEJ,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,GAAG;IACjD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,4BAA4B;QAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAChC,CAAC;IACF,8EAA8E;IAC9E,UAAU,CAAC,EAAE;QACX,mBAAmB;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,4BAA4B;QAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH,CAAC;AAQF,eAAO,MAAM,WAAW;IAlDpB,8DAA8D;eACnD,MAAM;IACjB;;SAEK;aACI,MAAM;IACf;;OAEG;eACQ,OAAO;IAClB;;;OAGG;YACK,SAAS,CAAC,KAAK;IACvB;;OAEG;qBACc,MAAM,IAAI;IAC3B;;OAEG;uBACgB,MAAM,IAAI;;YAIvB,KAAK,CAAC,aAAa;gBACf,MAAM;IAClB,yEAAyE;aAChE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,4BAA4B;QAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAChC;IACD,8EAA8E;iBACjE;QACX,mBAAmB;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,4BAA4B;QAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB;yCA2FF,CAAC"}

package/dts/visualizations/ProgressBarWithFloatLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBarWithFloatLabel.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressBarWithFloatLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8C,MAAM,OAAO,CAAC;AAGnE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAc5D,OAAO,EAA4B,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC7F,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGvD,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAC3C,8BAA8B,EAC5B,OAAO,GACP,UAAU,GACV,uBAAuB,GACvB,UAAU,GACV,gBAAgB,GAChB,QAAQ,GACR,YAAY,CACf,CAAC;AA0GF,MAAM,MAAM,8BAA8B,GAAG,IAAI,CAC/C,iBAAiB,EACjB,UAAU,GAAG,uBAAuB,GAAG,UAAU,GAAG,QAAQ,CAC7D,GAAG;IACF,yHAAyH;IACzH,KAAK,EAAE,gBAAgB,CAAC;IACxB;;;SAGK;IACL,cAAc,CAAC,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,OAAO,CAAC,CAAC;IACvD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uFAAuF;IACvF,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,8BAA8B;QAC9B,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACrC,oBAAoB;QACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC7B,CAAC;IACF,4FAA4F;IAC5F,UAAU,CAAC,EAAE;QACX,mBAAmB;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,8BAA8B;QAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,oBAAoB;QACpB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAC9C,KAAK,CAAC,iBAAiB,CAAC,8BAA8B,CAAC,CAwCxD,CAAC"}
+{"version":3,"file":"ProgressBarWithFloatLabel.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressBarWithFloatLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAE9E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAa5D,OAAO,EAA4B,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAG7F,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGvD,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAC3C,8BAA8B,EAC5B,OAAO,GACP,UAAU,GACV,uBAAuB,GACvB,UAAU,GACV,gBAAgB,GAChB,QAAQ,GACR,YAAY,CACf,CAAC;AA8FF,MAAM,MAAM,8BAA8B,GAAG,IAAI,CAC/C,iBAAiB,EACjB,UAAU,GAAG,uBAAuB,GAAG,UAAU,GAAG,QAAQ,CAC7D,GAAG;IACF,yHAAyH;IACzH,KAAK,EAAE,gBAAgB,CAAC;IACxB;;;SAGK;IACL,cAAc,CAAC,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,OAAO,CAAC,CAAC;IACvD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uFAAuF;IACvF,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,8BAA8B;QAC9B,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACrC,oBAAoB;QACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC7B,CAAC;IACF,4FAA4F;IAC5F,UAAU,CAAC,EAAE;QACX,mBAAmB;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,8BAA8B;QAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,oBAAoB;QACpB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAC9C,KAAK,CAAC,iBAAiB,CAAC,8BAA8B,CAAC,CAwCxD,CAAC"}

package/dts/visualizations/ProgressCircle.d.ts

@@ -23,6 +23,10 @@ export type ProgressCircleBaseProps = ProgressBaseProps & {
    * Optional component to override the default content rendered inside the circle.
    */
   contentNode?: React.ReactNode;
+  /**
+   * Toggle used to show an indeterminate progress circle.
+   */
+  indeterminate?: boolean;
 };
 export type ProgressCircleProps = ProgressCircleBaseProps & {
   style?: React.CSSProperties;
@@ -65,7 +69,7 @@ export declare const ProgressCircle: React.MemoExoticComponent<
     import('@coinbase/cds-common').SharedProps &
       Pick<import('../motion/types').HintMotionBaseProps, 'disableAnimateOnMount'> &
       Pick<import('@coinbase/cds-common').SharedAccessibilityProps, 'accessibilityLabel'> & {
-        progress: number;
+        progress?: number;
         weight?: import('@coinbase/cds-common').Weight;
         disabled?: boolean;
         color?: ThemeVars.Color;
@@ -93,6 +97,10 @@ export declare const ProgressCircle: React.MemoExoticComponent<
          * Optional component to override the default content rendered inside the circle.
          */
         contentNode?: React.ReactNode;
+        /**
+         * Toggle used to show an indeterminate progress circle.
+         */
+        indeterminate?: boolean;
       } & {
         style?: React.CSSProperties;
         className?: string;

package/dts/visualizations/ProgressCircle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressCircle.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressCircle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAatD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAWvD,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,GAAG;IACxD;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,GAAG;IAC1D,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4EAA4E;IAC5E,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,kBAAkB;QAClB,GAAG,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC1B,gCAAgC;QAChC,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC7B,yCAAyC;QACzC,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAChC,CAAC;IACF,iFAAiF;IACjF,UAAU,CAAC,EAAE;QACX,mBAAmB;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,kBAAkB;QAClB,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,gCAAgC;QAChC,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,yCAAyC;QACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAC3C,uBAAuB,EACvB,UAAU,GAAG,uBAAuB,GAAG,UAAU,CAClD,GAAG;IACF;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CACzB,CAAC;AAkEF,eAAO,MAAM,cAAc;;;;;;;;IA7HzB;;OAEG;kBACW,OAAO;IACrB;;;;OAIG;eACQ,OAAO;IAClB;;;;;OAKG;WACI,MAAM;IACb;;OAEG;kBACW,KAAK,CAAC,SAAS;;YAIrB,KAAK,CAAC,aAAa;gBACf,MAAM;IAClB,4EAA4E;aACnE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,kBAAkB;QAClB,GAAG,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC1B,gCAAgC;QAChC,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC7B,yCAAyC;QACzC,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAChC;IACD,iFAAiF;iBACpE;QACX,mBAAmB;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,kBAAkB;QAClB,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,gCAAgC;QAChC,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,yCAAyC;QACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB;yCAkMF,CAAC"}
+{"version":3,"file":"ProgressCircle.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressCircle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAYtD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAavD,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,GAAG;IACxD;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,GAAG;IAC1D,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4EAA4E;IAC5E,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,kBAAkB;QAClB,GAAG,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC1B,gCAAgC;QAChC,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC7B,yCAAyC;QACzC,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAChC,CAAC;IACF,iFAAiF;IACjF,UAAU,CAAC,EAAE;QACX,mBAAmB;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,kBAAkB;QAClB,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,gCAAgC;QAChC,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,yCAAyC;QACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAC3C,uBAAuB,EACvB,UAAU,GAAG,uBAAuB,GAAG,UAAU,CAClD,GAAG;IACF;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CACzB,CAAC;AA6EF,eAAO,MAAM,cAAc;;;;;;;;IA5IzB;;OAEG;kBACW,OAAO;IACrB;;;;OAIG;eACQ,OAAO;IAClB;;;;;OAKG;WACI,MAAM;IACb;;OAEG;kBACW,KAAK,CAAC,SAAS;IAC7B;;OAEG;oBACa,OAAO;;YAIf,KAAK,CAAC,aAAa;gBACf,MAAM;IAClB,4EAA4E;aACnE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,kBAAkB;QAClB,GAAG,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC1B,gCAAgC;QAChC,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC7B,yCAAyC;QACzC,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAChC;IACD,iFAAiF;iBACpE;QACX,mBAAmB;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,kBAAkB;QAClB,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,gCAAgC;QAChC,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,yCAAyC;QACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB;yCAmNF,CAAC"}

package/esm/buttons/Button.js

@@ -1,4 +1,4 @@
-const _excluded = ["as", "variant", "loading", "transparent", "block", "compact", "children", "start", "startIcon", "startIconActive", "end", "endIcon", "endIconActive", "flush", "noScaleOnPress", "numberOfLines", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "background", "color", "className", "height", "borderColor", "borderWidth", "borderRadius", "accessibilityLabel", "padding", "paddingX", "margin", "minWidth"];
+const _excluded = ["as", "variant", "loading", "progressCircleSize", "transparent", "block", "compact", "children", "start", "startIcon", "startIconActive", "end", "endIcon", "endIconActive", "flush", "noScaleOnPress", "numberOfLines", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "background", "color", "className", "height", "borderColor", "borderWidth", "borderRadius", "accessibilityLabel", "padding", "paddingX", "margin", "minWidth"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -10,13 +10,18 @@ import React, { forwardRef, memo } from 'react';
 import { transparentVariants, variants } from '@coinbase/cds-common/tokens/button';
 import { cx } from '../cx';
 import { Icon } from '../icons/Icon';
-import { Spinner } from '../loaders/Spinner';
 import { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';
+import { ProgressCircle } from '../visualizations';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const COMPONENT_STATIC_CLASSNAME = 'cds-Button';
 const DEFAULT_MIN_WIDTH = 100;
+
+/** @deprecated Use progressCircleSize instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const spinnerHeight = 2.5;
+const defaultProgressCircleSize = 24;
 const baseCss = "baseCss-b99zquh";
 const blockCss = "blockCss-b9yox33";
 const spinnerContainerCss = "spinnerContainerCss-s1bhvbb9";
@@ -29,20 +34,13 @@ const middleNodeCss = "middleNodeCss-m1avpq52";
 const flushSpaceCss = "flushSpaceCss-f69rtgb";
 const flushStartCss = "flushStartCss-f1aod6bi";
 const flushEndCss = "flushEndCss-fz9snbo";
-const spinnerStyle = {
-  width: '24px',
-  height: '24px',
-  border: '2px solid',
-  borderTopColor: 'var(--color-transparent)',
-  borderRightColor: 'var(--color-transparent)',
-  borderLeftColor: 'var(--color-transparent)'
-};
 export const buttonDefaultElement = 'button';
 export const Button = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       as,
       variant = 'primary',
       loading,
+      progressCircleSize = defaultProgressCircleSize,
       transparent,
       block,
       compact,
@@ -123,10 +121,12 @@ export const Button = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
       className: middleNodeCss,
       children: [loading && /*#__PURE__*/_jsx("span", {
         className: spinnerContainerCss,
-        children: /*#__PURE__*/_jsx(Spinner, {
+        children: /*#__PURE__*/_jsx(ProgressCircle, {
+          indeterminate: true,
+          accessibilityLabel: "Loading",
           color: "currentColor",
-          size: spinnerHeight,
-          style: spinnerStyle
+          size: progressCircleSize,
+          weight: "thin"
         })
       }), /*#__PURE__*/_jsx(Text, {
         color: "currentColor",

package/esm/buttons/IconButton.css

@@ -1,4 +1,3 @@
-@layer cds{.baseSpinnerCss-b1po8mo6{border:2px solid;border-top-color:var(--color-transparent);border-right-color:var(--color-transparent);border-left-color:var(--color-transparent);}
-.flushSpaceCss-fqg7x6g{min-width:unset;padding-inline-start:var(--space-2);padding-inline-end:var(--space-2);}
-.flushStartCss-f18p387c{margin-inline-start:calc(var(--space-2) * -1);}
-.flushEndCss-f10uyuq9{margin-inline-end:calc(var(--space-2) * -1);}}
+@layer cds{.flushSpaceCss-f1po8mo6{min-width:unset;padding-inline-start:var(--space-2);padding-inline-end:var(--space-2);}
+.flushStartCss-fqg7x6g{margin-inline-start:calc(var(--space-2) * -1);}
+.flushEndCss-f18p387c{margin-inline-end:calc(var(--space-2) * -1);}}

package/esm/buttons/IconButton.js

@@ -1,4 +1,4 @@
-const _excluded = ["as", "variant", "transparent", "compact", "background", "color", "borderColor", "borderRadius", "borderWidth", "alignItems", "justifyContent", "height", "width", "className", "name", "iconSize", "active", "flush", "loading", "accessibilityLabel", "accessibilityHint"];
+const _excluded = ["as", "variant", "transparent", "compact", "background", "color", "borderColor", "borderRadius", "borderWidth", "alignItems", "justifyContent", "height", "width", "className", "name", "iconSize", "active", "flush", "loading", "progressCircleSize", "accessibilityLabel", "accessibilityHint"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -6,21 +6,19 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { forwardRef, memo, useMemo } from 'react';
+import React, { forwardRef, memo } from 'react';
 import { transparentVariants, variants } from '@coinbase/cds-common/tokens/button';
 import { cx } from '../cx';
 import { useTheme } from '../hooks/useTheme';
 import { Icon } from '../icons/Icon';
-import { Spinner } from '../loaders/Spinner';
 import { Pressable } from '../system/Pressable';
-import { spinnerHeight } from './Button';
+import { ProgressCircle } from '../visualizations/ProgressCircle';
 import { jsx as _jsx } from "react/jsx-runtime";
 const COMPONENT_STATIC_CLASSNAME = 'cds-IconButton';
-const baseSpinnerCss = "baseSpinnerCss-b1po8mo6";
 export const iconButtonDefaultElement = 'button';
-const flushSpaceCss = "flushSpaceCss-fqg7x6g";
-const flushStartCss = "flushStartCss-f18p387c";
-const flushEndCss = "flushEndCss-f10uyuq9";
+const flushSpaceCss = "flushSpaceCss-f1po8mo6";
+const flushStartCss = "flushStartCss-fqg7x6g";
+const flushEndCss = "flushEndCss-f18p387c";
 export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       as,
@@ -43,6 +41,7 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
       active,
       flush,
       loading,
+      progressCircleSize,
       accessibilityLabel,
       accessibilityHint
     } = _ref,
@@ -50,10 +49,6 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
   const Component = as !== null && as !== void 0 ? as : iconButtonDefaultElement;
   const theme = useTheme();
   const iconSizeValue = theme.iconSize[iconSize];
-  const spinnerSizeStyles = useMemo(() => ({
-    width: iconSizeValue,
-    height: iconSizeValue
-  }), [iconSizeValue]);
   const variantMap = transparent ? transparentVariants : variants;
   const variantStyle = variantMap[variant];
   const colorValue = color !== null && color !== void 0 ? color : variantStyle.color;
@@ -81,12 +76,13 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
     transparentWhileInactive: transparent,
     width: width
   }, props), {}, {
-    children: loading ? /*#__PURE__*/_jsx(Spinner, {
-      className: baseSpinnerCss,
+    children: loading ? /*#__PURE__*/_jsx(ProgressCircle, {
+      indeterminate: true,
+      accessibilityLabel: "Loading",
       color: "currentColor",
-      size: spinnerHeight,
-      style: spinnerSizeStyles,
-      testID: props.testID ? "".concat(props.testID, "-spinner") : undefined
+      size: progressCircleSize !== null && progressCircleSize !== void 0 ? progressCircleSize : iconSizeValue,
+      testID: props.testID ? "".concat(props.testID, "-progress-circle") : undefined,
+      weight: "thin"
     }) : /*#__PURE__*/_jsx(Icon, {
       active: active,
       color: "currentColor",

package/esm/loaders/Spinner.js

@@ -13,6 +13,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const COMPONENT_STATIC_CLASSNAME = 'cds-Spinner';
 const baseCss = "baseCss-bggfp25";
 const spinnerStatusCss = "spinnerStatusCss-s1pli158";
+
+/**
+ * @deprecated Use indeterminate ProgressCircle component instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const Spinner = /*#__PURE__*/memo(_ref => {
   let {
       color = 'fgMuted',

package/esm/visualizations/DefaultProgressCircleContent.js

@@ -1,9 +1,9 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 import { ProgressTextLabel } from './ProgressTextLabel';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const DefaultProgressCircleContent = /*#__PURE__*/memo(_ref => {
   let {
-    progress,
+    progress = 0,
     disableAnimateOnMount,
     disabled,
     color = 'fgMuted'

package/esm/visualizations/ProgressBar.js

@@ -5,7 +5,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React, { forwardRef, memo } from 'react';
 import { animateProgressBaseSpec } from '@coinbase/cds-common/animation/progress';
-import { useProgressSize } from '@coinbase/cds-common/visualizations/useProgressSize';
+import { getProgressSize } from '@coinbase/cds-common/visualizations/getProgressSize';
 import { m as motion } from 'framer-motion';
 import { cx } from '../cx';
 import { Box, HStack } from '../layout';
@@ -17,7 +17,7 @@ const boxCss = "boxCss-bnvjmt8";
 export const ProgressBar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
   let {
     weight = 'normal',
-    progress,
+    progress = 0,
     color = 'bgPrimary',
     disabled,
     disableAnimateOnMount,
@@ -30,7 +30,7 @@ export const ProgressBar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forw
     onAnimationEnd,
     onAnimationStart
   } = _ref;
-  const height = useProgressSize(weight);
+  const height = getProgressSize(weight);
 
   // start position of the progress bar on mount
   const initialTranslateX = isRtl() ? 100 : -100;

package/esm/visualizations/ProgressBarWithFloatLabel.js

@@ -3,31 +3,30 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import React, { memo, useCallback, useRef, useState } from 'react';
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { animateProgressBaseSpec } from '@coinbase/cds-common/animation/progress';
-import { usePreviousValues } from '@coinbase/cds-common/hooks/usePreviousValues';
 import { isStorybook } from '@coinbase/cds-utils';
-import { m as motion, useAnimation } from 'framer-motion';
+import { m as motion } from 'framer-motion';
 import { cx } from '../cx';
 import { useDimensions } from '../hooks/useDimensions';
-import { useIsoEffect } from '../hooks/useIsoEffect';
 import { Box } from '../layout/Box';
 import { VStack } from '../layout/VStack';
-import { convertTransition } from '../motion/utils';
+import { useMotionProps } from '../motion/useMotionProps';
 import { isRtl } from '../utils/isRtl';
 import { getProgressBarLabelParts } from './getProgressBarLabelParts';
+const MotionBox = motion(Box);
 import { ProgressTextLabel } from './ProgressTextLabel';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const floatingTextContainerCss = "floatingTextContainerCss-f11geujd";
 const motionStyle = {
   originX: isRtl() ? 'left' : 'right'
 };
+const getEndTranslateX = (containerWidth, textContainerWidth, progress) => isRtl() ? Math.min(containerWidth - textContainerWidth, containerWidth - containerWidth * progress) : Math.max(0, containerWidth * progress - textContainerWidth);
 const ProgressBarFloatLabel = /*#__PURE__*/memo(_ref => {
-  var _getPreviousPercent;
   let {
     label,
     disabled,
-    progress,
+    progress = 0,
     disableAnimateOnMount,
     labelPlacement,
     styles,
@@ -35,16 +34,7 @@ const ProgressBarFloatLabel = /*#__PURE__*/memo(_ref => {
   } = _ref;
   const containerRef = useRef(null);
   const textContainerRef = useRef(null);
-  const {
-    getPreviousValue: getPreviousPercent,
-    addPreviousValue: addPreviousPercent
-  } = usePreviousValues([disableAnimateOnMount ? progress : 0]);
-  const animationControls = useAnimation();
-  const [hasAnimationMounted, setHasAnimationMounted] = useState(!disableAnimateOnMount);
-  addPreviousPercent(progress);
-  const previousPercent = (_getPreviousPercent = getPreviousPercent()) !== null && _getPreviousPercent !== void 0 ? _getPreviousPercent : 0;
-
-  // the animation uses a pixel translate which is outdated on a window resize, we have to account for this
+  const [targetX, setTargetX] = useState(null);
   const {
     observe,
     width: cWidth,
@@ -54,29 +44,29 @@ const ProgressBarFloatLabel = /*#__PURE__*/memo(_ref => {
     value: labelNum,
     render: renderLabel
   } = getProgressBarLabelParts(label);
-  useIsoEffect(() => {
-    if (textContainerRef.current && containerRef.current && cHeight > 0 && cWidth > 0) {
-      const containerWidth = containerRef.current.offsetWidth;
-      const textContainerWidth = textContainerRef.current.offsetWidth;
-      const startLeftTranslate = isRtl() ? Math.min(containerWidth - textContainerWidth, containerWidth - containerWidth * previousPercent) : Math.max(0, containerWidth * previousPercent - textContainerWidth);
-      const endLeftTranslate = isRtl() ? Math.min(containerWidth - textContainerWidth, containerWidth - containerWidth * progress) : Math.max(0, containerWidth * progress - textContainerWidth);
-      if (!hasAnimationMounted && disableAnimateOnMount) {
-        void animationControls.set({
-          x: endLeftTranslate
-        });
-        setHasAnimationMounted(true);
-      } else {
-        void animationControls.start({
-          x: [startLeftTranslate, endLeftTranslate],
-          transition: convertTransition(animateProgressBaseSpec)
-        });
-      }
-    }
-  }, [progress, cWidth, cHeight, previousPercent, disableAnimateOnMount]);
+  useEffect(() => {
+    var _containerRef$current, _containerRef$current2, _textContainerRef$cur, _textContainerRef$cur2;
+    if (cWidth <= 0 || cHeight <= 0) return;
+    const containerWidth = (_containerRef$current = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.offsetWidth) !== null && _containerRef$current !== void 0 ? _containerRef$current : cWidth;
+    const textContainerWidth = (_textContainerRef$cur = (_textContainerRef$cur2 = textContainerRef.current) === null || _textContainerRef$cur2 === void 0 ? void 0 : _textContainerRef$cur2.offsetWidth) !== null && _textContainerRef$cur !== void 0 ? _textContainerRef$cur : 0;
+    setTargetX(getEndTranslateX(containerWidth, textContainerWidth, progress));
+  }, [progress, cWidth, cHeight]);
   const setupContainerRef = useCallback(ref => {
     containerRef.current = ref;
     observe(ref);
   }, [observe]);
+  const motionProps = useMotionProps({
+    style: motionStyle,
+    animate: {
+      x: targetX !== null && targetX !== void 0 ? targetX : 0,
+      opacity: targetX !== null ? 1 : 0
+    },
+    initial: !progress || disableAnimateOnMount ? false : {
+      x: 0,
+      opacity: 0
+    },
+    transition: animateProgressBaseSpec
+  });
   return /*#__PURE__*/_jsx(Box, {
     ref: setupContainerRef,
     alignItems: "center",
@@ -86,14 +76,14 @@ const ProgressBarFloatLabel = /*#__PURE__*/memo(_ref => {
     style: styles === null || styles === void 0 ? void 0 : styles.labelContainer,
     testID: "cds-progress-label-container",
     width: "100%",
-    children: /*#__PURE__*/_jsx(motion.div, {
+    children: /*#__PURE__*/_jsx(MotionBox, {
       ref: textContainerRef,
-      animate: animationControls,
+      animate: motionProps.animate,
       className: floatingTextContainerCss,
       "data-testid": "cds-progress-bar-float-label",
-      style: _objectSpread(_objectSpread({}, motionStyle), {}, {
-        opacity: hasAnimationMounted ? 1 : 0
-      }),
+      initial: motionProps.initial,
+      style: motionProps.style,
+      transition: motionProps.transition,
       children: /*#__PURE__*/_jsx(ProgressTextLabel, {
         className: classNames === null || classNames === void 0 ? void 0 : classNames.label,
         color: "fgMuted",

package/esm/visualizations/ProgressCircle.css

@@ -1 +1,2 @@
-@layer cds{.svgCss-sq4tjn4{display:block;max-width:100%;}}
+@layer cds{.svgCss-sq4tjn4{display:block;max-width:100%;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
+.indeterminateProgressCircleCss-iqcdca3{-webkit-animation:spin-indeterminateProgressCircleCss-iqcdca3 1000ms linear infinite;animation:spin-indeterminateProgressCircleCss-iqcdca3 1000ms linear infinite;}@-webkit-keyframes spin-indeterminateProgressCircleCss-iqcdca3{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes spin-indeterminateProgressCircleCss-iqcdca3{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}}

package/esm/visualizations/ProgressCircle.js

@@ -5,9 +5,8 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React, { forwardRef, memo, useRef } from 'react';
 import { animateProgressBaseSpec } from '@coinbase/cds-common/animation/progress';
-import { getCircumference, getRadius } from '@coinbase/cds-common/utils/circle';
 import { getProgressCircleParams } from '@coinbase/cds-common/visualizations/getProgressCircleParams';
-import { useProgressSize } from '@coinbase/cds-common/visualizations/useProgressSize';
+import { getProgressSize } from '@coinbase/cds-common/visualizations/getProgressSize';
 import { m as motion } from 'framer-motion';
 import { cx } from '../cx';
 import { Box } from '../layout/Box';
@@ -16,12 +15,13 @@ import { DefaultProgressCircleContent } from './DefaultProgressCircleContent';
 import { VisualizationContainer } from './VisualizationContainer';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const svgCss = "svgCss-sq4tjn4";
+const indeterminateProgressCircleCss = "indeterminateProgressCircleCss-iqcdca3";
 const ProgressCircleInner = /*#__PURE__*/memo(_ref => {
   let {
+    strokeWidth,
     size,
-    progress,
+    progress = 0,
     color,
-    weight,
     visuallyDisabled,
     style,
     className,
@@ -29,10 +29,8 @@ const ProgressCircleInner = /*#__PURE__*/memo(_ref => {
     onAnimationStart,
     disableAnimateOnMount
   } = _ref;
-  const strokeWidth = useProgressSize(weight);
   const circleRef = useRef(null);
-  const circumference = getCircumference(getRadius(size, strokeWidth));
-  const progressOffset = (1 - progress) * circumference;
+  const progressOffset = 1 - progress;
   const motionProps = useMotionProps({
     style: _objectSpread(_objectSpread({}, style), {}, {
       rotate: -90
@@ -42,13 +40,14 @@ const ProgressCircleInner = /*#__PURE__*/memo(_ref => {
     },
     transition: animateProgressBaseSpec,
     initial: {
-      strokeDashoffset: disableAnimateOnMount ? progressOffset : circumference
+      strokeDashoffset: disableAnimateOnMount ? progressOffset : 1
     }
   });
   return /*#__PURE__*/_jsx(motion.circle, _objectSpread(_objectSpread(_objectSpread({
     ref: circleRef,
     "data-testid": "cds-progress-circle-inner",
-    strokeDasharray: circumference,
+    pathLength: 1,
+    strokeDasharray: 1,
     strokeLinecap: "round"
   }, motionProps), getProgressCircleParams({
     size,
@@ -62,16 +61,17 @@ const ProgressCircleInner = /*#__PURE__*/memo(_ref => {
 });
 export const ProgressCircle = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, forwardedRef) => {
   let {
+    indeterminate,
     weight = 'normal',
-    progress,
-    color = 'bgPrimary',
+    progress = indeterminate ? 0.75 : 0,
+    color = indeterminate ? 'fgMuted' : 'bgPrimary',
     disabled,
-    disableAnimateOnMount,
+    disableAnimateOnMount = indeterminate ? true : false,
     testID,
     hideContent,
     hideText,
     size,
-    accessibilityLabel,
+    accessibilityLabel = indeterminate ? 'Loading' : undefined,
     contentNode,
     style,
     styles,
@@ -80,8 +80,8 @@ export const ProgressCircle = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2,
     onAnimationEnd,
     onAnimationStart
   } = _ref2;
-  const strokeWidth = useProgressSize(weight);
   const visSize = size !== null && size !== void 0 ? size : '100%';
+  const strokeWidth = getProgressSize(weight);
   return /*#__PURE__*/_jsx(VisualizationContainer, {
     height: visSize,
     width: visSize,
@@ -91,75 +91,72 @@ export const ProgressCircle = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2,
         height,
         circleSize
       } = _ref3;
-      return /*#__PURE__*/_jsx(Box, {
+      return /*#__PURE__*/_jsxs(Box, _objectSpread(_objectSpread({
         ref: forwardedRef,
         accessibilityLabel: accessibilityLabel,
-        alignItems: "center",
-        "aria-valuemax": 100,
-        "aria-valuemin": 0,
-        "aria-valuenow": Math.round(progress * 100),
+        alignItems: "center"
+      }, indeterminate ? {} : {
+        'aria-valuemax': 100,
+        'aria-valuemin': 0,
+        'aria-valuenow': Math.round(progress * 100)
+      }), {}, {
         className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
         height: height,
         justifyContent: "center",
+        position: "relative",
         role: "progressbar",
         style: _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root),
         testID: testID,
         title: accessibilityLabel,
         width: width,
-        children: /*#__PURE__*/_jsxs(Box, {
-          flexGrow: 0,
-          flexShrink: 0,
+        children: [/*#__PURE__*/_jsxs("svg", {
+          "aria-hidden": true,
+          className: cx(svgCss, classNames === null || classNames === void 0 ? void 0 : classNames.svg, indeterminate && indeterminateProgressCircleCss),
           height: circleSize,
-          position: "relative",
+          style: styles === null || styles === void 0 ? void 0 : styles.svg,
           width: circleSize,
-          children: [/*#__PURE__*/_jsxs("svg", {
-            "aria-hidden": true,
-            className: cx(svgCss, classNames === null || classNames === void 0 ? void 0 : classNames.svg),
-            height: circleSize,
-            style: styles === null || styles === void 0 ? void 0 : styles.svg,
-            width: circleSize,
-            children: [/*#__PURE__*/_jsx("circle", _objectSpread(_objectSpread({}, getProgressCircleParams({
-              size: circleSize,
-              strokeWidth,
-              stroke: 'var(--color-bgLine)'
-            })), {}, {
-              className: classNames === null || classNames === void 0 ? void 0 : classNames.circle,
-              style: styles === null || styles === void 0 ? void 0 : styles.circle
-            })), /*#__PURE__*/_jsx(ProgressCircleInner, {
-              className: classNames === null || classNames === void 0 ? void 0 : classNames.progress,
-              color: color,
-              disableAnimateOnMount: disableAnimateOnMount,
-              onAnimationEnd: onAnimationEnd,
-              onAnimationStart: onAnimationStart,
-              progress: progress,
-              size: circleSize,
-              style: styles === null || styles === void 0 ? void 0 : styles.progress,
-              visuallyDisabled: disabled,
-              weight: weight
-            })]
-          }, circleSize), !hideText && !hideContent && /*#__PURE__*/_jsx(Box, {
+          children: [/*#__PURE__*/_jsx("circle", _objectSpread(_objectSpread({}, getProgressCircleParams({
+            size: circleSize,
+            strokeWidth,
+            stroke: 'var(--color-bgLine)'
+          })), {}, {
+            className: classNames === null || classNames === void 0 ? void 0 : classNames.circle,
+            style: styles === null || styles === void 0 ? void 0 : styles.circle
+          })), /*#__PURE__*/_jsx(ProgressCircleInner, {
+            className: classNames === null || classNames === void 0 ? void 0 : classNames.progress,
+            color: color,
+            disableAnimateOnMount: disableAnimateOnMount,
+            indeterminate: indeterminate,
+            onAnimationEnd: onAnimationEnd,
+            onAnimationStart: onAnimationStart,
+            progress: progress,
+            size: circleSize,
+            strokeWidth: strokeWidth,
+            style: styles === null || styles === void 0 ? void 0 : styles.progress,
+            visuallyDisabled: disabled
+          })]
+        }, circleSize), !hideText && !hideContent && /*#__PURE__*/_jsx(Box, {
+          height: "100%",
+          position: "absolute",
+          style: {
+            padding: strokeWidth
+          },
+          width: "100%",
+          children: /*#__PURE__*/_jsx(Box, {
+            alignItems: "center",
+            borderRadius: 1000,
             height: "100%",
-            position: "absolute",
-            style: {
-              padding: strokeWidth
-            },
+            justifyContent: "center",
+            overflow: "clip",
             width: "100%",
-            children: /*#__PURE__*/_jsx(Box, {
-              alignItems: "center",
-              borderRadius: 1000,
-              height: "100%",
-              justifyContent: "center",
-              overflow: "clip",
-              width: "100%",
-              children: contentNode !== null && contentNode !== void 0 ? contentNode : /*#__PURE__*/_jsx(DefaultProgressCircleContent, {
-                disableAnimateOnMount: disableAnimateOnMount,
-                disabled: disabled,
-                progress: progress
-              })
+            children: contentNode !== null && contentNode !== void 0 ? contentNode : !indeterminate && /*#__PURE__*/_jsx(DefaultProgressCircleContent, {
+              disableAnimateOnMount: disableAnimateOnMount,
+              disabled: disabled,
+              progress: progress
             })
-          })]
-        })
-      });
+          })
+        })]
+      }));
     }
   });
 }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "8.59.0",
+  "version": "8.60.0",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -207,7 +207,7 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.59.0",
+    "@coinbase/cds-common": "^8.60.0",
     "@coinbase/cds-icons": "^5.13.0",
     "@coinbase/cds-illustrations": "^4.36.0",
     "@coinbase/cds-lottie-files": "^3.3.4",