@coinbase/cds-mobile 8.14.2 → 8.16.0

package/CHANGELOG.md

@@ -8,6 +8,16 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.16.0 (10/8/2025 PST)
+
+#### 🚀 Updates
+
+- New ListCell in layoutSpacing variants. [[#31](https://github.com/coinbase/cds/pull/31)]
+
+## 8.15.0 ((10/8/2025, 6:30 AM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.14.2 (10/7/2025 PST)
 
 #### 🐞 Fixes

package/dts/cells/Cell.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ViewProps } from 'react-native';
+import { type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import type { CellPriority, SharedProps } from '@coinbase/cds-common/types';
 import { type BoxBaseProps, type BoxProps } from '../layout/Box';
@@ -24,13 +24,27 @@ export type CellSpacing = Pick<
 >;
 export type CellBaseProps = SharedProps &
   LinkableProps & {
+    /** Accessory element rendered at the end of the cell (e.g., chevron). */
     accessory?: React.ReactElement<CellAccessoryProps>;
+    /** Main content of the cell; typically title/description content. */
     children: React.ReactNode;
+    /**
+     * End-aligned content (e.g., value, status).
+     * Replaces the deprecated `detail` prop.
+     */
+    end?: React.ReactNode;
+    /**
+     * @deprecated Use `end` instead. `detail` will be removed in a release.
+     */
     detail?: React.ReactNode;
+    /** Middle content between main content and detail. */
     intermediary?: React.ReactNode;
+    /** Media rendered at the start of the cell (icon, avatar, image, etc). */
     media?: React.ReactElement;
     borderRadius?: ThemeVars.BorderRadius;
-    /** Apply a fixed width to the detail (end). */
+    /**
+     * @deprecated Use `styles.end` instead. `detailWidth` will be removed in a release.
+     */
     detailWidth?: number | string;
     /** Is the cell disabled? Will apply opacity and disable interaction. */
     disabled?: boolean;
@@ -46,6 +60,19 @@ export type CellBaseProps = SharedProps &
     bottomContent?: React.ReactNode;
     /** Measure the dimensions of the cell. */
     onLayout?: ViewProps['onLayout'];
+    /** Styles for the components */
+    styles?: {
+      root?: StyleProp<ViewStyle>;
+      contentContainer?: StyleProp<ViewStyle>;
+      topContent?: StyleProp<ViewStyle>;
+      bottomContent?: StyleProp<ViewStyle>;
+      pressable?: StyleProp<ViewStyle>;
+      media?: StyleProp<ViewStyle>;
+      intermediary?: StyleProp<ViewStyle>;
+      /** Applied to the container of detail or action */
+      end?: StyleProp<ViewStyle>;
+      accessory?: StyleProp<ViewStyle>;
+    };
   };
 export type CellProps = BoxProps & CellBaseProps;
 export declare const Cell: React.NamedExoticComponent<CellProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"Cell.d.ts","sourceRoot":"","sources":["../../src/cells/Cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAK5E,OAAO,EAAO,KAAK,YAAY,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGtE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGzD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,YAAY,EACV,SAAS,GACT,UAAU,GACV,UAAU,GACV,YAAY,GACZ,YAAY,GACZ,eAAe,GACf,cAAc,GACd,QAAQ,GACR,SAAS,GACT,SAAS,GACT,WAAW,GACX,WAAW,GACX,cAAc,GACd,aAAa,CAChB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,WAAW,GACrC,aAAa,GAAG;IACd,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;IACnD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC3B,YAAY,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC;IACtC,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6GAA6G;IAC7G,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACzC,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,sDAAsD;IACtD,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,0DAA0D;IAC1D,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;CAClC,CAAC;AAEJ,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,aAAa,CAAC;AAEjD,eAAO,MAAM,IAAI,uCA2Lf,CAAC"}
+{"version":3,"file":"Cell.d.ts","sourceRoot":"","sources":["../../src/cells/Cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,KAAK,SAAS,EAAc,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAC1F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAK5E,OAAO,EAAO,KAAK,YAAY,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGtE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGzD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,YAAY,EACV,SAAS,GACT,UAAU,GACV,UAAU,GACV,YAAY,GACZ,YAAY,GACZ,eAAe,GACf,cAAc,GACd,QAAQ,GACR,SAAS,GACT,SAAS,GACT,WAAW,GACX,WAAW,GACX,cAAc,GACd,aAAa,CAChB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,WAAW,GACrC,aAAa,GAAG;IACd,yEAAyE;IACzE,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;IACnD,qEAAqE;IACrE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,sDAAsD;IACtD,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,0EAA0E;IAC1E,KAAK,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC3B,YAAY,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC;IACtC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6GAA6G;IAC7G,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACzC,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,sDAAsD;IACtD,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,0DAA0D;IAC1D,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IACjC,gCAAgC;IAChC,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACxC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAClC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACrC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACjC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACpC,mDAAmD;QACnD,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC3B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAClC,CAAC;CACH,CAAC;AAEJ,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,aAAa,CAAC;AAEjD,eAAO,MAAM,IAAI,uCAgNf,CAAC"}

package/dts/cells/CellDetail.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { type TextProps } from '../typography/Text';
 export type CellDetailVariant = 'foregroundMuted' | 'negative' | 'positive' | 'warning';
 export type CellDetailProps = {
   /**
@@ -13,7 +14,10 @@ export type CellDetailProps = {
   subdetail?: React.ReactNode;
   /** Variant color to apply to the subdetail text. */
   variant?: CellDetailVariant;
+  /** Specifies whether font should be scaled down automatically to fit given style constraints. */
   adjustsFontSizeToFit?: boolean;
+  /** Font to apply to the subdetail text. */
+  subdetailFont?: TextProps['font'];
 };
 export declare const CellDetail: React.NamedExoticComponent<CellDetailProps>;
 //# sourceMappingURL=CellDetail.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CellDetail.d.ts","sourceRoot":"","sources":["../../src/cells/CellDetail.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAMpC,MAAM,MAAM,iBAAiB,GAAG,iBAAiB,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;AACxF,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,oDAAoD;IACpD,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AASF,eAAO,MAAM,UAAU,6CA0BrB,CAAC"}
+{"version":3,"file":"CellDetail.d.ts","sourceRoot":"","sources":["../../src/cells/CellDetail.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAIpC,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE1D,MAAM,MAAM,iBAAiB,GAAG,iBAAiB,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;AACxF,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,oDAAoD;IACpD,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,iGAAiG;IACjG,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,2CAA2C;IAC3C,aAAa,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;CACnC,CAAC;AASF,eAAO,MAAM,UAAU,6CA2BrB,CAAC"}

package/dts/cells/CellMedia.d.ts

@@ -35,6 +35,10 @@ export type CellMediaProps = SharedProps &
      */
     cache?: ImageURISource['cache'];
   };
+/**
+ * @deprecated This component will be removed in a future release. Pass media directly via the `media` prop.
+ * For example: `<Avatar src={...} />`, `<Icon name={...} />`, `<RemoteImage source={...} />`, or a Pictogram.
+ */
 export declare const CellMedia: React.NamedExoticComponent<CellMediaProps>;
 export {};
 //# sourceMappingURL=CellMedia.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CellMedia.d.ts","sourceRoot":"","sources":["../../src/cells/CellMedia.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAClD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,KAAK,EAAE,QAAQ,EAAE,wBAAwB,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAGlG,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAIvD,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,WAAW,CAAC;AAEhF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,OAAO,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IACrC,IAAI,EAAE,QAAQ,CAAC;IACf,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,IAAI,EAAE,OAAO,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;IAC1C,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;CAClD,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,IAAI,EAAE,OAAO,CAAC,aAAa,EAAE,MAAM,GAAG,WAAW,CAAC,CAAC;IACnD;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB,CAAC;AAEF,KAAK,qBAAqB,GAAG,kBAAkB,GAAG,uBAAuB,GAAG,mBAAmB,CAAC;AAEhG,MAAM,MAAM,cAAc,GAAG,WAAW,GACtC,qBAAqB,GACrB,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,GAAG,mBAAmB,CAAC,GAAG;IAC3E;;;OAGG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;CACjC,CAAC;AAEJ,eAAO,MAAM,SAAS,4CAwEpB,CAAC"}
+{"version":3,"file":"CellMedia.d.ts","sourceRoot":"","sources":["../../src/cells/CellMedia.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAClD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,KAAK,EAAE,QAAQ,EAAE,wBAAwB,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAGlG,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAIvD,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,WAAW,CAAC;AAEhF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,OAAO,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IACrC,IAAI,EAAE,QAAQ,CAAC;IACf,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,IAAI,EAAE,OAAO,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;IAC1C,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;CAClD,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,IAAI,EAAE,OAAO,CAAC,aAAa,EAAE,MAAM,GAAG,WAAW,CAAC,CAAC;IACnD;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB,CAAC;AAEF,KAAK,qBAAqB,GAAG,kBAAkB,GAAG,uBAAuB,GAAG,mBAAmB,CAAC;AAEhG,MAAM,MAAM,cAAc,GAAG,WAAW,GACtC,qBAAqB,GACrB,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,GAAG,mBAAmB,CAAC,GAAG;IAC3E;;;OAGG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;CACjC,CAAC;AAEJ;;;GAGG;AACH,eAAO,MAAM,SAAS,4CAwEpB,CAAC"}

package/dts/cells/ListCell.d.ts

@@ -1,15 +1,58 @@
 import React from 'react';
-import { type CellBaseProps, type CellProps } from './Cell';
+import type { StyleProp, TextStyle } from 'react-native';
+import { type CellBaseProps, type CellProps, type CellSpacing } from './Cell';
 import { type CellAccessoryType } from './CellAccessory';
 import { type CellDetailProps } from './CellDetail';
+export declare const hugInnerSpacing: CellSpacing;
+export declare const hugOuterSpacing: CellSpacing;
+type CellStyles = NonNullable<CellBaseProps['styles']>;
 export type ListCellBaseProps = CellDetailProps &
   Omit<CellBaseProps, 'accessory' | 'children'> & {
     /** Accessory to display at the end of the cell. */
     accessory?: CellAccessoryType;
-    /** Interactive action, like a CTA or form element. Cannot be used alongside `onPress`. */
+    /**
+     * End-aligned content (e.g., CTA, form element, metric). Replacement for the deprecated action prop, and takes precedence over it.
+     * If the content is a action (like button, link, etc), we recommand avoid using alongside `onPress`.
+     * If used alongside `onClick`, the end action is triggered first and then the `onClick` handler.
+     */
+    end?: React.ReactNode;
+    /**
+     * @deprecated Use `end` instead. `action` will be removed in a release.
+     */
     action?: React.ReactNode;
-    /** Enables compact spacing */
+    /**
+     * @deprecated Use `layoutSpacing="compact"`. `compact` will be removed in a release.
+     */
     compact?: boolean;
+    /**
+     * Layout spacing configuration.
+     * Deprecated values: 'spacious' and 'compact'. Prefer 'hug'.
+     * This prop will be removed in the next major release, new list cell will only have 'hug' spacing.
+     *
+     * When 'spacious' is set, the cell will have the following behavior:
+     * 1. min-height is 80px
+     * 2. Effective padding is '16px 24px' with 8px padding around the pressable area
+     * 3. border radius is 8px for pressable area
+     * 4. Title always cap at 1 line when there is no description, cap at 2 lines when there is description
+     * 5. Description and subdetail have font 'body'
+     *
+     * When 'compact' is set, the cell will have the following behavior:
+     * 1. min-height is 40px
+     * 2. Effective padding is '16px 24px' with 8px padding around the pressable area
+     * 3. border radius is 8px for pressable area
+     * 4. Title always cap at 1 line when there is no description, cap at 2 lines when there is description
+     * 5. Description and subdetail have font 'body'
+     *
+     * When 'hug' is set, the cell will have the following behavior:
+     * 1. No min-height, height is determined by the content
+     * 2. Padding is '4px 16px', no extra padding around the pressable area
+     * 3. 0 border radius for pressable area
+     * 4. Title always cap at 2 lines
+     * 5. Description and subdetail have font 'label2'
+     *
+     * @default 'spacious'
+     */
+    layoutSpacing?: 'spacious' | 'compact' | 'hug';
     /** Description of content. Max 1 line (with title) or 2 lines (without), otherwise will truncate. */
     description?: React.ReactNode;
     /**
@@ -24,7 +67,7 @@ export type ListCellBaseProps = CellDetailProps &
      * the title will take up a single line truncating with ellipses.
      */
     disableMultilineTitle?: boolean;
-    /** Assitive message to display below the cell content */
+    /** Assistive message to display below the cell content. */
     helperText?: React.ReactNode;
     /** For internal use only. */
     intermediary?: React.ReactNode;
@@ -33,7 +76,18 @@ export type ListCellBaseProps = CellDetailProps &
     multiline?: boolean;
     /** Title of content. Max 1 line (with description) or 2 lines (without), otherwise will truncate. */
     title?: React.ReactNode;
+    /** Styles for the components */
+    styles?: Pick<
+      CellStyles,
+      'root' | 'media' | 'intermediary' | 'end' | 'accessory' | 'contentContainer' | 'pressable'
+    > & {
+      mainContent?: CellStyles['topContent'];
+      helperText?: CellStyles['bottomContent'];
+      title?: StyleProp<TextStyle>;
+      description?: StyleProp<TextStyle>;
+    };
   };
 export type ListCellProps = ListCellBaseProps & Omit<CellProps, 'accessory' | 'children'>;
 export declare const ListCell: React.NamedExoticComponent<ListCellProps>;
+export {};
 //# sourceMappingURL=ListCell.d.ts.map

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,KAAe,MAAM,OAAO,CAAC;AAMpC,OAAO,EAAQ,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAClE,OAAO,EAAiB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAEhE,MAAM,MAAM,iBAAiB,GAAG,eAAe,GAC7C,IAAI,CAAC,aAAa,EAAE,WAAW,GAAG,UAAU,CAAC,GAAG;IAC9C,mDAAmD;IACnD,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,0FAA0F;IAC1F,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qGAAqG;IACrG,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;;OAGG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC;;;;;OAKG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,yDAAyD;IACzD,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,qGAAqG;IACrG,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEJ,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG,IAAI,CAAC,SAAS,EAAE,WAAW,GAAG,UAAU,CAAC,CAAC;AAE1F,eAAO,MAAM,QAAQ,2CA+EnB,CAAC"}
+{"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,MAAM,cAAc,CAAC;AAMzD,OAAO,EAAQ,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAC;AACpF,OAAO,EAAiB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAEhE,eAAO,MAAM,eAAe,EAAE,WAI7B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,WAI7B,CAAC;AAEF,KAAK,UAAU,GAAG,WAAW,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC;AAEvD,MAAM,MAAM,iBAAiB,GAAG,eAAe,GAC7C,IAAI,CAAC,aAAa,EAAE,WAAW,GAAG,UAAU,CAAC,GAAG;IAC9C,mDAAmD;IACnD,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B;;;;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;;;;;;;;;;;;;;;;;;;;;;;;;;;OA2BG;IACH,aAAa,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,KAAK,CAAC;IAC/C,qGAAqG;IACrG,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;;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,qGAAqG;IACrG,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,gCAAgC;IAChC,MAAM,CAAC,EAAE,IAAI,CACX,UAAU,EACV,MAAM,GAAG,OAAO,GAAG,cAAc,GAAG,KAAK,GAAG,WAAW,GAAG,kBAAkB,GAAG,WAAW,CAC3F,GAAG;QACF,WAAW,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;QACvC,UAAU,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,CAAC;QACzC,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,2CAyHnB,CAAC"}

package/dts/cells/ListCellFallback.d.ts

@@ -4,7 +4,7 @@ import type { CellMediaType } from './CellMedia';
 import { type ListCellBaseProps } from './ListCell';
 export type ListCellFallbackBaseProps = SharedProps &
   FallbackRectWidthProps &
-  Pick<ListCellBaseProps, 'compact' | 'innerSpacing' | 'outerSpacing'> & {
+  Pick<ListCellBaseProps, 'compact' | 'innerSpacing' | 'outerSpacing' | 'layoutSpacing'> & {
     /** Display description shimmer. */
     description?: boolean;
     /** Display detail shimmer. */

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

@@ -1 +1 @@
-{"version":3,"file":"ListCellFallback.d.ts","sourceRoot":"","sources":["../../src/cells/ListCellFallback.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,KAAK,EAAE,sBAAsB,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAUtF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAG9D,MAAM,MAAM,yBAAyB,GAAG,WAAW,GACjD,sBAAsB,GACtB,IAAI,CAAC,iBAAiB,EAAE,SAAS,GAAG,cAAc,GAAG,cAAc,CAAC,GAAG;IACrE,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,6DAyI3B,CAAC"}
+{"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,EAAoC,KAAK,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAGtF,MAAM,MAAM,yBAAyB,GAAG,WAAW,GACjD,sBAAsB,GACtB,IAAI,CAAC,iBAAiB,EAAE,SAAS,GAAG,cAAc,GAAG,cAAc,GAAG,eAAe,CAAC,GAAG;IACvF,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,6DA+I3B,CAAC"}

package/esm/cells/Cell.js

@@ -1,8 +1,9 @@
-const _excluded = ["accessory", "alignItems", "borderRadius", "children", "detail", "detailWidth", "disabled", "intermediary", "media", "minHeight", "maxHeight", "onLayout", "onPress", "priority", "selected", "testID", "accessibilityLabel", "accessibilityHint", "gap", "columnGap", "rowGap", "innerSpacing", "outerSpacing", "bottomContent"],
+const _excluded = ["accessory", "alignItems", "borderRadius", "children", "styles", "end", "detail", "detailWidth", "disabled", "intermediary", "media", "minHeight", "maxHeight", "onLayout", "onPress", "priority", "selected", "testID", "accessibilityLabel", "accessibilityHint", "gap", "columnGap", "rowGap", "innerSpacing", "outerSpacing", "bottomContent", "style"],
   _excluded2 = ["marginX"];
 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';
+import { StyleSheet } from 'react-native';
 import { hasCellPriority } from '@coinbase/cds-common/utils/cell';
 import { useCellSpacing } from '../hooks/useCellSpacing';
 import { useTheme } from '../hooks/useTheme';
@@ -17,6 +18,8 @@ export const Cell = /*#__PURE__*/memo(function Cell(_ref) {
       alignItems = 'center',
       borderRadius = 200,
       children,
+      styles,
+      end,
       detail,
       detailWidth,
       disabled,
@@ -36,7 +39,8 @@ export const Cell = /*#__PURE__*/memo(function Cell(_ref) {
       rowGap = 1,
       innerSpacing: innerSpacingProp,
       outerSpacing: outerSpacingProp,
-      bottomContent
+      bottomContent,
+      style
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
@@ -52,23 +56,30 @@ export const Cell = /*#__PURE__*/memo(function Cell(_ref) {
     } = innerSpacing,
     innerSpacingWithoutMarginX = _objectWithoutPropertiesLoose(innerSpacing, _excluded2);
   const content = useMemo(() => {
+    var _StyleSheet$flatten$w, _StyleSheet$flatten;
     const contentContainerProps = _extends({
       borderRadius,
       testID,
       renderToHardwareTextureAndroid: disabled
     }, selected ? {
       background: 'bgAlternate'
-    } : {}, onPress ? innerSpacingWithoutMarginX : innerSpacing);
-    const topContentContainerProps = {
+    } : {}, onPress ? innerSpacingWithoutMarginX : innerSpacing, {
+      style: styles == null ? void 0 : styles.contentContainer
+    });
+    const topContentProps = {
       alignItems,
       flexGrow: 1,
       gap: columnGap || gap,
-      width: '100%'
+      width: '100%',
+      style: styles == null ? void 0 : styles.topContent
     };
+    const endWidth = (_StyleSheet$flatten$w = (_StyleSheet$flatten = StyleSheet.flatten(styles == null ? void 0 : styles.end)) == null ? void 0 : _StyleSheet$flatten.width) != null ? _StyleSheet$flatten$w : detailWidth;
+    const endContent = end != null ? end : detail;
     const topContent = /*#__PURE__*/_jsxs(_Fragment, {
       children: [!!media && /*#__PURE__*/_jsx(Box, {
         flexGrow: 0,
         flexShrink: 0,
+        style: styles == null ? void 0 : styles.media,
         children: media
       }), /*#__PURE__*/_jsx(Box, {
         flexGrow: 1,
@@ -79,22 +90,25 @@ export const Cell = /*#__PURE__*/memo(function Cell(_ref) {
         flexGrow: 0,
         flexShrink: hasCellPriority('middle', priority) ? 0 : 1,
         justifyContent: "center",
+        style: styles == null ? void 0 : styles.intermediary,
         children: intermediary
-      }), !!detail && /*#__PURE__*/_jsx(Box, {
+      }), !!endContent && /*#__PURE__*/_jsx(Box, {
         alignItems: "flex-end",
-        flexGrow: detailWidth ? undefined : 1,
-        flexShrink: detailWidth ? undefined : hasCellPriority('end', priority) ? 0 : 1,
+        flexGrow: endWidth ? undefined : 1,
+        flexShrink: endWidth ? undefined : hasCellPriority('end', priority) ? 0 : 1,
         justifyContent: "flex-end",
+        style: styles == null ? void 0 : styles.end,
         width: detailWidth,
-        children: detail
+        children: endContent
       }), !!accessory && /*#__PURE__*/_jsx(Box, {
         flexGrow: 0,
         flexShrink: 0,
+        style: styles == null ? void 0 : styles.accessory,
         children: accessory
       })]
     });
     if (!bottomContent) {
-      return /*#__PURE__*/_jsx(HStack, _extends({}, topContentContainerProps, contentContainerProps, {
+      return /*#__PURE__*/_jsx(HStack, _extends({}, topContentProps, contentContainerProps, {
         children: topContent
       }));
     }
@@ -104,14 +118,15 @@ export const Cell = /*#__PURE__*/memo(function Cell(_ref) {
       gap: rowGap,
       width: "100%"
     }, contentContainerProps, {
-      children: [/*#__PURE__*/_jsx(HStack, _extends({}, topContentContainerProps, {
+      children: [/*#__PURE__*/_jsx(HStack, _extends({}, topContentProps, {
         children: topContent
       })), /*#__PURE__*/_jsx(Box, {
+        style: styles == null ? void 0 : styles.bottomContent,
         children: bottomContent
       })]
     }));
-  }, [borderRadius, testID, disabled, selected, onPress, innerSpacingWithoutMarginX, innerSpacing, alignItems, columnGap, gap, media, priority, children, intermediary, detail, detailWidth, accessory, bottomContent, rowGap]);
-  const wrappedContent = useMemo(() => {
+  }, [borderRadius, testID, disabled, selected, onPress, innerSpacingWithoutMarginX, innerSpacing, alignItems, columnGap, gap, media, styles == null ? void 0 : styles.media, priority, children, intermediary, styles == null ? void 0 : styles.intermediary, end, detail, detailWidth, styles == null ? void 0 : styles.end, accessory, styles == null ? void 0 : styles.accessory, bottomContent, styles == null ? void 0 : styles.contentContainer, styles == null ? void 0 : styles.topContent, styles == null ? void 0 : styles.bottomContent, rowGap]);
+  const pressableWrappedContent = useMemo(() => {
     if (onPress) {
       const offsetStyle = {
         marginHorizontal: -theme.space[innerSpacingMarginX * -1]
@@ -130,21 +145,22 @@ export const Cell = /*#__PURE__*/memo(function Cell(_ref) {
         contentStyle: pressStyles,
         disabled: disabled,
         onPress: onPress,
-        style: [offsetStyle, pressStyles],
+        style: [offsetStyle, pressStyles, styles == null ? void 0 : styles.pressable],
         children: content
       });
     }
     return content;
-  }, [accessibilityHint, accessibilityLabel, borderRadius, content, disabled, onPress, innerSpacingMarginX, theme.space]);
+  }, [accessibilityHint, accessibilityLabel, borderRadius, content, disabled, onPress, innerSpacingMarginX, theme.space, styles == null ? void 0 : styles.pressable]);
   return /*#__PURE__*/_jsx(Box, _extends({
     alignItems: "stretch",
     flexDirection: "row",
     maxHeight: maxHeight,
     minHeight: minHeight,
     onLayout: onLayout,
+    style: [styles == null ? void 0 : styles.root, style],
     width: "100%"
   }, outerSpacing, props, {
-    children: wrappedContent
+    children: pressableWrappedContent
   }));
 });
 Cell.displayName = 'Cell';

package/esm/cells/CellDetail.js

@@ -13,7 +13,8 @@ export const CellDetail = /*#__PURE__*/memo(function CellDetail(_ref) {
     adjustsFontSizeToFit,
     detail,
     subdetail,
-    variant = 'foregroundMuted'
+    variant = 'foregroundMuted',
+    subdetailFont = 'label2'
   } = _ref;
   return /*#__PURE__*/_jsxs(VStack, {
     alignContent: "flex-end",
@@ -27,7 +28,7 @@ export const CellDetail = /*#__PURE__*/memo(function CellDetail(_ref) {
     }), !!subdetail && /*#__PURE__*/_jsx(Text, {
       adjustsFontSizeToFit: adjustsFontSizeToFit,
       color: variantColorMap[variant],
-      font: "body",
+      font: subdetailFont,
       numberOfLines: 1,
       children: subdetail
     })]

package/esm/cells/CellMedia.js

@@ -4,6 +4,10 @@ import { Icon } from '../icons/Icon';
 import { Box } from '../layout/Box';
 import { getSource, RemoteImage } from '../media/RemoteImage';
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @deprecated This component will be removed in a future release. Pass media directly via the `media` prop.
+ * For example: `<Avatar src={...} />`, `<Icon name={...} />`, `<RemoteImage source={...} />`, or a Pictogram.
+ */
 export const CellMedia = /*#__PURE__*/memo(function CellMedia(props) {
   let size = mediaSize;
   let content = null;

package/esm/cells/ListCell.js

@@ -1,7 +1,7 @@
-const _excluded = ["accessory", "action", "compact", "title", "disableMultilineTitle", "description", "detail", "detailWidth", "intermediary", "priority", "innerSpacing", "outerSpacing", "disabled", "disableSelectionAccessory", "helperText", "media", "multiline", "selected", "subdetail", "variant", "onPress"];
+const _excluded = ["accessory", "end", "action", "compact", "title", "disableMultilineTitle", "description", "detail", "detailWidth", "intermediary", "priority", "innerSpacing", "outerSpacing", "disabled", "disableSelectionAccessory", "helperText", "media", "multiline", "selected", "subdetail", "variant", "onPress", "layoutSpacing", "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 } from 'react';
+import React, { memo, useMemo } from 'react';
 import { compactListHeight, listHeight } from '@coinbase/cds-common/tokens/cell';
 import { VStack } from '../layout/VStack';
 import { Text } from '../typography/Text';
@@ -9,9 +9,22 @@ import { Cell } from './Cell';
 import { CellAccessory } from './CellAccessory';
 import { CellDetail } from './CellDetail';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const hugInnerSpacing = {
+  paddingX: 2,
+  paddingY: 0.5,
+  marginX: 0
+};
+// no padding outside of the pressable area
+export const hugOuterSpacing = {
+  paddingX: 0,
+  paddingY: 0,
+  marginX: 0
+};
 export const ListCell = /*#__PURE__*/memo(function ListCell(_ref) {
+  var _props$borderRadius;
   let {
       accessory,
+      end: endProp,
       action,
       compact,
       title,
@@ -31,46 +44,71 @@ export const ListCell = /*#__PURE__*/memo(function ListCell(_ref) {
       selected,
       subdetail,
       variant,
-      onPress
+      onPress,
+      layoutSpacing = compact ? 'compact' : 'spacious',
+      style,
+      styles
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const minHeight = compact ? compactListHeight : listHeight;
+  const minHeight = layoutSpacing === 'compact' ? compactListHeight : layoutSpacing === 'spacious' ? listHeight : undefined;
   const accessoryType = selected && !disableSelectionAccessory ? 'selected' : accessory;
   const hasDetails = Boolean(detail || subdetail);
+  const end = useMemo(() => endProp || action || hasDetails && /*#__PURE__*/_jsx(CellDetail, {
+    adjustsFontSizeToFit: !!detailWidth,
+    detail: detail,
+    subdetail: subdetail,
+    subdetailFont: layoutSpacing === 'hug' ? 'label2' : 'body',
+    variant: variant
+  }), [endProp, action, hasDetails, detail, subdetail, detailWidth, layoutSpacing, variant]);
   return /*#__PURE__*/_jsx(Cell, _extends({
     accessory: accessoryType ? /*#__PURE__*/_jsx(CellAccessory, {
       type: accessoryType
     }) : undefined,
+    borderRadius: (_props$borderRadius = props.borderRadius) != null ? _props$borderRadius : layoutSpacing === 'hug' ? 0 : undefined,
     bottomContent: helperText,
-    detail: action || hasDetails && /*#__PURE__*/_jsx(CellDetail, {
-      adjustsFontSizeToFit: !!detailWidth,
-      detail: detail,
-      subdetail: subdetail,
-      variant: variant
-    }),
     detailWidth: detailWidth,
     disabled: disabled,
-    innerSpacing: innerSpacing,
+    end: end,
+    innerSpacing: innerSpacing != null ? innerSpacing : layoutSpacing === 'hug' ? hugInnerSpacing : undefined,
     intermediary: intermediary,
     media: media,
     minHeight: minHeight,
     onPress: onPress,
-    outerSpacing: outerSpacing,
+    outerSpacing: outerSpacing != null ? outerSpacing : layoutSpacing === 'hug' ? hugOuterSpacing : undefined,
     priority: priority,
-    selected: selected
+    selected: selected,
+    style: [style, styles == null ? void 0 : styles.root],
+    styles: {
+      media: styles == null ? void 0 : styles.media,
+      intermediary: styles == null ? void 0 : styles.intermediary,
+      end: styles == null ? void 0 : styles.end,
+      accessory: styles == null ? void 0 : styles.accessory,
+      topContent: styles == null ? void 0 : styles.mainContent,
+      bottomContent: styles == null ? void 0 : styles.helperText,
+      contentContainer: styles == null ? void 0 : styles.contentContainer,
+      pressable: [
+      // for the hug spacing, we need to offset the margin vertical to remove the strange gap between the pressable area
+      layoutSpacing === 'hug' && !!onPress && {
+        marginVertical: -1
+      }, styles == null ? void 0 : styles.pressable]
+    }
   }, props, {
     children: /*#__PURE__*/_jsxs(VStack, {
       justifyContent: "center",
       children: [!!title && /*#__PURE__*/_jsx(Text, {
         ellipsize: "tail",
         font: "headline",
-        numberOfLines: description || disableMultilineTitle ? 1 : 2,
+        numberOfLines: disableMultilineTitle ? 1 :
+        // wrap at 2 lines in hug layoutSpacing regardless of description
+        layoutSpacing === 'hug' ? 2 : description ? 1 : 2,
+        style: styles == null ? void 0 : styles.title,
         children: title
       }), !!description && /*#__PURE__*/_jsx(Text, {
         color: "fgMuted",
         ellipsize: multiline ? undefined : 'tail',
-        font: "body",
+        font: layoutSpacing === 'hug' ? 'label2' : 'body',
         numberOfLines: multiline ? undefined : title ? 1 : 2,
+        style: styles == null ? void 0 : styles.description,
         children: description
       })]
     })

package/esm/cells/ListCellFallback.js

@@ -1,4 +1,4 @@
-const _excluded = ["title", "description", "detail", "subdetail", "media", "disableRandomRectWidth", "rectWidthVariant", "helperText", "styles"];
+const _excluded = ["title", "description", "detail", "subdetail", "media", "disableRandomRectWidth", "rectWidthVariant", "helperText", "styles", "compact", "layoutSpacing", "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,6 +7,7 @@ import { useTheme } from '../hooks/useTheme';
 import { VStack } from '../layout';
 import { Fallback } from '../layout/Fallback';
 import { Cell } from './Cell';
+import { hugInnerSpacing, hugOuterSpacing } 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) {
@@ -19,7 +20,11 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_ref
       disableRandomRectWidth,
       rectWidthVariant,
       helperText,
-      styles
+      styles,
+      compact,
+      layoutSpacing = compact ? 'compact' : 'spacious',
+      innerSpacing,
+      outerSpacing
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
@@ -100,7 +105,9 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_ref
   return /*#__PURE__*/_jsx(Cell, _extends({
     bottomContent: helperTextFallback,
     detail: detailFallback,
-    media: mediaFallback
+    innerSpacing: innerSpacing != null ? innerSpacing : layoutSpacing === 'hug' ? hugInnerSpacing : undefined,
+    media: mediaFallback,
+    outerSpacing: outerSpacing != null ? outerSpacing : layoutSpacing === 'hug' ? hugOuterSpacing : undefined
   }, props, {
     children: /*#__PURE__*/_jsxs(VStack, {
       gap: 0.5,