@coinbase/cds-mobile 9.6.0 → 9.6.2

package/esm/system/Pressable.js

@@ -1,15 +1,16 @@
-const _excluded = ["children", "disabled", "background", "block", "borderColor", "borderRadius", "borderWidth", "elevation", "contentStyle", "wrapperStyles", "blendStyles", "transparentWhileInactive", "transparentWhilePressed", "pin", "bordered", "borderedTop", "borderedBottom", "borderedStart", "borderedEnd", "borderedHorizontal", "borderedVertical", "dangerouslySetBackground", "display", "position", "overflow", "zIndex", "gap", "columnGap", "rowGap", "justifyContent", "alignContent", "alignItems", "alignSelf", "flexDirection", "flexWrap", "color", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "borderTopWidth", "borderEndWidth", "borderBottomWidth", "borderStartWidth", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "textAlign", "textDecorationStyle", "textDecorationLine", "textTransform", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd", "margin", "marginX", "marginY", "marginTop", "marginBottom", "marginStart", "marginEnd", "userSelect", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "aspectRatio", "top", "bottom", "left", "right", "transform", "flexBasis", "flexShrink", "flexGrow", "opacity", "disableDebounce", "feedback", "loading", "onPress", "onPressIn", "onPressOut", "noScaleOnPress", "style", "eventConfig", "analyticsId", "debounceTime", "testID"];
+const _excluded = ["ref", "children", "disabled", "background", "block", "borderColor", "borderRadius", "borderWidth", "elevation", "contentStyle", "wrapperStyles", "blendStyles", "transparentWhileInactive", "transparentWhilePressed", "pin", "bordered", "borderedTop", "borderedBottom", "borderedStart", "borderedEnd", "borderedHorizontal", "borderedVertical", "dangerouslySetBackground", "display", "position", "overflow", "zIndex", "gap", "columnGap", "rowGap", "justifyContent", "alignContent", "alignItems", "alignSelf", "flexDirection", "flexWrap", "color", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "borderTopWidth", "borderEndWidth", "borderBottomWidth", "borderStartWidth", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "textAlign", "textDecorationStyle", "textDecorationLine", "textTransform", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd", "margin", "marginX", "marginY", "marginTop", "marginBottom", "marginStart", "marginEnd", "userSelect", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "aspectRatio", "top", "bottom", "left", "right", "transform", "flexBasis", "flexShrink", "flexGrow", "opacity", "disableDebounce", "feedback", "loading", "onPress", "onPressIn", "onPressOut", "noScaleOnPress", "style", "eventConfig", "analyticsId", "debounceTime", "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, useCallback, useMemo, useRef, useState } from 'react';
+import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
 import { Pressable as NativePressable } from 'react-native';
 import { useEventHandler } from '@coinbase/cds-common/hooks/useEventHandler';
 import { usePressAnimation } from '../hooks/usePressAnimation';
 import { Haptics } from '../utils/haptics';
 import { Interactable } from './Interactable';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const Pressable = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Pressable(_ref, forwardedRef) {
+export const Pressable = /*#__PURE__*/memo(function Pressable(_ref) {
   let {
+      ref: forwardedRef,
       // Interactable
       children,
       disabled,
@@ -252,4 +253,4 @@ export const Pressable = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Pres
       children: children
     })
   }));
-}));
+});

package/esm/tabs/DefaultTab.js

@@ -1,7 +1,7 @@
-const _excluded = ["id", "label", "disabled", "onPress", "count", "max", "accessibilityLabel", "style", "testID", "color", "activeColor"];
+const _excluded = ["ref", "id", "label", "disabled", "onPress", "count", "max", "accessibilityLabel", "style", "testID", "color", "activeColor"];
 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 } from 'react';
+import React, { memo, useCallback } from 'react';
 import { Pressable } from 'react-native';
 import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
 import { accessibleOpacityDisabled } from '@coinbase/cds-common/tokens/interactable';
