@coinbase/cds-mobile 8.66.1 → 9.0.0-rc.1

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

@@ -0,0 +1,422 @@
+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 '../../../buttons';
+import { Example, ExampleScreen } from '../../../examples/ExampleScreen';
+import { useTheme } from '../../../hooks/useTheme';
+import { Icon } from '../../../icons';
+import { HStack } from '../../../layout';
+import { SegmentedTab } from '../../../tabs/SegmentedTab';
+import { tabsSpringConfig } from '../../../tabs/Tabs';
+import { Text } from '../../../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: null
+  });
+};
+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: null
+  });
+};
+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: null
+      })
+    }), /*#__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, {
+    font: "label1",
+    style: {
+      color: isActive ? btcColor : theme.color.fg
+    },
+    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: null
+  });
+}
+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/visualizations/chart/area/Area.js

@@ -0,0 +1,85 @@
+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/visualizations/chart/area/AreaChart.js

@@ -0,0 +1,153 @@
+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({
+    ref: ref,
+    inset: inset,
+    series: seriesToRender,
+    xAxis: xAxisConfig,
+    yAxis: yAxisConfig
+  }, chartProps, {
+    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]
+  }));
+}));