@coinbase/cds-mobile 9.15.0 → 9.17.0

package/CHANGELOG.md

@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.17.0 (8/14/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: support charts gradients for bars. [[#844](https://github.com/coinbase/cds/pull/844)]
+
+## 9.16.0 (8/13/2026 PST)
+
+#### 🚀 Updates
+
+- Deprecate invertColorScheme in favor of new, canoncical active prop for the Chip family of props. [[#843](https://github.com/coinbase/cds/pull/843)]
+
 ## 9.15.0 (8/11/2026 PST)
 
 #### 🚀 Updates

package/dts/alpha/select-chip/SelectChip.d.ts

@@ -1,18 +1,8 @@
 import React from 'react';
-import type { ChipBaseProps } from '../../chips/ChipProps';
 import { type SelectRef } from '../select/Select';
 import type { SelectProps, SelectType } from '../select/types';
-export type SelectChipBaseProps = Pick<
-  ChipBaseProps,
-  'invertColorScheme' | 'numberOfLines' | 'maxWidth' | 'size' | 'compact'
-> & {
-  /**
-   * Override the displayed value in the chip control.
-   * Useful for avoiding truncation, especially in multi-select scenarios where multiple option labels might be too long to display.
-   * When provided, this value takes precedence over the default label generation.
-   */
-  displayValue?: React.ReactNode;
-};
+import { type SelectChipControlChipProps, type SelectChipControlProps } from './SelectChipControl';
+export type SelectChipBaseProps = Pick<SelectChipControlProps, keyof SelectChipControlChipProps>;
 export type SelectChipProps<
   Type extends SelectType = 'single',
   SelectOptionValue extends string = string,
@@ -26,6 +16,10 @@ export type SelectChipProps<
     | 'maxWidth'
     | 'size'
     | 'compact'
+    | 'bordered'
+    | 'borderWidth'
+    | 'borderColor'
+    | 'borderRadius'
   >;
 export declare const SelectChip: <
   Type extends SelectType = 'single',

package/dts/alpha/select-chip/SelectChip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectChip.d.ts","sourceRoot":"","sources":["../../../src/alpha/select-chip/SelectChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,OAAO,EAAU,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,KAAK,EAAsB,WAAW,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAInF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,aAAa,EACb,mBAAmB,GAAG,eAAe,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CACxE,GAAG;IACF;;;;OAIG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,eAAe,CACzB,IAAI,SAAS,UAAU,GAAG,QAAQ,EAClC,iBAAiB,SAAS,MAAM,GAAG,MAAM,IACvC,mBAAmB,GACrB,IAAI,CACF,WAAW,CAAC,IAAI,EAAE,iBAAiB,CAAC,EAClC,wBAAwB,GACxB,YAAY,GACZ,cAAc,GACd,SAAS,GACT,UAAU,GACV,MAAM,GACN,SAAS,CACZ,CAAC;AAgDJ,eAAO,MAAM,UAAU,EAA0B,CAC/C,IAAI,SAAS,UAAU,GAAG,QAAQ,EAClC,iBAAiB,SAAS,MAAM,GAAG,MAAM,EAEzC,KAAK,EAAE,eAAe,CAAC,IAAI,EAAE,iBAAiB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;CAAE,KAC7E,KAAK,CAAC,YAAY,CAAC"}
+{"version":3,"file":"SelectChip.d.ts","sourceRoot":"","sources":["../../../src/alpha/select-chip/SelectChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAI7C,OAAO,EAAU,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,KAAK,EAAsB,WAAW,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAEnF,OAAO,EAEL,KAAK,0BAA0B,EAC/B,KAAK,sBAAsB,EAC5B,MAAM,qBAAqB,CAAC;AAI7B,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,sBAAsB,EAAE,MAAM,0BAA0B,CAAC,CAAC;AAEjG,MAAM,MAAM,eAAe,CACzB,IAAI,SAAS,UAAU,GAAG,QAAQ,EAClC,iBAAiB,SAAS,MAAM,GAAG,MAAM,IACvC,mBAAmB,GACrB,IAAI,CACF,WAAW,CAAC,IAAI,EAAE,iBAAiB,CAAC,EAClC,wBAAwB,GACxB,YAAY,GACZ,cAAc,GACd,SAAS,GACT,UAAU,GACV,MAAM,GACN,SAAS,GACT,UAAU,GACV,aAAa,GACb,aAAa,GACb,cAAc,CACjB,CAAC;AAuHJ,eAAO,MAAM,UAAU,EAA0B,CAC/C,IAAI,SAAS,UAAU,GAAG,QAAQ,EAClC,iBAAiB,SAAS,MAAM,GAAG,MAAM,EAEzC,KAAK,EAAE,eAAe,CAAC,IAAI,EAAE,iBAAiB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;CAAE,KAC7E,KAAK,CAAC,YAAY,CAAC"}

package/dts/alpha/select-chip/SelectChipControl.d.ts

@@ -1,14 +1,58 @@
 import React from 'react';
 import type { View } from 'react-native';
+import type { ChipBaseProps } from '../../chips/ChipProps';
 import { type SelectControlProps, type SelectType } from '../select/types';
-import type { SelectChipBaseProps } from './SelectChip';
+/**
+ * Chip props accepted by {@link SelectChipControl} and forwarded to {@link MediaChip}.
+ * Includes selection state, layout, borders, and `displayValue` for the control label.
+ */
+export type SelectChipControlChipProps = Pick<
+  ChipBaseProps,
+  | 'active'
+  | 'activeBackground'
+  | 'activeColor'
+  | 'background'
+  | 'color'
+  | 'invertColorScheme'
+  | 'inverted'
+  | 'numberOfLines'
+  | 'maxWidth'
+  | 'size'
+  | 'compact'
+  | 'borderWidth'
+  | 'borderColor'
+  | 'bordered'
+  | 'borderRadius'
+> & {
+  /**
+   * Override the displayed value in the chip control.
+   * Useful for avoiding truncation, especially in multi-select scenarios where multiple option labels might be too long to display.
+   * When provided, this value takes precedence over the default label generation.
+   */
+  displayValue?: React.ReactNode;
+};
+/**
+ * SelectControlProps fields superseded by {@link SelectChipControlChipProps}.
+ * Omit is required: intersection would merge overlapping keys (e.g. `size` as SelectSize &
+ * ChipSize, `background` as Box vs chip tokens) instead of replacing select-scale definitions.
+ */
+type SelectControlPropsReplacedByChipProps = keyof Pick<
+  SelectControlProps,
+  'size' | 'compact' | 'borderWidth' | 'borderColor' | 'bordered' | 'borderRadius'
+>;
+export type SelectChipControlProps<
+  Type extends SelectType = 'single',
+  SelectOptionValue extends string = string,
+> = Omit<SelectControlProps<Type, SelectOptionValue>, SelectControlPropsReplacedByChipProps> &
+  SelectChipControlChipProps;
+/** Generic memo components need an explicit cast for the public polymorphic signature. */
 export declare const SelectChipControl: <
   Type extends SelectType,
   SelectOptionValue extends string = string,
 >(
-  props: Omit<SelectControlProps<Type, SelectOptionValue>, 'size' | 'compact'> &
-    SelectChipBaseProps & {
-      ref?: React.Ref<View>;
-    },
+  props: SelectChipControlProps<Type, SelectOptionValue> & {
+    ref?: React.Ref<View>;
+  },
 ) => React.ReactElement;
+export {};
 //# sourceMappingURL=SelectChipControl.d.ts.map

package/dts/alpha/select-chip/SelectChipControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectChipControl.d.ts","sourceRoot":"","sources":["../../../src/alpha/select-chip/SelectChipControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAIzC,OAAO,EAEL,KAAK,kBAAkB,EAEvB,KAAK,UAAU,EAChB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AA0JxD,eAAO,MAAM,iBAAiB,EAAiC,CAC7D,IAAI,SAAS,UAAU,EACvB,iBAAiB,SAAS,MAAM,GAAG,MAAM,EAEzC,KAAK,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,iBAAiB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,GAC1E,mBAAmB,GAAG;IACpB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;CACvB,KACA,KAAK,CAAC,YAAY,CAAC"}
+{"version":3,"file":"SelectChipControl.d.ts","sourceRoot":"","sources":["../../../src/alpha/select-chip/SelectChipControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGzC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAG3D,OAAO,EAEL,KAAK,kBAAkB,EAEvB,KAAK,UAAU,EAChB,MAAM,iBAAiB,CAAC;AAEzB;;;GAGG;AACH,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAC3C,aAAa,EACX,QAAQ,GACR,kBAAkB,GAClB,aAAa,GACb,YAAY,GACZ,OAAO,GACP,mBAAmB,GACnB,UAAU,GACV,eAAe,GACf,UAAU,GACV,MAAM,GACN,SAAS,GACT,aAAa,GACb,aAAa,GACb,UAAU,GACV,cAAc,CACjB,GAAG;IACF;;;;OAIG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC,CAAC;AAEF;;;;GAIG;AACH,KAAK,qCAAqC,GAAG,MAAM,IAAI,CACrD,kBAAkB,EAClB,MAAM,GAAG,SAAS,GAAG,aAAa,GAAG,aAAa,GAAG,UAAU,GAAG,cAAc,CACjF,CAAC;AAEF,MAAM,MAAM,sBAAsB,CAChC,IAAI,SAAS,UAAU,GAAG,QAAQ,EAClC,iBAAiB,SAAS,MAAM,GAAG,MAAM,IACvC,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,iBAAiB,CAAC,EAAE,qCAAqC,CAAC,GAC1F,0BAA0B,CAAC;AAmK7B,0FAA0F;AAC1F,eAAO,MAAM,iBAAiB,EAAiC,CAC7D,IAAI,SAAS,UAAU,EACvB,iBAAiB,SAAS,MAAM,GAAG,MAAM,EAEzC,KAAK,EAAE,sBAAsB,CAAC,IAAI,EAAE,iBAAiB,CAAC,GAAG;IACvD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;CACvB,KACE,KAAK,CAAC,YAAY,CAAC"}

package/dts/alpha/select-chip/index.d.ts

@@ -1,3 +1,3 @@
 export * from './SelectChip';
-export * from './SelectChipControl';
+export { SelectChipControl } from './SelectChipControl';
 //# sourceMappingURL=index.d.ts.map

package/dts/alpha/select-chip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/alpha/select-chip/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/alpha/select-chip/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/dts/alpha/tabbed-chips/TabbedChips.d.ts

@@ -16,11 +16,14 @@ export type TabbedChipProps<TabId extends string = string> = Omit<
     Component?: React.FC<Omit<ChipProps, 'children'> & TabValue<TabId>>;
     /**
      * Custom background color applied to the chip when it is the active tab.
-     * When set, takes precedence over the default `invertColorScheme` behavior.
+     * Skips color-scheme inversion and paints this token directly. Any `start`,
+     * `end`, or custom tab content must set explicit colors to match.
      */
     activeBackground?: MediaChipBaseProps['background'];
     /**
      * Custom foreground color applied to the chip label when it is the active tab.
+     * Skips color-scheme inversion when set. Any `start`, `end`, or custom tab
+     * content must set explicit colors to match.
      */
     activeColor?: MediaChipBaseProps['color'];
   };

package/dts/alpha/tabbed-chips/TabbedChips.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabbedChips.d.ts","sourceRoot":"","sources":["../../../src/alpha/tabbed-chips/TabbedChips.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AACpE,OAAO,EAAc,KAAK,SAAS,EAAE,KAAK,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACrF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAE1E,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAG3E,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAO,EAAQ,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AA+B3E,MAAM,MAAM,eAAe,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CAC/D,SAAS,EACT,UAAU,GAAG,SAAS,CACvB,GACC,QAAQ,CAAC,KAAK,CAAC,GAAG;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;IACpE;;;OAGG;IACH,gBAAgB,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IACpD;;OAEG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;CAC3C,CAAC;AAEJ,MAAM,MAAM,oBAAoB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CACpE,aAAa,CAAC,KAAK,CAAC,EAClB,cAAc,GACd,8BAA8B,GAC9B,MAAM,GACN,0BAA0B,GAC1B,kBAAkB,GAClB,aAAa,CAChB,GAAG;IACF,IAAI,EAAE,eAAe,CAAC,KAAK,CAAC,EAAE,CAAC;IAC/B,YAAY,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC;IAChD,4BAA4B,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,8BAA8B,CAAC,CAAC;IAChF;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,oBAAoB,CAAC,KAAK,CAAC,GACvF,WAAW,GACX,wBAAwB,GAAG;IACzB;;;OAGG;IACH,GAAG,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC1B,MAAM,CAAC,EAAE;QACP,6BAA6B;QAC7B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,wBAAwB;QACxB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC7B,CAAC;CACH,CAAC;AAEJ,KAAK,aAAa,GAAG,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EACjD,KAAK,EAAE,gBAAgB,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;CAAE,KAChE,KAAK,CAAC,YAAY,CAAC;AAoFxB,eAAO,MAAM,WAAW,EAA2B,aAAa,CAAC"}
+{"version":3,"file":"TabbedChips.d.ts","sourceRoot":"","sources":["../../../src/alpha/tabbed-chips/TabbedChips.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AACpE,OAAO,EAAc,KAAK,SAAS,EAAE,KAAK,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACrF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAE1E,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAG3E,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAO,EAAQ,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAgC3E,MAAM,MAAM,eAAe,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CAC/D,SAAS,EACT,UAAU,GAAG,SAAS,CACvB,GACC,QAAQ,CAAC,KAAK,CAAC,GAAG;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;IACpE;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IACpD;;;;OAIG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;CAC3C,CAAC;AAEJ,MAAM,MAAM,oBAAoB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CACpE,aAAa,CAAC,KAAK,CAAC,EAClB,cAAc,GACd,8BAA8B,GAC9B,MAAM,GACN,0BAA0B,GAC1B,kBAAkB,GAClB,aAAa,CAChB,GAAG;IACF,IAAI,EAAE,eAAe,CAAC,KAAK,CAAC,EAAE,CAAC;IAC/B,YAAY,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC;IAChD,4BAA4B,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,8BAA8B,CAAC,CAAC;IAChF;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,oBAAoB,CAAC,KAAK,CAAC,GACvF,WAAW,GACX,wBAAwB,GAAG;IACzB;;;OAGG;IACH,GAAG,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC1B,MAAM,CAAC,EAAE;QACP,6BAA6B;QAC7B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,wBAAwB;QACxB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC7B,CAAC;CACH,CAAC;AAEJ,KAAK,aAAa,GAAG,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,EACjD,KAAK,EAAE,gBAAgB,CAAC,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;CAAE,KAChE,KAAK,CAAC,YAAY,CAAC;AAoFxB,eAAO,MAAM,WAAW,EAA2B,aAAa,CAAC"}

package/dts/chips/Chip.d.ts

@@ -13,6 +13,9 @@ export declare const Chip: React.NamedExoticComponent<
       start?: React.ReactNode;
       end?: React.ReactNode;
       maxWidth?: import('react-native').DimensionValue;
+      active?: boolean;
+      activeBackground?: import('../styles/styleProps').StyleProps['background'];
+      activeColor?: import('../styles/styleProps').StyleProps['color'];
       inverted?: boolean;
       invertColorScheme?: boolean;
       compact?: boolean;

package/dts/chips/Chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../src/chips/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAC9C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAUzC,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvD,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC;AAiBpC;;GAEG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;YAuDX,CAAN;eAEM,CAAH;;;UArDK,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC;EA0FrB,CAAC"}
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../src/chips/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AACvD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAUzC,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvD,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC;AAiBpC;;GAEG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;YAuGP,CAAP;eAGmB,CAAC;;;UAtGf,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC;EAwGrB,CAAC"}

package/dts/chips/ChipProps.d.ts

@@ -1,6 +1,7 @@
 import { type DimensionValue, type StyleProp, type ViewStyle } from 'react-native';
 import { type SharedAccessibilityProps } from '@coinbase/cds-common/types/SharedAccessibilityProps';
 import { type SharedProps } from '@coinbase/cds-common/types/SharedProps';
+import type { StyleProps } from '../styles/styleProps';
 import type { PressableProps } from '../system/Pressable';
 export type ChipSize = 'xs' | 's';
 export type ChipBaseProps = SharedProps &
@@ -17,18 +18,50 @@ export type ChipBaseProps = SharedProps &
      * @default 200
      */
     maxWidth?: DimensionValue;
+    /**
+     * When true, emphasizes the Chip with higher contrast by inverting the color
+     * scheme for everything rendered inside the Chip — including `background`,
+     * `color`, icons, and other token-based colors. Those props are resolved
+     * against the opposite color scheme, matching the legacy `invertColorScheme`
+     * behavior.
+     *
+     * Set `activeBackground` and/or `activeColor` to opt out of inversion and
+     * paint explicit active colors instead.
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Background color applied when `active` is true. When set, the Chip skips
+     * color-scheme inversion and uses this token directly.
+     *
+     * **Warning:** `start`, `end`, and `children` ReactNodes are not updated
+     * automatically — pass explicit `color` props on nested icons and other
+     * content so they match the active palette.
+     */
+    activeBackground?: StyleProps['background'];
+    /**
+     * Foreground color applied when `active` is true. When set, the Chip skips
+     * color-scheme inversion and uses this token for string labels.
+     *
+     * **Warning:** `start`, `end`, and `children` ReactNodes are not updated
+     * automatically — pass explicit `color` props on nested icons and other
+     * content so they match the active palette.
+     */
+    activeColor?: StyleProps['color'];
     /**
      * Invert the foreground and background colors to emphasize the Chip.
      * Depending on your theme, it may be dangerous to use this prop in conjunction with `transparentWhileInactive`.
      * @default false
-     * @deprecated Use the invertColorScheme prop instead. This will be removed in a future major release.
-     * @deprecationExpectedRemoval v9
+     * @deprecated Use the `active` prop instead. This will be removed in a future major release.
+     * @deprecationExpectedRemoval v11
      */
     inverted?: boolean;
     /**
      * Invert the foreground and background colors to emphasize the Chip.
      * Depending on your theme, it may be dangerous to use this prop in conjunction with `transparentWhileInactive`.
      * @default false
+     * @deprecated Use the `active` prop instead. This will be removed in a future major release.
+     * @deprecationExpectedRemoval v11
      */
     invertColorScheme?: boolean;
     /**

package/dts/chips/ChipProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChipProps.d.ts","sourceRoot":"","sources":["../../src/chips/ChipProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACnF,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAE1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1D,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,GAAG,CAAC;AAElC,MAAM,MAAM,aAAa,GAAG,WAAW,GACrC,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,CAAC,GACjF,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GAAG;IACrD,iDAAiD;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,wCAAwC;IACxC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,kEAAkE;IAClE,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,sBAAsB;QACtB,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAChC,CAAC;CACH,CAAC;AAEJ,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC;AAEtC,MAAM,MAAM,kBAAkB,GAAG,aAAa,CAAC;AAE/C,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAC7C,SAAS,GAAG;IACV;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC"}
+{"version":3,"file":"ChipProps.d.ts","sourceRoot":"","sources":["../../src/chips/ChipProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACnF,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAE1E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1D,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,GAAG,CAAC;AAElC,MAAM,MAAM,aAAa,GAAG,WAAW,GACrC,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,CAAC,GACjF,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GAAG;IACrD,iDAAiD;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,wCAAwC;IACxC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;;;OAOG;IACH,gBAAgB,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;IAC5C;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAClC;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,kEAAkE;IAClE,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,sBAAsB;QACtB,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAChC,CAAC;CACH,CAAC;AAEJ,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC;AAEtC,MAAM,MAAM,kBAAkB,GAAG,aAAa,CAAC;AAE/C,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAC7C,SAAS,GAAG;IACV;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC"}

package/dts/chips/InputChip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputChip.d.ts","sourceRoot":"","sources":["../../src/chips/InputChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAKzC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGlD,eAAO,MAAM,SAAS,iDAIjB,cAAc,GAAG;IAClB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;CACvB,6CA8BF,CAAC"}
+{"version":3,"file":"InputChip.d.ts","sourceRoot":"","sources":["../../src/chips/InputChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAKzC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGlD,eAAO,MAAM,SAAS,iDAIjB,cAAc,GAAG;IAClB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;CACvB,6CA6CF,CAAC"}

package/dts/chips/MediaChip.d.ts

@@ -10,6 +10,9 @@ export declare const MediaChip: import('react').NamedExoticComponent<
       start?: React.ReactNode;
       end?: React.ReactNode;
       maxWidth?: import('react-native').DimensionValue;
+      active?: boolean;
+      activeBackground?: import('../styles/styleProps').StyleProps['background'];
+      activeColor?: import('../styles/styleProps').StyleProps['color'];
       inverted?: boolean;
       invertColorScheme?: boolean;
       compact?: boolean;

package/dts/chips/MediaChip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MediaChip.d.ts","sourceRoot":"","sources":["../../src/chips/MediaChip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAMzC,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE5D,MAAM,MAAM,kBAAkB,GAAG,aAAa,CAAC;AAC/C,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG,SAAS,CAAC;AAE5D,eAAO,MAAM,SAAS;;;;;;;;;;;;;YAmE0a,CAAC;eAAkE,CAAC;;;UA/D5f,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC;EA8DrB,CAAC"}
+{"version":3,"file":"MediaChip.d.ts","sourceRoot":"","sources":["../../src/chips/MediaChip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAMzC,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE5D,MAAM,MAAM,kBAAkB,GAAG,aAAa,CAAC;AAC/C,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG,SAAS,CAAC;AAE5D,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;YAmEo7D,CAAC;eAAkE,CAAC;;;UA/DtgE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC;EA8DrB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScrubberProvider.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/scrubber/ScrubberProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAOpD,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAI9E,MAAM,MAAM,qBAAqB,GAAG,OAAO,CAAC,IAAI,CAAC,oBAAoB,EAAE,iBAAiB,CAAC,CAAC,GAAG;IAC3F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;OAGG;IACH,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CAChE,CAAC;AAwKF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAM5D,CAAC"}
+{"version":3,"file":"ScrubberProvider.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/scrubber/ScrubberProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAOpD,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAI9E,MAAM,MAAM,qBAAqB,GAAG,OAAO,CAAC,IAAI,CAAC,oBAAoB,EAAE,iBAAiB,CAAC,CAAC,GAAG;IAC3F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;OAGG;IACH,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CAChE,CAAC;AA4KF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAM5D,CAAC"}

package/dts/visualizations/chart/utils/bar.d.ts.map

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

package/dts/visualizations/chart/utils/gradient.d.ts

@@ -97,6 +97,15 @@ export declare const evaluateGradientAtValue: (
   dataValue: number,
   scale: SerializableScale | ChartScaleFunction,
 ) => string | undefined;
+/**
+ * Evaluates the opacity at a specific data value based on gradient stops.
+ * Returns undefined when no stops define opacity.
+ */
+export declare const evaluateGradientOpacityAtValue: (
+  stops: GradientStop[],
+  dataValue: number,
+  scale: SerializableScale | ChartScaleFunction,
+) => number | undefined;
 /**
  * Determines the baseline value for the gradient area by finding the value
  * within the axis bounds that is closest to the target baseline.

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

@@ -1 +1 @@
-{"version":3,"file":"gradient.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/utils/gradient.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AACtD,OAAO,EAEL,KAAK,kBAAkB,EAGvB,KAAK,iBAAiB,EACvB,MAAM,SAAS,CAAC;AAEjB;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB;;;OAGG;IACH,MAAM,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;;OAGG;IACH,KAAK,EAAE,YAAY,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,UAAU,KAAK,YAAY,EAAE,CAAC,CAAC;CAClE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,GAC1B,UAAU,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,EAC1C,QAAQ,oBAAoB,KAC3B,GAAG,GAAG,GAER,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAC3B,OAAO,YAAY,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,UAAU,KAAK,YAAY,EAAE,CAAC,EAChE,QAAQ,UAAU,KACjB,YAAY,EAKd,CAAC;AAiEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,GAAI,QAAQ,MAAM,EAAE,SAAS,MAAM,KAAG,MAGrE,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,iBAAiB,GAC5B,UAAU,kBAAkB,EAC5B,QAAQ,kBAAkB,EAC1B,QAAQ,kBAAkB,EAC1B,QAAQ,oBAAoB,KAC3B,YAAY,EAAE,GAAG,SAsBnB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,uBAAuB,GAClC,OAAO,YAAY,EAAE,EACrB,WAAW,MAAM,EACjB,OAAO,iBAAiB,GAAG,kBAAkB,KAC5C,MAAM,GAAG,SAyFX,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,GAAI,YAAY,UAAU,EAAE,WAAU,MAAU,KAAG,MAc1E,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc,GACzB,YAAY,UAAU,EACtB,eAAe,MAAM,EACrB,MAAM,MAAM,EACZ,aAAa,MAAM,EACnB,iBAAiB,MAAM,EACvB,OAAM,GAAG,GAAG,GAAS,KACpB,kBA0BF,CAAC"}
+{"version":3,"file":"gradient.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/utils/gradient.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AACtD,OAAO,EAEL,KAAK,kBAAkB,EAGvB,KAAK,iBAAiB,EACvB,MAAM,SAAS,CAAC;AAEjB;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB;;;OAGG;IACH,MAAM,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;;OAGG;IACH,KAAK,EAAE,YAAY,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,UAAU,KAAK,YAAY,EAAE,CAAC,CAAC;CAClE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,GAC1B,UAAU,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,EAC1C,QAAQ,oBAAoB,KAC3B,GAAG,GAAG,GAER,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAC3B,OAAO,YAAY,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,UAAU,KAAK,YAAY,EAAE,CAAC,EAChE,QAAQ,UAAU,KACjB,YAAY,EAKd,CAAC;AAiEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,GAAI,QAAQ,MAAM,EAAE,SAAS,MAAM,KAAG,MAGrE,CAAC;AAiGF;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,iBAAiB,GAC5B,UAAU,kBAAkB,EAC5B,QAAQ,kBAAkB,EAC1B,QAAQ,kBAAkB,EAC1B,QAAQ,oBAAoB,KAC3B,YAAY,EAAE,GAAG,SAsBnB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,uBAAuB,GAClC,OAAO,YAAY,EAAE,EACrB,WAAW,MAAM,EACjB,OAAO,iBAAiB,GAAG,kBAAkB,KAC5C,MAAM,GAAG,SAUX,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,8BAA8B,GACzC,OAAO,YAAY,EAAE,EACrB,WAAW,MAAM,EACjB,OAAO,iBAAiB,GAAG,kBAAkB,KAC5C,MAAM,GAAG,SAgBX,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,GAAI,YAAY,UAAU,EAAE,WAAU,MAAU,KAAG,MAc1E,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc,GACzB,YAAY,UAAU,EACtB,eAAe,MAAM,EACrB,MAAM,MAAM,EACZ,aAAa,MAAM,EACnB,iBAAiB,MAAM,EACvB,OAAM,GAAG,GAAG,GAAS,KACpB,kBA0BF,CAAC"}

package/esm/alpha/select-chip/SelectChip.js

@@ -1,12 +1,30 @@
 const _excluded = ["ref"],
-  _excluded2 = ["invertColorScheme", "numberOfLines", "maxWidth", "displayValue", "size", "compact"];
-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); }
+  _excluded2 = ["active", "invertColorScheme", "inverted", "value"],
+  _excluded3 = ["active", "activeBackground", "activeColor", "background", "color", "numberOfLines", "maxWidth", "displayValue", "size", "compact", "borderWidth", "borderColor", "bordered", "borderRadius", "invertColorScheme", "inverted"];
 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 } from 'react';
+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, useMemo } from 'react';
+import { getSelectChipActive } from '@coinbase/cds-common/chips/getSelectChipActive';
 import { useComponentConfig } from '../../hooks/useComponentConfig';
 import { Select } from '../select/Select';
 import { SelectChipControl } from './SelectChipControl';
+
+// TODO(CDS-2544): SelectChipBaseProps should also compose SelectBaseProps.
+// https://linear.app/coinbase/issue/CDS-2544/selectchipbaseprops-should-compose-selectbaseprops
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Creates a wrapper component that injects chip-specific props into SelectChipControl.
+ * Select only forwards generic control props to `SelectControlComponent`; chip styling
+ * and `active` are owned by SelectChip and must be closed over here.
+ */
+function createSelectChipControlWrapper(chipProps) {
+  return /*#__PURE__*/memo(controlProps => {
+    // Chip props are spread last so they win at runtime; the cast bridges overlapping keys
+    // (`size`, borders) where SelectControlProps and SelectChipBaseProps use different types.
+    return /*#__PURE__*/_jsx(SelectChipControl, _extends({}, _extends({}, controlProps, chipProps)));
+  });
+}
+
 /**
  * Chip-styled Select control built on top of the Alpha Select.
  * Supports both single and multi selection via Select's `type` prop.
@@ -16,33 +34,67 @@ const SelectChipComponent = /*#__PURE__*/memo(_ref => {
       ref
     } = _ref,
     _props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const mergedProps = useComponentConfig('SelectChip', _props);
+  // Resolve `active` from instance props before config merge so state-aware resolvers
+  // (active vs inactive border styling) see the final selection state. `value` and
+  // legacy invert props are pulled out with `active` and passed back explicitly because
+  // they feed that resolution and must remain available to the config resolver input.
   const {
+      active: activeProp,
       invertColorScheme,
+      inverted,
+      value
+    } = _props,
+    restProps = _objectWithoutPropertiesLoose(_props, _excluded2);
+  const resolvedActive = getSelectChipActive(activeProp, value, invertColorScheme, inverted);
+  const mergedProps = useComponentConfig('SelectChip', _extends({}, restProps, {
+    value,
+    active: resolvedActive,
+    invertColorScheme,
+    inverted
+  }));
+  // SelectChip composes Select + MediaChip; peel chip props off merged props so the rest
+  // can flow to `<Select>` without chip-only fields leaking into the select interface.
+  const {
+      active,
+      activeBackground,
+      activeColor,
+      background,
+      color,
       numberOfLines,
       maxWidth,
       displayValue,
       size,
-      compact
+      compact,
+      borderWidth,
+      borderColor,
+      bordered,
+      borderRadius,
+      invertColorScheme: mergedInvertColorScheme,
+      inverted: mergedInverted
     } = mergedProps,
-    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
-  // Select doesn't pass the chip-specific props (size/compact/displayValue/etc.) down to the
-  // control, so they're injected here. They're listed AFTER the `controlProps` spread so the
-  // chip-level values win — matching the web SelectChip wrapper.
-  const SelectChipControlComponent = useCallback(controlProps => {
-    return /*#__PURE__*/_jsx(SelectChipControl, _extends({}, controlProps, {
-      compact: compact,
-      displayValue: displayValue,
-      invertColorScheme: invertColorScheme,
-      maxWidth: maxWidth,
-      numberOfLines: numberOfLines,
-      size: size
-    }));
-  }, [displayValue, invertColorScheme, maxWidth, numberOfLines, size, compact]);
+    selectProps = _objectWithoutPropertiesLoose(mergedProps, _excluded3);
+  const WrappedSelectChipControl = useMemo(() => createSelectChipControlWrapper({
+    active,
+    activeBackground,
+    activeColor,
+    background,
+    color,
+    numberOfLines,
+    maxWidth,
+    displayValue,
+    size,
+    compact,
+    borderWidth,
+    borderColor,
+    bordered,
+    borderRadius,
+    invertColorScheme: mergedInvertColorScheme,
+    inverted: mergedInverted
+  }), [active, activeBackground, activeColor, background, color, displayValue, numberOfLines, maxWidth, size, compact, borderWidth, borderColor, bordered, borderRadius, mergedInvertColorScheme, mergedInverted]);
   return /*#__PURE__*/_jsx(Select, _extends({
     ref: ref,
-    SelectControlComponent: SelectChipControlComponent
-  }, props));
+    SelectControlComponent: WrappedSelectChipControl
+  }, selectProps));
 });
 SelectChipComponent.displayName = 'SelectChip';
 export const SelectChip = SelectChipComponent;

package/esm/alpha/select-chip/SelectChipControl.js

@@ -1,7 +1,19 @@
 import React, { memo, useMemo } from 'react';
+import { getSelectChipHasValue } from '@coinbase/cds-common/chips/getSelectChipActive';
 import { MediaChip } from '../../chips/MediaChip';
 import { AnimatedCaret } from '../../motion/AnimatedCaret';
 import { isSelectOptionGroup } from '../select/types';
+
+/**
+ * Chip props accepted by {@link SelectChipControl} and forwarded to {@link MediaChip}.
+ * Includes selection state, layout, borders, and `displayValue` for the control label.
+ */
+
+/**
+ * SelectControlProps fields superseded by {@link SelectChipControlChipProps}.
+ * Omit is required: intersection would merge overlapping keys (e.g. `size` as SelectSize &
+ * ChipSize, `background` as Box vs chip tokens) instead of replacing select-scale definitions.
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
 const SelectChipControlComponent = /*#__PURE__*/memo(_ref => {
   let {
@@ -22,13 +34,23 @@ const SelectChipControlComponent = /*#__PURE__*/memo(_ref => {
     label,
     compact,
     size,
+    active,
+    activeBackground,
+    activeColor,
+    background,
+    color,
     invertColorScheme,
+    inverted,
     numberOfLines,
     maxWidth,
-    displayValue
+    displayValue,
+    borderWidth,
+    borderColor,
+    bordered,
+    borderRadius
   } = _ref;
   const isMultiSelect = type === 'multi';
-  const hasValue = value !== null && !(Array.isArray(value) && value.length === 0);
+  const hasValue = getSelectChipHasValue(value);
 
   // Map of options to their values
   // If multiple options share the same value, the first occurrence wins (matches native HTML select behavior)
@@ -83,30 +105,34 @@ const SelectChipControlComponent = /*#__PURE__*/memo(_ref => {
     const opt = optionsMap.get(value);
     return (_ref6 = (_ref7 = (_ref8 = (_opt$label2 = opt == null ? void 0 : opt.label) != null ? _opt$label2 : opt == null ? void 0 : opt.description) != null ? _ref8 : opt == null ? void 0 : opt.value) != null ? _ref7 : placeholder) != null ? _ref6 : null;
   }, [hasValue, label, placeholder, displayValue, isMultiSelect, optionsMap, value, maxSelectedOptionsToShow, hiddenSelectedOptionsLabel]);
+  const resolvedColor = active && activeColor !== undefined ? activeColor : color;
   const endNode = useMemo(() => {
+    // Match Chip's label color. `fg` still inverts with the chip when active uses theme inversion.
     return customEndNode != null ? customEndNode : /*#__PURE__*/_jsx(AnimatedCaret, {
       active: true,
-      color: hasValue ? 'fgInverse' : 'fg',
+      color: resolvedColor != null ? resolvedColor : 'fg',
       rotate: open ? 0 : 180,
       size: "xs"
     });
-  }, [customEndNode, open, hasValue]);
-  const color = useMemo(() => {
-    return hasValue ? 'fgInverse' : 'fg';
-  }, [hasValue]);
-  const background = useMemo(() => {
-    return hasValue ? 'bgInverse' : 'bgSecondary';
-  }, [hasValue]);
+  }, [customEndNode, open, resolvedColor]);
   return /*#__PURE__*/_jsx(MediaChip, {
     ref: ref,
     accessibilityHint: accessibilityHint,
     accessibilityLabel: accessibilityLabel,
+    active: active,
+    activeBackground: activeBackground,
+    activeColor: activeColor,
     background: background,
+    bordered: bordered,
+    borderColor: borderColor,
+    borderRadius: borderRadius,
+    borderWidth: borderWidth,
     color: color,
     compact: compact,
     disabled: disabled,
     end: endNode,
     invertColorScheme: invertColorScheme,
+    inverted: inverted,
     maxWidth: maxWidth,
     numberOfLines: numberOfLines,
     onPress: () => setOpen(s => !s),
@@ -115,4 +141,7 @@ const SelectChipControlComponent = /*#__PURE__*/memo(_ref => {
     children: labelContent
   });
 });
+SelectChipControlComponent.displayName = 'SelectChipControl';
+
+/** Generic memo components need an explicit cast for the public polymorphic signature. */
 export const SelectChipControl = SelectChipControlComponent;

package/esm/alpha/select-chip/__stories__/AlphaSelectChip.stories.js

@@ -217,7 +217,7 @@ export const MultiSelectWithAssets = () => {
     value: value
   });
 };
-export const InvertColorScheme = () => {
+export const Active = () => {
   const exampleOptions = [{
     value: '1',
     label: 'Option 1'
@@ -231,7 +231,7 @@ export const InvertColorScheme = () => {
     borderRadius: 200,
     padding: 2,
     children: /*#__PURE__*/_jsx(SelectChip, {
-      invertColorScheme: true,
+      active: true,
       onChange: setValue,
       options: exampleOptions,
       placeholder: "Choose an option",
@@ -587,8 +587,8 @@ const SelectChipScreen = () => {
       title: "Multi-Select with Assets",
       children: /*#__PURE__*/_jsx(MultiSelectWithAssets, {})
     }), /*#__PURE__*/_jsx(Example, {
-      title: "Invert Color Scheme",
-      children: /*#__PURE__*/_jsx(InvertColorScheme, {})
+      title: "Active",
+      children: /*#__PURE__*/_jsx(Active, {})
     }), /*#__PURE__*/_jsx(Example, {
       title: "Empty Options",
       children: /*#__PURE__*/_jsx(EmptyOptions, {})

package/esm/alpha/select-chip/index.js

@@ -1,2 +1,2 @@
 export * from './SelectChip';
-export * from './SelectChipControl';
+export { SelectChipControl } from './SelectChipControl';

package/esm/alpha/tabbed-chips/TabbedChips.js

@@ -1,4 +1,4 @@
-const _excluded = ["label", "id", "activeBackground", "activeColor", "color"],
+const _excluded = ["label", "id", "Component", "activeBackground", "activeColor", "color"],
   _excluded2 = ["ref"],
   _excluded3 = ["tabs", "activeTab", "testID", "TabComponent", "onChange", "width", "gap", "compact", "size", "styles", "autoScrollOffset"];
 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); }
@@ -32,9 +32,9 @@ const DefaultTabComponent = _ref => {
     accessibilityState: {
       selected: isActive
     },
+    active: isActive && !activeBackground,
     background: isActive && activeBackground ? activeBackground : undefined,
     color: isActive && activeColor ? activeColor : color,
-    invertColorScheme: isActive && !activeBackground,
     onPress: handlePress
   }, tabProps, {
     children: label

package/esm/chips/Chip.js

@@ -1,8 +1,8 @@
 const _excluded = ["ref"],
-  _excluded2 = ["alignSelf", "children", "start", "end", "invertColorScheme", "inverted", "maxWidth", "compact", "size", "gap", "paddingX", "paddingY", "alignItems", "justifyContent", "padding", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd", "numberOfLines", "testID", "contentStyle", "borderRadius", "background", "style", "styles", "onPress", "color", "font"];
+  _excluded2 = ["alignSelf", "children", "start", "end", "active", "activeBackground", "activeColor", "invertColorScheme", "inverted", "maxWidth", "compact", "size", "gap", "paddingX", "paddingY", "alignItems", "justifyContent", "padding", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd", "numberOfLines", "testID", "contentStyle", "borderRadius", "background", "style", "styles", "onPress", "color", "font"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { Fragment, memo } from 'react';
+import React, { Fragment, memo, useMemo } from 'react';
 import { chipMaxWidth } from '@coinbase/cds-common/tokens/chip';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
@@ -44,6 +44,9 @@ export const Chip = /*#__PURE__*/memo(function Chip(_ref) {
       children,
       start,
       end,
+      active = false,
+      activeBackground,
+      activeColor,
       invertColorScheme,
       inverted,
       maxWidth = chipMaxWidth,
@@ -69,14 +72,20 @@ export const Chip = /*#__PURE__*/memo(function Chip(_ref) {
       font = sizeConfig.font
     } = mergedProps,
     props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
-  const WrapperComponent = (invertColorScheme != null ? invertColorScheme : inverted) ? InvertedThemeProvider : Fragment;
+  const hasActiveColorOverrides = activeBackground !== undefined || activeColor !== undefined;
+  const activeUsesThemeInversion = active && !hasActiveColorOverrides;
+  const shouldInvert = Boolean(invertColorScheme != null ? invertColorScheme : inverted) || activeUsesThemeInversion;
+  const WrapperComponent = shouldInvert ? InvertedThemeProvider : Fragment;
+  const resolvedBackground = active && activeBackground !== undefined ? activeBackground : background;
+  const resolvedColor = active && activeColor !== undefined ? activeColor : color;
+  const containerStyle = useMemo(() => [style, styles == null ? void 0 : styles.root], [style, styles == null ? void 0 : styles.root]);
   const containerProps = {
     testID,
-    background,
+    background: resolvedBackground,
     borderRadius,
     ref,
     alignSelf,
-    style: [style, styles == null ? void 0 : styles.root]
+    style: containerStyle
   };
   const content = /*#__PURE__*/_jsxs(HStack, {
     alignItems: alignItems,
@@ -93,13 +102,13 @@ export const Chip = /*#__PURE__*/memo(function Chip(_ref) {
     style: [contentStyle, styles == null ? void 0 : styles.content],
     testID: testID ? testID + "-content" : undefined,
     children: [start, typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
-      color: color,
+      color: resolvedColor,
       flexShrink: 1,
       font: font,
       numberOfLines: numberOfLines,
       children: children
     }) : children ? /*#__PURE__*/_jsx(Box, {
-      color: color,
+      color: resolvedColor,
       flexShrink: 1,
       children: children
     }) : null, end]

package/esm/chips/InputChip.js

@@ -1,5 +1,6 @@
 const _excluded = ["ref"],
-  _excluded2 = ["value", "children", "accessibilityLabel", "invertColorScheme", "testID"];
+  _excluded2 = ["active", "invertColorScheme", "inverted"],
+  _excluded3 = ["value", "children", "accessibilityLabel", "testID", "active", "invertColorScheme", "inverted"];
 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 } from 'react';
@@ -12,18 +13,33 @@ export const InputChip = /*#__PURE__*/memo(_ref => {
       ref
     } = _ref,
     _props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const mergedProps = useComponentConfig('InputChip', _props);
+  const {
+      active: activeProp,
+      invertColorScheme,
+      inverted
+    } = _props,
+    restProps = _objectWithoutPropertiesLoose(_props, _excluded2);
+  // Default before component config so state-aware resolvers (active borders) see the
+  // same active semantics as the rendered chip.
+  const active = activeProp != null ? activeProp : invertColorScheme === undefined && inverted === undefined ? true : false;
+  const mergedProps = useComponentConfig('InputChip', _extends({}, restProps, {
+    active,
+    invertColorScheme,
+    inverted
+  }));
   const {
       value,
       children = value,
       accessibilityLabel = typeof children === 'string' ? "Remove " + children : 'Remove option',
-      invertColorScheme = true,
-      testID = 'input-chip'
+      testID = 'input-chip',
+      invertColorScheme: mergedInvertColorScheme,
+      inverted: mergedInverted
     } = mergedProps,
-    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded3);
   return /*#__PURE__*/_jsx(MediaChip, _extends({
     ref: ref,
     accessibilityLabel: accessibilityLabel,
+    active: active,
     end: /*#__PURE__*/_jsx(Icon, {
       active: true,
       color: "fg",
@@ -31,7 +47,9 @@ export const InputChip = /*#__PURE__*/memo(_ref => {
       size: "xs",
       testID: testID ? testID + "-close-icon" : 'input-chip-close-icon'
     }),
-    invertColorScheme: invertColorScheme
+    invertColorScheme: mergedInvertColorScheme,
+    inverted: mergedInverted,
+    testID: testID
   }, props, {
     children: children
   }));

package/esm/chips/__stories__/Chip.stories.js

@@ -107,9 +107,9 @@ const ChipScreen = () => /*#__PURE__*/_jsxs(ExampleScreen, {
     title: "Default",
     children: /*#__PURE__*/_jsx(ChipExamples, {})
   }), /*#__PURE__*/_jsx(Example, {
-    title: "Inverted",
+    title: "Active",
     children: /*#__PURE__*/_jsx(ChipExamples, {
-      inverted: true
+      active: true
     })
   }), /*#__PURE__*/_jsx(Example, {
     title: "Size xs",

package/esm/chips/__stories__/MediaChip.stories.js

@@ -81,9 +81,9 @@ const MediaChipScreen = () => /*#__PURE__*/_jsxs(ExampleScreen, {
     title: "Default (Automatic Spacing)",
     children: /*#__PURE__*/_jsx(MediaChipExamples, {})
   }), /*#__PURE__*/_jsx(Example, {
-    title: "Inverted",
+    title: "Active",
     children: /*#__PURE__*/_jsx(MediaChipExamples, {
-      inverted: true
+      active: true
     })
   }), /*#__PURE__*/_jsx(Example, {
     title: "Compact",

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

@@ -99,6 +99,8 @@ const EnabledScrubberProvider = _ref => {
       pan.failOffsetX([-15, 15]);
     }
     return pan.onStart(function onStart(event) {
+      'worklet';
+
       runOnJS(handleStartEndHaptics)();
 
       // Android does not trigger onUpdate when the gesture starts. This achieves consistent behavior across both iOS and Android
@@ -110,15 +112,21 @@ const EnabledScrubberProvider = _ref => {
         }
       }
     }).onUpdate(function onUpdate(event) {
+      'worklet';
+
       const pointerPosition = categoryAxisIsX ? event.x : event.y;
       const newScrubberPosition = getDataIndexFromPosition(pointerPosition);
       if (newScrubberPosition !== scrubberPosition.value) {
         scrubberPosition.value = newScrubberPosition;
       }
     }).onEnd(function onEnd() {
+      'worklet';
+
       runOnJS(handleStartEndHaptics)();
       scrubberPosition.value = undefined;
     }).onTouchesCancelled(function onTouchesCancelled() {
+      'worklet';
+
       scrubberPosition.value = undefined;
     });
   }, [allowOverflowGestures, handleStartEndHaptics, getDataIndexFromPosition, categoryAxisIsX, scrubberPosition]);

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

@@ -2,7 +2,7 @@ const _excluded = ["staggerDelay"];
 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 { defaultAxisId as fallbackAxisId } from './axis';
-import { evaluateGradientAtValue } from './gradient';
+import { evaluateGradientAtValue, evaluateGradientOpacityAtValue } from './gradient';
 import { defaultTransition } from './transition';
 
 /**
@@ -827,6 +827,7 @@ export function getBars(params) {
     const valuePos = Math.min(edgeBottom, edgeTop);
     if (length <= 0) return;
     let barFill = s.color || defaultFill;
+    let barFillOpacity = defaultFillOpacity;
     const seriesGradientConfig = seriesGradients.find(g => (g == null ? void 0 : g.seriesId) === s.id);
     if (seriesGradientConfig && originalValue !== null && originalValue !== undefined) {
       var _seriesGradientConfig;
@@ -841,6 +842,10 @@ export function getBars(params) {
       if (evaluatedColor) {
         barFill = evaluatedColor;
       }
+      const evaluatedOpacity = evaluateGradientOpacityAtValue(seriesGradientConfig.stops, evalValue, seriesGradientConfig.scale);
+      if (evaluatedOpacity !== undefined) {
+        barFillOpacity = defaultFillOpacity !== undefined ? defaultFillOpacity * evaluatedOpacity : evaluatedOpacity;
+      }
     }
     allBars.push({
       seriesId: s.id,
@@ -848,6 +853,7 @@ export function getBars(params) {
       length,
       dataValue: value,
       fill: barFill,
+      fillOpacity: barFillOpacity,
       roundTop,
       roundBottom,
       shouldApplyGap,
@@ -897,7 +903,7 @@ export function getBars(params) {
     dataY: layout === 'vertical' ? bar.dataValue : categoryValue,
     origin: barOrigins[i],
     borderRadius,
-    fillOpacity: defaultFillOpacity,
+    fillOpacity: bar.fillOpacity,
     stroke: defaultStroke,
     strokeWidth: defaultStrokeWidth,
     minSize: initialBarMinSizes[i],

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

@@ -90,6 +90,86 @@ export const getColorWithOpacity = (color1, opacity) => {
   return "rgba(" + c[0] * 255 + ", " + c[1] * 255 + ", " + c[2] * 255 + ", " + opacity + ")";
 };
 
+/**
+ * Returns stop indices and blend progress for a data value.
+ * When startIndex === endIndex, use that stop directly; otherwise blend with t.
+ */
+const getGradientStopInterpolation = (stops, dataValue, scale) => {
+  'worklet';
+
+  if (stops.length === 0) return;
+
+  // Determine range based on scale type
+  let rangeMin;
+  let rangeMax;
+  if (isSerializableScale(scale)) {
+    // SerializableScale has range as [number, number]
+    [rangeMin, rangeMax] = scale.range;
+  } else {
+    // ChartScaleFunction has range() method
+    const scaleRange = scale.range();
+    [rangeMin, rangeMax] = Array.isArray(scaleRange) ? scaleRange : [scaleRange, scaleRange]; // fallback for band scales
+  }
+  const rangeSpan = Math.abs(rangeMax - rangeMin);
+  if (rangeSpan === 0) return [0, 0, 0];
+
+  // Map dataValue through scale to get position
+  let dataPosition;
+  if (isSerializableScale(scale)) {
+    dataPosition = applySerializableScale(dataValue, scale);
+  } else {
+    const result = scale(dataValue);
+    if (result === undefined) return [0, 0, 0];
+    dataPosition = result;
+  }
+
+  // Normalize to 0-1 based on range
+  const normalizedValue = Math.max(0, Math.min(1, Math.abs(dataPosition - rangeMin) / rangeSpan));
+
+  // Map stop offsets through scale and normalize to 0-1
+  const positions = stops.map(stop => {
+    let stopPosition;
+    if (isSerializableScale(scale)) {
+      stopPosition = applySerializableScale(stop.offset, scale);
+    } else {
+      const result = scale(stop.offset);
+      if (result === undefined) return 0;
+      stopPosition = result;
+    }
+    return Math.max(0, Math.min(1, Math.abs(stopPosition - rangeMin) / rangeSpan));
+  });
+
+  // Find which segment we're in
+  if (normalizedValue < positions[0]) return [0, 0, 0];
+  const lastIndex = stops.length - 1;
+  if (normalizedValue >= positions[lastIndex]) return [lastIndex, lastIndex, 0];
+
+  // Check if dataValue matches any stop offset exactly (for hard transitions)
+  for (let i = 0; i < stops.length; i++) {
+    if (dataValue === stops[i].offset) {
+      // Found exact match - check if there are multiple stops at this offset (hard transition)
+      // Use the LAST stop at this offset for hard transitions
+      let lastIndexAtOffset = i;
+      while (lastIndexAtOffset + 1 < stops.length && stops[lastIndexAtOffset + 1].offset === stops[i].offset) {
+        lastIndexAtOffset++;
+      }
+      return [lastIndexAtOffset, lastIndexAtOffset, 0];
+    }
+  }
+
+  // Find the segment to interpolate between
+  for (let i = 0; i < positions.length - 1; i++) {
+    if (normalizedValue >= positions[i] && normalizedValue <= positions[i + 1]) {
+      const segmentStart = positions[i];
+      const segmentEnd = positions[i + 1];
+      if (segmentEnd === segmentStart) return [i, i, 0];
+      const t = (normalizedValue - segmentStart) / (segmentEnd - segmentStart);
+      return [i, i + 1, t];
+    }
+  }
+  return [0, 0, 0];
+};
+
 /**
  * Creates a gradient configuration for SVG components.
  * Processes a GradientDefinition into a renderable GradientConfig.
@@ -157,82 +237,33 @@ export const getGradientConfig = (gradient, xScale, yScale, layout) => {
 export const evaluateGradientAtValue = (stops, dataValue, scale) => {
   'worklet';
 
-  if (stops.length === 0) return;
-
-  // Determine range based on scale type
-  let rangeMin;
-  let rangeMax;
-  if (isSerializableScale(scale)) {
-    // SerializableScale has range as [number, number]
-    [rangeMin, rangeMax] = scale.range;
-  } else {
-    // ChartScaleFunction has range() method
-    const scaleRange = scale.range();
-    [rangeMin, rangeMax] = Array.isArray(scaleRange) ? scaleRange : [scaleRange, scaleRange]; // fallback for band scales
-  }
-  const rangeSpan = Math.abs(rangeMax - rangeMin);
-  if (rangeSpan === 0) return stops[0].color;
-
-  // Map dataValue through scale to get position
-  let dataPosition;
-  if (isSerializableScale(scale)) {
-    dataPosition = applySerializableScale(dataValue, scale);
-  } else {
-    const result = scale(dataValue);
-    if (result === undefined) return stops[0].color;
-    dataPosition = result;
-  }
-
-  // Normalize to 0-1 based on range
-  const normalizedValue = Math.max(0, Math.min(1, Math.abs(dataPosition - rangeMin) / rangeSpan));
-
-  // Map stop offsets through scale and normalize to 0-1
-  const positions = stops.map(stop => {
-    let stopPosition;
-    if (isSerializableScale(scale)) {
-      stopPosition = applySerializableScale(stop.offset, scale);
-    } else {
-      const result = scale(stop.offset);
-      if (result === undefined) return 0;
-      stopPosition = result;
-    }
-    return Math.max(0, Math.min(1, Math.abs(stopPosition - rangeMin) / rangeSpan));
-  });
-
-  // Find which segment we're in
-  if (normalizedValue < positions[0]) {
-    return stops[0].color;
-  }
-  if (normalizedValue >= positions[positions.length - 1]) {
-    return stops[stops.length - 1].color;
-  }
+  const interpolation = getGradientStopInterpolation(stops, dataValue, scale);
+  if (!interpolation) return;
+  const [startIndex, endIndex, t] = interpolation;
+  if (startIndex === endIndex) return stops[startIndex].color;
+  return interpolateColor(stops[startIndex].color, stops[endIndex].color, t);
+};
 
-  // Check if dataValue matches any stop offset exactly (for hard transitions)
-  for (let i = 0; i < stops.length; i++) {
-    if (dataValue === stops[i].offset) {
-      // Found exact match - check if there are multiple stops at this offset (hard transition)
-      // Use the LAST color at this offset for hard transitions
-      let lastIndexAtOffset = i;
-      while (lastIndexAtOffset + 1 < stops.length && stops[lastIndexAtOffset + 1].offset === stops[i].offset) {
-        lastIndexAtOffset++;
-      }
-      return stops[lastIndexAtOffset].color;
-    }
-  }
+/**
+ * Evaluates the opacity at a specific data value based on gradient stops.
+ * Returns undefined when no stops define opacity.
+ */
+export const evaluateGradientOpacityAtValue = (stops, dataValue, scale) => {
+  'worklet';
 
-  // Find the segment to interpolate between
-  for (let i = 0; i < positions.length - 1; i++) {
-    if (normalizedValue >= positions[i] && normalizedValue <= positions[i + 1]) {
-      const segmentStart = positions[i];
-      const segmentEnd = positions[i + 1];
-      if (segmentEnd === segmentStart) {
-        return stops[i].color;
-      }
-      const t = (normalizedValue - segmentStart) / (segmentEnd - segmentStart);
-      return interpolateColor(stops[i].color, stops[i + 1].color, t);
-    }
-  }
-  return stops[0].color;
+  var _stops$startIndex$opa, _stops$endIndex$opaci;
+  if (stops.length === 0) return;
+  if (stops.every(stop => {
+    var _stop$opacity2;
+    return ((_stop$opacity2 = stop.opacity) != null ? _stop$opacity2 : 1) === 1;
+  })) return;
+  const interpolation = getGradientStopInterpolation(stops, dataValue, scale);
+  if (!interpolation) return;
+  const [startIndex, endIndex, t] = interpolation;
+  const startOpacity = (_stops$startIndex$opa = stops[startIndex].opacity) != null ? _stops$startIndex$opa : 1;
+  if (startIndex === endIndex) return startOpacity;
+  const endOpacity = (_stops$endIndex$opaci = stops[endIndex].opacity) != null ? _stops$endIndex$opaci : 1;
+  return startOpacity + (endOpacity - startOpacity) * t;
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "9.15.0",
+  "version": "9.17.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -218,9 +218,9 @@
     "react-native-worklets": "0.5.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.15.0",
+    "@coinbase/cds-common": "^9.17.0",
     "@coinbase/cds-icons": "^5.21.0",
-    "@coinbase/cds-illustrations": "^4.47.0",
+    "@coinbase/cds-illustrations": "^4.48.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
     "@coinbase/cds-utils": "^2.3.5",
     "@floating-ui/react-native": "^0.10.5",