@coinbase/cds-mobile 9.0.0-rc.1 → 9.0.0-rc.3

package/esm/tabs/DefaultTab.js

@@ -1,7 +1,7 @@
-const _excluded = ["id", "label", "disabled", "onPress", "count", "max", "accessibilityLabel", "style", "testID"];
+const _excluded = ["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, useMemo } from 'react';
+import React, { forwardRef, 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';
@@ -22,7 +22,9 @@ const DefaultTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref
       max,
       accessibilityLabel,
       style,
-      testID
+      testID,
+      color = 'fg',
+      activeColor = 'fgPrimary'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
@@ -37,10 +39,6 @@ const DefaultTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref
     updateActiveTab(id);
     onPress == null || onPress(id, event);
   }, [id, onPress, updateActiveTab]);
-  const labelPaddingStyle = useMemo(() => ({
-    paddingTop: theme.space[2],
-    paddingBottom: theme.space[2] - 2
-  }), [theme.space]);
   return /*#__PURE__*/_jsx(Pressable, _extends({
     ref: ref,
     accessibilityLabel: accessibilityLabel,
@@ -60,9 +58,9 @@ const DefaultTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref
       alignItems: "center",
       gap: 0.5,
       children: [/*#__PURE__*/_jsx(Text, {
-        color: isActive ? 'fgPrimary' : 'fg',
+        color: isActive ? activeColor : color,
         font: "headline",
-        style: labelPaddingStyle,
+        paddingY: 2,
         children: label
       }), !!count && /*#__PURE__*/_jsx(DotCount, {
         count: count,

package/esm/tabs/DefaultTabsActiveIndicator.js

@@ -7,8 +7,7 @@ import { Box } from '../layout';
 import { tabsSpringConfig } from './Tabs';
 
 /**
- * Default underline-style indicator for mobile `Tabs`. Pass as
- * `TabsActiveIndicatorComponent={DefaultTabsActiveIndicator}` with `TabComponent={DefaultTab}`.
+ * Default underline-style indicator for mobile `Tabs`.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 const AnimatedBox = Animated.createAnimatedComponent(Box);

package/esm/tabs/Tabs.js

@@ -1,5 +1,5 @@
 const _excluded = ["id", "registerRef"],
-  _excluded2 = ["tabs", "TabComponent", "TabsActiveIndicatorComponent", "activeBackground", "activeTab", "disabled", "onChange", "styles", "style", "role", "position", "alignSelf", "opacity", "onActiveTabElementChange", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "testID"],
+  _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"];
 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); }
@@ -44,6 +44,8 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
       TabComponent = DefaultTab,
       TabsActiveIndicatorComponent = DefaultTabsActiveIndicator,
       activeBackground,
+      color,
+      activeColor,
       activeTab,
       disabled,
       onChange,
@@ -102,6 +104,7 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
     borderRadius: borderRadius,
     borderTopLeftRadius: borderTopLeftRadius,
     borderTopRightRadius: borderTopRightRadius,
+    color: color,
     onLayout: updateActiveTabRect,
     opacity: opacity != null ? opacity : disabled ? accessibleOpacityDisabled : 1,
     position: position,
@@ -121,20 +124,23 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
         borderTopRightRadius: borderTopRightRadius,
         style: styles == null ? void 0 : styles.activeIndicator,
         testID: testID ? testID + "-active-indicator" : undefined
-      }), tabs.map(_ref2 => {
-        let {
+      }), tabs.map(tabProps => {
+        const {
             id,
             Component: CustomTabComponent
-          } = _ref2,
-          props = _objectWithoutPropertiesLoose(_ref2, _excluded3);
+          } = tabProps,
+          tabRest = _objectWithoutPropertiesLoose(tabProps, _excluded3);
         const RenderedTab = CustomTabComponent != null ? CustomTabComponent : TabComponent;
+        const renderedTabProps = _extends({
+          activeColor,
+          color,
+          id,
+          style: styles == null ? void 0 : styles.tab
+        }, tabRest);
         return /*#__PURE__*/_jsx(TabContainer, {
           id: id,
           registerRef: registerRef,
-          children: /*#__PURE__*/_jsx(RenderedTab, _extends({
-            id: id,
-            style: styles == null ? void 0 : styles.tab
-          }, props))
+          children: /*#__PURE__*/_jsx(RenderedTab, _extends({}, renderedTabProps))
         }, id);
       })]
     })
@@ -142,14 +148,14 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
 }));
 TabsComponent.displayName = 'Tabs';
 export const Tabs = TabsComponent;
