@coinbase/cds-mobile 9.6.1 → 9.6.3

package/esm/typography/TextLegal.js

@@ -1,7 +1,7 @@
-const _excluded = ["font"];
+const _excluded = ["ref", "font"];
 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 } from 'react';
+import React, { memo } from 'react';
 import { Text } from './Text';
 
 /**
@@ -18,8 +18,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @deprecated Use `Text` with `font="legal"` instead. This will be removed in a future major release.
  * @deprecationExpectedRemoval v10
  */
-export const TextLegal = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const TextLegal = /*#__PURE__*/memo(_ref => {
   let {
+      ref,
       font = 'legal'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -27,4 +28,4 @@ export const TextLegal = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
     ref: ref,
     font: font
   }, props));
-}));
+});

package/esm/typography/TextTitle1.js

@@ -1,7 +1,7 @@
-const _excluded = ["accessibilityRole", "font"];
+const _excluded = ["ref", "accessibilityRole", "font"];
 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 } from 'react';
+import React, { memo } from 'react';
 import { Text } from './Text';
 
 /**
@@ -18,8 +18,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @deprecated Use `Text` with `font="title1"` instead. This will be removed in a future major release.
  * @deprecationExpectedRemoval v10
  */
-export const TextTitle1 = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const TextTitle1 = /*#__PURE__*/memo(_ref => {
   let {
+      ref,
       accessibilityRole = 'header',
       font = 'title1'
     } = _ref,
@@ -29,4 +30,4 @@ export const TextTitle1 = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
     accessibilityRole: accessibilityRole,
     font: font
   }, props));
-}));
+});

package/esm/typography/TextTitle2.js

@@ -1,7 +1,7 @@
-const _excluded = ["accessibilityRole", "font"];
+const _excluded = ["ref", "accessibilityRole", "font"];
 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 } from 'react';
+import React, { memo } from 'react';
 import { Text } from './Text';
 
 /**
@@ -18,8 +18,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @deprecated Use `Text` with `font="title2"` instead. This will be removed in a future major release.
  * @deprecationExpectedRemoval v10
  */
-export const TextTitle2 = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const TextTitle2 = /*#__PURE__*/memo(_ref => {
   let {
+      ref,
       accessibilityRole = 'header',
       font = 'title2'
     } = _ref,
@@ -29,4 +30,4 @@ export const TextTitle2 = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
     accessibilityRole: accessibilityRole,
     font: font
   }, props));
-}));
+});

package/esm/typography/TextTitle3.js

@@ -1,7 +1,7 @@
-const _excluded = ["font"];
+const _excluded = ["ref", "font"];
 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 } from 'react';
+import React, { memo } from 'react';
 import { Text } from './Text';
 
 /**
@@ -18,8 +18,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @deprecated Use `Text` with `font="title3"` instead. This will be removed in a future major release.
  * @deprecationExpectedRemoval v10
  */
-export const TextTitle3 = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const TextTitle3 = /*#__PURE__*/memo(_ref => {
   let {
+      ref,
       font = 'title3'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -27,4 +28,4 @@ export const TextTitle3 = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
     ref: ref,
     font: font
   }, props));
-}));
+});

package/esm/typography/TextTitle4.js

@@ -1,7 +1,7 @@
-const _excluded = ["font"];
+const _excluded = ["ref", "font"];
 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 } from 'react';
+import React, { memo } from 'react';
 import { Text } from './Text';
 
 /**
@@ -18,8 +18,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @deprecated Use `Text` with `font="title4"` instead. This will be removed in a future major release.
  * @deprecationExpectedRemoval v10
  */
-export const TextTitle4 = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const TextTitle4 = /*#__PURE__*/memo(_ref => {
   let {
+      ref,
       font = 'title4'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -27,4 +28,4 @@ export const TextTitle4 = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
     ref: ref,
     font: font
   }, props));
-}));
+});

package/esm/typography/index.js

@@ -1,11 +1,11 @@
 export * from './Link';
 export * from './Text';
 export * from './TextBody';
