@coinbase/cds-web-visualization 3.4.0-beta.1 → 3.4.0-beta.11

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"}

package/dts/chart/scrubber/ScrubberBeacon.d.ts

@@ -1,93 +0,0 @@
-import type { SharedProps } from '@coinbase/cds-common/types';
-export type ScrubberBeaconRef = {
-  /**
-   * Triggers a single pulse animation.
-   * Only works when the scrubber is in idle state (not actively scrubbing).
-   */
-  pulse: () => void;
-};
-export type ScrubberBeaconProps = SharedProps & {
-  /**
-   * Optional data X coordinate to position the beacon.
-   * If not provided, uses the scrubber position from context.
-   */
-  dataX?: number;
-  /**
-   * Optional data Y coordinate to position the beacon.
-   * If not provided, looks up the Y value from series data at scrubber position.
-   */
-  dataY?: number;
-  /**
-   * Filter to only show dot for specific series (used for hover-based positioning).
-   */
-  seriesId?: string;
-  /**
-   * Color of the beacon point.
-   * If not provided, uses the series color.
-   */
-  color?: string;
-  /**
-   * Opacity of the beacon.
-   * @default 1
-   */
-  opacity?: number;
-  /**
-   * Pulse the scrubber beacon while it is at rest.
-   */
-  idlePulse?: boolean;
-  /**
-   * Custom className for styling.
-   */
-  className?: string;
-  /**
-   * Custom inline styles.
-   */
-  style?: React.CSSProperties;
-};
-/**
- * The ScrubberBeacon is a special instance of a Point used to mark the scrubber's position on a specific series.
- * It renders a glow effect around the point to highlight the scrubber position.
- */
-export declare const ScrubberBeacon: import('react').MemoExoticComponent<
-  import('react').ForwardRefExoticComponent<
-    SharedProps & {
-      /**
-       * Optional data X coordinate to position the beacon.
-       * If not provided, uses the scrubber position from context.
-       */
-      dataX?: number;
-      /**
-       * Optional data Y coordinate to position the beacon.
-       * If not provided, looks up the Y value from series data at scrubber position.
-       */
-      dataY?: number;
-      /**
-       * Filter to only show dot for specific series (used for hover-based positioning).
-       */
-      seriesId?: string;
-      /**
-       * Color of the beacon point.
-       * If not provided, uses the series color.
-       */
-      color?: string;
-      /**
-       * Opacity of the beacon.
-       * @default 1
-       */
-      opacity?: number;
-      /**
-       * Pulse the scrubber beacon while it is at rest.
-       */
-      idlePulse?: boolean;
-      /**
-       * Custom className for styling.
-       */
-      className?: string;
-      /**
-       * Custom inline styles.
-       */
-      style?: React.CSSProperties;
-    } & import('react').RefAttributes<ScrubberBeaconRef>
-  >
->;
-//# sourceMappingURL=ScrubberBeacon.d.ts.map

package/dts/chart/scrubber/ScrubberBeacon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScrubberBeacon.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/ScrubberBeacon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAiB9D,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;OAGG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAMF,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAAG;IAC9C;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc;IA1CzB;;;OAGG;YACK,MAAM;IACd;;;OAGG;YACK,MAAM;IACd;;OAEG;eACQ,MAAM;IACjB;;;OAGG;YACK,MAAM;IACd;;;OAGG;cACO,MAAM;IAChB;;OAEG;gBACS,OAAO;IACnB;;OAEG;gBACS,MAAM;IAClB;;OAEG;YACK,KAAK,CAAC,aAAa;sDAqM5B,CAAC"}

package/dts/chart/scrubber/ScrubberBeaconLabel.d.ts

@@ -1,7 +0,0 @@
-import { type ChartTextProps } from '../text';
-export type ScrubberBeaconLabelProps = ChartTextProps;
-/**
- * The ScrubberBeaconLabel is a special instance of ChartText used to label a series' scrubber beacon (i.e. a point on the series pinned to the scrubber position).
- */
-export declare const ScrubberBeaconLabel: import('react').NamedExoticComponent<ChartTextProps>;
-//# sourceMappingURL=ScrubberBeaconLabel.d.ts.map

