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

package/CHANGELOG.md

@@ -8,23 +8,47 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
-## 9.0.0-rc.3 ((5/15/2026, 01:54 PM PST))
+## 9.0.1 (5/22/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix: update tray drag position live on iOS during swipe. [[#718](https://github.com/coinbase/cds/pull/718)]
+
+## 9.0.0 (5/20/2026 PST)
+
+CDS 9 is here!!
+
+For more details and to help upgrading from CDS 8 using our automated migration tool, see our official [upgrade guide](https://cds.coinbase.com/guides/v9-upgrade-guide)!
+
+#### 💥 Breaking
+
+- Peer dependency range updated: React 19 & React Native 0.81.5 (Expo SDK 54)
+- Removed remaining instances of fixed height/width values across all components which may cause subtle layout shifts in your app.
+- Some component props’ types have narrowed in response to React 19 upgrade.
+- Read our upgrade guilde for more details!
 
 #### 🚀 Updates
 
-- Feat: support illustration theming. [[#689](https://github.com/coinbase/cds/pull/689)]
+- Migrated full set of components from mobile-visualization package to new `visualizations/chart` and `visualizations/sparkline` sub-paths.
+- Read our upgrade guilde for more details!
 
-## 9.0.0-rc.2 (4/30/2026 PST)
+## 8.75.2 ((5/19/2026, 01:13 PM PST))
 
-#### 🐞 Fixes
+This is an artificial version bump with no new change.
 
-- Fix: bar chart animation regression. [[#655](https://github.com/coinbase/cds/pull/655)]
+## 8.75.1 ((5/19/2026, 07:30 AM PST))
 
-## 9.0.0-rc.1 (4/28/2026 PST)
+This is an artificial version bump with no new change.
 
-#### 💥 Breaking
+## 8.75.0 (5/15/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: support selectionColor on Inputs. [[#688](https://github.com/coinbase/cds/pull/688)]
+
+#### 🐞 Fixes
 
-- Feat: CDS 9 release candidate 1.
+- Fix: set proper height for TextInput for inside labelVariant. [[#688](https://github.com/coinbase/cds/pull/688)]
 
 ## 8.74.3 ((5/14/2026, 05:35 PM PST))
 

package/README.md

@@ -6,9 +6,9 @@ Components for React Native.
 
 Add the relative path to the CDS icon font to your react-native.config.js. If your project lives in the monorepo this lives in the root `react-native.config.js` file. There is an example for CDS playground in there.
 
-In this monorepo, run the `test-expo` targets from the repo root:
+In this monorepo, run the `expo-app` targets from the repo root:
 
-- `yarn nx run test-expo:launch:ios-debug` or `yarn nx run test-expo:launch:android-debug` for local debug launch
+- `yarn nx run expo-app:launch:ios-debug` or `yarn nx run expo-app:launch:android-debug` for local debug launch
 
 ### Outside monorepo
 

package/dts/buttons/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/buttons/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiE,MAAM,OAAO,CAAC;AACtF,OAAO,EAA+C,KAAK,IAAI,EAAE,MAAM,cAAc,CAAC;AAEtF,OAAO,KAAK,EACV,aAAa,EACb,QAAQ,EAER,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAOpC,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAMzE,eAAO,MAAM,MAAM;;;;;;;;;;;;;;CAcjB,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,WAAW,GACvC,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GACpD,kBAAkB,GAAG;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wDAAwD;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,2EAA2E;IAC3E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,yBAAyB;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iDAAiD;IACjD,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,uCAAuC;IACvC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uBAAuB;IACvB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB,qCAAqC;IACrC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEJ,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC;AAE1C,eAAO,MAAM,MAAM;;;;;;;;;IAnDf;;;OAGG;cACO,aAAa;IACvB,mCAAmC;eACxB,OAAO;IAClB,wDAAwD;cAC9C,OAAO;IACjB;;OAEG;yBACkB,MAAM;IAC3B,2EAA2E;kBAC7D,OAAO;IACrB,0DAA0D;YAClD,OAAO;IACf,yDAAyD;cAC/C,OAAO;IACjB,4CAA4C;cAClC,KAAK,CAAC,SAAS;IACzB,yBAAyB;YACjB,KAAK,CAAC,SAAS;IACvB,iDAAiD;gBACrC,QAAQ;IACpB,uCAAuC;sBACrB,OAAO;IACzB,uBAAuB;UACjB,KAAK,CAAC,SAAS;IACrB,+CAA+C;cACrC,QAAQ;IAClB,qCAAqC;oBACrB,OAAO;IACvB;;;OAGG;YACK,OAAO,GAAG,KAAK;IACvB,kDAAkD;WAC3C,MAAM;IACb,oCAAoC;qBACnB,OAAO;IACxB;;;OAGG;oBACa,MAAM;8BA2KzB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/buttons/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiE,MAAM,OAAO,CAAC;AACtF,OAAO,EAA+C,KAAK,IAAI,EAAE,MAAM,cAAc,CAAC;AAEtF,OAAO,KAAK,EACV,aAAa,EACb,QAAQ,EAER,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAMpC,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAMzE,eAAO,MAAM,MAAM;;;;;;;;;;;;;;CAcjB,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,WAAW,GACvC,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GACpD,kBAAkB,GAAG;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wDAAwD;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,2EAA2E;IAC3E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,yBAAyB;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iDAAiD;IACjD,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,uCAAuC;IACvC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uBAAuB;IACvB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB,qCAAqC;IACrC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEJ,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC;AAE1C,eAAO,MAAM,MAAM;;;;;;;;;IAnDf;;;OAGG;cACO,aAAa;IACvB,mCAAmC;eACxB,OAAO;IAClB,wDAAwD;cAC9C,OAAO;IACjB;;OAEG;yBACkB,MAAM;IAC3B,2EAA2E;kBAC7D,OAAO;IACrB,0DAA0D;YAClD,OAAO;IACf,yDAAyD;cAC/C,OAAO;IACjB,4CAA4C;cAClC,KAAK,CAAC,SAAS;IACzB,yBAAyB;YACjB,KAAK,CAAC,SAAS;IACvB,iDAAiD;gBACrC,QAAQ;IACpB,uCAAuC;sBACrB,OAAO;IACzB,uBAAuB;UACjB,KAAK,CAAC,SAAS;IACrB,+CAA+C;cACrC,QAAQ;IAClB,qCAAqC;oBACrB,OAAO;IACvB;;;OAGG;YACK,OAAO,GAAG,KAAK;IACvB,kDAAkD;WAC3C,MAAM;IACb,oCAAoC;qBACnB,OAAO;IACxB;;;OAGG;oBACa,MAAM;8BA2KzB,CAAC"}

package/dts/buttons/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/buttons/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzF,OAAO,KAAK,EACV,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EAER,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAMpC,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAGzE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAEhD,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAC3C,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,GACpC,IAAI,CACF,eAAe,EACf,UAAU,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,oBAAoB,CACpF,GAAG;IACF,6CAA6C;IAC7C,IAAI,EAAE,QAAQ,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,wEAAwE;IACxE,MAAM,CAAC,EAAE;QACP,6BAA6B;QAC7B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,oCAAoC;QACpC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,sCAAsC;QACtC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACvC,CAAC;CACH,CAAC;AAEJ,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC;AAElD,eAAO,MAAM,UAAU;IA3BnB,6CAA6C;UACvC,QAAQ;IACd;;;OAGG;eACQ,QAAQ;IACnB,iCAAiC;aACxB,OAAO;IAChB;;;OAGG;cACO,iBAAiB;IAC3B,wEAAwE;aAC/D;QACP,6BAA6B;QAC7B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,oCAAoC;QACpC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,sCAAsC;QACtC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACvC;wCAsFJ,CAAC"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/buttons/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzF,OAAO,KAAK,EACV,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EAER,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAMpC,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAGzE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAEhD,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAC3C,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,GACpC,IAAI,CACF,eAAe,EACf,UAAU,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,oBAAoB,CACpF,GAAG;IACF,6CAA6C;IAC7C,IAAI,EAAE,QAAQ,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,wEAAwE;IACxE,MAAM,CAAC,EAAE;QACP,6BAA6B;QAC7B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,oCAAoC;QACpC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,sCAAsC;QACtC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACvC,CAAC;CACH,CAAC;AAEJ,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC;AAElD,eAAO,MAAM,UAAU;IA3BnB,6CAA6C;UACvC,QAAQ;IACd;;;OAGG;eACQ,QAAQ;IACnB,iCAAiC;aACxB,OAAO;IAChB;;;OAGG;cACO,iBAAiB;IAC3B,wEAAwE;aAC/D;QACP,6BAA6B;QAC7B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,oCAAoC;QACpC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,sCAAsC;QACtC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACvC;wCAuFJ,CAAC"}

package/dts/controls/NativeInput.d.ts

@@ -30,13 +30,18 @@ export type NativeInputProps = {
    * @default body
    */
   font?: ThemeVars.Font;
+  /**
+   * Color of the selection (including caret).
+   * @default fgPrimary
+   */
+  selectionColor?: ThemeVars.Color;
 } & SharedProps &
   Pick<TextInputBaseProps, 'compact'> &
   Pick<
     SharedAccessibilityProps,
     'accessibilityLabel' | 'accessibilityLabelledBy' | 'accessibilityHint'
   > &
-  Omit<TextInputProps, 'textAlign'>;
+  Omit<TextInputProps, 'textAlign' | 'selectionColor'>;
 export declare const NativeInput: React.NamedExoticComponent<
   {
     /**
@@ -62,13 +67,18 @@ export declare const NativeInput: React.NamedExoticComponent<
      * @default body
      */
     font?: ThemeVars.Font;
+    /**
+     * Color of the selection (including caret).
+     * @default fgPrimary
+     */
+    selectionColor?: ThemeVars.Color;
   } & SharedProps &
     Pick<TextInputBaseProps, 'compact'> &
     Pick<
       SharedAccessibilityProps,
       'accessibilityLabel' | 'accessibilityHint' | 'accessibilityLabelledBy'
     > &
-    Omit<TextInputProps, 'textAlign'> &
+    Omit<TextInputProps, 'textAlign' | 'selectionColor'> &
     React.RefAttributes<TextInput>
 >;
 //# sourceMappingURL=NativeInput.d.ts.map

package/dts/controls/NativeInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NativeInput.d.ts","sourceRoot":"","sources":["../../src/controls/NativeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,EAAa,cAAc,EAAa,SAAS,EAAE,MAAM,cAAc,CAAC;AACpF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AAIpG,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEtD,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;SAGK;IACL,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,gFAAgF;IAChF,gBAAgB,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IACzC;;;SAGK;IACL,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG,OAAO,CAAC;IAClD;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;CACvB,GAAG,WAAW,GACb,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC,GACnC,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GACD,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC;AAEpC,eAAO,MAAM,WAAW;IA/BtB;;;SAGK;YACG,aAAa,CAAC,OAAO,CAAC;IAC9B,gFAAgF;uBAC7D,SAAS,GAAG,SAAS;IACxC;;;SAGK;eACM,OAAO;IAClB;;;;OAIG;gBACS,cAAc,CAAC,WAAW,CAAC,GAAG,OAAO;IACjD;;;OAGG;WACI,SAAS,CAAC,IAAI;oOAmGtB,CAAC"}
+{"version":3,"file":"NativeInput.d.ts","sourceRoot":"","sources":["../../src/controls/NativeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,EAAa,cAAc,EAAa,SAAS,EAAE,MAAM,cAAc,CAAC;AACpF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AAIpG,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEtD,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;SAGK;IACL,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,gFAAgF;IAChF,gBAAgB,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IACzC;;;SAGK;IACL,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG,OAAO,CAAC;IAClD;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IACtB;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CAClC,GAAG,WAAW,GACb,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC,GACnC,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GACD,IAAI,CAAC,cAAc,EAAE,WAAW,GAAG,gBAAgB,CAAC,CAAC;AAEvD,eAAO,MAAM,WAAW;IApCtB;;;SAGK;YACG,aAAa,CAAC,OAAO,CAAC;IAC9B,gFAAgF;uBAC7D,SAAS,GAAG,SAAS;IACxC;;;SAGK;eACM,OAAO;IAClB;;;;OAIG;gBACS,cAAc,CAAC,WAAW,CAAC,GAAG,OAAO;IACjD;;;OAGG;WACI,SAAS,CAAC,IAAI;IACrB;;;OAGG;qBACc,SAAS,CAAC,KAAK;uPAqGjC,CAAC"}

package/dts/controls/SearchInput.d.ts

@@ -167,7 +167,7 @@ export declare const SearchInput: React.NamedExoticComponent<
       bordered?: boolean;
     } & Omit<
       import('react-native').TextInputProps,
-      'value' | 'textAlign' | 'onChange' | 'onChangeText'
+      'value' | 'textAlign' | 'selectionColor' | 'onChange' | 'onChangeText'
     > & {
       value?: import('react-native').TextInputProps['value'];
       onChange?: import('react-native').TextInputProps['onChange'];

package/dts/controls/TextInput.d.ts

@@ -75,7 +75,7 @@ export type TextInputBaseProps = SharedProps &
     bordered?: boolean;
   };
 export type TextInputProps = TextInputBaseProps &
-  Omit<RNTextInputProps, 'value' | 'onChange' | 'onChangeText' | 'textAlign'> & {
+  Omit<RNTextInputProps, 'value' | 'onChange' | 'onChangeText' | 'textAlign' | 'selectionColor'> & {
     value?: RNTextInputProps['value'];
     onChange?: RNTextInputProps['onChange'];
     onChangeText?: RNTextInputProps['onChangeText'];
@@ -152,7 +152,10 @@ export declare const TextInput: React.NamedExoticComponent<
        * @default true
        */
       bordered?: boolean;
-    } & Omit<RNTextInputProps, 'value' | 'textAlign' | 'onChange' | 'onChangeText'> & {
+    } & Omit<
+      RNTextInputProps,
+      'value' | 'textAlign' | 'selectionColor' | 'onChange' | 'onChangeText'
+    > & {
       value?: RNTextInputProps['value'];
       onChange?: RNTextInputProps['onChange'];
       onChangeText?: RNTextInputProps['onChangeText'];

package/dts/controls/TextInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/controls/TextInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/controls/TextInput.tsx"],"names":[],"mappings":"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"}

package/dts/overlays/drawer/useDrawerPanResponder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDrawerPanResponder.d.ts","sourceRoot":"","sources":["../../../src/overlays/drawer/useDrawerPanResponder.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAmD,MAAM,cAAc,CAAC;AAC9F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAgB7D,KAAK,2BAA2B,GAAG;IACjC,eAAe,EAAE,QAAQ,CAAC,KAAK,CAAC;IAChC,eAAe,EAAE,QAAQ,CAAC,kBAAkB,CAAC;IAC7C,GAAG,EAAE,gBAAgB,CAAC;IACtB,iCAAiC,EAAE,OAAO,CAAC;IAC3C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,gBAAgB,EAAE,QAAQ,CAAC,KAAK,CAAC;IACjC,8BAA8B,EAAE,MAAM,CAAC;CACxC,CAAC;AASF,eAAO,MAAM,qBAAqB,GAAI,6JASnC,2BAA2B,gDAiN7B,CAAC"}
+{"version":3,"file":"useDrawerPanResponder.d.ts","sourceRoot":"","sources":["../../../src/overlays/drawer/useDrawerPanResponder.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAmD,MAAM,cAAc,CAAC;AAC9F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAgB7D,KAAK,2BAA2B,GAAG;IACjC,eAAe,EAAE,QAAQ,CAAC,KAAK,CAAC;IAChC,eAAe,EAAE,QAAQ,CAAC,kBAAkB,CAAC;IAC7C,GAAG,EAAE,gBAAgB,CAAC;IACtB,iCAAiC,EAAE,OAAO,CAAC;IAC3C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,gBAAgB,EAAE,QAAQ,CAAC,KAAK,CAAC;IACjC,8BAA8B,EAAE,MAAM,CAAC;CACxC,CAAC;AASF,eAAO,MAAM,qBAAqB,GAAI,6JASnC,2BAA2B,gDA4N7B,CAAC"}

package/dts/visualizations/chart/gradient/Gradient.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Gradient.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/gradient/Gradient.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAyD,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAClG,OAAO,EAIL,KAAK,kBAAkB,EACxB,MAAM,mBAAmB,CAAC;AAE3B,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,kBAAkB,CAAC;IAC7B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG;IAC9C;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ,qDA6IpB,CAAC"}
+{"version":3,"file":"Gradient.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/gradient/Gradient.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAyD,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAClG,OAAO,EAIL,KAAK,kBAAkB,EACxB,MAAM,mBAAmB,CAAC;AAE3B,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,kBAAkB,CAAC;IAC7B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG;IAC9C;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ,qDAyJpB,CAAC"}

package/esm/buttons/IconButton.js

@@ -1,4 +1,4 @@
-const _excluded = ["name", "active", "variant", "transparent", "compact", "background", "color", "borderColor", "iconSize", "borderWidth", "borderRadius", "feedback", "flush", "padding", "loading", "progressCircleSize", "style", "styles", "accessibilityHint", "accessibilityLabel"];
+const _excluded = ["name", "active", "variant", "alignSelf", "transparent", "compact", "background", "color", "borderColor", "iconSize", "borderWidth", "borderRadius", "feedback", "flush", "padding", "loading", "progressCircleSize", "style", "styles", "accessibilityHint", "accessibilityLabel"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import { forwardRef, memo } from 'react';
@@ -15,6 +15,8 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
       name,
       active,
       variant = 'secondary',
+      alignSelf = 'flex-start',
+      // prevents stretching when placed in a flex container
       transparent,
       compact = true,
       background,
@@ -47,7 +49,7 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
     accessibilityHint: accessibilityHint,
     accessibilityLabel: loading ? (accessibilityLabel != null ? accessibilityLabel : '') + ", loading" : accessibilityLabel,
     alignItems: "center",
-    alignSelf: "flex-start",
+    alignSelf: alignSelf,
     background: backgroundValue,
     borderColor: borderColorValue,
     borderRadius: borderRadius,

package/esm/controls/NativeInput.js

@@ -1,4 +1,4 @@
-const _excluded = ["containerSpacing", "testID", "align", "disabled", "textAlign", "font", "accessibilityLabel", "compact", "style"];
+const _excluded = ["containerSpacing", "testID", "align", "disabled", "textAlign", "font", "accessibilityLabel", "compact", "selectionColor", "style"];
 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';
@@ -16,6 +16,7 @@ export const NativeInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
       font = 'body',
       accessibilityLabel,
       compact,
+      selectionColor = 'fgPrimary',
       style
     } = _ref,
     editableInputAddonProps = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -57,6 +58,7 @@ export const NativeInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
     editable: !disabled,
     keyboardAppearance: theme.activeColorScheme,
     placeholderTextColor: theme.color.fgMuted,
+    selectionColor: theme.color[selectionColor],
     style: inputRootStyles,
     testID: testID,
     textAlign: textAlign !== 'unset' ? textAlign : undefined

package/esm/controls/TextInput.js

@@ -27,7 +27,7 @@ const variantColorMap = {
   secondary: 'bgSecondary'
 };
 export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
-  var _testIDMap$end, _testIDMap$helperText, _testIDMap$label;
+  var _testIDMap$end, _testIDMap$helperText, _testIDMap$label, _testIDMap$label2;
   const mergedProps = useComponentConfig('TextInput', _props);
   const {
       label,
@@ -166,29 +166,33 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
       containerSpacing: containerSpacing,
       disabled: disabled,
       font: font,
+      selectionColor: variantColorMap[focusedVariant],
       testID: testID
     }, editableInputAddonProps)),
     labelNode: !compact && (labelNode && labelVariant !== 'inside' ? labelNode : hasLabel && /*#__PURE__*/_jsx(Pressable, {
       accessibilityRole: "button",
       disabled: disabled,
       onPress: handleNodePress,
-      children: /*#__PURE__*/_jsx(Box, _extends({}, labelVariant === 'inside' && {
-        paddingTop: 1,
+      children: labelVariant === 'inside' && labelNode ? /*#__PURE__*/_jsx(Box, {
+        background: readOnlyInputBackground,
+        paddingEnd: 2,
         paddingStart: start ? 0.5 : 2,
+        children: labelNode
+      }) : labelVariant === 'inside' ? /*#__PURE__*/_jsx(InputLabel, {
+        background: readOnlyInputBackground,
+        color: labelColor,
+        font: labelFont,
         paddingEnd: 2,
-        background: readOnlyInputBackground
-      }, {
-        children: labelNode ? labelNode : /*#__PURE__*/_jsx(InputLabel, _extends({
-          color: labelColor,
-          font: labelFont,
-          testID: (_testIDMap$label = testIDMap == null ? void 0 : testIDMap.label) != null ? _testIDMap$label : ''
-        }, labelVariant === 'inside' && {
-          paddingTop: 0,
-          paddingBottom: 0
-        }, {
-          children: label
-        }))
-      }))
+        paddingStart: start ? 0.5 : 2,
+        paddingY: 0,
+        testID: (_testIDMap$label = testIDMap == null ? void 0 : testIDMap.label) != null ? _testIDMap$label : '',
+        children: label
+      }) : /*#__PURE__*/_jsx(InputLabel, {
+        color: labelColor,
+        font: labelFont,
+        testID: (_testIDMap$label2 = testIDMap == null ? void 0 : testIDMap.label) != null ? _testIDMap$label2 : '',
+        children: label
+      })
     })),
     labelVariant: labelVariant,
     startNode: (compact && hasLabel || !!start) && /*#__PURE__*/_jsx(Box, {

package/esm/icons/__figma__/Icon.figma.js

@@ -131,13 +131,6 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=6967
     name: "apothecary"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-13936', {
-  imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
-  props,
-  example: props => /*#__PURE__*/_jsx(Icon, _extends({
-    name: "appSwitcher"
-  }, props))
-});
 figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=69679-956', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
@@ -159,6 +152,13 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "application"
   }, props))
 });
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-13936', {
+  imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
+  props,
+  example: props => /*#__PURE__*/_jsx(Icon, _extends({
+    name: "appSwitcher"
+  }, props))
+});
 figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-12805', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