-export * from './TextFallback';
 export * from './TextCaption';
 export * from './TextDisplay1';
 export * from './TextDisplay2';
 export * from './TextDisplay3';
+export * from './TextFallback';
 export * from './TextHeadline';
 export * from './TextLabel1';
 export * from './TextLabel2';

package/esm/visualizations/ProgressBar.js

@@ -1,5 +1,7 @@
+const _excluded = ["ref"];
 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, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+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, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, I18nManager } from 'react-native';
 import { animateProgressBaseSpec } from '@coinbase/cds-common/animation/progress';
 import { getProgressSize } from '@coinbase/cds-common/visualizations/getProgressSize';
@@ -9,7 +11,11 @@ import { useTheme } from '../hooks/useTheme';
 import { Box } from '../layout/Box';
 import { HStack } from '../layout/HStack';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const ProgressBar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, forwardedRef) => {
+export const ProgressBar = /*#__PURE__*/memo(_ref => {
+  let {
+      ref: forwardedRef
+    } = _ref,
+    _props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const mergedProps = useComponentConfig('ProgressBar', _props);
   const {
     weight = 'normal',
@@ -36,10 +42,10 @@ export const ProgressBar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, fo
         toValue: progress
       }, animateProgressBaseSpec, {
         useNativeDriver: true
-      })))) == null || _Animated$timing.start(_ref => {
+      })))) == null || _Animated$timing.start(_ref2 => {
         let {
           finished
-        } = _ref;
+        } = _ref2;
         if (finished) onAnimationEnd == null || onAnimationEnd();
       });
     }
@@ -99,4 +105,4 @@ export const ProgressBar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, fo
       width: "100%"
     })
   });
-}));
+});

package/esm/visualizations/ProgressCircle.js

@@ -1,5 +1,7 @@
+const _excluded = ["ref"];
+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; }
 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 React, { memo, useEffect, useMemo, useRef } from 'react';
 import { Animated, StyleSheet } from 'react-native';
 import { Circle, G, Svg } from 'react-native-svg';
 import { animateProgressBaseSpec } from '@coinbase/cds-common/animation/progress';
@@ -59,7 +61,11 @@ const ProgressCircleInner = /*#__PURE__*/memo(_ref => {
     stroke: !visuallyDisabled ? theme.color[color] : theme.color.bgLineHeavy
   }), style || {}));
 });
-export const ProgressCircle = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, forwardedRef) => {
+export const ProgressCircle = /*#__PURE__*/memo(_ref3 => {
+  let {
+      ref: forwardedRef
+    } = _ref3,
+    _props = _objectWithoutPropertiesLoose(_ref3, _excluded);
   const mergedProps = useComponentConfig('ProgressCircle', _props);
   const {
     indeterminate,
@@ -104,12 +110,12 @@ export const ProgressCircle = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props,
   return /*#__PURE__*/_jsx(VisualizationContainer, {
     height: visSize,
     width: visSize,
-    children: _ref3 => {
+    children: _ref4 => {
       let {
         width,
         height,
         circleSize
-      } = _ref3;
+      } = _ref4;
       return /*#__PURE__*/_jsxs(Box, {
         ref: forwardedRef,
         accessible: true,
@@ -180,7 +186,7 @@ export const ProgressCircle = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props,
       });
     }
   });
-}));
+});
 const styleSheet = StyleSheet.create({
   svg: {
     flexGrow: 0,

package/esm/visualizations/ProgressIndicator.js

@@ -1,14 +1,15 @@
-const _excluded = ["progress", "style", "testID"];
+const _excluded = ["ref", "progress", "style", "testID"];
 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, useMemo } from 'react';
+import React, { memo, useMemo } from 'react';
 import { Animated, StyleSheet } from 'react-native';
 import { useTheme } from '../hooks/useTheme';
 import { Box } from '../layout/Box';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const PROGRESS_INDICATOR_WIDTH = 24;
-export const ProgressIndicator = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function ProgressIndicator(_ref, ref) {
+export const ProgressIndicator = /*#__PURE__*/memo(function ProgressIndicator(_ref) {
   let {
+      ref,
       progress,
       style,
       testID
@@ -44,7 +45,7 @@ export const ProgressIndicator = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(funct
       })
     })
   }));
