ivt 0.3.4 → 0.3.6

package/dist/chart/index.mjs

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import React__default, { isValidElement, forwardRef, useContext, createContext, PureComponent, useState, useCallback, useEffect, useMemo, Children, cloneElement, useRef, createElement, useImperativeHandle } from 'react';
-import { a as clsx, c as cn } from '../chunks/utils-BUelq9Ro.mjs';
+import React__default, { isValidElement, forwardRef, useContext, createContext, PureComponent, useState, useCallback, useEffect, useMemo, useRef, cloneElement, createElement, useImperativeHandle } from 'react';
+import { a as clsx, c as cn } from '../chunks/utils-tbIgc9YG.mjs';
 import { createPortal } from 'react-dom';
-import { g as getDefaultExportFromCjs } from '../chunks/_commonjsHelpers-DqEvkrE1.mjs';
-import { r as requireShim } from '../chunks/index-PaJVyocC.mjs';
-import '../chunks/bundle-mjs-tFg__FnT.mjs';
+import { g as getDefaultExportFromCjs } from '../chunks/_commonjsHelpers-DKISyIRi.mjs';
+import { r as requireShim } from '../chunks/index-BwQDLVf8.mjs';
+import '../chunks/bundle-mjs-CS-QKnOm.mjs';
 
 var get$2 = {};
 
