@coinbase/cds-mobile 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

@@ -35,6 +35,10 @@ export type ButtonBaseProps = SharedProps &
     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. */
@@ -96,6 +100,10 @@ export declare const Button: React.MemoExoticComponent<
         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,KAAiE,MAAM,OAAO,CAAC;AACtF,OAAO,EAIL,KAAK,IAAI,EACV,MAAM,cAAc,CAAC;AAGtB,OAAO,KAAK,EACV,aAAa,EACb,QAAQ,EACR,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAMpC,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAGzE,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;CAejB,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,WAAW,GACvC,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GACpD,kBAAkB,GAAG;IACnB;;;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,CAAC;AAEJ,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC;AAE1C,eAAO,MAAM,MAAM;;;;;;;;;IA/Cf;;;OAGG;cACO,aAAa;IACvB,mCAAmC;eACxB,OAAO;IAClB,wDAAwD;cAC9C,OAAO;IACjB,2EAA2E;kBAC7D,OAAO;IACrB,0DAA0D;YAClD,OAAO;IACf,yDAAyD;cAC/C,OAAO;IACjB,4CAA4C;cAClC,KAAK,CAAC,SAAS;IACzB,yBAAyB;YACjB,KAAK,CAAC,SAAS;IACvB,iDAAiD;gBACrC,QAAQ;IACpB,uCAAuC;sBACrB,OAAO;IACzB,uBAAuB;UACjB,KAAK,CAAC,SAAS;IACrB,+CAA+C;cACrC,QAAQ;IAClB,qCAAqC;oBACrB,OAAO;IACvB;;;OAGG;YACK,OAAO,GAAG,KAAK;IACvB,kDAAkD;WAC3C,MAAM;IACb,oCAAoC;qBACnB,OAAO;IACxB;;;OAGG;oBACa,MAAM;+BAgKzB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/buttons/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiE,MAAM,OAAO,CAAC;AACtF,OAAO,EAIL,KAAK,IAAI,EACV,MAAM,cAAc,CAAC;AAGtB,OAAO,KAAK,EACV,aAAa,EACb,QAAQ,EACR,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAMpC,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAMzE,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;CAejB,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,WAAW,GACvC,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GACpD,kBAAkB,GAAG;IACnB;;;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,CAAC;AAEJ,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC;AAE1C,eAAO,MAAM,MAAM;;;;;;;;;IAnDf;;;OAGG;cACO,aAAa;IACvB,mCAAmC;eACxB,OAAO;IAClB,wDAAwD;cAC9C,OAAO;IACjB;;OAEG;yBACkB,MAAM;IAC3B,2EAA2E;kBAC7D,OAAO;IACrB,0DAA0D;YAClD,OAAO;IACf,yDAAyD;cAC/C,OAAO;IACjB,4CAA4C;cAClC,KAAK,CAAC,SAAS;IACzB,yBAAyB;YACjB,KAAK,CAAC,SAAS;IACvB,iDAAiD;gBACrC,QAAQ;IACpB,uCAAuC;sBACrB,OAAO;IACzB,uBAAuB;UACjB,KAAK,CAAC,SAAS;IACrB,+CAA+C;cACrC,QAAQ;IAClB,qCAAqC;oBACrB,OAAO;IACvB;;;OAGG;YACK,OAAO,GAAG,KAAK;IACvB,kDAAkD;WAC3C,MAAM;IACb,oCAAoC;qBACnB,OAAO;IACxB;;;OAGG;oBACa,MAAM;+BAsKzB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"DefaultSlideButtonHandle.d.ts","sourceRoot":"","sources":["../../src/buttons/DefaultSlideButtonHandle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAiBzC,OAAO,KAAK,EAAE,oBAAoB,EAA0B,MAAM,eAAe,CAAC;AAElF,eAAO,MAAM,eAAe;;;CAAgE,CAAC;AAE7F,MAAM,MAAM,6BAA6B,GAAG,IAAI,CAAC,oBAAoB,EAAE,SAAS,GAAG,SAAS,CAAC,GAAG;IAC9F,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iCAAiC,GAAG,CAC9C,KAAK,EAAE,6BAA6B,KACjC,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAE/B,MAAM,MAAM,+BAA+B,GAAG,IAAI,CAAC,oBAAoB,EAAE,SAAS,GAAG,SAAS,CAAC,GAAG;IAChG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,mCAAmC,GAAG,CAChD,KAAK,EAAE,+BAA+B,KACnC,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAE/B,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;CAgBjB,CAAC;AAEH,eAAO,MAAM,wBAAwB,sDACT,6BAA6B,6CAmBxD,CAAC;AAEF,eAAO,MAAM,0BAA0B,iDAChB,+BAA+B,6CAgBrD,CAAC;AAEF,eAAO,MAAM,wBAAwB;;;;;;;;;;;+BAuFpC,CAAC"}
