@nivo/sankey - npm Package Compare versions

Comparing version 0.73.0 to 0.74.0

dist/nivo-sankey.cjs.js

@@ -11,11 +11,39 @@ 'use strict';
 var legends = require('@nivo/legends');
-var PropTypes = _interopDefault(require('prop-types'));
 var d3Sankey = require('d3-sankey');
+var tooltip = require('@nivo/tooltip');
+var jsxRuntime = require('react/jsx-runtime');
+var _cloneDeep = _interopDefault(require('lodash/cloneDeep'));
 var colors = require('@nivo/colors');
-var _cloneDeep = _interopDefault(require('lodash/cloneDeep'));
 var web = require('@react-spring/web');
-var tooltip = require('@nivo/tooltip');
-var jsxRuntime = require('react/jsx-runtime');
 var d3Shape = require('d3-shape');
 
+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) {
@@ -64,2 +92,46 @@ if (key in obj) {
 
+var SankeyNodeTooltip = function SankeyNodeTooltip(_ref) {
+  var node = _ref.node;
+  return jsxRuntime.jsx(tooltip.BasicTooltip, {
+    id: node.label,
+    enableChip: true,
+    color: node.color
+  });
+};
+
+var tooltipStyles = {
+  container: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  sourceChip: {
+    marginRight: 7
+  },
+  targetChip: {
+    marginLeft: 7,
+    marginRight: 7
+  }
+};
+var SankeyLinkTooltip = function SankeyLinkTooltip(_ref) {
+  var link = _ref.link;
+  return jsxRuntime.jsx(tooltip.BasicTooltip, {
+    id: jsxRuntime.jsxs("span", {
+      style: tooltipStyles.container,
+      children: [jsxRuntime.jsx(tooltip.Chip, {
+        color: link.source.color,
+        style: tooltipStyles.sourceChip
+      }), jsxRuntime.jsx("strong", {
+        children: link.source.label
+      }), ' > ', jsxRuntime.jsx("strong", {
+        children: link.target.label
+      }), jsxRuntime.jsx(tooltip.Chip, {
+        color: link.target.color,
+        style: tooltipStyles.targetChip
+      }), jsxRuntime.jsx("strong", {
+        children: link.formattedValue
+      })]
+    })
+  });
+};
+
 var sankeyAlignmentPropMapping = {
@@ -72,51 +144,6 @@ center: d3Sankey.sankeyCenter,
 var sankeyAlignmentPropKeys = Object.keys(sankeyAlignmentPropMapping);
-var sankeyAlignmentPropType = PropTypes.oneOf(sankeyAlignmentPropKeys);
 var sankeyAlignmentFromProp = function sankeyAlignmentFromProp(prop) {
   return sankeyAlignmentPropMapping[prop];
 };
-var SankeyPropTypes = _objectSpread2({
-  data: PropTypes.shape({
-    nodes: PropTypes.arrayOf(PropTypes.shape({
-      id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
-    })).isRequired,
-    links: PropTypes.arrayOf(PropTypes.shape({
-      source: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-      target: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
-    })).isRequired
-  }).isRequired,
-  layout: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,
-  align: sankeyAlignmentPropType.isRequired,
-  sort: PropTypes.oneOfType([PropTypes.oneOf(['auto', 'input', 'ascending', 'descending']), PropTypes.func]).isRequired,
-  colors: colors.ordinalColorsPropType.isRequired,
-  nodeOpacity: PropTypes.number.isRequired,
-  nodeHoverOpacity: PropTypes.number.isRequired,
-  nodeHoverOthersOpacity: PropTypes.number.isRequired,
-  nodeThickness: PropTypes.number.isRequired,
-  nodeSpacing: PropTypes.number.isRequired,
-  nodeInnerPadding: PropTypes.number.isRequired,
-  nodeBorderWidth: PropTypes.number.isRequired,
-  nodeBorderColor: colors.inheritedColorPropType,
-  linkOpacity: PropTypes.number.isRequired,
-  linkHoverOpacity: PropTypes.number.isRequired,
-  linkHoverOthersOpacity: PropTypes.number.isRequired,
-  linkContract: PropTypes.number.isRequired,
-  linkBlendMode: core.blendModePropType.isRequired,
-  enableLinkGradient: PropTypes.bool.isRequired,
-  enableLabels: PropTypes.bool.isRequired,
-  labelPosition: PropTypes.oneOf(['inside', 'outside']).isRequired,
-  labelPadding: PropTypes.number.isRequired,
-  labelOrientation: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,
-  labelTextColor: colors.inheritedColorPropType,
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
-  labelFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-  nodeTooltip: PropTypes.func,
-  linkTooltip: PropTypes.func,
-  isInteractive: PropTypes.bool.isRequired,
-  onClick: PropTypes.func.isRequired,
-  tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  legends: PropTypes.arrayOf(PropTypes.shape(legends.LegendPropShape)).isRequired,
-  layers: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['links', 'nodes', 'labels', 'legends']), PropTypes.func])).isRequired,
-  role: PropTypes.string.isRequired
-}, core.motionPropTypes);
-var SankeyDefaultProps = {
+var svgDefaultProps = {
   layout: 'horizontal',
@@ -139,2 +166,3 @@ align: 'center',
   },
+  nodeBorderRadius: 0,
   linkOpacity: 0.25,
@@ -156,3 +184,4 @@ linkHoverOpacity: 0.6,
   isInteractive: true,
-  onClick: core.noop,
+  nodeTooltip: SankeyNodeTooltip,
+  linkTooltip: SankeyLinkTooltip,
   legends: [],
@@ -218,7 +247,9 @@ layers: ['links', 'nodes', 'labels', 'legends'],
 
-var getId = function getId(d) {
-  return d.id;
+var getId = function getId(node) {
+  return node.id;
 };
+
 var computeNodeAndLinks = function computeNodeAndLinks(_ref) {
   var _data = _ref.data,
+      formatValue = _ref.formatValue,
       layout = _ref.layout,
@@ -236,3 +267,5 @@ alignFunction = _ref.alignFunction,
   var sankey = d3Sankey.sankey().nodeAlign(alignFunction).nodeSort(sortFunction).linkSort(linkSortMode).nodeWidth(nodeThickness).nodePadding(nodeSpacing).size(layout === 'horizontal' ? [width, height] : [height, width]).nodeId(getId);
+
   var data = _cloneDeep(_data);
+
   sankey(data);
@@ -242,2 +275,4 @@ data.nodes.forEach(function (node) {
     node.label = getLabel(node);
+    node.formattedValue = formatValue(node.value);
+
     if (layout === 'horizontal') {
@@ -262,2 +297,3 @@ node.x = node.x0 + nodeInnerPadding;
   data.links.forEach(function (link) {
+    link.formattedValue = formatValue(link.value);
     link.color = link.source.color;
@@ -275,2 +311,3 @@ link.pos0 = link.y0;
   var data = _ref2.data,
+      valueFormat = _ref2.valueFormat,
       layout = _ref2.layout,
@@ -287,4 +324,4 @@ width = _ref2.width,
       label = _ref2.label,
-      labelFormat = _ref2.labelFormat,
       labelTextColor = _ref2.labelTextColor;
+
   var _useState = react.useState(null),
@@ -294,2 +331,3 @@ _useState2 = _slicedToArray(_useState, 2),
       setCurrentNode = _useState2[1];
+
   var _useState3 = react.useState(null),
@@ -299,11 +337,19 @@ _useState4 = _slicedToArray(_useState3, 2),
       setCurrentLink = _useState4[1];
+
   var sortFunction = react.useMemo(function () {
     if (sort === 'auto') return undefined;
     if (sort === 'input') return null;
-    if (sort === 'ascending') return function (a, b) {
-      return a.value - b.value;
-    };
-    if (sort === 'descending') return function (a, b) {
-      return b.value - a.value;
-    };
+
+    if (sort === 'ascending') {
+      return function (a, b) {
+        return a.value - b.value;
+      };
+    }
+
+    if (sort === 'descending') {
+      return function (a, b) {
+        return b.value - a.value;
+      };
+    }
+
     return sort;
@@ -313,2 +359,3 @@ }, [sort]);
   var alignFunction = react.useMemo(function () {
+    if (typeof align === 'function') return align;
     return sankeyAlignmentFromProp(align);
@@ -319,9 +366,10 @@ }, [align]);
   var getNodeBorderColor = colors.useInheritedColor(nodeBorderColor, theme);
-  var getLabel = react.useMemo(function () {
-    return core.getLabelGenerator(label, labelFormat);
-  }, [label, labelFormat]);
+  var getLabel = core.usePropertyAccessor(label);
   var getLabelTextColor = colors.useInheritedColor(labelTextColor, theme);
+  var formatValue = core.useValueFormatter(valueFormat);
+
   var _useMemo = react.useMemo(function () {
     return computeNodeAndLinks({
       data: data,
+      formatValue: formatValue,
       layout: layout,
@@ -339,5 +387,6 @@ alignFunction: alignFunction,
     });
-  }, [data, layout, alignFunction, sortFunction, linkSortMode, nodeThickness, nodeSpacing, nodeInnerPadding, width, height, getColor, getLabel]),
+  }, [data, formatValue, layout, alignFunction, sortFunction, linkSortMode, nodeThickness, nodeSpacing, nodeInnerPadding, width, height, getColor, getLabel]),
       nodes = _useMemo.nodes,
       links = _useMemo.links;
+
   var legendData = react.useMemo(function () {
@@ -375,2 +424,3 @@ return nodes.map(function (node) {
       borderColor = _ref.borderColor,
+      borderRadius = _ref.borderRadius,
       setCurrent = _ref.setCurrent,
@@ -380,5 +430,7 @@ isInteractive = _ref.isInteractive,
       tooltip$1 = _ref.tooltip;
+
   var _useMotionConfig = core.useMotionConfig(),
       animate = _useMotionConfig.animate,
       springConfig = _useMotionConfig.config;
+
   var animatedProps = web.useSpring({
@@ -394,25 +446,18 @@ x: x,
   });
+
   var _useTooltip = tooltip.useTooltip(),
       showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
       hideTooltip = _useTooltip.hideTooltip;
-  var tooltipContent = react.useMemo(function () {
-    if (tooltip$1) {
-      return jsxRuntime.jsx(tooltip.BasicTooltip, {
-        id: tooltip$1(node),
-        enableChip: false
-      });
-    }
-    return jsxRuntime.jsx(tooltip.BasicTooltip, {
-      id: node.label,
-      enableChip: true,
-      color: node.color
-    });
-  }, [tooltip$1, node]);
+
   var handleMouseEnter = react.useCallback(function (event) {
     setCurrent(node);
-    showTooltipFromEvent(tooltipContent, event, 'left');
-  }, [setCurrent, node, showTooltipFromEvent, tooltipContent]);
+    showTooltipFromEvent(react.createElement(tooltip$1, {
+      node: node
+    }), event, 'left');
+  }, [setCurrent, node, showTooltipFromEvent, tooltip$1]);
   var handleMouseMove = react.useCallback(function (event) {
-    showTooltipFromEvent(tooltipContent, event, 'left');
-  }, [showTooltipFromEvent, tooltipContent]);
+    showTooltipFromEvent(react.createElement(tooltip$1, {
+      node: node
+    }), event, 'left');
+  }, [showTooltipFromEvent, node, tooltip$1]);
   var handleMouseLeave = react.useCallback(function () {
@@ -423,3 +468,3 @@ setCurrent(null);
   var handleClick = react.useCallback(function (event) {
-    onClick(node, event);
+    onClick === null || onClick === void 0 ? void 0 : onClick(node, event);
   }, [onClick, node]);
@@ -429,6 +474,8 @@ return jsxRuntime.jsx(web.animated.rect, {
     y: animatedProps.y,
-    width: web.to(animatedProps.width, function (v) {
+    rx: borderRadius,
+    ry: borderRadius,
+    width: animatedProps.width.to(function (v) {
       return Math.max(v, 0);
     }),
-    height: web.to(animatedProps.height, function (v) {
+    height: animatedProps.height.to(function (v) {
       return Math.max(v, 0);
@@ -447,3 +494,2 @@ }),
 };
-var SankeyNodesItem$1 = react.memo(SankeyNodesItem);
 
@@ -455,4 +501,5 @@ var SankeyNodes = function SankeyNodes(_ref) {
       nodeHoverOthersOpacity = _ref.nodeHoverOthersOpacity,
-      nodeBorderWidth = _ref.nodeBorderWidth,
-      getNodeBorderColor = _ref.getNodeBorderColor,
+      borderWidth = _ref.borderWidth,
+      getBorderColor = _ref.getBorderColor,
+      borderRadius = _ref.borderRadius,
       setCurrentNode = _ref.setCurrentNode,
@@ -465,2 +512,3 @@ currentNode = _ref.currentNode,
       tooltip = _ref.tooltip;
+
   var getOpacity = function getOpacity(node) {
@@ -471,23 +519,49 @@ if (!currentNode && !currentLink) return nodeOpacity;
   };
-  return nodes.map(function (node) {
-    return jsxRuntime.jsx(SankeyNodesItem$1, {
-      node: node,
-      x: node.x,
-      y: node.y,
-      width: node.width,
-      height: node.height,
-      color: node.color,
-      opacity: getOpacity(node),
-      borderWidth: nodeBorderWidth,
-      borderColor: getNodeBorderColor(node),
-      setCurrent: setCurrentNode,
-      isInteractive: isInteractive,
-      onClick: onClick,
-      tooltip: tooltip
-    }, node.id);
+
+  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: nodes.map(function (node) {
+      return jsxRuntime.jsx(SankeyNodesItem, {
+        node: node,
+        x: node.x,
+        y: node.y,
+        width: node.width,
+        height: node.height,
+        color: node.color,
+        opacity: getOpacity(node),
+        borderWidth: borderWidth,
+        borderColor: getBorderColor(node),
+        borderRadius: borderRadius,
+        setCurrent: setCurrentNode,
+        isInteractive: isInteractive,
+        onClick: onClick,
+        tooltip: tooltip
+      }, node.id);
+    })
   });
 };
-var SankeyNodes$1 = react.memo(SankeyNodes);
 
-var SankeyLinkGradient = react.memo(function (_ref) {
+var sankeyLinkHorizontal = function sankeyLinkHorizontal() {
+  var lineGenerator = d3Shape.line().curve(d3Shape.curveMonotoneX);
+  return function (link, contract) {
+    var thickness = Math.max(1, link.thickness - contract * 2);
+    var halfThickness = thickness / 2;
+    var linkLength = link.target.x0 - link.source.x1;
+    var padLength = linkLength * 0.12;
+    var dots = [[link.source.x1, link.pos0 - halfThickness], [link.source.x1 + padLength, link.pos0 - halfThickness], [link.target.x0 - padLength, link.pos1 - halfThickness], [link.target.x0, link.pos1 - halfThickness], [link.target.x0, link.pos1 + halfThickness], [link.target.x0 - padLength, link.pos1 + halfThickness], [link.source.x1 + padLength, link.pos0 + halfThickness], [link.source.x1, link.pos0 + halfThickness], [link.source.x1, link.pos0 - halfThickness]];
+    return lineGenerator(dots) + 'Z';
+  };
+};
+var sankeyLinkVertical = function sankeyLinkVertical() {
+  var lineGenerator = d3Shape.line().curve(d3Shape.curveMonotoneY);
+  return function (link, contract) {
+    var thickness = Math.max(1, link.thickness - contract * 2);
+    var halfThickness = thickness / 2;
+    var linkLength = link.target.y0 - link.source.y1;
+    var padLength = linkLength * 0.12;
+    var dots = [[link.pos0 + halfThickness, link.source.y1], [link.pos0 + halfThickness, link.source.y1 + padLength], [link.pos1 + halfThickness, link.target.y0 - padLength], [link.pos1 + halfThickness, link.target.y0], [link.pos1 - halfThickness, link.target.y0], [link.pos1 - halfThickness, link.target.y0 - padLength], [link.pos0 - halfThickness, link.source.y1 + padLength], [link.pos0 - halfThickness, link.source.y1], [link.pos0 + halfThickness, link.source.y1]];
+    return lineGenerator(dots) + 'Z';
+  };
+};
+
+var SankeyLinkGradient = function SankeyLinkGradient(_ref) {
   var id = _ref.id,
@@ -497,14 +571,20 @@ layout = _ref.layout,
       endColor = _ref.endColor;
-  var gradientProps = {};
+  var gradientProps;
+
   if (layout === 'horizontal') {
-    gradientProps.x1 = '0%';
-    gradientProps.x2 = '100%';
-    gradientProps.y1 = '0%';
-    gradientProps.y2 = '0%';
+    gradientProps = {
+      x1: '0%',
+      x2: '100%',
+      y1: '0%',
+      y2: '0%'
+    };
   } else {
-    gradientProps.x1 = '0%';
-    gradientProps.x2 = '0%';
-    gradientProps.y1 = '0%';
-    gradientProps.y2 = '100%';
+    gradientProps = {
+      x1: '0%',
+      x2: '0%',
+      y1: '0%',
+      y2: '100%'
+    };
   }
+
   return jsxRuntime.jsxs("linearGradient", _objectSpread2(_objectSpread2({
@@ -522,55 +602,22 @@ id: id,
   }));
-});
-SankeyLinkGradient.displayName = 'SankeyLinkGradient';
+};
 
-var tooltipStyles = {
-  container: {
-    display: 'flex',
-    alignItems: 'center'
-  },
-  sourceChip: {
-    marginRight: 7
-  },
-  targetChip: {
-    marginLeft: 7,
-    marginRight: 7
-  }
-};
-var TooltipContent = function TooltipContent(_ref) {
+var SankeyLinksItem = function SankeyLinksItem(_ref) {
   var link = _ref.link,
-      format = _ref.format;
-  return jsxRuntime.jsxs("span", {
-    style: tooltipStyles.container,
-    children: [jsxRuntime.jsx(tooltip.Chip, {
-      color: link.source.color,
-      style: tooltipStyles.sourceChip
-    }), jsxRuntime.jsx("strong", {
-      children: link.source.label
-    }), ' > ', jsxRuntime.jsx("strong", {
-      children: link.target.label
-    }), jsxRuntime.jsx(tooltip.Chip, {
-      color: link.target.color,
-      style: tooltipStyles.targetChip
-    }), jsxRuntime.jsx("strong", {
-      children: format ? format(link.value) : link.value
-    })]
-  });
-};
-var SankeyLinksItem = function SankeyLinksItem(_ref2) {
-  var link = _ref2.link,
-      layout = _ref2.layout,
-      path = _ref2.path,
-      color = _ref2.color,
-      opacity = _ref2.opacity,
-      blendMode = _ref2.blendMode,
-      enableGradient = _ref2.enableGradient,
-      setCurrent = _ref2.setCurrent,
-      tooltip$1 = _ref2.tooltip,
-      tooltipFormat = _ref2.tooltipFormat,
-      isInteractive = _ref2.isInteractive,
-      onClick = _ref2.onClick;
+      layout = _ref.layout,
+      path = _ref.path,
+      color = _ref.color,
+      opacity = _ref.opacity,
+      blendMode = _ref.blendMode,
+      enableGradient = _ref.enableGradient,
+      setCurrent = _ref.setCurrent,
+      tooltip$1 = _ref.tooltip,
+      isInteractive = _ref.isInteractive,
+      onClick = _ref.onClick;
   var linkId = "".concat(link.source.id, ".").concat(link.target.id);
+
   var _useMotionConfig = core.useMotionConfig(),
       animate = _useMotionConfig.animate,
       springConfig = _useMotionConfig.config;
+
   var animatedPath = core.useAnimatedPath(path);
@@ -583,26 +630,18 @@ var animatedProps = web.useSpring({
   });
+
   var _useTooltip = tooltip.useTooltip(),
       showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
       hideTooltip = _useTooltip.hideTooltip;
-  var tooltipContent = react.useMemo(function () {
-    if (tooltip$1) {
-      return jsxRuntime.jsx(tooltip.BasicTooltip, {
-        id: tooltip$1(link),
-        enableChip: false
-      });
-    }
-    return jsxRuntime.jsx(tooltip.BasicTooltip, {
-      id: jsxRuntime.jsx(TooltipContent, {
-        format: tooltipFormat,
-        link: link
-      })
-    });
-  }, [tooltip$1, tooltipFormat, link]);
+
   var handleMouseEnter = react.useCallback(function (event) {
     setCurrent(link);
-    showTooltipFromEvent(tooltipContent, event, 'left');
-  }, [setCurrent, link, showTooltipFromEvent, tooltipContent]);
+    showTooltipFromEvent(react.createElement(tooltip$1, {
+      link: link
+    }), event, 'left');
+  }, [setCurrent, link, showTooltipFromEvent, tooltip$1]);
   var handleMouseMove = react.useCallback(function (event) {
-    showTooltipFromEvent(tooltipContent, event, 'left');
-  }, [showTooltipFromEvent, tooltipContent]);
+    showTooltipFromEvent(react.createElement(tooltip$1, {
+      link: link
+    }), event, 'left');
+  }, [showTooltipFromEvent, link, tooltip$1]);
   var handleMouseLeave = react.useCallback(function () {
@@ -613,3 +652,3 @@ setCurrent(null);
   var handleClick = react.useCallback(function (event) {
-    onClick(link, event);
+    onClick === null || onClick === void 0 ? void 0 : onClick(link, event);
   }, [onClick, link]);
@@ -636,27 +675,3 @@ return jsxRuntime.jsxs(jsxRuntime.Fragment, {
 };
-var SankeyLinksItem$1 = react.memo(SankeyLinksItem);
 
-var sankeyLinkHorizontal = function sankeyLinkHorizontal() {
-  var lineGenerator = d3Shape.line().curve(d3Shape.curveMonotoneX);
-  return function (n, contract) {
-    var thickness = Math.max(1, n.thickness - contract * 2);
-    var halfThickness = thickness / 2;
-    var linkLength = n.target.x0 - n.source.x1;
-    var padLength = linkLength * 0.12;
-    var dots = [[n.source.x1, n.pos0 - halfThickness], [n.source.x1 + padLength, n.pos0 - halfThickness], [n.target.x0 - padLength, n.pos1 - halfThickness], [n.target.x0, n.pos1 - halfThickness], [n.target.x0, n.pos1 + halfThickness], [n.target.x0 - padLength, n.pos1 + halfThickness], [n.source.x1 + padLength, n.pos0 + halfThickness], [n.source.x1, n.pos0 + halfThickness], [n.source.x1, n.pos0 - halfThickness]];
-    return lineGenerator(dots) + 'Z';
-  };
-};
-var sankeyLinkVertical = function sankeyLinkVertical() {
-  var lineGenerator = d3Shape.line().curve(d3Shape.curveMonotoneY);
-  return function (n, contract) {
-    var thickness = Math.max(1, n.thickness - contract * 2);
-    var halfThickness = thickness / 2;
-    var linkLength = n.target.y0 - n.source.y1;
-    var padLength = linkLength * 0.12;
-    var dots = [[n.pos0 + halfThickness, n.source.y1], [n.pos0 + halfThickness, n.source.y1 + padLength], [n.pos1 + halfThickness, n.target.y0 - padLength], [n.pos1 + halfThickness, n.target.y0], [n.pos1 - halfThickness, n.target.y0], [n.pos1 - halfThickness, n.target.y0 - padLength], [n.pos0 - halfThickness, n.source.y1 + padLength], [n.pos0 - halfThickness, n.source.y1], [n.pos0 + halfThickness, n.source.y1]];
-    return lineGenerator(dots) + 'Z';
-  };
-};
-
 var SankeyLinks = function SankeyLinks(_ref) {
@@ -672,9 +687,9 @@ var links = _ref.links,
       setCurrentLink = _ref.setCurrentLink,
+      currentLink = _ref.currentLink,
       currentNode = _ref.currentNode,
-      currentLink = _ref.currentLink,
       isCurrentLink = _ref.isCurrentLink,
       isInteractive = _ref.isInteractive,
       onClick = _ref.onClick,
-      tooltipFormat = _ref.tooltipFormat,
       tooltip = _ref.tooltip;
+
   var getOpacity = function getOpacity(link) {
@@ -685,21 +700,24 @@ if (!currentNode && !currentLink) return linkOpacity;
   };
-  var getLinkPath = layout === 'horizontal' ? sankeyLinkHorizontal() : sankeyLinkVertical();
-  return links.map(function (link) {
-    return jsxRuntime.jsx(SankeyLinksItem$1, {
-      link: link,
-      layout: layout,
-      path: getLinkPath(link, linkContract),
-      color: link.color,
-      opacity: getOpacity(link),
-      blendMode: linkBlendMode,
-      enableGradient: enableLinkGradient,
-      setCurrent: setCurrentLink,
-      isInteractive: isInteractive,
-      onClick: onClick,
-      tooltip: tooltip,
-      tooltipFormat: tooltipFormat
-    }, "".concat(link.source.id, ".").concat(link.target.id));
+
+  var getLinkPath = react.useMemo(function () {
+    return layout === 'horizontal' ? sankeyLinkHorizontal() : sankeyLinkVertical();
+  }, [layout]);
+  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: links.map(function (link) {
+      return jsxRuntime.jsx(SankeyLinksItem, {
+        link: link,
+        layout: layout,
+        path: getLinkPath(link, linkContract),
+        color: link.color,
+        opacity: getOpacity(link),
+        blendMode: linkBlendMode,
+        enableGradient: enableLinkGradient,
+        setCurrent: setCurrentLink,
+        isInteractive: isInteractive,
+        onClick: onClick,
+        tooltip: tooltip
+      }, "".concat(link.source.id, ".").concat(link.target.id));
+    })
   });
 };
-var SankeyLinks$1 = react.memo(SankeyLinks);
 
@@ -721,4 +739,6 @@ var SankeyLabels = function SankeyLabels(_ref) {
     var textAnchor;
+
     if (layout === 'horizontal') {
       y = node.y + node.height / 2;
+
       if (node.x < width / 2) {
@@ -743,2 +763,3 @@ if (labelPosition === 'inside') {
       x = node.x + node.width / 2;
+
       if (node.y < height / 2) {
@@ -762,2 +783,3 @@ if (labelPosition === 'inside') {
     }
+
     return {
@@ -772,5 +794,7 @@ id: node.id,
   });
+
   var _useMotionConfig = core.useMotionConfig(),
       animate = _useMotionConfig.animate,
       springConfig = _useMotionConfig.config;
+
   var springs = web.useSprings(labels.length, labels.map(function (label) {
@@ -784,56 +808,92 @@ return {
   }));
-  return springs.map(function (animatedProps, index) {
-    var label = labels[index];
-    return jsxRuntime.jsx(web.animated.text, {
-      dominantBaseline: "central",
-      textAnchor: label.textAnchor,
-      transform: animatedProps.transform,
-      style: _objectSpread2(_objectSpread2({}, theme.labels.text), {}, {
-        fill: animatedProps.color,
-        pointerEvents: 'none'
-      }),
-      children: label.label
-    }, label.id);
+  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: springs.map(function (animatedProps, index) {
+      var label = labels[index];
+      return jsxRuntime.jsx(web.animated.text, {
+        dominantBaseline: "central",
+        textAnchor: label.textAnchor,
+        transform: animatedProps.transform,
+        style: _objectSpread2(_objectSpread2({}, theme.labels.text), {}, {
+          fill: animatedProps.color,
+          pointerEvents: 'none'
+        }),
+        children: label.label
+      }, label.id);
+    })
   });
 };
-var SankeyLabels$1 = react.memo(SankeyLabels);
 
-var Sankey = function Sankey(_ref) {
+var InnerSankey = function InnerSankey(_ref) {
   var data = _ref.data,
-      layout = _ref.layout,
-      sort = _ref.sort,
-      align = _ref.align,
+      valueFormat = _ref.valueFormat,
+      _ref$layout = _ref.layout,
+      layout = _ref$layout === void 0 ? svgDefaultProps.layout : _ref$layout,
+      _ref$sort = _ref.sort,
+      sort = _ref$sort === void 0 ? svgDefaultProps.sort : _ref$sort,
+      _ref$align = _ref.align,
+      align = _ref$align === void 0 ? svgDefaultProps.align : _ref$align,
       width = _ref.width,
       height = _ref.height,
       partialMargin = _ref.margin,
-      colors = _ref.colors,
-      nodeThickness = _ref.nodeThickness,
-      nodeSpacing = _ref.nodeSpacing,
-      nodeInnerPadding = _ref.nodeInnerPadding,
-      nodeBorderColor = _ref.nodeBorderColor,
-      nodeOpacity = _ref.nodeOpacity,
-      nodeHoverOpacity = _ref.nodeHoverOpacity,
-      nodeHoverOthersOpacity = _ref.nodeHoverOthersOpacity,
-      nodeBorderWidth = _ref.nodeBorderWidth,
-      linkOpacity = _ref.linkOpacity,
-      linkHoverOpacity = _ref.linkHoverOpacity,
-      linkHoverOthersOpacity = _ref.linkHoverOthersOpacity,
-      linkContract = _ref.linkContract,
-      linkBlendMode = _ref.linkBlendMode,
-      enableLinkGradient = _ref.enableLinkGradient,
-      enableLabels = _ref.enableLabels,
-      labelPosition = _ref.labelPosition,
-      labelPadding = _ref.labelPadding,
-      labelOrientation = _ref.labelOrientation,
-      label = _ref.label,
-      labelFormat = _ref.labelFormat,
-      labelTextColor = _ref.labelTextColor,
-      nodeTooltip = _ref.nodeTooltip,
-      linkTooltip = _ref.linkTooltip,
-      isInteractive = _ref.isInteractive,
+      _ref$colors = _ref.colors,
+      colors = _ref$colors === void 0 ? svgDefaultProps.colors : _ref$colors,
+      _ref$nodeThickness = _ref.nodeThickness,
+      nodeThickness = _ref$nodeThickness === void 0 ? svgDefaultProps.nodeThickness : _ref$nodeThickness,
+      _ref$nodeSpacing = _ref.nodeSpacing,
+      nodeSpacing = _ref$nodeSpacing === void 0 ? svgDefaultProps.nodeThickness : _ref$nodeSpacing,
+      _ref$nodeInnerPadding = _ref.nodeInnerPadding,
+      nodeInnerPadding = _ref$nodeInnerPadding === void 0 ? svgDefaultProps.nodeInnerPadding : _ref$nodeInnerPadding,
+      _ref$nodeBorderColor = _ref.nodeBorderColor,
+      nodeBorderColor = _ref$nodeBorderColor === void 0 ? svgDefaultProps.nodeBorderColor : _ref$nodeBorderColor,
+      _ref$nodeOpacity = _ref.nodeOpacity,
+      nodeOpacity = _ref$nodeOpacity === void 0 ? svgDefaultProps.nodeOpacity : _ref$nodeOpacity,
+      _ref$nodeHoverOpacity = _ref.nodeHoverOpacity,
+      nodeHoverOpacity = _ref$nodeHoverOpacity === void 0 ? svgDefaultProps.nodeHoverOpacity : _ref$nodeHoverOpacity,
+      _ref$nodeHoverOthersO = _ref.nodeHoverOthersOpacity,
+      nodeHoverOthersOpacity = _ref$nodeHoverOthersO === void 0 ? svgDefaultProps.nodeHoverOthersOpacity : _ref$nodeHoverOthersO,
+      _ref$nodeBorderWidth = _ref.nodeBorderWidth,
+      nodeBorderWidth = _ref$nodeBorderWidth === void 0 ? svgDefaultProps.nodeBorderWidth : _ref$nodeBorderWidth,
+      _ref$nodeBorderRadius = _ref.nodeBorderRadius,
+      nodeBorderRadius = _ref$nodeBorderRadius === void 0 ? svgDefaultProps.nodeBorderRadius : _ref$nodeBorderRadius,
+      _ref$linkOpacity = _ref.linkOpacity,
+      linkOpacity = _ref$linkOpacity === void 0 ? svgDefaultProps.linkOpacity : _ref$linkOpacity,
+      _ref$linkHoverOpacity = _ref.linkHoverOpacity,
+      linkHoverOpacity = _ref$linkHoverOpacity === void 0 ? svgDefaultProps.linkHoverOpacity : _ref$linkHoverOpacity,
+      _ref$linkHoverOthersO = _ref.linkHoverOthersOpacity,
+      linkHoverOthersOpacity = _ref$linkHoverOthersO === void 0 ? svgDefaultProps.linkHoverOthersOpacity : _ref$linkHoverOthersO,
+      _ref$linkContract = _ref.linkContract,
+      linkContract = _ref$linkContract === void 0 ? svgDefaultProps.linkContract : _ref$linkContract,
+      _ref$linkBlendMode = _ref.linkBlendMode,
+      linkBlendMode = _ref$linkBlendMode === void 0 ? svgDefaultProps.linkBlendMode : _ref$linkBlendMode,
+      _ref$enableLinkGradie = _ref.enableLinkGradient,
+      enableLinkGradient = _ref$enableLinkGradie === void 0 ? svgDefaultProps.enableLinkGradient : _ref$enableLinkGradie,
+      _ref$enableLabels = _ref.enableLabels,
+      enableLabels = _ref$enableLabels === void 0 ? svgDefaultProps.enableLabels : _ref$enableLabels,
+      _ref$labelPosition = _ref.labelPosition,
+      labelPosition = _ref$labelPosition === void 0 ? svgDefaultProps.labelPosition : _ref$labelPosition,
+      _ref$labelPadding = _ref.labelPadding,
+      labelPadding = _ref$labelPadding === void 0 ? svgDefaultProps.labelPadding : _ref$labelPadding,
+      _ref$labelOrientation = _ref.labelOrientation,
+      labelOrientation = _ref$labelOrientation === void 0 ? svgDefaultProps.labelOrientation : _ref$labelOrientation,
+      _ref$label = _ref.label,
+      label = _ref$label === void 0 ? svgDefaultProps.label : _ref$label,
+      _ref$labelTextColor = _ref.labelTextColor,
+      labelTextColor = _ref$labelTextColor === void 0 ? svgDefaultProps.labelTextColor : _ref$labelTextColor,
+      _ref$nodeTooltip = _ref.nodeTooltip,
+      nodeTooltip = _ref$nodeTooltip === void 0 ? svgDefaultProps.nodeTooltip : _ref$nodeTooltip,
+      _ref$linkTooltip = _ref.linkTooltip,
+      linkTooltip = _ref$linkTooltip === void 0 ? svgDefaultProps.linkTooltip : _ref$linkTooltip,
+      _ref$isInteractive = _ref.isInteractive,
+      isInteractive = _ref$isInteractive === void 0 ? svgDefaultProps.isInteractive : _ref$isInteractive,
       onClick = _ref.onClick,
-      tooltipFormat = _ref.tooltipFormat,
-      legends$1 = _ref.legends,
-      layers = _ref.layers,
-      role = _ref.role;
+      _ref$legends = _ref.legends,
+      legends$1 = _ref$legends === void 0 ? svgDefaultProps.legends : _ref$legends,
+      _ref$layers = _ref.layers,
+      layers = _ref$layers === void 0 ? svgDefaultProps.layers : _ref$layers,
+      _ref$role = _ref.role,
+      role = _ref$role === void 0 ? svgDefaultProps.role : _ref$role,
+      ariaLabel = _ref.ariaLabel,
+      ariaLabelledBy = _ref.ariaLabelledBy,
+      ariaDescribedBy = _ref.ariaDescribedBy;
+
   var _useDimensions = core.useDimensions(width, height, partialMargin),
@@ -845,4 +905,6 @@ margin = _useDimensions.margin,
       outerHeight = _useDimensions.outerHeight;
+
   var _useSankey = useSankey({
     data: data,
+    valueFormat: valueFormat,
     layout: layout,
@@ -859,3 +921,2 @@ width: innerWidth,
     label: label,
-    labelFormat: labelFormat,
     labelTextColor: labelTextColor
@@ -872,8 +933,11 @@ }),
       getLabelTextColor = _useSankey.getLabelTextColor;
+
   var isCurrentNode = function isCurrentNode() {
     return false;
   };
+
   var isCurrentLink = function isCurrentLink() {
     return false;
   };
+
   if (currentLink) {
@@ -884,2 +948,3 @@ isCurrentNode = function isCurrentNode(_ref2) {
     };
+
     isCurrentLink = function isCurrentLink(_ref3) {
@@ -891,2 +956,3 @@ var source = _ref3.source,
   }
+
   if (currentNode) {
@@ -905,2 +971,3 @@ var currentNodeIds = [currentNode.id];
     currentNodeIds = _uniq(currentNodeIds);
+
     isCurrentNode = function isCurrentNode(_ref6) {
@@ -910,2 +977,3 @@ var id = _ref6.id;
     };
+
     isCurrentLink = function isCurrentLink(_ref7) {
@@ -917,2 +985,3 @@ var source = _ref7.source,
   }
+
   var layerProps = {
@@ -928,3 +997,10 @@ links: links,
   var layerById = {
-    links: jsxRuntime.jsx(SankeyLinks$1, {
+    links: null,
+    nodes: null,
+    labels: null,
+    legends: null
+  };
+
+  if (layers.includes('links')) {
+    layerById.links = jsxRuntime.jsx(SankeyLinks, {
       links: links,
@@ -944,6 +1020,8 @@ layout: layout,
       onClick: onClick,
-      tooltip: linkTooltip,
-      tooltipFormat: tooltipFormat
-    }, "links"),
-    nodes: jsxRuntime.jsx(SankeyNodes$1, {
+      tooltip: linkTooltip
+    }, "links");
+  }
+
+  if (layers.includes('nodes')) {
+    layerById.nodes = jsxRuntime.jsx(SankeyNodes, {
       nodes: nodes,
@@ -953,4 +1031,5 @@ nodeOpacity: nodeOpacity,
       nodeHoverOthersOpacity: nodeHoverOthersOpacity,
-      nodeBorderWidth: nodeBorderWidth,
-      getNodeBorderColor: getNodeBorderColor,
+      borderWidth: nodeBorderWidth,
+      borderRadius: nodeBorderRadius,
+      getBorderColor: getNodeBorderColor,
       setCurrentNode: setCurrentNode,
@@ -962,16 +1041,8 @@ currentNode: currentNode,
       onClick: onClick,
-      tooltip: nodeTooltip,
-      tooltipFormat: tooltipFormat
-    }, "nodes"),
-    labels: null,
-    legends: legends$1.map(function (legend, i) {
-      return jsxRuntime.jsx(legends.BoxLegendSvg, _objectSpread2(_objectSpread2({}, legend), {}, {
-        containerWidth: innerWidth,
-        containerHeight: innerHeight,
-        data: legendData
-      }), "legend".concat(i));
-    })
-  };
-  if (enableLabels) {
-    layerById.labels = jsxRuntime.jsx(SankeyLabels$1, {
+      tooltip: nodeTooltip
+    }, "nodes");
+  }
+
+  if (layers.includes('labels') && enableLabels) {
+    layerById.labels = jsxRuntime.jsx(SankeyLabels, {
       nodes: nodes,
@@ -987,2 +1058,15 @@ layout: layout,
   }
+
+  if (layers.includes('legends')) {
+    layerById.legends = jsxRuntime.jsx(react.Fragment, {
+      children: legends$1.map(function (legend, i) {
+        return jsxRuntime.jsx(legends.BoxLegendSvg, _objectSpread2(_objectSpread2({}, legend), {}, {
+          containerWidth: innerWidth,
+          containerHeight: innerHeight,
+          data: legendData
+        }), "legend".concat(i));
+      })
+    }, "legends");
+  }
+
   return jsxRuntime.jsx(core.SvgWrapper, {
@@ -993,15 +1077,42 @@ width: outerWidth,
     role: role,
+    ariaLabel: ariaLabel,
+    ariaLabelledBy: ariaLabelledBy,
+    ariaDescribedBy: ariaDescribedBy,
     children: layers.map(function (layer, i) {
+      var _layerById$layer;
+
       if (typeof layer === 'function') {
         return jsxRuntime.jsx(react.Fragment, {
-          children: layer(layerProps)
+          children: react.createElement(layer, layerProps)
         }, i);
       }
-      return layerById[layer];
+
+      return (_layerById$layer = layerById === null || layerById === void 0 ? void 0 : layerById[layer]) !== null && _layerById$layer !== void 0 ? _layerById$layer : null;
     })
   });
 };
-var WrappedSankey = core.withContainer(Sankey);
-WrappedSankey.defaultProps = SankeyDefaultProps;
 
+var Sankey = function Sankey(_ref8) {
+  var _ref8$isInteractive = _ref8.isInteractive,
+      isInteractive = _ref8$isInteractive === void 0 ? svgDefaultProps.isInteractive : _ref8$isInteractive,
+      _ref8$animate = _ref8.animate,
+      animate = _ref8$animate === void 0 ? svgDefaultProps.animate : _ref8$animate,
+      _ref8$motionConfig = _ref8.motionConfig,
+      motionConfig = _ref8$motionConfig === void 0 ? svgDefaultProps.motionConfig : _ref8$motionConfig,
+      theme = _ref8.theme,
+      renderWrapper = _ref8.renderWrapper,
+      otherProps = _objectWithoutProperties(_ref8, ["isInteractive", "animate", "motionConfig", "theme", "renderWrapper"]);
+
+  return jsxRuntime.jsx(core.Container, {
+    animate: animate,
+    isInteractive: isInteractive,
+    motionConfig: motionConfig,
+    renderWrapper: renderWrapper,
+    theme: theme,
+    children: jsxRuntime.jsx(InnerSankey, _objectSpread2({
+      isInteractive: isInteractive
+    }, otherProps))
+  });
+};
+
 var ResponsiveSankey = function ResponsiveSankey(props) {
@@ -1012,3 +1123,3 @@ return jsxRuntime.jsx(core.ResponsiveWrapper, {
           height = _ref.height;
-      return jsxRuntime.jsx(WrappedSankey, _objectSpread2({
+      return jsxRuntime.jsx(Sankey, _objectSpread2({
         width: width,
@@ -1022,9 +1133,7 @@ height: height
 exports.ResponsiveSankey = ResponsiveSankey;
-exports.Sankey = WrappedSankey;
-exports.SankeyDefaultProps = SankeyDefaultProps;
-exports.SankeyPropTypes = SankeyPropTypes;
+exports.Sankey = Sankey;
 exports.sankeyAlignmentFromProp = sankeyAlignmentFromProp;
 exports.sankeyAlignmentPropKeys = sankeyAlignmentPropKeys;
 exports.sankeyAlignmentPropMapping = sankeyAlignmentPropMapping;
-exports.sankeyAlignmentPropType = sankeyAlignmentPropType;
+exports.svgDefaultProps = svgDefaultProps;
 //# sourceMappingURL=nivo-sankey.cjs.js.map

dist/nivo-sankey.es.js

 import _uniq from 'lodash/uniq';
-import { useState, useMemo, memo, useCallback, Fragment as Fragment$1 } from 'react';
-import { blendModePropType, motionPropTypes, noop, useTheme, getLabelGenerator, useMotionConfig, useAnimatedPath, withContainer, useDimensions, SvgWrapper, ResponsiveWrapper } from '@nivo/core';
-import { LegendPropShape, BoxLegendSvg } from '@nivo/legends';
-import PropTypes from 'prop-types';
+import { useState, useMemo, useCallback, createElement, Fragment as Fragment$1 } from 'react';
+import { useTheme, usePropertyAccessor, useValueFormatter, useMotionConfig, useAnimatedPath, Container, useDimensions, SvgWrapper, ResponsiveWrapper } from '@nivo/core';
+import { BoxLegendSvg } from '@nivo/legends';
 import { sankeyCenter, sankeyJustify, sankeyLeft, sankeyRight, sankey } from 'd3-sankey';
-import { ordinalColorsPropType, inheritedColorPropType, useOrdinalColorScale, useInheritedColor } from '@nivo/colors';
+import { BasicTooltip, Chip, useTooltip } from '@nivo/tooltip';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import _cloneDeep from 'lodash/cloneDeep';
-import { useSpring, animated, to, useSprings } from '@react-spring/web';
-import { useTooltip, BasicTooltip, Chip } from '@nivo/tooltip';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useOrdinalColorScale, useInheritedColor } from '@nivo/colors';
+import { useSpring, animated, useSprings } from '@react-spring/web';
 import { line, curveMonotoneX, curveMonotoneY } from 'd3-shape';
 
+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,2 +85,46 @@ if (key in obj) {
 
+var SankeyNodeTooltip = function SankeyNodeTooltip(_ref) {
+  var node = _ref.node;
+  return jsx(BasicTooltip, {
+    id: node.label,
+    enableChip: true,
+    color: node.color
+  });
+};
+
+var tooltipStyles = {
+  container: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  sourceChip: {
+    marginRight: 7
+  },
+  targetChip: {
+    marginLeft: 7,
+    marginRight: 7
+  }
+};
+var SankeyLinkTooltip = function SankeyLinkTooltip(_ref) {
+  var link = _ref.link;
+  return jsx(BasicTooltip, {
+    id: jsxs("span", {
+      style: tooltipStyles.container,
+      children: [jsx(Chip, {
+        color: link.source.color,
+        style: tooltipStyles.sourceChip
+      }), jsx("strong", {
+        children: link.source.label
+      }), ' > ', jsx("strong", {
+        children: link.target.label
+      }), jsx(Chip, {
+        color: link.target.color,
+        style: tooltipStyles.targetChip
+      }), jsx("strong", {
+        children: link.formattedValue
+      })]
+    })
+  });
+};
+
 var sankeyAlignmentPropMapping = {
@@ -65,51 +137,6 @@ center: sankeyCenter,
 var sankeyAlignmentPropKeys = Object.keys(sankeyAlignmentPropMapping);
-var sankeyAlignmentPropType = PropTypes.oneOf(sankeyAlignmentPropKeys);
 var sankeyAlignmentFromProp = function sankeyAlignmentFromProp(prop) {
   return sankeyAlignmentPropMapping[prop];
 };
-var SankeyPropTypes = _objectSpread2({
-  data: PropTypes.shape({
-    nodes: PropTypes.arrayOf(PropTypes.shape({
-      id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
-    })).isRequired,
-    links: PropTypes.arrayOf(PropTypes.shape({
-      source: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-      target: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
-    })).isRequired
-  }).isRequired,
-  layout: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,
-  align: sankeyAlignmentPropType.isRequired,
-  sort: PropTypes.oneOfType([PropTypes.oneOf(['auto', 'input', 'ascending', 'descending']), PropTypes.func]).isRequired,
-  colors: ordinalColorsPropType.isRequired,
-  nodeOpacity: PropTypes.number.isRequired,
-  nodeHoverOpacity: PropTypes.number.isRequired,
-  nodeHoverOthersOpacity: PropTypes.number.isRequired,
-  nodeThickness: PropTypes.number.isRequired,
-  nodeSpacing: PropTypes.number.isRequired,
-  nodeInnerPadding: PropTypes.number.isRequired,
-  nodeBorderWidth: PropTypes.number.isRequired,
-  nodeBorderColor: inheritedColorPropType,
-  linkOpacity: PropTypes.number.isRequired,
-  linkHoverOpacity: PropTypes.number.isRequired,
-  linkHoverOthersOpacity: PropTypes.number.isRequired,
-  linkContract: PropTypes.number.isRequired,
-  linkBlendMode: blendModePropType.isRequired,
-  enableLinkGradient: PropTypes.bool.isRequired,
-  enableLabels: PropTypes.bool.isRequired,
-  labelPosition: PropTypes.oneOf(['inside', 'outside']).isRequired,
-  labelPadding: PropTypes.number.isRequired,
-  labelOrientation: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,
-  labelTextColor: inheritedColorPropType,
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
-  labelFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-  nodeTooltip: PropTypes.func,
-  linkTooltip: PropTypes.func,
-  isInteractive: PropTypes.bool.isRequired,
-  onClick: PropTypes.func.isRequired,
-  tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  legends: PropTypes.arrayOf(PropTypes.shape(LegendPropShape)).isRequired,
-  layers: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['links', 'nodes', 'labels', 'legends']), PropTypes.func])).isRequired,
-  role: PropTypes.string.isRequired
-}, motionPropTypes);
-var SankeyDefaultProps = {
+var svgDefaultProps = {
   layout: 'horizontal',
@@ -132,2 +159,3 @@ align: 'center',
   },
+  nodeBorderRadius: 0,
   linkOpacity: 0.25,
@@ -149,3 +177,4 @@ linkHoverOpacity: 0.6,
   isInteractive: true,
-  onClick: noop,
+  nodeTooltip: SankeyNodeTooltip,
+  linkTooltip: SankeyLinkTooltip,
   legends: [],
@@ -211,7 +240,9 @@ layers: ['links', 'nodes', 'labels', 'legends'],
 
-var getId = function getId(d) {
-  return d.id;
+var getId = function getId(node) {
+  return node.id;
 };
+
 var computeNodeAndLinks = function computeNodeAndLinks(_ref) {
   var _data = _ref.data,
+      formatValue = _ref.formatValue,
       layout = _ref.layout,
@@ -229,3 +260,5 @@ alignFunction = _ref.alignFunction,
   var sankey$1 = sankey().nodeAlign(alignFunction).nodeSort(sortFunction).linkSort(linkSortMode).nodeWidth(nodeThickness).nodePadding(nodeSpacing).size(layout === 'horizontal' ? [width, height] : [height, width]).nodeId(getId);
+
   var data = _cloneDeep(_data);
+
   sankey$1(data);
@@ -235,2 +268,4 @@ data.nodes.forEach(function (node) {
     node.label = getLabel(node);
+    node.formattedValue = formatValue(node.value);
+
     if (layout === 'horizontal') {
@@ -255,2 +290,3 @@ node.x = node.x0 + nodeInnerPadding;
   data.links.forEach(function (link) {
+    link.formattedValue = formatValue(link.value);
     link.color = link.source.color;
@@ -268,2 +304,3 @@ link.pos0 = link.y0;
   var data = _ref2.data,
+      valueFormat = _ref2.valueFormat,
       layout = _ref2.layout,
@@ -280,4 +317,4 @@ width = _ref2.width,
       label = _ref2.label,
-      labelFormat = _ref2.labelFormat,
       labelTextColor = _ref2.labelTextColor;
+
   var _useState = useState(null),
@@ -287,2 +324,3 @@ _useState2 = _slicedToArray(_useState, 2),
       setCurrentNode = _useState2[1];
+
   var _useState3 = useState(null),
@@ -292,11 +330,19 @@ _useState4 = _slicedToArray(_useState3, 2),
       setCurrentLink = _useState4[1];
+
   var sortFunction = useMemo(function () {
     if (sort === 'auto') return undefined;
     if (sort === 'input') return null;
-    if (sort === 'ascending') return function (a, b) {
-      return a.value - b.value;
-    };
-    if (sort === 'descending') return function (a, b) {
-      return b.value - a.value;
-    };
+
+    if (sort === 'ascending') {
+      return function (a, b) {
+        return a.value - b.value;
+      };
+    }
+
+    if (sort === 'descending') {
+      return function (a, b) {
+        return b.value - a.value;
+      };
+    }
+
     return sort;
@@ -306,2 +352,3 @@ }, [sort]);
   var alignFunction = useMemo(function () {
+    if (typeof align === 'function') return align;
     return sankeyAlignmentFromProp(align);
@@ -312,9 +359,10 @@ }, [align]);
   var getNodeBorderColor = useInheritedColor(nodeBorderColor, theme);
-  var getLabel = useMemo(function () {
-    return getLabelGenerator(label, labelFormat);
-  }, [label, labelFormat]);
+  var getLabel = usePropertyAccessor(label);
   var getLabelTextColor = useInheritedColor(labelTextColor, theme);
+  var formatValue = useValueFormatter(valueFormat);
+
   var _useMemo = useMemo(function () {
     return computeNodeAndLinks({
       data: data,
+      formatValue: formatValue,
       layout: layout,
@@ -332,5 +380,6 @@ alignFunction: alignFunction,
     });
-  }, [data, layout, alignFunction, sortFunction, linkSortMode, nodeThickness, nodeSpacing, nodeInnerPadding, width, height, getColor, getLabel]),
+  }, [data, formatValue, layout, alignFunction, sortFunction, linkSortMode, nodeThickness, nodeSpacing, nodeInnerPadding, width, height, getColor, getLabel]),
       nodes = _useMemo.nodes,
       links = _useMemo.links;
+
   var legendData = useMemo(function () {
@@ -368,2 +417,3 @@ return nodes.map(function (node) {
       borderColor = _ref.borderColor,
+      borderRadius = _ref.borderRadius,
       setCurrent = _ref.setCurrent,
@@ -373,5 +423,7 @@ isInteractive = _ref.isInteractive,
       tooltip = _ref.tooltip;
+
   var _useMotionConfig = useMotionConfig(),
       animate = _useMotionConfig.animate,
       springConfig = _useMotionConfig.config;
+
   var animatedProps = useSpring({
@@ -387,25 +439,18 @@ x: x,
   });
+
   var _useTooltip = useTooltip(),
       showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
       hideTooltip = _useTooltip.hideTooltip;
-  var tooltipContent = useMemo(function () {
-    if (tooltip) {
-      return jsx(BasicTooltip, {
-        id: tooltip(node),
-        enableChip: false
-      });
-    }
-    return jsx(BasicTooltip, {
-      id: node.label,
-      enableChip: true,
-      color: node.color
-    });
-  }, [tooltip, node]);
+
   var handleMouseEnter = useCallback(function (event) {
     setCurrent(node);
-    showTooltipFromEvent(tooltipContent, event, 'left');
-  }, [setCurrent, node, showTooltipFromEvent, tooltipContent]);
+    showTooltipFromEvent(createElement(tooltip, {
+      node: node
+    }), event, 'left');
+  }, [setCurrent, node, showTooltipFromEvent, tooltip]);
   var handleMouseMove = useCallback(function (event) {
-    showTooltipFromEvent(tooltipContent, event, 'left');
-  }, [showTooltipFromEvent, tooltipContent]);
+    showTooltipFromEvent(createElement(tooltip, {
+      node: node
+    }), event, 'left');
+  }, [showTooltipFromEvent, node, tooltip]);
   var handleMouseLeave = useCallback(function () {
@@ -416,3 +461,3 @@ setCurrent(null);
   var handleClick = useCallback(function (event) {
-    onClick(node, event);
+    onClick === null || onClick === void 0 ? void 0 : onClick(node, event);
   }, [onClick, node]);
@@ -422,6 +467,8 @@ return jsx(animated.rect, {
     y: animatedProps.y,
-    width: to(animatedProps.width, function (v) {
+    rx: borderRadius,
+    ry: borderRadius,
+    width: animatedProps.width.to(function (v) {
       return Math.max(v, 0);
     }),
-    height: to(animatedProps.height, function (v) {
+    height: animatedProps.height.to(function (v) {
       return Math.max(v, 0);
@@ -440,3 +487,2 @@ }),
 };
-var SankeyNodesItem$1 = memo(SankeyNodesItem);
 
@@ -448,4 +494,5 @@ var SankeyNodes = function SankeyNodes(_ref) {
       nodeHoverOthersOpacity = _ref.nodeHoverOthersOpacity,
-      nodeBorderWidth = _ref.nodeBorderWidth,
-      getNodeBorderColor = _ref.getNodeBorderColor,
+      borderWidth = _ref.borderWidth,
+      getBorderColor = _ref.getBorderColor,
+      borderRadius = _ref.borderRadius,
       setCurrentNode = _ref.setCurrentNode,
@@ -458,2 +505,3 @@ currentNode = _ref.currentNode,
       tooltip = _ref.tooltip;
+
   var getOpacity = function getOpacity(node) {
@@ -464,23 +512,49 @@ if (!currentNode && !currentLink) return nodeOpacity;
   };
-  return nodes.map(function (node) {
-    return jsx(SankeyNodesItem$1, {
-      node: node,
-      x: node.x,
-      y: node.y,
-      width: node.width,
-      height: node.height,
-      color: node.color,
-      opacity: getOpacity(node),
-      borderWidth: nodeBorderWidth,
-      borderColor: getNodeBorderColor(node),
-      setCurrent: setCurrentNode,
-      isInteractive: isInteractive,
-      onClick: onClick,
-      tooltip: tooltip
-    }, node.id);
+
+  return jsx(Fragment, {
+    children: nodes.map(function (node) {
+      return jsx(SankeyNodesItem, {
+        node: node,
+        x: node.x,
+        y: node.y,
+        width: node.width,
+        height: node.height,
+        color: node.color,
+        opacity: getOpacity(node),
+        borderWidth: borderWidth,
+        borderColor: getBorderColor(node),
+        borderRadius: borderRadius,
+        setCurrent: setCurrentNode,
+        isInteractive: isInteractive,
+        onClick: onClick,
+        tooltip: tooltip
+      }, node.id);
+    })
   });
 };
-var SankeyNodes$1 = memo(SankeyNodes);
 
-var SankeyLinkGradient = memo(function (_ref) {
+var sankeyLinkHorizontal = function sankeyLinkHorizontal() {
+  var lineGenerator = line().curve(curveMonotoneX);
+  return function (link, contract) {
+    var thickness = Math.max(1, link.thickness - contract * 2);
+    var halfThickness = thickness / 2;
+    var linkLength = link.target.x0 - link.source.x1;
+    var padLength = linkLength * 0.12;
+    var dots = [[link.source.x1, link.pos0 - halfThickness], [link.source.x1 + padLength, link.pos0 - halfThickness], [link.target.x0 - padLength, link.pos1 - halfThickness], [link.target.x0, link.pos1 - halfThickness], [link.target.x0, link.pos1 + halfThickness], [link.target.x0 - padLength, link.pos1 + halfThickness], [link.source.x1 + padLength, link.pos0 + halfThickness], [link.source.x1, link.pos0 + halfThickness], [link.source.x1, link.pos0 - halfThickness]];
+    return lineGenerator(dots) + 'Z';
+  };
+};
+var sankeyLinkVertical = function sankeyLinkVertical() {
+  var lineGenerator = line().curve(curveMonotoneY);
+  return function (link, contract) {
+    var thickness = Math.max(1, link.thickness - contract * 2);
+    var halfThickness = thickness / 2;
+    var linkLength = link.target.y0 - link.source.y1;
+    var padLength = linkLength * 0.12;
+    var dots = [[link.pos0 + halfThickness, link.source.y1], [link.pos0 + halfThickness, link.source.y1 + padLength], [link.pos1 + halfThickness, link.target.y0 - padLength], [link.pos1 + halfThickness, link.target.y0], [link.pos1 - halfThickness, link.target.y0], [link.pos1 - halfThickness, link.target.y0 - padLength], [link.pos0 - halfThickness, link.source.y1 + padLength], [link.pos0 - halfThickness, link.source.y1], [link.pos0 + halfThickness, link.source.y1]];
+    return lineGenerator(dots) + 'Z';
+  };
+};
+
+var SankeyLinkGradient = function SankeyLinkGradient(_ref) {
   var id = _ref.id,
@@ -490,14 +564,20 @@ layout = _ref.layout,
       endColor = _ref.endColor;
-  var gradientProps = {};
+  var gradientProps;
+
   if (layout === 'horizontal') {
-    gradientProps.x1 = '0%';
-    gradientProps.x2 = '100%';
-    gradientProps.y1 = '0%';
-    gradientProps.y2 = '0%';
+    gradientProps = {
+      x1: '0%',
+      x2: '100%',
+      y1: '0%',
+      y2: '0%'
+    };
   } else {
-    gradientProps.x1 = '0%';
-    gradientProps.x2 = '0%';
-    gradientProps.y1 = '0%';
-    gradientProps.y2 = '100%';
+    gradientProps = {
+      x1: '0%',
+      x2: '0%',
+      y1: '0%',
+      y2: '100%'
+    };
   }
+
   return jsxs("linearGradient", _objectSpread2(_objectSpread2({
@@ -515,55 +595,22 @@ id: id,
   }));
-});
-SankeyLinkGradient.displayName = 'SankeyLinkGradient';
+};
 
-var tooltipStyles = {
-  container: {
-    display: 'flex',
-    alignItems: 'center'
-  },
-  sourceChip: {
-    marginRight: 7
-  },
-  targetChip: {
-    marginLeft: 7,
-    marginRight: 7
-  }
-};
-var TooltipContent = function TooltipContent(_ref) {
+var SankeyLinksItem = function SankeyLinksItem(_ref) {
   var link = _ref.link,
-      format = _ref.format;
-  return jsxs("span", {
-    style: tooltipStyles.container,
-    children: [jsx(Chip, {
-      color: link.source.color,
-      style: tooltipStyles.sourceChip
-    }), jsx("strong", {
-      children: link.source.label
-    }), ' > ', jsx("strong", {
-      children: link.target.label
-    }), jsx(Chip, {
-      color: link.target.color,
-      style: tooltipStyles.targetChip
-    }), jsx("strong", {
-      children: format ? format(link.value) : link.value
-    })]
-  });
-};
-var SankeyLinksItem = function SankeyLinksItem(_ref2) {
-  var link = _ref2.link,
-      layout = _ref2.layout,
-      path = _ref2.path,
-      color = _ref2.color,
-      opacity = _ref2.opacity,
-      blendMode = _ref2.blendMode,
-      enableGradient = _ref2.enableGradient,
-      setCurrent = _ref2.setCurrent,
-      tooltip = _ref2.tooltip,
-      tooltipFormat = _ref2.tooltipFormat,
-      isInteractive = _ref2.isInteractive,
-      onClick = _ref2.onClick;
+      layout = _ref.layout,
+      path = _ref.path,
+      color = _ref.color,
+      opacity = _ref.opacity,
+      blendMode = _ref.blendMode,
+      enableGradient = _ref.enableGradient,
+      setCurrent = _ref.setCurrent,
+      tooltip = _ref.tooltip,
+      isInteractive = _ref.isInteractive,
+      onClick = _ref.onClick;
   var linkId = "".concat(link.source.id, ".").concat(link.target.id);
+
   var _useMotionConfig = useMotionConfig(),
       animate = _useMotionConfig.animate,
       springConfig = _useMotionConfig.config;
+
   var animatedPath = useAnimatedPath(path);
@@ -576,26 +623,18 @@ var animatedProps = useSpring({
   });
+
   var _useTooltip = useTooltip(),
       showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
       hideTooltip = _useTooltip.hideTooltip;
-  var tooltipContent = useMemo(function () {
-    if (tooltip) {
-      return jsx(BasicTooltip, {
-        id: tooltip(link),
-        enableChip: false
-      });
-    }
-    return jsx(BasicTooltip, {
-      id: jsx(TooltipContent, {
-        format: tooltipFormat,
-        link: link
-      })
-    });
-  }, [tooltip, tooltipFormat, link]);
+
   var handleMouseEnter = useCallback(function (event) {
     setCurrent(link);
-    showTooltipFromEvent(tooltipContent, event, 'left');
-  }, [setCurrent, link, showTooltipFromEvent, tooltipContent]);
+    showTooltipFromEvent(createElement(tooltip, {
+      link: link
+    }), event, 'left');
+  }, [setCurrent, link, showTooltipFromEvent, tooltip]);
   var handleMouseMove = useCallback(function (event) {
-    showTooltipFromEvent(tooltipContent, event, 'left');
-  }, [showTooltipFromEvent, tooltipContent]);
+    showTooltipFromEvent(createElement(tooltip, {
+      link: link
+    }), event, 'left');
+  }, [showTooltipFromEvent, link, tooltip]);
   var handleMouseLeave = useCallback(function () {
@@ -606,3 +645,3 @@ setCurrent(null);
   var handleClick = useCallback(function (event) {
-    onClick(link, event);
+    onClick === null || onClick === void 0 ? void 0 : onClick(link, event);
   }, [onClick, link]);
@@ -629,27 +668,3 @@ return jsxs(Fragment, {
 };
-var SankeyLinksItem$1 = memo(SankeyLinksItem);
 
-var sankeyLinkHorizontal = function sankeyLinkHorizontal() {
-  var lineGenerator = line().curve(curveMonotoneX);
-  return function (n, contract) {
-    var thickness = Math.max(1, n.thickness - contract * 2);
-    var halfThickness = thickness / 2;
-    var linkLength = n.target.x0 - n.source.x1;
-    var padLength = linkLength * 0.12;
-    var dots = [[n.source.x1, n.pos0 - halfThickness], [n.source.x1 + padLength, n.pos0 - halfThickness], [n.target.x0 - padLength, n.pos1 - halfThickness], [n.target.x0, n.pos1 - halfThickness], [n.target.x0, n.pos1 + halfThickness], [n.target.x0 - padLength, n.pos1 + halfThickness], [n.source.x1 + padLength, n.pos0 + halfThickness], [n.source.x1, n.pos0 + halfThickness], [n.source.x1, n.pos0 - halfThickness]];
-    return lineGenerator(dots) + 'Z';
-  };
-};
-var sankeyLinkVertical = function sankeyLinkVertical() {
-  var lineGenerator = line().curve(curveMonotoneY);
-  return function (n, contract) {
-    var thickness = Math.max(1, n.thickness - contract * 2);
-    var halfThickness = thickness / 2;
-    var linkLength = n.target.y0 - n.source.y1;
-    var padLength = linkLength * 0.12;
-    var dots = [[n.pos0 + halfThickness, n.source.y1], [n.pos0 + halfThickness, n.source.y1 + padLength], [n.pos1 + halfThickness, n.target.y0 - padLength], [n.pos1 + halfThickness, n.target.y0], [n.pos1 - halfThickness, n.target.y0], [n.pos1 - halfThickness, n.target.y0 - padLength], [n.pos0 - halfThickness, n.source.y1 + padLength], [n.pos0 - halfThickness, n.source.y1], [n.pos0 + halfThickness, n.source.y1]];
-    return lineGenerator(dots) + 'Z';
-  };
-};
-
 var SankeyLinks = function SankeyLinks(_ref) {
@@ -665,9 +680,9 @@ var links = _ref.links,
       setCurrentLink = _ref.setCurrentLink,
+      currentLink = _ref.currentLink,
       currentNode = _ref.currentNode,
-      currentLink = _ref.currentLink,
       isCurrentLink = _ref.isCurrentLink,
       isInteractive = _ref.isInteractive,
       onClick = _ref.onClick,
-      tooltipFormat = _ref.tooltipFormat,
       tooltip = _ref.tooltip;
+
   var getOpacity = function getOpacity(link) {
@@ -678,21 +693,24 @@ if (!currentNode && !currentLink) return linkOpacity;
   };
-  var getLinkPath = layout === 'horizontal' ? sankeyLinkHorizontal() : sankeyLinkVertical();
-  return links.map(function (link) {
-    return jsx(SankeyLinksItem$1, {
-      link: link,
-      layout: layout,
-      path: getLinkPath(link, linkContract),
-      color: link.color,
-      opacity: getOpacity(link),
-      blendMode: linkBlendMode,
-      enableGradient: enableLinkGradient,
-      setCurrent: setCurrentLink,
-      isInteractive: isInteractive,
-      onClick: onClick,
-      tooltip: tooltip,
-      tooltipFormat: tooltipFormat
-    }, "".concat(link.source.id, ".").concat(link.target.id));
+
+  var getLinkPath = useMemo(function () {
+    return layout === 'horizontal' ? sankeyLinkHorizontal() : sankeyLinkVertical();
+  }, [layout]);
+  return jsx(Fragment, {
+    children: links.map(function (link) {
+      return jsx(SankeyLinksItem, {
+        link: link,
+        layout: layout,
+        path: getLinkPath(link, linkContract),
+        color: link.color,
+        opacity: getOpacity(link),
+        blendMode: linkBlendMode,
+        enableGradient: enableLinkGradient,
+        setCurrent: setCurrentLink,
+        isInteractive: isInteractive,
+        onClick: onClick,
+        tooltip: tooltip
+      }, "".concat(link.source.id, ".").concat(link.target.id));
+    })
   });
 };
-var SankeyLinks$1 = memo(SankeyLinks);
 
@@ -714,4 +732,6 @@ var SankeyLabels = function SankeyLabels(_ref) {
     var textAnchor;
+
     if (layout === 'horizontal') {
       y = node.y + node.height / 2;
+
       if (node.x < width / 2) {
@@ -736,2 +756,3 @@ if (labelPosition === 'inside') {
       x = node.x + node.width / 2;
+
       if (node.y < height / 2) {
@@ -755,2 +776,3 @@ if (labelPosition === 'inside') {
     }
+
     return {
@@ -765,5 +787,7 @@ id: node.id,
   });
+
   var _useMotionConfig = useMotionConfig(),
       animate = _useMotionConfig.animate,
       springConfig = _useMotionConfig.config;
+
   var springs = useSprings(labels.length, labels.map(function (label) {
@@ -777,56 +801,92 @@ return {
   }));
-  return springs.map(function (animatedProps, index) {
-    var label = labels[index];
-    return jsx(animated.text, {
-      dominantBaseline: "central",
-      textAnchor: label.textAnchor,
-      transform: animatedProps.transform,
-      style: _objectSpread2(_objectSpread2({}, theme.labels.text), {}, {
-        fill: animatedProps.color,
-        pointerEvents: 'none'
-      }),
-      children: label.label
-    }, label.id);
+  return jsx(Fragment, {
+    children: springs.map(function (animatedProps, index) {
+      var label = labels[index];
+      return jsx(animated.text, {
+        dominantBaseline: "central",
+        textAnchor: label.textAnchor,
+        transform: animatedProps.transform,
+        style: _objectSpread2(_objectSpread2({}, theme.labels.text), {}, {
+          fill: animatedProps.color,
+          pointerEvents: 'none'
+        }),
+        children: label.label
+      }, label.id);
+    })
   });
 };
-var SankeyLabels$1 = memo(SankeyLabels);
 
-var Sankey = function Sankey(_ref) {
+var InnerSankey = function InnerSankey(_ref) {
   var data = _ref.data,
-      layout = _ref.layout,
-      sort = _ref.sort,
-      align = _ref.align,
+      valueFormat = _ref.valueFormat,
+      _ref$layout = _ref.layout,
+      layout = _ref$layout === void 0 ? svgDefaultProps.layout : _ref$layout,
+      _ref$sort = _ref.sort,
+      sort = _ref$sort === void 0 ? svgDefaultProps.sort : _ref$sort,
+      _ref$align = _ref.align,
+      align = _ref$align === void 0 ? svgDefaultProps.align : _ref$align,
       width = _ref.width,
       height = _ref.height,
       partialMargin = _ref.margin,
-      colors = _ref.colors,
-      nodeThickness = _ref.nodeThickness,
-      nodeSpacing = _ref.nodeSpacing,
-      nodeInnerPadding = _ref.nodeInnerPadding,
-      nodeBorderColor = _ref.nodeBorderColor,
-      nodeOpacity = _ref.nodeOpacity,
-      nodeHoverOpacity = _ref.nodeHoverOpacity,
-      nodeHoverOthersOpacity = _ref.nodeHoverOthersOpacity,
-      nodeBorderWidth = _ref.nodeBorderWidth,
-      linkOpacity = _ref.linkOpacity,
-      linkHoverOpacity = _ref.linkHoverOpacity,
-      linkHoverOthersOpacity = _ref.linkHoverOthersOpacity,
-      linkContract = _ref.linkContract,
-      linkBlendMode = _ref.linkBlendMode,
-      enableLinkGradient = _ref.enableLinkGradient,
-      enableLabels = _ref.enableLabels,
-      labelPosition = _ref.labelPosition,
-      labelPadding = _ref.labelPadding,
-      labelOrientation = _ref.labelOrientation,
-      label = _ref.label,
-      labelFormat = _ref.labelFormat,
-      labelTextColor = _ref.labelTextColor,
-      nodeTooltip = _ref.nodeTooltip,
-      linkTooltip = _ref.linkTooltip,
-      isInteractive = _ref.isInteractive,
+      _ref$colors = _ref.colors,
+      colors = _ref$colors === void 0 ? svgDefaultProps.colors : _ref$colors,
+      _ref$nodeThickness = _ref.nodeThickness,
+      nodeThickness = _ref$nodeThickness === void 0 ? svgDefaultProps.nodeThickness : _ref$nodeThickness,
+      _ref$nodeSpacing = _ref.nodeSpacing,
+      nodeSpacing = _ref$nodeSpacing === void 0 ? svgDefaultProps.nodeThickness : _ref$nodeSpacing,
+      _ref$nodeInnerPadding = _ref.nodeInnerPadding,
+      nodeInnerPadding = _ref$nodeInnerPadding === void 0 ? svgDefaultProps.nodeInnerPadding : _ref$nodeInnerPadding,
+      _ref$nodeBorderColor = _ref.nodeBorderColor,
+      nodeBorderColor = _ref$nodeBorderColor === void 0 ? svgDefaultProps.nodeBorderColor : _ref$nodeBorderColor,
+      _ref$nodeOpacity = _ref.nodeOpacity,
+      nodeOpacity = _ref$nodeOpacity === void 0 ? svgDefaultProps.nodeOpacity : _ref$nodeOpacity,
+      _ref$nodeHoverOpacity = _ref.nodeHoverOpacity,
+      nodeHoverOpacity = _ref$nodeHoverOpacity === void 0 ? svgDefaultProps.nodeHoverOpacity : _ref$nodeHoverOpacity,
+      _ref$nodeHoverOthersO = _ref.nodeHoverOthersOpacity,
+      nodeHoverOthersOpacity = _ref$nodeHoverOthersO === void 0 ? svgDefaultProps.nodeHoverOthersOpacity : _ref$nodeHoverOthersO,
+      _ref$nodeBorderWidth = _ref.nodeBorderWidth,
+      nodeBorderWidth = _ref$nodeBorderWidth === void 0 ? svgDefaultProps.nodeBorderWidth : _ref$nodeBorderWidth,
+      _ref$nodeBorderRadius = _ref.nodeBorderRadius,
+      nodeBorderRadius = _ref$nodeBorderRadius === void 0 ? svgDefaultProps.nodeBorderRadius : _ref$nodeBorderRadius,
+      _ref$linkOpacity = _ref.linkOpacity,
+      linkOpacity = _ref$linkOpacity === void 0 ? svgDefaultProps.linkOpacity : _ref$linkOpacity,
+      _ref$linkHoverOpacity = _ref.linkHoverOpacity,
+      linkHoverOpacity = _ref$linkHoverOpacity === void 0 ? svgDefaultProps.linkHoverOpacity : _ref$linkHoverOpacity,
+      _ref$linkHoverOthersO = _ref.linkHoverOthersOpacity,
+      linkHoverOthersOpacity = _ref$linkHoverOthersO === void 0 ? svgDefaultProps.linkHoverOthersOpacity : _ref$linkHoverOthersO,
+      _ref$linkContract = _ref.linkContract,
+      linkContract = _ref$linkContract === void 0 ? svgDefaultProps.linkContract : _ref$linkContract,
+      _ref$linkBlendMode = _ref.linkBlendMode,
+      linkBlendMode = _ref$linkBlendMode === void 0 ? svgDefaultProps.linkBlendMode : _ref$linkBlendMode,
+      _ref$enableLinkGradie = _ref.enableLinkGradient,
+      enableLinkGradient = _ref$enableLinkGradie === void 0 ? svgDefaultProps.enableLinkGradient : _ref$enableLinkGradie,
+      _ref$enableLabels = _ref.enableLabels,
+      enableLabels = _ref$enableLabels === void 0 ? svgDefaultProps.enableLabels : _ref$enableLabels,
+      _ref$labelPosition = _ref.labelPosition,
+      labelPosition = _ref$labelPosition === void 0 ? svgDefaultProps.labelPosition : _ref$labelPosition,
+      _ref$labelPadding = _ref.labelPadding,
+      labelPadding = _ref$labelPadding === void 0 ? svgDefaultProps.labelPadding : _ref$labelPadding,
+      _ref$labelOrientation = _ref.labelOrientation,
+      labelOrientation = _ref$labelOrientation === void 0 ? svgDefaultProps.labelOrientation : _ref$labelOrientation,
+      _ref$label = _ref.label,
+      label = _ref$label === void 0 ? svgDefaultProps.label : _ref$label,
+      _ref$labelTextColor = _ref.labelTextColor,
+      labelTextColor = _ref$labelTextColor === void 0 ? svgDefaultProps.labelTextColor : _ref$labelTextColor,
+      _ref$nodeTooltip = _ref.nodeTooltip,
+      nodeTooltip = _ref$nodeTooltip === void 0 ? svgDefaultProps.nodeTooltip : _ref$nodeTooltip,
+      _ref$linkTooltip = _ref.linkTooltip,
+      linkTooltip = _ref$linkTooltip === void 0 ? svgDefaultProps.linkTooltip : _ref$linkTooltip,
+      _ref$isInteractive = _ref.isInteractive,
+      isInteractive = _ref$isInteractive === void 0 ? svgDefaultProps.isInteractive : _ref$isInteractive,
       onClick = _ref.onClick,
-      tooltipFormat = _ref.tooltipFormat,
-      legends = _ref.legends,
-      layers = _ref.layers,
-      role = _ref.role;
+      _ref$legends = _ref.legends,
+      legends = _ref$legends === void 0 ? svgDefaultProps.legends : _ref$legends,
+      _ref$layers = _ref.layers,
+      layers = _ref$layers === void 0 ? svgDefaultProps.layers : _ref$layers,
+      _ref$role = _ref.role,
+      role = _ref$role === void 0 ? svgDefaultProps.role : _ref$role,
+      ariaLabel = _ref.ariaLabel,
+      ariaLabelledBy = _ref.ariaLabelledBy,
+      ariaDescribedBy = _ref.ariaDescribedBy;
+
   var _useDimensions = useDimensions(width, height, partialMargin),
@@ -838,4 +898,6 @@ margin = _useDimensions.margin,
       outerHeight = _useDimensions.outerHeight;
+
   var _useSankey = useSankey({
     data: data,
+    valueFormat: valueFormat,
     layout: layout,
@@ -852,3 +914,2 @@ width: innerWidth,
     label: label,
-    labelFormat: labelFormat,
     labelTextColor: labelTextColor
@@ -865,8 +926,11 @@ }),
       getLabelTextColor = _useSankey.getLabelTextColor;
+
   var isCurrentNode = function isCurrentNode() {
     return false;
   };
+
   var isCurrentLink = function isCurrentLink() {
     return false;
   };
+
   if (currentLink) {
@@ -877,2 +941,3 @@ isCurrentNode = function isCurrentNode(_ref2) {
     };
+
     isCurrentLink = function isCurrentLink(_ref3) {
@@ -884,2 +949,3 @@ var source = _ref3.source,
   }
+
   if (currentNode) {
@@ -898,2 +964,3 @@ var currentNodeIds = [currentNode.id];
     currentNodeIds = _uniq(currentNodeIds);
+
     isCurrentNode = function isCurrentNode(_ref6) {
@@ -903,2 +970,3 @@ var id = _ref6.id;
     };
+
     isCurrentLink = function isCurrentLink(_ref7) {
@@ -910,2 +978,3 @@ var source = _ref7.source,
   }
+
   var layerProps = {
@@ -921,3 +990,10 @@ links: links,
   var layerById = {
-    links: jsx(SankeyLinks$1, {
+    links: null,
+    nodes: null,
+    labels: null,
+    legends: null
+  };
+
+  if (layers.includes('links')) {
+    layerById.links = jsx(SankeyLinks, {
       links: links,
@@ -937,6 +1013,8 @@ layout: layout,
       onClick: onClick,
-      tooltip: linkTooltip,
-      tooltipFormat: tooltipFormat
-    }, "links"),
-    nodes: jsx(SankeyNodes$1, {
+      tooltip: linkTooltip
+    }, "links");
+  }
+
+  if (layers.includes('nodes')) {
+    layerById.nodes = jsx(SankeyNodes, {
       nodes: nodes,
@@ -946,4 +1024,5 @@ nodeOpacity: nodeOpacity,
       nodeHoverOthersOpacity: nodeHoverOthersOpacity,
-      nodeBorderWidth: nodeBorderWidth,
-      getNodeBorderColor: getNodeBorderColor,
+      borderWidth: nodeBorderWidth,
+      borderRadius: nodeBorderRadius,
+      getBorderColor: getNodeBorderColor,
       setCurrentNode: setCurrentNode,
@@ -955,16 +1034,8 @@ currentNode: currentNode,
       onClick: onClick,
-      tooltip: nodeTooltip,
-      tooltipFormat: tooltipFormat
-    }, "nodes"),
-    labels: null,
-    legends: legends.map(function (legend, i) {
-      return jsx(BoxLegendSvg, _objectSpread2(_objectSpread2({}, legend), {}, {
-        containerWidth: innerWidth,
-        containerHeight: innerHeight,
-        data: legendData
-      }), "legend".concat(i));
-    })
-  };
-  if (enableLabels) {
-    layerById.labels = jsx(SankeyLabels$1, {
+      tooltip: nodeTooltip
+    }, "nodes");
+  }
+
+  if (layers.includes('labels') && enableLabels) {
+    layerById.labels = jsx(SankeyLabels, {
       nodes: nodes,
@@ -980,2 +1051,15 @@ layout: layout,
   }
+
+  if (layers.includes('legends')) {
+    layerById.legends = jsx(Fragment$1, {
+      children: legends.map(function (legend, i) {
+        return jsx(BoxLegendSvg, _objectSpread2(_objectSpread2({}, legend), {}, {
+          containerWidth: innerWidth,
+          containerHeight: innerHeight,
+          data: legendData
+        }), "legend".concat(i));
+      })
+    }, "legends");
+  }
+
   return jsx(SvgWrapper, {
@@ -986,15 +1070,42 @@ width: outerWidth,
     role: role,
+    ariaLabel: ariaLabel,
+    ariaLabelledBy: ariaLabelledBy,
+    ariaDescribedBy: ariaDescribedBy,
     children: layers.map(function (layer, i) {
+      var _layerById$layer;
+
       if (typeof layer === 'function') {
         return jsx(Fragment$1, {
-          children: layer(layerProps)
+          children: createElement(layer, layerProps)
         }, i);
       }
-      return layerById[layer];
+
+      return (_layerById$layer = layerById === null || layerById === void 0 ? void 0 : layerById[layer]) !== null && _layerById$layer !== void 0 ? _layerById$layer : null;
     })
   });
 };
-var WrappedSankey = withContainer(Sankey);
-WrappedSankey.defaultProps = SankeyDefaultProps;
 
+var Sankey = function Sankey(_ref8) {
+  var _ref8$isInteractive = _ref8.isInteractive,
+      isInteractive = _ref8$isInteractive === void 0 ? svgDefaultProps.isInteractive : _ref8$isInteractive,
+      _ref8$animate = _ref8.animate,
+      animate = _ref8$animate === void 0 ? svgDefaultProps.animate : _ref8$animate,
+      _ref8$motionConfig = _ref8.motionConfig,
+      motionConfig = _ref8$motionConfig === void 0 ? svgDefaultProps.motionConfig : _ref8$motionConfig,
+      theme = _ref8.theme,
+      renderWrapper = _ref8.renderWrapper,
+      otherProps = _objectWithoutProperties(_ref8, ["isInteractive", "animate", "motionConfig", "theme", "renderWrapper"]);
+
+  return jsx(Container, {
+    animate: animate,
+    isInteractive: isInteractive,
+    motionConfig: motionConfig,
+    renderWrapper: renderWrapper,
+    theme: theme,
+    children: jsx(InnerSankey, _objectSpread2({
+      isInteractive: isInteractive
+    }, otherProps))
+  });
+};
+
 var ResponsiveSankey = function ResponsiveSankey(props) {
@@ -1005,3 +1116,3 @@ return jsx(ResponsiveWrapper, {
           height = _ref.height;
-      return jsx(WrappedSankey, _objectSpread2({
+      return jsx(Sankey, _objectSpread2({
         width: width,
@@ -1014,3 +1125,3 @@ height: height
 
-export { ResponsiveSankey, WrappedSankey as Sankey, SankeyDefaultProps, SankeyPropTypes, sankeyAlignmentFromProp, sankeyAlignmentPropKeys, sankeyAlignmentPropMapping, sankeyAlignmentPropType };
+export { ResponsiveSankey, Sankey, sankeyAlignmentFromProp, sankeyAlignmentPropKeys, sankeyAlignmentPropMapping, svgDefaultProps };
 //# sourceMappingURL=nivo-sankey.es.js.map

dist/nivo-sankey.umd.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('lodash/uniq'), require('react'), require('@nivo/core'), require('@nivo/legends'), require('prop-types'), require('d3-sankey'), require('@nivo/colors'), require('lodash/cloneDeep'), require('@react-spring/web'), require('@nivo/tooltip'), require('react/jsx-runtime'), require('d3-shape')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'lodash/uniq', 'react', '@nivo/core', '@nivo/legends', 'prop-types', 'd3-sankey', '@nivo/colors', 'lodash/cloneDeep', '@react-spring/web', '@nivo/tooltip', 'react/jsx-runtime', 'd3-shape'], factory) :
-  (global = global || self, factory(global.nivo = global.nivo || {}, global['lodash/uniq'], global.React, global.nivo, global.nivo, global.PropTypes, global.d3, global.nivo, global['lodash/cloneDeep'], global['@react-spring/web'], global.nivo, global['react/jsx-runtime'], global.d3));
-}(this, (function (exports, _uniq, react, core, legends, PropTypes, d3Sankey, colors, _cloneDeep, web, tooltip, jsxRuntime, d3Shape) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('lodash/uniq'), require('react'), require('@nivo/core'), require('@nivo/legends'), require('d3-sankey'), require('@nivo/tooltip'), require('react/jsx-runtime'), require('lodash/cloneDeep'), require('@nivo/colors'), require('@react-spring/web'), require('d3-shape')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'lodash/uniq', 'react', '@nivo/core', '@nivo/legends', 'd3-sankey', '@nivo/tooltip', 'react/jsx-runtime', 'lodash/cloneDeep', '@nivo/colors', '@react-spring/web', 'd3-shape'], factory) :
+  (global = global || self, factory(global.nivo = global.nivo || {}, global['lodash/uniq'], global.React, global.nivo, global.nivo, global.d3, global.nivo, global['react/jsx-runtime'], global['lodash/cloneDeep'], global.nivo, global['@react-spring/web'], global.d3));
+}(this, (function (exports, _uniq, react, core, legends, d3Sankey, tooltip, jsxRuntime, _cloneDeep, colors, web, d3Shape) { 'use strict';
 
   _uniq = _uniq && Object.prototype.hasOwnProperty.call(_uniq, 'default') ? _uniq['default'] : _uniq;
-  PropTypes = PropTypes && Object.prototype.hasOwnProperty.call(PropTypes, 'default') ? PropTypes['default'] : PropTypes;
   _cloneDeep = _cloneDeep && Object.prototype.hasOwnProperty.call(_cloneDeep, 'default') ? _cloneDeep['default'] : _cloneDeep;
 
+  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) {
@@ -54,2 +82,46 @@ if (key in obj) {
 
+  var SankeyNodeTooltip = function SankeyNodeTooltip(_ref) {
+    var node = _ref.node;
+    return jsxRuntime.jsx(tooltip.BasicTooltip, {
+      id: node.label,
+      enableChip: true,
+      color: node.color
+    });
+  };
+
+  var tooltipStyles = {
+    container: {
+      display: 'flex',
+      alignItems: 'center'
+    },
+    sourceChip: {
+      marginRight: 7
+    },
+    targetChip: {
+      marginLeft: 7,
+      marginRight: 7
+    }
+  };
+  var SankeyLinkTooltip = function SankeyLinkTooltip(_ref) {
+    var link = _ref.link;
+    return jsxRuntime.jsx(tooltip.BasicTooltip, {
+      id: jsxRuntime.jsxs("span", {
+        style: tooltipStyles.container,
+        children: [jsxRuntime.jsx(tooltip.Chip, {
+          color: link.source.color,
+          style: tooltipStyles.sourceChip
+        }), jsxRuntime.jsx("strong", {
+          children: link.source.label
+        }), ' > ', jsxRuntime.jsx("strong", {
+          children: link.target.label
+        }), jsxRuntime.jsx(tooltip.Chip, {
+          color: link.target.color,
+          style: tooltipStyles.targetChip
+        }), jsxRuntime.jsx("strong", {
+          children: link.formattedValue
+        })]
+      })
+    });
+  };
+
   var sankeyAlignmentPropMapping = {
@@ -62,51 +134,6 @@ center: d3Sankey.sankeyCenter,
   var sankeyAlignmentPropKeys = Object.keys(sankeyAlignmentPropMapping);
-  var sankeyAlignmentPropType = PropTypes.oneOf(sankeyAlignmentPropKeys);
   var sankeyAlignmentFromProp = function sankeyAlignmentFromProp(prop) {
     return sankeyAlignmentPropMapping[prop];
   };
-  var SankeyPropTypes = _objectSpread2({
-    data: PropTypes.shape({
-      nodes: PropTypes.arrayOf(PropTypes.shape({
-        id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
-      })).isRequired,
-      links: PropTypes.arrayOf(PropTypes.shape({
-        source: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-        target: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
-      })).isRequired
-    }).isRequired,
-    layout: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,
-    align: sankeyAlignmentPropType.isRequired,
-    sort: PropTypes.oneOfType([PropTypes.oneOf(['auto', 'input', 'ascending', 'descending']), PropTypes.func]).isRequired,
-    colors: colors.ordinalColorsPropType.isRequired,
-    nodeOpacity: PropTypes.number.isRequired,
-    nodeHoverOpacity: PropTypes.number.isRequired,
-    nodeHoverOthersOpacity: PropTypes.number.isRequired,
-    nodeThickness: PropTypes.number.isRequired,
-    nodeSpacing: PropTypes.number.isRequired,
-    nodeInnerPadding: PropTypes.number.isRequired,
-    nodeBorderWidth: PropTypes.number.isRequired,
-    nodeBorderColor: colors.inheritedColorPropType,
-    linkOpacity: PropTypes.number.isRequired,
-    linkHoverOpacity: PropTypes.number.isRequired,
-    linkHoverOthersOpacity: PropTypes.number.isRequired,
-    linkContract: PropTypes.number.isRequired,
-    linkBlendMode: core.blendModePropType.isRequired,
-    enableLinkGradient: PropTypes.bool.isRequired,
-    enableLabels: PropTypes.bool.isRequired,
-    labelPosition: PropTypes.oneOf(['inside', 'outside']).isRequired,
-    labelPadding: PropTypes.number.isRequired,
-    labelOrientation: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,
-    labelTextColor: colors.inheritedColorPropType,
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
-    labelFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-    nodeTooltip: PropTypes.func,
-    linkTooltip: PropTypes.func,
-    isInteractive: PropTypes.bool.isRequired,
-    onClick: PropTypes.func.isRequired,
-    tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-    legends: PropTypes.arrayOf(PropTypes.shape(legends.LegendPropShape)).isRequired,
-    layers: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['links', 'nodes', 'labels', 'legends']), PropTypes.func])).isRequired,
-    role: PropTypes.string.isRequired
-  }, core.motionPropTypes);
-  var SankeyDefaultProps = {
+  var svgDefaultProps = {
     layout: 'horizontal',
@@ -129,2 +156,3 @@ align: 'center',
     },
+    nodeBorderRadius: 0,
     linkOpacity: 0.25,
@@ -146,3 +174,4 @@ linkHoverOpacity: 0.6,
     isInteractive: true,
-    onClick: core.noop,
+    nodeTooltip: SankeyNodeTooltip,
+    linkTooltip: SankeyLinkTooltip,
     legends: [],
@@ -208,7 +237,9 @@ layers: ['links', 'nodes', 'labels', 'legends'],
 
-  var getId = function getId(d) {
-    return d.id;
+  var getId = function getId(node) {
+    return node.id;
   };
+
   var computeNodeAndLinks = function computeNodeAndLinks(_ref) {
     var _data = _ref.data,
+        formatValue = _ref.formatValue,
         layout = _ref.layout,
@@ -226,3 +257,5 @@ alignFunction = _ref.alignFunction,
     var sankey = d3Sankey.sankey().nodeAlign(alignFunction).nodeSort(sortFunction).linkSort(linkSortMode).nodeWidth(nodeThickness).nodePadding(nodeSpacing).size(layout === 'horizontal' ? [width, height] : [height, width]).nodeId(getId);
+
     var data = _cloneDeep(_data);
+
     sankey(data);
@@ -232,2 +265,4 @@ data.nodes.forEach(function (node) {
       node.label = getLabel(node);
+      node.formattedValue = formatValue(node.value);
+
       if (layout === 'horizontal') {
@@ -252,2 +287,3 @@ node.x = node.x0 + nodeInnerPadding;
     data.links.forEach(function (link) {
+      link.formattedValue = formatValue(link.value);
       link.color = link.source.color;
@@ -265,2 +301,3 @@ link.pos0 = link.y0;
     var data = _ref2.data,
+        valueFormat = _ref2.valueFormat,
         layout = _ref2.layout,
@@ -277,4 +314,4 @@ width = _ref2.width,
         label = _ref2.label,
-        labelFormat = _ref2.labelFormat,
         labelTextColor = _ref2.labelTextColor;
+
     var _useState = react.useState(null),
@@ -284,2 +321,3 @@ _useState2 = _slicedToArray(_useState, 2),
         setCurrentNode = _useState2[1];
+
     var _useState3 = react.useState(null),
@@ -289,11 +327,19 @@ _useState4 = _slicedToArray(_useState3, 2),
         setCurrentLink = _useState4[1];
+
     var sortFunction = react.useMemo(function () {
       if (sort === 'auto') return undefined;
       if (sort === 'input') return null;
-      if (sort === 'ascending') return function (a, b) {
-        return a.value - b.value;
-      };
-      if (sort === 'descending') return function (a, b) {
-        return b.value - a.value;
-      };
+
+      if (sort === 'ascending') {
+        return function (a, b) {
+          return a.value - b.value;
+        };
+      }
+
+      if (sort === 'descending') {
+        return function (a, b) {
+          return b.value - a.value;
+        };
+      }
+
       return sort;
@@ -303,2 +349,3 @@ }, [sort]);
     var alignFunction = react.useMemo(function () {
+      if (typeof align === 'function') return align;
       return sankeyAlignmentFromProp(align);
@@ -309,9 +356,10 @@ }, [align]);
     var getNodeBorderColor = colors.useInheritedColor(nodeBorderColor, theme);
-    var getLabel = react.useMemo(function () {
-      return core.getLabelGenerator(label, labelFormat);
-    }, [label, labelFormat]);
+    var getLabel = core.usePropertyAccessor(label);
     var getLabelTextColor = colors.useInheritedColor(labelTextColor, theme);
+    var formatValue = core.useValueFormatter(valueFormat);
+
     var _useMemo = react.useMemo(function () {
       return computeNodeAndLinks({
         data: data,
+        formatValue: formatValue,
         layout: layout,
@@ -329,5 +377,6 @@ alignFunction: alignFunction,
       });
-    }, [data, layout, alignFunction, sortFunction, linkSortMode, nodeThickness, nodeSpacing, nodeInnerPadding, width, height, getColor, getLabel]),
+    }, [data, formatValue, layout, alignFunction, sortFunction, linkSortMode, nodeThickness, nodeSpacing, nodeInnerPadding, width, height, getColor, getLabel]),
         nodes = _useMemo.nodes,
         links = _useMemo.links;
+
     var legendData = react.useMemo(function () {
@@ -365,2 +414,3 @@ return nodes.map(function (node) {
         borderColor = _ref.borderColor,
+        borderRadius = _ref.borderRadius,
         setCurrent = _ref.setCurrent,
@@ -370,5 +420,7 @@ isInteractive = _ref.isInteractive,
         tooltip$1 = _ref.tooltip;
+
     var _useMotionConfig = core.useMotionConfig(),
         animate = _useMotionConfig.animate,
         springConfig = _useMotionConfig.config;
+
     var animatedProps = web.useSpring({
@@ -384,25 +436,18 @@ x: x,
     });
+
     var _useTooltip = tooltip.useTooltip(),
         showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
         hideTooltip = _useTooltip.hideTooltip;
-    var tooltipContent = react.useMemo(function () {
-      if (tooltip$1) {
-        return jsxRuntime.jsx(tooltip.BasicTooltip, {
-          id: tooltip$1(node),
-          enableChip: false
-        });
-      }
-      return jsxRuntime.jsx(tooltip.BasicTooltip, {
-        id: node.label,
-        enableChip: true,
-        color: node.color
-      });
-    }, [tooltip$1, node]);
+
     var handleMouseEnter = react.useCallback(function (event) {
       setCurrent(node);
-      showTooltipFromEvent(tooltipContent, event, 'left');
-    }, [setCurrent, node, showTooltipFromEvent, tooltipContent]);
+      showTooltipFromEvent(react.createElement(tooltip$1, {
+        node: node
+      }), event, 'left');
+    }, [setCurrent, node, showTooltipFromEvent, tooltip$1]);
     var handleMouseMove = react.useCallback(function (event) {
-      showTooltipFromEvent(tooltipContent, event, 'left');
-    }, [showTooltipFromEvent, tooltipContent]);
+      showTooltipFromEvent(react.createElement(tooltip$1, {
+        node: node
+      }), event, 'left');
+    }, [showTooltipFromEvent, node, tooltip$1]);
     var handleMouseLeave = react.useCallback(function () {
@@ -413,3 +458,3 @@ setCurrent(null);
     var handleClick = react.useCallback(function (event) {
-      onClick(node, event);
+      onClick === null || onClick === void 0 ? void 0 : onClick(node, event);
     }, [onClick, node]);
@@ -419,6 +464,8 @@ return jsxRuntime.jsx(web.animated.rect, {
       y: animatedProps.y,
-      width: web.to(animatedProps.width, function (v) {
+      rx: borderRadius,
+      ry: borderRadius,
+      width: animatedProps.width.to(function (v) {
         return Math.max(v, 0);
       }),
-      height: web.to(animatedProps.height, function (v) {
+      height: animatedProps.height.to(function (v) {
         return Math.max(v, 0);
@@ -437,3 +484,2 @@ }),
   };
-  var SankeyNodesItem$1 = react.memo(SankeyNodesItem);
 
@@ -445,4 +491,5 @@ var SankeyNodes = function SankeyNodes(_ref) {
         nodeHoverOthersOpacity = _ref.nodeHoverOthersOpacity,
-        nodeBorderWidth = _ref.nodeBorderWidth,
-        getNodeBorderColor = _ref.getNodeBorderColor,
+        borderWidth = _ref.borderWidth,
+        getBorderColor = _ref.getBorderColor,
+        borderRadius = _ref.borderRadius,
         setCurrentNode = _ref.setCurrentNode,
@@ -455,2 +502,3 @@ currentNode = _ref.currentNode,
         tooltip = _ref.tooltip;
+
     var getOpacity = function getOpacity(node) {
@@ -461,23 +509,49 @@ if (!currentNode && !currentLink) return nodeOpacity;
     };
-    return nodes.map(function (node) {
-      return jsxRuntime.jsx(SankeyNodesItem$1, {
-        node: node,
-        x: node.x,
-        y: node.y,
-        width: node.width,
-        height: node.height,
-        color: node.color,
-        opacity: getOpacity(node),
-        borderWidth: nodeBorderWidth,
-        borderColor: getNodeBorderColor(node),
-        setCurrent: setCurrentNode,
-        isInteractive: isInteractive,
-        onClick: onClick,
-        tooltip: tooltip
-      }, node.id);
+
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: nodes.map(function (node) {
+        return jsxRuntime.jsx(SankeyNodesItem, {
+          node: node,
+          x: node.x,
+          y: node.y,
+          width: node.width,
+          height: node.height,
+          color: node.color,
+          opacity: getOpacity(node),
+          borderWidth: borderWidth,
+          borderColor: getBorderColor(node),
+          borderRadius: borderRadius,
+          setCurrent: setCurrentNode,
+          isInteractive: isInteractive,
+          onClick: onClick,
+          tooltip: tooltip
+        }, node.id);
+      })
     });
   };
-  var SankeyNodes$1 = react.memo(SankeyNodes);
 
-  var SankeyLinkGradient = react.memo(function (_ref) {
+  var sankeyLinkHorizontal = function sankeyLinkHorizontal() {
+    var lineGenerator = d3Shape.line().curve(d3Shape.curveMonotoneX);
+    return function (link, contract) {
+      var thickness = Math.max(1, link.thickness - contract * 2);
+      var halfThickness = thickness / 2;
+      var linkLength = link.target.x0 - link.source.x1;
+      var padLength = linkLength * 0.12;
+      var dots = [[link.source.x1, link.pos0 - halfThickness], [link.source.x1 + padLength, link.pos0 - halfThickness], [link.target.x0 - padLength, link.pos1 - halfThickness], [link.target.x0, link.pos1 - halfThickness], [link.target.x0, link.pos1 + halfThickness], [link.target.x0 - padLength, link.pos1 + halfThickness], [link.source.x1 + padLength, link.pos0 + halfThickness], [link.source.x1, link.pos0 + halfThickness], [link.source.x1, link.pos0 - halfThickness]];
+      return lineGenerator(dots) + 'Z';
+    };
+  };
+  var sankeyLinkVertical = function sankeyLinkVertical() {
+    var lineGenerator = d3Shape.line().curve(d3Shape.curveMonotoneY);
+    return function (link, contract) {
+      var thickness = Math.max(1, link.thickness - contract * 2);
+      var halfThickness = thickness / 2;
+      var linkLength = link.target.y0 - link.source.y1;
+      var padLength = linkLength * 0.12;
+      var dots = [[link.pos0 + halfThickness, link.source.y1], [link.pos0 + halfThickness, link.source.y1 + padLength], [link.pos1 + halfThickness, link.target.y0 - padLength], [link.pos1 + halfThickness, link.target.y0], [link.pos1 - halfThickness, link.target.y0], [link.pos1 - halfThickness, link.target.y0 - padLength], [link.pos0 - halfThickness, link.source.y1 + padLength], [link.pos0 - halfThickness, link.source.y1], [link.pos0 + halfThickness, link.source.y1]];
+      return lineGenerator(dots) + 'Z';
+    };
+  };
+
+  var SankeyLinkGradient = function SankeyLinkGradient(_ref) {
     var id = _ref.id,
@@ -487,14 +561,20 @@ layout = _ref.layout,
         endColor = _ref.endColor;
-    var gradientProps = {};
+    var gradientProps;
+
     if (layout === 'horizontal') {
-      gradientProps.x1 = '0%';
-      gradientProps.x2 = '100%';
-      gradientProps.y1 = '0%';
-      gradientProps.y2 = '0%';
+      gradientProps = {
+        x1: '0%',
+        x2: '100%',
+        y1: '0%',
+        y2: '0%'
+      };
     } else {
-      gradientProps.x1 = '0%';
-      gradientProps.x2 = '0%';
-      gradientProps.y1 = '0%';
-      gradientProps.y2 = '100%';
+      gradientProps = {
+        x1: '0%',
+        x2: '0%',
+        y1: '0%',
+        y2: '100%'
+      };
     }
+
     return jsxRuntime.jsxs("linearGradient", _objectSpread2(_objectSpread2({
@@ -512,55 +592,22 @@ id: id,
     }));
-  });
-  SankeyLinkGradient.displayName = 'SankeyLinkGradient';
+  };
 
-  var tooltipStyles = {
-    container: {
-      display: 'flex',
-      alignItems: 'center'
-    },
-    sourceChip: {
-      marginRight: 7
-    },
-    targetChip: {
-      marginLeft: 7,
-      marginRight: 7
-    }
-  };
-  var TooltipContent = function TooltipContent(_ref) {
+  var SankeyLinksItem = function SankeyLinksItem(_ref) {
     var link = _ref.link,
-        format = _ref.format;
-    return jsxRuntime.jsxs("span", {
-      style: tooltipStyles.container,
-      children: [jsxRuntime.jsx(tooltip.Chip, {
-        color: link.source.color,
-        style: tooltipStyles.sourceChip
-      }), jsxRuntime.jsx("strong", {
-        children: link.source.label
-      }), ' > ', jsxRuntime.jsx("strong", {
-        children: link.target.label
-      }), jsxRuntime.jsx(tooltip.Chip, {
-        color: link.target.color,
-        style: tooltipStyles.targetChip
-      }), jsxRuntime.jsx("strong", {
-        children: format ? format(link.value) : link.value
-      })]
-    });
-  };
-  var SankeyLinksItem = function SankeyLinksItem(_ref2) {
-    var link = _ref2.link,
-        layout = _ref2.layout,
-        path = _ref2.path,
-        color = _ref2.color,
-        opacity = _ref2.opacity,
-        blendMode = _ref2.blendMode,
-        enableGradient = _ref2.enableGradient,
-        setCurrent = _ref2.setCurrent,
-        tooltip$1 = _ref2.tooltip,
-        tooltipFormat = _ref2.tooltipFormat,
-        isInteractive = _ref2.isInteractive,
-        onClick = _ref2.onClick;
+        layout = _ref.layout,
+        path = _ref.path,
+        color = _ref.color,
+        opacity = _ref.opacity,
+        blendMode = _ref.blendMode,
+        enableGradient = _ref.enableGradient,
+        setCurrent = _ref.setCurrent,
+        tooltip$1 = _ref.tooltip,
+        isInteractive = _ref.isInteractive,
+        onClick = _ref.onClick;
     var linkId = "".concat(link.source.id, ".").concat(link.target.id);
+
     var _useMotionConfig = core.useMotionConfig(),
         animate = _useMotionConfig.animate,
         springConfig = _useMotionConfig.config;
+
     var animatedPath = core.useAnimatedPath(path);
@@ -573,26 +620,18 @@ var animatedProps = web.useSpring({
     });
+
     var _useTooltip = tooltip.useTooltip(),
         showTooltipFromEvent = _useTooltip.showTooltipFromEvent,
         hideTooltip = _useTooltip.hideTooltip;
-    var tooltipContent = react.useMemo(function () {
-      if (tooltip$1) {
-        return jsxRuntime.jsx(tooltip.BasicTooltip, {
-          id: tooltip$1(link),
-          enableChip: false
-        });
-      }
-      return jsxRuntime.jsx(tooltip.BasicTooltip, {
-        id: jsxRuntime.jsx(TooltipContent, {
-          format: tooltipFormat,
-          link: link
-        })
-      });
-    }, [tooltip$1, tooltipFormat, link]);
+
     var handleMouseEnter = react.useCallback(function (event) {
       setCurrent(link);
-      showTooltipFromEvent(tooltipContent, event, 'left');
-    }, [setCurrent, link, showTooltipFromEvent, tooltipContent]);
+      showTooltipFromEvent(react.createElement(tooltip$1, {
+        link: link
+      }), event, 'left');
+    }, [setCurrent, link, showTooltipFromEvent, tooltip$1]);
     var handleMouseMove = react.useCallback(function (event) {
-      showTooltipFromEvent(tooltipContent, event, 'left');
-    }, [showTooltipFromEvent, tooltipContent]);
+      showTooltipFromEvent(react.createElement(tooltip$1, {
+        link: link
+      }), event, 'left');
+    }, [showTooltipFromEvent, link, tooltip$1]);
     var handleMouseLeave = react.useCallback(function () {
@@ -603,3 +642,3 @@ setCurrent(null);
     var handleClick = react.useCallback(function (event) {
-      onClick(link, event);
+      onClick === null || onClick === void 0 ? void 0 : onClick(link, event);
     }, [onClick, link]);
@@ -626,27 +665,3 @@ return jsxRuntime.jsxs(jsxRuntime.Fragment, {
   };
-  var SankeyLinksItem$1 = react.memo(SankeyLinksItem);
 
-  var sankeyLinkHorizontal = function sankeyLinkHorizontal() {
-    var lineGenerator = d3Shape.line().curve(d3Shape.curveMonotoneX);
-    return function (n, contract) {
-      var thickness = Math.max(1, n.thickness - contract * 2);
-      var halfThickness = thickness / 2;
-      var linkLength = n.target.x0 - n.source.x1;
-      var padLength = linkLength * 0.12;
-      var dots = [[n.source.x1, n.pos0 - halfThickness], [n.source.x1 + padLength, n.pos0 - halfThickness], [n.target.x0 - padLength, n.pos1 - halfThickness], [n.target.x0, n.pos1 - halfThickness], [n.target.x0, n.pos1 + halfThickness], [n.target.x0 - padLength, n.pos1 + halfThickness], [n.source.x1 + padLength, n.pos0 + halfThickness], [n.source.x1, n.pos0 + halfThickness], [n.source.x1, n.pos0 - halfThickness]];
-      return lineGenerator(dots) + 'Z';
-    };
-  };
-  var sankeyLinkVertical = function sankeyLinkVertical() {
-    var lineGenerator = d3Shape.line().curve(d3Shape.curveMonotoneY);
-    return function (n, contract) {
-      var thickness = Math.max(1, n.thickness - contract * 2);
-      var halfThickness = thickness / 2;
-      var linkLength = n.target.y0 - n.source.y1;
-      var padLength = linkLength * 0.12;
-      var dots = [[n.pos0 + halfThickness, n.source.y1], [n.pos0 + halfThickness, n.source.y1 + padLength], [n.pos1 + halfThickness, n.target.y0 - padLength], [n.pos1 + halfThickness, n.target.y0], [n.pos1 - halfThickness, n.target.y0], [n.pos1 - halfThickness, n.target.y0 - padLength], [n.pos0 - halfThickness, n.source.y1 + padLength], [n.pos0 - halfThickness, n.source.y1], [n.pos0 + halfThickness, n.source.y1]];
-      return lineGenerator(dots) + 'Z';
-    };
-  };
-
   var SankeyLinks = function SankeyLinks(_ref) {
@@ -662,9 +677,9 @@ var links = _ref.links,
         setCurrentLink = _ref.setCurrentLink,
+        currentLink = _ref.currentLink,
         currentNode = _ref.currentNode,
-        currentLink = _ref.currentLink,
         isCurrentLink = _ref.isCurrentLink,
         isInteractive = _ref.isInteractive,
         onClick = _ref.onClick,
-        tooltipFormat = _ref.tooltipFormat,
         tooltip = _ref.tooltip;
+
     var getOpacity = function getOpacity(link) {
@@ -675,21 +690,24 @@ if (!currentNode && !currentLink) return linkOpacity;
     };
-    var getLinkPath = layout === 'horizontal' ? sankeyLinkHorizontal() : sankeyLinkVertical();
-    return links.map(function (link) {
-      return jsxRuntime.jsx(SankeyLinksItem$1, {
-        link: link,
-        layout: layout,
-        path: getLinkPath(link, linkContract),
-        color: link.color,
-        opacity: getOpacity(link),
-        blendMode: linkBlendMode,
-        enableGradient: enableLinkGradient,
-        setCurrent: setCurrentLink,
-        isInteractive: isInteractive,
-        onClick: onClick,
-        tooltip: tooltip,
-        tooltipFormat: tooltipFormat
-      }, "".concat(link.source.id, ".").concat(link.target.id));
+
+    var getLinkPath = react.useMemo(function () {
+      return layout === 'horizontal' ? sankeyLinkHorizontal() : sankeyLinkVertical();
+    }, [layout]);
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: links.map(function (link) {
+        return jsxRuntime.jsx(SankeyLinksItem, {
+          link: link,
+          layout: layout,
+          path: getLinkPath(link, linkContract),
+          color: link.color,
+          opacity: getOpacity(link),
+          blendMode: linkBlendMode,
+          enableGradient: enableLinkGradient,
+          setCurrent: setCurrentLink,
+          isInteractive: isInteractive,
+          onClick: onClick,
+          tooltip: tooltip
+        }, "".concat(link.source.id, ".").concat(link.target.id));
+      })
     });
   };
-  var SankeyLinks$1 = react.memo(SankeyLinks);
 
@@ -711,4 +729,6 @@ var SankeyLabels = function SankeyLabels(_ref) {
       var textAnchor;
+
       if (layout === 'horizontal') {
         y = node.y + node.height / 2;
+
         if (node.x < width / 2) {
@@ -733,2 +753,3 @@ if (labelPosition === 'inside') {
         x = node.x + node.width / 2;
+
         if (node.y < height / 2) {
@@ -752,2 +773,3 @@ if (labelPosition === 'inside') {
       }
+
       return {
@@ -762,5 +784,7 @@ id: node.id,
     });
+
     var _useMotionConfig = core.useMotionConfig(),
         animate = _useMotionConfig.animate,
         springConfig = _useMotionConfig.config;
+
     var springs = web.useSprings(labels.length, labels.map(function (label) {
@@ -774,56 +798,92 @@ return {
     }));
-    return springs.map(function (animatedProps, index) {
-      var label = labels[index];
-      return jsxRuntime.jsx(web.animated.text, {
-        dominantBaseline: "central",
-        textAnchor: label.textAnchor,
-        transform: animatedProps.transform,
-        style: _objectSpread2(_objectSpread2({}, theme.labels.text), {}, {
-          fill: animatedProps.color,
-          pointerEvents: 'none'
-        }),
-        children: label.label
-      }, label.id);
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: springs.map(function (animatedProps, index) {
+        var label = labels[index];
+        return jsxRuntime.jsx(web.animated.text, {
+          dominantBaseline: "central",
+          textAnchor: label.textAnchor,
+          transform: animatedProps.transform,
+          style: _objectSpread2(_objectSpread2({}, theme.labels.text), {}, {
+            fill: animatedProps.color,
+            pointerEvents: 'none'
+          }),
+          children: label.label
+        }, label.id);
+      })
     });
   };
-  var SankeyLabels$1 = react.memo(SankeyLabels);
 
-  var Sankey = function Sankey(_ref) {
+  var InnerSankey = function InnerSankey(_ref) {
     var data = _ref.data,
-        layout = _ref.layout,
-        sort = _ref.sort,
-        align = _ref.align,
+        valueFormat = _ref.valueFormat,
+        _ref$layout = _ref.layout,
+        layout = _ref$layout === void 0 ? svgDefaultProps.layout : _ref$layout,
+        _ref$sort = _ref.sort,
+        sort = _ref$sort === void 0 ? svgDefaultProps.sort : _ref$sort,
+        _ref$align = _ref.align,
+        align = _ref$align === void 0 ? svgDefaultProps.align : _ref$align,
         width = _ref.width,
         height = _ref.height,
         partialMargin = _ref.margin,
-        colors = _ref.colors,
-        nodeThickness = _ref.nodeThickness,
-        nodeSpacing = _ref.nodeSpacing,
-        nodeInnerPadding = _ref.nodeInnerPadding,
-        nodeBorderColor = _ref.nodeBorderColor,
-        nodeOpacity = _ref.nodeOpacity,
-        nodeHoverOpacity = _ref.nodeHoverOpacity,
-        nodeHoverOthersOpacity = _ref.nodeHoverOthersOpacity,
-        nodeBorderWidth = _ref.nodeBorderWidth,
-        linkOpacity = _ref.linkOpacity,
-        linkHoverOpacity = _ref.linkHoverOpacity,
-        linkHoverOthersOpacity = _ref.linkHoverOthersOpacity,
-        linkContract = _ref.linkContract,
-        linkBlendMode = _ref.linkBlendMode,
-        enableLinkGradient = _ref.enableLinkGradient,
-        enableLabels = _ref.enableLabels,
-        labelPosition = _ref.labelPosition,
-        labelPadding = _ref.labelPadding,
-        labelOrientation = _ref.labelOrientation,
-        label = _ref.label,
-        labelFormat = _ref.labelFormat,
-        labelTextColor = _ref.labelTextColor,
-        nodeTooltip = _ref.nodeTooltip,
-        linkTooltip = _ref.linkTooltip,
-        isInteractive = _ref.isInteractive,
+        _ref$colors = _ref.colors,
+        colors = _ref$colors === void 0 ? svgDefaultProps.colors : _ref$colors,
+        _ref$nodeThickness = _ref.nodeThickness,
+        nodeThickness = _ref$nodeThickness === void 0 ? svgDefaultProps.nodeThickness : _ref$nodeThickness,
+        _ref$nodeSpacing = _ref.nodeSpacing,
+        nodeSpacing = _ref$nodeSpacing === void 0 ? svgDefaultProps.nodeThickness : _ref$nodeSpacing,
+        _ref$nodeInnerPadding = _ref.nodeInnerPadding,
+        nodeInnerPadding = _ref$nodeInnerPadding === void 0 ? svgDefaultProps.nodeInnerPadding : _ref$nodeInnerPadding,
+        _ref$nodeBorderColor = _ref.nodeBorderColor,
+        nodeBorderColor = _ref$nodeBorderColor === void 0 ? svgDefaultProps.nodeBorderColor : _ref$nodeBorderColor,
+        _ref$nodeOpacity = _ref.nodeOpacity,
+        nodeOpacity = _ref$nodeOpacity === void 0 ? svgDefaultProps.nodeOpacity : _ref$nodeOpacity,
+        _ref$nodeHoverOpacity = _ref.nodeHoverOpacity,
+        nodeHoverOpacity = _ref$nodeHoverOpacity === void 0 ? svgDefaultProps.nodeHoverOpacity : _ref$nodeHoverOpacity,
+        _ref$nodeHoverOthersO = _ref.nodeHoverOthersOpacity,
+        nodeHoverOthersOpacity = _ref$nodeHoverOthersO === void 0 ? svgDefaultProps.nodeHoverOthersOpacity : _ref$nodeHoverOthersO,
+        _ref$nodeBorderWidth = _ref.nodeBorderWidth,
+        nodeBorderWidth = _ref$nodeBorderWidth === void 0 ? svgDefaultProps.nodeBorderWidth : _ref$nodeBorderWidth,
+        _ref$nodeBorderRadius = _ref.nodeBorderRadius,
+        nodeBorderRadius = _ref$nodeBorderRadius === void 0 ? svgDefaultProps.nodeBorderRadius : _ref$nodeBorderRadius,
+        _ref$linkOpacity = _ref.linkOpacity,
+        linkOpacity = _ref$linkOpacity === void 0 ? svgDefaultProps.linkOpacity : _ref$linkOpacity,
+        _ref$linkHoverOpacity = _ref.linkHoverOpacity,
+        linkHoverOpacity = _ref$linkHoverOpacity === void 0 ? svgDefaultProps.linkHoverOpacity : _ref$linkHoverOpacity,
+        _ref$linkHoverOthersO = _ref.linkHoverOthersOpacity,
+        linkHoverOthersOpacity = _ref$linkHoverOthersO === void 0 ? svgDefaultProps.linkHoverOthersOpacity : _ref$linkHoverOthersO,
+        _ref$linkContract = _ref.linkContract,
+        linkContract = _ref$linkContract === void 0 ? svgDefaultProps.linkContract : _ref$linkContract,
+        _ref$linkBlendMode = _ref.linkBlendMode,
+        linkBlendMode = _ref$linkBlendMode === void 0 ? svgDefaultProps.linkBlendMode : _ref$linkBlendMode,
+        _ref$enableLinkGradie = _ref.enableLinkGradient,
+        enableLinkGradient = _ref$enableLinkGradie === void 0 ? svgDefaultProps.enableLinkGradient : _ref$enableLinkGradie,
+        _ref$enableLabels = _ref.enableLabels,
+        enableLabels = _ref$enableLabels === void 0 ? svgDefaultProps.enableLabels : _ref$enableLabels,
+        _ref$labelPosition = _ref.labelPosition,
+        labelPosition = _ref$labelPosition === void 0 ? svgDefaultProps.labelPosition : _ref$labelPosition,
+        _ref$labelPadding = _ref.labelPadding,
+        labelPadding = _ref$labelPadding === void 0 ? svgDefaultProps.labelPadding : _ref$labelPadding,
+        _ref$labelOrientation = _ref.labelOrientation,
+        labelOrientation = _ref$labelOrientation === void 0 ? svgDefaultProps.labelOrientation : _ref$labelOrientation,
+        _ref$label = _ref.label,
+        label = _ref$label === void 0 ? svgDefaultProps.label : _ref$label,
+        _ref$labelTextColor = _ref.labelTextColor,
+        labelTextColor = _ref$labelTextColor === void 0 ? svgDefaultProps.labelTextColor : _ref$labelTextColor,
+        _ref$nodeTooltip = _ref.nodeTooltip,
+        nodeTooltip = _ref$nodeTooltip === void 0 ? svgDefaultProps.nodeTooltip : _ref$nodeTooltip,
+        _ref$linkTooltip = _ref.linkTooltip,
+        linkTooltip = _ref$linkTooltip === void 0 ? svgDefaultProps.linkTooltip : _ref$linkTooltip,
+        _ref$isInteractive = _ref.isInteractive,
+        isInteractive = _ref$isInteractive === void 0 ? svgDefaultProps.isInteractive : _ref$isInteractive,
         onClick = _ref.onClick,
-        tooltipFormat = _ref.tooltipFormat,
-        legends$1 = _ref.legends,
-        layers = _ref.layers,
-        role = _ref.role;
+        _ref$legends = _ref.legends,
+        legends$1 = _ref$legends === void 0 ? svgDefaultProps.legends : _ref$legends,
+        _ref$layers = _ref.layers,
+        layers = _ref$layers === void 0 ? svgDefaultProps.layers : _ref$layers,
+        _ref$role = _ref.role,
+        role = _ref$role === void 0 ? svgDefaultProps.role : _ref$role,
+        ariaLabel = _ref.ariaLabel,
+        ariaLabelledBy = _ref.ariaLabelledBy,
+        ariaDescribedBy = _ref.ariaDescribedBy;
+
     var _useDimensions = core.useDimensions(width, height, partialMargin),
@@ -835,4 +895,6 @@ margin = _useDimensions.margin,
         outerHeight = _useDimensions.outerHeight;
+
     var _useSankey = useSankey({
       data: data,
+      valueFormat: valueFormat,
       layout: layout,
@@ -849,3 +911,2 @@ width: innerWidth,
       label: label,
-      labelFormat: labelFormat,
       labelTextColor: labelTextColor
@@ -862,8 +923,11 @@ }),
         getLabelTextColor = _useSankey.getLabelTextColor;
+
     var isCurrentNode = function isCurrentNode() {
       return false;
     };
+
     var isCurrentLink = function isCurrentLink() {
       return false;
     };
+
     if (currentLink) {
@@ -874,2 +938,3 @@ isCurrentNode = function isCurrentNode(_ref2) {
       };
+
       isCurrentLink = function isCurrentLink(_ref3) {
@@ -881,2 +946,3 @@ var source = _ref3.source,
     }
+
     if (currentNode) {
@@ -895,2 +961,3 @@ var currentNodeIds = [currentNode.id];
       currentNodeIds = _uniq(currentNodeIds);
+
       isCurrentNode = function isCurrentNode(_ref6) {
@@ -900,2 +967,3 @@ var id = _ref6.id;
       };
+
       isCurrentLink = function isCurrentLink(_ref7) {
@@ -907,2 +975,3 @@ var source = _ref7.source,
     }
+
     var layerProps = {
@@ -918,3 +987,10 @@ links: links,
     var layerById = {
-      links: jsxRuntime.jsx(SankeyLinks$1, {
+      links: null,
+      nodes: null,
+      labels: null,
+      legends: null
+    };
+
+    if (layers.includes('links')) {
+      layerById.links = jsxRuntime.jsx(SankeyLinks, {
         links: links,
@@ -934,6 +1010,8 @@ layout: layout,
         onClick: onClick,
-        tooltip: linkTooltip,
-        tooltipFormat: tooltipFormat
-      }, "links"),
-      nodes: jsxRuntime.jsx(SankeyNodes$1, {
+        tooltip: linkTooltip
+      }, "links");
+    }
+
+    if (layers.includes('nodes')) {
+      layerById.nodes = jsxRuntime.jsx(SankeyNodes, {
         nodes: nodes,
@@ -943,4 +1021,5 @@ nodeOpacity: nodeOpacity,
         nodeHoverOthersOpacity: nodeHoverOthersOpacity,
-        nodeBorderWidth: nodeBorderWidth,
-        getNodeBorderColor: getNodeBorderColor,
+        borderWidth: nodeBorderWidth,
+        borderRadius: nodeBorderRadius,
+        getBorderColor: getNodeBorderColor,
         setCurrentNode: setCurrentNode,
@@ -952,16 +1031,8 @@ currentNode: currentNode,
         onClick: onClick,
-        tooltip: nodeTooltip,
-        tooltipFormat: tooltipFormat
-      }, "nodes"),
-      labels: null,
-      legends: legends$1.map(function (legend, i) {
-        return jsxRuntime.jsx(legends.BoxLegendSvg, _objectSpread2(_objectSpread2({}, legend), {}, {
-          containerWidth: innerWidth,
-          containerHeight: innerHeight,
-          data: legendData
-        }), "legend".concat(i));
-      })
-    };
-    if (enableLabels) {
-      layerById.labels = jsxRuntime.jsx(SankeyLabels$1, {
+        tooltip: nodeTooltip
+      }, "nodes");
+    }
+
+    if (layers.includes('labels') && enableLabels) {
+      layerById.labels = jsxRuntime.jsx(SankeyLabels, {
         nodes: nodes,
@@ -977,2 +1048,15 @@ layout: layout,
     }
+
+    if (layers.includes('legends')) {
+      layerById.legends = jsxRuntime.jsx(react.Fragment, {
+        children: legends$1.map(function (legend, i) {
+          return jsxRuntime.jsx(legends.BoxLegendSvg, _objectSpread2(_objectSpread2({}, legend), {}, {
+            containerWidth: innerWidth,
+            containerHeight: innerHeight,
+            data: legendData
+          }), "legend".concat(i));
+        })
+      }, "legends");
+    }
+
     return jsxRuntime.jsx(core.SvgWrapper, {
@@ -983,15 +1067,42 @@ width: outerWidth,
       role: role,
+      ariaLabel: ariaLabel,
+      ariaLabelledBy: ariaLabelledBy,
+      ariaDescribedBy: ariaDescribedBy,
       children: layers.map(function (layer, i) {
+        var _layerById$layer;
+
         if (typeof layer === 'function') {
           return jsxRuntime.jsx(react.Fragment, {
-            children: layer(layerProps)
+            children: react.createElement(layer, layerProps)
           }, i);
         }
-        return layerById[layer];
+
+        return (_layerById$layer = layerById === null || layerById === void 0 ? void 0 : layerById[layer]) !== null && _layerById$layer !== void 0 ? _layerById$layer : null;
       })
     });
   };
-  var WrappedSankey = core.withContainer(Sankey);
-  WrappedSankey.defaultProps = SankeyDefaultProps;
 
+  var Sankey = function Sankey(_ref8) {
+    var _ref8$isInteractive = _ref8.isInteractive,
+        isInteractive = _ref8$isInteractive === void 0 ? svgDefaultProps.isInteractive : _ref8$isInteractive,
+        _ref8$animate = _ref8.animate,
+        animate = _ref8$animate === void 0 ? svgDefaultProps.animate : _ref8$animate,
+        _ref8$motionConfig = _ref8.motionConfig,
+        motionConfig = _ref8$motionConfig === void 0 ? svgDefaultProps.motionConfig : _ref8$motionConfig,
+        theme = _ref8.theme,
+        renderWrapper = _ref8.renderWrapper,
+        otherProps = _objectWithoutProperties(_ref8, ["isInteractive", "animate", "motionConfig", "theme", "renderWrapper"]);
+
+    return jsxRuntime.jsx(core.Container, {
+      animate: animate,
+      isInteractive: isInteractive,
+      motionConfig: motionConfig,
+      renderWrapper: renderWrapper,
+      theme: theme,
+      children: jsxRuntime.jsx(InnerSankey, _objectSpread2({
+        isInteractive: isInteractive
+      }, otherProps))
+    });
+  };
+
   var ResponsiveSankey = function ResponsiveSankey(props) {
@@ -1002,3 +1113,3 @@ return jsxRuntime.jsx(core.ResponsiveWrapper, {
             height = _ref.height;
-        return jsxRuntime.jsx(WrappedSankey, _objectSpread2({
+        return jsxRuntime.jsx(Sankey, _objectSpread2({
           width: width,
@@ -1012,9 +1123,7 @@ height: height
   exports.ResponsiveSankey = ResponsiveSankey;
-  exports.Sankey = WrappedSankey;
-  exports.SankeyDefaultProps = SankeyDefaultProps;
-  exports.SankeyPropTypes = SankeyPropTypes;
+  exports.Sankey = Sankey;
   exports.sankeyAlignmentFromProp = sankeyAlignmentFromProp;
   exports.sankeyAlignmentPropKeys = sankeyAlignmentPropKeys;
   exports.sankeyAlignmentPropMapping = sankeyAlignmentPropMapping;
-  exports.sankeyAlignmentPropType = sankeyAlignmentPropType;
+  exports.svgDefaultProps = svgDefaultProps;
 
@@ -1021,0 +1130,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

package.json

 {
   "name": "@nivo/sankey",
-  "version": "0.73.0",
+  "version": "0.74.0",
   "license": "MIT",
@@ -24,14 +24,15 @@ "author": {
   "module": "./dist/nivo-sankey.es.js",
+  "typings": "./dist/types/index.d.ts",
   "files": [
     "README.md",
     "LICENSE.md",
-    "index.d.ts",
-    "dist/"
+    "dist/",
+    "!dist/tsconfig.tsbuildinfo"
   ],
   "dependencies": {
-    "@nivo/colors": "0.73.0",
-    "@nivo/legends": "0.73.0",
-    "@nivo/tooltip": "0.73.0",
-    "@react-spring/web": "9.2.4",
-    "d3-sankey": "^0.12.1",
+    "@nivo/colors": "0.74.0",
+    "@nivo/legends": "0.74.0",
+    "@nivo/tooltip": "0.74.0",
+    "@react-spring/web": "9.2.6",
+    "d3-sankey": "^0.12.3",
     "d3-shape": "^1.3.5",
@@ -41,7 +42,7 @@ "lodash": "^4.17.21"
   "devDependencies": {
-    "@nivo/core": "0.73.0"
+    "@nivo/core": "0.74.0",
+    "@types/d3-sankey": "^0.11.2"
   },
   "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"
@@ -52,3 +53,3 @@ },
   },
-  "gitHead": "919f213600a08609939198ea743f7dbde9a572e2"
+  "gitHead": "5d387c6723bb384f276d2b6ce15ca49c0e49948a"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

399012

increased by12.23%

Dependency count

9

decreased by-10%

Number of package files

39

increased by290%

Lines of code

3369

increased by13.89%

Worsened metrics

Dev dependency count

2

increased by100%

Dependency changes

• + Added@nivo/colors@0.74.0(transitive)

• + Added@nivo/core@0.74.0(transitive)

• + Added@nivo/recompose@0.74.0(transitive)

• + Added@nivo/tooltip@0.74.0(transitive)

• + Added@react-spring/web@9.2.6(transitive)

• - Removed@nivo/colors@0.73.0(transitive)

• - Removed@nivo/core@0.73.0(transitive)

• - Removed@nivo/recompose@0.73.0(transitive)

• - Removed@nivo/tooltip@0.73.0(transitive)

• - Removed@react-spring/web@9.2.4(transitive)

• Updated@nivo/colors@0.74.0

• Updated@nivo/legends@0.74.0

• Updated@nivo/tooltip@0.74.0

• Updated@react-spring/web@9.2.6

• Updatedd3-sankey@^0.12.3