@coinbase/cds-mobile-visualization 3.8.1 → 4.0.0

package/esm/chart/__stories__/PeriodSelector.stories.js

@@ -1,420 +0,0 @@
-const _excluded = ["label"],
-  _excluded2 = ["label", "font", "hideDot", "style"];
-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; }
-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 { forwardRef, memo, useCallback, useEffect, useMemo, useState } from 'react';
-import { ScrollView, View } from 'react-native';
-import { interpolateColor, runOnJS, useAnimatedReaction, useSharedValue, withSpring } from 'react-native-reanimated';
-import { assets } from '@coinbase/cds-common/internal/data/assets';
-import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
-import { IconButton } from '@coinbase/cds-mobile/buttons';
-import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { Icon } from '@coinbase/cds-mobile/icons';
-import { HStack } from '@coinbase/cds-mobile/layout';
-import { SegmentedTab } from '@coinbase/cds-mobile/tabs/SegmentedTab';
-import { tabsSpringConfig } from '@coinbase/cds-mobile/tabs/Tabs';
-import { Text } from '@coinbase/cds-mobile/typography';
-import { LiveTabLabel, PeriodSelector, PeriodSelectorActiveIndicator } from '../PeriodSelector';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const PeriodSelectorExample = () => {
-  const tabs = [{
-    id: '1H',
-    label: '1H'
-  }, {
-    id: '1D',
-    label: '1D'
-  }, {
-    id: '1W',
-    label: '1W'
-  }, {
-    id: '1M',
-    label: '1M'
-  }, {
-    id: '1Y',
-    label: '1Y'
-  }, {
-    id: 'All',
-    label: 'All'
-  }];
-  const [activeTab, setActiveTab] = useState(tabs[0]);
-  return /*#__PURE__*/_jsx(PeriodSelector, {
-    activeTab: activeTab,
-    onChange: tab => setActiveTab(tab),
-    tabs: tabs
-  });
-};
-const MinWidthPeriodSelectorExample = () => {
-  const tabs = [{
-    id: '1H',
-    label: '1H'
-  }, {
-    id: '1D',
-    label: '1D'
-  }, {
-    id: '1W',
-    label: '1W'
-  }, {
-    id: '1M',
-    label: '1M'
-  }, {
-    id: '1Y',
-    label: '1Y'
-  }, {
-    id: 'All',
-    label: 'All'
-  }];
-  const [activeTab, setActiveTab] = useState(tabs[0]);
-  return /*#__PURE__*/_jsx(PeriodSelector, {
-    activeTab: activeTab,
-    gap: 0.5,
-    onChange: tab => setActiveTab(tab),
-    tabs: tabs,
-    width: "fit-content"
-  });
-};
-const PaddedPeriodSelectorExample = () => {
-  const tabs = [{
-    id: '1W',
-    label: '1W'
-  }, {
-    id: '1M',
-    label: '1M'
-  }, {
-    id: 'YTD',
-    label: 'YTD'
-  }];
-  const [activeTab, setActiveTab] = useState(tabs[0]);
-  return /*#__PURE__*/_jsx(PeriodSelector, {
-    activeTab: activeTab,
-    gap: 2,
-    onChange: tab => setActiveTab(tab),
-    padding: 3,
-    tabs: tabs,
-    width: "fit-content"
-  });
-};
-const LivePeriodSelectorExample = () => {
-  const tabs = useMemo(() => [{
-    id: '1H',
-    label: /*#__PURE__*/_jsx(LiveTabLabel, {})
-  }, {
-    id: '1D',
-    label: '1D'
-  }, {
-    id: '1W',
-    label: '1W'
-  }, {
-    id: '1M',
-    label: '1M'
-  }, {
-    id: '1Y',
-    label: '1Y'
-  }, {
-    id: 'All',
-    label: 'All'
-  }], []);
-  const [activeTab, setActiveTab] = useState(tabs[0]);
-  const isLive = useMemo(() => (activeTab == null ? void 0 : activeTab.id) === '1H', [activeTab]);
-  const activeBackground = useMemo(() => !isLive ? 'bgPrimaryWash' : 'bgNegativeWash', [isLive]);
-  return /*#__PURE__*/_jsx(PeriodSelector, {
-    activeBackground: activeBackground,
-    activeTab: activeTab,
-    onChange: setActiveTab,
-    tabs: tabs
-  });
-};
-const TooManyPeriodsSelectorExample = () => {
-  const tabs = useMemo(() => [{
-    id: '1H',
-    label: /*#__PURE__*/_jsx(LiveTabLabel, {})
-  }, {
-    id: '1D',
-    label: '1D'
-  }, {
-    id: '1W',
-    label: '1W'
-  }, {
-    id: '1M',
-    label: '1M'
-  }, {
-    id: 'YTD',
-    label: 'YTD'
-  }, {
-    id: '1Y',
-    label: '1Y'
-  }, {
-    id: '5Y',
-    label: '5Y'
-  }, {
-    id: 'All',
-    label: 'All'
-  }], []);
-  const [activeTab, setActiveTab] = useState(tabs[0]);
-  const isLive = useMemo(() => (activeTab == null ? void 0 : activeTab.id) === '1H', [activeTab]);
-  const activeBackground = useMemo(() => !isLive ? 'bgPrimaryWash' : 'bgNegativeWash', [isLive]);
-  return /*#__PURE__*/_jsxs(HStack, {
-    alignItems: "center",
-    justifyContent: "space-between",
-    maxWidth: "100%",
-    width: "100%",
-    children: [/*#__PURE__*/_jsx(ScrollView, {
-      horizontal: true,
-      contentContainerStyle: {
-        paddingEnd: 8,
-        flexGrow: 1
-      },
-      showsHorizontalScrollIndicator: false,
-      children: /*#__PURE__*/_jsx(PeriodSelector, {
-        activeBackground: activeBackground,
-        activeTab: activeTab,
-        gap: 1,
-        justifyContent: "flex-start",
-        onChange: setActiveTab,
-        tabs: tabs,
-        width: "fit-content"
-      })
-    }), /*#__PURE__*/_jsx(IconButton, {
-      compact: true,
-      accessibilityLabel: "Configure chart",
-      flexShrink: 0,
-      name: "filter",
-      variant: "secondary"
-    })]
-  });
-};
-const btcColor = assets.btc.color;
-const BTCActiveIndicator = /*#__PURE__*/memo(props => {
-  const theme = useTheme();
-  const {
-    activeTab
-  } = useTabsContext();
-  const isLive = useMemo(() => (activeTab == null ? void 0 : activeTab.id) === '1H', [activeTab]);
-  const backgroundColor = useMemo(() => isLive ? theme.color.bgNegativeWash : btcColor + "1A", [isLive, theme.color.bgNegativeWash]);
-  return /*#__PURE__*/_jsx(PeriodSelectorActiveIndicator, _extends({}, props, {
-    background: backgroundColor
-  }));
-});
-const BTCActiveExcludingLiveIndicator = /*#__PURE__*/memo(props => {
-  const theme = useTheme();
-  const {
-    activeTab
-  } = useTabsContext();
-  const isLive = useMemo(() => (activeTab == null ? void 0 : activeTab.id) === '1H', [activeTab]);
-  const backgroundColor = useMemo(() => isLive ? theme.color.bgNegativeWash : btcColor + "1A", [isLive, theme.color.bgNegativeWash]);
-  return /*#__PURE__*/_jsx(PeriodSelectorActiveIndicator, _extends({}, props, {
-    background: backgroundColor
-  }));
-});
-const BTCTab = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-      label
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const {
-    activeTab
-  } = useTabsContext();
-  const isActive = (activeTab == null ? void 0 : activeTab.id) === props.id;
-  const theme = useTheme();
-
-  // If label is already a React element (like LiveTabLabel), pass it through directly
-  // For string labels, wrap with custom BTC color when active
-  const wrappedLabel = typeof label === 'string' ? /*#__PURE__*/_jsx(Text, {
-    dangerouslySetColor: isActive ? btcColor : theme.color.fg,
-    font: "label1",
-    children: label
-  }) : label;
-  return /*#__PURE__*/_jsx(SegmentedTab, _extends({
-    ref: ref,
-    label: wrappedLabel
-  }, props));
-}));
-const BTCLiveLabel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
-  let {
-      label = 'LIVE',
-      font = 'label1',
-      hideDot,
-      style
-    } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-  const theme = useTheme();
-  const dotStyle = useMemo(() => ({
-    width: theme.space[1],
-    height: theme.space[1],
-    borderRadius: 1000,
-    marginRight: theme.space[0.75],
-    backgroundColor: btcColor
-  }), [theme.space]);
-  return /*#__PURE__*/_jsxs(View, {
-    ref: ref,
-    style: [{
-      flexDirection: 'row',
-      alignItems: 'center'
-    }, style],
-    children: [!hideDot && /*#__PURE__*/_jsx(View, {
-      style: dotStyle
-    }), /*#__PURE__*/_jsx(Text, _extends({
-      font: font,
-      style: {
-        color: btcColor
-      }
-    }, props, {
-      children: label
-    }))]
-  });
-}));
-const ColoredPeriodSelectorExample = () => {
-  const tabs = [{
-    id: '1H',
-    label: /*#__PURE__*/_jsx(BTCLiveLabel, {})
-  }, {
-    id: '1D',
-    label: '1D'
-  }, {
-    id: '1W',
-    label: '1W'
-  }, {
-    id: '1M',
-    label: '1M'
-  }, {
-    id: '1Y',
-    label: '1Y'
-  }, {
-    id: 'All',
-    label: 'All'
-  }];
-  const [activeTab, setActiveTab] = useState(tabs[0]);
-  return /*#__PURE__*/_jsx(PeriodSelector, {
-    TabComponent: BTCTab,
-    TabsActiveIndicatorComponent: BTCActiveIndicator,
-    activeTab: activeTab,
-    onChange: tab => setActiveTab(tab),
-    tabs: tabs
-  });
-};
-const ColoredExcludingLivePeriodSelectorExample = () => {
-  const tabs = [{
-    id: '1H',
-    label: /*#__PURE__*/_jsx(LiveTabLabel, {})
-  }, {
-    id: '1D',
-    label: '1D'
-  }, {
-    id: '1W',
-    label: '1W'
-  }, {
-    id: '1M',
-    label: '1M'
-  }, {
-    id: '1Y',
-    label: '1Y'
-  }, {
-    id: 'All',
-    label: 'All'
-  }];
-  const [activeTab, setActiveTab] = useState(tabs[0]);
-  return /*#__PURE__*/_jsx(PeriodSelector, {
-    TabComponent: BTCTab,
-    TabsActiveIndicatorComponent: BTCActiveExcludingLiveIndicator,
-    activeTab: activeTab,
-    onChange: tab => setActiveTab(tab),
-    tabs: tabs
-  });
-};
-const ColoredIcon = /*#__PURE__*/memo(_ref3 => {
-  let {
-    tabId,
-    name
-  } = _ref3;
-  const {
-    activeTab
-  } = useTabsContext();
-  const isActive = (activeTab == null ? void 0 : activeTab.id) === tabId;
-  const theme = useTheme();
-  const progress = useSharedValue(isActive ? 1 : 0);
-  const [color, setColor] = useState(isActive ? theme.color.fgPrimary : theme.color.fg);
-  useEffect(() => {
-    progress.value = withSpring(isActive ? 1 : 0, tabsSpringConfig);
-  }, [isActive, progress]);
-  useAnimatedReaction(() => interpolateColor(progress.value, [0, 1], [theme.color.fg, theme.color.fgPrimary]), newColor => {
-    runOnJS(setColor)(newColor);
-  });
-  return /*#__PURE__*/_jsx(Icon, {
-    active: true,
-    name: name,
-    size: "s",
-    styles: {
-      icon: {
-        color
-      }
-    }
-  });
-});
-function IconsPeriodSelectorExample() {
-  const theme = useTheme();
-  const tabs = [{
-    id: 'buy',
-    label: /*#__PURE__*/_jsx(ColoredIcon, {
-      name: "chartLine",
-      tabId: "buy"
-    })
-  }, {
-    id: 'sell',
-    label: /*#__PURE__*/_jsx(ColoredIcon, {
-      name: "chartCandles",
-      tabId: "sell"
-    })
-  }, {
-    id: 'convert',
-    label: /*#__PURE__*/_jsx(ColoredIcon, {
-      name: "chartBar",
-      tabId: "convert"
-    })
-  }];
-  const [activeTab, updateActiveTab] = useState(tabs[0]);
-  const handleChange = useCallback(activeTab => updateActiveTab(activeTab), []);
-  return /*#__PURE__*/_jsx(PeriodSelector, {
-    accessibilityLabel: "Switch token action views",
-    activeTab: activeTab,
-    borderRadius: 300,
-    gap: 0.5,
-    onChange: handleChange,
-    padding: 0.5,
-    styles: {
-      activeIndicator: {
-        borderRadius: theme.borderRadius[200]
-      }
-    },
-    tabs: tabs,
-    width: "fit-content"
-  });
-}
-export default function All() {
-  return /*#__PURE__*/_jsxs(ExampleScreen, {
-    children: [/*#__PURE__*/_jsx(Example, {
-      title: "Basic",
-      children: /*#__PURE__*/_jsx(PeriodSelectorExample, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Min Width",
-      children: /*#__PURE__*/_jsx(MinWidthPeriodSelectorExample, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Live Period",
-      children: /*#__PURE__*/_jsx(LivePeriodSelectorExample, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Too Many Periods",
-      children: /*#__PURE__*/_jsx(TooManyPeriodsSelectorExample, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Colored (BTC)",
-      children: /*#__PURE__*/_jsx(ColoredPeriodSelectorExample, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Colored Excluding Live",
-      children: /*#__PURE__*/_jsx(ColoredExcludingLivePeriodSelectorExample, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "With Padding",
-      children: /*#__PURE__*/_jsx(PaddedPeriodSelectorExample, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "With Icons",
-      children: /*#__PURE__*/_jsx(IconsPeriodSelectorExample, {})
-    })]
-  });
-}

package/esm/chart/area/Area.js

@@ -1,85 +0,0 @@
-import React, { memo, useMemo } from 'react';
-import { useCartesianChartContext } from '../ChartProvider';
-import { getAreaPath } from '../utils';
-import { DottedArea } from './DottedArea';
-import { GradientArea } from './GradientArea';
-import { SolidArea } from './SolidArea';
-import { jsx as _jsx } from "react/jsx-runtime";
-export const Area = /*#__PURE__*/memo(_ref => {
-  let {
-    seriesId,
-    curve = 'bump',
-    type = 'solid',
-    AreaComponent: AreaComponentProp,
-    fill: fillProp,
-    fillOpacity = 1,
-    connectNulls,
-    gradient: gradientProp,
-    transitions,
-    transition,
-    animate
-  } = _ref;
-  const {
-    layout,
-    getSeries,
-    getSeriesData,
-    getXScale,
-    getYScale,
-    getXAxis,
-    getYAxis
-  } = useCartesianChartContext();
-  const matchedSeries = useMemo(() => getSeries(seriesId), [seriesId, getSeries]);
-  const gradient = useMemo(() => gradientProp != null ? gradientProp : matchedSeries == null ? void 0 : matchedSeries.gradient, [gradientProp, matchedSeries == null ? void 0 : matchedSeries.gradient]);
-  const fill = useMemo(() => fillProp != null ? fillProp : matchedSeries == null ? void 0 : matchedSeries.color, [fillProp, matchedSeries == null ? void 0 : matchedSeries.color]);
-  const sourceData = useMemo(() => getSeriesData(seriesId), [seriesId, getSeriesData]);
-  const xAxis = getXAxis(matchedSeries == null ? void 0 : matchedSeries.xAxisId);
-  const xScale = getXScale(matchedSeries == null ? void 0 : matchedSeries.xAxisId);
-  const yScale = getYScale(matchedSeries == null ? void 0 : matchedSeries.yAxisId);
-  const yAxis = getYAxis(matchedSeries == null ? void 0 : matchedSeries.yAxisId);
-  const categoryAxisIsX = useMemo(() => {
-    return layout !== 'horizontal';
-  }, [layout]);
-  const categoryAxis = useMemo(() => {
-    return categoryAxisIsX ? xAxis : yAxis;
-  }, [categoryAxisIsX, xAxis, yAxis]);
-  const area = useMemo(() => {
-    if (!sourceData || sourceData.length === 0 || !xScale || !yScale) return '';
-    const indexData = categoryAxis != null && categoryAxis.data && Array.isArray(categoryAxis.data) && typeof categoryAxis.data[0] === 'number' ? categoryAxis.data : undefined;
-    return getAreaPath({
-      data: sourceData,
-      xScale,
-      yScale,
-      curve,
-      xData: categoryAxisIsX ? indexData : undefined,
-      yData: !categoryAxisIsX ? indexData : undefined,
-      connectNulls,
-      layout
-    });
-  }, [sourceData, xScale, yScale, curve, categoryAxis, categoryAxisIsX, connectNulls, layout]);
-  const AreaComponent = useMemo(() => {
-    if (AreaComponentProp) {
-      return AreaComponentProp;
-    }
-    switch (type) {
-      case 'dotted':
-        return DottedArea;
-      case 'gradient':
-        return GradientArea;
-      case 'solid':
-      default:
-        return SolidArea;
-    }
-  }, [AreaComponentProp, type]);
-  if (!xScale || !yScale || !sourceData || !area) return;
-  return /*#__PURE__*/_jsx(AreaComponent, {
-    animate: animate,
-    d: area,
-    fill: fill,
-    fillOpacity: fillOpacity,
-    gradient: gradient,
-    transition: transition,
-    transitions: transitions,
-    xAxisId: matchedSeries == null ? void 0 : matchedSeries.xAxisId,
-    yAxisId: matchedSeries == null ? void 0 : matchedSeries.yAxisId
-  });
-});

package/esm/chart/area/AreaChart.js

@@ -1,152 +0,0 @@
-const _excluded = ["series", "stacked", "AreaComponent", "curve", "fillOpacity", "type", "connectNulls", "transition", "transitions", "LineComponent", "strokeWidth", "showXAxis", "showYAxis", "showLines", "lineType", "xAxis", "yAxis", "inset", "children"],
-  _excluded2 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "baseline", "id"],
-  _excluded3 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "baseline", "id"],
-  _excluded4 = ["id", "data", "label", "color", "xAxisId", "yAxisId", "opacity", "LineComponent", "stackId"],
-  _excluded5 = ["id", "data", "label", "color", "xAxisId", "yAxisId", "fill", "fillOpacity", "stackId", "type"];
-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 { forwardRef, memo, useMemo } from 'react';
-import { XAxis, YAxis } from '../axis';
-import { CartesianChart } from '../CartesianChart';
-import { Line } from '../line/Line';
-import { defaultStackId, withBaselineDomain } from '../utils';
-import { Area } from './Area';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-      series,
-      stacked,
-      AreaComponent,
-      curve,
-      fillOpacity,
-      type,
-      connectNulls,
-      transition,
-      transitions,
-      LineComponent,
-      strokeWidth,
-      showXAxis,
-      showYAxis,
-      showLines,
-      lineType = 'solid',
-      xAxis,
-      yAxis,
-      inset,
-      children
-    } = _ref,
-    chartProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  // Convert AreaSeries to Series for Chart context
-  const chartSeries = useMemo(() => {
-    return series == null ? void 0 : series.map(s => ({
-      id: s.id,
-      data: s.data,
-      label: s.label,
-      color: s.color,
-      gradient: s.gradient,
-      xAxisId: s.xAxisId,
-      yAxisId: s.yAxisId,
-      stackId: s.stackId,
-      legendShape: s.legendShape
-    }));
-  }, [series]);
-  const transformedSeries = useMemo(() => {
-    if (!stacked || !chartSeries) return chartSeries;
-    return chartSeries.map(s => {
-      var _s$stackId;
-      return _extends({}, s, {
-        stackId: (_s$stackId = s.stackId) != null ? _s$stackId : defaultStackId
-      });
-    });
-  }, [chartSeries, stacked]);
-  const seriesToRender = transformedSeries != null ? transformedSeries : chartSeries;
-
-  // Split axis props into config props for Chart and visual props for axis components
-  const _ref2 = xAxis || {},
-    {
-      scaleType: xScaleType,
-      data: xData,
-      categoryPadding: xCategoryPadding,
-      domain: xDomain,
-      domainLimit: xDomainLimit,
-      range: xRange,
-      baseline: xBaseline,
-      id: xAxisId
-    } = _ref2,
-    xAxisVisualProps = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-  const _ref3 = yAxis || {},
-    {
-      scaleType: yScaleType,
-      data: yData,
-      categoryPadding: yCategoryPadding,
-      domain: yDomain,
-      domainLimit: yDomainLimit,
-      range: yRange,
-      baseline: yBaseline,
-      id: yAxisId
-    } = _ref3,
-    yAxisVisualProps = _objectWithoutPropertiesLoose(_ref3, _excluded3);
-  const isHorizontalLayout = chartProps.layout === 'horizontal';
-  const valueAxisBaseline = isHorizontalLayout ? xBaseline : yBaseline;
-  const xAxisConfig = {
-    scaleType: xScaleType,
-    data: xData,
-    categoryPadding: xCategoryPadding,
-    domain: isHorizontalLayout ? withBaselineDomain(xDomain, valueAxisBaseline) : xDomain,
-    domainLimit: xDomainLimit,
-    range: xRange,
-    baseline: xBaseline
-  };
-  const yAxisConfig = {
-    scaleType: yScaleType,
-    data: yData,
-    categoryPadding: yCategoryPadding,
-    domain: !isHorizontalLayout ? withBaselineDomain(yDomain, valueAxisBaseline) : yDomain,
-    domainLimit: yDomainLimit,
-    range: yRange,
-    baseline: yBaseline
-  };
-  return /*#__PURE__*/_jsxs(CartesianChart, _extends({}, chartProps, {
-    ref: ref,
-    inset: inset,
-    series: seriesToRender,
-    xAxis: xAxisConfig,
-    yAxis: yAxisConfig,
-    children: [showXAxis && /*#__PURE__*/_jsx(XAxis, _extends({
-      axisId: xAxisId
-    }, xAxisVisualProps)), showYAxis && /*#__PURE__*/_jsx(YAxis, _extends({
-      axisId: yAxisId
-    }, yAxisVisualProps)), series == null ? void 0 : series.map(_ref4 => {
-      let {
-          id
-        } = _ref4,
-        areaPropsFromSeries = _objectWithoutPropertiesLoose(_ref4, _excluded4);
-      return /*#__PURE__*/_jsx(Area, _extends({
-        AreaComponent: AreaComponent,
-        connectNulls: connectNulls,
-        curve: curve,
-        fillOpacity: fillOpacity,
-        seriesId: id,
-        transition: transition,
-        transitions: transitions,
-        type: type
-      }, areaPropsFromSeries), id);
-    }), showLines && (series == null ? void 0 : series.map(_ref5 => {
-      let {
-          id
-
-          // Area type (don't pass to Line)
-        } = _ref5,
-        otherPropsFromSeries = _objectWithoutPropertiesLoose(_ref5, _excluded5);
-      return /*#__PURE__*/_jsx(Line, _extends({
-        LineComponent: LineComponent,
-        connectNulls: connectNulls,
-        curve: curve,
-        seriesId: id,
-        strokeWidth: strokeWidth,
-        transition: transition,
-        transitions: transitions,
-        type: lineType
-      }, otherPropsFromSeries), id);
-    })), children]
-  }));
-}));