@@ -12,8 +12,9 @@ import { Text } from '../typography/Text';
 
 /** Optional dot count and a11y overrides for the default tab row. */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const DefaultTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+const DefaultTabComponent = /*#__PURE__*/memo(_ref => {
   let {
+      ref,
       id,
       label,
       disabled: disabledProp,
@@ -68,6 +69,6 @@ const DefaultTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref
       })]
     })
   }));
-}));
+});
 DefaultTabComponent.displayName = 'DefaultTab';
 export const DefaultTab = DefaultTabComponent;

package/esm/tabs/SegmentedTab.js

@@ -1,7 +1,8 @@
-const _excluded = ["id", "label", "disabled", "onPress", "color", "activeColor", "style", "aria-selected", "accessibilityRole", "testID", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight"];
+const _excluded = ["ref"],
+  _excluded2 = ["id", "label", "disabled", "onPress", "color", "activeColor", "style", "aria-selected", "accessibilityRole", "testID", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { forwardRef, memo, useCallback, useMemo } from 'react';
+import React, { memo, useCallback, useMemo } from 'react';
 import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
 import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
 import { accessibleOpacityDisabled } from '@coinbase/cds-common/tokens/interactable';
@@ -13,7 +14,11 @@ import { Text } from '../typography/Text';
 import { tabsSpringConfig } from './Tabs';
 import { jsx as _jsx } from "react/jsx-runtime";
 const AnimatedTextHeadline = Animated.createAnimatedComponent(Text);
-const SegmentedTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+const SegmentedTabComponent = /*#__PURE__*/memo(_ref => {
+  let {
+      ref
+    } = _ref,
+    _props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const mergedProps = useComponentConfig('SegmentedTab', _props);
   const {
       id,
@@ -32,7 +37,7 @@ const SegmentedTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props,
       fontWeight,
       lineHeight
     } = mergedProps,
-    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const {
     activeTab,
     updateActiveTab,
@@ -82,6 +87,6 @@ const SegmentedTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props,
       }) : label
     })
   }));
-}));
+});
 SegmentedTabComponent.displayName = 'SegmentedTab';
 export const SegmentedTab = SegmentedTabComponent;

package/esm/tabs/SegmentedTabs.js

@@ -1,7 +1,8 @@
-const _excluded = ["TabComponent", "TabsActiveIndicatorComponent", "activeBackground", "background", "borderRadius"];
+const _excluded = ["ref"],
+  _excluded2 = ["TabComponent", "TabsActiveIndicatorComponent", "activeBackground", "background", "borderRadius"];
 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 { useComponentConfig } from '../hooks/useComponentConfig';
 import { SegmentedTab } from './SegmentedTab';
 import { SegmentedTabsActiveIndicator } from './SegmentedTabsActiveIndicator';
@@ -10,7 +11,11 @@ import { Tabs } from './Tabs';
 // We do Partial/Pick to allow TabComponent and TabsActiveIndicatorComponent to be optional
 // We grab 'tabs' from the Omit allowing it to stay required
 import { jsx as _jsx } from "react/jsx-runtime";
-const SegmentedTabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+const SegmentedTabsComponent = /*#__PURE__*/memo(_ref => {
+  let {
+      ref
+    } = _ref,
+    _props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const mergedProps = useComponentConfig('SegmentedTabs', _props);
   const {
       TabComponent = SegmentedTab,
@@ -19,7 +24,7 @@ const SegmentedTabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props
       background = 'bgSecondary',
       borderRadius = 700
     } = mergedProps,
-    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   return /*#__PURE__*/_jsx(Tabs, _extends({
     ref: ref,
     TabComponent: TabComponent,
@@ -28,6 +33,6 @@ const SegmentedTabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props
     background: background,
     borderRadius: borderRadius
   }, props));
-}));
+});
 SegmentedTabsComponent.displayName = 'SegmentedTabs';
 export const SegmentedTabs = SegmentedTabsComponent;