@@ -180,13 +180,6 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "arrowRight"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-12740', {
-  imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
-  props,
-  example: props => /*#__PURE__*/_jsx(Icon, _extends({
-    name: "arrowUp"
-  }, props))
-});
 figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-12766', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
@@ -208,6 +201,13 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "arrowsVertical"
   }, props))
 });
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-12740', {
+  imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
+  props,
+  example: props => /*#__PURE__*/_jsx(Icon, _extends({
+    name: "arrowUp"
+  }, props))
+});
 figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-15106', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
@@ -236,18 +236,18 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "astronautHelmet"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=69679-1178', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=69679-670', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _extends({
-    name: "atSign"
+    name: "atomScience"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=69679-670', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=69679-1178', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _extends({
-    name: "atomScience"
+    name: "atSign"
   }, props))
 });
 figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16565', {
@@ -320,6 +320,13 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=5681
     name: "baseApps"
   }, props))
 });
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=69679-110', {
+  imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
+  props,
+  example: props => /*#__PURE__*/_jsx(Icon, _extends({
+    name: "baseball"
+  }, props))
+});
 figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=56816-81', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
@@ -362,13 +369,6 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=5681
     name: "baseWallet"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=69679-110', {
-  imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
-  props,
-  example: props => /*#__PURE__*/_jsx(Icon, _extends({
-    name: "baseball"
-  }, props))
-});
 figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=69679-123', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
