@coinbase/cds-mobile 8.21.8 → 8.22.2

package/CHANGELOG.md

@@ -8,6 +8,24 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.22.2 (11/26/2025 PST)
+
+#### 🐞 Fixes
+
+- Wrap Select labels instead of truncating them. [[#179](https://github.com/coinbase/cds/pull/179)]
+
+## 8.22.1 (11/24/2025 PST)
+
+#### 🐞 Fixes
+
+- Fix the borderRadius prop issue in Banner. [[#190](https://github.com/coinbase/cds/pull/190)]
+
+## 8.22.0 (11/24/2025 PST)
+
+#### 🚀 Updates
+
+- Added `subtitle` for ListCell and accessory for `ListCellFallback`. [[#149](https://github.com/coinbase/cds/pull/149)] [DX-5015]
+
 ## 8.21.8 (11/21/2025 PST)
 
 #### 🐞 Fixes

package/dts/alpha/select/DefaultSelectControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultSelectControl.d.ts","sourceRoot":"","sources":["../../../src/alpha/select/DefaultSelectControl.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAc3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAiB7E,KAAK,6BAA6B,GAAG,CACnC,IAAI,SAAS,UAAU,EACvB,iBAAiB,SAAS,MAAM,GAAG,MAAM,EAEzC,KAAK,EAAE,kBAAkB,CAAC,IAAI,EAAE,iBAAiB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAE,KACvF,KAAK,CAAC,YAAY,CAAC;AAExB,eAAO,MAAM,6BAA6B;;;;;;;;;;;;;;;;;;;;wBA+IlC,CAAA;wBAMA,CAAP;wBAGY,CAAC;wBAGR,CAAA;6BAMM,CAAX;sBACuC,CAAC;;qDAgGxC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAoC,6BAA6B,CAAC"}
+{"version":3,"file":"DefaultSelectControl.d.ts","sourceRoot":"","sources":["../../../src/alpha/select/DefaultSelectControl.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAc3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAiB7E,KAAK,6BAA6B,GAAG,CACnC,IAAI,SAAS,UAAU,EACvB,iBAAiB,SAAS,MAAM,GAAG,MAAM,EAEzC,KAAK,EAAE,kBAAkB,CAAC,IAAI,EAAE,iBAAiB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAE,KACvF,KAAK,CAAC,YAAY,CAAC;AAExB,eAAO,MAAM,6BAA6B;;;;;;;;;;;;;;;;;;;;wBA6I9B,CAAH;wBAMD,CAAC;wBAIc,CAAC;wBAIhB,CAAP;6BAI2B,CAAC;sBAIV,CAAC;;qDAiGnB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAoC,6BAA6B,CAAC"}

package/dts/alpha/select/DefaultSelectOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultSelectOption.d.ts","sourceRoot":"","sources":["../../../src/alpha/select/DefaultSelectOption.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,cAAc,CAAC;AAOzC,OAAO,KAAK,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAkG9D,eAAO,MAAM,mBAAmB,EAAqD,CACnF,IAAI,SAAS,UAAU,GAAG,QAAQ,EAClC,iBAAiB,SAAS,MAAM,GAAG,MAAM,EAEzC,KAAK,EAAE,iBAAiB,CAAC,IAAI,EAAE,iBAAiB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;CAAE,KAC1E,KAAK,CAAC,YAAY,CAAC"}
+{"version":3,"file":"DefaultSelectOption.d.ts","sourceRoot":"","sources":["../../../src/alpha/select/DefaultSelectOption.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,cAAc,CAAC;AAOzC,OAAO,KAAK,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AA4F9D,eAAO,MAAM,mBAAmB,EAAqD,CACnF,IAAI,SAAS,UAAU,GAAG,QAAQ,EAClC,iBAAiB,SAAS,MAAM,GAAG,MAAM,EAEzC,KAAK,EAAE,iBAAiB,CAAC,IAAI,EAAE,iBAAiB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;CAAE,KAC1E,KAAK,CAAC,YAAY,CAAC"}

package/dts/banner/Banner.d.ts

@@ -52,7 +52,8 @@ export type BannerBaseProps = SharedProps & {
   bordered?: boolean;
   /**
    * Determines banner's border radius
-   * @default 400
+   *
+   * @default 400 for contextual, undefined for global and inline
    * */
   borderRadius?: ThemeVars.BorderRadius;
 };
@@ -103,7 +104,8 @@ export declare const Banner: React.MemoExoticComponent<
       bordered?: boolean;
       /**
        * Determines banner's border radius
-       * @default 400
+       *
+       * @default 400 for contextual, undefined for global and inline
        * */
       borderRadius?: ThemeVars.BorderRadius;
     } & Omit<import('../layout').BoxProps, 'children'> &

package/dts/banner/Banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/banner/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2E,MAAM,OAAO,CAAC;AAChG,OAAO,KAAK,EAAE,IAAI,EAAa,MAAM,cAAc,CAAC;AACpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,KAAK,EACV,kBAAkB,EAClB,aAAa,EACb,QAAQ,EACR,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAMpC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAsB7C,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG;IAC1C,2GAA2G;IAC3G,OAAO,EAAE,aAAa,CAAC;IACvB,6CAA6C;IAC7C,SAAS,EAAE,QAAQ,CAAC;IACpB,uCAAuC;IACvC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,4HAA4H;IAC5H,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,2HAA2H;IAC3H,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,wBAAwB;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;SAGK;IACL,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gFAAgF;IAChF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gCAAgC;IAChC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;SAGK;IACL,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,uDAAuD;IACvD,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC;;OAEG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC;;;SAGK;IACL,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;SAGK;IACL,YAAY,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC;AAEhF,eAAO,MAAM,MAAM;IAlDjB,2GAA2G;aAClG,aAAa;IACtB,6CAA6C;eAClC,QAAQ;IACnB,uCAAuC;sBACrB,OAAO;IACzB,4HAA4H;oBAC5G,KAAK,CAAC,SAAS;IAC/B,2HAA2H;sBACzG,KAAK,CAAC,SAAS;IACjC,2DAA2D;YACnD,KAAK,CAAC,SAAS;IACvB,wBAAwB;eACb,KAAK,CAAC,SAAS;IAC1B;;;SAGK;kBACS,OAAO;IACrB,gDAAgD;cACtC,MAAM,IAAI;IACpB,gFAAgF;oBAChE,MAAM;IACtB,gCAAgC;YACxB,KAAK,CAAC,SAAS;IACvB;;;SAGK;mBACU,kBAAkB;IACjC,uDAAuD;kCACzB,MAAM;IACpC;;OAEG;8BACuB,MAAM;IAChC;;;SAGK;eACM,OAAO;IAClB;;;SAGK;mBACU,SAAS,CAAC,YAAY;gFAmNtC,CAAC"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/banner/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2E,MAAM,OAAO,CAAC;AAChG,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,KAAK,EACV,kBAAkB,EAClB,aAAa,EACb,QAAQ,EACR,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAKpC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAM7C,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG;IAC1C,2GAA2G;IAC3G,OAAO,EAAE,aAAa,CAAC;IACvB,6CAA6C;IAC7C,SAAS,EAAE,QAAQ,CAAC;IACpB,uCAAuC;IACvC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,4HAA4H;IAC5H,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,2HAA2H;IAC3H,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,wBAAwB;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;SAGK;IACL,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gFAAgF;IAChF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gCAAgC;IAChC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;SAGK;IACL,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,uDAAuD;IACvD,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC;;OAEG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC;;;SAGK;IACL,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;SAIK;IACL,YAAY,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC;AAEhF,eAAO,MAAM,MAAM;IAnDjB,2GAA2G;aAClG,aAAa;IACtB,6CAA6C;eAClC,QAAQ;IACnB,uCAAuC;sBACrB,OAAO;IACzB,4HAA4H;oBAC5G,KAAK,CAAC,SAAS;IAC/B,2HAA2H;sBACzG,KAAK,CAAC,SAAS;IACjC,2DAA2D;YACnD,KAAK,CAAC,SAAS;IACvB,wBAAwB;eACb,KAAK,CAAC,SAAS;IAC1B;;;SAGK;kBACS,OAAO;IACrB,gDAAgD;cACtC,MAAM,IAAI;IACpB,gFAAgF;oBAChE,MAAM;IACtB,gCAAgC;YACxB,KAAK,CAAC,SAAS;IACvB;;;SAGK;mBACU,kBAAkB;IACjC,uDAAuD;kCACzB,MAAM;IACpC;;OAEG;8BACuB,MAAM;IAChC;;;SAGK;eACM,OAAO;IAClB;;;;SAIK;mBACU,SAAS,CAAC,YAAY;gFAmNtC,CAAC"}

package/dts/cells/ListCell.d.ts

@@ -84,6 +84,10 @@ export type ListCellBaseProps = CellDetailProps &
     title?: React.ReactNode;
     /** React node to render title. Takes precedence over `title`. */
     titleNode?: React.ReactNode;
+    /** Subtitle to display below the title and above the description. This prop is only intended to accept a string or Text component; other use cases, while allowed, are not supported and may result in unexpected behavior. For arbitrary content, use `subtitleNode`. */
+    subtitle?: React.ReactNode;
+    /** React node to render subtitle. Takes precedence over `subtitle`. */
+    subtitleNode?: React.ReactNode;
     /** Styles for the components */
     styles?: {
       root?: StyleProp<ViewStyle>;
@@ -96,6 +100,7 @@ export type ListCellBaseProps = CellDetailProps &
       mainContent?: StyleProp<ViewStyle>;
       helperText?: StyleProp<ViewStyle>;
       title?: StyleProp<TextStyle>;
+      subtitle?: StyleProp<TextStyle>;
       description?: StyleProp<TextStyle>;
     };
   };

package/dts/cells/ListCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListCell.d.ts","sourceRoot":"","sources":["../../src/cells/ListCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMpE,OAAO,EAAQ,KAAK,aAAa,EAAE,KAAK,SAAS,EAAoB,MAAM,QAAQ,CAAC;AACpF,OAAO,EAAiB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAEhE,eAAO,MAAM,qBAAqB;;;;CAIF,CAAC;AAGjC,eAAO,MAAM,qBAAqB;;;;CAIF,CAAC;AAEjC,MAAM,MAAM,iBAAiB,GAAG,eAAe,GAC7C,IAAI,CAAC,aAAa,EAAE,WAAW,GAAG,UAAU,CAAC,GAAG;IAC9C,mDAAmD;IACnD,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,gGAAgG;IAChG,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;;;OAIG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,cAAc,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,WAAW,CAAC;IACpD,6SAA6S;IAC7S,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,6EAA6E;IAC7E,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC;;;OAGG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC;;;;;OAKG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,2DAA2D;IAC3D,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,6BAA6B;IAC7B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE/B,KAAK,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC3B,wIAAwI;IACxI,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uSAAuS;IACvS,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iEAAiE;IACjE,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,gCAAgC;IAChC,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACpC,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC3B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACjC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACxC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACjC,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACnC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAClC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7B,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACpC,CAAC;CACH,CAAC;AAEJ,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG,IAAI,CAAC,SAAS,EAAE,WAAW,GAAG,UAAU,CAAC,CAAC;AAE1F,eAAO,MAAM,QAAQ,2CAoJnB,CAAC"}
+{"version":3,"file":"ListCell.d.ts","sourceRoot":"","sources":["../../src/cells/ListCell.tsx"],"names":[],"mappings":"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"}

package/dts/cells/ListCellFallback.d.ts

@@ -1,10 +1,16 @@
+import { type ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { FallbackRectWidthProps, SharedProps } from '@coinbase/cds-common/types';
+import { type CellAccessoryType } from './CellAccessory';
 import type { CellMediaType } from './CellMedia';
 import { type ListCellBaseProps } from './ListCell';
 export type ListCellFallbackBaseProps = SharedProps &
   FallbackRectWidthProps &
   Pick<ListCellBaseProps, 'compact' | 'innerSpacing' | 'outerSpacing' | 'spacingVariant'> & {
+    /** Accessory to display at the end of the cell. */
+    accessory?: CellAccessoryType;
+    /** Custom accessory rendered at the end of the cell. Takes precedence over `accessory`. */
+    accessoryNode?: ReactNode;
     /** Display description shimmer. */
     description?: boolean;
     /** Display detail shimmer. */
@@ -15,6 +21,8 @@ export type ListCellFallbackBaseProps = SharedProps &
     media?: CellMediaType;
     /** Display subdetail shimmer. */
     subdetail?: boolean;
+    /** Display subtitle shimmer. */
+    subtitle?: boolean;
     /** Display title shimmer. */
     title?: boolean;
   };
@@ -31,6 +39,10 @@ export type ListCellFallbackProps = ListCellFallbackBaseProps & {
     title?: StyleProp<ViewStyle>;
     /** Style to apply to the description shimmer. */
     description?: StyleProp<ViewStyle>;
+    /** Style to apply to the subtitle shimmer. */
+    subtitle?: StyleProp<ViewStyle>;
+    /** Style to apply to the accessory container. */
+    accessory?: StyleProp<ViewStyle>;
   };
 };
 export declare const ListCellFallback: import('react').NamedExoticComponent<ListCellFallbackProps>;

package/dts/cells/ListCellFallback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListCellFallback.d.ts","sourceRoot":"","sources":["../../src/cells/ListCellFallback.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,sBAAsB,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAQtF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAgD,KAAK,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAGlG,MAAM,MAAM,yBAAyB,GAAG,WAAW,GACjD,sBAAsB,GACtB,IAAI,CAAC,iBAAiB,EAAE,SAAS,GAAG,cAAc,GAAG,cAAc,GAAG,gBAAgB,CAAC,GAAG;IACxF,mCAAmC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mCAAmC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,iCAAiC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEJ,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,GAAG;IAC9D,+DAA+D;IAC/D,MAAM,CAAC,EAAE;QACP,kEAAkE;QAClE,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAClC,4CAA4C;QAC5C,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC9B,+CAA+C;QAC/C,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACjC,2CAA2C;QAC3C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7B,iDAAiD;QACjD,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACpC,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,gBAAgB,6DAmJ3B,CAAC"}
+{"version":3,"file":"ListCellFallback.d.ts","sourceRoot":"","sources":["../../src/cells/ListCellFallback.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,sBAAsB,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAQtF,OAAO,EAAiB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAgD,KAAK,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAGlG,MAAM,MAAM,yBAAyB,GAAG,WAAW,GACjD,sBAAsB,GACtB,IAAI,CAAC,iBAAiB,EAAE,SAAS,GAAG,cAAc,GAAG,cAAc,GAAG,gBAAgB,CAAC,GAAG;IACxF,mDAAmD;IACnD,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,2FAA2F;IAC3F,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,mCAAmC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mCAAmC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,iCAAiC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEJ,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,GAAG;IAC9D,+DAA+D;IAC/D,MAAM,CAAC,EAAE;QACP,kEAAkE;QAClE,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAClC,4CAA4C;QAC5C,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC9B,+CAA+C;QAC/C,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACjC,2CAA2C;QAC3C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7B,iDAAiD;QACjD,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACnC,8CAA8C;QAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAChC,iDAAiD;QACjD,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAClC,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,gBAAgB,6DAuL3B,CAAC"}

package/esm/alpha/select/DefaultSelectControl.js

@@ -75,6 +75,8 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
     children: /*#__PURE__*/_jsx(InputLabel, {
       alignSelf: labelVariant === 'inside' ? 'flex-start' : undefined,
       color: "fg",
+      ellipsizeMode: "tail",
+      numberOfLines: 2,
       paddingX: labelVariant === 'inside' ? 2 : 0,
       paddingY: shouldShowCompactLabel || labelVariant === 'inside' ? 0 : 0.5,
       children: label
@@ -151,12 +153,12 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
           children: startNode
         }), shouldShowCompactLabel ? /*#__PURE__*/_jsx(HStack, {
           alignItems: "center",
-          maxWidth: "40%",
           paddingEnd: 1,
+          width: "40%",
           children: labelNode
         }) : null, /*#__PURE__*/_jsx(VStack, {
           justifyContent: "center",
-          maxWidth: startNode ? '70%' : '85%',
+          maxWidth: shouldShowCompactLabel ? '45%' : startNode ? '70%' : '85%',
           style: styles == null ? void 0 : styles.controlValueNode,
           children: valueNode
         })]

package/esm/alpha/select/DefaultSelectOption.js

@@ -17,7 +17,6 @@ const DefaultSelectOptionComponent = (_ref, ref) => {
       indeterminate,
       compact,
       description,
-      multiline,
       style,
       styles,
       type,
@@ -26,20 +25,20 @@ const DefaultSelectOptionComponent = (_ref, ref) => {
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const labelNode = useMemo(() => typeof label === 'string' ? /*#__PURE__*/_jsx(Text, {
-    ellipsize: description ? 'tail' : multiline ? undefined : 'tail',
+    ellipsize: "tail",
     font: "headline",
-    numberOfLines: description ? 1 : multiline ? undefined : 2,
+    numberOfLines: 2,
     style: styles == null ? void 0 : styles.optionLabel,
     children: label
-  }) : label, [label, description, multiline, styles == null ? void 0 : styles.optionLabel]);
+  }) : label, [label, styles == null ? void 0 : styles.optionLabel]);
   const descriptionNode = useMemo(() => typeof description === 'string' ? /*#__PURE__*/_jsx(Text, {
     color: "fgMuted",
-    ellipsize: multiline ? undefined : 'tail',
+    ellipsize: "tail",
     font: "body",
-    numberOfLines: multiline ? undefined : description && label ? 1 : 2,
+    numberOfLines: 2,
     style: styles == null ? void 0 : styles.optionDescription,
     children: description
-  }) : description, [description, multiline, label, styles == null ? void 0 : styles.optionDescription]);
+  }) : description, [description, styles == null ? void 0 : styles.optionDescription]);
   const handlePress = useCallback(() => onPress == null ? void 0 : onPress(value), [onPress, value]);
   const multiSelectCheckedAccessibilityState = useMemo(() => {
     if (selected) return true;
@@ -59,7 +58,6 @@ const DefaultSelectOptionComponent = (_ref, ref) => {
     background: background,
     borderRadius: 0,
     disabled: disabled,
-    maxHeight: multiline ? undefined : compact ? 56 : 64,
     minHeight: compact ? 40 : 56,
     onPress: handlePress,
     priority: "end",

package/esm/alpha/select/__stories__/Select.stories.js

@@ -994,24 +994,38 @@ const VeryLongLabelsExample = () => {
     label: 'Remove selection'
   }, {
     value: '1',
-    label: 'This is an extremely long option label that should test how the component handles very long text content'
+    label: 'This is an extremely long option label that should test how the component handles very long text content',
+    description: 'This is an extremely long option description that should test how the component handles very long text content'
   }, {
     value: '2',
-    label: 'Another super long option label with even more text to see how it wraps or truncates in the UI'
+    label: 'Another super long option label with even more text to see how it wraps or truncates in the UI',
+    description: 'Another super long option description with even more text to see how it wraps or truncates in the UI'
   }, {
     value: '3',
-    label: 'Short'
+    label: 'Short',
+    description: 'Short description'
   }, {
     value: '4',
-    label: 'A moderately long label that is somewhere between short and extremely long'
+    label: 'A moderately long label that is somewhere between short and extremely long',
+    description: 'A moderately long description that is somewhere between short and extremely long'
   }];
   const [value, setValue] = useState('1');
-  return /*#__PURE__*/_jsx(Select, {
-    label: "Single select - very long option labels",
-    onChange: setValue,
-    options: longOptions,
-    placeholder: "Empty value",
-    value: value
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(Select, {
+      label: "Single select - very long option labels",
+      onChange: setValue,
+      options: longOptions,
+      placeholder: "Empty value",
+      value: value
+    }), /*#__PURE__*/_jsx(Select, {
+      compact: true,
+      label: "Single select - very long option labels - compact",
+      onChange: setValue,
+      options: longOptions,
+      placeholder: "Empty value",
+      value: value
+    })]
   });
 };
 const LongPlaceholder = () => {

package/esm/banner/Banner.js

@@ -11,20 +11,6 @@ import { Pressable } from '../system/Pressable';
 import { Link } from '../typography';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const variantStyleProps = {
-  contextual: {
-    paddingX: 2,
-    borderRadius: 400
-  },
-  global: {
-    paddingX: 3,
-    borderRadius: undefined
-  },
-  inline: {
-    paddingX: 3,
-    borderRadius: undefined
-  }
-};
 export const Banner = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Banner(_ref, forwardedRef) {
   let {
       variant,
@@ -43,7 +29,7 @@ export const Banner = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Banner(
       styleVariant = 'contextual',
       startIconAccessibilityLabel,
       closeAccessibilityLabel = 'close',
-      borderRadius = 400,
+      borderRadius = styleVariant === 'contextual' ? 400 : undefined,
       margin,
       marginX,
       marginY,
@@ -120,10 +106,11 @@ export const Banner = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Banner(
       background: background,
       borderRadius: borderRadius,
       gap: 1,
+      paddingX: styleVariant === 'contextual' ? 2 : 3,
       paddingY: 2,
       style: style,
       testID: testID
-    }, variantStyleProps[styleVariant], props, {
+    }, props, {
       children: [/*#__PURE__*/_jsx(Box, {
         accessibilityLabel: startIconAccessibilityLabel,
         accessibilityRole: "image",

package/esm/banner/__stories__/Banner.stories.js

@@ -31,6 +31,7 @@ const examplePropsWithOffset = _extends({}, exampleProps, {
   marginX: -2,
   children: 'Lorem ipsum dolar sit amet'
 });
+const borderRadiusValues = [0, 200, 400];
 const styleProps = [{
   variant: 'warning',
   title: 'Warning message',
@@ -321,6 +322,35 @@ const BannerScreen = () => {
           variant: "warning"
         }))]
       })]
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Border Radius",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "title1",
+          children: "Contextual"
+        }), /*#__PURE__*/_jsx(VStack, {
+          gap: 2,
+          children: borderRadiusValues.map(radius => /*#__PURE__*/_jsx(Banner, _extends({}, exampleProps, {
+            borderRadius: radius,
+            title: "Contextual radius " + radius,
+            variant: "informational",
+            children: shortMessage
+          }), "mobile-contextual-" + radius))
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "title1",
+          children: "Inline"
+        }), /*#__PURE__*/_jsx(VStack, {
+          gap: 2,
+          children: borderRadiusValues.map(radius => /*#__PURE__*/_jsx(Banner, _extends({}, exampleProps, {
+            borderRadius: radius,
+            styleVariant: "inline",
+            title: "Inline radius " + radius,
+            variant: "informational",
+            children: shortMessage
+          }), "mobile-inline-" + radius))
+        })]
+      })
     })]
   });
 };

