@automattic/charts 0.56.3 → 0.56.4

package/dist/chunk-EJHLLXBV.js

@@ -1,362 +0,0 @@
-import {
-  radial_wipe_animation_default
-} from "./chunk-A3AEEGKR.js";
-import {
-  ChartHTML,
-  ChartSVG,
-  useChartChildren
-} from "./chunk-CEZGL6YP.js";
-import {
-  BaseTooltip
-} from "./chunk-5XI443YP.js";
-import {
-  withResponsive
-} from "./chunk-C33AQZEC.js";
-import {
-  GlobalChartsContext,
-  GlobalChartsProvider,
-  Legend,
-  SingleChartContext,
-  useChartId,
-  useChartLegendItems,
-  useChartRegistration,
-  useElementHeight,
-  useGlobalChartsContext,
-  useInteractiveLegendData,
-  usePrefersReducedMotion
-} from "./chunk-H34CJSR6.js";
-import {
-  attachSubComponents
-} from "./chunk-TE63Y5PX.js";
-
-// src/charts/pie-semi-circle-chart/pie-semi-circle-chart.tsx
-import { Group } from "@visx/group";
-import { Pie } from "@visx/shape";
-import { Text } from "@visx/text";
-import { useTooltip, useTooltipInPortal } from "@visx/tooltip";
-import { __ } from "@wordpress/i18n";
-import clsx from "clsx";
-import { useCallback, useContext, useMemo } from "react";
-
-// src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss
-var pie_semi_circle_chart_module_default = {
-  "pie-semi-circle-chart": "a8ccharts-8tyaQj",
-  "pie-semi-circle-chart--legend-top": "a8ccharts-M1lF7A",
-  "label": "a8ccharts-EKZS3j",
-  "note": "a8ccharts-v85A8-"
-};
-
-// src/charts/pie-semi-circle-chart/pie-semi-circle-chart.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var renderDefaultPieSemiCircleTooltip = ({
-  tooltipData
-}) => {
-  return /* @__PURE__ */ jsx(BaseTooltip, { data: tooltipData, top: 0, left: 0, renderContainer: false });
-};
-var PAD_ANGLE = 0.03;
-var validateData = (data) => {
-  if (!data.length) {
-    return { isValid: false, message: "No data available" };
-  }
-  const hasNegativeValues = data.some((item) => item.percentage < 0 || item.value < 0);
-  if (hasNegativeValues) {
-    return { isValid: false, message: "Invalid data: Negative values are not allowed" };
-  }
-  const totalPercentage = data.reduce((sum, item) => sum + item.percentage, 0);
-  if (totalPercentage <= 0) {
-    return { isValid: false, message: "Invalid percentage total: Must be greater than 0" };
-  }
-  return { isValid: true, message: "" };
-};
-var PieSemiCircleChartInternal = ({
-  data,
-  chartId: providedChartId,
-  width = 400,
-  thickness = 0.4,
-  clockwise = true,
-  withTooltips = false,
-  showLegend = false,
-  legendOrientation = "horizontal",
-  legendPosition = "bottom",
-  legendAlignment = "center",
-  legendMaxWidth,
-  legendTextOverflow = "wrap",
-  legendItemClassName,
-  legendShape = "circle",
-  legendValueDisplay = "percentage",
-  legendInteractive = false,
-  label,
-  animation,
-  note,
-  className,
-  children,
-  tooltipOffsetX = 0,
-  tooltipOffsetY = -15,
-  renderTooltip = renderDefaultPieSemiCircleTooltip
-}) => {
-  const chartId = useChartId(providedChartId);
-  const [legendRef, legendHeight] = useElementHeight();
-  const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } = useTooltip();
-  const { containerRef, TooltipInPortal, containerBounds } = useTooltipInPortal({
-    detectBounds: true,
-    scroll: true,
-    debounce: 0
-  });
-  const handleMouseMove = useCallback(
-    (event, arc) => {
-      if (containerBounds.width === 0 || containerBounds.height === 0) {
-        return;
-      }
-      showTooltip({
-        tooltipData: arc.data,
-        tooltipLeft: event.clientX - containerBounds.left + tooltipOffsetX,
-        tooltipTop: event.clientY - containerBounds.top + tooltipOffsetY
-      });
-    },
-    [
-      containerBounds.width,
-      containerBounds.height,
-      containerBounds.left,
-      containerBounds.top,
-      showTooltip,
-      tooltipOffsetX,
-      tooltipOffsetY
-    ]
-  );
-  const handleMouseLeave = useCallback(() => {
-    hideTooltip();
-  }, [hideTooltip]);
-  const handleArcMouseMove = useCallback(
-    (arc) => (event) => {
-      handleMouseMove(event, arc);
-    },
-    [handleMouseMove]
-  );
-  const { isValid, message } = validateData(data);
-  const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
-  const { visibleData, allSegmentsHidden, legendData } = useInteractiveLegendData({
-    data,
-    chartId,
-    legendInteractive,
-    isSeriesVisible
-  });
-  const accessors = useMemo(
-    () => ({
-      value: (d) => d.value,
-      sort: (a, b) => b.value - a.value,
-      fill: (d) => getElementStyles({ data: d, index: d.index }).color
-    }),
-    [getElementStyles]
-  );
-  const legendOptions = useMemo(
-    () => ({ showValues: true, legendValueDisplay }),
-    [legendValueDisplay]
-  );
-  const legendItems = useChartLegendItems(legendData, legendOptions);
-  const { svgChildren, htmlChildren, otherChildren } = useChartChildren(
-    children,
-    "PieSemiCircleChart"
-  );
-  const chartMetadata = useMemo(
-    () => ({
-      thickness,
-      clockwise
-    }),
-    [thickness, clockwise]
-  );
-  useChartRegistration({
-    chartId,
-    legendItems,
-    chartType: "pie-semi-circle",
-    isDataValid: isValid,
-    metadata: chartMetadata
-  });
-  const prefersReducedMotion = usePrefersReducedMotion();
-  if (!isValid) {
-    return /* @__PURE__ */ jsx("div", { className: pie_semi_circle_chart_module_default["pie-semi-circle-chart"], children: /* @__PURE__ */ jsx("svg", { width, height: width / 2, "data-testid": "pie-chart-svg", children: /* @__PURE__ */ jsx("text", { x: "50%", y: "50%", textAnchor: "middle", className: pie_semi_circle_chart_module_default.error, children: message }) }) });
-  }
-  const height = width / 2;
-  const chartHeight = height - (showLegend && legendPosition === "top" ? legendHeight : 0);
-  const radius = Math.min(width / 2, chartHeight);
-  const innerRadius = radius * (1 - thickness);
-  const dataWithIndex = visibleData.map((d) => {
-    const originalIndex = data.findIndex((item) => item.label === d.label);
-    return {
-      ...d,
-      index: originalIndex >= 0 ? originalIndex : 0
-    };
-  });
-  const startAngle = clockwise ? -Math.PI / 2 : Math.PI / 2;
-  const endAngle = clockwise ? Math.PI / 2 : -Math.PI / 2;
-  return /* @__PURE__ */ jsx(
-    SingleChartContext.Provider,
-    {
-      value: {
-        chartId,
-        chartWidth: width,
-        chartHeight: radius
-      },
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref: containerRef,
-          className: clsx(
-            "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"
-            },
-            className
-          ),
-          "data-testid": "pie-chart-container",
-          children: [
-            /* @__PURE__ */ jsxs(
-              "svg",
-              {
-                width,
-                height: radius,
-                viewBox: `0 0 ${width} ${chartHeight}`,
-                "data-testid": "pie-chart-svg",
-                children: [
-                  /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
-                    radial_wipe_animation_default,
-                    {
-                      id: `radial-wipe-${chartId}`,
-                      radius,
-                      innerRadius,
-                      startAngle: "-180deg",
-                      wipePercentage: 50
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx(
-                    Group,
-                    {
-                      top: chartHeight,
-                      left: width / 2,
-                      mask: animation && !prefersReducedMotion ? `url(#radial-wipe-${chartId})` : null,
-                      children: allSegmentsHidden ? /* @__PURE__ */ jsx(
-                        "text",
-                        {
-                          textAnchor: "middle",
-                          y: -radius / 2,
-                          fill: "#ccc",
-                          fontSize: "14",
-                          fontFamily: "-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif",
-                          children: __(
-                            "All segments are hidden. Click legend items to show data.",
-                            "jetpack-charts"
-                          )
-                        }
-                      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                        /* @__PURE__ */ jsx(
-                          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__ */ jsx(
-                                "g",
-                                {
-                                  onMouseMove: withTooltips ? handleArcMouseMove(arc) : void 0,
-                                  onMouseLeave: withTooltips ? handleMouseLeave : void 0,
-                                  children: /* @__PURE__ */ jsx(
-                                    "path",
-                                    {
-                                      d: pie.path(arc) || "",
-                                      fill: accessors.fill(arc.data),
-                                      "data-testid": "pie-segment"
-                                    }
-                                  )
-                                },
-                                arc.data.label
-                              ));
-                            }
-                          }
-                        ),
-                        /* @__PURE__ */ jsxs(Group, { children: [
-                          /* @__PURE__ */ jsx(
-                            Text,
-                            {
-                              textAnchor: "middle",
-                              verticalAnchor: "start",
-                              y: -40,
-                              className: pie_semi_circle_chart_module_default.label,
-                              children: label
-                            }
-                          ),
-                          /* @__PURE__ */ jsx(
-                            Text,
-                            {
-                              textAnchor: "middle",
-                              verticalAnchor: "start",
-                              y: -20,
-                              className: pie_semi_circle_chart_module_default.note,
-                              children: note
-                            }
-                          )
-                        ] }),
-                        !allSegmentsHidden && svgChildren
-                      ] })
-                    }
-                  )
-                ]
-              }
-            ),
-            withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ jsx(TooltipInPortal, { top: tooltipTop || 0, left: tooltipLeft || 0, children: /* @__PURE__ */ jsx("div", { role: "tooltip", children: renderTooltip({ tooltipData }) }) }),
-            showLegend && /* @__PURE__ */ jsx(
-              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 = useContext(GlobalChartsContext);
-  if (existingContext) {
-    return /* @__PURE__ */ jsx(PieSemiCircleChartInternal, { ...props });
-  }
-  return /* @__PURE__ */ jsx(GlobalChartsProvider, { children: /* @__PURE__ */ jsx(PieSemiCircleChartInternal, { ...props }) });
-};
-PieSemiCircleChartWithProvider.displayName = "PieSemiCircleChart";
-var PieSemiCircleChart = attachSubComponents(PieSemiCircleChartWithProvider, {
-  Legend,
-  SVG: ChartSVG,
-  HTML: ChartHTML
-});
-var PieSemiCircleChartResponsive = attachSubComponents(
-  withResponsive(PieSemiCircleChartWithProvider),
-  {
-    Legend,
-    SVG: ChartSVG,
-    HTML: ChartHTML
-  }
-);
-
-export {
-  PieSemiCircleChart,
-  PieSemiCircleChartResponsive
-};
-//# sourceMappingURL=chunk-EJHLLXBV.js.map