-}));
+});
 const styles = StyleSheet.create({
   dash: {
     height: 2,

package/esm/visualizations/chart/CartesianChart.js

@@ -1,7 +1,7 @@
-const _excluded = ["series", "children", "layout", "animate", "enableScrubbing", "getScrubberAccessibilityLabel", "scrubberAccessibilityLabelStep", "xAxis", "yAxis", "inset", "onScrubberPositionChange", "legend", "legendPosition", "legendAccessibilityLabel", "width", "height", "style", "styles", "allowOverflowGestures", "fontFamilies", "fontProvider", "collapsable", "accessible", "accessibilityLabel", "accessibilityLiveRegion"];
+const _excluded = ["ref", "series", "children", "layout", "animate", "enableScrubbing", "getScrubberAccessibilityLabel", "scrubberAccessibilityLabelStep", "xAxis", "yAxis", "inset", "onScrubberPositionChange", "legend", "legendPosition", "legendAccessibilityLabel", "width", "height", "style", "styles", "allowOverflowGestures", "fontFamilies", "fontProvider", "collapsable", "accessible", "accessibilityLabel", "accessibilityLiveRegion"];
 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, useEffect, useMemo, useRef, useState } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Canvas, Skia } from '@shopify/react-native-skia';
 import { Box } from '../../layout/Box';
 import { Legend } from './legend/Legend';
@@ -61,8 +61,9 @@ function useChartLayout() {
   }, []);
   return [containerLayout, onContainerLayout];
 }
-export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
+export const CartesianChart = /*#__PURE__*/memo(_ref2 => {
   let {
+      ref,
       series,
       children,
       layout = 'vertical',
@@ -453,4 +454,4 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2,
       }))
     })
   });
-}));
+});

package/esm/visualizations/chart/PeriodSelector.js

@@ -1,8 +1,9 @@
-const _excluded = ["color", "label", "font", "hideDot", "style"],
-  _excluded2 = ["background", "activeBackground", "activeColor", "width", "justifyContent", "TabComponent", "TabsActiveIndicatorComponent"];
+const _excluded = ["ref", "color", "label", "font", "hideDot", "style"],
+  _excluded2 = ["ref"],
+  _excluded3 = ["ref", "background", "activeBackground", "activeColor", "width", "justifyContent", "TabComponent", "TabsActiveIndicatorComponent"];
 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, useMemo } from 'react';
+import React, { memo, useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
 import { useTheme } from '../../hooks/useTheme';
@@ -75,8 +76,9 @@ const styles = StyleSheet.create({
     alignItems: 'center'
   }
 });
-export const LiveTabLabel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
+export const LiveTabLabel = /*#__PURE__*/memo(_ref2 => {
   let {
+      ref,
       color = 'fgNegative',
       label = 'LIVE',
       font = 'label1',
@@ -106,17 +108,24 @@ export const LiveTabLabel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, re
       children: label
     }))]
   });
-}));
-const PeriodSelectorTab = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(SegmentedTab, _extends({
-  ref: ref,
-  font: "label1"
-}, props))));
+});
+const PeriodSelectorTab = /*#__PURE__*/memo(_ref3 => {
+  let {
+      ref
+    } = _ref3,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+  return /*#__PURE__*/_jsx(SegmentedTab, _extends({
+    ref: ref,
+    font: "label1"
+  }, props));
+});
 /**
  * PeriodSelector is a specialized version of SegmentedTabs optimized for chart period selection.
  * It provides transparent background, primary wash active state, and full-width layout by default.
  */
