@coinbase/cds-mobile 9.22.1 → 9.24.0

package/CHANGELOG.md

@@ -1,12 +1,14 @@
-# @coinbase/cds-mobile
+## 9.24.0 (2026-08-31)
 
-> [NPM registry](https://www.npmjs.com/package/@coinbase/cds-mobile)
+### 🚀 Features
 
-All notable changes to this project will be documented in this file.
+- Added a styles prop to the mobile Scrubber
 
-`@coinbase/cds-mobile` adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+## 9.23.0 (8/27/2026 PST)
 
-<!-- template-start -->
+#### 🚀 Updates
+
+- Add uncontrolled initialPage prop to Carousel. [[#864](https://github.com/coinbase/cds/pull/864)]
 
 ## 9.22.1 (8/25/2026 PST)
 
@@ -1342,3 +1344,7 @@ This is an artificial version bump with no new change.
 ## 8.12.0 (9/18/2025 PST)
 
 - Prepare for open source release.
+
+---
+
+<sub>Release entries above are generated by `nx release` from version plans. See the [NPM registry](https://www.npmjs.com/package/@coinbase/cds-mobile) for published versions. `@coinbase/cds-mobile` adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).</sub>

package/README.md

@@ -8,7 +8,7 @@ Add the relative path to the CDS icon font to your react-native.config.js. If yo
 
 In this monorepo, run the `expo-app` targets from the repo root:
 
-- `yarn nx run expo-app:launch:ios-debug` or `yarn nx run expo-app:launch:android-debug` for local debug launch
+- `yarn nx run expo-app:ios` or `yarn nx run expo-app:android` for local development
 
 ### Outside monorepo
 

package/dts/carousel/Carousel.d.ts

@@ -141,6 +141,12 @@ export type CarouselBaseProps = SharedProps &
      * @default 'page'
      */
     snapMode?: 'item' | 'page';
+    /**
+     * Zero-based page index to show on first layout, with no animation. Uncontrolled —
+     * updating it later does not move the carousel. Out-of-range values are clamped.
+     * @default 0
+     */
+    initialPage?: number;
     /**
      * Hides the navigation arrows (previous/next buttons).
      */

package/dts/carousel/Carousel.d.ts.map

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

package/dts/visualizations/chart/line/ReferenceLine.d.ts

@@ -6,7 +6,7 @@ import type {
   TextVerticalAlignment,
 } from '../text/ChartText';
 import type { ChartInset } from '../utils/chart';
-import type { LineComponent } from './Line';
+import type { LineComponent, LineComponentProps } from './Line';
 export type ReferenceLineLabelComponentProps = Pick<
   ChartTextProps,
   | 'x'
@@ -37,6 +37,31 @@ export type ReferenceLineLabelComponentProps = Pick<
   boundsInset?: number | ChartInset;
 };
 export type ReferenceLineLabelComponent = React.FC<ReferenceLineLabelComponentProps>;
+/**
+ * Cosmetic style props for a chart text label (reference line or scrubber label).
+ * Positioning, sizing, and animated opacity remain owned by the component; only
+ * visual styling is exposed.
+ */
+export type ChartLabelStyle = Pick<
+  ReferenceLineLabelComponentProps,
+  | 'color'
+  | 'background'
+  | 'borderRadius'
+  | 'fontWeight'
+  | 'fontFamilies'
+  | 'inset'
+  | 'paragraphAlignment'
+>;
+/** Custom styles for the individual elements of a reference line. */
+export type ReferenceLineStyles = {
+  /**
+   * Style props applied to the line, forwarded to its `LineComponent`.
+   * @note `d` and the animated `strokeOpacity` remain owned by the component.
+   */
+  line?: Omit<LineComponentProps, 'd' | 'animate' | 'strokeOpacity' | 'xAxisId' | 'yAxisId'>;
+  /** Style props applied to the label, forwarded to its `LabelComponent`. */
+  label?: ChartLabelStyle;
+};
 export type ReferenceLineBaseProps = {
   /**
    * Label content to display near the reference line.
@@ -108,6 +133,8 @@ export type ReferenceLineBaseProps = {
    * @default 1
    */
   opacity?: AnimatedProp<number>;
+  /** Custom styles for the individual elements of the reference line. */
+  styles?: ReferenceLineStyles;
 };
 type HorizontalReferenceLineProps = ReferenceLineBaseProps & {
   /**

package/dts/visualizations/chart/line/ReferenceLine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReferenceLine.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/line/ReferenceLine.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAI/D,OAAO,KAAK,EACV,iBAAiB,EACjB,cAAc,EACd,uBAAuB,EACvB,qBAAqB,EACtB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAMjD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE5C,MAAM,MAAM,gCAAgC,GAAG,IAAI,CACjD,cAAc,EACZ,GAAG,GACH,GAAG,GACH,UAAU,GACV,OAAO,GACP,OAAO,GACP,YAAY,GACZ,cAAc,GACd,sBAAsB,GACtB,gBAAgB,GAChB,qBAAqB,GACrB,mBAAmB,GACnB,MAAM,GACN,YAAY,GACZ,cAAc,GACd,SAAS,GACT,IAAI,GACJ,IAAI,GACJ,UAAU,GACV,oBAAoB,CACvB,GAAG;IACF;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG,KAAK,CAAC,EAAE,CAAC,gCAAgC,CAAC,CAAC;AAErF,MAAM,MAAM,sBAAsB,GAAG;IACnC;;;;;;;;;;;OAWG;IACH,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;;OAGG;IACH,cAAc,CAAC,EAAE,2BAA2B,CAAC;IAC7C;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IACnC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,wBAAwB,CAAC,EAAE,uBAAuB,CAAC;IACnD;;OAEG;IACH,sBAAsB,CAAC,EAAE,qBAAqB,CAAC;IAC/C;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACvC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;CAChC,CAAC;AAEF,KAAK,4BAA4B,GAAG,sBAAsB,GAAG;IAC3D;;OAEG;IACH,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IAC5B;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,aAAa,CAAC,EAAE,uBAAuB,CAAC;IACxC,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC;AAEF,KAAK,0BAA0B,GAAG,sBAAsB,GAAG;IACzD;;OAEG;IACH,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IAC5B;;;OAGG;IACH,aAAa,CAAC,EAAE,qBAAqB,CAAC;IACtC,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,4BAA4B,GAAG,0BAA0B,CAAC;AAE3F,eAAO,MAAM,aAAa,0DAoJzB,CAAC"}
+{"version":3,"file":"ReferenceLine.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/line/ReferenceLine.tsx"],"names":[],"mappings":"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"}

package/dts/visualizations/chart/scrubber/DefaultScrubberBeacon.d.ts

@@ -26,6 +26,7 @@ export declare const DefaultScrubberBeacon: import('react').MemoExoticComponent<
     radius,
     stroke,
     strokeWidth,
+    style,
   }: DefaultScrubberBeaconProps & {
     ref?: React.Ref<ScrubberBeaconRef>;
   }) => import('react/jsx-runtime').JSX.Element

package/dts/visualizations/chart/scrubber/DefaultScrubberBeacon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultScrubberBeacon.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/scrubber/DefaultScrubberBeacon.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAkBzE,MAAM,MAAM,0BAA0B,GAAG,mBAAmB,GAAG;IAC7D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,qBAAqB,uLAe7B,0BAA0B,GAAG;IAC9B,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;CACpC,6CAgLF,CAAC"}
+{"version":3,"file":"DefaultScrubberBeacon.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/scrubber/DefaultScrubberBeacon.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAkBzE,MAAM,MAAM,0BAA0B,GAAG,mBAAmB,GAAG;IAC7D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,qBAAqB,8LAgB7B,0BAA0B,GAAG;IAC9B,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;CACpC,6CAgLF,CAAC"}

package/dts/visualizations/chart/scrubber/DefaultScrubberBeaconLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultScrubberBeaconLabel.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/scrubber/DefaultScrubberBeaconLabel.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,YAAY,CAAC;AAK3D,MAAM,MAAM,+BAA+B,GAAG,wBAAwB,GACpE,IAAI,CACF,cAAc,EACd,YAAY,GAAG,UAAU,GAAG,cAAc,GAAG,MAAM,GAAG,mBAAmB,GAAG,OAAO,GAAG,SAAS,CAChG,CAAC;AAEJ;;GAEG;AACH,eAAO,MAAM,0BAA0B,uEAkCtC,CAAC"}
+{"version":3,"file":"DefaultScrubberBeaconLabel.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/scrubber/DefaultScrubberBeaconLabel.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,YAAY,CAAC;AAK3D,MAAM,MAAM,+BAA+B,GAAG,wBAAwB,GACpE,IAAI,CACF,cAAc,EACd,YAAY,GAAG,UAAU,GAAG,cAAc,GAAG,MAAM,GAAG,mBAAmB,GAAG,OAAO,GAAG,SAAS,CAChG,CAAC;AAEJ;;GAEG;AACH,eAAO,MAAM,0BAA0B,uEAoCtC,CAAC"}

package/dts/visualizations/chart/scrubber/Scrubber.d.ts

@@ -1,8 +1,15 @@
 import React from 'react';
-import { type AnimatedProp, type SkParagraph } from '@shopify/react-native-skia';
 import {
+  type AnimatedProp,
+  type GroupProps,
+  type RectProps,
+  type SkParagraph,
+} from '@shopify/react-native-skia';
+import {
+  type ChartLabelStyle,
   type ReferenceLineBaseProps,
   type ReferenceLineLabelComponentProps,
+  type ReferenceLineStyles,
 } from '../line/ReferenceLine';
 import type { ChartTextChildren, ChartTextProps } from '../text/ChartText';
 import { type ChartInset, type Series } from '../utils/chart';
@@ -71,7 +78,16 @@ export type ScrubberBeaconBaseProps = {
    */
   stroke?: string;
 };
+/**
+ * Style props applied to the beacon's Skia group. Positioning and the animated
+ * visibility opacity remain owned by the component.
+ */
+export type ScrubberBeaconStyle = Omit<GroupProps, 'children' | 'opacity'>;
 export type ScrubberBeaconProps = ScrubberBeaconBaseProps & {
+  /**
+   * Custom styles applied to the beacon group.
+   */
+  style?: ScrubberBeaconStyle;
   /**
    * Transition configuration for beacon animations.
    */
@@ -117,6 +133,10 @@ export type ScrubberBeaconLabelProps = Pick<Series, 'color'> &
      * Id of the series.
      */
     seriesId: Series['id'];
+    /**
+     * Custom styles applied to the beacon label.
+     */
+    style?: ChartLabelStyle;
   };
 export type ScrubberBeaconLabelComponent = React.FC<ScrubberBeaconLabelProps>;
 export type ScrubberLabelProps = ReferenceLineLabelComponentProps;
@@ -207,6 +227,35 @@ export type ScrubberProps = ScrubberBaseProps & {
    * @deprecationExpectedRemoval v4
    */
   beaconTransitions?: ScrubberBeaconProps['transitions'];
+  /** Custom styles for individual elements of the Scrubber component */
+  styles?: {
+    /**
+     * Style props applied to the overlay rect which obscures data beyond the
+     * scrubber position. Accepts any Skia `Rect` paint prop (e.g. `color`,
+     * `blendMode`).
+     * @note `color` defaults to `theme.color.bg` and `opacity` defaults to `0.8`
+     * while scrubbing. `opacity` is used as the target for the show/hide
+     * transition rather than a static value.
+     */
+    overlay?: Omit<RectProps, 'x' | 'y' | 'width' | 'height' | 'rect'>;
+    /**
+     * Style props applied to the beacon's Skia group.
+     * @note The animated visibility opacity remains owned by the component.
+     */
+    beacon?: ScrubberBeaconStyle;
+    /**
+     * Style props applied to the scrubber line, forwarded to its `LineComponent`.
+     */
+    line?: ReferenceLineStyles['line'];
+    /**
+     * Style props applied to the scrubber line label.
+     */
+    label?: ReferenceLineStyles['label'];
+    /**
+     * Style props applied to the beacon labels.
+     */
+    beaconLabel?: ChartLabelStyle;
+  };
 };
 export type ScrubberRef = ScrubberBeaconGroupRef;
 /**
@@ -237,6 +286,7 @@ export declare const Scrubber: React.MemoExoticComponent<
     beaconTransitions,
     transitions,
     beaconStroke,
+    styles,
   }: ScrubberProps & {
     ref?: React.Ref<ScrubberRef>;
   }) => import('react/jsx-runtime').JSX.Element | undefined

package/dts/visualizations/chart/scrubber/Scrubber.d.ts.map

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

package/dts/visualizations/chart/scrubber/ScrubberBeaconGroup.d.ts

@@ -30,6 +30,10 @@ export type ScrubberBeaconGroupProps = ScrubberBeaconGroupBaseProps & {
    * @default theme.color.bg
    */
   stroke?: string;
+  /**
+   * Custom styles applied to each beacon group.
+   */
+  style?: ScrubberBeaconProps['style'];
 };
 export declare const ScrubberBeaconGroup: import('react').MemoExoticComponent<
   ({
@@ -39,6 +43,7 @@ export declare const ScrubberBeaconGroup: import('react').MemoExoticComponent<
     transitions,
     BeaconComponent,
     stroke,
+    style,
   }: ScrubberBeaconGroupProps & {
     ref?: React.Ref<ScrubberBeaconGroupRef>;
   }) => import('react/jsx-runtime').JSX.Element[]

package/dts/visualizations/chart/scrubber/ScrubberBeaconGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrubberBeaconGroup.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/scrubber/ScrubberBeaconGroup.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,uBAAuB,EAAE,mBAAmB,EAAqB,MAAM,YAAY,CAAC;AA4HlG,MAAM,MAAM,sBAAsB,GAAG;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,4BAA4B,GAAG;IACzC;;OAEG;IACH,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,4BAA4B,GAAG;IACpE;;OAEG;IACH,WAAW,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAC;IACjD;;;OAGG;IACH,eAAe,CAAC,EAAE,uBAAuB,CAAC;IAC1C;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,mBAAmB,6GAQ3B,wBAAwB,GAAG;IAC5B,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,sBAAsB,CAAC,CAAC;CACzC,+CAwEF,CAAC"}
+{"version":3,"file":"ScrubberBeaconGroup.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/scrubber/ScrubberBeaconGroup.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,uBAAuB,EAAE,mBAAmB,EAAqB,MAAM,YAAY,CAAC;AA8HlG,MAAM,MAAM,sBAAsB,GAAG;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,4BAA4B,GAAG;IACzC;;OAEG;IACH,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,4BAA4B,GAAG;IACpE;;OAEG;IACH,WAAW,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAC;IACjD;;;OAGG;IACH,eAAe,CAAC,EAAE,uBAAuB,CAAC;IAC1C;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;CACtC,CAAC;AAEF,eAAO,MAAM,mBAAmB,oHAS3B,wBAAwB,GAAG;IAC5B,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,sBAAsB,CAAC,CAAC;CACzC,+CAyEF,CAAC"}

package/dts/visualizations/chart/scrubber/ScrubberBeaconLabelGroup.d.ts

@@ -41,6 +41,10 @@ export type ScrubberBeaconLabelGroupProps = ScrubberBeaconLabelGroupBaseProps &
    * Transition configuration for beacon label animations.
    */
   transitions?: ScrubberBeaconProps['transitions'];
+  /**
+   * Custom styles applied to each beacon label.
+   */
+  style?: ScrubberBeaconLabelProps['style'];
 };
 export declare const ScrubberBeaconLabelGroup: import('react').NamedExoticComponent<ScrubberBeaconLabelGroupProps>;
 //# sourceMappingURL=ScrubberBeaconLabelGroup.d.ts.map

package/dts/visualizations/chart/scrubber/ScrubberBeaconLabelGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrubberBeaconLabelGroup.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/scrubber/ScrubberBeaconLabelGroup.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAqB,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAI3E,OAAO,EAKL,KAAK,qBAAqB,EAC3B,MAAM,mBAAmB,CAAC;AAS3B,OAAO,KAAK,EACV,4BAA4B,EAC5B,wBAAwB,EACxB,mBAAmB,EACpB,MAAM,YAAY,CAAC;AAsGpB,MAAM,MAAM,iCAAiC,GAAG;IAC9C;;OAEG;IACH,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,wBAAwB,EAAE,UAAU,GAAG,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC;IAC9E;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B;;OAEG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IACnC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,qBAAqB,CAAC;CAC5C,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG,iCAAiC,GAAG;IAC9E;;;OAGG;IACH,oBAAoB,CAAC,EAAE,4BAA4B,CAAC;IACpD;;OAEG;IACH,WAAW,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,wBAAwB,qEAqNpC,CAAC"}
+{"version":3,"file":"ScrubberBeaconLabelGroup.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/scrubber/ScrubberBeaconLabelGroup.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAqB,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAI3E,OAAO,EAKL,KAAK,qBAAqB,EAC3B,MAAM,mBAAmB,CAAC;AAS3B,OAAO,KAAK,EACV,4BAA4B,EAC5B,wBAAwB,EACxB,mBAAmB,EACpB,MAAM,YAAY,CAAC;AAyGpB,MAAM,MAAM,iCAAiC,GAAG;IAC9C;;OAEG;IACH,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,wBAAwB,EAAE,UAAU,GAAG,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC;IAC9E;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B;;OAEG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IACnC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,qBAAqB,CAAC;CAC5C,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG,iCAAiC,GAAG;IAC9E;;;OAGG;IACH,oBAAoB,CAAC,EAAE,4BAA4B,CAAC;IACpD;;OAEG;IACH,WAAW,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAC;IACjD;;OAEG;IACH,KAAK,CAAC,EAAE,wBAAwB,CAAC,OAAO,CAAC,CAAC;CAC3C,CAAC;AAEF,eAAO,MAAM,wBAAwB,qEAuNpC,CAAC"}

package/esm/carousel/Carousel.js

@@ -1,8 +1,8 @@
 const _excluded = ["ref"],
-  _excluded2 = ["children", "title", "hideNavigation", "hidePagination", "paginationVariant", "drag", "snapMode", "NavigationComponent", "PaginationComponent", "style", "styles", "nextPageAccessibilityLabel", "previousPageAccessibilityLabel", "startAutoplayAccessibilityLabel", "stopAutoplayAccessibilityLabel", "paginationAccessibilityLabel", "onChangePage", "onDragStart", "onDragEnd", "loop", "autoplay", "autoplayInterval"];
+  _excluded2 = ["children", "title", "hideNavigation", "hidePagination", "paginationVariant", "drag", "snapMode", "initialPage", "NavigationComponent", "PaginationComponent", "style", "styles", "nextPageAccessibilityLabel", "previousPageAccessibilityLabel", "startAutoplayAccessibilityLabel", "stopAutoplayAccessibilityLabel", "paginationAccessibilityLabel", "onChangePage", "onDragStart", "onDragEnd", "loop", "autoplay", "autoplayInterval"];
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { memo, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { useCarouselAutoplay } from '@coinbase/cds-common/carousel/useCarouselAutoplay';
@@ -270,6 +270,7 @@ export const Carousel = /*#__PURE__*/memo(_ref4 => {
       paginationVariant,
       drag = 'snap',
       snapMode = 'page',
+      initialPage,
       NavigationComponent = DefaultCarouselNavigation,
       PaginationComponent = DefaultCarouselPagination,
       style,
@@ -288,11 +289,12 @@ export const Carousel = /*#__PURE__*/memo(_ref4 => {
     } = mergedProps,
     props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const carouselScrollX = useRef(0);
+  const hasAppliedInitialPageRef = useRef(false);
   const animationApi = useSpring({
     x: carouselScrollX.current,
     config: animationConfig
   });
-  const [activePageIndex, setActivePageIndex] = useState(0);
+  const [activePageIndex, setActivePageIndex] = useState(() => Math.max(0, initialPage != null ? initialPage : 0));
   const [containerSize, onLayout] = useLayout();
   const [carouselItemRects, setCarouselItemRects] = useState({});
   const [visibleCarouselItems, setVisibleCarouselItems] = useState(new Set());
@@ -424,18 +426,35 @@ export const Carousel = /*#__PURE__*/memo(_ref4 => {
     enabled: autoplay != null ? autoplay : false,
     interval: autoplayInterval
   });
-  const goToPage = useCallback(page => {
+  const goToPage = useCallback(function (page, _temp) {
+    let {
+      animate: shouldAnimate = true
+    } = _temp === void 0 ? {} : _temp;
     const newPage = Math.max(0, Math.min(totalPages - 1, page));
     updateActivePageIndex(newPage);
     updateVisibleCarouselItems(pageOffsets[newPage]);
     const targetOffset = isLoopingActive ? findNearestLoopOffset(carouselScrollX.current, [pageOffsets[newPage]], loopLength).offset : pageOffsets[newPage];
     carouselScrollX.current = targetOffset;
-    animationApi.x.start({
-      to: targetOffset,
-      config: animationConfig
-    });
+    if (shouldAnimate) {
+      animationApi.x.start({
+        to: targetOffset,
+        config: animationConfig
+      });
+    } else {
+      animationApi.x.set(targetOffset);
+    }
     reset();
   }, [totalPages, updateActivePageIndex, updateVisibleCarouselItems, pageOffsets, isLoopingActive, loopLength, animationApi.x, reset]);
+  useLayoutEffect(() => {
+    if (hasAppliedInitialPageRef.current || totalPages === 0) return;
+    hasAppliedInitialPageRef.current = true;
+    const targetPage = initialPage != null ? initialPage : 0;
+    if (targetPage > 0) {
+      goToPage(targetPage, {
+        animate: false
+      });
+    }
+  }, [totalPages, initialPage, goToPage]);
   useImperativeHandle(ref, () => ({
     activePageIndex,
     totalPages,

package/esm/carousel/__stories__/Carousel.stories.js

@@ -650,6 +650,30 @@ const ImperativeApiExample = () => {
     })
   });
 };
+const InitialPageExample = () => {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsx(Example, {
+    paddingX: 0,
+    children: /*#__PURE__*/_jsx(Carousel, {
+      initialPage: 2,
+      snapMode: "page",
+      styles: {
+        root: {
+          paddingHorizontal: theme.space[2]
+        },
+        carousel: {
+          gap: theme.space[2]
+        }
+      },
+      title: "Initial Page (opens on page 3)",
+      children: sampleItems.slice(0, 5).map((item, index) => /*#__PURE__*/_jsx(CarouselItem, {
+        id: "initial-page-" + index,
+        width: "100%",
+        children: item
+      }, "initial-page-" + index))
+    })
+  });
+};
 const LoopingExamples = () => {
   const theme = useTheme();
   const horizontalPadding = theme.space[2];
@@ -846,6 +870,6 @@ const AnimatedPaginationExample = () => {
 export default function CarouselScreen() {
   return /*#__PURE__*/_jsxs(ExampleScreen, {
     paddingX: 0,
-    children: [/*#__PURE__*/_jsx(BasicExamples, {}), /*#__PURE__*/_jsx(CustomComponentsExample, {}), /*#__PURE__*/_jsx(DynamicContentExample, {}), /*#__PURE__*/_jsx(AnimatedExample, {}), /*#__PURE__*/_jsx(ImperativeApiExample, {}), /*#__PURE__*/_jsx(AnimatedPaginationExample, {}), /*#__PURE__*/_jsx(LoopingExamples, {}), /*#__PURE__*/_jsx(AutoplayExample, {})]
+    children: [/*#__PURE__*/_jsx(BasicExamples, {}), /*#__PURE__*/_jsx(CustomComponentsExample, {}), /*#__PURE__*/_jsx(DynamicContentExample, {}), /*#__PURE__*/_jsx(AnimatedExample, {}), /*#__PURE__*/_jsx(ImperativeApiExample, {}), /*#__PURE__*/_jsx(AnimatedPaginationExample, {}), /*#__PURE__*/_jsx(LoopingExamples, {}), /*#__PURE__*/_jsx(AutoplayExample, {}), /*#__PURE__*/_jsx(InitialPageExample, {})]
   });
 }

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

@@ -1,3 +1,4 @@
+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 } from 'react';
 import { useDerivedValue } from 'react-native-reanimated';
 import { useTheme } from '../../../hooks/useTheme';
@@ -6,6 +7,14 @@ import { unwrapAnimatedValue } from '../utils/chart';
 import { getPointOnSerializableScale } from '../utils/point';
 import { DefaultReferenceLineLabel } from './DefaultReferenceLineLabel';
 import { DottedLine } from './DottedLine';
+
+/**
+ * Cosmetic style props for a chart text label (reference line or scrubber label).
+ * Positioning, sizing, and animated opacity remain owned by the component; only
+ * visual styling is exposed.
+ */
+
+/** Custom styles for the individual elements of a reference line. */
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export const ReferenceLine = /*#__PURE__*/memo(_ref => {
   let {
@@ -25,7 +34,8 @@ export const ReferenceLine = /*#__PURE__*/memo(_ref => {
     labelBoundsInset,
     stroke,
     strokeWidth,
-    opacity = 1
+    opacity = 1,
+    styles
   } = _ref;
   const theme = useTheme();
   const {
@@ -78,13 +88,13 @@ export const ReferenceLine = /*#__PURE__*/memo(_ref => {
       labelX = drawingArea.x + drawingArea.width;
     }
     return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(LineComponent, {
+      children: [/*#__PURE__*/_jsx(LineComponent, _extends({
         animate: false,
-        d: horizontalLine,
         stroke: effectiveLineStroke,
-        strokeOpacity: opacity,
-        strokeWidth: strokeWidth
-      }), label && /*#__PURE__*/_jsx(LabelComponent, {
+        strokeWidth: strokeWidth,
+        d: horizontalLine,
+        strokeOpacity: opacity
+      }, styles == null ? void 0 : styles.line)), label && /*#__PURE__*/_jsx(LabelComponent, _extends({
         boundsInset: labelBoundsInset,
         dx: labelDx,
         dy: labelDy,
@@ -94,9 +104,10 @@ export const ReferenceLine = /*#__PURE__*/memo(_ref => {
         opacity: labelOpacity,
         verticalAlignment: labelVerticalAlignment != null ? labelVerticalAlignment : isHorizontal ? 'middle' : undefined,
         x: labelX,
-        y: labelYPixel,
+        y: labelYPixel
+      }, styles == null ? void 0 : styles.label, {
         children: label
-      })]
+      }))]
     });
   }
 
@@ -111,13 +122,13 @@ export const ReferenceLine = /*#__PURE__*/memo(_ref => {
       labelY = drawingArea.y + drawingArea.height;
     }
     return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(LineComponent, {
+      children: [/*#__PURE__*/_jsx(LineComponent, _extends({
         animate: false,
-        d: verticalLine,
         stroke: effectiveLineStroke,
-        strokeOpacity: opacity,
-        strokeWidth: strokeWidth
-      }), label && /*#__PURE__*/_jsx(LabelComponent, {
+        strokeWidth: strokeWidth,
+        d: verticalLine,
+        strokeOpacity: opacity
+      }, styles == null ? void 0 : styles.line)), label && /*#__PURE__*/_jsx(LabelComponent, _extends({
         boundsInset: labelBoundsInset,
         dx: labelDx,
         dy: labelDy,
@@ -127,9 +138,10 @@ export const ReferenceLine = /*#__PURE__*/memo(_ref => {
         opacity: labelOpacity,
         verticalAlignment: labelVerticalAlignment,
         x: labelXPixel,
-        y: labelY,
+        y: labelY
+      }, styles == null ? void 0 : styles.label, {
         children: label
-      })]
+      }))]
     });
   }
 });

package/esm/visualizations/chart/scrubber/DefaultScrubberBeacon.js

@@ -1,3 +1,4 @@
+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, useEffect, useImperativeHandle, useMemo } from 'react';
 import { cancelAnimation, Easing, useAnimatedReaction, useDerivedValue, useSharedValue, withDelay, withRepeat, withSequence, withTiming } from 'react-native-reanimated';
 import { Circle, Group } from '@shopify/react-native-skia';
@@ -33,7 +34,8 @@ export const DefaultScrubberBeacon = /*#__PURE__*/memo(_ref => {
     opacity: opacityProp = 1,
     radius = defaultRadius,
     stroke,
-    strokeWidth = defaultStrokeWidth
+    strokeWidth = defaultStrokeWidth,
+    style
   } = _ref;
   const theme = useTheme();
   const {
@@ -163,8 +165,9 @@ export const DefaultScrubberBeacon = /*#__PURE__*/memo(_ref => {
     const userOpacity = unwrapAnimatedValue(opacityProp);
     return isWithinDrawingArea ? userOpacity : 0;
   }, [targetPoint, drawingArea, opacityProp]);
-  return /*#__PURE__*/_jsxs(Group, {
-    opacity: beaconOpacity,
+  return /*#__PURE__*/_jsxs(Group, _extends({
+    opacity: beaconOpacity
+  }, style, {
     children: [/*#__PURE__*/_jsx(Circle, {
       c: animatedPoint,
       color: color,
@@ -179,5 +182,5 @@ export const DefaultScrubberBeacon = /*#__PURE__*/memo(_ref => {
       color: color,
       r: radius - strokeWidth / 2
     })]
-  });
+  }));
 });

package/esm/visualizations/chart/scrubber/DefaultScrubberBeaconLabel.js

@@ -1,4 +1,4 @@
-const _excluded = ["background", "color", "elevated", "borderRadius", "font", "verticalAlignment", "inset", "label"];
+const _excluded = ["background", "color", "elevated", "borderRadius", "font", "verticalAlignment", "inset", "label", "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 { memo } from 'react';
@@ -24,7 +24,8 @@ export const DefaultScrubberBeaconLabel = /*#__PURE__*/memo(_ref => {
         top: labelVerticalInset,
         bottom: labelVerticalInset
       },
-      label
+      label,
+      style
     } = _ref,
     chartTextProps = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
@@ -37,7 +38,7 @@ export const DefaultScrubberBeaconLabel = /*#__PURE__*/memo(_ref => {
     inset: inset,
     repositionAxes: "none",
     verticalAlignment: verticalAlignment
-  }, chartTextProps, {
+  }, chartTextProps, style, {
     children: label
   }));
 });

package/esm/visualizations/chart/scrubber/Scrubber.js

@@ -1,4 +1,6 @@
+const _excluded = ["opacity"];
 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, { memo, useCallback, useEffect, useImperativeHandle, useMemo } from 'react';
 import { runOnJS, useAnimatedReaction, useDerivedValue, useSharedValue } from 'react-native-reanimated';
 import { Group, Paint, Rect } from '@shopify/react-native-skia';
@@ -12,11 +14,17 @@ import { DefaultScrubberBeacon } from './DefaultScrubberBeacon';
 import { DefaultScrubberLabel } from './DefaultScrubberLabel';
 import { ScrubberBeaconGroup } from './ScrubberBeaconGroup';
 import { ScrubberBeaconLabelGroup } from './ScrubberBeaconLabelGroup';
+
+/**
+ * Style props applied to the beacon's Skia group. Positioning and the animated
+ * visibility opacity remain owned by the component.
+ */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Unified component that manages all scrubber elements (beacons, line, labels).
  */
 export const Scrubber = /*#__PURE__*/memo(_ref => {
+  var _styles$overlay;
   let {
     ref,
     seriesIds,
@@ -40,7 +48,8 @@ export const Scrubber = /*#__PURE__*/memo(_ref => {
     idlePulse,
     beaconTransitions,
     transitions = beaconTransitions,
-    beaconStroke
+    beaconStroke,
+    styles
   } = _ref;
   const theme = useTheme();
   const beaconGroupRef = React.useRef(null);
@@ -93,9 +102,18 @@ export const Scrubber = /*#__PURE__*/memo(_ref => {
   const lineOpacity = useDerivedValue(() => {
     return scrubberPosition.value !== undefined ? 1 : 0;
   }, [scrubberPosition]);
+
+  // Pull `opacity` out of the overlay style so it can drive the animated
+  // show/hide transition rather than being applied as a static value.
+  const _ref2 = (_styles$overlay = styles == null ? void 0 : styles.overlay) != null ? _styles$overlay : {},
+    {
+      opacity: overlayStyleOpacity
+    } = _ref2,
+    overlayStyle = _objectWithoutPropertiesLoose(_ref2, _excluded);
+  const overlayActiveOpacity = overlayStyleOpacity != null ? overlayStyleOpacity : 0.8;
   const overlayOpacity = useDerivedValue(() => {
-    return scrubberPosition.value !== undefined ? 0.8 : 0;
-  }, [scrubberPosition]);
+    return scrubberPosition.value !== undefined ? overlayActiveOpacity : 0;
+  }, [scrubberPosition, overlayActiveOpacity]);
   const pixelPosition = useDerivedValue(() => {
     if (dataValue.value === undefined || !indexScale) return undefined;
     return getPointOnSerializableScale(dataValue.value, indexScale);
@@ -161,14 +179,14 @@ export const Scrubber = /*#__PURE__*/memo(_ref => {
     layer: /*#__PURE__*/_jsx(Paint, {
       opacity: scrubberOpacity
     }),
-    children: [!hideOverlay && /*#__PURE__*/_jsx(Rect, {
+    children: [!hideOverlay && /*#__PURE__*/_jsx(Rect, _extends({
       color: theme.color.bg,
       height: overlayHeight,
       opacity: overlayOpacity,
       width: overlayWidth,
       x: overlayX,
       y: overlayY
-    }), !hideLine && /*#__PURE__*/_jsx(ReferenceLine, _extends({
+    }, overlayStyle)), !hideLine && /*#__PURE__*/_jsx(ReferenceLine, _extends({
       LabelComponent: LabelComponent,
       LineComponent: LineComponent
     }, categoryAxisIsX ? {
@@ -181,13 +199,18 @@ export const Scrubber = /*#__PURE__*/memo(_ref => {
       labelElevated: labelElevated,
       labelFont: labelFont,
       opacity: lineOpacity,
-      stroke: lineStroke
+      stroke: lineStroke,
+      styles: {
+        line: styles == null ? void 0 : styles.line,
+        label: styles == null ? void 0 : styles.label
+      }
     })), /*#__PURE__*/_jsx(ScrubberBeaconGroup, {
       ref: beaconGroupRef,
       BeaconComponent: BeaconComponent,
       idlePulse: idlePulse,
       seriesIds: filteredSeriesIds,
       stroke: beaconStroke,
+      style: styles == null ? void 0 : styles.beacon,
       transitions: transitions
     }), showBeaconLabels && /*#__PURE__*/_jsx(ScrubberBeaconLabelGroup, {
       BeaconLabelComponent: BeaconLabelComponent,
@@ -196,6 +219,7 @@ export const Scrubber = /*#__PURE__*/memo(_ref => {
       labelMinGap: beaconLabelMinGap,
       labelPreferredSide: beaconLabelPreferredSide,
       labels: beaconLabels,
+      style: styles == null ? void 0 : styles.beaconLabel,
       transitions: transitions
     })]
   });

package/esm/visualizations/chart/scrubber/ScrubberBeaconGroup.js

@@ -20,7 +20,8 @@ const BeaconWithData = /*#__PURE__*/memo(_ref => {
     animate,
     transitions,
     beaconRef,
-    stroke
+    stroke,
+    style
   } = _ref;
   const {
     layout,
@@ -95,6 +96,7 @@ const BeaconWithData = /*#__PURE__*/memo(_ref => {
     isIdle: isIdle,
     seriesId: seriesId,
     stroke: stroke,
+    style: style,
     transitions: transitions
   });
 });
@@ -105,7 +107,8 @@ export const ScrubberBeaconGroup = /*#__PURE__*/memo(_ref2 => {
     idlePulse,
     transitions,
     BeaconComponent = DefaultScrubberBeacon,
-    stroke
+    stroke,
+    style
   } = _ref2;
   const ScrubberBeaconRefs = useRefMap();
   const {
@@ -166,6 +169,7 @@ export const ScrubberBeaconGroup = /*#__PURE__*/memo(_ref2 => {
     isIdle: isIdle,
     seriesId: s.id,
     stroke: stroke,
+    style: style,
     transitions: transitions
   }, s.id));
 });

package/esm/visualizations/chart/scrubber/ScrubberBeaconLabelGroup.js

@@ -22,7 +22,8 @@ const PositionedLabel = /*#__PURE__*/memo(_ref => {
     onDimensionsChange,
     BeaconLabelComponent,
     labelHorizontalOffset,
-    labelFont
+    labelFont,
+    style
   } = _ref;
   const opacity = useDerivedValue(() => positions.value[index] !== null ? 1 : 0, [positions, index]);
   const x = useDerivedValue(() => {
@@ -74,6 +75,7 @@ const PositionedLabel = /*#__PURE__*/memo(_ref => {
     onDimensionsChange: d => onDimensionsChange(seriesId, d),
     opacity: opacity,
     seriesId: seriesId,
+    style: style,
     x: x,
     y: y
   });
@@ -86,7 +88,8 @@ export const ScrubberBeaconLabelGroup = /*#__PURE__*/memo(_ref2 => {
     labelFont,
     labelPreferredSide = 'right',
     BeaconLabelComponent = DefaultScrubberBeaconLabel,
-    transitions
+    transitions,
+    style
   } = _ref2;
   const {
     getSeries,
@@ -227,6 +230,7 @@ export const ScrubberBeaconLabelGroup = /*#__PURE__*/memo(_ref2 => {
       position: currentPosition,
       positions: allLabelPositions,
       seriesId: info.seriesId,
+      style: style,
       updateTransition: updateTransition
     }, info.seriesId);
   });

package/esm/visualizations/chart/scrubber/__stories__/Scrubber.stories.js

@@ -704,6 +704,76 @@ const HideOverlay = () => {
     })
   });
 };
+const CustomOverlay = () => {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsx(LineChart, {
+    enableScrubbing: true,
+    showArea: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
+    height: 150,
+    series: [{
+      id: 'prices',
+      data: sampleData
+    }],
+    children: /*#__PURE__*/_jsx(Scrubber, {
+      styles: {
+        overlay: {
+          color: theme.color.bgAlternate,
+          opacity: 0.6
+        }
+      }
+    })
+  });
+};
+const CustomStyles = () => {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsx(LineChart, {
+    enableScrubbing: true,
+    showArea: true,
+    showYAxis: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
+    height: 200,
+    inset: {
+      top: 40
+    },
+    series: [{
+      id: 'prices',
+      data: sampleData,
+      label: 'Price'
+    }],
+    yAxis: {
+      showGrid: true
+    },
+    children: /*#__PURE__*/_jsx(Scrubber, {
+      hideBeaconLabels: false,
+      label: dataIndex => "Day " + (dataIndex + 1),
+      labelElevated: true,
+      styles: {
+        overlay: {
+          color: theme.color.bgAlternate,
+          opacity: 0.6
+        },
+        beacon: {
+          blendMode: 'multiply'
+        },
+        line: {
+          stroke: theme.color.fgPrimary,
+          strokeWidth: 2
+        },
+        label: {
+          color: theme.color.fgInverse,
+          background: theme.color.fgPrimary
+        },
+        beaconLabel: {
+          color: theme.color.fgInverse,
+          background: theme.color.fgPrimary
+        }
+      }
+    })
+  });
+};
 const matchupBlueData = [47, 50, 51, 52, 53, 53, 53, 53, 52, 51, 51, 52, 53, 55, 57, 58, 59, 61, 63, 65, 64, 64, 64, 64, 64, 63, 63, 63, 64, 66, 68, 70, 71, 72, 74, 76, 76, 75, 74, 73, 74, 75, 75, 78];
 const matchupRedData = matchupBlueData.map(value => 100 - value);
 const matchupTeamLabels = {
@@ -890,6 +960,12 @@ const ExampleNavigator = () => {
   }, {
     title: 'Hide Overlay',
     component: /*#__PURE__*/_jsx(HideOverlay, {})
+  }, {
+    title: 'Custom Overlay',
+    component: /*#__PURE__*/_jsx(CustomOverlay, {})
+  }, {
+    title: 'Custom Styles',
+    component: /*#__PURE__*/_jsx(CustomStyles, {})
   }, {
     title: 'Matchup Beacon Labels',
     component: /*#__PURE__*/_jsx(MatchupBeaconLabels, {})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "9.22.1",
+  "version": "9.24.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -218,7 +218,7 @@
     "react-native-worklets": "0.5.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.22.1",
+    "@coinbase/cds-common": "^9.24.0",
     "@coinbase/cds-icons": "^5.22.0",
     "@coinbase/cds-illustrations": "^4.48.0",
     "@coinbase/cds-lottie-files": "^3.3.4",