@automattic/charts 0.57.0 → 0.58.0

package/dist/{chunk-RCY6XLGU.cjs → chunk-TZRUHQOH.cjs}

@@ -1,4 +1,8 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); 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; }// src/charts/private/chart-composition/chart-svg.tsx
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); 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 _chunkXVBH5XHEcjs = require('./chunk-XVBH5XHE.cjs');
+
+// src/charts/private/chart-composition/chart-svg.tsx
 var _jsxruntime = require('react/jsx-runtime');
 var ChartSVG = ({
   children
@@ -20,26 +24,42 @@ var ChartHTML = ({
 };
 ChartHTML.displayName = "Chart.HTML";
 
+// src/charts/private/chart-composition/render-legend-slot.ts
+var _react = require('react');
+function renderLegendSlot(legendChildren, position) {
+  return legendChildren.filter((l) => l.position === position).map(
+    (l, i) => _react.createElement.call(void 0, _react.Fragment, { key: `legend-${position}-${i}` }, l.element)
+  );
+}
+
 // src/charts/private/chart-composition/use-chart-children.ts
 var _group = require('@visx/group');
-var _react = require('react');
+
 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 === _chunkXVBH5XHEcjs.Legend) {
+          const rawPosition = _optionalChain([child, 'access', _ => _.props, 'optionalAccess', _2 => _2.position]);
+          const position = rawPosition === "top" || rawPosition === "bottom" ? rawPosition : "bottom";
+          legend.push({ element: child, position });
+          return;
+        }
         const childType = child.type;
-        const displayName = _optionalChain([childType, 'optionalAccess', _ => _.displayName]);
+        const displayName = _optionalChain([childType, 'optionalAccess', _3 => _3.displayName]);
         if (displayName === `${chartType}.SVG` || displayName === "Chart.SVG") {
-          if (_optionalChain([child, 'access', _2 => _2.props, 'optionalAccess', _3 => _3.children])) {
+          if (_optionalChain([child, 'access', _4 => _4.props, 'optionalAccess', _5 => _5.children])) {
             _react.Children.forEach(child.props.children, (svgChild) => {
               svg.push(svgChild);
             });
           }
         } else if (displayName === `${chartType}.HTML` || displayName === "Chart.HTML") {
-          if (_optionalChain([child, 'access', _4 => _4.props, 'optionalAccess', _5 => _5.children])) {
+          if (_optionalChain([child, 'access', _6 => _6.props, 'optionalAccess', _7 => _7.children])) {
             _react.Children.forEach(child.props.children, (htmlChild) => {
               html.push(htmlChild);
             });
@@ -50,8 +70,15 @@ function useChartChildren(children, chartType) {
           other.push(child);
         }
       }
+      nonLegend.push(child);
     });
-    return { svgChildren: svg, htmlChildren: html, otherChildren: other };
+    return {
+      svgChildren: svg,
+      htmlChildren: html,
+      legendChildren: legend,
+      otherChildren: other,
+      nonLegendChildren: nonLegend
+    };
   }, [children, chartType]);
 }
 
