@coinbase/cds-common 0.0.0 → 8.13.1

package/esm/utils/mergeProps.js

@@ -0,0 +1,25 @@
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+export function mergeProps(prev, next) {
+  const result = _objectSpread({}, prev);
+  Object.entries(next).forEach(_ref => {
+    let [key, value] = _ref;
+    if (key === 'className' && typeof prev[key] === 'string' && typeof next[key] === 'string') {
+      result[key] += " ".concat(value);
+    } else if (/^on[A-Z]/.test(key) && typeof prev[key] === 'function' && typeof next[key] === 'function') {
+      result[key] = function () {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        prev[key](...args);
+        next[key](...args);
+      };
+    } else if (value !== undefined) {
+      result[key] = value;
+    }
+  });
+  return result;
+}

package/esm/utils/mockUtils.js

@@ -0,0 +1 @@
+export const NoopFn = () => {};

package/esm/utils/modulate.js

@@ -0,0 +1,32 @@
+// copied from https://medium.com/the-school-of-do/framer-cheat-sheets-utils-modulate-b88e359fdcc6
+// typescriptified by @KatMartinez
+
+/** create incremental transformations based on user interaction */
+export const modulate = (value, _ref) => {
+  let {
+    inputRange,
+    outputRange,
+    clamp = false
+  } = _ref;
+  const [fromLow, fromHigh] = inputRange;
+  const [toLow, toHigh] = outputRange;
+  const result = toLow + (value - fromLow) / (fromHigh - fromLow) * (toHigh - toLow);
+  if (clamp) {
+    if (toLow < toHigh) {
+      if (result < toLow) {
+        return toLow;
+      }
+      if (result > toHigh) {
+        return toHigh;
+      }
+    } else {
+      if (result > toLow) {
+        return toLow;
+      }
+      if (result < toHigh) {
+        return toHigh;
+      }
+    }
+  }
+  return result;
+};

package/esm/utils/parseDotCountMaxOverflow.js

@@ -0,0 +1,7 @@
+// If a badge count is greater than max (optional, defaults at 99), it should
+// truncate the numbers so its x+.
+export const MAX_OVERFLOW_COUNT = 99;
+export const parseDotCountMaxOverflow = function (count) {
+  let max = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : MAX_OVERFLOW_COUNT;
+  return count <= max ? count : "".concat(max, "+");
+};

package/esm/visualizations/getProgressCircleParams.js

@@ -0,0 +1,18 @@
+import { getCenter, getRadius } from '../utils/circle';
+export const getProgressCircleParams = _ref => {
+  let {
+    size,
+    strokeWidth,
+    stroke
+  } = _ref;
+  const radius = getRadius(size, strokeWidth);
+  const center = getCenter(size);
+  return {
+    stroke,
+    cx: center,
+    cy: center,
+    r: radius,
+    strokeWidth,
+    fill: 'none'
+  };
+};

package/esm/visualizations/getSparklineRange.js

@@ -0,0 +1,13 @@
+export const getSparklineRange = _ref => {
+  let {
+    height,
+    width,
+    yAxisScalingFactor = 1.0
+  } = _ref;
+  const xRange = [2, width - 2];
+  const yRange = [Math.max(2 + 1, (height - 2) * yAxisScalingFactor), 2];
+  return {
+    xRange,
+    yRange
+  };
+};

package/esm/visualizations/getSparklineTransform.js

@@ -0,0 +1,19 @@
+import { getSparklineRange } from './getSparklineRange';
+
+// This transform vertically centers a scaled down path in the middle of the svg
+export function getSparklineTransform(width, height, yAxisScalingFactor) {
+  const translateProps = {};
+  if (Number.isFinite(yAxisScalingFactor)) {
+    const {
+      yRange
+    } = getSparklineRange({
+      height,
+      width,
+      yAxisScalingFactor
+    });
+    const pathHeight = Math.abs(yRange[0] - yRange[1]);
+    const yTranslate = height / 2 - pathHeight / 2;
+    translateProps.transform = "translate(0, ".concat(yTranslate, ")");
+  }
+  return translateProps;
+}