package/esm/cells/ListCell.js

@@ -1,4 +1,4 @@
-const _excluded = ["accessory", "accessoryNode", "end", "action", "compact", "title", "titleNode", "disableMultilineTitle", "description", "descriptionNode", "detail", "detailNode", "detailWidth", "intermediary", "priority", "innerSpacing", "outerSpacing", "disabled", "disableSelectionAccessory", "helperText", "media", "multiline", "selected", "subdetail", "subdetailNode", "variant", "onPress", "spacingVariant", "style", "styles"];
+const _excluded = ["accessory", "accessoryNode", "end", "action", "compact", "title", "titleNode", "disableMultilineTitle", "description", "descriptionNode", "subtitle", "subtitleNode", "detail", "detailNode", "detailWidth", "intermediary", "priority", "innerSpacing", "outerSpacing", "disabled", "disableSelectionAccessory", "helperText", "media", "multiline", "selected", "subdetail", "subdetailNode", "variant", "onPress", "spacingVariant", "style", "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, { memo, useMemo } from 'react';
@@ -34,6 +34,8 @@ export const ListCell = /*#__PURE__*/memo(function ListCell(_ref) {
       disableMultilineTitle = false,
       description,
       descriptionNode,
+      subtitle,
+      subtitleNode,
       detail,
       detailNode,
       detailWidth,
@@ -112,6 +114,13 @@ export const ListCell = /*#__PURE__*/memo(function ListCell(_ref) {
         spacingVariant === 'condensed' ? 2 : description ? 1 : 2,
         style: styles == null ? void 0 : styles.title,
         children: title
+      }) : null, subtitleNode ? subtitleNode : subtitle ? /*#__PURE__*/_jsx(Text, {
+        color: "fgMuted",
+        ellipsize: "tail",
+        font: "label1",
+        numberOfLines: 1,
+        style: styles == null ? void 0 : styles.subtitle,
+        children: subtitle
       }) : null, descriptionNode ? descriptionNode : description ? /*#__PURE__*/_jsx(Text, {
         color: "fgMuted",
         ellipsize: multiline ? undefined : 'tail',

package/esm/cells/ListCellFallback.js

@@ -1,4 +1,4 @@
-const _excluded = ["title", "description", "detail", "subdetail", "media", "disableRandomRectWidth", "rectWidthVariant", "helperText", "styles", "compact", "spacingVariant", "innerSpacing", "outerSpacing"];
+const _excluded = ["accessory", "accessoryNode", "title", "description", "detail", "subdetail", "media", "disableRandomRectWidth", "rectWidthVariant", "helperText", "subtitle", "styles", "compact", "spacingVariant", "innerSpacing", "outerSpacing"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import { memo, useMemo } from 'react';
@@ -7,11 +7,14 @@ import { useTheme } from '../hooks/useTheme';
 import { VStack } from '../layout';
 import { Fallback } from '../layout/Fallback';
 import { Cell } from './Cell';
+import { CellAccessory } from './CellAccessory';
 import { condensedInnerSpacing, condensedOuterSpacing } from './ListCell';
 import { MediaFallback } from './MediaFallback';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_ref) {
   let {
+      accessory,
+      accessoryNode,
       title,
       description,
       detail,
@@ -20,6 +23,7 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_ref
       disableRandomRectWidth,
       rectWidthVariant,
       helperText,
+      subtitle,
       styles,
       compact,
       spacingVariant = compact ? 'compact' : 'normal',
@@ -34,13 +38,13 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_ref
     }
     return /*#__PURE__*/_jsx(Fallback, {
       disableRandomRectWidth: disableRandomRectWidth,
-      height: theme.lineHeight.body,
+      height: spacingVariant === 'condensed' ? theme.lineHeight.label2 : theme.lineHeight.body,
       rectWidthVariant: getRectWidthVariant(rectWidthVariant, 0),
       style: styles == null ? void 0 : styles.description,
       testID: "list-cell-fallback-description",
       width: 110
     });
-  }, [description, disableRandomRectWidth, rectWidthVariant, styles == null ? void 0 : styles.description, theme.lineHeight.body]);
+  }, [description, disableRandomRectWidth, rectWidthVariant, spacingVariant, styles == null ? void 0 : styles.description, theme.lineHeight.body, theme.lineHeight.label2]);
   const detailFallback = useMemo(() => {
     if (!detail && !subdetail) {
       return null;
@@ -59,14 +63,14 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_ref
         width: 60
       }), !!subdetail && /*#__PURE__*/_jsx(Fallback, {
         disableRandomRectWidth: disableRandomRectWidth,
-        height: theme.lineHeight.body,
+        height: spacingVariant === 'condensed' ? theme.lineHeight.label2 : theme.lineHeight.body,
         rectWidthVariant: getRectWidthVariant(rectWidthVariant, 1),
         style: styles == null ? void 0 : styles.subdetail,
         testID: "list-cell-fallback-subdetail",
         width: 60
       })]
     });