@@ -59,5 +86,6 @@ function useChartChildren(children, chartType) {
 
 
 
-exports.ChartSVG = ChartSVG; exports.ChartHTML = ChartHTML; exports.useChartChildren = useChartChildren;
-//# sourceMappingURL=chunk-RCY6XLGU.cjs.map
+
+exports.ChartSVG = ChartSVG; exports.ChartHTML = ChartHTML; exports.renderLegendSlot = renderLegendSlot; exports.useChartChildren = useChartChildren;
+//# sourceMappingURL=chunk-TZRUHQOH.cjs.map

package/dist/chunk-TZRUHQOH.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-TZRUHQOH.cjs","../src/charts/private/chart-composition/chart-svg.tsx","../src/charts/private/chart-composition/chart-html.tsx","../src/charts/private/chart-composition/render-legend-slot.ts","../src/charts/private/chart-composition/use-chart-children.ts"],"names":["_jsx","_Fragment"],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACA;ACJA,+CAAmD;AAU5C,IAAM,SAAA,EAAW,CAAC;AAAA,EACvB;AACF,CAAA,EAAA,GAAM;AAGJ,EAAA,uBAAoB,6BAAA,oBAAK,EAAW;AAAA,IAClC;AAAA,EACF,CAAC,CAAA;AACH,CAAA;AAGA,QAAA,CAAS,YAAA,EAAc,WAAA;ADPvB;AACA;AEfA;AAUO,IAAM,UAAA,EAAY,CAAC;AAAA,EACxB;AACF,CAAA,EAAA,GAAM;AAGJ,EAAA,uBAAoBA,6BAAAA,oBAAKC,EAAW;AAAA,IAClC;AAAA,EACF,CAAC,CAAA;AACH,CAAA;AAGA,SAAA,CAAU,YAAA,EAAc,YAAA;AFIxB;AACA;AG1BA,8BAAwC;AAYjC,SAAS,gBAAA,CACf,cAAA,EACA,QAAA,EACc;AACd,EAAA,OAAO,cAAA,CACL,MAAA,CAAQ,CAAA,CAAA,EAAA,GAAK,CAAA,CAAE,SAAA,IAAa,QAAS,CAAA,CACrC,GAAA;AAAA,IAAK,CAAE,CAAA,EAAG,CAAA,EAAA,GACV,kCAAA,eAAe,EAAU,EAAE,GAAA,EAAK,CAAA,OAAA,EAAW,QAAS,CAAA,CAAA,EAAK,CAAE,CAAA,EAAA;AAC5D,EAAA;AACF;AHYqE;AACA;AIlC/C;AAC4B;AA4BwC;AACnE,EAAA;AACK,IAAA;AACC,IAAA;AACI,IAAA;AACH,IAAA;AACI,IAAA;AAEK,IAAA;AACL,MAAA;AAED,QAAA;AACK,UAAA;AAES,UAAA;AAEgB,UAAA;AAE1D,UAAA;AACD,QAAA;AAGwB,QAAA;AACO,QAAA;AAG8B,QAAA;AAE/B,UAAA;AACwB,YAAA;AAChC,cAAA;AAClB,YAAA;AACH,UAAA;AACoD,QAAA;AAEvB,UAAA;AACyB,YAAA;AAC/B,cAAA;AACpB,YAAA;AACH,UAAA;AACkC,QAAA;AAElB,UAAA;AACV,QAAA;AACY,UAAA;AACnB,QAAA;AACD,MAAA;AAGsB,MAAA;AACrB,IAAA;AAEK,IAAA;AACO,MAAA;AACC,MAAA;AACE,MAAA;AACD,MAAA;AACI,MAAA;AACpB,IAAA;AAC0B,EAAA;AAC5B;AJNqE;AACA;AACA;AACA;AACA;AACA;AACA","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-TZRUHQOH.cjs","sourcesContent":[null,"import { Fragment as _Fragment, jsx as _jsx } from \"react/jsx-runtime\";\n/**\n * Compound component for SVG children in charts.\n * This component serves as a marker for SVG content that should be rendered\n * inside the chart's SVG element. The actual rendering is handled by the parent chart.\n *\n * @param {PropsWithChildren} props          - Component props\n * @param {ReactNode}         props.children - Child elements to render inside the SVG\n * @return {JSX.Element} The children wrapped in a fragment\n */\nexport const ChartSVG = ({\n  children\n}) => {\n  // This component doesn't render directly - its children are extracted by the parent chart\n  // We just return the children as-is\n  return /*#__PURE__*/_jsx(_Fragment, {\n    children: children\n  });\n};\n\n// Set displayName for better debugging and type checking\nChartSVG.displayName = 'Chart.SVG';","import { Fragment as _Fragment, jsx as _jsx } from \"react/jsx-runtime\";\n/**\n * Compound component for HTML children in charts.\n * This component serves as a marker for HTML content that should be rendered\n * outside the chart's SVG element. The actual rendering is handled by the parent chart.\n *\n * @param {PropsWithChildren} props          - Component props\n * @param {ReactNode}         props.children - Child elements to render outside the SVG\n * @return {JSX.Element} The children wrapped in a fragment\n */\nexport const ChartHTML = ({\n  children\n}) => {\n  // This component doesn't render directly - its children are extracted by the parent chart\n  // We just return the children as-is\n  return /*#__PURE__*/_jsx(_Fragment, {\n    children: children\n  });\n};\n\n// Set displayName for better debugging and type checking\nChartHTML.displayName = 'Chart.HTML';","import { createElement, Fragment } from 'react';\nimport type { LegendChild } from './use-chart-children';\nimport type { LegendPosition } from '../../../types';\nimport type { ReactNode } from 'react';\n\n/**\n * Renders legend children filtered by position slot.\n *\n * @param {LegendChild[]}  legendChildren - The legend children to filter and render\n * @param {LegendPosition} position       - The position slot to render\n * @return {ReactNode[]} Array of legend elements for the given position\n */\nexport function renderLegendSlot(\n\tlegendChildren: LegendChild[],\n\tposition: LegendPosition\n): ReactNode[] {\n\treturn legendChildren\n\t\t.filter( l => l.position === position )\n\t\t.map( ( l, i ) =>\n\t\t\tcreateElement( Fragment, { key: `legend-${ position }-${ i }` }, l.element )\n\t\t);\n}\n","import { Group } from '@visx/group';\nimport { useMemo, Children, isValidElement } from 'react';\nimport { Legend } from '../../../components/legend';\nimport type { LegendPosition } from '../../../types';\nimport type { ReactElement, ReactNode } from 'react';\n\nexport type LegendChild = {\n\telement: ReactElement;\n\tposition: LegendPosition;\n};\n\ninterface ChartChildren {\n\tsvgChildren: ReactNode[];\n\thtmlChildren: ReactNode[];\n\tlegendChildren: LegendChild[];\n\totherChildren: ReactNode[];\n\t/** All children except Legend, in original order. */\n\tnonLegendChildren: ReactNode[];\n}\n\n/**\n * Custom hook to process and categorize chart children for composition API.\n * Extracts children from compound components (Chart.SVG, Chart.HTML) and\n * maintains backward compatibility with legacy Group components.\n *\n * @param {ReactNode} children  - The children prop from the chart component\n * @param {string}    chartType - The type of chart (e.g., 'PieChart', 'BarChart')\n * @return {ChartChildren} Categorized children for rendering\n */\nexport function useChartChildren( children: ReactNode, chartType: string ): ChartChildren {\n\treturn useMemo( () => {\n\t\tconst svg: ReactNode[] = [];\n\t\tconst html: ReactNode[] = [];\n\t\tconst legend: LegendChild[] = [];\n\t\tconst other: ReactNode[] = [];\n\t\tconst nonLegend: ReactNode[] = [];\n\n\t\tChildren.forEach( children, child => {\n\t\t\tif ( isValidElement( child ) ) {\n\t\t\t\t// Extract Legend children for position-based slot rendering\n\t\t\t\tif ( child.type === Legend ) {\n\t\t\t\t\tconst rawPosition = child.props?.position;\n\t\t\t\t\tconst position =\n\t\t\t\t\t\trawPosition === 'top' || rawPosition === 'bottom' ? rawPosition : 'bottom';\n\n\t\t\t\t\tlegend.push( { element: child as ReactElement, position } );\n\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Check displayName for compound components\n\t\t\t\tconst childType = child.type as { displayName?: string };\n\t\t\t\tconst displayName = childType?.displayName;\n\n\t\t\t\t// Handle chart-specific compound components (e.g., PieChart.SVG)\n\t\t\t\tif ( displayName === `${ chartType }.SVG` || displayName === 'Chart.SVG' ) {\n\t\t\t\t\t// Extract children from Chart.SVG with safety checks\n\t\t\t\t\tif ( child.props?.children ) {\n\t\t\t\t\t\tChildren.forEach( child.props.children, svgChild => {\n\t\t\t\t\t\t\tsvg.push( svgChild );\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t} else if ( displayName === `${ chartType }.HTML` || displayName === 'Chart.HTML' ) {\n\t\t\t\t\t// Extract children from Chart.HTML with safety checks\n\t\t\t\t\tif ( child.props?.children ) {\n\t\t\t\t\t\tChildren.forEach( child.props.children, htmlChild => {\n\t\t\t\t\t\t\thtml.push( htmlChild );\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t} else if ( child.type === Group ) {\n\t\t\t\t\t// Legacy support: still check for Group type for backward compatibility\n\t\t\t\t\tsvg.push( child );\n\t\t\t\t} else {\n\t\t\t\t\tother.push( child );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Preserve original order of all non-Legend children\n\t\t\tnonLegend.push( child );\n\t\t} );\n\n\t\treturn {\n\t\t\tsvgChildren: svg,\n\t\t\thtmlChildren: html,\n\t\t\tlegendChildren: legend,\n\t\t\totherChildren: other,\n\t\t\tnonLegendChildren: nonLegend,\n\t\t};\n\t}, [ children, chartType ] );\n}\n"]}

