@coinbase/cds-web 8.15.0 → 8.16.1

package/CHANGELOG.md

@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.16.1 (10/9/2025 PST)
+
+#### 🐞 Fixes
+
+- Update createThemeCssVars to use String.prototype.replace instead of replaceAll. [[#90](https://github.com/coinbase/cds/pull/90)]
+
+## 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 PST)
 
 ### 🚀 Updates

package/dts/cells/Cell.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import type { CellPriority } from '@coinbase/cds-common/types';
 import type { Polymorphic } from '../core/polymorphism';
 import { type BoxBaseProps } from '../layout/Box';
@@ -27,18 +26,46 @@ export type CellSpacing = Pick<
 export type CellBaseProps = Polymorphic.ExtendableProps<
   BoxBaseProps,
   Pick<PressableProps<'a'>, 'href' | 'target'> & {
+    /**
+     * @deprecated Use `classNames.contentContainer` instead. `contentClassName` will be removed in a future major release.
+     */
     contentClassName?: string;
+    /** Key down handler for keyboard interaction. */
     onKeyDown?: React.KeyboardEventHandler;
+    /** Key up handler for keyboard interaction. */
     onKeyUp?: React.KeyboardEventHandler;
+    /** Click handler. */
     onClick?: React.MouseEventHandler;
+    /** 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 future major 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;
+    /**
+     * @deprecated Use `shouldTruncate` instead. `shouldOverflow` will be removed in a future release.
+     */
     shouldOverflow?: boolean;
-    borderRadius?: ThemeVars.BorderRadius;
-    /** Apply a fixed width to the detail (end). */
+    /**
+     * Controls whether the main content should truncate with an ellipsis.
+     * Defaults to true (truncates) when not provided.
+     * @default true
+     */
+    shouldTruncate?: boolean;
+    /**
+     * @deprecated Use `styles.end` instead. `detailWidth` will be removed in a future major release.
+     */
     detailWidth?: number | string;
     /** Is the cell disabled? Will apply opacity and disable interaction. */
     disabled?: boolean;
@@ -52,6 +79,32 @@ export type CellBaseProps = Polymorphic.ExtendableProps<
     innerSpacing?: CellSpacing;
     /** The content to display below the main cell content */
     bottomContent?: React.ReactNode;
+    /** Styles for the components */
+    styles?: {
+      root?: React.CSSProperties;
+      contentContainer?: React.CSSProperties;
+      topContent?: React.CSSProperties;
+      bottomContent?: React.CSSProperties;
+      pressable?: React.CSSProperties;
+      media?: React.CSSProperties;
+      intermediary?: React.CSSProperties;
+      /** Applied to the container of detail or action */
+      end?: React.CSSProperties;
+      accessory?: React.CSSProperties;
+    };
+    /** Class names for the components */
+    classNames?: {
+      root?: string;
+      contentContainer?: string;
+      topContent?: string;
+      bottomContent?: string;
+      pressable?: string;
+      media?: string;
+      intermediary?: string;
+      /** Applied to the container of detail or action */
+      end?: string;
+      accessory?: string;
+    };
   }
 >;
 export type CellProps<AsComponent extends React.ElementType> = Polymorphic.Props<

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,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAI/D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGxD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAGvD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAsC1D,eAAO,MAAM,kBAAkB,QAAQ,CAAC;AAExC,MAAM,MAAM,kBAAkB,GAAG,OAAO,kBAAkB,CAAC;AAE3D,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,CAAC,eAAe,CACrD,YAAY,EACZ,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC,GAAG;IAC7C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;IACvC,OAAO,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;IACrC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,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,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,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,yDAAyD;IACzD,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC,CACF,CAAC;AAEF,MAAM,MAAM,SAAS,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,IAAI,WAAW,CAAC,KAAK,CAC9E,WAAW,EACX,aAAa,CACd,CAAC;AAEF,KAAK,aAAa,GAAG,CAAC,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,kBAAkB,EAC/E,KAAK,EAAE,SAAS,CAAC,WAAW,CAAC,KAC1B,WAAW,CAAC,WAAW,CAAC,GAC3B,WAAW,CAAC,UAAU,CAAC;AAEzB,eAAO,MAAM,IAAI,EAAE,aAgPlB,CAAC"}
+{"version":3,"file":"Cell.d.ts","sourceRoot":"","sources":["../../src/cells/Cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAI/D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGxD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAGvD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAsC1D,eAAO,MAAM,kBAAkB,QAAQ,CAAC;AAExC,MAAM,MAAM,kBAAkB,GAAG,OAAO,kBAAkB,CAAC;AAE3D,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,CAAC,eAAe,CACrD,YAAY,EACZ,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC,GAAG;IAC7C;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iDAAiD;IACjD,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;IACvC,+CAA+C;IAC/C,OAAO,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;IACrC,qBAAqB;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,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;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;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,yDAAyD;IACzD,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,gCAAgC;IAChC,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,gBAAgB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACvC,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACjC,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACpC,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAChC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC5B,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACnC,mDAAmD;QACnD,GAAG,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KACjC,CAAC;IACF,qCAAqC;IACrC,UAAU,CAAC,EAAE;QACX,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,mDAAmD;QACnD,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;CACH,CACF,CAAC;AAEF,MAAM,MAAM,SAAS,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,IAAI,WAAW,CAAC,KAAK,CAC9E,WAAW,EACX,aAAa,CACd,CAAC;AAEF,KAAK,aAAa,GAAG,CAAC,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,kBAAkB,EAC/E,KAAK,EAAE,SAAS,CAAC,WAAW,CAAC,KAC1B,WAAW,CAAC,WAAW,CAAC,GAC3B,WAAW,CAAC,UAAU,CAAC;AAEzB,eAAO,MAAM,IAAI,EAAE,aAsRlB,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,6 +14,8 @@ export type CellDetailProps = {
   subdetail?: React.ReactNode;
   /** Variant color to apply to the subdetail text. */
   variant?: CellDetailVariant;
+  /** Font to apply to the subdetail text. */
+  subdetailFont?: TextProps<'div'>['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;AAKpC,MAAM,MAAM,iBAAiB,GAAG,iBAAiB,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;AAExF,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;CAC7B,CAAC;AASF,eAAO,MAAM,UAAU,6CA2BrB,CAAC"}
+{"version":3,"file":"CellDetail.d.ts","sourceRoot":"","sources":["../../src/cells/CellDetail.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAGpC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAIpD,MAAM,MAAM,iBAAiB,GAAG,iBAAiB,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;AAExF,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,2CAA2C;IAC3C,aAAa,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;CAC1C,CAAC;AASF,eAAO,MAAM,UAAU,6CA4BrB,CAAC"}

package/dts/cells/CellMedia.d.ts

@@ -29,6 +29,10 @@ export type CellMediaBaseProps = SharedProps &
   CellMediaVariantProps &
   Pick<SharedAccessibilityProps, 'accessibilityLabel'>;
 export type CellMediaProps = CellMediaBaseProps;
+/**
+ * @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<CellMediaBaseProps>;
 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,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,4BAA4B,CAAC;AAIjE,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,kBAAkB,GAAG,WAAW,GAC1C,qBAAqB,GACrB,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,CAAC;AAEvD,MAAM,MAAM,cAAc,GAAG,kBAAkB,CAAC;AAEhD,eAAO,MAAM,SAAS,gDA2DpB,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,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,4BAA4B,CAAC;AAIjE,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,kBAAkB,GAAG,WAAW,GAC1C,qBAAqB,GACrB,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,CAAC;AAEvD,MAAM,MAAM,cAAc,GAAG,kBAAkB,CAAC;AAEhD;;;GAGG;AACH,eAAO,MAAM,SAAS,gDA2DpB,CAAC"}

package/dts/cells/ListCell.d.ts

@@ -5,15 +5,66 @@ import { type CellAccessoryType } from './CellAccessory';
 import { type CellDetailProps } from './CellDetail';
 export declare const listCellDefaultElement = 'div';
 export type ListCellDefaultElement = typeof listCellDefaultElement;
+export declare const hugInnerSpacing: {
+  paddingX: 2;
+  paddingY: 0.5;
+  marginX: 0;
+};
+export declare const hugOuterSpacing: {
+  paddingX: 0;
+  paddingY: 0;
+  marginX: 0;
+};
+type CellStyles = NonNullable<CellBaseProps['styles']>;
+type CellClassNames = NonNullable<CellBaseProps['classNames']>;
 export type ListCellBaseProps = Polymorphic.ExtendableProps<
   Omit<CellBaseProps, 'children'>,
   CellDetailProps & {
     /** 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 an action (like button, link, etc), we recommend avoiding use alongside `onClick`.
+     * 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 future major release.
+     */
     action?: React.ReactNode;
-    /** enables compact spacing */
+    /**
+     * @deprecated Use `layoutDensity="compact"` instead. `compact` will be removed in a future major 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;
     /**
@@ -36,6 +87,26 @@ export type ListCellBaseProps = Polymorphic.ExtendableProps<
     multiline?: boolean;
     /** Title of content. Max 1 line (with description) or 2 lines (without), otherwise will truncate. */
     title?: React.ReactNode;
+    /** Class names for the components */
+    classNames?: Pick<
+      CellClassNames,
+      'root' | 'media' | 'intermediary' | 'end' | 'accessory' | 'contentContainer' | 'pressable'
+    > & {
+      mainContent?: CellClassNames['topContent'];
+      helperText?: CellClassNames['bottomContent'];
+      title?: string;
+      description?: string;
+    };
+    /** Styles for the components */
+    styles?: Pick<
+      CellStyles,
+      'root' | 'media' | 'intermediary' | 'end' | 'accessory' | 'contentContainer' | 'pressable'
+    > & {
+      mainContent?: CellStyles['topContent'];
+      helperText?: CellStyles['bottomContent'];
+      title?: React.CSSProperties;
+      description?: React.CSSProperties;
+    };
   }
 >;
 export type ListCellProps<AsComponent extends React.ElementType> = Polymorphic.Props<

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,KAAoC,MAAM,OAAO,CAAC;AAIzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAKxD,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,EAAiB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAQhE,eAAO,MAAM,sBAAsB,QAAQ,CAAC;AAE5C,MAAM,MAAM,sBAAsB,GAAG,OAAO,sBAAsB,CAAC;AAEnE,MAAM,MAAM,iBAAiB,GAAG,WAAW,CAAC,eAAe,CACzD,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,EAC/B,eAAe,GAAG;IAChB,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;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;OAGG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,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,CACF,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,IAAI,WAAW,CAAC,KAAK,CAClF,WAAW,EACX,iBAAiB,CAClB,CAAC;AAEF,KAAK,iBAAiB,GAAG,CAAC,CAAC,WAAW,SAAS,KAAK,CAAC,WAAW,GAAG,sBAAsB,EACvF,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,KAC9B,WAAW,CAAC,WAAW,CAAC,GAC3B,WAAW,CAAC,UAAU,CAAC;AAEzB,eAAO,MAAM,QAAQ,EAAE,iBA4FtB,CAAC"}
+{"version":3,"file":"ListCell.d.ts","sourceRoot":"","sources":["../../src/cells/ListCell.tsx"],"names":[],"mappings":"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"}

package/dts/cells/ListCellFallback.d.ts

@@ -17,6 +17,8 @@ export type ListCellFallbackBaseProps = SharedProps &
     subdetail?: boolean;
     /** Display title shimmer. */
     title?: boolean;
+    /** Layout spacing configuration. */
+    layoutSpacing?: 'spacious' | 'compact' | 'hug';
   };
 export type ListCellFallbackProps = ListCellFallbackBaseProps & {
   /** Class names to apply to the detail, bottomContent, and title. */

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

@@ -1 +1 @@
-{"version":3,"file":"ListCellFallback.d.ts","sourceRoot":"","sources":["../../src/cells/ListCellFallback.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAiB,MAAM,OAAO,CAAC;AAC1D,OAAO,KAAK,EAAE,sBAAsB,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAMtF,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAGjD,MAAM,MAAM,yBAAyB,GAAG,WAAW,GACjD,sBAAsB,GACtB,IAAI,CAAC,aAAa,EAAE,cAAc,GAAG,cAAc,CAAC,GAAG;IACrD,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,oEAAoE;IACpE,UAAU,CAAC,EAAE;QACX,uDAAuD;QACvD,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,yCAAyC;QACzC,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,4CAA4C;QAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,wCAAwC;QACxC,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,8CAA8C;QAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;IACF,+DAA+D;IAC/D,MAAM,CAAC,EAAE;QACP,kEAAkE;QAClE,UAAU,CAAC,EAAE,aAAa,CAAC;QAC3B,4CAA4C;QAC5C,MAAM,CAAC,EAAE,aAAa,CAAC;QACvB,+CAA+C;QAC/C,SAAS,CAAC,EAAE,aAAa,CAAC;QAC1B,2CAA2C;QAC3C,KAAK,CAAC,EAAE,aAAa,CAAC;QACtB,iDAAiD;QACjD,WAAW,CAAC,EAAE,aAAa,CAAC;KAC7B,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,gBAAgB,6DAuJ3B,CAAC"}
+{"version":3,"file":"ListCellFallback.d.ts","sourceRoot":"","sources":["../../src/cells/ListCellFallback.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAiB,MAAM,OAAO,CAAC;AAC1D,OAAO,KAAK,EAAE,sBAAsB,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAMtF,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,MAAM,MAAM,yBAAyB,GAAG,WAAW,GACjD,sBAAsB,GACtB,IAAI,CAAC,aAAa,EAAE,cAAc,GAAG,cAAc,CAAC,GAAG;IACrD,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;IAChB,oCAAoC;IACpC,aAAa,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,KAAK,CAAC;CAChD,CAAC;AAEJ,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,GAAG;IAC9D,oEAAoE;IACpE,UAAU,CAAC,EAAE;QACX,uDAAuD;QACvD,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,yCAAyC;QACzC,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,4CAA4C;QAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,wCAAwC;QACxC,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,8CAA8C;QAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;IACF,+DAA+D;IAC/D,MAAM,CAAC,EAAE;QACP,kEAAkE;QAClE,UAAU,CAAC,EAAE,aAAa,CAAC;QAC3B,4CAA4C;QAC5C,MAAM,CAAC,EAAE,aAAa,CAAC;QACvB,+CAA+C;QAC/C,SAAS,CAAC,EAAE,aAAa,CAAC;QAC1B,2CAA2C;QAC3C,KAAK,CAAC,EAAE,aAAa,CAAC;QACtB,iDAAiD;QACjD,WAAW,CAAC,EAAE,aAAa,CAAC;KAC7B,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,gBAAgB,6DA4J3B,CAAC"}

package/dts/core/createThemeCssVars.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createThemeCssVars.d.ts","sourceRoot":"","sources":["../../src/core/createThemeCssVars.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,SAAS,CAAC;AAEvD,8FAA8F;AAC9F,eAAO,MAAM,kBAAkB,GAAI,OAAO,OAAO,CAAC,KAAK,CAAC,4BAiCvD,CAAC"}
+{"version":3,"file":"createThemeCssVars.d.ts","sourceRoot":"","sources":["../../src/core/createThemeCssVars.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,SAAS,CAAC;AAIvD,8FAA8F;AAC9F,eAAO,MAAM,kBAAkB,GAAI,OAAO,OAAO,CAAC,KAAK,CAAC,4BAiCvD,CAAC"}

package/esm/cells/Cell.js

@@ -1,4 +1,4 @@
-const _excluded = ["as", "accessory", "alignItems", "borderRadius", "children", "className", "contentClassName", "detail", "detailWidth", "disabled", "gap", "columnGap", "rowGap", "intermediary", "media", "minHeight", "maxHeight", "onClick", "onKeyDown", "onKeyUp", "priority", "selected", "testID", "target", "href", "tabIndex", "shouldOverflow", "accessibilityLabel", "accessibilityLabelledBy", "accessibilityHint", "innerSpacing", "outerSpacing", "bottomContent"],
+const _excluded = ["as", "accessory", "alignItems", "borderRadius", "children", "style", "styles", "classNames", "className", "contentClassName", "end", "detail", "detailWidth", "disabled", "gap", "columnGap", "rowGap", "intermediary", "media", "minHeight", "maxHeight", "onClick", "onKeyDown", "onKeyUp", "priority", "selected", "testID", "target", "href", "tabIndex", "shouldOverflow", "shouldTruncate", "accessibilityLabel", "accessibilityLabelledBy", "accessibilityHint", "innerSpacing", "outerSpacing", "bottomContent"],
   _excluded2 = ["marginX"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -32,8 +32,12 @@ export const Cell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
       alignItems = 'center',
       borderRadius = 200,
       children,
+      style,
+      styles,
+      classNames,
       className,
       contentClassName,
+      end,
       detail,
       detailWidth,
       disabled,
@@ -60,6 +64,7 @@ export const Cell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
        *
        * */
       shouldOverflow,
+      shouldTruncate = !shouldOverflow,
       accessibilityLabel,
       accessibilityLabelledBy,
       accessibilityHint,
@@ -83,31 +88,39 @@ export const Cell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   const isAnchor = Boolean(href);
   const isButton = Boolean((_ref2 = onClick !== null && onClick !== void 0 ? onClick : onKeyDown) !== null && _ref2 !== void 0 ? _ref2 : onKeyUp);
   const linkable = isAnchor || isButton;
-  const contentTruncationStyle = cx(baseCss, !shouldOverflow && truncationCss);
+  const contentTruncationStyle = cx(baseCss, shouldTruncate && truncationCss);
   const content = useMemo(() => {
+    var _styles$end$width, _styles$end;
     // props for the entire inner container that wraps the top content
     // (media, children, intermediary, detail, accessory) and the bottom content
-    const innerContainerProps = _objectSpread(_objectSpread({
+    const contentContainerProps = _objectSpread(_objectSpread(_objectSpread({
       borderRadius,
-      className: contentClassName,
+      className: cx(contentClassName, classNames === null || classNames === void 0 ? void 0 : classNames.contentContainer),
       testID
     }, selected ? {
       background: 'bgAlternate'
-    } : {}), linkable ? innerSpacingWithoutMarginX : innerSpacing);
+    } : {}), linkable ? innerSpacingWithoutMarginX : innerSpacing), {}, {
+      style: styles === null || styles === void 0 ? void 0 : styles.contentContainer
+    });
 
     // props for the container of the top content only(media, children, intermediary, detail, accessory)
-    const topContentContainerProps = {
+    const topContentProps = {
       alignItems: alignItems,
       flexGrow: 1,
       gap: columnGap || gap,
-      width: '100%'
+      width: '100%',
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.topContent,
+      style: styles === null || styles === void 0 ? void 0 : styles.topContent
     };
+    const endWidth = (_styles$end$width = styles === null || styles === void 0 || (_styles$end = styles.end) === null || _styles$end === void 0 ? void 0 : _styles$end.width) !== null && _styles$end$width !== void 0 ? _styles$end$width : detailWidth;
 
     // content that is displayed horizontally above the bottom content
     const topContent = /*#__PURE__*/_jsxs(_Fragment, {
       children: [media && /*#__PURE__*/_jsx(Box, {
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.media,
         flexGrow: 0,
         flexShrink: 0,
+        style: styles === null || styles === void 0 ? void 0 : styles.media,
         children: media
       }), /*#__PURE__*/_jsx(Box, {
         className: contentTruncationStyle,
@@ -116,28 +129,32 @@ export const Cell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
         justifyContent: "flex-start",
         children: children
       }), !!intermediary && /*#__PURE__*/_jsx(Box, {
-        className: contentTruncationStyle,
+        className: cx(contentTruncationStyle, classNames === null || classNames === void 0 ? void 0 : classNames.intermediary),
         flexGrow: 0,
         flexShrink: hasCellPriority('middle', priority) ? 0 : 1,
         justifyContent: "center",
+        style: styles === null || styles === void 0 ? void 0 : styles.intermediary,
         children: intermediary
-      }), !!detail && /*#__PURE__*/_jsx(Box, {
+      }), !!(end !== null && end !== void 0 ? end : detail) && /*#__PURE__*/_jsx(Box, {
         alignItems: "flex-end",
-        className: contentTruncationStyle,
+        className: cx(contentTruncationStyle, classNames === null || classNames === void 0 ? void 0 : classNames.end),
         flexDirection: "column",
-        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 || styles === void 0 ? void 0 : styles.end,
         width: detailWidth,
-        children: detail
+        children: end !== null && end !== void 0 ? end : detail
       }), !!accessory && /*#__PURE__*/_jsx(Box, {
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.accessory,
         flexGrow: 0,
         flexShrink: 0,
+        style: styles === null || styles === void 0 ? void 0 : styles.accessory,
         children: accessory
       })]
     });
     if (!bottom) {
-      return /*#__PURE__*/_jsx(HStack, _objectSpread(_objectSpread(_objectSpread({}, topContentContainerProps), innerContainerProps), {}, {
+      return /*#__PURE__*/_jsx(HStack, _objectSpread(_objectSpread(_objectSpread({}, topContentProps), contentContainerProps), {}, {
         children: topContent
       }));
     }
@@ -146,15 +163,17 @@ export const Cell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
       flexGrow: 1,
       gap: rowGap,
       width: "100%"
-    }, innerContainerProps), {}, {
-      children: [/*#__PURE__*/_jsx(HStack, _objectSpread(_objectSpread({}, topContentContainerProps), {}, {
+    }, contentContainerProps), {}, {
+      children: [/*#__PURE__*/_jsx(HStack, _objectSpread(_objectSpread({}, topContentProps), {}, {
         children: topContent
       })), /*#__PURE__*/_jsx(Box, {
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.bottomContent,
+        style: styles === null || styles === void 0 ? void 0 : styles.bottomContent,
         children: bottom
       })]
     }));
-  }, [borderRadius, contentClassName, testID, selected, linkable, innerSpacingWithoutMarginX, innerSpacing, alignItems, columnGap, gap, media, contentTruncationStyle, priority, children, intermediary, detail, detailWidth, accessory, bottom, rowGap]);
-  const wrappedContent = useMemo(() => {
+  }, [borderRadius, contentClassName, classNames === null || classNames === void 0 ? void 0 : classNames.contentContainer, classNames === null || classNames === void 0 ? void 0 : classNames.topContent, classNames === null || classNames === void 0 ? void 0 : classNames.media, classNames === null || classNames === void 0 ? void 0 : classNames.intermediary, classNames === null || classNames === void 0 ? void 0 : classNames.end, classNames === null || classNames === void 0 ? void 0 : classNames.accessory, classNames === null || classNames === void 0 ? void 0 : classNames.bottomContent, testID, selected, linkable, innerSpacingWithoutMarginX, innerSpacing, styles === null || styles === void 0 ? void 0 : styles.contentContainer, styles === null || styles === void 0 ? void 0 : styles.topContent, styles === null || styles === void 0 ? void 0 : styles.media, styles === null || styles === void 0 ? void 0 : styles.intermediary, styles === null || styles === void 0 ? void 0 : styles.end, styles === null || styles === void 0 ? void 0 : styles.accessory, styles === null || styles === void 0 ? void 0 : styles.bottomContent, alignItems, columnGap, gap, media, contentTruncationStyle, priority, children, intermediary, end, detail, detailWidth, accessory, bottom, rowGap]);
+  const pressableWrappedContent = useMemo(() => {
     const pressableSharedProps = {
       noScaleOnPress: true,
       transparentWhileInactive: true,
@@ -163,14 +182,15 @@ export const Cell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
       accessibilityLabelledBy,
       background: 'bg',
       borderRadius,
-      className: cx(pressCss, insetFocusRingCss),
+      className: cx(pressCss, insetFocusRingCss, classNames === null || classNames === void 0 ? void 0 : classNames.pressable),
       disabled,
       marginX: innerSpacingMarginX,
       onClick,
       onKeyDown,
       onKeyUp,
       tabIndex,
-      testID: testID && "".concat(testID, "-cell-pressable")
+      testID: testID && "".concat(testID, "-cell-pressable"),
+      style: styles === null || styles === void 0 ? void 0 : styles.pressable
     };
     if (isAnchor) return /*#__PURE__*/_jsx(Pressable, _objectSpread(_objectSpread({
       as: "a",
@@ -185,17 +205,18 @@ export const Cell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
       children: content
     }));
     return content;
-  }, [isButton, accessibilityHint, accessibilityLabel, accessibilityLabelledBy, borderRadius, disabled, innerSpacingMarginX, onClick, onKeyDown, onKeyUp, tabIndex, testID, content, isAnchor, href, target]);
+  }, [accessibilityHint, accessibilityLabel, accessibilityLabelledBy, borderRadius, classNames === null || classNames === void 0 ? void 0 : classNames.pressable, disabled, innerSpacingMarginX, onClick, onKeyDown, onKeyUp, tabIndex, testID, styles === null || styles === void 0 ? void 0 : styles.pressable, isAnchor, href, target, content, isButton]);
   return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread(_objectSpread({
     ref: ref,
     alignItems: "stretch",
     as: Component,
-    className: className,
+    className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
     maxHeight: maxHeight,
     minHeight: minHeight,
+    style: _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root),
     width: "100%"
   }, outerSpacing), props), {}, {
-    children: wrappedContent
+    children: pressableWrappedContent
   }));
 }));
 import "./Cell.css";

package/esm/cells/CellDetail.js

@@ -1,5 +1,7 @@
 import React, { memo } from 'react';
 import { Text } from '../typography/Text';
+
+// TODO: update this CellDetailVariant in the next breaking change release.
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const variantColorMap = {
   foregroundMuted: 'fgMuted',
@@ -11,7 +13,8 @@ export const CellDetail = /*#__PURE__*/memo(function CellDetail(_ref) {
   let {
     detail,
     subdetail,
-    variant = 'foregroundMuted'
+    variant = 'foregroundMuted',
+    subdetailFont = 'label2'
   } = _ref;
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [!!detail && /*#__PURE__*/_jsx(Text, {
@@ -25,7 +28,7 @@ export const CellDetail = /*#__PURE__*/memo(function CellDetail(_ref) {
       as: "div",
       color: variantColorMap[variant],
       display: "block",
-      font: "body",
+      font: subdetailFont,
       overflow: "truncate",
       textAlign: "end",
       children: subdetail

package/esm/cells/CellMedia.js

@@ -4,6 +4,10 @@ import { Icon } from '../icons/Icon';
 import { Box } from '../layout/Box';
 import { 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,4 +1,4 @@
-const _excluded = ["as", "accessory", "action", "compact", "title", "description", "detail", "disabled", "disableMultilineTitle", "disableSelectionAccessory", "helperText", "media", "multiline", "selected", "subdetail", "variant", "intermediary", "priority", "innerSpacing", "outerSpacing", "detailWidth"];
+const _excluded = ["as", "accessory", "end", "action", "compact", "title", "description", "detail", "disabled", "disableMultilineTitle", "disableSelectionAccessory", "helperText", "media", "multiline", "selected", "subdetail", "variant", "intermediary", "priority", "innerSpacing", "outerSpacing", "layoutSpacing", "className", "classNames", "styles", "style"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -8,6 +8,7 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { forwardRef, memo, useMemo } from 'react';
 import { compactListHeight, listHeight } from '@coinbase/cds-common/tokens/cell';
+import { cx } from '../cx';
 import { Box } from '../layout/Box';
 import { VStack } from '../layout/VStack';
 import { Text } from '../typography/Text';
@@ -17,10 +18,23 @@ import { CellDetail } from './CellDetail';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const overflowCss = "overflowCss-onthvgs";
 export const listCellDefaultElement = 'div';
+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(/*#__PURE__*/forwardRef((_ref, ref) => {
+  var _props$borderRadius;
   let {
       as,
       accessory,
+      end: endProp,
       action,
       compact,
       title,
@@ -39,13 +53,23 @@ export const ListCell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       priority,
       innerSpacing,
       outerSpacing,
-      detailWidth
+      layoutSpacing = compact ? 'compact' : 'spacious',
+      className,
+      classNames,
+      styles,
+      style
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const Component = as !== null && as !== void 0 ? as : listCellDefaultElement;
-  const minHeight = compact ? compactListHeight : listHeight;
+  const minHeight = layoutSpacing === 'compact' ? compactListHeight : layoutSpacing === 'spacious' ? listHeight : undefined;
   const accessoryType = selected && !disableSelectionAccessory ? 'selected' : accessory;
   const end = useMemo(() => {
+    if (endProp) {
+      return /*#__PURE__*/_jsx(Box, {
+        justifyContent: "flex-end",
+        children: endProp
+      });
+    }
     if (action) {
       return /*#__PURE__*/_jsx(Box, {
         justifyContent: "flex-end",
@@ -56,44 +80,61 @@ export const ListCell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       return /*#__PURE__*/_jsx(CellDetail, {
         detail: detail,
         subdetail: subdetail,
+        subdetailFont: layoutSpacing === 'hug' ? 'label2' : 'body',
         variant: variant
       });
     }
     return undefined;
-  }, [action, detail, subdetail, variant]);
+  }, [endProp, action, detail, subdetail, variant, layoutSpacing]);
   return /*#__PURE__*/_jsx(Cell, _objectSpread(_objectSpread({
     ref: ref,
     accessory: accessoryType && /*#__PURE__*/_jsx(CellAccessory, {
       type: accessoryType
     }),
     as: Component,
+    borderRadius: (_props$borderRadius = props.borderRadius) !== null && _props$borderRadius !== void 0 ? _props$borderRadius : layoutSpacing === 'hug' ? 0 : undefined,
     bottomContent: helperText,
-    detail: end,
-    detailWidth: detailWidth,
+    className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
     disabled: disabled,
-    innerSpacing: innerSpacing,
+    end: end,
+    innerSpacing: innerSpacing !== null && innerSpacing !== void 0 ? innerSpacing : layoutSpacing === 'hug' ? hugInnerSpacing : undefined,
     intermediary: intermediary,
     media: media,
     minHeight: minHeight,
-    outerSpacing: outerSpacing,
+    outerSpacing: outerSpacing !== null && outerSpacing !== void 0 ? outerSpacing : layoutSpacing === 'hug' ? hugOuterSpacing : undefined,
     priority: priority,
-    selected: selected
+    selected: selected,
+    style: _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root),
+    styles: {
+      media: styles === null || styles === void 0 ? void 0 : styles.media,
+      intermediary: styles === null || styles === void 0 ? void 0 : styles.intermediary,
+      end: styles === null || styles === void 0 ? void 0 : styles.end,
+      accessory: styles === null || styles === void 0 ? void 0 : styles.accessory,
+      topContent: styles === null || styles === void 0 ? void 0 : styles.mainContent,
+      bottomContent: styles === null || styles === void 0 ? void 0 : styles.helperText,
+      contentContainer: styles === null || styles === void 0 ? void 0 : styles.contentContainer,
+      pressable: styles === null || styles === void 0 ? void 0 : styles.pressable
+    }
   }, props), {}, {
     children: /*#__PURE__*/_jsxs(VStack, {
       children: [!!title && /*#__PURE__*/_jsx(Text, {
         as: "div",
         display: "block",
         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,
         overflow: "wrap",
+        style: styles === null || styles === void 0 ? void 0 : styles.title,
         children: title
       }), !!description && /*#__PURE__*/_jsx(Text, {
         as: "div",
-        className: multiline ? overflowCss : undefined,
+        className: cx(multiline ? overflowCss : undefined, classNames === null || classNames === void 0 ? void 0 : classNames.description),
         color: "fgMuted",
         display: "block",
-        font: "body",
+        font: layoutSpacing === 'hug' ? 'label2' : 'body',
         overflow: multiline ? undefined : 'truncate',
+        style: styles === null || styles === void 0 ? void 0 : styles.description,
         children: description
       })]
     })

package/esm/cells/ListCellFallback.js

@@ -1,4 +1,4 @@
-const _excluded = ["classNames", "styles", "title", "description", "detail", "subdetail", "media", "disableRandomRectWidth", "rectWidthVariant", "helperText"];
+const _excluded = ["classNames", "styles", "title", "description", "detail", "subdetail", "media", "disableRandomRectWidth", "rectWidthVariant", "helperText", "layoutSpacing", "innerSpacing", "outerSpacing"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -11,6 +11,7 @@ import { getRectWidthVariant } from '@coinbase/cds-common/utils/getRectWidthVari
 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) {
@@ -24,7 +25,10 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_ref
       media,
       disableRandomRectWidth,
       rectWidthVariant,
-      helperText
+      helperText,
+      layoutSpacing,
+      innerSpacing,
+      outerSpacing
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   // We cant use ListCell here as we need to account for percentage based widths.
@@ -117,7 +121,9 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_ref
   return /*#__PURE__*/_jsx(Cell, _objectSpread(_objectSpread({
     bottomContent: bottomContentFallback,
     detail: detailFallback,
-    media: mediaFallback
+    innerSpacing: innerSpacing !== null && innerSpacing !== void 0 ? innerSpacing : layoutSpacing === 'hug' ? hugInnerSpacing : undefined,
+    media: mediaFallback,
+    outerSpacing: outerSpacing !== null && outerSpacing !== void 0 ? outerSpacing : layoutSpacing === 'hug' ? hugOuterSpacing : undefined
   }, props), {}, {
     children: /*#__PURE__*/_jsxs(VStack, {
       gap: 0.5,

package/esm/core/createThemeCssVars.js

@@ -1,4 +1,5 @@
 import { styleVarPrefixes } from './theme';
+const periodsRegex = /\./g;
 
 /** Takes a theme object and formats its keys as CSS variables to be used in inline styles. */
 export const createThemeCssVars = theme => {
@@ -23,7 +24,7 @@ export const createThemeCssVars = theme => {
       if (value === undefined) continue;
 
       // Create CSS variable name, replacing periods with underscores
-      const cssVarName = "".concat(cssVarPrefix).concat(varName).replaceAll('.', '_');
+      const cssVarName = "".concat(cssVarPrefix).concat(varName).replace(periodsRegex, '_');
 
       // Format value (add px to numbers)
       themeCss[cssVarName] = typeof value !== 'number' ? value : value + 'px';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "8.15.0",
+  "version": "8.16.1",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -147,7 +147,7 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.15.0",
+    "@coinbase/cds-common": "^8.16.1",
     "@coinbase/cds-icons": "^5.4.2",
     "@coinbase/cds-illustrations": "^4.23.1",
     "@coinbase/cds-lottie-files": "^3.3.2",