@coinbase/cds-mobile 8.58.0 → 8.60.0

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

@@ -1,6 +1,7 @@
 import React, { useCallback, useRef, useState } from 'react';
 import { navigationOptions } from '@coinbase/cds-common/internal/data/navigation';
 import { NoopFn } from '@coinbase/cds-common/utils/mockUtils';
+import { Button } from '../../buttons/Button';
 import { IconButton } from '../../buttons/IconButton';
 import { Menu } from '../../controls/Menu';
 import { SelectOption } from '../../controls/SelectOption';
@@ -10,7 +11,7 @@ import { HStack } from '../../layout';
 import { Tray } from '../tray/Tray';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const NavigationTray = () => {
-  const [isTrayVisible, setIsTrayVisible] = useState(true);
+  const [isTrayVisible, setIsTrayVisible] = useState(false);
   const setIsTrayVisibleToFalse = useCallback(() => setIsTrayVisible(false), []);
   const [value, setValue] = useState();
   const trayRef = useRef(null);
@@ -22,7 +23,10 @@ const NavigationTray = () => {
     setIsTrayVisible(true);
   }, []);
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(HStack, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onPress: handleAppSwitcherPress,
+      children: "Open"
+    }), /*#__PURE__*/_jsxs(HStack, {
       gap: 2,
       justifyContent: "flex-end",
       minHeight: 200,

package/esm/overlays/__stories__/Trays.js

@@ -6,14 +6,14 @@ import { Menu } from '../../controls/Menu';
 import { SelectOption } from '../../controls/SelectOption';
 import { Fallback, VStack } from '../../layout';
 import { Tray } from '../tray/Tray';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export const options = prices.slice(0, 4);
 const lotsOfOptions = prices.slice(0, 30);
 export const DefaultTray = _ref => {
   let {
     title
   } = _ref;
-  const [isTrayVisible, setIsTrayVisible] = useState(true);
+  const [isTrayVisible, setIsTrayVisible] = useState(false);
   const setIsTrayVisibleOff = useCallback(() => setIsTrayVisible(false), [setIsTrayVisible]);
   const setIsTrayVisibleOn = useCallback(() => setIsTrayVisible(true), [setIsTrayVisible]);
   const [value, setValue] = useState();
@@ -34,15 +34,24 @@ export const DefaultTray = _ref => {
       onCloseComplete: setIsTrayVisibleOff,
       onVisibilityChange: handleTrayVisibilityChange,
       title: title,
-      children: /*#__PURE__*/_jsx(Menu, {
-        onChange: setValue,
-        value: value,
-        children: options.map(option => /*#__PURE__*/_jsx(SelectOption, {
-          description: "BTC",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        paddingX: 3,
+        children: [/*#__PURE__*/_jsx(Menu, {
+          onChange: setValue,
+          value: value,
+          children: options.map(option => /*#__PURE__*/_jsx(SelectOption, {
+            description: "BTC",
+            onPress: handleOptionPress,
+            title: option,
+            value: option
+          }, option))
+        }), /*#__PURE__*/_jsx(Button, {
+          block: true,
           onPress: handleOptionPress,
-          title: option,
-          value: option
-        }, option))
+          variant: "secondary",
+          children: "Close"
+        })]
       })
     })]
   });
@@ -64,7 +73,7 @@ export const ScrollableTray = _ref2 => {
     fallbackEnabled,
     verticalDrawerPercentageOfView
   } = _ref2;
-  const [isTrayVisible, setIsTrayVisible] = useState(true);
+  const [isTrayVisible, setIsTrayVisible] = useState(false);
   const setIsTrayVisibleOff = useCallback(() => setIsTrayVisible(false), [setIsTrayVisible]);
   const setIsTrayVisibleOn = useCallback(() => setIsTrayVisible(true), [setIsTrayVisible]);
   const [value, setValue] = useState();

package/esm/sticky-footer/__stories__/StickyFooter.stories.js