package/dist/{chunk-2NCY7R4G.js → chunk-UTYVIOWZ.js}

@@ -1,6 +1,11 @@
 import {
+  renderLegendSlot,
   useChartChildren
-} from "./chunk-6CCZL2JJ.js";
+} from "./chunk-KRWGSOJ2.js";
+import {
+  Legend,
+  SingleChartContext
+} from "./chunk-WTQYGUNF.js";
 import {
   Children,
   Fragment,
@@ -16,25 +21,23 @@ import {
   useMemo,
   useRef,
   useState
-} from "./chunk-Z26M4V2M.js";
+} from "./chunk-YAFQVVDI.js";
 import {
   withResponsive
 } from "./chunk-OP6PHB2U.js";
 import {
   GlobalChartsContext,
   GlobalChartsProvider,
-  Legend,
-  SingleChartContext,
   useChartId,
   useChartRegistration,
   useGlobalChartsContext,
   useGlobalChartsTheme,
   usePrefersReducedMotion
-} from "./chunk-32DH6JDF.js";
+} from "./chunk-2I67QUIV.js";
 import {
   attachSubComponents,
   formatMetricValue
-} from "./chunk-DAU3HNEG.js";
+} from "./chunk-JJIMABHT.js";
 import {
   __commonJS,
   __export,
@@ -409,6 +412,62 @@ var require_hoist_non_react_statics_cjs = __commonJS({
   }
 });
 