package/esm/tabs/TabIndicator.js

@@ -1,15 +1,16 @@
-const _excluded = ["width", "x", "background", "testID"];
+const _excluded = ["ref", "width", "x", "background", "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 } from 'react';
+import React, { memo } from 'react';
 import { Animated } from 'react-native';
 import { Box } from '../layout/Box';
 import { useTabIndicatorStyles } from './hooks/useTabIndicatorStyles';
 import { jsx as _jsx } from "react/jsx-runtime";
 /** @deprecated Use DefaultTabsActiveIndicator instead. This will be removed in a future major release. */
 /** @deprecationExpectedRemoval v10 */
-export const TabIndicator = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
+export const TabIndicator = /*#__PURE__*/memo(_ref => {
   let {
+      ref: forwardedRef,
       width,
       x,
       background = 'bg',
@@ -44,5 +45,5 @@ export const TabIndicator = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, for
       })
     })
   }));
-}));
+});
 TabIndicator.displayName = 'TabIndicator';

package/esm/tabs/TabNavigation.js

@@ -1,7 +1,7 @@
-const _excluded = ["tabs", "value", "variant", "testID", "background", "onChange", "Component", "gap", "role"];
+const _excluded = ["ref", "tabs", "value", "variant", "testID", "background", "onChange", "Component", "gap", "role"];
 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, useState } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { ScrollView, View } from 'react-native';
 import { isDevelopment } from '@coinbase/cds-utils';
 import { useHorizontallyScrollingPressables } from '../hooks/useHorizontallyScrollingPressables';
@@ -33,8 +33,9 @@ import { TabLabel } from './TabLabel';
  * @deprecationExpectedRemoval v10
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const TabNavigationComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
+const TabNavigationComponent = /*#__PURE__*/memo(_ref => {
   let {
+      ref: forwardedRef,
       tabs,
       value = tabs[0].id,
       variant = 'primary',
@@ -160,7 +161,7 @@ const TabNavigationComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref,
       })
     }), isScrollContentOverflowing && isScrollContentOffscreenRight ? /*#__PURE__*/_jsx(OverflowGradient, {}) : null]
   }));
-}));
+});
 
 /**
  * TabNavigation renders a horizontal, tab-based navigation bar.

package/esm/tabs/Tabs.js

@@ -1,10 +1,11 @@
 const _excluded = ["id", "registerRef"],
-  _excluded2 = ["tabs", "TabComponent", "TabsActiveIndicatorComponent", "activeBackground", "color", "activeColor", "activeTab", "disabled", "onChange", "styles", "style", "role", "position", "alignSelf", "opacity", "onActiveTabElementChange", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "testID"],
-  _excluded3 = ["id", "Component"],
-  _excluded4 = ["activeTabRect", "position", "style", "testID"];
+  _excluded2 = ["ref"],
+  _excluded3 = ["tabs", "TabComponent", "TabsActiveIndicatorComponent", "activeBackground", "color", "activeColor", "activeTab", "disabled", "onChange", "styles", "style", "role", "position", "alignSelf", "opacity", "onActiveTabElementChange", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "testID"],
+  _excluded4 = ["id", "Component"],
+  _excluded5 = ["activeTabRect", "position", "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, useCallback, useImperativeHandle, useRef, useState } from 'react';
+import React, { memo, useCallback, useImperativeHandle, useRef, useState } from 'react';
 import { View } from 'react-native';
 import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
 import { useRefMap } from '@coinbase/cds-common/hooks/useRefMap';
@@ -38,7 +39,11 @@ export const tabsSpringConfig = {
   damping: 10,
   overshootClamping: true
 };
-const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+const TabsComponent = /*#__PURE__*/memo(_ref2 => {
+  let {
+      ref
+    } = _ref2,
+    _props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
   const mergedProps = useComponentConfig('Tabs', _props);
   const {
       tabs,
@@ -64,7 +69,7 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
       borderBottomRightRadius,
       testID
     } = mergedProps,
-    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded3);
   const tabsContainerRef = useRef(null);
   useImperativeHandle(ref, () => tabsContainerRef.current, []); // merge internal ref to forwarded ref
 
@@ -130,7 +135,7 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
             id,
             Component: CustomTabComponent
           } = tabProps,
