@nivo/stream - npm Package Compare versions

Comparing version 0.73.0 to 0.74.0

dist/nivo-stream.cjs.js

@@ -5,16 +5,42 @@ 'use strict';
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
+var react = require('react');
 var core = require('@nivo/core');
 var axes = require('@nivo/axes');
 var legends = require('@nivo/legends');
-var react = require('react');
 var web = require('@react-spring/web');
 var tooltip = require('@nivo/tooltip');
 var jsxRuntime = require('react/jsx-runtime');
-var PropTypes = _interopDefault(require('prop-types'));
-var colors = require('@nivo/colors');
 var d3Shape = require('d3-shape');
 var d3Scale = require('d3-scale');
+var colors = require('@nivo/colors');
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+
 function _defineProperty(obj, key, value) {
@@ -68,17 +94,19 @@ if (key in obj) {
       getBorderColor = _ref.getBorderColor,
-      getTooltipLabel = _ref.getTooltipLabel,
-      isInteractive = _ref.isInteractive;
+      isInteractive = _ref.isInteractive,
+      tooltip$1 = _ref.tooltip;
+
   var _useTooltip = tooltip.useTooltip(),
       showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
       hideTooltip = _useTooltip.hideTooltip;
+
   var handleMouseHover = react.useCallback(function (event) {
-    showTooltipFromEvent(jsxRuntime.jsx(tooltip.BasicTooltip, {
-      id: getTooltipLabel(layer),
-      enableChip: true,
-      color: layer.color
+    showTooltipFromEvent(react.createElement(tooltip$1, {
+      layer: layer
     }), event, 'left');
-  }, [showTooltipFromEvent, getTooltipLabel, layer]);
+  }, [showTooltipFromEvent, layer]);
+
   var _useMotionConfig = core.useMotionConfig(),
       animate = _useMotionConfig.animate,
       springConfig = _useMotionConfig.config;
+
   var animatedPath = core.useAnimatedPath(layer.path);
@@ -101,3 +129,2 @@ var animatedProps = web.useSpring({
 };
-var StreamLayer$1 = react.memo(StreamLayer);
 
@@ -109,7 +136,7 @@ var StreamLayers = function StreamLayers(_ref) {
       getBorderColor = _ref.getBorderColor,
-      getTooltipLabel = _ref.getTooltipLabel,
-      isInteractive = _ref.isInteractive;
+      isInteractive = _ref.isInteractive,
+      tooltip = _ref.tooltip;
   return jsxRuntime.jsx("g", {
     children: layers.map(function (layer, i) {
-      return jsxRuntime.jsx(StreamLayer$1, {
+      return jsxRuntime.jsx(StreamLayer, {
         layer: layer,
@@ -119,4 +146,4 @@ getBorderColor: getBorderColor,
         fillOpacity: fillOpacity,
-        getTooltipLabel: getTooltipLabel,
-        isInteractive: isInteractive
+        isInteractive: isInteractive,
+        tooltip: tooltip
       }, i);
@@ -129,2 +156,3 @@ })
   var y = datum.y2;
+
   if (position === 'center') {
@@ -135,8 +163,8 @@ y = datum.y1 + (datum.y2 - datum.y1) / 2;
   }
+
   return y;
 };
+
 var StreamDots = function StreamDots(_ref) {
-  var id = _ref.id,
-      color = _ref.color,
-      data = _ref.data,
+  var data = _ref.data,
       dotComponent = _ref.dotComponent,
@@ -148,35 +176,17 @@ position = _ref.position,
       getBorderColor = _ref.getBorderColor;
-  return data.map(function (d, i) {
-    var datum = _objectSpread2(_objectSpread2({}, d), {}, {
-      key: id,
-      color: color
-    });
-    return react.createElement(dotComponent, {
-      key: i,
-      datum: datum,
-      x: datum.x,
-      y: getDotY(datum, position),
-      size: getSize(datum),
-      color: getColor(datum),
-      borderWidth: getBorderWidth(datum),
-      borderColor: getBorderColor(datum)
-    });
+  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: data.map(function (datum, i) {
+      return react.createElement(dotComponent, {
+        key: i,
+        datum: datum,
+        x: datum.x,
+        y: getDotY(datum, position),
+        size: getSize(datum),
+        color: getColor(datum),
+        borderWidth: getBorderWidth(datum),
+        borderColor: getBorderColor(datum)
+      });
+    })
   });
 };
-StreamDots.propTypes = {
-  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  color: PropTypes.string.isRequired,
-  data: PropTypes.arrayOf(PropTypes.shape({
-    x: PropTypes.number.isRequired,
-    y1: PropTypes.number.isRequired,
-    y2: PropTypes.number.isRequired
-  })).isRequired,
-  dotComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
-  position: PropTypes.oneOf(['start', 'center', 'end']).isRequired,
-  getSize: PropTypes.func.isRequired,
-  getColor: PropTypes.func.isRequired,
-  getBorderWidth: PropTypes.func.isRequired,
-  getBorderColor: PropTypes.func.isRequired
-};
-var StreamDots$1 = react.memo(StreamDots);
 
@@ -239,4 +249,4 @@ function _arrayWithHoles(arr) {
       height = _ref.height,
-      getTooltipLabel = _ref.getTooltipLabel,
-      getTooltipValue = _ref.getTooltipValue;
+      tooltip$1 = _ref.tooltip;
+
   var _useState = react.useState(false),
@@ -246,18 +256,13 @@ _useState2 = _slicedToArray(_useState, 2),
       setIsHover = _useState2[1];
+
   var _useTooltip = tooltip.useTooltip(),
       showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
       hideTooltip = _useTooltip.hideTooltip;
-  var rows = react.useMemo(function () {
-    return slice.stack.map(function (p) {
-      return [jsxRuntime.jsx(tooltip.Chip, {
-        color: p.color
-      }, p.id), getTooltipLabel(p), getTooltipValue(p.value)];
-    });
-  }, [slice, getTooltipLabel, getTooltipValue]);
+
   var handleMouseHover = react.useCallback(function (event) {
     setIsHover(true);
-    showTooltipFromEvent(jsxRuntime.jsx(tooltip.TableTooltip, {
-      rows: rows
+    showTooltipFromEvent(react.createElement(tooltip$1, {
+      slice: slice
     }), event, 'left');
-  }, [setIsHover, showTooltipFromEvent, rows]);
+  }, [setIsHover, showTooltipFromEvent, tooltip$1, slice]);
   var handleMouseLeave = react.useCallback(function () {
@@ -289,3 +294,2 @@ setIsHover(false);
 };
-var StreamSlicesItem$1 = react.memo(StreamSlicesItem);
 
@@ -295,11 +299,9 @@ var StreamSlices = function StreamSlices(_ref) {
       height = _ref.height,
-      getTooltipLabel = _ref.getTooltipLabel,
-      getTooltipValue = _ref.getTooltipValue;
+      tooltip = _ref.tooltip;
   return jsxRuntime.jsx("g", {
     children: slices.map(function (slice) {
-      return jsxRuntime.jsx(StreamSlicesItem$1, {
+      return jsxRuntime.jsx(StreamSlicesItem, {
         slice: slice,
         height: height,
-        getTooltipLabel: getTooltipLabel,
-        getTooltipValue: getTooltipValue
+        tooltip: tooltip
       }, slice.index);
@@ -309,3 +311,2 @@ })
 };
-var StreamSlices$1 = react.memo(StreamSlices);
 
@@ -319,5 +320,7 @@ var StreamDotsItem = function StreamDotsItem(_ref) {
       borderColor = _ref.borderColor;
+
   var _useMotionConfig = core.useMotionConfig(),
       animate = _useMotionConfig.animate,
       springConfig = _useMotionConfig.config;
+
   var animatedProps = web.useSpring({
@@ -340,49 +343,39 @@ x: x,
 };
-var StreamDotsItem$1 = react.memo(StreamDotsItem);
 
-var StreamPropTypes = {
-  data: PropTypes.arrayOf(PropTypes.object).isRequired,
-  keys: PropTypes.array.isRequired,
-  order: core.stackOrderPropType.isRequired,
-  offsetType: core.stackOffsetPropType.isRequired,
-  curve: core.areaCurvePropType.isRequired,
-  axisTop: PropTypes.object,
-  axisRight: PropTypes.object,
-  axisBottom: PropTypes.object,
-  axisLeft: PropTypes.object,
-  enableGridX: PropTypes.bool.isRequired,
-  enableGridY: PropTypes.bool.isRequired,
-  colors: colors.ordinalColorsPropType.isRequired,
-  fillOpacity: PropTypes.number.isRequired,
-  defs: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string.isRequired
-  })).isRequired,
-  fill: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    match: PropTypes.oneOfType([PropTypes.oneOf(['*']), PropTypes.object, PropTypes.func]).isRequired
-  })).isRequired,
-  borderWidth: PropTypes.number.isRequired,
-  borderColor: colors.inheritedColorPropType.isRequired,
-  enableDots: PropTypes.bool.isRequired,
-  dotComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
-  dotPosition: PropTypes.oneOf(['start', 'center', 'end']).isRequired,
-  dotSize: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).isRequired,
-  dotColor: colors.inheritedColorPropType.isRequired,
-  dotBorderWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).isRequired,
-  dotBorderColor: colors.inheritedColorPropType.isRequired,
-  isInteractive: PropTypes.bool,
-  tooltipLabel: PropTypes.func,
-  tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  enableStackTooltip: PropTypes.bool.isRequired,
-  legends: PropTypes.arrayOf(PropTypes.shape(legends.LegendPropShape)).isRequired,
-  role: PropTypes.string.isRequired
+var LayerTooltip = function LayerTooltip(_ref) {
+  var layer = _ref.layer;
+  return jsxRuntime.jsx(tooltip.BasicTooltip, {
+    id: layer.label,
+    enableChip: true,
+    color: layer.color
+  });
 };
-var StreamDefaultProps = {
+
+var StackTooltip = function StackTooltip(_ref) {
+  var slice = _ref.slice;
+  var rows = react.useMemo(function () {
+    return slice.stack.map(function (p) {
+      return [jsxRuntime.jsx(tooltip.Chip, {
+        color: p.color
+      }, p.layerId), p.layerLabel, p.formattedValue];
+    });
+  }, [slice]);
+  return jsxRuntime.jsx(tooltip.TableTooltip, {
+    rows: rows
+  });
+};
+
+var defaultProps = {
+  label: 'id',
   order: 'none',
   offsetType: 'wiggle',
   curve: 'catmullRom',
-  legendLabel: 'id',
   axisBottom: {},
-  enableGridX: true,
-  enableGridY: false,
+  axisLeft: {},
+  enableGridX: false,
+  enableGridY: true,
+  colors: {
+    scheme: 'nivo'
+  },
+  fillOpacity: 1,
   borderWidth: 0,
@@ -393,11 +386,5 @@ borderColor: {
   },
-  colors: {
-    scheme: 'nivo'
-  },
-  fillOpacity: 1,
-  defs: [],
-  fill: [],
   enableDots: false,
   dotPosition: 'center',
-  dotComponent: StreamDotsItem$1,
+  dotComponent: StreamDotsItem,
   dotSize: 6,
@@ -412,39 +399,19 @@ dotColor: {
   isInteractive: true,
+  tooltip: LayerTooltip,
   enableStackTooltip: true,
+  stackTooltip: StackTooltip,
   legends: [],
+  legendLabel: 'id',
+  role: 'application'
+};
+var svgDefaultProps = _objectSpread2(_objectSpread2({}, defaultProps), {}, {
+  layers: ['grid', 'axes', 'layers', 'dots', 'slices', 'legends'],
+  defs: [],
+  fill: [],
+  animate: true,
+  motionConfig: 'default',
   role: 'img',
-  animate: true,
-  motionConfig: 'gentle'
-};
+  isFocusable: false
+});
 
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
-
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
-}
-
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
-
-var stackMin = function stackMin(layers) {
-  return Math.min.apply(Math, _toConsumableArray(layers.reduce(function (acc, layer) {
-    return [].concat(_toConsumableArray(acc), _toConsumableArray(layer.map(function (d) {
-      return d[0];
-    })));
-  }, [])));
-};
-var stackMax = function stackMax(layers) {
-  return Math.max.apply(Math, _toConsumableArray(layers.reduce(function (acc, layer) {
-    return [].concat(_toConsumableArray(acc), _toConsumableArray(layer.map(function (d) {
-      return d[1];
-    })));
-  }, [])));
-};
 var useStream = function useStream(_ref) {
@@ -455,14 +422,24 @@ var width = _ref.width,
       keys = _ref.keys,
-      offsetType = _ref.offsetType,
-      order = _ref.order,
-      curve = _ref.curve,
-      colors$1 = _ref.colors,
-      borderColor = _ref.borderColor,
-      dotSize = _ref.dotSize,
-      dotColor = _ref.dotColor,
-      dotBorderWidth = _ref.dotBorderWidth,
-      dotBorderColor = _ref.dotBorderColor,
-      tooltipLabel = _ref.tooltipLabel,
-      tooltipFormat = _ref.tooltipFormat,
-      legendLabel = _ref.legendLabel;
+      _ref$label = _ref.label,
+      label = _ref$label === void 0 ? defaultProps.label : _ref$label,
+      valueFormat = _ref.valueFormat,
+      _ref$offsetType = _ref.offsetType,
+      offsetType = _ref$offsetType === void 0 ? defaultProps.offsetType : _ref$offsetType,
+      _ref$order = _ref.order,
+      order = _ref$order === void 0 ? defaultProps.order : _ref$order,
+      _ref$curve = _ref.curve,
+      curve = _ref$curve === void 0 ? defaultProps.curve : _ref$curve,
+      _ref$colors = _ref.colors,
+      colors$1 = _ref$colors === void 0 ? defaultProps.colors : _ref$colors,
+      _ref$borderColor = _ref.borderColor,
+      borderColor = _ref$borderColor === void 0 ? defaultProps.borderColor : _ref$borderColor,
+      _ref$dotSize = _ref.dotSize,
+      dotSize = _ref$dotSize === void 0 ? defaultProps.dotSize : _ref$dotSize,
+      _ref$dotColor = _ref.dotColor,
+      dotColor = _ref$dotColor === void 0 ? defaultProps.dotColor : _ref$dotColor,
+      _ref$dotBorderWidth = _ref.dotBorderWidth,
+      dotBorderWidth = _ref$dotBorderWidth === void 0 ? defaultProps.dotBorderWidth : _ref$dotBorderWidth,
+      _ref$dotBorderColor = _ref.dotBorderColor,
+      dotBorderColor = _ref$dotBorderColor === void 0 ? defaultProps.dotBorderColor : _ref$dotBorderColor;
+  var areaCurveFactory = core.useCurveInterpolation(curve);
   var areaGenerator = react.useMemo(function () {
@@ -478,16 +455,22 @@ return d3Shape.area().x(function (_ref2) {
       return y2;
-    }).curve(core.curveFromProp(curve));
-  }, [curve]);
+    }).curve(areaCurveFactory);
+  }, [areaCurveFactory]);
   var stack = react.useMemo(function () {
     return d3Shape.stack().keys(keys).offset(core.stackOffsetFromProp(offsetType)).order(core.stackOrderFromProp(order));
   }, [keys, offsetType, order]);
+
   var _useMemo = react.useMemo(function () {
-    var layers = stack(data);
-    layers.forEach(function (layer) {
-      layer.forEach(function (point) {
-        point.value = point.data[layer.key];
+    var allMin = [];
+    var allMax = [];
+    var layers = stack(data).map(function (layer) {
+      return layer.map(function (point) {
+        allMin.push(point[0]);
+        allMax.push(point[1]);
+        return _objectSpread2(_objectSpread2({}, point), {}, {
+          value: point.data[layer.key]
+        });
       });
     });
-    var minValue = stackMin(layers);
-    var maxValue = stackMax(layers);
+    var minValue = Math.min.apply(Math, allMin);
+    var maxValue = Math.max.apply(Math, allMax);
     return [layers, d3Scale.scalePoint().domain(Array.from({
@@ -503,4 +486,5 @@ length: data.length
       yScale = _useMemo2[2];
+
   var theme = core.useTheme();
-  var getColor = colors.useOrdinalColorScale(colors$1, 'index');
+  var getColor = colors.useOrdinalColorScale(colors$1, 'id');
   var getBorderColor = colors.useInheritedColor(borderColor, theme);
@@ -519,10 +503,15 @@ var getDotSize = react.useMemo(function () {
   var getDotBorderColor = colors.useInheritedColor(dotBorderColor, theme);
-  var getLegendLabel = core.usePropertyAccessor(legendLabel);
+  var getLabel = core.usePropertyAccessor(label);
+  var formatValue = core.useValueFormatter(valueFormat);
   var enhancedLayers = react.useMemo(function () {
     return layers.map(function (points, layerIndex) {
-      var layer = points.map(function (point, i) {
+      var computedPoints = points.map(function (point, i) {
         return {
+          layerId: keys[layerIndex],
+          layerLabel: '',
           index: i,
+          color: '',
           x: xScale(i),
           value: point.value,
+          formattedValue: formatValue(point.value),
           y1: yScale(point[0]),
@@ -532,16 +521,21 @@ y2: yScale(point[1])
       });
-      var id = keys[layerIndex];
-      return {
-        id: id,
-        layer: layer,
-        label: getLegendLabel({
-          id: id
-        }),
-        path: areaGenerator(layer),
-        color: getColor({
-          index: layerIndex
+      var layer = {
+        id: keys[layerIndex],
+        path: areaGenerator(computedPoints)
+      };
+
+      var layerWithComputedProperties = _objectSpread2(_objectSpread2({}, layer), {}, {
+        label: getLabel(layer),
+        color: getColor(layer)
+      });
+
+      return _objectSpread2(_objectSpread2({}, layerWithComputedProperties), {}, {
+        data: computedPoints.map(function (point) {
+          point.layerLabel = layerWithComputedProperties.label;
+          point.color = layerWithComputedProperties.color;
+          return point;
         })
-      };
+      });
     });
-  }, [layers, keys, getLegendLabel, areaGenerator, getColor, xScale, yScale]);
+  }, [layers, keys, getLabel, areaGenerator, getColor, xScale, yScale, formatValue]);
   var slices = react.useMemo(function () {
@@ -552,6 +546,3 @@ return Array.from({
       var sliceStack = enhancedLayers.map(function (layer) {
-        return _objectSpread2({
-          id: layer.id,
-          color: layer.color
-        }, layer.layer[i]);
+        return layer.data[i];
       }).sort(function (a, b) {
@@ -562,3 +553,3 @@ return a.y2 - b.y2;
         index: i,
-        x: enhancedLayers[0].layer[i].x,
+        x: enhancedLayers[0].data[i].x,
         stack: sliceStack
@@ -568,9 +559,10 @@ };
   }, [data.length, enhancedLayers]);
-  var getTooltipLabel = react.useMemo(function () {
-    if (typeof tooltipLabel === 'function') return tooltipLabel;
-    return function (d) {
-      return d.id;
+  var layerContext = react.useMemo(function () {
+    return {
+      xScale: xScale,
+      yScale: yScale,
+      layers: enhancedLayers,
+      slices: slices
     };
-  }, [tooltipLabel]);
-  var getTooltipValue = core.useValueFormatter(tooltipFormat);
+  }, [xScale, yScale, enhancedLayers, slices]);
   return {
@@ -586,14 +578,16 @@ xScale: xScale,
     getDotBorderColor: getDotBorderColor,
-    getTooltipLabel: getTooltipLabel,
-    getTooltipValue: getTooltipValue
+    layerContext: layerContext
   };
 };
 
-var Stream = function Stream(_ref) {
+var InnerStream = function InnerStream(_ref) {
   var data = _ref.data,
       keys = _ref.keys,
+      label = _ref.label,
+      valueFormat = _ref.valueFormat,
       offsetType = _ref.offsetType,
       order = _ref.order,
       curve = _ref.curve,
-      legendLabel = _ref.legendLabel,
+      _ref$layers = _ref.layers,
+      chartLayers = _ref$layers === void 0 ? svgDefaultProps.layers : _ref$layers,
       width = _ref.width,
@@ -604,15 +598,26 @@ height = _ref.height,
       axisRight = _ref.axisRight,
-      axisBottom = _ref.axisBottom,
-      axisLeft = _ref.axisLeft,
-      enableGridX = _ref.enableGridX,
-      enableGridY = _ref.enableGridY,
+      _ref$axisBottom = _ref.axisBottom,
+      axisBottom = _ref$axisBottom === void 0 ? svgDefaultProps.axisBottom : _ref$axisBottom,
+      _ref$axisLeft = _ref.axisLeft,
+      axisLeft = _ref$axisLeft === void 0 ? svgDefaultProps.axisLeft : _ref$axisLeft,
+      _ref$enableGridX = _ref.enableGridX,
+      enableGridX = _ref$enableGridX === void 0 ? svgDefaultProps.enableGridX : _ref$enableGridX,
+      _ref$enableGridY = _ref.enableGridY,
+      enableGridY = _ref$enableGridY === void 0 ? svgDefaultProps.enableGridY : _ref$enableGridY,
       colors = _ref.colors,
-      fillOpacity = _ref.fillOpacity,
-      borderWidth = _ref.borderWidth,
+      _ref$fillOpacity = _ref.fillOpacity,
+      fillOpacity = _ref$fillOpacity === void 0 ? svgDefaultProps.fillOpacity : _ref$fillOpacity,
+      _ref$borderWidth = _ref.borderWidth,
+      borderWidth = _ref$borderWidth === void 0 ? svgDefaultProps.borderWidth : _ref$borderWidth,
       borderColor = _ref.borderColor,
-      defs = _ref.defs,
-      fill = _ref.fill,
-      enableDots = _ref.enableDots,
-      dotPosition = _ref.dotPosition,
-      dotComponent = _ref.dotComponent,
+      _ref$defs = _ref.defs,
+      defs = _ref$defs === void 0 ? svgDefaultProps.defs : _ref$defs,
+      _ref$fill = _ref.fill,
+      fill = _ref$fill === void 0 ? svgDefaultProps.fill : _ref$fill,
+      _ref$enableDots = _ref.enableDots,
+      enableDots = _ref$enableDots === void 0 ? svgDefaultProps.enableDots : _ref$enableDots,
+      _ref$dotPosition = _ref.dotPosition,
+      dotPosition = _ref$dotPosition === void 0 ? svgDefaultProps.dotPosition : _ref$dotPosition,
+      _ref$dotComponent = _ref.dotComponent,
+      dotComponent = _ref$dotComponent === void 0 ? svgDefaultProps.dotComponent : _ref$dotComponent,
       dotSize = _ref.dotSize,
@@ -622,8 +627,17 @@ dotColor = _ref.dotColor,
       dotBorderColor = _ref.dotBorderColor,
-      isInteractive = _ref.isInteractive,
-      tooltipLabel = _ref.tooltipLabel,
-      tooltipFormat = _ref.tooltipFormat,
-      enableStackTooltip = _ref.enableStackTooltip,
-      legends$1 = _ref.legends,
-      role = _ref.role;
+      _ref$isInteractive = _ref.isInteractive,
+      isInteractive = _ref$isInteractive === void 0 ? svgDefaultProps.isInteractive : _ref$isInteractive,
+      _ref$tooltip = _ref.tooltip,
+      tooltip = _ref$tooltip === void 0 ? svgDefaultProps.tooltip : _ref$tooltip,
+      _ref$enableStackToolt = _ref.enableStackTooltip,
+      enableStackTooltip = _ref$enableStackToolt === void 0 ? svgDefaultProps.enableStackTooltip : _ref$enableStackToolt,
+      _ref$stackTooltip = _ref.stackTooltip,
+      stackTooltip = _ref$stackTooltip === void 0 ? svgDefaultProps.stackTooltip : _ref$stackTooltip,
+      _ref$legends = _ref.legends,
+      legends$1 = _ref$legends === void 0 ? svgDefaultProps.legends : _ref$legends,
+      role = _ref.role,
+      ariaLabel = _ref.ariaLabel,
+      ariaLabelledBy = _ref.ariaLabelledBy,
+      ariaDescribedBy = _ref.ariaDescribedBy;
+
   var _useDimensions = core.useDimensions(width, height, partialMargin),
@@ -635,2 +649,3 @@ margin = _useDimensions.margin,
       outerHeight = _useDimensions.outerHeight;
+
   var _useStream = useStream({
@@ -641,2 +656,4 @@ width: innerWidth,
     keys: keys,
+    label: label,
+    valueFormat: valueFormat,
     offsetType: offsetType,
@@ -650,6 +667,3 @@ order: order,
     dotBorderWidth: dotBorderWidth,
-    dotBorderColor: dotBorderColor,
-    tooltipLabel: tooltipLabel,
-    tooltipFormat: tooltipFormat,
-    legendLabel: legendLabel
+    dotBorderColor: dotBorderColor
   }),
@@ -665,12 +679,16 @@ xScale = _useStream.xScale,
       getDotBorderColor = _useStream.getDotBorderColor,
-      getTooltipLabel = _useStream.getTooltipLabel,
-      getTooltipValue = _useStream.getTooltipValue;
+      layerContext = _useStream.layerContext;
+
   var boundDefs = core.bindDefs(defs, layers, fill);
-  return jsxRuntime.jsxs(core.SvgWrapper, {
-    width: outerWidth,
-    height: outerHeight,
-    margin: margin,
-    defs: boundDefs,
-    role: role,
-    children: [jsxRuntime.jsx(axes.Grid, {
+  var layerById = {
+    grid: null,
+    axes: null,
+    layers: null,
+    dots: null,
+    slices: null,
+    legends: null
+  };
+
+  if (chartLayers.includes('grid')) {
+    layerById.grid = jsxRuntime.jsx(axes.Grid, {
       width: innerWidth,
@@ -680,10 +698,7 @@ height: innerHeight,
       yScale: enableGridY ? yScale : null
-    }), jsxRuntime.jsx(StreamLayers, {
-      layers: layers,
-      fillOpacity: fillOpacity,
-      borderWidth: borderWidth,
-      getBorderColor: getBorderColor,
-      getTooltipLabel: getTooltipLabel,
-      isInteractive: isInteractive
-    }), jsxRuntime.jsx(axes.Axes, {
+    }, "grid");
+  }
+
+  if (chartLayers.includes('axes')) {
+    layerById.axes = jsxRuntime.jsx(axes.Axes, {
       xScale: xScale,
@@ -697,39 +712,108 @@ yScale: yScale,
       left: axisLeft
-    }), enableDots && layers.map(function (layer) {
-      return jsxRuntime.jsx(StreamDots$1, {
-        id: layer.id,
-        color: layer.color,
-        data: layer.layer,
-        dotComponent: dotComponent,
-        position: dotPosition,
-        getSize: getDotSize,
-        getColor: getDotColor,
-        getBorderWidth: getDotBorderWidth,
-        getBorderColor: getDotBorderColor
-      }, layer.id);
-    }), isInteractive && enableStackTooltip && jsxRuntime.jsx(StreamSlices$1, {
+    }, "axes");
+  }
+
+  if (chartLayers.includes('layers')) {
+    layerById.layers = jsxRuntime.jsx(StreamLayers, {
+      layers: layers,
+      fillOpacity: fillOpacity,
+      borderWidth: borderWidth,
+      getBorderColor: getBorderColor,
+      isInteractive: isInteractive,
+      tooltip: tooltip
+    }, "layers");
+  }
+
+  if (chartLayers.includes('dots') && enableDots) {
+    layerById.dots = jsxRuntime.jsx(react.Fragment, {
+      children: layers.map(function (layer) {
+        return jsxRuntime.jsx(StreamDots, {
+          id: layer.id,
+          color: layer.color,
+          data: layer.data,
+          dotComponent: dotComponent,
+          position: dotPosition,
+          getSize: getDotSize,
+          getColor: getDotColor,
+          getBorderWidth: getDotBorderWidth,
+          getBorderColor: getDotBorderColor
+        }, layer.id);
+      })
+    }, "dots");
+  }
+
+  if (chartLayers.includes('slices') && isInteractive && enableStackTooltip) {
+    layerById.slices = jsxRuntime.jsx(StreamSlices, {
       slices: slices,
       height: innerHeight,
-      getTooltipValue: getTooltipValue,
-      getTooltipLabel: getTooltipLabel
-    }), legends$1.map(function (legend, i) {
-      var legendData = layers.map(function (l) {
-        return {
-          id: l.id,
-          label: l.label,
-          color: l.color,
-          fill: l.fill
-        };
-      }).reverse();
-      return jsxRuntime.jsx(legends.BoxLegendSvg, _objectSpread2(_objectSpread2({}, legend), {}, {
-        containerWidth: innerWidth,
-        containerHeight: innerHeight,
-        data: legendData
-      }), i);
-    })]
+      tooltip: stackTooltip
+    }, "slices");
+  }
+
+  if (chartLayers.includes('legends')) {
+    layerById.legends = jsxRuntime.jsx(react.Fragment, {
+      children: legends$1.map(function (legend, i) {
+        var legendData = layers.map(function (layer) {
+          return {
+            id: layer.id,
+            label: layer.label,
+            color: layer.color,
+            fill: layer.fill
+          };
+        }).reverse();
+        return jsxRuntime.jsx(legends.BoxLegendSvg, _objectSpread2(_objectSpread2({}, legend), {}, {
+          containerWidth: innerWidth,
+          containerHeight: innerHeight,
+          data: legendData
+        }), i);
+      })
+    }, "legends");
+  }
+
+  return jsxRuntime.jsx(core.SvgWrapper, {
+    width: outerWidth,
+    height: outerHeight,
+    margin: margin,
+    defs: boundDefs,
+    role: role,
+    ariaLabel: ariaLabel,
+    ariaLabelledBy: ariaLabelledBy,
+    ariaDescribedBy: ariaDescribedBy,
+    children: chartLayers.map(function (layer, i) {
+      var _layerById$layer;
+
+      if (typeof layer === 'function') {
+        return jsxRuntime.jsx(react.Fragment, {
+          children: react.createElement(layer, layerContext)
+        }, i);
+      }
+
+      return (_layerById$layer = layerById === null || layerById === void 0 ? void 0 : layerById[layer]) !== null && _layerById$layer !== void 0 ? _layerById$layer : null;
+    })
   });
 };
-var WrappedStream = core.withContainer(Stream);
-WrappedStream.defaultProps = StreamDefaultProps;
 
+var Stream = function Stream(_ref2) {
+  var _ref2$isInteractive = _ref2.isInteractive,
+      isInteractive = _ref2$isInteractive === void 0 ? svgDefaultProps.isInteractive : _ref2$isInteractive,
+      _ref2$animate = _ref2.animate,
+      animate = _ref2$animate === void 0 ? svgDefaultProps.animate : _ref2$animate,
+      _ref2$motionConfig = _ref2.motionConfig,
+      motionConfig = _ref2$motionConfig === void 0 ? svgDefaultProps.motionConfig : _ref2$motionConfig,
+      theme = _ref2.theme,
+      renderWrapper = _ref2.renderWrapper,
+      otherProps = _objectWithoutProperties(_ref2, ["isInteractive", "animate", "motionConfig", "theme", "renderWrapper"]);
+
+  return jsxRuntime.jsx(core.Container, {
+    animate: animate,
+    isInteractive: isInteractive,
+    motionConfig: motionConfig,
+    renderWrapper: renderWrapper,
+    theme: theme,
+    children: jsxRuntime.jsx(InnerStream, _objectSpread2({
+      isInteractive: isInteractive
+    }, otherProps))
+  });
+};
+
 var ResponsiveStream = function ResponsiveStream(props) {
@@ -740,3 +824,3 @@ return jsxRuntime.jsx(core.ResponsiveWrapper, {
           height = _ref.height;
-      return jsxRuntime.jsx(WrappedStream, _objectSpread2({
+      return jsxRuntime.jsx(Stream, _objectSpread2({
         width: width,
@@ -750,5 +834,5 @@ height: height
 exports.ResponsiveStream = ResponsiveStream;
-exports.Stream = WrappedStream;
-exports.StreamDefaultProps = StreamDefaultProps;
-exports.StreamPropTypes = StreamPropTypes;
+exports.Stream = Stream;
+exports.defaultProps = defaultProps;
+exports.svgDefaultProps = svgDefaultProps;
 //# sourceMappingURL=nivo-stream.cjs.js.map

dist/nivo-stream.es.js

@@ -1,13 +0,41 @@
-import { useMotionConfig, useAnimatedPath, stackOrderPropType, stackOffsetPropType, areaCurvePropType, curveFromProp, stackOffsetFromProp, stackOrderFromProp, useTheme, usePropertyAccessor, useValueFormatter, withContainer, useDimensions, bindDefs, SvgWrapper, ResponsiveWrapper } from '@nivo/core';
+import { useCallback, createElement, useState, useMemo, Fragment as Fragment$1 } from 'react';
+import { useMotionConfig, useAnimatedPath, useCurveInterpolation, stackOffsetFromProp, stackOrderFromProp, useTheme, usePropertyAccessor, useValueFormatter, Container, useDimensions, bindDefs, SvgWrapper, ResponsiveWrapper } from '@nivo/core';
 import { Grid, Axes } from '@nivo/axes';
-import { LegendPropShape, BoxLegendSvg } from '@nivo/legends';
-import { memo, useCallback, createElement, useState, useMemo } from 'react';
+import { BoxLegendSvg } from '@nivo/legends';
 import { useSpring, animated } from '@react-spring/web';
 import { useTooltip, BasicTooltip, Chip, TableTooltip } from '@nivo/tooltip';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import PropTypes from 'prop-types';
-import { ordinalColorsPropType, inheritedColorPropType, useOrdinalColorScale, useInheritedColor } from '@nivo/colors';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { area, stack } from 'd3-shape';
 import { scalePoint, scaleLinear } from 'd3-scale';
+import { useOrdinalColorScale, useInheritedColor } from '@nivo/colors';
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+
 function _defineProperty(obj, key, value) {
@@ -61,17 +89,19 @@ if (key in obj) {
       getBorderColor = _ref.getBorderColor,
-      getTooltipLabel = _ref.getTooltipLabel,
-      isInteractive = _ref.isInteractive;
+      isInteractive = _ref.isInteractive,
+      tooltip = _ref.tooltip;
+
   var _useTooltip = useTooltip(),
       showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
       hideTooltip = _useTooltip.hideTooltip;
+
   var handleMouseHover = useCallback(function (event) {
-    showTooltipFromEvent(jsx(BasicTooltip, {
-      id: getTooltipLabel(layer),
-      enableChip: true,
-      color: layer.color
+    showTooltipFromEvent(createElement(tooltip, {
+      layer: layer
     }), event, 'left');
-  }, [showTooltipFromEvent, getTooltipLabel, layer]);
+  }, [showTooltipFromEvent, layer]);
+
   var _useMotionConfig = useMotionConfig(),
       animate = _useMotionConfig.animate,
       springConfig = _useMotionConfig.config;
+
   var animatedPath = useAnimatedPath(layer.path);
@@ -94,3 +124,2 @@ var animatedProps = useSpring({
 };
-var StreamLayer$1 = memo(StreamLayer);
 
@@ -102,7 +131,7 @@ var StreamLayers = function StreamLayers(_ref) {
       getBorderColor = _ref.getBorderColor,
-      getTooltipLabel = _ref.getTooltipLabel,
-      isInteractive = _ref.isInteractive;
+      isInteractive = _ref.isInteractive,
+      tooltip = _ref.tooltip;
   return jsx("g", {
     children: layers.map(function (layer, i) {
-      return jsx(StreamLayer$1, {
+      return jsx(StreamLayer, {
         layer: layer,
@@ -112,4 +141,4 @@ getBorderColor: getBorderColor,
         fillOpacity: fillOpacity,
-        getTooltipLabel: getTooltipLabel,
-        isInteractive: isInteractive
+        isInteractive: isInteractive,
+        tooltip: tooltip
       }, i);
@@ -122,2 +151,3 @@ })
   var y = datum.y2;
+
   if (position === 'center') {
@@ -128,8 +158,8 @@ y = datum.y1 + (datum.y2 - datum.y1) / 2;
   }
+
   return y;
 };
+
 var StreamDots = function StreamDots(_ref) {
-  var id = _ref.id,
-      color = _ref.color,
-      data = _ref.data,
+  var data = _ref.data,
       dotComponent = _ref.dotComponent,
@@ -141,35 +171,17 @@ position = _ref.position,
       getBorderColor = _ref.getBorderColor;
-  return data.map(function (d, i) {
-    var datum = _objectSpread2(_objectSpread2({}, d), {}, {
-      key: id,
-      color: color
-    });
-    return createElement(dotComponent, {
-      key: i,
-      datum: datum,
-      x: datum.x,
-      y: getDotY(datum, position),
-      size: getSize(datum),
-      color: getColor(datum),
-      borderWidth: getBorderWidth(datum),
-      borderColor: getBorderColor(datum)
-    });
+  return jsx(Fragment, {
+    children: data.map(function (datum, i) {
+      return createElement(dotComponent, {
+        key: i,
+        datum: datum,
+        x: datum.x,
+        y: getDotY(datum, position),
+        size: getSize(datum),
+        color: getColor(datum),
+        borderWidth: getBorderWidth(datum),
+        borderColor: getBorderColor(datum)
+      });
+    })
   });
 };
-StreamDots.propTypes = {
-  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  color: PropTypes.string.isRequired,
-  data: PropTypes.arrayOf(PropTypes.shape({
-    x: PropTypes.number.isRequired,
-    y1: PropTypes.number.isRequired,
-    y2: PropTypes.number.isRequired
-  })).isRequired,
-  dotComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
-  position: PropTypes.oneOf(['start', 'center', 'end']).isRequired,
-  getSize: PropTypes.func.isRequired,
-  getColor: PropTypes.func.isRequired,
-  getBorderWidth: PropTypes.func.isRequired,
-  getBorderColor: PropTypes.func.isRequired
-};
-var StreamDots$1 = memo(StreamDots);
 
@@ -232,4 +244,4 @@ function _arrayWithHoles(arr) {
       height = _ref.height,
-      getTooltipLabel = _ref.getTooltipLabel,
-      getTooltipValue = _ref.getTooltipValue;
+      tooltip = _ref.tooltip;
+
   var _useState = useState(false),
@@ -239,18 +251,13 @@ _useState2 = _slicedToArray(_useState, 2),
       setIsHover = _useState2[1];
+
   var _useTooltip = useTooltip(),
       showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
       hideTooltip = _useTooltip.hideTooltip;
-  var rows = useMemo(function () {
-    return slice.stack.map(function (p) {
-      return [jsx(Chip, {
-        color: p.color
-      }, p.id), getTooltipLabel(p), getTooltipValue(p.value)];
-    });
-  }, [slice, getTooltipLabel, getTooltipValue]);
+
   var handleMouseHover = useCallback(function (event) {
     setIsHover(true);
-    showTooltipFromEvent(jsx(TableTooltip, {
-      rows: rows
+    showTooltipFromEvent(createElement(tooltip, {
+      slice: slice
     }), event, 'left');
-  }, [setIsHover, showTooltipFromEvent, rows]);
+  }, [setIsHover, showTooltipFromEvent, tooltip, slice]);
   var handleMouseLeave = useCallback(function () {
@@ -282,3 +289,2 @@ setIsHover(false);
 };
-var StreamSlicesItem$1 = memo(StreamSlicesItem);
 
@@ -288,11 +294,9 @@ var StreamSlices = function StreamSlices(_ref) {
       height = _ref.height,
-      getTooltipLabel = _ref.getTooltipLabel,
-      getTooltipValue = _ref.getTooltipValue;
+      tooltip = _ref.tooltip;
   return jsx("g", {
     children: slices.map(function (slice) {
-      return jsx(StreamSlicesItem$1, {
+      return jsx(StreamSlicesItem, {
         slice: slice,
         height: height,
-        getTooltipLabel: getTooltipLabel,
-        getTooltipValue: getTooltipValue
+        tooltip: tooltip
       }, slice.index);
@@ -302,3 +306,2 @@ })
 };
-var StreamSlices$1 = memo(StreamSlices);
 
@@ -312,5 +315,7 @@ var StreamDotsItem = function StreamDotsItem(_ref) {
       borderColor = _ref.borderColor;
+
   var _useMotionConfig = useMotionConfig(),
       animate = _useMotionConfig.animate,
       springConfig = _useMotionConfig.config;
+
   var animatedProps = useSpring({
@@ -333,49 +338,39 @@ x: x,
 };
-var StreamDotsItem$1 = memo(StreamDotsItem);
 
-var StreamPropTypes = {
-  data: PropTypes.arrayOf(PropTypes.object).isRequired,
-  keys: PropTypes.array.isRequired,
-  order: stackOrderPropType.isRequired,
-  offsetType: stackOffsetPropType.isRequired,
-  curve: areaCurvePropType.isRequired,
-  axisTop: PropTypes.object,
-  axisRight: PropTypes.object,
-  axisBottom: PropTypes.object,
-  axisLeft: PropTypes.object,
-  enableGridX: PropTypes.bool.isRequired,
-  enableGridY: PropTypes.bool.isRequired,
-  colors: ordinalColorsPropType.isRequired,
-  fillOpacity: PropTypes.number.isRequired,
-  defs: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string.isRequired
-  })).isRequired,
-  fill: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    match: PropTypes.oneOfType([PropTypes.oneOf(['*']), PropTypes.object, PropTypes.func]).isRequired
-  })).isRequired,
-  borderWidth: PropTypes.number.isRequired,
-  borderColor: inheritedColorPropType.isRequired,
-  enableDots: PropTypes.bool.isRequired,
-  dotComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
-  dotPosition: PropTypes.oneOf(['start', 'center', 'end']).isRequired,
-  dotSize: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).isRequired,
-  dotColor: inheritedColorPropType.isRequired,
-  dotBorderWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).isRequired,
-  dotBorderColor: inheritedColorPropType.isRequired,
-  isInteractive: PropTypes.bool,
-  tooltipLabel: PropTypes.func,
-  tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  enableStackTooltip: PropTypes.bool.isRequired,
-  legends: PropTypes.arrayOf(PropTypes.shape(LegendPropShape)).isRequired,
-  role: PropTypes.string.isRequired
+var LayerTooltip = function LayerTooltip(_ref) {
+  var layer = _ref.layer;
+  return jsx(BasicTooltip, {
+    id: layer.label,
+    enableChip: true,
+    color: layer.color
+  });
 };
-var StreamDefaultProps = {
+
+var StackTooltip = function StackTooltip(_ref) {
+  var slice = _ref.slice;
+  var rows = useMemo(function () {
+    return slice.stack.map(function (p) {
+      return [jsx(Chip, {
+        color: p.color
+      }, p.layerId), p.layerLabel, p.formattedValue];
+    });
+  }, [slice]);
+  return jsx(TableTooltip, {
+    rows: rows
+  });
+};
+
+var defaultProps = {
+  label: 'id',
   order: 'none',
   offsetType: 'wiggle',
   curve: 'catmullRom',
-  legendLabel: 'id',
   axisBottom: {},
-  enableGridX: true,
-  enableGridY: false,
+  axisLeft: {},
+  enableGridX: false,
+  enableGridY: true,
+  colors: {
+    scheme: 'nivo'
+  },
+  fillOpacity: 1,
   borderWidth: 0,
@@ -386,11 +381,5 @@ borderColor: {
   },
-  colors: {
-    scheme: 'nivo'
-  },
-  fillOpacity: 1,
-  defs: [],
-  fill: [],
   enableDots: false,
   dotPosition: 'center',
-  dotComponent: StreamDotsItem$1,
+  dotComponent: StreamDotsItem,
   dotSize: 6,
@@ -405,39 +394,19 @@ dotColor: {
   isInteractive: true,
+  tooltip: LayerTooltip,
   enableStackTooltip: true,
+  stackTooltip: StackTooltip,
   legends: [],
+  legendLabel: 'id',
+  role: 'application'
+};
+var svgDefaultProps = _objectSpread2(_objectSpread2({}, defaultProps), {}, {
+  layers: ['grid', 'axes', 'layers', 'dots', 'slices', 'legends'],
+  defs: [],
+  fill: [],
+  animate: true,
+  motionConfig: 'default',
   role: 'img',
-  animate: true,
-  motionConfig: 'gentle'
-};
+  isFocusable: false
+});
 
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
-
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
-}
-
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
-
-var stackMin = function stackMin(layers) {
-  return Math.min.apply(Math, _toConsumableArray(layers.reduce(function (acc, layer) {
-    return [].concat(_toConsumableArray(acc), _toConsumableArray(layer.map(function (d) {
-      return d[0];
-    })));
-  }, [])));
-};
-var stackMax = function stackMax(layers) {
-  return Math.max.apply(Math, _toConsumableArray(layers.reduce(function (acc, layer) {
-    return [].concat(_toConsumableArray(acc), _toConsumableArray(layer.map(function (d) {
-      return d[1];
-    })));
-  }, [])));
-};
 var useStream = function useStream(_ref) {
@@ -448,14 +417,24 @@ var width = _ref.width,
       keys = _ref.keys,
-      offsetType = _ref.offsetType,
-      order = _ref.order,
-      curve = _ref.curve,
-      colors = _ref.colors,
-      borderColor = _ref.borderColor,
-      dotSize = _ref.dotSize,
-      dotColor = _ref.dotColor,
-      dotBorderWidth = _ref.dotBorderWidth,
-      dotBorderColor = _ref.dotBorderColor,
-      tooltipLabel = _ref.tooltipLabel,
-      tooltipFormat = _ref.tooltipFormat,
-      legendLabel = _ref.legendLabel;
+      _ref$label = _ref.label,
+      label = _ref$label === void 0 ? defaultProps.label : _ref$label,
+      valueFormat = _ref.valueFormat,
+      _ref$offsetType = _ref.offsetType,
+      offsetType = _ref$offsetType === void 0 ? defaultProps.offsetType : _ref$offsetType,
+      _ref$order = _ref.order,
+      order = _ref$order === void 0 ? defaultProps.order : _ref$order,
+      _ref$curve = _ref.curve,
+      curve = _ref$curve === void 0 ? defaultProps.curve : _ref$curve,
+      _ref$colors = _ref.colors,
+      colors = _ref$colors === void 0 ? defaultProps.colors : _ref$colors,
+      _ref$borderColor = _ref.borderColor,
+      borderColor = _ref$borderColor === void 0 ? defaultProps.borderColor : _ref$borderColor,
+      _ref$dotSize = _ref.dotSize,
+      dotSize = _ref$dotSize === void 0 ? defaultProps.dotSize : _ref$dotSize,
+      _ref$dotColor = _ref.dotColor,
+      dotColor = _ref$dotColor === void 0 ? defaultProps.dotColor : _ref$dotColor,
+      _ref$dotBorderWidth = _ref.dotBorderWidth,
+      dotBorderWidth = _ref$dotBorderWidth === void 0 ? defaultProps.dotBorderWidth : _ref$dotBorderWidth,
+      _ref$dotBorderColor = _ref.dotBorderColor,
+      dotBorderColor = _ref$dotBorderColor === void 0 ? defaultProps.dotBorderColor : _ref$dotBorderColor;
+  var areaCurveFactory = useCurveInterpolation(curve);
   var areaGenerator = useMemo(function () {
@@ -471,16 +450,22 @@ return area().x(function (_ref2) {
       return y2;
-    }).curve(curveFromProp(curve));
-  }, [curve]);
+    }).curve(areaCurveFactory);
+  }, [areaCurveFactory]);
   var stack$1 = useMemo(function () {
     return stack().keys(keys).offset(stackOffsetFromProp(offsetType)).order(stackOrderFromProp(order));
   }, [keys, offsetType, order]);
+
   var _useMemo = useMemo(function () {
-    var layers = stack$1(data);
-    layers.forEach(function (layer) {
-      layer.forEach(function (point) {
-        point.value = point.data[layer.key];
+    var allMin = [];
+    var allMax = [];
+    var layers = stack$1(data).map(function (layer) {
+      return layer.map(function (point) {
+        allMin.push(point[0]);
+        allMax.push(point[1]);
+        return _objectSpread2(_objectSpread2({}, point), {}, {
+          value: point.data[layer.key]
+        });
       });
     });
-    var minValue = stackMin(layers);
-    var maxValue = stackMax(layers);
+    var minValue = Math.min.apply(Math, allMin);
+    var maxValue = Math.max.apply(Math, allMax);
     return [layers, scalePoint().domain(Array.from({
@@ -496,4 +481,5 @@ length: data.length
       yScale = _useMemo2[2];
+
   var theme = useTheme();
-  var getColor = useOrdinalColorScale(colors, 'index');
+  var getColor = useOrdinalColorScale(colors, 'id');
   var getBorderColor = useInheritedColor(borderColor, theme);
@@ -512,10 +498,15 @@ var getDotSize = useMemo(function () {
   var getDotBorderColor = useInheritedColor(dotBorderColor, theme);
-  var getLegendLabel = usePropertyAccessor(legendLabel);
+  var getLabel = usePropertyAccessor(label);
+  var formatValue = useValueFormatter(valueFormat);
   var enhancedLayers = useMemo(function () {
     return layers.map(function (points, layerIndex) {
-      var layer = points.map(function (point, i) {
+      var computedPoints = points.map(function (point, i) {
         return {
+          layerId: keys[layerIndex],
+          layerLabel: '',
           index: i,
+          color: '',
           x: xScale(i),
           value: point.value,
+          formattedValue: formatValue(point.value),
           y1: yScale(point[0]),
@@ -525,16 +516,21 @@ y2: yScale(point[1])
       });
-      var id = keys[layerIndex];
-      return {
-        id: id,
-        layer: layer,
-        label: getLegendLabel({
-          id: id
-        }),
-        path: areaGenerator(layer),
-        color: getColor({
-          index: layerIndex
+      var layer = {
+        id: keys[layerIndex],
+        path: areaGenerator(computedPoints)
+      };
+
+      var layerWithComputedProperties = _objectSpread2(_objectSpread2({}, layer), {}, {
+        label: getLabel(layer),
+        color: getColor(layer)
+      });
+
+      return _objectSpread2(_objectSpread2({}, layerWithComputedProperties), {}, {
+        data: computedPoints.map(function (point) {
+          point.layerLabel = layerWithComputedProperties.label;
+          point.color = layerWithComputedProperties.color;
+          return point;
         })
-      };
+      });
     });
-  }, [layers, keys, getLegendLabel, areaGenerator, getColor, xScale, yScale]);
+  }, [layers, keys, getLabel, areaGenerator, getColor, xScale, yScale, formatValue]);
   var slices = useMemo(function () {
@@ -545,6 +541,3 @@ return Array.from({
       var sliceStack = enhancedLayers.map(function (layer) {
-        return _objectSpread2({
-          id: layer.id,
-          color: layer.color
-        }, layer.layer[i]);
+        return layer.data[i];
       }).sort(function (a, b) {
@@ -555,3 +548,3 @@ return a.y2 - b.y2;
         index: i,
-        x: enhancedLayers[0].layer[i].x,
+        x: enhancedLayers[0].data[i].x,
         stack: sliceStack
@@ -561,9 +554,10 @@ };
   }, [data.length, enhancedLayers]);
-  var getTooltipLabel = useMemo(function () {
-    if (typeof tooltipLabel === 'function') return tooltipLabel;
-    return function (d) {
-      return d.id;
+  var layerContext = useMemo(function () {
+    return {
+      xScale: xScale,
+      yScale: yScale,
+      layers: enhancedLayers,
+      slices: slices
     };
-  }, [tooltipLabel]);
-  var getTooltipValue = useValueFormatter(tooltipFormat);
+  }, [xScale, yScale, enhancedLayers, slices]);
   return {
@@ -579,14 +573,16 @@ xScale: xScale,
     getDotBorderColor: getDotBorderColor,
-    getTooltipLabel: getTooltipLabel,
-    getTooltipValue: getTooltipValue
+    layerContext: layerContext
   };
 };
 
-var Stream = function Stream(_ref) {
+var InnerStream = function InnerStream(_ref) {
   var data = _ref.data,
       keys = _ref.keys,
+      label = _ref.label,
+      valueFormat = _ref.valueFormat,
       offsetType = _ref.offsetType,
       order = _ref.order,
       curve = _ref.curve,
-      legendLabel = _ref.legendLabel,
+      _ref$layers = _ref.layers,
+      chartLayers = _ref$layers === void 0 ? svgDefaultProps.layers : _ref$layers,
       width = _ref.width,
@@ -597,15 +593,26 @@ height = _ref.height,
       axisRight = _ref.axisRight,
-      axisBottom = _ref.axisBottom,
-      axisLeft = _ref.axisLeft,
-      enableGridX = _ref.enableGridX,
-      enableGridY = _ref.enableGridY,
+      _ref$axisBottom = _ref.axisBottom,
+      axisBottom = _ref$axisBottom === void 0 ? svgDefaultProps.axisBottom : _ref$axisBottom,
+      _ref$axisLeft = _ref.axisLeft,
+      axisLeft = _ref$axisLeft === void 0 ? svgDefaultProps.axisLeft : _ref$axisLeft,
+      _ref$enableGridX = _ref.enableGridX,
+      enableGridX = _ref$enableGridX === void 0 ? svgDefaultProps.enableGridX : _ref$enableGridX,
+      _ref$enableGridY = _ref.enableGridY,
+      enableGridY = _ref$enableGridY === void 0 ? svgDefaultProps.enableGridY : _ref$enableGridY,
       colors = _ref.colors,
-      fillOpacity = _ref.fillOpacity,
-      borderWidth = _ref.borderWidth,
+      _ref$fillOpacity = _ref.fillOpacity,
+      fillOpacity = _ref$fillOpacity === void 0 ? svgDefaultProps.fillOpacity : _ref$fillOpacity,
+      _ref$borderWidth = _ref.borderWidth,
+      borderWidth = _ref$borderWidth === void 0 ? svgDefaultProps.borderWidth : _ref$borderWidth,
       borderColor = _ref.borderColor,
-      defs = _ref.defs,
-      fill = _ref.fill,
-      enableDots = _ref.enableDots,
-      dotPosition = _ref.dotPosition,
-      dotComponent = _ref.dotComponent,
+      _ref$defs = _ref.defs,
+      defs = _ref$defs === void 0 ? svgDefaultProps.defs : _ref$defs,
+      _ref$fill = _ref.fill,
+      fill = _ref$fill === void 0 ? svgDefaultProps.fill : _ref$fill,
+      _ref$enableDots = _ref.enableDots,
+      enableDots = _ref$enableDots === void 0 ? svgDefaultProps.enableDots : _ref$enableDots,
+      _ref$dotPosition = _ref.dotPosition,
+      dotPosition = _ref$dotPosition === void 0 ? svgDefaultProps.dotPosition : _ref$dotPosition,
+      _ref$dotComponent = _ref.dotComponent,
+      dotComponent = _ref$dotComponent === void 0 ? svgDefaultProps.dotComponent : _ref$dotComponent,
       dotSize = _ref.dotSize,
@@ -615,8 +622,17 @@ dotColor = _ref.dotColor,
       dotBorderColor = _ref.dotBorderColor,
-      isInteractive = _ref.isInteractive,
-      tooltipLabel = _ref.tooltipLabel,
-      tooltipFormat = _ref.tooltipFormat,
-      enableStackTooltip = _ref.enableStackTooltip,
-      legends = _ref.legends,
-      role = _ref.role;
+      _ref$isInteractive = _ref.isInteractive,
+      isInteractive = _ref$isInteractive === void 0 ? svgDefaultProps.isInteractive : _ref$isInteractive,
+      _ref$tooltip = _ref.tooltip,
+      tooltip = _ref$tooltip === void 0 ? svgDefaultProps.tooltip : _ref$tooltip,
+      _ref$enableStackToolt = _ref.enableStackTooltip,
+      enableStackTooltip = _ref$enableStackToolt === void 0 ? svgDefaultProps.enableStackTooltip : _ref$enableStackToolt,
+      _ref$stackTooltip = _ref.stackTooltip,
+      stackTooltip = _ref$stackTooltip === void 0 ? svgDefaultProps.stackTooltip : _ref$stackTooltip,
+      _ref$legends = _ref.legends,
+      legends = _ref$legends === void 0 ? svgDefaultProps.legends : _ref$legends,
+      role = _ref.role,
+      ariaLabel = _ref.ariaLabel,
+      ariaLabelledBy = _ref.ariaLabelledBy,
+      ariaDescribedBy = _ref.ariaDescribedBy;
+
   var _useDimensions = useDimensions(width, height, partialMargin),
@@ -628,2 +644,3 @@ margin = _useDimensions.margin,
       outerHeight = _useDimensions.outerHeight;
+
   var _useStream = useStream({
@@ -634,2 +651,4 @@ width: innerWidth,
     keys: keys,
+    label: label,
+    valueFormat: valueFormat,
     offsetType: offsetType,
@@ -643,6 +662,3 @@ order: order,
     dotBorderWidth: dotBorderWidth,
-    dotBorderColor: dotBorderColor,
-    tooltipLabel: tooltipLabel,
-    tooltipFormat: tooltipFormat,
-    legendLabel: legendLabel
+    dotBorderColor: dotBorderColor
   }),
@@ -658,12 +674,16 @@ xScale = _useStream.xScale,
       getDotBorderColor = _useStream.getDotBorderColor,
-      getTooltipLabel = _useStream.getTooltipLabel,
-      getTooltipValue = _useStream.getTooltipValue;
+      layerContext = _useStream.layerContext;
+
   var boundDefs = bindDefs(defs, layers, fill);
-  return jsxs(SvgWrapper, {
-    width: outerWidth,
-    height: outerHeight,
-    margin: margin,
-    defs: boundDefs,
-    role: role,
-    children: [jsx(Grid, {
+  var layerById = {
+    grid: null,
+    axes: null,
+    layers: null,
+    dots: null,
+    slices: null,
+    legends: null
+  };
+
+  if (chartLayers.includes('grid')) {
+    layerById.grid = jsx(Grid, {
       width: innerWidth,
@@ -673,10 +693,7 @@ height: innerHeight,
       yScale: enableGridY ? yScale : null
-    }), jsx(StreamLayers, {
-      layers: layers,
-      fillOpacity: fillOpacity,
-      borderWidth: borderWidth,
-      getBorderColor: getBorderColor,
-      getTooltipLabel: getTooltipLabel,
-      isInteractive: isInteractive
-    }), jsx(Axes, {
+    }, "grid");
+  }
+
+  if (chartLayers.includes('axes')) {
+    layerById.axes = jsx(Axes, {
       xScale: xScale,
@@ -690,39 +707,108 @@ yScale: yScale,
       left: axisLeft
-    }), enableDots && layers.map(function (layer) {
-      return jsx(StreamDots$1, {
-        id: layer.id,
-        color: layer.color,
-        data: layer.layer,
-        dotComponent: dotComponent,
-        position: dotPosition,
-        getSize: getDotSize,
-        getColor: getDotColor,
-        getBorderWidth: getDotBorderWidth,
-        getBorderColor: getDotBorderColor
-      }, layer.id);
-    }), isInteractive && enableStackTooltip && jsx(StreamSlices$1, {
+    }, "axes");
+  }
+
+  if (chartLayers.includes('layers')) {
+    layerById.layers = jsx(StreamLayers, {
+      layers: layers,
+      fillOpacity: fillOpacity,
+      borderWidth: borderWidth,
+      getBorderColor: getBorderColor,
+      isInteractive: isInteractive,
+      tooltip: tooltip
+    }, "layers");
+  }
+
+  if (chartLayers.includes('dots') && enableDots) {
+    layerById.dots = jsx(Fragment$1, {
+      children: layers.map(function (layer) {
+        return jsx(StreamDots, {
+          id: layer.id,
+          color: layer.color,
+          data: layer.data,
+          dotComponent: dotComponent,
+          position: dotPosition,
+          getSize: getDotSize,
+          getColor: getDotColor,
+          getBorderWidth: getDotBorderWidth,
+          getBorderColor: getDotBorderColor
+        }, layer.id);
+      })
+    }, "dots");
+  }
+
+  if (chartLayers.includes('slices') && isInteractive && enableStackTooltip) {
+    layerById.slices = jsx(StreamSlices, {
       slices: slices,
       height: innerHeight,
-      getTooltipValue: getTooltipValue,
-      getTooltipLabel: getTooltipLabel
-    }), legends.map(function (legend, i) {
-      var legendData = layers.map(function (l) {
-        return {
-          id: l.id,
-          label: l.label,
-          color: l.color,
-          fill: l.fill
-        };
-      }).reverse();
-      return jsx(BoxLegendSvg, _objectSpread2(_objectSpread2({}, legend), {}, {
-        containerWidth: innerWidth,
-        containerHeight: innerHeight,
-        data: legendData
-      }), i);
-    })]
+      tooltip: stackTooltip
+    }, "slices");
+  }
+
+  if (chartLayers.includes('legends')) {
+    layerById.legends = jsx(Fragment$1, {
+      children: legends.map(function (legend, i) {
+        var legendData = layers.map(function (layer) {
+          return {
+            id: layer.id,
+            label: layer.label,
+            color: layer.color,
+            fill: layer.fill
+          };
+        }).reverse();
+        return jsx(BoxLegendSvg, _objectSpread2(_objectSpread2({}, legend), {}, {
+          containerWidth: innerWidth,
+          containerHeight: innerHeight,
+          data: legendData
+        }), i);
+      })
+    }, "legends");
+  }
+
+  return jsx(SvgWrapper, {
+    width: outerWidth,
+    height: outerHeight,
+    margin: margin,
+    defs: boundDefs,
+    role: role,
+    ariaLabel: ariaLabel,
+    ariaLabelledBy: ariaLabelledBy,
+    ariaDescribedBy: ariaDescribedBy,
+    children: chartLayers.map(function (layer, i) {
+      var _layerById$layer;
+
+      if (typeof layer === 'function') {
+        return jsx(Fragment$1, {
+          children: createElement(layer, layerContext)
+        }, i);
+      }
+
+      return (_layerById$layer = layerById === null || layerById === void 0 ? void 0 : layerById[layer]) !== null && _layerById$layer !== void 0 ? _layerById$layer : null;
+    })
   });
 };
-var WrappedStream = withContainer(Stream);
-WrappedStream.defaultProps = StreamDefaultProps;
 
+var Stream = function Stream(_ref2) {
+  var _ref2$isInteractive = _ref2.isInteractive,
+      isInteractive = _ref2$isInteractive === void 0 ? svgDefaultProps.isInteractive : _ref2$isInteractive,
+      _ref2$animate = _ref2.animate,
+      animate = _ref2$animate === void 0 ? svgDefaultProps.animate : _ref2$animate,
+      _ref2$motionConfig = _ref2.motionConfig,
+      motionConfig = _ref2$motionConfig === void 0 ? svgDefaultProps.motionConfig : _ref2$motionConfig,
+      theme = _ref2.theme,
+      renderWrapper = _ref2.renderWrapper,
+      otherProps = _objectWithoutProperties(_ref2, ["isInteractive", "animate", "motionConfig", "theme", "renderWrapper"]);
+
+  return jsx(Container, {
+    animate: animate,
+    isInteractive: isInteractive,
+    motionConfig: motionConfig,
+    renderWrapper: renderWrapper,
+    theme: theme,
+    children: jsx(InnerStream, _objectSpread2({
+      isInteractive: isInteractive
+    }, otherProps))
+  });
+};
+
 var ResponsiveStream = function ResponsiveStream(props) {
@@ -733,3 +819,3 @@ return jsx(ResponsiveWrapper, {
           height = _ref.height;
-      return jsx(WrappedStream, _objectSpread2({
+      return jsx(Stream, _objectSpread2({
         width: width,
@@ -742,3 +828,3 @@ height: height
 
-export { ResponsiveStream, WrappedStream as Stream, StreamDefaultProps, StreamPropTypes };
+export { ResponsiveStream, Stream, defaultProps, svgDefaultProps };
 //# sourceMappingURL=nivo-stream.es.js.map

dist/nivo-stream.umd.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@nivo/core'), require('@nivo/axes'), require('@nivo/legends'), require('react'), require('@react-spring/web'), require('@nivo/tooltip'), require('react/jsx-runtime'), require('prop-types'), require('@nivo/colors'), require('d3-shape'), require('d3-scale')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@nivo/core', '@nivo/axes', '@nivo/legends', 'react', '@react-spring/web', '@nivo/tooltip', 'react/jsx-runtime', 'prop-types', '@nivo/colors', 'd3-shape', 'd3-scale'], factory) :
-  (global = global || self, factory(global.nivo = global.nivo || {}, global.nivo, global.nivo, global.nivo, global.React, global['@react-spring/web'], global.nivo, global['react/jsx-runtime'], global.PropTypes, global.nivo, global.d3, global.d3));
-}(this, (function (exports, core, axes, legends, react, web, tooltip, jsxRuntime, PropTypes, colors, d3Shape, d3Scale) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@nivo/core'), require('@nivo/axes'), require('@nivo/legends'), require('@react-spring/web'), require('@nivo/tooltip'), require('react/jsx-runtime'), require('d3-shape'), require('d3-scale'), require('@nivo/colors')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', '@nivo/core', '@nivo/axes', '@nivo/legends', '@react-spring/web', '@nivo/tooltip', 'react/jsx-runtime', 'd3-shape', 'd3-scale', '@nivo/colors'], factory) :
+  (global = global || self, factory(global.nivo = global.nivo || {}, global.React, global.nivo, global.nivo, global.nivo, global['@react-spring/web'], global.nivo, global['react/jsx-runtime'], global.d3, global.d3, global.nivo));
+}(this, (function (exports, react, core, axes, legends, web, tooltip, jsxRuntime, d3Shape, d3Scale, colors) { 'use strict';
 
-  PropTypes = PropTypes && Object.prototype.hasOwnProperty.call(PropTypes, 'default') ? PropTypes['default'] : PropTypes;
+  function _objectWithoutPropertiesLoose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for (i = 0; i < sourceKeys.length; i++) {
+      key = sourceKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
+    return target;
+  }
 
+  function _objectWithoutProperties(source, excluded) {
+    if (source == null) return {};
+    var target = _objectWithoutPropertiesLoose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+      for (i = 0; i < sourceSymbolKeys.length; i++) {
+        key = sourceSymbolKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+        target[key] = source[key];
+      }
+    }
+    return target;
+  }
+
   function _defineProperty(obj, key, value) {
@@ -57,17 +84,19 @@ if (key in obj) {
         getBorderColor = _ref.getBorderColor,
-        getTooltipLabel = _ref.getTooltipLabel,
-        isInteractive = _ref.isInteractive;
+        isInteractive = _ref.isInteractive,
+        tooltip$1 = _ref.tooltip;
+
     var _useTooltip = tooltip.useTooltip(),
         showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
         hideTooltip = _useTooltip.hideTooltip;
+
     var handleMouseHover = react.useCallback(function (event) {
-      showTooltipFromEvent(jsxRuntime.jsx(tooltip.BasicTooltip, {
-        id: getTooltipLabel(layer),
-        enableChip: true,
-        color: layer.color
+      showTooltipFromEvent(react.createElement(tooltip$1, {
+        layer: layer
       }), event, 'left');
-    }, [showTooltipFromEvent, getTooltipLabel, layer]);
+    }, [showTooltipFromEvent, layer]);
+
     var _useMotionConfig = core.useMotionConfig(),
         animate = _useMotionConfig.animate,
         springConfig = _useMotionConfig.config;
+
     var animatedPath = core.useAnimatedPath(layer.path);
@@ -90,3 +119,2 @@ var animatedProps = web.useSpring({
   };
-  var StreamLayer$1 = react.memo(StreamLayer);
 
@@ -98,7 +126,7 @@ var StreamLayers = function StreamLayers(_ref) {
         getBorderColor = _ref.getBorderColor,
-        getTooltipLabel = _ref.getTooltipLabel,
-        isInteractive = _ref.isInteractive;
+        isInteractive = _ref.isInteractive,
+        tooltip = _ref.tooltip;
     return jsxRuntime.jsx("g", {
       children: layers.map(function (layer, i) {
-        return jsxRuntime.jsx(StreamLayer$1, {
+        return jsxRuntime.jsx(StreamLayer, {
           layer: layer,
@@ -108,4 +136,4 @@ getBorderColor: getBorderColor,
           fillOpacity: fillOpacity,
-          getTooltipLabel: getTooltipLabel,
-          isInteractive: isInteractive
+          isInteractive: isInteractive,
+          tooltip: tooltip
         }, i);
@@ -118,2 +146,3 @@ })
     var y = datum.y2;
+
     if (position === 'center') {
@@ -124,8 +153,8 @@ y = datum.y1 + (datum.y2 - datum.y1) / 2;
     }
+
     return y;
   };
+
   var StreamDots = function StreamDots(_ref) {
-    var id = _ref.id,
-        color = _ref.color,
-        data = _ref.data,
+    var data = _ref.data,
         dotComponent = _ref.dotComponent,
@@ -137,35 +166,17 @@ position = _ref.position,
         getBorderColor = _ref.getBorderColor;
-    return data.map(function (d, i) {
-      var datum = _objectSpread2(_objectSpread2({}, d), {}, {
-        key: id,
-        color: color
-      });
-      return react.createElement(dotComponent, {
-        key: i,
-        datum: datum,
-        x: datum.x,
-        y: getDotY(datum, position),
-        size: getSize(datum),
-        color: getColor(datum),
-        borderWidth: getBorderWidth(datum),
-        borderColor: getBorderColor(datum)
-      });
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: data.map(function (datum, i) {
+        return react.createElement(dotComponent, {
+          key: i,
+          datum: datum,
+          x: datum.x,
+          y: getDotY(datum, position),
+          size: getSize(datum),
+          color: getColor(datum),
+          borderWidth: getBorderWidth(datum),
+          borderColor: getBorderColor(datum)
+        });
+      })
     });
   };
-  StreamDots.propTypes = {
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-    color: PropTypes.string.isRequired,
-    data: PropTypes.arrayOf(PropTypes.shape({
-      x: PropTypes.number.isRequired,
-      y1: PropTypes.number.isRequired,
-      y2: PropTypes.number.isRequired
-    })).isRequired,
-    dotComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
-    position: PropTypes.oneOf(['start', 'center', 'end']).isRequired,
-    getSize: PropTypes.func.isRequired,
-    getColor: PropTypes.func.isRequired,
-    getBorderWidth: PropTypes.func.isRequired,
-    getBorderColor: PropTypes.func.isRequired
-  };
-  var StreamDots$1 = react.memo(StreamDots);
 
@@ -228,4 +239,4 @@ function _arrayWithHoles(arr) {
         height = _ref.height,
-        getTooltipLabel = _ref.getTooltipLabel,
-        getTooltipValue = _ref.getTooltipValue;
+        tooltip$1 = _ref.tooltip;
+
     var _useState = react.useState(false),
@@ -235,18 +246,13 @@ _useState2 = _slicedToArray(_useState, 2),
         setIsHover = _useState2[1];
+
     var _useTooltip = tooltip.useTooltip(),
         showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
         hideTooltip = _useTooltip.hideTooltip;
-    var rows = react.useMemo(function () {
-      return slice.stack.map(function (p) {
-        return [jsxRuntime.jsx(tooltip.Chip, {
-          color: p.color
-        }, p.id), getTooltipLabel(p), getTooltipValue(p.value)];
-      });
-    }, [slice, getTooltipLabel, getTooltipValue]);
+
     var handleMouseHover = react.useCallback(function (event) {
       setIsHover(true);
-      showTooltipFromEvent(jsxRuntime.jsx(tooltip.TableTooltip, {
-        rows: rows
+      showTooltipFromEvent(react.createElement(tooltip$1, {
+        slice: slice
       }), event, 'left');
-    }, [setIsHover, showTooltipFromEvent, rows]);
+    }, [setIsHover, showTooltipFromEvent, tooltip$1, slice]);
     var handleMouseLeave = react.useCallback(function () {
@@ -278,3 +284,2 @@ setIsHover(false);
   };
-  var StreamSlicesItem$1 = react.memo(StreamSlicesItem);
 
@@ -284,11 +289,9 @@ var StreamSlices = function StreamSlices(_ref) {
         height = _ref.height,
-        getTooltipLabel = _ref.getTooltipLabel,
-        getTooltipValue = _ref.getTooltipValue;
+        tooltip = _ref.tooltip;
     return jsxRuntime.jsx("g", {
       children: slices.map(function (slice) {
-        return jsxRuntime.jsx(StreamSlicesItem$1, {
+        return jsxRuntime.jsx(StreamSlicesItem, {
           slice: slice,
           height: height,
-          getTooltipLabel: getTooltipLabel,
-          getTooltipValue: getTooltipValue
+          tooltip: tooltip
         }, slice.index);
@@ -298,3 +301,2 @@ })
   };
-  var StreamSlices$1 = react.memo(StreamSlices);
 
@@ -308,5 +310,7 @@ var StreamDotsItem = function StreamDotsItem(_ref) {
         borderColor = _ref.borderColor;
+
     var _useMotionConfig = core.useMotionConfig(),
         animate = _useMotionConfig.animate,
         springConfig = _useMotionConfig.config;
+
     var animatedProps = web.useSpring({
@@ -329,49 +333,39 @@ x: x,
   };
-  var StreamDotsItem$1 = react.memo(StreamDotsItem);
 
-  var StreamPropTypes = {
-    data: PropTypes.arrayOf(PropTypes.object).isRequired,
-    keys: PropTypes.array.isRequired,
-    order: core.stackOrderPropType.isRequired,
-    offsetType: core.stackOffsetPropType.isRequired,
-    curve: core.areaCurvePropType.isRequired,
-    axisTop: PropTypes.object,
-    axisRight: PropTypes.object,
-    axisBottom: PropTypes.object,
-    axisLeft: PropTypes.object,
-    enableGridX: PropTypes.bool.isRequired,
-    enableGridY: PropTypes.bool.isRequired,
-    colors: colors.ordinalColorsPropType.isRequired,
-    fillOpacity: PropTypes.number.isRequired,
-    defs: PropTypes.arrayOf(PropTypes.shape({
-      id: PropTypes.string.isRequired
-    })).isRequired,
-    fill: PropTypes.arrayOf(PropTypes.shape({
-      id: PropTypes.string,
-      match: PropTypes.oneOfType([PropTypes.oneOf(['*']), PropTypes.object, PropTypes.func]).isRequired
-    })).isRequired,
-    borderWidth: PropTypes.number.isRequired,
-    borderColor: colors.inheritedColorPropType.isRequired,
-    enableDots: PropTypes.bool.isRequired,
-    dotComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
-    dotPosition: PropTypes.oneOf(['start', 'center', 'end']).isRequired,
-    dotSize: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).isRequired,
-    dotColor: colors.inheritedColorPropType.isRequired,
-    dotBorderWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).isRequired,
-    dotBorderColor: colors.inheritedColorPropType.isRequired,
-    isInteractive: PropTypes.bool,
-    tooltipLabel: PropTypes.func,
-    tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-    enableStackTooltip: PropTypes.bool.isRequired,
-    legends: PropTypes.arrayOf(PropTypes.shape(legends.LegendPropShape)).isRequired,
-    role: PropTypes.string.isRequired
+  var LayerTooltip = function LayerTooltip(_ref) {
+    var layer = _ref.layer;
+    return jsxRuntime.jsx(tooltip.BasicTooltip, {
+      id: layer.label,
+      enableChip: true,
+      color: layer.color
+    });
   };
-  var StreamDefaultProps = {
+
+  var StackTooltip = function StackTooltip(_ref) {
+    var slice = _ref.slice;
+    var rows = react.useMemo(function () {
+      return slice.stack.map(function (p) {
+        return [jsxRuntime.jsx(tooltip.Chip, {
+          color: p.color
+        }, p.layerId), p.layerLabel, p.formattedValue];
+      });
+    }, [slice]);
+    return jsxRuntime.jsx(tooltip.TableTooltip, {
+      rows: rows
+    });
+  };
+
+  var defaultProps = {
+    label: 'id',
     order: 'none',
     offsetType: 'wiggle',
     curve: 'catmullRom',
-    legendLabel: 'id',
     axisBottom: {},
-    enableGridX: true,
-    enableGridY: false,
+    axisLeft: {},
+    enableGridX: false,
+    enableGridY: true,
+    colors: {
+      scheme: 'nivo'
+    },
+    fillOpacity: 1,
     borderWidth: 0,
@@ -382,11 +376,5 @@ borderColor: {
     },
-    colors: {
-      scheme: 'nivo'
-    },
-    fillOpacity: 1,
-    defs: [],
-    fill: [],
     enableDots: false,
     dotPosition: 'center',
-    dotComponent: StreamDotsItem$1,
+    dotComponent: StreamDotsItem,
     dotSize: 6,
@@ -401,39 +389,19 @@ dotColor: {
     isInteractive: true,
+    tooltip: LayerTooltip,
     enableStackTooltip: true,
+    stackTooltip: StackTooltip,
     legends: [],
+    legendLabel: 'id',
+    role: 'application'
+  };
+  var svgDefaultProps = _objectSpread2(_objectSpread2({}, defaultProps), {}, {
+    layers: ['grid', 'axes', 'layers', 'dots', 'slices', 'legends'],
+    defs: [],
+    fill: [],
+    animate: true,
+    motionConfig: 'default',
     role: 'img',
-    animate: true,
-    motionConfig: 'gentle'
-  };
+    isFocusable: false
+  });
 
-  function _arrayWithoutHoles(arr) {
-    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-  }
-
-  function _iterableToArray(iter) {
-    if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
-  }
-
-  function _nonIterableSpread() {
-    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }
-
-  function _toConsumableArray(arr) {
-    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-  }
-
-  var stackMin = function stackMin(layers) {
-    return Math.min.apply(Math, _toConsumableArray(layers.reduce(function (acc, layer) {
-      return [].concat(_toConsumableArray(acc), _toConsumableArray(layer.map(function (d) {
-        return d[0];
-      })));
-    }, [])));
-  };
-  var stackMax = function stackMax(layers) {
-    return Math.max.apply(Math, _toConsumableArray(layers.reduce(function (acc, layer) {
-      return [].concat(_toConsumableArray(acc), _toConsumableArray(layer.map(function (d) {
-        return d[1];
-      })));
-    }, [])));
-  };
   var useStream = function useStream(_ref) {
@@ -444,14 +412,24 @@ var width = _ref.width,
         keys = _ref.keys,
-        offsetType = _ref.offsetType,
-        order = _ref.order,
-        curve = _ref.curve,
-        colors$1 = _ref.colors,
-        borderColor = _ref.borderColor,
-        dotSize = _ref.dotSize,
-        dotColor = _ref.dotColor,
-        dotBorderWidth = _ref.dotBorderWidth,
-        dotBorderColor = _ref.dotBorderColor,
-        tooltipLabel = _ref.tooltipLabel,
-        tooltipFormat = _ref.tooltipFormat,
-        legendLabel = _ref.legendLabel;
+        _ref$label = _ref.label,
+        label = _ref$label === void 0 ? defaultProps.label : _ref$label,
+        valueFormat = _ref.valueFormat,
+        _ref$offsetType = _ref.offsetType,
+        offsetType = _ref$offsetType === void 0 ? defaultProps.offsetType : _ref$offsetType,
+        _ref$order = _ref.order,
+        order = _ref$order === void 0 ? defaultProps.order : _ref$order,
+        _ref$curve = _ref.curve,
+        curve = _ref$curve === void 0 ? defaultProps.curve : _ref$curve,
+        _ref$colors = _ref.colors,
+        colors$1 = _ref$colors === void 0 ? defaultProps.colors : _ref$colors,
+        _ref$borderColor = _ref.borderColor,
+        borderColor = _ref$borderColor === void 0 ? defaultProps.borderColor : _ref$borderColor,
+        _ref$dotSize = _ref.dotSize,
+        dotSize = _ref$dotSize === void 0 ? defaultProps.dotSize : _ref$dotSize,
+        _ref$dotColor = _ref.dotColor,
+        dotColor = _ref$dotColor === void 0 ? defaultProps.dotColor : _ref$dotColor,
+        _ref$dotBorderWidth = _ref.dotBorderWidth,
+        dotBorderWidth = _ref$dotBorderWidth === void 0 ? defaultProps.dotBorderWidth : _ref$dotBorderWidth,
+        _ref$dotBorderColor = _ref.dotBorderColor,
+        dotBorderColor = _ref$dotBorderColor === void 0 ? defaultProps.dotBorderColor : _ref$dotBorderColor;
+    var areaCurveFactory = core.useCurveInterpolation(curve);
     var areaGenerator = react.useMemo(function () {
@@ -467,16 +445,22 @@ return d3Shape.area().x(function (_ref2) {
         return y2;
-      }).curve(core.curveFromProp(curve));
-    }, [curve]);
+      }).curve(areaCurveFactory);
+    }, [areaCurveFactory]);
     var stack = react.useMemo(function () {
       return d3Shape.stack().keys(keys).offset(core.stackOffsetFromProp(offsetType)).order(core.stackOrderFromProp(order));
     }, [keys, offsetType, order]);
+
     var _useMemo = react.useMemo(function () {
-      var layers = stack(data);
-      layers.forEach(function (layer) {
-        layer.forEach(function (point) {
-          point.value = point.data[layer.key];
+      var allMin = [];
+      var allMax = [];
+      var layers = stack(data).map(function (layer) {
+        return layer.map(function (point) {
+          allMin.push(point[0]);
+          allMax.push(point[1]);
+          return _objectSpread2(_objectSpread2({}, point), {}, {
+            value: point.data[layer.key]
+          });
         });
       });
-      var minValue = stackMin(layers);
-      var maxValue = stackMax(layers);
+      var minValue = Math.min.apply(Math, allMin);
+      var maxValue = Math.max.apply(Math, allMax);
       return [layers, d3Scale.scalePoint().domain(Array.from({
@@ -492,4 +476,5 @@ length: data.length
         yScale = _useMemo2[2];
+
     var theme = core.useTheme();
-    var getColor = colors.useOrdinalColorScale(colors$1, 'index');
+    var getColor = colors.useOrdinalColorScale(colors$1, 'id');
     var getBorderColor = colors.useInheritedColor(borderColor, theme);
@@ -508,10 +493,15 @@ var getDotSize = react.useMemo(function () {
     var getDotBorderColor = colors.useInheritedColor(dotBorderColor, theme);
-    var getLegendLabel = core.usePropertyAccessor(legendLabel);
+    var getLabel = core.usePropertyAccessor(label);
+    var formatValue = core.useValueFormatter(valueFormat);
     var enhancedLayers = react.useMemo(function () {
       return layers.map(function (points, layerIndex) {
-        var layer = points.map(function (point, i) {
+        var computedPoints = points.map(function (point, i) {
           return {
+            layerId: keys[layerIndex],
+            layerLabel: '',
             index: i,
+            color: '',
             x: xScale(i),
             value: point.value,
+            formattedValue: formatValue(point.value),
             y1: yScale(point[0]),
@@ -521,16 +511,21 @@ y2: yScale(point[1])
         });
-        var id = keys[layerIndex];
-        return {
-          id: id,
-          layer: layer,
-          label: getLegendLabel({
-            id: id
-          }),
-          path: areaGenerator(layer),
-          color: getColor({
-            index: layerIndex
+        var layer = {
+          id: keys[layerIndex],
+          path: areaGenerator(computedPoints)
+        };
+
+        var layerWithComputedProperties = _objectSpread2(_objectSpread2({}, layer), {}, {
+          label: getLabel(layer),
+          color: getColor(layer)
+        });
+
+        return _objectSpread2(_objectSpread2({}, layerWithComputedProperties), {}, {
+          data: computedPoints.map(function (point) {
+            point.layerLabel = layerWithComputedProperties.label;
+            point.color = layerWithComputedProperties.color;
+            return point;
           })
-        };
+        });
       });
-    }, [layers, keys, getLegendLabel, areaGenerator, getColor, xScale, yScale]);
+    }, [layers, keys, getLabel, areaGenerator, getColor, xScale, yScale, formatValue]);
     var slices = react.useMemo(function () {
@@ -541,6 +536,3 @@ return Array.from({
         var sliceStack = enhancedLayers.map(function (layer) {
-          return _objectSpread2({
-            id: layer.id,
-            color: layer.color
-          }, layer.layer[i]);
+          return layer.data[i];
         }).sort(function (a, b) {
@@ -551,3 +543,3 @@ return a.y2 - b.y2;
           index: i,
-          x: enhancedLayers[0].layer[i].x,
+          x: enhancedLayers[0].data[i].x,
           stack: sliceStack
@@ -557,9 +549,10 @@ };
     }, [data.length, enhancedLayers]);
-    var getTooltipLabel = react.useMemo(function () {
-      if (typeof tooltipLabel === 'function') return tooltipLabel;
-      return function (d) {
-        return d.id;
+    var layerContext = react.useMemo(function () {
+      return {
+        xScale: xScale,
+        yScale: yScale,
+        layers: enhancedLayers,
+        slices: slices
       };
-    }, [tooltipLabel]);
-    var getTooltipValue = core.useValueFormatter(tooltipFormat);
+    }, [xScale, yScale, enhancedLayers, slices]);
     return {
@@ -575,14 +568,16 @@ xScale: xScale,
       getDotBorderColor: getDotBorderColor,
-      getTooltipLabel: getTooltipLabel,
-      getTooltipValue: getTooltipValue
+      layerContext: layerContext
     };
   };
 
-  var Stream = function Stream(_ref) {
+  var InnerStream = function InnerStream(_ref) {
     var data = _ref.data,
         keys = _ref.keys,
+        label = _ref.label,
+        valueFormat = _ref.valueFormat,
         offsetType = _ref.offsetType,
         order = _ref.order,
         curve = _ref.curve,
-        legendLabel = _ref.legendLabel,
+        _ref$layers = _ref.layers,
+        chartLayers = _ref$layers === void 0 ? svgDefaultProps.layers : _ref$layers,
         width = _ref.width,
@@ -593,15 +588,26 @@ height = _ref.height,
         axisRight = _ref.axisRight,
-        axisBottom = _ref.axisBottom,
-        axisLeft = _ref.axisLeft,
-        enableGridX = _ref.enableGridX,
-        enableGridY = _ref.enableGridY,
+        _ref$axisBottom = _ref.axisBottom,
+        axisBottom = _ref$axisBottom === void 0 ? svgDefaultProps.axisBottom : _ref$axisBottom,
+        _ref$axisLeft = _ref.axisLeft,
+        axisLeft = _ref$axisLeft === void 0 ? svgDefaultProps.axisLeft : _ref$axisLeft,
+        _ref$enableGridX = _ref.enableGridX,
+        enableGridX = _ref$enableGridX === void 0 ? svgDefaultProps.enableGridX : _ref$enableGridX,
+        _ref$enableGridY = _ref.enableGridY,
+        enableGridY = _ref$enableGridY === void 0 ? svgDefaultProps.enableGridY : _ref$enableGridY,
         colors = _ref.colors,
-        fillOpacity = _ref.fillOpacity,
-        borderWidth = _ref.borderWidth,
+        _ref$fillOpacity = _ref.fillOpacity,
+        fillOpacity = _ref$fillOpacity === void 0 ? svgDefaultProps.fillOpacity : _ref$fillOpacity,
+        _ref$borderWidth = _ref.borderWidth,
+        borderWidth = _ref$borderWidth === void 0 ? svgDefaultProps.borderWidth : _ref$borderWidth,
         borderColor = _ref.borderColor,
-        defs = _ref.defs,
-        fill = _ref.fill,
-        enableDots = _ref.enableDots,
-        dotPosition = _ref.dotPosition,
-        dotComponent = _ref.dotComponent,
+        _ref$defs = _ref.defs,
+        defs = _ref$defs === void 0 ? svgDefaultProps.defs : _ref$defs,
+        _ref$fill = _ref.fill,
+        fill = _ref$fill === void 0 ? svgDefaultProps.fill : _ref$fill,
+        _ref$enableDots = _ref.enableDots,
+        enableDots = _ref$enableDots === void 0 ? svgDefaultProps.enableDots : _ref$enableDots,
+        _ref$dotPosition = _ref.dotPosition,
+        dotPosition = _ref$dotPosition === void 0 ? svgDefaultProps.dotPosition : _ref$dotPosition,
+        _ref$dotComponent = _ref.dotComponent,
+        dotComponent = _ref$dotComponent === void 0 ? svgDefaultProps.dotComponent : _ref$dotComponent,
         dotSize = _ref.dotSize,
@@ -611,8 +617,17 @@ dotColor = _ref.dotColor,
         dotBorderColor = _ref.dotBorderColor,
-        isInteractive = _ref.isInteractive,
-        tooltipLabel = _ref.tooltipLabel,
-        tooltipFormat = _ref.tooltipFormat,
-        enableStackTooltip = _ref.enableStackTooltip,
-        legends$1 = _ref.legends,
-        role = _ref.role;
+        _ref$isInteractive = _ref.isInteractive,
+        isInteractive = _ref$isInteractive === void 0 ? svgDefaultProps.isInteractive : _ref$isInteractive,
+        _ref$tooltip = _ref.tooltip,
+        tooltip = _ref$tooltip === void 0 ? svgDefaultProps.tooltip : _ref$tooltip,
+        _ref$enableStackToolt = _ref.enableStackTooltip,
+        enableStackTooltip = _ref$enableStackToolt === void 0 ? svgDefaultProps.enableStackTooltip : _ref$enableStackToolt,
+        _ref$stackTooltip = _ref.stackTooltip,
+        stackTooltip = _ref$stackTooltip === void 0 ? svgDefaultProps.stackTooltip : _ref$stackTooltip,
+        _ref$legends = _ref.legends,
+        legends$1 = _ref$legends === void 0 ? svgDefaultProps.legends : _ref$legends,
+        role = _ref.role,
+        ariaLabel = _ref.ariaLabel,
+        ariaLabelledBy = _ref.ariaLabelledBy,
+        ariaDescribedBy = _ref.ariaDescribedBy;
+
     var _useDimensions = core.useDimensions(width, height, partialMargin),
@@ -624,2 +639,3 @@ margin = _useDimensions.margin,
         outerHeight = _useDimensions.outerHeight;
+
     var _useStream = useStream({
@@ -630,2 +646,4 @@ width: innerWidth,
       keys: keys,
+      label: label,
+      valueFormat: valueFormat,
       offsetType: offsetType,
@@ -639,6 +657,3 @@ order: order,
       dotBorderWidth: dotBorderWidth,
-      dotBorderColor: dotBorderColor,
-      tooltipLabel: tooltipLabel,
-      tooltipFormat: tooltipFormat,
-      legendLabel: legendLabel
+      dotBorderColor: dotBorderColor
     }),
@@ -654,12 +669,16 @@ xScale = _useStream.xScale,
         getDotBorderColor = _useStream.getDotBorderColor,
-        getTooltipLabel = _useStream.getTooltipLabel,
-        getTooltipValue = _useStream.getTooltipValue;
+        layerContext = _useStream.layerContext;
+
     var boundDefs = core.bindDefs(defs, layers, fill);
-    return jsxRuntime.jsxs(core.SvgWrapper, {
-      width: outerWidth,
-      height: outerHeight,
-      margin: margin,
-      defs: boundDefs,
-      role: role,
-      children: [jsxRuntime.jsx(axes.Grid, {
+    var layerById = {
+      grid: null,
+      axes: null,
+      layers: null,
+      dots: null,
+      slices: null,
+      legends: null
+    };
+
+    if (chartLayers.includes('grid')) {
+      layerById.grid = jsxRuntime.jsx(axes.Grid, {
         width: innerWidth,
@@ -669,10 +688,7 @@ height: innerHeight,
         yScale: enableGridY ? yScale : null
-      }), jsxRuntime.jsx(StreamLayers, {
-        layers: layers,
-        fillOpacity: fillOpacity,
-        borderWidth: borderWidth,
-        getBorderColor: getBorderColor,
-        getTooltipLabel: getTooltipLabel,
-        isInteractive: isInteractive
-      }), jsxRuntime.jsx(axes.Axes, {
+      }, "grid");
+    }
+
+    if (chartLayers.includes('axes')) {
+      layerById.axes = jsxRuntime.jsx(axes.Axes, {
         xScale: xScale,
@@ -686,39 +702,108 @@ yScale: yScale,
         left: axisLeft
-      }), enableDots && layers.map(function (layer) {
-        return jsxRuntime.jsx(StreamDots$1, {
-          id: layer.id,
-          color: layer.color,
-          data: layer.layer,
-          dotComponent: dotComponent,
-          position: dotPosition,
-          getSize: getDotSize,
-          getColor: getDotColor,
-          getBorderWidth: getDotBorderWidth,
-          getBorderColor: getDotBorderColor
-        }, layer.id);
-      }), isInteractive && enableStackTooltip && jsxRuntime.jsx(StreamSlices$1, {
+      }, "axes");
+    }
+
+    if (chartLayers.includes('layers')) {
+      layerById.layers = jsxRuntime.jsx(StreamLayers, {
+        layers: layers,
+        fillOpacity: fillOpacity,
+        borderWidth: borderWidth,
+        getBorderColor: getBorderColor,
+        isInteractive: isInteractive,
+        tooltip: tooltip
+      }, "layers");
+    }
+
+    if (chartLayers.includes('dots') && enableDots) {
+      layerById.dots = jsxRuntime.jsx(react.Fragment, {
+        children: layers.map(function (layer) {
+          return jsxRuntime.jsx(StreamDots, {
+            id: layer.id,
+            color: layer.color,
+            data: layer.data,
+            dotComponent: dotComponent,
+            position: dotPosition,
+            getSize: getDotSize,
+            getColor: getDotColor,
+            getBorderWidth: getDotBorderWidth,
+            getBorderColor: getDotBorderColor
+          }, layer.id);
+        })
+      }, "dots");
+    }
+
+    if (chartLayers.includes('slices') && isInteractive && enableStackTooltip) {
+      layerById.slices = jsxRuntime.jsx(StreamSlices, {
         slices: slices,
         height: innerHeight,
-        getTooltipValue: getTooltipValue,
-        getTooltipLabel: getTooltipLabel
-      }), legends$1.map(function (legend, i) {
-        var legendData = layers.map(function (l) {
-          return {
-            id: l.id,
-            label: l.label,
-            color: l.color,
-            fill: l.fill
-          };
-        }).reverse();
-        return jsxRuntime.jsx(legends.BoxLegendSvg, _objectSpread2(_objectSpread2({}, legend), {}, {
-          containerWidth: innerWidth,
-          containerHeight: innerHeight,
-          data: legendData
-        }), i);
-      })]
+        tooltip: stackTooltip
+      }, "slices");
+    }
+
+    if (chartLayers.includes('legends')) {
+      layerById.legends = jsxRuntime.jsx(react.Fragment, {
+        children: legends$1.map(function (legend, i) {
+          var legendData = layers.map(function (layer) {
+            return {
+              id: layer.id,
+              label: layer.label,
+              color: layer.color,
+              fill: layer.fill
+            };
+          }).reverse();
+          return jsxRuntime.jsx(legends.BoxLegendSvg, _objectSpread2(_objectSpread2({}, legend), {}, {
+            containerWidth: innerWidth,
+            containerHeight: innerHeight,
+            data: legendData
+          }), i);
+        })
+      }, "legends");
+    }
+
+    return jsxRuntime.jsx(core.SvgWrapper, {
+      width: outerWidth,
+      height: outerHeight,
+      margin: margin,
+      defs: boundDefs,
+      role: role,
+      ariaLabel: ariaLabel,
+      ariaLabelledBy: ariaLabelledBy,
+      ariaDescribedBy: ariaDescribedBy,
+      children: chartLayers.map(function (layer, i) {
+        var _layerById$layer;
+
+        if (typeof layer === 'function') {
+          return jsxRuntime.jsx(react.Fragment, {
+            children: react.createElement(layer, layerContext)
+          }, i);
+        }
+
+        return (_layerById$layer = layerById === null || layerById === void 0 ? void 0 : layerById[layer]) !== null && _layerById$layer !== void 0 ? _layerById$layer : null;
+      })
     });
   };
-  var WrappedStream = core.withContainer(Stream);
-  WrappedStream.defaultProps = StreamDefaultProps;
 
+  var Stream = function Stream(_ref2) {
+    var _ref2$isInteractive = _ref2.isInteractive,
+        isInteractive = _ref2$isInteractive === void 0 ? svgDefaultProps.isInteractive : _ref2$isInteractive,
+        _ref2$animate = _ref2.animate,
+        animate = _ref2$animate === void 0 ? svgDefaultProps.animate : _ref2$animate,
+        _ref2$motionConfig = _ref2.motionConfig,
+        motionConfig = _ref2$motionConfig === void 0 ? svgDefaultProps.motionConfig : _ref2$motionConfig,
+        theme = _ref2.theme,
+        renderWrapper = _ref2.renderWrapper,
+        otherProps = _objectWithoutProperties(_ref2, ["isInteractive", "animate", "motionConfig", "theme", "renderWrapper"]);
+
+    return jsxRuntime.jsx(core.Container, {
+      animate: animate,
+      isInteractive: isInteractive,
+      motionConfig: motionConfig,
+      renderWrapper: renderWrapper,
+      theme: theme,
+      children: jsxRuntime.jsx(InnerStream, _objectSpread2({
+        isInteractive: isInteractive
+      }, otherProps))
+    });
+  };
+
   var ResponsiveStream = function ResponsiveStream(props) {
@@ -729,3 +814,3 @@ return jsxRuntime.jsx(core.ResponsiveWrapper, {
             height = _ref.height;
-        return jsxRuntime.jsx(WrappedStream, _objectSpread2({
+        return jsxRuntime.jsx(Stream, _objectSpread2({
           width: width,
@@ -739,5 +824,5 @@ height: height
   exports.ResponsiveStream = ResponsiveStream;
-  exports.Stream = WrappedStream;
-  exports.StreamDefaultProps = StreamDefaultProps;
-  exports.StreamPropTypes = StreamPropTypes;
+  exports.Stream = Stream;
+  exports.defaultProps = defaultProps;
+  exports.svgDefaultProps = svgDefaultProps;
 
@@ -744,0 +829,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

package.json

 {
   "name": "@nivo/stream",
-  "version": "0.73.0",
+  "version": "0.74.0",
   "license": "MIT",
@@ -24,15 +24,16 @@ "author": {
   "module": "./dist/nivo-stream.es.js",
+  "typings": "./dist/types/index.d.ts",
   "files": [
     "README.md",
     "LICENSE.md",
-    "index.d.ts",
-    "dist/"
+    "dist/",
+    "!dist/tsconfig.tsbuildinfo"
   ],
   "dependencies": {
-    "@nivo/axes": "0.73.0",
-    "@nivo/colors": "0.73.0",
-    "@nivo/legends": "0.73.0",
-    "@nivo/scales": "0.73.0",
-    "@nivo/tooltip": "0.73.0",
-    "@react-spring/web": "9.2.4",
+    "@nivo/axes": "0.74.0",
+    "@nivo/colors": "0.74.0",
+    "@nivo/legends": "0.74.0",
+    "@nivo/scales": "0.74.0",
+    "@nivo/tooltip": "0.74.0",
+    "@react-spring/web": "9.2.6",
     "d3-scale": "^3.2.3",
@@ -42,7 +43,8 @@ "d3-shape": "^1.3.5"
   "devDependencies": {
-    "@nivo/core": "0.73.0"
+    "@nivo/core": "0.74.0",
+    "@types/d3-scale": "^3.2.2",
+    "@types/d3-shape": "^2.0.0"
   },
   "peerDependencies": {
-    "@nivo/core": "0.73.0",
-    "prop-types": ">= 15.5.10 < 16.0.0",
+    "@nivo/core": "0.74.0",
     "react": ">= 16.14.0 < 18.0.0"
@@ -53,3 +55,3 @@ },
   },
-  "gitHead": "919f213600a08609939198ea743f7dbde9a572e2"
+  "gitHead": "5d387c6723bb384f276d2b6ce15ca49c0e49948a"
 }

No alert changes

Improved metrics

Total package byte prevSize

277338

12.38%

Dependency count

10

-9.09%

Number of package files

37

270%

Lines of code

2527

15.86%

Worsened metrics

Dev dependency count

3

200%

Dependency changes

• + Added

  @nivo/axes@0.74.0
  (transitive)

• + Added

  @nivo/colors@0.74.0
  (transitive)

• + Added

  @nivo/core@0.74.0
  (transitive)

• + Added

  @nivo/recompose@0.74.0
  (transitive)

• + Added

  @nivo/scales@0.74.0
  (transitive)

• + Added

  @nivo/tooltip@0.74.0
  (transitive)

• + Added

  @react-spring/web@9.2.6
  (transitive)

• - Removed

  @nivo/axes@0.73.0
  (transitive)

• - Removed

  @nivo/colors@0.73.0
  (transitive)

• - Removed

  @nivo/core@0.73.0
  (transitive)

• - Removed

  @nivo/recompose@0.73.0
  (transitive)

• - Removed

  @nivo/scales@0.73.0
  (transitive)

• - Removed

  @nivo/tooltip@0.73.0
  (transitive)

• - Removed

  @react-spring/web@9.2.4
  (transitive)

• Updated

  @nivo/axes@0.74.0

• Updated

  @nivo/colors@0.74.0

• Updated

  @nivo/legends@0.74.0

• Updated

  @nivo/scales@0.74.0

• Updated

  @nivo/tooltip@0.74.0

• Updated

  @react-spring/web@9.2.6