@coinbase/cds-mobile-visualization 3.8.1 → 4.0.0

package/esm/chart/area/DottedArea.js

@@ -1,92 +0,0 @@
-const _excluded = ["d", "fill", "patternSize", "dotSize", "peakOpacity", "baselineOpacity", "xAxisId", "yAxisId", "gradient", "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, useMemo } from 'react';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { Group } from '@shopify/react-native-skia';
-import { useCartesianChartContext } from '../ChartProvider';
-import { Gradient } from '../gradient';
-import { Path } from '../Path';
-import { createGradient, getBaseline } from '../utils';
-import { getDottedAreaPath } from '../utils/path';
-import { defaultTransition, usePathTransition } from '../utils/transition';
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * A customizable dotted area gradient component.
- * When no gradient is provided, renders a default gradient based
- * on the fill color and peak/baseline opacities.
- */
-export const DottedArea = /*#__PURE__*/memo(_ref => {
-  var _transitions$update;
-  let {
-      d,
-      fill: fillProp,
-      patternSize = 4,
-      dotSize = 1,
-      peakOpacity = 1,
-      baselineOpacity = 0,
-      xAxisId,
-      yAxisId,
-      gradient: gradientProp,
-      animate: animateProp,
-      transitions,
-      transition
-    } = _ref,
-    pathProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const theme = useTheme();
-  const {
-    drawingArea,
-    animate,
-    layout,
-    getXAxis,
-    getYAxis
-  } = useCartesianChartContext();
-  const shouldAnimate = animateProp != null ? animateProp : animate;
-  const valueAxisConfig = layout !== 'horizontal' ? getYAxis(yAxisId) : getXAxis(xAxisId);
-  const gradientAxis = layout !== 'horizontal' ? 'y' : 'x';
-  const fill = useMemo(() => fillProp != null ? fillProp : theme.color.fgPrimary, [fillProp, theme.color.fgPrimary]);
-  const updateTransition = useMemo(() => {
-    return (transitions == null ? void 0 : transitions.update) !== undefined ? transitions.update : transition !== undefined ? transition : defaultTransition;
-  }, [transitions == null ? void 0 : transitions.update, transition]);
-  const dottedPath = useMemo(() => {
-    if (!drawingArea) return '';
-    return getDottedAreaPath({
-      x: drawingArea.x,
-      y: drawingArea.y,
-      width: drawingArea.width,
-      height: drawingArea.height
-    }, patternSize, dotSize);
-  }, [drawingArea, patternSize, dotSize]);
-  const clipPath = usePathTransition({
-    currentPath: d,
-    transitions: {
-      update: shouldAnimate ? updateTransition : null
-    }
-  });
-  const gradient = useMemo(() => {
-    if (gradientProp) return gradientProp;
-    if (!valueAxisConfig) return;
-    const baselineValue = getBaseline(valueAxisConfig.domain, valueAxisConfig.baseline);
-    return createGradient(valueAxisConfig.domain, baselineValue, fill, peakOpacity, baselineOpacity, gradientAxis);
-  }, [gradientProp, valueAxisConfig, fill, peakOpacity, baselineOpacity, gradientAxis]);
-
-  // Update transition is used for clip path, we skip update animation on Path itself
-  return /*#__PURE__*/_jsx(Group, {
-    clip: clipPath,
-    children: /*#__PURE__*/_jsx(Path, _extends({
-      animate: shouldAnimate,
-      d: dottedPath,
-      fill: fill,
-      transition: transition,
-      transitions: transitions
-    }, pathProps, {
-      children: gradient && /*#__PURE__*/_jsx(Gradient, {
-        animate: shouldAnimate,
-        gradient: gradient,
-        transition: (_transitions$update = transitions == null ? void 0 : transitions.update) != null ? _transitions$update : transition,
-        xAxisId: xAxisId,
-        yAxisId: yAxisId
-      })
-    }))
-  });
-});

package/esm/chart/area/GradientArea.js

@@ -1,63 +0,0 @@
-const _excluded = ["d", "fill", "fillOpacity", "gradient", "peakOpacity", "baselineOpacity", "xAxisId", "yAxisId", "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, useMemo } from 'react';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { useCartesianChartContext } from '../ChartProvider';
-import { Gradient } from '../gradient';
-import { Path } from '../Path';
-import { createGradient, getBaseline } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * A customizable gradient area component.
- * When no gradient is provided, renders a default gradient based
- * on the fill color and peak/baseline opacities.
- */
-export const GradientArea = /*#__PURE__*/memo(_ref => {
-  var _transitions$update;
-  let {
-      d,
-      fill: fillProp,
-      fillOpacity = 1,
-      gradient: gradientProp,
-      peakOpacity = 0.3,
-      baselineOpacity = 0,
-      xAxisId,
-      yAxisId,
-      animate,
-      transitions,
-      transition
-    } = _ref,
-    pathProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const {
-    layout,
-    getXAxis,
-    getYAxis
-  } = useCartesianChartContext();
-  const theme = useTheme();
-  const valueAxisConfig = layout !== 'horizontal' ? getYAxis(yAxisId) : getXAxis(xAxisId);
-  const gradientAxis = layout !== 'horizontal' ? 'y' : 'x';
-  const fill = useMemo(() => fillProp != null ? fillProp : theme.color.fgPrimary, [fillProp, theme.color.fgPrimary]);
-  const gradient = useMemo(() => {
-    if (gradientProp) return gradientProp;
-    if (!valueAxisConfig) return;
-    const baselineValue = getBaseline(valueAxisConfig.domain, valueAxisConfig.baseline);
-    return createGradient(valueAxisConfig.domain, baselineValue, fill, peakOpacity, baselineOpacity, gradientAxis);
-  }, [gradientProp, valueAxisConfig, fill, peakOpacity, baselineOpacity, gradientAxis]);
-  return /*#__PURE__*/_jsx(Path, _extends({
-    animate: animate,
-    d: d,
-    fill: fill,
-    fillOpacity: fillOpacity,
-    transition: transition,
-    transitions: transitions
-  }, pathProps, {
-    children: 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
-    })
-  }));
-});