-          tabRest = _objectWithoutPropertiesLoose(tabProps, _excluded3);
+          tabRest = _objectWithoutPropertiesLoose(tabProps, _excluded4);
         const RenderedTab = CustomTabComponent != null ? CustomTabComponent : TabComponent;
         const renderedTabProps = _extends({
           activeColor,
@@ -147,17 +152,17 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
       })]
     })
   }));
-}));
+});
 TabsComponent.displayName = 'Tabs';
 export const Tabs = TabsComponent;
-export const TabsActiveIndicator = _ref2 => {
+export const TabsActiveIndicator = _ref3 => {
   let {
       activeTabRect,
       position = 'absolute',
       style,
       testID = 'tabs-active-indicator'
-    } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded4);
+    } = _ref3,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded5);
   const previousActiveTabRect = useRef(activeTabRect);
   const newActiveTabRect = {
     x: activeTabRect.x,

package/esm/tag/Tag.js

@@ -1,7 +1,8 @@
-const _excluded = ["children", "intent", "emphasis", "colorScheme", "background", "color", "start", "startIcon", "startIconActive", "end", "endIcon", "endIconActive", "alignItems", "flexDirection", "gap", "justifyContent", "paddingX", "paddingY", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "testID"];
+const _excluded = ["ref"],
+  _excluded2 = ["children", "intent", "emphasis", "colorScheme", "background", "color", "start", "startIcon", "startIconActive", "end", "endIcon", "endIconActive", "alignItems", "flexDirection", "gap", "justifyContent", "paddingX", "paddingY", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "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 } from 'react';
+import React, { memo } from 'react';
 import { tagBorderRadiusMap, tagEmphasisColorMap, tagFontMap, tagHorizontalSpacing } from '@coinbase/cds-common/tokens/tags';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
@@ -9,7 +10,11 @@ import { Icon } from '../icons/Icon';
 import { Box } from '../layout/Box';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const Tag = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, forwardedRef) => {
+export const Tag = /*#__PURE__*/memo(_ref => {
+  let {
+      ref: forwardedRef
+    } = _ref,
+    _props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const mergedProps = useComponentConfig('Tag', _props);
   const {
       children,
@@ -37,7 +42,7 @@ export const Tag = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, forwardedR
       lineHeight,
       testID = 'cds-tag'
     } = mergedProps,
-    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const theme = useTheme();
   const {
     background,
@@ -84,4 +89,4 @@ export const Tag = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, forwardedR
       size: "xs"
     }) : null]
   }));
-}));
+});

package/esm/tour/DefaultTourStepArrow.js

@@ -1,9 +1,10 @@
-import React, { forwardRef, memo, useMemo } from 'react';
+import React, { memo, useMemo } from 'react';
 import { Box } from '../layout/Box';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const DefaultTourStepArrow = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const DefaultTourStepArrow = /*#__PURE__*/memo(_ref => {
   var _arrow$centerOffset;
   let {
+    ref,
     placement,
     arrow,
     style
@@ -34,4 +35,4 @@ export const DefaultTourStepArrow = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_
     testID: "tour-step-arrow",
     width: 24
   });
-}));
+});

package/esm/tour/Tour.js

