@coinbase/cds-mobile-visualization 3.4.0-beta.22 → 3.4.0-beta.23

package/esm/chart/utils/axis.js

@@ -47,7 +47,7 @@ export const toPointAnchor = placement => {
  */
 
 /**
- * Gets a D3 scale based on the axis configuration.
+ * Gets a D3 scale based on the cartesian axis configuration.
  * Handles both numeric (linear/log) and categorical (band) scales.
  *
  * For numeric scales, the domain limit controls whether bounds are "nice" (human-friendly)
@@ -57,19 +57,27 @@ export const toPointAnchor = placement => {
  * @returns The D3 scale function
  * @throws An Error if bounds are invalid
  */
-export const getAxisScale = _ref => {
+export const getCartesianAxisScale = _ref => {
   var _config$scaleType;
   let {
     config,
     type,
     range,
-    dataDomain
+    dataDomain,
+    layout = 'vertical'
   } = _ref;
   const scaleType = (_config$scaleType = config == null ? void 0 : config.scaleType) != null ? _config$scaleType : 'linear';
   let adjustedRange = range;
 
-  // Invert range for Y axis for SVG coordinate system
-  if (type === 'y') {
+  // Determine if this axis needs range inversion for SVG coordinate system.
+  // SVG Y coordinates increase downward, so we need to invert for value axes
+  // where we want higher values at the top.
+  //
+  // For vertical layout: Y axis is the value axis -> invert (higher values at top)
+  // For horizontal layout: Y axis is the category axis -> don't invert (first category at top is natural)
+  // X axis never needs inversion (left-to-right is natural for both layouts)
+  const shouldInvertRange = type === 'y' && layout !== 'horizontal';
+  if (shouldInvertRange) {
     adjustedRange = {
       min: adjustedRange.max,
       max: adjustedRange.min
@@ -121,6 +129,8 @@ export const getAxisConfig = function (type, axes, defaultId, defaultScaleType)
     defaultScaleType = defaultAxisScaleType;
   }
   const defaultDomainLimit = type === 'x' ? 'strict' : 'nice';
+  const axisName = type === 'x' ? 'x-axis' : 'y-axis';
+  const axisDocUrl = type === 'x' ? 'https://cds.coinbase.com/components/charts/XAxis' : 'https://cds.coinbase.com/components/charts/YAxis';
   if (!axes) {
     return [{
       id: defaultId,
@@ -137,16 +147,27 @@ export const getAxisConfig = function (type, axes, defaultId, defaultScaleType)
       } = _ref2;
       return id === undefined;
     })) {
-      throw new Error('When defining multiple axes, each must have a unique id. See https://cds.coinbase.com/components/charts/YAxis/#multiple-y-axes.');
+      throw new Error("When defining multiple " + axisName + ", each must have a unique id. See " + axisDocUrl + ".");
     }
-    return axes.map(_ref3 => {
+    if (axesLength > 1) {
+      const ids = axes.map(_ref3 => {
+        let {
+          id
+        } = _ref3;
+        return id;
+      }).filter(id => id !== undefined);
+      if (new Set(ids).size !== ids.length) {
+        throw new Error("When defining multiple " + axisName + ", each must have a unique id. See " + axisDocUrl + ".");
+      }
+    }
+    return axes.map(_ref4 => {
       let {
           id
-        } = _ref3,
-        axis = _objectWithoutPropertiesLoose(_ref3, _excluded);
+        } = _ref4,
+        axis = _objectWithoutPropertiesLoose(_ref4, _excluded);
       return _extends({
         // defaults the axis id if only a single axis is provided
-        id: axesLength > 1 ? id != null ? id : defaultAxisId : id,
+        id: axesLength > 1 ? id != null ? id : defaultAxisId : id != null ? id : defaultId,
         scaleType: defaultScaleType,
         domainLimit: defaultDomainLimit
       }, axis);
@@ -168,10 +189,14 @@ export const getAxisConfig = function (type, axes, defaultId, defaultScaleType)
  * @param axisParam - The axis configuration
  * @param series - Array of series objects (for stacking support)
  * @param axisType - Whether this is an 'x' or 'y' axis
+ * @param layout - The chart layout orientation
  * @returns The calculated axis bounds
  */
-export const getAxisDomain = (axisParam, series, axisType) => {
+export const getCartesianAxisDomain = function (axisParam, series, axisType, layout) {
   var _finalDomain$min, _finalDomain$max;
+  if (layout === void 0) {
+    layout = 'vertical';
+  }
   let dataDomain = null;
   if (axisParam.data && Array.isArray(axisParam.data) && axisParam.data.length > 0) {
     const firstItem = axisParam.data[0];
@@ -193,7 +218,10 @@ export const getAxisDomain = (axisParam, series, axisType) => {
   }
 
   // Calculate domain from series data
-  const seriesDomain = axisType === 'x' ? getChartDomain(series) : getChartRange(series);
+  // In vertical layout: X is category (index), Y is value (value)
+  // In horizontal layout: Y is category (index), X is value (value)
+  const isCategoryAxis = layout !== 'horizontal' && axisType === 'x' || layout === 'horizontal' && axisType === 'y';
+  const seriesDomain = isCategoryAxis ? getChartDomain(series) : getChartRange(series);
 
   // If data sets the domain, use that instead of the series domain
   const preferredDataDomain = dataDomain != null ? dataDomain : seriesDomain;
@@ -487,7 +515,7 @@ const generateEvenlyDistributedTicks = (scale, tickInterval, possibleTickValues,
  * });
  * // Returns tick positions centered in each selected band
  */
-export const getAxisTicksData = _ref4 => {
+export const getAxisTicksData = _ref5 => {
   var _options$anchor;
   let {
     ticks,
@@ -497,7 +525,7 @@ export const getAxisTicksData = _ref4 => {
     possibleTickValues,
     tickInterval,
     options
-  } = _ref4;
+  } = _ref5;
   const anchor = (_options$anchor = options == null ? void 0 : options.anchor) != null ? _options$anchor : 'middle';
 
   // Handle band scales

package/esm/chart/utils/bar.js

@@ -6,7 +6,8 @@ import { defaultTransition } from './transition';
 /**
  * A bar-specific transition that extends Transition with stagger support.
  * When `staggerDelay` is provided, bars will animate with increasing delays
- * based on their horizontal position (leftmost starts first, rightmost last).
+ * based on their position along the category axis (vertical: left-to-right,
+ * horizontal: top-to-bottom).
  *
  * @example
  * // Bars stagger in from left to right over 250ms, each animating for 750ms
@@ -17,10 +18,10 @@ import { defaultTransition } from './transition';
  * Strips `staggerDelay` from a transition and computes a positional delay.
  *
  * @param transition - The transition config (may include staggerDelay)
- * @param normalizedX - The bar's normalized x position (0 = left edge, 1 = right edge)
+ * @param normalizedPosition - The bar's normalized position along the category axis (0–1)
  * @returns A standard Transition with computed delay
  */
-export const withStaggerDelayTransition = (transition, normalizedX) => {
+export const withStaggerDelayTransition = (transition, normalizedPosition) => {
   var _baseTransition$delay;
   if (!transition) return null;
   const {
@@ -29,7 +30,7 @@ export const withStaggerDelayTransition = (transition, normalizedX) => {
     baseTransition = _objectWithoutPropertiesLoose(transition, _excluded);
   if (!staggerDelay) return transition;
   return _extends({}, baseTransition, {
-    delay: ((_baseTransition$delay = baseTransition == null ? void 0 : baseTransition.delay) != null ? _baseTransition$delay : 0) + normalizedX * staggerDelay
+    delay: ((_baseTransition$delay = baseTransition == null ? void 0 : baseTransition.delay) != null ? _baseTransition$delay : 0) + normalizedPosition * staggerDelay
   });
 };
 

package/esm/chart/utils/chart.js

@@ -46,15 +46,16 @@ export const getChartDomain = (series, min, max) => {
 };
 
 /**
- * Creates a composite stack key that includes both stack ID and y-axis ID.
- * This ensures series with different y-scales don't get stacked together.
+ * Creates a composite stack key that includes stack ID and axis IDs.
+ * This ensures series with different scales don't get stacked together.
  */
 const createStackKey = series => {
   if (series.stackId === undefined) return undefined;
 
-  // Include y-axis ID to prevent cross-scale stacking
+  // Include axis IDs to prevent cross-scale stacking
+  const xAxisId = series.xAxisId || 'default';
   const yAxisId = series.yAxisId || 'default';
-  return series.stackId + ":" + yAxisId;
+  return series.stackId + ":" + xAxisId + ":" + yAxisId;
 };
 
 /**
@@ -225,12 +226,24 @@ export const getChartRange = (series, min, max) => {
   }
   return range;
 };
-export const defaultChartInset = {
+export const defaultVerticalLayoutChartInset = {
   top: 32,
   left: 16,
   bottom: 16,
   right: 16
 };
+export const defaultHorizontalLayoutChartInset = {
+  top: 16,
+  left: 16,
+  bottom: 16,
+  right: 48
+};
+
+/**
+ * @deprecated Use `defaultVerticalLayoutChartInset` for vertical layout charts or
+ * `defaultHorizontalLayoutChartInset` for horizontal layout charts.
+ */
+export const defaultChartInset = defaultVerticalLayoutChartInset;
 
 /**
  * Normalize padding to include all sides with a value.

package/esm/chart/utils/context.js

@@ -1,5 +1,12 @@
 import { createContext, useContext } from 'react';
 
+/**
+ * Chart layout for Cartesian charts.
+ * Describes the direction bars/areas grow.
+ * - 'vertical': Bars grow vertically (up/down). X is category axis, Y is value axis.
+ * - 'horizontal': Bars grow horizontally (left/right). Y is category axis, X is value axis.
+ */
+
 /**
  * Context value for Cartesian (X/Y) coordinate charts.
  * Contains axis-specific methods and properties for rectangular coordinate systems.

package/esm/chart/utils/gradient.js

@@ -262,9 +262,13 @@ export const getBaseline = function (axisBounds, baseline) {
  * @param fill - The color to use for the gradient
  * @param peakOpacity - Opacity at the peak of the gradient
  * @param baselineOpacity - Opacity at the baseline
- * @returns A gradient definition with y-axis stops in ascending order
+ * @param axis - The axis the gradient maps to ('y' for vertical, 'x' for horizontal layout)
+ * @returns A gradient definition with stops in ascending order
  */
-export const createGradient = (axisBounds, baselineValue, fill, peakOpacity, baselineOpacity) => {
+export const createGradient = function (axisBounds, baselineValue, fill, peakOpacity, baselineOpacity, axis) {
+  if (axis === void 0) {
+    axis = 'y';
+  }
   const {
     min,
     max
@@ -273,7 +277,7 @@ export const createGradient = (axisBounds, baselineValue, fill, peakOpacity, bas
   const upperBound = Math.max(min, max);
   if (lowerBound < baselineValue && baselineValue < upperBound) {
     return {
-      axis: 'y',
+      axis,
       stops: [{
         offset: lowerBound,
         color: fill,
@@ -291,7 +295,7 @@ export const createGradient = (axisBounds, baselineValue, fill, peakOpacity, bas
   }
   const peakValue = Math.abs(min - baselineValue) > Math.abs(max - baselineValue) ? min : max;
   return {
-    axis: 'y',
+    axis,
     stops: [{
       offset: peakValue,
       color: fill,

package/esm/chart/utils/path.js

@@ -1,5 +1,5 @@
-import { area as d3Area, curveBumpX, curveCatmullRom, curveLinear, curveLinearClosed, curveMonotoneX, curveNatural, curveStep, curveStepAfter, curveStepBefore, line as d3Line } from 'd3-shape';
-import { projectPoint, projectPoints } from './point';
+import { area as d3Area, curveBumpX, curveBumpY, curveCatmullRom, curveLinear, curveLinearClosed, curveMonotoneX, curveMonotoneY, curveNatural, curveStep, curveStepAfter, curveStepBefore, line as d3Line } from 'd3-shape';
+import { getPointOnScale, projectPoints } from './point';
 import { isCategoricalScale } from './scale';
 /**
  * Default enter transition for path-based components (Line, Area).
@@ -13,18 +13,23 @@ export const defaultPathEnterTransition = {
  * Get the d3 curve function for a path.
  * See https://d3js.org/d3-shape/curve
  * @param curve - The curve type. Defaults to 'linear'.
+ * @param layout - The chart layout. Defaults to 'vertical'.
  * @returns The d3 curve function.
  */
-export const getPathCurveFunction = function (curve) {
+export const getPathCurveFunction = function (curve, layout) {
   if (curve === void 0) {
     curve = 'linear';
   }
+  if (layout === void 0) {
+    layout = 'vertical';
+  }
   switch (curve) {
     case 'catmullRom':
       return curveCatmullRom;
     case 'monotone':
-      // When we support layout="vertical" this should dynamically switch to curveMonotoneY
-      return curveMonotoneX;
+      // For vertical layout, X is the independent axis (category/index), so use MonotoneX.
+      // For horizontal layout, Y is the independent axis (category/index), so use MonotoneY.
+      return layout !== 'horizontal' ? curveMonotoneX : curveMonotoneY;
     case 'natural':
       return curveNatural;
     case 'step':
@@ -34,8 +39,9 @@ export const getPathCurveFunction = function (curve) {
     case 'stepAfter':
       return curveStepAfter;
     case 'bump':
-      // When we support layout="vertical" this should dynamically switch to curveBumpY
-      return curveBumpX;
+      // For vertical layout, X is the independent axis (category/index), so use BumpX.
+      // For horizontal layout, Y is the independent axis (category/index), so use BumpY.
+      return layout !== 'horizontal' ? curveBumpX : curveBumpY;
     case 'linearClosed':
       return curveLinearClosed;
     case 'linear':
@@ -61,17 +67,21 @@ export const getLinePath = _ref => {
     xScale,
     yScale,
     xData,
-    connectNulls = false
+    yData,
+    connectNulls = false,
+    layout = 'vertical'
   } = _ref;
   if (data.length === 0) {
     return '';
   }
-  const curveFunction = getPathCurveFunction(curve);
+  const curveFunction = getPathCurveFunction(curve, layout);
   const dataPoints = projectPoints({
     data,
     xScale,
     yScale,
-    xData
+    xData,
+    yData,
+    layout
   });
 
   // When connectNulls is true, filter out null values before rendering
@@ -110,14 +120,20 @@ export const getAreaPath = _ref2 => {
     xScale,
     yScale,
     xData,
-    connectNulls = false
+    yData,
+    connectNulls = false,
+    layout = 'vertical'
   } = _ref2;
   if (data.length === 0) {
     return '';
   }
-  const curveFunction = getPathCurveFunction(curve);
-  const yDomain = yScale.domain();
-  const yMin = Math.min(...yDomain);
+  const curveFunction = getPathCurveFunction(curve, layout);
+  const categoryAxisIsX = layout !== 'horizontal';
+
+  // Determine baseline from the value scale.
+  const valueScale = categoryAxisIsX ? yScale : xScale;
+  const domain = valueScale.domain();
+  const min = Math.min(...domain);
   const normalizedData = data.map((item, index) => {
     if (item === null) {
       return null;
@@ -129,7 +145,7 @@ export const getAreaPath = _ref2 => {
       return null;
     }
     if (typeof item === 'number') {
-      return [yMin, item];
+      return [min, item];
     }
     return null;
   });
@@ -137,37 +153,28 @@ export const getAreaPath = _ref2 => {
     if (range === null) {
       return {
         x: 0,
+        y: 0,
         low: null,
         high: null,
         isValid: false
       };
     }
-    let xValue = index;
-    if (!isCategoricalScale(xScale) && xData && xData[index] !== undefined) {
-      xValue = xData[index];
+
+    // Determine the position along the independent (index/category) axis.
+    let indexValue = index;
+    const indexScale = categoryAxisIsX ? xScale : yScale;
+    const indexData = categoryAxisIsX ? xData : yData;
+    if (!isCategoricalScale(indexScale) && indexData && indexData[index] !== undefined) {
+      indexValue = indexData[index];
     }
-    const xPoint = projectPoint({
-      x: xValue,
-      y: 0,
-      xScale,
-      yScale
-    });
-    const lowPoint = projectPoint({
-      x: xValue,
-      y: range[0],
-      xScale,
-      yScale
-    });
-    const highPoint = projectPoint({
-      x: xValue,
-      y: range[1],
-      xScale,
-      yScale
-    });
+    const position = getPointOnScale(indexValue, indexScale);
+    const low = getPointOnScale(range[0], valueScale);
+    const high = getPointOnScale(range[1], valueScale);
     return {
-      x: xPoint.x,
-      low: lowPoint.y,
-      high: highPoint.y,
+      x: categoryAxisIsX ? position : 0,
+      y: !categoryAxisIsX ? position : 0,
+      low,
+      high,
       isValid: true
     };
   });
@@ -175,16 +182,25 @@ export const getAreaPath = _ref2 => {
   // When connectNulls is true, filter out invalid points before rendering
   // When false, use defined() to create gaps in the area
   const filteredPoints = connectNulls ? dataPoints.filter(d => d.isValid) : dataPoints;
-  const areaGenerator = d3Area().x(d => d.x).y0(d => {
-    var _d$low;
-    return (_d$low = d.low) != null ? _d$low : 0;
-  }) // Bottom boundary (low values), fallback to 0
-  .y1(d => {
-    var _d$high;
-    return (_d$high = d.high) != null ? _d$high : 0;
-  }) // Top boundary (high values), fallback to 0
-  .curve(curveFunction).defined(d => connectNulls || d.isValid && d.low != null && d.high != null); // Only draw where both values exist
-
+  const areaGenerator = d3Area();
+  if (categoryAxisIsX) {
+    areaGenerator.x(d => d.x).y0(d => {
+      var _d$low;
+      return (_d$low = d.low) != null ? _d$low : 0;
+    }).y1(d => {
+      var _d$high;
+      return (_d$high = d.high) != null ? _d$high : 0;
+    });
+  } else {
+    areaGenerator.y(d => d.y).x0(d => {
+      var _d$low2;
+      return (_d$low2 = d.low) != null ? _d$low2 : 0;
+    }).x1(d => {
+      var _d$high2;
+      return (_d$high2 = d.high) != null ? _d$high2 : 0;
+    });
+  }
+  areaGenerator.curve(curveFunction).defined(d => connectNulls || d.isValid && d.low != null && d.high != null);
   const result = areaGenerator(filteredPoints);
   return result != null ? result : '';
 };
@@ -216,22 +232,35 @@ export const lineToPath = (x1, y1, x2, y2) => {
  * const roundedPath = getBarPath(10, 20, 50, 100, 8, true, false);
  * ```
  */
-export const getBarPath = (x, y, width, height, radius, roundTop, roundBottom) => {
+export const getBarPath = function (x, y, width, height, radius, roundTop, roundBottom, layout) {
+  if (layout === void 0) {
+    layout = 'vertical';
+  }
+  const barsGrowVertically = layout !== 'horizontal';
   const roundBothSides = roundTop && roundBottom;
   const r = Math.min(radius, width / 2, roundBothSides ? height / 2 : height);
-  const topR = roundTop ? r : 0;
-  const bottomR = roundBottom ? r : 0;
+
+  // In vertical layout (bars grow up/down):
+  // - roundTop rounds the top face (min Y)
+  // - roundBottom rounds the bottom face (max Y)
+  // In horizontal layout (bars grow left/right):
+  // - roundTop rounds the right face (max X)
+  // - roundBottom rounds the left face (min X)
+  const rTL = barsGrowVertically ? roundTop ? r : 0 : roundBottom ? r : 0;
+  const rTR = barsGrowVertically ? roundTop ? r : 0 : roundTop ? r : 0;
+  const rBR = barsGrowVertically ? roundBottom ? r : 0 : roundTop ? r : 0;
+  const rBL = barsGrowVertically ? roundBottom ? r : 0 : roundBottom ? r : 0;
 
   // Build path with selective rounding
-  let path = "M " + (x + (roundTop ? r : 0)) + " " + y;
-  path += " L " + (x + width - topR) + " " + y;
-  path += " A " + topR + " " + topR + " 0 0 1 " + (x + width) + " " + (y + topR);
-  path += " L " + (x + width) + " " + (y + height - bottomR);
-  path += " A " + bottomR + " " + bottomR + " 0 0 1 " + (x + width - bottomR) + " " + (y + height);
-  path += " L " + (x + bottomR) + " " + (y + height);
-  path += " A " + bottomR + " " + bottomR + " 0 0 1 " + x + " " + (y + height - bottomR);
-  path += " L " + x + " " + (y + topR);
-  path += " A " + topR + " " + topR + " 0 0 1 " + (x + topR) + " " + y;
+  let path = "M " + (x + rTL) + " " + y;
+  path += " L " + (x + width - rTR) + " " + y;
+  path += " A " + rTR + " " + rTR + " 0 0 1 " + (x + width) + " " + (y + rTR);
+  path += " L " + (x + width) + " " + (y + height - rBR);
+  path += " A " + rBR + " " + rBR + " 0 0 1 " + (x + width - rBR) + " " + (y + height);
+  path += " L " + (x + rBL) + " " + (y + height);
+  path += " A " + rBL + " " + rBL + " 0 0 1 " + x + " " + (y + height - rBL);
+  path += " L " + x + " " + (y + rTL);
+  path += " A " + rTL + " " + rTL + " 0 0 1 " + (x + rTL) + " " + y;
   path += ' Z';
   return path;
 };

package/esm/chart/utils/point.js

@@ -1,4 +1,4 @@
-import { applyBandScale, applySerializableScale, isCategoricalScale, isLogScale, isNumericScale } from './scale';
+import { applyBandScale, applySerializableScale, isCategoricalScale, isLogScale } from './scale';
 
 /**
  * Position a label should be placed relative to the point
@@ -164,7 +164,8 @@ export const projectPoints = _ref3 => {
     xScale,
     yScale,
     xData,
-    yData
+    yData,
+    layout = 'vertical'
   } = _ref3;
   if (data.length === 0) {
     return [];
@@ -182,28 +183,37 @@ export const projectPoints = _ref3 => {
       });
     }
 
-    // For scales with axis data, determine the correct x value
-    let xValue = index;
+    // Determine values/scales based on role (index vs value) and layout.
+    const categoryAxisIsX = layout !== 'horizontal';
+    const indexScale = categoryAxisIsX ? xScale : yScale;
+    const indexData = categoryAxisIsX ? xData : yData;
 
-    // For band scales, always use the index
-    if (!isCategoricalScale(xScale)) {
-      // For numeric scales with axis data, use the axis data values instead of indices
-      if (xData && Array.isArray(xData) && xData.length > 0) {
-        // Check if it's numeric data
-        if (typeof xData[0] === 'number') {
-          var _numericXData$index;
-          const numericXData = xData;
-          xValue = (_numericXData$index = numericXData[index]) != null ? _numericXData$index : index;
+    // 1. Calculate position along the index axis (categorical or numeric domain).
+    let indexValue = index;
+    if (!isCategoricalScale(indexScale)) {
+      if (indexData && Array.isArray(indexData) && indexData.length > 0) {
+        if (typeof indexData[0] === 'number') {
+          var _indexData$index;
+          indexValue = (_indexData$index = indexData[index]) != null ? _indexData$index : index;
         }
       }
     }
-    let yValue = value;
-    if (isNumericScale(yScale) && yData && Array.isArray(yData) && yData.length > 0 && typeof yData[0] === 'number' && typeof value === 'number') {
-      yValue = value;
+
+    // 2. Calculate position along the value axis (measured magnitude).
+    const valueAsNumber = value;
+
+    // 3. Project final coordinates based on layout.
+    if (categoryAxisIsX) {
+      return projectPoint({
+        x: indexValue,
+        y: valueAsNumber,
+        xScale,
+        yScale
+      });
     }
     return projectPoint({
-      x: xValue,
-      y: yValue,
+      x: valueAsNumber,
+      y: indexValue,
       xScale,
       yScale
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile-visualization",
-  "version": "3.4.0-beta.22",
+  "version": "3.4.0-beta.23",
   "description": "Coinbase Design System - Mobile Visualization Native",
   "repository": {
     "type": "git",
@@ -36,9 +36,9 @@
     "CHANGELOG"
   ],
   "peerDependencies": {
-    "@coinbase/cds-common": "^8.49.0",
+    "@coinbase/cds-common": "^8.52.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
-    "@coinbase/cds-mobile": "^8.49.0",
+    "@coinbase/cds-mobile": "^8.52.0",
     "@coinbase/cds-utils": "^2.3.5",
     "@shopify/react-native-skia": "^1.12.4 || ^2.0.0",
     "react": "^18.3.1",
@@ -57,9 +57,9 @@
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@coinbase/cds-common": "^8.49.0",
+    "@coinbase/cds-common": "^8.52.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
-    "@coinbase/cds-mobile": "^8.49.0",
+    "@coinbase/cds-mobile": "^8.52.0",
     "@coinbase/cds-utils": "^2.3.5",
     "@shopify/react-native-skia": "1.12.4",
     "@types/react": "^18.3.12",