@economic/taco 2.56.0 → 2.57.0-charts.1

package/dist/taco.cjs

@@ -19628,8 +19628,8 @@ function mixValues(target, follow, lead, progress2, shouldCrossfadeOpacity, isOn
   }
   for (var i3 = 0; i3 < numBorders; i3++) {
     var borderLabel = "border".concat(borders[i3], "Radius");
-    var followRadius = getRadius(follow, borderLabel);
-    var leadRadius = getRadius(lead, borderLabel);
+    var followRadius = getRadius$1(follow, borderLabel);
+    var leadRadius = getRadius$1(lead, borderLabel);
     if (followRadius === void 0 && leadRadius === void 0)
       continue;
     followRadius || (followRadius = 0);
@@ -19648,7 +19648,7 @@ function mixValues(target, follow, lead, progress2, shouldCrossfadeOpacity, isOn
     target.rotate = mix(follow.rotate || 0, lead.rotate || 0, progress2);
   }
 }
-function getRadius(values, radiusName) {
+function getRadius$1(values, radiusName) {
   var _a;
   return (_a = values[radiusName]) !== null && _a !== void 0 ? _a : values.borderRadius;
 }
@@ -61563,7 +61563,7 @@ var symbolFactories = {
   symbolTriangle,
   symbolWye
 };
-var RADIAN$2 = Math.PI / 180;
+var RADIAN$3 = Math.PI / 180;
 var getSymbolFactory = function getSymbolFactory2(type) {
   var name = "symbol".concat(upperFirst(type));
   return symbolFactories[name] || symbolCircle;
@@ -61580,7 +61580,7 @@ var calculateAreaSize = function calculateAreaSize2(size2, sizeType, type) {
     case "square":
       return size2 * size2;
     case "star": {
-      var angle = 18 * RADIAN$2;
+      var angle = 18 * RADIAN$3;
       return 1.25 * size2 * size2 * (Math.tan(angle) - Math.tan(angle * 2) * Math.pow(Math.tan(angle), 2));
     }
     case "triangle":
@@ -64052,7 +64052,7 @@ function _iterableToArrayLimit$b(r2, l2) {
 function _arrayWithHoles$c(arr) {
   if (Array.isArray(arr)) return arr;
 }
-var ResponsiveContainer$1 = /* @__PURE__ */ React.forwardRef(function(_ref, ref) {
+var ResponsiveContainer = /* @__PURE__ */ React.forwardRef(function(_ref, ref) {
   var aspect = _ref.aspect, _ref$initialDimension = _ref.initialDimension, initialDimension = _ref$initialDimension === void 0 ? {
     width: -1,
     height: -1
@@ -69190,7 +69190,7 @@ function _toPrimitive$y(t3, r2) {
   }
   return ("string" === r2 ? String : Number)(t3);
 }
-var getLegendProps$1 = function getLegendProps(_ref) {
+var getLegendProps = function getLegendProps2(_ref) {
   var children = _ref.children, formattedGraphicalItems = _ref.formattedGraphicalItems, legendWidth = _ref.legendWidth, legendContent = _ref.legendContent;
   var legendItem = findChildByType(children, Legend$2);
   if (!legendItem) {
@@ -69533,7 +69533,7 @@ var getBarPosition = function getBarPosition2(_ref3) {
 var appendOffsetOfLegend = function appendOffsetOfLegend2(offset2, _unused, props, legendBox) {
   var children = props.children, width = props.width, margin = props.margin;
   var legendWidth = width - (margin.left || 0) - (margin.right || 0);
-  var legendProps = getLegendProps$1({
+  var legendProps = getLegendProps({
     children,
     legendWidth
   });
@@ -70207,14 +70207,14 @@ function _iterableToArrayLimit$6(r2, l2) {
 function _arrayWithHoles$7(arr) {
   if (Array.isArray(arr)) return arr;
 }
-var RADIAN$1 = Math.PI / 180;
+var RADIAN$2 = Math.PI / 180;
 var radianToDegree = function radianToDegree2(angleInRadian) {
   return angleInRadian * 180 / Math.PI;
 };
 var polarToCartesian = function polarToCartesian2(cx, cy, radius, angle) {
   return {
-    x: cx + Math.cos(-RADIAN$1 * angle) * radius,
-    y: cy + Math.sin(-RADIAN$1 * angle) * radius
+    x: cx + Math.cos(-RADIAN$2 * angle) * radius,
+    y: cy + Math.sin(-RADIAN$2 * angle) * radius
   };
 };
 var getMaxRadius = function getMaxRadius2(width, height) {
@@ -70722,7 +70722,7 @@ var getAttrsOfCartesianLabel = function getAttrsOfCartesianLabel2(props) {
 var isPolar = function isPolar2(viewBox) {
   return "cx" in viewBox && isNumber(viewBox.cx);
 };
-function Label(_ref4) {
+function Label$1(_ref4) {
   var _ref4$offset = _ref4.offset, offset2 = _ref4$offset === void 0 ? 5 : _ref4$offset, restProps = _objectWithoutProperties$d(_ref4, _excluded$d);
   var props = _objectSpread$s({
     offset: offset2
@@ -70755,7 +70755,7 @@ function Label(_ref4) {
     breakAll: textBreakAll
   }), label);
 }
-Label.displayName = "Label";
+Label$1.displayName = "Label";
 var parseViewBox = function parseViewBox2(props) {
   var cx = props.cx, cy = props.cy, angle = props.angle, startAngle = props.startAngle, endAngle = props.endAngle, r2 = props.r, radius = props.radius, innerRadius = props.innerRadius, outerRadius = props.outerRadius, x3 = props.x, y4 = props.y, top = props.top, left = props.left, width = props.width, height = props.height, clockWise = props.clockWise, labelViewBox = props.labelViewBox;
   if (labelViewBox) {
@@ -70808,40 +70808,40 @@ var parseLabel = function parseLabel2(label, viewBox) {
     return null;
   }
   if (label === true) {
-    return /* @__PURE__ */ React.createElement(Label, {
+    return /* @__PURE__ */ React.createElement(Label$1, {
       key: "label-implicit",
       viewBox
     });
   }
   if (isNumOrStr(label)) {
-    return /* @__PURE__ */ React.createElement(Label, {
+    return /* @__PURE__ */ React.createElement(Label$1, {
       key: "label-implicit",
       viewBox,
       value: label
     });
   }
   if (/* @__PURE__ */ React.isValidElement(label)) {
-    if (label.type === Label) {
+    if (label.type === Label$1) {
       return /* @__PURE__ */ React.cloneElement(label, {
         key: "label-implicit",
         viewBox
       });
     }
-    return /* @__PURE__ */ React.createElement(Label, {
+    return /* @__PURE__ */ React.createElement(Label$1, {
       key: "label-implicit",
       content: label,
       viewBox
     });
   }
   if (isFunction(label)) {
-    return /* @__PURE__ */ React.createElement(Label, {
+    return /* @__PURE__ */ React.createElement(Label$1, {
       key: "label-implicit",
       content: label,
       viewBox
     });
   }
   if (isObject(label)) {
-    return /* @__PURE__ */ React.createElement(Label, _extends$o({
+    return /* @__PURE__ */ React.createElement(Label$1, _extends$o({
       viewBox
     }, label, {
       key: "label-implicit"
@@ -70856,7 +70856,7 @@ var renderCallByParent$1 = function renderCallByParent(parentProps, viewBox) {
   }
   var children = parentProps.children;
   var parentViewBox = parseViewBox(parentProps);
-  var explicitChildren = findAllByType(children, Label).map(function(child, index2) {
+  var explicitChildren = findAllByType(children, Label$1).map(function(child, index2) {
     return /* @__PURE__ */ React.cloneElement(child, {
       viewBox: viewBox || parentViewBox,
       // eslint-disable-next-line react/no-array-index-key
@@ -70869,8 +70869,8 @@ var renderCallByParent$1 = function renderCallByParent(parentProps, viewBox) {
   var implicitLabel = parseLabel(parentProps.label, viewBox || parentViewBox);
   return [implicitLabel].concat(_toConsumableArray$8(explicitChildren));
 };
-Label.parseViewBox = parseViewBox;
-Label.renderCallByParent = renderCallByParent$1;
+Label$1.parseViewBox = parseViewBox;
+Label$1.renderCallByParent = renderCallByParent$1;
 var lastExports = requireLast();
 const last = /* @__PURE__ */ getDefaultExportFromCjs(lastExports);
 function _typeof$w(o2) {
@@ -71007,11 +71007,11 @@ function LabelList(_ref) {
     var idProps = isNil(id2) ? {} : {
       id: "".concat(id2, "-").concat(index2)
     };
-    return /* @__PURE__ */ React.createElement(Label, _extends$n({}, filterProps(entry, true), others, idProps, {
+    return /* @__PURE__ */ React.createElement(Label$1, _extends$n({}, filterProps(entry, true), others, idProps, {
       parentViewBox: entry.parentViewBox,
       value,
       textBreakAll,
-      viewBox: Label.parseViewBox(isNil(clockWise) ? entry : _objectSpread$r(_objectSpread$r({}, entry), {}, {
+      viewBox: Label$1.parseViewBox(isNil(clockWise) ? entry : _objectSpread$r(_objectSpread$r({}, entry), {}, {
         clockWise
       })),
       key: "label-".concat(index2),
@@ -71140,12 +71140,12 @@ var getDeltaAngle2 = function getDeltaAngle3(startAngle, endAngle) {
 var getTangentCircle = function getTangentCircle2(_ref) {
   var cx = _ref.cx, cy = _ref.cy, radius = _ref.radius, angle = _ref.angle, sign2 = _ref.sign, isExternal = _ref.isExternal, cornerRadius = _ref.cornerRadius, cornerIsExternal = _ref.cornerIsExternal;
   var centerRadius = cornerRadius * (isExternal ? 1 : -1) + radius;
-  var theta = Math.asin(cornerRadius / centerRadius) / RADIAN$1;
+  var theta = Math.asin(cornerRadius / centerRadius) / RADIAN$2;
   var centerAngle = cornerIsExternal ? angle : angle + sign2 * theta;
   var center = polarToCartesian(cx, cy, centerRadius, centerAngle);
   var circleTangency = polarToCartesian(cx, cy, radius, centerAngle);
   var lineTangencyAngle = cornerIsExternal ? angle - sign2 * theta : angle;
-  var lineTangency = polarToCartesian(cx, cy, centerRadius * Math.cos(theta * RADIAN$1), lineTangencyAngle);
+  var lineTangency = polarToCartesian(cx, cy, centerRadius * Math.cos(theta * RADIAN$2), lineTangencyAngle);
   return {
     center,
     circleTangency,
@@ -73725,7 +73725,7 @@ var PolarRadiusAxis = /* @__PURE__ */ function(_PureComponent) {
       }
       return /* @__PURE__ */ React.createElement(Layer, {
         className: clsx("recharts-polar-radius-axis", this.props.className)
-      }, axisLine && this.renderAxisLine(), tick && this.renderTicks(), Label.renderCallByParent(this.props, this.getViewBox()));
+      }, axisLine && this.renderAxisLine(), tick && this.renderTicks(), Label$1.renderCallByParent(this.props, this.getViewBox()));
     }
   }], [{
     key: "renderTickItem",
@@ -73895,7 +73895,7 @@ function _toPrimitive$l(t3, r2) {
   }
   return String(t3);
 }
-var RADIAN = Math.PI / 180;
+var RADIAN$1 = Math.PI / 180;
 var eps = 1e-5;
 var PolarAngleAxis = /* @__PURE__ */ function(_PureComponent) {
   function PolarAngleAxis2() {
@@ -73935,7 +73935,7 @@ var PolarAngleAxis = /* @__PURE__ */ function(_PureComponent) {
     key: "getTickTextAnchor",
     value: function getTickTextAnchor(data) {
       var orientation = this.props.orientation;
-      var cos2 = Math.cos(-data.coordinate * RADIAN);
+      var cos2 = Math.cos(-data.coordinate * RADIAN$1);
       var textAnchor;
       if (cos2 > eps) {
         textAnchor = orientation === "outer" ? "start" : "end";
@@ -74854,7 +74854,7 @@ var Pie = /* @__PURE__ */ function(_PureComponent) {
         ref: function ref(_ref3) {
           _this5.pieRef = _ref3;
         }
-      }, this.renderSectors(), label && this.renderLabels(sectors), Label.renderCallByParent(this.props, null, false), (!isAnimationActive || isAnimationFinished) && LabelList.renderCallByParent(this.props, sectors, false));
+      }, this.renderSectors(), label && this.renderLabels(sectors), Label$1.renderCallByParent(this.props, null, false), (!isAnimationActive || isAnimationFinished) && LabelList.renderCallByParent(this.props, sectors, false));
     }
   }], [{
     key: "getDerivedStateFromProps",
@@ -77306,7 +77306,7 @@ function ReferenceLineImpl(props) {
   });
   return /* @__PURE__ */ React.createElement(Layer, {
     className: clsx("recharts-reference-line", className)
-  }, renderLine(shape, lineProps), Label.renderCallByParent(props, rectWithCoords({
+  }, renderLine(shape, lineProps), Label$1.renderCallByParent(props, rectWithCoords({
     x1,
     y1,
     x2: x22,
@@ -77519,7 +77519,7 @@ var ReferenceDot = /* @__PURE__ */ function(_React$Component) {
       });
       return /* @__PURE__ */ React.createElement(Layer, {
         className: clsx("recharts-reference-dot", className)
-      }, ReferenceDot2.renderDot(shape, dotProps), Label.renderCallByParent(this.props, {
+      }, ReferenceDot2.renderDot(shape, dotProps), Label$1.renderCallByParent(this.props, {
         x: cx - r2,
         y: cy - r2,
         width: 2 * r2,
@@ -77744,7 +77744,7 @@ var ReferenceArea = /* @__PURE__ */ function(_React$Component) {
         className: clsx("recharts-reference-area", className)
       }, ReferenceArea2.renderRect(shape, _objectSpread$7(_objectSpread$7({
         clipPath
-      }, filterProps(this.props, true)), rect)), Label.renderCallByParent(this.props, rect));
+      }, filterProps(this.props, true)), rect)), Label$1.renderCallByParent(this.props, rect));
     }
   }]);
 }(React.Component);
@@ -78427,7 +78427,7 @@ var CartesianAxis = /* @__PURE__ */ function(_Component) {
         ref: function ref(_ref2) {
           _this3.layerReference = _ref2;
         }
-      }, axisLine && this.renderAxisLine(), this.renderTicks(finalTicks, this.state.fontSize, this.state.letterSpacing), Label.renderCallByParent(this.props));
+      }, axisLine && this.renderAxisLine(), this.renderTicks(finalTicks, this.state.fontSize, this.state.letterSpacing), Label$1.renderCallByParent(this.props));
     }
   }], [{
     key: "renderTickItem",
@@ -81960,7 +81960,7 @@ var generateCategoricalChart = function generateCategoricalChart2(_ref6) {
         var _this$props2 = _this.props, children = _this$props2.children, width = _this$props2.width, height = _this$props2.height;
         var margin = _this.props.margin || {};
         var legendWidth = width - (margin.left || 0) - (margin.right || 0);
-        var props = getLegendProps$1({
+        var props = getLegendProps({
           children,
           formattedGraphicalItems,
           legendWidth,
@@ -82725,7 +82725,7 @@ var BarChart$1 = generateCategoricalChart({
   }],
   formatAxisMap: formatAxisMap2
 });
-var PieChart = generateCategoricalChart({
+var PieChart$1 = generateCategoricalChart({
   chartName: "PieChart",
   GraphicalChild: Pie,
   validateTooltipEventTypes: ["item"],
@@ -82761,6 +82761,79 @@ var AreaChart$1 = generateCategoricalChart({
   }],
   formatAxisMap: formatAxisMap2
 });
+function getAxisProps(scale2, tickFormatter, dataKey) {
+  return {
+    axisLine: false,
+    dataKey,
+    fontSize: 11,
+    scale: scale2,
+    tickLine: false,
+    tickMargin: 8,
+    tickFormatter
+  };
+}
+function ChartContainer(props) {
+  const { onSetWidth: handleSetWidth, ...attributes } = props;
+  const ref = React.useRef(null);
+  React.useLayoutEffect(() => {
+    if (ref.current && typeof handleSetWidth === "function") {
+      const rect = ref.current.getBoundingClientRect();
+      handleSetWidth(rect.width);
+    }
+  }, [ref]);
+  const className = clsx("flex justify-center mx-auto", attributes.className);
+  return /* @__PURE__ */ React.createElement("div", { ...attributes, className, ref }, /* @__PURE__ */ React.createElement(ResponsiveContainer, null, props.children));
+}
+function Tooltip(props) {
+  const { active, payload = [], style, title } = props;
+  if (active && payload.length) {
+    return /* @__PURE__ */ React.createElement("div", { className: "border-grey-300 z-20 flex flex-col gap-y-1 rounded-md border bg-white px-2 py-1.5 text-xs shadow-sm" }, title ? /* @__PURE__ */ React.createElement("span", { className: "font-bold" }, title) : null, /* @__PURE__ */ React.createElement("dl", { className: "m-0 grid grid-cols-[max-content_max-content] gap-x-4 gap-y-0.5", style }, payload.map((entry, index2) => {
+      const color2 = entry.color ?? entry.payload.color;
+      const formatter = entry.formatter ?? entry.payload.formatter;
+      const unit2 = entry.unit ?? entry.payload.unit;
+      return /* @__PURE__ */ React.createElement(React.Fragment, { key: `${entry.name}-${index2}` }, /* @__PURE__ */ React.createElement("dt", { className: "text-grey-700 mb-0 flex items-center gap-1 font-normal" }, /* @__PURE__ */ React.createElement("span", { className: "-mt-px h-2.5 w-2.5 rounded-sm", style: { background: color2 } }), entry.name), /* @__PURE__ */ React.createElement("dd", { className: "mb-0 text-right font-bold tabular-nums text-black" }, (formatter == null ? void 0 : formatter(entry.value ?? "", entry.name ?? "", entry, index2, entry.payload)) ?? entry.value, " ", unit2 ? /* @__PURE__ */ React.createElement("span", { className: "text-grey-700" }, unit2) : null));
+    })));
+  }
+  return null;
+}
+function Legend$1(props) {
+  const { hoverIndex, items, onHover: handleHover, onToggle: handleToggle } = props;
+  const handleMouseEnter = (item, index2) => {
+    if (item.isHidden) {
+      return;
+    }
+    handleHover(index2);
+  };
+  const handleMouseLeave = () => handleHover(void 0);
+  const handleClick = (item) => {
+    if (!item.isHidden) {
+      handleHover(void 0);
+    }
+    handleToggle(item.dataKey);
+  };
+  const moreButton = (moreButtonText) => /* @__PURE__ */ React.createElement(Button$4, { appearance: "transparent", className: "text-grey-700 !h-5 !min-h-[1.25rem] !px-1.5 text-xs" }, moreButtonText);
+  return /* @__PURE__ */ React.createElement(OverflowGroup, { className: "w-full gap-x-1", moreButton }, items.map((item, index2) => {
+    const className = clsx("mr-1 flex h-3 w-3 rounded-sm", {
+      [`bg-${item.color}`]: !item.isHidden,
+      border: item.isHidden
+    });
+    return /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        key: item.label,
+        className: "hover:bg-grey-200 focus-visible:yt-focus flex items-center rounded px-1 !text-xs",
+        onClick: (event) => {
+          event == null ? void 0 : event.preventDefault();
+          handleClick(item);
+        },
+        onMouseEnter: () => handleMouseEnter(item, index2),
+        onMouseLeave: () => handleMouseLeave()
+      },
+      /* @__PURE__ */ React.createElement("span", { className }, hoverIndex === index2 ? /* @__PURE__ */ React.createElement(Icon$1, { name: "tick-bold", className: clsx("!h-full !w-full", { "text-white": !item.isHidden }) }) : null),
+      item.label
+    );
+  }));
+}
 const THEME_COLORS = {
   transparent: "transparent",
   current: "currentColor",
@@ -82896,266 +82969,291 @@ const mapColor = (palette, prefix2 = "") => {
   }, {});
 };
 const colors = mapColor(THEME_COLORS);
-const getThemeColor = (color2) => colors[color2];
-function Legend$1(props) {
-  const { activeIndex, onMouseEnter, onMouseLeave, onClick, payload, layout, activeItems } = props;
-  const [hoverIndex, setHoverIndex] = React.useState(null);
-  const handleMouseEnter = (entry, index2) => {
-    setHoverIndex(index2);
-    if (activeItems[entry.dataKey]) onMouseEnter(entry, index2);
-  };
-  const handleMouseLeave = () => {
-    onMouseLeave();
-    setHoverIndex(null);
-  };
-  const moreButton = (moreButtonText) => /* @__PURE__ */ React.createElement(Button$4, { appearance: "transparent", className: "text-grey-700" }, moreButtonText);
-  return /* @__PURE__ */ React.createElement("div", { className: "mx-auto w-auto max-w-full overflow-hidden" }, /* @__PURE__ */ React.createElement("div", { className: clsx("mb-0 ml-0 flex justify-center", { "flex-col": layout === "vertical" }) }, /* @__PURE__ */ React.createElement(OverflowGroup, { className: "w-full items-center py-1", moreButton }, payload.map((entry, index2) => /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      key: `${entry.dataKey}-${index2}`,
-      className: clsx(" hover:bg-grey-100 cursor-pointer px-[8px] py-[2px] hover:rounded-[4px]", {
-        "bg-grey-100 rounded": activeIndex === index2
-      }),
-      onMouseEnter: () => handleMouseEnter(entry, index2),
-      onMouseLeave: handleMouseLeave,
-      onClick: onClick ? () => onClick(entry) : void 0
-    },
-    /* @__PURE__ */ React.createElement("span", { className: "text-grey-700 flex items-center gap-[4px]" }, /* @__PURE__ */ React.createElement(
-      "span",
-      {
-        className: clsx("-mt-px ml-1 flex h-3 w-3 rounded-sm", {
-          "border-grey-300 border !bg-white": !activeItems[entry.dataKey]
-        }),
-        style: { backgroundColor: entry.color }
-      },
-      hoverIndex === index2 && activeItems[entry.dataKey] && /* @__PURE__ */ React.createElement(Icon$1, { name: "tick-bold", className: "!h-full !w-full text-white" })
-    ), entry.value)
-  )))));
-}
-const Tooltip = ({ active, formatter, payload, style, singlePieDonutChart }) => {
-  const getColor = (entry) => {
-    if (singlePieDonutChart) {
-      return getThemeColor(entry.payload.color);
+const getThemeColor = (color2, def = "") => colors[color2 ?? def];
+const getInverseThemeColor = (themeColor) => {
+  const [color2, number2] = String(themeColor).split("-");
+  const shade = Number(number2);
+  if (shade) {
+    if (shade > 500) {
+      return getThemeColor(`${color2}-100`);
+    } else {
+      if (shade === 500 && (color2 === "red" || color2 === "blue" || color2 === "brown" || color2 === "purple" || color2 === "green")) {
+        return "white";
+      }
+      return getThemeColor(`${color2}-900`);
     }
-    return entry.color ?? entry.payload.fill ?? "blue-500";
-  };
-  if (active && payload && payload.length) {
-    return /* @__PURE__ */ React.createElement(
-      "dl",
-      {
-        className: "z-20 grid grid-cols-[max-content_max-content] gap-x-4 rounded-md bg-white p-4 text-xs shadow-[0px_0px_1px_rgba(0,0,0,0.1),_0px_6px_18px_rgba(47,51,68,0.2)]",
-        style
-      },
-      payload.map((entry, index2) => /* @__PURE__ */ React.createElement(React.Fragment, { key: `${entry.name}-${index2}` }, /* @__PURE__ */ React.createElement(
-        "dt",
-        { className: "text-grey-700 mb-0 flex items-center gap-1 font-normal" },
-        /* @__PURE__ */ React.createElement("span", { className: "-mt-px h-2.5 w-2.5 rounded-sm", style: { background: getColor(entry) } }),
-        // We use entry.payload.label because the payload structure differs between a Donut chart with a single pie
-        // and one with multiple pies.
-        singlePieDonutChart ? entry.payload.label : entry.name
-      ), /* @__PURE__ */ React.createElement("dd", { className: "mb-0 text-right font-bold text-black " }, formatter ? formatter(entry.value) : entry.value)))
-    );
   }
-  return null;
+  return color2 === "black" ? "white" : "black";
 };
-const getCartesianGridProps = () => ({
-  vertical: false
-});
-const getXAxisProps = (props) => ({
-  axisLine: false,
-  dataKey: props.accessor,
-  fontSize: 12,
-  scale: props.xAxisScale,
-  tickLine: false,
-  tickFormatter: props.xAxisTickFormat
-});
-const getYAxisProps = (props) => ({
-  axisLine: false,
-  fontSize: 12,
-  scale: props.yAxisScale,
-  tickLine: false,
-  tickFormatter: props.yAxisTickFormat
-});
-const getLegendProps2 = (props) => ({
-  content: /* @__PURE__ */ React.createElement(Legend$1, { ...props })
-});
-const getTooltipProps = (props = void 0) => ({
-  content: /* @__PURE__ */ React.createElement(Tooltip, { ...props }),
-  wrapperStyle: { outline: "none" }
-});
-const ResponsiveContainer = (props) => /* @__PURE__ */ React.createElement(ResponsiveContainer$1, { className: "!h-[calc(100%-1px)] !w-[calc(100%-1px)]", ...props });
-const Area = (_) => null;
-const AreaChart = function AreaChart2(externalProps) {
-  const { children, data, formatter, ...props } = externalProps;
-  const [hoveredArea, setHoveredArea] = React.useState(null);
-  const [activeAreas, setActiveAreas] = React.useState(() => {
-    const areas = {};
-    React.Children.forEach(children, (child) => {
-      areas[child.props.accessor] = true;
+function useChart(children, options) {
+  const [activeIndex, setActiveIndex] = React.useState();
+  const [hiddenItems, toggleItem] = useChartDataHiddenState();
+  const localization = useLocalization();
+  const defaultFormatter2 = (value) => new Intl.NumberFormat(localization.locale).format(value);
+  const { items, shapes } = React.useMemo(() => {
+    const items2 = React.Children.toArray(children).filter((child) => React.isValidElement(child)).map((child) => {
+      const dataKey = child.props.dataKey ?? child.props.label;
+      return {
+        ...child.props,
+        dataKey,
+        formatter: child.props.formatter ?? (options == null ? void 0 : options.formatter) ?? defaultFormatter2,
+        isHidden: !!hiddenItems[dataKey],
+        unit: child.props.unit ?? (options == null ? void 0 : options.unit)
+      };
     });
-    return areas;
-  });
-  const handleLegendClick = (entry) => {
-    setHoveredArea(null);
-    setActiveAreas({ ...activeAreas, [entry.dataKey]: !activeAreas[entry.dataKey] });
-  };
-  return /* @__PURE__ */ React.createElement(ResponsiveContainer, null, /* @__PURE__ */ React.createElement(AreaChart$1, { data, margin: { top: 10, right: 0, left: -25, bottom: 0 } }, /* @__PURE__ */ React.createElement(CartesianGrid, { ...getCartesianGridProps() }), /* @__PURE__ */ React.createElement(XAxis, { ...getXAxisProps(props) }), /* @__PURE__ */ React.createElement(YAxis, { ...getYAxisProps(props) }), /* @__PURE__ */ React.createElement(
-    Legend$2,
-    {
-      ...getLegendProps2({
-        onClick: handleLegendClick,
-        onMouseEnter: (entry) => setHoveredArea(entry.dataKey),
-        onMouseLeave: () => setHoveredArea(null),
-        activeItems: activeAreas
-      })
-    }
-  ), /* @__PURE__ */ React.createElement(Tooltip$1, { ...getTooltipProps(), formatter }), React.Children.map(children, (child) => /* @__PURE__ */ React.createElement(
-    Area$1,
-    {
-      activeDot: {
-        fill: getThemeColor(child.props.color ?? "blue-300")
-      },
-      isAnimationActive: false,
-      dataKey: child.props.accessor,
-      dot: false,
-      fill: getThemeColor(child.props.color ?? "grey-100"),
-      name: child.props.label,
-      strokeWidth: 2,
-      stroke: getThemeColor(child.props.color ?? "grey-300"),
-      stackId: child.props.stackId,
-      hide: !activeAreas[child.props.accessor],
-      opacity: hoveredArea && child.props.accessor !== hoveredArea ? 0.3 : 1
-    }
-  ))));
-};
-AreaChart.Area = Area;
-const Bar = (_) => null;
-const getXAxisVerticalProps = (props) => ({
-  ...getXAxisProps(props),
-  ...{ type: "number", dataKey: void 0 }
-});
-const getYAxisVerticalProps = (props) => ({
-  ...getYAxisProps(props),
-  ...{ dataKey: props.accessor, type: "category" }
-});
-const BarChart = function BarChart2(externalProps) {
-  const { children, data, formatter, layout = "horizontal", ...props } = externalProps;
-  const [activeIndex, setActiveIndex] = React.useState(void 0);
-  const [hoveredBar, setHoveredBar] = React.useState(null);
-  const [activeBars, setActiveBars] = React.useState(() => {
-    const keys2 = {};
-    React.Children.forEach(children, (child) => {
-      keys2[child.props.accessor] = true;
+    const shapes2 = items2.filter((item) => !hiddenItems[item.dataKey]).map((item) => {
+      const color2 = getThemeColor(item.color, "blue-500");
+      return {
+        activeDot: {
+          strokeWidth: 1
+        },
+        color: color2,
+        dataKey: item.dataKey,
+        dot: {
+          fillOpacity: 0.6
+        },
+        isAnimationActive: false,
+        fill: color2,
+        fillOpacity: 0.65,
+        formatter: item.formatter,
+        name: item.label,
+        stroke: color2,
+        strokeWidth: 1.5,
+        unit: item.unit
+      };
     });
-    return keys2;
-  });
-  const stacks = {};
-  React.Children.forEach(children, (child) => {
-    if (child.props.stackId) {
-      if (!stacks[child.props.stackId]) {
-        stacks[child.props.stackId] = [child.props.accessor];
+    return { items: items2, shapes: shapes2 };
+  }, [children, hiddenItems]);
+  return { items, shapes, activeIndex, setActiveIndex, toggleItem };
+}
+function useChartDataHiddenState() {
+  const [state, setState] = React.useState({});
+  function toggle(name) {
+    setState((currentState) => {
+      const nextState = { ...currentState };
+      if (currentState[name]) {
+        delete nextState[name];
       } else {
-        stacks[child.props.stackId].push(child.props.accessor);
+        nextState[name] = true;
       }
-    }
-  });
-  const handleLegendClick = (entry) => {
-    setHoveredBar(null);
-    setActiveBars({ ...activeBars, [entry.dataKey]: !activeBars[entry.dataKey] });
-  };
-  const handleLegendHover = (entry, index2) => {
-    setHoveredBar(entry.dataKey);
-    setActiveIndex(index2);
-  };
-  return /* @__PURE__ */ React.createElement(ResponsiveContainer, null, /* @__PURE__ */ React.createElement(
-    BarChart$1,
+      return nextState;
+    });
+  }
+  return [state, toggle];
+}
+function AreaChart(props) {
+  const {
+    children,
+    data,
+    dataKey,
+    showDots = false,
+    showLegend = false,
+    showXAxis = true,
+    showYAxis = false,
+    stacked = false,
+    tooltipTitle,
+    type = "natural",
+    xAxisScale,
+    xAxisTickFormatter,
+    yAxisScale,
+    yAxisTickFormatter,
+    ...attributes
+  } = props;
+  const className = clsx("aspect-video", attributes.className);
+  const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart(children);
+  return /* @__PURE__ */ React.createElement("div", { className: "relative", "data-taco": "chart-wrapper" }, /* @__PURE__ */ React.createElement(ChartContainer, { ...attributes, className, "data-taco": "chart-area" }, /* @__PURE__ */ React.createElement(
+    AreaChart$1,
     {
-      layout,
       data,
-      margin: { top: 10, right: 0, left: layout === "vertical" ? 0 : -25, bottom: 0 },
-      onMouseMove: (chartState) => setActiveIndex(chartState.activeTooltipIndex),
-      onMouseLeave: () => setActiveIndex(void 0)
+      margin: { bottom: 10, left: 10, right: 10, top: 10 },
+      stackOffset: stacked === "expand" ? "expand" : void 0
     },
-    /* @__PURE__ */ React.createElement(CartesianGrid, { ...getCartesianGridProps() }),
+    /* @__PURE__ */ React.createElement(CartesianGrid, { vertical: false }),
+    /* @__PURE__ */ React.createElement(Tooltip$1, { content: /* @__PURE__ */ React.createElement(Tooltip, { title: tooltipTitle }) }),
     /* @__PURE__ */ React.createElement(
       XAxis,
       {
-        ...layout === "vertical" ? getXAxisVerticalProps(props) : getXAxisProps(props)
+        ...getAxisProps(xAxisScale, xAxisTickFormatter, dataKey),
+        hide: !showXAxis
       }
     ),
+    /* @__PURE__ */ React.createElement(YAxis, { ...getAxisProps(yAxisScale, yAxisTickFormatter), hide: !showYAxis }),
+    shapes.map((shape) => /* @__PURE__ */ React.createElement(
+      Area$1,
+      {
+        key: shape.dataKey,
+        ...shape,
+        dot: showDots ? shape.dot : false,
+        stackId: stacked ? "stack" : void 0,
+        type
+      }
+    ))
+  )), showLegend ? /* @__PURE__ */ React.createElement(Legend$1, { items, hoverIndex: activeIndex, onHover: setActiveIndex, onToggle: toggleItem }) : null);
+}
+function Area(_) {
+  return null;
+}
+AreaChart.Area = Area;
+const BAR_WIDTH = 20;
+function BarChart(props) {
+  const isHorizontal = props.layout === "horizontal";
+  const {
+    children,
+    data,
+    dataKey,
+    showLabels = false,
+    showLegend = false,
+    showXAxis = !isHorizontal,
+    showYAxis = isHorizontal,
+    stacked = false,
+    xAxisScale,
+    xAxisTickFormatter,
+    yAxisScale,
+    yAxisTickFormatter,
+    ...attributes
+  } = props;
+  const className = clsx("aspect-video", attributes.className);
+  const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart(children);
+  return /* @__PURE__ */ React.createElement("div", { className: "relative", "data-taco": "chart-wrapper" }, /* @__PURE__ */ React.createElement(ChartContainer, { ...attributes, className, "data-taco": "chart-bar" }, /* @__PURE__ */ React.createElement(
+    BarChart$1,
+    {
+      data,
+      barCategoryGap: "15%",
+      barGap: "7.5%",
+      margin: { bottom: 10, left: isHorizontal ? -15 : 10, right: 10, top: 10 },
+      layout: isHorizontal ? "vertical" : void 0,
+      stackOffset: stacked === "expand" ? "expand" : void 0
+    },
+    /* @__PURE__ */ React.createElement(CartesianGrid, { horizontal: !isHorizontal, vertical: false }),
+    /* @__PURE__ */ React.createElement(Tooltip$1, { content: /* @__PURE__ */ React.createElement(Tooltip, null) }),
     /* @__PURE__ */ React.createElement(
-      YAxis,
+      XAxis,
       {
-        ...layout === "vertical" ? getYAxisVerticalProps(props) : getYAxisProps(props)
+        ...getAxisProps(xAxisScale, xAxisTickFormatter, isHorizontal ? void 0 : dataKey),
+        hide: !showXAxis,
+        type: isHorizontal ? "number" : void 0
       }
     ),
     /* @__PURE__ */ React.createElement(
-      Legend$2,
+      YAxis,
       {
-        ...getLegendProps2({
-          onClick: handleLegendClick,
-          onMouseEnter: handleLegendHover,
-          onMouseLeave: () => setHoveredBar(null),
-          activeItems: activeBars
-        })
+        ...getAxisProps(yAxisScale, yAxisTickFormatter, isHorizontal ? dataKey : void 0),
+        hide: !showYAxis,
+        type: isHorizontal ? "category" : void 0
       }
     ),
-    /* @__PURE__ */ React.createElement(Tooltip$1, { ...getTooltipProps(), formatter }),
-    React.Children.map(children, (child) => /* @__PURE__ */ React.createElement(
+    shapes.map((shape, index2) => /* @__PURE__ */ React.createElement(
       Bar$1,
       {
-        isAnimationActive: false,
-        barSize: 16,
-        dataKey: child.props.accessor,
-        name: child.props.label,
-        onMouseEnter: (_, index2) => setActiveIndex(index2),
-        onMouseLeave: () => setActiveIndex(void 0),
-        fill: getThemeColor(child.props.color ? `${child.props.color}` : `blue-300`),
-        radius: getBarRadius(stacks, child.props.accessor, child.props.stackId, activeBars),
-        stackId: child.props.stackId,
-        style: child.props.stackId ? { stroke: "#fff", strokeWidth: "2px" } : void 0,
-        hide: !activeBars[child.props.accessor]
+        key: shape.dataKey,
+        ...shape,
+        activeBar: { fillOpacity: 1, strokeWidth: 0 },
+        strokeWidth: 0,
+        maxBarSize: BAR_WIDTH,
+        radius: getRadius(index2, shapes.length, !!stacked, isHorizontal),
+        stackId: stacked ? "stack" : void 0
       },
-      data.map((_, index2) => /* @__PURE__ */ React.createElement(
-        Cell,
+      showLabels ? /* @__PURE__ */ React.createElement(
+        LabelList,
         {
-          key: `cell-${index2}`,
-          opacity: hoveredBar && child.props.accessor !== hoveredBar || activeIndex !== void 0 && activeIndex !== index2 ? 0.3 : 1
+          position: isHorizontal ? "insideRight" : "top",
+          formatter: shape.formatter,
+          offset: isHorizontal ? 6 : 8,
+          fill: isHorizontal ? getInverseThemeColor(shape.color ?? "") : "black",
+          fontSize: 11
         }
-      ))
+      ) : null
     ))
-  ));
-};
-BarChart.Bar = Bar;
-const getBarRadius = (stacks, accessor, stackId, activeBars) => {
-  if (stackId && Array.isArray(stacks[stackId])) {
-    const length = stacks[stackId].length - 1;
-    const index2 = stacks[stackId].indexOf(accessor);
-    if (Object.entries(activeBars).filter((item) => item[0] !== accessor).every((item) => !item[1])) {
-      return [3, 3, 0, 0];
+  )), showLegend ? /* @__PURE__ */ React.createElement(Legend$1, { items, hoverIndex: activeIndex, onHover: setActiveIndex, onToggle: toggleItem }) : null);
+}
+function getRadius(index2, length, stacked, isHorizontal) {
+  if (stacked) {
+    if (index2 === 0) {
+      return isHorizontal ? [3, 0, 0, 3] : [0, 0, 3, 3];
     }
-    if (activeBars[stacks[stackId][index2 + 1]] === false) {
-      return [index2 === 0 ? 0 : 3, index2 === 0 ? 0 : 3, index2 === length - 1 ? 0 : 3, index2 === length - 1 ? 0 : 3];
+    if (index2 === length - 1) {
+      return isHorizontal ? [0, 3, 3, 0] : [3, 3, 0, 0];
     }
-    if (index2 !== 0 && index2 !== length) {
-      return 0;
-    }
-    return [index2 === 0 ? 0 : 3, index2 === 0 ? 0 : 3, index2 === length ? 0 : 3, index2 === length ? 0 : 3];
+    return 0;
   }
   return 3;
-};
-const Legend = ({
-  legendPosition,
-  hoveredItem,
-  selectedItem,
-  data,
-  onClick,
-  setHoveredItem,
-  formatter,
-  total,
-  visibleItems,
-  label
-}) => {
+}
+function Bar(_) {
+  return null;
+}
+BarChart.Bar = Bar;
+const PIE_ACTIVE_WIDTH = 10;
+const PIE_ACTIVE_WIDTH_OFFSET = 2;
+function usePieChart(children, options) {
+  const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart(children, options);
+  const [radius, _setRadius] = React.useState(0);
+  function setRadius(width) {
+    _setRadius((width - 2 * (PIE_ACTIVE_WIDTH + PIE_ACTIVE_WIDTH_OFFSET)) / 2);
+  }
+  const pieProps = {
+    activeIndex,
+    activeShape: (props) => /* @__PURE__ */ React.createElement(ActiveShape$1, { ...props }),
+    children: shapes.map((shape) => /* @__PURE__ */ React.createElement(Cell, { key: shape.dataKey, color: shape.color, fill: shape.fill })),
+    // data props
+    data: items.filter((item) => !item.isHidden),
+    dataKey: "value",
+    nameKey: "label",
+    // style props
+    isAnimationActive: false,
+    startAngle: 90,
+    endAngle: -270,
+    stroke: "0",
+    labelLine: false,
+    outerRadius: radius
+  };
+  return { pieProps, radius, setRadius, items, activeIndex, setActiveIndex, toggleItem, shapes };
+}
+const PIE_CHART_HOVER = 10;
+const PIE_CHART_HOVER_OFFSET = 2;
+function ActiveShape$1(props) {
+  const { outerRadius = 0, ...attributes } = props;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Sector, { ...attributes, outerRadius }), /* @__PURE__ */ React.createElement(
+    Sector,
+    {
+      ...attributes,
+      innerRadius: outerRadius + PIE_CHART_HOVER_OFFSET,
+      outerRadius: outerRadius + PIE_CHART_HOVER,
+      opacity: 0.4
+    }
+  ));
+}
+const DONUT_WIDTH$1 = 20;
+function DonutChart(props) {
+  const { children, formatter, showLegend = false, showTotal = false, tooltipTitle, unit: unit2, ...attributes } = props;
+  const { pieProps, radius, setRadius, items, activeIndex, setActiveIndex, toggleItem } = usePieChart(children, {
+    formatter,
+    unit: unit2
+  });
+  const className = clsx("aspect-square", attributes.className);
+  return /* @__PURE__ */ React.createElement("div", { className: "relative", "data-taco": "chart-wrapper" }, showTotal ? /* @__PURE__ */ React.createElement(
+    Total,
+    {
+      formatter,
+      items,
+      unit: unit2,
+      style: { top: radius / 2 - 2, width: radius + DONUT_WIDTH$1 }
+    }
+  ) : null, /* @__PURE__ */ React.createElement(ChartContainer, { ...attributes, className, "data-taco": "chart-donut", onSetWidth: setRadius }, /* @__PURE__ */ React.createElement(PieChart$1, null, /* @__PURE__ */ React.createElement(Tooltip$1, { content: /* @__PURE__ */ React.createElement(Tooltip, { title: tooltipTitle }) }), /* @__PURE__ */ React.createElement(Pie, { ...pieProps, innerRadius: radius - DONUT_WIDTH$1 }))), showLegend ? /* @__PURE__ */ React.createElement(Legend$1, { items, hoverIndex: activeIndex, onHover: setActiveIndex, onToggle: toggleItem }) : null);
+}
+function Segment$2(_) {
+  return null;
+}
+DonutChart.Segment = Segment$2;
+function Total(props) {
+  const { formatter, items, unit: unit2, ...attributes } = props;
+  const localization = useLocalization();
+  const total = React.useMemo(() => {
+    const total2 = items.filter((item) => !item.isHidden).reduce((acc, curr) => acc + curr.value, 0);
+    return (formatter == null ? void 0 : formatter(total2)) ?? new Intl.NumberFormat(localization.locale).format(total2);
+  }, [items]);
+  return /* @__PURE__ */ React.createElement("div", { ...attributes, className: "absolute-center-x flex aspect-square flex-col items-center justify-center rounded-full" }, /* @__PURE__ */ React.createElement("span", { className: "truncate text-2xl font-bold tabular-nums" }, total), unit2 ? /* @__PURE__ */ React.createElement("span", { className: "text-grey-700 -mb-1 -mt-0.5 truncate text-xs" }, unit2) : null);
+}
+const Legend = ({ hoveredItem, selectedItem, data, onClick, setHoveredItem, formatter, total, label }) => {
   const isTotalLegendSelected = selectedItem.length === data.length;
   const isTotalLegendHovered = hoveredItem.length === data.length;
   const handleMouseLeave = () => setHoveredItem([]);
@@ -83169,49 +83267,22 @@ const Legend = ({
       {
         key: isTotal ? "total" : `${itemData.label}-${index2}`,
         className: clsx("mr-2 flex cursor-pointer gap-2 rounded pl-0 pr-1", {
-          "bg-grey-100": isHovered && (!isTotal || legendPosition === "right"),
-          "bg-grey-200": isSelected && (!isTotal || legendPosition === "right")
+          "bg-grey-100": isHovered,
+          "bg-grey-200": isSelected
         }),
         onClick: () => onClick(isTotal ? data : itemData),
         onMouseEnter: () => setHoveredItem(isTotal ? data.map((item) => item.id) : [itemData.id]),
         onMouseLeave: handleMouseLeave
       },
-      legendPosition === "bottom" ? /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ React.createElement(
-        "span",
-        {
-          className: clsx("ml-1 h-3 w-3 rounded-sm", {
-            "border-grey-300 border !bg-white": !visibleItems[itemData.id]
-          }),
-          style: { backgroundColor: getThemeColor(itemData.color) }
-        },
-        visibleItems[itemData.id] && isHovered && /* @__PURE__ */ React.createElement(Icon$1, { name: "tick-bold", className: "mb-2.5 !h-full !w-full text-white" })
-      ), /* @__PURE__ */ React.createElement("div", null, itemData.label)) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-        "span",
-        {
-          className: "ml-1 mt-1 h-9 w-2 rounded-[1px]",
-          style: { backgroundColor: getThemeColor(itemData.color) }
-        }
-      ), /* @__PURE__ */ React.createElement("div", null, itemData.label, /* @__PURE__ */ React.createElement("span", { className: "-mt-1 flex w-full text-lg font-bold" }, formatter ? formatter(itemData.value) : itemData.value)))
+      /* @__PURE__ */ React.createElement("span", { className: "ml-1 mt-1 h-9 w-2 rounded-[1px]", style: { backgroundColor: getThemeColor(itemData.color) } }),
+      /* @__PURE__ */ React.createElement("div", null, itemData.label, /* @__PURE__ */ React.createElement("span", { className: "-mt-1 flex w-full text-lg font-bold" }, formatter ? formatter(itemData.value) : itemData.value))
     );
   };
-  const moreButton = (moreButtonText) => /* @__PURE__ */ React.createElement(Button$4, { appearance: "transparent", className: "text-grey-700" }, moreButtonText);
-  const className = clsx("flex-grow pl-4", {
-    "w-full": legendPosition === "bottom"
-  });
-  return /* @__PURE__ */ React.createElement("div", { className }, /* @__PURE__ */ React.createElement(
-    "ul",
-    {
-      className: clsx(
-        "mb-0 ml-0 mt-4 flex justify-center space-y-1",
-        legendPosition === "right" ? "flex-col gap-1" : "flex-row"
-      )
-    },
-    legendPosition === "right" ? /* @__PURE__ */ React.createElement(React.Fragment, null, renderLegendItem(null), data.map(renderLegendItem)) : /* @__PURE__ */ React.createElement(OverflowGroup, { className: "w-full items-center py-1", moreButton }, data.map(renderLegendItem))
-  ));
+  return /* @__PURE__ */ React.createElement("div", { className: "flex-grow pl-4" }, /* @__PURE__ */ React.createElement("ul", { className: "mb-0 ml-0 mt-4 flex flex-col justify-center gap-1 space-y-1" }, renderLegendItem(null), data.map(renderLegendItem)));
 };
-const DONUT_WIDTH = 16;
+const DONUT_WIDTH = 24;
 const HOVER_DONUT_WIDTH = 10;
-const CenteredLabel = ({ radius, legendPosition, label, total, formatter, showLegend }) => {
+const CenteredLabel = ({ radius, label, total, formatter }) => {
   const totalInset = HOVER_DONUT_WIDTH + DONUT_WIDTH + DONUT_WIDTH;
   const diameter = radius * 2;
   return /* @__PURE__ */ React.createElement(
@@ -83221,8 +83292,8 @@ const CenteredLabel = ({ radius, legendPosition, label, total, formatter, showLe
       style: {
         top: `calc(${radius}px - (3rem / 2))`,
         // h-12 is 3rem
-        left: legendPosition === "right" ? `${totalInset}px` : `calc(50%-${diameter - 2 * totalInset})`,
-        width: showLegend ? `${diameter - 2 * totalInset}px` : `${diameter}px`
+        left: `${totalInset}px`,
+        width: `${diameter - 2 * totalInset}px`
       }
     },
     /* @__PURE__ */ React.createElement("span", { className: "w-full truncate text-lg font-bold" }, formatter ? formatter(total) : total),
@@ -83251,42 +83322,28 @@ const ActiveShape = (props) => {
       endAngle,
       innerRadius: outerRadius + 2,
       outerRadius: outerRadius + HOVER_DONUT_WIDTH,
-      fill: id2 !== void 0 ? getThemeColor(pieColors[id2]) ?? getThemeColor("blue-500") : getThemeColor("blue-500"),
-      opacity: 0.3
+      fill: id2 !== void 0 ? getThemeColor(pieColors[id2], "blue-500") : getThemeColor("blue-500"),
+      opacity: 0.4
     }
   ));
 };
-const Segment = (_) => null;
-const DonutChart = function DonutChart2({
-  children,
-  formatter,
-  onClick,
-  showLegend = false,
-  legendPosition = "bottom",
-  label
-}) {
+const Segment$1 = (_) => null;
+const LegacyDonutChart = function LegacyDonutChart2({ children, formatter, onClick, label }) {
   const ref = React.useRef(null);
   const [radius, setRadius] = React.useState(0);
   const [hoveredItem, setHoveredItem] = React.useState([]);
   const [selectedItem, setSelectedItem] = React.useState([]);
-  const [visibleItems, setVisibleItems] = React.useState(() => {
-    const keys2 = {};
-    React.Children.forEach(children, (child) => {
-      keys2[child.props.id] = true;
-    });
-    return keys2;
-  });
   React.useEffect(() => {
     var _a;
     if (ref.current) {
       const rect = (_a = ref.current.parentElement) == null ? void 0 : _a.getBoundingClientRect();
       if (rect) {
-        const width = showLegend ? rect.width / 2 : rect.width;
+        const width = rect.width / 2;
         const max2 = rect.height < width ? rect.height : width;
         setRadius(max2 / 2);
       }
     }
-  }, [showLegend]);
+  }, [ref.current]);
   const diameter = radius * 2;
   const data = React.Children.map(children, (child) => ({
     id: child.props.id,
@@ -83294,34 +83351,27 @@ const DonutChart = function DonutChart2({
     label: child.props.label,
     value: child.props.value
   }));
-  const displayedData = data.filter((child) => visibleItems[child.id]);
-  const total = displayedData.reduce((accum, entry) => accum + entry.value, 0);
-  const showTooltip = (!showLegend || legendPosition === "bottom") && displayedData.length > 0;
+  const total = data.reduce((accum, entry) => accum + entry.value, 0);
   const handleLegendClick = (entry) => {
-    if (legendPosition === "bottom" && !Array.isArray(entry)) {
-      setVisibleItems({ ...visibleItems, [entry.id]: !visibleItems[entry.id] });
-    } else {
-      const nextSelectedItem = Array.isArray(entry) ? entry.map((entryItem) => entryItem.id) : [entry.id];
-      const isCurrentSegmentActive = selectedItem.slice().sort().join(",") === nextSelectedItem.sort().join(",");
-      if (onClick && !isCurrentSegmentActive) {
-        onClick(entry);
-      }
-      setSelectedItem(isCurrentSegmentActive ? [] : nextSelectedItem);
+    const nextSelectedItem = Array.isArray(entry) ? entry.map((entryItem) => entryItem.id) : [entry.id];
+    const isCurrentSegmentActive = selectedItem.slice().sort().join(",") === nextSelectedItem.sort().join(",");
+    if (onClick && !isCurrentSegmentActive) {
+      onClick(entry);
     }
+    setSelectedItem(isCurrentSegmentActive ? [] : nextSelectedItem);
   };
   const handlePieClick = React.useCallback(
     (pieId) => {
       if (onClick && pieId !== void 0) {
-        const pieProps = displayedData.find((item) => item.id === pieId);
+        const pieProps = data.find((item) => item.id === pieId);
         onClick(pieProps);
       }
     },
-    [onClick, displayedData]
+    [onClick, data]
   );
-  const singlePieDonutChart = displayedData.length === 1;
   const activeShapeColor = React.useMemo(() => {
     const getSegmentColor = (item) => item.reduce((colors2, itemId) => {
-      const visibleHoveredItem = displayedData.find((dataItem) => dataItem.id === itemId);
+      const visibleHoveredItem = data.find((dataItem) => dataItem.id === itemId);
       if (visibleHoveredItem) {
         colors2[visibleHoveredItem.id] = visibleHoveredItem.color;
       }
@@ -83329,20 +83379,20 @@ const DonutChart = function DonutChart2({
     }, {});
     const hoveredSegmentColor = getSegmentColor(hoveredItem);
     const selectedSegmentColor = getSegmentColor(selectedItem);
-    return legendPosition === "bottom" || hoveredItem.length !== 0 ? hoveredSegmentColor : selectedSegmentColor;
-  }, [hoveredItem, selectedItem, legendPosition]);
+    return hoveredItem.length !== 0 ? hoveredSegmentColor : selectedSegmentColor;
+  }, [hoveredItem, selectedItem]);
   if (ref.current && !radius) {
     return null;
   }
   const getActiveIndex = () => {
     if (hoveredItem.length > 0) {
-      return hoveredItem.map((itemId) => displayedData.findIndex((element) => element.id === itemId));
+      return hoveredItem.map((itemId) => data.findIndex((element) => element.id === itemId));
     }
-    return selectedItem.map((selectedItemId) => displayedData.findIndex((element) => element.id === selectedItemId));
+    return selectedItem.map((selectedItemId) => data.findIndex((element) => element.id === selectedItemId));
   };
   const content = () => {
     const elements = React.Children.toArray(children).filter(
-      (child) => React.isValidElement(child) && visibleItems[child.props.id]
+      (child) => React.isValidElement(child)
     );
     return elements.length > 0 ? elements.map((child, index2) => {
       return /* @__PURE__ */ React.createElement(
@@ -83355,112 +83405,112 @@ const DonutChart = function DonutChart2({
       );
     }) : /* @__PURE__ */ React.createElement(Cell, { key: "empty-chart", name: "", fill: getThemeColor("grey-200") });
   };
-  return /* @__PURE__ */ React.createElement(
-    "div",
+  return /* @__PURE__ */ React.createElement("div", { className: "relative flex h-full w-full", ref }, /* @__PURE__ */ React.createElement(CenteredLabel, { radius, label, total, formatter }), /* @__PURE__ */ React.createElement(PieChart$1, { data, height: diameter, width: diameter, style: { transform: "rotate(90deg) scale(-1,1)" } }, /* @__PURE__ */ React.createElement(
+    Pie,
     {
-      className: clsx("relative h-full w-full", {
-        [`flex `]: showLegend,
-        "flex-col items-center": legendPosition === "bottom"
-      }),
-      ref
+      isAnimationActive: false,
+      activeIndex: getActiveIndex(),
+      activeShape: /* @__PURE__ */ React.createElement(ActiveShape, { pieColors: activeShapeColor, onClick: handlePieClick }),
+      data: data.length > 0 ? data : [],
+      dataKey: "value",
+      innerRadius: radius - HOVER_DONUT_WIDTH - DONUT_WIDTH,
+      onMouseEnter: (segment) => data.length > 0 && setHoveredItem([segment.id]),
+      onMouseLeave: () => setHoveredItem([]),
+      outerRadius: radius - HOVER_DONUT_WIDTH,
+      stroke: "0",
+      rootTabIndex: -1
     },
+    content()
+  )), /* @__PURE__ */ React.createElement(
+    Legend,
+    {
+      data,
+      onClick: handleLegendClick,
+      total,
+      setHoveredItem,
+      label,
+      hoveredItem,
+      selectedItem,
+      formatter
+    }
+  ));
+};
+LegacyDonutChart.Segment = Segment$1;
+function LineChart(props) {
+  const {
+    children,
+    data,
+    dataKey,
+    showDots = false,
+    showLegend = false,
+    showXAxis = true,
+    showYAxis = false,
+    tooltipTitle,
+    type = "natural",
+    xAxisScale,
+    xAxisTickFormatter,
+    yAxisScale,
+    yAxisTickFormatter,
+    ...attributes
+  } = props;
+  const className = clsx("aspect-video", attributes.className);
+  const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart(children);
+  return /* @__PURE__ */ React.createElement("div", { className: "relative", "data-taco": "chart-wrapper" }, /* @__PURE__ */ React.createElement(ChartContainer, { ...attributes, className, "data-taco": "chart-area" }, /* @__PURE__ */ React.createElement(
+    LineChart$1,
+    {
+      data,
+      margin: { bottom: 10, left: 10, right: 10, top: 10 }
+    },
+    /* @__PURE__ */ React.createElement(CartesianGrid, { vertical: false }),
+    /* @__PURE__ */ React.createElement(Tooltip$1, { content: /* @__PURE__ */ React.createElement(Tooltip, { title: tooltipTitle }) }),
     /* @__PURE__ */ React.createElement(
-      CenteredLabel,
+      XAxis,
       {
-        radius,
-        legendPosition,
-        label,
-        total,
-        formatter,
-        showLegend
+        ...getAxisProps(xAxisScale, xAxisTickFormatter, dataKey),
+        hide: !showXAxis
       }
     ),
-    /* @__PURE__ */ React.createElement(PieChart, { data, height: diameter, width: diameter, style: { transform: "rotate(90deg) scale(-1,1)" } }, showTooltip ? /* @__PURE__ */ React.createElement(
-      Tooltip$1,
-      {
-        ...getTooltipProps({
-          style: { transform: "rotate(90deg) scale(-1,1)" },
-          singlePieDonutChart
-        })
-      }
-    ) : null, /* @__PURE__ */ React.createElement(
-      Pie,
-      {
-        isAnimationActive: false,
-        activeIndex: getActiveIndex(),
-        activeShape: /* @__PURE__ */ React.createElement(ActiveShape, { pieColors: activeShapeColor, onClick: handlePieClick }),
-        data: displayedData.length > 0 ? displayedData : [],
-        dataKey: "value",
-        innerRadius: radius - HOVER_DONUT_WIDTH - DONUT_WIDTH,
-        onMouseEnter: (segment) => displayedData.length > 0 && setHoveredItem([segment.id]),
-        onMouseLeave: () => setHoveredItem([]),
-        outerRadius: radius - HOVER_DONUT_WIDTH,
-        paddingAngle: 2,
-        rootTabIndex: -1
-      },
-      content()
-    )),
-    showLegend && /* @__PURE__ */ React.createElement(
-      Legend,
-      {
-        data,
-        visibleItems,
-        onClick: handleLegendClick,
-        total,
-        setHoveredItem,
-        label,
-        legendPosition,
-        hoveredItem,
-        selectedItem,
-        formatter
-      }
-    )
-  );
-};
-DonutChart.Segment = Segment;
-const Line = (_) => null;
-const LineChart = function LineChart2(externalProps) {
-  const { children, data, formatter, ...props } = externalProps;
-  const [hoveredLine, setHoveredLine] = React.useState(null);
-  const [activeLines, setActiveLines] = React.useState(() => {
-    const keys2 = {};
-    React.Children.forEach(children, (child) => {
-      keys2[child.props.accessor] = true;
-    });
-    return keys2;
+    /* @__PURE__ */ React.createElement(YAxis, { ...getAxisProps(yAxisScale, yAxisTickFormatter), hide: !showYAxis }),
+    shapes.map((shape) => /* @__PURE__ */ React.createElement(Line$1, { key: shape.dataKey, ...shape, dot: showDots ? shape.dot : false, type }))
+  )), showLegend ? /* @__PURE__ */ React.createElement(Legend$1, { items, hoverIndex: activeIndex, onHover: setActiveIndex, onToggle: toggleItem }) : null);
+}
+function Line(_) {
+  return null;
+}
+LineChart.Line = Line;
+function PieChart(props) {
+  const { children, formatter, showLabels = false, showLegend = false, tooltipTitle, unit: unit2, ...attributes } = props;
+  const { pieProps, setRadius, items, activeIndex, setActiveIndex, toggleItem } = usePieChart(children, {
+    formatter,
+    unit: unit2
   });
-  const handleLegendClick = (entry) => {
-    setHoveredLine(null);
-    setActiveLines({ ...activeLines, [entry.dataKey]: !activeLines[entry.dataKey] });
-  };
-  return /* @__PURE__ */ React.createElement(ResponsiveContainer, null, /* @__PURE__ */ React.createElement(LineChart$1, { data, margin: { top: 10, right: 0, left: -25, bottom: 0 } }, /* @__PURE__ */ React.createElement(CartesianGrid, { ...getCartesianGridProps() }), /* @__PURE__ */ React.createElement(XAxis, { ...getXAxisProps(props) }), /* @__PURE__ */ React.createElement(YAxis, { ...getYAxisProps(props) }), /* @__PURE__ */ React.createElement(
-    Legend$2,
-    {
-      ...getLegendProps2({
-        onClick: handleLegendClick,
-        onMouseEnter: (entry) => setHoveredLine(entry.dataKey),
-        onMouseLeave: () => setHoveredLine(null),
-        activeItems: activeLines
-      })
-    }
-  ), /* @__PURE__ */ React.createElement(Tooltip$1, { ...getTooltipProps(), formatter }), React.Children.map(children, (child) => /* @__PURE__ */ React.createElement(
-    Line$1,
+  const className = clsx("aspect-square", attributes.className);
+  return /* @__PURE__ */ React.createElement("div", { className: "relative", "data-taco": "chart-wrapper" }, /* @__PURE__ */ React.createElement(ChartContainer, { ...attributes, className, "data-taco": "chart-pie", onSetWidth: setRadius }, /* @__PURE__ */ React.createElement(PieChart$1, null, /* @__PURE__ */ React.createElement(Tooltip$1, { content: /* @__PURE__ */ React.createElement(Tooltip, { title: tooltipTitle }) }), /* @__PURE__ */ React.createElement(Pie, { ...pieProps, label: showLabels ? /* @__PURE__ */ React.createElement(Label, null) : void 0 }))), showLegend ? /* @__PURE__ */ React.createElement(Legend$1, { items, hoverIndex: activeIndex, onHover: setActiveIndex, onToggle: toggleItem }) : null);
+}
+function Segment(_) {
+  return null;
+}
+PieChart.Segment = Segment;
+const RADIAN = Math.PI / 180;
+function Label(props) {
+  var _a, _b;
+  const { cx, cy, midAngle, name, innerRadius, outerRadius } = props;
+  const radius = innerRadius + (outerRadius - innerRadius) * 0.7;
+  const x3 = cx + radius * Math.cos(-midAngle * RADIAN);
+  const y4 = cy + radius * Math.sin(-midAngle * RADIAN);
+  return /* @__PURE__ */ React.createElement(
+    "text",
     {
-      activeDot: {
-        fill: getThemeColor(child.props.color ?? "blue-300")
-      },
-      dataKey: child.props.accessor,
-      isAnimationActive: false,
-      dot: false,
-      name: child.props.label,
-      stroke: getThemeColor(child.props.color ?? "blue-300"),
-      strokeWidth: 2,
-      hide: !activeLines[child.props.accessor],
-      opacity: hoveredLine && child.props.accessor !== hoveredLine ? 0.3 : 1
-    }
-  ))));
-};
-LineChart.Line = Line;
+      x: x3,
+      y: y4,
+      fontSize: 12,
+      fill: getInverseThemeColor(((_b = (_a = props.payload) == null ? void 0 : _a.payload) == null ? void 0 : _b.color) ?? ""),
+      textAnchor: "middle",
+      dominantBaseline: "middle"
+    },
+    name
+  );
+}
 const Button3 = React.forwardRef(function Button23(props, ref) {
   const { ...attributes } = props;
   const className = clsx(getButtonClasses(), props.className);
@@ -84329,6 +84379,7 @@ exports.Icon = Icon$1;
 exports.IconButton = IconButton;
 exports.Input = Input;
 exports.Layout = Layout;
+exports.LegacyDonutChart = LegacyDonutChart;
 exports.LineChart = LineChart;
 exports.List = List$1;
 exports.Listbox = Listbox;
@@ -84342,6 +84393,7 @@ exports.Navigation2 = Navigation24;
 exports.OverflowGroup = OverflowGroup;
 exports.PaginatedTable = PaginatedTable;
 exports.Pagination = Pagination;
+exports.PieChart = PieChart;
 exports.Popover = Popover;
 exports.Progress = Progress;
 exports.Provider = Provider;