@@ -726,14 +726,14 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "cashSingaporeDollar"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=56411-1533', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-12051', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _extends({
     name: "cashSwissFranc"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-12051', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=56411-1533', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _extends({
@@ -754,18 +754,18 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "cashTurkishLira"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-11999', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-12012', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _extends({
-    name: "cashUSD"
+    name: "cashUaeDirham"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-12012', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-11999', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _extends({
-    name: "cashUaeDirham"
+    name: "cashUSD"
   }, props))
 });
 figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-11986', {
@@ -1587,18 +1587,18 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "eye"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-13000', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-14365', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _extends({
-    name: "faceScan"
+    name: "faces"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-14365', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-13000', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _extends({
-    name: "faces"
+    name: "faceScan"
   }, props))
 });
 figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=69679-644', {
@@ -1615,14 +1615,14 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "faucet"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-13598', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-13351', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _extends({
     name: "faucet"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-13351', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-13598', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _extends({
@@ -1832,14 +1832,14 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "ghost"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-14352', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-14183', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _extends({
     name: "ghost"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-14183', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-14352', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _extends({
@@ -1853,14 +1853,14 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "gif"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-15275', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-15015', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _extends({
     name: "giftBox"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-15015', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-15275', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _extends({
@@ -1881,14 +1881,14 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "gitHubLogo"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-15262', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16305', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _extends({
     name: "globe"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16305', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-15262', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _extends({
@@ -1937,21 +1937,21 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "hamburger"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16812', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16825', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _extends({
     name: "hammer"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16825', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16838', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _extends({
     name: "hammer"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16838', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16812', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _extends({
@@ -2455,18 +2455,18 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "nftSale"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16187', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-15549', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _extends({
-    name: "noWifi"
+    name: "nodeProduct"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-15549', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16187', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _extends({
-    name: "nodeProduct"
+    name: "noWifi"
   }, props))
 });
 figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=69679-579', {
@@ -2518,13 +2518,6 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=8018
     name: "overPredictions"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-12909', {
-  imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
-  props,
-  example: props => /*#__PURE__*/_jsx(Icon, _extends({
-    name: "pFPS"
-  }, props))
-});
 figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16161', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
@@ -2574,13 +2567,6 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "pause"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-11791', {
-  imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
-  props,
-  example: props => /*#__PURE__*/_jsx(Icon, _extends({
-    name: "pay"
-  }, props))
-});
 figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-11921', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
@@ -2588,11 +2574,11 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "pay"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-15510', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-11791', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _extends({
-    name: "payProduct"
+    name: "pay"
   }, props))
 });
 figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-11908', {
@@ -2616,6 +2602,13 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "paypal"
   }, props))
 });
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-15510', {
+  imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
+  props,
+  example: props => /*#__PURE__*/_jsx(Icon, _extends({
+    name: "payProduct"
+  }, props))
+});
 figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16122', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
@@ -2665,6 +2658,13 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "perpetualSwap"
   }, props))
 });
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-12909', {
+  imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
+  props,
+  example: props => /*#__PURE__*/_jsx(Icon, _extends({
+    name: "pFPS"
+  }, props))
+});
 figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-14924', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
@@ -2679,6 +2679,13 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=6609
     name: "pieChartData"
   }, props))
 });
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=76831-2', {
+  imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
+  props,
+  example: props => /*#__PURE__*/_jsx(Icon, _extends({
+    name: "pieChartWithArrow"
+  }, props))
+});
 figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=69679-852', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
