@automattic/charts 1.1.0 → 1.1.1

package/dist/index.cjs

@@ -1630,1236 +1630,1241 @@ var _group = require('@visx/group');
 var _legend = require('@visx/legend');
 
 
+// ../../../node_modules/.pnpm/@base-ui+utils@0.2.6_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/useRefWithInit.js
 
+var UNINITIALIZED = {};
+function useRefWithInit(init, initArg) {
+  const ref = React.useRef(UNINITIALIZED);
+  if (ref.current === UNINITIALIZED) {
+    ref.current = init(initArg);
+  }
+  return ref;
+}
 
-// src/components/legend/utils/value-or-identity.ts
-function valueOrIdentity(_) {
-  if (_ && typeof _ === "object" && "value" in _ && typeof _.value !== "undefined")
-    return _.value;
-  return _;
+// ../../../node_modules/.pnpm/@base-ui+utils@0.2.6_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/warn.js
+var set;
+if (process.env.NODE_ENV !== "production") {
+  set = /* @__PURE__ */ new Set();
 }
-function valueOrIdentityString(_) {
-  return String(valueOrIdentity(_));
+function warn(...messages) {
+  if (process.env.NODE_ENV !== "production") {
+    const messageKey = messages.join(" ");
+    if (!set.has(messageKey)) {
+      set.add(messageKey);
+      console.warn(`Base UI: ${messageKey}`);
+    }
+  }
 }
 
-// src/components/legend/utils/label-transform-factory.ts
-function labelTransformFactory({
-  scale,
-  labelFormat
-}) {
-  return (d, i) => ({
-    datum: d,
-    index: i,
-    text: `${labelFormat(d, i)}`,
-    value: scale(d)
-  });
+// ../../../node_modules/.pnpm/@base-ui+utils@0.2.6_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/formatErrorMessage.js
+function createFormatErrorMessage(baseUrl, prefix2) {
+  return function formatErrorMessage2(code, ...args) {
+    const url = new URL(baseUrl);
+    url.searchParams.set("code", code.toString());
+    args.forEach((arg) => url.searchParams.append("args[]", arg));
+    return `${prefix2} error #${code}; visit ${url} for the full message.`;
+  };
 }
+var formatErrorMessage = createFormatErrorMessage("https://base-ui.com/production-error", "Base UI");
+var formatErrorMessage_default = formatErrorMessage;
 
-// src/components/legend/private/base-legend.module.scss
-var base_legend_module_default = {
-  "legend": "a8ccharts-89ApsU",
-  "legend--horizontal": "a8ccharts-AELBvX",
-  "legend--vertical": "a8ccharts-fX8uQe",
-  "legend--alignment-start": "a8ccharts-DEe0wg",
-  "legend--alignment-center": "a8ccharts-WBKF9I",
-  "legend--alignment-end": "a8ccharts-JfwMng",
-  "legend-item": "a8ccharts-Vflwq8",
-  "legend-item--interactive": "a8ccharts-qGsavM",
-  "legend-item--inactive": "a8ccharts-ZtDY-Q",
-  "legend-item-label": "a8ccharts-2H65Kr",
-  "legend-item-text--wrap": "a8ccharts-faSDBI",
-  "legend-item-text--ellipsis": "a8ccharts-FISUIO",
-  "legend-item-value": "a8ccharts-DTZlT-"
-};
-
-// src/components/legend/private/base-legend.tsx
-
-var orientationToFlexDirection = {
-  horizontal: "row",
-  vertical: "column"
-};
-var LegendText = ({
-  text,
-  textOverflow,
-  maxWidth
-}) => {
-  const isEllipsis = maxWidth != null && textOverflow === "ellipsis";
-  const [textRef, isTruncated] = useTextTruncation(Boolean(isEllipsis));
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {
-    ref: textRef,
-    className: _clsx2.default.call(void 0, base_legend_module_default["legend-item-text"], maxWidth != null && base_legend_module_default[`legend-item-text--${textOverflow}`]),
-    style: {
-      ...maxWidth != null && {
-        maxWidth,
-        minWidth: 0
-      }
-    },
-    title: isEllipsis && isTruncated ? text : void 0,
-    children: text
-  });
-};
-var BaseLegend = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
-  items,
-  className,
-  orientation = "horizontal",
-  alignment = "center",
-  shape = "rect",
-  fill = valueOrIdentityString,
-  size = valueOrIdentityString,
-  labelFormat = valueOrIdentity,
-  labelTransform = labelTransformFactory,
-  itemStyles,
-  itemClassName,
-  labelStyles,
-  labelClassName,
-  shapeStyles,
-  render,
-  interactive = false,
-  chartId
-}, ref) => {
-  const {
-    margin: itemMargin = "0",
-    flexDirection: itemDirection = "row"
-  } = _nullishCoalesce(itemStyles, () => ( {}));
-  const {
-    justifyContent: labelJustifyContent = "flex-start",
-    flex: labelFlex = "0 0 auto",
-    margin: labelMargin = "0 4px",
-    maxWidth,
-    textOverflow = "wrap"
-  } = _nullishCoalesce(labelStyles, () => ( {}));
-  const {
-    width: shapeWidth = 16,
-    height: shapeHeight = 16,
-    margin: shapeMargin = "2px 4px 2px 0"
-  } = _nullishCoalesce(shapeStyles, () => ( {}));
-  const theme = useGlobalChartsTheme();
-  const context = _react.useContext.call(void 0, GlobalChartsContext);
-  const legendScale = _scale.scaleOrdinal.call(void 0, {
-    domain: items.map((item) => item.label),
-    range: items.map((item) => item.color)
-  });
-  const domain = legendScale.domain();
-  const getShapeStyle = _react.useCallback.call(void 0, ({
-    index
-  }) => _optionalChain([items, 'access', _60 => _60[index], 'optionalAccess', _61 => _61.shapeStyle]), [items]);
-  const handleLegendClick = _react.useCallback.call(void 0, (seriesLabel) => {
-    if (interactive && chartId && context) {
-      context.toggleSeriesVisibility(chartId, seriesLabel);
-    }
-  }, [interactive, chartId, context]);
-  const isSeriesVisible = _react.useCallback.call(void 0, (seriesLabel) => {
-    if (!interactive || !chartId || !context) {
-      return true;
-    }
-    return context.isSeriesVisible(chartId, seriesLabel);
-  }, [interactive, chartId, context]);
-  const createClickHandler = _react.useCallback.call(void 0, (labelText) => {
-    if (!interactive) {
-      return void 0;
-    }
-    return () => handleLegendClick(labelText);
-  }, [interactive, handleLegendClick]);
-  const createKeyDownHandler = _react.useCallback.call(void 0, (labelText) => {
-    if (!interactive) {
-      return void 0;
-    }
-    return (event) => {
-      if (event.key === "Enter" || event.key === " ") {
-        event.preventDefault();
-        handleLegendClick(labelText);
-      }
-    };
-  }, [interactive, handleLegendClick]);
-  return render ? render(items) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _legend.LegendOrdinal, {
-    scale: legendScale,
-    labelFormat,
-    labelTransform,
-    children: (labels) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-      ref,
-      role: "list",
-      className: _clsx2.default.call(void 0, base_legend_module_default.legend, base_legend_module_default[`legend--${orientation}`], base_legend_module_default[`legend--alignment-${alignment}`], className),
-      style: {
-        flexDirection: orientationToFlexDirection[orientation],
-        ..._optionalChain([theme, 'access', _62 => _62.legend, 'optionalAccess', _63 => _63.containerStyles])
-      },
-      children: labels.map((label, i) => {
-        const visible = isSeriesVisible(label.text);
-        const handleClick = createClickHandler(label.text);
-        const handleKeyDown = createKeyDownHandler(label.text);
-        const matchedItem = items[i];
-        return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _legend.LegendItem, {
-          className: _clsx2.default.call(void 0, "visx-legend-item", base_legend_module_default["legend-item"], interactive && base_legend_module_default["legend-item--interactive"], !visible && base_legend_module_default["legend-item--inactive"], itemClassName),
-          margin: itemMargin,
-          flexDirection: orientation === "vertical" && alignment === "end" ? "row-reverse" : itemDirection,
-          onClick: handleClick,
-          onKeyDown: handleKeyDown,
-          role: interactive ? "button" : void 0,
-          tabIndex: interactive ? 0 : void 0,
-          "aria-pressed": interactive ? visible : void 0,
-          "aria-label": interactive ? `${label.text}: ${visible ? "visible" : "hidden"}. Toggle visibility.` : void 0,
-          children: [_optionalChain([items, 'access', _64 => _64[i], 'optionalAccess', _65 => _65.renderGlyph]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", {
-            width: _optionalChain([items, 'access', _66 => _66[i], 'optionalAccess', _67 => _67.glyphSize]) * 2,
-            height: _optionalChain([items, 'access', _68 => _68[i], 'optionalAccess', _69 => _69.glyphSize]) * 2,
-            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _group.Group, {
-              children: _optionalChain([items, 'access', _70 => _70[i], 'optionalAccess', _71 => _71.renderGlyph, 'call', _72 => _72({
-                key: `legend-glyph-${label.text}`,
-                datum: {},
-                index: i,
-                color: fill(label),
-                size: _optionalChain([items, 'access', _73 => _73[i], 'optionalAccess', _74 => _74.glyphSize]),
-                x: _optionalChain([items, 'access', _75 => _75[i], 'optionalAccess', _76 => _76.glyphSize]),
-                y: _optionalChain([items, 'access', _77 => _77[i], 'optionalAccess', _78 => _78.glyphSize])
-              })])
-            })
-          }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _legend.LegendShape, {
-            shape,
-            height: shapeHeight,
-            width: shapeWidth,
-            margin: shapeMargin,
-            item: domain[i],
-            itemIndex: i,
-            label,
-            fill,
-            size,
-            shapeStyle: getShapeStyle
-          }), /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _legend.LegendLabel, {
-            className: _clsx2.default.call(void 0, "visx-legend-label", base_legend_module_default["legend-item-label"], labelClassName),
-            style: {
-              justifyContent: labelJustifyContent,
-              flex: labelFlex,
-              margin: labelMargin,
-              ..._optionalChain([theme, 'access', _79 => _79.legend, 'optionalAccess', _80 => _80.labelStyles])
-            },
-            children: [/* @__PURE__ */ _jsxruntime.jsx.call(void 0, LegendText, {
-              text: label.text,
-              textOverflow,
-              maxWidth
-            }), _optionalChain([matchedItem, 'optionalAccess', _81 => _81.value]) != null && matchedItem.value !== "" && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", {
-              className: base_legend_module_default["legend-item-value"],
-              children: ["\xA0", matchedItem.value]
-            })]
-          })]
-        }, `legend-${label.text}-${i}`);
-      })
-    })
-  });
-});
+// ../../../node_modules/.pnpm/@base-ui+react@1.3.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/utils/useRenderElement.js
 
-// src/components/legend/legend.tsx
 
