@coinbase/cds-mobile 8.27.4 → 8.28.0

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.28.0 (12/10/2025 PST)
+
+#### 🚀 Updates
+
+- Updated ContentCell to support condensed variant. [[#205](https://github.com/coinbase/cds/pull/205)] [DX-5013]
+
 ## 8.27.4 (12/7/2025 PST)
 
 #### 🐞 Fixes

package/dts/cells/ContentCell.d.ts

@@ -1,20 +1,90 @@
 import React from 'react';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 import { type CellProps } from './Cell';
 import { type CellAccessoryType } from './CellAccessory';
+/**
+ * @deprecated this component will be removed in a future version. Use ListCell instead.
+ */
 export type ContentCellBaseProps = {
   /** Accessory to display at the end of the cell. */
   accessory?: CellAccessoryType;
+  /**
+   * @deprecated Use `spacingVariant="compact"` instead. `compact` will be removed in a future major release.
+   */
+  compact?: boolean;
+  /**
+   * Spacing variant configuration.
+   * Deprecated value: 'compact'. Prefer 'condensed'.
+   *
+   * When `spacingVariant="normal"`:
+   * 1. `min-height` is `80px`
+   * 2. padding is `var(--space-2) var(--space-3)`
+   * 3. `border-radius` is `var(--borderRadius-200)`
+   *
+   * When `spacingVariant="compact"`:
+   * 1. same as `spacingVariant="normal"`, except `min-height` is `40px`
+   *
+   * When `spacingVariant="condensed"`:
+   * 1. `min-height` is undefined
+   * 2. padding is `var(--space-1) var(--space-2)`
+   * 3. `border-radius` is `var(--borderRadius-0)`
+   * 4. subtitle uses `label1`
+   * 5. title wraps to 2 lines regardless of description content
+   *
+   * @default 'normal'
+   */
+  spacingVariant?: 'normal' | 'compact' | 'condensed';
   /** Description of content. Content will wrap accordingly. */
   description?: React.ReactNode;
+  /**
+   * React node to render description. Takes precedence over `description`.
+   * When provided, `styles.description` is not applied.
+   */
+  descriptionNode?: React.ReactNode;
   /** Media (icon, asset, image, etc) to display at the start of the cell. */
   media?: React.ReactElement;
   /** Meta information to display at the end of the title. */
   meta?: React.ReactNode;
+  /**
+   * React node to render meta. Takes precedence over `meta`.
+   * When provided, `styles.meta` and `styles.metaContainer` are not applied.
+   */
+  metaNode?: React.ReactNode;
   /** Subtitle of content. Max 1 line, otherwise will truncate. */
   subtitle?: React.ReactNode;
-  /** Title of content. Max 1 line, otherwise will truncate. */
+  /**
+   * React node to render subtitle. Takes precedence over `subtitle`.
+   * When provided, `styles.subtitle` is not applied.
+   */
+  subtitleNode?: React.ReactNode;
+  /** Title of content. Up to 2 lines depending on spacing variant. */
   title?: React.ReactNode;
+  /**
+   * React node to render title. Takes precedence over `title`.
+   * When provided, `styles.title` is not applied.
+   */
+  titleNode?: React.ReactNode;
+  /**
+   * Styles for the default subcomponents. Ignored when the corresponding `xxNode` prop is used.
+   */
+  styles?: {
+    root?: StyleProp<ViewStyle>;
+    media?: StyleProp<ViewStyle>;
+    accessory?: StyleProp<ViewStyle>;
+    contentContainer?: StyleProp<ViewStyle>;
+    pressable?: StyleProp<ViewStyle>;
+    mainContent?: StyleProp<ViewStyle>;
+    title?: StyleProp<TextStyle>;
+    subtitle?: StyleProp<TextStyle>;
+    metaContainer?: StyleProp<ViewStyle>;
+    meta?: StyleProp<TextStyle>;
+    description?: StyleProp<TextStyle>;
+  };
 };
-export type ContentCellProps = Omit<CellProps, 'children' | 'accessory'> & ContentCellBaseProps;
+export type ContentCellProps = Omit<CellProps, 'children' | 'accessory' | 'styles'> &
+  ContentCellBaseProps;
+/**
+ * @deprecated this component will be removed in a future version. Use ListCell instead.
+ */
 export declare const ContentCell: React.NamedExoticComponent<ContentCellProps>;
 //# sourceMappingURL=ContentCell.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ContentCell.d.ts","sourceRoot":"","sources":["../../src/cells/ContentCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAMpC,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAiB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAExE,MAAM,MAAM,oBAAoB,GAAG;IACjC,mDAAmD;IACnD,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,6DAA6D;IAC7D,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,2EAA2E;IAC3E,KAAK,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC3B,2DAA2D;IAC3D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,6DAA6D;IAC7D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,WAAW,CAAC,GAAG,oBAAoB,CAAC;AAoBhG,eAAO,MAAM,WAAW,8CAsFtB,CAAC"}
+{"version":3,"file":"ContentCell.d.ts","sourceRoot":"","sources":["../../src/cells/ContentCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAOpE,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAiB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGxE;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC,mDAAmD;IACnD,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,cAAc,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,WAAW,CAAC;IACpD,6DAA6D;IAC7D,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;;OAGG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,2EAA2E;IAC3E,KAAK,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC3B,2DAA2D;IAC3D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,gEAAgE;IAChE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,oEAAoE;IACpE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;OAEG;IACH,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7B,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,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAChC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACrC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACpC,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,WAAW,GAAG,QAAQ,CAAC,GACjF,oBAAoB,CAAC;AAoBvB;;GAEG;AACH,eAAO,MAAM,WAAW,8CAsLtB,CAAC"}

package/dts/cells/ContentCellFallback.d.ts

@@ -1,17 +1,30 @@
 import React from 'react';
 import type { FallbackRectWidthProps } from '@coinbase/cds-common/types';
+import type { CellSpacing } from './Cell';
+import type { CellAccessoryType } from './CellAccessory';
 import type { CellMediaType } from './CellMedia';
-export type ContentCellFallbackProps = FallbackRectWidthProps & {
-  /** Display description shimmer. */
-  description?: boolean;
-  /** Display media shimmer with a shape according to type. */
-  media?: CellMediaType;
-  /** Display meta shimmer. */
-  meta?: boolean;
-  /** Display subtitle shimmer. */
-  subtitle?: boolean;
-  /** Display title shimmer. */
-  title?: boolean;
+type ContentCellFallbackSpacingProps = {
+  innerSpacing?: CellSpacing;
+  outerSpacing?: CellSpacing;
+  spacingVariant?: 'normal' | 'compact' | 'condensed';
 };
+export type ContentCellFallbackProps = FallbackRectWidthProps &
+  ContentCellFallbackSpacingProps & {
+    /** 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?: React.ReactNode;
+    /** Display description shimmer. */
+    description?: boolean;
+    /** Display media shimmer with a shape according to type. */
+    media?: CellMediaType;
+    /** Display meta shimmer. */
+    meta?: boolean;
+    /** Display subtitle shimmer. */
+    subtitle?: boolean;
+    /** Display title shimmer. */
+    title?: boolean;
+  };
 export declare const ContentCellFallback: React.NamedExoticComponent<ContentCellFallbackProps>;
+export {};
 //# sourceMappingURL=ContentCellFallback.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ContentCellFallback.d.ts","sourceRoot":"","sources":["../../src/cells/ContentCellFallback.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAMzE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,MAAM,MAAM,wBAAwB,GAAG,sBAAsB,GAAG;IAC9D,mCAAmC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,mBAAmB,sDA+C9B,CAAC"}
+{"version":3,"file":"ContentCellFallback.d.ts","sourceRoot":"","sources":["../../src/cells/ContentCellFallback.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAMzE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAC1C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAKjD,KAAK,+BAA+B,GAAG;IACrC,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,cAAc,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,WAAW,CAAC;CACrD,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,sBAAsB,GAC3D,+BAA+B,GAAG;IAChC,mDAAmD;IACnD,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,2FAA2F;IAC3F,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,mCAAmC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEJ,eAAO,MAAM,mBAAmB,sDAuG9B,CAAC"}

package/dts/cells/ListCell.d.ts

@@ -59,7 +59,10 @@ export type ListCellBaseProps = CellDetailProps &
     spacingVariant?: 'normal' | 'compact' | 'condensed';
     /** Description of content. Max 1 line (with title) or 2 lines (without), otherwise will truncate. 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 `descriptionNode`. */
     description?: React.ReactNode;
-    /** React node to render description. Takes precedence over `description`. */
+    /**
+     * React node to render description. Takes precedence over `description`.
+     * When provided, `styles.description` is not applied.
+     */
     descriptionNode?: React.ReactNode;
     /**
      * Disable the default accessory that is displayed when the cell is selected.
@@ -82,13 +85,21 @@ export type ListCellBaseProps = CellDetailProps &
     multiline?: boolean;
     /** Title of content. Max 1 line (with description) or 2 lines (without), otherwise will truncate. 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 `titleNode`. */
     title?: React.ReactNode;
-    /** React node to render title. Takes precedence over `title`. */
+    /**
+     * React node to render title. Takes precedence over `title`.
+     * When provided, `styles.title` is not applied.
+     */
     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`. */
+    /**
+     * React node to render subtitle. Takes precedence over `subtitle`.
+     * When provided, `styles.subtitle` is not applied.
+     */
     subtitleNode?: React.ReactNode;
-    /** Styles for the components */
+    /**
+     * Styles for default subcomponents. Ignored when the corresponding `xxNode` prop is used.
+     */
     styles?: {
       root?: StyleProp<ViewStyle>;
       media?: StyleProp<ViewStyle>;

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,0QAA0Q;IAC1Q,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,uEAAuE;IACvE,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,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,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAChC,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,2CAoKnB,CAAC"}
+{"version":3,"file":"ListCell.d.ts","sourceRoot":"","sources":["../../src/cells/ListCell.tsx"],"names":[],"mappings":"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"}

package/esm/cells/ContentCell.js

@@ -1,12 +1,18 @@
-const _excluded = ["accessory", "title", "description", "disabled", "media", "meta", "selected", "subtitle", "accessibilityLabel", "accessibilityHint", "detailWidth", "priority", "innerSpacing", "outerSpacing", "alignItems"];
+const _excluded = ["accessory", "accessoryNode", "title", "titleNode", "description", "descriptionNode", "disabled", "media", "meta", "metaNode", "selected", "subtitle", "subtitleNode", "accessibilityLabel", "accessibilityHint", "detailWidth", "priority", "innerSpacing", "outerSpacing", "compact", "spacingVariant", "alignItems", "style", "styles", "onPress"];
 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 { isProduction } from '@coinbase/cds-utils';
 import { Box, HStack, VStack } from '../layout';
 import { Text } from '../typography/Text';
 import { Cell } from './Cell';
 import { CellAccessory } from './CellAccessory';
+import { condensedInnerSpacing, condensedOuterSpacing } from './ListCell';
+
+/**
+ * @deprecated this component will be removed in a future version. Use ListCell instead.
+ */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function generateAccessibilityLabels(userLabel, title, subtitle) {
   let computedLabel = userLabel != null ? userLabel : '';
@@ -20,49 +26,124 @@ function generateAccessibilityLabels(userLabel, title, subtitle) {
   }
   return computedLabel;
 }
+
+/**
+ * @deprecated this component will be removed in a future version. Use ListCell instead.
+ */
 export const ContentCell = /*#__PURE__*/memo(function ContentCell(_ref) {
+  var _props$borderRadius;
   let {
       accessory,
+      accessoryNode,
       title,
+      titleNode,
       description,
+      descriptionNode,
       disabled,
       media,
       meta,
+      metaNode,
       selected,
       subtitle,
+      subtitleNode,
       accessibilityLabel,
       accessibilityHint,
       detailWidth,
       priority,
       innerSpacing,
       outerSpacing,
-      alignItems = 'flex-start'
+      compact: compactProp,
+      spacingVariant = compactProp ? 'compact' : 'normal',
+      alignItems = 'flex-start',
+      style,
+      styles,
+      onPress
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const hasTitleContent = Boolean(titleNode != null ? titleNode : title);
+  const hasSubtitleContent = Boolean(subtitleNode != null ? subtitleNode : subtitle);
+  const hasMetaContent = Boolean(metaNode != null ? metaNode : meta);
+  const hasDescriptionContent = Boolean(descriptionNode != null ? descriptionNode : description);
   if (!isProduction()) {
-    if (meta && !title && !subtitle) {
+    if (hasMetaContent && !hasTitleContent && !hasSubtitleContent) {
       console.error('ContentCell: Cannot use `meta` without a `title` or `subtitle`.');
     }
   }
-  const hasTitles = Boolean(title || subtitle);
+  const hasTitles = hasTitleContent || hasSubtitleContent;
   const accessoryType = selected ? 'selected' : accessory;
   const computedAccessibilityLabel = generateAccessibilityLabels(accessibilityLabel, title, subtitle);
   const computedAccessibilityHint = generateAccessibilityLabels(accessibilityHint, title, subtitle);
+  const minHeight = spacingVariant === 'compact' ? compactListHeight : spacingVariant === 'normal' ? listHeight : undefined;
+  const subtitleFont = spacingVariant === 'condensed' ? 'label1' : 'label2';
+  const titleNumberOfLines = spacingVariant === 'condensed' ? 2 : hasDescriptionContent ? 1 : 2;
+  const metaRender = useMemo(() => {
+    if (metaNode) {
+      return /*#__PURE__*/_jsx(Box, {
+        justifyContent: "flex-end",
+        paddingStart: 1,
+        paddingTop: 0.5,
+        style: styles == null ? void 0 : styles.metaContainer,
+        children: metaNode
+      });
+    }
+    if (meta) {
+      return /*#__PURE__*/_jsx(Box, {
+        justifyContent: "flex-end",
+        paddingStart: 1,
+        paddingTop: 0.5,
+        style: styles == null ? void 0 : styles.metaContainer,
+        children: /*#__PURE__*/_jsx(Text, {
+          color: "fgMuted",
+          font: "label2",
+          style: styles == null ? void 0 : styles.meta,
+          children: meta
+        })
+      });
+    }
+    return null;
+  }, [metaNode, meta, styles == null ? void 0 : styles.metaContainer, styles == null ? void 0 : styles.meta]);
+  const accessoryRender = useMemo(() => {
+    if (spacingVariant !== 'condensed') {
+      return accessoryType ? /*#__PURE__*/_jsx(CellAccessory, {
+        paddingTop: 0.5,
+        type: accessoryType
+      }) : undefined;
+    }
+    if (!accessoryType && !metaRender) {
+      return undefined;
+    }
+    return /*#__PURE__*/_jsxs(HStack, {
+      alignItems: "center",
+      gap: 2,
+      children: [metaRender, accessoryType ? /*#__PURE__*/_jsx(CellAccessory, {
+        paddingTop: 0.5,
+        type: accessoryType
+      }) : null]
+    });
+  }, [spacingVariant, accessoryType, metaRender]);
   return /*#__PURE__*/_jsx(Cell, _extends({
     accessibilityHint: computedAccessibilityHint,
     accessibilityLabel: computedAccessibilityLabel,
-    accessory: accessoryType ? /*#__PURE__*/_jsx(CellAccessory, {
-      paddingTop: 0.5,
-      type: accessoryType
-    }) : undefined,
+    accessory: accessoryRender,
+    accessoryNode: accessoryNode,
     alignItems: alignItems,
+    borderRadius: (_props$borderRadius = props.borderRadius) != null ? _props$borderRadius : spacingVariant === 'condensed' ? 0 : undefined,
     detailWidth: detailWidth,
     disabled: disabled,
-    innerSpacing: innerSpacing,
+    innerSpacing: innerSpacing != null ? innerSpacing : spacingVariant === 'condensed' ? condensedInnerSpacing : undefined,
     media: media,
-    outerSpacing: outerSpacing,
+    minHeight: minHeight,
+    onPress: onPress,
+    outerSpacing: outerSpacing != null ? outerSpacing : spacingVariant === 'condensed' ? condensedOuterSpacing : undefined,
     priority: priority,
-    selected: selected
+    selected: selected,
+    style: [style, styles == null ? void 0 : styles.root],
+    styles: {
+      accessory: styles == null ? void 0 : styles.accessory,
+      contentContainer: styles == null ? void 0 : styles.contentContainer,
+      media: styles == null ? void 0 : styles.media,
+      pressable: styles == null ? void 0 : styles.pressable
+    }
   }, props, {
     children: /*#__PURE__*/_jsxs(VStack, {
       children: [hasTitles && /*#__PURE__*/_jsxs(HStack, {
@@ -70,30 +151,27 @@ export const ContentCell = /*#__PURE__*/memo(function ContentCell(_ref) {
         justifyContent: "space-between",
         children: [/*#__PURE__*/_jsxs(Box, {
           flexShrink: 1,
-          children: [!!title && /*#__PURE__*/_jsx(Text, {
+          style: styles == null ? void 0 : styles.mainContent,
+          children: [titleNode ? titleNode : title ? /*#__PURE__*/_jsx(Text, {
+            ellipsize: "tail",
             font: "headline",
+            numberOfLines: titleNumberOfLines,
+            style: styles == null ? void 0 : styles.title,
             children: title
-          }), !!subtitle && /*#__PURE__*/_jsx(Text, {
-            font: "label2",
-            paddingBottom: description ? 0.5 : 0,
-            paddingTop: title ? 0.5 : 0,
+          }) : null, subtitleNode ? subtitleNode : subtitle ? /*#__PURE__*/_jsx(Text, {
+            font: subtitleFont,
+            paddingBottom: hasDescriptionContent ? 0.5 : 0,
+            paddingTop: hasTitleContent ? 0.5 : 0,
+            style: styles == null ? void 0 : styles.subtitle,
             children: subtitle
-          })]
-        }), !!meta && /*#__PURE__*/_jsx(Box, {
-          justifyContent: "flex-end",
-          paddingStart: 1,
-          paddingTop: 0.5,
-          children: /*#__PURE__*/_jsx(Text, {
-            color: "fgMuted",
-            font: "label2",
-            children: meta
-          })
-        })]
-      }), !!description && /*#__PURE__*/_jsx(Text, {
+          }) : null]
+        }), spacingVariant !== 'condensed' ? metaRender : null]
+      }), descriptionNode ? descriptionNode : description ? /*#__PURE__*/_jsx(Text, {
         color: "fgMuted",
         font: "body",
+        style: styles == null ? void 0 : styles.description,
         children: description
-      })]
+      }) : null]
     })
   }));
 });

package/esm/cells/ContentCellFallback.js

@@ -1,43 +1,89 @@
-import React, { memo } from 'react';
+import React, { memo, useMemo } from 'react';
 import { getRectWidthVariant } from '@coinbase/cds-common/utils/getRectWidthVariant';
 import { useTheme } from '../hooks/useTheme';
 import { Fallback } from '../layout';
 import { ContentCell } from './ContentCell';
+import { condensedInnerSpacing, condensedOuterSpacing } from './ListCell';
 import { MediaFallback } from './MediaFallback';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const ContentCellFallback = /*#__PURE__*/memo(function ContentCellFallback(_ref) {
   let {
+    accessory,
+    accessoryNode,
     title,
     description,
     media,
     meta,
     subtitle,
     disableRandomRectWidth,
-    rectWidthVariant
+    rectWidthVariant,
+    spacingVariant = 'normal',
+    innerSpacing,
+    outerSpacing
   } = _ref;
   const theme = useTheme();
-  return /*#__PURE__*/_jsx(ContentCell, {
-    description: description && /*#__PURE__*/_jsx(Fallback, {
+  const descriptionHeight = spacingVariant === 'condensed' ? theme.lineHeight.label2 : theme.lineHeight.body;
+  const subtitleHeight = spacingVariant === 'condensed' ? theme.lineHeight.label1 : theme.lineHeight.label2;
+  const titleHeight = theme.lineHeight.headline;
+  const metaNode = useMemo(() => {
+    if (!meta) {
+      return undefined;
+    }
+    return /*#__PURE__*/_jsx(Fallback, {
       disableRandomRectWidth: disableRandomRectWidth,
-      height: theme.lineHeight.body,
-      paddingTop: 0.5,
+      height: theme.lineHeight.label2,
       rectWidthVariant: getRectWidthVariant(rectWidthVariant, 0),
-      width: 110
-    }),
-    media: media ? /*#__PURE__*/_jsx(MediaFallback, {
-      type: media
-    }) : undefined,
-    meta: meta && /*#__PURE__*/_jsx(Fallback, {
+      width: 50
+    });
+  }, [meta, disableRandomRectWidth, rectWidthVariant, theme]);
+  const titleNode = useMemo(() => {
+    if (!title) {
+      return undefined;
+    }
+    return /*#__PURE__*/_jsx(Fallback, {
       disableRandomRectWidth: disableRandomRectWidth,
-      height: theme.lineHeight.label2,
+      height: titleHeight,
       rectWidthVariant: getRectWidthVariant(rectWidthVariant, 1),
-      width: 50
-    }),
-    title: (title || subtitle) && /*#__PURE__*/_jsx(Fallback, {
+      width: 90
+    });
+  }, [title, disableRandomRectWidth, rectWidthVariant, titleHeight]);
+  const subtitleNode = useMemo(() => {
+    if (!subtitle) {
+      return undefined;
+    }
+    return /*#__PURE__*/_jsx(Fallback, {
       disableRandomRectWidth: disableRandomRectWidth,
-      height: theme.lineHeight.label2,
+      height: subtitleHeight,
+      paddingBottom: description ? 0.5 : undefined,
+      paddingTop: title ? 0.5 : undefined,
       rectWidthVariant: getRectWidthVariant(rectWidthVariant, 2),
       width: 90
-    })
+    });
+  }, [subtitle, disableRandomRectWidth, rectWidthVariant, subtitleHeight, description, title]);
+  const descriptionNode = useMemo(() => {
+    if (!description) {
+      return undefined;
+    }
+    return /*#__PURE__*/_jsx(Fallback, {
+      disableRandomRectWidth: disableRandomRectWidth,
+      height: descriptionHeight,
+      paddingTop: 0.5,
+      rectWidthVariant: getRectWidthVariant(rectWidthVariant, 3),
+      width: 110
+    });
+  }, [description, disableRandomRectWidth, rectWidthVariant, descriptionHeight]);
+  return /*#__PURE__*/_jsx(ContentCell, {
+    accessory: accessory,
+    accessoryNode: accessoryNode,
+    descriptionNode: descriptionNode,
+    innerSpacing: innerSpacing != null ? innerSpacing : spacingVariant === 'condensed' ? condensedInnerSpacing : undefined,
+    media: media ? /*#__PURE__*/_jsx(MediaFallback, {
+      type: media
+    }) : undefined,
+    metaNode: metaNode,
+    outerSpacing: outerSpacing != null ? outerSpacing : spacingVariant === 'condensed' ? condensedOuterSpacing : undefined,
+    spacingVariant: spacingVariant,
+    subtitleNode: subtitleNode,
+    titleNode: titleNode
   });
 });

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

@@ -1,46 +1,64 @@
 import React from 'react';
 import { assets } from '@coinbase/cds-common/internal/data/assets';
+import { Switch } from '../../controls/Switch';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { useTheme } from '../../hooks/useTheme';
+import { Icon } from '../../icons/Icon';
 import { Pictogram } from '../../illustrations/Pictogram';
 import { Box } from '../../layout/Box';
-import { CellMedia } from '../CellMedia';
+import { HStack } from '../../layout/HStack';
+import { VStack } from '../../layout/VStack';
+import { Avatar } from '../../media/Avatar';
+import { RemoteImage } from '../../media/RemoteImage';
+import { Text } from '../../typography/Text';
 import { ContentCell } from '../ContentCell';
+import { ContentCellFallback } from '../ContentCellFallback';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const innerSpacingConfig = {
-  paddingX: 1
+  paddingX: 1,
+  marginX: 0
 };
 const onPressConsole = () => console.log('pressed');
 const Content = () => /*#__PURE__*/_jsxs(_Fragment, {
   children: [/*#__PURE__*/_jsx(ContentCell, {
     meta: "Meta",
+    spacingVariant: "condensed",
     title: "Title"
   }), /*#__PURE__*/_jsx(ContentCell, {
+    spacingVariant: "condensed",
     subtitle: "Subtitle",
     title: "Title"
   }), /*#__PURE__*/_jsx(ContentCell, {
     description: "Description",
     meta: "Meta",
+    spacingVariant: "condensed",
     title: "Title"
   }), /*#__PURE__*/_jsx(ContentCell, {
     description: "Description",
+    spacingVariant: "condensed",
     subtitle: "Subtitle",
     title: "Title"
   }), /*#__PURE__*/_jsx(ContentCell, {
     meta: "Meta",
+    spacingVariant: "condensed",
     subtitle: "Subtitle"
   }), /*#__PURE__*/_jsx(ContentCell, {
     description: "Description",
+    spacingVariant: "condensed",
     subtitle: "Subtitle"
   }), /*#__PURE__*/_jsx(ContentCell, {
-    description: "Description"
+    description: "Description",
+    spacingVariant: "condensed"
   })]
 });
 const PressableContent = () => /*#__PURE__*/_jsxs(_Fragment, {
   children: [/*#__PURE__*/_jsx(ContentCell, {
     onPress: onPressConsole,
+    spacingVariant: "condensed",
     title: "Title"
   }), /*#__PURE__*/_jsx(ContentCell, {
     onPress: onPressConsole,
+    spacingVariant: "condensed",
     subtitle: "Subtitle",
     title: "Title"
   }), /*#__PURE__*/_jsx(ContentCell, {
@@ -48,11 +66,13 @@ const PressableContent = () => /*#__PURE__*/_jsxs(_Fragment, {
     innerSpacing: innerSpacingConfig,
     meta: "Meta",
     onPress: onPressConsole,
+    spacingVariant: "condensed",
     subtitle: "Subtitle",
     title: "Title"
   }), /*#__PURE__*/_jsx(ContentCell, {
     description: "Description",
     onPress: onPressConsole,
+    spacingVariant: "condensed",
     subtitle: "Subtitle"
   }), /*#__PURE__*/_jsx(ContentCell, {
     selected: true,
@@ -60,17 +80,20 @@ const PressableContent = () => /*#__PURE__*/_jsxs(_Fragment, {
     innerSpacing: innerSpacingConfig,
     meta: "Meta",
     onPress: onPressConsole,
+    spacingVariant: "condensed",
     title: "Title"
   }), /*#__PURE__*/_jsx(ContentCell, {
     disabled: true,
     description: "Description",
     onPress: onPressConsole,
+    spacingVariant: "condensed",
     subtitle: "Subtitle",
     title: "Title"
   }), /*#__PURE__*/_jsx(ContentCell, {
     disabled: true,
     selected: true,
     onPress: onPressConsole,
+    spacingVariant: "condensed",
     subtitle: "Subtitle",
     title: "Title"
   })]
@@ -78,125 +101,329 @@ const PressableContent = () => /*#__PURE__*/_jsxs(_Fragment, {
 const LongContent = () => /*#__PURE__*/_jsxs(_Fragment, {
   children: [/*#__PURE__*/_jsx(ContentCell, {
     description: "Description also has a very long length that will wrap to 2 lines maximum. This is different from subtitle that only supports 1 line.",
-    title: "Title with a very long length that should wrap to 2 lines when there is no subtitle or description"
+    spacingVariant: "condensed",
+    title: "Title with a very long length that wraps to 2 lines in condensed spacing"
   }), /*#__PURE__*/_jsx(ContentCell, {
     accessory: "more",
     description: "Description also has a very long length that will wrap to 2 lines maximum. This is different from subtitle that only supports 1 line.",
-    media: /*#__PURE__*/_jsx(CellMedia, {
-      source: assets.eth.imageUrl,
-      type: "avatar"
+    media: /*#__PURE__*/_jsx(Avatar, {
+      size: "m",
+      src: assets.eth.imageUrl
     }),
+    spacingVariant: "condensed",
     subtitle: "Subtitle is short lol",
-    title: "Title with a very long length that should wrap to 2 lines when there is no subtitle or description"
+    title: "Title with a very long length that wraps to 2 lines in condensed spacing"
   }), /*#__PURE__*/_jsx(ContentCell, {
-    media: /*#__PURE__*/_jsx(CellMedia, {
-      source: assets.eth.imageUrl,
-      type: "avatar"
+    media: /*#__PURE__*/_jsx(Avatar, {
+      size: "m",
+      src: assets.eth.imageUrl
     }),
     meta: "Long meta title",
-    title: "Title with a very long length that should wrap to 2 lines when there is no subtitle or description"
+    spacingVariant: "condensed",
+    title: "Title with a very long length that wraps to 2 lines in condensed spacing"
   })]
 });
 const WithAccessory = () => /*#__PURE__*/_jsxs(_Fragment, {
   children: [/*#__PURE__*/_jsx(ContentCell, {
     accessory: "arrow",
     meta: "Meta",
+    spacingVariant: "condensed",
     title: "Title"
   }), /*#__PURE__*/_jsx(ContentCell, {
     accessory: "more",
+    spacingVariant: "condensed",
     subtitle: "Subtitle",
     title: "Title"
   }), /*#__PURE__*/_jsx(ContentCell, {
     accessory: "selected",
     description: "Description",
+    spacingVariant: "condensed",
     title: "Title"
   }), /*#__PURE__*/_jsx(ContentCell, {
     accessory: "arrow",
     description: "Description",
     meta: "Meta",
+    spacingVariant: "condensed",
     subtitle: "Subtitle",
     title: "Title"
   }), /*#__PURE__*/_jsx(ContentCell, {
     accessory: "more",
     description: "Description",
     meta: "Meta",
+    spacingVariant: "condensed",
     subtitle: "Subtitle"
   }), /*#__PURE__*/_jsx(ContentCell, {
     accessory: "selected",
     description: "Description",
+    spacingVariant: "condensed",
     title: "Title"
   }), /*#__PURE__*/_jsx(ContentCell, {
     accessory: "arrow",
-    description: "Description"
+    description: "Description",
+    spacingVariant: "condensed"
   })]
 });
 const WithMedia = () => /*#__PURE__*/_jsxs(_Fragment, {
   children: [/*#__PURE__*/_jsx(ContentCell, {
-    media: /*#__PURE__*/_jsx(CellMedia, {
+    media: /*#__PURE__*/_jsx(Icon, {
       active: true,
       name: "email",
-      type: "icon"
+      size: "s"
     }),
+    spacingVariant: "condensed",
     title: "Icon"
   }), /*#__PURE__*/_jsx(ContentCell, {
-    media: /*#__PURE__*/_jsx(CellMedia, {
+    media: /*#__PURE__*/_jsx(Icon, {
       active: true,
       name: "email",
-      type: "icon"
+      size: "s"
     }),
     onPress: onPressConsole,
+    spacingVariant: "condensed",
     title: "Icon (pressable)"
   }), /*#__PURE__*/_jsx(ContentCell, {
     description: "Description",
-    media: /*#__PURE__*/_jsx(CellMedia, {
+    media: /*#__PURE__*/_jsx(Icon, {
       name: "phone",
-      type: "icon"
+      size: "s"
     }),
+    spacingVariant: "condensed",
     title: "Icon"
   }), /*#__PURE__*/_jsx(ContentCell, {
     description: "Description",
-    media: /*#__PURE__*/_jsx(CellMedia, {
+    media: /*#__PURE__*/_jsx(Icon, {
       color: "fgPrimary",
       name: "phone",
-      type: "icon"
+      size: "s"
     }),
+    spacingVariant: "condensed",
     title: "Icon (With Primary Color)"
   }), /*#__PURE__*/_jsx(ContentCell, {
     description: "Description",
-    media: /*#__PURE__*/_jsx(CellMedia, {
-      source: assets.eth.imageUrl,
-      type: "avatar"
+    media: /*#__PURE__*/_jsx(Avatar, {
+      size: "m",
+      src: assets.eth.imageUrl
     }),
+    spacingVariant: "condensed",
     subtitle: "Subtitle",
     title: "Avatar"
   }), /*#__PURE__*/_jsx(ContentCell, {
     description: "Description",
-    media: /*#__PURE__*/_jsx(CellMedia, {
-      source: assets.eth.imageUrl,
-      type: "asset"
+    media: /*#__PURE__*/_jsx(RemoteImage, {
+      darkModeEnhancementsApplied: true,
+      accessibilityLabel: "ETH asset",
+      shape: "circle",
+      size: "m",
+      source: assets.eth.imageUrl
     }),
     meta: "Meta",
+    spacingVariant: "condensed",
     subtitle: "Subtitle",
     title: "Asset"
   }), /*#__PURE__*/_jsx(ContentCell, {
-    media: /*#__PURE__*/_jsx(CellMedia, {
-      source: assets.eth.imageUrl,
-      type: "image"
+    media: /*#__PURE__*/_jsx(RemoteImage, {
+      accessibilityLabel: "ETH image",
+      shape: "squircle",
+      size: "m",
+      source: assets.eth.imageUrl
     }),
     meta: "Meta",
+    spacingVariant: "condensed",
     subtitle: "Subtitle",
     title: "Image"
   }), /*#__PURE__*/_jsx(ContentCell, {
     description: "Description",
-    media: /*#__PURE__*/_jsx(CellMedia, {
-      illustration: /*#__PURE__*/_jsx(Pictogram, {
+    media: /*#__PURE__*/_jsx(Box, {
+      alignItems: "center",
+      height: 48,
+      justifyContent: "center",
+      width: 48,
+      children: /*#__PURE__*/_jsx(Pictogram, {
+        dimension: "48x48",
         name: "shield"
-      }),
-      type: "pictogram"
+      })
     }),
+    spacingVariant: "condensed",
     title: "Pictogram"
   })]
 });
+const SpacingVariants = () => /*#__PURE__*/_jsxs(VStack, {
+  gap: 2,
+  children: [/*#__PURE__*/_jsx(ContentCell, {
+    description: "Description",
+    meta: "Meta",
+    onPress: onPressConsole,
+    spacingVariant: "condensed",
+    subtitle: "Subtitle",
+    title: "Condensed spacing"
+  }), /*#__PURE__*/_jsx(ContentCell, {
+    description: "Description",
+    meta: "Meta",
+    onPress: onPressConsole,
+    spacingVariant: "compact",
+    subtitle: "Subtitle",
+    title: "Compact spacing"
+  }), /*#__PURE__*/_jsx(ContentCell, {
+    description: "Description",
+    meta: "Meta",
+    onPress: onPressConsole,
+    spacingVariant: "normal",
+    subtitle: "Subtitle",
+    title: "Normal spacing"
+  })]
+});
+const CondensedContent = () => {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 3,
+    children: [/*#__PURE__*/_jsx(ContentCell, {
+      accessory: "more",
+      description: "Concise summary of an item in condensed spacing.",
+      meta: "Updated 2m ago",
+      onPress: onPressConsole,
+      spacingVariant: "condensed",
+      subtitle: "Subtitle",
+      title: "Default layout"
+    }), /*#__PURE__*/_jsx(ContentCell, {
+      description: "Opens an external experience",
+      meta: "External link",
+      onPress: onPressConsole,
+      spacingVariant: "condensed",
+      subtitle: "Tap to learn more",
+      title: "Pressable condensed"
+    }), /*#__PURE__*/_jsx(ContentCell, {
+      description: "Avatar media paired with condensed spacing.",
+      media: /*#__PURE__*/_jsx(Avatar, {
+        size: "m",
+        src: assets.eth.imageUrl
+      }),
+      meta: "ETH",
+      spacingVariant: "condensed",
+      subtitle: "Asset overview",
+      title: "Condensed with media"
+    }), /*#__PURE__*/_jsx(ContentCell, {
+      descriptionNode: /*#__PURE__*/_jsxs(VStack, {
+        gap: 0.5,
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "label1",
+          children: "Composable description node"
+        }), /*#__PURE__*/_jsx(Text, {
+          color: "fgMuted",
+          font: "label2",
+          children: "Use this slot to render arbitrary React content."
+        })]
+      }),
+      metaNode: /*#__PURE__*/_jsxs(VStack, {
+        alignItems: "flex-end",
+        children: [/*#__PURE__*/_jsx(Text, {
+          color: "fgPositive",
+          font: "label2",
+          children: "+4.25%"
+        }), /*#__PURE__*/_jsx(Text, {
+          color: "fgMuted",
+          font: "label2",
+          children: "Week over week"
+        })]
+      }),
+      spacingVariant: "condensed",
+      subtitleNode: /*#__PURE__*/_jsxs(Text, {
+        font: "label1",
+        children: ["Subtitle with", ' ', /*#__PURE__*/_jsx(Text, {
+          underline: true,
+          font: "label1",
+          children: "inline emphasis"
+        })]
+      }),
+      titleNode: /*#__PURE__*/_jsxs(HStack, {
+        alignItems: "center",
+        gap: 1,
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "headline",
+          children: "Custom nodes"
+        }), /*#__PURE__*/_jsx(Box, {
+          alignItems: "center",
+          background: "bgSecondary",
+          borderRadius: 1000,
+          paddingX: 1,
+          paddingY: 0.5,
+          children: /*#__PURE__*/_jsx(Text, {
+            font: "label2",
+            children: "New"
+          })
+        })]
+      })
+    }), /*#__PURE__*/_jsx(ContentCell, {
+      accessory: "arrow",
+      description: "Applies custom styles to highlight the container.",
+      media: /*#__PURE__*/_jsx(Icon, {
+        name: "chartLine",
+        size: "s"
+      }),
+      spacingVariant: "condensed",
+      styles: {
+        contentContainer: {
+          borderColor: theme.color.bgLineHeavy,
+          borderWidth: 1,
+          paddingVertical: theme.space[2]
+        },
+        media: {
+          alignSelf: 'flex-start'
+        }
+      },
+      subtitle: "Uses styles prop overrides",
+      title: "Styled condensed cell"
+    }), /*#__PURE__*/_jsx(ContentCell, {
+      accessory: "arrow",
+      description: "Shows how to combine meta and accessory in condensed layout.",
+      meta: "Meta",
+      spacingVariant: "condensed",
+      subtitle: "Subtitle",
+      title: "Accessory example"
+    }), /*#__PURE__*/_jsx(ContentCell, {
+      selected: true,
+      description: "Selected state with condensed spacing and avatar media.",
+      media: /*#__PURE__*/_jsx(Avatar, {
+        size: "m",
+        src: assets.eth.imageUrl
+      }),
+      meta: "Selected",
+      spacingVariant: "condensed",
+      subtitle: "Subtitle",
+      title: "Selected condensed"
+    })]
+  });
+};
+const Fallback = () => {
+  const [showFallback, setShowFallback] = React.useState(false);
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(Switch, {
+      checked: showFallback,
+      onChange: (_value, nextChecked) => setShowFallback(Boolean(nextChecked)),
+      children: "Show fallback state"
+    }), showFallback ? /*#__PURE__*/_jsx(ContentCellFallback, {
+      description: true,
+      disableRandomRectWidth: true,
+      meta: true,
+      subtitle: true,
+      title: true,
+      accessory: "more",
+      media: "asset",
+      spacingVariant: "condensed"
+    }) : /*#__PURE__*/_jsx(ContentCell, {
+      accessory: "more",
+      description: "Review portfolio performance",
+      media: /*#__PURE__*/_jsx(Avatar, {
+        size: "m",
+        src: assets.eth.imageUrl
+      }),
+      meta: "Updated just now",
+      spacingVariant: "condensed",
+      subtitle: "ETH",
+      title: "Ethereum"
+    })]
+  });
+};
 const ContentCellScreen = () => {
   return /*#__PURE__*/_jsxs(ExampleScreen, {
     children: [/*#__PURE__*/_jsx(Example, {
@@ -215,12 +442,14 @@ const ContentCellScreen = () => {
       title: "With media",
       children: /*#__PURE__*/_jsx(WithMedia, {})
     }), /*#__PURE__*/_jsx(Example, {
-      paddingX: 3,
-      title: "Example screen",
-      children: /*#__PURE__*/_jsx(Box, {
-        marginX: -3,
-        children: /*#__PURE__*/_jsx(PressableContent, {})
-      })
+      title: "Spacing variants",
+      children: /*#__PURE__*/_jsx(SpacingVariants, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Condensed spacing",
+      children: /*#__PURE__*/_jsx(CondensedContent, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Fallback",
+      children: /*#__PURE__*/_jsx(Fallback, {})
     })]
   });
 };

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

@@ -6,83 +6,95 @@ const Fallbacks = () => {
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(ContentCellFallback, {
       disableRandomRectWidth: true,
-      title: true
+      title: true,
+      spacingVariant: "condensed"
     }), /*#__PURE__*/_jsx(ContentCellFallback, {
       description: true,
       disableRandomRectWidth: true,
-      title: true
+      title: true,
+      spacingVariant: "condensed"
     }), /*#__PURE__*/_jsx(ContentCellFallback, {
       disableRandomRectWidth: true,
       meta: true,
-      title: true
+      title: true,
+      spacingVariant: "condensed"
     }), /*#__PURE__*/_jsx(ContentCellFallback, {
       disableRandomRectWidth: true,
       subtitle: true,
-      title: true
+      title: true,
+      spacingVariant: "condensed"
     }), /*#__PURE__*/_jsx(ContentCellFallback, {
       description: true,
       disableRandomRectWidth: true,
       meta: true,
-      title: true
+      title: true,
+      spacingVariant: "condensed"
     }), /*#__PURE__*/_jsx(ContentCellFallback, {
       description: true,
       disableRandomRectWidth: true,
       meta: true,
       subtitle: true,
-      title: true
+      title: true,
+      spacingVariant: "condensed"
     }), /*#__PURE__*/_jsx(ContentCellFallback, {
       disableRandomRectWidth: true,
       title: true,
-      media: "icon"
+      media: "icon",
+      spacingVariant: "condensed"
     }), /*#__PURE__*/_jsx(ContentCellFallback, {
       description: true,
       disableRandomRectWidth: true,
       title: true,
-      media: "asset"
+      media: "asset",
+      spacingVariant: "condensed"
     }), /*#__PURE__*/_jsx(ContentCellFallback, {
       disableRandomRectWidth: true,
       meta: true,
       title: true,
-      media: "image"
+      media: "image",
+      spacingVariant: "condensed"
     }), /*#__PURE__*/_jsx(ContentCellFallback, {
       disableRandomRectWidth: true,
       subtitle: true,
       title: true,
-      media: "avatar"
+      media: "avatar",
+      spacingVariant: "condensed"
     }), /*#__PURE__*/_jsx(ContentCellFallback, {
       description: true,
       disableRandomRectWidth: true,
       meta: true,
       title: true,
-      media: "icon"
+      media: "icon",
+      spacingVariant: "condensed"
     }), /*#__PURE__*/_jsx(ContentCellFallback, {
       description: true,
       disableRandomRectWidth: true,
       meta: true,
       subtitle: true,
       title: true,
-      media: "asset"
+      media: "asset",
+      spacingVariant: "condensed"
     }), /*#__PURE__*/_jsx(ContentCellFallback, {
       description: true,
-      meta: true,
       subtitle: true,
       title: true,
       media: "asset",
-      rectWidthVariant: 0
+      rectWidthVariant: 0,
+      spacingVariant: "condensed"
     }), /*#__PURE__*/_jsx(ContentCellFallback, {
       description: true,
-      meta: true,
       subtitle: true,
       title: true,
       media: "asset",
-      rectWidthVariant: 1
+      rectWidthVariant: 1,
+      spacingVariant: "condensed"
     }), /*#__PURE__*/_jsx(ContentCellFallback, {
       description: true,
-      meta: true,
       subtitle: true,
       title: true,
       media: "asset",
-      rectWidthVariant: 2
+      rectWidthVariant: 2,
+      spacingVariant: "condensed"
     })]
   });
 };

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

@@ -921,7 +921,11 @@ const CondensedListCell = () => {
       title: "Title"
     }), /*#__PURE__*/_jsx(ListCell, {
       multiline: true,
-      description: "Long description with multiple lines. This section can be arbitrarily long and occupy many many lines.",
+      description: /*#__PURE__*/_jsx(Text, {
+        color: "fgMuted",
+        font: "body",
+        children: "Long description with multiple lines. This section can be arbitrarily long and occupy many many lines."
+      }),
       detail: "Detail",
       end: /*#__PURE__*/_jsxs(HStack, {
         alignItems: "center",

package/package.json

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