-export const PeriodSelector = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3, ref) => {
+export const PeriodSelector = /*#__PURE__*/memo(_ref4 => {
   let {
+      ref,
       background = 'transparent',
       activeBackground = 'bgPrimaryWash',
       activeColor = 'fgPrimary',
@@ -124,8 +133,8 @@ export const PeriodSelector = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3,
       justifyContent = 'space-between',
       TabComponent = PeriodSelectorTab,
       TabsActiveIndicatorComponent = PeriodSelectorActiveIndicator
-    } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+    } = _ref4,
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded3);
   return /*#__PURE__*/_jsx(SegmentedTabs, _extends({
     ref: ref,
     TabComponent: TabComponent,
@@ -136,4 +145,4 @@ export const PeriodSelector = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3,
     justifyContent: justifyContent,
     width: width
   }, props));
-}));
+});

package/esm/visualizations/chart/__stories__/ChartAccessibility.stories.js

@@ -1,8 +1,8 @@
-const _excluded = ["label"],
+const _excluded = ["ref", "label"],
   _excluded2 = ["style"];
 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; }
 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 { forwardRef, memo, useCallback, useMemo, useState } from 'react';
+import { memo, useCallback, useMemo, useState } from 'react';
 import { assets } from '@coinbase/cds-common/internal/data/assets';
 import { sparklineInteractiveData } from '@coinbase/cds-common/internal/visualizations/SparklineInteractiveData';
 import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
@@ -528,8 +528,9 @@ const AssetPriceWithDottedArea = /*#__PURE__*/memo(function AssetPriceWithDotted
     const date = formatDate(sparklineTimePeriodDataTimestamps[index]);
     return price + " " + date;
   }, [formatDate, formatPrice, sparklineTimePeriodDataTimestamps, sparklineTimePeriodDataValues]);
-  const BTCTab = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref4, ref) => {
+  const BTCTab = /*#__PURE__*/memo(_ref4 => {
     let {
+        ref,
         label
       } = _ref4,
       props = _objectWithoutPropertiesLoose(_ref4, _excluded);
@@ -547,7 +548,7 @@ const AssetPriceWithDottedArea = /*#__PURE__*/memo(function AssetPriceWithDotted
         children: label
       })
     }, props));
-  }));
+  });
   const BTCActiveIndicator = /*#__PURE__*/memo(_ref5 => {
     let {
         style

package/esm/visualizations/chart/__stories__/PeriodSelector.stories.js

@@ -1,8 +1,8 @@
-const _excluded = ["label"],
-  _excluded2 = ["label", "font", "hideDot", "style"];
+const _excluded = ["ref", "label"],
+  _excluded2 = ["ref", "label", "font", "hideDot", "style"];
 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; }
 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 { forwardRef, memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { ScrollView, View } from 'react-native';
 import { interpolateColor, runOnJS, useAnimatedReaction, useSharedValue, withSpring } from 'react-native-reanimated';
 import { assets } from '@coinbase/cds-common/internal/data/assets';
@@ -206,8 +206,9 @@ const BTCActiveExcludingLiveIndicator = /*#__PURE__*/memo(props => {
     background: backgroundColor
   }));
 });
-const BTCTab = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+const BTCTab = /*#__PURE__*/memo(_ref => {
   let {
+      ref,
       label
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -230,9 +231,10 @@ const BTCTab = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
     ref: ref,
     label: wrappedLabel
   }, props));
-}));
-const BTCLiveLabel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
+});
+const BTCLiveLabel = /*#__PURE__*/memo(_ref2 => {
   let {
+      ref,
       label = 'LIVE',
       font = 'label1',
       hideDot,
@@ -264,7 +266,7 @@ const BTCLiveLabel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
       children: label
     }))]
   });