+{"version":3,"file":"DefaultSlideButtonHandle.d.ts","sourceRoot":"","sources":["../../src/buttons/DefaultSlideButtonHandle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAgBzC,OAAO,KAAK,EAAE,oBAAoB,EAA0B,MAAM,eAAe,CAAC;AAElF,eAAO,MAAM,eAAe;;;CAAgE,CAAC;AAI7F,MAAM,MAAM,6BAA6B,GAAG,IAAI,CAAC,oBAAoB,EAAE,SAAS,GAAG,SAAS,CAAC,GAAG;IAC9F,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iCAAiC,GAAG,CAC9C,KAAK,EAAE,6BAA6B,KACjC,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAE/B,MAAM,MAAM,+BAA+B,GAAG,IAAI,CAAC,oBAAoB,EAAE,SAAS,GAAG,SAAS,CAAC,GAAG;IAChG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,mCAAmC,GAAG,CAChD,KAAK,EAAE,+BAA+B,KACnC,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAE/B,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;CAgBjB,CAAC;AAEH,eAAO,MAAM,wBAAwB,sDACT,6BAA6B,6CAyBxD,CAAC;AAEF,eAAO,MAAM,0BAA0B,iDAChB,+BAA+B,6CAgBrD,CAAC;AAEF,eAAO,MAAM,wBAAwB;;;;;;;;;;;+BAuFpC,CAAC"}

package/dts/buttons/IconButton.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { type View } from 'react-native';
 import type {
   IconButtonVariant,
@@ -7,10 +6,13 @@ import type {
   SharedProps,
 } from '@coinbase/cds-common/types';
 import { type PressableBaseProps } from '../system/Pressable';
-import type { ButtonBaseProps } from './Button';
+import { type ButtonBaseProps } from './Button';
 export type IconButtonBaseProps = SharedProps &
   Omit<PressableBaseProps, 'children'> &
-  Pick<ButtonBaseProps, 'disabled' | 'transparent' | 'compact' | 'flush' | 'loading'> & {
+  Pick<
+    ButtonBaseProps,
+    'disabled' | 'transparent' | 'compact' | 'flush' | 'loading' | 'progressCircleSize'
+  > & {
     /** Name of the icon, as defined in Figma. */
     name: IconName;
     /**
@@ -27,11 +29,14 @@ export type IconButtonBaseProps = SharedProps &
     variant?: IconButtonVariant;
   };
 export type IconButtonProps = IconButtonBaseProps;
-export declare const IconButton: React.MemoExoticComponent<
-  React.ForwardRefExoticComponent<
+export declare const IconButton: import('react').MemoExoticComponent<
+  import('react').ForwardRefExoticComponent<
     SharedProps &
       Omit<PressableBaseProps, 'children'> &
-      Pick<ButtonBaseProps, 'transparent' | 'disabled' | 'loading' | 'compact' | 'flush'> & {
+      Pick<
+        ButtonBaseProps,
+        'transparent' | 'disabled' | 'loading' | 'progressCircleSize' | 'compact' | 'flush'
+      > & {
         /** Name of the icon, as defined in Figma. */
         name: IconName;
         /**
@@ -46,7 +51,7 @@ export declare const IconButton: React.MemoExoticComponent<
          * @default primary
          */
         variant?: IconButtonVariant;
-      } & React.RefAttributes<View>
+      } & import('react').RefAttributes<View>
   >
 >;
 //# sourceMappingURL=IconButton.d.ts.map

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,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,EAGL,KAAK,IAAI,EAEV,MAAM,cAAc,CAAC;AAGtB,OAAO,KAAK,EACV,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAKpC,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAEzE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEhD,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAC3C,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,GACpC,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC,GAAG;IACpF,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,CAAC;AAEJ,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC;AAElD,eAAO,MAAM,UAAU;IAlBnB,6CAA6C;UACvC,QAAQ;IACd;;;OAGG;eACQ,QAAQ;IACnB,iCAAiC;aACxB,OAAO;IAChB;;;OAGG;cACO,iBAAiB;+BAkG9B,CAAC"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/buttons/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAmC,KAAK,IAAI,EAAkB,MAAM,cAAc,CAAC;AAG1F,OAAO,KAAK,EACV,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAMpC,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAGzE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAEhD,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAC3C,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,GACpC,IAAI,CACF,eAAe,EACf,UAAU,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,oBAAoB,CACpF,GAAG;IACF,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,CAAC;AAEJ,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC;AAElD,eAAO,MAAM,UAAU;IAlBnB,6CAA6C;UACvC,QAAQ;IACd;;;OAGG;eACQ,QAAQ;IACnB,iCAAiC;aACxB,OAAO;IAChB;;;OAGG;cACO,iBAAiB;yCAsG9B,CAAC"}

package/dts/controls/InputIconButton.d.ts

@@ -16,7 +16,7 @@ export declare const InputIconButton: React.MemoExoticComponent<
       Omit<import('../system').PressableBaseProps, 'children'> &
       Pick<
         import('../buttons').ButtonBaseProps,
-        'transparent' | 'disabled' | 'loading' | 'compact' | 'flush'
+        'transparent' | 'disabled' | 'loading' | 'progressCircleSize' | 'compact' | 'flush'
       > & {
         name: import('@coinbase/cds-common').IconName;
         iconSize?: import('@coinbase/cds-common').IconSize;

package/dts/loaders/Spinner.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
 import type { ActivityIndicatorProps } from 'react-native';
+/**
+ * @deprecated Use indeterminate ProgressCircle or ActivityIndicator component instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export declare const Spinner: React.NamedExoticComponent<ActivityIndicatorProps>;
 //# sourceMappingURL=Spinner.d.ts.map

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,KAAe,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAI3D,eAAO,MAAM,OAAO,oDAoBlB,CAAC"}
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/loaders/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAI3D;;;GAGG;AACH,eAAO,MAAM,OAAO,oDAoBlB,CAAC"}

package/dts/visualizations/ProgressBar.d.ts

@@ -7,7 +7,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
      * */
@@ -46,7 +46,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,KAA8E,MAAM,OAAO,CAAC;AACnG,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,IAAI,EACT,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,KAAK,EAAE,wBAAwB,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAMhG,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAE3D,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,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,yEAAyE;IACzE,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,4BAA4B;QAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACjC,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,WAAW;IApCpB,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,SAAS,CAAC,SAAS,CAAC;IAC5B,yEAAyE;aAChE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,4BAA4B;QAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACjC;+BAiHF,CAAC"}
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8E,MAAM,OAAO,CAAC;AACnG,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,IAAI,EACT,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,wBAAwB,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAMhG,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAE3D,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,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,yEAAyE;IACzE,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,4BAA4B;QAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACjC,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,WAAW;IApCpB,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,SAAS,CAAC,SAAS,CAAC;IAC5B,yEAAyE;aAChE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,4BAA4B;QAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACjC;+BAiHF,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,KAA0D,MAAM,OAAO,CAAC;AAC/E,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAGtB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAM5D,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,EAC9B,OAAO,GAAG,UAAU,GAAG,uBAAuB,GAAG,UAAU,GAAG,gBAAgB,GAAG,QAAQ,CAC1F,CAAC;AA2GF,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,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,uFAAuF;IACvF,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,8BAA8B;QAC9B,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACtC,oBAAoB;QACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC9B,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAC9C,KAAK,CAAC,iBAAiB,CAAC,8BAA8B,CAAC,CAkCxD,CAAC"}
+{"version":3,"file":"ProgressBarWithFloatLabel.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressBarWithFloatLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AACvF,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAM5D,OAAO,EAA4B,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC7F,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAQvD,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAC3C,8BAA8B,EAC9B,OAAO,GAAG,UAAU,GAAG,uBAAuB,GAAG,UAAU,GAAG,gBAAgB,GAAG,QAAQ,CAC1F,CAAC;AAuFF,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,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,uFAAuF;IACvF,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,8BAA8B;QAC9B,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACtC,oBAAoB;QACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC9B,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAC9C,KAAK,CAAC,iBAAiB,CAAC,8BAA8B,CAAC,CAkCxD,CAAC"}

package/dts/visualizations/ProgressCircle.d.ts

@@ -26,6 +26,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?: StyleProp<ViewStyle>;
@@ -61,7 +65,7 @@ export declare const ProgressCircle: React.MemoExoticComponent<
     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;
@@ -89,6 +93,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?: StyleProp<ViewStyle>;
         /** Custom styles for individual elements of the ProgressCircle component */

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,KAAuD,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAY,KAAK,SAAS,EAAE,KAAK,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACnF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AASnE,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,WAAW,CAAC;AAG/C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AASvD,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,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,4EAA4E;IAC5E,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,4BAA4B;QAC5B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACpC,kBAAkB;QAClB,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC3B,6BAA6B;QAC7B,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACrC,yCAAyC;QACzC,QAAQ,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;QAChC,gCAAgC;QAChC,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;KAC/B,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAC3C,uBAAuB,EACvB,UAAU,GAAG,uBAAuB,GAAG,UAAU,CAClD,GACC,QAAQ,GAAG;IACT;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CACzB,CAAC;AAoEJ,eAAO,MAAM,cAAc;;;;;;;;IAxHzB;;OAEG;kBACW,OAAO;IACrB;;;;OAIG;eACQ,OAAO;IAClB;;;;;OAKG;WACI,MAAM;IACb;;OAEG;kBACW,KAAK,CAAC,SAAS;;YAIrB,SAAS,CAAC,SAAS,CAAC;IAC5B,4EAA4E;aACnE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,4BAA4B;QAC5B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACpC,kBAAkB;QAClB,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC3B,6BAA6B;QAC7B,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACrC,yCAAyC;QACzC,QAAQ,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;QAChC,gCAAgC;QAChC,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;KAC/B;+BAyMF,CAAC"}
+{"version":3,"file":"ProgressCircle.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressCircle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAY,KAAK,SAAS,EAAc,KAAK,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAC/F,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AASnE,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,WAAW,CAAC;AAG/C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAUvD,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,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,4EAA4E;IAC5E,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,4BAA4B;QAC5B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACpC,kBAAkB;QAClB,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC3B,6BAA6B;QAC7B,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACrC,yCAAyC;QACzC,QAAQ,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;QAChC,gCAAgC;QAChC,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;KAC/B,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAC3C,uBAAuB,EACvB,UAAU,GAAG,uBAAuB,GAAG,UAAU,CAClD,GACC,QAAQ,GAAG;IACT;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CACzB,CAAC;AAoEJ,eAAO,MAAM,cAAc;;;;;;;;IA5HzB;;OAEG;kBACW,OAAO;IACrB;;;;OAIG;eACQ,OAAO;IAClB;;;;;OAKG;WACI,MAAM;IACb;;OAEG;kBACW,KAAK,CAAC,SAAS;IAC7B;;OAEG;oBACa,OAAO;;YAIf,SAAS,CAAC,SAAS,CAAC;IAC5B,4EAA4E;aACnE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,4BAA4B;QAC5B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACpC,kBAAkB;QAClB,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC3B,6BAA6B;QAC7B,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACrC,yCAAyC;QACzC,QAAQ,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;QAChC,gCAAgC;QAChC,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;KAC/B;+BA2OF,CAAC"}

package/esm/alpha/select/__stories__/AlphaSelect.stories.js

@@ -5,9 +5,9 @@ import { Example, ExampleScreen } from '../../../examples/ExampleScreen';
 import { Icon } from '../../../icons';
 import { HStack } from '../../../layout/HStack';
 import { VStack } from '../../../layout/VStack';
-import { Spinner } from '../../../loaders';
 import { Pressable } from '../../../system';
 import { Text } from '../../../typography/Text';
+import { ProgressCircle } from '../../../visualizations/ProgressCircle';
 import { Select } from '../Select';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const exampleOptions = [{
@@ -680,14 +680,16 @@ const MixedDefaultAndCustomComponentOptions = () => {
     } = _ref;
     return /*#__PURE__*/_jsxs(HStack, {
       justifyContent: "center",
-      children: [/*#__PURE__*/_jsx(Spinner, {
-        size: 4
+      children: [/*#__PURE__*/_jsx(ProgressCircle, {
+        indeterminate: true,
+        size: 20
       }), /*#__PURE__*/_jsx(Button, {
         transparent: true,
         onPress: () => onPress == null ? void 0 : onPress(value),
         children: value != null ? value : 'Empty value'
-      }), /*#__PURE__*/_jsx(Spinner, {
-        size: 4
+      }), /*#__PURE__*/_jsx(ProgressCircle, {
+        indeterminate: true,
+        size: 20
       })]
     });
   };
@@ -748,16 +750,18 @@ const CustomOptionComponent = () => {
     } = _ref3;
     return /*#__PURE__*/_jsxs(HStack, {
       justifyContent: "center",
-      children: [/*#__PURE__*/_jsx(Spinner, {
-        size: 4
+      children: [/*#__PURE__*/_jsx(ProgressCircle, {
+        indeterminate: true,
+        size: 20
       }), /*#__PURE__*/_jsx(Button, {
         transparent: true,
         onPress: () => onPress == null ? void 0 : onPress(value),
         children: /*#__PURE__*/_jsx(Text, {
           children: value != null ? value : 'Empty value'
         })
-      }), /*#__PURE__*/_jsx(Spinner, {
-        size: 4
+      }), /*#__PURE__*/_jsx(ProgressCircle, {
+        indeterminate: true,
+        size: 20
       })]
     });
   };

package/esm/buttons/Button.js

@@ -1,8 +1,8 @@
-const _excluded = ["variant", "loading", "transparent", "block", "compact", "children", "start", "startIcon", "startIconActive", "end", "endIcon", "endIconActive", "flush", "noScaleOnPress", "numberOfLines", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "background", "color", "style", "wrapperStyles", "feedback", "borderColor", "borderWidth", "borderRadius", "accessibilityLabel", "accessibilityHint"];
+const _excluded = ["variant", "loading", "progressCircleSize", "transparent", "block", "compact", "children", "start", "startIcon", "startIconActive", "end", "endIcon", "endIconActive", "flush", "noScaleOnPress", "numberOfLines", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "background", "color", "style", "wrapperStyles", "feedback", "borderColor", "borderWidth", "borderRadius", "accessibilityLabel", "accessibilityHint"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 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, isValidElement, memo, useCallback, useMemo } from 'react';
-import { ActivityIndicator, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
 import { transparentVariants, variants } from '@coinbase/cds-common/tokens/button';
 import { interactableHeight } from '@coinbase/cds-common/tokens/interactableHeight';
 import { getButtonSpacingProps } from '@coinbase/cds-common/utils/getButtonSpacingProps';
@@ -11,7 +11,9 @@ import { Icon } from '../icons/Icon';
 import { HStack } from '../layout/HStack';
 import { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';
+import { ProgressCircle } from '../visualizations/ProgressCircle';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const defaultProgressCircleSize = 24;
 export const styles = StyleSheet.create({
   inline: {
     width: 'auto',
@@ -32,6 +34,7 @@ export const Button = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Button(
   let {
       variant = 'primary',
       loading,
+      progressCircleSize = defaultProgressCircleSize,
       transparent,
       block,
       compact,
@@ -123,9 +126,11 @@ export const Button = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Button(
       paddingX: paddingX,
       paddingY: paddingY,
       style: sizingStyle,
-      children: loading ? /*#__PURE__*/_jsx(ActivityIndicator, {
-        color: theme.color[colorValue],
-        size: "small"
+      children: loading ? /*#__PURE__*/_jsx(ProgressCircle, {
+        indeterminate: true,
+        color: colorValue,
+        size: progressCircleSize,
+        weight: "thin"
       }) : /*#__PURE__*/_jsxs(_Fragment, {
         children: [start != null ? start : startIcon ? /*#__PURE__*/_jsx(Icon, {
           active: startIconActive,

package/esm/buttons/DefaultSlideButtonHandle.js

@@ -5,17 +5,17 @@ import React, { forwardRef, memo, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import { variants } from '@coinbase/cds-common/tokens/button';
 import { animated, useChain, useSpring, useSpringRef } from '@react-spring/native';
-import { useTheme } from '../hooks/useTheme';
 import { Icon } from '../icons/Icon';
 import { Box } from '../layout/Box';
-import { Spinner } from '../loaders/Spinner';
 import { Pressable } from '../system/Pressable';
 import { TextHeadline } from '../typography/TextHeadline';
+import { ProgressCircle } from '../visualizations/ProgressCircle';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const animationConfig = {
   tension: 300,
   clamp: true
 };
+const progressCircleSize = 24;
 export const styles = StyleSheet.create({
   base: {
     width: '100%',
@@ -39,7 +39,6 @@ export const SlideButtonHandleChecked = /*#__PURE__*/memo(_ref => {
     end,
     compact
   } = _ref;
-  const theme = useTheme();
   const handleWidth = compact ? 40 : 56;
   return /*#__PURE__*/_jsxs(Box, {
     alignItems: "center",
@@ -55,9 +54,11 @@ export const SlideButtonHandleChecked = /*#__PURE__*/memo(_ref => {
       justifyContent: "center",
       pin: "right",
       width: handleWidth,
-      children: end != null ? end : /*#__PURE__*/_jsx(Spinner, {
-        color: theme.color.fgInverse,
-        size: "small"
+      children: end != null ? end : /*#__PURE__*/_jsx(ProgressCircle, {
+        indeterminate: true,
+        color: "fgInverse",
+        size: progressCircleSize,
+        weight: "thin"
       })
     })]
   });

package/esm/buttons/IconButton.js

@@ -1,14 +1,15 @@
-const _excluded = ["name", "active", "variant", "transparent", "compact", "background", "color", "borderColor", "iconSize", "borderWidth", "borderRadius", "feedback", "flush", "loading", "style", "accessibilityHint", "accessibilityLabel"];
+const _excluded = ["name", "active", "variant", "transparent", "compact", "background", "color", "borderColor", "iconSize", "borderWidth", "borderRadius", "feedback", "flush", "loading", "progressCircleSize", "style", "accessibilityHint", "accessibilityLabel"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 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, useCallback, useMemo } from 'react';
-import { ActivityIndicator } from 'react-native';
+import { forwardRef, memo, useCallback, useMemo } from 'react';
 import { transparentVariants, variants } from '@coinbase/cds-common/tokens/button';
 import { interactableHeight } from '@coinbase/cds-common/tokens/interactableHeight';
 import { getButtonSpacingProps } from '@coinbase/cds-common/utils/getButtonSpacingProps';
 import { useTheme } from '../hooks/useTheme';
 import { Icon } from '../icons/Icon';
+import { Box } from '../layout/Box';
 import { Pressable } from '../system/Pressable';
+import { ProgressCircle } from '../visualizations/ProgressCircle';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function IconButton(_ref, ref) {
   let {
@@ -26,12 +27,14 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Ico
       feedback = compact ? 'light' : 'normal',
       flush,
       loading,
+      progressCircleSize,
       style,
       accessibilityHint,
       accessibilityLabel
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
+  const iconSizeValue = theme.iconSize[iconSize];
   const variantMap = transparent ? transparentVariants : variants;
   const variantStyle = variantMap[variant];
   const colorValue = color != null ? color : variantStyle.color;
@@ -68,11 +71,18 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Ico
     style: pressableStyle,
     transparentWhileInactive: transparent
   }, props, {
-    children: loading ? /*#__PURE__*/_jsx(ActivityIndicator, {
-      color: theme.color[colorValue],
-      size: "small",
-      style: sizingStyle,
-      testID: props.testID ? props.testID + "-activity-indicator" : undefined
+    children: loading ? /*#__PURE__*/_jsx(Box, {
+      alignItems: "center",
+      height: minHeight,
+      justifyContent: "center",
+      width: minHeight,
+      children: /*#__PURE__*/_jsx(ProgressCircle, {
+        indeterminate: true,
+        color: colorValue,
+        size: progressCircleSize != null ? progressCircleSize : iconSizeValue,
+        testID: props.testID ? props.testID + "-progress-circle" : undefined,
+        weight: "thin"
+      })
     }) :
     /*#__PURE__*/
     /* TO DO: test using currentColor like web does on Icon here */

package/esm/buttons/__stories__/Button.stories.js

@@ -44,6 +44,34 @@ const buttonStories = [{
 }, {
   loading: true,
   compact: true
+}, {
+  loading: true,
+  transparent: true
+}, {
+  loading: true,
+  transparent: true,
+  compact: true
+}, {
+  loading: true,
+  variant: 'secondary'
+}, {
+  loading: true,
+  variant: 'secondary',
+  compact: true
+}, {
+  loading: true,
+  variant: 'positive'
+}, {
+  loading: true,
+  variant: 'positive',
+  compact: true
+}, {
+  loading: true,
+  variant: 'negative'
+}, {
+  loading: true,
+  variant: 'negative',
+  compact: true
 }, {
   startIcon: 'backArrow'
 }, {

package/esm/buttons/__stories__/IconButton.stories.js

@@ -2,7 +2,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React from 'react';
 import { names } from '@coinbase/cds-icons/names';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
-import { HStack } from '../../layout';
+import { HStack, VStack } from '../../layout';
 import { Box } from '../../layout/Box';
 import { Text } from '../../typography/Text';
 import { IconButton } from '../IconButton';
@@ -123,6 +123,20 @@ const IconButtonScreen = () => {
           font: "body",
           children: "Disabled secondary"
         })]
+      }), /*#__PURE__*/_jsxs(Box, {
+        alignItems: "center",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        width: 350,
+        children: [/*#__PURE__*/_jsx(IconButton, {
+          loading: true,
+          accessibilityLabel: accessibilityLabel,
+          name: iconName,
+          variant: "primary"
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "body",
+          children: "Loading primary"
+        })]
       })]
     }), /*#__PURE__*/_jsx(Example, {
       inline: true,
@@ -168,6 +182,107 @@ const IconButtonScreen = () => {
           })]
         })
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "Loading",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 3,
+        children: [/*#__PURE__*/_jsxs(Box, {
+          children: [/*#__PURE__*/_jsx(Text, {
+            font: "label2",
+            style: {
+              marginBottom: 8
+            },
+            children: "Loading by variant"
+          }), /*#__PURE__*/_jsxs(HStack, {
+            flexWrap: "wrap",
+            gap: 2,
+            children: [/*#__PURE__*/_jsx(IconButton, {
+              loading: true,
+              accessibilityLabel: "Loading",
+              name: iconName,
+              variant: "primary"
+            }), /*#__PURE__*/_jsx(IconButton, {
+              loading: true,
+              accessibilityLabel: "Loading",
+              name: iconName,
+              variant: "secondary"
+            }), /*#__PURE__*/_jsx(IconButton, {
+              loading: true,
+              accessibilityLabel: "Loading",
+              name: iconName,
+              variant: "foregroundMuted"
+            }), /*#__PURE__*/_jsx(IconButton, {
+              loading: true,
+              transparent: true,
+              accessibilityLabel: "Loading",
+              name: iconName,
+              variant: "primary"
+            }), /*#__PURE__*/_jsx(IconButton, {
+              loading: true,
+              transparent: true,
+              accessibilityLabel: "Loading",
+              name: iconName,
+              variant: "secondary"
+            })]
+          })]
+        }), /*#__PURE__*/_jsxs(Box, {
+          children: [/*#__PURE__*/_jsx(Text, {
+            font: "label2",
+            style: {
+              marginBottom: 8
+            },
+            children: "Loading by icon size"
+          }), /*#__PURE__*/_jsxs(HStack, {
+            alignItems: "center",
+            gap: 2,
+            children: [/*#__PURE__*/_jsx(IconButton, {
+              loading: true,
+              accessibilityLabel: "Loading",
+              iconSize: "xs",
+              name: iconName
+            }), /*#__PURE__*/_jsx(IconButton, {
+              loading: true,
+              accessibilityLabel: "Loading",
+              iconSize: "s",
+              name: iconName
+            }), /*#__PURE__*/_jsx(IconButton, {
+              loading: true,
+              accessibilityLabel: "Loading",
+              iconSize: "m",
+              name: iconName
+            }), /*#__PURE__*/_jsx(IconButton, {
+              loading: true,
+              accessibilityLabel: "Loading",
+              compact: false,
+              iconSize: "l",
+              name: iconName
+            })]
+          })]
+        }), /*#__PURE__*/_jsxs(Box, {
+          children: [/*#__PURE__*/_jsx(Text, {
+            font: "label2",
+            style: {
+              marginBottom: 8
+            },
+            children: "Loading compact vs regular"
+          }), /*#__PURE__*/_jsxs(HStack, {
+            alignItems: "center",
+            gap: 2,
+            children: [/*#__PURE__*/_jsx(IconButton, {
+              compact: true,
+              loading: true,
+              accessibilityLabel: "Loading",
+              name: iconName
+            }), /*#__PURE__*/_jsx(IconButton, {
+              loading: true,
+              accessibilityLabel: "Loading",
+              compact: false,
+              name: iconName
+            })]
+          })]
+        })]
+      })
     }), /*#__PURE__*/_jsx(Example, {
       title: "All",
       children: names.map(name => {

package/esm/loaders/Spinner.js

@@ -4,6 +4,11 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { memo } from 'react';
 import { ActivityIndicator } from 'react-native';
 import { useTheme } from '../hooks/useTheme';
+
+/**
+ * @deprecated Use indeterminate ProgressCircle or ActivityIndicator component instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Spinner = /*#__PURE__*/memo(function Spinner(_ref) {
   let {

package/esm/overlays/__stories__/AlertBasic.stories.js

@@ -4,14 +4,14 @@ import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { Alert } from '../Alert';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const BasicAlert = () => {
-  const [visible, setVisible] = useState(true);
+  const [visible, setVisible] = useState(false);
   const handleShow = useCallback(() => setVisible(true), []);
   const handleClose = useCallback(() => setVisible(false), []);
   const handleAction = useCallback(() => console.log('pressed'), []);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Button, {
       onPress: handleShow,
-      children: "Show Alert"
+      children: "Open"
     }), /*#__PURE__*/_jsx(Alert, {
       body: "Alert body type that can run over multiple lines, but should be kept short.",
       dismissActionLabel: "Cancel",

package/esm/overlays/__stories__/AlertLongTitle.stories.js

@@ -4,14 +4,14 @@ import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { Alert } from '../Alert';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const LongTitleAlert = () => {
-  const [visible, setVisible] = useState(true);
+  const [visible, setVisible] = useState(false);
   const handleShow = useCallback(() => setVisible(true), []);
   const handleClose = useCallback(() => setVisible(false), []);
   const handleAction = useCallback(() => console.log('pressed'), []);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Button, {
       onPress: handleShow,
-      children: "Show Alert"
+      children: "Open"
     }), /*#__PURE__*/_jsx(Alert, {
       body: "Alert body type that can run over multiple lines, but should be kept short.",
       dismissActionLabel: "Cancel",