@@ -268,6 +268,11 @@ var isNan = (value)=>{
 var isPercent = (value)=>typeof value === 'string' && value.indexOf('%') === value.length - 1;
 var isNumber = (value)=>(typeof value === 'number' || value instanceof Number) && !isNan(value);
 var isNumOrStr = (value)=>isNumber(value) || typeof value === 'string';
+var idCounter = 0;
+var uniqueId = (prefix)=>{
+    var id = ++idCounter;
+    return "".concat(prefix || '').concat(id);
+};
 /**
  * Get percent value of a total value
  * @param {number|string} percent A percent
@@ -314,6 +319,12 @@ var hasDuplicate = (ary)=>{
     }
     return false;
 };
+function interpolate$1(start, end, t) {
+    if (isNumber(start) && isNumber(end)) {
+        return start + t * (end - start);
+    }
+    return end;
+}
 function findEntryInArray(ary, specifiedKey, specifiedValue) {
     if (!ary || !ary.length) {
         return undefined;
@@ -1001,7 +1012,7 @@ function isSvgElementPropKey(key) {
  * @deprecated do not use this function, as it is not type-safe and may lead to unexpected behavior. Returns `any`.
  * Instead, use:
  * - `excludeEventProps` to exclude event handlers
- * - `svgOnlyNoEvents` to exclude non-SVG attributes, and exclude event handlers too
+ * - `svgPropertiesNoEvents` to exclude non-SVG attributes, and exclude event handlers too
  * @param props - The props object to filter, which can be a Record, Component, FunctionComponent, boolean, or unknown.
  * @param includeEvents - A boolean indicating whether to include event handlers in the filtered props.
  * @param svgElementType - An optional parameter specifying the type of SVG element to filter attributes for.
@@ -1033,7 +1044,7 @@ function isSvgElementPropKey(key) {
     return out;
 };
 
-var _excluded$4 = [
+var _excluded$3 = [
     "children",
     "width",
     "height",
@@ -1043,25 +1054,25 @@ var _excluded$4 = [
     "title",
     "desc"
 ];
-function _extends$a() {
-    return _extends$a = Object.assign ? Object.assign.bind() : function(n) {
+function _extends$9() {
+    return _extends$9 = Object.assign ? Object.assign.bind() : function(n) {
         for(var e = 1; e < arguments.length; e++){
             var t = arguments[e];
             for(var r in t)({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
         }
         return n;
-    }, _extends$a.apply(null, arguments);
+    }, _extends$9.apply(null, arguments);
 }
-function _objectWithoutProperties$4(e, t) {
+function _objectWithoutProperties$3(e, t) {
     if (null == e) return {};
-    var o, r, i = _objectWithoutPropertiesLoose$4(e, t);
+    var o, r, i = _objectWithoutPropertiesLoose$3(e, t);
     if (Object.getOwnPropertySymbols) {
         var n = Object.getOwnPropertySymbols(e);
         for(r = 0; r < n.length; r++)o = n[r], -1 === t.indexOf(o) && ({}).propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
     }
     return i;
 }
-function _objectWithoutPropertiesLoose$4(r, e) {
+function _objectWithoutPropertiesLoose$3(r, e) {
     if (null == r) return {};
     var t = {};
     for(var n in r)if (({}).hasOwnProperty.call(r, n)) {
@@ -1071,7 +1082,7 @@ function _objectWithoutPropertiesLoose$4(r, e) {
     return t;
 }
 var Surface = /*#__PURE__*/ forwardRef((props, ref)=>{
-    var { children, width, height, viewBox, className, style, title, desc } = props, others = _objectWithoutProperties$4(props, _excluded$4);
+    var { children, width, height, viewBox, className, style, title, desc } = props, others = _objectWithoutProperties$3(props, _excluded$3);
     var svgView = viewBox || {
         width,
         height,
@@ -1079,7 +1090,7 @@ var Surface = /*#__PURE__*/ forwardRef((props, ref)=>{
         y: 0
     };
     var layerClass = clsx('recharts-surface', className);
-    return /*#__PURE__*/ React.createElement("svg", _extends$a({}, filterProps(others, true, 'svg'), {
+    return /*#__PURE__*/ React.createElement("svg", _extends$9({}, filterProps(others, true, 'svg'), {
         className: layerClass,
         width: width,
         height: height,
@@ -2035,19 +2046,19 @@ function stackOffsetWiggle(series, order) {
     stackOffsetNone(series, order);
 }
 
-var _excluded$3 = [
+var _excluded$2 = [
     "type",
     "size",
     "sizeType"
 ];
-function _extends$9() {
-    return _extends$9 = Object.assign ? Object.assign.bind() : function(n) {
+function _extends$8() {
+    return _extends$8 = Object.assign ? Object.assign.bind() : function(n) {
         for(var e = 1; e < arguments.length; e++){
             var t = arguments[e];
             for(var r in t)({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
         }
         return n;
-    }, _extends$9.apply(null, arguments);
+    }, _extends$8.apply(null, arguments);
 }
 function ownKeys$j(e, r) {
     var t = Object.keys(e);
@@ -2092,16 +2103,16 @@ function _toPrimitive$j(t, r) {
     }
     return ("string" === r ? String : Number)(t);
 }
-function _objectWithoutProperties$3(e, t) {
+function _objectWithoutProperties$2(e, t) {
     if (null == e) return {};
-    var o, r, i = _objectWithoutPropertiesLoose$3(e, t);
+    var o, r, i = _objectWithoutPropertiesLoose$2(e, t);
     if (Object.getOwnPropertySymbols) {
         var n = Object.getOwnPropertySymbols(e);
         for(r = 0; r < n.length; r++)o = n[r], -1 === t.indexOf(o) && ({}).propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
     }
     return i;
 }
-function _objectWithoutPropertiesLoose$3(r, e) {
+function _objectWithoutPropertiesLoose$2(r, e) {
     if (null == r) return {};
     var t = {};
     for(var n in r)if (({}).hasOwnProperty.call(r, n)) {
@@ -2152,24 +2163,34 @@ var registerSymbol = (key, factory)=>{
     symbolFactories["symbol".concat(upperFirst(key))] = factory;
 };
 var Symbols = (_ref)=>{
-    var { type = 'circle', size = 64, sizeType = 'area' } = _ref, rest = _objectWithoutProperties$3(_ref, _excluded$3);
+    var { type = 'circle', size = 64, sizeType = 'area' } = _ref, rest = _objectWithoutProperties$2(_ref, _excluded$2);
     var props = _objectSpread$j(_objectSpread$j({}, rest), {}, {
         type,
         size,
         sizeType
     });
+    var realType = 'circle';
+    if (typeof type === 'string') {
+        /*
+     * Our type guard is not as strong as it could be (i.e. non-existent),
+     * and so despite the typescript type saying that `type` is a `SymbolType`,
+     * we can get numbers or really anything, so let's have a runtime check here to fix the exception.
+     *
+     * https://github.com/recharts/recharts/issues/6197
+     */ realType = type;
+    }
     /**
    * Calculate the path of curve
    * @return {String} path
    */ var getPath = ()=>{
-        var symbolFactory = getSymbolFactory(type);
-        var symbol = Symbol$1().type(symbolFactory).size(calculateAreaSize(size, sizeType, type));
+        var symbolFactory = getSymbolFactory(realType);
+        var symbol = Symbol$1().type(symbolFactory).size(calculateAreaSize(size, sizeType, realType));
         return symbol();
     };
     var { className, cx, cy } = props;
     var filteredProps = filterProps(props, true);
     if (cx === +cx && cy === +cy && size === +size) {
-        return /*#__PURE__*/ React.createElement("path", _extends$9({}, filteredProps, {
+        return /*#__PURE__*/ React.createElement("path", _extends$8({}, filteredProps, {
             className: clsx('recharts-symbols', className),
             transform: "translate(".concat(cx, ", ").concat(cy, ")"),
             d: getPath()
@@ -2179,14 +2200,14 @@ var Symbols = (_ref)=>{
 };
 Symbols.registerSymbol = registerSymbol;
 
-function _extends$8() {
-    return _extends$8 = Object.assign ? Object.assign.bind() : function(n) {
+function _extends$7() {
+    return _extends$7 = Object.assign ? Object.assign.bind() : function(n) {
         for(var e = 1; e < arguments.length; e++){
             var t = arguments[e];
             for(var r in t)({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
         }
         return n;
-    }, _extends$8.apply(null, arguments);
+    }, _extends$7.apply(null, arguments);
 }
 function ownKeys$i(e, r) {
     var t = Object.keys(e);
@@ -2324,7 +2345,7 @@ class DefaultLegendContent extends PureComponent {
             }
             var color = entry.inactive ? inactiveColor : entry.color;
             var finalValue = finalFormatter ? finalFormatter(entry.value, entry, i) : entry.value;
-            return /*#__PURE__*/ React.createElement("li", _extends$8({
+            return /*#__PURE__*/ React.createElement("li", _extends$7({
                 className: className,
                 style: itemStyle,
                 key: "legend-item-".concat(i)
@@ -4227,7 +4248,8 @@ var EPS$1 = 1;
                 });
             }
         }
-    }, [
+    }, // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
         lastBoundingBox.width,
         lastBoundingBox.height,
         lastBoundingBox.top,
@@ -4242,7 +4264,7 @@ var EPS$1 = 1;
 
 // src/utils/formatProdErrorMessage.ts
 // src/utils/isPlainObject.ts
-function isPlainObject$2(obj) {
+function isPlainObject$1(obj) {
     if (typeof obj !== "object" || obj === null) return false;
     let proto = obj;
     while(Object.getPrototypeOf(proto) !== null){
@@ -4252,7 +4274,7 @@ function isPlainObject$2(obj) {
 }
 // src/utils/isAction.ts
 function isAction(action) {
-    return isPlainObject$2(action) && "type" in action && typeof action.type === "string";
+    return isPlainObject$1(action) && "type" in action && typeof action.type === "string";
 }
 
 // src/utils/env.ts
@@ -4304,10 +4326,10 @@ function isDraft(value) {
 }
 function isDraftable(value) {
     if (!value) return false;
-    return isPlainObject$1(value) || Array.isArray(value) || !!value[DRAFTABLE] || !!value.constructor?.[DRAFTABLE] || isMap(value) || isSet(value);
+    return isPlainObject(value) || Array.isArray(value) || !!value[DRAFTABLE] || !!value.constructor?.[DRAFTABLE] || isMap(value) || isSet(value);
 }
 var objectCtorString = Object.prototype.constructor.toString();
-function isPlainObject$1(value) {
+function isPlainObject(value) {
     if (!value || typeof value !== "object") return false;
     const proto = getPrototypeOf(value);
     if (proto === null) {
@@ -4364,7 +4386,7 @@ function shallowCopy(base, strict) {
         return new Set(base);
     }
     if (Array.isArray(base)) return Array.prototype.slice.call(base);
-    const isPlain = isPlainObject$1(base);
+    const isPlain = isPlainObject(base);
     if (strict === true || strict === "class_only" && !isPlain) {
         const descriptors = Object.getOwnPropertyDescriptors(base);
         delete descriptors[DRAFT_STATE];
@@ -5655,6 +5677,44 @@ function _toPrimitive$g(t, r) {
     return ("string" === r ? String : Number)(t);
 }
 var selectBrushHeight = (state)=>state.brush.height;
+function selectLeftAxesOffset(state) {
+    var yAxes = selectAllYAxes(state);
+    return yAxes.reduce((result, entry)=>{
+        if (entry.orientation === 'left' && !entry.mirror && !entry.hide) {
+            var width = typeof entry.width === 'number' ? entry.width : DEFAULT_Y_AXIS_WIDTH;
+            return result + width;
+        }
+        return result;
+    }, 0);
+}
+function selectRightAxesOffset(state) {
+    var yAxes = selectAllYAxes(state);
+    return yAxes.reduce((result, entry)=>{
+        if (entry.orientation === 'right' && !entry.mirror && !entry.hide) {
+            var width = typeof entry.width === 'number' ? entry.width : DEFAULT_Y_AXIS_WIDTH;
+            return result + width;
+        }
+        return result;
+    }, 0);
+}
+function selectTopAxesOffset(state) {
+    var xAxes = selectAllXAxes(state);
+    return xAxes.reduce((result, entry)=>{
+        if (entry.orientation === 'top' && !entry.mirror && !entry.hide) {
+            return result + entry.height;
+        }
+        return result;
+    }, 0);
+}
+function selectBottomAxesOffset(state) {
+    var xAxes = selectAllXAxes(state);
+    return xAxes.reduce((result, entry)=>{
+        if (entry.orientation === 'bottom' && !entry.mirror && !entry.hide) {
+            return result + entry.height;
+        }
+        return result;
+    }, 0);
+}
 /**
  * For internal use only.
  *
@@ -5665,36 +5725,21 @@ var selectBrushHeight = (state)=>state.brush.height;
     selectChartHeight,
     selectMargin,
     selectBrushHeight,
-    selectAllXAxes,
-    selectAllYAxes,
+    selectLeftAxesOffset,
+    selectRightAxesOffset,
+    selectTopAxesOffset,
+    selectBottomAxesOffset,
     selectLegendSettings,
     selectLegendSize
-], (chartWidth, chartHeight, margin, brushHeight, xAxes, yAxes, legendSettings, legendSize)=>{
-    var offsetH = yAxes.reduce((result, entry)=>{
-        var { orientation } = entry;
-        if (!entry.mirror && !entry.hide) {
-            var width = typeof entry.width === 'number' ? entry.width : DEFAULT_Y_AXIS_WIDTH;
-            return _objectSpread$g(_objectSpread$g({}, result), {}, {
-                [orientation]: result[orientation] + width
-            });
-        }
-        return result;
-    }, {
-        left: margin.left || 0,
-        right: margin.right || 0
-    });
-    var offsetV = xAxes.reduce((result, entry)=>{
-        var { orientation } = entry;
-        if (!entry.mirror && !entry.hide) {
-            return _objectSpread$g(_objectSpread$g({}, result), {}, {
-                [orientation]: get(result, "".concat(orientation)) + entry.height
-            });
-        }
-        return result;
-    }, {
-        top: margin.top || 0,
-        bottom: margin.bottom || 0
-    });
+], (chartWidth, chartHeight, margin, brushHeight, leftAxesOffset, rightAxesOffset, topAxesOffset, bottomAxesOffset, legendSettings, legendSize)=>{
+    var offsetH = {
+        left: (margin.left || 0) + leftAxesOffset,
+        right: (margin.right || 0) + rightAxesOffset
+    };
+    var offsetV = {
+        top: (margin.top || 0) + topAxesOffset,
+        bottom: (margin.bottom || 0) + bottomAxesOffset
+    };
     var offset = _objectSpread$g(_objectSpread$g({}, offsetV), offsetH);
     var brushBottom = offset.bottom;
     offset.bottom += brushHeight;
@@ -5814,15 +5859,17 @@ var manyComponentsThrowErrorsIfOffsetIsUndefined = {
  */ var useChartHeight = ()=>{
     return useAppSelector(selectChartHeight);
 };
-var manyComponentsThrowErrorsIfMarginIsUndefined = {
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0
-};
-var useMargin = ()=>{
-    var _useAppSelector3;
-    return (_useAppSelector3 = useAppSelector((state)=>state.layout.margin)) !== null && _useAppSelector3 !== void 0 ? _useAppSelector3 : manyComponentsThrowErrorsIfMarginIsUndefined;
+/**
+ * Margin is the empty space around the chart. Excludes axes and legend and brushes and the like.
+ * This is declared by the user in the chart props.
+ * If you are interested in the space occupied by axes, legend, or brushes,
+ * use `useOffset` instead.
+ *
+ * Returns `undefined` if used outside a chart context.
+ *
+ * @returns {Margin | undefined} The margin of the chart in pixels, or `undefined` if not in a chart context.
+ */ var useMargin = ()=>{
+    return useAppSelector((state)=>state.layout.margin);
 };
 var selectChartLayout = (state)=>state.layout.layoutType;
 var useChartLayout = ()=>useAppSelector(selectChartLayout);
@@ -5873,17 +5920,17 @@ var legendSlice = createSlice({
 });
 var { setLegendSize, setLegendSettings, addLegendPayload, removeLegendPayload } = legendSlice.actions;
 
-var _excluded$2 = [
+var _excluded$1 = [
     "contextPayload"
 ];
-function _extends$7() {
-    return _extends$7 = Object.assign ? Object.assign.bind() : function(n) {
+function _extends$6() {
+    return _extends$6 = Object.assign ? Object.assign.bind() : function(n) {
         for(var e = 1; e < arguments.length; e++){
             var t = arguments[e];
             for(var r in t)({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
         }
         return n;
-    }, _extends$7.apply(null, arguments);
+    }, _extends$6.apply(null, arguments);
 }
 function ownKeys$f(e, r) {
     var t = Object.keys(e);
@@ -5928,16 +5975,16 @@ function _toPrimitive$f(t, r) {
     }
     return ("string" === r ? String : Number)(t);
 }
-function _objectWithoutProperties$2(e, t) {
+function _objectWithoutProperties$1(e, t) {
     if (null == e) return {};
-    var o, r, i = _objectWithoutPropertiesLoose$2(e, t);
+    var o, r, i = _objectWithoutPropertiesLoose$1(e, t);
     if (Object.getOwnPropertySymbols) {
         var n = Object.getOwnPropertySymbols(e);
         for(r = 0; r < n.length; r++)o = n[r], -1 === t.indexOf(o) && ({}).propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
     }
     return i;
 }
-function _objectWithoutPropertiesLoose$2(r, e) {
+function _objectWithoutPropertiesLoose$1(r, e) {
     if (null == r) return {};
     var t = {};
     for(var n in r)if (({}).hasOwnProperty.call(r, n)) {
@@ -5950,7 +5997,7 @@ function defaultUniqBy$1(entry) {
     return entry.value;
 }
 function LegendContent(props) {
-    var { contextPayload } = props, otherProps = _objectWithoutProperties$2(props, _excluded$2);
+    var { contextPayload } = props, otherProps = _objectWithoutProperties$1(props, _excluded$1);
     var finalPayload = getUniqPayload(contextPayload, props.payloadUniqBy, defaultUniqBy$1);
     var contentProps = _objectSpread$f(_objectSpread$f({}, otherProps), {}, {
         payload: finalPayload
@@ -6032,6 +6079,9 @@ function LegendWrapper(props) {
     ]);
     var chartWidth = useChartWidth();
     var chartHeight = useChartHeight();
+    if (chartWidth == null || chartHeight == null) {
+        return null;
+    }
     var maxWidth = chartWidth - (margin.left || 0) - (margin.right || 0);
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
     var widthOrHeight = Legend.getWidthOrHeight(props.layout, heightFromProps, widthFromProps, maxWidth);
@@ -6057,7 +6107,7 @@ function LegendWrapper(props) {
     }), /*#__PURE__*/ React.createElement(LegendSizeDispatcher, {
         width: lastBoundingBox.width,
         height: lastBoundingBox.height
-    }), /*#__PURE__*/ React.createElement(LegendContent, _extends$7({}, props, widthOrHeight, {
+    }), /*#__PURE__*/ React.createElement(LegendContent, _extends$6({}, props, widthOrHeight, {
         margin: margin,
         chartWidth: chartWidth,
         chartHeight: chartHeight,
@@ -6092,14 +6142,14 @@ _defineProperty$f(Legend, "defaultProps", {
     verticalAlign: 'bottom'
 });
 
-function _extends$6() {
-    return _extends$6 = Object.assign ? Object.assign.bind() : function(n) {
+function _extends$5() {
+    return _extends$5 = Object.assign ? Object.assign.bind() : function(n) {
         for(var e = 1; e < arguments.length; e++){
             var t = arguments[e];
             for(var r in t)({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
         }
         return n;
-    }, _extends$6.apply(null, arguments);
+    }, _extends$5.apply(null, arguments);
 }
 function ownKeys$e(e, r) {
     var t = Object.keys(e);
@@ -6222,7 +6272,7 @@ var DefaultTooltipContent = (props)=>{
         role: 'status',
         'aria-live': 'assertive'
     } : {};
-    return /*#__PURE__*/ React.createElement("div", _extends$6({
+    return /*#__PURE__*/ React.createElement("div", _extends$5({
         className: wrapperCN,
         style: finalStyle
     }, accessibilityAttributes), /*#__PURE__*/ React.createElement("p", {
@@ -6458,14 +6508,14 @@ function isWellBehavedNumber(n) {
     return Number.isFinite(n);
 }
 
-function _extends$5() {
-    return _extends$5 = Object.assign ? Object.assign.bind() : function(n) {
+function _extends$4() {
+    return _extends$4 = Object.assign ? Object.assign.bind() : function(n) {
         for(var e = 1; e < arguments.length; e++){
             var t = arguments[e];
             for(var r in t)({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
         }
         return n;
-    }, _extends$5.apply(null, arguments);
+    }, _extends$4.apply(null, arguments);
 }
 function ownKeys$c(e, r) {
     var t = Object.keys(e);
@@ -6581,14 +6631,14 @@ var Curve = (props)=>{
         return null;
     }
     var realPath = points && points.length ? getPath$1(props) : path;
-    return /*#__PURE__*/ React.createElement("path", _extends$5({}, svgPropertiesNoEvents(props), adaptEventHandlers(props), {
+    return /*#__PURE__*/ React.createElement("path", _extends$4({}, svgPropertiesNoEvents(props), adaptEventHandlers(props), {
         className: clsx('recharts-curve', className),
         d: realPath === null ? undefined : realPath,
         ref: pathRef
     }));
 };
 
-var _excluded$1 = [
+var _excluded = [
     "x",
     "y",
     "top",
@@ -6597,14 +6647,14 @@ var _excluded$1 = [
     "height",
     "className"
 ];
-function _extends$4() {
-    return _extends$4 = Object.assign ? Object.assign.bind() : function(n) {
+function _extends$3() {
+    return _extends$3 = Object.assign ? Object.assign.bind() : function(n) {
         for(var e = 1; e < arguments.length; e++){
             var t = arguments[e];
             for(var r in t)({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
         }
         return n;
-    }, _extends$4.apply(null, arguments);
+    }, _extends$3.apply(null, arguments);
 }
 function ownKeys$b(e, r) {
     var t = Object.keys(e);
@@ -6649,16 +6699,16 @@ function _toPrimitive$b(t, r) {
     }
     return ("string" === r ? String : Number)(t);
 }
-function _objectWithoutProperties$1(e, t) {
+function _objectWithoutProperties(e, t) {
     if (null == e) return {};
-    var o, r, i = _objectWithoutPropertiesLoose$1(e, t);
+    var o, r, i = _objectWithoutPropertiesLoose(e, t);
     if (Object.getOwnPropertySymbols) {
         var n = Object.getOwnPropertySymbols(e);
         for(r = 0; r < n.length; r++)o = n[r], -1 === t.indexOf(o) && ({}).propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
     }
     return i;
 }
-function _objectWithoutPropertiesLoose$1(r, e) {
+function _objectWithoutPropertiesLoose(r, e) {
     if (null == r) return {};
     var t = {};
     for(var n in r)if (({}).hasOwnProperty.call(r, n)) {
@@ -6671,7 +6721,7 @@ var getPath = (x, y, width, height, top, left)=>{
     return "M".concat(x, ",").concat(top, "v").concat(height, "M").concat(left, ",").concat(y, "h").concat(width);
 };
 var Cross = (_ref)=>{
-    var { x = 0, y = 0, top = 0, left = 0, width = 0, height = 0, className } = _ref, rest = _objectWithoutProperties$1(_ref, _excluded$1);
+    var { x = 0, y = 0, top = 0, left = 0, width = 0, height = 0, className } = _ref, rest = _objectWithoutProperties(_ref, _excluded);
     var props = _objectSpread$b({
         x,
         y,
@@ -6683,7 +6733,7 @@ var Cross = (_ref)=>{
     if (!isNumber(x) || !isNumber(y) || !isNumber(width) || !isNumber(height) || !isNumber(top) || !isNumber(left)) {
         return null;
     }
-    return /*#__PURE__*/ React.createElement("path", _extends$4({}, filterProps(props, true), {
+    return /*#__PURE__*/ React.createElement("path", _extends$3({}, filterProps(props, true), {
         className: clsx('recharts-cross', className),
         d: getPath(x, y, width, height, top, left)
     }));
@@ -6812,448 +6862,7 @@ function _toPrimitive$a(t, r) {
  * This is useful for creating a type that represents the resolved props of a component with default props.
  */
 
-var isEqual$2 = {};
-
-var isEqualWith = {};
-
-var isPlainObject = {};
-
-var hasRequiredIsPlainObject;
-function requireIsPlainObject() {
-    if (hasRequiredIsPlainObject) return isPlainObject;
-    hasRequiredIsPlainObject = 1;
-    (function(exports) {
-        Object.defineProperty(exports, Symbol.toStringTag, {
-            value: 'Module'
-        });
-        function isPlainObject(value) {
-            if (!value || typeof value !== 'object') {
-                return false;
-            }
-            const proto = Object.getPrototypeOf(value);
-            const hasObjectPrototype = proto === null || proto === Object.prototype || Object.getPrototypeOf(proto) === null;
-            if (!hasObjectPrototype) {
-                return false;
-            }
-            return Object.prototype.toString.call(value) === '[object Object]';
-        }
-        exports.isPlainObject = isPlainObject;
-    })(isPlainObject);
-    return isPlainObject;
-}
-
-var hasRequiredIsEqualWith;
-function requireIsEqualWith() {
-    if (hasRequiredIsEqualWith) return isEqualWith;
-    hasRequiredIsEqualWith = 1;
-    (function(exports) {
-        Object.defineProperty(exports, Symbol.toStringTag, {
-            value: 'Module'
-        });
-        const isPlainObject = /*@__PURE__*/ requireIsPlainObject();
-        const getSymbols = /*@__PURE__*/ requireGetSymbols();
-        const getTag = /*@__PURE__*/ requireGetTag();
-        const tags = /*@__PURE__*/ requireTags();
-        const eq = /*@__PURE__*/ requireEq();
-        function isEqualWith(a, b, areValuesEqual) {
-            return isEqualWithImpl(a, b, undefined, undefined, undefined, undefined, areValuesEqual);
-        }
-        function isEqualWithImpl(a, b, property, aParent, bParent, stack, areValuesEqual) {
-            const result = areValuesEqual(a, b, property, aParent, bParent, stack);
-            if (result !== undefined) {
-                return result;
-            }
-            if (typeof a === typeof b) {
-                switch(typeof a){
-                    case 'bigint':
-                    case 'string':
-                    case 'boolean':
-                    case 'symbol':
-                    case 'undefined':
-                        {
-                            return a === b;
-                        }
-                    case 'number':
-                        {
-                            return a === b || Object.is(a, b);
-                        }
-                    case 'function':
-                        {
-                            return a === b;
-                        }
-                    case 'object':
-                        {
-                            return areObjectsEqual(a, b, stack, areValuesEqual);
-                        }
-                }
-            }
-            return areObjectsEqual(a, b, stack, areValuesEqual);
-        }
-        function areObjectsEqual(a, b, stack, areValuesEqual) {
-            if (Object.is(a, b)) {
-                return true;
-            }
-            let aTag = getTag.getTag(a);
-            let bTag = getTag.getTag(b);
-            if (aTag === tags.argumentsTag) {
-                aTag = tags.objectTag;
-            }
-            if (bTag === tags.argumentsTag) {
-                bTag = tags.objectTag;
-            }
-            if (aTag !== bTag) {
-                return false;
-            }
-            switch(aTag){
-                case tags.stringTag:
-                    return a.toString() === b.toString();
-                case tags.numberTag:
-                    {
-                        const x = a.valueOf();
-                        const y = b.valueOf();
-                        return eq.eq(x, y);
-                    }
-                case tags.booleanTag:
-                case tags.dateTag:
-                case tags.symbolTag:
-                    return Object.is(a.valueOf(), b.valueOf());
-                case tags.regexpTag:
-                    {
-                        return a.source === b.source && a.flags === b.flags;
-                    }
-                case tags.functionTag:
-                    {
-                        return a === b;
-                    }
-            }
-            stack = stack ?? new Map();
-            const aStack = stack.get(a);
-            const bStack = stack.get(b);
-            if (aStack != null && bStack != null) {
-                return aStack === b;
-            }
-            stack.set(a, b);
-            stack.set(b, a);
-            try {
-                switch(aTag){
-                    case tags.mapTag:
-                        {
-                            if (a.size !== b.size) {
-                                return false;
-                            }
-                            for (const [key, value] of a.entries()){
-                                if (!b.has(key) || !isEqualWithImpl(value, b.get(key), key, a, b, stack, areValuesEqual)) {
-                                    return false;
-                                }
-                            }
-                            return true;
-                        }
-                    case tags.setTag:
-                        {
-                            if (a.size !== b.size) {
-                                return false;
-                            }
-                            const aValues = Array.from(a.values());
-                            const bValues = Array.from(b.values());
-                            for(let i = 0; i < aValues.length; i++){
-                                const aValue = aValues[i];
-                                const index = bValues.findIndex((bValue)=>{
-                                    return isEqualWithImpl(aValue, bValue, undefined, a, b, stack, areValuesEqual);
-                                });
-                                if (index === -1) {
-                                    return false;
-                                }
-                                bValues.splice(index, 1);
-                            }
-                            return true;
-                        }
-                    case tags.arrayTag:
-                    case tags.uint8ArrayTag:
-                    case tags.uint8ClampedArrayTag:
-                    case tags.uint16ArrayTag:
-                    case tags.uint32ArrayTag:
-                    case tags.bigUint64ArrayTag:
-                    case tags.int8ArrayTag:
-                    case tags.int16ArrayTag:
-                    case tags.int32ArrayTag:
-                    case tags.bigInt64ArrayTag:
-                    case tags.float32ArrayTag:
-                    case tags.float64ArrayTag:
-                        {
-                            if (typeof Buffer !== 'undefined' && Buffer.isBuffer(a) !== Buffer.isBuffer(b)) {
-                                return false;
-                            }
-                            if (a.length !== b.length) {
-                                return false;
-                            }
-                            for(let i = 0; i < a.length; i++){
-                                if (!isEqualWithImpl(a[i], b[i], i, a, b, stack, areValuesEqual)) {
-                                    return false;
-                                }
-                            }
-                            return true;
-                        }
-                    case tags.arrayBufferTag:
-                        {
-                            if (a.byteLength !== b.byteLength) {
-                                return false;
-                            }
-                            return areObjectsEqual(new Uint8Array(a), new Uint8Array(b), stack, areValuesEqual);
-                        }
-                    case tags.dataViewTag:
-                        {
-                            if (a.byteLength !== b.byteLength || a.byteOffset !== b.byteOffset) {
-                                return false;
-                            }
-                            return areObjectsEqual(new Uint8Array(a), new Uint8Array(b), stack, areValuesEqual);
-                        }
-                    case tags.errorTag:
-                        {
-                            return a.name === b.name && a.message === b.message;
-                        }
-                    case tags.objectTag:
-                        {
-                            const areEqualInstances = areObjectsEqual(a.constructor, b.constructor, stack, areValuesEqual) || isPlainObject.isPlainObject(a) && isPlainObject.isPlainObject(b);
-                            if (!areEqualInstances) {
-                                return false;
-                            }
-                            const aKeys = [
-                                ...Object.keys(a),
-                                ...getSymbols.getSymbols(a)
-                            ];
-                            const bKeys = [
-                                ...Object.keys(b),
-                                ...getSymbols.getSymbols(b)
-                            ];
-                            if (aKeys.length !== bKeys.length) {
-                                return false;
-                            }
-                            for(let i = 0; i < aKeys.length; i++){
-                                const propKey = aKeys[i];
-                                const aProp = a[propKey];
-                                if (!Object.hasOwn(b, propKey)) {
-                                    return false;
-                                }
-                                const bProp = b[propKey];
-                                if (!isEqualWithImpl(aProp, bProp, propKey, a, b, stack, areValuesEqual)) {
-                                    return false;
-                                }
-                            }
-                            return true;
-                        }
-                    default:
-                        {
-                            return false;
-                        }
-                }
-            } finally{
-                stack.delete(a);
-                stack.delete(b);
-            }
-        }
-        exports.isEqualWith = isEqualWith;
-    })(isEqualWith);
-    return isEqualWith;
-}
-
-var noop = {};
-
-var hasRequiredNoop;
-function requireNoop() {
-    if (hasRequiredNoop) return noop;
-    hasRequiredNoop = 1;
-    (function(exports) {
-        Object.defineProperty(exports, Symbol.toStringTag, {
-            value: 'Module'
-        });
-        function noop() {}
-        exports.noop = noop;
-    })(noop);
-    return noop;
-}
-
-var hasRequiredIsEqual$1;
-function requireIsEqual$1() {
-    if (hasRequiredIsEqual$1) return isEqual$2;
-    hasRequiredIsEqual$1 = 1;
-    (function(exports) {
-        Object.defineProperty(exports, Symbol.toStringTag, {
-            value: 'Module'
-        });
-        const isEqualWith = /*@__PURE__*/ requireIsEqualWith();
-        const noop = /*@__PURE__*/ requireNoop();
-        function isEqual(a, b) {
-            return isEqualWith.isEqualWith(a, b, noop.noop);
-        }
-        exports.isEqual = isEqual;
-    })(isEqual$2);
-    return isEqual$2;
-}
-
-var isEqual$1;
-var hasRequiredIsEqual;
-function requireIsEqual() {
-    if (hasRequiredIsEqual) return isEqual$1;
-    hasRequiredIsEqual = 1;
-    isEqual$1 = /*@__PURE__*/ requireIsEqual$1().isEqual;
-    return isEqual$1;
-}
-
-var isEqualExports = /*@__PURE__*/ requireIsEqual();
-var isEqual = /*@__PURE__*/getDefaultExportFromCjs(isEqualExports);
-
-var ACCURACY = 1e-4;
-var cubicBezierFactor = (c1, c2)=>[
-        0,
-        3 * c1,
-        3 * c2 - 6 * c1,
-        3 * c1 - 3 * c2 + 1
-    ];
-var evaluatePolynomial = (params, t)=>params.map((param, i)=>param * t ** i).reduce((pre, curr)=>pre + curr);
-var cubicBezier = (c1, c2)=>(t)=>{
-        var params = cubicBezierFactor(c1, c2);
-        return evaluatePolynomial(params, t);
-    };
-var derivativeCubicBezier = (c1, c2)=>(t)=>{
-        var params = cubicBezierFactor(c1, c2);
-        var newParams = [
-            ...params.map((param, i)=>param * i).slice(1),
-            0
-        ];
-        return evaluatePolynomial(newParams, t);
-    };
-// calculate cubic-bezier using Newton's method
-var configBezier = function configBezier() {
-    var x1, x2, y1, y2;
-    for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
-        args[_key] = arguments[_key];
-    }
-    if (args.length === 1) {
-        switch(args[0]){
-            case 'linear':
-                [x1, y1, x2, y2] = [
-                    0.0,
-                    0.0,
-                    1.0,
-                    1.0
-                ];
-                break;
-            case 'ease':
-                [x1, y1, x2, y2] = [
-                    0.25,
-                    0.1,
-                    0.25,
-                    1.0
-                ];
-                break;
-            case 'ease-in':
-                [x1, y1, x2, y2] = [
-                    0.42,
-                    0.0,
-                    1.0,
-                    1.0
-                ];
-                break;
-            case 'ease-out':
-                [x1, y1, x2, y2] = [
-                    0.42,
-                    0.0,
-                    0.58,
-                    1.0
-                ];
-                break;
-            case 'ease-in-out':
-                [x1, y1, x2, y2] = [
-                    0.0,
-                    0.0,
-                    0.58,
-                    1.0
-                ];
-                break;
-            default:
-                {
-                    var easing = args[0].split('(');
-                    if (easing[0] === 'cubic-bezier' && easing[1].split(')')[0].split(',').length === 4) {
-                        [x1, y1, x2, y2] = easing[1].split(')')[0].split(',').map((x)=>parseFloat(x));
-                    }
-                }
-        }
-    } else if (args.length === 4) {
-        [x1, y1, x2, y2] = args;
-    }
-    var curveX = cubicBezier(x1, x2);
-    var curveY = cubicBezier(y1, y2);
-    var derCurveX = derivativeCubicBezier(x1, x2);
-    var rangeValue = (value)=>{
-        if (value > 1) {
-            return 1;
-        }
-        if (value < 0) {
-            return 0;
-        }
-        return value;
-    };
-    var bezier = (_t)=>{
-        var t = _t > 1 ? 1 : _t;
-        var x = t;
-        for(var i = 0; i < 8; ++i){
-            var evalT = curveX(x) - t;
-            var derVal = derCurveX(x);
-            if (Math.abs(evalT - t) < ACCURACY || derVal < ACCURACY) {
-                return curveY(x);
-            }
-            x = rangeValue(x - evalT / derVal);
-        }
-        return curveY(x);
-    };
-    bezier.isStepper = false;
-    return bezier;
-};
-var configSpring = function configSpring() {
-    var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var { stiff = 100, damping = 8, dt = 17 } = config;
-    var stepper = (currX, destX, currV)=>{
-        var FSpring = -(currX - destX) * stiff;
-        var FDamping = currV * damping;
-        var newV = currV + (FSpring - FDamping) * dt / 1000;
-        var newX = currV * dt / 1000 + currX;
-        if (Math.abs(newX - destX) < ACCURACY && Math.abs(newV) < ACCURACY) {
-            return [
-                destX,
-                0
-            ];
-        }
-        return [
-            newX,
-            newV
-        ];
-    };
-    stepper.isStepper = true;
-    stepper.dt = dt;
-    return stepper;
-};
-var configEasing = (easing)=>{
-    if (typeof easing === 'string') {
-        switch(easing){
-            case 'ease':
-            case 'ease-in-out':
-            case 'ease-out':
-            case 'ease-in':
-            case 'linear':
-                return configBezier(easing);
-            case 'spring':
-                return configSpring();
-            default:
-                if (easing.split('(')[0] === 'cubic-bezier') {
-                    return configBezier(easing);
-                }
-        }
-    }
-    if (typeof easing === 'function') {
-        return easing;
-    }
-    return null;
-};
+function noop() {}
 
 function ownKeys$9(e, r) {
     var t = Object.keys(e);
@@ -7455,21 +7064,174 @@ function createTimingUpdate(from, to, easing, duration, interKeys, render, timeo
             render(_objectSpread$8(_objectSpread$8(_objectSpread$8({}, from), to), finalStyle));
         }
     };
-    // return start animation method
-    return ()=>{
-        stopAnimation = timeoutController.setTimeout(timingUpdate);
-        // return stop animation method
-        return ()=>{
-            stopAnimation();
-        };
+    // return start animation method
+    return ()=>{
+        stopAnimation = timeoutController.setTimeout(timingUpdate);
+        // return stop animation method
+        return ()=>{
+            stopAnimation();
+        };
+    };
+}
+// configure update function
+// eslint-disable-next-line import/no-default-export
+var configUpdate = ((from, to, easing, duration, render, timeoutController)=>{
+    var interKeys = getIntersectionKeys(from, to);
+    return easing.isStepper === true ? createStepperUpdate(from, to, easing, interKeys, render, timeoutController) : createTimingUpdate(from, to, easing, duration, interKeys, render, timeoutController);
+});
+
+var ACCURACY = 1e-4;
+var cubicBezierFactor = (c1, c2)=>[
+        0,
+        3 * c1,
+        3 * c2 - 6 * c1,
+        3 * c1 - 3 * c2 + 1
+    ];
+var evaluatePolynomial = (params, t)=>params.map((param, i)=>param * t ** i).reduce((pre, curr)=>pre + curr);
+var cubicBezier = (c1, c2)=>(t)=>{
+        var params = cubicBezierFactor(c1, c2);
+        return evaluatePolynomial(params, t);
+    };
+var derivativeCubicBezier = (c1, c2)=>(t)=>{
+        var params = cubicBezierFactor(c1, c2);
+        var newParams = [
+            ...params.map((param, i)=>param * i).slice(1),
+            0
+        ];
+        return evaluatePolynomial(newParams, t);
+    };
+// calculate cubic-bezier using Newton's method
+var configBezier = function configBezier() {
+    var x1, x2, y1, y2;
+    for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+        args[_key] = arguments[_key];
+    }
+    if (args.length === 1) {
+        switch(args[0]){
+            case 'linear':
+                [x1, y1, x2, y2] = [
+                    0.0,
+                    0.0,
+                    1.0,
+                    1.0
+                ];
+                break;
+            case 'ease':
+                [x1, y1, x2, y2] = [
+                    0.25,
+                    0.1,
+                    0.25,
+                    1.0
+                ];
+                break;
+            case 'ease-in':
+                [x1, y1, x2, y2] = [
+                    0.42,
+                    0.0,
+                    1.0,
+                    1.0
+                ];
+                break;
+            case 'ease-out':
+                [x1, y1, x2, y2] = [
+                    0.42,
+                    0.0,
+                    0.58,
+                    1.0
+                ];
+                break;
+            case 'ease-in-out':
+                [x1, y1, x2, y2] = [
+                    0.0,
+                    0.0,
+                    0.58,
+                    1.0
+                ];
+                break;
+            default:
+                {
+                    var easing = args[0].split('(');
+                    if (easing[0] === 'cubic-bezier' && easing[1].split(')')[0].split(',').length === 4) {
+                        [x1, y1, x2, y2] = easing[1].split(')')[0].split(',').map((x)=>parseFloat(x));
+                    }
+                }
+        }
+    } else if (args.length === 4) {
+        [x1, y1, x2, y2] = args;
+    }
+    var curveX = cubicBezier(x1, x2);
+    var curveY = cubicBezier(y1, y2);
+    var derCurveX = derivativeCubicBezier(x1, x2);
+    var rangeValue = (value)=>{
+        if (value > 1) {
+            return 1;
+        }
+        if (value < 0) {
+            return 0;
+        }
+        return value;
+    };
+    var bezier = (_t)=>{
+        var t = _t > 1 ? 1 : _t;
+        var x = t;
+        for(var i = 0; i < 8; ++i){
+            var evalT = curveX(x) - t;
+            var derVal = derCurveX(x);
+            if (Math.abs(evalT - t) < ACCURACY || derVal < ACCURACY) {
+                return curveY(x);
+            }
+            x = rangeValue(x - evalT / derVal);
+        }
+        return curveY(x);
+    };
+    bezier.isStepper = false;
+    return bezier;
+};
+var configSpring = function configSpring() {
+    var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var { stiff = 100, damping = 8, dt = 17 } = config;
+    var stepper = (currX, destX, currV)=>{
+        var FSpring = -(currX - destX) * stiff;
+        var FDamping = currV * damping;
+        var newV = currV + (FSpring - FDamping) * dt / 1000;
+        var newX = currV * dt / 1000 + currX;
+        if (Math.abs(newX - destX) < ACCURACY && Math.abs(newV) < ACCURACY) {
+            return [
+                destX,
+                0
+            ];
+        }
+        return [
+            newX,
+            newV
+        ];
     };
-}
-// configure update function
-// eslint-disable-next-line import/no-default-export
-var configUpdate = ((from, to, easing, duration, render, timeoutController)=>{
-    var interKeys = getIntersectionKeys(from, to);
-    return easing.isStepper === true ? createStepperUpdate(from, to, easing, interKeys, render, timeoutController) : createTimingUpdate(from, to, easing, duration, interKeys, render, timeoutController);
-});
+    stepper.isStepper = true;
+    stepper.dt = dt;
+    return stepper;
+};
+var configEasing = (easing)=>{
+    if (typeof easing === 'string') {
+        switch(easing){
+            case 'ease':
+            case 'ease-in-out':
+            case 'ease-out':
+            case 'ease-in':
+            case 'linear':
+                return configBezier(easing);
+            case 'spring':
+                return configSpring();
+            default:
+                if (easing.split('(')[0] === 'cubic-bezier') {
+                    return configBezier(easing);
+                }
+        }
+    }
+    if (typeof easing === 'function') {
+        return easing;
+    }
+    return null;
+};
 
 /**
  * Represents a single item in the ReactSmoothQueue.
@@ -7576,48 +7338,93 @@ function useAnimationManager(animationId, animationManagerFromProps) {
     ]);
 }
 
-var _excluded = [
-    "children",
-    "begin",
-    "duration",
-    "attributeName",
-    "easing",
-    "isActive",
-    "from",
-    "to",
-    "canBegin",
-    "onAnimationEnd",
-    "shouldReAnimate",
-    "onAnimationReStart",
-    "animationManager"
-];
-function _extends$3() {
-    return _extends$3 = Object.assign ? Object.assign.bind() : function(n) {
-        for(var e = 1; e < arguments.length; e++){
-            var t = arguments[e];
-            for(var r in t)({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+var defaultJavascriptAnimateProps = {
+    begin: 0,
+    duration: 1000,
+    easing: 'ease',
+    isActive: true,
+    canBegin: true,
+    onAnimationEnd: ()=>{},
+    onAnimationStart: ()=>{}
+};
+var from = {
+    t: 0
+};
+var to = {
+    t: 1
+};
+function JavascriptAnimate(outsideProps) {
+    var props = resolveDefaultProps(outsideProps, defaultJavascriptAnimateProps);
+    var { isActive, canBegin, duration, easing, begin, onAnimationEnd, onAnimationStart, children } = props;
+    var animationManager = useAnimationManager(props.animationId, props.animationManager);
+    var [style, setStyle] = useState(isActive ? from : to);
+    var stopJSAnimation = useRef(null);
+    useEffect(()=>{
+        if (!isActive) {
+            setStyle(to);
         }
-        return n;
-    }, _extends$3.apply(null, arguments);
-}
-function _objectWithoutProperties(e, t) {
-    if (null == e) return {};
-    var o, r, i = _objectWithoutPropertiesLoose(e, t);
-    if (Object.getOwnPropertySymbols) {
-        var n = Object.getOwnPropertySymbols(e);
-        for(r = 0; r < n.length; r++)o = n[r], -1 === t.indexOf(o) && ({}).propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
-    }
-    return i;
+    }, [
+        isActive
+    ]);
+    useEffect(()=>{
+        if (!isActive || !canBegin) {
+            return noop;
+        }
+        var startAnimation = configUpdate(from, to, configEasing(easing), duration, setStyle, animationManager.getTimeoutController());
+        var onAnimationActive = ()=>{
+            stopJSAnimation.current = startAnimation();
+        };
+        animationManager.start([
+            onAnimationStart,
+            begin,
+            onAnimationActive,
+            duration,
+            onAnimationEnd
+        ]);
+        return ()=>{
+            animationManager.stop();
+            if (stopJSAnimation.current) {
+                stopJSAnimation.current();
+            }
+            onAnimationEnd();
+        };
+    }, [
+        isActive,
+        canBegin,
+        duration,
+        easing,
+        begin,
+        onAnimationStart,
+        onAnimationEnd,
+        animationManager
+    ]);
+    return children(style.t);
 }
-function _objectWithoutPropertiesLoose(r, e) {
-    if (null == r) return {};
-    var t = {};
-    for(var n in r)if (({}).hasOwnProperty.call(r, n)) {
-        if (-1 !== e.indexOf(n)) continue;
-        t[n] = r[n];
+
+/**
+ * This hook returns a unique animation id for the object input.
+ * If input changes (as in, reference equality is different), the animation id will change.
+ * If input does not change, the animation id will not change.
+ *
+ * This is useful for animations. The Animate component
+ * does have a `shouldReAnimate` prop but that doesn't seem to be doing what the name implies.
+ * Also, we don't always want to re-animate on every render;
+ * we only want to re-animate when the input changes. Not the internal state (e.g. `isAnimating`).
+ *
+ * @param input The object to check for changes. Uses reference equality (=== operator)
+ * @param prefix Optional prefix to use for the animation id
+ * @returns A unique animation id
+ */ function useAnimationId(input) {
+    var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'animation-';
+    var animationId = useRef(uniqueId(prefix));
+    var prevProps = useRef(input);
+    if (prevProps.current !== input) {
+        animationId.current = uniqueId(prefix);
+        prevProps.current = input;
     }
-    return t;
+    return animationId.current;
 }
+
 function ownKeys$7(e, r) {
     var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
@@ -7661,202 +7468,6 @@ function _toPrimitive$7(t, r) {
     }
     return ("string" === r ? String : Number)(t);
 }
-class AnimateImpl extends PureComponent {
-    componentDidMount() {
-        var { isActive, canBegin } = this.props;
-        this.mounted = true;
-        if (!isActive || !canBegin) {
-            return;
-        }
-        this.runAnimation(this.props);
-    }
-    componentDidUpdate(prevProps) {
-        var { isActive, canBegin, attributeName, shouldReAnimate, to, from: currentFrom } = this.props;
-        var { style } = this.state;
-        if (!canBegin) {
-            return;
-        }
-        if (!isActive) {
-            var newState = {
-                style: attributeName ? {
-                    [attributeName]: to
-                } : to
-            };
-            if (this.state && style) {
-                if (attributeName && style[attributeName] !== to || !attributeName && style !== to) {
-                    this.setState(newState);
-                }
-            }
-            return;
-        }
-        if (isEqual(prevProps.to, to) && prevProps.canBegin && prevProps.isActive) {
-            return;
-        }
-        var isTriggered = !prevProps.canBegin || !prevProps.isActive;
-        this.manager.stop();
-        if (this.stopJSAnimation) {
-            this.stopJSAnimation();
-        }
-        var from = isTriggered || shouldReAnimate ? currentFrom : prevProps.to;
-        if (this.state && style) {
-            var _newState = {
-                style: attributeName ? {
-                    [attributeName]: from
-                } : from
-            };
-            if (attributeName && style[attributeName] !== from || !attributeName && style !== from) {
-                this.setState(_newState);
-            }
-        }
-        this.runAnimation(_objectSpread$7(_objectSpread$7({}, this.props), {}, {
-            from,
-            begin: 0
-        }));
-    }
-    componentWillUnmount() {
-        this.mounted = false;
-        var { onAnimationEnd } = this.props;
-        if (this.unSubscribe) {
-            this.unSubscribe();
-        }
-        this.manager.stop();
-        if (this.stopJSAnimation) {
-            this.stopJSAnimation();
-        }
-        if (onAnimationEnd) {
-            onAnimationEnd();
-        }
-    }
-    handleStyleChange(style) {
-        this.changeStyle(style);
-    }
-    changeStyle(style) {
-        if (this.mounted) {
-            this.setState({
-                style
-            });
-        }
-    }
-    runJSAnimation(props) {
-        var { from, to, duration, easing, begin, onAnimationEnd, onAnimationStart } = props;
-        var startAnimation = configUpdate(from, to, configEasing(easing), duration, this.changeStyle, this.manager.getTimeoutController());
-        var finalStartAnimation = ()=>{
-            this.stopJSAnimation = startAnimation();
-        };
-        this.manager.start([
-            onAnimationStart,
-            begin,
-            finalStartAnimation,
-            duration,
-            onAnimationEnd
-        ]);
-    }
-    runAnimation(props) {
-        var { begin, duration, attributeName, to: propsTo, easing, onAnimationStart, onAnimationEnd, children } = props;
-        this.unSubscribe = this.manager.subscribe(this.handleStyleChange);
-        if (typeof easing === 'function' || typeof children === 'function' || easing === 'spring') {
-            this.runJSAnimation(props);
-            return;
-        }
-        var to = attributeName ? {
-            [attributeName]: propsTo
-        } : propsTo;
-        var transition = getTransitionVal(Object.keys(to), duration, easing);
-        this.manager.start([
-            onAnimationStart,
-            begin,
-            _objectSpread$7(_objectSpread$7({}, to), {}, {
-                transition
-            }),
-            duration,
-            onAnimationEnd
-        ]);
-    }
-    render() {
-        var _this$props = this.props, { children, begin, duration, attributeName, easing, isActive, from, to, canBegin, onAnimationEnd, shouldReAnimate, onAnimationReStart, animationManager } = _this$props, others = _objectWithoutProperties(_this$props, _excluded);
-        var count = Children.count(children);
-        var stateStyle = this.state.style;
-        if (typeof children === 'function') {
-            return children(stateStyle);
-        }
-        if (!isActive || count === 0 || duration <= 0) {
-            return children;
-        }
-        var cloneContainer = (container)=>{
-            var { style = {}, className } = container.props;
-            var res = /*#__PURE__*/ cloneElement(container, _objectSpread$7(_objectSpread$7({}, others), {}, {
-                style: _objectSpread$7(_objectSpread$7({}, style), stateStyle),
-                className
-            }));
-            return res;
-        };
-        if (count === 1) {
-            // @ts-expect-error TODO - fix the type error
-            return cloneContainer(Children.only(children));
-        }
-        // @ts-expect-error TODO - fix the type error
-        return /*#__PURE__*/ React.createElement("div", null, Children.map(children, (child)=>cloneContainer(child)));
-    }
-    constructor(props, context){
-        super(props, context);
-        _defineProperty$7(this, "mounted", false);
-        _defineProperty$7(this, "manager", undefined);
-        _defineProperty$7(this, "stopJSAnimation", null);
-        _defineProperty$7(this, "unSubscribe", null);
-        var { isActive, attributeName, from, to, children, duration, animationManager } = this.props;
-        this.manager = animationManager;
-        this.handleStyleChange = this.handleStyleChange.bind(this);
-        this.changeStyle = this.changeStyle.bind(this);
-        if (!isActive || duration <= 0) {
-            this.state = {
-                style: {}
-            };
-            // if children is a function and animation is not active, set style to 'to'
-            if (typeof children === 'function') {
-                this.state = {
-                    style: to
-                };
-            }
-            return;
-        }
-        if (from) {
-            if (typeof children === 'function') {
-                this.state = {
-                    style: from
-                };
-                return;
-            }
-            this.state = {
-                style: attributeName ? {
-                    [attributeName]: from
-                } : from
-            };
-        } else {
-            this.state = {
-                style: {}
-            };
-        }
-    }
-}
-_defineProperty$7(AnimateImpl, "displayName", 'Animate');
-_defineProperty$7(AnimateImpl, "defaultProps", {
-    begin: 0,
-    duration: 1000,
-    attributeName: '',
-    easing: 'ease',
-    isActive: true,
-    canBegin: true,
-    onAnimationEnd: ()=>{},
-    onAnimationStart: ()=>{}
-});
-function Animate(props) {
-    var _props$attributeName;
-    var animationManager = useAnimationManager((_props$attributeName = props.attributeName) !== null && _props$attributeName !== void 0 ? _props$attributeName : Object.keys(props.to).join(','), props.animationManager);
-    return /*#__PURE__*/ React.createElement(AnimateImpl, _extends$3({}, props, {
-        animationManager: animationManager
-    }));
-}
-
 function _extends$2() {
     return _extends$2 = Object.assign ? Object.assign.bind() : function(n) {
         for(var e = 1; e < arguments.length; e++){
@@ -7940,6 +7551,24 @@ var Rectangle = (rectangleProps)=>{
     }, []);
     var { x, y, width, height, radius, className } = props;
     var { animationEasing, animationDuration, animationBegin, isAnimationActive, isUpdateAnimationActive } = props;
+    var prevWidthRef = useRef(width);
+    var prevHeightRef = useRef(height);
+    var prevXRef = useRef(x);
+    var prevYRef = useRef(y);
+    var animationIdInput = useMemo(()=>({
+            x,
+            y,
+            width,
+            height,
+            radius
+        }), [
+        x,
+        y,
+        width,
+        height,
+        radius
+    ]);
+    var animationId = useAnimationId(animationIdInput, 'rectangle-');
     if (x !== +x || y !== +y || width !== +width || height !== +height || width === 0 || height === 0) {
         return null;
     }
@@ -7950,39 +7579,55 @@ var Rectangle = (rectangleProps)=>{
             d: getRectanglePath(x, y, width, height, radius)
         }));
     }
-    return /*#__PURE__*/ React.createElement(Animate, {
+    var prevWidth = prevWidthRef.current;
+    var prevHeight = prevHeightRef.current;
+    var prevX = prevXRef.current;
+    var prevY = prevYRef.current;
+    var from = "0px ".concat(totalLength === -1 ? 1 : totalLength, "px");
+    var to = "".concat(totalLength, "px 0px");
+    var transition = getTransitionVal([
+        'strokeDasharray'
+    ], animationDuration, typeof animationEasing === 'string' ? animationEasing : undefined);
+    return /*#__PURE__*/ React.createElement(JavascriptAnimate, {
+        animationId: animationId,
+        key: animationId,
         canBegin: totalLength > 0,
-        from: {
-            width,
-            height,
-            x,
-            y
-        },
-        to: {
-            width,
-            height,
-            x,
-            y
-        },
         duration: animationDuration,
-        animationEasing: animationEasing,
-        isActive: isUpdateAnimationActive
-    }, (_ref)=>{
-        var { width: currWidth, height: currHeight, x: currX, y: currY } = _ref;
-        return /*#__PURE__*/ React.createElement(Animate, {
-            canBegin: totalLength > 0,
-            from: "0px ".concat(totalLength === -1 ? 1 : totalLength, "px"),
-            to: "".concat(totalLength, "px 0px"),
-            attributeName: "strokeDasharray",
-            begin: animationBegin,
-            duration: animationDuration,
-            isActive: isAnimationActive,
-            easing: animationEasing
-        }, /*#__PURE__*/ React.createElement("path", _extends$2({}, filterProps(props, true), {
+        easing: animationEasing,
+        isActive: isUpdateAnimationActive,
+        begin: animationBegin
+    }, (t)=>{
+        var currWidth = interpolate$1(prevWidth, width, t);
+        var currHeight = interpolate$1(prevHeight, height, t);
+        var currX = interpolate$1(prevX, x, t);
+        var currY = interpolate$1(prevY, y, t);
+        if (pathRef.current) {
+            prevWidthRef.current = currWidth;
+            prevHeightRef.current = currHeight;
+            prevXRef.current = currX;
+            prevYRef.current = currY;
+        }
+        var animationStyle;
+        if (!isAnimationActive) {
+            animationStyle = {
+                strokeDasharray: to
+            };
+        } else if (t > 0) {
+            animationStyle = {
+                transition,
+                strokeDasharray: to
+            };
+        } else {
+            animationStyle = {
+                strokeDasharray: from
+            };
+        }
+        return /*#__PURE__*/ React.createElement("path", _extends$2({}, filterProps(props, true), {
             className: layerClass,
             d: getRectanglePath(currX, currY, currWidth, currHeight, radius),
-            ref: pathRef
-        })));
+            ref: pathRef,
+            style: _objectSpread$7(_objectSpread$7({}, animationStyle), props.style)
+        }));
     });
 };
 
@@ -13605,7 +13250,7 @@ createSelector([
         outerRadius,
         startAngle,
         endAngle,
-        clockWise: false
+        clockWise: false // this property look useful, why not use it?
     };
 });
 
@@ -13642,6 +13287,9 @@ var selectTooltipAxis = (state)=>{
     var axisId = selectTooltipAxisId(state);
     return selectAxisSettings(state, axisType, axisId);
 };
+var selectTooltipAxisDataKey = createSelector([
+    selectTooltipAxis
+], (axis)=>axis === null || axis === void 0 ? void 0 : axis.dataKey);
 
 /**
  * In a stacked chart, each graphical item has its own data. That data could be either:
@@ -13654,7 +13302,7 @@ var selectTooltipAxis = (state)=>{
  * and the value is the numeric value for that series using the numerical axis dataKey.
  */ function combineDisplayedStackedData(stackedGraphicalItems, _ref, tooltipAxisSettings) {
     var { chartData = [] } = _ref;
-    var tooltipDataKey = tooltipAxisSettings === null || tooltipAxisSettings === void 0 ? void 0 : tooltipAxisSettings.dataKey;
+    var { allowDuplicatedCategory, dataKey: tooltipDataKey } = tooltipAxisSettings;
     // A map of tooltip data keys to the stacked data points
     var knownItemsByDataKey = new Map();
     stackedGraphicalItems.forEach((item)=>{
@@ -13667,7 +13315,7 @@ var selectTooltipAxis = (state)=>{
         }
         var stackIdentifier = getStackSeriesIdentifier(item);
         resolvedData.forEach((entry, index)=>{
-            var tooltipValue = tooltipDataKey == null ? index : String(getValueByDataKey(entry, tooltipDataKey, null));
+            var tooltipValue = tooltipDataKey == null || allowDuplicatedCategory ? index : String(getValueByDataKey(entry, tooltipDataKey, null));
             var numericValue = getValueByDataKey(entry, item.dataKey, 0);
             var curr;
             if (knownItemsByDataKey.has(tooltipValue)) {
@@ -13780,8 +13428,11 @@ var defaultNumericDomain = [
     type: 'category',
     unit: undefined
 };
+var selectXAxisSettingsNoDefaults = (state, axisId)=>{
+    return state.cartesianAxis.xAxis[axisId];
+};
 var selectXAxisSettings = (state, axisId)=>{
-    var axis = state.cartesianAxis.xAxis[axisId];
+    var axis = selectXAxisSettingsNoDefaults(state, axisId);
     if (axis == null) {
         return implicitXAxis;
     }
@@ -13820,8 +13471,11 @@ var selectXAxisSettings = (state, axisId)=>{
     unit: undefined,
     width: DEFAULT_Y_AXIS_WIDTH
 };
+var selectYAxisSettingsNoDefaults = (state, axisId)=>{
+    return state.cartesianAxis.yAxis[axisId];
+};
 var selectYAxisSettings = (state, axisId)=>{
-    var axis = state.cartesianAxis.yAxis[axisId];
+    var axis = selectYAxisSettingsNoDefaults(state, axisId);
     if (axis == null) {
         return implicitYAxis;
     }
@@ -14707,7 +14361,7 @@ var combineYAxisPositionStartingPoint = (offset, orientation, chartWidth)=>{
             return 0;
     }
 };
-createSelector(selectChartHeight, selectChartOffsetInternal, selectAllXAxesWithOffsetType, pickAxisOrientation, pickMirror, (chartHeight, offset, allAxesWithSameOffsetType, orientation, mirror)=>{
+var selectAllXAxesOffsetSteps = createSelector(selectChartHeight, selectChartOffsetInternal, selectAllXAxesWithOffsetType, pickAxisOrientation, pickMirror, (chartHeight, offset, allAxesWithSameOffsetType, orientation, mirror)=>{
     var steps = {};
     var position;
     allAxesWithSameOffsetType.forEach((axis)=>{
@@ -14721,7 +14375,7 @@ createSelector(selectChartHeight, selectChartOffsetInternal, selectAllXAxesWithO
     });
     return steps;
 });
-createSelector(selectChartWidth, selectChartOffsetInternal, selectAllYAxesWithOffsetType, pickAxisOrientation, pickMirror, (chartWidth, offset, allAxesWithSameOffsetType, orientation, mirror)=>{
+var selectAllYAxesOffsetSteps = createSelector(selectChartWidth, selectChartOffsetInternal, selectAllYAxesWithOffsetType, pickAxisOrientation, pickMirror, (chartWidth, offset, allAxesWithSameOffsetType, orientation, mirror)=>{
     var steps = {};
     var position;
     allAxesWithSameOffsetType.forEach((axis)=>{
@@ -14735,6 +14389,62 @@ createSelector(selectChartWidth, selectChartOffsetInternal, selectAllYAxesWithOf
     });
     return steps;
 });
+var selectXAxisOffsetSteps = (state, axisId)=>{
+    var axisSettings = selectXAxisSettings(state, axisId);
+    if (axisSettings == null) {
+        return undefined;
+    }
+    return selectAllXAxesOffsetSteps(state, axisSettings.orientation, axisSettings.mirror);
+};
+createSelector([
+    selectChartOffsetInternal,
+    selectXAxisSettings,
+    selectXAxisOffsetSteps,
+    (_, axisId)=>axisId
+], (offset, axisSettings, allSteps, axisId)=>{
+    if (axisSettings == null) {
+        return undefined;
+    }
+    var stepOfThisAxis = allSteps === null || allSteps === void 0 ? void 0 : allSteps[axisId];
+    if (stepOfThisAxis == null) {
+        return {
+            x: offset.left,
+            y: 0
+        };
+    }
+    return {
+        x: offset.left,
+        y: stepOfThisAxis
+    };
+});
+var selectYAxisOffsetSteps = (state, axisId)=>{
+    var axisSettings = selectYAxisSettings(state, axisId);
+    if (axisSettings == null) {
+        return undefined;
+    }
+    return selectAllYAxesOffsetSteps(state, axisSettings.orientation, axisSettings.mirror);
+};
+createSelector([
+    selectChartOffsetInternal,
+    selectYAxisSettings,
+    selectYAxisOffsetSteps,
+    (_, axisId)=>axisId
+], (offset, axisSettings, allSteps, axisId)=>{
+    if (axisSettings == null) {
+        return undefined;
+    }
+    var stepOfThisAxis = allSteps === null || allSteps === void 0 ? void 0 : allSteps[axisId];
+    if (stepOfThisAxis == null) {
+        return {
+            x: 0,
+            y: offset.top
+        };
+    }
+    return {
+        x: stepOfThisAxis,
+        y: offset.top
+    };
+});
 createSelector(selectChartOffsetInternal, selectYAxisSettings, (offset, axisSettings)=>{
     var width = typeof axisSettings.width === 'number' ? axisSettings.width : DEFAULT_Y_AXIS_WIDTH;
     return {
@@ -15392,7 +15102,7 @@ function selectFinalData(dataDefinedOnItem, dataDefinedOnChart) {
     }
     return dataDefinedOnChart;
 }
-var combineTooltipPayload = (tooltipPayloadConfigurations, activeIndex, chartDataState, tooltipAxis, activeLabel, tooltipPayloadSearcher, tooltipEventType)=>{
+var combineTooltipPayload = (tooltipPayloadConfigurations, activeIndex, chartDataState, tooltipAxisDataKey, activeLabel, tooltipPayloadSearcher, tooltipEventType)=>{
     if (activeIndex == null || tooltipPayloadSearcher == null) {
         return undefined;
     }
@@ -15403,11 +15113,11 @@ var combineTooltipPayload = (tooltipPayloadConfigurations, activeIndex, chartDat
         var { dataDefinedOnItem, settings } = _ref;
         var finalData = selectFinalData(dataDefinedOnItem, chartData);
         var sliced = Array.isArray(finalData) ? getSliced(finalData, dataStartIndex, dataEndIndex) : finalData;
-        var finalDataKey = (_settings$dataKey = settings === null || settings === void 0 ? void 0 : settings.dataKey) !== null && _settings$dataKey !== void 0 ? _settings$dataKey : tooltipAxis === null || tooltipAxis === void 0 ? void 0 : tooltipAxis.dataKey;
+        var finalDataKey = (_settings$dataKey = settings === null || settings === void 0 ? void 0 : settings.dataKey) !== null && _settings$dataKey !== void 0 ? _settings$dataKey : tooltipAxisDataKey;
         // BaseAxisProps does not support nameKey but it could!
         var finalNameKey = settings === null || settings === void 0 ? void 0 : settings.nameKey; // ?? tooltipAxis?.nameKey;
         var tooltipPayload;
-        if (tooltipAxis !== null && tooltipAxis !== void 0 && tooltipAxis.dataKey && Array.isArray(sliced) && /*
+        if (tooltipAxisDataKey && Array.isArray(sliced) && /*
      * findEntryInArray won't work for Scatter because Scatter provides an array of arrays
      * as tooltip payloads and findEntryInArray is not prepared to handle that.
      * Sad but also ScatterChart only allows 'item' tooltipEventType
@@ -15427,7 +15137,7 @@ var combineTooltipPayload = (tooltipPayloadConfigurations, activeIndex, chartDat
      * because we get the index from interacting over the individual elements
      * which is always accurate, irrespective of the allowDuplicatedCategory setting.
      */ tooltipEventType === 'axis') {
-            tooltipPayload = findEntryInArray(sliced, tooltipAxis.dataKey, activeLabel);
+            tooltipPayload = findEntryInArray(sliced, tooltipAxisDataKey, activeLabel);
         } else {
             /*
        * This is a problem because it assumes that the index is pointing to the displayed data
@@ -15735,7 +15445,7 @@ var selectActiveTooltipPayload = createSelector([
     selectTooltipPayloadConfigurations$1,
     selectActiveTooltipIndex,
     selectChartDataWithIndexes,
-    selectTooltipAxis,
+    selectTooltipAxisDataKey,
     selectActiveLabel$1,
     selectTooltipPayloadSearcher,
     selectTooltipEventType
@@ -15864,7 +15574,7 @@ var selectTooltipPayload = createSelector([
     selectTooltipPayloadConfigurations,
     selectActiveIndex,
     selectChartDataWithIndexes,
-    selectTooltipAxis,
+    selectTooltipAxisDataKey,
     selectActiveLabel,
     selectTooltipPayloadSearcher,
     pickTooltipEventType