@@ -49,7 +49,11 @@ const TourComponent = _props => {
   const defaultTourStepShiftPadding = theme.space[4];
   const tourStepArrowRef = useRef(null);
   const RenderedTourStep = activeTourStep == null ? void 0 : activeTourStep.Component;
-  // activeTourStep.ArrowComponent references old, deprecated type in cds-common
+  // activeTourStep.ArrowComponent is typed by cds-common, which still uses the legacy
+  // `React.ForwardRefExoticComponent<…>` shape (kept intact because cds-web has not yet
+  // migrated off `React.forwardRef`). Mobile has migrated to React 19's ref-as-prop callable
+  // shape; runtime is equivalent under React 19. The cast also bridges the platform-agnostic
+  // style prop in common (`Record<string, string | number>`) with mobile's `StyleProp<ViewStyle>`.
   const RenderedTourStepArrow = (_ref = activeTourStep == null ? void 0 : activeTourStep.ArrowComponent) != null ? _ref : TourStepArrowComponent;
   const [animation, animationApi] = useSpring(() => ({
     from: {

package/esm/typography/Text.js

@@ -1,7 +1,7 @@
-const _excluded = ["children", "style", "animated", "disabled", "mono", "underline", "tabularNumbers", "numberOfLines", "ellipsize", "noWrap", "testID", "dangerouslySetColor", "dangerouslySetBackground", "display", "position", "overflow", "zIndex", "gap", "columnGap", "rowGap", "justifyContent", "alignContent", "alignItems", "alignSelf", "flexDirection", "flexWrap", "color", "background", "borderColor", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "borderTopWidth", "borderEndWidth", "borderBottomWidth", "borderStartWidth", "elevation", "borderWidth", "borderRadius", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "align", "textDecorationStyle", "textDecorationLine", "textTransform", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd", "margin", "marginX", "marginY", "marginTop", "marginBottom", "marginStart", "marginEnd", "userSelect", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "aspectRatio", "top", "bottom", "left", "right", "transform", "flexBasis", "flexShrink", "flexGrow", "opacity", "renderEmptyNode", "accessibilityRole"];
+const _excluded = ["ref", "children", "style", "animated", "disabled", "mono", "underline", "tabularNumbers", "numberOfLines", "ellipsize", "noWrap", "testID", "dangerouslySetColor", "dangerouslySetBackground", "display", "position", "overflow", "zIndex", "gap", "columnGap", "rowGap", "justifyContent", "alignContent", "alignItems", "alignSelf", "flexDirection", "flexWrap", "color", "background", "borderColor", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "borderTopWidth", "borderEndWidth", "borderBottomWidth", "borderStartWidth", "elevation", "borderWidth", "borderRadius", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "align", "textDecorationStyle", "textDecorationLine", "textTransform", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd", "margin", "marginX", "marginY", "marginTop", "marginBottom", "marginStart", "marginEnd", "userSelect", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "aspectRatio", "top", "bottom", "left", "right", "transform", "flexBasis", "flexShrink", "flexGrow", "opacity", "renderEmptyNode", "accessibilityRole"];
 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, Text as NativeText } from 'react-native';
 import { accessibleOpacityDisabled } from '@coinbase/cds-common/tokens/interactable';
 import { useTextAlign } from '../hooks/useTextAlign';
@@ -23,9 +23,10 @@ const styles = StyleSheet.create({
   }
 });
 const HEADER_FONTS = new Set(['display1', 'display2', 'display3', 'title1', 'title2']);
-export const Text = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const Text = /*#__PURE__*/memo(_ref => {
   var _theme$fontFamilyMono;
   let {
+      ref,
       children,
       style,
       animated,
@@ -204,5 +205,5 @@ export const Text = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   }, props, {
     children: children
   }));
-}));
+});
 Text.displayName = 'Text';

package/esm/typography/TextBody.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="body"` instead. This will be removed in a future major release.
  * @deprecationExpectedRemoval v10
  */
-export const TextBody = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const TextBody = /*#__PURE__*/memo(_ref => {
   let {
+      ref,
       font = 'body'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -27,4 +28,4 @@ export const TextBody = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
     ref: ref,
     font: font
   }, props));
-}));
+});

package/esm/typography/TextCaption.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="caption"` instead. This will be removed in a future major release.
  * @deprecationExpectedRemoval v10
  */
