@automattic/charts 0.56.5 → 0.56.7

package/dist/{chunk-X6GX4QUJ.js → chunk-KHQPN77E.js}

@@ -1,6 +1,6 @@
 import {
   Stack
-} from "./chunk-MEIVKY4K.js";
+} from "./chunk-IS5YYLTV.js";
 import {
   GlobalChartsContext,
   GlobalChartsProvider,
@@ -9,7 +9,7 @@ import {
   useGlobalChartsContext,
   useGlobalChartsTheme,
   usePrefersReducedMotion
-} from "./chunk-32ESS4MV.js";
+} from "./chunk-RFSHE3HL.js";
 import {
   formatPercentage,
   hexToRgba
@@ -418,4 +418,4 @@ ConversionFunnelChartWithProvider.displayName = "ConversionFunnelChart";
 export {
   ConversionFunnelChartWithProvider
 };
-//# sourceMappingURL=chunk-X6GX4QUJ.js.map
+//# sourceMappingURL=chunk-KHQPN77E.js.map

package/dist/{chunk-SEKPIG5K.js → chunk-KNIMXN6Z.js}

@@ -1,4 +1,4 @@
-// ../../../node_modules/.pnpm/@wordpress+element@6.39.0/node_modules/@wordpress/element/build-module/react.mjs
+// ../../../node_modules/.pnpm/@wordpress+element@6.40.0/node_modules/@wordpress/element/build-module/react.mjs
 import {
   Children,
   cloneElement,
@@ -48,4 +48,4 @@ export {
   useRef,
   useState
 };
-//# sourceMappingURL=chunk-SEKPIG5K.js.map
+//# sourceMappingURL=chunk-KNIMXN6Z.js.map

package/dist/{chunk-SEKPIG5K.js.map → chunk-KNIMXN6Z.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../../../node_modules/.pnpm/@wordpress+element@6.39.0/node_modules/@wordpress/element/src/react.ts"],"sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line @typescript-eslint/no-restricted-imports\nimport {\n\tChildren,\n\tcloneElement,\n\tComponent,\n\tcreateContext,\n\tcreateElement,\n\tcreateRef,\n\tforwardRef,\n\tFragment,\n\tisValidElement,\n\tmemo,\n\tPureComponent,\n\tStrictMode,\n\tuseCallback,\n\tuseContext,\n\tuseDebugValue,\n\tuseDeferredValue,\n\tuseEffect,\n\tuseId,\n\tuseMemo,\n\tuseImperativeHandle,\n\tuseInsertionEffect,\n\tuseLayoutEffect,\n\tuseReducer,\n\tuseRef,\n\tuseState,\n\tuseSyncExternalStore,\n\tuseTransition,\n\tstartTransition,\n\tlazy,\n\tSuspense,\n} from 'react';\nimport type { ReactNode } from 'react';\n\n/**\n * Object containing a React element.\n */\nexport type Element = React.ReactElement;\n\n/**\n * Object containing a React component.\n */\nexport type ComponentType< T = any > = React.ComponentType< T >;\n\n/**\n * Object containing a React synthetic event.\n */\nexport type SyntheticEvent< T = Element > = React.SyntheticEvent< T >;\n\n/**\n * Object containing a React ref object.\n */\nexport type RefObject< T > = React.RefObject< T >;\n\n/**\n * Object containing a React ref callback.\n */\nexport type RefCallback< T > = React.RefCallback< T >;\n\n/**\n * Object containing a React ref.\n */\nexport type Ref< T > = React.Ref< T >;\n\n/**\n * Object that provides utilities for dealing with React children.\n */\nexport { Children };\n\n/**\n * Creates a copy of an element with extended props.\n *\n * @param {Element} element Element\n * @param {?Object} props   Props to apply to cloned element\n *\n * @return {Element} Cloned element.\n */\nexport { cloneElement };\n\n/**\n * A base class to create WordPress Components (Refs, state and lifecycle hooks)\n */\nexport { Component };\n\n/**\n * Creates a context object containing two components: a provider and consumer.\n *\n * @param {Object} defaultValue A default data stored in the context.\n *\n * @return {Object} Context object.\n */\nexport { createContext };\n\n/**\n * Returns a new element of given type. Type can be either a string tag name or\n * another function which itself returns an element.\n *\n * @param {?(string|Function)} type     Tag name or element creator\n * @param {Object}             props    Element properties, either attribute\n *                                      set to apply to DOM node or values to\n *                                      pass through to element creator\n * @param {...Element}         children Descendant elements\n *\n * @return {Element} Element.\n */\nexport { createElement };\n\n/**\n * Returns an object tracking a reference to a rendered element via its\n * `current` property as either a DOMElement or Element, dependent upon the\n * type of element rendered with the ref attribute.\n *\n * @return {Object} Ref object.\n */\nexport { createRef };\n\n/**\n * Component enhancer used to enable passing a ref to its wrapped component.\n * Pass a function argument which receives `props` and `ref` as its arguments,\n * returning an element using the forwarded ref. The return value is a new\n * component which forwards its ref.\n *\n * @param {Function} forwarder Function passed `props` and `ref`, expected to\n *                             return an element.\n *\n * @return {Component} Enhanced component.\n */\nexport { forwardRef };\n\n/**\n * A component which renders its children without any wrapping element.\n */\nexport { Fragment };\n\n/**\n * Checks if an object is a valid React Element.\n *\n * @param {Object} objectToCheck The object to be checked.\n *\n * @return {boolean} true if objectToTest is a valid React Element and false otherwise.\n */\nexport { isValidElement };\n\n/**\n * @see https://react.dev/reference/react/memo\n */\nexport { memo };\n\n/**\n * Component that activates additional checks and warnings for its descendants.\n */\nexport { StrictMode };\n\n/**\n * @see https://react.dev/reference/react/useCallback\n */\nexport { useCallback };\n\n/**\n * @see https://react.dev/reference/react/useContext\n */\nexport { useContext };\n\n/**\n * @see https://react.dev/reference/react/useDebugValue\n */\nexport { useDebugValue };\n\n/**\n * @see https://react.dev/reference/react/useDeferredValue\n */\nexport { useDeferredValue };\n\n/**\n * @see https://react.dev/reference/react/useEffect\n */\nexport { useEffect };\n\n/**\n * @see https://react.dev/reference/react/useId\n */\nexport { useId };\n\n/**\n * @see https://react.dev/reference/react/useImperativeHandle\n */\nexport { useImperativeHandle };\n\n/**\n * @see https://react.dev/reference/react/useInsertionEffect\n */\nexport { useInsertionEffect };\n\n/**\n * @see https://react.dev/reference/react/useLayoutEffect\n */\nexport { useLayoutEffect };\n\n/**\n * @see https://react.dev/reference/react/useMemo\n */\nexport { useMemo };\n\n/**\n * @see https://react.dev/reference/react/useReducer\n */\nexport { useReducer };\n\n/**\n * @see https://react.dev/reference/react/useRef\n */\nexport { useRef };\n\n/**\n * @see https://react.dev/reference/react/useState\n */\nexport { useState };\n\n/**\n * @see https://react.dev/reference/react/useSyncExternalStore\n */\nexport { useSyncExternalStore };\n\n/**\n * @see https://react.dev/reference/react/useTransition\n */\nexport { useTransition };\n\n/**\n * @see https://react.dev/reference/react/startTransition\n */\nexport { startTransition };\n\n/**\n * @see https://react.dev/reference/react/lazy\n */\nexport { lazy };\n\n/**\n * @see https://react.dev/reference/react/Suspense\n */\nexport { Suspense };\n\n/**\n * @see https://react.dev/reference/react/PureComponent\n */\nexport { PureComponent };\n\n/**\n * Concatenate two or more React children objects.\n *\n * @param childrenArguments - Array of children arguments (array of arrays/strings/objects) to concatenate.\n * @return The concatenated value.\n */\nexport function concatChildren(\n\t...childrenArguments: ReactNode[][]\n): ReactNode[] {\n\treturn childrenArguments.reduce< ReactNode[] >(\n\t\t( accumulator, children, i ) => {\n\t\t\tChildren.forEach( children, ( child, j ) => {\n\t\t\t\tif ( isValidElement( child ) && typeof child !== 'string' ) {\n\t\t\t\t\tchild = cloneElement( child, {\n\t\t\t\t\t\tkey: [ i, j ].join(),\n\t\t\t\t\t} );\n\t\t\t\t}\n\n\t\t\t\taccumulator.push( child );\n\t\t\t} );\n\n\t\t\treturn accumulator;\n\t\t},\n\t\t[]\n\t);\n}\n\n/**\n * Switches the nodeName of all the elements in the children object.\n *\n * @param children Children object.\n * @param nodeName Node name.\n *\n * @return  The updated children object.\n */\nexport function switchChildrenNodeName(\n\tchildren: ReactNode,\n\tnodeName: string\n): ReactNode {\n\treturn (\n\t\tchildren &&\n\t\tChildren.map( children, ( elt, index ) => {\n\t\t\tif ( typeof elt?.valueOf() === 'string' ) {\n\t\t\t\treturn createElement( nodeName, { key: index }, elt );\n\t\t\t}\n\t\t\tif ( ! isValidElement( elt ) ) {\n\t\t\t\treturn elt;\n\t\t\t}\n\n\t\t\tconst { children: childrenProp, ...props } = elt.props;\n\t\t\treturn createElement(\n\t\t\t\tnodeName,\n\t\t\t\t{ key: index, ...props },\n\t\t\t\tchildrenProp\n\t\t\t);\n\t\t} )\n\t);\n}\n"],"mappings":";AAIA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;OACM;","names":[]}
+{"version":3,"sources":["../../../../node_modules/.pnpm/@wordpress+element@6.40.0/node_modules/@wordpress/element/src/react.ts"],"sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line @typescript-eslint/no-restricted-imports\nimport {\n\tChildren,\n\tcloneElement,\n\tComponent,\n\tcreateContext,\n\tcreateElement,\n\tcreateRef,\n\tforwardRef,\n\tFragment,\n\tisValidElement,\n\tmemo,\n\tPureComponent,\n\tStrictMode,\n\tuseCallback,\n\tuseContext,\n\tuseDebugValue,\n\tuseDeferredValue,\n\tuseEffect,\n\tuseId,\n\tuseMemo,\n\tuseImperativeHandle,\n\tuseInsertionEffect,\n\tuseLayoutEffect,\n\tuseReducer,\n\tuseRef,\n\tuseState,\n\tuseSyncExternalStore,\n\tuseTransition,\n\tstartTransition,\n\tlazy,\n\tSuspense,\n} from 'react';\nimport type { ReactNode } from 'react';\n\n/**\n * Object containing a React element.\n */\nexport type Element = React.ReactElement;\n\n/**\n * Object containing a React component.\n */\nexport type ComponentType< T = any > = React.ComponentType< T >;\n\n/**\n * Object containing a React synthetic event.\n */\nexport type SyntheticEvent< T = Element > = React.SyntheticEvent< T >;\n\n/**\n * Object containing a React ref object.\n */\nexport type RefObject< T > = React.RefObject< T >;\n\n/**\n * Object containing a React ref callback.\n */\nexport type RefCallback< T > = React.RefCallback< T >;\n\n/**\n * Object containing a React ref.\n */\nexport type Ref< T > = React.Ref< T >;\n\n/**\n * Object that provides utilities for dealing with React children.\n */\nexport { Children };\n\n/**\n * Creates a copy of an element with extended props.\n *\n * @param {Element} element Element\n * @param {?Object} props   Props to apply to cloned element\n *\n * @return {Element} Cloned element.\n */\nexport { cloneElement };\n\n/**\n * A base class to create WordPress Components (Refs, state and lifecycle hooks)\n */\nexport { Component };\n\n/**\n * Creates a context object containing two components: a provider and consumer.\n *\n * @param {Object} defaultValue A default data stored in the context.\n *\n * @return {Object} Context object.\n */\nexport { createContext };\n\n/**\n * Returns a new element of given type. Type can be either a string tag name or\n * another function which itself returns an element.\n *\n * @param {?(string|Function)} type     Tag name or element creator\n * @param {Object}             props    Element properties, either attribute\n *                                      set to apply to DOM node or values to\n *                                      pass through to element creator\n * @param {...Element}         children Descendant elements\n *\n * @return {Element} Element.\n */\nexport { createElement };\n\n/**\n * Returns an object tracking a reference to a rendered element via its\n * `current` property as either a DOMElement or Element, dependent upon the\n * type of element rendered with the ref attribute.\n *\n * @return {Object} Ref object.\n */\nexport { createRef };\n\n/**\n * Component enhancer used to enable passing a ref to its wrapped component.\n * Pass a function argument which receives `props` and `ref` as its arguments,\n * returning an element using the forwarded ref. The return value is a new\n * component which forwards its ref.\n *\n * @param {Function} forwarder Function passed `props` and `ref`, expected to\n *                             return an element.\n *\n * @return {Component} Enhanced component.\n */\nexport { forwardRef };\n\n/**\n * A component which renders its children without any wrapping element.\n */\nexport { Fragment };\n\n/**\n * Checks if an object is a valid React Element.\n *\n * @param {Object} objectToCheck The object to be checked.\n *\n * @return {boolean} true if objectToTest is a valid React Element and false otherwise.\n */\nexport { isValidElement };\n\n/**\n * @see https://react.dev/reference/react/memo\n */\nexport { memo };\n\n/**\n * Component that activates additional checks and warnings for its descendants.\n */\nexport { StrictMode };\n\n/**\n * @see https://react.dev/reference/react/useCallback\n */\nexport { useCallback };\n\n/**\n * @see https://react.dev/reference/react/useContext\n */\nexport { useContext };\n\n/**\n * @see https://react.dev/reference/react/useDebugValue\n */\nexport { useDebugValue };\n\n/**\n * @see https://react.dev/reference/react/useDeferredValue\n */\nexport { useDeferredValue };\n\n/**\n * @see https://react.dev/reference/react/useEffect\n */\nexport { useEffect };\n\n/**\n * @see https://react.dev/reference/react/useId\n */\nexport { useId };\n\n/**\n * @see https://react.dev/reference/react/useImperativeHandle\n */\nexport { useImperativeHandle };\n\n/**\n * @see https://react.dev/reference/react/useInsertionEffect\n */\nexport { useInsertionEffect };\n\n/**\n * @see https://react.dev/reference/react/useLayoutEffect\n */\nexport { useLayoutEffect };\n\n/**\n * @see https://react.dev/reference/react/useMemo\n */\nexport { useMemo };\n\n/**\n * @see https://react.dev/reference/react/useReducer\n */\nexport { useReducer };\n\n/**\n * @see https://react.dev/reference/react/useRef\n */\nexport { useRef };\n\n/**\n * @see https://react.dev/reference/react/useState\n */\nexport { useState };\n\n/**\n * @see https://react.dev/reference/react/useSyncExternalStore\n */\nexport { useSyncExternalStore };\n\n/**\n * @see https://react.dev/reference/react/useTransition\n */\nexport { useTransition };\n\n/**\n * @see https://react.dev/reference/react/startTransition\n */\nexport { startTransition };\n\n/**\n * @see https://react.dev/reference/react/lazy\n */\nexport { lazy };\n\n/**\n * @see https://react.dev/reference/react/Suspense\n */\nexport { Suspense };\n\n/**\n * @see https://react.dev/reference/react/PureComponent\n */\nexport { PureComponent };\n\n/**\n * Concatenate two or more React children objects.\n *\n * @param childrenArguments - Array of children arguments (array of arrays/strings/objects) to concatenate.\n * @return The concatenated value.\n */\nexport function concatChildren(\n\t...childrenArguments: ReactNode[][]\n): ReactNode[] {\n\treturn childrenArguments.reduce< ReactNode[] >(\n\t\t( accumulator, children, i ) => {\n\t\t\tChildren.forEach( children, ( child, j ) => {\n\t\t\t\tif ( isValidElement( child ) && typeof child !== 'string' ) {\n\t\t\t\t\tchild = cloneElement( child, {\n\t\t\t\t\t\tkey: [ i, j ].join(),\n\t\t\t\t\t} );\n\t\t\t\t}\n\n\t\t\t\taccumulator.push( child );\n\t\t\t} );\n\n\t\t\treturn accumulator;\n\t\t},\n\t\t[]\n\t);\n}\n\n/**\n * Switches the nodeName of all the elements in the children object.\n *\n * @param children Children object.\n * @param nodeName Node name.\n *\n * @return  The updated children object.\n */\nexport function switchChildrenNodeName(\n\tchildren: ReactNode,\n\tnodeName: string\n): ReactNode {\n\treturn (\n\t\tchildren &&\n\t\tChildren.map( children, ( elt, index ) => {\n\t\t\tif ( typeof elt?.valueOf() === 'string' ) {\n\t\t\t\treturn createElement( nodeName, { key: index }, elt );\n\t\t\t}\n\t\t\tif ( ! isValidElement( elt ) ) {\n\t\t\t\treturn elt;\n\t\t\t}\n\n\t\t\tconst { children: childrenProp, ...props } = elt.props;\n\t\t\treturn createElement(\n\t\t\t\tnodeName,\n\t\t\t\t{ key: index, ...props },\n\t\t\t\tchildrenProp\n\t\t\t);\n\t\t} )\n\t);\n}\n"],"mappings":";AAIA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;OACM;","names":[]}

package/dist/{chunk-AFWQR3SM.js → chunk-MDRCAGKZ.js}

@@ -1,13 +1,13 @@
 import {
   BarChart
-} from "./chunk-KXSLMOW5.js";
+} from "./chunk-SSFFCBCF.js";
 import {
   withResponsive
-} from "./chunk-TYIH5LMV.js";
+} from "./chunk-OP6PHB2U.js";
 import {
   GlobalChartsContext,
   GlobalChartsProvider
-} from "./chunk-32ESS4MV.js";
+} from "./chunk-RFSHE3HL.js";
 
 // src/charts/bar-list-chart/bar-list-chart.tsx
 import { formatNumberCompact } from "@automattic/number-formatters";