package/esm/chart/area/SolidArea.js

@@ -1,45 +0,0 @@
-const _excluded = ["d", "fill", "fillOpacity", "xAxisId", "yAxisId", "animate", "transitions", "transition", "gradient"];
-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 { Gradient } from '../gradient';
-import { Path } from '../Path';
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * A customizable solid area component.
- * When a gradient is provided, renders with gradient fill.
- * Otherwise, renders with solid fill.
- */
-export const SolidArea = /*#__PURE__*/memo(_ref => {
-  var _transitions$update;
-  let {
-      d,
-      fill,
-      fillOpacity = 1,
-      xAxisId,
-      yAxisId,
-      animate,
-      transitions,
-      transition,
-      gradient
-    } = _ref,
-    pathProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const theme = useTheme();
-  return /*#__PURE__*/_jsx(Path, _extends({
-    animate: animate,
-    d: d,
-    fill: fill != null ? fill : theme.color.fgPrimary,
-    fillOpacity: fillOpacity,
-    transition: transition,
-    transitions: transitions
-  }, pathProps, {
-    children: 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
-    })
-  }));
-});

package/esm/chart/area/__stories__/AreaChart.stories.js

@@ -1,370 +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, useState } from 'react';
-import { candles as btcCandles } from '@coinbase/cds-common/internal/data/candles';
-import { Button } from '@coinbase/cds-mobile/buttons/Button';
-import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { Box, VStack } from '@coinbase/cds-mobile/layout';
-import { DefaultReferenceLineLabel, DottedLine, ReferenceLine } from '../../line';
-import { Scrubber } from '../../scrubber/Scrubber';
-import { AreaChart } from '..';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const basicData = [24, 13, 98, 39, 48, 38, 43];
-const baselineThresholdData = [40, 28, 21, 5, 48, 5, 28, 2, 29, 48, 18, 30, 29, 8].map(value => value + 50);
-const BasicExample = () => {
-  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": " + basicData[index], []);
-  return /*#__PURE__*/_jsx(AreaChart, {
-    enableScrubbing: true,
-    showYAxis: true,
-    accessibilityLabel: "Area chart with " + basicData.length + " data points. Swipe to navigate.",
-    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
-    height: 400,
-    series: [{
-      id: 'pageViews',
-      data: basicData
-    }],
-    yAxis: {
-      showGrid: true,
-      domain: {
-        min: 0
-      }
-    },
-    children: /*#__PURE__*/_jsx(Scrubber, {})
-  });
-};
-const currentRewardsData = [100, 150, 200, 280, 380, 500, 650, 820, 1020, 1250, 1510, 1800, 2120, 2470, 2850, 3260, 3700, 4170];
-const potentialRewardsData = [150, 220, 300, 400, 520, 660, 820, 1000, 1200, 1420, 1660, 1920, 2200, 2500, 2820, 3160, 3520, 3900];
-const StackedExample = () => {
-  const theme = useTheme();
-  const getScrubberAccessibilityLabel = useCallback(index => "Point " + (index + 1) + ": current " + currentRewardsData[index] + ", potential " + potentialRewardsData[index], []);
-  return /*#__PURE__*/_jsx(AreaChart, {
-    enableScrubbing: true,
-    showLines: true,
-    stacked: true,
-    accessibilityLabel: "Stacked rewards chart with " + currentRewardsData.length + " data points. Swipe to navigate.",
-    curve: "natural",
-    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
-    height: 256,
-    series: [{
-      id: 'currentRewards',
-      data: currentRewardsData,
-      color: theme.color.fg
-    }, {
-      id: 'potentialRewards',
-      data: potentialRewardsData,
-      color: theme.color.fgPositive,
-      type: 'dotted',
-      LineComponent: props => /*#__PURE__*/_jsx(DottedLine, _extends({}, props, {
-        dashIntervals: [6, 6]
-      }))
-    }],
-    type: "dotted",
-    children: /*#__PURE__*/_jsx(Scrubber, {})
-  });
-};
-const CustomBaselineExample = () => {
-  const theme = useTheme();
-  const candles = [...btcCandles].reverse().slice(0, 180);
-  const prices = candles.map(candle => parseFloat(candle.close));
-  const dates = candles.map(candle => new Date(parseInt(candle.start, 10) * 1000));
-  const startingPrice = prices[0];
-  const formatPrice = useCallback(price => {
-    return "$" + price.toLocaleString('en-US', {
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2
-    });
-  }, []);
-  const formatPriceInThousands = useCallback(price => {
-    return "$" + (price / 1000).toLocaleString('en-US', {
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 0
-    }) + "k";
-  }, []);
-  const formatDate = useCallback(date => {
-    return date.toLocaleDateString('en-US', {
-      month: 'short',
-      day: 'numeric',
-      year: 'numeric'
-    });
-  }, []);
-  const formatLabel = useCallback(dataIndex => formatPrice(prices[dataIndex]) + " " + formatDate(dates[dataIndex]), [dates, formatDate, formatPrice, prices]);
-  const PriceLabel = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(DefaultReferenceLineLabel, _extends({}, props, {
-    background: theme.color.bgSecondary,
-    borderRadius: 12.5,
-    color: theme.color.fg,
-    dx: 12,
-    font: "label1",
-    horizontalAlignment: "left",
-    inset: {
-      top: 4,
-      bottom: 4,
-      left: 8,
-      right: 8
-    }
-  })));
-  const chartAccessibilityLabel = "Bitcoin area chart with custom baseline. Current price: " + formatPrice(prices[prices.length - 1]) + ". Swipe to navigate.";
-  const getScrubberAccessibilityLabel = useCallback(index => formatPrice(prices[index]) + " " + formatDate(dates[index]), [dates, formatDate, formatPrice, prices]);
-  return /*#__PURE__*/_jsxs(AreaChart, {
-    enableScrubbing: true,
-    showLines: true,
-    showYAxis: true,
-    accessibilityLabel: chartAccessibilityLabel,
-    fillOpacity: 0.5,
-    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
-    height: 300,
-    series: [{
-      id: 'prices',
-      data: prices,
-      gradient: {
-        stops: [{
-          offset: startingPrice,
-          color: theme.color.fgNegative
-        }, {
-          offset: startingPrice,
-          color: theme.color.fgPositive
-        }]
-      }
-    }],
-    yAxis: {
-      baseline: startingPrice,
-      showGrid: true,
-      tickLabelFormatter: formatPriceInThousands,
-      domain: {
-        min: 70000,
-        max: 120000
-      },
-      ticks: [80000, 100000, 120000]
-    },
-    children: [/*#__PURE__*/_jsx(Scrubber, {
-      labelElevated: true,
-      label: formatLabel
-    }), /*#__PURE__*/_jsx(ReferenceLine, {
-      LabelComponent: PriceLabel,
-      LineComponent: props => /*#__PURE__*/_jsx(DottedLine, _extends({}, props, {
-        dashIntervals: [0, 16],
-        strokeWidth: 3
-      })),
-      dataY: startingPrice,
-      label: formatPrice(startingPrice),
-      stroke: theme.color.fg
-    })]
-  });
-};
-const AxisBaselineThresholdExample = () => {
-  const theme = useTheme();
-  return /*#__PURE__*/_jsxs(VStack, {
-    gap: 2,
-    children: [/*#__PURE__*/_jsx(AreaChart, {
-      enableScrubbing: true,
-      showLines: true,
-      showYAxis: true,
-      accessibilityLabel: "Area chart with threshold baseline at 30.",
-      getScrubberAccessibilityLabel: index => "Point " + (index + 1) + ": " + baselineThresholdData[index],
-      height: 220,
-      inset: 0,
-      series: [{
-        id: 'axis-baseline-threshold-vertical',
-        data: baselineThresholdData,
-        gradient: {
-          stops: [{
-            offset: 30,
-            color: theme.color.fgNegative
-          }, {
-            offset: 30,
-            color: theme.color.fgPositive
-          }]
-        }
-      }],
-      type: "dotted",
-      yAxis: {
-        showGrid: true,
-        baseline: 30
-      },
-      children: /*#__PURE__*/_jsx(Scrubber, {})
-    }), /*#__PURE__*/_jsx(AreaChart, {
-      enableScrubbing: true,
-      showLines: true,
-      showXAxis: true,
-      accessibilityLabel: "Horizontal area chart with threshold baseline at 30.",
-      getScrubberAccessibilityLabel: index => "Point " + (index + 1) + ": " + baselineThresholdData[index],
-      height: 220,
-      inset: 0,
-      layout: "horizontal",
-      series: [{
-        id: 'axis-baseline-threshold-horizontal',
-        data: baselineThresholdData,
-        gradient: {
-          stops: [{
-            offset: 30,
-            color: theme.color.fgNegative
-          }, {
-            offset: 30,
-            color: theme.color.fgPositive
-          }]
-        }
-      }],
-      type: "dotted",
-      xAxis: {
-        showGrid: true,
-        baseline: 30
-      },
-      children: /*#__PURE__*/_jsx(Scrubber, {})
-    })]
-  });
-};
-
-// Regression repro for CDS-2065. The default baseline is 0; alternating between
-// an all-positive dataset (2 gradient stops) and a negative-crossing dataset
-// (3 gradient stops) causes the Gradient component to swap stop counts between
-// renders. Before the fix this crashed with `ReanimatedError: Positions array
-// must have the same size as colors array`.
-const positiveOnlyData = [10, 25, 15, 40, 30, 50, 35];
-const crossesBaselineData = [-20, 25, -15, 40, -30, 50, 35];
-const BaselineCrossingExample = () => {
-  const [crosses, setCrosses] = useState(false);
-  const data = crosses ? crossesBaselineData : positiveOnlyData;
-  return /*#__PURE__*/_jsxs(VStack, {
-    gap: 2,
-    children: [/*#__PURE__*/_jsx(AreaChart, {
-      showLines: true,
-      showYAxis: true,
-      accessibilityLabel: "Area chart toggling across the y-axis baseline",
-      height: 220,
-      series: [{
-        id: 'flow',
-        data
-      }],
-      type: "gradient",
-      yAxis: {
-        baseline: 0,
-        showGrid: true
-      }
-    }), /*#__PURE__*/_jsx(Box, {
-      paddingX: 2,
-      children: /*#__PURE__*/_jsx(Button, {
-        compact: true,
-        onPress: () => setCrosses(c => !c),
-        variant: "secondary",
-        children: "Toggle baseline crossing"
-      })
-    })]
-  });
-};
-const AreaChartStories = () => {
-  return /*#__PURE__*/_jsxs(ExampleScreen, {
-    children: [/*#__PURE__*/_jsx(Example, {
-      title: "Basic",
-      children: /*#__PURE__*/_jsx(BasicExample, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Stacked",
-      children: /*#__PURE__*/_jsx(StackedExample, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Negative Values",
-      children: /*#__PURE__*/_jsx(AreaChart, {
-        enableScrubbing: true,
-        showLines: true,
-        showYAxis: true,
-        accessibilityLabel: "Area chart with negative values. 7 data points. Swipe to navigate.",
-        getScrubberAccessibilityLabel: index => "Point " + (index + 1) + ": " + [24, 13, -98, 39, 48, 38, 43][index],
-        height: 150,
-        series: [{
-          id: 'pageViews',
-          data: [24, 13, -98, 39, 48, 38, 43]
-        }],
-        type: "gradient",
-        yAxis: {
-          showGrid: true
-        },
-        children: /*#__PURE__*/_jsx(Scrubber, {})
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Baseline Crossing (CDS-2065 repro)",
-      children: /*#__PURE__*/_jsx(BaselineCrossingExample, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Axis Baseline",
-      children: /*#__PURE__*/_jsx(AreaChart, {
-        enableScrubbing: true,
-        showLines: true,
-        showYAxis: true,
-        accessibilityLabel: "Area chart with custom axis baseline at 100.",
-        getScrubberAccessibilityLabel: index => "Point " + (index + 1) + ": " + [112, 97, 121, 103, 129, 118, 94][index],
-        height: 220,
-        series: [{
-          id: 'netFlow',
-          data: [112, 97, 121, 103, 129, 118, 94]
-        }],
-        yAxis: {
-          baseline: 100,
-          domain: {
-            min: 80,
-            max: 140
-          },
-          showGrid: true,
-          tickLabelFormatter: value => "" + value
-        },
-        children: /*#__PURE__*/_jsx(Scrubber, {})
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Axis Baseline Threshold",
-      children: /*#__PURE__*/_jsx(AxisBaselineThresholdExample, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Custom Baseline",
-      children: /*#__PURE__*/_jsx(CustomBaselineExample, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Styles",
-      children: /*#__PURE__*/_jsx(AreaChart, {
-        enableScrubbing: false,
-        height: 350,
-        series: [{
-          id: 'visitors',
-          data: [450, 520, 480, 600, 750, 680, 590],
-          label: 'Weekly Visitors',
-          color: '#fb4d3d',
-          type: 'dotted'
-        }, {
-          id: 'repeatVisitors',
-          data: [250, 200, 150, 140, 100, 80, 50],
-          label: 'Weekly Repeat Visitors',
-          color: '#16a34a'
-        }, {
-          id: 'signups',
-          data: [45, 62, 55, 250, 380, 400, 450],
-          label: 'Weekly Signups',
-          color: '#2563eb',
-          type: 'gradient'
-        }]
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Horizontal Layout",
-      children: /*#__PURE__*/_jsx(AreaChart, {
-        enableScrubbing: true,
-        showLines: true,
-        showXAxis: true,
-        showYAxis: true,
-        accessibilityLabel: "Volume by asset. 5 data points. Swipe to navigate.",
-        getScrubberAccessibilityLabel: index => ['BTC', 'ETH', 'SOL', 'DOGE', 'ADA'][index] + ": " + [68, 54, 43, 29, 18][index] + "%",
-        height: 280,
-        layout: "horizontal",
-        series: [{
-          id: 'volume',
-          data: [68, 54, 43, 29, 18],
-          label: 'Volume'
-        }],
-        type: "gradient",
-        xAxis: {
-          domain: {
-            min: 0,
-            max: 80
-          },
-          tickLabelFormatter: value => value + "%"
-        },
-        yAxis: {
-          data: ['BTC', 'ETH', 'SOL', 'DOGE', 'ADA'],
-          scaleType: 'band'
-        },
-        children: /*#__PURE__*/_jsx(Scrubber, {})
-      })
-    })]
-  });
-};
-export default AreaChartStories;

package/esm/chart/area/index.js

@@ -1,7 +0,0 @@
-// codegen:start {preset: barrel, include: ./*.tsx, exclude: ./__stories__/*.tsx}
-export * from './Area';
-export * from './AreaChart';
-export * from './DottedArea';
-export * from './GradientArea';
-export * from './SolidArea';
-// codegen:end

package/esm/chart/axis/Axis.js

@@ -1,9 +0,0 @@
-import { accessoryFadeTransitionDuration } from '../utils';
-
-/**
- * Animation transition for axis elements (grid lines, tick marks, tick labels).
- * Matches web's axisUpdateAnimationTransition timing.
- */
-export const axisUpdateAnimationTransition = {
-  duration: accessoryFadeTransitionDuration
-};

package/esm/chart/axis/DefaultAxisTickLabel.js

@@ -1,11 +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 } from 'react';
-import { ChartText } from '../text';
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * DefaultAxisTickLabel is the default label component for axis tick labels.
- * Provides standard styling for both X and Y axis tick labels.
- */
-export const DefaultAxisTickLabel = /*#__PURE__*/memo(props => {
-  return /*#__PURE__*/_jsx(ChartText, _extends({}, props));
-});