@automattic/charts 0.57.0 → 0.58.0

package/dist/{chunk-ZH4F5RMG.cjs → chunk-GRA7Y2ZG.cjs}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }
 
 var _chunk7OZEQ5HEcjs = require('./chunk-7OZEQ5HE.cjs');
 
@@ -8,21 +8,22 @@ var _chunk2A34OA5Ocjs = require('./chunk-2A34OA5O.cjs');
 
 
 
-var _chunkRCY6XLGUcjs = require('./chunk-RCY6XLGU.cjs');
 
+var _chunkTZRUHQOHcjs = require('./chunk-TZRUHQOH.cjs');
 
-var _chunkY3NNQMAXcjs = require('./chunk-Y3NNQMAX.cjs');
 
 
-var _chunkI35UYJJRcjs = require('./chunk-I35UYJJR.cjs');
 
+var _chunkXVBH5XHEcjs = require('./chunk-XVBH5XHE.cjs');
 
-var _chunkASLARV7Lcjs = require('./chunk-ASLARV7L.cjs');
 
+var _chunkY3NNQMAXcjs = require('./chunk-Y3NNQMAX.cjs');
 
 
+var _chunkREZTQ4PHcjs = require('./chunk-REZTQ4PH.cjs');
 
 
+var _chunkASLARV7Lcjs = require('./chunk-ASLARV7L.cjs');
 
 
 
@@ -31,10 +32,12 @@ var _chunkASLARV7Lcjs = require('./chunk-ASLARV7L.cjs');
 
 
 
-var _chunkRHHVEJHJcjs = require('./chunk-RHHVEJHJ.cjs');
 
 
-var _chunkVTS3PNMScjs = require('./chunk-VTS3PNMS.cjs');
+var _chunkWYK7EL5Rcjs = require('./chunk-WYK7EL5R.cjs');
+
+
+var _chunkMXGLYWVPcjs = require('./chunk-MXGLYWVP.cjs');
 
 // src/charts/pie-chart/pie-chart.tsx
 var _group = require('@visx/group');