@@ -216,4 +216,4 @@ export {
   BarListChart,
   BarListChartResponsive
 };
-//# sourceMappingURL=chunk-AFWQR3SM.js.map
+//# sourceMappingURL=chunk-MDRCAGKZ.js.map

package/dist/{chunk-TKPK4RFS.cjs → chunk-NQJE2CC7.cjs}

@@ -11,9 +11,10 @@ var _chunkRCY6XLGUcjs = require('./chunk-RCY6XLGU.cjs');
 var _chunkY3NNQMAXcjs = require('./chunk-Y3NNQMAX.cjs');
 
 
-var _chunk7QDEU3KNcjs = require('./chunk-7QDEU3KN.cjs');
+var _chunkUFRBUT2Dcjs = require('./chunk-UFRBUT2D.cjs');
 
 
+var _chunkASLARV7Lcjs = require('./chunk-ASLARV7L.cjs');
 
 
 
@@ -24,7 +25,9 @@ var _chunk7QDEU3KNcjs = require('./chunk-7QDEU3KN.cjs');
 
 
 
-var _chunkEJJO2QNBcjs = require('./chunk-EJJO2QNB.cjs');
+
+
+var _chunkYDVHT7GScjs = require('./chunk-YDVHT7GS.cjs');
 
 
 var _chunkZVGEDXDPcjs = require('./chunk-ZVGEDXDP.cjs');
