@coinbase/cds-mobile 8.52.1 → 8.53.0

package/CHANGELOG.md

@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.53.0 (3/16/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: update Checkbox borderRadius to match design. [[#509](https://github.com/coinbase/cds/pull/509)]
+
+## 8.52.2 (3/11/2026 PST)
+
+#### 🐞 Fixes
+
+- Configure control borderWidth and controlColor. [[#457](https://github.com/coinbase/cds/pull/457)]
+
 ## 8.52.1 ((3/11/2026, 09:52 AM PST))
 
 This is an artificial version bump with no new change.

package/dts/controls/Checkbox.d.ts

@@ -2,18 +2,22 @@ import React from 'react';
 import type { View } from 'react-native';
 import type { ThemeVars } from '@coinbase/cds-common';
 import { type ControlBaseProps } from './Control';
-export type CheckboxBaseProps<CheckboxValue extends string> = ControlBaseProps<CheckboxValue>;
-export type CheckboxProps<CheckboxValue extends string> = ControlBaseProps<CheckboxValue> & {
-  /** Sets the checked/active color of the control.
-   * @default bgPrimary
+export type CheckboxBaseProps<CheckboxValue extends string> = Omit<
+  ControlBaseProps<CheckboxValue>,
+  'controlColor'
+> & {
+  /**
+   * Sets the checked/active color of the checkbox.
+   * @default fgInverse
    */
   controlColor?: ThemeVars.Color;
   /**
-   * Optional.Sets the border width of the checkbox.
+   * Sets the border width of the checkbox.
    * @default 100
    */
   borderWidth?: ThemeVars.BorderWidth;
 };
+export type CheckboxProps<CheckboxValue extends string> = CheckboxBaseProps<CheckboxValue>;
 declare const CheckboxWithRef: <CheckboxValue extends string>(
   props: CheckboxProps<CheckboxValue> & {
     ref?: React.Ref<View>;

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/controls/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAMtD,OAAO,EAAW,KAAK,gBAAgB,EAAyB,MAAM,WAAW,CAAC;AAElF,MAAM,MAAM,iBAAiB,CAAC,aAAa,SAAS,MAAM,IAAI,gBAAgB,CAAC,aAAa,CAAC,CAAC;AAE9F,MAAM,MAAM,aAAa,CAAC,aAAa,SAAS,MAAM,IAAI,gBAAgB,CAAC,aAAa,CAAC,GAAG;IAC1F;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC/B;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;CACrC,CAAC;AAuEF,QAAA,MAAM,eAAe,EAiCf,CAAC,aAAa,SAAS,MAAM,EACjC,KAAK,EAAE,aAAa,CAAC,aAAa,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;CAAE,KAC5D,KAAK,CAAC,YAAY,CAAC;AAGxB,eAAO,MAAM,QAAQ,EAA4B,OAAO,eAAe,GACrE,KAAK,CAAC,mBAAmB,CAAC,OAAO,eAAe,CAAC,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/controls/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAMtD,OAAO,EAAW,KAAK,gBAAgB,EAAyB,MAAM,WAAW,CAAC;AAElF,MAAM,MAAM,iBAAiB,CAAC,aAAa,SAAS,MAAM,IAAI,IAAI,CAChE,gBAAgB,CAAC,aAAa,CAAC,EAC/B,cAAc,CACf,GAAG;IACF;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC/B;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,aAAa,SAAS,MAAM,IAAI,iBAAiB,CAAC,aAAa,CAAC,CAAC;AAuE3F,QAAA,MAAM,eAAe,EAiCf,CAAC,aAAa,SAAS,MAAM,EACjC,KAAK,EAAE,aAAa,CAAC,aAAa,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;CAAE,KAC5D,KAAK,CAAC,YAAY,CAAC;AAGxB,eAAO,MAAM,QAAQ,EAA4B,OAAO,eAAe,GACrE,KAAK,CAAC,mBAAmB,CAAC,OAAO,eAAe,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxCell.d.ts","sourceRoot":"","sources":["../../src/controls/CheckboxCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAChF,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,IAAI,EACT,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAMjE,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAIzE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,qBAAqB,CAAC,aAAa,SAAS,MAAM,IAAI;IAChE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC5B,MAAM,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACzB,kBAAkB,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACrC,kBAAkB,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;CAC5C,GAAG,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC,GACvE,IAAI,CAAC,kBAAkB,EAAE,UAAU,GAAG,gBAAgB,CAAC,CAAC;AAE1D,MAAM,MAAM,iBAAiB,CAAC,aAAa,SAAS,MAAM,IACxD,qBAAqB,CAAC,aAAa,CAAC,GAAG;IACrC,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,uCAAuC;QACvC,iBAAiB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACzC,gCAAgC;QAChC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACxC,yBAAyB;QACzB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7B,+BAA+B;QAC/B,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACpC,CAAC;CACH,CAAC;AAEJ,QAAA,MAAM,mBAAmB,EAuMnB,CAAC,aAAa,SAAS,MAAM,EACjC,KAAK,EAAE,iBAAiB,CAAC,aAAa,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;CAAE,KACzE,KAAK,CAAC,YAAY,CAAC;AAExB,eAAO,MAAM,YAAY,EAAgC,OAAO,mBAAmB,GACjF,KAAK,CAAC,mBAAmB,CAAC,OAAO,mBAAmB,CAAC,CAAC"}
+{"version":3,"file":"CheckboxCell.d.ts","sourceRoot":"","sources":["../../src/controls/CheckboxCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAChF,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,IAAI,EACT,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAMjE,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAIzE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,qBAAqB,CAAC,aAAa,SAAS,MAAM,IAAI;IAChE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC5B,MAAM,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACzB,kBAAkB,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACrC,kBAAkB,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;CAC5C,GAAG,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC,GACvE,IAAI,CAAC,kBAAkB,EAAE,UAAU,GAAG,gBAAgB,CAAC,CAAC;AAE1D,MAAM,MAAM,iBAAiB,CAAC,aAAa,SAAS,MAAM,IACxD,qBAAqB,CAAC,aAAa,CAAC,GAAG;IACrC,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,uCAAuC;QACvC,iBAAiB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACzC,gCAAgC;QAChC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACxC,yBAAyB;QACzB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7B,+BAA+B;QAC/B,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACpC,CAAC;CACH,CAAC;AAEJ,QAAA,MAAM,mBAAmB,EAyMnB,CAAC,aAAa,SAAS,MAAM,EACjC,KAAK,EAAE,iBAAiB,CAAC,aAAa,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;CAAE,KACzE,KAAK,CAAC,YAAY,CAAC;AAExB,eAAO,MAAM,YAAY,EAAgC,OAAO,mBAAmB,GACjF,KAAK,CAAC,mBAAmB,CAAC,OAAO,mBAAmB,CAAC,CAAC"}

package/dts/controls/Radio.d.ts

@@ -1,7 +1,22 @@
 import React from 'react';
 import { type View } from 'react-native';
+import type { ThemeVars } from '@coinbase/cds-common';
 import { type ControlBaseProps } from './Control';
-export type RadioBaseProps<RadioValue extends string> = ControlBaseProps<RadioValue>;
+export type RadioBaseProps<RadioValue extends string> = Omit<
+  ControlBaseProps<RadioValue>,
+  'controlColor'
+> & {
+  /**
+   * Sets the checked/active color of the radio.
+   * @default bgPrimary
+   */
+  controlColor?: ThemeVars.Color;
+  /**
+   * Sets the border width of the radio.
+   * @default 100
+   */
+  borderWidth?: ThemeVars.BorderWidth;
+};
 export type RadioProps<RadioValue extends string> = RadioBaseProps<RadioValue>;
 declare const RadioWithRef: <RadioValue extends string>(
   props: RadioProps<RadioValue> & {

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../src/controls/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,EAAyC,KAAK,IAAI,EAAE,MAAM,cAAc,CAAC;AAOhF,OAAO,EAAW,KAAK,gBAAgB,EAAyB,MAAM,WAAW,CAAC;AASlF,MAAM,MAAM,cAAc,CAAC,UAAU,SAAS,MAAM,IAAI,gBAAgB,CAAC,UAAU,CAAC,CAAC;AAErF,MAAM,MAAM,UAAU,CAAC,UAAU,SAAS,MAAM,IAAI,cAAc,CAAC,UAAU,CAAC,CAAC;AAuD/E,QAAA,MAAM,YAAY,EAuBZ,CAAC,UAAU,SAAS,MAAM,EAC9B,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;CAAE,KACtD,KAAK,CAAC,YAAY,CAAC;AAGxB,eAAO,MAAM,KAAK,EAAyB,OAAO,YAAY,GAC5D,KAAK,CAAC,mBAAmB,CAAC,OAAO,YAAY,CAAC,CAAC"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../src/controls/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,EAAyC,KAAK,IAAI,EAAE,MAAM,cAAc,CAAC;AAEhF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAMtD,OAAO,EAAW,KAAK,gBAAgB,EAAyB,MAAM,WAAW,CAAC;AASlF,MAAM,MAAM,cAAc,CAAC,UAAU,SAAS,MAAM,IAAI,IAAI,CAC1D,gBAAgB,CAAC,UAAU,CAAC,EAC5B,cAAc,CACf,GAAG;IACF;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC/B;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,UAAU,CAAC,UAAU,SAAS,MAAM,IAAI,cAAc,CAAC,UAAU,CAAC,CAAC;AAwD/E,QAAA,MAAM,YAAY,EAuBZ,CAAC,UAAU,SAAS,MAAM,EAC9B,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;CAAE,KACtD,KAAK,CAAC,YAAY,CAAC;AAGxB,eAAO,MAAM,KAAK,EAAyB,OAAO,YAAY,GAC5D,KAAK,CAAC,mBAAmB,CAAC,OAAO,YAAY,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"RadioCell.d.ts","sourceRoot":"","sources":["../../src/controls/RadioCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAChF,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,IAAI,EACT,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAMjE,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAGrE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAGlD,MAAM,MAAM,kBAAkB,CAAC,UAAU,SAAS,MAAM,IAAI;IAC1D,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC5B,MAAM,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACzB,kBAAkB,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACrC,kBAAkB,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;CAC5C,GAAG,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC,GACpE,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,gBAAgB,CAAC,CAAC;AAEtD,MAAM,MAAM,cAAc,CAAC,UAAU,SAAS,MAAM,IAAI,kBAAkB,CAAC,UAAU,CAAC,GAAG;IACvF,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,oCAAoC;QACpC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACtC,gCAAgC;QAChC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACxC,yBAAyB;QACzB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7B,+BAA+B;QAC/B,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACpC,CAAC;CACH,CAAC;AAEF,QAAA,MAAM,gBAAgB,EAsMhB,CAAC,UAAU,SAAS,MAAM,EAC9B,KAAK,EAAE,cAAc,CAAC,UAAU,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;CAAE,KACnE,KAAK,CAAC,YAAY,CAAC;AAExB,eAAO,MAAM,SAAS,EAA6B,OAAO,gBAAgB,GACxE,KAAK,CAAC,mBAAmB,CAAC,OAAO,gBAAgB,CAAC,CAAC"}
+{"version":3,"file":"RadioCell.d.ts","sourceRoot":"","sources":["../../src/controls/RadioCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAChF,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,IAAI,EACT,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAMjE,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAGrE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAGlD,MAAM,MAAM,kBAAkB,CAAC,UAAU,SAAS,MAAM,IAAI;IAC1D,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC5B,MAAM,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACzB,kBAAkB,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACrC,kBAAkB,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;CAC5C,GAAG,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC,GACpE,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,gBAAgB,CAAC,CAAC;AAEtD,MAAM,MAAM,cAAc,CAAC,UAAU,SAAS,MAAM,IAAI,kBAAkB,CAAC,UAAU,CAAC,GAAG;IACvF,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,oCAAoC;QACpC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACtC,gCAAgC;QAChC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACxC,yBAAyB;QACzB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7B,+BAA+B;QAC/B,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACpC,CAAC;CACH,CAAC;AAEF,QAAA,MAAM,gBAAgB,EAwMhB,CAAC,UAAU,SAAS,MAAM,EAC9B,KAAK,EAAE,cAAc,CAAC,UAAU,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;CAAE,KACnE,KAAK,CAAC,YAAY,CAAC;AAExB,eAAO,MAAM,SAAS,EAA6B,OAAO,gBAAgB,GACxE,KAAK,CAAC,mBAAmB,CAAC,OAAO,gBAAgB,CAAC,CAAC"}

package/esm/alpha/combobox/__stories__/Combobox.stories.js

@@ -1,5 +1,7 @@
+const _excluded = ["freeSolo", "options", "value", "onChange", "placeholder"];
 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 { useRef, useState } from 'react';
+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 { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useMultiSelect } from '@coinbase/cds-common/select/useMultiSelect';
 import { Button } from '../../../buttons';
 import { Example, ExampleScreen } from '../../../examples/ExampleScreen';
@@ -118,37 +120,40 @@ const fruitOptions = [{
   value: 'lemon',
   label: 'Lemon'
 }];
+function getFlagEmoji(cc) {
+  return cc.toUpperCase().split('').map(c => String.fromCodePoint(0x1f1e6 - 65 + c.charCodeAt(0))).join('');
+}
 const countryOptions = [{
   value: 'us',
-  label: 'United States',
+  label: getFlagEmoji('us') + " United States",
   description: 'North America'
 }, {
   value: 'ca',
-  label: 'Canada',
+  label: getFlagEmoji('ca') + " Canada",
   description: 'North America'
 }, {
   value: 'mx',
-  label: 'Mexico',
+  label: getFlagEmoji('mx') + " Mexico",
   description: 'North America'
 }, {
   value: 'uk',
-  label: 'United Kingdom',
+  label: getFlagEmoji('gb') + " United Kingdom",
   description: 'Europe'
 }, {
   value: 'fr',
-  label: 'France',
+  label: getFlagEmoji('fr') + " France",
   description: 'Europe'
 }, {
   value: 'de',
-  label: 'Germany',
+  label: getFlagEmoji('de') + " Germany",
   description: 'Europe'
 }, {
   value: 'jp',
-  label: 'Japan',
+  label: getFlagEmoji('jp') + " Japan",
   description: 'Asia'
 }, {
   value: 'cn',
-  label: 'China',
+  label: getFlagEmoji('cn') + " China",
   description: 'Asia'
 }];
 const cryptoOptions = [{
@@ -197,6 +202,75 @@ const teamOptions = [{
   label: 'Charlie Brown',
   description: 'Marketing'
 }];
+const CREATE_OPTION_PREFIX = '__create__';
+function FreeSoloCombobox(_ref) {
+  let {
+      freeSolo = false,
+      options: initialOptions,
+      value,
+      onChange,
+      placeholder = 'Search or type to add...'
+    } = _ref,
+    comboboxProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const [searchText, setSearchText] = useState('');
+  const [options, setOptions] = useState(initialOptions);
+  useEffect(() => {
+    if (!freeSolo) return;
+    const initialSet = new Set(initialOptions.map(o => o.value));
+    const valueSet = new Set(Array.isArray(value) ? value : value != null ? [value] : []);
+    setOptions(prev => {
+      const addedStillSelected = prev.filter(o => !initialSet.has(o.value) && valueSet.has(o.value));
+      return [...initialOptions, ...addedStillSelected];
+    });
+  }, [value, freeSolo, initialOptions]);
+  const optionsWithCreate = useMemo(() => {
+    if (!freeSolo) return options;
+    const trimmed = searchText.trim();
+    if (!trimmed) return options;
+    const alreadyExists = options.some(o => typeof o.label === 'string' && o.label.toLowerCase() === trimmed.toLowerCase());
+    if (alreadyExists) return options;
+    return [...options, {
+      value: "" + CREATE_OPTION_PREFIX + trimmed,
+      label: "Add \"" + trimmed + "\""
+    }];
+  }, [options, searchText, freeSolo]);
+  const handleChange = useCallback(newValue => {
+    if (!freeSolo) {
+      onChange(newValue);
+      return;
+    }
+    const values = Array.isArray(newValue) ? newValue : newValue ? [newValue] : [];
+    const createValue = values.find(v => String(v).startsWith(CREATE_OPTION_PREFIX));
+    if (createValue) {
+      const newLabel = String(createValue).slice(CREATE_OPTION_PREFIX.length);
+      const newOption = {
+        value: newLabel.toLowerCase(),
+        label: newLabel
+      };
+      setOptions(prev => [...prev, newOption]);
+      const updatedValues = values.filter(v => !String(v).startsWith(CREATE_OPTION_PREFIX)).concat(newOption.value);
+      if (comboboxProps.type === 'multi') {
+        onChange(updatedValues);
+      } else {
+        onChange(newOption.value);
+      }
+      setSearchText('');
+    } else {
+      onChange(newValue);
+    }
+  }, [onChange, freeSolo, comboboxProps.type]);
+  const effectiveOptions = freeSolo ? optionsWithCreate : initialOptions;
+  const effectiveSearchProps = freeSolo ? {
+    onSearch: setSearchText,
+    searchText
+  } : {};
+  return /*#__PURE__*/_jsx(Combobox, _extends({}, comboboxProps, effectiveSearchProps, {
+    onChange: handleChange,
+    options: effectiveOptions,
+    placeholder: placeholder,
+    value: value
+  }));
+}
 
 // Example Components
 const DefaultExample = () => {
@@ -410,6 +484,7 @@ const AccessibilityLabelExample = () => {
     initialValue: []
   });
   return /*#__PURE__*/_jsx(Combobox, {
+    accessibilityHint: "Select one or more fruits",
     accessibilityLabel: "Custom accessibility label",
     label: "Accessible combobox",
     onChange: onChange,
@@ -999,6 +1074,53 @@ const DynamicOptionsExample = () => {
     })]
   });
 };
+const FreeSoloComboboxExample = () => {
+  const [standardSingleValue, setStandardSingle] = useState(null);
+  const [freeSoloSingleValue, setFreeSoloSingle] = useState(null);
+  const standardMulti = useMultiSelect({
+    initialValue: []
+  });
+  const freeSoloMulti = useMultiSelect({
+    initialValue: []
+  });
+  const baseOptions = fruitOptions.slice(0, 6);
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 4,
+    children: [/*#__PURE__*/_jsx(FreeSoloCombobox, {
+      freeSolo: false,
+      label: "Standard single",
+      onChange: setStandardSingle,
+      options: baseOptions,
+      placeholder: "Search fruits...",
+      type: "single",
+      value: standardSingleValue
+    }), /*#__PURE__*/_jsx(FreeSoloCombobox, {
+      freeSolo: true,
+      label: "FreeSolo single",
+      onChange: setFreeSoloSingle,
+      options: baseOptions,
+      placeholder: "Search or type to add...",
+      type: "single",
+      value: freeSoloSingleValue
+    }), /*#__PURE__*/_jsx(FreeSoloCombobox, {
+      freeSolo: false,
+      label: "Standard multi",
+      onChange: standardMulti.onChange,
+      options: baseOptions,
+      placeholder: "Search fruits...",
+      type: "multi",
+      value: standardMulti.value
+    }), /*#__PURE__*/_jsx(FreeSoloCombobox, {
+      freeSolo: true,
+      label: "FreeSolo multi",
+      onChange: freeSoloMulti.onChange,
+      options: baseOptions,
+      placeholder: "Search or type to add...",
+      type: "multi",
+      value: freeSoloMulti.value
+    })]
+  });
+};
 const CustomComponent = props => {
   var _props$value$length, _props$value;
   return /*#__PURE__*/_jsx(DefaultComboboxControl, _extends({}, props, {
@@ -1093,7 +1215,7 @@ const Default = () => {
       title: "Controlled search",
       children: /*#__PURE__*/_jsx(ControlledSearchExample, {})
     }), /*#__PURE__*/_jsx(Example, {
-      title: "Custom accessibility label",
+      title: "Custom accessibility label and hint",
       children: /*#__PURE__*/_jsx(AccessibilityLabelExample, {})
     }), /*#__PURE__*/_jsx(Example, {
       title: "Options with descriptions",
@@ -1188,6 +1310,9 @@ const Default = () => {
     }), /*#__PURE__*/_jsx(Example, {
       title: "Borderless",
       children: /*#__PURE__*/_jsx(BorderlessExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "FreeSolo (select or add custom)",
+      children: /*#__PURE__*/_jsx(FreeSoloComboboxExample, {})
     })]
   });
 };

package/esm/controls/Checkbox.js

@@ -17,7 +17,7 @@ const CheckboxIcon = /*#__PURE__*/memo(_ref => {
     controlColor = 'fgInverse',
     background = checked || indeterminate ? 'bgPrimary' : 'bg',
     borderColor = checked || indeterminate ? 'bgPrimary' : 'bgLineHeavy',
-    borderRadius,
+    borderRadius = 100,
     borderWidth = 100,
     elevation,
     animatedScaleValue,

package/esm/controls/CheckboxCell.js

@@ -1,4 +1,4 @@
-const _excluded = ["title", "description", "checked", "onChange", "disabled", "columnGap", "rowGap", "padding", "borderWidth", "borderRadius", "background", "borderColor", "accessibilityLabel", "accessibilityHint", "testID", "value", "width", "style", "contentStyle", "wrapperStyles", "onPressIn", "onPressOut", "pressedBorderColor", "pressedBorderWidth", "indeterminate", "readOnly", "styles"];
+const _excluded = ["title", "description", "checked", "onChange", "disabled", "columnGap", "rowGap", "padding", "borderWidth", "borderRadius", "background", "borderColor", "controlColor", "accessibilityLabel", "accessibilityHint", "testID", "value", "width", "style", "contentStyle", "wrapperStyles", "onPressIn", "onPressOut", "pressedBorderColor", "pressedBorderWidth", "indeterminate", "readOnly", "styles"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { forwardRef, memo, useCallback, useMemo, useState } from 'react';
@@ -25,6 +25,7 @@ const CheckboxCellWithRef = /*#__PURE__*/forwardRef(function CheckboxCell(_ref,
       borderRadius = 200,
       background = 'bg',
       borderColor = 'bgLine',
+      controlColor,
       accessibilityLabel,
       accessibilityHint,
       testID,
@@ -155,6 +156,7 @@ const CheckboxCellWithRef = /*#__PURE__*/forwardRef(function CheckboxCell(_ref,
         children: /*#__PURE__*/_jsx(Checkbox, {
           accessible: false,
           checked: !!checked,
+          controlColor: controlColor,
           disabled: disabled,
           indeterminate: indeterminate,
           pointerEvents: "none",

package/esm/controls/Radio.js

@@ -40,6 +40,7 @@ const RadioIcon = _ref2 => {
     checked,
     background = 'bg',
     borderRadius = 1000,
+    borderWidth = 100,
     elevation,
     animatedScaleValue,
     animatedOpacityValue,
@@ -53,7 +54,7 @@ const RadioIcon = _ref2 => {
     background: background,
     borderColor: borderColor,
     borderRadius: borderRadius,
-    borderWidth: 100,
+    borderWidth: borderWidth,
     disabled: disabled,
     elevation: elevation,
     pressed: pressed,

package/esm/controls/RadioCell.js

@@ -1,4 +1,4 @@
-const _excluded = ["title", "description", "checked", "onChange", "disabled", "readOnly", "columnGap", "rowGap", "padding", "borderWidth", "borderRadius", "background", "borderColor", "accessibilityLabel", "accessibilityHint", "testID", "value", "width", "style", "contentStyle", "wrapperStyles", "onPressIn", "onPressOut", "pressedBorderColor", "pressedBorderWidth", "styles"];
+const _excluded = ["title", "description", "checked", "onChange", "disabled", "readOnly", "columnGap", "rowGap", "padding", "borderWidth", "borderRadius", "background", "borderColor", "controlColor", "accessibilityLabel", "accessibilityHint", "testID", "value", "width", "style", "contentStyle", "wrapperStyles", "onPressIn", "onPressOut", "pressedBorderColor", "pressedBorderWidth", "styles"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { forwardRef, memo, useCallback, useMemo, useState } from 'react';
@@ -26,6 +26,7 @@ const RadioCellWithRef = /*#__PURE__*/forwardRef(function RadioCell(_ref, ref) {
       borderRadius = 200,
       background = 'bg',
       borderColor = 'bgLine',
+      controlColor,
       accessibilityLabel,
       accessibilityHint,
       testID,
@@ -154,6 +155,7 @@ const RadioCellWithRef = /*#__PURE__*/forwardRef(function RadioCell(_ref, ref) {
         children: /*#__PURE__*/_jsx(Radio, {
           accessible: false,
           checked: !!checked,
+          controlColor: controlColor,
           disabled: disabled,
           pointerEvents: "none",
           readOnly: readOnly,

package/esm/controls/__stories__/Checkbox.stories.js

@@ -46,14 +46,26 @@ const CheckboxScreen = () => {
         checked: true,
         disabled: true,
         children: "Checked and disabled"
-      }), /*#__PURE__*/_jsx(Checkbox, {
+      })]
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "Read Only",
+      children: /*#__PURE__*/_jsx(Checkbox, {
         readOnly: true,
         children: "Read Only"
-      }), /*#__PURE__*/_jsx(Checkbox, {
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "No Label",
+      children: /*#__PURE__*/_jsx(Checkbox, {
         accessibilityLabel: "checkbox with no label"
-      }), /*#__PURE__*/_jsx(Checkbox, {
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "Multi-line Label",
+      children: /*#__PURE__*/_jsx(Checkbox, {
         children: "This checkbox has a multi-line label. The checkbox and label should align at the top. The label is super duper long and it keeps going on forever. This checkbox has a multi-line label."
-      })]
+      })
     }), /*#__PURE__*/_jsx(Example, {
       inline: true,
       title: "Checkbox Group",
@@ -137,6 +149,24 @@ const CheckboxScreen = () => {
         onChange: () => setChecked(s => !s),
         children: "Style props indeterminate"
       })]
+    }), /*#__PURE__*/_jsxs(Example, {
+      inline: true,
+      title: "Custom Border Width",
+      children: [/*#__PURE__*/_jsx(Checkbox, {
+        checked: checked,
+        onChange: () => setChecked(s => !s),
+        children: "Default (100)"
+      }), /*#__PURE__*/_jsx(Checkbox, {
+        borderWidth: 200,
+        checked: checked,
+        onChange: () => setChecked(s => !s),
+        children: "Border width 200"
+      }), /*#__PURE__*/_jsx(Checkbox, {
+        borderWidth: 500,
+        checked: checked,
+        onChange: () => setChecked(s => !s),
+        children: "Border width 500"
+      })]
     })]
   });
 };

package/esm/controls/__stories__/RadioGroup.stories.js

@@ -1,6 +1,9 @@
+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, { useState } from 'react';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { VStack } from '../../layout';
+import { ThemeProvider } from '../../system';
+import { defaultTheme } from '../../themes/defaultTheme';
 import { Text } from '../../typography/Text';
 import { Radio, RadioGroup } from '../RadioGroup';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -31,14 +34,26 @@ const RadioGroupScreen = () => {
       }), /*#__PURE__*/_jsx(Radio, {
         disabled: true,
         children: "Disabled"
-      }), /*#__PURE__*/_jsx(Radio, {
+      })]
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "Read Only",
+      children: /*#__PURE__*/_jsx(Radio, {
         readOnly: true,
         children: "Read Only"
-      }), /*#__PURE__*/_jsx(Radio, {
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "No Label",
+      children: /*#__PURE__*/_jsx(Radio, {
         accessibilityLabel: "radio with no label"
-      }), /*#__PURE__*/_jsx(Radio, {
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "Multi-line Label",
+      children: /*#__PURE__*/_jsx(Radio, {
         children: "This radio has a multi-line label. The radio and label should align at the top. The label is super duper long and it keeps going on forever. This radio has a multi-line label."
-      })]
+      })
     }), /*#__PURE__*/_jsx(Example, {
       inline: true,
       title: "Radio Group",
@@ -135,6 +150,34 @@ const RadioGroupScreen = () => {
           })]
         });
       }
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "Custom Border Width",
+      children: () => {
+        const toggleChecked = () => setChecked(prevChecked => !prevChecked);
+        const smallRadioTheme = _extends({}, defaultTheme, {
+          controlSize: _extends({}, defaultTheme.controlSize, {
+            radioSize: 18
+          })
+        });
+        return /*#__PURE__*/_jsxs(VStack, {
+          gap: 2,
+          children: [/*#__PURE__*/_jsx(Radio, {
+            checked: checked,
+            onChange: toggleChecked,
+            children: "Default radio (20px, borderWidth 100)"
+          }), /*#__PURE__*/_jsx(ThemeProvider, {
+            activeColorScheme: "light",
+            theme: smallRadioTheme,
+            children: /*#__PURE__*/_jsx(Radio, {
+              borderWidth: 200,
+              checked: checked,
+              onChange: toggleChecked,
+              children: "Smaller radio (18px, borderWidth 200)"
+            })
+          })]
+        });
+      }
     })]
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.52.1",
+  "version": "8.53.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -198,9 +198,9 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.52.1",
-    "@coinbase/cds-icons": "^5.12.0",
-    "@coinbase/cds-illustrations": "^4.32.0",
+    "@coinbase/cds-common": "^8.53.0",
+    "@coinbase/cds-icons": "^5.13.0",
+    "@coinbase/cds-illustrations": "^4.33.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
     "@coinbase/cds-utils": "^2.3.5",
     "@floating-ui/react-native": "^0.10.5",