-}));
+});
 const ColoredPeriodSelectorExample = () => {
   const tabs = [{
     id: '1H',

package/esm/visualizations/chart/area/AreaChart.js

@@ -1,11 +1,11 @@
-const _excluded = ["series", "stacked", "AreaComponent", "curve", "fillOpacity", "type", "connectNulls", "transition", "transitions", "LineComponent", "strokeWidth", "showXAxis", "showYAxis", "showLines", "lineType", "xAxis", "yAxis", "inset", "children"],
+const _excluded = ["ref", "series", "stacked", "AreaComponent", "curve", "fillOpacity", "type", "connectNulls", "transition", "transitions", "LineComponent", "strokeWidth", "showXAxis", "showYAxis", "showLines", "lineType", "xAxis", "yAxis", "inset", "children"],
   _excluded2 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "baseline", "id"],
   _excluded3 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "baseline", "id"],
   _excluded4 = ["id", "data", "label", "color", "xAxisId", "yAxisId", "opacity", "LineComponent", "stackId"],
   _excluded5 = ["id", "data", "label", "color", "xAxisId", "yAxisId", "fill", "fillOpacity", "stackId", "type"];
 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 { forwardRef, memo, useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { XAxis } from '../axis/XAxis';
 import { YAxis } from '../axis/YAxis';
 import { CartesianChart } from '../CartesianChart';
@@ -14,8 +14,9 @@ import { withBaselineDomain } from '../utils/axis';
 import { defaultStackId } from '../utils/chart';
 import { Area } from './Area';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const AreaChart = /*#__PURE__*/memo(_ref => {
   let {
+      ref,
       series,
       stacked,
       AreaComponent,
@@ -152,4 +153,4 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       }, otherPropsFromSeries), id);
     })), children]
   }));
-}));
+});

package/esm/visualizations/chart/bar/BarChart.js

@@ -1,9 +1,9 @@
-const _excluded = ["series", "stacked", "showXAxis", "showYAxis", "xAxis", "yAxis", "inset", "children", "barPadding", "BarComponent", "fillOpacity", "stroke", "strokeWidth", "borderRadius", "roundBaseline", "BarStackComponent", "stackGap", "barMinSize", "stackMinSize", "transitions", "transition"],
+const _excluded = ["ref", "series", "stacked", "showXAxis", "showYAxis", "xAxis", "yAxis", "inset", "children", "barPadding", "BarComponent", "fillOpacity", "stroke", "strokeWidth", "borderRadius", "roundBaseline", "BarStackComponent", "stackGap", "barMinSize", "stackMinSize", "transitions", "transition"],
   _excluded2 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "baseline", "id"],
   _excluded3 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "baseline", "id"];
 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 { forwardRef, memo, useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { XAxis } from '../axis/XAxis';
 import { YAxis } from '../axis/YAxis';
 import { CartesianChart } from '../CartesianChart';
@@ -11,8 +11,9 @@ import { withBaselineDomain } from '../utils/axis';
 import { defaultStackId } from '../utils/chart';
 import { BarPlot } from './BarPlot';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const BarChart = /*#__PURE__*/memo(_ref => {
   let {
+      ref,
       series: seriesProp,
       stacked,
       showXAxis,
@@ -122,4 +123,4 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       transitions: transitions
     }), children]
   }));
-}));
+});

package/esm/visualizations/chart/bar/PercentageBarChart.js

@@ -1,7 +1,7 @@
-const _excluded = ["series", "layout", "roundBaseline", "inset", "transitions", "xAxis", "yAxis", "testID", "children"];
+const _excluded = ["ref", "series", "layout", "roundBaseline", "inset", "transitions", "xAxis", "yAxis", "testID", "children"];
 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 { forwardRef, memo, useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { BarChart } from './BarChart';
 
 /** Extended series type that supports single data values. */
@@ -16,8 +16,9 @@ const unwrapSeriesDataValue = (data, groupIndex) => {
   const raw = typeof data === 'number' ? groupIndex === 0 ? data : null : data[groupIndex];
   return raw != null ? Math.max(0, raw) : null;
 };
-export const PercentageBarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const PercentageBarChart = /*#__PURE__*/memo(_ref => {
   let {
+      ref,
       series,
       layout = 'horizontal',
       roundBaseline = true,
@@ -95,5 +96,5 @@ export const PercentageBarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_re
   }, props, {
     children: children
   }));
-}));
+});
 PercentageBarChart.displayName = 'PercentageBarChart';

package/esm/visualizations/chart/legend/Legend.js