package/dts/chart/scrubber/ScrubberBeaconLabel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScrubberBeaconLabel.d.ts","sourceRoot":"","sources":["../../../src/chart/scrubber/ScrubberBeaconLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzD,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC;AAEtD;;GAEG;AACH,eAAO,MAAM,mBAAmB,sDAsB/B,CAAC"}

package/dts/chart/text/SmartChartTextGroup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SmartChartTextGroup.d.ts","sourceRoot":"","sources":["../../../src/chart/text/SmartChartTextGroup.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,KAAK,iBAAiB,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAErF;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,KAAK,EAAE,iBAAiB,CAAC;IACzB;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,aAAa,GAAG;IAAE,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC;AAEnE,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAC1C,CAAC;AAiBF;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,gEAoM/B,CAAC"}

package/esm/chart/Point.css

@@ -1,2 +0,0 @@
-.cds-containerCss-c137x6qr{outline:none;}
-.cds-innerPointCss-i1qyub1f{border-radius:var(--borderRadius-1000);outline:none;}.cds-innerPointCss-i1qyub1f:focus{outline:none;}.cds-innerPointCss-i1qyub1f:focus-visible{outline:2px solid var(--color-fgPrimary);outline-offset:2px;}

package/esm/chart/scrubber/ScrubberBeacon.js

