@aivenio/aquarium 1.49.1 → 1.51.0

package/dist/_variables.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 12 Dec 2023 12:44:51 GMT
+// Generated on Thu, 11 Jan 2024 15:05:37 GMT
 
 $border-radius-none: 0px !default;
 $border-radius-sm: 0.125rem !default;

package/dist/atoms.cjs

@@ -2652,7 +2652,7 @@ var require_more = __commonJS({
   "src/icons/more.js"(exports) {
     "use strict";
     var data = {
-      "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11 11.917a.917.917 0 100-1.834.917.917 0 000 1.834Zm6.417 0a.917.917 0 100-1.834.917.917 0 000 1.834Zm-12.834 0a.917.917 0 100-1.834.917.917 0 000 1.834Z"/>',
+      "body": '<g fill="none"><path fill="currentColor" d="M11 12a1 1 0 100-2 1 1 0 000 2Zm8 0a1 1 0 100-2 1 1 0 000 2ZM3 12a1 1 0 100-2 1 1 0 000 2Z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M11 12a1 1 0 100-2 1 1 0 000 2Zm8 0a1 1 0 100-2 1 1 0 000 2ZM3 12a1 1 0 100-2 1 1 0 000 2Z"/></g>',
       "left": 0,
       "top": 0,
       "width": 22,
@@ -7351,10 +7351,23 @@ var Link = (_a) => {
 // src/atoms/Modal/Modal.tsx
 var import_react32 = __toESM(require("react"));
 var Modal = (_a) => {
-  var _b = _a, { children, className, open } = _b, rest = __objRest(_b, ["children", "className", "open"]);
+  var _b = _a, {
+    children,
+    kind = "dialog",
+    className,
+    open
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "kind",
+    "className",
+    "open"
+  ]);
   return open ? /* @__PURE__ */ import_react32.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
-      tw("inset-0 overflow-y-auto z-modal flex justify-center items-center fixed py-7"),
+      tw("inset-0 overflow-y-auto z-modal fixed"),
+      {
+        "py-7 justify-center flex items-center": kind === "dialog"
+      },
       className
     )
   }), children) : null;
@@ -7367,27 +7380,30 @@ Modal.BackDrop = (_a) => {
 };
 Modal.Dialog = import_react32.default.forwardRef(
   (_a, ref) => {
-    var _b = _a, { children, className, size = "sm" } = _b, rest = __objRest(_b, ["children", "className", "size"]);
+    var _b = _a, { kind = "dialog", children, className, size = "sm" } = _b, rest = __objRest(_b, ["kind", "children", "className", "size"]);
+    const commonClasses = tw("bg-white max-h-full flex flex-col");
+    const dialogClasses = classNames("relative w-full rounded", {
+      "max-w-[600px]": size === "sm",
+      "max-w-[940px]": size === "md",
+      "min-h-full": size === "full"
+    });
+    const drawerClasses = classNames("absolute h-full", {
+      "w-[360px]": size === "sm",
+      "w-[560px]": size === "md",
+      "w-[1080px]": size === "full"
+    });
     return /* @__PURE__ */ import_react32.default.createElement("div", __spreadProps(__spreadValues({
       ref,
       "aria-modal": "true"
     }, rest), {
-      className: classNames(
-        tw("relative bg-white rounded mx-7 w-full max-h-full flex flex-col"),
-        {
-          "max-w-[600px]": size === "sm",
-          "max-w-[940px]": size === "md",
-          "min-h-full": size === "full"
-        },
-        className
-      )
+      className: classNames(commonClasses, kind === "dialog" ? dialogClasses : drawerClasses, className)
     }), children);
   }
 );
 Modal.Header = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
   return /* @__PURE__ */ import_react32.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(tw("px-7 py-6 gap-3 flex items-center"), className)
+    className: classNames(tw("pl-7 pr-[64px] py-6 gap-3 flex items-center"), className)
   }), children);
 };
 Modal.HeaderImage = (_a) => {
@@ -7405,16 +7421,21 @@ Modal.HeaderImage = (_a) => {
 Modal.CloseButtonContainer = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
   return /* @__PURE__ */ import_react32.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(tw("absolute top-[20px] right-[28px]"), className)
+    className: classNames(tw("absolute top-[24px] right-[28px]"), className)
   }));
 };
 Modal.Title = (_a) => {
-  var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+  var _b = _a, { kind = "dialog", children, className } = _b, rest = __objRest(_b, ["kind", "children", "className"]);
   return /* @__PURE__ */ import_react32.default.createElement(Typography, __spreadValues({
     htmlTag: "h2",
     variant: "subheading",
     color: "grey-90",
-    className: classNames(tw("leading-none"), className)
+    className: classNames(
+      tw({
+        "text-ellipsis overflow-x-hidden whitespace-nowrap": kind === "drawer"
+      }),
+      className
+    )
   }, rest), children);
 };
 Modal.Subtitle = (_a) => {
@@ -7427,7 +7448,7 @@ Modal.Subtitle = (_a) => {
 Modal.TitleContainer = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
   return /* @__PURE__ */ import_react32.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(tw("flex flex-col grow gap-2"), className)
+    className: classNames(tw("flex flex-col grow"), className)
   }), children);
 };
 Modal.Body = (_a) => {

package/dist/atoms.mjs

@@ -2646,7 +2646,7 @@ var require_more = __commonJS({
   "src/icons/more.js"(exports) {
     "use strict";
     var data = {
-      "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11 11.917a.917.917 0 100-1.834.917.917 0 000 1.834Zm6.417 0a.917.917 0 100-1.834.917.917 0 000 1.834Zm-12.834 0a.917.917 0 100-1.834.917.917 0 000 1.834Z"/>',
+      "body": '<g fill="none"><path fill="currentColor" d="M11 12a1 1 0 100-2 1 1 0 000 2Zm8 0a1 1 0 100-2 1 1 0 000 2ZM3 12a1 1 0 100-2 1 1 0 000 2Z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M11 12a1 1 0 100-2 1 1 0 000 2Zm8 0a1 1 0 100-2 1 1 0 000 2ZM3 12a1 1 0 100-2 1 1 0 000 2Z"/></g>',
       "left": 0,
       "top": 0,
       "width": 22,
@@ -7311,10 +7311,23 @@ var Link = (_a) => {
 // src/atoms/Modal/Modal.tsx
 import React28 from "react";
 var Modal = (_a) => {
-  var _b = _a, { children, className, open } = _b, rest = __objRest(_b, ["children", "className", "open"]);
+  var _b = _a, {
+    children,
+    kind = "dialog",
+    className,
+    open
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "kind",
+    "className",
+    "open"
+  ]);
   return open ? /* @__PURE__ */ React28.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
-      tw("inset-0 overflow-y-auto z-modal flex justify-center items-center fixed py-7"),
+      tw("inset-0 overflow-y-auto z-modal fixed"),
+      {
+        "py-7 justify-center flex items-center": kind === "dialog"
+      },
       className
     )
   }), children) : null;
@@ -7327,27 +7340,30 @@ Modal.BackDrop = (_a) => {
 };
 Modal.Dialog = React28.forwardRef(
   (_a, ref) => {
-    var _b = _a, { children, className, size = "sm" } = _b, rest = __objRest(_b, ["children", "className", "size"]);
+    var _b = _a, { kind = "dialog", children, className, size = "sm" } = _b, rest = __objRest(_b, ["kind", "children", "className", "size"]);
+    const commonClasses = tw("bg-white max-h-full flex flex-col");
+    const dialogClasses = classNames("relative w-full rounded", {
+      "max-w-[600px]": size === "sm",
+      "max-w-[940px]": size === "md",
+      "min-h-full": size === "full"
+    });
+    const drawerClasses = classNames("absolute h-full", {
+      "w-[360px]": size === "sm",
+      "w-[560px]": size === "md",
+      "w-[1080px]": size === "full"
+    });
     return /* @__PURE__ */ React28.createElement("div", __spreadProps(__spreadValues({
       ref,
       "aria-modal": "true"
     }, rest), {
-      className: classNames(
-        tw("relative bg-white rounded mx-7 w-full max-h-full flex flex-col"),
-        {
-          "max-w-[600px]": size === "sm",
-          "max-w-[940px]": size === "md",
-          "min-h-full": size === "full"
-        },
-        className
-      )
+      className: classNames(commonClasses, kind === "dialog" ? dialogClasses : drawerClasses, className)
     }), children);
   }
 );
 Modal.Header = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
   return /* @__PURE__ */ React28.createElement("div", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(tw("px-7 py-6 gap-3 flex items-center"), className)
+    className: classNames(tw("pl-7 pr-[64px] py-6 gap-3 flex items-center"), className)
   }), children);
 };
 Modal.HeaderImage = (_a) => {
@@ -7365,16 +7381,21 @@ Modal.HeaderImage = (_a) => {
 Modal.CloseButtonContainer = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
   return /* @__PURE__ */ React28.createElement("div", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(tw("absolute top-[20px] right-[28px]"), className)
+    className: classNames(tw("absolute top-[24px] right-[28px]"), className)
   }));
 };
 Modal.Title = (_a) => {
-  var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+  var _b = _a, { kind = "dialog", children, className } = _b, rest = __objRest(_b, ["kind", "children", "className"]);
   return /* @__PURE__ */ React28.createElement(Typography, __spreadValues({
     htmlTag: "h2",
     variant: "subheading",
     color: "grey-90",
-    className: classNames(tw("leading-none"), className)
+    className: classNames(
+      tw({
+        "text-ellipsis overflow-x-hidden whitespace-nowrap": kind === "drawer"
+      }),
+      className
+    )
   }, rest), children);
 };
 Modal.Subtitle = (_a) => {
@@ -7387,7 +7408,7 @@ Modal.Subtitle = (_a) => {
 Modal.TitleContainer = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
   return /* @__PURE__ */ React28.createElement("div", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(tw("flex flex-col grow gap-2"), className)
+    className: classNames(tw("flex flex-col grow"), className)
   }), children);
 };
 Modal.Body = (_a) => {

package/dist/charts.cjs

@@ -64,14 +64,15 @@ __export(charts_exports, {
   Cell: () => import_recharts7.Cell,
   Doughnut: () => Doughnut,
   DoughnutChart: () => DoughnutChart,
+  Legend: () => Legend,
   Line: () => Line,
   LineChart: () => LineChart,
-  Pie: () => Pie2,
+  Pie: () => Pie,
   PieChart: () => PieChart,
   Reference: () => Reference,
   ResponsiveContainer: () => ResponsiveContainer,
   Tooltip: () => Tooltip,
-  extractChildByName: () => extractChildByName,
+  extractChildByDisplayName: () => extractChildByDisplayName,
   getDisplayName: () => getDisplayName,
   getXAxisTicks: () => getXAxisTicks,
   renderXAxis: () => renderXAxis,
@@ -2001,11 +2002,14 @@ var getXAxisTicks = ({ dataKey, ticks: ticks2 }, chartProps) => {
   const [min = new Date(), max = new Date()] = extent(xValues);
   return time().domain([min, max]).ticks(ticks2).map((v) => v.valueOf());
 };
-var extractChildByName = (children, name) => {
+var extractChildByDisplayName = (children, name) => {
   const childIndex = children.findIndex((child) => getDisplayName(child.type) === name);
-  const foundChild = children.slice(childIndex, childIndex + 1);
+  if (childIndex === -1) {
+    return [void 0, children];
+  }
+  const foundChild = children.at(childIndex);
   const remainingChildren = children.slice(0, childIndex).concat(children.slice(childIndex + 1));
-  return { foundChild, children: remainingChildren };
+  return [foundChild, remainingChildren];
 };
 
 // src/charts/Axis/Axis.tsx
@@ -2148,44 +2152,53 @@ Tooltip.defaultProps = Object.assign({}, import_recharts5.Tooltip.defaultProps,
 });
 
 // src/charts/BarChart/BarChart.tsx
-var renderChildren2 = (props) => {
-  return import_react5.default.Children.map(props.children, (child) => {
-    switch (getDisplayName(child.type)) {
-      case Axis.XAxis.displayName: {
-        return renderXAxis(child, props);
-      }
-      case Axis.XAxis.Time.displayName: {
-        return renderXTimeAxis(child, props);
-      }
-      case Axis.YAxis.displayName: {
-        return renderYAxis(child, props);
-      }
-      case Tooltip.displayName: {
-        return /* @__PURE__ */ import_react5.default.createElement(Tooltip, __spreadProps(__spreadValues({}, child.props), {
-          cursor: false
-        }));
-      }
-      default: {
-        return child;
-      }
-    }
-  });
-};
 var BarChart = (props) => {
+  const [activeIndex, setActiveIndex] = import_react5.default.useState(void 0);
+  const renderChildren3 = (props2) => {
+    return import_react5.default.Children.map(props2.children, (child) => {
+      switch (getDisplayName(child.type)) {
+        case Axis.XAxis.displayName: {
+          return renderXAxis(child, props2);
+        }
+        case Axis.XAxis.Time.displayName: {
+          return renderXTimeAxis(child, props2);
+        }
+        case Axis.YAxis.displayName: {
+          return renderYAxis(child, props2);
+        }
+        case import_recharts6.Bar.displayName: {
+          return import_react5.default.cloneElement(child, {
+            shape: (props3) => /* @__PURE__ */ import_react5.default.createElement(import_recharts6.Rectangle, __spreadProps(__spreadValues({}, props3), {
+              className: activeIndex !== void 0 ? "inactive" : void 0
+            }))
+          });
+        }
+        case Tooltip.displayName: {
+          return /* @__PURE__ */ import_react5.default.createElement(Tooltip, __spreadProps(__spreadValues({}, child.props), {
+            cursor: false
+          }));
+        }
+        default: {
+          return child;
+        }
+      }
+    });
+  };
   return /* @__PURE__ */ import_react5.default.createElement(ResponsiveContainer, {
     width: props.width,
     height: props.height
-  }, /* @__PURE__ */ import_react5.default.createElement(import_recharts6.BarChart, {
-    data: props.data,
+  }, /* @__PURE__ */ import_react5.default.createElement(import_recharts6.BarChart, __spreadProps(__spreadValues({}, props), {
     barCategoryGap: "5%",
     style: { stroke: "#fff", strokeWidth: 1 },
+    onMouseMove: (state) => setActiveIndex(state.isTooltipActive ? state.activeTooltipIndex : void 0),
+    onMouseLeave: () => setActiveIndex(void 0),
     margin: {
       top: 20,
       right: 30,
       left: 20,
       bottom: 5
     }
-  }, /* @__PURE__ */ import_react5.default.createElement(CartesianGrid, null), renderChildren2(props)));
+  }), /* @__PURE__ */ import_react5.default.createElement(CartesianGrid, null), renderChildren3(props)));
 };
 var Bar = Object.assign((props) => /* @__PURE__ */ import_react5.default.createElement(import_recharts6.Bar, __spreadProps(__spreadValues({}, props), {
   isAnimationActive: false
@@ -2197,11 +2210,29 @@ BarChart.Tooltip = Tooltip;
 var import_recharts7 = require("recharts");
 var import_recharts8 = require("recharts");
 
-// src/charts/LineChart/LineChart.tsx
+// src/charts/Legend/Legend.tsx
 var import_react6 = __toESM(require("react"));
 var import_recharts9 = require("recharts");
-var renderChildren3 = (props) => {
-  return import_react6.default.Children.map(props.children, (child) => {
+var Legend = import_react6.default.forwardRef((props, _ref) => {
+  return /* @__PURE__ */ import_react6.default.createElement(import_recharts9.Legend, __spreadProps(__spreadValues({}, props), {
+    margin: __spreadProps(__spreadValues({}, props.margin), { top: 0 })
+  }));
+});
+Legend.displayName = "Legend";
+Legend.defaultProps = {
+  iconType: "circle",
+  iconSize: 8,
+  align: "left",
+  layout: "horizontal",
+  verticalAlign: "top",
+  margin: { top: 0 }
+};
+
+// src/charts/LineChart/LineChart.tsx
+var import_react7 = __toESM(require("react"));
+var import_recharts10 = require("recharts");
+var renderChildren2 = (props) => {
+  return import_react7.default.Children.map(props.children, (child) => {
     switch (getDisplayName(child.type)) {
       case Axis.XAxis.displayName: {
         return renderXAxis(child, props);
@@ -2219,10 +2250,10 @@ var renderChildren3 = (props) => {
   });
 };
 var LineChart = (props) => {
-  return /* @__PURE__ */ import_react6.default.createElement(ResponsiveContainer, {
+  return /* @__PURE__ */ import_react7.default.createElement(ResponsiveContainer, {
     width: props.width,
     height: props.height
-  }, /* @__PURE__ */ import_react6.default.createElement(import_recharts9.LineChart, {
+  }, /* @__PURE__ */ import_react7.default.createElement(import_recharts10.LineChart, {
     data: props.data,
     style: { stroke: "#fff", strokeWidth: 1 },
     margin: {
@@ -2231,26 +2262,27 @@ var LineChart = (props) => {
       left: 20,
       bottom: 5
     }
-  }, /* @__PURE__ */ import_react6.default.createElement(CartesianGrid, null), renderChildren3(props)));
+  }, /* @__PURE__ */ import_react7.default.createElement(CartesianGrid, null), renderChildren2(props)));
 };
 var Line = Object.assign(
-  (props) => /* @__PURE__ */ import_react6.default.createElement(import_recharts9.Line, __spreadProps(__spreadValues({
+  (props) => /* @__PURE__ */ import_react7.default.createElement(import_recharts10.Line, __spreadProps(__spreadValues({
     type: "monotone"
   }, props), {
     strokeWidth: 2,
     isAnimationActive: false,
     dot: false
   })),
-  import_recharts9.Line
+  import_recharts10.Line
 );
 LineChart.Line = Line;
 
 // src/charts/PieChart/DoughnutChart.tsx
 var import_react11 = __toESM(require("react"));
-var import_recharts11 = require("recharts");
+var import_isNil = __toESM(require("lodash/isNil"));
+var import_recharts12 = require("recharts");
 
 // src/charts/PieChart/ChartValue.tsx
-var import_react7 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 
 // src/utils/tailwind.ts
 var import_classnames = __toESM(require("classnames"));
@@ -2277,29 +2309,21 @@ function tw(classesOrModifiers1, classesOrModifiers2, classesOrModifiers3, class
 // src/charts/PieChart/ChartValue.tsx
 var ChartValue = (props) => {
   const { value, unit: unit2, caption } = props;
-  return /* @__PURE__ */ import_react7.default.createElement("p", {
+  return /* @__PURE__ */ import_react8.default.createElement("p", {
     className: tw(
-      "typography-large-heading",
-      "text-center",
-      "leading-tight",
-      "absolute",
-      "top-1/2",
-      "left-1/2",
-      "transform",
-      "-translate-x-1/2",
-      "-translate-y-1/2"
+      "typography-large-heading text-grey-90 text-center leading-tight absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
     )
-  }, value, unit2, caption && /* @__PURE__ */ import_react7.default.createElement("span", {
-    className: tw("block", "typography-small")
+  }, value, unit2, caption && /* @__PURE__ */ import_react8.default.createElement("span", {
+    className: tw("block", "typography-small text-grey-60")
   }, caption));
 };
 
 // src/charts/PieChart/renderPieChildren.tsx
-var import_react9 = __toESM(require("react"));
-var import_recharts10 = require("recharts");
+var import_react10 = __toESM(require("react"));
+var import_recharts11 = require("recharts");
 
 // src/charts/PieChart/TooltipContentWrapper.tsx
-var import_react8 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 var import_isFunction = __toESM(require("lodash/isFunction"));
 var TooltipContentWrapper = (_a) => {
   var _b = _a, {
@@ -2315,28 +2339,28 @@ var TooltipContentWrapper = (_a) => {
     });
   });
   const propsWithPayload = __spreadProps(__spreadValues({}, props), { payload });
-  if (import_react8.default.isValidElement(content)) {
-    return import_react8.default.cloneElement(content, propsWithPayload);
+  if (import_react9.default.isValidElement(content)) {
+    return import_react9.default.cloneElement(content, propsWithPayload);
   }
   if ((0, import_isFunction.default)(content)) {
-    return import_react8.default.createElement(content, propsWithPayload);
+    return import_react9.default.createElement(content, propsWithPayload);
   }
-  return /* @__PURE__ */ import_react8.default.createElement(Tooltip.DefaultContent, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react9.default.createElement(Tooltip.DefaultContent, __spreadProps(__spreadValues({}, props), {
     payload
   }));
 };
 
 // src/charts/PieChart/renderPieChildren.tsx
 var renderPieChildren = (children) => {
-  return import_react9.default.Children.map(children, (child) => {
+  return import_react10.default.Children.map(children, (child) => {
     switch (getDisplayName(child.type)) {
       case Tooltip.displayName: {
-        return import_react9.default.cloneElement(child, { content: /* @__PURE__ */ import_react9.default.createElement(TooltipContentWrapper, {
+        return import_react10.default.cloneElement(child, { content: /* @__PURE__ */ import_react10.default.createElement(TooltipContentWrapper, {
           content: child.props.content
         }) });
       }
-      case DoughnutChart.Doughnut.displayName: {
-        return /* @__PURE__ */ import_react9.default.createElement(import_recharts10.Pie, __spreadValues({}, child.props));
+      case import_recharts11.Legend.displayName: {
+        return import_react10.default.cloneElement(child, { verticalAlign: "top", align: "center" });
       }
       default: {
         return child;
@@ -2345,90 +2369,104 @@ var renderPieChildren = (children) => {
   });
 };
 
-// src/charts/PieChart/renderScaledChartValue.tsx
-var import_react10 = __toESM(require("react"));
-var renderScaledChartValue = (props) => {
-  const refSize = 300;
-  const { containerWidth, containerHeight, chartValue } = props;
-  if (!containerWidth || !containerHeight) {
-    return null;
-  }
-  const scaleBy = containerWidth >= containerHeight ? containerHeight : containerWidth;
-  const scale = scaleBy / refSize;
-  const x = (containerWidth - refSize * scale) / (2 * scale);
-  const y = (containerHeight - refSize * scale) / (2 * scale);
-  return /* @__PURE__ */ import_react10.default.createElement("foreignObject", {
-    width: refSize,
-    height: refSize,
-    x,
-    y,
-    transform: `scale(${scale})`
-  }, chartValue);
-};
-
 // src/charts/PieChart/DoughnutChart.tsx
+var refSize = 300;
 var DoughnutChart = (props) => {
   const [containerWidth, setContainerWidth] = import_react11.default.useState(0);
   const [containerHeight, setContainerHeight] = import_react11.default.useState(0);
-  const { foundChild: chartValue, children } = extractChildByName(props.children, ChartValue.displayName);
+  const [activeIndex, setActiveIndex] = import_react11.default.useState(null);
+  const [chartValue, _children] = extractChildByDisplayName(props.children, ChartValue.displayName);
+  const [pie, children] = extractChildByDisplayName(_children, DoughnutChart.Doughnut.displayName);
+  const [tooltip] = extractChildByDisplayName(props.children, Tooltip.displayName);
   const onResize = (w, h) => {
     setContainerWidth(w);
     setContainerHeight(h);
   };
-  const scaledChartValue = renderScaledChartValue({ chartValue, containerWidth, containerHeight });
+  const renderChartValue = ({ formattedGraphicalItems }) => {
+    var _a, _b, _c;
+    const pie2 = formattedGraphicalItems == null ? void 0 : formattedGraphicalItems[0];
+    const props2 = (_a = pie2 == null ? void 0 : pie2.props) != null ? _a : {};
+    const cx = (_b = props2.cx) != null ? _b : containerWidth / 2;
+    const cy = (_c = props2.cy) != null ? _c : containerHeight / 2;
+    if (!containerWidth || !containerHeight || (0, import_isNil.default)(chartValue)) {
+      return null;
+    }
+    const scaleBy = containerWidth >= containerHeight ? containerHeight : containerWidth;
+    const scale = scaleBy / refSize;
+    const yOffset = cy - containerHeight / 2;
+    const yMargin = (containerHeight - refSize * scale) / 2;
+    const x = cx - refSize / 2 * scale;
+    const y = (yOffset + yMargin) / scale;
+    return /* @__PURE__ */ import_react11.default.createElement("foreignObject", {
+      width: refSize,
+      height: refSize,
+      x,
+      y,
+      transform: `scale(${scale})`
+    }, chartValue);
+  };
+  const highlightActive = activeIndex !== null && tooltip;
   return /* @__PURE__ */ import_react11.default.createElement(ResponsiveContainer, {
     onResize,
     width: props.width,
     height: props.height
-  }, /* @__PURE__ */ import_react11.default.createElement(import_recharts11.PieChart, null, scaledChartValue, renderPieChildren(children)));
+  }, /* @__PURE__ */ import_react11.default.createElement(import_recharts12.PieChart, null, chartValue && /* @__PURE__ */ import_react11.default.createElement(import_recharts12.Customized, {
+    component: renderChartValue
+  }), pie && /* @__PURE__ */ import_react11.default.createElement(import_recharts12.Pie, __spreadProps(__spreadValues({}, pie.props), {
+    onMouseEnter: (_, index) => setActiveIndex(index),
+    onMouseLeave: () => setActiveIndex(null),
+    activeIndex,
+    inactiveShape: { className: highlightActive ? "inactive" : void 0 },
+    activeShape: { className: highlightActive ? "active" : void 0 }
+  })), renderPieChildren(children)));
 };
-var Doughnut = Object.assign((props) => /* @__PURE__ */ import_react11.default.createElement(import_recharts11.Pie, __spreadValues({}, props)), import_recharts11.Pie);
-Doughnut.defaultProps = Object.assign({}, import_recharts11.Pie.defaultProps, {
+var Doughnut = Object.assign((props) => /* @__PURE__ */ import_react11.default.createElement(import_recharts12.Pie, __spreadValues({}, props)), import_recharts12.Pie);
+Doughnut.defaultProps = Object.assign({}, import_recharts12.Pie.defaultProps, {
   isAnimationActive: false,
   innerRadius: "60%",
   outerRadius: "80%"
 });
 DoughnutChart.Doughnut = Doughnut;
 DoughnutChart.ChartValue = ChartValue;
-DoughnutChart.Cell = import_recharts11.Cell;
+DoughnutChart.Cell = import_recharts12.Cell;
 
 // src/charts/PieChart/PieChart.tsx
 var import_react12 = __toESM(require("react"));
-var import_recharts12 = require("recharts");
+var import_recharts13 = require("recharts");
 var PieChart = (props) => {
   return /* @__PURE__ */ import_react12.default.createElement(ResponsiveContainer, {
     width: props.width,
     height: props.height
-  }, /* @__PURE__ */ import_react12.default.createElement(import_recharts12.PieChart, {
+  }, /* @__PURE__ */ import_react12.default.createElement(import_recharts13.PieChart, {
     width: 500,
     height: 500
   }, renderPieChildren(props.children)));
 };
-var Pie2 = Object.assign((props) => /* @__PURE__ */ import_react12.default.createElement(import_recharts12.Pie, __spreadValues({}, props)), import_recharts12.Pie);
-Pie2.defaultProps = Object.assign({}, import_recharts12.Pie.defaultProps, {
+var Pie = Object.assign((props) => /* @__PURE__ */ import_react12.default.createElement(import_recharts13.Pie, __spreadValues({}, props)), import_recharts13.Pie);
+Pie.defaultProps = Object.assign({}, import_recharts13.Pie.defaultProps, {
   isAnimationActive: false,
   innerRadius: 0,
   outerRadius: "80%"
 });
-PieChart.Pie = Pie2;
-PieChart.Cell = import_recharts12.Cell;
+PieChart.Pie = Pie;
+PieChart.Cell = import_recharts13.Cell;
 
 // src/charts/Reference/Reference.tsx
 var import_react13 = __toESM(require("react"));
-var import_recharts13 = require("recharts");
+var import_recharts14 = require("recharts");
 var ReferenceLine = Object.assign(
-  (props) => /* @__PURE__ */ import_react13.default.createElement(import_recharts13.ReferenceLine, __spreadProps(__spreadValues({}, props), {
+  (props) => /* @__PURE__ */ import_react13.default.createElement(import_recharts14.ReferenceLine, __spreadProps(__spreadValues({}, props), {
     strokeDasharray: "9 3",
     strokeWidth: 2
   })),
-  import_recharts13.ReferenceLine
+  import_recharts14.ReferenceLine
 );
 var ReferenceArea = Object.assign(
-  (props) => /* @__PURE__ */ import_react13.default.createElement(import_recharts13.ReferenceArea, __spreadProps(__spreadValues({}, props), {
+  (props) => /* @__PURE__ */ import_react13.default.createElement(import_recharts14.ReferenceArea, __spreadProps(__spreadValues({}, props), {
     strokeWidth: 0,
     fillOpacity: 0.1
   })),
-  import_recharts13.ReferenceLine
+  import_recharts14.ReferenceLine
 );
 var Reference = {
   Line: ReferenceLine,
@@ -2445,6 +2483,7 @@ var Reference = {
   Cell,
   Doughnut,
   DoughnutChart,
+  Legend,
   Line,
   LineChart,
   Pie,
@@ -2452,7 +2491,7 @@ var Reference = {
   Reference,
   ResponsiveContainer,
   Tooltip,
-  extractChildByName,
+  extractChildByDisplayName,
   getDisplayName,
   getXAxisTicks,
   renderXAxis,