@@ -7,7 +7,7 @@ import { VStack } from '../../layout';
 import { StickyFooter } from '../StickyFooter';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const StickyFooterScreen = () => {
-  const [showStickyFooter, setShowStickyFooter] = useState(true);
+  const [showStickyFooter, setShowStickyFooter] = useState(false);
   const handleButtonPress = useCallback(() => {
     setShowStickyFooter(!showStickyFooter);
   }, [showStickyFooter]);
@@ -17,7 +17,7 @@ const StickyFooterScreen = () => {
       title: "StickyFooter with Screen",
       children: /*#__PURE__*/_jsx(Button, {
         onPress: handleButtonPress,
-        children: showStickyFooter ? 'Close' : 'Open'
+        children: showStickyFooter ? 'Cancel' : 'Open'
       })
     }), showStickyFooter && /*#__PURE__*/_jsx(View, {
       style: {

package/esm/sticky-footer/__stories__/StickyFooterWithTray.stories.js

@@ -14,7 +14,7 @@ const StickyFooterWithTray = _ref => {
   let {
     title
   } = _ref;
-  const [isTrayVisible, setIsTrayVisible] = useState(true);
+  const [isTrayVisible, setIsTrayVisible] = useState(false);
   const setIsTrayVisibleToFalse = useCallback(() => setIsTrayVisible(false), []);
   const setIsTrayVisibleToTrue = useCallback(() => setIsTrayVisible(true), []);
   const [value, setValue] = useState();
@@ -56,14 +56,14 @@ const StickyFooterWithTray = _ref => {
               flexGrow: 1,
               children: /*#__PURE__*/_jsx(Button, {
                 block: true,
+                onPress: handleClose,
                 variant: "secondary",
-                children: "Secondary"
+                children: "Cancel"
               })
             }), /*#__PURE__*/_jsx(Box, {
               flexGrow: 1,
               children: /*#__PURE__*/_jsx(Button, {
                 block: true,
-                onPress: handleClose,
                 children: "Primary"
               })
             })]

package/esm/visualizations/DefaultProgressCircleContent.js

@@ -4,7 +4,7 @@ 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

@@ -2,7 +2,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, I18nManager } from 'react-native';
 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 { convertMotionConfig } from '../animation/convertMotionConfig';
 import { useTheme } from '../hooks/useTheme';
 import { Box, HStack } from '../layout';
@@ -10,7 +10,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export const ProgressBar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
   let {
     weight = 'normal',
-    progress,
+    progress = 0,
     color = 'bgPrimary',
     disabled,
     disableAnimateOnMount,
@@ -22,7 +22,7 @@ export const ProgressBar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forw
     onAnimationStart
   } = _ref;
   const theme = useTheme();
-  const height = useProgressSize(weight);
+  const height = getProgressSize(weight);
   const animatedProgress = useRef(new Animated.Value(disableAnimateOnMount ? progress : 0));
   const [trackWidth, setTrackWidth] = useState(-1);
   useEffect(() => {

package/esm/visualizations/ProgressBarWithFloatLabel.js

@@ -1,64 +1,55 @@
 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, useState } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useRef, 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';
 import { convertMotionConfig } from '../animation/convertMotionConfig';
 import { useLayout } from '../hooks/useLayout';
 import { Box, VStack } from '../layout';
 import { getProgressBarLabelParts } from './getProgressBarLabelParts';
 import { ProgressTextLabel } from './ProgressTextLabel';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getEndTranslateX = (containerWidth, textWidth, progress) => I18nManager.isRTL ? Math.min(containerWidth - textWidth, containerWidth - containerWidth * progress) : Math.max(0, containerWidth * progress - textWidth);
 const ProgressBarFloatLabel = /*#__PURE__*/memo(_ref => {
   let {
     label,
     disabled,
-    progress,
+    progress = 0,
     disableAnimateOnMount,
     labelPlacement,
     styles
   } = _ref;
   const [textWidth, setTextWidth] = useState(-1);
-  const {
-    addPreviousValue: addPreviousPercent
-  } = 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 animatedTranslateX = useRef(new Animated.Value(0));
   const {
     value: labelNum,
     render: renderLabel
   } = getProgressBarLabelParts(label);
   useEffect(() => {
-    if (containerWidth > 0 && textWidth > -1) {
-      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();
-      }
+    if (containerWidth <= 0 || textWidth < 0) return;
+    const targetTranslateX = getEndTranslateX(containerWidth, textWidth, progress);
+    if (disableAnimateOnMount) {
+      animatedTranslateX.current.setValue(targetTranslateX);
+    } else {
+      Animated.timing(animatedTranslateX.current, convertMotionConfig(_extends({
+        toValue: targetTranslateX
+      }, animateProgressBaseSpec, {
+        useNativeDriver: true
+      }))).start();
     }
-  }, [progress, containerWidth, textWidth, animatedProgress, disableAnimateOnMount, hasAnimationMounted]);
+  }, [progress, containerWidth, textWidth, disableAnimateOnMount]);
   const handleTextLayout = useCallback(event => {
     setTextWidth(event.nativeEvent.layout.width);
   }, []);
+  const hasDimensions = containerWidth > 0 && textWidth > -1;
   const containerStyle = useMemo(() => [styles == null ? void 0 : styles.labelContainer], [styles == null ? void 0 : styles.labelContainer]);
   const labelStyle = useMemo(() => [{
-    opacity: hasAnimationMounted ? 1 : 0,
+    opacity: hasDimensions ? 1 : 0,
     transform: [{
-      translateX: animatedProgress.interpolate({
-        inputRange: [0, 1],
-        outputRange: [I18nManager.isRTL ? containerWidth - textWidth : 0, I18nManager.isRTL ? 0 : containerWidth - textWidth]
-      })
+      translateX: animatedTranslateX.current
     }]
-  }], [containerWidth, textWidth, hasAnimationMounted, animatedProgress]);
+  }], [hasDimensions]);
   return /*#__PURE__*/_jsx(Box, {
     flexWrap: "nowrap",
     onLayout: onLayout,

package/esm/visualizations/ProgressCircle.js

@@ -1,11 +1,11 @@
 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, { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
-import { Animated } from 'react-native';
+import { Animated, StyleSheet } from 'react-native';
 import { Circle, G, Svg } from 'react-native-svg';
 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 { isTest } from '@coinbase/cds-utils';
 import { convertMotionConfig } from '../animation/convertMotionConfig';
 import { useTheme } from '../hooks/useTheme';
@@ -14,19 +14,19 @@ import { DefaultProgressCircleContent } from './DefaultProgressCircleContent';
 import { VisualizationContainer } from './VisualizationContainer';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+const AnimatedSvg = Animated.createAnimatedComponent(Svg);
 const ProgressCircleInner = /*#__PURE__*/memo(_ref => {
   let {
     size,
-    progress,
+    progress = 0,
     color,
-    weight,
+    strokeWidth,
     visuallyDisabled,
     style,
     onAnimationEnd,
     onAnimationStart,
     disableAnimateOnMount
   } = _ref;
-  const strokeWidth = useProgressSize(weight);
   const theme = useTheme();
   const circleRef = useRef(null);
   const circumference = getCircumference(getRadius(size, strokeWidth));
@@ -47,8 +47,7 @@ const ProgressCircleInner = /*#__PURE__*/memo(_ref => {
     });
   }, [circumference, progress, animatedStrokeDashOffset, onAnimationStart, onAnimationEnd]);
   return /*#__PURE__*/_jsx(AnimatedCircle, _extends({
-    ref: !isTest() ? circleRef : undefined // This is required because Circle is mocked in the unit test to support testID. The mock does not support refs
-    ,
+    ref: !isTest() ? circleRef : undefined,
     strokeDasharray: circumference,
     strokeDashoffset: animatedStrokeDashOffset.current,
     strokeLinecap: progress > 0 ? 'round' : 'butt',
@@ -61,14 +60,15 @@ const ProgressCircleInner = /*#__PURE__*/memo(_ref => {
 });
 export const ProgressCircle = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3, forwardedRef) => {
   let {
+    indeterminate,
     weight = 'normal',
-    progress,
+    progress = indeterminate ? 0.75 : 0,
     // Default is empty string due to iOS VoiceOver repeating percentage multiple times when
     // a11y label isn't specified
-    accessibilityLabel = '',
-    color = 'bgPrimary',
+    accessibilityLabel = indeterminate ? 'Loading' : '',
+    color = indeterminate ? 'fgMuted' : 'bgPrimary',
     disabled,
-    disableAnimateOnMount,
+    disableAnimateOnMount = indeterminate ? true : false,
     testID,
     hideContent,
     hideText,
@@ -80,12 +80,25 @@ export const ProgressCircle = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3,
     onAnimationStart
   } = _ref3;
   const theme = useTheme();
-  const strokeWidth = useProgressSize(weight);
+  const strokeWidth = getProgressSize(weight);
   const visSize = size != null ? size : '100%';
   const rootStyle = useMemo(() => [style, styles == null ? void 0 : styles.root], [style, styles == null ? void 0 : styles.root]);
   const textContainerStyle = useMemo(() => [{
     padding: strokeWidth
   }, styles == null ? void 0 : styles.textContainer], [strokeWidth, styles == null ? void 0 : styles.textContainer]);
+  const animatedRotate = useRef(new Animated.Value(0));
+  useEffect(() => {
+    if (!indeterminate) return;
+    // if indeterminate, animate the rotation of the svg
+    const animation = Animated.loop(Animated.timing(animatedRotate.current, convertMotionConfig({
+      toValue: 1,
+      duration: 'slow4',
+      easing: 'linear',
+      fromValue: 0
+    })));
+    animation.start();
+    return () => animation.stop();
+  }, [indeterminate]);
   return /*#__PURE__*/_jsx(VisualizationContainer, {
     height: visSize,
     width: visSize,
@@ -95,12 +108,12 @@ export const ProgressCircle = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3,
         height,
         circleSize
       } = _ref4;
-      return /*#__PURE__*/_jsx(Box, {
+      return /*#__PURE__*/_jsxs(Box, {
         ref: forwardedRef,
         accessible: true,
         accessibilityLabel: accessibilityLabel,
         accessibilityRole: "progressbar",
-        accessibilityValue: {
+        accessibilityValue: indeterminate ? undefined : {
           min: 0,
           max: 100,
           now: Math.round(progress * 100)
@@ -111,57 +124,64 @@ export const ProgressCircle = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3,
         style: rootStyle,
         testID: testID,
         width: width,
-        children: /*#__PURE__*/_jsxs(Box, {
-          flexGrow: 0,
-          flexShrink: 0,
+        children: [/*#__PURE__*/_jsx(AnimatedSvg, {
           height: circleSize,
-          style: styles == null ? void 0 : styles.svgContainer,
+          style: [styles == null ? void 0 : styles.svg, styleSheet.svg, {
+            transform: [{
+              rotate: animatedRotate.current.interpolate({
+                inputRange: [0, 1],
+                outputRange: ['0deg', '360deg']
+              })
+            }]
+          }],
+          viewBox: "0 0 " + circleSize + " " + circleSize,
           width: circleSize,
-          children: [/*#__PURE__*/_jsx(Svg, {
-            height: circleSize,
-            style: styles == null ? void 0 : styles.svg,
-            viewBox: "0 0 " + circleSize + " " + circleSize,
-            width: circleSize,
-            children: /*#__PURE__*/_jsxs(G, {
-              origin: circleSize / 2 + ", " + circleSize / 2,
-              rotation: -90,
-              children: [/*#__PURE__*/_jsx(Circle, _extends({}, getProgressCircleParams({
-                size: circleSize,
-                strokeWidth,
-                stroke: theme.color.bgLine
-              }), (styles == null ? void 0 : styles.circle) || {})), /*#__PURE__*/_jsx(ProgressCircleInner, {
-                color: color,
-                disableAnimateOnMount: disableAnimateOnMount,
-                onAnimationEnd: onAnimationEnd,
-                onAnimationStart: onAnimationStart,
-                progress: progress,
-                size: circleSize,
-                style: styles == null ? void 0 : styles.progress,
-                visuallyDisabled: disabled,
-                weight: weight
-              })]
-            })
-          }, circleSize), !hideText && !hideContent && /*#__PURE__*/_jsx(Box, {
+          children: /*#__PURE__*/_jsxs(G, {
+            origin: circleSize / 2 + ", " + circleSize / 2,
+            rotation: -90,
+            children: [/*#__PURE__*/_jsx(Circle, _extends({}, getProgressCircleParams({
+              size: circleSize,
+              strokeWidth,
+              stroke: theme.color.bgLine
+            }), (styles == null ? void 0 : styles.circle) || {})), /*#__PURE__*/_jsx(ProgressCircleInner, {
+              color: color,
+              disableAnimateOnMount: disableAnimateOnMount,
+              indeterminate: indeterminate,
+              onAnimationEnd: onAnimationEnd,
+              onAnimationStart: onAnimationStart,
+              progress: progress,
+              size: circleSize,
+              strokeWidth: strokeWidth,
+              style: styles == null ? void 0 : styles.progress,
+              visuallyDisabled: disabled
+            })]
+          })
+        }, circleSize), !hideText && !hideContent && /*#__PURE__*/_jsx(Box, {
+          height: "100%",
+          position: "absolute",
+          style: textContainerStyle,
+          width: "100%",
+          children: /*#__PURE__*/_jsx(Box, {
+            alignItems: "center",
+            borderRadius: 1000,
             height: "100%",
-            position: "absolute",
-            style: textContainerStyle,
+            justifyContent: "center",
+            overflow: "hidden",
             width: "100%",
-            children: /*#__PURE__*/_jsx(Box, {
-              alignItems: "center",
-              borderRadius: 1000,
-              height: "100%",
-              justifyContent: "center",
-              overflow: "hidden",
-              width: "100%",
-              children: contentNode != null ? contentNode : /*#__PURE__*/_jsx(DefaultProgressCircleContent, {
-                disableAnimateOnMount: disableAnimateOnMount,
-                disabled: disabled,
-                progress: progress
-              })
+            children: contentNode != null ? contentNode : !indeterminate && /*#__PURE__*/_jsx(DefaultProgressCircleContent, {
+              disableAnimateOnMount: disableAnimateOnMount,
+              disabled: disabled,
+              progress: progress
             })
-          })]
-        })
+          })
+        })]
       });
     }
   });
-}));
+}));
+const styleSheet = StyleSheet.create({
+  svg: {
+    flexGrow: 0,
+    flexShrink: 0
+  }
+});

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

@@ -111,12 +111,64 @@ const ProgressBarScreen = () => {
         }
       })
     }), /*#__PURE__*/_jsx(Example, {
-      title: "Heavy",
+      title: "Indeterminate",
       children: /*#__PURE__*/_jsx(ProgressContainerWithButtons, {
         children: _ref3 => {
           let {
             calculateProgress
           } = _ref3;
+          return /*#__PURE__*/_jsxs(HStack, {
+            flexWrap: "wrap",
+            gap: 2,
+            children: [/*#__PURE__*/_jsx(ProgressCircle, {
+              indeterminate: true,
+              accessibilityLabel: "Loading",
+              color: "bgPositive",
+              progress: calculateProgress(0.75),
+              size: 30
+            }), /*#__PURE__*/_jsx(ProgressCircle, {
+              indeterminate: true,
+              accessibilityLabel: "Loading",
+              color: "bgSecondary",
+              progress: calculateProgress(0.75),
+              size: 30
+            }), /*#__PURE__*/_jsx(ProgressCircle, {
+              indeterminate: true,
+              accessibilityLabel: "Loading",
+              disableAnimateOnMount: false,
+              progress: calculateProgress(0.75),
+              size: 100,
+              weight: "thin"
+            }), /*#__PURE__*/_jsx(ProgressCircle, {
+              indeterminate: true,
+              accessibilityLabel: "Loading",
+              disableAnimateOnMount: false,
+              progress: calculateProgress(0.75),
+              size: 100,
+              weight: "normal"
+            }), /*#__PURE__*/_jsx(ProgressCircle, {
+              indeterminate: true,
+              accessibilityLabel: "Loading",
+              progress: calculateProgress(0.75),
+              size: 100,
+              weight: "semiheavy"
+            }), /*#__PURE__*/_jsx(ProgressCircle, {
+              indeterminate: true,
+              accessibilityLabel: "Loading",
+              progress: calculateProgress(0.75),
+              size: 100,
+              weight: "heavy"
+            })]
+          });
+        }
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Heavy",
+      children: /*#__PURE__*/_jsx(ProgressContainerWithButtons, {
+        children: _ref4 => {
+          let {
+            calculateProgress
+          } = _ref4;
           return /*#__PURE__*/_jsxs(HStack, {
             gap: 2,
             children: [/*#__PURE__*/_jsx(ProgressCircle, {
@@ -134,10 +186,10 @@ const ProgressBarScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       title: "NoText",
       children: /*#__PURE__*/_jsx(ProgressContainerWithButtons, {
-        children: _ref4 => {
+        children: _ref5 => {
           let {
             calculateProgress
-          } = _ref4;
+          } = _ref5;
           return /*#__PURE__*/_jsxs(HStack, {
             gap: 2,
             children: [/*#__PURE__*/_jsx(ProgressCircle, {
@@ -201,10 +253,10 @@ const ProgressBarScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       title: "FillParent",
       children: /*#__PURE__*/_jsx(ProgressContainerWithButtons, {
-        children: _ref5 => {
+        children: _ref6 => {
           let {
             calculateProgress
-          } = _ref5;
+          } = _ref6;
           return /*#__PURE__*/_jsxs(HStack, {
             flexWrap: "wrap",
             gap: 2,
@@ -250,10 +302,10 @@ const ProgressBarScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       title: "CustomTextColor",
       children: /*#__PURE__*/_jsx(ProgressContainerWithButtons, {
-        children: _ref6 => {
+        children: _ref7 => {
           let {
             calculateProgress
-          } = _ref6;
+          } = _ref7;
           return /*#__PURE__*/_jsxs(HStack, {
             gap: 2,
             children: [/*#__PURE__*/_jsx(ProgressCircle, {
@@ -429,10 +481,10 @@ const ProgressBarScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       title: "Thin",
       children: /*#__PURE__*/_jsx(ProgressContainerWithButtons, {
-        children: _ref7 => {
+        children: _ref8 => {
           let {
             calculateProgress
-          } = _ref7;
+          } = _ref8;
           return /*#__PURE__*/_jsxs(HStack, {
             gap: 2,
             children: [/*#__PURE__*/_jsx(ProgressCircle, {
@@ -450,10 +502,10 @@ const ProgressBarScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       title: "Disable Mount Animation",
       children: /*#__PURE__*/_jsx(ProgressContainerWithButtons, {
-        children: _ref8 => {
+        children: _ref9 => {
           let {
             calculateProgress
-          } = _ref8;
+          } = _ref9;
           return /*#__PURE__*/_jsx(ProgressCircle, {
             disableAnimateOnMount: true,
             progress: calculateProgress(0.8),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.58.0",
+  "version": "8.60.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -197,9 +197,9 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.58.0",
+    "@coinbase/cds-common": "^8.60.0",
     "@coinbase/cds-icons": "^5.13.0",
-    "@coinbase/cds-illustrations": "^4.35.0",
+    "@coinbase/cds-illustrations": "^4.36.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
     "@coinbase/cds-utils": "^2.3.5",
     "@floating-ui/react-native": "^0.10.5",