@coinbase/cds-web-visualization 3.3.0 → 3.3.2

package/dts/sparkline/sparkline-interactive/SparklineInteractivePaths.d.ts

@@ -1,11 +1,24 @@
 import type { SparklineInteractiveBaseProps } from './SparklineInteractive';
-export type SparklineInteractivePathsProps<Period extends string> = Pick<SparklineInteractiveBaseProps<Period>, 'fill' | 'yAxisScalingFactor' | 'strokeColor' | 'hoverData' | 'compact'> & {
-    showHoverData: boolean;
-    path: string;
-    area: string;
-    selectedPeriod: Period;
+export type SparklineInteractivePathsProps<Period extends string> = Pick<
+  SparklineInteractiveBaseProps<Period>,
+  'fill' | 'yAxisScalingFactor' | 'strokeColor' | 'hoverData' | 'compact'
+> & {
+  showHoverData: boolean;
+  path: string;
+  area: string;
+  selectedPeriod: Period;
 };
-declare function SparklineInteractivePathsWithGeneric<Period extends string>({ showHoverData, fill, path, area, selectedPeriod, yAxisScalingFactor, strokeColor, hoverData, compact, }: SparklineInteractivePathsProps<Period>): import("react/jsx-runtime").JSX.Element;
+declare function SparklineInteractivePathsWithGeneric<Period extends string>({
+  showHoverData,
+  fill,
+  path,
+  area,
+  selectedPeriod,
+  yAxisScalingFactor,
+  strokeColor,
+  hoverData,
+  compact,
+}: SparklineInteractivePathsProps<Period>): import('react/jsx-runtime').JSX.Element;
 export declare const SparklineInteractivePaths: typeof SparklineInteractivePathsWithGeneric;
 export {};
-//# sourceMappingURL=SparklineInteractivePaths.d.ts.map
+//# sourceMappingURL=SparklineInteractivePaths.d.ts.map

package/dts/sparkline/sparkline-interactive/SparklineInteractivePeriodSelector.d.ts

@@ -1,20 +1,25 @@
 export type SparklineInteractivePeriodSelectorProps<Period extends string> = {
-    selectedPeriod: Period;
-    setSelectedPeriod: (period: Period) => void;
-    periods: {
-        label: string;
-        value: Period;
-    }[];
-    color: string;
+  selectedPeriod: Period;
+  setSelectedPeriod: (period: Period) => void;
+  periods: {
+    label: string;
+    value: Period;
+  }[];
+  color: string;
 };
 export type SparklineInteractivePeriodProps<Period extends string> = {
-    period: {
-        label: string;
-        value: Period;
-    };
-    selectedPeriod: Period;
-    setSelectedPeriod: SparklineInteractivePeriodSelectorProps<Period>['setSelectedPeriod'];
-    color: string;
+  period: {
+    label: string;
+    value: Period;
+  };
+  selectedPeriod: Period;
+  setSelectedPeriod: SparklineInteractivePeriodSelectorProps<Period>['setSelectedPeriod'];
+  color: string;
 };
-export declare const SparklineInteractivePeriodSelector: <Period extends string>({ selectedPeriod, setSelectedPeriod, periods, color, }: SparklineInteractivePeriodSelectorProps<Period>) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=SparklineInteractivePeriodSelector.d.ts.map
+export declare const SparklineInteractivePeriodSelector: <Period extends string>({
+  selectedPeriod,
+  setSelectedPeriod,
+  periods,
+  color,
+}: SparklineInteractivePeriodSelectorProps<Period>) => import('react/jsx-runtime').JSX.Element;
+//# sourceMappingURL=SparklineInteractivePeriodSelector.d.ts.map

package/dts/sparkline/sparkline-interactive/SparklineInteractiveProvider.d.ts

@@ -1,20 +1,25 @@
 import React from 'react';
 import type { Dispatch, SetStateAction } from 'react';
 type SparklineInteractiveProviderProps = {
-    children: React.ReactNode;
-    compact?: boolean;
+  children: React.ReactNode;
+  compact?: boolean;
 };
 type SparklineInteractiveContextInterface = {
-    isFallbackVisible: boolean;
-    compact: boolean;
-    width: number;
-    height: number;
-    showFallback: () => void;
-    hideFallback: () => void;
-    setWidth: Dispatch<SetStateAction<number>>;
-    setHeight: Dispatch<SetStateAction<number>>;
+  isFallbackVisible: boolean;
+  compact: boolean;
+  width: number;
+  height: number;
+  showFallback: () => void;
+  hideFallback: () => void;
+  setWidth: Dispatch<SetStateAction<number>>;
+  setHeight: Dispatch<SetStateAction<number>>;
 };
-export declare const SparklineInteractiveProvider: React.MemoExoticComponent<({ children, compact }: SparklineInteractiveProviderProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const SparklineInteractiveProvider: React.MemoExoticComponent<
+  ({
+    children,
+    compact,
+  }: SparklineInteractiveProviderProps) => import('react/jsx-runtime').JSX.Element
+>;
 export declare function useSparklineInteractiveContext(): SparklineInteractiveContextInterface;
 export {};
-//# sourceMappingURL=SparklineInteractiveProvider.d.ts.map
+//# sourceMappingURL=SparklineInteractiveProvider.d.ts.map

package/dts/sparkline/sparkline-interactive/SparklineInteractiveScrubHandler.d.ts

@@ -1,17 +1,30 @@
 import React from 'react';
 import type { ChartGetMarker } from '@coinbase/cds-common';
 import type { SparklineInteractiveBaseProps } from './SparklineInteractive';
-export declare const scrubHandlerStaticClassName = "cds-sparkline--scrubhandler";
+export declare const scrubHandlerStaticClassName = 'cds-sparkline--scrubhandler';
 export declare function fadeInMask(domNode?: HTMLElement | null): void;
-type SparklineInteractiveScrubHandlerWebProps<Period extends string> = Pick<SparklineInteractiveBaseProps<Period>, 'onScrub' | 'formatHoverDate' | 'formatHoverPrice'> & {
-    getMarker: ChartGetMarker;
-    selectedPeriod: Period;
-    onScrubEnd?: () => void;
-    onScrubStart?: () => void;
-    disabled?: boolean;
-    children: React.ReactNode;
+type SparklineInteractiveScrubHandlerWebProps<Period extends string> = Pick<
+  SparklineInteractiveBaseProps<Period>,
+  'onScrub' | 'formatHoverDate' | 'formatHoverPrice'
+> & {
+  getMarker: ChartGetMarker;
+  selectedPeriod: Period;
+  onScrubEnd?: () => void;
+  onScrubStart?: () => void;
+  disabled?: boolean;
+  children: React.ReactNode;
 };
-declare const SparklineInteractiveScrubHandlerWithGeneric: <Period extends string>({ onScrubEnd, onScrubStart, children, disabled, onScrub, getMarker, selectedPeriod, formatHoverDate, formatHoverPrice, }: SparklineInteractiveScrubHandlerWebProps<Period>) => import("react/jsx-runtime").JSX.Element;
+declare const SparklineInteractiveScrubHandlerWithGeneric: <Period extends string>({
+  onScrubEnd,
+  onScrubStart,
+  children,
+  disabled,
+  onScrub,
+  getMarker,
+  selectedPeriod,
+  formatHoverDate,
+  formatHoverPrice,
+}: SparklineInteractiveScrubHandlerWebProps<Period>) => import('react/jsx-runtime').JSX.Element;
 export declare const SparklineInteractiveScrubHandler: typeof SparklineInteractiveScrubHandlerWithGeneric;
 export {};
-//# sourceMappingURL=SparklineInteractiveScrubHandler.d.ts.map
+//# sourceMappingURL=SparklineInteractiveScrubHandler.d.ts.map

package/dts/sparkline/sparkline-interactive/SparklineInteractiveScrubProvider.d.ts

@@ -1,18 +1,18 @@
 import React from 'react';
 import type { Dispatch, SetStateAction } from 'react';
 type SparklineInteractiveScrubContextInterface = {
-    setLineDOMNode: Dispatch<SetStateAction<HTMLDivElement | null>>;
-    setMaskDOMNode: Dispatch<SetStateAction<HTMLDivElement | null>>;
-    setHoverDateDOMNode: Dispatch<SetStateAction<HTMLSpanElement | null>>;
-    setHoverPriceDOMNode: Dispatch<SetStateAction<HTMLSpanElement | null>>;
-    lineDOMNode: HTMLDivElement | null;
-    maskDOMNode: HTMLDivElement | null;
-    hoverDateDOMNode: HTMLSpanElement | null;
-    hoverPriceDOMNode: HTMLSpanElement | null;
+  setLineDOMNode: Dispatch<SetStateAction<HTMLDivElement | null>>;
+  setMaskDOMNode: Dispatch<SetStateAction<HTMLDivElement | null>>;
+  setHoverDateDOMNode: Dispatch<SetStateAction<HTMLSpanElement | null>>;
+  setHoverPriceDOMNode: Dispatch<SetStateAction<HTMLSpanElement | null>>;
+  lineDOMNode: HTMLDivElement | null;
+  maskDOMNode: HTMLDivElement | null;
+  hoverDateDOMNode: HTMLSpanElement | null;
+  hoverPriceDOMNode: HTMLSpanElement | null;
 };
-export declare const SparklineInteractiveScrubProvider: React.MemoExoticComponent<({ children }: {
-    children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element>;
+export declare const SparklineInteractiveScrubProvider: React.MemoExoticComponent<
+  ({ children }: { children: React.ReactNode }) => import('react/jsx-runtime').JSX.Element
+>;
 export declare function useSparklineInteractiveScrubContext(): SparklineInteractiveScrubContextInterface;
 export {};
-//# sourceMappingURL=SparklineInteractiveScrubProvider.d.ts.map
+//# sourceMappingURL=SparklineInteractiveScrubProvider.d.ts.map

package/dts/sparkline/sparkline-interactive/SparklineInteractiveTimeseriesPaths.d.ts

@@ -2,22 +2,30 @@ import React from 'react';
 import type { ChartDataPoint, ChartTimeseries } from '@coinbase/cds-common/types';
 import type { Area, Line } from 'd3-shape';
 export type TimeseriesPathOnRenderParams = {
-    path: string;
-    area: string;
+  path: string;
+  area: string;
 };
 export type TimeseriesPathProps = {
-    lineFn: Line<ChartDataPoint>;
-    areaFn: Area<ChartDataPoint>;
-    timeseries: ChartTimeseries;
-    initialPath: string;
-    onRender?: ({ path, area }: TimeseriesPathOnRenderParams) => void;
+  lineFn: Line<ChartDataPoint>;
+  areaFn: Area<ChartDataPoint>;
+  timeseries: ChartTimeseries;
+  initialPath: string;
+  onRender?: ({ path, area }: TimeseriesPathOnRenderParams) => void;
 };
 export type SparklineInteractiveTimeseriesPathsProps = {
-    initialPath: string;
-    data: ChartTimeseries[];
-    width: number;
-    height: number;
-    onRender: ({ path, area }: TimeseriesPathOnRenderParams) => void;
+  initialPath: string;
+  data: ChartTimeseries[];
+  width: number;
+  height: number;
+  onRender: ({ path, area }: TimeseriesPathOnRenderParams) => void;
 };
-export declare const SparklineInteractiveTimeseriesPaths: React.MemoExoticComponent<({ data, width, height, initialPath, onRender }: SparklineInteractiveTimeseriesPathsProps) => import("react/jsx-runtime").JSX.Element>;
-//# sourceMappingURL=SparklineInteractiveTimeseriesPaths.d.ts.map
+export declare const SparklineInteractiveTimeseriesPaths: React.MemoExoticComponent<
+  ({
+    data,
+    width,
+    height,
+    initialPath,
+    onRender,
+  }: SparklineInteractiveTimeseriesPathsProps) => import('react/jsx-runtime').JSX.Element
+>;
+//# sourceMappingURL=SparklineInteractiveTimeseriesPaths.d.ts.map

package/dts/sparkline/sparkline-interactive/__figma__/SparklineInteractive.figma.d.ts

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=SparklineInteractive.figma.d.ts.map
+//# sourceMappingURL=SparklineInteractive.figma.d.ts.map

package/dts/sparkline/sparkline-interactive/fade.d.ts

@@ -1,3 +1,3 @@
 export declare function fadeOut(domNode?: HTMLElement | null): void;
 export declare function fadeIn(domNode?: HTMLElement | null): void;
-//# sourceMappingURL=fade.d.ts.map
+//# sourceMappingURL=fade.d.ts.map

package/dts/sparkline/sparkline-interactive/useSparklineInteractiveConstants.d.ts

@@ -1,13 +1,13 @@
 export declare function useSparklineInteractiveConstants(): {
-    chartWidth: number;
-    chartHeight: number;
-    chartDimensionStyles: {
-        height: number;
-        width: number;
-    };
-    xRange: number[];
-    yRange: number[];
-    startX: number;
-    endX: number;
+  chartWidth: number;
+  chartHeight: number;
+  chartDimensionStyles: {
+    height: number;
+    width: number;
+  };
+  xRange: number[];
+  yRange: number[];
+  startX: number;
+  endX: number;
 };
-//# sourceMappingURL=useSparklineInteractiveConstants.d.ts.map
+//# sourceMappingURL=useSparklineInteractiveConstants.d.ts.map

package/dts/sparkline/sparkline-interactive-header/SparklineInteractiveHeader.d.ts

@@ -1,104 +1,112 @@
 import React from 'react';
-import type { SharedProps, SparklineInteractiveHeaderSignVariant, SparklineInteractiveHeaderVariant } from '@coinbase/cds-common/types';
+import type {
+  SharedProps,
+  SparklineInteractiveHeaderSignVariant,
+  SparklineInteractiveHeaderVariant,
+} from '@coinbase/cds-common/types';
 export * from '@coinbase/cds-common/types/SparklineInteractiveHeaderBaseProps';
 export type SparklineInteractiveSubHead = {
-    /**
-     * Free form percentage change
-     */
-    percent: string;
-    /**
-     * Sign to denote the change in price
-     */
-    sign: SparklineInteractiveHeaderSignVariant;
-    /**
-     * The variant to use for the price and percentage change
-     */
-    variant: SparklineInteractiveHeaderVariant;
-    /**
-     * Show the dollar amount of price change
-     */
-    priceChange?: string;
-    /**
-     * The accessoryText to show after the price and / or percentage change. An example is "All time"
-     */
-    accessoryText?: string;
-    /**
-     * The accessibilityLabel to show for the price and / or percentage change. This should be localized
-     * @example
-     * // First, configure your i18n strings
-     * const messages = defineMessages({
-     *   subHeadPrefix: {
-     *     id: `${i18nKey}.subHeadPrefix`,
-     *     defaultMessage: 'Price increase in the amount of',
-     *     description: 'A prefix to make it clear which direction the price action was moving',
-     *   }
-     * });
-     *
-     * // then  provide the translated string the accessibilityLabel prop
-     * messages.subHeadPrefix
-     */
-    accessibilityLabel?: string;
+  /**
+   * Free form percentage change
+   */
+  percent: string;
+  /**
+   * Sign to denote the change in price
+   */
+  sign: SparklineInteractiveHeaderSignVariant;
+  /**
+   * The variant to use for the price and percentage change
+   */
+  variant: SparklineInteractiveHeaderVariant;
+  /**
+   * Show the dollar amount of price change
+   */
+  priceChange?: string;
+  /**
+   * The accessoryText to show after the price and / or percentage change. An example is "All time"
+   */
+  accessoryText?: string;
+  /**
+   * The accessibilityLabel to show for the price and / or percentage change. This should be localized
+   * @example
+   * // First, configure your i18n strings
+   * const messages = defineMessages({
+   *   subHeadPrefix: {
+   *     id: `${i18nKey}.subHeadPrefix`,
+   *     defaultMessage: 'Price increase in the amount of',
+   *     description: 'A prefix to make it clear which direction the price action was moving',
+   *   }
+   * });
+   *
+   * // then  provide the translated string the accessibilityLabel prop
+   * messages.subHeadPrefix
+   */
+  accessibilityLabel?: string;
 };
 export type SparklineInteractiveHeaderValues = {
-    /**
-     * Describes what the Header represents e.g. Bitcoin Price
-     */
-    label?: string;
-    /**
-     * Main content of header, this is usually the price
-     */
-    title?: React.ReactNode;
-    /**
-     * Provides additional information about the title, such as a price change
-     */
-    subHead?: SparklineInteractiveSubHead;
+  /**
+   * Describes what the Header represents e.g. Bitcoin Price
+   */
+  label?: string;
+  /**
+   * Main content of header, this is usually the price
+   */
+  title?: React.ReactNode;
+  /**
+   * Provides additional information about the title, such as a price change
+   */
+  subHead?: SparklineInteractiveSubHead;
 };
 export type SparklineInteractiveHeaderRef = {
-    update: (params: SparklineInteractiveHeaderValues) => void;
+  update: (params: SparklineInteractiveHeaderValues) => void;
 };
 export type SparklineInteractiveHeaderProps = SharedProps & {
-    /**
-     * Default title, changing this prop has no effect once the default is rendered. If you use a ReactNode that is not a string, then you cannot use the text based label that supports updates.
-     */
-    defaultTitle: React.ReactNode;
-    /**
-     * Default label, changing this prop has no effect once the default is rendered.
-     */
-    defaultLabel?: string;
-    /**
-     * Default SubHead, changing this prop has no effect once the default is rendered.
-     */
-    defaultSubHead?: SparklineInteractiveSubHead;
-    /**
-     * Adds a label node that allows React components. If you use this node then you cannot use the text based label that supports updates.
-     */
-    labelNode?: React.ReactNode;
-    /**
-     * Reduce the font size used for the header itself.
-     */
-    compact?: boolean;
+  /**
+   * Default title, changing this prop has no effect once the default is rendered. If you use a ReactNode that is not a string, then you cannot use the text based label that supports updates.
+   */
+  defaultTitle: React.ReactNode;
+  /**
+   * Default label, changing this prop has no effect once the default is rendered.
+   */
+  defaultLabel?: string;
+  /**
+   * Default SubHead, changing this prop has no effect once the default is rendered.
+   */
+  defaultSubHead?: SparklineInteractiveSubHead;
+  /**
+   * Adds a label node that allows React components. If you use this node then you cannot use the text based label that supports updates.
+   */
+  labelNode?: React.ReactNode;
+  /**
+   * Reduce the font size used for the header itself.
+   */
+  compact?: boolean;
 };
 export declare const interpolateSubHeadText: (subHead: SparklineInteractiveSubHead) => string;
-export declare const SparklineInteractiveHeader: React.MemoExoticComponent<React.ForwardRefExoticComponent<SharedProps & {
-    /**
-     * Default title, changing this prop has no effect once the default is rendered. If you use a ReactNode that is not a string, then you cannot use the text based label that supports updates.
-     */
-    defaultTitle: React.ReactNode;
-    /**
-     * Default label, changing this prop has no effect once the default is rendered.
-     */
-    defaultLabel?: string;
-    /**
-     * Default SubHead, changing this prop has no effect once the default is rendered.
-     */
-    defaultSubHead?: SparklineInteractiveSubHead;
-    /**
-     * Adds a label node that allows React components. If you use this node then you cannot use the text based label that supports updates.
-     */
-    labelNode?: React.ReactNode;
-    /**
-     * Reduce the font size used for the header itself.
-     */
-    compact?: boolean;
-} & React.RefAttributes<SparklineInteractiveHeaderRef>>>;
-//# sourceMappingURL=SparklineInteractiveHeader.d.ts.map
+export declare const SparklineInteractiveHeader: React.MemoExoticComponent<
+  React.ForwardRefExoticComponent<
+    SharedProps & {
+      /**
+       * Default title, changing this prop has no effect once the default is rendered. If you use a ReactNode that is not a string, then you cannot use the text based label that supports updates.
+       */
+      defaultTitle: React.ReactNode;
+      /**
+       * Default label, changing this prop has no effect once the default is rendered.
+       */
+      defaultLabel?: string;
+      /**
+       * Default SubHead, changing this prop has no effect once the default is rendered.
+       */
+      defaultSubHead?: SparklineInteractiveSubHead;
+      /**
+       * Adds a label node that allows React components. If you use this node then you cannot use the text based label that supports updates.
+       */
+      labelNode?: React.ReactNode;
+      /**
+       * Reduce the font size used for the header itself.
+       */
+      compact?: boolean;
+    } & React.RefAttributes<SparklineInteractiveHeaderRef>
+  >
+>;
+//# sourceMappingURL=SparklineInteractiveHeader.d.ts.map

package/dts/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.d.ts

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=SparklineInteractiveHeader.figma.d.ts.map
+//# sourceMappingURL=SparklineInteractiveHeader.figma.d.ts.map

package/esm/sparkline/sparkline-interactive/SparklineInteractiveMarkerDates.js

@@ -13,14 +13,15 @@ const noPointerEvents = {
 };
 const SparklineInteractiveMarkerDate = /*#__PURE__*/memo(_ref => {
   let {
-    getFormattedDate
+    getFormattedDate,
+    containerOffsetLeft
   } = _ref;
   const [xPos, setXPos] = useState(0);
   const setupRef = useCallback(ref => {
     if (ref) {
-      setXPos(ref.offsetLeft + ref.offsetWidth / 2);
+      setXPos(ref.offsetLeft + ref.offsetWidth / 2 - containerOffsetLeft);
     }
-  }, []);
+  }, [containerOffsetLeft]);
   const dateStr = getFormattedDate(xPos);
 
   // take up space while loading so when it finishes loading there is no jump
@@ -48,6 +49,7 @@ function SparklineInteractiveMarkerDatesWithGeneric(_ref2) {
     timePeriodGutter = 2
   } = _ref2;
   const [numberOfLabels, setNumberOfLabels] = useState(0);
+  const [containerOffsetLeft, setContainerOffsetLeft] = useState(0);
   const getFormattedDate = useDateLookup({
     getMarker,
     formatDate,
@@ -57,15 +59,17 @@ function SparklineInteractiveMarkerDatesWithGeneric(_ref2) {
     if (ref) {
       const numberOfLabelsFromWidth = Math.floor(ref.offsetWidth / labelWidth);
       setNumberOfLabels(Math.max(numberOfLabelsFromWidth, 4));
+      setContainerOffsetLeft(ref.offsetLeft);
     }
   }, []);
   const markers = useMemo(() => {
     return times(numberOfLabels).map((_, i) => {
       return /*#__PURE__*/_jsx(SparklineInteractiveMarkerDate, {
+        containerOffsetLeft: containerOffsetLeft,
         getFormattedDate: getFormattedDate
       }, i);
     });
-  }, [getFormattedDate, numberOfLabels]);
+  }, [getFormattedDate, numberOfLabels, containerOffsetLeft]);
   return /*#__PURE__*/_jsx(HStack, {
     ref: setupRef,
     className: fadeInCss,

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@coinbase/cds-web-visualization",
-  "version": "3.3.0",
+  "version": "3.3.2",
   "description": "Coinbase Design System - Web Sparkline",
   "repository": {
     "type": "git",
-    "url": "git@github.com:coinbase/cds-staging.git",
+    "url": "git@github.com:coinbase/cds.git",
     "directory": "packages/web-visualization"
   },
   "type": "module",
@@ -34,10 +34,10 @@
     "CHANGELOG"
   ],
   "peerDependencies": {
-    "@coinbase/cds-common": "workspace:^",
-    "@coinbase/cds-lottie-files": "workspace:^",
-    "@coinbase/cds-utils": "workspace:^",
-    "@coinbase/cds-web": "workspace:^",
+    "@coinbase/cds-common": "^8.13.5",
+    "@coinbase/cds-lottie-files": "^3.3.1",
+    "@coinbase/cds-utils": "^2.3.2",
+    "@coinbase/cds-web": "^8.13.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
@@ -54,13 +54,13 @@
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@coinbase/cds-common": "workspace:^",
-    "@coinbase/cds-lottie-files": "workspace:^",
-    "@coinbase/cds-utils": "workspace:^",
-    "@coinbase/cds-web": "workspace:^",
+    "@coinbase/cds-common": "^8.13.5",
+    "@coinbase/cds-lottie-files": "^3.3.1",
+    "@coinbase/cds-utils": "^2.3.2",
+    "@coinbase/cds-web": "^8.13.5",
     "@figma/code-connect": "^1.3.4",
     "@linaria/core": "^3.0.0-beta.22",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1"
   }
-}
+}