@coinbase/cds-web 8.16.1 → 8.16.3

package/CHANGELOG.md

@@ -8,6 +8,16 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.16.3 ((10/14/2025, 02:02 PM PST))
+
+This is an artificial version bump with no new change.
+
+## 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 PST)
 
 #### 🐞 Fixes

package/dts/cells/ListCell.d.ts

@@ -5,18 +5,16 @@ 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 condensedInnerSpacing: {
+  readonly paddingX: 2;
+  readonly paddingY: 0.5;
+  readonly marginX: 0;
 };
-export declare const hugOuterSpacing: {
-  paddingX: 0;
-  paddingY: 0;
-  marginX: 0;
+export declare const condensedOuterSpacing: {
+  readonly paddingX: 0;
+  readonly paddingY: 0;
+  readonly marginX: 0;
 };
-type CellStyles = NonNullable<CellBaseProps['styles']>;
-type CellClassNames = NonNullable<CellBaseProps['classNames']>;
 export type ListCellBaseProps = Polymorphic.ExtendableProps<
   Omit<CellBaseProps, 'children'>,
   CellDetailProps & {
@@ -37,34 +35,29 @@ export type ListCellBaseProps = Polymorphic.ExtendableProps<
      */
     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;
     /**
@@ -88,22 +81,30 @@ export type ListCellBaseProps = Polymorphic.ExtendableProps<
     /** 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'];
+    classNames?: {
+      root?: string;
+      media?: string;
+      intermediary?: string;
+      end?: string;
+      accessory?: string;
+      contentContainer?: string;
+      pressable?: string;
+      mainContent?: string;
+      helperText?: string;
       title?: string;
       description?: string;
     };
     /** Styles for the components */
-    styles?: Pick<
-      CellStyles,
-      'root' | 'media' | 'intermediary' | 'end' | 'accessory' | 'contentContainer' | 'pressable'
-    > & {
-      mainContent?: CellStyles['topContent'];
-      helperText?: CellStyles['bottomContent'];
+    styles?: {
+      root?: React.CSSProperties;
+      media?: React.CSSProperties;
+      intermediary?: React.CSSProperties;
+      end?: React.CSSProperties;
+      accessory?: React.CSSProperties;
+      contentContainer?: React.CSSProperties;
+      pressable?: React.CSSProperties;
+      mainContent?: React.CSSProperties;
+      helperText?: React.CSSProperties;
       title?: React.CSSProperties;
       description?: React.CSSProperties;
     };

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

@@ -1 +1 @@
-{"version":3,"file":"ListCell.d.ts","sourceRoot":"","sources":["../../src/cells/ListCell.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ListCell.d.ts","sourceRoot":"","sources":["../../src/cells/ListCell.tsx"],"names":[],"mappings":"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"}

package/dts/cells/ListCellFallback.d.ts

@@ -1,10 +1,10 @@
 import { type CSSProperties } from 'react';
 import type { FallbackRectWidthProps, SharedProps } from '@coinbase/cds-common/types';
-import { type CellBaseProps } from './Cell';
 import type { CellMediaType } from './CellMedia';
+import { type ListCellBaseProps } from './ListCell';
 export type ListCellFallbackBaseProps = SharedProps &
   FallbackRectWidthProps &
-  Pick<CellBaseProps, 'innerSpacing' | 'outerSpacing'> & {
+  Pick<ListCellBaseProps, 'innerSpacing' | 'outerSpacing' | 'spacingVariant'> & {
     /** Display description shimmer. */
     description?: boolean;
     /** Display detail shimmer. */
@@ -17,8 +17,6 @@ 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;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"}
+{"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;AAOtF,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,cAAc,GAAG,cAAc,GAAG,gBAAgB,CAAC,GAAG;IAC5E,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,6DAgK3B,CAAC"}

package/esm/cells/ListCell.js

@@ -1,4 +1,4 @@
-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"];
+const _excluded = ["as", "accessory", "end", "action", "compact", "title", "description", "detail", "disabled", "disableMultilineTitle", "disableSelectionAccessory", "helperText", "media", "multiline", "selected", "subdetail", "variant", "intermediary", "priority", "innerSpacing", "outerSpacing", "spacingVariant", "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; }
@@ -18,13 +18,13 @@ 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 = {
+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
@@ -53,7 +53,7 @@ export const ListCell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       priority,
       innerSpacing,
       outerSpacing,
-      layoutSpacing = compact ? 'compact' : 'spacious',
+      spacingVariant = compact ? 'compact' : 'normal',
       className,
       classNames,
       styles,
@@ -61,7 +61,7 @@ export const ListCell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const Component = as !== null && as !== void 0 ? as : listCellDefaultElement;
-  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 end = useMemo(() => {
     if (endProp) {
@@ -80,28 +80,28 @@ export const ListCell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       return /*#__PURE__*/_jsx(CellDetail, {
         detail: detail,
         subdetail: subdetail,
-        subdetailFont: layoutSpacing === 'hug' ? 'label2' : 'body',
+        subdetailFont: spacingVariant === 'condensed' ? 'label2' : 'body',
         variant: variant
       });
     }
     return undefined;
-  }, [endProp, action, detail, subdetail, variant, layoutSpacing]);
+  }, [endProp, action, detail, subdetail, variant, spacingVariant]);
   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,
+    borderRadius: (_props$borderRadius = props.borderRadius) !== null && _props$borderRadius !== void 0 ? _props$borderRadius : spacingVariant === 'condensed' ? 0 : undefined,
     bottomContent: helperText,
     className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
     disabled: disabled,
     end: end,
-    innerSpacing: innerSpacing !== null && innerSpacing !== void 0 ? innerSpacing : layoutSpacing === 'hug' ? hugInnerSpacing : undefined,
+    innerSpacing: innerSpacing !== null && innerSpacing !== void 0 ? innerSpacing : spacingVariant === 'condensed' ? condensedInnerSpacing : undefined,
     intermediary: intermediary,
     media: media,
     minHeight: minHeight,
-    outerSpacing: outerSpacing !== null && outerSpacing !== void 0 ? outerSpacing : layoutSpacing === 'hug' ? hugOuterSpacing : undefined,
+    outerSpacing: outerSpacing !== null && outerSpacing !== void 0 ? outerSpacing : spacingVariant === 'condensed' ? condensedOuterSpacing : undefined,
     priority: priority,
     selected: selected,
     style: _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root),
@@ -122,8 +122,8 @@ export const ListCell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
         display: "block",
         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,
         overflow: "wrap",
         style: styles === null || styles === void 0 ? void 0 : styles.title,
         children: title
@@ -132,7 +132,7 @@ export const ListCell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
         className: cx(multiline ? overflowCss : undefined, classNames === null || classNames === void 0 ? void 0 : classNames.description),
         color: "fgMuted",
         display: "block",
-        font: layoutSpacing === 'hug' ? 'label2' : 'body',
+        font: spacingVariant === 'condensed' ? '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", "layoutSpacing", "innerSpacing", "outerSpacing"];
+const _excluded = ["classNames", "styles", "title", "description", "detail", "subdetail", "media", "disableRandomRectWidth", "rectWidthVariant", "helperText", "spacingVariant", "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,7 +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 { 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) {
@@ -26,7 +26,7 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_ref
       disableRandomRectWidth,
       rectWidthVariant,
       helperText,
-      layoutSpacing,
+      spacingVariant,
       innerSpacing,
       outerSpacing
     } = _ref,
@@ -121,9 +121,9 @@ export const ListCellFallback = /*#__PURE__*/memo(function ListCellFallback(_ref
   return /*#__PURE__*/_jsx(Cell, _objectSpread(_objectSpread({
     bottomContent: bottomContentFallback,
     detail: detailFallback,
-    innerSpacing: innerSpacing !== null && innerSpacing !== void 0 ? innerSpacing : layoutSpacing === 'hug' ? hugInnerSpacing : undefined,
+    innerSpacing: innerSpacing !== null && innerSpacing !== void 0 ? innerSpacing : spacingVariant === 'condensed' ? condensedInnerSpacing : undefined,
     media: mediaFallback,
-    outerSpacing: outerSpacing !== null && outerSpacing !== void 0 ? outerSpacing : layoutSpacing === 'hug' ? hugOuterSpacing : undefined
+    outerSpacing: outerSpacing !== null && outerSpacing !== void 0 ? outerSpacing : spacingVariant === 'condensed' ? condensedOuterSpacing : undefined
   }, props), {}, {
     children: /*#__PURE__*/_jsxs(VStack, {
       gap: 0.5,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "8.16.1",
+  "version": "8.16.3",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -147,9 +147,9 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.16.1",
+    "@coinbase/cds-common": "^8.16.3",
     "@coinbase/cds-icons": "^5.4.2",
-    "@coinbase/cds-illustrations": "^4.23.1",
+    "@coinbase/cds-illustrations": "^4.24.0",
     "@coinbase/cds-lottie-files": "^3.3.2",
     "@coinbase/cds-utils": "^2.3.3",
     "@floating-ui/react-dom": "^2.1.1",