@coinbase/cds-web-visualization 3.4.0-beta.5 → 3.4.0-beta.6

package/esm/chart/utils/path.js

@@ -40,17 +40,18 @@ export const getPathCurveFunction = function () {
  * @example
  * ```typescript
  * const chartScale = getChartScale({ chartRect, domain, range, xScale, yScale });
- * const path = getLinePath({ data: [1, 2, 3], chartScale, curve: 'linear' });
+ * const path = getLinePath({ data: [1, 2, 3], chartScale, curve: 'bump' });
  * ```
  */
 export const getLinePath = _ref => {
   var _pathGenerator;
   let {
     data,
-    curve = 'linear',
+    curve = 'bump',
     xScale,
     yScale,
-    xData
+    xData,
+    connectNulls
   } = _ref;
   if (data.length === 0) {
     return '';
@@ -62,9 +63,12 @@ export const getLinePath = _ref => {
     yScale,
     xData
   });
-  const pathGenerator = d3Line().x(d => d.x).y(d => d.y).curve(curveFunction).defined(d => d !== null); // Only draw lines where point is not null
 
-  return (_pathGenerator = pathGenerator(dataPoints)) !== null && _pathGenerator !== void 0 ? _pathGenerator : '';
+  // When connectNulls is true, filter out null values before rendering
+  // When false, use defined() to create gaps in the line
+  const filteredPoints = connectNulls ? dataPoints.filter(d => d !== null) : dataPoints;
+  const pathGenerator = d3Line().x(d => d.x).y(d => d.y).curve(curveFunction).defined(d => connectNulls || d !== null);
+  return (_pathGenerator = pathGenerator(filteredPoints)) !== null && _pathGenerator !== void 0 ? _pathGenerator : '';
 };
 
 /**
@@ -92,10 +96,11 @@ export const getLinePath = _ref => {
 export const getAreaPath = _ref2 => {
   let {
     data,
-    curve = 'linear',
+    curve = 'bump',
     xScale,
     yScale,
-    xData
+    xData,
+    connectNulls
   } = _ref2;
   if (data.length === 0) {
     return '';
@@ -156,6 +161,10 @@ export const getAreaPath = _ref2 => {
       isValid: true
     };
   });
+
+  // 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 !== void 0 ? _d$low : 0;
@@ -164,12 +173,26 @@ export const getAreaPath = _ref2 => {
     var _d$high;
     return (_d$high = d.high) !== null && _d$high !== void 0 ? _d$high : 0;
   }) // Top boundary (high values), fallback to 0
-  .curve(curveFunction).defined(d => d.isValid && d.low != null && d.high != null); // Only draw where both values exist
+  .curve(curveFunction).defined(d => connectNulls || d.isValid && d.low != null && d.high != null); // Only draw where both values exist
 
-  const result = areaGenerator(dataPoints);
+  const result = areaGenerator(filteredPoints);
   return result !== null && result !== void 0 ? result : '';
 };
 
+/**
+ * Converts line coordinates to an SVG path string.
+ * Useful for rendering axis lines and tick marks.
+ *
+ * @example
+ * ```typescript
+ * const path = lineToPath(0, 0, 100, 100);
+ * // Returns: "M 0 0 L 100 100"
+ * ```
+ */
+export const lineToPath = (x1, y1, x2, y2) => {
+  return "M".concat(x1, ",").concat(y1, " L").concat(x2, ",").concat(y2);
+};
+
 /**
  * Creates an SVG path string for a rectangle with selective corner rounding.
  * Useful for creating bars in charts with optional rounded corners.

package/esm/chart/utils/point.js

@@ -1,5 +1,13 @@
 import { isCategoricalScale, isLogScale, isNumericScale } from './scale';
 
+/**
+ * Position a label should be placed relative to the point
+ *
+ * @example
+ * 'top' would have the label be located above the point itself,
+ * and thus the vertical alignment of that text would be bottom.
+ */
+
 /**
  * Get a point from a data value and a scale.
  * @note for categorical scales, the point will be centered within the band.
@@ -115,4 +123,65 @@ export const projectPoints = _ref2 => {
       yScale
     });
   });
+};
+
+/**
+ * Determines text alignment based on label position.
+ * For example, a 'top' position needs the text aligned to the 'bottom' so it appears above the point.
+ */
+export const getAlignmentFromPosition = position => {
+  let horizontalAlignment = 'center';
+  let verticalAlignment = 'middle';
+  switch (position) {
+    case 'top':
+      verticalAlignment = 'bottom';
+      break;
+    case 'bottom':
+      verticalAlignment = 'top';
+      break;
+    case 'left':
+      horizontalAlignment = 'right';
+      break;
+    case 'right':
+      horizontalAlignment = 'left';
+      break;
+    case 'center':
+    default:
+      horizontalAlignment = 'center';
+      verticalAlignment = 'middle';
+      break;
+  }
+  return {
+    horizontalAlignment,
+    verticalAlignment
+  };
+};
+
+/**
+ * Calculates the final label coordinates by applying offset based on position.
+ */
+export const getLabelCoordinates = (x, y, position, offset) => {
+  let dx = 0;
+  let dy = 0;
+  switch (position) {
+    case 'top':
+      dy = -offset;
+      break;
+    case 'bottom':
+      dy = offset;
+      break;
+    case 'left':
+      dx = -offset;
+      break;
+    case 'right':
+      dx = offset;
+      break;
+    case 'center':
+    default:
+      break;
+  }
+  return {
+    x: x + dx,
+    y: y + dy
+  };
 };

package/esm/chart/utils/scrubber.js

@@ -0,0 +1,132 @@
+/**
+ * Determines which side (left/right) to place scrubber labels based on available space.
+ * Prefers right side, switches to left when labels would overflow.
+ */
+export const getLabelPosition = function (beaconX, maxLabelWidth, drawingArea) {
+  let xOffset = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 16;
+  if (drawingArea.width <= 0 || drawingArea.height <= 0) {
+    return 'right';
+  }
+  const availableRightSpace = drawingArea.x + drawingArea.width - beaconX;
+  const requiredSpace = maxLabelWidth + xOffset;
+  return requiredSpace <= availableRightSpace ? 'right' : 'left';
+};
+/**
+ * Calculates Y positions for all labels avoiding overlaps while maintaining order.
+ */
+export const calculateLabelYPositions = (dimensions, drawingArea, labelHeight, minGap) => {
+  if (dimensions.length === 0) {
+    return new Map();
+  }
+
+  // Sort by preferred Y values and create working labels
+  const sortedLabels = [...dimensions].sort((a, b) => a.preferredY - b.preferredY).map(dim => ({
+    seriesId: dim.seriesId,
+    preferredY: dim.preferredY,
+    finalY: dim.preferredY
+  }));
+
+  // Initial bounds fitting
+  const minY = drawingArea.y + labelHeight / 2;
+  const maxY = drawingArea.y + drawingArea.height - labelHeight / 2;
+  const requiredDistance = labelHeight + minGap;
+  for (const label of sortedLabels) {
+    // Clamp each label to the drawing area
+    label.finalY = Math.max(minY, Math.min(maxY, label.preferredY));
+  }
+
+  // First pass: push down any overlapping labels
+  for (let i = 1; i < sortedLabels.length; i++) {
+    const prev = sortedLabels[i - 1];
+    const current = sortedLabels[i];
+    const minAllowedY = prev.finalY + requiredDistance;
+    if (current.finalY < minAllowedY) {
+      current.finalY = minAllowedY;
+    }
+  }
+
+  // Find collision groups - groups of labels that are tightly packed (gap < minGap between them)
+  const collisionGroups = [];
+  let currentGroup = [sortedLabels[0]];
+  for (let i = 1; i < sortedLabels.length; i++) {
+    const prev = sortedLabels[i - 1];
+    const current = sortedLabels[i];
+    const gap = current.finalY - prev.finalY - labelHeight;
+    if (gap < minGap + 0.01) {
+      // Labels are touching or very close - part of same collision group
+      currentGroup.push(current);
+    } else {
+      // Gap is large enough - start new group
+      collisionGroups.push(currentGroup);
+      currentGroup = [current];
+    }
+  }
+  collisionGroups.push(currentGroup);
+
+  // Process each collision group - optimize positioning to minimize displacement
+  for (const group of collisionGroups) {
+    if (group.length === 1) {
+      // Single label, already at best position
+      continue;
+    }
+    const groupLastLabel = group[group.length - 1];
+    const groupFirstLabel = group[0];
+    const groupOverflow = groupLastLabel.finalY + labelHeight / 2 - (drawingArea.y + drawingArea.height);
+
+    // Calculate the ideal center point for this group
+    const groupPreferredCenter = group.reduce((sum, label) => sum + label.preferredY, 0) / group.length;
+    const groupTotalNeeded = group.length * labelHeight + (group.length - 1) * minGap;
+    if (groupOverflow <= 0) {
+      // Group fits, but let's center it better if possible
+      // Calculate how much we can shift up/down to center around preferred positions
+      const currentCenter = (groupFirstLabel.finalY + groupLastLabel.finalY) / 2;
+      const desiredShift = groupPreferredCenter - currentCenter;
+
+      // Calculate max shift in each direction
+      const maxShiftUp = groupFirstLabel.finalY - minY;
+      const maxShiftDown = maxY - groupLastLabel.finalY;
+
+      // Apply the shift, constrained by boundaries
+      const actualShift = Math.max(-maxShiftUp, Math.min(maxShiftDown, desiredShift));
+      if (Math.abs(actualShift) > 0.01) {
+        for (const label of group) {
+          label.finalY += actualShift;
+        }
+      }
+    } else {
+      // Group overflows - need to adjust
+      const groupStartY = groupFirstLabel.finalY - labelHeight / 2;
+      const availableSpace = drawingArea.y + drawingArea.height - groupStartY;
+      const maxShiftUp = groupFirstLabel.finalY - minY;
+      if (maxShiftUp >= groupOverflow) {
+        // Can shift entire group up to fit
+        for (const label of group) {
+          label.finalY -= groupOverflow;
+        }
+      } else if (groupTotalNeeded <= availableSpace) {
+        // Can't shift enough, but there's room - redistribute with proper spacing
+        let currentY = Math.max(minY, groupFirstLabel.finalY - maxShiftUp);
+        const gap = (availableSpace - group.length * labelHeight) / Math.max(1, group.length - 1);
+        for (const label of group) {
+          label.finalY = currentY;
+          currentY += labelHeight + gap;
+        }
+      } else {
+        // Not enough space even with compression - compress gaps and fit to bottom
+        const compressedGap = Math.max(1, (availableSpace - group.length * labelHeight) / Math.max(1, group.length - 1));
+        // Position so last label is at maxY
+        let currentY = maxY - (group.length - 1) * (labelHeight + compressedGap);
+        currentY = Math.max(minY, currentY);
+        for (const label of group) {
+          label.finalY = currentY;
+          currentY += labelHeight + compressedGap;
+        }
+      }
+    }
+  }
+  const result = new Map();
+  for (const label of sortedLabels) {
+    result.set(label.seriesId, label.finalY);
+  }
+  return result;
+};

package/esm/chart/utils/transition.js

@@ -0,0 +1,111 @@
+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 { useEffect, useRef } from 'react';
+import { interpolatePath } from 'd3-interpolate-path';
+import { animate, useMotionValue, useTransform } from 'framer-motion';
+
+/**
+ * Default transition configuration used across all chart components.
+ */
+export const defaultTransition = {
+  type: 'spring',
+  stiffness: 900,
+  damping: 120,
+  mass: 4
+};
+
+/**
+ * Duration in seconds for accessory elements to fade in.
+ */
+export const accessoryFadeTransitionDuration = 0.15;
+
+/**
+ * Delay in seconds before accessory elements fade in.
+ */
+export const accessoryFadeTransitionDelay = 0.35;
+
+/**
+ * Hook for path animation state and transitions.
+ *
+ * @param currentPath - Current target path to animate to
+ * @param initialPath - Initial path for enter animation. When provided, the first animation will go from initialPath to currentPath.
+ * @param transition - Transition configuration
+ * @returns MotionValue containing the current interpolated path string
+ *
+ * @example
+ * // Simple path transition
+ * const animatedPath = usePathTransition({
+ *   currentPath: d ?? '',
+ *   transition: {
+ *     type: 'spring',
+ *     stiffness: 300,
+ *     damping: 20
+ *   }
+ * });
+ *
+ * @example
+ * // Time based animation
+ * const animatedPath = usePathTransition({
+ *   currentPath: targetPath,
+ *   initialPath: baselinePath,
+ *   transition: {
+ *     type: 'tween',
+ *     duration: 0.3,
+ *     ease: 'easeInOut'
+ *   }
+ * });
+ */
+export const usePathTransition = _ref => {
+  let {
+    currentPath,
+    initialPath,
+    transition = defaultTransition
+  } = _ref;
+  const isInitialRender = useRef(true);
+  const previousPathRef = useRef(initialPath !== null && initialPath !== void 0 ? initialPath : currentPath);
+  const targetPathRef = useRef(currentPath);
+  const animationRef = useRef(null);
+  const progress = useMotionValue(0);
+
+  // Derive the interpolated path from progress using useTransform
+  const interpolatedPath = useTransform(progress, latest => {
+    const pathInterpolator = interpolatePath(previousPathRef.current, targetPathRef.current);
+    return pathInterpolator(latest);
+  });
+  useEffect(() => {
+    // Only proceed if the target path has actually changed
+    if (targetPathRef.current !== currentPath) {
+      // Cancel any ongoing animation before starting a new one
+      const wasAnimating = !!animationRef.current;
+      if (animationRef.current) {
+        animationRef.current.cancel();
+        animationRef.current = null;
+      }
+      const currentInterpolatedPath = interpolatedPath.get();
+
+      // If we were animating and the interpolated path is different from both start and end,
+      // use it as the starting point for the next animation (smooth interruption)
+      const isInterpolatedPosition = currentInterpolatedPath !== previousPathRef.current && currentInterpolatedPath !== currentPath;
+      if (wasAnimating && isInterpolatedPosition) {
+        previousPathRef.current = currentInterpolatedPath;
+      }
+      targetPathRef.current = currentPath;
+      progress.set(0);
+      animationRef.current = animate(progress, 1, _objectSpread(_objectSpread({}, transition), {}, {
+        onComplete: () => {
+          previousPathRef.current = currentPath;
+        }
+      }));
+      isInitialRender.current = false;
+    }
+    return () => {
+      if (animationRef.current) {
+        animationRef.current.cancel();
+      }
+    };
+  }, [currentPath, transition, progress, interpolatedPath]);
+  return interpolatedPath;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web-visualization",
-  "version": "3.4.0-beta.5",
+  "version": "3.4.0-beta.6",
   "description": "Coinbase Design System - Web Sparkline",
   "repository": {
     "type": "git",
@@ -38,10 +38,10 @@
     "CHANGELOG"
   ],
   "peerDependencies": {
-    "@coinbase/cds-common": "^8.19.1",
+    "@coinbase/cds-common": "^8.21.8",
     "@coinbase/cds-lottie-files": "^3.3.3",
     "@coinbase/cds-utils": "^2.3.4",
-    "@coinbase/cds-web": "^8.19.1",
+    "@coinbase/cds-web": "^8.21.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
@@ -58,10 +58,10 @@
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@coinbase/cds-common": "^8.19.1",
+    "@coinbase/cds-common": "^8.21.8",
     "@coinbase/cds-lottie-files": "^3.3.3",
     "@coinbase/cds-utils": "^2.3.4",
-    "@coinbase/cds-web": "^8.19.1",
+    "@coinbase/cds-web": "^8.21.8",
     "@figma/code-connect": "^1.3.4",
     "@linaria/core": "^3.0.0-beta.22",
     "@types/react": "^18.3.12",

package/dts/chart/Point.d.ts

@@ -1,153 +0,0 @@
-import React from 'react';
-import type { SVGProps } from 'react';
-import type { SharedProps } from '@coinbase/cds-common/types';
-import type { ChartTextChildren } from './text/ChartText';
-import { type ChartTextProps } from './text';
-/**
- * Parameters passed to renderPoints callback function.
- */
-export type RenderPointsParams = {
-  /**
-   * X coordinate in SVG pixel space.
-   */
-  x: number;
-  /**
-   * Y coordinate in SVG pixel space.
-   */
-  y: number;
-  /**
-   * X coordinate in data space (usually same as index).
-   */
-  dataX: number;
-  /**
-   * Y coordinate in data space (same as value).
-   */
-  dataY: number;
-};
-/**
- * Shared configuration for point appearance and behavior.
- * Used by line-associated points rendered via Line/LineChart components.
- */
-export type PointConfig = {
-  /**
-   * The fill color of the point.
-   */
-  fill?: string;
-  /**
-   * Optional Y-axis id to specify which axis to plot along.
-   * Defaults to the first y-axis
-   */
-  yAxisId?: string;
-  /**
-   * Radius of the point.
-   * @default 4
-   */
-  radius?: number;
-  /**
-   * Opacity of the point.
-   */
-  opacity?: number;
-  /**
-   * Handler for when the point is clicked.
-   */
-  onClick?: (
-    event: React.MouseEvent,
-    point: {
-      x: number;
-      y: number;
-      dataX: number;
-      dataY: number;
-    },
-  ) => void;
-  /**
-   * Handler for when the scrubber enters this point.
-   */
-  onScrubberEnter?: (point: { x: number; y: number }) => void;
-  /**
-   * Color of the outer stroke around the point.
-   * @default 'var(--color-bg)'
-   */
-  stroke?: string;
-  /**
-   * Outer stroke width of the point.
-   * Set to  0 to remove the stroke.
-   * @default 2
-   */
-  strokeWidth?: number;
-  /**
-   * Custom class name for the point.
-   */
-  className?: string;
-  /**
-   * Custom styles for the point.
-   */
-  style?: React.CSSProperties;
-  /**
-   * Accessibility label for screen readers to describe the point.
-   * If not provided, a default label will be generated using the data coordinates.
-   */
-  accessibilityLabel?: string;
-  /**
-   * Simple text label to display at the point position.
-   * If provided, a ChartText will be automatically rendered.
-   */
-  label?: ChartTextChildren;
-  /**
-   * Configuration for the automatically rendered label.
-   * Only used when `label` prop is provided.
-   */
-  labelProps?: Omit<ChartTextProps, 'x' | 'y' | 'children'>;
-};
-export type PointProps = SharedProps &
-  PointConfig &
-  Omit<SVGProps<SVGCircleElement>, 'onClick'> & {
-    /**
-     * X coordinate in data space (not pixel coordinates).
-     */
-    dataX: number;
-    /**
-     * Y coordinate in data space (not pixel coordinates).
-     */
-    dataY: number;
-    /**
-     * Coordinates in SVG pixel space.
-     * Overrides dataX and dataY for pixel coordinate calculation.
-     */
-    pixelCoordinates?: {
-      x: number;
-      y: number;
-    };
-    /**
-     * Override the chart's animation setting for this specific point.
-     * When undefined, uses the chart context's animation setting.
-     */
-    animate?: boolean;
-    /**
-     * Custom class names for the component.
-     */
-    classNames?: {
-      /**
-       * Custom class name for the point container element.
-       */
-      container?: string;
-      /**
-       * Custom class name for the inner circle element.
-       */
-      point?: string;
-    };
-    /**
-     * Custom styles for the component.
-     */
-    styles?: {
-      /**
-       * Custom styles for the point container element.
-       */
-      container?: React.CSSProperties;
-      /**
-       * Custom styles for the inner circle element.
-       */
-      point?: React.CSSProperties;
-    };
-  };
-export declare const Point: React.NamedExoticComponent<PointProps>;
-//# sourceMappingURL=Point.d.ts.map

package/dts/chart/Point.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Point.d.ts","sourceRoot":"","sources":["../../src/chart/Point.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAK9D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE1D,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,QAAQ,CAAC;AAqBxD;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,CACR,KAAK,EAAE,KAAK,CAAC,UAAU,EACvB,KAAK,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAC1D,IAAI,CAAC;IACV;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC5D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,cAAc,EAAE,GAAG,GAAG,GAAG,GAAG,UAAU,CAAC,CAAC;CAC3D,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,WAAW,GAClC,WAAW,GACX,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,EAAE,SAAS,CAAC,GAAG;IAC5C;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,gBAAgB,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE;QACX;;WAEG;QACH,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAChC;;WAEG;QACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC7B,CAAC;CACH,CAAC;AAEJ,eAAO,MAAM,KAAK,wCAsKjB,CAAC"}

package/dts/chart/line/GradientLine.d.ts

@@ -1,42 +0,0 @@
-import type { SharedProps } from '@coinbase/cds-common/types';
-import { type PathProps } from '../Path';
-import type { LineComponentProps } from './Line';
-export type GradientLineProps = SharedProps &
-  Omit<PathProps, 'stroke' | 'strokeOpacity' | 'strokeWidth'> &
-  Pick<LineComponentProps, 'strokeWidth'> & {
-    /**
-     * The color of the line.
-     * @default 'var(--color-bgLine)'
-     */
-    stroke?: string;
-    /**
-     * Opacity of the line.
-     * @default 1
-     */
-    strokeOpacity?: number;
-    /**
-     * The color of the start of the gradient.
-     * @default stroke or 'var(--color-bgLine)'
-     */
-    startColor?: string;
-    /**
-     * The color of the end of the gradient.
-     * @default stroke or 'var(--color-bgLine)'
-     */
-    endColor?: string;
-    /**
-     * Opacity of the start color.
-     * @default strokeOpacity
-     */
-    startOpacity?: number;
-    /**
-     * Opacity of the end color.
-     * @default strokeOpacity
-     */
-    endOpacity?: number;
-  };
-/**
- * A gradient line component which uses path element.
- */
-export declare const GradientLine: import('react').NamedExoticComponent<GradientLineProps>;
-//# sourceMappingURL=GradientLine.d.ts.map

package/dts/chart/line/GradientLine.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"GradientLine.d.ts","sourceRoot":"","sources":["../../../src/chart/line/GradientLine.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE9D,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAE/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG,WAAW,GACzC,IAAI,CAAC,SAAS,EAAE,QAAQ,GAAG,eAAe,GAAG,aAAa,CAAC,GAC3D,IAAI,CAAC,kBAAkB,EAAE,aAAa,CAAC,GAAG;IACxC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEJ;;GAEG;AACH,eAAO,MAAM,YAAY,yDAqCxB,CAAC"}