@@ -40,8 +43,9 @@ var _react = require('react');
 
 // src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss
 var pie_semi_circle_chart_module_default = {
+  "pie-semi-circle-chart--responsive": "a8ccharts-V0wiEb",
+  "pie-semi-circle-chart__svg-wrapper": "a8ccharts-hGowej",
   "pie-semi-circle-chart": "a8ccharts-8tyaQj",
-  "pie-semi-circle-chart--legend-top": "a8ccharts-M1lF7A",
   "label": "a8ccharts-EKZS3j",
   "note": "a8ccharts-v85A8-"
 };
@@ -59,6 +63,7 @@ var renderDefaultPieSemiCircleTooltip = ({
   });
 };
 var PAD_ANGLE = 0.03;
+var DEFAULT_WIDTH = 400;
 var validateData = (data) => {
   if (!data.length) {
     return {
@@ -88,7 +93,8 @@ var validateData = (data) => {
 var PieSemiCircleChartInternal = ({
   data,
   chartId: providedChartId,
-  width = 400,
+  width: propWidth,
+  height: propHeight,
   thickness = 0.4,
   clockwise = true,
   withTooltips = false,
@@ -109,10 +115,11 @@ var PieSemiCircleChartInternal = ({
   children,
   tooltipOffsetX = 0,
   tooltipOffsetY = -15,
-  renderTooltip = renderDefaultPieSemiCircleTooltip
+  renderTooltip = renderDefaultPieSemiCircleTooltip,
+  gap = "md"
 }) => {
-  const chartId = _chunkEJJO2QNBcjs.useChartId.call(void 0, providedChartId);
-  const [legendRef, legendHeight] = _chunkEJJO2QNBcjs.useElementHeight.call(void 0, );
+  const chartId = _chunkYDVHT7GScjs.useChartId.call(void 0, providedChartId);
+  const [svgWrapperRef, svgWrapperWidth, svgWrapperHeight] = _chunkYDVHT7GScjs.useElementSize.call(void 0, );
   const {
     tooltipOpen,
     tooltipLeft,
@@ -153,12 +160,12 @@ var PieSemiCircleChartInternal = ({
   const {
     getElementStyles,
     isSeriesVisible
-  } = _chunkEJJO2QNBcjs.useGlobalChartsContext.call(void 0, );
+  } = _chunkYDVHT7GScjs.useGlobalChartsContext.call(void 0, );
   const {
     visibleData,
     allSegmentsHidden,
     legendData
-  } = _chunkEJJO2QNBcjs.useInteractiveLegendData.call(void 0, {
+  } = _chunkYDVHT7GScjs.useInteractiveLegendData.call(void 0, {
     data,
     chartId,
     legendInteractive,
@@ -176,7 +183,7 @@ var PieSemiCircleChartInternal = ({
     showValues: true,
     legendValueDisplay
   }), [legendValueDisplay]);
-  const legendItems = _chunkEJJO2QNBcjs.useChartLegendItems.call(void 0, legendData, legendOptions);
+  const legendItems = _chunkYDVHT7GScjs.useChartLegendItems.call(void 0, legendData, legendOptions);
   const {
     svgChildren,
     htmlChildren,
@@ -186,20 +193,23 @@ var PieSemiCircleChartInternal = ({
     thickness,
     clockwise
   }), [thickness, clockwise]);
-  _chunkEJJO2QNBcjs.useChartRegistration.call(void 0, {
+  _chunkYDVHT7GScjs.useChartRegistration.call(void 0, {
     chartId,
     legendItems,
     chartType: "pie-semi-circle",
     isDataValid: isValid,
     metadata: chartMetadata
   });
-  const prefersReducedMotion = _chunkEJJO2QNBcjs.usePrefersReducedMotion.call(void 0, );
+  const prefersReducedMotion = _chunkYDVHT7GScjs.usePrefersReducedMotion.call(void 0, );
+  const effectiveWidth = propWidth || DEFAULT_WIDTH;
   if (!isValid) {
+    const errorWidth = propHeight ? Math.min(propWidth || propHeight * 2, propHeight * 2) : effectiveWidth;
+    const errorHeight = errorWidth / 2;
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
       className: pie_semi_circle_chart_module_default["pie-semi-circle-chart"],
       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", {
-        width,
-        height: width / 2,
+        width: errorWidth,
+        height: errorHeight,
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "text", {
           x: "50%",
           y: "50%",
@@ -210,9 +220,11 @@ var PieSemiCircleChartInternal = ({
       })
     });
   }
+  const availableWidth = svgWrapperWidth > 0 ? svgWrapperWidth : effectiveWidth;
+  const availableHeight = svgWrapperHeight > 0 ? svgWrapperHeight : propHeight || effectiveWidth / 2;
+  const width = Math.min(availableWidth, availableHeight * 2);
   const height = width / 2;
-  const chartHeight = height - (showLegend && legendPosition === "top" ? legendHeight : 0);
-  const radius = Math.min(width / 2, chartHeight);
+  const radius = height;
   const innerRadius = radius * (1 - thickness);
   const dataWithIndex = visibleData.map((d) => {
     const originalIndex = data.findIndex((item) => item.label === d.label);
@@ -223,79 +235,100 @@ var PieSemiCircleChartInternal = ({
   });
   const startAngle = clockwise ? -Math.PI / 2 : Math.PI / 2;
   const endAngle = clockwise ? Math.PI / 2 : -Math.PI / 2;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEJJO2QNBcjs.SingleChartContext.Provider, {
+  const legendElement = showLegend && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYDVHT7GScjs.Legend, {
+    orientation: legendOrientation,
+    position: legendPosition,
+    alignment: legendAlignment,
+    maxWidth: legendMaxWidth,
+    textOverflow: legendTextOverflow,
+    legendItemClassName,
+    shape: legendShape,
+    chartId,
+    interactive: legendInteractive
+  });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYDVHT7GScjs.SingleChartContext.Provider, {
     value: {
       chartId,
       chartWidth: width,
-      chartHeight: radius
+      chartHeight: height
     },
-    children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
+    children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkUFRBUT2Dcjs.Stack, {
       ref: containerRef,
+      direction: "column",
+      gap,
       className: _clsx2.default.call(void 0, "pie-semi-circle-chart", pie_semi_circle_chart_module_default["pie-semi-circle-chart"], {
-        [pie_semi_circle_chart_module_default["pie-semi-circle-chart--legend-top"]]: showLegend && legendPosition === "top"
+        [pie_semi_circle_chart_module_default["pie-semi-circle-chart--responsive"]]: !propWidth && !propHeight
       }, className),
-      children: [/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", {
-        width,
-        height: radius,
-        viewBox: `0 0 ${width} ${chartHeight}`,
-        children: [/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "defs", {
-          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2A34OA5Ocjs.radial_wipe_animation_default, {
-            id: `radial-wipe-${chartId}`,
-            radius,
-            innerRadius,
-            startAngle: "-180deg",
-            wipePercentage: 50
-          })
-        }), /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _group.Group, {
-          top: chartHeight,
-          left: width / 2,
-          mask: animation && !prefersReducedMotion ? `url(#radial-wipe-${chartId})` : null,
-          children: allSegmentsHidden ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "text", {
-            textAnchor: "middle",
-            y: -radius / 2,
-            fill: "#ccc",
-            fontSize: "14",
-            fontFamily: "-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif",
-            children: _i18n.__.call(void 0, "All segments are hidden. Click legend items to show data.", "jetpack-charts")
-          }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, {
-            children: [/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _shape.Pie, {
-              data: dataWithIndex,
-              pieValue: accessors.value,
-              outerRadius: radius,
+      style: {
+        width: propWidth || void 0,
+        height: propHeight || void 0
+      },
+      children: [legendPosition === "top" && legendElement, /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
+        ref: svgWrapperRef,
+        className: pie_semi_circle_chart_module_default["pie-semi-circle-chart__svg-wrapper"],
+        children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", {
+          width,
+          height,
+          viewBox: `0 0 ${width} ${height}`,
+          children: [/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "defs", {
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2A34OA5Ocjs.radial_wipe_animation_default, {
+              id: `radial-wipe-${chartId}`,
+              radius,
               innerRadius,
-              cornerRadius: 3,
-              padAngle: PAD_ANGLE,
-              startAngle,
-              endAngle,
-              pieSort: accessors.sort,
-              children: (pie) => {
-                return pie.arcs.map((arc) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "g", {
-                  onMouseMove: withTooltips ? handleArcMouseMove(arc) : void 0,
-                  onMouseLeave: withTooltips ? handleMouseLeave : void 0,
-                  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", {
-                    d: pie.path(arc) || "",
-                    fill: accessors.fill(arc.data)
-                  })
-                }, arc.data.label));
-              }
-            }), /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _group.Group, {
-              children: [/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _text.Text, {
-                textAnchor: "middle",
-                verticalAnchor: "start",
-                y: -40,
-                className: pie_semi_circle_chart_module_default.label,
-                children: label
-              }), /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _text.Text, {
-                textAnchor: "middle",
-                verticalAnchor: "start",
-                y: -20,
-                className: pie_semi_circle_chart_module_default.note,
-                children: note
-              })]
-            }), !allSegmentsHidden && svgChildren]
-          })
-        })]
-      }), withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipInPortal, {
+              startAngle: "-180deg",
+              wipePercentage: 50
+            })
+          }), /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _group.Group, {
+            top: height,
+            left: width / 2,
+            mask: animation && !prefersReducedMotion ? `url(#radial-wipe-${chartId})` : null,
+            children: allSegmentsHidden ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "text", {
+              textAnchor: "middle",
+              y: -radius / 2,
+              fill: "#ccc",
+              fontSize: "14",
+              fontFamily: "-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif",
+              children: _i18n.__.call(void 0, "All segments are hidden. Click legend items to show data.", "jetpack-charts")
+            }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, {
+              children: [/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _shape.Pie, {
+                data: dataWithIndex,
+                pieValue: accessors.value,
+                outerRadius: radius,
+                innerRadius,
+                cornerRadius: 3,
+                padAngle: PAD_ANGLE,
+                startAngle,
+                endAngle,
+                pieSort: accessors.sort,
+                children: (pie) => {
+                  return pie.arcs.map((arc) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "g", {
+                    onMouseMove: withTooltips ? handleArcMouseMove(arc) : void 0,
+                    onMouseLeave: withTooltips ? handleMouseLeave : void 0,
+                    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", {
+                      d: pie.path(arc) || "",
+                      fill: accessors.fill(arc.data)
+                    })
+                  }, arc.data.label));
+                }
+              }), /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _group.Group, {
+                children: [/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _text.Text, {
+                  textAnchor: "middle",
+                  verticalAnchor: "start",
+                  y: -40,
+                  className: pie_semi_circle_chart_module_default.label,
+                  children: label
+                }), /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _text.Text, {
+                  textAnchor: "middle",
+                  verticalAnchor: "start",
+                  y: -20,
+                  className: pie_semi_circle_chart_module_default.note,
+                  children: note
+                })]
+              }), !allSegmentsHidden && svgChildren]
+            })
+          })]
+        })
+      }), legendPosition !== "top" && legendElement, withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipInPortal, {
         top: tooltipTop || 0,
         left: tooltipLeft || 0,
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
@@ -304,29 +337,18 @@ var PieSemiCircleChartInternal = ({
             tooltipData
           })
         })