-var defaultShapeByChartType = {
-  line: "line",
-  bar: "rect",
-  pie: "circle",
-  "pie-semi-circle": "circle",
-  leaderboard: "circle"
-};
-var Legend = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
-  chartId,
-  items,
-  shape,
-  ...props
-}, ref) => {
-  const context = _react.useContext.call(void 0, GlobalChartsContext);
-  const singleChartContext = _react.useContext.call(void 0, SingleChartContext);
-  const contextChartId = _nullishCoalesce(chartId, () => ( _optionalChain([singleChartContext, 'optionalAccess', _82 => _82.chartId])));
-  const chartData = _react.useMemo.call(void 0, () => contextChartId && context ? context.getChartData(contextChartId) : void 0, [contextChartId, context]);
-  const contextItems = _optionalChain([chartData, 'optionalAccess', _83 => _83.legendItems]);
-  const resolvedShape = _nullishCoalesce(shape, () => ( (_optionalChain([chartData, 'optionalAccess', _84 => _84.chartType]) ? defaultShapeByChartType[chartData.chartType] : void 0)));
-  const legendItems = items || contextItems;
-  if (!legendItems) {
-    return null;
+// ../../../node_modules/.pnpm/@base-ui+utils@0.2.6_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/useMergedRefs.js
+function useMergedRefs(a, b, c, d) {
+  const forkRef = useRefWithInit(createForkRef).current;
+  if (didChange(forkRef, a, b, c, d)) {
+    update(forkRef, [a, b, c, d]);
   }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BaseLegend, {
-    ref,
-    items: legendItems,
-    shape: resolvedShape,
-    ...props,
-    chartId: contextChartId
-  });
-});
-
-// src/components/legend/hooks/use-chart-legend-items.ts
-
-
-function formatPointValue(point, showValues, legendValueDisplay = "percentage") {
-  if (!showValues || legendValueDisplay === "none") {
-    return "";
+  return forkRef.callback;
+}
+function useMergedRefsN(refs) {
+  const forkRef = useRefWithInit(createForkRef).current;
+  if (didChangeN(forkRef, refs)) {
+    update(forkRef, refs);
   }
-  if ("percentage" in point) {
-    switch (legendValueDisplay) {
-      case "percentage":
-        return formatPercentage(point.percentage);
-      case "value":
-        return _numberformatters.formatNumber.call(void 0, point.value);
-      case "valueDisplay":
-        return point.valueDisplay || _numberformatters.formatNumber.call(void 0, point.value);
-      default:
-        return "";
-    }
-  }
-  if ("value" in point) {
-    return point.value !== null ? _numberformatters.formatNumber.call(void 0, point.value) : "";
-  }
-  return "";
-}
-function applyGlyphToLegendItem(baseItem, withGlyph, glyph, renderGlyph, glyphSize) {
-  if (withGlyph) {
-    const glyphToUse = glyph || renderGlyph;
-    if (glyphToUse) {
-      return {
-        ...baseItem,
-        glyphSize,
-        renderGlyph: glyphToUse
-      };
-    }
-  }
-  return baseItem;
+  return forkRef.callback;
 }
-function processSeriesData(seriesData, getElementStyles, showValues, withGlyph, glyphSize, renderGlyph, legendShape) {
-  const mapper = (series, index) => {
-    const { color, glyph, shapeStyles } = getElementStyles({
-      data: series,
-      index,
-      legendShape
-    });
-    const baseItem = {
-      label: series.label,
-      value: showValues ? _optionalChain([series, 'access', _85 => _85.data, 'optionalAccess', _86 => _86.length, 'optionalAccess', _87 => _87.toString, 'call', _88 => _88()]) || "0" : "",
-      color,
-      shapeStyle: shapeStyles
-    };
-    return applyGlyphToLegendItem(baseItem, withGlyph, glyph, renderGlyph, glyphSize);
+function createForkRef() {
+  return {
+    callback: null,
+    cleanup: null,
+    refs: []
   };
-  return seriesData.map(mapper);
 }
-function processPointData(pointData, getElementStyles, showValues, legendValueDisplay, withGlyph, glyphSize, renderGlyph, legendShape) {
-  const mapper = (point, index) => {
-    const { color, glyph, shapeStyles } = getElementStyles({
-      data: point,
-      index,
-      legendShape
-    });
-    const baseItem = {
-      label: point.label,
-      value: formatPointValue(point, showValues, legendValueDisplay),
-      color,
-      shapeStyle: shapeStyles
-    };
-    return applyGlyphToLegendItem(baseItem, withGlyph, glyph, renderGlyph, glyphSize);
-  };
-  return pointData.map(mapper);
+function didChange(forkRef, a, b, c, d) {
+  return forkRef.refs[0] !== a || forkRef.refs[1] !== b || forkRef.refs[2] !== c || forkRef.refs[3] !== d;
 }
-function useChartLegendItems(data, options = {}, legendShape) {
-  const {
-    showValues = false,
-    legendValueDisplay = "percentage",
-    withGlyph = false,
-    glyphSize = 8,
-    renderGlyph
-  } = options;
-  const { getElementStyles } = useGlobalChartsContext();
-  return _react.useMemo.call(void 0, () => {
-    if (!data || !Array.isArray(data) || data.length === 0) {
-      return [];
+function didChangeN(forkRef, newRefs) {
+  return forkRef.refs.length !== newRefs.length || forkRef.refs.some((ref, index) => ref !== newRefs[index]);
+}
+function update(forkRef, refs) {
+  forkRef.refs = refs;
+  if (refs.every((ref) => ref == null)) {
+    forkRef.callback = null;
+    return;
+  }
+  forkRef.callback = (instance) => {
+    if (forkRef.cleanup) {
+      forkRef.cleanup();
+      forkRef.cleanup = null;
     }
-    if ("data" in data[0]) {
-      return processSeriesData(
-        data,
-        getElementStyles,
-        showValues,
-        withGlyph,
-        glyphSize,
-        renderGlyph,
-        legendShape
-      );
+    if (instance != null) {
+      const cleanupCallbacks = Array(refs.length).fill(null);
+      for (let i = 0; i < refs.length; i += 1) {
+        const ref = refs[i];
+        if (ref == null) {
+          continue;
+        }
+        switch (typeof ref) {
+          case "function": {
+            const refCleanup = ref(instance);
+            if (typeof refCleanup === "function") {
+              cleanupCallbacks[i] = refCleanup;
+            }
+            break;
+          }
+          case "object": {
+            ref.current = instance;
+            break;
+          }
+          default:
+        }
+      }
+      forkRef.cleanup = () => {
+        for (let i = 0; i < refs.length; i += 1) {
+          const ref = refs[i];
+          if (ref == null) {
+            continue;
+          }
+          switch (typeof ref) {
+            case "function": {
+              const cleanupCallback = cleanupCallbacks[i];
+              if (typeof cleanupCallback === "function") {
+                cleanupCallback();
+              } else {
+                ref(null);
+              }
+              break;
+            }
+            case "object": {
+              ref.current = null;
+              break;
+            }
+            default:
+          }
+        }
+      };
     }
-    return processPointData(
-      data,
-      getElementStyles,
-      showValues,
-      legendValueDisplay,
-      withGlyph,
-      glyphSize,
-      renderGlyph,
-      legendShape
-    );
-  }, [
-    data,
-    getElementStyles,
-    showValues,
-    legendValueDisplay,
-    withGlyph,
-    glyphSize,
-    renderGlyph,
-    legendShape
-  ]);
+  };
 }
 
-// src/components/tooltip/base-tooltip.tsx
+// ../../../node_modules/.pnpm/@base-ui+utils@0.2.6_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/getReactElementRef.js
 
 
-// src/components/tooltip/base-tooltip.module.scss
-var base_tooltip_module_default = {
-  "tooltip": "a8ccharts-OfX6nd"
-};
+// ../../../node_modules/.pnpm/@base-ui+utils@0.2.6_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/reactVersion.js
 
-// src/components/tooltip/base-tooltip.tsx
+var majorVersion = parseInt(React2.version, 10);
+function isReactVersionAtLeast(reactVersionToCheck) {
+  return majorVersion >= reactVersionToCheck;
+}
 
-var DefaultTooltipContent = ({
-  data
-}) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, {
-  children: [_optionalChain([data, 'optionalAccess', _89 => _89.label]), ": ", _optionalChain([data, 'optionalAccess', _90 => _90.valueDisplay]) || _numberformatters.formatNumber.call(void 0, _optionalChain([data, 'optionalAccess', _91 => _91.value]))]
-});
-var BaseTooltip = ({
-  data,
-  top,
-  left,
-  component: Component2 = DefaultTooltipContent,
-  children,
-  className,
-  style,
-  renderContainer = true
-}) => {
-  const content = children || data && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component2, {
-    data,
-    className
-  });
-  if (!renderContainer) {
-    return content;
+// ../../../node_modules/.pnpm/@base-ui+utils@0.2.6_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/getReactElementRef.js
+function getReactElementRef(element) {
+  if (!/* @__PURE__ */ React3.isValidElement(element)) {
+    return null;
   }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-    className: base_tooltip_module_default.tooltip,
-    style: {
-      top,
-      left,
-      ...style
-    },
-    role: "tooltip",
-    children: content
-  });
-};
-
-// src/components/tooltip/accessible-tooltip.tsx
+  const reactElement = element;
+  const propsWithRef = reactElement.props;
+  return _nullishCoalesce((isReactVersionAtLeast(19) ? _optionalChain([propsWithRef, 'optionalAccess', _60 => _60.ref]) : reactElement.ref), () => ( null));
+}
 
+// ../../../node_modules/.pnpm/@base-ui+utils@0.2.6_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/mergeObjects.js
+function mergeObjects(a, b) {
+  if (a && !b) {
+    return a;
+  }
+  if (!a && b) {
+    return b;
+  }
+  if (a || b) {
+    return {
+      ...a,
+      ...b
+    };
+  }
+  return void 0;
+}
 
+// ../../../node_modules/.pnpm/@base-ui+react@1.3.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/utils/getStateAttributesProps.js
+function getStateAttributesProps(state, customMapping) {
+  const props = {};
+  for (const key in state) {
+    const value = state[key];
+    if (_optionalChain([customMapping, 'optionalAccess', _61 => _61.hasOwnProperty, 'call', _62 => _62(key)])) {
+      const customProps = customMapping[key](value);
+      if (customProps != null) {
+        Object.assign(props, customProps);
+      }
+      continue;
+    }
+    if (value === true) {
+      props[`data-${key.toLowerCase()}`] = "";
+    } else if (value) {
+      props[`data-${key.toLowerCase()}`] = value.toString();
+    }
+  }
+  return props;
+}
 
-var AccessibleTooltip = ({
-  renderTooltip,
-  selectedIndex,
-  tooltipRef,
-  keyboardFocusedClassName,
-  series = [],
-  mode = "group",
-  ...props
-}) => {
-  const tooltipContext = _react.useContext.call(void 0, _xychart.TooltipContext);
-  const tooltipData = _react.useMemo.call(void 0, () => {
-    if (mode !== "individual") return [];
-    if (series.length === 0) return [];
-    const maxDataPoints = Math.max(...series.map((s) => s.data.length));
-    const flattened = [];
-    for (let dataPointIndex = 0; dataPointIndex < maxDataPoints; dataPointIndex++) {
-      for (let seriesIndex = 0; seriesIndex < series.length; seriesIndex++) {
-        const seriesData = series[seriesIndex];
-        if (dataPointIndex < seriesData.data.length) {
-          flattened.push({
-            datum: seriesData.data[dataPointIndex],
-            seriesLabel: seriesData.label,
-            seriesIndex,
-            dataPointIndex
-          });
-        }
+// ../../../node_modules/.pnpm/@base-ui+react@1.3.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/utils/resolveClassName.js
+function resolveClassName(className, state) {
+  return typeof className === "function" ? className(state) : className;
+}
+
+// ../../../node_modules/.pnpm/@base-ui+react@1.3.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/utils/resolveStyle.js
+function resolveStyle(style, state) {
+  return typeof style === "function" ? style(state) : style;
+}
+
+// ../../../node_modules/.pnpm/@base-ui+react@1.3.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/merge-props/mergeProps.js
+var EMPTY_PROPS = {};
+function mergeProps(a, b, c, d, e) {
+  let merged = {
+    ...resolvePropsGetter(a, EMPTY_PROPS)
+  };
+  if (b) {
+    merged = mergeOne(merged, b);
+  }
+  if (c) {
+    merged = mergeOne(merged, c);
+  }
+  if (d) {
+    merged = mergeOne(merged, d);
+  }
+  if (e) {
+    merged = mergeOne(merged, e);
+  }
+  return merged;
+}
+function mergePropsN(props) {
+  if (props.length === 0) {
+    return EMPTY_PROPS;
+  }
+  if (props.length === 1) {
+    return resolvePropsGetter(props[0], EMPTY_PROPS);
+  }
+  let merged = {
+    ...resolvePropsGetter(props[0], EMPTY_PROPS)
+  };
+  for (let i = 1; i < props.length; i += 1) {
+    merged = mergeOne(merged, props[i]);
+  }
+  return merged;
+}
+function mergeOne(merged, inputProps) {
+  if (isPropsGetter(inputProps)) {
+    return inputProps(merged);
+  }
+  return mutablyMergeInto(merged, inputProps);
+}
+function mutablyMergeInto(mergedProps, externalProps) {
+  if (!externalProps) {
+    return mergedProps;
+  }
+  for (const propName in externalProps) {
+    const externalPropValue = externalProps[propName];
+    switch (propName) {
+      case "style": {
+        mergedProps[propName] = mergeObjects(mergedProps.style, externalPropValue);
+        break;
       }
-    }
-    return flattened;
-  }, [series, mode]);
-  _react.useEffect.call(void 0, () => {
-    if (selectedIndex === void 0) {
-      _optionalChain([tooltipContext, 'optionalAccess', _92 => _92.hideTooltip, 'call', _93 => _93()]);
-      return;
-    }
-    if (mode === "group") {
-      series.forEach((s, index) => {
-        if (selectedIndex < s.data.length) {
-          const datum = s.data[selectedIndex];
-          _optionalChain([tooltipContext, 'optionalAccess', _94 => _94.showTooltip, 'call', _95 => _95({
-            datum,
-            key: s.label,
-            index
-          })]);
+      case "className": {
+        mergedProps[propName] = mergeClassNames(mergedProps.className, externalPropValue);
+        break;
+      }
+      default: {
+        if (isEventHandler(propName, externalPropValue)) {
+          mergedProps[propName] = mergeEventHandlers(mergedProps[propName], externalPropValue);
+        } else {
+          mergedProps[propName] = externalPropValue;
         }
-      });
-    } else if (mode === "individual") {
-      if (selectedIndex < tooltipData.length) {
-        const tooltipItem = tooltipData[selectedIndex];
-        _optionalChain([tooltipContext, 'optionalAccess', _96 => _96.showTooltip, 'call', _97 => _97({
-          datum: tooltipItem.datum,
-          key: tooltipItem.seriesLabel,
-          index: tooltipItem.seriesIndex
-        })]);
       }
     }
-  }, [selectedIndex, tooltipData, series]);
-  const focusableRenderTooltip = _react.useMemo.call(void 0, () => {
-    if (!renderTooltip) return void 0;
-    return (params) => {
-      const tooltipContent = renderTooltip(params);
-      if (selectedIndex !== void 0) {
-        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-          ref: tooltipRef,
-          tabIndex: -1,
-          role: "tooltip",
-          "aria-atomic": "true",
-          className: keyboardFocusedClassName,
-          children: tooltipContent
-        }, `chart-tooltip-${selectedIndex}`);
+  }
+  return mergedProps;
+}
+function isEventHandler(key, value) {
+  const code0 = key.charCodeAt(0);
+  const code1 = key.charCodeAt(1);
+  const code2 = key.charCodeAt(2);
+  return code0 === 111 && code1 === 110 && code2 >= 65 && code2 <= 90 && (typeof value === "function" || typeof value === "undefined");
+}
+function isPropsGetter(inputProps) {
+  return typeof inputProps === "function";
+}
+function resolvePropsGetter(inputProps, previousProps) {
+  if (isPropsGetter(inputProps)) {
+    return inputProps(previousProps);
+  }
+  return _nullishCoalesce(inputProps, () => ( EMPTY_PROPS));
+}
+function mergeEventHandlers(ourHandler, theirHandler) {
+  if (!theirHandler) {
+    return ourHandler;
+  }
+  if (!ourHandler) {
+    return theirHandler;
+  }
+  return (event) => {
+    if (isSyntheticEvent(event)) {
+      const baseUIEvent = event;
+      makeEventPreventable(baseUIEvent);
+      const result2 = theirHandler(baseUIEvent);
+      if (!baseUIEvent.baseUIHandlerPrevented) {
+        _optionalChain([ourHandler, 'optionalCall', _63 => _63(baseUIEvent)]);
       }
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-        role: "tooltip",
-        "aria-live": "polite",
-        children: tooltipContent
-      });
-    };
-  }, [renderTooltip, selectedIndex, tooltipRef, keyboardFocusedClassName]);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _xychart.Tooltip, {
-    ...props,
-    renderTooltip: focusableRenderTooltip
-  });
-};
-var useKeyboardNavigation = ({
-  selectedIndex,
-  setSelectedIndex,
-  isNavigating,
-  setIsNavigating,
-  chartRef,
-  totalPoints
-}) => {
-  const tooltipRef = _react.useCallback.call(void 0, (element) => {
-    if (element && selectedIndex !== void 0) {
-      element.focus();
-    }
-  }, [selectedIndex]);
-  const onChartFocus = _react.useCallback.call(void 0, () => {
-    if (!isNavigating && selectedIndex !== void 0) {
-      setSelectedIndex(0);
-    }
-  }, [isNavigating, selectedIndex, setSelectedIndex]);
-  const onChartBlur = _react.useCallback.call(void 0, () => {
-    setIsNavigating(false);
-  }, [setIsNavigating]);
-  const onChartKeyDown = _react.useCallback.call(void 0, (event) => {
-    if (totalPoints === 0) return;
-    if (event.key === "Tab") {
-      _optionalChain([chartRef, 'access', _98 => _98.current, 'optionalAccess', _99 => _99.focus, 'call', _100 => _100()]);
-      setSelectedIndex(void 0);
-      setIsNavigating(false);
-      return;
-    }
-    const currentSelectedIndex = selectedIndex === void 0 ? -1 : selectedIndex;
-    if (currentSelectedIndex + 1 >= totalPoints && ["ArrowRight"].includes(event.key)) {
-      _optionalChain([chartRef, 'access', _101 => _101.current, 'optionalAccess', _102 => _102.focus, 'call', _103 => _103()]);
-      setSelectedIndex(void 0);
-      setIsNavigating(false);
-      return;
-    }
-    event.preventDefault();
-    if (["ArrowRight"].includes(event.key)) {
-      setIsNavigating(true);
-      setSelectedIndex((currentSelectedIndex + 1) % totalPoints);
-    } else if (["ArrowLeft"].includes(event.key)) {
-      setIsNavigating(true);
-      setSelectedIndex((currentSelectedIndex - 1 + totalPoints) % totalPoints);
-    } else if (event.key === "Escape") {
-      setSelectedIndex(void 0);
-      setIsNavigating(false);
-      _optionalChain([chartRef, 'access', _104 => _104.current, 'optionalAccess', _105 => _105.focus, 'call', _106 => _106()]);
+      return result2;
     }
-  }, [totalPoints, selectedIndex, setSelectedIndex, setIsNavigating, chartRef]);
-  return {
-    tooltipRef,
-    onChartFocus,
-    onChartBlur,
-    onChartKeyDown
+    const result = theirHandler(event);
+    _optionalChain([ourHandler, 'optionalCall', _64 => _64(event)]);
+    return result;
   };
-};
+}
+function makeEventPreventable(event) {
+  event.preventBaseUIHandler = () => {
+    event.baseUIHandlerPrevented = true;
+  };
+  return event;
+}
+function mergeClassNames(ourClassName, theirClassName) {
+  if (theirClassName) {
+    if (ourClassName) {
+      return theirClassName + " " + ourClassName;
+    }
+    return theirClassName;
+  }
+  return ourClassName;
+}
+function isSyntheticEvent(event) {
+  return event != null && typeof event === "object" && "nativeEvent" in event;
+}
 
-// src/charts/private/chart-composition/chart-svg.tsx
+// ../../../node_modules/.pnpm/@base-ui+utils@0.2.6_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/empty.js
+var EMPTY_ARRAY = Object.freeze([]);
+var EMPTY_OBJECT = Object.freeze({});
 
-var ChartSVG = ({
-  children
-}) => {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, {
-    children
-  });
-};
-ChartSVG.displayName = "Chart.SVG";
-
-// src/charts/private/chart-composition/chart-html.tsx
-
-var ChartHTML = ({
-  children
-}) => {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, {
-    children
-  });
-};
-ChartHTML.displayName = "Chart.HTML";
+// ../../../node_modules/.pnpm/@base-ui+react@1.3.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/utils/constants.js
+var BASE_UI_SWIPE_IGNORE_ATTRIBUTE = "data-base-ui-swipe-ignore";
+var LEGACY_SWIPE_IGNORE_ATTRIBUTE = "data-swipe-ignore";
+var BASE_UI_SWIPE_IGNORE_SELECTOR = `[${BASE_UI_SWIPE_IGNORE_ATTRIBUTE}]`;
+var LEGACY_SWIPE_IGNORE_SELECTOR = `[${LEGACY_SWIPE_IGNORE_ATTRIBUTE}]`;
 
-// src/charts/private/chart-composition/render-legend-slot.ts
+// ../../../node_modules/.pnpm/@base-ui+react@1.3.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/utils/useRenderElement.js
 
-function renderLegendSlot(legendChildren, position2) {
-  return legendChildren.filter((l) => l.position === position2).map(
-    (l, i) => _react.createElement.call(void 0, _react.Fragment, { key: `legend-${position2}-${i}` }, l.element)
-  );
+function useRenderElement(element, componentProps, params = {}) {
+  const renderProp = componentProps.render;
+  const outProps = useRenderElementProps(componentProps, params);
+  if (params.enabled === false) {
+    return null;
+  }
+  const state = _nullishCoalesce(params.state, () => ( EMPTY_OBJECT));
+  return evaluateRenderProp(element, renderProp, outProps, state);
 }
-
-// src/charts/private/chart-composition/use-chart-children.ts
-
-
-function useChartChildren(children, chartType) {
-  return _react.useMemo.call(void 0, () => {
-    const svg = [];
-    const html = [];
-    const legend = [];
-    const other = [];
-    const nonLegend = [];
-    _react.Children.forEach(children, (child) => {
-      if (_react.isValidElement.call(void 0, child)) {
-        if (child.type === Legend) {
-          const rawPosition = _optionalChain([child, 'access', _107 => _107.props, 'optionalAccess', _108 => _108.position]);
-          const position2 = rawPosition === "top" || rawPosition === "bottom" ? rawPosition : "bottom";
-          legend.push({ element: child, position: position2 });
-          return;
-        }
-        const childType = child.type;
-        const displayName = _optionalChain([childType, 'optionalAccess', _109 => _109.displayName]);
-        if (displayName === `${chartType}.SVG` || displayName === "Chart.SVG") {
-          if (_optionalChain([child, 'access', _110 => _110.props, 'optionalAccess', _111 => _111.children])) {
-            _react.Children.forEach(child.props.children, (svgChild) => {
-              svg.push(svgChild);
-            });
-          }
-        } else if (displayName === `${chartType}.HTML` || displayName === "Chart.HTML") {
-          if (_optionalChain([child, 'access', _112 => _112.props, 'optionalAccess', _113 => _113.children])) {
-            _react.Children.forEach(child.props.children, (htmlChild) => {
-              html.push(htmlChild);
-            });
-          }
-        } else if (child.type === _group.Group) {
-          svg.push(child);
-        } else {
-          other.push(child);
-        }
-      }
-      nonLegend.push(child);
-    });
-    return {
-      svgChildren: svg,
-      htmlChildren: html,
-      legendChildren: legend,
-      otherChildren: other,
-      nonLegendChildren: nonLegend
-    };
-  }, [children, chartType]);
+function useRenderElementProps(componentProps, params = {}) {
+  const {
+    className: classNameProp,
+    style: styleProp,
+    render: renderProp
+  } = componentProps;
+  const {
+    state = EMPTY_OBJECT,
+    ref,
+    props,
+    stateAttributesMapping,
+    enabled = true
+  } = params;
+  const className = enabled ? resolveClassName(classNameProp, state) : void 0;
+  const style = enabled ? resolveStyle(styleProp, state) : void 0;
+  const stateProps = enabled ? getStateAttributesProps(state, stateAttributesMapping) : EMPTY_OBJECT;
+  const outProps = enabled ? _nullishCoalesce(mergeObjects(stateProps, Array.isArray(props) ? mergePropsN(props) : props), () => ( EMPTY_OBJECT)) : EMPTY_OBJECT;
+  if (typeof document !== "undefined") {
+    if (!enabled) {
+      useMergedRefs(null, null);
+    } else if (Array.isArray(ref)) {
+      outProps.ref = useMergedRefsN([outProps.ref, getReactElementRef(renderProp), ...ref]);
+    } else {
+      outProps.ref = useMergedRefs(outProps.ref, getReactElementRef(renderProp), ref);
+    }
+  }
+  if (!enabled) {
+    return EMPTY_OBJECT;
+  }
+  if (className !== void 0) {
+    outProps.className = mergeClassNames(outProps.className, className);
+  }
+  if (style !== void 0) {
+    outProps.style = mergeObjects(outProps.style, style);
+  }
+  return outProps;
 }
-
-// ../../../node_modules/.pnpm/@base-ui+utils@0.2.6_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/useRefWithInit.js
-
-var UNINITIALIZED = {};
-function useRefWithInit(init, initArg) {
-  const ref = React.useRef(UNINITIALIZED);
-  if (ref.current === UNINITIALIZED) {
-    ref.current = init(initArg);
+var REACT_LAZY_TYPE = /* @__PURE__ */ Symbol.for("react.lazy");
+function evaluateRenderProp(element, render, props, state) {
+  if (render) {
+    if (typeof render === "function") {
+      if (process.env.NODE_ENV !== "production") {
+        warnIfRenderPropLooksLikeComponent(render);
+      }
+      return render(props, state);
+    }
+    const mergedProps = mergeProps(props, render.props);
+    mergedProps.ref = props.ref;
+    let newElement = render;
+    if (_optionalChain([newElement, 'optionalAccess', _65 => _65.$$typeof]) === REACT_LAZY_TYPE) {
+      const children = React4.Children.toArray(render);
+      newElement = children[0];
+    }
+    if (process.env.NODE_ENV !== "production") {
+      if (!/* @__PURE__ */ React4.isValidElement(newElement)) {
+        throw new Error(["Base UI: The `render` prop was provided an invalid React element as `React.isValidElement(render)` is `false`.", "A valid React element must be provided to the `render` prop because it is cloned with props to replace the default element.", "https://base-ui.com/r/invalid-render-prop"].join("\n"));
+      }
+    }
+    return /* @__PURE__ */ React4.cloneElement(newElement, mergedProps);
   }
-  return ref;
+  if (element) {
+    if (typeof element === "string") {
+      return renderTag(element, props);
+    }
+  }
+  throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: Render element or function are not defined." : formatErrorMessage_default(8));
 }
-
-// ../../../node_modules/.pnpm/@base-ui+utils@0.2.6_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/warn.js
-var set;
-if (process.env.NODE_ENV !== "production") {
-  set = /* @__PURE__ */ new Set();
+function warnIfRenderPropLooksLikeComponent(renderFn) {
+  const functionName = renderFn.name;
+  if (functionName.length === 0) {
+    return;
+  }
+  const firstCharacterCode = functionName.charCodeAt(0);
+  if (firstCharacterCode < 65 || firstCharacterCode > 90) {
+    return;
+  }
+  warn(`The \`render\` prop received a function named \`${functionName}\` that starts with an uppercase letter.`, "This usually means a React component was passed directly as `render={Component}`.", "Base UI calls `render` as a plain function, which can break the Rules of Hooks during reconciliation.", "If this is an intentional render callback, rename it to start with a lowercase letter.", "Use `render={<Component />}` or `render={(props) => <Component {...props} />}` instead.", "https://base-ui.com/r/invalid-render-prop");
 }
-function warn(...messages) {
-  if (process.env.NODE_ENV !== "production") {
-    const messageKey = messages.join(" ");
-    if (!set.has(messageKey)) {
-      set.add(messageKey);
-      console.warn(`Base UI: ${messageKey}`);
-    }
+function renderTag(Tag, props) {
+  if (Tag === "button") {
+    return /* @__PURE__ */ _react.createElement.call(void 0, "button", {
+      type: "button",
+      ...props,
+      key: props.key
+    });
+  }
+  if (Tag === "img") {
+    return /* @__PURE__ */ _react.createElement.call(void 0, "img", {
+      alt: "",
+      ...props,
+      key: props.key
+    });
   }
+  return /* @__PURE__ */ React4.createElement(Tag, props);
 }
 
-// ../../../node_modules/.pnpm/@base-ui+utils@0.2.6_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/formatErrorMessage.js
-function createFormatErrorMessage(baseUrl, prefix2) {
-  return function formatErrorMessage2(code, ...args) {
-    const url = new URL(baseUrl);
-    url.searchParams.set("code", code.toString());
-    args.forEach((arg) => url.searchParams.append("args[]", arg));
-    return `${prefix2} error #${code}; visit ${url} for the full message.`;
-  };
+// ../../../node_modules/.pnpm/@base-ui+react@1.3.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/use-render/useRender.js
+function useRender(params) {
+  return useRenderElement(_nullishCoalesce(params.defaultTagName, () => ( "div")), params, params);
 }
-var formatErrorMessage = createFormatErrorMessage("https://base-ui.com/production-error", "Base UI");
-var formatErrorMessage_default = formatErrorMessage;
 
-// ../../../node_modules/.pnpm/@base-ui+react@1.3.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/utils/useRenderElement.js
+// ../../../node_modules/.pnpm/@wordpress+element@6.43.0/node_modules/@wordpress/element/build-module/react.mjs
 
 
-// ../../../node_modules/.pnpm/@base-ui+utils@0.2.6_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/useMergedRefs.js
-function useMergedRefs(a, b, c, d) {
-  const forkRef = useRefWithInit(createForkRef).current;
-  if (didChange(forkRef, a, b, c, d)) {
-    update(forkRef, [a, b, c, d]);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// ../../../node_modules/.pnpm/is-plain-object@5.0.0/node_modules/is-plain-object/dist/is-plain-object.mjs
+function isObject(o) {
+  return Object.prototype.toString.call(o) === "[object Object]";
+}
+function isPlainObject(o) {
+  var ctor, prot;
+  if (isObject(o) === false) return false;
+  ctor = o.constructor;
+  if (ctor === void 0) return true;
+  prot = ctor.prototype;
+  if (isObject(prot) === false) return false;
+  if (prot.hasOwnProperty("isPrototypeOf") === false) {
+    return false;
   }
-  return forkRef.callback;
+  return true;
 }
-function useMergedRefsN(refs) {
-  const forkRef = useRefWithInit(createForkRef).current;
-  if (didChangeN(forkRef, refs)) {
-    update(forkRef, refs);
-  }
-  return forkRef.callback;
+
+// ../../../node_modules/.pnpm/lower-case@2.0.2/node_modules/lower-case/dist.es2015/index.js
+function lowerCase(str) {
+  return str.toLowerCase();
 }
-function createForkRef() {
-  return {
-    callback: null,
-    cleanup: null,
-    refs: []
-  };
+
+// ../../../node_modules/.pnpm/no-case@3.0.4/node_modules/no-case/dist.es2015/index.js
+var DEFAULT_SPLIT_REGEXP = [/([a-z0-9])([A-Z])/g, /([A-Z])([A-Z][a-z])/g];
+var DEFAULT_STRIP_REGEXP = /[^A-Z0-9]+/gi;
+function noCase(input, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  var _a = options.splitRegexp, splitRegexp = _a === void 0 ? DEFAULT_SPLIT_REGEXP : _a, _b = options.stripRegexp, stripRegexp = _b === void 0 ? DEFAULT_STRIP_REGEXP : _b, _c = options.transform, transform = _c === void 0 ? lowerCase : _c, _d = options.delimiter, delimiter2 = _d === void 0 ? " " : _d;
+  var result = replace(replace(input, splitRegexp, "$1\0$2"), stripRegexp, "\0");
+  var start = 0;
+  var end = result.length;
+  while (result.charAt(start) === "\0")
+    start++;
+  while (result.charAt(end - 1) === "\0")
+    end--;
+  return result.slice(start, end).split("\0").map(transform).join(delimiter2);
 }
-function didChange(forkRef, a, b, c, d) {
-  return forkRef.refs[0] !== a || forkRef.refs[1] !== b || forkRef.refs[2] !== c || forkRef.refs[3] !== d;
+function replace(input, re, value) {
+  if (re instanceof RegExp)
+    return input.replace(re, value);
+  return re.reduce(function(input2, re2) {
+    return input2.replace(re2, value);
+  }, input);
 }
-function didChangeN(forkRef, newRefs) {
-  return forkRef.refs.length !== newRefs.length || forkRef.refs.some((ref, index) => ref !== newRefs[index]);
+
+// ../../../node_modules/.pnpm/dot-case@3.0.4/node_modules/dot-case/dist.es2015/index.js
+var _tslib = require('tslib');
+function dotCase(input, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return noCase(input, _tslib.__assign.call(void 0, { delimiter: "." }, options));
 }
-function update(forkRef, refs) {
-  forkRef.refs = refs;
-  if (refs.every((ref) => ref == null)) {
-    forkRef.callback = null;
-    return;
+
+// ../../../node_modules/.pnpm/param-case@3.0.4/node_modules/param-case/dist.es2015/index.js
+
+function paramCase(input, options) {
+  if (options === void 0) {
+    options = {};
   }
-  forkRef.callback = (instance) => {
-    if (forkRef.cleanup) {
-      forkRef.cleanup();
-      forkRef.cleanup = null;
-    }
-    if (instance != null) {
-      const cleanupCallbacks = Array(refs.length).fill(null);
-      for (let i = 0; i < refs.length; i += 1) {
-        const ref = refs[i];
-        if (ref == null) {
-          continue;
-        }
-        switch (typeof ref) {
-          case "function": {
-            const refCleanup = ref(instance);
-            if (typeof refCleanup === "function") {
-              cleanupCallbacks[i] = refCleanup;
-            }
-            break;
-          }
-          case "object": {
-            ref.current = instance;
-            break;
-          }
-          default:
-        }
-      }
-      forkRef.cleanup = () => {
-        for (let i = 0; i < refs.length; i += 1) {
-          const ref = refs[i];
-          if (ref == null) {
-            continue;
-          }
-          switch (typeof ref) {
-            case "function": {
-              const cleanupCallback = cleanupCallbacks[i];
-              if (typeof cleanupCallback === "function") {
-                cleanupCallback();
-              } else {
-                ref(null);
-              }
-              break;
-            }
-            case "object": {
-              ref.current = null;
-              break;
-            }
-            default:
-          }
-        }
-      };
-    }
-  };
+  return dotCase(input, _tslib.__assign.call(void 0, { delimiter: "-" }, options));
 }
 
-// ../../../node_modules/.pnpm/@base-ui+utils@0.2.6_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/getReactElementRef.js
+// ../../../node_modules/.pnpm/@wordpress+ui@0.10.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1_stylelint@17.7.0/node_modules/@wordpress/ui/build-module/text/text.mjs
 
+if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='8bc43893d6']")) {
+  const style = document.createElement("style");
+  style.setAttribute("data-wp-hash", "8bc43893d6");
+  style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._14437cfb77831647__heading-2xl{font-size:var(--wpds-font-size-2xl,32px);line-height:var(--wpds-font-line-height-2xl,40px)}._14437cfb77831647__heading-2xl,._3c78b7fa9b4072dd__heading-xl{font-family:var(--wpds-font-family-heading,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-weight:var(--wpds-font-weight-medium,499)}._3c78b7fa9b4072dd__heading-xl{font-size:var(--wpds-font-size-xl,20px);line-height:var(--wpds-font-line-height-md,24px)}.aa58f227716bcde2__heading-lg{font-size:var(--wpds-font-size-lg,15px)}.aa58f227716bcde2__heading-lg,.fc4da56d8dfe52c4__heading-md{font-family:var(--wpds-font-family-heading,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-weight:var(--wpds-font-weight-medium,499);line-height:var(--wpds-font-line-height-sm,20px)}.fc4da56d8dfe52c4__heading-md{font-size:var(--wpds-font-size-md,13px)}.a9b78c7c82e8dff7__heading-sm{font-family:var(--wpds-font-family-heading,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-size:var(--wpds-font-size-xs,11px);font-weight:var(--wpds-font-weight-medium,499);line-height:var(--wpds-font-line-height-xs,16px);text-transform:uppercase}._305ff559e52180d5__body-xl{font-size:var(--wpds-font-size-xl,20px);line-height:var(--wpds-font-line-height-xl,32px)}._305ff559e52180d5__body-xl,.ca1aa3fc2029e958__body-lg{font-family:var(--wpds-font-family-body,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-weight:var(--wpds-font-weight-regular,400)}.ca1aa3fc2029e958__body-lg{font-size:var(--wpds-font-size-lg,15px);line-height:var(--wpds-font-line-height-md,24px)}._131101940be12424__body-md{font-size:var(--wpds-font-size-md,13px);line-height:var(--wpds-font-line-height-sm,20px)}._0e8d87a42c1f75fa__body-sm,._131101940be12424__body-md{font-family:var(--wpds-font-family-body,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-weight:var(--wpds-font-weight-regular,400)}._0e8d87a42c1f75fa__body-sm{font-size:var(--wpds-font-size-sm,12px);line-height:var(--wpds-font-line-height-xs,16px)}}'));
+  document.head.appendChild(style);
+}
+var style_default = { "heading-2xl": "_14437cfb77831647__heading-2xl", "heading-xl": "_3c78b7fa9b4072dd__heading-xl", "heading-lg": "aa58f227716bcde2__heading-lg", "heading-md": "fc4da56d8dfe52c4__heading-md", "heading-sm": "a9b78c7c82e8dff7__heading-sm", "body-xl": "_305ff559e52180d5__body-xl", "body-lg": "ca1aa3fc2029e958__body-lg", "body-md": "_131101940be12424__body-md", "body-sm": "_0e8d87a42c1f75fa__body-sm" };
+var Text = _react.forwardRef.call(void 0, function Text2({ variant = "body-md", render, className, ...props }, ref) {
+  const element = useRender({
+    render,
+    defaultTagName: "span",
+    ref,
+    props: mergeProps(props, {
+      className: _clsx2.default.call(void 0, style_default[variant], className)
+    })
+  });
+  return element;
+});
 
-// ../../../node_modules/.pnpm/@base-ui+utils@0.2.6_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/reactVersion.js
+// ../../../node_modules/.pnpm/@wordpress+ui@0.10.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1_stylelint@17.7.0/node_modules/@wordpress/ui/build-module/stack/stack.mjs
+if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='b51ff41489']")) {
+  const style = document.createElement("style");
+  style.setAttribute("data-wp-hash", "b51ff41489");
+  style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._19ce0419607e1896__stack{display:flex}}"));
+  document.head.appendChild(style);
+}
+var style_default2 = { "stack": "_19ce0419607e1896__stack" };
+var gapTokens = {
+  xs: "var(--wpds-dimension-gap-xs, 4px)",
+  sm: "var(--wpds-dimension-gap-sm, 8px)",
+  md: "var(--wpds-dimension-gap-md, 12px)",
+  lg: "var(--wpds-dimension-gap-lg, 16px)",
+  xl: "var(--wpds-dimension-gap-xl, 24px)",
+  "2xl": "var(--wpds-dimension-gap-2xl, 32px)",
+  "3xl": "var(--wpds-dimension-gap-3xl, 40px)"
+};
+var Stack = _react.forwardRef.call(void 0, function Stack2({ direction, gap, align, justify, wrap, render, ...props }, ref) {
+  const style = {
+    gap: gap && gapTokens[gap],
+    alignItems: align,
+    justifyContent: justify,
+    flexDirection: direction,
+    flexWrap: wrap
+  };
+  const element = useRender({
+    render,
+    ref,
+    props: mergeProps(props, { style, className: style_default2.stack })
+  });
+  return element;
+});
 
-var majorVersion = parseInt(React2.version, 10);
-function isReactVersionAtLeast(reactVersionToCheck) {
-  return majorVersion >= reactVersionToCheck;
+// src/components/legend/private/base-legend.tsx
+
+
+
+// src/components/legend/utils/value-or-identity.ts
+function valueOrIdentity(_) {
+  if (_ && typeof _ === "object" && "value" in _ && typeof _.value !== "undefined")
+    return _.value;
+  return _;
+}
+function valueOrIdentityString(_) {
+  return String(valueOrIdentity(_));
 }
 
-// ../../../node_modules/.pnpm/@base-ui+utils@0.2.6_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/getReactElementRef.js
-function getReactElementRef(element) {
-  if (!/* @__PURE__ */ React3.isValidElement(element)) {
-    return null;
-  }
-  const reactElement = element;
-  const propsWithRef = reactElement.props;
-  return _nullishCoalesce((isReactVersionAtLeast(19) ? _optionalChain([propsWithRef, 'optionalAccess', _114 => _114.ref]) : reactElement.ref), () => ( null));
+// src/components/legend/utils/label-transform-factory.ts
+function labelTransformFactory({
+  scale,
+  labelFormat
+}) {
+  return (d, i) => ({
+    datum: d,
+    index: i,
+    text: `${labelFormat(d, i)}`,
+    value: scale(d)
+  });
 }
 
-// ../../../node_modules/.pnpm/@base-ui+utils@0.2.6_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/mergeObjects.js
-function mergeObjects(a, b) {
-  if (a && !b) {
-    return a;
-  }
-  if (!a && b) {
-    return b;
-  }
-  if (a || b) {
-    return {
-      ...a,
-      ...b
-    };
-  }
-  return void 0;
-}
+// src/components/legend/private/base-legend.module.scss
+var base_legend_module_default = {
+  "legend": "a8ccharts-89ApsU",
+  "legend-item": "a8ccharts-Vflwq8",
+  "legend-item--interactive": "a8ccharts-qGsavM",
+  "legend-item--inactive": "a8ccharts-ZtDY-Q",
+  "legend-item-label": "a8ccharts-2H65Kr",
+  "legend-item-text--wrap": "a8ccharts-faSDBI",
+  "legend-item-text--ellipsis": "a8ccharts-FISUIO",
+  "legend-item-value": "a8ccharts-DTZlT-"
+};
+
+// src/components/legend/private/base-legend.tsx
+
+var ALIGNMENT_TO_FLEX = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end"
+};
+var LegendText = ({
+  text,
+  textOverflow,
+  maxWidth
+}) => {
+  const isEllipsis = maxWidth != null && textOverflow === "ellipsis";
+  const [textRef, isTruncated] = useTextTruncation(Boolean(isEllipsis));
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {
+    ref: textRef,
+    className: _clsx2.default.call(void 0, base_legend_module_default["legend-item-text"], maxWidth != null && base_legend_module_default[`legend-item-text--${textOverflow}`]),
+    style: {
+      ...maxWidth != null && {
+        maxWidth,
+        minWidth: 0
+      }
+    },
+    title: isEllipsis && isTruncated ? text : void 0,
+    children: text
+  });
+};
+var BaseLegend = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
+  items,
+  className,
+  orientation = "horizontal",
+  alignment = "center",
+  shape = "rect",
+  fill = valueOrIdentityString,
+  size = valueOrIdentityString,
+  labelFormat = valueOrIdentity,
+  labelTransform = labelTransformFactory,
+  itemStyles,
+  itemClassName,
+  labelStyles,
+  labelClassName,
+  shapeStyles,
+  render,
+  interactive = false,
+  chartId
+}, ref) => {
+  const {
+    margin: itemMargin = "0",
+    flexDirection: itemDirection = "row"
+  } = _nullishCoalesce(itemStyles, () => ( {}));
+  const {
+    justifyContent: labelJustifyContent = "flex-start",
+    flex: labelFlex = "0 0 auto",
+    margin: labelMargin = "0 4px",
+    maxWidth,
+    textOverflow = "wrap"
+  } = _nullishCoalesce(labelStyles, () => ( {}));
+  const {
+    width: shapeWidth = 16,
+    height: shapeHeight = 16,
+    margin: shapeMargin = "2px 4px 2px 0"
+  } = _nullishCoalesce(shapeStyles, () => ( {}));
+  const theme = useGlobalChartsTheme();
+  const context = _react.useContext.call(void 0, GlobalChartsContext);
+  const legendScale = _scale.scaleOrdinal.call(void 0, {
+    domain: items.map((item) => item.label),
+    range: items.map((item) => item.color)
+  });
+  const domain = legendScale.domain();
+  const getShapeStyle = _react.useCallback.call(void 0, ({
+    index
+  }) => _optionalChain([items, 'access', _66 => _66[index], 'optionalAccess', _67 => _67.shapeStyle]), [items]);
+  const handleLegendClick = _react.useCallback.call(void 0, (seriesLabel) => {
+    if (interactive && chartId && context) {
+      context.toggleSeriesVisibility(chartId, seriesLabel);
+    }
+  }, [interactive, chartId, context]);
+  const isSeriesVisible = _react.useCallback.call(void 0, (seriesLabel) => {
+    if (!interactive || !chartId || !context) {
+      return true;
+    }
+    return context.isSeriesVisible(chartId, seriesLabel);
+  }, [interactive, chartId, context]);
+  const createClickHandler = _react.useCallback.call(void 0, (labelText) => {
+    if (!interactive) {
+      return void 0;
+    }
+    return () => handleLegendClick(labelText);
+  }, [interactive, handleLegendClick]);
+  const createKeyDownHandler = _react.useCallback.call(void 0, (labelText) => {
+    if (!interactive) {
+      return void 0;
+    }
+    return (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        handleLegendClick(labelText);
+      }
+    };
+  }, [interactive, handleLegendClick]);
+  const flexAlignment = _nullishCoalesce(ALIGNMENT_TO_FLEX[alignment], () => ( "center"));
+  return render ? render(items) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _legend.LegendOrdinal, {
+    scale: legendScale,
+    labelFormat,
+    labelTransform,
+    children: (labels) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Stack, {
+      ref,
+      direction: orientation === "vertical" ? "column" : "row",
+      gap: orientation === "vertical" ? "sm" : "lg",
+      align: orientation === "vertical" ? flexAlignment : void 0,
+      justify: orientation === "horizontal" ? flexAlignment : void 0,
+      wrap: orientation === "horizontal" ? "wrap" : void 0,
+      role: "list",
+      className: _clsx2.default.call(void 0, base_legend_module_default.legend, className),
+      style: _optionalChain([theme, 'access', _68 => _68.legend, 'optionalAccess', _69 => _69.containerStyles]),
+      children: labels.map((label, i) => {
+        const visible = isSeriesVisible(label.text);
+        const handleClick = createClickHandler(label.text);
+        const handleKeyDown = createKeyDownHandler(label.text);
+        const matchedItem = items[i];
+        return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _legend.LegendItem, {
+          className: _clsx2.default.call(void 0, "visx-legend-item", base_legend_module_default["legend-item"], interactive && base_legend_module_default["legend-item--interactive"], !visible && base_legend_module_default["legend-item--inactive"], itemClassName),
+          margin: itemMargin,
+          flexDirection: orientation === "vertical" && alignment === "end" ? "row-reverse" : itemDirection,
+          onClick: handleClick,
+          onKeyDown: handleKeyDown,
+          role: interactive ? "button" : void 0,
+          tabIndex: interactive ? 0 : void 0,
+          "aria-pressed": interactive ? visible : void 0,
+          "aria-label": interactive ? `${label.text}: ${visible ? "visible" : "hidden"}. Toggle visibility.` : void 0,
+          children: [_optionalChain([items, 'access', _70 => _70[i], 'optionalAccess', _71 => _71.renderGlyph]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", {
+            width: _optionalChain([items, 'access', _72 => _72[i], 'optionalAccess', _73 => _73.glyphSize]) * 2,
+            height: _optionalChain([items, 'access', _74 => _74[i], 'optionalAccess', _75 => _75.glyphSize]) * 2,
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _group.Group, {
+              children: _optionalChain([items, 'access', _76 => _76[i], 'optionalAccess', _77 => _77.renderGlyph, 'call', _78 => _78({
+                key: `legend-glyph-${label.text}`,
+                datum: {},
+                index: i,
+                color: fill(label),
+                size: _optionalChain([items, 'access', _79 => _79[i], 'optionalAccess', _80 => _80.glyphSize]),
+                x: _optionalChain([items, 'access', _81 => _81[i], 'optionalAccess', _82 => _82.glyphSize]),
+                y: _optionalChain([items, 'access', _83 => _83[i], 'optionalAccess', _84 => _84.glyphSize])
+              })])
+            })
+          }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _legend.LegendShape, {
+            shape,
+            height: shapeHeight,
+            width: shapeWidth,
+            margin: shapeMargin,
+            item: domain[i],
+            itemIndex: i,
+            label,
+            fill,
+            size,
+            shapeStyle: getShapeStyle
+          }), /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _legend.LegendLabel, {
+            className: _clsx2.default.call(void 0, "visx-legend-label", base_legend_module_default["legend-item-label"], labelClassName),
+            style: {
+              flex: labelFlex,
+              margin: labelMargin,
+              ..._optionalChain([theme, 'access', _85 => _85.legend, 'optionalAccess', _86 => _86.labelStyles])
+            },
+            children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Stack, {
+              align: "center",
+              gap: "sm",
+              justify: labelJustifyContent,
+              children: [/* @__PURE__ */ _jsxruntime.jsx.call(void 0, LegendText, {
+                text: label.text,
+                textOverflow,
+                maxWidth
+              }), _optionalChain([matchedItem, 'optionalAccess', _87 => _87.value]) != null && matchedItem.value !== "" && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", {
+                className: base_legend_module_default["legend-item-value"],
+                children: ["\xA0", matchedItem.value]
+              })]
+            })
+          })]
+        }, `legend-${label.text}-${i}`);
+      })
+    })
+  });
+});
+
+// src/components/legend/legend.tsx
 
-// ../../../node_modules/.pnpm/@base-ui+react@1.3.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/utils/getStateAttributesProps.js
-function getStateAttributesProps(state, customMapping) {
-  const props = {};
-  for (const key in state) {
-    const value = state[key];
-    if (_optionalChain([customMapping, 'optionalAccess', _115 => _115.hasOwnProperty, 'call', _116 => _116(key)])) {
-      const customProps = customMapping[key](value);
-      if (customProps != null) {
-        Object.assign(props, customProps);
-      }
-      continue;
-    }
-    if (value === true) {
-      props[`data-${key.toLowerCase()}`] = "";
-    } else if (value) {
-      props[`data-${key.toLowerCase()}`] = value.toString();
-    }
+var defaultShapeByChartType = {
+  line: "line",
+  bar: "rect",
+  pie: "circle",
+  "pie-semi-circle": "circle",
+  leaderboard: "circle"
+};
+var Legend = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
+  chartId,
+  items,
+  shape,
+  ...props
+}, ref) => {
+  const context = _react.useContext.call(void 0, GlobalChartsContext);
+  const singleChartContext = _react.useContext.call(void 0, SingleChartContext);
+  const contextChartId = _nullishCoalesce(chartId, () => ( _optionalChain([singleChartContext, 'optionalAccess', _88 => _88.chartId])));
+  const chartData = _react.useMemo.call(void 0, () => contextChartId && context ? context.getChartData(contextChartId) : void 0, [contextChartId, context]);
+  const contextItems = _optionalChain([chartData, 'optionalAccess', _89 => _89.legendItems]);
+  const resolvedShape = _nullishCoalesce(shape, () => ( (_optionalChain([chartData, 'optionalAccess', _90 => _90.chartType]) ? defaultShapeByChartType[chartData.chartType] : void 0)));
+  const legendItems = items || contextItems;
+  if (!legendItems) {
+    return null;
   }
-  return props;
-}
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BaseLegend, {
+    ref,
+    items: legendItems,
+    shape: resolvedShape,
+    ...props,
+    chartId: contextChartId
+  });
+});
 
-// ../../../node_modules/.pnpm/@base-ui+react@1.3.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/utils/resolveClassName.js
-function resolveClassName(className, state) {
-  return typeof className === "function" ? className(state) : className;
-}
+// src/components/legend/hooks/use-chart-legend-items.ts
 
-// ../../../node_modules/.pnpm/@base-ui+react@1.3.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/utils/resolveStyle.js
-function resolveStyle(style, state) {
-  return typeof style === "function" ? style(state) : style;
-}
 
-// ../../../node_modules/.pnpm/@base-ui+react@1.3.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/merge-props/mergeProps.js
-var EMPTY_PROPS = {};
-function mergeProps(a, b, c, d, e) {
-  let merged = {
-    ...resolvePropsGetter(a, EMPTY_PROPS)
-  };
-  if (b) {
-    merged = mergeOne(merged, b);
-  }
-  if (c) {
-    merged = mergeOne(merged, c);
-  }
-  if (d) {
-    merged = mergeOne(merged, d);
-  }
-  if (e) {
-    merged = mergeOne(merged, e);
-  }
-  return merged;
-}
-function mergePropsN(props) {
-  if (props.length === 0) {
-    return EMPTY_PROPS;
-  }
-  if (props.length === 1) {
-    return resolvePropsGetter(props[0], EMPTY_PROPS);
+function formatPointValue(point, showValues, legendValueDisplay = "percentage") {
+  if (!showValues || legendValueDisplay === "none") {
+    return "";
   }
-  let merged = {
-    ...resolvePropsGetter(props[0], EMPTY_PROPS)
-  };
-  for (let i = 1; i < props.length; i += 1) {
-    merged = mergeOne(merged, props[i]);
+  if ("percentage" in point) {
+    switch (legendValueDisplay) {
+      case "percentage":
+        return formatPercentage(point.percentage);
+      case "value":
+        return _numberformatters.formatNumber.call(void 0, point.value);
+      case "valueDisplay":
+        return point.valueDisplay || _numberformatters.formatNumber.call(void 0, point.value);
+      default:
+        return "";
+    }
   }
-  return merged;
-}
-function mergeOne(merged, inputProps) {
-  if (isPropsGetter(inputProps)) {
-    return inputProps(merged);
+  if ("value" in point) {
+    return point.value !== null ? _numberformatters.formatNumber.call(void 0, point.value) : "";
   }
-  return mutablyMergeInto(merged, inputProps);
+  return "";
 }
-function mutablyMergeInto(mergedProps, externalProps) {
-  if (!externalProps) {
-    return mergedProps;
-  }
-  for (const propName in externalProps) {
-    const externalPropValue = externalProps[propName];
-    switch (propName) {
-      case "style": {
-        mergedProps[propName] = mergeObjects(mergedProps.style, externalPropValue);
-        break;
-      }
-      case "className": {
-        mergedProps[propName] = mergeClassNames(mergedProps.className, externalPropValue);
-        break;
-      }
-      default: {
-        if (isEventHandler(propName, externalPropValue)) {
-          mergedProps[propName] = mergeEventHandlers(mergedProps[propName], externalPropValue);
-        } else {
-          mergedProps[propName] = externalPropValue;
-        }
-      }
+function applyGlyphToLegendItem(baseItem, withGlyph, glyph, renderGlyph, glyphSize) {
+  if (withGlyph) {
+    const glyphToUse = glyph || renderGlyph;
+    if (glyphToUse) {
+      return {
+        ...baseItem,
+        glyphSize,
+        renderGlyph: glyphToUse
+      };
     }
   }
-  return mergedProps;
-}
-function isEventHandler(key, value) {
-  const code0 = key.charCodeAt(0);
-  const code1 = key.charCodeAt(1);
-  const code2 = key.charCodeAt(2);
-  return code0 === 111 && code1 === 110 && code2 >= 65 && code2 <= 90 && (typeof value === "function" || typeof value === "undefined");
-}
-function isPropsGetter(inputProps) {
-  return typeof inputProps === "function";
-}
-function resolvePropsGetter(inputProps, previousProps) {
-  if (isPropsGetter(inputProps)) {
-    return inputProps(previousProps);
-  }
-  return _nullishCoalesce(inputProps, () => ( EMPTY_PROPS));
+  return baseItem;
 }
-function mergeEventHandlers(ourHandler, theirHandler) {
-  if (!theirHandler) {
-    return ourHandler;
-  }
-  if (!ourHandler) {
-    return theirHandler;
-  }
-  return (event) => {
-    if (isSyntheticEvent(event)) {
-      const baseUIEvent = event;
-      makeEventPreventable(baseUIEvent);
-      const result2 = theirHandler(baseUIEvent);
-      if (!baseUIEvent.baseUIHandlerPrevented) {
-        _optionalChain([ourHandler, 'optionalCall', _117 => _117(baseUIEvent)]);
-      }
-      return result2;
-    }
-    const result = theirHandler(event);
-    _optionalChain([ourHandler, 'optionalCall', _118 => _118(event)]);
-    return result;
+function processSeriesData(seriesData, getElementStyles, showValues, withGlyph, glyphSize, renderGlyph, legendShape) {
+  const mapper = (series, index) => {
+    const { color, glyph, shapeStyles } = getElementStyles({
+      data: series,
+      index,
+      legendShape
+    });
+    const baseItem = {
+      label: series.label,
+      value: showValues ? _optionalChain([series, 'access', _91 => _91.data, 'optionalAccess', _92 => _92.length, 'optionalAccess', _93 => _93.toString, 'call', _94 => _94()]) || "0" : "",
+      color,
+      shapeStyle: shapeStyles
+    };
+    return applyGlyphToLegendItem(baseItem, withGlyph, glyph, renderGlyph, glyphSize);
   };
+  return seriesData.map(mapper);
 }
-function makeEventPreventable(event) {
-  event.preventBaseUIHandler = () => {
-    event.baseUIHandlerPrevented = true;
+function processPointData(pointData, getElementStyles, showValues, legendValueDisplay, withGlyph, glyphSize, renderGlyph, legendShape) {
+  const mapper = (point, index) => {
+    const { color, glyph, shapeStyles } = getElementStyles({
+      data: point,
+      index,
+      legendShape
+    });
+    const baseItem = {
+      label: point.label,
+      value: formatPointValue(point, showValues, legendValueDisplay),
+      color,
+      shapeStyle: shapeStyles
+    };
+    return applyGlyphToLegendItem(baseItem, withGlyph, glyph, renderGlyph, glyphSize);
   };
-  return event;
+  return pointData.map(mapper);
 }
-function mergeClassNames(ourClassName, theirClassName) {
-  if (theirClassName) {
-    if (ourClassName) {
-      return theirClassName + " " + ourClassName;
+function useChartLegendItems(data, options = {}, legendShape) {
+  const {
+    showValues = false,
+    legendValueDisplay = "percentage",
+    withGlyph = false,
+    glyphSize = 8,
+    renderGlyph
+  } = options;
+  const { getElementStyles } = useGlobalChartsContext();
+  return _react.useMemo.call(void 0, () => {
+    if (!data || !Array.isArray(data) || data.length === 0) {
+      return [];
+    }
+    if ("data" in data[0]) {
+      return processSeriesData(
+        data,
+        getElementStyles,
+        showValues,
+        withGlyph,
+        glyphSize,
+        renderGlyph,
+        legendShape
+      );
     }
-    return theirClassName;
-  }
-  return ourClassName;
-}
-function isSyntheticEvent(event) {
-  return event != null && typeof event === "object" && "nativeEvent" in event;
+    return processPointData(
+      data,
+      getElementStyles,
+      showValues,
+      legendValueDisplay,
+      withGlyph,
+      glyphSize,
+      renderGlyph,
+      legendShape
+    );
+  }, [
+    data,
+    getElementStyles,
+    showValues,
+    legendValueDisplay,
+    withGlyph,
+    glyphSize,
+    renderGlyph,
+    legendShape
+  ]);
 }
 
-// ../../../node_modules/.pnpm/@base-ui+utils@0.2.6_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/empty.js
-var EMPTY_ARRAY = Object.freeze([]);
-var EMPTY_OBJECT = Object.freeze({});
+// src/components/tooltip/base-tooltip.tsx
 
-// ../../../node_modules/.pnpm/@base-ui+react@1.3.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/utils/constants.js
-var BASE_UI_SWIPE_IGNORE_ATTRIBUTE = "data-base-ui-swipe-ignore";
-var LEGACY_SWIPE_IGNORE_ATTRIBUTE = "data-swipe-ignore";
-var BASE_UI_SWIPE_IGNORE_SELECTOR = `[${BASE_UI_SWIPE_IGNORE_ATTRIBUTE}]`;
-var LEGACY_SWIPE_IGNORE_SELECTOR = `[${LEGACY_SWIPE_IGNORE_ATTRIBUTE}]`;
 
-// ../../../node_modules/.pnpm/@base-ui+react@1.3.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/utils/useRenderElement.js
+// src/components/tooltip/base-tooltip.module.scss
+var base_tooltip_module_default = {
+  "tooltip": "a8ccharts-OfX6nd"
+};
 
-function useRenderElement(element, componentProps, params = {}) {
-  const renderProp = componentProps.render;
-  const outProps = useRenderElementProps(componentProps, params);
-  if (params.enabled === false) {
-    return null;
-  }
-  const state = _nullishCoalesce(params.state, () => ( EMPTY_OBJECT));
-  return evaluateRenderProp(element, renderProp, outProps, state);
-}
-function useRenderElementProps(componentProps, params = {}) {
-  const {
-    className: classNameProp,
-    style: styleProp,
-    render: renderProp
-  } = componentProps;
-  const {
-    state = EMPTY_OBJECT,
-    ref,
-    props,
-    stateAttributesMapping,
-    enabled = true
-  } = params;
-  const className = enabled ? resolveClassName(classNameProp, state) : void 0;
-  const style = enabled ? resolveStyle(styleProp, state) : void 0;
-  const stateProps = enabled ? getStateAttributesProps(state, stateAttributesMapping) : EMPTY_OBJECT;
-  const outProps = enabled ? _nullishCoalesce(mergeObjects(stateProps, Array.isArray(props) ? mergePropsN(props) : props), () => ( EMPTY_OBJECT)) : EMPTY_OBJECT;
-  if (typeof document !== "undefined") {
-    if (!enabled) {
-      useMergedRefs(null, null);
-    } else if (Array.isArray(ref)) {
-      outProps.ref = useMergedRefsN([outProps.ref, getReactElementRef(renderProp), ...ref]);
-    } else {
-      outProps.ref = useMergedRefs(outProps.ref, getReactElementRef(renderProp), ref);
-    }
-  }
-  if (!enabled) {
-    return EMPTY_OBJECT;
-  }
-  if (className !== void 0) {
-    outProps.className = mergeClassNames(outProps.className, className);
-  }
-  if (style !== void 0) {
-    outProps.style = mergeObjects(outProps.style, style);
+// src/components/tooltip/base-tooltip.tsx
+
+var DefaultTooltipContent = ({
+  data
+}) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, {
+  children: [_optionalChain([data, 'optionalAccess', _95 => _95.label]), ": ", _optionalChain([data, 'optionalAccess', _96 => _96.valueDisplay]) || _numberformatters.formatNumber.call(void 0, _optionalChain([data, 'optionalAccess', _97 => _97.value]))]
+});
+var BaseTooltip = ({
+  data,
+  top,
+  left,
+  component: Component2 = DefaultTooltipContent,
+  children,
+  className,
+  style,
+  renderContainer = true
+}) => {
+  const content = children || data && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component2, {
+    data,
+    className
+  });
+  if (!renderContainer) {
+    return content;
   }
-  return outProps;
-}
-var REACT_LAZY_TYPE = /* @__PURE__ */ Symbol.for("react.lazy");
-function evaluateRenderProp(element, render, props, state) {
-  if (render) {
-    if (typeof render === "function") {
-      if (process.env.NODE_ENV !== "production") {
-        warnIfRenderPropLooksLikeComponent(render);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
+    className: base_tooltip_module_default.tooltip,
+    style: {
+      top,
+      left,
+      ...style
+    },
+    role: "tooltip",
+    children: content
+  });
+};
+
+// src/components/tooltip/accessible-tooltip.tsx
+
+
+
+var AccessibleTooltip = ({
+  renderTooltip,
+  selectedIndex,
+  tooltipRef,
+  keyboardFocusedClassName,
+  series = [],
+  mode = "group",
+  ...props
+}) => {
+  const tooltipContext = _react.useContext.call(void 0, _xychart.TooltipContext);
+  const tooltipData = _react.useMemo.call(void 0, () => {
+    if (mode !== "individual") return [];
+    if (series.length === 0) return [];
+    const maxDataPoints = Math.max(...series.map((s) => s.data.length));
+    const flattened = [];
+    for (let dataPointIndex = 0; dataPointIndex < maxDataPoints; dataPointIndex++) {
+      for (let seriesIndex = 0; seriesIndex < series.length; seriesIndex++) {
+        const seriesData = series[seriesIndex];
+        if (dataPointIndex < seriesData.data.length) {
+          flattened.push({
+            datum: seriesData.data[dataPointIndex],
+            seriesLabel: seriesData.label,
+            seriesIndex,
+            dataPointIndex
+          });
+        }
       }
-      return render(props, state);
     }
-    const mergedProps = mergeProps(props, render.props);
-    mergedProps.ref = props.ref;
-    let newElement = render;
-    if (_optionalChain([newElement, 'optionalAccess', _119 => _119.$$typeof]) === REACT_LAZY_TYPE) {
-      const children = React4.Children.toArray(render);
-      newElement = children[0];
+    return flattened;
+  }, [series, mode]);
+  _react.useEffect.call(void 0, () => {
+    if (selectedIndex === void 0) {
+      _optionalChain([tooltipContext, 'optionalAccess', _98 => _98.hideTooltip, 'call', _99 => _99()]);
+      return;
     }
-    if (process.env.NODE_ENV !== "production") {
-      if (!/* @__PURE__ */ React4.isValidElement(newElement)) {
-        throw new Error(["Base UI: The `render` prop was provided an invalid React element as `React.isValidElement(render)` is `false`.", "A valid React element must be provided to the `render` prop because it is cloned with props to replace the default element.", "https://base-ui.com/r/invalid-render-prop"].join("\n"));
+    if (mode === "group") {
+      series.forEach((s, index) => {
+        if (selectedIndex < s.data.length) {
+          const datum = s.data[selectedIndex];
+          _optionalChain([tooltipContext, 'optionalAccess', _100 => _100.showTooltip, 'call', _101 => _101({
+            datum,
+            key: s.label,
+            index
+          })]);
+        }
+      });
+    } else if (mode === "individual") {
+      if (selectedIndex < tooltipData.length) {
+        const tooltipItem = tooltipData[selectedIndex];
+        _optionalChain([tooltipContext, 'optionalAccess', _102 => _102.showTooltip, 'call', _103 => _103({
+          datum: tooltipItem.datum,
+          key: tooltipItem.seriesLabel,
+          index: tooltipItem.seriesIndex
+        })]);
       }
     }
-    return /* @__PURE__ */ React4.cloneElement(newElement, mergedProps);
-  }
-  if (element) {
-    if (typeof element === "string") {
-      return renderTag(element, props);
+  }, [selectedIndex, tooltipData, series]);
+  const focusableRenderTooltip = _react.useMemo.call(void 0, () => {
+    if (!renderTooltip) return void 0;
+    return (params) => {
+      const tooltipContent = renderTooltip(params);
+      if (selectedIndex !== void 0) {
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
+          ref: tooltipRef,
+          tabIndex: -1,
+          role: "tooltip",
+          "aria-atomic": "true",
+          className: keyboardFocusedClassName,
+          children: tooltipContent
+        }, `chart-tooltip-${selectedIndex}`);
+      }
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
+        role: "tooltip",
+        "aria-live": "polite",
+        children: tooltipContent
+      });
+    };
+  }, [renderTooltip, selectedIndex, tooltipRef, keyboardFocusedClassName]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _xychart.Tooltip, {
+    ...props,
+    renderTooltip: focusableRenderTooltip
+  });
+};
+var useKeyboardNavigation = ({
+  selectedIndex,
+  setSelectedIndex,
+  isNavigating,
+  setIsNavigating,
+  chartRef,
+  totalPoints
+}) => {
+  const tooltipRef = _react.useCallback.call(void 0, (element) => {
+    if (element && selectedIndex !== void 0) {
+      element.focus();
+    }
+  }, [selectedIndex]);
+  const onChartFocus = _react.useCallback.call(void 0, () => {
+    if (!isNavigating && selectedIndex !== void 0) {
+      setSelectedIndex(0);
+    }
+  }, [isNavigating, selectedIndex, setSelectedIndex]);
+  const onChartBlur = _react.useCallback.call(void 0, () => {
+    setIsNavigating(false);
+  }, [setIsNavigating]);
+  const onChartKeyDown = _react.useCallback.call(void 0, (event) => {
+    if (totalPoints === 0) return;
+    if (event.key === "Tab") {
+      _optionalChain([chartRef, 'access', _104 => _104.current, 'optionalAccess', _105 => _105.focus, 'call', _106 => _106()]);
+      setSelectedIndex(void 0);
+      setIsNavigating(false);
+      return;
+    }
+    const currentSelectedIndex = selectedIndex === void 0 ? -1 : selectedIndex;
+    if (currentSelectedIndex + 1 >= totalPoints && ["ArrowRight"].includes(event.key)) {
+      _optionalChain([chartRef, 'access', _107 => _107.current, 'optionalAccess', _108 => _108.focus, 'call', _109 => _109()]);
+      setSelectedIndex(void 0);
+      setIsNavigating(false);
+      return;
     }
-  }
-  throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: Render element or function are not defined." : formatErrorMessage_default(8));
-}
-function warnIfRenderPropLooksLikeComponent(renderFn) {
-  const functionName = renderFn.name;
-  if (functionName.length === 0) {
-    return;
-  }
-  const firstCharacterCode = functionName.charCodeAt(0);
-  if (firstCharacterCode < 65 || firstCharacterCode > 90) {
-    return;
-  }
-  warn(`The \`render\` prop received a function named \`${functionName}\` that starts with an uppercase letter.`, "This usually means a React component was passed directly as `render={Component}`.", "Base UI calls `render` as a plain function, which can break the Rules of Hooks during reconciliation.", "If this is an intentional render callback, rename it to start with a lowercase letter.", "Use `render={<Component />}` or `render={(props) => <Component {...props} />}` instead.", "https://base-ui.com/r/invalid-render-prop");
-}
-function renderTag(Tag, props) {
-  if (Tag === "button") {
-    return /* @__PURE__ */ _react.createElement.call(void 0, "button", {
-      type: "button",
-      ...props,
-      key: props.key
-    });
-  }
-  if (Tag === "img") {
-    return /* @__PURE__ */ _react.createElement.call(void 0, "img", {
-      alt: "",
-      ...props,
-      key: props.key
-    });
-  }
-  return /* @__PURE__ */ React4.createElement(Tag, props);
-}
-
-// ../../../node_modules/.pnpm/@base-ui+react@1.3.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/use-render/useRender.js
-function useRender(params) {
-  return useRenderElement(_nullishCoalesce(params.defaultTagName, () => ( "div")), params, params);
-}
-
-// ../../../node_modules/.pnpm/@wordpress+element@6.43.0/node_modules/@wordpress/element/build-module/react.mjs
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+    event.preventDefault();
+    if (["ArrowRight"].includes(event.key)) {
+      setIsNavigating(true);
+      setSelectedIndex((currentSelectedIndex + 1) % totalPoints);
+    } else if (["ArrowLeft"].includes(event.key)) {
+      setIsNavigating(true);
+      setSelectedIndex((currentSelectedIndex - 1 + totalPoints) % totalPoints);
+    } else if (event.key === "Escape") {
+      setSelectedIndex(void 0);
+      setIsNavigating(false);
+      _optionalChain([chartRef, 'access', _110 => _110.current, 'optionalAccess', _111 => _111.focus, 'call', _112 => _112()]);
+    }
+  }, [totalPoints, selectedIndex, setSelectedIndex, setIsNavigating, chartRef]);
+  return {
+    tooltipRef,
+    onChartFocus,
+    onChartBlur,
+    onChartKeyDown
+  };
+};
 
-// ../../../node_modules/.pnpm/is-plain-object@5.0.0/node_modules/is-plain-object/dist/is-plain-object.mjs
-function isObject(o) {
-  return Object.prototype.toString.call(o) === "[object Object]";
-}
-function isPlainObject(o) {
-  var ctor, prot;
-  if (isObject(o) === false) return false;
-  ctor = o.constructor;
-  if (ctor === void 0) return true;
-  prot = ctor.prototype;
-  if (isObject(prot) === false) return false;
-  if (prot.hasOwnProperty("isPrototypeOf") === false) {
-    return false;
-  }
-  return true;
-}
+// src/charts/private/chart-composition/chart-svg.tsx
 
-// ../../../node_modules/.pnpm/lower-case@2.0.2/node_modules/lower-case/dist.es2015/index.js
-function lowerCase(str) {
-  return str.toLowerCase();
-}
+var ChartSVG = ({
+  children
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, {
+    children
+  });
+};
+ChartSVG.displayName = "Chart.SVG";
 
-// ../../../node_modules/.pnpm/no-case@3.0.4/node_modules/no-case/dist.es2015/index.js
-var DEFAULT_SPLIT_REGEXP = [/([a-z0-9])([A-Z])/g, /([A-Z])([A-Z][a-z])/g];
-var DEFAULT_STRIP_REGEXP = /[^A-Z0-9]+/gi;
-function noCase(input, options) {
-  if (options === void 0) {
-    options = {};
-  }
-  var _a = options.splitRegexp, splitRegexp = _a === void 0 ? DEFAULT_SPLIT_REGEXP : _a, _b = options.stripRegexp, stripRegexp = _b === void 0 ? DEFAULT_STRIP_REGEXP : _b, _c = options.transform, transform = _c === void 0 ? lowerCase : _c, _d = options.delimiter, delimiter2 = _d === void 0 ? " " : _d;
-  var result = replace(replace(input, splitRegexp, "$1\0$2"), stripRegexp, "\0");
-  var start = 0;
-  var end = result.length;
-  while (result.charAt(start) === "\0")
-    start++;
-  while (result.charAt(end - 1) === "\0")
-    end--;
-  return result.slice(start, end).split("\0").map(transform).join(delimiter2);
-}
-function replace(input, re, value) {
-  if (re instanceof RegExp)
-    return input.replace(re, value);
-  return re.reduce(function(input2, re2) {
-    return input2.replace(re2, value);
-  }, input);
-}
+// src/charts/private/chart-composition/chart-html.tsx
 
-// ../../../node_modules/.pnpm/dot-case@3.0.4/node_modules/dot-case/dist.es2015/index.js
-var _tslib = require('tslib');
-function dotCase(input, options) {
-  if (options === void 0) {
-    options = {};
-  }
-  return noCase(input, _tslib.__assign.call(void 0, { delimiter: "." }, options));
-}
+var ChartHTML = ({
+  children
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, {
+    children
+  });
+};
+ChartHTML.displayName = "Chart.HTML";
 
-// ../../../node_modules/.pnpm/param-case@3.0.4/node_modules/param-case/dist.es2015/index.js
+// src/charts/private/chart-composition/render-legend-slot.ts
 
-function paramCase(input, options) {
-  if (options === void 0) {
-    options = {};
-  }
-  return dotCase(input, _tslib.__assign.call(void 0, { delimiter: "-" }, options));
+function renderLegendSlot(legendChildren, position2) {
+  return legendChildren.filter((l) => l.position === position2).map(
+    (l, i) => _react.createElement.call(void 0, _react.Fragment, { key: `legend-${position2}-${i}` }, l.element)
+  );
 }
 
-// ../../../node_modules/.pnpm/@wordpress+ui@0.9.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1_stylelint@17.5.0/node_modules/@wordpress/ui/build-module/stack/stack.mjs
-if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='71d20935c2']")) {
-  const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "71d20935c2");
-  style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._19ce0419607e1896__stack{display:flex}}"));
-  document.head.appendChild(style);
-}
-var style_default = { "stack": "_19ce0419607e1896__stack" };
-var gapTokens = {
-  xs: "var(--wpds-dimension-gap-xs, 4px)",
-  sm: "var(--wpds-dimension-gap-sm, 8px)",
-  md: "var(--wpds-dimension-gap-md, 12px)",
-  lg: "var(--wpds-dimension-gap-lg, 16px)",
-  xl: "var(--wpds-dimension-gap-xl, 24px)",
-  "2xl": "var(--wpds-dimension-gap-2xl, 32px)",
-  "3xl": "var(--wpds-dimension-gap-3xl, 40px)"
-};
-var Stack = _react.forwardRef.call(void 0, function Stack2({ direction, gap, align, justify, wrap, render, ...props }, ref) {
-  const style = {
-    gap: gap && gapTokens[gap],
-    alignItems: align,
-    justifyContent: justify,
-    flexDirection: direction,
-    flexWrap: wrap
-  };
-  const element = useRender({
-    render,
-    ref,
-    props: mergeProps(props, { style, className: style_default.stack })
-  });
-  return element;
-});
+// src/charts/private/chart-composition/use-chart-children.ts
 
-// ../../../node_modules/.pnpm/@wordpress+ui@0.9.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1_stylelint@17.5.0/node_modules/@wordpress/ui/build-module/text/text.mjs
 
-if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='893fb81f3c']")) {
-  const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "893fb81f3c");
-  style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._14437cfb77831647__heading-2xl{font-size:var(--wpds-font-size-2xl,32px);line-height:var(--wpds-font-line-height-2xl,40px)}._14437cfb77831647__heading-2xl,._3c78b7fa9b4072dd__heading-xl{font-family:var(--wpds-font-family-heading,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-weight:var(--wpds-font-weight-medium,499)}._3c78b7fa9b4072dd__heading-xl{font-size:var(--wpds-font-size-xl,20px);line-height:var(--wpds-font-line-height-md,24px)}.aa58f227716bcde2__heading-lg{font-size:var(--wpds-font-size-lg,15px)}.aa58f227716bcde2__heading-lg,.fc4da56d8dfe52c4__heading-md{font-family:var(--wpds-font-family-heading,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-weight:var(--wpds-font-weight-medium,499);line-height:var(--wpds-font-line-height-sm,20px)}.fc4da56d8dfe52c4__heading-md{font-size:var(--wpds-font-size-md,13px)}.a9b78c7c82e8dff7__heading-sm{font-family:var(--wpds-font-family-heading,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-size:var(--wpds-font-size-xs,11px);font-weight:var(--wpds-font-weight-medium,499);line-height:var(--wpds-font-line-height-xs,16px);text-transform:uppercase}._305ff559e52180d5__body-xl{font-size:var(--wpds-font-size-xl,20px);line-height:var(--wpds-font-line-height-xl,32px)}._305ff559e52180d5__body-xl,.ca1aa3fc2029e958__body-lg{font-family:var(--wpds-font-family-body,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-weight:var(--wpds-font-weight-regular,400)}.ca1aa3fc2029e958__body-lg{font-size:var(--wpds-font-size-lg,15px);line-height:var(--wpds-font-line-height-md,24px)}._131101940be12424__body-md{font-size:var(--wpds-font-size-md,13px);line-height:var(--wpds-font-line-height-sm,20px)}._0e8d87a42c1f75fa__body-sm,._131101940be12424__body-md{font-family:var(--wpds-font-family-body,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-weight:var(--wpds-font-weight-regular,400)}._0e8d87a42c1f75fa__body-sm{font-size:var(--wpds-font-size-sm,12px);line-height:var(--wpds-font-line-height-xs,16px)}}'));
-  document.head.appendChild(style);
+function useChartChildren(children, chartType) {
+  return _react.useMemo.call(void 0, () => {
+    const svg = [];
+    const html = [];
+    const legend = [];
+    const other = [];
+    const nonLegend = [];
+    _react.Children.forEach(children, (child) => {
+      if (_react.isValidElement.call(void 0, child)) {
+        if (child.type === Legend) {
+          const rawPosition = _optionalChain([child, 'access', _113 => _113.props, 'optionalAccess', _114 => _114.position]);
+          const position2 = rawPosition === "top" || rawPosition === "bottom" ? rawPosition : "bottom";
+          legend.push({ element: child, position: position2 });
+          return;
+        }
+        const childType = child.type;
+        const displayName = _optionalChain([childType, 'optionalAccess', _115 => _115.displayName]);
+        if (displayName === `${chartType}.SVG` || displayName === "Chart.SVG") {
+          if (_optionalChain([child, 'access', _116 => _116.props, 'optionalAccess', _117 => _117.children])) {
+            _react.Children.forEach(child.props.children, (svgChild) => {
+              svg.push(svgChild);
+            });
+          }
+        } else if (displayName === `${chartType}.HTML` || displayName === "Chart.HTML") {
+          if (_optionalChain([child, 'access', _118 => _118.props, 'optionalAccess', _119 => _119.children])) {
+            _react.Children.forEach(child.props.children, (htmlChild) => {
+              html.push(htmlChild);
+            });
+          }
+        } else if (child.type === _group.Group) {
+          svg.push(child);
+        } else {
+          other.push(child);
+        }
+      }
+      nonLegend.push(child);
+    });
+    return {
+      svgChildren: svg,
+      htmlChildren: html,
+      legendChildren: legend,
+      otherChildren: other,
+      nonLegendChildren: nonLegend
+    };
+  }, [children, chartType]);
 }
-var style_default2 = { "heading-2xl": "_14437cfb77831647__heading-2xl", "heading-xl": "_3c78b7fa9b4072dd__heading-xl", "heading-lg": "aa58f227716bcde2__heading-lg", "heading-md": "fc4da56d8dfe52c4__heading-md", "heading-sm": "a9b78c7c82e8dff7__heading-sm", "body-xl": "_305ff559e52180d5__body-xl", "body-lg": "ca1aa3fc2029e958__body-lg", "body-md": "_131101940be12424__body-md", "body-sm": "_0e8d87a42c1f75fa__body-sm" };
-var Text = _react.forwardRef.call(void 0, function Text2({ variant = "body-md", render, className, ...props }, ref) {
-  const element = useRender({
-    render,
-    defaultTagName: "span",
-    ref,
-    props: mergeProps(props, {
-      className: _clsx2.default.call(void 0, style_default2[variant], className)
-    })
-  });
-  return element;
-});
 
 // src/charts/private/chart-layout/chart-layout.tsx
 
@@ -3808,7 +3813,6 @@ var conversion_funnel_chart_module_default = {
   "funnel-step": "a8ccharts-VqFY0l",
   "funnel-step--animated": "a8ccharts-fk-hCl",
   "funnel-step--blurred": "a8ccharts-1zOc9c",
-  "step-header": "a8ccharts-2JsQiV",
   "step-label": "a8ccharts-6OabC4",
   "step-rate": "a8ccharts-9wSZ6n",
   "bar-container": "a8ccharts-sSmCTi",
@@ -4048,7 +4052,10 @@ var ConversionFunnelChartInternal = ({
       children: changeIndicator
     })]
   });
-  const renderDefaultTooltip2 = (step) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, {
+  const renderDefaultTooltip2 = (step) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Stack, {
+    direction: "column",
+    align: "flex-start",
+    gap: "xs",
     children: [/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
       className: conversion_funnel_chart_module_default["tooltip-title"],
       children: step.label
@@ -4089,6 +4096,7 @@ var ConversionFunnelChartInternal = ({
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, {
     children: [/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Stack, {
       direction: "column",
+      gap: "xl",
       ref: (node2) => {
         portalContainerRef(node2);
         chartRef.current = node2;
@@ -4103,20 +4111,27 @@ var ConversionFunnelChartInternal = ({
         changeIndicator,
         className: conversion_funnel_chart_module_default["main-metric"],
         changeColor
-      }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
+      }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Stack, {
+        direction: "row",
+        align: "baseline",
+        gap: "sm",
         className: conversion_funnel_chart_module_default["main-metric"],
         children: renderDefaultMainMetric()
-      }), /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
+      }), /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Stack, {
+        direction: "row",
+        align: "flex-end",
+        gap: "lg",
         className: conversion_funnel_chart_module_default["funnel-container"],
         children: steps.map((step, index) => {
           const barHeight = step.rate / maxRate * 100;
           const {
             isBlurred
           } = getStepState(step.id);
-          return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
+          return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Stack, {
+            direction: "column",
             className: _clsx2.default.call(void 0, conversion_funnel_chart_module_default["funnel-step"], isColorPaletteResolved && conversion_funnel_chart_module_default["funnel-step--animated"], isBlurred && conversion_funnel_chart_module_default["funnel-step--blurred"]),
+            gap: "xl",
             children: [/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-              className: conversion_funnel_chart_module_default["step-header"],
               children: [renderStepLabel ? renderStepLabel({
                 step,
                 index,
@@ -4132,7 +4147,9 @@ var ConversionFunnelChartInternal = ({
                 className: conversion_funnel_chart_module_default["step-rate"],
                 children: formatPercentage(step.rate)
               })]
-            }), /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
+            }), /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Stack, {
+              direction: "column",
+              justify: "flex-end",
               className: conversion_funnel_chart_module_default["bar-container"],
               onClick: _optionalChain([stepHandlers, 'access', _160 => _160.get, 'call', _161 => _161(step.id), 'optionalAccess', _162 => _162.onClick]),
               onKeyDown: _optionalChain([stepHandlers, 'access', _163 => _163.get, 'call', _164 => _164(step.id), 'optionalAccess', _165 => _165.onKeyDown]),
@@ -4262,7 +4279,9 @@ var GeoChartInternal = ({
       backgroundColor
     }
   } = useGlobalChartsContext();
-  const loadingPlaceholder = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
+  const loadingPlaceholder = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Stack, {
+    align: "center",
+    justify: "center",
     className: _clsx2.default.call(void 0, "geo-chart", geo_chart_module_default.container, className),
     style: {
       width,
@@ -4330,7 +4349,9 @@ var GeoChartInternal = ({
     legend: "none",
     keepAspectRatio: true
   }), [region, resolution, lightColorHex, fullColorHex, backgroundColorHex, defaultFillColorHex, sanitizedData.hasHtmlTooltips]);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Stack, {
+    align: "center",
+    justify: "center",
     className: _clsx2.default.call(void 0, "geo-chart", geo_chart_module_default.container, className),
     style: {
       width,
@@ -6930,7 +6951,6 @@ var line_chart_module_default = {
   "line-chart__annotation-label-trigger-button": "a8ccharts-7mh3Cl",
   "line-chart__annotation-label-popover--visible": "a8ccharts-VAeVuJ",
   "line-chart__annotation-label-popover--safari": "a8ccharts-TEe-iV",
-  "line-chart__annotation-label-popover-header": "a8ccharts-LAUpx7",
   "line-chart__annotation-label-popover-content": "a8ccharts-b76gEu",
   "line-chart__annotation-label-popover-close-button": "a8ccharts-LIpFoS"
 };
@@ -6998,8 +7018,10 @@ var LineChartAnnotationLabelWithPopover = ({
       id: popoverId,
       popover: "auto",
       className: _clsx2.default.call(void 0, line_chart_module_default["line-chart__annotation-label-popover"], isPositioned && line_chart_module_default["line-chart__annotation-label-popover--visible"], isBrowserSafari && line_chart_module_default["line-chart__annotation-label-popover--safari"]),
-      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-        className: line_chart_module_default["line-chart__annotation-label-popover-header"],
+      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Stack, {
+        direction: "row",
+        align: "flex-start",
+        justify: "space-between",
         children: [/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
           className: line_chart_module_default["line-chart__annotation-label-popover-content"],
           children: renderLabelPopover({
@@ -7442,7 +7464,10 @@ var renderDefaultTooltip = (params) => {
     children: [/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
       className: line_chart_module_default["line-chart__tooltip-date"],
       children: _optionalChain([nearestDatum, 'access', _192 => _192.date, 'optionalAccess', _193 => _193.toLocaleDateString, 'call', _194 => _194()])
-    }), tooltipPoints.map((point) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
+    }), tooltipPoints.map((point) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Stack, {
+      direction: "row",
+      align: "center",
+      justify: "space-between",
       className: line_chart_module_default["line-chart__tooltip-row"],
       children: [/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", {
         className: line_chart_module_default["line-chart__tooltip-label"],