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>

Author: 3 people

pnpm-lock.yaml

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Fix Line Chart Annotations Custom and Alert story errors in Storybook by replacing the CJS-only gridicons dependency with @wordpress/icons.

projects/js-packages/charts/changelog/fix-annotation-popover-gridicon

@@ -87,14 +87,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"
 	},

projects/js-packages/charts/package.json

@@ -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>