package/dist/chunk-EJHLLXBV.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/charts/pie-semi-circle-chart/pie-semi-circle-chart.tsx","../src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss"],"sourcesContent":["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 clsx from 'clsx';\nimport { useCallback, useContext, useMemo } from 'react';\nimport { Legend, useChartLegendItems } from '../../components/legend';\nimport { BaseTooltip } from '../../components/tooltip';\nimport { useElementHeight, useInteractiveLegendData, usePrefersReducedMotion } from '../../hooks';\nimport {\n\tGlobalChartsProvider,\n\tuseChartId,\n\tuseChartRegistration,\n\tuseGlobalChartsContext,\n\tGlobalChartsContext,\n} 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';\nimport type { LegendValueDisplay } from '../../components/legend';\nimport type { BaseChartProps, DataPointPercentage, Optional } from '../../types';\nimport type { ChartComponentWithComposition } from '../private/chart-composition';\nimport type { ResponsiveConfig } from '../private/with-responsive';\nimport type { PieArcDatum } from '@visx/shape/lib/shapes/Pie';\nimport type { FC, MouseEvent, ReactNode } from 'react';\n\n/**\n * Parameters passed to the renderTooltip function for semi-circle charts.\n */\nexport type PieSemiCircleChartRenderTooltipParams = {\n\t/**\n\t * The data point being hovered, including label, value, and percentage.\n\t */\n\ttooltipData: DataPointPercentage;\n};\n\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\ttooltipData,\n}: PieSemiCircleChartRenderTooltipParams ): ReactNode => {\n\treturn <BaseTooltip data={ tooltipData } top={ 0 } left={ 0 } renderContainer={ false } />;\n};\n\nconst PAD_ANGLE = 0.03; // Padding between segments\n\nexport interface PieSemiCircleChartProps extends BaseChartProps< DataPointPercentage[] > {\n\t/**\n\t * Width of the chart in pixels; height would be half of this value calculated automatically.\n\t */\n\twidth?: number;\n\n\t/**\n\t * Thickness of the pie chart. A value between 0 and 1\n\t */\n\tthickness?: number;\n\n\t/**\n\t * Direction of chart rendering\n\t * true for clockwise, false for counter-clockwise\n\t */\n\tclockwise?: boolean;\n\n\t/**\n\t * Label text to display above the chart\n\t */\n\tlabel?: string;\n\n\t/**\n\t * Note text to display below the label\n\t */\n\tnote?: string;\n\n\t/**\n\t * Use the children prop to render additional elements on the chart.\n\t */\n\tchildren?: ReactNode;\n\n\t/**\n\t * What type of value to display in the legend when showValues is true.\n\t * - 'percentage': Shows percentage values (e.g., \"23%\") [default]\n\t * - 'value': Shows raw numeric values (e.g., \"30000\")\n\t * - 'valueDisplay': Shows formatted values (e.g., \"30K\")\n\t * - 'none': Shows no values, only labels\n\t */\n\tlegendValueDisplay?: LegendValueDisplay;\n\n\t/**\n\t * Enable interactive legend items that can toggle segment visibility.\n\t * Requires chartId and GlobalChartsProvider.\n\t * When segments are hidden, percentages are recalculated so visible segments total 100%.\n\t */\n\tlegendInteractive?: boolean;\n\n\t/**\n\t * Horizontal offset for tooltip positioning in pixels (default: 0)\n\t */\n\ttooltipOffsetX?: number;\n\n\t/**\n\t * Vertical offset for tooltip positioning in pixels (default: -15)\n\t */\n\ttooltipOffsetY?: number;\n\n\t/**\n\t * Custom render function for tooltip content.\n\t * When provided, replaces the default BaseTooltip with custom content.\n\t */\n\trenderTooltip?: ( params: PieSemiCircleChartRenderTooltipParams ) => ReactNode;\n}\n\n// Base props type with optional responsive properties\ntype PieSemiCircleChartBaseProps = Optional< PieSemiCircleChartProps, 'width' >;\n\n// Composition API types\ntype PieSemiCircleChartComponent = ChartComponentWithComposition< PieSemiCircleChartBaseProps >;\ntype PieSemiCircleChartResponsiveComponent = ChartComponentWithComposition<\n\tPieSemiCircleChartBaseProps & ResponsiveConfig\n>;\n\nexport type ArcData = PieArcDatum< DataPointPercentage >;\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: DataPointPercentage[] ) => {\n\tif ( ! data.length ) {\n\t\treturn { isValid: false, message: 'No data available' };\n\t}\n\n\t// Check for negative values\n\tconst hasNegativeValues = data.some( item => item.percentage < 0 || item.value < 0 );\n\tif ( hasNegativeValues ) {\n\t\treturn { isValid: false, message: 'Invalid data: Negative values are not allowed' };\n\t}\n\n\t// Validate total percentage is greater than 0\n\tconst totalPercentage = data.reduce( ( sum, item ) => sum + item.percentage, 0 );\n\tif ( totalPercentage <= 0 ) {\n\t\treturn { isValid: false, message: 'Invalid percentage total: Must be greater than 0' };\n\t}\n\n\treturn { isValid: true, message: '' };\n};\n\nconst PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {\n\tdata,\n\tchartId: providedChartId,\n\twidth = 400,\n\tthickness = 0.4,\n\tclockwise = true,\n\twithTooltips = false,\n\tshowLegend = false,\n\tlegendOrientation = 'horizontal',\n\tlegendPosition = 'bottom',\n\tlegendAlignment = 'center',\n\tlegendMaxWidth,\n\tlegendTextOverflow = 'wrap',\n\tlegendItemClassName,\n\tlegendShape = 'circle',\n\tlegendValueDisplay = 'percentage',\n\tlegendInteractive = false,\n\tlabel,\n\tanimation,\n\tnote,\n\tclassName,\n\tchildren,\n\ttooltipOffsetX = 0,\n\ttooltipOffsetY = -15,\n\trenderTooltip = renderDefaultPieSemiCircleTooltip,\n} ) => {\n\tconst chartId = useChartId( providedChartId );\n\tconst [ legendRef, legendHeight ] = useElementHeight< HTMLDivElement >();\n\tconst { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } =\n\t\tuseTooltip< DataPointPercentage >();\n\n\t// Set up portal tooltip for better z-index handling\n\t// We get containerBounds to cancel out stale offsets in the position calculation\n\tconst { containerRef, TooltipInPortal, containerBounds } = useTooltipInPortal( {\n\t\tdetectBounds: true,\n\t\tscroll: true,\n\t\tdebounce: 0,\n\t} );\n\n\tconst handleMouseMove = useCallback(\n\t\t( event: MouseEvent< SVGElement >, arc: ArcData ) => {\n\t\t\t// Don't show tooltip until container bounds are measured\n\t\t\tif ( containerBounds.width === 0 || containerBounds.height === 0 ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Use clientX/Y and subtract containerBounds to cancel out any stale offset.\n\t\t\t// TooltipInPortal calculates: tooltipLeft + containerBounds.left + scrollX\n\t\t\t// By passing (clientX - containerBounds.left), we get:\n\t\t\t// (clientX - containerBounds.left) + containerBounds.left + scrollX = clientX + scrollX\n\t\t\t// This gives correct page coordinates regardless of stale bounds.\n\t\t\tshowTooltip( {\n\t\t\t\ttooltipData: arc.data,\n\t\t\t\ttooltipLeft: event.clientX - containerBounds.left + tooltipOffsetX,\n\t\t\t\ttooltipTop: event.clientY - containerBounds.top + tooltipOffsetY,\n\t\t\t} );\n\t\t},\n\t\t[\n\t\t\tcontainerBounds.width,\n\t\t\tcontainerBounds.height,\n\t\t\tcontainerBounds.left,\n\t\t\tcontainerBounds.top,\n\t\t\tshowTooltip,\n\t\t\ttooltipOffsetX,\n\t\t\ttooltipOffsetY,\n\t\t]\n\t);\n\n\tconst handleMouseLeave = useCallback( () => {\n\t\thideTooltip();\n\t}, [ hideTooltip ] );\n\n\tconst handleArcMouseMove = useCallback(\n\t\t( arc: ArcData ) => ( event: MouseEvent< SVGElement > ) => {\n\t\t\thandleMouseMove( event, arc );\n\t\t},\n\t\t[ handleMouseMove ]\n\t);\n\n\t// Validate data first to get validation result\n\tconst { isValid, message } = validateData( data );\n\n\tconst { getElementStyles, isSeriesVisible } = useGlobalChartsContext();\n\n\t// Filter and recalculate data for interactive legends\n\tconst { visibleData, allSegmentsHidden, legendData } = useInteractiveLegendData( {\n\t\tdata,\n\t\tchartId,\n\t\tlegendInteractive,\n\t\tisSeriesVisible,\n\t} );\n\n\t// Define accessors with useMemo to avoid changing dependencies\n\tconst accessors = useMemo(\n\t\t() => ( {\n\t\t\tvalue: ( d: DataPointPercentage ) => d.value,\n\t\t\tsort: (\n\t\t\t\ta: DataPointPercentage & { index: number },\n\t\t\t\tb: DataPointPercentage & { index: number }\n\t\t\t) => b.value - a.value,\n\t\t\tfill: ( d: DataPointPercentage & { index: number } ) =>\n\t\t\t\tgetElementStyles( { data: d, index: d.index } ).color,\n\t\t} ),\n\t\t[ getElementStyles ]\n\t);\n\n\t// Memoize legend options to prevent unnecessary re-calculations\n\tconst legendOptions = useMemo(\n\t\t() => ( { showValues: true, legendValueDisplay } ),\n\t\t[ legendValueDisplay ]\n\t);\n\n\t// Create legend items using legendData (has recalculated percentages for visible items)\n\tconst legendItems = useChartLegendItems( legendData, legendOptions );\n\n\t// Process children to extract compound components\n\tconst { svgChildren, htmlChildren, otherChildren } = useChartChildren(\n\t\tchildren,\n\t\t'PieSemiCircleChart'\n\t);\n\n\t// Memoize metadata to prevent unnecessary re-registration\n\tconst chartMetadata = useMemo(\n\t\t() => ( {\n\t\t\tthickness,\n\t\t\tclockwise,\n\t\t} ),\n\t\t[ thickness, clockwise ]\n\t);\n\n\t// Register chart with context only if data is valid\n\tuseChartRegistration( {\n\t\tchartId,\n\t\tlegendItems,\n\t\tchartType: 'pie-semi-circle',\n\t\tisDataValid: isValid,\n\t\tmetadata: chartMetadata,\n\t} );\n\n\tconst prefersReducedMotion = usePrefersReducedMotion();\n\n\tif ( ! isValid ) {\n\t\treturn (\n\t\t\t<div className={ styles[ 'pie-semi-circle-chart' ] }>\n\t\t\t\t<svg width={ width } height={ width / 2 } data-testid=\"pie-chart-svg\">\n\t\t\t\t\t<text x=\"50%\" y=\"50%\" textAnchor=\"middle\" className={ styles.error }>\n\t\t\t\t\t\t{ message }\n\t\t\t\t\t</text>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Calculate chart dimensions\n\t// TODO: we might want to accept height as a prop in the future, because the height of container might not always be enough.\n\tconst height = width / 2;\n\t// The chart only takes the height minus the legend height.\n\tconst chartHeight = height - ( showLegend && legendPosition === 'top' ? legendHeight : 0 );\n\tconst radius = Math.min( width / 2, chartHeight );\n\tconst innerRadius = radius * ( 1 - thickness );\n\n\t// Map data with index for color assignment\n\t// When interactive, we need to find the original index to maintain consistent colors\n\tconst dataWithIndex = visibleData.map( d => {\n\t\tconst originalIndex = data.findIndex( item => item.label === d.label );\n\t\treturn {\n\t\t\t...d,\n\t\t\tindex: originalIndex >= 0 ? originalIndex : 0,\n\t\t};\n\t} );\n\n\t// Configure pie angles based on clockwise direction\n\tconst startAngle = clockwise ? -Math.PI / 2 : Math.PI / 2;\n\tconst endAngle = clockwise ? Math.PI / 2 : -Math.PI / 2;\n\n\treturn (\n\t\t<SingleChartContext.Provider\n\t\t\tvalue={ {\n\t\t\t\tchartId,\n\t\t\t\tchartWidth: width,\n\t\t\t\tchartHeight: radius,\n\t\t\t} }\n\t\t>\n\t\t\t<div\n\t\t\t\tref={ containerRef }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\t'pie-semi-circle-chart',\n\t\t\t\t\tstyles[ 'pie-semi-circle-chart' ],\n\t\t\t\t\t{\n\t\t\t\t\t\t[ styles[ 'pie-semi-circle-chart--legend-top' ] ]:\n\t\t\t\t\t\t\tshowLegend && legendPosition === 'top',\n\t\t\t\t\t},\n\t\t\t\t\tclassName\n\t\t\t\t) }\n\t\t\t\tdata-testid=\"pie-chart-container\"\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\twidth={ width }\n\t\t\t\t\theight={ radius }\n\t\t\t\t\tviewBox={ `0 0 ${ width } ${ chartHeight }` }\n\t\t\t\t\tdata-testid=\"pie-chart-svg\"\n\t\t\t\t>\n\t\t\t\t\t<defs>\n\t\t\t\t\t\t<RadialWipeAnimation\n\t\t\t\t\t\t\tid={ `radial-wipe-${ chartId }` }\n\t\t\t\t\t\t\tradius={ radius }\n\t\t\t\t\t\t\tinnerRadius={ innerRadius }\n\t\t\t\t\t\t\tstartAngle=\"-180deg\"\n\t\t\t\t\t\t\twipePercentage={ 50 }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</defs>\n\n\t\t\t\t\t{ /* Main chart group centered horizontally and positioned at bottom */ }\n\t\t\t\t\t<Group\n\t\t\t\t\t\ttop={ chartHeight }\n\t\t\t\t\t\tleft={ width / 2 }\n\t\t\t\t\t\tmask={ animation && ! prefersReducedMotion ? `url(#radial-wipe-${ chartId })` : null }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ allSegmentsHidden ? (\n\t\t\t\t\t\t\t<text\n\t\t\t\t\t\t\t\ttextAnchor=\"middle\"\n\t\t\t\t\t\t\t\ty={ -radius / 2 }\n\t\t\t\t\t\t\t\tfill=\"#ccc\"\n\t\t\t\t\t\t\t\tfontSize=\"14\"\n\t\t\t\t\t\t\t\tfontFamily=\"-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t'All segments are hidden. Click legend items to show data.',\n\t\t\t\t\t\t\t\t\t'jetpack-charts'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</text>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t{ /* Pie chart */ }\n\t\t\t\t\t\t\t\t<Pie< DataPointPercentage & { index: number } >\n\t\t\t\t\t\t\t\t\tdata={ dataWithIndex }\n\t\t\t\t\t\t\t\t\tpieValue={ accessors.value }\n\t\t\t\t\t\t\t\t\touterRadius={ radius }\n\t\t\t\t\t\t\t\t\tinnerRadius={ innerRadius }\n\t\t\t\t\t\t\t\t\tcornerRadius={ 3 }\n\t\t\t\t\t\t\t\t\tpadAngle={ PAD_ANGLE }\n\t\t\t\t\t\t\t\t\tstartAngle={ startAngle }\n\t\t\t\t\t\t\t\t\tendAngle={ endAngle }\n\t\t\t\t\t\t\t\t\tpieSort={ accessors.sort }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ pie => {\n\t\t\t\t\t\t\t\t\t\treturn pie.arcs.map( arc => (\n\t\t\t\t\t\t\t\t\t\t\t<g\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ arc.data.label }\n\t\t\t\t\t\t\t\t\t\t\t\tonMouseMove={ withTooltips ? handleArcMouseMove( arc ) : undefined }\n\t\t\t\t\t\t\t\t\t\t\t\tonMouseLeave={ withTooltips ? handleMouseLeave : undefined }\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\t\t\t\td={ pie.path( arc ) || '' }\n\t\t\t\t\t\t\t\t\t\t\t\t\tfill={ accessors.fill( arc.data ) }\n\t\t\t\t\t\t\t\t\t\t\t\t\tdata-testid=\"pie-segment\"\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t\t\t\t) );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t</Pie>\n\n\t\t\t\t\t\t\t\t{ /* Label and note text */ }\n\t\t\t\t\t\t\t\t<Group>\n\t\t\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\t\t\ttextAnchor=\"middle\"\n\t\t\t\t\t\t\t\t\t\tverticalAnchor=\"start\"\n\t\t\t\t\t\t\t\t\t\ty={ -40 } // Position above the chart with space for note\n\t\t\t\t\t\t\t\t\t\tclassName={ styles.label }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\t\t\ttextAnchor=\"middle\"\n\t\t\t\t\t\t\t\t\t\tverticalAnchor=\"start\"\n\t\t\t\t\t\t\t\t\t\ty={ -20 } // Position between label and chart\n\t\t\t\t\t\t\t\t\t\tclassName={ styles.note }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ note }\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Group>\n\n\t\t\t\t\t\t\t\t{ /* Render SVG children from composition API */ }\n\t\t\t\t\t\t\t\t{ ! allSegmentsHidden && svgChildren }\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Group>\n\t\t\t\t</svg>\n\n\t\t\t\t{ withTooltips && tooltipOpen && tooltipData && (\n\t\t\t\t\t<TooltipInPortal top={ tooltipTop || 0 } left={ tooltipLeft || 0 }>\n\t\t\t\t\t\t<div role=\"tooltip\">{ renderTooltip( { tooltipData } ) }</div>\n\t\t\t\t\t</TooltipInPortal>\n\t\t\t\t) }\n\n\t\t\t\t{ showLegend && (\n\t\t\t\t\t<Legend\n\t\t\t\t\t\torientation={ legendOrientation }\n\t\t\t\t\t\tposition={ legendPosition }\n\t\t\t\t\t\talignment={ legendAlignment }\n\t\t\t\t\t\tmaxWidth={ legendMaxWidth }\n\t\t\t\t\t\ttextOverflow={ legendTextOverflow }\n\t\t\t\t\t\tlegendItemClassName={ legendItemClassName }\n\t\t\t\t\t\tshape={ legendShape }\n\t\t\t\t\t\tref={ legendRef }\n\t\t\t\t\t\tchartId={ chartId }\n\t\t\t\t\t\tinteractive={ legendInteractive }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\n\t\t\t\t{ /* Render HTML children from composition API */ }\n\t\t\t\t{ htmlChildren }\n\n\t\t\t\t{ /* Render any other children that aren't compound components */ }\n\t\t\t\t{ otherChildren }\n\t\t\t</div>\n\t\t</SingleChartContext.Provider>\n\t);\n};\n\nconst PieSemiCircleChartWithProvider: FC< PieSemiCircleChartProps > = props => {\n\tconst existingContext = useContext( GlobalChartsContext );\n\n\t// If we're already in a GlobalChartsProvider context, don't create a new one\n\tif ( existingContext ) {\n\t\treturn <PieSemiCircleChartInternal { ...props } />;\n\t}\n\n\t// Otherwise, create our own GlobalChartsProvider\n\treturn (\n\t\t<GlobalChartsProvider>\n\t\t\t<PieSemiCircleChartInternal { ...props } />\n\t\t</GlobalChartsProvider>\n\t);\n};\n\nPieSemiCircleChartWithProvider.displayName = 'PieSemiCircleChart';\n\n// Create PieSemiCircleChart with composition API\nconst PieSemiCircleChart = attachSubComponents( PieSemiCircleChartWithProvider, {\n\tLegend: Legend,\n\tSVG: ChartSVG,\n\tHTML: ChartHTML,\n} ) as PieSemiCircleChartComponent;\n\n// Create responsive PieSemiCircleChart with composition API\nconst PieSemiCircleChartResponsive = attachSubComponents(\n\twithResponsive< PieSemiCircleChartProps >( PieSemiCircleChartWithProvider ),\n\t{\n\t\tLegend: Legend,\n\t\tSVG: ChartSVG,\n\t\tHTML: ChartHTML,\n\t}\n) as PieSemiCircleChartResponsiveComponent;\n\nexport {\n\tPieSemiCircleChartResponsive as default,\n\tPieSemiCircleChart as PieSemiCircleChartUnresponsive,\n};\n","import 'css-chunk:src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss';export default {\n  \"pie-semi-circle-chart\": \"a8ccharts-8tyaQj\",\n  \"pie-semi-circle-chart--legend-top\": \"a8ccharts-M1lF7A\",\n  \"label\": \"a8ccharts-EKZS3j\",\n  \"note\": \"a8ccharts-v85A8-\"\n};"],"mappings":"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","names":[]}

package/dist/chunk-FWMJ2FR2.js

@@ -1,121 +0,0 @@
-import {
-  withResponsive
-} from "./chunk-C33AQZEC.js";
-import {
-  GlobalChartsContext,
-  GlobalChartsProvider,
-  useGlobalChartsContext
-} from "./chunk-H34CJSR6.js";
-import {
-  lightenHexColor,
-  normalizeColorToHex,
-  resolveCssVariable
-} from "./chunk-TE63Y5PX.js";
-
-// src/charts/geo-chart/geo-chart.tsx
-import { __ } from "@wordpress/i18n";
-import clsx from "clsx";
-import { useContext, useMemo } from "react";
-import { Chart } from "react-google-charts";
-
-// src/charts/geo-chart/geo-chart.module.scss
-var geo_chart_module_default = {
-  "container": "a8ccharts-JvcqOz"
-};
-
-// src/charts/geo-chart/geo-chart.tsx
-import { jsx } from "react/jsx-runtime";
-var DEFAULT_FEATURE_FILL_COLOR = "#ffffff";
-var DEFAULT_BACKGROUND_COLOR = "#ffffff";
-var GeoChartInternal = ({
-  className,
-  data,
-  width,
-  height,
-  region = "world",
-  resolution = "countries",
-  renderPlaceholder
-}) => {
-  const {
-    getElementStyles,
-    theme: {
-      geoChart: { featureFillColor },
-      backgroundColor
-    }
-  } = useGlobalChartsContext();
-  const loadingPlaceholder = /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: clsx("geo-chart", geo_chart_module_default.container, className),
-      "data-testid": "geo-chart-loading",
-      style: { width, height },
-      children: renderPlaceholder ? renderPlaceholder() : __("Loading map", "jetpack-charts")
-    }
-  );
-  const fullColorHex = getElementStyles({ index: 0 }).color;
-  const lightColorHex = lightenHexColor(fullColorHex, 0.8);
-  const backgroundColorHex = normalizeColorToHex(backgroundColor, null, resolveCssVariable) || DEFAULT_BACKGROUND_COLOR;
-  const defaultFillColorHex = normalizeColorToHex(featureFillColor, null, resolveCssVariable) || DEFAULT_FEATURE_FILL_COLOR;
-  const hasHtmlTooltips = useMemo(
-    () => data.length > 0 && data[0].some(
-      (col) => typeof col === "object" && col !== null && "role" in col && col.role === "tooltip" && "p" in col && typeof col.p === "object" && col.p !== null && "html" in col.p && col.p.html === true
-    ),
-    [data]
-  );
-  const options = useMemo(
-    () => ({
-      ...region !== "world" && { region },
-      ...resolution !== "countries" && { resolution },
-      colorAxis: { colors: [lightColorHex, fullColorHex] },
-      backgroundColor: backgroundColorHex,
-      datalessRegionColor: defaultFillColorHex,
-      defaultColor: defaultFillColorHex,
-      tooltip: { trigger: "focus", isHtml: hasHtmlTooltips },
-      legend: "none",
-      keepAspectRatio: true
-    }),
-    [
-      region,
-      resolution,
-      lightColorHex,
-      fullColorHex,
-      backgroundColorHex,
-      defaultFillColorHex,
-      hasHtmlTooltips
-    ]
-  );
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: clsx("geo-chart", geo_chart_module_default.container, className),
-      "data-testid": "geo-chart",
-      style: { width, height, backgroundColor },
-      children: /* @__PURE__ */ jsx(
-        Chart,
-        {
-          chartType: "GeoChart",
-          width,
-          height,
-          data,
-          options,
-          loader: loadingPlaceholder
-        }
-      )
-    }
-  );
-};
-var GeoChartWithProvider = (props) => {
-  const existingContext = useContext(GlobalChartsContext);
-  if (existingContext) {
-    return /* @__PURE__ */ jsx(GeoChartInternal, { ...props });
-  }
-  return /* @__PURE__ */ jsx(GlobalChartsProvider, { children: /* @__PURE__ */ jsx(GeoChartInternal, { ...props }) });
-};
-GeoChartWithProvider.displayName = "GeoChart";
-var GeoChartResponsive = withResponsive(GeoChartWithProvider);
-
-export {
-  GeoChartWithProvider,
-  GeoChartResponsive
-};
-//# sourceMappingURL=chunk-FWMJ2FR2.js.map

