feat(premium-analytics): port icons package from next-woocommerce-analytics

projects/js-packages/storybook/changelog/wooa7s-1314-integrate-icons-package-into-analytics

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Add premium-analytics internal packages stories

projects/js-packages/storybook/storybook/projects.js

@@ -13,6 +13,7 @@ export const projects = [
 	'projects/js-packages/scan/src',
 	'projects/js-packages/social-logos/src/react',
 	'projects/packages/my-jetpack/_inc/components',
+	'projects/packages/premium-analytics/packages',
 	'projects/packages/publicize/_inc/components',
 	'projects/packages/search/src/dashboard/components',
 	'projects/packages/videopress/src/client/admin/components',

projects/packages/premium-analytics/changelog/wooa7s-1314-integrate-icons-package-into-analytics

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Port icons package (illustrated WPDS icons + @wordpress/icons re-exports) as an internal package from next-woocommerce-analytics.

projects/packages/premium-analytics/package.json

@@ -6,6 +6,7 @@
 	"scripts": {
 		"build": "wp-build && mkdir -p build/modules/boot && cp shims/boot-asset.php build/modules/boot/index.min.asset.php",
 		"build-production": "NODE_ENV=production wp-build && mkdir -p build/modules/boot && cp shims/boot-asset.php build/modules/boot/index.min.asset.php",
+		"storybook": "cd ../../js-packages/storybook && pnpm run storybook:dev",
 		"typecheck": "tsgo --noEmit",
 		"watch": "wp-build --watch"
 	},
@@ -33,14 +34,20 @@
 		"@wordpress/data": "10.46.0",
 		"@wordpress/i18n": "^6.9.0",
 		"@wordpress/icons": "^13.0.0",
+		"@wordpress/primitives": "4.46.0",
 		"@wordpress/route": "0.12.0",
 		"react": "18.3.1",
 		"react-dom": "18.3.1"
 	},
 	"devDependencies": {
 		"@babel/core": "7.29.0",
+		"@storybook/react": "10.3.6",
+		"@testing-library/dom": "10.4.1",
 		"@typescript/native-preview": "7.0.0-dev.20260225.1",
 		"@wordpress/build": "0.14.0",
-		"browserslist": "4.28.2"
+		"@wordpress/ui": "0.13.0",
+		"browserslist": "4.28.2",
+		"storybook": "10.3.6",
+		"typescript": "5.9.3"
 	}
 }

projects/packages/premium-analytics/packages/icons/README.md

@@ -0,0 +1,34 @@
+# @automattic/jetpack-premium-analytics-icons
+
+Illustrated WPDS icons used by Premium Analytics widgets and navigation.
+
+## Overview
+
+13 branded multi-fill SVG illustrations (fills driven by
+`var(--wpds-color-*)` tokens).
+
+The illustrated icons are intentionally distinct from upstream
+`@wordpress/icons`, which ships 24×24 monochrome glyphs intended for
+`fill: currentColor` styling. Where a glyph is enough, import it directly
+from `@wordpress/icons` rather than adding a re-export here — keeping this
+package focused on the genuinely-custom illustrations and free of upstream
+names we'd otherwise have to track across `@wordpress/icons` bumps.
+
+## Usage
+
+```ts
+import { Icon } from '@wordpress/icons';
+import { calendar, search } from '@jetpack-premium-analytics/icons';
+
+<Icon icon={ calendar } size={ 48 } />;
+```
+
+## Exports
+
+`calendar`, `channel`, `coupon`, `customer`, `device`, `goal`, `location`,
+`megaphone`, `payment`, `paymentReturn`, `productBlouse`, `reports`,
+`search`
+
+## Dependencies
+
+- `@wordpress/primitives` — `SVG`, `Path`, `Circle`

projects/packages/premium-analytics/packages/icons/package.json