@@ -95,13 +98,7 @@ var PieChartInternal = ({
   withTooltips = false,
   className,
   showLegend = false,
-  legendOrientation = "horizontal",
-  legendPosition = "bottom",
-  legendAlignment = "center",
-  legendMaxWidth,
-  legendTextOverflow = "wrap",
-  legendItemClassName,
-  legendShape = "circle",
+  legend = {},
   width: propWidth,
   height: propHeight,
   size,
@@ -112,16 +109,17 @@ var PieChartInternal = ({
   cornerScale = 0,
   showLabels = true,
   legendValueDisplay = "percentage",
-  legendInteractive = false,
   children = null,
   tooltipOffsetX = 0,
   tooltipOffsetY = -15,
   renderTooltip = renderDefaultPieTooltip,
   gap = "md"
 }) => {
-  const providerTheme = _chunkRHHVEJHJcjs.useGlobalChartsTheme.call(void 0, );
-  const chartId = _chunkRHHVEJHJcjs.useChartId.call(void 0, providedChartId);
-  const [svgWrapperRef, svgWrapperWidth, svgWrapperHeight] = _chunkRHHVEJHJcjs.useElementSize.call(void 0, );
+  const legendInteractive = _nullishCoalesce(legend.interactive, () => ( false));
+  const legendPosition = _nullishCoalesce(legend.position, () => ( "bottom"));
+  const providerTheme = _chunkWYK7EL5Rcjs.useGlobalChartsTheme.call(void 0, );
+  const chartId = _chunkWYK7EL5Rcjs.useChartId.call(void 0, providedChartId);
+  const [svgWrapperRef, svgWrapperWidth, svgWrapperHeight] = _chunkWYK7EL5Rcjs.useElementSize.call(void 0, );
   const {
     tooltipOpen,
     tooltipLeft,
@@ -148,12 +146,12 @@ var PieChartInternal = ({
   const {
     getElementStyles,
     isSeriesVisible
-  } = _chunkRHHVEJHJcjs.useGlobalChartsContext.call(void 0, );
+  } = _chunkWYK7EL5Rcjs.useGlobalChartsContext.call(void 0, );
   const {
     visibleData,
     allSegmentsHidden,
     legendData
-  } = _chunkRHHVEJHJcjs.useInteractiveLegendData.call(void 0, {
+  } = _chunkWYK7EL5Rcjs.useInteractiveLegendData.call(void 0, {
     data,
     chartId,
     legendInteractive,
@@ -163,7 +161,7 @@ var PieChartInternal = ({
     showValues: true,
     legendValueDisplay
   }), [legendValueDisplay]);
-  const legendItems = _chunkRHHVEJHJcjs.useChartLegendItems.call(void 0, legendData, legendOptions);
+  const legendItems = _chunkXVBH5XHEcjs.useChartLegendItems.call(void 0, legendData, legendOptions);
   const {
     isValid,
     message
@@ -171,21 +169,22 @@ var PieChartInternal = ({
   const {
     svgChildren,
     htmlChildren,
+    legendChildren,
     otherChildren
-  } = _chunkRCY6XLGUcjs.useChartChildren.call(void 0, children, "PieChart");
+  } = _chunkTZRUHQOHcjs.useChartChildren.call(void 0, children, "PieChart");
   const chartMetadata = _react.useMemo.call(void 0, () => ({
     thickness,
     gapScale,
     cornerScale
   }), [thickness, gapScale, cornerScale]);
-  _chunkRHHVEJHJcjs.useChartRegistration.call(void 0, {
+  _chunkWYK7EL5Rcjs.useChartRegistration.call(void 0, {
     chartId,
     legendItems,
     chartType: "pie",
     isDataValid: isValid,
     metadata: chartMetadata
   });
-  const prefersReducedMotion = _chunkRHHVEJHJcjs.usePrefersReducedMotion.call(void 0, );
+  const prefersReducedMotion = _chunkWYK7EL5Rcjs.usePrefersReducedMotion.call(void 0, );
   if (!isValid) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
       className: _clsx2.default.call(void 0, "pie-chart", pie_chart_module_default["pie-chart"], className),
@@ -225,26 +224,25 @@ var PieChartInternal = ({
       }).color;
     }
   };
-  const legendElement = showLegend && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRHHVEJHJcjs.Legend, {
-    orientation: legendOrientation,
+  const legendElement = showLegend && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXVBH5XHEcjs.Legend, {
+    orientation: _nullishCoalesce(legend.orientation, () => ( "horizontal")),
     position: legendPosition,
-    alignment: legendAlignment,
-    labelStyles: {
-      maxWidth: legendMaxWidth,
-      textOverflow: legendTextOverflow
-    },
-    itemClassName: legendItemClassName,
-    shape: legendShape,
+    alignment: _nullishCoalesce(legend.alignment, () => ( "center")),
+    labelStyles: legend.labelStyles,
+    itemClassName: legend.itemClassName,
+    itemStyles: legend.itemStyles,
+    shapeStyles: legend.shapeStyles,
+    shape: _nullishCoalesce(legend.shape, () => ( "circle")),
     chartId,
     interactive: legendInteractive
   });
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRHHVEJHJcjs.SingleChartContext.Provider, {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXVBH5XHEcjs.SingleChartContext.Provider, {
     value: {
       chartId,
       chartWidth: width,
       chartHeight: height
     },
-    children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkI35UYJJRcjs.Stack, {
+    children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkREZTQ4PHcjs.Stack, {
       ref: containerRef,
       direction: "column",
       gap,
@@ -261,7 +259,7 @@ var PieChartInternal = ({
         width: propWidth || void 0,
         height: propHeight || void 0
       },
-      children: [legendPosition === "top" && legendElement, /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
+      children: [legendPosition === "top" && legendElement, _chunkTZRUHQOHcjs.renderLegendSlot.call(void 0, legendChildren, "top"), /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
         className: pie_chart_module_default["pie-chart__svg-wrapper"],
         ref: svgWrapperRef,
         children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", {
@@ -358,7 +356,7 @@ var PieChartInternal = ({
             }), !allSegmentsHidden && svgChildren]
           })]
         })
-      }), legendPosition === "bottom" && legendElement, withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipInPortal, {
+      }), legendPosition === "bottom" && legendElement, _chunkTZRUHQOHcjs.renderLegendSlot.call(void 0, legendChildren, "bottom"), withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipInPortal, {
         top: tooltipTop || 0,
         left: tooltipLeft || 0,
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
@@ -372,32 +370,32 @@ var PieChartInternal = ({
   });
 };
 var PieChartWithProvider = (props) => {
-  const existingContext = _react.useContext.call(void 0, _chunkRHHVEJHJcjs.GlobalChartsContext);
+  const existingContext = _react.useContext.call(void 0, _chunkWYK7EL5Rcjs.GlobalChartsContext);
   if (existingContext) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PieChartInternal, {
       ...props
     });
   }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRHHVEJHJcjs.GlobalChartsProvider, {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWYK7EL5Rcjs.GlobalChartsProvider, {
     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PieChartInternal, {
       ...props
     })
   });
 };
 PieChartWithProvider.displayName = "PieChart";
-var PieChart = _chunkVTS3PNMScjs.attachSubComponents.call(void 0, PieChartWithProvider, {
-  Legend: _chunkRHHVEJHJcjs.Legend,
-  SVG: _chunkRCY6XLGUcjs.ChartSVG,
-  HTML: _chunkRCY6XLGUcjs.ChartHTML
+var PieChart = _chunkMXGLYWVPcjs.attachSubComponents.call(void 0, PieChartWithProvider, {
+  Legend: _chunkXVBH5XHEcjs.Legend,
+  SVG: _chunkTZRUHQOHcjs.ChartSVG,
+  HTML: _chunkTZRUHQOHcjs.ChartHTML
 });
-var PieChartResponsive = _chunkVTS3PNMScjs.attachSubComponents.call(void 0, _chunkASLARV7Lcjs.withResponsive.call(void 0, PieChartWithProvider), {
-  Legend: _chunkRHHVEJHJcjs.Legend,
-  SVG: _chunkRCY6XLGUcjs.ChartSVG,
-  HTML: _chunkRCY6XLGUcjs.ChartHTML
+var PieChartResponsive = _chunkMXGLYWVPcjs.attachSubComponents.call(void 0, _chunkASLARV7Lcjs.withResponsive.call(void 0, PieChartWithProvider), {
+  Legend: _chunkXVBH5XHEcjs.Legend,
+  SVG: _chunkTZRUHQOHcjs.ChartSVG,
+  HTML: _chunkTZRUHQOHcjs.ChartHTML
 });
 
 
 
 
 exports.PieChart = PieChart; exports.PieChartResponsive = PieChartResponsive;
-//# sourceMappingURL=chunk-ZH4F5RMG.cjs.map
+//# sourceMappingURL=chunk-GRA7Y2ZG.cjs.map

package/dist/chunk-GRA7Y2ZG.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-GRA7Y2ZG.cjs","../src/charts/pie-chart/pie-chart.tsx","../src/charts/pie-chart/pie-chart.module.scss"],"names":[],"mappings":"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","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-GRA7Y2ZG.cjs","sourcesContent":[null,"import { Group } from '@visx/group';\nimport { Pie } from '@visx/shape';\nimport { useTooltip, useTooltipInPortal } from '@visx/tooltip';\nimport { __ } from '@wordpress/i18n';\nimport { Stack } from '@wordpress/ui';\nimport clsx from 'clsx';\nimport { useCallback, useContext, useMemo } from 'react';\nimport { Legend, useChartLegendItems } from '../../components/legend';\nimport { BaseTooltip } from '../../components/tooltip';\nimport { useElementSize, useInteractiveLegendData, usePrefersReducedMotion } from '../../hooks';\nimport { GlobalChartsProvider, useChartId, useChartRegistration, useGlobalChartsContext, useGlobalChartsTheme, GlobalChartsContext } from '../../providers';\nimport { attachSubComponents } from '../../utils';\nimport { getStringWidth } from '../../visx/text';\nimport { ChartSVG, ChartHTML, useChartChildren, renderLegendSlot } from '../private/chart-composition';\nimport { RadialWipeAnimation } from '../private/radial-wipe-animation/';\nimport { SingleChartContext } from '../private/single-chart-context';\nimport { withResponsive } from '../private/with-responsive';\nimport styles from './pie-chart.module.scss';\n\n/**\n * Parameters passed to the renderTooltip function for pie charts.\n */\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n/**\n * Default tooltip renderer for pie charts.\n * Renders a BaseTooltip with the hovered segment's data.\n *\n * @param {PieChartRenderTooltipParams} params - The tooltip parameters containing the hovered data point\n * @return {ReactNode} The rendered tooltip content\n */\nconst renderDefaultPieTooltip = ({\n  tooltipData\n}) => {\n  return /*#__PURE__*/_jsx(BaseTooltip, {\n    data: tooltipData,\n    top: 0,\n    left: 0,\n    renderContainer: false\n  });\n};\n\n// Base props type with optional responsive properties\n\n// Composition API types\n\n/**\n * Validates the pie chart data\n * @param data - The data to validate\n * @return Object containing validation result and error message\n */\nconst validateData = data => {\n  if (!data.length) {\n    return {\n      isValid: false,\n      message: 'No data available'\n    };\n  }\n\n  // Check for negative values\n  const hasNegativeValues = data.some(item => item.percentage < 0 || item.value < 0);\n  if (hasNegativeValues) {\n    return {\n      isValid: false,\n      message: 'Invalid data: Negative values are not allowed'\n    };\n  }\n\n  // Validate total percentage\n  const totalPercentage = data.reduce((sum, item) => sum + item.percentage, 0);\n  if (Math.abs(totalPercentage - 100) > 0.01) {\n    // Using small epsilon for floating point comparison\n    return {\n      isValid: false,\n      message: 'Invalid percentage total: Must equal 100'\n    };\n  }\n  return {\n    isValid: true,\n    message: ''\n  };\n};\n\n/**\n * Renders a pie or donut chart using the provided data.\n *\n * @param {PieChartProps} props - Component props\n * @return {JSX.Element} The rendered chart component\n */\nconst PieChartInternal = ({\n  data,\n  chartId: providedChartId,\n  withTooltips = false,\n  className,\n  showLegend = false,\n  legend = {},\n  width: propWidth,\n  height: propHeight,\n  size,\n  animation,\n  thickness = 1,\n  padding = 0,\n  gapScale = 0,\n  cornerScale = 0,\n  showLabels = true,\n  legendValueDisplay = 'percentage',\n  children = null,\n  tooltipOffsetX = 0,\n  tooltipOffsetY = -15,\n  renderTooltip = renderDefaultPieTooltip,\n  gap = 'md'\n}) => {\n  const legendInteractive = legend.interactive ?? false;\n  const legendPosition = legend.position ?? 'bottom';\n  const providerTheme = useGlobalChartsTheme();\n  const chartId = useChartId(providedChartId);\n  const [svgWrapperRef, svgWrapperWidth, svgWrapperHeight] = useElementSize();\n  const {\n    tooltipOpen,\n    tooltipLeft,\n    tooltipTop,\n    tooltipData,\n    hideTooltip,\n    showTooltip\n  } = useTooltip();\n\n  // Set up portal tooltip for better z-index handling\n  // We get containerBounds to cancel out stale offsets in the position calculation\n  const {\n    containerRef,\n    TooltipInPortal,\n    containerBounds\n  } = useTooltipInPortal({\n    detectBounds: true,\n    scroll: true,\n    debounce: 0\n  });\n  const onMouseLeave = useCallback(() => {\n    if (!withTooltips) {\n      return;\n    }\n    hideTooltip();\n  }, [withTooltips, hideTooltip]);\n  const {\n    getElementStyles,\n    isSeriesVisible\n  } = useGlobalChartsContext();\n\n  // Filter and recalculate data for interactive legends\n  const {\n    visibleData,\n    allSegmentsHidden,\n    legendData\n  } = useInteractiveLegendData({\n    data,\n    chartId,\n    legendInteractive,\n    isSeriesVisible\n  });\n\n  // Memoize legend options to prevent unnecessary re-calculations\n  const legendOptions = useMemo(() => ({\n    showValues: true,\n    legendValueDisplay\n  }), [legendValueDisplay]);\n\n  // Create legend items using legendData (has recalculated percentages for visible items)\n  const legendItems = useChartLegendItems(legendData, legendOptions);\n  const {\n    isValid,\n    message\n  } = validateData(data);\n\n  // Process children to extract compound components\n  const {\n    svgChildren,\n    htmlChildren,\n    legendChildren,\n    otherChildren\n  } = useChartChildren(children, 'PieChart');\n\n  // Memoize metadata to prevent unnecessary re-registration\n  const chartMetadata = useMemo(() => ({\n    thickness,\n    gapScale,\n    cornerScale\n  }), [thickness, gapScale, cornerScale]);\n\n  // Register chart with context only if data is valid\n  useChartRegistration({\n    chartId,\n    legendItems,\n    chartType: 'pie',\n    isDataValid: isValid,\n    metadata: chartMetadata\n  });\n  const prefersReducedMotion = usePrefersReducedMotion();\n  if (!isValid) {\n    return /*#__PURE__*/_jsx(\"div\", {\n      className: clsx('pie-chart', styles['pie-chart'], className),\n      children: /*#__PURE__*/_jsx(\"div\", {\n        className: styles['error-message'],\n        children: message\n      })\n    });\n  }\n\n  // Calculate the actual pie size:\n  // - Measure available space from the svg-wrapper\n  // - If size prop provided: use it as max, but shrink if container is smaller\n  // - If no size prop: fill available space\n  const availableWidth = svgWrapperWidth > 0 ? svgWrapperWidth : 300;\n  const availableHeight = svgWrapperHeight > 0 ? svgWrapperHeight : 300;\n  const availableSize = Math.min(availableWidth, availableHeight);\n  const actualSize = size ? Math.min(size, availableSize) : availableSize;\n  const width = actualSize;\n  const height = actualSize;\n\n  // Calculate radius based on width/height\n  const radius = Math.min(width, height) / 2;\n\n  // Center the chart in the available space\n  const centerX = width / 2;\n  const centerY = height / 2;\n\n  // Calculate the angle between each (use original data length for consistent spacing)\n  const padAngle = gapScale * (2 * Math.PI / data.length);\n  const outerRadius = radius - padding;\n  const innerRadius = thickness === 0 ? 0 : outerRadius * (1 - thickness);\n  const maxCornerRadius = (outerRadius - innerRadius) / 2;\n  const cornerRadius = cornerScale ? Math.min(cornerScale * outerRadius, maxCornerRadius) : 0;\n\n  // Map the data to include index for color assignment\n  // When interactive, we need to find the original index to maintain consistent colors\n  const dataWithIndex = visibleData.map(d => {\n    const originalIndex = data.findIndex(item => item.label === d.label);\n    return {\n      ...d,\n      index: originalIndex >= 0 ? originalIndex : 0\n    };\n  });\n  const accessors = {\n    value: d => d.value,\n    fill: d => {\n      return getElementStyles({\n        data: d,\n        index: d.index\n      }).color;\n    }\n  };\n  const legendElement = showLegend && /*#__PURE__*/_jsx(Legend, {\n    orientation: legend.orientation ?? 'horizontal',\n    position: legendPosition,\n    alignment: legend.alignment ?? 'center',\n    labelStyles: legend.labelStyles,\n    itemClassName: legend.itemClassName,\n    itemStyles: legend.itemStyles,\n    shapeStyles: legend.shapeStyles,\n    shape: legend.shape ?? 'circle',\n    chartId: chartId,\n    interactive: legendInteractive\n  });\n  return /*#__PURE__*/_jsx(SingleChartContext.Provider, {\n    value: {\n      chartId,\n      chartWidth: width,\n      chartHeight: height\n    },\n    children: /*#__PURE__*/_jsxs(Stack, {\n      ref: containerRef,\n      direction: \"column\",\n      gap: gap,\n      className: clsx('pie-chart', styles['pie-chart'],\n      // Fill parent when no explicit dimensions provided\n      {\n        [styles['pie-chart--responsive']]: !propWidth && !propHeight\n      }, className),\n      style: {\n        width: propWidth || undefined,\n        height: propHeight || undefined\n      },\n      children: [legendPosition === 'top' && legendElement, renderLegendSlot(legendChildren, 'top'), /*#__PURE__*/_jsx(\"div\", {\n        className: styles['pie-chart__svg-wrapper'],\n        ref: svgWrapperRef,\n        children: /*#__PURE__*/_jsxs(\"svg\", {\n          viewBox: `0 0 ${width} ${height}`,\n          preserveAspectRatio: \"xMidYMid meet\",\n          width: width,\n          height: height,\n          children: [/*#__PURE__*/_jsx(\"defs\", {\n            children: /*#__PURE__*/_jsx(RadialWipeAnimation, {\n              id: `radial-wipe-${chartId}`,\n              radius: outerRadius,\n              innerRadius: innerRadius\n            })\n          }), /*#__PURE__*/_jsxs(Group, {\n            top: centerY,\n            left: centerX,\n            mask: animation && !prefersReducedMotion ? `url(#radial-wipe-${chartId})` : null,\n            children: [allSegmentsHidden ? /*#__PURE__*/_jsx(\"text\", {\n              textAnchor: \"middle\",\n              dy: \".33em\",\n              fill: providerTheme.gridColor || '#ccc',\n              fontSize: \"14\",\n              fontFamily: \"-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif\",\n              children: __('All segments are hidden. Click legend items to show data.', 'jetpack-charts')\n            }) : /*#__PURE__*/_jsx(Pie, {\n              data: dataWithIndex,\n              pieValue: accessors.value,\n              outerRadius: outerRadius,\n              innerRadius: innerRadius,\n              padAngle: padAngle,\n              cornerRadius: cornerRadius,\n              children: pie => {\n                return pie.arcs.map((arc, index) => {\n                  const [centroidX, centroidY] = pie.path.centroid(arc);\n                  const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.25;\n                  const handleMouseMove = event => {\n                    if (!withTooltips) {\n                      return;\n                    }\n\n                    // Don't show tooltip until container bounds are measured\n                    if (containerBounds.width === 0 || containerBounds.height === 0) {\n                      return;\n                    }\n\n                    // Use clientX/Y and subtract containerBounds to cancel out any stale offset.\n                    // TooltipInPortal calculates: tooltipLeft + containerBounds.left + scrollX\n                    // By passing (clientX - containerBounds.left), we get:\n                    // (clientX - containerBounds.left) + containerBounds.left + scrollX = clientX + scrollX\n                    // This gives correct page coordinates regardless of stale bounds.\n                    showTooltip({\n                      tooltipData: arc.data,\n                      tooltipLeft: event.clientX - containerBounds.left + tooltipOffsetX,\n                      tooltipTop: event.clientY - containerBounds.top + tooltipOffsetY\n                    });\n                  };\n                  const pathProps = {\n                    d: pie.path(arc) || '',\n                    fill: accessors.fill(arc.data),\n                    'data-testid': 'pie-segment'\n                  };\n                  const groupProps = {};\n                  if (withTooltips) {\n                    groupProps.onMouseMove = handleMouseMove;\n                    groupProps.onMouseLeave = onMouseLeave;\n                  }\n\n                  // Estimate text width more accurately for background sizing\n                  const fontSize = 12;\n                  const estimatedTextWidth = getStringWidth(arc.data.label, {\n                    fontSize\n                  });\n                  const labelPadding = 6;\n                  const backgroundWidth = estimatedTextWidth + labelPadding * 2;\n                  const backgroundHeight = fontSize + labelPadding * 2;\n                  return /*#__PURE__*/_jsxs(\"g\", {\n                    ...groupProps,\n                    children: [/*#__PURE__*/_jsx(\"path\", {\n                      ...pathProps\n                    }), showLabels && hasSpaceForLabel && /*#__PURE__*/_jsxs(\"g\", {\n                      children: [providerTheme.labelBackgroundColor && /*#__PURE__*/_jsx(\"rect\", {\n                        x: centroidX - backgroundWidth / 2,\n                        y: centroidY - backgroundHeight / 2,\n                        width: backgroundWidth,\n                        height: backgroundHeight,\n                        fill: providerTheme.labelBackgroundColor,\n                        rx: 4,\n                        ry: 4,\n                        pointerEvents: \"none\"\n                      }), /*#__PURE__*/_jsx(\"text\", {\n                        x: centroidX,\n                        y: centroidY,\n                        dy: \".33em\",\n                        fill: providerTheme.labelTextColor || '#333',\n                        fontSize: fontSize,\n                        textAnchor: \"middle\",\n                        pointerEvents: \"none\",\n                        children: arc.data.label\n                      })]\n                    })]\n                  }, `arc-${index}`);\n                });\n              }\n            }), !allSegmentsHidden && svgChildren]\n          })]\n        })\n      }), legendPosition === 'bottom' && legendElement, renderLegendSlot(legendChildren, 'bottom'), withTooltips && tooltipOpen && tooltipData && /*#__PURE__*/_jsx(TooltipInPortal, {\n        top: tooltipTop || 0,\n        left: tooltipLeft || 0,\n        children: /*#__PURE__*/_jsx(\"div\", {\n          role: \"tooltip\",\n          children: renderTooltip({\n            tooltipData\n          })\n        })\n      }), htmlChildren, otherChildren]\n    })\n  });\n};\nconst PieChartWithProvider = props => {\n  const existingContext = useContext(GlobalChartsContext);\n\n  // If we're already in a GlobalChartsProvider context, don't create a new one\n  if (existingContext) {\n    return /*#__PURE__*/_jsx(PieChartInternal, {\n      ...props\n    });\n  }\n\n  // Otherwise, create our own GlobalChartsProvider\n  return /*#__PURE__*/_jsx(GlobalChartsProvider, {\n    children: /*#__PURE__*/_jsx(PieChartInternal, {\n      ...props\n    })\n  });\n};\nPieChartWithProvider.displayName = 'PieChart';\n\n// Create PieChart with composition API\nconst PieChart = attachSubComponents(PieChartWithProvider, {\n  Legend: Legend,\n  SVG: ChartSVG,\n  HTML: ChartHTML\n});\n\n// Create responsive PieChart with composition API\nconst PieChartResponsive = attachSubComponents(withResponsive(PieChartWithProvider), {\n  Legend: Legend,\n  SVG: ChartSVG,\n  HTML: ChartHTML\n});\nexport { PieChartResponsive as default, PieChart as PieChartUnresponsive };","import 'css-chunk:src/charts/pie-chart/pie-chart.module.scss';export default {\n  \"pie-chart\": \"a8ccharts-C-n-Gu\",\n  \"pie-chart--responsive\": \"a8ccharts-IQVR6j\",\n  \"pie-chart__svg-wrapper\": \"a8ccharts-iQ1Rki\"\n};"]}

package/dist/{chunk-DAU3HNEG.js → chunk-JJIMABHT.js}

@@ -6,7 +6,14 @@ function attachSubComponents(Chart, subComponents) {
 // src/utils/date-parsing.ts
 import { parse, parseISO, isValid } from "date-fns";
 var hasTimezone = (dateString) => {
-  return /T.*[Z]$|T.*[+-]\d{2}:?\d{2}$/.test(dateString);
+  const tIndex = dateString.indexOf("T");
+  if (tIndex === -1) {
+    return false;
+  }
+  if (dateString.endsWith("Z")) {
+    return true;
+  }
+  return /[+-]\d{2}:?\d{2}$/.test(dateString.slice(tIndex + 1));
 };
 var parseAsLocalDate = (dateString) => {
   const trimmedString = dateString.trim();
@@ -341,4 +348,4 @@ export {
   lightenHexColor,
   resolveCssVariable
 };
-//# sourceMappingURL=chunk-DAU3HNEG.js.map
+//# sourceMappingURL=chunk-JJIMABHT.js.map

package/dist/chunk-JJIMABHT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/create-composition.ts","../src/utils/date-parsing.ts","../src/utils/format-metric-value.ts","../src/utils/format-percentage.ts","../src/utils/get-longest-tick-width.ts","../src/utils/get-styles.ts","../src/utils/is-safari.ts","../src/utils/merge-themes.ts","../src/utils/color-utils.ts","../src/utils/resolve-css-var.ts"],"sourcesContent":["/**\n * Utility function to create chart components with composition API.\n *\n * This function attaches subcomponents to a chart component to enable\n * dot notation access like <Chart.Legend />, <Chart.Tooltip />, etc.\n *\n * @param Chart         - The main chart component\n * @param subComponents - Object containing subcomponents to attach\n * @return Chart component with attached subcomponents\n */\nexport function attachSubComponents< TChart, TSubComponents extends Record< string, unknown > >(\n\tChart: TChart,\n\tsubComponents: TSubComponents\n): TChart & TSubComponents {\n\treturn Object.assign( Chart, subComponents );\n}\n","/**\n * @file Date parsing utilities using date-fns for local timezone handling\n *\n * This module provides utilities for parsing various date string formats and converting\n * them to local timezone dates using the battle-tested date-fns library. For formats\n * without timezone info, they're treated as local. For formats with timezone info,\n * they're converted to the equivalent local time.\n *\n * Note: And specifically it prevents format `YYYY-MM-DD` being parsed as UTC date.\n *\n * Key Features:\n * - All parsed dates are in local timezone\n * - Converts timezone-aware strings to local equivalent\n * - Robust input validation and error handling using date-fns\n * - TypeScript type safety\n * - Much smaller codebase than custom parsing\n *\n * Supported Formats:\n * - YYYY-MM-DD (treated as local)\n * - YYYY-MM-DD HH:mm:ss (treated as local)\n * - YYYY-MM-DD HH:mm (treated as local)\n * - YYYY-MM-DDTHH:mm:ss (treated as local)\n * - YYYY-MM-DDTHH:mm:ss.SSS (treated as local)\n * - YYYY-MM-DDTHH:mm (treated as local)\n * - YYYY-MM-DDTHH:mm:ssZ (converted to local)\n * - YYYY-MM-DDTHH:mm:ss±HH:mm (converted to local)\n *\n * @example\n * ```typescript\n * parseAsLocalDate(\"2025-01-01\");                     // Local timezone\n * parseAsLocalDate(\"2025-01-01 14:30:00\");            // Local timezone\n * parseAsLocalDate(\"2025-01-01 14:30\");               // Local timezone\n * parseAsLocalDate(\"2025-01-01T14:30:45.123\");        // Local timezone\n * parseAsLocalDate(\"2025-01-01T14:30:00Z\");           // UTC 14:30 → Local equivalent\n * parseAsLocalDate(\"2025-01-01T14:30:00+05:00\");      // +05:00 14:30 → Local equivalent\n * ```\n */\n\nimport { parse, parseISO, isValid } from 'date-fns';\n\n/**\n * Checks if a date string contains timezone information\n * @param {string} dateString - The date string to check for timezone information\n * @return {boolean} True if the date string contains timezone information, false otherwise\n */\nconst hasTimezone = ( dateString: string ): boolean => {\n\tconst tIndex = dateString.indexOf( 'T' );\n\tif ( tIndex === -1 ) {\n\t\treturn false;\n\t}\n\n\tif ( dateString.endsWith( 'Z' ) ) {\n\t\treturn true;\n\t}\n\n\treturn /[+-]\\d{2}:?\\d{2}$/.test( dateString.slice( tIndex + 1 ) );\n};\n\n/**\n * Parses any supported date string format and returns a local timezone date\n *\n * Uses date-fns for robust parsing and validation. For strings without timezone\n * info, treats as local timezone. For strings with timezone info, converts to\n * local timezone equivalent.\n *\n * Supports:\n * - YYYY-MM-DD (local)\n * - YYYY-MM-DD HH:mm:ss (local)\n * - YYYY-MM-DD HH:mm (local)\n * - YYYY-MM-DDTHH:mm:ss (local)\n * - YYYY-MM-DDTHH:mm:ss.SSS (local)\n * - YYYY-MM-DDTHH:mm (local)\n * - YYYY-MM-DDTHH:mm:ssZ (UTC → local)\n * - YYYY-MM-DDTHH:mm:ss±HH:mm (offset → local)\n * @param {string} dateString - The date string to parse into a local timezone date\n * @return {Date} A Date object representing the parsed date in local timezone, or an invalid Date if parsing fails\n */\nexport const parseAsLocalDate = ( dateString: string ): Date => {\n\tconst trimmedString = dateString.trim();\n\n\t// If it has timezone information, parse as ISO and convert to local\n\tif ( hasTimezone( trimmedString ) ) {\n\t\tconst isoDate = parseISO( trimmedString );\n\n\t\tif ( ! isValid( isoDate ) ) {\n\t\t\treturn new Date( NaN );\n\t\t}\n\n\t\t// parseISO automatically converts to local timezone\n\t\treturn isoDate;\n\t}\n\n\t// For naive strings, try different local formats\n\tconst formats = [\n\t\t'yyyy-MM-dd', // 2025-01-01\n\t\t'yyyy-MM-dd HH:mm:ss', // 2025-01-01 14:30:45\n\t\t'yyyy-MM-dd HH:mm', // 2025-01-01 14:30\n\t\t\"yyyy-MM-dd'T'HH:mm:ss\", // 2025-01-01T14:30:45\n\t\t\"yyyy-MM-dd'T'HH:mm:ss.SSS\", // 2025-01-01T14:30:45.123\n\t\t\"yyyy-MM-dd'T'HH:mm\", // 2025-01-01T14:30\n\t];\n\n\tfor ( const format of formats ) {\n\t\tconst result = parse( trimmedString, format, new Date() );\n\t\tif ( isValid( result ) ) {\n\t\t\treturn result;\n\t\t}\n\t}\n\n\t// If no format matched, return invalid date\n\treturn new Date( NaN );\n};\n","import { formatNumberCompact, formatNumber } from '@automattic/number-formatters';\n\n/**\n * Types for formatMetricValue\n */\nexport type MetricValueType = 'number' | 'average' | 'currency';\n\ntype FormatMetricValueOptions = {\n\tdecimals?: number;\n\tuseMultipliers?: boolean;\n\tsignDisplay?: Intl.NumberFormatOptions[ 'signDisplay' ];\n};\n\n/**\n * Format a numeric metric value based on type, precision and scale.\n * Supports currency, number and percentage, using `@automattic/number-formatters`.\n *\n * @param value                  - The value to format\n * @param type                   - The type of formatting to apply\n * @param options                - Formatting options\n * @param options.decimals       - Number of decimal places to show\n * @param options.useMultipliers - Whether to use K, M, B suffixes for large numbers\n * @param options.signDisplay    - Controls when to display the sign (auto, always, never, exceptZero)\n * @return Formatted string\n */\nexport const formatMetricValue = (\n\tvalue: string | number,\n\ttype: MetricValueType = 'number',\n\t{ decimals, useMultipliers = false, signDisplay }: FormatMetricValueOptions = {}\n): string => {\n\tif ( value === null || value === undefined ) {\n\t\treturn '';\n\t}\n\n\tconst numericValue = Number( value );\n\tif ( isNaN( numericValue ) ) {\n\t\treturn '';\n\t}\n\n\tswitch ( type ) {\n\t\tcase 'currency': {\n\t\t\t// Basic currency formatting - can be enhanced with full currency support\n\t\t\tconst formatted = useMultipliers\n\t\t\t\t? formatNumberCompact( numericValue, {\n\t\t\t\t\t\tdecimals: decimals ?? 2,\n\t\t\t\t\t\tnumberFormatOptions: {\n\t\t\t\t\t\t\tmaximumFractionDigits: decimals ?? 2,\n\t\t\t\t\t\t\tsignDisplay,\n\t\t\t\t\t\t},\n\t\t\t\t  } )\n\t\t\t\t: formatNumber( numericValue, {\n\t\t\t\t\t\tdecimals: decimals ?? 2,\n\t\t\t\t\t\tnumberFormatOptions: {\n\t\t\t\t\t\t\tsignDisplay,\n\t\t\t\t\t\t},\n\t\t\t\t  } );\n\t\t\treturn `$${ formatted }`;\n\t\t}\n\n\t\tcase 'average': {\n\t\t\tif ( ! Number.isFinite( numericValue ) ) {\n\t\t\t\treturn '—';\n\t\t\t}\n\n\t\t\treturn formatNumber( numericValue, {\n\t\t\t\tdecimals: decimals ?? 0,\n\t\t\t\tnumberFormatOptions: {\n\t\t\t\t\tstyle: 'percent',\n\t\t\t\t\tsignDisplay: signDisplay ?? 'exceptZero',\n\t\t\t\t},\n\t\t\t} );\n\t\t}\n\n\t\tcase 'number':\n\t\tdefault: {\n\t\t\treturn useMultipliers\n\t\t\t\t? formatNumberCompact( numericValue, {\n\t\t\t\t\t\tdecimals: decimals ?? 0,\n\t\t\t\t\t\tnumberFormatOptions: {\n\t\t\t\t\t\t\tmaximumFractionDigits: decimals ?? 0,\n\t\t\t\t\t\t\tsignDisplay,\n\t\t\t\t\t\t},\n\t\t\t\t  } )\n\t\t\t\t: formatNumber( numericValue, {\n\t\t\t\t\t\tdecimals: decimals ?? 0,\n\t\t\t\t\t\tnumberFormatOptions: {\n\t\t\t\t\t\t\tsignDisplay,\n\t\t\t\t\t\t},\n\t\t\t\t  } );\n\t\t}\n\t}\n};\n","import { formatNumber } from '@automattic/number-formatters';\n\n/**\n * Format a percentage value with smart decimal handling.\n * Uses `@automattic/number-formatters` for consistent formatting.\n * Removes unnecessary trailing zeros and caps at 2 decimal places.\n *\n * @param value - The percentage value (0-100 range)\n * @return Formatted percentage string (e.g., \"30%\", \"30.1%\", \"30.25%\")\n */\nexport const formatPercentage = ( value: number ): string => {\n\t// Use formatNumber with percentage style, but convert from 0-100 range to 0-1 range\n\treturn formatNumber( value / 100, {\n\t\tnumberFormatOptions: {\n\t\t\tstyle: 'percent',\n\t\t\tminimumFractionDigits: 0,\n\t\t\tmaximumFractionDigits: 2,\n\t\t},\n\t} );\n};\n","import { getStringWidth } from '@visx/text';\nimport type { TickFormatter } from '@visx/axis';\nimport type { AnyD3Scale, ScaleInput } from '@visx/scale';\n\n/**\n * Returns the width of the longest tick.\n *\n * @param          ticks      - Ticks to get the width of.\n * @param          formatTick - Function to format the tick.\n * @param {object} labelStyle - Style object for the label.\n * @return {number} - Width of the longest tick.\n */\nexport const getLongestTickWidth = < T extends AnyD3Scale >(\n\tticks: ScaleInput< T >[],\n\tformatTick: TickFormatter< ScaleInput< T > >,\n\tlabelStyle?: object\n) => {\n\tconst formattedTicks = ticks.map( tick => formatTick( tick, 0, [] ) );\n\tconst longestTick = formattedTicks.reduce(\n\t\t( longest, current ) => ( longest.length >= current.length ? longest : current ),\n\t\tformattedTicks[ 0 ]\n\t);\n\n\treturn getStringWidth( longestTick, labelStyle );\n};\n","import type { ChartTheme, SeriesData } from '../types';\nimport type { LegendShape } from '@visx/legend/lib/types';\nimport type { LineStyles } from '@visx/xychart';\n\n/**\n * Utility function to get consolidated line styles for a series\n * This consolidates the logic used by both LineChart and Legend components\n *\n * @param {SeriesData} seriesData    - The series data containing styling options\n * @param {number}     index         - The index of the series in the data array\n * @param {ChartTheme} providerTheme - The chart theme configuration\n * @return {LineStyles} The consolidated line styles for the series\n */\nexport function getSeriesLineStyles(\n\tseriesData: SeriesData,\n\tindex: number,\n\tproviderTheme: ChartTheme\n): LineStyles {\n\t// Get theme-based line styles for line type\n\tconst themeSemanticLineStyle = providerTheme?.lineChart?.lineStyles?.[ seriesData.options?.type ];\n\n\t// Get theme-based line styles for index of series data\n\tconst themeSeriesLineStyle =\n\t\tproviderTheme?.seriesLineStyles?.[ index % providerTheme.seriesLineStyles.length ];\n\n\t// Priority order: custom series style > theme line type style > default theme series style\n\treturn (\n\t\tseriesData.options?.seriesLineStyle ?? themeSemanticLineStyle ?? themeSeriesLineStyle ?? {}\n\t);\n}\n\n/**\n * Utility function to get stroke color for a series\n *\n * @param {SeriesData} seriesData  - The series data containing styling options\n * @param {number}     index       - The index of the series in the data array\n * @param {string[]}   themeColors - Array of theme colors\n * @return {string} The stroke color for the series\n */\nexport function getSeriesStroke(\n\tseriesData: SeriesData,\n\tindex: number,\n\tthemeColors: string[]\n): string {\n\treturn seriesData.options?.stroke ?? themeColors[ index % themeColors.length ];\n}\n\n/**\n * Utility function to get shape styles for a legend item\n *\n * @param {SeriesData}  series      - The series data containing styling options\n * @param {number}      index       - The index of the series in the data array\n * @param {ChartTheme}  theme       - The chart theme configuration\n * @param {LegendShape} legendShape - The shape to use for the item (optional)\n * @return {Record< string, unknown >} The shape styles for the item\n */\nexport function getItemShapeStyles(\n\tseries: SeriesData,\n\tindex: number,\n\ttheme: ChartTheme,\n\tlegendShape?: LegendShape< SeriesData[], number >\n): Record< string, unknown > {\n\tconst seriesShapeStyles = series.options?.legendShapeStyle ?? {};\n\tconst lineStyles = legendShape === 'line' ? getSeriesLineStyles( series, index, theme ) : {};\n\tconst themeShapeStyles = theme.legend?.shapeStyles?.[ index ];\n\n\tconst itemShapeStyles = {\n\t\t...seriesShapeStyles,\n\t\t...lineStyles,\n\t};\n\n\t// Return item shape styles if they are not empty\n\tif (\n\t\tObject.values( itemShapeStyles ).some(\n\t\t\tvalue => value !== undefined && value !== null && value !== ''\n\t\t)\n\t) {\n\t\treturn itemShapeStyles;\n\t}\n\n\t// Fallback to theme shape styles if defined\n\treturn themeShapeStyles ?? {};\n}\n","export const isSafari = () => {\n\tif ( typeof navigator !== 'undefined' && navigator.userAgent ) {\n\t\treturn /^((?!chrome|android).)*safari/i.test( navigator.userAgent );\n\t}\n\treturn false;\n};\n","import deepmerge from 'deepmerge';\nimport type { ChartTheme, CompleteChartTheme } from '../types';\n\n/**\n * Merges chart themes with proper precedence.\n * The second theme (override) takes precedence over the first theme (base).\n *\n * @param baseTheme     - Base theme object\n * @param overrideTheme - Theme to override base with (takes precedence)\n * @return Merged theme with overrideTheme values taking precedence\n */\nexport function mergeThemes(\n\tbaseTheme: CompleteChartTheme,\n\toverrideTheme: Partial< ChartTheme >\n): CompleteChartTheme;\nexport function mergeThemes(\n\tbaseTheme: ChartTheme,\n\toverrideTheme: Partial< ChartTheme >\n): ChartTheme;\nexport function mergeThemes(\n\tbaseTheme: ChartTheme,\n\toverrideTheme: Partial< ChartTheme >\n): ChartTheme {\n\t// Use deepmerge to properly merge nested objects, with overrideTheme taking precedence\n\treturn deepmerge( baseTheme, overrideTheme, {\n\t\t// Ensure arrays are replaced rather than concatenated\n\t\tarrayMerge: ( _destinationArray, sourceArray ) => sourceArray,\n\t} ) as ChartTheme;\n}\n","import { color as d3Color, hsl as d3Hsl } from '@visx/vendor/d3-color';\n\n/**\n * Check if a value is a valid 6-digit hex color\n * @param hex - The value to check\n * @return true if valid hex color format (e.g., '#ff0000')\n */\nexport const isValidHexColor = ( hex: unknown ): hex is string => {\n\treturn typeof hex === 'string' && /^#[0-9a-fA-F]{6}$/.test( hex );\n};\n\n/**\n * Validate hex color format, throwing descriptive errors if invalid\n * @param  hex - The hex color string to validate\n * @throws {Error} if hex string is malformed\n */\nexport const validateHexColor = ( hex: unknown ): void => {\n\tif ( isValidHexColor( hex ) ) {\n\t\treturn;\n\t}\n\n\t// Provide specific error messages for common issues\n\tif ( typeof hex !== 'string' ) {\n\t\tthrow new Error( 'Hex color must be a string' );\n\t}\n\tif ( ! hex.startsWith( '#' ) ) {\n\t\tthrow new Error( 'Hex color must start with #' );\n\t}\n\tif ( hex.length !== 7 ) {\n\t\tthrow new Error( 'Hex color must be 7 characters long (e.g., #ff0000)' );\n\t}\n\tthrow new Error( 'Hex color contains invalid characters. Only 0-9, a-f, A-F are allowed' );\n};\n\n/**\n * Convert hex color to rgba with specified opacity.\n * This is genuinely reusable across chart components.\n * @param  hex   - The hex color string (e.g., '#ff0000')\n * @param  alpha - The opacity value. Values outside the [0, 1] range will be clamped by the underlying d3 color library.\n * @return The rgba color string (e.g., 'rgba(255, 0, 0, 0.5)')\n * @throws {Error} if hex string is malformed or alpha is not a valid number\n */\nexport const hexToRgba = ( hex: string, alpha: number ): string => {\n\tvalidateHexColor( hex );\n\n\tif ( typeof alpha !== 'number' || isNaN( alpha ) ) {\n\t\tthrow new Error( 'Alpha must be a number' );\n\t}\n\n\t// Safe to use non-null assertion since validateHexColor ensures valid hex\n\treturn d3Color( hex )!.copy( { opacity: alpha } ).formatRgb();\n};\n\n/**\n * Calculate the perceptual distance between two HSL colors\n * @param hsl1 - first color in HSL format [h, s, l]\n * @param hsl2 - second color in HSL format [h, s, l]\n * @return distance value (0-100+, lower means more similar)\n */\nexport const getColorDistance = (\n\thsl1: [ number, number, number ],\n\thsl2: [ number, number, number ]\n): number => {\n\tconst [ h1, s1, l1 ] = hsl1;\n\tconst [ h2, s2, l2 ] = hsl2;\n\n\t// Calculate hue difference, accounting for circular nature (0° = 360°)\n\tlet hueDiff = Math.abs( h1 - h2 );\n\thueDiff = Math.min( hueDiff, 360 - hueDiff );\n\n\t// Weight the differences: hue is most important, then lightness, then saturation\n\tconst hueWeight = 2;\n\tconst lightnessWeight = 1;\n\tconst saturationWeight = 0.5;\n\n\treturn Math.sqrt(\n\t\tMath.pow( hueDiff * hueWeight, 2 ) +\n\t\t\tMath.pow( ( l1 - l2 ) * lightnessWeight, 2 ) +\n\t\t\tMath.pow( ( s1 - s2 ) * saturationWeight, 2 )\n\t);\n};\n\n/**\n * Parse an HSL string like 'hsl(120, 50%, 50%)' into an HSL tuple.\n *\n * @param hslString - HSL color string\n * @return HSL tuple [h, s, l] or null if invalid\n */\nexport const parseHslString = ( hslString: string ): [ number, number, number ] | null => {\n\tconst lower = hslString.toLowerCase().trim();\n\n\t// Check prefix - d3-color handles the parsing\n\tif ( ! lower.startsWith( 'hsl(' ) ) {\n\t\treturn null;\n\t}\n\n\tconst parsed = d3Hsl( lower );\n\n\t// d3Hsl returns NaN values for invalid colors\n\tif ( isNaN( parsed.h ) && isNaN( parsed.s ) && isNaN( parsed.l ) ) {\n\t\treturn null;\n\t}\n\n\t// Normalize hue to 0-360 range (d3 may return NaN for achromatic colors)\n\tconst h = isNaN( parsed.h ) ? 0 : ( ( parsed.h % 360 ) + 360 ) % 360;\n\n\t// d3-color uses 0-1 scale, convert to 0-100\n\treturn [ h, parsed.s * 100, parsed.l * 100 ];\n};\n\n/**\n * Parse an RGB string like 'rgb(255, 0, 0)' into a hex color.\n *\n * @param rgbString - RGB color string\n * @return hex color string or null if invalid\n */\nexport const parseRgbString = ( rgbString: string ): string | null => {\n\tconst lower = rgbString.toLowerCase().trim();\n\n\t// Check prefix - only handle rgb(), not rgba()\n\tif ( ! lower.startsWith( 'rgb(' ) || lower.startsWith( 'rgba(' ) ) {\n\t\treturn null;\n\t}\n\n\tconst parsed = d3Color( lower );\n\n\t// d3Color returns null for invalid colors\n\tif ( ! parsed ) {\n\t\treturn null;\n\t}\n\n\t// d3-color clamps values automatically\n\treturn parsed.formatHex();\n};\n\n/**\n * Normalize any CSS color value to a hex color string.\n * Handles hex colors, HSL strings, RGB strings, and CSS variables.\n *\n * @param color      - Any CSS color value\n * @param element    - Optional DOM element for resolving CSS variables\n * @param resolveCss - Function to resolve CSS variables (injected for testability)\n * @return hex color string, or the original value if conversion fails\n */\nexport const normalizeColorToHex = (\n\tcolor: string,\n\telement?: HTMLElement | null,\n\tresolveCss?: ( value: string, el?: HTMLElement | null ) => string | null\n): string => {\n\tif ( ! color || typeof color !== 'string' ) {\n\t\treturn '';\n\t}\n\n\t// Already a valid hex color (6-digit format)\n\tif ( /^#[0-9a-fA-F]{6}$/.test( color ) ) {\n\t\treturn color;\n\t}\n\n\tconst trimmed = color.trim().toLowerCase();\n\n\t// Handle 3-digit hex colors - expand to 6-digit\n\tif ( /^#[0-9a-f]{3}$/i.test( trimmed ) ) {\n\t\tconst r = trimmed[ 1 ];\n\t\tconst g = trimmed[ 2 ];\n\t\tconst b = trimmed[ 3 ];\n\t\treturn `#${ r }${ r }${ g }${ g }${ b }${ b }`;\n\t}\n\n\t// Handle CSS variables - must be resolved before d3-color can parse\n\tif ( trimmed.startsWith( '--' ) || trimmed.startsWith( 'var(' ) ) {\n\t\tif ( resolveCss ) {\n\t\t\tconst resolved = resolveCss( color, element );\n\t\t\tif ( resolved ) {\n\t\t\t\t// Recursively normalize the resolved value\n\t\t\t\treturn normalizeColorToHex( resolved, element, resolveCss );\n\t\t\t}\n\t\t}\n\t\t// Can't resolve CSS variable, return original\n\t\treturn color;\n\t}\n\n\t// Handle HSL and RGB strings using d3-color\n\tif ( trimmed.startsWith( 'hsl(' ) || trimmed.startsWith( 'rgb(' ) ) {\n\t\t// Reject rgba() - we only handle rgb()\n\t\tif ( trimmed.startsWith( 'rgba(' ) ) {\n\t\t\treturn color;\n\t\t}\n\t\tconst parsed = d3Color( trimmed );\n\t\tif ( parsed ) {\n\t\t\treturn parsed.formatHex();\n\t\t}\n\t\treturn color;\n\t}\n\n\t// Unknown format, return as-is\n\treturn color;\n};\n\n/**\n * Lighten a hex color by blending it with white.\n * Useful for creating color gradients or lighter variants.\n *\n * @param  hex   - Hex color string (e.g., '#98C8DF')\n * @param  blend - Blend amount with white (0 = original color, 1 = white)\n * @return Lightened hex color string (e.g., '#cce4ef')\n * @throws {Error} if hex string is malformed\n */\nexport const lightenHexColor = ( hex: string, blend: number ): string => {\n\tvalidateHexColor( hex );\n\n\tconst r = parseInt( hex.slice( 1, 3 ), 16 );\n\tconst g = parseInt( hex.slice( 3, 5 ), 16 );\n\tconst b = parseInt( hex.slice( 5, 7 ), 16 );\n\n\t// Blend with white (255, 255, 255)\n\tconst newR = Math.round( r + ( 255 - r ) * blend );\n\tconst newG = Math.round( g + ( 255 - g ) * blend );\n\tconst newB = Math.round( b + ( 255 - b ) * blend );\n\n\treturn `#${ newR.toString( 16 ).padStart( 2, '0' ) }${ newG\n\t\t.toString( 16 )\n\t\t.padStart( 2, '0' ) }${ newB.toString( 16 ).padStart( 2, '0' ) }`;\n};\n","/**\n * Pattern for valid CSS custom property names (e.g., '--my-color', '--jp-gray-10')\n */\nconst CSS_VAR_NAME_PATTERN = /^--[\\w-]+$/;\n\n/**\n * Resolves a CSS custom property (variable) to its computed value.\n * Handles multiple formats:\n * - Plain variable names: '--my-color'\n * - CSS var() syntax: 'var(--my-color)'\n * - CSS var() with fallback: 'var(--my-color, #ffffff)'\n * - Regular values (returned as-is): '#ffffff', 'red'\n *\n * @param value   - A CSS variable name, var() expression, or regular value\n * @param element - Optional DOM element to resolve the variable from (defaults to document.documentElement)\n * @return The resolved value, fallback value, or null if unresolvable\n */\nexport const resolveCssVariable = (\n\tvalue: string,\n\telement?: HTMLElement | null\n): string | null => {\n\tif ( ! value ) {\n\t\treturn null;\n\t}\n\n\t// Check if it's a var() expression: var(--name) or var(--name, fallback)\n\t// Parse manually to avoid regex backtracking vulnerabilities\n\tif ( value.startsWith( 'var(' ) && value.endsWith( ')' ) ) {\n\t\tconst parsed = parseVarExpression( value );\n\n\t\tif ( parsed ) {\n\t\t\tconst resolved = resolveVariableName( parsed.varName, element );\n\n\t\t\treturn resolved || parsed.fallback;\n\t\t}\n\t}\n\n\t// Check if it's a plain variable name (starts with --)\n\tif ( value.startsWith( '--' ) ) {\n\t\treturn resolveVariableName( value, element );\n\t}\n\n\t// Return regular values as-is (e.g., '#ffffff', 'red')\n\treturn value;\n};\n\n/**\n * Parses a var() expression into its variable name and optional fallback.\n * Uses string manipulation instead of complex regex to avoid ReDoS.\n *\n * @param expr - A var() expression like 'var(--name)' or 'var(--name, fallback)'\n * @return Parsed result or null if invalid\n */\nfunction parseVarExpression( expr: string ): { varName: string; fallback: string | null } | null {\n\t// Remove 'var(' prefix and ')' suffix\n\tconst inner = expr.slice( 4, -1 ).trim();\n\n\tif ( ! inner.startsWith( '--' ) ) {\n\t\treturn null;\n\t}\n\n\t// Find the comma separator (if any)\n\tconst commaIndex = inner.indexOf( ',' );\n\n\tif ( commaIndex === -1 ) {\n\t\t// No fallback: var(--name)\n\t\tconst varName = inner.trim();\n\t\t// Validate variable name format\n\t\tif ( ! CSS_VAR_NAME_PATTERN.test( varName ) ) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn { varName, fallback: null };\n\t}\n\n\t// Has fallback: var(--name, fallback)\n\tconst varName = inner.slice( 0, commaIndex ).trim();\n\n\t// Validate variable name format\n\tif ( ! CSS_VAR_NAME_PATTERN.test( varName ) ) {\n\t\treturn null;\n\t}\n\n\tconst fallback = inner.slice( commaIndex + 1 ).trim();\n\n\treturn { varName, fallback: fallback || null };\n}\n\n/**\n * Resolves a plain CSS variable name to its computed value.\n *\n * @param varName - A CSS variable name like '--my-color'\n * @param element - Optional DOM element to resolve from\n * @return The computed value or null\n */\nfunction resolveVariableName( varName: string, element?: HTMLElement | null ): string | null {\n\tif ( typeof window === 'undefined' || typeof document === 'undefined' ) {\n\t\treturn null;\n\t}\n\n\ttry {\n\t\tconst targetElement = element || document.documentElement;\n\t\tconst computedValue = getComputedStyle( targetElement ).getPropertyValue( varName ).trim();\n\n\t\treturn computedValue || null;\n\t} catch {\n\t\t// Return null if getComputedStyle throws (e.g., detached element)\n\t\treturn null;\n\t}\n}\n"],"mappings":"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","names":["formatNumber","varName"]}

package/dist/{chunk-CZGYJKG6.js → chunk-KJHWXOCZ.js}

@@ -1,6 +1,6 @@
 import {
   Stack
-} from "./chunk-Z26M4V2M.js";
+} from "./chunk-YAFQVVDI.js";
 import {
   GlobalChartsContext,
   GlobalChartsProvider,
@@ -9,11 +9,11 @@ import {
   useGlobalChartsContext,
   useGlobalChartsTheme,
   usePrefersReducedMotion
-} from "./chunk-32DH6JDF.js";
+} from "./chunk-2I67QUIV.js";
 import {
   formatPercentage,
   hexToRgba
-} from "./chunk-DAU3HNEG.js";
+} from "./chunk-JJIMABHT.js";
 
 // src/charts/conversion-funnel-chart/conversion-funnel-chart.tsx
 import { useTooltip, useTooltipInPortal } from "@visx/tooltip";
@@ -418,4 +418,4 @@ ConversionFunnelChartWithProvider.displayName = "ConversionFunnelChart";
 export {
   ConversionFunnelChartWithProvider
 };
-//# sourceMappingURL=chunk-CZGYJKG6.js.map
+//# sourceMappingURL=chunk-KJHWXOCZ.js.map

package/dist/{chunk-6CCZL2JJ.js → chunk-KRWGSOJ2.js}

@@ -1,3 +1,7 @@
+import {
+  Legend
+} from "./chunk-WTQYGUNF.js";
+
 // src/charts/private/chart-composition/chart-svg.tsx
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 var ChartSVG = ({
@@ -20,6 +24,14 @@ var ChartHTML = ({
 };
 ChartHTML.displayName = "Chart.HTML";
 
+// src/charts/private/chart-composition/render-legend-slot.ts
+import { createElement, Fragment } from "react";
+function renderLegendSlot(legendChildren, position) {
+  return legendChildren.filter((l) => l.position === position).map(
+    (l, i) => createElement(Fragment, { key: `legend-${position}-${i}` }, l.element)
+  );
+}
+
 // src/charts/private/chart-composition/use-chart-children.ts
 import { Group } from "@visx/group";
 import { useMemo, Children, isValidElement } from "react";
@@ -27,9 +39,17 @@ function useChartChildren(children, chartType) {
   return useMemo(() => {
     const svg = [];
     const html = [];
+    const legend = [];
     const other = [];
+    const nonLegend = [];
     Children.forEach(children, (child) => {
       if (isValidElement(child)) {
+        if (child.type === Legend) {
+          const rawPosition = child.props?.position;
+          const position = rawPosition === "top" || rawPosition === "bottom" ? rawPosition : "bottom";
+          legend.push({ element: child, position });
+          return;
+        }
         const childType = child.type;
         const displayName = childType?.displayName;
         if (displayName === `${chartType}.SVG` || displayName === "Chart.SVG") {
@@ -50,14 +70,22 @@ function useChartChildren(children, chartType) {
           other.push(child);
         }
       }
+      nonLegend.push(child);
     });
-    return { svgChildren: svg, htmlChildren: html, otherChildren: other };
+    return {
+      svgChildren: svg,
+      htmlChildren: html,
+      legendChildren: legend,
+      otherChildren: other,
+      nonLegendChildren: nonLegend
+    };
   }, [children, chartType]);
 }
 
 export {
   ChartSVG,
   ChartHTML,
+  renderLegendSlot,
   useChartChildren
 };
-//# sourceMappingURL=chunk-6CCZL2JJ.js.map
+//# sourceMappingURL=chunk-KRWGSOJ2.js.map

package/dist/chunk-KRWGSOJ2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/charts/private/chart-composition/chart-svg.tsx","../src/charts/private/chart-composition/chart-html.tsx","../src/charts/private/chart-composition/render-legend-slot.ts","../src/charts/private/chart-composition/use-chart-children.ts"],"sourcesContent":["import { Fragment as _Fragment, jsx as _jsx } from \"react/jsx-runtime\";\n/**\n * Compound component for SVG children in charts.\n * This component serves as a marker for SVG content that should be rendered\n * inside the chart's SVG element. The actual rendering is handled by the parent chart.\n *\n * @param {PropsWithChildren} props          - Component props\n * @param {ReactNode}         props.children - Child elements to render inside the SVG\n * @return {JSX.Element} The children wrapped in a fragment\n */\nexport const ChartSVG = ({\n  children\n}) => {\n  // This component doesn't render directly - its children are extracted by the parent chart\n  // We just return the children as-is\n  return /*#__PURE__*/_jsx(_Fragment, {\n    children: children\n  });\n};\n\n// Set displayName for better debugging and type checking\nChartSVG.displayName = 'Chart.SVG';","import { Fragment as _Fragment, jsx as _jsx } from \"react/jsx-runtime\";\n/**\n * Compound component for HTML children in charts.\n * This component serves as a marker for HTML content that should be rendered\n * outside the chart's SVG element. The actual rendering is handled by the parent chart.\n *\n * @param {PropsWithChildren} props          - Component props\n * @param {ReactNode}         props.children - Child elements to render outside the SVG\n * @return {JSX.Element} The children wrapped in a fragment\n */\nexport const ChartHTML = ({\n  children\n}) => {\n  // This component doesn't render directly - its children are extracted by the parent chart\n  // We just return the children as-is\n  return /*#__PURE__*/_jsx(_Fragment, {\n    children: children\n  });\n};\n\n// Set displayName for better debugging and type checking\nChartHTML.displayName = 'Chart.HTML';","import { createElement, Fragment } from 'react';\nimport type { LegendChild } from './use-chart-children';\nimport type { LegendPosition } from '../../../types';\nimport type { ReactNode } from 'react';\n\n/**\n * Renders legend children filtered by position slot.\n *\n * @param {LegendChild[]}  legendChildren - The legend children to filter and render\n * @param {LegendPosition} position       - The position slot to render\n * @return {ReactNode[]} Array of legend elements for the given position\n */\nexport function renderLegendSlot(\n\tlegendChildren: LegendChild[],\n\tposition: LegendPosition\n): ReactNode[] {\n\treturn legendChildren\n\t\t.filter( l => l.position === position )\n\t\t.map( ( l, i ) =>\n\t\t\tcreateElement( Fragment, { key: `legend-${ position }-${ i }` }, l.element )\n\t\t);\n}\n","import { Group } from '@visx/group';\nimport { useMemo, Children, isValidElement } from 'react';\nimport { Legend } from '../../../components/legend';\nimport type { LegendPosition } from '../../../types';\nimport type { ReactElement, ReactNode } from 'react';\n\nexport type LegendChild = {\n\telement: ReactElement;\n\tposition: LegendPosition;\n};\n\ninterface ChartChildren {\n\tsvgChildren: ReactNode[];\n\thtmlChildren: ReactNode[];\n\tlegendChildren: LegendChild[];\n\totherChildren: ReactNode[];\n\t/** All children except Legend, in original order. */\n\tnonLegendChildren: ReactNode[];\n}\n\n/**\n * Custom hook to process and categorize chart children for composition API.\n * Extracts children from compound components (Chart.SVG, Chart.HTML) and\n * maintains backward compatibility with legacy Group components.\n *\n * @param {ReactNode} children  - The children prop from the chart component\n * @param {string}    chartType - The type of chart (e.g., 'PieChart', 'BarChart')\n * @return {ChartChildren} Categorized children for rendering\n */\nexport function useChartChildren( children: ReactNode, chartType: string ): ChartChildren {\n\treturn useMemo( () => {\n\t\tconst svg: ReactNode[] = [];\n\t\tconst html: ReactNode[] = [];\n\t\tconst legend: LegendChild[] = [];\n\t\tconst other: ReactNode[] = [];\n\t\tconst nonLegend: ReactNode[] = [];\n\n\t\tChildren.forEach( children, child => {\n\t\t\tif ( isValidElement( child ) ) {\n\t\t\t\t// Extract Legend children for position-based slot rendering\n\t\t\t\tif ( child.type === Legend ) {\n\t\t\t\t\tconst rawPosition = child.props?.position;\n\t\t\t\t\tconst position =\n\t\t\t\t\t\trawPosition === 'top' || rawPosition === 'bottom' ? rawPosition : 'bottom';\n\n\t\t\t\t\tlegend.push( { element: child as ReactElement, position } );\n\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Check displayName for compound components\n\t\t\t\tconst childType = child.type as { displayName?: string };\n\t\t\t\tconst displayName = childType?.displayName;\n\n\t\t\t\t// Handle chart-specific compound components (e.g., PieChart.SVG)\n\t\t\t\tif ( displayName === `${ chartType }.SVG` || displayName === 'Chart.SVG' ) {\n\t\t\t\t\t// Extract children from Chart.SVG with safety checks\n\t\t\t\t\tif ( child.props?.children ) {\n\t\t\t\t\t\tChildren.forEach( child.props.children, svgChild => {\n\t\t\t\t\t\t\tsvg.push( svgChild );\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t} else if ( displayName === `${ chartType }.HTML` || displayName === 'Chart.HTML' ) {\n\t\t\t\t\t// Extract children from Chart.HTML with safety checks\n\t\t\t\t\tif ( child.props?.children ) {\n\t\t\t\t\t\tChildren.forEach( child.props.children, htmlChild => {\n\t\t\t\t\t\t\thtml.push( htmlChild );\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t} else if ( child.type === Group ) {\n\t\t\t\t\t// Legacy support: still check for Group type for backward compatibility\n\t\t\t\t\tsvg.push( child );\n\t\t\t\t} else {\n\t\t\t\t\tother.push( child );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Preserve original order of all non-Legend children\n\t\t\tnonLegend.push( child );\n\t\t} );\n\n\t\treturn {\n\t\t\tsvgChildren: svg,\n\t\t\thtmlChildren: html,\n\t\t\tlegendChildren: legend,\n\t\t\totherChildren: other,\n\t\t\tnonLegendChildren: nonLegend,\n\t\t};\n\t}, [ children, chartType ] );\n}\n"],"mappings":";;;;;AAAA,SAAS,YAAY,WAAW,OAAO,YAAY;AAU5C,IAAM,WAAW,CAAC;AAAA,EACvB;AACF,MAAM;AAGJ,SAAoB,qBAAK,WAAW;AAAA,IAClC;AAAA,EACF,CAAC;AACH;AAGA,SAAS,cAAc;;;ACrBvB,SAAS,YAAYA,YAAW,OAAOC,aAAY;AAU5C,IAAM,YAAY,CAAC;AAAA,EACxB;AACF,MAAM;AAGJ,SAAoB,gBAAAA,MAAKD,YAAW;AAAA,IAClC;AAAA,EACF,CAAC;AACH;AAGA,UAAU,cAAc;;;ACrBxB,SAAS,eAAe,gBAAgB;AAYjC,SAAS,iBACf,gBACA,UACc;AACd,SAAO,eACL,OAAQ,OAAK,EAAE,aAAa,QAAS,EACrC;AAAA,IAAK,CAAE,GAAG,MACV,cAAe,UAAU,EAAE,KAAK,UAAW,QAAS,IAAK,CAAE,GAAG,GAAG,EAAE,OAAQ;AAAA,EAC5E;AACF;;;ACrBA,SAAS,aAAa;AACtB,SAAS,SAAS,UAAU,sBAAsB;AA4B3C,SAAS,iBAAkB,UAAqB,WAAmC;AACzF,SAAO,QAAS,MAAM;AACrB,UAAM,MAAmB,CAAC;AAC1B,UAAM,OAAoB,CAAC;AAC3B,UAAM,SAAwB,CAAC;AAC/B,UAAM,QAAqB,CAAC;AAC5B,UAAM,YAAyB,CAAC;AAEhC,aAAS,QAAS,UAAU,WAAS;AACpC,UAAK,eAAgB,KAAM,GAAI;AAE9B,YAAK,MAAM,SAAS,QAAS;AAC5B,gBAAM,cAAc,MAAM,OAAO;AACjC,gBAAM,WACL,gBAAgB,SAAS,gBAAgB,WAAW,cAAc;AAEnE,iBAAO,KAAM,EAAE,SAAS,OAAuB,SAAS,CAAE;AAE1D;AAAA,QACD;AAGA,cAAM,YAAY,MAAM;AACxB,cAAM,cAAc,WAAW;AAG/B,YAAK,gBAAgB,GAAI,SAAU,UAAU,gBAAgB,aAAc;AAE1E,cAAK,MAAM,OAAO,UAAW;AAC5B,qBAAS,QAAS,MAAM,MAAM,UAAU,cAAY;AACnD,kBAAI,KAAM,QAAS;AAAA,YACpB,CAAE;AAAA,UACH;AAAA,QACD,WAAY,gBAAgB,GAAI,SAAU,WAAW,gBAAgB,cAAe;AAEnF,cAAK,MAAM,OAAO,UAAW;AAC5B,qBAAS,QAAS,MAAM,MAAM,UAAU,eAAa;AACpD,mBAAK,KAAM,SAAU;AAAA,YACtB,CAAE;AAAA,UACH;AAAA,QACD,WAAY,MAAM,SAAS,OAAQ;AAElC,cAAI,KAAM,KAAM;AAAA,QACjB,OAAO;AACN,gBAAM,KAAM,KAAM;AAAA,QACnB;AAAA,MACD;AAGA,gBAAU,KAAM,KAAM;AAAA,IACvB,CAAE;AAEF,WAAO;AAAA,MACN,aAAa;AAAA,MACb,cAAc;AAAA,MACd,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,mBAAmB;AAAA,IACpB;AAAA,EACD,GAAG,CAAE,UAAU,SAAU,CAAE;AAC5B;","names":["_Fragment","_jsx"]}

package/dist/{chunk-V36ERY7Y.js → chunk-LTFH7SEG.js}

@@ -4,33 +4,36 @@ import {
 import {
   ChartHTML,
   ChartSVG,
+  renderLegendSlot,
   useChartChildren
-} from "./chunk-6CCZL2JJ.js";
+} from "./chunk-KRWGSOJ2.js";
+import {
+  Legend,
+  SingleChartContext,
+  useChartLegendItems
+} from "./chunk-WTQYGUNF.js";
 import {
   BaseTooltip
 } from "./chunk-BPYKWMI7.js";
 import {
   Stack
-} from "./chunk-Z26M4V2M.js";
+} from "./chunk-YAFQVVDI.js";
 import {
   withResponsive
 } from "./chunk-OP6PHB2U.js";
 import {
   GlobalChartsContext,
   GlobalChartsProvider,
-  Legend,
-  SingleChartContext,
   useChartId,
-  useChartLegendItems,
   useChartRegistration,
   useElementSize,
   useGlobalChartsContext,
   useInteractiveLegendData,
   usePrefersReducedMotion
-} from "./chunk-32DH6JDF.js";
+} from "./chunk-2I67QUIV.js";
 import {
   attachSubComponents
-} from "./chunk-DAU3HNEG.js";
+} from "./chunk-JJIMABHT.js";
 
 // src/charts/pie-semi-circle-chart/pie-semi-circle-chart.tsx
 import { Group } from "@visx/group";
@@ -99,15 +102,8 @@ var PieSemiCircleChartInternal = ({
   clockwise = true,
   withTooltips = false,
   showLegend = false,
-  legendOrientation = "horizontal",
-  legendPosition = "bottom",
-  legendAlignment = "center",
-  legendMaxWidth,
-  legendTextOverflow = "wrap",
-  legendItemClassName,
-  legendShape = "circle",
+  legend = {},
   legendValueDisplay = "percentage",
-  legendInteractive = false,
   label,
   animation,
   note,
@@ -118,6 +114,8 @@ var PieSemiCircleChartInternal = ({
   renderTooltip = renderDefaultPieSemiCircleTooltip,
   gap = "md"
 }) => {
+  const legendInteractive = legend.interactive ?? false;
+  const legendPosition = legend.position ?? "bottom";
   const chartId = useChartId(providedChartId);
   const [svgWrapperRef, svgWrapperWidth, svgWrapperHeight] = useElementSize();
   const {
@@ -187,6 +185,7 @@ var PieSemiCircleChartInternal = ({
   const {
     svgChildren,
     htmlChildren,
+    legendChildren,
     otherChildren
   } = useChartChildren(children, "PieSemiCircleChart");
   const chartMetadata = useMemo(() => ({
@@ -236,15 +235,14 @@ var PieSemiCircleChartInternal = ({
   const startAngle = clockwise ? -Math.PI / 2 : Math.PI / 2;
   const endAngle = clockwise ? Math.PI / 2 : -Math.PI / 2;
   const legendElement = showLegend && /* @__PURE__ */ _jsx(Legend, {
-    orientation: legendOrientation,
+    orientation: legend.orientation ?? "horizontal",
     position: legendPosition,
-    alignment: legendAlignment,
-    labelStyles: {
-      maxWidth: legendMaxWidth,
-      textOverflow: legendTextOverflow
-    },
-    itemClassName: legendItemClassName,
-    shape: legendShape,
+    alignment: legend.alignment ?? "center",
+    labelStyles: legend.labelStyles,
+    itemClassName: legend.itemClassName,
+    itemStyles: legend.itemStyles,
+    shapeStyles: legend.shapeStyles,
+    shape: legend.shape ?? "circle",
     chartId,
     interactive: legendInteractive
   });
@@ -265,7 +263,7 @@ var PieSemiCircleChartInternal = ({
         width: propWidth || void 0,
         height: propHeight || void 0
       },
-      children: [legendPosition === "top" && legendElement, /* @__PURE__ */ _jsx("div", {
+      children: [legendPosition === "top" && legendElement, renderLegendSlot(legendChildren, "top"), /* @__PURE__ */ _jsx("div", {
         ref: svgWrapperRef,
         className: pie_semi_circle_chart_module_default["pie-semi-circle-chart__svg-wrapper"],
         children: /* @__PURE__ */ _jsxs("svg", {
@@ -330,7 +328,7 @@ var PieSemiCircleChartInternal = ({
             })
           })]
         })
-      }), legendPosition !== "top" && legendElement, withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ _jsx(TooltipInPortal, {
+      }), legendPosition === "bottom" && legendElement, renderLegendSlot(legendChildren, "bottom"), withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ _jsx(TooltipInPortal, {
         top: tooltipTop || 0,
         left: tooltipLeft || 0,
         children: /* @__PURE__ */ _jsx("div", {
@@ -372,4 +370,4 @@ export {
   PieSemiCircleChart,
   PieSemiCircleChartResponsive
 };
-//# sourceMappingURL=chunk-V36ERY7Y.js.map
+//# sourceMappingURL=chunk-LTFH7SEG.js.map