@coinbase/cds-mobile 8.34.2 → 8.35.1

package/CHANGELOG.md

@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.35.1 (1/5/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix disableAnimateOnMount for progress components. [[#284](https://github.com/coinbase/cds/pull/284)]
+
+## 8.35.0 (1/5/2026 PST)
+
+#### 🚀 Updates
+
+- Add border props to RemoteImageGroup.
+
 ## 8.34.2 ((1/2/2026, 09:41 AM PST))
 
 This is an artificial version bump with no new change.

package/dts/media/RemoteImageGroup.d.ts

@@ -6,8 +6,10 @@ import type {
   SharedAccessibilityProps,
   SharedProps,
 } from '@coinbase/cds-common/types';
+import { type BoxProps } from '../layout/Box';
 export type RemoteImageGroupBaseProps = SharedProps &
-  SharedAccessibilityProps & {
+  SharedAccessibilityProps &
+  Pick<BoxProps, 'borderWidth' | 'borderColor'> & {
     /**
      * Indicates the number of remote image before it collapses
      * @default 4
@@ -33,6 +35,8 @@ export declare const RemoteImageGroup: ({
   max,
   shape,
   testID,
+  borderWidth,
+  borderColor,
   ...props
 }: RemoteImageGroupProps) => import('react/jsx-runtime').JSX.Element;
 export declare const shapeStyles: Record<Shape, ViewStyle>;

package/dts/media/RemoteImageGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RemoteImageGroup.d.ts","sourceRoot":"","sources":["../../src/media/RemoteImageGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAEjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EACV,UAAU,EAEV,KAAK,EACL,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAOpC,MAAM,MAAM,yBAAyB,GAAG,WAAW,GACjD,wBAAwB,GAAG;IACzB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC3B;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,uBAAuB;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEJ,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,CAAC;AAE9D,eAAO,MAAM,gBAAgB,GAAI,kDAO9B,qBAAqB,4CAqFvB,CAAC;AAQF,eAAO,MAAM,WAAW,0BAgBtB,CAAC"}
+{"version":3,"file":"RemoteImageGroup.d.ts","sourceRoot":"","sources":["../../src/media/RemoteImageGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAEjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EACV,UAAU,EAEV,KAAK,EACL,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAGpC,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAInD,MAAM,MAAM,yBAAyB,GAAG,WAAW,GACjD,wBAAwB,GACxB,IAAI,CAAC,QAAQ,EAAE,aAAa,GAAG,aAAa,CAAC,GAAG;IAC9C;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC3B;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,uBAAuB;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEJ,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,CAAC;AAE9D,eAAO,MAAM,gBAAgB,GAAI,4EAS9B,qBAAqB,4CAiGvB,CAAC;AAQF,eAAO,MAAM,WAAW,0BAgBtB,CAAC"}

package/dts/visualizations/DefaultProgressCircleContent.d.ts

@@ -2,6 +2,7 @@ import type { ProgressCircleContentProps } from './ProgressCircle';
 export declare const DefaultProgressCircleContent: import('react').MemoExoticComponent<
   ({
     progress,
+    disableAnimateOnMount,
     disabled,
     color,
   }: ProgressCircleContentProps) => import('react/jsx-runtime').JSX.Element

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

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

package/dts/visualizations/ProgressBar.d.ts

@@ -14,7 +14,6 @@ export type ProgressBaseProps = SharedProps &
     weight?: Weight;
     /**
      * Toggle used to show a disabled progress visualization
-     * @default false
      */
     disabled?: boolean;
     /**
@@ -63,7 +62,6 @@ export declare const ProgressBar: React.MemoExoticComponent<
         weight?: Weight;
         /**
          * Toggle used to show a disabled progress visualization
-         * @default false
          */
         disabled?: boolean;
         /**

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;;;OAGG;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;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B;;WAEG;QACH,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACjC,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,WAAW;IA9CpB,8DAA8D;cACpD,MAAM;IAChB;;SAEK;aACI,MAAM;IACf;;;OAGG;eACQ,OAAO;IAClB;;;OAGG;YACK,SAAS,CAAC,KAAK;IACvB;;OAEG;qBACc,MAAM,IAAI;IAC3B;;OAEG;uBACgB,MAAM,IAAI;;IAI/B;;OAEG;YACK,SAAS,CAAC,SAAS,CAAC;IAC5B;;OAEG;aACM;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B;;WAEG;QACH,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACjC;+BAwHF,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;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;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B;;WAEG;QACH,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACjC,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,WAAW;IA7CpB,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;;IAI/B;;OAEG;YACK,SAAS,CAAC,SAAS,CAAC;IAC5B;;OAEG;aACM;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B;;WAEG;QACH,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACjC;+BAwHF,CAAC"}

package/dts/visualizations/ProgressBarWithFixedLabels.d.ts

@@ -2,8 +2,11 @@ import React from 'react';
 import { type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
 import type { PaddingProps, Placement } from '@coinbase/cds-common/types';
 import { type ProgressBarLabel } from './getProgressBarLabelParts';
-import { type ProgressBaseProps } from './ProgressBar';
-export type ProgressBarWithFixedLabelsProps = Pick<ProgressBaseProps, 'disabled' | 'testID'> & {
+import { type ProgressBarProps } from './ProgressBar';
+export type ProgressBarWithFixedLabelsProps = Pick<
+  ProgressBarProps,
+  'disableAnimateOnMount' | 'disabled' | 'testID'
+> & {
   /** Label that is pinned to the start of the container. If a number is used then it will format it as a percentage. */
   startLabel?: ProgressBarLabel;
   /** Label that is pinned to the end of the container. If a number is used then it will format it as a percentage. */
@@ -39,10 +42,12 @@ export type ProgressBarWithFixedLabelsProps = Pick<ProgressBaseProps, 'disabled'
     endLabel?: StyleProp<TextStyle>;
   };
 };
-export type ProgressBarFixedLabelBesideProps = {
+export type ProgressBarFixedLabelBesideProps = Pick<
+  ProgressBarProps,
+  'disableAnimateOnMount' | 'style'
+> & {
   label: ProgressBarLabel;
   visuallyDisabled: boolean;
-  style?: StyleProp<ViewStyle>;
 };
 export type ProgressBarFixedLabelContainerProps = Omit<
   ProgressBarWithFixedLabelsProps,
@@ -51,11 +56,13 @@ export type ProgressBarFixedLabelContainerProps = Omit<
   Pick<PaddingProps, 'paddingBottom' | 'paddingTop'> & {
     visuallyDisabled: boolean;
   };
-export type ProgressBarFixedLabelProps = {
+export type ProgressBarFixedLabelProps = Pick<
+  ProgressBarProps,
+  'disableAnimateOnMount' | 'style'
+> & {
   position: 'start' | 'end';
   label: ProgressBarLabel;
   visuallyDisabled: boolean;
-  style?: StyleProp<ViewStyle>;
 };
 export declare const ProgressBarWithFixedLabels: React.FC<
   React.PropsWithChildren<ProgressBarWithFixedLabelsProps>

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressBarWithFixedLabels.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressBarWithFixedLabels.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAe,KAAK,SAAS,EAAE,KAAK,SAAS,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACjG,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAI1E,OAAO,EAA4B,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC7F,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGvD,MAAM,MAAM,+BAA+B,GAAG,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,QAAQ,CAAC,GAAG;IAC7F,sHAAsH;IACtH,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,oHAAoH;IACpH,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B;;;SAGK;IACL,cAAc,CAAC,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC,CAAC;IAClE;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B;;WAEG;QACH,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACtC;;WAEG;QACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAClC;;WAEG;QACH,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACjC,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,gCAAgC,GAAG;IAC7C,KAAK,EAAE,gBAAgB,CAAC;IACxB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,mCAAmC,GAAG,IAAI,CACpD,+BAA+B,EAC/B,gBAAgB,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CACrD,GACC,IAAI,CAAC,YAAY,EAAE,eAAe,GAAG,YAAY,CAAC,GAAG;IACnD,gBAAgB,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEJ,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,OAAO,GAAG,KAAK,CAAC;IAC1B,KAAK,EAAE,gBAAgB,CAAC;IACxB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AA8FF,eAAO,MAAM,0BAA0B,EAAE,KAAK,CAAC,EAAE,CAC/C,KAAK,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,CAmEzD,CAAC"}
+{"version":3,"file":"ProgressBarWithFixedLabels.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressBarWithFixedLabels.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAe,KAAK,SAAS,EAAE,KAAK,SAAS,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACjG,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAI1E,OAAO,EAA4B,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC7F,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGtD,MAAM,MAAM,+BAA+B,GAAG,IAAI,CAChD,gBAAgB,EAChB,uBAAuB,GAAG,UAAU,GAAG,QAAQ,CAChD,GAAG;IACF,sHAAsH;IACtH,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,oHAAoH;IACpH,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B;;;SAGK;IACL,cAAc,CAAC,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC,CAAC;IAClE;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B;;WAEG;QACH,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACtC;;WAEG;QACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAClC;;WAEG;QACH,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACjC,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,gCAAgC,GAAG,IAAI,CACjD,gBAAgB,EAChB,uBAAuB,GAAG,OAAO,CAClC,GAAG;IACF,KAAK,EAAE,gBAAgB,CAAC;IACxB,gBAAgB,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,mCAAmC,GAAG,IAAI,CACpD,+BAA+B,EAC/B,gBAAgB,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CACrD,GACC,IAAI,CAAC,YAAY,EAAE,eAAe,GAAG,YAAY,CAAC,GAAG;IACnD,gBAAgB,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEJ,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAC3C,gBAAgB,EAChB,uBAAuB,GAAG,OAAO,CAClC,GAAG;IACF,QAAQ,EAAE,OAAO,GAAG,KAAK,CAAC;IAC1B,KAAK,EAAE,gBAAgB,CAAC;IACxB,gBAAgB,EAAE,OAAO,CAAC;CAC3B,CAAC;AAyGF,eAAO,MAAM,0BAA0B,EAAE,KAAK,CAAC,EAAE,CAC/C,KAAK,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,CAwEzD,CAAC"}

package/dts/visualizations/ProgressBarWithFloatLabel.d.ts

@@ -5,11 +5,11 @@ import { type ProgressBarLabel } from './getProgressBarLabelParts';
 import { type ProgressBaseProps } from './ProgressBar';
 export type ProgressBarFloatLabelProps = Pick<
   ProgressBarWithFloatLabelProps,
-  'label' | 'progress' | 'disabled' | 'labelPlacement' | 'styles'
+  'label' | 'progress' | 'disableAnimateOnMount' | 'disabled' | 'labelPlacement' | 'styles'
 >;
 export type ProgressBarWithFloatLabelProps = Pick<
   ProgressBaseProps,
-  'progress' | 'disabled' | 'testID'
+  'progress' | 'disableAnimateOnMount' | 'disabled' | 'testID'
 > & {
   /** Label that is floated at the end of the filled in bar. If a number is used then it will format it as a percentage. */
   label: ProgressBarLabel;

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,KAAkE,MAAM,OAAO,CAAC;AACvF,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,UAAU,GAAG,gBAAgB,GAAG,QAAQ,CAChE,CAAC;AAsFF,MAAM,MAAM,8BAA8B,GAAG,IAAI,CAC/C,iBAAiB,EACjB,UAAU,GAAG,UAAU,GAAG,QAAQ,CACnC,GAAG;IACF,yHAAyH;IACzH,KAAK,EAAE,gBAAgB,CAAC;IACxB;;;SAGK;IACL,cAAc,CAAC,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,OAAO,CAAC,CAAC;IACvD;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B;;WAEG;QACH,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACtC;;WAEG;QACH,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,CAuBxD,CAAC"}
+{"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;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B;;WAEG;QACH,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACtC;;WAEG;QACH,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

@@ -61,7 +61,10 @@ export type ProgressCircleProps = ProgressCircleBaseProps & {
     circle?: Partial<CircleProps>;
   };
 };
-export type ProgressCircleContentProps = Pick<ProgressCircleBaseProps, 'progress' | 'disabled'> &
+export type ProgressCircleContentProps = Pick<
+  ProgressCircleBaseProps,
+  'progress' | 'disableAnimateOnMount' | 'disabled'
+> &
   BoxProps & {
     /**
      * Custom text color.

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;;;OAGG;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;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B;;WAEG;QACH,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACpC;;WAEG;QACH,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC3B;;WAEG;QACH,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACrC;;WAEG;QACH,QAAQ,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;QAChC;;WAEG;QACH,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;KAC/B,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAAC,uBAAuB,EAAE,UAAU,GAAG,UAAU,CAAC,GAC7F,QAAQ,GAAG;IACT;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CACzB,CAAC;AAgEJ,eAAO,MAAM,cAAc;;;;;;;;IAjIzB;;OAEG;kBACW,OAAO;IACrB;;;OAGG;eACQ,OAAO;IAClB;;;;;OAKG;WACI,MAAM;IACb;;OAEG;kBACW,KAAK,CAAC,SAAS;;IAI7B;;OAEG;YACK,SAAS,CAAC,SAAS,CAAC;IAC5B;;OAEG;aACM;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B;;WAEG;QACH,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACpC;;WAEG;QACH,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC3B;;WAEG;QACH,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACrC;;WAEG;QACH,QAAQ,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;QAChC;;WAEG;QACH,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;KAC/B;+BA4LF,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,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;;;OAGG;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;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B;;WAEG;QACH,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACpC;;WAEG;QACH,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC3B;;WAEG;QACH,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACrC;;WAEG;QACH,QAAQ,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;QAChC;;WAEG;QACH,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;;;;;;;;IAxIzB;;OAEG;kBACW,OAAO;IACrB;;;OAGG;eACQ,OAAO;IAClB;;;;;OAKG;WACI,MAAM;IACb;;OAEG;kBACW,KAAK,CAAC,SAAS;;IAI7B;;OAEG;YACK,SAAS,CAAC,SAAS,CAAC;IAC5B;;OAEG;aACM;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B;;WAEG;QACH,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACpC;;WAEG;QACH,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC3B;;WAEG;QACH,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACrC;;WAEG;QACH,QAAQ,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;QAChC;;WAEG;QACH,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;KAC/B;+BAyMF,CAAC"}

package/dts/visualizations/ProgressTextLabel.d.ts

@@ -2,7 +2,10 @@ import React from 'react';
 import { type StyleProp, type TextStyle } from 'react-native';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import type { ProgressBaseProps } from './ProgressBar';
-export type ProgressTextLabelProps = Pick<ProgressBaseProps, 'disabled'> & {
+export type ProgressTextLabelProps = Pick<
+  ProgressBaseProps,
+  'disableAnimateOnMount' | 'disabled'
+> & {
   value: number;
   renderLabel?: (num: number, disabled?: boolean) => React.ReactNode;
   color?: ThemeVars.Color;
@@ -15,6 +18,7 @@ export declare const ProgressTextLabel: React.MemoExoticComponent<
   ({
     value,
     renderLabel,
+    disableAnimateOnMount,
     disabled,
     color,
     style,

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressTextLabel.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressTextLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAOjE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEvD,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC,GAAG;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IACnE,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,iBAAiB,6EACqB,sBAAsB,6CAyCxE,CAAC"}
+{"version":3,"file":"ProgressTextLabel.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressTextLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAOjE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEvD,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,iBAAiB,EACjB,uBAAuB,GAAG,UAAU,CACrC,GAAG;IACF,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IACnE,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,iBAAiB,qGAQzB,sBAAsB,6CA2C1B,CAAC"}

package/esm/media/RemoteImageGroup.js

@@ -1,4 +1,4 @@
-const _excluded = ["children", "size", "max", "shape", "testID"];
+const _excluded = ["children", "size", "max", "shape", "testID", "borderWidth", "borderColor"];
 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, { Children, isValidElement, useMemo } from 'react';
@@ -13,7 +13,9 @@ export const RemoteImageGroup = _ref => {
       size = 'm',
       max = 4,
       shape = 'circle',
-      testID
+      testID,
+      borderWidth,
+      borderColor = borderWidth ? 'bg' : undefined
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
@@ -50,39 +52,49 @@ export const RemoteImageGroup = _ref => {
       if (! /*#__PURE__*/isValidElement(child)) {
         return null;
       }
+      const childShape = child.props.shape;
 
       // dynamically apply uniform sizing and shape to all RemoteImage children elements
       const clonedChild = /*#__PURE__*/React.cloneElement(child, _extends({
         testID: (testID ? testID + "-" : '') + "image-" + index,
         width: sizeAsNumber,
         height: sizeAsNumber
-      }, child.props.shape ? undefined : {
+      }, childShape ? undefined : {
         shape
       }));
 
       // zIndex is progressively lower so that each child is stacked below the previous one
       const zIndex = -index;
+      const childShapeStyle = borderWidth ? shapeStyles[childShape != null ? childShape : shape] : undefined;
       return /*#__PURE__*/_jsx(Box, {
+        borderColor: borderColor,
+        borderWidth: borderWidth,
         marginStart: index === 0 ? undefined : overlapSpacing,
         position: "relative",
+        style: childShapeStyle,
         testID: (testID ? testID + "-" : '') + "inner-box-" + index,
         zIndex: zIndex,
         children: clonedChild
       }, index);
     }), excess > 0 && /*#__PURE__*/_jsx(Box, {
-      alignItems: "center",
       background: "bgOverlay",
-      height: sizeAsNumber,
-      justifyContent: "center",
+      borderColor: borderColor,
+      borderWidth: borderWidth,
       marginStart: overlapSpacing,
+      overflow: "hidden",
       position: "relative",
       style: shapeStyle,
-      width: sizeAsNumber,
       zIndex: groupChildren.length * -1,
-      children: /*#__PURE__*/_jsxs(Text, {
-        style: [typographyStyles, styles.centerText],
-        testID: (testID ? testID + "-" : '') + "excess-text",
-        children: ["+", excess]
+      children: /*#__PURE__*/_jsx(Box, {
+        alignItems: "center",
+        height: sizeAsNumber,
+        justifyContent: "center",
+        width: sizeAsNumber,
+        children: /*#__PURE__*/_jsxs(Text, {
+          style: [typographyStyles, styles.centerText],
+          testID: (testID ? testID + "-" : '') + "excess-text",
+          children: ["+", excess]
+        })
       })
     })]
   }));

package/esm/media/__stories__/RemoteImageGroup.stories.js

@@ -104,7 +104,7 @@ const CircleMax = () => {
 };
 const CircleMaxDefaultCustomSize = () => /*#__PURE__*/_jsxs(VStack, {
   children: [/*#__PURE__*/_jsx(Text, {
-    font: "body",
+    font: "label1",
     children: "RemoteImageGroup excess element defaults to m of AvatarSize when size is not specified"
   }), /*#__PURE__*/_jsxs(RemoteImageGroup, {
     max: 2,
@@ -122,7 +122,7 @@ const CircleMaxDefaultCustomSize = () => /*#__PURE__*/_jsxs(VStack, {
 });
 const MixAndMatchShapes = () => /*#__PURE__*/_jsxs(VStack, {
   children: [/*#__PURE__*/_jsx(Text, {
-    font: "body",
+    font: "label1",
     children: "RemoteImage child shape takes precedence over RemoteImageGroup shape"
   }), /*#__PURE__*/_jsxs(RemoteImageGroup, {
     shape: "circle",
@@ -218,7 +218,7 @@ const SquircleMax = () => {
 };
 const SquircleMaxDefaultCustomSize = () => /*#__PURE__*/_jsxs(VStack, {
   children: [/*#__PURE__*/_jsx(Text, {
-    font: "body",
+    font: "label1",
     children: "RemoteImageGroup excess element defaults to m of AvatarSize when size is not specified"
   }), /*#__PURE__*/_jsxs(RemoteImageGroup, {
     max: 2,
@@ -236,7 +236,7 @@ const SquircleMaxDefaultCustomSize = () => /*#__PURE__*/_jsxs(VStack, {
 });
 const SquircleMaxSetCustomMaxSize = () => /*#__PURE__*/_jsxs(VStack, {
   children: [/*#__PURE__*/_jsx(Text, {
-    font: "body",
+    font: "label1",
     children: "Set a custom size of 36 for RemoteImageGroup excess component"
   }), /*#__PURE__*/_jsxs(RemoteImageGroup, {
     max: 2,
@@ -255,7 +255,7 @@ const SquircleMaxSetCustomMaxSize = () => /*#__PURE__*/_jsxs(VStack, {
 });
 const HideExcessWhenExceedThreshold = () => /*#__PURE__*/_jsxs(VStack, {
   children: [/*#__PURE__*/_jsx(Text, {
-    font: "body",
+    font: "label1",
     children: "Excess component when size is smaller than a certain size looks funky"
   }), /*#__PURE__*/_jsxs(RemoteImageGroup, {
     max: 2,
@@ -272,9 +272,85 @@ const HideExcessWhenExceedThreshold = () => /*#__PURE__*/_jsxs(VStack, {
     })]
   })]
 });
+const ShapeWithBorderWidth = () => /*#__PURE__*/_jsxs(VStack, {
+  children: [/*#__PURE__*/_jsx(Text, {
+    font: "label1",
+    children: "Circle with border width"
+  }), /*#__PURE__*/_jsxs(RemoteImageGroup, {
+    borderWidth: 300,
+    shape: "circle",
+    size: 32,
+    children: [/*#__PURE__*/_jsx(RemoteImage, {
+      source: assets.eth.imageUrl
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      source: assets.btc.imageUrl
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      source: assets.dai.imageUrl
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      source: assets.hbar.imageUrl
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      source: assets.ltc.imageUrl
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      source: assets.uni.imageUrl
+    })]
+  }), /*#__PURE__*/_jsx(Text, {
+    font: "label1",
+    children: "Circle with border color and border width"
+  }), /*#__PURE__*/_jsxs(RemoteImageGroup, {
+    borderColor: "bgPositive",
+    borderWidth: 300,
+    shape: "circle",
+    size: 32,
+    children: [/*#__PURE__*/_jsx(RemoteImage, {
+      source: assets.eth.imageUrl
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      source: assets.btc.imageUrl
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      source: assets.dai.imageUrl
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      source: assets.hbar.imageUrl
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      source: assets.ltc.imageUrl
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      source: assets.uni.imageUrl
+    })]
+  }), /*#__PURE__*/_jsx(Text, {
+    font: "label1",
+    children: "Squircle with border width"
+  }), /*#__PURE__*/_jsxs(RemoteImageGroup, {
+    borderWidth: 300,
+    shape: "squircle",
+    size: 32,
+    children: [/*#__PURE__*/_jsx(RemoteImage, {
+      source: squareAssets.human1
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      source: squareAssets.human2
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      source: squareAssets.human1
+    })]
+  }), /*#__PURE__*/_jsx(Text, {
+    font: "label1",
+    children: "Mixed shape with border width"
+  }), /*#__PURE__*/_jsxs(RemoteImageGroup, {
+    borderWidth: 300,
+    shape: "circle",
+    size: "xxl",
+    children: [/*#__PURE__*/_jsx(RemoteImage, {
+      shape: "squircle",
+      source: squareAssets.human1
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      source: assets.sushi.imageUrl
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      shape: "squircle",
+      source: squareAssets.human2
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      source: assets.ltc.imageUrl
+    })]
+  })]
+});
 const All = () => /*#__PURE__*/_jsxs(VStack, {
   gap: 7,
-  children: [/*#__PURE__*/_jsx(Circle, {}), /*#__PURE__*/_jsx(CircleCustomSize, {}), /*#__PURE__*/_jsx(CircleAvatarSize, {}), /*#__PURE__*/_jsx(CircleMax, {}), /*#__PURE__*/_jsx(CircleMaxDefaultCustomSize, {}), /*#__PURE__*/_jsx(Squircle, {}), /*#__PURE__*/_jsx(SquircleCustomSize, {}), /*#__PURE__*/_jsx(SquircleAvatarSize, {}), /*#__PURE__*/_jsx(SquircleMax, {}), /*#__PURE__*/_jsx(SquircleMaxDefaultCustomSize, {}), /*#__PURE__*/_jsx(SquircleMaxSetCustomMaxSize, {}), /*#__PURE__*/_jsx(HideExcessWhenExceedThreshold, {}), /*#__PURE__*/_jsx(MixAndMatchShapes, {})]
+  children: [/*#__PURE__*/_jsx(Circle, {}), /*#__PURE__*/_jsx(CircleCustomSize, {}), /*#__PURE__*/_jsx(CircleAvatarSize, {}), /*#__PURE__*/_jsx(CircleMax, {}), /*#__PURE__*/_jsx(CircleMaxDefaultCustomSize, {}), /*#__PURE__*/_jsx(Squircle, {}), /*#__PURE__*/_jsx(SquircleCustomSize, {}), /*#__PURE__*/_jsx(SquircleAvatarSize, {}), /*#__PURE__*/_jsx(SquircleMax, {}), /*#__PURE__*/_jsx(SquircleMaxDefaultCustomSize, {}), /*#__PURE__*/_jsx(SquircleMaxSetCustomMaxSize, {}), /*#__PURE__*/_jsx(HideExcessWhenExceedThreshold, {}), /*#__PURE__*/_jsx(MixAndMatchShapes, {}), /*#__PURE__*/_jsx(ShapeWithBorderWidth, {})]
 });
 export { All };
 const RemoteImageGroupScreen = () => {

package/esm/visualizations/DefaultProgressCircleContent.js

@@ -5,6 +5,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export const DefaultProgressCircleContent = /*#__PURE__*/memo(_ref => {
   let {
     progress,
+    disableAnimateOnMount,
     disabled,
     color = 'fgMuted'
   } = _ref;
@@ -14,6 +15,7 @@ export const DefaultProgressCircleContent = /*#__PURE__*/memo(_ref => {
     flexShrink: 0,
     children: /*#__PURE__*/_jsx(ProgressTextLabel, {
       color: color,
+      disableAnimateOnMount: disableAnimateOnMount,
       disabled: disabled,
       value: Math.round(progress * 100)
     })

package/esm/visualizations/ProgressBar.js

@@ -14,8 +14,8 @@ export const ProgressBar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forw
     weight = 'normal',
     progress,
     color = 'bgPrimary',
-    disabled = false,
-    disableAnimateOnMount = false,
+    disabled,
+    disableAnimateOnMount,
     testID,
     accessibilityLabel,
     style,

package/esm/visualizations/ProgressBarWithFixedLabels.js

@@ -8,6 +8,7 @@ const ProgressBarFixedLabelBeside = /*#__PURE__*/memo(_ref => {
   let {
     label,
     visuallyDisabled,
+    disableAnimateOnMount,
     style
   } = _ref;
   const {
@@ -16,6 +17,7 @@ const ProgressBarFixedLabelBeside = /*#__PURE__*/memo(_ref => {
   } = getProgressBarLabelParts(label);
   return /*#__PURE__*/_jsx(ProgressTextLabel, {
     color: "fg",
+    disableAnimateOnMount: disableAnimateOnMount,
     disabled: visuallyDisabled,
     renderLabel: renderLabel,
     style: style,
@@ -27,11 +29,13 @@ const ProgressBarFixedLabel = /*#__PURE__*/memo(_ref2 => {
     label,
     position,
     visuallyDisabled,
+    disableAnimateOnMount,
     style
   } = _ref2;
   return /*#__PURE__*/_jsx(View, {
     testID: "cds-progress-bar-fixed-label-" + position,
     children: /*#__PURE__*/_jsx(ProgressBarFixedLabelBeside, {
+      disableAnimateOnMount: disableAnimateOnMount,
       label: label,
       style: style,
       visuallyDisabled: visuallyDisabled
@@ -43,6 +47,7 @@ const ProgressBarFixedLabelContainer = /*#__PURE__*/memo(_ref3 => {
     startLabel,
     endLabel,
     visuallyDisabled,
+    disableAnimateOnMount,
     paddingBottom,
     paddingTop,
     styles
@@ -50,6 +55,7 @@ const ProgressBarFixedLabelContainer = /*#__PURE__*/memo(_ref3 => {
   const nodes = [];
   if (typeof startLabel !== 'undefined') {
     nodes.push(/*#__PURE__*/_jsx(ProgressBarFixedLabel, {
+      disableAnimateOnMount: disableAnimateOnMount,
       label: startLabel,
       position: "start",
       style: styles == null ? void 0 : styles.startLabel,
@@ -61,6 +67,7 @@ const ProgressBarFixedLabelContainer = /*#__PURE__*/memo(_ref3 => {
   }
   if (typeof endLabel !== 'undefined') {
     nodes.push(/*#__PURE__*/_jsx(ProgressBarFixedLabel, {
+      disableAnimateOnMount: disableAnimateOnMount,
       label: endLabel,
       position: "end",
       style: styles == null ? void 0 : styles.endLabel,
@@ -90,6 +97,7 @@ export const ProgressBarWithFixedLabels = /*#__PURE__*/memo(_ref4 => {
     startLabel,
     endLabel,
     labelPlacement = 'beside',
+    disableAnimateOnMount,
     disabled = false,
     children,
     testID,
@@ -102,6 +110,7 @@ export const ProgressBarWithFixedLabels = /*#__PURE__*/memo(_ref4 => {
     flexShrink: 0,
     paddingEnd: 1,
     children: /*#__PURE__*/_jsx(ProgressBarFixedLabelBeside, {
+      disableAnimateOnMount: disableAnimateOnMount,
       label: startLabel,
       style: styles == null ? void 0 : styles.startLabel,
       visuallyDisabled: disabled
@@ -112,6 +121,7 @@ export const ProgressBarWithFixedLabels = /*#__PURE__*/memo(_ref4 => {
     flexShrink: 0,
     paddingStart: 1,
     children: /*#__PURE__*/_jsx(ProgressBarFixedLabelBeside, {
+      disableAnimateOnMount: disableAnimateOnMount,
       label: endLabel,
       style: styles == null ? void 0 : styles.endLabel,
       visuallyDisabled: disabled
@@ -123,6 +133,7 @@ export const ProgressBarWithFixedLabels = /*#__PURE__*/memo(_ref4 => {
     style: rootStyle,
     testID: testID,
     children: [labelPlacement === 'above' && /*#__PURE__*/_jsx(ProgressBarFixedLabelContainer, {
+      disableAnimateOnMount: disableAnimateOnMount,
       endLabel: endLabel,
       paddingBottom: 1,
       startLabel: startLabel,
@@ -136,6 +147,7 @@ export const ProgressBarWithFixedLabels = /*#__PURE__*/memo(_ref4 => {
       width: "100%",
       children: [labelPlacement === 'beside' && leftEl, children, labelPlacement === 'beside' && rightEl]
     }), labelPlacement === 'below' && /*#__PURE__*/_jsx(ProgressBarFixedLabelContainer, {
+      disableAnimateOnMount: disableAnimateOnMount,
       endLabel: endLabel,
       paddingTop: 1,
       startLabel: startLabel,

package/esm/visualizations/ProgressBarWithFloatLabel.js

@@ -1,5 +1,5 @@
 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); }
-import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { Animated, I18nManager } from 'react-native';
 import { animateProgressBaseSpec } from '@coinbase/cds-common/animation/progress';
 import { usePreviousValues } from '@coinbase/cds-common/hooks/usePreviousValues';
@@ -10,50 +10,55 @@ import { getProgressBarLabelParts } from './getProgressBarLabelParts';
 import { ProgressTextLabel } from './ProgressTextLabel';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ProgressBarFloatLabel = /*#__PURE__*/memo(_ref => {
-  var _getPreviousPercent;
   let {
     label,
     disabled,
     progress,
+    disableAnimateOnMount,
     labelPlacement,
     styles
   } = _ref;
   const [textWidth, setTextWidth] = useState(-1);
   const {
-    getPreviousValue: getPreviousPercent,
     addPreviousValue: addPreviousPercent
-  } = usePreviousValues([0]);
+  } = usePreviousValues([disableAnimateOnMount ? progress : 0]);
   const [size, onLayout] = useLayout();
   const containerWidth = size.width;
+  const [hasAnimationMounted, setHasAnimationMounted] = useState(!disableAnimateOnMount);
+  const animatedProgress = useMemo(() => new Animated.Value(0), []);
   addPreviousPercent(progress);
-  const previousPercent = (_getPreviousPercent = getPreviousPercent()) != null ? _getPreviousPercent : 0;
-  const animatedProgress = useRef(new Animated.Value(previousPercent));
   const {
     value: labelNum,
     render: renderLabel
   } = getProgressBarLabelParts(label);
   useEffect(() => {
     if (containerWidth > 0 && textWidth > -1) {
-      var _Animated$timing;
-      (_Animated$timing = Animated.timing(animatedProgress.current, convertMotionConfig(_extends({
-        toValue: progress
-      }, animateProgressBaseSpec, {
-        useNativeDriver: true
-      })))) == null || _Animated$timing.start();
+      if (!hasAnimationMounted && disableAnimateOnMount) {
+        animatedProgress.setValue(progress);
+        setHasAnimationMounted(true);
+      } else {
+        var _Animated$timing;
+        (_Animated$timing = Animated.timing(animatedProgress, convertMotionConfig(_extends({
+          toValue: progress
+        }, animateProgressBaseSpec, {
+          useNativeDriver: true
+        })))) == null || _Animated$timing.start();
+      }
     }
-  }, [progress, animatedProgress, containerWidth, textWidth, addPreviousPercent]);
+  }, [progress, containerWidth, textWidth, animatedProgress, disableAnimateOnMount, hasAnimationMounted]);
   const handleTextLayout = useCallback(event => {
     setTextWidth(event.nativeEvent.layout.width);
   }, []);
   const containerStyle = useMemo(() => [styles == null ? void 0 : styles.labelContainer], [styles == null ? void 0 : styles.labelContainer]);
   const labelStyle = useMemo(() => [{
+    opacity: hasAnimationMounted ? 1 : 0,
     transform: [{
-      translateX: animatedProgress.current.interpolate({
+      translateX: animatedProgress.interpolate({
         inputRange: [0, 1],
         outputRange: [I18nManager.isRTL ? containerWidth - textWidth : 0, I18nManager.isRTL ? 0 : containerWidth - textWidth]
       })
     }]
-  }], [containerWidth, textWidth]);
+  }], [containerWidth, textWidth, hasAnimationMounted, animatedProgress]);
   return /*#__PURE__*/_jsx(Box, {
     flexWrap: "nowrap",
     onLayout: onLayout,
@@ -71,6 +76,7 @@ const ProgressBarFloatLabel = /*#__PURE__*/memo(_ref => {
       testID: "cds-progress-bar-float-label",
       children: /*#__PURE__*/_jsx(ProgressTextLabel, {
         color: "fgMuted",
+        disableAnimateOnMount: disableAnimateOnMount,
         disabled: disabled,
         renderLabel: renderLabel,
         style: styles == null ? void 0 : styles.label,
@@ -84,6 +90,7 @@ export const ProgressBarWithFloatLabel = /*#__PURE__*/memo(_ref2 => {
     label,
     labelPlacement = 'above',
     progress,
+    disableAnimateOnMount,
     disabled,
     children,
     testID,
@@ -92,6 +99,7 @@ export const ProgressBarWithFloatLabel = /*#__PURE__*/memo(_ref2 => {
   } = _ref2;
   const rootStyle = useMemo(() => [style, styles == null ? void 0 : styles.root], [style, styles == null ? void 0 : styles.root]);
   const progressBarFloatLabel = /*#__PURE__*/_jsx(ProgressBarFloatLabel, {
+    disableAnimateOnMount: disableAnimateOnMount,
     disabled: disabled,
     label: label,
     labelPlacement: labelPlacement,

package/esm/visualizations/ProgressCircle.js

@@ -23,13 +23,15 @@ const ProgressCircleInner = /*#__PURE__*/memo(_ref => {
     visuallyDisabled,
     style,
     onAnimationEnd,
-    onAnimationStart
+    onAnimationStart,
+    disableAnimateOnMount
   } = _ref;
   const strokeWidth = useProgressSize(weight);
   const theme = useTheme();
   const circleRef = useRef(null);
   const circumference = getCircumference(getRadius(size, strokeWidth));
-  const animatedStrokeDashOffset = React.useRef(new Animated.Value(circumference));
+  const initialOffset = disableAnimateOnMount ? circumference - circumference * progress : circumference;
+  const animatedStrokeDashOffset = useRef(new Animated.Value(initialOffset));
   useEffect(() => {
     const strokeDashoffset = circumference - circumference * progress;
     onAnimationStart == null || onAnimationStart();
@@ -65,7 +67,8 @@ export const ProgressCircle = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3,
     // a11y label isn't specified
     accessibilityLabel = '',
     color = 'bgPrimary',
-    disabled = false,
+    disabled,
+    disableAnimateOnMount,
     testID,
     hideContent,
     hideText,
@@ -128,6 +131,7 @@ export const ProgressCircle = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3,
                 stroke: theme.color.bgLine
               }), (styles == null ? void 0 : styles.circle) || {})), /*#__PURE__*/_jsx(ProgressCircleInner, {
                 color: color,
+                disableAnimateOnMount: disableAnimateOnMount,
                 onAnimationEnd: onAnimationEnd,
                 onAnimationStart: onAnimationStart,
                 progress: progress,
@@ -150,6 +154,7 @@ export const ProgressCircle = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3,
               overflow: "hidden",
               width: "100%",
               children: contentNode != null ? contentNode : /*#__PURE__*/_jsx(DefaultProgressCircleContent, {
+                disableAnimateOnMount: disableAnimateOnMount,
                 disabled: disabled,
                 progress: progress
               })

package/esm/visualizations/ProgressTextLabel.js

@@ -10,6 +10,7 @@ export const ProgressTextLabel = /*#__PURE__*/memo(_ref => {
   let {
     value,
     renderLabel,
+    disableAnimateOnMount,
     disabled,
     color,
     style
@@ -17,7 +18,7 @@ export const ProgressTextLabel = /*#__PURE__*/memo(_ref => {
   const {
     getPreviousValue,
     addPreviousValue
-  } = usePreviousValues([0]);
+  } = usePreviousValues([disableAnimateOnMount ? value : 0]);
   const accessibilityState = useMemo(() => ({
     disabled: !!disabled
   }), [disabled]);

package/esm/visualizations/__stories__/ProgressBar.stories.js

@@ -375,15 +375,6 @@ const ProgressBarScreen = () => {
           })]
         })
       })
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Disable Mount Animation",
-      children: /*#__PURE__*/_jsx(ProgressContainerWithButtons, {
-        hideIncrease: true,
-        children: () => /*#__PURE__*/_jsx(ProgressBar, {
-          disableAnimateOnMount: true,
-          progress: 0.8
-        })
-      })
     }), /*#__PURE__*/_jsx(Example, {
       title: "Animation Callbacks",
       children: /*#__PURE__*/_jsx(AnimationCallbacksExample, {})
@@ -472,6 +463,58 @@ const ProgressBarScreen = () => {
           });
         }
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Disable Mount Animation",
+      children: /*#__PURE__*/_jsx(ProgressContainerWithButtons, {
+        children: _ref10 => {
+          let {
+            calculateProgress
+          } = _ref10;
+          return /*#__PURE__*/_jsxs(VStack, {
+            gap: 4,
+            children: [/*#__PURE__*/_jsxs(VStack, {
+              gap: 1,
+              children: [/*#__PURE__*/_jsx(Text, {
+                font: "label1",
+                children: "ProgressBar"
+              }), /*#__PURE__*/_jsx(ProgressBar, {
+                disableAnimateOnMount: true,
+                progress: calculateProgress(0.8)
+              })]
+            }), /*#__PURE__*/_jsxs(VStack, {
+              gap: 1,
+              children: [/*#__PURE__*/_jsx(Text, {
+                font: "label1",
+                children: "ProgressBarWithFixedLabels"
+              }), /*#__PURE__*/_jsx(ProgressBarWithFixedLabels, {
+                disableAnimateOnMount: true,
+                endLabel: Math.round(calculateProgress(0.8) * 100),
+                labelPlacement: "above",
+                startLabel: 0,
+                children: /*#__PURE__*/_jsx(ProgressBar, {
+                  disableAnimateOnMount: true,
+                  progress: calculateProgress(0.8)
+                })
+              })]
+            }), /*#__PURE__*/_jsxs(VStack, {
+              gap: 1,
+              children: [/*#__PURE__*/_jsx(Text, {
+                font: "label1",
+                children: "ProgressBarWithFloatLabel"
+              }), /*#__PURE__*/_jsx(ProgressBarWithFloatLabel, {
+                disableAnimateOnMount: true,
+                label: Math.round(calculateProgress(0.8) * 100),
+                labelPlacement: "above",
+                progress: calculateProgress(0.8),
+                children: /*#__PURE__*/_jsx(ProgressBar, {
+                  disableAnimateOnMount: true,
+                  progress: calculateProgress(0.8)
+                })
+              })]
+            })]
+          });
+        }
+      })
     })]
   });
 };

package/esm/visualizations/__stories__/ProgressCircle.stories.js

@@ -447,6 +447,20 @@ const ProgressBarScreen = () => {
           });
         }
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Disable Mount Animation",
+      children: /*#__PURE__*/_jsx(ProgressContainerWithButtons, {
+        children: _ref8 => {
+          let {
+            calculateProgress
+          } = _ref8;
+          return /*#__PURE__*/_jsx(ProgressCircle, {
+            disableAnimateOnMount: true,
+            progress: calculateProgress(0.8),
+            size: 100
+          });
+        }
+      })
     })]
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.34.2",
+  "version": "8.35.1",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -198,7 +198,7 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.34.2",
+    "@coinbase/cds-common": "^8.35.1",
     "@coinbase/cds-icons": "^5.9.0",
     "@coinbase/cds-illustrations": "^4.29.0",
     "@coinbase/cds-lottie-files": "^3.3.4",