-  }, [detail, disableRandomRectWidth, rectWidthVariant, styles == null ? void 0 : styles.detail, styles == null ? void 0 : styles.subdetail, subdetail, theme.lineHeight.body]);
+  }, [detail, disableRandomRectWidth, rectWidthVariant, spacingVariant, styles == null ? void 0 : styles.detail, styles == null ? void 0 : styles.subdetail, subdetail, theme.lineHeight.body, theme.lineHeight.label2]);
   const helperTextFallback = useMemo(() => {
     if (!helperText) {
       return null;
@@ -80,6 +84,19 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_ref
       width: "85%"
     });
   }, [disableRandomRectWidth, helperText, rectWidthVariant, styles == null ? void 0 : styles.helperText, theme.lineHeight.body]);
+  const subtitleFallback = useMemo(() => {
+    if (!subtitle) {
+      return null;
+    }
+    return /*#__PURE__*/_jsx(Fallback, {
+      disableRandomRectWidth: disableRandomRectWidth,
+      height: theme.lineHeight.label1,
+      rectWidthVariant: getRectWidthVariant(rectWidthVariant, 2),
+      style: styles == null ? void 0 : styles.subtitle,
+      testID: "list-cell-fallback-subtitle",
+      width: 80
+    });
+  }, [disableRandomRectWidth, rectWidthVariant, styles == null ? void 0 : styles.subtitle, subtitle, theme.lineHeight.label1]);
   const mediaFallback = useMemo(() => {
     if (!media) {
       return;
@@ -103,15 +120,22 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_ref
     });
   }, [disableRandomRectWidth, rectWidthVariant, styles == null ? void 0 : styles.title, theme.lineHeight.headline, title]);
   return /*#__PURE__*/_jsx(Cell, _extends({
+    accessory: accessory ? /*#__PURE__*/_jsx(CellAccessory, {
+      type: accessory
+    }) : undefined,
+    accessoryNode: accessoryNode,
     bottomContent: helperTextFallback,
-    detail: detailFallback,
+    end: detailFallback,
     innerSpacing: innerSpacing != null ? innerSpacing : spacingVariant === 'condensed' ? condensedInnerSpacing : undefined,
     media: mediaFallback,
-    outerSpacing: outerSpacing != null ? outerSpacing : spacingVariant === 'condensed' ? condensedOuterSpacing : undefined
+    outerSpacing: outerSpacing != null ? outerSpacing : spacingVariant === 'condensed' ? condensedOuterSpacing : undefined,
+    styles: {
+      accessory: styles == null ? void 0 : styles.accessory
+    }
   }, props, {
     children: /*#__PURE__*/_jsxs(VStack, {
       gap: 0.5,
-      children: [titleFallback, descriptionFallback]
+      children: [titleFallback, subtitleFallback, descriptionFallback]
     })
   }));
 });