@@ -1,195 +0,0 @@
-import { forwardRef, memo, useImperativeHandle, useMemo } from 'react';
-import { m as motion, useAnimate } from 'framer-motion';
-import { useCartesianChartContext } from '../ChartProvider';
-import { projectPoint, useScrubberContext } from '../utils';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const pulseTransitionConfig = {
-  duration: 2,
-  repeat: Infinity,
-  ease: 'easeInOut'
-};
-const singlePulseTransitionConfig = {
-  duration: 1,
-  ease: 'easeInOut'
-};
-const radius = 5;
-const glowRadius = 10;
-const pulseRadius = 15;
-/**
- * The ScrubberBeacon is a special instance of a Point used to mark the scrubber's position on a specific series.
- * It renders a glow effect around the point to highlight the scrubber position.
- */
-export const ScrubberBeacon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-  var _ref2;
-  let {
-    seriesId,
-    dataX: dataXProp,
-    dataY: dataYProp,
-    color,
-    testID,
-    idlePulse,
-    opacity = 1,
-    className,
-    style
-  } = _ref;
-  const [scope, animate] = useAnimate();
-  const {
-    getSeries,
-    getXScale,
-    getYScale,
-    getSeriesData,
-    animate: animationEnabled
-  } = useCartesianChartContext();
-  const {
-    scrubberPosition
-  } = useScrubberContext();
-  const targetSeries = getSeries(seriesId);
-  const sourceData = getSeriesData(seriesId);
-  const xScale = getXScale();
-  const yScale = getYScale(targetSeries === null || targetSeries === void 0 ? void 0 : targetSeries.yAxisId);
-  const isIdleState = scrubberPosition === undefined;
-
-  // Expose imperative handle for triggering pulse animations
-  useImperativeHandle(ref, () => ({
-    pulse: () => {
-      // Only pulse when idle
-      if (isIdleState && scope.current) {
-        animate(scope.current, {
-          opacity: [0.1, 0]
-        }, singlePulseTransitionConfig);
-      }
-    }
-  }));
-  const {
-    dataX,
-    dataY
-  } = useMemo(() => {
-    let x;
-    let y;
-    if (xScale && yScale) {
-      if (dataXProp !== undefined && dataYProp !== undefined && !isNaN(dataYProp) && !isNaN(dataXProp)) {
-        // Use direct coordinates if provided
-        x = dataXProp;
-        y = dataYProp;
-      } else if (sourceData && scrubberPosition != null && scrubberPosition >= 0 && scrubberPosition < sourceData.length) {
-        // Use series data at highlight index
-        x = scrubberPosition;
-        const dataValue = sourceData[scrubberPosition];
-        if (typeof dataValue === 'number') {
-          y = dataValue;
-        } else if (Array.isArray(dataValue)) {
-          const validValues = dataValue.filter(val => val !== null);
-          if (validValues.length >= 2) {
-            y = validValues[1];
-          }
-        }
-      }
-    }
-    return {
-      dataX: x,
-      dataY: y
-    };
-  }, [dataXProp, dataYProp, sourceData, scrubberPosition, xScale, yScale]);
-  const pixelCoordinate = useMemo(() => {
-    if (!xScale || !yScale || dataX === undefined || dataY === undefined) {
-      return null;
-    }
-    return projectPoint({
-      x: dataX,
-      y: dataY,
-      xScale,
-      yScale
-    });
-  }, [xScale, yScale, dataX, dataY]);
-  if (!pixelCoordinate) {
-    return null;
-  }
-  const pointColor = (_ref2 = color !== null && color !== void 0 ? color : targetSeries === null || targetSeries === void 0 ? void 0 : targetSeries.color) !== null && _ref2 !== void 0 ? _ref2 : 'var(--color-fgPrimary)';
-  const shouldPulse = animationEnabled && isIdleState && idlePulse;
-  if (animationEnabled && isIdleState) {
-    return /*#__PURE__*/_jsxs("g", {
-      "data-testid": testID,
-      opacity: opacity,
-      children: [/*#__PURE__*/_jsx(motion.circle, {
-        animate: {
-          cx: pixelCoordinate.x,
-          cy: pixelCoordinate.y
-        },
-        cx: pixelCoordinate.x,
-        cy: pixelCoordinate.y,
-        fill: pointColor,
-        initial: false,
-        opacity: 0.15,
-        r: glowRadius,
-        transition: {
-          duration: 0.3,
-          ease: 'easeInOut'
-        }
-      }), /*#__PURE__*/_jsx(motion.g, {
-        animate: {
-          x: pixelCoordinate.x,
-          y: pixelCoordinate.y
-        },
-        initial: false,
-        transition: {
-          duration: 0.3,
-          ease: 'easeInOut'
-        },
-        children: /*#__PURE__*/_jsx(motion.circle, {
-          ref: scope,
-          animate: shouldPulse ? {
-            opacity: [0.1, 0, 0.1],
-            transition: pulseTransitionConfig
-          } : {
-            opacity: 0
-          },
-          cx: 0,
-          cy: 0,
-          fill: pointColor,
-          initial: {
-            opacity: shouldPulse ? 0.1 : 0
-          },
-          r: pulseRadius
-        })
-      }), /*#__PURE__*/_jsx(motion.circle, {
-        animate: {
-          cx: pixelCoordinate.x,
-          cy: pixelCoordinate.y
-        },
-        className: className,
-        cx: pixelCoordinate.x,
-        cy: pixelCoordinate.y,
-        fill: pointColor,
-        initial: false,
-        r: radius,
-        stroke: "var(--color-bg)",
-        strokeWidth: 2,
-        style: style,
-        transition: {
-          duration: 0.3,
-          ease: 'easeInOut'
-        }
-      })]
-    });
-  }
-  return /*#__PURE__*/_jsxs("g", {
-    "data-testid": testID,
-    opacity: opacity,
-    children: [/*#__PURE__*/_jsx("circle", {
-      cx: pixelCoordinate.x,
-      cy: pixelCoordinate.y,
-      fill: pointColor,
-      opacity: 0.15,
-      r: glowRadius
-    }), /*#__PURE__*/_jsx("circle", {
-      className: className,
-      cx: pixelCoordinate.x,
-      cy: pixelCoordinate.y,
-      fill: pointColor,
-      r: radius,
-      stroke: "var(--color-bg)",
-      strokeWidth: 2,
-      style: style
-    })]
-  });
-}));