-export const TabsActiveIndicator = _ref3 => {
+export const TabsActiveIndicator = _ref2 => {
   let {
       activeTabRect,
       position = 'absolute',
       style,
       testID = 'tabs-active-indicator'
-    } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded4);
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded4);
   const previousActiveTabRect = useRef(activeTabRect);
   const newActiveTabRect = {
     x: activeTabRect.x,

package/esm/tabs/__stories__/SegmentedTabs.stories.js

@@ -291,7 +291,14 @@ const SegmentedTabsScreen = () => /*#__PURE__*/_jsxs(ExampleScreen, {
     defaultActiveTab: basicSegments[0],
     tabs: basicSegments,
     title: "Border Radius"
-  }), /*#__PURE__*/_jsx(CustomStylesExample, {}), /*#__PURE__*/_jsx(IconLabelsExample, {})]
+  }), /*#__PURE__*/_jsx(CustomStylesExample, {}), /*#__PURE__*/_jsx(IconLabelsExample, {}), /*#__PURE__*/_jsx(SegmentedTabsExample, {
+    activeBackground: "bgPositiveWash",
+    activeColor: "bgPositive",
+    color: "fgMuted",
+    defaultActiveTab: basicSegments[0],
+    tabs: basicSegments,
+    title: "Label Colors"
+  })]
 });
 const CustomStylesExample = () => {
   const theme = useTheme();

package/esm/tabs/__stories__/Tabs.stories.js

@@ -97,7 +97,6 @@ const TabsWithPanelsExample = () => {
         children: "Pair tab buttons with content regions that follow the active tab (see panel below)."
       }), /*#__PURE__*/_jsx(Tabs, {
         TabComponent: DefaultTab,
-        TabsActiveIndicatorComponent: DefaultTabsActiveIndicator,
         accessibilityLabel: "Content sections",
         activeBackground: "bg",
         activeTab: activeTab,

package/esm/tag/Tag.js

@@ -1,4 +1,4 @@
-const _excluded = ["children", "intent", "emphasis", "colorScheme", "background", "color", "start", "startIcon", "startIconActive", "end", "endIcon", "endIconActive", "alignItems", "flexDirection", "gap", "justifyContent", "paddingY", "testID"];
+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"];
 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';
@@ -6,7 +6,7 @@ import { tagBorderRadiusMap, tagEmphasisColorMap, tagFontMap, tagHorizontalSpaci
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
 import { Icon } from '../icons/Icon';
-import { Box } from '../layout';
+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) => {
@@ -28,7 +28,13 @@ export const Tag = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, forwardedR
       flexDirection = 'row',
       gap = 0.5,
       justifyContent = 'center',
+      paddingX,
       paddingY = 0.25,
+      font,
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight,
       testID = 'cds-tag'
     } = mergedProps,
     props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
@@ -47,7 +53,7 @@ export const Tag = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, forwardedR
     flexDirection: flexDirection,
     gap: gap,
     justifyContent: justifyContent,
-    paddingX: tagHorizontalSpacing[intent],
+    paddingX: paddingX != null ? paddingX : tagHorizontalSpacing[intent],
     paddingY: paddingY,
     style: {
       backgroundColor
@@ -60,7 +66,11 @@ export const Tag = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, forwardedR
       name: startIcon,
       size: "xs"
     }) : null, /*#__PURE__*/_jsx(Text, {
-      font: tagFontMap[intent],
+      font: font != null ? font : tagFontMap[intent],
+      fontFamily: fontFamily,
+      fontSize: fontSize,
+      fontWeight: fontWeight,
+      lineHeight: lineHeight,
       numberOfLines: 1,
       style: {
         color

package/esm/themes/coinbaseHighContrastTheme.js

@@ -564,5 +564,37 @@ export const coinbaseHighContrastTheme = {
       shadowOpacity: 0.12,
       shadowRadius: 24
     }
+  },
+  lightIllustrationColor: {
+    primary: "rgb(" + lightSpectrum.blue60 + ")",
+    black: "rgb(" + lightSpectrum.gray100 + ")",
+    white: "rgb(" + lightSpectrum.gray0 + ")",
+    gray: "rgb(" + lightSpectrum.gray20 + ")",
+    gray2: "rgb(10, 11, 15)",
+    gray3: "rgb(206, 210, 220)",
+    positive: "rgb(" + lightSpectrum.green30 + ")",
+    negative: "rgb(" + lightSpectrum.red50 + ")",
+    accent1: "rgb(255, 210, 0)",
+    accent2: "rgb(" + lightSpectrum.teal15 + ")",
+    accent3: "rgb(" + lightSpectrum.orange40 + ")",
+    accent4: "rgb(" + lightSpectrum.blue20 + ")",
+    invert: "rgb(10, 11, 14)",
+    invert2: "rgb(255, 255, 254)"
+  },
+  darkIllustrationColor: {
+    primary: "rgb(" + darkSpectrum.blue70 + ")",
+    black: "rgb(" + darkSpectrum.gray0 + ")",
+    white: "rgb(" + darkSpectrum.gray100 + ")",
+    gray: "rgb(" + darkSpectrum.gray30 + ")",
+    gray2: "rgb(" + darkSpectrum.gray30 + ")",
+    gray3: "rgb(" + darkSpectrum.gray100 + ")",
+    positive: "rgb(" + darkSpectrum.green70 + ")",
+    negative: "rgb(" + darkSpectrum.red60 + ")",
+    accent1: "rgb(236, 208, 105)",
+    accent2: "rgb(" + darkSpectrum.teal80 + ")",
+    accent3: "rgb(" + darkSpectrum.orange60 + ")",
+    accent4: "rgb(" + darkSpectrum.blue80 + ")",
+    invert: "rgb(" + darkSpectrum.gray100 + ")",
+    invert2: "rgb(" + darkSpectrum.gray50 + ")"
   }
 };

package/esm/themes/coinbaseTheme.js

@@ -316,7 +316,7 @@ export const coinbaseTheme = {
     bgNegativeWash: "rgb(" + lightSpectrum.red0 + ")",
     bgPositive: "rgb(" + lightSpectrum.green60 + ")",
     bgPositiveWash: "rgb(" + lightSpectrum.green0 + ")",
-    bgWarning: "rgb(" + lightSpectrum.orange40 + ")",
+    bgWarning: "rgb(" + lightSpectrum.orange60 + ")",
     bgWarningWash: "rgb(" + lightSpectrum.orange0 + ")",
     currentColor: 'currentColor',
     // Line
@@ -367,7 +367,7 @@ export const coinbaseTheme = {
     bgNegativeWash: "rgb(" + darkSpectrum.red0 + ")",
     bgPositive: "rgb(" + darkSpectrum.green60 + ")",
     bgPositiveWash: "rgb(" + darkSpectrum.green0 + ")",
-    bgWarning: "rgb(" + darkSpectrum.yellow50 + ")",
+    bgWarning: "rgb(" + darkSpectrum.orange60 + ")",
     bgWarningWash: "rgb(" + darkSpectrum.orange0 + ")",
     currentColor: 'currentColor',
     // Line
@@ -564,5 +564,37 @@ export const coinbaseTheme = {
       shadowOpacity: 0.12,
       shadowRadius: 24
     }
+  },
+  lightIllustrationColor: {
+    primary: "rgb(" + lightSpectrum.blue60 + ")",
+    black: "rgb(" + lightSpectrum.gray100 + ")",
+    white: "rgb(" + lightSpectrum.gray0 + ")",
+    gray: "rgb(" + lightSpectrum.gray20 + ")",
+    gray2: "rgb(10, 11, 15)",
+    gray3: "rgb(206, 210, 220)",
+    positive: "rgb(" + lightSpectrum.green30 + ")",
+    negative: "rgb(" + lightSpectrum.red50 + ")",
+    accent1: "rgb(255, 210, 0)",
+    accent2: "rgb(" + lightSpectrum.teal15 + ")",
+    accent3: "rgb(" + lightSpectrum.orange40 + ")",
+    accent4: "rgb(" + lightSpectrum.blue20 + ")",
+    invert: "rgb(10, 11, 14)",
+    invert2: "rgb(255, 255, 254)"
+  },
+  darkIllustrationColor: {
+    primary: "rgb(" + darkSpectrum.blue70 + ")",
+    black: "rgb(" + darkSpectrum.gray0 + ")",
+    white: "rgb(" + darkSpectrum.gray100 + ")",
+    gray: "rgb(" + darkSpectrum.gray30 + ")",
+    gray2: "rgb(" + darkSpectrum.gray30 + ")",
+    gray3: "rgb(" + darkSpectrum.gray100 + ")",
+    positive: "rgb(" + darkSpectrum.green70 + ")",
+    negative: "rgb(" + darkSpectrum.red60 + ")",
+    accent1: "rgb(236, 208, 105)",
+    accent2: "rgb(" + darkSpectrum.teal80 + ")",
+    accent3: "rgb(" + darkSpectrum.orange60 + ")",
+    accent4: "rgb(" + darkSpectrum.blue80 + ")",
+    invert: "rgb(" + darkSpectrum.gray100 + ")",
+    invert2: "rgb(" + darkSpectrum.gray50 + ")"
   }
 };

package/esm/themes/defaultHighContrastTheme.js

@@ -564,5 +564,37 @@ export const defaultHighContrastTheme = {
       shadowOpacity: 0.12,
       shadowRadius: 24
     }
+  },
+  lightIllustrationColor: {
+    primary: "rgb(" + lightSpectrum.blue60 + ")",
+    black: "rgb(" + lightSpectrum.gray100 + ")",
+    white: "rgb(" + lightSpectrum.gray0 + ")",
+    gray: "rgb(" + lightSpectrum.gray20 + ")",
+    gray2: "rgb(10, 11, 15)",
+    gray3: "rgb(206, 210, 220)",
+    positive: "rgb(" + lightSpectrum.green30 + ")",
+    negative: "rgb(" + lightSpectrum.red50 + ")",
+    accent1: "rgb(255, 210, 0)",
+    accent2: "rgb(" + lightSpectrum.teal15 + ")",
+    accent3: "rgb(" + lightSpectrum.orange40 + ")",
+    accent4: "rgb(" + lightSpectrum.blue20 + ")",
+    invert: "rgb(10, 11, 14)",
+    invert2: "rgb(255, 255, 254)"
+  },
+  darkIllustrationColor: {
+    primary: "rgb(" + darkSpectrum.blue70 + ")",
+    black: "rgb(" + darkSpectrum.gray0 + ")",
+    white: "rgb(" + darkSpectrum.gray100 + ")",
+    gray: "rgb(" + darkSpectrum.gray30 + ")",
+    gray2: "rgb(" + darkSpectrum.gray30 + ")",
+    gray3: "rgb(" + darkSpectrum.gray100 + ")",
+    positive: "rgb(" + darkSpectrum.green70 + ")",
+    negative: "rgb(" + darkSpectrum.red60 + ")",
+    accent1: "rgb(236, 208, 105)",
+    accent2: "rgb(" + darkSpectrum.teal80 + ")",
+    accent3: "rgb(" + darkSpectrum.orange60 + ")",
+    accent4: "rgb(" + darkSpectrum.blue80 + ")",
+    invert: "rgb(" + darkSpectrum.gray100 + ")",
+    invert2: "rgb(" + darkSpectrum.gray50 + ")"
   }
 };

