@coinbase/cds-mobile-visualization 3.8.1 → 4.0.0

package/esm/chart/legend/__stories__/Legend.stories.js

@@ -1,574 +0,0 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import { memo, useCallback, useMemo, useState } from 'react';
-import { ScrollView } from 'react-native';
-import { Chip } from '@coinbase/cds-mobile/chips';
-import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { Box, HStack, VStack } from '@coinbase/cds-mobile/layout';
-import { TextLabel1, TextLabel2 } from '@coinbase/cds-mobile/typography';
-import { Canvas, Group, Path as SkiaPath, Skia } from '@shopify/react-native-skia';
-import { XAxis, YAxis } from '../../axis';
-import { BarChart, BarPlot, DefaultBar } from '../../bar';
-import { CartesianChart } from '../../CartesianChart';
-import { LineChart } from '../../line';
-import { Scrubber } from '../../scrubber';
-import { getDottedAreaPath } from '../../utils/path';
-import { DefaultLegendShape } from '../DefaultLegendShape';
-import { Legend } from '../Legend';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const spectrumColors = ['blue40', 'green40', 'orange40', 'yellow40', 'gray40', 'indigo40', 'pink40', 'purple40', 'red40', 'teal40'];
-const shapes = ['pill', 'circle', 'squircle', 'square'];
-const Shapes = () => {
-  const theme = useTheme();
-  return /*#__PURE__*/_jsx(VStack, {
-    gap: 2,
-    children: shapes.map(shape => /*#__PURE__*/_jsx(HStack, {
-      gap: 1,
-      children: spectrumColors.map(color => /*#__PURE__*/_jsx(Box, {
-        style: {
-          width: 10,
-          justifyContent: 'center'
-        },
-        children: /*#__PURE__*/_jsx(DefaultLegendShape, {
-          color: "rgb(" + theme.spectrum[color] + ")",
-          shape: shape
-        })
-      }, color))
-    }, shape))
-  });
-};
-const BasicLegend = () => {
-  const theme = useTheme();
-  const pages = useMemo(() => ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'], []);
-  const pageViews = useMemo(() => [2400, 1398, 9800, 3908, 4800, 3800, 4300], []);
-  const uniqueVisitors = useMemo(() => [4000, 3000, 2000, 2780, 1890, 2390, 3490], []);
-  const numberFormatter = useCallback(value => new Intl.NumberFormat('en-US', {
-    maximumFractionDigits: 0
-  }).format(value), []);
-  const chartAccessibilityLabel = "Website traffic across " + pages.length + " pages showing page views and unique visitors.";
-  return /*#__PURE__*/_jsx(LineChart, {
-    enableScrubbing: true,
-    legend: true,
-    showArea: true,
-    accessibilityLabel: chartAccessibilityLabel,
-    height: 150,
-    legendPosition: "right",
-    series: [{
-      id: 'pageViews',
-      data: pageViews,
-      color: "rgb(" + theme.spectrum.green40 + ")",
-      label: 'Page Views'
-    }, {
-      id: 'uniqueVisitors',
-      data: uniqueVisitors,
-      color: "rgb(" + theme.spectrum.purple40 + ")",
-      label: 'Unique Visitors',
-      areaType: 'dotted'
-    }],
-    width: "100%",
-    xAxis: {
-      data: pages
-    },
-    yAxis: {
-      showGrid: true,
-      tickLabelFormatter: numberFormatter
-    },
-    children: /*#__PURE__*/_jsx(Scrubber, {})
-  });
-};
-const Position = () => {
-  const theme = useTheme();
-  return /*#__PURE__*/_jsxs(CartesianChart, {
-    height: 200,
-    inset: {
-      bottom: 8,
-      left: 0,
-      right: 0,
-      top: 8
-    },
-    legend: /*#__PURE__*/_jsx(Legend, {
-      justifyContent: "flex-end"
-    }),
-    legendPosition: "bottom",
-    series: [{
-      id: 'revenue',
-      label: 'Revenue',
-      data: [455, 520, 380, 455, 285, 235],
-      yAxisId: 'revenue',
-      color: "rgb(" + theme.spectrum.yellow40 + ")",
-      legendShape: 'squircle'
-    }, {
-      id: 'profitMargin',
-      label: 'Profit Margin',
-      data: [23, 20, 16, 38, 12, 9],
-      yAxisId: 'profitMargin',
-      color: theme.color.fgPositive,
-      legendShape: 'squircle'
-    }],
-    width: "100%",
-    xAxis: {
-      data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
-      scaleType: 'band'
-    },
-    yAxis: [{
-      id: 'revenue',
-      domain: {
-        min: 0
-      }
-    }, {
-      id: 'profitMargin',
-      domain: {
-        max: 100,
-        min: 0
-      }
-    }],
-    children: [/*#__PURE__*/_jsx(XAxis, {
-      showLine: true,
-      showTickMarks: true
-    }), /*#__PURE__*/_jsx(YAxis, {
-      showGrid: true,
-      showLine: true,
-      showTickMarks: true,
-      axisId: "revenue",
-      position: "left",
-      requestedTickCount: 5,
-      tickLabelFormatter: value => "$" + value + "k",
-      width: 60
-    }), /*#__PURE__*/_jsx(YAxis, {
-      showLine: true,
-      showTickMarks: true,
-      axisId: "profitMargin",
-      position: "right",
-      requestedTickCount: 5,
-      tickLabelFormatter: value => value + "%"
-    }), /*#__PURE__*/_jsx(BarPlot, {})]
-  });
-};
-const ShapeVariants = () => {
-  const theme = useTheme();
-  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
-  return /*#__PURE__*/_jsx(LineChart, {
-    legend: true,
-    showArea: true,
-    height: 200,
-    legendPosition: "left",
-    series: [{
-      id: 'pill',
-      label: 'Pill',
-      data: [120, 150, 130, 170, 160, 190],
-      color: "rgb(" + theme.spectrum.blue40 + ")",
-      legendShape: 'pill'
-    }, {
-      id: 'circle',
-      label: 'Circle',
-      data: [80, 110, 95, 125, 115, 140],
-      color: "rgb(" + theme.spectrum.green40 + ")",
-      legendShape: 'circle'
-    }, {
-      id: 'square',
-      label: 'Square',
-      data: [60, 85, 70, 100, 90, 115],
-      color: "rgb(" + theme.spectrum.orange40 + ")",
-      legendShape: 'square'
-    }, {
-      id: 'squircle',
-      label: 'Squircle',
-      data: [40, 60, 50, 75, 65, 85],
-      color: "rgb(" + theme.spectrum.purple40 + ")",
-      legendShape: 'squircle'
-    }],
-    width: "100%",
-    xAxis: {
-      data: months
-    },
-    yAxis: {
-      domain: {
-        min: 0
-      },
-      showGrid: true
-    }
-  });
-};
-const DynamicData = () => {
-  var _seriesConfig$0$data$, _seriesConfig$0$data;
-  const theme = useTheme();
-  const [scrubberPosition, setScrubberPosition] = useState();
-  const timeLabels = useMemo(() => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], []);
-  const seriesConfig = useMemo(() => [{
-    id: 'candidate-a',
-    label: 'Candidate A',
-    data: [48, 47, 46, 45, 44, 43, 42, 41, 40, 39, 38, 38],
-    color: "rgb(" + theme.spectrum.blue40 + ")",
-    legendShape: 'circle'
-  }, {
-    id: 'candidate-b',
-    label: 'Candidate B',
-    data: [null, null, null, 6, 10, 14, 18, 22, 26, 29, 32, 35],
-    color: "rgb(" + theme.spectrum.orange40 + ")",
-    legendShape: 'circle'
-  }, {
-    id: 'candidate-c',
-    label: 'Candidate C',
-    data: [52, 53, 54, 49, 46, 43, 40, 37, 34, 32, 30, 27],
-    color: "rgb(" + theme.spectrum.gray40 + ")",
-    legendShape: 'circle'
-  }], [theme.spectrum.blue40, theme.spectrum.gray40, theme.spectrum.orange40]);
-  const dataLength = (_seriesConfig$0$data$ = (_seriesConfig$0$data = seriesConfig[0].data) == null ? void 0 : _seriesConfig$0$data.length) != null ? _seriesConfig$0$data$ : 0;
-  const dataIndex = scrubberPosition != null ? scrubberPosition : dataLength - 1;
-  const chartAccessibilityLabel = "Candidate polling data over " + timeLabels.length + " months showing support percentages for 3 candidates.";
-  const ValueLegendEntry = useCallback(_ref => {
-    var _seriesData$data;
-    let {
-      seriesId,
-      label,
-      color,
-      shape
-    } = _ref;
-    const seriesData = seriesConfig.find(s => s.id === seriesId);
-    const rawValue = seriesData == null || (_seriesData$data = seriesData.data) == null ? void 0 : _seriesData$data[dataIndex];
-    const formattedValue = rawValue === null || rawValue === undefined ? '--' : Math.round(rawValue) + "%";
-    return /*#__PURE__*/_jsxs(HStack, {
-      gap: 1,
-      style: {
-        alignItems: 'center'
-      },
-      children: [/*#__PURE__*/_jsx(DefaultLegendShape, {
-        color: color,
-        shape: shape
-      }), /*#__PURE__*/_jsx(TextLabel2, {
-        children: label
-      }), /*#__PURE__*/_jsx(TextLabel1, {
-        children: formattedValue
-      })]
-    });
-  }, [seriesConfig, dataIndex]);
-  return /*#__PURE__*/_jsx(LineChart, {
-    enableScrubbing: true,
-    showArea: true,
-    accessibilityLabel: chartAccessibilityLabel,
-    height: 250,
-    legend: /*#__PURE__*/_jsx(Legend, {
-      EntryComponent: ValueLegendEntry,
-      justifyContent: "flex-start",
-      paddingX: 2
-    }),
-    legendPosition: "top",
-    onScrubberPositionChange: setScrubberPosition,
-    series: seriesConfig,
-    width: "100%",
-    xAxis: {
-      data: timeLabels
-    },
-    yAxis: {
-      domain: {
-        max: 100,
-        min: 0
-      },
-      showGrid: true,
-      tickLabelFormatter: value => value + "%"
-    },
-    children: /*#__PURE__*/_jsx(Scrubber, {})
-  });
-};
-const Interactive = () => {
-  const theme = useTheme();
-  const [emphasizedId, setEmphasizedId] = useState(null);
-  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-  const seriesConfig = useMemo(() => [{
-    id: 'revenue',
-    label: 'Revenue',
-    data: [120, 150, 180, 165, 190, 210, 240, 220, 260, 280, 310, 350],
-    baseColor: 'blue'
-  }, {
-    id: 'expenses',
-    label: 'Expenses',
-    data: [80, 95, 110, 105, 120, 130, 145, 140, 155, 165, 180, 195],
-    baseColor: 'orange'
-  }, {
-    id: 'profit',
-    label: 'Profit',
-    data: [40, 55, 70, 60, 70, 80, 95, 80, 105, 115, 130, 155],
-    baseColor: 'green'
-  }], []);
-  const handleToggle = useCallback(seriesId => {
-    setEmphasizedId(prev => prev === seriesId ? null : seriesId);
-  }, []);
-  const ChipLegendEntry = /*#__PURE__*/memo(function ChipLegendEntry(_ref2) {
-    var _config$baseColor;
-    let {
-      seriesId,
-      label
-    } = _ref2;
-    const isEmphasized = emphasizedId === seriesId;
-    const config = seriesConfig.find(s => s.id === seriesId);
-    const baseColor = (_config$baseColor = config == null ? void 0 : config.baseColor) != null ? _config$baseColor : 'gray';
-    const color10 = theme.spectrum[baseColor + "10"];
-    const color50 = theme.spectrum[baseColor + "50"];
-    const color90 = theme.spectrum[baseColor + "90"];
-    return /*#__PURE__*/_jsx(Chip, {
-      compact: true,
-      accessibilityLabel: (isEmphasized ? 'Remove emphasis from' : 'Emphasize') + " " + label + " series",
-      background: "transparent",
-      onPress: () => handleToggle(seriesId),
-      style: {
-        backgroundColor: "rgb(" + (isEmphasized ? color90 : color10) + ")",
-        borderWidth: 0,
-        borderRadius: theme.borderRadius[1000]
-      },
-      children: /*#__PURE__*/_jsxs(HStack, {
-        gap: 1,
-        style: {
-          alignItems: 'center'
-        },
-        children: [/*#__PURE__*/_jsx(DefaultLegendShape, {
-          color: "rgb(" + color50 + ")"
-        }), /*#__PURE__*/_jsx(TextLabel2, {
-          color: isEmphasized ? 'bg' : 'fg',
-          children: label
-        })]
-      })
-    });
-  });
-  const series = useMemo(() => {
-    return seriesConfig.map(config => {
-      const isEmphasized = emphasizedId === config.id;
-      const isDimmed = emphasizedId !== null && !isEmphasized;
-      return {
-        id: config.id,
-        label: config.label,
-        data: config.data,
-        color: "rgb(" + theme.spectrum[config.baseColor + "40"] + ")",
-        opacity: isDimmed ? 0.3 : 1
-      };
-    });
-  }, [emphasizedId, seriesConfig, theme]);
-  return /*#__PURE__*/_jsx(LineChart, {
-    showArea: true,
-    height: 300,
-    legend: /*#__PURE__*/_jsx(Legend, {
-      EntryComponent: ChipLegendEntry,
-      gap: 1,
-      paddingTop: 1
-    }),
-    legendPosition: "top",
-    series: series,
-    width: "100%",
-    xAxis: {
-      data: months
-    },
-    yAxis: {
-      domain: {
-        min: 0
-      },
-      showGrid: true,
-      tickLabelFormatter: value => "$" + value + "k"
-    }
-  });
-};
-const Accessible = () => {
-  const theme = useTheme();
-  const months = useMemo(() => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], []);
-  return /*#__PURE__*/_jsx(LineChart, {
-    legend: true,
-    showArea: true,
-    height: 200,
-    legendAccessibilityLabel: "Financial performance chart, legend",
-    legendPosition: "bottom",
-    series: [{
-      id: 'revenue',
-      label: 'Revenue',
-      data: [120, 150, 180, 165, 190, 210],
-      color: "rgb(" + theme.spectrum.green40 + ")"
-    }, {
-      id: 'expenses',
-      label: 'Expenses',
-      data: [80, 95, 110, 105, 120, 130],
-      color: "rgb(" + theme.spectrum.orange40 + ")"
-    }],
-    width: "100%",
-    xAxis: {
-      data: months
-    },
-    yAxis: {
-      domain: {
-        min: 0
-      },
-      showGrid: true
-    }
-  });
-};
-const LegendShapes = () => {
-  const theme = useTheme();
-  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-
-  // Actual revenue (first 9 months)
-  const actualRevenue = [320, 380, 420, 390, 450, 480, 520, 490, 540, null, null, null];
-
-  // Forecasted revenue (last 3 months)
-  const forecastRevenue = [null, null, null, null, null, null, null, null, null, 580, 620, 680];
-  const numberFormatter = useCallback(value => "$" + new Intl.NumberFormat('en-US', {
-    maximumFractionDigits: 0
-  }).format(value) + "k", []);
-
-  // Pattern settings for dotted fill
-  const patternSize = 4;
-  const dotSize = 1;
-
-  // Custom legend indicator that matches the dotted bar pattern
-  const DottedLegendIndicator = useMemo(() => {
-    // Create a small dotted pattern for the legend indicator
-    const indicatorSize = 10;
-    const legendPatternSize = patternSize / 2;
-    const legendDotSize = dotSize / 2;
-    const dottedPath = getDottedAreaPath({
-      x: 1,
-      y: 1,
-      width: indicatorSize - 2,
-      height: indicatorSize - 2
-    }, legendPatternSize, legendDotSize);
-    const skiaPath = Skia.Path.MakeFromSVGString(dottedPath);
-    // Create squircle path for clipping
-    const squirclePath = Skia.Path.Make();
-    squirclePath.addRRect(Skia.RRectXY(Skia.XYWHRect(1, 1, 8, 8), 2, 2));
-    return /*#__PURE__*/_jsxs(Canvas, {
-      style: {
-        width: indicatorSize,
-        height: indicatorSize
-      },
-      children: [/*#__PURE__*/_jsx(Group, {
-        clip: squirclePath,
-        children: skiaPath && /*#__PURE__*/_jsx(SkiaPath, {
-          color: theme.color.fgPositive,
-          path: skiaPath,
-          style: "fill"
-        })
-      }), /*#__PURE__*/_jsx(SkiaPath, {
-        color: theme.color.fgPositive,
-        path: squirclePath,
-        strokeWidth: 2,
-        style: "stroke"
-      })]
-    });
-  }, [theme.color.fgPositive]);
-
-  // Custom bar component that renders bars with dotted pattern fill
-  const DottedBarComponent = useMemo(() => {
-    return /*#__PURE__*/memo(function DottedBar(props) {
-      const {
-        x,
-        y,
-        width,
-        height,
-        fill,
-        d
-      } = props;
-
-      // Generate dotted path for this bar's bounds
-      const dottedPath = useMemo(() => {
-        return getDottedAreaPath({
-          x,
-          y,
-          width,
-          height
-        }, patternSize, dotSize);
-      }, [x, y, width, height]);
-
-      // Create Skia paths
-      const barClipPath = useMemo(() => {
-        var _Skia$Path$MakeFromSV;
-        return d ? (_Skia$Path$MakeFromSV = Skia.Path.MakeFromSVGString(d)) != null ? _Skia$Path$MakeFromSV : undefined : undefined;
-      }, [d]);
-      const dotsSkiaPath = useMemo(() => {
-        var _Skia$Path$MakeFromSV2;
-        return (_Skia$Path$MakeFromSV2 = Skia.Path.MakeFromSVGString(dottedPath)) != null ? _Skia$Path$MakeFromSV2 : undefined;
-      }, [dottedPath]);
-      return /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Group, {
-          clip: barClipPath,
-          children: dotsSkiaPath && /*#__PURE__*/_jsx(SkiaPath, {
-            color: fill,
-            path: dotsSkiaPath,
-            style: "fill"
-          })
-        }), /*#__PURE__*/_jsx(DefaultBar, _extends({}, props, {
-          fill: undefined,
-          stroke: fill,
-          strokeWidth: 2
-        }))]
-      });
-    });
-  }, []);
-  return /*#__PURE__*/_jsx(BarChart, {
-    legend: true,
-    showXAxis: true,
-    showYAxis: true,
-    height: 250,
-    inset: 0,
-    legendPosition: "top",
-    series: [{
-      id: 'actual',
-      label: 'Historical',
-      data: actualRevenue,
-      color: theme.color.fgPositive,
-      legendShape: 'squircle',
-      stackId: 'revenue'
-    }, {
-      id: 'forecast',
-      label: 'Forecasted',
-      data: forecastRevenue,
-      color: theme.color.fgPositive,
-      legendShape: DottedLegendIndicator,
-      stackId: 'revenue',
-      BarComponent: DottedBarComponent
-    }],
-    xAxis: {
-      data: months,
-      scaleType: 'band',
-      showLine: true,
-      showTickMarks: true
-    },
-    yAxis: {
-      domain: {
-        min: 0
-      },
-      showGrid: true,
-      showLine: true,
-      showTickMarks: true,
-      position: 'left',
-      tickLabelFormatter: numberFormatter,
-      width: 60
-    }
-  });
-};
-const LegendStories = () => {
-  return /*#__PURE__*/_jsx(ScrollView, {
-    children: /*#__PURE__*/_jsxs(ExampleScreen, {
-      children: [/*#__PURE__*/_jsx(Example, {
-        title: "Shapes",
-        children: /*#__PURE__*/_jsx(Shapes, {})
-      }), /*#__PURE__*/_jsx(Example, {
-        title: "Basic Legend",
-        children: /*#__PURE__*/_jsx(BasicLegend, {})
-      }), /*#__PURE__*/_jsx(Example, {
-        title: "Position",
-        children: /*#__PURE__*/_jsx(Position, {})
-      }), /*#__PURE__*/_jsx(Example, {
-        title: "Shape Variants",
-        children: /*#__PURE__*/_jsx(ShapeVariants, {})
-      }), /*#__PURE__*/_jsx(Example, {
-        title: "Dynamic Data",
-        children: /*#__PURE__*/_jsx(DynamicData, {})
-      }), /*#__PURE__*/_jsx(Example, {
-        title: "Interactive Legend",
-        children: /*#__PURE__*/_jsx(Interactive, {})
-      }), /*#__PURE__*/_jsx(Example, {
-        title: "Legend Shapes",
-        children: /*#__PURE__*/_jsx(LegendShapes, {})
-      }), /*#__PURE__*/_jsx(Example, {
-        title: "Accessible Legend",
-        children: /*#__PURE__*/_jsx(Accessible, {})
-      })]
-    })
-  });
-};
-export default LegendStories;