+// ../../../node_modules/.pnpm/fast-deep-equal@3.1.3/node_modules/fast-deep-equal/es6/index.js
+var require_es6 = __commonJS({
+  "../../../node_modules/.pnpm/fast-deep-equal@3.1.3/node_modules/fast-deep-equal/es6/index.js"(exports, module) {
+    "use strict";
+    module.exports = function equal(a2, b2) {
+      if (a2 === b2) return true;
+      if (a2 && b2 && typeof a2 == "object" && typeof b2 == "object") {
+        if (a2.constructor !== b2.constructor) return false;
+        var length2, i2, keys;
+        if (Array.isArray(a2)) {
+          length2 = a2.length;
+          if (length2 != b2.length) return false;
+          for (i2 = length2; i2-- !== 0; )
+            if (!equal(a2[i2], b2[i2])) return false;
+          return true;
+        }
+        if (a2 instanceof Map && b2 instanceof Map) {
+          if (a2.size !== b2.size) return false;
+          for (i2 of a2.entries())
+            if (!b2.has(i2[0])) return false;
+          for (i2 of a2.entries())
+            if (!equal(i2[1], b2.get(i2[0]))) return false;
+          return true;
+        }
+        if (a2 instanceof Set && b2 instanceof Set) {
+          if (a2.size !== b2.size) return false;
+          for (i2 of a2.entries())
+            if (!b2.has(i2[0])) return false;
+          return true;
+        }
+        if (ArrayBuffer.isView(a2) && ArrayBuffer.isView(b2)) {
+          length2 = a2.length;
+          if (length2 != b2.length) return false;
+          for (i2 = length2; i2-- !== 0; )
+            if (a2[i2] !== b2[i2]) return false;
+          return true;
+        }
+        if (a2.constructor === RegExp) return a2.source === b2.source && a2.flags === b2.flags;
+        if (a2.valueOf !== Object.prototype.valueOf) return a2.valueOf() === b2.valueOf();
+        if (a2.toString !== Object.prototype.toString) return a2.toString() === b2.toString();
+        keys = Object.keys(a2);
+        length2 = keys.length;
+        if (length2 !== Object.keys(b2).length) return false;
+        for (i2 = length2; i2-- !== 0; )
+          if (!Object.prototype.hasOwnProperty.call(b2, keys[i2])) return false;
+        for (i2 = length2; i2-- !== 0; ) {
+          var key = keys[i2];
+          if (!equal(a2[key], b2[key])) return false;
+        }
+        return true;
+      }
+      return a2 !== a2 && b2 !== b2;
+    };
+  }
+});
+
 // ../../../node_modules/.pnpm/highlight-words-core@1.2.3/node_modules/highlight-words-core/dist/index.js
 var require_dist = __commonJS({
   "../../../node_modules/.pnpm/highlight-words-core@1.2.3/node_modules/highlight-words-core/dist/index.js"(exports, module) {
@@ -644,12 +703,12 @@ function paramCase(input, options) {
   return dotCase(input, __assign2({ delimiter: "-" }, options));
 }
 
-// ../../../node_modules/.pnpm/@wordpress+components@32.2.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/values.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@32.3.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/values.mjs
 function isValueDefined(value) {
   return value !== void 0 && value !== null;
 }
 
-// ../../../node_modules/.pnpm/@wordpress+components@32.2.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/hooks/use-update-effect.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@32.3.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/hooks/use-update-effect.mjs
 function useUpdateEffect(effect, deps) {
   const mountedRef = useRef(false);
   useEffect(() => {
@@ -2103,7 +2162,7 @@ var css2 = _createEmotion.css;
 var sheet = _createEmotion.sheet;
 var cache = _createEmotion.cache;
 
-// ../../../node_modules/.pnpm/@wordpress+components@32.2.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/hooks/use-cx.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@32.3.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/hooks/use-cx.mjs
 var isSerializedStyles = (o2) => typeof o2 !== "undefined" && o2 !== null && ["name", "styles"].every((p2) => typeof o2[p2] !== "undefined");
 var useCx = () => {
   const cache2 = __unsafe_useEmotionCache();
@@ -2379,7 +2438,7 @@ function names_default(e2, f2) {
   }, "name"]);
 }
 
-// ../../../node_modules/.pnpm/@wordpress+components@32.2.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/colors.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@32.3.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/colors.mjs
 var colorComputationNode;
 k([names_default]);
 function getColorComputationNode() {
@@ -2433,7 +2492,7 @@ function getOptimalTextShade(backgroundColor) {
   return result === "#000000" ? "dark" : "light";
 }
 
-// ../../../node_modules/.pnpm/@wordpress+components@32.2.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/colors-values.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@32.3.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/colors-values.mjs
 var white = "#fff";
 var GRAY = {
   900: "#1e1e1e",
@@ -2514,7 +2573,7 @@ var COLORS = Object.freeze({
   ui: UI
 });
 
-// ../../../node_modules/.pnpm/@wordpress+components@32.2.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/config-values.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@32.3.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/config-values.mjs
 var CONTROL_HEIGHT = "36px";
 var CONTROL_PROPS = {
   // These values should be shared with TextControl.
@@ -2582,9 +2641,9 @@ var config_values_default = Object.assign({}, CONTROL_PROPS, {
   transitionTimingFunctionControl: "cubic-bezier(0.12, 0.8, 0.32, 1)"
 });
 
-// ../../../node_modules/.pnpm/@wordpress+components@32.2.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/context-system-provider.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@32.3.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/context-system-provider.mjs
+var import_es6 = __toESM(require_es6(), 1);
 import deepmerge from "deepmerge";
-import fastDeepEqual from "fast-deep-equal/es6/index.js";
 
 // ../../../node_modules/.pnpm/@wordpress+warning@3.41.0/node_modules/@wordpress/warning/build-module/utils.mjs
 var logged = /* @__PURE__ */ new Set();
@@ -2608,7 +2667,7 @@ function warning(message) {
   logged.add(message);
 }
 
-// ../../../node_modules/.pnpm/@wordpress+components@32.2.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/context-system-provider.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@32.3.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/context-system-provider.mjs
 import { jsx as _jsx } from "react/jsx-runtime";
 var ComponentsContext = createContext(
   /** @type {Record<string, any>} */
@@ -2624,7 +2683,7 @@ function useContextSystemBridge({
   use_update_effect_default(() => {
     if (
       // Objects are equivalent.
-      fastDeepEqual(valueRef.current, value) && // But not the same reference.
+      (0, import_es6.default)(valueRef.current, value) && // But not the same reference.
       valueRef.current !== value
     ) {
       globalThis.SCRIPT_DEBUG === true ? warning(`Please memoize your context: ${JSON.stringify(value)}`) : void 0;
@@ -2651,19 +2710,19 @@ var BaseContextSystemProvider = ({
 };
 var ContextSystemProvider = memo(BaseContextSystemProvider);
 
-// ../../../node_modules/.pnpm/@wordpress+components@32.2.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/constants.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@32.3.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/constants.mjs
 var COMPONENT_NAMESPACE = "data-wp-component";
 var CONNECTED_NAMESPACE = "data-wp-c16t";
 var CONNECT_STATIC_NAMESPACE = "__contextSystemKey__";
 
-// ../../../node_modules/.pnpm/@wordpress+components@32.2.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/get-styled-class-name-from-key.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@32.3.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/get-styled-class-name-from-key.mjs
 function getStyledClassName(namespace) {
   const kebab = paramCase(namespace);
   return `components-${kebab}`;
 }
 var getStyledClassNameFromKey = memize(getStyledClassName);
 
-// ../../../node_modules/.pnpm/@wordpress+components@32.2.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/context-connect.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@32.3.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/context-connect.mjs
 function contextConnect(Component, namespace) {
   return _contextConnect(Component, namespace, {
     forwardsRef: true
@@ -2713,7 +2772,7 @@ function hasConnectNamespace(Component, match2) {
   return false;
 }
 
-// ../../../node_modules/.pnpm/@wordpress+components@32.2.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/utils.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@32.3.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/utils.mjs
 function getNamespace(componentName) {
   return {
     [COMPONENT_NAMESPACE]: componentName
@@ -2725,7 +2784,7 @@ function getConnectedNamespace() {
   };
 }
 
-// ../../../node_modules/.pnpm/@wordpress+components@32.2.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/use-context-system.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@32.3.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/context/use-context-system.mjs
 function useContextSystem(props, namespace) {
   const contextSystemProps = useComponentsContext();
   if (typeof namespace === "undefined") {
@@ -2909,7 +2968,7 @@ var createStyled = function createStyled2(tag, options) {
   };
 };
 
-// ../../../node_modules/.pnpm/@wordpress+components@32.2.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/view/component.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@32.3.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/view/component.mjs
 import { jsx as _jsx2 } from "react/jsx-runtime";
 var PolymorphicDiv = /* @__PURE__ */ createStyled("div", process.env.NODE_ENV === "production" ? {
   target: "e19lxcc00"
@@ -2932,7 +2991,7 @@ var View = Object.assign(forwardRef(UnforwardedView), {
 });
 var component_default = View;
 
-// ../../../node_modules/.pnpm/@wordpress+components@32.2.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/use-responsive-value.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@32.3.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/use-responsive-value.mjs
 var breakpoints = ["40em", "52em", "64em"];
 var useBreakpointIndex = (options = {}) => {
   const {
@@ -2975,7 +3034,7 @@ function useResponsiveValue(values, options = {}) {
   return array[index >= array.length ? array.length - 1 : index];
 }
 
-// ../../../node_modules/.pnpm/@wordpress+components@32.2.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/space.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@32.3.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/space.mjs
 var GRID_BASE = "4px";
 function space(value) {
   if (typeof value === "undefined") {
@@ -2991,7 +3050,7 @@ function space(value) {
   return `calc(${GRID_BASE} * ${value})`;
 }
 
-// ../../../node_modules/.pnpm/@wordpress+components@32.2.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/truncate/styles.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@32.3.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/truncate/styles.mjs
 function _EMOTION_STRINGIFIED_CSS_ERROR__() {
   return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }
@@ -3004,7 +3063,7 @@ var Truncate = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-// ../../../node_modules/.pnpm/@wordpress+components@32.2.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/truncate/utils.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@32.3.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/truncate/utils.mjs
 var TRUNCATE_ELLIPSIS = "\u2026";
 var TRUNCATE_TYPE = {
   auto: "auto",
@@ -3066,7 +3125,7 @@ function truncateContent(words = "", props) {
   return truncatedContent;
 }
 
-// ../../../node_modules/.pnpm/@wordpress+components@32.2.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/truncate/hook.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@32.3.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/truncate/hook.mjs
 function useTruncate(props) {
   const {
     className,
@@ -3102,7 +3161,7 @@ function useTruncate(props) {
   };
 }
 
-// ../../../node_modules/.pnpm/@wordpress+components@32.2.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/text/styles.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@32.3.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/text/styles.mjs
 var styles_exports2 = {};
 __export(styles_exports2, {
   Text: () => Text,
@@ -3138,7 +3197,7 @@ var upperCase = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__2
 };
 
-// ../../../node_modules/.pnpm/@wordpress+components@32.2.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/text/utils.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@32.3.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/text/utils.mjs
 var import_highlight_words_core = __toESM(require_dist(), 1);
 var lowercaseProps = (object) => {
   const mapped = {};
@@ -3222,7 +3281,7 @@ function createHighlighterText({
   return textContent;
 }
 
-// ../../../node_modules/.pnpm/@wordpress+components@32.2.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/font-size.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@32.3.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/utils/font-size.mjs
 var BASE_FONT_SIZE = 13;
 var PRESET_FONT_SIZES = {
   body: BASE_FONT_SIZE,
@@ -3248,7 +3307,7 @@ function getFontSize(size = BASE_FONT_SIZE) {
   return `calc(${ratio} * ${config_values_default.fontSize})`;
 }
 
-// ../../../node_modules/.pnpm/@wordpress+components@32.2.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/text/get-line-height.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@32.3.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/text/get-line-height.mjs
 function getLineHeight(adjustLineHeightForInnerControls, lineHeight) {
   if (lineHeight) {
     return lineHeight;
@@ -3273,7 +3332,7 @@ function getLineHeight(adjustLineHeightForInnerControls, lineHeight) {
   return value;
 }
 
-// ../../../node_modules/.pnpm/@wordpress+components@32.2.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/text/hook.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@32.3.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/text/hook.mjs
 function _EMOTION_STRINGIFIED_CSS_ERROR__3() {
   return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }
@@ -3384,7 +3443,7 @@ function useText(props) {
   };
 }
 
-// ../../../node_modules/.pnpm/@wordpress+components@32.2.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/text/component.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@32.3.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/text/component.mjs
 import { jsx as _jsx3 } from "react/jsx-runtime";
 function UnconnectedText(props, forwardedRef) {
   const textProps = useText(props);
@@ -3397,7 +3456,7 @@ function UnconnectedText(props, forwardedRef) {
 var Text2 = contextConnect(UnconnectedText, "Text");
 var component_default2 = Text2;
 
-// ../../../node_modules/.pnpm/@wordpress+components@32.2.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/grid/utils.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@32.3.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/grid/utils.mjs
 var ALIGNMENTS = {
   bottom: {
     alignItems: "flex-end",
@@ -3448,7 +3507,7 @@ function getAlignmentProps(alignment) {
   return alignmentProps;
 }
 
-// ../../../node_modules/.pnpm/@wordpress+components@32.2.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/grid/hook.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@32.3.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/grid/hook.mjs
 function useGrid(props) {
   const {
     align,
@@ -3494,7 +3553,7 @@ function useGrid(props) {
   };
 }
 
-// ../../../node_modules/.pnpm/@wordpress+components@32.2.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/grid/component.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@32.3.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/components/build-module/grid/component.mjs
 import { jsx as _jsx4 } from "react/jsx-runtime";
 function UnconnectedGrid(props, forwardedRef) {
   const gridProps = useGrid(props);
@@ -3646,18 +3705,15 @@ var LeaderboardChartInternal = ({
   animation,
   loading = false,
   showLegend = false,
-  legendOrientation = "horizontal",
-  legendPosition = "bottom",
-  legendAlignment = "center",
-  legendShape = "circle",
-  legendShapeStyles: legendShapeStylesProp,
+  legend = {},
   legendLabels,
-  legendInteractive = false,
   gap = "md",
   className,
   style,
   children
 }) => {
+  const legendInteractive = legend.interactive ?? false;
+  const legendPosition = legend.position ?? "bottom";
   const chartId = useChartId(providedChartId);
   const {
     leaderboardChart: leaderboardChartSettings
@@ -3665,10 +3721,11 @@ var LeaderboardChartInternal = ({
   const legendShapeStyles = {
     width: 8,
     height: 8,
-    ...legendShapeStylesProp
+    ...legend.shapeStyles
   };
   const {
-    otherChildren
+    legendChildren,
+    nonLegendChildren
   } = useChartChildren(children, "LeaderboardChart");
   const {
     labelSpacing,
@@ -3758,15 +3815,18 @@ var LeaderboardChartInternal = ({
         children: [/* @__PURE__ */ _jsx5("div", {
           className: leaderboard_chart_module_default.emptyState,
           children: loading ? __2("Loading\u2026", "jetpack-charts") : __2("No data available", "jetpack-charts")
-        }), otherChildren]
+        }), nonLegendChildren]
       })
     });
   }
   const legendElement = showLegend && /* @__PURE__ */ _jsx5(Legend, {
-    orientation: legendOrientation,
+    orientation: legend.orientation ?? "horizontal",
     position: legendPosition,
-    alignment: legendAlignment,
-    shape: legendShape,
+    alignment: legend.alignment ?? "center",
+    labelStyles: legend.labelStyles,
+    itemClassName: legend.itemClassName,
+    itemStyles: legend.itemStyles,
+    shape: legend.shape ?? "circle",
     shapeStyles: legendShapeStyles,
     chartId,
     interactive: legendInteractive
@@ -3790,7 +3850,7 @@ var LeaderboardChartInternal = ({
         width: propWidth || void 0,
         height: propHeight || void 0
       },
-      children: [legendPosition === "top" && legendElement, /* @__PURE__ */ _jsx5("div", {
+      children: [legendPosition === "top" && legendElement, renderLegendSlot(legendChildren, "top"), /* @__PURE__ */ _jsx5("div", {
         className: leaderboard_chart_module_default.leaderboardChart__content,
         children: allSeriesHidden ? /* @__PURE__ */ _jsx5("div", {
           className: leaderboard_chart_module_default.emptyState,
@@ -3834,7 +3894,7 @@ var LeaderboardChartInternal = ({
             }, entry.id);
           })
         })
-      }), legendPosition === "bottom" && legendElement, otherChildren]
+      }), legendPosition === "bottom" && legendElement, renderLegendSlot(legendChildren, "bottom"), nonLegendChildren]
     })
   });
 };
@@ -3894,4 +3954,4 @@ is-plain-object/dist/is-plain-object.mjs:
    * Released under the MIT License.
    *)
 */
-//# sourceMappingURL=chunk-2NCY7R4G.js.map
+//# sourceMappingURL=chunk-UTYVIOWZ.js.map