@coinbase/cds-web 9.0.0-rc.3 → 9.0.0

package/CHANGELOG.md

@@ -8,21 +8,42 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
-## 9.0.0-rc.3 ((5/15/2026, 01:54 PM PST))
+## 9.0.0 (5/20/2026 PST)
+
+CDS 9 is here!!
+
+For more details and to help upgrading from CDS 8 using our automated migration tool, see our official [upgrade guide](https://cds.coinbase.com/guides/v9-upgrade-guide)!
+
+#### 💥 Breaking
+
+- Nested ThemeProviders will not inject the full set of CSS variables by default. You can opt in to the old behavior by setting the `isolated` prop to `false`.
+- Removed remaining instances of fixed height/width values across all components which may cause subtle layout shifts in your app.
+- Some component props’ types have narrowed in response to React 19 upgrade.
+- Read our upgrade guilde for more details!
 
 #### 🚀 Updates
 
-- Feat: support illustration theming. [[#689](https://github.com/coinbase/cds/pull/689)]
+- React 19 support! React 18 is still supported for backwards compatibility.
+- Migrated full set of components from web-visualization package to new `visualizations/chart` and `visualizations/sparkline` sub-paths.
+- Read our upgrade guilde for more details!
 
-## 9.0.0-rc.2 ((4/30/2026, 08:17 AM PST))
+## 8.75.2 (5/19/2026 PST)
 
-This is an artificial version bump with no new change.
+#### 🐞 Fixes
 
-## 9.0.0-rc.1 (4/28/2026 PST)
+- Fix: unstable svg sizing caused by flexbox. [[#696](https://github.com/coinbase/cds/pull/696)]
 
-#### 💥 Breaking
+## 8.75.1 (5/19/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix: android web tray footer cut off. [[#694](https://github.com/coinbase/cds/pull/694)]
+
+## 8.75.0 (5/15/2026 PST)
+
+#### 🚀 Updates
 
-- Feat: CDS 9 release candidate 1.
+- Feat: support selectionColor on Inputs. [[#688](https://github.com/coinbase/cds/pull/688)]
 
 ## 8.74.3 (5/14/2026 PST)
 

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/buttons/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EACV,aAAa,EACb,QAAQ,EACR,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAGpC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAMxD,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAMzE;;GAEG;AACH,eAAO,MAAM,aAAa,MAAM,CAAC;AA6EjC,eAAO,MAAM,oBAAoB,WAAW,CAAC;AAE7C,MAAM,MAAM,oBAAoB,GAAG,OAAO,oBAAoB,CAAC;AAE/D,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC,eAAe,CACvD,kBAAkB,EAClB,WAAW,GACT,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GAAG;IACrD;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wDAAwD;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,2EAA2E;IAC3E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,yBAAyB;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iDAAiD;IACjD,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,uCAAuC;IACvC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uBAAuB;IACvB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB,qCAAqC;IACrC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CACJ,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,oBAAoB,IAClF,WAAW,CAAC,KAAK,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;AAElD,KAAK,eAAe,GAAG,CAAC,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,oBAAoB,EACnF,KAAK,EAAE,WAAW,CAAC,WAAW,CAAC,KAC5B,WAAW,CAAC,WAAW,CAAC,GAC3B,WAAW,CAAC,UAAU,CAAC;AAEzB,eAAO,MAAM,MAAM,EAAE,eA2JpB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/buttons/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EACV,aAAa,EACb,QAAQ,EACR,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAGpC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAMxD,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAMzE;;GAEG;AACH,eAAO,MAAM,aAAa,MAAM,CAAC;AA8EjC,eAAO,MAAM,oBAAoB,WAAW,CAAC;AAE7C,MAAM,MAAM,oBAAoB,GAAG,OAAO,oBAAoB,CAAC;AAE/D,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC,eAAe,CACvD,kBAAkB,EAClB,WAAW,GACT,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GAAG;IACrD;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wDAAwD;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,2EAA2E;IAC3E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,yBAAyB;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iDAAiD;IACjD,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,uCAAuC;IACvC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uBAAuB;IACvB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB,qCAAqC;IACrC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CACJ,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,oBAAoB,IAClF,WAAW,CAAC,KAAK,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;AAElD,KAAK,eAAe,GAAG,CAAC,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,oBAAoB,EACnF,KAAK,EAAE,WAAW,CAAC,WAAW,CAAC,KAC5B,WAAW,CAAC,WAAW,CAAC,GAC3B,WAAW,CAAC,UAAU,CAAC;AAEzB,eAAO,MAAM,MAAM,EAAE,eA2JpB,CAAC"}

package/dts/controls/CheckboxGroup.d.ts

@@ -23,6 +23,10 @@ declare const CheckboxGroupWithRef: <CheckboxValue extends string>(
     ref?: React.Ref<HTMLFieldSetElement>;
   },
 ) => React.ReactElement;
+/**
+ * @deprecated CheckboxGroup is deprecated. Use ControlGroup with accessibilityRole="group" instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export declare const CheckboxGroup: typeof CheckboxGroupWithRef &
   React.MemoExoticComponent<typeof CheckboxGroupWithRef>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../src/controls/CheckboxGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,KAAK,sBAAsB,EAK5B,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAK9D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAYvD,KAAK,sBAAsB,CAAC,aAAa,SAAS,MAAM,GAAG,MAAM,IAAI,sBAAsB,CACzF,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,UAAU,CACX,GACC,WAAW,GAAG;IACZ,6DAA6D;IAC7D,QAAQ,EAAE,KAAK,CAAC,YAAY,EAAE,CAAC;IAC/B,uDAAuD;IACvD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,yCAAyC;IACzC,cAAc,EAAE,GAAG,CAAC,aAAa,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACtD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEJ,KAAK,kBAAkB,CAAC,aAAa,SAAS,MAAM,IAAI,sBAAsB,CAAC,aAAa,CAAC,CAAC;AAG9F,QAAA,MAAM,oBAAoB,EAwEpB,CAAC,aAAa,SAAS,MAAM,EACjC,KAAK,EAAE,kBAAkB,CAAC,aAAa,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAA;CAAE,KAChF,KAAK,CAAC,YAAY,CAAC;AAExB,eAAO,MAAM,aAAa,EAAiC,OAAO,oBAAoB,GACpF,KAAK,CAAC,mBAAmB,CAAC,OAAO,oBAAoB,CAAC,CAAC"}
+{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../src/controls/CheckboxGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,KAAK,sBAAsB,EAK5B,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAK9D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAYvD,KAAK,sBAAsB,CAAC,aAAa,SAAS,MAAM,GAAG,MAAM,IAAI,sBAAsB,CACzF,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,UAAU,CACX,GACC,WAAW,GAAG;IACZ,6DAA6D;IAC7D,QAAQ,EAAE,KAAK,CAAC,YAAY,EAAE,CAAC;IAC/B,uDAAuD;IACvD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,yCAAyC;IACzC,cAAc,EAAE,GAAG,CAAC,aAAa,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACtD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEJ,KAAK,kBAAkB,CAAC,aAAa,SAAS,MAAM,IAAI,sBAAsB,CAAC,aAAa,CAAC,CAAC;AAG9F,QAAA,MAAM,oBAAoB,EAwEpB,CAAC,aAAa,SAAS,MAAM,EACjC,KAAK,EAAE,kBAAkB,CAAC,aAAa,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAA;CAAE,KAChF,KAAK,CAAC,YAAY,CAAC;AAExB;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAiC,OAAO,oBAAoB,GACpF,KAAK,CAAC,mBAAmB,CAAC,OAAO,oBAAoB,CAAC,CAAC"}

package/dts/controls/NativeInput.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import type { SharedAccessibilityProps } from '@coinbase/cds-common/types/SharedAccessibilityProps';
 import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
 import type { TextAlignProps } from '@coinbase/cds-common/types/TextBaseProps';
@@ -16,6 +17,11 @@ export type NativeInputBaseProps = BoxBaseProps & {
    * @default start
    * */
   align?: TextAlignProps['align'];
+  /**
+   * Color of the caret (cursor).
+   * @default fgPrimary
+   */
+  caretColor?: ThemeVars.Color;
 };
 export type NativeInputProps = NativeInputBaseProps &
   BoxProps<'input'> &

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

@@ -1 +1 @@
-{"version":3,"file":"NativeInput.d.ts","sourceRoot":"","sources":["../../src/controls/NativeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAK/E,OAAO,EAAO,KAAK,YAAY,EAAE,KAAK,QAAQ,EAAE,MAAM,WAAW,CAAC;AAyElE,MAAM,MAAM,oBAAoB,GAAG,YAAY,GAAG;IAChD;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gFAAgF;IAChF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;SAGK;IACL,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GACjD,QAAQ,CAAC,OAAO,CAAC,GACjB,WAAW,GACX,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GAAG;IACF;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;CACnC,CAAC;AAEJ,eAAO,MAAM,WAAW,mGAyDvB,CAAC"}
+{"version":3,"file":"NativeInput.d.ts","sourceRoot":"","sources":["../../src/controls/NativeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAK/E,OAAO,EAAO,KAAK,YAAY,EAAE,KAAK,QAAQ,EAAE,MAAM,WAAW,CAAC;AAyElE,MAAM,MAAM,oBAAoB,GAAG,YAAY,GAAG;IAChD;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gFAAgF;IAChF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;SAGK;IACL,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAChC;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GACjD,QAAQ,CAAC,OAAO,CAAC,GACjB,WAAW,GACX,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GAAG;IACF;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;CACnC,CAAC;AAEJ,eAAO,MAAM,WAAW,mGA2DvB,CAAC"}

package/dts/controls/TextInput.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { SharedInputProps } from '@coinbase/cds-common/types/InputBaseProps';
 import type { InputStackBaseProps } from './InputStack';
 import { type NativeInputBaseProps, type NativeInputProps } from './NativeInput';
-export type TextInputBaseProps = NativeInputBaseProps &
+export type TextInputBaseProps = Omit<NativeInputBaseProps, 'caretColor'> &
   SharedInputProps &
   Pick<
     InputStackBaseProps,
@@ -66,7 +66,7 @@ export type TextInputBaseProps = NativeInputBaseProps &
      */
     labelNode?: React.ReactNode;
   };
-export type TextInputProps = TextInputBaseProps & NativeInputProps;
+export type TextInputProps = TextInputBaseProps & Omit<NativeInputProps, 'caretColor'>;
 export declare const TextInput: React.NamedExoticComponent<
   Omit<TextInputProps, 'ref'> & React.RefAttributes<HTMLInputElement>
 >;

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

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/controls/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAgB,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAahG,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAExD,OAAO,EAAe,KAAK,oBAAoB,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AA4C9F,MAAM,MAAM,kBAAkB,GAAG,oBAAoB,GACnD,gBAAgB,GAChB,IAAI,CACF,mBAAmB,EACjB,QAAQ,GACR,SAAS,GACT,OAAO,GACP,UAAU,GACV,cAAc,GACd,kBAAkB,GAClB,cAAc,GACd,iBAAiB,CACpB,GAAG;IACF;;;;;;;;;;SAUK;IACL,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC/B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,mBAAmB,CAAC,oBAAoB,CAAC,CAAC;IAC/D;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uHAAuH;IACvH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mHAAmH;IACnH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF;;;OAGG;IACH,qCAAqC,CAAC,EAAE,MAAM,CAAC;IAC/C;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG,gBAAgB,CAAC;AAkBnE,eAAO,MAAM,SAAS,iGA+QrB,CAAC"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/controls/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAgB,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAahG,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAExD,OAAO,EAAe,KAAK,oBAAoB,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AA4C9F,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,oBAAoB,EAAE,YAAY,CAAC,GACvE,gBAAgB,GAChB,IAAI,CACF,mBAAmB,EACjB,QAAQ,GACR,SAAS,GACT,OAAO,GACP,UAAU,GACV,cAAc,GACd,kBAAkB,GAClB,cAAc,GACd,iBAAiB,CACpB,GAAG;IACF;;;;;;;;;;SAUK;IACL,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC/B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,mBAAmB,CAAC,oBAAoB,CAAC,CAAC;IAC/D;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uHAAuH;IACvH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mHAAmH;IACnH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF;;;OAGG;IACH,qCAAqC,CAAC,EAAE,MAAM,CAAC;IAC/C;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG,IAAI,CAAC,gBAAgB,EAAE,YAAY,CAAC,CAAC;AAWvF,eAAO,MAAM,SAAS,iGAiRrB,CAAC"}

package/dts/illustrations/createIllustration.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createIllustration.d.ts","sourceRoot":"","sources":["../../src/illustrations/createIllustration.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8CAA8C,CAAC;AACxF,OAAO,KAAK,EACV,mBAAmB,EACnB,kBAAkB,EAClB,iBAAiB,EACjB,sBAAsB,EACtB,mBAAmB,EACpB,MAAM,8CAA8C,CAAC;AACtD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAI1E,OAAO,KAAK,EACV,cAAc,EACd,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,cAAc,EACf,MAAM,6BAA6B,CAAC;AAOrC,MAAM,MAAM,oBAAoB,GAAG;IACjC,UAAU,EAAE,cAAc,CAAC;IAC3B,aAAa,EAAE,iBAAiB,CAAC;IACjC,SAAS,EAAE,aAAa,CAAC;IACzB,UAAU,EAAE,cAAc,CAAC;IAC3B,QAAQ,EAAE,YAAY,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,UAAU,EAAE,mBAAmB,CAAC;IAChC,UAAU,EAAE,mBAAmB,CAAC;IAChC,aAAa,EAAE,sBAAsB,CAAC;IACtC,SAAS,EAAE,kBAAkB,CAAC;IAC9B,QAAQ,EAAE,iBAAiB,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,MAAM,oBAAoB,IAAI,WAAW,GAAG;IACtF,+CAA+C;IAC/C,IAAI,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC;IAC9B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC,CAAC,CAAC,CAAC;IACzC,iEAAiE;IACjE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;SAIK;IACL,QAAQ,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC,YAAY,CAAC;IACrC,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,KAAK,2BAA2B,CAAC,OAAO,SAAS,mBAAmB,IAAI,MAAM,CAC5E,oBAAoB,CAAC,OAAO,CAAC,EAC7B,MAAM,CACP,CAAC;AAEF;;;GAGG;AACH,KAAK,iBAAiB,CAAC,OAAO,SAAS,mBAAmB,IAAI,OAAO,CACnE,MAAM,CAAC,oBAAoB,CAAC,OAAO,CAAC,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,CAAA;CAAE,CAAC,CAC7E,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,6BAA6B,CAAC,IAAI,SAAS,mBAAmB,IACxE,qBAAqB,CAAC,IAAI,CAAC,GAAG,qBAAqB,CAAC;AAEtD,wBAAgB,kBAAkB,CAAC,OAAO,SAAS,mBAAmB,EACpE,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,2BAA2B,CAAC,OAAO,CAAC,EAChD,YAAY,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,sEAwF1C"}
+{"version":3,"file":"createIllustration.d.ts","sourceRoot":"","sources":["../../src/illustrations/createIllustration.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8CAA8C,CAAC;AACxF,OAAO,KAAK,EACV,mBAAmB,EACnB,kBAAkB,EAClB,iBAAiB,EACjB,sBAAsB,EACtB,mBAAmB,EACpB,MAAM,8CAA8C,CAAC;AACtD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAI1E,OAAO,KAAK,EACV,cAAc,EACd,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,cAAc,EACf,MAAM,6BAA6B,CAAC;AAarC,MAAM,MAAM,oBAAoB,GAAG;IACjC,UAAU,EAAE,cAAc,CAAC;IAC3B,aAAa,EAAE,iBAAiB,CAAC;IACjC,SAAS,EAAE,aAAa,CAAC;IACzB,UAAU,EAAE,cAAc,CAAC;IAC3B,QAAQ,EAAE,YAAY,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,UAAU,EAAE,mBAAmB,CAAC;IAChC,UAAU,EAAE,mBAAmB,CAAC;IAChC,aAAa,EAAE,sBAAsB,CAAC;IACtC,SAAS,EAAE,kBAAkB,CAAC;IAC9B,QAAQ,EAAE,iBAAiB,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,MAAM,oBAAoB,IAAI,WAAW,GAAG;IACtF,+CAA+C;IAC/C,IAAI,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC;IAC9B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC,CAAC,CAAC,CAAC;IACzC,iEAAiE;IACjE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;SAIK;IACL,QAAQ,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC,YAAY,CAAC;IACrC,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,KAAK,2BAA2B,CAAC,OAAO,SAAS,mBAAmB,IAAI,MAAM,CAC5E,oBAAoB,CAAC,OAAO,CAAC,EAC7B,MAAM,CACP,CAAC;AAEF;;;GAGG;AACH,KAAK,iBAAiB,CAAC,OAAO,SAAS,mBAAmB,IAAI,OAAO,CACnE,MAAM,CAAC,oBAAoB,CAAC,OAAO,CAAC,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,CAAA;CAAE,CAAC,CAC7E,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,6BAA6B,CAAC,IAAI,SAAS,mBAAmB,IACxE,qBAAqB,CAAC,IAAI,CAAC,GAAG,qBAAqB,CAAC;AAEtD,wBAAgB,kBAAkB,CAAC,OAAO,SAAS,mBAAmB,EACpE,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,2BAA2B,CAAC,OAAO,CAAC,EAChD,YAAY,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,sEAyF1C"}

package/esm/buttons/Button.css

@@ -1,4 +1,4 @@
-@layer cds{.baseCss-b99zquh{-webkit-text-decoration:none;text-decoration:none;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;text-align:center;vertical-align:middle;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;font-weight:600;position:relative;white-space:nowrap;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;overflow:visible;text-transform:none;}
+@layer cds{.baseCss-b99zquh{-webkit-text-decoration:none;text-decoration:none;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;text-align:center;vertical-align:middle;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;font-weight:600;position:relative;white-space:nowrap;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;overflow:visible;text-transform:none;}
 .blockCss-b9yox33{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;max-width:100%;white-space:normal;}
 .spinnerContainerCss-s1bhvbb9{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
 .startNodeCss-s2x7iw5{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;margin-inline-end:var(--space-1);}

package/esm/buttons/IconButton.js

@@ -66,7 +66,7 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
   const spinnerSize = iconSizeValue / 10;
   const resolvedPadding = useResolveResponsiveProp(padding);
   const pressableStyle = useMemo(() => {
-    if (!flush || !resolvedPadding) return undefined;
+    if (!flush || !resolvedPadding) return style;
     const negativeMargin = -theme.space[resolvedPadding];
     return _objectSpread(_objectSpread({}, style), flush === 'start' ? {
       marginInlineStart: negativeMargin

package/esm/controls/CheckboxGroup.js

@@ -84,5 +84,10 @@ const CheckboxGroupWithRef = /*#__PURE__*/forwardRef(function CheckboxGroupWithR
     value: selectedValuesArray
   });
 });
+
+/**
+ * @deprecated CheckboxGroup is deprecated. Use ControlGroup with accessibilityRole="group" instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const CheckboxGroup = /*#__PURE__*/memo(CheckboxGroupWithRef);
 import "./CheckboxGroup.css";

package/esm/controls/InputStack.js

@@ -100,9 +100,7 @@ export const InputStack = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
       '--border-width-focused': "var(--borderWidth-".concat(focusedBorderWidth, ")")
     }, inputBorderRadius);
   }, [borderColorUnfocused, borderColorFocused, focusedBorderWidth, inputBorderRadius]);
-  const rootStyles = useMemo(() => _objectSpread({
-    style
-  }, styles === null || styles === void 0 ? void 0 : styles.root), [style, styles === null || styles === void 0 ? void 0 : styles.root]);
+  const rootStyles = useMemo(() => _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root), [style, styles === null || styles === void 0 ? void 0 : styles.root]);
   return /*#__PURE__*/_jsxs(VStack, _objectSpread(_objectSpread({
     className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
     gap: inputStackGap,

package/esm/controls/NativeInput.js

@@ -1,4 +1,4 @@
-const _excluded = ["containerSpacing", "testID", "align", "font", "onFocus", "onClick", "onBlur", "onKeyDown", "onChange", "accessibilityLabel", "accessibilityLabelledBy", "accessibilityHint", "compact", "className", "style"];
+const _excluded = ["containerSpacing", "testID", "align", "font", "onFocus", "onClick", "onBlur", "onKeyDown", "onChange", "accessibilityLabel", "accessibilityLabelledBy", "accessibilityHint", "compact", "className", "caretColor", "style"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -30,6 +30,7 @@ export const NativeInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Na
       accessibilityHint,
       compact,
       className,
+      caretColor = 'fgPrimary',
       style
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -39,8 +40,9 @@ export const NativeInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Na
   const defaultContainerPadding = compact ? compactContainerPaddingCss : originalContainerPaddingCss;
   const dynamicStyles = useMemo(() => _objectSpread({
     textAlign: align,
-    colorScheme: activeColorScheme
-  }, style), [align, activeColorScheme, style]);
+    colorScheme: activeColorScheme,
+    caretColor: "var(--color-".concat(caretColor, ")")
+  }, style), [align, activeColorScheme, caretColor, style]);
   return /*#__PURE__*/_jsx(Box, _objectSpread({
     ref: ref,
     "aria-describedby": accessibilityHint,

package/esm/controls/TextInput.js

@@ -7,6 +7,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 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, { cloneElement, forwardRef, memo, useCallback, useMemo, useRef, useState } from 'react';
+import { useInputVariant } from '@coinbase/cds-common/hooks/useInputVariant';
 import { usePrefixedId } from '@coinbase/cds-common/hooks/usePrefixedId';
 import { mergeReactElementRef, mergeRefs } from '@coinbase/cds-common/utils/mergeRefs';
 import { cx } from '../cx';
@@ -32,9 +33,6 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 const nativeInputContainerCss = "nativeInputContainerCss-nvfk24";
 const insideLabelCss = "insideLabelCss-i1dqgbcz";
 const insideLabelCssStartCss = "insideLabelCssStartCss-i1scwjk";
-const useInputVariant = (focused, variant) => {
-  return useMemo(() => focused && variant !== 'positive' && variant !== 'negative' ? 'primary' : variant, [focused, variant]);
-};
 const variantColorMap = {
   primary: 'fgPrimary',
   positive: 'fgPositive',
@@ -141,6 +139,7 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Text
       accessibilityLabel: accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : label,
       align: align,
       "aria-invalid": variant === 'negative',
+      caretColor: variantColorMap[focusedVariant],
       compact: compact,
       containerSpacing: nativeInputContainerCss,
       "data-compact": compact,
@@ -153,7 +152,7 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Text
       onFocus: handleOnFocus,
       testID: testID
     }, nativeInputRestProps));
-  }, [inputNode, refs, shouldSetHelperTextId, helperTextId, accessibilityLabel, label, hasLabel, align, font, variant, compact, labelVariant, start, disabled, shouldSetLabelId, labelId, handleOnBlur, handleOnFocus, testID, nativeInputRestProps]);
+  }, [inputNode, refs, shouldSetHelperTextId, helperTextId, accessibilityLabel, label, align, variant, focusedVariant, compact, hasLabel, labelVariant, start, disabled, font, shouldSetLabelId, labelId, handleOnBlur, handleOnFocus, testID, nativeInputRestProps]);
   return /*#__PURE__*/_jsx(TextInputFocusVariantContext.Provider, {
     value: focused ? focusedVariant : undefined,
     children: /*#__PURE__*/_jsx(InputStack, {

package/esm/illustrations/createIllustration.css

@@ -0,0 +1 @@
+@layer cds{.inlineSvgCss-ip1tc09{display:inline-block;-webkit-flex:none;-ms-flex:none;flex:none;}}

package/esm/illustrations/createIllustration.js

@@ -5,6 +5,7 @@ import { getDefaultSizeObjectForIllustration } from '@coinbase/cds-common/utils/
 import { isDevelopment } from '@coinbase/cds-utils';
 import { useTheme } from '../hooks/useTheme';
 import { jsx as _jsx } from "react/jsx-runtime";
+const inlineSvgCss = "inlineSvgCss-ip1tc09";
 const STATIC_ASSETS_CDN = 'https://static-assets.coinbase.com/ui-infra/illustration/v1';
 
 /**
@@ -71,12 +72,12 @@ export function createIllustration(variant, versionMap, svgEsmConfig) {
             __html: svgMarkup
           },
           "aria-label": alt || undefined,
+          className: inlineSvgCss,
           "data-testid": testID,
           role: alt ? 'img' : 'presentation',
           style: {
             width,
-            height,
-            display: 'inline-block'
+            height
           }
         });
       }
@@ -96,4 +97,5 @@ export function createIllustration(variant, versionMap, svgEsmConfig) {
   });
   Illustration.displayName = 'Illustration';
   return Illustration;
-}
+}
+import "./createIllustration.css";

package/esm/overlays/tray/Tray.js

@@ -285,7 +285,7 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_pro
       children: /*#__PURE__*/_jsxs(Box, {
         ref: trayRef,
         className: cx(trayClassNames.root, classNames === null || classNames === void 0 ? void 0 : classNames.root),
-        height: "100vh",
+        height: "100dvh",
         pin: "all",
         position: "fixed",
         style: styles === null || styles === void 0 ? void 0 : styles.root,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "9.0.0-rc.3",
+  "version": "9.0.0",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -215,7 +215,7 @@
     "react-dom": "^18.0.0 || ~19.1.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.0.0-rc.3",
+    "@coinbase/cds-common": "^9.0.0",
     "@coinbase/cds-icons": "^5.16.0",
     "@coinbase/cds-illustrations": "^4.40.1",
     "@coinbase/cds-lottie-files": "^3.3.4",