Charts: Fix Line Chart Annotations Custom story error in Storybook (#47990)

* Charts: Replace gridicons with inline SVG to fix Storybook Vite transform error

The gridicons package is CJS-only, which causes Vite's CJS-to-ESM interop
in Storybook to fail when resolving the default export. This results in
Gridicon being treated as an object instead of a React component, throwing
'Element type is invalid... got: object' in LineChartAnnotationLabelWithPopover.

Replace the single Gridicon usage (cross icon in popover close button) with
an inline SVG component using the same path data. This eliminates the
CJS interop issue and also removes the gridicons dependency (~106KB) from
the charts package.

Ref CHARTS-208

* Add changelog entry for CHARTS-208 fix

* Charts: Use @wordpress/icons instead of inline SVG for close icon

Replace the inline CloseIcon SVG with the close icon from @wordpress/icons
to align with WordPress ecosystem conventions. The package is tree-shakeable
and already used widely across the monorepo.

* Update changelog entry to reflect @wordpress/icons usage

* Update changelog

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/24167983418

Upstream-Ref: Automattic/jetpack@0b78e64

Author: adamwoodnz

CHANGELOG.md

@@ -14,6 +14,7 @@ This is an alpha version! The changes listed here are not final.
 - Update package dependencies.
 
 ### Fixed
+- Fix Line Chart Annotations Custom and Alert story errors in Storybook by replacing the CJS-only gridicons dependency with @wordpress/icons.
 - Storybook: Replace manual design-system token override with real WPDS ThemeProvider.
 
 ## [1.0.2] - 2026-04-06

dist/index.cjs

@@ -6926,8 +6926,8 @@ var line_chart_module_default = {
 
 // src/charts/line-chart/private/line-chart-annotation-label-popover.tsx
 
+var _icons = require('@wordpress/icons');
 
-var _gridicons = require('gridicons'); var _gridicons2 = _interopRequireDefault(_gridicons);
 
 
 var POPOVER_BUTTON_SIZE = 44;
@@ -7000,8 +7000,8 @@ var LineChartAnnotationLabelWithPopover = ({
           popovertargetaction: "hide",
           className: line_chart_module_default["line-chart__annotation-label-popover-close-button"],
           "aria-label": _i18n.__.call(void 0, "Close", "jetpack-charts"),
-          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _gridicons2.default, {
-            icon: "cross",
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _icons.Icon, {
+            icon: _icons.close,
             size: 16
           })
         })]
@@ -8822,7 +8822,7 @@ var DIRECTION_LABELS = {
   down: "Decrease",
   neutral: "No change"
 };
-var Icon = ({
+var Icon2 = ({
   direction
 }) => {
   if (direction === "neutral") {
@@ -8855,7 +8855,7 @@ function TrendIndicator({
     className: _clsx2.default.call(void 0, trend_indicator_module_default["trend-indicator"], trend_indicator_module_default[`trend-indicator--${direction}`], className),
     style,
     "aria-label": ariaLabel,
-    children: [showIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, {
+    children: [showIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon2, {
       direction
     }), /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {
       className: trend_indicator_module_default["trend-indicator__value"],

dist/index.cjs.map

@@ -83,14 +83,14 @@
 		"@visx/vendor": "^3.12.0",
 		"@visx/xychart": "^3.12.0",
 		"@wordpress/i18n": "^6.0.0",
+		"@wordpress/icons": "^12.0.0",
 		"@wordpress/theme": "0.10.0",
 		"@wordpress/ui": "0.9.0",
 		"clsx": "2.1.1",
 		"date-fns": "^4.1.0",
 		"deepmerge": "4.3.1",
 		"dompurify": "^3.3.3",
 		"fast-deep-equal": "3.1.3",
-		"gridicons": "3.4.2",
 		"react-google-charts": "^5.2.1",
 		"tslib": "2.8.1"
 	},

dist/index.js

@@ -1,6 +1,6 @@
 import { __ } from '@wordpress/i18n';
+import { Icon, close } from '@wordpress/icons';
 import clsx from 'clsx';
-import Gridicon from 'gridicons';
 import { useEffect, useId, useRef, useState } from 'react';
 import { isSafari } from '../../../utils';
 import styles from '../line-chart.module.scss';
@@ -100,7 +100,7 @@ const LineChartAnnotationLabelWithPopover: FC< LineChartAnnotationLabelWithPopov
 						className={ styles[ 'line-chart__annotation-label-popover-close-button' ] }
 						aria-label={ __( 'Close', 'jetpack-charts' ) }
 					>
-						<Gridicon icon="cross" size={ 16 } />
+						<Icon icon={ close } size={ 16 } />
 					</button>
 				</div>
 			</div>