package/esm/themes/defaultTheme.js

@@ -316,7 +316,7 @@ export const defaultTheme = {
     bgNegativeWash: "rgb(" + lightSpectrum.red0 + ")",
     bgPositive: "rgb(" + lightSpectrum.green60 + ")",
     bgPositiveWash: "rgb(" + lightSpectrum.green0 + ")",
-    bgWarning: "rgb(" + lightSpectrum.orange40 + ")",
+    bgWarning: "rgb(" + lightSpectrum.orange60 + ")",
     bgWarningWash: "rgb(" + lightSpectrum.orange0 + ")",
     currentColor: 'currentColor',
     // Line
@@ -367,7 +367,7 @@ export const defaultTheme = {
     bgNegativeWash: "rgb(" + darkSpectrum.red0 + ")",
     bgPositive: "rgb(" + darkSpectrum.green60 + ")",
     bgPositiveWash: "rgb(" + darkSpectrum.green0 + ")",
-    bgWarning: "rgb(" + darkSpectrum.yellow50 + ")",
+    bgWarning: "rgb(" + darkSpectrum.orange60 + ")",
     bgWarningWash: "rgb(" + darkSpectrum.orange0 + ")",
     currentColor: 'currentColor',
     // Line
@@ -395,6 +395,38 @@ export const defaultTheme = {
     // Transparent
     transparent: "rgba(" + darkSpectrum.gray0 + ",0)"
   },
+  lightIllustrationColor: {
+    primary: "rgb(" + lightSpectrum.blue60 + ")",
+    black: "rgb(" + lightSpectrum.gray100 + ")",
+    white: "rgb(" + lightSpectrum.gray0 + ")",
+    gray: "rgb(" + lightSpectrum.gray20 + ")",
+    gray2: "rgb(10, 11, 15)",
+    gray3: "rgb(206, 210, 220)",
+    positive: "rgb(" + lightSpectrum.green30 + ")",
+    negative: "rgb(" + lightSpectrum.red50 + ")",
+    accent1: "rgb(255, 210, 0)",
+    accent2: "rgb(" + lightSpectrum.teal15 + ")",
+    accent3: "rgb(" + lightSpectrum.orange40 + ")",
+    accent4: "rgb(" + lightSpectrum.blue20 + ")",
+    invert: "rgb(10, 11, 14)",
+    invert2: "rgb(255, 255, 254)"
+  },
+  darkIllustrationColor: {
+    primary: "rgb(" + darkSpectrum.blue70 + ")",
+    black: "rgb(" + darkSpectrum.gray0 + ")",
+    white: "rgb(" + darkSpectrum.gray100 + ")",
+    gray: "rgb(" + darkSpectrum.gray30 + ")",
+    gray2: "rgb(" + darkSpectrum.gray30 + ")",
+    gray3: "rgb(" + darkSpectrum.gray100 + ")",
+    positive: "rgb(" + darkSpectrum.green70 + ")",
+    negative: "rgb(" + darkSpectrum.red60 + ")",
+    accent1: "rgb(236, 208, 105)",
+    accent2: "rgb(" + darkSpectrum.teal80 + ")",
+    accent3: "rgb(" + darkSpectrum.orange60 + ")",
+    accent4: "rgb(" + darkSpectrum.blue80 + ")",
+    invert: "rgb(" + darkSpectrum.gray100 + ")",
+    invert2: "rgb(" + darkSpectrum.gray50 + ")"
+  },
   space: {
     '0': 0,
     '0.25': 2,

package/esm/utils/convertThemedSvgToHex.js

@@ -0,0 +1,9 @@
+import { colorToHex } from '@coinbase/cds-common/color/colorToHex';
+export const convertThemedSvgToHex = (xml, illustrationPalette) => {
+  const cssVarPattern = /var\(--illustration-([a-z0-9-]+)\)/gi;
+  const normalizeToken = token => token.replace(/-/g, '');
+  return xml.replace(cssVarPattern, (_, token) => {
+    const color = illustrationPalette[normalizeToken(token)];
+    return color ? colorToHex(color) : "var(--illustration-" + token + ")";
+  });
+};

package/esm/visualizations/chart/Path.js

@@ -224,7 +224,6 @@ export const Path = /*#__PURE__*/memo(props => {
     strokeWidth: strokeWidth,
     transitions: {
       enter: enterTransition,
-      enterOpacity: enterOpacityTransition,
       update: updateTransition
     },
     children: children

package/esm/visualizations/chart/PeriodSelector.js

@@ -1,5 +1,5 @@
 const _excluded = ["color", "label", "font", "hideDot", "style"],
-  _excluded2 = ["background", "activeBackground", "width", "justifyContent", "TabComponent", "TabsActiveIndicatorComponent"];
+  _excluded2 = ["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';
@@ -107,11 +107,8 @@ export const LiveTabLabel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, re
     }))]
   });
 }));