package/dist/chunk-FWMJ2FR2.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/charts/geo-chart/geo-chart.tsx","../src/charts/geo-chart/geo-chart.module.scss"],"sourcesContent":["/**\n * External dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport clsx from 'clsx';\nimport { FC, useContext, useMemo } from 'react';\nimport { Chart, type GoogleChartOptions } from 'react-google-charts';\n/**\n * Internal dependencies\n */\nimport { GlobalChartsContext, GlobalChartsProvider, useGlobalChartsContext } from '../../providers';\nimport { lightenHexColor, normalizeColorToHex } from '../../utils/color-utils';\nimport { resolveCssVariable } from '../../utils/resolve-css-var';\nimport { withResponsive } from '../private/with-responsive';\nimport styles from './geo-chart.module.scss';\nimport { GeoChartProps } from './types';\n\nconst DEFAULT_FEATURE_FILL_COLOR = '#ffffff';\nconst DEFAULT_BACKGROUND_COLOR = '#ffffff';\n\n/**\n * Renders a geographical chart using Google Charts GeoChart to visualize data.\n *\n * Supports the full Google Charts data format including custom tooltips, formatted values,\n * and multiple data columns for maximum flexibility.\n *\n * Locations can be identified by full name (e.g., 'United States', 'California') or codes\n * (e.g., 'US', 'US-CA'). Full names are recommended for better readability in tooltips.\n *\n * @param props                   - The props for the GeoChart component\n * @param props.data              - Data in Google Charts format (array of arrays with headers)\n * @param props.width             - Width of the chart in pixels\n * @param props.height            - Height of the chart in pixels\n * @param props.region            - Region to display ('world', 'US', or ISO 3166-1 alpha-2 code)\n * @param props.resolution        - Resolution level ('countries', 'provinces', or 'metros')\n * @param props.className         - Additional CSS class name for the chart container\n * @param props.renderPlaceholder - Optional render function for the loading placeholder\n * @return A React component displaying an interactive map with data visualization\n */\nconst GeoChartInternal: FC< GeoChartProps > = ( {\n\tclassName,\n\tdata,\n\twidth,\n\theight,\n\tregion = 'world',\n\tresolution = 'countries',\n\trenderPlaceholder,\n} ) => {\n\tconst {\n\t\tgetElementStyles,\n\t\ttheme: {\n\t\t\tgeoChart: { featureFillColor },\n\t\t\tbackgroundColor,\n\t\t},\n\t} = useGlobalChartsContext();\n\n\t// Render loading placeholder\n\tconst loadingPlaceholder = (\n\t\t<div\n\t\t\tclassName={ clsx( 'geo-chart', styles.container, className ) }\n\t\t\tdata-testid=\"geo-chart-loading\"\n\t\t\tstyle={ { width, height } }\n\t\t>\n\t\t\t{ renderPlaceholder ? renderPlaceholder() : __( 'Loading map', 'jetpack-charts' ) }\n\t\t</div>\n\t);\n\n\t// Google charts doesn't accept CSS variables, so we need to convert them to hex colors\n\tconst fullColorHex = getElementStyles( { index: 0 } ).color;\n\tconst lightColorHex = lightenHexColor( fullColorHex, 0.8 );\n\t// Use normalizeColorToHex to ensure HSL/RGB values from CSS variables are converted to hex\n\tconst backgroundColorHex =\n\t\tnormalizeColorToHex( backgroundColor, null, resolveCssVariable ) || DEFAULT_BACKGROUND_COLOR;\n\tconst defaultFillColorHex =\n\t\tnormalizeColorToHex( featureFillColor, null, resolveCssVariable ) || DEFAULT_FEATURE_FILL_COLOR;\n\n\t// Check if data has HTML tooltips (column with role: 'tooltip' and p.html: true)\n\tconst hasHtmlTooltips = useMemo(\n\t\t() =>\n\t\t\tdata.length > 0 &&\n\t\t\tdata[ 0 ].some(\n\t\t\t\tcol =>\n\t\t\t\t\ttypeof col === 'object' &&\n\t\t\t\t\tcol !== null &&\n\t\t\t\t\t'role' in col &&\n\t\t\t\t\tcol.role === 'tooltip' &&\n\t\t\t\t\t'p' in col &&\n\t\t\t\t\ttypeof col.p === 'object' &&\n\t\t\t\t\tcol.p !== null &&\n\t\t\t\t\t'html' in col.p &&\n\t\t\t\t\tcol.p.html === true\n\t\t\t),\n\t\t[ data ]\n\t);\n\n\tconst options: GoogleChartOptions = useMemo(\n\t\t() => ( {\n\t\t\t...( region !== 'world' && { region } ),\n\t\t\t...( resolution !== 'countries' && { resolution } ),\n\t\t\tcolorAxis: { colors: [ lightColorHex, fullColorHex ] },\n\t\t\tbackgroundColor: backgroundColorHex,\n\t\t\tdatalessRegionColor: defaultFillColorHex,\n\t\t\tdefaultColor: defaultFillColorHex,\n\t\t\ttooltip: { trigger: 'focus', isHtml: hasHtmlTooltips },\n\t\t\tlegend: 'none',\n\t\t\tkeepAspectRatio: true,\n\t\t} ),\n\t\t[\n\t\t\tregion,\n\t\t\tresolution,\n\t\t\tlightColorHex,\n\t\t\tfullColorHex,\n\t\t\tbackgroundColorHex,\n\t\t\tdefaultFillColorHex,\n\t\t\thasHtmlTooltips,\n\t\t]\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx( 'geo-chart', styles.container, className ) }\n\t\t\tdata-testid=\"geo-chart\"\n\t\t\tstyle={ { width, height, backgroundColor } }\n\t\t>\n\t\t\t<Chart\n\t\t\t\tchartType=\"GeoChart\"\n\t\t\t\twidth={ width }\n\t\t\t\theight={ height }\n\t\t\t\tdata={ data }\n\t\t\t\toptions={ options }\n\t\t\t\tloader={ loadingPlaceholder }\n\t\t\t/>\n\t\t</div>\n\t);\n};\n\nconst GeoChartWithProvider: FC< GeoChartProps > = props => {\n\tconst existingContext = useContext( GlobalChartsContext );\n\n\t// If we're already in a GlobalChartsProvider context, don't create a new one\n\tif ( existingContext ) {\n\t\treturn <GeoChartInternal { ...props } />;\n\t}\n\n\t// Otherwise, create our own GlobalChartsProvider\n\treturn (\n\t\t<GlobalChartsProvider>\n\t\t\t<GeoChartInternal { ...props } />\n\t\t</GlobalChartsProvider>\n\t);\n};\n\nGeoChartWithProvider.displayName = 'GeoChart';\n\nconst GeoChartResponsive = withResponsive< GeoChartProps >( GeoChartWithProvider );\n\nexport { GeoChartResponsive as default, GeoChartWithProvider as GeoChartUnresponsive };\n","import 'css-chunk:src/charts/geo-chart/geo-chart.module.scss';export default {\n  \"container\": \"a8ccharts-JvcqOz\"\n};"],"mappings":";;;;;;;;;;;;;;;AAGA,SAAS,UAAU;AACnB,OAAO,UAAU;AACjB,SAAa,YAAY,eAAe;AACxC,SAAS,aAAsC;;;ACNe,IAAO,2BAAQ;AAAA,EAC3E,aAAa;AACf;;;ADwDE;AAzCF,IAAM,6BAA6B;AACnC,IAAM,2BAA2B;AAqBjC,IAAM,mBAAwC,CAAE;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,aAAa;AAAA,EACb;AACD,MAAO;AACN,QAAM;AAAA,IACL;AAAA,IACA,OAAO;AAAA,MACN,UAAU,EAAE,iBAAiB;AAAA,MAC7B;AAAA,IACD;AAAA,EACD,IAAI,uBAAuB;AAG3B,QAAM,qBACL;AAAA,IAAC;AAAA;AAAA,MACA,WAAY,KAAM,aAAa,yBAAO,WAAW,SAAU;AAAA,MAC3D,eAAY;AAAA,MACZ,OAAQ,EAAE,OAAO,OAAO;AAAA,MAEtB,8BAAoB,kBAAkB,IAAI,GAAI,eAAe,gBAAiB;AAAA;AAAA,EACjF;AAID,QAAM,eAAe,iBAAkB,EAAE,OAAO,EAAE,CAAE,EAAE;AACtD,QAAM,gBAAgB,gBAAiB,cAAc,GAAI;AAEzD,QAAM,qBACL,oBAAqB,iBAAiB,MAAM,kBAAmB,KAAK;AACrE,QAAM,sBACL,oBAAqB,kBAAkB,MAAM,kBAAmB,KAAK;AAGtE,QAAM,kBAAkB;AAAA,IACvB,MACC,KAAK,SAAS,KACd,KAAM,CAAE,EAAE;AAAA,MACT,SACC,OAAO,QAAQ,YACf,QAAQ,QACR,UAAU,OACV,IAAI,SAAS,aACb,OAAO,OACP,OAAO,IAAI,MAAM,YACjB,IAAI,MAAM,QACV,UAAU,IAAI,KACd,IAAI,EAAE,SAAS;AAAA,IACjB;AAAA,IACD,CAAE,IAAK;AAAA,EACR;AAEA,QAAM,UAA8B;AAAA,IACnC,OAAQ;AAAA,MACP,GAAK,WAAW,WAAW,EAAE,OAAO;AAAA,MACpC,GAAK,eAAe,eAAe,EAAE,WAAW;AAAA,MAChD,WAAW,EAAE,QAAQ,CAAE,eAAe,YAAa,EAAE;AAAA,MACrD,iBAAiB;AAAA,MACjB,qBAAqB;AAAA,MACrB,cAAc;AAAA,MACd,SAAS,EAAE,SAAS,SAAS,QAAQ,gBAAgB;AAAA,MACrD,QAAQ;AAAA,MACR,iBAAiB;AAAA,IAClB;AAAA,IACA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAY,KAAM,aAAa,yBAAO,WAAW,SAAU;AAAA,MAC3D,eAAY;AAAA,MACZ,OAAQ,EAAE,OAAO,QAAQ,gBAAgB;AAAA,MAEzC;AAAA,QAAC;AAAA;AAAA,UACA,WAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,QAAS;AAAA;AAAA,MACV;AAAA;AAAA,EACD;AAEF;AAEA,IAAM,uBAA4C,WAAS;AAC1D,QAAM,kBAAkB,WAAY,mBAAoB;AAGxD,MAAK,iBAAkB;AACtB,WAAO,oBAAC,oBAAmB,GAAG,OAAQ;AAAA,EACvC;AAGA,SACC,oBAAC,wBACA,8BAAC,oBAAmB,GAAG,OAAQ,GAChC;AAEF;AAEA,qBAAqB,cAAc;AAEnC,IAAM,qBAAqB,eAAiC,oBAAqB;","names":[]}