package/esm/cells/__stories__/ListCell.stories.js

@@ -5,6 +5,7 @@ import { selectCellSpacingConfig } from '@coinbase/cds-common/tokens/select';
 import { gutter } from '@coinbase/cds-common/tokens/sizing';
 import { Button } from '../../buttons/Button';
 import { IconButton } from '../../buttons/IconButton';
+import { Switch } from '../../controls/Switch';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { useTheme } from '../../hooks/useTheme';
 import { Icon } from '../../icons/Icon';
@@ -16,6 +17,7 @@ import { Tag } from '../../tag/Tag';
 import { Text } from '../../typography/Text';
 import { CellHelperText } from '../CellHelperText';
 import { ListCell } from '../ListCell';
+import { ListCellFallback } from '../ListCellFallback';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const onPressConsole = () => console.log('onPress');
 const cellPriorities = ['middle', 'end'];
@@ -641,6 +643,42 @@ const WithActions = () => /*#__PURE__*/_jsxs(_Fragment, {
     title: "Title"
   })]
 });
+const Fallback = () => {
+  const [showFallback, setShowFallback] = React.useState(false);
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(Switch, {
+      checked: showFallback,
+      onChange: (_, nextChecked) => setShowFallback(Boolean(nextChecked)),
+      children: "Show fallback state"
+    }), showFallback ? /*#__PURE__*/_jsx(ListCellFallback, {
+      description: true,
+      detail: true,
+      disableRandomRectWidth: true,
+      helperText: true,
+      subdetail: true,
+      subtitle: true,
+      title: true,
+      accessory: "more",
+      media: "asset",
+      spacingVariant: "condensed"
+    }) : /*#__PURE__*/_jsx(ListCell, {
+      accessory: "more",
+      description: "Review portfolio performance",
+      detail: "$12,345.00",
+      helperText: /*#__PURE__*/_jsx(CellHelperText, {
+        children: "Balance reflects live market data"
+      }),
+      media: /*#__PURE__*/_jsx(Avatar, {
+        src: assets.eth.imageUrl
+      }),
+      spacingVariant: "condensed",
+      subdetail: "+5.43%",
+      subtitle: "ETH",
+      title: "Ethereum"
+    })]
+  });
+};
 const WithIntermediary = () => /*#__PURE__*/_jsxs(_Fragment, {
   children: [/*#__PURE__*/_jsx(ListCell, {
     description: "Description",
@@ -871,6 +909,44 @@ const CondensedListCell = () => {
       },
       subdetail: "Subdetail",
       title: "Title"
+    }), /*#__PURE__*/_jsx(ListCell, {
+      multiline: true,
+      description: "Long description with multiple lines. This section can be arbitrarily long and occupy many many lines.",
+      detail: "Detail",
+      end: /*#__PURE__*/_jsxs(HStack, {
+        alignItems: "center",
+        gap: 1,
+        children: [/*#__PURE__*/_jsx(Text, {
+          color: "fgMuted",
+          font: "label2",
+          children: "Meta"
+        }), /*#__PURE__*/_jsx(Icon, {
+          color: "fg",
+          name: "caretRight",
+          size: "s"
+        })]
+      }),
+      media: /*#__PURE__*/_jsx(Avatar, {
+        shape: "circle",
+        size: "l",
+        src: assets.eth.imageUrl
+      }),
+      onPress: onPressConsole,
+      priority: "end",
+      spacingVariant: "condensed",
+      styles: {
+        media: {
+          marginTop: theme.space[1],
+          alignSelf: 'flex-start'
+        },
+        end: {
+          marginTop: theme.space[1],
+          alignSelf: 'flex-start'
+        }
+      },
+      subdetail: "Subdetail",
+      subtitle: "Subtitle",
+      title: "Title"
     }), /*#__PURE__*/_jsx(ListCell, {
       accessory: "more",
       description: "Description",
@@ -1275,6 +1351,12 @@ const ListCellScreen = () => {
       title: "WithActions",
       titlePadding: titlePadding,
       children: /*#__PURE__*/_jsx(WithActions, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      paddingX: 0,
+      title: "Fallback",
+      titlePadding: titlePadding,
+      children: /*#__PURE__*/_jsx(Fallback, {})
     }), /*#__PURE__*/_jsx(Example, {
       inline: true,
       paddingX: 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.21.8",
+  "version": "8.22.2",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -154,7 +154,7 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.21.8",
+    "@coinbase/cds-common": "^8.22.2",
     "@coinbase/cds-icons": "^5.7.0",
     "@coinbase/cds-illustrations": "^4.28.0",
     "@coinbase/cds-lottie-files": "^3.3.3",