package/esm/visualizations/largestTriangleThreeBucket.js

@@ -0,0 +1,57 @@
+/**
+ * Downsampling timeseries data using the "Largest-Triangle-Three-Buckets algorithm" (LTTB) as described in Sveinn Steinarsson's 2013 Master's thesis Downsampling Time Series for Visual Representation.
+ *
+ * The algorithm is based on the technique of forming triangles between adjacent data points and using the area of the triangles to determine the perceptual importance of the individual points.
+ * This helps to retain the visual characteristics of the original path whilst greatly reducing the number of points representing it.
+ *
+ * The threshold parameter for the algorithm is set at half the current width of the svg in pixels - so at most there is one point in the input domain represented for every two pixels in the output range.
+ *
+ * Using this method helps to avoid any alising issues that occur when a high number of points are drawn in a low number of pixels.
+ * @param data
+ * @param threshold
+ * @returns number[]
+ * @example https://bl.ocks.org/FraserChapman/649f1aba28f6bc941d5c
+ */
+export const largestTriangleThreeBucket = (data, threshold) => {
+  const m = Math.floor;
+  const y = Math.abs;
+  const f = data.length;
+  if (threshold >= f || threshold === 0) {
+    return data;
+  }
+  const n = [];
+  let t = 0;
+  const p = (f - 2) / (threshold - 2);
+  let c = 0;
+  let v = 0;
+  let u = 0;
+  let w = 0;
+  n[t++] = data[c];
+  for (let e = 0; e < threshold - 2; e++) {
+    let g = 0;
+    let h = 0;
+    let a = m((e + 1) * p) + 1;
+    let d = m((e + 2) * p) + 1;
+    d = d < f ? d : f;
+    let k = d - a;
+    for (; a < d; a++) {
+      g += +a;
+      h += +data[a];
+    }
+    g /= k;
+    h /= k;
+    a = m((e + 0) * p) + 1;
+    d = m((e + 1) * p) + 1;
+    k = +c;
+    const x = +data[c];
+    c = -1;
+    for (; a < d; a++) {
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+      typeof data[a] !== 'undefined' && (u = 0.5 * y((k - g) * (data[a] - x) - (k - a) * (h - x)), u > c && (c = u, v = data[a], w = a));
+    }
+    n[t++] = v;
+    c = w;
+  }
+  n[t++] = data[f - 1];
+  return n;
+};

package/esm/visualizations/useCounter.js

@@ -0,0 +1,52 @@
+import { useEffect, useRef, useState } from 'react';
+import { isStorybook } from '@coinbase/cds-utils';
+export const useCounter = _ref => {
+  let {
+    startNum,
+    endNum,
+    durationInMillis
+  } = _ref;
+  const skipAnimation = isStorybook();
+  const [count, setCount] = useState(skipAnimation ? endNum : startNum);
+  const timeoutRef = useRef();
+  useEffect(() => {
+    const clearTimeoutRef = () => {
+      clearTimeout(timeoutRef.current);
+    };
+    if (skipAnimation) {
+      return clearTimeoutRef;
+    }
+    const startTime = Date.now();
+    const endTime = startTime + durationInMillis;
+    clearTimeoutRef();
+    let currCount = startNum;
+    function runUpdateAfterTimer() {
+      if (currCount === endNum) {
+        return;
+      }
+      const currTime = Date.now();
+      const timeLeft = endTime - currTime;
+      const incrementTime = timeLeft / Math.abs(endNum - currCount); // durationInMillis / Math.abs(endNum - startNum);
+
+      timeoutRef.current = setTimeout(() => {
+        if (currCount === endNum) {
+          return;
+        }
+        const percentDone = (currTime - startTime) / Math.abs(endTime - startTime);
+        const increment = Math.ceil(percentDone * Math.abs(endNum - startNum));
+        if (endNum > startNum) {
+          currCount = Math.min(startNum + increment, endNum);
+        } else {
+          currCount = Math.max(startNum - increment, endNum);
+        }
+        setCount(currCount);
+        runUpdateAfterTimer();
+      }, incrementTime);
+    }
+    if (currCount !== endNum) {
+      runUpdateAfterTimer();
+    }
+    return clearTimeoutRef;
+  }, [startNum, endNum, durationInMillis, skipAnimation]);
+  return count;
+};