@@ -2700,21 +2707,21 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "pin"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16942', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16955', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _extends({
     name: "planet"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16955', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16968', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _extends({
     name: "planet"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16968', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16942', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _extends({
@@ -2819,18 +2826,18 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "privateClientProduct"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-15471', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16083', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _extends({
-    name: "proProduct"
+    name: "profile"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16083', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-15471', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _extends({
-    name: "profile"
+    name: "proProduct"
   }, props))
 });
 figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16070', {
@@ -3050,14 +3057,14 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "royalty"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-15184', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-14859', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _extends({
     name: "royalty"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-14859', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-15184', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _extends({
@@ -3204,25 +3211,25 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "signinProduct"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=66093-54', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=69679-423', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _extends({
-    name: "singleCoin"
+    name: "singlecloud"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=69679-227', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=66093-54', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _extends({
-    name: "singleNote"
+    name: "singleCoin"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=69679-423', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=69679-227', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _extends({
-    name: "singlecloud"
+    name: "singleNote"
   }, props))
 });
 figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-12896', {
@@ -3519,14 +3526,14 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "sun"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16890', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16916', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _extends({
     name: "support"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16916', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-16890', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _extends({
@@ -3547,14 +3554,14 @@ figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=2945
     name: "taxes"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-11726', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-11739', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _extends({
     name: "taxesReceipt"
   }, props))
 });
-figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-11739', {
+figma.connect(Icon, 'https://figma.com/file/k5CtyJccNQUGMI5bI4lJ2g/?node-id=29452-11726', {
   imports: ["import { Icon } from '@coinbase/cds-mobile/icons/Icon'"],
   props,
   example: props => /*#__PURE__*/_jsx(Icon, _extends({

package/esm/overlays/drawer/useDrawerPanResponder.js

@@ -127,11 +127,20 @@ export const useDrawerPanResponder = _ref => {
     }
     return false;
   }, [isTryingToDismiss, parseGestureState, isFlingToDismiss, isSwipeToDismiss]);
+  const initializeDragAnimation = useCallback(() => {
+    // On iOS, setOffset during pan move does not flush to native; capture the current
+    // position as offset via extractOffset() so setValue in onPanResponderMove updates the UI.
+    drawerAnimation.stopAnimation();
+    opacityAnimation.stopAnimation();
+    drawerAnimation.extractOffset();
+    opacityAnimation.extractOffset();
+  }, [drawerAnimation, opacityAnimation]);
   const panGestureHandlers = useMemo(() => {
     return PanResponder.create({
       onStartShouldSetPanResponder: () => true,
       onMoveShouldSetPanResponder: shouldCaptureGestures,
       onMoveShouldSetPanResponderCapture: shouldCaptureGestures,
+      onPanResponderGrant: initializeDragAnimation,
       onPanResponderMove: (_, gestureState) => {
         const {
           isDragging,
@@ -148,20 +157,20 @@ export const useDrawerPanResponder = _ref => {
               outputRange: [0, 0.1],
               clamp: true
             });
-            drawerAnimation.setOffset(calculateDragOffset(normalizedDistance));
+            drawerAnimation.setValue(calculateDragOffset(normalizedDistance));
           } else {
             const normalizedDrawerTransition = modulate(distance, {
               inputRange: [0, isHorizontalDrawer ? horizontalDrawerMaxPanDistance : verticalDrawerMaxPanDistance],
               outputRange: [0, normalizeDrawerPanDistanceMultiplier],
               clamp: false
             });
-            drawerAnimation.setOffset(normalizedDrawerTransition);
+            drawerAnimation.setValue(normalizedDrawerTransition);
             const normalizedOpacityTransition = modulate(distance, {
               inputRange: [0, isHorizontalDrawer ? horizontalDrawerMaxPanDistance : verticalDrawerMaxPanDistance],
               outputRange: [0, 1],
               clamp: false
             });
-            opacityAnimation.setOffset(normalizedOpacityTransition);
+            opacityAnimation.setValue(normalizedOpacityTransition);
           }
         }
       },
@@ -176,6 +185,6 @@ export const useDrawerPanResponder = _ref => {
         }
       }
     });
-  }, [drawerAnimation, animateSnapBack, parseGestureState, shouldCaptureGestures, shouldDismiss, drawerWidth, drawerHeight, pin, isHorizontalDrawer, onBlur, handleSwipeToClose, opacityAnimation]);
+  }, [drawerAnimation, animateSnapBack, initializeDragAnimation, parseGestureState, shouldCaptureGestures, shouldDismiss, drawerWidth, drawerHeight, pin, isHorizontalDrawer, onBlur, handleSwipeToClose, opacityAnimation]);
   return panGestureHandlers;
 };

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.3",
+  "version": "9.0.1",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -202,8 +202,8 @@
     "react-native-worklets": "0.5.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.0.0-rc.3",
-    "@coinbase/cds-icons": "^5.16.0",
+    "@coinbase/cds-common": "^9.0.1",
+    "@coinbase/cds-icons": "^5.17.0",
     "@coinbase/cds-illustrations": "^4.40.1",
     "@coinbase/cds-lottie-files": "^3.3.4",
     "@coinbase/cds-utils": "^2.3.5",