-export const TextCaption = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const TextCaption = /*#__PURE__*/memo(_ref => {
   let {
+      ref,
       font = 'caption'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -27,4 +28,4 @@ export const TextCaption = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
     ref: ref,
     font: font
   }, props));
-}));
+});

package/esm/typography/TextDisplay1.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="display1"` instead. This will be removed in a future major release.
  * @deprecationExpectedRemoval v10
  */
-export const TextDisplay1 = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const TextDisplay1 = /*#__PURE__*/memo(_ref => {
   let {
+      ref,
       accessibilityRole = 'header',
       font = 'display1'
     } = _ref,
@@ -29,4 +30,4 @@ export const TextDisplay1 = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref
     accessibilityRole: accessibilityRole,
     font: font
   }, props));
-}));
+});

package/esm/typography/TextDisplay2.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="display2"` instead. This will be removed in a future major release.
  * @deprecationExpectedRemoval v10
  */
-export const TextDisplay2 = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const TextDisplay2 = /*#__PURE__*/memo(_ref => {
   let {
+      ref,
       accessibilityRole = 'header',
       font = 'display2'
     } = _ref,
@@ -29,4 +30,4 @@ export const TextDisplay2 = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref
     accessibilityRole: accessibilityRole,
     font: font
   }, props));
-}));
+});

package/esm/typography/TextDisplay3.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="display3"` instead. This will be removed in a future major release.
  * @deprecationExpectedRemoval v10
  */
-export const TextDisplay3 = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const TextDisplay3 = /*#__PURE__*/memo(_ref => {
   let {
+      ref,
       accessibilityRole = 'header',
       font = 'display3'
     } = _ref,
@@ -29,4 +30,4 @@ export const TextDisplay3 = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref
     accessibilityRole: accessibilityRole,
     font: font
   }, props));
-}));
+});

package/esm/typography/TextFallback.js

@@ -31,11 +31,12 @@ export const TextFallback = /*#__PURE__*/memo(function TextFallback(_ref) {
       paddingVertical: Math.max(lineHeightOffset, 0) / 2
     };
   }, [font, fontScale, theme]);
+  const fallbackStyle = useMemo(() => [{
+    paddingTop: paddingVertical,
+    paddingBottom: paddingVertical
+  }, style], [paddingVertical, style]);
   return /*#__PURE__*/_jsx(Fallback, _extends({
     height: height,
-    style: [{
-      paddingTop: paddingVertical,
-      paddingBottom: paddingVertical
-    }, style]
+    style: fallbackStyle
   }, props));
 });

package/esm/typography/TextHeadline.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="headline"` instead. This will be removed in a future major release.
  * @deprecationExpectedRemoval v10
  */
-export const TextHeadline = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const TextHeadline = /*#__PURE__*/memo(_ref => {
   let {
+      ref,
       font = 'headline'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -27,4 +28,4 @@ export const TextHeadline = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref
     ref: ref,
     font: font
   }, props));
-}));
+});

package/esm/typography/TextInherited.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="inherit"` instead. This will be removed in a future major release.
  * @deprecationExpectedRemoval v10
  */
-export const TextInherited = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const TextInherited = /*#__PURE__*/memo(_ref => {
   let {
+      ref,
       font = 'inherit'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -27,4 +28,4 @@ export const TextInherited = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, re
     ref: ref,
     font: font
   }, props));
-}));
+});

package/esm/typography/TextLabel1.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="label1"` instead. This will be removed in a future major release.
  * @deprecationExpectedRemoval v10
  */
-export const TextLabel1 = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+export const TextLabel1 = /*#__PURE__*/memo(_ref => {
   let {
+      ref,
       font = 'label1'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -27,4 +28,4 @@ export const TextLabel1 = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
     ref: ref,
     font: font
   }, props));
-}));
+});