@automattic/charts 1.0.0 → 1.0.2

package/CHANGELOG.md

@@ -5,6 +5,26 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.0.2] - 2026-04-06
+### Changed
+- Conversion Funnel Chart: Rename non-BEM classnames to BEM modifiers. [#47854]
+- Update package dependencies. [#47870] [#47886]
+
+### Fixed
+- Fix conversion funnel chart color flicker on initial render by deferring CSS transitions until the color palette is resolved. [#47851]
+
+## [1.0.1] - 2026-03-30
+### Security
+- Sanitize GeoChart HTML tooltip content with DOMPurify. [#47789]
+
+### Changed
+- Bump minimum Node version to 20.11. [#47770]
+- Support all CSS color formats (HSL, HSLA, RGB, RGBA, named colors) in theme colors. [#46349]
+- Update package dependencies. [#47799]
+
+### Fixed
+- ChartLayout: Display SVG as block to avoid unexpected resizing in certain browser environments. [#47802]
+
 ## [1.0.0] - 2026-03-24
 ### Changed
 - Internal updates. [#43811]
@@ -764,6 +784,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed lints following ESLint rule changes for TS [#40584]
 - Fixing a bug in Chart storybook data. [#40640]
 
+[1.0.2]: https://github.com/Automattic/charts/compare/v1.0.1...v1.0.2
+[1.0.1]: https://github.com/Automattic/charts/compare/v1.0.0...v1.0.1
 [1.0.0]: https://github.com/Automattic/charts/compare/v0.59.0...v1.0.0
 [0.59.0]: https://github.com/Automattic/charts/compare/v0.58.0...v0.59.0
 [0.58.0]: https://github.com/Automattic/charts/compare/v0.57.0...v0.58.0

package/dist/index.cjs

@@ -993,7 +993,7 @@ var parseRgbString = (rgbString) => {
   }
   return parsed.formatHex();
 };
-var normalizeColorToHex = (color, element, resolveCss) => {
+var normalizeColorToHex = (color, element, resolveCss, _depth = 0) => {
   if (!color || typeof color !== "string") {
     return "";
   }
@@ -1010,22 +1010,23 @@ var normalizeColorToHex = (color, element, resolveCss) => {
   if (trimmed.startsWith("--") || trimmed.startsWith("var(")) {
     if (resolveCss) {
       const resolved = resolveCss(color, element);
-      if (resolved) {
-        return normalizeColorToHex(resolved, element, resolveCss);
+      if (resolved && resolved !== color && _depth < 10) {
+        return normalizeColorToHex(resolved, element, resolveCss, _depth + 1);
       }
     }
     return color;
   }
-  if (trimmed.startsWith("hsl(") || trimmed.startsWith("rgb(")) {
-    if (trimmed.startsWith("rgba(")) {
-      return color;
-    }
-    const parsed = _d3color.color.call(void 0, trimmed);
-    if (parsed) {
-      return parsed.formatHex();
+  if (trimmed.startsWith("hsl(") || trimmed.startsWith("hsla(") || trimmed.startsWith("rgb(") || trimmed.startsWith("rgba(")) {
+    const parsed2 = _d3color.color.call(void 0, trimmed);
+    if (parsed2) {
+      return parsed2.formatHex();
     }
     return color;
   }
+  const parsed = _d3color.color.call(void 0, trimmed);
+  if (parsed) {
+    return parsed.formatHex();
+  }
   return color;
 };
 var lightenHexColor = (hex, blend) => {
@@ -1262,7 +1263,9 @@ var GlobalChartsProvider = ({
     minHue: 360,
     maxHue: 0
   }));
+  const [isColorPaletteResolved, setIsColorPaletteResolved] = _react.useState.call(void 0, false);
   _react.useLayoutEffect.call(void 0, () => {
+    setIsColorPaletteResolved(false);
     const {
       colors
     } = providerTheme;
@@ -1274,17 +1277,10 @@ var GlobalChartsProvider = ({
     if (Array.isArray(colors)) {
       for (const color of colors) {
         if (color && typeof color === "string") {
-          let colorValue = color;
-          if (color.startsWith("--") || color.startsWith("var(")) {
-            const resolved = resolveCssVariable(color, wrapperRef.current);
-            if (resolved === null || resolved === "") {
-              continue;
-            }
-            colorValue = resolved;
-          }
-          if (colorValue.startsWith("#")) {
-            resolvedColors.push(colorValue);
-            const hslColor = _d3color.hsl.call(void 0, colorValue);
+          const normalizedColor = normalizeColorToHex(color, wrapperRef.current, resolveCssVariable);
+          if (normalizedColor.startsWith("#")) {
+            resolvedColors.push(normalizedColor);
+            const hslColor = _d3color.hsl.call(void 0, normalizedColor);
             if (!isNaN(hslColor.h)) {
               const hslTuple = [hslColor.h, hslColor.s * 100, hslColor.l * 100];
               hues.push(hslTuple[0]);
@@ -1304,6 +1300,11 @@ var GlobalChartsProvider = ({
       maxHue
     });
   }, [providerTheme]);
+  _react.useEffect.call(void 0, () => {
+    if (colorCache.colors.length > 0) {
+      setIsColorPaletteResolved(true);
+    }
+  }, [colorCache]);
   const [groupToColorMap, setGroupToColorMap] = _react.useState.call(void 0, () => /* @__PURE__ */ new Map());
   _react.useEffect.call(void 0, () => {
     setGroupToColorMap(/* @__PURE__ */ new Map());
@@ -1383,8 +1384,8 @@ var GlobalChartsProvider = ({
     return !chartHidden || !chartHidden.has(seriesLabel);
   }, [hiddenSeries]);
   const getHiddenSeries = _react.useCallback.call(void 0, (chartId) => {
-    const set = hiddenSeries.get(chartId);
-    return set ? new Set(set) : /* @__PURE__ */ new Set();
+    const set2 = hiddenSeries.get(chartId);
+    return set2 ? new Set(set2) : /* @__PURE__ */ new Set();
   }, [hiddenSeries]);
   const value = _react.useMemo.call(void 0, () => ({
     charts,
@@ -1395,8 +1396,9 @@ var GlobalChartsProvider = ({
     getElementStyles,
     toggleSeriesVisibility,
     isSeriesVisible,
-    getHiddenSeries
-  }), [charts, registerChart, unregisterChart, getChartData, providerTheme, getElementStyles, toggleSeriesVisibility, isSeriesVisible, getHiddenSeries]);
+    getHiddenSeries,
+    isColorPaletteResolved
+  }), [charts, registerChart, unregisterChart, getChartData, providerTheme, getElementStyles, toggleSeriesVisibility, isSeriesVisible, getHiddenSeries, isColorPaletteResolved]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, GlobalChartsContext.Provider, {
     value,
     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
@@ -2422,7 +2424,7 @@ function useChartChildren(children, chartType) {
   }, [children, chartType]);
 }
 
-// ../../../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
+// ../../../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) {
@@ -2433,18 +2435,37 @@ function useRefWithInit(init, initArg) {
   return ref;
 }
 
-// ../../../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());
-  args.forEach((arg) => url.searchParams.append("args[]", arg));
-  return `Base UI error #${code}; visit ${url} for the full message.`;
+// ../../../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 warn(...messages) {
+  if (process.env.NODE_ENV !== "production") {
+    const messageKey = messages.join(" ");
+    if (!set.has(messageKey)) {
+      set.add(messageKey);
+      console.warn(`Base UI: ${messageKey}`);
+    }
+  }
+}
+
+// ../../../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;
 
-// ../../../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
+// ../../../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/@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
+// ../../../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(a2, b2, c2, d2) {
   const forkRef = useRefWithInit(createForkRef).current;
   if (didChange(forkRef, a2, b2, c2, d2)) {
@@ -2533,17 +2554,17 @@ function update(forkRef, refs) {
   };
 }
 
-// ../../../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
+// ../../../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/@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
+// ../../../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
 
 var majorVersion = parseInt(React2.version, 10);
 function isReactVersionAtLeast(reactVersionToCheck) {
   return majorVersion >= reactVersionToCheck;
 }
 
-// ../../../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
+// ../../../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;
@@ -2553,7 +2574,7 @@ function getReactElementRef(element) {
   return _nullishCoalesce((isReactVersionAtLeast(19) ? _optionalChain([propsWithRef, 'optionalAccess', _114 => _114.ref]) : reactElement.ref), () => ( null));
 }
 
-// ../../../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
+// ../../../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(a2, b2) {
   if (a2 && !b2) {
     return a2;
@@ -2570,7 +2591,7 @@ function mergeObjects(a2, b2) {
   return void 0;
 }
 
-// ../../../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
+// ../../../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) {
@@ -2591,17 +2612,17 @@ function getStateAttributesProps(state, customMapping) {
   return props;
 }
 
-// ../../../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
+// ../../../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.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
+// ../../../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.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
+// ../../../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(a2, b2, c2, d2, e2) {
   let merged = {
@@ -2724,11 +2745,17 @@ function isSyntheticEvent(event) {
   return event != null && typeof event === "object" && "nativeEvent" in event;
 }
 
-// ../../../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
+// ../../../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({});
 
-// ../../../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
+// ../../../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
 
 function useRenderElement(element, componentProps, params = {}) {
   const renderProp = componentProps.render;
@@ -2780,6 +2807,9 @@ 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);
@@ -2801,7 +2831,18 @@ function evaluateRenderProp(element, render, props, state) {
       return renderTag(element, props);
     }
   }
-  throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: Render element or function are not defined." : formatErrorMessage(8));
+  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") {
@@ -2821,7 +2862,7 @@ function renderTag(Tag, props) {
   return /* @__PURE__ */ React4.createElement(Tag, props);
 }
 
-// ../../../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
+// ../../../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);
 }
@@ -2925,7 +2966,7 @@ function paramCase(input, options) {
   return dotCase(input, _tslib.__assign.call(void 0, { delimiter: "-" }, options));
 }
 
-// ../../../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@16.26.1/node_modules/@wordpress/ui/build-module/stack/stack.mjs
+// ../../../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");
@@ -3897,21 +3938,20 @@ var _tooltip = require('@visx/tooltip');
 
 // src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss
 var conversion_funnel_chart_module_default = {
-  "conversionFunnelChart": "a8ccharts-lK-YNK",
-  "loading": "a8ccharts-DbHKK5",
+  "conversion-funnel-chart": "a8ccharts-B0ct23",
+  "conversion-funnel-chart--loading": "a8ccharts-Qicx1p",
   "main-metric": "a8ccharts-61WPYr",
   "main-rate": "a8ccharts-RRRI6x",
   "change-indicator": "a8ccharts-661iwx",
   "funnel-container": "a8ccharts-Z7EGnW",
   "funnel-step": "a8ccharts-VqFY0l",
-  "blurred": "a8ccharts-7dTRBs",
+  "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",
-  "disabled": "a8ccharts-PLWVAW",
   "funnel-bar": "a8ccharts-EzczI-",
-  "selected": "a8ccharts-wNpZEu",
   "funnel-bar--animated": "a8ccharts-68HQJl",
   "stretch": "a8ccharts-CmtieZ",
   "tooltip-wrapper": "a8ccharts-2TeoCn",
@@ -3995,7 +4035,8 @@ var ConversionFunnelChartInternal = ({
     conversionFunnelChart: conversionFunnelChartSettings
   } = useGlobalChartsTheme();
   const {
-    getElementStyles
+    getElementStyles,
+    isColorPaletteResolved
   } = useGlobalChartsContext();
   const chartRef = _react.useRef.call(void 0, null);
   const selectedBarRef = _react.useRef.call(void 0, null);
@@ -4172,7 +4213,7 @@ var ConversionFunnelChartInternal = ({
   if (!isDataValid) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Stack, {
       direction: "column",
-      className: _clsx2.default.call(void 0, conversion_funnel_chart_module_default.conversionFunnelChart, loading && conversion_funnel_chart_module_default.loading, className),
+      className: _clsx2.default.call(void 0, conversion_funnel_chart_module_default["conversion-funnel-chart"], loading && conversion_funnel_chart_module_default["conversion-funnel-chart--loading"], className),
       style: {
         ...style,
         height: resolvedHeight
@@ -4191,7 +4232,7 @@ var ConversionFunnelChartInternal = ({
         portalContainerRef(node2);
         chartRef.current = node2;
       },
-      className: _clsx2.default.call(void 0, conversion_funnel_chart_module_default.conversionFunnelChart, loading && conversion_funnel_chart_module_default.loading, className),
+      className: _clsx2.default.call(void 0, conversion_funnel_chart_module_default["conversion-funnel-chart"], loading && conversion_funnel_chart_module_default["conversion-funnel-chart--loading"], className),
       style: {
         ...style,
         height: resolvedHeight
@@ -4212,7 +4253,7 @@ var ConversionFunnelChartInternal = ({
             isBlurred
           } = getStepState(step.id);
           return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
-            className: _clsx2.default.call(void 0, conversion_funnel_chart_module_default["funnel-step"], isBlurred && conversion_funnel_chart_module_default.blurred),
+            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"]),
             children: [/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
               className: conversion_funnel_chart_module_default["step-header"],
               children: [renderStepLabel ? renderStepLabel({
@@ -4231,7 +4272,7 @@ var ConversionFunnelChartInternal = ({
                 children: formatPercentage(step.rate)
               })]
             }), /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
-              className: _clsx2.default.call(void 0, conversion_funnel_chart_module_default["bar-container"], isBlurred && conversion_funnel_chart_module_default.disabled),
+              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]),
               role: "button",
@@ -4296,6 +4337,43 @@ ConversionFunnelChartWithProvider.displayName = "ConversionFunnelChart";
 
 var _reactgooglecharts = require('react-google-charts');
 
+// src/utils/sanitize-html.ts
+var _dompurify = require('dompurify'); var _dompurify2 = _interopRequireDefault(_dompurify);
+_dompurify2.default.addHook("afterSanitizeAttributes", (node2) => {
+  if (node2.tagName === "A" && node2.getAttribute("target") === "_blank") {
+    node2.setAttribute("rel", "noopener noreferrer");
+  }
+});
+function sanitizeHtml(html) {
+  return _dompurify2.default.sanitize(html, {
+    ALLOWED_TAGS: [
+      "a",
+      "b",
+      "br",
+      "div",
+      "em",
+      "i",
+      "li",
+      "ol",
+      "p",
+      "small",
+      "span",
+      "strong",
+      "sub",
+      "sup",
+      "table",
+      "tbody",
+      "td",
+      "th",
+      "thead",
+      "tr",
+      "u",
+      "ul"
+    ],
+    ALLOWED_ATTR: ["class", "href", "target", "rel"]
+  });
+}
+
 // src/charts/geo-chart/geo-chart.module.scss
 var geo_chart_module_default = {
   "container": "a8ccharts-JvcqOz"
@@ -4337,7 +4415,40 @@ var GeoChartInternal = ({
   const lightColorHex = lightenHexColor(fullColorHex, 0.8);
   const backgroundColorHex = normalizeColorToHex(backgroundColor, null, resolveCssVariable) || DEFAULT_BACKGROUND_COLOR;
   const defaultFillColorHex = normalizeColorToHex(featureFillColor, null, resolveCssVariable) || DEFAULT_FEATURE_FILL_COLOR;
-  const hasHtmlTooltips = _react.useMemo.call(void 0, () => data.length > 0 && data[0].some((col) => typeof col === "object" && col !== null && "role" in col && col.role === "tooltip" && "p" in col && typeof col.p === "object" && col.p !== null && "html" in col.p && col.p.html === true), [data]);
+  const sanitizedData = _react.useMemo.call(void 0, () => {
+    if (data.length === 0) {
+      return {
+        data,
+        hasHtmlTooltips: false
+      };
+    }
+    const htmlTooltipIndices = [];
+    for (let i2 = 0; i2 < data[0].length; i2++) {
+      const col = data[0][i2];
+      if (typeof col === "object" && col !== null && "role" in col && col.role === "tooltip" && "p" in col && typeof col.p === "object" && col.p !== null && "html" in col.p && col.p.html === true) {
+        htmlTooltipIndices.push(i2);
+      }
+    }
+    if (htmlTooltipIndices.length === 0) {
+      return {
+        data,
+        hasHtmlTooltips: false
+      };
+    }
+    const sanitizedRows = data.slice(1).map((row) => {
+      const newRow = [...row];
+      for (const colIndex of htmlTooltipIndices) {
+        if (typeof newRow[colIndex] === "string") {
+          newRow[colIndex] = sanitizeHtml(newRow[colIndex]);
+        }
+      }
+      return newRow;
+    });
+    return {
+      data: [data[0], ...sanitizedRows],
+      hasHtmlTooltips: true
+    };
+  }, [data]);
   const options = _react.useMemo.call(void 0, () => ({
     ...region !== "world" && {
       region
@@ -4353,11 +4464,11 @@ var GeoChartInternal = ({
     defaultColor: defaultFillColorHex,
     tooltip: {
       trigger: "focus",
-      isHtml: hasHtmlTooltips
+      isHtml: sanitizedData.hasHtmlTooltips
     },
     legend: "none",
     keepAspectRatio: true
-  }), [region, resolution, lightColorHex, fullColorHex, backgroundColorHex, defaultFillColorHex, hasHtmlTooltips]);
+  }), [region, resolution, lightColorHex, fullColorHex, backgroundColorHex, defaultFillColorHex, sanitizedData.hasHtmlTooltips]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
     className: _clsx2.default.call(void 0, "geo-chart", geo_chart_module_default.container, className),
     style: {
@@ -4369,7 +4480,7 @@ var GeoChartInternal = ({
       chartType: "GeoChart",
       width,
       height,
-      data,
+      data: sanitizedData.data,
       options,
       loader: loadingPlaceholder
     })
@@ -6333,10 +6444,10 @@ var config_values_default = Object.assign({}, CONTROL_PROPS, {
 var import_es6 = _chunkEMMSS5I5cjs.__toESM.call(void 0, require_es6(), 1);
 
 
-// ../../../node_modules/.pnpm/@wordpress+warning@3.42.0/node_modules/@wordpress/warning/build-module/utils.mjs
+// ../../../node_modules/.pnpm/@wordpress+warning@3.43.0/node_modules/@wordpress/warning/build-module/utils.mjs
 var logged = /* @__PURE__ */ new Set();
 
-// ../../../node_modules/.pnpm/@wordpress+warning@3.42.0/node_modules/@wordpress/warning/build-module/index.mjs
+// ../../../node_modules/.pnpm/@wordpress+warning@3.43.0/node_modules/@wordpress/warning/build-module/index.mjs
 function isDev() {
   return globalThis.SCRIPT_DEBUG === true;
 }