@automattic/charts 0.57.0 → 0.58.0

package/dist/chunk-XVBH5XHE.cjs

@@ -0,0 +1,400 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+
+
+
+var _chunkWYK7EL5Rcjs = require('./chunk-WYK7EL5R.cjs');
+
+
+var _chunkMXGLYWVPcjs = require('./chunk-MXGLYWVP.cjs');
+
+// src/components/legend/legend.tsx
+var _react = require('react');
+
+// src/charts/private/single-chart-context/single-chart-context.tsx
+
+var ChartInstanceContext = /* @__PURE__ */ _react.createContext.call(void 0, null);
+var SingleChartContext = ChartInstanceContext;
+
+// src/charts/private/single-chart-context/use-single-chart-context.ts
+
+var useChartInstanceContext = () => {
+  const context = _react.useContext.call(void 0, ChartInstanceContext);
+  if (!context) {
+    throw new Error("useChartInstanceContext must be used within a Chart component");
+  }
+  return context;
+};
+var useSingleChartContext = useChartInstanceContext;
+
+// src/components/legend/private/base-legend.tsx
+var _group = require('@visx/group');
+var _legend = require('@visx/legend');
+var _scale = require('@visx/scale');
+var _clsx = require('clsx'); var _clsx2 = _interopRequireDefault(_clsx);
+
+
+// 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(_));
+}
+
+// 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)
+  });
+}
+
+// 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 _jsxruntime = require('react/jsx-runtime');
+var orientationToFlexDirection = {
+  horizontal: "row",
+  vertical: "column"
+};
+var LegendText = ({
+  text,
+  textOverflow,
+  maxWidth
+}) => {
+  const isEllipsis = maxWidth != null && textOverflow === "ellipsis";
+  const [textRef, isTruncated] = _chunkWYK7EL5Rcjs.useTextTruncation.call(void 0, 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 = _chunkWYK7EL5Rcjs.useGlobalChartsTheme.call(void 0, );
+  const context = _react.useContext.call(void 0, _chunkWYK7EL5Rcjs.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', _2 => _2[index], 'optionalAccess', _3 => _3.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', _4 => _4.legend, 'optionalAccess', _5 => _5.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', _6 => _6[i], 'optionalAccess', _7 => _7.renderGlyph]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", {
+            width: _optionalChain([items, 'access', _8 => _8[i], 'optionalAccess', _9 => _9.glyphSize]) * 2,
+            height: _optionalChain([items, 'access', _10 => _10[i], 'optionalAccess', _11 => _11.glyphSize]) * 2,
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _group.Group, {
+              children: _optionalChain([items, 'access', _12 => _12[i], 'optionalAccess', _13 => _13.renderGlyph, 'call', _14 => _14({
+                key: `legend-glyph-${label.text}`,
+                datum: {},
+                index: i,
+                color: fill(label),
+                size: _optionalChain([items, 'access', _15 => _15[i], 'optionalAccess', _16 => _16.glyphSize]),
+                x: _optionalChain([items, 'access', _17 => _17[i], 'optionalAccess', _18 => _18.glyphSize]),
+                y: _optionalChain([items, 'access', _19 => _19[i], 'optionalAccess', _20 => _20.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', _21 => _21.legend, 'optionalAccess', _22 => _22.labelStyles])
+            },
+            children: [/* @__PURE__ */ _jsxruntime.jsx.call(void 0, LegendText, {
+              text: label.text,
+              textOverflow,
+              maxWidth
+            }), _optionalChain([matchedItem, 'optionalAccess', _23 => _23.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
+
+var Legend = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
+  chartId,
+  items,
+  ...props
+}, ref) => {
+  const context = _react.useContext.call(void 0, _chunkWYK7EL5Rcjs.GlobalChartsContext);
+  const singleChartContext = _react.useContext.call(void 0, SingleChartContext);
+  const contextChartId = _nullishCoalesce(chartId, () => ( _optionalChain([singleChartContext, 'optionalAccess', _24 => _24.chartId])));
+  const contextItems = _react.useMemo.call(void 0, () => {
+    return contextChartId && context ? _optionalChain([context, 'access', _25 => _25.getChartData, 'call', _26 => _26(contextChartId), 'optionalAccess', _27 => _27.legendItems]) : void 0;
+  }, [contextChartId, context]);
+  const legendItems = items || contextItems;
+  if (!legendItems) {
+    return null;
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BaseLegend, {
+    ref,
+    items: legendItems,
+    ...props,
+    chartId: contextChartId
+  });
+});
+
+// src/components/legend/hooks/use-chart-legend-items.ts
+var _numberformatters = require('@automattic/number-formatters');
+
+function formatPointValue(point, showValues, legendValueDisplay = "percentage") {
+  if (!showValues || legendValueDisplay === "none") {
+    return "";
+  }
+  if ("percentage" in point) {
+    const percentagePoint = point;
+    switch (legendValueDisplay) {
+      case "percentage":
+        return _chunkMXGLYWVPcjs.formatPercentage.call(void 0, percentagePoint.percentage);
+      case "value":
+        return _numberformatters.formatNumber.call(void 0, percentagePoint.value);
+      case "valueDisplay":
+        return percentagePoint.valueDisplay || _numberformatters.formatNumber.call(void 0, percentagePoint.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;
+}
+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', _28 => _28.data, 'optionalAccess', _29 => _29.length, 'optionalAccess', _30 => _30.toString, 'call', _31 => _31()]) || "0" : "",
+      color,
+      shapeStyle: shapeStyles
+    };
+    return applyGlyphToLegendItem(baseItem, withGlyph, glyph, renderGlyph, glyphSize);
+  };
+  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 useChartLegendItems(data, options = {}, legendShape) {
+  const {
+    showValues = false,
+    legendValueDisplay = "percentage",
+    withGlyph = false,
+    glyphSize = 8,
+    renderGlyph
+  } = options;
+  const { getElementStyles } = _chunkWYK7EL5Rcjs.useGlobalChartsContext.call(void 0, );
+  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 processPointData(
+      data,
+      getElementStyles,
+      showValues,
+      legendValueDisplay,
+      withGlyph,
+      glyphSize,
+      renderGlyph,
+      legendShape
+    );
+  }, [
+    data,
+    getElementStyles,
+    showValues,
+    legendValueDisplay,
+    withGlyph,
+    glyphSize,
+    renderGlyph,
+    legendShape
+  ]);
+}
+
+
+
+
+
+
+exports.SingleChartContext = SingleChartContext; exports.useSingleChartContext = useSingleChartContext; exports.Legend = Legend; exports.useChartLegendItems = useChartLegendItems;
+//# sourceMappingURL=chunk-XVBH5XHE.cjs.map

package/dist/chunk-XVBH5XHE.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-XVBH5XHE.cjs","../src/components/legend/legend.tsx","../src/charts/private/single-chart-context/single-chart-context.tsx","../src/charts/private/single-chart-context/use-single-chart-context.ts","../src/components/legend/private/base-legend.tsx","../src/components/legend/utils/value-or-identity.ts","../src/components/legend/utils/label-transform-factory.ts","../src/components/legend/private/base-legend.module.scss","../src/components/legend/hooks/use-chart-legend-items.ts"],"names":["useMemo"],"mappings":"AAAA;AACE;AACA;AACA;AACA;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACA;ACVA,8BAAgD;ADYhD;AACA;AEbA;AAIO,IAAM,qBAAA,kBAAoC,kCAAA,IAAkB,CAAA;AAG5D,IAAM,mBAAA,EAAqB,oBAAA;AFUlC;AACA;AGlBA;AAGO,IAAM,wBAAA,EAA0B,CAAA,EAAA,GAAiC;AACvE,EAAA,MAAM,QAAA,EAAU,+BAAA,oBAAiC,CAAA;AACjD,EAAA,GAAA,CAAK,CAAE,OAAA,EAAU;AAChB,IAAA,MAAM,IAAI,KAAA,CAAO,+DAAgE,CAAA;AAAA,EAClF;AACA,EAAA,OAAO,OAAA;AACR,CAAA;AAEO,IAAM,sBAAA,EAAwB,uBAAA;AHiBrC;AACA;AI7BA,oCAAsB;AACtB,sCAAoE;AACpE,oCAA6B;AAC7B,wEAAiB;AACjB;AJ+BA;AACA;AK7BO,SAAS,eAAA,CAAsB,CAAA,EAA6B;AAClE,EAAA,GAAA,CAAK,EAAA,GAAK,OAAO,EAAA,IAAM,SAAA,GAAY,QAAA,GAAW,EAAA,GAAK,OAAO,CAAA,CAAE,MAAA,IAAU,WAAA;AACrE,IAAA,OAAO,CAAA,CAAE,KAAA;AACV,EAAA,OAAO,CAAA;AACR;AAOO,SAAS,qBAAA,CAA4B,CAAA,EAAkC;AAC7E,EAAA,OAAO,MAAA,CAAQ,eAAA,CAAiB,CAAE,CAAE,CAAA;AACrC;ALyBA;AACA;AMpCO,SAAS,qBAAA,CAAmD;AAAA,EAClE,KAAA;AAAA,EACA;AACD,CAAA,EAGiE;AAChE,EAAA,OAAO,CAAE,CAAA,EAAG,CAAA,EAAA,GAAA,CAAS;AAAA,IACpB,KAAA,EAAO,CAAA;AAAA,IACP,KAAA,EAAO,CAAA;AAAA,IACP,IAAA,EAAM,CAAA,EAAA;AACC,IAAA;AACR,EAAA;AACD;ANmCW;AACA;AO3DqE;AAC9E,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACF;AP6DW;AACA;AInEF;AACH;AACJ,EAAA;AACA,EAAA;AACF;AAIM;AACJ,EAAA;AACA,EAAA;AACA,EAAA;AACI;AACE,EAAA;AACC,EAAA;AACa,EAAA;AACb,IAAA;AACL,IAAA;AACO,IAAA;AACD,MAAA;AACF,QAAA;AACA,QAAA;AACF,MAAA;AACF,IAAA;AACO,IAAA;AACP,IAAA;AACD,EAAA;AACH;AAMa;AACX,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACQ,EAAA;AACD,EAAA;AACA,EAAA;AACP,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACS;AACH,EAAA;AACJ,IAAA;AACA,IAAA;AACE,EAAA;AACE,EAAA;AACJ,IAAA;AACM,IAAA;AACN,IAAA;AACA,IAAA;AACA,IAAA;AACE,EAAA;AACE,EAAA;AACG,IAAA;AACP,IAAA;AACA,IAAA;AACE,EAAA;AACE,EAAA;AACA,EAAA;AACA,EAAA;AACJ,IAAA;AACO,IAAA;AACR,EAAA;AACK,EAAA;AACA,EAAA;AACJ,IAAA;AACI,EAAA;AAGA,EAAA;AACA,IAAA;AACF,MAAA;AACF,IAAA;AACE,EAAA;AAGE,EAAA;AACC,IAAA;AACH,MAAA;AACF,IAAA;AACO,IAAA;AACL,EAAA;AAGE,EAAA;AACC,IAAA;AACH,MAAA;AACF,IAAA;AACO,IAAA;AACL,EAAA;AACE,EAAA;AACC,IAAA;AACH,MAAA;AACF,IAAA;AACO,IAAA;AACD,MAAA;AACF,QAAA;AACA,QAAA;AACF,MAAA;AACF,IAAA;AACE,EAAA;AACG,EAAA;AACE,IAAA;AACP,IAAA;AACA,IAAA;AACA,IAAA;AACE,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACE,QAAA;AACG,QAAA;AACL,MAAA;AACA,MAAA;AACE,QAAA;AACA,QAAA;AACA,QAAA;AACA,QAAA;AACA,QAAA;AACE,UAAA;AACA,UAAA;AACA,UAAA;AACA,UAAA;AACA,UAAA;AACA,UAAA;AACA,UAAA;AACA,UAAA;AACA,UAAA;AACA,UAAA;AAA4D,YAAA;AAC7B,YAAA;AACC,YAAA;AACK,cAAA;AACD,gBAAA;AACC,gBAAA;AACvB,gBAAA;AACD,gBAAA;AACU,gBAAA;AACD,gBAAA;AACH,gBAAA;AACA,cAAA;AACd,YAAA;AAEJ,UAAA;AAAmC,YAAA;AAClC,YAAA;AACQ,YAAA;AACD,YAAA;AACC,YAAA;AACM,YAAA;AACH,YAAA;AACX,YAAA;AACA,YAAA;AACA,YAAA;AAED,UAAA;AAAmC,YAAA;AAC8C,YAAA;AACzE,cAAA;AACW,cAAA;AACV,cAAA;AACE,cAAA;AACS,YAAA;AACnB,YAAA;AACyC,cAAA;AAC3B,cAAA;AACZ,cAAA;AACA,YAAA;AACuF,cAAA;AAClD,cAAA;AACC,YAAA;AAEzC,UAAA;AACA,QAAA;AACJ,MAAA;AACF,IAAA;AACF,EAAA;AACF;AJuDU;AACA;ACtPF;AACI;AACX,EAAA;AACA,EAAA;AACG,EAAA;AACM;AAEH,EAAA;AACA,EAAA;AAIA,EAAA;AAGA,EAAA;AACG,IAAA;AACL,EAAA;AAGE,EAAA;AACD,EAAA;AACI,IAAA;AACT,EAAA;AACoB,EAAA;AAClB,IAAA;AACO,IAAA;AACJ,IAAA;AACH,IAAA;AACD,EAAA;AACF;ADgPU;AACA;AQnRF;AACA;AA+BA;AAKD,EAAA;AACC,IAAA;AACR,EAAA;AAGK,EAAA;AACE,IAAA;AACN,IAAA;AACM,MAAA;AACJ,QAAA;AACI,MAAA;AACJ,QAAA;AACI,MAAA;AACJ,QAAA;AACD,MAAA;AACC,QAAA;AACF,IAAA;AACD,EAAA;AAGK,EAAA;AACG,IAAA;AACR,EAAA;AAEO,EAAA;AACR;AAWS;AAOH,EAAA;AACE,IAAA;AACD,IAAA;AACJ,MAAA;AACI,QAAA;AACH,QAAA;AACA,QAAA;AACD,MAAA;AACD,IAAA;AACD,EAAA;AAEO,EAAA;AACR;AAaS;AASF,EAAA;AACC,IAAA;AACL,MAAA;AACA,MAAA;AACA,MAAA;AACC,IAAA;AAEI,IAAA;AACL,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACD,IAAA;AAEO,IAAA;AACR,EAAA;AAEO,EAAA;AACR;AAcS;AAUF,EAAA;AACC,IAAA;AACL,MAAA;AACA,MAAA;AACA,MAAA;AACC,IAAA;AAEI,IAAA;AACL,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACD,IAAA;AAEO,IAAA;AACR,EAAA;AAEO,EAAA;AACR;AASgB;AAOT,EAAA;AACL,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACG,EAAA;AACI,EAAA;AAEDA,EAAAA;AACC,IAAA;AACN,MAAA;AACD,IAAA;AAGK,IAAA;AACJ,MAAA;AACC,QAAA;AACA,QAAA;AACA,QAAA;AACA,QAAA;AACA,QAAA;AACA,QAAA;AACA,QAAA;AACD,MAAA;AACD,IAAA;AAGO,IAAA;AACN,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACD,IAAA;AACE,EAAA;AACF,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACC,EAAA;AACH;AR0JW;AACA;AACA;AACA;AACA;AACA;AACA","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-XVBH5XHE.cjs","sourcesContent":[null,"import { useContext, useMemo, forwardRef } from 'react';\nimport { SingleChartContext } from '../../charts/private/single-chart-context';\nimport { GlobalChartsContext } from '../../providers';\nimport { BaseLegend } from './private';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const Legend = /*#__PURE__*/forwardRef(({\n  chartId,\n  items,\n  ...props\n}, ref) => {\n  // Get context but don't throw if it doesn't exist\n  const context = useContext(GlobalChartsContext);\n  const singleChartContext = useContext(SingleChartContext);\n\n  // When chartId is used, it is standalone mode\n  // When chartId is not provided, we use the context's chartId, meaning it is in a single chart context\n  const contextChartId = chartId ?? singleChartContext?.chartId;\n\n  // Use useMemo to ensure re-rendering when context changes\n  const contextItems = useMemo(() => {\n    return contextChartId && context ? context.getChartData(contextChartId)?.legendItems : undefined;\n  }, [contextChartId, context]);\n\n  // Provided items take precedence over context items\n  const legendItems = items || contextItems;\n  if (!legendItems) {\n    return null;\n  }\n  return /*#__PURE__*/_jsx(BaseLegend, {\n    ref: ref,\n    items: legendItems,\n    ...props,\n    chartId: contextChartId\n  });\n});","import { createContext } from 'react';\n\n// Local context for chart implicit state sharing\n\nexport const ChartInstanceContext = /*#__PURE__*/createContext(null);\n\n// Backward compatibility exports\nexport const SingleChartContext = ChartInstanceContext;","import { useContext } from 'react';\nimport { ChartInstanceContext, type ChartInstanceContextValue } from './single-chart-context';\n\nexport const useChartInstanceContext = (): ChartInstanceContextValue => {\n\tconst context = useContext( ChartInstanceContext );\n\tif ( ! context ) {\n\t\tthrow new Error( 'useChartInstanceContext must be used within a Chart component' );\n\t}\n\treturn context;\n};\n\nexport const useSingleChartContext = useChartInstanceContext;\n","import { Group } from '@visx/group';\nimport { LegendItem, LegendLabel, LegendOrdinal, LegendShape } from '@visx/legend';\nimport { scaleOrdinal } from '@visx/scale';\nimport clsx from 'clsx';\nimport { forwardRef, useCallback, useContext } from 'react';\nimport { useTextTruncation } from '../../../hooks';\nimport { GlobalChartsContext, useGlobalChartsTheme } from '../../../providers';\nimport { valueOrIdentity, valueOrIdentityString, labelTransformFactory } from '../utils';\nimport styles from './base-legend.module.scss';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst orientationToFlexDirection = {\n  horizontal: 'row',\n  vertical: 'column'\n};\n\n// Component for legend text with truncation detection\n// Moved outside BaseLegend to prevent recreation on every render\nconst LegendText = ({\n  text,\n  textOverflow,\n  maxWidth\n}) => {\n  const isEllipsis = maxWidth != null && textOverflow === 'ellipsis';\n  const [textRef, isTruncated] = useTextTruncation(Boolean(isEllipsis));\n  return /*#__PURE__*/_jsx(\"span\", {\n    ref: textRef,\n    className: clsx(styles['legend-item-text'], maxWidth != null && styles[`legend-item-text--${textOverflow}`]),\n    style: {\n      ...(maxWidth != null && {\n        maxWidth,\n        minWidth: 0\n      })\n    },\n    title: isEllipsis && isTruncated ? text : undefined,\n    children: text\n  });\n};\n\n/*\n * Base legend component that displays color-coded items with labels based on visx LegendOrdinal.\n * We avoid using LegendOrdinal directly to enable support for advanced features such as interactivity.\n */\nexport const BaseLegend = /*#__PURE__*/forwardRef(({\n  items,\n  className,\n  orientation = 'horizontal',\n  alignment = 'center',\n  shape = 'rect',\n  fill = valueOrIdentityString,\n  size = valueOrIdentityString,\n  labelFormat = valueOrIdentity,\n  labelTransform = labelTransformFactory,\n  itemStyles,\n  itemClassName,\n  labelStyles,\n  labelClassName,\n  shapeStyles,\n  render,\n  interactive = false,\n  chartId\n}, ref) => {\n  const {\n    margin: itemMargin = '0',\n    flexDirection: itemDirection = 'row'\n  } = itemStyles ?? {};\n  const {\n    justifyContent: labelJustifyContent = 'flex-start',\n    flex: labelFlex = '0 0 auto',\n    margin: labelMargin = '0 4px',\n    maxWidth,\n    textOverflow = 'wrap'\n  } = labelStyles ?? {};\n  const {\n    width: shapeWidth = 16,\n    height: shapeHeight = 16,\n    margin: shapeMargin = '2px 4px 2px 0'\n  } = shapeStyles ?? {};\n  const theme = useGlobalChartsTheme();\n  const context = useContext(GlobalChartsContext);\n  const legendScale = scaleOrdinal({\n    domain: items.map(item => item.label),\n    range: items.map(item => item.color)\n  });\n  const domain = legendScale.domain();\n  const getShapeStyle = useCallback(({\n    index\n  }) => items[index]?.shapeStyle, [items]);\n\n  // Handle legend item clicks for interactive mode\n  const handleLegendClick = useCallback(seriesLabel => {\n    if (interactive && chartId && context) {\n      context.toggleSeriesVisibility(chartId, seriesLabel);\n    }\n  }, [interactive, chartId, context]);\n\n  // Check if a series is visible\n  const isSeriesVisible = useCallback(seriesLabel => {\n    if (!interactive || !chartId || !context) {\n      return true;\n    }\n    return context.isSeriesVisible(chartId, seriesLabel);\n  }, [interactive, chartId, context]);\n\n  // Create event handlers to avoid inline arrow functions\n  const createClickHandler = useCallback(labelText => {\n    if (!interactive) {\n      return undefined;\n    }\n    return () => handleLegendClick(labelText);\n  }, [interactive, handleLegendClick]);\n  const createKeyDownHandler = useCallback(labelText => {\n    if (!interactive) {\n      return undefined;\n    }\n    return event => {\n      if (event.key === 'Enter' || event.key === ' ') {\n        event.preventDefault();\n        handleLegendClick(labelText);\n      }\n    };\n  }, [interactive, handleLegendClick]);\n  return render ? render(items) : /*#__PURE__*/_jsx(LegendOrdinal, {\n    scale: legendScale,\n    labelFormat: labelFormat,\n    labelTransform: labelTransform,\n    children: labels => /*#__PURE__*/_jsx(\"div\", {\n      ref: ref,\n      role: \"list\",\n      className: clsx(styles.legend, styles[`legend--${orientation}`], styles[`legend--alignment-${alignment}`], className),\n      style: {\n        flexDirection: orientationToFlexDirection[orientation],\n        ...theme.legend?.containerStyles\n      },\n      children: labels.map((label, i) => {\n        const visible = isSeriesVisible(label.text);\n        const handleClick = createClickHandler(label.text);\n        const handleKeyDown = createKeyDownHandler(label.text);\n        const matchedItem = items[i];\n        return /*#__PURE__*/_jsxs(LegendItem, {\n          className: clsx('visx-legend-item', styles['legend-item'], interactive && styles['legend-item--interactive'], !visible && styles['legend-item--inactive'], itemClassName),\n          margin: itemMargin,\n          flexDirection: orientation === 'vertical' && alignment === 'end' ? 'row-reverse' : itemDirection,\n          onClick: handleClick,\n          onKeyDown: handleKeyDown,\n          role: interactive ? 'button' : undefined,\n          tabIndex: interactive ? 0 : undefined,\n          \"aria-pressed\": interactive ? visible : undefined,\n          \"aria-label\": interactive ? `${label.text}: ${visible ? 'visible' : 'hidden'}. Toggle visibility.` : undefined,\n          children: [items[i]?.renderGlyph ? /*#__PURE__*/_jsx(\"svg\", {\n            width: items[i]?.glyphSize * 2,\n            height: items[i]?.glyphSize * 2,\n            children: /*#__PURE__*/_jsx(Group, {\n              children: items[i]?.renderGlyph({\n                key: `legend-glyph-${label.text}`,\n                datum: {},\n                index: i,\n                color: fill(label),\n                size: items[i]?.glyphSize,\n                x: items[i]?.glyphSize,\n                y: items[i]?.glyphSize\n              })\n            })\n          }) : /*#__PURE__*/_jsx(LegendShape, {\n            shape: shape,\n            height: shapeHeight,\n            width: shapeWidth,\n            margin: shapeMargin,\n            item: domain[i],\n            itemIndex: i,\n            label: label,\n            fill: fill,\n            size: size,\n            shapeStyle: getShapeStyle\n          }), /*#__PURE__*/_jsxs(LegendLabel, {\n            className: clsx('visx-legend-label', styles['legend-item-label'], labelClassName),\n            style: {\n              justifyContent: labelJustifyContent,\n              flex: labelFlex,\n              margin: labelMargin,\n              ...theme.legend?.labelStyles\n            },\n            children: [/*#__PURE__*/_jsx(LegendText, {\n              text: label.text,\n              textOverflow: textOverflow,\n              maxWidth: maxWidth\n            }), matchedItem?.value != null && matchedItem.value !== '' && /*#__PURE__*/_jsxs(\"span\", {\n              className: styles['legend-item-value'],\n              children: ['\\u00A0', matchedItem.value]\n            })]\n          })]\n        }, `legend-${label.text}-${i}`);\n      })\n    })\n  });\n});","export type ValueOrIdentity< T > = T | { value?: T };\n\n/**\n * Returns an object's value if defined, or the object.\n * @param _ - The object to return the value of.\n * @return The value of the object, or the object itself.\n */\nexport function valueOrIdentity< T >( _: ValueOrIdentity< T > ): T {\n\tif ( _ && typeof _ === 'object' && 'value' in _ && typeof _.value !== 'undefined' )\n\t\treturn _.value;\n\treturn _ as T;\n}\n\n/**\n * Returns an object's value if defined, or the object, coerced to a string.\n * @param _ - The object to return the value of.\n * @return The value of the object, or the object itself.\n */\nexport function valueOrIdentityString< T >( _: ValueOrIdentity< T > ): string {\n\treturn String( valueOrIdentity( _ ) );\n}\n","import type { ItemTransformer, LabelFormatter } from '@visx/legend/lib/types';\nimport type { AnyD3Scale, ScaleInput } from '@visx/scale';\n\n/**\n * Returns a function which takes a Datum and index as input, and returns a formatted label object.\n * @param {object}                            root0             - The object to return the value of.\n * @param {AnyD3Scale}                        root0.scale       - The scale to use.\n * @param {LabelFormatter<ScaleInput<Scale>>} root0.labelFormat - The label format to use.\n * @return {ItemTransformer<ScaleInput<Scale>, ReturnType<Scale>>} The label transform factory.\n */\nexport function labelTransformFactory< Scale extends AnyD3Scale >( {\n\tscale,\n\tlabelFormat,\n}: {\n\tscale: Scale;\n\tlabelFormat: LabelFormatter< ScaleInput< Scale > >;\n} ): ItemTransformer< ScaleInput< Scale >, ReturnType< Scale > > {\n\treturn ( d, i ) => ( {\n\t\tdatum: d,\n\t\tindex: i,\n\t\ttext: `${ labelFormat( d, i ) }`,\n\t\tvalue: scale( d ),\n\t} );\n}\n","import 'css-chunk:src/components/legend/private/base-legend.module.scss';export default {\n  \"legend\": \"a8ccharts-89ApsU\",\n  \"legend--horizontal\": \"a8ccharts-AELBvX\",\n  \"legend--vertical\": \"a8ccharts-fX8uQe\",\n  \"legend--alignment-start\": \"a8ccharts-DEe0wg\",\n  \"legend--alignment-center\": \"a8ccharts-WBKF9I\",\n  \"legend--alignment-end\": \"a8ccharts-JfwMng\",\n  \"legend-item\": \"a8ccharts-Vflwq8\",\n  \"legend-item--interactive\": \"a8ccharts-qGsavM\",\n  \"legend-item--inactive\": \"a8ccharts-ZtDY-Q\",\n  \"legend-item-label\": \"a8ccharts-2H65Kr\",\n  \"legend-item-text--wrap\": \"a8ccharts-faSDBI\",\n  \"legend-item-text--ellipsis\": \"a8ccharts-FISUIO\",\n  \"legend-item-value\": \"a8ccharts-DTZlT-\"\n};","import { formatNumber } from '@automattic/number-formatters';\nimport { useMemo } from 'react';\nimport {\n\tuseGlobalChartsContext,\n\ttype GetElementStylesParams,\n\ttype ElementStyles,\n} from '../../../providers';\nimport { formatPercentage } from '../../../utils';\nimport type { SeriesData, DataPointDate, DataPointPercentage } from '../../../types';\nimport type { BaseLegendItem } from '../types';\nimport type { LegendShape } from '@visx/legend/lib/types';\nimport type { GlyphProps } from '@visx/xychart';\nimport type { ReactNode } from 'react';\n\nexport type LegendValueDisplay = 'percentage' | 'value' | 'valueDisplay' | 'none';\n\nexport interface ChartLegendOptions {\n\twithGlyph?: boolean;\n\tglyphSize?: number;\n\trenderGlyph?: < Datum extends object >( props: GlyphProps< Datum > ) => ReactNode;\n\tshowValues?: boolean;\n\tlegendValueDisplay?: LegendValueDisplay;\n\tlegendShape?: LegendShape< SeriesData[], number >;\n}\n\n/**\n * Formats the value for a data point based on its type and display preference\n * @param point              - The data point to format\n * @param showValues         - Whether to show values or return empty string\n * @param legendValueDisplay - What type of value to display\n * @return Formatted value string\n */\nfunction formatPointValue(\n\tpoint: DataPointDate | DataPointPercentage,\n\tshowValues: boolean,\n\tlegendValueDisplay: LegendValueDisplay = 'percentage'\n): string {\n\tif ( ! showValues || legendValueDisplay === 'none' ) {\n\t\treturn '';\n\t}\n\n\t// Handle DataPointPercentage (pie chart data)\n\tif ( 'percentage' in point ) {\n\t\tconst percentagePoint = point as DataPointPercentage;\n\t\tswitch ( legendValueDisplay ) {\n\t\t\tcase 'percentage':\n\t\t\t\treturn formatPercentage( percentagePoint.percentage );\n\t\t\tcase 'value':\n\t\t\t\treturn formatNumber( percentagePoint.value );\n\t\t\tcase 'valueDisplay':\n\t\t\t\treturn percentagePoint.valueDisplay || formatNumber( percentagePoint.value );\n\t\t\tdefault:\n\t\t\t\treturn '';\n\t\t}\n\t}\n\n\t// Handle DataPointDate (time series data)\n\tif ( 'value' in point ) {\n\t\treturn point.value !== null ? formatNumber( point.value ) : '';\n\t}\n\n\treturn '';\n}\n\n/**\n * Applies glyph configuration to a legend item if needed\n * @param baseItem    - The base legend item\n * @param withGlyph   - Whether to include glyph rendering\n * @param glyph       - Glyph component from theme\n * @param renderGlyph - Custom glyph render function\n * @param glyphSize   - Size of the glyph\n * @return The legend item with glyph configuration applied if applicable\n */\nfunction applyGlyphToLegendItem(\n\tbaseItem: BaseLegendItem,\n\twithGlyph: boolean,\n\tglyph?: < Datum extends object >( props: GlyphProps< Datum > ) => ReactNode,\n\trenderGlyph?: < Datum extends object >( props: GlyphProps< Datum > ) => ReactNode,\n\tglyphSize?: number\n): BaseLegendItem {\n\tif ( withGlyph ) {\n\t\tconst glyphToUse = glyph || renderGlyph;\n\t\tif ( glyphToUse ) {\n\t\t\treturn {\n\t\t\t\t...baseItem,\n\t\t\t\tglyphSize,\n\t\t\t\trenderGlyph: glyphToUse,\n\t\t\t};\n\t\t}\n\t}\n\n\treturn baseItem;\n}\n\n/**\n * Processes SeriesData into legend items\n * @param seriesData       - The series data to process\n * @param getElementStyles - Function to get element styles\n * @param showValues       - Whether to show values in legend\n * @param withGlyph        - Whether to include glyph rendering\n * @param glyphSize        - Size of the glyph\n * @param renderGlyph      - Component to render the glyph\n * @param legendShape      - The shape type for legend items (string literal or React component)\n * @return Array of processed legend items\n */\nfunction processSeriesData(\n\tseriesData: SeriesData[],\n\tgetElementStyles: ( params: GetElementStylesParams ) => ElementStyles,\n\tshowValues: boolean,\n\twithGlyph: boolean,\n\tglyphSize: number,\n\trenderGlyph?: < Datum extends object >( props: GlyphProps< Datum > ) => ReactNode,\n\tlegendShape?: LegendShape< SeriesData[], number >\n): BaseLegendItem[] {\n\tconst mapper = ( series: SeriesData, index: number ) => {\n\t\tconst { color, glyph, shapeStyles } = getElementStyles( {\n\t\t\tdata: series,\n\t\t\tindex,\n\t\t\tlegendShape,\n\t\t} );\n\n\t\tconst baseItem: BaseLegendItem = {\n\t\t\tlabel: series.label,\n\t\t\tvalue: showValues ? series.data?.length?.toString() || '0' : '',\n\t\t\tcolor,\n\t\t\tshapeStyle: shapeStyles,\n\t\t};\n\n\t\treturn applyGlyphToLegendItem( baseItem, withGlyph, glyph, renderGlyph, glyphSize );\n\t};\n\n\treturn seriesData.map( mapper );\n}\n\n/**\n * Processes point data into legend items\n * @param pointData          - The point data to process\n * @param getElementStyles   - Function to get element styles\n * @param showValues         - Whether to show values in legend\n * @param legendValueDisplay - What type of value to display\n * @param withGlyph          - Whether to include glyph rendering\n * @param glyphSize          - Size of the glyph\n * @param renderGlyph        - Component to render the glyph\n * @param legendShape        - The shape type for legend items (string literal or React component)\n * @return Array of processed legend items\n */\nfunction processPointData(\n\tpointData: ( DataPointDate | DataPointPercentage )[],\n\tgetElementStyles: ( params: GetElementStylesParams ) => ElementStyles,\n\tshowValues: boolean,\n\tlegendValueDisplay: LegendValueDisplay,\n\twithGlyph: boolean,\n\tglyphSize: number,\n\trenderGlyph?: < Datum extends object >( props: GlyphProps< Datum > ) => ReactNode,\n\tlegendShape?: LegendShape< SeriesData[], number >\n): BaseLegendItem[] {\n\tconst mapper = ( point: DataPointDate | DataPointPercentage, index: number ) => {\n\t\tconst { color, glyph, shapeStyles } = getElementStyles( {\n\t\t\tdata: point as DataPointPercentage,\n\t\t\tindex,\n\t\t\tlegendShape,\n\t\t} );\n\n\t\tconst baseItem: BaseLegendItem = {\n\t\t\tlabel: point.label,\n\t\t\tvalue: formatPointValue( point, showValues, legendValueDisplay ),\n\t\t\tcolor,\n\t\t\tshapeStyle: shapeStyles,\n\t\t};\n\n\t\treturn applyGlyphToLegendItem( baseItem, withGlyph, glyph, renderGlyph, glyphSize );\n\t};\n\n\treturn pointData.map( mapper );\n}\n\n/**\n * Hook to transform chart data into legend items\n * @param data        - The chart data to transform\n * @param options     - Configuration options for legend generation\n * @param legendShape - The shape type for legend items (string literal or React component)\n * @return Array of legend items ready for display\n */\nexport function useChartLegendItems<\n\tT extends SeriesData[] | DataPointDate[] | DataPointPercentage[],\n>(\n\tdata: T,\n\toptions: ChartLegendOptions = {},\n\tlegendShape?: LegendShape< SeriesData[], number >\n): BaseLegendItem[] {\n\tconst {\n\t\tshowValues = false,\n\t\tlegendValueDisplay = 'percentage',\n\t\twithGlyph = false,\n\t\tglyphSize = 8,\n\t\trenderGlyph,\n\t} = options;\n\tconst { getElementStyles } = useGlobalChartsContext();\n\n\treturn useMemo( () => {\n\t\tif ( ! data || ! Array.isArray( data ) || data.length === 0 ) {\n\t\t\treturn [];\n\t\t}\n\n\t\t// Handle SeriesData (multiple series with data points)\n\t\tif ( 'data' in data[ 0 ] ) {\n\t\t\treturn processSeriesData(\n\t\t\t\tdata as SeriesData[],\n\t\t\t\tgetElementStyles,\n\t\t\t\tshowValues,\n\t\t\t\twithGlyph,\n\t\t\t\tglyphSize,\n\t\t\t\trenderGlyph,\n\t\t\t\tlegendShape\n\t\t\t);\n\t\t}\n\n\t\t// Handle DataPointDate or DataPointPercentage (single data points)\n\t\treturn processPointData(\n\t\t\tdata as ( DataPointDate | DataPointPercentage )[],\n\t\t\tgetElementStyles,\n\t\t\tshowValues,\n\t\t\tlegendValueDisplay,\n\t\t\twithGlyph,\n\t\t\tglyphSize,\n\t\t\trenderGlyph,\n\t\t\tlegendShape\n\t\t);\n\t}, [\n\t\tdata,\n\t\tgetElementStyles,\n\t\tshowValues,\n\t\tlegendValueDisplay,\n\t\twithGlyph,\n\t\tglyphSize,\n\t\trenderGlyph,\n\t\tlegendShape,\n\t] );\n}\n"]}

package/dist/{chunk-Z26M4V2M.js → chunk-YAFQVVDI.js}

@@ -1,4 +1,4 @@
-// ../../../node_modules/.pnpm/@wordpress+element@6.40.0/node_modules/@wordpress/element/build-module/react.mjs
+// ../../../node_modules/.pnpm/@wordpress+element@6.41.0/node_modules/@wordpress/element/build-module/react.mjs
 import {
   Children,
   cloneElement,
@@ -32,7 +32,7 @@ import {
   Suspense
 } from "react";
 
-// ../../../node_modules/.pnpm/@base-ui+utils@0.2.4_@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
+// ../../../node_modules/.pnpm/@base-ui+utils@0.2.5_@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
 import * as React from "react";
 var UNINITIALIZED = {};
 function useRefWithInit(init, initArg) {
@@ -43,7 +43,7 @@ function useRefWithInit(init, initArg) {
   return ref;
 }
 
-// ../../../node_modules/.pnpm/@base-ui+utils@0.2.4_@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
+// ../../../node_modules/.pnpm/@base-ui+utils@0.2.5_@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 formatErrorMessage(code, ...args) {
   const url = new URL("https://base-ui.com/production-error");
   url.searchParams.set("code", code.toString());
@@ -51,10 +51,10 @@ function formatErrorMessage(code, ...args) {
   return `Base UI error #${code}; visit ${url} for the full message.`;
 }
 
-// ../../../node_modules/.pnpm/@base-ui+react@1.1.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/@base-ui+react@1.2.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
 import * as React4 from "react";
 
-// ../../../node_modules/.pnpm/@base-ui+utils@0.2.4_@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
+// ../../../node_modules/.pnpm/@base-ui+utils@0.2.5_@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)) {
@@ -143,17 +143,17 @@ function update(forkRef, refs) {
   };
 }
 
-// ../../../node_modules/.pnpm/@base-ui+utils@0.2.4_@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/@base-ui+utils@0.2.5_@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
 import * as React3 from "react";
 
-// ../../../node_modules/.pnpm/@base-ui+utils@0.2.4_@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/@base-ui+utils@0.2.5_@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
 import * as React2 from "react";
 var majorVersion = parseInt(React2.version, 10);
 function isReactVersionAtLeast(reactVersionToCheck) {
   return majorVersion >= reactVersionToCheck;
 }
 
-// ../../../node_modules/.pnpm/@base-ui+utils@0.2.4_@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/@base-ui+utils@0.2.5_@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;
@@ -163,7 +163,7 @@ function getReactElementRef(element) {
   return (isReactVersionAtLeast(19) ? propsWithRef?.ref : reactElement.ref) ?? null;
 }
 
-// ../../../node_modules/.pnpm/@base-ui+utils@0.2.4_@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
+// ../../../node_modules/.pnpm/@base-ui+utils@0.2.5_@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;
@@ -180,7 +180,7 @@ function mergeObjects(a, b) {
   return void 0;
 }
 
-// ../../../node_modules/.pnpm/@base-ui+react@1.1.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
+// ../../../node_modules/.pnpm/@base-ui+react@1.2.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) {
@@ -201,17 +201,17 @@ function getStateAttributesProps(state, customMapping) {
   return props;
 }
 
-// ../../../node_modules/.pnpm/@base-ui+react@1.1.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
+// ../../../node_modules/.pnpm/@base-ui+react@1.2.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.1.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
+// ../../../node_modules/.pnpm/@base-ui+react@1.2.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.1.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
+// ../../../node_modules/.pnpm/@base-ui+react@1.2.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 = {
@@ -334,11 +334,11 @@ function isSyntheticEvent(event) {
   return event != null && typeof event === "object" && "nativeEvent" in event;
 }
 
-// ../../../node_modules/.pnpm/@base-ui+utils@0.2.4_@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
+// ../../../node_modules/.pnpm/@base-ui+utils@0.2.5_@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({});
 
-// ../../../node_modules/.pnpm/@base-ui+react@1.1.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/@base-ui+react@1.2.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
 import { createElement as _createElement } from "react";
 function useRenderElement(element, componentProps, params = {}) {
   const renderProp = componentProps.render;
@@ -386,6 +386,7 @@ function useRenderElementProps(componentProps, params = {}) {
   }
   return outProps;
 }
+var REACT_LAZY_TYPE = /* @__PURE__ */ Symbol.for("react.lazy");
 function evaluateRenderProp(element, render, props, state) {
   if (render) {
     if (typeof render === "function") {
@@ -393,7 +394,17 @@ function evaluateRenderProp(element, render, props, state) {
     }
     const mergedProps = mergeProps(props, render.props);
     mergedProps.ref = props.ref;
-    return /* @__PURE__ */ React4.cloneElement(render, mergedProps);
+    let newElement = render;
+    if (newElement?.$$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);
   }
   if (element) {
     if (typeof element === "string") {
@@ -420,22 +431,31 @@ function renderTag(Tag, props) {
   return /* @__PURE__ */ React4.createElement(Tag, props);
 }
 
-// ../../../node_modules/.pnpm/@base-ui+react@1.1.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
+// ../../../node_modules/.pnpm/@base-ui+react@1.2.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(params.defaultTagName ?? "div", params, params);
 }
 
-// ../../../node_modules/.pnpm/@wordpress+ui@0.7.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1_stylelint@16.26.1/node_modules/@wordpress/ui/build-module/stack/stack.mjs
-if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='71d20935c2']")) {
+// ../../../node_modules/.pnpm/@wordpress+ui@0.8.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1_stylelint@16.26.1/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 = forwardRef(function Stack2({ direction, gap, align, justify, wrap, render, ...props }, ref) {
   const style = {
-    gap: gap && `var(--wpds-dimension-gap-${gap})`,
+    gap: gap && gapTokens[gap],
     alignItems: align,
     justifyContent: justify,
     flexDirection: direction,
@@ -465,4 +485,4 @@ export {
   useState,
   Stack
 };
-//# sourceMappingURL=chunk-Z26M4V2M.js.map
+//# sourceMappingURL=chunk-YAFQVVDI.js.map