@coinbase/cds-mobile 9.0.0-rc.2 → 9.0.0

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/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/area/__stories__/AreaChart.stories.js

@@ -1,9 +1,10 @@
 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 { memo, useCallback } from 'react';
+import { memo, useCallback, useState } from 'react';
 import { candles as btcCandles } from '@coinbase/cds-common/internal/data/candles';
+import { Button } from '../../../../buttons/Button';
 import { Example, ExampleScreen } from '../../../../examples/ExampleScreen';
 import { useTheme } from '../../../../hooks/useTheme';
-import { VStack } from '../../../../layout';
+import { Box, VStack } from '../../../../layout';
 import { DefaultReferenceLineLabel, DottedLine, ReferenceLine } from '../../line';
 import { Scrubber } from '../../scrubber/Scrubber';
 import { AreaChart } from '..';
@@ -211,6 +212,44 @@ const AxisBaselineThresholdExample = () => {
     })]
   });
 };
+
+// Regression repro for CDS-2065. The default baseline is 0; alternating between
+// an all-positive dataset (2 gradient stops) and a negative-crossing dataset
+// (3 gradient stops) causes the Gradient component to swap stop counts between
+// renders. Before the fix this crashed with `ReanimatedError: Positions array
+// must have the same size as colors array`.
+const positiveOnlyData = [10, 25, 15, 40, 30, 50, 35];
+const crossesBaselineData = [-20, 25, -15, 40, -30, 50, 35];
+const BaselineCrossingExample = () => {
+  const [crosses, setCrosses] = useState(false);
+  const data = crosses ? crossesBaselineData : positiveOnlyData;
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(AreaChart, {
+      showLines: true,
+      showYAxis: true,
+      accessibilityLabel: "Area chart toggling across the y-axis baseline",
+      height: 220,
+      series: [{
+        id: 'flow',
+        data
+      }],
+      type: "gradient",
+      yAxis: {
+        baseline: 0,
+        showGrid: true
+      }
+    }), /*#__PURE__*/_jsx(Box, {
+      paddingX: 2,
+      children: /*#__PURE__*/_jsx(Button, {
+        compact: true,
+        onPress: () => setCrosses(c => !c),
+        variant: "secondary",
+        children: "Toggle baseline crossing"
+      })
+    })]
+  });
+};
 const AreaChartStories = () => {
   return /*#__PURE__*/_jsxs(ExampleScreen, {
     children: [/*#__PURE__*/_jsx(Example, {
@@ -238,6 +277,9 @@ const AreaChartStories = () => {
         },
         children: /*#__PURE__*/_jsx(Scrubber, {})
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Baseline Crossing (CDS-2065 repro)",
+      children: /*#__PURE__*/_jsx(BaselineCrossingExample, {})
     }), /*#__PURE__*/_jsx(Example, {
       title: "Axis Baseline",
       children: /*#__PURE__*/_jsx(AreaChart, {

package/esm/visualizations/chart/gradient/Gradient.js

@@ -64,7 +64,7 @@ export const Gradient = /*#__PURE__*/memo(_ref => {
   };
 
   // Extract colors and positions for LinearGradient.
-  const colors = useMemo(() => (stops != null ? stops : []).map(stop => {
+  const targetColors = useMemo(() => (stops != null ? stops : []).map(stop => {
     var _stop$opacity;
     return getColorWithOpacity(stop.color, (_stop$opacity = stop.opacity) != null ? _stop$opacity : 1);
   }), [stops]);
@@ -73,6 +73,11 @@ export const Gradient = /*#__PURE__*/memo(_ref => {
   const startY = useSharedValue(targetStart.y);
   const endX = useSharedValue(targetEnd.x);
   const endY = useSharedValue(targetEnd.y);
+
+  // colors lives on the worklet so it flips in lockstep with positions; updating
+  // it via useMemo on the JS thread races the worklet-driven positions and Skia
+  // can paint mismatched array sizes when the stop count changes.
+  const currentColors = useSharedValue(targetColors);
   const fromPositions = useSharedValue(targetPositions);
   const toPositions = useSharedValue(targetPositions);
   const positionsProgress = useSharedValue(1);
@@ -88,6 +93,7 @@ export const Gradient = /*#__PURE__*/memo(_ref => {
       startY.value = targetStart.y;
       endX.value = targetEnd.x;
       endY.value = targetEnd.y;
+      currentColors.value = targetColors;
       fromPositions.value = [...targetPositions];
       toPositions.value = [...targetPositions];
       positionsProgress.value = 1;
@@ -99,16 +105,18 @@ export const Gradient = /*#__PURE__*/memo(_ref => {
     endY.value = buildTransition(targetEnd.y, transition);
     const canAnimatePositions = toPositions.value.length === targetPositions.length;
     if (canAnimatePositions) {
+      currentColors.value = targetColors;
       fromPositions.value = [...toPositions.value];
       toPositions.value = [...targetPositions];
       positionsProgress.value = 0;
       positionsProgress.value = buildTransition(1, transition);
     } else {
+      currentColors.value = targetColors;
       fromPositions.value = [...targetPositions];
       toPositions.value = [...targetPositions];
       positionsProgress.value = 1;
     }
-  }, [transition, targetStart.x, targetStart.y, targetEnd.x, targetEnd.y, targetPositions, startX, startY, endX, endY, fromPositions, toPositions, positionsProgress, shouldRender]);
+  }, [transition, targetStart.x, targetStart.y, targetEnd.x, targetEnd.y, targetColors, targetPositions, startX, startY, endX, endY, currentColors, fromPositions, toPositions, positionsProgress, shouldRender]);
   const start = useDerivedValue(() => {
     return {
       x: startX.value,
@@ -121,6 +129,7 @@ export const Gradient = /*#__PURE__*/memo(_ref => {
       y: endY.value
     };
   }, [endX, endY]);
+  const colors = useDerivedValue(() => currentColors.value, [currentColors]);
   const positions = useDerivedValue(() => {
     const from = fromPositions.value;
     const to = toPositions.value;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "9.0.0-rc.2",
+  "version": "9.0.0",
   "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.2",
+    "@coinbase/cds-common": "^9.0.0",
     "@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",