package/esm/chart/legend/index.js

@@ -1,3 +0,0 @@
-export * from './DefaultLegendEntry';
-export * from './DefaultLegendShape';
-export * from './Legend';

package/esm/chart/line/DefaultReferenceLineLabel.js

@@ -1,66 +0,0 @@
-const _excluded = ["color", "elevated", "borderRadius", "inset", "boundsInset"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-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 { memo, useMemo } from 'react';
-import { useTheme } from '@coinbase/cds-mobile';
-import { useCartesianChartContext } from '../ChartProvider';
-import { ChartText } from '../text';
-import { getChartInset } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const elevatedInset = {
-  top: 8,
-  bottom: 8,
-  left: 12,
-  right: 12
-};
-const elevatedBorderRadius = 4;
-// Default bounds inset when elevated to prevent shadow clipping
-const elevatedBoundsInset = {
-  top: 4,
-  bottom: 20,
-  left: 12,
-  right: 12
-};
-const nonElevatedBoundsInset = {
-  top: 0,
-  bottom: 0,
-  left: 0,
-  right: 0
-};
-
-/**
- * DefaultReferenceLineLabel is the default label component for ReferenceLine.
- * Provides standard styling with elevation, inset, and color defaults.
- * When elevated, automatically adds bounds to prevent shadow cutoff at chart edges.
- */
-export const DefaultReferenceLineLabel = /*#__PURE__*/memo(_ref => {
-  let {
-      color,
-      elevated,
-      borderRadius = elevated ? elevatedBorderRadius : undefined,
-      inset = elevated ? elevatedInset : undefined,
-      boundsInset: boundsInsetProp
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const theme = useTheme();
-  const {
-    width: chartWidth,
-    height: chartHeight
-  } = useCartesianChartContext();
-  const bounds = useMemo(() => {
-    const boundsInset = getChartInset(boundsInsetProp, elevated ? elevatedBoundsInset : nonElevatedBoundsInset);
-    return {
-      x: boundsInset.left,
-      y: boundsInset.top,
-      width: chartWidth - boundsInset.left - boundsInset.right,
-      height: chartHeight - boundsInset.top - boundsInset.bottom
-    };
-  }, [elevated, boundsInsetProp, chartWidth, chartHeight]);
-  return /*#__PURE__*/_jsx(ChartText, _extends({
-    borderRadius: borderRadius,
-    bounds: bounds,
-    color: color != null ? color : theme.color.fgMuted,
-    elevated: elevated,
-    inset: inset
-  }, props));
-});

package/esm/chart/line/DottedLine.js

@@ -1,57 +0,0 @@
-const _excluded = ["fill", "stroke", "dashIntervals", "strokeCap", "strokeJoin", "strokeOpacity", "strokeWidth", "gradient", "xAxisId", "yAxisId", "d", "animate", "transitions", "transition"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-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 { memo } from 'react';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { DashPathEffect } from '@shopify/react-native-skia';
-import { Gradient } from '../gradient';
-import { Path } from '../Path';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * A customizable dotted line component.
- * Supports gradient for gradient effects on the dots and smooth data transitions via AnimatedPath.
- */
-export const DottedLine = /*#__PURE__*/memo(_ref => {
-  var _transitions$update;
-  let {
-      fill = 'none',
-      stroke,
-      dashIntervals = [0, 4],
-      strokeCap = 'round',
-      strokeJoin = 'round',
-      strokeOpacity = 1,
-      strokeWidth = 2,
-      gradient,
-      xAxisId,
-      yAxisId,
-      d,
-      animate,
-      transitions,
-      transition
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const theme = useTheme();
-  return /*#__PURE__*/_jsxs(Path, _extends({
-    animate: animate,
-    clipOffset: strokeWidth,
-    d: d,
-    fill: fill,
-    stroke: stroke != null ? stroke : theme.color.fgPrimary,
-    strokeCap: strokeCap,
-    strokeJoin: strokeJoin,
-    strokeOpacity: strokeOpacity,
-    strokeWidth: strokeWidth,
-    transition: transition,
-    transitions: transitions
-  }, props, {
-    children: [/*#__PURE__*/_jsx(DashPathEffect, {
-      intervals: dashIntervals
-    }), gradient && /*#__PURE__*/_jsx(Gradient, {
-      animate: animate,
-      gradient: gradient,
-      transition: (_transitions$update = transitions == null ? void 0 : transitions.update) != null ? _transitions$update : transition,
-      xAxisId: xAxisId,
-      yAxisId: yAxisId
-    })]
-  }));
-});