package/esm/visualizations/useDateLookup.js

@@ -0,0 +1,18 @@
+import { useCallback } from 'react';
+export function useDateLookup(_ref) {
+  let {
+    getMarker,
+    formatDate,
+    selectedPeriod
+  } = _ref;
+  return useCallback(xPos => {
+    var _getMarker;
+    const {
+      date
+    } = (_getMarker = getMarker(xPos)) !== null && _getMarker !== void 0 ? _getMarker : {};
+    if (!date) {
+      return '';
+    }
+    return formatDate(date, selectedPeriod);
+  }, [formatDate, getMarker, selectedPeriod]);
+}

package/esm/visualizations/useProgressSize.js

@@ -0,0 +1,15 @@
+import { useMemo } from 'react';
+export const useProgressSize = weight => {
+  return useMemo(() => {
+    switch (weight) {
+      case 'semiheavy':
+        return 8;
+      case 'heavy':
+        return 12;
+      case 'thin':
+        return 2;
+      default:
+        return 4;
+    }
+  }, [weight]);
+};

package/esm/visualizations/useSparklineArea.js

@@ -0,0 +1,30 @@
+const _excluded = ["height"];
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return 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 { useCallback } from 'react';
+import { area, curveBasis } from 'd3-shape';
+import { useSparklinePathGenerator } from './useSparklinePathGenerator';
+export const useSparklineArea = _ref => {
+  let {
+      height
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const generator = useCallback(_ref2 => {
+    var _area$curve$x$y0$y;
+    let {
+      xFunction,
+      yFunction,
+      data
+    } = _ref2;
+    return (_area$curve$x$y0$y = area().curve(curveBasis).x((_, i) => xFunction(i)).y0(height).y1(y => yFunction(y))(data)) !== null && _area$curve$x$y0$y !== void 0 ? _area$curve$x$y0$y : '';
+  }, [height]);
+  return useSparklinePathGenerator(_objectSpread({
+    generator,
+    height
+  }, props));
+};

package/esm/visualizations/useSparklineAreaOpacity.js

@@ -0,0 +1,3 @@
+export function useSparklineAreaOpacity(colorScheme) {
+  return colorScheme === 'dark' ? 0.4 : 0.2;
+}

package/esm/visualizations/useSparklineCoordinates.js

@@ -0,0 +1,73 @@
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { useMemo } from 'react';
+import { bisector, extent } from 'd3-array';
+import * as d3Scale from 'd3-scale';
+import { area, line } from 'd3-shape';
+import { getSparklineRange } from './getSparklineRange';
+const {
+  scaleLinear,
+  scaleTime
+} = d3Scale;
+export const useSparklineCoordinates = _ref => {
+  let {
+    data,
+    width,
+    height,
+    yAxisScalingFactor
+  } = _ref;
+  return useMemo(() => {
+    var _createSparklineArea;
+    const {
+      xRange,
+      yRange
+    } = getSparklineRange({
+      height,
+      width,
+      yAxisScalingFactor
+    });
+    const xDomain = extent(data, item => item.date);
+    const xFunction = scaleTime() // the x-axis is date
+    .domain(xDomain).range(xRange);
+    const yDomain = extent(data, item => item.value);
+    const yFunction = scaleLinear() // the y-axis is value
+    .domain(yDomain).range(yRange);
+    const createSparklinePath = line().x(item => xFunction(item.date)).y(item => yFunction(item.value));
+    const createSparklineArea = area().x(item => xFunction(item.date)).y0(height).y1(item => yFunction(item.value));
+
+    // Bisector goes from x coordinate to index of data array
+    const bisect = bisector(item => item.date).left;
+    const getMarker = xPos => {
+      const date = xFunction.invert(xPos);
+      const idx = bisect(data, date);
+      const point = data[idx];
+      if (!point) {
+        return undefined;
+      }
+      return _objectSpread({
+        x: xFunction(point.date),
+        y: yFunction(point.value)
+      }, point);
+    };
+
+    /*
+      This is a hack that will only support straight lines when 2 data points are passed. When this is true, we append `M-10,10` to the path.
+       We do not do this for all lines because it warps the transition between time periods, which is visual jank. This provides a solution for straight lines, while minimizing impact for most charts.
+       We apply M-10,10 so that the browser recognizes data for straight, horizontal lines. This does not impact non-straight lines. 
+      This is due to a browser bug which refuses to acknowledge a line if the height remains exactly the same, and therefore renders the "height" of the path as 0 (invisible).
+       "M", or move to, will simply move the cursor. Since we're appending two moves (the beginning of the path generate is always M), no line will be drawn but the browser will be activated. 
+       Stack overflow: https://stackoverflow.com/questions/19708943/svg-straight-path-with-clip-path-not-visible-in-chrome/19709615#19709615
+    */
+    const isAStraightLine = data.length < 5 && data.filter(dataPoint => dataPoint.value === data[0].value).length === data.length;
+    return {
+      xFunction,
+      yFunction,
+      path: "".concat(isAStraightLine ? 'M-10,10' : '').concat(createSparklinePath(data)),
+      area: (_createSparklineArea = createSparklineArea(data)) !== null && _createSparklineArea !== void 0 ? _createSparklineArea : '',
+      getMarker
+    };
+  }, [data, height, width, yAxisScalingFactor]);
+};

package/esm/visualizations/useSparklinePath.js

@@ -0,0 +1,22 @@
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { useCallback } from 'react';
+import { curveBasis, line } from 'd3-shape';
+import { useSparklinePathGenerator } from './useSparklinePathGenerator';
+export const useSparklinePath = props => {
+  const generator = useCallback(_ref => {
+    var _line$curve$x$y;
+    let {
+      xFunction,
+      yFunction,
+      data
+    } = _ref;
+    return (_line$curve$x$y = line().curve(curveBasis).x((_, i) => xFunction(i)).y(y => yFunction(y))(data)) !== null && _line$curve$x$y !== void 0 ? _line$curve$x$y : '';
+  }, []);
+  return useSparklinePathGenerator(_objectSpread({
+    generator
+  }, props));
+};

package/esm/visualizations/useSparklinePathGenerator.js

@@ -0,0 +1,38 @@
+import { useMemo } from 'react';
+import { extent } from 'd3-array';
+import * as d3Scale from 'd3-scale';
+import { getSparklineRange } from './getSparklineRange';
+import { largestTriangleThreeBucket } from './largestTriangleThreeBucket';
+const {
+  scaleLinear
+} = d3Scale;
+export const useSparklinePathGenerator = _ref => {
+  let {
+    data,
+    height,
+    width,
+    yAxisScalingFactor = 1.0,
+    generator
+  } = _ref;
+  const dataList = useMemo(() => data.map(Number), [data]);
+  return useMemo(() => {
+    const {
+      xRange,
+      yRange
+    } = getSparklineRange({
+      height,
+      width,
+      yAxisScalingFactor
+    });
+    const downsampledData = largestTriangleThreeBucket(dataList, width / 3);
+    const xDomain = [0, downsampledData.length];
+    const xFunction = scaleLinear().domain(xDomain).range(xRange);
+    const yDomain = extent(downsampledData);
+    const yFunction = scaleLinear().domain(yDomain).range(yRange);
+    return generator({
+      xFunction,
+      yFunction,
+      data: downsampledData
+    });
+  }, [height, width, yAxisScalingFactor, dataList, generator]);
+};

package/esm/visualizations/useTimeseriesPaths.js

@@ -0,0 +1,41 @@
+import { useMemo } from 'react';
+import { extent } from 'd3-array';
+import * as d3Scale from 'd3-scale';
+import { area, line } from 'd3-shape';
+import { getSparklineRange } from './getSparklineRange';
+const {
+  scaleLinear,
+  scaleTime
+} = d3Scale;
+// returns a line and area generator that is compatible with a list of timeseries
+export function useTimeseriesPaths(_ref) {
+  let {
+    data,
+    width,
+    height
+  } = _ref;
+  return useMemo(() => {
+    const points = data.reduce((previousValue, currentValue) => {
+      return previousValue.concat(currentValue.points);
+    }, []);
+    const {
+      xRange,
+      yRange
+    } = getSparklineRange({
+      width,
+      height
+    });
+    const yDomain = extent(points, item => item.value);
+    const yFunction = scaleLinear() // the y-axis is value
+    .domain(yDomain).range(yRange);
+    const xDomain = extent(points, item => item.date);
+    const xFunction = scaleTime() // the x-axis is date
+    .domain(xDomain).range(xRange);
+    const lineFn = line().x(item => xFunction(item.date)).y(item => yFunction(item.value));
+    const areaFn = area().x(item => xFunction(item.date)).y0(height).y1(item => yFunction(item.value));
+    return {
+      lineFn,
+      areaFn
+    };
+  }, [data, width, height]);
+}

package/esm/visualizations/useVisualizationDimensions.js

@@ -0,0 +1,27 @@
+import { useMemo } from 'react';
+export const useVisualizationDimensions = _ref => {
+  let {
+    userDefinedWidth,
+    userDefinedHeight,
+    calculatedWidth,
+    calculatedHeight
+  } = _ref;
+  return useMemo(() => {
+    let width = calculatedWidth;
+    let height = calculatedHeight;
+    let shouldObserve = true;
+    // if the user has passed in a static width and height then we don't need to wait for the dimension calculation
+    if (Number.isFinite(userDefinedWidth) && Number.isFinite(userDefinedHeight)) {
+      // we know it is a number from the number check
+      width = userDefinedWidth;
+      height = userDefinedHeight;
+      shouldObserve = false;
+    }
+    return {
+      width,
+      height,
+      circleSize: Math.min(height, width),
+      shouldObserve
+    };
+  }, [calculatedHeight, calculatedWidth, userDefinedHeight, userDefinedWidth]);
+};

package/package.json

@@ -1,8 +1,64 @@
 {
   "name": "@coinbase/cds-common",
-  "version": "0.0.0",
-  "description": "Placeholder package",
-  "main": "index.js",
-  "author": "Coinbase Inc.",
-  "license": "Apache-2.0"
+  "version": "8.13.1",
+  "description": "Coinbase Design System - Common",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:coinbase/cds-staging.git",
+    "directory": "packages/common"
+  },
+  "react-native": "./src/index.ts",
+  "type": "module",
+  "main": "./esm/index.js",
+  "types": "./dts/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dts/index.d.ts",
+      "default": "./esm/index.js"
+    },
+    "./types": {
+      "types": "./dts/types/index.d.ts",
+      "default": "./esm/types/index.js"
+    },
+    "./*": {
+      "types": "./dts/*.d.ts",
+      "default": "./esm/*.js"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dts",
+    "esm",
+    "mcp-docs",
+    "CHANGELOG"
+  ],
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "dependencies": {
+    "@coinbase/cds-icons": "workspace:^",
+    "@coinbase/cds-illustrations": "workspace:^",
+    "@coinbase/cds-mcp-server": "workspace:^",
+    "@coinbase/cds-utils": "workspace:^",
+    "@modelcontextprotocol/sdk": "^1.13.1",
+    "d3-array": "^3.2.4",
+    "d3-color": "^3.1.0",
+    "d3-interpolate": "^3.0.1",
+    "d3-scale": "^4.0.2",
+    "d3-shape": "^3.2.0",
+    "lodash": "^4.17.21",
+    "react-is": "^17.0.2",
+    "type-fest": "^2.19.0",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.28.0",
+    "@babel/preset-env": "^7.28.0",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-typescript": "^7.27.1",
+    "@types/react": "^18.3.12",
+    "jest-date-mock": "^1.0.8"
+  }
 }

package/index.js

@@ -1 +0,0 @@
-console.log("Temporary package");