-      }), showLegend && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEJJO2QNBcjs.Legend, {
-        orientation: legendOrientation,
-        position: legendPosition,
-        alignment: legendAlignment,
-        maxWidth: legendMaxWidth,
-        textOverflow: legendTextOverflow,
-        legendItemClassName,
-        shape: legendShape,
-        ref: legendRef,
-        chartId,
-        interactive: legendInteractive
       }), htmlChildren, otherChildren]
     })
   });
 };
 var PieSemiCircleChartWithProvider = (props) => {
-  const existingContext = _react.useContext.call(void 0, _chunkEJJO2QNBcjs.GlobalChartsContext);
+  const existingContext = _react.useContext.call(void 0, _chunkYDVHT7GScjs.GlobalChartsContext);
   if (existingContext) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PieSemiCircleChartInternal, {
       ...props
     });
   }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEJJO2QNBcjs.GlobalChartsProvider, {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYDVHT7GScjs.GlobalChartsProvider, {
     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PieSemiCircleChartInternal, {
       ...props
     })
@@ -334,12 +356,12 @@ var PieSemiCircleChartWithProvider = (props) => {
 };
 PieSemiCircleChartWithProvider.displayName = "PieSemiCircleChart";
 var PieSemiCircleChart = _chunkZVGEDXDPcjs.attachSubComponents.call(void 0, PieSemiCircleChartWithProvider, {
-  Legend: _chunkEJJO2QNBcjs.Legend,
+  Legend: _chunkYDVHT7GScjs.Legend,
   SVG: _chunkRCY6XLGUcjs.ChartSVG,
   HTML: _chunkRCY6XLGUcjs.ChartHTML
 });
-var PieSemiCircleChartResponsive = _chunkZVGEDXDPcjs.attachSubComponents.call(void 0, _chunk7QDEU3KNcjs.withResponsive.call(void 0, PieSemiCircleChartWithProvider), {
-  Legend: _chunkEJJO2QNBcjs.Legend,
+var PieSemiCircleChartResponsive = _chunkZVGEDXDPcjs.attachSubComponents.call(void 0, _chunkASLARV7Lcjs.withResponsive.call(void 0, PieSemiCircleChartWithProvider), {
+  Legend: _chunkYDVHT7GScjs.Legend,
   SVG: _chunkRCY6XLGUcjs.ChartSVG,
   HTML: _chunkRCY6XLGUcjs.ChartHTML
 });
@@ -348,4 +370,4 @@ var PieSemiCircleChartResponsive = _chunkZVGEDXDPcjs.attachSubComponents.call(vo
 
 
 exports.PieSemiCircleChart = PieSemiCircleChart; exports.PieSemiCircleChartResponsive = PieSemiCircleChartResponsive;
-//# sourceMappingURL=chunk-TKPK4RFS.cjs.map
+//# sourceMappingURL=chunk-NQJE2CC7.cjs.map

package/dist/chunk-NQJE2CC7.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-NQJE2CC7.cjs","../src/charts/pie-semi-circle-chart/pie-semi-circle-chart.tsx","../src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss"],"names":[],"mappings":"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","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-NQJE2CC7.cjs","sourcesContent":[null,"import { Group } from '@visx/group';\nimport { Pie } from '@visx/shape';\nimport { Text } from '@visx/text';\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, GlobalChartsContext } from '../../providers';\nimport { attachSubComponents } from '../../utils';\nimport { ChartSVG, ChartHTML, useChartChildren } 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-semi-circle-chart.module.scss';\n\n/**\n * Parameters passed to the renderTooltip function for semi-circle charts.\n */\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\n/**\n * Default tooltip renderer for semi-circle pie charts.\n * Renders a BaseTooltip with the hovered segment's data.\n *\n * @param {PieSemiCircleChartRenderTooltipParams} params - The tooltip parameters containing the hovered data point\n * @return {ReactNode} The rendered tooltip content\n */\nconst renderDefaultPieSemiCircleTooltip = ({\n  tooltipData\n}) => {\n  return /*#__PURE__*/_jsx(BaseTooltip, {\n    data: tooltipData,\n    top: 0,\n    left: 0,\n    renderContainer: false\n  });\n};\nconst PAD_ANGLE = 0.03; // Padding between segments\nconst DEFAULT_WIDTH = 400;\n\n// Base props type with optional responsive properties\n\n// Composition API types\n\n/**\n * Validates the semi-circle 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 is greater than 0\n  const totalPercentage = data.reduce((sum, item) => sum + item.percentage, 0);\n  if (totalPercentage <= 0) {\n    return {\n      isValid: false,\n      message: 'Invalid percentage total: Must be greater than 0'\n    };\n  }\n  return {\n    isValid: true,\n    message: ''\n  };\n};\nconst PieSemiCircleChartInternal = ({\n  data,\n  chartId: providedChartId,\n  width: propWidth,\n  height: propHeight,\n  thickness = 0.4,\n  clockwise = true,\n  withTooltips = false,\n  showLegend = false,\n  legendOrientation = 'horizontal',\n  legendPosition = 'bottom',\n  legendAlignment = 'center',\n  legendMaxWidth,\n  legendTextOverflow = 'wrap',\n  legendItemClassName,\n  legendShape = 'circle',\n  legendValueDisplay = 'percentage',\n  legendInteractive = false,\n  label,\n  animation,\n  note,\n  className,\n  children,\n  tooltipOffsetX = 0,\n  tooltipOffsetY = -15,\n  renderTooltip = renderDefaultPieSemiCircleTooltip,\n  gap = 'md'\n}) => {\n  const chartId = useChartId(providedChartId);\n  // Measure the SVG wrapper to calculate constrained dimensions\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 handleMouseMove = useCallback((event, arc) => {\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  }, [containerBounds.width, containerBounds.height, containerBounds.left, containerBounds.top, showTooltip, tooltipOffsetX, tooltipOffsetY]);\n  const handleMouseLeave = useCallback(() => {\n    hideTooltip();\n  }, [hideTooltip]);\n  const handleArcMouseMove = useCallback(arc => event => {\n    handleMouseMove(event, arc);\n  }, [handleMouseMove]);\n\n  // Validate data first to get validation result\n  const {\n    isValid,\n    message\n  } = validateData(data);\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  // Define accessors with useMemo to avoid changing dependencies\n  const accessors = useMemo(() => ({\n    value: d => d.value,\n    sort: (a, b) => b.value - a.value,\n    fill: d => getElementStyles({\n      data: d,\n      index: d.index\n    }).color\n  }), [getElementStyles]);\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\n  // Process children to extract compound components\n  const {\n    svgChildren,\n    htmlChildren,\n    otherChildren\n  } = useChartChildren(children, 'PieSemiCircleChart');\n\n  // Memoize metadata to prevent unnecessary re-registration\n  const chartMetadata = useMemo(() => ({\n    thickness,\n    clockwise\n  }), [thickness, clockwise]);\n\n  // Register chart with context only if data is valid\n  useChartRegistration({\n    chartId,\n    legendItems,\n    chartType: 'pie-semi-circle',\n    isDataValid: isValid,\n    metadata: chartMetadata\n  });\n  const prefersReducedMotion = usePrefersReducedMotion();\n  const effectiveWidth = propWidth || DEFAULT_WIDTH;\n  if (!isValid) {\n    const errorWidth = propHeight ? Math.min(propWidth || propHeight * 2, propHeight * 2) : effectiveWidth;\n    const errorHeight = errorWidth / 2;\n    return /*#__PURE__*/_jsx(\"div\", {\n      className: styles['pie-semi-circle-chart'],\n      children: /*#__PURE__*/_jsx(\"svg\", {\n        width: errorWidth,\n        height: errorHeight,\n        children: /*#__PURE__*/_jsx(\"text\", {\n          x: \"50%\",\n          y: \"50%\",\n          textAnchor: \"middle\",\n          className: styles.error,\n          children: message\n        })\n      })\n    });\n  }\n\n  // Calculate chart dimensions maintaining the 2:1 width-to-height ratio.\n  // Use measured SVG wrapper dimensions to respect height constraints, falling back\n  // to explicit props during initial render before measurement is available.\n  const availableWidth = svgWrapperWidth > 0 ? svgWrapperWidth : effectiveWidth;\n  const availableHeight = svgWrapperHeight > 0 ? svgWrapperHeight : propHeight || effectiveWidth / 2;\n  // Constrain width so that height (= width / 2) never exceeds the available height\n  const width = Math.min(availableWidth, availableHeight * 2);\n  const height = width / 2;\n  const radius = height; // For a semi-circle, radius equals the SVG height\n  const innerRadius = radius * (1 - thickness);\n\n  // Map data with 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\n  // Configure pie angles based on clockwise direction\n  const startAngle = clockwise ? -Math.PI / 2 : Math.PI / 2;\n  const endAngle = clockwise ? Math.PI / 2 : -Math.PI / 2;\n  const legendElement = showLegend && /*#__PURE__*/_jsx(Legend, {\n    orientation: legendOrientation,\n    position: legendPosition,\n    alignment: legendAlignment,\n    maxWidth: legendMaxWidth,\n    textOverflow: legendTextOverflow,\n    legendItemClassName: legendItemClassName,\n    shape: legendShape,\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-semi-circle-chart', styles['pie-semi-circle-chart'], {\n        [styles['pie-semi-circle-chart--responsive']]: !propWidth && !propHeight\n      }, className),\n      style: {\n        width: propWidth || undefined,\n        height: propHeight || undefined\n      },\n      children: [legendPosition === 'top' && legendElement, /*#__PURE__*/_jsx(\"div\", {\n        ref: svgWrapperRef,\n        className: styles['pie-semi-circle-chart__svg-wrapper'],\n        children: /*#__PURE__*/_jsxs(\"svg\", {\n          width: width,\n          height: height,\n          viewBox: `0 0 ${width} ${height}`,\n          children: [/*#__PURE__*/_jsx(\"defs\", {\n            children: /*#__PURE__*/_jsx(RadialWipeAnimation, {\n              id: `radial-wipe-${chartId}`,\n              radius: radius,\n              innerRadius: innerRadius,\n              startAngle: \"-180deg\",\n              wipePercentage: 50\n            })\n          }), /*#__PURE__*/_jsx(Group, {\n            top: height,\n            left: width / 2,\n            mask: animation && !prefersReducedMotion ? `url(#radial-wipe-${chartId})` : null,\n            children: allSegmentsHidden ? /*#__PURE__*/_jsx(\"text\", {\n              textAnchor: \"middle\",\n              y: -radius / 2,\n              fill: \"#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__*/_jsxs(_Fragment, {\n              children: [/*#__PURE__*/_jsx(Pie, {\n                data: dataWithIndex,\n                pieValue: accessors.value,\n                outerRadius: radius,\n                innerRadius: innerRadius,\n                cornerRadius: 3,\n                padAngle: PAD_ANGLE,\n                startAngle: startAngle,\n                endAngle: endAngle,\n                pieSort: accessors.sort,\n                children: pie => {\n                  return pie.arcs.map(arc => /*#__PURE__*/_jsx(\"g\", {\n                    onMouseMove: withTooltips ? handleArcMouseMove(arc) : undefined,\n                    onMouseLeave: withTooltips ? handleMouseLeave : undefined,\n                    children: /*#__PURE__*/_jsx(\"path\", {\n                      d: pie.path(arc) || '',\n                      fill: accessors.fill(arc.data)\n                    })\n                  }, arc.data.label));\n                }\n              }), /*#__PURE__*/_jsxs(Group, {\n                children: [/*#__PURE__*/_jsx(Text, {\n                  textAnchor: \"middle\",\n                  verticalAnchor: \"start\",\n                  y: -40 // Position above the chart with space for note\n                  ,\n                  className: styles.label,\n                  children: label\n                }), /*#__PURE__*/_jsx(Text, {\n                  textAnchor: \"middle\",\n                  verticalAnchor: \"start\",\n                  y: -20 // Position between label and chart\n                  ,\n                  className: styles.note,\n                  children: note\n                })]\n              }), !allSegmentsHidden && svgChildren]\n            })\n          })]\n        })\n      }), legendPosition !== 'top' && legendElement, 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 PieSemiCircleChartWithProvider = 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(PieSemiCircleChartInternal, {\n      ...props\n    });\n  }\n\n  // Otherwise, create our own GlobalChartsProvider\n  return /*#__PURE__*/_jsx(GlobalChartsProvider, {\n    children: /*#__PURE__*/_jsx(PieSemiCircleChartInternal, {\n      ...props\n    })\n  });\n};\nPieSemiCircleChartWithProvider.displayName = 'PieSemiCircleChart';\n\n// Create PieSemiCircleChart with composition API\nconst PieSemiCircleChart = attachSubComponents(PieSemiCircleChartWithProvider, {\n  Legend: Legend,\n  SVG: ChartSVG,\n  HTML: ChartHTML\n});\n\n// Create responsive PieSemiCircleChart with composition API\nconst PieSemiCircleChartResponsive = attachSubComponents(withResponsive(PieSemiCircleChartWithProvider), {\n  Legend: Legend,\n  SVG: ChartSVG,\n  HTML: ChartHTML\n});\nexport { PieSemiCircleChartResponsive as default, PieSemiCircleChart as PieSemiCircleChartUnresponsive };","import 'css-chunk:src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss';export default {\n  \"pie-semi-circle-chart--responsive\": \"a8ccharts-V0wiEb\",\n  \"pie-semi-circle-chart__svg-wrapper\": \"a8ccharts-hGowej\",\n  \"pie-semi-circle-chart\": \"a8ccharts-8tyaQj\",\n  \"label\": \"a8ccharts-EKZS3j\",\n  \"note\": \"a8ccharts-v85A8-\"\n};"]}