@coinbase/cds-mobile 8.16.0 → 8.16.2

package/CHANGELOG.md

@@ -8,6 +8,16 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.16.2 (10/10/2025 PST)
+
+#### 🐞 Fixes
+
+- Change layoutSpacing to spacingVariant. [[#95](https://github.com/coinbase/cds/pull/95)]
+
+## 8.16.1 ((10/9/2025, 08:02 AM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.16.0 (10/8/2025 PST)
 
 #### 🚀 Updates

package/dts/cells/ListCell.d.ts

@@ -1,11 +1,18 @@
 import React from 'react';
-import type { StyleProp, TextStyle } from 'react-native';
-import { type CellBaseProps, type CellProps, type CellSpacing } from './Cell';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import { type CellBaseProps, type CellProps } 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 declare const condensedInnerSpacing: {
+  readonly paddingX: 2;
+  readonly paddingY: 0.5;
+  readonly marginX: 0;
+};
+export declare const condensedOuterSpacing: {
+  readonly paddingX: 0;
+  readonly paddingY: 0;
+  readonly marginX: 0;
+};
 export type ListCellBaseProps = CellDetailProps &
   Omit<CellBaseProps, 'accessory' | 'children'> & {
     /** Accessory to display at the end of the cell. */
@@ -21,38 +28,33 @@ export type ListCellBaseProps = CellDetailProps &
      */
     action?: React.ReactNode;
     /**
-     * @deprecated Use `layoutSpacing="compact"`. `compact` will be removed in a release.
+     * @deprecated Use `spacingVariant="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.
+     * Spacing variant configuration.
+     * Deprecated value: 'compact'. Prefer 'condensed'.
      *
-     * 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 `spacingVariant="normal"`:
+     * 1. `min-height` is `80px`
+     * 2. `padding` is `'var(--space-2) var(--space-3)'`
+     * 3. `border-radius` is `'var(--borderRadius-200)'`
+     * 4. when there is a description, title's `numberOfLines={1}` otherwise title's `numberOfLines={2}`
+     * 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 `spacingVariant="compact"`:
+     * 1. same as `spacingVariant="normal"`, except `min-height` is `40px`
      *
-     * 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'
+     * When `spacingVariant="condensed"`:
+     * 1. `min-height` is undefined
+     * 2. `padding` is `'var(--space-1) var(--space-2)'`
+     * 3. `border-radius` is `--borderRadius-0`
+     * 4. title's `numberOfLines={2}`
+     * 5. description and subdetail have font `label2`
      *
-     * @default 'spacious'
+     * @default 'normal'
      */
-    layoutSpacing?: 'spacious' | 'compact' | 'hug';
+    spacingVariant?: 'normal' | 'compact' | 'condensed';
     /** Description of content. Max 1 line (with title) or 2 lines (without), otherwise will truncate. */
     description?: React.ReactNode;
     /**
@@ -77,17 +79,20 @@ export type ListCellBaseProps = CellDetailProps &
     /** 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'];
+    styles?: {
+      root?: StyleProp<ViewStyle>;
+      media?: StyleProp<ViewStyle>;
+      intermediary?: StyleProp<ViewStyle>;
+      end?: StyleProp<ViewStyle>;
+      accessory?: StyleProp<ViewStyle>;
+      contentContainer?: StyleProp<ViewStyle>;
+      pressable?: StyleProp<ViewStyle>;
+      mainContent?: StyleProp<ViewStyle>;
+      helperText?: StyleProp<ViewStyle>;
       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,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"}
+{"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;;;;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,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;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,2CA6HnB,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' | 'layoutSpacing'> & {
+  Pick<ListCellBaseProps, 'compact' | 'innerSpacing' | 'outerSpacing' | 'spacingVariant'> & {
     /** 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":"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"}
+{"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"}

package/esm/cells/ListCell.js

@@ -1,4 +1,4 @@
-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"];
+const _excluded = ["accessory", "end", "action", "compact", "title", "disableMultilineTitle", "description", "detail", "detailWidth", "intermediary", "priority", "innerSpacing", "outerSpacing", "disabled", "disableSelectionAccessory", "helperText", "media", "multiline", "selected", "subdetail", "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';
@@ -9,13 +9,14 @@ 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 = {
+export const condensedInnerSpacing = {
   paddingX: 2,
   paddingY: 0.5,
   marginX: 0
 };
+
 // no padding outside of the pressable area
-export const hugOuterSpacing = {
+export const condensedOuterSpacing = {
   paddingX: 0,
   paddingY: 0,
   marginX: 0
@@ -45,36 +46,36 @@ export const ListCell = /*#__PURE__*/memo(function ListCell(_ref) {
       subdetail,
       variant,
       onPress,
-      layoutSpacing = compact ? 'compact' : 'spacious',
+      spacingVariant = compact ? 'compact' : 'normal',
       style,
       styles
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const minHeight = layoutSpacing === 'compact' ? compactListHeight : layoutSpacing === 'spacious' ? listHeight : undefined;
+  const minHeight = spacingVariant === 'compact' ? compactListHeight : spacingVariant === 'normal' ? 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',
+    subdetailFont: spacingVariant === 'condensed' ? 'label2' : 'body',
     variant: variant
-  }), [endProp, action, hasDetails, detail, subdetail, detailWidth, layoutSpacing, variant]);
+  }), [endProp, action, hasDetails, detail, subdetail, detailWidth, spacingVariant, 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,
+    borderRadius: (_props$borderRadius = props.borderRadius) != null ? _props$borderRadius : spacingVariant === 'condensed' ? 0 : undefined,
     bottomContent: helperText,
     detailWidth: detailWidth,
     disabled: disabled,
     end: end,
-    innerSpacing: innerSpacing != null ? innerSpacing : layoutSpacing === 'hug' ? hugInnerSpacing : undefined,
+    innerSpacing: innerSpacing != null ? innerSpacing : spacingVariant === 'condensed' ? condensedInnerSpacing : undefined,
     intermediary: intermediary,
     media: media,
     minHeight: minHeight,
     onPress: onPress,
-    outerSpacing: outerSpacing != null ? outerSpacing : layoutSpacing === 'hug' ? hugOuterSpacing : undefined,
+    outerSpacing: outerSpacing != null ? outerSpacing : spacingVariant === 'condensed' ? condensedOuterSpacing : undefined,
     priority: priority,
     selected: selected,
     style: [style, styles == null ? void 0 : styles.root],
@@ -87,8 +88,8 @@ export const ListCell = /*#__PURE__*/memo(function ListCell(_ref) {
       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 && {
+      // for the condensed spacing, we need to offset the margin vertical to remove the strange gap between the pressable area
+      spacingVariant === 'condensed' && !!onPress && {
         marginVertical: -1
       }, styles == null ? void 0 : styles.pressable]
     }
@@ -99,14 +100,14 @@ export const ListCell = /*#__PURE__*/memo(function ListCell(_ref) {
         ellipsize: "tail",
         font: "headline",
         numberOfLines: disableMultilineTitle ? 1 :
-        // wrap at 2 lines in hug layoutSpacing regardless of description
-        layoutSpacing === 'hug' ? 2 : description ? 1 : 2,
+        // wrap at 2 lines in condensed spacingVariant regardless of description
+        spacingVariant === 'condensed' ? 2 : description ? 1 : 2,
         style: styles == null ? void 0 : styles.title,
         children: title
       }), !!description && /*#__PURE__*/_jsx(Text, {
         color: "fgMuted",
         ellipsize: multiline ? undefined : 'tail',
-        font: layoutSpacing === 'hug' ? 'label2' : 'body',
+        font: spacingVariant === 'condensed' ? '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", "compact", "layoutSpacing", "innerSpacing", "outerSpacing"];
+const _excluded = ["title", "description", "detail", "subdetail", "media", "disableRandomRectWidth", "rectWidthVariant", "helperText", "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,7 +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 { 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) {
@@ -22,7 +22,7 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_ref
       helperText,
       styles,
       compact,
-      layoutSpacing = compact ? 'compact' : 'spacious',
+      spacingVariant = compact ? 'compact' : 'normal',
       innerSpacing,
       outerSpacing
     } = _ref,
@@ -105,9 +105,9 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_ref
   return /*#__PURE__*/_jsx(Cell, _extends({
     bottomContent: helperTextFallback,
     detail: detailFallback,
-    innerSpacing: innerSpacing != null ? innerSpacing : layoutSpacing === 'hug' ? hugInnerSpacing : undefined,
+    innerSpacing: innerSpacing != null ? innerSpacing : spacingVariant === 'condensed' ? condensedInnerSpacing : undefined,
     media: mediaFallback,
-    outerSpacing: outerSpacing != null ? outerSpacing : layoutSpacing === 'hug' ? hugOuterSpacing : undefined
+    outerSpacing: outerSpacing != null ? outerSpacing : spacingVariant === 'condensed' ? condensedOuterSpacing : undefined
   }, props, {
     children: /*#__PURE__*/_jsxs(VStack, {
       gap: 0.5,