-
-// Custom tab component with primary color for active state
 const PeriodSelectorTab = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(SegmentedTab, _extends({
   ref: ref,
-  activeColor: "fgPrimary",
   font: "label1"
 }, props))));
 /**
@@ -122,6 +119,7 @@ export const PeriodSelector = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3,
   let {
       background = 'transparent',
       activeBackground = 'bgPrimaryWash',
+      activeColor = 'fgPrimary',
       width = '100%',
       justifyContent = 'space-between',
       TabComponent = PeriodSelectorTab,
@@ -133,6 +131,7 @@ export const PeriodSelector = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3,
     TabComponent: TabComponent,
     TabsActiveIndicatorComponent: TabsActiveIndicatorComponent,
     activeBackground: activeBackground,
+    activeColor: activeColor,
     background: background,
     justifyContent: justifyContent,
     width: width

package/esm/visualizations/chart/utils/transition.js

@@ -188,41 +188,68 @@ export const usePathTransition = _ref => {
   const normalizedEndShared = useSharedValue(initialSkiaPath);
   const fallbackPathShared = useSharedValue(initialSkiaPath);
   const result = useSharedValue(initialSkiaPath);
+  const animationFrameRef = useRef(null);
   useEffect(() => {
-    if (targetPathRef.current !== currentPath) {
-      var _Skia$Path$MakeFromSV3, _Skia$Path$MakeFromSV4, _Skia$Path$MakeFromSV5;
-      let fromPath = targetPathRef.current;
-      if (interpolatorRef.current) {
-        const p = Math.min(Math.max(progress.value, 0), 1);
-        fromPath = interpolatorRef.current(p);
-      }
-      targetPathRef.current = currentPath;
-      const {
-        enter,
-        update
-      } = transitionRef.current;
-      const activeTransition = isFirstAnimation.current && enter !== undefined ? enter : update;
-      isFirstAnimation.current = false;
-      if (activeTransition === null) {
-        var _Skia$Path$MakeFromSV2;
-        const targetPath = (_Skia$Path$MakeFromSV2 = Skia.Path.MakeFromSVGString(currentPath)) != null ? _Skia$Path$MakeFromSV2 : Skia.Path.Make();
-        interpolatorRef.current = null;
-        normalizedStartShared.value = targetPath;
-        normalizedEndShared.value = targetPath;
-        fallbackPathShared.value = targetPath;
-        progress.value = 1;
-        result.value = targetPath;
-        notifyChange(result);
-        return;
-      }
-      const pathInterpolator = interpolatePath(fromPath, currentPath);
-      interpolatorRef.current = pathInterpolator;
-      normalizedStartShared.value = (_Skia$Path$MakeFromSV3 = Skia.Path.MakeFromSVGString(pathInterpolator(pathInterpolationEpsilon))) != null ? _Skia$Path$MakeFromSV3 : Skia.Path.Make();
-      normalizedEndShared.value = (_Skia$Path$MakeFromSV4 = Skia.Path.MakeFromSVGString(pathInterpolator(1 - pathInterpolationEpsilon))) != null ? _Skia$Path$MakeFromSV4 : Skia.Path.Make();
-      fallbackPathShared.value = (_Skia$Path$MakeFromSV5 = Skia.Path.MakeFromSVGString(currentPath)) != null ? _Skia$Path$MakeFromSV5 : Skia.Path.Make();
+    var _Skia$Path$MakeFromSV3, _Skia$Path$MakeFromSV4, _Skia$Path$MakeFromSV5;
+    if (targetPathRef.current === currentPath) {
+      return;
+    }
+    let fromPath = targetPathRef.current;
+    if (interpolatorRef.current) {
+      const p = Math.min(Math.max(progress.value, 0), 1);
+      fromPath = interpolatorRef.current(p);
+    }
+    targetPathRef.current = currentPath;
+    const {
+      enter,
+      update
+    } = transitionRef.current;
+    const isFirstAnim = isFirstAnimation.current;
+    const activeTransition = isFirstAnim && enter !== undefined ? enter : update;
+    isFirstAnimation.current = false;
+    if (activeTransition === null) {
+      var _Skia$Path$MakeFromSV2;
+      const targetPath = (_Skia$Path$MakeFromSV2 = Skia.Path.MakeFromSVGString(currentPath)) != null ? _Skia$Path$MakeFromSV2 : Skia.Path.Make();
+      interpolatorRef.current = null;
+      normalizedStartShared.value = targetPath;
+      normalizedEndShared.value = targetPath;
+      fallbackPathShared.value = targetPath;
+      progress.value = 1;
+      result.value = targetPath;
+      notifyChange(result);
+      return;
+    }
+    const pathInterpolator = interpolatePath(fromPath, currentPath);
+    interpolatorRef.current = pathInterpolator;
+    normalizedStartShared.value = (_Skia$Path$MakeFromSV3 = Skia.Path.MakeFromSVGString(pathInterpolator(pathInterpolationEpsilon))) != null ? _Skia$Path$MakeFromSV3 : Skia.Path.Make();
+    normalizedEndShared.value = (_Skia$Path$MakeFromSV4 = Skia.Path.MakeFromSVGString(pathInterpolator(1 - pathInterpolationEpsilon))) != null ? _Skia$Path$MakeFromSV4 : Skia.Path.Make();
+    fallbackPathShared.value = (_Skia$Path$MakeFromSV5 = Skia.Path.MakeFromSVGString(currentPath)) != null ? _Skia$Path$MakeFromSV5 : Skia.Path.Make();
+    const kickoff = () => {
       progress.value = 0;
       progress.value = buildTransition(1, activeTransition);
+    };
+
+    // Initial enter: defer the kickoff one frame. In Reanimated v4 / worklets
+    // v0.5.2, valueSetter's rAF chain doesn't advance for animation builders
+    // assigned during the first React commit — the animation is set up but
+    // never ticks. Deferring to the next frame puts us in the "warm" state
+    // that updates already enjoy, and the rAF chain runs.
+    if (isFirstAnim) {
+      animationFrameRef.current = requestAnimationFrame(kickoff);
+      return;
+    }
+
+    // Cancel any deferred initial kickoff that hasn't fired yet so its stale
+    // enter transition doesn't overwrite this update animation.
+    if (animationFrameRef.current) {
+      cancelAnimationFrame(animationFrameRef.current);
+      animationFrameRef.current = null;
     }
+
+    // Subsequent kickoff (data update or post-layout-settle re-render) — runs
+    // synchronously since the cold-state window only applies to the very first
+    // React commit.
+    kickoff();
   }, [currentPath, progress, normalizedStartShared, normalizedEndShared, fallbackPathShared, result]);
   useAnimatedReaction(() => ({
     p: progress.value,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "9.0.0-rc.1",
+  "version": "9.0.0-rc.3",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -202,9 +202,9 @@
     "react-native-worklets": "0.5.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.0.0-rc.1",
+    "@coinbase/cds-common": "^9.0.0-rc.3",
     "@coinbase/cds-icons": "^5.16.0",
-    "@coinbase/cds-illustrations": "^4.38.0",
+    "@coinbase/cds-illustrations": "^4.40.1",
     "@coinbase/cds-lottie-files": "^3.3.4",
     "@coinbase/cds-utils": "^2.3.5",
     "@floating-ui/react-native": "^0.10.5",