@@ -1,14 +1,15 @@
-const _excluded = ["flexDirection", "justifyContent", "alignItems", "flexWrap", "rowGap", "columnGap", "seriesIds", "EntryComponent", "ShapeComponent", "accessibilityLabel", "style", "styles"];
+const _excluded = ["ref", "flexDirection", "justifyContent", "alignItems", "flexWrap", "rowGap", "columnGap", "seriesIds", "EntryComponent", "ShapeComponent", "accessibilityLabel", "style", "styles"];
 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 { forwardRef, memo, useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { Box } from '../../../layout/Box';
 import { useCartesianChartContext } from '../ChartProvider';
 import { DefaultLegendEntry } from './DefaultLegendEntry';
 import { DefaultLegendShape } from './DefaultLegendShape';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const Legend = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const Legend = /*#__PURE__*/memo(_ref => {
   let {
+      ref,
       flexDirection = 'row',
       justifyContent = 'center',
       alignItems = flexDirection === 'row' ? 'center' : 'flex-start',
@@ -56,4 +57,4 @@ export const Legend = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
       }
     }, s.id))
   }));
-}));
+});

package/esm/visualizations/chart/line/LineChart.js

@@ -1,10 +1,10 @@
-const _excluded = ["series", "showArea", "areaType", "type", "LineComponent", "AreaComponent", "curve", "points", "strokeWidth", "strokeOpacity", "connectNulls", "transition", "transitions", "opacity", "showXAxis", "showYAxis", "xAxis", "yAxis", "inset", "scrubberAccessibilityLabelStep", "layout", "children"],
+const _excluded = ["ref", "series", "showArea", "areaType", "type", "LineComponent", "AreaComponent", "curve", "points", "strokeWidth", "strokeOpacity", "connectNulls", "transition", "transitions", "opacity", "showXAxis", "showYAxis", "xAxis", "yAxis", "inset", "scrubberAccessibilityLabelStep", "layout", "children"],
   _excluded2 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "baseline", "id"],
   _excluded3 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "baseline", "id"],
   _excluded4 = ["id", "data", "label", "color", "xAxisId", "yAxisId"];
 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 { forwardRef, memo, useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { XAxis } from '../axis/XAxis';
 import { YAxis } from '../axis/YAxis';
 import { CartesianChart } from '../CartesianChart';
@@ -17,8 +17,9 @@ const getDefaultScrubberAccessibilityStep = function (dataLength, sampleCount) {
   if (dataLength <= 0) return 1;
   return Math.max(1, Math.ceil(dataLength / sampleCount));
 };
-export const LineChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const LineChart = /*#__PURE__*/memo(_ref => {
   let {
+      ref,
       series,
       showArea,
       areaType,
@@ -147,4 +148,4 @@ export const LineChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       }, linePropsFromSeries), id);
     }), children]
   }));
-}));
+});

package/esm/visualizations/chart/line/__stories__/LineChart.stories.js

@@ -1,9 +1,9 @@
 const _excluded = ["dataX", "dataY"],
-  _excluded2 = ["label"],
+  _excluded2 = ["ref", "label"],
   _excluded3 = ["style"];
 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; }
 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 { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useAnimatedReaction, useDerivedValue, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';
 import { assets, ethBackground } from '@coinbase/cds-common/internal/data/assets';
 import { prices } from '@coinbase/cds-common/internal/data/prices';
@@ -823,8 +823,9 @@ function AssetPriceWithDottedArea() {
     // Register system fonts if available, otherwise Skia will use defaults
     return fontProvider;
   }, []);
-  const BTCTab = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref8, ref) => {
+  const BTCTab = /*#__PURE__*/memo(_ref8 => {
     let {
+        ref,
         label
       } = _ref8,
       props = _objectWithoutPropertiesLoose(_ref8, _excluded2);
@@ -842,7 +843,7 @@ function AssetPriceWithDottedArea() {
         children: label
       })
     }, props));
-  }));
+  });
   const BTCActiveIndicator = /*#__PURE__*/memo(_ref9 => {
     let {
         style