@@ -0,0 +1,16 @@
+{
+	"private": true,
+	"name": "@automattic/jetpack-premium-analytics-icons",
+	"version": "0.1.0",
+	"type": "module",
+	"main": "src/index.ts",
+	"types": "src/index.ts",
+	"sideEffects": false,
+	"dependencies": {
+		"@wordpress/primitives": "4.46.0"
+	},
+	"devDependencies": {
+		"@storybook/react": "10.3.6",
+		"@wordpress/ui": "0.13.0"
+	}
+}

projects/packages/premium-analytics/packages/icons/src/calendar/index.tsx

@@ -0,0 +1,75 @@
+/**
+ * External dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+export const calendar = (
+	<SVG width="36" height="40" viewBox="0 0 36 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Path
+			d="M8 12C8 10.8954 8.89543 10 10 10H38C39.1046 10 40 10.8954 40 12V40C40 41.1046 39.1046 42 38 42H10C8.89543 42 8 41.1046 8 40V12Z"
+			fill="var(--wpds-color-bg-surface-neutral-weak, #F0F0F0)"
+		/>
+		<Path
+			d="M8 12C8 10.8954 8.89543 10 10 10H38C39.1046 10 40 10.8954 40 12V18H8V12Z"
+			fill="var(--wpds-color-stroke-surface-neutral-weak, #E0E0E0)"
+		/>
+		<Path
+			d="M16 6V14"
+			stroke="var(--wpds-color-stroke-surface-neutral-weak, #E0E0E0)"
+			strokeWidth="4"
+			strokeLinecap="round"
+		/>
+		<Path
+			d="M32 6V14"
+			stroke="var(--wpds-color-stroke-surface-neutral-weak, #E0E0E0)"
+			strokeWidth="4"
+			strokeLinecap="round"
+		/>
+		<Path d="M14 24H18V28H14V24Z" fill="var(--wpds-color-stroke-surface-neutral-weak, #E0E0E0)" />
+		<Path d="M22 24H26V28H22V24Z" fill="var(--wpds-color-stroke-surface-neutral-weak, #E0E0E0)" />
+		<Path d="M30 24H34V28H30V24Z" fill="var(--wpds-color-stroke-surface-neutral-weak, #E0E0E0)" />
+		<Path d="M14 32H18V36H14V32Z" fill="var(--wpds-color-stroke-surface-neutral-weak, #E0E0E0)" />
+		<Path d="M22 32H26V36H22V32Z" fill="var(--wpds-color-stroke-surface-neutral-weak, #E0E0E0)" />
+
+		<Path
+			d="M0 11.5424V36.1275C0 38.5843 1.36201 39.998 3.76707 39.998H31.8175C34.2226 39.998 35.5846 38.5757 35.5846 36.1275V11.5424C35.5846 9.08564 34.2226 7.67191 31.8175 7.67191H3.76707C1.36201 7.66329 0 9.08564 0 11.5424Z"
+			fill="var(--wpds-color-bg-surface-neutral-weak, #F0F0F0)"
+		/>
+		<Path
+			d="M9.33551 25.7662C10.4303 25.7662 11.3527 24.8956 11.3527 23.7491C11.3527 22.6026 10.482 21.7319 9.33551 21.7319C8.18901 21.7319 7.31836 22.6026 7.31836 23.7491C7.31836 24.8956 8.18901 25.7662 9.33551 25.7662Z"
+			fill="var(--wpds-color-stroke-surface-neutral-weak, #E0E0E0)"
+		/>
+		<Path
+			d="M17.7916 25.7662C18.8863 25.7662 19.8087 24.8956 19.8087 23.7491C19.8087 22.6026 18.9381 21.7319 17.7916 21.7319C16.6451 21.7319 15.7744 22.6026 15.7744 23.7491C15.7744 24.8956 16.7054 25.7662 17.7916 25.7662Z"
+			fill="var(--wpds-color-stroke-surface-neutral-weak, #E0E0E0)"
+		/>
+		<Path
+			d="M26.2486 25.7662C27.3434 25.7662 28.2657 24.8956 28.2657 23.7491C28.2657 22.6026 27.3951 21.7319 26.2486 21.7319C25.1021 21.7319 24.2314 22.6026 24.2314 23.7491C24.2314 24.8956 25.1624 25.7662 26.2486 25.7662Z"
+			fill="var(--wpds-color-stroke-surface-neutral-weak, #E0E0E0)"
+		/>
+		<Path
+			d="M9.33551 34.4298C10.4303 34.4298 11.3527 33.5592 11.3527 32.4127C11.3527 31.2662 10.482 30.3955 9.33551 30.3955C8.18901 30.3955 7.31836 31.2662 7.31836 32.4127C7.31836 33.5592 8.18901 34.4298 9.33551 34.4298Z"
+			fill="var(--wpds-color-stroke-surface-neutral-weak, #E0E0E0)"
+		/>
+		<Path
+			d="M17.7916 34.4298C18.8863 34.4298 19.8087 33.5592 19.8087 32.4127C19.8087 31.2662 18.9381 30.3955 17.7916 30.3955C16.6451 30.3955 15.7744 31.2662 15.7744 32.4127C15.7744 33.5592 16.7054 34.4298 17.7916 34.4298Z"
+			fill="var(--wpds-color-stroke-surface-neutral-weak, #E0E0E0)"
+		/>
+		<Path
+			d="M26.2486 34.4298C27.3434 34.4298 28.2657 33.5592 28.2657 32.4127C28.2657 31.2662 27.3951 30.3955 26.2486 30.3955C25.1021 30.3955 24.2314 31.2662 24.2314 32.4127C24.2314 33.5592 25.1624 34.4298 26.2486 34.4298Z"
+			fill="var(--wpds-color-stroke-surface-neutral-weak, #E0E0E0)"
+		/>
+		<Path
+			d="M0 11.5424V16.1542H35.5846V11.5424C35.5846 9.0856 34.2226 7.67188 31.8175 7.67188H3.76707C1.36201 7.67188 0 9.09422 0 11.5424Z"
+			fill="var(--wpds-color-stroke-surface-neutral-weak, #E0E0E0)"
+		/>
+		<Path
+			d="M26.8 0H25.4639C23.9898 0 23.1191 0.818928 23.1191 2.34472V10.2064C23.1191 11.6805 23.9381 12.5512 25.4639 12.5512H26.8C28.2741 12.5512 29.1447 11.7322 29.1447 10.2064V2.34472C29.1447 0.87065 28.3258 0 26.8 0Z"
+			fill="var(--wpds-color-bg-surface-neutral-weak, #F0F0F0)"
+		/>
+		<Path
+			d="M10.1115 0H8.77539C7.30131 0 6.43066 0.818928 6.43066 2.34472V10.2064C6.43066 11.6805 7.24959 12.5512 8.77539 12.5512H10.1115C11.5856 12.5512 12.4563 11.7322 12.4563 10.2064V2.34472C12.4563 0.87065 11.6373 0 10.1115 0Z"
+			fill="var(--wpds-color-bg-surface-neutral-weak, #F0F0F0)"
+		/>
+	</SVG>
+);

projects/packages/premium-analytics/packages/icons/src/channel/index.tsx

@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+export const channel = (
+	<SVG width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Path
+			d="M38.4905 34.2427L32.8865 28.6385C33.6131 27.2519 34.0242 25.6742 34.0242 24.001C34.0242 22.3277 33.6131 20.7589 32.8932 19.3746C34.3864 17.8813 37.3773 14.8903 38.5105 13.7571C41.0126 14.657 43.9191 14.1037 45.9234 12.0994C48.6921 9.33063 48.6921 4.8442 45.9234 2.07768C43.1547 -0.688844 38.6683 -0.691066 35.9018 2.07768C33.8931 4.08646 33.3442 7.00186 34.2508 9.5084L28.6446 15.1148C27.2558 14.3881 25.6781 13.9748 24.0027 13.9748C18.4653 13.9748 13.9767 18.4635 13.9767 24.001C13.9767 25.6698 14.3878 27.243 15.1077 28.6274C13.6145 30.1207 10.6236 33.1116 9.49032 34.2449C6.98827 33.3449 4.08181 33.8982 2.0775 35.9026C-0.691198 38.6713 -0.691198 43.1578 2.0775 45.9243C4.8462 48.6908 9.33256 48.693 12.099 45.9243C14.1078 43.9155 14.6566 41.0001 13.75 38.4936L19.3563 32.8872C20.7451 33.6138 22.3228 34.0271 23.9982 34.0271C25.6737 34.0271 27.2424 33.616 28.629 32.8938C30.1245 34.3893 33.1087 37.3736 34.242 38.5069C33.342 41.009 33.8953 43.9155 35.8996 45.9198C38.6683 48.6886 43.1547 48.6886 45.9211 45.9198C48.6876 43.1511 48.6898 38.6647 45.9211 35.8981C43.9124 33.8894 40.997 33.3405 38.4905 34.2471V34.2427ZM38.9683 5.14641C40.0393 4.07535 41.777 4.07535 42.848 5.14641C43.9191 6.21746 43.9191 7.95515 42.848 9.0262C41.777 10.0973 40.0393 10.0973 38.9683 9.0262C37.8973 7.95515 37.8973 6.21746 38.9683 5.14641ZM9.02813 42.8511C7.95709 43.9222 6.21944 43.9222 5.1484 42.8511C4.07736 41.78 4.07736 40.0424 5.1484 38.9713C6.21944 37.9003 7.95709 37.9003 9.02813 38.9713C10.0992 40.0424 10.0992 41.78 9.02813 42.8511ZM25.9381 25.9387C24.867 27.0097 23.1294 27.0097 22.0583 25.9387C20.9873 24.8676 20.9873 23.1299 22.0583 22.0589C23.1294 20.9878 24.867 20.9878 25.9381 22.0589C27.0091 23.1299 27.0091 24.8676 25.9381 25.9387ZM42.8502 42.8444C41.7792 43.9155 40.0415 43.9155 38.9705 42.8444C37.8995 41.7734 37.8995 40.0357 38.9705 38.9646C40.0415 37.8936 41.7792 37.8936 42.8502 38.9646C43.9213 40.0357 43.9213 41.7734 42.8502 42.8444Z"
+			fill="var(--wpds-color-stroke-surface-neutral-weak, #E0E0E0)"
+		/>
+		<Path
+			d="M14.4434 1.76213L12.8191 3.00873C12.1103 2.54876 11.3148 2.21322 10.4615 2.03101L10.1971 0H7.74169L7.47504 2.03101C6.62177 2.21322 5.82627 2.54876 5.11965 3.00873L3.49531 1.76213L1.75988 3.4976L3.00646 5.12195C2.54649 5.83081 2.21096 6.62632 2.02875 7.47739L0 7.74404V10.1995L2.03097 10.4661C2.21318 11.3194 2.54871 12.1149 3.00868 12.8216L1.7621 14.4459L3.49754 16.1814L5.12187 14.9348C5.83071 15.3948 6.62621 15.7303 7.47726 15.9125L7.74391 17.9435H10.1993L10.4659 15.9125C11.3192 15.7303 12.1147 15.3948 12.8213 14.9348L14.4457 16.1814L16.1811 14.4459L14.9345 12.8216C15.3945 12.1127 15.73 11.3172 15.9122 10.4661L17.9432 10.1995V7.74404L15.9122 7.47739C15.7278 6.6241 15.3923 5.82858 14.9345 5.12195L16.1811 3.4976L14.4457 1.76213H14.4434ZM8.96827 11.5238C7.45282 11.5238 6.22402 10.295 6.22402 8.77954C6.22402 7.26407 7.45282 6.03524 8.96827 6.03524C10.4837 6.03524 11.7125 7.26407 11.7125 8.77954C11.7125 10.295 10.4837 11.5238 8.96827 11.5238Z"
+			fill="var(--wpds-color-bg-surface-neutral-weak, #F0F0F0)"
+		/>
+	</SVG>
+);

projects/packages/premium-analytics/packages/icons/src/coupon/index.tsx

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+export const coupon = (
+	<SVG width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Path
+			d="M45.6867 22.2099C45.3509 21.4007 44.2232 21.563 43.8962 20.7761C43.5692 19.9892 44.4834 19.3045 44.1475 18.4975C43.8117 17.6906 42.684 17.8507 42.357 17.0637C42.03 16.2768 42.9442 15.5921 42.6083 14.7852C42.2725 13.9783 41.1448 14.1383 40.8178 13.3514C40.4908 12.5645 41.405 11.8798 41.0691 11.0728C40.7333 10.2637 39.6056 10.426 39.2786 9.63904C38.9516 8.85211 39.8658 8.16744 39.5299 7.3605C39.1941 6.55134 38.0664 6.71362 37.7394 5.92669C37.4124 5.13976 38.3266 4.45509 37.9907 3.64815C37.6549 2.84122 36.5272 3.00127 36.2002 2.21434C35.8977 1.48521 36.6984 0.744962 36.5516 -0.00195312L0 15.0631C0.335867 15.8722 1.46358 15.7099 1.79055 16.4969C2.11752 17.2838 1.20334 17.9685 1.5392 18.7754C1.87507 19.5824 3.00278 19.4223 3.32975 20.2092C3.65672 20.9962 2.74254 21.6808 3.07841 22.4878C3.41427 23.2947 4.54198 23.1346 4.86895 23.9216C5.19592 24.7085 4.28174 25.3932 4.61761 26.2001C4.95347 27.0093 6.08119 26.847 6.40815 27.6339C6.73512 28.4209 5.82094 29.1055 6.15681 29.9125C6.49268 30.7194 7.62039 30.5593 7.94736 31.3463C8.27433 32.1332 7.36015 32.8179 7.69601 33.6248C8.03188 34.4317 9.15959 34.2717 9.48656 35.0586C9.78906 35.7878 8.98832 36.528 9.13512 37.2749L18.7952 33.2825L45.6912 22.2121L45.6867 22.2099Z"
+			fill="var(--wpds-color-stroke-surface-neutral-weak, #E0E0E0)"
+		/>
+		<Path
+			d="M42.5679 27.994C42.5679 24.9952 44.999 22.5655 47.9996 22.5655V15.9922H11.915V22.5655C14.9156 22.5655 17.3467 24.9952 17.3467 27.994C17.3467 30.9927 14.9156 33.4224 11.915 33.4224V39.9957H47.9996V33.4224C44.999 33.4224 42.5679 30.9927 42.5679 27.994Z"
+			fill="var(--wpds-color-bg-surface-neutral-weak, #F0F0F0)"
+		/>
+		<Path
+			d="M23.502 25.1173C23.502 23.4701 24.6764 22.1919 26.4647 22.1919C28.253 22.1919 29.443 23.4701 29.443 25.1173C29.443 26.7645 28.2686 28.0072 26.4647 28.0072C24.6608 28.0072 23.502 26.7467 23.502 25.1173ZM27.8638 25.1173C27.8638 24.1525 27.2699 23.559 26.4625 23.559C25.6551 23.559 25.079 24.1525 25.079 25.1173C25.079 26.0821 25.6729 26.64 26.4625 26.64C27.2521 26.64 27.8638 26.0443 27.8638 25.1173ZM25.3236 34.047L32.7861 22.3675H34.1184L26.636 34.047H25.3214H25.3236ZM29.9324 31.3683C29.9324 29.7233 31.1045 28.4273 32.8929 28.4273C34.6812 28.4273 35.8712 29.7233 35.8712 31.3683C35.8712 33.0133 34.679 34.2581 32.8929 34.2581C31.1068 34.2581 29.9324 32.9977 29.9324 31.3683ZM34.2942 31.3683C34.2942 30.4035 33.6981 29.81 32.8906 29.81C32.0832 29.81 31.5071 30.4035 31.5071 31.3683C31.5071 32.3331 32.0855 32.891 32.8906 32.891C33.6958 32.891 34.2942 32.313 34.2942 31.3683Z"
+			fill="var(--wpds-color-stroke-surface-neutral-weak, #E0E0E0)"
+		/>
+	</SVG>
+);

projects/packages/premium-analytics/packages/icons/src/customer/index.tsx

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+export const customer = (
+	<SVG width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Path
+			d="M24.0267 4C11.8622 4 2 13.8622 2 26.0267C2 38.1911 11.8622 48.0533 24.0267 48.0533C36.1911 48.0533 46.0533 38.1911 46.0533 26.0267C46.0533 13.8622 36.1933 4 24.0267 4Z"
+			fill="var(--wpds-color-bg-surface-neutral-weak, #F0F0F0)"
+		/>
+		<Path
+			d="M28.6423 15.2778C25.6712 12.729 21.1978 13.069 18.6489 16.0401C16.1001 19.0112 16.4401 23.4845 19.4112 26.0334C22.3823 28.5823 26.8556 28.2423 29.4045 25.2712C31.9534 22.3001 31.6134 17.8267 28.6423 15.2778Z"
+			fill="var(--wpds-color-stroke-surface-neutral-weak, #E0E0E0)"
+		/>
+		<Path
+			d="M24.0266 29.7734C29.0689 29.7734 35.9644 31.3157 35.9644 37.7668C35.9644 38.6957 35.9644 41.7423 35.9644 44.5401C32.5244 46.7623 28.4266 48.0534 24.0266 48.0534C19.6266 48.0534 15.5289 46.7623 12.0889 44.5401C12.0889 41.8201 12.0889 38.8357 12.0889 37.7668C12.0889 31.3179 18.9844 29.7734 24.0266 29.7734Z"
+			fill="var(--wpds-color-stroke-surface-neutral-weak, #E0E0E0)"
+		/>
+	</SVG>
+);

projects/packages/premium-analytics/packages/icons/src/device/index.tsx

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+export const device = (
+	<SVG width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Path
+			d="M14.0039 47.9999H42.026V44.0449H14.0039V47.9999Z"
+			fill="var(--wpds-color-bg-track-neutral-weak, #E0E0E0)"
+		/>
+		<Path
+			d="M43.5519 12.125H12.4763C10.0188 12.125 8.02832 14.1136 8.02832 16.5688V34.073H47.9998V16.5688C47.9998 14.1136 46.0094 12.125 43.5519 12.125Z"
+			fill="var(--wpds-color-bg-surface-neutral-weak, #F0F0F0)"
+		/>
+		<Path
+			d="M42.026 36.1348H14.0039V40.0898H42.026V36.1348Z"
+			fill="var(--wpds-color-stroke-surface-brand, #D1C1FF)"
+		/>
+		<Path
+			d="M8.02832 34.0728V35.6459C8.02832 38.1011 10.0188 40.0897 12.4763 40.0897H43.5519C46.0094 40.0897 47.9998 38.1011 47.9998 35.6459V34.0728H8.02832Z"
+			fill="var(--wpds-color-bg-surface-neutral-weak, #F0F0F0)"
+		/>
+		<Path
+			d="M35.304 40.0898H21.293V44.0448H35.304V40.0898Z"
+			fill="var(--wpds-color-bg-track-neutral-weak, #E0E0E0)"
+		/>
+		<Path
+			d="M12.1807 0H3.87639C1.40111 0 0 1.37981 0 3.8439V25.9008C0 28.3627 1.40333 29.7447 3.87862 29.7447H12.1807C14.656 29.7447 16.0571 28.3627 16.0571 25.9008V3.8439C16.0571 1.38203 14.6538 0 12.1785 0H12.1807Z"
+			fill="var(--wpds-color-bg-track-neutral-weak, #E0E0E0)"
+		/>
+		<Path
+			d="M11.5647 1.98438H4.49023V3.98187H11.5647V1.98438Z"
+			fill="var(--wpds-color-bg-surface-neutral-weak, #F0F0F0)"
+		/>
+	</SVG>
+);

projects/packages/premium-analytics/packages/icons/src/goal/index.tsx

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+export const goal = (
+	<SVG width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Path
+			d="M27.867 12.5823C32.3058 12.5823 35.9173 16.1937 35.9173 20.6326C35.9173 25.0715 32.3058 28.6829 27.867 28.6829C23.4281 28.6829 19.8167 25.0715 19.8167 20.6326C19.8167 16.1937 23.4281 12.5823 27.867 12.5823ZM27.867 8.55713C21.1964 8.55713 15.7915 13.9643 15.7915 20.6326C15.7915 27.3009 21.1986 32.7081 27.867 32.7081C34.5353 32.7081 39.9424 27.3009 39.9424 20.6326C39.9424 13.9643 34.5353 8.55713 27.867 8.55713Z"
+			fill="var(--wpds-color-bg-surface-neutral-weak, #F0F0F0)"
+		/>
+		<Path
+			d="M27.867 24.6486C30.0851 24.6486 31.8833 22.8505 31.8833 20.6324C31.8833 18.4143 30.0851 16.6162 27.867 16.6162C25.6489 16.6162 23.8508 18.4143 23.8508 20.6324C23.8508 22.8505 25.6489 24.6486 27.867 24.6486Z"
+			fill="var(--wpds-color-bg-surface-neutral-weak, #F0F0F0)"
+		/>
+		<Path
+			d="M12.3434 40.452C12.643 41.3934 12.4328 41.7579 11.762 42.4288C10.7848 43.406 6.67686 47.5139 6.17371 48.0171C5.22333 48.9675 4.32438 48.3547 4.09181 47.5944C3.9487 47.1293 3.33374 45.1637 3.33374 45.1637L11.3326 37.1648C11.3326 37.1648 11.9342 39.1662 12.3411 40.452H12.3434Z"
+			fill="var(--wpds-color-stroke-surface-neutral-weak, #E0E0E0)"
+		/>
+		<Path
+			d="M8.04983 36.1585C7.10839 35.8589 6.74389 36.0691 6.07303 36.7399C5.09581 37.7171 0.987918 41.825 0.484773 42.3282C-0.465611 43.2786 0.147107 44.1775 0.907415 44.4101C1.37254 44.5532 3.33816 45.1681 3.33816 45.1681L11.337 37.1693C11.337 37.1693 9.33565 36.5677 8.04983 36.1607V36.1585Z"
+			fill="var(--wpds-color-stroke-surface-neutral-weak, #E0E0E0)"
+		/>
+		<Path
+			d="M27.8669 4.52516C36.7491 4.52516 43.9742 11.7503 43.9742 20.6325C43.9742 29.5147 36.7491 36.7398 27.8669 36.7398C18.9847 36.7398 11.7595 29.5147 11.7595 20.6325C11.7595 11.7503 18.9869 4.52516 27.8669 4.52516ZM27.8669 0.5C16.7485 0.5 7.73438 9.51412 7.73438 20.6325C7.73438 31.7509 16.7485 40.765 27.8669 40.765C38.9853 40.765 47.9994 31.7509 47.9994 20.6325C47.9994 9.51412 38.9875 0.5 27.8669 0.5Z"
+			fill="var(--wpds-color-bg-surface-neutral-weak, #F0F0F0)"
+		/>
+		<Path
+			d="M28.0505 21.8601C28.7549 21.1534 27.3438 19.7468 26.6394 20.4535L4.23047 42.8624L5.63927 44.2712"
+			fill="var(--wpds-color-stroke-surface-neutral-weak, #E0E0E0)"
+		/>
+	</SVG>
+);